@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════ THEME TOKENS ═══════════════ */
:root{
  --rx:6px;--rs:8px;--rm:12px;--rl:16px;--rxl:20px;--rf:999px;
  --e:cubic-bezier(.4,0,.2,1);--es:cubic-bezier(.34,1.56,.64,1);--d:.15s;
  --nav-w:64px;--sp-w:260px;
  --accent:#7c5cfc;--accent2:#a78bfa;--accent3:#c4b5fd;
  --accent-s:rgba(124,92,252,.15);--accent-ss:rgba(124,92,252,.08);
  --accent-g:rgba(124,92,252,.3);
  --grad:linear-gradient(135deg,#7c5cfc 0%,#a78bfa 55%,#c084fc 100%);
  --grad2:linear-gradient(160deg,#6c47fc 0%,#8b5cf6 50%,#a855f7 100%);
  --g:#34d399;--g-bg:rgba(52,211,153,.12);--y:#fbbf24;--y-bg:rgba(251,191,36,.12);
  --r:#f87171;--r-bg:rgba(248,113,113,.12);--cyan:#22d3ee;
}

/* ─── DARK ─── */
[data-theme="dark"]{
  --bg-0:#060710;--bg-1:#0c0d16;--bg-2:#12141f;--bg-3:#181b28;--bg-4:#1f2233;--bg-5:#282c3e;
  --bg-glass:rgba(12,13,22,.88);--bg-glass2:rgba(12,13,22,.7);
  --bg-input:rgba(255,255,255,.04);--bg-input-h:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.06);--border-h:rgba(255,255,255,.12);--border-a:rgba(124,92,252,.4);
  --t1:#eeeef6;--t2:#9b9bb8;--t3:#5e5e78;--t4:#3d3d52;
  --sh:0 4px 20px rgba(0,0,0,.5);--sh-lg:0 12px 48px rgba(0,0,0,.6);--sh-s:0 2px 6px rgba(0,0,0,.3);
  --sh-glow:0 0 40px rgba(124,92,252,.06),0 0 80px rgba(124,92,252,.03);
  --sh-card:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03);
  --overlay-bg:rgba(0,0,0,.65);--loading-bg:rgba(6,7,16,.96);
  --canvas-bg:linear-gradient(180deg,#0a0b14 0%,#0e1020 50%,#0c0d18 100%);
  --nav-bg:linear-gradient(180deg,#0c0d16 0%,#0a0b14 100%);
  --sp-bg:linear-gradient(180deg,#0e1019 0%,#0c0d16 100%);
  --neg-color:#f87171;--neg-border:rgba(255,255,255,.04);
  --toast-ok-bg:#0f1f18;--toast-ok-bdr:rgba(52,211,153,.25);
  --toast-err-bg:#1f0f0f;--toast-err-bdr:rgba(248,113,113,.25);
  --toast-info-bg:#110f2a;--toast-info-bdr:rgba(124,92,252,.25);
  --scrollbar:#ffffff0a;--scrollbar-h:#ffffff18;
  --arrow:url("data:image/svg+xml,%3Csvg width='8' height='5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%235e5e78' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* ─── LIGHT ─── */
[data-theme="light"]{
  --bg-0:#f2f3f8;--bg-1:#ffffff;--bg-2:#f8f8fc;--bg-3:#eff0f6;--bg-4:#e4e5ee;--bg-5:#d8d9e4;
  --bg-glass:rgba(255,255,255,.9);--bg-glass2:rgba(255,255,255,.75);
  --bg-input:rgba(0,0,0,.03);--bg-input-h:rgba(0,0,0,.06);
  --border:rgba(0,0,0,.06);--border-h:rgba(0,0,0,.12);--border-a:rgba(124,92,252,.4);
  --t1:#1a1a2e;--t2:#52526e;--t3:#8a8aa2;--t4:#b0b0c4;
  --sh:0 1px 4px rgba(0,0,0,.06);--sh-lg:0 4px 24px rgba(0,0,0,.08);--sh-s:0 1px 2px rgba(0,0,0,.04);
  --sh-glow:0 0 30px rgba(124,92,252,.04);
  --sh-card:0 1px 4px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.8);
  --overlay-bg:rgba(0,0,0,.3);--loading-bg:rgba(242,243,248,.96);
  --canvas-bg:linear-gradient(180deg,#f2f3f8 0%,#eeeef5 100%);
  --nav-bg:linear-gradient(180deg,#ffffff 0%,#fafafc 100%);
  --sp-bg:linear-gradient(180deg,#ffffff 0%,#fafafc 100%);
  --neg-color:#ef4444;--neg-border:rgba(0,0,0,.05);
  --toast-ok-bg:#ecfdf5;--toast-ok-bdr:rgba(52,211,153,.25);
  --toast-err-bg:#fef2f2;--toast-err-bdr:rgba(248,113,113,.25);
  --toast-info-bg:#f0edff;--toast-info-bdr:rgba(124,92,252,.25);
  --scrollbar:#00000008;--scrollbar-h:#00000014;
  --arrow:url("data:image/svg+xml,%3Csvg width='8' height='5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%238a8aa2' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* ═══════════════ RESET ═══════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;overflow:hidden}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg-0);color:var(--t1);height:100%;font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden;transition:background .4s,color .3s}
#app{display:flex;height:100%}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-h)}
::selection{background:rgba(124,92,252,.25)}
input,select,textarea,button{font-family:inherit}a{color:var(--accent);text-decoration:none}

/* ═══════════════ LEFT NAV — Wide with Labels ═══════════════ */
.nav{width:var(--nav-w);background:var(--nav-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0 8px;gap:2px;flex-shrink:0;z-index:10;position:relative}
.nav::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent 0%,var(--accent-ss) 50%,transparent 100%);pointer-events:none}
.nav-logo{font-size:20px;font-weight:900;background:var(--grad);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px;cursor:default;line-height:1}
.nav-btn{width:48px;height:44px;border-radius:var(--rm);border:none;background:transparent;color:var(--t4);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:all .2s var(--e);position:relative}
.nav-btn svg,.nav-btn i{width:18px;height:18px;stroke-width:1.8;flex-shrink:0;transition:color .15s,transform .2s}
.nav-btn .nav-label{font-size:8px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:inherit;line-height:1;opacity:.85}
.nav-btn:hover{background:var(--bg-input-h);color:var(--t2)}
.nav-btn:hover svg{transform:scale(1.08)}
.nav-btn.on{color:var(--accent);background:var(--accent-ss)}
.nav-btn.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2.5px;background:var(--grad);border-radius:0 3px 3px 0}
.nav-spacer{flex:1}
.nav-avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);color:white;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:4px;box-shadow:0 2px 8px var(--accent-g);transition:transform .2s}
.nav-avatar:hover{transform:scale(1.1)}
.nav-theme{width:34px;height:34px;border-radius:var(--rm);border:1px solid var(--border);background:var(--bg-input);color:var(--t3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s var(--e)}
.nav-theme svg,.nav-theme i{width:16px;height:16px;stroke-width:1.8}
.nav-theme:hover{background:var(--bg-input-h);color:var(--t1);border-color:var(--border-h)}

/* ═══════════════ AUTH ═══════════════ */
.auth-wrap{display:flex;align-items:center;justify-content:center;width:100%;min-height:100vh;position:relative}
.auth-wrap::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,252,.1) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.4}50%{transform:translate(-50%,-50%) scale(1.15);opacity:.7}}
.auth-box{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--rxl);padding:36px 28px;width:100%;max-width:360px;position:relative;z-index:1;box-shadow:var(--sh-lg)}
.auth-box h1{font-size:22px;font-weight:800;text-align:center;margin-bottom:4px;background:var(--grad);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.auth-box .sub{text-align:center;color:var(--t4);font-size:11px;margin-bottom:24px}
.fg{margin-bottom:12px}.fg label{display:block;font-size:10px;font-weight:700;color:var(--t3);margin-bottom:3px;letter-spacing:.5px;text-transform:uppercase}
.fg input,.fg select,.fg textarea{width:100%;padding:9px 11px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--rs);color:var(--t1);font-size:13px;transition:border-color .15s;outline:none}
.fg input:focus,.fg select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ss)}
.fg input::placeholder{color:var(--t4)}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 16px;border-radius:var(--rs);font-size:12px;font-weight:600;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s,filter .15s;white-space:nowrap}
.btn-p{background:var(--grad);color:white;box-shadow:0 4px 20px var(--accent-g)}.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 28px var(--accent-g);filter:brightness(1.1)}
.btn-s{background:var(--bg-input);color:var(--t2);border:1px solid var(--border)}.btn-s:hover{border-color:var(--border-h);background:var(--bg-input-h);color:var(--t1)}
.btn-d{background:var(--r-bg);color:var(--r)}.btn-sm{padding:5px 10px;font-size:11px}.btn-lg{padding:10px 24px;font-size:13px;font-weight:700}.btn-block{width:100%}
.btn:disabled{opacity:.3;cursor:not-allowed;transform:none!important;filter:none!important}

/* ═══════════════ MAIN LAYOUT ═══════════════ */
.app{display:flex;flex:1;overflow:hidden;min-width:0}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative}

/* Page Transition */
.subpage{animation:pageIn .35s var(--e)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.canvas-grid{animation:pageIn .3s var(--e)}

/* ═══════════════ SIDEBAR (history) ═══════════════ */
.sidebar{width:180px;background:var(--nav-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sidebar-head{padding:10px 12px 6px;display:flex;align-items:center;justify-content:space-between}
.sidebar-head h3{font-size:9px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.8px}
.sidebar-history{flex:1;overflow-y:auto;padding:0 8px 8px}
.hist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.hist-item{border-radius:var(--rs);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .15s;aspect-ratio:1;position:relative}
.hist-item:hover{border-color:var(--border-h)}.hist-item.on{border-color:var(--accent)}
.hist-item img{width:100%;height:100%;object-fit:cover;display:block}
.hist-item .hi-badge{position:absolute;bottom:2px;left:2px;padding:1px 5px;border-radius:var(--rx);font-size:7px;font-weight:700;background:rgba(0,0,0,.75);color:#ddd;backdrop-filter:blur(4px)}
.sidebar-empty{padding:20px 10px;text-align:center;color:var(--t4);font-size:10px;line-height:1.5}
.sidebar-section{padding:6px 10px;border-top:1px solid var(--border)}
.sidebar-section h4{font-size:8px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px}
.sidebar-section button{display:block;width:100%;text-align:left;padding:5px 8px;border-radius:var(--rx);font-size:11px;color:var(--t3);cursor:pointer;border:none;background:none;transition:background .12s}
.sidebar-section button:hover{background:var(--bg-input);color:var(--t2)}

/* ═══════════════ CANVAS ═══════════════ */
.canvas{flex:1;overflow-y:auto;padding:20px 24px 110px;display:flex;flex-direction:column;min-height:0;background:var(--canvas-bg)}
.canvas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-content:start}
.canvas-item{border-radius:var(--rm);overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:transform .3s var(--e),box-shadow .3s,border-color .2s;position:relative;background:var(--bg-2);box-shadow:var(--sh-card)}
.canvas-item:hover{transform:translateY(-4px);box-shadow:var(--sh-lg),0 0 20px var(--accent-ss);border-color:rgba(124,92,252,.25)}
.canvas-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.canvas-item .ci-actions{position:absolute;top:6px;right:6px;display:flex;gap:3px;opacity:0;transform:translateY(-6px);transition:all .2s var(--e)}
.canvas-item:hover .ci-actions{opacity:1;transform:translateY(0)}
.canvas-item .ci-actions button{width:28px;height:28px;border-radius:var(--rs);border:none;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:white;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.canvas-item .ci-actions button:hover{background:var(--accent);transform:scale(1.1)}
.canvas-item .ci-info{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:opacity .2s}
.canvas-item:hover .ci-info{opacity:1}
.canvas-item .ci-info span{font-size:10px;color:rgba(255,255,255,.9);font-weight:500}

/* ═══════════════ EMPTY STATE ═══════════════ */
.empty-canvas{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 16px 90px;position:relative}
.empty-canvas::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,252,.04) 0%,transparent 70%);top:30%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.empty-canvas .ec-icon{font-size:48px;margin-bottom:16px;opacity:.12;animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.empty-canvas h2{font-size:22px;font-weight:800;margin-bottom:6px;letter-spacing:-.4px;background:linear-gradient(135deg,var(--t1),var(--t2));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.empty-canvas p{font-size:13px;color:var(--t3);max-width:380px;margin-bottom:24px;line-height:1.6}
.suggest-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:540px}
.suggest-chip{padding:8px 18px;border-radius:var(--rf);border:1px solid var(--border);background:var(--bg-2);font-size:11px;font-weight:500;color:var(--t2);cursor:pointer;transition:border-color .15s,background .15s,transform .2s,box-shadow .2s;box-shadow:var(--sh-card)}
.suggest-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-ss);transform:translateY(-2px);box-shadow:var(--sh),0 0 16px var(--accent-ss)}
.template-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:20px;max-width:540px}
.tmpl-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 14px;border-radius:var(--rm);border:1px solid var(--border);background:var(--bg-2);cursor:pointer;transition:all .2s;box-shadow:var(--sh-card);font-family:inherit;min-width:72px}
.tmpl-card .tmpl-icon{font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.tmpl-card .tmpl-name{font-size:8px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}
.tmpl-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh),0 0 16px var(--accent-ss)}
.tmpl-card:hover .tmpl-name{color:var(--accent)}
.gal-item .ci-actions{top:6px;right:6px}
.gal-item:hover .ci-actions{opacity:1;transform:translateY(0)}

/* ═══════════════ FLOATING PROMPT BAR ═══════════════ */
.prompt-bar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:680px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--rxl);padding:10px 16px;backdrop-filter:blur(20px) saturate(1.4);box-shadow:var(--sh-lg),var(--sh-glow);z-index:20}
.pb-input{display:flex;gap:8px;align-items:flex-end}
.pb-model{display:flex;align-items:center;gap:3px;padding:6px 10px;border-radius:var(--rm);border:1px solid var(--border);background:var(--bg-input);cursor:pointer;transition:border-color .15s;white-space:nowrap;flex-shrink:0;font-size:10px;font-weight:600;color:var(--t2)}
.pb-model:hover{border-color:var(--border-h)}
.pb-model .pm-icon{font-size:13px}
.pb-field{flex:1;min-width:0}
.pb-field textarea{width:100%;background:transparent;border:none;outline:none;color:var(--t1);font-size:13px;resize:none;min-height:20px;max-height:72px;line-height:1.5}
.pb-field textarea::placeholder{color:var(--t4)}
.pb-neg{margin-top:4px;padding-top:4px;border-top:1px solid var(--neg-border)}
.pb-neg textarea{width:100%;background:transparent;border:none;outline:none;color:var(--neg-color);font-size:10px;resize:none;min-height:14px;max-height:32px}
.pb-neg textarea::placeholder{color:rgba(248,113,113,.2)}
.pb-neg-label{font-size:8px;font-weight:700;color:rgba(248,113,113,.35);text-transform:uppercase;letter-spacing:.5px;margin-bottom:1px}
.pb-tools{display:flex;align-items:center;gap:2px;margin-top:5px}
.pb-tool{width:26px;height:26px;border-radius:var(--rs);border:none;background:transparent;color:var(--t4);cursor:pointer;font-size:13px;transition:background .12s,color .12s;display:flex;align-items:center;justify-content:center}
.pb-tool:hover{background:var(--bg-input-h);color:var(--t2)}.pb-tool.on{color:var(--accent);background:var(--accent-ss)}
.pb-chars{margin-left:auto;font-size:10px;color:var(--t4);font-family:'JetBrains Mono',monospace}
.pb-go{flex-shrink:0}
.pb-go button{padding:12px 26px;font-size:13px;font-weight:700;border-radius:var(--rl);display:flex;flex-direction:column;align-items:center;gap:0;box-shadow:0 4px 24px var(--accent-g)}
.pb-go .shortcut{font-size:8px;color:rgba(255,255,255,.3);font-weight:400}

