/* Net Sub V2 — authoritative application design system */
:root {
  --background: #f5f7fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #eef2f8;
  --surface-hover: #e7edf7;
  --border: #dbe2ec;
  --border-strong: #c8d2e1;
  --text: #172033;
  --muted: #69758a;
  --primary: #315efb;
  --primary-hover: #2448d8;
  --primary-soft: #e9efff;
  --success: #1d7a52;
  --success-soft: #e7f6ee;
  --warning: #b66b16;
  --warning-soft: #fff3df;
  --danger: #bc4248;
  --danger-soft: #fdebed;
  --info: #3267a8;
  --info-soft: #eaf1fb;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --shadow-sm: 0 1px 2px rgba(28, 43, 72, .05);
  --shadow-md: 0 10px 28px rgba(28, 43, 72, .08);
  --shadow-lg: 0 24px 60px rgba(18, 30, 54, .17);
  --font-xs: .75rem;
  --font-sm: .86rem;
  --font-md: .96rem;
  --font-lg: 1.16rem;
  --font-xl: clamp(1.55rem, 2vw, 2.1rem);
  --input-height: 44px;
  --button-height: 42px;
  --topbar-height: 68px;
  --bottom-nav-height: 68px;
  --sidebar-width: 248px;

  /* Compatibility aliases for existing V2 markup and WhatsApp renderer. */
  --v2-bg: var(--background); --v2-surface: var(--surface); --v2-surface-hover: var(--surface-hover);
  --v2-border: var(--border); --v2-text: var(--text); --v2-muted: var(--muted);
  --v2-primary: var(--primary); --v2-primary-hover: var(--primary-hover); --v2-success: var(--success);
  --v2-warning: var(--warning); --v2-danger: var(--danger); --v2-radius: var(--radius-md); --v2-radius-sm: var(--radius-sm);
  --v2-sp-xs: var(--space-1); --v2-sp-sm: var(--space-2); --v2-sp-md: var(--space-4); --v2-sp-lg: var(--space-6); --v2-sp-xl: var(--space-8);
  --fg-muted: var(--muted); --bg-alt: var(--surface-soft);
}

[data-theme="dark"] {
  --background: #0f1420;
  --surface: #171e2b;
  --surface-raised: #1c2534;
  --surface-soft: #222c3c;
  --surface-hover: #2a3648;
  --border: #2d394b;
  --border-strong: #3b4a60;
  --text: #edf1f7;
  --muted: #9ba7ba;
  --primary: #7c9cff;
  --primary-hover: #9ab1ff;
  --primary-soft: #202d53;
  --success: #6dcc9a;
  --success-soft: #17382a;
  --warning: #e4aa59;
  --warning-soft: #3a2d1b;
  --danger: #f08a8e;
  --danger-soft: #422326;
  --info: #8cb8ec;
  --info-soft: #1d3048;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .18);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, .24);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, .38);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; background: var(--background); }
html[data-theme="dark"] { color-scheme: dark; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--background); color: var(--text); font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: var(--font-md); line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.v2-app { min-width: 320px; overscroll-behavior-y: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a, select, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
img { max-width: 100%; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.hidden { display: none !important; }
.grow { min-width: 0; flex: 1; }
.muted, .v2-muted { color: var(--muted) !important; font-size: var(--font-sm); }
.text-danger, .v2-text-danger { color: var(--danger) !important; }
.text-success, .v2-text-success { color: var(--success) !important; }
.v2-text-warning { color: var(--warning) !important; }
.v2-text-primary { color: var(--primary) !important; }

/* App shell */
.v2-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: stretch; }
.v2-sidebar { width: var(--sidebar-width); height: 100vh; height: 100dvh; position: sticky; top: 0; flex: 0 0 var(--sidebar-width); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); z-index: 20; }
.v2-workspace { min-width: 0; flex: 1; }
.v2-brand { min-width: 0; min-height: 78px; padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); text-decoration: none; border-bottom: 1px solid var(--border); }
.v2-brand-mark, .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: linear-gradient(145deg, #416fff, #2448d8); border-radius: 13px; font: 800 .88rem/1 "Segoe UI", sans-serif; letter-spacing: .04em; box-shadow: 0 7px 16px rgba(49, 94, 251, .22); }
.v2-brand-copy { min-width: 0; display: grid; gap: 1px; }
.v2-brand-copy strong { overflow: hidden; color: var(--text); font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.v2-brand-copy small { color: var(--muted); font-size: .69rem; }
.v2-nav-scroll { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3); scrollbar-width: thin; }
.v2-nav-label { margin: var(--space-3) var(--space-3) var(--space-2); color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .08em; }
.v2-nav-list { display: grid; gap: 3px; }
.v2-nav-list a { min-height: 43px; padding: 8px 10px; display: flex; align-items: center; gap: 11px; border-radius: 10px; color: #5b667a; font-size: .82rem; font-weight: 600; text-decoration: none; transition: color .16s ease, background .16s ease, transform .16s ease; }
.v2-nav-list a:hover { color: var(--text); background: var(--surface-soft); }
.v2-nav-list a.active { color: var(--primary); background: var(--primary-soft); }
.v2-nav-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; }
.v2-nav-list a.active .v2-nav-icon { background: var(--surface); box-shadow: var(--shadow-sm); }
.v2-nav-list .icon { width: 18px; height: 18px; }
.v2-nav-badge { min-width: 23px; height: 21px; margin-inline-start: auto; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: var(--primary); background: var(--surface); font-size: .65rem; }
.v2-sidebar-account { min-height: 70px; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); }
.v2-sidebar-account > span:last-child { min-width: 0; display: grid; }
.v2-sidebar-account strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.v2-sidebar-account small { color: var(--muted); font-size: .68rem; }
.v2-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-weight: 800; }

