/* ==========================================================================
   WITV — Client area. Loads after home.v12.css (shared nav/footer/buttons).
   No Bootstrap / old theme CSS on these pages: the "compat" section below
   covers the little Bootstrap-3 markup WHMCS core and hooks still emit.
   ========================================================================== */
:root{--rc:20px;--ok:#5fdc84;--ok-bg:rgba(52,199,89,.16);--warn-bg:rgba(248,162,0,.16);--bad:#ff6b61;--bad-bg:rgba(255,59,48,.16);--info:#7ab8ff;--info-bg:rgba(10,132,255,.18)}
body.ca-shell{font-size:17px;padding-top:68px;min-height:100svh;display:flex;flex-direction:column}
body.ca-shell .foot{margin-top:auto}
h4,h5,h6,ul,ol,dl,dd,figure,blockquote,fieldset{margin:0}
fieldset{padding:0;border:0}
legend{padding:0}
label{display:inline-block;font-weight:500}
input,select,textarea{font:inherit;color:inherit}
strong,b{font-weight:700}
small{font-size:.88em}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
/* Type scale */
.t-eyebrow{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.t-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.t-muted{color:var(--muted)}

/* --------------------------------------------------------------------------
   Nav additions (public .nav is the base)
   -------------------------------------------------------------------------- */
.nav--solid,.nav--solid.is-scrolled{background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-color:var(--line)}
.nav__acct{position:relative}
.nav__user{display:inline-flex;align-items:center;gap:6px;padding:0;background:none;border:0;color:rgba(255,255,255,.82);font-size:17px;font-weight:500;cursor:pointer}
.nav__user:hover,.nav__user[aria-expanded="true"]{color:#fff}
.nav__user svg{width:14px;height:14px;transition:transform .2s}
.nav__user[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__drop{position:absolute;right:0;top:calc(100% + 16px);min-width:230px;padding:8px;border-radius:18px;background:#111114;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.6);display:grid;z-index:120}
.nav__drop[hidden]{display:none}
.nav__drop a{display:block;padding:10px 14px;border-radius:12px;font-size:.95rem;font-weight:500;color:#e6e6ea}
.nav__drop a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav__drop a.is-current{color:var(--accent);font-weight:600}
.nav__drop-sep{display:block;height:1px;margin:6px 8px;background:var(--line)}
.menu .btn--ghost{margin-top:28px;width:100%;height:56px}
@media (max-width:760px){.nav__acct{display:none}}

/* --------------------------------------------------------------------------
   Page head, tabs, alerts, layout
   -------------------------------------------------------------------------- */
.chead{padding:clamp(40px,6vw,72px) 0 0}
.chead .eyebrow{margin-bottom:10px}
.ccrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:.9rem;color:var(--muted);margin-bottom:14px}
.ccrumb a{color:var(--muted)}.ccrumb a:hover{color:#fff}.ccrumb span{opacity:.45}.ccrumb b{color:#e6e6ea;font-weight:500}
.chead h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;color:#fff}
.chead__lead{margin-top:12px;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);max-width:44em}
.ctabs{display:flex;gap:4px;margin-top:28px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ctabs::-webkit-scrollbar{display:none}
.ctabs a{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;margin-bottom:-1px;font-size:.98rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s}
.ctabs a:hover{color:#fff}
.ctabs a.is-on,.ctabs a.active{color:#fff;border-color:var(--accent)}
.ctabs a.is-disabled,.ctabs a.disabled{opacity:.4;pointer-events:none}
.ctabs .badge{background:rgba(255,255,255,.1)}
.cmain{padding:clamp(28px,4vw,44px) var(--pad) clamp(56px,7vw,88px);width:100%}
.chead + .cmain{padding-top:clamp(28px,4vw,44px)}
.calerts{width:100%;display:grid;gap:10px;margin-top:24px}.calerts:empty{display:none}
.calert{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;font-size:.98rem}
.calert span{color:var(--accent);font-weight:600;white-space:nowrap}
.calert--danger{background:var(--bad-bg);border-color:rgba(255,59,48,.35)}
.calert--warning{background:var(--warn-bg);border-color:rgba(248,162,0,.35)}
.calert--success{background:var(--ok-bg);border-color:rgba(52,199,89,.35)}
/* cards from sidebar panels with body html */
.ccards{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;padding-bottom:clamp(56px,7vw,88px);margin-top:calc(clamp(56px,7vw,88px) * -1 + 16px)}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);padding:22px 24px}
.ccard__title{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.ccard__body{color:#e6e6ea;line-height:1.6}
.ccard__foot{margin-top:16px}
.ccard__foot .btn{width:auto;display:inline-flex}
/* email verification bar (core include) */
.email-verification{background:var(--warn-bg);border-bottom:1px solid rgba(248,162,0,.35);padding:12px 0;font-size:.95rem}
.email-verification.success{background:var(--ok-bg)}
.email-verification.failed{background:var(--bad-bg)}
.email-verification .container{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.email-verification .row{display:contents}
.email-verification .btn.close{width:auto;height:auto;padding:0;font-size:1.3rem;order:9;margin-left:auto}
.email-verification .btn-sm{height:38px}

/* --------------------------------------------------------------------------
   Compat: minimal dark Bootstrap 3 for markup WHMCS core / hooks emit
   -------------------------------------------------------------------------- */
.hidden,.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.text-muted{color:var(--muted)}.text-danger{color:var(--bad)}.text-success{color:var(--ok)}.text-warning{color:var(--accent)}.text-info{color:var(--info)}
.pull-right,.float-right{float:right}.pull-left,.float-left{float:left}
.clearfix::after{content:"";display:table;clear:both}
.list-inline{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.list-unstyled{list-style:none;padding:0}
.row{display:flex;flex-wrap:wrap;margin:0 -8px}
.row>[class*="col-"]{padding:0 8px;flex:0 0 100%;max-width:100%;min-width:0}
@media (min-width:768px){
  .col-sm-1,.col-md-1{flex-basis:8.333%;max-width:8.333%}.col-sm-2,.col-md-2{flex-basis:16.666%;max-width:16.666%}.col-sm-3,.col-md-3{flex-basis:25%;max-width:25%}
  .col-sm-4,.col-md-4{flex-basis:33.333%;max-width:33.333%}.col-sm-5,.col-md-5{flex-basis:41.666%;max-width:41.666%}.col-sm-6,.col-md-6{flex-basis:50%;max-width:50%}
  .col-sm-7,.col-md-7{flex-basis:58.333%;max-width:58.333%}.col-sm-8,.col-md-8{flex-basis:66.666%;max-width:66.666%}.col-sm-9,.col-md-9{flex-basis:75%;max-width:75%}
  .col-sm-10,.col-md-10{flex-basis:83.333%;max-width:83.333%}.col-sm-12,.col-md-12{flex-basis:100%;max-width:100%}
  .col-sm-offset-4{margin-left:33.333%}.col-sm-offset-3{margin-left:25%}
}
.col-xs-6{flex-basis:50%!important;max-width:50%!important}
/* buttons: public .btn is the base; these are the WHMCS variants */
.btn{height:46px;padding:0 22px;font-size:.98rem;border:1px solid transparent;cursor:pointer}
.btn:hover{transform:none}
.btn-primary,.btn-success{background:var(--grad);color:#111;box-shadow:0 8px 28px rgba(248,162,0,.22)}
.btn-primary:hover,.btn-success:hover{filter:brightness(1.06);box-shadow:0 10px 34px rgba(248,162,0,.32)}
.btn-default,.btn-info,.btn-link,.btn-secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.14)}
.btn-default:hover,.btn-info:hover,.btn-link:hover,.btn-secondary:hover{background:rgba(255,255,255,.15)}
.btn-danger{background:var(--bad-bg);color:var(--bad);border-color:rgba(255,59,48,.35)}
.btn-warning{background:var(--warn-bg);color:var(--accent);border-color:rgba(248,162,0,.35)}
.btn-sm,.btn-xs{height:38px;padding:0 16px;font-size:.9rem}
.btn-lg{height:56px;padding:0 30px;font-size:1.05rem}
.btn-block{display:flex;width:100%}
.btn.disabled,.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn .fa,.btn .fas,.btn .far{display:none}
.btn-group{display:inline-flex;gap:8px}
.caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle}
/* forms */
.form-group{margin-bottom:18px}
.form-horizontal .form-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.form-horizontal .control-label{flex:0 0 auto}
.control-label,.form-group>label{display:block;font-size:.9rem;font-weight:600;color:#e6e6ea;margin-bottom:8px}
.form-control{display:block;width:100%;height:48px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:1rem;outline:0;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
textarea.form-control{height:auto;min-height:140px;padding:14px 16px;line-height:1.5;resize:vertical}
select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
select.form-control option{background:#151518;color:#fff}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(248,162,0,.15)}
.form-control::placeholder{color:rgba(255,255,255,.35)}
.form-control[readonly]{color:#e6e6ea}
.form-control-static{padding-top:12px}
.input-inline{display:inline-block;width:auto}
.input-inline-100{width:110px}
.input-group{display:flex;width:100%}
.input-group .form-control{flex:1;min-width:0;border-radius:14px 0 0 14px}
.input-group-btn,.input-group-addon{display:flex}
.input-group-btn .btn,.input-group-addon{height:48px;border-radius:0 14px 14px 0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-left:0;color:#fff;padding:0 18px;display:inline-flex;align-items:center;font-size:.92rem;font-weight:600}
.input-group-addon:first-child{border-radius:14px 0 0 14px;border-left:1px solid rgba(255,255,255,.14);border-right:0}
.input-group-addon:first-child + .form-control{border-radius:0 14px 14px 0}
.checkbox,.radio{position:relative;display:block;margin:10px 0}
.checkbox label,.radio label{display:flex;align-items:center;gap:10px;font-weight:400;color:#e6e6ea;cursor:pointer}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--accent);margin:0}
.help-block{display:block;margin-top:8px;font-size:.88rem;color:var(--muted)}
.has-error .form-control{border-color:rgba(255,59,48,.6)}
.has-error .control-label,.has-error .help-block{color:var(--bad)}
.field-error-msg{color:var(--bad);font-size:.88rem;margin-top:6px}
.checkbox input,.radio input{flex:0 0 auto}
/* alerts */
.alert{padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;margin-bottom:20px;font-size:.98rem}
.alert a{color:var(--accent);font-weight:600}
.alert-danger,.alert-error{background:var(--bad-bg);border-color:rgba(255,59,48,.35)}
.alert-warning{background:var(--warn-bg);border-color:rgba(248,162,0,.35)}
.alert-success{background:var(--ok-bg);border-color:rgba(52,199,89,.35)}
.alert-info{background:var(--info-bg);border-color:rgba(10,132,255,.35)}
/* labels, badges, pills */
.label,.badge,.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.02em;line-height:1.3;background:rgba(255,255,255,.1);color:#fff;white-space:nowrap}
.label-success,.pill--active,.pill--paid,.pill--open{background:var(--ok-bg);color:var(--ok)}
.label-warning,.pill--pending,.pill--unpaid,.pill--suspended{background:var(--warn-bg);color:var(--accent)}
.pill--answered{background:var(--accent);color:#000}
.is-seen .pill--answered,.pill--answered.is-seen{background:var(--warn-bg);color:var(--accent)}
.label-danger,.pill--overdue{background:var(--bad-bg);color:var(--bad)}
.label-info,.pill--info{background:var(--info-bg);color:var(--info)}
.label-default,.label-primary,.pill--ended,.pill--closed,.pill--other{background:rgba(255,255,255,.1);color:#c9c9d1}
.label[style*="background-color"]{color:#fff}
/* tables */
.table{width:100%;border-collapse:collapse;font-size:.98rem}
.table th{padding:12px 14px;text-align:left;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.table td{padding:14px;border-top:1px solid var(--line);color:#e6e6ea;vertical-align:middle}
.table tr:first-child td{border-top:0}
.table-responsive{overflow-x:auto}
/* panels & wells (core) */
.panel,.well{background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);margin-bottom:16px;overflow:hidden}
.panel-heading{padding:16px 22px;border-bottom:1px solid var(--line)}
.panel-title{font-size:1.02rem;font-weight:700;color:#fff}
.panel-body,.well{padding:20px 22px}
.panel-footer{padding:14px 22px;border-top:1px solid var(--line)}
.panel-minimise{display:none}
/* tabs (core product details etc.) */
.nav-tabs{display:flex;gap:4px;list-style:none;padding:0;border-bottom:1px solid var(--line);margin-bottom:20px}
.nav-tabs>li>a{display:block;padding:12px 16px;margin-bottom:-1px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.nav-tabs>li.active>a{color:#fff;border-color:var(--accent)}
.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}
/* dropdown menus (service action menus) */
.dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:200px;padding:8px;border-radius:16px;background:#111114;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.6);list-style:none;z-index:50}
.open>.dropdown-menu,.dropdown-menu.show{display:block}
.dropdown-menu>li>a,.dropdown-menu>li.dropdown-item{display:block;padding:10px 14px;border-radius:10px;color:#e6e6ea;cursor:pointer}
.dropdown-menu>li>a:hover,.dropdown-menu>li.dropdown-item:hover{background:rgba(255,255,255,.08);color:#fff}
/* modals (Bootstrap JS from scripts.min.js toggles .in / .modal-backdrop) */
.modal{position:fixed;inset:0;z-index:1050;overflow-y:auto;padding:24px}
.modal.in,.modal.show{display:block!important}
.modal-backdrop{position:fixed;inset:0;z-index:1040;background:rgba(0,0,0,.7)}
.modal-dialog{max-width:560px;margin:8vh auto;position:relative}
.modal-content{background:#141416;border:1px solid rgba(255,255,255,.12);border-radius:22px;box-shadow:0 40px 100px rgba(0,0,0,.7);overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal-header .close{order:2}
.modal-title{font-size:1.15rem;font-weight:700;color:#fff}
.modal-body{padding:24px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--line)}
.modal-footer .loader{margin-right:auto;color:var(--muted);font-size:.9rem}
.close{font-size:1.6rem;line-height:1;color:#fff;opacity:.6;background:none;border:0}
.close:hover{opacity:1}
.popover,.tooltip{display:none}
.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.progress-bar{height:100%;background:var(--grad)}
.pagination{display:flex;gap:6px;list-style:none;padding:0}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#e6e6ea;font-size:.9rem;font-weight:600}
.pagination .active a,.pagination .active span{background:#fff;color:#000}
/* generic content links inside cards */
.ccard__body a:not(.btn),.dcard__body a:not(.btn),.alert a,.panel-body a:not(.btn){color:var(--accent)}

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
.plan,.plan:hover{transform:none;transition:none;border-color:rgba(248,162,0,.35)}
.plan{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid rgba(248,162,0,.35);background:linear-gradient(135deg,#221a0e 0%,#141416 55%,#101013 100%);padding:clamp(24px,3.4vw,40px);display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;isolation:isolate;margin-top:0}
.plan--app{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.plan:has(> .plan__stat){grid-template-columns:minmax(0,1fr) auto}
.plan__stat{text-align:right;padding-left:32px;border-left:1px solid var(--line);align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:170px}
.plan__stat b{display:block;font-size:clamp(3rem,5vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:.95;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan__stat span{display:block;margin-top:10px;color:var(--muted);font-size:.95rem}
.plan__stat.is-due b{background:none;-webkit-text-fill-color:var(--bad);color:var(--bad)}
.plan::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(248,162,0,.22),transparent 70%);z-index:-1;pointer-events:none}
.plan--none{border-color:var(--line);background:var(--surface)}
.plan--none::before{background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent 70%)}
.plan__eyebrow{display:flex;align-items:center;gap:12px;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.plan--none .plan__eyebrow{color:var(--muted)}
.plan__name{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;color:#fff}
.plan__title{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.plan__up{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px 0 14px;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--accent);background:rgba(248,162,0,.1);border:1px solid rgba(248,162,0,.3);transition:background .2s,border-color .2s}
.plan__up:hover{background:rgba(248,162,0,.18);border-color:rgba(248,162,0,.55)}
.plan__up svg{width:13px;height:13px}
.plan__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;color:var(--muted);font-size:1.02rem}
.plan__meta .is-bad,.plan__meta .is-bad b{color:var(--bad)}
.plan__meta b{color:#fff;font-weight:600}
.plan__meta .pill{font-size:.8rem}
.plan__lead{margin-top:14px;font-size:1.1rem;color:var(--muted);max-width:40em;line-height:1.5}
.plan__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.plan__ctas .btn{height:48px;padding:0 22px;font-size:1rem}
.plan__ctas .btn--primary:hover{box-shadow:0 12px 40px rgba(255,255,255,.18)}
.plan__ctas .btn--accent:hover{box-shadow:0 12px 40px rgba(248,162,0,.4)}
.plan__app{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px 20px;border-radius:20px;background:rgba(0,0,0,.38);border:1px solid var(--line);min-width:0}
.plan__app-head{display:flex;flex-direction:column;gap:3px}
.plan__app-head b{color:#fff;font-weight:700;font-size:1rem}
.plan__app-title{display:inline-flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.appc__pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:.74rem;font-weight:700;font-style:normal;letter-spacing:.02em;line-height:1.3;white-space:nowrap;background:var(--ok-bg);color:var(--ok)}
.appc__pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px rgba(52,199,89,.18);flex:none}
.appc__pill--warn{background:var(--warn-bg);color:var(--accent)}
.appc__pill--warn::before{box-shadow:0 0 0 2px rgba(248,162,0,.18)}
.plan__app-head span{color:var(--muted);font-size:.78rem;opacity:.85}
.appc{display:grid;gap:8px}
.appc__row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);min-width:0}
.appc__row label{color:var(--muted);font-size:.82rem;width:68px;flex:none;margin:0}
.appc__row code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;color:#fff;letter-spacing:.02em;flex:1;min-width:0;overflow-wrap:anywhere;background:none;padding:0}
.appc__btn{border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:6px 11px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;flex:none;transition:background .2s}
.appc__btn:hover{background:rgba(255,255,255,.18)}
.appc__btn.is-done{background:var(--ok-bg);color:var(--ok)}
.appc__usage{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;min-width:0;padding:3px 2px 0;color:var(--ok);font-size:.82rem;font-weight:600;line-height:1.35}
.appc__usage span{display:inline-flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.appc__usage span::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(52,199,89,.14);flex:0 0 auto}
.appc__usage b{color:inherit;font-size:.84rem;font-weight:700;white-space:nowrap}
.appc__usage a{color:inherit;text-decoration:none;white-space:nowrap;transition:color .2s}
.appc__usage a:hover{color:#fff}
.plan__app--attention .appc__row{opacity:.45}
.plan__app--attention .appc__row:hover{opacity:1}
.plan__app--attention .appc__usage{padding-top:6px}
.appc__usage--warn{color:var(--accent)}
.appc__usage--warn span::before{box-shadow:0 0 0 3px rgba(248,162,0,.14)}
.pswitch{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.pswitch__tab{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:.95rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.pswitch__tab b{color:#fff;font-weight:600}
.pswitch__tab:hover{border-color:rgba(255,255,255,.25)}
.pswitch__tab.is-on{background:#fff;border-color:#fff;color:#555}
.pswitch__tab.is-on b{color:#000}
.pswitch__dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.pswitch__dot--active{background:#34c759}.pswitch__dot--suspended,.pswitch__dot--pending{background:var(--accent)}.pswitch__dot--terminated,.pswitch__dot--cancelled{background:var(--bad)}
.pswitch__all{margin-left:auto}
.plan[hidden]{display:none}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);display:flex;flex-direction:column;min-width:0}
.dcard--wide{grid-column:1/-1}
.dcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px 12px}
.dcard__head h3{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:#fff;display:flex;align-items:center;gap:10px}
.dcard__head h3 .badge{font-size:.72rem}
.dcard__head .link{font-size:.95rem;white-space:nowrap}
.dcard__acts{display:flex;align-items:center;gap:18px}
.dcard__acts .btn-sm{height:34px;padding:0 14px}
@media (max-width:760px){.dcard__acts{gap:12px}.dcard__acts .btn-sm{padding:0 11px;font-size:.85rem}}
.dcard__body{padding:4px 24px 24px;color:#e6e6ea;line-height:1.6}
.dcard__body p{margin-bottom:10px}
.dcard__body p:last-child{margin-bottom:0}
.dcard__list{display:grid;padding:4px 8px 10px}
.dcard__list a,.dcard__list div{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;color:#e6e6ea;font-size:.98rem;transition:background .2s}
.dcard__list a:hover{background:rgba(255,255,255,.05)}
.dcard__list .i{flex:1;min-width:0;display:grid;gap:2px}
.dcard__list .i b{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard__list .i>span{color:var(--muted);font-size:.88rem}
.dcard__list .i b .pill{margin-left:8px;vertical-align:1px}
.dcard__list .amt{color:#fff;font-weight:600;white-space:nowrap}
.dcard__list .label,.dcard__list small{margin-left:8px}
.dcard__empty{padding:6px 24px 26px;color:var(--muted)}
.dcard__empty a{color:var(--accent);font-weight:600}
.dcard__foot{padding:10px 24px 20px;margin-top:auto}
/* referral + your info */
.dcard--ref .dcard__body p{color:var(--muted)}
.dcard--ref .dcard__body p b{color:#fff;font-weight:600}
.ref__row{display:flex;gap:8px;margin-top:14px}
.ref__link{flex:1;min-width:0;height:40px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e6e6ea;font-size:.95rem;outline:0}
.ref__link:focus{border-color:var(--accent)}
.ref__row .btn{height:40px;flex:0 0 auto}
.ref__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.ref__stats div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.ref__stats b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff}
.ref__stats span{display:block;margin-top:2px;font-size:.82rem;color:var(--muted)}
/* Refer a friend page */
.rf{display:grid;gap:14px}
.rf__hero{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid rgba(248,162,0,.35);background:linear-gradient(135deg,#221a0e 0%,#141416 55%,#101013 100%);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:32px;align-items:center;isolation:isolate}
.rf__hero::before{content:"";position:absolute;inset:-40% auto auto -10%;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(248,162,0,.18),transparent 70%);z-index:-1;pointer-events:none}
.rf__copy h2{margin:10px 0 12px;font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;color:#fff}
.rf__copy p{margin:0;color:var(--muted);font-size:1.05rem;max-width:36ch}
.rf__linkbox{padding:20px;border-radius:20px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.rf__linkbox .ref__row{margin-top:0}
.rf__linkbox .ref__link{height:46px;font-size:1rem}
.rf__linkbox .ref__row .btn{height:46px}
.rf__share{display:flex;align-items:center;gap:8px;margin-top:14px}
.rf__share>span{color:var(--muted);font-size:.9rem;margin-right:4px}
.rf__net{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.rf__net:hover{background:rgba(255,255,255,.16)}
.rf__net svg{width:18px;height:18px}
.rf__stats{margin-top:0;grid-template-columns:repeat(4,1fr)}
.rf__stats div{padding:18px 22px}
.rf__stats b{font-size:2rem}
.rf__how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rf__how div{padding:20px 22px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:grid;gap:4px}
.rf__how i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--grad);color:#111;font-weight:800;font-size:.85rem;display:grid;place-items:center;margin-bottom:6px}
.rf__how b{color:#fff;font-weight:600}
.rf__how span{color:var(--muted);font-size:.92rem}
.rf__activate{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.rf__activate span{color:var(--muted);font-size:.9rem}
.rf__preview{padding:20px;border-radius:20px;background:rgba(0,0,0,.35);border:1px solid var(--line);opacity:.75;pointer-events:none;user-select:none}
.rf__preview-row{display:flex;gap:8px}
.rf__preview-link{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.18);color:var(--muted);display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rf__preview-btn{height:46px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-weight:600;display:flex;align-items:center}
.rf__preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.rf__preview-stats div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.rf__preview-stats b{display:block;font-size:1.4rem;font-weight:800;color:#fff;line-height:1.1}
.rf__preview-stats span{display:block;margin-top:2px;font-size:.8rem;color:var(--muted)}
@media (max-width:860px){.rf__hero{grid-template-columns:minmax(0,1fr)}.rf__preview{display:none}.rf__linkbox,.rf__copy{min-width:0}.rf__how{grid-template-columns:1fr}.ref__stats.rf__stats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ref__stats.rf__stats{grid-template-columns:1fr}}
.info{display:flex;flex-direction:column;gap:18px}
.info__who{display:flex;align-items:center;gap:14px}
.info__avatar{width:48px;height:48px;border-radius:50%;background:var(--grad);color:#111;font-weight:800;font-size:1.05rem;letter-spacing:.02em;display:grid;place-items:center;text-transform:uppercase;flex:0 0 auto}
.info__name{display:flex;flex-direction:column;line-height:1.3}
.info__name b{font-size:1.1rem;color:#fff}
.info__name span{color:var(--muted);font-size:.92rem}
.info__rows{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.info__rows>div{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.5}
.info__rows dt{color:var(--muted);font-weight:500}
.info__rows dd{margin:0;color:#e6e6ea;word-break:break-word}
.info__sec{display:inline-flex;align-items:center;gap:4px;font-size:.95rem;font-weight:600;color:var(--accent);align-self:flex-start}
.info__sec svg{width:14px;height:14px}
.dcard__body--sub{padding-top:0;color:var(--muted);font-size:.92rem}
@media (max-width:900px){
  .plan,.plan--app,.plan:has(> .plan__stat){grid-template-columns:1fr}
  .plan__stat{text-align:left;padding-left:0;border-left:0;padding-top:20px;border-top:1px solid var(--line);flex-direction:row;align-items:baseline;gap:12px}
  .plan__stat span{margin-top:0}
  .plan__app{padding:16px}
  .dgrid{grid-template-columns:1fr}
  .dcard--slim .dcard__body{flex-wrap:wrap}
}
@media (max-width:760px){
  .plan__ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .plan__ctas .btn{width:100%;padding:0 12px;height:48px}
  .plan__ctas .btn--accent{grid-column:1/-1}
  .plan__ctas .btn:only-child{grid-column:1/-1}
  .dcard__head{padding:18px 18px 8px}.dcard__list .i b{white-space:normal}.dcard__body{padding:4px 18px 18px}.dcard__list{padding:2px 4px 8px}.dcard__list a{padding:12px 14px}
  .ccard{padding:18px}
  .ctabs a{padding:10px 12px;font-size:.92rem}
  .appc__usage{gap:6px 10px;font-size:.76rem}
}

/* --------------------------------------------------------------------------
   List pages (services / invoices / tickets) — already rebuilt templates
   -------------------------------------------------------------------------- */
.ltools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.ltools .btn{margin-left:auto}
.lfilter{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.lfilter button{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:.9rem;padding:8px 14px;border-radius:999px;cursor:pointer}
.lfilter button.is-on{background:#fff;color:#000}
.lfilter button i{font-style:normal;margin-left:6px;font-size:.78rem;opacity:.6}
[hidden]{display:none!important}
.lempty--filter{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 24px}
.lempty--filter p{margin:0;color:var(--muted)}
.lempty--filter.lempty{border-style:dashed}
.lsearch{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);flex:1;min-width:200px;max-width:340px;margin:0}
.lsearch svg{width:16px;height:16px;flex:0 0 auto}
.lsearch input{background:transparent;border:0;color:#fff;outline:0;width:100%;font-size:.95rem}
.lempty{padding:48px 24px;text-align:center;border-radius:var(--rc);background:var(--surface);border:1px solid var(--line)}
.lempty h3{margin:0 0 6px;font-size:1.4rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.lempty p{margin:0 0 18px;color:var(--muted)}
.svclist,.tklist{display:grid;gap:12px}
.svc,.tk{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:var(--rc);background:var(--surface);border:1px solid var(--line);color:#fff;transition:transform .2s,border-color .2s}
.svc:hover,.tk:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22)}
.svc__main{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.svc__icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(248,162,0,.14);color:var(--accent);flex:0 0 auto}
.svc__icon svg{width:22px;height:22px}
.svc__main b,.tk__main b{display:block;font-size:1.1rem;font-weight:700;letter-spacing:-.015em;color:#fff}
.svc__main span,.tk__main>span{display:block;color:var(--muted);font-size:.92rem;margin-top:3px}
.svc__meta{display:flex;align-items:center;gap:28px}
.svc__meta div{display:grid;text-align:right}
.svc__meta em{font-style:normal;color:var(--accent);font-size:.85rem;font-weight:600}
.svc--ended .svc__icon{background:rgba(255,255,255,.06);color:var(--muted)}
.svc--ended .svc__main b{color:#c8c8cc}
.svc__meta small{color:var(--muted);font-size:.8rem}
.svc__meta b{color:#fff;font-size:1rem;font-weight:600}
.svc__go{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-size:.95rem;font-weight:600;flex:0 0 auto;margin-left:6px}
.svc__go svg,svg.svc__go{width:16px;height:16px}
.invlist{display:grid;gap:8px}
.inv{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 132px;align-items:center;gap:16px;padding:16px 22px;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:#e6e6ea;transition:border-color .2s}
.inv:hover{border-color:rgba(255,255,255,.22)}
.inv--head{background:transparent;border:0;padding:4px 22px;color:var(--muted);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.inv--due{border-color:rgba(248,162,0,.18)}
.inv__num{display:flex;align-items:center;gap:10px}
.inv__num b{color:#fff;font-weight:700}
.inv__total{font-weight:700;color:#fff}
.inv__act{text-align:right}
.tk__main{flex:1;min-width:0}
.tk__top{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.tk__id{color:var(--muted);font-size:.88rem;font-weight:600}
.tk__dept{color:var(--muted);font-size:.85rem;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06)}
@media (max-width:860px){
  .svc{flex-wrap:wrap}.svc__meta{width:100%;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}.svc__meta div{text-align:left}.svc__go{display:none}
  .inv{grid-template-columns:1fr auto;grid-template-areas:"num total" "date date" "act act";gap:6px 12px;padding:16px 18px}
  .inv--head{display:none}
  .inv__num{grid-area:num}.inv__total{grid-area:total;font-size:1.05rem}
  .inv__date--issued{display:none}
  .inv__date{grid-area:date;color:var(--muted);font-size:.92rem}.inv__date::before{content:attr(data-l) " ";color:var(--muted)}
  .inv__act{grid-area:act;text-align:left;margin-top:6px}.inv__act .btn{width:100%;height:44px}
  .inv__act{display:none}
  .ltools .btn{margin-left:0}.lsearch{max-width:none}
}

/* Ticket thread */
.tkt{display:grid;gap:14px;max-width:900px}
.tkt__reply{background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);padding:22px}
.tkt__lbl{display:block;margin:0 0 12px;font-size:1.1rem;font-weight:700;color:#fff}
.tkt__reply textarea{min-height:140px;width:100%}
.tkt__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.tkt__file{cursor:pointer;position:relative;gap:8px}
.tkt__file input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.tkt__file svg{width:18px;height:18px}
.tkt__files{color:var(--muted);font-size:.85rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.tkt__files.is-set{color:#fff}
.tkt__close{margin-left:auto;color:var(--bad);font-size:.92rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tkt__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.92rem;margin-bottom:6px}
.tkt__id{color:#fff;font-weight:700}
.tkt__jump{margin-left:auto;height:38px;padding:0 16px;font-size:.9rem}
.tkt__thread{display:grid;gap:12px}
.msg__in{min-width:0}
.msg__head b em{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:rgba(248,162,0,.15);padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
.msg__att a svg{width:14px;height:14px}
.tkt__closed{margin-bottom:14px}
.msg{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 22px;border-radius:var(--rc);background:var(--surface);border:1px solid var(--line)}
.msg--staff{background:linear-gradient(160deg,#1d1710,var(--surface) 60%);border-color:rgba(248,162,0,.3)}
.msg__avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:rgba(255,255,255,.1);color:#fff;text-transform:uppercase}
.msg--staff .msg__avatar{background:var(--grad);color:#111}
.msg__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.msg__head b{color:#fff;font-weight:700}
.msg__head span{color:var(--muted);font-size:.88rem}
.msg__body{color:#e6e6ea;line-height:1.6;font-size:1rem;word-break:break-word}
.msg__body p{margin:0 0 10px}
.msg__att{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.msg__att a,.msg__att span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;font-size:.85rem}
.tkt__closed{padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);text-align:center}
.rating .star,.rating-done .star{display:inline-block;width:18px;height:18px;margin-right:2px;background:rgba(255,255,255,.15);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);cursor:pointer}
.rating .star:hover,.rating .star:hover~.star,.rating-done .star.active{background:var(--accent)}
.rating{direction:rtl;display:inline-flex}
/* Service detail */
.sd{display:grid;gap:14px}
.sd__strip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-radius:18px;border:1px solid;font-size:.98rem;color:#fff}
.sd__strip a:not(.btn){color:inherit;text-decoration:underline}
.sd__strip--warn{background:rgba(248,162,0,.12);border-color:rgba(248,162,0,.35)}
.sd__strip--bad{background:var(--bad-bg);border-color:rgba(255,59,48,.4)}
.sd__strip .btn-sm{flex:0 0 auto}
.sd__plan{margin-top:0}
.sd__cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:start}
.sd__side{display:grid;gap:14px}
.sd__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);overflow:hidden}
.sd__card h3{margin:0;padding:18px 22px 0;font-size:1.05rem;font-weight:700;color:#fff}
.sd__card .sd__body{padding:8px 22px 18px;color:#e6e6ea}
.sd__row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.sd__row:last-of-type{border-bottom:0}
.sd__row span:first-child{color:var(--muted)}
.sd__row span:last-child{color:#fff;font-weight:600;text-align:right}
.sd__more{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:.95rem;font-weight:600;color:var(--accent)}
.sd__more svg{width:14px;height:14px}
.sd__note{margin:0;padding:14px 22px 20px;color:var(--muted);font-size:.92rem;border-top:1px solid var(--line)}
.sd__note a{color:var(--accent);font-weight:600}
.sd__links{display:grid;padding:8px 8px 8px}
.sd__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:12px;color:#fff;transition:background .2s}
.sd__links a:hover{background:rgba(255,255,255,.06)}
.sd__links .i{display:grid;gap:1px;min-width:0}
.sd__links b{font-weight:600}
.sd__links .i span{color:var(--muted);font-size:.88rem}
.sd__links svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.sd__links .is-danger b{color:var(--bad)}
@media (max-width:860px){.sd__cols{grid-template-columns:1fr}.sd__strip{flex-direction:column;align-items:flex-start}.msg{grid-template-columns:1fr}.msg__avatar{display:none}}}
.nav__links a.is-on{color:#fff}

/* --------------------------------------------------------------------------
   Forms (submit ticket, details, password, security)
   -------------------------------------------------------------------------- */
.frm .dcard__body{padding-top:8px}
.frm__row{display:grid;gap:0 16px}
.frm__row--2{grid-template-columns:1fr 1fr}
.frm__row--3{grid-template-columns:repeat(3,1fr)}
.frm__files{display:flex;gap:8px;align-items:center}
.frm__files .form-control{flex:1;min-width:0}
.frm__files .btn{flex:0 0 auto;height:48px}
.frm__actions{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.frm__narrow{max-width:640px}
.frm input[type=file].form-control{padding:10px 14px;height:auto;line-height:1.4}
.frm input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.frm .form-control-feedback{display:none}
.frm .progress{margin:12px 0 10px}
.frm .alert-info{font-size:.9rem;padding:12px 16px;line-height:1.5}.frm .alert-info strong{display:block;margin-bottom:4px}
.frm .captcha-wrap,.frm .captcha{margin-top:8px}
.frm #inputNewPassword2Msg{margin-top:8px;font-size:.9rem}
.frm #inputNewPassword2Msg .text-danger{color:var(--bad)}
.frm #inputNewPassword2Msg .text-success{color:var(--ok)}
.frm .has-error .form-control{border-color:rgba(255,59,48,.6)}
.frm .has-success .form-control{border-color:rgba(52,199,89,.6)}
.frm .has-warning .form-control{border-color:rgba(248,162,0,.6)}
.progress-bar-danger{background:var(--bad)}.progress-bar-warning{background:var(--accent)}.progress-bar-success{background:var(--ok)}
.iti,.intl-tel-input{width:100%}
@media (max-width:760px){.frm__row--2,.frm__row--3{grid-template-columns:1fr}.frm__actions .btn{flex:1}}

/* --------------------------------------------------------------------------
   Invoice
   -------------------------------------------------------------------------- */
.inv-hero{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:32px;align-items:start;isolation:isolate}
.inv-hero--due{border-color:rgba(248,162,0,.35);background:linear-gradient(135deg,#221a0e 0%,#141416 55%,#101013 100%)}
.inv-hero--due::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(248,162,0,.2),transparent 70%);z-index:-1;pointer-events:none}
.inv-hero__amt{font-size:clamp(2.6rem,5vw,4.2rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:#fff}
.inv-hero__pay{padding:22px;border-radius:20px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.inv-gateway{margin-bottom:14px}
.inv-gateway label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.inv-gateway b{color:#fff;font-weight:600}
.payment-btn-container .btn,.payment-btn-container input[type=submit],.payment-btn-container button{width:100%;height:52px;border-radius:999px;background:var(--grad);color:#111;font-weight:700;font-size:1.02rem;border:0;cursor:pointer;box-shadow:0 10px 36px rgba(248,162,0,.28)}
.payment-btn-container form{margin:0}
.payment-btn-container img{display:inline-block;margin:0 auto}
.inv-fine{margin-top:12px;font-size:.9rem;color:var(--muted)}
.inv-hero__pay--wait{border-color:rgba(248,162,0,.35);background:rgba(248,162,0,.06)}
.inv-wait{display:grid;gap:10px;justify-items:start}
.inv-wait__mail{display:block;margin-top:6px;color:#fff;font-weight:500;overflow-wrap:anywhere}
.inv-wait__ico{width:40px;height:40px;border-radius:50%;background:rgba(248,162,0,.16);color:var(--accent);display:grid;place-items:center}
.inv-wait__ico svg{width:20px;height:20px}
.inv-wait b{color:#fff;font-size:1.1rem;font-weight:700;letter-spacing:-.015em}
.inv-wait p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}

.inv-wait .btn{margin-top:6px}
.pill--pending{background:var(--warn-bg);color:var(--accent)}
.inv-tools{display:flex;gap:8px;margin-top:16px}
.inv-items td,.inv-items th{padding:12px 0}
.inv-items__sum td{color:var(--muted);border-top:0;padding:6px 0}
.inv-items tbody tr:first-child td{border-top:0}
.inv-items__sum:first-of-type td{padding-top:16px;border-top:1px solid var(--line)}
.inv-items__total td{color:#fff;font-weight:700;font-size:1.15rem;padding-top:12px;border-top:1px solid var(--line)}
.rcpt{margin-top:14px;border-radius:var(--rc);background:var(--surface);border:1px solid var(--line);padding:6px 26px 0}
.rcpt__item{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.rcpt__desc{display:grid;gap:3px;min-width:0}
.rcpt__desc b{color:#fff;font-size:1.08rem;font-weight:600}
.rcpt__per{color:var(--muted);font-size:.92rem}
.rcpt__per::before{content:"Covers ";}
.rcpt__sub{display:block;color:var(--muted);font-size:.92rem}
.rcpt__amt{color:#fff;font-weight:600;font-size:1.08rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.rcpt__sums{padding:12px 0 0;display:grid;gap:6px}
.rcpt__sums div{display:flex;justify-content:space-between;color:var(--muted);font-size:.95rem}
.rcpt__total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 22px}
.rcpt__total span{color:var(--muted);font-weight:500}
.rcpt__total b{color:#fff;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rcpt__fine{margin:-10px 0 16px;color:var(--muted);font-size:.85rem}
.rcpt__pay{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.rcpt__pay>div{display:flex;align-items:center;gap:12px}
.rcpt__pay .i{display:grid;gap:1px}.rcpt__pay .i b{color:#fff;font-weight:600}.rcpt__pay .i span{color:var(--muted);font-size:.9rem}
.rcpt__ok{width:30px;height:30px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;flex:0 0 auto}
.rcpt__ok svg{width:15px;height:15px}
.rcpt__note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin-bottom:16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);font-size:.92rem;line-height:1.5}
.rcpt__note svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--muted)}
.rcpt__note b{color:#fff;font-weight:600}
.rcpt__note--warn{background:rgba(248,162,0,.07);border-color:rgba(248,162,0,.3);color:#e6e6ea}
.rcpt__note--warn svg{color:var(--accent)}
.rcpt__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0 16px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.rcpt__foot b{color:#e6e6ea;font-weight:600}
.rcpt__foot .link{font-size:.9rem;white-space:nowrap}
@media (max-width:640px){.rcpt{padding:0 18px}.rcpt__foot{flex-direction:column;align-items:flex-start;gap:8px}}
@media (max-width:900px){.inv-hero{grid-template-columns:1fr}}
@media print{.nav,.menu,.foot,.chead .ctabs,.inv-tools,.inv-hero__pay{display:none!important}body.ca-shell{padding-top:0}}

/* --------------------------------------------------------------------------
   App login module (modules/servers/xtreamui) — dark override
   -------------------------------------------------------------------------- */
.sd__sub{margin:4px 22px 0;color:var(--muted);font-size:.95rem}
.sd__msg{margin:14px 22px 0;padding:11px 14px;border-radius:12px;font-size:.95rem;border:1px solid}
.sd__msg--ok{background:var(--ok-bg);border-color:rgba(52,199,89,.4);color:#fff}
.sd__msg--bad{background:var(--bad-bg);border-color:rgba(255,59,48,.4);color:#fff}
.cred{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 22px 6px}
.cred__tile{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"l l l" "v b1 b2";align-items:center;gap:6px 8px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.cred__label{grid-area:l;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cred__val{grid-area:v;font-size:1.35rem;font-weight:700;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cred__val--pw{letter-spacing:.14em}.cred__val--pw.is-shown{letter-spacing:.02em}
.cred__btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .2s}
.cred__btn:hover{background:rgba(255,255,255,.14)}
.cred__btn.is-done{background:var(--ok-bg);border-color:rgba(52,199,89,.5);color:var(--ok)}
.cred__btn svg{width:15px;height:15px}
.cred__tile .cred__btn:nth-of-type(1){grid-area:b1}.cred__tile .cred__btn:nth-of-type(2){grid-area:b2}
.cred__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px 18px;white-space:nowrap}
.cred__edit{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font:inherit;font-size:.95rem;font-weight:600;color:var(--accent);cursor:pointer}
.cred__edit svg{width:14px;height:14px;transition:transform .2s}
.cred__edit[aria-expanded="true"] svg{transform:rotate(180deg)}
.cred__form{padding:18px 22px 20px;border-top:1px solid var(--line)}
.cred__fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cred__fields label{display:grid;gap:6px;font-size:.88rem;color:var(--muted);font-weight:500}
.cred__fields input{height:46px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:1rem}
.cred__fields input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(248,162,0,.15);outline:0}
.cred__hint{margin:12px 0 14px;color:var(--muted);font-size:.9rem}
.cred__actions{display:flex;gap:10px}
@media (max-width:560px){.cred{grid-template-columns:1fr}.cred__fields{grid-template-columns:1fr}.cred__foot{flex-direction:column;align-items:flex-start;gap:10px}}
/* WHMCS phone country-code widget (intl-tel-input, CSS not otherwise loaded) */
.intl-tel-input{position:relative;display:block}
.intl-tel-input .flag-container{position:absolute;top:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;padding:0 10px 0 16px;cursor:pointer}
.intl-tel-input .selected-flag{display:flex;align-items:center;gap:6px;color:#fff;font-weight:600;font-size:.95rem;outline:0}
.intl-tel-input .selected-flag .iti-flag,.intl-tel-input .iti-flag{display:none}
.intl-tel-input .selected-flag .iti-arrow,.intl-tel-input .arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--muted)}
.intl-tel-input input.form-control{padding-left:76px}
.intl-tel-input .country-list{position:absolute;z-index:50;left:0;top:calc(100% + 6px);max-height:260px;overflow-y:auto;min-width:300px;list-style:none;padding:6px;margin:0;border-radius:14px;background:#111114;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.intl-tel-input .country-list.hide{display:none}
.intl-tel-input .country-list .country{padding:8px 10px;border-radius:8px;font-size:.92rem;color:#e6e6ea;cursor:pointer;display:flex;gap:8px}
.intl-tel-input .country-list .country:hover,.intl-tel-input .country-list .country.highlight{background:rgba(255,255,255,.08)}
.intl-tel-input .country-list .divider{border-bottom:1px solid var(--line);margin:6px 0}
.intl-tel-input .country-list .dial-code{color:var(--muted)}
/* same widget, newer class names (.iti) */
.iti{position:relative;display:block;width:100%}
.iti__flag-container{position:absolute;top:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;padding:0 10px 0 16px;cursor:pointer}
.iti__selected-flag{display:flex;align-items:center;gap:6px;height:100%;color:#fff;font-weight:600;font-size:.95rem;outline:0;background:transparent}
.iti__flag{display:none}
.iti__arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--muted)}
.iti input.form-control,.iti input[type=tel]{padding-left:76px}
.iti__country-list{position:absolute;z-index:50;left:0;top:calc(100% + 6px);max-height:260px;overflow-y:auto;min-width:300px;list-style:none;padding:6px;margin:0;border-radius:14px;background:#111114;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.6);white-space:nowrap}
.iti__country-list.iti__hide,.iti__hide{display:none}
.iti__country{padding:8px 10px;border-radius:8px;font-size:.92rem;color:#e6e6ea;cursor:pointer;display:flex;gap:8px}
.iti__country:hover,.iti__country.iti__highlight{background:rgba(255,255,255,.08)}
.iti__divider{border-bottom:1px solid var(--line);margin:6px 0}
.iti__dial-code{color:var(--muted)}
.iti__flag-box{display:none}
/* Email history */
.mail{display:grid;gap:8px}
.mail__row{display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:#fff;transition:border-color .2s}
.mail__row:hover{border-color:rgba(255,255,255,.22)}
.mail__ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--muted);flex:0 0 auto}
.mail__ico svg{width:18px;height:18px}
.mail__main{flex:1;min-width:0;display:grid;gap:2px}
.mail__main b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail__main span{color:var(--muted);font-size:.9rem}
.mail__go{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-size:.95rem;font-weight:600;flex:0 0 auto}
.mail__go svg{width:16px;height:16px}
.mail__more{margin-top:14px;display:flex;justify-content:center}
.mail__foot{margin-top:10px;text-align:center;color:var(--muted);font-size:.88rem}
@media (max-width:640px){.mail__go span{display:none}.mail__main b{white-space:normal}}

/* read-only field with explanation */
.lock{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:16px}
.lock__ico{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--muted);display:grid;place-items:center;flex:0 0 auto}
.lock__ico svg{width:18px;height:18px}
.lock__body{display:grid;gap:4px;min-width:0}
.lock__body b{color:#fff;font-weight:600;word-break:break-all}
.lock__body span{color:var(--muted);font-size:.92rem;line-height:1.5}

/* password form */
.pwf__wrap{position:relative}
.pwf__wrap .form-control{padding-right:76px}
.pwf__eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.pwf__meter{height:6px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden}
.pwf__meter i{display:block;height:100%;width:0;border-radius:999px;background:var(--muted);transition:width .25s,background .25s}
.pwf__meter i.is-weak{background:var(--bad)}.pwf__meter i.is-ok{background:var(--accent)}.pwf__meter i.is-strong{background:var(--ok)}
.pwf__hint{margin:8px 0 0;color:var(--muted);font-size:.88rem}
.pwf__note{color:var(--muted);font-size:.9rem;align-self:center}

/* inline field errors (shared with cart) */
.frm__err{display:block;margin-top:6px;color:var(--bad);font-size:.88rem;font-weight:500}
.has-error .form-control{border-color:rgba(255,59,48,.7)!important;box-shadow:0 0 0 4px rgba(255,59,48,.12)}
.has-error label{color:var(--bad)}

/* Cancel request */
.cx{max-width:640px;margin:0 auto}
.cx__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);padding:clamp(24px,4vw,36px);display:grid;gap:26px}
.cx__card--msg{text-align:center;justify-items:center;gap:12px}
.cx__card--msg h2{font-size:1.6rem;font-weight:700;letter-spacing:-.025em;color:#fff}
.cx__card--msg p{color:var(--muted);max-width:38em;line-height:1.55}
.cx__card--msg .cx__acts{margin-top:14px}
.cx__ref{font-size:.95rem}.cx__ref a{color:var(--accent);font-weight:700}
.cx__ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px}
.cx__ico svg{width:26px;height:26px}
.cx__ico--ok{background:var(--ok-bg);color:var(--ok)}.cx__ico--bad{background:var(--bad-bg);color:var(--bad)}
.cx__plan{display:grid;gap:4px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.cx__eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cx__plan b{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.cx__meta{color:var(--muted);font-size:.95rem}
.cx__field{display:grid;gap:10px}
.cx__field label,.cx__lbl{font-weight:600;color:#fff;font-size:1rem}
.cx__field textarea{width:100%;min-height:110px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font:inherit;line-height:1.5;resize:vertical;outline:0;transition:border-color .2s,box-shadow .2s}
.cx__field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(248,162,0,.15)}
.cx__field textarea::placeholder{color:rgba(255,255,255,.35)}
.cx__field.is-error textarea{border-color:rgba(255,59,48,.6)}
.cx__err{color:var(--bad);font-size:.88rem}
.cx__opts{display:grid;gap:10px}
.cx__opt{display:block;cursor:pointer}
.cx__opt input{position:absolute;opacity:0;pointer-events:none}
.cx__opt__box{display:grid;gap:4px;padding:16px 18px 16px 50px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);position:relative;transition:border-color .2s,background .2s}
.cx__opt__box::before{content:"";position:absolute;left:18px;top:19px;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);transition:border-color .2s,box-shadow .2s}
.cx__opt input:checked+.cx__opt__box{border-color:var(--accent);background:rgba(248,162,0,.08)}
.cx__opt input:checked+.cx__opt__box::before{border-color:var(--accent);box-shadow:inset 0 0 0 4px #000;background:var(--accent)}
.cx__opt input:focus-visible+.cx__opt__box{box-shadow:0 0 0 4px rgba(248,162,0,.2)}
.cx__opt__t{font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cx__opt__t em{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:rgba(248,162,0,.15);padding:3px 8px;border-radius:999px}
.cx__opt__d{color:var(--muted);font-size:.92rem;line-height:1.45}
.cx__chk{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-weight:400!important}
.cx__acts{display:flex;gap:10px;flex-wrap:wrap}
.cx__acts .btn{height:50px;padding:0 24px}
.btn--danger{background:var(--bad-bg);color:var(--bad);border:1px solid rgba(255,59,48,.35)}
.btn--danger:hover{background:rgba(255,59,48,.26)}
.cx__foot{color:var(--muted);font-size:.9rem;margin:0}
.cx__foot a{color:#fff;text-decoration:underline}
em.cx__tag--ok{color:var(--ok);background:var(--ok-bg)}
.cx__note{display:flex;gap:10px;align-items:flex-start;margin:2px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-size:.9rem;line-height:1.45}
.cx__note svg{flex:0 0 auto;width:18px;height:18px;margin-top:1px}
.cx__note a{color:#fff;text-decoration:underline;white-space:nowrap}
.cx__note--ok{background:var(--ok-bg);border-color:rgba(52,199,89,.35);color:#fff}.cx__note--ok svg{color:var(--ok)}
@media (max-width:640px){.cx__acts .btn{flex:1 1 100%}}

/* Open ticket: step one */
.tso{max-width:900px}
.tso__chat{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:20px;border:1px solid rgba(248,162,0,.3);background:linear-gradient(160deg,rgba(248,162,0,.14),rgba(255,95,31,.05)),var(--surface);color:#fff;transition:border-color .2s,transform .2s}
.tso__chat:hover{border-color:var(--accent);transform:translateY(-2px)}
.tso__chat__ico{flex:0 0 auto;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#000}
.tso__chat__ico svg{width:24px;height:24px}
.tso__chat__txt{flex:1;min-width:0;display:grid;gap:2px}
.tso__chat__txt b{font-size:1.1rem;font-weight:700;letter-spacing:-.015em}
.tso__chat__txt span{color:var(--muted);font-size:.92rem}
.tso__h{margin:34px 0 14px;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tso__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tso__dept{display:flex;align-items:center;gap:16px;padding:20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);color:#fff;transition:border-color .2s,background .2s}
.tso__dept:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.tso__ico{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(248,162,0,.14);color:var(--accent)}
.tso__ico svg{width:22px;height:22px}
.tso__txt{flex:1;min-width:0;display:grid;gap:3px}
.tso__txt b{font-size:1.05rem;font-weight:700;letter-spacing:-.015em}
.tso__txt span{color:var(--muted);font-size:.9rem;line-height:1.45}
.tso__arr{flex:0 0 auto;width:18px;height:18px;color:rgba(255,255,255,.35);transition:color .2s,transform .2s}
.tso__dept:hover .tso__arr,.tso__chat:hover .tso__arr{color:var(--accent);transform:translateX(3px)}
@media (max-width:760px){.tso__grid{grid-template-columns:1fr}.tso__chat,.tso__dept{padding:16px}}

/* New reply indicators */
.todo{margin-bottom:16px;border-radius:20px;border:1px solid rgba(248,162,0,.4);background:linear-gradient(160deg,rgba(248,162,0,.14),rgba(255,95,31,.04)),var(--surface);overflow:hidden}
.todo__head{padding:14px 20px 8px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.todo__row{display:flex;align-items:center;gap:16px;padding:12px 20px 14px;color:#fff;border-top:1px solid rgba(248,162,0,.14);transition:background .2s}
.todo__row:first-of-type{border-top:0}
.todo__row:hover{background:rgba(255,255,255,.04)}
.todo__ico{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:#000}
.todo__ico--msg{background:rgba(255,255,255,.12);color:#fff}
.todo__ico--bad{background:var(--bad);color:#fff}
.todo__ico svg{width:20px;height:20px}
.todo__txt{flex:1;min-width:0;display:grid;gap:1px}
.todo__txt b{font-weight:700}
.todo__txt span{color:var(--muted);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo .btn{flex:0 0 auto;height:40px;padding:0 18px;font-size:.95rem}
@media (max-width:560px){.todo .btn{padding:0 14px;font-size:.9rem}.todo__ico{display:none}}
/* Billing summary */
.bill{display:grid;gap:12px;padding-top:6px}
.bill__ok{display:flex;align-items:center;gap:10px;font-size:1.08rem}
.bill__ok b{color:#fff;font-weight:700}
.bill__tick{width:28px;height:28px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;flex:none}
.bill__tick svg{width:15px;height:15px}
.bill__ok.is-due .bill__tick{background:var(--warn-bg);color:var(--accent)}
.bill__rows{margin:0;display:grid;border-top:1px solid var(--line)}
.bill__rows>div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.5}
.bill__rows dt{color:var(--muted);font-weight:500}
.bill__rows dd{margin:0;color:#e6e6ea}
.bill__rows dd b{color:#fff;font-weight:600}
.bill__rows dd a{color:#e6e6ea}
.bill__rows dd a:hover{color:var(--accent)}
.dcard__more{display:inline-flex;align-items:center;gap:4px;font-size:.95rem;font-weight:600;color:var(--accent);align-self:flex-start}
.dcard__more svg{width:14px;height:14px}
/* Help empty state */
.help{padding-top:2px}
.help__lead{color:var(--muted);margin-bottom:8px}
.help__links{display:grid;margin:0 -10px}
.help__links a{display:flex;align-items:center;gap:14px;padding:11px 10px;border-radius:14px;color:#e6e6ea;transition:background .2s}
.help__links a:hover{background:rgba(255,255,255,.05)}
.help__ico{flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center}
.help__ico svg{width:19px;height:19px}
.help__links .i{display:grid;gap:1px;min-width:0}
.help__links .i b{color:#fff;font-weight:600}
.help__links .i span{color:var(--muted);font-size:.88rem}
/* Slim row: you + referral */
.dcard--slim .dcard__body{display:flex;align-items:center;gap:14px;padding:18px 24px}
.who__name{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.who__name b{color:#fff;font-size:1.05rem}
.who__name span{color:var(--muted);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who__acts{display:flex;gap:16px;flex:none}
.who__acts .link{font-size:.95rem}
.ref{flex-wrap:wrap}
.ref__txt{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:180px}
.ref__txt>b{color:#fff;font-size:1.05rem}
.ref__txt>span{color:var(--muted);font-size:.9rem}
.ref__txt>span b{color:#fff;font-weight:600}
.ref__acts{display:flex;align-items:center;gap:16px;flex:none}
.ref__acts .btn-sm{height:40px;min-width:172px;padding:0 18px;font-size:.95rem}
.ref__acts .link{font-size:.95rem}
.tk.is-new{border-color:rgba(248,162,0,.45);background:linear-gradient(160deg,rgba(248,162,0,.1),var(--surface) 55%)}
.dcard__list a.is-new .i b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:2px}
@media (max-width:640px){.newrep{flex-wrap:wrap}.newrep .btn{flex:1 1 100%}}

/* Open ticket: form */
.tof{background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);padding:clamp(22px,4vw,32px);display:grid;gap:18px}
.tof__as{margin:0 0 4px;color:var(--muted);font-size:.95rem}.tof__as b{color:#fff;font-weight:600}
.tof .form-group{margin:0}
.tof .frm__row{display:grid;gap:16px}.tof .frm__row--2{grid-template-columns:1fr 1fr}
.tof label{display:block;margin-bottom:8px;font-weight:600;color:#fff;font-size:.98rem}
.tof label .t-muted{color:var(--muted);font-weight:400}
.tof label.tkt__file{display:inline-flex;align-items:center;margin:0;font-size:.95rem}
.tof textarea.form-control{min-height:150px}
.tof__f.is-error .form-control{border-color:rgba(255,59,48,.6)}
.tof__acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:6px}
.tof__acts .btn{height:50px;padding:0 22px}
.tof__cancel{margin-left:auto;color:var(--muted);font-weight:600;font-size:.95rem}.tof__cancel:hover{color:#fff}
@media (max-width:640px){.tof .frm__row--2{grid-template-columns:1fr}.tof__acts .btn{flex:1 1 100%}.tof__cancel{margin:6px auto 0}}

.dgrid--sec{align-items:start}.dgrid--sec .pwf{grid-column:1/-1;max-width:640px}.dgrid--sec .pwf .dcard{max-width:none}


/* My plans: hero + ended list */
.svchead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.svchead h2{font-size:1.15rem;font-weight:700;letter-spacing:-.015em;color:#fff;margin:0}
.svchead .btn{margin:0}
.svchead--sub{margin-top:40px}
.svchead--sub span{color:var(--muted);font-size:.9rem}
.plan--list+.plan--list{margin-top:14px}
.endlist{display:grid;gap:8px}
.end{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr 1fr 110px;align-items:center;gap:16px;padding:14px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:#c8c8cc;transition:border-color .2s}
.end:hover{border-color:rgba(255,255,255,.22)}
.end__name{display:flex;align-items:center;gap:10px;min-width:0}
.end__name b{color:#e6e6ea;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.end__price{color:var(--muted);font-size:.92rem}
.end__date{color:#e6e6ea;font-size:.95rem}
.end__date small{display:block;color:var(--muted);font-size:.78rem}
.end__go{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;color:var(--accent);font-size:.92rem;font-weight:600}
.end__go svg{width:14px;height:14px}
@media (max-width:760px){
  .end{grid-template-columns:1fr auto;gap:6px 12px;padding:14px 16px}
  .end__name{grid-column:1/3}
  .end__name b{white-space:normal}
  .end__price{grid-column:1;grid-row:2}
  .end__date{grid-column:2;grid-row:2;text-align:right;font-size:.92rem}
  .end__date small{display:inline;margin-right:4px}
  .end__go{display:none}
  .svchead .btn{height:42px;padding:0 16px;font-size:.92rem}
}

/* invoices: due card */
.invdue{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;padding:22px 26px;border-radius:var(--rc);border:1px solid rgba(248,162,0,.4);background:linear-gradient(135deg,#221a0e 0%,#141416 60%)}
.invdue__eyebrow{display:block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.invdue b{display:block;margin-top:6px;font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.invdue p{margin:8px 0 0;color:var(--muted);font-size:.95rem}
.invdue .btn{flex:none;height:50px;padding:0 24px;margin:0;width:auto}
@media (max-width:640px){.invdue{flex-direction:column;align-items:stretch;padding:18px}.invdue .btn{width:100%}}
.inv-hero__pay--ok{border-color:rgba(52,199,89,.35);background:rgba(52,199,89,.06)}
.inv-wait--ok .inv-wait__ico{background:var(--ok-bg);color:var(--ok)}
.inv-wait--off .inv-wait__ico{background:rgba(255,255,255,.08);color:var(--muted)}

/* Error pages (404 / 500) */
.err404{max-width:720px;margin:24px auto 80px;text-align:center;padding:0 16px}
.err404__code{display:block;font-size:clamp(88px,18vw,168px);font-weight:800;line-height:.9;letter-spacing:-.04em;background:linear-gradient(135deg,#f8a200,#ff5a1f);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:22px}
.err404 h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;letter-spacing:-.02em;color:#fff;margin:0 0 12px}
.err404>p{color:var(--muted);font-size:1.05rem;line-height:1.55;margin:0 auto 28px;max-width:540px}
.err404__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px}
.err404__ctas .btn{height:46px;padding:0 20px}
.err404__help{color:var(--muted);font-size:.95rem}.err404__help a{color:#f8a200;font-weight:600}
@media (max-width:560px){
  .dcard--slim .dcard__body{flex-wrap:wrap;gap:12px 14px;padding:16px 18px}
  .who__name{flex:1 1 0;min-width:0}
  .who__name span{white-space:normal;overflow-wrap:anywhere}
  .who__acts{flex:0 0 100%;justify-content:flex-start;gap:20px;padding-top:2px;border-top:1px solid var(--line);padding-top:12px}
  .ref__txt{flex:1 1 100%;min-width:0}
  .ref__acts{flex:0 0 100%;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}
  .ref__acts .btn-sm{flex:1 1 auto;min-width:0}
}

/* ---- Upgrade flow (upgrade.tpl / upgradesummary.tpl) ---- */
.upg{display:grid;gap:18px}
.upg__now{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:18px 22px;border-radius:var(--rc);background:var(--surface);border:1px solid var(--line)}
.upg__now b{font-size:1.15rem;color:#fff}
.upg__now .upg__lead{flex:1 1 100%;color:var(--muted);font-size:.95rem;line-height:1.5}
.upg__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px;align-items:stretch;justify-content:center}
.upg__grid--1{grid-template-columns:minmax(0,440px)}
.upg__grid--2{grid-template-columns:repeat(2,minmax(0,440px))}
.upg-card{position:relative;display:flex;flex-direction:column;margin:0;padding:34px 28px 28px;border-radius:26px;background:var(--surface);border:1px solid var(--line);transition:border-color .25s}
.upg-card:hover{border-color:rgba(255,255,255,.22)}
.upg-card--hot{background:linear-gradient(180deg,#221a0e 0%,#141414 60%);border-color:rgba(248,162,0,.6);box-shadow:0 30px 80px rgba(248,162,0,.12)}
.upg-card__tag{position:absolute;top:-14px;left:28px;background:var(--grad);color:#111;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.upg-card__tag--muted{background:#2a2a2e;color:#fff;border:1px solid rgba(255,255,255,.12)}
.upg-card__name{font-size:1.15rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.upg-card__desc{color:var(--muted);font-size:.95rem;margin:4px 0 0;min-height:2.9em;line-height:1.45}
.upg-card__price{margin-top:20px;display:flex;align-items:baseline;gap:6px}
.upg-card__price b{font-size:clamp(2.4rem,3.4vw,3.2rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:#fff}
.upg-card__price span{color:var(--muted);font-size:1rem;white-space:nowrap}
.upg-card__total{margin-top:10px;color:var(--muted);font-size:.95rem}
.upg-card__save{display:inline-flex;align-self:flex-start;margin-top:10px;padding:5px 11px;border-radius:999px;background:rgba(248,162,0,.14);color:var(--accent);font-size:.82rem;font-weight:700;letter-spacing:.02em}
.upg-card__meta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:11px}
.upg-card__meta div{display:flex;align-items:center;gap:10px;color:#e8e8ec;font-size:.98rem}
.upg-card__meta svg{width:20px;height:20px;color:var(--accent);flex:0 0 auto}
.upg-card .btn{margin-top:26px;width:100%;height:52px;font-size:1rem}
.upg__note{color:var(--muted);font-size:.95rem;text-align:center;margin:6px 0 0;line-height:1.5}
.upg__note a{color:var(--accent);font-weight:600}
.upg__stop h2{font-size:1.6rem;font-weight:800;color:#fff;margin:8px 0 8px;letter-spacing:-.02em}
.upg__stop p{color:var(--muted);max-width:60ch;line-height:1.55}
.upg__ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.upg__sum{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:18px;align-items:start}
.upg__swap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0 16px;font-weight:700;color:#fff;font-size:1.15rem}
.upg__swap svg{width:22px;height:22px;color:var(--accent);flex:0 0 auto}
.upg__from{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px;font-weight:600}
.upg__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px;padding-top:14px}
.upg__total span{color:var(--muted)}
.upg__total b{font-size:2rem;font-weight:800;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.upg__fine{margin:14px 0 0;color:var(--muted);font-size:.9rem;line-height:1.5}
.upg__lbl{display:block;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.upg__go{width:100%;margin-top:14px}
.upg__back{display:block;text-align:center;margin-top:12px;color:var(--muted);font-size:.93rem}
.upg__back:hover{color:#fff}
.upg__promo-row{display:flex;gap:8px}
.upg__promo-row .form-control{flex:1;min-height:0;height:44px;padding:0 14px;border-radius:14px;resize:none}
.upg__promo-on{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff;font-weight:600}
@media (max-width:980px){.upg__grid{grid-template-columns:1fr 1fr}.upg__sum{grid-template-columns:1fr}}
@media (max-width:640px){.upg__grid{grid-template-columns:1fr;row-gap:30px}.upg-card{padding:30px 22px 24px;border-radius:22px}}

.upg .btn.is-busy{opacity:.6;cursor:progress;pointer-events:none}

/* switch-and-save nudge */
.inv-switch{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:12px 14px;border-radius:14px;background:rgba(248,162,0,.1);border:1px solid rgba(248,162,0,.3);color:#fff;font-size:.95rem;line-height:1.45;max-width:560px}
.inv-switch svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent);margin-top:2px}
.inv-switch a{color:var(--accent);font-weight:700;white-space:nowrap}
.inv-switch a::after{content:" \203A"}
.todo__switch{display:flex;align-items:center;gap:10px;padding:9px 20px 11px 66px;font-size:.9rem;color:var(--muted);background:rgba(0,0,0,.18);border-top:1px solid rgba(248,162,0,.12);transition:background .2s}
.todo__switch:hover{background:rgba(248,162,0,.08);color:#fff}
.todo__switch svg{width:16px;height:16px;color:var(--accent);flex:0 0 auto}
.todo__switch span{flex:1;min-width:0}
.todo__switch b{color:#fff}
.todo__switch i{font-style:normal;font-weight:700;color:var(--accent);white-space:nowrap}
.todo__switch i::after{content:" \203A"}
@media (max-width:640px){.todo__switch{padding-left:20px;flex-wrap:wrap}.inv-switch{max-width:none}}
/* upgrade summary: "why this credit" info popover */
.upg__why{position:relative;display:inline-block;vertical-align:-3px;margin-left:6px;line-height:0}
.upg__why-btn{width:18px;height:18px;border:0;background:transparent;color:rgba(255,255,255,.4);display:inline-grid;place-items:center;cursor:pointer;padding:0;line-height:0;transition:color .15s}
.upg__why-btn svg{width:17px;height:17px;display:block}
.upg__why-btn:hover,.upg__why-btn[aria-expanded="true"]{color:var(--accent,#f8a200)}
.sd__row .upg__why span.upg__why-tip{display:none;white-space:normal;position:absolute;left:0;top:calc(100% + 10px);z-index:20;width:min(320px,80vw);padding:12px 14px;border-radius:12px;background:#1c1c20;border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.5);color:#e8e8ec;font-size:.86rem;line-height:1.45;font-weight:400;text-align:left}
.sd__row .upg__why:hover span.upg__why-tip,.sd__row .upg__why-btn[aria-expanded="true"]+span.upg__why-tip{display:block}
/* upgrade summary on narrow screens */
.upg--sum .sd__row > span:last-child{white-space:nowrap}
.upg--sum .sd__row{position:relative}
@media (max-width:560px){
  .upg--sum .sd__row{font-size:.94rem;gap:12px}
  .upg--sum .upg__total{flex-direction:column;align-items:flex-start;gap:4px}
  .upg--sum .upg__total b{font-size:1.9rem}
  .upg--sum .upg__why{position:static}
  .sd__row .upg__why span.upg__why-tip{left:0;right:0;width:auto;top:calc(100% - 4px)}
}