/* ═══════════════ BRAINSTORM ═══════════════ */
.bs-overlay{position:absolute;bottom:calc(100% + 10px);left:0;right:0;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--rl);padding:14px;box-shadow:var(--sh-lg);backdrop-filter:blur(20px);animation:slideUp .2s var(--es);max-height:200px;overflow-y:auto;z-index:10}
@keyframes slideUp{from{opacity:0;transform:translateY(6px)}}
.bs-overlay h4{font-size:10px;font-weight:700;color:var(--accent);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.bs-overlay .close-bs{margin-left:auto;cursor:pointer;opacity:.5;font-size:14px;border:none;background:none;color:var(--t3)}.bs-overlay .close-bs:hover{opacity:1}
.bs-idea{padding:8px 12px;margin-bottom:3px;background:var(--bg-input);border-radius:var(--rs);font-size:11px;color:var(--t2);cursor:pointer;transition:background .12s,transform .1s;border:1px solid transparent}
.bs-idea:hover{background:var(--bg-input-h);color:var(--t1);border-color:var(--border);transform:translateX(3px)}

/* ═══════════════ RIGHT SETTINGS PANEL ═══════════════ */
.sp{width:var(--sp-w);background:var(--sp-bg);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:width .25s var(--e);position:relative}
.sp::before{content:'';position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent 0%,var(--accent-ss) 50%,transparent 100%);pointer-events:none}
.sp.collapsed{width:0;border-left:none}
.sp-header{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0}
.sp-title{font-size:12px;font-weight:700;color:var(--t1);letter-spacing:.2px}
.sp-toggle{width:24px;height:24px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg-input);color:var(--t4);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:background .12s}
.sp-toggle:hover{background:var(--bg-input-h);color:var(--t2)}
.sp-body{flex:1;overflow-y:auto;padding:8px}

/* SP Groups — Card style */
.sp-group{margin-bottom:6px;padding:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--rm);box-shadow:var(--sh-card);position:relative;overflow:hidden}
.sp-group::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,rgba(124,92,252,.06) 50%,transparent 90%);pointer-events:none}
.sp-group-compact{padding:8px 10px;background:var(--bg-input);border:1px solid var(--border);box-shadow:none}
.sp-group-compact .sp-group-head{margin-bottom:6px;font-size:10px;color:var(--t3)}
.sp-group-head{font-size:11px;font-weight:700;color:var(--t1);margin-bottom:10px;display:flex;align-items:center;gap:5px}
.sp-field{margin-bottom:6px}.sp-field:last-child{margin-bottom:0}
.sp-field>label{display:block;font-size:8px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.sp-sel{width:100%;padding:6px 28px 6px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg-input);font-size:11px;font-weight:500;color:var(--t1);cursor:pointer;transition:border-color .12s;-webkit-appearance:none;appearance:none;background-image:var(--arrow);background-repeat:no-repeat;background-position:right 9px center;outline:none;font-family:inherit}
.sp-sel:hover{border-color:var(--border-h)}.sp-sel:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-ss)}

/* Niche Tabs — Pill style */
.niche-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.niche-tab{padding:6px 14px;border-radius:var(--rf);border:1px solid var(--border);background:var(--bg-input);font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:4px}
.niche-tab:hover{border-color:var(--border-h);color:var(--t2);background:var(--bg-input-h)}
.niche-tab.on{border-color:var(--accent);color:#fff;background:var(--grad);box-shadow:0 2px 12px var(--accent-g)}

/* Product Grid — Icon Cards */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.product-card{padding:8px 4px 6px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg-input);cursor:pointer;text-align:center;font-size:8px;font-weight:600;color:var(--t3);transition:all .15s;font-family:inherit;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:2px}
.product-card .p-icon{font-size:18px;display:block}
.product-card:hover{border-color:var(--border-h);color:var(--t2);background:var(--bg-input-h);transform:translateY(-1px)}
.product-card.on{border-color:var(--accent);color:var(--accent);background:var(--accent-ss);box-shadow:0 2px 10px var(--accent-ss)}

