/* ---- Themes: mode via data-theme (light|dark, absent = follow system), colour via data-accent ---- */
:root{--bg:hsl(160 8% 96.4%);--panel:#fff;--panel2:hsl(160 8% 98.4%);--line:hsl(160 7% 88.5%);--text:hsl(160 14% 12%);--muted:hsl(160 6% 44%);--accent:#0f766e;--accent2:#115e59;--accentbg:#e6f4f1;--onaccent:#fff;--danger:#b42318;--dangerbg:#fdecea;--warn:#b54708;--warnbg:#fff4e5;--ok:#067647;--okbg:#e7f6ec;--mark:#fde68a;--shadow:0 1px 2px rgba(16,24,20,.06),0 4px 16px rgba(16,24,20,.06);
  --radius:10px;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color-scheme:light}
:root[data-accent="blue"]{--bg:hsl(218 16% 96.4%);--panel:#fff;--panel2:hsl(218 16% 98.4%);--line:hsl(218 14% 88.5%);--text:hsl(218 14% 12%);--muted:hsl(218 6% 44%);--accent:#1d4ed8;--accent2:#1e40af;--accentbg:#e8eefc;--onaccent:#fff}
:root[data-accent="indigo"]{--bg:hsl(240 14% 96.4%);--panel:#fff;--panel2:hsl(240 14% 98.4%);--line:hsl(240 13% 88.5%);--text:hsl(240 14% 12%);--muted:hsl(240 6% 44%);--accent:#4338ca;--accent2:#3730a3;--accentbg:#ecebfb;--onaccent:#fff}
:root[data-accent="violet"]{--bg:hsl(265 12% 96.4%);--panel:#fff;--panel2:hsl(265 12% 98.4%);--line:hsl(265 11% 88.5%);--text:hsl(265 14% 12%);--muted:hsl(265 6% 44%);--accent:#7c3aed;--accent2:#6d28d9;--accentbg:#f1eafd;--onaccent:#fff}
:root[data-accent="rose"]{--bg:hsl(345 12% 96.4%);--panel:#fff;--panel2:hsl(345 12% 98.4%);--line:hsl(345 11% 88.5%);--text:hsl(345 14% 12%);--muted:hsl(345 6% 44%);--accent:#be123c;--accent2:#9f1239;--accentbg:#fdebef;--onaccent:#fff}
:root[data-accent="orange"]{--bg:hsl(24 16% 96.4%);--panel:#fff;--panel2:hsl(24 16% 98.4%);--line:hsl(24 14% 88.5%);--text:hsl(24 14% 12%);--muted:hsl(24 6% 44%);--accent:#c2410c;--accent2:#9a3412;--accentbg:#fdefe6;--onaccent:#fff}
:root[data-accent="green"]{--bg:hsl(140 10% 96.4%);--panel:#fff;--panel2:hsl(140 10% 98.4%);--line:hsl(140 9% 88.5%);--text:hsl(140 14% 12%);--muted:hsl(140 6% 44%);--accent:#15803d;--accent2:#166534;--accentbg:#e7f5ec;--onaccent:#fff}
:root[data-accent="slate"]{--bg:hsl(215 10% 96.4%);--panel:#fff;--panel2:hsl(215 10% 98.4%);--line:hsl(215 9% 88.5%);--text:hsl(215 14% 12%);--muted:hsl(215 6% 44%);--accent:#334155;--accent2:#1e293b;--accentbg:#eceff3;--onaccent:#fff}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){--bg:hsl(160 8% 6.8%);--panel:hsl(160 8% 9.8%);--panel2:hsl(160 8% 12.3%);--line:hsl(160 7% 18%);--text:hsl(160 10% 91%);--muted:hsl(160 7% 61%);--accent:#2dd4bf;--accent2:#5eead4;--accentbg:#133a35;--onaccent:#04221e;--danger:#f97066;--dangerbg:#3b1714;--warn:#fdb022;--warnbg:#3a2a0c;--ok:#47cd89;--okbg:#0f2e1e;--mark:#78591a;--shadow:none;color-scheme:dark}
:root:not([data-theme="light"])[data-accent="blue"]{--bg:hsl(218 16% 6.8%);--panel:hsl(218 16% 9.8%);--panel2:hsl(218 16% 12.3%);--line:hsl(218 14% 18%);--text:hsl(218 10% 91%);--muted:hsl(218 7% 61%);--accent:#60a5fa;--accent2:#93c5fd;--accentbg:#16284a;--onaccent:#06162e}
:root:not([data-theme="light"])[data-accent="indigo"]{--bg:hsl(240 14% 6.8%);--panel:hsl(240 14% 9.8%);--panel2:hsl(240 14% 12.3%);--line:hsl(240 13% 18%);--text:hsl(240 10% 91%);--muted:hsl(240 7% 61%);--accent:#818cf8;--accent2:#a5b4fc;--accentbg:#23234e;--onaccent:#0e0d2b}
:root:not([data-theme="light"])[data-accent="violet"]{--bg:hsl(265 12% 6.8%);--panel:hsl(265 12% 9.8%);--panel2:hsl(265 12% 12.3%);--line:hsl(265 11% 18%);--text:hsl(265 10% 91%);--muted:hsl(265 7% 61%);--accent:#a78bfa;--accent2:#c4b5fd;--accentbg:#2d204e;--onaccent:#170b33}
:root:not([data-theme="light"])[data-accent="rose"]{--bg:hsl(345 12% 6.8%);--panel:hsl(345 12% 9.8%);--panel2:hsl(345 12% 12.3%);--line:hsl(345 11% 18%);--text:hsl(345 10% 91%);--muted:hsl(345 7% 61%);--accent:#fb7185;--accent2:#fda4af;--accentbg:#47182a;--onaccent:#2a0612}
:root:not([data-theme="light"])[data-accent="orange"]{--bg:hsl(24 16% 6.8%);--panel:hsl(24 16% 9.8%);--panel2:hsl(24 16% 12.3%);--line:hsl(24 14% 18%);--text:hsl(24 10% 91%);--muted:hsl(24 7% 61%);--accent:#fb923c;--accent2:#fdba74;--accentbg:#45250f;--onaccent:#2a1203}
:root:not([data-theme="light"])[data-accent="green"]{--bg:hsl(140 10% 6.8%);--panel:hsl(140 10% 9.8%);--panel2:hsl(140 10% 12.3%);--line:hsl(140 9% 18%);--text:hsl(140 10% 91%);--muted:hsl(140 7% 61%);--accent:#4ade80;--accent2:#86efac;--accentbg:#143823;--onaccent:#05230f}
:root:not([data-theme="light"])[data-accent="slate"]{--bg:hsl(215 10% 6.8%);--panel:hsl(215 10% 9.8%);--panel2:hsl(215 10% 12.3%);--line:hsl(215 9% 18%);--text:hsl(215 10% 91%);--muted:hsl(215 7% 61%);--accent:#cbd5e1;--accent2:#e2e8f0;--accentbg:#29313f;--onaccent:#0f172a}
}
:root[data-theme="dark"]{--bg:hsl(160 8% 6.8%);--panel:hsl(160 8% 9.8%);--panel2:hsl(160 8% 12.3%);--line:hsl(160 7% 18%);--text:hsl(160 10% 91%);--muted:hsl(160 7% 61%);--accent:#2dd4bf;--accent2:#5eead4;--accentbg:#133a35;--onaccent:#04221e;--danger:#f97066;--dangerbg:#3b1714;--warn:#fdb022;--warnbg:#3a2a0c;--ok:#47cd89;--okbg:#0f2e1e;--mark:#78591a;--shadow:none;color-scheme:dark}
:root[data-theme="dark"][data-accent="blue"]{--bg:hsl(218 16% 6.8%);--panel:hsl(218 16% 9.8%);--panel2:hsl(218 16% 12.3%);--line:hsl(218 14% 18%);--text:hsl(218 10% 91%);--muted:hsl(218 7% 61%);--accent:#60a5fa;--accent2:#93c5fd;--accentbg:#16284a;--onaccent:#06162e}
:root[data-theme="dark"][data-accent="indigo"]{--bg:hsl(240 14% 6.8%);--panel:hsl(240 14% 9.8%);--panel2:hsl(240 14% 12.3%);--line:hsl(240 13% 18%);--text:hsl(240 10% 91%);--muted:hsl(240 7% 61%);--accent:#818cf8;--accent2:#a5b4fc;--accentbg:#23234e;--onaccent:#0e0d2b}
:root[data-theme="dark"][data-accent="violet"]{--bg:hsl(265 12% 6.8%);--panel:hsl(265 12% 9.8%);--panel2:hsl(265 12% 12.3%);--line:hsl(265 11% 18%);--text:hsl(265 10% 91%);--muted:hsl(265 7% 61%);--accent:#a78bfa;--accent2:#c4b5fd;--accentbg:#2d204e;--onaccent:#170b33}
:root[data-theme="dark"][data-accent="rose"]{--bg:hsl(345 12% 6.8%);--panel:hsl(345 12% 9.8%);--panel2:hsl(345 12% 12.3%);--line:hsl(345 11% 18%);--text:hsl(345 10% 91%);--muted:hsl(345 7% 61%);--accent:#fb7185;--accent2:#fda4af;--accentbg:#47182a;--onaccent:#2a0612}
:root[data-theme="dark"][data-accent="orange"]{--bg:hsl(24 16% 6.8%);--panel:hsl(24 16% 9.8%);--panel2:hsl(24 16% 12.3%);--line:hsl(24 14% 18%);--text:hsl(24 10% 91%);--muted:hsl(24 7% 61%);--accent:#fb923c;--accent2:#fdba74;--accentbg:#45250f;--onaccent:#2a1203}
:root[data-theme="dark"][data-accent="green"]{--bg:hsl(140 10% 6.8%);--panel:hsl(140 10% 9.8%);--panel2:hsl(140 10% 12.3%);--line:hsl(140 9% 18%);--text:hsl(140 10% 91%);--muted:hsl(140 7% 61%);--accent:#4ade80;--accent2:#86efac;--accentbg:#143823;--onaccent:#05230f}
:root[data-theme="dark"][data-accent="slate"]{--bg:hsl(215 10% 6.8%);--panel:hsl(215 10% 9.8%);--panel2:hsl(215 10% 12.3%);--line:hsl(215 9% 18%);--text:hsl(215 10% 91%);--muted:hsl(215 7% 61%);--accent:#cbd5e1;--accent2:#e2e8f0;--accentbg:#29313f;--onaccent:#0f172a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.45 var(--font)}
a{color:var(--accent)}
.hidden{display:none!important}
.muted{color:var(--muted)}
.err{color:var(--danger);min-height:1.2em;font-size:13px}
mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
input,select,textarea{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-color:var(--accent)}
input[type=checkbox]{width:auto}
textarea{resize:vertical}
label{display:block;font-size:12.5px;color:var(--muted);font-weight:500}
label>input,label>select,label>textarea{margin-top:4px}
.btn{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:7px 13px;border-radius:8px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--panel2);border-color:color-mix(in srgb,var(--text) 18%,var(--line))}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--onaccent)}
.btn.primary:hover{background:var(--accent2)}
.btn.danger{color:var(--danger)}
.btn.danger.solid{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn.wide{width:100%;justify-content:center;padding:10px}
.btn:disabled{opacity:.55;cursor:default}
.logo{width:22px;height:22px;border-radius:6px;background:var(--accent);display:inline-block;position:relative;flex:none}
.logo::after{content:"";position:absolute;inset:6px 4px 6px 4px;border:2px solid var(--onaccent);border-top-width:2px;clip-path:polygon(0 0,50% 60%,100% 0,100% 100%,0 100%)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.2px}
.brand.big{font-size:24px;justify-content:center}
.brand.big .logo{width:30px;height:30px}

/* login */
.login-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;padding:32px;width:min(380px,100%);display:grid;gap:14px}
.login-card p{text-align:center;margin:-6px 0 6px}

/* layout */
#app{height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:22px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
#nav{display:flex;gap:2px;flex:1;overflow-x:auto}
#nav a{color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:7px;font-weight:500;white-space:nowrap}
#nav a:hover{color:var(--text);background:var(--panel2)}
#nav a.active{color:var(--accent);background:var(--accentbg)}
.top-right{display:flex;gap:8px;align-items:center}
.usermenu{position:relative}
.menu{position:absolute;right:0;top:110%;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:180px;padding:5px;z-index:30}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);padding:8px 10px;border-radius:6px;cursor:pointer;font:inherit}
.menu button:hover{background:var(--panel2)}
main{flex:1;min-height:0;overflow:auto}
.page{padding:22px 26px;max-width:1400px;margin:0 auto}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:20px;margin:0;flex:1;letter-spacing:-.3px}

/* mail view */
.mail{display:grid;grid-template-columns:240px minmax(340px,440px) 1fr;height:100%}
.side{border-right:1px solid var(--line);background:var(--panel2);overflow:auto;padding:12px 8px}
.side h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 8px 6px}
.side select{margin:0 0 6px}
.tree a{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;color:var(--text);text-decoration:none;cursor:pointer;font-size:13.5px}
.tree a:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.tree a.active{background:var(--accentbg);color:var(--accent);font-weight:600}
.tree a .n{margin-left:auto;color:var(--muted);font-size:12px;font-weight:400}
.tree a .tw{width:14px;text-align:center;color:var(--muted);flex:none}
.tree .sub a{padding-left:28px;font-size:13px}
.tree .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;background:var(--panel)}
.searchbar{padding:12px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.sb-row{display:flex;gap:6px}
.sb-row input{flex:1}
.sb-input{position:relative;flex:1}
.sb-input input{padding-left:32px}
.sb-input::before{content:"⌕";position:absolute;left:10px;top:50%;transform:translateY(-52%);color:var(--muted);font-size:17px}
.adv{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;background:var(--panel2);border:1px solid var(--line);border-radius:9px}
.adv .full{grid-column:1/-1}
.adv .actions{grid-column:1/-1;display:flex;gap:6px;justify-content:flex-end}
.meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.meta select{width:auto;padding:4px 6px;font-size:12.5px}
.meta .grow{flex:1}
.facets{display:flex;gap:5px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:2px 9px;font-size:12px;cursor:pointer;color:var(--text);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip b{font-weight:600;color:var(--muted);margin-left:3px}
.bulk{display:flex;gap:6px;align-items:center;padding:8px 12px;background:var(--accentbg);border-bottom:1px solid var(--line);font-size:13px}
.results{flex:1;overflow:auto}
.item{display:grid;grid-template-columns:20px 1fr auto;gap:4px 8px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.item:hover{background:var(--panel2)}
.item.active{background:var(--accentbg);box-shadow:inset 3px 0 0 var(--accent)}
.item .from{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .date{font-size:12px;color:var(--muted);white-space:nowrap}
.item .subj{grid-column:2/4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .snip{grid-column:2/4;color:var(--muted);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .tags{grid-column:2/4;display:flex;gap:6px;font-size:11.5px;color:var(--muted)}
.item input{margin-top:2px}
.pager{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.reader{display:flex;flex-direction:column;min-width:0;background:var(--panel)}
.r-head{padding:16px 20px;border-bottom:1px solid var(--line)}
.r-head h2{margin:0 0 10px;font-size:18px;letter-spacing:-.2px;word-break:break-word}
.r-meta{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13px}
.r-meta dt{color:var(--muted)}
.r-meta dd{margin:0;word-break:break-word}
.r-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.banner{margin:10px 20px 0;padding:8px 12px;border-radius:8px;background:var(--warnbg);color:var(--warn);font-size:13px;display:flex;gap:10px;align-items:center}
.r-body{flex:1;min-height:0;padding:0}
.r-body iframe{width:100%;height:100%;border:0;background:#fff}
.atts{display:flex;gap:8px;flex-wrap:wrap;padding:10px 20px;border-top:1px solid var(--line)}
.att{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px;text-decoration:none;color:var(--text);max-width:260px}
.att:hover{border-color:var(--accent)}
.att span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att small{color:var(--muted)}
pre.hdrs{font:12px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all;margin:0;padding:12px 20px;max-height:240px;overflow:auto;background:var(--panel2);border-bottom:1px solid var(--line)}

/* tables & cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card h3{margin:0;font-size:14px}
.card .ch{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card .ch .grow{flex:1}
.card .cb{padding:16px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;background:var(--panel2)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td .acts{display:flex;gap:5px;justify-content:flex-end}
.tablewrap{overflow-x:auto}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.ok{background:var(--okbg);color:var(--ok);border-color:transparent}
.badge.bad{background:var(--dangerbg);color:var(--danger);border-color:transparent}
.badge.warn{background:var(--warnbg);color:var(--warn);border-color:transparent}
.badge.run{background:var(--accentbg);color:var(--accent);border-color:transparent}
.badge.run::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{padding:16px}
.stat .lbl{font-size:12px;color:var(--muted);font-weight:500;display:flex;justify-content:space-between}
.stat .val{font-size:26px;font-weight:700;letter-spacing:-.5px;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.stat .sub{font-size:12px;color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;margin-top:10px}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s}
.bar.warn>i{background:var(--warn)}.bar.bad>i{background:var(--danger)}
.spark{width:100%;height:46px;display:block;margin-top:8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.ubar{display:flex;align-items:center;gap:10px}
.ubar .bar{flex:1;margin:0}
.toolbar{display:flex;gap:8px;align-items:center}

/* oauth */
.oauth-box{display:grid;gap:10px;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.oauth-state{font-size:13px;color:var(--muted)}
.oauth-state.ok{color:var(--ok)}.oauth-state.warn{color:var(--warn)}
.oauth-btn{justify-self:start;font-weight:600;padding:8px 14px}
.oauth-mark{width:16px;height:16px;flex:none;display:inline-grid;border-radius:3px}
.oauth-mark.m365{border-radius:0;background:linear-gradient(#f25022,#f25022) 0 0/7px 7px no-repeat,linear-gradient(#7fba00,#7fba00) 9px 0/7px 7px no-repeat,linear-gradient(#00a4ef,#00a4ef) 0 9px/7px 7px no-repeat,linear-gradient(#ffb900,#ffb900) 9px 9px/7px 7px no-repeat}
.oauth-mark.gws{border-radius:50%;background:radial-gradient(circle,var(--panel) 0 38%,transparent 39%),conic-gradient(from -45deg,#ea4335 0 25%,#fbbc05 0 37%,#34a853 0 62%,#4285f4 0)}
.copyrow{display:flex;gap:8px;align-items:center;min-width:0}
.copyrow code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;padding:7px 9px}
details summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:500}
ol.steps{margin:8px 0 0;padding-left:20px;font-size:13px;display:grid;gap:5px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(10,15,12,.45);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--panel);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.modal.wide{width:min(760px,100%)}
.modal .mh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal .mh h3{margin:0;font-size:16px;flex:1}
.modal .mb{padding:18px 20px;overflow:auto;display:grid;gap:12px}
.modal .mf{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;align-items:center}
.modal .mf .grow{flex:1;font-size:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.hint{font-size:12px;color:var(--muted);margin-top:3px}
.sect{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.check{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13.5px}
.testres{font-size:13px;padding:8px 10px;border-radius:8px}
.testres.ok{background:var(--okbg);color:var(--ok)}.testres.bad{background:var(--dangerbg);color:var(--danger)}
code{font:12.5px var(--mono);background:var(--panel2);border:1px solid var(--line);padding:1px 5px;border-radius:5px}
.help-table td{padding:5px 8px;font-size:12.5px}

/* toasts */
#toasts{position:fixed;bottom:18px;right:18px;display:grid;gap:8px;z-index:70}
.toast{background:var(--text);color:var(--bg);padding:10px 14px;border-radius:9px;box-shadow:var(--shadow);font-size:13.5px;max-width:380px;animation:tin .2s}
.toast.bad{background:var(--danger);color:#fff}
@keyframes tin{from{transform:translateY(8px);opacity:0}}

@media (max-width:1100px){.mail{grid-template-columns:200px 1fr}.reader{position:fixed;inset:57px 0 0 0;z-index:20}.reader.hidden-m{display:none}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.mail{grid-template-columns:1fr}.side{display:none}.g4,.g2,.row2,.row3{grid-template-columns:1fr}.topbar{flex-wrap:wrap;gap:8px}.page{padding:16px}}

/* appearance picker */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{display:grid;gap:8px;justify-items:center;padding:10px 8px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer;font:inherit;font-size:13px}
.seg button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.mini{width:100%;max-width:120px;aspect-ratio:16/10;border-radius:6px;border:1px solid var(--line);overflow:hidden;display:grid;grid-template-columns:30% 1fr}
.mini i{display:block}
.mini.l{background:#f4f5f4}.mini.l i{background:#fff;border-right:1px solid #e3e6e1}
.mini.d{background:#14181a}.mini.d i{background:#1c2124;border-right:1px solid #2b3236}
.mini.s{background:linear-gradient(135deg,#f4f5f4 50%,#14181a 50%)}.mini.s i{background:linear-gradient(135deg,#fff 50%,#1c2124 50%)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.swatch{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer;font:inherit;font-size:13px}
.swatch[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.swatch b{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.seg button:focus-visible,.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme-btn{font-size:16px;padding:6px 10px}

/* auth screens */
.login{flex:1;min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(1200px 500px at 50% -10%,var(--accentbg),transparent 70%),var(--bg)}
.auth-wrap{display:grid;gap:14px;justify-items:center;width:min(460px,100%)}
.auth-brand{text-decoration:none;color:var(--text)}
.login-card{width:100%}
.login-card h2{margin:0;font-size:20px;letter-spacing:-.3px}
.login-card p{text-align:left;margin:0}
.auth-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.captcha-slot{min-height:65px}
.captcha-slot.hidden{display:none}

/* account banner */
.acct-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 18px;background:var(--accentbg);color:var(--text);border-bottom:1px solid var(--line);font-size:13.5px}
.acct-banner .btn{flex:none}
.acct-banner.warn{background:var(--warnbg)}.acct-banner.bad{background:var(--dangerbg)}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-4px 0 18px;overflow-x:auto}
.tabs button{font:inherit;font-weight:500;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* onboarding & checklists */
.onboard{margin-bottom:16px}
.ob-steps,.checklist{list-style:none;margin:0;padding:6px 16px 14px;display:grid;gap:2px}
.ob-steps li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.ob-steps li:last-child{border-bottom:0}
.ob-steps li>div{flex:1;min-width:0}
.ob-steps li.done{color:var(--muted)}
.ob-dot{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:var(--panel2);border:1px solid var(--line);flex:none}
li.done .ob-dot{background:var(--okbg);color:var(--ok);border-color:transparent}
li.next .ob-dot{background:var(--accent);color:var(--onaccent);border-color:transparent}
.checklist{padding:0}.checklist li{display:flex;align-items:center;gap:10px;padding:6px 0}
.checklist li:not(.done) .ob-dot{background:var(--warnbg);color:var(--warn);border-color:transparent}
.dns-rec{display:grid;grid-template-columns:auto auto 1fr;gap:12px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.dns-rec>div{display:grid;gap:4px;min-width:0}
@media (max-width:640px){.dns-rec{grid-template-columns:1fr 1fr}.dns-val{grid-column:1/-1}}

/* billing */
.lbl-row{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.section-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 14px}
.section-head h2{margin:0;font-size:17px;flex:1}
.seg-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;padding:3px;background:var(--panel)}
.seg-toggle button{font:inherit;font-size:13px;border:0;background:none;color:var(--muted);padding:6px 12px;border-radius:6px;cursor:pointer}
.seg-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--onaccent)}
.seg-toggle small{opacity:.85;font-weight:600}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.plan{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.plan.hl{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan.cur{background:var(--panel2)}
.plan-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.plan h3{margin:0;font-size:16px}
.plan-desc{margin:0;font-size:13px;min-height:2.6em}
.plan-price b{font-size:26px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.plan-price span{color:var(--muted);margin-left:2px}
.plan-feats{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:5px;font-size:13px;flex:1}
.plan-feats li{padding-left:18px;position:relative}
.plan-feats li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
table.quote td{padding:8px 4px}
table.quote tr.tot td{font-weight:700;font-size:16px;border-top:2px solid var(--text);border-bottom:0}
.paid-ok{width:52px;height:52px;border-radius:50%;background:var(--okbg);color:var(--ok);display:grid;place-items:center;font-size:26px;margin:4px auto 0}
tr.tfoot td{background:var(--panel2)}
.ic-theme{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);display:inline-block;flex:none}
.theme-btn{display:inline-grid;place-items:center}
a.btn{text-decoration:none}
.ab-text{flex:1;min-width:0}