/* Maneit Shared Design Language (Projects)
   Theme packs (LOCKED IDs):
   midnight, cold_glass, deep_forest, aurora_purple, neon_fjord, ember,
   clean_light, forest_light, lavender_light
*/

:root{
  /* base tokens (variable names locked) */
  --bg: #0b0d12;
  --panel: #111522;
  --panel2: #0f1420;
  --text: #e8ebf2;
  --muted: #a7b0c3;
  --line: #242b3c;
  --accent: #7aa2ff;
  --ok: #36d399;
  --warn: #fbbf24;
  --bad: #ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --pad-1: 10px;
  --pad-2: 14px;
  --pad-3: 18px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Theme packs */
:root[data-theme="midnight"]{
  --bg:#0b0d12; --panel:#111522; --panel2:#0f1420; --text:#e8ebf2; --muted:#a7b0c3; --line:#242b3c; --accent:#7aa2ff;
}
:root[data-theme="cold_glass"]{
  --bg:#070b10; --panel:#0e1622; --panel2:#0b1320; --text:#e9eef7; --muted:#a9b7cf; --line:#22324a; --accent:#7bdcff;
}
:root[data-theme="deep_forest"]{
  --bg:#070d0a; --panel:#0f1a13; --panel2:#0c1510; --text:#e7f3ea; --muted:#a7c2b0; --line:#1f3a2a; --accent:#55d38a;
}
:root[data-theme="aurora_purple"]{
  --bg:#0a0711; --panel:#151025; --panel2:#120c20; --text:#efe9ff; --muted:#c0b3e6; --line:#2b1f4a; --accent:#b48cff;
}
:root[data-theme="neon_fjord"]{
  --bg:#070a12; --panel:#0f1527; --panel2:#0c1222; --text:#e9efff; --muted:#a7b5ff; --line:#22306a; --accent:#4cffc5;
}
:root[data-theme="ember"]{
  --bg:#0f0707; --panel:#201010; --panel2:#1a0c0c; --text:#ffecec; --muted:#f0b2b2; --line:#4a1f1f; --accent:#ff7a59;
}
:root[data-theme="clean_light"]{
  --bg:#f6f7fb; --panel:#ffffff; --panel2:#ffffff; --text:#101425; --muted:#5a6478; --line:#e6e9f2; --accent:#2f6bff; --shadow:0 8px 24px rgba(0,0,0,.08);
}
:root[data-theme="forest_light"]{
  --bg:#f3f7f4; --panel:#ffffff; --panel2:#ffffff; --text:#0f1a13; --muted:#4f6a59; --line:#dde7df; --accent:#2db26b; --shadow:0 8px 24px rgba(0,0,0,.08);
}
:root[data-theme="lavender_light"]{
  --bg:#f7f4ff; --panel:#ffffff; --panel2:#ffffff; --text:#1b1430; --muted:#6a5b94; --line:#e7e0fb; --accent:#7a5cff; --shadow:0 8px 24px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:var(--sans); background:var(--bg); color:var(--text); }

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0));
}
.brand{ display:flex; align-items:center; gap:10px; }
.dot{ width:12px; height:12px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 4px rgba(122,162,255,.18); }
.brandText{ font-weight:800; }
.sep{ color:var(--muted); }
.page{ color:var(--muted); font-weight:700; }

.nav{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.pillLink{
  text-decoration:none;
  color:var(--muted);
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.02);
  font-size:12px;
}
.pillLink:hover{ border-color:rgba(122,162,255,.55); color:var(--text); }

.indicators{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
}

.grid{
  display:grid;
  grid-template-columns: 360px 1fr 360px;
  gap:14px;
  padding:14px;
  max-width: 1800px;
  margin:0 auto;
}
@media (max-width: 1200px){ .grid{ grid-template-columns:1fr; } }

.panel{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height: 74vh;
}
.panelHead{
  padding:var(--pad-2);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.h{ font-weight:800; }
.small{ font-size:12px; }
.muted{ color:var(--muted); }
.mono{ font-family:var(--mono); }

.field{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--text);
  outline:none;
}
.ta{ resize:vertical; }
.input:focus{ border-color:rgba(122,162,255,.65); box-shadow:0 0 0 4px rgba(122,162,255,.16); }

