body {
    background: var(--page-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
}

.fm-shell-topbar {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: var(--space-3);
    border-bottom: 1px solid var(--border-default);
    padding: var(--space-3) 0;
    color: var(--text-primary);
}
.fm-shell-menu, .fm-shell-theme {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-control);
    padding: 0 var(--space-3);
    background: var(--surface-control);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
}
.fm-shell-brand, .fm-shell-user {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    text-decoration: none;
}
.fm-shell-brand strong, .fm-shell-user strong { display: block; color: var(--text-strong); font-size: var(--font-size-sm); }
.fm-shell-brand small, .fm-shell-user small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--font-size-xs); }
.fm-shell-mark, .fm-shell-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 800;
}
.fm-shell-avatar { border-radius: 50%; }
.drawer-close { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-control); color: var(--text-primary); cursor: pointer; font-size: var(--font-size-xl); line-height: 1; }
.fm-shell-search {
    display: flex;
    min-width: 120px;
    max-width: 360px;
    min-height: 40px;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-control);
    padding: 0 var(--space-3);
    background: var(--surface-control);
    color: var(--text-muted);
}
.fm-shell-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); }
.fm-shell-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-left: auto; }
.fm-shell-topbar :where(button, a, input):focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

@media (max-width: 760px) {
    .fm-shell-topbar { min-height: 64px; flex-wrap: wrap; gap: var(--space-2); }
    .fm-shell-brand { flex: 1; }
    .fm-shell-brand > span:last-child { min-width: 0; }
    .fm-shell-brand strong, .fm-shell-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fm-shell-search { order: 3; max-width: none; flex-basis: 100%; }
    .fm-shell-actions { gap: var(--space-1); }
    .fm-shell-user > span:last-child { display: none; }
}
@media (max-width: 390px) {
    .fm-shell-topbar { gap: var(--space-1); }
    .fm-shell-menu, .fm-shell-theme { min-height: 36px; padding: 0 var(--space-2); font-size: var(--font-size-xs); }
    .fm-shell-mark, .fm-shell-avatar { width: 32px; height: 32px; flex-basis: 32px; }
}

:where(h1, h2, h3, h4, .page-title, .section-title) {
    color: var(--text-strong);
    font-family: var(--font-heading);
}

:where(button, input, select, textarea) { font-family: var(--font-body); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; box-shadow: var(--focus-ring); }

:where(.app-shell, .stock-app, .sms-app, .customer-app, .account-app, .app-control-app, .fm-dashboard-shell) {
    min-height: 100vh;
    background: var(--page-gradient);
    color: var(--text-primary);
}

:where(.app-content) { min-height: 100vh; color: var(--text-primary); }
:where(.stock-topbar, .app-header, .sms-gateway-header, .fm-dashboard-header) {
    color: var(--text-primary);
    border-color: var(--border-default);
}

:where(.stock-app .navigation-drawer, .sms-app .navigation-drawer, .customer-app .navigation-drawer, .account-app .navigation-drawer, .app-control-app .navigation-drawer, .fm-dashboard-shell .navigation-drawer) {
    border-color: var(--border-default);
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-drawer);
}

:where(.drawer-brand, .nav-item, .drawer-account) { color: var(--text-secondary); }
:where(.drawer-brand strong) { color: var(--text-strong); }
:where(.drawer-brand small, .drawer-label) { color: var(--text-subtle); }
:where(.nav-item:hover) { color: var(--text-strong); background: var(--surface-hover); }
:where(.nav-item.is-active) { color: var(--accent-text); background: var(--surface-active); box-shadow: inset 3px 0 var(--accent-primary); }
:where(.drawer-backdrop) { background: var(--overlay-scrim); }

:where(.stock-kpi, .summary-card, .stock-category-card, .stock-core-card, .account-card, .permission-card, .module-card, .customer-panel, .stock-table-panel, .stock-list-panel, .stock-form, .account-form-panel, .app-panel, .olt-panel, .olt-card, .olt-form-box) {
    border-color: var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-card);
}

:where(.stock-button, .button, .toolbar-button, .app-control-button, .olt-source-badges a, .olt-inline-actions a, .olt-inline-actions button) {
    min-height: 42px;
    border-radius: var(--radius-control);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 700;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

:where(.stock-button-primary, .button-primary, .toolbar-button, .app-control-button-primary) {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--text-on-accent);
}

:where(.stock-button-ghost, .button-secondary) {
    border: 1px solid var(--border-strong);
    background: var(--surface-control);
    color: var(--text-primary);
}

:where(.stock-button:hover, .button:hover, .toolbar-button:hover) { transform: translateY(-1px); box-shadow: var(--shadow-control); }
:where(button:disabled, input:disabled, select:disabled, textarea:disabled, .is-disabled) { cursor: not-allowed; opacity: .62; }

:where(.stock-search form, .search-field, .stock-filter-form select, .customer-toolbar select, .form-field input, .form-field select, .form-field textarea, .stock-add-field input, .stock-add-field select, .stock-add-field textarea, .sms-gateway-filter input, .sms-gateway-filter select) {
    border-color: var(--border-control);
    border-radius: var(--radius-control);
    background-color: var(--surface-control);
    color: var(--text-primary);
}

:where(input, select, textarea)::placeholder { color: var(--text-subtle); opacity: 1; }
:where(input, select, textarea):focus-visible { border-color: var(--accent-primary); }
:where(.form-errors, .alert-error, .app-alert.error) { border-color: var(--status-danger); background: var(--status-danger-bg); color: var(--status-danger); }
:where(.customer-alert, .app-alert.success) { border-color: var(--status-success); background: var(--status-success-bg); color: var(--status-success); }
:where(.app-alert.warning) { border-color: var(--status-warning); background: var(--status-warning-bg); color: var(--status-warning); }
:where(.customer-table-wrap, .table-wrap, .stock-table-panel .customer-table-wrap) { max-width: 100%; overflow-x: auto; }
:where(.customer-table, .stock-table) { color: var(--text-primary); }
:where(.customer-table th, .stock-table th) { color: var(--text-muted); border-color: var(--border-default); font-size: var(--font-size-xs); }
:where(.customer-table td, .stock-table td) { color: var(--text-secondary); border-color: var(--border-default); font-size: var(--font-size-xs); }
:where(.customer-table tbody tr:nth-child(even), .stock-table tbody tr:nth-child(even)) { background: color-mix(in srgb, var(--surface-hover) 65%, transparent); }
:where(.customer-table tbody tr:hover, .stock-table tbody tr:hover) { background: var(--surface-hover); }

:where(.stock-status, .status-chip, .customer-status, .account-status, .sms-gateway-status) { border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 700; }
:where(.stock-status.success, .account-status-active) { background: var(--status-success-bg); color: var(--status-success); }
:where(.stock-status.warning) { background: var(--status-warning-bg); color: var(--status-warning); }
:where(.stock-status.danger, .account-status-inactive) { background: var(--status-danger-bg); color: var(--status-danger); }

:where(.app-control-tabs, .sms-source-nav, .sms-gateway-sources, .pagination, .sms-gateway-pagination) { border-color: var(--border-default); }
:where(.app-control-tabs a, .sms-source-tab, .sms-gateway-source, .pagination a, .sms-gateway-pagination a) { color: var(--text-secondary); border-color: var(--border-default); }
:where(.app-control-tabs a:hover, .app-control-tabs a.is-active, .sms-source-tab:hover, .sms-source-tab.is-active, .pagination a.active) { color: var(--accent-text); border-color: var(--accent-primary); background: var(--accent-soft); }

:where(.navigation-drawer, .modal, [role="dialog"]) { color: var(--text-primary); }
:where(.modal, .modal-content, [role="dialog"]) { border-color: var(--border-default); background: var(--surface-raised); box-shadow: var(--shadow-panel); }
:where(.status-shell) { width: min(calc(100% - 32px), 1060px); margin-inline: auto; padding-block: var(--space-6); }
:where(.status-card) { border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: clamp(22px, 5vw, 48px); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-panel); }
:where(.status-code) { color: var(--status-danger); }
:where(.status-card h1) { color: var(--text-strong); }
:where(.status-card p) { color: var(--text-muted); }
:where([data-tooltip]) { position: relative; }
:where([data-tooltip]):hover::after { position: absolute; z-index: 30; inset: auto auto calc(100% + 8px) 50%; padding: 6px 9px; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-primary); content: attr(data-tooltip); font-size: var(--font-size-xs); white-space: nowrap; transform: translateX(-50%); }

.button-spinner, .loader-spinner { border-radius: 50%; animation: fm-spin .7s linear infinite; }
.fm-skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-hover), var(--surface-raised), var(--surface-hover)); background-size: 200% 100%; animation: fm-shimmer 1.4s ease-in-out infinite; }
@keyframes fm-spin { to { transform: rotate(360deg); } }
@keyframes fm-shimmer { to { background-position: -200% 0; } }

