/*
 * Subscription Panel shared UI contract
 * One compact Bootstrap-based layer shared by admin, reseller, subscription,
 * authentication and purchase pages. This is the single shared panel stylesheet.
 */
:root{
  --ui-bg:#0d0f1e;--ui-surface:#0f1b2d;--ui-surface-2:#132238;
  --ui-border:#293d58;--ui-border-strong:#385273;--ui-text:#e8f0fa;
  --ui-muted:#91a5bd;--ui-primary:#4facfe;--ui-primary-hover:#4facfe;
  --ui-radius:.55rem;--ui-radius-sm:.4rem;--ui-shadow:0 .35rem 1rem #0a0c1824;
  --ui-control-height:40px;--ui-control-radius:8px;--ui-control-font:13px;
  --ui-control-height-compact:36px;--ui-control-padding-x:11px;
  --ui-page-max:1280px;--ui-settings-max:1060px;--ui-form-max:640px;
  --ui-auth-max:430px;--ui-subscription-max:1100px;--ui-page-gutter:24px;
}
html[data-panel-ui]{max-width:100%;overflow-x:hidden;color-scheme:dark;background:var(--ui-bg)}
html[data-panel-ui] body{max-width:100%;min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(circle at 92% 0,#12345a33 0,transparent 32%),var(--ui-bg);color:var(--ui-text);font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:.8125rem;line-height:1.75}
html[data-panel-ui] *,html[data-panel-ui] *::before,html[data-panel-ui] *::after{box-sizing:border-box}
html[data-panel-ui] :is(main,.container,.container-fluid,.row,[class*=grid],.card,.tunnel-card,.workspace-editor,.settings-page,.management-page){min-width:0}
html[data-panel-ui] :is(main,.container,.container-fluid,.row,[class*=grid]){max-width:100%}
html[data-panel-ui] :is(h1,h2,h3,h4,h5,h6){color:#eef1fb;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
/* Heading icon: tab-like chip (icon tile + text), matching the dashboard
   brand block — icon tile LEFT of the title in RTL pages. */
html[data-panel-ui] body .admin-heading-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;min-width:2.75rem;max-width:2.75rem;
  padding:.62rem;border-radius:.9rem;
  vertical-align:middle;margin-inline-end:0;
  background:linear-gradient(135deg,rgba(0,242,254,.20),rgba(79,172,254,.14));
  border:1px solid rgba(79,172,254,.40);
  color:#9beaff;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;font-variant-numeric:tabular-nums;stroke-linejoin:round;
}
html[data-panel-ui] body .tunnel-heading h1{
  display:flex;align-items:center;gap:.65rem;
}
html[data-panel-ui] body .settings-top h1{
  display:flex;align-items:center;gap:.65rem;
}
html[data-panel-ui] p{overflow-wrap:anywhere}
html[data-panel-ui] a{transition:color .16s ease,background-color .16s ease,border-color .16s ease,transform .16s ease}
html[data-panel-ui] :focus-visible{outline:2px solid #9ac9ff;outline-offset:2px}

/* Layout widths: the outer shell reserves sidebar space; the inner content
   remains compact instead of stretching with large displays. */
html[data-panel-ui] body .ui-page-shell{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
html[data-panel-ui] body .ui-page-content{width:min(100%,var(--ui-page-max));min-width:0;margin-inline:auto}
html[data-panel-ui] body .ui-settings-shell{--ui-shell-max:var(--ui-settings-max);width:min(100%,var(--ui-shell-max));min-width:0}
html[data-panel-ui] body .ui-form-shell{--ui-shell-max:var(--ui-form-max);width:min(100%,var(--ui-shell-max));min-width:0}
html[data-panel-ui] body .ui-auth-shell{width:min(100%,var(--ui-auth-max));min-width:0;margin-inline:auto}
html[data-panel-ui] body .ui-subscription-shell{width:min(calc(100% - 28px),var(--ui-subscription-max));min-width:0;margin-inline:auto}
html[data-panel-ui] body .ui-table-shell{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
html[data-panel-ui] body .ui-field-short{--ui-field-width:180px}
html[data-panel-ui] body .ui-field-regular{--ui-field-width:420px}
html[data-panel-ui] body .ui-field-long{--ui-field-width:720px}

/* Bootstrap controls: compact, predictable and identical across pages. */
html[data-panel-ui] body :is(.form-control,.form-select){width:min(100%,var(--ui-field-width,100%));min-width:0;height:var(--ui-control-height);min-height:var(--ui-control-height);padding:7px 11px;border:1px solid var(--ui-border-strong);border-radius:var(--ui-control-radius);background-color:#0a1627;color:#eef5ff;font-family:inherit;font-size:var(--ui-control-font);line-height:1.45;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
html[data-panel-ui] body #userSort{height:var(--ui-control-height);min-height:var(--ui-control-height);padding:7px 11px;font-size:var(--ui-control-font);line-height:1.45}
html[data-panel-ui] body :is(.form-control,.form-select):hover{border-color:#496889}
html[data-panel-ui] body :is(.form-control,.form-select):focus{border-color:var(--tab-color,var(--page-color,#4c91ff));background-color:#0b192b;color:#fff;box-shadow:0 0 0 3px rgba(var(--tab-rgb,var(--page-rgb,59,130,246)),.16);outline:0}
html[data-panel-ui] body .form-control::placeholder{color:#6f839d;opacity:1}
html[data-panel-ui] body textarea.form-control{height:auto;min-height:88px;resize:vertical}
html[data-panel-ui] body .form-label{display:flex;min-width:0;flex-direction:column;gap:6px;margin:0 0 8px;color:#c8d5e6;font-size:13px;font-weight:500}
html[data-panel-ui] body .form-text,html[data-panel-ui] body .form-label small{color:var(--ui-muted);font-size:.75rem;font-weight:400}
html[data-panel-ui] body .form-check-input{width:1rem;height:1rem;min-width:1rem;min-height:1rem;margin:.18rem 0 0;border-color:#4b6380;background-color:#0a1627;box-shadow:none}
html[data-panel-ui] body .form-label:has(>.form-check-input){display:flex;flex-direction:row;align-items:flex-start;gap:.55rem}
html[data-panel-ui] body .input-group:has(>label){display:block}
html[data-panel-ui] body .input-group>label{display:block;width:100%;margin-bottom:.4rem}
html[data-panel-ui] body .input-group>:is(.form-control,.form-select,.password-wrap){width:100%;margin:0;border-radius:var(--ui-radius-sm)}
html[data-panel-ui] body :is(.form-control,.form-select):disabled,html[data-panel-ui] body :is(.form-control,.form-select)[readonly]{border-color:#263950;background:#0a1321;color:#778aa2;cursor:not-allowed;opacity:.8}
html[data-panel-ui] body :is(.form-control,.form-select):is(:user-invalid,[aria-invalid=true]){border-color:#e05263;background-color:#24131d;box-shadow:0 0 0 .18rem #fc607624}
html[data-panel-ui] body :is(.form-control,.form-select):is(:user-valid,[aria-invalid=false]):not(:placeholder-shown){border-color:#4facfe}
html[data-panel-ui] body .ui-file-picker{position:relative;display:flex;align-items:center;width:100%;min-width:0;min-height:var(--ui-control-height);padding:5px 6px;border:1px solid var(--ui-border-strong);border-radius:var(--ui-control-radius);background-color:#0a1627;overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
html[data-panel-ui] body .ui-file-picker:hover{border-color:#496889}
html[data-panel-ui] body .ui-file-picker:focus-within{border-color:var(--tab-color,var(--page-color,#4c91ff));background-color:#0b192b;box-shadow:0 0 0 3px rgba(var(--tab-rgb,var(--page-rgb,59,130,246)),.16)}
html[data-panel-ui] body .ui-file-picker>input[type=file]{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
html[data-panel-ui] body .ui-file-picker-face{display:flex;align-items:center;gap:10px;width:100%;min-width:0;pointer-events:none}
html[data-panel-ui] body .ui-file-picker-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:28px;padding:0 12px;border:1px solid rgba(var(--page-rgb,59,130,246),.45);border-radius:calc(var(--ui-control-radius) - 2px);background:rgba(var(--page-rgb,59,130,246),.14);color:#bfe6ff;font-size:.72rem;font-weight:700;white-space:nowrap}
html[data-panel-ui] body .ui-file-picker-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-muted);font-size:.72rem}

html[data-panel-ui] body .btn:not(.button-40):not(.btn-close):not(.crm-nav-item):not(.workspace-menu-toggle):not(.offcanvas-close):not(.wg-button){display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;min-height:var(--ui-control-height);padding:0 14px;border-radius:var(--ui-control-radius);font-family:inherit;font-size:var(--ui-control-font);font-weight:600;line-height:1.35;white-space:normal;box-shadow:none;transition:filter .16s ease,transform .16s ease,box-shadow .16s ease}
html[data-panel-ui] body .btn-sm:not(.button-40):not(.btn-close):not(.wg-button){min-height:34px;padding:0 11px;font-size:12px}
html[data-panel-ui] body .btn-lg:not(.button-40):not(.wg-button){min-height:46px;padding:0 18px;font-size:14px}
html[data-panel-ui] body .btn:not(:disabled):hover{transform:translateY(-1px)}
html[data-panel-ui] body .btn:not(:disabled):active{transform:none}
html[data-panel-ui] body .btn-primary{background:var(--button-40-bg,var(--page-color,#3478e5));border-color:var(--button-40-bg,var(--page-color,#3478e5));color:#fff}
html[data-panel-ui] body .btn-primary:hover{background:var(--button-40-hover,var(--page-hover,#2868cc));border-color:var(--button-40-hover,var(--page-hover,#2868cc))}
html[data-panel-ui] body .btn-outline-secondary{border-color:rgba(var(--button-40-rgb,var(--page-rgb,70,97,127)),.45);color:#c9d7e8;background:#1d1f3e}
html[data-panel-ui] body .btn-outline-secondary:hover{border-color:var(--button-40-bg,var(--page-color,#5b7ba0));background:rgba(var(--button-40-rgb,var(--page-rgb,70,97,127)),.16);color:#fff}
html[data-panel-ui] body :is(.btn-danger,.btn-outline-danger,.tunnel-delete){border-color:#fc6076;background:#c2455c;color:#fff;box-shadow:none}
html[data-panel-ui] body :is(.btn-success,.btn-outline-success){border-color:#4facfe;background:#4facfe;color:#fff}
html[data-panel-ui] body :is(.badge,.status,.receipt-state){border-radius:999px;font-size:.68rem;font-weight:600;line-height:1.4}

/* Page rhythm and Bootstrap cards. */
html[data-panel-ui] body :is(main.tunnel-page,main.settings-page,.management-page){padding-bottom:2.25rem}
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar){align-items:flex-start;gap:1rem;margin-bottom:1.2rem}
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar) h1{margin:0 0 .25rem;font-size:clamp(1.2rem,2vw,1.5rem);font-weight:750}
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar) p{margin:0;color:var(--ui-muted);font-size:.76rem;line-height:1.75}
html[data-panel-ui] body :is(.workspace-kicker,.tunnel-eyebrow,.crm-eyebrow){color:#67d7ed;font-size:.64rem;font-weight:700;letter-spacing:.1em}
html[data-panel-ui] body :is(.card,.tunnel-card,.settings-card,.reseller-card,.workspace-editor,.inline-connection-workspace,.bs-directory){border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:linear-gradient(145deg,var(--ui-surface-2),var(--ui-surface));color:var(--ui-text);box-shadow:0 .35rem 1.1rem #0a0c181f}
html[data-panel-ui] body .reseller-summary-row{width:100%;margin-inline:0}
@media (max-width:575.98px){
  html[data-panel-ui] body .reseller-summary-row{gap:.65rem}
  html[data-panel-ui] body .reseller-summary-row>div[class*="col-"]{flex:0 0 100%;max-width:100%}
}
html[data-panel-ui] body .tunnel-card{padding:.85rem;margin-bottom:.85rem}
html[data-panel-ui] body :is(.workspace-editor,.inline-connection-workspace,.bs-directory){padding:.75rem}
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card)>h2:first-child{margin:-.85rem -.85rem .85rem;padding:.65rem .85rem;border-bottom:1px solid var(--ui-border);background:#142641;font-size:.95rem}
html[data-panel-ui] body .tunnel-card h2{font-size:1rem}
html[data-panel-ui] body .tunnel-card h3{font-size:.9rem}
html[data-panel-ui] body :is(.tunnel-note,.finance-hint,.workspace-help,.settings-note,.wg-private-note){padding:.7rem .8rem;border:1px solid #25506b55;border-radius:.6rem;background:#0b304330;color:#9fb4cb;font-size:.72rem;line-height:1.8}
html[data-panel-ui] body :is(.tunnel-fields,.settings-grid,.management-two,.server-fields,.form-grid,.grid-2){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:14px 0}
html[data-panel-ui] body :is(.crm-save-bar,.form-actions,.reseller-actions,.tunnel-plan-actions,.manual-review-actions,.wg-router-actions,.wg-peer-actions){display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}
html[data-panel-ui] body :is(.crm-save-bar,.form-actions,.reseller-actions,.tunnel-plan-actions,.manual-review-actions,.wg-router-actions,.wg-peer-actions)>:is(button,a,form){flex:0 0 auto;width:auto;max-width:100%}
html[data-panel-ui] body form.panel-form-compact{width:min(100%,var(--ui-form-max))}
html[data-panel-ui] body form.panel-form-single{width:min(100%,var(--ui-form-max))}
html[data-panel-ui] body .crm-save-bar{justify-content:space-between;padding-top:.75rem;margin-top:.75rem;border-top:1px solid var(--ui-border)}

/* Tabs and disclosures use Bootstrap proportions instead of page-specific bars. */
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]:not(.connection-tabs)){display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;width:fit-content;max-width:100%;padding:.25rem;margin:0 0 .75rem;border:1px solid var(--ui-border);border-radius:.55rem;background:#0c1727;overflow:visible}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]:not(.connection-tabs)) :is(.nav-link,[role=tab],a,button){position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;width:auto;min-width:0;min-height:30px;margin:0;padding:.3rem .6rem;border:1px solid transparent;border-radius:.35rem;background:transparent;color:#aebfd3;font-family:inherit;font-size:.7rem;font-weight:600;line-height:1.35;text-align:center;white-space:normal;box-shadow:none;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]:not(.connection-tabs)) :is(.nav-link,[role=tab],a,button):hover{border-color:#37577a;background:#152a45;color:#fff;transform:none}
html[data-panel-ui] body .color-tabs :is(.nav-link,[role=tab])::before{width:.38rem;height:.38rem;flex:0 0 .38rem;border-radius:50%;background:var(--tab-color,#4facfe);box-shadow:0 0 0 .18rem rgba(var(--tab-rgb,59,130,246),.12);content:""}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]:not(.connection-tabs)) :is(.active,[aria-selected=true],[aria-current=page],.is-current){border-color:var(--tab-color,#4facfe);background:var(--tab-color,#4facfe);color:#fff;box-shadow:0 .25rem .8rem rgba(var(--tab-rgb,37,99,235),.3)}
html[data-panel-ui] body [role=tabpanel][hidden]{display:none}
html[data-panel-ui] body [role=tabpanel]{min-width:0}
html[data-panel-ui] body details:not(.wg-create-card):not(.wg-action-disclosure):not(.bot-ids-help){margin:.6rem 0;border:1px solid var(--ui-border);border-radius:.6rem;background:#101e32;overflow:hidden}
html[data-panel-ui] body details:not(.wg-create-card):not(.wg-action-disclosure):not(.bot-ids-help)>summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:38px;padding:.55rem .75rem;border:0;background:#142641;color:#cbd9ea;font-size:.74rem;font-weight:600;list-style:none;box-shadow:none;cursor:pointer}
html[data-panel-ui] body details:not(.wg-create-card):not(.wg-action-disclosure):not(.bot-ids-help)>summary::-webkit-details-marker{display:none}
html[data-panel-ui] body details:not(.wg-create-card):not(.wg-action-disclosure):not(.bot-ids-help)>summary::after{color:#75a7df;font-size:1rem;content:"＋"}
html[data-panel-ui] body details[open]:not(.wg-create-card):not(.wg-action-disclosure):not(.bot-ids-help)>summary::after{content:"−"}
html[data-panel-ui] body details:not(.wg-create-card):not(.wg-action-disclosure):not(.bot-ids-help)>:not(summary){margin-inline:.75rem}
/* Discount codes collapse into the same disclosure shell as other admin panels. */
html[data-panel-ui] body .account-discount-admin{margin:0 0 1rem}
html[data-panel-ui] body .account-discount-admin>summary{align-items:center;padding:.7rem .85rem}
html[data-panel-ui] body .account-discount-admin>summary:hover{background:#172b48}
html[data-panel-ui] body .account-discount-admin>summary h2{margin:.12rem 0 0;font-size:.92rem;font-weight:700;color:var(--ui-text)}
html[data-panel-ui] body .account-discount-admin>summary .account-count{padding:.28rem .55rem;border:1px solid var(--ui-border);border-radius:999px;background:#12253d;color:#9fc3e6;font-size:.63rem;font-weight:700;white-space:nowrap}
html[data-panel-ui] body .account-discount-admin[open]>summary{margin-bottom:.35rem;border-bottom:1px solid var(--ui-border)}
html[data-panel-ui] body .account-discount-admin .account-discount-body>:last-child{margin-bottom:.9rem}
html[data-panel-ui] body .account-discount-admin .account-discount-create{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.7fr) auto;gap:.6rem;align-items:end;margin:.3rem 0 .6rem}
html[data-panel-ui] body .account-discount-admin .account-discount-create .form-label{display:grid;gap:.35rem;margin:0;font-size:.68rem;color:#b9cbe0}
html[data-panel-ui] body .account-discount-admin .account-discount-create .btn{min-height:38px}
html[data-panel-ui] body .account-discount-admin .account-discount-list{display:grid;gap:.4rem;margin-top:.5rem}
html[data-panel-ui] body .account-discount-admin .account-discount-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.75rem;align-items:center;padding:.55rem .7rem;border:1px solid var(--ui-border);border-radius:.5rem;background:#0e1a2d}
html[data-panel-ui] body .account-discount-admin .account-discount-main{display:grid;gap:.2rem;min-width:0}
html[data-panel-ui] body .account-discount-admin .account-discount-main small{color:#8fa6bd;font-size:.66rem}
html[data-panel-ui] body .account-discount-admin .account-discount-actions{display:flex;gap:.35rem;flex-wrap:nowrap}
html[data-panel-ui] body .account-discount-admin .account-discount-actions form{flex:0 0 auto;width:auto;margin:0}
html[data-panel-ui] body .account-discount-admin .account-discount-actions button{width:auto;min-height:32px;padding:.28rem .6rem;border-radius:.4rem;font-size:.66rem;white-space:nowrap}
html[data-panel-ui] body .account-discount-admin .account-discount-actions .btn-outline-danger{background:#dc2626!important;background-image:linear-gradient(135deg,#ef4444,#b91c1c)!important;border-color:#ef4444!important;color:#fff!important}
html[data-panel-ui] body .account-discount-admin .account-discount-state{padding:.16rem .45rem;border:1px solid;border-radius:999px;font-size:.6rem;font-weight:700;white-space:nowrap}
html[data-panel-ui] body .account-discount-admin .account-discount-state.state-active{color:#86efac;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}
html[data-panel-ui] body .account-discount-admin .account-discount-state.state-disabled,
html[data-panel-ui] body .account-discount-admin .account-discount-state.state-expired{color:#cbd5e1;border-color:rgba(100,116,139,.45);background:rgba(100,116,139,.12)}
html[data-panel-ui] body .account-discount-admin .account-discount-state.state-exhausted,
html[data-panel-ui] body .account-discount-admin .account-discount-state.state-debt{color:#fca5a5;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)}
html[data-panel-ui] body .account-discount-admin .account-discount-state.state-paid{color:#86efac;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}
html[data-panel-ui] body .account-discount-admin .account-empty,
html[data-panel-ui] body .account-discount-admin .account-muted{margin:.4rem 0;color:#8fa6bd;font-size:.68rem}
@media(max-width:1000px){html[data-panel-ui] body .account-discount-admin .account-discount-create{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-panel-ui] body .account-discount-admin .account-discount-create .btn{grid-column:1/-1}html[data-panel-ui] body .account-discount-admin .account-discount-item{grid-template-columns:minmax(0,1fr) auto}}
@media(max-width:640px){html[data-panel-ui] body .account-discount-admin .account-discount-create{grid-template-columns:minmax(0,1fr)}html[data-panel-ui] body .account-discount-admin .account-discount-item{grid-template-columns:minmax(0,1fr)}}
/* Navigation shell. */
html[data-panel-ui] body .crm-sidebar{background:#0e1a2d;opacity:1;backdrop-filter:none}
html[data-panel-ui] body .crm-brand{padding:1rem .75rem;border-bottom:1px solid var(--ui-border)}
html[data-panel-ui] body .crm-brand-mark{border-radius:.55rem;background:#3478e5;color:#fff;box-shadow:none}
html[data-panel-ui] body .crm-nav-label{padding:.8rem .75rem .35rem;color:#6f839d;font-size:.61rem}
html[data-panel-ui] body .crm-nav-item{min-height:36px;margin:.12rem 0;padding:.45rem .7rem;border-inline-start:3px solid transparent;border-radius:.45rem;color:#b4c3d6;font-size:.72rem;box-shadow:none}
html[data-panel-ui] body .crm-nav-item:hover{border-inline-start-color:var(--tab-color,#466d9d);background:rgba(var(--tab-rgb,59,130,246),.14);color:#fff}
html[data-panel-ui] body .crm-nav-item:is(.is-current,[aria-current=page]){border-inline-start-color:var(--tab-color,#9ac9ff);background:var(--tab-color,#1d477e);color:#fff;box-shadow:0 .35rem 1rem rgba(var(--tab-rgb,59,130,246),.22)}
html[data-panel-ui] body .crm-nav-item>span{color:var(--tab-color,#87a8cc)}
html[data-panel-ui] body .crm-nav-item:is(.is-current,[aria-current=page])>span{color:#fff}
html[data-panel-ui] body .crm-nav-item svg{width:1rem;height:1rem}
html[data-panel-ui] body .workspace-menu-toggle{min-height:var(--ui-control-height-compact);padding:0 var(--ui-control-padding-x);border-radius:var(--ui-control-radius)}
html[data-panel-ui] body #adminActivityButton{min-height:var(--ui-control-height-compact);padding:0 var(--ui-control-padding-x);border-radius:var(--ui-control-radius);font-size:var(--ui-control-font);box-shadow:0 .4rem 1.2rem #0a0c1840}

/* Admin quick menu and activity page use the same shared surface language. */
html[data-panel-ui] body .admin-menu-panel{border:1px solid var(--ui-border-strong);border-radius:.75rem;background:linear-gradient(145deg,#14263b,#0f192a);box-shadow:var(--ui-shadow)}
html[data-panel-ui] body .admin-menu-items .admin-tool{min-height:40px;border:1px solid #9aa1cc35;border-radius:.6rem;background:#17293ccc;box-shadow:inset 0 1px #ffffff08}
html[data-panel-ui] body .admin-menu-items .admin-tool:hover{border-color:#bfe6ff70;background:#203b53}
html[data-panel-ui] body .admin-menu-items .admin-tool svg{box-sizing:content-box;padding:.35rem;border-radius:.5rem;background:#0a0c1866}
html[data-panel-ui] body .admin-menu-items .tool-create{color:#bfe6ff}
html[data-panel-ui] body .admin-menu-items .tool-renew{color:#ffdcae}
html[data-panel-ui] body .admin-menu-items .tool-wireguard{color:#cfc7fa}
html[data-panel-ui] body .admin-menu-items .tool-tunnel{color:#9beaff}
html[data-panel-ui] body .admin-menu-items .admin-tool-exit{color:#fda4af}
html[data-panel-ui] body[data-activity-page=true] #adminActivityPanel{position:static;width:100%;max-width:none;max-height:none;margin-top:1rem}
html[data-panel-ui] body[data-activity-page=true] #adminActivityButton{position:static;margin-top:.75rem}
html[data-panel-ui] body[data-activity-page=true] #adminActivityClose{display:none}
html[data-panel-ui] body .receipt-row{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin:.5rem 0;padding:.8rem;border-bottom:1px solid var(--ui-border);border-radius:.6rem;background:#0a0c1820}
html[data-panel-ui] body .receipt-row small{color:var(--ui-muted)}
html[data-panel-ui] body .manual-review-actions form{margin:0}
html[data-panel-ui] body .manual-review-actions .btn{white-space:nowrap}

/* Authentication and first-run forms share the same compact shell. */
html[data-panel-ui] body .login-shell{display:grid;min-height:100vh;min-height:100dvh;place-items:center;padding:24px 16px}
html[data-panel-ui] body .login-card{width:min(100%,var(--ui-auth-max));border:1px solid var(--ui-border);border-radius:18px;background:#122039;box-shadow:0 20px 65px #0004}
html[data-panel-ui] body .login-mark{display:grid;width:48px;height:48px;margin-bottom:20px;place-items:center;border-radius:13px;background:#4facfe}
html[data-panel-ui] body .login-mark svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8}
html[data-panel-ui] body .login-card h1{font-size:24px;font-weight:700}
html[data-panel-ui] body .login-card p{color:#a5b7d0;font-size:13px;line-height:1.8}
html[data-panel-ui] body .login-card :is(.alert,a){font-size:13px}
html[data-panel-ui] body .user-online-dot{display:inline-block;width:10px;height:10px;flex:0 0 10px;margin-inline-end:8px;border-radius:50%;background:#9aa1cc;vertical-align:middle}
@keyframes user-dot-blink{0%,100%{opacity:1;box-shadow:0 0 8px currentColor}50%{opacity:.3;box-shadow:0 0 2px currentColor}}
html[data-panel-ui] body .user-online-dot.online{background:#22c55e;box-shadow:0 0 8px #22c55e80;animation:user-dot-blink 1.2s ease-in-out infinite}
html[data-panel-ui] body .user-online-dot.offline{background:#fc6076;box-shadow:0 0 8px #fc607680;animation:user-dot-blink 1.2s ease-in-out infinite}
html[data-panel-ui] body .user-online-dot.expired{background:#ff9a44;box-shadow:0 0 8px #ff9a4480;animation:user-dot-blink 1.2s ease-in-out infinite}
html[data-panel-ui] body .user-online-dot:is(.online,.offline,.expired){animation-name:user-dot-blink}
@media (prefers-reduced-motion:reduce){html[data-panel-ui] body .user-online-dot{animation:none}}
html[data-panel-ui] body .user-online-dot.online{background:#4facfe;box-shadow:0 0 8px #4facfe80}
html[data-panel-ui] body .user-online-dot.offline{background:#fc6076;box-shadow:0 0 8px #fc607680}
html[data-panel-ui] body .crm-brand-mark{width:38px;height:38px;min-width:38px;border-radius:12px;background:linear-gradient(145deg,var(--page-color,#00f2fe),rgba(var(--page-rgb,37,99,235),.7));box-shadow:0 8px 22px rgba(var(--page-rgb,37,99,235),.35);font:700 20px Tahoma}
html[data-panel-ui] body .crm-brand-mark svg{display:block;width:24px;height:24px}
html[data-panel-ui] body .creator-footer{display:flex;justify-content:center;padding:24px;color:var(--ui-muted);text-align:center}
html[data-panel-ui] body .creator-footer-card{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:12px 22px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:linear-gradient(160deg,#23224a,#151733);color:var(--ui-muted);font-size:13px;box-shadow:var(--ns-raised,0 12px 30px -14px #000d),0 0 24px rgba(79,172,254,.14)}
html[data-panel-ui] body .creator-footer-card>svg{display:block;width:22px;height:22px;flex:0 0 22px}
html[data-panel-ui] body .creator-footer-card>span{min-width:0;overflow-wrap:anywhere}
html[data-panel-ui] body .creator-footer-card .fa-heart{color:#fc6076;font-size:.8rem}
html[data-panel-ui] body .creator-footer-card .creator-link{color:#64cdff;font-weight:600;text-decoration:none}
html[data-panel-ui] body .creator-link{color:#9ac9ff}
html[data-panel-ui] body .error-page-card{width:100%;max-width:440px}

/* Button 40 is the shared action style. Its background follows the active page/tab. */
html[data-panel-ui] body .button-40{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:var(--ui-control-height);
  min-height:var(--ui-control-height);
  background-color:#17263b;
  border:1px solid transparent;
  border-radius:var(--ui-control-radius);
  box-sizing:border-box;
  color:#fff;
  cursor:pointer;
  flex:0 0 auto;
  font-family:inherit;
  font-size:var(--ui-control-font);
  font-weight:600;
  line-height:1.35;
  min-width:0;
  padding:0 14px;
  text-align:center;
  text-decoration:none #9aa1cc solid;
  transition-duration:.2s;
  transition-property:background-color,border-color,color,fill,stroke,transform,box-shadow;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  width:auto;
  max-width:100%;
  box-shadow:0 6px 16px rgba(var(--button-40-rgb,var(--page-rgb,17,24,39)),.18);
}
html[data-panel-ui] body .button-40:is(.btn-primary,.tunnel-primary,.wg-button-primary,.management-editor-trigger,.admin-ui-action,.btn-orange,.hero-button,.auth-submit){background-color:var(--button-40-bg,var(--page-color,#4facfe))}
html[data-panel-ui] body .button-40:is(.btn-outline-secondary,.btn-outline-light,.tunnel-secondary,.wg-button-secondary){border-color:rgba(var(--button-40-rgb,var(--page-rgb,70,97,127)),.45);background-color:#17263b;color:#d5e2f1;box-shadow:none}
html[data-panel-ui] body .button-40:is(.btn-success,.btn-outline-success){border-color:#4facfe;background-color:#4facfe;color:#fff}
html[data-panel-ui] body .button-40:is(.btn-danger,.btn-outline-danger,.tunnel-delete,.server-remove,.wg-button-danger){border-color:#fc6076;background-color:#c2455c;color:#fff;box-shadow:none}
html[data-panel-ui] body .button-40:hover{filter:brightness(1.1);transform:translateY(-1px)}
html[data-panel-ui] body .button-40:focus-visible{border-color:var(--tab-color,var(--page-color,#9ac9ff));box-shadow:0 0 0 3px rgba(var(--tab-rgb,var(--page-rgb,59,130,246)),.2);outline:0}
html[data-panel-ui] body .button-40:active{transform:translateY(0) scale(.985)}
html[data-panel-ui] body .button-40:is(:disabled,[aria-disabled=true]){cursor:not-allowed;filter:saturate(.45);opacity:.52;pointer-events:none;transform:none;box-shadow:none}
html[data-panel-ui] body .button-40 :is(svg,i){width:16px;height:16px;flex:0 0 16px}
html[data-panel-ui] body :is(.panel-action,.admin-ui-action) :is(svg,i){fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html[data-panel-ui] body .button-40.button-40-icon{width:38px;height:38px;min-width:38px;min-height:38px;padding:0;font-size:14px;line-height:1}
html[data-panel-ui] body .button-40.button-40-tab{height:38px;min-height:38px;padding:0 12px;font-size:13px;box-shadow:0 4px 12px rgba(var(--button-40-rgb,var(--tab-rgb,17,24,39)),.18)}
html[data-panel-ui] body .button-40.button-40-compact{height:38px;min-height:38px;padding:0 12px;font-size:13px}
html[data-panel-ui] body .button-40.button-40-nav{width:100%;min-height:38px;padding:0 12px;border-radius:var(--ui-control-radius);background:transparent;box-shadow:none;font-size:13px;justify-content:flex-start}
html[data-panel-ui] body .button-40.w-100{width:100%}
html[data-panel-ui] body .button-40-surface{height:auto;min-height:0;padding:0;border-radius:inherit;background:transparent;box-shadow:none}

/* Feedback messages share one accessible visual language. */
html[data-panel-ui] body :is(.alert,.tunnel-error,.tunnel-note,[role=status]){max-width:100%;overflow-wrap:anywhere}
html[data-panel-ui] body .alert{padding:.7rem .85rem;margin-bottom:.8rem;border:1px solid transparent;border-radius:.6rem;font-size:.8rem;line-height:1.75}
html[data-panel-ui] body :is(.alert-success,.alert-info){border-color:rgba(79,172,254,.4);background:rgba(79,172,254,.08);color:#bfe6ff}
html[data-panel-ui] body :is(.alert-warning){border-color:#c4811766;background:#4a2d104d;color:#ffdcae}
html[data-panel-ui] body :is(.alert-danger,.tunnel-error){padding:.7rem .85rem;border:1px solid rgba(252,96,118,.4);border-radius:.6rem;background:rgba(160,44,64,.3);color:#ffd2da}
html[data-panel-ui] body [dir=ltr],html[data-panel-ui] body bdi{font-variant-numeric:tabular-nums;unicode-bidi:isolate}

/* Tables, lists and modals. */
html[data-panel-ui] body :is(.table-responsive,.finance-table-wrap,.table-wrap){max-width:100%;overflow-x:auto;border-radius:.6rem}
html[data-panel-ui] body table{width:100%;margin:0;color:#dce7f5;font-size:.73rem}
html[data-panel-ui] body table th{padding:.65rem .7rem;background:#162945;color:#b9cbe0;font-weight:600;white-space:nowrap}
html[data-panel-ui] body table td{padding:.6rem .7rem;border-color:#263a54;vertical-align:middle}
html[data-panel-ui] body table tbody tr{transition:background-color .14s ease}
html[data-panel-ui] body table tbody tr:hover{background:#1d1f3e}
html[data-panel-ui] body .modal-content{max-width:100%;border:1px solid var(--ui-border-strong);border-radius:.8rem;background:#101c2f;color:var(--ui-text);box-shadow:0 1.5rem 5rem #0008}
html[data-panel-ui] body .modal-header,html[data-panel-ui] body .modal-footer{padding:.8rem 1rem;border-color:var(--ui-border)}
html[data-panel-ui] body .modal-header .btn-close{width:34px;height:34px;padding:.5rem;border:1px solid var(--ui-border-strong);border-radius:var(--ui-control-radius);background-color:transparent;filter:invert(1) grayscale(1) brightness(1.8);opacity:.82}
html[data-panel-ui] body .modal-header .btn-close:hover{background-color:#ffffff12;opacity:1}
html[data-panel-ui] body .modal-body{min-height:0;padding:1rem;overflow-y:auto;overscroll-behavior:contain}
html[data-panel-ui] body .modal-title{font-size:1rem}
html[data-panel-ui] body .management-editor-dialog{width:min(900px,calc(100vw - 1.5rem));max-height:calc(100dvh - 1.5rem);border:1px solid var(--ui-border-strong);border-radius:.8rem;background:#101c2f;color:var(--ui-text)}
html[data-panel-ui] body .management-editor-header{padding:.85rem 1rem;background:#142944}
html[data-panel-ui] body .management-editor-body{padding:1rem}
html[data-panel-ui] body :is(pre,.tunnel-results pre){min-width:0;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}

/* Finance components: icons are sized and colored locally, without global SVG rules. */
html[data-panel-ui] body .finance-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
html[data-panel-ui] body .finance-heading h2{margin:.25rem 0;font-size:1.15rem}
html[data-panel-ui] body .finance-scope{display:flex;gap:.45rem;flex-wrap:wrap;margin:.85rem 0}
html[data-panel-ui] body .finance-scope a:not(.btn){min-height:36px;padding:.45rem .75rem;border:1px solid var(--ui-border-strong);border-radius:.55rem;background:#16263b;color:#cbd8e8;font-size:.75rem}
html[data-panel-ui] body .finance-scope a.is-active{border-color:var(--page-color,#00f2fe);background:rgba(var(--page-rgb,56,189,248),.14);color:#fff}
html[data-panel-ui] body .finance-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem}
html[data-panel-ui] body .finance-stat{position:relative;min-width:0;min-height:128px;padding:1rem;border:1px solid var(--ui-border);border-radius:.75rem;background:linear-gradient(145deg,#14263c,#101c2f);overflow:hidden}
html[data-panel-ui] body .finance-stat :is(svg,.finance-icon,.stat-icon){display:inline-flex;width:36px;height:36px;padding:.55rem;border-radius:.6rem;background:rgba(var(--page-rgb,59,130,246),.14);color:var(--page-color,#9ac9ff);fill:none;stroke:currentColor;stroke-width:1.8}
html[data-panel-ui] body .finance-stat span{display:block;margin:.6rem 0 .2rem;color:#a7b8cc;font-size:.75rem}
html[data-panel-ui] body .finance-stat strong{display:block;color:#eef5ff;font-size:1.25rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html[data-panel-ui] body .finance-stat small{color:var(--ui-muted);font-size:.68rem}
html[data-panel-ui] body .finance-income strong,html[data-panel-ui] body .finance-this_month strong{color:#bfe6ff}
html[data-panel-ui] body .finance-pending strong{color:#ffb877}
html[data-panel-ui] body .finance-attention strong,html[data-panel-ui] body .finance-rejected strong{color:#ff9aaa}
html[data-panel-ui] body .receipt-state{padding:.32rem .62rem;background:#1d2c41;color:#cbd8e8}
html[data-panel-ui] body .receipt-approved{background:#4facfe18;color:#bfe6ff}
html[data-panel-ui] body :is(.receipt-pending,.receipt-applying){background:#ff9a4418;color:#ffdcae}
html[data-panel-ui] body :is(.receipt-rejected,.receipt-attention){background:#fc607618;color:#fda4af}

/* Compact login markup retained for routes that do not use auth-shell. */
html[data-panel-ui] body .login-page{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:1.25rem}
html[data-panel-ui] body .login-box{width:min(410px,100%);padding:1.5rem;border:1px solid var(--ui-border);border-radius:.85rem;background:#111f34;box-shadow:0 1.25rem 3rem #0a0c1866}
html[data-panel-ui] body .login-box form>.btn{width:100%}

/* Dashboard and subscription cards remain compact. */
html[data-panel-ui] body .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
html[data-panel-ui] body .stats>.stat{min-height:105px;padding:.9rem;border:1px solid #ffffff0d;border-radius:.75rem;box-shadow:none}
html[data-panel-ui] body .stat-icon{width:38px;height:38px;border-radius:.65rem}
html[data-panel-ui] body .stat-info strong{font-size:1.35rem}
html[data-panel-ui] body .portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:1rem}
html[data-panel-ui] body .portal-card{min-width:0;padding:.9rem;border:1px solid var(--ui-border);border-radius:.65rem;background:#111f34;box-shadow:none;transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
html[data-panel-ui] body .portal-card:hover{border-color:#40668f;background:#162b47;transform:translateY(-2px)}
html[data-panel-ui] body .portal-card strong{font-size:.8rem}.portal-card small{font-size:.69rem}
html[data-panel-ui] body:has(#subscriptionHero) #subscriptionStats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem;width:100%}
html[data-panel-ui] body:has(#subscriptionHero) :is(.stat-card,.server-card,.connection-item){min-width:0;max-width:100%;opacity:1;transform:none}
html[data-panel-ui] body:has(#subscriptionHero) .servers{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:.8rem;width:100%}
html[data-panel-ui] body:has(#subscriptionHero) .server-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:100%}
html[data-panel-ui] body:has(#subscriptionHero) #subscriptionHero{margin-top:.8rem;padding:1.15rem 1.25rem;border-radius:1rem;box-shadow:0 .8rem 2rem #0a0c183d}
html[data-panel-ui] body:has(#subscriptionHero) #subscriptionHero .avatar{width:58px;height:58px;border-radius:1rem;font-size:1.4rem;box-shadow:0 .6rem 1.5rem #4facfe38}
html[data-panel-ui] body:has(#subscriptionHero) #subscriptionHero .user-info{gap:.8rem}
html[data-panel-ui] body:has(#subscriptionHero) #subscriptionHero .user-info h1{font-size:clamp(1.25rem,3vw,1.65rem)}
html[data-panel-ui] body:has(#subscriptionHero) #subscriptionStats .stat-card{padding:.85rem;border-radius:.75rem}
html[data-panel-ui] body:has(#subscriptionHero) .server-card{padding:1rem;border-radius:.85rem}
html[data-panel-ui] body:has(#subscriptionHero) .server-buttons .download{width:100%;min-width:0;min-height:40px;padding:.45rem .65rem;border-radius:.6rem;font-size:.75rem;line-height:1.35;white-space:nowrap;overflow-wrap:normal}
html[data-panel-ui] body:has(#subscriptionHero) .app-download-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;padding:.8rem;flex-direction:initial}
html[data-panel-ui] body:has(#subscriptionHero) .app-download-grid .download{width:100%;min-width:0;min-height:40px;padding:.45rem .7rem;border-radius:.6rem;font-size:.75rem;white-space:nowrap}
html[data-panel-ui] body:has(#subscriptionHero) :is(#subscriptionHero,.server-card){isolation:isolate;contain:paint}
html[data-panel-ui] body:has(#subscriptionHero) :is(#subscriptionHero,.server-card)::before,html[data-panel-ui] body:has(#subscriptionHero) :is(#subscriptionHero,.server-card)::after{pointer-events:none}

/* Authentication: professional split layout without oversized controls. */
html[data-panel-ui] body.auth-page .auth-viewport{padding:clamp(.8rem,2.5vw,2rem)}
html[data-panel-ui] body.auth-page .auth-shell{grid-template-columns:minmax(360px,.9fr) minmax(420px,1.1fr);width:min(960px,100%);min-height:540px;border-radius:1rem;box-shadow:0 1.5rem 4rem #0a0c1870}
html[data-panel-ui] body.auth-page .auth-form-panel{padding:2rem 2.4rem}
html[data-panel-ui] body.auth-page .auth-form-content{max-width:350px}
html[data-panel-ui] body.auth-page .auth-heading{margin-bottom:1.35rem}
html[data-panel-ui] body.auth-page .auth-heading h1{font-size:1.65rem}
html[data-panel-ui] body.auth-page .auth-form{gap:.9rem}
html[data-panel-ui] body.auth-page .auth-input-wrap .form-control{height:40px;min-height:40px;padding-block:7px;border-radius:10px}
html[data-panel-ui] body.auth-page .auth-submit.btn{height:40px;min-height:40px;border-radius:10px;box-shadow:0 8px 20px #1761d22c}
html[data-panel-ui] body.auth-page .auth-password-toggle.btn{top:1px;height:38px;min-height:38px;border-radius:var(--ui-control-radius)}
html[data-panel-ui] body.auth-page .auth-password-toggle [data-password-label]{font-size:13px}
html[data-panel-ui] body.auth-page .auth-showcase-content{min-height:540px;padding:2rem 2.4rem}
html[data-panel-ui] body.auth-page .auth-visual-copy h2{font-size:2rem}
html[data-panel-ui] body.auth-page .auth-feature{padding:.7rem;border-radius:.65rem}

/* Purchase pages keep their identity with Bootstrap sizing and restrained motion. */
html[data-panel-ui] body .purchase-nav{padding:.55rem .8rem;border-radius:.75rem}
html[data-panel-ui] body .purchase-hero{min-height:auto;padding-block:3.5rem}
html[data-panel-ui] body .hero-copy h1{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.35}
html[data-panel-ui] body .hero-button{min-height:40px;padding:.5rem .9rem;border-radius:.55rem;font-size:.78rem}
html[data-panel-ui] body .hero-panel{animation:none}
html[data-panel-ui] body .purchase-features{gap:.8rem}
html[data-panel-ui] body .purchase-features article{padding:1rem;border-radius:.75rem}
html[data-panel-ui] body .purchase-features article:hover{transform:translateY(-3px);box-shadow:0 .8rem 2rem #0004}
html[data-panel-ui] body .feature-icon{width:42px;height:42px;border-radius:.65rem}
html[data-panel-ui] body .shot-grid{gap:.8rem}
html[data-panel-ui] body .shot-grid figure{border-radius:.75rem}
html[data-panel-ui] body .shot-grid figure:hover{transform:translateY(-3px);box-shadow:0 1rem 2.5rem #0006}
html[data-panel-ui] body .purchase-form-card{padding:1.25rem;border-radius:.85rem;transform:none}
html[data-panel-ui] body .purchase-form-card button{min-height:40px;border-radius:.55rem}
html[data-panel-ui] body.payment-body .payment-shell{width:min(560px,calc(100% - 1.5rem));padding:2rem 0}
html[data-panel-ui] body.payment-body .payment-card{padding:1.25rem;border-radius:.85rem}
html[data-panel-ui] body.payment-body .amount strong{font-size:1.55rem}
html[data-panel-ui] body.payment-body .bank-info{border-radius:.65rem}

/* Subtle motion, with a complete accessibility fallback. */
@media(prefers-reduced-motion:no-preference){
  html[data-panel-ui] body :is(.card,.tunnel-card,.portal-card,.purchase-features article,.shot-grid figure){transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease}
  html[data-panel-ui] body :is(.portal-card,.purchase-features article,.shot-grid figure):hover{transform:translateY(-2px)}
  html[data-panel-ui] body .modal.show .modal-dialog{animation:uiModalIn .2s ease-out}
}
@keyframes uiModalIn{from{opacity:0;transform:translateY(.4rem) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html[data-panel-ui] *,html[data-panel-ui] *::before,html[data-panel-ui] *::after{scroll-behavior:auto;animation:none;transition:none}}

/* Tablet. */
@media(min-width:768px){
  html[data-panel-ui] body :is(.crm-tabs,[role=tablist]:not(.connection-tabs)) :is(.nav-link,[role=tab]){min-width:84px}
}
@media(min-width:1180px){
  html[data-panel-ui] body:has(.crm-sidebar) :is(main.tunnel-page,.management-page){box-sizing:border-box;width:calc(100% - 270px);max-width:none;margin-block:24px 3rem;margin-inline-start:246px;margin-inline-end:24px;padding:0}
html[data-panel-ui] body:has(.crm-sidebar) main.tunnel-page>*:not(script):not(.management-editor-trigger):not(.modal):not(dialog){width:min(100%,var(--ui-shell-max,var(--ui-page-max)));margin-inline:auto}
  html[data-panel-ui] body:has(.crm-sidebar) .ui-page-shell{width:calc(100% - 270px);max-width:none;margin-block:0 3rem;margin-inline-start:246px;margin-inline-end:24px;padding-inline:0}
}
@media(max-width:991.98px){
  html[data-panel-ui] body .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-panel-ui] body:has(#subscriptionHero) #subscriptionStats{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-panel-ui] body.auth-page .auth-shell{grid-template-columns:minmax(0,1fr);width:min(470px,100%);min-height:0}
  html[data-panel-ui] body.auth-page .auth-showcase{display:none}
  html[data-panel-ui] body.auth-page .auth-brand-mobile{display:inline-flex;margin-bottom:1.5rem}
  html[data-panel-ui] body.auth-page .auth-form-panel{padding:2rem}
  html[data-panel-ui] body:has(#subscriptionHero) .app-download-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Phone: one-column forms, two-column navigation and card tables. */
@media(max-width:767.98px){
  html[data-panel-ui] body{font-size:.8rem}
  html[data-panel-ui] body:has(.crm-sidebar){overflow-x:hidden}
  html[data-panel-ui] body:has(.crm-sidebar) :is(main.tunnel-page,main.settings-page,.management-page){box-sizing:border-box;width:100%;max-width:100%;margin:0;padding:12px 12px 2rem}
  html[data-panel-ui] body:has(.crm-sidebar) .ui-page-shell{width:100%;max-width:100%;margin:0;padding:12px 12px 2rem}
  html[data-panel-ui] body :is(.ui-field-short,.ui-field-regular,.ui-field-long){--ui-field-width:100%}
  html[data-panel-ui] body[data-page-tone] .tunnel-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.7rem;padding:.75rem;margin-bottom:1rem}
  html[data-panel-ui] body[data-page-tone] .tunnel-heading>div:first-of-type{grid-column:1/-1;grid-row:2}
  html[data-panel-ui] body[data-page-tone] .workspace-menu-toggle{grid-column:2;grid-row:1;justify-self:end}
  html[data-panel-ui] body[data-page-tone] #adminActivityButton{position:static;grid-column:1;grid-row:1;align-self:center;justify-self:start;margin:0}
  html[data-panel-ui] body .crm-sidebar{right:0;left:auto;width:min(280px,calc(100vw - 1rem));max-width:calc(100vw - 1rem);box-shadow:-1rem 0 2.5rem #0a0c18b8}
  html[data-panel-ui] body :is(.tunnel-fields,.settings-grid,.management-two,.server-fields,.form-grid,.grid-2){grid-template-columns:minmax(0,1fr)}
  html[data-panel-ui] body :is(.crm-tabs,[role=tablist]:not(.connection-tabs)){display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem}
  html[data-panel-ui] body :is(.crm-tabs,[role=tablist]:not(.connection-tabs)) :is(.nav-link,[role=tab],a,button){width:100%;min-width:0}
  html[data-panel-ui] body .modal-dialog{width:auto;max-width:calc(100vw - 1rem);margin:.5rem auto}
  html[data-panel-ui] body .modal-content{max-height:calc(100dvh - 1rem);overflow:hidden}
  html[data-panel-ui] body .management-editor-dialog{width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}
  html[data-panel-ui] body:has(#subscriptionHero) #subscriptionStats{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-panel-ui] body:has(#subscriptionHero) .server-buttons{grid-template-columns:minmax(0,1fr)}
  html[data-panel-ui] body:has(#subscriptionHero) .server-buttons .download{white-space:normal}
  html[data-panel-ui] body:has(#subscriptionHero) .app-download-grid{grid-template-columns:minmax(0,1fr)}
  html[data-panel-ui] body:has(#subscriptionHero) .app-download-grid .download{white-space:normal}
  html[data-panel-ui] body .purchase-hero{padding-block:2rem}
  html[data-panel-ui] body .hero-copy h1{font-size:2rem}
}

@media(max-width:600px){
  html[data-panel-ui] body :is(.form-control,.form-select,input,select,textarea){font-size:16px}
  html[data-panel-ui] body :is(.card,.tunnel-card,.workspace-editor,.inline-connection-workspace,.bs-directory){border-radius:.65rem}
  html[data-panel-ui] body .tunnel-card{padding:.8rem;margin-bottom:.8rem}
  html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card)>h2:first-child{margin:-.8rem -.8rem .8rem;padding:.65rem .8rem}
  html[data-panel-ui] body .portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  html[data-panel-ui] body .portal-card{padding:.75rem}
  html[data-panel-ui] body table.mobile-card-table{display:block;width:100%;min-width:0;border:0}
  html[data-panel-ui] body table.mobile-card-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  html[data-panel-ui] body table.mobile-card-table tbody{display:grid;width:100%;gap:.55rem}
  html[data-panel-ui] body table.mobile-card-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr);width:100%;padding:.7rem;border:1px solid var(--ui-border);border-radius:.6rem;background:#101e32}
  html[data-panel-ui] body table.mobile-card-table tbody tr[hidden]{display:none}
  html[data-panel-ui] body table.mobile-card-table td{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;width:100%;padding:.38rem 0;border:0;white-space:normal;overflow-wrap:anywhere}
  html[data-panel-ui] body table.mobile-card-table td::before{max-width:42%;flex:0 0 auto;color:#91a7c1;font-size:.68rem;content:attr(data-label)}
  html[data-panel-ui] body table.mobile-card-table td[colspan]::before{display:none}
  html[data-panel-ui] body.auth-page .auth-viewport{padding:.65rem}
  html[data-panel-ui] body.auth-page .auth-shell{border-radius:.75rem}
  html[data-panel-ui] body.auth-page .auth-form-panel{padding:1.35rem}
  html[data-panel-ui] body.auth-page .auth-heading h1{font-size:1.45rem}
  html[data-panel-ui] body .purchase-nav{top:.4rem}
  html[data-panel-ui] body .purchase-features{grid-template-columns:1fr}
  html[data-panel-ui] body .purchase-form-card,html[data-panel-ui] body.payment-body .payment-card{padding:1rem}
  html[data-panel-ui] body .portal-chart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:.75rem;overflow:visible}
  html[data-panel-ui] body .portal-chart-bar{min-width:0}
}

@media(max-width:380px){
  html[data-panel-ui] body :is(.crm-tabs,[role=tablist]:not(.connection-tabs)){grid-template-columns:minmax(0,1fr)}
  html[data-panel-ui] body .portal-grid,html[data-panel-ui] body .stats,html[data-panel-ui] body:has(#subscriptionHero) #subscriptionStats{grid-template-columns:minmax(0,1fr)}
}

/* Functional visibility and responsive table behavior kept in the shared stylesheet. */
html[data-panel-ui] [hidden]{display:none!important}
html[data-panel-ui] body .workspace-menu-toggle,html[data-panel-ui] body .offcanvas-close{display:none}
html[data-panel-ui] body .modal[aria-hidden=true]{display:none}
html[data-panel-ui] .server-card-toggle{width:100%;justify-content:flex-start;text-align:start}
html[data-panel-ui] .server-card-toggle .server-card-title{flex:1;min-width:0}
html[data-panel-ui] .server-card-toggle .server-card-title :is(strong,small){display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1179px){html[data-panel-ui] body .workspace-menu-toggle,html[data-panel-ui] body .offcanvas-close{display:inline-flex}}
@media(min-width:601px) and (max-width:991px){
 html[data-panel-ui] body :is(.table-responsive,.finance-table-wrap,.table-wrap){overflow:visible;max-width:100%}
 html[data-panel-ui] body table.mobile-card-table{display:block;width:100%;min-width:0;max-width:100%;border:0}
 html[data-panel-ui] body table.mobile-card-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 html[data-panel-ui] body table.mobile-card-table tbody{display:grid;width:100%;gap:.65rem}
 html[data-panel-ui] body table.mobile-card-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0;padding:.75rem;margin:0;border:1px solid var(--ui-border);border-radius:.65rem;background:#101e32}
 html[data-panel-ui] body table.mobile-card-table td{display:flex;align-items:flex-start;justify-content:space-between;gap:.65rem;width:100%;min-width:0;max-width:100%;padding:.42rem 0;border:0;white-space:normal;overflow-wrap:anywhere}
 html[data-panel-ui] body table.mobile-card-table td::before{content:attr(data-label);flex:0 0 auto;color:#91a7c1;font-size:.68rem;font-weight:500}
 html[data-panel-ui] body table.mobile-card-table td>*{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
 html[data-panel-ui] body table.mobile-card-table td[colspan]::before{display:none}
}

/* =====================================================================
   Unified professional layer (2026-10-17)
   Loaded last on every page. Normalizes type scale, page rhythm,
   form grids, action rows and card geometry across all admin,
   reseller and subscription pages. Accent color follows the active
   page/tab tone (--page-color / --page-rgb).
   ===================================================================== */

/* --- Design tokens for rhythm -------------------------------------- */
html[data-panel-ui]{
  --ui-t-title:19px;           /* page h1 */
  --ui-t-card-title:16px;      /* card h2 */
  --ui-t-section:13.5px;       /* card h3 */
  --ui-t-kicker:11px;
  --ui-body-size:13px;
  --ui-t-small:12px;
  --ui-space-card:16px 18px;
  --ui-space-card-sm:14px 16px;
  --ui-gap-field:12px 16px;
  --ui-r-card:12px;
  --ui-r-card-sm:10px;
}

/* --- Page canvas: tone-aware ambience ------------------------------ */
html[data-panel-ui] body{
  background:
    radial-gradient(1100px 460px at 85% -14%, rgba(var(--page-rgb,37,99,235),.10), transparent 68%),
    radial-gradient(720px 380px at 4% -8%, rgba(var(--page-rgb,37,99,235),.05), transparent 70%),
    var(--ui-bg);
}

/* --- Page heading bar: one identity everywhere ---------------------- */
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar){
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
  padding:1.05rem 1.3rem;
  margin:0 0 1.35rem;
  border:1px solid var(--ui-border);
  border-radius:var(--ui-r-card);
  background:
    linear-gradient(118deg, rgba(var(--page-rgb,37,99,235),.13), transparent 58%),
    linear-gradient(145deg,#13253f,#0f1a2c);
  box-shadow:0 .35rem 1.2rem #0a0c1830;
}
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar)::before{
  content:"";
  position:absolute;
  inset-block:1.05rem;
  inset-inline-start:-1px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--page-color,#9ac9ff),rgba(var(--page-rgb,37,99,235),0));
}
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar) :is(h1,h2,.test-title){
  margin:0;
  font-size:var(--ui-t-title);
  font-weight:750;
  line-height:1.55;
  letter-spacing:-.2px;
}
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar) span,
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar) p{
  margin:0;
  color:var(--ui-muted);
  font-size:var(--ui-t-small);
  line-height:1.8;
}
html[data-panel-ui] body :is(.workspace-kicker,.tunnel-eyebrow,.crm-eyebrow){
  color:var(--page-color,#67d7ed);
  font-size:var(--ui-t-kicker);
  font-weight:700;
  letter-spacing:.09em;
}

/* --- Cards: same geometry on every page ----------------------------- */
html[data-panel-ui] body :is(.card,.tunnel-card,.settings-card,.reseller-card,.workspace-editor,.inline-connection-workspace,.bs-directory){
  padding:var(--ui-space-card);
  border-radius:var(--ui-r-card);
  margin-bottom:1rem;
}
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card)>h2:first-child{
  margin:-16px -18px 14px;
  padding:.8rem 1.1rem;
  border-bottom:1px solid var(--ui-border);
  border-radius:var(--ui-r-card) var(--ui-r-card) 0 0;
  font-size:var(--ui-t-card-title);
  font-weight:700;
}
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card,.inline-connection-workspace) :is(h1,h2){
  font-size:var(--ui-t-card-title);
  line-height:1.6;
}
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card,.inline-connection-workspace) h3,
html[data-panel-ui] body .settings-page :is(h3){
  font-size:var(--ui-t-section);
  font-weight:700;
  line-height:1.7;
}
html[data-panel-ui] body .workspace-intro{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 1.1rem;padding:0 0 1rem;border-bottom:1px solid var(--ui-border)}
html[data-panel-ui] body .workspace-intro h2{margin:0;font-size:var(--ui-t-card-title)}
html[data-panel-ui] body .workspace-intro p{margin:.2rem 0 0;color:var(--ui-muted);font-size:var(--ui-t-small)}
html[data-panel-ui] body .workspace-label{color:var(--page-color,#8fb9e8);font-size:var(--ui-t-kicker);font-weight:700;letter-spacing:.06em;white-space:nowrap}

/* --- Forms: one grid rhythm ---------------------------------------- */
html[data-panel-ui] body :is(.tunnel-fields,.settings-grid,.management-two,.server-fields,.form-grid,.grid-2),
html[data-panel-ui] body .settings-field-stack .row.settings-field-row{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ui-gap-field);
  margin:0 0 12px;
  display:grid;
}
html[data-panel-ui] body .settings-field-stack .row.settings-field-row{display:flex;flex-wrap:wrap;gap:var(--ui-gap-field)}
html[data-panel-ui] body .settings-field-stack .row.settings-field-row>*{flex:1 1 230px;min-width:0;max-width:100%}
html[data-panel-ui] body .form-label{gap:5px;margin:0 0 10px;font-size:12.5px;color:#c8d5e6}
html[data-panel-ui] body .workspace-help,
html[data-panel-ui] body :is(.tunnel-note,.finance-hint,.settings-note,.wg-private-note),
html[data-panel-ui] body .workspace-help p{
  padding:.65rem .8rem;border:1px solid rgba(var(--page-rgb,37,99,235),.22);border-radius:var(--ui-r-card-sm);
  background:rgba(var(--page-rgb,37,99,235),.06);color:#9fb4cb;font-size:var(--ui-t-small);line-height:1.85;
}

/* --- Action rows: consistent placement ------------------------------ */
html[data-panel-ui] body :is(.crm-save-bar,.form-actions,.reseller-actions,.tunnel-plan-actions,.manual-review-actions,.wg-router-actions,.wg-peer-actions){
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;
  padding-top:1rem;margin-top:1rem;border-top:1px solid var(--ui-border);
}
html[data-panel-ui] body .crm-save-bar .btn{min-width:130px}

/* --- Buttons: depth and tone ---------------------------------------- */
html[data-panel-ui] body .button-40:is(.btn-primary,.tunnel-primary,.wg-button-primary,.management-editor-trigger,.admin-ui-action,.btn-orange,.hero-button,.auth-submit){
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%),var(--button-40-bg,var(--page-color,#4facfe));
  border:1px solid rgba(var(--button-40-rgb,var(--page-rgb,37,99,235)),.9);
  box-shadow:0 6px 18px rgba(var(--button-40-rgb,var(--page-rgb,37,99,235)),.30), inset 0 0 0 1px rgba(255,255,255,.06);
}
html[data-panel-ui] body .button-40:is(.btn-secondary,.wg-button-primary) + html[data-panel-ui] body .button-40:hover{filter:brightness(1.09)}
html[data-panel-ui] body :is(.button-40,.btn):not(:disabled):hover{transform:translateY(-1px)}

/* --- Stats: uniform capsule design ---------------------------------- */
html[data-panel-ui] body .stats{gap:.85rem}
html[data-panel-ui] body .stats>.stat{
  display:flex;align-items:center;gap:.8rem;
  min-height:96px;padding:.95rem 1.05rem;margin:0;
  border:1px solid rgba(var(--page-rgb,37,99,235),.14);
  border-radius:var(--ui-r-card);
  background:linear-gradient(145deg,#152541,#101b2e);
}
html[data-panel-ui] body .stats>.stat::after{content:"";position:absolute;inset-block:14px;inset-inline-start:-1px;width:3px;border-radius:3px;background:rgba(var(--page-rgb,37,99,235),.45)}
html[data-panel-ui] body .stats>.stat{position:relative}
html[data-panel-ui] body .stat-icon{width:44px;height:44px;min-width:44px;display:grid;place-items:center;border-radius:.7rem;font-size:1.05rem}
html[data-panel-ui] body .stat-info{min-width:0}
html[data-panel-ui] body .stat-info strong{display:block;font-size:clamp(1.05rem,1.7vw,1.4rem);font-weight:750;line-height:1.3;font-variant-numeric:tabular-nums}
html[data-panel-ui] body .stat-info span{display:block;font-size:.72rem;color:var(--ui-muted);line-height:1.7}

/* --- Tables: consistent density -------------------------------------- */
html[data-panel-ui] body table th{padding:.65rem .8rem;font-size:.7rem;letter-spacing:.02em;background:linear-gradient(180deg,#172a44,#132238)}
html[data-panel-ui] body table td{padding:.65rem .8rem}
html[data-panel-ui] body table tbody tr:hover{background:rgba(var(--page-rgb,37,99,235),.07)}

/* --- Action buttons inside tables ------------------------------------- */
html[data-panel-ui] body .actions :is(.btn,.action-btn){min-height:34px;padding:0 10px}
html[data-panel-ui] body .actions .action-btn{width:34px}

/* --- Notes, empties and badges ---------------------------------------- */
html[data-panel-ui] body :is(.crm-empty,.empty){padding:2.25rem 1.25rem;text-align:center;color:var(--ui-muted);border:1px dashed rgba(var(--page-rgb,37,99,235),.35);border-radius:var(--ui-r-card);background:rgba(var(--page-rgb,37,99,235),.04)}
html[data-panel-ui] body :is(.badge,.status,.receipt-state){font-size:.68rem;padding:.28rem .6rem;line-height:1.5}

/* --- Sidebar: crisper presence ----------------------------------------- */
html[data-panel-ui] body .crm-sidebar{width:206px;padding:14px 8px;border-radius:20px;border:1px solid #33486a;background:linear-gradient(180deg,#13203399,#0c1626ee);backdrop-filter:blur(6px);scrollbar-width:thin}
html[data-panel-ui] body .crm-sidebar .crm-brand{display:flex;align-items:center;gap:9px;padding:.55rem .45rem .85rem;margin-bottom:.35rem;border-bottom:1px solid var(--ui-border)}
html[data-panel-ui] body .crm-brand-mark{width:38px;height:38px;min-width:38px;border-radius:12px;background:linear-gradient(145deg,var(--page-color,#00f2fe),rgba(var(--page-rgb,37,99,235),.7));box-shadow:0 8px 22px rgba(var(--page-rgb,37,99,235),.35);font:700 20px Tahoma}
html[data-panel-ui] body .crm-brand strong{font-size:14px;white-space:nowrap}
html[data-panel-ui] body .crm-brand small{margin-top:4px;font-size:10.5px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html[data-panel-ui] body .crm-sidebar .crm-nav-label{padding:10px 8px 5px;font-size:10.5px}
html[data-panel-ui] body .crm-sidebar .crm-nav-item{min-height:auto;padding:8px 9px;margin:2px 0;gap:9px;border-radius:9px;font-size:11.5px}
html[data-panel-ui] body .crm-sidebar .crm-nav-item>span{font-size:19px;width:22px}
html[data-panel-ui] body .crm-sidebar .crm-nav-item svg{width:19px;height:19px}
html[data-panel-ui] body .crm-sidebar .crm-nav-item.is-current{background:linear-gradient(110deg,rgba(var(--page-rgb,37,99,235),.28),rgba(var(--page-rgb,37,99,235),.12));border-color:rgba(var(--page-rgb,37,99,235),.45);color:#bfe4ff}
html[data-panel-ui] body .crm-sidebar-foot{margin-top:auto;padding:11px 8px}
@media(min-width:1180px){
  html[data-panel-ui] body .crm-sidebar .crm-nav-item{min-height:34px}
}

/* --- CRM hero (finance): de-duplicate scale, keep band ------------------ */
html[data-panel-ui] body .crm-finance-hero{
  min-height:auto;padding:1.05rem 1.3rem;margin-bottom:1.35rem;
  border:1px solid var(--ui-border);border-radius:var(--ui-r-card);
  background:linear-gradient(118deg,rgba(var(--page-rgb,37,99,235),.14),transparent 60%),linear-gradient(145deg,#122239,#0f1a2c);
}
html[data-panel-ui] body .crm-finance-hero :is(h1,h2){font-size:var(--ui-t-title)!important;font-weight:750!important;letter-spacing:-.2px;margin:.15rem 0 .35rem!important}
html[data-panel-ui] body .crm-finance-hero p{margin:.15rem 0;color:var(--ui-muted);font-size:var(--ui-t-small);max-width:none;line-height:1.8}
html[data-panel-ui] body .crm-finance-hero::after{left:auto;right:-90px;top:auto;bottom:-110px}

/* --- Disclosures (tunnels page pattern) --------------------------------- */
html[data-panel-ui] body details:not(.wg-create-card):not(.wg-action-disclosure){
  margin:.75rem 0;border:1px solid var(--ui-border);border-radius:var(--ui-r-card);background:#101e32;overflow:hidden
}
html[data-panel-ui] body details:not(.wg-create-card):not(.wg-action-disclosure)>summary{
  min-height:42px;padding:.65rem .95rem;border-radius:0;
  background:linear-gradient(180deg,rgba(var(--page-rgb,37,99,235),.10),transparent),#142641;
  font-size:.75rem;font-weight:600;
}
html[data-panel-ui] body details:not(.wg-create-card):not(.wg-action-disclosure)[open]>summary{border-bottom:1px solid var(--ui-border)}

/* --- Dialogs (management editors) match the layer ------------------------ */
html[data-panel-ui] body .management-editor-dialog{max-width:min(980px,calc(100vw - 2rem));border-radius:14px}
html[data-panel-ui] body .management-editor-body{overflow-x:hidden}
html[data-panel-ui] body .management-editor-body :is(.tunnel-fields,.settings-grid,.tunnel-router-grid,.grid-2){min-width:0;max-width:100%}
html[data-panel-ui] body .management-editor-header{padding:.85rem 1.1rem;background:linear-gradient(118deg,rgba(var(--page-rgb,37,99,235),.16),transparent 60%),#14263f}

/* --- Responsive breakpoints kept identical to the base layer ------------- */
@media(max-width:767.98px){
  html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar){padding:1rem;margin-bottom:1rem}
  html[data-panel-ui] body :is(.tunnel-fields,.settings-grid,.management-two,.server-fields,.form-grid,.grid-2),
  html[data-panel-ui] body .settings-field-stack .row.settings-field-row{grid-template-columns:minmax(0,1fr)}
  html[data-panel-ui] body :is(.card,.tunnel-card,.settings-card,.reseller-card,.workspace-editor,.inline-connection-workspace,.bs-directory){padding:var(--ui-space-card-sm)}
  html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card)>h2:first-child{margin:-14px -16px 12px;padding:.75rem 1rem}
  html[data-panel-ui] body .crm-finance-hero{padding:1rem;margin-bottom:1rem}
  html[data-panel-ui] body .stats>.stat{min-height:84px;padding:.85rem}
  html[data-panel-ui] body .stat-info strong{font-size:1.25rem}
}

/* --- Accessibility: unified focus + reduced motion ------------------------ */
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar,.card,.tunnel-card,.settings-card,.reseller-card,.workspace-editor) :focus-visible{outline:2px solid var(--page-color,#9ac9ff);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  html[data-panel-ui] body :is(.button-40,.btn,.stats>.stat,.portal-card){transition:none}
}

/* =====================================================================
   Visual identity pass v2 (graphic layer) — 2026-10-17
   Adds depth and graphic texture: dot-grid canvas, aurora blobs,
   card sheen + tone hairline, ornamented headings, crafted list rows,
   pill-style editor triggers. Loaded last: overrides flat defaults.
   ===================================================================== */

/* --- Canvas: aurora blobs + subtle dot grid (tone-aware) ------------- */
html[data-panel-ui] body{
  background:
    radial-gradient(1100px 480px at 86% -16%, rgba(var(--page-rgb,37,99,235),.20), transparent 66%),
    radial-gradient(780px 460px at 108% 58%, rgba(var(--page-rgb,37,99,235),.11), transparent 62%),
    radial-gradient(rgba(148,190,255,.10) 1px, transparent 1.4px),
    radial-gradient(1100px 460px at 85% -14%, rgba(var(--page-rgb,37,99,235),.10), transparent 68%),
    radial-gradient(720px 380px at 4% -8%, rgba(var(--page-rgb,37,99,235),.05), transparent 70%),
    var(--ui-bg,#0b1526);
  background-size:auto,auto,26px 26px,auto,auto,auto;
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed;
}

/* --- Card surfaces: sheen + tone hairline ----------------------------- */
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card,.inline-connection-workspace,.stats>.stat,.crm-finance-hero,.bs-directory,.portal-card){
  position:relative;
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card,.inline-connection-workspace)::before{
  content:"";
  position:absolute;
  inset-inline:26px;
  top:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent 6%,var(--page-color,#9ac9ff) 50%,transparent 94%);
  opacity:.85;
  pointer-events:none;
}
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card,.inline-connection-workspace)::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(400px 150px at 98% -34px, rgba(var(--page-rgb,37,99,235),.11), transparent 72%);
  pointer-events:none;
}
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card):hover{
  border-color:rgba(var(--page-rgb,37,99,235),.32);
  box-shadow:0 12px 34px #0a0c1842;
}

/* --- Headings: glow blob behind the title ------------------------------ */
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar){
  overflow:hidden;
}
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar)::after{
  content:"";
  position:absolute;
  inset-inline-end:70px;
  top:-60%;
  width:250px;
  height:210%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--page-rgb,37,99,235),.24), transparent);
  pointer-events:none;
}
/* dotted texture patch on heading edge */
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar)::before{
  content:"";
  position:absolute;
  inset-inline-start:-8px;
  inset-block:14px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--page-color,#9ac9ff),rgba(var(--page-rgb,37,99,235),0));
  box-shadow:0 0 12px rgba(var(--page-rgb,37,99,235),.55);
}

/* --- Editor triggers: clean pill buttons -------------------------------- */
html[data-panel-ui] body .management-editor-trigger{
  min-height:44px;
  padding:0 20px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
}

/* --- Crafted rows: tunnel plans, receipts, requests --------------------- */
html[data-panel-ui] body .tunnel-saved{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border:1px solid #2b4360;
  border-radius:12px;
  background:linear-gradient(145deg,#152846,#101d30);
}
html[data-panel-ui] body .tunnel-saved::before{
  content:"";
  position:absolute;
  inset-block:14px;
  inset-inline-start:-1px;
  width:3px;
  border-radius:3px;
  background:var(--page-color,#9ac9ff);
  opacity:.7;
}
html[data-panel-ui] body .tunnel-saved{
  position:relative;
}
html[data-panel-ui] body .tunnel-saved h3{margin:0 0 4px;font-size:14.5px}
html[data-panel-ui] body .tunnel-saved p{margin:0;font-size:12px;color:#9db2ca;line-height:1.9}
html[data-panel-ui] body .tunnel-saved{grid-template-columns:minmax(0,1fr) max-content}
html[data-panel-ui] body .tunnel-saved .tunnel-plan-actions{flex-wrap:nowrap;white-space:nowrap;padding-top:0;margin-top:0;border-top:0;min-width:max-content}
html[data-panel-ui] body .tunnel-saved .tunnel-plan-actions form{margin:0;display:inline-flex}
/* guard: nested action forms must never hog 100% width inside a flex row */
html[data-panel-ui] body :is(.tunnel-plan-actions,.actions) > form.panel-form-compact{width:auto;min-width:0;flex:0 1 auto;display:inline-flex}
html[data-panel-ui] body .tunnel-saved small{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;padding:.3rem .7rem;
  border:1px solid rgba(var(--page-rgb,37,99,235),.32);
  border-radius:999px;font-size:11px;
  background:rgba(var(--page-rgb,37,99,235),.08);color:#d3e5fa;
}
html[data-panel-ui] body .tunnel-saved .tunnel-plan-actions{border-top:0;padding-top:0;margin-top:0}

/* purchase request rows on admin page */
html[data-panel-ui] body .purchase-request{
  position:relative;
  transition:border-color .2s,box-shadow .2s;
}
html[data-panel-ui] body .purchase-request:hover{border-color:rgba(var(--page-rgb,37,99,235),.4);box-shadow:0 8px 26px #0a0c183c}

/* receipt rows (reseller finance) */
html[data-panel-ui] body .crm-receipt{position:relative;gap:16px}
html[data-panel-ui] body .crm-receipt::before{content:"";position:absolute;inset-block:18px;inset-inline-start:0;width:3px;border-radius:3px;background:rgba(var(--page-rgb,37,99,235),.5)}

/* --- Section chip in card headers (tone tag) ---------------------------- */
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card)>h2:first-child{
  background:linear-gradient(180deg,rgba(var(--page-rgb,37,99,235),.07),transparent);
}

/* --- Empty-state upgrade: icon glyph via ::marker substitute farm ------- */
html[data-panel-ui] body :is(.crm-empty,.empty){
  position:relative;
  color:#a7bad0;
  border-style:dashed;
  border-color:rgba(var(--page-rgb,37,99,235),.30);
  background:
    radial-gradient(rgba(148,190,255,.05) 1px,transparent 1.3px),
    rgba(var(--page-rgb,37,99,235),.04);
  background-size:22px 22px,auto;
}

/* --- Scrollbars page-wide (webkit) -------------------------------------- */
html[data-panel-ui] ::-webkit-scrollbar{width:9px;height:9px}
/* Root/page scrollbar must not eat layout width: scrollable pages would come
   out 9px narrower than non-scrolling ones. The page scroller keeps its
   behavior (wheel/keys) with an invisible 0px scrollbar; in-panel scrollers
   keep the 9px styling from the generic rule above. */
html[data-panel-ui]::-webkit-scrollbar,
html[data-panel-ui] body::-webkit-scrollbar{width:0;height:0}
html[data-panel-ui] ::-webkit-scrollbar-thumb{background:#2b4360;border-radius:6px;border:2px solid transparent;background-clip:content-box}
html[data-panel-ui] ::-webkit-scrollbar-track{background:transparent}

@media(max-width:767.98px){
  html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card,.inline-connection-workspace)::before{inset-inline:16px}
  html[data-panel-ui] body .tunnel-saved{grid-template-columns:minmax(0,1fr)}
}

/* --- Floating activity controls: keep clear of the sidebar -------------- */
html[data-panel-ui] body :is(#adminToastArea,#adminActivityPanel,#adminActivityButton){right:auto;left:22px}
html[data-panel-ui] body #adminActivityButton{bottom:22px;border-radius:999px}

/* =====================================================================
   Card protocol v3 — every section & button lives inside the card family
   (same surface recipe as .card / .tunnel-card / .workspace-editor)
   ===================================================================== */

/* --- 1) Stray blocks join the card family ------------------------------ */
html[data-panel-ui] body :is(.tunnel-flow,.tunnel-note,.collapsible-item,.reseller-controls){
  position:relative;
  border:1px solid rgba(var(--page-rgb,37,99,235),.22);
  border-radius:var(--ui-r-card,12px);
  background:linear-gradient(140deg,#131f33f2,#0e192cf2);
}
/* NOTE: form.panel-form-compact intentionally NOT card-ified — the same class
   exists on tiny inline forms (e.g. delete-plan inside .tunnel-plan-actions). */
html[data-panel-ui] body :is(.tunnel-flow,.tunnel-note){padding:16px 18px;border-radius:var(--ui-r-card,12px)}
html[data-panel-ui] body :is(.reseller-controls){padding:16px 18px;display:flex;flex-direction:column;gap:12px}
html[data-panel-ui] body .collapsible-item{overflow:hidden}
/* tone hairline on top edge of the family */
html[data-panel-ui] body :is(.tunnel-flow,.tunnel-note,.reseller-controls)::before{
  content:"";
  position:absolute;
  inset-inline:24px;
  top:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent 6%,var(--page-color,#9ac9ff) 50%,transparent 94%);
  opacity:.7;
  pointer-events:none;
}

/* --- 2) Orphan editor triggers: compact normal buttons ----------------- */
html[data-panel-ui] body main.tunnel-page > .management-editor-trigger{
  display:inline-flex;
  flex-wrap:nowrap;
  width:auto;
  min-height:40px;
  margin:0 0 14px;
  padding:0 16px;
  justify-content:center;
  align-items:center;
  gap:7px;
  border-radius:10px;
  border:1px solid rgba(var(--page-rgb,37,99,235),.30);
  background:linear-gradient(140deg,rgba(var(--page-rgb,37,99,235),.13),#101d30f2);
  color:#f2f7ff;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
}
html[data-panel-ui] body main.tunnel-page > .management-editor-trigger:hover{
  border-color:rgba(var(--page-rgb,37,99,235),.5);
  filter:brightness(1.12);
}
html[data-panel-ui] body main.tunnel-page > .management-editor-trigger::before{
  font-size:19px;
  width:24px;
  height:24px;
  border-radius:7px;
  background:rgba(var(--page-rgb,37,99,235),.16);
  line-height:1;
}
/* triggers living inside other boxes: no stray margins, stay as chips */
html[data-panel-ui] body :is(.purchase-admin-actions,.reseller-controls,form.panel-form-compact) > .management-editor-trigger{margin:0;align-self:flex-start}

/* --- 3) Purchase-settings strip becomes a real section ------------------ */
html[data-panel-ui] body .purchase-admin-actions{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  padding:14px 16px;
  margin:0 0 14px;
  border-radius:var(--ui-r-card,12px);
  border:1px solid rgba(var(--page-rgb,37,99,235),.30);
  background:linear-gradient(140deg,rgba(var(--page-rgb,37,99,235),.08),rgba(13,25,44,.85));
}
html[data-panel-ui] body .purchase-admin-actions::before{
  content:"";
  position:absolute;
  inset-inline:24px;
  top:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent 6%,var(--page-color,#9ac9ff) 50%,transparent 94%);
  opacity:.7;
  pointer-events:none;
}
html[data-panel-ui] body .purchase-admin-actions .purchase-admin-actions-label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#e9f1fd}
html[data-panel-ui] body .purchase-admin-actions .purchase-admin-actions-label::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--page-color,#9ac9ff);
  box-shadow:0 0 9px rgba(var(--page-rgb,37,99,235),.85);
}
/* the nested details card keeps its identity but calms down inside the strip */
html[data-panel-ui] body .purchase-admin-actions > details.tunnel-card{border:1px solid #2b4360;background:#0f1b2e}

/* --- 4) Same family for dashboard quickForms + purchase stats ---------- */
html[data-panel-ui] body .collapsible-item .collapsible-content{display:flex;flex-direction:column;gap:12px}
html[data-panel-ui] body .purchase-admin-stats article{border-radius:var(--ui-r-card,12px)}
html[data-panel-ui] body .purchase-admin-stats strong{font-size:1.25rem;font-weight:800}

@media(max-width:767.98px){
  html[data-panel-ui] body main.tunnel-page > .management-editor-trigger{min-height:38px;padding:0 12px;font-size:12px}
}

/* --- Card protocol v3b: soften wireguard hairline dividers -------------- */
html[data-panel-ui] body .wireguard-page .wg-divider,
html[data-panel-ui] body .wireguard-page .wg-top-divider{
  position:relative;
  border-bottom:0;
  border-top:0;
}
html[data-panel-ui] body .wireguard-page .wg-divider::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#2b415f 12%,#2b415f 88%,transparent);
}
html[data-panel-ui] body .wireguard-page .wg-top-divider::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#2b415f 12%,#2b415f 88%,transparent);
}

/* --- v3c: finance shell matches sibling block widths -------------------- */
html[data-panel-ui] body main.tunnel-page .ui-settings-shell{--ui-shell-max:var(--ui-page-max,1280px)}

/* --- v3d: reparented trigger lives in the card header row --------------- */
html[data-panel-ui] body .tunnel-card > .ui-card-header-row,
html[data-panel-ui] body .card > .ui-card-header-row,
html[data-panel-ui] body .settings-card > .ui-card-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:-14px -16px 12px;
  padding:.75rem 1rem;
  background:linear-gradient(180deg,rgba(var(--page-rgb,37,99,235),.07),transparent);
}
html[data-panel-ui] body .ui-card-header-row h2{margin:0;font-size:var(--ui-t-card-title,16px)}
html[data-panel-ui] body .ui-card-header-row .management-editor-trigger{margin:0}