/* Style Pills */
.style-pills{display:flex;flex-wrap:wrap;gap:4px}
.style-pill{padding:4px 10px;border-radius:var(--rf);border:1px solid var(--border);background:var(--bg-input);font-size:10px;font-weight:600;color:var(--t3);cursor:pointer;transition:all .15s;font-family:inherit}
.style-pill:hover{border-color:var(--border-h);color:var(--t2);background:var(--bg-input-h)}
.style-pill.on{border-color:var(--accent);color:#fff;background:var(--grad2);box-shadow:0 2px 10px var(--accent-g)}

/* ═══════════════ ADVANCED TOGGLE ═══════════════ */
.adv-toggle{display:flex;align-items:center;gap:4px;margin-top:6px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg-2);color:var(--t3);cursor:pointer;font-size:9px;font-weight:700;font-family:inherit;width:100%;transition:background .12s;text-transform:uppercase;letter-spacing:.4px;box-shadow:var(--sh-card)}
.adv-toggle:hover{background:var(--bg-3);color:var(--t2)}
.adv-toggle .chevron{transition:transform .2s;font-size:8px}
.adv-toggle.open .chevron{transform:rotate(90deg)}
.adv-panel{overflow:hidden;max-height:0;transition:max-height .35s var(--e)}
.adv-panel.open{max-height:600px;padding-top:6px;overflow-y:auto}
.sr{margin-bottom:6px}.sr:last-child{margin-bottom:0}
.sr label{display:block;font-size:9px;font-weight:600;color:var(--t4);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}
.slider-row{display:flex;align-items:center;gap:6px}
.slider-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:var(--bg-input-h);border-radius:2px;outline:none}
.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-2);box-shadow:0 0 8px var(--accent-g)}
.slider-row .sv{font-size:10px;font-weight:600;color:var(--accent);min-width:22px;text-align:right;font-family:'JetBrains Mono',monospace}
.chips{display:flex;flex-wrap:wrap;gap:3px}
.chip{padding:3px 9px;border-radius:var(--rf);border:1px solid var(--border);background:var(--bg-input);font-size:9px;font-weight:600;color:var(--t3);cursor:pointer;transition:all .12s}
.chip:hover{border-color:var(--border-h);color:var(--t2)}.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-s)}
.chk-row{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t2);cursor:pointer;padding:2px 0}
.chk-row input{accent-color:var(--accent)}

/* ═══════════════ SUBPAGES ═══════════════ */
.subpage{padding:28px 32px;max-width:1200px;margin:0 auto;overflow-y:auto;flex:1}
.sp-head{text-align:center;margin-bottom:28px;position:relative;padding-bottom:16px}
.sp-head::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:3px;background:var(--grad);border-radius:3px}
.sp-head h2{font-size:22px;font-weight:800;margin-bottom:6px;letter-spacing:-.3px}
.sp-head p{color:var(--t3);font-size:13px;max-width:480px;margin:0 auto}
.sp-head .sp-badge{display:inline-block;margin-top:8px;padding:4px 14px;border-radius:var(--rf);font-size:9px;font-weight:700;background:var(--accent-ss);color:var(--accent);text-transform:uppercase;letter-spacing:.6px;border:1px solid rgba(124,92,252,.15)}
.card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--rm);padding:18px;transition:border-color .2s,box-shadow .2s;box-shadow:var(--sh-card)}
.card:hover{border-color:var(--border-h)}
.card+.card{margin-top:12px}
.card-head{font-size:13px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.upload{border:2px dashed var(--border);border-radius:var(--rl);padding:40px;text-align:center;cursor:pointer;transition:all .25s;background:var(--bg-input)}
.upload:hover{border-color:var(--accent);background:var(--accent-ss);transform:scale(1.005)}
.upload .ic{font-size:36px;margin-bottom:8px;opacity:.3}.upload p{color:var(--t3);font-size:12px;margin-top:4px}
.steps-flow{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:16px}
.sf-step{display:flex;align-items:center;gap:4px;padding:5px 10px;font-size:11px;font-weight:600;color:var(--t4)}
.sf-step.on{color:var(--accent)}.sf-step .sn{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;border:1.5px solid var(--border);background:var(--bg-input)}
.sf-step.on .sn{border-color:var(--accent);background:var(--accent-s);color:var(--accent)}
.sf-arrow{color:var(--t4);font-size:8px;margin:0 2px}
.ev-modes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ev-btn{padding:16px 8px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--rm);color:var(--t2);cursor:pointer;transition:all .2s var(--e);text-align:center;font-family:inherit;box-shadow:var(--sh-card)}
.ev-btn:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:var(--sh)}
.ev-btn.on{border-color:var(--accent2);background:rgba(167,139,250,.08);box-shadow:0 6px 24px rgba(167,139,250,.12)}
.ev-btn .mi{font-size:24px;display:block;margin-bottom:6px}.ev-btn .mn{font-size:11px;font-weight:700}.ev-btn .md{font-size:9px;color:var(--t4);margin-top:3px;line-height:1.3}

/* ═══════════════ TABLES ═══════════════ */
table{width:100%;border-collapse:collapse}th,td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--border);font-size:12px}
th{color:var(--t4);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px}tr:hover{background:var(--bg-input)}
.badge{display:inline-flex;padding:2px 7px;border-radius:var(--rf);font-size:10px;font-weight:700}
.badge-ok{background:var(--g-bg);color:var(--g)}.badge-warn{background:var(--y-bg);color:var(--y)}.badge-err{background:var(--r-bg);color:var(--r)}.badge-info{background:var(--accent-s);color:var(--accent)}

