/* King FTTH — application-owned presentation styles. */

:root {
  --color-primary: #a855f7;
  --color-accent: #c084fc;
  --ftth-space-1:.35rem; --ftth-space-2:.65rem; --ftth-space-3:1rem; --ftth-space-4:1.25rem;
  --ftth-radius-sm:.75rem; --ftth-radius-md:1rem; --ftth-radius-lg:1.25rem;
  --ftth-shadow:0 8px 24px -18px rgba(2,6,23,.75);
  --ftth-text-muted:#b8c4d8; --ftth-border:rgba(148,163,184,.22);
}
:root[data-accent="blue"] { --color-primary:#3b82f6; --color-accent:#60a5fa; }
:root[data-accent="cyan"] { --color-primary:#06b6d4; --color-accent:#67e8f9; }
:root[data-accent="green"] { --color-primary:#10b981; --color-accent:#6ee7b7; }
:root[data-accent="orange"] { --color-primary:#f59e0b; --color-accent:#fcd34d; }
:root[data-accent="rose"] { --color-primary:#f43f5e; --color-accent:#fda4af; }
:root[data-accent="purple"] { --theme-rgb:168,85,247; }
:root[data-accent="blue"] { --theme-rgb:59,130,246; }
:root[data-accent="cyan"] { --theme-rgb:6,182,212; }
:root[data-accent="green"] { --theme-rgb:16,185,129; }
:root[data-accent="orange"] { --theme-rgb:245,158,11; }
:root[data-accent="rose"] { --theme-rgb:244,63,94; }
:root[data-accent] .loading-number::after,:root[data-accent] .loading-money::after { border-color:rgba(var(--theme-rgb),.25); border-top-color:var(--color-accent); }
:root[data-accent] .stat-card > div > div[style*="background"] { background:rgba(var(--theme-rgb),.28)!important; }
/* Dashboard statistic palette stays identical to the reference image, independent of the selected UI theme. */
.dashboard-stat-grid .stat-card[data-nav-filter="all"] { background:linear-gradient(135deg,#4338ca,#a855f7)!important; }
.dashboard-stat-grid .stat-card[data-nav-filter="active"] { background:linear-gradient(135deg,#10b981,#55dfb2)!important; }
.dashboard-stat-grid .stat-card[data-nav-filter="expired"] { background:linear-gradient(135deg,#ef4444,#fb8a82)!important; }
.dashboard-stat-grid .stat-card[data-nav-filter="suspended"] { background:linear-gradient(135deg,#f97316,#fbbf24)!important; }
.dashboard-secondary-stat-grid .stat-card[data-nav-filter="online"] { background:linear-gradient(135deg,#4668c9,#4ec4e7)!important; }
.dashboard-secondary-stat-grid .stat-card[data-nav-filter="expiring"] { background:linear-gradient(135deg,#f97316,#ffd06e)!important; }
.dashboard-secondary-stat-grid .stat-card[data-nav-filter="offline"] { background:linear-gradient(135deg,#334155,#475569)!important; }
.dashboard-secondary-stat-grid .stat-card[data-nav-filter="debt"] { background:linear-gradient(135deg,#b45309,#fbbf24)!important; }
.dashboard-secondary-stat-grid .stat-card.debt-total-card { background:linear-gradient(135deg,#ec1870,#f65aa8)!important; }
.dashboard-stat-grid .stat-card > div > div[style*="background"],.dashboard-secondary-stat-grid .stat-card > div > div[style*="background"] { background:rgba(255,255,255,.18)!important; }
:root[data-accent] .appearance-title-icon,:root[data-accent] .appearance-accent.active,:root[data-accent] .appearance-surface.active { color:var(--color-accent); }
:root[data-accent] .btn-gradient,:root[data-accent] #dashGoAddBtn,:root[data-accent] #subHeaderAddBtn { box-shadow:0 8px 22px -8px var(--primary)!important; }
:root[data-surface="solid"] .card-glass,:root[data-surface="solid"] .subscriber-card,:root[data-surface="solid"] .detail-section,:root[data-surface="solid"] .detail-hero { background:linear-gradient(135deg,rgba(30,41,78,.96),rgba(23,37,84,.92)); border-color:color-mix(in srgb,var(--color-primary) 35%,transparent); }
:root[data-surface="midnight"] .card-glass,:root[data-surface="midnight"] .subscriber-card,:root[data-surface="midnight"] .detail-section,:root[data-surface="midnight"] .detail-hero { background:rgba(7,14,31,.94); border-color:rgba(148,163,184,.2); }

/* Live-data loading: intentional placeholders instead of misleading zeroes. */
.skeleton-card { overflow: hidden; pointer-events: none; }
.skeleton-line, .skeleton-circle {
  display: block;
  background: linear-gradient(90deg, rgba(148,163,184,.10), rgba(226,232,240,.23), rgba(148,163,184,.10));
  background-size: 220% 100%;
  animation: ftth-skeleton-shimmer 1.25s ease-in-out infinite;
}
.skeleton-line { height: .68rem; border-radius: 999px; }
.skeleton-circle { width: 3rem; height: 3rem; border-radius: .8rem; flex: 0 0 auto; }
@keyframes ftth-skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }
#headerRefreshBtn.is-refreshing svg { animation: ftth-refresh-spin .8s linear infinite; }
@keyframes ftth-refresh-spin { to { transform: rotate(360deg); } }
html[data-mode="light"] .skeleton-line, html[data-mode="light"] .skeleton-circle { background: linear-gradient(90deg, rgba(71,85,105,.08), rgba(71,85,105,.18), rgba(71,85,105,.08)); background-size: 220% 100%; }
.loading-number { position:relative; min-width:2.1rem; min-height:1.65rem; color:transparent !important; user-select:none; }
.loading-number::after { content:""; position:absolute; inset:50% auto auto 0; width:1.15rem; height:1.15rem; border:.16rem solid rgba(255,255,255,.22); border-top-color:#fff; border-radius:50%; transform:translateY(-50%); animation:ftth-number-spinner .7s linear infinite; }
@keyframes ftth-number-spinner { to { transform:translateY(-50%) rotate(360deg); } }
html[data-mode="light"] .loading-number::after { border-color:rgba(51,65,85,.18); border-top-color:#475569; }
.loading-money { position:relative; display:inline-block; min-width:2rem; min-height:1.5rem; color:transparent !important; user-select:none; }
.loading-money::after { content:""; position:absolute; inset:50% auto auto 0; width:1rem; height:1rem; border:.15rem solid rgba(255,255,255,.22); border-top-color:#fff; border-radius:50%; transform:translateY(-50%); animation:ftth-number-spinner .7s linear infinite; }
html[data-mode="light"] .loading-money::after { border-color:rgba(51,65,85,.18); border-top-color:#475569; }

/* King SAS-style operation confirmation: a visible status, progress rail and button spinner. */
.king-ftth-toast { display:flex; align-items:center; gap:.8rem; width:min(92vw,28rem); min-height:5.25rem; overflow:hidden; padding:.85rem 1rem 1.15rem; border:2px solid rgba(255,255,255,.25); border-radius:1.35rem; background:radial-gradient(circle at 8% 50%,rgba(168,85,247,.17),transparent 30%),linear-gradient(115deg,#10233a,#07121f 72%); box-shadow:0 22px 52px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.14); color:#fff; }
.king-ftth-toast { position:fixed; z-index:100002; top:calc(env(safe-area-inset-top,0px) + 1rem); left:50%; opacity:0; pointer-events:none; transform:translate(-50%,-1rem); transition:opacity .28s ease,transform .28s ease; }
.king-ftth-toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:700px) { .king-ftth-toast { top:calc(env(safe-area-inset-top,0px) + 4.2rem); } }
.king-ftth-toast.success { border-color:#6ee7b7; }
.king-ftth-toast.error { border-color:#fda4af; }
.king-ftth-toast.warning { border-color:#fcd34d; }
.king-ftth-toast-icon { display:grid; place-items:center; flex:0 0 auto; width:2.8rem; height:2.8rem; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),#2c9c70); box-shadow:0 0 0 7px rgba(50,220,150,.12),0 0 24px rgba(50,220,150,.3); color:#fff; font:900 2rem/1 Arial,sans-serif; }
.king-ftth-toast-icon.error { background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),#be4050); box-shadow:0 0 0 7px rgba(255,92,104,.12),0 0 24px rgba(255,92,104,.3); }
.king-ftth-toast-icon.warning { background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),#b7791f); box-shadow:0 0 0 7px rgba(251,191,36,.12),0 0 24px rgba(251,191,36,.24); font-size:1.15rem; }
.king-ftth-toast-icon.info { background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.25),#6d46cf); font-size:1.35rem; }
.king-ftth-toast-copy { min-width:0; display:flex; flex:1; flex-direction:column; gap:.17rem; }
.king-ftth-toast-copy b { overflow:hidden; color:#fff; font-size:.88rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.king-ftth-toast-copy small { color:#cbd5e1; font-size:.68rem; font-weight:700; }
.king-ftth-toast-progress { position:absolute; right:1rem; bottom:.55rem; left:1rem; height:.25rem; border-radius:999px; background:#b695ff; transform-origin:right; animation:ftth-toast-progress 3.2s linear forwards; }
.king-ftth-toast-progress.success { background:#32dc96; }.king-ftth-toast-progress.error { background:#ff5c68; }
.king-ftth-toast-progress.warning { background:#fbbf24; }
@keyframes ftth-toast-progress { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.action-spinner { width:1rem; height:1rem; border:.15rem solid rgba(255,255,255,.32); border-top-color:#fff; border-radius:50%; animation:ftth-action-spin .65s linear infinite; }
button.is-busy { pointer-events:none; filter:saturate(.6); }
@keyframes ftth-action-spin { to { transform:rotate(360deg); } }

/* Subscriber list: distinct cards and calm hierarchy; data/behaviour remain unchanged. */
.subscribers-list { display:flex; flex-direction:column; gap:.9rem; }
.subscribers-list > .subscriber-card { margin-block:0 !important; }
.subscriber-card { width:100%; min-width:0; padding:1.1rem 1.15rem; border:1px solid rgba(139,92,246,.34); border-radius:1.15rem; background:linear-gradient(135deg,rgba(20,25,53,.88),rgba(15,21,42,.82)); box-shadow:0 12px 26px -21px rgba(96,165,250,.65), inset 0 1px rgba(255,255,255,.04); }
.subscriber-card:hover { border-color:rgba(129,140,248,.54); box-shadow:0 16px 31px -22px rgba(129,140,248,.7); }
.dashboard-alert-panel-icon { display:grid; width:2rem; height:2rem; place-items:center; border:1px solid rgba(251,113,133,.3); border-radius:.7rem; color:#fda4af; background:rgba(190,24,93,.15); }
.dashboard-alert-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; padding:.75rem; }
.dashboard-alert-row { display:flex; min-width:0; align-items:center; gap:.55rem; padding:.65rem .7rem; border:1px solid rgba(255,255,255,.08); border-radius:.8rem; color:#fff; background:rgba(255,255,255,.035); text-align:right; transition:background .16s, border-color .16s; }
.dashboard-alert-row:hover { border-color:rgba(129,140,248,.38); background:rgba(255,255,255,.07); }
.dashboard-alert-row__dot { width:.5rem; height:.5rem; flex:0 0 auto; border-radius:50%; background:#60a5fa; box-shadow:0 0 8px currentColor; }
.dashboard-alert-row--critical .dashboard-alert-row__dot { color:#fb7185; background:#fb7185; }.dashboard-alert-row--warning .dashboard-alert-row__dot { color:#fbbf24; background:#fbbf24; }.dashboard-alert-row--info .dashboard-alert-row__dot { color:#60a5fa; background:#60a5fa; }
.dashboard-alert-row b,.dashboard-alert-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.dashboard-alert-row b { font-size:.7rem; }.dashboard-alert-row small { margin-top:.12rem; color:#94a3b8; font-size:.61rem; }.dashboard-alert-row__arrow { color:#94a3b8; }
.dashboard-alert-empty { padding:1.25rem; color:#86efac; font-size:.75rem; font-weight:800; text-align:center; }
@media (max-width:700px) { .dashboard-alert-list { grid-template-columns:minmax(0,1fr); } }
.subscriber-card-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:1rem; }
.subscriber-identity { display:flex; min-width:0; align-items:center; gap:.85rem; }
.subscriber-avatar { display:grid; flex:0 0 auto; place-items:center; width:3.1rem; height:3.1rem; border-radius:1rem; color:#fff; font-size:1rem; font-weight:900; box-shadow:0 11px 22px -13px rgba(0,0,0,.9); }
.subscriber-name { overflow:hidden; color:#f8fafc; font-size:.96rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.subscriber-subline { display:flex; flex-wrap:wrap; gap:.25rem .75rem; margin-top:.34rem; color:#94a3b8; font-size:.68rem; font-weight:700; }
.subscriber-subline span { display:inline-flex; align-items:center; min-width:0; gap:.28rem; overflow-wrap:anywhere; }
.subscriber-card-status { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.38rem; }
.connection-status { display:inline-flex; align-items:center; gap:.35rem; color:#f87171; font-size:.68rem; font-weight:850; white-space:nowrap; }
.connection-status-icon { position:relative; display:grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:50%; }
.connection-status.is-online { color:#67e8f9; }
.connection-status.is-online .connection-status-icon { background:rgba(34,211,238,.12); box-shadow:0 0 14px rgba(34,211,238,.32); }
.connection-status.is-online .connection-status-icon::after { position:absolute; inset:-.22rem; border:1px solid rgba(34,211,238,.42); border-radius:inherit; content:""; animation:connection-ring 1.8s ease-out infinite; }
.connection-status.is-offline .connection-status-icon { background:rgba(244,63,94,.1); }
@keyframes connection-ring { 0% { opacity:.75; transform:scale(.72); } 75%,100% { opacity:0; transform:scale(1.35); } }
.subscriber-card-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem .8rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid rgba(255,255,255,.08); }
.subscriber-card-meta > div { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:.6rem; }
.subscriber-card-meta span { display:inline-flex; flex:0 0 auto; align-items:center; gap:.28rem; color:#7f8da9; font-size:.65rem; font-weight:700; }
.subscriber-card-meta b { min-width:0; overflow:hidden; color:#dbeafe; font-size:.68rem; font-weight:800; overflow-wrap:anywhere; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.ont-signal-field { padding:.32rem .42rem; border:1px solid rgba(148,163,184,.16); border-radius:.65rem; background:rgba(15,23,42,.28); }
.ont-signal-field.is-good { border-color:rgba(52,211,153,.38); background:rgba(16,185,129,.12); }
.ont-signal-field.is-good b, .ont-signal-badge.is-good { color:#6ee7b7; }
.ont-signal-field.is-warning { border-color:rgba(251,191,36,.48); background:rgba(245,158,11,.14); }
.ont-signal-field.is-warning b, .ont-signal-badge.is-warning { color:#fcd34d; }
.ont-signal-field.is-critical { border-color:rgba(251,113,133,.5); background:rgba(225,29,72,.16); }
.ont-signal-field.is-critical b, .ont-signal-badge.is-critical { color:#fda4af; }
.ont-signal-field.is-unknown b, .ont-signal-badge.is-unknown { color:#94a3b8; }
.subscriber-expiry { padding-inline:.15rem; }
.subscriber-expiry small { color:#94a3b8; font-size:.61rem; font-weight:800; white-space:nowrap; }
.subscriber-expiry.is-warning small { color:#fbbf24; }
.subscriber-expiry.is-critical small { color:#fb7185; }
.subscriber-card-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid rgba(255,255,255,.08); }
.subscriber-quick-call { display:inline-flex; align-items:center; justify-content:center; gap:.28rem; width:2.35rem; height:2.35rem; padding:0; border:1px solid rgba(52,211,153,.5); border-radius:50%; color:#d1fae5; background:linear-gradient(145deg,#10b981,#059669); box-shadow:0 8px 18px -12px rgba(16,185,129,.9); font-size:.62rem; font-weight:850; }
.subscriber-quick-call span { display:none; }
.subscriber-quick-call.is-disabled { cursor:not-allowed; opacity:.48; }

/* Subscriber details: primary identity first, compact summaries, grouped actions. */
.detail-page-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem .2rem .85rem; }
.detail-back-btn { display:grid; place-items:center; width:2.45rem; height:2.45rem; border:1px solid rgba(255,255,255,.13); border-radius:.9rem; color:#fff; background:rgba(255,255,255,.08); }
.detail-hero { display:flex; align-items:center; gap:1rem; padding:1.2rem; border:1px solid rgba(139,92,246,.34); border-radius:1.35rem; background:linear-gradient(135deg,rgba(76,29,149,.16),rgba(15,23,42,.72)); box-shadow:0 16px 32px -22px rgba(0,0,0,.85); }
.detail-avatar { display:grid; flex:0 0 auto; place-items:center; width:4rem; height:4rem; border-radius:1.15rem; color:#fff; font-size:1.15rem; font-weight:900; box-shadow:0 14px 25px -12px rgba(0,0,0,.75); }
.detail-status { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .55rem; border:1px solid transparent; border-radius:999px; font-size:.66rem; font-weight:800; }
.detail-status i { width:.4rem; height:.4rem; border-radius:50%; background:currentColor; }
.detail-status-active { color:#6ee7b7; background:rgba(16,185,129,.14); border-color:rgba(52,211,153,.27); }.detail-status-expired { color:#fda4af; background:rgba(244,63,94,.14); border-color:rgba(251,113,133,.27); }.detail-status-suspended { color:#fcd34d; background:rgba(245,158,11,.14); border-color:rgba(251,191,36,.27); }.detail-status-unknown { color:#cbd5e1; background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.27); }
.detail-profile-status { margin-top:.55rem; }.detail-connection-status { font-size:.72rem; }.detail-profile-meta { display:flex; flex-wrap:wrap; gap:.35rem .85rem; margin-top:.7rem; color:#a5b4fc; font-size:.66rem; font-weight:750; }.detail-profile-meta span { display:inline-flex; align-items:center; gap:.3rem; min-width:0; overflow-wrap:anywhere; }
.detail-summary-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; }.detail-stat { min-height:5.8rem; padding:.9rem 1rem; border:1px solid rgba(148,163,184,.17); border-radius:1rem; background:rgba(255,255,255,.045); box-shadow:0 13px 28px -22px rgba(0,0,0,.75); }.detail-session-stat { border-color:rgba(34,211,238,.23); }.detail-days-stat.is-warning { border-color:rgba(251,191,36,.32); }.detail-days-stat.is-critical { border-color:rgba(251,113,133,.34); }.detail-stat p { color:#94a3b8; font-size:.67rem; font-weight:750; }.detail-stat b { display:block; margin-top:.3rem; overflow-wrap:anywhere; color:#f8fafc; font-size:.92rem; font-weight:900; }.detail-stat small { display:block; margin-top:.25rem; overflow:hidden; color:#8190ab; font-size:.6rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.detail-action-groups { display:grid; gap:.75rem; }.detail-action-group { padding:.8rem; border:1px solid rgba(255,255,255,.09); border-radius:1rem; background:rgba(255,255,255,.025); }.detail-action-group > p { margin-bottom:.55rem; color:#8492ad; font-size:.64rem; font-weight:850; }.detail-action-group > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }.detail-action { display:inline-flex; min-width:0; min-height:2.65rem; align-items:center; justify-content:center; gap:.45rem; padding:.55rem .7rem; border:1px solid transparent; border-radius:.8rem; color:#fff; font-size:.7rem; font-weight:850; }.detail-action-primary { background:rgba(124,58,237,.65); border-color:rgba(196,181,253,.25); }.detail-action-success { background:rgba(5,150,105,.7); border-color:rgba(110,231,183,.25); }.detail-action-call { background:rgba(37,99,235,.68); border-color:rgba(147,197,253,.25); }.detail-action-whatsapp { background:rgba(22,163,74,.68); border-color:rgba(134,239,172,.25); }.detail-action-connection { background:rgba(14,116,144,.65); border-color:rgba(103,232,249,.22); }.detail-action-danger { background:rgba(190,24,93,.54); border-color:rgba(253,164,175,.27); }.detail-action.muted { border-color:rgba(255,255,255,.1); color:#94a3b8; background:rgba(255,255,255,.05); }.detail-action-group-danger { border-color:rgba(251,113,133,.2); }
.detail-section { padding:0; border:1px solid rgba(255,255,255,.13); border-radius:1.05rem; background:rgba(255,255,255,.025); box-shadow:0 15px 32px -24px rgba(0,0,0,.78); overflow:hidden; }.detail-section summary { display:flex; align-items:center; gap:.55rem; min-height:3.4rem; padding:.85rem 1rem; cursor:pointer; color:#f8fafc; font-size:.82rem; font-weight:900; list-style:none; }.detail-section summary::-webkit-details-marker { display:none; }.detail-section summary::after { margin-right:auto; color:#94a3b8; content:'⌄'; transition:transform .2s ease; }.detail-section[open] summary::after { transform:rotate(180deg); }.detail-section-content { padding:0 1rem .35rem; }.detail-ont-button { display:inline-flex; align-items:center; gap:.28rem; margin-right:auto; padding:.38rem .55rem; border:1px solid rgba(34,211,238,.25); border-radius:.65rem; color:#a5f3fc; background:rgba(6,182,212,.1); font-size:.62rem; font-weight:850; }
.detail-data-list { border-top:1px solid rgba(255,255,255,.08); }.detail-data-line { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.65rem; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.07); }.detail-data-line:last-child { border-bottom:0; }.detail-data-line span { flex:0 0 auto; color:#94a3b8; font-size:.67rem; font-weight:750; }.detail-data-line b { min-width:0; max-width:66%; overflow-wrap:anywhere; color:#e2e8f0; font-size:.7rem; font-weight:850; text-align:left; }
html[data-mode="light"] .detail-back-btn { color:#172033; background:rgba(15,23,42,.06); border-color:rgba(15,23,42,.11); } html[data-mode="light"] .detail-section summary, html[data-mode="light"] .detail-data-line b, html[data-mode="light"] .subscriber-name { color:#172033; }
#subview-subscriber-detail { width:100%; max-width:68rem; margin-inline:auto; padding:0 .15rem 6.8rem; }
@media (min-width:701px) { .detail-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.detail-action-group > div { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1100px) { .detail-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .subscriber-card { padding:1rem; }.subscriber-card-header { grid-template-columns:minmax(0,1fr); }.subscriber-card-status { justify-content:flex-start; }.subscriber-card-meta { grid-template-columns:minmax(0,1fr); }.detail-hero { align-items:flex-start; }.detail-data-line { align-items:flex-start; }.detail-data-line b { max-width:62%; white-space:normal; }.detail-section summary { font-size:.76rem; }.detail-ont-button { margin-right:auto; } }

/* Subscriber reference refinements: avatar session indicator, debt and FTTH network check. */
.subscriber-avatar { position:relative; }
.avatar-connection-indicator { position:absolute; bottom:-.28rem; left:-.28rem; display:grid; place-items:center; width:1.35rem; height:1.35rem; border:1px solid rgba(34,211,238,.7); border-radius:50%; color:#67e8f9; background:#101a32; box-shadow:0 0 12px rgba(34,211,238,.45); }
.subscriber-avatar.is-online .avatar-connection-indicator::after { position:absolute; inset:-.2rem; border:1px solid rgba(34,211,238,.42); border-radius:inherit; content:""; animation:connection-ring 1.8s ease-out infinite; }
.subscriber-avatar.is-offline .avatar-connection-indicator { border-color:rgba(251,113,133,.6); color:#fb7185; box-shadow:0 0 9px rgba(251,113,133,.2); }
.subscriber-debt-badge,.detail-debt-badge { display:inline-flex; align-items:center; gap:.3rem; margin-top:.35rem; padding:.22rem .48rem; border:1px solid rgba(251,113,133,.35); border-radius:999px; color:#fecdd3; background:rgba(190,24,93,.17); font-size:.61rem; font-weight:850; }
.subscriber-quick-whatsapp { display:inline-grid; place-items:center; width:2rem; height:2rem; border:1px solid rgba(74,222,128,.32); border-radius:50%; color:#bbf7d0; background:rgba(22,163,74,.18); }
.ont-signal-badge { display:inline-flex; align-items:center; gap:.25rem; padding:.18rem .48rem; border:1px solid rgba(148,163,184,.2); border-radius:999px; background:rgba(15,23,42,.25); font-size:.63rem; font-weight:850; }
.network-check-btn { border:1px solid rgba(56,189,248,.28); color:#bae6fd; background:rgba(14,116,144,.19); }.subscriber-activate-btn { border:1px solid rgba(110,231,183,.3); background:rgba(5,150,105,.72); }.status-expired { border-color:rgba(251,113,133,.42); background:linear-gradient(135deg,rgba(69,10,10,.7),rgba(30,15,35,.9)); box-shadow:0 14px 28px -22px rgba(244,63,94,.75); }
.detail-debt-badge { margin-top:.52rem; }.detail-action-network { background:rgba(14,116,144,.65); border-color:rgba(103,232,249,.25); }
.detail-debt-stat { border-color:rgba(251,113,133,.32); background:rgba(159,18,57,.11); }.detail-debt-stat b { color:#fecdd3; }
.ont-check-result { display:grid; gap:.85rem; }.ont-check-status { display:flex; align-items:center; gap:.7rem; padding:.8rem; border:1px solid rgba(56,189,248,.26); border-radius:1rem; background:rgba(14,116,144,.12); color:#a5f3fc; }.ont-check-status.is-offline { border-color:rgba(251,113,133,.28); background:rgba(159,18,57,.12); color:#fecdd3; }.ont-check-status b,.ont-check-status span { display:block; }.ont-check-status b { font-size:.78rem; }.ont-check-status span { margin-top:.1rem; color:#94a3b8; font-size:.62rem; font-weight:700; }.ont-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }.ont-check-field { min-width:0; padding:.75rem; border:1px solid rgba(129,140,248,.2); border-radius:.85rem; background:rgba(15,23,42,.62); }.ont-check-field p { color:#8492ad; font-size:.61rem; font-weight:750; }.ont-check-field b { display:block; margin-top:.28rem; overflow-wrap:anywhere; color:#e0f2fe; font-size:.71rem; font-weight:850; }.ont-check-empty { padding:1rem; border:1px solid rgba(251,191,36,.22); border-radius:.9rem; color:#fde68a; background:rgba(245,158,11,.08); font-size:.72rem; font-weight:750; text-align:center; }
@media (min-width:800px) { .ont-check-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:380px) { .ont-check-grid { grid-template-columns:minmax(0,1fr); } }

/* Background & Body */
html, body {
  margin: 0;
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: #070d1e;
  font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  direction: rtl;
}

/* King FTTH boot screen with an animated optical-fiber loader. */
#initial-app-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 30%, rgba(0,119,255,.20), transparent 34%),
    radial-gradient(circle at 82% 26%, rgba(239,31,62,.13), transparent 31%),
    linear-gradient(160deg, #071932 0%, #050b18 52%, #02050c 100%);
  color: #fff;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
html[data-app-ready="true"] #initial-app-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  max-width: 320px;
  width: 90%;
}
.splash-logo-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.splash-logo-glow {
  position: absolute;
  inset: -12px;
  border-radius: 36px;
  background: radial-gradient(circle, rgba(0,174,255,.46) 0%, rgba(22,93,255,.24) 48%, rgba(239,31,62,.10) 62%, transparent 72%);
  filter: blur(10px);
  will-change: transform;
  animation: splash-glow 2.6s ease-in-out infinite alternate;
}
.splash-logo-img {
  width: 112px;
  height: 112px;
  border-radius: 24px;
  object-fit: cover;
  position: relative;
  z-index: 2;
  box-shadow: 0 16px 36px -8px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.35);
  border: 2px solid rgba(255,255,255,.15);
  will-change: transform;
  animation: splash-float 2.4s ease-in-out infinite alternate;
}
.splash-king {
  font-family: 'Cairo', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #ffffff 40%, #fef08a 70%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .25rem;
}
.splash-tagline {
  font-family: 'Cairo', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #c4b5fd;
  opacity: .92;
  letter-spacing: .2px;
}
.splash-fiber-loader { margin-top:1.05rem; width:min(100%,15rem); display:flex; flex-direction:column; align-items:center; gap:.18rem; }
.splash-fiber-svg { display:block; width:100%; height:auto; overflow:visible; }
.fiber-cable-shadow,.fiber-cable-body,.fiber-cable-core,.fiber-rays path { fill:none; stroke-linecap:round; }
.fiber-cable-shadow { stroke:#000814; stroke-width:25; opacity:.9; }
.fiber-cable-body { stroke:url(#fiberCableGrad); stroke-width:19; }
.fiber-cable-core { stroke:url(#fiberLightGrad); stroke-width:2.2; stroke-dasharray:8 14; filter:url(#fiberGlow); animation:fiber-core-flow 1.1s linear infinite; }
.fiber-connector rect { fill:#0d2748; stroke:#37d9ff; stroke-width:1.5; filter:url(#fiberGlow); }
.fiber-connector path { fill:none; stroke:#88eaff; stroke-width:1.4; opacity:.72; }
.fiber-rays path { stroke:url(#fiberLightGrad); stroke-width:2.15; stroke-dasharray:13 18; animation:fiber-light-flow 1.25s linear infinite; }
.fiber-rays path:nth-child(2) { animation-delay:-.18s; }
.fiber-rays path:nth-child(3) { animation-delay:-.38s; stroke-width:2.8; }
.fiber-rays path:nth-child(4) { animation-delay:-.58s; }
.fiber-rays path:nth-child(5) { animation-delay:-.78s; }
.fiber-points circle { fill:#fff; stroke:#39dcff; stroke-width:1.5; filter:url(#fiberGlow); animation:fiber-point-pulse .9s ease-in-out infinite alternate; }
.fiber-points circle:nth-child(even) { animation-delay:-.45s; }
.splash-fiber-loader > span { color:#8de9ff; font-size:.7rem; font-weight:800; letter-spacing:.02em; text-shadow:0 0 12px rgba(0,190,255,.55); }
@keyframes splash-glow { 0% { transform: scale(.92); opacity: .45; } 100% { transform: scale(1.15); opacity: .85; } }
@keyframes splash-float { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-6px) scale(1.02); } }
@keyframes fiber-core-flow { to { stroke-dashoffset:-44; } }
@keyframes fiber-light-flow { from { stroke-dashoffset:48; opacity:.38; } 45% { opacity:1; } to { stroke-dashoffset:-52; opacity:.68; } }
@keyframes fiber-point-pulse { from { opacity:.55; transform:scale(.76); transform-box:fill-box; transform-origin:center; } to { opacity:1; transform:scale(1.18); transform-box:fill-box; transform-origin:center; } }
@media (prefers-reduced-motion:reduce) {
  .fiber-cable-core,.fiber-rays path,.fiber-points circle { animation:none !important; }
}

/* Ambient Mesh Background */
.ambient-mesh-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4, 10, 28, .42), rgba(4, 8, 22, .72)),
    radial-gradient(circle at 50% 45%, rgba(20, 94, 190, .16), transparent 58%);
}
.ambient-mesh-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/king-ftth-background.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: clamp(430px, 74vw, 980px) auto;
  opacity: .22;
  filter: saturate(1.08) contrast(1.04);
  transform: translateZ(0);
}
.ambient-mesh-glow-1 {
  position: absolute;
  top: -10%;
  right: 15%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, rgba(123, 44, 191, 0.05) 50%, transparent 70%);
  filter: blur(50px);
}
.ambient-mesh-glow-2 {
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(99, 102, 241, 0.04) 50%, transparent 70%);
  filter: blur(50px);
}

html[data-mode="light"] .ambient-mesh-background {
  background: linear-gradient(180deg, rgba(241,245,251,.86), rgba(238,244,252,.94));
}
html[data-mode="light"] .ambient-mesh-background::before { opacity: .075; }

/* Decorative subscriber-filter backgrounds; cards and filtering remain untouched. */
#subview-subscribers { position: relative; isolation: isolate; }
#subview-subscribers > :not(.subscriber-theme-bg) { position: relative; z-index: 1; }
.subscriber-theme-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.subscriber-theme-layer { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 72% 38%, var(--theme-glow), transparent 58%); transition: opacity 300ms ease; }
.subscriber-theme-layer.is-visible { opacity: .7; }
.subscriber-theme-layer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,9,24,.22), rgba(4,9,24,.48)), url('/ftth-subscriber-theme.webp') center/cover no-repeat; filter: var(--theme-image-filter, none); }
.subscriber-theme-layer::after { content: ''; position: absolute; left: 7%; bottom: 13%; width: clamp(90px, 15vw, 210px); aspect-ratio: 1; opacity: .22; border: 5px solid currentColor; border-radius: 50%; box-shadow: 0 0 35px currentColor, inset 0 0 25px currentColor; }
.theme-all { --theme-glow: rgba(108,75,244,.32); color: #8b5cf6; }
.theme-active { --theme-glow: rgba(16,185,129,.36); --theme-image-filter: hue-rotate(105deg) saturate(1.1); color: #2dd4bf; }
.theme-online { --theme-glow: rgba(14,165,233,.42); --theme-image-filter: hue-rotate(22deg) saturate(1.15); color: #38bdf8; }
.theme-offline { --theme-glow: rgba(153,27,27,.38); --theme-image-filter: hue-rotate(125deg) saturate(.75); color: #f87171; }
.theme-expired { --theme-glow: rgba(190,24,93,.4); --theme-image-filter: hue-rotate(105deg) saturate(.92); color: #fb7185; }
.theme-suspended { --theme-glow: rgba(180,83,9,.4); --theme-image-filter: hue-rotate(165deg) saturate(.85); color: #f59e0b; }
.theme-debt { --theme-glow: rgba(159,18,57,.4); --theme-image-filter: hue-rotate(115deg) saturate(.83); color: #e11d48; }
.theme-active::after { border-radius: 50%; border-left-color: transparent; transform: rotate(-45deg); }
.theme-online::after { width: clamp(100px, 16vw, 220px); aspect-ratio: 1; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 88%, currentColor 0 7px, transparent 8px), radial-gradient(ellipse at 50% 90%, transparent 0 24%, currentColor 25% 28%, transparent 29% 48%, currentColor 49% 52%, transparent 53%); box-shadow: none; }
.theme-offline::after { border: 0; border-radius: 0; background: linear-gradient(135deg, transparent 46%, currentColor 47% 53%, transparent 54%), radial-gradient(ellipse at 50% 90%, transparent 0 24%, currentColor 25% 28%, transparent 29% 48%, currentColor 49% 52%, transparent 53%); box-shadow: none; }
.theme-expired::after { border-radius: 18%; background: linear-gradient(currentColor,currentColor) center 25%/55% 5px no-repeat, linear-gradient(currentColor,currentColor) center 55%/55% 5px no-repeat; }
.theme-suspended::after { border: 0; border-radius: 12%; background: linear-gradient(90deg, currentColor 0 26%, transparent 26% 74%, currentColor 74% 100%); box-shadow: 0 0 35px currentColor; }
.theme-debt::after { border-radius: 12%; background: repeating-linear-gradient(180deg, transparent 0 20%, currentColor 21% 24%, transparent 25% 33%); }
html[data-mode="light"] .subscriber-theme-layer::before { background-image: linear-gradient(180deg, rgba(241,245,251,.5), rgba(241,245,251,.7)), url('/ftth-subscriber-theme.webp'); }
html[data-mode="light"] .subscriber-theme-layer.is-visible { opacity: .3; }
@media (max-width: 640px) { .subscriber-theme-layer::before { background-size: auto 100%; background-position: left center; } .subscriber-theme-layer.is-visible { opacity: .65; } .subscriber-theme-layer::after { left: 5%; bottom: 18%; opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .subscriber-theme-layer { transition: none; } }

@media (max-width: 640px) {
  .ambient-mesh-background::before {
    background-position: center 42%;
    background-size: max(430px, 118vw) auto;
    opacity: .18;
  }
}

/* Access / Login Inputs (Matching King SAS) */
.access-input {
  width: 100%;
  background: color-mix(in oklch, white 10%, transparent);
  border: 1px solid color-mix(in oklch, white 18%, transparent);
  border-radius: 0.85rem;
  padding: 0.75rem 1rem;
  color: #f8fafc !important;
  caret-color: #f8fafc;
  -webkit-text-fill-color: #f8fafc;
  outline: none;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.access-input::placeholder { color: color-mix(in oklch, white 45%, transparent); }
.access-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.28);
}
.access-input[aria-invalid="true"] {
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(251,113,133,.18);
}

/* Animations */
@keyframes access-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes access-slide-up { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }

/* Subscriber Filter Rail */
.subscriber-filter-chip {
  cursor: pointer;
  user-select: none;
}
.subscriber-filter-chip.active {
  background: var(--grad-purple) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -11px rgba(168, 85, 247, 0.6), inset 0 1px rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.subscriber-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Subscriber Card Item (Matching King SAS user-card-item) */
.user-card-item {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 1.25rem;
  background: color-mix(in oklch, var(--card) 90%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.user-card-item:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.user-card-item.status-active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(6, 78, 59, 0.12));
  border-color: rgba(16, 185, 129, 0.28);
}
.user-card-item.status-expired {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(127, 29, 29, 0.14));
  border-color: rgba(239, 68, 68, 0.28);
}
.user-card-item.status-suspended {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(120, 53, 15, 0.14));
  border-color: rgba(245, 158, 11, 0.28);
}

/* Floating Bottom Navigation Bar (app-bottom-nav) */
.app-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  width: min(100%, 46rem);
  margin-inline: auto;
  padding: 0.5rem 1rem max(0.5rem, env(safe-area-inset-bottom, 0px)) 1rem;
  pointer-events: none;
}
.app-bottom-nav > * {
  pointer-events: auto;
}
.bottom-nav-item {
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--nav-inactive, rgba(255, 255, 255, 0.7));
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.bottom-nav-item.active {
  background: var(--grad-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -7px rgba(168, 85, 247, 0.8) !important;
}

/* Bottom Sheet Drawer Modal (King SAS Style) */
.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.25s ease;
}
.bottom-sheet-dialog {
  position: fixed;
  inset-x: 0;
  bottom: 0;
  z-index: 90;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: none;
  background: color-mix(in oklch, var(--card) 96%, black);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.7);
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.25rem 1.25rem calc(2.2rem + env(safe-area-inset-bottom, 0px));
  animation: sheet-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Plan Selection Cards */
.plan-select-card {
  cursor: pointer;
  border-radius: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.plan-select-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.plan-select-card.selected {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(123, 44, 191, 0.35));
  border-color: #c084fc;
  box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.4), 0 8px 24px -6px rgba(168, 85, 247, 0.6);
}

button:disabled { cursor:not-allowed; }

/* Dashboard layout: the shell already reserves the fixed right sidebar.
   A second workspace offset was the cause of the narrow, off-centre page. */
#subview-dashboard {
  direction: rtl;
  width: 100%;
  max-width: 1700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2vw, 2rem);
}
#subview-dashboard > * {
  width: 100%;
  margin-block: 0 !important;
}
.dashboard-stats-section,
.dashboard-stat-grid,
.dashboard-secondary-stat-grid {
  width: 100%;
}
.dashboard-stat-grid,
.dashboard-secondary-stat-grid {
  display: grid;
  /* King SAS keeps the compact two-column rhythm on phones. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.dashboard-stat-grid .stat-card,
.dashboard-secondary-stat-grid .stat-card {
  width: 100%;
  min-height: 9rem;
  height: 100%;
  padding: 1.1rem;
}
.dashboard-secondary-stat-grid {
  margin-top: 1.25rem !important;
}

/* Desktop Sidebar visibility */
@media (min-width: 1100px) {
  .desktop-app-shell {
    /* The only deliberate reservation for the fixed RTL sidebar. */
    padding-right: 17.5rem;
  }
  .desktop-sidebar {
    display: flex !important;
    right: 0;
    left: auto;
    width: 17.5rem;
  }
  .desktop-workspace {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.5rem, 3vw, 3rem) 3rem !important;
  }
  .desktop-workspace > header,
  .desktop-workspace > main {
    width: 100%;
    max-width: 1700px;
    margin-inline: auto;
  }
  .app-bottom-nav {
    display: none !important;
  }
}
@media (min-width: 701px) {
  .dashboard-stat-grid,
  .dashboard-secondary-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1201px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dashboard-secondary-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1099px) {
  .desktop-sidebar {
    display: none !important;
  }
  .desktop-workspace {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}
@media (max-width: 700px) {
  #subview-dashboard {
    gap: 1.5rem;
  }
  .dashboard-stat-grid,
  .dashboard-secondary-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
  .dashboard-stat-grid .stat-card,
  .dashboard-secondary-stat-grid .stat-card {
    min-height: 7.2rem;
    padding: .8rem;
  }
  .desktop-workspace {
    padding-inline: 1rem !important;
  }
}

/* Refined dashboard metric icon system. */
#view-app .stat-card .dashboard-mini-icon,
#view-app .stat-card > div > div[style*="background"],
#view-app .dashboard-stat-grid .stat-card .h-10,
#view-app .dashboard-secondary-stat-grid .stat-card .h-10 {
  position: relative;
  isolation: isolate;
  width: 2.8rem !important;
  height: 2.8rem !important;
  flex: 0 0 2.8rem !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -10px rgba(0,0,0,.8) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#view-app .stat-card .dashboard-mini-icon::before,
#view-app .stat-card > div > div[style*="background"]::before {
  content: '';
  position: absolute;
  inset: .28rem;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255,255,255,.07);
}
#view-app .stat-card .dashboard-mini-icon svg,
#view-app .stat-card > div > div[style*="background"] svg,
#view-app .dashboard-stat-grid .stat-card .h-10 svg,
#view-app .dashboard-secondary-stat-grid .stat-card .h-10 svg {
  width: 1.38rem !important;
  height: 1.38rem !important;
  stroke-width: 1.8 !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
#view-app .manager-balance-card .shrink-0.h-12 {
  position: relative;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.07)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px -12px rgba(0,0,0,.75) !important;
}
#view-app #icon-wallet-big svg { width: 1.35rem !important; height: 1.35rem !important; stroke-width: 1.8 !important; }

/* Smooth Scrollbars */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Scrollbar for list */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* FTTH optical receive power: real measurements; weaker means more negative. */
.ont-power { --signal:#6ee7b7; --signal-rgb:16,185,129; min-width:0; padding:.8rem .9rem; border:1px solid rgba(var(--signal-rgb),.32); border-radius:1rem; background:linear-gradient(120deg,rgba(var(--signal-rgb),.12),rgba(var(--signal-rgb),.035)); }
.ont-power.is-warning { --signal:#fcd34d; --signal-rgb:245,158,11; }
.ont-power.is-critical { --signal:#fda4af; --signal-rgb:244,63,94; }
.ont-power.is-unknown { --signal:#94a3b8; --signal-rgb:148,163,184; }
.subscriber-card-meta > .ont-power { display:block; grid-column:1 / -1; order:-1; }
.ont-power-heading,.ont-power-reading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.ont-power-heading > span,.subscriber-card-meta .ont-power-heading > span { color:var(--signal); font-size:.73rem; font-weight:800; }
.ont-power-heading small { opacity:.8; font-size:.6rem; margin-inline-start:.3rem; }
.ont-power-reading { margin-top:.5rem; }
.ont-power-reading > b,.subscriber-card-meta .ont-power-reading > b { color:var(--signal); font-size:1.45rem; font-weight:900; line-height:1.25; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.ont-power-reading > b small { font-size:.67rem; font-weight:700; letter-spacing:0; }
.ont-power-reading .ont-power-label,.subscriber-card-meta .ont-power-label { color:var(--signal); font-size:.65rem; border:1px solid rgba(var(--signal-rgb),.25); padding:.22rem .5rem; border-radius:999px; background:rgba(var(--signal-rgb),.07); }
.ont-power-heading .ont-power-bars { display:flex; height:1.35rem; align-items:flex-end; gap:3px; direction:ltr; }
.ont-power-bars i { display:block; width:5px; background:rgba(var(--signal-rgb),.17); border-radius:2px; height:25%; }
.ont-power-bars i:nth-child(2) { height:50%; }.ont-power-bars i:nth-child(3) { height:75%; }.ont-power-bars i:nth-child(4) { height:100%; }
.ont-power-bars i.lit { background:var(--signal); }
.detail-hero .ont-power { margin-top:1rem; max-width:30rem; }
.subscriber-name { font-size:1rem; line-height:1.7; white-space:normal; overflow-wrap:anywhere; }
.subscriber-subline { line-height:1.8; }
.subscriber-card-meta b { white-space:normal; overflow-wrap:anywhere; font-size:.75rem; }
.subscriber-card-meta > div:not(.ont-power) { align-items:flex-start; padding-block:.18rem; }
.subscriber-card-actions { flex-wrap:wrap; gap:.5rem; padding-top:.9rem; }
.subscriber-quick-call,.subscriber-quick-whatsapp { display:inline-flex; width:auto; min-width:2.75rem; height:2.75rem; padding:.55rem .8rem; gap:.4rem; border-radius:.85rem; align-items:center; justify-content:center; font-size:.73rem; font-weight:800; color:#fff; }
.subscriber-quick-call,.detail-action-call { background:linear-gradient(135deg,#2563eb,#0369a1); border:1px solid #60a5fa80; box-shadow:0 5px 12px -8px #3b82f6; }
.subscriber-quick-whatsapp,.detail-action-whatsapp { background:linear-gradient(135deg,#15803d,#047857); border:1px solid #6ee7b780; box-shadow:0 5px 12px -8px #10b981; }
.subscriber-quick-call,.subscriber-quick-whatsapp,.detail-action-call,.detail-action-whatsapp { width:2.75rem; height:2.75rem; padding:0; flex:0 0 2.75rem; border-radius:50%; }
.detail-action-group > div:has(.detail-action-call) { display:flex; flex-wrap:wrap; gap:.65rem; }
.subscriber-quick-call svg,.subscriber-quick-whatsapp svg,.detail-action-call svg,.detail-action-whatsapp svg { width:1.2rem; height:1.2rem; flex-shrink:0; }
.subscriber-quick-call.is-disabled { background:#334155; box-shadow:none; border-color:#64748b; }
.subscriber-quick-whatsapp.is-disabled { background:#334155; box-shadow:none; border-color:#64748b; opacity:.38; cursor:not-allowed; filter:grayscale(1); }
.detail-action { min-height:2.8rem; font-size:.78rem; }
.wallet-readonly-note { padding:1.3rem; border-radius:1.3rem; line-height:1.9; }
.appearance-settings{display:grid;gap:16px}.appearance-title{display:flex;align-items:center;gap:10px}.appearance-title-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--color-primary) 22%,transparent);color:var(--color-accent);font-size:21px}.appearance-title h2{font-size:16px;font-weight:900}.appearance-title p{margin-top:2px;color:#94a3b8;font-size:11px}.appearance-group{display:grid;gap:8px}.appearance-group h3{font-size:11px;font-weight:900;color:#cbd5e1}.appearance-options{display:flex;gap:8px;flex-wrap:wrap}.appearance-accent,.appearance-surface{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 10px;border:1px solid rgba(148,163,184,.2);border-radius:11px;background:rgba(255,255,255,.04);color:#dbeafe;font-size:11px;font-weight:800}.appearance-accent{flex:1 1 29%;}.appearance-accent i{width:13px;height:13px;border-radius:50%;background:var(--swatch);box-shadow:0 0 8px var(--swatch)}.appearance-accent[data-accent="purple"]{--swatch:#a855f7}.appearance-accent[data-accent="blue"]{--swatch:#3b82f6}.appearance-accent[data-accent="cyan"]{--swatch:#06b6d4}.appearance-accent[data-accent="green"]{--swatch:#10b981}.appearance-accent[data-accent="orange"]{--swatch:#f59e0b}.appearance-accent[data-accent="rose"]{--swatch:#f43f5e}.appearance-surface{flex:1 1 30%;flex-direction:column;gap:1px}.appearance-surface small{font-size:9px;font-weight:600;color:#94a3b8}.appearance-accent.active,.appearance-surface.active{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-primary) 30%,transparent)}
.appearance-title{width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:right;cursor:pointer}.appearance-title>span:nth-child(2){display:grid;gap:2px;flex:1}.appearance-title strong{font-size:16px;font-weight:900}.appearance-title small{color:#94a3b8;font-size:11px}.appearance-chevron{margin-inline-start:auto;color:var(--color-accent);font-size:20px;transition:transform .18s ease}.appearance-title.is-open .appearance-chevron{transform:rotate(180deg)}.appearance-panel{display:grid;gap:16px}
/* Shared FTTH design system and accessible interaction states. */
html,body{scroll-behavior:smooth} body{font-size:clamp(14px,1.2vw,16px)}
:is(.card-glass,.subscriber-card,.detail-section,.detail-hero,.detail-stat){border-radius:var(--ftth-radius-lg);box-shadow:var(--ftth-shadow)}
:is(.card-glass,.subscriber-card,.detail-section,.detail-hero,.detail-stat,.online-session-panel){border-color:var(--ftth-border)}
:is(.text-muted-foreground,.subscriber-subline,.subscriber-card-meta span,.detail-data-line span,.detail-stat p,.detail-stat small){color:var(--ftth-text-muted)}
:is(button,a[href],summary,[role="button"]):focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 22%,transparent)}
:is(.dashboard-alert-row,.online-session-tile,.ftth-ledger-card,.ftth-history-summary>div){box-shadow:none}
.dashboard-alert-row,.online-session-tile,.ftth-ledger-card{background:rgba(13,24,49,.72)}
@media(max-width:700px){body{overflow-x:hidden}.desktop-workspace{padding-inline:14px!important}.subview{padding-bottom:calc(5.8rem + env(safe-area-inset-bottom,0px))}.dashboard-stat-grid,.dashboard-secondary-stat-grid{gap:10px!important}.stat-card{min-width:0!important}.access-input{min-height:44px}.ftth-ledger-card{padding:12px}.ftth-history{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}}
@media(min-width:701px) and (max-width:1100px){.desktop-workspace{padding-inline:24px!important}.dashboard-stat-grid,.dashboard-secondary-stat-grid{gap:14px!important}}
@media(min-width:1200px){.desktop-workspace{padding-inline:32px!important}.dashboard-stat-grid,.dashboard-secondary-stat-grid{gap:18px!important}.subview{max-width:1700px;margin-inline:auto}}
@media(orientation:landscape) and (max-width:900px){.subview{padding-bottom:calc(4.8rem + env(safe-area-inset-bottom,0px))}.app-bottom-nav{padding-inline:10vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.appearance-chevron{transition:none!important}.ftth-skeleton-shimmer,.ftth-action-spin,.ftth-number-spinner{animation:none!important}}

/* Independent daylight palette — scoped to the logged-in FTTH workspace. */
html[data-mode="light"] {
  --background:#F6F8FC; --surface:#FFFFFF; --surface-elevated:#FFFFFF; --surface-muted:#EEF2F7;
  --text-primary:#172033; --text-secondary:#475569; --text-muted:#64748B; --text-disabled:#94A3B8;
  --border:#D7DEE9; --border-strong:#B8C3D1; --primary:#5B21B6; --primary-hover:#4C1D95; --primary-soft:#EDE9FE;
  --success:#047857; --success-soft:#D1FAE5; --warning:#B45309; --warning-soft:#FEF3C7;
  --danger:#B91C1C; --danger-soft:#FEE2E2; --info:#0369A1; --info-soft:#E0F2FE;
  --shadow-sm:0 2px 8px rgba(15,23,42,.08); --shadow-md:0 8px 24px rgba(15,23,42,.12);
}
html[data-mode="light"] #view-app { background:var(--background); color:var(--text-primary); }
html[data-mode="light"] #view-app .card-glass,
html[data-mode="light"] #view-app .subscriber-card,
html[data-mode="light"] #view-app .detail-hero,
html[data-mode="light"] #view-app .detail-section,
html[data-mode="light"] #view-app .detail-stat,
html[data-mode="light"] #view-app .detail-network-summary,
html[data-mode="light"] #view-app .detail-finance-card {
  background:var(--surface) !important; color:var(--text-primary) !important;
  border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important;
  backdrop-filter:none !important;
}
html[data-mode="light"] #view-app :is(h1,h2,h3,h4,.subscriber-name,.detail-data-line>b,.detail-stat>b,.detail-finance-head strong) { color:var(--text-primary) !important; }
html[data-mode="light"] #view-app :is(p,small,label,.text-muted-foreground,.subscriber-subline,.detail-profile-extras,.detail-data-line>span,.detail-stat>p,.detail-stat>small) { color:var(--text-secondary) !important; }
html[data-mode="light"] #view-app :is(input,select,textarea,.input-glass,.access-input) { background:var(--surface-muted) !important; color:var(--text-primary) !important; border-color:var(--border-strong) !important; }
html[data-mode="light"] #view-app :is(input,select,textarea)::placeholder { color:var(--text-muted) !important; }
html[data-mode="light"] #view-app .detail-data-line { border-color:var(--border) !important; }
html[data-mode="light"] #view-app .dashboard-alert-row,
html[data-mode="light"] #view-app .online-session-tile,
html[data-mode="light"] #view-app .ftth-ledger-card { background:var(--surface-muted) !important; border-color:var(--border) !important; }
html[data-mode="light"] #view-app .connection-status.is-online { color:var(--info) !important; }
html[data-mode="light"] #view-app .connection-status.is-offline { color:var(--danger) !important; }
html[data-mode="light"] #view-app .subscriber-compact-debt,
html[data-mode="light"] #view-app .detail-debt-badge { background:var(--danger-soft) !important; color:var(--danger) !important; border-color:#fecaca !important; }
html[data-mode="light"] #view-app .btn-gradient,
html[data-mode="light"] #view-app #dashGoAddBtn,
html[data-mode="light"] #view-app #subHeaderAddBtn { background:var(--primary) !important; color:#fff !important; }
html[data-mode="light"] #view-app .bottom-nav-item { color:var(--text-secondary); text-shadow:none; }
html[data-mode="light"] #view-app .bottom-nav-panel { background:rgba(255,255,255,.96) !important; border-color:var(--border) !important; }
html[data-mode="light"] #view-app #ftthAppHeader { background:var(--surface) !important; border-color:var(--border) !important; backdrop-filter:none !important; }
html[data-mode="light"] #view-app .desktop-sidebar { background:var(--surface) !important; border-color:var(--border) !important; }
html[data-mode="light"] #view-app .desktop-nav-item { color:var(--text-secondary) !important; text-shadow:none; }
html[data-mode="light"] #view-app .desktop-nav-item.active { color:#fff !important; }
html[data-mode="light"] #view-app #headerRefreshBtn,
html[data-mode="light"] #view-app #headerThemeBtn,
html[data-mode="light"] #view-app #headerLogoutBtn { background:var(--surface-muted) !important; border-color:var(--border) !important; color:var(--text-secondary) !important; }
html[data-mode="light"] .bottom-sheet-dialog { color:var(--text-primary); }

/* Modal/readability pass: opaque enough to keep the page behind it quiet. */
body.modal-open { overflow:hidden; }
.bottom-sheet-backdrop {
  background:rgba(2,6,23,.82) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  opacity:1;
  transition:opacity .2s ease-out;
}
.bottom-sheet-dialog {
  background:rgba(14,19,36,.92) !important;
  border-color:rgba(167,139,250,.2) !important;
  box-shadow:0 -18px 45px rgba(0,0,0,.52), 0 12px 34px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  animation:ftth-modal-in .2s ease-out both;
}
.bottom-sheet-dialog > .flex.items-center.justify-between {
  position:sticky; top:0; z-index:2; padding-top:.15rem;
  background:rgba(14,19,36,.96); 
}
#modalCloseBtn { width:2.75rem !important; height:2.75rem !important; border:1px solid var(--ftth-border-soft); background:rgba(255,255,255,.07); }
#modalCloseBtn:hover { background:rgba(167,139,250,.16); color:#fff; }
@keyframes ftth-modal-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
html[data-mode="light"] .bottom-sheet-dialog { background:rgba(255,255,255,.94) !important; }
html[data-mode="light"] .bottom-sheet-dialog > .flex.items-center.justify-between { background:rgba(255,255,255,.97); }
@media(max-width:700px) {
  .bottom-sheet-dialog { max-height:94dvh; padding:1rem 1rem calc(1.5rem + env(safe-area-inset-bottom,0px)); border-radius:1.35rem 1.35rem 0 0; }
  .bottom-sheet-dialog > .flex.items-center.justify-between { margin-bottom:.7rem; }
}
@media(prefers-reduced-motion:reduce) { .bottom-sheet-dialog { animation:none; } }

/* Staff responsibility and collection accounting */
.staff-team-summary{padding:1rem 1.1rem;border-radius:1.25rem;border:1px solid rgba(16,185,129,.28);background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(14,165,233,.1));display:grid;gap:.2rem}
.staff-work-hub-loading{padding:2rem;text-align:center;color:var(--text-muted);border:1px solid var(--ftth-border-soft);border-radius:1.25rem;background:rgba(255,255,255,.035)}
.staff-work-intro{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:1rem 1.1rem;border:1px solid rgba(34,211,238,.25);border-radius:1.3rem;background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(99,102,241,.12));box-shadow:0 18px 42px -28px rgba(34,211,238,.8)}.staff-work-intro:after{content:"";position:absolute;width:8rem;height:8rem;left:-3rem;top:-4rem;border-radius:50%;background:rgba(34,211,238,.12);filter:blur(14px)}.staff-work-intro-icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:1rem;color:#67e8f9;background:rgba(6,182,212,.15);border:1px solid rgba(34,211,238,.24)}.staff-work-intro div{display:grid}.staff-work-intro strong{font-size:.95rem;font-weight:950}.staff-work-intro small{font-size:.67rem;color:var(--text-muted)}.staff-work-intro>b{font-size:.72rem;color:#67e8f9;padding:.4rem .7rem;border-radius:2rem;background:rgba(6,182,212,.12)}
.staff-work-hub{display:grid;gap:.85rem}.staff-work-hub>button{position:relative;overflow:hidden;width:100%;min-height:8.3rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;text-align:right;padding:1.15rem;border:1px solid rgba(99,102,241,.28);border-radius:1.45rem;background:linear-gradient(135deg,rgba(30,58,138,.48),rgba(30,41,90,.78));box-shadow:0 18px 38px -28px rgba(56,189,248,.75);transition:transform .18s,border-color .18s,box-shadow .18s}.staff-work-hub>button:before{content:"";position:absolute;inset:auto -2rem -4rem auto;width:9rem;height:9rem;border-radius:50%;background:rgba(34,211,238,.08);filter:blur(10px)}.staff-work-hub>button:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.48);box-shadow:0 22px 45px -28px rgba(34,211,238,.95)}.staff-work-card-icon{display:grid;place-items:center;width:4rem;height:4rem;border-radius:1.25rem;color:#fff;box-shadow:0 12px 24px -14px currentColor}.staff-work-card-icon.directory{background:linear-gradient(135deg,#3b82f6,#8b5cf6)}.staff-work-card-icon.reports{background:linear-gradient(135deg,#06b6d4,#14b8a6)}.staff-work-hub>button div{display:grid;gap:.25rem;min-width:0}.staff-work-hub>button strong{font-size:1rem;font-weight:950}.staff-work-hub>button small{font-size:.7rem;line-height:1.7;color:#aab5ce}.staff-work-hub>button em{font-size:.67rem;font-style:normal;font-weight:800;color:#5eead4}.staff-work-hub>button i{font-style:normal;font-size:1.35rem;color:#94a3b8}.staff-section-back{justify-self:start;width:max-content;padding:.5rem .8rem;border-radius:.8rem;border:1px solid var(--ftth-border-soft);background:rgba(255,255,255,.045);color:var(--text-secondary);font-size:.68rem;font-weight:850}
.staff-team-summary span{font-size:.72rem;color:var(--text-secondary)}.staff-team-summary strong{font-size:1.45rem;color:#34d399}.staff-team-summary small{font-size:.68rem;color:var(--text-muted)}
.staff-row-meta{display:flex;gap:.55rem;align-items:center;margin-top:.35rem!important;font-size:.65rem!important}.staff-row-meta span{color:#38bdf8}.staff-row-meta b{color:#34d399}
.staff-visible-code{display:flex;align-items:center;gap:.4rem;margin-top:.3rem!important;font-size:.65rem!important}.staff-visible-code span{color:var(--text-muted)}.staff-visible-code b{padding:.18rem .45rem;border-radius:.5rem;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.2);color:#67e8f9;letter-spacing:.04em}
.staff-field-error{display:block;min-height:.9rem;margin-top:.28rem;color:#fb7185;font-size:.66rem;font-weight:800}.access-input.staff-input-invalid{border-color:#fb7185!important;box-shadow:0 0 0 3px rgba(244,63,94,.12)!important;background:rgba(244,63,94,.06)!important}
.staff-collection-list{display:grid;gap:.65rem}.staff-collection-list>button{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.7rem;text-align:right;padding:.9rem;border:1px solid var(--ftth-border-soft);border-radius:1rem;background:rgba(255,255,255,.04);transition:.18s}.staff-collection-list>button:hover{border-color:rgba(34,211,238,.4);transform:translateY(-1px)}.staff-collection-avatar{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:.85rem;background:linear-gradient(135deg,rgba(14,165,233,.25),rgba(139,92,246,.22))}.staff-collection-list div{display:grid;min-width:0}.staff-collection-list strong{font-size:.78rem}.staff-collection-list small{font-size:.63rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.staff-collection-list em{font-style:normal;font-size:.72rem;font-weight:900;color:#34d399}.staff-collection-list i{font-style:normal;color:var(--text-muted)}
.staff-assignment-box{border:1px solid var(--ftth-border-soft);border-radius:1rem;padding:.8rem;min-width:0}.staff-assignment-box legend{padding:0 .35rem;font-size:.75rem;font-weight:900}
.staff-assignment-head{display:flex;align-items:center;gap:.5rem}.staff-assignment-head input{width:100%;min-width:0;border:1px solid var(--ftth-border-soft);background:rgba(2,6,23,.34);border-radius:.75rem;padding:.7rem;color:inherit;font-size:.75rem}.staff-assignment-head span{white-space:nowrap;font-size:.68rem;color:#22d3ee;font-weight:800}
.staff-assignment-actions{display:flex;gap:.45rem;margin:.55rem 0}.staff-assignment-actions button{padding:.35rem .65rem;border:1px solid var(--ftth-border-soft);border-radius:.65rem;font-size:.65rem;font-weight:800;background:rgba(255,255,255,.05)}
.staff-subscriber-choices{max-height:15rem;overflow:auto;display:grid;gap:.35rem;padding-left:.2rem}.staff-subscriber-choices>label{display:flex;align-items:center;gap:.6rem;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.035);border-radius:.75rem;padding:.55rem .65rem;cursor:pointer}.staff-subscriber-choices>label:has(input:checked){border-color:rgba(34,211,238,.45);background:rgba(6,182,212,.1)}.staff-subscriber-choices label span{display:grid;min-width:0}.staff-subscriber-choices label b{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.staff-subscriber-choices label small{font-size:.62rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.staff-subscriber-choices>p,.staff-assignment-note{font-size:.65rem;color:var(--text-muted)}
.staff-report-dialog{width:min(100%,55rem)!important;max-height:94dvh!important}.staff-report-dialog #modalContent{overflow:auto;max-height:calc(94dvh - 6rem)}
.staff-report{display:grid;gap:1rem}.staff-report-identity{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-radius:1rem;background:rgba(255,255,255,.045);border:1px solid var(--ftth-border-soft)}.staff-report-identity h3{font-size:1.1rem;font-weight:950}.staff-report-identity p,.staff-report-identity small{font-size:.7rem;color:var(--text-muted)}.staff-report-identity>span{padding:.4rem .8rem;border-radius:2rem;font-size:.7rem;font-weight:900}.staff-report-identity .on{color:#34d399;background:rgba(16,185,129,.13)}.staff-report-identity .off{color:#fb7185;background:rgba(244,63,94,.13)}
.staff-report-range{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;align-items:end}.staff-report-range label{display:grid;gap:.25rem;font-size:.65rem;color:var(--text-muted)}.staff-report-range input,.staff-report-tools input{border:1px solid var(--ftth-border-soft);background:rgba(2,6,23,.3);border-radius:.75rem;padding:.65rem;color:inherit}.staff-report-range button,.staff-report-tools button{border:0;border-radius:.75rem;padding:.7rem 1rem;background:var(--grad-primary);color:white;font-size:.72rem;font-weight:900}
.staff-report-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.staff-report-stats>div{padding:.85rem;border-radius:1rem;background:rgba(255,255,255,.045);border:1px solid var(--ftth-border-soft);display:grid;gap:.18rem}.staff-report-stats .primary{grid-column:1/-1;background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(14,165,233,.14));border-color:rgba(16,185,129,.38)}.staff-report-stats small{font-size:.66rem;color:var(--text-secondary)}.staff-report-stats b{font-size:1.2rem;color:#5eead4}.staff-report-stats span{font-size:.62rem;color:var(--text-muted)}
.staff-report-tools{display:block}.staff-report-tools input{width:100%}.staff-report section h4{display:flex;justify-content:space-between;font-size:.85rem;font-weight:950;margin-bottom:.5rem}.staff-report section h4 span{color:#22d3ee;font-size:.7rem}.staff-report-list{display:grid;gap:.45rem}.staff-report-list article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;padding:.7rem;border-radius:.85rem;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.035)}.staff-op-icon{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:.75rem;font-weight:900}.staff-op-icon.pay{color:#34d399;background:rgba(16,185,129,.13)}.staff-op-icon.activate{color:#38bdf8;background:rgba(14,165,233,.13)}.staff-op-icon.charge{color:#fbbf24;background:rgba(245,158,11,.13)}.staff-report-list article>div{display:grid}.staff-report-list article b{font-size:.65rem;color:var(--text-muted)}.staff-report-list article strong{font-size:.75rem}.staff-report-list article small{font-size:.6rem;color:var(--text-muted)}.staff-report-list article em{font-style:normal;font-size:.72rem;font-weight:900;color:#5eead4}.staff-report-empty{padding:1.5rem;text-align:center;color:var(--text-muted);font-size:.75rem}
html[data-mode="light"] :is(.staff-assignment-head input,.staff-report-range input,.staff-report-tools input){background:#fff;color:#0f172a}html[data-mode="light"] :is(.staff-subscriber-choices>label,.staff-report-identity,.staff-report-stats>div,.staff-report-list article,.staff-audit-list p){background:rgba(255,255,255,.82)}
html[data-mode="light"] .staff-work-hub>button{background:linear-gradient(135deg,#eef6ff,#eef2ff);color:#17213a;border-color:#c7d2fe}html[data-mode="light"] .staff-work-hub>button small{color:#64748b}html[data-mode="light"] .staff-work-intro{background:linear-gradient(135deg,#ecfeff,#eef2ff);color:#17213a}
@media(min-width:760px){.staff-report-dialog{top:50%!important;bottom:auto!important;left:50%!important;transform:translate(-50%,-50%)!important;border-radius:1.5rem!important}.staff-report-dialog .staff-report-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.staff-report-dialog .staff-report-stats .primary{grid-column:1/-1}}
@media print{body>*{display:none!important}.bottom-sheet-dialog.staff-report-dialog{display:block!important;position:static!important;transform:none!important;width:100%!important;max-height:none!important;background:#fff!important;color:#111!important;border:0!important}.staff-report-dialog #modalContent{max-height:none!important;overflow:visible!important}.staff-report-tools,.staff-report-dialog>div:first-child{display:none!important}}
.wallet-readonly-note h2 { font-weight:800; font-size:.95rem; }.wallet-readonly-note p { color:#94a3b8; margin-top:.35rem; font-size:.82rem; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid #38bdf8; outline-offset:3px; }
button:disabled { cursor:not-allowed; }
/* Daylight surfaces and typography, preserving white text on saturated actions. */
html[data-mode="light"] body { color:#172554; background:#f1f5fb; }
html[data-mode="light"] :is(.subscriber-card,.detail-hero,.detail-section,.detail-stat,.detail-action-group,.card-glass,.bottom-sheet-dialog) { background:#fff; color:#172554; border-color:#d5def0; box-shadow:0 6px 22px -16px #47556955; }
html[data-mode="light"] .subscriber-card.status-expired { background:linear-gradient(120deg,#fff5f6,#fff); border-color:#fecdd3; }
html[data-mode="light"] :is(.subscriber-card-meta b,.detail-stat b,.ont-check-field b,.detail-section summary,.subscriber-name,.detail-data-line b) { color:#172554; }
html[data-mode="light"] #modalTitle { color:#172554; }
html[data-mode="light"] :is(.subscriber-subline,.subscriber-card-meta span,.detail-data-line span,.detail-stat p,.detail-stat small,.detail-profile-meta,.detail-action-group > p,.wallet-readonly-note p,.text-muted-foreground) { color:#52627a; }
html[data-mode="light"] :is(.subscriber-card-meta,.subscriber-card-actions,.detail-data-list,.detail-data-line) { border-color:#e2e8f0; }
html[data-mode="light"] :is(.connection-status.is-online,.ont-check-status.is-online) { color:#0369a1; }
html[data-mode="light"] .connection-status.is-offline { color:#be123c; }
html[data-mode="light"] :is(.subscriber-debt-badge,.detail-debt-badge,.detail-debt-stat b) { color:#be123c; background:#fff1f2; }
html[data-mode="light"] .ont-power { --signal:#047857; }
html[data-mode="light"] .ont-power.is-warning { --signal:#92400e; }
html[data-mode="light"] .ont-power.is-critical { --signal:#be123c; }
html[data-mode="light"] .ont-power.is-unknown { --signal:#52627a; }
html[data-mode="light"] :is(.ont-power-heading > span,.ont-power-reading > b,.ont-power-reading .ont-power-label) { color:var(--signal); }
html[data-mode="light"] :is(.access-input,#subscriberSearch) { color:#172554; background:#f8fafc; border-color:#cbd5e1; }
html[data-mode="light"] input::placeholder { color:#64748b; }
html[data-mode="light"] :is(.ont-check-field,.dashboard-alert-row,.dashboard-alert-empty) { background:#f8fafc; color:#334155; border-color:#d5def0; }
html[data-mode="light"] :is(.detail-action-primary,.detail-action-success,.detail-action-call,.detail-action-whatsapp,.detail-action-danger,.detail-action-connection) { color:#fff; }
html[data-mode="light"] .detail-action-primary { background:#6d28d9; }html[data-mode="light"] .detail-action-success { background:#047857; }html[data-mode="light"] .detail-action-danger { background:#be123c; }
html[data-mode="light"] .detail-action.muted { color:#64748b; background:#f1f5f9; border-color:#cbd5e1; }
html[data-mode="light"] .king-ftth-toast { background:#fff; color:#172554; box-shadow:0 12px 36px #33415525; }
html[data-mode="light"] .king-ftth-toast-copy b { color:#172554; }html[data-mode="light"] .king-ftth-toast-copy small { color:#475569; }
html[data-mode="light"] .bottom-nav-panel { background:rgba(255,255,255,.96) !important; border-color:#cbd5e1; }
html[data-mode="light"] .action-spinner { border-color:#94a3b850; border-top-color:#4f46e5; }
html[data-mode="light"] .desktop-nav-item { color:#475569; }
html[data-mode="light"] .desktop-nav-item.active { color:#5b21b6; background:#ede9fe; }
html[data-mode="light"] :is(.desktop-brand,header) [style*="text-fill-color"] { background:linear-gradient(135deg,#4338ca,#7c3aed) !important; -webkit-background-clip:text !important; background-clip:text !important; }
html[data-mode="light"] :is(.subscriber-card-status,.detail-hero) [class*="text-emerald-"],html[data-mode="light"] .detail-status-active { color:#047857; }
html[data-mode="light"] :is(.subscriber-card-status,.detail-hero) [class*="text-rose-"],html[data-mode="light"] .detail-status-expired { color:#be123c; }
html[data-mode="light"] :is(.subscriber-card-status,.detail-hero) [class*="text-amber-"],html[data-mode="light"] .detail-status-suspended { color:#92400e; }
.detail-action-connection { background:#0e7490; }
.detail-hero { align-items:flex-start; }
@media (max-width:700px) {
  .subscriber-card-meta { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem .9rem; }
  .subscriber-card-meta > div:not(.ont-power) { flex-direction:column; align-items:flex-start; gap:.15rem; }
  .subscriber-card-meta > div:not(.ont-power) b { text-align:start; max-width:100%; }
}
.manager-balance-card .loading-money::after { border-color:#ffffff50; border-top-color:#fff; }
@media (min-width:900px) { .subscriber-card-meta { grid-template-columns:repeat(3,minmax(0,1fr)); }.subscriber-card-meta > .ont-power { grid-column:auto; grid-row:span 2; }.detail-action-group > div { grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); } }
@media (max-width:430px) { .subscriber-card { padding:.95rem; }.subscriber-card-actions .sub-act-btn { min-height:2.75rem; }.detail-hero { gap:.8rem; }.detail-avatar { width:2.7rem; height:2.7rem; flex-shrink:0; }.subscriber-quick-call,.subscriber-quick-whatsapp { padding:.5rem .65rem; } }
@media (prefers-reduced-motion:reduce) { button,a.detail-action,a.subscriber-quick-call,a.subscriber-quick-whatsapp { transition:none; }.connection-status-icon::after,.avatar-connection-indicator::after { animation:none !important; } }

/* Real session information shown when the online-subscribers card is opened. */
.online-session-panel { margin-top:1rem; padding:.8rem; border:1px solid rgba(56,189,248,.18); border-radius:1rem; background:linear-gradient(135deg,rgba(15,23,42,.86),rgba(30,27,75,.56)); }
.online-session-heading { display:flex; align-items:center; gap:.45rem; color:#7dd3fc; font-size:.75rem; font-weight:850; margin-bottom:.7rem; }
.online-session-heading small { margin-inline-start:auto; color:#94a3b8; font-size:.62rem; font-weight:600; text-align:end; }
.online-session-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }
.online-session-tile { display:flex; min-width:0; align-items:center; gap:.55rem; padding:.7rem; border:1px solid rgba(148,163,184,.14); border-radius:.8rem; background:rgba(15,23,42,.62); }
.online-session-icon { display:grid; flex:0 0 2rem; width:2rem; height:2rem; place-items:center; border-radius:.7rem; font-size:1.1rem; font-weight:900; background:rgba(56,189,248,.12); color:#67e8f9; }
.online-session-tile.is-upload .online-session-icon { color:#a5b4fc; background:rgba(129,140,248,.15); }
.online-session-tile.is-duration .online-session-icon { color:#c4b5fd; background:rgba(167,139,250,.14); }
.online-session-tile.is-ip .online-session-icon { color:#86efac; background:rgba(74,222,128,.12); font-size:.68rem; }
.online-session-ip-link { cursor:pointer; text-decoration:none; border-color:rgba(74,222,128,.26); }
.online-session-ip-link:hover { border-color:rgba(74,222,128,.55); background:rgba(21,128,61,.12); box-shadow:0 0 0 1px rgba(74,222,128,.12); }
.online-session-ip-link .online-session-copy small { color:#86efac; }
html[data-mode="light"] .online-session-ip-link { border-color:#86efac; }
html[data-mode="light"] .online-session-ip-link .online-session-copy small { color:#15803d; }
.online-session-copy { display:flex; min-width:0; flex-direction:column; gap:.15rem; }
.online-session-copy small { color:#94a3b8; font-size:.62rem; font-weight:700; }
.online-session-copy b { color:#e0f2fe; font-size:.8rem; font-weight:850; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
html[data-mode="light"] .online-session-panel { background:linear-gradient(135deg,#eff6ff,#f5f3ff); border-color:#bfdbfe; }
html[data-mode="light"] .online-session-tile { background:#fff; border-color:#dbeafe; }
html[data-mode="light"] .online-session-heading { color:#0369a1; }
html[data-mode="light"] .online-session-copy b { color:#172554; }
html[data-mode="light"] :is(.online-session-copy small,.online-session-heading small) { color:#52627a; }
@media (max-width:1100px) { .online-session-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:430px) { .online-session-panel { padding:.65rem; }.online-session-tile { padding:.55rem; gap:.4rem; }.online-session-icon { flex-basis:1.75rem; width:1.75rem; height:1.75rem; }.online-session-heading { flex-wrap:wrap; }.online-session-heading small { width:100%; margin-inline-start:0; text-align:start; } }
@media (prefers-reduced-motion:reduce) { .king-ftth-toast, button:not(:disabled), a[href], .desktop-nav-item, .bottom-nav-item, .stat-card, .subscriber-filter-chip, .user-card-item, .plan-select-card, summary { transition:none; } }

/* One tactile system for real controls only. Pointer-down adds the pressed class
   immediately; :active also covers browsers before the pointer handler runs. */
:is(button:not(:disabled), a[href], a[data-view], [role="button"], summary,
  .stat-card[data-nav-filter], .user-card-item[data-id], .plan-select-card) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition-property: transform, filter, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
:is(button:not(:disabled), a[href], a[data-view], [role="button"], summary):is(:active, .ftth-pressed),
:is(.stat-card[data-nav-filter], .user-card-item[data-id], .plan-select-card).ftth-pressed {
  transform: translateY(2px) scale(.96) !important;
  filter: brightness(.94);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .2) !important;
  transition-duration: 85ms;
  transition-timing-function: ease-out;
}
@media (prefers-reduced-motion: reduce) {
  :is(button:not(:disabled), a[href], a[data-view], [role="button"], summary,
    .stat-card[data-nav-filter], .user-card-item[data-id], .plan-select-card) {
    transition-duration: 0ms !important;
  }
}

/* The account header belongs to the dashboard only. */
body:not(.ftth-dashboard-view) #ftthAppHeader { display:none !important; }

/* Visible, calm separators between subscriber cards. */
#subview-subscribers .subscribers-list > .subscriber-card { overflow:visible !important; }
#subview-subscribers .subscribers-list > .subscriber-card + .subscriber-card {
  margin-top:1.45rem !important;
}
#subview-subscribers .subscribers-list > .subscriber-card + .subscriber-card::before {
  content:'' !important;
  display:block !important;
  position:absolute !important;
  z-index:3;
  top:-.78rem !important;
  left:1.15rem !important;
  right:1.15rem !important;
  height:1px !important;
  border:0 !important;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(125,211,252,.12) 12%,rgba(125,211,252,.38) 50%,rgba(125,211,252,.12) 88%,transparent) !important;
  pointer-events:none;
}
#subview-subscribers .subscribers-list > .subscriber-card + .subscriber-card::after {
  content:'';
  position:absolute;
  z-index:4;
  top:-.9rem;
  left:50%;
  width:.28rem;
  height:.28rem;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 8px rgba(56,189,248,.7);
  transform:translateX(-50%);
  pointer-events:none;
}
html[data-mode="light"] #subview-subscribers .subscribers-list > .subscriber-card + .subscriber-card::before {
  background:linear-gradient(90deg,transparent,rgba(100,116,139,.08) 12%,rgba(100,116,139,.3) 50%,rgba(100,116,139,.08) 88%,transparent) !important;
}
html[data-mode="light"] #subview-subscribers .subscribers-list > .subscriber-card + .subscriber-card::after {
  background:#64748b;
  box-shadow:0 0 5px rgba(100,116,139,.35);
}

/* Fully functional appearance system: accent and surface choices affect the app. */
:root[data-accent] #view-app .desktop-workspace {
  background-image:radial-gradient(circle at 85% 8%,rgba(var(--theme-rgb),.14),transparent 27%),radial-gradient(circle at 8% 78%,rgba(var(--theme-rgb),.08),transparent 30%);
  transition:background-color .28s ease,background-image .28s ease;
}
:root[data-accent] #view-app #ftthAppHeader {
  border-color:rgba(var(--theme-rgb),.2) !important;
  box-shadow:0 12px 30px -25px rgba(var(--theme-rgb),.75) !important;
}
:root[data-accent] body.ftth-dashboard-view #view-app .manager-balance-card {
  background:linear-gradient(130deg,var(--theme-deep),var(--color-primary) 58%,var(--color-accent)) !important;
  box-shadow:0 18px 38px -22px rgba(var(--theme-rgb),.9),inset 0 1px 1px rgba(255,255,255,.22) !important;
}
:root[data-accent] #view-app :is(.bottom-nav-item.active,.settings-tab.active,.subscriber-filter-chip.active,.btn-gradient,.activation-primary-btn,#subHeaderAddBtn,#waSaveTemplatesBtn) {
  background:var(--grad-primary) !important;
  border-color:rgba(var(--theme-rgb),.5) !important;
  box-shadow:0 10px 24px -14px rgba(var(--theme-rgb),.9) !important;
}
:root[data-accent] #view-app :is(.wa-main-tabs button.active,.wa-add-session-btn) {
  background:var(--grad-primary) !important;
  border-color:rgba(var(--theme-rgb),.45) !important;
}
:root[data-accent] #view-app #btnManageResellers,
:root[data-accent] body.ftth-dashboard-view #resellerRailList .rail-reseller-btn.is-active {
  border-color:rgba(var(--theme-rgb),.68) !important;
  background:rgba(var(--theme-rgb),.12) !important;
  color:var(--color-accent) !important;
}
:root[data-accent] #view-app .bottom-nav-panel { border-color:rgba(var(--theme-rgb),.45) !important; }

:root[data-surface="glass"] {
  --theme-card-bg:rgba(24,36,64,.66);
  --theme-card-border:rgba(255,255,255,.13);
  --theme-card-shadow:0 18px 38px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.055);
  --theme-card-blur:blur(16px);
}
:root[data-surface="solid"] {
  --theme-card-bg:linear-gradient(145deg,color-mix(in srgb,var(--theme-deep) 32%,#1b2945),color-mix(in srgb,var(--color-primary) 18%,#111a2d));
  --theme-card-border:rgba(var(--theme-rgb),.34);
  --theme-card-shadow:0 16px 32px -27px rgba(var(--theme-rgb),.9),inset 0 1px 0 rgba(255,255,255,.055);
  --theme-card-blur:none;
}
:root[data-surface="midnight"] {
  --theme-card-bg:#080f20;
  --theme-card-border:rgba(var(--theme-rgb),.24);
  --theme-card-shadow:0 14px 30px -25px #000,inset 0 1px 0 rgba(255,255,255,.035);
  --theme-card-blur:none;
}
:root[data-surface] #view-app :is(.card-glass,.subscriber-card,.detail-hero,.detail-section,.detail-stat,.detail-network-summary,.detail-finance-card,.wa-connect-intro,.wa-session-card,.wa-link-state,.wa-test-disclosure,#waTemplatesPanel,#waQueuePanel,.wa-hub-grid>button) {
  background:var(--theme-card-bg) !important;
  border-color:var(--theme-card-border) !important;
  box-shadow:var(--theme-card-shadow) !important;
  backdrop-filter:var(--theme-card-blur) !important;
  -webkit-backdrop-filter:var(--theme-card-blur) !important;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
html[data-mode="light"][data-surface="glass"] {
  --theme-card-bg:rgba(255,255,255,.72);
  --theme-card-border:rgba(var(--theme-rgb),.2);
  --theme-card-shadow:0 15px 30px -25px rgba(15,23,42,.4),inset 0 1px 0 #fff;
}
html[data-mode="light"][data-surface="solid"] {
  --theme-card-bg:linear-gradient(145deg,color-mix(in srgb,#fff 92%,var(--color-accent)),color-mix(in srgb,#fff 86%,var(--color-primary)));
  --theme-card-border:rgba(var(--theme-rgb),.3);
  --theme-card-shadow:0 14px 28px -24px rgba(var(--theme-rgb),.5);
}
html[data-mode="light"][data-surface="midnight"] {
  --theme-card-bg:#0b1220;
  --theme-card-border:rgba(var(--theme-rgb),.38);
  --theme-card-shadow:0 14px 30px -24px rgba(15,23,42,.8);
}
html[data-mode="light"][data-surface="midnight"] #view-app :is(.card-glass,.subscriber-card,.detail-hero,.detail-section,.detail-stat,.detail-network-summary,.detail-finance-card) :is(h1,h2,h3,h4,strong,b,.subscriber-name) { color:#f8fafc !important; }
html[data-mode="light"][data-surface="midnight"] #view-app :is(.card-glass,.subscriber-card,.detail-hero,.detail-section,.detail-stat,.detail-network-summary,.detail-finance-card) :is(p,small,label,span) { color:#aebbd0 !important; }

/* Daylight semantic contrast: debt stays red; dashboard summaries stay legible. */
html[data-mode="light"] #view-app .subscriber-compact-debt,
html[data-mode="light"][data-surface] #view-app .subscriber-card .subscriber-compact-debt {
  border-color:#fb7185 !important;
  background:linear-gradient(135deg,#be123c,#e11d48) !important;
  color:#fff !important;
  box-shadow:0 7px 16px -10px rgba(190,18,60,.75) !important;
  opacity:1 !important;
}
html[data-mode="light"] #view-app .subscriber-compact-debt *,
html[data-mode="light"][data-surface] #view-app .subscriber-card .subscriber-compact-debt * {
  color:#fff !important;
  stroke:#fff !important;
  opacity:1 !important;
}
html[data-mode="light"] #view-app .stat-card,
html[data-mode="light"] #view-app .stat-card *,
html[data-mode="light"] #view-app .ftth-finance-tile,
html[data-mode="light"] #view-app .ftth-finance-tile * {
  color:#fff !important;
}
html[data-mode="light"] #view-app .ftth-finance-copy small { color:rgba(255,255,255,.78) !important; }
html[data-mode="light"] #view-app .ftth-finance-pair { color:#d1fae5 !important; }
html[data-mode="light"] #view-app .debt-total-card :is(p,small,span,b) { color:#fff !important; }
html[data-mode="light"] #view-app #dashBundlesList > div {
  border-color:#d7dee9 !important;
  background:#f8fafc !important;
  box-shadow:0 4px 12px rgba(15,23,42,.05) !important;
}
html[data-mode="light"] #view-app #dashBundlesList > div p:first-child { color:#172033 !important; }
html[data-mode="light"] #view-app #dashBundlesList > div p:last-child,
html[data-mode="light"] #view-app #dashBundlesList > div span:last-child { color:#64748b !important; }
html[data-mode="light"] #view-app #dashBundlesList > div .text-emerald-400 { color:#047857 !important; }

/* Elegant appearance picker. */
#settingsAppearance { display:grid; gap:1rem; }
#settingsAppearance > .card-glass { padding:1.1rem !important; border-radius:1.2rem !important; }
.appearance-mode-card,.appearance-accent-card,.appearance-surface-card {
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.27);
  color:#e5e7eb;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .16s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.appearance-mode-card { min-height:8.8rem; padding:1rem; border-radius:1rem; text-align:right; }
.appearance-accent-card { min-height:7.7rem; padding:.8rem; border-radius:1rem; text-align:right; }
.appearance-surface-card { min-height:7.2rem; padding:.75rem; border-radius:1rem; text-align:center; }
.appearance-mode-card:active,.appearance-accent-card:active,.appearance-surface-card:active { transform:scale(.97); }
.appearance-mode-card.active,.appearance-accent-card.active,.appearance-surface-card.active {
  border-color:var(--color-accent);
  background:rgba(var(--theme-rgb),.13);
  box-shadow:0 0 0 2px rgba(var(--theme-rgb),.08),0 14px 28px -24px rgba(var(--theme-rgb),.9);
}
.appearance-accent-card > div:first-child { height:3.25rem !important; border-radius:.8rem !important; }
.appearance-surface-preview { display:grid; grid-template-columns:1fr 1fr; gap:.3rem; width:100%; height:3rem; margin-bottom:.65rem; padding:.45rem; border:1px solid rgba(148,163,184,.18); border-radius:.75rem; }
.appearance-surface-preview i { display:block; border-radius:.45rem; }
.preview-glass { background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035)); backdrop-filter:blur(8px); }
.preview-glass i { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.2); }
.preview-solid { background:rgba(var(--theme-rgb),.2); }
.preview-solid i { background:linear-gradient(145deg,var(--theme-deep),var(--color-primary)); }
.preview-midnight { background:#050a16; }
.preview-midnight i { background:#111827; border:1px solid rgba(var(--theme-rgb),.3); }
html[data-mode="light"] :is(.appearance-mode-card,.appearance-accent-card,.appearance-surface-card) { background:#f8fafc; border-color:#d7dee9; color:#172033; }
html[data-mode="light"] :is(.appearance-mode-card,.appearance-accent-card,.appearance-surface-card).active { background:rgba(var(--theme-rgb),.09); border-color:var(--color-primary); }

/* Calm subscriber list spacing and separators in both colour modes. */
#subview-subscribers .subscriber-compact-actions { gap:.82rem !important; }
#subview-subscribers .subscribers-list { display:grid; gap:0 !important; }
#subview-subscribers .subscribers-list > .subscriber-card { margin:0 !important; }
#subview-subscribers .subscribers-list > .subscriber-card + .subscriber-card {
  position:relative;
  margin-top:1.2rem !important;
}
#subview-subscribers .subscribers-list > .subscriber-card + .subscriber-card::before {
  content:'';
  position:absolute;
  top:-.65rem;
  left:1rem;
  right:1rem;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.32) 18%,rgba(148,163,184,.32) 82%,transparent);
  pointer-events:none;
}
html[data-mode="light"] #subview-subscribers .subscribers-list > .subscriber-card + .subscriber-card::before {
  background:linear-gradient(90deg,transparent,rgba(100,116,139,.28) 18%,rgba(100,116,139,.28) 82%,transparent);
}

/* Large, separated and tactile subscriber contact controls. */
#subview-subscribers .subscriber-compact-actions {
  gap:1rem !important;
  padding:.15rem .1rem;
}
#subview-subscribers .subscriber-compact-actions .subscriber-quick-call,
#subview-subscribers .subscriber-compact-actions .subscriber-quick-whatsapp {
  width:2.95rem !important;
  height:2.95rem !important;
  min-width:2.95rem !important;
  flex:0 0 2.95rem !important;
  border-width:1px !important;
  border-radius:50% !important;
  transform:translateY(0) scale(1);
  transform-origin:center;
  transition:transform .11s ease-out,box-shadow .11s ease-out,filter .11s ease-out !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
#subview-subscribers .subscriber-compact-actions :is(.subscriber-quick-call,.subscriber-quick-whatsapp) svg {
  width:1.28rem !important;
  height:1.28rem !important;
}
#subview-subscribers .subscriber-compact-actions :is(.subscriber-quick-call,.subscriber-quick-whatsapp):active {
  transform:translateY(3px) scale(.88) !important;
  filter:brightness(.9);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.3),0 2px 5px rgba(0,0,0,.2) !important;
}
@media(max-width:380px) {
  #subview-subscribers .subscriber-compact-actions { gap:.82rem !important; }
  #subview-subscribers .subscriber-compact-actions .subscriber-quick-call,
  #subview-subscribers .subscriber-compact-actions .subscriber-quick-whatsapp {
    width:2.75rem !important;
    height:2.75rem !important;
    min-width:2.75rem !important;
    flex-basis:2.75rem !important;
  }
}
@media(max-width:430px) {
  #subview-subscribers .subscriber-compact-actions { gap:.7rem !important; }
}

/* First-login feature tour */
html.feature-tour-active,html.feature-tour-active body{overflow:hidden!important}
.feature-tour-gate{--tour:#8b5cf6;--tour2:#d946ef;position:fixed;inset:0;z-index:100001;overflow:auto;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));color:#fff;background:radial-gradient(circle at 15% 5%,color-mix(in srgb,var(--tour) 30%,transparent),transparent 35%),radial-gradient(circle at 90% 88%,color-mix(in srgb,var(--tour2) 22%,transparent),transparent 38%),#070817;touch-action:pan-y}
.feature-tour-gate[hidden]{display:none!important}.feature-tour-shell{position:relative;display:grid;grid-template-rows:auto minmax(20rem,1fr) auto auto auto;gap:1rem;width:min(100%,34rem);min-height:calc(100dvh - 2rem);margin:auto;padding-top:2rem}.feature-tour-shell.is-blue{--tour:#2563eb;--tour2:#06b6d4}.feature-tour-shell.is-rose{--tour:#e11d48;--tour2:#f97316}.feature-tour-shell.is-cyan{--tour:#0891b2;--tour2:#6366f1}.feature-tour-shell.is-indigo{--tour:#4f46e5;--tour2:#8b5cf6}.feature-tour-shell.is-amber{--tour:#d97706;--tour2:#eab308}.feature-tour-shell.is-green{--tour:#059669;--tour2:#22c55e}.feature-tour-shell.is-sky{--tour:#0284c7;--tour2:#22d3ee}.feature-tour-shell.is-purple{--tour:#7c3aed;--tour2:#c026d3}
.feature-tour-skip{position:absolute;top:0;left:0;padding:.4rem .7rem;border:0;color:#a9b4ca;background:transparent;font-size:.75rem;font-weight:850}.feature-tour-brand{position:absolute;top:.1rem;right:0;display:flex;align-items:center;gap:.45rem;color:#e9d5ff;font-size:.64rem;font-weight:950;letter-spacing:.08em}.feature-tour-brand img{width:1.8rem;height:1.8rem;border-radius:.55rem}
.feature-tour-visual{position:relative;align-self:center;min-height:20rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--tour) 45%,#fff 8%);border-radius:2.2rem;background:linear-gradient(145deg,color-mix(in srgb,var(--tour) 20%,#16203b),#11152b 58%,color-mix(in srgb,var(--tour2) 12%,#0b1020));box-shadow:0 28px 60px -35px var(--tour),inset 0 1px rgba(255,255,255,.1)}.feature-tour-visual:after{position:absolute;inset:auto -10% -35% auto;width:15rem;height:15rem;border-radius:50%;background:var(--tour2);filter:blur(70px);opacity:.18;content:""}.feature-tour-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--tour2) 30%,transparent);border-radius:50%}.orbit-one{width:18rem;height:18rem;right:-6rem;top:-8rem}.orbit-two{width:12rem;height:12rem;left:-5rem;bottom:-4rem}
.feature-tour-phone{position:absolute;z-index:2;right:8%;top:12%;width:48%;height:76%;padding:.7rem;border:1px solid rgba(255,255,255,.16);border-radius:1.55rem;background:linear-gradient(155deg,#111a36,#080d1d);box-shadow:0 24px 50px rgba(0,0,0,.52);transform:rotate(3deg)}.feature-tour-phone header{display:flex;align-items:center;gap:.3rem;padding:.15rem .2rem .55rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:.42rem}.feature-tour-phone header i{width:.35rem;height:.35rem;border-radius:50%;background:#34d399}.feature-tour-phone header b{margin-left:auto;font-size:.46rem}.feature-tour-phone header span{color:#67e8f9}.feature-tour-phone-title{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;padding:.65rem;border-radius:.85rem;background:linear-gradient(135deg,color-mix(in srgb,var(--tour) 28%,transparent),color-mix(in srgb,var(--tour2) 18%,transparent))}.feature-tour-phone-title>span{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.7rem;color:#fff;background:linear-gradient(145deg,var(--tour),var(--tour2))}.feature-tour-phone-title div{display:grid;min-width:0}.feature-tour-phone-title small{color:#aebbd0;font-size:.38rem}.feature-tour-phone-title b{overflow:hidden;font-size:.51rem;text-overflow:ellipsis;white-space:nowrap}.feature-tour-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.42rem;margin-top:.55rem}.feature-tour-metrics>div{display:grid;gap:.15rem;padding:.55rem;border:1px solid rgba(255,255,255,.08);border-radius:.7rem;background:rgba(255,255,255,.045)}.feature-tour-metrics small{color:#7f8da9;font-size:.36rem}.feature-tour-metrics strong{color:#e0f2fe;font-size:.51rem}.feature-tour-lines{display:grid;gap:.48rem;margin-top:.6rem}.feature-tour-lines i{height:1.75rem;border:1px solid rgba(255,255,255,.07);border-radius:.65rem;background:linear-gradient(90deg,rgba(255,255,255,.035),color-mix(in srgb,var(--tour) 13%,transparent))}
.feature-tour-point-list{position:absolute;z-index:3;left:6%;top:20%;display:grid;gap:.62rem;width:48%}.feature-tour-point-list>div{display:grid;grid-template-columns:1.65rem 1fr;align-items:center;gap:.5rem;padding:.6rem;border:1px solid rgba(255,255,255,.24);border-radius:.85rem;background:rgba(245,247,255,.94);box-shadow:0 12px 28px -18px #000;color:#141329;transform:translateX(calc(var(--i,0) * -4px))}.feature-tour-point-list span{display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:.55rem;color:#fff;background:linear-gradient(145deg,var(--tour),var(--tour2));font-size:.54rem;font-weight:950}.feature-tour-point-list b{font-size:.56rem;line-height:1.5}.feature-tour-point-list>div:nth-child(2){margin-right:1rem}.feature-tour-point-list>div:nth-child(3){margin-right:.25rem}
.feature-tour-copy{text-align:center}.feature-tour-copy>small{color:color-mix(in srgb,var(--tour2) 72%,#fff);font-size:.7rem;font-weight:950}.feature-tour-copy h1{margin:.25rem 0 .45rem;font-size:clamp(1.35rem,6vw,2rem);font-weight:950;line-height:1.35}.feature-tour-copy p{max-width:29rem;margin:auto;color:#9ba8bf;font-size:.76rem;line-height:1.9}.feature-tour-dots{display:flex;align-items:center;justify-content:center;gap:.38rem}.feature-tour-dots button{width:.42rem;height:.42rem;padding:0;border:0;border-radius:999px;background:#36384d;transition:.18s}.feature-tour-dots button.active{width:1.55rem;background:linear-gradient(90deg,var(--tour),var(--tour2));box-shadow:0 0 14px color-mix(in srgb,var(--tour) 60%,transparent)}.feature-tour-shell>footer{display:grid;grid-template-columns:minmax(5rem,.34fr) 1fr;gap:.7rem}.feature-tour-shell>footer button{min-height:3.25rem;border-radius:1rem;font-size:.82rem;font-weight:950}.feature-tour-back{border:1px solid rgba(148,163,184,.22);color:#cbd5e1;background:#121529}.feature-tour-back:disabled{opacity:.28}.feature-tour-next{border:1px solid rgba(255,255,255,.18);color:#fff;background:linear-gradient(100deg,var(--tour),var(--tour2));box-shadow:0 18px 36px -22px var(--tour)}
@media(max-width:430px){.feature-tour-gate{padding:.7rem}.feature-tour-shell{min-height:calc(100dvh - 1.4rem);grid-template-rows:auto minmax(18rem,1fr) auto auto auto;gap:.75rem;padding-top:1.8rem}.feature-tour-visual{min-height:18rem;border-radius:1.8rem}.feature-tour-phone{right:6%;width:52%}.feature-tour-point-list{left:4%;width:52%}.feature-tour-copy p{font-size:.69rem}.feature-tour-shell>footer button{min-height:3rem}}
@media(max-height:720px){.feature-tour-shell{grid-template-rows:auto minmax(15rem,1fr) auto auto auto}.feature-tour-visual{min-height:15rem}.feature-tour-phone{top:8%;height:84%}.feature-tour-copy p{line-height:1.6}.feature-tour-copy h1{font-size:1.25rem}}

/* Subscription activation: official price and payment choice before a financial request. */
/* FTTH partner tasks: compact dashboard bell and readable responsive modal. */
.ftth-tasks-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; width:100%; }
.ftth-tasks-button { display:inline-flex; align-items:center; gap:.55rem; min-height:2.7rem; padding:.55rem .85rem; border:1px solid rgba(96,165,250,.4); border-radius:.9rem; background:rgba(37,99,235,.13); color:#dbeafe; box-shadow:0 5px 16px -12px #60a5fa; font-size:.8rem; font-weight:800; }
.ftth-tasks-button svg { color:#67e8f9; flex:none; }
.ftth-tasks-badge { display:grid; min-width:1.4rem; height:1.4rem; place-items:center; padding:0 .3rem; border-radius:99px; background:#ef4444; color:#fff; font-size:.65rem; font-weight:900; }
.ftth-tasks-badge[hidden] { display:none; }
.ftth-tasks-caption { color:#94a3b8; font-size:.7rem; font-weight:650; }
.ftth-task-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding:.8rem; border:1px solid rgba(96,165,250,.2); border-radius:.9rem; background:rgba(30,41,59,.55); color:#dbeafe; font-size:.78rem; }
.ftth-task-summary b { color:#67e8f9; margin-inline-start:.3rem; }
.ftth-task-summary small { color:#94a3b8; }
.ftth-task-tabs { display:flex; gap:.5rem; margin:.9rem 0; }
.ftth-task-tabs button,.ftth-task-footer button,.ftth-task-retry,.ftth-task-detail button { padding:.5rem .8rem; border:1px solid rgba(129,140,248,.25); border-radius:.75rem; background:rgba(99,102,241,.1); color:#c7d2fe; font-size:.72rem; font-weight:800; }
.ftth-task-tabs button.selected { background:rgba(79,70,229,.35); border-color:#818cf8; color:#fff; }
.ftth-task-list { display:grid; gap:.65rem; max-height:min(55vh,36rem); overflow-y:auto; overscroll-behavior:contain; padding:.1rem; }
.ftth-task-item { display:grid; width:100%; gap:.3rem; padding:.75rem .85rem; border:1px solid rgba(96,165,250,.2); border-radius:.9rem; background:rgba(15,23,42,.58); color:#e2e8f0; text-align:start; min-width:0; }
.ftth-task-item-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; min-width:0; }
.ftth-task-item-head b { font-size:.82rem; overflow-wrap:anywhere; }
.ftth-task-item-head i { flex:none; color:#86efac; font-size:.63rem; font-style:normal; }
.ftth-task-item-head i.is-open { color:#fbbf24; }
.ftth-task-item-customer { color:#c4b5fd; font-size:.75rem; overflow-wrap:anywhere; }
.ftth-task-item small { color:#94a3b8; font-size:.68rem; overflow-wrap:anywhere; }
.ftth-task-empty { padding:1.2rem; color:#94a3b8; text-align:center; font-size:.78rem; }
.ftth-task-footer { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; margin-top:.85rem; }
.ftth-task-footer small { margin-inline-start:auto; color:#94a3b8; font-size:.65rem; }
.ftth-task-detail { display:grid; gap:.9rem; color:#e2e8f0; }
.ftth-task-detail > p { padding:.8rem; border-radius:.8rem; background:rgba(30,41,59,.55); font-size:.78rem; line-height:1.7; overflow-wrap:anywhere; }
.ftth-task-detail > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.ftth-task-detail > div > span { display:grid; gap:.2rem; padding:.6rem; border:1px solid rgba(129,140,248,.18); border-radius:.75rem; min-width:0; }
.ftth-task-detail small { color:#94a3b8; font-size:.65rem; }.ftth-task-detail b { color:#e0f2fe; font-size:.76rem; overflow-wrap:anywhere; }
html[data-mode="light"] :is(.ftth-tasks-button,.ftth-task-summary,.ftth-task-item,.ftth-task-detail > p,.ftth-task-detail > div > span) { background:#fff; color:#172554; border-color:#dbeafe; }
html[data-mode="light"] :is(.ftth-tasks-caption,.ftth-task-item small,.ftth-task-summary small,.ftth-task-footer small,.ftth-task-detail small) { color:#52627a; }
html[data-mode="light"] :is(.ftth-task-item-head b,.ftth-task-detail b) { color:#172554; }
@media (max-width:430px) { .ftth-tasks-toolbar { gap:.35rem; }.ftth-tasks-caption { width:100%; }.ftth-task-detail > div { grid-template-columns:1fr; } }

.activation-flow { display:grid; gap:.8rem; color:#e2e8f0; min-width:0; }
#modalDialog:has(.activation-flow) { box-sizing:border-box; border-color:rgba(129,140,248,.34); box-shadow:0 -20px 50px rgba(0,0,0,.7),0 0 26px -14px rgba(96,165,250,.65); }
#modalDialog:has(.activation-flow) #modalTitle { color:#f5f3ff; }
.activation-flow :is(h4,p) { margin:0; }
.activation-subtitle { margin-top:-.25rem!important; color:#9caad0; font-size:.77rem; line-height:1.5; }
.activation-loading { display:flex; align-items:center; justify-content:center; gap:.6rem; min-height:7rem; color:#c4b5fd; font-size:.85rem; font-weight:800; }
.activation-subscriber-card { display:flex; align-items:center; gap:.7rem; min-width:0; padding:.7rem .8rem; border:1px solid rgba(129,140,248,.26); border-radius:1rem; background:linear-gradient(115deg,rgba(38,44,83,.68),rgba(15,23,42,.72)); }
.activation-subscriber-icon { display:grid; place-items:center; flex:0 0 2.55rem; height:2.55rem; border-radius:.82rem; background:linear-gradient(145deg,#5b21b6,#2563eb); color:#e0f2fe; box-shadow:0 5px 18px rgba(76,29,149,.24); }
.activation-subscriber-copy { display:grid; gap:.08rem; min-width:0; }
.activation-subscriber-copy small { color:#a5b4fc; font-size:.63rem; font-weight:700; }
.activation-subscriber-copy b { color:#f8fafc; font-size:.92rem; overflow-wrap:anywhere; }
.activation-subscriber-copy span { color:#94a3b8; font-size:.66rem; }
.activation-subscriber-copy strong { display:inline-block; color:#cbd5e1; font-weight:600; }
.activation-status-badge { margin-inline-start:auto; align-self:flex-start; flex:0 0 auto; padding:.19rem .5rem; border:1px solid rgba(74,222,128,.26); border-radius:99px; background:rgba(22,163,74,.12); color:#86efac; font-size:.61rem; font-weight:800; }
.activation-package-card { position:relative; display:flex; justify-content:space-between; align-items:center; gap:1rem; min-width:0; overflow:hidden; padding:1rem 1.15rem; border:1px solid rgba(103,232,249,.32); border-radius:1.4rem; background:radial-gradient(circle at 85% 10%,rgba(56,189,248,.17),transparent 37%),linear-gradient(135deg,#31235f 0%,#302d83 52%,#164c80 100%); box-shadow:0 12px 30px -20px rgba(103,232,249,.72),inset 0 1px rgba(255,255,255,.12); }
.activation-package-card::after { content:''; position:absolute; inset:auto -15% -75% 30%; height:9rem; border-radius:50%; background:rgba(34,211,238,.14); filter:blur(32px); pointer-events:none; }
.activation-package-copy { position:relative; z-index:1; display:grid; gap:.28rem; min-width:0; }
.activation-package-copy small { color:#bfdbfe; font-size:.7rem; font-weight:800; }
.activation-package-copy h4 { color:#fff; font-size:clamp(1.02rem,4vw,1.3rem); font-weight:900; line-height:1.3; overflow-wrap:anywhere; }
.activation-package-price { display:inline-flex; align-items:baseline; gap:.26rem; width:max-content; max-width:100%; padding:.22rem .65rem; border:1px solid rgba(221,214,254,.45); border-radius:.75rem; background:linear-gradient(100deg,rgba(147,51,234,.58),rgba(37,99,235,.5)); color:#fff; box-shadow:0 5px 18px rgba(76,29,149,.18); font-size:clamp(1.22rem,5vw,1.7rem); font-weight:950; white-space:nowrap; }
.activation-package-price span { font-size:.68rem; font-weight:800; }
.activation-package-copy p { color:#dbeafe; font-size:.72rem; font-weight:700; }
.activation-package-icon { position:relative; z-index:1; display:grid; place-items:center; flex:0 0 4.35rem; width:4.35rem; height:4.35rem; border:1px solid rgba(165,243,252,.4); border-radius:1.25rem; background:rgba(15,23,42,.22); color:#a5f3fc; box-shadow:0 0 20px rgba(103,232,249,.19),inset 0 0 14px rgba(103,232,249,.1); }
.activation-step-title { margin-bottom:.55rem!important; color:#e0e7ff; font-size:.84rem; font-weight:900; }
.activation-payment-options { display:grid; gap:.5rem; }
.activation-payment-choice { display:flex; align-items:center; gap:.65rem; min-height:3.6rem; padding:.6rem .72rem; border:1px solid rgba(129,140,248,.27); border-radius:1rem; background:rgba(15,23,42,.68); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 150ms cubic-bezier(.22,1,.36,1),filter 150ms,box-shadow 150ms,border-color 150ms,background 150ms; }
.activation-payment-choice:has(input:checked) { border-color:rgba(167,139,250,.88); background:linear-gradient(100deg,rgba(109,40,217,.23),rgba(30,64,175,.17)); box-shadow:inset 0 0 0 1px rgba(167,139,250,.12),0 0 17px -9px rgba(167,139,250,.8); }
.activation-settlement-options { margin-bottom:.7rem; }
.activation-cash-choice:has(input:checked) { border-color:rgba(52,211,153,.88);background:linear-gradient(100deg,rgba(5,150,105,.24),rgba(8,145,178,.16));box-shadow:inset 0 0 0 1px rgba(52,211,153,.12),0 0 17px -9px rgba(52,211,153,.8); }
.activation-cash-choice:has(input:checked) .activation-method-icon { color:#6ee7b7;border-color:rgba(52,211,153,.38);background:rgba(5,150,105,.18); }
.activation-payment-choice:is(:active,.ftth-pressed) { transform:translateY(2px) scale(.97); filter:brightness(.95); box-shadow:inset 0 2px 5px rgba(0,0,0,.18); transition-duration:85ms; }
.activation-payment-choice input { order:3; margin-inline-start:auto; flex:0 0 auto; width:1rem; height:1rem; accent-color:#a78bfa; }
.activation-method-icon { display:grid!important; place-items:center; flex:0 0 2.2rem; width:2.2rem; height:2.2rem; border:1px solid rgba(129,140,248,.3); border-radius:.7rem; background:rgba(79,70,229,.19); color:#c4b5fd; }
.activation-method-icon svg { width:1.2rem; height:1.2rem; }
.activation-card-icon { color:#93c5fd; background:rgba(37,99,235,.18); }
.activation-method-copy { display:grid!important; gap:.12rem; min-width:0; }
.activation-payment-choice b { color:#f1f5f9; font-size:.77rem; overflow-wrap:anywhere; }
.activation-payment-choice small { color:#94a3b8; font-size:.65rem; line-height:1.45; }
.activation-wallet-info { display:flex; align-items:center; flex-wrap:wrap; gap:.25rem .5rem; margin-top:.5rem; padding:.5rem .65rem; border:1px solid rgba(129,140,248,.18); border-radius:.75rem; background:rgba(30,41,59,.44); font-size:.68rem; }
.activation-wallet-info[hidden] { display:none!important; }
.activation-wallet-info span { color:#a5b4fc; }
.activation-wallet-info b { color:#e0f2fe; margin-inline-start:auto; }
.activation-warning { margin:.3rem 0 0!important; padding:.5rem .6rem; border:1px solid rgba(251,191,36,.3); border-radius:.65rem; background:rgba(180,83,9,.12); color:#fcd34d; font-size:.68rem; line-height:1.55; }
.activation-wallet-info .activation-warning { flex-basis:100%; }
.activation-primary-btn,.activation-secondary-btn { display:inline-flex; align-items:center; justify-content:center; min-height:2.7rem; padding:.55rem .85rem; border-radius:.8rem; font-size:.78rem; font-weight:900; text-decoration:none; }
.activation-primary-btn { width:100%; gap:.45rem; border:1px solid rgba(196,181,253,.45); color:#fff; background:linear-gradient(110deg,#7c3aed,#4f46e5 58%,#2563eb); box-shadow:0 9px 24px -14px rgba(129,140,248,.92); }
#activationReviewBtn { min-height:3rem; margin-top:.7rem; border-radius:.95rem; font-size:.86rem; }
.activation-trust { display:flex; align-items:center; justify-content:center; gap:.3rem; margin-top:.4rem!important; color:#96a8c7; font-size:.61rem; }
.activation-secondary-btn { border:1px solid rgba(148,163,184,.3); color:#cbd5e1; background:rgba(148,163,184,.1); }
.activation-confirm-summary { display:grid; gap:.35rem; padding:.8rem; border:1px solid rgba(129,140,248,.2); border-radius:.85rem; background:rgba(30,41,59,.5); color:#cbd5e1; font-size:.74rem; }
.activation-confirm-summary b { color:#fff; overflow-wrap:anywhere; }
.activation-confirm-actions { display:grid; grid-template-columns:1fr 2fr; gap:.6rem; }
.activation-error { display:grid; gap:.8rem; color:#fda4af; font-size:.8rem; }
.activation-payment-result { display:grid; gap:.6rem; margin-top:.7rem; padding:.8rem; border:1px solid rgba(74,222,128,.32); border-radius:.9rem; background:rgba(21,128,61,.12); color:#bbf7d0; font-size:.76rem; }
.activation-payment-result small { color:#cbd5e1; line-height:1.7; }
#activationResult:not(:empty) { margin-top:.65rem; color:#fcd34d; font-size:.72rem; line-height:1.8; }
html[data-mode="light"] .activation-flow { color:#172554; }
html[data-mode="light"] :is(.activation-subscriber-card,.activation-payment-choice,.activation-confirm-summary,.activation-wallet-info) { background:#f8fafc; border-color:#c7d2fe; }
html[data-mode="light"] :is(.activation-subscriber-copy b,.activation-step-title,.activation-payment-choice b,.activation-confirm-summary b) { color:#172554; }
html[data-mode="light"] :is(.activation-subtitle,.activation-subscriber-copy span,.activation-payment-choice small,.activation-confirm-summary,.activation-trust) { color:#52627a; }
html[data-mode="light"] .activation-payment-choice:has(input:checked) { background:#ede9fe; border-color:#8b5cf6; }
html[data-mode="light"] .activation-cash-choice:has(input:checked) { background:#ecfdf5;border-color:#10b981; }
html[data-mode="light"] .activation-wallet-info b { color:#172554; }
html[data-mode="light"] .activation-warning { background:#fffbeb; color:#92400e; }
html[data-mode="light"] .activation-payment-result { background:#ecfdf5; color:#065f46; }
html[data-mode="light"] .activation-payment-result small { color:#475569; }
@media (max-width:430px) { #modalDialog:has(.activation-flow) { padding:1rem .95rem calc(1.35rem + env(safe-area-inset-bottom,0px)); }.activation-flow { gap:.62rem; }.activation-package-card { padding:.78rem .86rem; }.activation-package-icon { flex-basis:3.3rem; width:3.3rem; height:3.3rem; }.activation-package-icon svg { width:1.9rem; height:1.9rem; }.activation-payment-choice { min-height:3.35rem; padding:.5rem .6rem; } }
@media (prefers-reduced-motion:reduce) { .activation-payment-choice { transition:none; }.activation-payment-choice:is(:active,.ftth-pressed) { transform:none; } }

/* FTTH-only draft selling prices. No debts or messages are created here. */
.package-prices-settings { padding:1rem; border:1px solid rgba(129,140,248,.24); border-radius:1rem; }
.package-prices-heading { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.package-prices-heading h2 { color:#e0e7ff; font-size:.93rem; font-weight:900; }
.package-prices-heading p,.package-prices-note { color:#94a3b8; font-size:.69rem; line-height:1.55; }
.package-prices-heading button,.package-price-save { flex:0 0 auto; padding:.52rem .75rem; border:1px solid rgba(167,139,250,.42); border-radius:.7rem; background:linear-gradient(120deg,rgba(109,40,217,.55),rgba(37,99,235,.55)); color:#fff; font-size:.7rem; font-weight:900; }
#settingsPackagePricesPanel[hidden] { display:none!important; }
.package-prices-note { margin:.75rem 0; padding:.56rem .65rem; border:1px solid rgba(96,165,250,.22); border-radius:.7rem; background:rgba(30,64,175,.1); }
#settingsPackagePricesList { display:grid; gap:.65rem; }
.package-price-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(7rem,9rem) auto; align-items:end; gap:.6rem; padding:.75rem; border:1px solid rgba(129,140,248,.2); border-radius:.85rem; background:rgba(15,23,42,.5); }
.package-price-description,.package-price-row label { display:grid; gap:.2rem; min-width:0; }
.package-price-description b { color:#e0f2fe; font-size:.8rem; overflow-wrap:anywhere; }
.package-price-description small,.package-price-row label span { color:#94a3b8; font-size:.65rem; }
.package-price-row input { width:100%; min-width:0; height:2.25rem; padding:.35rem .5rem; border:1px solid rgba(129,140,248,.36); border-radius:.65rem; background:rgba(2,6,23,.5); color:#f8fafc; font-size:.76rem; text-align:start; direction:ltr; }
.package-price-row input:focus-visible { outline:2px solid rgba(129,140,248,.65); outline-offset:1px; }
.package-prices-empty { padding:.8rem; color:#94a3b8; font-size:.75rem; }
html[data-mode="light"] .package-prices-heading h2,html[data-mode="light"] .package-price-description b { color:#172554; }
html[data-mode="light"] :is(.package-prices-heading p,.package-prices-note,.package-price-description small,.package-price-row label span,.package-prices-empty) { color:#52627a; }
html[data-mode="light"] :is(.package-price-row,.package-price-row input) { background:#f8fafc; color:#172554; border-color:#c7d2fe; }
@media (max-width:430px) { .package-prices-heading { align-items:flex-start; }.package-prices-heading p { max-width:15rem; }.package-price-row { grid-template-columns:minmax(0,1fr) auto; }.package-price-description { grid-column:1/-1; } }

/* Per-panel access code: visually primary, owner credentials remain separate. */
.ftth-code-login { display:grid; gap:.7rem; padding:.85rem; border:1px solid rgba(96,165,250,.34); border-radius:1rem; background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(109,40,217,.14)); box-shadow:0 8px 24px -20px #60a5fa; }
.ftth-code-login > div { display:grid; gap:.12rem; }
.ftth-code-login b { color:#e0f2fe; font-size:.87rem; font-weight:900; }
.ftth-code-login small { color:#94a3b8; font-size:.65rem; }
.ftth-code-login label { display:flex; align-items:center; gap:.5rem; height:2.75rem; padding:0 .7rem; border:1px solid rgba(129,140,248,.3); border-radius:.8rem; background:rgba(2,6,23,.48); color:#a5b4fc; }
.ftth-code-login input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:#fff; direction:ltr; font-size:.83rem; }
.ftth-code-login button { min-height:2.65rem; border:1px solid rgba(165,180,252,.4); border-radius:.8rem; background:linear-gradient(110deg,#7c3aed,#2563eb); color:#fff; font-size:.8rem; font-weight:900; box-shadow:0 8px 20px -13px #818cf8; }
.ftth-code-login p { min-height:.9rem; margin:0; color:#fda4af; text-align:center; font-size:.67rem; }
.ftth-login-role-switch{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.35rem;border:1px solid rgba(148,163,184,.18);border-radius:1rem;background:rgba(2,6,23,.35)}.ftth-login-role-switch button{min-height:2.7rem;border:0;border-radius:.75rem;background:transparent;color:#94a3b8;font-size:.76rem;font-weight:900;transition:.18s}.ftth-login-role-switch button.active{color:#fff;background:linear-gradient(110deg,#2563eb,#06b6d4);box-shadow:0 8px 20px -12px #22d3ee}.ftth-employee-login{border-color:rgba(16,185,129,.34);background:linear-gradient(135deg,rgba(5,150,105,.12),rgba(8,145,178,.13))}.ftth-employee-login button{background:linear-gradient(110deg,#059669,#0891b2);border-color:rgba(52,211,153,.4)}
.ftth-login-separator { display:flex; align-items:center; gap:.6rem; color:#64748b; font-size:.63rem; font-weight:800; }
.ftth-login-separator::before,.ftth-login-separator::after { content:''; flex:1; height:1px; background:rgba(148,163,184,.18); }
html[data-mode="light"] .ftth-code-login { background:linear-gradient(135deg,#eff6ff,#f5f3ff); border-color:#a5b4fc; }
html[data-mode="light"] .ftth-code-login :is(b,input) { color:#172554; }
html[data-mode="light"] .ftth-code-login label { background:#fff; border-color:#c7d2fe; }
html[data-mode="light"] .ftth-login-role-switch{background:#eef2ff;border-color:#c7d2fe}html[data-mode="light"] .ftth-login-role-switch button{color:#64748b}html[data-mode="light"] .ftth-login-role-switch button.active{color:#fff}

.access-codes-settings { padding:1rem; border:1px solid rgba(96,165,250,.25); border-radius:1rem; }
.access-codes-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.access-codes-heading h2 { color:#e0e7ff; font-size:.93rem; font-weight:900; }
.access-codes-heading p { color:#94a3b8; font-size:.68rem; }
.access-codes-heading button,#accessCodeCreateForm button { padding:.52rem .75rem; border:1px solid rgba(96,165,250,.38); border-radius:.72rem; background:linear-gradient(120deg,#6d28d9,#2563eb); color:#fff; font-size:.7rem; font-weight:900; }
#accessCodesPanel[hidden] { display:none!important; }
#accessCodeCreateForm { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:.5rem; margin-top:.8rem; }
#accessCodeCreateForm input { min-width:0; height:2.45rem; padding:.45rem .6rem; border:1px solid rgba(129,140,248,.3); border-radius:.7rem; background:rgba(2,6,23,.5); color:#fff; font-size:.72rem; }
#accessCodesList { display:grid; gap:.5rem; margin-top:.65rem; }
.access-code-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:.45rem; padding:.65rem; border:1px solid rgba(129,140,248,.18); border-radius:.8rem; background:rgba(15,23,42,.5); }
.access-code-row > div { display:grid; min-width:0; }.access-code-row b { color:#e0f2fe; font-size:.75rem; }.access-code-row small { color:#94a3b8; font-size:.6rem; }
.access-code-row > span { padding:.16rem .42rem; border-radius:99px; font-size:.58rem; font-weight:900; }.access-code-row > span.is-enabled { background:rgba(34,197,94,.14); color:#86efac; }.access-code-row > span.is-disabled { background:rgba(148,163,184,.12); color:#cbd5e1; }
.access-code-row > button { padding:.38rem .48rem; border-radius:.58rem; background:rgba(99,102,241,.13); color:#c7d2fe; font-size:.62rem; font-weight:800; }.access-code-row > button.is-danger { background:rgba(244,63,94,.12); color:#fda4af; }
html[data-mode="light"] :is(.access-codes-heading h2,.access-code-row b) { color:#172554; } html[data-mode="light"] :is(.access-codes-heading p,.access-code-row small) { color:#52627a; } html[data-mode="light"] :is(#accessCodeCreateForm input,.access-code-row) { background:#f8fafc;color:#172554;border-color:#c7d2fe; }
@media(max-width:430px){#accessCodeCreateForm{grid-template-columns:1fr 1fr}#accessCodeCreateForm button{grid-column:1/-1}.access-code-row{grid-template-columns:minmax(0,1fr) auto auto}.access-code-row>div{grid-column:1/-1}}

.subscriber-ledger { display:grid; gap:.75rem; }
.subscriber-ledger-balance { display:flex; align-items:center; justify-content:space-between; padding:.85rem; border:1px solid rgba(244,63,94,.25); border-radius:1rem; background:linear-gradient(120deg,rgba(127,29,29,.18),rgba(76,29,149,.15)); }.subscriber-ledger-balance small{color:#fda4af;font-weight:800}.subscriber-ledger-balance b{color:#fff;font-size:1.2rem}
.subscriber-ledger-actions { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }.subscriber-ledger-actions button{min-height:2.65rem;border-radius:.8rem;background:linear-gradient(120deg,#6d28d9,#2563eb);color:#fff;font-size:.75rem;font-weight:900}.subscriber-ledger-actions button:last-child{background:linear-gradient(120deg,#047857,#059669)}.subscriber-ledger-actions button:disabled{opacity:.45}
.subscriber-ledger-list { display:grid; gap:.45rem; max-height:45vh; overflow:auto; }.subscriber-ledger-list article{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;padding:.65rem;border:1px solid rgba(129,140,248,.18);border-radius:.75rem;background:rgba(15,23,42,.5)}.subscriber-ledger-list article span{color:#cbd5e1;font-size:.7rem;font-weight:800}.subscriber-ledger-list article b{color:#fda4af;font-size:.75rem}.subscriber-ledger-list article.is-payment b{color:#86efac}.subscriber-ledger-list article small{grid-column:1/-1;color:#64748b;font-size:.58rem}.subscriber-ledger-list>p{padding:1rem;text-align:center;color:#94a3b8;font-size:.72rem}

/* Compact subscribers list; full technical data remains in the details view. */
.subscribers-list > .subscriber-compact-card { min-height:6.1rem; padding:.78rem 1rem; border-width:1px; cursor:pointer; }
.subscriber-compact-card.is-normal { border-color:rgba(52,211,153,.55); background:linear-gradient(110deg,rgba(6,78,59,.27),rgba(15,23,42,.9) 44%); }
.subscriber-compact-card.is-warning { border-color:rgba(251,191,36,.68); background:linear-gradient(110deg,rgba(120,53,15,.3),rgba(15,23,42,.9) 44%); }
.subscriber-compact-card.is-critical { border-color:rgba(251,113,133,.7); background:linear-gradient(110deg,rgba(127,29,29,.38),rgba(15,23,42,.9) 44%); }
.subscriber-compact-card.is-expired { border-color:rgba(225,29,72,.78); background:linear-gradient(110deg,rgba(69,10,10,.82),rgba(30,12,25,.94) 56%); }
.subscriber-compact-card.is-unknown { border-color:rgba(148,163,184,.35); }
.subscriber-compact-card.is-suspended { border-color:rgba(245,158,11,.78); background:linear-gradient(110deg,rgba(120,53,15,.44),rgba(15,23,42,.94) 52%); }
.subscriber-suspended-status { display:inline-flex;align-items:center;gap:.3rem;color:#fbbf24;font-weight:900;font-size:.73rem; }
.subscriber-compact-unsuspend { background:linear-gradient(135deg,#059669,#10b981)!important;color:#fff!important;border-color:rgba(52,211,153,.6)!important;box-shadow:0 8px 20px rgba(5,150,105,.22); }
.detail-action-success { background:linear-gradient(135deg,#047857,#10b981)!important;color:#fff!important;border-color:rgba(52,211,153,.55)!important; }
.subscriber-compact-card:focus-visible { outline:2px solid #67e8f9; outline-offset:2px; }
.subscriber-compact-main { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-width:0; }
.subscriber-compact-info { min-width:0; flex:1; }
.subscriber-compact-card .subscriber-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; overflow-wrap:anywhere; font-size:clamp(1rem,2.6vw,1.14rem); font-weight:900; line-height:1.45; }
.subscriber-compact-status { margin-top:.12rem; }
.subscriber-compact-status .connection-status { font-size:.66rem; }
.subscriber-compact-status .connection-status-icon { width:1.25rem; height:1.25rem; }
.subscriber-compact-status .connection-status-icon svg { width:.85rem; height:.85rem; }
.subscriber-compact-expiry { display:flex; align-items:center; gap:.28rem; margin-top:.22rem; color:#86efac; font-size:.72rem; font-weight:850; line-height:1.35; }
.subscriber-compact-card.is-warning .subscriber-compact-expiry { color:#fcd34d; }
.subscriber-compact-card:is(.is-critical,.is-expired) .subscriber-compact-expiry { color:#fda4af; }
.subscriber-compact-card.is-unknown .subscriber-compact-expiry { color:#94a3b8; }
.subscriber-compact-actions { display:flex; flex:0 0 auto; align-items:center; gap:.42rem; }
.subscriber-compact-actions .subscriber-quick-call,.subscriber-compact-actions .subscriber-quick-whatsapp { width:2.4rem; height:2.4rem; min-width:2.4rem; flex-basis:2.4rem; }
.subscriber-compact-actions .is-disabled { opacity:.38; cursor:not-allowed; filter:grayscale(1); }
.detail-network-summary { padding:1rem; border:1px solid rgba(96,165,250,.2); border-radius:1rem; }
.detail-network-summary h3 { display:flex; align-items:center; gap:.4rem; margin-bottom:.55rem; color:#bfdbfe; font-size:.82rem; font-weight:900; }
.detail-network-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.3rem .8rem; }
.detail-network-grid .detail-data-line { min-width:0; }
html[data-mode="light"] .subscriber-compact-card.is-normal { background:linear-gradient(110deg,#ecfdf5,#fff 55%); border-color:#6ee7b7; }
html[data-mode="light"] .subscriber-compact-card.is-warning { background:linear-gradient(110deg,#fffbeb,#fff 55%); border-color:#fbbf24; }
html[data-mode="light"] .subscriber-compact-card.is-critical { background:linear-gradient(110deg,#fff1f2,#fff 55%); border-color:#fb7185; }
html[data-mode="light"] .subscriber-compact-card.is-expired { background:linear-gradient(110deg,#ffe4e6,#fff1f2 65%); border-color:#e11d48; }
html[data-mode="light"] .subscriber-compact-card.is-suspended { background:linear-gradient(110deg,#fff7ed,#fffbeb 65%);border-color:#f59e0b; }
html[data-mode="light"] .subscriber-compact-card.is-normal .subscriber-compact-expiry { color:#047857; }
html[data-mode="light"] .subscriber-compact-card.is-warning .subscriber-compact-expiry { color:#92400e; }
html[data-mode="light"] .subscriber-compact-card:is(.is-critical,.is-expired) .subscriber-compact-expiry { color:#be123c; }
html[data-mode="light"] .detail-network-summary h3 { color:#1e40af; }
@media (max-width:430px) { .subscribers-list > .subscriber-compact-card { min-height:5.7rem; padding:.7rem .8rem; } .subscriber-compact-main { gap:.45rem; } .subscriber-compact-actions { gap:.3rem; } .subscriber-compact-actions .subscriber-quick-call,.subscriber-compact-actions .subscriber-quick-whatsapp { width:2.15rem; height:2.15rem; min-width:2.15rem; flex-basis:2.15rem; } .subscriber-compact-expiry { font-size:.66rem; } .detail-network-grid { grid-template-columns:1fr; } }

/* Debt is financial information: keep it unmistakable even on green/blue cards. */
.subscriber-compact-debt { display:inline-flex; align-items:center; flex-wrap:wrap; gap:.3rem; margin-top:.42rem; padding:.34rem .6rem; border:1px solid #fb7185; border-radius:.7rem; background:#9f1239; color:#fff; box-shadow:0 3px 12px rgba(127,29,29,.35); font-size:.78rem; font-weight:900; }
.subscriber-compact-debt b { font-weight:950; }
.subscriber-compact-credit,.detail-credit-badge { display:inline-flex;align-items:center;flex-wrap:wrap;gap:.3rem;margin-top:.42rem;padding:.34rem .6rem;border:1px solid rgba(52,211,153,.55);border-radius:.7rem;background:rgba(5,150,105,.22);color:#86efac;box-shadow:0 3px 12px rgba(5,150,105,.18);font-size:.78rem;font-weight:900 }
.subscriber-compact-credit b,.detail-credit-badge b{font-weight:950}.detail-credit-badge{font-size:.68rem;border-radius:999px}
.subscriber-ont-signal{display:inline-flex;align-items:center;gap:.3rem;margin-top:.38rem;padding:.25rem .5rem;border:1px solid rgba(56,189,248,.28);border-radius:999px;background:rgba(14,116,144,.13);color:#7dd3fc;font-size:.66rem;font-weight:850}.subscriber-ont-signal b{font-weight:950}.subscriber-ont-signal.is-good{border-color:rgba(52,211,153,.35);background:rgba(5,150,105,.13);color:#86efac}.subscriber-ont-signal.is-warning{border-color:rgba(251,191,36,.4);background:rgba(245,158,11,.13);color:#fcd34d}.subscriber-ont-signal.is-critical{border-color:rgba(251,113,133,.42);background:rgba(225,29,72,.14);color:#fda4af}.subscriber-ont-signal .action-spinner{width:.75rem;height:.75rem}
.detail-money-summary .detail-money-debt.is-credit{background:linear-gradient(110deg,#047857,#10b981);border-color:rgba(110,231,183,.5)}
.detail-credit-stat{border-color:rgba(52,211,153,.4)!important;background:rgba(5,150,105,.14)!important}.detail-credit-stat b{color:#86efac!important}
.subscriber-ledger-balance.is-credit{border-color:rgba(52,211,153,.45)!important;background:rgba(5,150,105,.15)!important}.subscriber-ledger-balance.is-credit b{color:#86efac!important}.subscriber-ledger-balance em{display:block;flex-basis:100%;width:100%;margin-top:.25rem;color:#94a3b8;font-size:.64rem;font-style:normal}
.header-employee-logout b{font-size:.68rem;font-weight:900}.header-employee-logout svg{width:1rem;height:1rem}
html[data-mode="light"] .subscriber-compact-credit,html[data-mode="light"] .detail-credit-badge{background:#dcfce7!important;color:#047857!important;border-color:#6ee7b7!important}
html[data-mode="light"] .subscriber-ont-signal{background:#ecfeff!important;color:#0e7490!important;border-color:#67e8f9!important}html[data-mode="light"] .subscriber-ont-signal.is-good{background:#ecfdf5!important;color:#047857!important;border-color:#6ee7b7!important}html[data-mode="light"] .subscriber-ont-signal.is-warning{background:#fffbeb!important;color:#a16207!important;border-color:#fcd34d!important}html[data-mode="light"] .subscriber-ont-signal.is-critical{background:#fff1f2!important;color:#be123c!important;border-color:#fda4af!important}
.subscriber-compact-footer { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; padding-top:.65rem; border-top:1px solid rgba(255,255,255,.12); }
.subscriber-compact-footer > :is(button,a) { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:2.35rem; padding:.48rem .8rem; border:1px solid transparent; border-radius:.75rem; color:#fff; font-size:.74rem; font-weight:850; text-decoration:none; cursor:pointer; }
.subscriber-compact-activate { background:linear-gradient(135deg,#059669,#047857); border-color:#34d399 !important; }
.subscriber-demand-btn { background:#047857; border-color:#34d399 !important; }
.subscriber-pay-btn { background:#1d4ed8; border-color:#60a5fa !important; }
.subscriber-demand-btn.is-disabled { opacity:.45; cursor:not-allowed; }
.subscriber-online-data { display:grid; grid-template-columns:minmax(0,3fr) minmax(12rem,1fr); align-items:stretch; gap:.6rem; margin-top:.65rem; }
.subscriber-online-data .online-session-panel { min-width:0; margin-top:0; }
.subscriber-online-data > .ont-power { min-width:0; margin:0; }
.debt-stat-card { background:linear-gradient(135deg,#be123c,#7f1d1d); }
.debt-total-card { background:linear-gradient(135deg,#831843,#4c1d95); }
.debt-stat-icon { display:grid; flex:none; place-items:center; width:2.2rem; height:2.2rem; border-radius:.7rem; background:rgba(255,255,255,.17); color:#fff; font-size:.78rem; font-weight:950; }
html[data-mode="light"] .subscriber-compact-debt { background:#b91c1c; color:#fff; border-color:#ef4444; }
html[data-mode="light"] .subscriber-compact-footer { border-color:#dbe4ef; }
html[data-mode="light"] :is(.debt-stat-card,.debt-total-card) { color:#fff; }
@media (max-width:900px) { .subscriber-online-data { grid-template-columns:1fr; } }
@media (max-width:700px) { .dashboard-secondary-stat-grid .debt-total-card { grid-column:span 2; } }

/* Subscriber details: actions and financial controls are reachable immediately. */
.detail-action-groups-top { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:.55rem; padding-bottom:.65rem; border-bottom:1px solid rgba(148,163,184,.18); }
.detail-action-groups-top .detail-action-group { padding:.6rem .7rem; }
.detail-action-groups-top .detail-action-group > p { margin-bottom:.4rem; }
.detail-action-groups-top .detail-action-group > div { display:flex; flex-wrap:wrap; gap:.4rem; }
.detail-action-groups-top .detail-action { min-height:2.4rem; padding:.45rem .6rem; }
.detail-finance-card,.detail-finance-stats { padding:.85rem 1rem; border:1px solid rgba(129,140,248,.22); border-radius:1rem; }
.detail-finance-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.65rem; }
.detail-finance-head small { display:block; color:#94a3b8; font-size:.65rem; font-weight:700; }
.detail-finance-head h3,.detail-finance-stats h3 { color:#e2e8f0; font-size:.85rem; font-weight:900; }
.detail-finance-head strong { color:#fda4af; font-size:1rem; white-space:nowrap; }
.detail-finance-card label { display:block; margin-bottom:.3rem; color:#b8c4da; font-size:.7rem; font-weight:800; }
.detail-finance-input-row { display:flex; align-items:center; gap:.5rem; max-width:24rem; }
.detail-finance-input-row input { min-width:0; height:2.55rem; }
.detail-finance-input-row span { color:#94a3b8; font-size:.75rem; font-weight:800; }
.detail-finance-buttons { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.detail-finance-buttons button { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:2.5rem; padding:.45rem .9rem; border:1px solid rgba(196,181,253,.3); border-radius:.75rem; background:#6d28d9; color:#fff; font-size:.75rem; font-weight:850; }
.detail-finance-buttons button:last-child { background:#047857; border-color:rgba(110,231,183,.35); }
.detail-finance-buttons button:disabled { opacity:.45; cursor:not-allowed; }
.detail-finance-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-top:.65rem; }
.detail-finance-stats-grid > div { min-width:0; padding:.65rem; border:1px solid rgba(148,163,184,.15); border-radius:.75rem; background:rgba(15,23,42,.4); }
.detail-finance-stats-grid small { display:block; color:#94a3b8; font-size:.62rem; font-weight:750; }
.detail-finance-stats-grid b { display:block; margin-top:.2rem; color:#f8fafc; font-size:.78rem; font-weight:900; overflow-wrap:anywhere; }
.detail-finance-stats-grid > div:first-child b { color:#fda4af; }
.detail-finance-stats-grid > div:nth-child(3) b { color:#86efac; }
.detail-finance-loading,.detail-finance-scope { margin-top:.55rem; color:#94a3b8; font-size:.66rem; }
.detail-finance-loading { display:flex; align-items:center; gap:.4rem; }
html[data-mode="light"] .detail-finance-head h3,html[data-mode="light"] .detail-finance-stats h3,html[data-mode="light"] .detail-finance-stats-grid b { color:#172554; }
html[data-mode="light"] .detail-finance-card label,html[data-mode="light"] .detail-finance-stats-grid small { color:#52627a; }
html[data-mode="light"] .detail-finance-stats-grid > div { background:#f8fafc; border-color:#dbe4ef; }
html[data-mode="light"] .detail-finance-stats-grid > div:first-child b { color:#be123c; }
html[data-mode="light"] .detail-finance-stats-grid > div:nth-child(3) b { color:#047857; }
@media (max-width:700px) { .detail-finance-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .detail-action-groups-top .detail-action-group > div { gap:.35rem; } }

/* Subscriber actions: compact rows without the former group cards. */
.detail-compact-actions { display:grid; gap:.62rem; padding-block:.2rem .65rem; border-bottom:1px solid rgba(148,163,184,.18); }
.detail-compact-row { display:grid; gap:.62rem; min-width:0; }
.detail-compact-primary,.detail-compact-connection { grid-template-columns:repeat(2,minmax(0,1fr)); }
.detail-compact-contact { grid-template-columns:repeat(3,minmax(0,1fr)); }
.detail-compact-primary > :only-child { grid-column:1 / -1; }
.detail-compact-actions .detail-action { min-width:0; min-height:3.6rem; padding:.5rem .45rem; border-radius:1.05rem; color:#fff; font-size:.75rem; font-weight:850; text-align:center; overflow-wrap:anywhere; transition:transform 140ms ease-out,filter 140ms ease-out,box-shadow 140ms ease-out; }
.detail-compact-actions .detail-action svg { flex:none; }
.detail-compact-actions .detail-action-success { background:linear-gradient(135deg,#059669,#047857); }
.detail-compact-actions .detail-action-primary { background:linear-gradient(135deg,#7c3aed,#4f46e5); }
.detail-compact-actions .detail-action-whatsapp { background:linear-gradient(135deg,#16a34a,#047857); }
.detail-compact-actions .detail-action-call { background:linear-gradient(135deg,#2563eb,#0369a1); }
.detail-compact-actions .detail-action-connection { background:linear-gradient(135deg,#0891b2,#0e7490); }
.detail-compact-actions .detail-action-danger { background:linear-gradient(135deg,#9f1239,#6b102c); }
.detail-compact-actions .detail-action:is(:active,.ftth-pressed) { transform:translateY(2px) scale(.97) !important; transition-duration:95ms !important; }
.detail-finance-card { padding:0; overflow:hidden; }
.detail-finance-card > summary.detail-finance-head { display:flex; align-items:center; justify-content:space-between; gap:.55rem; min-height:3.45rem; margin:0; padding:.7rem .85rem; cursor:pointer; list-style:none; }
.detail-finance-card > summary::-webkit-details-marker { display:none; }
.detail-finance-card > summary::after { content:'⌄'; color:#a5b4fc; font-size:1.15rem; transition:transform 150ms ease; }
.detail-finance-card[open] > summary::after { transform:rotate(180deg); }
.detail-finance-head > span { flex:0 0 auto; color:#e2e8f0; font-size:.8rem; font-weight:900; }
.detail-finance-head strong { min-width:0; margin-inline-start:auto; font-size:.82rem; overflow-wrap:anywhere; white-space:normal; }
.detail-finance-body { padding:0 .85rem .85rem; border-top:1px solid rgba(148,163,184,.12); }
.detail-finance-body > label { margin-top:.75rem; }
.detail-finance-body .detail-finance-stats { margin-top:.85rem; padding:.75rem 0 0; border:0; border-top:1px solid rgba(148,163,184,.15); border-radius:0; background:transparent; box-shadow:none; }
html[data-mode="light"] .detail-finance-head > span { color:#172554; }
@media (max-width:390px) { .detail-compact-actions .detail-action { font-size:.68rem; gap:.2rem; padding-inline:.3rem; } .detail-compact-contact .detail-action svg { width:.86rem; height:.86rem; } }

/* Mobile dashboard only: denser rhythm, unchanged statistics and navigation. */
.ftth-tasks-toolbar[hidden] { display:none !important; }
.dashboard-mini-icon { display:grid; flex:0 0 auto; place-items:center; width:2.35rem; height:2.35rem; border-radius:.75rem; background:rgba(255,255,255,.16); color:#fff; }
.dashboard-mini-icon svg { width:1.2rem; height:1.2rem; }
@media (max-width:700px) {
  body.ftth-dashboard-view .desktop-workspace { padding:calc(.35rem + env(safe-area-inset-top, 0px)) 16px 0 !important; min-width:0; overflow-x:clip; }
  body.ftth-dashboard-view #ftthAppHeader { box-sizing:border-box; width:100%; min-height:4.5rem; max-height:5rem; margin:0 0 .7rem !important; padding:.55rem .65rem; gap:.4rem; border-radius:1rem; }
  body.ftth-dashboard-view #ftthAppHeader > div:first-child { min-width:0; gap:.45rem; }
  body.ftth-dashboard-view #ftthAppHeader img { width:2rem; height:2rem; }
  body.ftth-dashboard-view #ftthAppHeader > div:first-child > div:first-child { width:2rem; height:2rem; }
  body.ftth-dashboard-view #ftthAppHeader .text-base { font-size:.84rem; white-space:nowrap; }
  body.ftth-dashboard-view #headerBranchName { max-width:8.5rem; font-size:.56rem; }
  body.ftth-dashboard-view #ftthAppHeader > div:last-child { min-width:0; gap:.23rem; }
  body.ftth-dashboard-view #headerWalletPill { min-width:0; max-width:6.5rem; min-height:1.9rem; padding:.28rem .35rem; gap:.16rem; font-size:.62rem; border-radius:.65rem; }
  body.ftth-dashboard-view #headerWalletVal { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  body.ftth-dashboard-view #headerWalletPill > span:last-child { font-size:.53rem; }
  body.ftth-dashboard-view :is(#headerRefreshBtn,#headerThemeBtn,#headerLogoutBtn) { flex:none; width:1.9rem; height:1.9rem; border-radius:.65rem; }
  body.ftth-dashboard-view :is(#headerRefreshBtn,#headerThemeBtn,#headerLogoutBtn) svg { width:.9rem; height:.9rem; }
  body.ftth-dashboard-view #subview-dashboard { gap:1rem; padding-bottom:calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
  body.ftth-dashboard-view .ftth-tasks-toolbar { gap:.4rem; }
  body.ftth-dashboard-view .ftth-tasks-button { min-height:2.15rem; padding:.3rem .55rem; font-size:.69rem; }
  body.ftth-dashboard-view .ftth-tasks-caption { width:auto; font-size:.6rem; }
  body.ftth-dashboard-view .sas-profile-switcher { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.42rem; min-width:0; padding:.45rem .55rem; border:1px solid rgba(129,140,248,.18); border-radius:.85rem; background:rgba(15,23,42,.4); }
  body.ftth-dashboard-view .sas-profile-switcher > div:first-child { display:contents; }
  body.ftth-dashboard-view .sas-profile-switcher > div:first-child > div:first-child { grid-column:1; grid-row:1; gap:.2rem; }
  body.ftth-dashboard-view .sas-profile-switcher > div:first-child > div:first-child > span { display:none; }
  body.ftth-dashboard-view .sas-profile-switcher > div:first-child p { font-size:.62rem; white-space:nowrap; }
  body.ftth-dashboard-view #resellerRailList { grid-column:2; grid-row:1; min-width:0; padding:0; }
  body.ftth-dashboard-view #resellerRailList .rail-reseller-btn { padding:.24rem .5rem; }
  body.ftth-dashboard-view #resellerRailList .rail-reseller-btn span:first-child { font-size:.62rem; max-width:6.2rem; }
  body.ftth-dashboard-view #btnManageResellers { grid-column:3; grid-row:1; min-height:1.9rem; padding:.28rem .4rem; gap:.18rem; font-size:.59rem; white-space:nowrap; }
  body.ftth-dashboard-view #btnManageResellers svg { width:.7rem; height:.7rem; }
  body.ftth-dashboard-view .manager-balance-card { min-height:5.4rem; padding:.7rem .85rem !important; border-radius:1rem; box-shadow:0 7px 18px -8px rgba(67,56,202,.4) !important; }
  body.ftth-dashboard-view .manager-balance-card #dashBalanceNumber { font-size:1.55rem; }
  body.ftth-dashboard-view .manager-balance-card #dashResellerTitle { margin-top:.1rem; font-size:.6rem; }
  body.ftth-dashboard-view .manager-balance-card .h-12 { width:2.3rem; height:2.3rem; border-radius:.8rem; }
  body.ftth-dashboard-view .manager-balance-card #icon-wallet-big svg { width:1.15rem; height:1.15rem; }
  body.ftth-dashboard-view .dashboard-stats-section h2 { margin-bottom:.55rem; font-size:.78rem; }
  body.ftth-dashboard-view :is(.dashboard-stat-grid,.dashboard-secondary-stat-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  body.ftth-dashboard-view .dashboard-secondary-stat-grid { margin-top:.65rem !important; }
  body.ftth-dashboard-view :is(.dashboard-stat-grid,.dashboard-secondary-stat-grid) .stat-card { min-width:0; min-height:5.9rem; height:5.9rem; padding:.72rem .75rem; border-radius:1rem; overflow:hidden; }
  body.ftth-dashboard-view .stat-card > div { min-width:0; align-items:center; }
  body.ftth-dashboard-view .stat-card > div > div:first-child { min-width:0; }
  body.ftth-dashboard-view .stat-card p:first-child { font-size:.72rem; line-height:1.2; }
  body.ftth-dashboard-view .stat-card [data-live-number] { margin-top:.2rem; font-size:1.38rem; line-height:1.15; overflow-wrap:anywhere; }
  body.ftth-dashboard-view .stat-card p:last-child:not(:first-child) { margin-top:.15rem; font-size:.57rem; line-height:1.2; }
  body.ftth-dashboard-view .stat-card .h-10,body.ftth-dashboard-view .dashboard-mini-icon { width:2rem; height:2rem; border-radius:.65rem; }
  body.ftth-dashboard-view .stat-card svg { width:1rem; height:1rem; }
  body.ftth-dashboard-view .dashboard-secondary-stat-grid .debt-total-card { grid-column:span 2; min-height:4.4rem; height:4.4rem; }
  body.ftth-dashboard-view .app-bottom-nav { padding:.3rem .7rem max(.3rem,env(safe-area-inset-bottom,0px)); }
  body.ftth-dashboard-view .bottom-nav-panel { padding:.25rem; }
  body.ftth-dashboard-view .bottom-nav-item { padding-block:.28rem; }
  body.ftth-dashboard-view .ambient-mesh-background { background:linear-gradient(180deg,rgba(4,10,28,.6),rgba(4,8,22,.78)); }
  body.ftth-dashboard-view .ambient-mesh-background::before { opacity:.09; }
  html[data-mode="light"] body.ftth-dashboard-view .ambient-mesh-background { background:linear-gradient(180deg,rgba(241,245,251,.92),rgba(238,244,252,.95)); }
  html[data-mode="light"] body.ftth-dashboard-view .ambient-mesh-background::before { opacity:.045; }
}
@media (max-width:390px) { body.ftth-dashboard-view .desktop-workspace { padding-inline:14px !important; } body.ftth-dashboard-view #headerWalletPill { max-width:5.5rem; } body.ftth-dashboard-view #headerBranchName { max-width:7.2rem; } }
@media (prefers-reduced-motion:reduce) { .detail-compact-actions .detail-action { transition:none !important; } .detail-finance-card > summary::after { transition:none; } }
/* Reference-led financial dashboard and history, scoped to King FTTH. */
.ftth-finance-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-block:18px}
.ftth-finance-tile{min-width:0;min-height:104px;padding:16px;border-radius:20px;border:1px solid rgba(96,165,250,.35);background:linear-gradient(135deg,rgba(24,42,86,.96),rgba(12,21,48,.96));color:#eef7ff;display:flex;gap:12px;align-items:flex-start;text-align:right;box-shadow:0 10px 24px rgba(2,6,23,.14)}
.ftth-finance-recent{border-color:rgba(34,211,238,.38);background:linear-gradient(135deg,rgba(12,104,147,.9),rgba(18,38,85,.96))}
.ftth-finance-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.14);color:#8ce9ff}
.ftth-finance-copy{display:grid;gap:3px;min-width:0}.ftth-finance-copy strong{font-size:14px;line-height:1.3}.ftth-finance-copy small{font-size:11px;color:#bdc9e6}.ftth-finance-copy>b{font-size:20px;color:#fff;line-height:1.2}.ftth-finance-pair{display:flex;gap:12px;flex-wrap:wrap;color:#a8e5d6;font-size:12px}.ftth-finance-pair b{color:white}
.ftth-history{display:grid;gap:14px;max-height:68vh;overflow:auto;padding-bottom:12px}.ftth-history-note{font-size:12px;line-height:1.5;color:#aab9d2}.ftth-history-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ftth-history-summary>div{display:grid;gap:4px;min-width:0;padding:11px;border:1px solid rgba(129,140,248,.27);border-radius:14px;background:rgba(30,41,78,.58)}.ftth-history-summary small{font-size:10px;color:#b8c3da}.ftth-history-summary b{font-size:12px;color:#8eefd2;overflow-wrap:anywhere}.ftth-history-filters{display:flex;gap:7px;overflow-x:auto}.ftth-history-filters button{flex:none;border:1px solid rgba(129,140,248,.3);border-radius:999px;padding:7px 14px;color:#d5dcfa;background:rgba(255,255,255,.05);font-size:12px;font-weight:800}.ftth-history-filters button.active{background:linear-gradient(110deg,#6d28d9,#0891b2);color:white}.ftth-history-list{display:grid;gap:10px}.ftth-history-empty{padding:30px 10px;text-align:center;color:#aebbd3}.ftth-ledger-card{padding:14px;border-radius:18px;border:1px solid rgba(34,211,238,.3);border-inline-start:4px solid #38bdf8;background:rgba(13,24,49,.8);min-width:0}.ftth-ledger-card.is-activation{border-inline-start-color:#4ade80}.ftth-ledger-card.is-other{border-inline-start-color:#fb7185}.ftth-ledger-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ftth-ledger-card-top strong{color:#9ce6d6;font-size:15px}.ftth-ledger-kind{padding:4px 8px;border-radius:999px;color:#d4fce7;background:rgba(22,163,74,.15);font-size:10px;font-weight:800}.ftth-ledger-card.is-payment .ftth-ledger-kind{color:#bae6fd;background:rgba(14,165,233,.16)}.ftth-ledger-card h4{margin:7px 0 1px;font-weight:900;font-size:15px;color:#fff}.ftth-ledger-card p,.ftth-ledger-card small{font-size:11px;color:#a9b9d2;overflow-wrap:anywhere}.ftth-ledger-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid rgba(148,163,184,.13)}.ftth-ledger-actions button,.ftth-ledger-actions a{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid rgba(148,163,184,.26);border-radius:999px;background:rgba(255,255,255,.08);color:#eef4ff;font-size:11px;font-weight:800}.ftth-ledger-actions a{color:#8ef0c5}
@media(max-width:640px){.ftth-finance-overview{grid-template-columns:1fr;gap:10px}.ftth-finance-tile{min-height:85px;padding:12px}.ftth-history-summary{grid-template-columns:1fr 1fr}.ftth-history-summary>div:first-child{grid-column:1/-1}.ftth-history{max-height:calc(85dvh - 100px)}}
@media(prefers-reduced-motion:reduce){.ftth-finance-tile,.ftth-history button{transition:none!important}}

/* King FTTH visual system: calm SaaS surfaces, consistent rhythm and accessible states. */
:root {
  --ftth-bg: #080b18;
  --ftth-content: #0e1324;
  --ftth-card: #151b31;
  --ftth-card-raised: #1b2340;
  --ftth-primary: #7c3aed;
  --ftth-primary-soft: #a78bfa;
  --ftth-gold: #f5b942;
  --ftth-text: #f8fafc;
  --ftth-muted: #aab4c8;
  --ftth-border-soft: rgba(255,255,255,.10);
  --ftth-success: #34d399;
  --ftth-warning: #f59e0b;
  --ftth-danger: #ef4444;
  --ftth-info: #38bdf8;
  --ftth-radius-card: 16px;
  --ftth-radius-control: 11px;
  --ftth-shadow-soft: 0 8px 24px rgba(2,6,23,.18);
}
html[data-mode="light"] {
  --ftth-bg:#f5f7fb; --ftth-content:#f5f7fb; --ftth-card:#fff; --ftth-card-raised:#fff;
  --ftth-text:#111827; --ftth-muted:#64748b; --ftth-border-soft:#e2e8f0;
  --ftth-primary:#6d28d9; --ftth-shadow-soft:0 8px 24px rgba(15,23,42,.08);
}
html,body { background:var(--ftth-bg); color:var(--ftth-text); }
body { font-family:'Cairo',system-ui,sans-serif; text-rendering:optimizeLegibility; }
#appShell, .desktop-workspace { min-width:0; }
.card-glass {
  background:var(--ftth-card) !important;
  border:1px solid var(--ftth-border-soft) !important;
  box-shadow:var(--ftth-shadow-soft) !important;
  backdrop-filter:none;
}
.dashboard-alert-panel, .detail-network-summary, .detail-section, .detail-hero,
.detail-finance-card, .ftth-edit-sections>section { border-radius:var(--ftth-radius-card) !important; }
.dashboard-alert-panel h3, .detail-section summary, .detail-network-summary h3 { color:var(--ftth-text); }
.text-muted-foreground, .subscriber-subline, .detail-profile-extras, .detail-data-line>span { color:var(--ftth-muted) !important; }
.subscriber-card { background:var(--ftth-card) !important; border-color:var(--ftth-border-soft) !important; border-radius:var(--ftth-radius-card) !important; box-shadow:var(--ftth-shadow-soft) !important; }
.subscriber-card:hover { border-color:color-mix(in srgb,var(--ftth-primary) 45%,var(--ftth-border-soft)) !important; transform:translateY(-1px); }
.subscriber-name { color:var(--ftth-text); font-size:1rem; }
button, a, [role="button"] { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--ftth-primary-soft); outline-offset:2px; }
.btn-gradient, #dashGoAddBtn, #subHeaderAddBtn { min-height:44px; border-radius:var(--ftth-radius-control) !important; background:var(--ftth-primary) !important; box-shadow:0 7px 16px -10px var(--ftth-primary) !important; }
.detail-action, .detail-finance-buttons button, .ftth-history-filters button, .ftth-ledger-actions button, .ftth-ledger-actions a { border-radius:var(--ftth-radius-control) !important; min-height:42px; transition:transform .12s ease-out,filter .16s ease,box-shadow .16s ease; }
.detail-action:active, .detail-finance-buttons button:active, .ftth-history-filters button:active, .ftth-ledger-actions button:active, .ftth-ledger-actions a:active, .btn-gradient:active { transform:translateY(2px) scale(.98); filter:brightness(.96); }
.dashboard-stat-grid .stat-card, .dashboard-secondary-stat-grid .stat-card { min-height:108px; border-radius:var(--ftth-radius-card) !important; box-shadow:var(--ftth-shadow-soft) !important; }
.ftth-finance-tile { border-radius:var(--ftth-radius-card); box-shadow:var(--ftth-shadow-soft); }
.detail-data-line { min-height:42px; padding-block:.45rem; border-bottom:1px solid var(--ftth-border-soft); }
.detail-data-line:last-child { border-bottom:0; }
.detail-data-line>b { color:var(--ftth-text); overflow-wrap:anywhere; }
.detail-hero { padding:1rem !important; }
.bottom-nav-panel { border-color:var(--ftth-border-soft) !important; box-shadow:0 12px 30px rgba(2,6,23,.22) !important; }
.input-glass, .access-input, select { min-height:44px; border-radius:var(--ftth-radius-control) !important; }
@media (max-width:700px) {
  .card-glass { box-shadow:0 6px 18px rgba(2,6,23,.14) !important; }
  .subscriber-card { padding:1rem !important; }
  .dashboard-stat-grid .stat-card, .dashboard-secondary-stat-grid .stat-card { min-height:98px; }
  .detail-compact-actions .detail-action { min-height:50px; }
  .app-bottom-nav { padding-bottom:calc(.35rem + env(safe-area-inset-bottom,0px)); }
  #subview-subscribers { padding-bottom:calc(5.4rem + env(safe-area-inset-bottom,0px)); }
}
@media (min-width:701px) and (max-width:1100px) {
  .dashboard-stat-grid, .dashboard-secondary-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}
.detail-profile-extras{display:flex;gap:8px 15px;flex-wrap:wrap;margin-top:8px;color:#cbd5e1;font-size:12px}.detail-profile-extras span{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere}
.detail-money-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}.detail-money-summary>div{min-width:0;min-height:82px;padding:14px;border:1px solid rgba(125,211,252,.28);border-radius:17px;display:grid;gap:4px;background:linear-gradient(110deg,#076aa3,#12b6d2);color:white}.detail-money-summary .detail-money-debt{background:linear-gradient(110deg,#ca2169,#ef4da7);border-color:rgba(251,113,133,.45)}.detail-money-summary small{font-size:11px}.detail-money-summary b{font-size:18px;overflow-wrap:anywhere}
.ftth-history-person{display:grid;gap:2px;padding:6px 2px}.ftth-history-person strong{font-size:16px;color:#fff}.ftth-history-person small{font-size:11px;color:#afbbd4}.ftth-person-stats .ftth-history-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.ftth-person-stats .ftth-history-summary>div:first-child{grid-column:auto}
.ftth-payment-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ftth-payment-info>p{grid-column:1/-1;color:#b8c5da;font-size:12px}.ftth-payment-choice{min-width:0;min-height:150px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:7px;border:1px solid rgba(56,189,248,.4);border-radius:18px;background:linear-gradient(145deg,#074e9f,#0872d5);color:#fff;text-align:right}.ftth-payment-choice.is-activation{background:linear-gradient(145deg,#047857,#059669);border-color:rgba(110,231,183,.5)}.ftth-payment-choice strong{font-size:16px}.ftth-payment-choice span{font-size:12px;opacity:.85}
.ftth-edit-sections{display:grid;gap:12px}.ftth-edit-sections>section{display:grid;gap:10px;padding:15px;border:1px solid rgba(129,140,248,.25);border-radius:17px;background:rgba(31,45,82,.72)}.ftth-edit-sections h4{font-weight:900;font-size:15px;color:#fff}.ftth-edit-sections p{font-size:11px;line-height:1.55;color:#b4c1d7}.ftth-edit-sections label{display:grid;gap:5px;font-size:11px;color:#dce8fa;font-weight:800}.ftth-edit-actions{display:flex;gap:8px;flex-wrap:wrap}.ftth-edit-actions button,.ftth-edit-actions a{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:38px;padding:7px 13px;border:1px solid rgba(129,140,248,.35);border-radius:11px;background:linear-gradient(120deg,#4338ca,#2563eb);color:#fff;font-size:12px;font-weight:900}.ftth-edit-actions button:disabled{opacity:.45}
#modalDialog:has(.ftth-history){width:min(100%,48rem);height:min(92dvh,940px);max-height:92dvh;flex-direction:column;background:#0e1838;border-color:rgba(96,165,250,.35)}#modalDialog:has(.ftth-history) #modalContent{min-height:0;flex:1;overflow:hidden}#modalDialog:has(.ftth-history) .ftth-history{max-height:100%;height:100%;overflow:auto}
@media(max-width:640px){#modalDialog:has(.ftth-history){height:100dvh;max-height:100dvh;border-radius:0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}.ftth-ledger-actions{gap:5px}.ftth-ledger-actions button,.ftth-ledger-actions a{padding:6px 8px;font-size:10px}}
@media(max-width:430px){.detail-money-summary b{font-size:15px}.ftth-payment-info{gap:8px}.ftth-payment-choice{min-height:130px;padding:12px}.ftth-payment-choice strong{font-size:13px}.ftth-history-summary b{font-size:11px}}
/* Detail controls: keep real debt actions visible, and let contact labels fit. */
.detail-money-summary{grid-template-columns:minmax(0,1fr)}
.detail-money-summary>div{min-height:66px}
.detail-compact-contact .detail-action-call,.detail-compact-contact .detail-action-whatsapp{width:100%;height:auto;min-height:3.6rem;flex:1 1 auto;border-radius:1.05rem;padding:.5rem .35rem;font-size:.76rem;line-height:1.15;white-space:nowrap;gap:.35rem}
.detail-compact-contact .detail-action-call svg,.detail-compact-contact .detail-action-whatsapp svg{width:1.1rem;height:1.1rem;flex:none}
.detail-finance-card > div.detail-finance-head{display:flex;align-items:center;justify-content:space-between;gap:.55rem;min-height:3.2rem;margin:0;padding:.7rem .85rem}
body.ftth-dashboard-view #dashOnlineNowCount{font-size:clamp(1.9rem,6vw,2.25rem)!important;line-height:1.1;font-weight:900}
@media(max-width:390px){.detail-compact-contact .detail-action-call,.detail-compact-contact .detail-action-whatsapp{font-size:.72rem;gap:.2rem;padding-inline:.22rem}.detail-compact-contact .detail-action-call svg,.detail-compact-contact .detail-action-whatsapp svg{width:1rem;height:1rem}}
.ftth-history-more{min-height:42px;border-radius:12px;border:1px solid rgba(56,189,248,.42);background:rgba(8,145,178,.17);color:#bae6fd;font-size:12px;font-weight:900}
/* Reference dashboard cards: icons sit directly on the colored card, without a grey wrapper. */
.dashboard-stat-grid .stat-card > div > div[style*="background"],
.dashboard-secondary-stat-grid .stat-card > div > div[style*="background"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Final SaaS polish: one semantic palette and restrained inner-page surfaces. */
:root {
  --background:#080B18; --surface:#151B31; --surface-elevated:#1B2340; --surface-muted:#0E1324;
  --text-primary:#F8FAFC; --text-secondary:#AAB4C8; --text-muted:#94A3B8; --border:rgba(255,255,255,.10);
  --primary:#7C3AED; --primary-hover:#6D28D9; --success:#22C55E; --warning:#F59E0B; --danger:#EF4444; --info:#38BDF8;
  --shadow-sm:0 2px 8px rgba(2,6,23,.18); --shadow-md:0 8px 24px rgba(2,6,23,.24);
}
html[data-mode="light"] {
  --background:#F5F7FB; --surface:#FFFFFF; --surface-elevated:#FFFFFF; --surface-muted:#EEF2F7;
  --text-primary:#111827; --text-secondary:#475569; --text-muted:#64748B; --border:#E2E8F0;
  --primary:#6D28D9; --primary-hover:#5B21B6; --success:#047857; --warning:#B45309; --danger:#B91C1C; --info:#0369A1;
  --shadow-sm:0 2px 8px rgba(15,23,42,.08); --shadow-md:0 8px 24px rgba(15,23,42,.12);
}
#view-app { background:var(--background); color:var(--text-primary); }
#view-app .card-glass, #view-app .subscriber-card, #view-app .detail-hero, #view-app .detail-section,
#view-app .detail-stat, #view-app .detail-network-summary, #view-app .detail-finance-card {
  background:var(--surface) !important; border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important; backdrop-filter:none !important;
}
#view-app :is(h1,h2,h3,h4,.subscriber-name,.detail-data-line>b,.detail-stat>b) { color:var(--text-primary); }
#view-app :is(.text-muted-foreground,.subscriber-subline,.detail-profile-extras,.detail-data-line>span,.detail-stat>p,.detail-stat>small) { color:var(--text-secondary) !important; }
#view-app :is(input,select,textarea,.input-glass,.access-input) { min-height:44px; background:var(--surface-muted); color:var(--text-primary); border-color:var(--border); }
#view-app .subscriber-card:hover { border-color:color-mix(in srgb,var(--primary) 45%,var(--border)) !important; transform:translateY(-1px); }
#view-app .subview { min-width:0; content-visibility:auto; contain-intrinsic-size:600px; }
#view-app :is(button,a,[role="button"]):focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
#view-app .btn-gradient, #view-app #dashGoAddBtn, #view-app #subHeaderAddBtn { background:var(--primary) !important; color:#fff !important; box-shadow:var(--shadow-sm) !important; }
#view-app .detail-action, #view-app .detail-finance-buttons button { min-height:44px; border-radius:12px !important; }
#view-app .detail-action-danger { background:#991B1B !important; }
#view-app .ftth-finance-tile, #view-app .ftth-ledger-card { box-shadow:var(--shadow-sm); }
#modalBackdrop { background:rgba(2,6,23,.84) !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; }
#modalDialog { background:rgba(14,19,36,.93) !important; backdrop-filter:blur(16px) !important; -webkit-backdrop-filter:blur(16px) !important; box-shadow:0 18px 46px rgba(0,0,0,.5) !important; animation:ftth-modal-enter .2s ease-out both; }
#modalDialog > .flex.items-center.justify-between { position:sticky; top:0; z-index:3; background:rgba(14,19,36,.97); padding-top:.2rem; }
#modalCloseBtn { min-width:44px; min-height:44px; width:44px !important; height:44px !important; }
body.modal-open { overflow:hidden; }
@keyframes ftth-modal-enter { from{opacity:0;transform:scale(.98)} to{opacity:1;transform:scale(1)} }
@media (max-width:700px) { #view-app .subview { padding-bottom:calc(5.6rem + env(safe-area-inset-bottom,0px)); } #modalDialog { max-height:94dvh; } #view-app .card-glass { box-shadow:var(--shadow-sm) !important; } }
@media (prefers-reduced-motion:reduce) { #modalDialog { animation:none; } #view-app .subscriber-card:hover { transform:none; } }
.header-alerts-btn,.header-notification-btn { position:relative; }
:is(.header-alerts-btn,.header-notification-btn) > b { position:absolute; top:-.22rem; left:-.22rem; min-width:1.05rem; height:1.05rem; padding:0 .2rem; display:grid; place-items:center; border-radius:999px; background:#ef4444; color:#fff; font-size:.58rem; line-height:1; font-weight:900; border:2px solid var(--background); }
:is(.header-alerts-btn,.header-notification-btn) > b[hidden] { display:none; }
.header-tickets-btn { color:#7dd3fc !important; }
html[data-mode="light"] #view-app :is(.header-alerts-btn,.header-notification-btn) { background:var(--surface-muted) !important; border-color:var(--border) !important; color:var(--text-secondary) !important; }
.ftth-ticket-summary { border-color:rgba(34,211,238,.25); }
.ftth-ticket-summary b { color:#22d3ee; }
.ftth-ticket-item { border-inline-start:3px solid rgba(34,211,238,.65); }
.ftth-ticket-detail > h4 { color:#e0f2fe; font-size:.95rem; font-weight:900; }
html[data-mode="light"] .ftth-ticket-detail > h4 { color:#172554; }

.dashboard-tickets-card { overflow:hidden; }
.dashboard-tickets-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-bottom:.7rem; }
.dashboard-tickets-summary > span { display:flex; align-items:baseline; justify-content:center; gap:.45rem; padding:.7rem; border:1px solid rgba(34,211,238,.18); border-radius:.85rem; background:rgba(8,145,178,.08); }
.dashboard-tickets-summary b { color:#67e8f9; font-size:1.1rem; font-weight:900; }
.dashboard-tickets-summary small { color:#94a3b8; font-size:.68rem; font-weight:750; }
.dashboard-ticket-rail { display:flex; gap:.35rem; margin:0 0 .7rem; padding:.28rem; border:1px solid rgba(148,163,184,.16); border-radius:.9rem; background:rgba(15,23,42,.35); }
.dashboard-ticket-rail button { display:flex; flex:1; align-items:center; justify-content:center; gap:.45rem; min-height:2.45rem; padding:.5rem .7rem; border:1px solid transparent; border-radius:.7rem; color:#94a3b8; font-size:.72rem; font-weight:850; transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease; }
.dashboard-ticket-rail button b { display:grid; place-items:center; min-width:1.55rem; min-height:1.35rem; padding:0 .35rem; border-radius:999px; background:rgba(148,163,184,.12); color:inherit; font-size:.65rem; }
.dashboard-ticket-rail button.active { border-color:rgba(34,211,238,.36); background:linear-gradient(135deg,rgba(8,145,178,.2),rgba(79,70,229,.18)); color:#a5f3fc; box-shadow:0 7px 18px -14px rgba(34,211,238,.8); }
.dashboard-tickets-list { display:grid; gap:.5rem; }
.dashboard-tickets-list > button { display:flex; align-items:center; justify-content:space-between; gap:.7rem; width:100%; padding:.7rem .8rem; border:1px solid rgba(148,163,184,.16); border-radius:.85rem; background:rgba(15,23,42,.45); text-align:start; }
.dashboard-tickets-list > button span { display:grid; gap:.15rem; min-width:0; }
.dashboard-tickets-list > button b { color:#e2e8f0; font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-tickets-list > button small { color:#94a3b8; font-size:.65rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-tickets-list > button i { flex:none; color:#fbbf24; font-size:.65rem; font-style:normal; font-weight:800; }
.dashboard-tickets-list > p { padding:.9rem; color:#94a3b8; text-align:center; font-size:.75rem; }
.dashboard-tickets-list > p .action-spinner { display:inline-block; margin-inline-end:.35rem; vertical-align:middle; }
.ftth-task-footer button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:2.25rem; }
.ftth-task-footer button[disabled] { cursor:wait; opacity:.82; }
.ftth-task-footer button .action-spinner { width:.82rem; height:.82rem; }
html[data-mode="light"] .dashboard-tickets-summary > span,
html[data-mode="light"] .dashboard-tickets-list > button { background:#fff; border-color:#dbeafe; }
html[data-mode="light"] .dashboard-ticket-rail { background:#eef4fb; border-color:#dbe3ef; }
html[data-mode="light"] .dashboard-ticket-rail button { color:#64748b; }
html[data-mode="light"] .dashboard-ticket-rail button.active { background:linear-gradient(135deg,#e0f2fe,#eef2ff); border-color:#7dd3fc; color:#075985; }
html[data-mode="light"] .dashboard-tickets-summary b { color:#0369a1; }
html[data-mode="light"] .dashboard-tickets-list > button b { color:#172554; }
html[data-mode="light"] :is(.dashboard-tickets-summary small,.dashboard-tickets-list small,.dashboard-tickets-list > p) { color:#52627a; }

.onboarding-form-section { display:grid; gap:.75rem; padding:1rem; border:1px solid rgba(148,163,184,.16); border-radius:1rem; background:rgba(15,23,42,.3); }
.onboarding-form-section h3 { color:#e0f2fe; font-size:.85rem; font-weight:900; }
.onboarding-form-section label { display:block; min-width:0; }
.onboarding-form-section label > span { display:block; margin-bottom:.32rem; color:#a5b4fc; font-size:.68rem; font-weight:800; }
.onboarding-form-section > small { color:#94a3b8; font-size:.64rem; }
.onboarding-form-section .file-input { padding:.55rem; font-size:.68rem; }
.onboarding-location-btn { align-self:end; min-height:2.8rem; padding:.6rem .75rem; border:1px solid rgba(34,211,238,.3); border-radius:.75rem; background:rgba(6,182,212,.12); color:#67e8f9; font-size:.7rem; font-weight:850; }
.onboarding-otp { display:grid; gap:.8rem; }
.onboarding-otp p { color:#cbd5e1; font-size:.78rem; line-height:1.8; }
.onboarding-otp small { min-height:1rem; color:#fb7185; font-size:.7rem; font-weight:800; }
.onboarding-otp button { min-height:2.9rem; border-radius:.85rem; color:#fff; font-size:.78rem; font-weight:900; }
html[data-mode="light"] .onboarding-form-section { background:#fff; border-color:#dbeafe; }
html[data-mode="light"] .onboarding-form-section h3 { color:#172554; }
html[data-mode="light"] .onboarding-form-section label > span { color:#334155; }
html[data-mode="light"] .onboarding-otp p { color:#334155; }

/* Colored metric cards intentionally keep a white foreground in both themes. */
#view-app .stat-card,
#view-app .stat-card *,
#view-app .ftth-finance-tile,
#view-app .ftth-finance-tile *,
#view-app .manager-balance-card,
#view-app .manager-balance-card * {
  color:#fff !important;
}
#view-app .stat-card [data-live-number] { font-size:1.9rem !important; font-weight:900 !important; line-height:1.15; }
#view-app .stat-card p:last-child:not(:first-child),
#view-app .ftth-finance-tile small { color:rgba(255,255,255,.88) !important; }
#view-app .stat-card svg, #view-app .ftth-finance-tile svg, #view-app .manager-balance-card svg { color:#fff !important; stroke:#fff !important; filter:none !important; }
#view-app .stat-card .dashboard-mini-icon, #view-app .stat-card > div > div[style*="background"] { background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.18) !important; box-shadow:none !important; }
#view-app .manager-balance-card .bg-amber-400 { color:#fff !important; background:rgba(255,255,255,.16) !important; }
html[data-mode="light"] #view-app .sas-profile-switcher { color:var(--text-primary); background:var(--surface); border-color:var(--border); }
html[data-mode="light"] #view-app .sas-profile-switcher .text-primary { color:var(--primary-hover) !important; }
html[data-mode="light"] #view-app #btnManageResellers { color:var(--primary-hover) !important; background:var(--primary-soft) !important; border-color:#c4b5fd !important; }
html[data-mode="light"] #view-app .sas-profile-switcher p { color:var(--text-primary) !important; }
@media (max-width:700px) { #view-app .stat-card [data-live-number] { font-size:1.45rem !important; } }
/* Light mode must never recolor the foreground of colored statistics cards. */
html[data-mode="light"] #view-app .stat-card[data-nav-filter],
html[data-mode="light"] #view-app .stat-card[data-nav-filter] *,
html[data-mode="light"] #view-app .debt-total-card,
html[data-mode="light"] #view-app .debt-total-card * {
  color:#fff !important;
}
html[data-mode="light"] #view-app .stat-card[data-nav-filter] [data-live-number] {
  color:#fff !important;
  font-weight:900 !important;
}
html[data-mode="light"] #view-app .stat-card[data-nav-filter] svg,
html[data-mode="light"] #view-app .debt-total-card svg { color:#fff !important; stroke:#fff !important; }
/* Wallet hero remains a saturated brand surface, so its foreground stays white in daylight. */
html[data-mode="light"] #view-app .manager-balance-card,
html[data-mode="light"] #view-app .manager-balance-card * {
  color:#fff !important;
}
html[data-mode="light"] #view-app .manager-balance-card :is(.text-indigo-200,.text-cyan-300,.text-white) {
  color:#fff !important;
}
html[data-mode="light"] #view-app .manager-balance-card #dashResellerTitle { color:rgba(255,255,255,.9) !important; }
html[data-mode="light"] #view-app .manager-balance-card #dashBalanceNumber { color:#fff !important; }
/* Dashboard metric icon frame: circular translucent ring like the reference. */
#view-app .stat-card .dashboard-mini-icon,
#view-app .stat-card > div > div[style*="background"],
#view-app .dashboard-stat-grid .stat-card .h-10,
#view-app .dashboard-secondary-stat-grid .stat-card .h-10 {
  width:2.55rem !important;
  height:2.55rem !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  box-shadow:none !important;
}
#view-app .stat-card .dashboard-mini-icon svg,
#view-app .stat-card > div > div[style*="background"] svg { width:1.35rem !important; height:1.35rem !important; }
/* Dashboard card order follows the requested RTL rows without changing data handlers. */
#view-app .dashboard-stats-section { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
#view-app .dashboard-stats-section > h2 { grid-column:1/-1; margin-bottom:0 !important; }
#view-app .dashboard-stats-section > .dashboard-stat-grid,
#view-app .dashboard-stats-section > .dashboard-secondary-stat-grid { display:contents; }
#view-app .dashboard-stats-section [data-nav-filter="all"] { order:1; }
#view-app .dashboard-stats-section [data-nav-filter="online"] { order:2; }
#view-app .dashboard-stats-section [data-nav-filter="offline"] { order:3; }
#view-app .dashboard-stats-section [data-nav-filter="active"] { order:4; }
#view-app .dashboard-stats-section [data-nav-filter="expired"] { order:5; }
#view-app .dashboard-stats-section [data-nav-filter="expiring"] { order:6; }
#view-app .dashboard-stats-section [data-nav-filter="debt"] { order:7; }
#view-app .dashboard-stats-section [data-nav-filter="suspended"] { order:8; background:linear-gradient(135deg,#475569,#334155) !important; }
#view-app .dashboard-stats-section .debt-total-card { order:9; grid-column:span 2; }
@media(max-width:1100px){ #view-app .dashboard-stats-section { grid-template-columns:repeat(2,minmax(0,1fr)); } #view-app .dashboard-stats-section > h2 { grid-column:1/-1; } }
@media(max-width:700px){ #view-app .dashboard-stats-section { gap:10px; } #view-app .dashboard-stats-section .debt-total-card { grid-column:span 2; } }
/* Accent selection is intentionally visible on interactive controls and navigation. */
#view-app :is(.appearance-title-icon,.appearance-accent.active,.appearance-surface.active) { color:var(--color-accent) !important; border-color:var(--color-accent) !important; }
#view-app :is(.desktop-nav-item.active,.bottom-nav-item.active,.subscriber-filter-chip.active,.ftth-history-filters button.active) { background:var(--grad-primary) !important; color:#fff !important; border-color:var(--color-accent) !important; }
#view-app :is(#btnManageResellers,.activation-primary-btn,.detail-action-primary,.ftth-history-more) { border-color:color-mix(in srgb,var(--color-primary) 55%,transparent) !important; }
#view-app #btnManageResellers { color:var(--color-primary) !important; background:color-mix(in srgb,var(--color-primary) 16%,transparent) !important; }
#view-app :is(.activation-primary-btn,.detail-action-primary) { background:var(--grad-primary) !important; color:#fff !important; }
#view-app .appearance-accent i { background:var(--swatch) !important; }
.ftth-history-periods { display:flex; gap:7px; overflow-x:auto; padding-block:2px; }
.ftth-history-periods button { flex:none; min-height:34px; padding:6px 12px; border:1px solid rgba(129,140,248,.28); border-radius:999px; background:rgba(255,255,255,.05); color:#cbd5e1; font-size:11px; font-weight:800; }
.ftth-history-periods button.active { background:var(--grad-primary); border-color:transparent; color:#fff; }
html[data-mode="light"] .ftth-history-periods button { background:#eef2f7; border-color:#d7dee9; color:#475569; }
html[data-mode="light"] .ftth-history-periods button.active { background:var(--grad-primary); color:#fff; }
.header-role-badge { display:inline-flex; align-items:center; margin-inline-start:.35rem; padding:.12rem .42rem; border:1px solid rgba(167,139,250,.32); border-radius:999px; background:rgba(124,58,237,.14); color:#c4b5fd; font-size:.58rem; font-weight:900; vertical-align:middle; }
html[data-mode="light"] .header-role-badge { background:#ede9fe; border-color:#c4b5fd; color:#5b21b6; }
.whatsapp-panel { display:grid; gap:12px; padding:16px; }
.whatsapp-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.whatsapp-panel-head h2 { font-size:16px; font-weight:900; }
.whatsapp-panel-head p { margin-top:3px; color:var(--ftth-muted); font-size:11px; }
.whatsapp-status-badge { padding:5px 9px; border-radius:999px; background:rgba(148,163,184,.14); color:#cbd5e1; font-size:11px; font-weight:900; white-space:nowrap; }
.whatsapp-status-badge[data-status="connected"] { background:rgba(16,185,129,.16); color:#6ee7b7; }
.whatsapp-status-badge[data-status="qr"] { background:rgba(245,158,11,.16); color:#fcd34d; }
.whatsapp-qr-area { display:grid; place-items:center; gap:8px; padding:14px; border:1px dashed rgba(129,140,248,.35); border-radius:14px; background:rgba(2,6,23,.22); text-align:center; }
.whatsapp-qr-area img { width:min(280px,100%); aspect-ratio:1; border-radius:10px; background:#fff; padding:8px; }
.whatsapp-qr-area small { color:var(--ftth-muted); font-size:11px; }
.whatsapp-panel-actions { display:flex; gap:8px; flex-wrap:wrap; }
.whatsapp-panel-actions button { flex:1 1 10rem; min-height:42px; border-radius:12px; }
.whatsapp-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid rgba(148,163,184,.18); border-radius:12px; background:rgba(15,23,42,.22); color:var(--ftth-muted); font-size:11px; }
.whatsapp-meta b { color:var(--ftth-text); direction:ltr; unicode-bidi:plaintext; }
.whatsapp-meta button { margin-inline-start:auto; min-height:34px; padding:5px 10px; }
.whatsapp-help { color:var(--ftth-muted); font-size:11px; line-height:1.6; }
html[data-mode="light"] .whatsapp-qr-area { background:#f8fafc; border-color:#cbd5e1; }
html[data-mode="light"] .whatsapp-meta { background:#f8fafc; border-color:#d7dee9; }
.wa-tabs { display:flex; gap:6px; padding:4px; overflow-x:auto; border-radius:12px; background:rgba(100,116,139,.12); }
.wa-tabs button { flex:1 0 auto; min-height:38px; padding:7px 11px; border-radius:9px; color:var(--ftth-muted); font-size:12px; font-weight:800; }
.wa-tabs button.active { background:var(--color-primary); color:#fff; }
[data-wa-panel] { display:grid; gap:12px; min-width:0; }
[data-wa-panel][hidden], .whatsapp-qr-area[hidden], .wa-error[hidden] { display:none !important; }
.wa-setting-row,.wa-queue-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wa-setting-row { padding:12px; border:1px solid rgba(148,163,184,.2); border-radius:12px; }
.wa-setting-row strong,.wa-setting-row small { display:block; }
.wa-setting-row small { margin-top:4px; color:var(--ftth-muted); }
.wa-setting-row input { width:20px; height:20px; accent-color:var(--color-primary); }
.wa-template-list,.wa-queue-list { display:grid; gap:10px; }
.wa-template { display:grid; gap:8px; padding:12px; border:1px solid rgba(148,163,184,.2); border-radius:12px; }
.wa-template label { display:flex; align-items:center; gap:8px; font-weight:800; }
.wa-template input { accent-color:var(--color-primary); }
.wa-template textarea,.wa-test input { width:100%; min-width:0; padding:10px 12px; border:1px solid rgba(148,163,184,.28); border-radius:10px; background:rgba(15,23,42,.3); color:var(--ftth-text); outline:none; }
.wa-template textarea:focus,.wa-test input:focus { border-color:var(--color-primary); }
.wa-template textarea { resize:vertical; line-height:1.7; }
.wa-test { display:grid; gap:9px; padding-top:12px; border-top:1px solid rgba(148,163,184,.2); }
.wa-test h3 { font-weight:900; font-size:13px; }
.wa-test-fields { display:grid; grid-template-columns:minmax(120px,.5fr) minmax(170px,1fr) auto; gap:8px; }
.wa-test-fields button { padding:8px 12px; border-radius:10px; }
.wa-test small,.wa-empty { color:var(--ftth-muted); }
.wa-error,.wa-queue-item em { color:#fca5a5; font-size:12px; font-style:normal; }
.wa-queue-head { font-size:12px; color:var(--ftth-muted); }
.wa-queue-head button { padding:7px 11px; border-radius:10px; }
.wa-queue-item { display:grid; gap:6px; padding:12px; border:1px solid rgba(148,163,184,.2); border-radius:12px; background:rgba(15,23,42,.18); }
.wa-queue-title { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.wa-queue-title span { padding:3px 8px; border-radius:999px; background:rgba(148,163,184,.18); font-size:11px; }
.wa-queue-title [data-status="sent"] { color:#6ee7b7; }
.wa-queue-title [data-status="failed"],.wa-queue-title [data-status="uncertain"] { color:#fca5a5; }
.wa-queue-item small { color:var(--ftth-muted); }
.wa-queue-item p { overflow-wrap:anywhere; line-height:1.6; }
.wa-queue-item button { justify-self:start; padding:7px 11px; border-radius:9px; }
html[data-mode="light"] .wa-template textarea,html[data-mode="light"] .wa-test input { background:#fff; border-color:#cbd5e1; }
html[data-mode="light"] .wa-queue-item { background:#f8fafc; }
@media(max-width:650px){ .wa-test-fields { grid-template-columns:1fr; } .wa-tabs button { font-size:11px; } }
.wa-settings-toggle { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:7px 4px; text-align:right; color:var(--ftth-text); }
.wa-settings-toggle-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:12px; background:rgba(34,197,94,.13); color:#25d366; font-size:22px; }
.wa-settings-toggle strong,.wa-settings-toggle small { display:block; }
.wa-settings-toggle strong { font-size:15px; font-weight:900; }
.wa-settings-toggle small { margin-top:3px; font-size:11px; color:var(--ftth-muted); }
.wa-settings-chevron { margin-inline-start:auto; font-size:22px; transition:transform .18s ease; }
.wa-settings-toggle[aria-expanded="true"] .wa-settings-chevron { transform:rotate(180deg); }
.wa-settings-content { display:grid; gap:12px; padding-top:12px; border-top:1px solid rgba(148,163,184,.18); }
.wa-settings-content[hidden] { display:none !important; }
.wa-variables { display:grid; gap:9px; padding:12px; border:1px solid rgba(148,163,184,.2); border-radius:12px; }
.wa-variables strong { font-size:12px; }
.wa-variables > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:6px; }
.wa-variables button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:8px; border-radius:8px; background:rgba(148,163,184,.1); text-align:right; font-size:11px; }
.wa-variables button:hover,.wa-variables button:focus-visible { background:rgba(124,58,237,.18); outline:1px solid var(--color-primary); }
.wa-variables code { direction:ltr; color:var(--ftth-text); font-size:11px; }
.wa-variables small { color:var(--ftth-muted); font-size:11px; }
@media(prefers-reduced-motion:reduce){ .wa-settings-chevron { transition:none; } }

/* ===== Settings Page Tabs ===== */
.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.55rem;
  font-size: 0.75rem;
  font-weight: 850;
  white-space: nowrap;
  transition: all 0.15s;
  color: var(--ftth-text-muted, #94a3b8);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.settings-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.settings-tab.active {
  background: linear-gradient(135deg, color-mix(in srgb,var(--color-primary,#7c3aed) 78%,#0f172a), var(--color-primary,#7c3aed)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
}
.settings-tab-icon { display:grid;place-items:center;width:1.05rem;height:1.05rem; }
#subview-settings #settingsContent>.card-glass,
#subview-settings #settingsContent>div.card-glass { border-radius:1rem!important;border-color:rgba(100,116,139,.24)!important;background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(17,24,39,.88))!important;box-shadow:0 14px 30px rgba(2,6,23,.18)!important; }
#subview-settings #settingsTabs { border-radius:.85rem!important;background:rgba(2,6,23,.72)!important;border-color:rgba(100,116,139,.25)!important; }
#subview-settings #settingsContent .grid>button.card-glass { background:linear-gradient(135deg,#172554,#17233c)!important;border-color:#334e86!important;box-shadow:0 10px 24px rgba(2,6,23,.22)!important; }
#subview-settings #settingsContent .grid>button.card-glass:nth-child(3n+2) { background:linear-gradient(135deg,#14304a,#17233c)!important;border-color:#236383!important; }
#subview-settings #settingsContent .grid>button.card-glass:nth-child(3n+3) { background:linear-gradient(135deg,#2d1f55,#17233c)!important;border-color:#6546a5!important; }
#subview-settings #settingsContent .grid>button.card-glass p { color:#b8c7da!important; }
#subview-settings #settingsContent .grid>button.card-glass h4 { color:#f8fafc!important; }
#subview-settings .appearance-mode-card,#subview-settings .appearance-accent-card,#subview-settings .appearance-surface-card { border-radius:.85rem!important; }
html[data-mode="light"] #subview-settings #settingsContent>.card-glass,
html[data-mode="light"] #subview-settings #settingsContent>div.card-glass { background:linear-gradient(145deg,#fff,#f8fafc)!important;border-color:#cbd5e1!important;box-shadow:0 12px 26px rgba(15,23,42,.08)!important; }
html[data-mode="light"] #subview-settings #settingsTabs { background:#fff!important;border-color:#cbd5e1!important; }
html[data-mode="light"] #subview-settings #settingsContent .grid>button.card-glass { background:linear-gradient(135deg,#eff6ff,#fff)!important;border-color:#93c5fd!important; }
html[data-mode="light"] #subview-settings #settingsContent .grid>button.card-glass:nth-child(3n+2) { background:linear-gradient(135deg,#ecfeff,#fff)!important;border-color:#67e8f9!important; }
html[data-mode="light"] #subview-settings #settingsContent .grid>button.card-glass:nth-child(3n+3) { background:linear-gradient(135deg,#f5f3ff,#fff)!important;border-color:#c4b5fd!important; }
html[data-mode="light"] #subview-settings #settingsContent .grid>button.card-glass h4 { color:#0f172a!important; }
html[data-mode="light"] #subview-settings #settingsContent .grid>button.card-glass p { color:#52627a!important; }
.settings-hub-card .settings-hub-icon { position:relative;overflow:visible;color:#fff!important;border:2px solid rgba(255,255,255,.34)!important;background-image:none!important;opacity:1!important;filter:none!important;box-shadow:0 7px 15px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.25)!important; }
.settings-hub-card .settings-hub-icon::after { content:none!important;display:none!important; }
.settings-hub-card .settings-hub-icon span { position:relative;z-index:1;display:grid;place-items:center;color:#fff!important;opacity:1!important;filter:none!important; }
.settings-hub-card .settings-hub-icon svg { width:1.55rem!important;height:1.55rem!important;color:#fff!important;stroke:#fff!important;stroke-width:2.35!important;opacity:1!important;filter:none!important; }
.settings-hub-violet .settings-hub-icon { background:#7c3aed!important; }
.settings-hub-amber .settings-hub-icon { background:#d97706!important; }
.settings-hub-indigo .settings-hub-icon { background:#4f46e5!important; }
.settings-hub-cyan .settings-hub-icon { background:#0891b2!important; }
.settings-hub-blue .settings-hub-icon { background:#0284c7!important; }
.settings-hub-orange .settings-hub-icon { background:#ea580c!important; }
.settings-hub-whatsapp .settings-hub-icon { background:#16a34a!important; }
.settings-hub-gold .settings-hub-icon { background:#ca8a04!important; }
.settings-hub-rose .settings-hub-icon { background:#e11d48!important; }
.settings-hub-emerald .settings-hub-icon { background:#059669!important; }
.settings-hub-whatsapp { border-color:rgba(34,197,94,.48)!important; }
.reseller-edit-button { min-height:2rem;display:inline-flex;align-items:center;justify-content:center;gap:.32rem;padding:.35rem .65rem;border-radius:.65rem;border:1px solid rgba(56,189,248,.36);background:rgba(14,165,233,.13);color:#7dd3fc;font-size:.68rem;font-weight:900;transition:transform .15s,background .15s; }
.reseller-edit-button:hover { background:rgba(14,165,233,.23); }
.reseller-edit-button:active { transform:scale(.95); }
html[data-mode="light"] .reseller-edit-button { color:#0369a1;background:#e0f2fe;border-color:#7dd3fc; }
.settings-hub-orange { border-color:rgba(249,115,22,.42)!important; }
.settings-hub-gold { border-color:rgba(234,179,8,.42)!important; }
.settings-hub-rose { border-color:rgba(244,63,94,.42)!important; }
.settings-hub-emerald { border-color:rgba(16,185,129,.42)!important; }
html[data-mode="light"] .settings-hub-card .settings-hub-icon { color:#fff!important;border-color:rgba(255,255,255,.65)!important;box-shadow:0 6px 13px rgba(15,23,42,.22)!important; }

/* Toggle checkbox for WhatsApp */
.toggle-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-checkbox::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.toggle-checkbox:checked {
  background: var(--color-primary, #a855f7);
  border-color: var(--color-primary, #a855f7);
}
.toggle-checkbox:checked::after {
  transform: translateX(20px);
}

/* Settings panel transitions */
#settingsContent > div {
  animation: ftth-fade-up 0.25s ease-out;
}
@keyframes ftth-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Wa-tabs in settings */
.wa-tabs button.active {
  background: var(--color-primary, #a855f7) !important;
  color: #fff !important;
}
/* King SAS navigation language, backed only by King FTTH state. */
.header-whatsapp-pill{display:inline-flex;align-items:center;gap:.4rem;min-height:2.25rem;padding:.4rem .7rem;border-radius:.8rem;border:1px solid rgba(52,211,153,.28);background:rgba(16,185,129,.12);color:#a7f3d0;font-size:.69rem;font-weight:800;transition:.18s ease}
.header-whatsapp-pill:hover{background:rgba(16,185,129,.2);transform:translateY(-1px)}
.header-whatsapp-pill i{width:.48rem;height:.48rem;border-radius:999px;background:#64748b;box-shadow:0 0 0 3px rgba(100,116,139,.12)}
.header-whatsapp-pill i[data-status="connected"]{background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.8)}
.header-whatsapp-pill i[data-status="qr"],.header-whatsapp-pill i[data-status="connecting"],.header-whatsapp-pill i[data-status="reconnecting"]{background:#fbbf24;box-shadow:0 0 10px rgba(251,191,36,.7)}
.header-whatsapp-pill i[data-status="error"]{background:#fb7185;box-shadow:0 0 10px rgba(251,113,133,.7)}
.dashboard-account-greeting{display:grid;gap:.05rem;text-align:right}
.dashboard-account-greeting small{color:#cbd5e1;font-size:.67rem;font-weight:700}
.dashboard-account-greeting strong{max-width:13rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:1.05rem;font-weight:900}
.dashboard-account-greeting>span:not(.header-role-badge){max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#94a3b8;font-size:.68rem}
html[data-mode="light"] .dashboard-account-greeting strong{color:#172554}
html[data-mode="light"] .dashboard-account-greeting small,html[data-mode="light"] .dashboard-account-greeting>span:not(.header-role-badge){color:#64748b}
#subview-whatsapp .whatsapp-panel{border-color:rgba(52,211,153,.2);box-shadow:0 24px 55px -34px rgba(16,185,129,.65)}
@media(max-width:640px){.header-whatsapp-pill{width:2.25rem;padding:0;justify-content:center}.header-whatsapp-pill i{position:absolute;margin:1.55rem 0 0 -1.35rem;width:.4rem;height:.4rem}}

/* Screenshot-matched SAS card language for the isolated FTTH workspace. */
.wa-sas-shell{display:grid;gap:1rem;color:#f8fafc}
.wa-sas-title{display:flex;align-items:center;gap:.8rem;padding:.35rem .15rem}
.wa-sas-title-icon{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:999px;background:linear-gradient(145deg,#7c3aed,#d946ef);box-shadow:0 12px 30px -12px #a855f7}
.wa-sas-title small{display:block;color:#94a3b8;font-size:.72rem;font-weight:700}
.wa-sas-title h2{font-size:2rem;line-height:1.1;font-weight:900}
.wa-main-tabs{padding:0;background:transparent;border:0;gap:.45rem}
.wa-main-tabs button{display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:2.45rem;border:1px solid rgba(148,163,184,.26);border-radius:999px;background:rgba(30,41,69,.76);color:#e2e8f0;font-size:.72rem;white-space:nowrap}
.wa-main-tabs button.active{background:linear-gradient(135deg,#9333ea,#d946ef)!important;border-color:rgba(216,180,254,.5);box-shadow:0 10px 22px -12px #d946ef}
.wa-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.wa-hub-grid>button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:10.5rem;padding:1.3rem;border:1px solid rgba(148,163,184,.3);border-radius:1.45rem;background:linear-gradient(145deg,#253663,#202f59);color:#fff;text-align:right;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 28px -24px #000;transition:.18s ease}
.wa-hub-grid>button:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.48)}
.wa-hub-grid strong{margin-top:1rem;font-size:1rem;font-weight:900}
.wa-hub-grid small{margin-top:.3rem;color:#bac5dd;font-size:.75rem;line-height:1.55}
.wa-hub-icon{display:grid;place-items:center;width:3.15rem;height:3.15rem;border-radius:999px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.wa-hub-icon.emerald{background:linear-gradient(145deg,#10b981,#34d399)}
.wa-hub-icon.blue{background:linear-gradient(145deg,#2563eb,#38bdf8)}
.wa-hub-icon.orange{background:linear-gradient(145deg,#f97316,#fbbf24)}
.wa-hub-icon.violet{background:linear-gradient(145deg,#7c3aed,#d946ef)}
.wa-hub-icon.pink{background:linear-gradient(145deg,#db2777,#f43f5e)}
.wa-hub-icon.cyan{background:linear-gradient(145deg,#0891b2,#22d3ee)}
#waSessionPanel,#waTemplatesPanel,#waQueuePanel{padding:1.35rem;border:1px solid rgba(148,163,184,.3);border-radius:1.45rem;background:linear-gradient(145deg,#253663,#202f59);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#waHomePanel[hidden],#waSessionPanel[hidden],#waTemplatesPanel[hidden],#waQueuePanel[hidden]{display:none!important}
.wa-panel-heading{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.wa-panel-heading>div{display:grid;gap:.18rem}.wa-panel-heading strong{font-size:1rem;font-weight:900}.wa-panel-heading small{color:#b8c3da;font-size:.72rem}
.wa-variables{padding:1rem;border:1px solid rgba(148,163,184,.24);border-radius:1.25rem;background:rgba(38,53,96,.75)}
.wa-variables>strong{display:block;margin-bottom:.7rem}.wa-variables>div{display:grid;gap:.35rem}
.wa-variables button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem .7rem;border-radius:.7rem;background:rgba(67,84,139,.55);color:#dbeafe;font-size:.72rem}
.wa-template{padding:1rem!important;border-radius:1.25rem!important;background:rgba(38,53,96,.82)!important;border-color:rgba(148,163,184,.3)!important}
.wa-template textarea{min-height:8.6rem;border-radius:1rem!important;background:rgba(72,87,135,.75)!important;font-size:.9rem;line-height:2!important}
#waSaveTemplatesBtn{width:auto!important;margin-inline-start:auto;padding-inline:1.5rem;border-radius:999px;background:linear-gradient(135deg,#9333ea,#d946ef)!important}
.bottom-nav-panel{border:1px solid rgba(34,211,238,.55)!important;background:rgba(4,10,32,.95)!important;box-shadow:0 18px 45px -15px rgba(6,182,212,.35)!important}
.bottom-nav-item.active{background:linear-gradient(135deg,#22c1dc,#8b5cf6)!important;color:#fff!important;box-shadow:0 10px 28px -10px #22d3ee!important}
#settingsContent>div.card-glass,#settingsContent>.grid .card-glass{background:linear-gradient(145deg,#253663,#202f59)!important;border-color:rgba(148,163,184,.3)!important}
@media(max-width:520px){.wa-hub-grid{gap:.75rem}.wa-hub-grid>button{min-height:9.2rem;padding:1rem}.wa-hub-grid strong{font-size:.88rem}.wa-hub-grid small{font-size:.68rem}.wa-main-tabs{gap:.3rem}.wa-main-tabs button{padding:.45rem .65rem;font-size:.65rem}.wa-sas-title h2{font-size:1.75rem}}

/* Mobile dashboard composition matched to the King SAS reference, isolated to FTTH. */
body.ftth-dashboard-view {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #05091a;
}
@media (max-width: 700px) {
  body.ftth-dashboard-view .desktop-workspace {
    padding: max(3.35rem, calc(env(safe-area-inset-top, 0px) + 2.75rem)) 18px 7rem !important;
  }
  body.ftth-dashboard-view #ftthAppHeader {
    min-height: 4.25rem;
    max-height: none;
    margin: 0 0 .55rem !important;
    padding: .2rem 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body.ftth-dashboard-view .dashboard-account-greeting small { font-size: .72rem; }
  body.ftth-dashboard-view .dashboard-account-greeting strong {
    font-size: 1.55rem;
    line-height: 1.15;
    letter-spacing: -.025em;
  }
  body.ftth-dashboard-view .dashboard-account-greeting > span:not(.header-role-badge) {
    font-size: .78rem;
    line-height: 1.5;
  }
  body.ftth-dashboard-view .header-whatsapp-pill {
    width: auto;
    min-height: 2.4rem;
    padding: .42rem .78rem;
    border-radius: 999px;
    font-size: .76rem;
  }
  body.ftth-dashboard-view .header-whatsapp-pill i {
    position: static;
    margin: 0;
  }
  body.ftth-dashboard-view #subview-dashboard { gap: .8rem; }
  body.ftth-dashboard-view .manager-balance-card {
    min-height: 6.35rem;
    padding: .78rem 1rem !important;
    border-radius: 1.45rem !important;
    background: linear-gradient(128deg, #332c82 0%, #4338b6 50%, #5448e5 100%) !important;
    box-shadow: 0 18px 38px -20px rgba(90,76,230,.85), inset 0 1px 1px rgba(255,255,255,.24) !important;
  }
  body.ftth-dashboard-view .manager-balance-card > div:first-child > div:first-child p { font-size: .9rem; }
  body.ftth-dashboard-view #dashBalanceNumber { font-size: 1.72rem !important; line-height: 1.15; }
  body.ftth-dashboard-view #dashResellerTitle { margin-top: .45rem; font-size: .72rem; }
  body.ftth-dashboard-view .manager-balance-card .shrink-0.h-12 {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
  }
  body.ftth-dashboard-view .sas-profile-switcher {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0 0 .25rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.ftth-dashboard-view .sas-profile-switcher > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.ftth-dashboard-view .sas-profile-switcher > div:first-child > div {
    display: flex !important;
    align-items: center !important;
    order: 0 !important;
  }
  body.ftth-dashboard-view .sas-profile-switcher > div:first-child p { font-size: .9rem; }
  body.ftth-dashboard-view #btnManageResellers {
    min-height: 2rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
  }
  body.ftth-dashboard-view #resellerRailList {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: .55rem;
    padding-bottom: .1rem;
    overflow-x: auto !important;
  }
  body.ftth-dashboard-view #resellerRailList > button {
    min-height: 2.7rem;
    padding-inline: 1.15rem;
    border-radius: 999px !important;
    font-size: .78rem !important;
  }
  body.ftth-dashboard-view #resellerRailList > button.is-active {
    border: 1px solid rgba(52,211,153,.82) !important;
    background: linear-gradient(145deg,rgba(16,185,129,.18),rgba(15,23,42,.92)) !important;
    color: #d1fae5 !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,.08), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  body.ftth-dashboard-view .dashboard-stats-section > h2 {
    margin: .1rem 0 .7rem;
    color: #e9eaf4;
    font-size: 1.08rem;
    font-weight: 900;
  }
  body.ftth-dashboard-view .dashboard-stat-grid { gap: .85rem; }
  body.ftth-dashboard-view .stat-card {
    min-height: 8.25rem;
    padding: 1rem !important;
    border-radius: 1.35rem !important;
  }
  body.ftth-dashboard-view .stat-card p:first-child { font-size: .92rem !important; font-weight: 700; }
  body.ftth-dashboard-view .stat-card p[id] { margin-top: .35rem; font-size: 1.62rem !important; line-height: 1.1; }
  body.ftth-dashboard-view .stat-card p:last-child { font-size: .7rem !important; }
  body.ftth-dashboard-view .stat-card .h-10.w-10 {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
  }
  body.ftth-dashboard-view .bottom-nav-panel {
    inset-inline: 18px !important;
    bottom: max(.65rem, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 1.5rem !important;
    padding: .4rem !important;
  }
}

/* WhatsApp connection button: red while detached, green only when connected. */
.header-whatsapp-pill[data-status="disconnected"],
.header-whatsapp-pill[data-status="logged_out"],
.header-whatsapp-pill[data-status="error"] {
  border-color: rgba(248,113,113,.5) !important;
  background: rgba(127,29,29,.34) !important;
  color: #fecaca !important;
}
.header-whatsapp-pill[data-status="connected"] {
  border-color: rgba(52,211,153,.52) !important;
  background: rgba(6,95,70,.38) !important;
  color: #a7f3d0 !important;
}
.header-whatsapp-pill[data-status="qr"],
.header-whatsapp-pill[data-status="connecting"],
.header-whatsapp-pill[data-status="reconnecting"] {
  border-color: rgba(251,191,36,.48) !important;
  background: rgba(120,53,15,.35) !important;
  color: #fde68a !important;
}

/* Final mobile type rhythm and dock alignment. */
@media (max-width: 700px) {
  body.ftth-dashboard-view,
  body.ftth-dashboard-view button,
  body.ftth-dashboard-view input,
  body.ftth-dashboard-view textarea,
  body.ftth-dashboard-view select {
    font-family: 'Cairo', system-ui, sans-serif !important;
    letter-spacing: 0 !important;
  }
  body.ftth-dashboard-view .dashboard-account-greeting { line-height: 1.35; }
  body.ftth-dashboard-view .dashboard-account-greeting small { font-size: .68rem; font-weight: 700; }
  body.ftth-dashboard-view .dashboard-account-greeting strong { font-size: 1.35rem; line-height: 1.25; font-weight: 900; }
  body.ftth-dashboard-view .dashboard-account-greeting > span:not(.header-role-badge) { font-size: .68rem; line-height: 1.45; font-weight: 500; }

  body.ftth-dashboard-view .manager-balance-card > div:first-child > div:first-child p { font-size: .82rem; line-height: 1.4; font-weight: 800; }
  body.ftth-dashboard-view #dashBalanceNumber { font-size: 1.55rem !important; font-weight: 900; }
  body.ftth-dashboard-view #dashResellerTitle { font-size: .64rem; line-height: 1.4; font-weight: 500; }

  body.ftth-dashboard-view .sas-profile-switcher > div:first-child p { font-size: .84rem; line-height: 1.4; font-weight: 900; }
  body.ftth-dashboard-view #btnManageResellers { font-size: .68rem; line-height: 1.3; font-weight: 800; }
  body.ftth-dashboard-view #resellerRailList > button { font-size: .72rem !important; line-height: 1.3; font-weight: 800; }

  body.ftth-dashboard-view .dashboard-stats-section > h2 { font-size: 1rem; line-height: 1.4; font-weight: 900; }
  body.ftth-dashboard-view .stat-card p:first-child { font-size: .84rem !important; line-height: 1.35; font-weight: 700; }
  body.ftth-dashboard-view .stat-card p[id] { font-size: 1.5rem !important; line-height: 1.15; font-weight: 900; }
  body.ftth-dashboard-view .stat-card p:last-child { font-size: .64rem !important; line-height: 1.4; font-weight: 500; }

  body .app-bottom-nav {
    bottom: -.55rem !important;
    padding: .25rem 14px 0 !important;
  }
  body .bottom-nav-panel {
    min-height: 4.65rem;
    padding: .32rem !important;
  }
  body .bottom-nav-item { gap: .12rem !important; padding-block: .35rem !important; }
  body .bottom-nav-item .b-icon { width: 1.35rem; height: 1.35rem; }
  body .bottom-nav-item > span:last-child { font-size: .66rem !important; line-height: 1.2; font-weight: 800; }
}

/* Keep the polished icon treatment after all legacy dashboard overrides. */
#view-app .stat-card .dashboard-mini-icon,
#view-app .stat-card > div > div[style*="background"],
#view-app .dashboard-stat-grid .stat-card .h-10,
#view-app .dashboard-secondary-stat-grid .stat-card .h-10 {
  position:relative !important;
  isolation:isolate;
  width:2.8rem !important;
  height:2.8rem !important;
  flex:0 0 2.8rem !important;
  border:1px solid rgba(255,255,255,.3) !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.08)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 18px -10px rgba(0,0,0,.8) !important;
}
#view-app .stat-card :is(.dashboard-mini-icon,.h-10) svg {
  width:1.38rem !important;
  height:1.38rem !important;
  stroke-width:1.8 !important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
#view-app .manager-balance-card .shrink-0.h-12 {
  border:1px solid rgba(255,255,255,.28) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.07)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px -12px rgba(0,0,0,.75) !important;
}

/* Smooth, lightweight app motion. */
:root { --ftth-ease: cubic-bezier(.22,.8,.32,1); }
#view-app .subview:not([hidden]) {
  animation: ftth-view-enter .32s var(--ftth-ease) both;
}
@keyframes ftth-view-enter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
#view-app :is(.stat-card,.manager-balance-card,.card-glass,.user-card-item,.rail-reseller-btn,.bottom-nav-item) {
  transition: transform .22s var(--ftth-ease), border-color .22s ease, background-color .22s ease, box-shadow .22s ease, opacity .22s ease !important;
}
#view-app :is(.stat-card,.manager-balance-card,.rail-reseller-btn,.bottom-nav-item):active {
  transform:scale(.975) !important;
}
@media (hover:hover) {
  #view-app :is(.stat-card,.manager-balance-card,.user-card-item):hover { transform:translateY(-2px); }
  #view-app .rail-reseller-btn:hover { transform:translateY(-1px); border-color:rgba(103,232,249,.45) !important; }
}

/* Dashboard reseller cards: compact rounded rectangles instead of circles. */
body.ftth-dashboard-view #resellerRailList {
  gap:.65rem !important;
  padding:.16rem .12rem .32rem !important;
  scroll-snap-type:x proximity;
}
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn {
  position:relative;
  min-width:7.25rem;
  min-height:3.15rem;
  padding:.55rem .9rem !important;
  overflow:hidden;
  scroll-snap-align:start;
  border:1px solid rgba(148,163,184,.2) !important;
  border-radius:1rem !important;
  background:linear-gradient(145deg,rgba(30,41,69,.94),rgba(15,23,42,.94)) !important;
  color:#dbe5f5 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 9px 20px -16px #000 !important;
}
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn::before {
  content:'';
  position:absolute;
  inset-block:.65rem;
  inset-inline-start:0;
  width:3px;
  border-radius:0 4px 4px 0;
  background:#64748b;
  opacity:.75;
}
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn span:first-child {
  position:relative;
  z-index:1;
  max-width:9rem;
  font-size:.76rem !important;
  line-height:1.45;
  font-weight:800;
}
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn.is-active {
  border-color:rgba(45,212,191,.7) !important;
  background:linear-gradient(135deg,rgba(13,148,136,.28),rgba(67,56,202,.3)) !important;
  color:#f0fdfa !important;
  box-shadow:0 0 0 3px rgba(45,212,191,.07),inset 0 1px 0 rgba(255,255,255,.14),0 12px 24px -18px rgba(45,212,191,.8) !important;
}
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn.is-active::before {
  background:linear-gradient(#5eead4,#67e8f9);
  opacity:1;
  box-shadow:0 0 10px rgba(45,212,191,.75);
}
@media (prefers-reduced-motion:reduce) {
  #view-app .subview:not([hidden]) { animation:none !important; }
  #view-app :is(.stat-card,.manager-balance-card,.card-glass,.user-card-item,.rail-reseller-btn,.bottom-nav-item) { transition:none !important; }
}

/* Debt cards: stable RTL layout with a separate currency token. */
#view-app .debt-total-card > div { display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center !important; width:100%; gap:.8rem !important; }
#view-app .debt-total-copy { min-width:0; display:grid; justify-items:start; gap:.12rem; text-align:right; }
#view-app .debt-total-card .debt-money { display:inline-flex; align-items:baseline; gap:.38rem; margin-top:.12rem; direction:ltr; white-space:nowrap; font-size:1.5rem !important; line-height:1.15; font-weight:900; }
#view-app .debt-total-card .debt-money small { font-size:.72rem !important; font-weight:800; opacity:.9; }
#view-app .debt-total-card .dashboard-mini-icon { grid-column:2; grid-row:1; }
#view-app .detail-money-summary .detail-money-debt { min-height:6.25rem; padding:1rem 1.1rem; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:1rem; text-align:right; }
#view-app .detail-money-copy { min-width:0; display:grid; gap:.35rem; }
#view-app .detail-money-copy > small { font-size:.76rem; line-height:1.35; font-weight:700; opacity:.88; }
#view-app .detail-money-copy > b { display:flex; align-items:baseline; gap:.42rem; direction:ltr; color:#fff; font-size:1.65rem; line-height:1.15; font-weight:900; white-space:nowrap; }
#view-app .detail-money-copy > b em { font-size:.8rem; font-style:normal; font-weight:800; opacity:.92; }
#view-app .detail-money-icon { display:grid; place-items:center; flex:0 0 3rem; width:3rem; height:3rem; border:1px solid rgba(255,255,255,.24); border-radius:1rem; background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
#view-app .detail-money-icon svg { width:1.35rem; height:1.35rem; stroke-width:1.8; }

/* Debt card sizing and centering requested for dashboard and subscriber detail. */
body.ftth-dashboard-view #view-app .dashboard-stats-section .debt-total-card {
  min-height:6.15rem !important;
  height:6.15rem !important;
  padding:1rem 1.15rem !important;
}
body.ftth-dashboard-view #view-app .debt-total-card > div { min-height:100%; align-content:center; }
body.ftth-dashboard-view #view-app .debt-total-copy { align-content:center; padding-inline:.2rem; }
body.ftth-dashboard-view #view-app .debt-total-card .debt-money { margin-top:.2rem; font-size:1.62rem !important; }

#view-app .detail-money-summary .detail-money-debt {
  position:relative;
  min-height:6.7rem;
  justify-content:center;
  padding:1rem 4.6rem;
}
#view-app .detail-money-summary .detail-money-copy {
  width:100%;
  justify-items:center;
  align-content:center;
  text-align:center;
}
#view-app .detail-money-summary .detail-money-copy > small { font-size:.82rem; }
#view-app .detail-money-summary .detail-money-copy > b { justify-content:center; font-size:1.72rem; }
#view-app .detail-money-summary .detail-money-icon {
  position:absolute;
  inset-inline-start:1rem;
  top:50%;
  transform:translateY(-50%);
}
@media(max-width:390px) {
  #view-app .detail-money-summary .detail-money-debt { padding-inline:4rem; }
  #view-app .detail-money-summary .detail-money-copy > b { font-size:1.5rem; }
}

/* Simplified King SAS-style WhatsApp linking flow for isolated FTTH sessions. */
#waSessionPanel {
  display:grid;
  gap:1rem;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#waSessionPanel[hidden] { display:none !important; }
.wa-connect-intro,.wa-session-card,.wa-link-state,.wa-test-disclosure {
  border:1px solid rgba(148,163,184,.3);
  border-radius:1.45rem;
  background:linear-gradient(145deg,#253663,#202f59);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 15px 30px -26px #000;
}
.wa-connect-intro {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:.8rem;
  padding:1.2rem;
}
.wa-connect-intro-icon,.wa-session-signal,.wa-link-state-icon {
  display:grid;
  place-items:center;
  flex:none;
  width:3.15rem;
  height:3.15rem;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(145deg,#10b981,#34d399);
  box-shadow:0 12px 24px -14px rgba(52,211,153,.9),inset 0 1px 0 rgba(255,255,255,.25);
}
.wa-connect-intro h2 { font-size:1rem; line-height:1.45; font-weight:900; }
.wa-connect-intro p { margin-top:.18rem; color:#b8c5da; font-size:.7rem; line-height:1.55; }
.wa-session-count { align-self:start; padding:.3rem .65rem; border-radius:999px; background:rgba(148,163,184,.17); color:#e2e8f0; font-size:.66rem; font-weight:800; }
.wa-add-session-btn {
  grid-column:2/4;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:2.85rem;
  padding:.65rem 1.2rem;
  border-radius:1rem;
  background:linear-gradient(135deg,#9333ea,#d946ef);
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  box-shadow:0 12px 25px -15px #d946ef;
}
.wa-add-session-btn:disabled { opacity:.72; cursor:default; }
.wa-session-card { padding:1.2rem; }
.wa-session-card-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; }
.wa-session-card-head h3 { font-size:1rem; font-weight:900; }
.wa-session-card-head p { margin-top:.22rem; color:#b9c5dc; font-size:.68rem; direction:ltr; unicode-bidi:plaintext; overflow-wrap:anywhere; }
.wa-session-update { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.85rem; padding:.65rem .8rem; border:1px solid rgba(148,163,184,.16); border-radius:.85rem; background:rgba(15,23,42,.22); color:#b8c5da; font-size:.69rem; }
.wa-session-update b { color:#f8fafc; font-weight:800; }
.wa-session-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-top:.85rem; }
.wa-session-action { display:inline-flex; align-items:center; justify-content:center; gap:.38rem; min-height:2.7rem; border:1px solid rgba(148,163,184,.24); border-radius:1rem; background:rgba(255,255,255,.07); color:#e2e8f0; font-size:.74rem; font-weight:900; }
.wa-session-action--qr { background:linear-gradient(135deg,rgba(37,99,235,.9),rgba(6,182,212,.9)); border-color:rgba(103,232,249,.35); }
.wa-session-action--danger { color:#fecaca; border-color:rgba(248,113,113,.3); background:rgba(127,29,29,.25); }
.wa-session-action:disabled { opacity:.42; }
.wa-link-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:20rem; padding:1.4rem; text-align:center; }
.wa-link-state-icon { width:4.8rem; height:4.8rem; background:linear-gradient(145deg,#f97316,#fbbf24); }
.wa-link-state-icon[data-status="connected"] { background:linear-gradient(145deg,#10b981,#34d399); }
.wa-link-state-icon[data-status="error"],.wa-link-state-icon[data-status="disconnected"],.wa-link-state-icon[data-status="logged_out"] { background:linear-gradient(145deg,#475569,#64748b); }
.wa-link-state h3 { margin-top:1rem; font-size:1.35rem; font-weight:900; }
.wa-link-state > p:not(.wa-error) { margin-top:.35rem; color:#b8c5da; font-size:.78rem; line-height:1.6; }
.wa-link-state .whatsapp-qr-area { width:100%; margin-top:1rem; padding:1rem; border:0; background:transparent; }
.wa-link-state .whatsapp-qr-area img { width:min(16rem,100%); border-radius:1rem; box-shadow:0 15px 35px -20px #000; }
.wa-test-disclosure { overflow:hidden; }
.wa-test-disclosure summary { display:flex; align-items:center; gap:.45rem; padding:1rem 1.15rem; cursor:pointer; color:#dbeafe; font-size:.76rem; font-weight:900; list-style:none; }
.wa-test-disclosure summary::-webkit-details-marker { display:none; }
.wa-test-disclosure[open] summary { border-bottom:1px solid rgba(148,163,184,.16); }
.wa-test-disclosure .wa-test { padding:1rem; border-top:0; }
@media(max-width:520px) {
  .wa-connect-intro { grid-template-columns:auto minmax(0,1fr); }
  .wa-session-count { position:absolute; visibility:hidden; }
  .wa-add-session-btn { grid-column:1/-1; width:100%; }
  .wa-session-card-head { grid-template-columns:auto minmax(0,1fr); }
  .wa-session-card-head .whatsapp-status-badge { grid-column:2; justify-self:start; }
  .wa-link-state { min-height:17rem; }
  .wa-test-fields { grid-template-columns:1fr !important; }
  .wa-test-fields button { min-height:2.7rem; }
}

/* Professional WhatsApp workspace: restrained colour, type and motion. */
#subview-whatsapp { color:#f1f5f9; }
#subview-whatsapp > .max-w-2xl > .flex:first-child {
  padding:.2rem .15rem .45rem;
  align-items:center;
}
#subview-whatsapp > .max-w-2xl > .flex:first-child h1 {
  margin-top:.08rem;
  font-size:1.65rem;
  line-height:1.25;
  font-weight:850;
  letter-spacing:-.02em;
}
#subview-whatsapp > .max-w-2xl > .flex:first-child p:first-child { color:#5eead4; font-size:.68rem; font-weight:800; }
#subview-whatsapp > .max-w-2xl > .flex:first-child p:last-child { margin-top:.2rem; color:#94a3b8; font-size:.7rem; line-height:1.55; font-weight:500; }
#whatsappWorkspaceIcon {
  width:2.9rem !important;
  height:2.9rem !important;
  border-radius:1rem !important;
  border-color:rgba(45,212,191,.28) !important;
  background:rgba(13,148,136,.12) !important;
  color:#5eead4 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.wa-sas-shell { gap:.85rem; }
.wa-main-tabs {
  gap:.42rem;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.wa-main-tabs button {
  min-height:2.55rem;
  padding:.5rem .78rem;
  border:1px solid rgba(148,163,184,.2);
  border-radius:.85rem;
  background:#111a2c;
  color:#aebbd0;
  font-size:.69rem;
  line-height:1.2;
  font-weight:750;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.wa-main-tabs button.active {
  border-color:rgba(45,212,191,.45) !important;
  background:linear-gradient(135deg,#0f766e,#0e7490) !important;
  color:#f0fdfa !important;
  box-shadow:0 8px 20px -14px rgba(45,212,191,.9) !important;
}
.wa-connect-intro,.wa-session-card,.wa-link-state,.wa-test-disclosure,
#waTemplatesPanel,#waQueuePanel {
  border-color:rgba(148,163,184,.18) !important;
  border-radius:1.15rem !important;
  background:linear-gradient(145deg,#162239,#111a2d) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 30px -28px #000 !important;
}
.wa-connect-intro { padding:1.05rem; }
.wa-connect-intro-icon,.wa-session-signal {
  width:2.85rem;
  height:2.85rem;
  border-radius:.95rem;
  background:rgba(16,185,129,.14);
  color:#6ee7b7;
  border:1px solid rgba(52,211,153,.25);
  box-shadow:none;
}
.wa-connect-intro h2,.wa-session-card-head h3 { font-size:.92rem; line-height:1.45; font-weight:850; }
.wa-connect-intro p,.wa-session-card-head p { color:#94a3b8; font-size:.67rem; font-weight:500; }
.wa-session-count,.whatsapp-status-badge {
  padding:.28rem .58rem;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(148,163,184,.09);
  color:#cbd5e1;
  font-size:.63rem;
  font-weight:750;
}
.wa-add-session-btn {
  min-height:2.65rem;
  border:1px solid rgba(45,212,191,.36);
  border-radius:.85rem;
  background:linear-gradient(135deg,#0f766e,#0891b2);
  font-size:.73rem;
  font-weight:800;
  box-shadow:0 9px 20px -16px rgba(45,212,191,.85);
}
.wa-session-card { padding:1.05rem; }
.wa-session-update { border-color:rgba(148,163,184,.13); background:rgba(2,6,23,.2); }
.wa-session-action {
  min-height:2.55rem;
  border-radius:.82rem;
  font-size:.7rem;
  font-weight:800;
}
.wa-session-action--qr { border-color:rgba(56,189,248,.3); background:rgba(3,105,161,.35); color:#e0f2fe; }
.wa-session-action--danger { border-color:rgba(248,113,113,.2); background:rgba(127,29,29,.16); color:#fda4af; }
.wa-link-state { min-height:17rem; padding:1.3rem; }
.wa-link-state-icon {
  width:4rem;
  height:4rem;
  border-radius:1.2rem;
  border:1px solid rgba(148,163,184,.2);
  background:#243249;
  color:#cbd5e1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 22px -20px #000;
}
.wa-link-state-icon[data-status="connected"] { border-color:rgba(52,211,153,.32); background:rgba(6,95,70,.35); color:#6ee7b7; }
.wa-link-state-icon[data-status="qr"],.wa-link-state-icon[data-status="connecting"],.wa-link-state-icon[data-status="reconnecting"] { border-color:rgba(56,189,248,.3); background:rgba(3,105,161,.28); color:#7dd3fc; }
.wa-link-state-icon[data-status="error"],.wa-link-state-icon[data-status="disconnected"],.wa-link-state-icon[data-status="logged_out"] { background:#243249; color:#94a3b8; }
.wa-link-state h3 { margin-top:.85rem; font-size:1.12rem; line-height:1.4; font-weight:850; }
.wa-link-state > p:not(.wa-error) { color:#94a3b8; font-size:.71rem; font-weight:500; }
.wa-test-disclosure summary { color:#cbd5e1; font-size:.7rem; font-weight:750; }

.wa-hub-grid { gap:.75rem; }
.wa-hub-grid > button {
  min-height:9.2rem;
  padding:1.05rem;
  border-color:rgba(148,163,184,.17);
  border-radius:1.1rem;
  background:linear-gradient(145deg,#162239,#111a2d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.wa-hub-grid strong { margin-top:.75rem; font-size:.86rem; font-weight:825; }
.wa-hub-grid small { color:#94a3b8; font-size:.66rem; font-weight:500; }
.wa-hub-icon { width:2.7rem; height:2.7rem; border-radius:.9rem; box-shadow:none; }
.wa-hub-icon.violet,.wa-hub-icon.pink { background:linear-gradient(145deg,#0f766e,#0891b2); }

#waTemplatesPanel,#waQueuePanel { padding:1.1rem; }
.wa-panel-heading strong { font-size:.9rem; font-weight:850; }
.wa-panel-heading small { color:#94a3b8; font-size:.66rem; font-weight:500; }
.wa-setting-row,.wa-variables,.wa-template {
  border-color:rgba(148,163,184,.16) !important;
  border-radius:1rem !important;
  background:rgba(15,23,42,.38) !important;
}
.wa-variables button { background:#22304a; color:#cbd5e1; }
.wa-template textarea { border-color:rgba(148,163,184,.16) !important; background:#111827 !important; color:#e5e7eb; }
#waSaveTemplatesBtn { background:linear-gradient(135deg,#0f766e,#0891b2) !important; box-shadow:none; }
@media(max-width:700px) {
  #subview-whatsapp { padding-top:2.6rem; }
}
@media(max-width:520px) {
  #subview-whatsapp > .max-w-2xl > .flex:first-child h1 { font-size:1.5rem; }
  .wa-main-tabs button { padding-inline:.68rem; font-size:.65rem; }
}

/* Reseller selector follows the outlined Manage Resellers pill language. */
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn,
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn.is-active {
  min-width:auto;
  min-height:2.55rem;
  padding:.48rem 1.15rem !important;
  border:1px solid rgba(59,130,246,.62) !important;
  border-radius:999px !important;
  background:rgba(30,64,175,.09) !important;
  color:#60a5fa !important;
  box-shadow:inset 0 0 0 1px rgba(96,165,250,.05),0 7px 18px -15px rgba(59,130,246,.8) !important;
}
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn::before,
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn.is-active::before { display:none !important; }
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn span:first-child {
  max-width:10rem;
  color:inherit;
  font-size:.76rem !important;
  font-weight:850;
}
body.ftth-dashboard-view #resellerRailList .rail-reseller-btn.is-active {
  border-color:rgba(56,189,248,.78) !important;
  background:rgba(14,116,144,.13) !important;
  color:#7dd3fc !important;
}
@media(hover:hover) {
  body.ftth-dashboard-view #resellerRailList .rail-reseller-btn:hover {
    border-color:rgba(96,165,250,.9) !important;
    background:rgba(30,64,175,.15) !important;
    color:#93c5fd !important;
  }
}

/* Clean SAS-like dashboard header: notification bell and readable WhatsApp status only. */
body.ftth-dashboard-view #ftthAppHeader > div:last-child { gap:.55rem; }
body.ftth-dashboard-view .header-alerts-btn {
  width:2.45rem !important;
  height:2.45rem !important;
  border-radius:.85rem !important;
  border-color:rgba(129,140,248,.24) !important;
  background:rgba(49,46,129,.28) !important;
  color:#e0e7ff !important;
}
body.ftth-dashboard-view .header-alerts-btn svg { width:1.15rem; height:1.15rem; }
body.ftth-dashboard-view .header-whatsapp-pill {
  width:auto !important;
  min-width:8.2rem;
  min-height:2.45rem;
  padding:.45rem .82rem !important;
  justify-content:center;
  gap:.38rem;
  border-radius:999px;
  font-size:.7rem;
  white-space:nowrap;
}
body.ftth-dashboard-view .header-whatsapp-pill > span:nth-child(2),
body.ftth-dashboard-view .header-whatsapp-pill > b { display:inline !important; }
body.ftth-dashboard-view .header-whatsapp-pill i {
  position:static !important;
  width:.45rem;
  height:.45rem;
  margin:0 !important;
}

/* Restore the theme control, seat the dock safely, and repair daylight contrast. */
body.ftth-dashboard-view #headerThemeBtn {
  display:flex;
  flex:0 0 2.45rem;
  width:2.45rem;
  height:2.45rem;
  border-radius:.85rem;
}
@media(max-width:700px) {
  body .app-bottom-nav {
    bottom:0 !important;
    padding:.25rem 14px max(.45rem,env(safe-area-inset-bottom,0px)) !important;
  }
  body .bottom-nav-panel { min-height:4.45rem; border-radius:1.35rem !important; }
  body #view-app .subview { padding-bottom:calc(7.4rem + env(safe-area-inset-bottom,0px)) !important; }
}

html[data-mode="light"] body { background:#f5f7fb !important; color:#172033; }
html[data-mode="light"] #view-app .desktop-workspace { background:#f5f7fb; }
html[data-mode="light"] #view-app #ftthAppHeader {
  background:#fff !important;
  border:1px solid #d9e0eb !important;
  box-shadow:0 8px 24px -20px rgba(15,23,42,.35) !important;
}
html[data-mode="light"] #view-app .header-alerts-btn,
html[data-mode="light"] #view-app #headerThemeBtn {
  border-color:#d7dee9 !important;
  background:#eef2f7 !important;
  color:#334155 !important;
}
html[data-mode="light"] #view-app .header-whatsapp-pill[data-status="disconnected"],
html[data-mode="light"] #view-app .header-whatsapp-pill[data-status="logged_out"],
html[data-mode="light"] #view-app .header-whatsapp-pill[data-status="error"] {
  border-color:#fca5a5 !important;
  background:#fee2e2 !important;
  color:#991b1b !important;
}
html[data-mode="light"] #view-app .header-whatsapp-pill[data-status="connected"] {
  border-color:#6ee7b7 !important;
  background:#d1fae5 !important;
  color:#065f46 !important;
}
html[data-mode="light"] #view-app .header-whatsapp-pill[data-status="qr"],
html[data-mode="light"] #view-app .header-whatsapp-pill[data-status="connecting"],
html[data-mode="light"] #view-app .header-whatsapp-pill[data-status="reconnecting"] {
  border-color:#fcd34d !important;
  background:#fef3c7 !important;
  color:#92400e !important;
}
html[data-mode="light"] body.ftth-dashboard-view #resellerRailList .rail-reseller-btn,
html[data-mode="light"] body.ftth-dashboard-view #resellerRailList .rail-reseller-btn.is-active {
  border-color:#60a5fa !important;
  background:#eff6ff !important;
  color:#1d4ed8 !important;
  box-shadow:0 6px 16px -14px rgba(37,99,235,.5) !important;
}
html[data-mode="light"] #view-app #btnManageResellers {
  border-color:#c4b5fd !important;
  background:#f5f3ff !important;
  color:#6d28d9 !important;
}
html[data-mode="light"] #view-app #settingsContent > div.card-glass,
html[data-mode="light"] #view-app #settingsContent > .grid .card-glass,
html[data-mode="light"] #view-app #settingsContent .card-glass {
  background:#fff !important;
  border-color:#d7dee9 !important;
  color:#172033 !important;
  box-shadow:0 5px 16px rgba(15,23,42,.07) !important;
}
html[data-mode="light"] #view-app #settingsContent .card-glass :is(h2,h3,h4,strong) { color:#172033 !important; }
html[data-mode="light"] #view-app #settingsContent .card-glass :is(p,small,span.text-muted-foreground) { color:#64748b !important; }
html[data-mode="light"] #view-app .settings-account-hero,
html[data-mode="light"] #view-app .settings-account-hero * { color:#fff !important; }
html[data-mode="light"] #view-app .settings-account-hero p { color:rgba(255,255,255,.78) !important; }
html[data-mode="light"] #view-app .settings-tab { color:#64748b !important; }
html[data-mode="light"] #view-app .settings-tab.active { color:#fff !important; }
html[data-mode="light"] #view-app .appearance-title strong,
html[data-mode="light"] #view-app .appearance-group h3 { color:#172033 !important; }
html[data-mode="light"] #view-app .appearance-title small,
html[data-mode="light"] #view-app .appearance-surface small { color:#64748b !important; }
html[data-mode="light"] #view-app .appearance-accent,
html[data-mode="light"] #view-app .appearance-surface {
  border-color:#d7dee9;
  background:#f8fafc;
  color:#334155;
}
html[data-mode="light"] #view-app .bottom-nav-panel {
  background:rgba(255,255,255,.98) !important;
  border-color:#d7dee9 !important;
  box-shadow:0 10px 28px rgba(15,23,42,.14) !important;
}
html[data-mode="light"] #view-app .bottom-nav-item:not(.active) { color:#475569 !important; }

/* Definitive bottom dock geometry: perfectly centred, equal side gutters. */
@media(max-width:700px) {
  body .app-bottom-nav {
    left:50% !important;
    right:auto !important;
    bottom:0 !important;
    width:min(calc(100% - 28px),46rem) !important;
    max-width:calc(100% - 28px) !important;
    margin:0 !important;
    padding:0 0 max(.45rem,env(safe-area-inset-bottom,0px)) !important;
    transform:translateX(-50%) !important;
    box-sizing:border-box !important;
  }
  body .app-bottom-nav > .bottom-nav-panel {
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    transform:none !important;
  }
}

/* Final theme priority layer — intentionally last. */
html[data-accent] #view-app .desktop-workspace {
  background-image:radial-gradient(circle at 85% 8%,rgba(var(--theme-rgb),.14),transparent 27%),radial-gradient(circle at 8% 78%,rgba(var(--theme-rgb),.08),transparent 30%) !important;
}
html[data-accent] body.ftth-dashboard-view #view-app .manager-balance-card {
  background:linear-gradient(130deg,var(--theme-deep),var(--color-primary) 58%,var(--color-accent)) !important;
  box-shadow:0 18px 38px -22px rgba(var(--theme-rgb),.9),inset 0 1px 1px rgba(255,255,255,.22) !important;
}
html[data-accent] #view-app :is(.bottom-nav-item.active,.settings-tab.active,.subscriber-filter-chip.active,.btn-gradient,.activation-primary-btn,#subHeaderAddBtn,#waSaveTemplatesBtn,.wa-main-tabs button.active,.wa-add-session-btn) {
  background:var(--grad-primary) !important;
  border-color:rgba(var(--theme-rgb),.5) !important;
  box-shadow:0 10px 24px -14px rgba(var(--theme-rgb),.9) !important;
}
html[data-accent] #view-app #btnManageResellers,
html[data-accent] body.ftth-dashboard-view #resellerRailList .rail-reseller-btn.is-active {
  border-color:rgba(var(--theme-rgb),.68) !important;
  background:rgba(var(--theme-rgb),.12) !important;
  color:var(--color-accent) !important;
}
html[data-accent] #view-app .bottom-nav-panel { border-color:rgba(var(--theme-rgb),.45) !important; }
html[data-surface] #view-app :is(.card-glass,.subscriber-card,.detail-hero,.detail-section,.detail-stat,.detail-network-summary,.detail-finance-card,.wa-connect-intro,.wa-session-card,.wa-link-state,.wa-test-disclosure,#waTemplatesPanel,#waQueuePanel,.wa-hub-grid>button) {
  background:var(--theme-card-bg) !important;
  border-color:var(--theme-card-border) !important;
  box-shadow:var(--theme-card-shadow) !important;
  backdrop-filter:var(--theme-card-blur) !important;
  -webkit-backdrop-filter:var(--theme-card-blur) !important;
}
html[data-mode="light"][data-surface="midnight"] #view-app :is(.card-glass,.subscriber-card,.detail-hero,.detail-section,.detail-stat,.detail-network-summary,.detail-finance-card) :is(h1,h2,h3,h4,strong,b,.subscriber-name) { color:#f8fafc !important; }
html[data-mode="light"][data-surface="midnight"] #view-app :is(.card-glass,.subscriber-card,.detail-hero,.detail-section,.detail-stat,.detail-network-summary,.detail-finance-card) :is(p,small,label,span) { color:#aebbd0 !important; }

/* Absolute final priority: no dashboard header frame in either mode. */
body.ftth-dashboard-view #view-app #ftthAppHeader,
html[data-mode="light"] body.ftth-dashboard-view #view-app #ftthAppHeader {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Desktop dialogs are centred in the viewport. Mobile keeps the native bottom sheet. */
@media (min-width:701px) {
  body #modalDialog.bottom-sheet-dialog {
    inset:auto !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    width:min(44rem,calc(100vw - 3rem)) !important;
    max-width:44rem !important;
    max-height:min(88dvh,56rem) !important;
    margin:0 !important;
    padding:1.35rem !important;
    border:1px solid rgba(167,139,250,.24) !important;
    border-radius:1.65rem !important;
    transform:translate(-50%,-50%);
    box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025) !important;
    animation:ftth-modal-desktop-in .2s ease-out both !important;
  }
  body #modalDialog.bottom-sheet-dialog > #modalDragPill { display:none; }
  @keyframes ftth-modal-desktop-in {
    from { opacity:0; transform:translate(-50%,calc(-50% + 12px)) scale(.98); }
    to { opacity:1; transform:translate(-50%,-50%) scale(1); }
  }
}

/* Device permissions and clear WhatsApp controls. */
.wa-master-toggle { cursor:pointer; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.wa-master-toggle.is-enabled { border-color:rgba(52,211,153,.42) !important; background:rgba(16,185,129,.1) !important; box-shadow:inset 0 0 0 1px rgba(52,211,153,.06); }
.wa-toggle-control { display:flex; align-items:center; gap:.65rem; flex:none; }
.wa-toggle-control > b { min-width:3.15rem; color:#fca5a5; font-size:.72rem; text-align:center; }
.wa-master-toggle.is-enabled .wa-toggle-control > b { color:#6ee7b7; }
.wa-master-toggle .toggle-checkbox { display:block !important; width:3.25rem !important; height:1.75rem !important; min-height:1.75rem !important; padding:0 !important; border:1px solid rgba(248,113,113,.5) !important; border-radius:999px !important; background:#4c1d2d !important; box-shadow:inset 0 2px 6px rgba(0,0,0,.28); }
.wa-master-toggle .toggle-checkbox::after { top:.18rem; left:.2rem; width:1.22rem; height:1.22rem; box-shadow:0 2px 5px rgba(0,0,0,.35); }
.wa-master-toggle .toggle-checkbox:checked { border-color:#34d399 !important; background:#059669 !important; }
.wa-master-toggle .toggle-checkbox:checked::after { transform:translateX(1.43rem); }
.wa-safety-panel { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.75rem; padding:.75rem .85rem; border:1px solid rgba(52,211,153,.25); border-radius:.9rem; background:linear-gradient(135deg,rgba(5,150,105,.13),rgba(8,145,178,.08)); }
.wa-safety-panel > div { display:grid; gap:.18rem; min-width:0; }
.wa-safety-panel strong { display:flex; align-items:center; gap:.4rem; color:#a7f3d0; font-size:.75rem; }
.wa-safety-panel small { color:#94a3b8; font-size:.63rem; line-height:1.55; }
.wa-safety-panel > span { padding:.2rem .5rem; border-radius:99px; background:rgba(16,185,129,.18); color:#6ee7b7; font-size:.62rem; font-weight:900; }
.wa-template-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.wa-template-head > button { flex:none; padding:.38rem .58rem; border:1px solid rgba(56,189,248,.3); border-radius:.6rem; background:rgba(14,165,233,.1); color:#7dd3fc; font-size:.64rem; font-weight:850; }
.wa-template-preview { margin:0; padding:.75rem; border:1px dashed rgba(52,211,153,.35); border-radius:.75rem; background:rgba(2,44,34,.3); color:#d1fae5; font-family:inherit; font-size:.72rem; line-height:1.8; text-align:start; white-space:pre-wrap; overflow-wrap:anywhere; }
.wa-variables button.is-copied { border-color:#34d399; background:rgba(16,185,129,.2); color:#a7f3d0; transform:scale(.98); }
.device-permissions-grid { display:grid; gap:.75rem; }
.device-permission-card { display:flex; align-items:center; gap:.8rem; padding:.9rem; border:1px solid rgba(148,163,184,.2); border-radius:1.05rem; background:rgba(15,23,42,.45); }
.device-permission-card > span { display:grid; place-items:center; flex:0 0 2.8rem; height:2.8rem; border-radius:.85rem; background:rgba(99,102,241,.14); font-size:1.2rem; }
.device-permission-card > div { display:grid; gap:.12rem; min-width:0; flex:1; }
.device-permission-card strong { color:#e2e8f0; font-size:.78rem; }
.device-permission-card small { color:#94a3b8; font-size:.63rem; line-height:1.45; }
.device-permission-card b { width:max-content; margin-top:.18rem; color:#fbbf24; font-size:.62rem; }
.device-permission-card.is-granted { border-color:rgba(52,211,153,.32); background:rgba(5,150,105,.08); }
.device-permission-card.is-granted b { color:#6ee7b7; }
.device-permission-card.is-denied b { color:#fda4af; }
.device-permission-card.is-insecure { border-color:rgba(251,191,36,.3); background:rgba(180,83,9,.08); }
.device-permission-card.is-insecure b { color:#fcd34d; }
.device-permission-card > button { flex:none; min-width:5.2rem; padding:.52rem .65rem; border:1px solid rgba(56,189,248,.32); border-radius:.7rem; background:rgba(14,165,233,.12); color:#7dd3fc; font-size:.67rem; font-weight:900; }
.device-permission-card > button:disabled { border-color:rgba(52,211,153,.25); background:rgba(16,185,129,.12); color:#6ee7b7; opacity:1; }
.device-permission-note { padding:.75rem; border-radius:.8rem; background:rgba(30,41,59,.5); color:#94a3b8; font-size:.68rem; line-height:1.7; }
.permission-offer { display:grid; justify-items:center; gap:.7rem; text-align:center; }
.permission-offer > span { display:grid; place-items:center; width:4rem; height:4rem; border:1px solid rgba(56,189,248,.3); border-radius:1.25rem; background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(99,102,241,.2)); font-size:1.8rem; }
.permission-offer h4 { color:#f8fafc; font-size:1rem; font-weight:900; }
.permission-offer p { color:#a8b4c8; font-size:.75rem; line-height:1.8; }
.permission-offer button { width:100%; min-height:2.7rem; border-radius:.8rem; font-size:.75rem; font-weight:900; }
#openPermissionsSettings { border:1px solid rgba(103,232,249,.35); background:var(--grad-primary); color:#fff; }
#skipPermissionsSettings { border:1px solid rgba(148,163,184,.22); background:rgba(148,163,184,.08); color:#cbd5e1; }
html[data-mode="light"] .device-permission-card { background:#fff; border-color:#dbe3ef; }
html[data-mode="light"] .device-permission-card strong { color:#172033; }
html[data-mode="light"] .device-permission-card small,html[data-mode="light"] .device-permission-note { color:#52627a; }
html[data-mode="light"] .device-permission-note { background:#eef2f7; }

.first-setup-wizard { display:grid;gap:.75rem;text-align:right; }
.first-setup-lead { color:var(--muted-foreground);font-size:.78rem;line-height:1.8;margin-bottom:.15rem; }
.first-setup-wizard>button:not(.first-setup-done) { width:100%;display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.7rem;padding:.85rem;border-radius:1rem;border:1px solid rgba(56,189,248,.2);background:linear-gradient(135deg,rgba(15,23,42,.86),rgba(30,41,59,.7));color:#e2e8f0;text-align:right; }
.first-setup-wizard>button:not(.first-setup-done)>b { width:2rem;height:2rem;display:grid;place-items:center;border-radius:.65rem;background:#0891b2;color:#fff;font-size:.75rem; }
.first-setup-wizard>button span { display:grid;gap:.18rem; }
.first-setup-wizard>button strong { font-size:.8rem; }
.first-setup-wizard>button small { font-size:.65rem;color:#94a3b8; }
.first-setup-wizard>button.is-optional { border-color:rgba(16,185,129,.28); }
.first-setup-wizard>button.is-optional>b { background:#059669; }
.first-setup-done { padding:.78rem;border-radius:.9rem;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.18);color:var(--foreground);font-weight:900;font-size:.76rem; }
.receipt-layout-grid { display:grid;grid-template-columns:1fr 1fr;gap:.65rem; }
.receipt-layout-grid label { display:grid;gap:.35rem;font-size:.72rem;font-weight:800; }
.receipt-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;padding:.8rem;border-radius:1rem;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.35); }
.receipt-options label { display:flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:800; }
.receipt-options input { accent-color:var(--color-primary,#7c3aed);width:1rem;height:1rem; }
html[data-mode="light"] .receipt-options { background:#f8fafc;border-color:#cbd5e1; }
html[data-mode="light"] .first-setup-wizard>button:not(.first-setup-done) { background:#fff;color:#0f172a;border-color:#cbd5e1; }
html[data-mode="light"] .first-setup-wizard>button small { color:#64748b; }

/* Arabic activation and payment activity log. */
.finance-audit-summary { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:.8rem; }
.finance-audit-summary>div { display:grid;gap:.2rem;padding:1rem;border:1px solid rgba(148,163,184,.18);border-radius:1.05rem;background:rgba(15,23,42,.55); }
.finance-audit-summary>div.is-activation { border-color:rgba(56,189,248,.32);background:linear-gradient(135deg,rgba(2,132,199,.18),rgba(30,41,59,.55)); }
.finance-audit-summary>div.is-payment { border-color:rgba(52,211,153,.32);background:linear-gradient(135deg,rgba(5,150,105,.18),rgba(30,41,59,.55)); }
.finance-audit-summary small { color:#a8b4c8;font-size:.68rem;font-weight:800; }
.finance-audit-summary b { color:#f8fafc;font-size:1.35rem;font-weight:950;line-height:1.2; }
.finance-audit-summary span { color:#cbd5e1;font-size:.68rem;font-weight:800; }
.finance-audit-tools { display:grid;gap:.6rem;margin-bottom:.8rem;padding:.75rem;border:1px solid rgba(148,163,184,.16);border-radius:1rem;background:rgba(15,23,42,.42); }
.finance-audit-tools input { width:100%;min-height:2.75rem;padding:.7rem .85rem;border:1px solid rgba(148,163,184,.22);border-radius:.8rem;background:rgba(2,6,23,.42);color:#f8fafc;outline:none;font-size:.75rem; }
.finance-audit-tools input:focus { border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.1); }
.finance-audit-tools>div { display:flex;gap:.42rem;overflow-x:auto;padding-bottom:.1rem; }
.finance-audit-tools button { flex:none;padding:.48rem .72rem;border:1px solid rgba(148,163,184,.2);border-radius:.7rem;background:rgba(148,163,184,.08);color:#cbd5e1;font-size:.66rem;font-weight:900; }
.finance-audit-tools button.active { border-color:#38bdf8;background:#0284c7;color:#fff;box-shadow:0 6px 16px rgba(2,132,199,.22); }
#financeAuditRefresh { margin-inline-start:auto;color:#7dd3fc;border-color:rgba(56,189,248,.28); }
.finance-audit-list { display:grid;gap:.58rem; }
.finance-audit-list article { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.82rem;border:1px solid rgba(148,163,184,.16);border-radius:1rem;background:rgba(15,23,42,.52); }
.finance-audit-list article.is-activation { border-inline-start:3px solid #38bdf8; }
.finance-audit-list article.is-payment { border-inline-start:3px solid #34d399; }
.finance-audit-icon { display:grid;place-items:center;width:2.45rem;height:2.45rem;border-radius:.78rem; }
.finance-audit-list article.is-activation .finance-audit-icon { color:#7dd3fc;background:rgba(14,165,233,.14);border:1px solid rgba(56,189,248,.22); }
.finance-audit-list article.is-payment .finance-audit-icon { color:#6ee7b7;background:rgba(16,185,129,.14);border:1px solid rgba(52,211,153,.22); }
.finance-audit-list article>div { display:grid;gap:.22rem;min-width:0; }
.finance-audit-list strong { color:#f1f5f9;font-size:.75rem;font-weight:900;line-height:1.7;overflow-wrap:anywhere; }
.finance-audit-list small { color:#94a3b8;font-size:.62rem;line-height:1.55; }
.finance-audit-list article>b { color:#e2e8f0;font-size:.72rem;font-weight:950;white-space:nowrap; }
html[data-mode="light"] .finance-audit-summary>div,html[data-mode="light"] .finance-audit-tools,html[data-mode="light"] .finance-audit-list article { background:#fff;border-color:#dbe3ef; }
html[data-mode="light"] .finance-audit-summary>div.is-activation { background:linear-gradient(135deg,#eff9ff,#fff);border-color:#bae6fd; }
html[data-mode="light"] .finance-audit-summary>div.is-payment { background:linear-gradient(135deg,#ecfdf5,#fff);border-color:#a7f3d0; }
html[data-mode="light"] .finance-audit-summary b,html[data-mode="light"] .finance-audit-list strong,html[data-mode="light"] .finance-audit-list article>b { color:#172033; }
html[data-mode="light"] .finance-audit-summary small,html[data-mode="light"] .finance-audit-summary span,html[data-mode="light"] .finance-audit-list small { color:#52627a; }
html[data-mode="light"] .finance-audit-tools input { background:#f8fafc;border-color:#cbd5e1;color:#172033; }
@media(max-width:430px){.finance-audit-list article{grid-template-columns:auto minmax(0,1fr)}.finance-audit-list article>b{grid-column:2}.finance-audit-summary>div{padding:.8rem}.finance-audit-summary b{font-size:1.15rem}}

html.mandatory-setup-active,html.mandatory-setup-active body { overflow:hidden!important; }
.mandatory-setup-gate { position:fixed;inset:0;z-index:99999;overflow-y:auto;background:radial-gradient(circle at 15% 5%,rgba(14,165,233,.2),transparent 34%),radial-gradient(circle at 88% 92%,rgba(124,58,237,.24),transparent 40%),#07101f;color:#f8fafc;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); }
.mandatory-setup-gate[hidden] { display:none!important; }
.mandatory-setup-shell,.mandatory-setup-loading { width:min(100%,48rem);min-height:calc(100dvh - 2rem);margin:auto;display:flex;flex-direction:column;justify-content:center; }
.mandatory-setup-loading { align-items:center;gap:1rem;text-align:center; }
.mandatory-setup-loading img { width:5rem;height:5rem;border-radius:1.3rem;box-shadow:0 15px 40px rgba(14,165,233,.25); }
.mandatory-setup-head { display:flex;align-items:center;gap:1rem;margin-bottom:1rem; }
.mandatory-setup-head img { width:4.5rem;height:4.5rem;border-radius:1.15rem;box-shadow:0 14px 32px rgba(2,132,199,.25); }
.mandatory-setup-head div { min-width:0; }
.mandatory-setup-head small { color:#38bdf8;font-size:.7rem;font-weight:900; }
.mandatory-setup-head h1 { font-size:clamp(1.35rem,5vw,2rem);font-weight:950;margin:.15rem 0; }
.mandatory-setup-head p { color:#b7c5da;font-size:.76rem;line-height:1.7; }
.mandatory-setup-progress { display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:1.15rem; }
.mandatory-setup-progress i { height:.35rem;border-radius:99px;background:#1e293b; }
.mandatory-setup-progress i.done { background:linear-gradient(90deg,#0ea5e9,#22d3ee);box-shadow:0 0 15px rgba(34,211,238,.35); }
.mandatory-permission-list,.mandatory-price-list { display:grid;gap:.75rem; }
.mandatory-permission-list>button { display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:.8rem;width:100%;padding:1rem;border-radius:1rem;border:1px solid #334155;background:linear-gradient(135deg,#111d31,#17233a);text-align:right;color:#f8fafc; }
.mandatory-permission-list>button>span { display:grid;place-items:center;width:3rem;height:3rem;border-radius:.85rem;background:#172554;color:#38bdf8;border:1px solid #1d4ed8; }
.mandatory-permission-list>button div { display:grid;gap:.2rem; }
.mandatory-permission-list>button strong { font-size:.9rem; }
.mandatory-permission-list>button small { font-size:.68rem;color:#9fb0c8; }
.mandatory-permission-list>button>b { color:#7dd3fc;font-size:.7rem;white-space:nowrap; }
.mandatory-permission-list>button.is-complete { border-color:#10b981;background:linear-gradient(135deg,rgba(6,78,59,.82),#102a2c); }
.mandatory-permission-list>button.is-complete>span { color:#6ee7b7;background:#064e3b;border-color:#10b981; }
.mandatory-permission-list>button.is-complete>b { color:#6ee7b7; }
.mandatory-setup-warning { margin:.8rem 0;color:#fcd34d;background:rgba(120,53,15,.34);border:1px solid rgba(245,158,11,.35);padding:.75rem;border-radius:.8rem;font-size:.68rem;line-height:1.7; }
.mandatory-install-card { display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:.8rem;margin-top:.8rem;padding:.85rem;border:1px solid rgba(56,189,248,.3);border-radius:1rem;background:linear-gradient(135deg,rgba(2,132,199,.15),rgba(79,70,229,.12)); }
.mandatory-install-card>span { display:grid;place-items:center;width:3rem;height:3rem;border-radius:.85rem;background:rgba(14,165,233,.16);color:#7dd3fc;border:1px solid rgba(56,189,248,.3); }
.mandatory-install-card>div { display:grid;gap:.2rem;min-width:0; }
.mandatory-install-card strong { color:#f8fafc;font-size:.78rem;font-weight:950; }
.mandatory-install-card small { color:#a8b4c8;font-size:.64rem;line-height:1.55; }
.mandatory-install-card>button,.mandatory-install-card>b { padding:.52rem .7rem;border:1px solid rgba(103,232,249,.36);border-radius:.7rem;background:#0891b2;color:#fff;font-size:.67rem;font-weight:950;white-space:nowrap; }
.mandatory-install-card>b { background:rgba(16,185,129,.15);border-color:rgba(52,211,153,.3);color:#6ee7b7; }
.mandatory-install-card>button:disabled { opacity:.65; }
.mandatory-install-help { margin:.55rem 0 0;padding:.8rem .9rem;border:1px solid rgba(56,189,248,.35);border-radius:.85rem;background:rgba(2,132,199,.12);color:#dbeafe;font-size:.72rem;font-weight:700;line-height:1.8; }
.mandatory-install-help[hidden] { display:none!important; }
.mandatory-primary,.mandatory-secondary { width:100%;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.9rem 1rem;border-radius:.85rem;font-size:.82rem;font-weight:950;margin-top:.7rem; }
.mandatory-primary { color:#fff;background:linear-gradient(135deg,#0284c7,#06b6d4);box-shadow:0 12px 25px rgba(8,145,178,.25); }
.mandatory-primary:disabled { opacity:.45;filter:saturate(.25);box-shadow:none; }
.mandatory-secondary { color:#cbd5e1;background:#142033;border:1px solid #334155; }
.mandatory-price-list { max-height:min(57dvh,35rem);overflow:auto;padding-inline:.15rem; }
.mandatory-price-list>label { display:grid;grid-template-columns:1fr minmax(9rem,12rem);align-items:center;gap:.8rem;padding:.85rem;border-radius:.9rem;background:linear-gradient(135deg,#111d31,#17233a);border:1px solid #334155; }
.mandatory-price-list label>span { display:grid;gap:.18rem; }
.mandatory-price-list strong { font-size:.8rem; }
.mandatory-price-list small { color:#94a3b8;font-size:.63rem; }
.mandatory-price-list label>div { display:flex;align-items:center;background:#07101f;border:1px solid #475569;border-radius:.7rem;overflow:hidden; }
.mandatory-price-list input { width:100%;min-width:0;padding:.72rem;background:transparent;color:#fff;font-weight:950;text-align:center;outline:none; }
.mandatory-price-list em { padding-inline:.65rem;color:#67e8f9;font-size:.65rem;font-style:normal;white-space:nowrap; }
.mandatory-field-error { min-height:1.2rem;margin-top:.45rem;color:#fda4af;font-size:.7rem;font-weight:800;text-align:center; }
.mandatory-setup-success { align-items:center;text-align:center;max-width:32rem; }
.mandatory-success-icon { width:5rem;height:5rem;display:grid;place-items:center;border-radius:1.4rem;background:#064e3b;color:#6ee7b7;border:1px solid #10b981;box-shadow:0 15px 35px rgba(16,185,129,.2); }
.mandatory-setup-success h1 { margin-top:1rem;font-size:1.65rem;font-weight:950; }
.mandatory-setup-success p { color:#b7c5da;line-height:1.8;margin:.5rem 0 1rem; }
@media(max-width:520px){.mandatory-setup-gate{padding:.8rem}.mandatory-setup-shell,.mandatory-setup-loading{min-height:calc(100dvh - 1.6rem)}.mandatory-setup-head img{width:3.8rem;height:3.8rem}.mandatory-price-list>label{grid-template-columns:1fr}.mandatory-price-list{max-height:52dvh}.mandatory-permission-list>button{grid-template-columns:2.6rem 1fr}.mandatory-permission-list>button>span{width:2.6rem;height:2.6rem}.mandatory-permission-list>button>b{grid-column:2}.mandatory-install-card{grid-template-columns:2.6rem 1fr}.mandatory-install-card>span{width:2.6rem;height:2.6rem}.mandatory-install-card>button,.mandatory-install-card>b{grid-column:2;width:max-content}}
html[data-mode="light"] .wa-safety-panel { background:#ecfdf5; border-color:#a7f3d0; }
html[data-mode="light"] .wa-safety-panel strong { color:#047857; }
html[data-mode="light"] .wa-safety-panel small { color:#52627a; }
@media(max-width:430px) {
  .device-permission-card { align-items:flex-start; flex-wrap:wrap; }
  .device-permission-card > button { width:100%; }
  .wa-master-toggle { align-items:flex-start !important; }
  .wa-toggle-control { flex-direction:column-reverse; gap:.25rem; }
}