.v2-topbar { height: var(--topbar-height); padding: 0 clamp(16px, 2.1vw, 34px); position: sticky; top: 0; z-index: 18; display: flex; align-items: center; gap: var(--space-4); background: color-mix(in srgb, var(--surface) 93%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.v2-topbar-title { min-width: 130px; display: grid; }
.v2-topbar-title strong { font-size: .92rem; }
.v2-topbar-title small { color: var(--muted); font-size: .68rem; }
.v2-global-search { width: min(520px, 42vw); height: 42px; margin-inline: auto; position: relative; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--background); transition: border-color .18s, box-shadow .18s, background .18s; }
.v2-global-search:focus-within { background: var(--surface); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
.v2-global-search .icon { width: 18px; color: var(--muted); }
.v2-global-search input { width: 100%; height: 100%; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .8rem; }
.v2-topbar-actions { display: flex; align-items: center; gap: 7px; }
.v2-icon-btn, .icon-btn { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); background: var(--surface); cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.v2-icon-btn:hover, .icon-btn:hover { color: var(--primary); background: var(--surface-soft); border-color: var(--border-strong); }
.v2-menu-btn, .v2-mobile-search-btn { display: none; }
.v2-theme-control { height: 40px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.v2-theme-control .icon { width: 17px; color: var(--muted); }
.v2-theme-control select { width: 74px; padding: 0; border: 0; outline: 0; color: var(--muted); background: transparent; font-size: .69rem; cursor: pointer; }
.v2-desktop-logout { display: contents; }
.notification-wrap { position: relative; }
.notification-btn { position: relative; }
.notification-btn > span { min-width: 17px; height: 17px; padding: 0 4px; position: absolute; inset: -5px auto auto -5px; display: grid; place-items: center; color: #fff; background: var(--danger); border: 2px solid var(--surface); border-radius: 999px; font-size: .56rem; }
.notification-panel, .search-results { display: none; position: absolute; z-index: 60; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.notification-panel { width: 310px; inset: calc(100% + 10px) auto auto 0; padding: 8px; }
.notification-panel.open, .search-results.open { display: block; }
.notification-title { padding: 10px 11px 12px; display: grid; border-bottom: 1px solid var(--border); }
.notification-title strong { font-size: .84rem; }
.notification-title small { color: var(--muted); font-size: .68rem; }
.notification-panel > a { padding: 10px; display: flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 9px; }
.notification-panel > a:hover { background: var(--surface-soft); }
.notification-panel p { margin: 0; display: grid; }
.notification-panel b { font-size: .78rem; }
.notification-panel small { color: var(--muted); font-size: .67rem; }
.notice-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; }
.notice-icon .icon { width: 16px; }
.notice-icon.primary { color: var(--primary); background: var(--primary-soft); }
.notice-icon.warning { color: var(--warning); background: var(--warning-soft); }
.notice-icon.danger { color: var(--danger); background: var(--danger-soft); }
.search-results { width: 100%; inset: calc(100% + 8px) 0 auto; max-height: 390px; overflow-y: auto; padding: 7px; }
.search-result-row { display: flex; align-items: stretch; border-radius: 9px; }
.search-result-row:hover { background: var(--surface-soft); }
.search-result-copy { min-width: 0; flex: 1; padding: 9px; display: grid; gap: 3px; }.search-result-copy > a { min-width: 0; text-decoration: none; }
.search-result-row span { min-width: 0; display: grid; }
.search-result-row b { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.search-result-row small { color: var(--muted); font-size: .68rem; }
.search-username { display: flex; align-items: center; gap: 5px; }.search-username i { font-style: normal; }.search-username .username-copy-btn { width: 22px; height: 22px; }
.search-result-row em { color: var(--danger); font-size: .69rem; font-style: normal; }
.search-call { width: 34px; height: 34px; margin-inline-end: 5px; padding: 0; align-self: center; display: grid; place-items: center; flex: 0 0 auto; color: var(--success); background: var(--surface-soft); border: 0; border-radius: 9px; cursor: pointer; }.search-call.copy-info-btn { color: var(--primary); background: var(--primary-soft); }
.search-loading, .search-empty { padding: 18px; color: var(--muted); text-align: center; font-size: .76rem; }

.v2-main { width: 100%; max-width: 1720px; margin: 0 auto; padding: clamp(18px, 2.2vw, 36px); }
.v2-drawer, .v2-drawer-overlay, .v2-bottom-nav { display: none; }

/* Typography, page structure, and utilities */
.v2-h1, .page-heading h1 { margin: 0; color: var(--text); font-size: var(--font-xl); font-weight: 800; letter-spacing: -.025em; line-height: 1.25; }
.v2-h2, .panel h2 { margin: 0; font-size: var(--font-lg); }
.v2-main > .v2-mb-md.v2-flex:first-child, .page-heading { min-height: 72px; margin-bottom: var(--space-6) !important; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.v2-main > .v2-mb-md.v2-flex:first-child p, .page-heading p { margin: 4px 0 0; color: var(--muted); font-size: var(--font-sm); }
.eyebrow { display: inline-block; margin-bottom: 3px; color: var(--primary); font-size: .68rem; font-weight: 800; letter-spacing: .045em; }
.v2-flex { display: flex; }.v2-items-center { align-items: center; }.v2-justify-between { justify-content: space-between; }.v2-justify-center { justify-content: center; }
.v2-gap-sm { gap: var(--space-2); }.v2-gap-md { gap: var(--space-4); }.v2-mt-xs { margin-top: var(--space-1); }.v2-mt-sm { margin-top: var(--space-2); }.v2-mt-md { margin-top: var(--space-4); }.v2-mb-sm { margin-bottom: var(--space-2); }.v2-mb-md { margin-bottom: var(--space-4); }
.v2-grid-2, .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
.v2-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
.span-2 { grid-column: span 2; }

/* Surfaces */
.v2-card, .panel { padding: var(--space-5); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.panel { overflow: hidden; }
.panel-head { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-3); padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: .96rem; }
.panel-head p { margin: 2px 0 0; color: var(--muted); font-size: .69rem; }
.panel-head > a { display: inline-flex; align-items: center; gap: 3px; color: var(--primary); font-size: .72rem; font-weight: 700; text-decoration: none; }
.panel-head > a .icon { width: 15px; }

/* Buttons */
.v2-btn, .btn { min-height: var(--button-height); padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text); background: var(--surface); font-size: .8rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .14s, background .14s, border-color .14s, box-shadow .14s; }
.v2-btn:hover, .btn:hover { transform: translateY(-1px); }
.v2-btn:focus-visible, .btn:focus-visible, .v2-icon-btn:focus-visible, .icon-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 22%, transparent); outline-offset: 2px; }
.v2-btn:disabled, .btn:disabled { opacity: .5; pointer-events: none; }
.v2-btn-primary, .btn.primary { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 5px 14px rgba(49,94,251,.18); }
.v2-btn-primary:hover, .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.v2-btn-secondary, .v2-btn-outline, .btn.secondary { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
.v2-btn-secondary:hover, .v2-btn-outline:hover, .btn.secondary:hover { background: var(--surface-soft); }
.v2-btn-success, .btn.success { color: #fff; background: var(--success); border-color: var(--success); }
.v2-btn-warning, .btn.warning { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 25%, var(--border)); }
.v2-btn-danger, .btn.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.v2-btn-ghost, .btn.danger-text { color: var(--danger); background: transparent; border-color: transparent; }
.v2-btn-ghost:hover, .btn.danger-text:hover { background: var(--danger-soft); }
.v2-btn-sm, .btn.small { min-height: 34px; padding: 0 11px; font-size: .72rem; }
.v2-btn .icon, .btn .icon { width: 17px; height: 17px; }
.wide { width: 100%; }
.username-inline { min-width: 0; display: inline-flex; align-items: center; gap: 5px; direction: ltr; vertical-align: middle; }
.username-inline code { min-width: 0; overflow: hidden; color: var(--muted); font: 600 .68rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.username-copy-btn { width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--primary); background: var(--primary-soft); border: 1px solid color-mix(in srgb,var(--primary) 22%,var(--border)); border-radius: 8px; cursor: pointer; transition: color .15s, background .15s, transform .15s; }
.username-copy-btn:hover { color: #fff; background: var(--primary); transform: translateY(-1px); }.username-copy-btn .icon { width: 13px; height: 13px; }.username-copy-btn.copied { color: #fff; background: var(--success); border-color: var(--success); }.username-copy-btn.copy-failed { color: #fff; background: var(--danger); border-color: var(--danger); }
.copy-info-btn { color: var(--primary); background: var(--primary-soft); border-color: color-mix(in srgb,var(--primary) 24%,var(--border)); }.copy-info-btn:hover { background: color-mix(in srgb,var(--primary) 14%,var(--surface)); }
button[data-renew] { min-height: 36px; padding-inline: 13px; color: #fff !important; background: linear-gradient(135deg,var(--primary),var(--primary-hover)) !important; border: 1px solid color-mix(in srgb,var(--primary) 80%,#111) !important; border-radius: 10px; box-shadow: 0 5px 13px color-mix(in srgb,var(--primary) 22%,transparent); font-weight: 800; }
button[data-renew]:hover { box-shadow: 0 7px 18px color-mix(in srgb,var(--primary) 28%,transparent); }.v2-renew-btn .icon, button[data-renew] .icon { width: 16px; }

/* Forms */
label { color: var(--text); font-size: .76rem; font-weight: 700; }
label > input, label > select, label > textarea, .v2-input, .v2-select { width: 100%; margin-top: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; color: var(--text); background: var(--surface); font-size: .82rem; font-weight: 500; transition: border-color .15s, box-shadow .15s, background .15s; }
label > input, label > select, .v2-input:not(textarea), .v2-select { min-height: var(--input-height); padding: 0 12px; }
label > textarea, textarea.v2-input { min-height: 96px; padding: 10px 12px; resize: vertical; }
label > input:focus, label > select:focus, label > textarea:focus, .v2-input:focus, .v2-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 11%, transparent); }
input[readonly] { color: var(--muted); background: var(--surface-soft); cursor: default; }
select { appearance: none; padding-inline-end: 34px !important; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position: left 15px center,left 10px center; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
input[type="checkbox"] { width: 18px; height: 18px; }
input[type="color"] { padding: 4px; }
label small, .v2-form-label + small { display: block; margin-top: 5px; color: var(--muted); font-size: .66rem; font-weight: 400; }
label i { color: var(--danger); font-style: normal; }
.v2-form-label, .v2-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .69rem; font-weight: 700; }
.v2-form-label .icon { width: 15px; }
.form-stack { display: grid; gap: var(--space-4); }
.form-errors { margin-bottom: var(--space-4); padding: 11px 13px; color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); border-radius: var(--radius-sm); font-size: .76rem; }
.form-errors ul { margin: 6px 0 0; padding-inline-start: 18px; }
.form-actions { padding-top: var(--space-5); display: flex; justify-content: flex-end; gap: var(--space-2); border-top: 1px solid var(--border); }

/* Dashboard */
.stats-grid { display: grid; gap: var(--space-3); }
.operations-stats { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: var(--space-4); }
.stat-card { min-height: 96px; padding: 16px; position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-sm); }
.stat-card::after { width: 70px; height: 70px; position: absolute; inset: auto auto -36px -25px; content: ""; border-radius: 999px; background: currentColor; opacity: .045; }
.stat-icon, .cash-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.stat-icon .icon, .cash-icon .icon { width: 18px; }
.stat-card > div { min-width: 0; display: grid; }
.stat-card small { color: var(--muted); font-size: .66rem; }
.stat-card strong { margin-top: 3px; overflow: hidden; font-size: 1.3rem; line-height: 1.15; text-overflow: ellipsis; }
.stat-card .card-arrow { margin-inline-start: auto; color: var(--muted); opacity: .65; }
.stat-card .card-arrow .icon { width: 15px; }
.stat-card.success .stat-icon { color: var(--success); background: var(--success-soft); }
.stat-card.warning .stat-icon { color: var(--warning); background: var(--warning-soft); }
.stat-card.danger .stat-icon { color: var(--danger); background: var(--danger-soft); }
.stat-card.neutral .stat-icon { color: var(--muted); background: var(--surface-soft); }
.stat-card.money .stat-icon { color: var(--info); background: var(--info-soft); }
.operations-stats .stat-card:first-child { grid-column: span 2; color: #fff; background: linear-gradient(135deg,#315efb,#2448d8); border-color: transparent; }
.operations-stats .stat-card:first-child small, .operations-stats .stat-card:first-child .card-arrow { color: rgba(255,255,255,.78); }
.operations-stats .stat-card:first-child .stat-icon { color: #fff; background: rgba(255,255,255,.15); }
.cash-strip { margin-bottom: var(--space-4); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.cash-strip > div { min-height: 82px; padding: 14px 16px; display: flex; align-items: center; gap: 11px; border-inline-end: 1px solid var(--border); }
.cash-strip > div:last-child { border: 0; }
.cash-strip p { margin: 0; display: grid; }
.cash-strip small { color: var(--muted); font-size: .65rem; }
.cash-strip strong { margin-top: 2px; font-size: .9rem; }
.cash-strip a { margin-inline-start: auto; color: var(--primary); font-size: .7rem; font-weight: 700; text-decoration: none; }
.cash-icon.success { color: var(--success); background: var(--success-soft); }
.cash-icon.primary { color: var(--info); background: var(--info-soft); }
.cash-icon.warning { color: var(--warning); background: var(--warning-soft); }
.dashboard-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--space-4); align-items: stretch; }
.dashboard-grid > .panel { grid-column: span 4; }
.dashboard-grid > .span-wide { grid-column: span 8; }
.operational-list, .debt-mini-list, .timeline, .mini-table { display: grid; }
.operational-list article, .debt-mini-list article, .mini-table > div { min-height: 57px; padding: 9px 0; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--border); }
.operational-list article:last-child, .debt-mini-list article:last-child, .mini-table > div:last-child { border: 0; }
.operational-list a:not(.icon-action), .debt-mini-list a:not(.icon-action), .mini-table a { display: grid; color: var(--text); font-size: .76rem; font-weight: 700; text-decoration: none; }
.operational-list small, .debt-mini-list small, .mini-table small { color: var(--muted); font-size: .64rem; font-weight: 400; }
.icon-action { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); background: var(--surface-soft); border: 0; border-radius: 9px; text-decoration: none; cursor: pointer; }
.icon-action .icon { width: 16px; }
.mini-table .plan-label { min-width: 78px; }
.mini-table > div > b { min-width: 82px; font-size: .68rem; }
.mini-subscriber { display: grid; gap: 2px; }
.timeline > div { padding: 9px 0; display: flex; gap: 10px; border-bottom: 1px solid var(--border); }
.timeline > div:last-child { border: 0; }
.timeline > div > span { width: 29px; height: 29px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 9px; }
.timeline .icon { width: 15px; }
.timeline p { margin: 0; display: grid; }
.timeline b { font-size: .73rem; }.timeline small { color: var(--muted); font-size: .63rem; }
.empty { min-height: 150px; padding: 24px; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--muted); text-align: center; }
.empty.compact { min-height: 120px; }
.empty > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--success); background: var(--success-soft); border-radius: 12px; }
.empty h2, .empty h3, .empty strong { margin: 0; color: var(--text); font-size: .88rem; }
.empty p { margin: 0; font-size: .7rem; }