html[data-theme="light"] :where(.login-aside) { background: var(--page-gradient); color: var(--text-primary); }
html[data-theme="light"] :where(.login-aside)::before { background: var(--page-gradient); }
html[data-theme="light"] :where(.login-panel) { color: var(--text-primary); }

body:has(.login-shell) { display: grid; min-height: 100vh; place-items: center; padding: 32px 18px; background: var(--page-gradient); }
.login-shell { display: block; width: min(100%, 480px); min-height: 0; }
.login-panel { position: relative; width: 100%; margin: 0; border: 1px solid var(--border-default); border-radius: 20px; padding: 42px; background: var(--surface-raised); box-shadow: var(--shadow-panel); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.login-aside { display: none; }
.login-panel .theme-toggle { position: absolute; top: 14px; right: 14px; min-height: 34px; border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 0 10px; background: var(--surface-control); color: var(--text-primary); cursor: pointer; }
.brand-mark { background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary)); color: var(--text-on-accent); }
.login-panel .eyebrow { color: var(--accent-text); }
.login-panel h1 { color: var(--text-strong); }
.login-intro, .forgot-placeholder, .login-footer { color: var(--text-muted); }
.login-form label { color: var(--text-primary); }
.input-wrap input { border-color: var(--border-default); background: var(--surface-control); color: var(--text-primary); }
.input-icon { color: var(--text-subtle); }
.password-toggle { color: var(--accent-text); }
.button-primary { border: 1px solid var(--accent-primary); background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: var(--text-on-accent); }
.button-primary:hover { background: var(--accent-secondary); }
.alert-error { border-color: var(--status-danger); background: var(--status-danger-bg); color: var(--status-danger); }

html[data-theme="light"] body:has(.app-shell) { background: var(--page-gradient); color: var(--text-primary); }
html[data-theme="light"] .app-shell,
html[data-theme="light"] .app-shell.stock-app,
html[data-theme="light"] .app-shell.sms-app,
html[data-theme="light"] .app-shell.customer-app,
html[data-theme="light"] .app-shell.account-app,
html[data-theme="light"] .app-shell.app-control-app,
html[data-theme="light"] .app-shell.fm-dashboard-shell { background: var(--page-gradient); color: var(--text-primary); }
html[data-theme="light"] .stock-app .navigation-drawer,
html[data-theme="light"] .sms-app .navigation-drawer,
html[data-theme="light"] .customer-app .navigation-drawer,
html[data-theme="light"] .account-app .navigation-drawer,
html[data-theme="light"] .app-control-app .navigation-drawer,
html[data-theme="light"] .fm-dashboard-shell .navigation-drawer { border-color: var(--border-default); background: var(--surface-raised); color: var(--text-primary); }
html[data-theme="light"] .stock-app .nav-item,
html[data-theme="light"] .sms-app .nav-item,
html[data-theme="light"] .customer-app .nav-item,
html[data-theme="light"] .account-app .nav-item,
html[data-theme="light"] .app-control-app .nav-item,
html[data-theme="light"] .fm-dashboard-shell .nav-item { color: var(--text-secondary); }
html[data-theme="light"] .stock-app .nav-item:hover,
html[data-theme="light"] .sms-app .nav-item:hover,
html[data-theme="light"] .customer-app .nav-item:hover,
html[data-theme="light"] .account-app .nav-item:hover,
html[data-theme="light"] .app-control-app .nav-item:hover,
html[data-theme="light"] .fm-dashboard-shell .nav-item:hover { background: var(--surface-hover); color: var(--text-strong); }
html[data-theme="light"] .stock-app .nav-item.is-active,
html[data-theme="light"] .sms-app .nav-item.is-active,
html[data-theme="light"] .customer-app .nav-item.is-active,
html[data-theme="light"] .account-app .nav-item.is-active,
html[data-theme="light"] .app-control-app .nav-item.is-active,
html[data-theme="light"] .fm-dashboard-shell .nav-item.is-active { background: var(--surface-active); box-shadow: inset 3px 0 var(--accent-secondary); color: var(--accent-text); }
html[data-theme="light"] :where(.stock-topbar, .sms-gateway-header, .app-header, .fm-dashboard-header) { border-color: var(--border-default); background-color: var(--surface-header); color: var(--text-primary); }
html[data-theme="light"] :where(.stock-hero h1, .sms-gateway-hero h1, .page-heading h1, .app-control-main h1, .fm-dashboard-main h1, .stock-table-heading h2) { color: var(--text-strong); text-shadow: none; }
html[data-theme="light"] :where(.stock-hero p, .stock-kpi > span, .stock-kpi small, .stock-result-count, .stock-table td, .stock-table td small, .stock-table th, .sms-gateway-hero p) { color: var(--text-muted); }
html[data-theme="light"] :where(.stock-kpi, .stock-table-panel, .sms-gateway-stat, .sms-gateway-filter, .sms-gateway-list, .sms-gateway-card, .customer-panel, .account-card, .account-form-panel, .summary-card, .app-panel, .olt-card, .olt-panel, .olt-form-box, .module-card) { border-color: var(--border-default); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
html[data-theme="light"] :where(.stock-kpi strong, .stock-table td strong, .sms-gateway-card strong, .sms-gateway-list-head h2) { color: var(--text-strong); }
html[data-theme="light"] :where(.stock-table tbody tr:nth-child(even), .customer-table tbody tr:nth-child(even)) { background: var(--table-stripe); }
html[data-theme="light"] :where(.stock-table tbody tr:hover, .customer-table tbody tr:hover) { background: var(--table-row-hover); }
html[data-theme="light"] :where(.stock-search form, .stock-filter-form select, .sms-gateway-search, .sms-gateway-filter select, .sms-gateway-filter input, .form-field input, .form-field select, .form-field textarea, .stock-add-field input, .stock-add-field select, .stock-add-field textarea, .search-field) { border-color: var(--border-default); background: var(--surface-control); color: var(--text-primary); }
html[data-theme="light"] :where(.stock-button-ghost, .button-secondary, .stock-menu-button, .stock-notification) { border-color: var(--border-default); background: var(--surface-control); color: var(--text-primary); }
html[data-theme="light"] :where(.stock-button-primary, .button-primary, .toolbar-button, .sms-gateway-filter-button) { border-color: var(--accent-secondary); background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: var(--text-on-accent); }
html[data-theme="light"] :where(.stock-status.success, .account-status-active) { background: var(--status-success-bg); color: var(--status-success); }
html[data-theme="light"] :where(.stock-status.warning) { background: var(--status-warning-bg); color: var(--status-warning); }
html[data-theme="light"] :where(.stock-status.danger, .account-status-inactive) { background: var(--status-danger-bg); color: var(--status-danger); }

html[data-theme="dark"] body:has(.app-shell) { background: var(--page-gradient); color: var(--text-primary); }
html[data-theme="dark"] .app-shell:not(.stock-app),
html[data-theme="dark"] .app-shell:not(.stock-app) .app-content { background: var(--page-gradient); color: var(--text-primary); }
html[data-theme="dark"] .sms-app .sms-gateway-stat,
html[data-theme="dark"] .sms-app .sms-gateway-filter,
html[data-theme="dark"] .sms-app .sms-gateway-list,
html[data-theme="dark"] .sms-app .sms-gateway-card { border-color: var(--border-default); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
html[data-theme="dark"] .sms-app :where(.sms-gateway-hero h1, .sms-gateway-list-head h2, .sms-card-sender strong) { color: var(--text-strong); }
html[data-theme="dark"] .sms-app :where(.sms-gateway-hero p, .sms-gateway-stat span, .sms-gateway-card > p, .sms-card-top time, .sms-card-sender small) { color: var(--text-muted); }
html[data-theme="dark"] .account-management-page { background: var(--page-bg); color: var(--text-primary); }
html[data-theme="light"] .account-management-page { background: var(--page-gradient); color: var(--text-primary); }
html[data-theme="dark"] body:has(.fm-all-customers-shell),
html[data-theme="dark"] body:has(.sms-gateway-main),
html[data-theme="light"] body:has(.fm-all-customers-shell),
html[data-theme="light"] body:has(.sms-gateway-main),
html[data-theme="dark"] body:has(.app-control-app),
html[data-theme="light"] body:has(.app-control-app) { background: var(--page-gradient); color: var(--text-primary); }

html[data-theme] body:has(.app-shell) { background: var(--page-gradient); color: var(--text-primary); }
html[data-theme] body:has(.app-shell) .app-shell,
html[data-theme] body:has(.app-shell) .app-shell .app-content { background-color: transparent; color: var(--text-primary); }
html[data-theme] body:has(.app-shell) :where(.app-header, .stock-topbar, .sms-gateway-header, .fm-dashboard-header) { border-color: var(--border-default); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-control); }
html[data-theme] body:has(.app-shell) :where(.glass-panel, .summary-card, .fm-summary-card, .fm-monitor-panel, .fm-table-panel, .fm-action-panel, .fm-monitor-checks, .fm-traffic-panel, .fm-info-panel, .app-metrics article, .app-panel, .customer-panel, .customer-card, .stock-kpi, .stock-table-panel, .stock-form, .stock-list-panel, .account-card, .account-form-panel, .account-detail-hero, .sms-gateway-stat, .sms-gateway-filter, .sms-gateway-list, .sms-gateway-card, .olt-card, .olt-panel, .olt-form-box, .module-card, .permission-card) { border-color: var(--border-default); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
html[data-theme] body:has(.app-shell) :where(h1, h2, h3, h4, .fm-summary-card strong, .stock-kpi strong, .stock-table td strong, .app-metrics strong, .sms-gateway-stat strong, .account-balance) { color: var(--text-strong); }
html[data-theme] body:has(.app-shell) :where(p, small, label, .intro-copy, .profile-id, .stock-hero p, .stock-result-count, .fm-summary-card p, .fm-summary-card small, .sms-gateway-card > p, .sms-gateway-stat span) { color: var(--text-muted); }
html[data-theme] body:has(.app-shell) :where(.stock-search form, .search-field, .fm-header-search, .stock-filter-form select, .customer-toolbar select, .form-field input, .form-field select, .form-field textarea, .stock-add-field input, .stock-add-field select, .stock-add-field textarea, .sms-gateway-search, .sms-gateway-filter input, .sms-gateway-filter select, .app-form input, .app-form select, .app-form textarea) { border-color: var(--border-default); background: var(--surface-control); color: var(--text-primary); }
html[data-theme] body:has(.app-shell) :where(input, select, textarea)::placeholder { color: var(--text-subtle); opacity: 1; }
html[data-theme] body:has(.app-shell) :where(.stock-button-primary, .button-primary, .dashboard-link, .toolbar-button, .app-control-button-primary, .sms-gateway-filter-button) { border-color: var(--accent-secondary); background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: var(--text-on-accent); }
html[data-theme] body:has(.app-shell) :where(.stock-button-ghost, .button-secondary, .menu-button, .stock-menu-button, .notification-button, .stock-notification, .fm-header-icon) { border-color: var(--border-default); background: var(--surface-control); color: var(--text-primary); }
html[data-theme] body:has(.app-shell) :where(.customer-table th, .stock-table th, .customer-table td, .stock-table td, .fm-data-table th, .fm-data-table td, .olt-table th, .olt-table td) { border-color: var(--border-default); color: var(--text-secondary); }
html[data-theme] body:has(.app-shell) :where(.customer-table tbody tr:nth-child(even), .stock-table tbody tr:nth-child(even), .fm-data-table tbody tr:nth-child(even), .olt-table tbody tr:nth-child(even)) { background: var(--table-stripe); }
html[data-theme] body:has(.app-shell) :where(.customer-table tbody tr:hover, .stock-table tbody tr:hover, .fm-data-table tbody tr:hover, .olt-table tbody tr:hover) { background: var(--table-row-hover); }
html[data-theme] body:has(.app-shell) :where(.stock-status.success, .status-chip, .account-status-active, .customer-status.active) { background: var(--status-success-bg); color: var(--status-success); }
html[data-theme] body:has(.app-shell) :where(.stock-status.warning, .account-status-pending) { background: var(--status-warning-bg); color: var(--status-warning); }
html[data-theme] body:has(.app-shell) :where(.stock-status.danger, .account-status-inactive, .form-errors) { background: var(--status-danger-bg); color: var(--status-danger); }

html body .app-shell :where(small, th, td, button, input, select, textarea, .stock-kicker, .sms-gateway-kicker, .eyebrow, [class*="badge"], [class*="status"]) { font-size: max(11px, .875em); }
html body .theme-toggle { min-height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 0 10px; background: var(--surface-control); color: var(--text-primary); cursor: pointer; font-size: var(--font-size-xs); font-weight: 700; }
html body > .theme-toggle { position: fixed; z-index: 50; top: 14px; right: 14px; }

@media (max-width: 760px) {
    .stock-app .stock-table, .stock-app .customer-table { display: table; width: max-content; min-width: 1030px; }
    .stock-app .stock-table thead, .stock-app .customer-table thead { display: table-header-group; }
    .stock-app .stock-table tbody, .stock-app .customer-table tbody { display: table-row-group; width: auto; }
    .stock-app .stock-table tr, .stock-app .customer-table tr { display: table-row; width: auto; margin: 0; border: 0; border-radius: 0; padding: 0; background: transparent; }
    .stock-app .stock-table td, .stock-app .customer-table td { display: table-cell; width: auto; border-top: 1px solid var(--border-default); padding: 14px; text-align: left; }
    .stock-app .stock-table td::before, .stock-app .customer-table td::before { content: none; }
    :where(.form-grid, .stock-add-grid, .app-metrics, .summary-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
    :where(.form-grid, .stock-add-grid, .app-metrics, .summary-grid) { grid-template-columns: 1fr; }
    :where(.app-content) { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 520px) {
    body:has(.login-shell) { padding: 18px 12px; }
    .login-panel { padding: 38px 22px 28px; }
}

.stock-app { min-height: 100vh; background: var(--page-gradient); color: var(--text-primary); }
.app-main { width: min(100%, 1180px); margin-inline: auto; padding-block: var(--space-8); color: var(--text-primary); }
.page-eyebrow { margin: 0 0 var(--space-2); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.text-link { display: inline-flex; margin-bottom: var(--space-4); color: var(--accent-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-decoration: none; }
.text-link:hover { color: var(--text-strong); }
.component-panel { border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: clamp(var(--space-5), 5vw, var(--space-8)); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
.module-placeholder { width: min(100%, 650px); margin-top: var(--space-5); }
.module-placeholder h2 { margin: 0 0 var(--space-2); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-lg) var(--font-heading); }
.module-placeholder p { max-width: 520px; color: var(--text-muted); line-height: var(--line-height-relaxed); }
.module-placeholder .button { padding-inline: var(--space-4); text-decoration: none; }
.icon-tile { display: grid; width: 40px; height: 40px; place-items: center; margin-bottom: var(--space-4); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-text); font-size: var(--font-size-xl); }
.stock-app .app-content { padding: 0 clamp(var(--space-4), 4vw, var(--space-9)) var(--space-12); }
.stock-main { width: min(100%, 1380px); margin-inline: auto; padding: var(--space-10) 0 var(--space-12); }
.stock-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-8); }
.stock-kicker { margin: 0 0 var(--space-2); color: var(--accent-text); font-size: var(--font-size-2xs); font-weight: var(--font-weight-heavy); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.stock-hero h1, .stock-add-heading h1 { margin: 0 0 var(--space-2); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-display) var(--font-heading); line-height: var(--line-height-tight); }
.stock-hero > div > p:last-child, .stock-add-heading > div > p:last-child { margin: 0; color: var(--text-muted); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); }
.stock-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.stock-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--surface-control); color: var(--text-primary); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-decoration: none; transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.stock-button-primary { border-color: var(--accent-primary); background: var(--gradient-accent); color: var(--text-on-accent); }
.stock-button-ghost { border-color: var(--border-strong); background: var(--surface-control); color: var(--text-primary); }
.stock-button:hover { border-color: var(--accent-primary); background-color: var(--surface-hover); box-shadow: var(--shadow-control); transform: translateY(-1px); }
.stock-button-primary:hover { background: var(--accent-secondary); color: var(--text-on-accent); }
.stock-kpi-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); }
.stock-kpi { position: relative; min-width: 0; min-height: 160px; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-4); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.stock-kpi::after { position: absolute; right: calc(var(--space-8) * -1); bottom: calc(var(--space-9) * -1); width: 116px; height: 116px; border: 1px solid var(--border-strong); border-radius: var(--radius-round); content: ''; opacity: .55; }
.stock-kpi:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-panel); transform: translateY(-2px); }
.stock-kpi-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid currentColor; border-radius: var(--radius-control); background: var(--accent-soft); font-size: var(--font-size-lg); }
.stock-kpi-icon.blue { color: var(--accent-text); }
.stock-kpi-icon.cyan { color: var(--kpi-cyan); }
.stock-kpi-icon.amber { color: var(--kpi-amber); }
.stock-kpi-icon.red { color: var(--status-danger); }
.stock-kpi-icon.violet { color: var(--kpi-violet); }
.stock-kpi-icon.green { color: var(--kpi-green); }
.stock-kpi > span, .stock-kpi small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-kpi > span { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.stock-kpi strong { display: block; overflow: hidden; margin-top: var(--space-2); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-xl) var(--font-heading); text-overflow: ellipsis; white-space: nowrap; }
.stock-kpi small { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--font-size-2xs); }
.stock-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin: var(--space-7) 0 var(--space-3); }
.stock-filter-form { display: flex; align-items: flex-end; gap: var(--space-2); }
.stock-filter-form label { display: grid; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal); text-transform: uppercase; }
.stock-filter-form select { min-width: 215px; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--surface-control); color: var(--text-primary); font: var(--font-weight-regular) var(--font-size-sm) var(--font-body); }
.stock-result-count { color: var(--text-muted); font-size: var(--font-size-xs); }
.stock-result-count strong { color: var(--text-primary); }
.stock-table-panel { overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-panel); }
.stock-table-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--border-default); padding: var(--space-5); }
.stock-table-heading .stock-kicker { margin-bottom: var(--space-1); }
.stock-table-heading h2 { margin: 0; color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-lg) var(--font-heading); }
.stock-table-heading > a { color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-decoration: none; }
.stock-table-heading > a:hover { color: var(--text-strong); }
.stock-table-panel .customer-table-wrap { padding: 0; }
.stock-table { min-width: 1030px; }
.stock-table th { border-bottom: 1px solid var(--border-default); padding: var(--space-3); color: var(--text-muted); font-size: var(--font-size-2xs); letter-spacing: var(--letter-spacing-normal); }
.stock-table th em { display: block; margin-top: var(--space-1); color: var(--text-subtle); font-size: var(--font-size-2xs); font-style: normal; letter-spacing: 0; text-transform: none; }
.stock-table td { border-top: 1px solid var(--border-default); padding: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-xs); }
.stock-table tbody tr:nth-child(even) { background: var(--table-stripe); }
.stock-table tbody tr:hover { background: var(--table-row-hover); }
.stock-table td strong { color: var(--text-strong); font-size: var(--font-size-sm); }
.stock-table td small { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--font-size-2xs); }
.stock-table td code { color: var(--accent-text); font-family: var(--font-body); font-size: var(--font-size-2xs); }
.stock-thumb { display: grid; width: 38px; height: 38px; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-control); color: var(--text-muted); font-size: var(--font-size-2xs); }
.stock-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stock-quantity { color: var(--text-strong); }
.stock-status { display: inline-flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); white-space: nowrap; }
.stock-status i { width: 6px; height: 6px; border-radius: var(--radius-round); background: currentColor; }
.stock-status.success { background: var(--status-success-bg); color: var(--status-success); }
.stock-status.warning { background: var(--status-warning-bg); color: var(--status-warning); }
.stock-status.danger { background: var(--status-danger-bg); color: var(--status-danger); }
.stock-row-actions { display: flex; align-items: center; gap: var(--space-1); }
.stock-row-actions a { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-control); color: var(--accent-text); font-size: var(--font-size-md); text-decoration: none; }
.stock-row-actions a:hover { border-color: var(--accent-primary); background: var(--surface-hover); }
.stock-row-actions a.delete { color: var(--status-danger); }
.stock-table .empty-state { color: var(--text-muted); }

.stock-add-heading { margin-bottom: var(--space-5); }
.stock-add-back { display: inline-flex; margin-bottom: var(--space-5); color: var(--accent-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-decoration: none; }
.stock-add-back:hover { color: var(--text-strong); }
.stock-add-form { display: grid; max-width: 1080px; gap: var(--space-3); }
.stock-add-panel { border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-5); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
.stock-add-panel-heading { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.stock-add-step { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font: var(--font-weight-heavy) var(--font-size-2xs) var(--font-heading); }
.stock-add-panel-heading h2 { margin: 0 0 var(--space-1); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-md) var(--font-heading); }
.stock-add-panel-heading p { margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); }
.stock-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.stock-add-field { display: grid; gap: var(--space-1); color: var(--text-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.stock-add-field span b { color: var(--accent-text); }
.stock-add-field input, .stock-add-field select, .stock-add-field textarea { width: 100%; min-height: 44px; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); background: var(--surface-control); color: var(--text-primary); font: var(--font-weight-regular) var(--font-size-sm) var(--font-body); }
.stock-add-field textarea { min-height: 102px; resize: vertical; }
.stock-add-field input::placeholder, .stock-add-field textarea::placeholder { color: var(--text-subtle); }
.stock-add-field input:focus, .stock-add-field select:focus, .stock-add-field textarea:focus { border-color: var(--accent-primary); box-shadow: var(--focus-ring); }
.stock-add-field.wide { grid-column: 1 / -1; }
.stock-add-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-1); }
.stock-add-actions .stock-button { min-width: 110px; }
.stock-add-form + * { margin-top: 0; }

@media (max-width: 1100px) { .stock-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .stock-app .app-content { padding: 0 var(--space-3) var(--space-7); }
    .stock-main { padding: var(--space-7) 0 var(--space-8); }
    .stock-hero { display: block; margin-bottom: var(--space-5); }
    .stock-hero h1, .stock-add-heading h1 { font-size: var(--font-size-2xl); }
    .stock-actions { justify-content: flex-start; margin-top: var(--space-4); }
    .stock-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .stock-kpi { min-height: 145px; padding: var(--space-3); }
    .stock-kpi strong { font-size: var(--font-size-lg); }
    .stock-toolbar { display: block; margin-top: var(--space-5); }
    .stock-filter-form { align-items: stretch; }
    .stock-filter-form label { flex: 1; }
    .stock-filter-form select { min-width: 0; width: 100%; }
    .stock-result-count { display: block; margin-top: var(--space-2); }
    .stock-table-heading { padding: var(--space-4) var(--space-3); }
    .stock-table-heading > a { white-space: nowrap; }
    .stock-table-panel .customer-table-wrap { overflow-x: auto; }
    .stock-table { min-width: 1030px; }
    .stock-add-grid { grid-template-columns: 1fr; }
    .stock-add-field.wide { grid-column: auto; }
    .stock-add-actions { justify-content: stretch; }
    .stock-add-actions .stock-button { flex: 1; }
    .stock-add-panel { padding: var(--space-4); }
}
.app-shell .eyebrow { color: var(--accent-text); }

.fm-all-customers-main { width: min(100%, 1240px); min-width: 0; margin: 0 auto; padding: var(--space-7) 0; }
.fm-all-customers-main .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.fm-all-customers-main .page-heading h1 { margin: 0 0 var(--space-2); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-2xl) var(--font-heading); }
.fm-all-customers-main .page-heading p { margin: 0; color: var(--text-muted); }
.fm-all-customers-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-panel); }
.fm-registration-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border-default); padding: var(--space-4) var(--space-5); background: var(--surface-card); }
.fm-registration-panel__left { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.fm-registration-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-text); }
.fm-registration-label { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); }
.fm-registration-title { margin: 0; color: var(--text-strong); font: var(--font-weight-bold) var(--font-size-lg) var(--font-heading); }
.fm-register-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid var(--accent-primary); border-radius: var(--radius-control); padding: 0 var(--space-4); background: var(--gradient-accent); color: var(--text-on-accent); font-weight: var(--font-weight-bold); text-decoration: none; }
.fm-toolbar { display: flex; min-width: 0; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-2); }
.fm-toolbar__search { position: relative; min-width: 0; flex: 1; }
.fm-toolbar__search input, .fm-toolbar__field { width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--surface-control); color: var(--text-primary); font: inherit; }
.fm-toolbar__search input { padding-left: 38px; }
.fm-toolbar__search-icon { position: absolute; top: 50%; left: var(--space-3); color: var(--text-muted); transform: translateY(-50%); }
.fm-toolbar__filter { min-height: 42px; border: 1px solid var(--accent-primary); border-radius: var(--radius-control); padding: 0 var(--space-4); background: var(--gradient-accent); color: var(--text-on-accent); font-weight: var(--font-weight-bold); cursor: pointer; }
.fm-toolbar__meta { display: flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.fm-toolbar__meta strong { color: var(--text-strong); }
.fm-customer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
.fm-customer-card { display: flex; min-width: 0; min-height: 240px; flex-direction: column; align-items: center; gap: var(--space-2); overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-4); background: var(--surface-card); color: var(--text-primary); text-align: center; text-decoration: none; }
.fm-customer-card:hover { border-color: var(--accent-primary); background: var(--surface-hover); }
.fm-customer-photo { position: relative; display: grid; width: 76px; height: 76px; flex: 0 0 76px; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.fm-customer-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wifi-profile-avatar { position: relative; display: grid; width: 92px; height: 92px; flex: 0 0 92px; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-round); background: var(--accent-soft); color: var(--accent-text); }
.wifi-profile-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.fm-customer-name { max-width: 100%; margin: var(--space-1) 0 0; color: var(--text-strong); font-size: var(--font-size-md); overflow-wrap: anywhere; }
.fm-customer-pppoe { max-width: 100%; margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.fm-customer-status { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--status-success); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); background: var(--status-success-bg); color: var(--status-success); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.fm-customer-status.is-inactive { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text-secondary); }
.fm-customer-profile-button { display: grid; width: 100%; min-height: 38px; place-items: center; margin-top: auto; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-control); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.fm-empty-state { padding: var(--space-7) var(--space-4); color: var(--text-muted); text-align: center; }
.fm-empty-state h3 { color: var(--text-strong); }
.fm-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-5); }
.fm-pagination a { display: grid; min-width: 36px; min-height: 36px; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 0 var(--space-2); background: var(--surface-control); color: var(--text-secondary); text-decoration: none; }
.fm-pagination a.is-current { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--text-on-accent); }

