:root {
  --bg:#EFF2F7; --surf:#FFFFFF; --surf2:#F8FAFC; --surf3:#EEF2F8;
  --border:#E2E8F0; --border2:#CBD5E1; --border3:#94A3B8;
  --text:#1E293B; --text2:#475569; --text3:#94A3B8;
  --accent:#1565C0; --accent2:#0D47A1; --agl:rgba(21,101,192,.10);
  --green:#2E7D32; --greenl:#E8F5E9;
  --amber:#E65100; --amberl:#FFF3E0;
  --red:#C62828; --redl:#FFEBEE;
  --r:8px; --rsm:5px; --rlg:12px;
  --sh:0 1px 3px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.04);
  --sh2:0 4px 16px rgba(15,23,42,.10),0 8px 32px rgba(15,23,42,.06);
  --tr:.15s ease;
}
[data-theme="dark"] {
  --bg:#090D18; --surf:#121828; --surf2:#192033; --surf3:#1F283E;
  --border:#253049; --border2:#354268; --border3:#4E6090;
  --text:#F0F4FF; --text2:#8EA8D0; --text3:#506080;
  --accent:#60A5E8; --accent2:#88C0F4; --agl:rgba(96,165,232,.18);
  --green:#6EC972; --greenl:#081A08;
  --amber:#FFB340; --amberl:#191000;
  --red:#F06060; --redl:#1A0808;
  --sh:0 1px 4px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.40);
  --sh2:0 6px 24px rgba(0,0,0,.65),0 12px 48px rgba(0,0,0,.45);
}
/* Dark mode: légköri kék fény a tetején + kártya top-fény */
[data-theme="dark"] body {
  background-image: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(96,165,232,.05) 0%, transparent 60%);
}

/* ── Plexiq (brand téma — navy + narancs) ── */
[data-color="plexiq"]{
  --accent:#E8691A; --accent2:#C85510; --agl:rgba(232,105,26,.12);
  --amber:#D97706; --amberl:#FEF3C7;
}
[data-color="plexiq"]:not([data-theme="dark"]){
  --bg:#EBF0FA; --surf:#FFFFFF; --surf2:#F4F7FD; --surf3:#E4EAF8;
  --border:#C8D6EE; --border2:#A8BEDE; --border3:#7090C0;
  --text:#1A2B5C; --text2:#374B80; --text3:#7A90C0;
}
[data-theme="dark"][data-color="plexiq"]{
  --accent:#FF8C3A; --accent2:#FFA55A; --agl:rgba(255,140,58,.16);
  --bg:#060C1A; --surf:#0D1628; --surf2:#14203A; --surf3:#1A2A48;
  --border:#1E3060; --border2:#2C4480; --border3:#4060A0;
  --text:#EEF4FF; --text2:#8AAAD8; --text3:#4A6898;
}
[data-theme="dark"][data-color="plexiq"] body {
  background-image: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(232,105,26,.07) 0%, transparent 60%);
}

/* ── Forest ── */
[data-color="forest"]{--accent:#2E7D32;--accent2:#1B5E20;--agl:rgba(46,125,50,.10);}
[data-color="forest"]:not([data-theme="dark"]){--bg:#F0F5F0;--surf2:#F3F8F3;--surf3:#E8F0E8;}
[data-theme="dark"][data-color="forest"]{--accent:#66BB6A;--accent2:#81C784;--agl:rgba(102,187,106,.15);}

/* ── Terracotta ── */
[data-color="terra"]{--accent:#BF360C;--accent2:#9C2708;--agl:rgba(191,54,12,.10);}
[data-color="terra"]:not([data-theme="dark"]){--bg:#FBF4EE;--surf2:#FDF7F2;--surf3:#FAF0E6;}
[data-theme="dark"][data-color="terra"]{--accent:#FF7043;--accent2:#FF5722;--agl:rgba(255,112,67,.15);}

/* ── Grafit ── */
[data-color="grafit"]{--accent:#455A64;--accent2:#37474F;--agl:rgba(69,90,100,.10);}
[data-color="grafit"]:not([data-theme="dark"]){--bg:#ECEFF1;--surf2:#F5F5F5;--surf3:#EEEEEE;--border:#CFD8DC;--border2:#B0BEC5;--text3:#78909C;}
[data-theme="dark"][data-color="grafit"]{--accent:#90A4AE;--accent2:#B0BEC5;--agl:rgba(144,164,174,.15);}

/* ── Viola ── */
[data-color="viola"]{--accent:#6A1B9A;--accent2:#4A148C;--agl:rgba(106,27,154,.10);}
[data-color="viola"]:not([data-theme="dark"]){--bg:#F5F0FA;--surf2:#F9F5FF;--surf3:#F3E8FF;--border:#E9D5F7;--border2:#D8B4F8;--text3:#9C71BC;}
[data-theme="dark"][data-color="viola"]{--accent:#CE93D8;--accent2:#E1BEE7;--agl:rgba(206,147,216,.15);}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;}
body{font-family:'Source Sans 3','Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.65;-webkit-font-smoothing:antialiased;}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fu{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
/* ── Egyedi scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; border-radius:4px; }
::-webkit-scrollbar-thumb {
  background:var(--border2);
  border-radius:4px;
  transition:background .2s;
}
::-webkit-scrollbar-thumb:hover { background:var(--accent); }
::-webkit-scrollbar-corner { background:transparent; }
/* Firefox */
* { scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }