:root {
    --bg: #07111f;
    --panel: #0e1b2d;
    --panel-2: #14243a;
    --text: #edf5ff;
    --muted: #8fa3bc;
    --line: rgba(148, 163, 184, .16);
    --primary: #4f7cff;
    --primary-2: #7c5cff;
    --success: #25d0a1;
    --danger: #ff627d;
    --shadow: 0 28px 80px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; font-family: Inter, sans-serif; color: var(--text); background: var(--bg); }
button, input { font: inherit; }
a { color: #8eb1ff; }
.eyebrow { margin: 0 0 10px; color: #79a2ff; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--muted); line-height: 1.65; }

.auth-page { background: radial-gradient(circle at 20% 20%, rgba(79, 124, 255, .22), transparent 32%), radial-gradient(circle at 90% 90%, rgba(124, 92, 255, .2), transparent 30%), #07111f; }
.auth-shell { width: min(1060px, calc(100% - 32px)); min-height: 100vh; margin: auto; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 70px; padding: 44px 0; }
.auth-brand h1 { max-width: 650px; margin: 16px 0; font-size: clamp(42px, 6vw, 72px); line-height: 1.02; letter-spacing: -.055em; }
.auth-brand > p:not(.eyebrow) { max-width: 570px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.brand-mark, .mobile-logo { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 18px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 18px 42px rgba(79, 124, 255, .33); font-size: 27px; }
.security-note { width: fit-content; margin-top: 32px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 99px; color: #bfd0e4; background: rgba(255, 255, 255, .035); font-size: 13px; }
.security-note i { margin-right: 8px; color: var(--success); }
.auth-card { padding: 38px; border: 1px solid var(--line); border-radius: 26px; background: rgba(14, 27, 45, .88); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.auth-card h1, .auth-card h2 { margin: 4px 0 8px; font-size: 30px; letter-spacing: -.035em; }
.mobile-logo { display: none; }
form { margin-top: 26px; }
label { display: block; margin: 18px 0 9px; color: #c9d6e6; font-size: 13px; font-weight: 700; }
.input-wrap { height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(4, 12, 24, .65); transition: .2s; }
.input-wrap:focus-within { border-color: #7195ff; box-shadow: 0 0 0 4px rgba(79, 124, 255, .12); }
.input-wrap > i { color: #7389a4; }
.input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; }
.input-wrap select { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; }
.input-wrap select option { color: #102033; background: white; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.primary-button { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 25px; padding: 0 20px; border: 0; border-radius: 13px; color: white; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 12px 28px rgba(79, 124, 255, .25); font-weight: 800; cursor: pointer; transition: transform .2s, opacity .2s; }
.primary-button:hover { transform: translateY(-2px); }
.primary-button:disabled { opacity: .65; cursor: wait; transform: none; }
.alert { margin: 18px 0; padding: 13px 15px; border-radius: 11px; font-size: 13px; line-height: 1.5; }
.alert.error { color: #ffd5dc; border: 1px solid rgba(255, 98, 125, .38); background: rgba(255, 98, 125, .12); }
.alert.success { color: #c5ffed; border: 1px solid rgba(37, 208, 161, .38); background: rgba(37, 208, 161, .12); }
.setup-link { margin: 24px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.setup-shell { min-height: 100vh; display: grid; place-items: center; padding: 30px 16px; }
.wide-card { width: min(520px, 100%); }
.button-link { text-decoration: none; }
.field-hint { margin: 8px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.dashboard-page { min-height: 100vh; background: #07111f; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 258px; display: flex; flex-direction: column; padding: 26px 18px; border-right: 1px solid var(--line); background: #0a1627; }
.dashboard-brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 28px; color: white; font-size: 17px; font-weight: 800; text-decoration: none; }
.dashboard-brand i { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.sidebar nav { display: grid; gap: 7px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 11px; color: #91a6bf; text-decoration: none; font-size: 14px; font-weight: 600; }
.sidebar nav a i { width: 19px; }
.sidebar nav a.active { color: white; background: rgba(79, 124, 255, .14); }
.sidebar nav a.disabled { cursor: default; opacity: .6; }
.sidebar nav small { margin-left: auto; padding: 3px 7px; border-radius: 99px; color: #9eb8ff; background: rgba(79, 124, 255, .13); }
.sidebar-user { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: white; background: #263c5d; font-weight: 800; }
.sidebar-user strong, .sidebar-user span { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { font-size: 13px; }.sidebar-user span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.dashboard-main { min-height: 100vh; margin-left: 258px; padding: 29px 34px 50px; }
.topbar { display: flex; align-items: center; gap: 18px; }
.topbar h1 { margin: 0; font-size: 27px; letter-spacing: -.035em; }
.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.live-indicator { display: flex; align-items: center; gap: 8px; color: #9eb1c6; font-size: 12px; font-weight: 700; }
.live-indicator i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(37, 208, 161, .1); }
.logout-button, .menu-button { height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 11px; color: #c8d4e3; background: var(--panel); cursor: pointer; }
.logout-button i { margin-right: 7px; }.menu-button { display: none; width: 42px; padding: 0; }
.welcome-panel { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 31px; padding: 27px 29px; overflow: hidden; border: 1px solid rgba(79, 124, 255, .25); border-radius: 19px; background: linear-gradient(125deg, rgba(79, 124, 255, .16), rgba(124, 92, 255, .08)); }
.welcome-panel h2 { margin: 0 0 8px; font-size: 26px; }.welcome-panel p:not(.eyebrow) { margin: 0; color: var(--muted); }
.server-status { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 14px 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(5, 14, 27, .5); }
.server-status > i { color: var(--success); font-size: 22px; }.server-status strong,.server-status span { display: block; }.server-status strong { font-size: 12px; }.server-status span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 15px; margin-top: 19px; }
.metric-card { display: flex; align-items: center; gap: 14px; min-height: 112px; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }
.metric-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; }
.metric-card p { margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 600; }.metric-card strong { font-size: 25px; }
.metric-card.blue .metric-icon { color: #91aeff; background: rgba(79,124,255,.14); }.metric-card.amber .metric-icon { color: #ffc766; background: rgba(255,183,71,.12); }.metric-card.violet .metric-icon { color: #b69cff; background: rgba(124,92,255,.14); }.metric-card.green .metric-icon { color: #5fe3bd; background: rgba(37,208,161,.12); }.metric-card.cyan .metric-icon { color: #67d7f2; background: rgba(37,184,224,.12); }
.empty-panel { margin-top: 19px; padding: 55px 25px; border: 1px solid var(--line); border-radius: 19px; background: var(--panel); text-align: center; }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 17px; color: #91aeff; background: rgba(79,124,255,.12); font-size: 23px; }.empty-panel h2 { margin: 0 0 8px; }.empty-panel p { margin: 0; color: var(--muted); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 340px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 12px; opacity: 0; transform: translateY(15px); pointer-events: none; background: #17273b; box-shadow: var(--shadow); transition: .25s; }.toast.show { opacity: 1; transform: none; }.toast.error { border-color: rgba(255,98,125,.35); }

@media (max-width: 1050px) { .metric-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
    .auth-shell { grid-template-columns: 1fr; max-width: 490px; }.auth-brand { display: none; }.mobile-logo { display: grid; }
    .sidebar { transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow); }.sidebar.open { transform: none; }
    .dashboard-main { margin-left: 0; padding: 22px 20px 40px; }.menu-button { display: inline-grid; place-items: center; }.metric-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .auth-card { padding: 27px 21px; }.topbar { align-items: flex-start; }.topbar-actions { gap: 8px; }.live-indicator { display: none; }.logout-button span { display: none; }.logout-button i { margin: 0; }
    .welcome-panel { align-items: flex-start; flex-direction: column; }.server-status { width: 100%; }.metric-grid { grid-template-columns: 1fr; }.metric-card { min-height: 90px; }.dashboard-main { padding-inline: 15px; }
}

/* Operator management */
.back-button { display: inline-flex; align-items: center; gap: 7px; color: #c8d4e3; text-decoration: none; }
.back-button i { margin: 0; }
.operator-layout { display: grid; grid-template-columns: minmax(310px, 410px) minmax(460px, 1fr); gap: 19px; margin-top: 31px; align-items: start; }
.management-card { border: 1px solid var(--line); border-radius: 19px; background: var(--panel); }
.operator-form-card { padding: 25px; }
.operator-form-card form { margin-top: 20px; }
.section-heading { display: flex; align-items: center; gap: 13px; }
.section-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-icon { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #9ab5ff; background: rgba(79,124,255,.14); }
.operator-list-card { min-height: 620px; padding: 25px; }
.list-heading { padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.count-pill { margin-left: auto; padding: 7px 11px; border-radius: 99px; color: var(--muted); background: rgba(255,255,255,.04); font-size: 11px; }
.count-pill strong { color: var(--text); }
.operator-list { display: grid; gap: 11px; margin-top: 17px; }
.operator-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(4,12,24,.34); }
.operator-row.inactive { opacity: .7; }
.operator-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: #dce7ff; background: linear-gradient(135deg, #25477c, #483b82); font-size: 13px; font-weight: 800; }
.operator-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.operator-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.status-badge { padding: 4px 7px; border-radius: 99px; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.status-badge.active { color: #76e8c8; background: rgba(37,208,161,.12); }
.status-badge.inactive { color: #ff9daf; background: rgba(255,98,125,.12); }
.role-badge { padding: 4px 7px; border-radius: 99px; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.role-badge.admin { color: #bba9ff; background: rgba(124,92,255,.15); }
.role-badge.operator { color: #9ab5ff; background: rgba(79,124,255,.15); }
.role-badge.retailer { color: #76e8c8; background: rgba(37,208,161,.12); }
.operator-details p { display: inline-flex; align-items: center; gap: 6px; margin: 7px 14px 3px 0; color: #9eb0c5; font-size: 11px; }
.operator-details small { display: block; margin-top: 5px; color: #677c96; font-size: 9px; }
.status-button { min-height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.status-button.deactivate { color: #ff9daf; border-color: rgba(255,98,125,.22); }
.status-button.activate { color: #76e8c8; border-color: rgba(37,208,161,.22); }
.protected-account { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: 1px solid rgba(124,92,255,.22); border-radius: 9px; color: #bba9ff; font-size: 10px; font-weight: 700; }
.list-loading, .operator-empty { min-height: 320px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--muted); text-align: center; }
.operator-empty > i { font-size: 28px; color: #6f8bd8; }.operator-empty strong { color: #dbe8f8; }.operator-empty span { font-size: 12px; }
.error-text { color: #ff9daf; }

@media (max-width: 1100px) { .operator-layout { grid-template-columns: 1fr; }.operator-list-card { min-height: 420px; } }
@media (max-width: 580px) { .operator-form-card,.operator-list-card { padding: 18px; }.operator-row { grid-template-columns: auto minmax(0,1fr); }.status-button { grid-column: 1 / -1; width: 100%; }.operator-details p { display: flex; } }

.metric-card.red .metric-icon { color: #ff91a4; background: rgba(255,98,125,.12); }
.operator-auth-page { background: radial-gradient(circle at 18% 18%,rgba(32,190,166,.17),transparent 32%),radial-gradient(circle at 90% 88%,rgba(79,124,255,.18),transparent 30%),#07111f; }
.operator-mark,.operator-sidebar .dashboard-brand i { background: linear-gradient(135deg,#18a98f,#3c7bf4); }
.operator-button { background: linear-gradient(135deg,#18a98f,#3c7bf4); box-shadow: 0 12px 28px rgba(24,169,143,.2); }
.operator-sidebar nav a.active { background: rgba(24,169,143,.13); }
.operator-avatar-color { background: linear-gradient(135deg,#167d70,#315b9f); }
.operator-welcome { border-color: rgba(37,208,161,.22); background: linear-gradient(125deg,rgba(24,169,143,.14),rgba(79,124,255,.07)); }
.operator-metrics { grid-template-columns: repeat(3,minmax(180px,1fr)); }
.operator-empty-panel { min-height: 310px; }
@media (max-width: 1050px) { .operator-metrics { grid-template-columns: repeat(2,minmax(160px,1fr)); } }
@media (max-width: 560px) { .operator-metrics { grid-template-columns: 1fr; } }

/* Retailer authentication and data entry */
.retailer-auth-page { background: radial-gradient(circle at 18% 18%,rgba(15,184,217,.16),transparent 32%),radial-gradient(circle at 90% 88%,rgba(36,200,145,.14),transparent 30%),#07111f; }
.retailer-mark,.retailer-sidebar .dashboard-brand i { background: linear-gradient(135deg,#12a5c2,#24c891); }
.retailer-button { background: linear-gradient(135deg,#12a5c2,#24c891); box-shadow: 0 12px 28px rgba(18,165,194,.2); }
.retailer-sidebar nav a.active { background: rgba(18,165,194,.14); }
.retailer-avatar-color { background: linear-gradient(135deg,#147b92,#198365); }
.retailer-layout { display:grid; grid-template-columns:minmax(440px,1fr) minmax(420px,.9fr); gap:19px; margin-top:31px; align-items:start; }
.retailer-form-card,.retailer-list-card { padding:25px; }
.retailer-list-card { min-height:690px; }
.retailer-section-icon { color:#67e3cf; background:rgba(36,200,145,.12); }
.two-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.digit-count { color:var(--muted); font-size:10px; font-weight:700; }
.validation-input.valid { border-color:rgba(37,208,161,.72); box-shadow:0 0 0 4px rgba(37,208,161,.09); }
.validation-input.valid .digit-count { color:#5fe3bd; }
.validation-input.invalid { border-color:rgba(255,98,125,.68); box-shadow:0 0 0 4px rgba(255,98,125,.08); }
.validation-input.invalid .digit-count { color:#ff91a4; }
.privacy-hint { display:flex; align-items:flex-start; gap:8px; margin:18px 2px 0; color:#86a4bd; font-size:11px; line-height:1.5; }
.privacy-hint i { margin-top:2px; color:#5fe3bd; }
.retailer-task-list { display:grid; gap:11px; margin-top:17px; }
.retailer-task-row { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:13px; padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(4,12,24,.34); }
.request-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#67e3cf; background:rgba(36,200,145,.11); }
.request-info>div { display:flex; align-items:center; gap:9px; }
.request-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.request-info p { margin:7px 0 4px; color:#9eb0c5; font-size:10px; }
.request-info small { color:#667d98; font-size:9px; }
.request-status { padding:4px 7px; border-radius:99px; font-size:8px; font-weight:800; letter-spacing:.07em; }
.request-status.pending { color:#ffc766; background:rgba(255,183,71,.12); }
.request-status.assigned,.request-status.accepted { color:#9ab5ff; background:rgba(79,124,255,.14); }
.request-status.running { color:#67d7f2; background:rgba(37,184,224,.12); }
.request-status.success { color:#76e8c8; background:rgba(37,208,161,.12); }
.request-status.rejected,.request-status.cancelled { color:#ff9daf; background:rgba(255,98,125,.12); }
@media (max-width:1100px) { .retailer-layout { grid-template-columns:1fr; }.retailer-list-card { min-height:420px; } }
@media (max-width:620px) { .retailer-form-card,.retailer-list-card { padding:18px; }.two-field-grid { grid-template-columns:1fr; } }

/* Step 4.2 light retailer service hub */
.retailer-light { --text:#14213d; --muted:#66758c; --line:#dce5ef; --panel:#ffffff; color-scheme:light; color:#14213d; background:#f4f7fb; }
.retailer-light .retailer-service-sidebar { background:#fff; border-right-color:#e1e8f0; box-shadow:8px 0 30px rgba(31,58,91,.04); }
.retailer-light .dashboard-brand { color:#14213d; }
.retailer-light .dashboard-brand i { color:#fff; background:linear-gradient(135deg,#15a7bf,#22c792); }
.retailer-light .sidebar-caption { margin:4px 14px 10px; color:#99a6b8; font-size:10px; font-weight:800; letter-spacing:.14em; }
.retailer-light .sidebar nav a { color:#607088; }
.retailer-light .sidebar nav a:hover { color:#167e8f; background:#eefbfa; }
.retailer-light .sidebar nav a.active { color:#087f8f; background:#e8f8f7; }
.retailer-light .nav-chevron { width:auto; margin-left:auto; color:#a2afc0; font-size:10px; }
.retailer-light .sidebar-help { display:flex; align-items:center; gap:10px; margin-top:auto; margin-bottom:17px; padding:14px; border:1px solid #dceeea; border-radius:13px; color:#178f83; background:#f0fbf8; }
.retailer-light .sidebar-help strong,.retailer-light .sidebar-help span { display:block; }
.retailer-light .sidebar-help strong { font-size:11px; }.retailer-light .sidebar-help span { margin-top:3px; color:#66847f; font-size:9px; }
.retailer-light .sidebar-user { margin-top:0; border-top-color:#e4ebf2; }
.retailer-light .sidebar-user strong { color:#1d2d47; }.retailer-light .sidebar-user span { color:#75849a; }
.retailer-light-main { background:radial-gradient(circle at 90% 3%,rgba(32,199,147,.08),transparent 24%),#f4f7fb; }
.retailer-light .topbar h1 { color:#14213d; }.retailer-light .eyebrow { color:#159a91; }
.retailer-light .logout-button,.retailer-light .menu-button { color:#42526a; border-color:#d9e3ed; background:#fff; box-shadow:0 5px 16px rgba(30,56,86,.05); }
.light-online { display:flex; align-items:center; gap:8px; color:#5e6f85; font-size:12px; font-weight:700; }
.light-online i { width:8px; height:8px; border-radius:50%; background:#1ec995; box-shadow:0 0 0 5px rgba(30,201,149,.12); }
.retailer-light-welcome { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:30px; padding:28px 31px; border:1px solid #d9ebe8; border-radius:20px; background:linear-gradient(120deg,#fff,#effbf8); box-shadow:0 12px 35px rgba(31,72,89,.06); }
.retailer-light-welcome h2 { margin:0 0 8px; color:#172640; font-size:27px; }.retailer-light-welcome p:not(.eyebrow) { margin:0; color:#66758c; }
.welcome-illustration { width:72px; height:72px; display:grid; place-items:center; flex:0 0 auto; border-radius:21px; color:#fff; background:linear-gradient(135deg,#16a8bf,#22c792); box-shadow:0 15px 30px rgba(22,168,191,.2); font-size:29px; }
.service-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:31px 2px 16px; }
.service-section-heading h2 { margin:0; color:#172640; font-size:22px; }.service-section-heading .eyebrow { margin-bottom:5px; }.service-section-heading>span { color:#78869a; font-size:11px; font-weight:700; }
.retailer-service-grid { display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); gap:18px; }
.retailer-service-card { position:relative; overflow:hidden; padding:24px; border:1px solid #dfe7ef; border-radius:19px; background:#fff; box-shadow:0 10px 28px rgba(27,54,86,.055); transition:transform .2s,box-shadow .2s; scroll-margin-top:20px; }
.retailer-service-card:hover { transform:translateY(-3px); box-shadow:0 17px 38px rgba(27,54,86,.09); }
.service-card-top { display:flex; align-items:center; justify-content:space-between; }
.service-card-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:15px; font-size:20px; }
.service-number { color:#bcc7d4; font-size:12px; font-weight:800; }
.mobile-service .service-card-icon { color:#087fbd; background:#e7f5fd; }.dob-service .service-card-icon { color:#7655cf; background:#f1edff; }.name-service .service-card-icon { color:#da7b17; background:#fff4e7; }.child-service .service-card-icon { color:#159777; background:#e9f9f4; }
.retailer-service-card h3 { margin:19px 0 8px; color:#172640; font-size:19px; }.retailer-service-card>p { min-height:48px; margin:0; color:#718096; font-size:12px; line-height:1.6; }
.service-fields { display:flex; flex-wrap:wrap; gap:6px; margin:17px 0; }.service-fields span { padding:5px 8px; border-radius:99px; color:#63748a; background:#f2f5f8; font-size:9px; font-weight:700; }
.service-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding-top:17px; border-top:1px solid #edf1f5; }
.service-actions button,.service-actions a { min-height:40px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:10px; font-size:11px; font-weight:800; text-decoration:none; cursor:pointer; }
.apply-button { color:#fff; border:0; background:linear-gradient(135deg,#159fb0,#20be91); }.list-button { color:#425b73; border:1px solid #dbe4ed; background:#f8fafc; }
.retailer-light-toast { color:#fff; border-color:#cfe4df; background:#183d43; }
@media (max-width:1000px) { .retailer-service-grid { grid-template-columns:1fr; } }
@media (max-width:820px) { .retailer-light .retailer-service-sidebar { box-shadow:15px 0 40px rgba(31,58,91,.16); }.retailer-light-welcome { align-items:flex-start; }.welcome-illustration { width:58px; height:58px; } }
@media (max-width:560px) { .retailer-light-welcome { padding:22px; }.welcome-illustration { display:none; }.retailer-service-card { padding:20px; }.light-online { display:none; } }

/* Step 4.3 Mobile Update apply and full-column list */
.mobile-service-hero { display:flex; align-items:center; gap:17px; margin-top:29px; padding:23px 26px; border:1px solid #d8e9f3; border-radius:18px; background:linear-gradient(120deg,#fff,#eef9ff); box-shadow:0 10px 28px rgba(27,75,106,.05); }
.mobile-service-hero>span { width:57px; height:57px; display:grid; place-items:center; flex:0 0 auto; border-radius:16px; color:#0789c2; background:#e4f5fd; font-size:23px; }
.mobile-service-hero h2 { margin:0 0 6px; color:#172640; font-size:22px; }.mobile-service-hero p:not(.eyebrow) { margin:0; color:#6d7d92; font-size:12px; }
.service-view-tabs { display:flex; gap:8px; margin:22px 0 16px; padding:5px; width:fit-content; border:1px solid #dce5ed; border-radius:13px; background:#eaf0f5; }
.service-tab { min-width:125px; height:42px; border:0; border-radius:9px; color:#65768a; background:transparent; font-size:11px; font-weight:800; cursor:pointer; }
.service-tab.active { color:#fff; background:linear-gradient(135deg,#139dac,#20bd91); box-shadow:0 7px 18px rgba(19,157,172,.2); }
.service-tab span { margin-left:5px; padding:2px 6px; border-radius:99px; color:inherit; background:rgba(255,255,255,.18); }
.service-view-panel[hidden] { display:none !important; }
.light-form-card,.light-list-card { padding:27px; border:1px solid #dfe7ef; border-radius:19px; background:#fff; box-shadow:0 12px 32px rgba(27,54,86,.055); }
.light-form-card { width:min(690px,100%); }.light-form-card form { margin-top:21px; }
.retailer-light .light-form-card label { color:#334760; }
.mobile-light-icon { color:#0789c2; background:#e6f6fd; }
.light-input { color:#283d56; border-color:#d9e3ec; background:#f9fbfd; }
.light-input input { color:#1c3049; }.light-input input::placeholder { color:#9aa7b7; }
.readonly-input { background:#edf5f8; }.readonly-input input { color:#247284; font-weight:800; }
.neon-validation.invalid { border-color:#ff4266; box-shadow:0 0 0 3px rgba(255,66,102,.11),0 0 14px rgba(255,66,102,.12); }
.neon-validation.invalid .digit-count { color:#ec2e54; }
.neon-validation.valid { border-color:#00bd7e; box-shadow:0 0 0 3px rgba(0,189,126,.1),0 0 15px rgba(0,189,126,.13); }
.neon-validation.valid .digit-count { color:#009b69; }
.validation-help { margin:7px 3px 0; color:#7b899b; font-size:10px; }
.secure-submit-note { display:flex; align-items:flex-start; gap:11px; margin-top:20px; padding:14px; border:1px solid #d8eee8; border-radius:12px; color:#16826e; background:#effaf7; }
.secure-submit-note strong,.secure-submit-note span { display:block; }.secure-submit-note strong { font-size:11px; }.secure-submit-note span { margin-top:4px; color:#66847d; font-size:9px; line-height:1.5; }
.light-refresh-button { margin-left:auto; min-height:37px; padding:0 12px; border:1px solid #d8e2eb; border-radius:9px; color:#4d647b; background:#f8fafc; font-size:10px; font-weight:800; cursor:pointer; }
.full-aadhaar-notice { display:flex; align-items:center; gap:8px; margin:15px 0; padding:10px 12px; border:1px solid #d7e9f4; border-radius:10px; color:#28799d; background:#f0f9fe; font-size:10px; }
.responsive-data-table { width:100%; overflow:auto; border:1px solid #e0e7ee; border-radius:13px; }
.service-data-table { width:100%; min-width:1320px; border-collapse:collapse; color:#31445b; background:#fff; font-size:10px; }
.service-data-table th { position:sticky; top:0; z-index:1; padding:13px 12px; border-bottom:1px solid #dfe7ee; color:#66778b; background:#f5f8fb; text-align:left; white-space:nowrap; font-size:9px; letter-spacing:.04em; text-transform:uppercase; }
.service-data-table td { padding:13px 12px; border-bottom:1px solid #edf1f5; white-space:nowrap; }.service-data-table tbody tr:last-child td { border-bottom:0; }
.service-data-table tbody tr { transition:background .2s; }.service-data-table tbody tr:hover { background:#f8fbfd; }
.service-data-table code { color:#60758a; font-family:Inter,sans-serif; font-size:9px; }
.full-aadhaar-value { color:#172640; font-weight:800; letter-spacing:.06em; }
.table-badge { display:inline-flex; padding:5px 8px; border-radius:99px; font-size:8px; font-weight:800; }
.attendance-unmarked { color:#748296; background:#eef2f5; }.attendance-present { color:#087b5c; background:#e4f8f0; }.attendance-absent { color:#c23b56; background:#ffedf1; }
.status-pending { color:#a7690b; background:#fff4dc; }.status-assigned,.status-accepted { color:#3864b6; background:#eaf0ff; }.status-running { color:#087e9f; background:#e4f7fd; }.status-success { color:#087b5c; background:#e4f8f0; }.status-rejected,.status-cancelled { color:#c23b56; background:#ffedf1; }
.attendance-row.attendance-present { background:#f0fbf7; }.attendance-row.attendance-absent { background:#fff2f4; }
.table-loading,.table-error { height:210px; color:#75859a; text-align:center !important; }.table-loading i { margin-right:7px; }
.table-error { color:#c23b56; }
.table-empty { height:250px; color:#75859a; text-align:center !important; }.table-empty i,.table-empty strong,.table-empty span { display:block; margin:7px auto; }.table-empty i { color:#69a9c7; font-size:25px; }.table-empty strong { color:#2b4059; font-size:12px; }
@media (max-width:620px) { .mobile-service-hero { align-items:flex-start; padding:20px; }.service-view-tabs { width:100%; }.service-tab { min-width:0; flex:1; }.light-form-card,.light-list-card { padding:18px; }.light-refresh-button { padding:0 9px; }.full-aadhaar-notice { align-items:flex-start; } }

/* Step 4.4 DOB Update */
.dob-service-hero { border-color:#e3dcfa; background:linear-gradient(120deg,#fff,#f5f1ff); }.dob-service-hero>span { color:#7154c9; background:#eee8ff; }
.dob-form-card { width:min(840px,100%); }.dob-light-icon { color:#7154c9; background:#eee8ff; }
.hidden-file-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.upload-box { min-height:125px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; margin-top:8px !important; padding:17px; border:1px dashed #bac8d7; border-radius:13px; color:#60748b; background:#f8fafc; text-align:center; cursor:pointer; transition:.2s; }
.upload-box:hover { border-color:#8066d1; background:#f7f4ff; }.upload-box>i { color:#8066d1; font-size:23px; }.upload-box strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#354a63; font-size:11px; }.upload-box span { color:#8997a8; font-size:9px; }
.secure-file-link { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid #dce4ec; border-radius:8px; color:#496a85; background:#f7fafc; text-decoration:none; font-size:9px; font-weight:800; }.secure-file-link:hover { color:#7154c9; border-color:#d8cef7; background:#f6f2ff; }
.dob-data-table { min-width:1580px; }

/* Step 4.5 Name Update and Child Enrollment */
.name-service-hero { border-color:#f2dfc8; background:linear-gradient(120deg,#fff,#fff8ee); }
.name-service-hero>span { color:#d47a1b; background:#fff0dc; }
.name-light-icon { color:#d47a1b; background:#fff0dc; }
.name-form-card { width:min(860px,100%); }
.name-data-table { min-width:1800px; }
.child-service-hero { border-color:#cfede4; background:linear-gradient(120deg,#fff,#eefbf7); }
.child-service-hero>span { color:#139271; background:#e4f8f1; }
.child-light-icon { color:#139271; background:#e4f8f1; }
.child-form-card { width:min(980px,100%); }
.child-data-table { min-width:3000px; }
.three-field-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.choice-fieldset,.guardian-fieldset { margin:18px 0 0; padding:16px; border:1px solid #dce6ed; border-radius:14px; background:#fafcfd; }
.choice-fieldset legend,.guardian-fieldset legend { padding:0 7px; color:#334760; font-size:11px; font-weight:800; }
.guardian-fieldset>p { margin:0 0 12px; color:#7a899a; font-size:10px; }
.choice-row { display:flex; flex-wrap:wrap; gap:10px; }
.choice-chip { display:inline-flex !important; margin:0 !important; cursor:pointer; }
.choice-chip input { position:absolute; width:1px; height:1px; opacity:0; }
.choice-chip span { display:flex; align-items:center; gap:7px; min-height:39px; padding:0 14px; border:1px solid #d7e1e9; border-radius:10px; color:#60728a; background:#fff; font-size:10px; font-weight:800; transition:.2s; }
.choice-chip input:checked+span { color:#087b63; border-color:#5bc9ad; background:#eaf9f4; box-shadow:0 0 0 3px rgba(37,190,151,.1); }
.choice-chip input:disabled+span { opacity:.45; cursor:not-allowed; }
.guardian-availability { display:flex; flex-wrap:wrap; gap:18px; margin-bottom:13px; }
.toggle-check { display:flex !important; align-items:center; gap:9px; margin:0 !important; cursor:pointer; }
.toggle-check input { position:absolute; width:1px; height:1px; opacity:0; }
.toggle-check span { position:relative; width:35px; height:20px; border-radius:99px; background:#cbd6df; transition:.2s; }
.toggle-check span::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:.2s; }
.toggle-check input:checked+span { background:#20b890; }
.toggle-check input:checked+span::after { transform:translateX(15px); }
.toggle-check strong { color:#435970; font-size:10px; }
.primary-guardian { padding-top:12px; border-top:1px solid #e2e9ee; }
.guardian-detail-card { margin-top:14px; padding:17px; border:1px solid #dce8e4; border-radius:14px; background:#f7fcfa; }
.guardian-detail-card[hidden] { display:none !important; }
.guardian-detail-card h3 { margin:0 0 14px; color:#23836b; font-size:12px; }
.guardian-detail-card h3 i { margin-right:7px; }
.textarea-wrap { align-items:flex-start; min-height:105px; padding-top:15px; }
.textarea-wrap textarea { width:100%; min-height:75px; border:0; outline:0; resize:vertical; color:#1c3049; background:transparent; font:inherit; }
.child-upload:hover { border-color:#36af90; background:#f0fbf7; }
.child-upload>i { color:#199879; }
.availability-badge { display:inline-flex; padding:5px 8px; border-radius:99px; font-size:8px; font-weight:800; }
.availability-badge.yes { color:#087b5c; background:#e4f8f0; }
.availability-badge.no { color:#758297; background:#eef2f5; }
.address-cell { min-width:220px; max-width:320px; white-space:normal !important; line-height:1.5; }
@media (max-width:760px) { .three-field-grid { grid-template-columns:1fr; }.choice-row,.guardian-availability { flex-direction:column; }.choice-chip span { width:100%; }.choice-chip { width:100%; } }

/* Step 5: Admin routing, isolated operator focus, VPN/chat/verification */
.admin-workflow-page,.operator-workflow-page,.retailer-session-page { color:#172640; background:#f2f6fa; }
.admin-light-sidebar,.operator-light-sidebar { color:#172640; border-right:1px solid #dce5ed; background:#fff; }
.admin-light-sidebar nav { overflow-y:auto; padding-right:3px; }
.admin-light-sidebar nav a { min-height:42px; font-size:12px; }
.admin-light-sidebar .dashboard-brand,.operator-light-sidebar .dashboard-brand { color:#172640; }
.admin-light-sidebar nav a,.operator-light-sidebar nav a { color:#64758b; }
.admin-light-sidebar nav a.active,.admin-light-sidebar nav a:hover { color:#fff; background:linear-gradient(135deg,#526ff1,#795be5); }
.operator-light-sidebar nav a.active,.operator-light-sidebar nav a:hover { color:#fff; background:linear-gradient(135deg,#087faa,#16a682); }
.admin-light-sidebar .sidebar-user,.operator-light-sidebar .sidebar-user { border-color:#dce5ed; }
.admin-light-sidebar .sidebar-user strong,.operator-light-sidebar .sidebar-user strong { color:#172640; }
.admin-light-main,.operator-light-main,.retailer-session-main { min-height:100vh; color:#172640; background:radial-gradient(circle at 92% 3%,rgba(104,91,225,.08),transparent 27%),#f2f6fa; }
.admin-light-main .topbar h1,.operator-light-main .topbar h1,.retailer-session-main .topbar h1 { color:#14233c; }
.admin-control-hero { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:28px; padding:28px 31px; border:1px solid #dce4f2; border-radius:21px; background:linear-gradient(120deg,#fff,#f3f1ff); box-shadow:0 14px 38px rgba(38,48,105,.06); }
.admin-control-hero h2 { margin:3px 0 8px; font-size:25px; }.admin-control-hero p:not(.eyebrow) { max-width:780px; margin:0; color:#6e7d92; font-size:11px; line-height:1.65; }
.admin-control-hero>span { width:70px; height:70px; display:grid; place-items:center; flex:0 0 auto; border-radius:20px; color:#6a59d8; background:#ece9ff; font-size:27px; }
.admin-metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:13px; margin:20px 0; }
.admin-metric-grid article { display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:17px; border:1px solid #dfe7ee; border-radius:15px; background:#fff; box-shadow:0 8px 22px rgba(25,55,85,.04); }
.admin-metric-grid i { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#5d6fda; background:#eff0ff; }.admin-metric-grid span { color:#79889b; font-size:9px; font-weight:700; }.admin-metric-grid strong { color:#162944; font-size:21px; }
.admin-routing-card,.admin-stream-card,.operator-queue-card,.operator-history-card { padding:23px; border:1px solid #dce5ed; border-radius:19px; background:#fff; box-shadow:0 12px 31px rgba(34,62,91,.05); }
.admin-section-head { display:flex; align-items:center; gap:14px; }.admin-section-head h2,.admin-section-head h3 { margin:0; color:#172640; font-size:19px; }.admin-section-head>.fa-solid { margin-left:auto; color:#7690aa; font-size:24px; }
.admin-filter-row { display:flex; flex-wrap:wrap; gap:7px; margin:17px 0; }.admin-filter-row button { min-height:36px; padding:0 13px; border:1px solid #dce5ec; border-radius:9px; color:#63758b; background:#f8fafc; font-size:9px; font-weight:800; cursor:pointer; }.admin-filter-row button.active { color:#fff; border-color:#675ce1; background:#675ce1; }
.admin-routing-table { min-width:2100px; }.admin-routing-table td { vertical-align:middle; }
.attendance-switch { display:flex; gap:4px; }.attendance-switch button { padding:6px 8px; border:1px solid #dfe6ec; border-radius:7px; color:#748296; background:#fff; font-size:8px; font-weight:800; cursor:pointer; }.attendance-switch .selected.present { color:#087b5c; border-color:#a8e4d1; background:#e7f8f2; }.attendance-switch .selected.absent { color:#c23b56; border-color:#f2bac4; background:#ffedf1; }
.entry-running-row { box-shadow:inset 4px 0 #19a9d5; animation:entryRowGlow 1.5s infinite alternate; } @keyframes entryRowGlow { to { background:#eefaff; } }
.routing-operator-select { display:block; min-width:175px; height:32px; margin-bottom:5px; border:1px solid #d7e1e9; border-radius:8px; color:#40566d; background:#fff; font-size:9px; }
.mini-action { min-height:30px; padding:0 9px; border:1px solid #d5e0e9; border-radius:8px; color:#49627b; background:#f7fafc; font-size:8px; font-weight:800; cursor:pointer; }.mini-action.assign { color:#fff; border-color:#645be2; background:#645be2; }.mini-action.detail { color:#087c98; border-color:#b8dfe8; background:#eefbfe; }.locked-routing { color:#8896a6; font-size:8px; }
.bio-matched,.verify-confirmed { color:#087b5c; background:#e4f8f0; }.bio-failed,.verify-retry { color:#c23b56; background:#ffedf1; }.bio-put_requested,.verify-waiting,.verify-submitted { color:#a7690b; background:#fff4dc; }.bio-not_requested,.verify-not_requested { color:#748296; background:#eef2f5; }
.role-admin { color:#6d49c8; background:#f0eaff; }.role-operator { color:#2174b4; background:#e8f4ff; }.role-retailer { color:#16806b; background:#e8f8f3; }
.admin-dual-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-top:18px; }.stream-live { margin-left:auto; color:#109573; font-size:9px; font-weight:800; }.stream-live i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#20c99b; box-shadow:0 0 0 5px rgba(32,201,155,.12); }
.admin-audit-list,.admin-user-sessions { max-height:530px; margin-top:15px; overflow:auto; }.audit-event { display:flex; gap:11px; padding:12px 3px; border-bottom:1px solid #edf1f4; }.audit-event>span { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; color:#675ce1; background:#efedff; }.audit-event strong { color:#2a4058; font-size:10px; }.audit-event p { margin:4px 0; color:#64758a; font-size:9px; line-height:1.5; }.audit-event small { color:#95a0ae; font-size:8px; }
.audit-bulk-toolbar{display:flex;align-items:center;gap:10px;margin-top:14px;padding:9px 10px;border:1px solid #dfe8ee;border-radius:12px;background:rgba(255,255,255,.62);font-size:9px;color:#607287}.audit-bulk-toolbar label{display:flex;align-items:center;gap:6px;font-weight:800}.audit-bulk-toolbar span{margin-left:auto}.audit-bulk-toolbar button,.audit-delete-one{border:1px solid #ffd0d6;border-radius:9px;background:#fff5f6;color:#d74758;font-weight:800;cursor:pointer}.audit-bulk-toolbar button{padding:7px 9px}.audit-bulk-toolbar button:disabled{opacity:.45;cursor:not-allowed}.audit-event>input{margin-top:9px}.audit-event>div{min-width:0;flex:1}.audit-delete-one{align-self:center;padding:7px 8px}
.approval-type-cards button:disabled{opacity:.55;filter:saturate(.35);cursor:not-allowed;box-shadow:none}.gender-list-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.gender-list-tabs :is(button,a){padding:9px 14px;border:1px solid #cfe2e8;border-radius:10px;background:#fff;color:#526980;font:800 10px/1 Inter,sans-serif;text-decoration:none;cursor:pointer}.gender-list-tabs button.active{border-color:#18aa99;background:#18aa99;color:#fff}
.pending-reason-badge,.sla-timer{display:block;width:max-content;margin-top:5px;padding:3px 6px;border-radius:6px;font-size:7px;font-weight:900;letter-spacing:.03em}.pending-reason-badge{background:#eef4ff;color:#526d9b}.sla-timer.ok{background:#e9fbf4;color:#12805f}.sla-timer.warning{background:#fff7dd;color:#a96b00}.sla-timer.overdue{background:#fff0f1;color:#c83b4d;animation:slaPulse 1.8s ease-in-out infinite}@keyframes slaPulse{50%{opacity:.58}}
.session-user-row { display:flex; align-items:center; gap:10px; padding:12px 2px; border-bottom:1px solid #edf1f4; }.session-user-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:#6074d8; font-weight:800; }.session-user-row>div:nth-child(2) { min-width:0; flex:1; }.session-user-row strong,.session-user-row span { display:block; }.session-user-row strong { color:#2a4058; font-size:10px; }.session-user-row span { margin-top:4px; color:#7b8999; font-size:8px; }.session-user-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.session-user-row button { min-height:31px; padding:0 8px; border:1px solid #f0c4cd; border-radius:8px; color:#bf3b56; background:#fff4f6; font-size:8px; font-weight:800; cursor:pointer; }.session-user-row button.full-reset{border-color:#c9d8ff;color:#3f5fb5;background:#f1f5ff}.session-user-row button:disabled { opacity:.45; cursor:not-allowed; }.protected-user { color:#6854cd !important; font-weight:800; }
.mobile-entry-otp{margin:12px 0;padding:14px;border:1px solid #cbdcf4;border-radius:13px;background:#f4f8ff}.mobile-otp-head{display:flex;align-items:center;gap:10px}.mobile-otp-head>i{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;color:#fff;background:#5574d9}.mobile-otp-head strong,.mobile-otp-head span{display:block}.mobile-otp-head span{margin-top:3px;color:#64758a;font-size:9px}.mobile-otp-actions{display:grid;grid-template-columns:auto 1fr auto;gap:8px;margin-top:11px}.mobile-otp-actions :is(button,input){min-height:39px;border:1px solid #cad8e9;border-radius:9px}.mobile-otp-actions button{padding:0 13px;color:#fff;background:#4767cb;font-weight:800;cursor:pointer}.mobile-otp-actions input{padding:0 12px}.mobile-entry-otp.verified{border-color:#9cdfc9;background:#edfbf6}.mobile-entry-otp.verified .mobile-otp-head>i{background:#13a47d}.mobile-otp-control form{display:grid;gap:10px;margin-top:16px}.mobile-otp-control form>input{min-height:44px;padding:0 13px;border:1px solid #d3e0e8;border-radius:10px}.mobile-otp-control form>button{width:max-content;min-height:40px;padding:0 15px;border:0;border-radius:10px;color:#fff;background:#168f7c;font-weight:800}.otp-switch{display:flex;align-items:center;gap:9px;padding:13px;border-radius:11px;background:#eef8f6;font-weight:800}.otp-config-state{padding:6px 9px;border-radius:8px;color:#a0454d;background:#fff0f2;font-size:8px;font-weight:900}.otp-config-state.ready{color:#08765b;background:#e9f9f3}@media(max-width:640px){.mobile-otp-actions{grid-template-columns:1fr}.mobile-otp-actions button{width:100%}}
.workflow-modal[hidden] { display:none; }.workflow-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:18px; }.workflow-modal-backdrop { position:absolute; inset:0; background:rgba(11,21,38,.62); backdrop-filter:blur(7px); }.workflow-modal-card { position:relative; width:min(950px,100%); max-height:92vh; overflow:auto; border:1px solid #dae3ec; border-radius:20px; color:#172640; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.25); }.workflow-modal-card>header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:20px 23px; border-bottom:1px solid #e5ebf0; background:#fff; }.workflow-modal-card h2 { margin:0; }.workflow-modal-card>header button { width:36px; height:36px; border:0; border-radius:10px; color:#65768a; background:#f0f4f7; cursor:pointer; }.workflow-detail-body { padding:22px; }.workflow-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.workflow-field { min-width:0; padding:12px; border:1px solid #e1e7ed; border-radius:10px; background:#f9fbfc; }.workflow-field span,.workflow-field strong { display:block; }.workflow-field span { color:#8290a0; font-size:8px; font-weight:700; text-transform:uppercase; }.workflow-field strong { margin-top:5px; overflow-wrap:anywhere; color:#263c55; font-size:10px; }.detail-summary-strip { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:15px; }.detail-files,.detail-telemetry { margin-top:17px; padding:15px; border:1px solid #e1e8ee; border-radius:12px; background:#fafcfd; }.detail-files h3,.detail-telemetry h3 { margin:0 0 12px; font-size:11px; }.detail-files .secure-file-link { margin:0 6px 6px 0; }.detail-telemetry { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.detail-telemetry h3 { grid-column:1/-1; }.workflow-detail-controls { position:sticky; bottom:0; display:flex; flex-wrap:wrap; gap:7px; padding:15px 22px; border-top:1px solid #e5ebf0; background:#fff; }.workflow-detail-controls button { min-height:37px; padding:0 12px; border:1px solid #d9e2ea; border-radius:9px; color:#4d627a; background:#f8fafc; font-size:9px; font-weight:800; cursor:pointer; }.workflow-detail-controls .override-verify,.workflow-detail-controls .override-success { color:#087b5c; border-color:#b9e6d8; background:#ebf9f4; }.workflow-detail-controls .override-reject,.workflow-detail-controls .override-delete { color:#c23b56; border-color:#f0c1ca; background:#fff2f4; }.modal-open { overflow:hidden; }

.operator-summary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:25px 0; }.operator-summary-grid article { padding:17px; border:1px solid #dce5ed; border-radius:14px; background:#fff; }.operator-summary-grid span,.operator-summary-grid strong { display:block; }.operator-summary-grid span { color:#77879a; font-size:9px; }.operator-summary-grid strong { margin-top:6px; color:#17304b; font-size:22px; }
.operator-history-card { margin-top:18px; }.operator-queue-list { display:grid; gap:10px; margin-top:15px; }.operator-queue-item { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #e0e7ed; border-radius:13px; background:#fafcfd; }.operator-queue-item.present { border-color:#bfe7db; background:#f0fbf7; }.operator-queue-item.absent { border-color:#f1c8d0; background:#fff3f5; }.queue-icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; color:#1689a7; background:#e8f8fc; }.operator-queue-item>div:nth-child(2) { flex:1; }.operator-queue-item h3 { margin:0; color:#203750; font-size:12px; }.operator-queue-item p { margin:5px 0; color:#65778b; font-size:9px; }.operator-queue-item small { color:#98a3b0; font-size:8px; }.queue-actions { display:flex; gap:6px; }.queue-actions button { min-height:35px; padding:0 12px; border:1px solid #e9bdc7; border-radius:9px; color:#be3e56; background:#fff3f5; font-size:9px; font-weight:800; cursor:pointer; }.queue-actions button:last-child { color:#fff; border-color:#168e73; background:#168e73; }.operator-queue-empty { display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:180px; color:#8090a3; }.operator-queue-empty i { margin-bottom:10px; font-size:28px; }.operator-queue-empty strong,.operator-queue-empty span { display:block; margin:3px; }.operator-queue-empty strong { color:#354b63; font-size:12px; }.operator-queue-empty span { font-size:9px; }
.operator-history-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:15px; }.operator-history-grid article { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:9px; padding:13px; border:1px solid #e1e8ee; border-radius:12px; background:#fafcfd; }.history-retailer-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#fff; background:#5991b5; font-weight:800; }.operator-history-grid strong,.operator-history-grid span { display:block; }.operator-history-grid strong { color:#2b4158; font-size:10px; }.operator-history-grid span { margin-top:4px; color:#8693a2; font-size:7px; }.operator-history-grid p { grid-column:1/-1; margin:5px 0 0; color:#6e7d8e; font-size:8px; }.operator-history-grid p>* { margin-right:8px; font-style:normal; }.operator-history-grid em { color:#168168; }.operator-history-grid i { color:#c34259; }
.operator-focus-shell { padding-bottom:25px; }.focus-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; padding:22px 25px; border:1px solid #cfe7df; border-radius:18px; background:linear-gradient(120deg,#fff,#ecfaf6); }.focus-header h2 { margin:0 0 8px; }.focus-lock { padding:10px 13px; border:1px solid #bfe2d7; border-radius:10px; color:#168269; background:#e6f7f1; font-size:9px; font-weight:800; }.focus-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:16px; }.focus-data-card,.focus-control-card { padding:21px; border:1px solid #dce5ed; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(35,60,87,.05); }.focus-data-card .workflow-fields { margin-top:15px; }.focus-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.focus-action-grid button { min-height:48px; border:0; border-radius:11px; color:#fff; font-size:10px; font-weight:800; cursor:pointer; }.focus-action-grid button:disabled { opacity:.4; cursor:not-allowed; }.focus-primary { background:linear-gradient(135deg,#1c8fb1,#18ae85); }.finger-button { background:linear-gradient(135deg,#6159df,#835add); }.entry-running-banner { margin-bottom:12px; padding:11px; border:1px solid #a9ddea; border-radius:10px; color:#087e9f; background:#e9faff; text-align:center; font-size:10px; font-weight:900; animation:runningGlow 1s infinite alternate; } @keyframes runningGlow { to { box-shadow:0 0 18px rgba(28,168,207,.28); } }
.finger-result-panel { margin-top:11px; padding:14px; border:1px solid #e1e7ed; border-radius:12px; background:#fafcfd; text-align:center; }.finger-result-panel p { margin:0 0 9px; color:#65778b; font-size:9px; }.finger-result-panel button { width:44%; min-height:39px; border:0; border-radius:9px; color:#fff; font-size:9px; font-weight:800; cursor:pointer; }.finger-match { background:#12a37d; }.finger-fail { background:#dc5269; }
.operator-vpn-monitor { margin-top:13px; padding:14px; border:1px solid #dfe7ed; border-radius:12px; background:#f8fafc; }.operator-vpn-monitor h3 { margin:0 0 10px; color:#284159; font-size:10px; }.operator-vpn-monitor>div { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid #e6ebf0; }.operator-vpn-monitor span { color:#7d8b9b; font-size:8px; }.operator-vpn-monitor strong { color:#244058; font-size:9px; }
.operator-verification { margin-top:13px; padding:15px; border:1px solid #e4e8ee; border-radius:12px; background:#fafbfc; text-align:center; }.operator-verification p { margin:0; color:#718196; font-size:9px; }.operator-verification>strong { display:block; margin:10px 0; color:#263951; font-size:30px; letter-spacing:.25em; }.operator-verification button { min-height:34px; border:1px solid #bce5d8; border-radius:8px; color:#087b5c; background:#eaf8f3; font-size:8px; font-weight:800; cursor:pointer; }.operator-verification button:last-child { color:#be4057; border-color:#edc2ca; background:#fff2f4; }.operator-verification button:disabled { opacity:.38; cursor:not-allowed; }.operator-verification.verification-live { border-color:#f2c85b; background:#fff9e9; box-shadow:0 0 18px rgba(236,176,28,.18); }
.quick-chat-card { margin-top:13px; padding:14px; border:1px solid #dfe7ed; border-radius:12px; background:#fafcfd; }.quick-chat-card h3 { margin:0 0 10px; color:#2b4058; font-size:10px; }.quick-chip-grid { display:flex; flex-wrap:wrap; gap:6px; }.quick-chip-grid button { min-height:34px; padding:6px 10px; border:1px solid #d6e1e9; border-radius:9px; color:#4b6178; background:#fff; font-size:8px; font-weight:700; cursor:pointer; }.quick-message-list { max-height:180px; margin-top:10px; overflow:auto; }.quick-message { max-width:88%; margin:6px 0; padding:8px 10px; border-radius:10px 10px 10px 2px; color:#3d5369; background:#eaf1f6; }.quick-message.mine { margin-left:auto; border-radius:10px 10px 2px 10px; background:#e3f7f0; }.quick-message strong,.quick-message p,.quick-message span { display:block; }.quick-message strong { font-size:8px; }.quick-message p { margin:4px 0; font-size:8px; }.quick-message span { color:#8794a3; font-size:7px; }
.session-result-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:13px; }.session-result-actions button { min-height:40px; border:0; border-radius:9px; color:#fff; font-size:9px; font-weight:800; cursor:pointer; }.complete-success { background:#159b78; }.complete-reject { background:#d85168; }.end-session-button { grid-column:1/-1; color:#fff !important; background:#bb2945 !important; }.assignment-popup { position:fixed; right:22px; bottom:22px; z-index:900; width:min(390px,calc(100% - 30px)); display:flex; gap:13px; padding:18px; border:1px solid #d6e3eb; border-radius:17px; color:#172640; background:rgba(255,255,255,.95); box-shadow:0 24px 70px rgba(25,48,75,.22); backdrop-filter:blur(14px); animation:popupIn .3s ease; }.assignment-popup[hidden] { display:none; } @keyframes popupIn { from { opacity:0; transform:translateY(20px); } }.popup-signal { width:45px; height:45px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; color:#fff; background:#675ce1; animation:bellPulse 1s infinite alternate; } @keyframes bellPulse { to { box-shadow:0 0 0 10px rgba(103,92,225,.12); } }.assignment-popup>div:last-child { flex:1; }.assignment-popup p { margin:0 0 4px; color:#725de0; font-size:8px; font-weight:900; letter-spacing:.12em; }.assignment-popup h3 { margin:0; font-size:15px; }.assignment-popup span { display:block; margin:5px 0 11px; color:#6d7d90; font-size:9px; }.assignment-popup button { min-height:35px; padding:0 12px; border:1px solid #e9bdc7; border-radius:9px; color:#bc3e55; background:#fff2f4; font-size:8px; font-weight:800; cursor:pointer; }.assignment-popup button:last-child { color:#fff; border-color:#168e73; background:#168e73; }

.retailer-live-work-card { margin:20px 0 28px; padding:21px; border:1px solid #d8e7e2; border-radius:18px; background:#fff; box-shadow:0 11px 28px rgba(30,76,67,.05); }.retailer-live-work { display:grid; gap:9px; margin-top:14px; }.retailer-live-work-row { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid #dfe8ed; border-radius:12px; color:#314960; background:#fafcfd; text-decoration:none; }.retailer-live-work-row.running { border-color:#a9dfd0; background:#effaf6; animation:runningGlow 1s infinite alternate; }.retailer-live-work-row>span { width:39px; height:39px; display:grid; place-items:center; border-radius:11px; color:#149173; background:#e3f7f0; }.retailer-live-work-row>div { flex:1; }.retailer-live-work-row strong,.retailer-live-work-row p { display:block; margin:0; }.retailer-live-work-row strong { color:#253b53; font-size:11px; }.retailer-live-work-row p { margin-top:5px; color:#708095; font-size:8px; }.retailer-live-work-row em { color:#168b70; font-size:8px; font-style:normal; font-weight:800; }.retailer-live-empty { display:flex; align-items:center; gap:12px; padding:13px; color:#75869a; background:#f8fafc; border-radius:11px; }.retailer-live-empty>i { font-size:25px; }.retailer-live-empty strong,.retailer-live-empty span { display:block; }.retailer-live-empty strong { color:#334a62; font-size:10px; }.retailer-live-empty span { margin-top:4px; font-size:8px; }
.retailer-session-header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:26px 0 16px; padding:21px 24px; border:1px solid #d6e5e0; border-radius:18px; background:linear-gradient(120deg,#fff,#effaf6); }.retailer-session-header h2 { margin:0 0 8px; }.retailer-session-header .end-session-button { min-height:42px; padding:0 14px; border:0; border-radius:10px; font-size:9px; font-weight:800; cursor:pointer; }.retailer-session-header .end-session-button:disabled { opacity:.4; cursor:not-allowed; }.retailer-session-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:16px; }.retailer-vpn-chat-card,.retailer-telemetry-card { padding:22px; border:1px solid #dce5ed; border-radius:18px; background:#fff; box-shadow:0 12px 32px rgba(34,60,88,.05); }.retailer-vpn-chat-card form { margin-top:17px; }.retailer-session-page .light-input select { min-width:0; flex:1; border:0; outline:0; color:#1c3049; background:transparent; }.telemetry-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px; }.telemetry-status-grid div { padding:12px; border:1px solid #e0e7ed; border-radius:10px; background:#f9fbfc; }.telemetry-status-grid span,.telemetry-status-grid strong { display:block; }.telemetry-status-grid span { color:#8592a1; font-size:8px; }.telemetry-status-grid strong { margin-top:5px; color:#294157; font-size:9px; }
.retailer-verification-panel { position:relative; margin-top:14px; padding:17px; border:1px solid #f1cc6c; border-radius:13px; background:#fff9e8; text-align:center; box-shadow:0 0 20px rgba(228,169,31,.12); }.retailer-verification-panel p { margin:0 0 12px; color:#8a6515; font-size:10px; font-weight:800; }.six-box-grid { display:grid; grid-template-columns:repeat(6,43px); justify-content:center; gap:7px; }.six-box-grid input { width:43px; height:49px; border:2px solid #d8c079; border-radius:9px; outline:0; color:#263951; background:#fff; text-align:center; font-size:20px; font-weight:800; }.six-box-grid input:focus { border-color:#e39c00; box-shadow:0 0 0 3px rgba(227,156,0,.13); }.retailer-verification-panel button { min-height:38px; margin-top:12px; padding:0 14px; border:0; border-radius:9px; color:#fff; background:#129678; font-size:9px; font-weight:800; cursor:pointer; }.retailer-verification-panel button:disabled { opacity:.4; cursor:not-allowed; }.verification-tick { position:absolute; right:14px; top:14px; color:#13a27e; font-size:21px; animation:tickPop .4s ease; } @keyframes tickPop { from { transform:scale(0); } }
.retailer-session-summary { margin-top:14px; padding:14px; border:1px solid #e0e7ed; border-radius:12px; background:#fafcfd; }.retailer-session-summary h3 { margin:0 0 10px; color:#2c4359; font-size:10px; }.retailer-session-summary>div { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid #e8edf1; }.retailer-session-summary span { color:#8190a0; font-size:8px; }.retailer-session-summary strong { max-width:65%; overflow-wrap:anywhere; color:#2b4259; text-align:right; font-size:9px; }
.put-otp-banner { position:sticky; top:8px; z-index:20; margin-top:12px; padding:11px; border:1px solid #ffaf3c; border-radius:11px; color:#8b4c00; background:#fff2cc; text-align:center; font-size:13px; font-weight:900; letter-spacing:.15em; animation:otpGlow .75s infinite alternate; } @keyframes otpGlow { to { color:#fff; background:#ee8d16; box-shadow:0 0 24px rgba(238,141,22,.45); } }
.finger-radar { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; background:rgba(9,24,38,.44); backdrop-filter:blur(14px); }.finger-radar[hidden] { display:none; }.radar-glass { width:min(470px,100%); padding:35px; border:1px solid rgba(255,255,255,.42); border-radius:28px; color:#fff; background:rgba(19,71,85,.42); box-shadow:0 30px 90px rgba(0,0,0,.28); text-align:center; }.radar-pulse { position:relative; width:115px; height:115px; display:grid; place-items:center; margin:0 auto 25px; border:1px solid rgba(84,240,197,.75); border-radius:50%; color:#63f0c9; font-size:43px; animation:radarPulse 1.25s infinite; } @keyframes radarPulse { 50% { box-shadow:0 0 0 25px rgba(76,237,194,.11),0 0 0 50px rgba(76,237,194,.06); transform:scale(1.05); } }.radar-glass h2 { margin:0 0 10px; font-size:26px; }.radar-glass p { margin:0; color:#d5e9e7; font-size:11px; }.finger-radar-result { margin-top:18px; font-size:52px; }.finger-radar.matched .radar-glass { background:rgba(12,120,87,.52); }.finger-radar.failed .radar-glass { background:rgba(145,30,54,.53); }.finger-radar.failed .radar-pulse { color:#ff879a; border-color:#ff879a; animation:none; }
@media (max-width:1100px) { .admin-metric-grid { grid-template-columns:repeat(3,1fr); }.admin-dual-grid,.focus-layout,.retailer-session-layout { grid-template-columns:1fr; }.operator-history-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .admin-metric-grid,.operator-summary-grid { grid-template-columns:repeat(2,1fr); }.admin-dual-grid { grid-template-columns:1fr; }.admin-routing-card,.admin-stream-card,.operator-queue-card,.operator-history-card,.focus-data-card,.focus-control-card,.retailer-vpn-chat-card,.retailer-telemetry-card { padding:16px; }.workflow-fields,.detail-telemetry,.telemetry-status-grid { grid-template-columns:1fr; }.detail-telemetry h3 { grid-column:auto; }.operator-queue-item { align-items:flex-start; flex-wrap:wrap; }.queue-actions { width:100%; }.queue-actions button { flex:1; }.operator-history-grid { grid-template-columns:1fr; }.focus-header,.retailer-session-header { align-items:flex-start; flex-direction:column; }.six-box-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }.six-box-grid input { width:100%; height:44px; }.retailer-live-work-row { align-items:flex-start; }.retailer-live-work-row em { display:none; } }

/* Step 11: universal premium-light workspace and native mobile operation */
body.dashboard-page{--text:#102640;--muted:#65788f;--line:#dce7ee;--panel:#fff;--panel-2:#f5f9fb;--shadow:0 18px 55px rgba(29,67,92,.1);color-scheme:light;color:#102640;background:radial-gradient(circle at 92% 1%,rgba(31,201,168,.13),transparent 24%),radial-gradient(circle at 18% 0,rgba(76,111,242,.08),transparent 22%),#f2f7fa}
.dashboard-page .dashboard-main{background:transparent}
.dashboard-page .sidebar{border-right:1px solid rgba(204,222,230,.86);color:#17324a;background:rgba(255,255,255,.95);box-shadow:10px 0 40px rgba(25,61,84,.06);backdrop-filter:blur(18px)}
.dashboard-page .dashboard-brand{color:#132a43}.dashboard-page .dashboard-brand i{color:#fff;background:linear-gradient(135deg,#167fc3,#18bca0);box-shadow:0 9px 23px rgba(20,156,167,.2)}
.dashboard-page .sidebar nav a{color:#60748a}.dashboard-page .sidebar nav a:hover{color:#087e80;background:#edf9f7}.dashboard-page .sidebar nav a.active{color:#fff;background:linear-gradient(135deg,#137fa8,#1ab08b);box-shadow:0 10px 24px rgba(18,145,142,.18)}.dashboard-page .sidebar-user{border-color:#e1e9ee}.dashboard-page .sidebar-user strong{color:#17304a}.dashboard-page .sidebar-user span{color:#75869a}
.dashboard-page .topbar{position:relative;z-index:12}.dashboard-page .topbar h1{color:#10243d}.dashboard-page .eyebrow{color:#0d9a88}.dashboard-page .logout-button,.dashboard-page .menu-button{color:#365069;border-color:#d8e5eb;background:rgba(255,255,255,.92);box-shadow:0 7px 22px rgba(28,66,90,.07)}.dashboard-page .logout-button:hover,.dashboard-page .menu-button:hover{color:#067d72;border-color:#b9ded5;background:#f3fcf9}
.dashboard-page :is(.admin-control-hero,.admin-routing-card,.admin-stream-card,.operator-queue-card,.operator-history-card,.focus-header,.focus-data-card,.focus-control-card,.retailer-light-welcome,.retailer-service-card,.retailer-live-work-card,.chat-request-center,.light-form-card,.light-list-card,.retailer-session-header,.retailer-vpn-chat-card,.retailer-telemetry-card,.management-card){border-color:#d9e7e9;background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,253,252,.96));box-shadow:0 17px 48px rgba(31,72,91,.075)}
.dashboard-page :is(.admin-routing-card,.admin-stream-card,.operator-queue-card,.operator-history-card,.focus-data-card,.focus-control-card,.retailer-service-card,.light-form-card,.light-list-card,.retailer-vpn-chat-card,.retailer-telemetry-card):hover{border-color:#c7e2dc;box-shadow:0 22px 56px rgba(25,92,91,.1)}
.dashboard-page :is(input,select,textarea){color:#19334c;background:#f9fcfd}.dashboard-page :is(input,select,textarea):focus{border-color:#1cab91!important;box-shadow:0 0 0 4px rgba(28,171,145,.1)!important}.dashboard-page label{color:#38536b}.dashboard-page button,.dashboard-page a{touch-action:manipulation}
.dashboard-page .responsive-data-table{position:relative;border-color:#d9e5eb;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}.dashboard-page .service-data-table{color:#28425a}.dashboard-page .service-data-table th{color:#526d83;background:#edf6f5}.dashboard-page .service-data-table tr:hover{background:#f2faf8}
.dashboard-page .workflow-modal-card{border-color:#d6e5e8;background:#fff;box-shadow:0 35px 110px rgba(8,38,55,.28)}.dashboard-page .workflow-modal-card>header,.dashboard-page .workflow-detail-controls{background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
.dashboard-page .toast{color:#fff;background:linear-gradient(135deg,#123e4a,#176b64);box-shadow:0 20px 55px rgba(15,65,69,.25)}

@media(max-width:820px){
    html{scroll-padding-top:74px}.dashboard-page{overflow-x:hidden}.dashboard-page .sidebar{width:min(86vw,305px);z-index:2100;padding:20px 14px;overflow-y:auto}.dashboard-page .sidebar.open{box-shadow:18px 0 70px rgba(9,40,57,.28)}
    .dashboard-page .dashboard-main{width:100%;margin-left:0;padding:14px 12px 34px}.dashboard-page .topbar{position:sticky;top:0;margin:-14px -12px 0;padding:12px;gap:10px;border-bottom:1px solid rgba(213,228,234,.82);background:rgba(245,250,251,.92);backdrop-filter:blur(16px)}.dashboard-page .topbar>div:nth-child(2){min-width:0;flex:1}.dashboard-page .topbar h1{overflow:hidden;font-size:19px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.dashboard-page .topbar .eyebrow{margin-bottom:5px;font-size:8px}.dashboard-page .menu-button{display:grid;place-items:center;flex:0 0 42px}.dashboard-page .topbar-actions{flex:0 0 auto;gap:6px}.dashboard-page .topbar-actions :is(.light-online,.stream-live,.live-indicator){display:none}.dashboard-page .logout-button{width:42px;display:grid;place-items:center;padding:0}.dashboard-page .logout-button span{display:none}.dashboard-page .logout-button i{margin:0}
    .dashboard-page :is(.admin-control-hero,.retailer-light-welcome,.user-master-hero,.mobile-service-hero,.focus-header,.retailer-session-header){margin-top:16px;padding:18px;border-radius:16px}.dashboard-page :is(.admin-control-hero,.retailer-light-welcome,.user-master-hero,.mobile-service-hero)>span,.dashboard-page :is(.admin-control-hero,.retailer-light-welcome)>.welcome-illustration{display:none}
    .dashboard-page :is(.admin-metric-grid,.operator-summary-grid,.metric-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}.dashboard-page :is(.admin-metric-grid,.operator-summary-grid)>article{min-height:88px;padding:14px;border-radius:14px}.dashboard-page :is(.admin-metric-grid,.operator-summary-grid)>article strong{font-size:23px}
    .dashboard-page :is(.admin-dual-grid,.focus-layout,.retailer-session-layout,.retailer-layout,.operator-layout,.user-master-layout,.retailer-service-grid,.chat-request-layout,.two-field-grid,.workflow-fields,.detail-telemetry,.telemetry-status-grid){grid-template-columns:1fr!important;gap:12px}
    .dashboard-page :is(.admin-routing-card,.admin-stream-card,.operator-queue-card,.operator-history-card,.focus-data-card,.focus-control-card,.retailer-service-card,.retailer-live-work-card,.chat-request-center,.light-form-card,.light-list-card,.retailer-vpn-chat-card,.retailer-telemetry-card,.user-light-card){padding:15px!important;border-radius:16px}
    .dashboard-page .admin-section-head{align-items:flex-start;gap:10px}.dashboard-page .admin-section-head h2{font-size:17px}.dashboard-page .admin-section-head>:last-child{flex:0 0 auto}.dashboard-page .admin-filter-row,.dashboard-page .service-view-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.dashboard-page .admin-filter-row::-webkit-scrollbar,.dashboard-page .service-view-tabs::-webkit-scrollbar{display:none}.dashboard-page .admin-filter-row button,.dashboard-page .service-tab{flex:0 0 auto;min-height:42px;white-space:nowrap}
    .dashboard-page .responsive-data-table{overflow:auto;-webkit-overflow-scrolling:touch}.dashboard-page .responsive-data-table:before{content:"SWIPE LEFT / RIGHT TO VIEW ALL COLUMNS";position:sticky;left:0;display:block;padding:9px 11px;color:#218b7b;background:#edf9f6;font-size:8px;font-weight:900;letter-spacing:.07em}.dashboard-page .service-data-table{min-width:920px}.dashboard-page .service-data-table :is(th,td){padding:11px 9px}
    .dashboard-page :is(input,select,textarea){font-size:16px!important}.dashboard-page :is(button,.primary-button,.apply-button,.list-button,.mini-action,.light-refresh-button){min-height:44px}.dashboard-page .service-actions{grid-template-columns:1fr 1fr}.dashboard-page .service-actions a{min-height:46px}.dashboard-page .file-drop{min-height:110px}.dashboard-page .full-chat-compose{padding:10px;flex-direction:column}.dashboard-page .full-chat-compose button{width:100%;min-height:44px}.dashboard-page .full-chat-message{width:94%}
    .dashboard-page .workflow-modal{align-items:end;padding:0}.dashboard-page .workflow-modal-card{width:100%;max-height:96dvh;border-radius:20px 20px 0 0}.dashboard-page .workflow-modal-card>header{padding:15px}.dashboard-page .workflow-detail-body,.dashboard-page .admin-chat-scope,.dashboard-page .user-entries-body{padding:13px}.dashboard-page .workflow-detail-controls{padding:11px}.dashboard-page .workflow-detail-controls button{flex:1;min-width:120px;min-height:43px}
    .dashboard-page .operator-queue-item,.dashboard-page .admin-chat-request-item,.dashboard-page .chat-request-item,.dashboard-page .master-user-row{align-items:flex-start;flex-wrap:wrap}.dashboard-page :is(.queue-actions,.admin-chat-actions,.master-user-actions){width:100%}.dashboard-page :is(.queue-actions,.admin-chat-actions,.master-user-actions)>*{flex:1;min-height:43px}.dashboard-page .assignment-popup,.dashboard-page .retailer-assignment-popup{left:12px;right:12px;bottom:12px;top:auto;width:auto}.dashboard-page .retailer-live-work-row{align-items:flex-start}.dashboard-page .retailer-live-work-row em{display:none}
    .dashboard-page .six-box-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.dashboard-page .six-box-grid input{width:100%;height:46px;padding:0;font-size:18px!important}.dashboard-page .finger-result-panel button{width:48%;min-height:44px}.dashboard-page .focus-action-grid,.dashboard-page .session-result-actions{grid-template-columns:1fr}.dashboard-page .end-session-button{grid-column:auto}.dashboard-page .quick-chip-grid{display:grid;grid-template-columns:1fr}.dashboard-page .quick-chip-grid button{min-height:44px;text-align:left}
}
@media(max-width:480px){
    .dashboard-page .dashboard-main{padding-inline:9px}.dashboard-page .topbar{margin-inline:-9px;padding-inline:9px}.dashboard-page :is(.admin-metric-grid,.operator-summary-grid)>article{min-width:0;padding:12px}.dashboard-page :is(.admin-metric-grid,.operator-summary-grid)>article span{font-size:8px}.dashboard-page .service-data-table{min-width:820px}.dashboard-page .retailer-service-card h3{font-size:19px}.dashboard-page .retailer-session-summary>div{align-items:flex-start;flex-direction:column}.dashboard-page .retailer-session-summary strong{max-width:100%;text-align:left}.dashboard-page .telemetry-status-grid{grid-template-columns:1fr 1fr!important}.dashboard-page .toast{left:10px;right:10px;bottom:10px;max-width:none}.dashboard-page .radar-glass{padding:25px 16px}.dashboard-page .radar-pulse{width:88px;height:88px}}