:root {
  --bg: #09090C;
  --s1: #111116;
  --s2: #18181F;
  --s3: #1F1F28;
  --bd: #252530;
  --bd2: #32323F;
  --gold: #D4A853;
  --gold2: #B8903A;
  --gold-glow: rgba(212,168,83,0.12);
  --txt: #EDEAE3;
  --muted: #6B6B78;
  --muted2: #3E3E4A;
  --success: #6DC98A;
  --r: 10px;
  --rl: 16px;
  --rx: 22px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--txt); font-family: 'DM Sans', sans-serif; min-height: 100vh; overflow-x: hidden; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 4px; }

/* ── ANIMATIONS ─────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes pop { from { transform:scale(0); } to { transform:scale(1); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes blink { 0%,80%,100%{opacity:.15} 40%{opacity:1} }
@keyframes shimmer { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.animate-up { animation: fadeUp .7s ease both; }
.a2 { animation-delay:.1s; }
.a3 { animation-delay:.2s; }
.a4 { animation-delay:.3s; }

/* ── NAV ─────────────────────────── */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height: 60px; padding: 0 36px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(9,9,12,.88); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bd);
}
.nav-logo { font-family:'DM Serif Display',serif; font-size:1.4rem; color:var(--gold); cursor:pointer; letter-spacing:-.02em; }
.nav-links { display:flex; align-items:center; gap:24px; }
.nav-link { color:var(--muted); font-size:.875rem; font-weight:500; cursor:pointer; background:none; border:none; transition:color .2s; }
.nav-link:hover { color:var(--txt); }
.nav-cta { background:var(--gold); color:#09090C; padding:8px 20px; border-radius:8px; font-weight:700; font-size:.845rem; cursor:pointer; border:none; transition:all .2s; }
.nav-cta:hover { background:var(--gold2); }
.nav-user { display:none; align-items:center; gap:10px; }
.nav-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold2)); display:flex; align-items:center; justify-content:center; font-family:'DM Serif Display',serif; font-size:.9rem; color:#09090C; font-weight:700; }
.nav-uname { font-size:.875rem; font-weight:500; }

/* ── PAGES ──────────────────────── */
.page { display:none; min-height:100vh; padding-top:60px; }
.page.active { display:block; }
.auth-page.active { display:flex; align-items:center; justify-content:center; padding:80px 20px; }
.portal-page.active { display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 60px); }

