:root {
    --bg: #02060b;
    --surface: #07111d;
    --surface-2: #0a1726;
    --surface-3: #0d1d2e;
    --line: #18324c;
    --line-bright: #1d6da5;
    --text: #f4f9ff;
    --muted: #8095aa;
    --blue: #1f9cff;
    --blue-2: #2571ff;
    --cyan: #27d5e8;
    --green: #35dc83;
    --red: #ff4f68;
    --orange: #ff9f32;
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 13px;
    --shadow: 0 24px 70px rgba(0, 0, 0, .42);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    color: var(--text);
    background:
        radial-gradient(circle at 72% -10%, rgba(26, 117, 196, .22), transparent 34%),
        radial-gradient(circle at 12% 100%, rgba(11, 83, 139, .13), transparent 30%),
        var(--bg);
    font-size: 15px;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, .button, a { -webkit-tap-highlight-color: transparent; }

.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
    position: sticky; top: 0; height: 100vh; padding: 28px 22px 22px;
    display: flex; flex-direction: column;
    background: rgba(3, 8, 14, .93); border-right: 1px solid #11263b;
    backdrop-filter: blur(24px);
}
.brand { display: flex; gap: 13px; align-items: center; }
.brand.centered { justify-content: center; }
.brand-mark {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
    background: linear-gradient(145deg, #20b9ff, #1764ff); color: white;
    box-shadow: 0 12px 34px rgba(27, 134, 255, .35), inset 0 1px rgba(255,255,255,.25);
    font-weight: 900; font-size: 19px; letter-spacing: -.05em;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: -.02em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.sidebar nav { display: grid; gap: 7px; margin-top: 46px; }
.sidebar nav a {
    display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px;
    color: #91a5b9; border: 1px solid transparent; transition: .18s ease;
}
.sidebar nav a:hover { color: #dceeff; background: #0b1623; transform: translateX(2px); }
.sidebar nav a.active {
    color: white; background: linear-gradient(135deg, #102945, #0b1b2d);
    border-color: #1c5d91; box-shadow: inset 3px 0 var(--blue);
}
.nav-icon { width: 24px; color: #4cb9ff; text-align: center; font-size: 18px; }
.sidebar-app-tools {
    --sidebar-tool-height: 78px;
    width: 100%; margin-top: auto; display: grid; gap: 9px; min-width: 0;
}
.authenticator-card {
    overflow: hidden; margin: 0; padding: 0 !important; border-radius: 17px !important;
    border: 1px solid #245477 !important;
    background: linear-gradient(145deg, #10243a 0%, #07121f 58%, #040b13 100%) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.46), 0 0 24px rgba(39,213,232,.09), inset 0 1px rgba(255,255,255,.1) !important;
}
.authenticator-card > summary {
    height: var(--sidebar-tool-height); min-height: var(--sidebar-tool-height);
    padding: 10px 34px 10px 11px; display: grid; grid-template-columns: 38px minmax(0, 1fr);
    align-items: center; gap: 8px; text-align: center;
}
.authenticator-card > summary::after { top: 13px; right: 13px; }
.authenticator-card > summary span:nth-child(2) { min-width: 0; width: 100%; }
.authenticator-card > summary small,
.authenticator-card > summary strong { display: block; }
.authenticator-card > summary small {
    color: var(--cyan); font-size: 8px; font-weight: 850; letter-spacing: .16em;
}
.authenticator-card > summary strong { margin-top: 4px; font-size: 14px; line-height: 1.2; }
.authenticator-icon {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 11px; color: #dffbff; font-size: 19px;
    background: linear-gradient(145deg, #1588b8, #0b426c);
    box-shadow: inset 0 1px rgba(255,255,255,.24), 0 7px 16px rgba(0,0,0,.3);
}
.authenticator-body {
    padding: 0 12px 14px; text-align: center;
}
.authenticator-body img {
    display: block; width: min(180px, 100%); height: auto; aspect-ratio: 1;
    margin: 0 auto; padding: 7px; border-radius: 13px; background: #fff;
}
.authenticator-body p {
    margin: 10px 3px 5px; color: #c8d8e7; font-size: 10px; line-height: 1.4;
}
.authenticator-body small {
    display: block; color: var(--muted); font-size: 8px; line-height: 1.35;
}
.sidebar-app-card {
    overflow: hidden; border-radius: 17px !important;
    border: 1px solid #245477 !important;
    background: linear-gradient(145deg, #10243a 0%, #07121f 58%, #040b13 100%) !important;
    box-shadow:
        0 16px 34px rgba(0,0,0,.46),
        0 0 24px rgba(31,156,255,.08),
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 -12px 28px rgba(0,0,0,.2) !important;
}
.sidebar-app-tools .distribution-body { max-height: 42vh; overflow-y: auto; }
.sidebar-app-tools .sidebar-download {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 8px; text-align: center;
    width: 100%; min-width: 0; height: var(--sidebar-tool-height); min-height: var(--sidebar-tool-height); padding: 10px 13px;
    border-radius: 17px; font-size: 15px; line-height: 1; white-space: nowrap;
    box-shadow: 0 16px 34px rgba(0,0,0,.46), 0 0 24px rgba(31,156,255,.16), inset 0 1px rgba(255,255,255,.18);
}
.sidebar-download .download-arrow {
    font-size: 27px; font-weight: 900; line-height: .8;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.28));
}
.sidebar-download .download-label { min-width: 0; white-space: nowrap; grid-column: 2; }
.sidebar-app-tools .sidebar-download.disabled { pointer-events: none; opacity: .42; }
.sidebar-app-tools + .sidebar-bottom { margin-top: 10px; }
.sidebar-bottom {
    width: 100%; min-width: 0; min-height: 112px; margin-top: auto; padding: 16px; display: grid; align-content: center; gap: 4px; border-radius: 17px;
    background: linear-gradient(145deg, #10243a 0%, #07121f 58%, #040b13 100%); border: 1px solid #245477;
    box-shadow: 0 16px 34px rgba(0,0,0,.46), 0 0 24px rgba(31,156,255,.08), inset 0 1px 0 rgba(255,255,255,.11);
}
.sidebar-bottom span { font-weight: 750; }
.sidebar-bottom small { color: var(--muted); }
.sidebar-bottom a { color: #53b9ff; margin-top: 10px; font-size: 13px; }

main { min-width: 0; padding: 34px 40px 52px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.topbar h1 { margin: 0; font-size: clamp(29px, 3vw, 42px); line-height: 1.05; letter-spacing: -.045em; }
.topbar-subtitle { margin: 9px 0 0; color: var(--muted); font-size: 14px; }
.eyebrow { margin: 0 0 8px; color: #57b9ff; font-size: 10px; letter-spacing: .2em; font-weight: 850; }
.live-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px;
    background: #092017; border: 1px solid #176640; color: #8de9b6; font-size: 12px; font-weight: 700;
}
.live-pill i, .status i { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }

.panel {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(13, 26, 42, .96), rgba(5, 11, 18, .97));
    box-shadow: var(--shadow); padding: 22px;
}
.panel h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.muted { color: var(--muted); }
.alert { padding: 13px 16px; border-radius: 11px; margin-bottom: 16px; }
.alert.error { color: #ff9cad; background: #34121a; border: 1px solid #72293a; }

.control-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 17px; }
.session-panel { position: relative; overflow: hidden; }
.session-panel::after {
    content: ""; position: absolute; width: 240px; height: 240px; right: -95px; top: -125px;
    border-radius: 50%; background: rgba(31, 156, 255, .11); filter: blur(2px); pointer-events: none;
}
.batch-form { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .78fr auto; gap: 10px; }
input, select {
    width: 100%; min-width: 0; color: white; background: #040c15; border: 1px solid #203a55;
    border-radius: 11px; padding: 12px 13px; outline: none; transition: .18s ease;
}
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,156,255,.15); }
input::placeholder { color: #54687d; }
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 11px; padding: 11px 17px;
    color: white; font-weight: 800; cursor: pointer; transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button.primary { background: linear-gradient(135deg, #179efb, #2465ff); box-shadow: 0 9px 25px rgba(27,112,247,.32); }
.button.blue { background: linear-gradient(135deg, #168fdc, #1b69d8); border-color: #2d9cef; }
.button.ghost { background: #0b1521; border-color: #2a4158; color: #dce9f5; }
.button.compact { padding: 8px 13px; }
.button.wide { width: 100%; }
.release-panel { padding: 0; overflow: hidden; }
.release-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 26px; }
.release-panel .release-meta p { margin: 7px 0 0; }
.release-version { color: #78c7ff; }
.release-download { min-height: 48px; padding-inline: 22px; white-space: nowrap; }
.release-warning { display: flex; align-items: center; gap: 18px; margin: 0 26px 20px; padding: 15px 17px; border: 1px solid #a83b4c; border-radius: 13px; background: linear-gradient(135deg, #35111a, #210b11); color: #ffb3be; }
.release-warning strong { flex: 0 0 auto; color: #ff667c; }
.release-warning span { line-height: 1.45; }
.release-upload { padding: 22px 26px 25px; border-top: 1px solid var(--line); background: rgba(3, 10, 17, .54); }
.upload-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.upload-heading h3 { margin: 0; font-size: 16px; }
.upload-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.upload-form { display: grid; grid-template-columns: minmax(150px, .38fr) minmax(330px, 1fr) auto; gap: 12px; align-items: end; }
.upload-field { display: grid; gap: 8px; min-width: 0; }
.upload-field > span { color: #a9bdd0; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.upload-field input { min-height: 50px; padding: 11px 13px; font-size: 14px; }
.file-field input[type="file"] { padding: 6px 8px; color: #b9cad9; cursor: pointer; }
.file-field input[type="file"]::file-selector-button { height: 36px; margin-right: 12px; padding: 0 15px; color: white; font-weight: 800; border: 1px solid #2a79b5; border-radius: 8px; background: #102b45; cursor: pointer; }
.upload-button { min-height: 50px; padding-inline: 22px; white-space: nowrap; }
.upload-button:disabled { cursor: wait; opacity: .68; transform: none; }
.upload-progress { height: 8px; margin-top: 16px; overflow: hidden; border: 1px solid #1e3c57; border-radius: 99px; background: #030a11; }
.upload-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #148cff, #27d5e8); box-shadow: 0 0 14px rgba(39,213,232,.5); transition: width .16s ease; }
.upload-message { min-height: 18px; margin: 10px 0 0; color: #8fa5b9; font-size: 12px; }
.upload-message.success { color: var(--green); }
.upload-message.error { color: #ff7b90; }
.upload-help { margin: 13px 0 0; color: #6f879d; font-size: 11px; }
.upload-help strong { color: #9dd5ff; }

.workspace { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 17px; align-items: start; }
.batch-list { padding: 14px; max-height: calc(100vh - 285px); overflow: auto; }
.batch-list .panel-title { padding: 8px 8px 4px; }
.batch-list .panel-title span { color: var(--muted); font-size: 12px; }
.batch-row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 14px 13px; margin-top: 5px; border-radius: 12px; color: #c6d5e3;
    border: 1px solid transparent; transition: .16s ease;
}
.batch-row:hover { background: #0b1928; }
.batch-row.selected { background: linear-gradient(135deg, #102a45, #0b1c2d); border-color: #246b9f; color: white; }
.batch-row strong, .batch-row small { display: block; }
.batch-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 185px; }
.batch-row small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.batch-count { padding: 6px 8px; border-radius: 9px; background: #06111d; color: #6fc2ff; font-weight: 800; font-size: 12px; }
.device-panel { min-height: 500px; }
.batch-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.batch-head > div:first-child { margin-right: auto; }
.batch-head h2 { font-size: 25px; }
.batch-head .muted { margin: 7px 0 0; font-size: 12px; }
.batch-code { min-width: 155px; padding: 11px 17px; text-align: center; border-radius: 14px; background: #061a2a; border: 1px solid #2177ae; box-shadow: inset 0 0 22px rgba(25,136,213,.1); }
.batch-code small, .batch-code strong { display: block; }
.batch-code small { color: #6fbce9; font-size: 9px; letter-spacing: .18em; }
.batch-code strong { margin-top: 4px; color: white; font-size: 26px; letter-spacing: .17em; }
.start-device-button { white-space: nowrap; }

.start-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0, #0b2946 0, #050c16 48%, #02060b 100%); }
.start-card { width: min(680px, 100%); padding: 42px; border: 1px solid #244b6d; border-radius: 28px; background: linear-gradient(145deg, rgba(13,29,48,.98), rgba(4,11,20,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.05); }
.start-card .brand { justify-content: flex-start; margin-bottom: 34px; }
.start-card h1 { margin: 6px 0 22px; font-size: clamp(36px, 7vw, 58px); letter-spacing: -.04em; }
.current-session { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid #1d699a; border-radius: 16px; background: #071a2b; }
.current-session small { color: #62bfff; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.current-session strong { font-size: 21px; }
.start-steps { display: grid; gap: 12px; margin: 25px 0; color: #b6c7d9; }
.start-steps span { display: flex; align-items: center; gap: 12px; }
.start-steps b { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; color: white; background: #167dec; }
.launch-download { display: flex; min-height: 62px; font-size: 18px; }
.start-note { margin: 16px 0 0; color: #8296aa; text-align: center; font-size: 12px; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
.summary-strip span { position: relative; padding: 14px 15px; border-radius: 12px; color: var(--muted); background: #07111c; border: 1px solid #172b3e; font-size: 11px; }
.summary-strip span::before { content: ""; display: block; width: 23px; height: 3px; margin-bottom: 11px; border-radius: 9px; background: #476176; }
.summary-strip span:nth-child(2)::before { background: var(--blue); }
.summary-strip span:nth-child(3)::before { background: var(--green); }
.summary-strip span:nth-child(4)::before { background: var(--red); }
.summary-strip strong { display: block; margin-bottom: 4px; color: white; font-size: 25px; line-height: 1; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 13px; }
.device-card {
    position: relative; overflow: hidden; min-height: 290px; padding: 18px; border-radius: 16px;
    border: 1px solid #20384e; background: linear-gradient(155deg, #0d1c2c, #06101a); transition: .2s ease;
}
.device-card:hover { transform: translateY(-2px); border-color: #2d6c99; box-shadow: 0 18px 35px #0008; }
.device-card::after { content: ""; position: absolute; inset: auto -70px -85px auto; width: 170px; height: 170px; border-radius: 50%; background: rgba(31,156,255,.06); pointer-events: none; }
.device-card.testing { border-color: #1f80b9; box-shadow: inset 0 0 38px rgba(12,106,166,.12); }
.device-card.issue { border-color: #753044; box-shadow: inset 0 0 38px rgba(255,79,104,.08); }
.device-card.repaired { border-color: #856323; box-shadow: inset 0 0 38px rgba(255,180,79,.08); }
.device-card.parts { border-color: #70468c; box-shadow: inset 0 0 38px rgba(213,91,255,.08); }
.device-card.supplier_return { border-color: #28647c; box-shadow: inset 0 0 38px rgba(55,194,240,.08); }
.device-card.completed { border-color: #226341; }
.device-top { display: flex; justify-content: space-between; align-items: center; }
.device-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #58c2ff; background: #102b43; font-size: 20px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 99px; background: #121d29; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.status.testing { color: #6dcaff; }.status.testing i { background: #35b7ff; }
.status.completed { color: #69e5a0; }.status.completed i { background: var(--green); }
.status.issue { color: #ff8ea1; }.status.issue i { background: var(--red); box-shadow: 0 0 12px var(--red); }
.status.repaired { color: #ffbe63; }.status.repaired i { background: #ffb44f; box-shadow: 0 0 12px #ffb44f; }
.status.parts { color: #e4a8ff; }.status.parts i { background: #d55bff; box-shadow: 0 0 12px #d55bff; }
.status.supplier_return { color: #76d9fa; }.status.supplier_return i { background: #37c2f0; box-shadow: 0 0 12px #37c2f0; }
.status.connected { color: #83caff; }.status.connected i { background: var(--blue); }
.status.offline { color: #8995a1; }.status.offline i { background: #667482; box-shadow: none; }
.device-card h3 { margin: 17px 0 5px; font-size: 21px; letter-spacing: -.03em; }
.device-card > p { min-height: 34px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.device-card dl { margin: 14px 0; }
.device-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #1b2c3d; }
.device-card dt { color: var(--muted); }.device-card dd { margin: 0; text-align: right; font-weight: 650; }
.progress { height: 6px; overflow: hidden; border-radius: 9px; background: #192838; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 12px rgba(39,213,232,.4); }
.progress-label { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 11px; }
.device-card > a { position: relative; z-index: 1; display: inline-flex; margin-top: 13px; color: #5bbdff; font-weight: 750; font-size: 12px; }
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty.large { padding: 140px 20px; }

.report-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.report-toolbar .search { display: flex; gap: 9px; flex: 1; max-width: 680px; }
.report-total { color: var(--muted); font-size: 12px; }
.report-list { overflow: hidden; }
.report-list table { width: 100%; border-collapse: collapse; }
.report-list th { padding: 12px 14px; color: #6f8498; font-size: 9px; letter-spacing: .14em; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.report-list td { padding: 15px 14px; border-bottom: 1px solid #15283a; }
.report-list tbody tr { transition: background .15s ease; }.report-list tbody tr:hover { background: #0c1927; }
.report-list td strong, .report-list td small { display: block; }
.report-list td small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.serial { color: #93cfff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.grade-chip { display: inline-grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #ffd293; background: #2a1d0e; border: 1px solid #69451c; font-weight: 900; }

.report-body { padding: 34px; }
.report-page { max-width: 1180px; margin: auto; }
.report-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.report-nav-actions { display: flex; align-items: center; gap: 10px; }
.sales-label-dialog { width: min(960px, calc(100vw - 32px)); padding: 22px; color: var(--text); border: 1px solid #277eba; border-radius: 22px; background: linear-gradient(150deg, #0d1d2e, #050d16); box-shadow: 0 30px 100px rgba(0,0,0,.75); }
.sales-label-dialog::backdrop { background: rgba(0,4,8,.8); backdrop-filter: blur(8px); }
.sales-label-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.sales-label-dialog-head h2 { margin: 5px 0 0; font-size: 24px; }
.sales-label-preview { width: 100%; aspect-ratio: 89 / 36; padding: 2.2% 2.5%; box-sizing: border-box; overflow: hidden; display: grid; grid-template-rows: auto 1fr 1fr; gap: 2%; color: #111; border: 1px solid #d6d6d6; border-radius: 12px; background: #fff; }
.sales-label-title, .sales-label-code > div { width: 100%; text-align: center; font: 500 clamp(11px,1.8vw,16px)/1 system-ui,sans-serif; white-space: nowrap; }
.sales-label-row { display: grid; grid-template-columns: 13% 1fr 13%; align-items: center; min-height: 0; }
.sales-label-code { height: 100%; min-height: 0; display: grid; grid-template-rows: 1fr auto; gap: 2px; align-items: end; }
.sales-label-code svg { width: 100%; height: 100%; min-height: 0; }
.sales-label-row:first-of-type .sales-label-code > div { transform: translateY(clamp(5px,.8vw,10px)); }
.sales-label-ce { align-self: center; justify-self: center; max-width: 96%; font: 500 clamp(36px,7vw,66px)/1 Arial,sans-serif; letter-spacing: -.12em; white-space: nowrap; }
.sales-label-batch { align-self: end; justify-self: end; font: 500 clamp(12px,2.4vw,22px)/1 system-ui,sans-serif; }
.sales-label-controls { display: grid; gap: 10px; margin-top: 18px; }
.sales-label-controls label { display: grid; gap: 7px; color: #9fb3c6; font-size: 12px; font-weight: 800; }
.sales-label-controls input { width: 100%; padding: 12px 14px; box-sizing: border-box; }
.sales-label-controls > div { display: flex; justify-content: flex-end; gap: 10px; }
.sales-label-error { min-height: 18px; margin: 0; color: #ff7b88; font-size: 12px; }
.sales-label-controls .button:disabled { cursor: not-allowed; opacity: .4; }
.back { color: #5abaff; font-weight: 700; }
.report-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 25px; margin: 0 0 16px; padding: 32px; border-radius: var(--radius-xl); border: 1px solid #1e5d8d; background: linear-gradient(140deg, #102c48, #07121f 70%); box-shadow: var(--shadow); }
.report-hero::after { content: ""; position: absolute; right: -100px; top: -120px; width: 320px; height: 320px; border-radius: 50%; border: 55px solid rgba(37,157,255,.07); }
.report-hero h1 { position: relative; margin: 0 0 7px; font-size: clamp(32px, 5vw, 50px); letter-spacing: -.05em; }
.report-hero p { position: relative; margin: 0; color: #9bb2c7; }
.report-outcome { position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; }
.grade { min-width: 112px; padding: 13px 18px; border-radius: 14px; color: #69bfff; background: #071727; border: 1px solid #2889ca; font-size: 11px; font-weight: 800; }
.grade strong { display: block; margin-top: 3px; color: white; font-size: 31px; }
.outcome-badge { padding: 13px 18px; border-radius: 14px; font-weight: 850; }
.outcome-badge.completed { color: #79e5aa; background: #092419; border: 1px solid #236944; }
.outcome-badge.issue { color: #ff93a4; background: #2c1118; border: 1px solid #7a2c3e; }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 16px; }
.spec-grid div { padding: 17px; border-radius: 14px; background: linear-gradient(145deg, #0c1927, #07101a); border: 1px solid var(--line); }
.spec-grid small, .spec-grid strong { display: block; }.spec-grid small { margin-bottom: 7px; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.spec-grid strong { font-size: 16px; }
.insight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 16px; }
.insight-card { padding: 18px; border-radius: 14px; background: #08131f; border: 1px solid #1b344a; }
.insight-card small, .insight-card strong { display: block; }.insight-card small { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.insight-card strong { margin-top: 7px; color: #64c4ff; font-size: 22px; }
.sku { margin-bottom: 16px; border-color: #3b3d6b; background: linear-gradient(145deg, #15172c, #090d18); }.sku h2 { line-height: 1.45; font-size: 19px; }
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.result-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 59px; padding: 13px 15px; background: #07111b; }
.result-row strong { color: #5fe398; text-align: right; }.result-row.result-failed strong { color: var(--red); }.result-row.result-failed { box-shadow: inset 3px 0 var(--red); }.result-row.result-pending strong { color: var(--orange); }
.report-footer { display: flex; justify-content: space-between; margin: 18px 3px; color: var(--muted); font-size: 12px; }

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-card { width: min(430px, 100%); padding: 38px; border-radius: 25px; background: linear-gradient(145deg, #0c1928, #050b12); border: 1px solid #1c3a56; box-shadow: 0 35px 100px #000c; }
.login-card h1 { margin: 30px 0 7px; text-align: center; font-size: 31px; letter-spacing: -.04em; }.login-card > p { margin: 0 0 27px; text-align: center; color: var(--muted); }
.login-card form { display: grid; gap: 15px; }.login-card label { display: grid; gap: 7px; color: #aebdcb; font-size: 12px; }

@media (max-width: 1180px) {
    .control-grid, .workspace { grid-template-columns: 1fr; }
    .batch-list { max-height: none; display: flex; overflow-x: auto; align-items: center; gap: 7px; }
    .batch-list .panel-title { min-width: 100px; margin: 0; }.batch-row { min-width: 230px; margin: 0; }
}
@media (max-width: 860px) {
    .shell { display: block; }.sidebar { position: static; width: 100%; height: auto; padding: 18px; flex-direction: row; align-items: center; gap: 20px; }
    .sidebar nav { margin: 0 0 0 auto; display: flex; }.sidebar-app-tools, .sidebar-bottom { display: none; }.sidebar nav a { padding: 10px; }.sidebar nav a span:last-child { display: none; }
    main { padding: 25px 18px 42px; }.batch-form { grid-template-columns: 1fr; }.upload-form { grid-template-columns: minmax(135px, .4fr) minmax(260px, 1fr); }.upload-button { grid-column: 1 / -1; }
    .summary-strip { grid-template-columns: 1fr 1fr; }.spec-grid { grid-template-columns: 1fr 1fr; }.insight-grid { grid-template-columns: 1fr 1fr; }
    .report-list { overflow-x: auto; }.report-list table { min-width: 760px; }
}
@media (max-width: 590px) {
    .brand small { display: none; }.topbar { align-items: flex-start; }.topbar .live-pill { display: none; }
    .release-header, .upload-heading, .release-warning { align-items: flex-start; flex-direction: column; }.release-download { width: 100%; }.release-warning { gap: 5px; }.upload-form { grid-template-columns: 1fr; }.upload-button { grid-column: auto; }.batch-head { align-items: flex-start; flex-wrap: wrap; }.batch-code { order: 3; width: 100%; }
    .summary-strip, .spec-grid, .insight-grid, .result-grid { grid-template-columns: 1fr; }.report-body { padding: 15px; }.report-hero { align-items: flex-start; flex-direction: column; }.report-outcome { width: 100%; }.grade, .outcome-badge { flex: 1; }
}

@media print {
    :root { color-scheme: light; }.report-body { padding: 0; background: white; color: #111; }.report-nav { display: none; }.panel, .report-hero, .spec-grid div, .insight-card, .result-row { box-shadow: none; background: white; color: #111; border-color: #ccd3da; }.report-hero p, .muted, .spec-grid small, .insight-card small { color: #555; }
}
@media print {
    body.sales-label-printing { width: 89mm; height: 36mm; margin: 0; padding: 0; background: #fff; }
    body.sales-label-printing .report-page { width: 89mm; height: 36mm; max-width: none; margin: 0; }
    body.sales-label-printing .report-page > :not(.sales-label-dialog) { display: none !important; }
    body.sales-label-printing .sales-label-dialog { position: static; display: block; width: 89mm; height: 36mm; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
    body.sales-label-printing .sales-label-dialog-head, body.sales-label-printing .sales-label-controls { display: none !important; }
    body.sales-label-printing .sales-label-preview { width: 89mm; height: 36mm; padding: 2mm 2.2mm; border: 0; border-radius: 0; }
    body.sales-label-printing .sales-label-title, body.sales-label-printing .sales-label-code > div { font-size: 7pt; }
    body.sales-label-printing .sales-label-ce { font-size: 27pt; }
    body.sales-label-printing .sales-label-batch { font-size: 8pt; }
}
.issue-documentation{grid-column:1/-1;margin:-3px 0 10px;padding:14px 16px;border:1px solid rgba(255,112,112,.28);border-radius:14px;background:rgba(255,255,255,.025)}
.issue-documentation p{margin:0;color:#cbd9e8;line-height:1.55;white-space:normal}
.issue-photos{display:flex;gap:10px;overflow-x:auto;margin-top:12px;padding-bottom:3px}
.issue-photos img{width:180px;height:126px;flex:0 0 auto;object-fit:cover;border-radius:11px;border:1px solid rgba(255,255,255,.16)}
@media print {
    .issue-documentation{background:#fff;color:#111;border-color:#ccd3da;break-inside:avoid}
    .issue-documentation p{color:#333}
    .issue-photos{overflow:visible;flex-wrap:wrap}
}

/* Operations workspace — dense, scan-first dashboard */
.dashboard-body { background: #03080e; }
.dashboard-body .shell { grid-template-columns: 218px minmax(0, 1fr); }
.dashboard-body .sidebar { padding: 20px 14px 16px; }
.dashboard-body .brand { gap: 10px; padding: 0 5px; }
.dashboard-body .brand-mark { width: 42px; height: 42px; border-radius: 12px; font-size: 17px; }
.dashboard-body .brand strong { font-size: 16px; }
.dashboard-body .brand small { max-width: 130px; font-size: 9px; line-height: 1.35; }
.dashboard-body .sidebar nav { margin-top: 32px; }
.dashboard-body .sidebar nav a { padding: 11px 12px; font-size: 13px; }
.dashboard-body .sidebar-bottom { padding: 12px; }

.dashboard-main { min-width: 0; padding: 22px 24px 32px; }
.dashboard-body .topbar { align-items: center; margin-bottom: 16px; }
.dashboard-body .topbar h1 { font-size: 29px; }
.dashboard-body .topbar-subtitle { margin-top: 6px; font-size: 12px; }
.dashboard-body .eyebrow { margin-bottom: 5px; font-size: 9px; }
.dashboard-body .panel { border-radius: 15px; padding: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.2); }

.command-bar {
    display: grid; grid-template-columns: minmax(390px, 1.25fr) 132px 190px 205px; gap: 8px;
    align-items: stretch; margin-bottom: 13px; padding: 9px !important;
    background: linear-gradient(90deg, #0c1b2a, #07111c) !important;
}
.command-session, .command-code, .command-expiry {
    display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 92px; padding: 10px 14px;
    border: 1px solid #182d41; border-radius: 10px; background: rgba(3,10,17,.58);
}
.command-session {
    display: grid;
    grid-template-columns: minmax(58px, 1fr) minmax(0, 2fr) minmax(110px, 1fr);
    align-items: center;
}
.command-icon { display: grid; place-items: center; justify-self: center; width: 50px; height: 50px; border-radius: 13px; color: #64c5ff; background: #0d3150; font-size: 24px; font-weight: 900; }
.command-session-copy { display: grid; justify-items: center; align-content: center; gap: 6px; width: 100%; min-width: 0; text-align: center; }
.command-bar .command-session-copy strong {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(17px, 1.65vw, 25px);
    line-height: 1.08;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.command-bar .command-session-copy strong.retest-batch-title {
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 100%;
    font-size: clamp(15px, 1.5vw, 23px);
    line-height: 1.02;
    -webkit-line-clamp: unset;
}
.batch-serial-line, .batch-retest-line {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}
.batch-retest-line {
    color: #c9d9e8;
    font-size: .72em;
    letter-spacing: .04em;
}
.command-qr { justify-self: center; width: min(100%, 150px); min-height: 48px; padding: 0 13px; white-space: nowrap; }
.command-session-actions { display: grid; align-content: center; gap: 7px; min-height: 92px; padding: 9px; border: 1px solid #182d41; border-radius: 10px; background: rgba(3,10,17,.58); }
.command-session-actions form { width: 100%; }
.command-session-actions .button { width: 100%; min-height: 34px; padding: 7px 9px; font-size: 11px; }
.command-session-actions.is-empty { visibility: hidden; }
.command-session-actions .button:disabled { cursor: not-allowed; opacity: .38; filter: saturate(.4); transform: none; box-shadow: none; }
.command-bar small, .distribution-details summary small { display: block; color: #5abaff; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-align: center; }
.command-bar strong { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 1.15; }
.command-code, .command-expiry { display: grid; place-content: center; justify-items: center; min-width: 0; text-align: center; }
.command-code strong { color: white; font-size: 18px; letter-spacing: .14em; }
.command-bar > .button { display: flex; align-items: center; justify-content: center; min-height: 92px; padding-inline: 15px; font-size: 14px; white-space: nowrap; }
.button-meta { padding: 3px 5px; border-radius: 5px; background: rgba(0,0,0,.22); font-size: 9px; }
.session-qr-dialog { position: relative; width: min(360px, calc(100vw - 32px)); padding: 28px; color: white; text-align: center; border: 1px solid #2b8dcc; border-radius: 20px; background: linear-gradient(155deg, #10263a, #050d16); box-shadow: 0 28px 90px rgba(0,0,0,.7); }
.session-qr-dialog::backdrop { background: rgba(0,5,10,.78); backdrop-filter: blur(6px); }
.session-qr-dialog small { display: block; color: #5abaff; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.session-qr-dialog > strong { display: block; margin: 8px 0 18px; font-size: 25px; }
.session-qr-dialog p { margin: 14px 0 0; color: #9fb1c3; }
.session-qr-dialog p b { color: white; letter-spacing: .14em; }
#session-qr-code { display: grid; place-items: center; width: 244px; height: 244px; margin: 0 auto; border: 12px solid white; border-radius: 14px; background: white; }
.session-qr-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; padding: 0; color: #9fb1c3; border: 0; background: transparent; font-size: 25px; cursor: pointer; }

.dashboard-workspace { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 13px; align-items: start; }
.workspace-rail { position: sticky; top: 13px; display: grid; gap: 11px; min-width: 0; }
.dashboard-body .batch-list { max-height: none; padding: 10px; overflow: visible; }
.dashboard-body .batch-list .panel-title { margin: 0; padding: 5px 5px 9px; }
.dashboard-body .batch-list .panel-title h2 { font-size: 17px; }
.dashboard-body .batch-row { justify-content: flex-start; gap: 8px; margin: 3px 0 0; padding: 10px 9px; border-radius: 9px; }
.batch-state { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #5d6d7b; }
.batch-state.active { background: #35caff; box-shadow: 0 0 10px rgba(53,202,255,.6); }
.batch-state.closed { background: #607183; }
.batch-state.archived { background: #a45dff; box-shadow: 0 0 10px rgba(164,93,255,.45); }
.dashboard-body .batch-row > div { min-width: 0; margin-right: auto; }
.dashboard-body .batch-row strong { max-width: 145px; font-size: 12px; }
.dashboard-body .batch-row small { margin-top: 3px; font-size: 9px; }
.dashboard-body .batch-count { padding: 5px 6px; border-radius: 7px; font-size: 10px; }

.rail-details { overflow: hidden; }
.rail-details > summary { list-style: none; cursor: pointer; user-select: none; }
.rail-details > summary::-webkit-details-marker { display: none; }
.create-details { margin: 4px 0 8px; border: 1px dashed #24577e; border-radius: 9px; background: #071624; }
.create-details > summary { padding: 10px; color: #69c5ff; font-size: 11px; font-weight: 800; }
.create-details[open] > summary { border-bottom: 1px solid #1a344b; }
.rail-form { display: grid; gap: 9px; padding: 10px; }
.rail-form label { display: grid; gap: 5px; color: #8ea5b9; font-size: 9px; font-weight: 800; }
.rail-form input, .rail-form select { padding: 9px 10px; border-radius: 8px; font-size: 11px; }
.rail-form .button { padding: 9px; font-size: 11px; }

.distribution-details { padding: 0 !important; }
.distribution-details > summary { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 92px; padding: 13px 42px; text-align: center; }
.distribution-details > summary::after { content: "⌃"; position: absolute; right: 18px; top: 50%; color: #6a8297; font-size: 13px; transform: translateY(-50%); }
.distribution-details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.distribution-details > summary b { display: none; }
.distribution-details > summary > span:nth-child(2) { display: grid; justify-items: center; min-width: 0; }
.distribution-details summary small { white-space: nowrap; }
.distribution-details summary strong { display: block; margin-top: 3px; font-size: 12px; text-align: center; white-space: nowrap; }
.summary-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; color: #67c4ff; background: #0e2b43; font-size: 20px; }
.sidebar-app-card > summary {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center;
    gap: 8px; height: var(--sidebar-tool-height); min-height: var(--sidebar-tool-height); padding: 10px 11px;
}
.sidebar-app-card > summary::after { top: 12px; right: 13px; transform: none; font-size: 11px; }
.sidebar-app-card[open] > summary::after { transform: rotate(180deg); }
.sidebar-app-card > summary > span:nth-child(2) { width: 100%; overflow: visible; }
.sidebar-app-card summary small {
    max-width: 100%; overflow: visible; color: #67c8ff;
    font-size: 8px; letter-spacing: .13em; line-height: 1.2;
}
.sidebar-app-card summary strong { margin-top: 4px; font-size: 14px; line-height: 1.2; }
.sidebar-app-card .summary-icon {
    width: 38px; height: 38px; border-radius: 11px;
    color: #9bddff; background: linear-gradient(145deg, #17466a, #09253d 70%);
    border: 1px solid rgba(104,202,255,.28);
    box-shadow:
        0 12px 22px rgba(0,0,0,.42),
        0 0 24px rgba(34,167,255,.16),
        inset 3px 3px 8px rgba(255,255,255,.12),
        inset -5px -7px 12px rgba(0,0,0,.3);
    font-size: 0; text-shadow: 0 2px 8px rgba(62,190,255,.35);
}
.sidebar-app-card .summary-icon::before { content: "↑"; font-size: 18px; line-height: 1; }
.sidebar-app-card[open] .summary-icon::before { content: "↓"; }
.distribution-body { padding: 0 13px 13px; border-top: 1px solid #182c3f; }
.distribution-body > p { margin: 10px 0; color: #7f94a8; font-size: 10px; }
.distribution-body .upload-form { grid-template-columns: 1fr; gap: 8px; }
.distribution-body .upload-field { gap: 5px; }
.distribution-body .upload-field input { min-height: 40px; font-size: 11px; }
.distribution-body .upload-button { min-height: 40px; padding: 9px; font-size: 11px; }
.compact-warning { display: grid; gap: 3px; margin: 8px 0 !important; padding: 9px !important; font-size: 10px; }

.fleet-panel { min-height: calc(100vh - 180px); padding: 14px !important; }
.batch-status-bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 14px; margin: 0 2px 11px; padding: 9px 10px; border: 1px solid #263a4c; border-radius: 11px; background: #07121c; box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.22); }
.batch-status-bar.ready { border-color: #1b6049; background: linear-gradient(180deg, #0b2b22, #071f18); }
.batch-status-bar.archived { border-color: #5d3782; background: linear-gradient(180deg, #251437, #180d24); }
.batch-status-bar.locked { border-color: #61421f; background: linear-gradient(180deg, #30200e, #211507); }
.batch-archive-note { min-width: 0; flex: 1 1 auto; overflow: hidden; color: #8fa3b5; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.batch-status-bar.ready .batch-archive-note { color: #58df9d; }
.batch-status-bar.archived .batch-archive-note { color: #c99aff; }
.batch-status-bar.locked .batch-archive-note { color: #ffb35c; }
.status-filter-controls { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 8px; margin-left: auto; }
.batch-issue-summary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 12px; color: #ffbac5; border: 1px solid #8f3445; border-radius: 9px; background: linear-gradient(180deg, #35141d, #210c12); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 12px rgba(0,0,0,.28); font-size: 9px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.batch-issue-summary-button[hidden] { display: none; }
.batch-issue-summary-button:hover { color: white; border-color: #dc536b; transform: translateY(-1px); }
.status-filters { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }

.batch-issues-body { min-height: 100vh; color: #15202a; background: #edf2f5; }
.batch-issues-page { width: min(1050px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 48px; }
.batch-issues-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.batch-issues-toolbar .back { color: #2277aa; font-weight: 800; text-decoration: none; }
.batch-issues-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 3px solid #142736; }
.batch-issues-header .eyebrow { color: #367ea9; }
.batch-issues-header h1 { margin: 5px 0; color: #0c1923; font-size: 32px; }
.batch-issues-header p { margin: 0; color: #5b6c78; }
.batch-issue-list { display: grid; gap: 15px; }
.batch-issue-sheet { break-inside: avoid; padding: 20px 22px; border: 1px solid #bac7d0; border-left: 6px solid #d74258; border-radius: 13px; background: white; box-shadow: 0 8px 24px rgba(22,42,58,.08); }
.batch-issue-device-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; padding-bottom: 12px; border-bottom: 1px solid #d8e0e6; }
.batch-issue-device-head small { display: block; margin-bottom: 4px; color: #738491; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.batch-issue-device-head h2 { margin: 0; color: #111d27; font-size: 18px; line-height: 1.28; }
.batch-issue-serial { min-width: 180px; text-align: right; }
.batch-issue-serial strong { color: #111d27; font: 800 17px ui-monospace, SFMono-Regular, Menlo, monospace; }
.batch-issue-lines { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.batch-issue-lines li { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0,1fr); gap: 12px; padding: 9px 11px; border-radius: 8px; background: #fff1f3; }
.batch-issue-lines b { color: #a31f35; }
.batch-issue-lines span { color: #283842; white-space: pre-wrap; }
.batch-issues-empty { padding: 40px; text-align: center; border: 1px dashed #9eafb9; border-radius: 14px; background: white; }

@media print {
    .batch-issues-body { background: white; }
    .batch-issues-page { width: 100%; padding: 0; }
    .batch-issues-toolbar { display: none; }
    .batch-issues-header { margin-bottom: 12px; }
    .batch-issue-list { gap: 9px; }
    .batch-issue-sheet { padding: 12px 14px; border-radius: 0; box-shadow: none; }
}
.filter-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 13px; color: #91a7ba; border: 1px solid #29465f; border-radius: 10px; background: linear-gradient(180deg, #102438, #07131f); box-shadow: inset 0 1px rgba(255,255,255,.1), inset 0 -2px rgba(0,0,0,.32), 0 5px 10px rgba(0,0,0,.3); font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; transition: transform .16s ease, border-color .16s ease, filter .16s ease; }
.filter-chip b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 7px; color: #d5e7f5; background: rgba(0,0,0,.3); font-size: 10px; }
.filter-chip:hover { color: white; border-color: #4a91c1; filter: brightness(1.1); transform: translateY(-1px); }
.filter-chip.active { color: white; border-color: #38a9ef; background: linear-gradient(180deg, #174e76, #0b2c47); box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 -3px rgba(0,0,0,.32), 0 0 18px rgba(41,154,226,.2), 0 6px 12px rgba(0,0,0,.34); transform: translateY(-1px); }
.filter-chip.issue-filter.active { border-color: #a43d50; background: #32121a; }
.filter-chip.archive-filter.active { border-color: #76509a; background: linear-gradient(180deg, #39204f, #21112f); box-shadow: inset 0 1px rgba(255,255,255,.15), inset 0 -3px rgba(0,0,0,.32), 0 6px 12px rgba(0,0,0,.34); }
.filter-chip:not(.archive-filter) b.has-count { animation: active-filter-count 1.15s ease-in-out infinite; }
@keyframes active-filter-count { 0%, 100% { opacity: .62; transform: scale(.92); box-shadow: 0 0 0 rgba(87,193,255,0); } 50% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 13px rgba(87,193,255,.75); } }
.dashboard-body .device-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.dashboard-body .device-card { min-height: 0; padding: 13px; border-radius: 12px; background: linear-gradient(155deg, #0b1a29, #050d16); }
.dashboard-body .device-card:hover { transform: translateY(-2px) scale(1.005); }
.dashboard-body .device-card::after { width: 120px; height: 120px; }
.device-index { color: #54bdff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 900; }
.dashboard-body .status { padding: 5px 7px; font-size: 8px; }
.device-identity { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.dashboard-body .device-icon { width: 35px; height: 35px; flex: 0 0 35px; border-radius: 9px; font-size: 16px; }
.device-identity > div { min-width: 0; }
.dashboard-body .device-card h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.dashboard-body .device-card .device-subtitle { min-height: 0; margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.device-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 11px 0; overflow: hidden; border: 1px solid #182b3d; border-radius: 8px; background: #182b3d; }
.device-specs div { min-width: 0; padding: 7px 8px; background: #07111b; }
.device-specs span, .device-specs strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-specs span { color: #687f94; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.device-specs strong { margin-top: 3px; color: #cfdeeb; font-size: 9px; }
.device-specs .macos-version.current span,
.device-specs .macos-version.current strong {
    color: #53e69a;
}
.device-specs .macos-version.outdated span,
.device-specs .macos-version.outdated strong {
    color: #ff526d;
    font-weight: 950;
}
.device-specs .macos-version.outdated strong {
    animation: macos-update-alert 1s ease-in-out infinite;
}
@keyframes macos-update-alert {
    0%, 100% { opacity: .58; text-shadow: 0 0 0 rgba(255,82,109,0); }
    50% { opacity: 1; text-shadow: 0 0 10px rgba(255,82,109,.9); }
}
@media (prefers-reduced-motion: reduce) {
    .device-specs .macos-version.outdated strong { animation: none; }
}
.device-activity { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 9px; }
.device-activity span { flex: 0 0 auto; color: #6f8498; white-space: nowrap; }
.device-activity strong { min-width: 0; overflow: hidden; color: #bdd0df; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-body .progress { height: 4px; }
.dashboard-body .progress-label { margin-top: 5px; font-size: 8px; }
.device-card-link { display: flex !important; justify-content: space-between; margin: 10px -13px -13px !important; padding: 9px 13px; border-top: 1px solid #182c3f; background: rgba(5,15,24,.72); }
.device-card-link::after { content: "→"; }
.device-card.archived { opacity: 1; border-color: #3f6078; }
.dashboard-body .device-card h3,
.dashboard-body .device-card .device-subtitle,
.dashboard-body .device-card .device-specs div:not(.macos-version) strong,
.dashboard-body .device-card .device-activity strong,
.dashboard-body .device-card .progress-label,
.dashboard-body .device-card .device-card-link,
.dashboard-body .device-card .device-archive-button {
    color: #d8e8f5;
    text-shadow: 0 0 8px rgba(132,199,242,.2);
}
.dashboard-body .device-card .device-specs div:not(.macos-version) span,
.dashboard-body .device-card .device-activity span {
    color: #8fa9bf;
}
.dashboard-body .device-card .status {
    filter: brightness(1.28);
    text-shadow: 0 0 7px currentColor;
}
.status.archived i { background: #8294a5; box-shadow: none; }
.device-card-actions { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; margin: 10px -13px -13px; border-top: 1px solid #182c3f; background: rgba(5,15,24,.72); }
.device-card-actions .device-card-link { margin: 0 !important; border: 0; background: transparent; }
.device-card-actions form { display: flex; }
.device-archive-button { width: 100%; border: 0; border-left: 1px solid #182c3f; color: #6bc3ff; background: transparent; font: inherit; font-size: 8px; font-weight: 850; cursor: pointer; }
.device-archive-button:hover { color: white; background: #0d2940; }
.device-archive-button.restore { color: #b6c5d2; }
.device-archive-button.repaired { color: #ffb44f; }
.device-archive-button.cancel-incomplete { min-height: 38px; padding: 0 12px; border-left: 0; color: #ffb45c; }
.device-card-actions.single-action { grid-template-columns: 1fr; }
.device-card-actions.disposition-required { grid-template-columns: 1fr; }
.device-card-actions.disposition-required .device-card-link { border-bottom: 1px solid #182c3f; }
.device-disposition-form { display: grid !important; grid-template-columns: minmax(0,1fr) auto; padding: 6px; gap: 5px; }
.device-disposition-form select { min-width: 0; padding: 6px; border: 1px solid #29445c; border-radius: 6px; color: #d7e7f4; background: #08131e; font: inherit; font-size: 8px; }
.device-disposition-form .device-archive-button { width: auto; min-width: 70px; min-height: 34px; padding: 0 9px; border: 1px solid #5d4822; border-radius: 6px; position: relative; z-index: 3; }
.filtered-empty { grid-column: 1 / -1; }

/* Dedicated historical archive */
.archive-pill { padding: 10px 14px; border: 1px solid #643c91; border-radius: 99px; color: #d5afff; background: #1a1027; font-size: 12px; font-weight: 800; }
.archive-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; }
.archive-load-error { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; padding: 15px 17px; border: 1px solid rgba(255,75,91,.48); border-radius: 13px; color: #ff9ba5; background: rgba(72,18,28,.72); }
.archive-load-error strong { color: #fff; }
.archive-batches { position: sticky; top: 18px; padding: 14px; }
.archive-batches .panel-title { padding: 4px 4px 12px; }
.archive-batches .batch-row { justify-content: flex-start; gap: 9px; margin-top: 5px; padding: 12px 10px; }
.archive-bulk-actions { display: grid; gap: 7px; margin: 0 4px 9px; padding: 9px; border: 1px solid #263c51; border-radius: 10px; background: #07131f; }
.archive-bulk-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.archive-bulk-actions button { min-height: 29px; padding: 6px 8px; border: 1px solid #29465f; border-radius: 7px; color: #9bb0c2; background: #0c1c2b; font: inherit; font-size: 8px; font-weight: 850; cursor: pointer; }
.archive-bulk-actions button:hover { color: white; border-color: #4a91c1; }
.archive-bulk-actions .archive-bulk-delete { color: #ff8998; border-color: #713340; background: #241018; }
.archive-bulk-actions .archive-bulk-delete:not(:disabled):hover { border-color: #b54b60; background: #3a1420; }
.archive-bulk-actions .archive-bulk-delete:disabled { cursor: not-allowed; opacity: .38; }
.archive-bulk-actions .archive-bulk-delete span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 4px; border-radius: 6px; background: rgba(0,0,0,.3); }
.archive-batch-select-row { display: block; margin-top: 5px; border: 1px solid transparent; border-radius: 10px; }
.archive-batch-select-row.selectable { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: stretch; }
.archive-batch-select-row.selected { border-color: #277cac; background: #0c2940; }
.archive-batch-select-row.checked { border-color: #8652bd; background: #211331; }
.archive-batch-select-row .batch-row { margin: 0; border: 0; background: transparent; }
.archive-batch-checkbox { display: grid; place-items: center; cursor: pointer; }
.archive-batch-checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.archive-batch-checkbox span { position: relative; width: 15px; height: 15px; border: 1px solid #4c6478; border-radius: 4px; background: #07121c; }
.archive-batch-checkbox input:focus-visible + span { outline: 2px solid #54bdff; outline-offset: 2px; }
.archive-batch-checkbox input:checked + span { border-color: #ae73e8; background: #713ba8; box-shadow: 0 0 10px rgba(164,93,255,.45); }
.archive-batch-checkbox input:checked + span::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 10px; font-weight: 900; }
.archive-batches .batch-row > div { min-width: 0; margin-right: auto; }
.archive-batches .batch-row strong, .archive-batches .batch-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-batches .batch-row small { margin-top: 4px; }
.archive-inventory { min-height: calc(100vh - 160px); padding: 20px; }
.archive-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 2px 2px 18px; border-bottom: 1px solid #183149; }
.archive-head h2 { font-size: 26px; }
.archive-head .muted { margin: 6px 0 0; font-size: 12px; }
.archive-code { min-width: 145px; padding: 11px 15px; text-align: center; border: 1px solid #59407a; border-radius: 11px; background: #140e20; }
.archive-code small, .archive-code strong { display: block; }
.archive-code small { color: #aa75e5; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.archive-code strong { margin-top: 5px; font-size: 19px; letter-spacing: .13em; }
.archive-head-actions { display: flex; align-items: center; gap: 9px; }
.archive-delete-button { padding: 10px 12px; border: 1px solid #713340; border-radius: 9px; color: #ff8998; background: #241018; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.archive-delete-button:hover { color: white; border-color: #b54b60; background: #3a1420; }
.archive-device-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; margin-top: 18px; }
.archive-device-card { overflow: hidden; border: 1px solid #205e4a; border-radius: 14px; background: linear-gradient(155deg, #0a1b27, #050d15); box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.archive-device-card.has-issue { border-color: #773344; }
.archive-device-card > :not(.archive-report-link) { margin-left: 14px; margin-right: 14px; }
.archive-card-top { display: flex; justify-content: space-between; align-items: center; padding-top: 13px; }
.archive-result { padding: 5px 7px; border-radius: 99px; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.archive-result.ok { color: #67eaa0; background: #0b2b20; }
.archive-result.issue { color: #ff8192; background: #32141b; }
.archive-device-card .device-identity { margin-top: 12px; }
.archive-device-card h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.archive-device-card .device-subtitle { margin: 3px 0 0; color: #8499ac; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.archive-device-card .device-specs { margin-top: 12px; margin-bottom: 12px; }
.archive-outcome { margin-bottom: 12px; padding: 8px 9px; border-radius: 8px; color: #ff91a0; background: #281119; font-size: 9px; }
.archive-outcome strong { display: block; margin-top: 3px; color: #ffc0c9; }
.archive-report-link { display: flex; justify-content: space-between; padding: 11px 14px; border-top: 1px solid #183049; color: #6fc6ff; background: #06111b; font-size: 10px; font-weight: 850; }
.archive-report-link:hover { color: white; background: #0b2236; }
.archive-report-link.disabled { color: #607486; }
.archive-empty { display: grid; gap: 6px; padding: 24px 12px; color: #71869a; text-align: center; }
.archive-empty strong { color: #b9c9d7; }
.archive-empty.large { place-content: center; min-height: 440px; }
@media (max-width: 1540px) { .archive-device-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .archive-device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .archive-workspace { grid-template-columns: 1fr; } .archive-batches { position: static; } .archive-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 1680px) {
    .dashboard-body .device-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1540px) {
    .dashboard-body .device-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
    .command-bar { grid-template-columns: minmax(310px,1fr) 125px auto auto; }
    .command-bar > .button { grid-row: 2; }
    .command-bar > .button.blue { grid-column: 3; }
    .dashboard-workspace { grid-template-columns: 220px minmax(0,1fr); }
    .dashboard-body .device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dashboard-body .shell { display: block; }
    .dashboard-body .sidebar { position: static; width: 100%; height: auto; flex-direction: row; align-items: center; }
    .dashboard-body .sidebar nav { display: flex; margin: 0 0 0 auto; }
    .dashboard-body .sidebar-app-tools, .dashboard-body .sidebar-bottom { display: none; }
    .command-bar, .dashboard-workspace { grid-template-columns: 1fr; }
    .command-bar > .button, .command-bar > .button.primary, .command-bar > .button.blue { grid-row: auto; grid-column: auto; }
    .workspace-rail { position: static; grid-template-columns: 1fr 1fr; }
    .dashboard-body .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .dashboard-main { padding: 16px 12px 26px; }
    .workspace-rail { grid-template-columns: 1fr; }
    .summary-strip { grid-template-columns: 1fr 1fr; }
    .dashboard-body .device-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .sidebar, .dashboard-body .sidebar { flex-wrap: wrap; }
    .sidebar-app-tools, .dashboard-body .sidebar-app-tools {
        order: 3; display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 0;
    }
    .authenticator-card > summary,
    .sidebar-app-tools .sidebar-download,
    .sidebar-app-card > summary {
        height: var(--sidebar-tool-height); min-height: var(--sidebar-tool-height);
    }
    .sidebar-bottom, .dashboard-body .sidebar-bottom {
        order: 4; display: grid; width: 100%; min-height: 76px; margin-top: 0;
    }
}
.device-action-message{display:none;grid-column:1/-1;font-size:12px;font-weight:700;line-height:1.35}.device-action-message.saving,.device-action-message.error{display:block}.device-action-message.saving{color:#56baff}.device-action-message.error{color:#ff6578}