/* === NexDesign AI — App-specific styles ===
   Depends on: tokens.css, orbs.css, toast.css
   Scope: nexdesign-app.html only
*/

/* ─── VARIABLE ALIASES ──────────────────────────────────
   tokens.css uses --indigo / --violet / --amber / --orange
   nexdesign-app uses short forms: --ind / --vio / --amb / --orange (--or unused)
   Aliases keep both forms working without touching markup.
*/
:root {
  --ind: var(--indigo);
  --vio: var(--violet);
  --amb: var(--amber);
  --or:  var(--orange);
}

/* ─── THEME VARS (nexdesign-specific) ───────────────────
   These add --sur2, --sb, --card, --bdr2 that tokens.css
   does NOT define; and redefine --bg/--bg2/--bg3 with
   nexdesign-specific values.
*/
[data-theme="dark"] {
  --bg:   #030609;
  --bg2:  #050A14;
  --bg3:  #080E1C;
  --text: #F2F7FF;
  --text2:#B0C8E4;
  --text3:#5A7898;
  --bdr:  rgba(255,255,255,.08);
  --bdr2: rgba(255,255,255,.15);
  --sur:  rgba(8,14,30,.94);
  --sur2: rgba(12,20,42,.97);
  --sb:   rgba(4,7,16,.96);
  --card: rgba(6,11,24,.95);
}

[data-theme="light"] {
  --bg:   #EEF2FF;
  --bg2:  #F8F9FF;
  --bg3:  #E4E9FF;
  --text: #0A1020;
  --text2:#304060;
  --text3:#6888AA;
  --bdr:  rgba(80,100,200,.1);
  --bdr2: rgba(80,100,200,.2);
  --sur:  rgba(255,255,255,.95);
  --sur2: #fff;
  --sb:   rgba(248,250,255,.97);
  --card: rgba(255,255,255,.92);
}