.rowline{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.spacer{ flex:1; }

.tabs{ display:flex; gap:10px; margin-top:10px; }
.tab{
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
}
.tab--active{
  border-color:rgba(122,162,255,.75);
  color:var(--text);
  box-shadow:0 0 0 4px rgba(122,162,255,.10);
}

.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.btn:hover{ border-color:rgba(122,162,255,.55); }
.btn.primary{ border-color:rgba(122,162,255,.55); background:rgba(122,162,255,.14); }

.list{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  max-height: calc(74vh - 260px);
}
.item{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:10px 12px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
}
.item:hover{ border-color:rgba(122,162,255,.55); }
.item.active{
  border-color:rgba(122,162,255,.75);
  box-shadow:0 0 0 4px rgba(122,162,255,.10);
}
.itemTitle{ font-weight:700; }
.itemSub{ margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.tag{
  font-family:var(--mono);
  font-size:11px;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
}

.content{ padding:var(--pad-2); }
.empty{
  padding:18px;
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  color:var(--muted);
}

.card{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:12px;
  background:rgba(255,255,255,.02);
  margin-bottom:12px;
}

.editorTop{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:12px;
}
.split2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 1200px){
  .editorTop{ grid-template-columns:1fr; }
  .split2{ grid-template-columns:1fr; }
}

.sections{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; }

.producers{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.producer{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.producer.ok{ border-color:rgba(54,211,153,.35); }
.producer.bad{ opacity:.65; }
.producer .left{ display:flex; flex-direction:column; gap:4px; }
.producer .name{ font-weight:700; }
.producer .req{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.producer .notes{ font-size:12px; color:var(--muted); }
.producer .actions{ display:flex; align-items:center; gap:8px; }

.producerLinks{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.linkRow{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; background:rgba(255,255,255,.02);
}
.linkRow a{ color:var(--muted); text-decoration:none; }
.linkRow a:hover{ color:var(--text); }

.debug{ margin-top:12px; }
.pre{ margin:0; max-height:220px; overflow:auto; font-family:var(--mono); font-size:12px; color:var(--muted); }

.diagRow{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.diagRow:last-child{ border-bottom:none; }
.diagRow .k{ color:var(--muted); }
.diagRow .v{ color:var(--text); }

.hidden{ display:none; }

.footer{
  padding:14px 16px;
  border-top:1px solid var(--line);
  text-align:center;
}
kbd{
  font-family:var(--mono);
  font-size:11px;
  padding:2px 6px;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:8px;
  background:rgba(255,255,255,.03);
}

/* === Theme Pack Set v1 (PM-locked) === */
html[data-theme="deep_forest"]{
  --bg:#07110b; --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.035);
  --text:rgba(235,245,238,.94); --muted:rgba(190,215,198,.70);
  --line:rgba(120,170,140,.18); --border:rgba(120,170,140,.18); --border2:rgba(120,170,140,.28);
  --accent:#34d399; --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
}
html[data-theme="aurora_purple"]{
  --bg:#0a0713; --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.04);
  --text:rgba(245,240,255,.94); --muted:rgba(210,195,235,.72);
  --line:rgba(167,139,250,.22); --border:rgba(167,139,250,.22); --border2:rgba(167,139,250,.32);
  --accent:#a78bfa; --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
}
html[data-theme="neon_fjord"]{
  --bg:#061018; --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.04);
  --text:rgba(235,250,255,.94); --muted:rgba(180,210,220,.72);
  --line:rgba(125,211,252,.22); --border:rgba(125,211,252,.22); --border2:rgba(125,211,252,.32);
  --accent:#7dd3fc; --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
}
html[data-theme="ember"]{
  --bg:#140808; --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.04);
  --text:rgba(255,240,235,.94); --muted:rgba(230,190,180,.72);
  --line:rgba(251,146,60,.22); --border:rgba(251,146,60,.22); --border2:rgba(251,146,60,.32);
  --accent:#fb923c; --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
}
html[data-theme="forest_light"]{
  --bg:#f5fbf7; --panel:rgba(0,0,0,.03); --panel2:rgba(0,0,0,.045);
  --text:rgba(10,12,16,.92); --muted:rgba(10,12,16,.60);
  --line:rgba(16,185,129,.22); --border:rgba(16,185,129,.22); --border2:rgba(16,185,129,.32);
  --accent:#10b981; --good:#059669; --warn:#b45309; --bad:#e11d48;
}
html[data-theme="lavender_light"]{
  --bg:#faf7ff; --panel:rgba(0,0,0,.03); --panel2:rgba(0,0,0,.045);
  --text:rgba(10,12,16,.92); --muted:rgba(10,12,16,.60);
  --line:rgba(167,139,250,.24); --border:rgba(167,139,250,.24); --border2:rgba(167,139,250,.34);
  --accent:#7c3aed; --good:#059669; --warn:#b45309; --bad:#e11d48;
}