:root{color-scheme:light;
--bg:#eef1fb;--bg2:#e4e9fa;--card:#ffffff;--soft:#f6f8fd;--input:#ffffff;--line:#dde2f0;--txt:#1b2033;--muted:#68718c;
--pri:#5b5bf0;--pri2:#8b5cf6;--selbg:#e9e9ff;--bad:#e5484d;--ok:#18a058;--warnbg:#fff5e1;--warnline:#f2c46b;
--shadow:0 10px 30px rgba(40,50,110,.10);
--c-friesengroup:#3b82f6;--c-besa:#10b981;--c-arnold:#f59e0b}
[data-theme=dark]{color-scheme:dark;
--bg:#0d1020;--bg2:#12162b;--card:#171b31;--soft:#1c2140;--input:#12162b;--line:#2a3157;--txt:#e8eaf8;--muted:#98a0c4;
--pri:#7c7cff;--pri2:#a78bfa;--selbg:#262c58;--bad:#ff6369;--ok:#3ddc97;--warnbg:#3a2e12;--warnline:#8a6a1f;
--shadow:0 10px 30px rgba(0,0,0,.45)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--txt);min-height:100vh;
background:radial-gradient(1200px 500px at 85% -10%,color-mix(in srgb,var(--pri2) 22%,transparent),transparent),radial-gradient(900px 500px at -10% 0%,color-mix(in srgb,var(--pri) 18%,transparent),transparent),var(--bg);
background-attachment:fixed;transition:background .25s,color .25s}
a{color:var(--pri)}
header.nav{background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);padding:10px 22px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:5}
header.nav .brand{font-weight:800;letter-spacing:.3px;margin-right:12px;background:linear-gradient(90deg,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;color:transparent}
header.nav a{color:var(--txt);text-decoration:none;padding:7px 12px;border-radius:10px;transition:background .15s}
header.nav a:hover{background:var(--selbg)}
header.nav a.active{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:600}
header.nav .sp{flex:1}.header .who,header.nav .who{color:var(--muted);font-size:.9rem;margin:0 6px}
.theme-btn{background:var(--soft);color:var(--txt);border:1px solid var(--line);width:40px;height:40px;padding:0;border-radius:12px;font-size:1.1rem;margin:0}
.theme-btn:hover{background:var(--selbg);transform:none;filter:none}
main{max-width:1100px;margin:22px auto;padding:0 16px}
.card{background:var(--card);padding:22px;border-radius:20px;box-shadow:var(--shadow);margin-bottom:18px;border:1px solid var(--line);transition:background .25s}
h1,h2,h3{margin-top:0;letter-spacing:-.2px}
button,input,select,textarea{font:inherit;padding:10px 13px;border-radius:12px;border:1px solid var(--line);margin:3px 0;color:var(--txt);background:var(--input)}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--pri) 55%,transparent);outline-offset:1px;border-color:var(--pri)}
button{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border:0;cursor:pointer;font-weight:600;transition:transform .12s,filter .15s}
button:hover{filter:brightness(1.1);transform:translateY(-1px)}
button.sec{background:var(--soft);color:var(--txt);border:1px solid var(--line);font-weight:500}
button.bad{background:var(--bad)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
label{display:block;font-size:.82rem;color:var(--muted);margin-top:10px;font-weight:500}
input,select,textarea{width:100%}
input[type=checkbox]{width:auto}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:140px}
table{width:100%;border-collapse:collapse}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
td,th{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tbody tr:hover{background:var(--soft)}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.tag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.76rem;color:#fff;font-weight:600}
.tag.friesengroup{background:var(--c-friesengroup)}.tag.besa{background:var(--c-besa)}.tag.arnold{background:var(--c-arnold)}
.muted{color:var(--muted)}.err{color:var(--bad)}.ok{color:var(--ok)}
.warn{background:var(--warnbg);border:1px solid var(--warnline);padding:10px 12px;border-radius:12px;margin:8px 0}
dialog{border:1px solid var(--line);border-radius:20px;padding:24px;max-width:720px;width:95%;background:var(--card);color:var(--txt);box-shadow:0 25px 60px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(5,8,25,.55);backdrop-filter:blur(3px)}
.hero{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.hero .ico{font-size:2rem}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.78rem;background:var(--soft);border:1px solid var(--line)}
.pill.green{color:var(--ok)}.pill.amber{color:#d98a00}
.floating-theme{position:fixed;top:14px;right:14px;z-index:10}