:root{
  --bg:#f5f7fb; --card:#ffffff; --text:#0f172a; --muted:#64748b; --primary:#1d4ed8; --sidebar:#0b1220; --border:#e2e8f0;
}
[data-theme="dark"]{
  --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#94a3b8; --primary:#60a5fa; --sidebar:#050a14; --border:#1f2937;
}
*{box-sizing:border-box;}
body{margin:0;font-family:Arial, sans-serif;background:var(--bg);color:var(--text);}
a{color:inherit}
.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:var(--sidebar);padding:18px;overflow:auto;}
.sidebar .brand{color:#fff;font-weight:800;letter-spacing:.4px}
.sidebar .meta{color:rgba(255,255,255,.7);font-size:12px;margin-top:6px}
.sidebar a{display:block;padding:10px 10px;border-radius:12px;color:#cbd5e1;text-decoration:none;margin-top:6px}
.sidebar a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar .btn{width:100%;margin-top:10px;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer}
.main{margin-left:280px;padding:22px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.kpi{flex:1;min-width:220px}
.kpi .n{font-size:34px;font-weight:800}
.muted{color:var(--muted)}
.btnp{display:inline-block;background:var(--primary);color:#fff;border:0;padding:10px 12px;border-radius:12px;cursor:pointer;text-decoration:none}
.btno{display:inline-block;background:transparent;border:1px solid var(--border);padding:10px 12px;border-radius:12px;cursor:pointer;text-decoration:none}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(29,78,216,.12);color:var(--primary);border:1px solid rgba(29,78,216,.25);font-size:12px}
.input{width:100%;padding:10px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){
  .sidebar{position:static;width:auto}
  .main{margin-left:0}
  .grid2{grid-template-columns:1fr}
}
/* Designer */
.designer-wrap{display:flex;gap:14px;flex-wrap:wrap}
.stage{
  width:360px;height:226px;border:1px dashed var(--border);border-radius:16px;position:relative;
  background:#111; background-size:cover; background-position:center; overflow:hidden;
}
.stage .hint{position:absolute;left:10px;bottom:10px;color:#fff;font-size:12px;opacity:.8}
.el{
  position:absolute; padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.12); cursor:move; user-select:none; font-size:12px;
}
.el.selected{outline:2px solid var(--primary)}
.handle{
  position:absolute; right:-6px; bottom:-6px; width:12px; height:12px; border-radius:4px; background:var(--primary); cursor:nwse-resize;
}

/* V8.4 Smart Portrait AI Designer */
.ai-safe{mix-blend-mode:normal;}
.stage .el{background:rgba(0,0,0,.18); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:10px; padding:6px 8px;}
.stage .el .handle{width:12px;height:12px;border-radius:4px;background:rgba(255,255,255,.85); position:absolute; right:6px; bottom:6px;}

/* V8.4.2 Safe zone adjusted to fit portrait card perfectly */
.ai-safe{
position:absolute;
top:3px;
left:3px;
right:3px;
bottom:3px;
border:2px dashed rgba(255,255,255,.75);
border-radius:14px;
pointer-events:none;
}