/* ==========================================================================
   OXIN RTL v3 — "the server room" design layer for WHMCS 9
   Load order (includes/head.tpl): all.min.css → theme.min.css (twenty-one
   structure) → oxin.css (this) → oxin-rtl.css (Bootstrap 4 RTL remap).

   1. fonts & tokens      5. login + loader       9. WHMCS/BS4 restyle
   2. base & bidi         6. corridor (3D)       10. utilities
   3. shell               7. homepage
   4. components          8. dashboard
   Every font-size comes from the --fs scale. No external hosts: fonts are
   local, icons are WHMCS's bundled Font Awesome.
   ========================================================================== */

/* --------------------------------------------------------------- 1. fonts */
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn/Vazirmatn-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --font:'Vazirmatn',Tahoma,'Segoe UI',sans-serif;
  --mono:ui-monospace,'Cascadia Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
  /* strict type scale — 12 steps; display steps switch at breakpoints only */
  --fs-100:.75rem;--fs-200:.8125rem;--fs-300:.875rem;--fs-400:1rem;--fs-500:1.125rem;--fs-600:1.25rem;
  --fs-700:1.5rem;--fs-800:1.875rem;--fs-900:2.25rem;--fs-1000:3rem;--fs-1100:3.75rem;--fs-1200:4.5rem;
  --lh-display:1.22;--lh-tight:1.35;--lh-snug:1.6;--lh-body:1.85;

  --bg:#F5F7FA;--surface:#FFFFFF;--surface-2:#EEF2F7;
  --ink:#0E1726;--ink-2:#3A4556;--ink-3:#5E6A7C;
  --line:#E2E7EE;--line-2:#CDD5E0;
  --blue:#1463D8;--blue-hover:#0F52B8;--blue-tint:#EAF2FD;--on-blue:#FFFFFF;
  --teal:#0E9384;--teal-ink:#0B7366;--teal-tint:#E6F6F3;
  --amber:#C2690B;--amber-ink:#93470A;--amber-tint:#FEF5EB;
  --red:#C8372D;--red-ink:#A42A21;--red-tint:#FEF1F0;
  --ring:#1463D8;--scrim:rgba(14,23,38,.42);--glass:rgba(255,255,255,.86);
  --sh-1:0 1px 2px rgba(14,23,38,.05);--sh-2:0 10px 30px -12px rgba(14,23,38,.18);
  --sh-pop:0 24px 60px -18px rgba(14,23,38,.3),0 0 0 1px rgba(14,23,38,.05);
  --term-bg:#0B1220;--term-ink:#B7F0D2;--term-dim:#6E8BA3;
  --stage:#E9EEF4;--rack-frame:#D3DBE5;--rack-slot:#F6F8FB;--rack-edge:#C9D3DF;--rack-shade:rgba(14,23,38,.07);
  --floor:#EDF1F6;--floor-line:#D7DFE9;--floor-perf:#E3E9F0;--ceil:#F3F6F9;--light:#FFFFFF;--wall:#DCE3EC;--fog:#F2F5F9;
  --tray:#CBD5E1;--tray-gap:#E2E8F0;--led-a:#16A34A;--led-b:#2563EB;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;
  --r-xs:4px;--r-sm:8px;--r:12px;--r-lg:16px;--r-pill:999px;
  --t-fast:140ms;--t:200ms;--t-slow:320ms;--ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1320px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#0A0F17;--surface:#111823;--surface-2:#0E141E;--ink:#E6EBF2;--ink-2:#AAB4C3;--ink-3:#8692A4;--line:#1F2937;--line-2:#2C3949;
  --blue:#4C8DF6;--blue-hover:#6AA1F8;--blue-tint:#12233D;--on-blue:#06101F;--teal:#2BC3B1;--teal-ink:#4FD6C6;--teal-tint:#0D2A28;
  --amber:#F2A33A;--amber-ink:#F7BA66;--amber-tint:#2D1F0C;--red:#F26B61;--red-ink:#F7918A;--red-tint:#2E1513;--ring:#6AA1F8;
  --scrim:rgba(0,0,0,.6);--glass:rgba(17,24,35,.84);--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 10px 30px -12px rgba(0,0,0,.6);
  --sh-pop:0 24px 60px -18px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
  --stage:#0C121B;--rack-frame:#252F3E;--rack-slot:#141B26;--rack-edge:#2A3646;--rack-shade:rgba(0,0,0,.35);
  --floor:#0D131B;--floor-line:#1B2532;--floor-perf:#121A25;--ceil:#0F151E;--light:#35445A;--wall:#121925;--fog:#0A0F17;
  --tray:#243041;--tray-gap:#151D29;--led-a:#34D399;--led-b:#60A5FA}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#0A0F17;--surface:#111823;--surface-2:#0E141E;--ink:#E6EBF2;--ink-2:#AAB4C3;--ink-3:#8692A4;--line:#1F2937;--line-2:#2C3949;
  --blue:#4C8DF6;--blue-hover:#6AA1F8;--blue-tint:#12233D;--on-blue:#06101F;--teal:#2BC3B1;--teal-ink:#4FD6C6;--teal-tint:#0D2A28;
  --amber:#F2A33A;--amber-ink:#F7BA66;--amber-tint:#2D1F0C;--red:#F26B61;--red-ink:#F7918A;--red-tint:#2E1513;--ring:#6AA1F8;
  --scrim:rgba(0,0,0,.6);--glass:rgba(17,24,35,.84);--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 10px 30px -12px rgba(0,0,0,.6);
  --sh-pop:0 24px 60px -18px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
  --stage:#0C121B;--rack-frame:#252F3E;--rack-slot:#141B26;--rack-edge:#2A3646;--rack-shade:rgba(0,0,0,.35);
  --floor:#0D131B;--floor-line:#1B2532;--floor-perf:#121A25;--ceil:#0F151E;--light:#35445A;--wall:#121925;--fog:#0A0F17;
  --tray:#243041;--tray-gap:#151D29;--led-a:#34D399;--led-b:#60A5FA}

/* ------------------------------------------------------------- 2. base */
html{-webkit-text-size-adjust:100%}
body.ox-body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-400);line-height:var(--lh-body);
  direction:rtl;text-align:start;letter-spacing:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.ox-body,.ox-body button,.ox-body input,.ox-body select,.ox-body textarea,.ox-body .btn,.ox-body .form-control,
.ox-body .tooltip,.ox-body .popover,.ox-body .dropdown-menu,.ox-body .modal{font-family:var(--font)}
.ox-body h1,.ox-body h2,.ox-body h3,.ox-body h4,.ox-body h5,.ox-body h6{font-family:var(--font);font-weight:800;line-height:var(--lh-tight);letter-spacing:normal;color:var(--ink);text-wrap:balance}
.ox-body h1{font-size:var(--fs-800)} .ox-body h2{font-size:var(--fs-700)} .ox-body h3{font-size:var(--fs-600)}
.ox-body h4{font-size:var(--fs-500)} .ox-body h5{font-size:var(--fs-400)} .ox-body h6{font-size:var(--fs-300)}
.ox-body a{color:var(--blue)} .ox-body a:hover{color:var(--blue-hover)}
.ox-body .fa,.ox-body .fas,.ox-body .far,.ox-body .fal,.ox-body .fad,.ox-body .fab{font-family:"Font Awesome 5 Pro","Font Awesome 5 Free","Font Awesome 5 Brands"!important}
.ox-body .fab{font-family:"Font Awesome 5 Brands"!important}
:focus-visible{outline:3px solid var(--ring)!important;outline-offset:2px;border-radius:var(--r-xs)}
.ox-num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.ox-mono{direction:ltr;unicode-bidi:isolate;font-family:var(--mono);font-size:.88em}
.ox-muted{color:var(--ink-3)} .ox-grow{flex:1;min-inline-size:0} .ox-spacer{margin-inline-start:auto}
.ox-wrap{max-inline-size:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,3vw,32px)}
.ox-body code,.ox-body pre,.ox-body kbd{direction:ltr;unicode-bidi:isolate;text-align:left;font-family:var(--mono)}
.ox-skip{position:absolute;inset-block-start:-100px;inset-inline-start:16px;z-index:200;padding:var(--s2) var(--s4);border-radius:var(--r-sm);background:var(--blue);color:var(--on-blue)!important;font-weight:700}
.ox-skip:focus{inset-block-start:12px}
.ox-plates{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ox-plate{display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--surface);
  font-size:var(--fs-100);font-weight:600;line-height:1.9;color:var(--ink-2);white-space:nowrap}
.ox-plate.is-blue{border-color:color-mix(in srgb,var(--blue) 35%,transparent);color:var(--blue);background:var(--blue-tint)}
.ox-eye{display:flex;align-items:center;gap:10px;font-size:var(--fs-200);font-weight:700;color:var(--blue);margin-block-end:var(--s3)}
.ox-eye::before{content:'';inline-size:24px;block-size:2px;background:currentColor;flex:none}
.ox-live{position:relative;display:inline-block;inline-size:7px;block-size:7px;border-radius:50%;background:var(--teal);flex:none}
.ox-live::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--teal);opacity:0;animation:ox-ping 2.4s var(--ease) infinite}
@keyframes ox-ping{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.ox-grad{background:linear-gradient(to left,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ------------------------------------------------------------ 3. shell */
.ox-hdr{position:sticky;top:0;z-index:1030;background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-block-end:1px solid var(--line)}
.ox-hdr-in{display:flex;align-items:center;gap:var(--s3);min-block-size:64px}
.ox-logo{display:inline-flex;align-items:center;gap:var(--s2);color:var(--ink)!important;font-size:var(--fs-500);font-weight:800;white-space:nowrap;text-decoration:none!important}
.ox-logo svg{inline-size:28px;block-size:22px;color:var(--blue)}
.ox-logo b{color:var(--blue);font-weight:800}
.ox-logo img{max-block-size:38px;inline-size:auto}
.ox-tools{display:flex;align-items:center;gap:var(--s1);margin-inline-start:auto}
.ox-ibtn{position:relative;display:inline-grid;place-items:center;inline-size:40px;block-size:40px;flex:none;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--ink-2)!important;cursor:pointer;font-size:var(--fs-500);text-decoration:none!important;transition:background-color var(--t-fast) var(--ease)}
.ox-ibtn:hover{background:var(--surface-2);color:var(--ink)!important}
.ox-bubble{position:absolute;top:3px;inset-inline-end:3px;min-inline-size:16px;block-size:16px;padding-inline:4px;border-radius:var(--r-pill);border:2px solid var(--surface);
  background:var(--red);color:#fff;font-size:10px;font-weight:700;line-height:12px;text-align:center}
.ox-nav{border-block-start:1px solid var(--line)}
.ox-nav .ox-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.ox-tab{position:relative;display:inline-flex;align-items:center;gap:var(--s2);min-block-size:46px;padding-inline:var(--s3);border:0;background:transparent;
  font-size:var(--fs-300);font-weight:600;color:var(--ink-3)!important;white-space:nowrap;text-decoration:none!important;cursor:pointer}
.ox-tab:hover{color:var(--ink)!important}
.ox-tab.is-active{color:var(--ink)!important}
.ox-tab.is-active::after{content:'';position:absolute;inset-inline:var(--s3);inset-block-end:-1px;block-size:2px;background:var(--blue)}
.ox-tab .badge{font-size:var(--fs-100)}
.ox-tab.dropdown-toggle::after{border:0!important;content:'\f107';font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900;font-size:11px;margin:0;vertical-align:0;opacity:.6}
.ox-nav .dropdown-menu,.ox-tools .dropdown-menu{min-inline-size:220px;padding:var(--s2);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-pop)}
.ox-nav .dropdown-item,.ox-tools .dropdown-item{display:flex;align-items:center;gap:var(--s2);border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-size:var(--fs-300);color:var(--ink);text-align:start}
.ox-nav .dropdown-item:hover,.ox-tools .dropdown-item:hover{background:var(--surface-2);color:var(--ink)}
.ox-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);list-style:none;margin:0;padding:var(--s4) 0 0;font-size:var(--fs-200);color:var(--ink-3)}
.ox-crumbs li+li::before{content:'\2039';margin-inline-end:var(--s2);color:var(--line-2)}
.ox-crumbs a{color:var(--ink-3)} .ox-crumbs [aria-current]{color:var(--ink);font-weight:600}
.ox-main{min-block-size:56vh}
.ox-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);padding-block:var(--s6) var(--s16)}
@media (min-width:992px){.ox-shell.has-side{grid-template-columns:272px minmax(0,1fr)}}
.ox-content{min-inline-size:0}
.ox-ftr{border-block-start:1px solid var(--line);background:var(--surface);padding-block:var(--s12) var(--s8);font-size:var(--fs-300);color:var(--ink-2)}
.ox-ftr-grid{display:grid;gap:var(--s8);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.ox-ftr h4{font-size:var(--fs-200)!important;font-weight:700;color:var(--ink-3)!important;margin-block-end:var(--s3)}
.ox-ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.ox-ftr a{color:var(--ink-2)} .ox-ftr a:hover{color:var(--blue)}
.ox-ftr-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-block-start:var(--s10);padding-block-start:var(--s5);border-block-start:1px solid var(--line)}
.ox-only-mob{display:none!important}
@media (max-width:991px){.ox-nav{display:none}.ox-only-mob{display:inline-grid!important}.ox-hide-md{display:none!important}}
@media (max-width:575px){.ox-hide-sm{display:none!important}}
.ox-sheet{position:fixed;inset:0;z-index:1060;background:var(--scrim)}
.ox-sheet[hidden]{display:none}
.ox-sheet-panel{position:absolute;inset-block:0;inset-inline-start:0;inline-size:min(86vw,320px);overflow-y:auto;padding:var(--s5);background:var(--surface);box-shadow:var(--sh-pop);animation:ox-slide var(--t-slow) var(--ease)}
@keyframes ox-slide{from{transform:translateX(100%)}}
.ox-sheet-panel ul{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:2px}
.ox-sheet-panel a{display:flex;align-items:center;gap:var(--s3);min-block-size:44px;padding-inline:var(--s3);border-radius:var(--r-sm);font-size:var(--fs-400);font-weight:600;color:var(--ink);text-decoration:none}
.ox-sheet-panel a:hover{background:var(--surface-2)}
.ox-sheet-panel .is-child a{padding-inline-start:var(--s8);font-size:var(--fs-300);font-weight:500;color:var(--ink-2)}

/* --------------------------------------------------------- 4. components */
.ox-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-block-size:42px;padding-inline:var(--s5);border:1px solid transparent;border-radius:var(--r-sm);
  font-size:var(--fs-300);font-weight:700;line-height:1.4;white-space:nowrap;cursor:pointer;text-decoration:none!important;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.ox-btn:active{transform:translateY(1px)}
