:root{color-scheme:dark;--bg:#080d18;--side:#0c1424;--surface:#111c30;--surface2:#152239;--border:#253751;--text:#f0f5ff;--muted:#99aac5;--brand:#7187ff;--brand2:#53d7c9;--bad:#f38895;--warn:#f6bc68;--green:#5cdeb1}
*{box-sizing:border-box}html{min-height:100%}body{background:radial-gradient(ellipse at 70% -25%,rgba(82,107,222,.17),transparent 52%),var(--bg);color:var(--text);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;margin:0}a{color:#adbdff;text-decoration:none}a:hover{color:#e7ebff}button,input,select,textarea{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.035em;font-size:clamp(25px,3vw,35px);line-height:1.15;margin:5px 0 12px}h2{font-size:18px;letter-spacing:-.02em;margin-bottom:14px}h3{font-size:16px;margin-bottom:12px}p{color:var(--muted)}small,.muted{color:var(--muted)}code{color:#b5d6ff;overflow-wrap:anywhere}header{display:none}.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#101a2e 0%,#0b1220 100%);border-right:1px solid var(--border);padding:28px 18px;display:flex;flex-direction:column;gap:23px}.brand{display:flex;align-items:center;gap:12px;padding:0 10px}.brand-mark{background:linear-gradient(145deg,#6774ff,#4bd2c6);border-radius:14px;color:white;font-size:19px;font-weight:900;width:43px;height:43px;display:grid;place-items:center;box-shadow:0 10px 26px #5662e638}.brand strong{font-size:17px;letter-spacing:.03em}.brand small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.navtitle{font-size:11px;letter-spacing:.12em;color:#7187a9;padding:0 13px;font-weight:800;text-transform:uppercase}.nav{display:grid;gap:5px}.nav a{display:flex;align-items:center;gap:12px;border:1px solid transparent;padding:10px 13px;border-radius:11px;font-weight:600;color:#bac8e0;transition:.13s}.nav a:hover{background:#202f4c;color:white}.nav a.active{background:linear-gradient(90deg,#344186,#263451);color:white;border-color:#5766ae}.nav .symbol{width:20px;text-align:center;font-size:17px}.sidefoot{margin-top:auto;padding:14px 12px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}.sidefoot strong{color:var(--text)}.maincol{min-width:0}.topbar{height:72px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 clamp(20px,3.5vw,48px);background:#0e1626c9}.topbar .toplabel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8296b8;font-weight:800}.userbox{display:flex;align-items:center;gap:10px;font-size:13px}.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#6776c7,#334264);color:#fff;font-weight:800}.container{max-width:1320px;padding:30px clamp(20px,3.5vw,48px) 70px;margin:auto}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#65dec9;margin-bottom:5px}.lede{max-width:810px;margin-bottom:25px}.hero{padding:28px 30px;background:linear-gradient(110deg,#24365f,#1d2a49 70%,#143c49);border:1px solid #3b547a;border-radius:20px;display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:25px}.hero h1{margin:0 0 7px}.hero p{margin:0}.hero .big{font-size:35px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:21px 0}.metric{padding:19px 21px;border:1px solid var(--border);background:linear-gradient(150deg,var(--surface2),#111a2b);border-radius:16px}.metric .value{font-size:31px;font-weight:800;color:white;line-height:1.1;margin:8px 0}.metric .label{color:var(--muted);font-size:13px}.metric .accent{color:var(--brand2)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.grid-wide{display:grid;grid-template-columns:1.3fr .7fr;gap:17px}section,.card{background:linear-gradient(145deg,var(--surface),#101a2c);border:1px solid var(--border);border-radius:17px;padding:22px;margin:0 0 18px;min-width:0;box-shadow:0 8px 25px #03071016}section p:last-child{margin-bottom:0}.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px}.sectionhead h2{margin:0}.chip{background:#253654;border:1px solid #365171;color:#aecdff;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}.chip.ok{background:#123e38;color:#69e1bf;border-color:#22695b}.chip.warn{background:#503718;color:#ffd28c;border-color:#785025}.chip.danger{background:#48283a;color:#ffabb6;border-color:#744456}.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:12px}table{border-collapse:collapse;width:100%;min-width:540px}th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:#19263d;color:#9fb2ce}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid #293a53}tr:last-child td{border-bottom:0}tbody tr:hover{background:#1a2941}td{font-size:13px}td a{font-weight:700}.empty{padding:22px;background:#142138;border:1px dashed #375070;border-radius:11px;text-align:center;color:var(--muted)}form{margin:6px 0}form.inline{display:inline-flex;vertical-align:middle}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.formrow{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.formrow label{flex:1;min-width:170px}label{display:grid;gap:6px;min-width:0;font-size:13px;color:#b9c9e1;font-weight:600;margin:8px 0}input,select,textarea{width:100%;background:#0c1525;color:var(--text);border:1px solid #364966;border-radius:10px;padding:11px 12px;outline:none;min-height:43px}input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #6373f82e}textarea{min-height:88px;resize:vertical}input[type=checkbox]{width:auto;min-height:0}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #7585fc;background:linear-gradient(110deg,#5263e7,#4655bb);color:white;padding:10px 15px;border-radius:10px;font-weight:750;min-height:41px}button:hover,.button:hover{filter:brightness(1.15);color:white}.button.secondary,button.secondary{background:#1d2d49;border-color:#365077;color:#dbe7ff}.button.danger,button.danger{background:#622f43;border-color:#9b4a65;color:#fff}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.textlist{display:grid;gap:11px}.listrow{padding:11px 12px;background:#13223a;border:1px solid #263b5b;border-radius:10px}.listrow strong{display:block;margin-bottom:2px}.listrow small{display:block;font-size:12px}.subtle{font-size:12px;color:#8fa0bf}.notice{border:1px solid #7b5e36;background:#41311f69;color:#ffd6a1;padding:13px 16px;border-radius:12px;margin-bottom:20px}.notice.info{border-color:#375674;background:#172d48;color:#abcfff}.statline{display:flex;gap:15px;flex-wrap:wrap;margin:12px 0 25px}.statline span{background:#1b2a43;border:1px solid #2c4363;border-radius:10px;padding:8px 12px}.loginwrap{min-height:100vh;display:grid;place-items:center;padding:30px}.loginbox{width:min(500px,100%);text-align:center;padding:42px;border:1px solid #334563;background:linear-gradient(140deg,#1c2b49,#121d31);border-radius:23px}.loginbox .brand-mark{margin:0 auto 18px;width:56px;height:56px}.loginbox h1{margin-bottom:12px}.loginbox .button{margin-top:15px}.footnote{margin-top:28px;color:#7c8fb0;font-size:12px}.stack{display:grid;gap:14px}.formhint{font-size:12px;color:#8599b8}.danger-zone{border-color:#764055;background:linear-gradient(135deg,#271927,#171d2e)}@media(max-width:1090px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-wide{grid-template-columns:1fr}}@media(max-width:760px){.shell{grid-template-columns:1fr}.sidebar{height:auto;position:static;padding:14px 16px;gap:12px}.nav{display:flex;overflow:auto}.nav a{white-space:nowrap;padding:9px}.navtitle,.sidefoot{display:none}.topbar{height:55px;padding:0 18px}.container{padding:20px 16px 45px}.grid,.formgrid{grid-template-columns:1fr}.hero{padding:22px}.metrics{gap:9px}.metric{padding:14px}.metric .value{font-size:25px}.userbox{font-size:12px}section{padding:16px}}

/* NRW neon theme. The supplied artwork is optimized to WebP and embedded
   so it remains available on every Coolify deployment without external hosting. */
:root{
 --bg:#0b080e;--side:#110b13;--surface:#19121d;--surface2:#211725;
 --border:#412838;--text:#fff2f6;--muted:#bca7b4;--brand:#fc577c;
 --brand2:#ff8aa8;--bad:#ff829b;--warn:#ffbc75;--green:#5cdeb1;
 --nrw-logo:url("data:image/webp;base64,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");
}
body{background:
 radial-gradient(ellipse at 74% -18%,rgba(255,65,116,.19),transparent 53%),
 radial-gradient(ellipse at 0% 86%,rgba(159,34,91,.10),transparent 45%),var(--bg)}
a{color:#ff9eb7}a:hover{color:#ffd1dd}
.sidebar{background:linear-gradient(180deg,#1a0d19 0%,#100c15 54%,#0d0912 100%)}
.brand-mark{
 width:49px;height:49px;min-width:49px;font-size:0!important;line-height:0;
 border-radius:13px;border:1px solid #933754;
 background-image:var(--nrw-logo);background-size:cover;background-position:center;
 box-shadow:0 0 22px #ff386942;overflow:hidden;flex-shrink:0
}
.brand strong{color:#fff1f5;letter-spacing:.08em}
.brand small{color:#d9a1b3}
.navtitle{color:#b3859e}
.nav a{color:#ccb6c3}
.nav a:hover{background:#392134;color:#fff4f7}
.nav a.active{background:linear-gradient(90deg,#65233f,#422139);border-color:#a43f60;color:#fff}
.sidefoot{border-color:#3b2637;color:#ba92a8}
.topbar{background:#160f1bc9;border-bottom-color:#3b2637}
.topbar .toplabel{color:#b99caf}
.avatar{background:linear-gradient(140deg,#ff6f92,#a62f59)}
.eyebrow{color:#ff8aab}
.hero{background:linear-gradient(105deg,#442137,#311a2e 65%,#211727);
 border-color:#87445c;box-shadow:inset 0 1px 0 #ffffff10,0 20px 60px #12060b4b}
.hero .big{
 background-image:var(--nrw-logo);background-position:center;background-size:cover;
 width:124px;height:124px;min-width:124px;border:1px solid #9d3c59;
 border-radius:21px;box-shadow:0 0 28px #ec426b55;font-size:0;line-height:0
}
.metric{background:linear-gradient(145deg,#251a29,#1a131d)}
.metric .accent{color:#ff89a5}
section,.card{background:linear-gradient(145deg,#201624,#17121c);
 box-shadow:0 10px 26px #08030930}
a.card:hover,a.metric:hover{border-color:#a44664;transform:translateY(-2px);transition:transform .16s,border-color .16s}
.chip{background:#3b2235;border-color:#6c3855;color:#ffd0dd}
.chip.ok{background:#153931;border-color:#286e5d;color:#76e8bd}
.chip.warn{background:#51371e;border-color:#85613b;color:#ffd49a}
.chip.danger{background:#49202d;border-color:#813e54;color:#ffb7c8}
th{background:#281b2b;color:#e3afc5}
td,th{border-bottom-color:#462b3b}
tbody tr:hover{background:#332030}
.tablewrap{border-color:#472a3b}
.empty,.listrow{background:#241825;border-color:#4d2b3f}
.statline span{background:#2b1c2c;border-color:#583249}
input,select,textarea{background:#130e16;border-color:#674057;color:#fff}
input:focus,select:focus,textarea:focus{border-color:#ef6185;box-shadow:0 0 0 3px #e9437a2e}
button,.button{background:linear-gradient(110deg,#ed4770,#bd3158);border-color:#ff6d93;color:#fff}
.button.secondary,button.secondary{background:#37243a;border-color:#75455e;color:#ffe4ec}
.loginwrap{background:radial-gradient(circle at 50% 24%,#491c33 0%,transparent 42%)}
.loginbox{width:min(520px,100%);padding:46px 40px;border-color:#6a344e;
 background:linear-gradient(145deg,#291928,#140f19);box-shadow:0 35px 95px #05020886}
.loginbox .brand-mark{
 width:130px;height:130px;min-width:130px;margin:0 auto 22px;border-radius:23px;
 box-shadow:0 0 42px #f9497350
}
.loginbox h1{color:#fff5f7}
.loginbox .button{padding:13px 21px}
.notice.info{background:#32202e;border-color:#78405d;color:#ffd0dc}
@media(max-width:760px){.hero .big{width:76px;height:76px;min-width:76px;border-radius:14px}
 .brand-mark{width:41px;height:41px;min-width:41px}
 .loginbox .brand-mark{width:112px;height:112px;min-width:112px}}
@media(max-width:420px){.hero .big{display:none}}


/* Faction index and per-account appearance */
.gear{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--subtle-bg);border:1px solid var(--border);font-size:22px;color:var(--text);margin:0 5px}.gear:hover{border-color:var(--accent);color:var(--accent)}
.faction-banner{max-width:1000px;position:relative;margin:10px 0 24px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#050505;box-shadow:0 12px 45px #0006;max-height:360px}
.faction-banner img{display:block;width:100%;max-height:360px;object-fit:cover}
.faction-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:17px}
.faction-tab{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border);border-radius:11px;padding:14px 15px;background:var(--panel);color:var(--muted);font-weight:730}
.faction-tab span{display:inline-flex;padding:2px 8px;border-radius:9px;background:var(--subtle-bg);color:var(--text)}
.faction-tab.selected,.faction-tab:hover{border-color:var(--accent);background:var(--accent-veil);color:var(--text)}
.faction-list{display:grid;gap:12px;margin-bottom:22px}
.faction-card{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:13px;background:var(--panel);padding:17px 20px}
.faction-card-head{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:14px}
.faction-card-head small{display:block;margin-top:4px;color:var(--muted)}
.faction-name{font-size:18px;font-weight:850;letter-spacing:-.02em;color:var(--text)}
.faction-name:hover{color:var(--accent)}
.faction-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px;font-size:13px;color:var(--muted)}
.faction-details span{min-width:0;overflow-wrap:anywhere}.faction-details strong{color:var(--text);font-weight:700}
.faction-actions{display:flex;gap:8px}.faction-actions .button{font-size:12px;padding:6px 12px;min-height:34px}
.faction-paging{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 30px;color:var(--muted);font-weight:700}
.faction-paging .disabled{opacity:.35;cursor:not-allowed}
.appearance-card{max-width:760px}
.color-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0 27px}
.color-option,.option-pill{cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;min-height:92px;padding:10px;border:1px solid var(--border);background:var(--panel);border-radius:12px;margin:0;color:var(--text);text-align:center}
.color-option input{position:absolute;opacity:0;width:1px;height:1px}
.color-option:has(input:checked),.option-pill:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-veil)}
.color-dot{width:37px;height:37px;border:1px solid #8a8a8a;border-radius:50%;box-shadow:inset 0 0 0 2px #fff2}
.choice-row{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 30px}.choice-row .option-pill{min-height:48px;flex-direction:row;padding:12px 20px}.option-pill input{width:auto;min-height:0;accent-color:var(--accent)}
html{--tone:336;--saturation:85%;--lightness:62%;--panel:#211625;--accent:hsl(var(--tone) var(--saturation) var(--lightness));--accent-veil:color-mix(in srgb,var(--accent) 16%,transparent);--subtle-bg:#302234}
html[data-color=red]{--tone:354;--saturation:82%}
html[data-color=orange]{--tone:25;--saturation:90%}
html[data-color=yellow]{--tone:48;--saturation:80%}
html[data-color=green]{--tone:152;--saturation:67%}
html[data-color=teal]{--tone:182;--saturation:72%}
html[data-color=blue]{--tone:216;--saturation:84%}
html[data-color=purple]{--tone:268;--saturation:79%}
html[data-color=white]{--tone:0;--saturation:0%;--lightness:92%}
html[data-color=black]{--tone:0;--saturation:0%;--lightness:34%}
html[data-shade=soft]{--saturation:46%;--accent-veil:color-mix(in srgb,var(--accent) 10%,transparent)}
html[data-mode=dark]{--panel:#211625;--subtle-bg:#302234}
html[data-mode=light]{
 color-scheme:light;
 --bg:#f5f5f8;--side:#fff;--surface:#fff;--surface2:#f6f4f8;--border:#d6d2db;
 --text:#24202c;--muted:#645969;--panel:#fff;--subtle-bg:#f2eff5;
 --accent-veil:color-mix(in srgb,var(--accent) 19%,transparent)
}
html[data-mode=light] body{background:radial-gradient(ellipse at 70% -30%,var(--accent-veil),transparent 55%),var(--bg)}
html[data-mode=light] .sidebar{background:#fff}
html[data-mode=light] .topbar{background:#fff}
html[data-mode=light] .nav a{color:#554e5e}
html[data-mode=light] .nav a.active{background:var(--accent-veil);color:var(--text)}
html[data-mode=light] .hero{background:linear-gradient(120deg,var(--accent-veil),#fff)}
html[data-mode=light] section,html[data-mode=light] .card{background:#fff;box-shadow:0 10px 24px #1a0b1910}
html[data-mode=light] .metric{background:#fff}
html[data-mode=light] input,html[data-mode=light] textarea,html[data-mode=light] select{background:#fff;color:var(--text)}
html[data-mode=light] th{background:#f2eff5;color:#6f5768}
html[data-mode=light] tbody tr:hover{background:#f7f3f8}
html[data-mode=light] .empty,html[data-mode=light] .listrow{background:#f7f5f9}
html[data-mode=light] .loginwrap{background:radial-gradient(circle at 50% 25%,var(--accent-veil),transparent 46%),var(--bg)}
html[data-mode=light] .loginbox{background:#fff}
html[data-mode=light] .loginbox h1,html[data-mode=light] .metric .value,html[data-mode=light] .brand strong{color:var(--text)}
html[data-mode=light] .statline span{background:#fff;border-color:var(--border)}
html[data-mode=light] .chip{background:var(--accent-veil);color:var(--text)}
html[data-mode=light] .faction-name{color:var(--text)}
html[data-mode=light] .topbar .toplabel{color:var(--muted)}
html[data-mode=light] .notice.info{background:#f6eef3;color:#543d50}
html a:not(.button),html .eyebrow{color:var(--accent)}
html .nav a,html .faction-tab{color:var(--muted)}
html .nav a.active,html .faction-tab.selected{background:var(--accent-veil);border-color:var(--accent);color:var(--text)}
html .hero{border-color:var(--accent)}
html .faction-card{border-left-color:var(--accent)}
html .faction-card a.faction-name{color:var(--text)}
html button,html .button{background:var(--accent);border-color:var(--accent);color:#150f1b}
html button.secondary,html .button.secondary{background:var(--subtle-bg);border-color:var(--border);color:var(--text)}
html input:focus,html select:focus,html textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-veil)}
html .brand-mark{border-color:var(--accent);box-shadow:0 0 16px var(--accent-veil)}
html .faction-tab span{color:var(--text)}
html[data-color=black][data-mode=dark] {--lightness:71%}
html[data-color=white][data-mode=light] {--lightness:30%}
@media(max-width:880px){.faction-details{grid-template-columns:1fr 1fr}.faction-tabs{grid-template-columns:1fr}}
@media(max-width:570px){.color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.faction-card-head{flex-wrap:wrap}.faction-details{grid-template-columns:1fr}.faction-paging{gap:9px}.faction-actions{flex-wrap:wrap}}

.dashboard-cover{max-height:330px;margin:10px 0 25px;border-radius:17px;overflow:hidden;border:1px solid var(--border);background:#030303;box-shadow:0 18px 38px #0005}
.dashboard-cover img{display:block;width:100%;height:auto;max-height:330px;object-fit:cover}
html[data-color=black][data-mode=light] button:not(.secondary),html[data-color=black][data-mode=light] .button:not(.secondary){color:#fff}
html[data-mode=light] .metric .label,html[data-mode=light] .metric .subtle{color:var(--muted)}
html[data-mode=light] .userbox{color:var(--text)}

/* Profile pictures and team controls */
.brand-mark img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.brand-mark{width:60px;height:60px;min-width:60px;flex-shrink:0;overflow:hidden}
.avatar{overflow:hidden;flex-shrink:0}
.avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.loginbox .brand-mark{width:158px;height:158px;min-width:158px}
.check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 20px}
.check-option{display:flex;flex-direction:row;gap:10px;align-items:center;margin:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer}
.check-option input{width:17px;height:17px;min-height:0;accent-color:var(--accent);flex-shrink:0}
.check-option:has(input:checked){background:var(--accent-veil);border-color:var(--accent)}
@media(max-width:720px){.check-list{grid-template-columns:1fr}.brand-mark{width:45px;height:45px;min-width:45px}.loginbox .brand-mark{width:130px;height:130px;min-width:130px}}


/* Complete personal colour themes: all surfaces are tied to the chosen hue.
   "Hell" means a light/pastel colourway, "Dunkel" a deep colourway. */
html[data-color]{
 --tone:332;--tint:74%;--tint-soft:42%;
 --accent:hsl(var(--tone) 83% 66%);--accent-veil:hsl(var(--tone) 79% 48% / .18);
 --primary:hsl(var(--tone) 80% 56%);--primary-text:#fff;
 --bg:hsl(var(--tone) var(--tint) 9%);
 --side:hsl(var(--tone) var(--tint) 13%);
 --surface:hsl(var(--tone) var(--tint-soft) 19%);
 --surface2:hsl(var(--tone) var(--tint-soft) 24%);
 --panel:var(--surface);
 --subtle-bg:hsl(var(--tone) var(--tint-soft) 25%);
 --border:hsl(var(--tone) var(--tint-soft) 36%);
 --text:hsl(var(--tone) 26% 97%);
 --muted:hsl(var(--tone) 27% 80%);
 --row-hov:hsl(var(--tone) var(--tint-soft) 29%);
 --input-bg:hsl(var(--tone) var(--tint-soft) 11%);
 --nav-active:hsl(var(--tone) 63% 30%);
 color-scheme:dark;
}
html[data-color="pink"]{--tone:332}
html[data-color="red"]{--tone:354}
html[data-color="orange"]{--tone:26}
html[data-color="yellow"]{--tone:48}
html[data-color="green"]{--tone:145}
html[data-color="teal"]{--tone:182}
html[data-color="blue"]{--tone:217}
html[data-color="purple"]{--tone:272}
html[data-color="white"],html[data-color="black"]{--tone:0;--tint:0%;--tint-soft:0%}
html[data-color="white"]{--accent:#f4f4f4;--primary:#eeeeee;--primary-text:#161616}
html[data-color="black"]{--accent:#c7c7c7;--primary:#323232;--primary-text:#fff}
html[data-shade="normal"]{
 --bg:hsl(var(--tone) var(--tint) 10%);
 --side:hsl(var(--tone) var(--tint) 16%);
 --surface:hsl(var(--tone) var(--tint-soft) 21%);
 --surface2:hsl(var(--tone) var(--tint-soft) 26%);
 --panel:var(--surface);
 --subtle-bg:hsl(var(--tone) var(--tint-soft) 28%);
 --border:hsl(var(--tone) var(--tint-soft) 40%);
 --input-bg:hsl(var(--tone) var(--tint-soft) 13%);
 --row-hov:hsl(var(--tone) var(--tint-soft) 31%);
 --nav-active:hsl(var(--tone) var(--tint) 30%);
 --primary:hsl(var(--tone) 79% 55%);
 --accent:hsl(var(--tone) 88% 72%);
 --text:#fff7fb;
 --muted:hsl(var(--tone) 29% 83%);
}
html[data-shade="dark"]{
 --bg:hsl(var(--tone) var(--tint) 4%);
 --side:hsl(var(--tone) var(--tint) 7%);
 --surface:hsl(var(--tone) var(--tint-soft) 11%);
 --surface2:hsl(var(--tone) var(--tint-soft) 15%);
 --panel:var(--surface);
 --subtle-bg:hsl(var(--tone) var(--tint-soft) 18%);
 --border:hsl(var(--tone) var(--tint-soft) 27%);
 --input-bg:hsl(var(--tone) var(--tint-soft) 7%);
 --row-hov:hsl(var(--tone) var(--tint-soft) 22%);
 --nav-active:hsl(var(--tone) var(--tint) 19%);
 --primary:hsl(var(--tone) 72% 38%);
 --accent:hsl(var(--tone) 78% 68%);
 --text:#faf5f9;
 --muted:hsl(var(--tone) 17% 73%);
}
html[data-shade="light"]{
 color-scheme:light;
 --bg:hsl(var(--tone) var(--tint) 92%);
 --side:hsl(var(--tone) var(--tint) 83%);
 --surface:hsl(var(--tone) var(--tint) 97%);
 --surface2:hsl(var(--tone) var(--tint) 89%);
 --panel:var(--surface);
 --subtle-bg:hsl(var(--tone) var(--tint) 84%);
 --border:hsl(var(--tone) var(--tint-soft) 68%);
 --input-bg:hsl(var(--tone) var(--tint-soft) 99%);
 --row-hov:hsl(var(--tone) var(--tint) 84%);
 --nav-active:hsl(var(--tone) var(--tint) 70%);
 --primary:hsl(var(--tone) 72% 37%);
 --accent:hsl(var(--tone) 82% 31%);
 --accent-veil:hsl(var(--tone) 70% 50% / .19);
 --primary-text:#fff;
 --text:hsl(var(--tone) 54% 15%);
 --muted:hsl(var(--tone) 30% 34%);
}
html[data-shade="light"][data-color="white"]{--primary:#444;--accent:#303030;--primary-text:#fff}
html[data-shade="light"][data-color="black"]{--primary:#222;--accent:#222;--primary-text:#fff}
html[data-shade="normal"][data-color="white"],html[data-shade="dark"][data-color="white"]{--primary:#e7e7e7;--primary-text:#111;--accent:#f2f2f2}
html[data-shade="normal"][data-color="black"],html[data-shade="dark"][data-color="black"]{--primary:#555;--primary-text:#fff;--accent:#cbcbcb}

/* The page and all major panels now use the same colour family. */
html[data-color] body{
 color:var(--text);
 background:radial-gradient(ellipse at 80% 0%,var(--accent-veil),transparent 55%),
 linear-gradient(155deg,var(--bg),var(--bg));
}
html[data-color] .shell{background:transparent}
html[data-color] .sidebar{background:linear-gradient(180deg,var(--side),var(--bg));border-color:var(--border)}
html[data-color] .topbar{background:var(--side);border-color:var(--border)}
html[data-color] .topbar .toplabel,
html[data-color] .navtitle,
html[data-color] .brand small,
html[data-color] .sidefoot,
html[data-color] .muted,
html[data-color] .subtle,
html[data-color] .metric .label,
html[data-color] .metric .subtle{color:var(--muted)}
html[data-color] .brand strong,
html[data-color] .metric .value,
html[data-color] .loginbox h1,
html[data-color] .userbox,
html[data-color] .avatar,
html[data-color] .faction-name{color:var(--text)}
html[data-color] .sidebar .nav a{color:var(--muted);background:transparent}
html[data-color] .sidebar .nav a:hover{background:var(--subtle-bg);color:var(--text);border-color:var(--border)}
html[data-color] .sidebar .nav a.active{background:var(--nav-active);color:var(--text);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
html[data-color] .brand-mark,html[data-color] .dashboard-cover,html[data-color] .faction-banner{border-color:var(--border)}
html[data-color] .gear{background:var(--subtle-bg);color:var(--text);border-color:var(--border)}
html[data-color] .gear:hover{border-color:var(--accent);color:var(--accent)}
html[data-color] section,
html[data-color] .card,
html[data-color] .metric,
html[data-color] .faction-card,
html[data-color] .faction-tab,
html[data-color] .color-option,
html[data-color] .option-pill,
html[data-color] .check-option,
html[data-color] .appearance-card,
html[data-color] .loginbox{
 background:var(--panel);border-color:var(--border);color:var(--text);
 box-shadow:0 10px 28px hsl(var(--tone) 52% 5% / .09);
}
html[data-color] .metric,
html[data-color] .faction-card,
html[data-color] .card{border-top:1px solid var(--border)}
html[data-color] .hero{
 background:linear-gradient(120deg,var(--side),var(--surface2));
 border-color:var(--accent);
}
html[data-color] .loginwrap{
 background:radial-gradient(circle at 50% 15%,var(--accent-veil),transparent 58%),var(--bg);
}
html[data-color] .metric:hover,html[data-color] .card:hover,html[data-color] .faction-card:hover{border-color:var(--accent)}
html[data-color] .faction-card{border-left:4px solid var(--primary)}
html[data-color] .faction-tab.selected,
html[data-color] .faction-tab:hover,
html[data-color] .color-option:has(input:checked),
html[data-color] .shade-option:has(input:checked),
html[data-color] .check-option:has(input:checked){
 background:var(--accent-veil);border-color:var(--accent);color:var(--text)
}
html[data-color] a{color:var(--accent)}
html[data-color] a:hover{color:var(--accent)}
html[data-color] .faction-name,html[data-color] .faction-card a.faction-name{color:var(--text)}
html[data-color] button,
html[data-color] .button{
 background:var(--primary);color:var(--primary-text);border-color:var(--primary);
}
html[data-color] button:hover,html[data-color] .button:hover{filter:brightness(1.07)}
html[data-color] button.secondary,
html[data-color] .button.secondary{background:var(--subtle-bg);color:var(--text);border-color:var(--border)}
html[data-color] input:not([type=checkbox]):not([type=radio]),
html[data-color] select,
html[data-color] textarea{
 background:var(--input-bg);color:var(--text);border-color:var(--border)
}
html[data-color] input:focus,
html[data-color] select:focus,
html[data-color] textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-veil)}
html[data-color] input::placeholder,html[data-color] textarea::placeholder{color:var(--muted);opacity:.85}
html[data-color] th{background:var(--surface2);color:var(--muted);border-color:var(--border)}
html[data-color] td{border-color:var(--border);color:var(--text)}
html[data-color] tbody tr:hover{background:var(--row-hov)}
html[data-color] .tablewrap{border-color:var(--border)}
html[data-color] .faction-paging,
html[data-color] p,
html[data-color] small,
html[data-color] label,
html[data-color] .chip,
html[data-color] .footnote{color:var(--muted)}
html[data-color] .faction-paging span{color:var(--text)}
html[data-color] .empty,
html[data-color] .listrow,
html[data-color] .statline span,
html[data-color] .notice.info{
 background:var(--surface2);border-color:var(--border);color:var(--text)
}
html[data-color] .chip{background:var(--subtle-bg);color:var(--text);border-color:var(--border)}
html[data-color] .chip.ok{background:#145c4433;border-color:#329f80;color:var(--text)}
html[data-color] .chip.warn{background:#d59d2433;border-color:#bb861c;color:var(--text)}
html[data-color] .chip.danger{background:#d1425933;border-color:#b14458;color:var(--text)}
html[data-color] .notice{color:var(--text)}
html[data-color] .avatar{background:var(--subtle-bg)}

/* Clear colour brightness selectors, not just a generic white/dark background toggle. */
html[data-color] .shade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 28px}
html[data-color] .shade-option{
 display:flex;position:relative;align-items:flex-start;flex-direction:column;gap:8px;
 padding:15px;min-height:123px;border-radius:13px;background:var(--panel);
 border:1px solid var(--border);color:var(--text);cursor:pointer;margin:0
}
html[data-color] .shade-option input{position:absolute;width:1px;height:1px;opacity:0}
html[data-color] .shade-option small{color:var(--muted);font-size:11px;font-weight:500}
html[data-color] .shade-option strong{color:var(--text);font-size:14px}
html[data-color] .shade-swatch{display:block;width:100%;height:35px;border-radius:8px;border:1px solid var(--border);background:var(--surface2)}
html[data-color] .shade-swatch.shade-light{background:linear-gradient(120deg,hsl(var(--tone) var(--tint) 91%),hsl(var(--tone) var(--tint) 72%))}
html[data-color] .shade-swatch.shade-normal{background:linear-gradient(120deg,hsl(var(--tone) var(--tint) 35%),hsl(var(--tone) var(--tint) 14%))}
html[data-color] .shade-swatch.shade-dark{background:linear-gradient(120deg,hsl(var(--tone) var(--tint) 16%),hsl(var(--tone) var(--tint) 3%))}
html[data-color] .appearance-card{max-width:850px}
html[data-color] .color-option{border-color:var(--border)}
html[data-color] .color-option span:not(.color-dot){color:var(--text)}
html[data-color] .color-grid{margin:15px 0 32px}
html[data-color] .appearance-actions{justify-content:flex-end;margin-top:21px}
html[data-color] .appearance-actions button{min-width:165px}
/* Live preview: swatches update immediately when changing colour or brightness. */
html[data-color] .appearance-card{--preview-tone:332;--preview-tint:74%}
html[data-color] .appearance-card:has(input[name=theme_color][value=red]:checked){--preview-tone:354}
html[data-color] .appearance-card:has(input[name=theme_color][value=orange]:checked){--preview-tone:26}
html[data-color] .appearance-card:has(input[name=theme_color][value=yellow]:checked){--preview-tone:48}
html[data-color] .appearance-card:has(input[name=theme_color][value=green]:checked){--preview-tone:145}
html[data-color] .appearance-card:has(input[name=theme_color][value=teal]:checked){--preview-tone:182}
html[data-color] .appearance-card:has(input[name=theme_color][value=blue]:checked){--preview-tone:217}
html[data-color] .appearance-card:has(input[name=theme_color][value=purple]:checked){--preview-tone:272}
html[data-color] .appearance-card:has(input[name=theme_color][value=white]:checked),
html[data-color] .appearance-card:has(input[name=theme_color][value=black]:checked){--preview-tone:0;--preview-tint:0%}
html[data-color] .theme-preview{
 display:flex;height:188px;border:1px solid var(--border);border-radius:14px;overflow:hidden;
 --preview-bg:hsl(var(--preview-tone) var(--preview-tint) 10%);
 --preview-side:hsl(var(--preview-tone) var(--preview-tint) 15%);
 --preview-card:hsl(var(--preview-tone) var(--preview-tint) 24%);
 --preview-action:hsl(var(--preview-tone) 80% 53%);
 background:var(--preview-bg)
}
html[data-color] .appearance-card:has(input[name=theme_shade][value=light]:checked) .theme-preview{
 --preview-bg:hsl(var(--preview-tone) var(--preview-tint) 92%);
 --preview-side:hsl(var(--preview-tone) var(--preview-tint) 81%);
 --preview-card:hsl(var(--preview-tone) var(--preview-tint) 98%);
 --preview-action:hsl(var(--preview-tone) 70% 37%)
}
html[data-color] .appearance-card:has(input[name=theme_shade][value=dark]:checked) .theme-preview{
 --preview-bg:hsl(var(--preview-tone) var(--preview-tint) 4%);
 --preview-side:hsl(var(--preview-tone) var(--preview-tint) 8%);
 --preview-card:hsl(var(--preview-tone) var(--preview-tint) 12%);
 --preview-action:hsl(var(--preview-tone) 74% 38%)
}
html[data-color] .preview-side{width:28%;min-width:95px;padding:16px 12px;background:var(--preview-side);display:flex;flex-direction:column;gap:13px}
html[data-color] .preview-side span{font-size:11px;font-weight:800;color:var(--preview-action)}
html[data-color] .preview-side i{display:block;height:12px;border-radius:7px;width:80%;background:var(--preview-card)}
html[data-color] .preview-side i:nth-child(3){width:65%}
html[data-color] .preview-main{flex:1;padding:15px;position:relative}
html[data-color] .preview-toolbar{height:23px;border-radius:6px;background:var(--preview-side);margin-bottom:15px}
html[data-color] .preview-cards{display:flex;gap:10px}
html[data-color] .preview-cards i{display:block;flex:1;height:65px;border-radius:9px;background:var(--preview-card)}
html[data-color] .preview-action{position:absolute;bottom:16px;right:16px;width:97px;height:23px;border-radius:8px;background:var(--preview-action)}
@media(max-width:660px){html[data-color] .shade-grid{grid-template-columns:1fr}html[data-color] .shade-option{min-height:86px}html[data-color] .theme-preview{height:150px}html[data-color] .preview-cards i{height:45px}}


/* Team rank directory */
html[data-color] .roster-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:21px 24px;margin:8px 0 16px;border:1px solid var(--border);border-radius:15px;background:var(--surface2)}
html[data-color] .roster-hero h2{margin-bottom:4px;font-size:22px;color:var(--text)}
html[data-color] .roster-hero p{margin:0}
html[data-color] .roster-hero>span{padding:8px 13px;background:var(--subtle-bg);border:1px solid var(--border);border-radius:9px;color:var(--text);font-weight:700;font-size:12px}
html[data-color] .roster-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
html[data-color] .roster-tabs a{background:var(--subtle-bg);padding:7px 10px;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-weight:650}
html[data-color] .roster-tabs a:hover{background:var(--accent-veil);border-color:var(--accent)}
html[data-color] .team-section{scroll-margin-top:85px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px}
html[data-color] .team-section h2{color:var(--text);font-size:19px;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:16px}
html[data-color] .team-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html[data-color] .team-role{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:13px 15px}
html[data-color] .team-role-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
html[data-color] .team-role-head strong{color:var(--text);font-size:15px;overflow-wrap:anywhere}
html[data-color] .team-role-head small{color:var(--muted);font-size:11px;white-space:nowrap}
html[data-color] .team-people{display:flex;flex-wrap:wrap;gap:6px}
html[data-color] .team-person{background:var(--subtle-bg);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:8px;font-weight:600;font-size:13px}
html[data-color] .team-no-members{font-size:13px;font-style:italic;color:var(--muted)}
@media(max-width:820px){html[data-color] .team-roles{grid-template-columns:1fr}}


/* Saved role permission presets */
html[data-color] #rights-presets{scroll-margin-top:28px}
html[data-color] #rights-presets form{padding:19px;margin:20px 0;border:1px solid var(--border);background:var(--surface2);border-radius:14px}
html[data-color] #rights-presets form .formgrid{margin-bottom:14px}
html[data-color] .rights-preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:12px 0 20px}
html[data-color] .rights-preset{padding:15px 16px;border:1px solid var(--border);border-radius:13px;background:var(--surface2);min-height:128px}
html[data-color] .rights-preset strong{display:block;font-weight:800;margin-bottom:7px;color:var(--text)}
html[data-color] .rights-preset p{margin:0 0 9px;font-size:13px;line-height:1.4;color:var(--muted)}
html[data-color] .rights-preset small{display:inline-block;color:var(--accent);font-size:11px;font-weight:750}
html[data-color] .preset-role-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:11px 13px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;margin-top:8px}
html[data-color] .preset-role-row strong{color:var(--text);margin-right:auto}
html[data-color] .preset-role-row span{display:inline-flex;background:var(--accent-veil);color:var(--text);padding:4px 10px;border:1px solid var(--accent);border-radius:9px;font-size:12px}
html[data-color] .preset-role-row small{color:var(--muted);white-space:nowrap}
@media(max-width:1050px){html[data-color] .rights-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:570px){html[data-color] .rights-preset-grid{grid-template-columns:1fr}}