/* ═══════════════════════════════════════════════════════════════════
   CreativeIQ — design tokens, mirrors creative_intelligence/_base.html
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --ci-bg:           #0A0F1D;
  --ci-bg-alt:       #0F1628;
  --ci-bg-warm:      #141C31;
  --ci-ink-card:     #070B16;
  --ci-ink:          #FBFBFD;
  --ci-ink-2:        #D9DCE4;
  --ci-ink-3:        #8A93A6;
  --ci-ink-4:        #5A6377;
  --ci-teal:         #00FFC2;
  --ci-teal-soft:    rgba(0,255,194,0.12);
  --ci-bad:          #FF6B5B;
  --ci-mid:          #FFB347;
  --ci-bad-soft:     rgba(255,107,91,0.18);
  --ci-mid-soft:     rgba(255,179,71,0.18);
  --ci-ok-soft:      rgba(0,255,194,0.16);
  --ci-sans:         'Inter', system-ui, -apple-system, sans-serif;
  --ci-mono:         'JetBrains Mono', ui-monospace, Menlo, monospace;
}

html.ci-app, body.ci-app {
  height: 100%;
  margin: 0;
  font-family: var(--ci-sans);
  color: var(--ci-ink-2);
  background: linear-gradient(180deg, #060A14 0%, #0A0F1D 100%);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
body.ci-app *, body.ci-app *::before, body.ci-app *::after { box-sizing: border-box; }
body.ci-app button { font-family: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
body.ci-app input, body.ci-app select, body.ci-app textarea { font-family: inherit; }
body.ci-app a { color: inherit; text-decoration: none; }

/* ─── App shell ─────────────────────────────────────────────────── */
.ci-app .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.ci-app .app-side {
  background: #060912;
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 22px 16px;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.ci-app .app-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 18px;
}
.ci-app .app-brand .mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--ci-teal), var(--ci-mid));
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #0A0F1D;
}
.ci-app .app-brand b { font-size: 15px; font-weight: 700; color: var(--ci-ink); }
.ci-app .app-brand b .dot { color: var(--ci-teal); }

.ci-app .ws-switch {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(0,255,194,0.06);
  border: 1px solid rgba(0,255,194,0.18);
  border-radius: 8px; margin-bottom: 22px;
  width: 100%; text-align: left;
  transition: all .15s;
}
.ci-app .ws-switch:hover { background: rgba(0,255,194,0.1); border-color: rgba(0,255,194,0.3); }
.ci-app .ws-switch .ws-mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg, var(--ci-teal), var(--ci-mid));
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #0A0F1D;
}
.ci-app .ws-switch .ws-name { flex: 1; min-width: 0; }
.ci-app .ws-switch .ws-name b { display: block; font-size: 13px; color: var(--ci-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ci-app .ws-switch .ws-name em { font-family: var(--ci-mono); font-size: 10px; color: var(--ci-ink-4); font-style: normal; }
.ci-app .ws-switch .ws-arrow { color: var(--ci-ink-4); font-size: 11px; }

.ci-app .nav-section { margin-bottom: 18px; }
.ci-app .nav-label {
  font-family: var(--ci-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ci-ink-4);
  text-transform: uppercase; padding: 0 12px 8px;
}
.ci-app .nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  font-size: 13.5px; color: var(--ci-ink-3);
  border-radius: 8px; cursor: pointer;
  margin-bottom: 2px; position: relative;
  transition: background .15s, color .15s;
}
.ci-app .nav-item:hover { color: var(--ci-ink); background: rgba(255,255,255,0.03); }
.ci-app .nav-item.active { color: var(--ci-ink); background: rgba(0,255,194,0.08); }
.ci-app .nav-item.active::before {
  content: ''; position: absolute; left: -16px; top: 8px; bottom: 8px;
  width: 3px; background: var(--ci-teal); border-radius: 0 3px 3px 0;
}
.ci-app .nav-item .ico { width: 18px; height: 18px; opacity: 0.85; display: grid; place-items: center; }
.ci-app .nav-item.active .ico { color: var(--ci-teal); }
.ci-app .nav-item .badge {
  margin-left: auto; font-family: var(--ci-mono); font-size: 10px;
  background: rgba(255,107,91,0.18); color: #FF8A7E;
  padding: 2px 7px; border-radius: 999px; font-weight: 600;
}
.ci-app .nav-item .badge.ok { background: var(--ci-ok-soft); color: var(--ci-teal); }

.ci-app .app-main { min-width: 0; display: flex; flex-direction: column; }
.ci-app .app-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(10,15,29,0.6); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.ci-app .app-topbar .title h1 { font-size: 18px; font-weight: 700; color: var(--ci-ink); margin: 0; }
.ci-app .app-topbar .title .crumb { font-family: var(--ci-mono); font-size: 11px; color: var(--ci-ink-4); margin-top: 2px; }
.ci-app .app-topbar .spacer { flex: 1; }
.ci-app .app-topbar .icon-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  display: grid; place-items: center;
  color: var(--ci-ink-3);
  transition: all .15s;
}
.ci-app .app-topbar .icon-btn:hover { background: rgba(255,255,255,0.05); color: var(--ci-ink); }
.ci-app .app-topbar .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ci-teal), var(--ci-mid));
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #0A0F1D;
}

