/* ── NOTIFICATION PANEL ── */
.np{position:fixed;top:var(--th);right:0;width:340px;height:calc(100vh - var(--th));background:var(--w);border-left:1px solid var(--b1);box-shadow:-6px 0 24px rgba(0,0,0,.08);z-index:150;transform:translateX(100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s;overflow-y:auto;}
.np.open{transform:translateX(0);visibility:visible;transition:transform .2s ease,visibility 0s;}
.np-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--b1);position:sticky;top:0;background:var(--w);z-index:1;}
.np-title{font-family:var(--font);font-size:14px;font-weight:700;color:var(--t1);}
.np-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .12s;}
.np-item:hover{background:var(--bg);}
.np-item.unread{background:var(--ab);border-left:3px solid var(--a);}
.np-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.np-msg{font-size:12.5px;color:var(--t2);line-height:1.4;}
.np-msg strong{color:var(--t1);}
.np-time{font-size:11px;color:var(--t3);margin-top:2px;}
.np-unread-dot{width:6px;height:6px;border-radius:50%;background:var(--a);flex-shrink:0;margin-top:5px;}

/* ── TOAST ── */
/* ── Toasts (redesigned Jul 2026 — panel-native card, ring icons, tint wash,
   drain line, progress variant). JS: ui/toast.js ── */
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:min(372px,calc(100vw - 32px));}
.toast{position:relative;background:var(--c);border:1px solid var(--b1);border-radius:13px;box-shadow:0 10px 28px rgba(15,23,42,.13),0 2px 8px rgba(15,23,42,.07);padding:12px 13px;overflow:hidden;pointer-events:all;font-size:12.5px;animation:sptIn .34s cubic-bezier(.26,1.25,.48,1) backwards;}
[data-theme="dark"] .toast{box-shadow:0 12px 32px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);}
.toast.k-ok{background:linear-gradient(100deg,color-mix(in srgb,var(--g) 8%,var(--c)),var(--c) 46%);}
.toast.k-info{background:linear-gradient(100deg,color-mix(in srgb,var(--a) 8%,var(--c)),var(--c) 46%);}
.toast.k-warn{background:linear-gradient(100deg,color-mix(in srgb,var(--y) 9%,var(--c)),var(--c) 46%);}
.toast.k-err{background:linear-gradient(100deg,color-mix(in srgb,var(--r) 8%,var(--c)),var(--c) 46%);}
.toast.k-ok .ic{color:var(--g);} .toast.k-info .ic{color:var(--a);} .toast.k-warn .ic{color:var(--y);}
.toast.k-err .ic{color:var(--r);} .toast.k-prog .ic{color:var(--a);}
@keyframes sptIn{from{opacity:0;transform:translateX(110%) scale(.95);}to{opacity:1;transform:none;}}
.toast.out{animation:sptOut .24s cubic-bezier(.4,0,1,.6) forwards;}
@keyframes sptOut{to{opacity:0;transform:translateX(115%) scale(.96);}}
/* mobile variants (responsive.css swaps animation-name): slide from the top */
@keyframes sptInTop{from{opacity:0;transform:translateY(-120%) scale(.95);}to{opacity:1;transform:none;}}
@keyframes sptOutTop{to{opacity:0;transform:translateY(-120%) scale(.96);}}
.toast .hd{display:flex;align-items:flex-start;gap:10px;}
.toast .ic{width:20px;height:20px;flex-shrink:0;margin-top:1px;animation:sptIcPop .4s cubic-bezier(.34,1.7,.5,1) .12s backwards;}
@keyframes sptIcPop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
.toast .ic svg{width:20px;height:20px;display:block;}
.toast .tx{flex:1;min-width:0;}
/* anywhere: an error can carry one long token — an SSH fingerprint, a path, a
   URL — and .toast's overflow:hidden cut it off mid-word at the right edge. */
.toast .tt{font-size:13px;font-weight:600;color:var(--t1);letter-spacing:.01em;overflow-wrap:anywhere;}
.toast .tsb{font-size:12px;color:var(--t2);margin-top:3px;line-height:1.45;overflow-wrap:anywhere;}
.toast .x{background:none;border:0;color:var(--t4);cursor:pointer;padding:2px;margin:-2px -4px 0 0;border-radius:6px;flex-shrink:0;transition:color .15s,transform .15s;}
.toast .x:hover{color:var(--t1);transform:scale(1.12);}
.toast .x svg{width:14px;height:14px;display:block;}
.toast.lock .x{display:none;}
.toast .drain{position:absolute;left:0;bottom:0;height:2px;border-radius:0 2px 2px 0;background:var(--dc,var(--a));opacity:.8;animation:sptDrain linear forwards;}
@keyframes sptDrain{from{width:100%;}to{width:0;}}
.toast:hover .drain{animation-play-state:paused;}
/* progress variant */
.toast .bar{height:5px;background:color-mix(in srgb,var(--t4) 25%,transparent);border-radius:99px;margin:10px 0 9px;overflow:hidden;}
.toast .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--a),var(--g));transition:width .45s cubic-bezier(.22,1,.36,1);}
.toast .steps{display:flex;flex-direction:column;gap:7px;}
.toast .st{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t3);}
.toast .st .si{width:15px;height:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.toast .st .si svg{width:15px;height:15px;}
.toast .st.done{color:var(--t1);} .toast .st.done .si{color:var(--g);}
.toast .st .si.fail{color:var(--r);}
.toast .st.done .si svg{animation:sptIcPop .35s cubic-bezier(.34,1.7,.5,1);}
.toast .st.run{color:var(--t1);}
.toast .tspin{width:12px;height:12px;border:2px solid color-mix(in srgb,var(--t4) 35%,transparent);border-top-color:var(--a);border-radius:50%;animation:sptSpin .7s linear infinite;}
@keyframes sptSpin{to{transform:rotate(360deg);}}
.toast .st .idle{width:7px;height:7px;border-radius:50%;background:var(--t4);opacity:.6;}
.toast .st .lbl{flex:1;}
.toast .st .ttag{font-size:10px;font-weight:700;color:var(--t4);letter-spacing:.04em;}
.toast .st.done .ttag{color:var(--g);}
.toast .st.fail .ttag{color:var(--r);}
@media (prefers-reduced-motion: reduce){.toast,.toast .ic,.toast .st.done .si svg{animation:none;}}
@keyframes tsin{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:none;}}
@keyframes toastBar{from{width:100%;}to{width:0%;}}

/* ═══════════════ FILE MANAGER (fm-*) — bku design language ═══════════════ */
#view-filemanager{--fm-bd:var(--b1);--fm-bd2:var(--bg2);--fm-bd3:var(--b2);--fm-inset:var(--bg2);--fm-hov:var(--bg2);
  --fm-ink:var(--t1);--fm-t2:var(--t2);--fm-t3:var(--t3);--fm-mut:var(--t4);--fm-faint:var(--b2);
  --fm-a:var(--a);--fm-ah:var(--ah);--fm-abg:var(--ab);--fm-abd:var(--ab);--fm-aring:var(--ab);--fm-at:var(--ab);--fm-alk:var(--a);
  --fm-rt:var(--r);--fm-rbg:var(--rb);--fm-rbd:var(--rbd);
  color:var(--fm-ink);font-size:14px}
/* file-type badges whose category hue has no token (purple=php/lang, teal=sql)
   stay literal in light; give them dark-adaptive tints so they don't glow on dark */
[data-theme="dark"] .fmt-php,[data-theme="dark"] .fm-lang{background:#2b2144;color:#b794f6}
[data-theme="dark"] .fmt-sql{background:#123a30;color:#5ed0a8}
#view-filemanager svg{display:block;flex-shrink:0}
/* header */
.fm-ph{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.fm-ph .lf{display:flex;align-items:center;gap:14px}
.fm-hico{width:46px;height:46px;border-radius:13px;background:linear-gradient(150deg,var(--a),var(--ah));display:grid;place-items:center;box-shadow:0 4px 14px rgba(22,84,210,.25)}
.fm-hico svg{width:22px;height:22px;color:#fff}
.fm-ph h1{font-family:var(--font);font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--fm-ink);margin:0}
.fm-ph .sub{font-size:12px;color:var(--fm-mut);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fm-okdot{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--g);background:var(--gb);border:1px solid var(--gbd);border-radius:999px;padding:2px 10px}
.fm-okdot i{width:6px;height:6px;border-radius:50%;background:var(--g);animation:bkuPulse 2s infinite}
.fm-gbtn{height:38px;padding:0 15px;border-radius:10px;background:var(--w);border:1px solid var(--fm-bd3);font-size:12.5px;font-weight:500;color:var(--fm-t3);cursor:pointer;transition:all .14s;display:inline-flex;align-items:center;gap:7px;font-family:inherit}
.fm-gbtn:hover{background:var(--fm-hov);border-color:var(--fm-faint)}
.fm-gbtn:active{transform:scale(.98)}
.fm-gbtn svg{width:15px;height:15px}
/* Trash button (header actions row) — ghost by default, tinted when the Trash view is open */
#view-filemanager .fm-gbtn-trash.on{background:var(--fm-abg);border-color:var(--fm-abd);color:var(--fm-a)}
#view-filemanager .fm-gbtn-trash.on:hover{background:var(--fm-abg);border-color:var(--fm-abd)}
.fm-pbtn{height:38px;padding:0 17px;border-radius:10px;background:var(--fm-a);border:none;color:#fff;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:pointer;box-shadow:0 1px 2px rgba(22,84,210,.3);transition:all .14s;font-family:inherit}
.fm-pbtn:hover{background:var(--fm-ah)}
.fm-pbtn:active{transform:scale(.98)}
.fm-pbtn svg{width:14px;height:14px}
/* toolbar */
.fm-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.fm-srvdd{position:relative}
.fm-srvdd-btn{height:48px;min-width:194px;border:1px solid var(--fm-bd3);border-radius:10px;background:var(--w);padding:0 11px 0 12px;display:flex;align-items:center;gap:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--fm-ink);transition:border-color .14s,box-shadow .14s}
.fm-srvdd-btn:hover{border-color:var(--fm-faint)}
.fm-srvdd.open .fm-srvdd-btn{border-color:var(--fm-abd);box-shadow:0 0 0 3px var(--fm-aring)}
.fm-srvdd-btn .cur{display:inline-flex;align-items:center;gap:9px;flex:1;min-width:0}
.fm-srvdd-btn .cur svg,.fm-srvdd-btn .cur img{width:16px;height:16px;color:var(--fm-t3);object-fit:contain}
.fm-srvdd-btn .cur .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-srvdd-btn .cur .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.fm-srvdd-btn>.cv{width:15px;height:15px;color:var(--fm-mut);transition:transform .2s}
.fm-srvdd.open .fm-srvdd-btn>.cv{transform:rotate(180deg)}
.fm-srvdd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--w);border:1px solid var(--fm-bd3);border-radius:11px;box-shadow:0 12px 32px rgba(16,24,40,.14);padding:6px;z-index:60;max-height:288px;overflow:auto;opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top left;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.fm-srvdd.open .fm-srvdd-menu{opacity:1;transform:none;pointer-events:auto}
.fm-srvdd-row{width:100%;display:flex;align-items:center;gap:9px;padding:8px 9px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--fm-ink);text-align:left;transition:background .12s}
.fm-srvdd-row:hover{background:var(--fm-hov)}
.fm-srvdd-row.on{background:var(--fm-abg)}
.fm-srvdd-row.on .nm{color:var(--fm-a);font-weight:600}
.fm-srvdd-row .ic{width:24px;height:24px;display:grid;place-items:center;flex-shrink:0;color:var(--fm-t3)}
.fm-srvdd-row .ic img{width:18px;height:18px;object-fit:contain}
.fm-srvdd-row .ic svg{width:15px;height:15px}
.fm-srvdd-row .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-srvdd-row .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.fm-bar:has(.fm-srvdd.open),.fm-bar:has(.fm-sitedd.open){position:relative;z-index:120}
/* ── site picker (jump into a site's folder) — mirrors the server dropdown ── */
.fm-sitedd{position:relative}
.fm-sitedd-btn{height:48px;min-width:172px;max-width:230px;border:1px solid var(--fm-bd3);border-radius:10px;background:var(--w);padding:0 11px 0 12px;display:flex;align-items:center;gap:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--fm-ink);transition:border-color .14s,box-shadow .14s}
.fm-sitedd-btn:hover{border-color:var(--fm-faint)}
.fm-sitedd.open .fm-sitedd-btn{border-color:var(--fm-abd);box-shadow:0 0 0 3px var(--fm-aring)}
.fm-sitedd-btn .cur{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:0}
.fm-sitedd-btn .cur svg,.fm-sitedd-btn .cur img{width:16px;height:16px;color:var(--fm-t3);object-fit:contain;flex-shrink:0}
.fm-sitedd-btn .cur .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fm-sitedd-btn>.cv{width:15px;height:15px;color:var(--fm-mut);transition:transform .2s;flex-shrink:0}
.fm-sitedd.open .fm-sitedd-btn>.cv{transform:rotate(180deg)}
.fm-sitedd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:258px;background:var(--w);border:1px solid var(--fm-bd3);border-radius:11px;box-shadow:0 12px 32px rgba(16,24,40,.14);padding:6px;z-index:60;max-height:340px;overflow:auto;opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top left;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.fm-sitedd.open .fm-sitedd-menu{opacity:1;transform:none;pointer-events:auto}
.fm-sitedd-hd{padding:7px 9px 6px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--fm-mut)}
.fm-sitedd-empty{padding:16px 12px;text-align:center;font-size:12.5px;color:var(--fm-mut)}
.fm-sitedd-row{width:100%;display:flex;align-items:center;gap:9px;padding:8px 9px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--fm-ink);text-align:left;transition:background .12s}
.fm-sitedd-row:hover{background:var(--fm-hov)}
.fm-sitedd-row.on{background:var(--fm-abg)}
.fm-sitedd-row.on .nm{color:var(--fm-a);font-weight:600}
.fm-sitedd-row .ic{width:24px;height:24px;display:grid;place-items:center;flex-shrink:0;color:var(--fm-t3)}
.fm-sitedd-row .ic img{width:17px;height:17px;object-fit:contain}
.fm-sitedd-row .ic svg{width:16px;height:16px}
.fm-sitedd-row .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fm-sbadge{flex-shrink:0;font-size:10px;font-weight:600;letter-spacing:.02em;padding:2px 7px;border-radius:999px;line-height:1.5;text-transform:none}
.fm-sbadge.wp{background:var(--ab);color:var(--a)}
.fm-sbadge.dk{background:var(--ab);color:#0b6fb8}
.fm-sbadge.cu{background:var(--b1);color:#5a6675}
.fm-sitedd-btn .cur .fm-sbadge{font-size:9.5px;padding:1px 6px}
.fm-crumb{flex:1;min-width:260px;height:48px;border:1px solid var(--fm-bd3);border-radius:11px;background:var(--w);display:flex;align-items:center;padding:0 6px 0 14px;gap:2px;font-family:inherit;font-size:13px;overflow-x:auto;white-space:nowrap;cursor:text}
.fm-crumb .seg{color:var(--fm-t3);padding:4px 6px;border-radius:6px;cursor:pointer;border:0;background:none;font:inherit}
.fm-crumb .seg:hover{background:var(--fm-abg);color:var(--fm-a)}
.fm-crumb .seg.on{color:var(--fm-ink);font-weight:400;cursor:default}
.fm-crumb .sl{color:var(--fm-faint)}
.fm-crumb .cp{margin-left:auto;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--fm-mut);cursor:pointer;border:0;background:none;flex-shrink:0}
.fm-crumb .cp ~ .cp{margin-left:0}
.fm-crumb .cp:hover{background:var(--fm-bd2);color:var(--fm-t3)}
.fm-crumb .cp svg{width:13px;height:13px}
/* editable path bar (FileZilla-style) — click to type a path, Enter to go */
.fm-crumb.editing{padding:0;overflow:hidden;border-color:var(--fm-abd);box-shadow:0 0 0 3px var(--fm-aring)}
.fm-crumb-in{width:100%;height:100%;border:0;outline:0;background:transparent;font-family:inherit;font-size:13px;color:var(--fm-ink);padding:0 14px}
.fm-crumb-in::placeholder{color:var(--fm-mut)}
.fm-srch{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border:1px solid var(--fm-bd3);border-radius:11px;background:var(--w);width:230px;color:var(--fm-mut);font-size:13px;transition:border-color .14s,box-shadow .14s}
.fm-srch:focus-within{border-color:var(--fm-abd);box-shadow:0 0 0 3px var(--fm-aring)}
.fm-srch svg{width:14px;height:14px}
.fm-srch input{border:0;outline:0;background:none;font:inherit;color:var(--fm-ink);width:100%}
.fm-srch input::placeholder{color:var(--fm-mut)}
/* quick access */
.fm-qa{display:flex;gap:7px;margin-bottom:13px;flex-wrap:wrap;align-items:center}
.fm-qa .lb{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fm-mut);margin-right:2px}
.fm-chip{height:28px;padding:0 12px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--w);border:1px solid var(--fm-bd3);color:var(--fm-t3);display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;transition:.14s}
.fm-chip svg{width:12px;height:12px;color:var(--fm-mut)}
.fm-chip:hover{border-color:var(--fm-faint);background:var(--fm-hov)}
.fm-chip.on{background:var(--fm-abg);border-color:var(--fm-abd);color:var(--fm-alk)}
.fm-chip.on svg{color:var(--fm-a)}
/* list */
.fm-card{background:var(--w);border:1px solid var(--fm-bd);border-radius:14px;overflow:visible;position:relative}
.fm-hh{display:grid;grid-template-columns:34px minmax(0,1fr) 92px 100px 130px 122px;gap:10px;align-items:center;padding:10px 16px;background:var(--fm-inset);border-bottom:1px solid var(--fm-bd2);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fm-mut);border-radius:14px 14px 0 0}
.fm-row{display:grid;grid-template-columns:34px minmax(0,1fr) 92px 100px 130px 122px;gap:10px;align-items:center;padding:8px 16px;border-top:1px solid var(--fm-bd2);font-size:13px;cursor:pointer;position:relative;transition:background .1s}
.fm-row:first-of-type{border-top:0}
.fm-row:hover{background:var(--fm-hov)}
.fm-row.sel{background:var(--fm-abg)}
.fm-row.menuopen{z-index:50}
.fm-ck{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--fm-faint);display:grid;place-items:center;color:#fff;background:var(--w);cursor:pointer;transition:.12s;flex-shrink:0}
.fm-ck svg{width:9px;height:9px}
.fm-ck.on{background:var(--fm-a);border-color:var(--fm-a)}
.fm-row .fm-ck{opacity:0}
.fm-row:hover .fm-ck,.fm-row.sel .fm-ck,#view-filemanager.fm-selecting .fm-row .fm-ck{opacity:1}
.fm-ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.fm-ico svg{width:16px;height:16px}
.fmt-dir{background:var(--ab);color:var(--a)}.fmt-php{background:#f5f3ff;color:#7c3aed}.fmt-js{background:var(--yb);color:var(--y)}.fmt-img{background:var(--gb);color:var(--g)}.fmt-zip{background:var(--bg2);color:var(--t3)}.fmt-cfg{background:var(--bg2);color:var(--t3)}.fmt-sql{background:#e1f5ee;color:#0f6e56}.fmt-htm{background:var(--rb);color:var(--r)}
.fm-nm{display:flex;align-items:center;gap:11px;min-width:0}
.fm-nm .n{font-size:14.5px;font-weight:500;color:var(--fm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-nm .m{font-size:10.5px;color:var(--fm-mut);margin-top:1px}
.fm-sz{font-size:12px;color:var(--fm-t3);font-variant-numeric:tabular-nums}
.fm-pm{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:11px;color:var(--t3);background:var(--bg2);border:1px solid var(--b1);border-radius:6px;padding:2px 7px;justify-self:start;white-space:nowrap}
.fm-dt{font-size:11.5px;color:var(--fm-mut)}
.fm-dt b{display:block;color:var(--fm-t3);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.fm-act{display:flex;gap:5px;justify-content:flex-end;opacity:0;transition:.12s}
.fm-row:hover .fm-act,.fm-row.menuopen .fm-act{opacity:1}
.fm-iab{width:29px;height:29px;border-radius:8px;border:1px solid var(--fm-bd3);background:var(--w);color:var(--fm-t3);display:grid;place-items:center;cursor:pointer;transition:.13s;padding:0}
.fm-iab svg{width:14px;height:14px}
.fm-iab:hover{border-color:var(--fm-abd);color:var(--fm-a);background:var(--fm-abg)}
.fm-iab.del:hover{color:var(--fm-rt);border-color:var(--fm-rbd);background:var(--fm-rbg)}
.fm-empty{text-align:center;padding:44px 20px;color:var(--fm-mut);font-size:13px}
.fm-empty .eico{width:44px;height:44px;border-radius:12px;background:var(--fm-bd2);display:grid;place-items:center;margin:0 auto 12px;color:var(--fm-mut)}
.fm-empty .eico svg{width:20px;height:20px}
.fm-err{text-align:center;padding:30px 20px;color:var(--fm-rt);font-size:12.5px}
.fm-foot{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--fm-bd2);font-size:12px;color:var(--fm-mut);flex-wrap:wrap}
.fm-foot b{color:var(--fm-t3);font-weight:500}
/* skeleton rows */
.fm-skrow{display:grid;grid-template-columns:34px minmax(0,1fr) 92px 100px 130px 122px;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--fm-bd2)}
.fm-sk{border-radius:7px;background:linear-gradient(90deg,var(--fm-bd2) 25%,var(--fm-bd) 45%,var(--fm-bd2) 65%);background-size:400% 100%;animation:bkuShim 1.6s ease-in-out infinite}
/* progressive-window "load more" sentinel (very large folders) */
.fm-vmore{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;font-size:11.5px;color:var(--fm-mut);letter-spacing:.02em;border-top:1px solid var(--fm-bd2);cursor:pointer;user-select:none;transition:background .12s,color .12s}
.fm-vmore:hover{background:var(--fm-hov);color:var(--fm-ink)}
.fm-vmore:focus-visible{outline:2px solid var(--a,var(--a));outline-offset:-2px}
/* drag-to-move states */
.fm-row.fm-dragsrc,.fm-gc.fm-dragsrc{opacity:.45}
.fm-row.fm-drop{background:var(--ab,var(--ab));box-shadow:inset 0 0 0 2px var(--a,var(--a))}
.fm-gc.fm-drop{box-shadow:0 0 0 2px var(--a,var(--a));background:var(--ab,var(--ab))}
.fm-crumb .seg.fm-dropc{background:var(--a,var(--a));color:#fff}
#view-filemanager.fm-dragging .fm-row,#view-filemanager.fm-dragging .fm-gc{cursor:grabbing}
/* editor open skeleton (shown while file bytes load over SSH) */
.fm-edsk{padding:16px 20px;display:flex;flex-direction:column;gap:13px;overflow:hidden}
.fm-edsk-ln{display:block}
.fm-edsk .fm-sk{display:block;border-radius:5px}
/* media viewer loading skeleton */
.fm-media-sk{width:min(560px,80vw);height:min(340px,52vh);display:grid}
.fm-media-sk .fm-sk{width:100%;height:100%;border-radius:12px}
/* context / kebab menu */
.fm-menu{position:absolute;right:14px;top:42px;width:212px;background:var(--w);border:1px solid var(--b2);border-radius:11px;box-shadow:0 20px 46px rgba(16,24,40,.24);padding:6px;z-index:70;animation:bkuMenuIn .15s ease}
.fm-menu a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:7px;font-size:13px;font-weight:500;color:var(--fm-ink);cursor:pointer}
.fm-menu a svg{width:15px;height:15px;color:var(--fm-t3);flex-shrink:0}
.fm-menu a:hover{background:var(--fm-abg)}
.fm-menu .sep{height:1px;background:var(--fm-bd2);margin:5px 4px}
.fm-menu a.del{color:var(--fm-rt)}.fm-menu a.del svg{color:var(--fm-rt)}.fm-menu a.del:hover{background:var(--fm-rbg)}
/* bulk bar */
.fm-bulk{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:250;background:var(--fm-ink,var(--t1));color:#fff;border-radius:13px;padding:9px 10px 9px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 14px 40px rgba(16,24,40,.32);animation:bkuSaveBarUp .22s cubic-bezier(.25,.6,.3,1)}
.fm-bulk .cnt{font-size:12.5px;font-weight:500;white-space:nowrap}
.fm-bulk .acts{display:flex;gap:8px}
.fm-bulk .gh{border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;height:32px;padding:0 13px;border-radius:9px;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;font-family:inherit;cursor:pointer;transition:.13s}
.fm-bulk .gh:hover{background:rgba(255,255,255,.12)}
.fm-bulk .gh svg{width:13px;height:13px}
.fm-bulk .rd{background:var(--r);border:none;color:#fff;height:32px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;font-family:inherit;cursor:pointer}
.fm-bulk .rd:hover{background:var(--r)}
.fm-bulk .rd svg{width:13px;height:13px}
/* editor */
.fm-ed{background:var(--w);border:1px solid var(--fm-bd);border-radius:14px;overflow:hidden}
.fm-ed .hd{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--fm-bd2);flex-wrap:wrap}
.fm-ed .fi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.fm-ed .fi svg{width:16px;height:16px}
.fm-ed .tt{font-size:13.5px;font-weight:600;color:var(--fm-ink);display:flex;align-items:center;gap:8px}
.fm-ed .pt{font-family:inherit;font-size:11.5px;color:var(--fm-mut);margin-top:2px;word-break:break-all}
.fm-dirty{width:7px;height:7px;border-radius:50%;background:var(--y);display:none}
.fm-dirty.on{display:inline-block}
.fm-lang{font-size:10px;font-weight:600;letter-spacing:.04em;background:#f5f3ff;color:#7c3aed;border-radius:5px;padding:2px 8px;text-transform:uppercase}
.fm-ed .sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fm-ed .meta{font-size:11px;color:var(--fm-mut);margin-right:4px}
/* multi-file editor tab strip */
.fm-tabs{display:flex;gap:2px;padding:6px 8px 0;overflow-x:auto;background:var(--fm-inset);border-bottom:1px solid var(--fm-bd2);scrollbar-width:thin}
.fm-tabs:empty{display:none}
.fm-tab{display:flex;align-items:center;gap:7px;padding:7px 8px 7px 10px;max-width:220px;border:1px solid transparent;border-bottom:none;border-radius:9px 9px 0 0;cursor:pointer;font-size:12.5px;color:var(--fm-t3);white-space:nowrap;flex-shrink:0;position:relative;top:1px}
.fm-tab:hover{background:var(--fm-hov)}
.fm-tab.on{background:var(--w);border-color:var(--fm-bd2);color:var(--fm-ink);font-weight:600}
.fm-tab .ic{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;flex-shrink:0}
.fm-tab .ic svg{width:12px;height:12px}
.fm-tab .nm{overflow:hidden;text-overflow:ellipsis}
.fm-tab .dt{width:7px;height:7px;border-radius:50%;background:var(--y);flex-shrink:0;display:none}
.fm-tab.dirty .dt{display:block}
.fm-tab.dirty .cl{display:none}
.fm-tab.dirty:hover .dt{display:none}
.fm-tab.dirty:hover .cl{display:grid}
.fm-tab .cl{width:18px;height:18px;border:0;background:transparent;border-radius:5px;display:grid;place-items:center;color:var(--fm-mut);cursor:pointer;flex-shrink:0;padding:0}
.fm-tab .cl svg{width:13px;height:13px}
.fm-tab .cl:hover{background:var(--fm-bd);color:var(--fm-ink)}
.fm-tab-add{flex-shrink:0;align-self:center;width:26px;height:26px;margin:0 4px 4px;border:0;background:transparent;border-radius:7px;display:grid;place-items:center;color:var(--fm-mut);cursor:pointer}
.fm-tab-add:hover{background:var(--fm-hov);color:var(--fm-ink)}
.fm-tab-add svg{width:15px;height:15px}
.fm-menu.fm-tabopen{width:250px;max-height:340px;overflow:auto}
.fm-edbody{position:relative;background:#0f172a;display:flex;height:calc(100vh - 330px);min-height:340px}
.fm-gut{flex-shrink:0;width:48px;padding:14px 0;text-align:right;color:#475569;font-family:ui-monospace,'JetBrains Mono',monospace;font-size:12px;line-height:1.75;user-select:none;overflow:hidden}
.fm-gut div{padding-right:14px}
.fm-edwrap{position:relative;flex:1;overflow:hidden}
.fm-hl,.fm-ta{position:absolute;inset:0;margin:0;border:0;padding:14px 20px 14px 0;font-family:ui-monospace,'JetBrains Mono',monospace;font-size:12px;line-height:1.75;white-space:pre;tab-size:4;box-sizing:border-box}
.fm-hl{pointer-events:none;color:#e2e8f0;overflow:hidden}
.fm-ta{display:block;width:100%;height:100%;background:transparent;color:transparent;caret-color:#e2e8f0;resize:none;outline:none;overflow:auto}
.fm-ta::selection{background:rgba(59,130,246,.35)}
.fm-hl .tk-k{color:#93c5fd}.fm-hl .tk-s{color:#86efac}.fm-hl .tk-f{color:#fbbf24}.fm-hl .tk-c{color:#64748b;font-style:italic}.fm-hl .tk-v{color:#f0abfc}.fm-hl .tk-n{color:#fda4af}
.fm-edfoot{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--fm-bd2);font-size:11px;color:var(--fm-mut);flex-wrap:wrap}
.fm-edfoot kbd{background:var(--fm-bd2);border:1px solid var(--fm-bd3);border-radius:5px;padding:1px 6px;font-size:10px;color:var(--t3);font-family:inherit}
/* dialogs (fixed overlay — tokens inlined, escapes view scope like bku modals) */
.fm-ov{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;overflow-y:auto;padding:46px 16px;animation:bkuOvIn .16s ease}
.fm-ov.open{display:flex}
.fm-dlg{background:var(--w);border:1px solid var(--b1);border-radius:16px;padding:20px;width:100%;max-width:420px;box-shadow:0 24px 64px rgba(0,0,0,.26);animation:bkuMcIn .22s cubic-bezier(.25,.6,.3,1);color:var(--t1);font-size:13px}
.fm-dlg .h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fm-dlg .mi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;color:#fff;background:linear-gradient(150deg,var(--a),var(--ah));box-shadow:0 4px 14px rgba(22,84,210,.25)}
.fm-dlg .mi svg{width:17px;height:17px}
.fm-dlg .t{font-size:15px;font-weight:600;color:var(--t1)}
.fm-dlg .s2{font-size:12px;color:var(--t4);margin-top:1px;font-family:inherit;word-break:break-all}
.fm-dlg .x{margin-left:auto;border:0;background:none;color:var(--t4);cursor:pointer;padding:6px;border-radius:7px;display:grid;place-items:center}
.fm-dlg .x svg{width:15px;height:15px}
.fm-dlg .x:hover{color:var(--t2);background:var(--bg2)}
.fm-din{height:40px;width:100%;border:1px solid var(--b2);border-radius:10px;padding:0 13px;font-size:13px;font-family:inherit;color:var(--t1);background:var(--w);margin-bottom:6px;box-sizing:border-box}
.fm-din:focus{outline:none;border-color:var(--ab);box-shadow:0 0 0 3px var(--ab)}
.fm-dhint{font-size:10.5px;color:var(--t4);line-height:1.5;margin-bottom:14px}
.fm-dft{display:flex;justify-content:flex-end;gap:8px;padding-top:14px;border-top:1px solid var(--bg2)}
/* ── Phase 2 ── */
/* sample-data banner (SSH unreachable → design preview) */
.fm-demo{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:12px;color:var(--y);background:var(--yb);border-bottom:1px solid var(--ybd)}
.fm-demo .d{width:7px;height:7px;border-radius:50%;background:var(--y);flex-shrink:0;animation:bkuPulse 1.6s infinite}
.fm-demo b{font-weight:600}
.fm-demo .dx{margin-left:auto;border:0;background:none;color:var(--y);cursor:pointer;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;padding:0}
.fm-demo .dx:hover{background:var(--ybd)}
.fm-demo .dx svg{width:13px;height:13px}
/* drag & drop zone */
.fm-dz{border:1.5px dashed var(--fm-abd);background:var(--fm-abg);border-radius:14px;padding:26px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--fm-alk);margin-bottom:12px;pointer-events:none}
.fm-dz .di{width:44px;height:44px;border-radius:12px;background:var(--fm-at);display:grid;place-items:center;color:var(--fm-a)}
.fm-dz .di svg{width:19px;height:19px}
.fm-dz b{font-size:13px;font-weight:600}
.fm-dz span{font-size:11.5px;color:#5f79a8}
/* upload progress panel */
.fm-upl{background:var(--w);border:1px solid var(--fm-bd);border-radius:12px;padding:10px 15px;margin-bottom:12px}
.fm-upl .r{display:flex;align-items:center;gap:11px;padding:7px 0}
.fm-upl .r + .r{border-top:1px solid var(--fm-bd2)}
.fm-upl .nm{font-size:12.5px;font-weight:500;color:var(--fm-ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-upl .pc{font-size:11.5px;color:var(--fm-t3);font-variant-numeric:tabular-nums;width:38px;text-align:right}
.fm-upl .pbar{flex:2;height:5px;border-radius:3px;background:var(--bg2);overflow:hidden;min-width:80px}
.fm-upl .pbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--a),var(--a));transition:width .18s ease}
.fm-upl .pbar i.ok{background:var(--g)}
.fm-upl .stag{font-size:10px;font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap}
.fm-upl .stag.up{background:var(--fm-at);color:var(--fm-a)}
.fm-upl .stag.ok{background:var(--gb);color:var(--g)}
.fm-upl .stag.fail{background:var(--rb);color:var(--r)}
/* permissions dialog grid (inside .fm-dlg — inlined colors, escapes view scope) */
.fm-perm{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:8px 14px;font-size:12px;color:var(--t3);margin-bottom:12px;align-items:center}
.fm-perm .hd2{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t4)}
.fm-perm .who{font-weight:600;color:var(--t1);font-size:12px}
.fm-perm .fm-ck{opacity:1;justify-self:start}
.fm-octal{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--t1);background:var(--bg2);border:1px solid var(--b1);border-radius:8px;padding:6px 14px;display:inline-block}

/* ── Phase 3: nav · view toggle · dir-size · search · grid · clipboard · media · trash · details · editor upgrades ── */
/* back / forward */
.fm-nav{display:inline-flex;gap:4px}
.fm-nav button{width:38px;height:48px;border:1px solid var(--fm-bd3);border-radius:10px;background:var(--w);color:var(--fm-t3);display:grid;place-items:center;cursor:pointer;transition:.13s;padding:0}
.fm-bar .fm-pbtn{height:48px}
.fm-nav button svg{width:15px;height:15px}
.fm-nav button:hover:not(:disabled){border-color:var(--fm-faint);background:var(--fm-hov)}
.fm-nav button:disabled{color:var(--fm-faint);cursor:default}
/* list / grid toggle */
.fm-vtog{display:inline-flex;align-items:center;height:48px;background:var(--fm-inset);border:1px solid var(--fm-bd3);border-radius:11px;padding:4px;gap:3px}
.fm-vtog button{height:38px;width:42px;border:0;background:none;border-radius:8px;display:grid;place-items:center;color:var(--fm-mut);cursor:pointer;transition:background .14s,color .14s,box-shadow .14s;padding:0}
.fm-vtog button svg{width:16px;height:16px}
.fm-vtog button:hover{color:var(--fm-t3)}
.fm-vtog button.on{background:var(--w);color:var(--fm-a);box-shadow:0 1px 2px rgba(16,24,40,.10),0 0 0 1px rgba(16,24,40,.045)}
.fm-vtog button.on:hover{color:var(--fm-a)}
/* directory size (on demand) */
.dsz{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--fm-a);cursor:pointer}
.dsz svg{width:12px;height:12px}
.dsz:hover{color:var(--fm-ah)}
.dsz-val{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.dsz-val .spin,.fm-lint .spin{width:11px;height:11px;border:2px solid var(--fm-abd);border-top-color:var(--fm-a);border-radius:50%;animation:fmSpin .7s linear infinite;display:inline-block;box-sizing:border-box}
@keyframes fmSpin{to{transform:rotate(360deg)}}
/* search strip + whole-tree results */
.fm-srow{display:flex;align-items:center;gap:10px;padding:9px 15px;border-bottom:1px solid var(--fm-bd2);font-size:11px;color:var(--fm-mut);background:var(--fm-inset)}
.fm-srow .seg2,.fm-res .seg2{margin-left:auto;display:inline-flex;background:var(--w);border:1px solid var(--fm-bd3);border-radius:8px;padding:2px}
.fm-srow .seg2 span,.fm-res .seg2 span{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:6px;color:var(--fm-mut);cursor:pointer}
.fm-srow .seg2 span.on,.fm-res .seg2 span.on{background:var(--fm-abg);color:var(--fm-a);cursor:default}
.fm-res .rh{display:flex;align-items:center;gap:8px;padding:10px 15px;background:var(--fm-inset);border-bottom:1px solid var(--fm-bd2);font-size:11px;color:var(--fm-mut)}
.fm-res .rh b{color:var(--fm-t3);font-weight:600}
.fm-rr{display:flex;align-items:center;gap:11px;padding:9px 15px;border-top:1px solid var(--fm-bd2);cursor:pointer;transition:background .1s}
.fm-rr:first-of-type{border-top:0}
.fm-rr:hover{background:var(--fm-hov)}
.fm-rr .rn{font-size:13px;color:var(--fm-ink);font-weight:500}
.fm-rr .rn mark{background:var(--yb);color:var(--y);border-radius:3px;padding:0 1px}
.fm-rr .rp{font-family:inherit;font-size:11px;color:var(--fm-mut);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-rr .rs{margin-left:auto;font-size:11px;color:var(--fm-t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.fm-row.flash,.fm-gc.flash{animation:fmFlash 1.6s ease}
@keyframes fmFlash{0%,100%{background:transparent}18%,60%{background:var(--fm-at)}}
/* single-click selects / double-click opens → don't select filename text on dblclick */
.fm-row,.fm-gc{-webkit-user-select:none;user-select:none}
/* grid view */
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:12px;padding:14px}
/* listing fade-in on navigation / view switch (gated in JS so filtering doesn't flicker) */
@keyframes fmFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#fm-list.fm-anim{animation:fmFadeUp .28s cubic-bezier(.2,.7,.3,1)}
/* grid thumbnails fade in as their image loads */
@keyframes fmThumbIn{from{opacity:0}to{opacity:1}}
.fm-gc .th img{animation:fmThumbIn .3s ease}
@media (prefers-reduced-motion:reduce){#fm-list.fm-anim,.fm-gc .th img{animation:none}}
.fm-gc{border:1px solid var(--fm-bd);border-radius:12px;background:var(--w);padding:12px;text-align:center;position:relative;cursor:pointer;transition:.13s}
.fm-gc:hover{border-color:var(--fm-abd);box-shadow:0 3px 12px rgba(16,24,40,.07)}
.fm-gc.sel{border-color:var(--fm-abd);background:var(--fm-abg);box-shadow:0 0 0 3px var(--fm-aring)}
.fm-gc.cut{opacity:.5}
.fm-gc .th{height:72px;border-radius:9px;display:grid;place-items:center;margin-bottom:9px;overflow:hidden}
.fm-gc .th svg{width:26px;height:26px}
.fm-gc .th img{width:100%;height:100%;object-fit:cover}
.fm-gc .gn{font-size:12px;font-weight:500;color:var(--fm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-gc .gm{font-size:10.5px;color:var(--fm-mut);margin-top:2px}
.fm-gc .ext{position:absolute;top:9px;left:9px;font-family:ui-monospace,monospace;font-size:9px;font-weight:700;color:#fff;background:rgba(15,23,42,.55);border-radius:4px;padding:1px 5px;text-transform:uppercase}
.fm-gc .gck{position:absolute;top:8px;right:8px;opacity:0;transition:.12s}
.fm-gc:hover .gck,.fm-gc.sel .gck,#view-filemanager.fm-selecting .fm-gc .gck{opacity:1}
/* clipboard bar */
.fm-clip{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:240;background:#0f172a;color:#fff;border-radius:13px;padding:9px 10px 9px 16px;display:inline-flex;align-items:center;gap:14px;box-shadow:0 14px 40px rgba(16,24,40,.3);animation:bkuSaveBarUp .22s cubic-bezier(.25,.6,.3,1)}
.fm-clip .ci{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0}
.fm-clip .ci svg{width:15px;height:15px;color:#93c5fd}
.fm-clip .cnt{font-size:12.5px;font-weight:500;white-space:nowrap}
.fm-clip .cnt b{font-weight:600}
.fm-clip .cnt .mut{color:var(--t4);font-family:ui-monospace,monospace;font-size:11px}
.fm-clip .pp{background:var(--a);border:none;color:#fff;height:32px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;font-family:inherit;cursor:pointer}
.fm-clip .pp:hover{background:var(--ah)}
.fm-clip .pp svg{width:13px;height:13px}
.fm-clip .gh{border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;height:32px;padding:0 13px;border-radius:9px;font-size:12px;font-weight:500;font-family:inherit;cursor:pointer}
.fm-clip .gh:hover{background:rgba(255,255,255,.12)}
/* media viewer */
.fm-media{position:fixed;inset:0;z-index:1300;background:rgba(15,23,42,.62);display:none;align-items:center;justify-content:center;padding:34px 16px;animation:bkuOvIn .16s ease}
.fm-media.open{display:flex}
.fm-view{background:var(--w);border:1px solid var(--fm-bd);border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.35);width:100%;max-width:820px;max-height:calc(100vh - 68px);display:flex;flex-direction:column;animation:bkuMcIn .22s cubic-bezier(.25,.6,.3,1)}
.fm-view .vh{display:flex;align-items:center;gap:11px;padding:12px 15px;border-bottom:1px solid var(--fm-bd2);flex-shrink:0}
.fm-view .vh .vi{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.fm-view .vh .vi svg{width:16px;height:16px}
.fm-view .vh .vn{font-size:13px;font-weight:600;color:var(--fm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-view .vh .vm{font-size:11px;color:var(--fm-mut);margin-top:1px;font-variant-numeric:tabular-nums}
.fm-view .vh .va{margin-left:auto;display:flex;gap:7px;flex-shrink:0}
.fm-view .stagearea{background:#0f172a;flex:1;min-height:260px;display:grid;place-items:center;position:relative;overflow:hidden}
.fm-view .fm-media-body{max-width:100%;max-height:100%;display:grid;place-items:center;padding:18px}
.fm-media-img{max-width:100%;max-height:calc(100vh - 250px);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.4);display:block}
.fm-media-vid{max-width:100%;max-height:calc(100vh - 250px);border-radius:8px;background:#000}
.fm-media-pdf{width:min(760px,84vw);height:calc(100vh - 220px);border:0;border-radius:8px;background:#fff}
.fm-media-aud{display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px}
.fm-media-aud .ai{width:72px;height:72px;border-radius:18px;display:grid;place-items:center}
.fm-media-aud .ai svg{width:32px;height:32px}
.fm-view .nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
.fm-view .nav svg{width:16px;height:16px}
.fm-view .nav:hover{background:rgba(255,255,255,.24)}
.fm-view .nav.l{left:14px}.fm-view .nav.r{right:14px}
.fm-view .vcount{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.8);background:rgba(0,0,0,.4);border-radius:999px;padding:3px 11px;font-variant-numeric:tabular-nums}
.fm-view .strip{display:flex;gap:7px;padding:11px 15px;border-top:1px solid var(--fm-bd2);overflow-x:auto;flex-shrink:0;background:var(--w)}
.fm-view .strip .t{width:54px;height:40px;border-radius:6px;flex-shrink:0;overflow:hidden;opacity:.55;border:2px solid transparent;cursor:pointer;transition:.12s;background:#0f172a}
.fm-view .strip .t:hover{opacity:.85}
.fm-view .strip .t.on{opacity:1;border-color:var(--fm-a)}
.fm-view .strip .t .ph{width:100%;height:100%;background:#334155;background-size:cover;background-position:center}
.fm-view .strip .t .ph.tk{display:grid;place-items:center;color:#93c5fd}
.fm-view .strip .t .ph.tk svg{width:14px;height:14px}
/* trash */
.fm-trash-note{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--y);background:var(--yb);border-bottom:1px solid var(--ybd);padding:9px 15px}
.fm-trash-note svg{width:14px;height:14px;color:var(--y)}
.fm-trash-note .ef{margin-left:auto;font-size:11px;font-weight:600;color:var(--y);border:1px solid var(--ybd);background:var(--yb);border-radius:7px;padding:4px 10px;cursor:pointer;font-family:inherit}
.fm-trash-note .ef:hover{background:var(--ybd)}
.fm-tlist{padding:2px 15px}
.trow{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 0;border-top:1px solid var(--fm-bd2)}
.trow:first-of-type{border-top:0}
.trow .tn{font-size:13.5px;font-weight:600;color:var(--fm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .tp{font-size:11.5px;color:var(--fm-mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .tacts{display:flex;gap:8px;align-items:center}
.trestore{height:32px;padding:0 13px;border-radius:8px;border:1px solid var(--fm-bd3);background:var(--w);color:var(--fm-ink);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;transition:background .14s,border-color .14s,box-shadow .14s}
.trestore svg{width:13px;height:13px;color:var(--fm-a)}
.trestore:hover{background:var(--fm-abg);border-color:var(--fm-abd);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.tdelforever{height:32px;width:32px;border-radius:8px;border:1px solid var(--fm-bd3);background:var(--w);color:var(--fm-mut);display:grid;place-items:center;cursor:pointer;transition:color .14s,border-color .14s,background .14s}
.tdelforever svg{width:14px;height:14px}
.tdelforever:hover{color:var(--r);border-color:var(--rbd);background:var(--rb)}
/* file details drawer */
.fm-info-ov{position:fixed;inset:0;z-index:1180;background:rgba(15,23,42,.28);opacity:0;pointer-events:none;transition:opacity .2s}
.fm-info-ov.open{opacity:1;pointer-events:auto}
.fm-info-drawer{position:fixed;top:0;right:-400px;width:360px;max-width:92vw;height:100vh;z-index:1190;padding:16px;transition:right .24s cubic-bezier(.25,.6,.3,1);overflow-y:auto}
.fm-info-drawer.open{right:0}
/* ── Trash popup (modal) ── */
.fm-trash-ov{position:fixed;inset:0;z-index:1300;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:24px 16px;animation:bkuOvIn .16s ease;backdrop-filter:blur(1.5px)}
.fm-trash-ov.open{display:flex}
.fm-trashm{background:var(--w);border-radius:16px;width:680px;max-width:100%;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(15,23,42,.30);overflow:hidden;animation:fmTrashPop .24s cubic-bezier(.2,.75,.3,1)}
@keyframes fmTrashPop{from{opacity:0;transform:translateY(16px) scale(.965)}to{opacity:1;transform:none}}
.fm-tm-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--fm-bd2);background:var(--bg2)}
.fm-tm-head .ic{width:38px;height:38px;border-radius:10px;background:var(--rb);color:var(--r);display:grid;place-items:center;flex-shrink:0}
.fm-tm-head .ic svg{width:18px;height:18px}
.fm-tm-head .ttl{flex:1;min-width:0}
.fm-tm-head .ttl .t{font-size:15px;font-weight:650;color:var(--fm-ink);line-height:1.2}
.fm-tm-head .ttl .s{font-size:11.5px;color:var(--fm-mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-tm-empty{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--r);border:1px solid var(--rbd);background:var(--rb);border-radius:8px;padding:7px 12px;cursor:pointer;font-family:inherit;flex-shrink:0;transition:background .14s,border-color .14s}
.fm-tm-empty:hover{background:var(--rb);border-color:var(--rbd)}
.fm-tm-empty svg{width:14px;height:14px}
.fm-tm-x{width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:var(--fm-mut);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .14s,color .14s}
.fm-tm-x:hover{background:var(--fm-hov);color:var(--fm-ink)}
.fm-tm-x svg{width:17px;height:17px}
.fm-tm-body{overflow-y:auto;padding:6px 20px 16px}
.fm-tm-body .fm-tlist{padding:0}
.fm-tm-err{padding:26px 12px;text-align:center;color:var(--r);font-size:13px}
.fm-tm-empty-state{text-align:center;padding:42px 16px 46px}
.fm-tm-empty-state .eico{width:54px;height:54px;border-radius:15px;background:var(--fm-hov);color:var(--fm-mut);display:grid;place-items:center;margin:0 auto 13px}
.fm-tm-empty-state .eico svg{width:24px;height:24px}
.fm-tm-empty-state .t{font-size:14px;font-weight:600;color:var(--fm-ink)}
.fm-tm-empty-state .s{font-size:12px;color:var(--fm-mut);margin-top:2px}
.trow.tsk{pointer-events:none}
@keyframes fmTin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.fm-tin{animation:fmTin .28s ease both}
@media (prefers-reduced-motion:reduce){.fm-trashm,.fm-tin{animation:none}}
/* Destructive red hover for the header Trash button */
#view-filemanager .fm-gbtn-trash:hover{background:var(--rb);border-color:var(--rbd);color:var(--r)}
#view-filemanager .fm-gbtn-trash:hover svg{color:var(--r)}
/* ── Upload popup (modal) ── */
.fm-up-ov{position:fixed;inset:0;z-index:1300;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:24px 16px;animation:bkuOvIn .16s ease;backdrop-filter:blur(1.5px)}
.fm-up-ov.open{display:flex}
.fm-upm{background:var(--w);border-radius:16px;width:560px;max-width:100%;max-height:84vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(15,23,42,.30);overflow:hidden;animation:fmTrashPop .24s cubic-bezier(.2,.75,.3,1)}
.fm-upm-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--fm-bd2);background:var(--bg2)}
.fm-upm-head .ic{width:38px;height:38px;border-radius:10px;background:var(--fm-abg);color:var(--fm-a);display:grid;place-items:center;flex-shrink:0}
.fm-upm-head .ic svg{width:18px;height:18px}
.fm-upm-head .ttl{flex:1;min-width:0}
.fm-upm-head .ttl .t{font-size:15px;font-weight:650;color:var(--fm-ink);line-height:1.2}
.fm-upm-head .ttl .s{font-size:11.5px;color:var(--fm-mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-upm-head .ttl .s code{font-family:ui-monospace,monospace;color:var(--fm-t3);background:var(--fm-hov);padding:1px 6px;border-radius:5px}
.fm-upm-x{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--fm-mut);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .14s,color .14s}
.fm-upm-x:hover{background:var(--fm-hov);color:var(--fm-ink)}
.fm-upm-x svg{width:17px;height:17px}
.fm-upm-body{overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.fm-upm-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;border-top:1px solid var(--fm-bd2)}
.fm-upm-ft .hint{font-size:11px;color:var(--fm-mut);min-width:0}
.fm-upz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:26px 16px;border:1.5px dashed var(--fm-bd3);border-radius:13px;background:var(--fm-hov);cursor:pointer;transition:border-color .15s,background .15s}
.fm-upz:hover{border-color:var(--fm-abd);background:var(--fm-abg)}
.fm-upz.over{border-color:var(--fm-a);background:var(--fm-abg);box-shadow:inset 0 0 0 3px var(--fm-aring)}
.fm-upz .ic{width:46px;height:46px;border-radius:13px;background:var(--w);border:1px solid var(--fm-bd2);color:var(--fm-a);display:grid;place-items:center;margin-bottom:3px}
.fm-upz .ic svg{width:22px;height:22px}
.fm-upz .t{font-size:13.5px;font-weight:600;color:var(--fm-ink)}
.fm-upz .s{font-size:12px;color:var(--fm-mut)}
.fm-upz .lnk{color:var(--fm-a);font-weight:600;text-decoration:underline}
.fm-ups{background:var(--fm-abg);border:1px solid var(--fm-abd);border-radius:12px;padding:12px 14px}
.fm-ups.ok{background:var(--gb);border-color:var(--gbd)}
.fm-ups .top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.fm-ups .lbl{font-size:13px;font-weight:650;color:var(--fm-ink)}
.fm-ups .rem{font-size:11.5px;font-weight:600;color:var(--fm-a);flex-shrink:0}
.fm-ups.ok .rem{color:var(--g)}
.fm-ups .obar{height:7px;border-radius:99px;background:var(--ab);overflow:hidden}
.fm-ups.ok .obar{background:var(--gbd)}
.fm-ups .obar i{display:block;height:100%;border-radius:99px;background:var(--fm-a);transition:width .2s ease}
.fm-ups.ok .obar i{background:var(--g)}
.fm-ups .sub{font-size:11px;color:var(--fm-mut);margin-top:7px}
.fm-upl-list{display:flex;flex-direction:column;gap:8px}
.fm-upr{display:grid;grid-template-columns:30px minmax(0,1fr) 84px 40px 62px;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--fm-bd2);border-radius:10px}
.fm-upr .ico{width:30px;height:30px;flex-shrink:0}
.fm-upr .meta{min-width:0}
.fm-upr .nm{font-size:12.5px;font-weight:500;color:var(--fm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-upr .sz{font-size:10.5px;color:var(--fm-mut);margin-top:1px}
.fm-upr .prog .bar{height:6px;border-radius:99px;background:var(--fm-bd2);overflow:hidden}
.fm-upr .prog .bar i{display:block;height:100%;background:var(--fm-a);border-radius:99px;transition:width .18s ease}
.fm-upr[data-st="done"] .prog .bar i{background:var(--g)}
.fm-upr[data-st="fail"] .prog .bar i,.fm-upr[data-st="toolarge"] .prog .bar i{background:var(--r)}
.fm-upr .pct{font-size:11px;font-variant-numeric:tabular-nums;color:var(--fm-t3);text-align:right}
.fm-upr .st{font-size:9.5px;font-weight:600;text-align:center;padding:3px 0;border-radius:6px;letter-spacing:.01em}
.fm-upr .st-waiting{color:var(--fm-mut);background:var(--fm-hov)}
.fm-upr .st-uploading{color:var(--fm-a);background:var(--fm-abg)}
.fm-upr .st-done{color:var(--g);background:var(--gb)}
.fm-upr .st-fail,.fm-upr .st-toolarge{color:var(--r);background:var(--rb)}
.fm-info{background:var(--w);border:1px solid var(--fm-bd);border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(16,24,40,.18)}
.fm-info .ih{display:flex;align-items:center;gap:12px;padding:15px;border-bottom:1px solid var(--fm-bd2)}
.fm-info .ih .tt{font-size:13.5px;font-weight:600;color:var(--fm-ink)}
.fm-info .ih .x{margin-left:auto;color:var(--fm-mut);width:28px;height:28px;border-radius:7px;display:grid;place-items:center;border:0;background:none;cursor:pointer;flex-shrink:0}
.fm-info .ih .x svg{width:15px;height:15px}
.fm-info .ih .x:hover{background:var(--fm-hov);color:var(--fm-t3)}
.fm-info .body{padding:6px 15px 12px}
.fm-dl{display:grid;grid-template-columns:92px 1fr;gap:0}
.fm-dl dt{font-size:11.5px;color:var(--fm-mut);padding:9px 0;border-top:1px solid var(--fm-bd2)}
.fm-dl dd{font-size:12.5px;color:var(--fm-ink);padding:9px 0;margin:0;border-top:1px solid var(--fm-bd2);text-align:right;font-variant-numeric:tabular-nums;word-break:break-word}
.fm-dl dt:first-of-type,.fm-dl dt:first-of-type + dd{border-top:0}
.fm-dl dd .mono{font-family:ui-monospace,monospace;font-size:11px;color:var(--fm-t3)}
.fm-dl dd .perm-b{font-family:ui-monospace,monospace;background:var(--bg2);border:1px solid var(--b1);border-radius:6px;padding:2px 7px;font-size:11px}
.fm-info .iacts{display:flex;gap:8px;padding:13px 15px;border-top:1px solid var(--fm-bd2)}
.fm-info .iacts .fm-gbtn{flex:1;justify-content:center;height:34px}
/* context menu: kbd hints + cursor-anchored variant (rendered on <body>) */
.fm-menu a .kbd{margin-left:auto;font-family:ui-monospace,monospace;font-size:10px;color:var(--fm-mut)}
.fm-menu.fixed{position:fixed;z-index:2000;--fm-ink:var(--t1);--fm-t2:var(--t2);--fm-t3:var(--t3);--fm-mut:var(--t4);--fm-abg:var(--ab);--fm-hov:var(--bg2);--fm-bd2:var(--bg2);--fm-rt:var(--r);--fm-rbg:var(--rb)}
/* editor: lint pill · theme picker · fullscreen */
.fm-lint{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.fm-lint svg{width:12px;height:12px}
.fm-lint.idle{background:var(--fm-bd2);color:var(--fm-mut)}
.fm-lint.chk{background:var(--fm-at);color:var(--fm-a)}
.fm-lint.ok{background:var(--gb);color:var(--g)}
.fm-lint.err{background:var(--rb);color:var(--r)}
.fm-lint.err:hover{background:var(--rb)}
/* live-validation error line: red gutter number + underline band in the code */
.fm-gut div.err{color:#f87171;font-weight:700}
.fm-errline{position:absolute;left:0;right:0;pointer-events:none;background:rgba(244,63,94,.10);box-shadow:inset 0 -2px 0 rgba(244,63,94,.6)}
.fm-theme{height:34px;border:1px solid var(--fm-bd3);border-radius:9px;background:var(--w);padding:0 10px;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--fm-t3);cursor:pointer;font-family:inherit}
.fm-theme:hover{border-color:var(--fm-faint)}
.fm-theme svg{width:12px;height:12px;color:var(--fm-mut)}
.fm-theme .sw,.fm-theme-menu .sw{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.12);flex-shrink:0}
.sw-midnight{background:linear-gradient(135deg,#0f172a 50%,#1e293b 50%)}
.sw-slate{background:linear-gradient(135deg,#1e293b 50%,#334155 50%)}
.sw-light{background:linear-gradient(135deg,#f8fafc 50%,#e2e8f0 50%)}
.fm-theme-menu{position:absolute;top:calc(100% + 6px);right:0;width:168px}
.fm-icb{width:34px;height:34px;border-radius:9px;border:1px solid var(--fm-bd3);background:var(--w);color:var(--fm-t3);display:grid;place-items:center;cursor:pointer}
.fm-icb svg{width:15px;height:15px}
.fm-icb:hover{border-color:var(--fm-faint);background:var(--fm-hov)}
/* editor colour themes */
.fm-ed.thm-slate .fm-edbody{background:#1e293b}
.fm-ed.thm-slate .fm-gut{color:#64748b}
.fm-ed.thm-light .fm-edbody{background:#f8fafc}
.fm-ed.thm-light .fm-gut{color:#94a3b8}
.fm-ed.thm-light .fm-hl{color:#0f172a}
.fm-ed.thm-light .fm-ta{caret-color:#0f172a}
.fm-ed.thm-light .fm-hl .tk-k{color:#2563eb}
.fm-ed.thm-light .fm-hl .tk-s{color:#15803d}
.fm-ed.thm-light .fm-hl .tk-f{color:#b45309}
.fm-ed.thm-light .fm-hl .tk-c{color:#94a3b8}
.fm-ed.thm-light .fm-hl .tk-v{color:#9333ea}
.fm-ed.thm-light .fm-hl .tk-n{color:#be123c}
/* editor as a centered modal popup over the file list */
#fm-editor{display:none}
#fm-editor.open{position:fixed;inset:0;z-index:1240;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;padding:30px 20px;animation:bkuOvIn .16s ease}
#fm-editor.open .fm-ed{width:100%;max-width:1080px;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.4);animation:bkuMcIn .22s cubic-bezier(.25,.6,.3,1)}
#fm-editor.open .fm-edbody{flex:1;height:auto;min-height:300px}
/* fullscreen toggle = a near-full modal */
#fm-editor.open.fm-ed-full{padding:12px}
#fm-editor.open.fm-ed-full .fm-ed{max-width:100%;max-height:calc(100vh - 24px)}
/* File Manager — keyboard, named controls, guarded rows (Oct 18 2026 audit) */
.fm-row:focus-within .fm-act{opacity:1}
.fm-gc:focus-within .gck{opacity:1}
.fm-row:focus-visible,.fm-gc:focus-visible,.fm-rr:focus-visible,.fm-tab:focus-visible,#fm-media .strip .t:focus-visible{outline:2px solid var(--fm-a,var(--a));outline-offset:-2px}
.fm-ck:focus-visible,.fm-upz:focus-visible,.fm-iab:focus-visible,.dsz:focus-visible{outline:2px solid var(--fm-a,var(--a));outline-offset:2px}
.fm-iab:disabled{opacity:.4;cursor:not-allowed}
button.dsz{border:0;background:transparent;padding:0;font-family:inherit}
button.dsz:disabled{cursor:default;color:var(--fm-mut)}
.fm-srow .seg2 button,.fm-res .seg2 button{font-family:inherit;border:0;background:transparent;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:6px;color:var(--fm-mut);cursor:pointer}
.fm-srow .seg2 button.on,.fm-res .seg2 button.on{background:var(--fm-abg);color:var(--fm-a);cursor:default}
.fm-menu a:focus{outline:none;background:var(--fm-abg)}
.fm-menu a:focus-visible{box-shadow:inset 0 0 0 2px var(--a)}
.fm-menu a[aria-disabled]{color:var(--fm-mut);cursor:not-allowed}
.fm-menu a[aria-disabled]:hover{background:transparent}
.fm-menu .fm-mnote{padding:7px 11px 8px;font-size:11.5px;line-height:1.45;color:var(--fm-mut);max-width:240px}
.fm-ed-ro{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:12px;color:var(--t2);background:var(--yb);border-bottom:1px solid var(--ybd)}
.fm-ed-ro svg{width:14px;height:14px;flex-shrink:0;color:var(--y)}
.fm-ed .fm-pbtn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.fm-srv-st{font-size:10.5px;font-weight:600;color:var(--t4);flex-shrink:0;white-space:nowrap}
.fm-srv-st.off{color:var(--r)}
.fm-upr .acts{grid-column:span 2;display:flex;gap:6px;justify-content:flex-end}
.fm-upr .acts .fm-gbtn{height:28px;padding:0 10px;font-size:11.5px}
.fm-upr .st-exists{color:var(--y);background:var(--yb)}
.fm-upr .st-skipped{color:var(--fm-mut);background:var(--fm-hov)}
.fm-ups-acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.fm-ups-acts .fm-gbtn{height:30px;font-size:12px}
@media (max-width:820px){.fm-upr .acts .fm-gbtn,.fm-ups-acts .fm-gbtn{min-height:44px}}
/* file-type brand icons (recolored) sizing */
.fm-bico{width:16px;height:16px;object-fit:contain;display:block}
.fm-gc .th img.fm-bico{width:26px;height:26px;object-fit:contain}
/* unsaved-changes / save prompt — renders above the editor modal, on <body> so it needs its own fm tokens */
.fm-unsaved-ov{position:fixed;inset:0;z-index:1450;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;padding:20px;animation:bkuOvIn .16s ease;
  --fm-a:var(--a);--fm-ah:var(--ah);--fm-t3:var(--t3);--fm-bd3:var(--b2);--fm-hov:var(--bg2);--fm-faint:var(--b2);--fm-ink:var(--t1);--fm-mut:var(--t4);--fm-inset:var(--bg2)}
.fm-unsaved-ov .fm-pbtn:disabled{opacity:.5;cursor:default;box-shadow:none}
.fm-dlg .mi.warn{background:linear-gradient(150deg,var(--y),var(--y));box-shadow:0 4px 14px rgba(217,119,6,.28)}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1300;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--w);border-radius:var(--radius);width:440px;max-width:95vw;max-height:90vh;box-shadow:var(--shadow-lg);transform:scale(.96);transition:transform .2s;display:flex;flex-direction:column;overflow:hidden;}
.modal.wide{width:540px;}
/* Extra-large modal (e.g. the full provisioning log) — meant for big viewing. */
.modal.modal-xl{width:980px;max-width:94vw;}
.modal-overlay.open .modal{transform:scale(1);}
/* The shared frame carries the modern header anatomy itself: a border under
   the title block and a close button. Pages used to bolt those on per-modal
   (.sdh-modal-head, .reg-modal-head), so every openModal caller that did not
   opt in got the pre-modernization chrome — no border, no way out but Cancel
   or Esc. Those decorators still run; they simply hide this button (below)
   rather than stacking a second one. */
.modal-head{position:relative;padding:20px 52px 14px 24px;flex-shrink:0;border-bottom:1px solid var(--b1);}
.modal-x{position:absolute;top:16px;right:16px;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--t3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s;}
.modal-x:hover{background:var(--ab);color:var(--t1);}
.modal-x:focus-visible{outline:2px solid var(--a);outline-offset:-2px;}
/* Only a header that brings its OWN close button suppresses this one. The
   registry header (.reg-modal-head) adds an icon badge and nothing else, so it
   keeps this button — hiding it there left those modals with no way out but
   Cancel or Escape, which is the very thing this button exists to fix. */
.sdh-modal-head .modal-x{display:none;}
.modal-title{font-family:var(--font);font-size:17px;font-weight:700;color:var(--t1);}
.modal-sub{font-size:12.5px;color:var(--t3);margin-top:3px;}
.modal-sub:empty{display:none;}
.modal-body{padding:16px 24px 4px;overflow-y:auto;flex:1;}
/* An empty body (plain confirm modals: title + sub + footer) must not add a
   16px gap under the header's new border. */
.modal-body:empty{padding-top:0;}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid var(--b1);background:var(--bg2);flex-shrink:0;}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:500;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s,visibility 0s linear .25s;}
.drawer-overlay.open{opacity:1;pointer-events:all;visibility:visible;transition:opacity .2s,visibility 0s;}
.drawer{position:fixed;top:0;right:-480px;width:460px;max-width:95vw;height:100vh;background:var(--w);box-shadow:-8px 0 30px rgba(0,0,0,.12);z-index:501;transition:right .25s ease;display:flex;flex-direction:column;}
.drawer-overlay.open .drawer{right:0;}
.drawer-head{padding:20px 22px 14px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.drawer-head h3{font-family:var(--font);font-size:16px;font-weight:700;color:var(--t1);margin:0;}
.drawer-body{flex:1;overflow-y:auto;padding:16px 22px;}
.drawer-foot{padding:14px 22px;border-top:1px solid var(--b1);flex-shrink:0;}


/* ── STAT STRIP ── */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:24px;gap:14px;position:relative;}
/* Dashboard KPI strip: only 4 of 6 cards are visible by default, so flex keeps
   them flush — always filling the row as equal, larger cards. Scoped to
   #stat-strip so other pages' .stat-strip grids are untouched. */
#stat-strip{display:flex;flex-wrap:wrap;gap:16px;}
#stat-strip > .sc{flex:1 1 200px;min-width:0;padding:18px 20px;}
@media(max-width:760px){ #stat-strip > .sc{flex:1 1 140px;} }
.sc{padding:22px 24px 20px;position:relative;transition:all .2s ease;cursor:pointer;background:var(--w);border:1px solid var(--b1);border-radius:var(--radius);box-shadow:var(--shadow);border-top:3px solid var(--b1);}
.sc:hover{box-shadow:var(--shadow-md);}
.sc.c0{border-top-color:var(--a);}
.sc.c1{border-top-color:var(--g);}
.sc.c2{border-top-color:var(--p);}
.sc.c3{border-top-color:var(--y);}
.sc.c4{border-top-color:var(--r);}
.sc:last-child{border-right:none;}
.sc:hover{background:var(--bg);}
.sc:active{transform:translateY(0);}
.sc::before{display:none;}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;}
.sc-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);}
.sc-ico{width:30px;height:30px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sc-ico svg{width:14px;height:14px;}
.sc-ico.i0{background:var(--ab);color:var(--a);}
.sc-ico.i1{background:var(--gb);color:var(--g);}
.sc-ico.i2{background:var(--pb);color:var(--p);}
.sc-ico.i3{background:var(--yb);color:var(--y);}
.sc-ico.i4{background:var(--rb);color:var(--r);}
.sc-val{font-family:var(--font);font-size:28px;font-weight:800;color:var(--t1);letter-spacing:-1.5px;line-height:1;}
.sc-desc{font-size:11.5px;color:var(--t3);margin-top:5px;}
.kpi-trend{display:inline-flex;align-items:center;font-size:10px;font-weight:700;margin-left:4px;vertical-align:middle;}
.kpi-trend.up{color:var(--g);}
.kpi-trend.down{color:var(--r);}
.kpi-trend.flat{color:var(--t3);}
.sc-pill{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:20px;margin-top:8px;}
.sc-pill.g{background:var(--gb);color:var(--g);}
.sc-pill.y{background:var(--yb);color:var(--y);}
.sc-pill.r{background:var(--rb);color:var(--r);}
.sc-pill.b{background:var(--blb);color:var(--bl);}

/* ── CARD ── */
.card{background:var(--w);border:none;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .25s ease,transform .25s ease;}
.card:hover{box-shadow:var(--shadow-md);}
.ch{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--b1);}
.ct{font-family:var(--font);font-size:14px;font-weight:700;color:var(--t1);letter-spacing:-.3px;}
.csb{font-size:11.5px;color:var(--t3);margin-top:2px;}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{padding:10px 16px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--t4);background:transparent;border-bottom:1px solid var(--b1);text-align:left;white-space:nowrap;}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--b1);font-size:14px;color:var(--t2);vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background .12s ease;}
.tbl tbody tr:nth-child(even) td{background:transparent;}
.tbl tbody tr:hover td{background:rgba(0,0,0,.015) !important;}

/* Servers table — mockup chrome: filter tabs + white card-wrapped table */
.srv-tabs{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--bg2);border:1px solid var(--b1);border-radius:var(--radius-sm);padding:3px;margin-bottom:14px;width:fit-content;max-width:100%;}
.srv-tabs .tab{display:inline-flex;align-items:center;gap:6px;}
.srv-tabs .tab-count{font-size:11px;font-weight:600;color:var(--t4);background:var(--w);border-radius:9px;padding:0 6px;line-height:16px;min-width:16px;text-align:center;}
.srv-tabs .tab.on .tab-count{color:var(--a);background:var(--ab);}
.srv-table-card{background:var(--w);border:1px solid var(--b1);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
/* Cards / Compare view toggle in the Servers header: bordered segmented control. */
#view-servers .ph .tabs{background:var(--bg2);border:1px solid var(--b1);}
.srv-tbl thead th{background:var(--bg2);color:var(--t2);font-size:12px;font-weight:700;letter-spacing:.4px;border-bottom:1px solid var(--b1);padding:11px 18px;}
/* Databases table: white (card-surface) header so it doesn't melt into the page bg */
.srv-tbl.db-tbl thead th{background:var(--w);}
.srv-tbl tbody td{padding:13px 18px;border-bottom:1px solid var(--b1);color:var(--t1);}
.srv-tbl tbody tr:last-child td{border-bottom:none;}
.srv-tbl tbody tr:hover td{background:var(--ab) !important;}
:is(.srv-tbl,.sd-app-tbl) .ip-btn{font-family:var(--mono);font-size:14px;background:transparent;border:none;padding:2px 0;cursor:pointer;color:var(--t2);}
:is(.srv-tbl,.sd-app-tbl) .ip-btn:hover{text-decoration:underline;}
:is(.srv-tbl,.sd-app-tbl) .ip-btn.copied{color:var(--g);}
:is(.srv-tbl,.sd-app-tbl) .srv-sites-link{color:var(--a);font-weight:600;cursor:pointer;}
:is(.srv-tbl,.sd-app-tbl) .srv-sites-link:hover{text-decoration:underline;}
.srv-tbl .srv-reboot-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:1px solid var(--b1);background:var(--w);color:var(--t2);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;}
.srv-tbl .srv-reboot-btn:hover{background:var(--bg2);border-color:var(--t4);color:var(--t1);}

/* ── Locked server card (Cards view): icon header + CPU chart hero + RAM/Disk trend tiles ── */
.g-srv{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.srv-card2{background:var(--w);border:1px solid var(--b1);border-radius:var(--radius);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:border-color .15s ease,box-shadow .15s ease;}
.srv-card2:hover{border-color:var(--b2);box-shadow:var(--shadow);}
.sc2-head{display:flex;align-items:center;gap:11px;padding:15px 16px 12px;}
.sc2-ico{width:34px;height:34px;border-radius:8px;background:var(--bg2);border:1px solid var(--b1);color:var(--t2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sc2-ico img{display:block;}
.sc2-id{flex:1;min-width:0;}
.sc2-name{font-size:15px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px;}
.sc2-type{font-size:11px;font-weight:600;color:var(--t3);background:var(--bg2);padding:1px 7px;border-radius:6px;}
.sc2-ip{font-size:12px;color:var(--t3);font-family:var(--mono);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc2-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0;}
.sc2-badge .sc2-dot{width:6px;height:6px;border-radius:50%;}
.sc2-badge.ok{background:var(--gb);color:var(--g);}
.sc2-badge.ok .sc2-dot{background:var(--g);}
.sc2-badge.wn{background:var(--yb);color:var(--y);}
.sc2-badge.wn .sc2-dot{background:var(--y);}
.sc2-badge.dn{background:var(--rb);color:var(--r);}
.sc2-badge.dn .sc2-dot{background:var(--r);animation:dotPulseR 1.4s ease-in-out infinite;}
/* Height was 78px to make room for a CPU chart that has been removed — it was
   a sine wave drawn around a single scalar, not a trend. Without the chart the
   fixed height left a large empty band inside every server card. */
.sc2-hero{position:relative;padding:2px 0 6px;}
.sc2-hero-lbl{position:static;padding:0 16px;font-size:11px;color:var(--t3);z-index:1;display:flex;align-items:center;gap:7px;}
.sc2-hero-lbl b{font-size:17px;font-weight:700;color:var(--t1);}
.sc2-hero-svg{position:absolute;bottom:0;left:0;width:100%;height:62px;}
.sc2-fill{stroke:none;opacity:.5;}
.sc2-fill.g{fill:var(--gb);}
.sc2-fill.y{fill:var(--yb);}
.sc2-fill.r{fill:var(--rb);}
.sc2-stroke{fill:none;stroke-width:1.7;}
.sc2-stroke.g{stroke:var(--g);}
.sc2-stroke.y{stroke:var(--y);}
.sc2-stroke.r{stroke:var(--r);}
.sc2-tiles{display:flex;gap:10px;padding:10px 16px 0;}
.sc2-tile{flex:1;min-width:0;background:var(--bg2);border-radius:8px;padding:9px 12px;}
.sc2-tile-top{display:flex;align-items:baseline;justify-content:space-between;}
.sc2-tile-top span{font-size:11px;color:var(--t3);}
.sc2-tile-top b{font-size:15px;font-weight:700;color:var(--t1);}
.sc2-mini{display:block;width:100%;height:16px;margin-top:2px;}
.sc2-tile-sub{font-size:10px;color:var(--t3);margin-top:1px;}
.sc2-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;margin-top:12px;border-top:1px solid var(--b1);}
.sc2-meta{font-size:12px;color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc2-sites-link{color:var(--a);font-weight:600;cursor:pointer;}
.sc2-sites-link:hover{text-decoration:underline;}
/* Add Server wizard provider cards: keep the white card, just lift with a
   shadow on hover (professional, no muddy bg change). */
.wiz-prov-card:hover{border-color:var(--b2)!important;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.10);}
.sc2-os{vertical-align:-2px;margin-right:4px;opacity:.85;}
.sc2-acts{display:flex;gap:6px;flex-shrink:0;align-items:center;}
.sc2-more{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;padding:0;border:1px solid var(--b1);background:var(--w);color:var(--t3);border-radius:7px;cursor:pointer;transition:background .15s ease,color .15s ease;}
.sc2-more:hover{background:var(--bg2);color:var(--t1);}
.sc2-menu{position:fixed;z-index:1000;background:var(--w);border:1px solid var(--b1);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:5px;min-width:152px;display:flex;flex-direction:column;}
.sc2-menu button{display:flex;align-items:center;gap:9px;text-align:left;background:none;border:none;padding:8px 12px;font-size:14px;color:var(--t1);border-radius:6px;cursor:pointer;font-family:inherit;}
.sc2-menu button svg{width:15px;height:15px;flex-shrink:0;color:var(--t3);}
.sc2-menu button:hover{background:var(--bg2);}
.sc2-menu button.danger,.sc2-menu button.danger svg{color:var(--r);}
/* Status badges — match the dashboard Servers table: steady colored dots,
   green Active / amber Updating / soft-red pulsing Down. */
.srv-tbl .bdg .dot{width:7px;height:7px;animation:none;}
.srv-tbl .bdg.down{background:var(--rb);color:var(--r);border:1px solid var(--rbd);font-weight:600;}
.srv-tbl .bdg.down .dot{background:var(--r);box-shadow:0 0 0 2px var(--rb);animation:dotPulseR 1.4s ease-in-out infinite;}

/* ── Dark log viewer (server Logs panel) ───────────────────────────── */
.so-logview{background:#1b1b29;min-height:460px;max-height:64vh;overflow:auto;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.7;padding:8px 0;border-radius:0;}
.so-logview::-webkit-scrollbar{width:10px;height:10px;}
.so-logview::-webkit-scrollbar-thumb{background:#3a3a52;border-radius:6px;border:2px solid #1b1b29;}
.so-logrow{display:flex;gap:0;padding:4px 16px 4px 14px;border-left:2px solid transparent;white-space:pre-wrap;word-break:break-word;}
.so-logrow:hover{background:rgba(255,255,255,.05);}
.so-logrow.sev-err{border-left-color:#ff5a5a;background:rgba(255,90,90,.06);}
.so-logrow.sev-err:hover{background:rgba(255,90,90,.1);}
.so-logrow.sev-warn{border-left-color:#ffb23e;background:rgba(255,178,62,.05);}
.so-logrow.sev-warn:hover{background:rgba(255,178,62,.09);}
.so-logrow.sev-ok{border-left-color:#46d27e;}
.so-logln{flex-shrink:0;width:38px;text-align:right;padding-right:12px;color:#56566f;user-select:none;}
.so-logsev{flex-shrink:0;width:38px;font-weight:700;font-size:9px;letter-spacing:.4px;padding-top:1px;color:#6b6b85;user-select:none;}
.so-logsev.err{color:#ff8585;}
.so-logsev.warn{color:#ffc56b;}
.so-logsev.ok{color:#8fe6a9;}
.so-logsev.dim{color:#7c7c93;}
.so-logtx{flex:1;min-width:0;color:#c8c8d6;}
.so-logtx.err{color:#ff9d9d;}
.so-logtx.warn{color:#ffd089;}
.so-logtx.ok{color:#9fe9b5;}
.so-logtx.dim{color:#8585a0;}
.so-logchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.so-logchip{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:20px;border:1px solid var(--b1);background:var(--w);color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .12s,border-color .12s,color .12s;}
.so-logchip:hover{border-color:var(--t4);}
.so-logchip.on{background:var(--a);border-color:var(--a);color:#fff;}
.so-logchip .n{font-size:10px;font-weight:700;opacity:.85;}
.so-logchip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.so-logempty{padding:34px 16px;text-align:center;color:#80809a;font-family:'JetBrains Mono',monospace;font-size:12px;}
/* Logs command bar + footer caption (B layout) */
.so-logbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--b1);background:var(--w);}
/* Custom log-source dropdown with per-service logos */
.so-logsel{position:relative;flex-shrink:0;width:188px;}
.so-logsel-btn{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 11px;background:var(--w);border:1px solid var(--b1);border-radius:8px;font-size:12.5px;color:var(--t1);cursor:pointer;transition:border-color .12s;}
.so-logsel-btn:hover{border-color:var(--t4);}
.so-logsel-btn>span:nth-child(2){flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.so-logsel-ic{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;}
.so-logsel-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:100%;background:var(--w);border:1px solid var(--b1);border-radius:9px;box-shadow:0 10px 28px rgba(15,23,42,.14);padding:5px;z-index:60;display:none;white-space:nowrap;}
.so-logsel.open .so-logsel-menu{display:block;}
.so-logsel-opt{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;background:transparent;border-radius:7px;font-size:12.5px;color:var(--t1);cursor:pointer;text-align:left;}
.so-logsel-opt:hover{background:var(--ab);color:var(--a);}
/* Server Events / Activity Log panel (RunCloud + SpinupWP hybrid) */
.so-evbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.so-evbar #so-ev-search{width:180px;} .so-evbar #so-ev-status{width:138px;}
.so-evcols,.so-evrow{display:grid;grid-template-columns:74px 1fr 140px 60px 104px 70px;gap:10px;align-items:center;}
.so-evview{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:7px;border:1px solid var(--b1);background:var(--w);color:var(--t2);font-size:11.5px;font-weight:500;cursor:pointer;transition:border-color .12s,color .12s,background .12s;}
.so-evview:hover{border-color:var(--a);color:var(--a);background:var(--ab);}
.so-evview svg{width:13px;height:13px;flex-shrink:0;}
.so-evcols{padding:9px 16px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);border-top:1px solid var(--b1);}
.so-evgroup{display:flex;align-items:center;gap:12px;padding:14px 16px 6px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);background:transparent;}
.so-evgroup::after{content:"";flex:1;height:1px;background:var(--b1);}
.so-evrow{padding:12px 16px;border-top:1px solid var(--b1);font-size:14px;}
.so-evrow:hover{background:var(--bg2);}
.so-evrow .evt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1);font-weight:500;font-size:14px;}
.so-evrow .evsite{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--t2);font-family:'JetBrains Mono',ui-monospace,monospace;}
.so-evrow .evtime{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--t3);}
.so-evav{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;}
.bdg-ev{font-size:10.5px;padding:2px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;width:fit-content;font-weight:500;white-space:nowrap;}
.bdg-ev .evdot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.so-evfoot{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid var(--b1);font-size:11.5px;color:var(--t3);flex-wrap:wrap;gap:8px;}
.so-evfoot:empty{display:none;}
.so-evpages{display:flex;gap:4px;align-items:center;}
.so-evpages button{padding:3px 8px;border-radius:6px;border:0;background:transparent;color:var(--t2);cursor:pointer;font-size:14px;line-height:1;}
.so-evpages button:hover:not([disabled]){background:var(--bg2);}
.so-evpages .pg{padding:3px 9px;border-radius:6px;color:var(--t2);font-size:11.5px;}
.so-evpages .pg.on{background:var(--a);color:#fff;}
.so-evempty{padding:42px 16px;text-align:center;color:var(--t3);font-size:12.5px;}
.so-evout{background:#1b1b29;color:#c8c8d8;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;line-height:1.7;padding:14px 16px;border-radius:10px;white-space:pre-wrap;word-break:break-word;max-height:48vh;overflow:auto;}
.so-evmeta{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--t3);}
/* Floating IP tooltip on the server-type ("Managed") badge.
   It opened on :hover alone, which a phone never has, so the IP and its Copy
   button were unreachable by touch. The badge is a button now: a tap, Enter or
   Space pins it open with .open; a tap elsewhere, Esc or focus moving away
   closes it (server-overview.js, _soTypeTip*). Hover still previews it, but only
   where the pointer really hovers — a touch browser's emulated, sticky :hover
   would otherwise fight the toggle. */
.so-type-badge{position:relative;}
.so-type-badge[role=button]{cursor:pointer;}
.so-type-badge:focus-visible{outline:2px solid var(--a);outline-offset:2px;}
.so-iptip{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:9px;display:none;z-index:200;}
@media (hover:hover){.so-type-badge:hover .so-iptip{display:block;}}
.so-type-badge.open .so-iptip{display:block;}
.so-iptip-in{position:relative;display:flex;align-items:center;gap:10px;background:var(--w);border:1px solid var(--b1);border-radius:9px;box-shadow:0 8px 24px rgba(15,23,42,.16);padding:8px 10px;white-space:nowrap;}
.so-iptip-col{display:flex;flex-direction:column;gap:1px;}
.so-iptip-lbl{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);}
.so-iptip-ip{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--t1);font-weight:500;}
.so-iptip-copy{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;border:1px solid var(--b1);background:var(--w);color:var(--t2);cursor:pointer;flex-shrink:0;transition:border-color .12s,color .12s,background .12s;}
.so-iptip-copy:hover{border-color:var(--a);color:var(--a);background:var(--ab);}
.so-iptip-copy svg{width:14px;height:14px;}
.so-iptip-arrow{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) rotate(45deg);width:9px;height:9px;background:var(--w);border-left:1px solid var(--b1);border-top:1px solid var(--b1);margin-bottom:-5px;}
/* Status-page style Health panel (A2: ring hero + uptime bars + service checks) */
.soh-hero{display:flex;align-items:center;gap:18px;padding:18px;border-bottom:1px solid var(--b1);flex-wrap:wrap;}
.soh-ring{position:relative;width:96px;height:96px;flex-shrink:0;}
.soh-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.soh-ring-main{font-size:15px;font-weight:600;color:var(--t1);line-height:1.1;}
.soh-ring-sub{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;}
.soh-herometa{flex:1;min-width:210px;}
.soh-badge{font-size:11px;padding:3px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;font-weight:500;white-space:nowrap;}
.soh-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.soh-stats{display:flex;gap:26px;margin-top:13px;flex-wrap:wrap;}
.soh-k{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;}
.soh-v{font-size:15px;font-weight:500;color:var(--t1);margin-top:1px;}
.soh-sec2{padding:14px 18px;border-bottom:1px solid var(--b1);}
.soh-barhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);}
.sohbars{display:flex;gap:3px;align-items:flex-end;height:32px;}
.sohb{flex:1;min-width:4px;border-radius:2px;}
.soh-legend{display:flex;gap:14px;margin-top:9px;font-size:10.5px;color:var(--t3);}
.soh-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;vertical-align:middle;margin-right:4px;}
.soh-collect{font-size:12px;color:var(--t3);}
.soh-sech{padding:11px 18px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);font-weight:600;border-bottom:1px solid var(--b1);}
.sohrow{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--b1);}
.sohrow:last-child{border-bottom:0;}
.sohlogo{width:24px;display:flex;justify-content:center;flex-shrink:0;}
.sohname{flex:1;font-size:14px;font-weight:500;color:var(--t1);}
/* Minimalist SSH/Site user list cards */
.su-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:15px 18px 13px;border-bottom:1px solid var(--b1);}
.su-title{font-size:14px;font-weight:500;color:var(--t1);display:flex;align-items:center;gap:8px;}
.su-sub{font-size:11.5px;color:var(--t3);margin-top:3px;}
.su-row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--b1);}
.su-row:last-child{border-bottom:0;}
.su-row:hover{background:var(--bg2);}
.su-main{flex:1;min-width:0;}
.su-name{font-weight:500;font-size:14px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.su-name.link{color:var(--a);cursor:pointer;}
.su-sub2{font-size:11px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.su-meta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.su-tag{font-size:11.5px;color:var(--t2);white-space:nowrap;flex-shrink:0;}
.su-flag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t2);white-space:nowrap;flex-shrink:0;}
.su-flag i{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.su-del{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;border:0;background:transparent;color:var(--t3);cursor:pointer;flex-shrink:0;transition:color .12s,background .12s;}
.su-del:hover{color:var(--r);background:var(--rb);}
.su-del svg{width:15px;height:15px;}
.su-empty{padding:26px 18px;text-align:center;color:var(--t3);font-size:12px;}
/* Sites-table Manage gear button (bordered, accent on hover) */
.so-mng{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--b1);border-radius:8px;background:var(--w);color:var(--t2);cursor:pointer;transition:border-color .12s,color .12s,background .12s;}
.so-mng:hover{border-color:var(--a);color:var(--a);background:var(--ab);}
.so-mng svg{width:16px;height:16px;}
/* Sites table — slightly larger row text (14px) */
.so-sites-tbl td{font-size:14px;}
.so-logfoot{padding:8px 16px;font-size:11px;color:var(--t3);border-top:1px solid var(--b1);background:var(--w);font-family:'JetBrains Mono',ui-monospace,monospace;}
/* SpinupWP-style fullscreen log viewer */
.so-logs-card.so-fs{position:fixed;inset:0;z-index:9000;margin:0;border-radius:0;max-width:none;display:flex;flex-direction:column;box-shadow:none;}
.so-logs-card.so-fs .so-logview{max-height:none;min-height:0;flex:1;}
.so-logs-card.so-fs .so-logfoot{margin-top:auto;}

/* ── Databases panel (server Databases redesign) ───────────────────── */
.dbname{display:flex;align-items:center;gap:10px;}
.dbname .dbicon{width:28px;height:28px;border-radius:6px;background:var(--blb);color:var(--bl);display:grid;place-items:center;flex-shrink:0;}
.dbname .nm{font-weight:600;color:var(--t1);}
.sizecell{min-width:130px;}
.sizecell .sv{font-size:14px;color:var(--t1);font-weight:500;}
.sizebar{height:6px;border-radius:9999px;background:var(--bg2);overflow:hidden;margin-top:5px;}
.sizebar i{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,var(--a),var(--ah));}
.db-tbl .row-actions{opacity:.55;transition:opacity .12s;white-space:nowrap;text-align:right;}
.db-tbl tr:hover .row-actions{opacity:1;}
.db-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:0;background:none;color:var(--t3);cursor:pointer;transition:background .12s,color .12s;}
.db-iconbtn:hover{background:var(--bg2);color:var(--t1);}
.db-iconbtn.danger:hover{background:var(--rb);color:var(--r);}
.dbconnbox{font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--bg2);border:1px solid var(--b1);border-radius:8px;padding:11px 12px;color:var(--t2);line-height:1.7;word-break:break-all;}
.dbconnbox .k{color:var(--t4);}
.dbconnbox .v{color:var(--t1);}
.privs{display:flex;flex-wrap:wrap;gap:4px;}
/* plain professional IP — clean mono text, no boxed button (per feedback) */
.srv-ip-plain{font-family:var(--mono);font-size:14px;color:var(--t2);}

/* Sites table cell (mockup): letter tile + name + Preview */
.site-cell{display:flex;align-items:center;gap:11px;}
.site-tile{width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:14px;font-weight:700;flex-shrink:0;}
.site-cell-name{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;color:var(--a);}
.site-cell-preview{font-size:11px;color:var(--t3);display:block;margin-top:1px;cursor:pointer;text-decoration:none;}
.site-cell-preview:hover{color:var(--a);}
.site-tile-logo{background:var(--w);border:1px solid var(--b1);}
.site-tile-logo img{display:block;}
.site-tile-fallback{background:var(--bg2);color:var(--t2);}
/* Server cell with provider logo + storage used */
.site-server{display:flex;flex-direction:column;gap:1px;}
.site-server-name{display:inline-flex;align-items:center;gap:8px;color:var(--t1);cursor:pointer;font-size:14px;}
.site-server-name:hover .site-server-label{color:var(--a);}
.site-server-label{transition:color .12s;}
.site-server-disk{font-size:11px;color:var(--t4);margin-left:26px;}
.prov-logo{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;}
.prov-logo img{display:block;}
/* FlyWP-style feature icons — plain ghost icons, NO boxes. Subtle gray when
   off, BLUE when enabled, soft round hover. */
.feat-row{display:inline-flex;gap:3px;align-items:center;}
.feat-tile{width:34px;height:34px;border-radius:8px;border:0;background:none;color:var(--t4);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:color .12s,background .12s;}
.feat-tile svg{width:19px;height:19px;}
.feat-tile:hover{background:var(--bg2);color:var(--t2);}
.feat-tile.on{color:var(--bl);}
.feat-tile.on:hover{background:var(--blb);color:var(--bl);}

/* professional soft status pill (FlyWP) */
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:4px 11px;border-radius:var(--radius-pill);line-height:1.4;}
.status-pill .status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.status-pill.g{background:var(--gb);color:var(--g);}
.status-pill.r{background:var(--rb);color:var(--r);}
.status-pill.y{background:var(--yb);color:var(--y);}
.status-pill.b{background:var(--blb);color:var(--bl);}

/* PHP cell: plain version */
.php-ver{font-family:var(--mono);font-size:14px;color:var(--t1);font-weight:500;}

/* ============================================================================
   Site Detail — FlyWP-style grouped LEFT SIDEBAR (.sd-*)
   ============================================================================ */
/* Site-detail is full-bleed: break out of the centered/padded .content so the
   sidebar hugs the left viewport edge like the mockup. Only applies while the
   site-detail view is the active (.on) child — all other views stay centered. */
/* Shared by Site Detail (#view-sitedetail) AND Server Detail (#view-serveroverview). */
body.shell-appbar .content:has(> #view-sitedetail.on),
body.shell-appbar .content:has(> #view-serveroverview.on),
body.shell-appbar .content:has(> #view-settings.on){max-width:none;margin:0;padding:0;}
/* body already pads top by --th to clear the fixed appbar; .main's legacy
   padding-top:--th (old fixed-topbar layout) double-offsets it. Drop it here so
   the sidebar starts right under the appbar like the mockup (no top gap). */
body.shell-appbar .main:has(> .content > #view-sitedetail.on),
body.shell-appbar .main:has(> .content > #view-serveroverview.on),
body.shell-appbar .main:has(> .content > #view-settings.on){padding-top:0;}
/* Full-height white panel + right divider, matching the approved mockup
   (.design-research/_mockups: .shell{display:flex} + .sidebar{background;border-right}). */
:is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-shell{display:flex;align-items:stretch;gap:0;min-height:calc(100vh - var(--th,58px));}
/* Settings sections — one per sidebar item. Hidden sections stay in the DOM so
   every load function keeps finding its element IDs; only visibility changes. */
#view-settings .set-sec{display:none;}
#view-settings .set-sec.on{display:block;animation:sdFade .22s ease;}
#view-settings .set-sec .card{margin-bottom:16px;}
/* Notifications: four channel tiles (2×2, one column on phones), each with a
   "Send test" row; the per-event switches below in a 3-up grid. */
#view-settings .ntf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#view-settings .ntf-ch{border:1px solid var(--b1);border-radius:var(--radius-sm,11px);padding:12px 14px;min-width:0;}
#view-settings .ntf-hint{font-size:10.5px;color:var(--t4);margin-top:5px;}
#view-settings .ntf-test{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
#view-settings .ntf-test-out{font-size:11.5px;color:var(--t3);min-width:0;overflow-wrap:anywhere;}
#view-settings .ntf-test-out.ok{color:var(--g);}
#view-settings .ntf-test-out.bad{color:var(--r);}
#view-settings .ntf-prefs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
/* Health & Alerts: the three load limits as compact number fields with a % suffix. */
#view-settings .hl-limits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
#view-settings .hl-lim{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);font-weight:600;}
#view-settings .hl-lim .fi{width:100%;min-width:0;}
#view-settings .hl-lim em{font-style:normal;color:var(--t3);font-weight:500;}
@media (max-width:860px){#view-settings .ntf-prefs{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){
  #view-settings .ntf-grid,#view-settings .ntf-prefs{grid-template-columns:1fr;}
  #view-settings .ntf-test .btn{min-height:44px;}
}
@keyframes sdFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#view-settings .set-sec.on{animation:none;}}
/* .sd-main = mockup .content (fills remaining, padded); .sd-wrap = mockup .wrap
   (content capped + centered at 1200 so KPIs/cards don't stretch full screen). */
:is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-main{flex:1;min-width:0;padding:var(--s-6,24px) var(--s-6,24px) 80px;}
:is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-wrap{max-width:1200px;margin:0 auto;}
/* hide legacy top tabs when the sidebar shell is present */
:is(#view-sitedetail,#view-serveroverview,#view-settings) .dtabs-wrap,#view-serveroverview #so-tabs{display:none;}
.sd-side{flex:0 0 248px;display:flex;flex-direction:column;gap:1px;background:var(--w);border-right:1px solid var(--b1);padding:var(--s-3,12px) 10px;position:sticky;top:var(--th,58px);align-self:flex-start;height:calc(100vh - var(--th,58px));overflow-y:auto;}
/* The "Menu"+X head that appshell injects when the mobile drawer first opens
   stays in the DOM afterwards. Its styling lives only inside the ≤860 media
   block, so after widening back to desktop it rendered as bare stray text at
   the top of the sidebar (all three shell pages). Hidden by default; the
   mobile block's display:flex overrides this inside the drawer. */
.sd-drawer-head{display:none;}
/* DoD: keyboard focus must be visible. The buttons reset border/background, and
   no :focus-visible rule existed anywhere for them — on any of the shell pages. */
.sd-item:focus-visible{outline:2px solid var(--a);outline-offset:-2px;}
.sd-group-label{font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--t4);padding:14px 12px 5px;}
.sd-group-sep{height:var(--s-3,12px);}
.sd-item{display:flex;align-items:center;gap:11px;width:100%;padding:8px 12px;border:0;background:none;border-radius:var(--radius-sm,6px);font-size:13.5px;font-weight:500;color:var(--t2);cursor:pointer;text-align:left;transition:background .12s,color .12s;font-family:inherit;}
.sd-item svg{width:18px;height:18px;flex-shrink:0;color:var(--t3);transition:color .12s;}
.sd-item:hover{background:var(--bg2);color:var(--t1);}
.sd-item:hover svg{color:var(--t2);}
.sd-item.on{background:var(--ab);color:var(--a);font-weight:600;}
.sd-item.on svg{color:var(--a);}
.sd-item.danger{color:var(--r);}
.sd-item.danger svg{color:var(--r);}
.sd-item.danger:hover{background:var(--rb);}
.sd-item.danger.on{background:var(--rb);color:var(--r);}
/* FlyWP collapsible groups (artifact v4): group row + chevron, indented children */
.sd-grp{margin-bottom:1px;}
.sd-grp .sd-chev{width:14px;height:14px;margin-left:auto;color:var(--t4);transition:transform .18s;flex-shrink:0;}
.sd-grp.closed .sd-chev{transform:rotate(-90deg);}
.sd-grp.closed .sd-kids{display:none;}
.sd-kids{padding:1px 0 3px;}
.sd-kid{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:8px;padding:7px 12px 7px 24px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;text-align:left;transition:background .14s,color .14s;margin-bottom:1px;font-family:inherit;}
.sd-kid svg{width:15px;height:15px;flex-shrink:0;color:var(--t4);transition:color .14s;}
.sd-kid:hover{background:var(--bg2);color:var(--t1);}
.sd-kid:hover svg{color:var(--t2);}
.sd-kid.on{background:var(--ab);color:var(--a);font-weight:600;}
.sd-kid.on svg{color:var(--a);}
.sd-kid.danger{color:var(--r);}
.sd-kid.danger svg{color:var(--r);}
.sd-kid.danger:hover{background:var(--rb);}
/* artifact-parity site header: gradient type icon, domain+copy, copyable chips */
.sdh{gap:12px;flex-wrap:wrap;}
.sdh-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;}
.sdh-ico svg{width:21px;height:21px;display:block;}
/* Header tile now reuses the /sites list look (fw-logo) at header size */
.sdh-fwl{width:40px;height:40px;border-radius:11px;}
.sdh-fwl img{width:24px;height:24px;}
.sdh-fwl.fb{font-size:16px;}
.sdh-name{display:flex;align-items:center;gap:8px;min-width:0;font-size:17px;font-weight:700;letter-spacing:-.3px;}
.sdh-name .dom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sdh-copy{width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:var(--t4);display:grid;place-items:center;cursor:pointer;transition:background .14s,color .14s;flex-shrink:0;padding:0;}
.sdh-copy:hover{background:var(--bg2);color:var(--a);}
.sdh-copy svg{width:13px;height:13px;}
.sdh-chips{display:flex;align-items:center;gap:7px;margin-top:4px;flex-wrap:wrap;}
.sdh-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--t3);background:var(--bg2);border:1px solid var(--b1);border-radius:20px;padding:2px 9px;transition:border-color .14s,color .14s;white-space:nowrap;}
.sdh-chip[data-v]{cursor:pointer;}
.sdh-chip[data-v]:hover{border-color:var(--a);color:var(--a);}
.sdh-chip svg{width:11px;height:11px;flex-shrink:0;}
.sdh-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;animation:fwPulse 2s infinite;}
/* artifact .sh-row/.sh-actions — status pill + Visit + Magic Login + ⋮ on the right */
.ph.sdh{align-items:center;}
.sdh-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* Site actions popup (⋮) — artifact .m-h header injected into the shared modal,
   same technique as .reg-modal-head; cleaned up on close by _sdhDecorateActionsHeader. */
/* Its own ✕ is a grid child, so drop the right padding the frame reserves for
   the absolutely-positioned base button — otherwise this one sits 52px in. */
.modal-head.sdh-modal-head{display:grid;grid-template-columns:auto 1fr auto;column-gap:11px;align-items:center;border-bottom:1px solid var(--b1);padding-bottom:15px;padding-right:24px;}
.modal-head.sdh-modal-head .sdh-modal-ic{grid-row:1 / span 2;width:34px;height:34px;border-radius:10px;background:var(--ab);color:var(--a);display:grid;place-items:center;flex-shrink:0;}
.modal-head.sdh-modal-head .sdh-modal-ic svg{width:17px;height:17px;}
.modal-head.sdh-modal-head .sdh-modal-x{grid-row:1 / span 2;grid-column:3;width:30px;height:30px;border-radius:8px;border:1px solid var(--b1);background:var(--w);color:var(--t3);display:grid;place-items:center;cursor:pointer;transition:background .14s,color .14s;}
.modal-head.sdh-modal-head .sdh-modal-x:hover{background:var(--bg2);color:var(--t1);}
.modal-head.sdh-modal-head .sdh-modal-x svg{width:14px;height:14px;}
#modal-inner.sdh-modal .modal-title{font-size:14px;}
#modal-inner.sdh-modal .modal-sub{font-size:11.5px;margin-top:1px;}
#modal-inner.sdh-modal .modal-body{padding:16px 24px 8px;}
/* artifact-parity overview: health hero, KPI cards w/ sparklines, QA tiles */
.sdx-hero{border-radius:14px;border:1px solid var(--gbd);background:linear-gradient(135deg,var(--gb),var(--w) 60%);padding:16px 18px;display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.sdx-hero.warn{border-color:var(--ybd);background:linear-gradient(135deg,var(--yb),var(--w) 60%);}
.sdx-hero.bad{border-color:var(--rbd);background:linear-gradient(135deg,var(--rb),var(--w) 60%);}
.sdx-ring{width:52px;height:52px;flex-shrink:0;}
.sdx-hero .htt{font-size:14.5px;font-weight:700;}
.sdx-hero .hsb{font-size:12px;color:var(--t3);margin-top:2px;}
.sdx-hero .hact{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.sdx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px;}
.sdx-kpi{background:var(--w);border:1px solid var(--b1);border-radius:13px;padding:14px 15px;position:relative;overflow:hidden;transition:box-shadow .2s,transform .18s;}
.sdx-kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.sdx-kpi .hd{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.2px;}
.sdx-kpi .hd .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--ab);color:var(--a);flex-shrink:0;}
.sdx-kpi .hd .ic svg{width:13px;height:13px;}
.sdx-kpi .hd .ic.g{background:var(--gb);color:var(--g);}
.sdx-kpi .hd .ic.y{background:var(--yb);color:var(--y);}
.sdx-kpi .hd .ic.p{background:var(--pb);color:var(--p);}
.sdx-kpi .hd .ic.r{background:var(--rb);color:var(--r);}
.sdx-kpi .val{font-size:21px;font-weight:700;letter-spacing:-.5px;margin-top:8px;font-variant-numeric:tabular-nums;color:var(--t1);}
.sdx-kpi .val .u{font-size:11px;font-weight:600;color:var(--t3);margin-left:3px;}
.sdx-kpi .sub{font-size:11px;color:var(--t3);margin-top:2px;}
/* An action inside a KPI tile — used by DISK's "Measure now". Quiet until the
   card is hovered, so the tile still reads as a number first. */
.sdx-kpi-act{position:absolute;right:10px;bottom:9px;background:var(--ab);color:var(--a);border:1px solid transparent;border-radius:7px;padding:4px 8px;font-size:10.5px;font-weight:600;font-family:inherit;cursor:pointer;opacity:0;transition:opacity .15s,border-color .15s;}
.sdx-kpi:hover .sdx-kpi-act,.sdx-kpi-act:focus-visible{opacity:1;}
.sdx-kpi-act:hover{border-color:var(--a);}
.sdx-kpi-act:focus-visible{outline:2px solid var(--a);outline-offset:2px;}
@media (max-width:820px){.sdx-kpi-act{opacity:1;padding:7px 10px;font-size:11px;}}
.sdx-spark{position:absolute;right:10px;bottom:10px;opacity:.9;}
.sdx-qa{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.sdx-qab{display:flex;align-items:center;gap:10px;background:var(--w);border:1px solid var(--b1);border-radius:12px;padding:11px 13px;font-size:12.3px;font-weight:600;color:var(--t1);text-align:left;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .13s;}
.sdx-qab:hover{border-color:var(--a);box-shadow:0 4px 14px color-mix(in srgb,var(--a) 12%,transparent);transform:translateY(-1px);}
.sdx-qab .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--ab);color:var(--a);}
.sdx-qab .ic svg{width:15px;height:15px;}
.sdx-qab .ic.g{background:var(--gb);color:var(--g);}
.sdx-qab .ic.y{background:var(--yb);color:var(--y);}
.sdx-qab .ic.p{background:var(--pb);color:var(--p);}
.sdx-qab .ic.r{background:var(--rb);color:var(--r);}
/* artifact card look across ALL site-detail tabs */
#view-sitedetail .card{border-radius:14px;border:1px solid var(--b1);box-shadow:none;}
#view-sitedetail .ch{padding:14px 18px;gap:11px;}
#view-sitedetail .ct{font-size:13.5px;font-weight:600;letter-spacing:0;}
#view-sitedetail .tgl input:checked+.tgl-t{background:var(--g);}
.chl{display:flex;align-items:center;gap:11px;min-width:0;}
.chic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--ab);color:var(--a);}
.chic svg{width:16px;height:16px;}
.chic.g{background:var(--gb);color:var(--g);}
.chic.y{background:var(--yb);color:var(--y);}
.chic.r{background:var(--rb);color:var(--r);}
.chic.p{background:var(--pb);color:var(--p);}
/* artifact inline tags + copy chip (Application card etc.) */
.sdx-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.3px;border-radius:5px;padding:2px 7px;text-transform:uppercase;}
.sdx-tag.g{background:var(--gb);color:var(--g);}
.sdx-tag.y{background:var(--yb);color:var(--y);}
.sdx-tag.r{background:var(--rb);color:var(--r);}
.sdx-tag.n{background:var(--bg2);color:var(--t3);}
.sdx-cpy{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;background:var(--bg2);border:1px solid var(--b1);border-radius:7px;padding:3px 9px;color:var(--t1);cursor:pointer;transition:border-color .14s,color .14s;max-width:100%;font-family:var(--mono);}
.sdx-cpy:hover{border-color:var(--a);color:var(--a);}
.sdx-cpy svg{width:11px;height:11px;color:var(--t4);flex-shrink:0;}
.sdx-cpy:hover svg{color:var(--a);}
@media(max-width:860px){
  /* Stack the flex shell: hide the left panel, content goes full width. */
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-shell{flex-direction:column;min-height:0;}
  .sd-side{display:none;}
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-main{padding:24px var(--s-4,16px) 64px;}
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .dtab-mobile-sel{display:block;margin-bottom:14px;}
  /* Collapse stat + content grids so nothing overflows on phones. The Docker
     overview uses an inline repeat(4,1fr); override it with !important. */
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-stats{grid-template-columns:1fr 1fr !important;}
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .grid-2,:is(#view-sitedetail,#view-serveroverview,#view-settings) .grid-3,:is(#view-sitedetail,#view-serveroverview,#view-settings) .g2,:is(#view-sitedetail,#view-serveroverview,#view-settings) .g3{grid-template-columns:1fr !important;}
  /* Contain wide inner content (e.g. Docker network table) to its own scroll
     instead of pushing the page; let inner tab bars wrap. */
  :is(#view-sitedetail,#view-serveroverview,#view-settings) :is(#detail-content,#so-content){overflow-x:auto;}
  :is(#view-sitedetail,#view-serveroverview,#view-settings) :is(#detail-content,#so-content) .dtabs{flex-wrap:wrap;}
}
@media(max-width:460px){
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-stats{grid-template-columns:1fr !important;}
}
@media(min-width:861px){
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .dtab-mobile-sel{display:none;}
}

/* Site-detail sub-tabs (FlyWP pill segmented control) */
.sd-subtabs{display:inline-flex;gap:2px;background:var(--bg2);border-radius:var(--radius-sm);padding:3px;margin-bottom:16px;}
.sd-subtab{padding:5px 14px;border-radius:var(--radius-xs);font-size:14px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .12s;}
.sd-subtab:hover{color:var(--t1);}
.sd-subtab.on{background:var(--w);color:var(--a);box-shadow:var(--shadow-md);font-weight:600;}

/* Site-detail Overview — mockup stat cards + Application + Quick Actions */
.sd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4,16px);margin-bottom:var(--s-4,16px);}
.sd-stat{background:var(--w);border:1px solid var(--b1);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s-5,20px);}
.sd-stat-l{font-size:12px;color:var(--t3);font-weight:500;}
.sd-stat-n{font-size:28px;font-weight:700;color:var(--t1);letter-spacing:-.02em;margin-top:6px;line-height:1.1;}
.sd-stat-s{font-size:12px;color:var(--t3);margin-top:4px;}
.sd-stat-s.up{color:var(--g);}
.sd-app-tbl{width:100%;font-size:14px;border-collapse:collapse;}
.sd-app-tbl td{padding:8px 0;border-bottom:1px solid var(--b1);}
.sd-app-tbl tr:last-child td{border-bottom:none;}
.sd-app-tbl td:first-child{width:42%;color:var(--t3);}
.sd-app-tbl td:last-child{color:var(--t1);}
.sd-qa{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2,8px);}
.sd-qa .btn{justify-content:center;}
@media(max-width:960px){.sd-stats{grid-template-columns:1fr;}}

/* Site-detail label/value grid (FlyWP Overview style) */
.kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;}
.kv-k{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--t3);margin-bottom:4px;}
.kv-v{font-size:14px;color:var(--t1);}
@media(max-width:640px){.kv-grid{grid-template-columns:1fr;}}

/* Trash modal — FlyWP card style */
.trash-list{max-height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:2px;}
.trash-card{padding:14px;background:var(--w);border:1px solid var(--b1);border-radius:var(--radius);transition:border-color .12s,box-shadow .12s;}
.trash-card:hover{border-color:var(--b2);box-shadow:var(--shadow);}
.trash-card-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.trash-logo{width:32px;height:32px;border-radius:8px;background:var(--bg2);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;color:var(--t2);}
.trash-logo img{display:block;}
.trash-logo-fb{font-weight:700;}
.trash-card-info{flex:1;min-width:0;}
.trash-card-name{font-weight:600;color:var(--t1);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trash-card-meta{display:flex;align-items:center;gap:9px;margin-top:3px;font-size:11.5px;color:var(--t3);}
.trash-card-date{color:var(--t3);}
.trash-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:999px;white-space:nowrap;border:1px solid;line-height:1.4;flex-shrink:0;}
.trash-badge.g{background:#ecfdf3;color:#067647;border-color:#abefc6;}
.trash-badge.y{background:#fffaeb;color:#b54708;border-color:#fedf89;}
.trash-badge.r{background:#fef3f2;color:#d92d20;border-color:#fecdca;}
.trash-card-actions{display:flex;gap:8px;}
.trash-restore{flex:1;justify-content:center;}
.trash-purge{flex:1;justify-content:center;background:var(--w);border:1px solid var(--rbd);color:var(--r);}
.trash-purge:hover{background:var(--rb);border-color:var(--r);}
.trash-empty{padding:40px 20px;text-align:center;color:var(--t4);}
.trash-empty svg{color:var(--t4);opacity:.6;margin-bottom:12px;}
.trash-empty-t{font-size:14px;font-weight:600;color:var(--t2);}
.trash-empty-s{font-size:12px;color:var(--t3);margin-top:4px;}

/* ── BADGES ── */
.bdg{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap;letter-spacing:.1px;}
.bdg.g{background:var(--gb);color:var(--g);border:1px solid var(--gbd);}
.bdg.y{background:var(--yb);color:var(--y);border:1px solid var(--ybd);}
.bdg.r{background:var(--rb);color:var(--r);border:1px solid var(--rbd);}
.bdg.b{background:var(--blb);color:var(--bl);border:1px solid var(--blbd);}
.bdg.p{background:var(--pb);color:var(--p);border:1px solid var(--pbd);}
.bdg.gray{background:var(--bg2);color:var(--t3);border:1px solid var(--b1);}
.bdg.n{background:var(--bg2);color:var(--t3);border:1px solid var(--b1);}
.bdg.ac{background:var(--ab);color:var(--a);}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-xs);border:none;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;}
.btn-p{background:var(--a);color:#fff;box-shadow:0 1px 3px rgba(22,84,210,.3);}
.btn-p:hover{background:var(--ah);transform:translateY(-1px);box-shadow:0 6px 20px rgba(22,84,210,.25);}
.btn-s{background:var(--w);color:var(--t2);border:1.5px solid var(--b1);}
.btn-s:hover{border-color:var(--a);color:var(--a);background:var(--ab);}
.btn-g{background:transparent;color:var(--t3);font-weight:500;}
.btn-g:hover{color:var(--t2);background:var(--bg);}
.btn-d{background:var(--rb);color:var(--r);border:1px solid var(--rbd);}
.btn-d:hover{background:#fff0f0;}
.btn-sm{padding:7px 14px;font-size:12px;}
.btn-xs{padding:5px 11px;font-size:11px;border-radius:var(--radius-xs);}
/* Server overview header actions — cohesive, polished button group. */
.so-actions{display:flex;align-items:center;gap:8px;}
.so-actions .btn{height:36px;padding:0 15px;border-radius:9px;font-size:12.5px;font-weight:600;gap:7px;transition:all .16s ease;}
.so-actions .btn svg{width:14px;height:14px;}
.so-actions .btn-s{background:var(--w);border:1px solid var(--b1);color:var(--t2);}
.so-actions .btn-s:hover{background:var(--ab);border-color:var(--a);color:var(--a);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.so-actions .btn-d{background:var(--w);border:1px solid var(--rbd);color:var(--r);}
.so-actions .btn-d:hover{background:var(--rb);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.07);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;}

/* ── TOGGLE ── */
.tgl{position:relative;width:36px;height:20px;display:inline-block;cursor:pointer;flex-shrink:0;}
.tgl input{display:none;}
.tgl-t{position:absolute;inset:0;border-radius:20px;background:#d0d9e8;transition:.2s;}
.tgl-t::after{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.tgl input:checked+.tgl-t{background:var(--a);}
.tgl input:checked+.tgl-t::after{left:19px;}
.tr{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--b1);}
.tr:last-child{border-bottom:none;}
.trl{font-size:14px;font-weight:500;color:var(--t1);}
.trd{font-size:11px;color:var(--t3);margin-top:1px;}

/* ── PROGRESS ── */
.prog{background:var(--bg2);border-radius:3px;height:5px;overflow:hidden;}
.pf{height:100%;border-radius:3px;transition:width .6s ease;animation:barGrow .8s ease-out;}
@keyframes barGrow{from{max-width:0;}to{max-width:100%;}}
.pf.g{background:var(--g);}
.pf.y{background:var(--y);}
.pf.r{background:var(--r);}
.pf.b{background:var(--a);}
.pf.p{background:var(--p);}


/* ── FORM ── */
.fg{margin-bottom:12px;}
.fl{font-size:11.5px;font-weight:600;color:var(--t2);margin-bottom:4px;display:block;}
.fi,.fsel{width:100%;padding:10px 14px;background:var(--w);border:1.5px solid var(--b1);border-radius:var(--radius-xs);font-family:inherit;font-size:14px;color:var(--t1);outline:none;transition:all .2s;}
.fi:hover,.fsel:hover{border-color:var(--b2);}
.fi:focus,.fsel:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(22,84,210,.1);background:var(--w);}
.fsel{cursor:pointer;appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238896b3' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
/* Add Container Registry modal — icon-badge header (scoped via .reg-modal-head) */
.modal-head.reg-modal-head{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center;border-bottom:1px solid var(--b1);padding-bottom:15px;}
.modal-head.reg-modal-head .reg-modal-ic{grid-row:1 / span 2;width:38px;height:38px;border-radius:10px;background:#fff4ed;color:#ea580c;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* Registry modal — match the demo: rounder fields/buttons, demo-sized footer buttons,
   tighter footer gap, and let the provider dropdown float instead of getting clipped. */
#modal-inner.reg-modal .modal-body{overflow:visible;padding-bottom:8px;}
#modal-inner.reg-modal .fi,#modal-inner.reg-modal .reg-dd,#modal-inner.reg-modal .reg-dd-menu,#modal-inner.reg-modal .reg-help{border-radius:10px;}
#modal-inner.reg-modal .modal-foot{padding-top:12px;}
#modal-inner.reg-modal .modal-foot .btn{border-radius:10px;height:40px;padding:0 18px;font-size:13px;}
#modal-inner.reg-modal #modal-confirm{display:inline-flex;align-items:center;justify-content:center;}
/* Cancel button hover → red (instead of the default blue accent) for this modal. */
#modal-inner.reg-modal .modal-foot .btn-s:hover{border-color:var(--rbd);color:var(--r);background:var(--rb);}
@keyframes regSpin{to{transform:rotate(360deg)}}
/* Add Container Registry modal — custom provider dropdown + help callout */
.reg-ddwrap{position:relative;}
.reg-dd{display:flex;align-items:center;gap:10px;height:42px;border:1.5px solid var(--b1);border-radius:var(--radius-xs);padding:0 12px;background:var(--w);cursor:pointer;user-select:none;box-sizing:border-box;transition:border-color .2s,box-shadow .2s;}
.reg-dd.open{border-color:var(--a);box-shadow:0 0 0 3px rgba(22,84,210,.1);}
/* Locked provider row (edit mode) — provider can't change, so no pointer/hover. */
.reg-dd.reg-dd-lock{cursor:default;background:var(--bg2);opacity:.85;}
.reg-dd .reg-dd-lg{width:20px;display:flex;justify-content:center;flex-shrink:0;}
.reg-dd .reg-dd-lg img{width:18px;height:18px;object-fit:contain;}
.reg-dd .reg-dd-nm{flex:1;font-size:14px;color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reg-dd .reg-chev{color:var(--t3);display:inline-flex;flex-shrink:0;transition:transform .18s;}
.reg-dd.open .reg-chev{transform:rotate(180deg);}
.reg-dd-menu{position:absolute;left:0;right:0;top:48px;background:var(--w);border:1px solid var(--b1);border-radius:11px;box-shadow:0 14px 36px rgba(16,24,40,.16);padding:5px;z-index:20;display:none;}
.reg-dd-menu.show{display:block;animation:regMenuIn .14s ease;}
@keyframes regMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.reg-opt{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;cursor:pointer;}
.reg-opt:hover{background:var(--bg2);}
.reg-opt.sel{background:var(--ab);}
.reg-opt .reg-opt-lg{width:22px;display:flex;justify-content:center;flex-shrink:0;}
.reg-opt .reg-opt-lg img{width:18px;height:18px;object-fit:contain;}
.reg-opt .reg-opt-tx{flex:1;min-width:0;}
.reg-opt .reg-opt-n{font-size:13px;font-weight:600;color:var(--t1);}
.reg-opt .reg-opt-s{font-size:10.5px;color:var(--t3);font-family:'JetBrains Mono',monospace;margin-top:1px;}
.reg-opt .reg-opt-ck{color:var(--a);display:inline-flex;flex-shrink:0;opacity:0;}
.reg-opt.sel .reg-opt-ck{opacity:1;}
.reg-help{display:flex;gap:10px;background:var(--ab);border:1px solid var(--b1);border-radius:var(--radius-xs);padding:11px 12px;margin-top:4px;}
.reg-help svg{flex-shrink:0;margin-top:1px;color:var(--a);}
.reg-help-t{font-size:11.5px;color:var(--t2);line-height:1.5;}
.reg-help-t b{color:var(--t1);}
.reg-help-t a{color:var(--a);font-weight:600;text-decoration:none;}
.reg-help-t a:hover{text-decoration:underline;}
.reg-tok{position:relative;}
.reg-tok .fi{padding-right:38px;}
.reg-tok-eye{position:absolute;right:11px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--t3);display:inline-flex;}
.reg-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--b1);}
.reg-row .reg-logo{width:30px;height:30px;border-radius:8px;background:var(--bg2);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.reg-row .reg-logo img{width:18px;height:18px;object-fit:contain;}
/* Credential rows (Settings → Credentials): name with its status beside it, actions
   grouped at the end, a real icon button for delete, no divider under the last row. */
.reg-row:last-child{border-bottom:none;}
.reg-row .reg-main{flex:1;min-width:0;}
.reg-row .reg-name{display:flex;align-items:center;gap:7px;min-width:0;font-weight:600;font-size:12.5px;color:var(--t1);}
.reg-row .reg-name>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reg-row .reg-name .bdg{flex-shrink:0;font-size:9.5px;}
.reg-row .reg-sub{font-size:11px;color:var(--t3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reg-row .reg-acts{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.reg-del{width:28px;height:28px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--t3);display:grid;place-items:center;cursor:pointer;padding:0;transition:color .13s,background .13s;}
.reg-del:hover{color:var(--r);background:var(--rb);}
.reg-del:focus-visible{outline:none;color:var(--r);box-shadow:0 0 0 2px var(--r);}
.reg-del svg{width:15px;height:15px;}
.reg-empty{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--t3);line-height:1.5;}
.reg-empty .reg-logo{width:30px;height:30px;border-radius:8px;background:var(--bg2);border:1px dashed var(--b2,var(--b1));display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--t4);}
.reg-empty .reg-logo svg,.reg-row .reg-logo svg{width:16px;height:16px;}
@media(max-width:560px){.reg-row{flex-wrap:wrap;}.reg-row .reg-acts{width:100%;justify-content:flex-end;}.reg-del{width:44px;height:44px;}}
/* Storage-provider brand tile — the same shape as .reg-logo, used by the site
   Backups tabs and the server Backups panel. Carries its own box so the sprite
   marks (#bkl-*) sit on a tile instead of floating at intrinsic size. */
.bk-provlogo{width:30px;height:30px;border-radius:8px;background:var(--bg2);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* Redirect-rule reorder arrows: a stacked pair, so each is half the height of a
   normal xs button and carries no padding of its own. Disabled at the ends of
   the list rather than hidden, so the pair does not jump around as rules move. */
.sdv .rd-ord{height:15px;min-height:0;padding:0 5px;line-height:1;border-radius:5px;color:var(--t3);}
.sdv .rd-ord svg{width:11px;height:11px;display:block;}
.sdv .rd-ord:hover:not(:disabled){color:var(--a);background:var(--ab);}
.sdv .rd-ord:disabled{opacity:.3;cursor:default;}

/* ── SSL page (redesigned, wizard-style) ── */
.ssl-fseg{display:flex;gap:3px;background:var(--bg2);border-radius:11px;padding:4px;margin-bottom:18px;}
.ssl-fseg .fchip{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;user-select:none;transition:.15s;}
.ssl-fseg .fchip.on{background:var(--w);color:var(--t1);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.ssl-fseg .fchip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.ssl-tgl{display:inline-flex;width:34px;height:20px;border-radius:99px;background:var(--b2);padding:0 2px;align-items:center;justify-content:flex-start;cursor:pointer;transition:background .18s;flex-shrink:0;}
.ssl-tgl.on{background:var(--g);justify-content:flex-end;}
.ssl-tgl b{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);display:block;}
.ssl-tgl.disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.ssl-daypill{font-size:11px;font-weight:600;border-radius:6px;padding:2px 8px;white-space:nowrap;}
.ssl-nahead{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;cursor:pointer;user-select:none;margin-bottom:10px;transition:background .15s;}
.ssl-nahead:hover{background:var(--bg2);}
.ssl-nahead > svg{flex-shrink:0;}
.ssl-natl{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:2px 9px;}
.ssl-natl > span{white-space:nowrap;}
.ssl-napills{display:flex;align-items:center;gap:9px;}
/* A phone: the label and the count each wrapped onto two lines and both
   icons were squeezed to 0px. The pills take a line of their own, under
   the label; the chevron stays on the heading line. */
@media(max-width:560px){
  .ssl-nahead{flex-wrap:wrap;row-gap:6px;}
  .ssl-napills{order:2;flex-basis:100%;padding-left:25px;}
}
/* Needs-attention — 3-up cards with a muted slate-blue day KPI box */
.ssl-nagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;}
.ssl-nacard{border:1px solid var(--b1);border-radius:13px;padding:15px 15px 13px;background:var(--w);display:flex;flex-direction:column;transition:box-shadow .22s ease,border-color .22s ease,transform .18s ease;}
.ssl-nacard:hover{box-shadow:0 12px 26px rgba(71,85,105,.13);border-color:var(--b2);transform:translateY(-3px);}
.ssl-nagrid.anim .ssl-nacard{animation:naRise .55s cubic-bezier(.22,1,.36,1) backwards;}
@keyframes naRise{from{opacity:0;transform:translateY(11px);}}
@keyframes sslDp{0%,100%{opacity:1;}50%{opacity:.4;}}
.ssl-nch{display:flex;align-items:center;gap:12px;}
.ssl-kpi{width:60px;flex-shrink:0;border-radius:11px;padding:9px 6px 8px;text-align:center;color:#fff;background:linear-gradient(160deg,#5b74a0,#42567c);box-shadow:0 4px 10px rgba(66,86,124,.28),inset 0 1px 0 rgba(255,255,255,.16);}
.ssl-kpi .u{font-size:8.5px;font-weight:700;letter-spacing:.7px;opacity:.8;}
.ssl-kpi .n{font-size:23px;font-weight:700;line-height:1.02;letter-spacing:-.5px;margin-top:1px;}
.ssl-kseg{display:flex;gap:2px;justify-content:center;margin-top:6px;}
.ssl-kseg i{width:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.32);}
.ssl-kseg i.on{background:#fff;}
.ssl-ncid{min-width:0;flex:1;}
.ssl-ndomr{display:flex;align-items:center;gap:5px;min-width:0;}
.ssl-ndomr .lk{width:13px;height:13px;flex-shrink:0;color:var(--a);}
.ssl-ndom{font-size:14.5px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.ssl-ndom:hover{color:var(--a);}
.ssl-npill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.2px;padding:3px 9px;border-radius:20px;margin-top:6px;}
.ssl-npill.crit{background:var(--rb);color:var(--r);}
.ssl-npill.exp{background:var(--yb);color:var(--y);}
.ssl-npill .pdot{width:5px;height:5px;border-radius:50%;}
.ssl-npill.crit .pdot{background:var(--r);animation:sslDp 1.4s ease-in-out infinite;}
.ssl-npill.exp .pdot{background:var(--y);}
.ssl-nmeta{font-size:11.5px;color:var(--t3);margin:13px 0 12px;line-height:1.6;display:flex;flex-direction:column;gap:2px;}
.ssl-nmeta svg{width:13px;height:13px;color:var(--t4);vertical-align:-2px;margin-right:6px;}
.ssl-ndv{height:1px;background:var(--b1);margin:0 -15px 12px;}
.ssl-nfoot{display:flex;align-items:center;gap:7px;margin-top:auto;}
.ssl-nrbtn{flex:1;border-radius:9px;height:36px;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;transition:background .15s,box-shadow .15s,border-color .15s,color .15s;}
.ssl-nrbtn svg{width:14px;height:14px;}
.ssl-nrn{background:var(--a);color:#fff;border:1px solid var(--a);box-shadow:0 2px 6px rgba(37,99,235,.26);}
.ssl-nrn:hover{background:var(--ah);box-shadow:0 5px 14px rgba(37,99,235,.32);}
.ssl-nrno{background:var(--w);color:var(--a);border:1px solid var(--ab);}
.ssl-nrno:hover{background:var(--ab);border-color:var(--a);}
.ssl-nmore{width:36px;height:36px;border:1px solid var(--b1);background:var(--w);color:var(--t4);border-radius:9px;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.ssl-nmore:hover{background:var(--bg2);color:var(--a);}
.ssl-tblmore{background:none;border:0;padding:2px;cursor:pointer;color:var(--t4);display:inline-flex;align-items:center;justify-content:center;font:inherit;border-radius:6px;transition:color .15s,background .15s;}
.ssl-tblmore:hover{color:var(--t2);background:var(--bg2);}

/* ── SMTP Global card — wizard-style redesign ── */
.smtp2-card{background:var(--w);border:1px solid var(--b1);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.04);}
.smtp2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:17px 20px 15px;border-bottom:1px solid var(--b1);}
.smtp2-htitle{display:flex;align-items:center;gap:11px;min-width:150px;flex:1 1 auto;}
.smtp2-hbadge{width:34px;height:34px;border-radius:10px;background:var(--ab);color:var(--a);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.smtp2-hbadge svg{width:19px;height:19px;}
/* Danger tint for the same badge — used by the delete-credential dialog, which
   previously hand-rolled this geometry inline with no class, so `.smtp2-hbadge
   svg` never reached its icon and the glyph filled the 34px box edge to edge. */
.smtp2-hbadge.danger{background:var(--rb);color:var(--r);}
.smtp2-ct{font-size:15.5px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px;}
.smtp2-apill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--g);background:var(--gb);padding:2px 8px;border-radius:20px;}
.smtp2-apill .d{width:5px;height:5px;border-radius:50%;background:var(--g);animation:smtpPl 1.6s ease-in-out infinite;}
@keyframes smtpPl{0%,100%{opacity:1}50%{opacity:.4}}
.smtp2-csb{font-size:12px;color:var(--t3);margin-top:4px;}
.smtp2-srvwrap{display:flex;flex-direction:column;gap:6px;align-items:flex-end;position:relative;flex-shrink:0;}
.smtp2-srvlbl{font-size:10.5px;font-weight:600;color:var(--t4);letter-spacing:.3px;}
.smtp2-srvsel{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 12px;border:1px solid var(--b1);border-radius:11px;background:var(--w);cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:200px;}
.smtp2-srvsel:hover,.smtp2-srvsel.open{border-color:var(--a);box-shadow:0 0 0 3px rgba(37,99,235,.08);}
.smtp2-srvsel .plogo{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.smtp2-srvsel .plogo svg,.smtp2-srvsel .plogo img{width:20px;height:20px;object-fit:contain;}
.smtp2-srvsel .sname{font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;}
.smtp2-srvsel .pname{font-size:11.5px;color:var(--t3);white-space:nowrap;}
.smtp2-srvsel .cv{margin-left:auto;width:16px;height:16px;color:var(--t3);transition:transform .18s;flex-shrink:0;}
.smtp2-srvsel.open .cv{transform:rotate(180deg);}
.smtp2-srvmenu{position:absolute;top:70px;right:0;width:232px;max-height:300px;overflow:auto;background:var(--w);border:1px solid var(--b1);border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,.14);padding:5px;z-index:60;display:none;}
.smtp2-srvmenu.show{display:block;animation:smtpMrise .16s ease;}
@keyframes smtpMrise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.smtp2-srvitem{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--t1);}
.smtp2-srvitem:hover{background:var(--bg2);}
.smtp2-srvitem .plogo{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.smtp2-srvitem .plogo svg,.smtp2-srvitem .plogo img{width:18px;height:18px;object-fit:contain;}
.smtp2-srvitem .nm{font-weight:500;}
.smtp2-srvitem .pn{color:var(--t3);font-size:11px;margin-left:auto;}
.smtp2-body{padding:17px 20px 19px;}
.smtp2-fl{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:9px;display:block;}
.smtp2-pvrow{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:19px;}
.smtp2-pv{position:relative;border:1px solid var(--b1);border-radius:13px;padding:14px 8px 11px;display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;text-align:center;transition:border-color .16s,background .16s,transform .16s,box-shadow .16s;}
.smtp2-pv:hover{border-color:var(--ab);transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,99,235,.09);}
.smtp2-pv.on{border:2px solid var(--a);background:var(--ab);padding:13px 7px 10px;box-shadow:0 4px 12px rgba(37,99,235,.12);}
.smtp2-pv .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.smtp2-pv .ic img{width:24px;height:24px;object-fit:contain;}
.smtp2-pv .ic svg{width:23px;height:23px;}
.smtp2-pv .pn{font-size:12px;font-weight:600;color:var(--t1);}
.smtp2-pv .chk{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--a);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(37,99,235,.4);animation:smtpPop .3s cubic-bezier(.34,1.56,.64,1) both;}
.smtp2-pv .chk svg{width:12px;height:12px;}
@keyframes smtpPop{from{transform:scale(0)}to{transform:scale(1)}}
.smtp2-body .fr{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:14px;}
.smtp2-body .fg{margin-bottom:0;min-width:0;}
.smtp2-body .fl{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:8px;display:block;}
.smtp2-body .fi,.smtp2-body .fsel{height:44px;width:100%;box-sizing:border-box;border:1px solid var(--b1);border-radius:11px;padding:0 13px;font-size:13.5px;background:var(--w);color:var(--t1);transition:border-color .15s,box-shadow .15s;}
.smtp2-body .fi:focus,.smtp2-body .fsel:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.smtp2-body .fsel{cursor:pointer;}
.smtp2-note{display:flex;gap:10px;align-items:flex-start;background:var(--yb);border:1px solid var(--ybd);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--y);line-height:1.5;margin:5px 0 17px;}
.smtp2-note svg{width:16px;height:16px;color:var(--y);flex-shrink:0;margin-top:1px;}
.smtp2-foot{display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--b1);}
.smtp2-btest{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border:1px solid var(--b1);border-radius:10px;background:var(--w);color:var(--t2);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s;font-family:inherit;}
.smtp2-btest svg{width:14px;height:14px;}
.smtp2-btest:hover{border-color:var(--b2);background:var(--bg2);}
.smtp2-tin{height:44px;flex:1;min-width:0;box-sizing:border-box;border:1px solid var(--b1);border-radius:12px;padding:0 13px;font-size:13px;color:var(--t1);background:var(--w);font-family:inherit;outline:none;transition:.15s;}
.smtp2-tin:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.smtp2-bsave{height:36px;min-width:0;justify-content:center;padding:0 16px;border:none;border-radius:10px;background:var(--a);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;box-shadow:0 1px 2px rgba(16,24,40,.08);transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit;}
.smtp2-bsave svg{width:14px;height:14px;}
.smtp2-bsave:hover{background:var(--ah);box-shadow:0 2px 6px rgba(37,99,235,.2);}
.smtp2-bsave:active{transform:translateY(.5px);}
.smtp2-bsave.busy{pointer-events:none;}
.smtp2-bsave.ok{background:var(--g)!important;box-shadow:0 4px 14px rgba(22,163,74,.32)!important;}
.smtp2-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:smtpSp .6s linear infinite;display:inline-block;}
@keyframes smtpSp{to{transform:rotate(360deg)}}
.smtp2-tested{font-size:11.5px;color:var(--g);font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:13px;}
.smtp2-tested svg{width:13px;height:13px;}
@media(max-width:900px){.smtp2-pvrow{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.smtp2-pvrow{grid-template-columns:repeat(2,1fr);}.smtp2-head{flex-direction:column;}.smtp2-srvwrap{align-items:flex-start;}.smtp2-srvmenu{right:auto;left:0;}}
/* ── SMTP secondary sections (assignments / queue / overrides / change log) ── */
.smtp2-shead{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 14px;padding:16px 20px 14px;border-bottom:1px solid var(--b1);}
.smtp2-shead>div:last-child{margin-left:auto;}
.smtp2-sbody{padding:14px 20px 18px;}
.smtp2-qbody{padding:6px 8px 10px;}
.smtp2-hpill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;background:var(--gb);color:var(--g);}
.smtp2-hpill.warn{background:var(--yb);color:var(--y);}
.smtp2-ibtn{height:34px;min-width:34px;padding:0 9px;border:1px solid var(--b1);border-radius:9px;background:var(--w);color:var(--t3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:600;font-family:inherit;transition:background .15s,border-color .15s,color .15s,transform .12s;flex-shrink:0;}
.smtp2-ibtn svg{width:16px;height:16px;}
.smtp2-ibtn:hover{background:var(--bg2);border-color:var(--b2);}
.smtp2-ibtn:active{transform:scale(.94);}
.smtp2-ibtn.accent{color:var(--a);}
.smtp2-ibtn.accent:hover{background:var(--ab);border-color:var(--ab);}
.smtp2-ibtn.spin svg{animation:smtpSp .6s linear infinite;}
.smtp2-lrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--b1);border-radius:12px;background:var(--w);transition:border-color .16s,box-shadow .16s,transform .16s;}
.smtp2-lrow:hover{border-color:var(--ab);transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,99,235,.09);}
.smtp2-lrow.dashed{border-style:dashed;background:var(--bg2);}
.smtp2-lico{width:30px;height:30px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.smtp2-lico img{width:18px;height:18px;object-fit:contain;}
.smtp2-lico svg{width:16px;height:16px;}
.smtp2-lmain{min-width:0;flex:1;}
.smtp2-lname{font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.smtp2-lsub{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.smtp2-ppill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;background:var(--ab);border:1px solid var(--ab);color:var(--ah);padding:5px 10px;border-radius:9px;white-space:nowrap;flex-shrink:0;}
.smtp2-ppill img{width:14px;height:14px;object-fit:contain;}
.smtp2-ppill svg{width:14px;height:14px;}
.smtp2-rbtn{width:32px;height:32px;border:1px solid var(--b1);border-radius:8px;background:var(--w);color:var(--t3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s,transform .12s;}
.smtp2-rbtn svg{width:15px;height:15px;}
.smtp2-rbtn:hover{background:var(--bg2);border-color:var(--b2);}
.smtp2-rbtn:active{transform:scale(.92);}
.smtp2-rbtn.danger{border-color:var(--rbd);color:var(--r);}
.smtp2-rbtn.danger:hover{background:var(--rb);border-color:var(--rbd);}
.smtp2-asw{position:relative;flex-shrink:0;width:40px;height:23px;}
.smtp2-asw input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.smtp2-asw .tk{position:absolute;inset:0;background:var(--b2);border-radius:20px;transition:background .18s;}
.smtp2-asw .tk::after{content:'';position:absolute;top:2px;left:2px;width:19px;height:19px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s;}
.smtp2-asw input:checked+.tk{background:var(--a);}
.smtp2-asw input:checked+.tk::after{transform:translateX(17px);}
.smtp2-sfoot{display:flex;align-items:center;gap:10px;padding-top:15px;margin-top:14px;border-top:1px solid var(--b1);}
.smtp2-sfhint{font-size:11.5px;color:var(--t3);margin-right:auto;}
.smtp2-bapply{height:36px;padding:0 16px;border:none;border-radius:10px;background:var(--a);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;box-shadow:0 1px 2px rgba(16,24,40,.08);transition:background .15s,box-shadow .15s,transform .1s;}
.smtp2-bapply svg{width:14px;height:14px;}
.smtp2-bapply:hover{background:var(--ah);box-shadow:0 2px 6px rgba(37,99,235,.2);}
.smtp2-bapply:active{transform:translateY(.5px);}
.smtp2-qhead{display:grid;grid-template-columns:1.1fr 1.9fr .6fr .9fr;gap:8px;padding:9px 12px;font-size:10px;font-weight:600;color:var(--t4);letter-spacing:.4px;text-transform:uppercase;}
.smtp2-qr{display:grid;grid-template-columns:1.1fr 1.9fr .6fr .9fr;gap:8px;align-items:center;padding:11px 12px;border-radius:10px;transition:background .14s;}
.smtp2-qr:hover{background:var(--bg2);}
.smtp2-qid{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--t1);}
.smtp2-qtime{font-size:11px;color:var(--t3);margin-top:1px;}
.smtp2-qaddr{font-size:12.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.smtp2-qto{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.smtp2-qsz{font-size:12px;color:var(--t3);}
.smtp2-qdiv{height:1px;background:var(--b1);margin:0 12px;}
.smtp2-qbadge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.smtp2-qbadge svg{width:12px;height:12px;}
.smtp2-qbadge.def{color:var(--y);background:var(--yb);}
.smtp2-qbadge.act{color:var(--bl);background:var(--blb);}
.smtp2-qbadge.hold{color:var(--r);background:var(--rb);}
.smtp2-qempty{text-align:center;color:var(--t3);font-size:12.5px;padding:26px 12px;}
.smtp2-qempty.ok{color:var(--g);}
.smtp2-tl{display:flex;flex-direction:column;}
.smtp2-tlr{display:flex;gap:13px;}
.smtp2-tld{display:flex;flex-direction:column;align-items:center;}
.smtp2-tldot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.smtp2-tldot svg{width:15px;height:15px;}
.smtp2-tldot.ok{background:var(--gb);color:var(--g);}
.smtp2-tldot.info{background:var(--ab);color:var(--a);}
.smtp2-tldot.err{background:var(--rb);color:var(--r);}
.smtp2-tldot.neu{background:var(--bg2);color:var(--t3);}
.smtp2-tlline{width:1px;flex:1;background:var(--b1);margin-top:4px;}
.smtp2-tlc{padding-top:3px;padding-bottom:16px;}
.smtp2-tlr:last-child .smtp2-tlline{display:none;}
.smtp2-tlr:last-child .smtp2-tlc{padding-bottom:2px;}
.smtp2-tltx{font-size:13px;color:var(--t1);line-height:1.45;}
.smtp2-tltx b{font-weight:600;}
.smtp2-tlmeta{font-size:11.5px;color:var(--t3);margin-top:3px;}
@keyframes smtp2Rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.smtp2-anim{animation:smtp2Rise .45s cubic-bezier(.22,1,.36,1) both;}
@keyframes smtp2Shim{0%{background-position:-240px 0}100%{background-position:240px 0}}
.smtp2-sk{background:var(--bg2);background-image:linear-gradient(90deg,var(--bg2) 0,var(--b1) 48px,var(--bg2) 96px);background-size:240px 100%;animation:smtp2Shim 1.1s linear infinite;border-radius:6px;display:block;}
.smtp2-skrow{height:52px;border-radius:12px;margin-bottom:9px;}
.smtp2-skqr{height:38px;border-radius:8px;margin:8px 12px;}
/* compact server picker in card headers */
.smtp2-msel{height:34px;border:1px solid var(--b1);border-radius:9px;background:var(--w);color:var(--t2);font-size:12px;font-weight:600;font-family:inherit;padding:0 8px;max-width:158px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.smtp2-msel:hover{border-color:var(--b2);}
.smtp2-msel:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
/* per-server credential dropdown (assignments) */
.smtp2-asgwrap{position:relative;flex-shrink:0;margin-left:auto;}
.smtp2-asgsel{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 11px;border:1px solid var(--b1);border-radius:10px;background:var(--w);cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s;max-width:196px;}
.smtp2-asgsel:hover{border-color:var(--b2);}
.smtp2-asgsel.open{border-color:var(--a)!important;box-shadow:0 0 0 3px rgba(37,99,235,.08);}
.smtp2-asgsel img{width:15px;height:15px;object-fit:contain;flex-shrink:0;}
.smtp2-asgsel svg.pi{width:15px;height:15px;flex-shrink:0;}
.smtp2-asgsel .nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.smtp2-asgsel svg.cv{width:14px;height:14px;color:var(--t3);flex-shrink:0;transition:transform .18s;}
.smtp2-asgsel.open svg.cv{transform:rotate(180deg);}
.smtp2-asgmenu{position:absolute;right:0;top:calc(100% + 5px);width:212px;max-height:264px;overflow:auto;background:var(--w);border:1px solid var(--b1);border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,.16);padding:5px;z-index:40;display:none;}
.smtp2-asgmenu.show{display:block;animation:smtpMrise .16s ease;}
.smtp2-asgitem{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--t1);}
.smtp2-asgitem:hover{background:var(--bg2);}
.smtp2-asgitem img{width:16px;height:16px;object-fit:contain;flex-shrink:0;}
.smtp2-asgitem svg.pi{width:16px;height:16px;flex-shrink:0;}
.smtp2-asgitem .ck{margin-left:auto;color:var(--a);display:none;}
.smtp2-asgitem.sel .ck{display:inline-flex;}
.smtp2-asgitem.none{color:var(--t3);}
.smtp2-asgitem.none svg{width:16px;height:16px;}
.smtp2-asgdiv{height:1px;background:var(--b1);margin:4px 8px;}
.smtp2-asgadd{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--a);font-weight:600;}
.smtp2-asgadd:hover{background:var(--ab);}
.smtp2-asgadd svg{width:15px;height:15px;}
/* inline credential editor (replaces the modal) */
.smtp2-creded{border:1px solid var(--ab);background:var(--ab);border-radius:13px;padding:15px 15px 14px;margin-bottom:13px;overflow:hidden;}
.smtp2-creded.open{animation:smtp2Rise .32s cubic-bezier(.22,1,.36,1) both;}
.smtp2-credhd{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:600;color:var(--t1);margin-bottom:13px;}
.smtp2-credx{width:28px;height:28px;border:1px solid var(--b1);border-radius:8px;background:var(--w);color:var(--t3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;}
.smtp2-credx:hover{background:var(--bg2);border-color:var(--b2);}
.smtp2-credx svg{width:14px;height:14px;}
.smtp2-credhint{font-size:11.5px;color:var(--t3);margin-top:8px;}
.smtp2-credfoot{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid var(--b1);}
.smtp2-creded .fl{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:9px;display:block;}
.smtp2-creded .fr{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px;}
.smtp2-creded .fg{margin-bottom:13px;min-width:0;}
.smtp2-creded .fr .fg{margin-bottom:0;}
.smtp2-creded .fi,.smtp2-creded .fsel{height:44px;width:100%;box-sizing:border-box;border:1px solid var(--b1);border-radius:11px;padding:0 13px;font-size:13.5px;background:var(--w);color:var(--t1);font-family:inherit;transition:border-color .15s,box-shadow .15s;}
.smtp2-creded .fi:focus,.smtp2-creded .fsel:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.smtp2-creded .fsel{cursor:pointer;}
.smtp2-creded .smtp2-pvrow{margin-bottom:14px;}
/* side-by-side pair (overrides + change log) under the email queue */
.smtp2-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:13px;align-items:start;}
.smtp2-duo>.smtp2-card{margin:0;}
/* credential test gating */
/* smtp2 popup modal (delete confirm etc.) */
.smtp2-modal-ov{position:fixed;inset:0;background:rgba(16,24,40,.45);display:flex;align-items:center;justify-content:center;z-index:3000;padding:20px;animation:smtpModFade .15s ease;}
.smtp2-modal{background:var(--w);border-radius:16px;width:100%;max-width:452px;box-shadow:0 24px 64px rgba(16,24,40,.3);overflow:hidden;animation:smtpModRise .2s cubic-bezier(.22,1,.36,1);}
.smtp2-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 14px;border-bottom:1px solid var(--b1);font-size:15px;font-weight:600;color:var(--t1);}
.smtp2-modal-bd{padding:18px 20px;display:flex;gap:12px;align-items:flex-start;}
.smtp2-modal-ft{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:13px 20px;border-top:1px solid var(--b1);background:var(--bg2);}
@keyframes smtpModFade{from{opacity:0}to{opacity:1}}
@keyframes smtpModRise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.smtp2-modal-form{display:block;max-height:min(72vh,560px);overflow:auto;}
.smtp2-modal .fl{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:8px;display:block;}
.smtp2-modal .fg{margin-bottom:13px;min-width:0;}
.smtp2-modal .fr{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:13px;}
.smtp2-modal .fr .fg{margin-bottom:0;}
.smtp2-modal .fi,.smtp2-modal .fsel{height:44px;width:100%;box-sizing:border-box;border:1px solid var(--b1);border-radius:11px;padding:0 13px;font-size:13.5px;background:var(--w);color:var(--t1);font-family:inherit;transition:border-color .15s,box-shadow .15s;}
.smtp2-modal .fi:focus,.smtp2-modal .fsel:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.smtp2-modal .fsel{cursor:pointer;}
.smtp2-modal .smtp2-credhint{margin-top:8px;}
.smtp2-bdanger{height:36px;padding:0 16px;border:none;border-radius:10px;background:var(--r);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;box-shadow:0 1px 2px rgba(16,24,40,.08);transition:background .15s,box-shadow .15s,transform .1s;}
.smtp2-bdanger svg{width:14px;height:14px;}
.smtp2-bdanger:hover{background:var(--r);box-shadow:0 2px 6px rgba(220,38,38,.24);}
.smtp2-bdanger:active{transform:translateY(.5px);}
.smtp2-bdanger:disabled{background:var(--rbd);cursor:not-allowed;box-shadow:none;}
.smtp2-bsave:disabled{background:var(--b2);cursor:not-allowed;box-shadow:none;}
.smtp2-bsave:disabled:hover{background:var(--b2);transform:none;box-shadow:none;}
.smtp2-credok{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--g);background:var(--gb);border:1px solid var(--gbd);border-radius:9px;padding:8px 11px;}
.smtp2-credok svg{width:15px;height:15px;flex-shrink:0;}
.smtp2-crederr{display:flex;align-items:flex-start;gap:7px;margin:10px 0 0;font-size:12.5px;font-weight:500;color:var(--r);background:var(--rb);border:1px solid var(--rbd);border-radius:9px;padding:8px 11px;line-height:1.45;}
.smtp2-crederr svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;}
/* change-log "view more" */
.smtp2-tlmore{width:100%;margin-top:6px;padding:9px;border:1px solid var(--b1);border-radius:9px;background:var(--w);color:var(--a);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;}
.smtp2-tlmore:hover{background:var(--ab);border-color:var(--ab);}
/* collapsible card (server assignments) */
.smtp2-collchev{width:18px;height:18px;color:var(--t3);transition:transform .2s;flex-shrink:0;}
.smtp2-card.collapsed .smtp2-collchev{transform:rotate(-90deg);}
.smtp2-card.collapsed>.smtp2-sbody{display:none;}
.smtp2-card.collapsed>.smtp2-shead{border-bottom:0;}
/* ── responsive: tablet + mobile ── */
@media(max-width:768px){
  .smtp2-body .fr,.smtp2-creded .fr{grid-template-columns:1fr;}
  .smtp2-credfoot{flex-wrap:wrap;}
  .smtp2-qhead,.smtp2-qr{grid-template-columns:1fr 1.4fr .7fr;}
  .smtp2-qhead>div:nth-child(3),.smtp2-qr>div:nth-child(3){display:none;}
}
@media(max-width:560px){
  .smtp2-asgsel{max-width:142px;}
  .smtp2-lrow,.smtp2-creded{padding-left:11px;padding-right:11px;}
  .smtp2-shead,.smtp2-sbody{padding-left:15px;padding-right:15px;}
  .smtp2-asgmenu{width:min(212px,92vw);}
}
.ssl-thead{display:grid;grid-template-columns:1.9fr .9fr 1.1fr .7fr 66px;gap:12px;padding:11px 16px;background:var(--bg2);font-size:10px;color:var(--t4);font-weight:600;letter-spacing:.5px;}
.ssl-row{display:grid;grid-template-columns:1.9fr .9fr 1.1fr .7fr 66px;gap:12px;padding:12px 16px;align-items:center;border-top:1px solid var(--b1);transition:background .12s;}
.ssl-row:hover{background:var(--bg2);}
/* Narrow screens — drop the Server + Auto columns so the table doesn't cramp */
@media(max-width:640px){
  .ssl-thead,.ssl-row{grid-template-columns:1fr 1.1fr 66px;}
  .ssl-thead span:nth-child(2),.ssl-thead span:nth-child(4),
  .ssl-row>*:nth-child(2),.ssl-row>*:nth-child(4){display:none;}
}
/* SSL buttons — match the new sites/wizard design system (blue var(--a), 38px, radius 10) */
.ssl-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:10px;border:1px solid transparent;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s,color .15s;}
.ssl-btn svg{width:15px;height:15px;flex-shrink:0;}
.ssl-btn-p{background:var(--a);color:#fff;border-color:var(--a);box-shadow:0 1px 2px rgba(37,99,235,.22);}
.ssl-btn-p:hover{background:var(--ah);border-color:var(--ah);}
.ssl-btn-s{background:var(--w);color:var(--t2);border-color:var(--b1);}
.ssl-btn-s:hover{border-color:var(--b2);color:var(--t1);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.ssl-btn-o{background:var(--w);color:var(--a);border-color:var(--ab);}
.ssl-btn-o:hover{background:var(--ab);border-color:var(--a);}
.ssl-btn-xs{height:32px;padding:0 13px;font-size:12.5px;border-radius:9px;}
.ssl-btn-ic{width:38px;height:38px;padding:0;color:var(--t3);}
.ssl-btn-ic:hover{color:var(--t1);}
/* SSL page zone panel (matches the Sites .fw-card design language) */
.ssl-panel{background:var(--w);border:1px solid var(--b1);border-radius:16px;padding:22px 24px;}
.ssl-sub{border:1px solid var(--b1);border-radius:12px;overflow:hidden;background:var(--w);}
/* Health bar — gapped, rounded segments with a left-to-right grow-in */
.ssl-hbar{flex:1;height:8px;display:flex;gap:3px;}
.ssl-hbar i{display:block;height:100%;border-radius:99px;min-width:6px;transform-origin:left;}
.ssl-hbar.anim i{animation:sslGrow .85s cubic-bezier(.22,1,.36,1) both;}
@keyframes sslGrow{from{transform:scaleX(0);opacity:0;}to{transform:scaleX(1);opacity:1;}}
/* Content fade/slide-in after the skeleton clears */
.ssl-in{animation:sslFade .4s ease both;}
@keyframes sslFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
/* Staggered rise-in for needs-attention cards + certificate rows (first paint only) */
.ssl-an{opacity:0;transform:translateY(10px);}
.ssl-an.in{animation:sslRise .45s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes sslRise{to{opacity:1;transform:translateY(0);}}

/* ── TABS ── */
.tabs{display:flex;gap:2px;background:var(--bg);border-radius:var(--radius-xs);padding:3px;width:fit-content;}
.tab{padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;transition:all .15s;user-select:none;}
.tab:hover{color:var(--t2);}
.tab.on{background:var(--w);color:var(--t1);font-weight:600;box-shadow:var(--shadow);}
.dtabs{display:flex;border-bottom:1px solid var(--b1);margin-bottom:16px;overflow-x:auto;position:relative;scrollbar-width:none;-ms-overflow-style:none;}
.dtabs::-webkit-scrollbar{display:none;}
.dtab-mobile-sel{display:none;}
@media(max-width:600px){.dtabs{display:none !important;}.dtab-mobile-sel{display:block;margin-bottom:14px;width:100%;}}
/* Mobile drawer sub-nav (server/site) — off-canvas grouped sidebar */
.dtab-mobile-sel.mnav-hidden{display:none!important;}
.sd-drawer-trg{display:none;}
.sd-drawer-bd{display:none;}
@media(max-width:860px){
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-drawer-trg{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 14px;margin-bottom:14px;background:var(--w);border:1px solid var(--b1);border-radius:11px;font-size:14px;font-weight:600;color:var(--t1);cursor:pointer;font-family:inherit;}
  .sd-drawer-trg svg{width:18px;height:18px;color:var(--t2);flex-shrink:0;}
  /* Full-height off-canvas drawer. Override the base .sd-side height (calc(100vh
     - 58px), which left it 58px short → bottom-nav showed through) with an
     explicit viewport height. 100dvh tracks mobile browser chrome; 100vh is the
     fallback. This is robust even during the brief viewIn transform on .view
     (which would otherwise re-anchor a fixed/auto-height panel). */
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-side{display:flex!important;flex-direction:column;position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;width:min(84vw,300px);transform:translateX(-100%);transition:transform .26s cubic-bezier(.32,.72,0,1);z-index:1200;box-shadow:4px 0 28px rgba(0,0,0,.2);overflow-y:auto;border-right:1px solid var(--b1);padding:0 10px 16px;}
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-side.drawer-open{transform:translateX(0);}
  .sd-drawer-bd{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1199;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
  .sd-drawer-bd.on{opacity:1;visibility:visible;}
  .sd-drawer-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;margin:0 -10px 6px;padding:12px 14px;background:var(--w);border-bottom:1px solid var(--b1);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);z-index:2;}
  .sd-drawer-x{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--bg2);border-radius:8px;color:var(--t2);cursor:pointer;}
  .sd-drawer-x svg{width:18px;height:18px;}
  /* 44px mobile tap targets inside the drawer (DoD rule 5) */
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-side .sd-item{padding:12px 12px;min-height:44px;font-size:14px;}
  :is(#view-sitedetail,#view-serveroverview,#view-settings) .sd-side .sd-kid{padding:12px 12px 12px 26px;min-height:44px;font-size:13.5px;}
}

/* ── Site-detail MOBILE polish (≤700px) ─────────────────────────────────────
   Audited at 390px: the desktop header row scrambled (title orphaned above the
   back/icon cluster) and the 4-column data tables overlapped. Restack both. */
@media(max-width:700px){
  /* Header → three tidy rows: [← icon title] / [chips] / [status + actions].
     display:contents promotes the title+chips wrapper's children into the
     cluster's flex row so they can be re-flowed independently. */
  .ph.sdh > div:first-child{flex-wrap:wrap;gap:10px;}
  .ph.sdh > div:first-child > div{display:contents;}
  .sdh-name{flex:1;min-width:0;}
  .sdh-chips{flex-basis:100%;margin-top:0;}
  .sdh-actions{margin-left:0;width:100%;}
}
.dtabs-wrap{position:relative;}
.dtabs-wrap::after{content:'';position:absolute;right:0;top:0;bottom:1px;width:40px;background:linear-gradient(to right,transparent,var(--c));pointer-events:none;opacity:0;transition:opacity .2s;}
.dtabs-wrap.has-overflow::after{opacity:1;}
.dtab{padding:8px 14px;font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all .13s;user-select:none;}
.dtab.on{color:var(--a);border-bottom-color:var(--a);font-weight:600;}

/* ── SVG CHART ── */
.chart-wrap{position:relative;padding:10px 14px 4px;}
.chart-svg{width:100%;display:block;}
.chart-labels{display:flex;justify-content:space-between;padding:2px 14px 10px;font-size:10.5px;color:var(--t3);}

/* ── TERMINAL ── */
.terminal{background:#0f1117;border-radius:10px;overflow:hidden;}
.term-head{background:#1a1d2e;display:flex;align-items:center;gap:7px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.06);}
.term-dots{display:flex;gap:5px;}
.term-dot{width:11px;height:11px;border-radius:50%;}
.term-dot.rd{background:#ff5f56;}
.term-dot.yd{background:#febc2e;}
.term-dot.gd{background:#27c840;}
.term-title{font-size:11.5px;color:rgba(255,255,255,.35);margin-left:8px;font-family:'JetBrains Mono',monospace;}
.term-body{padding:14px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.7;height:260px;overflow-y:auto;scroll-behavior:smooth;}
.term-line{color:#a8b4cf;word-break:break-all;}
.term-line .prompt{color:#4F6EF7;}
.term-line .cmd{color:#e2e8f0;}
.term-line .out{color:#6b7a99;}
.term-line .ok{color:#0fa968;}
.term-line .err{color:#e53e3e;}
.term-line .warn2{color:#d97706;}
.term-line .comment{color:#4b5563;}
.term-input-row{display:flex;align-items:center;gap:8px;padding:2px 14px 12px;}
.term-input-row .prompt{color:#4F6EF7;font-family:'JetBrains Mono',monospace;font-size:12px;flex-shrink:0;}
.term-input-row input{flex:1;background:none;border:none;outline:none;font-family:'JetBrains Mono',monospace;font-size:12px;color:#e2e8f0;caret-color:#4F6EF7;}
.term-input-row input::placeholder{color:rgba(255,255,255,.18);}

/* ── UPTIME BARS ── */
.ubars{display:flex;gap:2px;align-items:flex-end;height:24px;}
.ub{flex:1;border-radius:2px;min-height:5px;}
.ub.ok{background:#a7f3d0;}
.ub.wa{background:var(--y);}
.ub.dn{background:#fca5a5;}

/* ── MISC ── */
/* Professional server card (FlyWP/RunCloud-style): calm, generous spacing,
   provider logo header, thin usage bars, subtle borders. */
.srv-card{background:var(--w);border:1px solid var(--b1);border-radius:var(--radius);padding:18px 18px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.srv-card:hover{border-color:var(--b2);box-shadow:var(--shadow-md);}
/* header: logo + name/ip | status + type */
.srv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.srv-head-l{display:flex;align-items:center;gap:11px;min-width:0;}
.srv-logo{width:34px;height:34px;border-radius:8px;background:var(--bg2);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.srv-logo img{display:block;}
.srv-hn{font-family:var(--font);font-size:15px;font-weight:600;color:var(--t1);letter-spacing:-.2px;line-height:1.2;}
.srv-ip{font-size:11.5px;color:var(--t3);margin-top:2px;font-family:var(--mono);}
.srv-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.srv-type{font-size:10px;padding:2px 8px;}
/* stat row: 3 equal columns with thin bars */
.srv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:2px 0 14px;}
.srv-stat-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px;}
.srv-stat-l{font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--t3);}
.srv-stat-v{font-size:14px;font-weight:700;color:var(--t1);}
.srv-bar{height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;}
.srv-bar-fill{height:100%;border-radius:3px;transition:width .3s ease;}
.srv-stat-sub{font-size:10.5px;color:var(--t4);margin-top:5px;}
/* meta line */
.srv-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--t3);padding:12px 0;border-top:1px solid var(--b1);margin-bottom:13px;}
.srv-meta-sites{font-weight:600;color:var(--a);cursor:pointer;}
.srv-meta-sites:hover{text-decoration:underline;}
.srv-meta-dot{color:var(--b2);}
.srv-meta-alert{font-size:10px;margin-left:auto;}
/* actions: one primary + icon buttons */
.srv-actions{display:flex;gap:7px;margin-top:auto;}
.srv-act-main{flex:1;justify-content:center;}
.srv-act-ic{width:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.srv-act-reboot{background:var(--r);color:#fff;border-color:var(--r);}
/* legacy aliases retained for safety (older fragments) */
.srv-ct{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:13px;}
.srv-prov{font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin-bottom:3px;}
.srv-mets{display:flex;flex-direction:column;gap:7px;margin-bottom:13px;}
.srv-met{display:flex;align-items:center;gap:8px;}
.srv-ml{font-size:10.5px;color:var(--t3);width:28px;font-weight:500;}
.srv-mv{font-size:11px;font-weight:700;width:28px;text-align:right;}
.srv-mv.ok{color:var(--g);}
.srv-mv.wa{color:var(--y);}
.srv-mv.dg{color:var(--r);}
.dr{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--b1);}
.dr:last-child{border-bottom:none;}
.bki{display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:1px solid var(--b1);}
.bki:last-child{border-bottom:none;}
.bkico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.bkn{font-size:12.5px;font-weight:600;color:var(--t1);}
.bkm{font-size:11px;color:var(--t3);margin-top:2px;}
.bkchips{display:flex;gap:4px;margin-left:auto;}
.bchip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;}
.bchip.b2{background:var(--gb);color:var(--g);border:1px solid rgba(72,187,120,.2);}
.bchip.r2{background:var(--gb);color:var(--g);border:1px solid rgba(72,187,120,.2);}
.bchip.s3{background:var(--gb);color:var(--g);border:1px solid rgba(72,187,120,.2);}
.bchip.fail{background:var(--rb) !important;color:var(--r) !important;border:1px solid rgba(229,62,62,.25) !important;opacity:.7;text-decoration:line-through;}

/* ─── Backup groups (global Backups page — professional, grouped by site) ─── */
.bkg-card{background:var(--w,#fff);border:1px solid var(--b1);border-radius:10px;margin:8px 18px;overflow:hidden;transition:border-color .15s;}
.bkg-card:hover{border-color:var(--b2,rgba(0,0,0,.08));}
.bkg-header{padding:16px 18px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.bkg-title-wrap{flex:1;min-width:0;}
.bkg-title{font-size:15px;font-weight:700;color:var(--t1);letter-spacing:-0.1px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bkg-subtitle{font-size:11.5px;color:var(--t3);margin-top:3px;font-variant-numeric:tabular-nums;}
.bkg-badge{display:inline-block;font-size:9.5px;font-weight:600;padding:2px 8px;border-radius:12px;letter-spacing:.2px;text-transform:none;}
.bkg-badge.bkg-warn{background:var(--yb);color:var(--y);border:1px solid var(--ybd);}
.bkg-badge.bkg-info{background:var(--gb);color:var(--g);border:1px solid rgba(72,187,120,.2);}

.bkg-actions{padding:0 18px 12px;display:flex;flex-wrap:wrap;gap:12px;}
.bkg-dl-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg);border:1px solid var(--b1);border-radius:8px;flex:1;min-width:240px;}
.bkg-dl-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;min-width:70px;}
.bkg-dl-size{font-size:14px;font-weight:700;color:var(--t1);flex:1;font-variant-numeric:tabular-nums;}

.bkg-footer{padding:10px 18px;border-top:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;background:var(--bg);font-size:10.5px;color:var(--t3);}
.bkg-stored{font-variant-numeric:tabular-nums;}
.bkg-history-toggle{cursor:pointer;color:var(--a);font-weight:600;font-size:11px;user-select:none;padding:4px 8px;border-radius:6px;transition:background .15s;}
.bkg-history-toggle:hover{background:var(--ab,rgba(79,110,247,.08));}

.bkg-history{border-top:1px solid var(--b1);background:var(--bg);}
.bkg-hist-row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--b1);}
.bkg-hist-row:last-child{border-bottom:0;}
.bkg-hist-row:hover{background:var(--w);}
.bkg-hist-date{font-size:11.5px;color:var(--t2);}
.bkg-hist-content{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.bkg-hist-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--w);border:1px solid var(--b1);border-radius:7px;}
.bkg-hist-chip-label{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.bkg-hist-chip-size{font-size:11.5px;color:var(--t1);font-weight:600;}

.bkg-section-header{margin:22px 18px 10px;padding:14px 18px;background:var(--yb);border:1px solid var(--ybd);border-radius:10px;}
.bkg-section-title{font-size:14px;font-weight:700;color:var(--y);}
.bkg-section-sub{font-size:11px;color:var(--t3);margin-top:4px;line-height:1.5;}

/* ── Sites card grid (WP Sync Pro inspired) ── */
.sites-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:4px 0;}
.site-card{background:var(--w);border:1px solid var(--b1);border-radius:10px;padding:16px 18px;cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;gap:10px;}
.site-card:hover{border-color:var(--b2);box-shadow:var(--shadow);}
.site-card-top{display:flex;align-items:center;gap:12px;}
.site-card-icon{width:36px;height:36px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;overflow:hidden;}
.site-card-icon img{width:100%;height:100%;object-fit:cover;}
.site-card-info{flex:1;min-width:0;}
.site-card-domain{font-weight:600;font-size:13.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.site-card-meta{font-size:11px;color:var(--t4);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.site-card-status{font-size:11.5px;font-weight:500;white-space:nowrap;}
.site-card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--b1);padding-top:10px;margin-top:auto;}
.site-card-actions{display:flex;gap:4px;}
.site-card-actions svg{width:16px;height:16px;color:var(--t4);cursor:pointer;padding:3px;border-radius:4px;transition:all .12s;}
.site-card-actions svg:hover{color:var(--a);background:var(--ab);}
.site-card-tag{font-size:9px;font-weight:500;padding:1px 6px;border-radius:4px;background:var(--bg2);color:var(--t3);border:1px solid var(--b1);}

/* ── KPI cards colored top borders ── */
.kpi-border-green{border-top:3px solid var(--g);}
.kpi-border-yellow{border-top:3px solid var(--y);}
.kpi-border-red{border-top:3px solid var(--r);}
.kpi-border-blue{border-top:3px solid var(--bl);}
.kpi-border-purple{border-top:3px solid var(--a);}
.kpi-border-orange{border-top:3px solid #f97316;}

/* ── Warning banners inside cards ── */
/* Block, not flex: every use is a sentence with a <strong> or <span> in it, and
   flex made each run of text its own column — on a phone the Cloudflare and
   Fail2Ban warnings read as three narrow columns. The one caller that wants a
   row (fail2ban.js) sets display:flex itself. */
.card-warn{background:var(--yb);border:1px solid var(--ybd);border-radius:8px;padding:10px 14px;font-size:11.5px;color:var(--y);display:block;line-height:1.5;}

/* ── Empty state (mockup empty-state.html: .empty) ── */
.empty-state,.empty{text-align:center;padding:64px 24px;}
.empty-state-icon{font-size:36px;margin-bottom:14px;opacity:.45;}
/* SVG empty icons: 48px, muted, centered (matches mockup .empty .ico) */
.empty-state-icon svg,.empty .ico svg{width:48px;height:48px;}
.empty-state-icon svg{color:var(--t4);opacity:1;}
.empty .ico{width:48px;height:48px;margin:0 auto 16px;color:var(--t4);}
.empty-state-title,.empty h3{font-size:16px;font-weight:600;color:var(--t1);margin-bottom:6px;}
.empty-state-desc,.empty p{font-size:14px;color:var(--t3);margin-bottom:16px;}

/* Sidebar status bar — already styled at line 107, duplicate removed */

@media (max-width: 1024px) {
  .sites-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 640px) {
  .sites-grid{grid-template-columns:1fr;}
}

@media (max-width: 640px) {
  .bkg-card{margin:8px 12px;}
  .bkg-header{padding:14px 14px 10px;flex-wrap:wrap;}
  .bkg-actions{padding:0 14px 10px;}
  .bkg-dl-item{min-width:0;flex-basis:100%;flex-wrap:wrap;padding:10px 12px;gap:6px 10px;}
  .bkg-dl-item .bkg-dl-label{flex:1 1 auto;min-width:0;}
  .bkg-dl-item .bkg-dl-size{flex:0 0 auto;}
  .bkg-dl-item .ddl-wrap{flex:1 1 100%;}
  .bkg-dl-item .ddl-wrap .btn,.bkg-dl-item .ddl-wrap > .btn{width:auto;}
  .bkg-footer{padding:10px 14px;flex-wrap:wrap;gap:8px;}
  .bkg-hist-row{grid-template-columns:1fr;padding:12px 14px;gap:8px;}
  .bkg-hist-date{grid-column:1;font-weight:600;color:var(--t1);}
  .bkg-hist-content{grid-column:1;justify-content:flex-start;flex-direction:column;align-items:stretch;gap:6px;}
  .bkg-hist-chip{justify-content:space-between;padding:8px 12px;}
  .bkg-card .btn{min-height:40px;padding:10px 14px;font-size:12px;}
  .bkg-card .ddl-chevron{min-width:40px;min-height:40px;}
  /* Cloud Providers picker on Backup Schedule tab */
  .bk-prov-row{padding:14px !important;gap:10px !important;}
  .bk-prov-row > div:first-child{width:32px !important;height:32px !important;font-size:15px !important;}
  .bk-prov-row .bk-prov-check{width:22px !important;height:22px !important;}
}
.prov-row{background:var(--bg);border:1px solid var(--b1);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.prov-row:last-child{margin-bottom:0;}
.prov-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.alt{padding:10px 13px;border-radius:8px;font-size:12px;display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;}
.alt.warn{background:var(--yb);border:1px solid var(--ybd);color:var(--y);}
.alt.ok{background:var(--gb);border:1px solid var(--gbd);color:var(--g);}
.alt.err{background:var(--rb);border:1px solid var(--rbd);color:var(--r);}
.alt.info{background:var(--blb);border:1px solid var(--blbd);color:var(--bl);}
.pps{display:flex;gap:5px;flex-wrap:wrap;}
.pp{padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:600;cursor:pointer;border:1px solid var(--b1);color:var(--t3);background:var(--w);transition:all .13s;user-select:none;}
.pp.on{background:var(--a);border-color:var(--a);color:#fff;}
.pp:hover:not(.on){border-color:var(--a);color:var(--a);}
.dskr{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--b1);}
.dskr:last-child{border-bottom:none;}
.dskn{font-size:12.5px;font-weight:500;color:var(--t1);min-width:110px;}
.dsksz{font-size:11.5px;font-weight:700;color:var(--t2);min-width:40px;text-align:right;}
.sslr{display:flex;align-items:center;gap:8px;}
.ssld{font-weight:700;font-size:11.5px;min-width:28px;}
.ssld.ok{color:var(--g);}
.ssld.wa{color:var(--y);}
.ssld.dg{color:var(--r);}
.rgb{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.rb{background:var(--bg);border:1px solid var(--b1);border-radius:8px;padding:11px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.rbl{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);margin-bottom:5px;}
.rbv{font-family:var(--font);font-size:19px;font-weight:800;color:var(--t1);letter-spacing:-1px;line-height:1;margin-bottom:6px;}
.rbn{font-size:11px;color:var(--t3);margin-top:4px;}
.gauge-ring{position:relative;width:70px;height:70px;margin-bottom:2px;}
.gauge-ring svg{width:70px;height:70px;transform:rotate(-90deg);}
.gauge-ring .gauge-bg{fill:none;stroke:var(--b1);stroke-width:7;}
.gauge-ring .gauge-fill{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .8s ease;}
.gauge-ring .gauge-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:16px;font-weight:800;letter-spacing:-.5px;color:var(--t1);}
/* Monitoring resource gauges (conic donut) + chart grids — mockup parity */
.mgauge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px;}
.mgauge{--p:0;--c:var(--a);width:118px;height:118px;border-radius:50%;display:grid;place-items:center;margin:0 auto;
  background:radial-gradient(closest-side,var(--w) 79%,transparent 80% 100%),conic-gradient(var(--c) calc(var(--p)*1%),var(--bg2) 0);}
.mgauge .gv{font-size:23px;font-weight:700;color:var(--t1);line-height:1;}
.mgauge .gl{font-size:11px;color:var(--t3);margin-top:3px;text-align:center;}
.mgauge-cap{font-size:12px;color:var(--t3);margin-top:10px;text-align:center;}
.mg2{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;}
.mloads{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:18px;gap:10px;}
.mload-v{font-size:26px;font-weight:700;color:var(--t1);}
.mload-l{font-size:11px;color:var(--t3);margin-top:2px;}
.mnet{display:flex;flex-direction:column;gap:12px;padding:16px 18px;}
.mnet-row{display:flex;align-items:center;gap:10px;}
@media(max-width:860px){.mg2{grid-template-columns:1fr;}.mgauge-row{grid-template-columns:1fr;}}
/* ── Add-Server wizard: horizontal step indicator (mockup add-server-wizard.html) ── */
.wzs{display:flex;align-items:center;gap:8px;margin:0 auto 22px;max-width:560px;}
.wzs .stp{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--t3);white-space:nowrap;}
.wzs .stp .num{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:600;border:1px solid var(--b1);background:var(--w);color:var(--t3);}
.wzs .stp.on{color:var(--t1);font-weight:600;}
.wzs .stp.on .num{background:var(--a);color:#fff;border-color:transparent;}
.wzs .stp.done{color:var(--t1);}
.wzs .stp.done .num{background:var(--g);color:#fff;border-color:transparent;}
.wzs .sep{flex:1;height:1px;background:var(--b1);}

/* ── Provisioning vertical stepper (mockup provisioning-stepper.html) ── */
.pvz{list-style:none;margin:0;padding:0;}
.pvz li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;position:relative;}
.pvz li:not(:last-child)::before{content:"";position:absolute;left:11px;top:30px;bottom:-6px;width:2px;background:var(--b1);}
.pvz li.done::before{background:var(--g);}
.pvz .pic{width:24px;height:24px;border-radius:999px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;z-index:1;}
.pvz .pic.done{background:var(--g);color:#fff;}
.pvz .pic.run{background:var(--w);border:2px solid var(--a);color:var(--a);}
.pvz .pic.pend{background:var(--bg2);border:1px solid var(--b1);color:var(--t3);}
.pvz .plbl{font-size:14px;padding-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--t1);}
.pvz li.pend .plbl{color:var(--t3);}
.pvz .pspin{width:13px;height:13px;border:2px solid var(--ab);border-top-color:var(--a);border-radius:50%;animation:pvzspin .7s linear infinite;display:inline-block;}
@keyframes pvzspin{to{transform:rotate(360deg);}}
.pvz-log{background:#15140f;color:#ecebe6;font-family:var(--mono,monospace);padding:14px;border-radius:8px;font-size:12.5px;line-height:1.6;margin-top:16px;max-height:220px;overflow:auto;}
.pvz-log .ok{color:#7fd49a;}.pvz-log .dim{color:#9b968a;}

/* Modal form atoms (mockup modals-*.html): segmented control + switch row */
.mseg{display:flex;gap:2px;background:var(--bg2);border-radius:7px;padding:3px;}
.mseg button{flex:1;border:0;background:transparent;padding:7px;border-radius:5px;font:inherit;font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;}
.mseg button.on{background:var(--w);color:var(--a);box-shadow:var(--shadow-md);}
.mswrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--b1);border-radius:9px;margin-top:10px;}
.mswrow>div:first-child{flex:1;min-width:0;}

/* Reusable toggle switch (PHP settings, feature toggles) */
.sp-sw{position:relative;display:inline-block;width:40px;height:23px;flex-shrink:0;}
.sp-sw input{opacity:0;width:0;height:0;position:absolute;margin:0;}
.sp-sw .sp-sw-t{position:absolute;inset:0;background:var(--b1);border-radius:23px;transition:background .18s ease;cursor:pointer;}
.sp-sw .sp-sw-t::before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.sp-sw input:checked + .sp-sw-t{background:var(--a);}
.sp-sw input:checked + .sp-sw-t::before{transform:translateX(17px);}
.sp-sw input:focus-visible + .sp-sw-t{box-shadow:0 0 0 3px var(--ab);}
/* Toggle row: title + description on the left, switch on the right */
.sp-tgl{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;cursor:pointer;}
.sp-tgl + .sp-tgl{border-top:1px solid var(--b1);}
.sp-tgl .sp-tgl-t{font-size:14px;font-weight:600;color:var(--t1);}
.sp-tgl .sp-tgl-d{font-size:11.5px;color:var(--t3);margin-top:3px;line-height:1.45;}
/* PHP field helper text */
.php-help{font-size:11px;color:var(--t3);margin-top:5px;line-height:1.45;}
/* Floating sticky save toolbar — compact, right-aligned, clearly elevated so it
   never blends into the page/KPI background. */
.php-savebar{position:sticky;bottom:18px;z-index:6;width:-moz-fit-content;width:fit-content;max-width:100%;margin:22px 0 6px auto;display:flex;align-items:center;gap:8px;padding:8px 9px;background:var(--w);border:1px solid var(--b1);border-radius:12px;box-shadow:0 14px 34px -10px rgba(15,23,42,.45),0 3px 10px rgba(15,23,42,.14);}
@media(max-width:560px){.php-savebar{width:100%;justify-content:flex-end;bottom:10px;}}

/* Add-Server connect step: 2-col field grid + auth-method cards (mockup add-server-wizard.html) */
.aw-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.aw-authgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 4px;}
.authgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:640px){.authgrid{grid-template-columns:1fr;}}
.authcard{border:1.5px solid var(--b1);border-radius:10px;padding:14px;cursor:pointer;background:var(--w);transition:all .15s;}
.authcard:hover{border-color:var(--a);}
.authcard.on{border-color:var(--a);box-shadow:0 0 0 2px var(--ab);}
.authcard .t{font-weight:600;font-size:14px;margin-bottom:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--t1);}
.authcard .d{font-size:12px;color:var(--t3);line-height:1.4;}
.authbody{border:1px solid var(--b1);border-radius:10px;padding:14px;}
@media(max-width:640px){.aw-grid2,.aw-authgrid{grid-template-columns:1fr;}}

/* Password field with a reveal (eye) toggle — same shape as .bku-pwrap, but on
   the .fi box the rest of this wizard uses, so the field still lines up with
   Server Name / IP / Port beside it. The toggle is a real <button> so it takes
   focus and shows the ring. */
.aw-pwrap{position:relative;}
.aw-pwrap .fi{padding-right:44px;}
.aw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:transparent;color:var(--t3);display:grid;place-items:center;cursor:pointer;border-radius:8px;transition:.13s;padding:0;}
.aw-eye:hover{color:var(--t1);background:var(--ab);}
.aw-eye:focus-visible{outline:none;color:var(--a);box-shadow:0 0 0 2px var(--a);}
.aw-eye svg{width:16px;height:16px;}
/* More specific than `.nwm input.nw-i`, which sets the field's padding — so the
   toggle never sits on top of the text, without an !important. */
.nwm .aw-pwrap input.nw-i{padding-right:44px;}

/* ── P1 modal for a credential (first: Settings → Credentials → CDN account) ──
   .nwm scopes the wizard's field (P4), selection-card (P3) and button (P8) styles to
   any P1 card, so a vault form does not fall back to the old .fi/#modal look. */
.nw-card.nwm{max-width:540px;}
.nwm-hd{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px;}
.nwm-badge{width:42px;height:42px;border-radius:12px;background:var(--ab);color:var(--a);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nwm-badge svg{width:21px;height:21px;}
.nwm-ttl{flex:1;min-width:0;}
.nwm-title{font-size:19px;font-weight:700;color:var(--t1);line-height:1.25;}
.nwm-sub{font-size:12.5px;color:var(--t3);margin-top:3px;line-height:1.45;}
.nwm-x{width:34px;height:34px;border:none;background:transparent;color:var(--t4);border-radius:9px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;margin:-4px -6px 0 0;padding:0;}
.nwm-x:hover{color:var(--t1);background:var(--bg2);}
.nwm-x:focus-visible{outline:none;color:var(--a);box-shadow:0 0 0 2px var(--a);}
.nwm-x svg{width:19px;height:19px;}
.nwm-field{margin-bottom:15px;}
.nwm-types{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.nwm .nw-tc{font-family:inherit;width:100%;}
.nwm .nw-tc .lg{background:var(--bg2);}
.nwm .nw-tc:disabled{cursor:default;transform:none;}
.nwm .nw-tc:disabled:not(.on){opacity:.45;}
.nwm .nw-tc:focus-visible{outline:2px solid var(--a);outline-offset:2px;}
.nwm .nw-tc:not(.on) .nw-chk{display:none;}
.nwm-callout{display:flex;align-items:center;gap:12px;border:1px solid var(--b1);background:var(--ab);border-radius:11px;padding:11px 12px;margin-bottom:15px;}
.nwm-callout .txt{flex:1;min-width:0;}
.nwm-callout .tile{width:32px;height:32px;border-radius:8px;background:var(--w);color:var(--a);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nwm-callout .tile svg{width:16px;height:16px;}
.nwm-callout .t{font-size:12.5px;font-weight:700;color:var(--t1);}
.nwm-callout .s{font-size:11.5px;color:var(--t2);margin-top:2px;line-height:1.5;}
.nwm-callout .s b{font-weight:600;color:var(--t1);}
.nwm-link{height:32px;padding:0 11px;border-radius:8px;border:1px solid var(--b1);background:var(--w);color:var(--t2);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;flex-shrink:0;}
.nwm-link:hover{color:var(--a);border-color:var(--a);}
.nwm-link:focus-visible{outline:2px solid var(--a);outline-offset:2px;}
.nwm-link svg{width:13px;height:13px;}
.nwm-verify{display:flex;align-items:center;gap:12px;border:1px solid var(--b1);border-radius:11px;padding:9px 9px 9px 13px;transition:border-color .15s,background .15s;}
.nwm-vstat{flex:1;min-width:0;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t3);}
.nwm-vstat .dot{width:8px;height:8px;border-radius:50%;background:var(--t4);flex-shrink:0;box-sizing:border-box;}
.nwm-vstat .msg{min-width:0;overflow-wrap:anywhere;line-height:1.45;}
.nwm-verify.is-busy .dot{width:12px;height:12px;background:transparent;border:2px solid var(--a);border-top-color:transparent;animation:spin .6s linear infinite;}
.nwm-verify.is-ok{border-color:var(--g);background:var(--gb);}
.nwm-verify.is-ok .nwm-vstat{color:var(--g);font-weight:600;}
.nwm-verify.is-ok .dot{background:var(--g);}
.nwm-verify.is-err{border-color:var(--r);background:var(--rb);}
.nwm-verify.is-err .nwm-vstat{color:var(--r);}
.nwm-verify.is-err .dot{background:var(--r);}
.nwm .nw-bg.nwm-vbtn{height:36px;padding:0 13px;font-size:12.5px;border-radius:9px;flex-shrink:0;}
.nwm-foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--b1);padding-top:18px;margin-top:20px;}
.nwm-foot-hint{flex:1;min-width:0;font-size:11.5px;color:var(--t4);line-height:1.45;}
@media(max-width:560px){.nwm .aw-pwrap input.nw-i{padding-right:52px;}.nwm .aw-eye{width:44px;height:44px;right:2px;}.nwm-types{grid-template-columns:1fr;}.nwm-verify{flex-wrap:wrap;}.nwm .nw-bg.nwm-vbtn{width:100%;height:44px;}.nwm-foot{flex-wrap:wrap;}.nwm-foot-hint{flex-basis:100%;}.nwm-foot .nw-bp,.nwm-foot .nw-bg{flex:1;}.nwm-callout{flex-wrap:wrap;}.nwm-callout .txt{flex:1 1 calc(100% - 44px);}.nwm-callout .nwm-link{margin-left:44px;}}

/* P8 footer bar: ghost/back left, primary right, separated from the fields. */
.wizfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--b1);padding-top:18px;margin-top:20px;}
@media(max-width:520px){
  .wizfoot{flex-direction:column-reverse;align-items:stretch;}
  .wizfoot .nw-bp,.wizfoot .nw-bg{width:100%;}
  .aw-eye{width:44px;height:44px;right:2px;}
  .aw-pwrap .fi{padding-right:52px;}
}

/* SMTP server-assignment checkbox rows */
.smtp-srv{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--b1);border-radius:7px;font-size:14px;color:var(--t1);cursor:pointer;margin-bottom:7px;}
.smtp-srv:last-child{margin-bottom:0;}
.smtp-srv:hover{background:var(--bg2);}
.smtp-srv input{accent-color:var(--a);}
.actr{display:flex;align-items:flex-start;gap:10px;padding:10px 18px;border-bottom:1px solid var(--b1);position:relative;}
.actr:last-child{border-bottom:none;}
.actr:not(:last-child) .acti::after{content:'';position:absolute;left:31px;top:40px;bottom:-2px;width:2px;background:var(--b1);border-radius:1px;}
.acti{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;position:relative;z-index:1;}
.actb{font-size:12.5px;color:var(--t2);line-height:1.4;}
.actb strong{color:var(--t1);font-weight:600;}
.acttm{font-size:10.5px;color:var(--t3);margin-top:2px;}
.cronr{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--b1);}
.cronr:last-child{border-bottom:none;}
.envr{display:flex;align-items:center;gap:10px;padding:9px 18px;border-bottom:1px solid var(--b1);font-family:'JetBrains Mono',monospace;font-size:11.5px;}
.envr:last-child{border-bottom:none;}
.env-key{color:var(--a);font-weight:500;min-width:160px;}
.env-val{color:var(--t2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.env-masked{color:var(--t3);letter-spacing:2px;}
.tag{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--bg2);color:var(--t3);border:1px solid var(--b1);}
/* Colour modifiers for the base chip. `.tag` itself has always been global while
   its colours existed only under `.sdv` (:3503+), so a coloured chip rendered
   outside a `.sdv` host silently fell back to neutral grey and the status it was
   encoding — Active / Locked / key saved — was lost. Hosts that hit this each
   grew their own copy of the palette (`.sp-wpu-pop`, `.bku-dlpop`); the settings
   Vulnerability panel never got one. Defined once here instead. This cannot
   change anything already inside `.sdv` or those hosts: their two-class
   selectors outrank these single-class ones regardless of order. */
.tag.b{background:var(--ab);color:var(--a)}
.tag.p{background:var(--pb);color:var(--p)}
.tag.g{background:var(--gb);color:var(--g)}
.tag.y{background:var(--yb);color:var(--y)}
.tag.r{background:var(--rb);color:var(--r)}
.tag.n{background:var(--bg2);color:var(--t3)}
.dv{height:1px;background:var(--b1);margin:13px 0;}
.mono{font-family:'JetBrains Mono',monospace;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
@keyframes pulseHighlight{0%,100%{background:transparent;}50%{background:rgba(79,110,247,.18);}}
.pulse-highlight{animation:pulseHighlight 1.8s ease-in-out;border-radius:8px;}
.qs-skel{background:var(--b1);border-radius:4px;color:transparent !important;display:inline-block;min-width:48px;animation:pulse 1.5s ease-in-out infinite;}
.pulse{animation:pulse 1.5s infinite;}
.spin{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.btn.loading{pointer-events:none;opacity:.75;}
.btn.loading::after{content:'';display:inline-block;width:12px;height:12px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .5s linear infinite;margin-left:4px;flex-shrink:0;}
.skel{background:linear-gradient(90deg,var(--b1) 25%,rgba(79,110,247,.06) 50%,var(--b1) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px;min-height:14px;}
.skel-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--b1);}
.skel-row .skel:nth-child(1){width:30%;height:14px;}
.skel-row .skel:nth-child(2){width:15%;height:14px;}
.skel-row .skel:nth-child(3){width:20%;height:14px;}
.skel-row .skel:nth-child(4){width:10%;height:14px;}
.skel-card{padding:18px;border-radius:10px;border:1px solid var(--b1);background:var(--w);}
.skel-card .skel{margin-bottom:10px;}
.skel-card .skel:last-child{margin-bottom:0;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.scroll-top{position:fixed;bottom:24px;right:24px;width:38px;height:38px;border-radius:50%;background:var(--a);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(79,110,247,.35);display:flex;align-items:center;justify-content:center;z-index:400;opacity:0;transform:translateY(10px);pointer-events:none;transition:all .25s ease;}
.scroll-top.show{opacity:1;transform:none;pointer-events:all;}
.scroll-top:hover{box-shadow:0 6px 18px rgba(79,110,247,.45);transform:translateY(-2px);}


/* === Secondary <style> block (originally inline at line 857-861) === */
.ob-dot{width:32px;height:32px;border-radius:50%;background:var(--b1);color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.ob-dot.on{background:var(--a);color:#fff;}
.ob-dot.done{background:var(--g);color:#fff;}
/* Onboarding step footer — the P8 shape (secondary left, primary right) that
   replaced the stack of width:100% buttons each step used to end with. */
.ob-foot{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid var(--b1);}
.ob-foot .btn-g{margin-right:auto;}
@media (max-width:560px){.ob-foot .btn{min-height:44px;}}

/* ============================================================================
   Server Settings — tabbed redesign (inline panel). Namespaced .sst-* so it
   can't collide with other pages. Uses panel tokens; brand accents per tab.
   ============================================================================ */
.sst{position:relative;}
.sst-tabbar{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--b1);padding:9px 10px;background:var(--w);border-radius:var(--radius) var(--radius) 0 0;flex-wrap:wrap;}
/* Placed and sized from the active tab by _sstMovePill (x, y, width, height):
   on a phone the tabs wrap onto two rows. */
.sst-pill{position:absolute;top:0;left:0;height:0;width:0;border-radius:10px;background:var(--ab);z-index:0;box-shadow:0 1px 2px rgba(16,24,40,.06);transition:transform .36s cubic-bezier(.34,1.25,.64,1),width .36s cubic-bezier(.34,1.25,.64,1),height .36s cubic-bezier(.34,1.25,.64,1),background .3s,box-shadow .3s;}
.sst-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--t3);padding:9px 16px;border:0;background:none;cursor:pointer;border-radius:10px;font-family:inherit;transition:color .25s;}
.sst-tab svg,.sst-tab img{width:17px;height:17px;flex-shrink:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.sst-tab:hover svg,.sst-tab:hover img{transform:translateY(-2px) scale(1.08);}
.sst-tab.on{font-weight:600;} .sst-tab.on svg,.sst-tab.on img{transform:scale(1.12);}
.sst-tab[data-c=bl] svg{color:#3b7de0;} .sst-tab.on[data-c=bl],.sst-tab.on[data-c=bl] svg{color:var(--a);}
/* The on-state label colour must move with the pill tint (set from SST_TINT in
   server-settings.js) — keyed to the old literal hue it went unreadable on the
   dark pill. */
.sst-tab[data-c=pu] svg{color:var(--vi);opacity:.72;} .sst-tab.on[data-c=pu],.sst-tab.on[data-c=pu] svg{color:var(--vi);opacity:1;}
.sst-tab[data-c=cy] img{opacity:.62;} .sst-tab.on[data-c=cy]{color:var(--cy);} .sst-tab.on[data-c=cy] img{opacity:1;}
.sst-tab[data-c=rd] svg{color:#e87468;} .sst-tab.on[data-c=rd],.sst-tab.on[data-c=rd] svg{color:var(--r);}
.sst-pane{display:none;padding:18px;} .sst-pane.on{display:block;}
.sst-pane.on .sst-stg{opacity:0;transform:translateY(10px);animation:sstStg .5s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes sstStg{to{opacity:1;transform:none;}}
.sst-g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.sst-card{border:1px solid var(--b1);border-radius:12px;padding:15px;background:var(--w);transition:box-shadow .3s,border-color .3s,transform .3s;}
.sst-card:hover{border-color:var(--b2);box-shadow:0 6px 22px rgba(0,0,0,.05);transform:translateY(-2px);}
.sst-h{font-size:14px;font-weight:600;color:var(--t1);margin:0 0 13px;display:flex;align-items:center;gap:8px;}
.sst-h svg{width:17px;height:17px;color:var(--t3);flex-shrink:0;}
.sst-lbl{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--t4);margin:0 0 5px;}
.sst-f{min-height:38px;border:1px solid var(--b1);border-radius:9px;background:var(--w);display:flex;align-items:center;padding:0 11px;font-size:14px;color:var(--t1);margin-bottom:12px;transition:border-color .2s,box-shadow .2s;}
.sst-f:last-child{margin-bottom:0;}
.sst-f:focus-within{border-color:var(--a);box-shadow:0 0 0 3px var(--ab);}
.sst-f .fi,.sst-f .fsel{width:100%;height:36px;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;-webkit-appearance:none;appearance:none;padding:0;margin:0;font:inherit;color:inherit;border-radius:0;}
.sst-f textarea.fi{height:auto;resize:vertical;padding:8px 0;}
.sst-f.area{align-items:stretch;}
.sst-r2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.sst-seg{position:relative;display:inline-flex;background:var(--bg2);border-radius:9px;padding:3px;}
.sst-seg .sst-thumb{position:absolute;top:3px;left:3px;height:calc(100% - 6px);background:var(--a);border-radius:7px;box-shadow:0 2px 6px rgba(22,84,210,.4);transition:transform .3s cubic-bezier(.34,1.3,.64,1),width .3s;}
.sst-seg button{position:relative;z-index:1;font-size:14px;font-weight:500;padding:7px 18px;border-radius:7px;color:var(--t2);cursor:pointer;border:0;background:none;font-family:inherit;transition:color .25s;}
.sst-seg button.on{color:#fff;}
.sst-eng{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:7px 12px;font-size:14px;font-weight:600;border:1px solid var(--b1);background:var(--bg2);color:var(--t1);}
.sst-eng img{width:17px;height:17px;}
.sst-note{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.55;margin-top:13px;}
.sst-note svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;}
.sst-note.amber{background:var(--yb);color:var(--y);border:1px solid var(--ybd);}
.sst-note.blue{background:var(--ab);color:var(--ah);border:1px solid var(--ab);}
.sst-note.teal{background:var(--gb);color:var(--g);border:1px solid var(--gbd);}
.sst-note.red{background:var(--rb);color:var(--r);border:1px solid var(--rbd);}
/* Server identity: an SSH host key as type + fingerprint (Settings → SSH). */
.sst-hk{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border:1px solid var(--b1);background:var(--bg2);border-radius:10px;padding:10px 12px;margin-top:8px;}
.sst-hk code{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--t1);word-break:break-all;}
.sst-hk-t{font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:6px;background:var(--ab);color:var(--a);}
.sst-hk-s{margin-left:auto;font-size:11.5px;color:var(--t3);}
.sst-hk.none{font-size:12.5px;color:var(--t3);}
#so-hostkey-banner .s .mono{font-size:11.5px;word-break:break-all;}
.sst-foot{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--b1);background:var(--w);border-radius:0 0 var(--radius) var(--radius);flex-wrap:wrap;}
.sst-foot .sp{flex:1;}
/* Footer buttons match the design: 14px, 9px radius, icon + label. */
.sst-foot .btn{height:auto;padding:9px 18px;border-radius:9px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:7px;}
.sst-foot .btn svg{width:16px;height:16px;}
.sst-dz{display:flex;align-items:center;gap:16px;border:1px solid var(--rbd);background:var(--rb);border-radius:12px;padding:16px;}
.sst-dz .t{flex:1;} .sst-dz h5{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--r);} .sst-dz p{margin:0;font-size:13px;color:var(--t2);line-height:1.5;}
/* Delete button matches the demo: clean white button (danger comes from the red
   zone) that tints red on hover/intent. */
.sst-dz .btn{height:auto;padding:9px 16px;border-radius:9px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:7px;background:var(--w);border:1px solid var(--b1);color:var(--t1);white-space:nowrap;transition:background .15s,border-color .15s,color .15s;}
.sst-dz .btn svg{width:16px;height:16px;}
.sst-dz .btn:hover{background:var(--rb);border-color:var(--rbd);color:var(--r);}
/* Docker card (rendered by renderDockerSupportCard) inner helpers */
.sst-dk-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.sst-dk-head img{width:20px;height:20px;}
.sst-dk-head h4{margin:0;font-size:14.5px;font-weight:600;}
.sst-dk-chip{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:20px;padding:3px 11px;}
.sst-dk-chip.gray{background:var(--bg2);color:var(--t3);}
.sst-dk-chip.green{background:var(--gb);color:var(--g);}
.sst-dk-chip.teal{background:var(--gb);color:var(--g);}
.sst-dk-ver{font-size:15px;font-weight:600;color:var(--t1);}
.sst-rmtoggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--r);padding:0;font-family:inherit;}
.sst-rmtoggle .cr{margin-left:auto;}
/* Compact connection-test status (dot + short label) in the footer */
.sst-cst{font-size:13px;color:var(--t3);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.sst-cst .dot{width:8px;height:8px;border-radius:50%;background:var(--b2);flex-shrink:0;transition:background .3s,box-shadow .3s;}
.sst-cst.testing .dot{background:var(--a);animation:sstPulse 1s ease-in-out infinite;}
@keyframes sstPulse{50%{opacity:.35;}}
.sst-cst.ok{color:var(--g);} .sst-cst.ok .dot{background:var(--g);box-shadow:0 0 0 4px var(--gb);}
.sst-cst.err{color:var(--r);cursor:help;} .sst-cst.err .dot{background:var(--r);box-shadow:0 0 0 4px var(--rb);}
@media(max-width:760px){.sst-g2{grid-template-columns:1fr;} .sst-tab{padding:9px 11px;font-size:13px;}}
/* A phone (DESIGN.md §4, ≤768): every control here is a 44px target. Measured
   at 390px they were — tabs 35, fields 36, provider 39, the auth switch 31,
   "Remove Docker" 17, Test Connection / Save / Delete Server 35–37. */
@media(max-width:768px){
  .sst-tab,.sst-seg button,.sst-rmtoggle,#ss-body .btn,#ss-body .fsel{min-height:44px;}
  .sst-f{min-height:44px;} .sst-f .fi{height:42px;}
}
/* Beside the button the text got a third of a phone's width and ran to eight
   lines. Stacked (P8/P15 stack at the same width): text, then a full-width button. */
@media(max-width:560px){
  .sst-dz{flex-direction:column;align-items:stretch;gap:12px;}
  .sst-dz .btn{justify-content:center;}
}

/* ── The server page on a phone ─────────────────────────────────────────────
   Walked section by section at 390px on the homelab (24 Oct 2026). */
.dkc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.rc-sp{flex:1;}
@media(max-width:560px){
  .dkc-tiles{grid-template-columns:1fr;}
  /* "Cache by site": title on its line, both Flush buttons share the next. */
  .rc-ch{flex-wrap:wrap;}
  .rc-sp{flex:0 0 100%;height:0;}
  .rc-ch .rc-mini{flex:1 1 0;justify-content:center;}
}
/* P10: drop the lesser columns instead of scrolling an action out of reach —
   Delete, Unban and "+ Add DB User" (in the last header cell) all sat past the
   right edge. Never the colspan "nothing here" cell, which is the first td. */
@media(max-width:680px){
  .so-sites-tbl th:nth-child(2),.so-sites-tbl td:nth-child(2):not([colspan]),
  .so-sites-tbl th:nth-child(3),.so-sites-tbl td:nth-child(3):not([colspan]),
  .so-fw-tbl th:nth-child(1),.so-fw-tbl td:nth-child(1):not([colspan]),
  .f2b-ban-tbl th:nth-child(3),.f2b-ban-tbl td:nth-child(3):not([colspan]),
  .sodb-db-tbl th:nth-child(2),.sodb-db-tbl td:nth-child(2):not([colspan]),
  .sodb-db-tbl th:nth-child(4),.sodb-db-tbl td:nth-child(4):not([colspan]),
  .sodb-db-tbl th:nth-child(5),.sodb-db-tbl td:nth-child(5):not([colspan]),
  .sodb-user-tbl th:nth-child(2),.sodb-user-tbl td:nth-child(2):not([colspan]){display:none;}
  .so-fw-del-t{display:none;}   /* the trash icon alone; its aria-label names the rule */
  .so-fw-tbl tbody .btn{min-width:44px;}
  /* These fit now, so they are tables again — full width, not the scroll box
     the ≤700px block below makes of every #so-content table (which left a
     strip of empty card on the right) — and the name column wraps instead. */
  #so-content table.tbl:is(.so-sites-tbl,.so-fw-tbl,.f2b-ban-tbl,.sodb-db-tbl,.sodb-user-tbl){display:table;width:100%;}
  #so-content table.tbl:is(.so-sites-tbl,.f2b-ban-tbl,.sodb-db-tbl,.sodb-user-tbl) tbody td:first-child{white-space:normal;word-break:break-word;}
  /* Every other column as narrow as its content, so the name gets the rest —
     left to share, "2 MB" took as much room as the name, which broke into
     four lines ("sp_ssld / emo_69 / …"). */
  #so-content table.tbl:is(.so-sites-tbl,.f2b-ban-tbl,.sodb-db-tbl,.sodb-user-tbl) :is(th,td):not(:first-child){width:1%;}
  #so-content table.srv-tbl:is(.sodb-db-tbl,.sodb-user-tbl) :is(thead th,tbody td){padding-left:10px;padding-right:10px;}
  #so-content .sodb-db-tbl .sizecell{min-width:0;}   /* 130px on the desktop table */
  .sodb-add-t{display:none;}   /* "+ Add" — the header button set the column's width */
}
@media(max-width:768px){
  /* An empty table: no column headers over nothing, and its sentence wraps
     ("…Tick “Show stopped” to include stoppe" was cut off). */
  .tbl:has(>tbody>tr:only-child>td[colspan]) thead{display:none;}
  .tbl td[colspan]{white-space:normal;}
  /* Events: the search and the status filter share a full-width row. */
  .card-h .rt:has(>.so-evbar){flex:1 1 100%;margin-left:0;}
  .so-evbar{width:100%;}
  .so-evbar>*{flex:1 1 150px;}
  .so-evbar #so-ev-search,.so-evbar #so-ev-status{width:100%;}
  /* 44px targets (DESIGN.md §4): buttons were 22–35px. */
  #view-serveroverview :is(.btn,.sodb-tabbtn,.so-logchip,.so-evview,.rc-btn,.rc-mini,.rc-flush){min-height:44px;}
  #so-content :is(input.fi,select.fi,select.fsel):not(.sst-f *){min-height:44px;}
  #so-content button[data-pm],#sophp-ext-search{min-height:44px;}   /* PHP: FPM mode switch, extension filter */
  #so-content .dtab{min-height:44px;display:inline-flex;align-items:center;}
  #view-serveroverview .so-mng{width:44px;height:44px;}
  .so-evpages :is(button,.pg){min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){.sst *{transition:none!important;animation:none!important;} .sst-pane.on .sst-stg{opacity:1;transform:none;}}

/* ═══════════════════════════════════════════════════════════════════
   Activity Log — command center (Phase 6 redesign, v5)
   Exact port of the approved mockup. All classes namespaced `al-` to
   avoid colliding with global .view/.card/.row/.col/.tag/.st/.foot.
   Colors are intentionally cool-white/tinted so cards never blend into
   the warm-gray app background (--bg). Font uses the app's --font.
   ═══════════════════════════════════════════════════════════════════ */
.al{--bl:var(--a);font-family:var(--font);display:flex;flex-direction:column;gap:16px;padding:2px 0;color:var(--t1);}
.al *{box-sizing:border-box;}
.al-head{display:flex;align-items:center;gap:11px;}
.al-head .al-ttl{font-size:19px;font-weight:600;color:var(--t1);letter-spacing:-.01em;}
.al-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--g);background:var(--gb);border:1px solid var(--gbd);border-radius:20px;padding:3px 10px;}
.al-live .al-d{width:6px;height:6px;border-radius:50%;background:var(--g);animation:alPls 1.8s infinite;}
/* Paused on page 2+ or offline after a failed refresh (activitylog.js _paintLive). */
.al-live.al-paused{color:var(--t3);background:var(--bg2);border-color:var(--b1);}
.al-live.al-paused .al-d{background:var(--t4);animation:none;}
/* .al is display:flex, which beats the hidden attribute: after Sign-ins was opened
   both panes showed, one under the other. Same for admin-only controls. */
.al[hidden],.al [hidden],.al-vtabs[hidden]{display:none!important;}
@keyframes alPls{0%,100%{opacity:1}50%{opacity:.35}}
.al-head .al-sp{flex:1;}
.al-ibtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--b1);background:var(--w);color:var(--t3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0;}
.al-ibtn svg{width:16px;height:16px;}
.al-ibtn:hover{background:var(--bg2);color:var(--t2);} .al-ibtn:active{transform:scale(.94);}
.al-ibtn.al-ibtn-d:hover{background:var(--rb);color:var(--r);border-color:var(--rbd);}
.al-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.al-kpi{position:relative;border:1px solid var(--b1);border-radius:14px;padding:15px 16px 13px;cursor:pointer;background:var(--w);transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,border-color .18s,background .18s;overflow:hidden;}
.al-kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--b2);}
.al-kpi.al-on{border-color:var(--ac);background:var(--abg);}
.al-kpi .al-acc{position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.al-kpi.al-on .al-acc{transform:scaleX(1);}
.al-kpi .al-top{display:flex;align-items:center;gap:8px;margin-bottom:11px;}
.al-kpi .al-dot{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--abg);color:var(--ac);}
.al-kpi .al-dot svg{width:14px;height:14px;}
.al-kpi .al-l{font-size:12.5px;color:var(--t3);font-weight:500;flex:1;}
.al-kpi .al-tr:empty{display:none;}
.al-kpi .al-tr{font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 6px;display:inline-flex;align-items:center;gap:2px;}
.al-kpi .al-tr.al-up{background:var(--gb);color:var(--g);} .al-kpi .al-tr.al-dn{background:var(--rb);color:var(--r);} .al-kpi .al-tr.al-flat{background:var(--bg2);color:var(--t3);}
.al-kpi .al-v{font-size:25px;font-weight:600;color:var(--t1);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.al-kpi .al-rd{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ac);margin-left:6px;vertical-align:middle;animation:alPls 1.8s infinite;}
.al-kpi .al-spark{position:absolute;right:14px;bottom:13px;width:52px;height:18px;}
.al-kpi .al-spark polyline{stroke-dasharray:120;stroke-dashoffset:120;}
.al-kpi.al-k-t{--ac:var(--t3);--abg:var(--bg2);} .al-kpi.al-k-r{--ac:var(--a);--abg:var(--ab);} .al-kpi.al-k-c{--ac:var(--g);--abg:var(--gb);} .al-kpi.al-k-f{--ac:var(--r);--abg:var(--rb);} .al-kpi.al-k-w{--ac:var(--y);--abg:var(--yb);}
.al-card{background:var(--w);border:1px solid var(--b1);border-radius:14px;overflow:hidden;box-shadow:none;}
.al-card:hover{box-shadow:none;}
.al-tb{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--b1);}
.al-srch{flex:1;min-width:140px;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--b1);border-radius:9px;}
.al-srch svg{width:15px;height:15px;color:var(--t4);flex-shrink:0;}
.al-srch input{flex:1;border:0;outline:0;background:none;font-family:inherit;font-size:14px;color:var(--t1);}
.al-srch input::placeholder{color:var(--t4);}
.al-range-wrap{display:flex;align-items:center;gap:7px;height:34px;padding:0 9px 0 11px;border:1px solid var(--b1);border-radius:9px;flex-shrink:0;background:var(--w);}
.al-range-wrap svg{width:15px;height:15px;color:var(--t4);flex-shrink:0;}
.al-range{border:0;outline:0;background:none;font-family:inherit;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;padding:0 2px;}
.al-cats{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--b1);flex-wrap:wrap;}
.al-cat{font-size:12px;font-weight:500;padding:5px 11px;border-radius:8px;border:1px solid transparent;background:var(--bg2);color:var(--t3);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:all .15s;}
.al-cat svg{width:14px;height:14px;color:var(--t4);}
.al-cat:hover{background:var(--b1);} .al-cat:active{transform:scale(.96);}
.al-cat.al-on{background:var(--w);border-color:var(--b2);color:var(--t1);box-shadow:0 1px 2px rgba(16,24,40,.05);} .al-cat.al-on svg{color:var(--t2);}
/* Activity <-> Sign-ins switch. Sits above both roots and reuses .al-cat so the
   switch reads as the same control vocabulary as the category filters below. */
.al-vtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.al-vtabs .al-cat{font-size:12.5px;padding:7px 13px;}
@media(max-width:768px){.al-vtabs .al-cat{min-height:44px;padding:8px 15px;}}
.al-row{display:grid;grid-template-columns:38px 1fr 140px 116px 200px;gap:28px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--b1);cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto 54px;}
.al-row:last-child{border-bottom:0;} .al-row:hover{background:var(--bg2);}
.al-it{width:34px;height:34px;border-radius:9px;background:var(--w);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.al-it svg{width:18px;height:18px;} .al-it.al-sys{color:var(--t3);} .al-it.al-sys svg{width:17px;height:17px;}
.al-ev{min-width:0;} .al-ev .al-e{font-size:14.5px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.al-ev .al-m{font-size:11.5px;color:var(--t4);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.al-ev .al-m svg{width:12px;height:12px;opacity:.8;} .al-ev .al-m .al-sep{color:var(--t4);}
.al-tag{font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t4);}
.al-who{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--t2);min-width:0;}
.al-who .al-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.al-av{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;flex-shrink:0;}
.al-col{display:flex;flex-direction:column;gap:3px;min-width:0;}
.al-when{font-size:12.5px;color:var(--t2);white-space:nowrap;} .al-dur{font-size:11.5px;color:var(--t4);white-space:nowrap;}
.al-act{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.al-st{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:112px;font-size:11.5px;font-weight:500;border-radius:7px;padding:4px 10px;white-space:nowrap;}
.al-st svg{width:13px;height:13px;}
.al-st.al-ok{background:var(--gb);color:var(--g);} .al-st.al-fail{background:var(--rb);color:var(--r);} .al-st.al-warn{background:var(--yb);color:var(--y);}
.al-view{font-size:12px;font-weight:500;padding:6px 12px;border:1px solid var(--b1);border-radius:8px;background:var(--w);color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;font-family:inherit;}
.al-view svg{width:13px;height:13px;}
.al-view:hover{background:var(--a);color:#fff;border-color:var(--a);} .al-view:active{transform:scale(.96);}
.al-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:12.5px;color:var(--t4);border-top:1px solid var(--b1);}
.al-foot .al-sp{flex:1;} .al-foot b{color:var(--t2);font-weight:500;}
.al-pg{width:30px;height:30px;border-radius:8px;border:1px solid var(--b1);background:var(--w);color:var(--t3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.al-pg svg{width:15px;height:15px;}
.al-pg:disabled{opacity:.4;cursor:default;}
.al-empty{padding:46px 16px;text-align:center;color:var(--t4);font-size:14px;}
.al-an{opacity:0;transform:translateY(10px);} .al-an.al-in{animation:alFadeUp .5s cubic-bezier(.22,.61,.36,1) forwards;}
/* Set by renderActivityLog() when the shell is being refreshed rather than
   entered — a filter, a page change, a keystroke. The elements still need
   .al-in to be visible at all (.al-an alone is opacity:0), so this cancels
   the animation and states the finished position outright. */
.al.al-still .al-an{opacity:1;transform:none}
.al.al-still .al-an.al-in{animation:none}
@keyframes alFadeUp{to{opacity:1;transform:none;}}
.al-sk{background:linear-gradient(90deg,var(--b1) 25%,var(--bg2) 50%,var(--b1) 75%);background-size:200% 100%;animation:alShim 1.4s infinite;border-radius:6px;}
@keyframes alShim{to{background-position:-200% 0;}}
.al.al-loading .al-kreal,.al.al-loading .al-realrow,.al.al-loading #al-foot{display:none;}
.al:not(.al-loading) .al-kskel,.al:not(.al-loading) .al-skrow{display:none;}
.al-kskel{border:1px solid var(--b1);border-radius:14px;padding:15px 16px;background:var(--w);}
.al-skrow{display:grid;grid-template-columns:38px 1fr 120px 110px;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--b1);}
.al-pos{position:relative;}
.al-ov{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:16px;}
.al-ov.al-on{display:flex;animation:alOvin .18s ease;} @keyframes alOvin{from{opacity:0}to{opacity:1}}
.al-dlg{width:580px;max-width:100%;background:var(--w);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden;animation:alDlgin .3s cubic-bezier(.34,1.4,.64,1);}
@keyframes alDlgin{from{opacity:0;transform:scale(.93) translateY(8px)}to{opacity:1;transform:none}}
.al-dlg .al-dh{display:flex;align-items:center;gap:10px;padding:14px 17px;border-bottom:1px solid var(--b1);}
.al-dlg .al-dh .al-it{width:30px;height:30px;} .al-dlg .al-dh h4{margin:0;font-size:14.5px;font-weight:600;flex:1;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .al-dlg .al-dh .al-x{border:0;background:none;font-size:20px;color:var(--t4);cursor:pointer;line-height:1;}
.al-term{background:#0f172a;color:#cbd5e1;font-family:ui-monospace,'JetBrains Mono',monospace;font-size:12.5px;line-height:1.8;padding:17px;min-height:170px;max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-word;}
.al-term .al-tok{color:#34d399;} .al-term .al-twarn{color:#fbbf24;} .al-term .al-terr{color:#f87171;} .al-term .al-dim{color:#64748b;} .al-term .al-b{color:#e2e8f0;}
/* Event dialog context: who, target, server, IP — above the recorded output. */
.al-ctx{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;align-items:center;padding:14px 17px;border-bottom:1px solid var(--b1);font-size:12.5px;}
.al-ctx:empty{display:none;}
.al-ctx .al-cl{color:var(--t3);font-weight:500;}
.al-ctx .al-cv{color:var(--t1);min-width:0;overflow-wrap:anywhere;}
.al-ctx .al-cdim{color:var(--t4);}
.al-ctx .al-st{min-width:0;}
.al-ctx code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--t2);background:var(--bg2);border:1px solid var(--b1);padding:1px 6px;border-radius:5px;}
.al-dlg .al-df{display:flex;justify-content:flex-end;gap:8px;padding:12px 17px;border-top:1px solid var(--b1);}
@media(max-width:880px){.al-kpis{grid-template-columns:repeat(2,1fr);} .al-row{grid-template-columns:38px 1fr 116px 200px;} .al-row .al-who{display:none;}}
@media(max-width:560px){.al-row{grid-template-columns:34px 1fr auto;gap:10px;} .al-row .al-col,.al-skrow>*:nth-child(n+3){display:none;} .al-kpi .al-spark{display:none;}}
@media(prefers-reduced-motion:reduce){.al *{animation:none!important;} .al-an{opacity:1;transform:none;} .al-kpi .al-spark polyline{stroke-dashoffset:0;}}

/* ═══════════════════════════════════════════════════════════════════
   Sites — FlyWP-style command table (Phase 6 redesign)
   Namespaced `fw-`. White/cool surfaces only, so nothing blends into the
   warm-gray app background. Icons are inline SVG (no webfont). 30/page.
   ═══════════════════════════════════════════════════════════════════ */
.fw{--bl:var(--a);font-family:var(--font);color:var(--t1);position:relative;}
.fw *{box-sizing:border-box;}
.fw-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px;}
.fw-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;}
.fw-chip{font-size:12.5px;font-weight:500;padding:8px 13px;border-radius:10px;border:1px solid var(--b1);background:var(--w);color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .14s;}
.fw-chip svg{width:15px;height:15px;}
.fw-chip .n{font-size:11px;font-weight:600;background:var(--bg2);border-radius:20px;padding:1px 7px;color:var(--t4);}
.fw-chip:hover{background:var(--bg2);border-color:var(--b2);}
.fw-chip.on{border-color:var(--a);background:var(--ab);color:var(--a);box-shadow:none;}
.fw-chip.on .n{background:var(--a);color:#fff;}
.fw-seg{display:flex;border:1px solid var(--b1);border-radius:10px;overflow:hidden;background:var(--w);}
.fw-seg button{border:0;background:var(--w);color:var(--t4);padding:0 11px;height:38px;cursor:pointer;display:flex;align-items:center;}
.fw-seg button svg{width:17px;height:17px;}
.fw-seg button.on{background:var(--ab);color:var(--a);}
.fw-srch{display:flex;align-items:center;gap:8px;height:38px;padding:0 13px;border:1px solid var(--b1);border-radius:10px;background:var(--w);width:180px;}
.fw-srch svg{width:14px;height:14px;color:var(--t4);flex-shrink:0;}
.fw-srch input{border:0;outline:0;background:none;font-family:inherit;font-size:12.5px;color:var(--t1);width:100%;}
.fw-srch input::placeholder{color:var(--t4);}
.fw-card{background:var(--w);border:1px solid var(--b1);border-radius:14px;position:relative;box-shadow:none;}
.fw-card:hover{box-shadow:none;}
.fw-th,.fw-row{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(110px,0.18fr) 64px minmax(96px,0.22fr) minmax(150px,0.3fr) 46px;gap:12px;align-items:center;}
.fw-th{padding:11px 16px;border-bottom:1px solid var(--b1);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t4);background:var(--bg2);border-radius:14px 14px 0 0;}
.fw-th span:nth-child(3),.fw-th span:nth-child(4),.fw-th span:nth-child(5){text-align:center;}
.fw-row{padding:13px 16px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .14s;}
.fw-row:last-child{border-bottom:0;}
.fw-row:hover{background:var(--bg2);}
.fw-row.menuopen{position:relative;z-index:20;background:var(--w);}
.fw-site{display:flex;align-items:center;gap:11px;min-width:0;}
.fw-logo{width:38px;height:38px;border-radius:9px;border:1px solid var(--b1);background:var(--w);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.fw-logo img{width:22px;height:22px;} .fw-logo.fb{font-weight:600;color:var(--t3);font-size:15px;}
.fw-dn{min-width:0;}
.fw-dn .d{font-size:14.5px;font-weight:500;color:var(--t1);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.fw-dn .d:hover{color:var(--a);}
.fw-dn .d .lk{width:13px;height:13px;color:var(--g);flex-shrink:0;}
.fw-dn .d .star{color:var(--y);flex-shrink:0;}
.fw-dn .m{margin-top:4px;display:flex;align-items:center;gap:7px;}
.fw-type{font-size:10.5px;font-weight:500;padding:2px 7px;border-radius:5px;white-space:nowrap;}
.fw-type.wp{background:var(--ab);color:var(--a);} .fw-type.react{background:var(--blb);color:var(--bl);} .fw-type.docker{background:var(--ab);color:var(--a);} .fw-type.stag{background:var(--yb);color:var(--y);} .fw-type.custom{background:var(--bg2);color:var(--t2);}
/* nowrap: "Preview ↗" broke between the word and its arrow in a phone's narrow name column. */
.fw-prv{font-size:11px;color:var(--a);cursor:pointer;white-space:nowrap;}
.fw-prv:hover{text-decoration:underline;}
.fw-srv{display:flex;align-items:center;gap:9px;min-width:0;}
.fw-srv .ico{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--t3);} .fw-srv .ico img{width:22px;height:22px;} .fw-srv .ico svg{width:17px;height:17px;}
.fw-srv .sn{display:flex;flex-direction:column;min-width:0;}
.fw-srv .sn b{font-size:12.5px;font-weight:500;color:var(--t2);align-self:flex-start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.fw-srv .sn b:hover{color:var(--a);text-decoration:underline;}
.fw-srv .sn .sz{font-size:11px;color:var(--t4);font-variant-numeric:tabular-nums;margin-top:2px;}
.fw-php{justify-self:center;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;font-variant-numeric:tabular-nums;}
.fw-php:hover{color:var(--a);text-decoration:underline;}
.fw-php.off{color:var(--t4);cursor:default;} .fw-php.off:hover{text-decoration:none;color:var(--t4);}
.fw-st{justify-self:center;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;border-radius:999px;border:1px solid;padding:4px 13px;white-space:nowrap;}
.fw-st .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.fw-st.on{background:var(--gb);color:var(--g);border-color:var(--gbd);} .fw-st.on .dot{background:var(--g);animation:fwPulse 2s infinite;}
.fw-st.down{background:var(--rb);color:var(--r);border-color:var(--rbd);} .fw-st.down .dot{background:var(--r);animation:fwPulse 1.2s infinite;}
@keyframes fwPulse{0%,100%{opacity:1}50%{opacity:.35}}
.fw-feat{justify-self:center;display:flex;align-items:center;gap:3px;}
.fw-ft{width:26px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--t4);background:transparent;border:0;cursor:pointer;border-radius:7px;transition:color .15s,background .15s;padding:0;}
.fw-ft svg{width:18px;height:18px;}
.fw-ft:hover{background:var(--bg2);}
.fw-ft.on{color:var(--a);}
.fw-act{display:flex;justify-content:flex-end;position:relative;}
.fw-ic{width:34px;height:34px;border-radius:8px;border:1px solid var(--b1);background:var(--w);color:var(--t3);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.fw-ic svg{width:17px;height:17px;}
.fw-ic:hover,.fw-ic.open{background:var(--ab);color:var(--a);border-color:var(--b2);}
.fw-menu{position:absolute;right:0;top:40px;width:216px;background:var(--w);border:1px solid var(--b2);border-radius:11px;box-shadow:var(--shadow-lg);padding:6px;z-index:30;animation:fwMenuIn .15s ease;}
@keyframes fwMenuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.fw-menu a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:7px;font-size:13px;font-weight:500;color:var(--t1);cursor:pointer;}
.fw-menu a svg{width:16px;height:16px;color:var(--t3);flex-shrink:0;}
.fw-menu a:hover{background:var(--ab);}
.fw-menu a.del{color:var(--r);} .fw-menu a.del svg{color:var(--r);} .fw-menu a.del:hover{background:var(--rb);}
.fw-menu .sep{height:1px;background:var(--b1);margin:5px 4px;}
.fw-scrim{position:absolute;inset:0;background:rgba(15,23,42,.13);z-index:5;display:none;border-radius:14px;}
.fw-scrim.on{display:block;}
.fw-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:12.5px;color:var(--t4);border-top:1px solid var(--b1);}
.fw-foot b{color:var(--t2);font-weight:500;} .fw-foot .sp{flex:1;}
.fw-pg{min-width:30px;height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--b1);background:var(--w);color:var(--t3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;}
.fw-pg svg{width:15px;height:15px;} .fw-pg:disabled{opacity:.4;cursor:default;}
.fw-an{opacity:0;transform:translateY(8px);} .fw-an.in{animation:fwUp .5s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes fwUp{to{opacity:1;transform:none;}}
.fw-empty{padding:48px 16px;text-align:center;color:var(--t4);font-size:13.5px;}
.fw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;padding:14px;}
.fw-gc{border:1px solid var(--b1);border-radius:13px;background:var(--w);padding:14px;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,border-color .18s;}
.fw-gc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--b2);}
.fw-gc .gh{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.fw-gc .grow{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--t3);padding:6px 0;border-top:1px solid var(--b1);}
.fw-gc .grow b{color:var(--t2);font-weight:500;}
@media(max-width:980px){.fw-th,.fw-row{grid-template-columns:minmax(0,1fr) 120px 100px 150px 46px;} .fw-th span:nth-child(3),.fw-row .fw-php{display:none;}}
@media(max-width:680px){.fw-th,.fw-row{grid-template-columns:minmax(0,1fr) auto 46px;} .fw-th span:nth-child(2),.fw-th span:nth-child(5),.fw-row .fw-srv,.fw-row .fw-feat{display:none;}}
@media(prefers-reduced-motion:reduce){.fw-an{opacity:1;transform:none;} .fw-st .dot{animation:none!important;}}
/* Sites header: quiet Trash (reddens on hover) + confident blue New Site */
#sites-trash-btn{height:38px;padding:0 15px;gap:7px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--t3);background:var(--w);border:1px solid var(--b2);}
#sites-trash-btn svg{color:var(--t4);transition:color .13s;}
#sites-trash-btn:hover{background:var(--rb) !important;border-color:var(--rbd) !important;color:var(--r) !important;transform:none;box-shadow:none;}
#sites-trash-btn:hover svg{color:var(--r);}
#sites-new-btn{height:38px;padding:0 17px;gap:7px;border-radius:10px;font-size:13.5px;font-weight:500;color:#fff;background:var(--a);border:1px solid var(--a);box-shadow:0 1px 2px rgba(0,0,0,.14);}
#sites-new-btn:hover{background:var(--ah);border-color:var(--ah);transform:none;box-shadow:0 1px 2px rgba(0,0,0,.14);}
/* Sites: Labels filter — tag button + count badge + dropdown */
.fw-lbl-btn{height:34px;padding:0 12px;gap:7px;border-radius:9px;font-size:13px;font-weight:500;color:var(--t2);}
.fw-lbl-btn svg{color:var(--t4);transition:color .13s;}
.fw-lbl-btn:hover{background:var(--bg2);border-color:var(--b2);color:var(--t2);transform:none;box-shadow:none;}
.fw-lbl-btn.on{border-color:var(--a);background:var(--ab);color:var(--a);}
.fw-lbl-btn.on svg{color:var(--a);}
.fw-lbl-btn.on:hover{background:var(--ab);border-color:var(--a);color:var(--a);}
.fw-lbl-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:500;color:#fff;background:var(--a);border-radius:999px;}
.fw-lbl-dd{width:248px;background:var(--w);border:1px solid var(--b2);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;}
.fw-lbl-hd{padding:10px 12px 8px;font-size:11px;font-weight:500;color:var(--t4);letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--b1);}
.fw-lbl-body{padding:6px;max-height:260px;overflow-y:auto;}
.fw-lrow{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--t2);}
.fw-lrow:hover{background:var(--bg2);}
.fw-lrow.sel{background:var(--ab);}
.fw-lck{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--b2);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.fw-lrow.sel .fw-lck{background:var(--a);border-color:var(--a);}
.fw-ldot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fw-lnum{margin-left:auto;font-size:11.5px;color:var(--t4);}
.fw-lbl-ft{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--b1);}
.fw-lbl-ft .sel-n{font-size:12px;color:var(--t3);}
.fw-lbl-ft .clr{font-size:12px;font-weight:500;color:var(--a);background:none;border:none;cursor:pointer;padding:0;}
.trash-restore:hover{background:var(--ab);border-color:var(--a);color:var(--a);}
.trash-purge{border:1px solid var(--rbd);color:var(--r);background:var(--w);}
.trash-purge:hover{background:var(--r);border-color:var(--r);color:#fff;}
.trash-purge:hover svg{stroke:#fff;}

/* ═══════ New Site Wizard (Phase 6 redesign) ═══════ */
.nw-ov{position:fixed;inset:0;z-index:1200;background:rgba(20,18,12,.5);overflow-y:auto;animation:nwOv .18s ease;}
.nw-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:40px 16px;box-sizing:border-box;}
@keyframes nwOv{from{opacity:0}to{opacity:1}}
.nw-card{background:var(--w);border:1px solid var(--b1);border-radius:18px;padding:22px 24px;width:100%;max-width:720px;box-shadow:0 24px 64px rgba(0,0,0,.28);animation:nwIn .24s cubic-bezier(.2,.8,.3,1);}
/* "Discard new site?" confirmation — sits above the wizard card. */
.nw-confirm{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,18,12,.42);animation:nwOv .14s ease;}
.nw-confirm-card{background:var(--w);border-radius:16px;padding:24px 24px 20px;width:100%;max-width:380px;box-shadow:0 24px 64px rgba(0,0,0,.32);text-align:center;animation:nwIn .18s cubic-bezier(.2,.8,.3,1);}
.nw-confirm-ic{width:46px;height:46px;border-radius:12px;background:var(--yb);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.nw-confirm-t{font-size:17px;font-weight:700;color:var(--t1);letter-spacing:-.2px;}
.nw-confirm-s{font-size:13px;color:var(--t3);line-height:1.55;margin-top:7px;}
.nw-confirm-btns{display:flex;gap:10px;margin-top:20px;}
.nw-confirm-btns button{flex:1;height:44px;border-radius:11px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;border:1px solid transparent;}
.nw-confirm-btns .nw-cf-keep{background:var(--ab);border-color:var(--a);color:var(--a);}
.nw-confirm-btns .nw-cf-keep:hover{background:var(--ab);border-color:var(--ah);}
.nw-confirm-btns .nw-cf-discard{background:var(--r);border-color:var(--r);color:#fff;}
.nw-confirm-btns .nw-cf-discard:hover{background:#b91c1c;border-color:#b91c1c;}
/* ── P15: destructive confirm with consequences, an option and type-to-confirm ──
   The delete dialog used to be the plain #modal frame filled with hand-written
   inline styles — correct tokens, but its own boxes and no shared anatomy, so
   nothing else could reuse it. This extends the house dialog (.nw-confirm*, the
   approved wizard look) instead, so a destructive confirm has one
   implementation. Left-aligned once there is a body to read; the plain variant
   stays centred. */
.nw-confirm-card.nw-cf-wide{max-width:452px;text-align:left;}
.nw-cf-wide .nw-confirm-ic{margin:0 0 14px;}
.nw-confirm-ic.nw-cf-danger{background:var(--rb);}
.nw-cf-points{margin-top:15px;display:flex;flex-direction:column;gap:9px;background:var(--rb);border:1px solid var(--rbd);border-radius:11px;padding:12px 13px;}
/* anywhere: a line can carry one long token (an SSH fingerprint, a path) that
   otherwise ran out past the box's right edge. */
.nw-cf-point{display:flex;gap:9px;font-size:12.5px;line-height:1.5;color:var(--r);overflow-wrap:anywhere;}
.nw-cf-point>span{min-width:0;}
.nw-cf-point svg{flex-shrink:0;margin-top:3px;opacity:.85;}
.nw-cf-opt{margin-top:12px;display:flex;gap:11px;align-items:flex-start;border:1px solid var(--b1);border-radius:11px;padding:11px 13px;cursor:pointer;}
.nw-cf-opt:hover{border-color:var(--b2);}
.nw-cf-opt input{margin:2px 0 0;width:15px;height:15px;accent-color:var(--g);cursor:pointer;flex-shrink:0;}
.nw-cf-opt-t{font-size:12.5px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.nw-cf-badge{font-size:9.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;color:var(--g);background:var(--gb);border:1px solid var(--gbd);border-radius:999px;padding:2px 7px;}
.nw-cf-opt-h{font-size:11px;color:var(--t3);margin-top:4px;line-height:1.5;}
.nw-cf-field{margin-top:15px;}
.nw-cf-lbl{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:7px;}
.nw-cf-in{width:100%;height:44px;border:1px solid var(--b1);border-radius:11px;padding:0 13px;font-family:var(--mono);font-size:13px;background:var(--w);color:var(--t1);}
.nw-cf-in::placeholder{color:var(--t4);}
.nw-cf-in:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px var(--ab);}
.nw-cf-hint{font-size:10.5px;color:var(--t4);margin-top:6px;}
.nw-cf-hint code{font-family:var(--mono);color:var(--t2);}
/* Disabled until the typed value matches — the guard is the point of the field,
   so it must look unavailable rather than just refuse on click. */
.nw-confirm-btns .nw-cf-discard:disabled{opacity:.45;cursor:not-allowed;}
.nw-confirm-btns .nw-cf-discard:disabled:hover{background:var(--r);border-color:var(--r);}
@media(max-width:560px){.nw-confirm-card.nw-cf-wide{padding:18px 16px 16px;}.nw-confirm-btns{flex-direction:column-reverse;}}
@keyframes nwIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
#nw .nw-fl,.nwm .nw-fl,#view-dns .nw-fl{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:7px;display:block;}
#nw .nw-hint,.nwm .nw-hint,#view-dns .nw-hint{font-size:10.5px;color:var(--t4);margin-top:5px;line-height:1.5;}
#nw .nw-in{min-height:44px;border:1px solid var(--b1);border-radius:11px;display:flex;align-items:center;gap:10px;padding:0 13px;font-size:13.5px;background:var(--w);color:var(--t1);}
#nw input.nw-i,#nw select.nw-i,#nw textarea.nw-i,.nwm input.nw-i,.nwm select.nw-i,.nwm textarea.nw-i,#view-dns input.nw-i,#view-dns select.nw-i,#view-dns textarea.nw-i{height:44px;width:100%;box-sizing:border-box;border:1px solid var(--b1);border-radius:11px;padding:0 13px;font-size:13.5px;background:var(--w);color:var(--t1);font-family:inherit;}
#nw textarea.nw-i{height:auto;min-height:56px;padding:11px 13px;font-family:'JetBrains Mono',monospace;font-size:12px;resize:vertical;line-height:1.5;}
#nw input.nw-i:focus,#nw select.nw-i:focus,#nw textarea.nw-i:focus,#nw .nw-if:focus-within,.nwm input.nw-i:focus,.nwm select.nw-i:focus,.nwm textarea.nw-i:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px var(--ab);}
#nw .nw-if,.nwm .nw-if,#view-dns .nw-if{height:44px;border:1px solid var(--b1);border-radius:11px;display:flex;align-items:center;gap:10px;padding:0 13px;background:var(--w);}
#nw .nw-if input,#nw .nw-if select,.nwm .nw-if input,.nwm .nw-if select,#view-dns .nw-if input,#view-dns .nw-if select{flex:1;border:none;outline:none;background:none;font-size:13.5px;color:var(--t1);font-family:inherit;min-width:0;height:42px;}
/* .nw-i styles a STANDALONE field — its own border, radius and 13px padding.
   Inside .nw-if the container already draws that box, so the padding stacks on
   the container's 10px gap and indents the text 23px from the icon, while a bare
   <input> in the same stack sits at 10px (compare Domain against Folder). Strip
   the leftovers so every icon field lines up. */
#nw .nw-if input.nw-i,#nw .nw-if select.nw-i,#nw .nw-if textarea.nw-i{padding:0;border-radius:0;}
#nw .nw-if img,#nw .nw-if svg{flex-shrink:0;}
/* Registry logo-picker dropdown (same look as the Add-registry modal) */
#nw .nw-ddwrap{position:relative;}
#nw .nw-dd{display:flex;align-items:center;gap:10px;height:44px;border:1px solid var(--b1);border-radius:11px;padding:0 13px;background:var(--w);cursor:pointer;user-select:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
#nw .nw-dd.open{border-color:var(--a);box-shadow:0 0 0 3px var(--ab);}
#nw .nw-dd .nw-dd-lg{width:20px;display:flex;justify-content:center;flex-shrink:0;}
#nw .nw-dd .nw-dd-lg img{width:18px;height:18px;object-fit:contain;}
#nw .nw-dd .nw-dd-nm{flex:1;font-size:13.5px;color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#nw .nw-dd .nw-chev{color:var(--t4);display:inline-flex;flex-shrink:0;transition:transform .18s;}
#nw .nw-dd.open .nw-chev{transform:rotate(180deg);}
#nw .nw-dd-menu{position:absolute;left:0;right:0;top:50px;background:var(--w);border:1px solid var(--b2);border-radius:12px;box-shadow:var(--shadow-lg);padding:5px;z-index:30;display:none;max-height:264px;overflow-y:auto;}
#nw .nw-dd-menu.show{display:block;animation:regMenuIn .14s ease;}
#nw .nw-msg{display:flex;align-items:center;gap:8px;padding:10px 11px;font-size:12px;color:var(--t3);line-height:1.4;}
#nw .nw-spin{width:14px;height:14px;border:2px solid var(--b1);border-top-color:var(--a);border-radius:50%;animation:regSpin .7s linear infinite;flex-shrink:0;}
/* Container-port auto-detection badge + hint */
#nw .nw-pbadge{font-size:10.5px;font-weight:600;color:var(--a);background:var(--ab);border:1px solid var(--a);border-radius:999px;padding:2px 9px;display:inline-flex;align-items:center;gap:4px;}
#nw .nw-pbadge svg{stroke:var(--a);}
#nw .nw-detok{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--a);line-height:1.5;margin-top:2px;}
#nw .nw-detok svg{stroke:var(--a);flex-shrink:0;margin-top:1px;}
#nw .nw-detok b{font-weight:700;}
#nw .nw-altports{margin-top:5px;font-size:11px;color:var(--t3);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
#nw .nw-altport{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--a);background:var(--ab);border:1px solid var(--a);border-radius:7px;padding:2px 8px;cursor:pointer;transition:background .15s;}
#nw .nw-altport:hover{background:var(--ab);}
/* Merged database block + auto-detect badge */
#nw .nw-dbcard{border:1px solid var(--b1);border-radius:12px;padding:14px;margin-bottom:16px;}
#nw .nw-detbadge{font-size:10px;font-weight:700;color:var(--g);background:var(--gb);border:1px solid var(--gbd);border-radius:999px;padding:1px 8px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
#nw .nw-detbadge svg{stroke:var(--g);}
#nw .nw-opt{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;}
#nw .nw-opt:hover{background:var(--bg2);}
#nw .nw-opt.sel{background:var(--ab);}
#nw .nw-opt .nw-opt-lg{width:22px;display:flex;justify-content:center;flex-shrink:0;}
#nw .nw-opt .nw-opt-lg img{width:18px;height:18px;object-fit:contain;}
#nw .nw-opt .nw-opt-tx{flex:1;min-width:0;}
#nw .nw-opt .nw-opt-n{font-size:13px;font-weight:600;color:var(--t1);}
#nw .nw-opt .nw-opt-s{font-size:10.5px;color:var(--t4);font-family:'JetBrains Mono',monospace;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#nw .nw-opt .nw-opt-ck{color:var(--a);display:inline-flex;flex-shrink:0;opacity:0;}
#nw .nw-opt.sel .nw-opt-ck{opacity:1;}
#nw .nw-opt .nw-opt-n.nw-tagname{font-weight:400;color:var(--t2);}
#nw .nw-mono,.nwm .nw-mono,#view-dns .nw-mono{font-family:'JetBrains Mono',monospace;font-size:12.5px;}
#nw .nw-del{transition:color .15s;}
#nw .nw-del:hover{color:var(--r)!important;}
#nw .nw-del:hover svg{stroke:var(--r);}
#nw .nw-copybtn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg2);border:1px solid var(--b1);border-radius:8px;height:32px;padding:0 11px;cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s,color .15s;}
#nw .nw-copybtn:hover{background:var(--ab);border-color:var(--a);color:var(--a);}
#nw .nw-copybtn svg{stroke:currentColor;}
#nw .nw-tc,.nwm .nw-tc{position:relative;border:1px solid var(--b1);border-radius:14px;padding:16px 12px 13px;cursor:pointer;background:var(--w);display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;transition:border-color .15s,background .15s,transform .12s;}
#nw .nw-tc:hover,.nwm .nw-tc:hover{transform:translateY(-2px);}
#nw .nw-tc.on,.nwm .nw-tc.on{border:2px solid var(--a);background:var(--ab);}
#nw .nw-tc .lg,.nwm .nw-tc .lg{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
#nw .nw-tc .lg img,.nwm .nw-tc .lg img{width:29px;height:29px;object-fit:contain;}
#nw .nw-tc .tn,.nwm .nw-tc .tn{font-size:13.5px;font-weight:700;color:var(--t1);}#nw .nw-tc .ts,.nwm .nw-tc .ts{font-size:10.5px;color:var(--t4);font-weight:500;margin-top:-3px;}
#nw .nw-chk,.nwm .nw-chk{position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;background:var(--a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;}
#nw .nw-tog,.nwm .nw-tog{width:42px;height:24px;border-radius:999px;position:relative;flex-shrink:0;cursor:pointer;background:var(--b2);transition:background .18s;}
#nw .nw-tog b,.nwm .nw-tog b{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s cubic-bezier(.4,1.3,.6,1);box-shadow:0 1px 2px rgba(0,0,0,.2);}
#nw .nw-tog.on,.nwm .nw-tog.on{background:var(--g);}#nw .nw-tog.on b,.nwm .nw-tog.on b{transform:translateX(18px);}
#nw .nw-php{width:24px;height:24px;border-radius:6px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;font-style:italic;color:var(--t2);letter-spacing:-.5px;flex-shrink:0;}
#nw .nw-at{border:1.5px solid var(--b1);border-radius:11px;padding:11px 6px;text-align:center;cursor:pointer;background:var(--w);transition:border-color .15s,background .15s;}#nw .nw-at.on{border-color:var(--a);background:var(--ab);}
#nw .nw-at .an{font-size:11px;font-weight:700;margin-top:4px;color:var(--t1);}#nw .nw-at .as{font-size:8.5px;color:var(--t4);margin-top:1px;line-height:1.25;}
#nw .nw-mt{flex:1;text-align:center;height:33px;line-height:33px;font-size:11.5px;font-weight:700;color:var(--t3);cursor:pointer;border-radius:8px;transition:.15s;}#nw .nw-mt.on{background:var(--a);color:#fff;}
#nw .nw-seg{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;font-size:11.5px;font-weight:600;color:var(--t3);cursor:pointer;border-radius:8px;transition:.15s;}#nw .nw-seg.on{background:var(--w);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:700;}
/* Recommended "standard" restart policy — green pill + green highlight when selected. */
#nw .nw-seg-std.on{background:var(--gb);color:var(--g);box-shadow:0 1px 2px rgba(5,150,105,.18);}
#nw .nw-stdpill{font-size:8.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--g);background:var(--gb);border-radius:5px;padding:2px 5px;}
#nw .nw-chip{height:28px;padding:0 12px;border-radius:999px;font-size:11px;font-weight:700;color:var(--t3);background:var(--bg2);cursor:pointer;display:inline-flex;align-items:center;transition:.15s;}#nw .nw-chip.on{background:var(--a);color:#fff;}
#nw .nw-app{border:1.5px solid var(--b1);border-radius:12px;padding:10px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;transition:.15s;}#nw .nw-app.on{border-color:var(--a);background:var(--ab);}
#nw .nw-dbc{border:1.5px solid var(--b1);border-radius:11px;padding:11px 6px;text-align:center;cursor:pointer;background:var(--w);transition:.15s;}#nw .nw-dbc.on{border-color:var(--a);background:var(--ab);}
#nw .nw-row,.nwm .nw-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--b1);border-radius:11px;padding:11px 14px;}
/* P8 footer buttons. Scoped to #nw plus every other surface that has adopted
   the vocabulary — add the id here rather than cloning the rule, so a change to
   the primary/ghost button reaches all of them at once. */
#nw .nw-bp,#view-addserver .nw-bp,.nwm .nw-bp,#view-dns .nw-bp{height:46px;padding:0 22px;border-radius:11px;background:var(--a);border:none;color:#fff;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:.15s;font-family:inherit;}#nw .nw-bp:hover,#view-addserver .nw-bp:hover,.nwm .nw-bp:hover:not(:disabled),#view-dns .nw-bp:hover:not(:disabled){background:var(--ah);}#nw .nw-bp:disabled,#view-addserver .nw-bp:disabled,.nwm .nw-bp:disabled,#view-dns .nw-bp:disabled{opacity:.55;cursor:default;}
#nw .nw-bg,#view-addserver .nw-bg,.nwm .nw-bg,#view-dns .nw-bg{height:46px;padding:0 18px;border-radius:11px;background:var(--w);border:1px solid var(--b1);font-size:14px;font-weight:600;color:var(--t2);cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;}#nw .nw-bg:hover,#view-addserver .nw-bg:hover,.nwm .nw-bg:hover,#view-dns .nw-bg:hover{background:var(--bg2);}
/* .nw-bp sets border:none and .nw-bg draws its own, so neither has a ring of
   its own — say it explicitly, offset outward so the primary's blue ring is
   still visible against its blue fill. */
#nw .nw-bp:focus-visible,#nw .nw-bg:focus-visible,#view-addserver .nw-bp:focus-visible,#view-addserver .nw-bg:focus-visible,.nwm .nw-bp:focus-visible,.nwm .nw-bg:focus-visible{outline:2px solid var(--a);outline-offset:2px;}
/* btnLoad() puts .loading on whatever button it is handed. .btn carries the
   spinner; the P8 buttons need their own copy of it or a submit mid-flight
   looks frozen. */
#nw .nw-bp.loading,#nw .nw-bg.loading,#view-addserver .nw-bp.loading,#view-addserver .nw-bg.loading,.nwm .nw-bp.loading,.nwm .nw-bg.loading{pointer-events:none;opacity:.75;}
#nw .nw-bp.loading::after,#nw .nw-bg.loading::after,#view-addserver .nw-bp.loading::after,#view-addserver .nw-bg.loading::after,.nwm .nw-bp.loading::after,.nwm .nw-bg.loading::after{content:'';display:inline-block;width:13px;height:13px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .5s linear infinite;flex-shrink:0;}
#nw .nw-add{font-size:11.5px;font-weight:700;color:var(--a);cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
/* Greyed, fixed account/host namespace prefix in the Docker image combobox. */
#nw .nw-imgns{color:var(--t4);font-family:'JetBrains Mono',monospace;font-size:13.5px;white-space:nowrap;flex-shrink:0;user-select:none;}
#nw .nw-ib{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}#nw .nw-ib img{width:18px;height:18px;object-fit:contain;}
#nw .nw-lgt{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto;}#nw .nw-lgt img{width:22px;height:22px;object-fit:contain;}
#nw .nw-sec{font-size:12px;font-weight:700;color:var(--t2);}
#nw .nw-sm{display:flex;justify-content:space-between;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--b1);}#nw .nw-sm span{color:var(--t3);}#nw .nw-sm b{font-weight:500;color:var(--t1);}
#nw .nw-fade{animation:nwFade .26s ease;}@keyframes nwFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
#nw .nw-reveal{animation:nwRev .22s ease;}@keyframes nwRev{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes nwSpin{to{transform:rotate(360deg)}}@keyframes nwShim{0%{background-position:-200px}100%{background-position:400px}}
#nw .nw-sk{border-radius:8px;background-image:linear-gradient(90deg,var(--b1) 0px,var(--bg2) 40px,var(--b1) 80px);background-size:600px;animation:nwShim 1.3s infinite linear;}
@media(max-width:560px){.nw-card{padding:18px 16px;}#nw .nw-grid2{grid-template-columns:1fr !important;}}

/* ═══════════════ MONITORING PAGE REDESIGN (mn-*) ═══════════════ */
#view-monitoring .mn-head-actions{display:flex;gap:8px;align-items:center;}
.mn-downpill{display:inline-flex;align-items:center;gap:6px;background:var(--rb);color:var(--r);font-size:12px;font-weight:600;padding:6px 11px;border-radius:9999px;}
.mn-downpill .dot{width:7px;height:7px;border-radius:50%;background:var(--r);animation:mnPulse 1.4s infinite;}
@keyframes mnPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.mn-refresh{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:var(--w);border:1px solid var(--b2);border-radius:8px;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;}
.mn-refresh svg{width:15px;height:15px;transition:transform .5s ease;}
.mn-refresh:hover{background:var(--ab);border-color:var(--a);color:var(--ah);box-shadow:0 1px 2px rgba(0,0,0,.05);}
.mn-refresh:hover svg{transform:rotate(-180deg);}
.mn-refresh:active{transform:scale(.97);}
.mn-refresh.spinning svg{animation:mnSpin .8s linear infinite;}
@keyframes mnSpin{to{transform:rotate(360deg)}}

/* ── KPI cards ── */
.mn-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
.mn-kpi{position:relative;background:var(--w);border:1px solid var(--b1);border-radius:12px;padding:14px;min-height:120px;box-shadow:var(--shadow-md);cursor:pointer;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s,box-shadow .2s;}
.mn-kpis .mn-kpi{opacity:0;transform:translateY(8px);}
.mn-kpis.mn-in .mn-kpi{opacity:1;transform:none;}
.mn-kpis.mn-in .mn-kpi:nth-child(1){transition-delay:.02s}.mn-kpis.mn-in .mn-kpi:nth-child(2){transition-delay:.08s}.mn-kpis.mn-in .mn-kpi:nth-child(3){transition-delay:.14s}.mn-kpis.mn-in .mn-kpi:nth-child(4){transition-delay:.2s}
.mn-kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.mn-kpi-top{display:flex;align-items:center;justify-content:space-between;}
.mn-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);transition:transform .3s;}
.mn-ico svg{width:20px;height:20px;}
.mn-kpi:hover .mn-ico{transform:scale(1.06);}
.mn-ico.g{background:var(--gb);color:var(--g);}.mn-ico.r{background:var(--rb);color:var(--r);}.mn-ico.a{background:var(--ab);color:var(--a);}.mn-ico.y{background:var(--yb);color:var(--y);}
.mn-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:9999px;white-space:nowrap;}
.mn-chip.g{background:var(--gb);color:var(--g);}.mn-chip.r{background:var(--rb);color:var(--r);}.mn-chip.a{background:var(--ab);color:var(--ah);}.mn-chip.y{background:var(--yb);color:var(--y);}
.mn-val{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:13px;line-height:1;color:var(--t1);font-variant-numeric:tabular-nums;}
.mn-val .u{font-size:15px;font-weight:600;color:var(--t3);margin-left:3px;}
.mn-lbl{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;margin-top:8px;}
.mn-desc{font-size:11px;color:var(--t3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Uptime table card ── */
.mn-tcard{padding:0;overflow:hidden;}
.mn-tch{display:flex;align-items:center;gap:8px;padding:13px 15px;border-bottom:1px solid var(--b1);}
.mn-tico{width:17px;height:17px;color:var(--a);flex:none;}
.mn-tct{font-size:14px;font-weight:700;color:var(--t1);}
.mn-row{position:relative;display:grid;grid-template-columns:1.9fr .95fr .8fr 1.25fr 1fr 118px;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--b1);opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s,background .15s;}
.mn-row:last-child{border-bottom:0;}
#uptime-rows.mn-in .mn-row{opacity:1;transform:none;}
#uptime-rows.mn-in .mn-row:nth-child(2){transition-delay:.04s}#uptime-rows.mn-in .mn-row:nth-child(3){transition-delay:.08s}#uptime-rows.mn-in .mn-row:nth-child(4){transition-delay:.12s}#uptime-rows.mn-in .mn-row:nth-child(5){transition-delay:.16s}#uptime-rows.mn-in .mn-row:nth-child(6){transition-delay:.2s}
.mn-row:hover{background:var(--bg2);}
.mn-site{font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:9px;color:var(--t1);}
.mn-sdot{width:8px;height:8px;border-radius:50%;flex:none;}
.mn-inc{font-size:11px;color:var(--t3);margin-top:3px;margin-left:17px;}
.mn-rsp{font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums;}
.mn-rsp.dn{color:var(--r);font-weight:600;}
.mn-upwrap{display:flex;align-items:center;gap:8px;}
.mn-upbar{flex:1;height:6px;background:var(--b1);border-radius:9999px;overflow:hidden;}
.mn-upbar i{display:block;height:100%;width:0;border-radius:9999px;transition:width 1.1s cubic-bezier(.2,.7,.2,1);}
#uptime-rows.mn-in .mn-upbar i{width:var(--uw);}
.mn-upn{font-size:12.5px;font-weight:500;color:var(--t2);font-variant-numeric:tabular-nums;min-width:46px;text-align:right;}
.mn-spark{width:88px;height:26px;display:block;}
.mn-spark .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.1s ease;}
.mn-spark .ar{opacity:0;transition:opacity .8s ease .3s;}
#uptime-rows.mn-in .mn-spark .ln{stroke-dashoffset:0;}
#uptime-rows.mn-in .mn-spark .ar{opacity:.14;}
.mn-ck{font-size:12.5px;font-weight:500;color:var(--t2);background:var(--w);border:1px solid var(--b2);padding:6px 13px;border-radius:8px;cursor:pointer;transition:.15s;}
.mn-ck:hover{background:var(--ab);border-color:var(--a);color:var(--ah);}
.mn-ck:disabled{opacity:.5;cursor:default;background:var(--w);border-color:var(--b2);color:var(--t3);}
.mn-ck.loading{opacity:.8;}
.mn-ck.loading::before{content:'';display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:mnSpin .6s linear infinite;}
.mn-ck:focus-visible,.mn-cog:focus-visible,.mn-sname:focus-visible,.mn-fclear:focus-visible{outline:2px solid var(--a);outline-offset:2px;}
/* Row actions: Check + the site's monitoring settings (⚙). A fixed column, so
   the header row above lines up with every row. */
.mn-acts{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.mn-cog{width:32px;height:32px;padding:0;border:1px solid var(--b2);border-radius:8px;background:var(--w);color:var(--t3);display:inline-grid;place-items:center;cursor:pointer;transition:.15s;}
.mn-cog svg{width:15px;height:15px;}
.mn-cog:hover{background:var(--ab);border-color:var(--a);color:var(--ah);}
.mn-sname{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mn-sname:hover{color:var(--a);}
/* Column header (DESIGN.md §12 P10) — same grid as .mn-row. */
.mn-th{display:grid;grid-template-columns:1.9fr .95fr .8fr 1.25fr 1fr 118px;gap:10px;padding:9px 15px;border-bottom:1px solid var(--b1);background:var(--bg2);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t4);}
/* Toolbar in the card header (P9): count · search · sort · export. */
.mn-tcount{font-size:12px;font-weight:500;color:var(--t4);}
.mn-tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.mn-tools .fw-srch{width:220px;}
.mn-tools .fw-srch:focus-within,.mn-sort:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--ab);outline:none;}
.mn-sort{height:38px;border:1px solid var(--b1);border-radius:10px;background:var(--w);color:var(--t2);font-family:inherit;font-size:12.5px;padding:0 10px;cursor:pointer;}
.mn-tch{flex-wrap:wrap;}
/* What the list is narrowed to, and the way back. */
.mn-fbar{display:flex;align-items:center;gap:10px;padding:9px 15px;border-bottom:1px solid var(--b1);background:var(--ab);font-size:12.5px;color:var(--t2);}
.mn-fbar[hidden]{display:none;}
.mn-fbar b{color:var(--t1);}
.mn-fclear{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--a);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.mn-fbar .mn-fclear{margin-left:auto;}
.mn-nomatch{padding:30px 15px;text-align:center;font-size:13px;color:var(--t3);}
/* A KPI card is a filter: the one in force is marked, and it takes the keyboard. */
.mn-kpi.mn-on{border-color:var(--a);box-shadow:0 0 0 3px var(--ab),var(--shadow-md);}
.mn-kpi:focus-visible{outline:2px solid var(--a);outline-offset:2px;}

/* ── Skeleton shimmer ── */
.mn-sk{display:block;background:linear-gradient(90deg,var(--b1) 25%,var(--bg2) 37%,var(--b1) 63%);background-size:400% 100%;animation:mnShim 1.25s ease infinite;border-radius:6px;}
@keyframes mnShim{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ── Empty state ── */
.mn-empty{text-align:center;padding:48px 20px;}
/* Sized for a stroked mark, not a glyph — this was font-size:34px when the
   empty state rendered a 📡 emoji. */
.mn-empty-ico{width:42px;height:42px;margin:0 auto 10px;color:var(--t4);}
.mn-empty-ico svg{width:100%;height:100%;}
.mn-empty-t{font-size:14px;font-weight:700;color:var(--t1);}
.mn-empty-d{font-size:12.5px;color:var(--t3);margin-top:4px;}

/* ── Responsive ── */
@media(max-width:900px){.mn-kpis{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.mn-row{grid-template-columns:1.5fr .9fr 1.1fr auto;}.mn-row .mn-c-rsp,.mn-row .mn-c-hist{display:none;}.mn-th{display:none;}.mn-tools{width:100%;margin-left:0;}.mn-tools .fw-srch{flex:1;width:auto;}}

/* ═══════════════ SERVER PAGE · REDIS / CACHE PANEL (rc-*) ═══════════════ */
.rc{position:relative;--rc-vio:#6d5cf0;--rc-viob:#eeebfe;}
.rc-head{display:flex;align-items:center;gap:12px;margin-bottom:15px;flex-wrap:wrap;}
.rc-logo{width:42px;height:42px;border-radius:11px;background:var(--w);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.rc-logo svg{width:25px;height:25px;}
.rc-htitle{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--t1);}
.rc-hsub{font-size:12px;color:var(--t3);margin-top:2px;font-variant-numeric:tabular-nums;}
.rc-sample{display:inline-flex;align-items:center;font-size:10px;font-weight:600;color:var(--y);background:var(--yb);padding:2px 8px;border-radius:9999px;margin-left:8px;vertical-align:middle;letter-spacing:.02em;}
.rc-btn{display:inline-flex;align-items:center;gap:7px;height:35px;padding:0 14px;border-radius:9px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;border:1px solid;}
.rc-btn svg{width:15px;height:15px;transition:transform .5s;}
.rc-btn.ref{background:var(--ab);border-color:var(--a);color:var(--ah);}
.rc-btn.ref:hover{background:var(--a);border-color:var(--a);color:#fff;}
.rc-btn.ref:hover svg{transform:rotate(-180deg);}
.rc-btn.ref.spin svg{animation:rcSpin .8s linear infinite;}
@keyframes rcSpin{to{transform:rotate(360deg)}}
.rc-btn.danger{background:var(--w);border-color:var(--rbd);color:var(--r);}
.rc-btn.danger svg{transition:none;}
.rc-btn.danger:hover{background:var(--r);border-color:var(--r);color:#fff;}
.rc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
.rc-kpi{position:relative;background:var(--w);border:1px solid var(--b1);border-radius:12px;padding:14px;min-height:120px;box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden;transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .2s;}
.rc-kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.rc-kt{display:flex;align-items:center;justify-content:space-between;}
.rc-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;transition:transform .3s;}
.rc-ico svg{width:20px;height:20px;}
.rc-kpi:hover .rc-ico{transform:scale(1.06);}
.rc-ico.a{background:var(--ab);color:var(--a);}.rc-ico.g{background:var(--gb);color:var(--g);}.rc-ico.v{background:var(--rc-viob);color:var(--rc-vio);}.rc-ico.y{background:var(--yb);color:var(--y);}
.rc-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:9999px;white-space:nowrap;}
.rc-chip.g{background:var(--gb);color:var(--g);}.rc-chip.y{background:var(--yb);color:var(--y);}.rc-chip.r{background:var(--rb);color:var(--r);}.rc-chip.a{background:var(--ab);color:var(--ah);}
.rc-val{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-top:12px;line-height:1;font-variant-numeric:tabular-nums;color:var(--t1);}
.rc-val .u{font-size:14px;font-weight:500;color:var(--t3);margin-left:3px;}
.rc-lbl{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.04em;margin-top:8px;}
.rc-desc{font-size:11px;color:var(--t3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rc-mbar{height:5px;border-radius:9999px;background:var(--b1);overflow:hidden;margin-top:9px;}
.rc-mbar i{display:block;height:100%;width:0;background:var(--y);border-radius:9999px;transition:width 1.1s cubic-bezier(.22,.61,.36,1) .2s;}
.rc.in .rc-mbar i{width:var(--uw,0);}
.rc-card{background:var(--w);border:1px solid var(--b1);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden;margin-bottom:14px;}
.rc-ch{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--b1);}
.rc-ct{font-size:14px;font-weight:600;color:var(--t1);}
.rc-live{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--g);background:var(--gb);padding:2px 9px;border-radius:9999px;}
.rc-live .d{width:6px;height:6px;border-radius:50%;background:var(--g);animation:rcPulse 1.6s infinite;}
@keyframes rcPulse{0%,100%{opacity:1}50%{opacity:.3}}
.rc-cwrap{padding:12px 12px 4px;height:172px;}
.rc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b1);border-top:1px solid var(--b1);}
.rc-stat{background:var(--w);padding:11px 12px;text-align:center;}
.rc-stat .l{font-size:10.5px;color:var(--t3);}
.rc-stat .v{font-size:14px;font-weight:600;color:var(--t1);margin-top:3px;font-variant-numeric:tabular-nums;}
.rc-mini{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--t2);background:var(--w);border:1px solid var(--b2);padding:6px 12px;border-radius:8px;cursor:pointer;transition:.15s;}
.rc-mini svg{width:13px;height:13px;}
.rc-mini:hover{background:var(--ab);border-color:var(--a);color:var(--ah);}
.rc-mini.danger{color:var(--r);}.rc-mini.danger:hover{background:var(--rb);border-color:var(--r);color:var(--r);}
.rc-mini:disabled{opacity:.45;cursor:default;background:var(--w);border-color:var(--b2);color:var(--t3);}
.rc-row{display:grid;grid-template-columns:26px 2fr .8fr .9fr auto;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--b1);opacity:0;transform:translateY(9px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1),background .14s;}
.rc.in .rc-row{opacity:1;transform:none;}
.rc.in .rc-row:nth-child(2){transition-delay:.05s}.rc.in .rc-row:nth-child(3){transition-delay:.12s}.rc.in .rc-row:nth-child(4){transition-delay:.19s}.rc.in .rc-row:nth-child(5){transition-delay:.26s}.rc.in .rc-row:nth-child(6){transition-delay:.33s}
.rc-row:last-child{border-bottom:0;}
.rc-row:hover{background:var(--bg2);}
.rc-row.head{opacity:1;transform:none;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--t4);background:var(--bg2);}
.rc-cb{width:15px;height:15px;accent-color:var(--a);cursor:pointer;}
.rc-site{display:flex;align-items:center;gap:12px;min-width:0;}
.rc-slogo{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex:none;border:1px solid rgba(0,0,0,.04);}
.rc-sn{min-width:0;}
.rc-sn .d{font-size:14.5px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;}
.rc-sn .m{display:flex;align-items:center;gap:8px;margin-top:4px;}
.rc-otag{font-size:9.5px;font-weight:600;color:var(--a);background:var(--ab);padding:2px 7px;border-radius:5px;letter-spacing:.02em;text-transform:uppercase;}
.rc-pfx{font-size:11px;color:var(--t4);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.rc-keys{font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums;font-weight:500;}
.rc-keys .kx{font-size:10.5px;color:var(--t4);font-weight:400;margin-left:2px;}
.rc-mem{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 11px;border-radius:9999px;background:var(--gb);color:var(--g);}
.rc-mem.y{background:var(--yb);color:var(--y);}.rc-mem.z{background:var(--bg2);color:var(--t4);}
.rc-flush{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--r);background:var(--w);border:1px solid var(--b2);padding:5px 12px;border-radius:8px;cursor:pointer;transition:.15s;}
.rc-flush svg{width:13px;height:13px;}
.rc-flush:hover{background:var(--rb);border-color:var(--r);}
.rc-flush:disabled{opacity:.35;cursor:default;color:var(--t3);border-color:var(--b2);background:var(--w);}
.rc-sk{display:block;background:linear-gradient(90deg,var(--b1) 25%,var(--bg2) 37%,var(--b1) 63%);background-size:400% 100%;animation:mnShim 1.25s ease infinite;border-radius:7px;}
.rc-empty{padding:44px 20px;text-align:center;}
.rc-empty-ico{width:52px;height:52px;border-radius:14px;background:var(--bg2);display:inline-flex;align-items:center;justify-content:center;color:var(--t4);margin-bottom:12px;}
.rc-empty-t{font-size:14px;font-weight:700;color:var(--t1);}
.rc-empty-d{font-size:12.5px;color:var(--t3);margin-top:5px;max-width:360px;margin-left:auto;margin-right:auto;line-height:1.5;}
.rc-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px;}
.rc-modal.show{display:flex;animation:rcFade .18s ease;}
@keyframes rcFade{from{opacity:0}to{opacity:1}}
.rc-mcard{background:var(--w);border-radius:15px;width:390px;max-width:100%;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:rcPop .24s cubic-bezier(.34,1.4,.64,1);}
@keyframes rcPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.rc-micon{width:50px;height:50px;border-radius:13px;background:var(--rb);color:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:15px;}
.rc-micon svg{width:26px;height:26px;}
.rc-mtitle{font-size:16.5px;font-weight:700;color:var(--t1);}
.rc-mbody{font-size:13px;color:var(--t3);line-height:1.55;margin-top:7px;}
.rc-mbody b{color:var(--t2);font-weight:600;}
.rc-mact{display:flex;gap:10px;margin-top:20px;}
.rc-mbtn{flex:1;height:41px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid;transition:.15s;}
.rc-mbtn.cancel{background:var(--w);border-color:var(--b2);color:var(--t2);}.rc-mbtn.cancel:hover{background:var(--bg2);}
.rc-mbtn.confirm{background:var(--r);border-color:var(--r);color:#fff;}.rc-mbtn.confirm:hover{filter:brightness(.92);}
@media(max-width:900px){.rc-kpis{grid-template-columns:repeat(2,1fr);}.rc-stats{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.rc-row{grid-template-columns:24px 1.6fr auto;}.rc-row .c-keys,.rc-row .c-mem{display:none;}}

/* ═══════════════ WEB TERMINAL REDESIGN (tw-*) ═══════════════ */
.tw{position:relative;}
.tw-head{display:flex;align-items:center;gap:12px;margin-bottom:13px;flex-wrap:wrap;}
.tw-ico{width:38px;height:38px;border-radius:10px;background:#0b0e14;color:#3fb950;display:flex;align-items:center;justify-content:center;flex:none;}
.tw-ico svg{width:19px;height:19px;}
.tw-title{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--t1);}
.tw-sub{font-size:12px;color:var(--t3);margin-top:2px;}
.tw-sp{flex:1;}
.tw-cmdbtn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);background:var(--w);border:1px solid var(--b2);border-radius:8px;padding:6px 11px;cursor:pointer;transition:.15s;}
.tw-cmdbtn:hover{background:var(--ab);border-color:var(--a);color:var(--ah);}
.tw-cmdbtn b{font-family:ui-monospace,monospace;font-weight:600;}
.tw-toolbar{display:flex;align-items:center;gap:9px;background:var(--w);border:1px solid var(--b1);border-radius:12px;padding:9px 11px;margin-bottom:13px;flex-wrap:wrap;box-shadow:var(--shadow-md);}
.tw-pick{position:relative;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 11px;background:var(--bg2);border:1px solid var(--b2);border-radius:9px;font-size:13px;font-weight:500;color:var(--t1);cursor:pointer;transition:.15s;}
.tw-pick:hover{border-color:var(--a);background:var(--ab);}
.tw-pico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none;}
.tw-pico svg{width:14px;height:14px;}
/* Tinted variants for the picker/menu icon tiles. These used to be inline
   literals (#e6f1fb/#185fa5 etc.) — untokenized copies of --ab/--a, so the
   tiles stayed pale on the dark toolbar while everything around them flipped.
   .bl is kept distinct from .a so a site row still reads differently from a
   server row, as it did before. */
.tw-pico.a,.tw-mico.a{background:var(--ab);color:var(--a);}
.tw-pico.g,.tw-mico.g{background:var(--gb);color:var(--g);}
.tw-pico.bl,.tw-mico.bl{background:var(--blb);color:var(--bl);}
.tw-psub{font-size:11px;color:var(--t4);font-weight:400;}
.tw-prod{font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--r);background:var(--rb);border:1px solid var(--rbd,#fca5a5);border-radius:5px;padding:1px 5px;}
.tw-pchev svg{width:14px;height:14px;color:var(--t4);}
.tw-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--w);border:1px solid var(--b1);border-radius:11px;box-shadow:var(--shadow-lg);padding:6px;z-index:60;animation:twMenuIn .14s ease;}
@keyframes twMenuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.tw-mitem{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;cursor:pointer;transition:background .12s;}
.tw-mitem:hover{background:var(--ab);}
.tw-mico{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none;}
.tw-mico svg{width:13px;height:13px;}
.tw-mn{font-size:13px;font-weight:500;color:var(--t1);display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1;}
.tw-msub{font-size:11px;color:var(--t4);font-weight:400;font-variant-numeric:tabular-nums;}
.tw-mchk{color:var(--a);display:flex;} .tw-mchk svg{width:12px;height:12px;}
.tw-mempty{padding:12px;font-size:12px;color:var(--t3);text-align:center;}
.tw-conn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:9999px;}
.tw-conn .d{width:8px;height:8px;border-radius:50%;}
.tw-conn.c-g{color:var(--g);background:var(--gb);} .tw-conn.c-g .d{background:var(--g);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:twPing 1.8s infinite;}
.tw-conn.c-y{color:var(--y);background:var(--yb);} .tw-conn.c-y .d{background:var(--y);animation:twPing 1.4s infinite;}
.tw-conn.c-r{color:var(--r);background:var(--rb);} .tw-conn.c-r .d{background:var(--r);}
.tw-conn.c-x{color:var(--t3);background:var(--bg2);} .tw-conn.c-x .d{background:var(--t4);}
@keyframes twPing{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.tw-themeseg{display:inline-flex;background:var(--bg2);border:1px solid var(--b2);border-radius:9px;padding:3px;gap:2px;}
.tw-segb{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--t3);background:transparent;border:0;padding:5px 10px;border-radius:7px;cursor:pointer;transition:.15s;}
.tw-segb svg{width:14px;height:14px;} .tw-segb.on{background:var(--w);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.12);}
/* terminal */
.tw-term{--td:#0d1117;--tdh:#161b22;--tt:#c9d1d9;--tg:#3fb950;--tbl:#58a6ff;--tr:#f85149;--tdim:#7d8590;--tbord:#21262d;--thi:rgba(255,255,255,.05);--tscr:#2a313c;
  position:relative;background:var(--td);border:1px solid var(--tbord);border-radius:13px;overflow:hidden;box-shadow:0 14px 38px rgba(2,6,23,.20);transition:background .25s,border-color .25s;}
.tw-term.light{--td:#ffffff;--tdh:#f6f8fa;--tt:#1f2328;--tg:#1a7f37;--tbl:#0969da;--tr:#cf222e;--tdim:#656d76;--tbord:#d0d7de;--thi:rgba(0,0,0,.045);--tscr:#d0d7de;box-shadow:0 6px 20px rgba(2,6,23,.08);}
.tw-term:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--tr);z-index:6;opacity:0;transition:opacity .2s;}
.tw-term.prodenv:before{opacity:.85;}
.tw-tbar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--tdh);border-bottom:1px solid var(--tbord);}
/* The WP-CLI tab reuses P13's terminal header outside a .tw-term, where the
   palette below is declared — so every var() in the rule above resolved to
   nothing: no tint, the border-bottom shorthand unset to none, and the status
   dot invisible while still occupying its 8px. Supplying the five properties it
   needs is cheaper than nesting a second rounded, shadowed container in the
   card. Values match .tw-term's dark palette; the bar sits on the always-dark
   log surface in both themes. */
.sd-cliterm{--tdh:#232336;--tbord:#2b2b40;--tt:#c8c8d6;--tg:#46d27e;--tdim:#7c7c93;}
.tw-tdot{width:8px;height:8px;border-radius:50%;background:var(--tg);flex:none;}
.tw-thost{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--tt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tw-thost .m{color:var(--tdim);}
.tw-tools{margin-left:auto;display:flex;align-items:center;gap:1px;flex:none;}
.tw-tdiv{width:1px;height:16px;background:var(--tbord);margin:0 5px;}
.tw-tbtn{min-width:27px;height:27px;padding:0 6px;display:flex;align-items:center;justify-content:center;color:var(--tdim);border-radius:7px;cursor:pointer;transition:.15s;}
.tw-tbtn svg{width:14px;height:14px;} .tw-tbtn .fz{font-size:11px;font-family:ui-monospace,monospace;font-weight:600;}
.tw-tbtn:hover{background:var(--thi);color:var(--tt);}
.tw-tbtn.danger:hover{background:rgba(248,81,73,.16);color:var(--tr);}
/* The window's height, not a fixed 360px (16 rows with ~380px of empty page below on a laptop). */
.tw-body{height:clamp(360px,calc(100vh - 470px),1200px);background:var(--td);padding:8px 4px 6px 10px;overflow:hidden;}
.tw-body .xterm{height:100%;} .tw-body .xterm-viewport::-webkit-scrollbar{width:9px;} .tw-body .xterm-viewport::-webkit-scrollbar-thumb{background:var(--tscr);border-radius:6px;}
.tw-statusbar{display:flex;align-items:center;background:var(--tdh);border-top:1px solid var(--tbord);font-family:ui-monospace,monospace;font-size:11px;color:var(--tdim);height:29px;overflow:hidden;}
.tw-seg{display:inline-flex;align-items:center;gap:6px;padding:0 11px;height:100%;border-right:1px solid var(--tbord);white-space:nowrap;}
.tw-seg svg{width:12px;height:12px;} .tw-seg.host{color:var(--tt);} .tw-seg.branch{color:var(--tbl);} .tw-seg.prod{color:var(--tr);} .tw-seg.ok{color:var(--tg);}
.tw-seg.warn{color:var(--tbl);} .tw-seg.err{color:var(--tr);} .tw-seg.off{color:var(--tdim);}
.tw-seg.rt{margin-left:auto;border-right:0;border-left:1px solid var(--tbord);} .tw-seg.rt2{border-right:0;}
.tw-seg .dotg{width:7px;height:7px;border-radius:50%;background:var(--tg);}
.tw-sig{display:inline-flex;align-items:flex-end;gap:2px;height:11px;}
.tw-sig i{width:3px;border-radius:1px;background:var(--tg);} .tw-sig i:nth-child(1){height:4px} .tw-sig i:nth-child(2){height:7px} .tw-sig i:nth-child(3){height:11px}
.tw-sig.y i{background:var(--ty,#d29922);} .tw-sig.r i{background:var(--tr);} .tw-sig.y i:nth-child(3),.tw-sig.r i:nth-child(3){opacity:.4} .tw-sig.r i:nth-child(2){opacity:.4}
/* command palette */
.tw-cmdk{position:absolute;inset:0;background:rgba(3,6,12,.55);display:none;align-items:flex-start;justify-content:center;padding-top:44px;z-index:30;}
.tw-cmdk.open{display:flex;animation:twFade .14s ease;}
@keyframes twFade{from{opacity:0}to{opacity:1}}
.tw-pal{width:480px;max-width:92%;background:#161b22;border:1px solid #2a313c;border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.55);overflow:hidden;animation:twPop .18s cubic-bezier(.34,1.4,.64,1);}
@keyframes twPop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.tw-palin{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid #21262d;} .tw-palin svg{color:#7d8590;flex:none;}
.tw-palin input{flex:1;background:transparent;border:0;outline:0;color:#c9d1d9;font-size:14px;font-family:inherit;}
.tw-palin input::placeholder{color:#586069;} .tw-palin .kb{font-size:10px;color:#7d8590;border:1px solid #2a313c;border-radius:5px;padding:2px 6px;}
.tw-palbody{max-height:260px;overflow-y:auto;padding:6px 0;}
.tw-pallbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#7d8590;padding:6px 14px 3px;}
.tw-palrow{display:flex;align-items:center;gap:11px;padding:8px 14px;cursor:pointer;color:#c9d1d9;font-size:13px;font-family:ui-monospace,monospace;}
.tw-palrow svg{color:#7d8590;width:15px;height:15px;flex:none;} .tw-palrow span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tw-palrow.sel{background:rgba(31,111,235,.18);} .tw-palrow:hover{background:rgba(255,255,255,.05);}
.tw-palrow .rt{flex:none;font-size:10.5px;color:#7d8590;}
/* snippets */
.tw-snips{display:flex;align-items:center;gap:8px;margin-top:14px;overflow-x:auto;overflow-y:hidden;padding:6px 2px;} .tw-snips::-webkit-scrollbar{height:0;}
.tw-slabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t4);flex:none;padding-right:2px;}
.tw-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--t2);background:var(--w);border:1px solid var(--b2);border-radius:8px;padding:7px 12px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;font-family:ui-monospace,monospace;flex:none;line-height:1;}
.tw-chip svg{width:13px;height:13px;color:var(--t4);transition:color .15s;flex:none;}
.tw-chip:hover{background:var(--ab);border-color:var(--a);color:var(--ah);box-shadow:0 1px 4px rgba(22,84,210,.13);}
.tw-chip:hover svg{color:var(--a);}
.tw-chip:active{background:var(--ab);border-color:var(--a);}
.tw-sdiv{width:1px;height:18px;background:var(--b2);flex:none;margin:0 5px;}
/* history */
.tw-hist{background:var(--w);border:1px solid var(--b1);border-radius:12px;box-shadow:var(--shadow-md);margin-top:12px;overflow:hidden;}
.tw-hch{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--b1);} .tw-hct{font-size:13px;font-weight:600;color:var(--t1);} .tw-hsub{font-size:11px;color:var(--t4);}
.tw-hrow{display:flex;align-items:center;gap:11px;padding:7px 14px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .13s;} .tw-hrow:last-child{border-bottom:0;} .tw-hrow:hover{background:var(--bg2);}
.tw-htime{font-size:10.5px;color:var(--t4);font-variant-numeric:tabular-nums;width:42px;flex:none;} .tw-hcmd{font-family:ui-monospace,monospace;font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.tw-hrun{color:var(--t4);opacity:0;transition:.13s;} .tw-hrun svg{width:13px;height:13px;} .tw-hrow:hover .tw-hrun{opacity:1;color:var(--a);}
/* fullscreen */
.tw.tw-fs{position:fixed;inset:0;z-index:3000;background:var(--bg);padding:16px;overflow:auto;margin:0;border-radius:0;}
.tw.tw-fs .tw-body{height:calc(100vh - 300px);}
@media(max-width:700px){.tw-seg.opt{display:none;}.tw-tbtn.opt{display:none;}.tw-sub{display:none;}}
/* Terminal controls are real <button>s now (they were spans and divs no keyboard
   could reach, with no name for a screen reader): the UA button look reset. */
button.tw-tbtn{background:none;border:0;font:inherit;}
button.tw-pick{font:inherit;font-size:13px;font-weight:500;}
button.tw-chip{font-family:ui-monospace,monospace;font-size:12px;font-weight:500;}
button.tw-hrow{width:100%;background:none;border:0;border-bottom:1px solid var(--b1);text-align:left;font:inherit;color:inherit;}
button.tw-hrow:last-child{border-bottom:0;}
button.tw-mitem{width:100%;background:none;border:0;text-align:left;font:inherit;color:inherit;}
.tw-pickwrap{position:relative;display:inline-flex;}
.tw-tbtn:focus-visible,.tw-pick:focus-visible,.tw-chip:focus-visible,.tw-hrow:focus-visible,.tw-mitem:focus-visible,.tw-cmdbtn:focus-visible,.tw-segb:focus-visible{outline:2px solid var(--a);outline-offset:2px;}
.tw-tbtn:focus-visible{outline-color:var(--tbl);}
.tw-hrow:focus-visible .tw-hrun{opacity:1;color:var(--a);}
/* Online / offline on each server in the picker. */
.tw-mdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--t4);}
.tw-mdot.on{background:var(--g);} .tw-mdot.off{background:var(--r);opacity:.75;}
.tw-poff{font-size:10.5px;font-weight:600;color:var(--r);background:var(--rb);border-radius:999px;padding:1px 7px;text-transform:lowercase;}
/* Find in the output (searches the scrollback, which the browser's Find cannot see). */
.tw-find{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--tdh);border-bottom:1px solid var(--tbord);color:var(--tdim);}
.tw-find[hidden]{display:none;}
.tw-find > svg{width:14px;height:14px;flex:none;}
.tw-find input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--tt);font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.tw-find input::placeholder{color:var(--tdim);}
.tw-findn{font-size:11px;color:var(--tdim);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ═══════════════ BACKUPS PAGE v8 REDESIGN (bku-*) ═══════════════
   Approved artifact design: slate palette + panel blue #1654d2.
   Light-only like fw-* (sites page). */
/* .bku-ov too: most Backups dialogs are appended to <body>, outside
   #view-backups, so every var(--bku-*) inside them resolved to nothing — the
   disabled "Add destination" button had no background at all: white text on a
   white card in light mode, a bare label in dark. */
#view-backups,.bku-ov,.sd-bku{--bku-bd:var(--b1);--bku-bd2:var(--bg2);--bku-bd3:var(--b2);--bku-inset:var(--bg2);--bku-hov:var(--bg2);
  --bku-ink:var(--t1);--bku-t2:var(--t2);--bku-t3:var(--t3);--bku-mut:var(--t4);--bku-faint:var(--b2);
  --bku-a:var(--a);--bku-ah:var(--ah);--bku-abg:var(--ab);--bku-abd:var(--ab);--bku-aring:var(--ab);--bku-at:var(--ab);--bku-alk:var(--a);
  --bku-gt:var(--g);--bku-gbg:var(--gb);--bku-gbd:var(--gbd);--bku-gdot:var(--g);
  --bku-rt:var(--r);--bku-rbg:var(--rb);--bku-rbd:var(--rbd);
  --bku-yt:var(--y);--bku-ybg:var(--yb);--bku-ybd:var(--ybd);
  --bku-p:#7c3aed;--bku-pbg:#f5f3ff;
  color:var(--bku-ink);font-size:14px;}
/* purple category (WordPress) stays violet in both themes; only its tint + text
   need dark-adaptive values since the token system has no violet ramp */
[data-theme="dark"] #view-backups,[data-theme="dark"] .sd-bku{--bku-p:#b794f6;--bku-pbg:#241a3d;}
#view-backups svg{display:block}
.bku-an{opacity:0;transform:translateY(6px)}
.bku-an.go{animation:bkuUp .35s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes bkuUp{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bku-an{animation:none!important;opacity:1;transform:none}}
/* header */
.bku-ph{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.bku-ph .left{display:flex;align-items:center;gap:14px}
.bku-hico{width:46px;height:46px;border-radius:13px;background:linear-gradient(150deg,var(--a),var(--ah));display:grid;place-items:center;box-shadow:0 4px 14px rgba(22,84,210,.25)}
.bku-hico svg{width:22px;height:22px;color:#fff}
.bku-ph h1{font-family:var(--font);font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--bku-ink);margin:0}
.bku-ph .sub{font-size:12px;color:var(--bku-mut);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bku-okdot{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--bku-gt);background:var(--bku-gbg);border:1px solid var(--bku-gbd);border-radius:999px;padding:2px 10px}
.bku-okdot i{width:6px;height:6px;border-radius:50%;background:var(--bku-gdot);animation:bkuPulse 2s infinite}
@keyframes bkuPulse{0%,100%{opacity:1}50%{opacity:.35}}
.bku-gbtn{height:38px;padding:0 15px;border-radius:10px;background:var(--w);border:1px solid var(--bku-bd3);font-size:12.5px;font-weight:500;color:var(--bku-t3);cursor:pointer;transition:all .14s;display:inline-flex;align-items:center;gap:7px;font-family:inherit}
.bku-gbtn:hover{background:var(--bku-hov);border-color:var(--bku-faint)}
.bku-gbtn:active{transform:scale(.98)}
.bku-gbtn svg{width:15px;height:15px}
.bku-pbtn{height:38px;padding:0 17px;border-radius:10px;background:var(--bku-a);border:none;color:#fff;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:pointer;box-shadow:0 1px 2px rgba(22,84,210,.3);transition:all .14s;font-family:inherit}
.bku-pbtn:hover{background:var(--bku-ah)}
.bku-pbtn:active{transform:scale(.98)}
.bku-pbtn svg{width:14px;height:14px}
.bku-pbtn:disabled,.bku-ov .bku-pbtn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;background:var(--bku-a)}
.bku-pbtn:disabled:hover,.bku-ov .bku-pbtn:disabled:hover{background:var(--bku-a)}
.bku-pbtn:disabled:active{transform:none}
/* KPIs */
.bku-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:13px}
@media(max-width:900px){.bku-kpis{grid-template-columns:repeat(2,1fr)}}
.bku-kpi{position:relative;background:var(--w);border:1px solid var(--bku-bd);border-radius:14px;padding:15px 16px;min-height:114px;overflow:hidden;transition:transform .25s cubic-bezier(.25,.6,.3,1),box-shadow .25s,border-color .2s}
.bku-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.08);border-color:var(--b1)}
.bku-kpi:hover .bku-kico{transform:scale(1.05)}
.bku-ktop{display:flex;align-items:center;justify-content:space-between}
.bku-kico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);transition:transform .25s}
.bku-kico svg{width:17px;height:17px}
.bku-kico.g{background:var(--bku-gbg);color:var(--bku-gt)}.bku-kico.a{background:var(--bku-at);color:var(--bku-a)}.bku-kico.p{background:var(--bku-pbg);color:var(--bku-p)}
.bku-kchip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px}
.bku-kchip.g{background:var(--bku-gbg);color:var(--bku-gt)}.bku-kchip.r{background:var(--bku-rbg);color:var(--bku-rt)}.bku-kchip.a{background:var(--bku-at);color:var(--bku-a)}.bku-kchip.y{background:var(--bku-ybg);color:var(--bku-yt)}
.bku-kval{font-size:25px;font-weight:600;letter-spacing:-.02em;margin-top:12px;line-height:1;font-variant-numeric:tabular-nums;color:var(--bku-ink)}
.bku-kval small{font-size:14px;color:var(--bku-mut);font-weight:500}
.bku-klab{font-size:11.5px;color:var(--bku-mut);margin-top:6px;font-weight:500}
.bku-ringmini{position:absolute;right:15px;bottom:13px;width:42px;height:42px}
.bku-ringmini svg{width:42px;height:42px;transform:rotate(-90deg)}
/* gauge draw-on-load: arc sweeps from empty (--rl = full circumference) to its value */
.bku-rp{animation:bkuRingDraw 1s cubic-bezier(.34,.9,.3,1) both}
@keyframes bkuRingDraw{from{stroke-dashoffset:var(--rl)}}
@media(prefers-reduced-motion:reduce){.bku-rp{animation:none}}
/* tabs */
.bku-tabs{display:flex;background:var(--bku-bd3);border:1px solid var(--bku-bd);border-radius:12px;padding:4px;gap:3px;margin-bottom:16px;max-width:500px}
.bku-tab{flex:1;text-align:center;height:38px;font-size:12.5px;font-weight:500;color:var(--bku-mut);cursor:pointer;border-radius:9px;transition:.16s;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit}
.bku-tab .n{font-size:11px;font-weight:600;background:rgba(0,0,0,.05);border-radius:999px;padding:1px 7px;color:var(--bku-mut)}
.bku-tab.on{background:var(--w);color:var(--bku-alk);box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:600}
.bku-tab.on .n{background:var(--bku-at);color:var(--bku-a)}
.bku-pane{display:none}.bku-pane.on{display:block}
/* toolbar */
.bku-bar{display:flex;align-items:center;gap:7px;margin-bottom:13px;flex-wrap:wrap}
.bku-fchip{height:34px;padding:0 14px;border-radius:10px;font-size:12.5px;font-weight:500;color:var(--bku-t3);background:var(--w);border:1px solid var(--bku-bd3);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.14s;font-family:inherit}
.bku-fchip:hover{background:var(--bku-hov);border-color:var(--b2)}
.bku-fchip .c{font-size:11px;font-weight:600;background:var(--bku-bd2);border-radius:999px;padding:1px 7px;color:var(--bku-mut)}
.bku-fchip.on{background:var(--bku-abg);border-color:var(--bku-abd);color:var(--bku-alk);font-weight:600}
.bku-fchip.on .c{background:var(--bku-at);color:var(--bku-a)}
.bku-fchip.r.on{background:var(--bku-rbg);border-color:var(--bku-rbd);color:var(--bku-rt)}.bku-fchip.r.on .c{background:transparent;color:var(--bku-rt)}
.bku-fchip.y.on{background:var(--bku-ybg);border-color:var(--bku-ybd);color:var(--bku-yt)}.bku-fchip.y.on .c{background:transparent;color:var(--bku-yt)}
/* platform filter — dropdown docked to the right, just before the search */
.bku-pfdd{position:relative;margin-left:auto}
.bku-pfdd-btn{height:38px;padding:0 11px 0 12px;border-radius:10px;background:var(--w);border:1px solid var(--bku-bd3);cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--bku-t3);transition:.14s}
.bku-pfdd-btn:hover{background:var(--bku-hov);border-color:var(--b2)}
.bku-pfdd.open .bku-pfdd-btn{border-color:var(--bku-abd);box-shadow:0 0 0 3px var(--bku-aring)}
.bku-pfdd.active .bku-pfdd-btn{background:var(--bku-abg);border-color:var(--bku-abd);color:var(--bku-alk)}
.bku-pfdd-btn .cur{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.bku-pfdd-btn .cur img,.bku-pfdd-btn .cur svg{width:15px;height:15px;object-fit:contain;flex-shrink:0}
.bku-pfdd-btn .cv{width:15px;height:15px;color:var(--bku-mut);transition:transform .2s}
.bku-pfdd.open .bku-pfdd-btn .cv{transform:rotate(180deg)}
.bku-pfdd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:212px;background:var(--w);border:1px solid var(--bku-bd3);border-radius:11px;box-shadow:0 12px 32px rgba(16,24,40,.14);padding:6px;z-index:60;opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top left;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.bku-pfdd.open .bku-pfdd-menu{opacity:1;transform:none;pointer-events:auto}
.bku-pfdd-row{width:100%;display:flex;align-items:center;gap:10px;padding:8px 9px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--bku-ink);text-align:left;transition:background .12s}
.bku-pfdd-row:hover{background:var(--bku-hov)}
.bku-pfdd-row.on{background:var(--bku-abg)}
.bku-pfdd-row .ic{width:20px;display:grid;place-items:center;flex-shrink:0;color:var(--bku-t3)}
.bku-pfdd-row .ic img,.bku-pfdd-row .ic svg{width:16px;height:16px;object-fit:contain}
.bku-pfdd-row .nm{flex:1;white-space:nowrap}
.bku-pfdd-row.on .nm{color:var(--bku-a);font-weight:600}
.bku-pfdd-row .ct{font-size:11px;font-weight:600;background:var(--bku-bd2);border-radius:999px;padding:1px 7px;color:var(--bku-mut)}
.bku-pfdd-row .ck{width:15px;height:15px;color:var(--bku-a);display:none}
.bku-pfdd-row .ck svg{width:15px;height:15px}
.bku-pfdd-row.on .ck{display:grid;place-items:center}
.bku-pfdd + .bku-srch{margin-left:8px}   /* keep search adjacent to the dropdown (dropdown owns the auto-margin) */
/* Lift the whole toolbar above the site list while the dropdown is open, else
   the menu paints UNDER the later-in-DOM .bku-scard cards (same fix as the
   server-assignments dropdown). */
.bku-bar:has(.bku-pfdd.open){position:relative;z-index:120}
/* platform logo chip beside the site name (Option 1) */
.bku-plat{display:inline-grid;place-items:center;width:25px;height:20px;border-radius:6px;border:1px solid;vertical-align:middle;margin-left:8px}
.bku-plat img{width:13px;height:13px;object-fit:contain}
.bku-plat svg{width:13px;height:13px;color:var(--t4)}
.bku-plat.wp{background:var(--ab);border-color:var(--ab)}
.bku-plat.dk{background:var(--ab);border-color:var(--ab)}
.bku-plat.ca{background:var(--bg2);border-color:var(--b1)}
.bku-srch{display:flex;align-items:center;gap:8px;height:38px;padding:0 13px;border:1px solid var(--bku-bd3);border-radius:10px;background:var(--w);width:220px;margin-left:auto;color:var(--bku-mut);font-size:12.5px;transition:border-color .14s,box-shadow .14s}
.bku-srch:focus-within{border-color:var(--bku-abd);box-shadow:0 0 0 3px var(--bku-aring)}
.bku-srch svg{width:14px;height:14px;flex-shrink:0}
.bku-srch input{border:0;outline:0;background:none;font:inherit;color:var(--bku-ink);width:100%}
.bku-srch input::placeholder{color:var(--bku-mut)}
/* tiles */
.bku-bt{border-radius:8px;background:var(--w);border:1px solid var(--b1);display:grid;place-items:center;position:relative;flex-shrink:0}
.bku-bt svg,.bku-bt img{width:60%;height:60%;object-fit:contain}
.bku-bt .st{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;border:2px solid #fff}
.bku-fav{width:38px;height:38px;border-radius:9px;background:var(--w);border:1px solid var(--b1);display:grid;place-items:center;flex-shrink:0;font-weight:600;color:var(--t3);font-size:14px}
.bku-fav img{width:20px;height:20px;object-fit:contain}
/* site cards */
.bku-scard{background:var(--w);border:1px solid var(--bku-bd);border-radius:14px;margin-bottom:10px;transition:box-shadow .22s,border-color .18s;position:relative}
.bku-scard:hover{box-shadow:0 8px 20px rgba(16,24,40,.06);border-color:var(--b1)}
.bku-scard.menuopen{z-index:50}
/* live backup/restore progress banner */
.bku-job{background:var(--w);border:1px solid var(--bku-bd);border-radius:14px;padding:15px 18px;margin-bottom:12px}
.bku-job .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bku-job .jico{width:36px;height:36px;border-radius:10px;background:var(--bku-at);display:grid;place-items:center;flex-shrink:0}
.bku-spin{width:15px;height:15px;border:2px solid var(--bku-abd);border-top-color:var(--bku-a);border-radius:50%;animation:bkuSpin .8s linear infinite}
@keyframes bkuSpin{to{transform:rotate(360deg)}}
.bku-job .jt{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.bku-job .js{font-size:11.5px;color:var(--bku-mut);margin-top:2px}
.bku-job .jpct{margin-left:auto;font-size:14px;font-weight:600;color:var(--bku-a);font-variant-numeric:tabular-nums}
.bku-jdismiss{border:1px solid var(--bku-bd3);background:var(--w);color:var(--bku-t3);font-size:12px;font-weight:500;cursor:pointer;padding:7px 13px;border-radius:9px;font-family:inherit}
.bku-jdismiss:hover{background:var(--bku-hov);border-color:var(--bku-faint)}
.bku-jcancel{border:1px solid var(--bku-rbd);background:var(--bku-rbg);color:var(--bku-rt);font-size:12px;font-weight:600;cursor:pointer;padding:7px 13px;border-radius:9px;font-family:inherit}
.bku-jcancel:hover{filter:brightness(.97)}
.bku-jcancel:disabled{opacity:.6;cursor:default;filter:none}
.bku-job.cancelling{opacity:.8}
.bku-job.cancelling .jico{background:var(--bku-rbg)}
.bku-job.cancelling .jpct{color:var(--bku-mut)}
.bku-resrow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--bku-bd2)}
.bku-resrow:last-child{border-bottom:none}
.bku-segs{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:14px}
.bku-seg .b{height:4.5px;border-radius:3px;background:var(--bku-bd2)}
.bku-seg.done .b{background:var(--bku-gdot)}
.bku-seg.cur .b{background:var(--bku-a);animation:bkuSegPulse 1.2s ease infinite}
.bku-seg.fail .b{background:var(--bku-rt)}
@keyframes bkuSegPulse{0%,100%{opacity:1}50%{opacity:.45}}
.bku-seg .l{font-size:9.5px;font-weight:500;color:var(--bku-mut);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bku-seg.done .l{color:var(--bku-gt)}
.bku-seg.cur .l{color:var(--bku-a);font-weight:600}
.bku-seg.fail .l{color:var(--bku-rt);font-weight:600}
@media(max-width:760px){.bku-seg .l{display:none}}
@media(prefers-reduced-motion:reduce){.bku-spin,.bku-seg.cur{animation:none}}
.bku-srow{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(120px,.55fr) minmax(86px,.4fr) minmax(104px,.45fr) minmax(96px,.4fr) 42px;gap:12px;align-items:center;padding:14px 16px;cursor:pointer}
.bku-sitec{display:flex;align-items:center;gap:12px;min-width:0}
.bku-chev{width:14px;height:14px;color:var(--bku-faint);flex-shrink:0;transition:transform .18s}
.bku-scard.exp .bku-chev{transform:rotate(90deg)}
.bku-dn{min-width:0}
.bku-dn .d{font-size:14.5px;font-weight:500;color:var(--bku-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bku-dn .m{margin-top:3px;font-size:11px;color:var(--bku-mut);font-weight:400}
.bku-colh{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--bku-mut);margin-bottom:3px}
.bku-colv{font-size:12.5px;font-weight:500;color:var(--bku-t2);font-variant-numeric:tabular-nums}
.bku-colv .sub{display:block;font-size:11px;color:var(--bku-mut);font-weight:400;margin-top:1px}
.bku-pvs{display:flex;gap:4px}
.bku-hpill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;border-radius:999px;padding:4px 13px;white-space:nowrap;justify-self:start;border:1px solid}
.bku-hpill .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.bku-hpill.ok{background:var(--bku-gbg);color:var(--bku-gt);border-color:var(--bku-gbd)}.bku-hpill.ok .dot{background:var(--bku-gdot);animation:bkuPulse 2s infinite}
.bku-hpill.bad{background:var(--bku-rbg);color:var(--bku-rt);border-color:var(--bku-rbd)}.bku-hpill.bad .dot{background:var(--bku-rt);animation:bkuPulse 1.2s infinite}
.bku-hpill.orp{background:var(--bku-ybg);color:var(--bku-yt);border-color:var(--bku-ybd)}.bku-hpill.orp .dot{background:var(--y)}
.bku-kebab{width:34px;height:34px;border-radius:8px;border:1px solid var(--bku-bd3);background:var(--w);color:var(--bku-t3);display:grid;place-items:center;cursor:pointer;padding:0;transition:.14s;justify-self:end}
.bku-kebab svg{width:16px;height:16px}
.bku-kebab:hover,.bku-kebab.open{background:var(--bku-hov);color:var(--bku-a);border-color:var(--b2)}
.bku-menu{position:absolute;right:16px;top:56px;width:224px;background:var(--w);border:1px solid var(--b2);border-radius:11px;box-shadow:0 20px 46px rgba(16,24,40,.24);padding:6px;z-index:40;animation:bkuMenuIn .15s ease}
@keyframes bkuMenuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.bku-menu a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:7px;font-size:13px;font-weight:500;color:var(--bku-ink);cursor:pointer}
.bku-menu a svg{width:16px;height:16px;color:var(--bku-t3);flex-shrink:0}
.bku-menu a:hover{background:var(--bku-abg)}
.bku-menu .sep{height:1px;background:var(--bku-bd2);margin:5px 4px}
.bku-menu a.del{color:var(--bku-rt)} .bku-menu a.del svg{color:var(--bku-rt)} .bku-menu a.del:hover{background:var(--bku-rbg)}
.bku-rchip{height:28px;padding:0 12px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--bku-yt);background:var(--bku-ybg);border:1px solid var(--bku-ybd);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.14s;white-space:nowrap;font-family:inherit}
.bku-rchip:hover{filter:brightness(.97)}
.bku-rchip svg{width:11px;height:11px}
.bku-dchip{height:28px;padding:0 12px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--bku-rt);background:var(--bku-rbg);border:1px solid var(--bku-rbd);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;justify-self:start;font-family:inherit}
.bku-dchip:hover{filter:brightness(.98)}
.bku-dchip svg{width:11px;height:11px}
.bku-rchip:focus-visible,.bku-dchip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bku-a)}
/* a site with no backup yet — neutral: it has not failed, nothing has run.
   ".never", not ".nb": .nb is the global red notification badge (layout.css),
   and as a modifier here it painted the divider red and restyled the card. */
.bku-hpill.never{background:var(--bku-inset);color:var(--bku-t3);border-color:var(--bku-bd3)}
.bku-hpill.never .dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--bku-mut)}
.bku-rchip.never{color:var(--bku-a);background:var(--bku-abg);border-color:var(--bku-abd)}
.bku-scard.never .bku-srow{cursor:default}
.bku-scard.never .bku-chev{visibility:hidden}
.bku-orph.never{color:var(--bku-mut)}.bku-orph.never .ln{background:var(--bku-bd)}
/* "+ hourly DB" beside a schedule — purple, the datastore tint */
.bku-hrly{display:inline-block;margin-left:7px;font-size:10px;font-weight:600;color:var(--bku-p);background:var(--bku-pbg);border-radius:5px;padding:1px 6px;vertical-align:1px;white-space:nowrap}
.bku-tog:disabled{opacity:.4;cursor:not-allowed}
.bku-trow.off .tico{opacity:.5}
.bku-pstats{flex-wrap:wrap;row-gap:6px}
/* history */
.bku-hist{border-top:1px solid var(--bku-bd);background:var(--bku-inset);border-radius:0 0 14px 14px;padding:12px 16px 14px;animation:bkuOpen .2s ease}
@keyframes bkuOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.bku-hh{display:grid;grid-template-columns:minmax(130px,.85fr) 80px 1fr 1fr 250px;gap:12px;padding:4px 16px 8px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--bku-mut)}
.bku-hrow{display:grid;grid-template-columns:minmax(130px,.85fr) 80px 1fr 1fr 250px;gap:12px;align-items:center;background:var(--w);border:1px solid var(--bku-bd);border-radius:11px;padding:11px 16px;margin-bottom:7px;transition:box-shadow .16s,border-color .14s;position:relative}
.bku-hrow:hover{border-color:var(--b1);box-shadow:0 3px 10px rgba(16,24,40,.05)}
.bku-hdate{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:12px;color:var(--bku-ink);font-weight:500}
.bku-hdate .ago{display:block;font-family:inherit;font-size:11px;color:var(--bku-mut);font-weight:400;margin-top:2px}
.bku-htag{font-size:10.5px;font-weight:500;padding:2px 8px;border-radius:5px;justify-self:start;white-space:nowrap}
.bku-htag.d{background:var(--bku-at);color:var(--bku-alk)}
.bku-htag.w{background:var(--bku-pbg);color:var(--bku-p)}
.bku-htag.f{background:var(--bku-rbg);color:var(--bku-rt)}
.bku-hsz{font-variant-numeric:tabular-nums;color:var(--bku-t2);font-weight:500;font-size:12.5px}
.bku-hsz i{font-style:normal;color:var(--bku-mut);font-weight:500;font-size:10px;margin-right:6px;text-transform:uppercase;letter-spacing:.04em}
.bku-hact{display:flex;gap:6px;justify-content:flex-end;position:relative}
.bku-hbtn{border:1px solid var(--bku-bd3);background:var(--w);color:var(--bku-t3);height:31px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;cursor:pointer;font-size:12px;font-weight:500;transition:.13s;font-family:inherit}
.bku-hbtn svg{width:14px;height:14px}
.bku-hbtn:hover{border-color:var(--bku-abd);color:var(--bku-a);background:var(--bku-abg)}
.bku-hbtn .car{margin-left:2px;width:11px;height:11px}
.bku-hbtn.ic{width:31px;padding:0;justify-content:center}
.bku-hbtn.del:hover{color:var(--bku-rt);border-color:var(--bku-rbd);background:var(--bku-rbg)}
.bku-hmore{margin-top:3px;height:33px;width:100%;border:1px dashed var(--bku-faint);border-radius:9px;background:transparent;font-size:12px;color:var(--bku-mut);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.14s;font-family:inherit}
.bku-hmore:hover{border-color:var(--bku-abd);color:var(--bku-a);background:var(--w)}
.bku-hmore svg{width:12px;height:12px}
.bku-hpager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;padding:1px 4px 0;flex-wrap:wrap}
.bku-hpinfo{font-size:11.5px;color:var(--bku-mut);font-variant-numeric:tabular-nums}
.bku-hpbtns{display:flex;align-items:center;gap:8px}
.bku-hppage{font-size:11.5px;font-weight:500;color:var(--bku-t3);font-variant-numeric:tabular-nums;min-width:78px;text-align:center}
.bku-hpbtn{border:1px solid var(--bku-bd3);background:var(--w);color:var(--bku-t3);height:30px;border-radius:8px;display:inline-flex;align-items:center;gap:5px;padding:0 11px;cursor:pointer;font-size:12px;font-weight:500;transition:.13s;font-family:inherit}
.bku-hpbtn svg{width:13px;height:13px}
.bku-hpbtn:hover:not(:disabled){border-color:var(--bku-abd);color:var(--bku-a);background:var(--bku-abg)}
.bku-hpbtn:disabled{opacity:.45;cursor:default}
/* download popover */
.bku-dlpop{position:absolute;right:0;top:37px;width:250px;background:var(--w);border:1px solid var(--b2);border-radius:11px;box-shadow:0 20px 46px rgba(16,24,40,.24);padding:6px;z-index:45;animation:bkuMenuIn .15s ease}
.bku-dlpop .gh{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--bku-mut);padding:7px 10px 4px}
.bku-dlpop .gh b{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--bku-t3);font-weight:500;text-transform:none;letter-spacing:0}
.bku-dlpop a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--bku-ink);cursor:pointer}
.bku-dlpop a:hover{background:var(--bku-abg)}
.bku-dlpop .tag{margin-left:auto;font-size:10px;font-weight:600;color:var(--bku-gt)}
.bku-dlpop .tag.n{color:var(--bku-mut);font-weight:500}
.bku-dlpop .sep{height:1px;background:var(--bku-bd2);margin:5px 4px}
/* strips/footer/skeleton */
.bku-orph{display:flex;align-items:center;gap:9px;margin:20px 2px 10px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--bku-yt)}
.bku-orph svg{width:13px;height:13px}
.bku-orph .ln{flex:1;height:1px;background:var(--bku-ybd)}
.bku-lfoot{display:flex;align-items:center;gap:8px;padding:13px 4px 0;font-size:12.5px;color:var(--bku-mut)}
.bku-lfoot b{color:var(--bku-t3);font-weight:500}
.bku-skrow{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(120px,.55fr) minmax(86px,.4fr) minmax(104px,.45fr) minmax(96px,.4fr) 42px;gap:12px;align-items:center;padding:14px 16px}
.bku-sk{border-radius:7px;background:linear-gradient(90deg,var(--bku-bd2) 25%,var(--bku-bd) 45%,var(--bku-bd2) 65%);background-size:400% 100%;animation:bkuShim 1.6s ease-in-out infinite}
@keyframes bkuShim{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.bku-sk{animation:none}}
/* protection */
.bku-pcard{background:var(--w);border:1px solid var(--bku-bd);border-radius:14px;overflow:hidden}
.bku-ptop{display:flex;align-items:center;gap:18px;padding:20px;flex-wrap:wrap;border-bottom:1px solid var(--bku-bd2)}
.bku-bigring{position:relative;width:72px;height:72px;flex-shrink:0}
.bku-bigring svg{width:72px;height:72px;transform:rotate(-90deg)}
.bku-bigring .pc{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--bku-gt);font-variant-numeric:tabular-nums}
.bku-ptop .tt{font-size:15px;font-weight:600;letter-spacing:-.01em}
.bku-ptop .ts{font-size:12px;color:var(--bku-mut);margin-top:3px}
.bku-pstats{display:flex;gap:15px;margin-top:9px}
.bku-pstat{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--bku-t3)}
.bku-pstat .pd{width:8px;height:8px;border-radius:3px}
.bku-pth{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(155px,.85fr) minmax(64px,.3fr) minmax(92px,.42fr) minmax(86px,.38fr) 118px;gap:12px;padding:11px 20px;background:var(--bku-inset);border-bottom:1px solid var(--bku-bd2);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--bku-mut)}
.bku-prow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(155px,.85fr) minmax(64px,.3fr) minmax(92px,.42fr) minmax(86px,.38fr) 118px;gap:12px;align-items:center;padding:13px 20px;border-top:1px solid var(--bku-bd2);transition:background .12s}
.bku-prow:first-of-type{border-top:0}
.bku-prow:hover{background:var(--bku-hov)}
.bku-sched{font-size:12.5px;color:var(--bku-t2);font-weight:500}
.bku-sched .nx{display:block;font-size:11px;color:var(--bku-mut);font-weight:400;margin-top:2px}
.bku-retpill{font-size:11px;font-weight:500;background:var(--bku-bd2);color:var(--bku-t3);border-radius:999px;padding:3px 10px;justify-self:start;white-space:nowrap}
.bku-ebtn{height:32px;padding:0 13px;border-radius:8px;border:1px solid var(--bku-bd3);background:var(--w);color:var(--bku-t3);font-size:12px;font-weight:500;cursor:pointer;transition:.14s;justify-self:end;font-family:inherit;white-space:nowrap}
.bku-ebtn:hover{border-color:var(--bku-abd);color:var(--bku-a);background:var(--bku-abg)}
/* Sprite icons carry no intrinsic size, and this button is a flex line — an
   unsized <svg> stretches to the full width. Every other bku button that takes
   an icon has this rule; this one did not, which is why its back control was
   still a text arrow. */
.bku-ebtn{display:inline-flex;align-items:center;gap:6px}
.bku-ebtn svg{width:14px;height:14px;flex:none}
.bku-ebtn.pri{background:var(--bku-a);border-color:var(--bku-a);color:#fff;font-weight:600}
.bku-ebtn.pri:hover{background:var(--bku-ah);color:#fff}
.bku-ebtn.gr{background:var(--bku-gbg);border-color:var(--bku-gbd);color:var(--bku-gt);font-weight:600}
/* schedule editor */
.bku-sched-ed{border-top:1px solid var(--bku-bd);background:var(--bku-inset);padding:20px;animation:bkuOpen .2s ease}
.bku-sedgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:860px){.bku-sedgrid{grid-template-columns:1fr}}
.bku-trow{display:flex;align-items:center;gap:12px;border:1px solid var(--bku-bd);border-radius:12px;padding:12px 14px;background:var(--w);margin-bottom:9px}
.bku-trow .tico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.bku-trow .tico svg{width:16px;height:16px}
.bku-trow .tt2{font-size:13px;font-weight:500;color:var(--bku-ink)}
.bku-trow .ts2{font-size:11px;color:var(--bku-mut);margin-top:1px}
.bku-tog{width:40px;height:23px;border-radius:999px;position:relative;flex-shrink:0;cursor:pointer;background:var(--bku-faint);transition:background .16s;margin-left:auto;border:0;padding:0}
.bku-tog b{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .16s cubic-bezier(.4,1.2,.6,1);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.bku-tog.on{background:var(--bku-gdot)}.bku-tog.on b{transform:translateX(17px)}
.bku-sel{height:36px;border:1px solid var(--bku-bd3);border-radius:9px;padding:0 11px;font-size:12.5px;background:var(--w);color:var(--bku-ink);font-family:inherit;min-width:112px}
.bku-sel:focus{outline:none;border-color:var(--bku-abd);box-shadow:0 0 0 3px var(--bku-aring)}
.bku-provtile{flex:1;border:1px solid var(--bku-bd3);border-radius:11px;padding:12px 6px 10px;text-align:center;cursor:pointer;background:var(--w);transition:.14s;position:relative}
.bku-provtile:hover{border-color:var(--bku-abd)}
.bku-provtile.on{border-color:var(--bku-a);background:var(--bku-abg)}
.bku-provtile .pl{width:34px;height:34px;margin:0 auto;border-radius:9px}
.bku-provtile .pn{font-size:11px;font-weight:500;margin-top:6px;color:var(--bku-t2)}
.bku-provtile .chk{position:absolute;top:7px;right:7px;width:16px;height:16px;border-radius:50%;background:var(--bku-a);color:#fff;display:grid;place-items:center;opacity:0;transition:.14s}
.bku-provtile.on .chk{opacity:1}
.bku-provtile .chk svg{width:9px;height:9px}
/* A provider the site's server has no account for: shown, not pickable. */
.bku-provtile.off{opacity:.42;cursor:not-allowed;background:var(--bku-inset)}
/* Admin-only controls (Add destination, the Destinations tab) for anyone else. */
#view-backups [data-bku-admin][hidden]{display:none!important}
/* Keyboard focus on this page's clickable rows, tiles and menu items. */
.bku-srow:focus-visible,.bku-provtile:focus-visible,.bku-ptc:focus-visible,.bku-aopt:focus-visible,.bku-menu a:focus-visible,.bku-dlpop a:focus-visible,.bku-kebab:focus-visible,.bku-tog:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.bku-rchip:disabled{opacity:.6;cursor:default}
.bku-sumbar{display:flex;align-items:center;gap:9px;background:var(--bku-gbg);border:1px solid var(--bku-gbd);border-radius:11px;padding:11px 14px;font-size:12px;font-weight:500;color:var(--bku-gt);margin-top:3px}
.bku-sumbar svg{width:14px;height:14px;flex-shrink:0}
.bku-sedfoot{display:flex;justify-content:flex-end;gap:9px;margin-top:13px}
.bku-flab{font-size:12px;font-weight:500;color:var(--bku-t3);margin-bottom:8px;display:block}
/* destinations */
.bku-dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;margin-bottom:14px}
.bku-dtc{position:relative;border:1px solid var(--bku-bd);border-radius:14px;padding:20px 15px 14px;background:var(--w);display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;transition:border-color .14s,box-shadow .2s}
.bku-dtc:hover{box-shadow:0 10px 24px rgba(16,24,40,.08);border-color:var(--b1)}
.bku-dtc.live{border-color:var(--bku-gbd)}
.bku-dtc .lg{width:52px;height:52px;border-radius:13px;margin-bottom:7px}
.bku-dtc .lg svg,.bku-dtc .lg img{width:55%;height:55%}
.bku-dtc .tn{font-size:13.5px;font-weight:600}
.bku-dtc .ts{font-size:11px;color:var(--bku-mut);font-weight:400;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bku-dtc .chk2{position:absolute;top:11px;right:11px;width:19px;height:19px;border-radius:50%;background:var(--bku-gdot);color:#fff;display:grid;place-items:center}
.bku-dtc .chk2 svg{width:10px;height:10px}
.bku-dtc .kvs{width:100%;margin-top:12px;border-top:1px solid var(--bku-bd2);padding-top:8px}
.bku-dtc .kv{display:flex;justify-content:space-between;font-size:11.5px;color:var(--bku-mut);padding:4px 3px;font-weight:400}
.bku-dtc .kv b{color:var(--bku-t2);font-weight:500;font-family:ui-monospace,monospace;font-size:11px;font-variant-numeric:tabular-nums;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bku-dtc .btns{display:flex;gap:7px;width:100%;margin-top:11px}
.bku-dtc .btns .eb{flex:1;height:32px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--bku-bd3);background:var(--w);color:var(--bku-t3);transition:.14s;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit}
.bku-dtc .btns .eb svg{width:13px;height:13px}
.bku-dtc .btns .eb:hover{border-color:var(--bku-abd);color:var(--bku-a);background:var(--bku-abg)}
.bku-dtc .btns .tb{width:32px;height:32px;border-radius:8px;border:1px solid var(--bku-bd3);background:var(--w);color:var(--bku-t3);cursor:pointer;display:grid;place-items:center;transition:.14s;flex-shrink:0}
.bku-dtc .btns .tb svg{width:14px;height:14px}
.bku-dtc .btns .tb:hover{border-color:var(--bku-rbd);color:var(--bku-rt);background:var(--bku-rbg)}
.bku-addtc{border:1.5px dashed var(--bku-faint);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;color:var(--bku-mut);min-height:220px;transition:.14s;background:transparent}
.bku-addtc:hover{border-color:var(--bku-abd);color:var(--bku-a);background:var(--bku-abg)}
.bku-addtc .plus{width:42px;height:42px;border-radius:12px;border:1.5px dashed currentColor;display:grid;place-items:center}
.bku-addtc .plus svg{width:17px;height:17px}
.bku-addtc span{font-size:12.5px;font-weight:600}
/* assignments */
.bku-acard{background:var(--w);border:1px solid var(--bku-bd);border-radius:14px}
.bku-acard .hd{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--bku-bd2);flex-wrap:wrap}
.bku-acard .hd .hico2{width:36px;height:36px;border-radius:9px;background:var(--bku-pbg);color:var(--bku-p);display:grid;place-items:center;flex-shrink:0}
.bku-acard .hd .hico2 svg{width:17px;height:17px}
.bku-acard .hd h3{font-size:14px;font-weight:600;margin:0}
.bku-acard .hd .hint{font-size:12px;color:var(--bku-mut)}
.bku-abody{padding:18px 20px;display:grid;grid-template-columns:240px 1fr;gap:22px}
@media(max-width:760px){.bku-abody{grid-template-columns:1fr}}
/* Password reveal (eye) toggle */
.bku-pwrap{position:relative}
.bku-pwrap .bku-mi{padding-right:40px}
.bku-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;background:transparent;color:var(--bku-mut);display:grid;place-items:center;cursor:pointer;border-radius:7px;transition:.13s;padding:0}
.bku-eye:hover{color:var(--bku-t3);background:var(--bku-bd2)}
.bku-eye svg{width:16px;height:16px}
/* Collapsible destinations box */
.bku-collapse{border:none;background:transparent;color:var(--bku-mut);width:30px;height:30px;display:grid;place-items:center;cursor:pointer;border-radius:8px;transition:.14s;flex-shrink:0}
.bku-collapse:hover{background:var(--bku-bd2);color:var(--bku-t3)}
.bku-collapse svg{width:16px;height:16px;transition:transform .22s ease}
.bku-acard.collapsed .bku-collapse svg{transform:rotate(-90deg)}
.bku-destbody{padding:18px 20px;max-height:3200px;overflow:hidden;transition:max-height .28s ease,opacity .2s ease,padding .28s ease}
.bku-acard.collapsed .bku-destbody{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
/* Custom server dropdown (Server assignments) */
.bku-srvdd{position:relative;width:100%}
.bku-srvdd-btn{width:100%;height:42px;border:1px solid var(--bku-bd3);border-radius:10px;background:var(--w);padding:0 12px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:inherit;transition:border-color .14s,box-shadow .14s}
.bku-srvdd-btn:hover{border-color:var(--bku-faint)}
.bku-srvdd.open .bku-srvdd-btn{border-color:var(--bku-abd);box-shadow:0 0 0 3px var(--bku-aring)}
.bku-srvdd-btn>svg{width:16px;height:16px;color:var(--bku-mut);transition:transform .2s ease;flex-shrink:0}
.bku-srvdd.open .bku-srvdd-btn>svg{transform:rotate(180deg)}
.bku-srvdd-cur{display:flex;align-items:center;gap:9px;flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--bku-ink)}
.bku-srvdd-cur .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bku-srvdd-cur .ic,.bku-srvdd-row .ic{width:26px;height:26px;border-radius:7px;background:transparent;color:var(--bku-t3);display:grid;place-items:center;flex-shrink:0}
.bku-srvdd-cur .ic svg,.bku-srvdd-row .ic svg{width:16px;height:16px}
.bku-srvdd-cur .ic img,.bku-srvdd-row .ic img{width:20px;height:20px;object-fit:contain}
/* Lift the Server-assignments card above later cards while its dropdown is open
   (each .bku-an card is its own stacking context via transform, so the menu
   would otherwise be painted under the following cards). */
.bku-acard:has(.bku-srvdd.open){position:relative;z-index:50}
/* Sticky floating save bar for Server assignments (visible while scrolling a long list) */
.bku-savebar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:250;background:var(--bku-ink);color:#fff;border-radius:13px;padding:9px 10px 9px 18px;display:flex;align-items:center;gap:18px;box-shadow:0 14px 40px rgba(16,24,40,.32);animation:bkuSaveBarUp .22s cubic-bezier(.25,.6,.3,1)}
@keyframes bkuSaveBarUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.bku-savebar .cnt{font-size:12.5px;font-weight:500;white-space:nowrap}
.bku-savebar .acts{display:flex;gap:8px}
.bku-sb-ghost{border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;height:34px;padding:0 14px;border-radius:9px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:.13s}
.bku-sb-ghost:hover{background:rgba(255,255,255,.12)}
.bku-savebar .bku-pbtn{height:34px;box-shadow:none}
@media(prefers-reduced-motion:reduce){.bku-savebar{animation:none}}
.bku-srvdd-cur .dot,.bku-srvdd-row .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.bku-srvdd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--w);border:1px solid var(--bku-bd3);border-radius:11px;box-shadow:0 12px 32px rgba(16,24,40,.14);padding:6px;z-index:60;max-height:288px;overflow:auto;opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.bku-srvdd.open .bku-srvdd-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.bku-srvdd-row{width:100%;display:flex;align-items:center;gap:9px;padding:8px 9px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--bku-ink);text-align:left;transition:background .12s}
.bku-srvdd-row:hover{background:var(--bku-hov)}
.bku-srvdd-row.on{background:var(--bku-abg)}
.bku-srvdd-row .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bku-srvdd-row.on .nm{color:var(--bku-a);font-weight:600}
.bku-srvdd-row .ck{color:var(--bku-a);display:grid;place-items:center;flex-shrink:0}
.bku-srvdd-row .ck svg{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.bku-srvdd-menu,.bku-collapse svg,.bku-destbody,.bku-srvdd-btn>svg{transition:none}}
.bku-aopt{display:flex;align-items:center;gap:12px;border:1px solid var(--bku-bd3);border-radius:11px;padding:11px 14px;margin-bottom:8px;cursor:pointer;transition:.14s;background:var(--w)}
.bku-aopt:hover{border-color:var(--bku-abd)}
.bku-aopt.on{border-color:var(--bku-a);background:var(--bku-abg)}
.bku-aopt b{font-size:13px;font-weight:500;color:var(--bku-ink)}
.bku-aopt .sub{font-size:11px;color:var(--bku-mut);font-family:ui-monospace,monospace;margin-top:1px}
.bku-ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--bku-faint);margin-left:auto;display:grid;place-items:center;color:#fff;flex-shrink:0;transition:.14s}
.bku-ck.on{background:var(--bku-a);border-color:var(--bku-a)}
.bku-ck svg{width:10px;height:10px}
.bku-dirty{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--bku-yt);margin-top:10px;font-weight:500}
.bku-dirty .d{width:7px;height:7px;border-radius:50%;background:var(--y);animation:bkuPulse 1.4s infinite}
/* folder info */
.bku-inforow{display:flex;align-items:center;gap:12px;border:1px solid var(--bku-bd);border-radius:12px;padding:13px 15px;background:var(--w);margin-top:12px;flex-wrap:wrap}
.bku-inforow .iico{width:34px;height:34px;border-radius:9px;background:var(--bku-bd2);display:grid;place-items:center;flex-shrink:0;color:var(--bku-t3)}
.bku-inforow .iico svg{width:15px;height:15px}
.bku-inforow .it{font-size:12.5px;font-weight:500;color:var(--bku-ink)}
.bku-inforow .is{font-size:11px;color:var(--bku-mut);margin-top:1px}
.bku-inforow .mono{margin-left:auto;font-family:ui-monospace,monospace;font-size:11.5px;color:var(--bku-t2)}
.bku-copyb{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--bku-t3);background:var(--bku-inset);border:1px solid var(--bku-bd3);border-radius:8px;height:32px;padding:0 11px;cursor:pointer;flex-shrink:0;transition:.14s;font-family:inherit}
.bku-copyb:hover{border-color:var(--bku-abd);color:var(--bku-a)}
.bku-copyb svg{width:13px;height:13px}
/* modals (fixed overlays — tokens inlined since they escape #view-backups scope) */
.bku-ov{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.5);display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:46px 16px;animation:bkuOvIn .16s ease}
/* The confirm dialog must sit above ANY modal that triggered it (e.g. the Trash popup at 1300) */
#bku-ov-confirm{z-index:1600}
.bku-ov.open{display:flex}
@keyframes bkuOvIn{from{opacity:0}to{opacity:1}}
.bku-mcard{background:var(--w);border:1px solid var(--b1);border-radius:16px;padding:22px;width:100%;max-width:600px;box-shadow:0 24px 64px rgba(0,0,0,.26);animation:bkuMcIn .22s cubic-bezier(.25,.6,.3,1);color:var(--t1);font-size:13px}
.bku-mcard svg{display:block}
@keyframes bkuMcIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.bku-mhd{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.bku-mhd .mi{width:40px;height:40px;border-radius:11px;background:linear-gradient(150deg,var(--a),var(--ah));display:grid;place-items:center;flex-shrink:0}
.bku-mhd .mi svg{width:19px;height:19px;color:#fff}
.bku-mhd .mt2{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--t1)}
.bku-mhd .ms{font-size:12px;color:var(--t4);margin-top:1px}
.bku-mhd .mx{margin-left:auto;border:0;background:none;color:var(--t4);cursor:pointer;padding:6px;border-radius:7px;display:grid;place-items:center;flex-shrink:0}
.bku-mhd .mx svg{width:16px;height:16px}
.bku-mhd .mx:hover{color:var(--t2);background:var(--bg2)}
/* bku-native confirmation dialog */
.bku-ov-center{align-items:center}
#bku-ov-confirm{z-index:1400}
.bku-mcard.bku-confirm{max-width:432px}
.bku-mhd .mi.danger{background:linear-gradient(150deg,var(--r),var(--r));box-shadow:0 4px 14px rgba(225,29,72,.26)}
.bku-confirm-body{margin-top:-2px}
.bku-confirm-text{font-size:13.5px;color:var(--t3);line-height:1.6;margin:0}
.bku-confirm-detail{margin-top:12px;background:var(--bg2);border:1px solid var(--b1);border-radius:11px;padding:11px 13px}
.bku-ov .bku-pbtn.danger{background:var(--r);box-shadow:0 1px 2px rgba(225,29,72,.3)}
.bku-ov .bku-pbtn.danger:hover{background:var(--r)}
/* the confirm dialog lives at body level (works on every page), so give it the
   handful of --bku tokens its buttons need instead of relying on #view-backups scope */
.bku-confirm{--bku-a:var(--a);--bku-ah:var(--ah);--bku-bd3:var(--b2);--bku-t3:var(--t3);--bku-hov:var(--bg2);--bku-faint:var(--b2)}
.bku-confirm.wide{max-width:560px}
.bku-mhd .mi.info{background:linear-gradient(150deg,var(--t3),var(--t3));box-shadow:0 4px 14px rgba(71,85,105,.24)}
.bku-log{max-height:400px;overflow:auto;background:var(--t1);color:var(--b1);padding:12px 14px;border-radius:11px;font-family:ui-monospace,'JetBrains Mono',monospace;font-size:11.5px;white-space:pre-wrap;word-break:break-word;line-height:1.55}
.bku-ptcg{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:18px}
@media(max-width:560px){.bku-ptcg{grid-template-columns:repeat(3,1fr)}}
.bku-ptc{position:relative;border:1px solid var(--b2);border-radius:12px;padding:13px 6px 10px;cursor:pointer;background:var(--w);display:flex;flex-direction:column;align-items:center;gap:7px;transition:border-color .14s,background .14s}
.bku-ptc:hover{border-color:var(--ab)}
.bku-ptc.on{border:2px solid var(--a);background:var(--ab);padding:12px 5px 9px}
.bku-ptc .lg2{width:38px;height:38px;border-radius:10px}
.bku-ptc .lg2 svg,.bku-ptc .lg2 img{width:58%;height:58%}
.bku-ptc .n2{font-size:11px;font-weight:500;text-align:center;line-height:1.25;color:var(--t2)}
.bku-ptc.on .n2{font-weight:600;color:var(--a)}
.bku-ptc .chk3{position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:50%;background:var(--a);color:#fff;display:grid;place-items:center;opacity:0;transition:.14s}
.bku-ptc.on .chk3{opacity:1}
.bku-ptc .chk3 svg{width:8px;height:8px}
.bku-mrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.bku-mrow{grid-template-columns:1fr}}
.bku-mfl{font-size:12px;font-weight:500;color:var(--t3);margin-bottom:6px;display:block}
.bku-mi{height:42px;width:100%;border:1px solid var(--b2);border-radius:10px;padding:0 13px;font-size:13px;background:var(--w);color:var(--t1);font-family:inherit;transition:border-color .14s,box-shadow .14s;box-sizing:border-box}
.bku-mi:focus{outline:none;border-color:var(--ab);box-shadow:0 0 0 3px var(--ab)}
.bku-mhint{font-size:10.5px;color:var(--t4);margin-top:5px;line-height:1.5}
/* Compact variant for the inline resource editors, which pack 6 controls into
   a modal already capped at 56vh. Same border, background and focus ring as the
   full-size field — those editors previously used hand-rolled inline styles and
   so had no focus ring at all. Height matches .bku-sel so rows align. */
.bku-mi.sm{height:36px;font-size:12.5px;padding:0 10px}
.bku-mft{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid var(--bg2)}
.bku-ctx{border:1px solid var(--b1);border-radius:12px;padding:13px 15px;background:var(--bg2);margin-bottom:15px}
.bku-ctx .cl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t4);margin-bottom:8px}
.bku-ctx .ckv{display:flex;justify-content:space-between;font-size:12.5px;padding:3.5px 0;gap:12px}
.bku-ctx .ckv span{color:var(--t4)}
.bku-ctx .ckv b{font-weight:500;color:var(--t1);font-variant-numeric:tabular-nums;text-align:right}
.bku-warn{display:flex;gap:10px;align-items:flex-start;background:var(--yb);border:1px solid var(--ybd);border-radius:11px;padding:11px 13px;font-size:12px;color:var(--y);line-height:1.55;margin-top:13px}
.bku-warn svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.bku-safr{display:flex;align-items:center;gap:12px;border:1px solid var(--gbd);background:var(--gb);border-radius:11px;padding:11px 13px;margin-top:11px}
.bku-safr .tt3{font-size:12.5px;font-weight:600;color:var(--g)}
.bku-safr .ts3{font-size:11px;color:var(--g);opacity:.8;margin-top:1px}
.bku-ov .bku-tog{width:40px;height:23px;border-radius:999px;position:relative;flex-shrink:0;cursor:pointer;background:var(--b2);transition:background .16s;margin-left:auto;border:0;padding:0}
.bku-ov .bku-tog.on{background:var(--g)}
.bku-ov .bku-gbtn{height:38px;padding:0 15px;border-radius:10px;background:var(--w);border:1px solid var(--b2);font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit}
.bku-ov .bku-gbtn:hover{background:var(--bg2);border-color:var(--b2)}
.bku-ov .bku-srch{height:36px}
.bku-ov .bku-pbtn{height:38px;padding:0 17px;border-radius:10px;background:var(--a);border:none;color:#fff;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit}
.bku-ov .bku-pbtn.arming{background:var(--y)}
.bku-ov .bku-pbtn.arming:hover{background:var(--y)}
.bku-ov .bku-pbtn:hover{background:var(--ah)}
.bku-ov .bku-pbtn svg,.bku-ov .bku-gbtn svg{width:14px;height:14px}
.bku-ov .bku-bt{border-radius:8px;background:var(--w);border:1px solid var(--b1);display:grid;place-items:center;position:relative;flex-shrink:0}
.bku-ov .bku-bt svg,.bku-ov .bku-bt img{width:60%;height:60%;object-fit:contain}
#global-restore-jobs .card{border-radius:14px;border:1px solid var(--b1)}
@media(max-width:860px){
  /* The status cell stays: it is the only place a failed upload or "No
     backups yet" shows, and its Retry / Back up now chip is the row's action.
     Hiding it by nth-child never worked for those rows anyway — their cell
     carries an inline display:flex, so it landed in the kebab's 42px track
     and pushed the page 44px wider than a tablet. */
  .bku-srow,.bku-skrow{grid-template-columns:minmax(0,1fr) minmax(100px,.5fr) 156px 42px}
  .bku-srow>*:nth-child(3),.bku-srow>*:nth-child(4),.bku-skrow>*:nth-child(3),.bku-skrow>*:nth-child(4){display:none}
  /* the platform button sits at the right of the toolbar; a menu hung off its
     left edge ran past the screen, closed or not (opacity 0 still scrolls) */
  .bku-pfdd-menu{left:auto;right:0;transform-origin:top right}
  .bku-pth,.bku-prow{grid-template-columns:minmax(0,1fr) minmax(120px,.7fr) 118px}
  .bku-pth>*:nth-child(3),.bku-pth>*:nth-child(4),.bku-pth>*:nth-child(5),.bku-prow>*:nth-child(3),.bku-prow>*:nth-child(4),.bku-prow>*:nth-child(5){display:none}
  .bku-hh,.bku-hrow{grid-template-columns:minmax(120px,1fr) auto}
  .bku-hh>*:nth-child(2),.bku-hh>*:nth-child(3),.bku-hh>*:nth-child(4),.bku-hrow>*:nth-child(2),.bku-hrow>*:nth-child(3),.bku-hrow>*:nth-child(4){display:none}
}

/* ══════════════ .sdv — site-detail artifact-ported tab styles ══════════════
   Ported 1:1 from the approved mockup (site-detail-redesign.html, artifact
   25273c1e). Every tab body rendered by site-detail.js is wrapped in .sdv so
   these rules never leak into other pages. Colors come from base.css tokens. */
/* reset: the global app-sidebar class is also `.sb` (layout.css, position:fixed)
   — inside .sdv, .sb is the artifact's subtitle text and must stay in flow */
.sdv .sb{position:static;width:auto;min-width:0;min-height:0;height:auto;background:transparent;border:0;box-shadow:none;display:block;overflow:visible;z-index:auto;top:auto;left:auto;bottom:auto}
.sdv .card{background:var(--w);border:1px solid var(--b1);border-radius:14px;overflow:hidden;margin-bottom:14px;padding:0}
/* ── The card header, available panel-wide ────────────────────────────────
   `.card-h` (icon tile + title + subtitle + right slot) was defined only under
   `.sdv`, so every page outside site-detail was stuck on the older `.ch`/`.ct`
   header: no icon tile, heavier type, wider padding. That is the visible
   "this page looks older" difference, and it was a scoping accident rather
   than a decision.

   Defined unscoped here so any page can use the current header. The `.sdv`
   copies below are left in place and still win on specificity, so nothing
   inside site-detail can shift. */
.card-h{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-wrap:wrap}
/* The title block takes the room beside the icon and wraps its own text; .rt
   goes to the next line when it does not fit. Sized by its content, a long
   subtitle dropped the whole title under the icon on a phone. */
.card-h>div:not(.rt){flex:1 1 160px;min-width:0}
.card-h .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--ab);color:var(--a)}
.card-h .ic svg{width:16px;height:16px}
.card-h .ic.g{background:var(--gb);color:var(--g)}
.card-h .ic.y{background:var(--yb);color:var(--y)}
.card-h .ic.r{background:var(--rb);color:var(--r)}
.card-h .ic.p{background:var(--pb);color:var(--p)}
.card-h .tt{font-size:13.5px;font-weight:600;color:var(--t1)}
/* The same reset `.sdv .sb` carries (see the note above it), repeated here
   because `.card-h` is now used OUTSIDE `.sdv` where that scoped reset does
   not reach. `.sb` is ALSO the app sidebar in layout.css — position:fixed,
   left:0, full height, z-index 200, white background. A card subtitle
   inheriting that becomes a white panel pinned over the real sidebar, which
   is exactly what happened on the server pages: the nav went blank and the
   subtitle text floated at the top-left corner.
   `.card-h .sb` (2 classes) outranks `.sb` (1), so this holds. */
.card-h .sb{position:static;width:auto;min-width:0;min-height:0;height:auto;background:transparent;border:0;box-shadow:none;display:block;overflow:visible;z-index:auto;top:auto;left:auto;bottom:auto;font-size:11.5px;color:var(--t3);margin-top:1px}
.card-h .rt{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sdv .card-h{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-wrap:wrap}
.sdv .card-h .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--ab);color:var(--a)}
.sdv .card-h .ic svg{width:16px;height:16px}
.sdv .card-h .ic.g{background:var(--gb);color:var(--g)}
.sdv .card-h .ic.y{background:var(--yb);color:var(--y)}
.sdv .card-h .ic.r{background:var(--rb);color:var(--r)}
.sdv .card-h .ic.p{background:var(--pb);color:var(--p)}
.sdv .card-h .tt{font-size:13.5px;font-weight:600;color:var(--t1)}
.sdv .card-h .sb{font-size:11.5px;color:var(--t3);margin-top:1px}
.sdv .card-h .rt{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sdv .card-b{padding:16px 18px}
.sdv .card-f{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--b1);background:var(--bg2)}
.sdv .card-f .hint{font-size:11.5px;color:var(--t3);margin-right:auto}
/* buttons (artifact set) */
.sdv .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 15px;border-radius:10px;border:1px solid transparent;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,color .15s,transform .1s}
.sdv .btn svg{width:14px;height:14px}
.sdv .btn:active{transform:translateY(.5px)}
.sdv .btn-p{background:var(--a);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.1)}
.sdv .btn-p:hover{background:var(--ah);box-shadow:0 2px 8px rgba(22,84,210,.25)}
.sdv .btn-s{background:var(--w);color:var(--t2);border-color:var(--b1)}
.sdv .btn-s:hover{border-color:var(--b2);color:var(--t1);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.sdv .btn-o{background:var(--w);color:var(--a);border-color:var(--ab)}
.sdv .btn-o:hover{background:var(--ab);border-color:var(--a)}
.sdv .btn-d{background:var(--r);color:#fff}
.sdv .btn-d:hover{filter:brightness(.92)}
.sdv .btn-dg{background:var(--w);color:var(--r);border-color:var(--rbd)}
.sdv .btn-dg:hover{background:var(--rb)}
.sdv .btn-xs{height:30px;padding:0 11px;font-size:12px;border-radius:8px}
.sdv .btn-xs svg{width:13px;height:13px}
.sdv .btn-ic{width:36px;padding:0}
/* pill */
.sdv .pill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;padding:3px 11px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.sdv .pill .d{width:6px;height:6px;border-radius:50%}
.sdv .pill.g{background:var(--gb);color:var(--g);border-color:var(--gbd)}.sdv .pill.g .d{background:var(--g);animation:sdvPl 1.8s ease-in-out infinite}
.sdv .pill.y{background:var(--yb);color:var(--y);border-color:var(--ybd)}.sdv .pill.y .d{background:var(--y)}
.sdv .pill.r{background:var(--rb);color:var(--r);border-color:var(--rbd)}.sdv .pill.r .d{background:var(--r)}
.sdv .pill.b{background:var(--ab);color:var(--a)}.sdv .pill.b .d{background:var(--a)}
.sdv .pill.p{background:var(--pb);color:var(--p)}.sdv .pill.p .d{background:var(--p)}
.sdv .pill.n{background:var(--bg2);color:var(--t3);border-color:var(--b1)}.sdv .pill.n .d{background:var(--t4)}
@keyframes sdvPl{0%,100%{opacity:1}50%{opacity:.35}}
/* form */
.sdv .fl{display:block;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:7px}
.sdv .fi{height:38px;width:100%;border:1px solid var(--b1);border-radius:10px;padding:0 12px;font-size:13px;background:var(--w);color:var(--t1);transition:border-color .15s,box-shadow .15s;outline:none}
.sdv .fi:focus{border-color:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 12%,transparent)}
.sdv .fi::placeholder{color:var(--t4)}
.sdv select.fi{cursor:pointer}
.sdv textarea.fi{height:auto;padding:10px 12px;resize:vertical;min-height:80px}
.sdv .fr{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:13px}
.sdv .fg{margin-bottom:13px;min-width:0}
.sdv .fr .fg{margin-bottom:0}
.sdv .fhint{font-size:11px;color:var(--t3);margin-top:5px}
/* toggle */
.sdv .tog,#view-serveroverview .tog{position:relative;flex-shrink:0;width:38px;height:22px;cursor:pointer}
.sdv .tog input,#view-serveroverview .tog input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2;width:100%;height:100%}
.sdv .tog .tk,#view-serveroverview .tog .tk{position:absolute;inset:0;background:var(--b2);border-radius:20px;transition:background .18s}
.sdv .tog .tk::after,#view-serveroverview .tog .tk::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.sdv .tog input:checked+.tk,#view-serveroverview .tog input:checked+.tk{background:var(--g)}
.sdv .tog input:checked+.tk::after,#view-serveroverview .tog input:checked+.tk::after{transform:translateX(16px)}
.sdv .tog.acc input:checked+.tk{background:var(--a)}
/* The real checkbox is opacity:0, so a focus ring on it is invisible — there was
   no focus rule at all, and tabbing through any .sdv toggle showed nothing. The
   ring goes on the track, which is the thing actually drawn. :focus-visible so a
   mouse click does not leave a ring behind. */
.sdv .tog input:focus-visible+.tk,#view-serveroverview .tog input:focus-visible+.tk{outline:2px solid var(--a);outline-offset:2px}
.sdv .trow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--b1)}
.sdv .trow:last-child{border-bottom:0}
.sdv .trow .tx{flex:1;min-width:0}
.sdv .trow .tt{font-size:13px;font-weight:500;color:var(--t1)}
.sdv .trow .sb{font-size:11.5px;color:var(--t3);margin-top:1px;line-height:1.45}
/* callout */
.sdv .note{display:flex;gap:10px;align-items:flex-start;border-radius:11px;padding:11px 13px;font-size:12px;line-height:1.5;margin-bottom:13px;border:1px solid}
.sdv .note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.sdv .note.b{background:var(--ab);border-color:var(--ab);color:var(--a)}
.sdv .note.y{background:var(--yb);border-color:var(--ybd);color:var(--y)}
.sdv .note.r{background:var(--rb);border-color:var(--rbd);color:var(--r)}
.sdv .note.g{background:var(--gb);border-color:var(--gbd);color:var(--g)}
/* Artifact P1 modal for the domain popups (box carries .sdv so scoped controls apply) */
.sdv-mov{position:fixed;inset:0;background:rgba(16,24,40,.5);display:none;align-items:center;justify-content:center;z-index:1300;padding:20px}
.sdv-mov.open{display:flex;animation:sdMf .15s ease}
@keyframes sdMf{from{opacity:0}to{opacity:1}}
.sdv-mbox{background:var(--w);border:1px solid var(--b1);border-radius:16px;width:100%;max-width:480px;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.18));animation:sdMr .22s cubic-bezier(.22,1,.36,1)}
@keyframes sdMr{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.sdv-mbox .m-h{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--b1)}
.sdv-mbox .m-h .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ab);color:var(--a);flex-shrink:0}
.sdv-mbox .m-h .ic svg{width:17px;height:17px}
.sdv-mbox .m-h .ic.g{background:var(--gb);color:var(--g)}.sdv-mbox .m-h .ic.r{background:var(--rb);color:var(--r)}.sdv-mbox .m-h .ic.y{background:var(--yb);color:var(--y)}.sdv-mbox .m-h .ic.p{background:var(--pb);color:var(--p)}
.sdv-mbox .m-h .tt{font-size:14px;font-weight:700;color:var(--t1)}
.sdv-mbox .m-h .sb{font-size:11.5px;color:var(--t3);margin-top:1px}
.sdv-mbox .m-x{margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--b1);background:var(--w);color:var(--t3);display:grid;place-items:center;cursor:pointer;transition:.14s;flex-shrink:0}
.sdv-mbox .m-x:hover{background:var(--bg2);color:var(--t1)}
.sdv-mbox .m-x svg{width:14px;height:14px}
.sdv-mbox .m-b{padding:17px 18px;overflow-y:auto}
.sdv-mbox .m-b .fg:last-child{margin-bottom:0}
.sdv-mbox .m-f{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:13px 18px;border-top:1px solid var(--b1);background:var(--bg2);border-radius:0 0 16px 16px}
/* data table */
.sdv .th{display:grid;gap:10px;padding:9px 16px;background:var(--bg2);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t4)}
/* DNS status column — center the pill under a centered "DNS" header (P10 parity) */
.sdv .sd-dns{display:flex;justify-content:center;align-items:center;min-width:0}
.sdv .tr{display:grid;gap:10px;padding:12px 16px;align-items:center;border-top:1px solid var(--b1);transition:background .13s;font-size:12.5px}
.sdv .tr:hover{background:var(--bg2)}
.sdv .tc-main{min-width:0}
.sdv .tc-main .nm{font-size:14.5px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.sdv .tc-main .sb{font-size:11px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdv .mono{font-family:var(--mono);font-size:11.5px}
.sdv .rowact{display:flex;gap:6px;justify-content:flex-end}
.sdv .iba{width:30px;height:30px;border-radius:8px;border:1px solid var(--b1);background:var(--w);color:var(--t3);display:grid;place-items:center;cursor:pointer;transition:.14s}
.sdv .iba svg{width:14px;height:14px}
.sdv .iba:hover{border-color:var(--b2);color:var(--a);background:var(--ab)}
.sdv .iba.danger:hover{border-color:var(--rbd);color:var(--r);background:var(--rb)}
.sdv .iba.spin svg{animation:sdSpin .8s linear infinite}
@keyframes sdSpin{to{transform:rotate(360deg)}}
/* KPI cards */
.sdv .kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.sdv .kpi{background:var(--w);border:1px solid var(--b1);border-radius:13px;padding:14px 15px;position:relative;overflow:hidden;transition:box-shadow .2s,transform .18s}
.sdv .kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.sdv .kpi .hd{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.2px}
.sdv .kpi .hd .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--ab);color:var(--a)}
.sdv .kpi .hd .ic svg{width:13px;height:13px}
.sdv .kpi .hd .ic.g{background:var(--gb);color:var(--g)}
.sdv .kpi .hd .ic.y{background:var(--yb);color:var(--y)}
.sdv .kpi .hd .ic.p{background:var(--pb);color:var(--p)}
.sdv .kpi .hd .ic.r{background:var(--rb);color:var(--r)}
.sdv .kpi .val{font-size:21px;font-weight:700;letter-spacing:-.5px;margin-top:8px;font-variant-numeric:tabular-nums;color:var(--t1)}
.sdv .kpi .val .u{font-size:11px;font-weight:600;color:var(--t3);margin-left:3px}
.sdv .kpi .sub{font-size:11px;color:var(--t3);margin-top:2px}
.sdv .kpi .spark{position:absolute;right:10px;bottom:10px;opacity:.9}
/* health hero */
.sdv .hero{border-radius:14px;border:1px solid var(--gbd);background:linear-gradient(135deg,var(--gb),var(--w) 60%);padding:16px 18px;display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.sdv .hero.warn{border-color:var(--ybd);background:linear-gradient(135deg,var(--yb),var(--w) 60%)}
.sdv .hero.bad{border-color:var(--rbd);background:linear-gradient(135deg,var(--rb),var(--w) 60%)}
.sdv .hero .ring{width:52px;height:52px;flex-shrink:0}
.sdv .hero .htt{font-size:14.5px;font-weight:700;color:var(--t1)}
.sdv .hero .hsb{font-size:12px;color:var(--t3);margin-top:2px}
.sdv .hero .hact{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* scan progress bar (Integrity / scans) */
.sdv .scanbar{margin:2px 0 4px}
.sdv .scanbar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.sdv .scanbar-lbl{font-size:12.5px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:8px}
.sdv .scanbar-lbl .sp{width:13px;height:13px;border:2px solid var(--b2);border-right-color:var(--a);border-radius:50%;animation:sdSpin .7s linear infinite;flex-shrink:0}
.sdv .scanbar-pct{font-size:12px;font-weight:700;color:var(--a);font-variant-numeric:tabular-nums}
.sdv .scanbar-track{height:8px;background:var(--bg2);border:1px solid var(--b1);border-radius:99px;overflow:hidden}
.sdv .scanbar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--a) 78%,transparent),var(--a));transition:width .45s cubic-bezier(.3,.7,.3,1);box-shadow:0 0 8px color-mix(in srgb,var(--a) 45%,transparent)}
.sdv .scanbar-sub{font-size:11px;color:var(--t3);margin-top:7px}
/* ── SSL tab (site detail) ───────────────────────────────────────────────────
   Tokenised and dark-aware. .picks/.pick is P18 in DESIGN.md §12: the pick-one
   control INSIDE a detail tab — P3's selection card laid out horizontally
   (icon tile + title + subtitle + selected ring + check badge), for a choice
   that is a setting of the thing on screen rather than a step in a wizard. */
.sdv .picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.sdv .pick{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;margin:0;text-align:left;padding:13px 40px 13px 14px;border:1px solid var(--b1);border-radius:12px;background:var(--w);color:inherit;font:inherit;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.sdv .pick:hover{border-color:var(--b2);box-shadow:0 4px 14px color-mix(in srgb,var(--a) 10%,transparent)}
.sdv .pick:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.sdv .pick.on{border-color:var(--a);background:var(--ab);box-shadow:inset 0 0 0 1px var(--a)}
.sdv .pick .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--bg2);color:var(--t2)}
.sdv .pick .ic svg{width:16px;height:16px}
.sdv .pick .ic img{width:18px;height:18px}
.sdv .pick.on .ic{background:var(--w);color:var(--a)}
.sdv .pick .tx{flex:1;min-width:0}
.sdv .pick .t{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:13px;font-weight:600;color:var(--t1)}
.sdv .pick .s{font-size:11.5px;line-height:1.45;color:var(--t3);margin-top:3px}
.sdv .pick .ck{position:absolute;top:11px;right:11px;width:18px;height:18px;border-radius:50%;background:var(--a);color:#fff;display:none;place-items:center}
.sdv .pick .ck svg{width:11px;height:11px}
.sdv .pick.on .ck{display:grid}
.sdv .pick .mini{font-size:10px;font-weight:600;letter-spacing:.2px;padding:1px 7px;border-radius:99px;background:var(--pb);color:var(--p)}
.sdv .pick[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}
/* certificate summary: four facts in one bordered strip */
.sdv .cert-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--b1);border:1px solid var(--b1);border-radius:12px;overflow:hidden;margin-bottom:16px}
.sdv .cert-kv>div{background:var(--w);padding:11px 13px;min-width:0}
.sdv .cert-kv .k{font-size:10.5px;font-weight:600;letter-spacing:.35px;text-transform:uppercase;color:var(--t4)}
.sdv .cert-kv .v{font-size:13px;font-weight:600;color:var(--t1);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdv .cert-kv .h{font-size:11px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdv .sec-l{font-size:10.5px;font-weight:600;letter-spacing:.35px;text-transform:uppercase;color:var(--t4);margin:0 0 8px}
/* the names a certificate covers */
.sdv .cert-names{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.sdv .cert-nm{display:inline-flex;align-items:center;gap:6px;min-height:28px;max-width:100%;padding:0 10px;border:1px solid var(--b1);border-radius:8px;background:var(--w);font-size:12px;color:var(--t1)}
.sdv .cert-nm svg{width:12px;height:12px;flex-shrink:0;color:var(--g)}
.sdv .cert-nm .nm{font-family:var(--mono);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sdv .cert-nm .ty{font-size:10px;color:var(--t4);white-space:nowrap}
.sdv .cert-nm.wild{border-color:color-mix(in srgb,var(--p) 32%,transparent);background:var(--pb)}
.sdv .cert-nm.wild svg{color:var(--p)}
.sdv .cert-nm.off svg{color:var(--t4)}
/* served, but not on the certificate the live check read */
.sdv .cert-nm.miss{border-color:color-mix(in srgb,var(--y) 45%,transparent);background:color-mix(in srgb,var(--y) 9%,var(--w))}
.sdv .cert-nm.miss svg,.sdv .cert-nm.miss .ty{color:var(--y)}
/* what a Cloudflare account can validate, before anything is issued */
.sdv .cert-cov{border:1px solid var(--b1);border-radius:11px;overflow:hidden;margin-top:12px}
.sdv .cert-cov-r{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--b1);font-size:12.5px;min-width:0}
.sdv .cert-cov-r:first-child{border-top:0}
.sdv .cert-cov-r svg{width:14px;height:14px;flex-shrink:0}
.sdv .cert-cov-r .nm{font-family:var(--mono);font-size:12px;color:var(--t1);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdv .cert-cov-r .why{margin-left:auto;padding-left:10px;font-size:11.5px;color:var(--t3);white-space:nowrap}
.sdv .cert-cov-r.ok svg{color:var(--g)}
.sdv .cert-cov-r.no svg{color:var(--r)}
.sdv .cert-cov-r.no .nm{color:var(--t2)}
.sdv .spin-i{display:inline-block;width:13px;height:13px;border:2px solid var(--b2);border-right-color:var(--a);border-radius:50%;animation:sdSpin .7s linear infinite;flex-shrink:0}
.sdv .card-f.wrap{flex-wrap:wrap}
.sdv .ssl-busy{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--t2)}
.sdv .ssl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 18px}
.sdv .ssl-empty .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--bg2);color:var(--t3);margin-bottom:12px}
.sdv .ssl-empty .ic svg{width:22px;height:22px}
.sdv .ssl-empty .tt{font-size:14px;font-weight:700;color:var(--t1)}
.sdv .ssl-empty .sb{font-size:12.5px;color:var(--t3);max-width:420px;margin:5px 0 16px;line-height:1.5}
@media(max-width:600px){
  .sdv .cert-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sdv .cert-cov-r{flex-wrap:wrap}
  .sdv .cert-cov-r .why{margin-left:24px;padding-left:0;white-space:normal}
  .sdv .card-f.wrap .btn{flex:1 1 100%;height:44px}
  .sdv .pick{min-height:44px}
}
/* ── Site Domains & SSL tabs in the Backups (bku-*) language ──────────────────
   .sd-bku joins the #view-backups colour scope above, so these tabs use the
   Backups page's own stat cards, pill tabs, row cards, status pills, menus and
   toggle rows. What follows is only what those two tabs need beyond them. */
.sd-bku .sdb-tabs{max-width:360px}
.sd-bku .bku-tab svg{width:14px;height:14px}
.sd-bku svg{display:block}
.sd-bku .bku-kval.sm{font-size:18px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:44px;line-height:1.2}
.sd-bku .bku-kval small{font-size:13px}
.sd-bku .bku-kico.r{background:var(--bku-rbg);color:var(--bku-rt)}
.sd-bku .bku-kpi:has(.bku-ringmini) .bku-klab{padding-right:48px}
/* section heading between groups of cards */
.sd-bku .sdb-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:24px 2px 11px;flex-wrap:wrap}
.sd-bku .sdb-t{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--bku-ink)}
.sd-bku .sdb-s{font-size:12px;color:var(--bku-mut);margin-top:3px}
.sd-bku .sdb-r{display:flex;gap:8px;flex-wrap:wrap}
/* a domain as its own card */
.sd-bku .sdb-drow{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(128px,.6fr) minmax(128px,.6fr) auto;gap:14px;align-items:center;padding:14px 16px}
.sd-bku .sdb-dic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--bku-inset);color:var(--bku-t3);border:1px solid var(--bku-bd)}
.sd-bku .sdb-dic svg{width:18px;height:18px}
.sd-bku .sdb-dic.pri{background:linear-gradient(150deg,var(--a),var(--ah));color:#fff;border-color:transparent;box-shadow:0 4px 12px color-mix(in srgb,var(--a) 28%,transparent)}
.sd-bku .sdb-dic.rd{background:var(--bku-ybg);color:var(--bku-yt);border-color:var(--bku-ybd)}
.sd-bku .sdb-tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:6px;margin-left:8px;vertical-align:2px;white-space:nowrap}
.sd-bku .sdb-tag.pri{background:var(--bku-at);color:var(--bku-a)}
.sd-bku .sdb-tag.al{background:var(--bku-bd2);color:var(--bku-t3)}
.sd-bku .sdb-tag.rd{background:var(--bku-ybg);color:var(--bku-yt)}
.sd-bku .sdb-tag.wc{background:var(--bku-pbg);color:var(--bku-p);font-family:var(--mono);font-weight:500}
.sd-bku .sd-dns{justify-content:flex-start}
.sd-bku .bku-hpill.px{background:var(--bku-abg);color:var(--bku-a);border-color:var(--bku-abd)}
.sd-bku .bku-hpill.px .dot{background:var(--bku-a)}
.sd-bku .sdb-acts{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.sd-bku .bku-scard .bku-menu{top:58px}
.sd-bku .bku-menu a{text-decoration:none}
.sd-bku .bku-menu a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--bku-a)}
.sd-bku .bku-kebab:focus-visible,.sd-bku .bku-hbtn:focus-visible,.sd-bku .bku-gbtn:focus-visible,.sd-bku .bku-pbtn:focus-visible,.sd-bku .bku-ebtn:focus-visible,.sd-bku .bku-tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bku-aring),0 0 0 1px var(--bku-a)}
/* HTTPS behaviour: toggle rows side by side */
.sd-bku .sdb-tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sd-bku .sdb-tgrid .bku-trow{margin-bottom:0;padding:14px 16px;border-radius:14px;transition:box-shadow .22s,border-color .18s}
.sd-bku .sdb-tgrid .bku-trow:hover{box-shadow:0 8px 20px rgba(16,24,40,.06);border-color:var(--b1)}
.sd-bku .bku-trow .tico.a{background:var(--bku-at);color:var(--bku-a)}
.sd-bku .bku-trow .tico.g{background:var(--bku-gbg);color:var(--bku-gt)}
.sd-bku .bku-trow .tog{margin-left:auto}
.sd-bku .bku-trow .bku-ebtn,.sd-bku .bku-trow .bku-pbtn{margin-left:auto;flex-shrink:0}
/* SSL header */
.sd-bku .sdb-ph{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.sd-bku .sdb-phl{display:flex;align-items:center;gap:14px;min-width:0}
.sd-bku .sdb-h{font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--bku-ink)}
.sd-bku .sdb-hs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:12px;color:var(--bku-mut)}
.sd-bku .sdb-hs .bku-hpill{font-size:11px;padding:2px 10px}
.sd-bku .sdb-phr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sd-bku .sdb-https{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 8px 0 13px;border:1px solid var(--bku-bd3);border-radius:10px;background:var(--w);font-size:12.5px;font-weight:600;color:var(--bku-t3)}
.sd-bku .sdb-hico.ok{background:linear-gradient(150deg,var(--g),color-mix(in srgb,var(--g) 78%,#000));box-shadow:0 4px 14px color-mix(in srgb,var(--g) 30%,transparent)}
.sd-bku .sdb-hico.warn{background:linear-gradient(150deg,var(--y),color-mix(in srgb,var(--y) 78%,#000));box-shadow:0 4px 14px color-mix(in srgb,var(--y) 30%,transparent)}
.sd-bku .sdb-hico.bad{background:linear-gradient(150deg,var(--r),color-mix(in srgb,var(--r) 78%,#000));box-shadow:0 4px 14px color-mix(in srgb,var(--r) 30%,transparent)}
.sd-bku .sdb-hico.off{background:var(--bku-inset);box-shadow:none;margin-bottom:12px}
.sd-bku .sdb-hico.off svg{color:var(--bku-mut)}
/* section cards */
.sd-bku .sdb-card{background:var(--w);border:1px solid var(--bku-bd);border-radius:14px;overflow:hidden;margin-top:12px}
.sd-bku .sdb-chead{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--bku-bd2)}
.sd-bku .sdb-ct{font-size:13.5px;font-weight:600;color:var(--bku-ink)}
.sd-bku .sdb-cs{font-size:11.5px;color:var(--bku-mut);margin-top:2px}
.sd-bku .sdb-cbody{padding:16px 18px}
.sd-bku .sdb-cbody .cert-names{margin-bottom:0}
.sd-bku .sdb-foot{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--bku-bd2);background:var(--bku-inset);flex-wrap:wrap}
.sd-bku .sdb-foot .hint{font-size:12px;color:var(--bku-mut);margin-right:auto}
.sd-bku .sdb-full{width:100%;height:42px}
/* choice cards and names, in the same proportions */
.sd-bku .pick{border-radius:14px;padding:16px 44px 16px 16px;border-color:var(--bku-bd);transition:transform .25s cubic-bezier(.25,.6,.3,1),box-shadow .25s,border-color .2s,background .15s}
.sd-bku .pick:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.08);border-color:var(--b2)}
.sd-bku .pick.on{border-color:var(--bku-a);background:var(--bku-abg);box-shadow:inset 0 0 0 1px var(--bku-a)}
.sd-bku .pick.on:hover{box-shadow:inset 0 0 0 1px var(--bku-a),0 10px 24px rgba(16,24,40,.08)}
.sd-bku .pick .ic{width:36px;height:36px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.sd-bku .pick[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.sd-bku .cert-nm{min-height:32px;border-radius:9px;padding:0 12px}
.sd-bku .cert-cov{border-radius:12px}
.sd-bku .ssl-empty{padding:34px 18px}
@media(prefers-reduced-motion:reduce){.sd-bku .pick,.sd-bku .pick:hover{transform:none;transition:none}}
@media(max-width:760px){
  .sd-bku .sdb-drow{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
  .sd-bku .sdb-dom,.sd-bku .sdb-acts{grid-row:1}
  .sd-bku .sdb-col{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--bku-bd2)}
  .sd-bku .sdb-col .bku-colh{margin:0}
  .sd-bku .sdb-col .bku-colv{text-align:right}
  .sd-bku .sdb-tgrid{grid-template-columns:1fr}
  .sd-bku .sdb-phr{width:100%}
  .sd-bku .sdb-phr .bku-gbtn{flex:1;justify-content:center;height:44px}
  .sd-bku .sdb-https{height:44px}
  .sd-bku .sdb-tabs{max-width:none}
  .sd-bku .bku-kebab,.sd-bku .bku-hbtn.ic{width:44px;height:44px}
  .sd-bku .sdb-r{width:100%}
  .sd-bku .sdb-r .bku-gbtn,.sd-bku .sdb-r .bku-pbtn{flex:1;justify-content:center;height:44px}
  .sd-bku .sdb-foot .bku-pbtn{width:100%;justify-content:center;height:44px}
  .sd-bku .bku-trow{flex-wrap:wrap}
  .sd-bku .bku-kval.sm{font-size:15.5px;padding-right:0;white-space:normal;overflow-wrap:anywhere}
  .sd-bku .bku-trow > div{flex:1 1 0;min-width:0}
  .sd-bku .bku-trow .bku-ebtn,.sd-bku .bku-trow .bku-pbtn{flex:1 0 100%;justify-content:center;height:44px;margin-left:0}
}
/* ── Server → Updates tab (pages/server-updates.js) in the same language ───────
   Spec: docs/superpowers/specs/2026-10-22-server-software-updates-design.md §3.3.
   Security fixes, end of life, other updates and tools as P19 row cards; what
   follows is only what those rows need beyond the domain rows. */
.sd-bku.su-wrap{margin-top:14px}
.sd-bku .bku-kico.y{background:var(--bku-ybg);color:var(--bku-yt)}
.sd-bku .bku-hpill.na{background:var(--bku-bd2);color:var(--bku-t3);border-color:var(--bku-bd)}
.sd-bku .bku-hpill.na .dot{background:var(--bku-mut)}
.sd-bku .sdb-col .bku-hpill{font-size:11.5px;padding:3px 11px}
.sd-bku .sdb-tag.crit{background:var(--bku-rbg);color:var(--bku-rt)}
.sd-bku .sdb-tag.sec{background:var(--bku-ybg);color:var(--bku-yt)}
.sd-bku .sdb-dic.crit{background:var(--bku-rbg);color:var(--bku-rt);border-color:var(--bku-rbd)}
.sd-bku .su-ver{font-family:var(--mono);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-bku .su-ver .sub{font-family:var(--mono);overflow:hidden;text-overflow:ellipsis}
.sd-bku .su-cves{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.sd-bku .su-cve{display:inline-flex;align-items:center;font:600 10.5px/1 var(--mono);padding:4px 7px;border-radius:6px;text-decoration:none;white-space:nowrap;border:1px solid transparent}
.sd-bku .su-cve.crit,.sd-bku .su-cve.high{background:var(--bku-rbg);color:var(--bku-rt)}
.sd-bku .su-cve.med{background:var(--bku-ybg);color:var(--bku-yt)}
.sd-bku .su-cve.low{background:var(--bku-bd2);color:var(--bku-t3)}
.sd-bku a.su-cve:hover{border-color:currentColor}
.sd-bku a.su-cve:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bku-aring)}
.sd-bku .su-note{font-size:11.5px;color:var(--bku-mut);line-height:1.45}
.sd-bku .su-more{border-top:1px solid var(--bku-bd2);padding:12px 16px 14px;display:grid;gap:12px}
.sd-bku .su-more[hidden]{display:none}
.sd-bku .su-pk{display:flex;flex-wrap:wrap;gap:6px}
.sd-bku .su-pk span{font:500 11px/1.2 var(--mono);padding:4px 7px;border-radius:6px;background:var(--bku-inset);color:var(--bku-t3)}
.sd-bku .su-cvel{display:grid;gap:7px}
.sd-bku .su-why{border-top:1px solid var(--bku-bd2);padding:10px 16px 12px;font-size:12px;color:var(--bku-t3);line-height:1.5}
.sd-bku .su-why.su-muted{color:var(--bku-mut)}
.sd-bku .su-eol-past{border-color:var(--bku-rbd)}
.sd-bku .su-eol-soon{border-color:var(--bku-ybd)}
.sd-bku .su-none{display:flex;align-items:center;gap:10px;padding:16px 18px;font-size:12.5px;color:var(--bku-mut)}
.sd-bku .su-none svg{width:18px;height:18px;color:var(--bku-gt);flex-shrink:0}
.sd-bku .su-sys{margin:0 0 4px}
.sd-bku .su-sys .sdb-chead{border-bottom:0}
.sd-bku .su-restart{display:flex;align-items:flex-start;gap:10px;border-top:1px solid var(--bku-bd2);font-size:12px;color:var(--bku-t3);line-height:1.5}
.sd-bku .su-restart svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--bku-yt)}
.sd-bku .su-sys .bku-gbtn svg,.sd-bku .sdb-r .bku-pbtn svg,.sd-bku .sdb-r .bku-gbtn svg{width:14px;height:14px}
@media(max-width:760px){
  .sd-bku .su-ver{white-space:normal;overflow-wrap:anywhere}
  .sd-bku .su-cves{justify-content:flex-end}
  .sd-bku .sdb-acts .bku-hbtn,.sd-bku .sdb-acts .bku-pbtn{height:44px}
  .sd-bku .su-sys .sdb-chead{flex-wrap:wrap}
  .sd-bku .su-sys .bku-gbtn{width:100%;justify-content:center;height:44px}
  .sd-bku .su-restart{flex-wrap:wrap}
  .sd-bku .su-restart .bku-hbtn{width:100%;justify-content:center;height:44px}
  .sd-bku .bku-trow .bku-sel{height:44px}
}
/* Updates tab: one actions width for every row, so the columns line up whether
   a row has two buttons, one, or none (an end-of-life row, an up-to-date tool). */
@media(min-width:761px){.sd-bku .su-item .sdb-drow{grid-template-columns:minmax(0,1.7fr) minmax(120px,.6fr) minmax(190px,.6fr) minmax(180px,auto)}.sd-bku .su-item .sdb-drow>.sdb-acts{grid-column:-2}}
/* A CVE chip never runs under the buttons: the third column fits one ("CVE-2026-109618 · Critical"),
   and a longer one is cut with its full text on hover. */
.sd-bku .su-item .sdb-col{min-width:0}
.sd-bku .su-cve{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* On a phone the name keeps its row (and wraps); the buttons get a full-width row of their own. */
@media(max-width:760px){.sd-bku .su-item .bku-dn .d{white-space:normal}.sd-bku .su-item .sdb-drow>.sdb-acts{grid-row:auto;grid-column:1/-1}.sd-bku .su-item .sdb-acts>button{flex:1;justify-content:center}.sd-bku .su-item .sdb-acts:empty{display:none}}
/* Updates tab: the automatic-installs card, the restart line, the history rows */
.sd-bku .bku-trow .tico.y{background:var(--bku-ybg);color:var(--bku-yt)}
.sd-bku .bku-trow .bku-sel{margin-left:auto;flex-shrink:0;min-width:0}
.sd-bku .bku-trow.off .tt2,.sd-bku .bku-trow.off .ts2,.sd-bku .bku-trow.off .bku-sel{opacity:.55}
.sd-bku .su-callout{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--bku-ybg);border:1px solid var(--bku-ybd);color:var(--bku-ink);font-size:12px;line-height:1.5}
.sd-bku .su-callout[hidden]{display:none}
.sd-bku .su-restart .bku-hbtn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
.sd-bku .su-restart .bku-hbtn svg{width:14px;height:14px;margin:0;color:inherit}
/* Plugins page — FlyWP content, ServerPanel personality (chips · animated rows ·
   pulsing status · depth). logo · name/desc · status · auto-update */
.sdv .plg-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:2px 2px 15px}
.sdv .plg-tab{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;border-radius:10px;border:1px solid var(--b1);background:var(--w);transition:border-color .15s,color .15s,background .15s,box-shadow .15s}
.sdv .plg-tab:hover{border-color:var(--b2);color:var(--t1)}
.sdv .plg-tab.on{background:var(--ab);border-color:color-mix(in srgb,var(--a) 34%,transparent);color:var(--a);box-shadow:0 2px 8px color-mix(in srgb,var(--a) 12%,transparent)}
.sdv .plg-tab .n{font-size:10.5px;font-weight:700;color:var(--t4);background:var(--bg2);border-radius:99px;padding:1px 8px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.sdv .plg-tab.on .n{color:var(--a);background:var(--w)}
.sdv .plg-search{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--b1);border-radius:10px;background:var(--w);transition:border-color .15s,box-shadow .15s}
.sdv .plg-search:focus-within{border-color:color-mix(in srgb,var(--a) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 12%,transparent)}
.sdv .plg-search .i{display:inline-flex;color:var(--t4);flex:0 0 auto}
.sdv .plg-search .i svg{width:15px;height:15px}
.sdv .plg-search input{border:0;outline:0;background:transparent;font-size:12.5px;color:var(--t1);width:180px;padding:0;font-family:inherit}
.sdv .plg-search input::placeholder{color:var(--t4)}
.sdv .plg-search input::-webkit-search-cancel-button{cursor:pointer}
@media (max-width:640px){.sdv .plg-search{margin-left:0;width:100%;height:40px}.sdv .plg-search input{width:auto;flex:1}}
.sdv .plg-hd,.sdv .plg-row{display:grid;grid-template-columns:1fr 118px 156px 34px;gap:14px;align-items:center}
.sdv .plg-hd{padding:11px 20px;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--t4);text-transform:uppercase;background:var(--bg2);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1)}
.sdv .plg-row{padding:15px 20px;border-bottom:1px solid var(--b1);transition:background .14s}
.sdv .plg-row:last-child{border-bottom:0}
.sdv .plg-row:hover{background:var(--bg2)}
.sdv .plg-main{display:flex;gap:14px;align-items:center;min-width:0}
.sdv .plg-logo{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;overflow:hidden;background:var(--w);border:1px solid var(--b1);box-shadow:0 1px 3px rgba(15,23,42,.06);transition:transform .16s,box-shadow .16s}
.sdv .plg-row:hover .plg-logo{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.12)}
.sdv .plg-logo img{width:100%;height:100%;object-fit:cover;display:block}
.sdv .plg-logo .lt{font-size:19px;font-weight:800;color:var(--a);letter-spacing:-.5px}
.sdv .plg-tx{min-width:0}
.sdv .plg-nm{font-size:14px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:8px;flex-wrap:wrap;letter-spacing:-.1px}
.sdv .plg-desc{font-size:12px;color:var(--t3);margin-top:3px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56ch}
.sdv .plg-meta{font-size:11px;color:var(--t4);margin-top:5px;font-variant-numeric:tabular-nums}
.sdv .plg-au{display:flex;align-items:center;gap:9px}
.sdv .plg-au .lbl{font-size:12px;color:var(--t2);font-weight:500}
/* status — FlyWP style: soft rounded-rectangle pill, light fill, no dot */
.sdv .plg-st{display:inline-flex!important;align-items:center;font-size:11.5px;font-weight:600;padding:4px 11px!important;border-radius:7px;white-space:nowrap;justify-self:start;line-height:1.4;border:0!important}
.sdv .plg-st.pon{background:var(--ab);color:var(--a)}
.sdv .plg-st.poff{background:var(--bg2);color:var(--t3)}
/* floating kebab menu — un-clip the card + lift the row while open */
.sdv .card.plg-open{overflow:visible;position:relative;z-index:5}
.sdv .plg-row.menuopen{position:relative;z-index:40;background:var(--w)}
.sdv .plg-kebab{position:relative}
.sdv .plg-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;background:var(--w);border:1px solid var(--b1);border-radius:12px;box-shadow:var(--shadow-lg);min-width:186px;padding:6px;display:none}
.sdv .plg-menu.open{display:block;animation:plgMenuIn .14s cubic-bezier(.22,.7,.3,1)}
@keyframes plgMenuIn{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
.sdv .plg-mi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--t1);cursor:pointer;background:none;border:0;text-align:left;transition:background .12s}
.sdv .plg-mi:hover{background:var(--bg2)}
.sdv .plg-mi.del{color:var(--r)}
.sdv .plg-mi svg{width:15px;height:15px;flex-shrink:0;color:var(--t3)}
.sdv .plg-mi.del svg{color:var(--r)}
@keyframes plgUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.sdv .plg-row.plg-an{opacity:0;animation:plgUp .42s cubic-bezier(.22,.7,.3,1) forwards}
@media(prefers-reduced-motion:reduce){.sdv .plg-row.plg-an{animation:none;opacity:1}}
@media(max-width:760px){
  .sdv .plg-hd{display:none}
  .sdv .plg-row{grid-template-columns:1fr auto;gap:10px 12px}
  .sdv .plg-row .plg-status{grid-column:1;justify-self:start}
  .sdv .plg-row .plg-au{grid-column:1}
}
/* quick actions */
.sdv .qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.sdv .qa{display:flex;align-items:center;gap:10px;background:var(--w);border:1px solid var(--b1);border-radius:12px;padding:11px 13px;font-size:12.3px;font-weight:600;color:var(--t1);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .13s}
.sdv .qa:hover{border-color:var(--a);box-shadow:0 4px 14px color-mix(in srgb,var(--a) 12%,transparent);transform:translateY(-1px)}
.sdv .qa .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--ab);color:var(--a)}
.sdv .qa .ic svg{width:15px;height:15px}
.sdv .qa .ic.g{background:var(--gb);color:var(--g)}
.sdv .qa .ic.y{background:var(--yb);color:var(--y)}
.sdv .qa .ic.p{background:var(--pb);color:var(--p)}
.sdv .qa .ic.r{background:var(--rb);color:var(--r)}
/* Action grid — `.qa` tiles laid out as a card body instead of a row of small
   buttons. auto-fit/minmax reflows 4→2→1 columns with no breakpoints. */
.sdv .qagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:10px;align-items:stretch}
.sdv .qagrid>.qa,.sdv .qagrid>span>.qa{width:100%;align-items:flex-start}
.sdv .qa .qat{display:block;font-size:12.5px;font-weight:600;color:var(--t1);line-height:1.35}
.sdv .qa .qas{display:block;font-size:10.5px;font-weight:500;color:var(--t3);margin-top:3px;line-height:1.45}
/* Disabled tiles: a cache that is switched off cannot be flushed. Muted, and
   the hover lift is cancelled so it does not invite a click it will not take. */
.sdv .qa:disabled{opacity:.5;cursor:not-allowed}
.sdv .qa:disabled:hover{border-color:var(--b1);box-shadow:none;transform:none}
@media (max-width:560px){.sdv .qagrid{grid-template-columns:1fr}.sdv .qa{padding:13px}}
/* Site actions modal: the same tiles as a single stacked column. Replaces the
   per-button inline width:100% the modal used to carry. */
.sdv .qagrid.sdh-acts{grid-template-columns:1fr;gap:8px}
/* activity feed */
.sdv .act{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--b1)}
.sdv .act:last-child{border-bottom:0}
.sdv .act .ad{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.sdv .act .ad svg{width:13px;height:13px}
.sdv .act .ad.g{background:var(--gb);color:var(--g)}
.sdv .act .ad.b{background:var(--ab);color:var(--a)}
.sdv .act .ad.y{background:var(--yb);color:var(--y)}
.sdv .act .ad.r{background:var(--rb);color:var(--r)}
.sdv .act .tx{font-size:12.3px;color:var(--t1);line-height:1.45}
.sdv .act .tm{font-size:10.5px;color:var(--t4);margin-top:1px}
/* Recent-activity card (Overview) — "View all activity" footer jumps to the Activity tab */
.sdv .card.sd-recent{display:flex;flex-direction:column}
.sdv .card.sd-recent #sd-recent-body{flex:1}
.sd-recent-ft{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:11px 16px;margin-top:auto;border:0;border-top:1px solid var(--b1);background:transparent;color:var(--a);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;border-radius:0 0 13px 13px;transition:background .15s ease}
.sd-recent-ft svg{width:15px;height:15px;transition:transform .15s ease}
.sd-recent-ft:hover{background:var(--ab)}
.sd-recent-ft:hover svg{transform:translateX(3px)}
/* Overview split: Application (wider) beside the Recent-activity card. Own class
   so the site-detail .grid-2 mobile override doesn't force it to one column. */
.sd-ov-split{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s-4,16px);align-items:stretch}
.sd-ov-split>.sdv{display:flex;flex-direction:column}
.sd-ov-split>.sdv>.card{flex:1}
@media(max-width:960px){.sd-ov-split{grid-template-columns:1fr}}
/* Application card — grouped sections (Sites-list eyebrow idiom); live dot on real-time rows */
.sdv .appg{padding:12px 18px}
.sdv .appg+.appg{border-top:1px solid var(--b1)}
.sdv .appgl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t4);display:flex;align-items:center;gap:6px;margin-bottom:10px}
.sdv .appgl svg{width:13px;height:13px}
.sdv .applive{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--g);vertical-align:1px}
.sdv .applive::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--g);animation:sdvPl 1.8s ease-in-out infinite}
.sdv .amut{color:var(--t3);font-size:12px;font-weight:400}
/* console / log viewer — stays dark in both themes */
.sdv .logv{background:#1b1b29;border-radius:11px;font-family:var(--mono);font-size:11.5px;line-height:1.75;max-height:420px;overflow:auto;padding:10px 0}
.sdv .logrow{display:flex;gap:10px;padding:1px 14px;border-left:2px solid transparent}
.sdv .logrow .ln{flex-shrink:0;width:30px;text-align:right;color:#56566f;user-select:none}
.sdv .logrow .tx{color:#c8c8d6;white-space:pre-wrap;word-break:break-word}
.sdv .logrow.err{border-left-color:#ff5a5a;background:rgba(255,90,90,.06)}
.sdv .logrow.err .tx{color:#ff9d9d}
.sdv .logrow.warn{border-left-color:#ffb23e}
.sdv .logrow.warn .tx{color:#ffd089}
.sdv .logrow.ok .tx{color:#9fe9b5}
.sdv .code{background:#1b1b29;color:#c8c8d6;border-radius:11px;font-family:var(--mono);font-size:11.8px;line-height:1.7;padding:14px 16px;overflow:auto;white-space:pre}
.sdv .code .k{color:#93c5fd}.sdv .code .s{color:#86efac}.sdv .code .c{color:#64748b;font-style:italic}.sdv .code .n{color:#fda4af}
/* misc */
.sdv .dl{display:grid;grid-template-columns:150px 1fr;gap:9px 14px;font-size:12.5px}
.sdv .dl dt{color:var(--t3);font-weight:500}
.sdv .dl dd{color:var(--t1);font-weight:500;display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap;margin:0}
.sdv .copybtn{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;background:var(--bg2);border:1px solid var(--b1);border-radius:7px;padding:3px 9px;color:var(--t1);cursor:pointer;transition:.14s;max-width:100%}
.sdv .copybtn:hover{border-color:var(--a);color:var(--a)}
.sdv .copybtn svg{width:11px;height:11px;color:var(--t4)}
.sdv .copybtn:hover svg{color:var(--a)}
.sdv .copybtn .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdv .emp{text-align:center;padding:34px 16px;color:var(--t3);font-size:12.5px}
.sdv .emp .ic{width:44px;height:44px;border-radius:13px;background:var(--bg2);display:grid;place-items:center;margin:0 auto 10px;color:var(--t4)}
.sdv .emp .ic svg{width:20px;height:20px}
.sdv .bar{height:7px;border-radius:99px;background:var(--bg2);overflow:hidden;flex:1}
.sdv .bar i{display:block;height:100%;border-radius:99px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.sdv .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sdv .tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.3px;border-radius:5px;padding:2px 7px;text-transform:uppercase}
.sdv .tag.b{background:var(--ab);color:var(--a)}
.sdv .tag.p{background:var(--pb);color:var(--p)}
.sdv .tag.g{background:var(--gb);color:var(--g)}
.sdv .tag.y{background:var(--yb);color:var(--y)}
.sdv .tag.r{background:var(--rb);color:var(--r)}
.sdv .tag.n{background:var(--bg2);color:var(--t3)}
/* seg control */
.sdv .seg{display:inline-flex;gap:3px;background:var(--bg2);border-radius:10px;padding:3px}
.sdv .seg button{height:28px;padding:0 12px;border:0;border-radius:8px;background:transparent;font-size:11.8px;font-weight:600;color:var(--t3);cursor:pointer;transition:.15s}
.sdv .seg button.on{background:var(--w);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* Basic Auth setting rows — the mode segment and the realm field are wider than
   most trow controls, so below 560px they drop under the label instead of
   squeezing it. Scoped to .ba-row so no other tab's layout shifts. */
@media(max-width:560px){
  .sdv .trow.ba-row{flex-wrap:wrap}
  .sdv .trow.ba-row .tx{flex:1 0 100%}
  .sdv .trow.ba-row>.seg,.sdv .trow.ba-row>.fi{width:100%!important;flex:1 0 100%!important}
  .sdv .trow.ba-row>.seg button{flex:1}
}
/* stepper */
.sdv .steps{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.sdv .step{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--t4)}
.sdv .step .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);color:var(--t3);font-size:10.5px;font-weight:700}
.sdv .step.on{color:var(--a)}
.sdv .step.on .n{background:var(--a);color:#fff}
.sdv .step.done .n{background:var(--gb);color:var(--g)}
.sdv .step-ln{flex:1;height:1px;background:var(--b1);min-width:18px}
/* skeleton + rise-in */
@keyframes sdvShim{0%{background-position:-300px 0}100%{background-position:300px 0}}
.sdv .sk{background:var(--bg2);background-image:linear-gradient(90deg,var(--bg2) 0,var(--b1) 60px,var(--bg2) 120px);background-size:300px 100%;animation:sdvShim 1.1s linear infinite;border-radius:8px;display:block}
/* Nginx config — dark VS Code-style overlay editor (artifact .code palette, always dark) */
.sdv .ngx-ed{border:1px solid var(--b1);border-radius:11px;overflow:hidden;background:#1b1b29}
.sdv .ngx-code{position:relative;height:440px;background:#1b1b29}
.sdv .ngx-hl,.sdv .ngx-ta{position:absolute;inset:0;margin:0;border:0;padding:14px 16px;font-family:var(--mono,ui-monospace,'JetBrains Mono',monospace);font-size:12.5px;line-height:1.7;white-space:pre;tab-size:4;box-sizing:border-box}
.sdv .ngx-hl{pointer-events:none;color:#c8c8d6;overflow:hidden}
.sdv .ngx-ta{overflow:auto;background:transparent;color:transparent;caret-color:#e2e8f0;resize:none;outline:none}
.sdv .ngx-ta::selection{background:rgba(147,197,253,.28)}
/* The textarea sets outline:none and replaced it with nothing, so the code
   editors (Nginx config and the wp-config raw block) gave a keyboard user no
   indication of focus. The ring goes on the bordered wrapper, since the
   textarea itself is transparent and stacked under the highlight layer. */
.sdv .ngx-ed:has(.ngx-ta:focus-visible){outline:2px solid var(--a);outline-offset:2px}
.sdv .ngx-hl .tk-k{color:#93c5fd}
.sdv .ngx-hl .tk-s{color:#86efac}
.sdv .ngx-hl .tk-c{color:#64748b;font-style:italic}
.sdv .ngx-hl .tk-v{color:#f0abfc}
.sdv .ngx-hl .tk-n{color:#fda4af}
.sdv .an{opacity:0;transform:translateY(8px);animation:sdvRise .45s cubic-bezier(.22,1,.36,1) forwards}
@keyframes sdvRise{to{opacity:1;transform:none}}
.sdv .d1{animation-delay:.04s}.sdv .d2{animation-delay:.09s}.sdv .d3{animation-delay:.14s}.sdv .d4{animation-delay:.19s}.sdv .d5{animation-delay:.24s}
/* The entry animation belongs to ARRIVING at a tab, not to every repaint of one.
   Saving a form, deleting a row or flipping a switch rebuilds the tab it is on,
   and every card and row then slid in again from scratch — the whole pane
   reading as a page load for an edit that changed one line. renderSiteDetail()
   adds .sd-noanim once the arrival animation has played, so in-tab repaints are
   instant; leaving the tab and coming back clears it and the animation returns.
   opacity/transform must be restored too: .an starts at opacity:0 and is made
   visible BY the animation, so cancelling it alone would leave a blank pane. */
#detail-content.sd-noanim .sdv .an,
#detail-content.sd-noanim .sdv .plg-row.plg-an{animation:none;opacity:1;transform:none}
/* The site Activity tab is not a .sdv view — it reuses the standalone activity
   log's .al-* markup, whose entry animation is .al-an + .al-in (alFadeUp), 34
   elements of it. Scoped to #detail-content so the standalone /activity page,
   which is not inside this container, keeps animating on arrival as before.
   .al-an alone is opacity:0 — it is .al-in that reveals it — so the opacity and
   transform have to be restored here, not just the animation cancelled. */
#detail-content.sd-noanim .al-an{opacity:1;transform:none}
#detail-content.sd-noanim .al-an.al-in{animation:none}
/* The WP-updates count badge pops in (sptIcPop) on every Overview repaint. */
#detail-content.sd-noanim .qbadge{animation:none}
/* .plg-an already honoured this; .an, used by every other tab, did not. */
@media(prefers-reduced-motion:reduce){.sdv .an{animation:none;opacity:1;transform:none}}
.sdv svg{display:block;flex-shrink:0}
@media(max-width:900px){
  .sdv .dl{grid-template-columns:1fr}
  .sdv .fr{grid-template-columns:1fr}
}

/* ─── Panel-wide vulnerability view (pages/vulnerability.js) ───────────────
   Only TWO new classes: a domain that navigates, and a compact domain chip.
   Everything else on that page reuses the .sdv set above verbatim, so it
   inherits dark mode, focus rings and spacing for free. */
.sdv .vp-link{border:0;background:none;padding:0;font:inherit;color:var(--t1);cursor:pointer;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid transparent;transition:color .14s,border-color .14s}
.sdv .vp-link:hover{color:var(--a);border-bottom-color:color-mix(in srgb,var(--a) 45%,transparent)}
.sdv .vp-link:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:3px}
/* Page-header shield tile. NOT .sdv-scoped: it sits in the .ph header, outside
   #vp-content. Same 40px/radius-11 geometry as .sdh-ico so the Vulnerability
   header reads as a sibling of the site-detail header, and it carries the same
   tone vocabulary as the card-header .ic tiles it sits above. */
.vp-hico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:var(--ab);color:var(--a);transition:background .2s,color .2s}
.vp-hico svg{width:21px;height:21px;display:block}
.vp-hico.g{background:var(--gb);color:var(--g)}
.vp-hico.y{background:var(--yb);color:var(--y)}
.vp-hico.r{background:var(--rb);color:var(--r)}
.sdv .vp-link{min-width:0}
/* Refresh button spins while the roll-up reloads. .iba.spin already exists for
   icon buttons; the page-header Refresh is a .btn, which had no such state. */
.sdv .btn.spin svg{animation:sdSpin .8s linear infinite}
/* the Advisories lens shows the domain as a standalone cell, not inside a
   .tc-main heading, so it sets its own weight there */
.sdv .vp-t .tr>div>.vp-link{font-size:13px;font-weight:600}
/* .sdv .tc-main .nm is display:flex (it normally holds a title PLUS badges),
   and text-overflow never applies to a flex container's anonymous text item —
   a long advisory title just overflowed its column with no ellipsis. Titles
   are therefore wrapped in .vp-ell, which is a real flex ITEM and can clip. */
.sdv .vp-ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdv .vp-chip{display:inline-flex;align-items:center;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--b1);background:var(--w);color:var(--t2);border-radius:7px;padding:3px 8px;font-family:var(--mono);font-size:10.5px;font-weight:500;cursor:pointer;transition:border-color .14s,color .14s,background .14s}
.sdv .vp-chip:hover{border-color:color-mix(in srgb,var(--a) 45%,transparent);background:var(--ab);color:var(--a)}
.sdv .vp-chip:focus-visible{outline:2px solid var(--a);outline-offset:1px}
/* Mobile: a six-column advisory grid cannot survive a 390px viewport, so every
   lens becomes a flex stack rather than making the page scroll sideways.
   display:flex beats the .tr grid AND makes the inline grid-template-columns
   irrelevant, so each lens collapses without needing its own override: the
   title claims a full row, the facts wrap beneath it, the chevron stays right. */
@media(max-width:820px){
  .sdv .vp-t .th{display:none}
  .sdv .vp-t .tr{display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px;padding:14px 16px}
  .sdv .vp-t .tr>*{min-width:0}
  .sdv .vp-t .tr .tc-main{flex:1 1 100%}
  .sdv .vp-t .tr .iba{margin-left:auto;width:34px;height:34px}
  .sdv .vp-chip{max-width:130px}
}

/* File Manager tab — refresh button icon spins while activity reloads */
.fmr-spin svg{animation:sptSpin .8s linear infinite;}

/* KPI skeleton overlay — shimmer covers each KPI card on Overview entry, then
   fades out to reveal the real value (the value stays in the DOM underneath, so
   async loaders never race it). Reuses the sdvShim keyframe. */
.sdx-kpi{position:relative;}
.sdx-skov{position:absolute;inset:0;border-radius:13px;z-index:3;background:var(--bg2);background-image:linear-gradient(90deg,var(--bg2) 0,var(--b1) 70px,var(--bg2) 140px);background-size:300px 100%;animation:sdvShim 1.1s linear infinite;transition:opacity .34s ease;}
.sdx-skov.out{opacity:0;pointer-events:none;}
@media (prefers-reduced-motion: reduce){ .sdx-skov{animation:none;} }

/* Quick-action count badge (Messages-app style) — sits on the icon chip's
   corner; red pill, white count, ring in the card color so it pops */
.sdx-qab .ic{overflow:visible;}
.sdx-qab .qbadge{position:absolute;top:-4px;right:-5px;min-width:14px;height:14px;padding:0 3px;border-radius:99px;background:var(--r);color:#fff;font-size:9px;font-weight:700;line-height:14px;text-align:center;border:1.5px solid var(--c);box-sizing:content-box;box-shadow:0 1px 3px rgba(0,0,0,.18);animation:sptIcPop .35s cubic-bezier(.34,1.7,.5,1);}
.sdx-updbtn .ic{position:relative;}
.sdx-updbtn .ic img{width:17px;height:17px;display:block;}
.sdx-updbtn:hover .ic img{transform:rotate(-8deg) scale(1.08);transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
/* Docker "Image update" tile — real Docker logo + count badge (dot when a
   newer image is on the registry) */
.sdx-imgbtn .ic{position:relative;}
.sdx-imgbtn .ic img{width:17px;height:17px;display:block;}
.sdx-imgbtn:hover .ic img{transform:translateY(-1px) scale(1.08);transition:transform .18s cubic-bezier(.34,1.56,.64,1);}

/* Restart PHP quick action — real PHP logo + restart badge; badge spins while
   the request runs (btnLoad adds .loading) */
.sdx-phpbtn .ic{position:relative;overflow:visible;}
.sdx-phpbtn .ic img{width:17px;height:17px;display:block;}
.sdx-phpbtn .ic .rst{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;padding:1.5px;background:var(--c);border:1px solid var(--b1);border-radius:50%;color:#777BB4;transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.sdx-phpbtn:hover .ic .rst{transform:rotate(90deg);}
.sdx-phpbtn:active .ic{transform:scale(.88);}
.sdx-phpbtn .ic{transition:transform .12s ease;}
.sdx-phpbtn.loading .ic .rst{animation:sptSpin .8s linear infinite;}
.sdx-phpbtn.loading .ic img{opacity:.55;}

/* ── Magic Login split button + WP user picker (SpinupWP-style) ─────────── */
.sdx-mlsplit{display:inline-flex;align-items:stretch}
.sdx-mlsplit .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.sdx-mlcaret{border-top-left-radius:0;border-bottom-left-radius:0;padding:0 9px;margin-left:1px;font-size:9px;line-height:1}
.sp-wpu-pop{position:fixed;z-index:1300;min-width:264px;max-width:330px;background:var(--c);border:1px solid var(--b1);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.16);padding:6px;animation:wpuIn .14s ease}
@keyframes wpuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sp-wpu-pop .gh{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:7px 10px 5px}
.sp-wpu-pop .wpu-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;border-radius:9px;cursor:pointer;text-align:left;font:inherit;color:var(--t1)}
.sp-wpu-pop .wpu-row:hover{background:var(--ab)}
.sp-wpu-pop .wpu-row:focus-visible{outline:2px solid var(--a);outline-offset:-2px}
.sp-wpu-pop .wpu-av{width:28px;height:28px;border-radius:50%;background:var(--ab);color:var(--a);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.sp-wpu-pop .wpu-nm{display:block;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--t1)}
.sp-wpu-pop .wpu-em{display:block;font-size:11px;color:var(--t3)}
.sp-wpu-pop .wpu-note{font-size:10.5px;color:var(--t3);padding:7px 10px 4px;border-top:1px solid var(--b1);margin-top:4px}
.sp-wpu-pop .wpu-load{display:flex;align-items:center;gap:8px;padding:10px;font-size:12px;color:var(--t3)}
.sp-wpu-pop .tag{display:inline-block;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:20px;vertical-align:1px}
.sp-wpu-pop .tag.g{background:var(--gb);color:var(--g)}
.sp-wpu-pop .tag.b{background:var(--ab);color:var(--a)}
.wpu-spin{width:13px;height:13px;border:2px solid var(--b2);border-top-color:var(--a);border-radius:50%;animation:wpuSpin .7s linear infinite;flex-shrink:0}
@keyframes wpuSpin{to{transform:rotate(360deg)}}

/* Clear-cache scope popover — brand-icon chips, spring open, staggered rows */
.sp-cache-pop{transform-origin:top left;animation:cpopIn .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes cpopIn{from{opacity:0;transform:scale(.9) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.sp-cache-pop.closing{animation:cpopOut .13s ease forwards;pointer-events:none}
@keyframes cpopOut{to{opacity:0;transform:scale(.95) translateY(-4px)}}
.sp-cache-pop .cp-row{animation:cpRow .3s cubic-bezier(.22,1,.36,1) backwards;transition:background .15s ease,transform .1s ease}
@keyframes cpRow{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sp-cache-pop .cp-row:active{transform:scale(.97)}
.sp-cache-pop .cp-ic{width:30px;height:30px;border-radius:9px;background:var(--w);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.sp-cache-pop .cp-ic svg{width:16px;height:16px}
.sp-cache-pop .cp-ic img{display:block}
.sp-cache-pop .cp-ic.a{color:var(--a);background:var(--ab);border-color:transparent}
.sp-cache-pop .cp-row:hover .cp-ic{transform:scale(1.12) rotate(-4deg)}
@media (prefers-reduced-motion: reduce){
  .sp-cache-pop,.sp-cache-pop .cp-row,.sp-cache-pop .cp-ic{animation:none;transition:none}
}

/* ── Site-detail data tables on MOBILE (≤700px) ─ stacked card rows ──
   Must sit AFTER the .sdv base block (same specificity → source order wins).
   Hide the column header, let each row wrap: name full-width first, then
   pills/values with the action buttons right-aligned. */
@media(max-width:700px){
  .sdv .th{display:none;}
  .sdv .tr{display:flex !important;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:12px 14px;}
  .sdv .tr .tc-main{flex:1 1 100%;}
  .sdv .tr .rowact{margin-left:auto;}
  .sdv .sd-dns{justify-content:flex-start;}
  .sdv .tr > div[style*="text-align:center"]{text-align:left !important;}
}

/* ══════════════════════════════════════════════════════════════════
   SERVER DETAILS — mobile (≤700px). Every server-overview tab renders
   into #so-content and was authored desktop-first: wide data tables
   were clipped by the card's overflow:hidden, the Metrics charts were
   locked 2-up via inline grids, the Activity rows packed 6 columns,
   and paired Settings fields stayed side-by-side. Contain the tables
   in an intentional horizontal-scroll region and let the dense grids
   stack. Scoped to #so-content so nothing else is touched; appended
   last so source order wins the cascade. */
@media(max-width:700px){
  /* Wide data tables (Databases, Cron, Supervisors, Sites, Packages…)
     scroll horizontally inside their card instead of being cut off. */
  #so-content table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #so-content table.tbl thead th,#so-content table.tbl tbody td:not([colspan]){white-space:nowrap;}
  /* …but not a Cron command: wrapped, not 1,000px off the side. (Not the
     colspan "nothing here" cell either — it wraps, see .tbl td[colspan].) */
  #so-content #socron-rows td+td{white-space:normal;word-break:break-all;}

  /* Metrics: charts locked 2-up need full width to stay legible → stack.
     The 3 gauge cards clip their icon+label+status row at 107px, so they
     stack too — each gets the full width and nothing is cut. */
  #so-content .som-grid2{grid-template-columns:1fr !important;}
  #so-content .som-grid3{grid-template-columns:1fr !important;}
  #so-content canvas{max-width:100%;}

  /* Settings: paired form fields stack to one column. */
  #so-content .sst-r2{grid-template-columns:1fr;}

  /* Nginx: the `nginx -t` result is a badge holding a full sentence;
     let it wrap instead of overrunning the card. */
  #songinx-body .bdg{white-space:normal;line-height:1.45;}

  /* Activity events: 6-column grid → two tidy lines
     (action on its own line, then time · target · who · status · View). */
  #so-content .so-evcols{display:none;}
  #so-content .so-evrow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;}
  #so-content .so-evrow .evt{flex:1 1 100%;order:1;white-space:normal;overflow:visible;text-overflow:clip;}
  #so-content .so-evrow .bdg-ev{order:2;}
  #so-content .so-evrow .evtime{order:3;}
  #so-content .so-evrow .evsite{order:4;flex:0 1 auto;}
  #so-content .so-evrow .so-evav{order:5;}
  #so-content .so-evrow .so-evview{order:6;margin-left:auto;}
}

/* ══════════════════════════════════════════════════════════════════
   BACKUPS — mobile (≤700px). The bku-* page is already responsive
   (header wraps, KPIs → 2-up, schedule/add grids stack, segment labels
   hide), so the only gap is touch ergonomics: the action buttons sit at
   32–38px. Lift the primary actions to the 44px guideline and the inline
   row-edit button to 40px so they're comfortable to tap on a phone. */
@media(max-width:700px){
  .bku-gbtn,.bku-pbtn{min-height:44px;}
  .bku-ebtn{min-height:40px;}
}

/* ══════════════════════════════════════════════════════════════════
   ACTIVITY LOG — mobile (≤700px). The desktop row is a 5-column grid
   (icon · event · who · when/duration · actions); the stock responsive
   rules progressively HIDE columns on narrow screens — who at ≤880,
   and when/duration + KPI sparklines at ≤560 — so a phone loses those
   features entirely. Reflow each row into two tidy lines instead so
   everything stays visible and tappable: line 1 = icon + event, line 2
   = who · time/duration · status + View. Appended last so it wins. */
@media(max-width:700px){
  /* Two-line grid: icon spans the left; line 1 = event + status/View,
     line 2 = who + time/duration. Everything the desktop row shows stays
     on screen and tappable. */
  .al-row{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"ico ev act" "ico who col";column-gap:10px;row-gap:6px;align-items:center;}
  .al-row .al-it{grid-area:ico;align-self:start;}
  .al-row .al-ev{grid-area:ev;min-width:0;}
  .al-row .al-ev .al-e{white-space:normal;}
  .al-row .al-act{grid-area:act;align-self:start;justify-self:end;}
  .al-row .al-who{grid-area:who;display:flex!important;font-size:12.5px;min-width:0;}
  .al-row .al-col{grid-area:col;display:flex!important;flex-direction:row;align-items:center;gap:8px;justify-self:end;}
  .al-row .al-when,.al-row .al-dur{font-size:11.5px;}
  /* comfortable tap targets for the row action + header icon buttons */
  .al-row .al-view{min-height:40px;}
  .al-ibtn{min-width:40px;min-height:40px;}
  /* keep the KPI trend sparklines visible on mobile too */
  .al-kpi .al-spark{display:block!important;}
}

/* ══════════════════════════════════════════════════════════════════
   SMTP CONFIGURATION — mobile. The page is mostly responsive already
   (form pairs collapse, queue drops a column), but on a phone the
   per-server credential dropdown is capped at 142px and truncates the
   selected credential name ("Company SES" → clipped), and the saved-
   credential subtitle ("· used by N servers") gets cut off. Give the
   dropdown its own full-width line so the whole name shows and it's an
   easy tap target, let the subtitle wrap, and lift button tap sizes.
   Appended last so it wins the cascade. */
@media(max-width:560px){
  .smtp2-lrow{flex-wrap:wrap;}
  .smtp2-asgwrap{margin-left:0;flex-basis:100%;width:100%;}
  .smtp2-asgsel{max-width:none;width:100%;height:44px;justify-content:space-between;}
  .smtp2-asgsel .nm{flex:1;}
  .smtp2-lsub{white-space:normal;}
}
@media(max-width:700px){
  .smtp2-ibtn,.smtp2-rbtn,.smtp2-msel{min-height:40px;}
  .smtp2-bapply,.smtp2-btest,.smtp2-bsave,.smtp2-bdanger{min-height:44px;}
}

/* ══════════════════════════════════════════════════════════════════
   SSL CERTIFICATES — mobile (≤640px). The stock rule collapses the
   certificate table to three columns and HIDES the Server column and
   the auto-renew status toggle, and squeezes the domain to ~67px. On a
   phone that loses real information. Reflow each row into a two-line
   card instead: line 1 = domain + actions, line 2 = server · expiry ·
   auto-renew — so every column stays visible. Appended last to win. */
@media(max-width:640px){
  .ssl-thead{display:none;}
  .ssl-fseg{flex-wrap:wrap;}
  .ssl-row{
    grid-template-columns:1fr auto auto!important;
    grid-template-areas:"dom dom act" "srv exp tgl"!important;
    gap:7px 10px;align-items:center;
  }
  .ssl-row>:nth-child(1){grid-area:dom;min-width:0;}
  .ssl-row>:nth-child(2){grid-area:srv;display:block!important;font-size:12px;color:var(--t3);align-self:center;}
  .ssl-row>:nth-child(3){grid-area:exp;}
  .ssl-row>:nth-child(4){grid-area:tgl;display:inline-flex!important;justify-self:end;}
  .ssl-row>:nth-child(5){grid-area:act;justify-self:end;}
}
@media(max-width:700px){
  .ssl-tblmore,.ssl-nrbtn,.ssl-nmore{min-width:40px;min-height:40px;}
  .ssl-btn{min-height:40px;}
}

/* ══════════════════════════════════════════════════════════════════
   MONITORING — mobile (≤640px). The uptime table drops the response-
   time and history columns and clips the Check button on a phone.
   Reflow each monitor into a card so all six fields stay visible:
   line 1 = site + status + Check, line 2 = uptime bar, line 3 =
   response time + history sparkline. Appended last to win. */
@media(max-width:640px){
  .mn-row{
    grid-template-columns:1fr auto auto!important;
    grid-template-areas:"site st ck" "up up up" "rsp rsp hist"!important;
    gap:8px 10px;align-items:center;
  }
  .mn-row>:nth-child(1){grid-area:site;min-width:0;}
  .mn-row>:nth-child(2){grid-area:st;justify-self:start;}
  .mn-row>:nth-child(3){grid-area:rsp;display:block!important;}
  .mn-row>:nth-child(4){grid-area:up;}
  .mn-row>:nth-child(5){grid-area:hist;display:block!important;justify-self:end;}
  .mn-row>:nth-child(6){grid-area:ck;justify-self:end;}
}
@media(max-width:700px){
  .mn-ck,.mn-cog{min-height:44px;}
  .mn-cog{min-width:44px;}
  .mn-refresh{min-height:44px;}
  .mn-sort,.mn-tools .fw-srch{height:44px;}
}

/* ══════════════════════════════════════════════════════════════════
   WEB TERMINAL — mobile (≤700px). The stock rule hides the "optional"
   terminal toolbar buttons — Search, Zoom −/+, Copy, Download log and
   SFTP upload — leaving only Reconnect/Fullscreen/Clear on a phone.
   Those are real actions, so restore them and let the toolbar wrap to
   a second line (all buttons visible at once, no swipe needed), with
   larger tap targets. Appended after the stock rule so it wins.
   (.tw-sub subtitle and the .tw-seg.opt size readout stay hidden —
   they're descriptive text, not controls.) */
@media(max-width:700px){
  .tw-tbtn.opt{display:flex;}
  .tw-tbar{flex-wrap:wrap;row-gap:4px;}
  .tw-thost{min-width:0;}
  .tw-tools{flex:1 1 100%;margin-left:0;flex-wrap:wrap;justify-content:flex-end;}
  .tw-tbtn{min-width:34px;height:34px;}
}
/* ≤480: one row. Nine buttons and three dividers need ~338px and a 390px
   phone gives the toolbar 323, so the last button (Clear) wrapped onto a
   line of its own. The dividers go and the buttons share the row. */
@media(max-width:480px){
  .tw-tools{flex-wrap:nowrap;}
  .tw-tdiv{display:none;}
  .tw-tbtn{flex:1 1 0;min-width:0;height:44px;padding:0;}
}

/* ══════════════════════════════════════════════════════════════════
   BANDWIDTH — mobile. The page is already responsive (KPI cards go to a
   2-col grid, both breakdown tables keep every column, the chart is
   fluid), so nothing is hidden. Only ergonomic tweak: give the time-
   range tabs a 44px-friendly tap height. Scoped to #view-bandwidth so
   the shared .tab class is untouched elsewhere. */
@media(max-width:700px){
  #view-bandwidth .tabs .tab{min-height:40px;display:inline-flex;align-items:center;}
}

/* ══════════════════════════════════════════════════════════════════
   FILE MANAGER — mobile. The details drawer (.fm-info-drawer) parks
   off-screen at right:-400px when closed; because the FM view is its
   containing block, that pushed the page's scroll width to ~769px and
   the whole layout scrolled sideways. Clip the view's horizontal
   overflow so the parked drawer can't create page scroll (clip keeps
   overflow-y visible — no scroll-container side effects). */
#view-filemanager{overflow-x:clip;}

/* The right-click context menu is reached on a phone via each row's ⋮
   button (fmMenu), which anchors the menu to the button and doesn't
   clamp its height — so the lower options (Rename, Details, Trash…)
   fall below the fold and can't be scrolled to (fixed menu). On mobile
   turn every fm-menu into a bottom-anchored, scrollable sheet so every
   action stays reachable, with 44px touch rows. */
@media(max-width:640px){
  .fm-menu{
    position:fixed!important;
    left:10px!important;right:10px!important;top:auto!important;bottom:12px!important;
    width:auto!important;max-width:none!important;min-width:0!important;
    max-height:72vh;overflow-y:auto;overscroll-behavior:contain;
    border-radius:16px;
  }
  .fm-menu a{min-height:44px;}
}

/* The Details panel's open state (.fm-info-drawer.open{right:0}) is being
   overridden by the view's entrance animation (animations outrank normal
   author rules), so the panel never slid in. An !important author rule
   outranks animations — restore the open position so Details works. */
.fm-info-drawer.open{right:0!important;}

/* ══════════════════════════════════════════════════════════════════
   SERVERS — mobile. Already responsive (cards stack to one column, the
   List table scrolls horizontally to reach every column, the per-card
   ⋮ menu fits). Only gap is tap ergonomics: the Manage / ⋮ / view-
   toggle / Add-Server controls sit at 24–39px. Lift them to a
   comfortable size, scoped to #view-servers. */
@media(max-width:700px){
  #view-servers .sc2-acts button,#view-servers .sc2-acts a,#view-servers .sc2-acts .btn{min-height:40px;}
  #view-servers .sc2-more{min-width:40px;min-height:40px;}
  #view-servers .tabs .tab{min-height:38px;display:inline-flex;align-items:center;}
  #view-servers .ph .btn{min-height:40px;}
}

/* DB Cleanup — the whole feature switched off.
   Dims the category rows and blocks pointer events on them, so the card reads
   as unavailable rather than as a list of settings that quietly do nothing.
   The header stays at full strength: "last run" and the status pill are still
   true, and are the reason someone would look at a switched-off card. */
.sdv .card.dbc-off .card-b .trow{opacity:.45;pointer-events:none}
.sdv .card.dbc-off .card-f .btn{opacity:.5;pointer-events:none}

/* ── Reboot flow (ui/reboot.js) — a compact P17 modal around one console ────────
   The console is the Activity Log's event palette (.al-term): slate-900, a dim
   `$ ssh user@ip · STATE` header, key: value lines, green ticks. It stays dark in
   every theme, like every mono surface; the chrome around it is tokenised. */
.nw-card.nwm.rbm{max-width:460px;padding:16px 18px;border-radius:16px;}
.rbm .nwm-hd{align-items:center;gap:11px;margin-bottom:12px;}
.rbm .nwm-badge{width:34px;height:34px;border-radius:10px;}
.rbm .nwm-badge svg{width:17px;height:17px;}
.rbm .nwm-title{font-size:15.5px;}
.rbm .nwm-sub{font-size:12px;margin-top:1px;}
.rbm .nwm-x{width:30px;height:30px;margin:0 -4px 0 0;}
.rbm .rb-badge{background:var(--rb);color:var(--r);}
.rbm .rb-badge.run{background:var(--yb);color:var(--y);}
.rbm .rb-badge.run svg{animation:rbSpin 1.6s linear infinite;}
.rbm .rb-badge.ok{background:var(--gb);color:var(--g);}
.rbm .rb-badge.warn{background:var(--yb);color:var(--y);}
.rbm .nwm-foot{gap:8px;padding-top:12px;margin-top:12px;}
.rbm .nwm-foot .nw-bp,.rbm .nwm-foot .nw-bg{height:36px;padding:0 14px;border-radius:9px;font-size:13px;white-space:nowrap;flex-shrink:0;}
.rbm .nw-bp svg{width:14px;height:14px;}
.rbm .nw-bp.rb-go{background:var(--r);}
.rbm .nw-bp.rb-go:hover:not(:disabled){background:#b91c1c;}
.rbm .nw-bp.rb-go.loading svg{animation:rbSpin 1s linear infinite;}
.rb-term{background:#0f172a;color:#cbd5e1;border:1px solid rgba(148,163,184,.14);border-radius:10px;overflow:hidden;font:12px/1.7 ui-monospace,'JetBrains Mono',monospace;}
.rb-term .rb-hd{display:flex;align-items:center;gap:6px;padding:9px 12px 3px;color:#64748b;white-space:nowrap;}
.rb-term .rb-cmd{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.rb-term .rb-st{display:inline-flex;align-items:center;gap:5px;font-weight:700;flex-shrink:0;}
.rb-term .rb-st::before{content:'·';color:#64748b;font-weight:400;margin-right:1px;}
.rb-term .rb-st .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.rb-term .rb-st.live .dot{animation:rbPulse 1.2s ease-in-out infinite;}
.rb-term .rb-st.g{color:#34d399;}
.rb-term .rb-st.y{color:#fbbf24;}
.rb-term .rb-st.r{color:#f87171;}
.rb-term .rb-el{margin-left:auto;padding-left:8px;color:#94a3b8;flex-shrink:0;}
.rb-term .rb-lines{min-height:132px;max-height:220px;overflow-y:auto;padding:2px 0 10px;outline:none;}
.rb-term .rb-lines:focus-visible{box-shadow:inset 0 0 0 2px #60a5fa;}
.rb-term .rb-lines::-webkit-scrollbar{width:8px;}
.rb-term .rb-lines::-webkit-scrollbar-thumb{background:#1e293b;border-radius:8px;}
.rb-term .rb-ln{display:flex;gap:8px;padding:0 12px;align-items:baseline;}
.rb-term .rb-g{width:10px;flex-shrink:0;text-align:center;font-weight:700;color:#64748b;}
.rb-term .rb-x{min-width:0;flex:1;white-space:pre-wrap;word-break:break-word;}
.rb-term .rb-k{color:#64748b;}
.rb-term .rb-w{color:#94a3b8;flex-shrink:0;}
.rb-term .k-cmd .rb-x,.rb-term .k-kv .rb-x,.rb-term .k-step .rb-x{color:#e2e8f0;}
.rb-term .k-out .rb-x,.rb-term .k-log .rb-x{color:#94a3b8;}
.rb-term .k-log .rb-x{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rb-term .k-ok .rb-g,.rb-term .k-done .rb-g,.rb-term .k-done .rb-x{color:#34d399;}
.rb-term .k-done .rb-x{font-weight:600;}
.rb-term .k-warn .rb-g,.rb-term .k-warn .rb-x{color:#fbbf24;}
.rb-term .k-err .rb-g,.rb-term .k-err .rb-x{color:#f87171;}
.rb-term .k-drop .rb-g,.rb-term .k-down .rb-g{color:#f87171;}
.rb-term .k-drop .rb-x,.rb-term .k-down .rb-x{color:#e2e8f0;}
.rb-term .k-info .rb-x{color:#64748b;}
.rb-term .k-wait .rb-x{color:#94a3b8;}
.rb-term .k-wait.active .rb-x{color:#e2e8f0;}
.rb-term .k-step .rb-g{color:#60a5fa;}
.rb-term .rb-spin{display:inline-block;width:8px;height:8px;border:2px solid #334155;border-top-color:#60a5fa;border-radius:50%;animation:rbSpin .8s linear infinite;vertical-align:-1px;}
@keyframes rbSpin{to{transform:rotate(360deg);}}
@keyframes rbPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.rbm .rb-badge.run svg,.rb-term .rb-spin,.rb-term .rb-st.live .dot,.rbm .nw-bp.rb-go.loading svg{animation:none;}}
@media(max-width:560px){.nw-card.nwm.rbm{padding:14px;}.rbm .nwm-x{width:44px;height:44px;margin:-8px -10px -8px 0;}.rbm .nwm-foot .nw-bp,.rbm .nwm-foot .nw-bg{height:44px;padding:0 12px;white-space:nowrap;}.rb-term{font-size:11.5px;}.rb-term .rb-hd{padding:8px 10px 3px;}.rb-term .rb-ln{padding:0 10px;}.rb-term .rb-lines{max-height:200px;}}

/* Reboot-required banner on the server page, in the same voice */
.so-rbanner{display:flex;align-items:center;gap:14px;background:var(--rb);border:1px solid var(--rbd);border-radius:14px;padding:13px 16px;margin:0 0 14px;}
.so-rbanner .ic{width:40px;height:40px;border-radius:11px;background:var(--r);color:#fff;display:grid;place-items:center;flex-shrink:0;}
.so-rbanner .ic svg{width:19px;height:19px;}
.so-rbanner .tx{flex:1;min-width:0;}
.so-rbanner .t{font-size:13.5px;font-weight:700;color:var(--r);}
.so-rbanner .s{font-size:12px;color:var(--t2);margin-top:2px;line-height:1.45;}
.so-rbanner button{height:38px;padding:0 16px;border-radius:10px;border:none;background:var(--r);color:#fff;font:700 13px/1 inherit;font-family:inherit;display:inline-flex;align-items:center;gap:7px;cursor:pointer;flex-shrink:0;}
.so-rbanner button:hover{background:#b91c1c;}
.so-rbanner button:focus-visible{outline:2px solid var(--r);outline-offset:2px;}
.so-rbanner button svg{width:14px;height:14px;}
@media(max-width:560px){.so-rbanner{flex-wrap:wrap;}.so-rbanner button{width:100%;justify-content:center;height:44px;}}
/* P21 — the server page's update banner (#so-upd-banner, pages/server-updates.js):
   the reboot banner's voice in three tones — red (r), yellow (y), neutral (n). */
.so-rbanner.su-banner .acts{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.so-rbanner.su-banner .acts button.sec{background:transparent;color:var(--r);border:1px solid var(--rbd)}
.so-rbanner.su-banner .acts button.sec:hover{background:transparent;border-color:var(--r)}
.so-rbanner.su-banner .acts button.more{background:transparent;color:var(--t2);padding:0 6px;font-weight:600}
.so-rbanner.su-banner .acts button.more:hover{background:transparent;color:var(--t1);text-decoration:underline}
.so-rbanner.su-banner.y{background:var(--yb);border-color:var(--ybd)}
.so-rbanner.su-banner.y .ic{background:var(--y)}
.so-rbanner.su-banner.y .t,.so-rbanner.su-banner.n .t{color:var(--t1)}
.so-rbanner.su-banner.y .acts button.pri,.so-rbanner.su-banner.n .acts button.pri{background:var(--a)}
.so-rbanner.su-banner.y .acts button.pri:hover,.so-rbanner.su-banner.n .acts button.pri:hover{background:var(--ah)}
.so-rbanner.su-banner.y .acts button.sec,.so-rbanner.su-banner.n .acts button.sec{color:var(--t1);border-color:var(--b2)}
.so-rbanner.su-banner.y .acts button:focus-visible,.so-rbanner.su-banner.n .acts button:focus-visible{outline-color:var(--a)}
.so-rbanner.su-banner.n{background:var(--w);border-color:var(--b1)}
.so-rbanner.su-banner.n .ic{background:var(--ab);color:var(--a)}
@media(max-width:560px){.so-rbanner.su-banner .acts{width:100%}.so-rbanner.su-banner .acts button{flex:1;width:auto}.so-rbanner.su-banner .acts button.more{flex:0 0 auto}}
/* The update window (ui/update-flow.js) is the reboot window: an accent badge until it ends, a neutral READY. */
.rbm .uf-badge{background:var(--ab);color:var(--a)}
.rbm .uf-badge.bad{background:var(--rb);color:var(--r)}
.rb-term .rb-st.n{color:#94a3b8}

/* ── DNS page (pages/dns.js) ────────────────────────────────────────────────
   P10 says the header and the rows must share one grid-template-columns, so
   each of the two tables on this page declares its own. Both selectors carry
   .fw-th/.fw-row as well as the modifier, so they beat the base rule AND the
   980px rule in components.css above without depending on source order. */
.fw-th.dns-zth,.fw-row.dns-zth{grid-template-columns:minmax(0,1.1fr) 132px minmax(0,1.5fr) 22px;}
.fw-th.dns-rth,.fw-row.dns-rth{grid-template-columns:78px minmax(0,1.2fr) minmax(0,1.8fr) 84px 96px 140px;}
.fw-row.dns-zth{cursor:pointer;}
/* The proxy chip. Tokens, not the literal amber it was first written with —
   a hard-coded hex here is invisible against the dark card. */
.fw-type.prox{background:var(--yb);color:var(--y);}
@media(max-width:980px){
  .fw-th.dns-zth,.fw-row.dns-zth{grid-template-columns:minmax(0,1fr) 120px 22px;}
  .fw-th.dns-zth span:nth-child(3),.fw-row.dns-zth span:nth-child(3){display:none;}
  .fw-th.dns-rth,.fw-row.dns-rth{grid-template-columns:70px minmax(0,1fr) minmax(0,1.4fr) 140px;}
  .fw-th.dns-rth span:nth-child(4),.fw-row.dns-rth span:nth-child(4),
  .fw-th.dns-rth span:nth-child(5),.fw-row.dns-rth span:nth-child(5){display:none;}
}
@media(max-width:680px){
  .fw-th.dns-rth,.fw-row.dns-rth{grid-template-columns:64px minmax(0,1fr) 140px;}
  .fw-th.dns-rth span:nth-child(3),.fw-row.dns-rth span:nth-child(3){display:none;}
}

/* ══════════════════════════════════════════════════════════════════
   PANEL-WIDE — phone. Every page and all three site types' tabs were
   walked at 390px on the homelab (24 Oct 2026); these are what was cut
   off, squeezed or out of reach. The server page's own fixes are above
   ("The server page on a phone"). */

/* New-site wizard close: a real button now (it was a <span> — no keyboard
   focus, no name). Same look. */
/* P10 pager controls (Vulnerability, a site's Backups): ‹ n / N › kept together
   at the right, so on a phone they wrap as one group, never "›" alone. */
.fw-pgctl{display:inline-flex;align-items:center;gap:10px;margin-left:auto;}

/* A site's phone backup list: "Show 20 more · N older" under the cards. */
.sd-bk-more{width:100%;min-height:44px;justify-content:center;}

.nw-x{background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--t4);display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;flex-shrink:0;font:inherit;}
.nw-x:hover{color:var(--t1);}
.nw-x:focus-visible{outline:2px solid var(--a);outline-offset:2px;color:var(--t1);}

@media(max-width:820px){
  /* "Measure now" on a site's Disk card is always shown here (no hover),
     and absolutely placed it sat on top of the "site storage" caption. */
  .sdx-kpi-act{position:static;margin-top:10px;min-height:36px;}
}
@media(max-width:768px){
  /* 44px targets (DESIGN.md §4 Mobile). Measured: buttons 26–36px, fields
     38px, filter chips and segments 24–33px. Not inside .sst-f, whose box
     is the 44px target. */
  .btn,.nw-x{min-height:44px;}
  .nw-x{min-width:44px;}
  :is(input.fi,select.fi,select.fsel):not(.sst-f *){min-height:44px;}
  :is(.fw-chip,.al-cat,.plg-tab,.dtab-seg,.dtab){min-height:44px;}
  .dtab{display:inline-flex;align-items:center;}
  /* P10 list pager (Sites, Vulnerability): 30px chevrons, and room to wrap. */
  .fw-pg{min-width:44px;height:44px;}
  .fw-foot{flex-wrap:wrap;}
}
@media(max-width:680px){
  /* Sites: the filter chips got whatever the Labels menu, view switch and
     search left over (159px) and stacked one per line. They take their own
     row and scroll sideways (DESIGN.md: scroll-pill row); search gets a row. */
  .fw-bar .fw-chips{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  .fw-bar .fw-chips::-webkit-scrollbar{display:none;}
  .fw-bar .fw-chip{flex-shrink:0;}
  .fw-bar .fw-srch{flex:1 1 100%;width:auto;}
  /* P10 — drop the lesser columns rather than scroll the action off-screen.
     Servers (List): Name · Status · actions. Sign-ins: address, count, Ban;
     blocked: address, ends, Unblock; events: when, what, account. */
  .srv-table-card .srv-tbl :is(th,td:not([colspan])):nth-child(n+2):nth-child(-n+6),
  .sg-fail-tbl :is(th,td:not([colspan])):nth-child(n+3):nth-child(-n+5),
  .sg-block-tbl :is(th,td:not([colspan])):nth-child(n+2):nth-child(-n+3),
  .sg-ev-tbl :is(th,td:not([colspan])):nth-child(n+4):nth-child(-n+5){display:none;}
  /* They fit now: tables again, full width — not the sideways scroll box
     every .tbl becomes on a phone (responsive.css). */
  :is(.srv-table-card .srv-tbl,.sg-fail-tbl,.sg-block-tbl,.sg-ev-tbl){display:table;width:100%;}
  :is(.srv-table-card .srv-tbl,.sg-fail-tbl,.sg-block-tbl,.sg-ev-tbl) td{white-space:normal;overflow-wrap:anywhere;}
}
@media(max-width:640px){
  /* Monitoring: the search sat beside Sort and Export CSV and was 12px wide. */
  .mn-tools .fw-srch{flex:1 1 100%;}
}
@media(max-width:600px){
  /* A site page's card footer (hint · button) did not wrap: "Save & sync to
     server" ran past the card's edge on Env Vars. */
  .sdv .card-f{flex-wrap:wrap;}
  .sdv .card-f .hint{flex:1 1 180px;min-width:0;}
}
@media(max-width:560px){
  /* Settings → Health: three limits in one row left each box 49px — its
     padding, and the value cut to one digit ("8" for 80). One per row. */
  #view-settings .hl-limits{grid-template-columns:1fr;}
  #view-settings .hl-lim>span{min-width:40px;}   /* the three boxes line up */
}
@media(max-width:480px){
  /* Activity rows: status + View beside the title left the title ~70px
     ("Terminal / opened"). On a small phone they get a line of their own. */
  .al-row{grid-template-areas:"ico ev ev" "ico who col" "ico act act" !important;}
  .al-row .al-act{justify-self:stretch;justify-content:space-between;}
}