/* Tables, badges, lists */
.table-scroll, .v2-table-wrap { overflow-x: auto; }
.v2-table, .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .75rem; }
.v2-table th, .v2-table td, .data-table th, .data-table td { padding: 12px 14px !important; text-align: right; vertical-align: middle; border-bottom: 1px solid var(--border) !important; }
.v2-table th, .data-table th { position: sticky; top: 0; z-index: 2; color: var(--muted); background: var(--surface-soft) !important; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.v2-table tbody tr:hover, .data-table tbody tr:hover { background: color-mix(in srgb, var(--surface-soft) 55%, transparent); }
.v2-table tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: 0 !important; }
.v2-table a, .data-table a { text-decoration: none; }
.v2-badge, .plan-label, .plan-text { --plan-color: var(--primary); max-width: 150px; padding: 3px 8px; display: inline-flex; align-items: center; overflow: hidden; color: var(--plan-color); background: color-mix(in srgb, var(--plan-color) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--plan-color) 25%, var(--border)); border-radius: 999px; font-size: .65rem; font-weight: 800; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.v2-badge.success { --plan-color: var(--success); }.v2-badge.warning { --plan-color: var(--warning); }
.status { padding: 3px 8px; display: inline-flex; align-items: center; border-radius: 999px; font-size: .64rem; font-weight: 800; white-space: nowrap; }
.status.active { color: var(--success); background: var(--success-soft); }.status.expiring { color: var(--warning); background: var(--warning-soft); }.status.expired { color: var(--danger); background: var(--danger-soft); }.status.suspended { color: var(--muted); background: var(--surface-soft); }
.currency-value { font-variant-numeric: tabular-nums; }

