:root {
  --bg:        #fdf2f8; /* Soft pink background */
  --surface:   #ffffff;
  --surface2:  #fdf4ff;
  --surface3:  #fce7f3;
  --border:    #fbcfe8;
  --border-dk: #f9a8d4;
  --ink:       #4c1d95; /* Deep purple text */
  --ink2:      #7c3aed;
  --ink3:      #8b5cf6;
  --panel:     #ff2a7a; /* Vibrant pink */
  --panel2:    #ff7eb3;
  --panel-txt: #ffffff;
  --panel-dim: #ffe4e6;
  --white:     #ffffff;
  --primary:   #ec4899;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); font-family:'DM Sans', sans-serif; font-size:12px; color:var(--ink); }
code, .mono { font-family:'DM Mono', monospace; }

/* ── TOP NAV ── */
.topnav {
  background:var(--panel);
  border-bottom:1px solid var(--panel2);
  padding:6px 12px;
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  position:sticky;
  top:0;
  z-index:999;
  align-items:center;
}
.topnav-brand {
  font-family:'DM Mono', monospace;
  font-size:9px;
  font-weight:500;
  color:var(--panel-dim);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 10px 4px 0;
  border-right:1px solid var(--panel2);
  margin-right:4px;
  white-space:nowrap;
}
.topnav-section {
  font-family:'DM Mono', monospace;
  font-size:8px;
  font-weight:500;
  color:var(--panel-dim);
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 8px;
  border-left:1px solid var(--panel2);
  margin-left:2px;
}
.topnav button {
  background:transparent;
  color:var(--panel-dim);
  border:1px solid transparent;
  padding:4px 10px;
  font-size:10px;
  cursor:pointer;
  font-family:'DM Sans', sans-serif;
  font-weight:500;
  letter-spacing:.01em;
  transition:all .12s;
  border-radius:2px;
}
.topnav button:hover:not(.active) { background:var(--panel2); color:var(--panel-txt); }
.topnav button.active { background:var(--surface); color:var(--ink); font-weight:600; border-color:var(--border); }

/* ── PAGE ── */
.page { display:none; padding:0; min-height: 100vh; background: var(--surface); }
.page.active { display:block; }

/* ── FRAME ── */
.frame {
  background:var(--surface);
  width:100%;
  margin:0;
  border-radius:0;
  box-shadow:none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── HEADER ── */
.hd {
  background:var(--white);
  border-bottom:1px solid var(--border);
}
.hd-inner {
  max-width:1200px;
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:0;
  padding: 10px 20px;
}
.hd-logo {
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-sq {
  width:42px;
  height:42px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'DM Sans', sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--white);
  background: linear-gradient(135deg, var(--panel), var(--panel2));
  text-align:center;
  line-height:1.2;
  box-shadow: 0 4px 10px rgba(255, 42, 122, 0.4);
}
.hd-title {
  flex:1;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hd-title .t1 {
  font-family:'DM Sans', sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
}
.hd-title .t2 {
  font-size:12px;
  font-weight:500;
  color:var(--ink3);
  margin-top:2px;
}
.hd-title .t3 {
  display:none;
}
.hd-search {
  flex:1;
  max-width:320px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface2);
  border-radius:20px;
  margin-right: 20px;
}
.hd-search .search-input {
  flex:1;
  border:none;
  background:transparent;
  padding:4px;
  font-size:12px;
  font-family:'DM Sans', sans-serif;
  color:var(--ink);
  outline:none;
}
.hd-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

/* ── PUB NAV ── */
.pub-nav {
  background:var(--white);
  border-bottom:1px solid var(--border);
}
.pub-nav-inner {
  max-width:1200px;
  width:100%;
  margin:0 auto;
  display:flex;
  padding: 0 20px;
}
.pub-nav-item {
  padding:14px 20px;
  font-size:13px;
  font-weight:600;
  color:var(--ink3);
  cursor:pointer;
  position:relative;
  transition:color 0.2s;
}
.pub-nav-item:hover { color:var(--panel); }
.pub-nav-item.active {
  color:var(--panel);
}
.pub-nav-item.active::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--panel);
  border-radius:3px 3px 0 0;
}

/* ── BUTTONS ── */
.btn {
  background:var(--surface3);
  border:none;
  color:var(--ink);
  padding:8px 18px;
  font-family:'DM Sans', sans-serif;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  border-radius:20px;
  transition:all .2s;
}
.btn:hover { background:var(--border); transform:translateY(-1px); }
.btn:active { transform:translateY(1px); }
.btn-dk { background:var(--panel); color:var(--panel-txt); box-shadow:0 4px 10px rgba(255,42,122,0.3); }
.btn-dk:hover { background:var(--panel2); box-shadow:0 6px 14px rgba(255,42,122,0.4); }
.btn-sm { padding:6px 14px; font-size:11px; }

