:root {
  --bg:#0C1219;--surface:#131C28;--surface2:#1A2538;--border:#1E2D44;
  --accent:#00BCD4;--accent-dim:rgba(0,188,212,.12);--accent-glow:rgba(0,188,212,.25);
  --amber:#F0A500;--amber-dim:rgba(240,165,0,.12);
  --red:#E03535;--red-dim:rgba(224,53,53,.12);
  --green:#22C55E;--green-dim:rgba(34,197,94,.12);
  --purple:#A855F7;--purple-dim:rgba(168,85,247,.12);
  --text:#DDE5F0;--text-muted:#6B7E95;--text-dim:#4A5A6F;
  --radius:8px;--radius-lg:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;font-size:14px;line-height:1.5;min-height:100vh}
.header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;display:flex;align-items:center;gap:16px;height:54px;position:sticky;top:0;z-index:100}
.logo{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;color:var(--accent);letter-spacing:1px;text-transform:uppercase;flex-shrink:0}
.logo span{color:var(--text)}
.header-links{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap}
.ql{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;text-decoration:none;border:1px solid var(--border);color:var(--text-muted);background:var(--surface2);transition:all .15s;white-space:nowrap}
.ql:hover{border-color:var(--accent);color:var(--accent)}
.ql.primary{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.tab-nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;display:flex;gap:2px;overflow-x:auto}
.tab-btn{padding:13px 16px;font-size:13px;font-weight:600;font-family:'Barlow Condensed',sans-serif;letter-spacing:.4px;text-transform:uppercase;border:none;background:none;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap;flex-shrink:0}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.content{padding:18px;max-width:1320px;margin:0 auto}
.tab-panel{display:none}
.tab-panel.active{display:block}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.card-title{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);margin-bottom:10px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px}
.kpi-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);margin-bottom:4px}
.kpi-value{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:700;line-height:1}
.kpi-sub{font-size:11px;color:var(--text-muted);margin-top:3px}
.kpi.c-accent .kpi-value{color:var(--accent)}
.kpi.c-amber .kpi-value{color:var(--amber)}
.kpi.c-red .kpi-value{color:var(--red)}
.kpi.c-green .kpi-value{color:var(--green)}
.kpi.c-purple .kpi-value{color:var(--purple)}
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.b-main{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(0,188,212,.2)}
.b-unpub{background:var(--surface2);color:var(--text-muted);border:1px solid var(--border)}
.b-dev{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(168,85,247,.2)}
.b-live{background:var(--green-dim);color:var(--green);border:1px solid rgba(34,197,94,.2)}
.b-draft{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(240,165,0,.2)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:7px 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid rgba(30,45,68,.5);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02)}
.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;border:none;cursor:pointer;text-decoration:none;transition:all .15s;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--accent);color:#0C1219}
.btn-primary:hover{background:#26D4EA}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-sec{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn-sec:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--text-muted)}
.btn-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(34,197,94,.2)}
.btn-green:hover{background:var(--green);color:#0C1219}
.btn-sm{padding:4px 9px;font-size:12px}
.btn-xs{padding:2px 7px;font-size:11px}
.btn-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(224,53,53,.2)}
.filter-bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.fbtn{padding:4px 11px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.3px}
.fbtn:hover,.fbtn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.fbtn.cB.active{border-color:var(--red);color:var(--red);background:var(--red-dim)}
.fbtn.cU.active{border-color:var(--amber);color:var(--amber);background:var(--amber-dim)}
.fbtn.cS.active{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.fbtn.cC.active{border-color:var(--purple);color:var(--purple);background:var(--purple-dim)}
.fbtn.cF.active{border-color:#06B6D4;color:#06B6D4;background:rgba(6,182,212,.12)}
.search-input{padding:5px 11px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:13px;min-width:180px;outline:none}
.search-input:focus{border-color:var(--accent)}
.search-input::placeholder{color:var(--text-dim)}
.cat-pill{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.3px}
.cB{background:var(--red-dim);color:var(--red)}
.cU{background:var(--amber-dim);color:var(--amber)}
.cS{background:var(--green-dim);color:var(--green)}
.cC{background:var(--purple-dim);color:var(--purple)}
.cF{background:rgba(6,182,212,.12);color:#06B6D4}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;cursor:pointer;flex-shrink:0;transition:transform .15s}
.status-dot:hover{transform:scale(1.4)}
.s-open{background:var(--red);box-shadow:0 0 0 2px var(--red-dim)}
.s-in_progress{background:var(--amber);box-shadow:0 0 0 2px var(--amber-dim)}
.s-done{background:var(--green);box-shadow:0 0 0 2px var(--green-dim)}
.theme-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:700px){.theme-pair{grid-template-columns:1fr}}
.theme-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.theme-card.live{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow) inset}
.theme-card.dev{border-color:var(--purple);box-shadow:0 0 0 1px rgba(168,85,247,.15) inset}
.theme-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;margin:5px 0}
.workflow{display:flex;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);margin:12px 0}
.wf-step{flex:1;padding:9px 4px;text-align:center;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);background:var(--surface2);border-right:1px solid var(--border);cursor:pointer;transition:all .15s}
.wf-step:last-child{border-right:none}
.wf-step.active{background:var(--accent-dim);color:var(--accent)}
.wf-step.done{background:var(--green-dim);color:var(--green)}
.wf-step .sn{display:block;font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;line-height:1;margin-bottom:1px}
.checklist{list-style:none;display:flex;flex-direction:column;gap:5px}
.checklist li{display:flex;align-items:center;gap:7px;font-size:13px}
.checklist input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.checklist label{cursor:pointer}
.checklist input:checked+label{color:var(--text-muted);text-decoration:line-through}
.progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
.note-box{background:var(--amber-dim);border:1px solid rgba(240,165,0,.2);border-radius:var(--radius);padding:9px 13px;font-size:12px;color:var(--amber);margin-top:10px}
.info-box{background:var(--accent-dim);border:1px solid rgba(0,188,212,.2);border-radius:var(--radius);padding:9px 13px;font-size:12px;color:var(--accent);margin-bottom:12px}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.divider{height:1px;background:var(--border);margin:14px 0}
.muted{color:var(--text-muted)}
.form-input,.form-select{padding:6px 11px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:13px;font-family:inherit;outline:none}
.form-input:focus,.form-select:focus{border-color:var(--accent)}
.form-input{min-width:140px}
.form-select option{background:var(--surface)}
.sec-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.sec-title .cnt{font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--surface2);color:var(--text-muted);border:1px solid var(--border)}
.conn-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.conn-ok{background:var(--green)}
.conn-wait{background:var(--amber);animation:pulse 1s ease-in-out infinite}
.conn-err{background:var(--red)}