/* Operational toolbars and subscriber directory */
.v2-page-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--font-sm); }
.v2-page-actions, .row-actions { display: flex; align-items: center; gap: 7px; }
.v2-filter-bar { padding: 12px; }
.v2-filter-bar form { display: flex; align-items: end; gap: 10px; }
.v2-filter-search { height: var(--input-height); min-width: 220px; flex: 1.35; margin: 0; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-soft); }
.v2-filter-search:focus-within { background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); }
.v2-filter-search .icon { width: 17px; color: var(--muted); }
.v2-filter-search input { min-width: 0; height: 100%; margin: 0; padding: 0; flex: 1; border: 0; outline: 0; background: transparent; box-shadow: none; }
.v2-filter-options { flex: 2; display: flex; align-items: end; gap: 9px; }
.v2-filter-options label { min-width: 120px; flex: 1; }
.v2-filter-options label > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .65rem; }
.v2-filter-options select { margin: 0; }
.v2-filter-toggle { display: none; }
.bulkbar { min-height: 0; max-height: 0; margin-bottom: 0; padding: 0 14px; overflow: hidden; opacity: 0; display: flex; align-items: center; gap: 9px; background: var(--primary-soft); border: 0 solid color-mix(in srgb,var(--primary) 24%,var(--border)); border-radius: var(--radius-sm); transition: min-height .18s,max-height .18s,margin .18s,padding .18s,opacity .18s,border-width .18s; }
.bulkbar.visible { min-height: 58px; max-height: 90px; margin-bottom: 10px; padding-block: 8px; opacity: 1; border-width: 1px; }
.bulkbar > div { margin-inline-end: auto; display: flex; align-items: baseline; gap: 5px; }.bulkbar > div strong { color: var(--primary); font-size: 1.1rem; }.bulkbar > div span { color: var(--muted); font-size: .7rem; }
.bulkbar select { width: auto; min-width: 130px; height: 38px; margin: 0; }
.v2-list-surface { padding: 0; overflow: hidden; }
.subscriber-table-wrap { overflow-x: auto; }.subscriber-table { min-width: 830px; }.subscriber-table .check-cell { width: 42px; text-align: center; }.subscriber-table td { height: 67px; }.subscriber-table td > code, .subscriber-table td > small { margin-top: 2px; display: block; color: var(--muted); font-size: .64rem; }.subscriber-table td > .username-inline { margin-top: 2px; }.subscriber-table td:nth-child(3) { white-space: nowrap; }.subscriber-table td:nth-child(3) .status { margin-inline-start: 5px; }.subscriber-table td:nth-child(4) { white-space: nowrap; }.subscriber-table td:nth-child(4) > strong { display: block; font-size: .75rem; }.subscriber-name { display: block; color: var(--text); font-size: .78rem; font-weight: 800; }
.table-group td { height: auto !important; padding-block: 7px !important; color: var(--primary); background: var(--primary-soft); font-size: .67rem; font-weight: 800; }
.row-actions .v2-icon-btn { width: 34px; height: 34px; }.row-actions .icon { width: 16px; }
.subscriber-mobile-list { display: none; }.mobile-list-group { margin: 13px 13px 5px; color: var(--primary); font-size: .68rem; font-weight: 800; }
.subscriber-row { min-height: 126px; padding: 11px 12px; display: grid; grid-template-columns: 20px minmax(0,1fr); grid-template-rows: auto auto auto; gap: 7px 9px; align-items: center; border-bottom: 1px solid var(--border); }.subscriber-row:last-child { border: 0; }.subscriber-row > input { grid-row: 1/4; align-self: start; margin-top: 3px; }.subscriber-row-main { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.subscriber-row-main a { min-width: 0; color: var(--text); text-decoration: none; }.subscriber-row-main > span:first-child { min-width: 0; display: grid; gap: 3px; }.subscriber-row-main strong { display: block; overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }.subscriber-row-main code { color: var(--muted); font-size: .62rem; }.subscriber-row-meta { display: flex; gap: 4px; }.subscriber-row-expiry { grid-column: 2; display: flex; align-items: baseline; gap: 6px; }.subscriber-row-expiry small { color: var(--muted); font-size: .59rem; }.subscriber-row-expiry strong { font-size: .68rem; }.subscriber-row-expiry em { font-size: .6rem; font-style: normal; }.subscriber-row-actions { grid-column: 2; grid-row: 3; display: flex; align-items: center; gap: 5px; }.subscriber-row-actions .v2-icon-btn { width: 34px; height: 34px; }.subscriber-row-actions .icon { width: 15px; }
.v2-pagination { margin-top: 16px; display: flex; justify-content: center; gap: 5px; }.v2-pagination .v2-btn { min-width: 38px; padding: 0 9px; }

/* Financial directory */
.finance-summary { margin-bottom: var(--space-4); display: grid; grid-template-columns: 1.45fr repeat(3,1fr); gap: 10px; }
.finance-summary > article, .finance-summary > a { min-height: 88px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-sm); }
.finance-summary > * > small { color: var(--muted); font-size: .65rem; }.finance-summary > * > strong { margin-top: 4px; font-size: 1.1rem; }.finance-summary > a > span { margin-top: 4px; display: flex; align-items: center; gap: 2px; color: var(--primary); font-size: .64rem; font-weight: 700; }.finance-summary > a .icon { width: 13px; }
.finance-summary .finance-summary-primary { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; color: #fff; background: linear-gradient(135deg,#315efb,#2448d8); border-color: transparent; }.finance-summary-primary > span { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.14); border-radius: 12px; }.finance-summary-primary > div { display: grid; }.finance-summary-primary small { color: rgba(255,255,255,.78); }.finance-summary-primary strong { font-size: 1.3rem; }
.debt-list-surface { padding: 0; overflow: hidden; }.debt-table-wrap { overflow-x: auto; }.debt-table { min-width: 790px; }.debt-table td { height: 67px; }.debt-table td > a:not(.debt-phone), .debt-table td > span, .debt-table td > strong { text-decoration: none; }.debt-table td > a:not(.debt-phone), .debt-table td:nth-child(3), .debt-table td:nth-child(4) { display: grid; }.debt-table td strong { font-size: .75rem; }.debt-table td small { margin-top: 2px; color: var(--muted); font-size: .63rem; }.debt-phone { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-size: .68rem; text-decoration: none; }.debt-phone .icon { width: 14px; }
.debt-mobile-list { display: none; }.debt-row { padding: 12px; display: grid; gap: 9px; border-bottom: 1px solid var(--border); border-inline-start: 3px solid var(--primary); }.debt-row:last-child { border-bottom: 0; }.debt-row.warning { border-inline-start-color: var(--warning); }.debt-row.high { border-inline-start-color: var(--danger); }.debt-row-main, .debt-row-amount, .debt-row-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.debt-row-main > span:first-child { min-width: 0; display: grid; }.debt-row-main strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.debt-row-main small { color: var(--muted); font-size: .62rem; }.debt-row-amount { justify-content: flex-start; gap: 28px; }.debt-row-amount > span { display: grid; }.debt-row-amount small { color: var(--muted); font-size: .58rem; }.debt-row-amount strong { color: var(--danger); font-size: .75rem; }.debt-row-actions { justify-content: flex-end; }.debt-row-actions .v2-icon-btn { width: 34px; height: 34px; }.debt-row-actions .icon { width: 15px; }

/* Renewal history */
.compact-filter { padding: 12px; }.compact-filter form { display: flex; align-items: end; gap: 9px; }.compact-filter label { min-width: 150px; }.compact-filter input { margin-top: 4px; }
.history-surface { padding: 0; overflow: hidden; }.history-table-wrap { overflow-x: auto; }.history-table { min-width: 850px; }.history-table td { height: 66px; }.history-table td:first-child { color: var(--muted); font-size: .67rem; }.history-table td:nth-child(2) a { display: grid; text-decoration: none; }.history-table td:nth-child(2) strong { font-size: .74rem; }.history-table code { color: var(--muted); font-size: .62rem; }.history-table td:nth-child(4) { font-size: .66rem; }.history-table td:nth-child(4) b { display: flex; align-items: center; gap: 2px; color: var(--success); }.history-table td:nth-child(4) .icon { width: 12px; }
.payment-status { padding: 4px 8px; display: inline-flex; border-radius: 999px; font-size: .63rem; font-weight: 800; }.payment-status.paid { color: var(--success); background: var(--success-soft); }.payment-status.partial { color: var(--warning); background: var(--warning-soft); }.payment-status.open { color: var(--danger); background: var(--danger-soft); }.payment-status.cancelled,.payment-status.legacy { color: var(--muted); background: var(--surface-soft); }
.history-mobile-list { display: none; }.history-row { padding: 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--border); }.history-row:last-child { border: 0; }.history-row-head, .history-row-plan, .history-row-money { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.history-row-head > span:first-child { min-width: 0; display: grid; gap: 3px; }.history-row-head a { min-width: 0; display: grid; color: var(--text); text-decoration: none; }.history-row-head strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }.history-row-head code { color: var(--muted); font-size: .61rem; }.history-row-plan > span:last-child { color: var(--muted); font-size: .62rem; }.history-row-plan b { color: var(--success); }.history-row-money { padding-top: 7px; border-top: 1px solid var(--border); }.history-row-money > small { color: var(--muted); font-size: .58rem; }.history-row-money > span { display: grid; text-align: left; font-size: .7rem; font-weight: 800; }.history-row-money em { color: var(--success); font-size: .58rem; font-style: normal; font-weight: 600; }