.application-profile-page { width: min(100%, 1040px); min-width: 0; margin: 0 auto; padding: var(--space-5) var(--space-4) 100px; color: var(--text-primary); }
.application-profile-back { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--accent-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-decoration: none; }
.application-profile-hero { display: flex; min-width: 0; align-items: center; gap: var(--space-4); overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-5); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
.application-profile-avatar { display: grid; width: 96px; height: 96px; flex: 0 0 96px; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: 50%; padding: 0; background: var(--accent-soft); color: var(--accent-text); font: var(--font-weight-heavy) var(--font-size-xl) var(--font-heading); cursor: zoom-in; }
.application-profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.application-profile-heading { min-width: 0; }
.application-profile-heading h1 { margin: 0 0 var(--space-2); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-2xl) var(--font-heading); overflow-wrap: anywhere; }
.application-profile-reference, .application-profile-time { color: var(--text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.application-profile-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.application-profile-section { min-width: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-4); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
.application-profile-section h2 { color: var(--text-strong); font: var(--font-weight-bold) var(--font-size-md) var(--font-heading); }
.application-profile-section dl { margin: 0; }
.application-profile-section dl > div { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1fr); gap: var(--space-2); border-top: 1px solid var(--border-default); padding: var(--space-2) 0; }
.application-profile-section dt { color: var(--text-muted); font-size: var(--font-size-xs); }
.application-profile-section dd, .application-notes { min-width: 0; margin: 0; color: var(--text-primary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.application-profile-section dd a, .application-profile-section > a { color: var(--accent-text); overflow-wrap: anywhere; }
.application-muted { color: var(--text-muted); }
.application-profile-actionbar { position: fixed; z-index: 5; inset: auto 0 0; display: flex; justify-content: center; gap: var(--space-2); border-top: 1px solid var(--border-default); padding: var(--space-3); background: var(--surface-raised); }

.pending-main { width: min(100%, 1240px); min-width: 0; margin: 0 auto; padding: var(--space-7) 0; color: var(--text-primary); }
.pending-main .page-heading { margin-bottom: var(--space-5); }
.pending-main .page-heading h1 { margin: 0 0 var(--space-2); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-2xl) var(--font-heading); }
.pending-main .page-heading .intro-copy { margin: 0; color: var(--text-muted); }
.pending-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-panel); }
.pending-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--border-default); padding: var(--space-3); background: var(--surface-raised); }
.pending-search { display: flex; min-width: 180px; min-height: 42px; flex: 1 1 220px; align-items: center; gap: var(--space-2); border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--surface-control); color: var(--text-muted); }
.pending-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); }
.pending-toolbar select { min-width: 120px; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--surface-control); color: var(--text-primary); }
.pending-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; color: var(--text-muted); font-size: var(--font-size-xs); }
.pending-meta strong { color: var(--text-strong); }
.pending-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; gap: var(--space-3); padding: var(--space-4); }
.pending-customer-card { display: grid; min-width: 0; grid-template-columns: 56px minmax(0, 1fr); align-content: start; align-items: center; gap: var(--space-2) var(--space-3); overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-3); background: var(--surface-card); color: var(--text-primary); text-decoration: none; }
.pending-customer-card:hover { border-color: var(--accent-primary); background: var(--surface-hover); }
.pending-customer-card .wifi-customer-photo { display: grid; width: 56px; height: 56px; min-width: 0; grid-column: 1; grid-row: 1 / span 2; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.pending-customer-card .wifi-customer-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pending-customer-card .wifi-customer-info { display: grid; min-width: 0; grid-column: 2; grid-row: 1 / span 2; gap: var(--space-1); }
.pending-customer-card .wifi-customer-info h3 { margin: 0; color: var(--text-strong); font-size: var(--font-size-md); overflow-wrap: anywhere; }
.pending-customer-card .wifi-customer-info p { margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.pending-customer-card .wifi-customer-info .wifi-customer-id { color: var(--accent-text); font-weight: var(--font-weight-bold); }
.pending-customer-card .wifi-customer-meta { display: grid; min-width: 0; grid-column: 1 / -1; gap: var(--space-1); border-top: 1px solid var(--border-default); padding-top: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); }
.pending-customer-card .wifi-customer-meta span { overflow-wrap: anywhere; }
.pending-customer-card .wifi-customer-footer { display: flex; min-width: 0; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pending-customer-card .customer-status { border: 1px solid var(--status-warning); background: var(--status-warning-bg); color: var(--status-warning); }
.pending-customer-card .customer-status.status-approved { border-color: var(--status-success); background: var(--status-success-bg); color: var(--status-success); }
.pending-customer-card .customer-status.status-removed { border-color: var(--status-danger); background: var(--status-danger-bg); color: var(--status-danger); }
.pending-customer-card .wifi-card-arrow { color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-decoration: none; }
.pending-card-actions { display: flex; grid-column: 1 / -1; gap: var(--space-2); }
.pending-card-actions button, .pending-card-actions a { display: inline-flex; min-height: 36px; flex: 1; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 0 var(--space-2); font: var(--font-weight-bold) var(--font-size-xs) var(--font-body); text-decoration: none; cursor: pointer; }
.pending-card-actions .pending-action-approved { border-color: var(--status-success); background: var(--status-success); color: var(--text-on-accent); }
.pending-card-actions .pending-action-removed { border-color: var(--status-danger); background: var(--status-danger-bg); color: var(--status-danger); }
.pending-customer-profile-link { grid-column: 1 / -1; color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.pending-removal-reason { grid-column: 1 / -1; margin: 0; color: var(--status-danger); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.pending-type-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border-default); padding: var(--space-3) var(--space-4) 0; }
.pending-type-tab { min-width: 72px; border-bottom: 2px solid var(--color-transparent); padding: 0 var(--space-2) var(--space-2); color: var(--text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-align: center; text-decoration: none; }
.pending-type-tab:hover, .pending-type-tab.is-active { border-bottom-color: var(--accent-primary); color: var(--accent-text); }
.pending-dialog { width: min(calc(100% - 24px), 520px); max-width: 520px; max-height: min(90vh, 760px); overflow: auto; border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: 0; background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-panel); }
.pending-dialog::backdrop { background: var(--overlay-scrim); backdrop-filter: blur(3px); }
.pending-dialog-form { display: grid; gap: var(--space-3); padding: var(--space-5); }
.pending-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-3); }
.pending-dialog-head h2 { margin: 0; color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-lg) var(--font-heading); }
.pending-dialog-head .eyebrow { margin: 0 0 var(--space-1); }
.pending-dialog-close { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-control); color: var(--text-primary); font-size: var(--font-size-lg); cursor: pointer; }
.approval-summary { display: grid; gap: var(--space-1); border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: var(--space-3); background: var(--surface-card); }
.approval-summary strong { color: var(--text-strong); }
.approval-summary span, .removal-copy { color: var(--text-muted); font-size: var(--font-size-sm); }
.review-field { display: grid; gap: var(--space-1); color: var(--text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.review-field > span { color: var(--text-muted); font-size: var(--font-size-xs); }
.review-field input, .review-field textarea { width: 100%; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); background: var(--surface-control); color: var(--text-primary); }
.review-field textarea { resize: vertical; }
.password-input-wrap { display: flex; align-items: center; gap: var(--space-2); }
.password-input-wrap input { min-width: 0; flex: 1; }
.password-visibility { min-height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 0 var(--space-2); background: var(--surface-control); color: var(--text-primary); cursor: pointer; }
.pppoe-check-status, .review-modal-error { margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.pppoe-check-status[data-state="error"], .review-modal-error { color: var(--status-danger); }
.pppoe-check-status[data-state="available"] { color: var(--status-success); }
.pending-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.pending-dialog-actions .button { min-height: 40px; padding: 0 var(--space-3); }
.pending-toast { position: fixed; z-index: 20; right: var(--space-4); bottom: var(--space-4); max-width: min(420px, calc(100% - 24px)); border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-panel); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.pending-toast.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pending-toast a { color: var(--accent-text); font-weight: var(--font-weight-bold); }
.pending-customer-card.is-new { border-color: var(--accent-primary); }
.pending-customer-card.is-removing { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }

.application-approval { width: min(100%, 1120px); padding: var(--space-5) 0 var(--space-8); color: var(--text-primary); }
.application-approval .breadcrumb { margin-bottom: var(--space-4); color: var(--accent-text); }
.approval-page-heading { margin-bottom: var(--space-4); }
.approval-page-heading h1 { margin: 0 0 var(--space-2); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-2xl) var(--font-heading); }
.approval-page-heading p:last-child { margin: 0; color: var(--text-muted); }
.approval-alert { margin-bottom: var(--space-3); border: 1px solid var(--status-danger); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); background: var(--status-danger-bg); color: var(--status-danger); }
.approval-form { display: grid; gap: var(--space-3); }
.approval-section { min-width: 0; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--surface-raised); box-shadow: var(--shadow-control); }
.approval-section-heading { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-3); }
.approval-section-heading h2 { margin: 0; color: var(--text-strong); font: var(--font-weight-bold) var(--font-size-lg) var(--font-heading); }
.approval-step { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.approval-summary-layout { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.approval-photo { display: grid; width: 112px; height: 112px; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-control); color: var(--text-muted); font-size: var(--font-size-xs); }
.approval-photo img { width: 100%; height: 100%; object-fit: cover; }
.approval-summary-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); margin: 0; }
.approval-summary-data div { min-width: 0; }
.approval-summary-data dt { margin-bottom: var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); }
.approval-summary-data dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.approval-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.approval-fields > label, .approval-material-row > label { display: grid; min-width: 0; gap: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.approval-fields input, .approval-fields select, .approval-fields textarea, .approval-material-row input, .approval-material-row select { width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); background: var(--surface-control); color: var(--text-primary); font: var(--font-weight-regular) var(--font-size-md) var(--font-body); }
.approval-fields textarea { resize: vertical; }
.approval-fields input:focus, .approval-fields select:focus, .approval-fields textarea:focus, .approval-material-row input:focus, .approval-material-row select:focus { outline: none; box-shadow: var(--focus-ring); }
.approval-field-wide { grid-column: 1 / -1; }
.approval-password-wrap { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.approval-password-wrap input { flex: 1; }
.approval-utility-button, .approval-secondary-button, .approval-primary-button, .approval-remove-row { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0 var(--space-3); background: var(--surface-control); color: var(--text-primary); font: var(--font-weight-semibold) var(--font-size-sm) var(--font-body); text-decoration: none; cursor: pointer; }
.approval-primary-button { border-color: var(--accent-secondary); background: var(--gradient-accent); color: var(--text-on-accent); font-weight: var(--font-weight-bold); }
.approval-primary-button:disabled { cursor: wait; opacity: .58; }
.approval-pppoe-status { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); }
.approval-pppoe-status[data-state="available"] { color: var(--status-success); }
.approval-pppoe-status[data-state="error"] { color: var(--status-danger); }
.approval-pppoe-status[data-state="checking"] { color: var(--status-warning); }
.approval-material-list { display: grid; gap: var(--space-2); }
.approval-no-materials { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.approval-no-materials input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-secondary); }
.approval-material-error { margin: 0 0 var(--space-3); border: 1px solid var(--status-danger); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); background: var(--status-danger-bg); color: var(--status-danger); }
.approval-material-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-4); color: var(--text-muted); text-align: center; }
.approval-material-row { display: grid; grid-template-columns: minmax(130px, 1.3fr) minmax(150px, 1.5fr) minmax(110px, .8fr) minmax(90px, .7fr) minmax(120px, 1.2fr) auto; align-items: end; gap: var(--space-2); border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-2); }
.approval-material-row > label > span { color: var(--text-muted); font-size: var(--font-size-xs); }
.approval-remove-row { min-height: 42px; padding: 0 var(--space-2); color: var(--status-danger); }
.approval-material-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.approval-stock-toggle { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font-size: var(--font-size-sm); }
.approval-stock-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-secondary); }
.approval-pppoe-mode { display: flex; flex-wrap: wrap; gap: var(--space-3); min-width: 0; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-3); }
.approval-pppoe-mode legend { padding-inline: var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); }
.approval-pppoe-mode label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font-size: var(--font-size-sm); }
.approval-pppoe-mode input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--accent-secondary); }
.approval-replacement-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.approval-replacement-picker label { display: grid; min-width: 0; gap: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.approval-replacement-picker input, .approval-replacement-picker select { width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); background: var(--surface-control); color: var(--text-primary); font: var(--font-weight-regular) var(--font-size-md) var(--font-body); }
.approval-replacement-dialog { width: min(100% - 24px, 620px); max-width: 620px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--surface-raised); color: var(--text-primary); }
.approval-replacement-confirmation { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: var(--space-3); margin-block: var(--space-4); }
.approval-replacement-photo { width: 88px; height: 88px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); object-fit: cover; }
.approval-replacement-confirmation dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.approval-replacement-confirmation dl div { min-width: 0; }
.approval-replacement-confirmation dt { color: var(--text-muted); font-size: var(--font-size-xs); }
.approval-replacement-confirmation dd { margin: 0; overflow-wrap: anywhere; color: var(--text-primary); }
.approval-linked-record-heading { grid-column: 1 / -1; margin: 0; font-weight: var(--font-weight-semibold); }
.approval-replacement-confirmation ul { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); margin: 0; padding-left: var(--space-4); color: var(--text-muted); font-size: var(--font-size-xs); }
.approval-submit-bar { position: sticky; bottom: var(--space-2); display: flex; justify-content: flex-end; gap: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-2); background: var(--surface-raised); box-shadow: var(--shadow-panel); }