/* ── HERO ───────────────────────── */
.hero { position:relative; min-height:calc(100vh - 60px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 40px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:var(--bg); }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(var(--bd) 1px,transparent 1px),linear-gradient(90deg,var(--bd) 1px,transparent 1px); background-size:56px 56px; opacity:.22; pointer-events:none; }
.hero-glow { position:absolute; top:20%; left:50%; transform:translateX(-50%); width:700px; height:380px; background:radial-gradient(ellipse,rgba(212,168,83,.08) 0%,transparent 70%); pointer-events:none; }
.hero-badge { position:relative; display:inline-flex; align-items:center; gap:8px; background:rgba(212,168,83,.08); border:1px solid rgba(212,168,83,.22); border-radius:100px; padding:6px 18px; font-size:.78rem; font-weight:600; color:var(--gold); letter-spacing:.04em; margin-bottom:36px; }
.hero h1 { position:relative; font-family:'DM Serif Display',serif; font-size:clamp(2.6rem,5.5vw,4.8rem); line-height:1.06; letter-spacing:-.035em; max-width:820px; margin-bottom:24px; }
.hero h1 em { font-style:italic; color:var(--gold); }
.hero-sub { position:relative; font-size:1.05rem; color:var(--muted); max-width:500px; line-height:1.75; margin-bottom:52px; }
.hero-btns { position:relative; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.btn-primary { background:var(--gold); color:#09090C; padding:13px 28px; border-radius:9px; font-weight:700; font-size:.95rem; border:none; cursor:pointer; transition:all .2s; }
.btn-primary:hover { background:var(--gold2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(212,168,83,.25); }
.btn-ghost { background:transparent; color:var(--txt); padding:13px 28px; border-radius:9px; font-weight:500; font-size:.95rem; border:1px solid var(--bd2); cursor:pointer; transition:all .2s; }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

/* ── SECTIONS ───────────────────── */
.section { padding:96px 40px; max-width:1160px; margin:0 auto; }
.eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.sec-title { font-family:'DM Serif Display',serif; font-size:clamp(1.9rem,3.5vw,2.9rem); line-height:1.1; margin-bottom:60px; }
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.feat-card { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rl); padding:28px; transition:all .2s; }
.feat-card:hover { border-color:rgba(212,168,83,.3); transform:translateY(-3px); }
.feat-ico { width:42px; height:42px; border-radius:9px; background:var(--gold-glow); border:1px solid rgba(212,168,83,.18); display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:16px; }
.feat-card h3 { font-family:'DM Serif Display',serif; font-size:1.1rem; margin-bottom:8px; }
.feat-card p { color:var(--muted); font-size:.845rem; line-height:1.65; }

/* ── PRICING ────────────────────── */
.price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.price-card { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rx); padding:32px; position:relative; }
.price-card.featured { border-color:var(--gold); background:linear-gradient(160deg,rgba(212,168,83,.06),var(--s1)); }
.ppill { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:#09090C; font-size:.68rem; font-weight:800; padding:3px 14px; border-radius:100px; white-space:nowrap; letter-spacing:.05em; }
.ptier { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.pname { font-family:'DM Serif Display',serif; font-size:1.4rem; margin-bottom:12px; }
.pdesc { color:var(--muted); font-size:.83rem; margin-bottom:20px; line-height:1.55; }
.pfrom { font-size:.7rem; color:var(--muted2); margin-bottom:2px; }
.pamount { font-family:'DM Serif Display',serif; font-size:2.3rem; color:var(--gold); margin-bottom:26px; }
.plist { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.plist li { display:flex; align-items:center; gap:8px; font-size:.83rem; color:var(--muted); }
.plist li::before { content:'✓'; color:var(--success); font-weight:800; flex-shrink:0; }
.paddons { padding-top:14px; border-top:1px solid var(--bd); }
.padlabel { font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); margin-bottom:8px; }
.paditem { font-size:.77rem; color:var(--muted); margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.paditem::before { content:'+'; color:var(--gold); font-weight:700; }
.btn-price { width:100%; margin-top:22px; background:var(--gold); color:#09090C; padding:12px; border-radius:9px; font-weight:700; font-size:.875rem; border:none; cursor:pointer; transition:all .2s; }
.btn-price:hover { background:var(--gold2); }
.btn-price-outline { width:100%; margin-top:22px; background:var(--s2); color:var(--txt); padding:12px; border-radius:9px; font-weight:600; font-size:.875rem; border:1px solid var(--bd2); cursor:pointer; transition:all .2s; }
.btn-price-outline:hover { border-color:var(--gold); color:var(--gold); }

/* ── AUTH ───────────────────────── */
.auth-box { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rx); padding:42px; width:100%; max-width:420px; }
.auth-title { font-family:'DM Serif Display',serif; font-size:1.85rem; margin-bottom:6px; }
.auth-sub { color:var(--muted); font-size:.845rem; margin-bottom:28px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.field input, .field textarea, .field select { width:100%; background:var(--s2); border:1px solid var(--bd); border-radius:8px; padding:11px 14px; color:var(--txt); font-family:'DM Sans',sans-serif; font-size:.875rem; outline:none; transition:border-color .2s; }
.field input:focus, .field textarea:focus { border-color:var(--gold); }
.field input::placeholder, .field textarea::placeholder { color:var(--muted2); }
.field textarea { resize:vertical; min-height:72px; }
.field-hint { font-size:.78rem; color:var(--muted); margin-bottom:16px; line-height:1.5; background:var(--s2); border:1px solid var(--bd); border-radius:8px; padding:10px 14px; }
.btn-submit { width:100%; background:var(--gold); color:#09090C; padding:13px; border-radius:9px; font-weight:800; font-size:.95rem; border:none; cursor:pointer; margin-top:6px; transition:all .2s; }
.btn-submit:hover { background:var(--gold2); }
.auth-alt { text-align:center; margin-top:20px; font-size:.83rem; color:var(--muted); }
.auth-alt a { color:var(--gold); cursor:pointer; text-decoration:none; }

/* ── LANDING SECTIONS ──────────────────────── */
.section { padding:100px 40px; }
.section-dark { background:var(--s1); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd); }
.section-inner { max-width:1100px; margin:0 auto; }
.section-label { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.section-title { font-family:'DM Serif Display',serif; font-size:clamp(1.8rem,3vw,2.8rem); margin-bottom:52px; letter-spacing:-.02em; }
.landing-footer { padding:40px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--bd); max-width:1100px; margin:0 auto; }

/* ── SIDEBAR ────────────────────── */
.sidebar { background:var(--s1); border-right:1px solid var(--bd); padding:24px 16px; display:flex; flex-direction:column; gap:3px; position:sticky; top:60px; height:calc(100vh - 60px); overflow-y:auto; }
.sb-logo { font-family:'DM Serif Display',serif; font-size:1.1rem; color:var(--gold); padding:0 10px; margin-bottom:22px; }
.sb-section { font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2); padding:14px 10px 7px; }
.sb-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; color:var(--muted); font-size:.845rem; font-weight:500; transition:all .15s; border:none; background:none; width:100%; text-align:left; }
.sb-item:hover { background:var(--s2); color:var(--txt); }
.sb-item.active { background:var(--gold-glow); color:var(--gold); border:1px solid rgba(212,168,83,.18); }
.sb-spacer { flex:1; }
.portal-main { padding:32px; overflow-y:auto; max-height:calc(100vh - 60px); }
.portal-main.ai-main { overflow:hidden; padding:28px; display:flex; flex-direction:column; height:calc(100vh - 60px); max-height:none; box-sizing:border-box; }

/* ── PROJECT CARDS ──────────────── */
.ph { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.ph-title { font-family:'DM Serif Display',serif; font-size:1.6rem; }
.proj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.proj-card { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rl); padding:20px; cursor:pointer; transition:all .2s; }
.proj-card:hover { border-color:rgba(212,168,83,.3); transform:translateY(-2px); }
.proj-card.new-card { border:2px dashed var(--bd2); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:162px; gap:8px; }
.proj-card.new-card:hover { border-color:var(--gold); }
.pstatus { display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:100px; margin-bottom:12px; }
.s-draft { background:rgba(107,107,120,.13); color:var(--muted); }
.s-ai { background:rgba(212,168,83,.12); color:var(--gold); }
.s-ordered { background:rgba(109,201,138,.12); color:var(--success); }
.pname-card { font-family:'DM Serif Display',serif; font-size:1.1rem; margin-bottom:4px; }
.pmeta { font-size:.77rem; color:var(--muted); }
.ptags { display:flex; gap:5px; flex-wrap:wrap; margin-top:10px; }
.ptag { font-size:.66rem; padding:2px 8px; border-radius:100px; background:var(--s2); color:var(--muted); border:1px solid var(--bd); }

/* ── WIZARD ─────────────────────── */
.wiz-wrap { max-width:680px; margin:0 auto; }
.wiz-steps { display:flex; align-items:center; margin-bottom:40px; }
.wiz-step { display:flex; align-items:center; gap:9px; }
.wiz-line { flex:1; height:1px; background:var(--bd); margin:0 8px; }
.wiz-circle { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; flex-shrink:0; }
.wc-done { background:var(--gold); color:#09090C; }
.wc-active { background:var(--gold-glow); border:2px solid var(--gold); color:var(--gold); }
.wc-pending { background:var(--s2); border:2px solid var(--bd); color:var(--muted2); }
.wiz-label { font-size:.75rem; font-weight:500; }
.wiz-card { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rx); padding:34px; }
.wiz-title { font-family:'DM Serif Display',serif; font-size:1.35rem; margin-bottom:6px; }
.wiz-sub { color:var(--muted); font-size:.845rem; margin-bottom:26px; }
.tier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.tier-opt { border:2px solid var(--bd); border-radius:12px; padding:20px 12px; text-align:center; cursor:pointer; transition:all .2s; }
.tier-opt:hover { border-color:rgba(212,168,83,.4); }
.tier-opt.sel { border-color:var(--gold); background:rgba(212,168,83,.06); }
.tier-ico { font-size:1.7rem; margin-bottom:9px; }
.tier-n { font-weight:700; font-size:.88rem; margin-bottom:4px; }
.tier-d { font-size:.7rem; color:var(--muted); line-height:1.4; }
.dim-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cb-group { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.cb-item { display:flex; align-items:center; gap:9px; cursor:pointer; }
.cb-item input { accent-color:var(--gold); cursor:pointer; }
.cb-item label { font-size:.845rem; cursor:pointer; }
.wiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:26px; padding-top:26px; border-top:1px solid var(--bd); }
.btn-wiz-back { background:transparent; color:var(--muted); border:1px solid var(--bd); padding:9px 20px; border-radius:8px; cursor:pointer; font-size:.845rem; transition:all .2s; }
.btn-wiz-back:hover { color:var(--txt); border-color:var(--bd2); }
.btn-wiz-next { background:var(--gold); color:#09090C; border:none; padding:9px 22px; border-radius:8px; cursor:pointer; font-size:.845rem; font-weight:800; transition:all .2s; }
.btn-wiz-next:hover { background:var(--gold2); }
.generating-wrap { text-align:center; padding:20px 0; }
.gen-spinner { width:48px; height:48px; border:3px solid var(--bd2); border-top-color:var(--gold); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 20px; }
.gen-bar { height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); background-size:200% 100%; animation:shimmer 1.4s ease infinite; border-radius:2px; max-width:280px; margin:0 auto 16px; }

/* ── MOOD CHIPS ─────────────────── */
.mood-wrap { display:flex; gap:8px; flex-wrap:wrap; }
.mood-chip { padding:5px 13px; border-radius:100px; border:1px solid var(--bd); font-size:.78rem; cursor:pointer; transition:all .2s; }
.mood-chip:hover, .mood-chip.sel { border-color:var(--gold); color:var(--gold); }
.swatches { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:12px; }
.swatch { width:40px; height:40px; border-radius:8px; border:2px solid var(--bd); cursor:pointer; transition:transform .15s; }
.swatch:hover { transform:scale(1.1); }
.swatch-add { background:var(--s2); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:1.1rem; }
.img-lib { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.lib-slot { aspect-ratio:1; border-radius:7px; border:1px solid var(--bd); background:var(--s2); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:1.3rem; cursor:pointer; transition:border-color .2s; }
.lib-slot:hover { border-color:var(--gold); }

/* ── AI PAGE ────────────────────── */
.ai-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.ai-title { font-family:'DM Serif Display',serif; font-size:1.55rem; }
.btn-sm-ghost { background:transparent; color:var(--muted); border:1px solid var(--bd); padding:8px 16px; border-radius:8px; cursor:pointer; font-size:.83rem; transition:all .2s; }
.btn-sm-ghost:hover { color:var(--txt); border-color:var(--bd2); }
.btn-sm-gold { background:var(--gold); color:#09090C; border:none; padding:8px 18px; border-radius:8px; cursor:pointer; font-size:.83rem; font-weight:800; transition:all .2s; }
.btn-sm-gold:hover { background:var(--gold2); }
.ai-layout { display:grid; grid-template-columns:1fr 350px; gap:18px; height:calc(100vh - 60px - 28px - 28px - 56px); min-height:0; overflow:hidden; }

/* Canvas */
.canvas-wrap { position:relative; background:var(--s1); border:1px solid var(--bd); border-radius:var(--rx); overflow:hidden; min-width:0; }
#threeCanvas { width:100%; height:100%; display:block; }
.canvas-badge { position:absolute; top:14px; left:14px; background:rgba(9,9,12,.82); backdrop-filter:blur(10px); border:1px solid var(--bd); border-radius:8px; padding:7px 13px; font-size:.77rem; color:var(--muted); }
.canvas-top-right { position:absolute; top:14px; right:14px; }
.ctrl-btn { background:rgba(9,9,12,.82); backdrop-filter:blur(10px); border:1px solid var(--bd); border-radius:8px; padding:7px 13px; font-size:.75rem; color:var(--muted); cursor:pointer; transition:all .2s; }
.ctrl-btn:hover, .ctrl-btn.active { color:var(--gold); border-color:rgba(212,168,83,.3); }
.canvas-toolbar { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:5px; background:rgba(9,9,12,.82); backdrop-filter:blur(12px); border:1px solid var(--bd); border-radius:10px; padding:5px; }
.view-btn { background:transparent; border:none; color:var(--muted); padding:5px 12px; border-radius:7px; cursor:pointer; font-size:.77rem; font-weight:600; transition:all .2s; }
.view-btn:hover { color:var(--txt); }
.view-btn.active { background:var(--gold-glow); color:var(--gold); border:1px solid rgba(212,168,83,.2); }
.canvas-loading { position:absolute; inset:0; background:rgba(9,9,12,.88); display:flex; align-items:center; justify-content:center; transition:opacity .4s; }
.canvas-loading.hidden { opacity:0; pointer-events:none; }
.cl-inner { text-align:center; }
.cl-spinner { width:40px; height:40px; border:3px solid var(--bd2); border-top-color:var(--gold); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 14px; }
.cl-text { font-size:.845rem; color:var(--muted); }

/* Chat */
.ai-right { display:flex; flex-direction:column; gap:12px; overflow-y:auto; min-height:0; }
.chat-panel { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rx); display:flex; flex-direction:column; flex:1; min-height:200px; overflow:hidden; }
.chat-panel.collapsed { flex:none; min-height:0; }
#chatPanelBody { display:flex; flex-direction:column; flex:1; overflow:hidden; min-height:0; }
.chat-panel.collapsed #chatPanelBody { display:none; }
.chat-head { padding:11px 14px; border-bottom:1px solid var(--bd); display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ai-dot { width:7px; height:7px; border-radius:50%; background:var(--success); animation:pulse 2s ease infinite; flex-shrink:0; }
.chat-headtxt { font-weight:600; font-size:.83rem; }
.chat-model-badge { margin-left:auto; font-size:.65rem; color:var(--muted); background:var(--s2); border:1px solid var(--bd); border-radius:100px; padding:2px 9px; }
.chat-msgs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:9px; min-height:0; }
.msg { padding:9px 13px; border-radius:10px; font-size:.805rem; line-height:1.55; max-width:93%; }
.ai-msg { background:var(--s2); border-radius:10px 10px 10px 2px; }
.user-msg { background:rgba(212,168,83,.1); border:1px solid rgba(212,168,83,.14); border-radius:10px 10px 2px 10px; align-self:flex-end; }
.thinking-msg { background:var(--s2); border-radius:10px 10px 10px 2px; display:flex; align-items:center; gap:5px; padding:11px 14px; }
.dot-anim span { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--muted); animation:blink 1.2s ease infinite; }
.dot-anim span:nth-child(2){animation-delay:.2s}
.dot-anim span:nth-child(3){animation-delay:.4s}
.chat-bottom { padding:10px; border-top:1px solid var(--bd); display:flex; gap:7px; align-items:flex-end; }
.chat-inp { flex:1; background:var(--s2); border:1px solid var(--bd); border-radius:8px; padding:8px 12px; color:var(--txt); font-family:'DM Sans',sans-serif; font-size:.805rem; outline:none; transition:border-color .2s; resize:none; max-height:100px; }
.chat-inp:focus { border-color:var(--gold); }
.chat-inp::placeholder { color:var(--muted2); }
.chat-send { background:var(--gold); color:#09090C; border:none; border-radius:8px; width:36px; height:36px; cursor:pointer; font-weight:800; font-size:.9rem; flex-shrink:0; transition:all .2s; }
.chat-send:hover { background:var(--gold2); }
.chat-send:disabled { opacity:.35; cursor:not-allowed; }
.quick-panel { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rl); padding:14px; flex-shrink:0; }
.quick-label { font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); margin-bottom:10px; }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.qbtn { background:var(--s2); border:1px solid var(--bd); border-radius:7px; padding:8px 9px; color:var(--muted); font-size:.75rem; cursor:pointer; transition:all .2s; font-family:'DM Sans',sans-serif; text-align:left; line-height:1.35; }
.qbtn:hover { border-color:var(--gold); color:var(--gold); }

/* ── ORDER ──────────────────────── */
.order-section { background:var(--s2); border:1px solid var(--bd); border-radius:var(--rl); padding:24px; margin-bottom:16px; }
.order-section h3 { font-family:'DM Serif Display',serif; font-size:1.1rem; margin-bottom:18px; }
.orow { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--bd); font-size:.845rem; }
.orow:last-child { border-bottom:none; }
.olabel { color:var(--muted); }
.addon-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--bd); cursor:pointer; }
.addon-row:last-child { border-bottom:none; }
.addon-row input { accent-color:var(--gold); flex-shrink:0; }
.addon-sub { font-size:.77rem; color:var(--muted); margin-top:2px; }
.order-total-row { display:flex; justify-content:space-between; align-items:center; padding:16px 0 0; font-weight:700; }
.ototal { font-family:'DM Serif Display',serif; font-size:1.6rem; color:var(--gold); }

/* ── PROFILE ────────────────────── */
.profile-layout { display:grid; grid-template-columns:280px 1fr; gap:22px; }
.profile-card { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rx); padding:26px; margin-bottom:18px; }
.p-ava { width:68px; height:68px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold2)); display:flex; align-items:center; justify-content:center; font-family:'DM Serif Display',serif; font-size:1.7rem; color:#09090C; margin-bottom:14px; }
.p-name { font-family:'DM Serif Display',serif; font-size:1.35rem; margin-bottom:3px; }
.p-co { color:var(--muted); font-size:.83rem; margin-bottom:20px; }
.p-stat { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--bd); }
.p-stat-l { font-size:.77rem; color:var(--muted); }
.p-stat-v { font-weight:700; font-size:.9rem; }
.brand-card { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rx); padding:26px; margin-bottom:18px; }
.brand-card h3 { font-family:'DM Serif Display',serif; font-size:1.1rem; margin-bottom:20px; }

/* ── CONFIRM ────────────────────── */
.ref-box { background:var(--s2); border:1px solid var(--bd); border-radius:var(--rl); padding:18px 36px; }
.ref-label { font-size:.7rem; color:var(--muted2); margin-bottom:3px; }
.ref-num { font-family:'DM Serif Display',serif; font-size:1.4rem; color:var(--gold); }