/* ─── BASE OVERRIDES ────────────────────────────────────
   overflow:hidden required for the studio full-viewport layout.
*/
html, body {
  height: 100%;
  font-family: "Noto Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* ─── ORB OVERRIDES (nexdesign uses named classes, not nth-child) ── */
.orb { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; animation: drift 14s ease-in-out infinite alternate; opacity: .3; will-change: transform; }
.o1  { width: 700px; height: 700px; background: #00C9A7; top: -20%; left: -15%; animation-delay: 0s; }
.o2  { width: 500px; height: 500px; background: #0EA5E9; top: 20%; right: -15%; animation-delay: -4s; }
.o3  { width: 420px; height: 420px; background: #6366F1; bottom: -15%; left: 25%; animation-delay: -8s; }
.o4  { width: 350px; height: 350px; background: #A855F7; top: 40%; left: 50%; animation-delay: -11s; }
[data-theme="light"] .orb { opacity: .08; }

/* ─── TOAST (nexdesign uses a simple #toast div, not #toast-container) ── */
#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(3,6,9,.97);
  border: 1px solid rgba(0,201,167,.3);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c1);
  transition: transform .3s cubic-bezier(.34,1.2,.64,1);
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
}

/* ─── PILL VARIANTS ─────────────────────────────────────
   Override tokens.css .pill with nexdesign-specific inline-flex style
   and add the .p-* colour modifiers.
*/
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid;
}
.p-t    { background: rgba(0,201,167,.08);   border-color: rgba(0,201,167,.2);   color: var(--c1); }
.p-b    { background: rgba(14,165,233,.08);  border-color: rgba(14,165,233,.2);  color: var(--c2); }
.p-g    { background: rgba(34,197,94,.08);   border-color: rgba(34,197,94,.2);   color: var(--green); }
.p-gold { background: rgba(201,168,76,.08);  border-color: rgba(201,168,76,.2);  color: var(--gold); }
.p-r    { background: rgba(239,68,68,.08);   border-color: rgba(239,68,68,.2);   color: var(--red); }

/* ─── LAYOUT ────────────────────────────────────────────*/
#app  { display: flex; height: 100vh; overflow: hidden; position: relative; z-index: 1; }

/* ─── SIDEBAR ───────────────────────────────────────────*/
#sb { width: 220px; flex-shrink: 0; height: 100vh; background: var(--sb); border-right: 1px solid var(--bdr); display: flex; flex-direction: column; overflow-y: auto; z-index: 10; }
#sb::-webkit-scrollbar { width: 3px; }
#sb::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

.sb-head     { padding: 16px 14px 12px; border-bottom: 1px solid var(--bdr); }
.sb-brand    { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sb-brand-ico{ width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg,rgba(0,201,167,.25),rgba(14,165,233,.15)); border: 1px solid rgba(0,201,167,.35); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.sb-brand-t  { font-size: 13px; font-weight: 900; background: linear-gradient(135deg,#00C9A7,#0EA5E9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sb-brand-s  { font-size: 9px; color: var(--text3); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sb-back     { width: 100%; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--bdr); background: transparent; color: var(--text3); font-size: 11px; font-weight: 600; cursor: pointer; font-family: "Noto Sans",sans-serif; display: flex; align-items: center; gap: 6px; transition: border-color .2s, color .2s; }
.sb-back:hover { border-color: var(--c1); color: var(--c1); }
.sb-sec      { padding: 12px 14px 4px; font-size: 9px; font-weight: 700; color: var(--text3); letter-spacing: .12em; text-transform: uppercase; }

/* Sidebar items */
.si       { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 1px 6px; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; font-size: 12px; font-weight: 500; color: var(--text3); border: 1px solid transparent; }
.si:hover { background: rgba(255,255,255,.05); color: var(--text2); }
.si.on    { background: linear-gradient(135deg,rgba(0,201,167,.12),rgba(14,165,233,.07)); border-color: rgba(0,201,167,.22); color: var(--c1); font-weight: 700; }
.si-ic    { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.si.on .si-ic { background: rgba(0,201,167,.12); }
.si-b     { margin-left: auto; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 7px; background: rgba(0,201,167,.12); color: var(--c1); font-family: "Noto Sans Mono",monospace; }
.si-div   { height: 1px; background: var(--bdr); margin: 6px 12px; }

/* Plan box */
.plan-box      { margin: 10px; border-radius: 10px; background: linear-gradient(135deg,rgba(201,168,76,.1),rgba(245,158,11,.06)); border: 1px solid rgba(201,168,76,.2); padding: 12px; }
.plan-lbl      { font-size: 9px; font-weight: 700; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.plan-free-bar  { height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 5px; }
.plan-free-fill { height: 100%; background: linear-gradient(90deg,var(--c1),var(--c2)); width: 33.3%; border-radius: 2px; }
.plan-free-txt  { font-size: 10px; color: var(--text3); margin-bottom: 8px; }
.plan-up        { width: 100%; padding: 7px; border-radius: 8px; background: linear-gradient(135deg,#C9A84C,#F59E0B); border: none; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; font-family: "Noto Sans",sans-serif; }

.rbtn    { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--bdr); background: var(--bg3); color: var(--text3); font-size: 11px; font-weight: 600; cursor: pointer; font-family: "Noto Sans",sans-serif; transition: border-color .2s, background .2s, color .2s; }
.rbtn.on { border-color: var(--c1); background: rgba(0,201,167,.1); color: var(--c1); }

/* ─── TOPBAR ────────────────────────────────────────────*/
.topbar    { height: 50px; background: var(--sb); border-bottom: 1px solid var(--bdr); display: flex; align-items: center; gap: 10px; padding: 0 18px; flex-shrink: 0; }
.tb-bpath  { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); }
.tb-bpath span { color: var(--text2); }
.tb-bpath .sep { opacity: .4; }
.tb-acts   { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.tba       { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: "Noto Sans",sans-serif; transition: border-color .2s, color .2s, opacity .2s; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.tba-g     { background: transparent; border: 1px solid var(--bdr2); color: var(--text2); }
.tba-g:hover { border-color: var(--c1); color: var(--c1); }
.tba-p     { background: var(--grad); border: none; color: #fff; }
.tba-p:hover { opacity: .88; }
.tba-ic    { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--bdr); background: transparent; color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: border-color .2s, color .2s; }
.tba-ic:hover { border-color: var(--c1); color: var(--c1); }

/* ─── MAIN AREA ─────────────────────────────────────────*/
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.pg   { flex: 1; overflow-y: auto; display: none; }
.pg.on { display: flex; flex-direction: column; }
.pg::-webkit-scrollbar       { width: 5px; }
.pg::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

/* ─── STUDIO LAYOUT ─────────────────────────────────────*/
.studio { display: grid; grid-template-columns: 340px 1fr 300px; height: calc(100vh - 50px); overflow: hidden; }

/* ─── LEFT PANEL — INPUT ────────────────────────────────*/
.panel-l { background: var(--sb); border-right: 1px solid var(--bdr); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.panel-l::-webkit-scrollbar       { width: 3px; }
.panel-l::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 2px; }

.pl-sec     { padding: 14px 16px; border-bottom: 1px solid var(--bdr); }
.pl-lbl     { font-size: 9px; font-weight: 700; color: var(--text3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pl-lbl-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Prompt box */
.prompt-box { background: rgba(255,255,255,.04); border: 1px solid var(--bdr); border-radius: 11px; padding: 12px; margin-bottom: 10px; transition: border-color .25s, background .25s; }
.prompt-box:focus-within { border-color: rgba(0,201,167,.4); background: rgba(0,201,167,.04); }
textarea { width: 100%; background: transparent; border: none; outline: none; color: var(--text); font-size: 13px; font-family: "Noto Sans",sans-serif; resize: none; line-height: 1.7; }
textarea::placeholder { color: var(--text3); }

.prompt-tools { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bdr); }
.pt           { height: 26px; padding: 0 10px; border-radius: 7px; background: rgba(255,255,255,.04); border: 1px solid var(--bdr); color: var(--text3); font-size: 10px; font-weight: 600; cursor: pointer; font-family: "Noto Sans",sans-serif; display: flex; align-items: center; gap: 4px; transition: border-color .2s, color .2s, background .2s; }
.pt:hover, .pt.on { border-color: rgba(0,201,167,.35); color: var(--c1); background: rgba(0,201,167,.07); }

.gen-btn       { width: 100%; padding: 11px; border-radius: 10px; background: linear-gradient(135deg,#00C9A7,#0EA5E9); border: none; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; font-family: "Noto Sans",sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .2s, box-shadow .2s; }
.gen-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,201,167,.3); }

/* ─── STYLE CHIPS ───────────────────────────────────────*/
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sc         { border-radius: 10px; border: 1px solid var(--bdr); cursor: pointer; overflow: hidden; transition: border-color .22s, transform .22s, box-shadow .22s; position: relative; }
.sc:hover   { border-color: var(--c1); transform: scale(1.02); }
.sc.on      { border-color: var(--c1); box-shadow: 0 0 0 2px rgba(0,201,167,.2); }
.sc-img     { height: 52px; display: flex; align-items: center; justify-content: center; font-size: 22px; position: relative; }
.sc-lbl     { font-size: 10px; font-weight: 700; text-align: center; padding: 5px 4px; color: var(--text3); }
.sc.on .sc-lbl { color: var(--c1); }
.sc-ck      { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--c1); color: #fff; font-size: 8px; display: none; align-items: center; justify-content: center; }
.sc.on .sc-ck { display: flex; }

/* ─── SETTINGS / CONTROLS ───────────────────────────────*/
.rng   { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rng-l { font-size: 11px; color: var(--text2); width: 70px; flex-shrink: 0; }
input[type=range] { flex: 1; accent-color: var(--c1); cursor: pointer; }
.rng-v { font-family: "Noto Sans Mono",monospace; font-size: 10px; color: var(--c1); width: 38px; text-align: right; flex-shrink: 0; }

.tgl-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.tgl-l   { font-size: 11px; color: var(--text2); }
.tgl     { width: 34px; height: 18px; border-radius: 9px; background: rgba(255,255,255,.1); cursor: pointer; position: relative; transition: background .3s; flex-shrink: 0; border: none; }
.tgl.on  { background: var(--c1); }
.tgl::after    { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .25s; }
.tgl.on::after { left: 18px; }

.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip    { padding: 4px 10px; border-radius: 14px; border: 1px solid var(--bdr); background: transparent; color: var(--text3); font-size: 10px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; font-family: "Noto Sans",sans-serif; }
.chip.on { background: rgba(0,201,167,.1); border-color: rgba(0,201,167,.3); color: var(--c1); }

/* ─── CENTER CANVAS ─────────────────────────────────────*/
.canvas     { background: var(--bg2); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.cv-toolbar { height: 42px; background: var(--sb); border-bottom: 1px solid var(--bdr); display: flex; align-items: center; gap: 6px; padding: 0 14px; flex-shrink: 0; }
.cv-tb-lbl  { font-size: 12px; font-weight: 700; color: var(--text2); flex: 1; }
.cv-btn       { height: 28px; padding: 0 11px; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid var(--bdr); color: var(--text2); font-size: 10px; font-weight: 600; cursor: pointer; font-family: "Noto Sans",sans-serif; display: flex; align-items: center; gap: 5px; transition: border-color .2s, color .2s, background .2s; }
.cv-btn:hover { border-color: var(--c1); color: var(--c1); }
.cv-btn.active { background: rgba(0,201,167,.1); border-color: rgba(0,201,167,.3); color: var(--c1); }

/* ─── RENDER STATES ─────────────────────────────────────*/
/* Empty state */
.cv-empty     { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text3); text-align: center; padding: 40px; }
.cv-empty-ico { font-size: 56px; margin-bottom: 16px; opacity: .5; }
.cv-empty-t   { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text2); }
.cv-empty-s   { font-size: 12px; line-height: 1.7; max-width: 260px; }

/* Loading state */
.cv-loading    { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 40px; }
.cv-loading.on { display: flex; }
.spinner       { width: 48px; height: 48px; border: 3px solid rgba(0,201,167,.2); border-top-color: var(--c1); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; }
@keyframes spin { to { transform: rotate(360deg); } }
.ld-t  { font-size: 14px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
.ld-s  { font-size: 12px; color: var(--text3); margin-bottom: 20px; }
.ld-bar  { width: 280px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 8px; }
.ld-fill { height: 100%; background: linear-gradient(90deg,var(--c1),var(--c2)); border-radius: 2px; width: 0%; transition: width .5s ease; }
.ld-steps-row        { display: flex; gap: 0; width: 280px; position: relative; margin-top: 16px; }
.ld-steps-row::before{ content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--bdr); }
.ld-st  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; z-index: 1; }
.ld-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; transition: background .3s, border-color .3s, color .3s, box-shadow .3s; }
.ld-dot.done { background: var(--c1); border-color: var(--c1); color: #fff; }
.ld-dot.act  { background: rgba(0,201,167,.15); border-color: var(--c1); color: var(--c1); animation: pulse 1.2s ease infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,201,167,.35); } 50% { box-shadow: 0 0 0 6px rgba(0,201,167,0); } }
.ld-sl { font-size: 9px; color: var(--text3); font-weight: 600; }

/* Result state */
.cv-result    { flex: 1; display: none; flex-direction: column; overflow: hidden; }
.cv-result.on { display: flex; }

/* ─── RENDER GRID ───────────────────────────────────────*/
.render-tabs  { display: flex; gap: 6px; padding: 10px 14px; background: var(--sb); border-bottom: 1px solid var(--bdr); flex-shrink: 0; }
.rt    { height: 26px; padding: 0 12px; border-radius: 7px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--bdr); background: transparent; color: var(--text3); font-family: "Noto Sans",sans-serif; transition: background .2s, border-color .2s, color .2s; }
.rt.on { background: rgba(0,201,167,.1); border-color: rgba(0,201,167,.3); color: var(--c1); font-weight: 700; }
.render-area  { flex: 1; overflow-y: auto; padding: 14px; }
.render-area::-webkit-scrollbar       { width: 4px; }
.render-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 2px; }

.r4grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rcard   { border-radius: 12px; border: 1px solid var(--bdr); overflow: hidden; cursor: pointer; transition: border-color .25s, transform .25s, box-shadow .25s; position: relative; }
.rcard:hover { border-color: rgba(0,201,167,.35); transform: translateY(-2px); }
.rcard.sel   { border-color: var(--c1); box-shadow: 0 0 0 2px rgba(0,201,167,.2); }
.rframe { height: 170px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.rf-label { position: absolute; bottom: 8px; left: 8px; right: 8px; background: rgba(0,0,0,.65); border-radius: 6px; padding: 6px 8px; font-size: 10px; font-weight: 700; color: #fff; backdrop-filter: blur(4px); }
.rf-sel   { position: absolute; top: 8px; left: 8px; background: var(--c1); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.rf-opts  { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.rcard:hover .rf-opts { opacity: 1; }
.rf-opt   { width: 26px; height: 26px; border-radius: 6px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.rmeta   { padding: 8px 10px; background: var(--sur); }
.rmeta-t { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.rmeta-s { font-size: 10px; color: var(--text3); }

/* ─── SINGLE RENDER VIEW ────────────────────────────────*/
.single-render    { display: none; flex-direction: column; gap: 0; height: 100%; }
.single-render.on { display: flex; }
.sr-frame   { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.sr-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(0,0,0,.4); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }
.sr-info    { font-size: 11px; color: rgba(255,255,255,.8); font-weight: 600; }
.sr-tools   { margin-left: auto; display: flex; gap: 5px; }
.sr-t       { height: 26px; padding: 0 10px; border-radius: 7px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 10px; font-weight: 600; cursor: pointer; font-family: "Noto Sans",sans-serif; display: flex; align-items: center; gap: 4px; }
.sr-t:hover { background: rgba(255,255,255,.2); }
.sr-canvas  { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }

/* ─── SHOPPABLE HOTSPOTS ────────────────────────────────*/
.hotspot       { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,201,167,.9); border: 2px solid #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; font-weight: 700; animation: hpulse 2s ease infinite; box-shadow: 0 0 0 0 rgba(0,201,167,.4); transition: transform .2s; }
.hotspot:hover { transform: scale(1.2); }
@keyframes hpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,201,167,.5); } 60% { box-shadow: 0 0 0 10px rgba(0,201,167,0); } }
.hp-tip        { position: absolute; background: rgba(3,6,14,.95); border: 1px solid rgba(0,201,167,.3); border-radius: 10px; padding: 10px 12px; font-size: 11px; color: var(--text); min-width: 160px; pointer-events: none; z-index: 10; backdrop-filter: blur(10px); }
.hp-tip-name   { font-weight: 700; margin-bottom: 3px; }
.hp-tip-price  { color: var(--c1); font-weight: 700; font-family: "Noto Sans Mono",monospace; font-size: 12px; margin-bottom: 6px; }
.hp-tip-btn    { width: 100%; padding: 5px; border-radius: 6px; background: linear-gradient(135deg,var(--c1),var(--c2)); border: none; color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; font-family: "Noto Sans",sans-serif; }
.tip-hidden    { display: none; }

/* ─── RIGHT PANEL — DETAILS ─────────────────────────────*/
.panel-r { background: var(--sb); border-left: 1px solid var(--bdr); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.panel-r::-webkit-scrollbar       { width: 3px; }
.panel-r::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 2px; }
.pr-sec { padding: 12px 14px; border-bottom: 1px solid var(--bdr); }
.pr-lbl { font-size: 9px; font-weight: 700; color: var(--text3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }

/* BOQ items in right panel */
.boq-item       { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.boq-item:last-child { border-bottom: none; }
.bi-cat         { font-size: 11px; color: var(--text2); }
.bi-mat         { font-size: 10px; color: var(--text3); margin-top: 1px; }
.bi-price       { font-family: "Noto Sans Mono",monospace; font-size: 12px; font-weight: 700; color: var(--c1); white-space: nowrap; margin-left: 8px; }
.boq-total-row  { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--bdr); margin-top: 4px; }
.boq-total-l    { font-size: 11px; font-weight: 700; color: var(--text2); }
.boq-total-v    { font-family: "Noto Sans Mono",monospace; font-size: 17px; font-weight: 800; color: var(--c1); }
.boq-act-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.bab      { padding: 8px; border-radius: 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: "Noto Sans",sans-serif; border: none; color: #fff; text-align: center; transition: opacity .2s; }
.bab:hover { opacity: .85; }
.bab-g     { background: transparent; border: 1px solid var(--bdr2); color: var(--text2); }
.bab-g:hover { border-color: var(--c1); color: var(--c1); }

/* ─── VARIANTS / MATERIALS ──────────────────────────────*/
.var-row      { display: flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .2s; border-radius: 6px; padding: 6px; }
.var-row:hover { background: rgba(255,255,255,.04); }
.var-row.on    { background: rgba(0,201,167,.07); }
.var-swatch    { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1); }
.var-info      { flex: 1; }
.var-name      { font-size: 11px; font-weight: 600; color: var(--text); }
.var-price     { font-size: 10px; color: var(--text3); }
.var-sel       { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bdr); flex-shrink: 0; transition: background .2s, border-color .2s; }
.var-row.on .var-sel { background: var(--c1); border-color: var(--c1); }

/* ─── HISTORY PAGE ──────────────────────────────────────*/
.hist-page { padding: 18px; overflow-y: auto; flex: 1; }
.hist-page::-webkit-scrollbar { width: 5px; }
.hist-filter { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.hf      { height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--bdr); background: transparent; color: var(--text3); font-size: 11px; font-weight: 600; cursor: pointer; font-family: "Noto Sans",sans-serif; transition: border-color .2s, color .2s, background .2s; }
.hf.on, .hf:hover { border-color: var(--c1); color: var(--c1); background: rgba(0,201,167,.07); }
.hist-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px; }
.hcard     { border-radius: 12px; border: 1px solid var(--bdr); overflow: hidden; cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s; background: var(--sur); }
.hcard:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.35); border-color: var(--bdr2); }
.hc-thumb  { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 36px; position: relative; overflow: hidden; }
.hc-body   { padding: 10px 11px; }
.hc-name   { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.3; }
.hc-date   { font-size: 10px; color: var(--text3); margin-bottom: 6px; }
.hc-tags   { display: flex; gap: 4px; flex-wrap: wrap; }
.htag      { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; border: 1px solid; }
.htag-t    { background: rgba(0,201,167,.08); border-color: rgba(0,201,167,.2); color: var(--c1); }
.htag-b    { background: rgba(14,165,233,.08); border-color: rgba(14,165,233,.2); color: var(--c2); }
.htag-g    { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.2); color: var(--green); }
.hc-acts   { display: flex; gap: 5px; margin-top: 8px; }
.hca       { flex: 1; padding: 5px; border-radius: 7px; font-size: 10px; font-weight: 600; cursor: pointer; border: none; font-family: "Noto Sans",sans-serif; text-align: center; }

/* ─── BOQ PAGE ──────────────────────────────────────────*/
.boq-page    { padding: 18px; overflow-y: auto; flex: 1; }
.boq-page::-webkit-scrollbar { width: 5px; }
.boq-entry   { background: var(--sur); border: 1px solid var(--bdr); border-radius: 13px; padding: 16px; margin-bottom: 12px; }
.be-head     { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.be-title    { font-size: 13px; font-weight: 800; flex: 1; }
.be-total    { font-family: "Noto Sans Mono",monospace; font-size: 15px; font-weight: 800; color: var(--c1); }

/* Table inside BOQ */
table    { width: 100%; border-collapse: collapse; font-size: 11px; }
th       { padding: 7px 9px; text-align: left; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text3); border-bottom: 1px solid var(--bdr); font-weight: 700; background: rgba(255,255,255,.03); }
td       { padding: 8px 9px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text); }
tr:last-child td { border-bottom: none; }
tr:hover td      { background: rgba(255,255,255,.03); }
.td-stat { display: inline-flex; padding: 2px 7px; border-radius: 6px; font-size: 9px; font-weight: 700; border: 1px solid; }

.be-acts { display: flex; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bdr); }
.bea      { flex: 1; padding: 7px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; border: none; color: #fff; font-family: "Noto Sans",sans-serif; transition: opacity .2s; text-align: center; }
.bea:hover { opacity: .85; }
.bea-g    { background: transparent; border: 1px solid var(--bdr2); color: var(--text2); }
.bea-g:hover { border-color: var(--c1); color: var(--c1); }

/* ─── DISCIPLINE TABS (Interior / Architecture / Structural) ─── */
.discipline-sec   { padding-bottom: 14px; border-bottom: 1px solid var(--bdr); margin-bottom: 14px; }
.discipline-tabs  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.dtab             { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: var(--bg3); border: 1px solid var(--bdr); border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s; font-family: "Noto Sans",sans-serif; }
.dtab:hover       { border-color: var(--c1); }
.dtab.on          { background: linear-gradient(135deg,rgba(0,201,167,.12),rgba(14,165,233,.08)); border-color: var(--c1); box-shadow: 0 0 0 1px rgba(0,201,167,.4); }
.dtab-ico         { font-size: 20px; line-height: 1; }
.dtab-lbl         { font-size: 10px; font-weight: 600; color: var(--text2); letter-spacing: .3px; }
.dtab.on .dtab-lbl{ color: var(--c1); }

.adv-fields       { background: var(--bg3); border-radius: 8px; padding: 10px; }
.adv-row          { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.adv-row:last-child { margin-bottom: 0; }
.adv-lbl          { font-size: 11px; font-weight: 600; color: var(--text2); flex-shrink: 0; }
.adv-input        { flex: 1; padding: 6px 8px; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; color: var(--text); font-family: "Noto Sans",sans-serif; font-size: 11px; }
.adv-input:focus  { outline: none; border-color: var(--c1); }

/* ─── ARCHITECTURE GRID ─── */
.arch-grid        { grid-template-columns: 1fr 1fr 1fr !important; }
.arch-card .rframe{ min-height: 260px; }

/* ─── STRUCTURAL SUMMARY ─── */
.struct-summary   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; height: 100%; overflow-y: auto; }
.struct-card      { background: var(--bg3); border: 1px solid var(--bdr); border-radius: 12px; padding: 14px; }
.sc-hdr           { font-size: 12px; font-weight: 700; color: var(--c1); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bdr); }
.sc-row           { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 11px; }
.sc-row span      { color: var(--text2); flex-shrink: 0; }
.sc-row b         { color: var(--text); text-align: right; font-weight: 600; }

@media (max-width: 768px) {
  .struct-summary { grid-template-columns: 1fr; }
  .arch-grid      { grid-template-columns: 1fr !important; }
  .discipline-tabs{ grid-template-columns: 1fr 1fr 1fr; }
  .dtab           { padding: 8px 4px; }
  .dtab-ico       { font-size: 16px; }
  .dtab-lbl       { font-size: 9px; }
}

/* ─── PHASE 6: Download dropdown menu ─── */
.dl-group       { position: relative; display: inline-block; }
.dl-trigger     {} /* uses .cv-btn styles */
.dl-menu        { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--sur2,var(--bg2)); border: 1px solid var(--bdr2,var(--bdr)); border-radius: 10px; padding: 6px; min-width: 220px; z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.dl-menu.show   { display: flex; flex-direction: column; gap: 2px; }
.dl-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: transparent; border: none; border-radius: 6px; color: var(--text); font-family: "Noto Sans",sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; text-align: left; transition: background .2s; }
.dl-menu button:hover { background: rgba(0,201,167,.1); color: var(--c1); }
.dl-menu button span  { font-size: 16px; flex-shrink: 0; }