/* Type (2026-10-11, picked in the Font lab): Inter for UI text, IBM Plex Sans for data (IPs, passwords, hostnames); the left menu and top bar stay DM Sans. Both OFL, self-hosted (fonts/INTER-LICENSE.txt, fonts/LICENSE.md). */
@font-face{font-family:"Inter";src:url(../fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-var.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
/* RedSwitches client area v2 — developer-first UI layer (same language as the server panel). */
.rx,.rx-pal,.rx-toast,.rx-keys,.rx-drawer,.rx-shell{--bg:#fff;--soft:#f7f8fa;--line:#e5e7eb;--line2:#d1d5db;--ink:#111827;--ink2:#374151;--mut:#6b7280;--brand:#14123f;--brand-hi:#26236a;--acc:#4f46e5;--acc-soft:#eef0ff;--acc-ink:#3730a3;--ok:#0e9f6e;--ok-soft:#e8f6f1;--ok-ink:#05603f;--red:#d23c4b;--red-soft:#fdeef0;--amber:#b45309;--amber-soft:#fff7e8;--blue:#2563eb;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--font:var(--sans);--mono:"IBM Plex Sans","Inter",system-ui,sans-serif;--r:12px;font:14px/1.5 var(--sans);color:var(--ink)}
.rx *,.rx-pal *{box-sizing:border-box}
.rx-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rx-mono{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:-.01em}
.rx-mut{color:var(--mut);font-size:13px}
.rx-kbd{font:500 11px/1 var(--mono);color:var(--mut);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:3px 5px;background:#fff;white-space:nowrap}

.rx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin:0 0 18px}
.rx-h1{font:500 26px/1.2 var(--sans);letter-spacing:-.015em;color:var(--ink);margin:0}
.rx-sub{margin:4px 0 0;color:var(--mut);font-size:14px}
.rx-head-a{display:flex;gap:8px;flex-wrap:wrap}

.rx-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line2);border-radius:8px;background:#fff;color:var(--ink);font:500 14px var(--sans);text-decoration:none!important;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.rx-btn:hover{background:var(--soft);border-color:#b8bec8;color:var(--ink)}
.rx-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.rx-btn.primary:hover{background:var(--brand-hi);border-color:var(--brand-hi);color:#fff}
.rx-btn.sm{min-height:34px;padding:0 12px;font-size:13px}
.rx-search-btn{color:var(--mut)}
.rx-search-btn .rx-kbd{margin-left:6px}
.rx-btn:focus-visible,.rx-cp:focus-visible,.rx-seg button:focus-visible,.rx-host:focus-visible,.rx-go a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.rx-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;border:1px solid;margin:0 0 16px;font-size:14px;text-decoration:none!important}
.rx-alert.warn{background:var(--amber-soft);border-color:#f3d39b;color:#7a3e05}
.rx-alert.bad{background:var(--red-soft);border-color:#f5c2c8;color:#8a1c28}
.rx-alert b{font-weight:500}
.rx-alert-go{margin-left:auto;font-weight:500;white-space:nowrap}
.rx-alert:hover .rx-alert-go{text-decoration:underline}

.rx-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--line)}
.rx-filter{display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:420px;height:38px;padding:0 8px 0 12px;border:1px solid var(--line2);border-radius:8px;background:#fff;color:var(--mut);margin:0;cursor:text}
.rx-filter:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.rx-filter input{flex:1;min-width:0;border:0;outline:0;background:none;font:14px var(--sans);color:var(--ink);padding:0}
.rx-filter input::-webkit-search-cancel-button{display:none}
.rx-seg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
.rx-seg button{appearance:none;border:0;background:none;border-radius:6px;padding:5px 12px;font:500 13px var(--sans);color:var(--mut);cursor:pointer}
.rx-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(17,24,39,.08)}
.rx-seg button span{color:var(--mut);margin-left:4px;font-weight:400}

.rx-table{width:100%;border-collapse:collapse;margin:0}
.rx-table th{font:500 12px var(--sans);color:var(--mut);text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--soft);white-space:nowrap}
.rx-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.rx-table tbody tr:last-child td{border-bottom:0}
.rx-row{cursor:pointer;transition:background .1s}
.rx-row:hover,.rx-row.kb{background:#f9fafb}
.rx-row.kb{box-shadow:inset 3px 0 0 var(--acc)}
.rx-row.rx-past .rx-host{color:var(--mut)}
.rx-host{font-weight:500;color:var(--ink)!important;text-decoration:none!important;overflow-wrap:anywhere}
.rx-host:hover{color:var(--acc)!important}
.rx-c-ip{white-space:nowrap}
.rx-cp{appearance:none;border:0;background:none;color:var(--mut);padding:5px;margin:-5px 0 -5px 4px;border-radius:6px;cursor:pointer;vertical-align:middle;display:inline-grid;place-items:center}
.rx-cp:hover{background:var(--soft);color:var(--ink)}
.rx-cp.ok{color:var(--acc)}
.rx-c-due{white-space:nowrap}
.rx-go{width:36px;text-align:right}
.rx-go a{color:var(--mut);display:inline-grid;place-items:center;padding:4px;border-radius:6px}
.rx-row:hover .rx-go a{color:var(--ink)}

.rx-st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap}
.rx-st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mut)}
.rx-st.st-active::before{background:var(--ok)}
.rx-st.st-suspended::before{background:#d97706}
.rx-st.st-pending::before{background:var(--blue)}
.rx-st.st-terminated,.rx-st.st-cancelled,.rx-st.st-fraud,.rx-st.st-completed{color:var(--mut)}

.rx-empty{padding:28px 16px;text-align:center;color:var(--mut);margin:0}
.rx-blank{padding:48px 20px;text-align:center}
.rx-blank h2{font:500 19px var(--sans);margin:0 0 6px}
.rx-blank p{color:var(--mut);margin:0 0 16px}

.rx-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--soft);font-size:14px}
.rx-help b{font-weight:500}
.rx-help-a{display:flex;flex-wrap:wrap;gap:8px}

/* toast */
.rx-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#111827;color:#fff;padding:10px 16px;border-radius:8px;font:14px var(--sans);box-shadow:0 10px 30px rgba(17,24,39,.25);transition:opacity .15s,transform .15s;z-index:2000}
.rx-toast.show{opacity:1;transform:translate(-50%,0)}

/* phones + small tablets: rows become compact cards */
@media (max-width:760px){
  .rx-h1{font-size:22px}
  .rx-head-a{width:100%}.rx-head-a .rx-btn{flex:1}
  .rx-filter{max-width:none}
  .rx-table thead{display:none}
  .rx-table,.rx-table tbody{display:block}
  .rx-table tr.rx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .rx-table tr.rx-row[hidden]{display:none}
  .rx-table td{padding:0;border:0}
  .rx-c-host{grid-column:1/2}.rx-c-st{grid-column:2/3;grid-row:1;justify-self:end}
  .rx-c-ip{grid-column:1/3}.rx-c-loc{grid-column:1/2;color:var(--mut);font-size:13px}.rx-c-due{grid-column:2/3;text-align:right;font-size:13px}
  .rx-go{display:none}
  .rx-alert{flex-wrap:wrap}.rx-alert-go{margin-left:0}
}