@media (max-width: 760px) {
    .application-approval { padding: var(--space-4) 0 var(--space-6); }
    .approval-material-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .approval-material-note { grid-column: 1 / -1; }
    .approval-replacement-picker { grid-template-columns: minmax(0, 1fr); }
    .approval-remove-row { justify-self: start; }
}
@media (max-width: 420px) {
    .approval-section { padding: var(--space-3); }
    .approval-summary-layout { grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-2); }
    .approval-photo { width: 76px; height: 76px; }
    .approval-summary-data { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .approval-fields, .approval-material-row { grid-template-columns: minmax(0, 1fr); }
    .approval-field-wide, .approval-material-note { grid-column: auto; }
    .approval-password-wrap { flex-wrap: wrap; }
    .approval-password-wrap input { flex-basis: 100%; }
    .approval-replacement-confirmation { grid-template-columns: 64px minmax(0, 1fr); }
    .approval-replacement-photo { width: 64px; height: 64px; }
    .approval-replacement-confirmation dl, .approval-replacement-confirmation ul { grid-template-columns: minmax(0, 1fr); }
    .approval-submit-bar { position: static; flex-direction: column-reverse; }
    .approval-submit-bar > * { width: 100%; }
}

@media (max-width: 640px) {
    .fm-all-customers-main { padding: var(--space-5) 0; }
    .fm-all-customers-main .page-heading { display: block; }
    .fm-registration-panel { align-items: flex-start; flex-wrap: wrap; padding: var(--space-3); }
    .fm-registration-panel__left { width: 100%; }
    .fm-register-button { width: 100%; }
    .fm-toolbar { flex-wrap: wrap; padding: var(--space-3); }
    .fm-toolbar__search, .fm-toolbar__field, .fm-toolbar__filter { width: 100%; flex: 1 1 100%; }
    .fm-toolbar__meta { width: 100%; justify-content: flex-end; }
    .fm-customer-grid { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
    .fm-customer-card { min-height: 0; }
    .application-profile-page { padding: var(--space-3) var(--space-3) 92px; }
    .application-profile-hero { align-items: flex-start; gap: var(--space-3); padding: var(--space-3); }
    .application-profile-avatar { width: 72px; height: 72px; flex-basis: 72px; }
    .application-profile-heading h1 { font-size: var(--font-size-lg); }
    .application-profile-sections { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .application-profile-section { padding: var(--space-3); }
    .pending-main { padding: var(--space-5) 0; }
    .pending-toolbar { align-items: stretch; }
    .pending-search { flex-basis: 100%; }
    .pending-toolbar select { min-width: 0; flex: 1; }
    .pending-toolbar .button, .pending-toolbar .refresh-link { flex: 0 0 auto; }
    .pending-meta { padding-inline: var(--space-3); }
    .pending-cards { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
    .pending-customer-card { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); }
    .pending-customer-card .wifi-customer-photo { width: 48px; height: 48px; }
    .pending-dialog-form { padding: var(--space-4); }
    .pending-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .pending-dialog-actions .button { width: 100%; padding-inline: var(--space-2); }
}

:where(.customer-main, .pending-main, .fm-all-customers-main) { width: min(100%, 1240px); min-width: 0; margin-inline: auto; padding-block: var(--space-7); color: var(--text-primary); }
:where(.customer-main, .pending-main) .breadcrumb { display: inline-flex; margin-bottom: var(--space-3); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-decoration: none; }
:where(.customer-main, .pending-main) > .eyebrow { margin: 0 0 var(--space-2); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
:where(.customer-main, .pending-main) > h1 { margin: 0 0 var(--space-4); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-2xl) var(--font-heading); }
:where(.customer-main, .pending-main) .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
:where(.customer-main, .pending-main) .page-heading h1 { margin: 0 0 var(--space-2); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-2xl) var(--font-heading); }
:where(.customer-main, .pending-main) .page-heading .intro-copy { margin: 0; color: var(--text-muted); }
:where(.customer-panel, .wifi-profile-shell, .form-panel, .profile-hero, .profile-card, .wifi-profile-card) { border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
:where(.customer-panel, .wifi-profile-shell) { min-width: 0; overflow: hidden; }
:where(.customer-alert, .form-errors, .wifi-form-errors) { margin: 0 0 var(--space-4); border: 1px solid var(--status-danger); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); background: var(--status-danger-bg); color: var(--status-danger); font-size: var(--font-size-sm); }
.form-errors, .wifi-form-errors { display: grid; gap: var(--space-1); }
.customer-alert[role="status"] { border-color: var(--status-success); background: var(--status-success-bg); color: var(--status-success); }

.wifi-registration-panel { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border-default); padding: var(--space-4); }
.wifi-registration-panel > div:first-child { min-width: 0; }
.wifi-registration-panel .eyebrow { margin: 0 0 var(--space-1); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.wifi-registration-panel h2 { margin: 0; color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-lg) var(--font-heading); }
.wifi-registration-copy { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--font-size-sm); }
.wifi-directory-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.wifi-directory-actions .button { white-space: nowrap; }
.wifi-customer-grid:not(.pending-cards) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4); }
.wifi-customer-card-wrap { position: relative; display: flex; min-width: 0; flex-direction: column; }
a.wifi-customer-card:not(.pending-customer-card) { position: relative; display: grid; min-width: 0; min-height: 190px; flex: 1; grid-template-columns: 56px minmax(0, 1fr); align-content: start; align-items: center; gap: var(--space-2) var(--space-3); overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-4); background: var(--surface-card); color: var(--text-primary); text-decoration: none; }
a.wifi-customer-card:not(.pending-customer-card):hover { border-color: var(--accent-primary); background: var(--surface-hover); }
.wifi-customer-card:not(.pending-customer-card) .wifi-customer-photo { grid-column: 1; grid-row: 1 / span 2; }
.wifi-customer-photo { position: relative; z-index: 1; display: grid; width: 56px; height: 56px; min-width: 56px; flex: 0 0 56px; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-round); background-color: var(--accent-soft); background-image: url('../img/avatar-man.png'); background-position: center; background-repeat: no-repeat; background-size: cover; color: transparent; font-size: 0; }
.wifi-customer-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.wifi-customer-info { display: grid; min-width: 0; grid-column: 2; grid-row: 1 / span 2; gap: var(--space-1); }
.wifi-customer-info h3 { margin: 0; color: var(--text-strong); font: var(--font-weight-bold) var(--font-size-md) var(--font-heading); overflow-wrap: anywhere; }
.wifi-customer-info p { min-width: 0; margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-normal); overflow-wrap: anywhere; }
.wifi-customer-info .wifi-customer-id { color: var(--accent-text); font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); }
.wifi-customer-meta { display: grid; min-width: 0; grid-column: 1 / -1; gap: var(--space-1); margin-top: auto; border-top: 1px solid var(--border-default); padding-top: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); }
.wifi-customer-meta span { overflow-wrap: anywhere; }
.wifi-customer-footer { display: flex; min-width: 0; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.wifi-customer-footer .customer-status { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--status-success); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); background: var(--status-success-bg); color: var(--status-success); font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); }
.wifi-customer-footer .customer-status i { width: 6px; height: 6px; border-radius: var(--radius-round); background: currentColor; }
.wifi-card-arrow { color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); white-space: nowrap; }
.wifi-card-restore-form { display: flex; justify-content: flex-end; padding-top: var(--space-2); }
.wifi-customer-card-wrap.is-removing { opacity: 0; transform: scale(.97); transition: opacity .24s ease, transform .24s ease; }