/* ── TOAST ──────────────────────── */
#toast { position:fixed; bottom:24px; right:24px; z-index:999; background:var(--s1); border:1px solid var(--bd); border-radius:10px; padding:11px 18px; font-size:.845rem; box-shadow:0 8px 32px rgba(0,0,0,.5); transform:translateY(16px); opacity:0; transition:all .3s; pointer-events:none; }
#toast.show { transform:translateY(0); opacity:1; }

@media (max-width:900px) {
  .portal-page.active { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .ai-layout { grid-template-columns:1fr; grid-template-rows:50vh 1fr; }
  .profile-layout { grid-template-columns:1fr; }
  .tier-grid { grid-template-columns:1fr; }
}

/* ── FURNITURE PANEL ────────────────────── */
.furn-panel { background:var(--s1); border:1px solid var(--bd); border-radius:var(--rl); flex-shrink:0; overflow:hidden; min-height:0; }
.furn-panel-toggle { width:100%; background:none; border:none; color:var(--txt); cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:11px 14px; font-size:.78rem; font-weight:600; font-family:inherit; border-bottom:1px solid transparent; transition:border-color .2s; }
.furn-panel-toggle:hover { color:var(--gold); }
.furn-panel.open .furn-panel-toggle { border-bottom-color:var(--bd); }
#furnPanelBody { padding:10px 12px 12px; display:none; }
.furn-panel.open #furnPanelBody { display:block; }
.furn-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
.furn-item { display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--s2); border:1px solid var(--bd); border-radius:8px; padding:8px 4px; cursor:pointer; transition:all .2s; font-size:.65rem; color:var(--muted); text-align:center; }
.furn-item:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-glow); }
.furn-item .furn-icon { font-size:1.4rem; line-height:1; }
.furn-delete-btn { width:100%; background:rgba(220,80,80,.1); border:1px solid rgba(220,80,80,.25); color:rgba(220,80,80,.7); border-radius:7px; padding:7px; font-size:.78rem; cursor:pointer; transition:all .2s; font-family:"DM Sans",sans-serif; }
.furn-delete-btn:hover:not(:disabled) { background:rgba(220,80,80,.2); color:#E07070; border-color:#E07070; }
.furn-delete-btn:disabled { opacity:.35; cursor:not-allowed; }

.furn-wall { border-color: rgba(107,107,120,.4); }
.furn-wall:hover { border-color: var(--info); color: var(--info); background: rgba(107,158,224,.1); }

/* ── FURNITURE CATEGORIES ───────────────────────────── */
#furnCatalogue           { display:flex; flex-direction:column; gap:10px; }
.furn-category           { display:flex; flex-direction:column; gap:5px; }
.furn-cat-label          { font-size:.62rem; font-weight:600; text-transform:uppercase;
                           letter-spacing:.06em; color:var(--muted); padding:2px 0; }
#furnPanelBody           { overflow-y:auto; max-height:38vh; }
.furn-grid               { grid-template-columns:repeat(3,1fr); }

/* ── FURNITURE ICON PNG ─────────────────────── */
.furn-icon-wrap { width:100%; height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:2px; }
.furn-icon-img  { width:56px; height:56px; object-fit:cover; border-radius:5px; }
.furn-item-label{ font-size:.58rem; text-align:center; line-height:1.2; color:var(--muted); }
.furn-item-tag  { font-size:.46rem; color:var(--muted2); display:block; margin-top:1px; text-align:center; }