/* Subscriber form and detail */
.form-layout { display: grid; grid-template-columns: minmax(190px,260px) minmax(0,760px); gap: var(--space-5); align-items: start; }
.form-layout > aside { padding: var(--space-5); color: var(--muted); background: var(--primary-soft); border-radius: var(--radius-md); }
.form-layout > aside h2 { margin: 0 0 8px; color: var(--primary); font-size: .94rem; }
.form-layout > aside p, .form-layout > aside li { font-size: .72rem; }
.form-layout > aside ul { margin: 15px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.form-layout > aside li { display: flex; align-items: center; gap: 6px; }.form-layout > aside .icon { width: 15px; }
.form-panel { padding: clamp(18px,3vw,30px); }
.subscriber-form { display: grid; gap: var(--space-5); }
.form-section { padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.form-section > header { margin-bottom: var(--space-4); display: flex; align-items: center; gap: 10px; }
.form-section > header > span { width: 29px; height: 29px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 9px; font-size: .7rem; font-weight: 800; }
.form-section h2 { margin: 0; font-size: .9rem; }.form-section p { margin: 1px 0 0; color: var(--muted); font-size: .66rem; }
.v2-back-link { margin-bottom: 5px; display: inline-block; color: var(--primary); font-size: .69rem; font-weight: 700; text-decoration: none; }.form-aside-icon { width: 40px; height: 40px; margin-bottom: 14px; display: grid; place-items: center; color: var(--primary); background: var(--surface); border-radius: 12px; }
.receipt-settings-layout { max-width: 980px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.7fr); gap: var(--space-5); align-items: start; }.receipt-settings-form .panel-head { margin-bottom: var(--space-5); }.receipt-upload > span { display: block; }.receipt-upload input { padding: 8px; }.current-logo { padding: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-soft); border-radius: var(--radius-sm); }.current-logo img { width: 92px; height: 58px; object-fit: contain; }.current-logo label { display: flex; align-items: center; gap: 7px; color: var(--danger); cursor: pointer; }.receipt-preview { padding: 18px; background: var(--surface-soft); border-radius: var(--radius-md); text-align: center; }.receipt-preview-label { color: var(--muted); font-size: .68rem; font-weight: 700; }.receipt-paper { width: 220px; min-height: 390px; margin: 14px auto; padding: 24px 17px 18px; display: flex; flex-direction: column; color: #111827; background: #fff; border-top: 4px solid var(--primary); border-radius: 4px; box-shadow: 0 14px 32px rgba(28,43,72,.15); font-family: Tahoma,Arial,sans-serif; }.receipt-paper img { display: block; max-width: 112px; width: auto; height: auto; max-height: 62px; margin: 0 auto 9px; object-fit: contain; }.receipt-paper > strong { font-size: .92rem; line-height: 1.3; }.receipt-paper > small { margin-top: 2px; color: #667085; font-size: .63rem; }.receipt-paper-title { margin: 13px 0 10px; padding: 7px 9px; color: #fff; background: var(--primary); border-radius: 6px; font-size: .74rem; font-weight: 800; }.receipt-paper-customer { margin-bottom: 8px; padding: 8px 9px; background: #f5f7fb; border: 1px solid #e4e8ef; border-radius: 6px; text-align: right; }.receipt-paper-customer span { display: block; color: #667085; font-size: .52rem; font-weight: 700; }.receipt-paper-customer b { display: block; margin-top: 1px; font-size: .69rem; }.receipt-paper p { margin: 0; padding: 4px 1px; display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed #d7dce5; font-size: .58rem; }.receipt-paper p span { color: #667085; }.receipt-paper-total { margin-top: 10px; padding: 8px 9px; display: flex; justify-content: space-between; color: #173279; background: #eef3ff; border: 1px solid #cbd8ff; border-radius: 6px; font-size: .62rem; font-weight: 800; }.receipt-paper em { margin-top: auto; padding-top: 14px; color: #475467; font-size: .6rem; font-style: normal; font-weight: 700; }.receipt-preview > p { margin: 0; color: var(--muted); font-size: .65rem; }
.wa-layout { max-width: 980px; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,.65fr); gap: var(--space-4); align-items: start; }.wa-connection-card { min-height: 360px; display: grid; place-items: center; }.wa-state { width: min(100%,520px); padding: 24px; display: grid; place-items: center; text-align: center; }.wa-state-icon { width: 58px; height: 58px; margin-bottom: 16px; display: grid; place-items: center; color: var(--muted); background: var(--surface-soft); border-radius: 18px; font-size: 1.2rem; font-weight: 900; }.wa-state-icon svg { width: 27px; height: 27px; }.wa-state-icon.primary { color: var(--primary); background: var(--primary-soft); }.wa-state-icon.success { color: var(--success); background: var(--success-soft); }.wa-state-icon.warning { color: var(--warning); background: var(--warning-soft); }.wa-state-icon.danger { color: var(--danger); background: var(--danger-soft); }.wa-state-copy { width: 100%; }.wa-state-kicker { color: var(--primary); font-size: .65rem; font-weight: 800; }.wa-state h2 { margin: 3px 0 6px; font-size: 1.16rem; }.wa-state p { margin: 0 auto; max-width: 430px; color: var(--muted); font-size: .74rem; }.wa-account { margin: 20px auto 14px; padding: 11px 13px; display: inline-flex; align-items: center; gap: 10px; color: var(--text); background: var(--surface-soft); border-radius: 12px; text-align: right; }.wa-account > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--success); background: var(--success-soft); border-radius: 11px; }.wa-account > span svg { width: 19px; }.wa-account > div { display: grid; }.wa-account strong { font-size: .76rem; }.wa-account small { color: var(--muted); font-size: .65rem; }.wa-qr { margin: 18px auto 0; display: grid; place-items: center; }.wa-qr img { width: min(100%,260px); padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }.wa-qr small { margin-top: 7px; color: var(--muted); font-size: .62rem; }.wa-help h2 { margin: 0 0 12px; font-size: .92rem; }.wa-help ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 10px; color: var(--text); font-size: .73rem; }.wa-help p { margin: 18px 0 0; padding-top: 13px; color: var(--muted); border-top: 1px solid var(--border); font-size: .67rem; }.pulse { animation: v2-pulse 1.6s ease-in-out infinite; }@keyframes v2-pulse { 50% { transform: scale(.94); opacity: .72; } }
.receipt-paper .receipt-paper-title { color: #173279; background: #f2f5fc; border: 1px solid #cbd5e5; }
.v2-tabs { display: flex; gap: 3px !important; overflow-x: auto; border-bottom: 1px solid var(--border); }
.v2-tab-btn { min-height: 40px; padding: 0 13px !important; border: 0 !important; border-bottom: 2px solid transparent !important; color: var(--muted) !important; background: transparent !important; font-size: .75rem; font-weight: 700 !important; white-space: nowrap; cursor: pointer; }
.v2-tab-btn.active { color: var(--primary) !important; border-bottom-color: var(--primary) !important; }
.v2-tab-panel { display: none !important; }.v2-tab-panel.active { display: block !important; }

/* Dialogs */
dialog.dialog { width: min(94vw,570px); max-height: min(90vh,760px); padding: 0; overflow: hidden; color: var(--text); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
dialog.dialog::backdrop { background: rgba(13,20,36,.55); backdrop-filter: blur(3px); }
dialog.dialog > form, .confirm-content { max-height: inherit; padding: 0 var(--space-5) var(--space-5); overflow-y: auto; display: grid; gap: var(--space-4); }
.dialog-head { margin: 0 calc(var(--space-5) * -1); padding: 17px var(--space-5); position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--surface-raised); border-bottom: 1px solid var(--border); }
.dialog-head h2 { margin: 0; font-size: 1.02rem; }.dialog-head p { margin: 3px 0 0; color: var(--muted); font-size: .69rem; }
.dialog-actions { margin-top: 4px; padding-top: var(--space-4); display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); }
.choice-grid, .payment-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.choice-grid label, .payment-choices label { min-height: 43px; padding: 8px; position: relative; display: grid; place-items: center; text-align: center; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; overflow: hidden; }
.choice-grid input, .payment-choices input { width: 100%; height: 100%; margin: 0; position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice-grid label:has(input:checked), .payment-choices label:has(input:checked) { color: var(--primary); background: var(--primary-soft); border-color: var(--primary); }
.choice-grid label:has(input:focus-visible), .payment-choices label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.renew-section { padding: 13px; display: grid; gap: 10px; background: var(--surface-soft); border-radius: var(--radius-md); }
.section-title { display: flex; align-items: center; gap: 8px; }.section-title h3 { margin: 0; font-size: .8rem; }.section-title p { margin: 2px 0 0; color: var(--muted); font-size: .64rem; }
.renew-person { min-width: 0; flex: 1; }.renew-person > h2 { margin-top: 4px; overflow-wrap: anywhere; }
.renew-copy-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.renew-copy-row .username-inline { min-height: 40px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; }
.renew-copy-btn { min-height: 40px; padding: 5px 12px 5px 7px; display: inline-flex; align-items: center; gap: 9px; color: var(--primary); background: var(--surface); border: 1px solid color-mix(in srgb,var(--primary) 28%,var(--border)); border-radius: 10px; box-shadow: 0 4px 12px rgba(49,94,251,.08); font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; transition: border-color .15s,background .15s,transform .15s,box-shadow .15s; }
.renew-copy-btn:hover { background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 6px 16px rgba(49,94,251,.13); transform: translateY(-1px); }
.renew-copy-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--primary); border-radius: 8px; }.renew-copy-icon .icon { width: 14px; height: 14px; }.renew-copy-label { white-space: nowrap; }
.renew-date-result, .financial-preview, .amount-hero, .payment-remaining { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 10px; background: var(--primary-soft); }
.financial-preview.unpaid { color: var(--warning); background: var(--warning-soft); }.financial-preview.paid { color: var(--success); background: var(--success-soft); }
.amount-hero { display: grid; text-align: center; }.amount-hero strong { font-size: 1.45rem; }
.quick-amounts { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.quick-amounts button { min-height: 36px; border: 1px solid var(--border); border-radius: 8px; color: var(--primary); background: var(--surface-soft); cursor: pointer; }
.confirm-content { padding-top: var(--space-5); place-items: center; text-align: center; }.confirm-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--danger); background: var(--danger-soft); border-radius: 14px; font-weight: 900; }.confirm-content h2, .confirm-content p { margin: 0; }.confirm-content p { color: var(--muted); font-size: .78rem; }
.renew-receipt-dialog { width: min(94vw,420px) !important; }.renew-receipt-content { padding: 26px; display: grid; justify-items: center; gap: 10px; text-align: center; }.renew-receipt-icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 16px; }.renew-receipt-icon .icon { width: 25px; height: 25px; }.renew-receipt-content h2 { margin: 3px 0 0; font-size: 1.08rem; }.renew-receipt-content p { margin: 0; color: var(--muted); font-size: .78rem; }.renew-receipt-actions { width: 100%; margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.renew-receipt-actions .v2-btn { width: 100%; }

/* Legacy-page classes now rendered inside V2 */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: var(--space-4); }
.plan-card { display: grid; gap: 13px; }.plan-card.disabled { opacity: .7; }.plan-card > header { display: flex; align-items: center; gap: 12px; }.plan-card > header .grow { display: grid; gap: 5px; }.plan-logo { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb,var(--plan-color) 13%,var(--surface)); }.plan-logo .icon { color: var(--plan-color); }.plan-price { display: grid; }.plan-price small { color: var(--muted); font-size: .63rem; }.plan-price strong { font-size: 1.2rem; }.plan-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.plan-card dl > div { padding: 9px; display: grid; background: var(--surface-soft); border-radius: 8px; }.plan-card dt { color: var(--muted); font-size: .61rem; }.plan-card dd { margin: 2px 0 0; font-size: .72rem; font-weight: 700; }.plan-card > p { min-height: 40px; margin: 0; color: var(--muted); font-size: .68rem; }.plan-card footer { display: flex; gap: 8px; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }.settings-grid + .security-panel { margin-top: var(--space-4); display: flex; align-items: center; gap: 12px; }.settings-grid .security-panel { grid-column: span 2; }.section-icon, .backup-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: var(--primary); background: var(--primary-soft); border-radius: 11px; }.info-box { padding: 12px; color: var(--muted); background: var(--surface-soft); border-radius: 9px; font-size: .72rem; }.backup-list, .activity-list, .admin-payment-list { display: grid; }.backup-list article, .activity-list article, .admin-payment-list article { min-height: 54px; padding: 10px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }.backup-list article:last-child, .activity-list article:last-child, .admin-payment-list article:last-child { border: 0; }.backup-list article > div, .activity-list article > div, .admin-payment-list article > div { min-width: 0; flex: 1; display: grid; }.backup-list b, .activity-list b { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }.backup-list small, .activity-list small, .admin-payment-list small { color: var(--muted); font-size: .65rem; }.activity-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 10px; }.activity-icon .icon { width: 16px; }
.super-admin-page { display: grid; gap: var(--space-4); }.super-stats, .debt-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }.admin-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }.admin-shortcut { min-height: 140px; display: flex; align-items: center; gap: 14px; text-decoration: none; }.agent-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: end; }.agent-form .btn { align-self: end; }.agent-admin-actions, .agent-extend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }.agent-extend select { width: auto; min-width: 90px; margin: 0; }.admin-payment-history { margin-top: 8px; }.admin-payment-history summary { color: var(--primary); font-size: .7rem; cursor: pointer; }.admin-debt-note { max-width: 260px; color: var(--muted); font-size: .68rem; }