.customer-toolbar { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--border-default); padding: var(--space-3); }
.customer-toolbar .search-field { min-width: min(100%, 220px); flex: 1 1 240px; }
.customer-toolbar select { min-width: 120px; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--surface-control); color: var(--text-primary); }
.customer-toolbar .toolbar-button, .customer-toolbar .refresh-link { min-height: 42px; }
.list-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); }
.list-meta strong { color: var(--text-strong); }
.customer-table-wrap, .wifi-import-table-wrap, .table-wrap, .table-scroll, .table-responsive { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.customer-table { width: 100%; min-width: 760px; border-collapse: collapse; color: var(--text-primary); }
.customer-table th, .customer-table td { border-bottom: 1px solid var(--border-default); padding: var(--space-3); text-align: left; vertical-align: top; }
.customer-table th { color: var(--text-muted); font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal); text-transform: uppercase; }
.customer-table td { color: var(--text-secondary); font-size: var(--font-size-xs); }
.customer-table td strong { color: var(--text-strong); }
.customer-table tbody tr:nth-child(even) { background: var(--table-stripe); }
.customer-table tbody tr:hover { background: var(--table-row-hover); }
.customer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
.customer-actions .button { min-height: 34px; padding-inline: var(--space-2); font-size: var(--font-size-xs); }
.empty-state { padding: var(--space-6) var(--space-4); color: var(--text-muted); text-align: center; }
.empty-state h3 { margin: 0 0 var(--space-2); color: var(--text-strong); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-5); }
.pagination a { display: inline-grid; min-width: 36px; min-height: 36px; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-control); padding-inline: var(--space-2); background: var(--surface-control); color: var(--text-secondary); text-decoration: none; }
.pagination a.is-current { border-color: var(--accent-primary); background: var(--accent-soft); color: var(--accent-text); }

.wifi-profile-shell { width: min(100%, 1160px); margin-inline: auto; padding: var(--space-4); }
.wifi-profile-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-4); background: var(--surface-raised); }
.wifi-profile-headline { min-width: 0; }
.wifi-profile-headline .eyebrow { margin: 0 0 var(--space-1); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.wifi-profile-headline h1 { margin: 0 0 var(--space-1); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-xl) var(--font-heading); overflow-wrap: anywhere; }
.wifi-profile-headline .profile-meta { margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.wifi-profile-actions { display: flex; grid-column: 2 / 3; gap: var(--space-2); }
.wifi-profile-hero > .customer-status { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
.wifi-profile-grid, .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.wifi-profile-card, .profile-card { min-width: 0; padding: var(--space-4); }
.wifi-profile-card h2, .profile-card h2 { margin: 0 0 var(--space-3); color: var(--text-strong); font: var(--font-weight-bold) var(--font-size-md) var(--font-heading); }
.wifi-profile-detail-list, .profile-card dl { display: grid; min-width: 0; gap: 0; margin: 0; }
.wifi-profile-detail-list > div, .profile-card dl > div { display: grid; grid-template-columns: minmax(100px, .75fr) minmax(0, 1fr); gap: var(--space-2); border-top: 1px solid var(--border-default); padding: var(--space-2) 0; }
.wifi-profile-detail-list > div:first-child, .profile-card dl > div:first-child { border-top: 0; }
.wifi-profile-detail-list dt, .profile-card dt { color: var(--text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.wifi-profile-detail-list dd, .profile-card dd { min-width: 0; margin: 0; color: var(--text-primary); font-size: var(--font-size-sm); line-height: var(--line-height-normal); overflow-wrap: anywhere; }
.wifi-gallery-section { margin-top: var(--space-4); border-top: 1px solid var(--border-default); padding-top: var(--space-4); }
.wifi-gallery-header { margin-bottom: var(--space-3); }
.wifi-gallery-header h2 { margin: 0; color: var(--text-strong); font: var(--font-weight-bold) var(--font-size-lg) var(--font-heading); }
.wifi-photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--space-3); }
.wifi-photo-card { min-width: 0; overflow: hidden; margin: 0; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-card); }
.wifi-photo-card img { display: block; width: 100%; max-width: 100%; height: 190px; max-height: 480px; object-fit: cover; }
.wifi-photo-card figcaption { padding: var(--space-2) var(--space-3); color: var(--text-muted); font-size: var(--font-size-xs); }
.wifi-empty-gallery { border: 1px dashed var(--border-strong); border-radius: var(--radius-card); padding: var(--space-5); background: var(--surface-raised); color: var(--text-muted); text-align: center; }
.profile-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); }
.profile-hero h1 { margin: 0 0 var(--space-1); color: var(--text-strong); font: var(--font-weight-heavy) var(--font-size-xl) var(--font-heading); overflow-wrap: anywhere; }
.profile-id { margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); }
.profile-avatar { position: relative; display: grid; width: 74px; height: 74px; flex: 0 0 74px; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-text); font: var(--font-weight-heavy) var(--font-size-lg) var(--font-heading); }
.profile-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.profile-actions { display: flex; grid-column: 2 / -1; flex-wrap: wrap; gap: var(--space-2); }
.profile-actions .button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; max-width: 100%; padding: 0 var(--space-3); text-align: center; text-decoration: none; }
.profile-grid { margin-top: var(--space-4); }

.sms-main { width: min(100%, 1240px); min-width: 0; margin-inline: auto; padding-block: var(--space-7); }
.sms-main .page-heading { min-width: 0; }
.sms-main .page-heading > div:first-child { min-width: 0; flex: 1; }
.sms-main .page-heading .intro-copy { overflow-wrap: anywhere; }
.sms-main .profile-grid, .sms-main .profile-card, .sms-main .list-panel, .sms-main .inbox-item, .sms-main .inbox-main { min-width: 0; max-width: 100%; }
.sms-main .list-panel { overflow: hidden; }
.sms-main .inbox-main p { overflow-wrap: anywhere; word-break: break-word; }
.sms-main .inbox-sender-row, .sms-main .inbox-actions { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); }
.sms-main .sender-badge { max-width: 100%; overflow-wrap: anywhere; }

