:root {
  color-scheme: light;
  --ink: #17243b;
  --muted: #8290a4;
  --muted-dark: #63728a;
  --line: #e9edf3;
  --canvas: #f4f7fb;
  --white: #fff;
  --blue: #2865dc;
  --blue-dark: #1d54c4;
  --navy: #101d34;
  --green: #168b63;
  --shadow: 0 3px 14px rgba(32, 51, 82, .035);
  font-family: "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--canvas); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); font-size: 13px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(40, 101, 220, .22); outline-offset: 2px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 248px; position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; padding: 23px 15px 13px; background: var(--navy); color: #dce6f4; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 7px; color: #fff; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; color: white; background: linear-gradient(145deg, #448aff, #2464db); box-shadow: 0 5px 13px rgba(19, 88, 204, .28); }
.brand-mark svg { width: 25px; height: 25px; fill: currentColor; stroke: none; }
.brand-mark svg path:last-child { fill: none; stroke: #fff; stroke-width: 1.6; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font: 800 18px/1 "Segoe UI", Arial, sans-serif; letter-spacing: -.8px; }
.brand-copy strong span { color: #78a8ff; }
.brand-copy small { color: #8292ab; font-size: 8px; font-weight: 700; letter-spacing: 1.6px; }
.workspace-switcher { display: flex; align-items: center; min-width: 0; gap: 10px; margin: 32px 0 27px; padding: 11px 9px; border: 1px solid #26364e; border-radius: 8px; background: #17263e; }
.workspace-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: #d3e4ff; background: #2e4b73; font-weight: 700; }
.workspace-name, .profile-name { display: grid; min-width: 0; gap: 3px; }
.workspace-name strong, .profile-name strong { overflow: hidden; color: #f3f6fb; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.workspace-name small, .profile-name small { color: #91a0b6; font-size: 10px; }
.switcher-chevron { width: 15px; margin-left: auto; color: #93a3b8; }
.nav-label { margin: 0 8px 10px; color: #71819a; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; width: 100%; gap: 11px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #a8b6ca; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.nav-item > svg { width: 17px; height: 17px; }
.nav-item span:nth-child(2) { flex: 1; font-size: 11px; font-weight: 500; }
.nav-item:hover { color: white; background: #1a2a43; }
.nav-item.active { color: #fff; background: #263a59; box-shadow: inset 2px 0 #5b95ff; }
.nav-item.active > svg { color: #86b0ff; }
.nav-count { display: grid; place-items: center; width: 21px; height: 19px; border-radius: 5px; color: #c4d7f5; background: #354d70; font-size: 10px; }
.sidebar-bottom { margin-top: auto; }
.online-card { display: flex; align-items: center; gap: 9px; margin: 0 2px 15px; padding: 11px 10px; border: 1px solid #26364c; border-radius: 7px; background: #15243b; }
.online-dot, .footer-online i { width: 7px; height: 7px; border-radius: 50%; background: #2dc68e; box-shadow: 0 0 0 3px rgba(45, 198, 142, .12); }
.online-card span:last-child { display: grid; gap: 3px; }
.online-card strong { color: #dce8f6; font-size: 10px; font-weight: 600; }
.online-card small { color: #8998ad; font-size: 9px; }
.profile-button { display: flex; align-items: center; width: 100%; gap: 9px; padding: 12px 4px 2px; border: 0; border-top: 1px solid #27374e; background: transparent; text-align: left; cursor: pointer; }
.profile-avatar, .topbar-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #2757a4; background: #dbe9ff; font-size: 10px; font-weight: 700; }
.profile-name { flex: 1; }
.profile-button > svg { width: 16px; color: #8392a9; }
.main-column { display: flex; flex: 1; min-width: 0; flex-direction: column; margin-left: 248px; }
.topbar { display: flex; align-items: center; height: 59px; flex: 0 0 59px; padding: 0 35px; border-bottom: 1px solid #e9edf2; background: rgba(255, 255, 255, .94); }
.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #93a0b2; font-size: 11px; }
.breadcrumbs strong { color: #33425b; font-weight: 600; }
.crumb-divider { color: #c4ccd7; }
.topbar-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.today-label { color: #77859a; font-size: 10px; }
.icon-button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #78879b; cursor: pointer; }
.icon-button:hover { background: #f2f5f9; }
.icon-button svg { width: 17px; height: 17px; }
.notification-button i { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border: 1px solid white; border-radius: 50%; background: #ed6a6a; }
.topbar-avatar { width: 29px; height: 29px; }
.mobile-menu { display: none; margin-right: 9px; }
.content { width: 100%; max-width: 1540px; flex: 1; margin: 0 auto; padding: 30px 35px 25px; }
.view { display: none; animation: view-enter .2s ease-out; }
.view.active { display: block; }
@keyframes view-enter { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 23px; }
.eyebrow { margin: 0 0 7px; color: #7789a2; font-size: 9px; font-weight: 700; letter-spacing: 1.15px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; font: 700 25px/1.25 "Segoe UI", Arial, sans-serif; letter-spacing: -.8px; }
.dashboard-heading h1 span { color: #e5ab43; font-size: 17px; vertical-align: 3px; }
.page-subtitle { margin-bottom: 0; color: #8995a7; font-size: 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; padding: 0 14px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; }
.button:active { transform: translateY(1px); }
.button svg { width: 15px; height: 15px; }
.button-primary { color: white; background: var(--blue); box-shadow: 0 2px 4px rgba(40, 101, 220, .13); }
.button-primary:hover { background: var(--blue-dark); }
.button-secondary { border-color: #e2e7ef; color: #45546c; background: white; }
.button-secondary:hover { border-color: #cdd8e8; background: #f9fbfe; }
.button-small { min-height: 32px; padding: 0 11px; font-size: 10px; }
.button-small svg { width: 14px; height: 14px; }
.button-ghost { color: #718096; background: transparent; }
.button-ghost:hover { background: #f3f6fa; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.metric-card { min-width: 0; padding: 15px 16px 13px; border: 1px solid #e9edf3; border-radius: 8px; background: white; box-shadow: var(--shadow); }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-icon, .spec-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; }
.metric-icon svg, .spec-icon svg { width: 16px; height: 16px; }
.blue-icon { color: #3972dc; background: #edf3ff; }
.violet-icon { color: #8365d4; background: #f2efff; }
.green-icon { color: #1c9b73; background: #eaf8f2; }
.amber-icon { color: #c88a23; background: #fff6e6; }
.cyan-icon { color: #2696aa; background: #e9f8fa; }
.slate-icon { color: #687a91; background: #eef2f6; }
.rose-icon { color: #d16e79; background: #fff0f1; }
.neutral-icon { color: #8292a7; background: #f0f3f7; }
.metric-caption { overflow: hidden; color: #a0aabc; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.metric-label { margin: 12px 0 3px; color: #748198; font-size: 10px; }
.metric-value { display: flex; align-items: center; gap: 9px; }
.metric-value strong { font: 700 22px/1.2 "Segoe UI", Arial, sans-serif; letter-spacing: -.7px; }
.metric-trend { display: inline-flex; align-items: center; gap: 2px; color: #168b63; font-size: 9px; font-weight: 600; }
.metric-trend svg { width: 12px; height: 12px; }
.metric-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #8365d4; }
.urgent-label { color: #c88725; font-size: 9px; }
.panel { border: 1px solid #e9edf3; border-radius: 8px; background: white; box-shadow: var(--shadow); }
.tickets-panel { overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 19px 13px; }
.panel-title-row { display: flex; align-items: center; gap: 8px; }
.panel-heading h2, .form-section-heading h2, .hardware-results-heading h2 { margin: 0; font: 700 13px/1.4 "Segoe UI", Arial, sans-serif; letter-spacing: -.1px; }
.panel-heading p, .form-section-heading p { margin: 4px 0 0; color: #8995a7; font-size: 10px; }
.soft-count { display: inline-grid; place-items: center; min-width: 21px; height: 18px; padding: 0 5px; border-radius: 5px; color: #73819a; background: #f0f3f8; font-size: 9px; font-weight: 600; }
.table-toolbar { display: flex; align-items: center; gap: 9px; padding: 0 19px 13px; }
.search-box, .filter-select { display: flex; align-items: center; height: 33px; gap: 7px; padding: 0 9px; border: 1px solid #e7ebf1; border-radius: 5px; color: #8996a9; background: white; }
.search-box { width: min(300px, 100%); }
.search-box svg, .filter-select svg { width: 14px; height: 14px; }
.search-box input, .filter-select select { width: 100%; border: 0; outline: 0; color: #45546b; background: transparent; font-size: 10px; }
.search-box input::placeholder { color: #a4afbd; }
.search-box input:focus-visible, .filter-select select:focus-visible { outline: 0; }
.filter-select { width: 155px; }
.filter-select select { cursor: pointer; appearance: auto; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
thead { background: #fafbfd; }
th { height: 33px; padding: 0 13px; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; color: #96a1b0; font-size: 8px; font-weight: 700; letter-spacing: .4px; }
th:first-child, td:first-child { padding-left: 19px; }
th:last-child, td:last-child { padding-right: 16px; }
td { height: 57px; padding: 8px 13px; border-bottom: 1px solid #f0f2f6; color: #69768b; font-size: 10px; }
tbody tr:last-child td { border-bottom: 0; }
.ticket-id { color: #3972dc; font-size: 10px; font-weight: 600; }
.client-cell { display: grid; gap: 4px; }
.client-cell strong { color: #35435a; font-size: 10px; font-weight: 600; }
.client-cell small { color: #98a2b1; font-size: 9px; }
.service-cell { color: #56657b; font-size: 9px; }
.status-badge, .priority-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 21px; padding: 0 7px; border-radius: 4px; font-size: 9px; font-weight: 600; }
.status-badge::before, .priority-badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-open { color: #bb781a; background: #fff5e5; }
.status-progress { color: #3f6fcc; background: #edf3ff; }
.status-done { color: #18825e; background: #eaf7f1; }
.priority-low { color: #78889d; background: #f0f3f6; }
.priority-medium { color: #a56e20; background: #fff6e6; }
.priority-high { color: #cb6740; background: #fff0e9; }
.priority-critical { color: #c64b57; background: #fff0f1; }
.row-menu { display: grid; place-items: center; width: 25px; height: 25px; border: 0; border-radius: 5px; color: #8794a6; background: transparent; cursor: pointer; }
.row-menu:hover { background: #f1f4f8; }
.row-menu svg { width: 15px; height: 15px; }
.empty-state { display: grid; justify-items: center; gap: 6px; padding: 32px 15px; color: #8b98aa; text-align: center; }
.empty-state strong { color: #48566b; font-size: 11px; }
.empty-state > span:last-child { font-size: 10px; }
.empty-icon { display: grid; place-items: center; width: 35px; height: 35px; margin-bottom: 2px; border-radius: 50%; color: #8293aa; background: #f0f3f7; }
.table-footer { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 19px; border-top: 1px solid #edf0f4; color: #99a4b2; font-size: 9px; }
.demo-note { display: inline-flex; align-items: center; gap: 6px; }
.demo-dot { width: 6px; height: 6px; border-radius: 50%; background: #91a4bc; }
.page-footer { display: flex; justify-content: space-between; padding: 12px 35px 15px; color: #a0aaba; font-size: 9px; }
.footer-online { display: inline-flex; align-items: center; gap: 6px; color: #6f8197; }
.footer-online i { width: 6px; height: 6px; }
.form-page-heading { align-items: center; margin-bottom: 20px; }
.draft-indicator { display: inline-flex; align-items: center; gap: 7px; color: #8794a6; font-size: 10px; }
.draft-indicator span { width: 6px; height: 6px; border-radius: 50%; background: #e6a23c; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 15px; }
.form-main-column { display: grid; gap: 13px; min-width: 0; }
.form-panel { padding: 17px 19px; }
.form-section-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 17px; }
.step-number { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border: 1px solid #e3ebfa; border-radius: 7px; color: #4075d6; background: #f0f5ff; font-size: 9px; font-weight: 700; }
.field-grid { display: grid; gap: 13px 12px; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; min-width: 0; gap: 6px; color: #59677c; font-size: 10px; font-weight: 600; }
.field > span b, .required-note b { color: #d45c63; font-weight: 600; }
.field input, .field select, .field textarea { display: block; width: 100%; min-width: 0; min-height: 34px; padding: 8px 10px; border: 1px solid #e4e9f0; border-radius: 5px; outline: 0; color: #425169; background-color: white; font-size: 10px; font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder, .field textarea::placeholder { color: #acb5c1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #8caee9; box-shadow: 0 0 0 3px rgba(40, 101, 220, .08); }
.field select { cursor: pointer; }
.field textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
.capture-callout { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; padding: 11px; border: 1px solid #e5edfa; border-radius: 7px; background: #f7faff; }
.capture-callout-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 7px; color: #3972d8; background: #eaf1ff; }
.capture-callout-icon svg { width: 17px; height: 17px; }
.capture-callout > div { display: grid; flex: 1; gap: 3px; }
.capture-callout strong { color: #43536d; font-size: 10px; }
.capture-callout > div > span { color: #8d9aab; font-size: 9px; }
.capture-button { min-height: 32px; padding: 0 10px; font-size: 9px; }
.capture-button svg { width: 13px; height: 13px; }
.hardware-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.hardware-grid .field input { font-size: 9px; }
.capture-footnote { display: flex; align-items: flex-start; gap: 6px; margin-top: 13px; color: #919eaf; font-size: 9px; line-height: 1.5; }
.capture-footnote svg { width: 13px; height: 13px; }
.field-stack { display: grid; gap: 13px; }
.checklist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.check-item { display: flex; align-items: center; gap: 8px; color: #5e6c80; font-size: 10px; cursor: pointer; }
.check-item input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.custom-checkbox { display: grid; place-items: center; width: 15px; height: 15px; flex: 0 0 15px; border: 1px solid #d6dee9; border-radius: 4px; color: white; background: white; transition: background .15s, border-color .15s; }
.custom-checkbox svg { width: 11px; height: 11px; opacity: 0; stroke-width: 2.5; }
.check-item input:checked + .custom-checkbox { border-color: var(--blue); background: var(--blue); }
.check-item input:checked + .custom-checkbox svg { opacity: 1; }
.check-item input:focus-visible + .custom-checkbox { outline: 3px solid rgba(40, 101, 220, .22); outline-offset: 2px; }
.form-aside { position: sticky; top: 15px; display: grid; gap: 12px; }
.aside-panel { display: grid; gap: 13px; }
.aside-panel .form-section-heading { margin-bottom: 2px; }
.aside-panel .field { gap: 6px; }
.aside-panel .field input, .aside-panel .field select { min-height: 35px; }
.aside-divider { height: 1px; margin: 1px 0; background: #edf0f4; }
.aside-info { display: flex; align-items: center; gap: 9px; }
.aside-info > svg { width: 18px; height: 18px; color: #288d6a; }
.aside-info span { display: grid; gap: 3px; }
.aside-info strong { color: #526076; font-size: 10px; }
.aside-info small { color: #929eae; font-size: 9px; }
.print-button { width: 100%; min-height: 38px; padding: 0 8px; font-size: 9px; }
.cancel-button { width: 100%; min-height: 29px; }
.required-note { margin: -4px 0 0; color: #99a4b2; font-size: 9px; text-align: center; }
.aside-tip { display: flex; gap: 8px; padding: 11px; border: 1px solid #f1e7d2; border-radius: 7px; background: #fffaf0; color: #8a795a; }
.aside-tip > span { color: #d6a34a; }
.aside-tip p { margin: 0; font-size: 9px; line-height: 1.55; }
.aside-tip strong { display: block; margin-bottom: 3px; color: #766343; font-size: 10px; }
.capture-progress { display: grid; grid-template-columns: 16px auto minmax(50px, 130px) 31px; align-items: center; gap: 8px; margin: -3px 0 13px; padding: 9px 10px; border: 1px solid #e5edfa; border-radius: 6px; color: #687b98; background: #f8faff; font-size: 9px; }
.spinner { width: 13px; height: 13px; border: 2px solid #d8e4f5; border-top-color: #3672da; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { height: 4px; overflow: hidden; border-radius: 4px; background: #e5ebf4; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #3874dc; transition: width .2s; }
.capture-progress > strong { color: #64758f; font-size: 9px; text-align: right; }
.hardware-page-grid { display: grid; gap: 14px; }
.hardware-agent-card { position: relative; display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: center; min-height: 194px; overflow: hidden; padding: 18px 25px; }
.agent-illustration { position: relative; display: grid; place-items: center; width: 125px; height: 125px; justify-self: center; }
.agent-orbit { position: absolute; border: 1px solid #dce7f8; border-radius: 50%; }
.orbit-one { inset: 9px; border-style: dashed; }
.orbit-two { inset: -1px; border-color: #eef2f8; }
.agent-chip { display: grid; place-items: center; width: 67px; height: 67px; border: 1px solid #dbe6f6; border-radius: 20px; color: #3d79dd; background: linear-gradient(145deg, #f4f8ff, #e8f0ff); box-shadow: 0 6px 18px rgba(54, 108, 193, .1); }
.agent-chip svg { width: 34px; height: 34px; stroke-width: 1.35; }
.agent-copy { min-width: 0; }
.status-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 4px; font-size: 8px; font-weight: 700; letter-spacing: .45px; }
.status-neutral { color: #7c899a; background: #f0f3f7; }
.status-live { color: #16835e; background: #eaf7f1; }
.agent-copy h2 { margin: 8px 0 5px; font: 700 17px "Segoe UI", Arial, sans-serif; letter-spacing: -.4px; }
.agent-copy p { max-width: 490px; margin: 0 0 12px; color: #8995a7; font-size: 10px; line-height: 1.55; }
.agent-security { display: flex; align-items: center; gap: 6px; position: absolute; right: 18px; bottom: 14px; color: #97a3b2; font-size: 8px; }
.agent-security svg { width: 13px; height: 13px; }
.hardware-progress { position: absolute; right: 20px; bottom: 12px; left: 20px; z-index: 1; background: white; }
.hardware-results-panel { overflow: hidden; }
.hardware-results-heading { padding: 17px 19px 14px; }
.live-indicator { display: inline-flex; align-items: center; gap: 6px; color: #9aa5b3; font-size: 9px; white-space: nowrap; }
.live-indicator > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: #bdc7d3; }
.live-indicator.is-live > span:first-child { background: #29ad7f; box-shadow: 0 0 0 3px #e6f6ef; }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 19px 18px; }
.spec-card { display: flex; align-items: flex-start; min-width: 0; min-height: 86px; gap: 9px; padding: 12px 10px; border: 1px solid #edf0f4; border-radius: 7px; }
.spec-card .spec-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.spec-card .spec-icon svg { width: 14px; height: 14px; }
.spec-card > div { display: grid; min-width: 0; gap: 5px; }
.spec-card > div > span { color: #98a3b2; font-size: 8px; font-weight: 700; letter-spacing: .35px; }
.spec-card > div > strong { overflow-wrap: anywhere; color: #46546a; font-size: 10px; font-weight: 600; line-height: 1.3; }
.spec-card > div > small { overflow-wrap: anywhere; color: #98a3b2; font-size: 8px; line-height: 1.35; }
.spec-placeholder { background: #fcfdff; }
.hardware-footer { display: flex; align-items: center; gap: 6px; min-height: 35px; padding: 0 19px; border-top: 1px solid #edf0f4; color: #98a3b2; font-size: 9px; }
.hardware-footer svg { width: 13px; height: 13px; }
.hardware-next-step { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid #e6ebf2; border-radius: 8px; background: #fff; }
.next-step-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; color: #4178d5; background: #eff4ff; }
.next-step-icon svg { width: 17px; height: 17px; }
.hardware-next-step > div { display: grid; flex: 1; gap: 4px; }
.hardware-next-step > div strong { color: #46556b; font-size: 10px; }
.hardware-next-step > div span { color: #929eae; font-size: 9px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.toast-region { position: fixed; z-index: 60; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 8px; min-width: 230px; max-width: min(380px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid #dce9e2; border-radius: 7px; color: #416554; background: white; box-shadow: 0 8px 24px rgba(22, 39, 62, .12); font-size: 11px; animation: view-enter .18s ease-out; }
.toast svg { width: 16px; height: 16px; color: #1b9a6a; }
.print-sheet { display: none; }

.fiscal-panel { overflow: hidden; }
.fiscal-period { display: flex; align-items: end; gap: 9px; }
.fiscal-period .field { width: 142px; }
.fiscal-period .field input { min-height: 32px; }
.fiscal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 19px 16px; }
.fiscal-summary article { display: grid; gap: 9px; padding: 14px; border: 1px solid #edf0f4; border-radius: 7px; }
.fiscal-summary article span { color: #8995a7; font-size: 10px; }
.fiscal-summary article strong { color: #253650; font-size: 17px; }
.fiscal-status-summary { padding: 12px 19px; border-top: 1px solid #edf0f4; color: #68768c; font-size: 10px; }
.fiscal-status-select { min-height: 30px; max-width: 180px; padding: 5px 7px; border: 1px solid #e4e9f0; border-radius: 5px; color: #425169; background: var(--white); font-size: 9px; }
.ticket-dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border: 1px solid #e2e8f0; border-radius: 10px; color: var(--ink); background: var(--white); box-shadow: 0 18px 60px rgba(10, 20, 38, .25); }
.ticket-dialog::backdrop { background: rgba(10, 20, 38, .56); backdrop-filter: blur(2px); }
.ticket-dialog form { display: grid; gap: 14px; }
.ticket-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ticket-dialog-heading .eyebrow { margin-bottom: 5px; }
.ticket-dialog-heading h2 { margin: 0; overflow-wrap: anywhere; font-size: 17px; }
.ticket-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ticket-detail-grid > div { display: grid; gap: 4px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.ticket-detail-grid strong { color: var(--muted); font-size: 9px; }
.ticket-detail-grid span { overflow-wrap: anywhere; font-size: 11px; }
.ticket-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.online-dot.is-connected { background: #2dc68e; box-shadow: 0 0 0 3px rgba(45, 198, 142, .12); }
.online-dot:not(.is-connected) { background: #e6a23c; box-shadow: 0 0 0 3px rgba(230, 162, 60, .12); }
.fiscal-items { display: grid; gap: 10px; margin-bottom: 12px; }
.fiscal-item-row { display: grid; grid-template-columns: 1fr 2fr .6fr 1fr .7fr .7fr .8fr 1.2fr; gap: 8px; align-items: end; padding: 12px; border: 1px solid #edf0f4; border-radius: 7px; }
.fiscal-item-row .field { gap: 5px; }
.fiscal-item-row .field > span { font-size: 9px; }
.fiscal-item-row .field input, .fiscal-item-row .field select { min-height: 32px; padding: 6px; font-size: 9px; }
.fiscal-period .field input { min-height: 32px; }
body[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e5ebf5;
  --muted: #9caac0;
  --muted-dark: #b7c2d3;
  --line: #2a374b;
  --canvas: #111a29;
  --white: #192437;
  --shadow: 0 3px 14px rgba(0, 0, 0, .12);
}
body[data-theme="dark"] .topbar,
body[data-theme="dark"] .metric-card,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .hardware-next-step { border-color: #2a374b; background: #192437; }
body[data-theme="dark"] .fiscal-summary article,
body[data-theme="dark"] .fiscal-item-row { border-color: #2a374b; }
body[data-theme="dark"] .fiscal-summary article strong,
body[data-theme="dark"] .fiscal-status-summary { color: #d3deed; }
body[data-theme="dark"] .fiscal-summary article span { color: #9ba9be; }
body[data-theme="dark"] .fiscal-status-summary { border-color: #2a374b; }
body[data-theme="dark"] .fiscal-status-select { border-color: #344258; color: #e1e8f3; }
body[data-theme="dark"] .ticket-dialog { border-color: #2a374b; }
body[data-theme="dark"] .ticket-detail-grid > div { border-color: #2a374b; }
body[data-theme="dark"] .topbar { background: #151f30; }
body[data-theme="dark"] .breadcrumbs strong,
body[data-theme="dark"] .panel-heading h2,
body[data-theme="dark"] .form-section-heading h2,
body[data-theme="dark"] .hardware-results-heading h2,
body[data-theme="dark"] .client-cell strong,
body[data-theme="dark"] .metric-value strong,
body[data-theme="dark"] .spec-card > div > strong,
body[data-theme="dark"] .hardware-next-step > div strong { color: #e3eaf5; }
body[data-theme="dark"] .page-subtitle,
body[data-theme="dark"] .panel-heading p,
body[data-theme="dark"] .form-section-heading p,
body[data-theme="dark"] .metric-label,
body[data-theme="dark"] .client-cell small,
body[data-theme="dark"] .spec-card > div > small,
body[data-theme="dark"] .hardware-next-step > div span { color: #9ba9be; }
body[data-theme="dark"] .search-box,
body[data-theme="dark"] .filter-select,
body[data-theme="dark"] .field input,
body[data-theme="dark"] .field select,
body[data-theme="dark"] .field textarea { border-color: #344258; color: #e1e8f3; background-color: #141f31; }
body[data-theme="dark"] .search-box input,
body[data-theme="dark"] .filter-select select { color: #e1e8f3; }
body[data-theme="dark"] .search-box input::placeholder,
body[data-theme="dark"] .field input::placeholder,
body[data-theme="dark"] .field textarea::placeholder { color: #75849a; }
body[data-theme="dark"] .table-toolbar .search-box,
body[data-theme="dark"] .table-toolbar .filter-select { background: #141f31; }
body[data-theme="dark"] thead { background: #151f30; }
body[data-theme="dark"] th,
body[data-theme="dark"] td,
body[data-theme="dark"] .table-footer,
body[data-theme="dark"] .hardware-footer,
body[data-theme="dark"] .profile-button { border-color: #2a374b; }
body[data-theme="dark"] td { color: #aebbd0; }
body[data-theme="dark"] .service-cell,
body[data-theme="dark"] .field,
body[data-theme="dark"] .check-item { color: #c1cbd9; }
body[data-theme="dark"] .capture-callout { border-color: #293c5c; background: #17243a; }
body[data-theme="dark"] .capture-callout strong,
body[data-theme="dark"] .aside-info strong { color: #d7e2f1; }
body[data-theme="dark"] .capture-callout > div > span,
body[data-theme="dark"] .capture-footnote,
body[data-theme="dark"] .aside-info small,
body[data-theme="dark"] .live-indicator { color: #98a9bf; }
body[data-theme="dark"] .capture-progress { border-color: #293c5c; color: #b2bfd2; background: #17243a; }
body[data-theme="dark"] .progress-track { background: #2b3a52; }
body[data-theme="dark"] .hardware-progress { background: #192437; }
body[data-theme="dark"] .spec-card { border-color: #2a374b; background: #172235; }
body[data-theme="dark"] .spec-card > div > span { color: #9ba9be; }
body[data-theme="dark"] .hardware-footer { color: #9ba9be; }
body[data-theme="dark"] .aside-tip { border-color: #54472e; color: #d2bd91; background: #2a261f; }
body[data-theme="dark"] .aside-tip strong { color: #ead7ad; }
body[data-theme="dark"] .aside-divider { background: #2a374b; }
body[data-theme="dark"] .icon-button { color: #aebbd0; }
body[data-theme="dark"] .icon-button:hover,
body[data-theme="dark"] .row-menu:hover { background: #25334a; }
body[data-theme="dark"] .button-secondary { border-color: #35445b; color: #d0d9e7; background: #1d2a3e; }
body[data-theme="dark"] .button-secondary:hover { background: #26364f; }
body[data-theme="dark"] .button-ghost { color: #b5c1d1; }
body[data-theme="dark"] .button-ghost:hover { background: #25334a; }
body[data-theme="dark"] .empty-icon { color: #a1afc2; background: #25334a; }
body[data-theme="dark"] .empty-state strong { color: #d7e0ed; }
body[data-theme="dark"] .table-result-count,
body[data-theme="dark"] .table-footer { color: #99a8bd; }
body[data-theme="dark"] .custom-checkbox { border-color: #45536a; background: #141f31; }
body[data-theme="dark"] .custom-checkbox input { background: #141f31; }
body[data-theme="dark"] .hardware-next-step .next-step-icon { background: #223451; }
body[data-theme="dark"] .page-footer,
body[data-theme="dark"] .draft-indicator,
body[data-theme="dark"] .required-note { color: #9ba9be; }
body[data-theme="dark"] .toast { border-color: #305344; color: #b9dec9; background: #192a27; }
body[data-theme="dark"] .toast svg { color: #4bc28f; }

@media (min-width: 1500px) {
  .content { padding-top: 37px; }
  .metric-grid { gap: 17px; margin-bottom: 26px; }
}
@media (max-width: 1120px) {
  .sidebar { width: 218px; }
  .main-column { margin-left: 218px; }
  .topbar { padding: 0 24px; }
  .content { padding: 26px 24px 22px; }
  .page-footer { padding-right: 24px; padding-left: 24px; }
  .form-layout { grid-template-columns: minmax(0, 1fr) 235px; gap: 12px; }
  .hardware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiscal-item-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-grid { gap: 10px; }
  .metric-card { padding-right: 12px; padding-left: 12px; }
}
@media (max-width: 820px) {
  .sidebar { width: 225px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 9px 0 25px rgba(15, 28, 48, .14); }
  .sidebar.is-open { transform: translateX(0); }
  .main-column { margin-left: 0; }
  .mobile-menu { display: grid; }
  .topbar { height: 54px; flex-basis: 54px; padding: 0 19px; }
  .content { padding: 24px 19px 18px; }
  .page-footer { padding: 10px 19px 14px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .fiscal-period { flex-wrap: wrap; }
  .fiscal-period .field { flex: 1; min-width: 120px; }
  .fiscal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 12px; padding-left: 12px; }
  .ticket-dialog { padding: 16px; }
  .form-aside { position: static; grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr); align-items: start; }
  .aside-panel { grid-row: span 2; }
  .aside-tip { align-self: start; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .topbar { padding: 0 13px; }
  .topbar-actions { gap: 9px; }
  .today-label { display: none; }
  .content { padding: 20px 12px 14px; }
  .page-footer { padding: 9px 12px 12px; font-size: 8px; }
  .page-heading { align-items: flex-start; }
  .dashboard-heading { flex-direction: column; gap: 14px; }
  .dashboard-heading .button { align-self: stretch; }
  h1 { font-size: 21px; }
  .page-subtitle { font-size: 10px; line-height: 1.5; }
  .metric-grid { gap: 8px; margin-bottom: 14px; }
  .metric-card { padding: 11px 10px; }
  .metric-caption { font-size: 8px; }
  .metric-value strong { font-size: 20px; }
  .metric-label { margin-top: 9px; }
  .panel-heading { padding: 14px 12px 11px; }
  .panel-heading p { max-width: 230px; font-size: 9px; line-height: 1.4; }
  .panel-heading .button { min-height: 30px; padding: 0 8px; font-size: 9px; }
  .panel-heading .button svg { width: 13px; }
  .table-toolbar { align-items: stretch; padding: 0 12px 11px; }
  .search-box { flex: 1; min-width: 0; }
  .filter-select { width: 132px; }
  .filter-select select { font-size: 9px; }
  th { padding: 0 9px; }
  td { padding: 8px 9px; }
  th:first-child, td:first-child { padding-left: 12px; }
  .table-footer { padding: 0 12px; font-size: 8px; }
  .form-page-heading { flex-direction: column; gap: 9px; }
  .form-panel { padding: 14px 12px; }
  .fiscal-item-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-columns { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .hardware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 8px; }
  .hardware-grid .field input { padding-right: 6px; padding-left: 7px; font-size: 9px; }
  .capture-callout { flex-wrap: wrap; padding: 9px; }
  .capture-callout > div { min-width: calc(100% - 48px); }
  .capture-button { width: 100%; }
  .capture-progress { grid-template-columns: 15px minmax(0, 1fr) 32px; }
  .capture-progress .progress-track { grid-column: 2; grid-row: 2; }
  .capture-progress > strong { grid-column: 3; grid-row: 2; }
  .checklist-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .form-aside { grid-template-columns: minmax(0, 1fr); }
  .aside-panel { grid-row: auto; }
  .hardware-agent-card { grid-template-columns: minmax(0, 1fr); padding: 14px 15px 48px; }
  .agent-illustration { width: 90px; height: 90px; margin-bottom: 12px; }
  .agent-chip { width: 53px; height: 53px; border-radius: 15px; }
  .agent-chip svg { width: 28px; height: 28px; }
  .agent-copy { text-align: center; }
  .agent-copy p { margin-right: auto; margin-left: auto; }
  .agent-security { right: 10px; bottom: 10px; left: 10px; justify-content: center; }
  .hardware-progress { right: 10px; bottom: 35px; left: 10px; }
  .hardware-results-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .spec-grid { gap: 7px; padding: 0 10px 12px; }
  .spec-card { min-height: 84px; gap: 6px; padding: 9px 7px; }
  .spec-card .spec-icon { width: 25px; height: 25px; flex-basis: 25px; }
  .spec-card > div > span { font-size: 7px; }
  .spec-card > div > strong { font-size: 9px; }
  .spec-card > div > small { font-size: 7px; }
  .hardware-footer { align-items: flex-start; padding: 9px 10px; font-size: 8px; line-height: 1.45; }
  .hardware-footer svg { margin-top: 1px; }
  .hardware-next-step { flex-wrap: wrap; padding: 11px; }
  .hardware-next-step > div { min-width: calc(100% - 48px); }
  .hardware-next-step > .button { width: 100%; }
}
@media (max-width: 360px) {
  .topbar-avatar { display: none; }
  .breadcrumbs { gap: 6px; font-size: 10px; }
  .hardware-grid, .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .spec-card { min-height: 72px; }
}
@media print {
  body[data-theme="dark"] { color-scheme: light; }
  @page { size: A4; margin: 16mm 15mm; }
  html, body { min-width: 0; min-height: 0; background: white !important; }
  body * { visibility: hidden !important; }
  .print-sheet, .print-sheet * { visibility: visible !important; }
  .print-sheet { display: block !important; position: absolute; inset: 0; width: 100%; color: #1e293b; background: white; font-family: Arial, sans-serif; font-size: 10pt; }
  .print-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 12pt; border-bottom: 2pt solid #2865dc; }
  .print-brand { color: #1c2c49; font-size: 17pt; font-weight: 700; letter-spacing: -.5pt; }
  .print-brand span { color: #2865dc; }
  .print-subtitle { margin-top: 3pt; color: #718096; font-size: 8pt; }
  .print-os-number { color: #2865dc; font-size: 10pt; font-weight: 700; text-align: right; }
  .print-os-date { margin-top: 4pt; color: #718096; font-size: 8pt; text-align: right; }
  .print-title { margin: 17pt 0 12pt; color: #1d2b43; font-size: 16pt; }
  .print-section { margin: 0 0 12pt; break-inside: avoid; }
  .print-section h2 { margin: 0 0 7pt; padding-bottom: 4pt; border-bottom: .6pt solid #dbe2eb; color: #2865dc; font-size: 9pt; text-transform: uppercase; letter-spacing: .5pt; }
  .print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7pt 14pt; }
  .print-field { min-width: 0; overflow-wrap: anywhere; }
  .print-field b { display: block; margin-bottom: 2pt; color: #8491a3; font-size: 7pt; font-weight: 600; text-transform: uppercase; }
  .print-field span { color: #27354a; font-size: 9pt; white-space: pre-wrap; }
  .print-text { margin: 0; color: #27354a; font-size: 9pt; line-height: 1.5; white-space: pre-wrap; }
  .print-checks { display: flex; flex-wrap: wrap; gap: 5pt 16pt; color: #27354a; font-size: 8pt; }
  .print-checks span::before { content: "[x] "; color: #168b63; font-weight: 700; }
  .print-footer { margin-top: 32pt; padding-top: 10pt; border-top: .6pt solid #dbe2eb; color: #718096; font-size: 8pt; }
  .print-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 34pt; margin-top: 38pt; text-align: center; }
  .print-signatures span { padding-top: 5pt; border-top: .6pt solid #7a8799; color: #66758a; font-size: 8pt; }
}