.ox-btn-blue{background:var(--blue);color:var(--on-blue)!important}
.ox-btn-blue:hover{background:var(--blue-hover)}
.ox-btn-line{background:var(--surface);border-color:var(--line-2);color:var(--ink)!important}
.ox-btn-line:hover{border-color:var(--ink-3)}
.ox-btn-sm{min-block-size:36px;padding-inline:var(--s3);font-size:var(--fs-200)}
.ox-btn-lg{min-block-size:50px;padding-inline:var(--s8);font-size:var(--fs-400)}
.ox-btn-block{inline-size:100%}
.ox-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-300);font-weight:700;color:var(--blue)!important;text-decoration:none!important}
.ox-link::after{content:'';inline-size:14px;block-size:1.5px;background:currentColor;transition:inline-size var(--t) var(--ease)}
.ox-link:hover::after{inline-size:22px}
.ox-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-inline-size:0}
.ox-card-hd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-block-end:1px solid var(--line)}
.ox-card-title{margin:0;font-size:var(--fs-500)!important;font-weight:800}
.ox-card-sub{font-size:var(--fs-200);color:var(--ink-3)}
.ox-card-bd{padding:var(--s5)}
.ox-pill{display:inline-flex;align-items:center;gap:6px;padding:0 9px;border-radius:var(--r-pill);font-size:var(--fs-100);font-weight:700;line-height:1.9;white-space:nowrap;border:1px solid transparent}
.ox-pill::before{content:'';inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;flex:none}
.ox-pill.ok{background:var(--teal-tint);color:var(--teal-ink)} .ox-pill.warn{background:var(--amber-tint);color:var(--amber-ink)}
.ox-pill.bad{background:var(--red-tint);color:var(--red-ink)} .ox-pill.info{background:var(--blue-tint);color:var(--blue)}
.ox-pill.mute{background:var(--surface-2);color:var(--ink-2)}
.ox-notice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);border-radius:var(--r);background:var(--amber-tint);color:var(--amber-ink);font-size:var(--fs-300)}
.ox-notice b{font-weight:800}
.ox-term{padding:var(--s4);border-radius:var(--r-sm);background:var(--term-bg);color:var(--term-ink);font-family:var(--mono);font-size:var(--fs-200);line-height:1.75;direction:ltr;text-align:left;white-space:pre;overflow-x:auto}
.ox-term .dim{color:var(--term-dim)}
.ox-term .cur{display:inline-block;inline-size:.6em;background:var(--term-ink);animation:ox-blink 1.1s steps(2) infinite}
@keyframes ox-blink{50%{opacity:0}}