/* ═══════════════ STATS ═══════════════ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--rm);padding:18px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;box-shadow:var(--sh-card)}
.stat::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:.7}
.stat:nth-child(1)::after{background:var(--accent)}.stat:nth-child(2)::after{background:var(--accent2)}.stat:nth-child(3)::after{background:var(--cyan)}.stat:nth-child(4)::after{background:var(--y)}.stat:nth-child(5)::after{background:var(--g)}.stat:nth-child(6)::after{background:var(--r)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.stat-icon{font-size:20px;margin-bottom:6px;opacity:.6}
.stat-v{font-size:24px;font-weight:800;letter-spacing:-.5px}.stat-l{font-size:10px;color:var(--t3);font-weight:600;margin-top:2px}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:14px}
.qa-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--rm);padding:18px;cursor:pointer;transition:all .2s var(--e);text-align:center;box-shadow:var(--sh-card)}
.qa-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh)}
.qa-card .qa-icon{font-size:24px;margin-bottom:6px}.qa-card .qa-title{font-size:12px;font-weight:700;margin-bottom:3px}.qa-card .qa-desc{font-size:10px;color:var(--t3);line-height:1.4}

/* ═══════════════ GALLERY ═══════════════ */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gal-item{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--rm);overflow:hidden;transition:all .2s var(--e);cursor:pointer;position:relative;box-shadow:var(--sh-card)}
.gal-item:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:rgba(124,92,252,.25)}
.gal-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .3s var(--e)}
.gal-item:hover img{transform:scale(1.03)}
.gal-info{padding:8px 10px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.nbadge{padding:2px 7px;border-radius:var(--rf);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.nbadge.sport{background:var(--accent-s);color:var(--accent)}.nbadge.farm{background:var(--g-bg);color:var(--g)}.nbadge.trademark{background:var(--y-bg);color:var(--y)}

/* ═══════════════ MODALS ═══════════════ */
.modal-overlay{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(16px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.on{opacity:1;pointer-events:all}
.modal{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--rl);padding:28px;width:92%;max-width:520px;max-height:85vh;overflow-y:auto;transform:translateY(10px) scale(.96);transition:transform .3s var(--es);box-shadow:var(--sh-lg)}
.modal-overlay.on .modal{transform:translateY(0) scale(1)}.modal h2{font-size:17px;font-weight:800;margin-bottom:14px;letter-spacing:-.2px}
.preview-c{text-align:center;padding:12px}.preview-c img{max-width:100%;max-height:380px;border-radius:var(--rm);box-shadow:var(--sh-lg)}
.preview-a{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dd{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--rs);padding:3px;min-width:130px;box-shadow:var(--sh-lg);z-index:200;animation:ddIn .12s}
@keyframes ddIn{from{opacity:0;transform:translateY(-3px)}}
.dd button{display:flex;align-items:center;gap:5px;padding:6px 9px;border-radius:var(--rx);font-size:12px;color:var(--t2);cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:background .1s}
.dd button:hover{background:var(--bg-input)}.dd button.red{color:var(--r)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:8px}.compare img{width:100%;border-radius:var(--rm);border:1px solid var(--border)}

/* ═══════════════ UTILITY ═══════════════ */
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{position:fixed;inset:0;background:var(--loading-bg);backdrop-filter:blur(16px);flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:2000}
.loading-overlay .spinner{box-shadow:0 0 20px var(--accent-g)}
.loading-overlay p{color:var(--t2);font-size:14px;font-weight:500;animation:lp 2s ease-in-out infinite;letter-spacing:.2px}@keyframes lp{0%,100%{opacity:.4}50%{opacity:1}}
.toast-container{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:3000;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.toast{padding:9px 20px;border-radius:var(--rf);font-size:12px;font-weight:500;box-shadow:var(--sh-lg);animation:tIn .3s var(--es);backdrop-filter:blur(12px)}@keyframes tIn{from{transform:translateY(10px);opacity:0}}
.toast-success{background:var(--toast-ok-bg);border:1px solid var(--toast-ok-bdr);color:var(--g)}
.toast-error{background:var(--toast-err-bg);border:1px solid var(--toast-err-bdr);color:var(--r)}
.toast-info{background:var(--toast-info-bg);border:1px solid var(--toast-info-bdr);color:var(--accent)}
.empty{text-align:center;padding:48px 24px}.empty .ic{font-size:48px;margin-bottom:12px;opacity:.25;filter:grayscale(.3)}.empty h3{font-size:16px;margin-bottom:6px;font-weight:700;color:var(--t1)}.empty p{font-size:12px;color:var(--t3);margin-bottom:14px;max-width:320px;margin-left:auto;margin-right:auto;line-height:1.5}

/* ═══════════════ ADMIN ═══════════════ */
.admin-tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.admin-tab{padding:7px 16px;border-radius:var(--rf);border:1px solid var(--border);background:var(--bg-input);font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:4px}
.admin-tab:hover{border-color:var(--border-h);color:var(--t2);background:var(--bg-input-h)}
.admin-tab.on{border-color:var(--accent);color:#fff;background:var(--grad);box-shadow:0 2px 12px var(--accent-g)}
.admin-content{min-height:200px}

/* ═══════════════ PROMPT LIBRARY ═══════════════ */
.prompt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.prompt-card{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--rm);padding:18px;transition:all .2s var(--e)}
.prompt-card:hover{border-color:var(--border-h);box-shadow:var(--sh);transform:translateY(-1px)}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.pc-head strong{font-size:14px;font-weight:700;color:var(--t1);line-height:1.3}
.pc-actions{display:flex;gap:4px;flex-shrink:0}
.pc-prompt{font-size:12px;color:var(--t2);line-height:1.6;margin-bottom:12px;word-break:break-word}
.pc-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.pc-tags{font-size:10px;color:var(--accent2);font-weight:500}
.pc-usage{font-size:10px;color:var(--t4);margin-left:auto}

/* ═══════════════ COLLECTIONS ═══════════════ */
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.col-card{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:all .25s var(--e);position:relative}
.col-card:hover{border-color:var(--col-color,var(--accent));transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.col-cover{height:120px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--col-color,var(--accent)) 0%,transparent 80%);overflow:hidden}
.col-cover img{width:100%;height:100%;object-fit:cover}
.col-icon{font-size:38px}
.col-info{padding:14px 16px 10px}
.col-info strong{font-size:14px;font-weight:700;color:var(--t1);display:block;margin-bottom:3px}
.col-count{font-size:11px;color:var(--t3)}
.col-preview{display:flex;gap:4px;padding:0 16px 14px}
.col-preview img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid var(--border)}
.col-del{position:absolute;top:8px;right:8px;opacity:0;transition:opacity .2s}
.col-card:hover .col-del{opacity:1}

.mock-products{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.mock-prod{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;font-size:14px;color:var(--t3);transition:all .2s var(--e);font-family:inherit}
.mock-prod:hover{border-color:var(--border-h);color:var(--t1);transform:translateY(-1px)}
.mock-prod.on{border-color:var(--accent);color:var(--accent);background:var(--accent-ss);box-shadow:0 2px 12px var(--accent-g)}
.mock-prod span{font-size:10px;font-weight:600}
.mock-colors{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.mock-color{width:32px;height:32px;border-radius:50%;border:2.5px solid var(--border);cursor:pointer;transition:all .2s}
.mock-color:hover{transform:scale(1.2)}
.mock-color.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-s)}
.mockup-view{display:flex;align-items:center;justify-content:center;padding:24px}
.mockup-body{position:relative;background:var(--mock-color,#1a1a2e);border-radius:var(--rm);overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(0,0,0,.45);transition:background .3s}
.mockup-tshirt .mockup-body{width:260px;height:310px;border-radius:8px 60px 10px 10px/8px 8px 10px 10px;clip-path:polygon(30% 0,70% 0,78% 4%,95% 18%,82% 22%,82% 100%,18% 100%,18% 22%,5% 18%,22% 4%)}
.mockup-hoodie .mockup-body{width:280px;height:330px;border-radius:14px}
.mockup-mug .mockup-body{width:210px;height:190px;border-radius:8px 28px 28px 8px}
.mockup-cap .mockup-body{width:240px;height:170px;border-radius:120px 120px 12px 12px}
.mockup-tote .mockup-body{width:240px;height:290px;border-radius:6px 6px 16px 16px}
.mockup-phone .mockup-body{width:155px;height:310px;border-radius:28px}
.mockup-poster .mockup-body{width:240px;height:350px;border-radius:3px;border:10px solid #333}
.mockup-pillow .mockup-body{width:240px;height:240px;border-radius:20px}
.mockup-art{width:60%;height:55%;display:flex;align-items:center;justify-content:center}
.mockup-art img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(0,0,0,.4))}

/* ═══════════════ ACTIVITY FEED ═══════════════ */
.act-timeline{position:relative;padding-left:24px}
.act-timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent-s) 0%,var(--border) 100%)}
.act-item{position:relative;margin-bottom:18px;display:flex;gap:14px;align-items:flex-start}
.act-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-top:3px;border:2.5px solid var(--bg-2);box-shadow:0 0 0 2px var(--border)}
.act-body{flex:1;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--rm);padding:12px 16px;transition:border-color .15s}
.act-body:hover{border-color:var(--border-h)}
.act-head{display:flex;align-items:center;gap:8px;font-size:13px}
.act-head strong{font-weight:700;color:var(--t1)}
.act-icon{font-size:16px}
.act-time{margin-left:auto;font-size:10px;color:var(--t4);white-space:nowrap}
.act-detail{font-size:12px;color:var(--t3);margin-top:5px;line-height:1.4}
.act-thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;margin-top:8px;border:1px solid var(--border)}

