/* contentlab-css v2.0.0 — FONTE DE VERDADE. Nao editar copias vendorizadas; editar aqui. */
/* ============================================================================
Deleg8lab — Design System v2 · contentlab.css
----------------------------------------------------------------------------
Framework-agnostic. Drop this one file into any project:
Fonts (DM Sans + Space Mono) are @imported below; remove if you self-host.
Every component is a `cl-` class so nothing collides with your app.
Tokens are CSS variables — re-skin by overriding them, don't touch components.
========================================================================== */
/* As fontes NAO sao importadas aqui. Um @import e bloqueante e so e descoberto depois de esta
folha chegar, portanto punha um servidor de terceiros (fonts.googleapis.com) em serie no
caminho critico: nada era pintado ate ele responder. Quem usa este ficheiro carrega as fontes
no da propria pagina, em paralelo com tudo o resto:
Sem esse link, os tokens --cl-font-body/--cl-font-mono caem nas fontes de sistema, que e um
fallback correto e nao um erro. */
/* ---------- TOKENS · dark (default) --------------------------------------- */
:root, [data-theme="dark"] {
--cl-accent:#00E0B4; --cl-accent-hover:#3AEDC9; --cl-accent-press:#00BE9A;
--cl-accent-dim:rgba(0,224,180,0.10); --cl-accent-line:rgba(0,224,180,0.34);
--cl-accent-ring:rgba(0,224,180,0.22); --cl-on-accent:#04140F;
--cl-bg:#080B12; --cl-surface-1:#0F1420; --cl-surface-2:#161D2C; --cl-surface-3:#1F2839;
--cl-border:rgba(255,255,255,0.08); --cl-border-strong:rgba(255,255,255,0.15);
--cl-border-tint:rgba(0,224,180,0.14);
--cl-text:#F3F6FB; --cl-text-muted:#98A3B7; --cl-text-faint:#5E6A80;
--cl-success:#22C99A; --cl-success-dim:rgba(34,201,154,0.14);
--cl-warning:#F5B740; --cl-warning-dim:rgba(245,183,64,0.14);
--cl-danger:#FF5D6C; --cl-danger-dim:rgba(255,93,108,0.14); --cl-danger-ring:rgba(255,93,108,0.26);
--cl-info:#5B8BFF; --cl-info-dim:rgba(91,139,255,0.14);
/* pending: estado "aguarda revisao humana" (ex.: certificacao INCONCLUSIVE). Violeta de
proposito: o ambar do warning le como quase-perigo e um resultado inconclusivo nao e perigo. */
--cl-pending:#A78BFA; --cl-pending-dim:rgba(167,139,250,0.14); --cl-pending-line:rgba(167,139,250,0.34);
/* veu por tras dos modais: no escuro quase preto, no claro mais suave (ver tema claro) */
--cl-scrim:rgba(3,6,12,0.62);
--cl-cat-brand:#F5A524; --cl-cat-consumer:#4C86FF; --cl-cat-culture:#F45D9E; --cl-cat-creative:#9B6BFF;
--cl-shadow-sm:0 1px 2px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05);
--cl-shadow-md:0 6px 16px rgba(0,0,0,0.42), 0 22px 50px rgba(0,0,0,0.34);
--cl-shadow-lg:0 40px 90px rgba(0,0,0,0.66), 0 12px 30px rgba(0,0,0,0.50);
--cl-lift:0 16px 34px rgba(0,0,0,0.52), 0 4px 10px rgba(0,0,0,0.40);
--cl-edge:inset 0 1px 0 rgba(255,255,255,0.06);
--cl-grad-accent:linear-gradient(150deg, var(--cl-accent-hover), var(--cl-accent) 46%, var(--cl-accent-press));
--cl-grad-accent-hi:inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.14);
--cl-grad-hero:linear-gradient(180deg, var(--cl-text) 18%, color-mix(in srgb, var(--cl-text) 44%, var(--cl-text-faint)));
--cl-grad-bar:linear-gradient(90deg, var(--cl-accent-press), var(--cl-accent-hover));
--cl-grad-glyph:linear-gradient(150deg, var(--cl-accent-hover), var(--cl-accent-press));
--cl-font-body:'DM Sans', system-ui, sans-serif;
--cl-font-mono:'Space Mono', ui-monospace, monospace;
--cl-r-sm:8px; --cl-r-md:12px; --cl-r-lg:16px; --cl-r-xl:20px; --cl-r-pill:999px;
/* ESCALA DE MOVIMENTO. Quatro duracoes, duas curvas: e a lista completa, nao ha valores
avulsos. Escolhe-se pelo PAPEL do elemento, nunca pelo gosto:
fast -> resposta ao rato/dedo: hover, cor, sombra, e o icone dentro de um botao
med -> o que desliza ou abre: pastilha de navegacao, painel, acordeao, scrim
slow -> entradas (um cartao ou um modal a aparecer)
reveal -> revelacao de um DADO que se preenche uma vez (anel de score, barra de nota).
E mais lento de proposito: aqui a lentidao le-se como "a medir", nao como atraso.
A curva por omissao e a ease (nunca ultrapassa o destino). A spring passa do destino e volta:
usar SO no icone dentro de um botao, onde o salto e a graca. Numa pastilha ou num cartao
grande a spring le-se como gelatina, e foi exatamente essa a queixa que originou esta escala.
stagger = intervalo entre irmaos numa entrada em cascata (ver .cl-stagger). */
--cl-ease:cubic-bezier(.22,1,.36,1); --cl-spring:cubic-bezier(.34,1.56,.64,1);
--cl-t-fast:150ms; --cl-t-med:260ms; --cl-t-slow:420ms; --cl-t-reveal:700ms;
--cl-stagger:70ms;
/* Escala de spacing. Gaps entre cartoes >= sp-5; padding interno de cartoes >= sp-4;
gaps entre linhas de listas >= sp-2. */
--cl-sp-1:4px; --cl-sp-2:8px; --cl-sp-3:12px; --cl-sp-4:16px;
--cl-sp-5:20px; --cl-sp-6:24px; --cl-sp-7:32px; --cl-sp-8:40px;
}
/* ---------- TOKENS · light (first-class mirror) --------------------------- */
[data-theme="light"] {
--cl-accent:#00A784; --cl-accent-hover:#00BE96; --cl-accent-press:#008E70;
--cl-accent-dim:rgba(0,167,132,0.09); --cl-accent-line:rgba(0,167,132,0.30);
--cl-accent-ring:rgba(0,167,132,0.20); --cl-on-accent:#FFFFFF;
--cl-bg:#F4F6FB; --cl-surface-1:#FFFFFF; --cl-surface-2:#F1F4F9; --cl-surface-3:#E7ECF4;
--cl-border:rgba(12,20,38,0.10); --cl-border-strong:rgba(12,20,38,0.18); --cl-border-tint:rgba(0,167,132,0.20);
--cl-text:#0D1526; --cl-text-muted:#556075; --cl-text-faint:#8A93A6;
--cl-success:#0E9E76; --cl-success-dim:rgba(14,158,118,0.12);
--cl-warning:#B45309; --cl-warning-dim:rgba(180,83,9,0.12);
--cl-danger:#DC3A4A; --cl-danger-dim:rgba(220,58,74,0.12); --cl-danger-ring:rgba(220,58,74,0.22);
--cl-info:#3D6EF5; --cl-info-dim:rgba(61,110,245,0.12);
--cl-pending:#7C5CD6; --cl-pending-dim:rgba(124,92,214,0.12); --cl-pending-line:rgba(124,92,214,0.30);
--cl-scrim:rgba(15,23,42,0.38);
--cl-cat-brand:#D98515; --cl-cat-consumer:#3D6EF5; --cl-cat-culture:#DB3F86; --cl-cat-creative:#7E4CE0;
--cl-shadow-sm:0 1px 2px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
--cl-shadow-md:0 8px 20px rgba(15,23,42,0.10), 0 20px 44px rgba(15,23,42,0.08);
--cl-shadow-lg:0 40px 90px rgba(15,23,42,0.18), 0 12px 30px rgba(15,23,42,0.12);
--cl-lift:0 16px 34px rgba(15,23,42,0.17), 0 4px 10px rgba(15,23,42,0.10);
--cl-edge:inset 0 1px 0 rgba(255,255,255,0.7);
--cl-grad-accent-hi:inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -1px 0 rgba(0,0,0,0.08);
}
@property --cl-ringp { syntax:""; inherits:false; initial-value:0; }
@keyframes cl-spin{to{transform:rotate(360deg);}}
@keyframes cl-pop{from{opacity:0;transform:translateY(-8px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes cl-rise{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes cl-toast-in{from{opacity:0;transform:translateX(40px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes cl-icon-pop{0%{transform:scale(0) rotate(-40deg);}60%{transform:scale(1.18) rotate(4deg);}100%{transform:scale(1) rotate(0);}}
@keyframes cl-countdown{from{transform:scaleX(1);}to{transform:scaleX(0);}}
/* Sweep do anel de score: anima a custom property registada --cl-ringp de 0 ate ao valor
inline. Em browsers sem @property o anel renderiza logo no valor final (fallback correto). */
@keyframes cl-ring-sweep{from{--cl-ringp:0;}}
/* ---------- BASE ---------------------------------------------------------- */
.cl-root, [data-theme] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
body.cl-app {
margin:0; background:var(--cl-bg); color:var(--cl-text);
font-family:var(--cl-font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
background-image:
radial-gradient(1100px 680px at 88% -12%, color-mix(in srgb, var(--cl-accent) 10%, transparent), transparent 56%),
radial-gradient(1000px 700px at 50% 120%, rgba(155,107,255,0.055), transparent 60%);
}
.cl-scope *,.cl-scope *::before,.cl-scope *::after{ box-sizing:border-box; }
.cl-mono{ font-family:var(--cl-font-mono); font-variant-numeric:tabular-nums; }
/* ---------- TYPE ROLES ---------------------------------------------------- */
.cl-kicker{ font-family:var(--cl-font-mono); font-size:11px; font-weight:700; color:var(--cl-accent);
text-transform:uppercase; letter-spacing:1px; }
.cl-page-title{ font-family:var(--cl-font-mono); font-weight:700; font-size:26px; letter-spacing:-.5px; line-height:1.1; color:var(--cl-text); }
.cl-page-title--hero{ font-size:clamp(34px,5vw,56px); letter-spacing:-1.5px; line-height:1.04;
background:var(--cl-grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cl-page-desc{ font-size:14.5px; line-height:1.6; color:var(--cl-text-muted); max-width:64ch; }
.cl-section-title{ font-family:var(--cl-font-mono); font-size:12px; font-weight:700; color:var(--cl-text-muted);
text-transform:uppercase; letter-spacing:.5px; }
/* ---------- BUTTONS ------------------------------------------------------- */
.cl-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--cl-font-body);
font-size:13px; font-weight:700; padding:11px 22px; border-radius:var(--cl-r-md);
border:1px solid transparent; background:none; color:var(--cl-text); cursor:pointer; }
.cl-btn:disabled{ opacity:.4; cursor:not-allowed; }
.cl-btn--primary{ background:var(--cl-grad-accent); color:var(--cl-on-accent); border:none;
box-shadow:var(--cl-grad-accent-hi);
transition:transform var(--cl-t-med) var(--cl-spring), box-shadow var(--cl-t-med), filter var(--cl-t-fast); }
.cl-btn--primary:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--cl-grad-accent-hi), var(--cl-lift); filter:brightness(1.06); }
.cl-btn--primary:active{ transform:translateY(0); filter:none; }
.cl-btn--accent{ font-family:var(--cl-font-mono); font-size:12px; letter-spacing:.3px;
background:linear-gradient(180deg, var(--cl-accent-dim), transparent); color:var(--cl-accent);
border:1px solid var(--cl-accent-line); box-shadow:var(--cl-edge); transition:all .22s var(--cl-spring); }
.cl-btn--accent:hover{ background:var(--cl-grad-accent); color:var(--cl-on-accent); border-color:transparent;
box-shadow:var(--cl-grad-accent-hi), var(--cl-lift); transform:translateY(-2px); }
.cl-btn--ghost{ color:var(--cl-text-muted); border:1px solid var(--cl-border); font-weight:600; transition:all .18s var(--cl-spring); }
.cl-btn--ghost:hover{ color:var(--cl-text); border-color:var(--cl-border-strong); background:var(--cl-surface-2); transform:translateY(-1px); }
.cl-btn--danger{ color:var(--cl-danger); border:1px solid var(--cl-danger-dim); font-weight:600; transition:all .18s var(--cl-spring); }
.cl-btn--danger:hover{ background:var(--cl-danger-dim); border-color:var(--cl-danger); transform:translateY(-1px); }
/* REGRA OBRIGATORIA: todo o botao com icone tem micro-animacao no icone. Transform-only
(scale/translate), 150-300ms, curva spring; direcional quando o icone tem direcao
(play/download/seta); desligada sob prefers-reduced-motion. Ver DESIGN.md, Principios. */
.cl-btn svg{ transition:transform var(--cl-t-fast) var(--cl-spring); }
.cl-btn:hover:not(:disabled) svg{ transform:translateY(-1px) scale(1.12); }
.cl-btn:active:not(:disabled) svg{ transform:scale(.92); }
.cl-btn--sm{ padding:7px 13px; font-size:11px; border-radius:var(--cl-r-sm); }
.cl-btn__spinner{ width:14px; height:14px; border-radius:50%; border:2px solid var(--cl-accent-line);
border-top-color:var(--cl-accent); animation:cl-spin .7s linear infinite; }
/* ---------- FIELDS -------------------------------------------------------- */
.cl-field{ display:flex; flex-direction:column; gap:8px; }
.cl-label{ font-family:var(--cl-font-mono); font-size:10.5px; font-weight:700; color:var(--cl-text-muted);
text-transform:uppercase; letter-spacing:.6px; }
.cl-input,.cl-textarea,.cl-select{ width:100%; background:var(--cl-surface-2); border:1px solid var(--cl-border);
border-radius:var(--cl-r-md); color:var(--cl-text); font-family:var(--cl-font-body); font-size:14px;
padding:12px 15px; outline:none; transition:border-color var(--cl-t-fast), box-shadow .2s ease, background .2s ease; }
.cl-textarea{ line-height:1.55; resize:vertical; }
.cl-input:hover,.cl-textarea:hover,.cl-select:hover{ border-color:var(--cl-border-strong); }
.cl-input:focus,.cl-textarea:focus,.cl-select:focus{ border-color:var(--cl-accent);
box-shadow:0 0 0 3px var(--cl-accent-ring); background:var(--cl-surface-1); }
.cl-input--error{ border-color:var(--cl-danger); box-shadow:0 0 0 3px var(--cl-danger-ring); }
.cl-help{ font-size:12px; color:var(--cl-text-muted); }
.cl-help--error{ color:var(--cl-danger); }
/* ---------- DROPDOWN / MENU ---------------------------------------------- */
.cl-menu{ min-width:220px; background:var(--cl-surface-3); border:1px solid var(--cl-border-strong);
border-radius:var(--cl-r-lg); box-shadow:var(--cl-shadow-lg); padding:6px; animation:cl-pop .22s var(--cl-spring); }
.cl-menu-item{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--cl-r-sm);
font-family:var(--cl-font-body); font-size:13px; color:var(--cl-text); cursor:pointer; transition:background .14s ease; }
.cl-menu-item:hover{ background:var(--cl-surface-2); }
.cl-menu-item--danger{ color:var(--cl-danger); }
.cl-menu-item__kbd{ margin-left:auto; font-family:var(--cl-font-mono); font-size:10px; color:var(--cl-text-faint); }
/* ---------- BADGES / CHIPS ----------------------------------------------- */
.cl-badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--cl-font-mono);
font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:var(--cl-r-pill);
transition:transform .22s var(--cl-spring), box-shadow .2s ease; }
.cl-badge:hover{ transform:translateY(-2px) scale(1.05); box-shadow:var(--cl-shadow-sm); }
.cl-badge--success{ background:var(--cl-success-dim); color:var(--cl-success); }
.cl-badge--warning{ background:var(--cl-warning-dim); color:var(--cl-warning); }
.cl-badge--danger{ background:var(--cl-danger-dim); color:var(--cl-danger); }
.cl-badge--info{ background:var(--cl-info-dim); color:var(--cl-info); }
.cl-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--cl-font-mono);
font-size:11px; font-weight:700; padding:6px 13px; border-radius:var(--cl-r-pill);
background:var(--cl-surface-2); border:1px solid var(--cl-border); color:var(--cl-text-muted); cursor:pointer;
transition:transform .22s var(--cl-spring), border-color .2s ease, color .2s ease; }
.cl-chip:hover{ transform:translateY(-2px); border-color:var(--cl-border-tint); color:var(--cl-text); }
.cl-chip__dot,.cl-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
/* ---------- SWITCH / SEGMENTED ------------------------------------------- */
.cl-switch{ width:52px; height:30px; border-radius:var(--cl-r-pill); border:1px solid var(--cl-border-strong);
background:var(--cl-surface-3); padding:3px; display:flex; justify-content:flex-start; cursor:pointer;
transition:all .35s var(--cl-spring); }
.cl-switch__knob{ width:22px; height:22px; border-radius:50%; background:var(--cl-text-muted);
box-shadow:0 1px 3px rgba(0,0,0,.4); transition:all .35s var(--cl-spring); }
.cl-switch.is-on{ background:var(--cl-grad-accent); border-color:transparent; box-shadow:var(--cl-grad-accent-hi); justify-content:flex-end; }
.cl-switch.is-on .cl-switch__knob{ background:var(--cl-on-accent); }
.cl-segmented{ position:relative; display:inline-flex; background:var(--cl-surface-2);
border:1px solid var(--cl-border); border-radius:var(--cl-r-pill); padding:3px; }
.cl-segmented__pill{ position:absolute; top:3px; bottom:3px; left:3px; border-radius:var(--cl-r-pill);
background:var(--cl-grad-accent); box-shadow:var(--cl-grad-accent-hi);
width:calc((100% - 6px) / var(--cl-seg-count, 3));
transform:translateX(calc(var(--cl-seg-active, 0) * 100%)); transition:transform .42s var(--cl-spring); }
.cl-segment{ position:relative; z-index:1; flex:1; text-align:center; font-family:var(--cl-font-mono);
font-size:11px; font-weight:700; padding:7px 16px; border:none; background:none; border-radius:var(--cl-r-pill);
color:var(--cl-text-muted); cursor:pointer; transition:color .28s ease; }
.cl-segment.is-active{ color:var(--cl-on-accent); }
/* ---------- TABS ---------------------------------------------------------- */
.cl-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--cl-border); }
.cl-tab{ background:none; border:none; border-bottom:2px solid transparent; padding:13px 15px;
font-family:var(--cl-font-body); font-size:13px; font-weight:500; color:var(--cl-text-muted);
cursor:pointer; transition:color .16s ease; }
.cl-tab:hover{ color:var(--cl-text); }
.cl-tab.is-active{ color:var(--cl-accent); border-bottom-color:var(--cl-accent); font-weight:600; }
/* ---------- CARD ---------------------------------------------------------- */
.cl-card{ background:var(--cl-surface-1); border:1px solid var(--cl-border); border-radius:var(--cl-r-lg);
padding:20px; box-shadow:var(--cl-edge); display:flex; flex-direction:column; gap:14px;
transition:transform .35s var(--cl-spring), border-color var(--cl-t-med), box-shadow var(--cl-t-med); }
.cl-card--hover:hover{ transform:translateY(-4px); border-color:var(--cl-border-tint); box-shadow:var(--cl-shadow-md); }
.cl-card--compact{ padding:14px; border-radius:var(--cl-r-md); }
.cl-card--2{ background:var(--cl-surface-2); }
/* Escada de elevacao para cartao dentro de cartao (regra no-box-in-box: um filho nunca
repete o tratamento do pai; sobe 1 passo de surface, desce 1 passo de radius, perde a
sombra). Utilitarias sem display proprio para nao partir layouts em linha. */
.cl-elev-1{ background:var(--cl-surface-1); border:1px solid var(--cl-border); border-radius:var(--cl-r-lg);
box-shadow:var(--cl-shadow-sm), var(--cl-edge); }
.cl-elev-2{ background:var(--cl-surface-2); border:1px solid var(--cl-border); border-radius:var(--cl-r-md);
box-shadow:none; }
.cl-elev-3{ background:var(--cl-surface-3); border:none; border-radius:var(--cl-r-sm); box-shadow:none; }
/* ---------- MODAL --------------------------------------------------------- */
.cl-overlay{ position:fixed; inset:0; z-index:100; padding:20px; background:rgba(3,6,12,0.62);
backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; animation:cl-pop .2s ease; }
.cl-modal{ width:100%; max-width:440px; background:var(--cl-surface-1); border:1px solid var(--cl-border-strong);
border-radius:var(--cl-r-xl); padding:30px 32px; box-shadow:var(--cl-shadow-lg);
display:flex; flex-direction:column; gap:14px; animation:cl-rise .34s var(--cl-spring); }
.cl-modal__title{ font-family:var(--cl-font-mono); font-weight:700; font-size:17px; color:var(--cl-text); }
.cl-modal__body{ font-size:14px; line-height:1.6; color:var(--cl-text-muted); }
.cl-modal__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }
/* ---------- TOAST --------------------------------------------------------- */
.cl-toast-stack{ position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column;
gap:12px; pointer-events:none; }
.cl-toast{ position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:12px; width:322px;
background:color-mix(in srgb, var(--cl-surface-3) 90%, transparent); backdrop-filter:blur(12px);
border:1px solid var(--cl-border-strong); border-radius:14px; padding:14px 14px 15px 16px;
box-shadow:var(--cl-shadow-lg); animation:cl-toast-in .45s var(--cl-spring); pointer-events:auto; }
.cl-toast__icon{ width:30px; height:30px; flex-shrink:0; border-radius:9px; display:grid; place-items:center;
font-size:15px; font-weight:700; box-shadow:var(--cl-edge); animation:cl-icon-pop .55s var(--cl-spring);
background:var(--cl-accent-dim); color:var(--cl-accent); }
.cl-toast__title{ font-weight:600; font-size:13.5px; color:var(--cl-text); }
.cl-toast__body{ font-size:12px; color:var(--cl-text-muted); line-height:1.45; }
.cl-toast__close{ margin-left:auto; width:20px; height:20px; border:none; background:none; color:var(--cl-text-faint);
border-radius:6px; font-size:11px; cursor:pointer; transition:all .15s ease; }
.cl-toast__close:hover{ background:var(--cl-surface-2); color:var(--cl-text); }
.cl-toast__bar{ position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left;
background:var(--cl-accent); animation:cl-countdown 3.6s linear forwards; }
.cl-toast--success .cl-toast__icon{ background:var(--cl-success-dim); color:var(--cl-success); } .cl-toast--success .cl-toast__bar{ background:var(--cl-success); }
.cl-toast--info .cl-toast__icon{ background:var(--cl-info-dim); color:var(--cl-info); } .cl-toast--info .cl-toast__bar{ background:var(--cl-info); }
.cl-toast--danger .cl-toast__icon{ background:var(--cl-danger-dim); color:var(--cl-danger); } .cl-toast--danger .cl-toast__bar{ background:var(--cl-danger); }
/* ---------- TABLE --------------------------------------------------------- */
.cl-table{ background:var(--cl-surface-1); border:1px solid var(--cl-border); border-radius:var(--cl-r-lg);
overflow:hidden; box-shadow:var(--cl-edge); }
.cl-thead,.cl-trow{ display:grid; align-items:center; padding:14px 22px; }
.cl-thead{ padding:13px 22px; border-bottom:1px solid var(--cl-border); font-family:var(--cl-font-mono);
font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--cl-text-faint); }
.cl-trow{ border-bottom:1px solid var(--cl-border); transition:background .14s ease; }
.cl-trow:last-child{ border-bottom:none; }
.cl-trow:nth-child(even){ background:color-mix(in srgb, var(--cl-surface-2) 45%, transparent); }
.cl-trow:hover{ background:var(--cl-surface-2); }
/* ---------- EMPTY STATE --------------------------------------------------- */
.cl-empty{ background:var(--cl-surface-1); border:1px dashed var(--cl-border-strong); border-radius:var(--cl-r-lg);
padding:56px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.cl-empty__glyph{ width:64px; height:64px; border-radius:var(--cl-r-xl); display:grid; place-items:center;
background:var(--cl-grad-glyph); border:1px solid var(--cl-accent-line); box-shadow:var(--cl-grad-accent-hi);
color:var(--cl-on-accent); font-size:26px; }
.cl-empty__title{ font-family:var(--cl-font-mono); font-weight:700; font-size:16px; color:var(--cl-text); }
.cl-empty__desc{ font-size:13.5px; color:var(--cl-text-muted); max-width:40ch; line-height:1.55; }
/* ---------- PROGRESS ------------------------------------------------------ */
.cl-bar{ height:9px; border-radius:var(--cl-r-pill); background:var(--cl-surface-3); overflow:hidden; }
.cl-bar__fill{ height:100%; border-radius:var(--cl-r-pill); background:var(--cl-grad-bar);
width:var(--cl-bar-value, 0%); transition:width .9s var(--cl-ease); }
.cl-ring{ position:relative; width:150px; height:150px; border-radius:50%; display:grid; place-items:center;
box-shadow:var(--cl-shadow-sm); --cl-ringp:0;
background:conic-gradient(from -90deg, var(--cl-accent-hover), var(--cl-accent-press) calc(var(--cl-ringp) * 1%), var(--cl-surface-3) 0);
transition:--cl-ringp 1.2s var(--cl-ease); }
.cl-ring__hole{ width:108px; height:108px; border-radius:50%; background:var(--cl-surface-1); display:grid;
place-items:center; text-align:center; }
.cl-ring__value{ font-family:var(--cl-font-mono); font-weight:700; font-size:30px; color:var(--cl-accent); }
.cl-ring__label{ font-size:11px; color:var(--cl-text-faint); }
/* ============================================================================
NAVIGATION — Floating dock (option 1c)
----------------------------------------------------------------------------
Sliding gradient indicator. Your app drives two things on .cl-nav-links:
• set --cl-nav-count = number of items (default 4)
• set --cl-nav-active = active index 0..n (moves the pill)
…and toggles .is-active on the active .cl-nav-item.
========================================================================== */
.cl-nav-wrap{ padding:18px 22px 6px;
background:
radial-gradient(760px 360px at 88% -44%, color-mix(in srgb, var(--cl-accent) 5%, transparent), transparent 60%),
radial-gradient(620px 360px at 2% -26%, rgba(96,120,255,0.03), transparent 58%); }
.cl-nav-dock{ display:flex; align-items:center; gap:14px; padding:10px 12px 10px 16px; border-radius:var(--cl-r-lg);
background:linear-gradient(180deg, var(--cl-surface-2), var(--cl-surface-1));
border:1px solid var(--cl-border-strong); box-shadow:var(--cl-edge), var(--cl-lift); }
.cl-nav-brand{ display:flex; align-items:center; gap:9px; padding-right:14px; border-right:1px solid var(--cl-border); }
.cl-nav-brand__mark{ width:26px; height:26px; border-radius:8px; background:var(--cl-grad-accent);
box-shadow:var(--cl-grad-accent-hi); display:grid; place-items:center; color:var(--cl-on-accent);
font-family:var(--cl-font-mono); font-weight:700; font-size:13px; }
.cl-nav-brand__name{ font-family:var(--cl-font-mono); font-weight:700; font-size:13.5px; letter-spacing:-.3px; color:var(--cl-text); }
.cl-nav-links{ position:relative; display:flex; gap:2px; flex:1; }
.cl-nav-pill{ position:absolute; z-index:0; top:0; bottom:0; left:0; border-radius:11px;
background:var(--cl-grad-accent); box-shadow:var(--cl-grad-accent-hi), var(--cl-shadow-sm);
width:calc(100% / var(--cl-nav-count, 4));
transform:translateX(calc(var(--cl-nav-active, 0) * 100%));
transition:transform .5s cubic-bezier(.32,1.62,.5,1), box-shadow .3s ease; }
.cl-nav-item{ position:relative; z-index:1; flex:1; justify-content:center; display:flex; align-items:center; gap:8px;
background:none; border:none; padding:9px 16px; border-radius:11px; font-family:var(--cl-font-body);
font-size:13px; font-weight:600; color:#DCE3EE; cursor:pointer; transition:color .28s ease; }
[data-theme="light"] .cl-nav-item{ color:var(--cl-text-muted); }
.cl-nav-item.is-active{ color:var(--cl-on-accent); }
.cl-nav-item__ic{ display:inline-block; font-size:14px; transition:transform .4s cubic-bezier(.34,1.7,.5,1); }
.cl-nav-item.is-active .cl-nav-item__ic{ transform:scale(1.22) rotate(-4deg); }
.cl-nav-cmd{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:11px;
background:var(--cl-surface-3); border:1px solid var(--cl-border-strong); color:var(--cl-text);
font-size:12.5px; font-weight:600; cursor:pointer; transition:all .18s var(--cl-spring); }
.cl-nav-cmd:hover{ border-color:var(--cl-accent-line); background:var(--cl-surface-2); transform:translateY(-1px); }
.cl-nav-cmd__k{ font-family:var(--cl-font-mono); font-size:11px; color:var(--cl-accent); }
.cl-nav-avatar{ width:32px; height:32px; border-radius:50%; background:var(--cl-grad-accent);
box-shadow:var(--cl-grad-accent-hi); display:grid; place-items:center; font-size:11px; font-weight:700;
color:var(--cl-on-accent); cursor:pointer; }
/* ---------- ALERT / FEEDBACK ---------------------------------------------- */
/* Faltava no sistema: cada ecra improvisava a sua "linha de feedback". Um alerta tem
sempre icone (a cor sozinha nao chega para quem nao a distingue) e deve ser anunciado
por leitores de ecra (role="alert" no markup, nao aqui). */
.cl-alert{ display:flex; align-items:flex-start; gap:10px; padding:11px 14px;
border-radius:var(--cl-r-md); border:1px solid transparent; font-size:13px; line-height:1.5; }
.cl-alert__ico{ flex:none; display:inline-flex; margin-top:1px; }
.cl-alert--danger{ background:var(--cl-danger-dim); border-color:var(--cl-danger); color:var(--cl-danger); }
.cl-alert--success{ background:var(--cl-success-dim); border-color:var(--cl-success); color:var(--cl-success); }
.cl-alert--warning{ background:var(--cl-warning-dim); border-color:var(--cl-warning); color:var(--cl-warning); }
.cl-alert--info{ background:var(--cl-info-dim); border-color:var(--cl-info); color:var(--cl-info); }
.cl-alert--pending{ background:var(--cl-pending-dim); border-color:var(--cl-pending); color:var(--cl-pending); }
.cl-alert:empty{ display:none; }
/* ---------- SPINNER ------------------------------------------------------- */
/* Faltava: os botoes em espera mudavam SO o texto ("A entrar..."), sem sinal de atividade. */
.cl-spinner{ display:inline-block; width:1em; height:1em; flex:none; border-radius:50%;
border:2px solid currentColor; border-top-color:transparent; animation:cl-spin .7s linear infinite; }
/* Anel afilado: em vez de um circulo com um pedaco em falta (o desenho que vem em todos os
templates), a cor vai de nada ate ao maximo ao longo da volta. Le-se como movimento e nao
como um arco aos saltos. O anel de borda acima fica como recurso: browsers sem
conic-gradient ou sem mascaras nunca entram aqui e continuam a ver um spinner correto. */
@supports ((-webkit-mask:radial-gradient(#000,#000)) or (mask:radial-gradient(#000,#000))) and (background:conic-gradient(#000,#000)){
.cl-spinner{
border:0;
background:conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, currentColor 10%, transparent) 100deg, currentColor 340deg, currentColor 360deg);
-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
animation:cl-spin .9s linear infinite; }
}
/* ---------- DIVISOR COM TEXTO --------------------------------------------- */
/* Para separar caminhos alternativos ("ou entra com..."). Sem isto cada ecra desenhava
duas linhas com um span ao meio, a mao. */
.cl-divider{ display:flex; align-items:center; gap:12px; color:var(--cl-text-faint);
font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; }
.cl-divider::before,.cl-divider::after{ content:""; flex:1; height:1px; background:var(--cl-border); }
/* ---------- CONTROLOS NATIVOS DO BROWSER ---------------------------------- */
/* Tudo o que NAO desenhamos nos: barras de scroll, preenchimento automatico, selecao de
texto, seletores de ficheiro e de data, cursor. Sem isto o tema escuro fica "meio feito":
a app fica escura mas o browser continua a pintar as suas pecas em claro. */
::selection{ background:var(--cl-accent-dim); color:var(--cl-text); }
*{ scrollbar-width:thin; scrollbar-color:var(--cl-border-strong) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--cl-border-strong); border-radius:999px;
border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--cl-text-faint); background-clip:content-box; }
/* Preenchimento automatico do Chrome: pinta o campo de amarelo/branco e ignora o nosso
fundo. Nao ha forma de o desligar, mas ha um truque: uma sombra interior enorme cobre a
cor dele, e o atraso gigante impede o "flash" amarelo ao carregar a pagina. Sem isto o
ecra de login escuro fica com campos brancos assim que o browser preenche a conta. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-text-fill-color:var(--cl-text);
-webkit-box-shadow:0 0 0 1000px var(--cl-surface-2) inset;
box-shadow:0 0 0 1000px var(--cl-surface-2) inset;
caret-color:var(--cl-text);
transition:background-color 9999s ease-out 0s;
}
/* ---------- STAGGER: entrada em cascata ----------------------------------- */
/* Poe .cl-stagger no CONTENTOR e os filhos entram em cascata. Escrito uma vez, sem
nth-child espalhado pela app. Cap aos 6: a partir do 7o filho todos partilham o atraso
do 6o, senao uma lista longa ganha uma cauda de mais de um segundo a entrar.
NAO usar num contentor que aloje menus/dropdowns: durante a entrada ha um transform
ativo, e um transform num antepassado desloca tudo o que e position:fixed la dentro. */
.cl-stagger > *{ animation:cl-rise var(--cl-t-slow) var(--cl-ease) both; }
.cl-stagger > *:nth-child(2){ animation-delay:calc(1 * var(--cl-stagger)); }
.cl-stagger > *:nth-child(3){ animation-delay:calc(2 * var(--cl-stagger)); }
.cl-stagger > *:nth-child(4){ animation-delay:calc(3 * var(--cl-stagger)); }
.cl-stagger > *:nth-child(5){ animation-delay:calc(4 * var(--cl-stagger)); }
.cl-stagger > *:nth-child(n+6){ animation-delay:calc(5 * var(--cl-stagger)); }
/* reduced-motion respect */
@media (prefers-reduced-motion: reduce){
/* O animation-delay TEM de ir a zero junto com a duracao: zerar so a duracao deixa a
cascata na mesma (cada elemento fica invisivel ate a sua vez, por causa do fill both),
que e precisamente o movimento que o utilizador pediu para nao ver. */
*{ animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important; }
}