/* Layout: panel d'hébergement façon Plesk — barre latérale fixe (domaine + sections), zone de travail en cartes, tuiles d'accès rapide */
[hidden]{display:none!important}
:root{
  --bg:#eef2f4; --surface:#ffffff; --surface-2:#f6f8f9; --line:#d9e1e5; --ink:#15232b; --muted:#5b6c75;
  --side:#13262f; --side-ink:#c9d7dd; --side-hi:#ffffff; --side-line:#24404c;
  --accent:#0d7c86; --accent-ink:#ffffff; --accent-soft:#dff1f2;
  --ok:#1f8a4c; --ok-soft:#e1f3e8; --warn:#b26a00; --warn-soft:#fbefd9; --bad:#c0392b; --bad-soft:#f9e3e0;
  --cf:#f38020; --cf-soft:#fde9d6;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e171c; --surface:#16232a; --surface-2:#1b2b33; --line:#2a3d47; --ink:#e3ecef; --muted:#95a8b1;
  --side:#0a1317; --side-ink:#a9bcc4; --side-hi:#ffffff; --side-line:#1d3039;
  --accent:#3cb4bd; --accent-ink:#06191c; --accent-soft:#163a3e;
  --ok:#4cc27e; --ok-soft:#173527; --warn:#e3a33d; --warn-soft:#3a2c14; --bad:#ef7a6c; --bad-soft:#3d1f1b;
  --cf:#f6a053; --cf-soft:#3d2a17; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0e171c; --surface:#16232a; --surface-2:#1b2b33; --line:#2a3d47; --ink:#e3ecef; --muted:#95a8b1;
  --side:#0a1317; --side-ink:#a9bcc4; --side-hi:#ffffff; --side-line:#1d3039;
  --accent:#3cb4bd; --accent-ink:#06191c; --accent-soft:#163a3e;
  --ok:#4cc27e; --ok-soft:#173527; --warn:#e3a33d; --warn-soft:#3a2c14; --bad:#ef7a6c; --bad-soft:#3d1f1b;
  --cf:#f6a053; --cf-soft:#3d2a17; color-scheme:dark;}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.5}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.1rem} h3{font-size:.95rem;font-family:var(--f-body);font-weight:600}
.mono{font-family:var(--f-mono);font-size:.86em}
.muted{color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100%}
.side{background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;gap:18px;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--side-hi);font-family:var(--f-display);font-size:1.25rem;font-weight:700;padding:0 6px}
.brand-mark{width:28px;height:28px;border-radius:6px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-size:.9rem}
.brand small{display:block;font-family:var(--f-body);font-weight:400;font-size:.72rem;color:var(--side-ink);letter-spacing:.02em}
.dom-pick label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:0 6px}
.dom-pick select{width:100%;margin-top:6px;background:var(--side-line);border:1px solid var(--side-line);color:var(--side-hi);border-radius:6px;padding:8px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:12px 8px 4px;color:var(--side-ink);opacity:.7}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;color:var(--side-ink)}
.nav button:hover{background:var(--side-line);color:var(--side-hi)}
.nav button[aria-current="page"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.nav button:focus-visible{outline:2px solid var(--accent)}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-foot{margin-top:auto;font-size:.75rem;padding:10px 8px;border-top:1px solid var(--side-line)}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:12px 28px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5;flex-wrap:wrap}
.crumbs{font-size:.85rem;color:var(--muted);min-width:0}
.crumbs b{color:var(--ink);font-weight:600}
.top .search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:6px 10px;min-width:0}
.top .search input{border:0;background:transparent;outline:none;width:180px;min-width:0}
.user{display:flex;align-items:center;gap:8px;font-size:.85rem}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600}
.mobile-nav{display:none}
.demo{margin:16px 28px 0;padding:8px 12px;border:1px dashed var(--line);border-radius:6px;font-size:.8rem;color:var(--muted);background:var(--surface)}
.view{padding:20px 28px 48px;display:flex;flex-direction:column;gap:18px;min-width:0}

.head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.head-txt{min-width:0;flex:1 1 320px;display:flex;flex-direction:column;gap:4px}
.head-act{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:4px 9px;font-size:.82rem}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-h .btn{margin-left:auto}
.card-b{padding:16px 18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px}