/* ── TOP BAR ── */
.topbar {
  background:var(--surface2);
  border-bottom:1px solid var(--border);
}
.topbar-inner {
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:8px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.topbar-left {
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar-title {
  font-weight:600;
  font-size:11px;
  letter-spacing:.01em;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:6px;
}
.bc {
  font-family:'DM Mono', monospace;
  font-size:8.5px;
  color:var(--ink3);
}
.bc span { color:var(--ink2); }

/* ── SIDEBAR ── */
.layout { display:flex; max-width:1200px; width:100%; margin:0 auto; flex: 1; align-items: stretch; }
.sb {
  width:220px;
  min-width:220px;
  background:var(--surface2);
  border-right:1px solid var(--border);
  border-left:1px solid var(--border);
  flex-shrink:0;
}
.sb-label {
  background:var(--panel);
  color:var(--panel-dim);
  font-family:'DM Mono', monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:12px 16px;
  border-bottom:1px solid var(--panel2);
}
.sb-user {
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:var(--white);
  display:flex;
  align-items:center;
  gap:12px;
}
.sb-avatar {
  width:40px;
  height:40px;
  border:1px solid var(--border-dk);
  background:var(--surface3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'DM Mono', monospace;
  font-size:10px;
  font-weight:600;
  color:var(--ink2);
  flex-shrink:0;
  border-radius:50%;
}
.sb-user-info .u1 { font-size:12px; font-weight:700; color:var(--ink); }
.sb-user-info .u2 { font-family:'DM Mono', monospace; font-size:10px; color:var(--ink3); margin-top:2px; }
.nav { list-style:none; }
.nav > li { border-bottom:1px solid var(--border); }
.nav > li > a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  text-decoration:none;
  color:var(--ink2);
  font-size:13px;
  font-weight:600;
}
.nav > li.active > a { background:var(--panel); color:var(--panel-txt); }
.nav > li > a:hover:not(.active-a) { background:var(--surface3); }
.nav .sub { list-style:none; background:var(--surface); border-top:1px solid var(--border); }
.nav .sub li { border-bottom:1px solid var(--border); }
.nav .sub li a {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px 6px 26px;
  text-decoration:none;
  color:var(--ink2);
  font-size:10px;
}
.nav .sub li.active a { background:var(--panel2); color:var(--panel-txt); }
.nav .sub li a:hover { background:var(--surface3); }
.sb-footer {
  border-top:1px solid var(--border);
  padding:8px 12px;
  font-size:9px;
  color:var(--ink3);
  font-family:'DM Mono', monospace;
}

/* ── MAIN ── */
.main { flex:1; min-width:0; }
.content { 
  max-width:1200px; 
  margin:0 auto; 
  padding:20px 40px; 
  background:var(--surface); 
  min-height:520px; 
}

/* ── CARDS ── */
.card {
  border:none;
  margin-bottom:16px;
  background:var(--white);
  border-radius:12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  overflow:hidden;
}
.card-hd {
  background:var(--white);
  color:var(--ink);
  padding:14px 20px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
}
.card-body { padding:20px; }

/* ── TABLE ── */
.tbl { width:100%; border-collapse:collapse; font-size:12px; }
.tbl th {
  border:none;
  border-bottom:2px solid var(--border);
  padding:10px 14px;
  background:var(--white);
  font-weight:700;
  text-align:left;
  font-size:11px;
  letter-spacing:.02em;
  color:var(--ink3);
  text-transform:uppercase;
}
.tbl td { border:none; border-bottom:1px solid var(--border); padding:10px 14px; color:var(--ink); }
.tbl tr:hover td { background:var(--surface2); }

/* ── FORM ── */
.fg { margin-bottom:12px; }
.fg label { display:block; font-size:11px; margin-bottom:6px; font-weight:700; color:var(--ink); }
.fc {
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-size:12px;
  background:var(--white);
  font-family:'DM Sans', sans-serif;
  color:var(--ink);
  outline:none;
  transition: border-color 0.2s;
}
.fc:focus { border-color:var(--panel); }
.form-row { display:flex; gap:12px; }
.form-row .fg { flex:1; }

.btn-group { display:flex; gap:6px; }

/* ── BADGE ── */
.badge {
  display:inline-block;
  padding:2px 8px;
  font-size:8.5px;
  font-family:'DM Mono', monospace;
  font-weight:500;
  letter-spacing:.04em;
  border:1px solid;
}
.bdg-ok   { background:#e8f0e8; color:#3a5a3a; border-color:#a8c8a8; }
.bdg-warn { background:#f0ede4; color:#6a5020; border-color:#d4bc84; }
.bdg-off  { background:#ebebeb; color:#5a5a56; border-color:#c0c0bc; }
.bdg-dk   { background:var(--panel); color:var(--panel-txt); border-color:var(--panel); }
.bdg-rec  { background:#e8eef4; color:#2a4060; border-color:#a0b8d0; }

/* ── STAT ── */
.stat-grid { display:grid; gap:10px; margin-bottom:12px; }
.g4 { grid-template-columns:repeat(4,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g2 { grid-template-columns:repeat(2,1fr); }
.stat {
  border:1px solid var(--border);
  padding:12px;
  background:var(--white);
  text-align:center;
}
.stat .sl {
  font-family:'DM Mono', monospace;
  font-size:7.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink3);
  margin-bottom:6px;
}
.stat .sn { font-size:20px; font-weight:700; color:var(--ink); font-family:'DM Sans', sans-serif; }
.stat .ss { font-family:'DM Mono', monospace; font-size:8px; color:var(--ink3); margin-top:3px; }

/* ── PRODUCT GRID ── */
.prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:20px; }
.prod-card {
  border:none;
  background:var(--white);
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.prod-card:hover {
  transform:translateY(-5px);
  box-shadow: 0 10px 25px rgba(255, 42, 122, 0.15);
}
.prod-img {
  height:180px;
  background:var(--surface2);
  display:flex;
  align-items:center;
  justify-content:center;
}
.prod-img-ph {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--ink3);
  font-family:'DM Sans', sans-serif;
  font-weight: 700;
  text-align:center;
  background: linear-gradient(45deg, var(--surface2), var(--surface3));
}
.prod-info { padding:14px; }
.prod-name { font-size:14px; font-weight:700; color:var(--ink); line-height:1.4; margin-bottom:6px; }
.prod-cat { font-family:'DM Sans', sans-serif; font-size:11px; color:var(--ink3); margin-bottom:8px; }
.prod-price { font-size:16px; font-weight:700; color:var(--panel); }
.prod-score { font-family:'DM Mono', monospace; font-size:10px; color:var(--ink3); margin-top:8px; }

/* ── STAR RATING ── */
.stars { color:var(--border-dk); font-size:11px; letter-spacing:1px; }

/* ── RATING MATRIX ── */
.matrix-wrap { overflow-x:auto; }
.matrix-tbl { border-collapse:collapse; font-size:9px; font-family:'DM Mono', monospace; }
.matrix-tbl th, .matrix-tbl td { border:1px solid var(--border); padding:4px 7px; text-align:center; }
.matrix-tbl th { background:var(--surface2); font-weight:600; color:var(--ink); }
.matrix-tbl td { background:var(--white); color:var(--ink2); min-width:28px; }
.matrix-tbl td.rated { background:var(--surface2); color:var(--ink); font-weight:500; }
.matrix-tbl td.predicted { background:#e8eef4; color:#2a4060; font-weight:600; }
.matrix-tbl td.empty { color:var(--border); }
.matrix-tbl .row-lbl { text-align:left; font-weight:600; color:var(--ink); background:var(--surface2); padding:4px 10px; white-space:nowrap; }

/* ── CF DIAGRAM ── */
.cf-step { display:flex; align-items:stretch; gap:0; margin-bottom:12px; }
.cf-box {
  flex:1;
  border:1px solid var(--border);
  padding:10px;
  background:var(--white);
  text-align:center;
  font-size:9.5px;
  font-weight:500;
  color:var(--ink);
}
.cf-box .cf-label { font-family:'DM Mono', monospace; font-size:7.5px; color:var(--ink3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.cf-box .cf-main { font-size:10px; font-weight:600; }
.cf-arrow { display:flex; align-items:center; padding:0 6px; color:var(--border-dk); font-size:14px; flex-shrink:0; }
.cf-box-dk { background:var(--panel); color:var(--panel-txt); border-color:var(--panel); }
.cf-box-dk .cf-label { color:var(--panel-dim); }
.cf-box-dk .cf-main { color:var(--panel-txt); }

/* ── SIMILARITY BAR ── */
.sim-bar-wrap { display:flex; align-items:center; gap:8px; }
.sim-bar-bg { flex:1; height:6px; background:var(--surface2); border:1px solid var(--border); }
.sim-bar-fill { height:100%; background:var(--panel); }
.sim-val { font-family:'DM Mono', monospace; font-size:9px; color:var(--ink2); min-width:32px; }

/* ── PROGRESS STEP ── */
.steps { display:flex; align-items:center; margin-bottom:14px; gap:0; }
.step { flex:1; padding:6px 4px; text-align:center; border:1px solid var(--border); font-size:9px; font-weight:500; background:var(--surface2); color:var(--ink2); font-family:'DM Mono', monospace; letter-spacing:.02em; }
.step.active { background:var(--panel); color:var(--panel-txt); }
.step-arr { padding:0 3px; font-size:10px; color:var(--border-dk); flex-shrink:0; }

/* ── LOGIN ── */
.login-wrap { min-height:560px; background:var(--surface2); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.login-box { width:360px; border:1px solid var(--border-dk); background:var(--white); }
.login-hd { background:var(--panel); color:var(--panel-txt); padding:20px; text-align:center; }
.login-hd .lh1 { font-family:'DM Mono', monospace; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.login-hd .lh2 { font-size:9px; color:var(--panel-dim); margin-top:4px; }
.login-body { padding:20px; }
.login-foot { border-top:1px solid var(--border); padding:10px; text-align:center; font-size:9px; background:var(--surface2); color:var(--ink3); }

/* ── ALERT ── */
.alert {
  border:1px solid var(--border);
  padding:8px 12px;
  font-size:10px;
  margin-bottom:10px;
  background:var(--surface2);
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink2);
}
.alert-rec { background:#e8eef4; border-color:#a0b8d0; color:#2a4060; }

/* ── ICON SVG ── */
svg.ic { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:middle; }
svg.ic-sm { width:16px; height:16px; }

/* ── DFD / DIAGRAM ── */
.diag-wrap { background:var(--white); border:1px solid var(--border-dk); max-width:980px; margin:0 auto; padding:22px; }
.diag-title { font-family:'DM Mono', monospace; font-size:12px; font-weight:500; text-align:center; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:4px; }
.diag-sub { font-size:9px; text-align:center; color:var(--ink3); margin-bottom:18px; border-bottom:1px solid var(--border); padding-bottom:12px; font-family:'DM Mono', monospace; }

/* ── MENU TREE ── */
.sm-wrap { background:var(--white); border:1px solid var(--border-dk); max-width:980px; margin:0 auto; padding:22px; margin-bottom:16px; }
.sm-title { font-family:'DM Mono', monospace; font-size:11px; font-weight:500; text-align:center; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin-bottom:4px; }
.sm-sub { font-size:9px; text-align:center; color:var(--ink3); margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:12px; font-family:'DM Mono', monospace; }
.sm-role { display:inline-block; background:var(--panel); color:var(--panel-txt); font-family:'DM Mono', monospace; font-size:9px; font-weight:500; letter-spacing:.08em; padding:4px 16px; margin-bottom:16px; text-transform:uppercase; }

/* ── PUB NAV ── */
.pub-nav { border-bottom:1px solid var(--border); background:var(--white); display:flex; }
.pub-nav-item { padding:8px 16px; font-size:10.5px; font-weight:500; cursor:default; color:var(--ink2); border-right:1px solid var(--border); }
.pub-nav-item.active { background:var(--panel); color:var(--panel-txt); }

/* ── FOOTER STRIP ── */
.foot-strip { background:var(--panel); padding:8px 14px; text-align:center; }
.foot-strip span { font-family:'DM Mono', monospace; font-size:8.5px; color:var(--panel-dim); }

/* ── SECTION DIVIDER ── */
.sec-divider {
  font-family:'DM Mono', monospace;
  font-size:8px;
  font-weight:500;
  color:var(--ink3);
  text-transform:uppercase;
  letter-spacing:.1em;
  border-bottom:1px solid var(--border);
  padding-bottom:4px;
  margin:14px 0 10px;
}

/* ── DROPDOWN ── */
.dropdown { position:relative; display:inline-block; }
.dropdown-btn { display:flex; align-items:center; gap:6px; cursor:pointer; }
.dropdown-content {
  display:none;
  position:absolute;
  right:0;
  top:100%;
  background-color:var(--white);
  min-width:180px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  border-radius:8px;
  border:1px solid var(--border);
  z-index:9999;
  overflow:hidden;
}
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content { display:block; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.dropdown-item {
  color:var(--ink);
  padding:12px 16px;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:500;
  border-bottom:1px solid var(--surface2);
  transition:background 0.2s;
}
.dropdown-item:last-child { border-bottom:none; }
.dropdown-item:hover { background-color:var(--surface3); color:var(--panel); }
.dropdown-divider { height:1px; background-color:var(--border); margin:4px 0; }