/* Toast */
.toast { margin-bottom: var(--space-4); padding: 11px 14px; display: flex; align-items: center; gap: 9px; color: var(--success); background: var(--success-soft); border: 1px solid color-mix(in srgb,var(--success) 24%,var(--border)); border-radius: var(--radius-sm); font-size: .77rem; font-weight: 700; transition: opacity .25s, transform .25s; }
.toast.warning { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb,var(--warning) 24%,var(--border)); }.toast.leaving { opacity: 0; transform: translateY(-6px); }

/* Login, expired access, and error */
.login-page, .expired-access-page, .error-page { min-height: 100vh; min-height: 100dvh; padding: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); display: grid; place-items: center; background: radial-gradient(circle at 80% 10%,var(--primary-soft),transparent 34%),var(--background); }

/* Turbo navigation + recoverable network state */
.turbo-progress-bar { height: 2px; background: var(--primary); box-shadow: 0 0 8px color-mix(in srgb,var(--primary) 50%,transparent); }
.network-error-banner { max-width: min(92vw,620px); min-height: 58px; padding: 10px 12px; position: fixed; inset: calc(12px + env(safe-area-inset-top)) 50% auto auto; z-index: 200; transform: translateX(50%); display: flex; align-items: center; gap: 10px; color: var(--danger); background: var(--surface); border: 1px solid color-mix(in srgb,var(--danger) 36%,var(--border)); border-radius: 13px; box-shadow: var(--shadow-lg); }
.network-error-banner > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--danger); border-radius: 9px; font-weight: 900; }
.network-error-banner > div { min-width: 0; flex: 1; display: grid; }.network-error-banner strong { font-size: .78rem; }.network-error-banner small { color: var(--muted); font-size: .68rem; }
.network-error-banner button { min-height: 34px; padding: 5px 9px; color: var(--danger); background: var(--danger-soft); border: 0; border-radius: 8px; cursor: pointer; font-weight: 700; }.network-error-banner [data-network-dismiss] { width: 30px; padding: 0; color: var(--muted); background: transparent; font-size: 1.25rem; }
.login-theme { position: fixed; inset: 20px auto auto 20px; }.login-theme .v2-theme-control, .login-theme .theme-control { padding: 8px; display: flex; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }.login-theme select { width: 90px; border: 0; background-color: transparent; }
.login-card, .expired-access-dialog, .error-card { width: min(100%,430px); padding: clamp(24px,5vw,40px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.login-brand { margin-bottom: 30px; display: flex; align-items: center; gap: 12px; }.brand-mark.large { width: 52px; height: 52px; }.login-brand h1 { margin: 0; font-size: 1rem; }.login-brand p, .login-intro p, .login-note { margin: 3px 0 0; color: var(--muted); font-size: .72rem; }.login-intro { margin-bottom: 22px; }.login-intro h2 { margin: 0; font-size: 1.55rem; }.login-note { margin: 20px 0 0; display: flex; align-items: center; justify-content: center; gap: 7px; }.secure-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.login-privacy-link { margin-top: 14px; display: block; color: var(--muted); font-size: .7rem; text-align: center; text-decoration: none; }.login-privacy-link:hover { color: var(--primary); }
.expired-access-dialog, .error-card { text-align: center; }.expired-access-icon { width: 56px; height: 56px; margin: 0 auto 15px; display: grid; place-items: center; color: var(--warning); background: var(--warning-soft); border-radius: 16px; }.expired-access-dialog h1, .error-card h1 { margin: 0 0 8px; font-size: 1.25rem; }.expired-access-dialog p, .error-card p { color: var(--muted); font-size: .78rem; }.expired-access-dialog .btn, .error-card .btn { margin-top: 8px; }

/* Push notification preferences */
.notification-settings-card { max-width: 780px; }.notification-settings-card .panel-head { margin: -20px -20px 6px; }.notification-settings-card .panel-head p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }.notification-toggle-list { display: grid; }.notification-toggle { min-height: 76px; padding: 12px 2px; display: grid; grid-template-columns: 40px minmax(0,1fr) 42px; align-items: center; gap: 11px; border-bottom: 1px solid var(--border); cursor: pointer; }.notification-toggle:last-child { border: 0; }.notification-toggle-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 11px; }.notification-toggle-icon .icon { width: 18px; }.notification-toggle > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }.notification-toggle strong { font-size: .78rem; }.notification-toggle small { color: var(--muted); font-size: .66rem; line-height: 1.55; }.notification-toggle input { width: 1px; height: 1px; position: absolute; opacity: 0; }.notification-toggle i { width: 42px; height: 24px; position: relative; border-radius: 999px; background: var(--border-strong); transition: background .18s; }.notification-toggle i::after { content: ''; width: 18px; height: 18px; position: absolute; inset: 3px auto 3px 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(16,24,40,.25); transition: transform .18s; }.notification-toggle input:checked + i { background: var(--primary); }.notification-toggle input:checked + i::after { transform: translateX(18px); }.notification-toggle input:focus-visible + i { outline: 3px solid color-mix(in srgb,var(--primary) 22%,transparent); outline-offset: 2px; }.notification-settings-actions { padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); }.notification-settings-actions > a { color: var(--primary); font-size: .7rem; font-weight: 700; text-decoration: none; }

