/* ==========================================================================
   OXIN RTL v3 — server management panel (includes/oxin-vps-panel.tpl)
   ========================================================================== */
.oxv{display:grid;gap:var(--s4)}
.oxv[hidden]{display:none}

/* power bar */
.oxv-power{--led:#94A3B8;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);overflow:hidden;
  padding:var(--s5);border-radius:var(--r-lg);color:#E2E8F0;background:linear-gradient(135deg,#0B1424,#0E1B33 60%,#0B2230);box-shadow:0 24px 50px -30px rgba(11,20,36,.65)}
.oxv-power::after{content:"";position:absolute;inset-block-start:-70%;inset-inline-start:-10%;inline-size:45%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--led) 28%,transparent),transparent 65%);transition:background .4s}
.oxv-power[data-oxv-state="on"]{--led:#34D399}
.oxv-power[data-oxv-state="off"]{--led:#F87171}
.oxv-power[data-oxv-state="suspended"]{--led:#FBBF24}
.oxv-power[data-oxv-state="busy"],.oxv-power[data-oxv-state="loading"]{--led:#60A5FA}
.oxv-power-id{position:relative;z-index:1;display:flex;align-items:center;gap:var(--s4);min-inline-size:0}
.oxv-os{position:relative;display:grid;place-items:center;flex:none;inline-size:60px;block-size:60px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:24px;color:#93C5FD}
.oxv-os img{display:none;inline-size:38px;block-size:38px;object-fit:contain}
.oxv-os.has-logo img{display:block}
.oxv-os.has-logo i{display:none}
.oxv-power-tx{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.oxv-status{display:flex;align-items:center;gap:8px;font-size:var(--fs-400)}
.oxv-status b{color:#fff;font-weight:800}
.oxv-led{inline-size:10px;block-size:10px;border-radius:50%;background:var(--led);box-shadow:0 0 0 4px color-mix(in srgb,var(--led) 22%,transparent),0 0 14px var(--led)}
.oxv-power[data-oxv-state="on"] .oxv-led{animation:ox-led-breathe 2.2s ease-in-out infinite}
.oxv-power[data-oxv-state="busy"] .oxv-led,.oxv-power[data-oxv-state="loading"] .oxv-led{animation:oxv-blink .7s steps(2) infinite}
@keyframes oxv-blink{50%{opacity:.2}}
.oxv-host{font:600 var(--fs-300)/1.6 var(--mono);color:#CBD5E1;text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oxv-power-tx small{font-size:var(--fs-100);color:#94A3B8}
.oxv-power-btns{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
.oxv-pbtn{--c:#60A5FA;display:inline-flex;align-items:center;gap:8px;block-size:44px;padding-inline:16px;border-radius:12px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 14%,transparent);color:#fff;
  font:800 var(--fs-200) var(--font);transition:background .15s,transform .15s,opacity .15s}
.oxv-pbtn i{color:var(--c);font-size:var(--fs-400)}
.oxv-pbtn:hover{background:color-mix(in srgb,var(--c) 26%,transparent);transform:translateY(-1px)}
.oxv-pbtn:disabled{opacity:.45;cursor:progress;transform:none}
.oxv-pbtn[hidden]{display:none}
.oxv-pbtn.is-start{--c:#34D399}.oxv-pbtn.is-restart{--c:#60A5FA}.oxv-pbtn.is-stop{--c:#FBBF24}.oxv-pbtn.is-off{--c:#F87171}
.oxv-msg{position:relative;z-index:1;flex-basis:100%;margin:0;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.07);font-size:var(--fs-200);color:#E2E8F0}
.oxv-msg[hidden]{display:none}
.oxv-msg.is-ok{background:rgba(52,211,153,.14);color:#A7F3D0}
.oxv-msg.is-bad{background:rgba(248,113,113,.14);color:#FECACA}

/* gauges */
.oxv-gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.oxv-g{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);min-inline-size:0}
.oxv-g header{display:flex;align-items:center;gap:8px;align-self:stretch}
.oxv-g header b{flex:1;font-size:var(--fs-300);font-weight:800}
.oxv-g-ic{display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:9px;background:var(--blue-tint);color:var(--blue);font-size:var(--fs-200)}
.oxv-g[data-oxv-g="disk"] .oxv-g-ic{background:var(--teal-tint);color:var(--teal)}
.oxv-g[data-oxv-g="bw"] .oxv-g-ic{background:var(--amber-tint);color:var(--amber)}
.oxv-g[data-oxv-g="net"] .oxv-g-ic{background:color-mix(in srgb,#7C3AED 12%,var(--surface));color:#7C3AED}
.oxv-live-dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--line-2)}
.oxv.has-stats .oxv-live-dot{background:var(--teal);box-shadow:0 0 0 0 var(--teal);animation:oxv-pulse 2s infinite}
@keyframes oxv-pulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.oxv-ring{--p:0;--c:var(--blue);display:grid;place-items:center;inline-size:112px;block-size:112px;border-radius:50%;
  background:radial-gradient(closest-side,var(--surface) 78%,transparent 80% 100%),conic-gradient(var(--c) calc(var(--p) * 1%),var(--surface-2) 0);transition:--p .6s}
.oxv-g[data-oxv-g="disk"] .oxv-ring{--c:var(--teal)}
.oxv-g[data-oxv-g="bw"] .oxv-ring{--c:var(--amber)}
.oxv-ring.is-warn{--c:var(--amber)}.oxv-ring.is-bad{--c:var(--red)}
.oxv-ring b{font-size:var(--fs-600);font-weight:900;font-variant-numeric:tabular-nums}
.oxv-g-sub{margin:0;font-size:var(--fs-200);color:var(--ink-3);font-weight:600}
.oxv-spark{inline-size:100%;block-size:48px}
.oxv-split{display:flex;inline-size:100%;block-size:6px;border-radius:6px;overflow:hidden;background:var(--surface-2)}
.oxv-split i{display:block;block-size:100%;transition:inline-size .6s}
.oxv-split i:first-child{background:var(--teal)}.oxv-split i:last-child{background:var(--blue)}
.oxv-split-l{display:flex;justify-content:space-between;gap:8px;inline-size:100%;margin:0;font-size:var(--fs-100);color:var(--ink-3)}
.oxv-split-l i{display:inline-block;inline-size:7px;block-size:7px;margin-inline-end:4px;border-radius:50%}
.oxv-split-l .is-in{background:var(--teal)}.oxv-split-l .is-out{background:var(--blue)}
.oxv-split-l b{color:var(--ink);font-weight:800}
.oxv-net{display:grid;grid-template-columns:1fr 1fr;gap:8px;inline-size:100%;margin-block:6px}
.oxv-net div{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border-radius:12px;background:var(--surface-2)}
.oxv-net small{font-size:var(--fs-100);color:var(--ink-3);font-weight:600}
.oxv-net small i{margin-inline-end:4px;color:#7C3AED}
.oxv-net b{font-size:var(--fs-300);font-weight:800;direction:ltr;white-space:nowrap}

/* info cards */
.oxv-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.oxv-card{padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.ox-body .oxv-card h3{display:flex;align-items:center;gap:10px;margin:0 0 var(--s3);font-size:var(--fs-400);font-weight:800}
.oxv-card h3>i{display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:9px;background:var(--blue-tint);color:var(--blue);font-size:var(--fs-200)}
.oxv-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--surface-2);font-size:var(--fs-100)}
.oxv-count:empty{display:none}
.oxv-ips{display:grid;gap:6px;margin:0 0 var(--s3);padding:0;list-style:none}
.oxv-ips li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:10px;background:var(--surface-2);font:600 var(--fs-300) var(--mono)}
.oxv-copy{display:grid;place-items:center;inline-size:30px;block-size:30px;border:0;border-radius:8px;background:var(--surface);color:var(--ink-3);cursor:pointer}
.oxv-copy:hover{color:var(--blue)}
.oxv-copy.is-copied i::before{content:"\f00c";color:var(--teal)}
.oxv-kv{display:grid;gap:0;margin:0}
.oxv-kv div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-block-start:1px dashed var(--line);font-size:var(--fs-200)}
.oxv-kv dt{font-weight:500;color:var(--ink-3)}
.oxv-kv dd{margin:0;font:600 var(--fs-200) var(--mono);text-align:end}
.oxv-specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.oxv-specs div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.oxv-specs div.is-live{background:var(--blue-tint)}
.oxv-specs span{font-size:var(--fs-100);font-weight:600;color:var(--ink-3)}
.oxv-specs b{font-size:var(--fs-300);font-weight:800}

/* tools */
.oxv-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:var(--s3)}
.oxv-tools button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);text-align:start;cursor:pointer;font-family:var(--font);transition:border-color .15s,transform .15s,box-shadow .15s}
.oxv-tools button:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));transform:translateY(-2px);box-shadow:var(--sh-2)}
.oxv-tools i{display:grid;place-items:center;inline-size:36px;block-size:36px;margin-block-end:4px;border-radius:10px;background:var(--surface-2);color:var(--blue);font-size:var(--fs-400);transition:background .15s,color .15s}
.oxv-tools button:hover i{background:var(--blue);color:#fff}
.oxv-tools b{font-size:var(--fs-300);font-weight:800}
.oxv-tools small{font-size:var(--fs-100);color:var(--ink-3);line-height:1.6}

/* advanced: the module's own panel */
.oxv-adv{margin-block-start:var(--s4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.oxv-adv>summary{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);cursor:pointer;list-style:none}
.oxv-adv>summary::-webkit-details-marker{display:none}
.oxv-adv>summary>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.oxv-adv>summary b{font-weight:800}
.oxv-adv>summary small{font-size:var(--fs-100);color:var(--ink-3)}
.oxv-adv-ic{display:grid;place-items:center;inline-size:38px;block-size:38px;border-radius:11px;background:var(--surface-2);color:var(--ink-2)}
.oxv-adv-c{transition:transform .25s var(--ease);color:var(--ink-3)}
.oxv-adv[open] .oxv-adv-c{transform:rotate(180deg)}
.oxv-adv[open]>summary{border-block-end:1px solid var(--line)}
.oxv-adv.is-plain{border:0;background:none;margin:0}
.oxv-adv.is-plain>summary{display:none}

@media (max-width:1100px){.oxv-gauges{grid-template-columns:repeat(2,minmax(0,1fr))}.oxv-row{grid-template-columns:1fr}}
@media (max-width:560px){.oxv-gauges{grid-template-columns:1fr}.oxv-power-btns{inline-size:100%}.oxv-pbtn{flex:1;justify-content:center}}
@media (prefers-reduced-motion:reduce){.oxv-led,.oxv-live-dot{animation:none!important}}

/* ---- dashboard: "Active Products/Services" as a mini rack ------------- */
.ox-svcpanel{grid-column:1/-1;border-radius:var(--r-lg)!important;overflow:hidden;box-shadow:var(--sh-1);animation:ox-up .5s var(--ease) both}
.ox-svcpanel-hd{position:relative;display:flex;align-items:center;gap:var(--s4);padding:var(--s5);overflow:hidden;isolation:isolate;color:#E2E8F0;
  background:linear-gradient(135deg,#0B1424,#0E1B33 60%,#0B2230)}
.ox-svcpanel-hd::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.45;
  background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/22px 100%;
  -webkit-mask-image:linear-gradient(to left,#000,transparent 75%);mask-image:linear-gradient(to left,#000,transparent 75%)}
.ox-svcpanel-ic{display:grid;place-items:center;flex:none;inline-size:48px;block-size:48px;border-radius:14px;background:linear-gradient(160deg,#1E3A64,#13284A);border:1px solid rgba(255,255,255,.12);color:#7DD3FC;font-size:var(--fs-500)}
.ox-svcpanel-t{flex:1;min-inline-size:0}
.ox-body .ox-svcpanel-t h2{margin:0;font-size:var(--fs-500);font-weight:800;color:#F8FAFC}
.ox-svcpanel-t small{font-size:var(--fs-100);color:#94A3B8}
.ox-svcpanel-count{display:flex;flex-direction:column;align-items:center;padding:6px 14px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);line-height:1.3}
.ox-svcpanel-count b{font-size:var(--fs-600);font-weight:900;color:#fff}
.ox-svcpanel-count small{font-size:10px;color:#94A3B8}
.ox-svcpanel-all{display:inline-flex;align-items:center;gap:8px;block-size:40px;padding-inline:14px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#E2E8F0!important;font-size:var(--fs-200);font-weight:700;text-decoration:none!important;transition:background .15s}
.ox-svcpanel-all:hover{background:rgba(255,255,255,.16)}
.ox-svcpanel-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:10px;padding:var(--s4);max-block-size:460px;overflow:auto;background:var(--surface-2)}
.ox-svcrow{position:relative;display:flex;align-items:center;gap:12px;min-block-size:68px;padding:10px 14px 10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink)!important;text-decoration:none!important;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.ox-svcrow:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 40%,var(--line));box-shadow:var(--sh-2)}
.ox-svcrow-led{position:absolute;inset-block-start:10px;inset-inline-start:10px;inline-size:7px;block-size:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);animation:ox-led-breathe 2.6s ease-in-out infinite}
.ox-svcrow-ic{display:grid;place-items:center;flex:none;inline-size:42px;block-size:42px;border-radius:12px;background:var(--blue-tint);color:var(--blue);font-size:var(--fs-400)}
.ox-svcrow-tx{flex:1;min-inline-size:0;display:flex;flex-direction:column;line-height:1.5;font-size:var(--fs-300)}
.ox-svcrow-tx br{display:none}
.ox-svcrow-tx strong,.ox-svcrow-tx b{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ox-svcrow-tx .text-domain,.ox-svcrow-tx small,.ox-svcrow-tx span{display:block;font:500 var(--fs-200)/1.6 var(--mono);color:var(--ink-3);direction:ltr;text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ox-svcrow-badge{padding:0 8px;border-radius:999px;background:var(--surface-2);font-size:var(--fs-100);font-weight:700;color:var(--ink-2)}
.ox-svcrow-go{display:inline-flex;align-items:center;gap:6px;block-size:34px;padding-inline:12px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-100);font-weight:800;white-space:nowrap;transition:background .15s,color .15s}
.ox-svcrow:hover .ox-svcrow-go{background:var(--blue);color:#fff}
.ox-svcpanel-empty{padding:var(--s5);text-align:center;color:var(--ink-3)}
.ox-svcpanel-ft{padding:var(--s3) var(--s5);border-block-start:1px solid var(--line);background:var(--surface);font-size:var(--fs-200)}
.ox-svcpanel-ft:empty{display:none}
@media (max-width:640px){.ox-svcpanel-hd{flex-wrap:wrap}.ox-svcpanel-all{inline-size:100%;justify-content:center}.ox-svcrow-go b{display:none}}

/* ---- advanced tools: header bar ---------------------------------------- */
.oxv-adv>summary{position:relative;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s5)!important;background:linear-gradient(90deg,var(--surface),var(--surface-2));transition:background .2s}
.oxv-adv>summary:hover{background:var(--surface-2)}
.oxv-adv>summary .oxv-adv-ic{inline-size:44px;block-size:44px;border-radius:12px;background:var(--ink);color:var(--surface);font-size:var(--fs-400)}
.oxv-adv>summary .oxv-adv-tx{display:flex;flex-direction:column;gap:2px;min-inline-size:0;line-height:1.5}
.oxv-adv>summary .oxv-adv-tx b{font-size:var(--fs-400);font-weight:800;color:var(--ink)}
.oxv-adv>summary .oxv-adv-tx small{font-size:var(--fs-200);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oxv-adv>summary .oxv-adv-tog{display:inline-flex;align-items:center;gap:8px;block-size:38px;padding-inline:14px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);
  font-size:var(--fs-200);font-weight:800;color:var(--ink-2);white-space:nowrap}
.oxv-adv>summary .oxv-adv-tog i{transition:transform .25s var(--ease)}
.oxv-adv[open]>summary .oxv-adv-tog i{transform:rotate(180deg)}
.oxv-adv .oxv-adv-tog .is-close{display:none}
.oxv-adv[open] .oxv-adv-tog .is-open{display:none}
.oxv-adv[open] .oxv-adv-tog .is-close{display:inline}
.oxv-adv[open]>summary{border-block-end:1px solid var(--line)}
.oxv-adv .ox-module-area{padding:0;background:var(--surface-2)}
@media (max-width:640px){.oxv-adv>summary{grid-template-columns:auto minmax(0,1fr)}.oxv-adv>summary .oxv-adv-tog{grid-column:1/-1;justify-content:center}}