.form-panel { padding: clamp(var(--space-4), 4vw, var(--space-7)); }
.customer-form { width: 100%; max-width: 1000px; margin-inline: auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.form-field { display: grid; min-width: 0; align-content: start; gap: var(--space-1); color: var(--text-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.form-field input, .form-field select, .form-field textarea, .wifi-form-field input, .wifi-form-field select, .wifi-form-field textarea { width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); background: var(--surface-control); color: var(--text-primary); font: var(--font-weight-regular) var(--font-size-sm) var(--font-body); }
.form-field textarea, .wifi-form-field textarea { min-height: 104px; resize: vertical; }
.form-field input[type="file"], .wifi-upload-box input[type="file"] { min-height: 42px; padding: var(--space-2); }
.form-field small, .wifi-form-field small, .wifi-upload-box small { color: var(--text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); }
.form-field-wide, .wifi-form-field-wide { grid-column: 1 / -1; }
.form-actions, .wifi-form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.wifi-form-section { min-width: 0; border-top: 1px solid var(--border-default); padding-top: var(--space-4); }
.wifi-form-section + .wifi-form-section { margin-top: var(--space-4); }
.wifi-form-section-title { margin-bottom: var(--space-3); color: var(--text-strong); font: var(--font-weight-bold) var(--font-size-md) var(--font-heading); }
.wifi-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.wifi-form-field { display: grid; min-width: 0; align-content: start; gap: var(--space-1); color: var(--text-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.wifi-form-field.has-error input { border-color: var(--status-danger); }
.wifi-photo-upload-wrap { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.wifi-photo-preview { position: relative; display: grid; width: 110px; height: 110px; flex: 0 0 110px; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent-text); }
.wifi-photo-preview img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.wifi-upload-box { display: grid; min-width: min(100%, 260px); flex: 1; gap: var(--space-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-control); padding: var(--space-3); background: var(--surface-raised); color: var(--text-primary); font-size: var(--font-size-sm); }
.wifi-location-grid { align-items: end; }
.wifi-form-map-action { align-self: end; }

.wifi-import-panel { display: grid; gap: var(--space-3); padding: var(--space-4); }
.wifi-import-panel h2 { margin: 0; color: var(--text-strong); font: var(--font-weight-bold) var(--font-size-lg) var(--font-heading); }
.wifi-import-actions, .wifi-import-summary, .wifi-import-upload-form, .wifi-import-confirm-form fieldset { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wifi-import-actions { justify-content: space-between; }
.wifi-import-actions > div { min-width: 0; }
.wifi-import-actions p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--font-size-sm); }
.wifi-import-summary { color: var(--text-secondary); font-size: var(--font-size-sm); }
.wifi-import-upload-form { align-items: flex-end; }
.wifi-import-upload-form label { display: grid; min-width: min(100%, 260px); flex: 1; gap: var(--space-2); color: var(--text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.wifi-import-upload-form input[type="file"] { width: 100%; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: var(--space-2); background: var(--surface-control); color: var(--text-primary); }
.wifi-import-confirm-form { display: grid; min-width: 0; gap: var(--space-3); }
.wifi-import-confirm-form fieldset { border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: var(--space-3); color: var(--text-secondary); }
.wifi-import-table { width: max-content; min-width: 100%; border-collapse: collapse; color: var(--text-primary); font-size: var(--font-size-xs); }
.wifi-import-table th, .wifi-import-table td { border-bottom: 1px solid var(--border-default); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; white-space: nowrap; }
.wifi-import-table td:last-child { min-width: 220px; white-space: normal; }
.wifi-delete-dialog { width: min(calc(100% - 24px), 460px); max-width: 460px; border: 1px solid var(--status-danger); border-radius: var(--radius-card); padding: var(--space-4); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-panel); }
.wifi-delete-dialog::backdrop { background: var(--overlay-scrim); backdrop-filter: blur(3px); }
.wifi-delete-dialog form { display: grid; gap: var(--space-3); }
.wifi-delete-dialog h2, .wifi-delete-dialog p { margin: 0; }
.wifi-delete-dialog label { display: grid; gap: var(--space-2); color: var(--text-primary); }
.wifi-delete-dialog input[type="text"] { width: 100%; min-height: 42px; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding-inline: var(--space-3); background: var(--surface-control); color: var(--text-primary); }

.application-detail-photo { display: block; grid-column: 1 / -1; width: 112px; height: 112px; max-width: 100%; max-height: 480px; margin-bottom: var(--space-3); border: 2px solid var(--border-strong); border-radius: var(--radius-round); object-fit: cover; }
.application-photo-dialog { position: fixed; inset: 0; width: fit-content; max-width: min(94vw, 1100px); max-height: 92vh; overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-card); padding: var(--space-3); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-panel); }
.application-photo-dialog::backdrop { background: var(--overlay-scrim); backdrop-filter: blur(4px); }
.application-photo-dialog img { display: block; width: auto; max-width: 100%; max-height: calc(92vh - var(--space-6)); height: auto; margin-inline: auto; object-fit: contain; }
.application-photo-dialog button { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-round); background: var(--surface-raised); color: var(--text-primary); font-size: var(--font-size-xl); cursor: pointer; }
:where(.customer-panel, .wifi-profile-shell, .profile-hero, .profile-card, .wifi-profile-card, .wifi-customer-card, .fm-customer-card, .pending-customer-card, .customer-table) img { display: block; max-width: 100%; max-height: 480px; height: auto; }
:where(.wifi-profile-avatar, .profile-avatar, .wifi-customer-photo, .fm-customer-photo, .pending-customer-card .wifi-customer-photo, .wifi-photo-preview) img { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: cover; }

@media (max-width: 760px) {
    :where(.customer-main, .pending-main, .fm-all-customers-main) { padding-block: var(--space-5); }
    :where(.customer-main, .pending-main) .page-heading { display: block; }
    :where(.customer-main, .pending-main) .page-heading > .button { display: inline-flex; margin-top: var(--space-3); }
    .customer-toolbar { align-items: stretch; }
    .customer-toolbar .search-field { flex-basis: 100%; }
    .customer-toolbar select { min-width: 0; flex: 1; }
    .sms-main { padding-block: var(--space-5); }
    .sms-main .page-heading { display: block; }
    .sms-main .page-heading .header-actions.compact { justify-content: flex-start; margin-top: var(--space-3); }
    .wifi-registration-panel { align-items: flex-start; flex-wrap: wrap; }
    .wifi-directory-actions { width: 100%; justify-content: flex-start; }
    .customer-table { min-width: 700px; }
    .wifi-customer-grid:not(.pending-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3); }
    a.wifi-customer-card:not(.pending-customer-card) { min-height: 0; gap: var(--space-2); padding: var(--space-3); }
    .wifi-customer-photo { width: 64px; height: 64px; min-width: 64px; flex-basis: 64px; }
    .wifi-customer-info { width: 100%; justify-items: start; }
    .wifi-customer-meta { width: 100%; margin-top: 0; padding-top: var(--space-2); text-align: left; }
    .wifi-customer-footer { width: 100%; }
    .wifi-profile-shell { padding: var(--space-3); }
    .wifi-profile-hero { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); }
    .wifi-profile-hero > .customer-status { grid-column: 2; grid-row: 2; justify-self: start; }
    .wifi-profile-actions { grid-column: 1 / -1; }
    .wifi-profile-grid, .profile-grid, .wifi-form-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
    .wifi-profile-card, .profile-card { padding: var(--space-3); }
    .wifi-profile-detail-list > div, .profile-card dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .profile-hero { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: var(--space-3); }
    .profile-hero > .customer-status { grid-column: 2; justify-self: start; }
    .profile-actions { width: 100%; grid-column: 1 / -1; }
    .profile-actions .button { flex: 1 1 120px; }
    .form-field-wide, .wifi-form-field-wide { grid-column: auto; }
    .form-actions, .wifi-form-actions { justify-content: stretch; }
    .form-actions .button, .wifi-form-actions .button { flex: 1; }
    .wifi-import-actions { align-items: stretch; }
    .wifi-import-actions > .button, .wifi-import-upload-form > .button { width: 100%; }
}

@media (max-width: 390px) {
    .wifi-customer-grid:not(.pending-cards) { grid-template-columns: minmax(0, 1fr); }
    .wifi-directory-actions { flex-direction: column; }
    .wifi-directory-actions .button { width: 100%; }
    .wifi-customer-meta { margin-top: var(--space-2); }
    .wifi-customer-footer { align-items: flex-start; }
    .wifi-photo-preview { width: 88px; height: 88px; flex-basis: 88px; }
    .wifi-profile-hero { grid-template-columns: 72px minmax(0, 1fr); }
    .wifi-profile-avatar { width: 72px; height: 72px; flex-basis: 72px; }
    .wifi-import-panel { padding: var(--space-3); }
}