/* Kleodo: světle šedá plocha, neonové akcenty (cyan → fialová → růžová, limetka jako signál).
 * Leží nad styles.css a app.css: přepisuje tokeny a chrom aplikace. Slidy a náhled LinkedInu zůstávají v grafice AFCEA,
 * protože jsou to výstupy pro stránku AFCEA. Barvy textu jsou tmavší odstíny neonů, aby držely kontrast 4,5 : 1. */
:root{
  --n-cyan:#00D4FF; --n-violet:#7B2FFF; --n-pink:#FF2D95; --n-lime:#C8FF00;
  --grad:linear-gradient(100deg,#00D4FF 0%,#7B2FFF 52%,#FF2D95 100%);
  --grad-text:linear-gradient(100deg,#0079B8 0%,#6A1FF0 48%,#C2066F 100%);
  --grad-btn:linear-gradient(100deg,#6A1FF0 0%,#9A14C8 50%,#C2066F 100%);
  --ink:#0D0E14; --ink-2:#1A1B24; --ink-3:#2B2D3A; --on-ink:#F4F5F8; --on-ink-2:#A9ACBA;
  --red:#C2066F; --red-d:#9E0559; --red-soft:#FFE6F2; --red-line:#FFBCDD;
  --blue:#5B1FE0; --blue-soft:#EFE8FF; --blue-line:#D5C4FF;
  --paper:#ECEEF2; --card:#FFFFFF; --sunk:#E3E6EB; --line:#D7DBE2; --line-2:#E5E8ED;
  --text:#0D0E14; --muted:#4D5260; --faint:#626774;
  --green:#08774F; --green-soft:#DFF7EC; --gold:#865800; --gold-soft:#FFF2D6;
  --shadow-s:0 1px 2px rgba(13,14,20,.06);
  --shadow:0 1px 2px rgba(13,14,20,.05),0 10px 30px -12px rgba(13,14,20,.14);
  --shadow-l:0 24px 60px -16px rgba(13,14,20,.32);
  --glow:0 10px 30px -10px rgba(123,47,255,.55),0 6px 24px -12px rgba(255,45,149,.6);
  --r:16px; --r-s:11px;
  --font:"Geist",system-ui,-apple-system,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
}
:root[data-theme="dark"]{
  --ink:#050507; --ink-2:#121218; --ink-3:#24242D; --on-ink:#F4F5F7; --on-ink-2:#A0A1AA;
  --paper:#08080B; --card:#121217; --sunk:#0D0D11; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.06);
  --text:#F4F5F7; --muted:#A0A1AA; --faint:#8B8C96;
  --red:#FF5AAE; --red-d:#FF85C3; --red-soft:rgba(255,45,149,.12); --red-line:rgba(255,45,149,.35);
  --blue:#A985FF; --blue-soft:rgba(123,47,255,.14); --blue-line:rgba(123,47,255,.4);
  --green:#34D399; --green-soft:rgba(52,211,153,.1); --gold:#FBBF24; --gold-soft:rgba(251,191,36,.1);
  --grad-text:linear-gradient(100deg,#2BD8FF 0%,#A57BFF 50%,#FF5AAE 100%);
  --shadow-s:none; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);
}

body{font-family:var(--font);letter-spacing:-.005em;
  background:radial-gradient(900px 500px at 105% -10%,rgba(0,212,255,.13),transparent 60%),radial-gradient(800px 520px at -10% 110%,rgba(255,45,149,.09),transparent 60%),var(--paper);background-attachment:fixed}
:focus-visible{outline:2px solid var(--n-violet)}
a{color:var(--blue)}

/* ---------- chrom ---------- */
.top{background:rgba(236,238,242,.78);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);color:var(--text);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);opacity:.85}
:root[data-theme="dark"] .top{background:rgba(8,8,11,.8)}
.brand .seal{width:36px;height:36px;border-radius:11px;background:none;box-shadow:0 6px 18px -6px rgba(123,47,255,.6)}
.brand .seal img{width:36px;height:36px}
.brand b{font-size:19px;font-weight:700;letter-spacing:-.035em}
.brand small{color:var(--faint);font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cmd{background:var(--card);border:1px solid var(--line);color:var(--faint);border-radius:12px;box-shadow:var(--shadow-s)}
.cmd:hover{border-color:var(--n-violet)}
kbd{font-family:var(--mono);background:var(--sunk);border-color:var(--line);color:var(--muted)}
.countdown{background:var(--card);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow-s)}
.countdown .num{background:var(--n-lime);color:#0D0E14;font-family:var(--mono);box-shadow:0 0 14px rgba(200,255,0,.7)}
.icon-btn{background:var(--card);border-color:var(--line);color:var(--text)}
.icon-btn:hover{background:var(--sunk)}
.avatar{background:var(--grad);border:2px solid var(--card);color:#fff;box-shadow:0 4px 14px -4px rgba(123,47,255,.6)}

.side{background:transparent}
.side .grp{font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--faint)}
.nav{font-weight:500;color:var(--muted)}
.nav:hover{background:rgba(255,255,255,.6)}
:root[data-theme="dark"] .nav:hover{background:var(--card)}
.nav.on{background:var(--card);border-color:var(--line);box-shadow:var(--shadow)}
.nav.on::before{background:var(--grad);width:3px;box-shadow:0 0 10px rgba(123,47,255,.7)}
.nav.on svg{color:var(--n-violet)}
.nav .badge{background:var(--n-pink);color:#fff;box-shadow:0 0 12px rgba(255,45,149,.6);font-family:var(--mono)}
.nav .cnt{font-family:var(--mono);font-size:11px}
.dot{background:var(--n-lime);box-shadow:0 0 8px rgba(200,255,0,.9)}

/* ---------- typografie ---------- */
h1{font-weight:700;letter-spacing:-.035em}
main h1{width:fit-content;max-width:100%;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:2px}
h2{font-weight:650;letter-spacing:-.02em}
.eyebrow{font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--blue)}

/* ---------- prvky ---------- */
.btn{border-radius:11px;font-weight:600;background:var(--card);border-color:var(--line)}
.btn:hover{border-color:var(--n-violet);background:var(--card)}
.btn.primary{background:var(--grad-btn);border-color:transparent;color:#fff;box-shadow:var(--glow)}
.btn.primary:hover{background:var(--grad-btn);filter:brightness(1.08) saturate(1.1);border-color:transparent}
.btn.dark{background:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:rgba(123,47,255,.08);color:var(--blue)}
.card,.panel{border-radius:var(--r);border-color:var(--line);box-shadow:var(--shadow)}
.chip.on,.tag.new{background:var(--ink);color:var(--n-lime)}
:root[data-theme="dark"] .chip.on,:root[data-theme="dark"] .tag.new{background:var(--n-lime);color:#0D0E14}
.prog i.on,.mix-row .tr i{background:var(--grad)}
:root[data-theme="dark"] .prog i.on,:root[data-theme="dark"] .mix-row .tr i{background:var(--grad)}
.hint .spark,.dir-h .letter,.step-n span{background:var(--grad);color:#fff}
:root[data-theme="dark"] .dir-h .letter,:root[data-theme="dark"] .step-n span{background:var(--grad);color:#fff}
.camp.on,.sw.on,.srcbtn.on,.vt.on,.qitem.on{border-color:var(--n-violet);box-shadow:inset 0 0 0 1px var(--n-violet),0 0 0 4px rgba(123,47,255,.1)}
:root[data-theme="dark"] .camp.on,:root[data-theme="dark"] .srcbtn.on,:root[data-theme="dark"] .vt.on,:root[data-theme="dark"] .qitem.on{border-color:var(--n-violet);box-shadow:inset 0 0 0 1px var(--n-violet)}
.alt:hover{border-color:var(--n-violet)}
input:focus,textarea:focus,select:focus{border-color:var(--n-violet)!important;box-shadow:0 0 0 4px rgba(123,47,255,.12)}

/* tmavé plovoucí panely: dock, úlohy, toast, výběr, cíl */
.dock .in,.jobs,.toast,.selbar{background:var(--ink);box-shadow:0 24px 60px -16px rgba(13,14,20,.5),0 0 0 1px rgba(255,255,255,.06)}
.jobs li.done .m{background:var(--n-lime);border-color:var(--n-lime);color:#0D0E14}
.goal{background:var(--ink);border-left:0;position:relative;overflow:hidden}
.goal::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.day.conf{background:var(--ink);box-shadow:inset 0 0 0 2px var(--n-lime)}
.confbox b{color:var(--n-lime)}

/* mikrofon */
.fab{background:var(--grad);box-shadow:0 14px 36px -10px rgba(123,47,255,.75),0 0 0 6px rgba(255,255,255,.55)}
:root[data-theme="dark"] .fab{box-shadow:0 14px 36px -10px rgba(123,47,255,.9),0 0 0 6px rgba(255,255,255,.06)}
.fab .plus{background:var(--n-lime);color:#0D0E14;border-color:var(--card)}
.fab.open{background:var(--ink)}
@keyframes recpulse{50%{box-shadow:0 0 0 14px rgba(255,45,149,.2),0 14px 36px -10px rgba(123,47,255,.8)}}

/* přihlášení */
.login{background:radial-gradient(700px 420px at 85% 10%,rgba(0,212,255,.28),transparent 60%),radial-gradient(640px 460px at 10% 95%,rgba(255,45,149,.22),transparent 60%),radial-gradient(500px 400px at 50% 50%,rgba(123,47,255,.12),transparent 70%),var(--paper)}
.login-card{border-top:0;border:1px solid var(--line);box-shadow:var(--shadow-l);position:relative;overflow:hidden}
.login-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.login-card .seal{width:56px;height:56px;border-radius:16px;background:none;box-shadow:0 10px 26px -8px rgba(123,47,255,.7)}
.login-card .seal img{width:56px;height:56px}
.login-card h1{width:fit-content;font-size:30px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}