/* ── CITY FACTORY ── */
.city-grid{display:flex;flex-direction:column;gap:0}
.city-row{border-bottom:1px solid rgba(30,45,68,.5);transition:background .1s}
.city-row:hover{background:rgba(255,255,255,.02)}
.city-row:last-child{border-bottom:none}
.city-row-header{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;user-select:none}
.city-name{font-weight:600;font-size:13px;flex:1}
.city-rank{font-size:11px;font-weight:700;color:var(--text-dim);width:22px;flex-shrink:0;font-family:'Barlow Condensed',sans-serif}
.city-progress{display:flex;gap:4px}
.city-ptype{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;transition:all .15s;flex-shrink:0;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);font-weight:700}
.city-ptype:hover{border-color:var(--accent);color:var(--accent)}
.city-ptype.st-drafted{background:var(--amber-dim);border-color:var(--amber);color:var(--amber)}
.city-ptype.st-saved{background:var(--green-dim);border-color:var(--green);color:var(--green)}
.city-ptype.st-generating{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}

/* gen panel */
.gen-panel{background:var(--surface2);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:16px;margin-bottom:14px;display:none}
.gen-panel.open{display:block}
.gen-panel-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gen-title{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;flex:1}
.gen-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;min-height:120px;font-size:13px;line-height:1.65;max-height:400px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}
.gen-content.streaming{border-color:var(--accent)}
.gen-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}

/* product posts */
.product-post-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:13px;display:flex;flex-direction:column;gap:8px}
.product-post-card .pp-title{font-weight:600;font-size:13px}
.product-post-card .pp-kw{font-size:11px;color:var(--accent)}
.product-post-card .pp-desc{font-size:12px;color:var(--text-muted)}
.product-post-card .pp-actions{display:flex;gap:6px;flex-wrap:wrap}
.product-post-card .pp-status{font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px}

/* quick links overview */
.ql-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:700px){.ql-grid{grid-template-columns:repeat(2,1fr)}}
.ql-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;text-decoration:none;display:flex;flex-direction:column;gap:5px;transition:all .15s}
.ql-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.ql-icon{font-size:18px}
.ql-label{font-size:12px;font-weight:600;color:var(--text)}
.ql-desc{font-size:11px;color:var(--text-muted)}

.batch-bar{background:var(--purple-dim);border:1px solid rgba(168,85,247,.2);border-radius:var(--radius);padding:10px 14px;display:none;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.batch-bar.show{display:flex}