/* ------------------------------------------------- 5. login + loader */
.ox-login{display:grid;grid-template-columns:minmax(0,1fr);min-block-size:100vh;background:var(--bg)}
@media (min-width:992px){.ox-login{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.ox-login-form{display:grid;align-content:center;justify-items:center;padding:var(--s10) var(--s4)}
.ox-login-card{inline-size:min(100%,410px);display:grid;gap:var(--s5)}
.ox-login-card h1{font-size:var(--fs-800)!important;margin:var(--s2) 0 0}
.ox-login-card .ox-sub{margin-block-start:var(--s2);color:var(--ink-2);font-size:var(--fs-400)}
.ox-field{display:grid;gap:var(--s2)}
.ox-label{font-size:var(--fs-300);font-weight:700;color:var(--ink);margin:0}
.ox-input{inline-size:100%;min-block-size:46px;padding:var(--s2) var(--s3);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-400);line-height:1.5;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.ox-input:hover{border-color:var(--ink-3)}
.ox-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.ox-input.is-ltr{direction:ltr;text-align:left;font-family:var(--mono);font-size:var(--fs-300)}
.ox-ingrp{display:flex}
.ox-ingrp .ox-input{border-start-end-radius:0;border-end-end-radius:0}
.ox-ingrp .ox-addon{display:inline-grid;place-items:center;inline-size:46px;border:1px solid var(--line-2);border-inline-start:0;border-start-end-radius:var(--r-sm);border-end-end-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-2);cursor:pointer}
.ox-check{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-300);cursor:pointer;min-block-size:40px;margin:0}
.ox-check input{inline-size:18px;block-size:18px;accent-color:var(--blue);position:static!important;margin:0!important}
.ox-or{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-200);color:var(--ink-3)}
.ox-or::before,.ox-or::after{content:'';flex:1;block-size:1px;background:var(--line)}
.ox-login-alt{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.ox-login-art{position:relative;overflow:hidden;display:none}
@media (min-width:992px){.ox-login-art{display:block}}
.ox-login-art .ox-stage{position:absolute;inset:0;block-size:auto}
.ox-login-art .ox-glass{position:absolute;inset-block-end:var(--s10);inset-inline:var(--s10);inline-size:auto}
.ox-login .alert{margin:0}

/* the loader: a rack front whose units light up in order while WHMCS
   validates the session — shown on submit, gone when the next page paints */
.ox-loader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;align-content:center;gap:var(--s6);background:color-mix(in srgb,var(--bg) 94%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:ox-fade var(--t-slow) var(--ease)}
.ox-loader[hidden]{display:none}
@keyframes ox-fade{from{opacity:0}}
.ox-loader-rack{inline-size:180px;padding:10px;border:8px solid var(--rack-frame);border-radius:6px;background:var(--rack-slot);display:grid;gap:5px;box-shadow:var(--sh-2)}
.ox-loader-rack i{display:flex;align-items:center;justify-content:flex-end;gap:5px;block-size:18px;padding-inline:8px;border-radius:2px;background:var(--surface-2);border:1px solid var(--rack-edge)}
.ox-loader-rack i::before,.ox-loader-rack i::after{content:'';inline-size:6px;block-size:6px;border-radius:50%;background:var(--line-2)}
.ox-loader-rack i{animation:ox-unit 1.8s var(--ease) infinite}
.ox-loader-rack i::after{animation:ox-led 1.8s steps(1) infinite}
.ox-loader-rack i:nth-child(2),.ox-loader-rack i:nth-child(2)::after{animation-delay:.15s}
.ox-loader-rack i:nth-child(3),.ox-loader-rack i:nth-child(3)::after{animation-delay:.3s}
.ox-loader-rack i:nth-child(4),.ox-loader-rack i:nth-child(4)::after{animation-delay:.45s}
.ox-loader-rack i:nth-child(5),.ox-loader-rack i:nth-child(5)::after{animation-delay:.6s}
.ox-loader-rack i:nth-child(6),.ox-loader-rack i:nth-child(6)::after{animation-delay:.75s}
@keyframes ox-unit{0%,100%{border-color:var(--rack-edge)}30%{border-color:var(--blue);box-shadow:0 0 12px color-mix(in srgb,var(--blue) 45%,transparent)}}
@keyframes ox-led{0%{background:var(--line-2)}20%{background:var(--led-a)}}
.ox-loader-t{font-size:var(--fs-500);font-weight:800;color:var(--ink)}
.ox-loader-s{font-size:var(--fs-200);color:var(--ink-3);margin-block-start:calc(var(--s5) * -1)}
.ox-loader-bar{inline-size:180px;block-size:3px;border-radius:2px;background:var(--line);overflow:hidden}
.ox-loader-bar::after{content:'';display:block;block-size:100%;inline-size:40%;background:var(--blue);border-radius:inherit;animation:ox-bar 1.2s var(--ease) infinite}
@keyframes ox-bar{from{transform:translateX(150%)}to{transform:translateX(-250%)}}

/* ------------------------------------------------- 6. corridor (3D) */
.ox-walk{position:relative}
.ox-stage{position:sticky;top:0;block-size:100vh;overflow:hidden;perspective:900px;perspective-origin:50% 44%;background:linear-gradient(to bottom,var(--ceil),var(--stage) 45%,var(--floor))}
.ox-world{position:absolute;left:50%;top:44%;inline-size:0;block-size:0;transform-style:preserve-3d;will-change:transform}
.ox-pl{position:absolute;left:0;top:0;transform-origin:0 0;backface-visibility:visible}
.ox-floor{background:linear-gradient(to right,transparent 47%,var(--floor-perf) 47% 53%,transparent 53%),repeating-linear-gradient(to right,var(--floor-line) 0 1.5px,transparent 1.5px 100px),repeating-linear-gradient(to bottom,var(--floor-line) 0 1.5px,transparent 1.5px 100px),var(--floor)}
.ox-ceil{background:linear-gradient(to right,transparent 22%,var(--light) 22% 25%,transparent 25% 75%,var(--light) 75% 78%,transparent 78%),var(--ceil)}
.ox-tray{background:repeating-linear-gradient(to bottom,var(--tray) 0 30px,var(--tray-gap) 30px 34px)}
.ox-tray::after{content:'';position:absolute;inset:0;background:var(--blue);opacity:calc(var(--up,0) * .55);box-shadow:0 0 40px var(--blue)}
.ox-wall{background:var(--wall)}
.ox-endwall{background:radial-gradient(ellipse 40% 55% at 50% 62%,var(--light),var(--wall) 70%)}
.ox-door{position:absolute;left:600px;top:250px;inline-size:200px;block-size:350px;border:6px solid var(--rack-frame);border-block-end:0;background:linear-gradient(var(--light),var(--fog))}
.ox-rack{border:8px solid var(--rack-frame);background:linear-gradient(to bottom,transparent 72%,var(--rack-shade)),
  radial-gradient(circle,var(--led-b) 1.6px,transparent 2.3px) 78% 12px / 12px 78px repeat-y,
  radial-gradient(circle,var(--led-a) 1.6px,transparent 2.3px) 88% 12px / 12px 26px repeat-y,
  repeating-linear-gradient(to bottom,var(--rack-slot) 0 22px,var(--rack-edge) 22px 26px)}
.ox-rack::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,var(--led-a) 2px,transparent 2.8px) 88% 12px / 12px 52px repeat-y;animation:ox-blink 2.2s steps(2) infinite}
.ox-rack.r1::after{animation-delay:-.6s}.ox-rack.r2::after{animation-delay:-1.3s;animation-duration:3.1s}.ox-rack.r3::after{animation-delay:-.2s;animation-duration:1.7s}
.ox-rack-tag{position:absolute;inset-block-start:-30px;left:50%;transform:translateX(-50%);padding:0 6px;border:1px solid var(--rack-edge);border-radius:3px;background:var(--rack-slot);color:var(--ink-3);font-size:13px;font-weight:700}
.ox-unit-hl{position:absolute;left:8px;right:30px;top:330px;block-size:22px;border:2px solid var(--blue);border-radius:2px;background:color-mix(in srgb,var(--blue) 18%,transparent);box-shadow:0 0 26px var(--blue);opacity:var(--hl,0)}
.ox-fog{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 22% 30% at 50% 44%,var(--fog) 0%,transparent 100%)}
.ox-walk .ox-stage::after{content:'';position:absolute;inset:auto 0 0;block-size:22%;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.ox-stops{position:relative;z-index:2;margin-block-start:-100vh}
.ox-stop{display:flex;align-items:center;min-block-size:112vh;padding-inline:clamp(16px,5vw,80px)}
.ox-stop.is-first{min-block-size:100vh;justify-content:center;flex-direction:column;padding-block:var(--s16) var(--s10)}
.ox-stop.at-end{justify-content:flex-end} .ox-stop.at-start{justify-content:flex-start}
.ox-glass{inline-size:min(100%,560px);padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:var(--sh-2)}
.ox-glass h2{font-size:var(--fs-800)!important;margin-block:var(--s3) var(--s4)}
.ox-glass p{font-size:var(--fs-300);color:var(--ink-2);line-height:var(--lh-body);margin:0}
.ox-glass .ox-links{display:flex;flex-wrap:wrap;gap:var(--s5);margin-block-start:var(--s5)}
.ox-glass .ox-term{margin-block-start:var(--s4)}
.ox-hero-card{inline-size:min(100%,760px)}
.ox-hero-h{font-size:var(--fs-900)!important;line-height:var(--lh-display)!important;margin-block:var(--s4) var(--s5)}
@media (min-width:768px){.ox-hero-h{font-size:var(--fs-1100)!important}}
@media (min-width:1200px){.ox-hero-h{font-size:var(--fs-1200)!important}}
.ox-hero-h .light{display:block;font-weight:300}
.ox-hero-p{font-size:var(--fs-400)!important}
.ox-hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-block-start:var(--s6)}
.ox-facts-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-block-start:var(--s8)}
.ox-facts-strip .ox-plate{background:var(--glass)}
.ox-scroll-hint{margin-block-start:var(--s6);font-size:var(--fs-100);font-weight:600;color:var(--ink-3)}

/* ------------------------------------------------------- 7. homepage */
.ox-sec{padding-block:clamp(56px,8vw,104px)}
.ox-sec.alt{background:var(--surface-2);border-block:1px solid var(--line)}
.ox-sec-h{font-size:var(--fs-900)!important;max-inline-size:20ch;margin:0}
@media (min-width:900px){.ox-sec-h{font-size:var(--fs-1000)!important}}
.ox-lede{margin-block-start:var(--s4);font-size:var(--fs-500);line-height:var(--lh-body);color:var(--ink-2);max-inline-size:62ch}
.ox-sec-body{margin-block-start:var(--s10)}
.ox-pgrid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.ox-pcard{position:relative;display:grid;gap:var(--s3);align-content:start;padding:var(--s6) var(--s5) var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink)!important;text-decoration:none!important;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.ox-pcard::before{content:'';position:absolute;top:-1px;inset-inline-start:var(--s5);inline-size:36px;block-size:2px;background:var(--blue)}
.ox-pcard:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.ox-pcard h3{font-size:var(--fs-500)!important;display:flex;align-items:center;gap:var(--s2);margin:0}
.ox-pcard h3::after{content:'\2190';color:var(--blue);font-weight:400}
.ox-pcard p{font-size:var(--fs-300);color:var(--ink-2);line-height:var(--lh-snug);margin:0}
.ox-steps{display:grid;list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line-2);max-inline-size:780px}
.ox-steps li{display:flex;gap:var(--s4);padding:var(--s3) var(--s5);font-size:var(--fs-400);line-height:var(--lh-snug)}
.ox-steps .n{flex:none;font-size:var(--fs-100);font-weight:700;color:var(--blue);padding-block-start:4px}
.ox-steps b{font-weight:800}
.ox-dsearch{display:flex;flex-wrap:wrap;gap:var(--s3);max-inline-size:720px}
.ox-dsearch .ox-input{flex:1;min-inline-size:220px;min-block-size:52px}
.ox-cta-band{display:grid;gap:var(--s5);justify-items:start}
@media (min-width:900px){.ox-cta-band{grid-template-columns:1fr auto;align-items:end}}

/* ------------------------------------------------------ 8. dashboard */
.ox-page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s4);margin-block-end:var(--s6)}
.ox-page-title{font-size:var(--fs-900)!important;margin:var(--s3) 0 0}
.ox-page-sub{margin:var(--s2) 0 0;font-size:var(--fs-400);color:var(--ink-2)}
.ox-page-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-inline-start:auto}
.ox-facts{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-block-end:var(--s6)}
.ox-fact{display:grid;gap:var(--s1);align-content:start;padding:var(--s5) var(--s6);background:var(--surface);color:var(--ink)!important;text-decoration:none!important;transition:background-color var(--t-fast) var(--ease)}
a.ox-fact:hover{background:var(--surface-2)}
.ox-fact-k{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-200);font-weight:600;color:var(--ink-3)}
.ox-fact-v{font-size:var(--fs-800);font-weight:800;line-height:1.2}
.ox-fact-v small{font-size:var(--fs-200);font-weight:500;color:var(--ink-3);margin-inline-start:4px}
.ox-fact-f{font-size:var(--fs-200);color:var(--ink-3)}
.ox-panels{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1200px){.ox-panels{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ox-panels .is-wide{grid-column:1/-1}
.ox-panel .list-group{border:0!important;border-radius:0!important}
.ox-panel .list-group-item{border-inline:0!important;border-block-start:0!important;border-block-end:1px solid var(--line)!important;border-radius:0!important;padding:var(--s3) var(--s5)!important}
.ox-panel .list-group-item:last-child{border-block-end:0!important}
.ox-panel .ox-card-ft{padding:var(--s3) var(--s5);border-block-start:1px solid var(--line);background:var(--surface-2);border-end-start-radius:var(--r);border-end-end-radius:var(--r);font-size:var(--fs-200)}
.ox-panel .ox-card-ft:empty{display:none}

/* ------------------------------------------- 9. WHMCS / Bootstrap restyle
   The 170+ inherited twenty-one pages are recoloured and retyped here so the
   whole client area reads as one product without rewriting every template. */
.ox-body .primary-content .card,.ox-body .ox-content .card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:none;color:var(--ink)}
.ox-body .card-header{background:var(--surface);border-block-end:1px solid var(--line);padding:var(--s4) var(--s5)}
.ox-body .card-title{font-size:var(--fs-500)!important;font-weight:800;color:var(--ink)}
.ox-body .card-body{padding:var(--s5)}
.ox-body .card-footer{background:var(--surface-2);border-block-start:1px solid var(--line)}
.ox-body .card[class*="card-accent-"]{border-block-start:1px solid var(--line)!important}
.ox-body .card[class*="card-accent-"]::before{content:'';position:absolute;top:-1px;inset-inline-start:var(--s5);inline-size:36px;block-size:2px;background:var(--blue)}
.ox-body .card{position:relative}
.ox-body .text-muted{color:var(--ink-3)!important}
.ox-body hr{border-color:var(--line)}

.ox-body .btn{font-family:var(--font);font-weight:700;font-size:var(--fs-300);border-radius:var(--r-sm);min-block-size:40px;padding-inline:var(--s4);box-shadow:none!important;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.ox-body .btn-sm,.ox-body .btn-xs{min-block-size:32px;padding-inline:var(--s3);font-size:var(--fs-200)}
.ox-body .btn-lg{min-block-size:50px;font-size:var(--fs-400)}
.ox-body .btn-primary,.ox-body .btn-success,.ox-body .btn-info{background:var(--blue)!important;border-color:var(--blue)!important;color:var(--on-blue)!important}
.ox-body .btn-primary:hover,.ox-body .btn-success:hover,.ox-body .btn-info:hover{background:var(--blue-hover)!important;border-color:var(--blue-hover)!important}
.ox-body .btn-default,.ox-body .btn-secondary,.ox-body .btn-light,.ox-body .btn-outline-primary,.ox-body .btn-outline-secondary{background:var(--surface)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important}
.ox-body .btn-default:hover,.ox-body .btn-secondary:hover,.ox-body .btn-light:hover,.ox-body .btn-outline-primary:hover,.ox-body .btn-outline-secondary:hover{border-color:var(--ink-3)!important}
.ox-body .btn-danger{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
.ox-body .btn-warning{background:var(--amber)!important;border-color:var(--amber)!important;color:#fff!important}
.ox-body .btn-link{color:var(--blue)!important}

.ox-body .form-control,.ox-body .custom-select,.ox-body select.form-control{min-block-size:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);background-color:var(--surface);color:var(--ink);font-size:var(--fs-400);box-shadow:none}
.ox-body textarea.form-control{min-block-size:110px;line-height:var(--lh-body)}
.ox-body .form-control:focus,.ox-body .custom-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.ox-body .form-control::placeholder{color:var(--ink-3)}
.ox-body .form-control:disabled,.ox-body .form-control[readonly]{background:var(--surface-2)}
.ox-body .input-group-text{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}
.ox-body label,.ox-body .form-control-label,.ox-body .col-form-label{font-size:var(--fs-300);font-weight:700;color:var(--ink)}
.ox-body input[type="email"],.ox-body input[type="url"],.ox-body input[name="domain"],.ox-body input[name="sld"]{direction:ltr;text-align:left}

.ox-body .table{color:var(--ink);font-size:var(--fs-300)}
.ox-body .table th,.ox-body .table td{border-color:var(--line);padding:var(--s3) var(--s4);vertical-align:middle;text-align:start}
.ox-body .table thead th{border-block-end:1px solid var(--line);background:var(--surface-2);color:var(--ink-3);font-size:var(--fs-200);font-weight:600}
.ox-body .table-hover tbody tr:hover,.ox-body .table-list tbody tr:hover{background:var(--surface-2)}
.ox-body .table-container,.ox-body .dataTables_wrapper{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.ox-body .dataTables_wrapper .dataTables_filter input,.ox-body .dataTables_wrapper .dataTables_length select{border:1px solid var(--line-2);border-radius:var(--r-sm);min-block-size:38px;background:var(--surface);color:var(--ink)}
.ox-body .dataTables_wrapper .dataTables_info{font-size:var(--fs-200);color:var(--ink-3)}

.ox-body .page-link{border-color:var(--line);color:var(--ink-2);background:var(--surface);min-inline-size:40px;text-align:center}
.ox-body .page-item.active .page-link{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}

.ox-body .badge{font-weight:700;font-size:var(--fs-100);padding:.3em .7em;border-radius:var(--r-pill)}
.ox-body .badge-info,.ox-body .badge-primary{background:var(--blue-tint);color:var(--blue)}
.ox-body .badge-success{background:var(--teal-tint);color:var(--teal-ink)}
.ox-body .badge-warning{background:var(--amber-tint);color:var(--amber-ink)}
.ox-body .badge-danger{background:var(--red-tint);color:var(--red-ink)}
.ox-body .badge-secondary,.ox-body .badge-default{background:var(--surface-2);color:var(--ink-2)}

/* WHMCS status labels → pills with a dot (status never by colour alone) */
.ox-body .label.status,.ox-body span.status{display:inline-flex;align-items:center;gap:6px;padding:0 9px;border-radius:var(--r-pill);font-size:var(--fs-100);font-weight:700;line-height:1.9;white-space:nowrap;border:0;background:var(--surface-2);color:var(--ink-2)}
.ox-body .label.status::before,.ox-body span.status::before{content:'';inline-size:6px;block-size:6px;border-radius:50%;background:currentColor}
.ox-body .status-active,.ox-body .status-paid,.ox-body .status-completed,.ox-body .status-answered,.ox-body .status-accepted{background:var(--teal-tint)!important;color:var(--teal-ink)!important}
.ox-body .status-pending,.ox-body .status-customer-reply,.ox-body .status-in-progress,.ox-body .status-on-hold,.ox-body .status-pending-transfer,.ox-body .status-delivered,.ox-body .status-draft{background:var(--amber-tint)!important;color:var(--amber-ink)!important}
.ox-body .status-unpaid,.ox-body .status-overdue,.ox-body .status-suspended,.ox-body .status-expired,.ox-body .status-fraud,.ox-body .status-dead,.ox-body .status-lost,.ox-body .status-payment-pending{background:var(--red-tint)!important;color:var(--red-ink)!important}
.ox-body .status-open{background:var(--blue-tint)!important;color:var(--blue)!important}
.ox-body .status-terminated,.ox-body .status-cancelled,.ox-body .status-closed,.ox-body .status-refunded,.ox-body .status-collections,.ox-body .status-transferred-away{background:var(--surface-2)!important;color:var(--ink-2)!important}

.ox-body .alert{border-radius:var(--r);border:1px solid transparent;font-size:var(--fs-300);padding:var(--s3) var(--s5)}
.ox-body .alert-success{background:var(--teal-tint);color:var(--teal-ink);border-color:color-mix(in srgb,var(--teal) 30%,transparent)}
.ox-body .alert-info{background:var(--blue-tint);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 26%,transparent)}
.ox-body .alert-warning{background:var(--amber-tint);color:var(--amber-ink);border-color:color-mix(in srgb,var(--amber) 32%,transparent)}
.ox-body .alert-danger{background:var(--red-tint);color:var(--red-ink);border-color:color-mix(in srgb,var(--red) 28%,transparent)}

.ox-body .list-group-item{background:var(--surface);border-color:var(--line);color:var(--ink);font-size:var(--fs-300)}
.ox-body .list-group-item-action:hover{background:var(--surface-2)}
.ox-body .list-group-item.active{background:var(--blue-tint)!important;border-color:var(--line)!important;color:var(--blue)!important;font-weight:700}
.ox-body .nav-tabs{border-block-end:1px solid var(--line)}
.ox-body .nav-tabs .nav-link{border:0;border-block-end:2px solid transparent;color:var(--ink-3);font-weight:700;font-size:var(--fs-300);background:transparent}
.ox-body .nav-tabs .nav-link.active,.ox-body .nav-tabs .nav-item.show .nav-link{color:var(--ink);border-block-end-color:var(--blue);background:transparent}
.ox-body .nav-pills .nav-link.active{background:var(--blue);color:var(--on-blue)}
.ox-body .modal-content{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-pop);color:var(--ink)}
.ox-body .modal-header,.ox-body .modal-footer{border-color:var(--line)}
.ox-body .modal-footer{background:var(--surface-2);border-end-start-radius:var(--r);border-end-end-radius:var(--r)}
.ox-body .close{color:var(--ink-2);text-shadow:none}
.ox-body .dropdown-menu{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-pop)}
.ox-body .dropdown-item{color:var(--ink);font-size:var(--fs-300)}
.ox-body .dropdown-item:hover{background:var(--surface-2)}
.ox-body .popover{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-pop);background:var(--surface)}
.ox-body .popover-body{color:var(--ink)}
.ox-body .progress{background:var(--surface-2);border-radius:var(--r-pill);block-size:8px}
.ox-body .progress-bar{background:var(--teal)}
.ox-body .breadcrumb{background:transparent;padding:0}
.ox-body .header-lined h1,.ox-body .header-lined h2{font-size:var(--fs-800)!important}
.ox-body .bg-white,.ox-body .bg-light{background:var(--surface)!important}

/* sidebar (includes/sidebar.tpl) */
.o-sidebar-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.o-sidebar-head{padding:var(--s3) var(--s4);font-size:var(--fs-300);font-weight:800;color:var(--ink);border-block-end:1px solid var(--line)}
.o-sidebar-head .o-row{display:flex;align-items:center;gap:var(--s2)}
.o-sidebar-list{list-style:none;margin:0;padding:var(--s2)}
.o-sidebar-list a{display:flex;align-items:center;gap:var(--s3);min-block-size:42px;padding:var(--s2) var(--s3);border-radius:var(--r-sm);font-size:var(--fs-300);color:var(--ink-2);text-decoration:none}
.o-sidebar-list a:hover{background:var(--surface-2);color:var(--ink)}
.o-sidebar-list .is-active>a{background:var(--blue-tint);color:var(--blue);font-weight:700}
.o-sidebar-list .o-icon{inline-size:18px;text-align:center;flex:none}
.o-sidebar-list .o-count{margin-inline-start:auto;font-size:var(--fs-100);padding-inline:var(--s2);border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)}
.o-chip{display:inline-flex;align-items:center;padding:0 8px;border-radius:var(--r-pill);font-size:var(--fs-100);font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.o-card-foot{padding:var(--s3) var(--s4);border-block-start:1px solid var(--line);background:var(--surface-2)}
.o-spacer{margin-inline-start:auto}
.u-mbe-4{margin-block-end:var(--s4)!important}
.u-hide-md-down{} @media (max-width:991px){.u-hide-md-down{display:none!important}}
.u-hide-lg-up{} @media (min-width:992px){.u-hide-lg-up{display:none!important}}
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- 10. utilities */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{.ox-hdr,.ox-nav,.ox-ftr,.sidebar,.ox-loader{display:none!important}}

/* ===================================================================
   11. SIGN-IN — glass card over the planet's limb (canvas #oxNetflow)
   =================================================================== */
.ox-ava{display:inline-grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--blue-tint);color:var(--blue);font-size:11px}
.ox-auth{position:relative;min-block-size:100vh;overflow:hidden;background:var(--bg)}
.ox-netflow{position:fixed;inset:0;inline-size:100%;block-size:100%;z-index:0;display:block}
.ox-auth-center{position:relative;z-index:1;min-block-size:100vh;display:grid;place-items:center;align-content:center;gap:var(--s4);padding:var(--s10) var(--s4)}
.ox-auth-card{inline-size:min(100%,420px);display:grid;gap:var(--s4);padding:var(--s6);border:1px solid color-mix(in srgb,var(--line-2) 70%,transparent);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 52%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 20px 40px rgba(2,6,23,.12),0 2px 8px rgba(2,6,23,.06),inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.22)}
.ox-auth-logo{justify-self:center;font-size:var(--fs-500)}
.ox-auth-logo img{max-block-size:40px}
.ox-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:var(--r);background:color-mix(in srgb,var(--surface-2) 80%,transparent);border:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.ox-auth-tabs a{display:grid;place-items:center;min-block-size:40px;border-radius:10px;font-size:var(--fs-300);font-weight:700;color:var(--ink-2);text-decoration:none!important}
.ox-auth-tabs a:hover{color:var(--ink)}
.ox-auth-tabs a[aria-current]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(2,6,23,.1)}
.ox-auth-hint{margin:0;font-size:var(--fs-300);line-height:var(--lh-snug);color:var(--ink-2)}
.ox-auth-form{display:grid;gap:var(--s4)}
.ox-fld{display:grid;gap:4px}
.ox-fld>label{margin:0;padding-inline-start:4px;font-size:var(--fs-100)!important;font-weight:600;color:var(--ink-2)}
.ox-fld-box,.ox-fld-box.input-group{position:relative;display:block!important;flex-wrap:nowrap}
/* sign-in inputs are always LTR (email, password): icon on the physical left,
   Show/Hide on the physical right, regardless of page direction */
