/* portal-base.css — parte din creator-portal.css (liniile 1-79).
   Tokens portal/admin (:root + dark), body.cp-body, bara demo, keyframe cpFade.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ============================================================
   Creator Portal — spațiul de lucru al creatorului + admin.
   Reutilizează tokenii din style.css (paper/ink, signal).
   4 suprafețe: Înregistrare · Portal creator · Profil public · Admin.
   ============================================================ */

:root {
  /* statusuri rare — aceeași cromă ca --signal, hue variat */
  --pending:    oklch(0.70 0.072 75);
  --pending-bg: oklch(0.955 0.022 75);
  --danger:     oklch(0.58 0.072 25);
  --danger-bg:  oklch(0.955 0.020 25);
  --sidebar-w:  248px;
  --shell-maxw: 1500px; /* dashboard shell ceiling — centers sidebar+content on large/ultrawide screens */
  /* single anchor for the floating chrome (sidebar + topbar): both panels read
     this for their top inset AND their sticky `top`, so they are mathematically
     guaranteed to start at the same vertical level and can only move together. */
  --chrome-inset: 16px;
  /* unified portal/admin content spacing — single vertical rhythm for every page */
  --cp-flow: 22px;
  --cp-content-pad-top: clamp(22px, 3.4vw, 38px);
  --cp-content-maxw: 1080px;
  --cp-content-maxw-admin: 1180px;
}
[data-theme="dark"] {
  --pending-bg: oklch(0.27 0.03 75);
  --danger-bg:  oklch(0.27 0.03 25);
}

body.cp-body { background: var(--paper-2); }

/* ===================== DEMO NAVIGATOR ===================== */
.demo-bar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 18px;
  height: 56px; padding: 0 18px;
  background: oklch(0.205 0.012 70); color: var(--paper);
  border-bottom: 1px solid oklch(1 0 0 / .08);
}
[data-theme="dark"] .demo-bar { background: oklch(0.13 0.005 80); }
.db-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  color: oklch(1 0 0 / .92); white-space: nowrap;
}
.db-brand .mark {
  width: 24px; height: 24px; border-radius: 6px; background: var(--paper);
  display: grid; place-items: center; color: var(--ink);
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600;
}
.db-tag {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: .14em;
  padding: 3px 7px; border-radius: 100px;
  background: oklch(1 0 0 / .12); color: oklch(1 0 0 / .7);
}
.db-switch {
  display: flex; gap: 2px; margin-left: auto;
  background: oklch(1 0 0 / .08); padding: 3px; border-radius: 100px;
}
.db-switch button {
  font-family: var(--ff-sans); font-size: 12.5px; font-weight: 600;
  color: oklch(1 0 0 / .62); background: none; border: none; cursor: pointer;
  padding: 7px 15px; border-radius: 100px; transition: all .18s; white-space: nowrap;
}
.db-switch button:hover { color: oklch(1 0 0 / .95); }
.db-switch button.active { background: var(--paper); color: var(--ink); }
.db-theme {
  background: oklch(1 0 0 / .1); border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 9px; color: var(--paper);
  display: grid; place-items: center; transition: background .18s;
}
.db-theme:hover { background: oklch(1 0 0 / .18); }
.db-theme svg { width: 16px; height: 16px; }
.db-theme .ic-sun { display: none; }
[data-theme="dark"] .db-theme .ic-moon { display: none; }
[data-theme="dark"] .db-theme .ic-sun { display: block; }

@keyframes cpFade { from { transform: translateY(6px); } to { transform: none; } }