.ci-app .app-content {
  padding: 28px;
  background: linear-gradient(180deg, #0A0F1D 0%, #08111E 100%);
  flex: 1;
}
.ci-app .app-content > section { margin-bottom: 28px; }
.ci-app .app-content > section:last-child { margin-bottom: 0; }

/* ─── Reusable atoms ────────────────────────────────────────────── */
.ci-app .card {
  background: #070B16;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 22px;
}
.ci-app .card-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 16px;
}
.ci-app .card-head h3 { font-size: 15px; font-weight: 700; color: var(--ci-ink); margin: 0; }
.ci-app .card-head h3 em { font-style: normal; font-family: var(--ci-mono); font-size: 11px; color: var(--ci-ink-4); margin-left: 8px; font-weight: 500; }
.ci-app .card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.ci-app .ci-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent; transition: all .15s;
}
.ci-app .ci-btn.primary { background: var(--ci-teal); color: #070B16; }
.ci-app .ci-btn.primary:hover { background: #33FFCF; box-shadow: 0 0 0 3px rgba(0,255,194,0.2); }
.ci-app .ci-btn.ghost { background: transparent; border-color: rgba(255,255,255,0.1); color: var(--ci-ink-2); }
.ci-app .ci-btn.ghost:hover { border-color: var(--ci-ink); background: rgba(255,255,255,0.03); }
.ci-app .ci-btn.danger { background: var(--ci-bad-soft); color: #FF8A7E; border-color: rgba(255,107,91,0.3); }
.ci-app .ci-btn.sm { padding: 6px 12px; font-size: 11.5px; font-family: var(--ci-mono); font-weight: 700; letter-spacing: 0.02em; }
.ci-app .ci-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ci-app .pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ci-mono); font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.ci-app .pill.ok  { background: var(--ci-ok-soft);  color: var(--ci-teal); }
.ci-app .pill.mid { background: var(--ci-mid-soft); color: var(--ci-mid); }
.ci-app .pill.bad { background: var(--ci-bad-soft); color: #FF8A7E; }
.ci-app .pill.neutral { background: rgba(255,255,255,0.06); color: var(--ci-ink-3); }

.ci-app .chip {
  font-family: var(--ci-mono); font-size: 10.5px; font-weight: 600;
  padding: 5px 10px; border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px; color: var(--ci-ink-3);
  background: rgba(255,255,255,0.02); transition: all .15s;
  cursor: pointer;
}
.ci-app .chip:hover { color: var(--ci-ink); border-color: rgba(255,255,255,0.15); }
.ci-app .chip.active { background: var(--ci-ok-soft); border-color: rgba(0,255,194,0.3); color: var(--ci-teal); }

.ci-app .thumb {
  width: 44px; height: 44px; border-radius: 8px;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.ci-app .thumb.large { width: 88px; height: 88px; }
.ci-app .thumb.xl { width: 100%; aspect-ratio: 1.4; border-radius: 12px; }
.ci-app .thumb.bad { background: linear-gradient(135deg, #FF6B5B, #C0392B); }
.ci-app .thumb.mid { background: linear-gradient(135deg, #FFB347, #B7791F); }
.ci-app .thumb.ok  { background: linear-gradient(135deg, #00FFC2, #00B894); }
.ci-app .thumb .lab {
  position: absolute; top: 4px; left: 6px;
  font-family: var(--ci-mono); font-size: 10px; color: rgba(0,0,0,0.7); font-weight: 700;
}
.ci-app .thumb .lab2 {
  position: absolute; bottom: 4px; right: 6px;
  font-family: var(--ci-mono); font-size: 9px; color: rgba(0,0,0,0.6); font-weight: 700;
}

.ci-app .spark { display: block; width: 100%; height: 28px; }

.ci-app .bar { position: relative; height: 8px; background: rgba(255,255,255,0.04); border-radius: 999px; overflow: hidden; }
.ci-app .bar > div { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.ci-app .bar > div.ok  { background: linear-gradient(90deg, var(--ci-teal), #00D4A3); }
.ci-app .bar > div.mid { background: linear-gradient(90deg, var(--ci-mid),  #B7791F); }
.ci-app .bar > div.bad { background: linear-gradient(90deg, var(--ci-bad),  #C0392B); }

.ci-app .input {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px; color: var(--ci-ink);
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.ci-app .input:focus { border-color: var(--ci-teal); box-shadow: 0 0 0 3px rgba(0,255,194,0.12); }
.ci-app .input::placeholder { color: var(--ci-ink-4); }

.ci-app .demo-banner {
  position: fixed; bottom: 16px; right: 16px; z-index: 100;
  background: rgba(0,255,194,0.12);
  color: var(--ci-teal);
  border: 1px solid rgba(0,255,194,0.3);
  border-radius: 999px;
  padding: 6px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  backdrop-filter: blur(8px);
  pointer-events: none; user-select: none;
}

/* ─── Spinner ───────────────────────────────────────────────────── */
.ci-app .spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: var(--ci-teal);
  border-radius: 50%;
  animation: ci-spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes ci-spin { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #060912; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }