/* ==========================================================================
   OXIN RTL v3 — sign-in alternatives, the sign-in console, and the
   dashboard "operations deck". Loaded after oxin.css / oxin-shell.css and
   built only from their tokens.
   ========================================================================== */

/* ---- sign-in: alternative routes --------------------------------------- */
.ox-auth-or{display:flex;align-items:center;gap:var(--s3);margin-block:var(--s1) 0;font-size:var(--fs-100);font-weight:600;color:var(--ink-3)}
.ox-auth-or::before,.ox-auth-or::after{content:"";flex:1;block-size:1px;background:linear-gradient(to left,transparent,var(--line-2))}
.ox-auth-or::after{background:linear-gradient(to right,transparent,var(--line-2))}
.ox-auth .ox-auth-alts{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:var(--s2)}
.ox-auth .ox-alt{position:relative;display:flex!important;align-items:center;gap:var(--s3);min-block-size:60px;margin:0!important;padding:var(--s2) var(--s3)!important;
  inline-size:auto!important;border-radius:var(--r)!important;border:1px solid var(--line)!important;background:color-mix(in srgb,var(--surface) 72%,transparent)!important;
  color:var(--ink)!important;text-decoration:none!important;font-size:var(--fs-300)!important;box-shadow:none!important;overflow:hidden;
  transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.ox-auth .ox-alt::before{content:none!important}
.ox-auth .ox-alt::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--blue) 12%,transparent) 50%,transparent 70%);
  translate:120% 0;transition:translate .7s var(--ease);pointer-events:none}
.ox-auth .ox-alt:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line))!important;background:var(--surface)!important;transform:translateY(-1px);box-shadow:var(--sh-2)!important}
.ox-auth .ox-alt:hover::after{translate:-120% 0}
.ox-alt-ic{flex:none;display:grid;place-items:center;inline-size:38px;block-size:38px;border-radius:10px;background:var(--blue-tint);color:var(--blue);font-size:var(--fs-500)}
.ox-alt.is-sms .ox-alt-ic{background:var(--teal-tint);color:var(--teal)}
.ox-alt-tx{flex:1;min-inline-size:0;display:flex;flex-direction:column;line-height:1.5;text-align:start}
.ox-alt-tx b{font-size:var(--fs-200);font-weight:700;color:var(--ink)}
.ox-alt-tx small{font-size:var(--fs-100);font-weight:500;color:var(--ink-3)}
.ox-alt-go{flex:none;color:var(--ink-3);transition:color var(--t) var(--ease),translate var(--t) var(--ease)}
.ox-alt:hover .ox-alt-go{color:var(--blue);translate:-3px 0}

/* ---- sign-in console ---------------------------------------------------- */
html.ox-con-lock,html.ox-con-lock body{overflow:hidden}
.ox-con{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:16px;color:#C9F5DF;
  background:#04070D;animation:ox-con-in .35s var(--ease) both}
.ox-con[hidden]{display:none}
.ox-con.is-instant{animation:none}
@keyframes ox-con-in{from{opacity:0}}
.ox-con-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 38%,rgba(20,99,216,.28),transparent 70%),
    radial-gradient(40% 35% at 78% 85%,rgba(14,147,132,.18),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 100%}
.ox-con-sky::after{content:"";position:absolute;inset:-50% 0 auto;block-size:40%;background:linear-gradient(transparent,rgba(96,165,250,.07),transparent);animation:ox-con-scan 3.2s linear infinite}
@keyframes ox-con-scan{to{transform:translateY(400%)}}
.ox-con-stage{position:relative;inline-size:min(680px,100%);display:grid;gap:14px;animation:ox-con-rise .5s var(--ease) both}
.ox-con.is-instant .ox-con-stage{animation:none}
@keyframes ox-con-rise{from{opacity:0;transform:translateY(14px) scale(.98)}}

/* the 1U unit above the window: LEDs light as the session progresses */
.ox-con-unit{display:flex;align-items:center;gap:14px;block-size:46px;padding-inline:10px;border-radius:8px;direction:ltr;
  background:linear-gradient(180deg,#1E293B,#0F172A);border:1px solid #334155;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -18px rgba(0,0,0,.8)}
.ox-con-ear{inline-size:14px;block-size:32px;border-radius:4px;background:#111827;border:1px solid #334155;
  background-image:radial-gradient(circle,#475569 2px,transparent 2.5px),radial-gradient(circle,#475569 2px,transparent 2.5px);background-size:14px 16px;background-position:center 0,center 16px;background-repeat:no-repeat}
.ox-con-brand{font:800 13px/1 var(--font);color:#E2E8F0;letter-spacing:.12em}
.ox-con-brand small{display:block;margin-top:3px;font-size:8px;font-weight:600;color:#64748B;letter-spacing:.3em}
.ox-con-leds{display:flex;gap:6px}
.ox-con-leds i{inline-size:7px;block-size:7px;border-radius:50%;background:#1F2937;box-shadow:inset 0 0 0 1px #374151;transition:background .25s,box-shadow .25s}
.ox-con-leds i.is-on{background:#34D399;box-shadow:0 0 8px #34D399}
.ox-con-leds i.is-on:nth-child(3n){background:#60A5FA;box-shadow:0 0 8px #60A5FA}
.ox-con-bays{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ox-con-bays i{block-size:22px;border-radius:3px;background:repeating-linear-gradient(90deg,#1E293B 0 3px,#0B1220 3px 6px);border:1px solid #273449}

/* the console window */
.ox-con-win{position:relative;border-radius:14px;overflow:hidden;background:rgba(7,12,22,.92);border:1px solid rgba(148,163,184,.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 40px 90px -30px rgba(20,99,216,.45),0 30px 60px -30px rgba(0,0,0,.9);backdrop-filter:blur(8px)}
.ox-con-win::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.ox-con-bar{display:flex;align-items:center;gap:12px;block-size:38px;padding-inline:14px;border-block-end:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.8);
  font:600 12px/1 var(--mono);color:#94A3B8}
.ox-con-dots{display:flex;gap:6px}
.ox-con-dots i{inline-size:10px;block-size:10px;border-radius:50%;background:#334155}
.ox-con-dots i:nth-child(1){background:#F87171}.ox-con-dots i:nth-child(2){background:#FBBF24}.ox-con-dots i:nth-child(3){background:#34D399}
.ox-con-title{flex:1;text-align:center}
.ox-con-sec{color:#34D399}
.ox-con-out{margin:0;padding:18px 20px 22px;min-block-size:250px;max-block-size:60vh;overflow:auto;background:none;border:0;
  font:500 13.5px/1.9 var(--mono);color:#C9F5DF;white-space:pre-wrap;word-break:break-word;text-align:left}
.ox-con-out .c-dim{color:#64748B}
.ox-con-out .c-head{color:#E2E8F0;font-weight:700}
.ox-con-out .c-ok{color:#34D399;font-weight:700}
.ox-con-out .c-warn{color:#FBBF24;font-weight:700}
.ox-con-out .c-acc{color:#93C5FD}
.ox-con-out .c-spin{color:#60A5FA;font-weight:700}
.ox-con-out .c-fa{display:block;margin-top:8px;font:700 15px/1.8 var(--font);color:#F1F5F9;text-align:right}
.ox-con-out .c-caret{display:inline-block;inline-size:8px;block-size:1.05em;margin-inline-start:4px;vertical-align:-2px;background:#34D399;animation:ox-con-caret 1s steps(1) infinite}
@keyframes ox-con-caret{50%{opacity:0}}
.ox-con-prog{block-size:3px;background:rgba(148,163,184,.12)}
.ox-con-prog span{display:block;block-size:100%;inline-size:0;background:linear-gradient(90deg,#0E9384,#1463D8,#60A5FA);box-shadow:0 0 12px #60A5FA;transition:inline-size .35s var(--ease)}
.ox-con-hint{margin:0;text-align:center;font-size:var(--fs-100);color:#64748B}

/* fold away into the panel */
.ox-con.is-out{animation:ox-con-out .62s var(--ease) both}
.ox-con.is-out .ox-con-stage{animation:ox-con-shrink .62s var(--ease) both}
@keyframes ox-con-out{to{opacity:0;visibility:hidden}}
@keyframes ox-con-shrink{to{transform:scale(.92) translateY(-12px);filter:blur(6px)}}
html.ox-con-reveal .ox-main,html.ox-con-reveal main{animation:ox-reveal .9s var(--ease) both}
@keyframes ox-reveal{from{opacity:.4;filter:blur(8px);transform:scale(1.01)}}

/* ---- dashboard: operations deck ---------------------------------------- */
.ox-deck{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;overflow:hidden;
  margin-block-end:var(--s5);padding:var(--s8) var(--s8);border-radius:var(--r-lg);color:#E6EBF2;
  background:linear-gradient(135deg,#0B1424 0%,#0E1B33 55%,#0B2230 100%);box-shadow:0 30px 60px -30px rgba(11,20,36,.55);isolation:isolate}
.ox-deck-grid{position:absolute;inset:0;z-index:-1;opacity:.5;
  background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/28px 100%;
  -webkit-mask-image:radial-gradient(ellipse at 20% 50%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 20% 50%,#000 10%,transparent 70%)}
.ox-deck-glow{position:absolute;inset-block-start:-40%;inset-inline-end:-10%;z-index:-1;inline-size:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(20,99,216,.45),transparent 65%);filter:blur(10px);animation:ox-deck-glow 9s ease-in-out infinite alternate}
@keyframes ox-deck-glow{to{transform:translate(-12%,18%) scale(1.15)}}
.ox-deck-plates{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block-end:var(--s4)}
.ox-deck-plate{display:inline-flex;align-items:center;gap:6px;block-size:28px;padding-inline:12px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);font-size:var(--fs-100);font-weight:600;color:#CBD5E1}
.ox-deck-plate i{color:#60A5FA}
.ox-body .ox-deck-title,.ox-deck-title{margin:0;font-size:var(--fs-900);font-weight:800;line-height:1.3;color:#F8FAFC!important;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.ox-body .ox-deck-title [data-ox-greet]{color:#F8FAFC}
.ox-deck-name{display:inline-block;padding-inline:2px;background:linear-gradient(90deg,#7DD3FC,#C4B5FD);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.ox-deck-name{color:#7DD3FC;-webkit-text-fill-color:currentColor}}
.ox-deck-sub{margin:var(--s2) 0 0;max-inline-size:56ch;font-size:var(--fs-400);color:#94A3B8}
.ox-deck-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block-start:var(--s5)}
.ox-deck-btn{display:inline-flex;align-items:center;gap:8px;block-size:42px;padding-inline:16px;border-radius:10px;font-size:var(--fs-300);font-weight:700;
  color:#E2E8F0!important;text-decoration:none!important;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .2s,transform .2s,border-color .2s}
.ox-deck-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.ox-deck-btn.is-primary{background:linear-gradient(180deg,#3B82F6,#1463D8);border-color:transparent;color:#fff!important;box-shadow:0 10px 24px -10px #1463D8}
.ox-deck-btn.is-primary:hover{filter:brightness(1.08)}
.ox-deck-btn.is-warn{background:rgba(242,163,58,.16);border-color:rgba(242,163,58,.4);color:#FCD34D!important}

.ox-deck-rack{display:grid;gap:8px;inline-size:210px;padding:12px;border-radius:12px;text-decoration:none!important;color:inherit!important;
  background:linear-gradient(180deg,#1A2436,#0E1626);border:1px solid #2A3A52;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 40px -20px rgba(0,0,0,.7);
  transition:transform .3s var(--ease),border-color .3s}
.ox-deck-rack:hover{transform:translateY(-3px) rotate(-.4deg);border-color:#3B82F6}
.ox-deck-rack-top{display:flex;justify-content:space-between;font:700 10px/1 var(--mono);color:#64748B;letter-spacing:.15em;direction:ltr}
.ox-deck-units{display:grid;gap:4px}
.ox-deck-units i{position:relative;display:block;block-size:14px;border-radius:3px;background:#111A2B;border:1px solid #223047;
  background-image:repeating-linear-gradient(90deg,transparent 0 46px,#1B2840 46px 48px)}
.ox-deck-units i::before,.ox-deck-units i::after{content:"";position:absolute;inset-block-start:4px;inline-size:5px;block-size:5px;border-radius:50%;background:#253247}
.ox-deck-units i::before{inset-inline-start:8px}.ox-deck-units i::after{inset-inline-start:17px}
.ox-deck-units i.is-on{background-color:#15233A;border-color:#2B4466}
.ox-deck-units i.is-on::before{background:#34D399;box-shadow:0 0 6px #34D399;animation:ox-deck-led .5s calc(var(--d) * 120ms) both}
.ox-deck-units i.is-on::after{background:#60A5FA;box-shadow:0 0 6px #60A5FA;animation:ox-deck-blink 1.6s calc(var(--d) * 230ms) steps(2) infinite}
@keyframes ox-deck-led{from{background:#253247;box-shadow:none}}
@keyframes ox-deck-blink{50%{opacity:.25}}
.ox-deck-rack-ft{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-block-start:6px;border-block-start:1px solid #223047}
.ox-deck-rack-ft b{font-size:var(--fs-800);font-weight:800;color:#fff;line-height:1}
.ox-deck-rack-ft small{font-size:var(--fs-100);color:#94A3B8}

/* counters */
.ox-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--s4);margin-block-end:var(--s5)}
.ox-tile{--c:var(--blue);--ct:var(--blue-tint);position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic k" "v v" "f f";gap:var(--s2) var(--s3);
  align-items:center;padding:var(--s5);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);
  color:var(--ink)!important;text-decoration:none!important;box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);animation:ox-up .5s calc(var(--i,0) * 70ms) var(--ease) both}
@keyframes ox-up{from{opacity:0;transform:translateY(10px)}}
.ox-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.ox-tile.is-teal{--c:var(--teal);--ct:var(--teal-tint)}
.ox-tile.is-amber{--c:var(--amber);--ct:var(--amber-tint)}
.ox-tile.is-violet{--c:#7C3AED;--ct:color-mix(in srgb,#7C3AED 12%,var(--surface))}
.ox-tile::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;background:linear-gradient(90deg,var(--c),transparent);opacity:.8}
.ox-tile.is-alert{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.ox-tile-ic{grid-area:ic;display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:12px;background:var(--ct);color:var(--c);font-size:var(--fs-500)}
.ox-tile-k{grid-area:k;font-size:var(--fs-200);font-weight:600;color:var(--ink-3)}
.ox-tile-v{grid-area:v;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-block-start:var(--s2)}
.ox-tile-v b{font-size:var(--fs-900);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.ox-tile-v.is-money b{font-size:var(--fs-700)}
.ox-tile-v small{font-size:var(--fs-200);color:var(--ink-3)}
.ox-tile-f{grid-area:f;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-200);font-weight:600;color:var(--c)}
.ox-tile-f i{font-size:var(--fs-100);transition:translate var(--t) var(--ease)}
.ox-tile:hover .ox-tile-f i{translate:-3px 0}
.ox-tile-bars{position:absolute;inset-block-end:var(--s4);inset-inline-end:var(--s4);display:flex;align-items:flex-end;gap:3px;block-size:34px;opacity:.5}
.ox-tile-bars i{inline-size:5px;border-radius:2px;background:var(--c);opacity:.35;animation:ox-bars 2.4s ease-in-out infinite alternate}
.ox-tile-bars i:nth-child(1){block-size:30%}.ox-tile-bars i:nth-child(2){block-size:55%;animation-delay:.2s}.ox-tile-bars i:nth-child(3){block-size:40%;animation-delay:.4s}
.ox-tile-bars i:nth-child(4){block-size:75%;animation-delay:.6s}.ox-tile-bars i:nth-child(5){block-size:60%;animation-delay:.8s}.ox-tile-bars i:nth-child(6){block-size:90%;animation-delay:1s}.ox-tile-bars i:nth-child(7){block-size:70%;opacity:.8;animation-delay:1.2s}
@keyframes ox-bars{to{transform:scaleY(.6);transform-origin:bottom}}

.ox-dash-alert{margin-block-end:var(--s5)}
.ox-dash-addon{margin-block-end:var(--s5)}

/* quick actions */
.ox-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:var(--s3);margin-block-end:var(--s6)}
.ox-quick a{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s4) var(--s2);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2)!important;text-decoration:none!important;font-size:var(--fs-200);font-weight:700;text-align:center;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);animation:ox-up .5s calc(200ms + var(--i,0) * 50ms) var(--ease) both}
.ox-quick a span{display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;background:var(--surface-2);color:var(--blue);font-size:var(--fs-500);transition:background var(--t),color var(--t),transform var(--t) var(--ease)}
.ox-quick a:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line));color:var(--ink)!important;transform:translateY(-2px)}
.ox-quick a:hover span{background:var(--blue);color:var(--on-blue);transform:scale(1.06) rotate(-4deg)}

/* WHMCS homepage panels */
.ox-dpanel{--c:var(--blue);--ct:var(--blue-tint);border-radius:var(--r-lg)!important;box-shadow:var(--sh-1);transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
  animation:ox-up .5s var(--ease) both}
.ox-dpanels .ox-dpanel:nth-child(2){animation-delay:.06s}.ox-dpanels .ox-dpanel:nth-child(3){animation-delay:.12s}.ox-dpanels .ox-dpanel:nth-child(n+4){animation-delay:.18s}
.ox-dpanel:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.ox-dpanel.is-gold,.ox-dpanel.is-orange,.ox-dpanel.is-amber{--c:var(--amber);--ct:var(--amber-tint)}
.ox-dpanel.is-red,.ox-dpanel.is-pomegranate{--c:var(--red);--ct:var(--red-tint)}
.ox-dpanel.is-green,.ox-dpanel.is-emerald,.ox-dpanel.is-teal{--c:var(--teal);--ct:var(--teal-tint)}
.ox-dpanel.is-purple,.ox-dpanel.is-midnight-blue{--c:#7C3AED;--ct:color-mix(in srgb,#7C3AED 12%,var(--surface))}
.ox-dpanel .ox-card-hd{position:relative;border-block-end-color:var(--line)}
.ox-dpanel .ox-card-hd::before{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:var(--s5);inline-size:44px;block-size:3px;border-radius:0 0 3px 3px;background:var(--c)}
.ox-dpanel .ox-card-title{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-400);font-weight:800}
.ox-dpanel-ic{display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:10px;background:var(--ct);color:var(--c);font-size:var(--fs-300)}
.ox-dpanel-badge{display:inline-grid;place-items:center;min-inline-size:24px;block-size:24px;padding-inline:7px;border-radius:999px;background:var(--ct);color:var(--c);font-size:var(--fs-100);font-weight:800}
.ox-dpanel-btn{display:inline-flex;align-items:center;gap:6px;block-size:32px;padding-inline:12px;border-radius:8px;background:var(--surface-2);color:var(--ink-2)!important;
  font-size:var(--fs-200);font-weight:700;text-decoration:none!important;transition:background var(--t),color var(--t)}
.ox-dpanel-btn:hover{background:var(--ct);color:var(--c)!important}
.ox-dpanel .list-group-item{display:flex;align-items:center;gap:var(--s2);transition:background var(--t-fast),padding var(--t) var(--ease)}
.ox-dpanel a.list-group-item:hover{background:var(--surface-2)!important;padding-inline-start:calc(var(--s5) + 4px)!important}
.ox-dpanel .list-group-item>i:first-child{color:var(--c)}

@media (max-width:991px){
  .ox-deck{grid-template-columns:1fr;padding:var(--s6) var(--s5)}
  .ox-deck-rack{inline-size:100%;grid-template-columns:1fr}
  .ox-deck-units{grid-template-columns:repeat(4,1fr)}
  .ox-deck-title{font-size:var(--fs-700)}
}
@media (max-width:575px){
  .ox-con-out{font-size:12px;min-block-size:220px;padding:14px}
  .ox-con-bays{display:none}
  .ox-tile-v b{font-size:var(--fs-800)}
}
@media (prefers-reduced-motion:reduce){
  .ox-con,.ox-con *,.ox-deck *,.ox-tile,.ox-tile *,.ox-quick a,.ox-dpanel{animation:none!important;transition:none!important}
}