:root {
  --ink: #172033;
  --muted: #687187;
  --line: #e1e6ef;
  --surface: #ffffff;
  --canvas: #f4f6fa;
  --navy: #101a30;
  --primary: #2558d9;
  --primary-dark: #1945b3;
  --cyan: #38c6d9;
  --success: #16966a;
  --danger: #c83e4d;
  --shadow: 0 18px 50px rgba(25, 41, 77, 0.12);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: .94rem; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -0.04em; }
h2 { font-size: 1.25rem; }
button, input, select, textarea { font: inherit; }
.muted { color: var(--muted); }
.eyebrow { margin-bottom: .65rem; color: var(--primary); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.brand-mark { display: grid; width: 4rem; height: 4rem; place-items: center; border-radius: 1.1rem; color: white; background: linear-gradient(135deg, var(--primary), var(--cyan)); font-weight: 900; }
.brand-mark.small { width: 2.25rem; height: 2.25rem; border-radius: .7rem; font-size: .8rem; }
.button { border: 0; border-radius: .62rem; padding: .62rem .82rem; cursor: pointer; font-weight: 750; transition: .18s ease; }
.button:disabled { cursor: wait; opacity: .65; }
.button.primary { width: 100%; color: white; background: var(--primary); }
.button.compact { width: auto; }
.button.primary:hover { background: var(--primary-dark); }
.button.ghost { color: var(--ink); background: #eef2f8; }
.button.ghost:hover { background: #e1e7f0; }
.button.danger { color: white; background: var(--danger); }

.login-page { min-height: 100vh; background: var(--navy); }
.login-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(20rem, 1.05fr) minmax(20rem, .95fr); }
.brand-panel { display: flex; padding: clamp(2rem, 7vw, 7rem); color: white; flex-direction: column; justify-content: center; background: radial-gradient(circle at 20% 20%, #294879 0, transparent 34%), linear-gradient(145deg, #101a30, #172a4c); }
.brand-panel .eyebrow { margin-top: 2rem; color: #73ddea; }
.brand-panel h1 { margin-bottom: 1rem; font-size: clamp(2.5rem, 6vw, 5rem); }
.brand-panel > p:not(.eyebrow) { max-width: 36rem; color: #bac7dc; font-size: 1.1rem; line-height: 1.7; }
.security-note { display: flex; margin-top: 2.5rem; gap: .7rem; align-items: center; color: #c8d4e7; font-size: .88rem; }
.security-note span { color: #48d6a5; }
.login-card { display: flex; padding: clamp(2rem, 8vw, 7rem); flex-direction: column; justify-content: center; background: var(--surface); }
.login-card form { display: grid; max-width: 28rem; margin-top: 2rem; gap: .65rem; }
.login-card label { margin-top: .6rem; font-size: .88rem; font-weight: 750; }
.login-card input, .search-box input { width: 100%; border: 1px solid var(--line); border-radius: .7rem; padding: .86rem 1rem; color: var(--ink); background: #fbfcfe; outline: none; }
.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 88, 217, .13); }
.form-error { min-height: 1.3rem; margin: .35rem 0; color: var(--danger); font-size: .86rem; }
.form-error.form-success { color: var(--success); }
.login-card form[hidden] { display: none; }

.topbar { display: flex; min-height: 3.75rem; padding: .55rem clamp(.8rem, 3vw, 2.5rem); align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--surface); }
.brand-link { display: flex; align-items: center; gap: .75rem; color: var(--ink); font-weight: 850; text-decoration: none; }
.account-area { display: flex; align-items: center; gap: 1rem; }
.account-area > div { display: grid; text-align: right; }
.role-badge { color: var(--primary); font-size: .68rem; font-weight: 850; letter-spacing: .08em; }
.dashboard-content { width: min(1800px, calc(100% - 1.25rem)); margin: 0 auto; padding: 1.6rem 0; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.heading-actions { display: flex; align-items: center; gap: .55rem; }
.status-card { display: flex; min-width: 15rem; padding: 1rem 1.2rem; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); }
.status-card div { display: grid; }
.status-card span:not(.status-dot) { color: var(--muted); font-size: .78rem; }
.status-dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 .3rem rgba(22, 150, 106, .13); }
.metrics { display: grid; margin: 1.15rem 0; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.metrics article { display: grid; padding: .85rem 1rem; gap: .3rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.metrics span { color: var(--muted); font-size: .83rem; }
.metrics strong { font-size: 1.45rem; }
.success-text { color: var(--success); }
.accent-text { color: var(--primary); }
.table-card { overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow); }
.table-toolbar { display: flex; padding: .85rem 1rem; align-items: center; justify-content: space-between; gap: 1rem; }
.table-toolbar h2, .table-toolbar p { margin-bottom: .2rem; }
.search-box { width: min(22rem, 100%); }
.search-box input:disabled { cursor: not-allowed; opacity: .7; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: .84rem; }
th, td { padding: .68rem .72rem; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); background: #f8f9fc; font-size: .64rem; letter-spacing: .045em; text-transform: uppercase; }
.empty-row td { padding: 4rem 1rem; color: var(--muted); text-align: center; }
.device-identity { display: grid; gap: .2rem; }
.device-identity span { color: var(--muted); font-size: .76rem; }
.device-status { display: inline-flex; padding: .35rem .6rem; border-radius: 99rem; font-size: .68rem; font-weight: 850; letter-spacing: .05em; }
.device-status.online { color: #08704c; background: #dff7ed; }
.device-status.offline { color: #616b7d; background: #edf0f4; }
.device-status.en-sesion { color: #1748bc; background: #e3eafe; }
.table-action { padding: .43rem .58rem; color: var(--primary); background: #edf2ff; font-size: .7rem; }
.table-action + .table-action { margin-left: .4rem; }
.connect-action { color: white; background: var(--primary); }
.table-action:disabled { color: #8991a2; background: #eef0f4; cursor: not-allowed; }
.table-action.future-action:disabled { color: #5d6f96; background: #e8eefb; opacity: 1; }
.table-action.danger-outline { color: var(--danger); background: #fff0f2; }
.modal { width: min(31rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; border: 1px solid var(--line); border-radius: 1rem; padding: 1.15rem; color: var(--ink); background: var(--surface); box-shadow: 0 28px 80px rgba(10, 20, 45, .3); }
.modal::backdrop { background: rgba(12, 21, 40, .66); backdrop-filter: blur(3px); }
.modal form { display: grid; gap: .65rem; }
.modal form > label { margin-top: .5rem; font-size: .85rem; font-weight: 750; }
.modal input { width: 100%; border: 1px solid var(--line); border-radius: .7rem; padding: .82rem 1rem; color: var(--ink); background: #fbfcfe; }
.modal select { width: 100%; border: 1px solid var(--line); border-radius: .7rem; padding: .82rem 1rem; color: var(--ink); background: #fbfcfe; }
.modal textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: .7rem; padding: .82rem 1rem; color: var(--ink); background: #fbfcfe; }
.modal[data-theme="dark"] {
  --ink: #edf3ff;
  --muted: #9eacc3;
  --line: #2d3d58;
  --surface: #111c31;
  color-scheme: dark;
  background: #111c31;
}
.modal[data-theme="dark"] input,
.modal[data-theme="dark"] select,
.modal[data-theme="dark"] textarea { color: #edf3ff; border-color: #344762; background: #18253b; }
.modal[data-theme="dark"] .button.ghost { color: #dce6f7; background: #223049; }
.modal[data-theme="dark"] .button.ghost:hover { background: #2c3c58; }
.modal[data-theme="dark"] .icon-button { color: #aebbd0; }
.operations-page { width: 100%; height: 100dvh; overflow: hidden; }
.operations-shell { display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.operation-view { width: 100%; height: 100%; min-height: 0; }
.operation-view[hidden] { display: none; }
.operations-map-card { position: relative; display: grid; width: 100%; height: 100%; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr); border: 1px solid #263755; border-radius: 0; background: var(--navy); box-shadow: var(--shadow); }
.device-map { z-index: 0; min-width: 0; min-height: 0; background: #dfe7ef; }
.map-summary { position: absolute; z-index: 450; top: .55rem; right: .55rem; display: flex; width: 15rem; padding: 0; color: #eff5ff; flex-direction: column; justify-content: flex-start; gap: .4rem; background: transparent; pointer-events: none; }
.map-summary .muted { color: #9fb0c9; line-height: 1.45; }
.map-summary .eyebrow { color: #66d5e4; }
.operations-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem; }
.operations-metrics article { display: grid; min-width: 0; padding: .4rem; gap: .05rem; border: 1px solid rgba(255,255,255,.16); border-radius: .5rem; background: rgba(16,26,48,.78); box-shadow: 0 8px 24px rgba(7,16,34,.2); backdrop-filter: blur(4px); }
.operations-metrics span { overflow: hidden; color: #fff; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.operations-metrics strong, .operations-metrics .success-text, .operations-metrics .accent-text { color: #fff; font-size: 1.05rem; }
.fleet-marker-wrap { overflow: visible; background: transparent; border: 0; }
.fleet-marker-cluster { display: flex; width: max-content; align-items: center; gap: .4rem; }
.fleet-marker { position: relative; display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 3px solid white; border-radius: 50% 50% 50% 12%; color: white; background: var(--primary); box-shadow: 0 7px 20px rgba(12,30,65,.38); transform: rotate(-45deg); }
.fleet-marker > span { max-width: 2.15rem; overflow: hidden; font-size: .56rem; font-weight: 900; text-overflow: ellipsis; transform: rotate(45deg); white-space: nowrap; }
.fleet-marker-label { padding: .32rem .5rem; border: 1px solid rgba(255,255,255,.55); border-radius: .45rem; color: white; background: rgba(16,26,48,.94); box-shadow: 0 6px 18px rgba(7,16,34,.28); font-size: .66rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.fleet-marker.online::after { position: absolute; top: -.15rem; right: -.15rem; width: .65rem; height: .65rem; border: 2px solid white; border-radius: 50%; background: #31cb91; content: ''; }
.fleet-marker.offline { background: #758197; }
.map-popup { display: grid; min-width: 11rem; gap: .25rem; color: var(--ink); }
.map-popup > span:not(.map-popup-status), .map-popup small { color: var(--muted); }
.map-popup-status { width: max-content; margin: .2rem 0; padding: .18rem .4rem; border-radius: 99rem; font-size: .64rem; font-weight: 800; }
.map-popup-status.online { color: #08704c; background: #dff7ed; }
.map-popup-status.offline { color: #616b7d; background: #edf0f4; }
.map-remote-action { margin-top: .45rem; padding: .48rem .6rem; font-size: .72rem; }
.remote-control-modal { width: min(56vw, 850px); height: min(86vh, 860px); max-width: none; max-height: none; overflow: hidden; padding: 0; border: 1px solid #d7deea; border-radius: .8rem; color: white; background: #f3f6fb; box-shadow: 0 22px 70px rgba(15,27,49,.32); transition: width .2s ease; }
.remote-control-modal::backdrop { background: rgba(15,27,49,.55); backdrop-filter: blur(4px); }
.remote-modal-heading { position: absolute; z-index: 20; top: .4rem; right: .45rem; display: block; padding: 0; background: transparent; pointer-events: none; }
.remote-modal-heading h2, .remote-modal-heading p { margin: 0; }
.remote-modal-heading .eyebrow { color: #66d5e4; font-size: .62rem; }
.remote-modal-close { display: grid; width: 2rem; height: 2rem; padding: 0; place-items: center; border: 0; border-radius: 0; color: #aebbd0; background: transparent; cursor: pointer; font-size: 1.45rem; pointer-events: auto; transition: color .15s ease, transform .15s ease; }
.remote-modal-close:hover { color: #fff; transform: scale(1.08); }
.remote-control-modal iframe { display: block; width: 100%; height: 100%; border: 0; background: #09111f; }
.lower-operation-panel { display: grid; width: 100%; height: 100%; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr) 3rem; border-radius: .75rem .75rem 0 0; box-shadow: var(--shadow); }
.lower-view { min-height: 0; }
.lower-view[hidden] { display: none; }
.operations-tabs { display: grid; z-index: 500; min-width: 0; padding: .2rem .55rem; grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1fr); align-items: center; gap: .25rem; border: 1px solid var(--line); border-top: 0; border-radius: 0; background: rgba(255,255,255,.98); backdrop-filter: blur(12px); }
.tabs-brand { display: flex; align-items: center; }
.tabs-brand strong { font-size: .76rem; }
.operation-tab { display: flex; min-width: 0; height: 2.45rem; padding: .25rem .5rem; align-items: center; justify-content: center; gap: .35rem; border: 0; border-radius: .6rem; color: #5d687c; background: transparent; cursor: pointer; font-size: .72rem; font-weight: 750; text-decoration: none; }
.operation-tab svg { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.operation-tab:hover { color: var(--primary); background: #edf2ff; }
.operation-tab.active { color: white; background: var(--primary); box-shadow: 0 7px 18px rgba(37,88,217,.22); }
.tabs-account { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: .45rem; }
.tabs-account > span { display: grid; min-width: 0; text-align: right; }
.tabs-account strong { overflow: hidden; text-overflow: ellipsis; font-size: .72rem; white-space: nowrap; }
.tabs-account small { color: var(--primary); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.theme-toggle { width: 2.15rem; height: 2.15rem; padding: 0; flex: 0 0 auto; }
.theme-toggle .theme-icon { width: 1.05rem; height: 1.05rem; }
.theme-toggle .sun-icon { display: none; }
.logout-tab { width: 4.4rem; color: var(--danger); }
.dpc-table-card { display: grid; width: 100%; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); border-radius: 1rem 1rem 0 0; box-shadow: none; }
.dpc-table-card .table-scroll { min-height: 0; overflow: auto; }
.lower-operation-panel .table-toolbar { min-height: 2.8rem; padding: .35rem .65rem; }
.lower-operation-panel .table-toolbar > div:first-child { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.lower-operation-panel .table-toolbar .eyebrow,
.lower-operation-panel .table-toolbar h2,
.lower-operation-panel .table-toolbar p { margin: 0; white-space: nowrap; }
.lower-operation-panel .table-toolbar .eyebrow { font-size: .58rem; letter-spacing: .09em; }
.lower-operation-panel .table-toolbar h2 { font-size: .9rem; }
.lower-operation-panel .table-toolbar .muted { font-size: .65rem; }
.lower-operation-panel .heading-actions { gap: .3rem; }
.lower-operation-panel .record-search { width: 12rem; height: 1.9rem; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); background: #f8faff; font-size: .68rem; outline: none; }
.lower-operation-panel .record-search:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,88,217,.12); }
.lower-operation-panel .heading-actions .button { padding: .38rem .55rem; border-radius: .5rem; font-size: .68rem; }
.lower-operation-panel table { font-size: .72rem; }
.lower-operation-panel th,
.lower-operation-panel td { padding: .34rem .48rem; }
.lower-operation-panel th { font-size: .56rem; }
.lower-operation-panel .device-identity { gap: .08rem; }
.lower-operation-panel .device-identity span { font-size: .63rem; }
.lower-operation-panel .device-status { padding: .24rem .42rem; font-size: .56rem; }
.lower-operation-panel .table-action { padding: .28rem .42rem; border-radius: .45rem; font-size: .6rem; }
.lower-operation-panel .table-actions { gap: .2rem; flex-wrap: nowrap; }
.dpc-table-card table { table-layout: fixed; white-space: normal; }
.dpc-table-card th:nth-child(1) { width: 13%; }
.dpc-table-card th:nth-child(2) { width: 12%; }
.dpc-table-card th:nth-child(3) { width: 7%; }
.dpc-table-card th:nth-child(4) { width: 6%; }
.dpc-table-card th:nth-child(5) { width: 6%; }
.dpc-table-card th:nth-child(6) { width: 8%; }
.dpc-table-card th:nth-child(7) { width: 7%; }
.dpc-table-card th:nth-child(8) { width: 12%; }
.dpc-table-card th:nth-child(9) { width: 10%; }
.dpc-table-card th:nth-child(10) { width: 19%; }
.dpc-table-card td { overflow-wrap: anywhere; }
.lower-operation-panel[data-theme="dark"] {
  --ink: #edf3ff;
  --muted: #9eacc3;
  --line: #2a3954;
  --surface: #111c31;
  color: var(--ink);
  background: #0c1628;
  box-shadow: 0 18px 50px rgba(2, 8, 20, .32);
}
.lower-operation-panel[data-theme="dark"] .dpc-table-card,
.lower-operation-panel[data-theme="dark"] .table-scroll,
.lower-operation-panel[data-theme="dark"] .table-toolbar { background: #111c31; }
.lower-operation-panel[data-theme="dark"] th { color: #aebbd0; background: #18243a; }
.lower-operation-panel[data-theme="dark"] td { color: #edf3ff; }
.lower-operation-panel[data-theme="dark"] .operations-tabs { border-color: #2a3954; background: rgba(12,22,40,.98); }
.lower-operation-panel[data-theme="dark"] .record-search { color: #edf3ff; border-color: #34445f; background: #18243a; }
.lower-operation-panel[data-theme="dark"] .record-search::placeholder { color: #8f9db4; }
.lower-operation-panel[data-theme="dark"] .button.ghost { color: #dce6f7; background: #223049; }
.lower-operation-panel[data-theme="dark"] .button.ghost:hover,
.lower-operation-panel[data-theme="dark"] .operation-tab:hover { color: #fff; background: #2b3b58; }
.lower-operation-panel[data-theme="dark"] .table-action { color: #9db8ff; background: #203154; }
.lower-operation-panel[data-theme="dark"] .connect-action { color: #fff; background: var(--primary); }
.lower-operation-panel[data-theme="dark"] .table-action:disabled { color: #738098; background: #1b2639; }
.lower-operation-panel[data-theme="dark"] .table-action.danger-outline { color: #ff8996; background: #3b202d; }
.lower-operation-panel[data-theme="dark"] .device-status.online { color: #6de0b4; background: #173c35; }
.lower-operation-panel[data-theme="dark"] .device-status.offline { color: #b2bdce; background: #263247; }
.lower-operation-panel[data-theme="dark"] .theme-toggle .moon-icon { display: none; }
.lower-operation-panel[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
.table-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .32rem; }
.table-actions .table-action { margin: 0; white-space: nowrap; }
.checkbox-row { display: flex; align-items: center; gap: .65rem; font-weight: 700; }
.checkbox-row input { width: auto; }
.app-checklist { display: grid; max-height: 16rem; overflow-y: auto; gap: .45rem; padding: .75rem; border: 1px solid var(--line); border-radius: .7rem; background: #f8f9fc; }
.app-checklist label { display: flex; align-items: center; gap: .6rem; font-size: .86rem; }
.app-checklist input { width: auto; }
.install-progress { display: grid; gap: .55rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: #f8f9fc; }
.install-progress[hidden] { display: none; }
.install-progress > div { display: flex; justify-content: space-between; gap: 1rem; }
.install-progress progress { width: 100%; height: 1rem; accent-color: var(--primary); }
.install-progress p { margin: 0; font-size: .84rem; }
.install-provision-modal { width: min(43rem, calc(100% - 2rem)); padding: 1.25rem; }
.install-provision-form { gap: .8rem; }
.install-provision-form .modal-heading { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.install-provision-form .modal-heading h2 { font-size: 1.15rem; }
.install-file-field input[type="file"] { height: auto; padding: .3rem; color: var(--muted); background: var(--surface); }
.install-file-field input[type="file"]::file-selector-button { margin-right: .55rem; border: 0; border-radius: .35rem; padding: .4rem .55rem; color: var(--ink); background: #e9eef7; cursor: pointer; font-size: .68rem; font-weight: 750; }
.install-provision-form .install-progress { margin: 0; padding: .7rem; gap: .45rem; border-radius: .55rem; }
.install-provision-form .install-progress > div { font-size: .72rem; }
.install-provision-form .install-progress progress { height: .55rem; }
.install-provision-form .install-progress p { font-size: .68rem; }
.install-provision-form .form-error { min-height: 0; margin: 0; }
.modal[data-theme="dark"] .install-file-field input[type="file"] { background: #17243a; }
.modal[data-theme="dark"] .install-file-field input[type="file"]::file-selector-button { color: #e6eefb; background: #263650; }
.modal[data-theme="dark"] .install-progress { background: #17243a; }
.policy-provision-modal { width: min(46rem, calc(100% - 2rem)); padding: 1.25rem; }
.policy-provision-form { gap: .75rem; }
.policy-provision-form .modal-heading { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.policy-provision-form .modal-heading h2 { font-size: 1.15rem; }
.policy-card { display: grid; min-width: 0; padding: .7rem; gap: .55rem; border: 1px solid var(--line); border-radius: .7rem; background: #f8faff; }
.policy-card-heading { display: grid; min-width: 0; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.policy-card-heading > div { display: grid; gap: .08rem; }
.policy-card-heading strong { color: var(--ink); font-size: .75rem; }
.policy-card-heading small { color: var(--muted); font-size: .61rem; }
.policy-settings-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: .65rem; }
.policy-provision-form .app-checklist { max-height: 9rem; padding: .5rem; gap: .28rem; border-radius: .5rem; background: var(--surface); }
.policy-provision-form .app-checklist label { gap: .45rem; font-size: .68rem; }
.policy-provision-form .app-checklist input { width: .85rem; height: .85rem; }
.policy-card > label:not(.checkbox-row) { color: var(--ink); font-size: .65rem; font-weight: 800; }
.policy-card textarea { min-height: 7.2rem; padding: .55rem; border-radius: .48rem; font-size: .7rem; }
.policy-card > input { height: 2rem; padding: .35rem .55rem; border-radius: .45rem; font-size: .7rem; }
.policy-card .checkbox-row { gap: .4rem; font-size: .68rem; }
.policy-card .checkbox-row input { width: .9rem; height: .9rem; }
.policy-card #kiosk-pin-status { min-height: 1rem; margin: -.15rem 0 0; font-size: .6rem; line-height: 1.35; }
.policy-provision-form .form-error { min-height: 0; margin: 0; }
.modal[data-theme="dark"] .policy-card { background: #17243a; }
.modal[data-theme="dark"] .policy-provision-form .app-checklist { background: #111c31; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-heading h2 { margin-bottom: 0; }
.icon-button { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 1.7rem; }
.modal-actions { display: flex; margin-top: 1rem; justify-content: flex-end; gap: .7rem; }
.usb-provision-modal,
.agent-provision-modal { width: min(43rem, calc(100% - 2rem)); padding: 1.25rem; }
.usb-provision-form,
.agent-provision-form { gap: .85rem; }
.usb-provision-form .modal-heading,
.agent-provision-form .modal-heading { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.usb-provision-form .modal-heading h2,
.agent-provision-form .modal-heading h2 { font-size: 1.15rem; }
.provision-intro { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.45; }
.usb-fields-grid,
.agent-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.provision-field-card { display: grid; min-width: 0; padding: .75rem; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .55rem; border: 1px solid var(--line); border-radius: .7rem; background: #f8faff; }
.provision-field-card > div { display: grid; min-width: 0; gap: .28rem; }
.provision-field-card label { color: var(--ink); font-size: .76rem; font-weight: 800; }
.provision-field-card small { min-height: 1rem; color: var(--muted); font-size: .63rem; }
.provision-field-card select,
.provision-field-card input { height: 2.15rem; margin-top: .18rem; padding: .35rem .55rem; border-radius: .48rem; font-size: .72rem; }
.provision-step { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; color: white; background: var(--primary); font-size: .68rem; font-weight: 850; }
.usb-server-field { grid-column: 1 / -1; }
.usb-detection-status { display: flex; min-height: 2rem; padding: .48rem .65rem; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: .55rem; color: var(--muted); background: #f8faff; }
.usb-detection-status > span { width: .48rem; height: .48rem; flex: 0 0 auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 .2rem rgba(22,150,106,.12); }
.usb-detection-status[data-state="loading"] > span { background: var(--primary); animation: connection-pulse 1.8s infinite; }
.usb-detection-status[data-state="warning"] > span { background: #d79420; box-shadow: 0 0 0 .2rem rgba(215,148,32,.13); }
.usb-detection-status[data-state="error"] > span { background: var(--danger); box-shadow: 0 0 0 .2rem rgba(200,62,77,.13); }
.usb-detection-status p { margin: 0; font-size: .69rem; }
.usb-provision-form .form-error,
.agent-provision-form .form-error { min-height: 0; margin: 0; }
.provision-actions { margin-top: 0; padding-top: .15rem; }
.provision-actions .button { min-height: 2.05rem; padding: .4rem .65rem; border-radius: .4rem; font-size: .72rem; }
.agent-token-result:not([hidden]) { display: grid; gap: .8rem; }
.agent-token-result .modal-heading { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.agent-token-result .modal-heading h2 { font-size: 1.15rem; }
.credential-result-card { display: grid; padding: .8rem; gap: .3rem; border: 1px solid var(--line); border-radius: .7rem; background: #f8faff; }
.credential-result-card > span { color: var(--muted); font-size: .63rem; }
.credential-result-card > strong { margin-bottom: .35rem; font-size: .78rem; }
.credential-result-card .token-box { margin: .15rem 0 0; padding: .65rem; border-radius: .48rem; font-size: .68rem; }
.credential-note { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.device-info-modal { width: min(43rem, calc(100% - 2rem)); padding: 1.25rem; }
.device-info-form { gap: .8rem; }
.device-info-form .modal-heading { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.device-info-form .modal-heading h2 { font-size: 1.15rem; }
.device-info-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.device-info-fields label { display: grid; gap: .3rem; color: var(--ink); font-size: .68rem; font-weight: 800; }
.device-info-fields input { height: 2.1rem; padding: .35rem .55rem; border-radius: .45rem; font-size: .72rem; }
.device-info-fields input[readonly] { color: var(--muted); cursor: default; background: #eef2f7; }
.device-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.device-info-grid div { display: grid; min-width: 0; padding: .55rem .65rem; gap: .15rem; border: 1px solid var(--line); border-radius: .5rem; background: #f8faff; }
.device-info-grid .wide { grid-column: span 2; }
.device-info-grid span { color: var(--muted); font-size: .6rem; }
.device-info-grid strong { overflow: hidden; color: var(--ink); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.device-delete-confirmation { padding: .7rem; border: 1px solid rgba(200,62,77,.35); border-radius: .55rem; background: #fff2f4; }
.device-delete-confirmation strong { color: var(--danger); font-size: .75rem; }
.device-delete-confirmation p { margin: .25rem 0 .55rem; color: var(--muted); font-size: .66rem; line-height: 1.4; }
.device-delete-confirmation > div { display: flex; justify-content: flex-end; gap: .4rem; }
.device-release-confirmation { display: grid; padding: .7rem; gap: .4rem; border: 1px solid rgba(215,148,32,.4); border-radius: .55rem; background: #fff8e9; }
.device-release-confirmation[hidden] { display: none; }
.device-release-confirmation strong { color: #9b6813; font-size: .75rem; }
.device-release-confirmation p { margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.4; }
.device-release-confirmation label { color: var(--ink); font-size: .65rem; font-weight: 800; }
.device-release-confirmation select { height: 2.1rem; padding: .35rem .55rem; border-radius: .45rem; font-size: .7rem; }
.device-release-confirmation > div { display: flex; margin-top: .2rem; justify-content: flex-end; gap: .4rem; }
.device-delete-confirmation .button,
.device-release-confirmation .button,
.device-info-actions .button { min-height: 2.05rem; padding: .4rem .65rem; border-radius: .4rem; font-size: .7rem; }
.device-info-actions { display: grid; margin-top: 0; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: .45rem; }
.release-owner-action { color: #8a5a0e; background: #fff0c9; }
.release-owner-action:hover { background: #ffe4a3; }
.modal[data-theme="dark"] .device-info-fields input[readonly] { color: #91a0b8; background: #121e31; }
.modal[data-theme="dark"] .device-info-grid div { background: #17243a; }
.modal[data-theme="dark"] .device-delete-confirmation { border-color: rgba(255,105,121,.38); background: #351d29; }
.modal[data-theme="dark"] .device-release-confirmation { border-color: rgba(235,178,72,.38); background: #332a18; }
.modal[data-theme="dark"] .device-release-confirmation strong { color: #f2c66d; }
.modal[data-theme="dark"] .release-owner-action { color: #f2c66d; background: #3a301c; }
.modal[data-theme="dark"] .provision-field-card,
.modal[data-theme="dark"] .credential-result-card,
.modal[data-theme="dark"] .usb-detection-status { background: #17243a; }
.modal[data-theme="dark"] .token-box { color: #b9ccff; border-color: #3b5278; background: #1b2942; }
.modal[data-theme="dark"] .usb-detection-status > span { box-shadow: 0 0 0 .2rem rgba(72,214,165,.13); }
.token-box { display: block; margin: 1rem 0; padding: 1rem; overflow-wrap: anywhere; border: 1px solid #b9c8ec; border-radius: .7rem; color: #173a8c; background: #f1f5ff; user-select: all; }
.session-state-panel { display: grid; margin-top: 1.2rem; padding: 1rem; gap: .7rem; border: 1px solid var(--line); border-radius: .8rem; background: #f8f9fc; }
.session-state-panel .device-status { width: max-content; }
.session-state-panel p { margin: 0; }
.session-id { color: var(--muted); overflow-wrap: anywhere; }
.device-status.requested { color: #765414; background: #fff3d4; }
.device-status.connecting { color: #1748bc; background: #e3eafe; }
.device-status.connected { color: #08704c; background: #dff7ed; }
.device-status.closed { color: #616b7d; background: #edf0f4; }
.device-status.error { color: #9d2431; background: #fde6e8; }

.remote-page { min-height: 100vh; color: #edf4ff; background: #09111f; }
.remote-topbar { display: grid; min-height: 4.6rem; padding: .75rem clamp(1rem, 3vw, 2rem); grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; border-bottom: 1px solid #243047; background: #101a2c; }
.remote-topbar .button.ghost { width: max-content; color: #dce7f7; background: #202c42; }
.remote-device-heading { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.remote-device-heading > div { display: grid; }
.remote-device-heading span:not(.brand-mark) { color: #8fa0ba; font-size: .76rem; }
.remote-status-summary { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.remote-status-summary .muted { color: #9cacbf; }
.remote-workspace { display: grid; min-height: calc(100vh - 4.6rem); grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); }
.screen-panel { display: grid; min-width: 0; padding: clamp(1rem, 2vw, 2rem); grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-content: center; gap: .8rem; background: radial-gradient(circle at center, #17243b 0, #09111f 66%); }
.video-shell { position: relative; display: flex; width: 100%; height: calc(100vh - 10rem); min-height: 28rem; overflow: hidden; align-items: center; justify-content: center; border: 1px solid #2b3850; border-radius: 1.1rem; background: #02050a; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.video-shell video, .video-shell canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #02050a; }
.video-shell canvas[hidden] { display: none; }
.video-shell.canvas-rendering video { position: absolute; width: 2px; height: 2px; opacity: .001; pointer-events: none; }
.video-shell.remote-input-enabled video, .video-shell.remote-input-enabled canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 4L20 20M20 4L4 20' fill='none' stroke='%2336c5df' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, crosshair;
  touch-action: none;
  user-select: none;
}
.video-shell.remote-input-enabled.remote-input-active video, .video-shell.remote-input-enabled.remote-input-active canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 4L20 20M20 4L4 20' fill='none' stroke='%23ffb020' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, crosshair;
}
.video-placeholder { position: absolute; inset: 0; display: flex; padding: 2rem; align-items: center; flex-direction: column; justify-content: center; text-align: center; color: #dce7f7; background: #070c15; }
.video-placeholder[hidden] { display: none; }
.video-placeholder span { max-width: 28rem; margin-top: .55rem; color: #8190a8; font-size: .88rem; line-height: 1.5; }
.connection-pulse { width: 1.1rem; height: 1.1rem; margin-bottom: 1.4rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(56, 198, 217, .5); animation: connection-pulse 1.8s infinite; }
@keyframes connection-pulse { 70% { box-shadow: 0 0 0 1.1rem rgba(56, 198, 217, 0); } 100% { box-shadow: 0 0 0 0 rgba(56, 198, 217, 0); } }
.remote-toolbar { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: .28rem; }
.remote-toolbar .button.ghost, .remote-toolbar .button.danger { color: #aebbd0; background: transparent; }
.remote-toolbar .button.danger { color: #e55261; }
.remote-toolbar .input-control:disabled { cursor: not-allowed; opacity: .45; }
.icon-control { position: relative; display: grid; width: 2.4rem; height: 2.4rem; padding: 0; place-items: center; border: 0; border-radius: 0; box-shadow: none; }
.icon-control svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-control.danger svg { fill: currentColor; stroke: none; }
.icon-control:not(:disabled):hover { color: #fff; background: transparent; transform: scale(1.1); box-shadow: none; }
.icon-control.danger:not(:disabled):hover { color: #ff6d79; }
.icon-control::after { position: absolute; z-index: 5; right: calc(100% + .6rem); padding: .38rem .55rem; border: 1px solid #2b3850; border-radius: .45rem; color: #e8f0fc; background: #151f31; content: attr(data-tooltip); font-size: .68rem; font-weight: 700; opacity: 0; pointer-events: none; transform: translateX(.25rem); transition: .15s ease; white-space: nowrap; }
.icon-control:hover::after, .icon-control:focus-visible::after { opacity: 1; transform: translateX(0); }
.toolbar-divider { width: 1.65rem; height: 1px; margin: .15rem 0; background: #2b3850; }
.input-card strong { color: #8be9fd; }
.remote-sidebar { padding: 2rem; border-left: 1px solid #243047; background: #101a2c; }
.remote-sidebar h1 { margin-bottom: .7rem; font-size: 2rem; }
.remote-sidebar .muted { color: #93a2b9; line-height: 1.55; }
.remote-details { display: grid; margin: 2rem 0; gap: 0; }
.remote-details div { display: grid; padding: .9rem 0; grid-template-columns: 1fr 1.2fr; gap: 1rem; border-bottom: 1px solid #27334a; }
.remote-details dt { color: #8190a8; font-size: .78rem; }
.remote-details dd { margin: 0; overflow-wrap: anywhere; color: #e5edf9; font-size: .82rem; text-align: right; }
.privacy-card { padding: 1rem; border: 1px solid #294263; border-radius: .8rem; background: #14243b; }
.privacy-card strong { color: #77d9e6; }
.privacy-card p { margin: .5rem 0 0; color: #a3b2c8; font-size: .8rem; line-height: 1.5; }
.remote-error { margin-top: 1.2rem; color: #ff8994; }
.embedded-remote .remote-topbar { display: none; }
.embedded-remote .remote-workspace { min-height: 100vh; grid-template-columns: minmax(0, 1fr); }
.embedded-remote .remote-sidebar, .embedded-remote .auxiliary-control { display: none; }
.embedded-remote .screen-panel { padding: .5rem; grid-template-columns: auto auto; gap: .35rem; background: #f3f6fb; }
.embedded-remote .video-shell { width: auto; height: calc(100vh - 1rem); min-height: 0; max-width: calc(100vw - 3.5rem); aspect-ratio: var(--remote-video-aspect, 9 / 16); border-color: #d7deea; border-radius: .65rem; box-shadow: 0 10px 32px rgba(15,27,49,.16); }
.embedded-remote .remote-toolbar { padding: 0 .2rem; }
.embedded-remote .remote-toolbar .button.ghost { color: #52617a; }
.embedded-remote .remote-toolbar .button.ghost:not(:disabled):hover { color: var(--primary); }
.embedded-remote .remote-toolbar .button.danger { color: #d83b4d; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 800px) {
  .login-shell { grid-template-columns: 1fr; }
  .brand-panel { min-height: 38vh; }
  .login-card { min-height: 62vh; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .page-heading, .table-toolbar { align-items: stretch; flex-direction: column; }
  .heading-actions { align-items: stretch; flex-direction: column; }
  .status-card { min-width: 0; }
  .remote-topbar { grid-template-columns: auto 1fr; }
  .remote-device-heading { justify-content: flex-start; }
  .remote-status-summary { display: none; }
  .remote-workspace { grid-template-columns: 1fr; }
  .video-shell { height: 68vh; min-height: 22rem; }
  .remote-sidebar { border-top: 1px solid #243047; border-left: 0; }
  .operations-map-card { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .map-summary { display: block; min-height: 0; padding: .4rem; }
  .unlocated-devices { display: none; }
  .operations-tabs { grid-template-columns: 1fr; }
  .tabs-brand, .tabs-account > span { display: none; }
  .tabs-account { display: block; }
  .tabs-account .logout-tab { width: 100%; }
  .tabs-account .logout-tab span { display: none; }
}

@media (max-width: 620px) {
  .usb-fields-grid, .agent-fields-grid { grid-template-columns: 1fr; }
  .usb-server-field { grid-column: auto; }
  .device-info-fields, .device-info-grid { grid-template-columns: 1fr; }
  .device-info-grid .wide { grid-column: auto; }
  .device-info-actions { grid-template-columns: 1fr 1fr; }
  .device-info-actions > span { display: none; }
  .policy-settings-grid { grid-template-columns: 1fr; }
  .screen-panel { grid-template-columns: 1fr; }
  body:not(.embedded-remote) .remote-toolbar { flex-direction: row; flex-wrap: wrap; }
  .embedded-remote .screen-panel { grid-template-columns: auto auto; }
  .embedded-remote .remote-toolbar { flex-direction: column; flex-wrap: nowrap; }
  .toolbar-divider { width: 1px; height: 1.65rem; margin: 0 .15rem; }
  .icon-control::after { display: none; }
}

@media (max-width: 520px) {
  .account-area > div { display: none; }
  .dashboard-content { padding-top: 2rem; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics article { padding: 1rem; }
  .operations-shell { padding: 0; }
  .operations-tabs { padding: .2rem; gap: .15rem; }
  .operation-tab { height: 2.45rem; padding: .2rem; flex-direction: column; gap: .05rem; font-size: .58rem; }
  .lower-operation-panel .table-toolbar .eyebrow,
  .lower-operation-panel .table-toolbar .muted { display: none; }
}