/* PolyOS Design System — design tokens & primitives */
/* A HIVATALOS PolyOS Design System.dc.html exportból (polyosdesignsystem.css) átvéve — 1:1.
 * Alul KÉT PolyOS-kiegészítés: (1) legacy alias-ok a régi statikus oldalakhoz,
 * (2) a lebegő .polyos-bg blob-háttér (a theme-boot.js / sidebar.js injektálja). */

:root{
  color-scheme: light;
  /* BRAND (állítható) — PolyOS arculati lila (logó/főoldal/help-widget egységes) */
  --brand:#8B5CF6; --brand-2:#B06BFF;
  --brand-grad:linear-gradient(135deg,#8B5CF6,#B06BFF);
  --brand-weak:rgba(139,92,246,.12); --brand-ring:rgba(139,92,246,.45);
  --on-brand:#fff;
  /* NEUTRAL cool (hűvös, lila-hajlású — nem meleg rózsaszín) */
  --bg:#F6F4FB; --bg-2:#EDE9F7;
  --surface:rgba(255,255,255,.58); --surface-2:rgba(255,255,255,.40);
  --surface-solid:#FFFFFF; --surface-inset:rgba(255,255,255,.42);
  --border:rgba(255,255,255,.7); --border-solid:rgba(90,55,65,.14); --border-strong:rgba(90,55,65,.22);
  --text-900:#2A2130; --text-700:#574A54; --text-500:#867684; --text-400:#A99DA6; --text-inv:#fff;
  /* SEMANTIC */
  --success:#12A150; --success-bg:rgba(18,161,80,.14); --success-fg:#0B7A3B;
  --warning:#C77700; --warning-bg:rgba(217,138,0,.16); --warning-fg:#8A5A00;
  --danger:#E5484D; --danger-bg:rgba(229,72,77,.15); --danger-fg:#B32227;
  --info:#3E7BFA; --info-bg:rgba(62,123,250,.14); --info-fg:#1E52C9;
  /* MODULE accents */
  --m-social:#E1306C; --m-analytics:#7C3AED; --m-crm:#0EA5E9; --m-tasks:#EA8B0B;
  --m-finance:#12A150; --m-ai:#8B5CF6; --m-quiz:#EC4899; --m-integrations:#14B8A6;
  /* STATUS pairs */
  --st-active-bg:rgba(18,161,80,.14);   --st-active-fg:#0B7A3B;
  --st-paused-bg:rgba(199,119,0,.16);   --st-paused-fg:#8A5A00;
  --st-done-bg:rgba(62,123,250,.14);    --st-done-fg:#1E52C9;
  --st-off-bg:rgba(134,118,132,.16);    --st-off-fg:#574A54;
  --st-problem-bg:rgba(229,72,77,.15);  --st-problem-fg:#B32227;
  --st-sched-bg:rgba(139,92,246,.15);   --st-sched-fg:#6D28D9;
  --st-ready-bg:rgba(20,184,166,.16);   --st-ready-fg:#0E7C70;
  --st-draft-bg:rgba(134,118,132,.14);  --st-draft-fg:#6F6070;
  --st-arch-bg:rgba(134,118,132,.20);   --st-arch-fg:#4A4048;
  /* CHANNEL */
  --ch-ig:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); --ch-fb:#1877F2;
  /* TYPE */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --fs-display:clamp(30px,4vw,42px); --fs-h1:28px; --fs-h2:21px; --fs-h3:17px;
  --fs-body:15px; --fs-sm:13px; --fs-cap:11px;
  --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.55;
  /* SPACE */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  /* RADIUS */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-full:999px;
  /* SHADOW */
  --sh-sm:0 2px 8px rgba(40,30,60,.06); --sh-md:0 10px 28px rgba(40,30,60,.11);
  --sh-lg:0 24px 56px rgba(40,30,60,.18); --sh-brand:0 12px 30px rgba(139,92,246,.32);
  --ring:0 0 0 3px var(--brand-ring);
  /* Z */
  --z-nav:100; --z-dropdown:200; --z-drawer:300; --z-modal:400; --z-toast:500; --z-toolbar:600;
  /* MOTION */
  --dur-1:120ms; --dur-2:200ms; --dur-3:340ms; --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#171320; --bg-2:#1F1829;
  --surface:rgba(44,36,54,.55); --surface-2:rgba(44,36,54,.40);
  --surface-solid:#241D2E; --surface-inset:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.12); --border-solid:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --text-900:#F4EEF6; --text-700:#CFC4D2; --text-500:#9C8FA4; --text-400:#7A6E82;
  --brand-weak:rgba(139,92,246,.2);
  --success-bg:rgba(18,161,80,.22); --success-fg:#5FD99B;
  --warning-bg:rgba(217,138,0,.24); --warning-fg:#F5C25B;
  --danger-bg:rgba(229,72,77,.24);  --danger-fg:#FF9AA0;
  --info-bg:rgba(62,123,250,.24);   --info-fg:#8FB4FF;
  --st-active-bg:rgba(18,161,80,.22);  --st-active-fg:#5FD99B;
  --st-paused-bg:rgba(217,138,0,.24);  --st-paused-fg:#F5C25B;
  --st-done-bg:rgba(62,123,250,.24);   --st-done-fg:#8FB4FF;
  --st-off-bg:rgba(180,168,186,.16);   --st-off-fg:#CFC4D2;
  --st-problem-bg:rgba(229,72,77,.24); --st-problem-fg:#FF9AA0;
  --st-sched-bg:rgba(139,92,246,.26);  --st-sched-fg:#C4B2FF;
  --st-ready-bg:rgba(20,184,166,.24);  --st-ready-fg:#5FE0D0;
  --st-draft-bg:rgba(180,168,186,.14); --st-draft-fg:#B7ABBE;
  --st-arch-bg:rgba(180,168,186,.20);  --st-arch-fg:#DAD0DF;
  --sh-sm:0 2px 10px rgba(0,0,0,.4); --sh-md:0 12px 30px rgba(0,0,0,.5); --sh-lg:0 26px 60px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){ color-scheme:dark; --bg:#171320; --bg-2:#1F1829; --surface:rgba(44,36,54,.55); --surface-solid:#241D2E; --border:rgba(255,255,255,.12); --text-900:#F4EEF6; --text-700:#CFC4D2; --text-500:#9C8FA4; --text-400:#7A6E82; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);color:var(--text-900);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-2)}
::selection{background:var(--brand-weak)}
button{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
/* GLASS primitives */
.glass{background:var(--surface);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--border);box-shadow:var(--sh-md)}
.glass-2{background:var(--surface-2);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--border)}
/* Gallery chrome */
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.section{scroll-margin-top:96px;margin:0 0 var(--sp-8)}
.sec-head{margin:0 0 var(--sp-5)}
.kicker{font-family:var(--font-mono);font-size:var(--fs-cap);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:600;margin:0 0 6px}
.sec-title{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.02em;margin:0;line-height:var(--lh-tight)}
.sec-sub{font-size:var(--fs-body);color:var(--text-500);margin:8px 0 0;max-width:60ch;line-height:var(--lh-normal)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-4)}
.spec{border-radius:var(--r-lg);padding:var(--sp-5)}
.spec-h{font-size:var(--fs-h3);font-weight:700;margin:0 0 4px}
.spec-note{font-size:var(--fs-sm);color:var(--text-500);margin:0 0 var(--sp-4)}
.mono{font-family:var(--font-mono)}
.tag-lbl{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--text-500);letter-spacing:.04em;text-transform:uppercase}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.col{display:flex;flex-direction:column}
.divider{height:1px;background:var(--border-solid);border:0;margin:var(--sp-4) 0}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes toastIn{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slideL{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-3%) scale(1.08)}}
.skel{background:linear-gradient(90deg,var(--surface-inset) 25%,rgba(255,255,255,.18) 50%,var(--surface-inset) 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear;border-radius:var(--r-sm)}

/* ===== PolyOS kiegészítés #1 — LEBEGŐ BLOB-HÁTTÉR =====
 * A design system "gassy" gradiense: 3 nagy, elmosott, lassan mozgó szín-blob a --bg fölött.
 * A theme-boot.js (modulok) és a sidebar.js (shell) injektálja a body elejére. */
.polyos-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.polyos-bg span{position:absolute;border-radius:50%;will-change:transform}
/* Nagy, ERŐSEN elmosott blobok (blur ~90px) → lágy, folytonos wash, nem foltos. */
.polyos-bg .b1{width:70vw;height:70vw;left:-16vw;top:-20vw;background:radial-gradient(circle at 35% 35%,var(--brand),transparent 66%);opacity:.42;filter:blur(90px);animation:blob 22s var(--ease) infinite}
.polyos-bg .b2{width:60vw;height:60vw;right:-14vw;top:-6vw;background:radial-gradient(circle at 60% 40%,var(--brand-2),transparent 66%);opacity:.36;filter:blur(90px);animation:blob 28s var(--ease) infinite reverse}
.polyos-bg .b3{width:64vw;height:64vw;left:18vw;bottom:-26vw;background:radial-gradient(circle at 50% 50%,var(--blob-3,var(--brand-2,var(--m-ai))),transparent 66%);opacity:.22;filter:blur(100px);animation:blob 34s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){.polyos-bg span{animation:none}}

/* ===== PolyOS kiegészítés #2 — LEGACY ALIAS-OK =====
 * A régi statikus oldalak saját változónevei a design-system tokenekre képezve (lila nélkül). */
:root{
  --accent:var(--brand); --accent-weak:var(--brand-weak);
  --violet:var(--brand); --violet-weak:var(--brand-weak);
  --primary:var(--brand);
  --ink:var(--text-900); --ink-soft:var(--text-700); --muted:var(--text-500); --faint:var(--text-400);
  --line:var(--border-solid); --hairline:var(--border-solid); --border-color:var(--border-solid);
  --card:var(--surface-solid);
}

/* ===== PolyOS kiegészítés #3 — MODUL-EGYSÉGESÍTŐ REMAP =====
 * Cél: a modulok „hasonló, de mindenhol más" eltéréseit KÖZPONTILAG harmonizálni (a
 * theme-boot.js ezt a fájlt minden modulba injektálja). A modulok tömegesen HIDEG
 * slate-*/gray-* szövegszínt használnak; VILÁGOS módban a DS MELEG --text-* tokenekre
 * képezzük őket, hogy egységes, meleg legyen a tipográfia. (Sötét módot a modulok saját
 * html.dark retrofitja kezeli — ezt nem bántjuk: :root:not(.dark)-ra szűkítünk.) */
:root:not(.dark) .text-slate-900, :root:not(.dark) .text-gray-900,
:root:not(.dark) .text-slate-800, :root:not(.dark) .text-gray-800 { color: var(--text-900) !important; }
:root:not(.dark) .text-slate-700, :root:not(.dark) .text-gray-700,
:root:not(.dark) .text-slate-600, :root:not(.dark) .text-gray-600 { color: var(--text-700) !important; }
:root:not(.dark) .text-slate-500, :root:not(.dark) .text-gray-500 { color: var(--text-500) !important; }
:root:not(.dark) .text-slate-400, :root:not(.dark) .text-gray-400,
:root:not(.dark) .text-slate-300, :root:not(.dark) .text-gray-300 { color: var(--text-400) !important; }