/* ═══════════════ COMMAND PALETTE ═══════════════ */
.cmd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding-top:min(20vh,140px)}
.cmd-palette{width:90%;max-width:560px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--sh-lg);overflow:hidden;animation:cmdIn .15s var(--e)}
@keyframes cmdIn{from{opacity:0;transform:scale(.97) translateY(-8px)}to{opacity:1;transform:none}}
.cmd-input-wrap{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.cmd-icon{font-size:16px;opacity:.5}
.cmd-input{flex:1;background:none;border:none;outline:none;color:var(--t1);font-size:14px;font-family:inherit}
.cmd-input::placeholder{color:var(--t4)}
.cmd-kbd{font-family:'JetBrains Mono';font-size:9px;padding:2px 6px;background:var(--bg-4);border:1px solid var(--border);border-radius:4px;color:var(--t4)}
.cmd-list{max-height:340px;overflow-y:auto;padding:6px}
.cmd-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--rs);cursor:pointer;transition:background .1s}
.cmd-item:hover{background:var(--accent-ss)}
.cmd-item-icon{font-size:18px;width:28px;text-align:center}
.cmd-item-text{display:flex;flex-direction:column}
.cmd-item-text strong{font-size:13px;font-weight:600;color:var(--t1)}
.cmd-item-text span{font-size:10px;color:var(--t3)}

/* ═══════════════ NOTIFICATION CENTER ═══════════════ */
.notif-badge{position:absolute;top:2px;right:2px;background:var(--r);color:#fff;font-size:8px;font-weight:700;min-width:14px;height:14px;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.notif-panel{position:fixed;top:60px;right:16px;width:320px;max-height:420px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--rm);box-shadow:var(--sh-lg);z-index:9998;overflow:hidden;animation:cmdIn .12s var(--e)}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.notif-head strong{font-size:13px;color:var(--t1)}
.notif-list{max-height:340px;overflow-y:auto}
.notif-item{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.notif-msg{font-size:11px;color:var(--t2);line-height:1.4}
.notif-time{font-size:9px;color:var(--t4);white-space:nowrap;flex-shrink:0}
.notif-empty{padding:24px;text-align:center;font-size:12px;color:var(--t4)}
.nav-cmd{position:relative}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:900px){.sidebar{display:none}.sp{width:200px}.prompt-grid{grid-template-columns:1fr}.col-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.cmd-palette{width:95%}}
@media(max-width:700px){.sp{display:none}.prompt-bar{width:calc(100% - 16px);border-radius:var(--rl)}.mock-products{grid-template-columns:repeat(3,1fr)}.notif-panel{width:calc(100% - 32px);right:16px}}

/* ═══════════════ IMAGE TOOLS ═══════════════ */
.tool-card{transition:all .2s var(--e)}.tool-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.2)}
#tool-workspace .upload{min-height:200px;border-style:dashed}
#tool-output-preview img{animation:toolFadeIn .4s var(--e)}
@keyframes toolFadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}

/* ═══════════════ ENHANCE ═══════════════ */
.enh-scale{min-width:48px;font-weight:700;font-size:13px}
.enh-scale.on{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 10px var(--accent-g)}
#enh-output-preview img{animation:toolFadeIn .4s var(--e)}
#enh-compare-modal{backdrop-filter:blur(12px)}

/* ═══════════════ COMPARISON SLIDER ═══════════════ */
.compare-slider{position:relative;overflow:hidden;border-radius:var(--rm);border:1px solid var(--border);cursor:ew-resize;user-select:none;touch-action:none}
.compare-slider img{display:block;width:100%;height:auto;pointer-events:none}
.compare-slider .cs-after{position:absolute;inset:0;overflow:hidden}
.compare-slider .cs-handle{position:absolute;top:0;bottom:0;width:3px;background:var(--accent);z-index:10;cursor:ew-resize;box-shadow:0 0 12px var(--accent-g)}
.compare-slider .cs-handle::before{content:'⟨⟩';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--accent);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;box-shadow:0 2px 12px var(--accent-g)}

/* ═══════════════ ENHANCED DROP ZONES ═══════════════ */
.drop-zone{border:2px dashed var(--border);border-radius:var(--rl);padding:32px;text-align:center;transition:all .25s var(--e);cursor:pointer;position:relative;overflow:hidden}
.drop-zone::before{content:'';position:absolute;inset:0;background:var(--accent-g);opacity:0;transition:opacity .25s}
.drop-zone:hover,.drop-zone.drag{border-color:var(--accent);background:var(--accent-bg)}
.drop-zone:hover::before,.drop-zone.drag::before{opacity:.05}
.drop-zone.drag{animation:dzPulse 1s ease-in-out infinite}
@keyframes dzPulse{0%,100%{border-color:var(--accent);box-shadow:0 0 0 0 var(--accent-g)}50%{border-color:var(--accent);box-shadow:0 0 20px var(--accent-g)}}
.drop-zone .dz-icon{font-size:36px;margin-bottom:8px;display:block;opacity:.6}
.drop-zone .dz-text{font-size:13px;color:var(--t2);font-weight:500}
.drop-zone .dz-hint{font-size:10px;color:var(--t4);margin-top:6px}

/* ═══════════════ KEYBOARD SHORTCUTS ═══════════════ */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;background:var(--bg-2);border:1px solid var(--border);border-radius:4px;font-size:10px;font-weight:700;font-family:'SF Mono',Monaco,'Courier New',monospace;color:var(--t2);box-shadow:0 1px 0 var(--border)}
.shortcuts-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sc-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--bg-2);border-radius:var(--rs);font-size:11px;color:var(--t2)}
.sc-item .sc-keys{display:flex;gap:3px}

/* ═══════════════ BATCH WATERMARK ═══════════════ */
.batch-progress{width:100%;height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden;margin:8px 0}
.batch-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-s));border-radius:3px;transition:width .3s var(--e)}
.batch-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:12px}
.batch-item{border:1px solid var(--border);border-radius:var(--rm);overflow:hidden;background:var(--bg-2)}
.batch-item img{width:100%;aspect-ratio:1;object-fit:cover}
.batch-item .bi-info{padding:6px 8px;font-size:10px;color:var(--t3);display:flex;align-items:center;justify-content:space-between}
.batch-item.bi-ok{border-color:var(--g)}
.batch-item.bi-fail{border-color:var(--r);opacity:.7}

/* ═══════════════ GALLERY SEARCH ═══════════════ */
.gal-search{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.gal-search input[type="text"]{flex:1;min-width:200px;padding:8px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--rf);color:var(--t1);font-size:12px;transition:border-color .2s}
.gal-search input[type="text"]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-g)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:900px){.sidebar{display:none}.sp{width:200px}.prompt-grid{grid-template-columns:1fr}.col-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.cmd-palette{width:95%}.shortcuts-grid{grid-template-columns:1fr}}
@media(max-width:700px){.sp{display:none}.prompt-bar{width:calc(100% - 16px);border-radius:var(--rl)}.mock-products{grid-template-columns:repeat(3,1fr)}.notif-panel{width:calc(100% - 32px);right:16px}}