.api{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.75rem;color:var(--muted)}
.api code{font-family:var(--f-mono);background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:2px 6px;color:var(--ink);overflow-wrap:anywhere}
.src{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:2px 6px;border-radius:4px}
.src.vm{background:var(--accent-soft);color:var(--accent)}
.src.wm{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.src.cf{background:var(--cf-soft);color:var(--cf)}
.src.pm{background:var(--ok-soft);color:var(--ok)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.off{background:var(--surface-2);color:var(--muted)}

.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.meter{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.meter .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.meter .val{font-family:var(--f-display);font-size:1.35rem;font-variant-numeric:tabular-nums}
.meter .val small{font-family:var(--f-body);font-size:.8rem;color:var(--muted);font-weight:400}
.bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.bar i.w{background:var(--warn)}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:12px}
.tile{all:unset;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.tile:hover{border-color:var(--accent)}
.tile:focus-visible{outline:2px solid var(--accent)}
.tile .ti{width:36px;height:36px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.tile.cf .ti{background:var(--cf-soft);color:var(--cf)}
.tile b{display:block;font-weight:600}
.tile span{font-size:.8rem;color:var(--muted)}

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td .mono{overflow-wrap:anywhere}
.qbar{display:flex;align-items:center;gap:8px;min-width:150px}
.qbar .bar{flex:1}
.qbar small{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}

.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .t b{display:block;font-weight:500}
.row .t span{font-size:.8rem;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:.8rem;font-weight:500}
.inp,select.inp{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 10px;min-width:0;width:100%}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.inline .field{flex:1 1 140px}

.sw{position:relative;width:38px;height:22px;flex:none;display:inline-block}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sw span{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .15s;pointer-events:none}
.sw span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw input:checked+span{background:var(--accent)}
.sw input:checked+span::after{transform:translateX(16px)}
.sw input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

.cloud{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.cloud.on{background:var(--cf-soft);border-color:var(--cf);color:var(--cf);font-weight:600}
.cloud svg{width:16px;height:16px}
.tag{font-family:var(--f-mono);font-size:.75rem;font-weight:500;padding:2px 6px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line)}
.tag.tag-gsc{background:var(--ok-soft);color:var(--ok);border-color:transparent} .tag.tag-gsc-parent{background:var(--warn-soft);color:var(--warn);border-color:transparent}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{all:unset;cursor:pointer;padding:9px 14px;border-bottom:2px solid transparent;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected="true"]{border-color:var(--accent);color:var(--ink);font-weight:600}
.tabs button:focus-visible{outline:2px solid var(--accent)}

.check{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.check:last-child{border-bottom:0}
.dot{width:10px;height:10px;border-radius:50%}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}

.ext{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.ext label{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;font-family:var(--f-mono);font-size:.82rem;cursor:pointer}
.ext input{accent-color:var(--accent)}

.fm{display:grid;grid-template-columns:200px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.fm-tree{background:var(--surface-2);border-right:1px solid var(--line);padding:10px;font-family:var(--f-mono);font-size:.8rem;display:flex;flex-direction:column;gap:3px}
.fm-tree div{padding:3px 6px;border-radius:4px}
.fm-tree .on{background:var(--accent-soft);color:var(--accent)}
.code{font-family:var(--f-mono);font-size:.8rem;background:var(--side);color:#cfe3e8;border-radius:6px;padding:12px 14px;overflow-x:auto;white-space:pre;line-height:1.6}

.toast{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:6px;font-size:.88rem;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;z-index:20}
.toast.show{opacity:1;transform:none}
dialog{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0;width:min(460px,calc(100% - 32px))}
dialog::backdrop{background:rgba(10,20,25,.5)}
dialog form{display:flex;flex-direction:column;gap:12px;padding:20px}
dialog .act{display:flex;gap:8px;justify-content:flex-end}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .mobile-nav{display:flex;gap:8px;width:100%}
  .mobile-nav select{flex:1;min-width:0}
  .top,.view{padding-left:16px;padding-right:16px}
  .demo{margin-left:16px;margin-right:16px}
  .top .search{display:none}
  .fm{grid-template-columns:minmax(0,1fr)}
  .fm-tree{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.flash{padding:10px 14px;border-radius:6px;font-size:.9rem;border:1px solid var(--line)}
.flash.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.flash.err{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.flash.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.err-msg{color:var(--bad);font-size:.8rem}
.auth{min-height:100%;display:grid;place-items:center;padding-block:32px;padding-inline:16px;background:var(--side)}
.auth-card{width:min(420px,100%);background:var(--surface);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:16px}
.auth-card .brand{color:var(--ink);padding:0}
.auth-card .brand small{color:var(--muted)}
.check-row{display:flex;gap:8px;align-items:flex-start;font-size:.88rem}
.check-row input{margin-top:3px;accent-color:var(--accent)}
.qr{background:#fff;padding:10px;border-radius:8px;align-self:center;line-height:0}
.secret{font-family:var(--f-mono);font-size:.95rem;letter-spacing:.05em;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:8px;user-select:all}
.code-input{font-family:var(--f-mono);font-size:1.4rem;letter-spacing:.3em;text-align:center}
a{color:var(--accent)}
.nav a{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;color:var(--side-ink)}
.nav a:hover{background:var(--side-line);color:var(--side-hi)}
.nav a[aria-current="page"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.nav a.soon{opacity:.45;cursor:default}
.nav a.soon:hover{background:none;color:var(--side-ink)}
.tile.soon{opacity:.55;cursor:default}
.tile.soon:hover{border-color:var(--line)}
.side-foot form button{all:unset;cursor:pointer;color:var(--side-hi);text-decoration:underline}
.pager{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px}
.inline-form{display:inline}
@media (max-width:860px){
  .side{display:flex;position:static;height:auto;padding:14px 16px}
  .side .nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .side .nav-h{width:100%;padding:6px 4px 2px}
  .user span{display:none}
}

a.btn,a.btn:hover{text-decoration:none}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}

:root{--pside:#3e4c5d;--pside-ink:#e6ecf2;--pside-muted:#a9b6c3;--pside-hi:#56687c;--pside-line:#4b5b6d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--pside:#1f2832;--pside-ink:#dfe6ed;--pside-muted:#93a1ae;--pside-hi:#334253;--pside-line:#2c3846}}
:root[data-theme="dark"]{--pside:#1f2832;--pside-ink:#dfe6ed;--pside-muted:#93a1ae;--pside-hi:#334253;--pside-line:#2c3846}
.side{background:var(--pside);color:var(--pside-ink);padding:0;gap:0}
.side .brand{padding:18px 18px 16px;color:#fff;border-bottom:1px solid var(--pside-line)}
.side .brand small{color:var(--pside-muted)}
.pnav{display:flex;flex-direction:column;padding:8px 0}
.pnav a{display:flex;align-items:center;gap:12px;padding:9px 18px;color:var(--pside-ink);text-decoration:none;font-size:.95rem;border-left:3px solid transparent}
.pnav a:hover{background:rgba(255,255,255,.06)}
.pnav a[aria-current="page"]{background:var(--pside-hi);border-left-color:#fff;color:#fff}
.pnav a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.pnav .ico{width:19px;height:19px;stroke-width:1.6;opacity:.9}
.side .side-foot{border-top:1px solid var(--pside-line);padding:14px 18px;color:var(--pside-muted)}
.side .side-foot form button{color:#fff}
.soon-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.empty-ico{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.empty-ico .ico{width:24px;height:24px}
@media (max-width:860px){.pnav{flex-direction:row;flex-wrap:wrap}.pnav a{border-left:0;padding:8px 12px}}

:root{--pside:#3e4c5d;--pside-ink:#e6ecf2;--pside-muted:#a9b6c3;--pside-hi:#56687c;--pside-line:#4b5b6d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--pside:#1f2832;--pside-ink:#dfe6ed;--pside-muted:#93a1ae;--pside-hi:#334253;--pside-line:#2c3846}}
:root[data-theme="dark"]{--pside:#1f2832;--pside-ink:#dfe6ed;--pside-muted:#93a1ae;--pside-hi:#334253;--pside-line:#2c3846}
.side{background:var(--pside);color:var(--pside-ink);padding:0;gap:0}
.side .brand{padding:18px 18px 16px;color:#fff;border-bottom:1px solid var(--pside-line)}
.side .brand small{color:var(--pside-muted)}
.pnav{display:flex;flex-direction:column;padding:8px 0}
.pnav a{display:flex;align-items:center;gap:12px;padding:9px 18px;color:var(--pside-ink);text-decoration:none;font-size:.95rem;border-left:3px solid transparent}
.pnav a:hover{background:rgba(255,255,255,.06)}
.pnav a[aria-current="page"]{background:var(--pside-hi);border-left-color:#fff;color:#fff}
.pnav a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.pnav .ico{width:19px;height:19px;stroke-width:1.6;opacity:.9}
.side .side-foot{border-top:1px solid var(--pside-line);padding:14px 18px;color:var(--pside-muted)}
.side .side-foot form button{color:#fff}
.soon-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.empty-ico{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.empty-ico .ico{width:24px;height:24px}
@media (max-width:860px){.pnav{flex-direction:row;flex-wrap:wrap}.pnav a{border-left:0;padding:8px 12px}}

.pgroup{display:flex;flex-direction:column}
.pgroup-h{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:7px 18px;margin-top:6px;background:rgba(0,0,0,.14);color:var(--pside-muted);font-size:.8rem;letter-spacing:.01em}
.pgroup-h:hover{color:var(--pside-ink)}
.pgroup-h:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.pgroup-h .ico{width:15px;height:15px;transition:transform .15s}
.pgroup.closed .pgroup-h .ico{transform:rotate(180deg)}
.pgroup.closed .pgroup-b{display:none}
.pgroup-b{display:flex;flex-direction:column;padding:2px 0}
.pnav a span{flex:1;min-width:0}
.pcount{font-style:normal;font-size:.8rem;color:var(--pside-muted);font-variant-numeric:tabular-nums}
.pnav a[aria-current="page"] .pcount{color:#fff}
.side{overflow-y:auto}
@media (prefers-reduced-motion:reduce){.pgroup-h .ico{transition:none}}

.app{grid-template-columns:272px minmax(0,1fr)}
.pnav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){.app{grid-template-columns:minmax(0,1fr)}}

dialog{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0;width:min(440px,calc(100% - 32px))}
dialog::backdrop{background:rgba(10,20,25,.55)}
.dlg-body{display:flex;flex-direction:column;gap:16px;padding:20px}
.dlg-body .act{display:flex;gap:8px;justify-content:flex-end}
.btn.danger-pri{background:var(--bad);border-color:var(--bad);color:#fff}

th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th.sortable[aria-sort="ascending"]::after{content:" ▲";font-size:.65rem}
th.sortable[aria-sort="descending"]::after{content:" ▼";font-size:.65rem}
th.sortable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.temps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:12px}
.temp{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:4px;background:var(--surface-2)}
.temp-g{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.temp-v{font-family:var(--f-display);font-size:1.5rem;font-variant-numeric:tabular-nums}
.temp-v small{font-family:var(--f-body);font-size:.8rem;color:var(--muted)}
.temp-n{font-size:.85rem}
.temp-l{font-size:.72rem;color:var(--muted)}
.temp .bar i{background:var(--ok)}
.temp.warn .bar i{background:var(--warn)}
.temp.bad .bar i{background:var(--bad)}
.temp.bad{border-color:var(--bad)}
.stack{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.stack i{display:block;height:100%}

.impersonate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 28px;background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--line);font-size:.9rem;position:sticky;top:calc(env(safe-area-inset-top,0px) + 53px);z-index:4}
.impersonate span{flex:1;min-width:0}
.impersonate .ico{flex:none}
.impersonate .btn{color:var(--ink)}
@media (max-width:860px){.impersonate{padding:10px 16px;position:static}}

.wd-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wd-toolbar .btn:disabled{opacity:.5;cursor:not-allowed}
.wd-search{margin-left:auto;position:relative;min-width:0;flex:0 1 260px}
.wd-search .inp{padding-right:32px}
.wd-search .ico{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px}
.wd-list{display:flex;flex-direction:column;border-top:2px solid var(--accent)}
.wd-row{display:grid;grid-template-columns:28px minmax(0,2.4fr) 110px 130px 140px 140px;align-items:center;gap:12px;padding:12px 14px}
.wd-headrow{font-size:.85rem;color:var(--muted);border-bottom:1px solid var(--line);padding-block:10px}
.wd-item{border-bottom:1px solid var(--line);background:var(--surface)}
.wd-item.open{border:1px solid var(--line);border-top:0;margin-bottom:6px}
.wd-main{cursor:pointer}
.wd-main:hover{background:var(--surface-2)}
.wd-item.open .wd-main{background:var(--surface-2)}
.wd-main:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wd-chev{width:16px;height:16px;color:var(--muted);transform:rotate(180deg);transition:transform .15s}
.wd-item.open .wd-chev{transform:none}
.wd-name{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.wd-name b{font-size:1rem;overflow-wrap:anywhere}
.wd-fav{width:22px;height:22px;border-radius:50%;background:var(--warn-soft);color:var(--warn);font-size:.6rem;font-weight:700;display:grid;place-items:center;flex:none}
.wd-icons{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.wd-icons a,.wd-more summary{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;color:var(--muted);cursor:pointer;list-style:none}
.wd-icons a:hover,.wd-more summary:hover{background:var(--surface);color:var(--accent)}
.wd-icons .ico{width:18px;height:18px}
.wd-more{position:relative}
.wd-more summary::-webkit-details-marker{display:none}
.wd-menu{position:absolute;right:0;top:34px;z-index:6;min-width:250px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);display:flex;flex-direction:column;padding:6px}
.wd-menu a,.wd-menu button{all:unset;cursor:pointer;padding:8px 10px;border-radius:5px;font-size:.88rem;color:var(--ink)}
.wd-menu a:hover,.wd-menu button:hover{background:var(--surface-2)}
.wd-menu .danger{color:var(--bad)}
.wd-menu form{display:flex;flex-direction:column}
.wd-body{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;padding:18px 24px 0 56px}
.wd-side{display:flex;flex-direction:column;gap:10px}
.wd-preview{aspect-ratio:4/3;max-width:100%;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;align-content:center;gap:8px;color:var(--muted);font-size:.8rem;background:var(--surface-2)}
.wd-preview .ico{width:56px;height:56px;stroke-width:1.2;opacity:.6}
.wd-stats{border:1px solid var(--line);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.wd-stats h3{font-family:var(--f-display);font-size:1rem}
.wd-kv{display:flex;justify-content:space-between;gap:10px;font-size:.88rem}
.wd-kv span{color:var(--muted)}
.wd-main-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.wd-tab{display:flex;flex-direction:column;gap:12px}
.wd-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px}
.wd-app{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:.92rem}
.wd-app-i{width:42px;height:42px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;background:var(--surface);color:var(--accent);flex:none}
.wd-app-i .ico{width:22px;height:22px}
.wd-app:hover .wd-app-i{border-color:var(--accent)}
.wd-app.soon{opacity:.5;cursor:default}
.wd-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 22px;padding:12px 0 14px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.wd-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 16px;text-align:center}
dialog.panel{margin:0 auto 0 0;height:100%;max-height:100%;width:min(560px,100%);border:0;border-radius:0 10px 10px 0;padding:0}
dialog.panel[open]{animation:slidein .18s ease-out}
@keyframes slidein{from{transform:translateX(-24px);opacity:.6}to{transform:none;opacity:1}}
.panel-body{display:flex;flex-direction:column;gap:16px;padding:22px 24px;min-height:100%}
.panel-h{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}
.panel-h h2{font-size:1.4rem;font-family:var(--f-body);font-weight:500}
.panel-h .x{all:unset;cursor:pointer;font-size:1.6rem;line-height:1;color:var(--muted);padding:0 6px}
.panel-f{margin-top:auto;display:flex;gap:8px;border-top:1px solid var(--line);padding-top:14px}
@media (max-width:980px){.wd-row{grid-template-columns:24px minmax(0,1fr) auto auto}.wd-row>span:nth-child(4),.wd-row>span:nth-child(5){display:none}.wd-body{grid-template-columns:minmax(0,1fr);padding:14px}.wd-search{margin-left:0;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){dialog.panel[open]{animation:none}.wd-chev{transition:none}}

.tasks{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100% - 40px))}
.task{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:.88rem}
.task div{display:flex;flex-direction:column;gap:2px;min-width:0}
.task span:not(.task-dot){color:var(--muted);overflow-wrap:anywhere}
.task.ok{border-left-color:var(--ok)}
.task.bad{border-left-color:var(--bad)}
.task-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:5px;flex:none}
.task.run .task-dot{animation:pulse 1s ease-in-out infinite}
.task.ok .task-dot{background:var(--ok)}
.task.bad .task-dot{background:var(--bad)}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.task.run .task-dot{animation:none}}

:root,:root[data-theme="light"]{--pside:#1f2832;--pside-ink:#dfe6ed;--pside-muted:#93a1ae;--pside-hi:#334253;--pside-line:#2c3846;--side:#1f2832;color-scheme:light}

.bk{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
.bk-snaps{display:flex;flex-direction:column;max-height:560px;overflow:auto;padding:6px}
.bk-snap{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:6px;border-left:3px solid transparent}
.bk-snap:hover{background:var(--surface-2)}
.bk-snap[aria-selected="true"]{background:var(--accent-soft);border-left-color:var(--accent)}
.bk-snap b{font-weight:600;font-size:.9rem}
.bk-snap span{font-size:.78rem;color:var(--muted)}
.bk-snap:focus-visible{outline:2px solid var(--accent)}
.bk-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.bk-full{margin-left:auto}
.bk-crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;font-size:.9rem}
.bk-crumbs button{all:unset;cursor:pointer;color:var(--accent);padding:2px 4px;border-radius:4px}
.bk-crumbs button:hover{background:var(--surface-2)}
.bk-crumbs span{color:var(--muted)}
.bk-link{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
.bk-link:hover{text-decoration:underline}
.bk-link:focus-visible{outline:2px solid var(--accent)}
.bk-file{display:inline-flex;align-items:center;gap:8px}
.bk-table .ico{width:18px;height:18px;color:var(--warn)}
.bk-table .bk-f{color:var(--muted)}
.bk-note{margin:0;padding:10px 16px 14px;font-size:.8rem}
.bk-table .bk-a{color:var(--accent)}
.bk-day td{background:var(--surface-2);font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding-top:7px;padding-bottom:7px}
@media (max-width:900px){.bk{grid-template-columns:minmax(0,1fr)}.bk-snaps{max-height:220px}.bk-full{margin-left:0}}

.tabs a{all:unset;cursor:pointer;padding:9px 14px;border-bottom:2px solid transparent;color:var(--muted);white-space:nowrap}
.tabs a[aria-selected="true"]{border-color:var(--ink);color:var(--ink);font-weight:600}
.tabs a:focus-visible{outline:2px solid var(--accent)}
.mail-table td{vertical-align:middle}
.mail-contact{display:inline-flex;align-items:center;gap:6px;color:var(--accent)}
.mail-contact .ico{width:15px;height:15px}
.mail-actions{display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap;font-size:.85rem}
.mail-actions form{display:inline}
.mail-actions .ico{width:15px;height:15px}
.bk-link.soon{opacity:.45;cursor:default;color:var(--muted)}
.bk-link.soon:hover{text-decoration:none}
.dns-table td,.dns-table th{padding:6px 8px;font-size:.82rem}

/* Réglages d'hébergement (panneau latéral) */
dialog.panel.wide{width:min(660px,100%)}
#hs-content{display:flex;flex-direction:column;gap:18px}
.hs-sec{display:flex;flex-direction:column;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.hs-sec:last-child{border-bottom:0;padding-bottom:0}
.hs-sec h3{font-family:var(--f-display);font-size:1.02rem}
.hs-label{font-size:.8rem;font-weight:500}
.hs-help{font-size:.78rem;color:var(--muted);line-height:1.45}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;overflow:hidden;align-self:flex-start;max-width:100%}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:7px 12px;font-size:.86rem;border-right:1px solid var(--line);overflow-wrap:anywhere}
.seg label:last-child span{border-right:0}
.seg input:checked+span{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}
.hs-prefix{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:6px;overflow:hidden;min-width:0}
.hs-prefix>span{background:var(--surface-2);color:var(--muted);padding:7px 8px;font-size:.8rem;display:flex;align-items:center;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl}
.hs-prefix .inp{border:0;border-radius:0}
.hs-pass summary{cursor:pointer;font-size:.88rem;color:var(--accent)}
button.wd-app{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.check-row input:disabled+span{opacity:.6}

/* Bases de données (cartes façon Plesk) */
.db-row{display:grid;grid-template-columns:28px minmax(0,1.3fr) minmax(0,1.7fr) auto;align-items:center;gap:12px;padding:12px 14px}
.db-ico{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.db-ico .ico{width:18px;height:18px}
.db-rel{color:var(--muted);font-size:.92rem;overflow-wrap:anywhere}
.db-rel a{color:var(--ink)}
.db-icon-btn{all:unset;display:grid;place-items:center;width:30px;height:30px;border-radius:6px;color:var(--muted);cursor:pointer}
.db-icon-btn:hover{background:var(--surface);color:var(--accent)}
.db-icon-btn:focus-visible{outline:2px solid var(--accent)}
.db-icon-btn .ico{width:18px;height:18px}
.wd-icons form{display:contents}
.db-body{padding:18px 24px 0 56px;display:flex;flex-direction:column;gap:16px}
.db-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px 18px}
.db-tiles form{display:contents}
.db-tiles .wd-app{padding:6px;border-radius:8px}
.db-tiles .wd-app:hover{background:var(--surface-2)}
@media (max-width:980px){.db-row{grid-template-columns:24px minmax(0,1fr) auto}.db-rel{display:none}.db-body{padding:14px}}

/* Performances du site */
.perf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.perf-tile{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer;font:inherit;text-align:left}
.perf-tile:hover{border-color:var(--accent)}
.perf-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.perf-tile .wd-app-i{width:48px;height:48px}
.perf-tile b{font-size:1.05rem}
.perf-tile span.muted{font-size:.85rem;line-height:1.45}
.perf-tile .perf-go{margin-top:auto;color:var(--accent);font-size:.88rem;display:flex;align-items:center;gap:6px}

/* Paramètres PHP */
.php-form{display:flex;flex-direction:column;gap:16px}
.php-ph{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:.9rem;overflow-wrap:anywhere}
.php-support{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-top:6px;border-top:1px solid var(--line)}
.php-info{display:inline-flex;align-items:center;gap:6px;font-size:.9rem}
.php-info .ico{width:14px;height:14px}
.php-h{font-family:var(--f-display);font-size:1.2rem}
.php-row{display:grid;grid-template-columns:220px minmax(0,460px);gap:6px 20px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.php-row:last-child{border-bottom:0}
.php-row>label{padding-top:8px;font-size:.88rem;overflow-wrap:anywhere}
.php-val{display:flex;flex-direction:column;gap:6px;min-width:0}
.php-row.php-off{opacity:.45}
.php-actions{display:flex;gap:8px;position:sticky;bottom:0;background:var(--bg);padding:12px 0;border-top:1px solid var(--line)}
@media (max-width:760px){.php-row{grid-template-columns:minmax(0,1fr)}.php-row>label{padding-top:0}}

/* Réglages mail du domaine */
.ms-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ms-dom{width:auto;font-size:1.1rem;color:var(--accent);font-weight:500}
.ms-dom-txt{color:var(--accent)}
.ms-radios{gap:8px}
.ms-radio{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.ms-radio input{margin-top:4px;accent-color:var(--accent)}
.ms-radio>span{display:flex;flex-direction:column;gap:2px}
.ms-radio b{font-weight:500}
.ms-radios textarea,.ms-radios input.inp{margin-left:24px;width:calc(100% - 24px)}
.ms-radios .inp:disabled{opacity:.55}

/* Page d'une adresse mail */
.mb-suffix>span{direction:ltr;max-width:60%}
.al-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.al-row .hs-prefix{flex:1 1 320px;max-width:520px}
.req{color:var(--bad)}
.bk-link.danger{color:var(--bad)}

/* Certificats SSL/TLS */
.ssl-state{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:8px}
.ssl-state .ico{width:28px;height:28px;flex:none}
.ssl-state div{display:flex;flex-direction:column;gap:2px}
.ssl-state b{font-size:1.05rem}
.ssl-state span{font-size:.86rem}
.ssl-state.ok{background:var(--ok-soft);color:var(--ok)}
.ssl-state.warn{background:var(--warn-soft);color:var(--warn)}
.ssl-state.bad{background:var(--bad-soft);color:var(--bad)}
.ssl-hosts{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px}
.ssl-host{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.6fr);gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:.9rem}
.ssl-host:last-child{border-bottom:0}
.ssl-host input{accent-color:var(--accent)}
.ssl-res{font-size:.8rem;overflow-wrap:anywhere}
.ssl-res.ok{color:var(--ok)}
.ssl-res.bad{color:var(--bad)}
.ssl-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.ssl-up input[type=file]{font-size:.8rem}
@media (max-width:760px){.ssl-host{grid-template-columns:auto minmax(0,1fr)}.ssl-host .muted,.ssl-res{grid-column:2}}
.ssl-le-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px}
.le-brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:1.25rem;color:var(--ink);white-space:nowrap}
.le-brand .ico{width:30px;height:30px;color:#f7a823;stroke-width:2.2}
.le-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.le-opts{display:flex;flex-direction:column;gap:14px}
.le-opt{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.le-opt input{margin-top:4px;width:18px;height:18px;accent-color:var(--accent)}
.le-opt>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.le-opt b{font-weight:500}
.le-opt input:disabled+span{opacity:.7}
@media (max-width:760px){.ssl-le-card{grid-template-columns:minmax(0,1fr)}}

/* Délivrabilité */
.dv-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:4px 14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.dv-row:last-child{border-bottom:0}
.dv-row b{overflow-wrap:anywhere;font-weight:500}
.dv-row .hs-help{grid-column:1/-1}
.dv-lists{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:8px}
.dv-list{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.85rem}
.dv-list.clean{background:var(--ok-soft)}.dv-list.clean b{color:var(--ok)}
.dv-list.listed{background:var(--bad-soft)}.dv-list.listed b{color:var(--bad)}
.dv-list.unknown b{color:var(--muted)}
.dv-dom{display:flex;flex-direction:column;padding:10px 0;border-bottom:2px solid var(--line)}
.dv-dom:last-of-type{border-bottom:0}
.dv-progs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.dv-prog{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink)}
.dv-prog:hover{border-color:var(--accent)}
.dv-prog b{color:var(--accent);font-weight:600}
@media (max-width:760px){.dv-row{grid-template-columns:minmax(0,1fr) auto}.dv-row b{grid-column:1/-1}}

/* Gestionnaire de fichiers */
.fm-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fm-bar .btn:disabled{opacity:.45;cursor:not-allowed}
.fm-sep{width:1px;height:26px;background:var(--line)}
.fm-new{position:relative}.fm-new summary{list-style:none}.fm-new summary::-webkit-details-marker{display:none}
.fm-crumbs{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center;font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}
.fm-crumbs button{all:unset;cursor:pointer;color:var(--accent);padding:2px 4px;border-radius:4px}
.fm-crumbs button:hover{background:var(--surface-2)}
.fm-table td{vertical-align:middle}
.fm-name{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.fm-name .ico{width:18px;height:18px;color:var(--muted);flex:none}
.fm-name.dir .ico{color:#e8a33d}
.fm-name:hover{color:var(--accent)}
.fm-drop{position:relative}
.fm-drophint{display:none;position:absolute;inset:0;background:color-mix(in srgb,var(--accent) 12%,transparent);border:2px dashed var(--accent);border-radius:var(--r);align-items:center;justify-content:center;font-weight:600;color:var(--accent);pointer-events:none}
.fm-drop.over .fm-drophint{display:flex}
dialog.fm-editor{width:min(1200px,calc(100% - 24px));height:calc(100% - 40px);max-height:none;padding:0;display:none;flex-direction:column}
dialog.fm-editor[open]{display:flex}
.fm-ed-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.fm-ed-head h2{font-size:.95rem;overflow-wrap:anywhere}
#fm-ed-text{flex:1;width:100%;border:0;resize:none;padding:12px 14px;font-size:.85rem;line-height:1.5;background:var(--surface);color:var(--ink);tab-size:4;outline:none}
.fm-perm{border-collapse:collapse}.fm-perm th,.fm-perm td{padding:6px 10px;text-align:center;font-size:.88rem}.fm-perm td:first-child{text-align:left}

/* Gestionnaire de fichiers v2 (arborescence façon Plesk) */
.fx{display:grid;grid-template-columns:270px minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-height:480px}
.fx-tree{border-right:1px solid var(--line);padding:10px 6px;display:flex;flex-direction:column;gap:2px;overflow:auto;max-height:75vh}
.fx-tree ul{list-style:none;margin:0;padding:0 0 0 14px}
#fx-tree-root{padding-left:0}
.fx-row{display:flex;align-items:center;gap:2px}
.fx-toggle{all:unset;cursor:pointer;width:18px;height:22px;display:grid;place-items:center;color:var(--muted);flex:none}
.fx-toggle .ico{width:12px;height:12px;transform:rotate(90deg);transition:transform .12s}
li.open>.fx-row .fx-toggle .ico{transform:rotate(180deg)}
.fx-node{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;font-size:.92rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.fx-node .ico{width:18px;height:18px;color:#e8a33d;flex:none}
.fx-node:hover{background:var(--surface-2)}
.fx-node.on{background:var(--accent-soft);color:var(--accent);font-weight:500}
.fx-root{font-weight:500}
.fx-empty{font-size:.8rem;padding:2px 26px}
.fx-site{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 5px}
.fx-sys{margin-top:auto;padding:10px 6px 2px;font-size:.8rem;color:var(--muted)}
.fx-main{display:flex;flex-direction:column;gap:10px;padding:12px 14px;min-width:0}
.fx-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fx-bar .btn:disabled,.fx-bar .wd-menu button:disabled{opacity:.45;cursor:not-allowed}
.fx-dd{position:relative}.fx-dd summary{list-style:none}.fx-dd summary::-webkit-details-marker{display:none}
.fx-search{margin-left:auto;flex:0 1 280px}
.fm-name.up .ico{color:#5aa832}
.fm-perm-link{all:unset;cursor:pointer;color:var(--accent);font-size:.82rem;white-space:nowrap}
.fx-rowbtn{all:unset;cursor:pointer;padding:3px 8px;border:1px solid var(--line);border-radius:5px;color:var(--muted)}
.fx-rowbtn:hover{border-color:var(--accent);color:var(--accent)}
.fx-rowmenu{position:absolute;z-index:40;min-width:230px}
.fm-table th,.fm-table td{white-space:nowrap}
.fm-table td:nth-child(2){white-space:normal}
@media (max-width:900px){.fx{grid-template-columns:minmax(0,1fr)}.fx-tree{border-right:0;border-bottom:1px solid var(--line);max-height:220px}.fm-table th:nth-child(6),.fm-table td:nth-child(6),.fm-table th:nth-child(7),.fm-table td:nth-child(7){display:none}}
/* corrections gestionnaire de fichiers v2 */
.fx-tree>.fx-node{flex:none}
select.inp.ms-dom{width:auto;max-width:100%}
.fx-dd summary.btn{width:auto;height:auto;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.fx-dd summary.btn.pri{color:var(--accent-ink)}
.fx-site{white-space:nowrap}
.fm-table td:nth-child(2){min-width:200px}
.fm-crumbs{font-family:var(--f-body);font-size:.9rem}

/* Statut des services (surveillance) */
.st-banner{border-radius:var(--r);padding:14px 18px;font-size:1rem;border:1px solid var(--line)}
.st-banner-ok{background:var(--ok-soft);color:var(--ok)}
.st-banner-ko{background:var(--bad-soft);color:var(--bad)}
.st-list{gap:0;padding-top:4px;padding-bottom:4px}
.st-row{padding:14px 0;border-bottom:1px solid var(--line)}
.st-row:last-child{border-bottom:0}
.st-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.st-name{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-width:0;word-break:break-word}
.st-name a{color:inherit}
.st-meta{display:inline-flex;gap:12px;align-items:center;font-size:.85rem;flex-wrap:wrap}
.st-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted)}
.st-dot.st-up{background:var(--ok)}
.st-dot.st-down{background:var(--bad)}
.st-good{color:var(--ok)}
.st-warn{color:var(--warn)}
.st-bad{color:var(--bad)}
.st-bars{display:flex;gap:2px;height:34px}
.st-bar{flex:1;border-radius:2px;min-width:2px;background:var(--line)}
.st-bar.st-ok{background:var(--ok)}
.st-bar.st-mid{background:var(--warn)}
.st-bar.st-ko{background:var(--bad)}
.st-bar:hover{opacity:.7}
.st-axis{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;color:var(--muted);margin-top:6px}
.st-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) auto auto;gap:8px;align-items:center;margin-top:12px}
@media (max-width:900px){.st-add{grid-template-columns:minmax(0,1fr)}.st-bars .st-bar:nth-child(-n+60){display:none}.st-axis span:first-child{font-size:0}.st-axis span:first-child::after{content:"Il y a 30 jours";font-size:.78rem}}

/* Journaux */
.lg-bar{gap:12px}
.lg-types{display:flex;flex-wrap:wrap;gap:6px 18px}
.lg-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lg-tools .inp{width:auto}
.lg-table td{vertical-align:top;font-size:.85rem}
.lg-msg{word-break:break-word;white-space:pre-wrap;max-width:640px}
.lg-ua{font-size:.75rem;margin-top:2px}
.lg-table tr.lg-err td{background:var(--bad-soft)}
.lg-table tr.lg-warn td{background:var(--warn-soft)}

/* Node.js */
.nd-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.nd-path{display:flex;align-items:center;gap:4px;min-width:0}
.nd-path span{color:var(--muted);font-size:.85rem;white-space:nowrap}
.nd-env-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:6px;margin-bottom:6px}
@media (max-width:980px){.nd-grid{grid-template-columns:minmax(0,1fr)}.nd-path{flex-wrap:wrap}}

/* Outils & paramètres (admin) */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px 28px;margin-top:6px}
.tl-group h2{display:flex;align-items:center;gap:10px;font-size:1rem;font-family:var(--f-body);font-weight:600;margin:0 0 8px}
.tl-ico{width:30px;height:30px;border-radius:8px;background:var(--surface);border:1px solid var(--line);display:inline-grid;place-items:center;flex:none}
.tl-ico .ico{width:18px;height:18px}
.tl-group ul{margin:0;padding-left:52px;display:flex;flex-direction:column;gap:5px;font-size:.9rem}
.tl-group li::marker{color:var(--muted)}
.tl-group a{color:var(--accent)}

/* Cloudflare */
.cf-steps{display:flex;flex-direction:column;gap:14px;max-width:900px}
.cf-steps h2{display:flex;align-items:center;gap:10px;margin:0}
.cf-num{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:inline-grid;place-items:center;font-size:.85rem;flex:none}

/* Champ mot de passe (générer, afficher, copier, force) */
.pwf-row{display:flex;gap:6px;align-items:center}
.pwf-wrap{position:relative;flex:1;min-width:0}
.pwf-wrap .inp{width:100%;padding-right:40px}
.pwf-eye{all:unset;position:absolute;right:8px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--muted);display:inline-grid;place-items:center}
.pwf-eye .ico{width:18px;height:18px}
.pwf-meter{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
.pwf-meter i{display:block;height:100%;width:0;transition:width .2s,background .2s}
.pwf-l1{background:var(--bad)}.pwf-l2{background:#e8590c}.pwf-l3{background:var(--warn)}.pwf-l4{background:#5c940d}.pwf-l5{background:var(--ok)}
.db-name-row{display:flex;gap:6px;align-items:center}.db-name-row .inp:last-child{flex:1;min-width:0}

.ftp-mask{font-family:var(--f-mono);letter-spacing:2px;color:var(--muted);user-select:none}
.bkd-list{display:flex;flex-direction:column}
.bkd-day{border-bottom:1px solid var(--line)}
.bkd-day:last-child{border-bottom:0}
.bkd-day>summary{display:flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;list-style:none}
.bkd-day>summary::-webkit-details-marker{display:none}
.bkd-day>summary::before{content:'▸';color:var(--muted);transition:transform .15s}
.bkd-day[open]>summary::before{transform:rotate(90deg)}
.bkd-day>summary:hover{background:var(--surface-2)}
.bkd-day>summary .ico{width:18px;height:18px;color:var(--accent)}
.bkd-snap{padding:4px 18px 14px 40px;display:flex;flex-direction:column;gap:8px}
.bkd-time{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding-top:8px}
.bkd-sub{border:1px solid var(--line);border-radius:var(--r)}
.bkd-sub>summary{padding:9px 14px;cursor:pointer;color:var(--accent);font-size:.9rem}
.bkd-sub[open]>summary{border-bottom:1px solid var(--line)}
@media (max-width:700px){.bkd-snap{padding-left:18px}}
.bm-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.bm-bar .btn .ico{width:15px;height:15px}
.bm-search{margin-left:auto;min-width:200px}
.bm-info{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 16px;font-size:.8rem;color:var(--muted)}
.bm-foot{border-top:1px solid var(--line)}
.bm-pp button,.bm-pager button{all:unset;cursor:pointer;color:var(--accent);padding:1px 5px;border-radius:4px}
.bm-pp button.on,.bm-pager button.on{color:var(--ink);font-weight:600;background:var(--surface-2)}
.bm-table td{vertical-align:middle}
.bm-row.open td{background:var(--accent-soft)}
.bm-ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff;font-size:.7rem;font-weight:700}
.bm-spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:bm-spin 1s linear infinite}
@keyframes bm-spin{to{transform:rotate(360deg)}}
.bm-running td{color:var(--muted)}
.bm-dl{all:unset;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;border-radius:6px;color:var(--ok)}
.bm-dl:hover{background:var(--surface-2)}
.bm-dl .ico{width:18px;height:18px}
.bm-dl:disabled,.bm-arc:disabled{opacity:.5;cursor:progress}
.bm-detail>td{background:var(--surface-2);padding:14px 16px}
.bm-box{display:flex;flex-direction:column;gap:10px}
.bm-arcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px}
.bm-arc{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.bm-arc:hover{border-color:var(--accent)}
.bm-arc:focus-visible,.bm-dl:focus-visible{outline:2px solid var(--accent)}
.bm-arc>.ico{width:20px;height:20px;color:var(--accent);flex:none}
.bm-arc span{display:flex;flex-direction:column;min-width:0;flex:1}
.bm-arc small{color:var(--muted);font-size:.75rem}
.bm-arc .bm-arc-dl{width:16px;height:16px;color:var(--ok)}
.bm-detail .bkd-sub{background:var(--surface)}
@media (max-width:700px){.bm-hide{display:none}.bm-search{margin-left:0;width:100%}}
.bm-filter{width:auto;min-width:180px}
.bm-ver{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem}
.bm-ver label{font-weight:600}
.bm-ver select{width:auto;max-width:100%}
.bm-more{display:flex;flex-wrap:wrap;gap:6px 18px}
.bm-sub>summary{cursor:pointer;color:var(--accent);font-size:.85rem;padding:2px 0}
.bm-sub[open]{flex-basis:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.bm-boxes{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
.bm-boxes .ico{width:14px;height:14px}
.bm-pick{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;align-items:end}
.bm-pick .field{margin:0;display:flex;flex-direction:column;gap:6px}
.bm-pick label{font-size:.8rem;font-weight:600}
.bm-hebdo{display:flex;flex-wrap:wrap;gap:10px;padding-top:4px;border-top:1px dashed var(--line);margin-top:4px}
@media (max-width:700px){.bm-pick{grid-template-columns:minmax(0,1fr)}}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.ex-card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.ex-card p{margin:0;font-size:.85rem;flex:1}
.ex-card .btn{align-self:flex-start}
.ex-top{display:flex;gap:10px;align-items:center}
.ex-i{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:var(--accent-soft);color:var(--accent);flex:none}
.ex-i .ico{width:20px;height:20px}
.ex-v{font-size:.75rem;margin-left:4px}
.ftp-ic{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;color:var(--accent);vertical-align:middle}
.ftp-ic:hover{background:var(--surface-2)}
.ftp-ic:focus-visible{outline:2px solid var(--accent)}
.ftp-ic .ico{width:15px;height:15px}
.ftp-t{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--surface-2);color:var(--muted)}
.ftp-t.main{background:var(--accent-soft);color:var(--accent)}
.ftp-t .ico{width:14px;height:14px}
.ftp-current{display:flex;align-items:center;gap:10px}
.ftp-current .btn .ico{width:14px;height:14px}
.ftp-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:2px 18px;padding:12px 18px}
.ftp-info>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--line);min-width:0}
.ftp-info>div>span:first-child{min-width:130px;color:var(--muted);font-size:.85rem}
.ftp-info small{font-size:.75rem}
.ftp-url{word-break:break-all;font-size:.85rem}
.ftp-info-dlg{padding:0;grid-template-columns:minmax(0,1fr)}
.ftp-info>div[hidden]{display:none}
.ftp-prefix{max-width:150px}
.ftp-pick{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:4px}
.ftp-pick-bar{padding:8px 10px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ftp-pick-list{display:flex;flex-direction:column;max-height:220px;overflow:auto;padding:4px}
.ftp-pick-item{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;color:var(--accent)}
.ftp-pick-item:hover{background:var(--surface-2)}
.ftp-pick-item:focus-visible{outline:2px solid var(--accent)}
.ftp-pick-item .ico{width:16px;height:16px;color:var(--warn)}
.ftp-pick-list>.muted{padding:6px 8px}
.ftp-pick-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-top:1px solid var(--line);font-size:.85rem}
.ftp-dirbox[hidden]{display:none}
.dbc-user-sel{width:auto;max-width:100%;padding:4px 8px;font-size:.85rem}
.dbc-actions{display:flex;gap:8px;flex-wrap:wrap}
.dbc-ex-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.dbc-ex-h h3{font-family:var(--f-display);font-size:1rem;margin:0}
.dbc-ex-h .btn .ico{width:14px;height:14px}
.mail-icons{display:flex;gap:2px;justify-content:flex-end;align-items:center}
.ml-table td{vertical-align:middle;font-size:.85rem}
.ml-addr{word-break:break-all;max-width:240px}
.ml-detail{color:var(--muted);font-size:.78rem;max-width:360px}
.dg-list{display:flex;flex-direction:column}
.dg-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.dg-row:last-child{border-bottom:0}
.dg-row .pill{min-width:86px;justify-content:center;margin-top:2px}
.dg-row .muted{font-size:.85rem}
.dg-found{font-size:.75rem;color:var(--muted);word-break:break-all;margin-top:2px}
.dg-fix{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;margin-top:6px;border-top:1px solid var(--line)}
.sp-num{width:80px;display:inline-block;margin-left:8px;padding:4px 8px}
.rl-test{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rl-ok{color:var(--ok);font-weight:600}
.rl-bad{color:var(--bad);font-weight:600}
.rl-state{border-top:1px solid var(--line);gap:10px}
.app-tip{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--accent);border-radius:var(--r);background:var(--accent-soft);font-size:.85rem}
.app-tip .btn{align-self:flex-start}
.app-tip-sm{flex-direction:row;align-items:center;flex-wrap:wrap;margin-top:8px;padding:9px 12px}
.app-tip-sm span{flex:1;min-width:220px}
.mo-charts{gap:18px}
.mo-h{font-size:.9rem;margin:0 0 6px}
.mo-chart{width:100%;height:180px;display:block;background:var(--surface-2);border-radius:var(--r)}
.mo-grid{stroke:var(--line);stroke-width:1}
.mo-line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.mo-max{fill:none;stroke:var(--accent);stroke-width:1;opacity:.35;vector-effect:non-scaling-stroke}
.mo-area{fill:var(--accent);opacity:.08}
.mo-limit{stroke:var(--warn);stroke-width:1.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.mo-txt{font-size:11px;fill:var(--muted)}
.mo-limit-txt{fill:var(--warn)}
.mo-range{margin-left:auto}
.mo-range button{all:unset;cursor:pointer;padding:5px 10px;border:1px solid var(--line);font-size:.85rem}
.mo-range button[aria-selected="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.mo-range button:first-child{border-radius:6px 0 0 6px}
.mo-range button:last-child{border-radius:0 6px 6px 0}
.mo-live{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);margin-left:auto}
.mo-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:mo-pulse 1.6s ease-in-out infinite}
@keyframes mo-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.mo-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.mo-grp{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.mo-grp-h{display:flex;justify-content:space-between;gap:8px}
.mo-grp-row{display:grid;grid-template-columns:80px minmax(0,1fr) 90px;align-items:center;gap:8px;font-size:.85rem}
.mo-grp-row b{text-align:right;font-variant-numeric:tabular-nums}
.meter .bar i{transition:width .6s ease}
.mo-block{display:flex;flex-direction:column;gap:6px}
.mo-wrap{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:180px auto;gap:4px 8px}
.mo-y{position:relative;grid-row:1}
.mo-y span{position:absolute;right:0;transform:translateY(-50%);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mo-plot{position:relative;grid-row:1;grid-column:2;background:var(--surface-2);border-radius:6px;overflow:visible;cursor:crosshair}
.mo-plot svg{position:absolute;inset:0;width:100%;height:100%}
.mo-x{grid-column:2;position:relative;height:16px}
.mo-x span{position:absolute;transform:translateX(-50%);font-size:.72rem;color:var(--muted);white-space:nowrap}
.mo-x span:first-child{transform:none}
.mo-x span:last-child{transform:translateX(-100%)}
.mo-cross{position:absolute;top:0;bottom:0;width:1px;background:var(--ink);opacity:.35;pointer-events:none}
.mo-tip{position:absolute;top:6px;margin-left:10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:.78rem;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(0,0,0,.08);pointer-events:none;white-space:nowrap;z-index:2}
.mo-tip.left{transform:translateX(-100%);margin-left:-10px}
.mo-tip span{color:var(--muted)}
.mo-sys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px;padding:18px 20px}
.mo-g{display:flex;flex-direction:column;gap:7px;min-width:0}
.mo-g-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mo-g-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.mo-g-pct{font-family:var(--f-display);font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.mo-g-bar{height:10px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.mo-g-bar i{display:block;height:100%;border-radius:99px;background:var(--ok);transition:width .8s ease,background .3s}
.mo-g-bar i.warn{background:var(--warn)}
.mo-g-bar i.bad{background:var(--bad)}
.mo-g-detail{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.mo-sys-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.mo-sys-foot .mo-live{margin-left:auto}
@media (max-width:900px){.mo-sys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mo-sys{grid-template-columns:minmax(0,1fr)}}
.mo-cap{stroke:var(--bad);stroke-width:2;vector-effect:non-scaling-stroke}
.mo-y .mo-cap-lbl{color:var(--bad);font-weight:600}
.mo-now{fill:var(--accent);stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}
.mo-line,.mo-area,.mo-max{transition:none}
.mo-range{flex-wrap:wrap}
@media (max-width:700px){.mo-range button{padding:4px 7px;font-size:.78rem}}
.st-ok{color:var(--ok)}
.pwf-match{display:block;margin-top:4px}
.wd-preview{position:relative;overflow:hidden}
.wd-shot{position:absolute;inset:0;display:block;background:var(--surface)}
.wd-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.wd-preview-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;margin:6px 0 4px;font-size:.78rem}
.wd-preview-foot a{word-break:break-all}
.wd-child .wd-name{padding-left:22px}
.wd-indent{color:var(--muted);margin-right:2px;font-size:.95rem}
@media (max-width:700px){.wd-child .wd-name{padding-left:10px}}
.wd-icons{justify-content:flex-end}
.wd-size{position:relative;cursor:help;border-bottom:1px dotted var(--muted)}
.wd-size:hover::after,.wd-size:focus::after{content:attr(data-tip);white-space:pre;position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--ink);color:var(--surface);font:500 .78rem/1.5 var(--f-body);padding:7px 10px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.18);pointer-events:none}
.db-check{width:16px;height:16px;margin:0 4px 0 0;flex:none;cursor:pointer} .db-all{margin:0;white-space:nowrap} .db-bulk-list{margin:0;padding:8px 12px 8px 28px;max-height:220px;overflow:auto;background:var(--surface-2);border-radius:6px;font-size:.85rem}
.ip-copy{all:unset;display:inline-grid;place-items:center;width:22px;height:22px;margin-left:4px;vertical-align:middle;border-radius:5px;color:var(--muted);cursor:pointer} .ip-copy .ico{width:14px;height:14px} .ip-copy:hover{background:var(--surface-2);color:var(--accent)} .ip-copy.ok{color:var(--ok)}
.fx-dd summary.btn.pri:hover,.fx-dd[open] summary.btn.pri{background:var(--accent);color:var(--accent-ink);filter:brightness(1.08)}
.ftp-enable{display:inline;margin-left:8px} .ftp-enable .btn{vertical-align:middle}