.root {
  --ink: light-dark(#18181b, #e8edf5);
  --muted: light-dark(#5e6572, #aab6c8);
  --paper: light-dark(#fff, #171e28);
  --panel: light-dark(#fff, #171e28);
  --line: light-dark(#e1e6ed, #344152);
  --blue: #2468d8;
  --danger: light-dark(#b42318, #ffb5ab);
  --amber: light-dark(#9a5d00, #f3d499);
  --success: light-dark(#067647, #90d9b0);
  --blue-dark: light-dark(#1e56aa, #a6caff);
  color-scheme: light;
  --radius: 12px;
  grid-template-columns: 232px minmax(0, 1fr);
  background: light-dark(#fff, #171e28);
  color: var(--ink);
  font-family: var(--v3-sans), Arial, sans-serif;
  font-size: .875rem;
  line-height: 1.6;
  letter-spacing: -.01em;
}
.root ::selection { background: light-dark(#d9e7ff, #365788); color: light-dark(#133d7b, #f4f7ff); }
.root :focus-visible { outline: 3px solid #2468d8; outline-offset: 3px; }
.root .sidebar { overflow-y: auto; padding: 30px 18px 24px; background: light-dark(#f5f8fc, #111821); border-right: 1px solid var(--line); color: var(--ink); }
.root .brand { gap: 10px; padding-inline: 10px; font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.root .brand>svg { color: light-dark(#245ca8, #94bdff); flex-shrink: 0; }
.root .brand small { margin-top: 5px; color: light-dark(#637083, #a2b1c6); font-size: 10px; }
.root .nav-list { gap: 6px; margin-top: 42px; }
.root .nav-list a { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 12px; border-radius: 8px; color: light-dark(#596474, #b1bed0); font-size: 13px; font-weight: 450; }
.root .nav-list svg { flex-shrink: 0; }
.root .nav-list a:nth-child(3) { margin-top: 24px; }
.root .nav-list a:last-child { margin-top: 24px; }
.root .nav-list a:hover { color: light-dark(#24364d, #e0eafa); background: light-dark(#eaf0f8, #202d3e); }
.root .nav-list a[aria-current="page"] { background: light-dark(#e3edfc, #233a59); color: light-dark(#1e56aa, #a6caff); font-weight: 600; box-shadow: none; }
.root .signout { color: light-dark(#596474, #b1bed0); min-height: 44px; font-size: 13px; border-radius: 8px; }
.root .signout:hover { background: light-dark(#eaf0f8, #202d3e); }
.root .sidebar .form-error { font-size: 12px; color: light-dark(#a1261c, #ffb5ab); }
.root .main-content { padding: 36px 40px 72px; }
.root .main-content>* { max-width: 1240px; }
.root .page-header { margin-bottom: 32px; }
.root .page-header h1 { font-size: 32px; font-weight: 550; line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.root .page-header p { max-width: 70ch; margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.root .page-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
.root .stack { gap: 20px; }
.root .panel { padding: 24px; border-radius: 12px; border-color: var(--line); box-shadow: none; }
.root .panel h2 { font-size: 19px; line-height: 1.35; font-weight: 550; letter-spacing: -.025em; }
.root .panel.stack>h2, .root .panel.stack>h3, .root .panel.stack>p { margin-block: 0; }
.root .page-grid>aside .empty-state { border: 0; background: transparent; padding: 28px 12px; }
.root .panel h3 { font-size: 16px; font-weight: 550; }
.root .panel-heading { margin-bottom: 0; gap: 14px; }
.root .page-grid>aside .panel { padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.root .page-grid>aside .panel:last-child { border-bottom: 0; }
.root .page-grid>aside>h2 { font-size: 18px; }
.root .page-grid>aside.panel { padding: 24px; background: light-dark(#f5f8fc, #111821); border: 0; }
.root .data-list { font-size: 12px; }
.root .data-list>div { gap: 12px; padding-block: 13px; }
.root .data-list dd { font-weight: 550; overflow-wrap: anywhere; min-width: 0; }
.root .notice { padding: 16px; font-size: 12px; line-height: 1.7; }
.root .notice.warning { background: light-dark(#fffae9, #342b1b); border-color: light-dark(#eadcb6, #74613c); color: light-dark(#715015, #f3d499); }
.root .notice.info { background: light-dark(#f0f6ff, #1d2e45); border-color: light-dark(#d6e3f8, #496481); color: light-dark(#254e79, #bdd7fc); }
.root .notice.success { background: light-dark(#effaf4, #172e26); border-color: light-dark(#b8dbca, #496e5c); color: light-dark(#1d6245, #a2dec0); }
.root .field { gap: 8px; }
.root .field label, .root .field-label { font-weight: 550; font-size: 13px; }
.root .field-hint { font-size: 12px; line-height: 1.7; }
.root .field input, .root .field select, .root .field textarea, .root textarea.text-output { border-color: light-dark(#aebbcf, #697b92); border-radius: 8px; caret-color: #2468d8; font-size: 14px; }
.root .field textarea { padding: 16px; line-height: 1.8; }
.root textarea::placeholder, .root input::placeholder { color: light-dark(#697687, #a3b1c5); opacity: 1; }
.root .field input:disabled, .root .field select:disabled, .root .field textarea:disabled { background: light-dark(#f1f4f8, #202833); color: light-dark(#627087, #98a6b9); cursor: not-allowed; }
.root input[type="checkbox"] { accent-color: #2468d8; }
.root .button { min-height: 44px; padding: 10px 18px; border-radius: 12px; font-size: 13px; font-weight: 550; letter-spacing: -.01em; transition: background-color .16s ease, box-shadow .16s ease; }
.root .button.primary {
  position: relative;
  overflow: hidden;
  border: 0;
  background: radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgb(255 255 255 / 60%), transparent), radial-gradient(114.65% 114.65% at 9.73% 17.27%, #1e82e0, #1c38ea);
  background-blend-mode: overlay, normal;
  color: #fff;
  box-shadow: 0 2px 6px rgb(78 108 190 / 18%), inset -3px -3px 4px rgb(191 229 251 / 40%), inset 4px 4px 4px rgb(19 26 228 / 10%);
}
.root .button.primary::before { content: ""; position: absolute; inset: 0; pointer-events: none; padding: 3px; border-radius: 10px; background: linear-gradient(176.87deg, rgb(255 255 255 / 50%) 8.56%, transparent 85.04%); opacity: .45; filter: blur(1px); -webkit-mask: linear-gradient(light-dark(#fff, #171e28) 0 0) content-box, linear-gradient(light-dark(#fff, #171e28) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(light-dark(#fff, #171e28) 0 0) content-box, linear-gradient(light-dark(#fff, #171e28) 0 0); mask-composite: exclude; }
.root .button.primary:hover:not(:disabled) { box-shadow: 0 3px 8px rgb(78 108 190 / 24%), inset -3px -3px 5px rgb(191 229 251 / 55%), inset 4px 4px 4px rgb(19 26 228 / 10%); }
.root .button.primary:active:not(:disabled) { box-shadow: inset 2px 2px 5px rgb(19 26 228 / 30%); }
.root .button.secondary { border-color: light-dark(#cbd5e3, #63758e); color: light-dark(#344a66, #c0d1e8); background: light-dark(#fff, #171e28); box-shadow: none; }
.root .button.secondary:hover:not(:disabled) { background: light-dark(#f1f6fe, #283a50); }
.root .button.danger { background: #b42318; color: #fff; }
.root .button.danger:hover:not(:disabled) { background: #941b12; }
.root .button:disabled { cursor: not-allowed; opacity: .55; }
.root .text-link, .root .text-button { font-size: 12px; font-weight: 550; text-underline-offset: 4px; }
.root .flow-steps { gap: 26px; margin-bottom: 32px; font-size: 12px; }
.root .flow-steps li>span { border-radius: 7px; width: 28px; height: 28px; background: light-dark(#f5f8fc, #111821); border-color: light-dark(#d3ddeb, #53647b); color: light-dark(#5e6572, #afbdd1); font-size: 11px; }
.root .flow-steps [aria-current="step"] { font-weight: 550; color: light-dark(#1e56aa, #a6caff); }
.root .flow-steps [aria-current="step"]>span { background: #2468d8; border-color: #2468d8; color: #fff; }
.root .upload-zone { border-color: light-dark(#c1cddd, #657791); background: light-dark(#f8faff, #1b2533); padding: 16px; border-radius: 8px; }
.root .upload-zone strong { font-weight: 550; font-size: 13px; }
.root .processing-boundary { font-size: 12px; line-height: 1.75; }
.root .scan-options { gap: 18px; }
.root .scan-options>.field { flex: 1; min-width: 160px; }
.root .scan-submit { gap: 16px; }
.root .review-layout { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 24px; }
.root .highlight-text { background: light-dark(#f8faff, #1b2533); border-color: light-dark(#d5dfec, #566b87); line-height: 1.9; }
.root .highlight-text mark { background: light-dark(#e4edff, #29486e); border-color: light-dark(#6c94de, #9ec4ff); }
.root .detection-choice strong { font-size: 13px; font-weight: 550; }
.root .detection-row { padding: 14px; }
.root .detection-details { line-height: 1.75; }
.root .manual-span { border-color: light-dark(#d5dfec, #566b87); }
.root .manual-span legend, .root .scope-grid legend { font-size: 13px; font-weight: 550; }
.root .selection-preview { border: 1px solid light-dark(#d6e3f8, #496481); border-radius: 8px; background: light-dark(#f0f6ff, #1d2e45); }
.root .lifecycle-summary { background: light-dark(#f0f6ff, #1d2e45); border-color: light-dark(#d6e3f8, #496481); font-size: 13px; }
.root .restored-panel { border-color: light-dark(#9ecbb6, #567d69); box-shadow: none; background: light-dark(#f7fcf9, #1c3029); }
.root .check-row { border-color: light-dark(#d5dfec, #566b87); padding: 16px; }
.root .check-row strong { font-size: 13px; font-weight: 550; }
.root .check-row small { margin-top: 6px; font-size: 12px; line-height: 1.75; }
.root .empty-state { border-style: solid; border-color: light-dark(#e1e6ed, #344152); background: light-dark(#f8faff, #1b2533); padding-block: 48px; font-size: 13px; }
.root th { font-size: 11px; font-weight: 550; letter-spacing: .025em; background: light-dark(#f8faff, #1b2533); }
.root td { font-size: 13px; font-variant-numeric: tabular-nums; padding-block: 18px; }
.root .token-list article { flex-wrap: wrap; align-items: start; gap: 10px; }
.root .token-list small { overflow-wrap: anywhere; flex-basis: 100%; }
.root .session-list article { flex-wrap: wrap; }
.root .danger-zone { border: 1px solid light-dark(#ebc4bf, #78504b) !important; background: light-dark(#fffaf9, #312321) !important; }
.root .confirm-dialog { font-family: inherit; border-radius: 16px; padding: 28px; font-size: 14px; line-height: 1.75; }
.root .confirm-dialog h2 { font-size: 24px; line-height: 1.2; font-weight: 550; }
.root .confirm-dialog::backdrop { background: rgb(20 31 51 / 45%); }
@media (min-width: 1600px) { .root .main-content { padding-inline: 64px; } }
@media (max-width: 1200px) {
  .root { grid-template-columns: 208px minmax(0, 1fr); }
  .root .main-content { padding-inline: 28px; }
  .root .page-grid { grid-template-columns: 1fr; }
  .root .page-grid>aside.stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .root .review-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .root { display: block; }
  .root .sidebar { position: static; height: auto; padding: 14px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .root .brand { padding-inline: 0; }
  .root .app-menu-toggle { border-color: light-dark(#cbd5e3, #63758e); color: light-dark(#344a66, #c0d1e8); background: light-dark(#fff, #171e28); font-size: 13px; }
  .root .nav-list { margin-top: 18px; }
  .root .nav-list a:nth-child(3), .root .nav-list a:last-child { margin-top: 10px; }
  .root .main-content { padding: 28px 24px 56px; }
  .root .page-header h1 { font-size: 28px; }
}
@media (max-width: 560px) {
  .root .main-content { padding-inline: 18px; }
  .root .page-grid>aside.stack { grid-template-columns: 1fr; }
  .root .page-header { margin-bottom: 24px; }
  .root .page-header p { font-size: 13px; }
  .root .panel { padding: 18px; }
  .root .panel-heading { flex-wrap: wrap; }
  .root .flow-steps { gap: 12px; margin-bottom: 28px; font-size: 11px; }
  .root .scan-options>.field { min-width: 0; flex-basis: 100%; }
  .root .data-list { font-size: 12px; }
  .root .upload-zone { padding: 14px; }
  .root .confirm-dialog { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .root .button { transition: none; } }

/* Explicit preferences render on the server; System follows the browser live. */
.root[data-appearance="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { .root[data-appearance="system"] { color-scheme: dark; } }
.sidebarFooter { margin-top: auto; padding-top: 28px; }
.root .sidebarFooter .signout { margin-top: 12px; width: 100%; }
.appearance { min-width: 0; border: 0; margin: 0; padding: 0; }
.appearance legend { padding: 0 10px 10px; color: var(--muted); font-size: 11px; }
.appearance>div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: light-dark(#eaf0f8, #0d131c); }
.appearance button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 52px; padding: 6px 2px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.appearance button:hover { color: var(--ink); background: light-dark(#f5f8fc, #202d3e); }
.appearance button[aria-pressed="true"] { color: light-dark(#1e56aa, #a6caff); border-color: light-dark(#a9bcd8, #6785af); background: light-dark(#fff, #233a59); }
.root .skip-link, .root .confirm-dialog { background: var(--panel); color: var(--ink); }
.root .status-pill { background: light-dark(#f8fafc, #202d3e); color: var(--ink); border-color: var(--line); }
.root .lifecycle-summary .status-pill { background: var(--panel); border-color: var(--line); }
.root .detection-row.excluded { background: light-dark(#f6f7f9, #202833); }
.root .detection-row code { color: var(--ink); }
.root .field input, .root .field select, .root .field textarea, .root textarea.text-output { background: var(--panel); color: var(--ink); }
.root .secret-panel { background: light-dark(#fffbf1, #342b1b); border-color: light-dark(#e9c87d, #74613c); }
.root .secret-value { background: var(--panel); color: var(--ink); border-color: light-dark(#d5b972, #897348); }
.root .selection-context-menu { background: var(--panel); color: var(--ink); border-color: light-dark(#9baac0, #61758f); }
.root .selection-context-menu button { background: var(--panel); color: var(--ink); }
.root .selection-context-menu button:hover, .root .selection-context-menu button:focus-visible { background: light-dark(#edf1ff, #233a59); }
.root .selection-context-menu button:first-child { color: var(--blue-dark); }
.root .confirm-dialog::backdrop { background: rgb(7 12 21 / 65%); }
.root :focus-visible { outline-color: light-dark(#2468d8, #9ec4ff); }
.root .highlight-text mark:focus { outline-color: light-dark(#2468d8, #9ec4ff); }
@media (max-width: 860px) {
  .sidebarFooter { display: none; grid-column: 1 / -1; padding-top: 20px; }
  .root .sidebar.menu-open .sidebarFooter { display: block; }
  .appearance { max-width: 310px; }
  .appearance button { font-size: 12px; }
}
/* Match native document scrollbars only while the app is mounted. */
html:has(.root[data-appearance="dark"]) { color-scheme: dark; }
html:has(.root[data-appearance="light"]) { color-scheme: light; }
@media (prefers-color-scheme: dark) { html:has(.root[data-appearance="system"]) { color-scheme: dark; } }