/* EU TRUST AI · портал, дашборд, адмінка, інсталятор.
   Кольори і шрифти - з glow.css (токени тренажерів), тут лише розкладка і компоненти. */
*{box-sizing:border-box}
html,body{margin:0}
body{color:var(--ink);font-size:16px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--accent)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance;font-family:var(--f-display);font-weight:400}
.wrap{max-width:1160px;margin:0 auto;padding:20px 16px 48px;width:100%}
.wrap.narrow{max-width:760px}
.eyebrow{font-family:var(--f-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lead{color:var(--muted);max-width:64ch;margin:12px 0 0}
.src{font-size:13px;color:var(--muted)}
.nowrap{white-space:nowrap}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
[hidden]{display:none!important}
code{font-size:.9em;background:var(--sunk);padding:1px 6px;border-radius:6px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--hairline,var(--line));background:var(--glass,var(--surface));color:var(--ink);border-radius:999px;padding:10px 18px;cursor:pointer;font-size:15px;text-decoration:none;line-height:1.2;min-height:44px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--eu,var(--accent));border-color:var(--eu,var(--accent));color:#fff;font-weight:500}
.btn.primary:hover{filter:brightness(1.08)}
.btn.small{padding:6px 12px;font-size:13px;min-height:34px}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.card{background:var(--glass,var(--surface));border:1px solid var(--hairline,var(--line));border-radius:16px;padding:clamp(16px,2.6vw,24px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card h2{font-size:18px;margin-bottom:10px}
.alert{border-left:4px solid var(--bad);background:var(--bad-soft);border-radius:10px;padding:12px 14px;margin:12px 0}
.alert.ok{border-color:var(--ok);background:var(--ok-soft)}

/* верхня панель */
.pnav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 16px;max-width:1160px;margin:0 auto;width:100%}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand span:not(.spark){font-family:var(--f-display);letter-spacing:.06em;font-size:15px}
.brand small{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.spark{width:22px;height:22px;background:var(--eu,var(--accent));display:inline-block;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0C12.8 6.5 17.5 11.2 24 12 17.5 12.8 12.8 17.5 12 24 11.2 17.5 6.5 12.8 0 12 6.5 11.2 11.2 6.5 12 0Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0C12.8 6.5 17.5 11.2 24 12 17.5 12.8 12.8 17.5 12 24 11.2 17.5 6.5 12.8 0 12 6.5 11.2 11.2 6.5 12 0Z'/></svg>") center/contain no-repeat}
.pnav nav{display:flex;gap:4px;flex-wrap:wrap}
.pnav nav a{text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:999px;font-size:14px}
.pnav nav a:hover{color:var(--ink)}
.pnav nav a[aria-current]{color:var(--ink);background:var(--sunk)}
.pnav .who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wname{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.wname b{font-size:14px}.wname small{font-size:11px;color:var(--muted)}

/* герой порталу */
.phero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:end;padding:18px 0 8px}
.ptitle{font-size:clamp(30px,5.2vw,54px);line-height:1.06;text-transform:uppercase;letter-spacing:.01em;margin-top:8px}
.ptitle::after{content:"";display:block;width:46px;height:3px;background:var(--eu,var(--accent));margin-top:14px;border-radius:2px}
.spectrum{display:flex;height:10px;border-radius:6px;overflow:hidden;margin-top:20px;max-width:520px;box-shadow:0 6px 22px -8px rgba(43,92,255,.55)}
.spectrum i{flex:1}
.lbcard{display:grid;gap:6px;text-decoration:none;color:var(--ink);border-radius:16px;padding:20px;border:2px solid var(--gold);background:var(--glass,var(--surface));position:relative;overflow:hidden}
.lbcard::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--gold);opacity:.16}
.lbcard b{font-family:var(--f-display);font-weight:400;font-size:24px;text-transform:uppercase}
.lbcard span{color:var(--muted);font-size:14px}
.lbcard .go{color:var(--ink);font-weight:500}
.lbcard:hover{transform:translateY(-1px)}

/* вибір ролі */
.roles{margin-top:28px;display:grid;gap:18px}
.rolepick{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.rolepick legend{margin-bottom:10px}
.role{position:relative;cursor:pointer;display:block}
.role input{position:absolute;opacity:0;pointer-events:none}
.rbody{display:grid;gap:8px;height:100%;border-radius:18px;padding:22px 22px 22px 24px;border:2px solid var(--hairline,var(--line));background:var(--glass,var(--surface));position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.rbody::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:linear-gradient(90deg,var(--rc),color-mix(in srgb,var(--rc) 50%,#fff))}
.rbody b{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,3vw,28px);text-transform:uppercase;line-height:1.1}
.rbody>span:last-child{color:var(--muted)}
.role:hover .rbody{border-color:color-mix(in srgb,var(--rc) 60%,transparent)}
.role input:checked+.rbody{border-color:var(--rc);box-shadow:0 10px 34px -16px var(--rc)}
.role input:checked+.rbody::after{content:"✓";position:absolute;right:18px;top:20px;width:30px;height:30px;border-radius:50%;background:var(--rc);color:#fff;display:grid;place-items:center;font-weight:700}
.role input:focus-visible+.rbody{outline:2px solid var(--accent);outline-offset:3px}
.rtag{justify-self:start;font-family:var(--f-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--rc);border-radius:999px;padding:3px 10px}

.authbox{border-radius:18px;padding:clamp(18px,3vw,26px);border:1px solid var(--hairline,var(--line));background:var(--glass,var(--surface));display:grid;gap:14px;border-top:4px solid var(--rcol,var(--line));transition:opacity .2s}
.authbox[data-role="student"]{--rcol:var(--t2)} .authbox[data-role="teacher"]{--rcol:var(--t3)}
.authbox[data-wait] .pane{opacity:.45;pointer-events:none}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button,.seg a{border:1px solid var(--hairline,var(--line));background:var(--glass,var(--surface));border-radius:999px;padding:8px 16px;cursor:pointer;font-size:14px;color:var(--ink);text-decoration:none;min-height:40px;display:inline-flex;align-items:center;gap:6px}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"],.seg a[aria-current]{background:var(--tc,var(--eu,var(--accent)));border-color:var(--tc,var(--eu,var(--accent)));color:#fff}
.pane{display:grid;gap:12px;max-width:720px}
label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
label small{font-size:12px}
input:not([type=checkbox]):not([type=radio]),select{width:100%;border:1px solid var(--hairline,var(--line));background:var(--surface);border-radius:10px;padding:10px 12px;font-size:15px;color:var(--ink);min-height:44px}
input:focus,select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid2 .full{grid-column:1/-1}
label.check{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:14px}
label.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--eu,var(--accent));flex:none}
.hint{margin:0}

/* хаб для того, хто увійшов */
.hub{display:grid;gap:16px;margin-top:24px}
.welcome h2{font-size:clamp(22px,3vw,30px);text-transform:uppercase}
.welcome h2 small{font-family:var(--f-body);font-size:14px;color:var(--muted);text-transform:none;margin-left:8px}
.welcome p{margin:6px 0 0;color:var(--muted)}
.sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.scard{display:grid;gap:10px;align-content:start;border-radius:18px;padding:22px;border:2px solid var(--rc);background:var(--glass,var(--surface));position:relative;overflow:hidden}
.scard::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:var(--rc);opacity:.12}
.scard h3{font-size:clamp(20px,2.6vw,24px);text-transform:uppercase;line-height:1.15}
.scard p{margin:0;color:var(--muted)}
.mini{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.mini b{display:block;color:var(--ink);font-family:var(--f-display);font-weight:400;font-size:20px}
.lvbar{height:8px;background:var(--sunk);border-radius:4px;overflow:hidden}
.lvbar i{display:block;height:100%;background:var(--xp)}

/* дашборд */
.dhead{padding:18px 0 4px}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0}
.filters .seg:first-child{margin-right:auto}
.gsel{display:flex;align-items:center;gap:8px}
.gsel select{width:auto;min-width:150px}
.filters input{width:auto;min-width:260px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.kpi{border:1px solid var(--hairline,var(--line));background:var(--glass,var(--surface));border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.kpi b{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--muted)}
.kpis.compact .kpi b{font-size:22px}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;margin-bottom:16px;max-width:820px;margin-inline:auto}
.podium:empty{display:none}
.pod{display:grid;justify-items:center;gap:4px;text-align:center;padding:16px 10px 0;border-radius:16px 16px 0 0;background:var(--glass,var(--surface));border:1px solid var(--hairline,var(--line));border-bottom:0;position:relative;overflow:hidden;min-width:0}
.pod b{font-family:var(--f-display);font-weight:400;font-size:17px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .pxp{font-weight:500;font-variant-numeric:tabular-nums}
.pod .step{display:block;width:100%;margin-top:10px;font-family:var(--f-display);font-size:30px;color:#fff;background:linear-gradient(180deg,var(--bc,var(--accent)),color-mix(in srgb,var(--bc,var(--accent)) 60%,#000));padding:8px 0}
.pod.p1 .step{padding:30px 0}.pod.p2 .step{padding:16px 0}.pod.p3 .step{padding:6px 0}
.pod.me{border-color:var(--xp)}
.dgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sechead h2{margin:0}
.tbl-wrap{overflow-x:auto}
table.lb{width:100%;border-collapse:collapse;font-size:14px}
.lb th{text-align:left;font-weight:500;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 8px;border-bottom:1px solid var(--hairline,var(--line))}
.lb td{padding:9px 8px;border-bottom:1px solid var(--hairline,var(--line));vertical-align:middle}
.lb .num{text-align:right;font-variant-numeric:tabular-nums}
.lb .rk{width:44px}
.lb tr.me td{background:color-mix(in srgb,var(--xp) 12%,transparent)}
.lb tr.gap td{border:0;padding:2px}
.lb .empty{text-align:center;padding:28px}
.lvpill{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--xp);color:#fff;font-size:12px;font-weight:600;margin-right:4px}
.youtag{font-size:11px;background:var(--xp);color:#fff;border-radius:999px;padding:1px 8px;vertical-align:1px}
.medals span:nth-child(1){color:var(--gold)}.medals span:nth-child(2){color:var(--silver)}.medals span:nth-child(3){color:var(--bronze)}
.medals span{font-weight:600}
.gbars{display:grid;gap:12px}
.gb{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "t t";gap:4px 10px;align-items:baseline}
.gb .gn{grid-area:n;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.gb .gn small{display:block;color:var(--muted);font-size:12px}
.gb .gv{grid-area:v;font-variant-numeric:tabular-nums;font-weight:500}
.gb .gt{grid-area:t;height:10px;background:var(--sunk);border-radius:5px;overflow:hidden}
.gb .gt i{display:block;height:100%;background:var(--bc,var(--accent));border-radius:0 4px 4px 0}

/* адмінка */
.atabs{margin:18px 0}
.atabs .cnt{background:var(--bad);color:#fff;border-radius:999px;padding:0 7px;font-size:12px}
.urow,.rrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.urow select{width:auto}.urow input[name=grp]{width:150px}.urow input[name=newpass]{width:150px}
.urow .xpp{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:100px}
.rrow select{width:auto}.rrow input[name=title]{flex:1 1 260px}.rrow input[name=cost],.rrow input[name=stock],.rrow input[name=sort]{width:90px}.rrow input[name=note]{flex:1 1 180px}
.acts{white-space:nowrap}.acts form{display:inline-flex;gap:6px;margin:2px}
.newrow td{background:var(--sunk)}
.st{font-size:12px;border-radius:999px;padding:2px 10px;border:1px solid}
.st-pending{color:var(--warn)}.st-approved{color:var(--ok)}.st-rejected{color:var(--muted)}
.narrowform{max-width:640px;display:grid;gap:14px}
.form{display:grid;gap:14px}
.h2{font-size:18px;margin-top:6px}

/* інсталятор */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 8px}
.checks li span{grid-row:span 2;font-weight:700}
.checks li.ok span{color:var(--ok)}.checks li.bad span{color:var(--bad)}
.checks small{color:var(--muted)}
.okbox{border-color:var(--ok)}
.install main{margin-top:20px}
.install .title{font-size:clamp(26px,4vw,40px);text-transform:uppercase;margin:6px 0 10px}

/* підвал */
.pfoot{max-width:1160px;margin:0 auto;padding:18px 16px 28px;display:flex;gap:16px;align-items:center;border-top:1px solid var(--hairline,var(--line));width:100%}
.pfoot p{margin:0;font-size:12px;color:var(--muted)}
.eu-emblem{height:40px;width:auto}

/* перемикач теми (з theme.js) */
.themebtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hairline,var(--line));background:var(--glass,var(--surface));color:var(--ink);border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;min-height:36px}
.themebtn i{width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:1.5px solid var(--ink)}

@media (max-width:900px){.dgrid{grid-template-columns:minmax(0,1fr)}.phero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){
  .grid2{grid-template-columns:minmax(0,1fr)}
  .hide-s{display:none}
  .pnav{gap:10px}.wname{display:none}
  .filters .seg:first-child{margin-right:0}
  .pod b{font-size:14px}
  .filters input{min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
form.filters{margin:12px 0 16px}
form.filters input[name=q]{flex:1 1 320px;width:auto}
form.filters select{width:auto;flex:0 0 auto}