.ox-fld-box>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:var(--fs-300);color:var(--ink-3);pointer-events:none;z-index:1}
.ox-fld-in{display:block;inline-size:100%!important;min-block-size:48px;padding:8px 16px 8px 40px;direction:ltr;text-align:left;
  border:1px solid color-mix(in srgb,var(--line-2) 85%,transparent);border-radius:var(--r)!important;background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--ink);
  font-size:var(--fs-400);line-height:1.5;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.ox-fld-in::placeholder{color:var(--ink-3)}
.ox-fld-in:hover{border-color:var(--ink-3)}
.ox-fld-in:focus{outline:none;border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}
.ox-fld-box:has(.ox-fld-act) .ox-fld-in{padding-right:84px}
.ox-fld-act{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:2;min-block-size:34px;padding-inline:var(--s3);border:0;border-radius:var(--r-sm);background:transparent;
  font-size:var(--fs-200);font-weight:700;color:var(--blue);cursor:pointer}
.ox-fld-act:hover{background:var(--blue-tint)}
.ox-auth-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);font-size:var(--fs-200)}
.ox-auth-row a{font-weight:600}
.ox-auth-row .ox-check{min-block-size:32px;font-size:var(--fs-200);font-weight:500}
.ox-auth-err{margin:0;padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--red-tint);color:var(--red-ink);font-size:var(--fs-200);font-weight:600}
.ox-auth-captcha{display:grid;justify-items:center}
/* the key: glossy, with a solid lower edge that compresses when pressed */
.ox-key{position:relative;display:grid;place-items:center;inline-size:100%;min-block-size:48px;margin-block-end:4px;border:0;border-radius:var(--r);cursor:pointer;
  font-size:var(--fs-400);font-weight:800;color:#fff;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--blue) 62%,#fff),var(--blue) 52%,var(--blue-hover));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,40,90,.3),0 4px 0 color-mix(in srgb,var(--blue-hover) 80%,#000),0 10px 20px -8px color-mix(in srgb,var(--blue) 60%,transparent);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}
.ox-key:hover{filter:brightness(1.05)}
.ox-key:active,.ox-key[aria-busy="true"]{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 2px rgba(0,40,90,.3),0 1px 0 color-mix(in srgb,var(--blue-hover) 80%,#000)}
.ox-auth-alt{justify-self:center;display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-300);font-weight:700;color:var(--ink-2)!important;text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:var(--line-2)!important}
.ox-auth-alt:hover{color:var(--blue)!important}
.ox-auth-sso:empty{display:none}
.ox-auth-sso .btn,.ox-auth-sso .social-signin-btns .btn{border-radius:var(--r-pill)!important;background:var(--surface)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important}
.ox-auth-terms{margin:0;font-size:var(--fs-100);line-height:var(--lh-snug);color:var(--ink-3)}
.ox-auth-pill{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:3px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 60%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--line-2) 60%,transparent)}
.ox-auth-pill button,.ox-auth-pill a{display:inline-flex;align-items:center;gap:6px;min-block-size:34px;padding-inline:var(--s3);border:0;border-radius:var(--r-pill);background:transparent;
  font-size:var(--fs-200);font-weight:600;color:var(--ink-2)!important;text-decoration:none!important;cursor:pointer}
.ox-auth-pill button:hover,.ox-auth-pill a:hover{background:color-mix(in srgb,var(--surface) 80%,transparent)}
.ox-auth .alert{margin:0;font-size:var(--fs-200)}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ox-auth-alts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s5)}
.ox-auth .dmsr-login-btn{display:inline-flex!important;align-items:center;gap:var(--s2);inline-size:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;font-family:var(--font)!important;font-size:var(--fs-300)!important;font-weight:700!important;color:var(--ink-2)!important;
  text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:var(--line-2)!important}
.ox-auth .dmsr-login-btn:hover{color:var(--blue)!important}
.ox-auth .dmsr-login-btn::before{content:'\f7cd';font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:400}

/* ---- sign-up / password reset: same shell as sign-in (includes/oxauth-*.tpl) ---- */
.ox-auth-card.is-wide{inline-size:min(100%,660px)}
.ox-fld>label small{font-weight:500;color:var(--ink-3)}
.ox-fld-box.is-rtl>i{left:auto;right:14px}
.ox-fld-box.is-rtl .ox-fld-in,.ox-fld-box.is-rtl select.ox-fld-in{direction:rtl;text-align:right;padding:8px 40px 8px 16px}
.ox-fld-box.is-select select.ox-fld-in,.ox-fld-box.is-select .ox-fld-in[readonly]{cursor:pointer}
.ox-fld-box select.ox-fld-in{block-size:48px}
.ox-fld-box .ox-fld-in[readonly]{background:color-mix(in srgb,var(--surface-2) 70%,transparent);color:var(--ink-2)}
.ox-fld-box.is-tel .iti{display:block;inline-size:100%}
.ox-fld-box.is-tel .ox-fld-in{padding-right:16px}
.ox-fld-box.is-tel .iti__country-list{direction:ltr;text-align:left;z-index:30}
.ox-reg{gap:var(--s5)}
.ox-reg-groups{display:grid;gap:var(--s5)}
.ox-reg-sec{min-inline-size:0;margin:0;padding:var(--s4);border:1px solid color-mix(in srgb,var(--line-2) 70%,transparent);border-radius:var(--r-lg);background:color-mix(in srgb,var(--surface-2) 40%,transparent)}
.ox-reg-sec>legend{float:right;inline-size:100%;display:flex;align-items:center;gap:10px;margin:0 0 var(--s3);padding:0;border:0;font-size:var(--fs-300);font-weight:800;color:var(--ink)}
.ox-reg-sec>legend>i{display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:9px;background:var(--blue-tint);color:var(--blue);font-size:14px}
.ox-reg-sec>legend+*{clear:both}
.ox-reg-note{margin:0 0 var(--s3);font-size:var(--fs-100);color:var(--ink-3)}
.ox-reg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.ox-reg-grid>.is-full,.ox-reg-grid>#passwdFeedback{grid-column:1/-1}
.ox-reg-grid.hidden,.ox-reg .w-hidden{display:none!important}
.ox-reg-custom .form-group{margin:0}
.ox-reg-custom .control{display:grid;gap:4px}
.ox-reg-custom .field-help-text{font-size:var(--fs-100);color:var(--ink-3)}
.ox-reg .form-control:not(.ox-fld-in),.ox-reset-body .form-control{display:block;inline-size:100%;min-block-size:48px;block-size:auto;padding:8px 14px;border:1px solid color-mix(in srgb,var(--line-2) 85%,transparent);
  border-radius:var(--r)!important;background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--ink);font-size:var(--fs-400);box-shadow:none}
.ox-reg .form-control:not(.ox-fld-in):focus,.ox-reset-body .form-control:focus{outline:none;border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}
.ox-reg-pw{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.ox-reg-pw .password-strength-meter{flex:1 1 220px;min-inline-size:0}
.ox-reg-pw .progress{block-size:6px;margin:0 0 6px;border-radius:999px;background:color-mix(in srgb,var(--line-2) 70%,transparent)}
.ox-reg-pw .progress-bar{border-radius:999px}
.ox-reg-pw p{margin:0;text-align:right!important}
.ox-reg-gen{display:inline-flex;align-items:center;gap:8px;min-block-size:40px;padding-inline:var(--s4);border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);
  color:var(--ink);font-size:var(--fs-200);font-weight:700;cursor:pointer}
.ox-reg-gen:hover{border-color:var(--blue);color:var(--blue)}
.ox-reg-optin{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4);border:1px solid color-mix(in srgb,var(--line-2) 70%,transparent);border-radius:var(--r-lg)}
.ox-reg-optin b{font-size:var(--fs-300);color:var(--ink)}
.ox-reg-optin p{margin:2px 0 0;font-size:var(--fs-200);color:var(--ink-2)}
.ox-reg-tos{display:flex;align-items:flex-start;gap:var(--s2);margin:0;font-size:var(--fs-200);line-height:1.9;color:var(--ink-2);cursor:pointer}
.ox-reg-tos input{flex:none;inline-size:18px;block-size:18px;margin-block-start:4px;accent-color:var(--blue)}
.ox-reg .ox-auth-sso:not(:has(.btn,a,button)){display:none}
.ox-auth-terms a{font-weight:700}
.ox-reset-head{display:flex;align-items:center;gap:var(--s3)}
.ox-reset-ic{display:grid;place-items:center;flex:none;inline-size:44px;block-size:44px;border-radius:13px;background:var(--blue-tint);color:var(--blue);font-size:18px}
.ox-body .ox-reset-head h1{margin:0;font-size:var(--fs-500);font-weight:900;color:var(--ink)}
.ox-reset-body{display:grid;gap:var(--s3);font-size:var(--fs-300);color:var(--ink-2);line-height:1.9}
.ox-reset-body>.mb-4:first-child>.h3,.ox-reset-body h6.h3{display:none}
.ox-reset-body .mb-4{margin-block-end:var(--s3)!important}
.ox-reset-body p{margin:0}
.ox-reset-body form{display:grid;gap:var(--s3)}
.ox-reset-body .form-group{margin:0}
.ox-reset-body label{font-size:var(--fs-100);font-weight:600;color:var(--ink-2)}
.ox-reset-body input[type=email],.ox-reset-body input[type=password]{direction:ltr;text-align:left}
.ox-reset-body .input-group-merge{display:flex;flex-wrap:nowrap}
.ox-reset-body .input-group-merge .input-group-prepend{display:none}
.ox-reset-body .btn-primary{display:grid;place-items:center;inline-size:100%;min-block-size:48px;border:0;border-radius:var(--r);font-size:var(--fs-400);font-weight:800;color:#fff;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--blue) 62%,#fff),var(--blue) 52%,var(--blue-hover));box-shadow:0 4px 0 color-mix(in srgb,var(--blue-hover) 80%,#000)}
.ox-reset-body .btn-default{min-block-size:40px;margin-block-start:var(--s2);border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.ox-reset-body .text-center:has(.btn-default){display:grid;gap:var(--s2)}
.ox-reset .ox-auth-alt{gap:8px}
@media (max-width:560px){.ox-reg-grid{grid-template-columns:1fr}.ox-reg-sec{padding:var(--s3)}.ox-reg-optin{flex-direction:column;align-items:flex-start}}


/* ---- "Generate password" dialog (includes/generate-password.tpl, opened by .generate-password) ---- */
#modalGeneratePassword .modal-dialog{max-inline-size:500px;margin:12vh auto;padding-inline:16px}
#modalGeneratePassword .modal-content{overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:0 40px 80px -30px rgba(2,6,23,.6)}
#modalGeneratePassword .modal-header{align-items:center;padding:var(--s4) var(--s5);border:0;background:linear-gradient(135deg,#0B1424,#123A7A)!important;color:#fff}
#modalGeneratePassword .modal-title{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--fs-400);font-weight:800;color:#fff}
#modalGeneratePassword .modal-title::before{content:"\f084";font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:400;display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:10px;background:rgba(255,255,255,.12);color:#93C5FD;font-size:15px}
#modalGeneratePassword .modal-header .close{margin:0 auto 0 0;padding:0;color:#fff;opacity:.75;text-shadow:none;font-size:26px}
#modalGeneratePassword .modal-body{display:grid;gap:var(--s3);padding:var(--s5)}
#modalGeneratePassword .modal-body .row{margin:0;display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:var(--s3)}
#modalGeneratePassword .modal-body .row>[class*="col-"]{flex:none;max-inline-size:none;inline-size:auto;padding:0;margin:0}
#modalGeneratePassword .modal-body .row:last-child{grid-template-columns:1fr}
#modalGeneratePassword .col-form-label{padding:0;font-size:var(--fs-200);font-weight:700;color:var(--ink-2)}
#modalGeneratePassword .form-group{margin:0}
#modalGeneratePassword .form-control{inline-size:100%!important;max-inline-size:none;min-block-size:46px;padding:8px 14px;border:1px solid var(--line-2);border-radius:var(--r)!important;background:var(--surface-2);color:var(--ink);
  direction:ltr;text-align:left;font-family:var(--mono,monospace);font-size:var(--fs-400);font-weight:700;letter-spacing:.03em;box-shadow:none}
#modalGeneratePassword .form-control:focus{outline:none;border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}
#modalGeneratePassword .modal-body .btn{display:inline-flex;align-items:center;gap:6px;min-block-size:38px;margin-inline-end:6px;padding-inline:var(--s3);border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:var(--fs-200);font-weight:700}
#modalGeneratePassword .modal-body .btn:hover{border-color:var(--blue);color:var(--blue)}
#modalGeneratePassword .modal-footer{gap:var(--s2);padding:var(--s4) var(--s5);border-color:var(--line);background:var(--surface-2)}
#modalGeneratePassword .modal-footer .btn{min-block-size:42px;margin:0;padding-inline:var(--s4);border-radius:var(--r);font-weight:800}
#modalGeneratePassword .modal-footer .btn-primary{border:0;color:#fff;background:linear-gradient(to bottom,color-mix(in srgb,var(--blue) 62%,#fff),var(--blue) 52%,var(--blue-hover))}
#modalGeneratePassword .modal-footer .btn-default{border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
@media (max-width:480px){#modalGeneratePassword .modal-body .row{grid-template-columns:1fr}}

/* ---- focus frames: Bootstrap's `button:focus{outline:5px auto}` drew a thick dark frame
   around every card / step / chip a customer clicks. A mouse or touch click now draws no
   frame; keyboard focus (Tab) keeps a soft brand-blue ring so it is still visible. ---- */
:where(button,[role="button"],[role="radio"],[role="tab"],[role="option"],a,summary,label,.btn,[tabindex]):focus:not(:focus-visible){outline:0!important}
:where(button,[role="button"],[role="radio"],[role="tab"],[role="option"],a,summary,.btn,[tabindex]):focus-visible{outline:2px solid color-mix(in srgb,var(--blue,#1463D8) 70%,transparent)!important;outline-offset:2px}
:where(input,select,textarea):focus:not(:focus-visible){outline:0!important}