/* Standalone privacy document */
.privacy-page { min-height: 100vh; margin: 0; color: var(--text); background: var(--background); }.privacy-topbar { min-height: 68px; padding: 10px max(20px,calc((100vw - 900px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: color-mix(in srgb,var(--surface) 96%,transparent); border-bottom: 1px solid var(--border); }.privacy-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }.privacy-brand span { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--primary); border-radius: 11px; font-size: .75rem; font-weight: 900; }.privacy-brand strong { font-size: .9rem; }.privacy-language { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; color: var(--primary); background: var(--primary-soft); border: 1px solid color-mix(in srgb,var(--primary) 20%,var(--border)); border-radius: 10px; font-size: .72rem; font-weight: 800; text-decoration: none; }.privacy-document { width: min(calc(100% - 32px),820px); margin: 34px auto; padding: clamp(22px,5vw,54px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }.privacy-heading { margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }.privacy-heading > span { color: var(--primary); font-size: .68rem; font-weight: 800; }.privacy-heading h1 { margin: 6px 0; font-size: clamp(1.7rem,4vw,2.35rem); }.privacy-heading p { margin: 0; color: var(--muted); font-size: .72rem; }.privacy-document section + section { margin-top: 24px; }.privacy-document h2 { margin: 0 0 8px; font-size: 1rem; }.privacy-document p, .privacy-document li { color: var(--muted); font-size: .78rem; line-height: 1.95; }.privacy-document p { margin: 0; }.privacy-document ul { margin: 0; padding-inline-start: 22px; }.privacy-document a { color: var(--primary); }.privacy-footer { width: min(calc(100% - 32px),820px); margin: 0 auto; padding: 0 0 34px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .7rem; }.privacy-footer a { color: var(--primary); text-decoration: none; }

/* Responsive */
@media (max-width: 1120px) {
  .operations-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-grid > .panel, .dashboard-grid > .span-wide { grid-column: span 6; }
  .v2-global-search { width: min(380px,36vw); }
  .finance-summary { grid-template-columns: repeat(2,1fr); }.finance-summary .finance-summary-primary { grid-column: span 2; }
}

@media (max-width: 767px) {
  :root { --topbar-height: 58px; --button-height: 40px; --input-height: 44px; }
  .v2-sidebar { display: none; }
  .v2-workspace { width: 100%; }
  .v2-topbar { height: calc(var(--topbar-height) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left)); gap: 9px; }
  .v2-menu-btn, .v2-mobile-search-btn { display: inline-grid; }
  .v2-menu-btn { order: -1; }
  .v2-topbar-title { min-width: 0; flex: 1; }.v2-topbar-title strong { overflow: hidden; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }.v2-topbar-title small { display: none; }
  .v2-global-search { width: auto; height: 44px; position: absolute; inset: 7px 56px 7px 56px; z-index: 4; display: none; background: var(--surface); }
  .v2-topbar.search-open .v2-global-search { display: flex; }.v2-topbar.search-open .v2-topbar-title { visibility: hidden; }
  .v2-theme-control, .v2-desktop-logout { display: none; }
  .notification-panel { position: fixed; width: calc(100vw - 24px); inset: calc(64px + env(safe-area-inset-top)) 12px auto; }
  .v2-main { padding: 16px calc(12px + env(safe-area-inset-right)) calc(var(--bottom-nav-height) + 24px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  .v2-main > .v2-mb-md.v2-flex:first-child, .page-heading { min-height: 60px; margin-bottom: 16px !important; align-items: center; }
  .v2-main > .v2-mb-md.v2-flex:first-child > div:first-child, .page-heading > div { min-width: 0; }.v2-h1, .page-heading h1 { font-size: 1.34rem; }.v2-main > .v2-mb-md.v2-flex:first-child p, .page-heading p { font-size: .7rem; }
  .v2-main > .v2-mb-md.v2-flex:first-child > .v2-flex { flex-wrap: wrap !important; }.v2-main > .v2-mb-md.v2-flex:first-child .v2-btn { padding-inline: 11px; }
  .v2-drawer-overlay { display: block; position: fixed; inset: 0; z-index: 70; opacity: 0; pointer-events: none; border: 0; background: rgba(5,20,17,.52); transition: opacity .2s; }
  .v2-drawer { width: min(86vw,330px); height: 100dvh; position: fixed; inset: 0 0 0 auto; z-index: 80; display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .24s ease; }
  .v2-drawer-open { overflow: hidden; }.v2-drawer-open .v2-drawer-overlay { opacity: 1; pointer-events: auto; }.v2-drawer-open .v2-drawer { transform: translateX(0); }
  .v2-drawer-head { min-height: calc(70px + env(safe-area-inset-top)); padding: calc(7px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 7px 7px; display: flex; align-items: center; border-bottom: 1px solid var(--border); }.v2-drawer-head .v2-brand { min-width: 0; min-height: 0; padding: 0; flex: 1; border: 0; }.v2-drawer-head .v2-brand-mark { width: 38px; height: 38px; }.v2-drawer-head .v2-brand-copy strong { max-width: 190px; }
  .v2-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 7px 10px 16px; }.v2-drawer .v2-nav-list a { min-height: 46px; font-size: .8rem; }
  .v2-drawer-logout { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }.v2-drawer-logout .v2-btn { width: 100%; }
  .v2-bottom-nav { height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); padding: 5px 5px env(safe-area-inset-bottom); position: fixed; inset: auto 0 0; z-index: 50; display: grid; grid-template-columns: repeat(5,1fr); background: color-mix(in srgb,var(--surface) 96%,transparent); border-top: 1px solid var(--border); box-shadow: 0 -8px 22px rgba(18,43,37,.06); backdrop-filter: blur(15px); }
  .v2-nav-item { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .62rem; font-weight: 700; text-decoration: none; }.v2-nav-item > span { width: 31px; height: 27px; display: grid; place-items: center; border-radius: 9px; }.v2-nav-item .icon { width: 19px; }.v2-nav-item.active { color: var(--primary); }.v2-nav-item.active > span { background: var(--primary-soft); }.v2-nav-add > span { color: #fff; background: var(--primary) !important; }
  .operations-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.operations-stats .stat-card:first-child { grid-column: span 2; }.stat-card { min-height: 82px; padding: 12px; gap: 9px; }.stat-icon { width: 34px; height: 34px; }.stat-card strong { font-size: 1.06rem; }.stat-card small { font-size: .6rem; }
  .cash-strip { grid-template-columns: 1fr; }.cash-strip > div { min-height: 64px; padding: 10px 13px; border: 0; border-bottom: 1px solid var(--border); }.cash-strip > div:last-child { border: 0; }.cash-icon { width: 34px; height: 34px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 12px; }.dashboard-grid > .panel, .dashboard-grid > .span-wide { grid-column: auto; }.dashboard-grid .panel { padding: 16px; }.dashboard-grid .panel-head { margin: -16px -16px 8px; padding: 13px 16px; }
  .v2-card, .panel { padding: 15px; border-radius: 12px; }.panel-head { margin: -15px -15px 9px; padding: 13px 15px; }
  .v2-list-surface { padding: 0; }
  .subscriber-table-wrap { display: none; }.subscriber-mobile-list { display: block; }
  .debt-table-wrap { display: none; }.debt-mobile-list { display: block; }
  .history-table-wrap { display: none; }.history-mobile-list { display: block; }
  .finance-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }.finance-summary .finance-summary-primary { grid-column: span 3; }.finance-summary > article, .finance-summary > a { min-height: 72px; padding: 10px 11px; }.finance-summary > * > strong { font-size: .88rem; }.finance-summary > * > small { font-size: .57rem; }
  .v2-filter-bar { padding: 9px; }.v2-filter-bar form { align-items: center; flex-wrap: wrap; }.v2-filter-search { min-width: 0; flex: 1; }.v2-filter-toggle { display: inline-flex; }.v2-filter-options { width: 100%; padding-top: 9px; display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; border-top: 1px solid var(--border); }.v2-filter-options.open { display: grid; }.v2-filter-options label { min-width: 0; }.v2-filter-options .v2-icon-btn { align-self: end; }
  .bulkbar.visible { max-height: 180px; flex-wrap: wrap; }.bulkbar > div { width: 100%; }.bulkbar select { min-width: 0; flex: 1; }
  .v2-grid-2, .v2-grid-3, .form-grid, .settings-grid, .agent-form { grid-template-columns: 1fr; }.span-2, .settings-grid .security-panel { grid-column: auto; }
  .compact-filter form { display: grid; grid-template-columns: 1fr 1fr; }.compact-filter .v2-btn { padding-inline: 10px; }
  .form-layout { grid-template-columns: 1fr; }.form-layout > aside { display: none; }.form-panel { padding: 17px; }
  .receipt-settings-layout { grid-template-columns: 1fr; }.receipt-preview { display: none; }
  .wa-layout { grid-template-columns: 1fr; }.wa-help { display: none; }.wa-connection-card { min-height: 330px; }.wa-state { padding: 16px 5px; }
  .plans-grid, .admin-shortcuts { grid-template-columns: 1fr; }.super-stats, .debt-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .super-admin-page .table-panel .table-scroll { overflow: visible; }.super-admin-page .data-table, .super-admin-page .data-table tbody, .super-admin-page .data-table tr, .super-admin-page .data-table td { display: block; width: 100%; }.super-admin-page .data-table thead { display: none; }.super-admin-page .data-table tbody { padding: 4px 0; }.super-admin-page .data-table tr { margin: 9px 0; padding: 5px 11px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; }.super-admin-page .data-table td { min-height: 36px; padding: 7px 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border) !important; text-align: left; }.super-admin-page .data-table td:last-child { display: block; border: 0 !important; }.super-admin-page .data-table td::before { color: var(--muted); font-size: .62rem; font-weight: 700; }.super-admin-page #agents td:nth-child(1)::before { content: 'الوكيل'; }.super-admin-page #agents td:nth-child(2)::before { content: 'المشتركون'; }.super-admin-page #agents td:nth-child(3)::before { content: 'الدين'; }.super-admin-page #agents td:nth-child(4)::before { content: 'ينتهي في'; }.super-admin-page #agents td:nth-child(5)::before { content: 'الحالة'; }.super-admin-page .agent-debts-table td:nth-child(1)::before { content: 'الوكيل'; }.super-admin-page .agent-debts-table td:nth-child(2)::before { content: 'الإجمالي'; }.super-admin-page .agent-debts-table td:nth-child(3)::before { content: 'المدفوع'; }.super-admin-page .agent-debts-table td:nth-child(4)::before { content: 'المتبقي'; }.super-admin-page .agent-debts-table td:nth-child(5)::before { content: 'التاريخ'; }.super-admin-page .agent-debts-table td:nth-child(6)::before { content: 'الحالة'; }.super-admin-page .agent-admin-actions { justify-content: flex-end; }
  .v2-table, .data-table { font-size: .7rem; }.v2-table th, .v2-table td, .data-table th, .data-table td { padding: 10px !important; }
  dialog.dialog { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); border-radius: 15px; }.dialog-head { padding: 14px 16px; }.dialog-head, dialog.dialog > form { --space-5: 16px; }
  .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .renew-copy-row { align-items: stretch; flex-direction: column; }.renew-copy-row .username-inline, .renew-copy-btn { width: 100%; justify-content: center; }.renew-copy-btn { min-height: 44px; }
  .notification-settings-card .panel-head { margin: -15px -15px 5px; }.notification-toggle { grid-template-columns: 36px minmax(0,1fr) 42px; gap: 9px; }.notification-toggle-icon { width: 34px; height: 34px; }.notification-settings-actions { align-items: stretch; flex-direction: column; }.notification-settings-actions .v2-btn { width: 100%; }.privacy-topbar { min-height: 62px; padding: 9px 16px; }.privacy-document { width: calc(100% - 20px); margin: 14px auto 24px; padding: 22px 18px; border-radius: 14px; }.privacy-heading { margin-bottom: 24px; }.privacy-document section + section { margin-top: 21px; }.privacy-footer { width: calc(100% - 28px); padding-bottom: 24px; }
}

@media (max-width: 430px) {
  .v2-main > .v2-mb-md.v2-flex:first-child { flex-wrap: wrap; }.v2-main > .v2-mb-md.v2-flex:first-child > .v2-flex { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.v2-main > .v2-mb-md.v2-flex:first-child > .v2-flex .v2-btn { width: 100%; min-width: 0; padding-inline: 8px; }
  .v2-card > form.v2-flex { display: grid; grid-template-columns: 1fr 1fr; }.v2-card > form.v2-flex > div:first-child { grid-column: 1/-1; }.v2-card > form.v2-flex > .v2-flex:last-child { grid-column: 1/-1; }
  .agent-form { grid-template-columns: 1fr; }.choice-grid, .payment-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .login-page { padding: 14px; }.login-card { padding: 24px 20px; }
  .v2-export-action { width: 40px; padding: 0; font-size: 0; }.v2-export-action .icon { width: 18px; }
  .subscriber-row-main { display: grid; gap: 4px; }.subscriber-row-meta { justify-content: flex-start; }
}

@media print {
  .v2-sidebar, .v2-topbar, .v2-bottom-nav, .v2-drawer, .v2-drawer-overlay { display: none !important; }
  .v2-main { max-width: none; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}