/* ---- every remaining WHMCS list table (invoices, email history, contacts…): same look, no plugin chrome ---- */
body.rs-v2 .dataTables_length,body.rs-v2 .dataTables_info{display:none!important}
body.rs-v2 .table-container,body.rs-v2 .dataTables_wrapper{font:14px/1.5 "Inter",system-ui,sans-serif}
body.rs-v2 .dataTables_filter{margin:0 0 12px}
body.rs-v2 .dataTables_filter label{display:flex;align-items:center;gap:8px;font-size:0;margin:0}
body.rs-v2 .dataTables_filter input{width:280px!important;max-width:100%;height:38px;border:1px solid #d1d5db!important;border-radius:8px!important;padding:0 12px!important;font:14px "Inter",system-ui,sans-serif!important;margin:0!important;box-shadow:none!important}
body.rs-v2 .dataTables_filter input:focus{border-color:#4f46e5!important;box-shadow:0 0 0 3px rgba(79,70,229,.15)!important;outline:0}
body.rs-v2 table.table-list{border:1px solid #e5e7eb;border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff}
body.rs-v2 table.table-list thead th{background:#f7f8fa!important;color:#6b7280!important;font:500 12px "Inter",system-ui,sans-serif!important;text-transform:none!important;letter-spacing:0!important;border:0!important;border-bottom:1px solid #e5e7eb!important;padding:10px 16px!important}
body.rs-v2 table.table-list tbody td{border:0!important;border-bottom:1px solid #e5e7eb!important;padding:12px 16px!important;vertical-align:middle!important;color:#111827;font-size:14px}
body.rs-v2 table.table-list tbody tr:last-child td{border-bottom:0!important}
body.rs-v2 table.table-list tbody tr:hover td{background:#f9fafb}
body.rs-v2 .dataTables_paginate{margin-top:12px}
body.rs-v2 .dataTables_paginate .pagination{gap:4px;justify-content:flex-end}
body.rs-v2 .dataTables_paginate .page-link{border:1px solid #e5e7eb!important;border-radius:8px!important;color:#374151!important;font:500 13px "Inter",system-ui,sans-serif;padding:6px 11px;background:#fff}
body.rs-v2 .dataTables_paginate .page-item.active .page-link{background:#111827!important;border-color:#111827!important;color:#fff!important}
body.rs-v2 .dataTables_paginate .page-item.disabled .page-link{color:#c4c8cf!important}
body.rs-v2 table.table-list .label,body.rs-v2 table.table-list .status{border-radius:6px!important;font:500 12px "Inter",system-ui,sans-serif!important;padding:3px 8px!important;text-transform:none!important}
@media (hover:none){.rx-kbd,.rx-search-btn .rx-kbd{display:none}}
body.rs-v2 table.table-list .btn{background:#fff!important;color:#111827!important;border:1px solid #d1d5db!important;border-radius:8px!important;font:500 13px "Inter",system-ui,sans-serif!important;padding:5px 12px!important;box-shadow:none!important}
body.rs-v2 table.table-list .btn:hover{background:#f7f8fa!important}

/* ---- command palette + shortcut help ---- */
.rx-pal{position:fixed;inset:0;z-index:2100;background:rgba(17,24,39,.35);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.rx-pal[hidden]{display:none}
.rx-pal-box{width:100%;max-width:620px;background:#fff;border-radius:12px;box-shadow:0 24px 60px rgba(17,24,39,.3);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.rx-pal-in{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line);color:var(--mut)}
.rx-pal-in input{flex:1;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;height:52px;font:16px var(--sans)!important;color:var(--ink);background:none!important}
.rx-pal-list{overflow-y:auto;padding:6px}
.rx-pal-g{font:500 12px var(--sans);color:var(--mut);padding:10px 10px 4px}
.rx-pal-it{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink)!important;text-decoration:none!important;font-size:14px}
.rx-pal-it .rx-i{color:var(--mut)}
.rx-pal-it.on{background:var(--acc-soft)}
.rx-pal-it.on .rx-i{color:var(--acc-ink)}
.rx-pal-l{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.rx-pal-s{margin-left:auto;color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);letter-spacing:-.01em}
.rx-pal-none{padding:28px;text-align:center;color:var(--mut)}
.rx-pal-f{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line);background:var(--soft);font-size:12px;color:var(--mut)}
.rx-pal-f .rx-kbd{margin-right:2px}
.rx-keys-box{max-width:420px;padding:6px 0 10px}
.rx-keys-h{display:flex;align-items:center;justify-content:space-between;font:500 16px var(--sans);padding:12px 18px 8px}
.rx-key-r{display:flex;justify-content:space-between;align-items:center;padding:7px 18px;font-size:14px;color:var(--ink2)}
.rx-key-r .rx-kbd{margin-left:3px}
@media (max-width:640px){.rx-pal{padding:12px}.rx-pal-f{display:none}.rx-pal-s{display:none}.rx-pal-l{max-width:none}}

/* ---- one corner language everywhere (same as the server panel): rounded-square, never pills ---- */
body.rs-v2 .btn,body.rs-v2 .btn-sm,body.rs-v2 .btn-lg,body.rs-v2 .rounded-pill,body.rs-v2 .btn-pill,body.rs-v2 .nav-pills .nav-link,body.rs-v2 .form-control,body.rs-v2 .custom-select,body.rs-v2 .input-group-text,body.rs-v2 .dropdown-menu,body.rs-v2 .alert{border-radius:8px!important}
body.rs-v2 .badge,body.rs-v2 .badge-pill,body.rs-v2 .label,body.rs-v2 .status,body.rs-v2 .rs-badge{border-radius:6px!important}
body.rs-v2 .card,body.rs-v2 .panel,body.rs-v2 .modal-content{border-radius:12px!important}
body.rs-v2 .input-group>.form-control:not(:last-child),body.rs-v2 .input-group>.custom-select:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}
body.rs-v2 .input-group>.form-control:not(:first-child),body.rs-v2 .input-group>.custom-select:not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important}

/* ===================== v2 app shell ===================== */
.rx-shell{--rail-w:232px;font-family:"Inter",system-ui,sans-serif}
.rx-rail{position:sticky;top:0;height:100vh;width:var(--rail-w);flex:0 0 var(--rail-w);display:flex;flex-direction:column;gap:2px;padding:14px 12px 10px;background:#fff;border-right:1px solid #e5e7eb;z-index:20}
.rx-rail-brand{display:block;padding:4px 8px 16px}
.rx-rail-brand img{height:22px;width:auto;display:block}
.rx-deploy{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:8px;background:#14123f;color:#fff!important;font:500 14px "DM Sans",system-ui,sans-serif;text-decoration:none!important;margin-bottom:14px;transition:background .12s}
.rx-deploy:hover{background:#26236a}
.rx-nav{display:grid;gap:2px}
.rx-nav a,.rx-nav-btn{appearance:none;border:0;background:none;width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font:500 14px "DM Sans",system-ui,sans-serif;color:#374151!important;text-decoration:none!important;cursor:pointer;text-align:left}
.rx-nav a:hover,.rx-nav-btn:hover{background:#f3f4f6}
.rx-nav a[aria-current="page"]{background:#eef0ff;color:#3730a3!important}
.rx-nav .rx-i,.rx-nav-btn .rx-i{width:17px;height:17px}
.rx-ct{margin-left:auto;font-size:12px;font-weight:400;color:#6b7280}
.rx-rail-sp{flex:1}
.rx-me{border-top:1px solid #e5e7eb;margin-top:8px;padding-top:8px;position:relative}
.rx-me summary{list-style:none;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;cursor:pointer}
.rx-me summary::-webkit-details-marker{display:none}
.rx-me summary:hover{background:#f3f4f6}
.rx-av{width:30px;height:30px;border-radius:50%;background:#eef0f4;color:#374151;display:grid;place-items:center;font:500 12px "DM Sans",system-ui,sans-serif;flex:none;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(17,24,39,.06)}
.rx-av svg{width:100%;height:100%;display:block}
.rx-av.lg{width:56px;height:56px}
.rx-me-t{display:grid;min-width:0;line-height:1.25}
.rx-me-n{font:500 13.5px "DM Sans",system-ui,sans-serif;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-me-c{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-me summary .rx-i{margin-left:auto;color:#6b7280}
.rx-me-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 30px rgba(17,24,39,.12);padding:6px;display:grid}
.rx-me-menu a{padding:8px 10px;border-radius:8px;color:#111827!important;text-decoration:none!important;font-size:14px}
.rx-me-menu a:hover{background:#f3f4f6}
.rx-top{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(6px);border-bottom:1px solid #e5e7eb}
.rx-top-brand{display:none}
.rx-top-brand img{height:20px;display:block}
.rx-top-search{appearance:none;flex:1;max-width:480px;display:flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#6b7280;font:14px "DM Sans",system-ui,sans-serif;cursor:pointer;text-align:left}
.rx-top-search:hover{border-color:#b8bec8}
.rx-top-search span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-top-a{margin-left:auto;display:flex;gap:8px}
.rx-icon-btn{appearance:none;position:relative;width:36px;height:36px;display:grid;place-items:center;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#374151!important;cursor:pointer}
.rx-icon-btn:hover{background:#f7f8fa}
.rx-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:#d23c4b;box-shadow:0 0 0 2px #fff}
body.rs-v2 .rx-shell #main-body{background:#f7f8fa;padding:24px clamp(20px,2.4vw,48px) 40px}
body.rs-v2 .rx-shell .rs-content{max-width:1280px;margin-left:auto!important;margin-right:auto!important}
/* one server = a reading width, centred: title, actions and cards stay in one eye-span on big screens */
body.rs-v2 .rx-shell .rsm-wrap{max-width:none;margin-left:0;margin-right:0}
.rx-rail a:focus-visible,.rx-rail button:focus-visible,.rx-rail summary:focus-visible,.rx-top button:focus-visible,.rx-top a:focus-visible,.rx-tabbar a:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}

/* phone tab bar */
.rx-tabbar{display:none}
@media (max-width:860px){
  .rx-rail{display:none}
  .rx-top{padding:0 12px;gap:8px}
  .rx-top-brand{display:block}
  .rx-top-search{flex:0 0 36px;width:36px;padding:0;justify-content:center;margin-left:auto}
  .rx-top-search span,.rx-top-search .rx-kbd{display:none}
  .rx-top-a{margin-left:0}
  body.rs-v2 .rx-shell #main-body{padding:16px 14px calc(84px + env(safe-area-inset-bottom,0px))}
  .rx-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid #e5e7eb;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .rx-tabbar a{display:grid;justify-items:center;gap:3px;padding:4px 2px;font:500 11px "DM Sans",system-ui,sans-serif;color:#6b7280!important;text-decoration:none!important}
  .rx-tabbar a[aria-current="page"]{color:#3730a3!important}
  .rx-tabbar .rx-i{width:20px;height:20px}
  .rx-tab-deploy span{width:36px;height:26px;border-radius:8px;background:#14123f;color:#fff;display:grid;place-items:center}
  .rx-tab-deploy span .rx-i{width:18px;height:18px}
}

/* drawers (Help, Notifications) */
.rx-drawer{position:fixed;inset:0;z-index:2050;background:rgba(17,24,39,.3);display:flex;justify-content:flex-end}
.rx-drawer[hidden]{display:none}
.rx-drawer-box{width:380px;max-width:100%;height:100%;background:#fff;box-shadow:-16px 0 40px rgba(17,24,39,.15);padding:18px 20px;overflow-y:auto;font:14px/1.5 "Inter",system-ui,sans-serif;color:#111827}
.rx-drawer-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rx-drawer-h h2{font:500 19px "Inter",system-ui,sans-serif;margin:0}
.rx-block{display:flex;width:100%;margin-bottom:8px}
.rx-bell-list{display:grid;gap:8px}
.rx-bell-it{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:10px;border:1px solid #e5e7eb;border-radius:8px;color:#111827!important;text-decoration:none!important}
.rx-bell-it:hover{background:#f7f8fa}
.rx-bell-it b{font-weight:500;display:block}
.rx-bell-it .rx-mut{display:block}
.rx-bell-ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#f3f4f6;color:#374151}
.rx-bell-ic.ok{background:#e8f6f1;color:#05603f}.rx-bell-ic.bad{background:#fdeef0;color:#8a1c28}.rx-bell-ic.money{background:#fff7e8;color:#7a3e05}.rx-bell-it.new{border-color:#b8e6d6}
.rx-bell-none{padding:30px 10px;text-align:center;color:#6b7280}

/* row action menu (⋯) */
.rx-menu{position:relative;display:inline-block}
.rx-menu summary{list-style:none}
.rx-menu summary::-webkit-details-marker{display:none}
.rx-menu-l{position:absolute;right:0;top:calc(100% + 4px);min-width:210px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 30px rgba(17,24,39,.14);padding:6px;display:grid;z-index:25;text-align:left}
.rx-menu-l a,.rx-menu-l button{appearance:none;border:0;background:none;text-align:left;padding:8px 10px;border-radius:8px;font:14px "Inter",system-ui,sans-serif;color:#111827!important;text-decoration:none!important;cursor:pointer;white-space:nowrap}
.rx-menu-l a:hover,.rx-menu-l button:hover{background:#f3f4f6}
.rx-go{width:48px}
@media (max-width:760px){.rx-table td.rx-c-host{grid-column:1/2;grid-row:1}.rx-table td.rx-c-st{grid-column:2/3;grid-row:1}.rx-table td.rx-c-ip{grid-column:1/2;grid-row:2}.rx-table td.rx-go{display:block!important;width:auto;grid-column:2/3;grid-row:2;justify-self:end}.rx-table td.rx-c-loc{grid-column:1/2;grid-row:3}.rx-table td.rx-c-due{grid-column:2/3;grid-row:3}}

/* slim email-verification notice + left-aligned console content */

body.rs-v2 .rx-verify{display:flex!important;align-items:center;gap:10px;margin:0;padding:8px 28px;background:#fff7e8!important;border:0!important;border-bottom:1px solid #f3d39b!important;color:#7a3e05!important;font:13.5px "Inter",system-ui,sans-serif}
body.rs-v2 .rx-verify .text{flex:1;min-width:0}
.rx-linkbtn{appearance:none;border:0;background:none;padding:0;font:500 13.5px "Inter",system-ui,sans-serif;color:#7a3e05;text-decoration:underline;cursor:pointer;white-space:nowrap}
body.rs-v2 .rx-verify .close{float:none;opacity:.7;font-size:18px;line-height:1;color:#7a3e05;text-shadow:none;padding:2px 6px}
@media (max-width:860px){body.rs-v2 .rx-verify{padding:8px 14px}}
body.rs-v2 .rx-verify .rx-linkbtn{background:none!important;border:0!important;color:#7a3e05!important;padding:0!important;min-height:0!important;box-shadow:none!important;width:auto!important}

.rx-card{overflow:visible}
.rx-table thead th:first-child{border-top-left-radius:12px}.rx-table thead th:last-child{border-top-right-radius:12px}
.rx-menu-l{justify-items:stretch}
.rx-menu-l a,.rx-menu-l button{display:block;width:100%;text-align:left!important}

/* Network page */
.rx-card-t{font:500 15px "Inter",system-ui,sans-serif}
.rx-lg iframe{display:block;width:100%;height:760px;border:0;border-top:0;background:#fff;border-radius:0 0 12px 12px}
.rx-tag{display:inline-block;margin-left:8px;font:500 12px "Inter",system-ui,sans-serif;color:#3730a3;background:#eef0ff;border-radius:6px;padding:1px 7px;vertical-align:middle}
#rx-network .rx-go{width:auto;white-space:nowrap}
#rx-network .rx-go a{font-size:13px;color:#4f46e5}
@media (max-width:760px){.rx-lg iframe{height:600px}#rx-network .rx-table tr.rx-row{grid-template-columns:minmax(0,1fr) auto}}

/* large and very large screens (27"-32"+): fluid width, slightly larger type and rows */
@media (min-width:1700px){
  .rx-shell{--rail-w:252px}
  .rx,.rx-shell{font-size:15px}
  .rx-h1{font-size:30px}
  .rx-table th{font-size:13px;padding:12px 20px}
  .rx-table td{padding:15px 20px}
  .rx-host,.rx-nav a,.rx-nav-btn{font-size:15px}
  .rx-mono{font-size:14px}
  .rx-top{height:60px}
  .rx-top-search{max-width:560px;height:38px}
}
@media (min-width:2300px){
  .rx,.rx-shell{font-size:16px}
  .rx-h1{font-size:32px}
  .rx-table td{padding:17px 24px}.rx-table th{padding:13px 24px}
  .rx-mono{font-size:15px}
}

/* ---- Billing ---- */
.rx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.rx-stat{padding:16px 18px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.rx-stat-l{font:500 13px var(--sans);color:var(--mut)}
.rx-stat-v{font:500 26px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.rx-stat-v--sm{font-size:18px;line-height:1.35;padding:4px 0 1px}
.rx-stat-s{font-size:13px;color:var(--mut);margin-bottom:10px}
.rx-stat > .rx-btn,.rx-stat-a{margin-top:auto}
.rx-stat-a{display:flex;gap:8px;flex-wrap:wrap}
.rx-stat.is-warn{border-color:#f3d39b;background:#fffcf5}
.rx-stat.is-bad{border-color:#f5c2c8;background:#fff8f9}
.rx-ren{margin-bottom:16px}
.rx-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rx-empty--left{text-align:left;padding:16px}
.rx-c-act{width:auto;white-space:nowrap}
.rx-c-act .rx-btn{margin-left:6px}
.rx-st.inv-paid::before{background:var(--ok)}
.rx-st.inv-unpaid::before{background:#d97706}
.rx-st.inv-late{color:#b42318}.rx-st.inv-late::before{background:#d23c4b}
.rx-st.inv-credit::before{background:var(--acc)}
.rx-st.inv-other{color:var(--mut)}
.rx-foot-note{margin:14px 2px 0;font-size:13px;color:var(--mut)}
.rx-foot-note a{color:var(--acc)}
.rx-back{margin:0 0 12px;font-size:13px}
.rx-back a{color:var(--mut);text-decoration:none}
.rx-back a:hover{color:var(--ink)}
@media (max-width:900px){.rx-cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  #rx-invoices tr.rx-row{grid-template-columns:minmax(0,1fr) auto}
  #rx-invoices td.rx-c-inv{grid-column:1/2;grid-row:1}#rx-invoices td.rx-c-amt{grid-column:2/3;grid-row:1;text-align:right}
  #rx-invoices td.rx-c-date{grid-column:1/2;grid-row:2;color:var(--mut);font-size:13px}#rx-invoices td.rx-c-st{grid-column:2/3;grid-row:2;justify-self:end}
  #rx-invoices td.rx-c-due{display:none}#rx-invoices td.rx-c-act{display:flex!important;grid-column:1/3;grid-row:3;justify-content:flex-end}
}
.rx-table th.rx-num{text-align:right}
.rx-table .rx-btn{color:var(--ink)!important}
.rx-table .rx-btn.primary{color:#fff!important}

/* ---- cancellation wizard ---- */
#rx-cancel{max-width:760px;margin:0 auto}
.rx-pad{padding:20px 22px}
.rx-h2{font:500 17px var(--sans);margin:0 0 4px;color:var(--ink)}
.rx-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;margin-bottom:12px}
.rx-step-n{width:28px;height:28px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font:500 13px var(--sans)}
.rx-lab{display:block;font:500 13px var(--sans);color:var(--ink2);margin:14px 0 6px}
.rx-input{width:100%;max-width:520px;border:1px solid var(--line2);border-radius:8px;padding:9px 12px;font:14px var(--sans);color:var(--ink);background:#fff}
select.rx-input{height:40px}
textarea.rx-input{resize:vertical;max-width:none}
.rx-input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.rx-note{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--acc-soft);color:var(--acc-ink);font-size:13.5px}
.rx-linkbtn2{appearance:none;border:0;background:none;padding:0;font:500 13.5px var(--sans);color:var(--acc-ink);text-decoration:underline;cursor:pointer}
.rx-choice{display:grid;gap:8px;margin-top:10px}
.rx-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line2);border-radius:8px;padding:12px 14px;cursor:pointer;margin:0}
.rx-opt:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.rx-opt input{margin-top:3px;accent-color:var(--acc)}
.rx-opt b{font-weight:500;display:block;color:var(--ink)}
.rx-opt .rx-mut{display:block}
.rx-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink2);margin:10px 0 0;cursor:pointer}
.rx-check input{margin-top:3px;accent-color:#d23c4b;width:16px;height:16px}
.rx-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.rx-btn.danger{background:#d23c4b;border-color:#d23c4b;color:#fff}
.rx-btn.danger:hover{background:#b73241;border-color:#b73241;color:#fff}
.rx-err{color:#b42318;font-size:13px;margin:6px 0 0}

/* servers: funnel filter + cancellation tag */
.rx-fun summary{list-style:none}
.rx-fun-b{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;background:#fff;font:500 13px var(--sans);color:var(--ink2);cursor:pointer;white-space:nowrap}
.rx-fun-b .rx-i{width:16px;height:16px;color:var(--mut)}
.rx-fun.on .rx-fun-b{border-color:var(--acc);color:#3730a3;background:#eef0ff}
.rx-fun.on .rx-fun-b .rx-i{color:var(--acc)}
.rx-fun .rx-menu-l{left:0;right:auto;min-width:190px}
.rx-fun .rx-menu-l button{display:flex!important;justify-content:space-between;gap:16px}
.rx-fun .rx-menu-l button span{color:var(--mut)}
.rx-fun .rx-menu-l button[aria-checked=true]{background:#eef0ff;color:#3730a3!important}
.rx-fun-x{appearance:none;border:0;background:none;width:30px;height:30px;border-radius:6px;color:var(--mut);cursor:pointer;margin-left:-4px}
.rx-fun-x:hover{background:var(--soft);color:var(--ink)}
.rx-fun-x .rx-i{width:15px;height:15px}
.rx-tag.warn{margin-left:0;margin-top:4px;color:#92400e;background:#fef3c7}
#rx-home .rx-bar{justify-content:flex-start}
.rx-loc{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.rx-flag{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(17,24,39,.08);flex:none}
/* settings tabs + forms */
.rx-stabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin:0 0 20px;scrollbar-width:none}
.rx-stabs a{padding:10px 12px;font:500 14px var(--sans);color:var(--mut)!important;text-decoration:none!important;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.rx-stabs a:hover{color:var(--ink)!important}
.rx-stabs a[aria-current=page]{color:var(--ink)!important;border-bottom-color:var(--brand,#14123f)}
.rx-form .rx-card{margin-bottom:16px}
.rx-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;max-width:880px}
.rx-grid2 .rx-span2{grid-column:1/-1}
.rx-grid2 .rx-input,.rx-country select,.rx-grid2 select,.rx-grid2 input.form-control{width:100%;max-width:none;height:40px;border:1px solid var(--line2);border-radius:8px;padding:0 12px;font:14px var(--sans);color:var(--ink);background:#fff}
.rx-country select:focus,.rx-grid2 select:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.rx-check{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;font:14px var(--sans);color:var(--ink);cursor:pointer}
.rx-check input{margin-top:3px;accent-color:var(--brand,#14123f)}
.rx-form-a{display:flex;gap:10px;margin:4px 0 24px}
.rx-alert.ok{border-color:#b8e6d6;background:#ecfdf5;color:#05603f}
@media (max-width:700px){.rx-grid2{grid-template-columns:minmax(0,1fr)}}

/* ---- Servers list: names never break, tags never wrap inside, columns adapt to the card's width ---- */
#rx-home > .rx-card{container:rxsrv/inline-size}
#rx-servers .rx-host{display:inline-block;max-width:100%;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
#rx-servers .rx-spec{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rx-servers .rx-tag{white-space:nowrap}
#rx-servers .rx-tags{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 8px;margin-top:4px}
#rx-servers .rx-tags .rx-tag{margin:0}
#rx-servers .rx-ipl{display:none;align-items:center;gap:8px;margin-top:2px;color:var(--mut);font-size:13px;white-space:nowrap}
/* wide card: today's layout; a very long name still can't push the other columns out */
@container rxsrv (width >= 940px){#rx-servers .rx-host,#rx-servers .rx-spec{max-width:max(200px,calc(100cqw - 760px))}}
@media (min-width:761px){
  /* medium card (iPad landscape, small laptops, split screens): Server takes the free space, Location folds under the IP */
  @container rxsrv (700px <= width < 940px){
    #rx-servers th,#rx-servers td{padding-left:12px;padding-right:12px}
    #rx-servers th:first-child,#rx-servers td:first-child{padding-left:16px}
    #rx-servers td.rx-c-host{width:100%;max-width:0}
    #rx-servers .rx-c-loc{display:none}
    #rx-servers .rx-ipl{display:flex}
    #rx-servers .rx-tags{flex-direction:column}
  }
  /* narrow card next to the rail (~861-990px windows): the phone's compact rows */
  @container rxsrv (width < 700px){
    #rx-servers thead{display:none}
    #rx-servers,#rx-servers tbody{display:block}
    #rx-servers tr.rx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
    #rx-servers tr.rx-row[hidden]{display:none}
    #rx-servers tbody tr.rx-row:last-child{border-bottom:0}
    #rx-servers td{padding:0;border:0}
    #rx-servers td.rx-c-host{grid-column:1;grid-row:1}
    #rx-servers td.rx-c-st{grid-column:2;grid-row:1;justify-self:end;text-align:right}
    #rx-servers td.rx-c-ip{grid-column:1;grid-row:2}
    #rx-servers td.rx-go{grid-column:2;grid-row:2;justify-self:end;width:auto}
    #rx-servers td.rx-c-loc{grid-column:1;grid-row:3;color:var(--mut);font-size:13px}
    #rx-servers td.rx-c-due{grid-column:2;grid-row:3;text-align:right;font-size:13px}
    #rx-servers .rx-tags{flex-direction:column;align-items:flex-end}
  }
}
/* phones: tags stack under the status, right-aligned like the rest of that column */
@media (max-width:760px){
  #rx-servers td.rx-c-st{text-align:right}
  #rx-servers .rx-tags{flex-direction:column;align-items:flex-end}
}
/* bell: × per notification (iOS-style), Clear all */
.rx-bell-row{position:relative;transition:transform .22s ease,opacity .22s ease,max-height .25s ease .15s,margin .25s ease .15s;max-height:200px}
.rx-bell-row.gone{transform:translateX(110%);opacity:0;max-height:0;margin-top:-8px;pointer-events:none}
.rx-bell-row .rx-bell-it{padding-right:40px}
.rx-bell-x{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:50%;background:#eceef2;color:#4b5563;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s,background .12s}
.rx-bell-x svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.rx-bell-row:hover .rx-bell-x,.rx-bell-x:focus-visible{opacity:1}
.rx-bell-x:hover{background:#dfe2e8;color:#111827}
@media (hover:none){.rx-bell-x{opacity:1}}
.rx-bell-clear{margin-left:auto;margin-right:6px;appearance:none;border:0;background:none;font:500 13px "Inter",system-ui,sans-serif;color:#4f46e5;padding:6px 8px;border-radius:6px;cursor:pointer}
.rx-bell-clear:hover{background:#eef0ff}
.rx-bell-ic.sec{background:#eef0ff;color:#3730a3}
/* Settings · Profile */
#rx-profile .rx-card,#rx-password .rx-card{max-width:924px;margin-bottom:16px}
.rx-who{display:flex;align-items:center;gap:14px;margin:0 0 6px}
.rx-who b{display:block;font:500 16px var(--sans);color:var(--ink)}
.rx-who .rx-mut{font-size:13.5px}
.rx-form-a.in{margin:18px 0 0}
.rx-tag.ok{color:#05603f;background:#ecfdf5}
.rx-row-card{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.rx-row-card .rx-sub a{color:var(--acc)}
#rx-password .progress{height:6px;margin:8px 0 0;border-radius:6px;background:#eef0f4}
#rx-password .text-muted,#rx-password .help-block{font-size:12.5px;color:var(--mut)}
.rx-ren7{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:16px 20px;margin-bottom:16px}
.rx-ren7 > div:first-child{display:grid;gap:4px}
.rx-ren7-v{font:400 15px var(--sans);color:var(--ink)}
.rx-ren7-v b{font-weight:500}
.rx-ren7-a{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px}
.rx-ren7-ok{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#05603f}
.rx-ren7-ok .rx-i{width:16px;height:16px}
.rx-alert-x{cursor:default}
.rx-alert-x .rx-alert-go{color:inherit;text-decoration:underline!important;text-underline-offset:3px}
.rx-alert-close{appearance:none;border:0;background:transparent;color:inherit;opacity:.65;width:28px;height:28px;margin:-4px -6px -4px 0;border-radius:6px;display:grid;place-items:center;cursor:pointer;flex:none}
.rx-alert-close:hover{opacity:1;background:rgba(0,0,0,.06)}
.rx-alert-close .rx-i{width:16px;height:16px}
.rx-alert.gone{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.rx-lang{width:220px;max-width:100%;height:40px;border:1px solid var(--line2);border-radius:8px;padding:0 12px;font:14px var(--sans);color:var(--ink);background:#fff}

/* ===== Billing in the Appica UI kit (pilot): Geist type, gray scale, framed cards with a soft lift on a dotted canvas,
   inset table with a rounded header bar, tone pills, sliding pill tabs, springy buttons, glass dialog.
   github.com/appica-dev/appica-ui (MIT) + Geist (OFL, fonts/GEIST-LICENSE.txt). Scoped to Billing; the left menu is untouched. ===== */
@font-face{font-family:"Geist";src:url(../fonts/geist-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(../fonts/geist-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(../fonts/geist-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
.rx-main:has(#rx-billing){background-color:#fafafa;background-image:radial-gradient(rgba(156,163,175,.35) 1px,transparent 1.2px);background-size:18px 18px}
#rx-billing{--a-50:#f9fafb;--a-100:#f3f4f6;--a-200:#e5e7eb;--a-300:#d1d5db;--a-400:#9ca3af;--a-500:#6b7280;--a-600:#4b5563;--a-700:#374151;--a-800:#1f2937;--a-900:#111827;--a-950:#030712;
  --a-sh:rgba(107,114,128,.18);--a-spring:cubic-bezier(.175,.885,.32,1.5);--a-font:"Inter",ui-sans-serif,system-ui,sans-serif;
  font-family:var(--a-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--a-600);font-size:14px;line-height:20px}
#rx-billing .rx-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:500;font-size:13px;color:var(--a-900)}
#rx-billing .rx-head{margin-bottom:28px}
#rx-billing .rx-h1{font:600 30px/36px var(--a-font);letter-spacing:-.02em;color:var(--a-900)}
#rx-billing .rx-sub,#rx-billing .rx-mut{color:var(--a-500);font-size:14px;line-height:20px}
/* framed card: white surface, hairline border, soft lift, and a light outer frame */
#rx-billing .rx-card{border:1px solid var(--a-100);border-radius:18px;background:#fff;
  box-shadow:0 8px 16px -4px var(--a-sh),0 0 0 8px rgba(243,244,246,.75),0 0 0 9px rgba(229,231,235,.9)}
#rx-billing .rx-cards{gap:34px;margin:9px 9px 34px}
#rx-billing > .rx-card,#rx-billing > section.rx-card{margin:0 9px 34px}
#rx-billing .rx-stat{padding:24px;gap:6px}
#rx-billing .rx-stat-h{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
#rx-billing .rx-stat-l{font:500 14px/20px var(--a-font);color:var(--a-500)}
#rx-billing .rx-stat-v{font:600 32px/38px var(--a-font);letter-spacing:-.02em;color:var(--a-900);font-variant-numeric:tabular-nums}
#rx-billing .rx-stat-v--sm{font-size:20px;line-height:28px;padding:5px 0 3px}
#rx-billing .rx-stat-s{font-size:14px;line-height:20px;color:var(--a-500);margin-bottom:16px}
#rx-billing .rx-stat.is-warn,#rx-billing .rx-stat.is-bad{background:#fff;border-color:var(--a-100)}
#rx-billing .rx-ren7{padding:20px 24px}
#rx-billing .rx-ren7-v{color:var(--a-900);font-size:16px;line-height:24px}
#rx-billing .rx-ren7-v b{font-weight:600}
#rx-billing .rx-ren7-ok{color:#059669}
/* pills (badges) */
#rx-billing .rx-pill{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:9999px;font:500 12px/16px var(--a-font);color:var(--a-950);background:var(--a-100);white-space:nowrap}
#rx-billing .rx-pill.ok{background:#a7f3d0}#rx-billing .rx-pill.warn{background:#fed7aa}#rx-billing .rx-pill.bad{background:#fecaca}
#rx-billing .rx-pill.line{background:#fff;box-shadow:inset 0 0 0 1px var(--a-900)}
/* buttons: sm 32px / 12px radius; near-black primary with a lit sheen; springy press */
#rx-billing .rx-btn,#rx-billing .rx-btn.sm{position:relative;isolation:isolate;min-height:32px;height:32px;padding:0 16px;gap:4px;border-radius:12px;font:500 12px/16px var(--a-font);
  background:#fff;border:1px solid var(--a-200);color:var(--a-800)!important;box-shadow:none;user-select:none;transition:background-color .3s,border-color .3s,color .2s,transform .25s var(--a-spring)}
#rx-billing .rx-btn .rx-i{width:16px;height:16px;stroke-width:1.85}
#rx-billing .rx-btn:has(.rx-i){padding-left:12px}
#rx-billing .rx-btn:hover{background:var(--a-50);border-color:var(--a-300);color:var(--a-900)!important}
#rx-billing .rx-btn.primary{background:var(--a-900);border-color:var(--a-900);color:#fff!important}
#rx-billing .rx-btn.primary:hover{background:radial-gradient(138.15% 78.13% at 52.05% 50%,var(--a-900) 0%,var(--a-700) 80%);border-color:var(--a-900);color:#fff!important}
#rx-billing .rx-btn:active{transform:scale(.97) translateY(1px);transition:transform .1s ease-in-out}
#rx-billing .rx-btn:focus-visible,#rx-billing .rx-seg button:focus-visible{outline:3px solid var(--a-300);outline-offset:1px}
/* card header + pill tabs with a sliding white indicator */
#rx-billing .rx-bar{padding:22px 24px 16px;border-bottom:0;gap:12px}
#rx-billing .rx-card-t{font:600 16px/24px var(--a-font);color:var(--a-900)}
#rx-billing .rx-seg{position:relative;background:var(--a-100);border:0;padding:2px;border-radius:12px;gap:2px}
#rx-billing .rx-seg button{position:relative;z-index:1;border-radius:10px;padding:8px 14px;font:500 12px/16px var(--a-font);color:var(--a-700);transition:color .2s}
#rx-billing .rx-seg button span{color:var(--a-400);font-weight:500}
#rx-billing .rx-seg button:hover{color:var(--a-900)}
#rx-billing .rx-seg button.on{color:#000;background:#fff;box-shadow:0 8px 16px -4px var(--a-sh)}
#rx-billing .rx-seg button.on span{color:var(--a-500)}
#rx-billing .rx-seg.has-ind button.on{background:transparent;box-shadow:none}
#rx-billing .rx-seg-ind{position:absolute;z-index:0;top:2px;bottom:2px;left:0;width:0;border-radius:10px;background:#fff;box-shadow:0 8px 16px -4px var(--a-sh)}
#rx-billing .rx-seg.ind-ready .rx-seg-ind{transition:transform .25s var(--a-spring),width .25s var(--a-spring)}
/* invoices: inset table, rounded header bar, icon tiles, dashed dividers */
#rx-billing #rx-invoices{border-collapse:separate;border-spacing:0;padding:0 8px 8px;font-size:14px}
#rx-billing #rx-invoices thead th{background:var(--a-100);color:var(--a-900);font:500 13px/20px var(--a-font);border-bottom:0;padding:10px 14px}
#rx-billing #rx-invoices thead th:first-child{border-radius:12px 0 0 12px;padding-left:16px}
#rx-billing #rx-invoices thead th:last-child{border-radius:0 12px 12px 0}
#rx-billing #rx-invoices tbody td{padding:12px 14px;border-bottom:1px dashed var(--a-200);color:var(--a-500);transition:background-color .2s}
#rx-billing #rx-invoices tbody td:first-child{padding-left:16px}
#rx-billing #rx-invoices tbody tr:last-child td{border-bottom:0}
#rx-billing #rx-invoices tbody tr:hover td{background:var(--a-50)}
#rx-billing #rx-invoices .rx-c-inv{white-space:nowrap}
#rx-billing #rx-invoices .rx-c-inv .rx-mono{font:600 14px/20px var(--a-font);color:var(--a-900);vertical-align:middle}
#rx-billing .rx-inv-ic{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:12px;border:1px solid var(--a-200);border-radius:10px;background:#fff;color:var(--a-700);vertical-align:middle}
#rx-billing .rx-inv-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#rx-billing #rx-invoices .rx-num{font-weight:600;font-variant-numeric:tabular-nums;color:var(--a-900)}
#rx-billing .rx-st{height:24px;padding:0 10px;border-radius:9999px;font:500 12px/16px var(--a-font);background:var(--a-100);color:var(--a-950);gap:0}
#rx-billing .rx-st::before{display:none}
#rx-billing .rx-st.inv-paid{background:#a7f3d0}
#rx-billing .rx-st.inv-unpaid{background:#fed7aa}
#rx-billing .rx-st.inv-late{background:#fecaca}
#rx-billing .rx-st.inv-credit{background:#bfdbfe}
#rx-billing .rx-st.inv-other{background:var(--a-100);color:var(--a-600)}
#rx-billing .rx-cxreq{height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:9999px;background:var(--a-100);color:var(--a-600);font:500 12px/16px var(--a-font)}
@media (max-width:900px){#rx-billing .rx-cards{gap:28px}}
@media (max-width:760px){#rx-billing #rx-invoices{padding:0}#rx-billing #rx-invoices tbody td{padding:0;border-bottom:0}#rx-billing #rx-invoices tbody td:first-child{padding-left:0}#rx-billing .rx-bar{padding:16px}#rx-billing .rx-inv-ic{display:none}}
@media (prefers-reduced-motion:reduce){#rx-billing *,#rx-billing *::before{transition:none!important;animation:none!important}#rx-billing .rx-btn:active{transform:none}}
.rx-verify.ok{background:#ecfdf5!important;border-color:#b8e6d6!important;color:#05603f!important}
.rx-verify.bad{background:#fdeef0!important;border-color:#f5c2c8!important;color:#8a1c28!important}
.rx-verify #rx-verify-resend:disabled{opacity:.6;cursor:default;text-decoration:none}
/* home: Active / Suspended / All tabs */
#rx-home .rx-bar,.rx-bar:has(#rx-fun){gap:12px}
#rx-fun.rx-stabs-home button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(17,24,39,.08)}
/* WHMCS notices above the server panel (unpaid/overdue invoice, pending cancellation, module result): same width and look as the panel */
body.rs-v2 .rx-shell #alertUnpaidInvoice,body.rs-v2 .rx-shell #alertOverdueInvoice,body.rs-v2 .rx-shell #alertPendingCancellation,
body.rs-v2 .rx-shell #alertModuleCustomButtonSuccess,body.rs-v2 .rx-shell #alertModuleCustomButtonFailed{
  max-width:1280px;margin:0 auto 16px!important;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:12px;
  border-radius:10px;padding:12px 16px;font:14px/1.45 var(--sans,"Inter"),system-ui,sans-serif;text-align:left!important}
body.rs-v2 .rx-shell #alertUnpaidInvoice{background:#fff7e8;border:1px solid #f3d39b;color:#7a3e05}
body.rs-v2 .rx-shell #alertOverdueInvoice{background:#fdeef0;border:1px solid #f5c2c8;color:#8a1c28}
body.rs-v2 .rx-shell #alertUnpaidInvoice>div,body.rs-v2 .rx-shell #alertOverdueInvoice>div{float:none!important;margin:0!important;flex:none}
body.rs-v2 .rx-shell #alertUnpaidInvoice .btn,body.rs-v2 .rx-shell #alertOverdueInvoice .btn{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--brand,#14123f);background:var(--brand,#14123f);color:#fff!important;font:500 13px var(--sans,"Inter"),system-ui,sans-serif;text-decoration:none!important;white-space:nowrap}
#rx-fun.rx-stabs-home button.attn{color:#b45309}
#rx-fun.rx-stabs-home button.attn span{color:#b45309;font-weight:600}
#rx-fun.rx-stabs-home button.attn::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#f59e0b;margin-right:6px;vertical-align:1px}
#rx-fun.rx-stabs-home button.attn.on{background:#fff7e8;color:#92400e;box-shadow:inset 0 0 0 1px #f3d39b}
@media (max-width:760px){#rx-fun.rx-stabs-home{overflow-x:auto;max-width:100%}#rx-fun.rx-stabs-home button{white-space:nowrap}}
/* deploy prompt (no active servers / first server): Instant servers first */
.rx-deploy-cta{padding:40px 20px 32px;text-align:center;max-width:640px;margin:0 auto}
.rx-deploy-cta[hidden]{display:none}
.rx-dc-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;background:#fff4e5;color:#b45309;font:600 12px var(--sans);letter-spacing:.02em;margin-bottom:12px}
.rx-dc-badge .rx-i{width:13px;height:13px;fill:#f59e0b;stroke:#f59e0b}
.rx-deploy-cta h2{font:500 21px var(--sans);margin:0 0 8px;color:var(--ink)}
.rx-deploy-cta>p{color:var(--mut);margin:0 auto 22px;max-width:520px;line-height:1.55;text-wrap:balance}
.rx-deploy-cta>p b{color:var(--ink);font-weight:600}
.rx-dc-steps{list-style:none;margin:0 auto 24px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:540px;position:relative}
.rx-dc-steps:before{content:"";position:absolute;top:15px;left:16.6%;right:16.6%;border-top:1px dashed var(--line2)}
.rx-dc-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 6px}
.rx-dc-steps .n{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid var(--line2);font:600 13px var(--sans);color:var(--ink);margin-bottom:8px;position:relative}
.rx-dc-steps .go .n{background:var(--brand);border-color:var(--brand);color:#fff}
.rx-dc-steps .go .n .rx-i{width:15px;height:15px;fill:#fff;stroke:#fff}
.rx-dc-steps b{font:600 13.5px var(--sans);color:var(--ink)}
.rx-dc-steps small{font-size:12px;color:var(--mut)}
.rx-dc-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.rx-dc-btns .rx-i{width:15px;height:15px}
.rx-dc-btns .primary .rx-i{fill:#fff}
.rx-dc-foot{margin:18px 0 0!important;font-size:12.5px;color:var(--mut)}
@media (max-width:520px){.rx-dc-steps{grid-template-columns:1fr;gap:12px;max-width:260px}.rx-dc-steps:before{display:none}.rx-dc-steps li{flex-direction:row;flex-wrap:wrap;text-align:left;gap:0 10px}.rx-dc-steps .n{margin:0}.rx-dc-steps small{flex-basis:100%;padding-left:40px;margin-top:-6px}}
.rx-dc-flags{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:22px 0 0}
.rx-dc-flags img{width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);object-fit:cover}
.rx-dc-flags+.rx-dc-foot{margin-top:10px!important}

/* menu + top bar keep DM Sans; everything else in the shell reads Inter */
.rx-rail,.rx-top,.rx-tabbar{font-family:"DM Sans",system-ui,sans-serif}
/* data font is proportional: equal-width digits so IP columns line up, slashed zero */
.rx-mono,.rsm .mono,.rsm .secret .pwv,.rx-kbd,.rx-pal-s,#rx-billing .rx-mono{font-feature-settings:"tnum","zero";font-variant-numeric:tabular-nums slashed-zero;letter-spacing:0}
.rx-help-ref{margin:18px 0 0;padding:12px 14px;border:1px solid var(--line,#e5e7eb);border-radius:8px;background:#f7f8fa;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.rx-help-ref[hidden]{display:none}
.rx-help-ref span{font-size:12.5px;color:#6b7280;flex-basis:100%}
.rx-help-ref b{font-size:16px;letter-spacing:.04em;color:#111827}
.rx-help-ref small{flex-basis:100%;font-size:12px;color:#6b7280}

/* audit S2/S3: one content width on every page; keep the scrollbar's space so pages never shift sideways */
html{scrollbar-gutter:stable}

/* audit M9: Billing uses the same flat cards, 8px buttons and 6px squared badges as every other page */
.rx-main:has(#rx-billing){background-image:none;background-color:transparent}
#rx-billing .rx-card{border:1px solid var(--line,#e5e7eb);border-radius:var(--r,12px);box-shadow:none}
#rx-billing .rx-cards{gap:16px;margin:0 0 16px}
#rx-billing > .rx-card,#rx-billing > section.rx-card{margin:0 0 16px}
#rx-billing .rx-pill,#rx-billing .rx-st,#rx-billing .rx-cxreq{border-radius:6px}
#rx-billing .rx-btn,#rx-billing .rx-btn.sm{border-radius:8px;height:34px;min-height:34px;font-size:13px}
#rx-billing .rx-btn.primary{background:var(--brand,#14123f);border-color:var(--brand,#14123f)}
#rx-billing .rx-btn.primary:hover{background:var(--brand-hi,#26236a)}
#rx-billing .rx-seg{border-radius:8px}
#rx-billing .rx-seg button,#rx-billing .rx-seg-ind{border-radius:6px}
#rx-billing .rx-inv-ic{border-radius:8px}
#rx-billing #rx-invoices thead th:first-child{border-radius:8px 0 0 8px}
#rx-billing #rx-invoices thead th:last-child{border-radius:0 8px 8px 0}
#rx-invoices tr.rx-zero{display:none}
#rx-invoices.show-zero tr.rx-zero:not([hidden]){display:table-row}
/* Top Up page */
#rx-topup .rx-topup-card{max-width:560px;padding:20px 22px}
#rx-topup .rx-lab:first-child{margin-top:0}
#rx-topup .rx-topup-amt{font:500 18px var(--mono,"IBM Plex Sans");max-width:240px}
#rx-topup .rx-topup-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#rx-topup .rx-topup-lim{font-size:13px;margin:10px 0 0}
#rx-topup .rx-form-a{margin-top:18px}
#rx-topup .rx-alert{margin-bottom:16px}
/* Settings: Team, Security, Email History (audit M2) */
.w-hidden{display:none!important}
.rx-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(17,24,39,.45);padding:16px}
.rx-modal[hidden]{display:none}
.rx-modal-box{width:100%;max-width:440px;background:#fff;border-radius:12px;padding:22px 24px;box-shadow:0 24px 60px rgba(17,24,39,.3)}
.rx-modal-box .rx-form-a{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
#rx-team .rx-team-e{font-weight:500;color:var(--ink)}
#rx-team .rx-team-a{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;white-space:nowrap}
#rx-team .rx-bar-sub{border-top:1px solid var(--line)}
#rx-team .rx-team-inv .rx-input{max-width:420px}
#rx-team .rx-team-perm{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
#rx-team .rx-team-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
#rx-team > .rx-card,#rx-security > .rx-card,#rx-emails > .rx-card{margin-bottom:16px}
#rx-security .rx-sec-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
#rx-security .rx-h2 .rx-tag{margin-left:8px}
#rx-security .rx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;max-width:620px}
#rx-security .rx-sec-provider{margin-top:12px}
#rx-security .rx-sec-table table{width:100%;margin-top:14px;font-size:14px}
#rx-security .rx-sec-table th{font-weight:500;color:var(--mut);font-size:13px;border-bottom:1px solid var(--line);padding:8px 6px;background:none!important}
#rx-security .rx-sec-table td{padding:8px 6px;border-bottom:1px solid var(--line)}
#rx-security .rx-sec-table .dataTables_wrapper .dataTables_length,#rx-security .rx-sec-table .dataTables_info,#rx-security .rx-sec-table .dataTables_paginate,#rx-security .rx-sec-table .dataTables_filter{display:none}
#rx-security .rx-sec-table th.sorting::after,#rx-security .rx-sec-table th.sorting_asc::after,#rx-security .rx-sec-table th.sorting::before{display:none!important}
#rx-emails .rx-c-date{width:220px;white-space:nowrap}
@media (max-width:640px){#rx-security .rx-two{grid-template-columns:minmax(0,1fr)}#rx-emails .rx-c-date{width:auto}}

/* Security: stock "Connect your account…" line repeats our sentence */
.rx-sec-provider>p{display:none}
.rx-sec-provider .social-signin-btns{margin:12px 0}
/* phone: filter tabs scroll without a visible bar; tab bar labels on one line */
.rx-seg{scrollbar-width:none}.rx-seg::-webkit-scrollbar{display:none}
@media (max-width:640px){.rx-tabbar a{white-space:nowrap;font-size:10px;letter-spacing:-.01em}}
#rx-fun{scrollbar-width:none}#rx-fun::-webkit-scrollbar{display:none}
/* phone: Email History / Team rows as two-line cards; linked-accounts table scrolls */
@media (max-width:760px){
#rx-emails .rx-table tr.rx-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 16px;align-items:center}
#rx-emails .rx-table tr.rx-row[hidden]{display:none!important}
#rx-emails .rx-table tr.rx-row>td{display:block!important;padding:0!important;border:0;text-align:left;width:auto}
#rx-emails .rx-table td.rx-c-date{grid-column:1;grid-row:1;font-size:12px}
#rx-emails .rx-table td:nth-child(2){grid-column:1;grid-row:2;overflow-wrap:anywhere}
#rx-emails .rx-table td.rx-go{grid-column:2;grid-row:1/3;justify-self:end}
#rx-emails .rx-table thead,#rx-team .rx-team-t thead{display:none}
#rx-team .rx-team-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px;border-bottom:1px solid var(--line)}
#rx-team .rx-team-t td{display:block;padding:0!important;border:0!important}
#rx-team .rx-team-e{overflow-wrap:anywhere}
#rx-team .rx-team-a{grid-column:1/-1;text-align:left!important;display:flex!important;flex-wrap:wrap;gap:8px}
#rx-security .rx-sec-table{overflow-x:auto}#rx-security .rx-sec-table table{min-width:520px}
}
@media (max-width:760px){#rx-team .rx-team-t tr{grid-template-columns:minmax(0,1fr)}#rx-team .rx-team-t td.rx-mut{font-size:13px}}