:root{--track:#EDF0F6;--bg:#F1F4F9;--card:#fff;--ink:#16213A;--mu:#6B7790;--ln:#E5EAF2;--ac:#3B6EF5;--ac2:#14B8A6;--acS:#E8EFFF;--ac2S:#DDF6F2;--sb:#fff;--sbi:#7B879D;--sbon:#E8EFFF;--sbonI:#3B6EF5;--legc:#3B4A66;--ok:#16A34A;--okS:#E3F6EA;--wn:#E59A00;--wnS:#FFF1D6;--bd:#DC3545;--bdS:#FDE6E8;--sh:0 1px 2px rgba(22,33,58,.04),0 8px 24px rgba(22,33,58,.06)}
[data-theme=green]{--bg:#F3F7F4;--ac:#16A34A;--ac2:#0EA5E9;--acS:#E3F6EA;--ac2S:#E0F2FE;--sbon:#E3F6EA;--sbonI:#16A34A}
[data-theme=navy]{--bg:#EEF1F8;--ac:#2D5BD6;--ac2:#FF8A1F;--acS:#E6ECFB;--ac2S:#FFEBD6;--sb:#14233A;--sbi:#9FB0CC;--sbon:#24395B;--sbonI:#fff;--legc:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--ac)}
h1,h2,h3{font-family:"Space Grotesk",Inter,system-ui,sans-serif;letter-spacing:-.02em;margin:0}
p{margin:0 0 10px}
.mu,.mute{color:var(--mu)}
/* public pages */
.pub{background:var(--sb);border-bottom:1px solid var(--ln)}
.pub .in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.pub .in .r{margin-left:auto;display:flex;gap:14px;align-items:center}
.pub .in a{text-decoration:none}
.pubwrap{max-width:1100px;margin:0 auto;padding:26px 16px 48px}
.pubwrap.narrow{max-width:520px}
.brand{display:flex;align-items:center;gap:8px;font:700 20px "Space Grotesk";letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.brand b{color:var(--ac2)}.brand .lg{width:34px;flex:none}
.lg .leg{fill:var(--legc)}
/* app shell */
.app{display:flex;min-height:100vh}
.sb{width:208px;background:var(--sb);border-right:1px solid var(--ln);display:flex;flex-direction:column;align-items:stretch;padding:14px 10px;gap:4px;position:sticky;top:0;height:100vh;flex:none}
.sb .brand{padding:0 6px 14px}
[data-theme=navy] .sb .brand{color:#fff}
.sb .nv{width:100%;height:42px;border-radius:12px;color:var(--sbi);display:flex;align-items:center;gap:11px;padding:0 12px;font:600 13.5px Inter;text-decoration:none;white-space:nowrap;border:0;background:transparent;cursor:pointer;text-align:left}
.sb .nv:hover{background:var(--sbon)}.sb .nv.on{background:var(--sbon);color:var(--sbonI)}
.sb .nv svg{width:19px;height:19px;flex:none}
.sb .lab{font:600 10.5px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--sbi);opacity:.7;padding:10px 12px 4px}
.sb .sp{flex:1}
.sb form{margin:0}
.main{flex:1;min-width:0;padding:16px 22px 40px}
.tb{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.tb h1{font-size:22px}.tb .sub{color:var(--mu);font-size:13px}
.tb .r{margin-left:auto;display:flex;align-items:center;gap:10px}
.who{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ln);border-radius:12px;padding:4px 12px 4px 4px}
.av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 12px "Space Grotesk";color:#fff;flex:none;background:var(--ac)}
.who b{display:block;font-size:13px;line-height:1.1}.who span{font-size:11px;color:var(--mu)}
@media(max-width:820px){.app{flex-direction:column}.sb{width:100%;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto;padding:8px 10px;gap:4px;border-right:0;border-bottom:1px solid var(--ln)}.sb .brand{padding:0 8px 0 0}.sb .brand span{display:none}.sb .nv{width:auto;flex:none;padding:0 12px}.sb .sp,.sb .lab{display:none}.main{padding:12px}.tb .r{margin-left:0}}
/* grid and cards */
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
@media(max-width:1100px){.s3,.s4,.s5,.s6,.s7,.s8{grid-column:span 12}.s3{grid-column:span 6}}
@media(max-width:700px){.s3{grid-column:span 12}}
.c{background:var(--card);border-radius:18px;box-shadow:var(--sh);padding:16px;min-width:0}
.c h3{font-size:15px;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.c h3 small{font:400 12px Inter;color:var(--mu)}
.c h3 .lk{margin-left:auto;font:600 12px Inter;text-decoration:none}
.kp{display:flex;align-items:center;gap:12px}
.kp .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none}.kp .ic svg{width:22px}
.kp b{display:block;font:700 24px "Space Grotesk";line-height:1.1}.kp span{font-size:12.5px;color:var(--mu)}
.i1{background:var(--acS);color:var(--ac)}.i2{background:var(--ac2S);color:var(--ac2)}.i3{background:var(--wnS);color:var(--wn)}.i4{background:var(--okS);color:var(--ok)}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.p-ok{background:var(--okS);color:var(--ok)}.p-wn{background:var(--wnS);color:#9A6500}.p-no{background:#EEF1F6;color:var(--mu)}.p-bd{background:var(--bdS);color:var(--bd)}.p-ac{background:var(--acS);color:var(--ac)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font:600 11.5px Inter;color:var(--mu);text-align:left;padding:8px;border-bottom:1px solid var(--ln)}
td{padding:10px 8px;border-bottom:1px solid var(--ln);vertical-align:middle}
tr:last-child td{border:0}
.tw{overflow-x:auto}
.pp{display:flex;align-items:center;gap:9px}.pp b{display:block;line-height:1.15}.pp span.s{font-size:12px;color:var(--mu)}
.list .it{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--ln)}.list .it:last-child{border:0}
.list .it .t{flex:1;min-width:0}.list .it .t b{display:block;font-size:13.5px}.list .it .t span{font-size:12px;color:var(--mu)}
/* buttons and forms */
.btn,button.btn{display:inline-block;border:0;background:var(--ac);color:#fff;border-radius:10px;padding:9px 16px;font:600 13.5px Inter;cursor:pointer;text-decoration:none}
.btn.alt{background:var(--acS);color:var(--ac)}.btn.sm{padding:6px 12px;font-size:12.5px}.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:hover{filter:brightness(1.05)}
.lnk{background:none;border:0;color:var(--mu);font:inherit;cursor:pointer;padding:0}.lnk:hover{color:var(--ink);text-decoration:underline}
label{display:block;font-weight:600;margin:0 0 6px}
input[type=text],input[type=email],input[type=password],input[type=date],textarea,select{width:100%;border:1px solid #CBD3E1;border-radius:10px;padding:10px 12px;font:inherit;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acS);border-color:var(--ac)}
textarea{min-height:96px;resize:vertical}
.field{margin:0 0 14px}
.err{background:var(--bdS);border:1px solid #F3B4BB;color:#8A1B27;border-radius:10px;padding:10px 12px;margin:0 0 14px}
.okmsg{background:var(--okS);border:1px solid #9AD3B1;color:#14532D;border-radius:10px;padding:10px 12px;margin:0 0 14px}
.copy{font-family:ui-monospace,monospace;font-size:13px;word-break:break-all;background:var(--acS);border-radius:10px;padding:10px}
.ans{white-space:pre-wrap;background:var(--bg);border-radius:10px;padding:10px;border:1px solid var(--ln)}
.qp{margin:4px 0 8px;padding-left:18px;color:var(--mu,#5B6475);font-size:13px;line-height:1.5}
.rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 2px;font-size:13px}
.rate>span{margin-right:6px;font-weight:600}
.rate label{margin:0;cursor:pointer}
.rate input{position:absolute;opacity:0}
.rate i{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid #CBD3E1;border-radius:9px;font-style:normal;font-weight:600;background:#fff;color:var(--ink)}
.rate input:checked+i{background:var(--ac);border-color:var(--ac);color:#fff}
.rate input:focus-visible+i{outline:2px solid var(--acS)}
.rate small{color:var(--mu,#5B6475);margin-left:6px}
.saved{font-size:12.5px;color:var(--ok);min-height:18px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* switch buttons */
.sw{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--ln)}.sw:last-child{border:0}
.sw .l{flex:1;font-weight:600;font-size:13.5px}.sw .l small{display:block;font-weight:400;font-size:12px;color:var(--mu)}
.sw form{margin:0}
.tg{width:42px;height:24px;border-radius:99px;background:#CBD3E1;position:relative;cursor:pointer;border:0;flex:none;transition:.2s}
.tg:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg.on{background:var(--ok)}.tg.on:after{left:21px}
/* timeline */
.tl{position:relative;padding-left:26px}
.tl:before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--ln)}
.tl .st{position:relative;padding:0 0 14px}.tl .st:last-child{padding:0}
.tl .st:before{content:"";position:absolute;left:-23px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #CBD3E1}
.tl .st.done:before{background:var(--ok);border-color:var(--ok)}
.tl .st.now:before{background:var(--ac);border-color:var(--ac);box-shadow:0 0 0 5px var(--acS)}
.tl .st b{display:block;font-size:13.5px}.tl .st span{font-size:12px;color:var(--mu)}
.tl .st .here{position:absolute;right:0;top:0}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:12px}
.cal .h{color:var(--mu);font-weight:600;padding:4px 0}.cal .d{padding:6px 0;border-radius:9px}
.cal .d.ev{background:var(--acS);color:var(--ac);font-weight:700}.cal .d.ev2{background:var(--ac);color:#fff;font-weight:700}
.cal .d.td{outline:2px solid var(--ac2);outline-offset:-2px}
.leg{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mu);margin-top:8px}.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* donut */
.donut{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.donut svg{width:120px;height:120px;flex:none}
.donut .lg2 div{display:flex;align-items:center;gap:7px;font-size:12.5px;margin:4px 0}.donut .lg2 i{width:10px;height:10px;border-radius:3px;display:block}
.bar2{height:8px;background:#EDF0F6;border-radius:6px;overflow:hidden;margin:6px 0}.bar2 i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--ac),var(--ac2))}
.lock{background:repeating-linear-gradient(45deg,#fff,#fff 10px,#F4F6FA 10px,#F4F6FA 20px);border:2px dashed #CBD3E1;border-radius:14px;padding:18px;text-align:center;color:var(--mu)}
.lock b{color:var(--ink)}
/* visibility matrix */
.vm td,.vm th{text-align:center}.vm td:first-child,.vm th:first-child{text-align:left}
.hero{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border-radius:18px;padding:26px 24px;margin-bottom:14px}
.hero h1{font-size:32px;max-width:620px}.hero p{max-width:560px;opacity:.92;font-size:16px}
.hero .btn{background:#fff;color:var(--ink)}
footer.pf{border-top:1px solid var(--ln);padding:14px 16px;color:var(--mu);font-size:13px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.main footer.pf{max-width:none;padding:14px 0 0}

/* Qlink brand: black and lime (from the Q LINK email banner). Dark dashboard. */
[data-theme=qlink]{--track:#2C2C2A;--bg:#0E0E0E;--card:#181818;--ink:#F4F4EE;--mu:#A5A598;--ln:#2C2C2A;--ac:#D6DF2C;--ac2:#D6DF2C;--acS:#2A2D10;--ac2S:#2A2D10;--sb:#000;--sbi:#B9B9AE;--sbon:#1E2008;--sbonI:#D6DF2C;--legc:#fff;--ok:#5FD38D;--okS:#12301F;--wn:#F0B429;--wnS:#3A2C08;--bd:#FF7A7A;--bdS:#3B1717;--sh:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35)}
[data-theme=qlink] .btn,[data-theme=qlink] button.btn{color:#0E0E0E}
[data-theme=qlink] .btn.alt{background:var(--acS);color:var(--ac)}
[data-theme=qlink] .who{background:var(--card)}
[data-theme=qlink] input[type=text],[data-theme=qlink] input[type=email],[data-theme=qlink] input[type=password],[data-theme=qlink] input[type=date],[data-theme=qlink] textarea,[data-theme=qlink] select{background:#0E0E0E;color:var(--ink);border-color:#3A3A36}
[data-theme=qlink] input:focus,[data-theme=qlink] textarea:focus,[data-theme=qlink] select:focus{outline:2px solid #3A3D12;border-color:var(--ac)}
[data-theme=qlink] .lock{background:repeating-linear-gradient(45deg,#181818,#181818 10px,#1F1F1D 10px,#1F1F1D 20px);border-color:#3A3A36}
[data-theme=qlink] .bar2{background:#262624}
[data-theme=qlink] .bar2 i{background:var(--ac)}
[data-theme=qlink] .tg{background:#3A3A36}[data-theme=qlink] .tg.on{background:var(--ok)}
[data-theme=qlink] .tg.on{background:var(--ok)}
[data-theme=qlink] .okmsg{color:#9BE7BA;border-color:#1F5A38}
[data-theme=qlink] .err{color:#FFB3B3;border-color:#6B2A2A}
[data-theme=qlink] .p-wn{color:var(--wn)}[data-theme=qlink] .p-no{background:#262624}
[data-theme=qlink] .p-no{background:#262624;color:var(--mu)}
[data-theme=qlink] .tl .st:before{background:#181818;border-color:#4A4A44}
[data-theme=qlink] .tl .st.done:before{background:var(--ok);border-color:var(--ok)}
[data-theme=qlink] .tl .st.now:before{background:var(--ac);border-color:var(--ac);box-shadow:0 0 0 5px #2A2D10}
[data-theme=qlink] .cal .d.ev2{color:#0E0E0E}
[data-theme=qlink] .cal .d.fz{background:#3A1717;color:#FF9C9C}
[data-theme=qlink] .hero{color:#0E0E0E}[data-theme=qlink] .hero .btn{background:#0E0E0E;color:var(--ac)}
[data-theme=qlink] .sb .brand{color:#fff}
[data-theme=qlink] .copy{color:var(--ink)}
.sb .bb{padding:0 6px 4px}.sb .blogo{width:100%;max-width:176px;height:auto;display:block}
.sb .by{font-size:11px;color:var(--sbi);padding:0 8px 12px}.sb .by b{color:var(--ac)}
.fz-card{border-left:4px solid var(--bd)}
@media(max-width:820px){.sb .bb{padding:0 8px 0 0}.sb .blogo{max-width:110px}.sb .by{display:none}}
[data-theme=qlink] .rate i{background:#0E0E0E;border-color:#3A3A36;color:var(--ink)}
[data-theme=qlink] .rate input:checked+i{background:var(--ac);border-color:var(--ac);color:#0E0E0E}