/* tiklabo Web/PWA V1 — mobile-first, no external font or tracking dependency. */
:root {
  --bg: var(--tik-color-background);
  --surface: var(--tik-color-surface);
  --surface-subtle: var(--tik-color-background-secondary);
  --surface-strong: var(--tik-color-disabled-surface);
  --text: var(--tik-color-text-primary);
  --muted: var(--tik-color-text-secondary);
  --line: var(--tik-color-border);
  --brand: var(--tik-color-accent);
  --brand-hover: var(--tik-color-accent-hover);
  --brand-soft: var(--tik-color-accent-selected);
  --gold: var(--tik-color-brand-gold);
  --on-gold: var(--tik-color-on-brand-gold);
  --gold-soft: var(--tik-color-warning-subtle);
  --success: var(--tik-color-success);
  --success-soft: var(--tik-color-success-subtle);
  --warning: var(--tik-color-warning);
  --warning-soft: var(--tik-color-warning-subtle);
  --danger: var(--tik-color-danger);
  --danger-soft: var(--tik-color-danger-subtle);
  --focus: var(--tik-color-focus);
  --shadow-sm: var(--tik-elevation-low);
  --shadow-lg: var(--tik-elevation-high);
  --radius-sm: var(--tik-radius-control);
  --radius: var(--tik-radius-card);
  --radius-lg: var(--tik-radius-dialog);
  --content: var(--tik-content-max-width);
  font-family: var(--tik-font-family-sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

html[data-theme="dark"] {
  --bg: var(--tik-color-background);
  --surface: var(--tik-color-surface);
  --surface-subtle: var(--tik-color-background-secondary);
  --surface-strong: var(--tik-color-disabled-surface);
  --text: var(--tik-color-text-primary);
  --muted: var(--tik-color-text-secondary);
  --line: var(--tik-color-border);
  --brand: var(--tik-color-accent);
  --brand-hover: var(--tik-color-accent-hover);
  --brand-soft: var(--tik-color-accent-selected);
  --gold: var(--tik-color-brand-gold);
  --gold-soft: var(--tik-color-warning-subtle);
  --success: var(--tik-color-success);
  --success-soft: var(--tik-color-success-subtle);
  --warning: var(--tik-color-warning);
  --warning-soft: var(--tik-color-warning-subtle);
  --danger: var(--tik-color-danger);
  --danger-soft: var(--tik-color-danger-subtle);
  --shadow-sm: var(--tik-elevation-low);
  --shadow-lg: var(--tik-elevation-high);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: var(--tik-color-background); --surface: var(--tik-color-surface);
    --surface-subtle: var(--tik-color-background-secondary); --surface-strong: var(--tik-color-disabled-surface);
    --text: var(--tik-color-text-primary); --muted: var(--tik-color-text-secondary);
    --line: var(--tik-color-border); --brand: var(--tik-color-accent);
    --brand-hover: var(--tik-color-accent-hover); --brand-soft: var(--tik-color-accent-selected);
    --gold: var(--tik-color-brand-gold); --gold-soft: var(--tik-color-warning-subtle);
    --success: var(--tik-color-success); --success-soft: var(--tik-color-success-subtle);
    --warning: var(--tik-color-warning); --warning-soft: var(--tik-color-warning-subtle);
    --danger: var(--tik-color-danger); --danger-soft: var(--tik-color-danger-subtle);
    --shadow-sm: var(--tik-elevation-low); --shadow-lg: var(--tik-elevation-high);
  }
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
body, button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
button { color: inherit; }
h1, h2, h3, p { margin-block-start: 0; }
h1 { margin-bottom: .5rem; font-size: clamp(1.8rem, 5vw, 2.75rem); line-height: 1.12; letter-spacing: -.035em; }
h2 { margin-bottom: .4rem; font-size: clamp(1.1rem, 3vw, 1.35rem); line-height: 1.25; }
h3 { margin-bottom: .35rem; font-size: 1rem; }
p { margin-bottom: 1rem; }
small { font-size: .8125rem; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 1rem; top: -5rem; background: var(--surface); color: var(--text); border: 2px solid var(--focus); border-radius: var(--radius-sm); padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 74%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }

.tik-icon { width: 1.2rem; height: 1.2rem; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.pilot-shell { min-height: 100vh; }
.anonymous-header { position: sticky; z-index: 50; top: 0; min-height: 5.25rem; padding: .35rem max(1rem, env(safe-area-inset-right)) .35rem max(1rem, env(safe-area-inset-left)); display: flex; align-items: center; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); }
body[data-session-state="authenticated"] .anonymous-header { display: none; }
.pilot-app-chrome { display: contents; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); text-decoration: none; flex: 0 0 auto; }
.brand img.brand-logo { width: 6.4rem; height: 4.8rem; display: block; object-fit: contain; border-radius: .35rem; }
.app-sidebar { display: none; }
.app-header { position: sticky; z-index: 50; top: 0; min-height: 4.25rem; padding: .55rem 10.5rem .55rem max(1rem, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); }
.app-header-context { min-width: 0; display: grid; line-height: 1.2; }
.app-header-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.app-header-product { color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.nav-actions { display: flex; align-items: center; gap: .55rem; }
.shell-controls { position: fixed; z-index: 65; top: .85rem; right: max(1rem, env(safe-area-inset-right)); display: flex; align-items: center; gap: .5rem; }
.shell-controls > * { flex-shrink: 0; }
.shell-install-public { white-space: nowrap; }
@media (min-width: 48rem) {
  body[data-session-state="authenticated"] .shell-install-public { display: none; }
}
@media (display-mode: standalone) {
  [data-install-app] { display: none !important; }
}
.shell-language-switch { display: inline-flex; min-height: var(--tik-touch-target-min); padding: 0; gap: .1rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
.shell-language-switch button { min-width: var(--tik-touch-target-min); min-height: var(--tik-touch-target-min); padding: .25rem .5rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.shell-language-switch button:hover { color: var(--text); background: var(--brand-soft); }
.shell-language-switch button[aria-pressed="true"], .shell-language-switch button[data-active] { color: var(--on-gold); background: var(--gold); }
.shell-language-switch button:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 58%, transparent); outline-offset: 2px; }
.settings-language { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.settings-language [data-active], .settings-language [aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: var(--on-gold); }
.shell-primary-nav { display: grid; gap: .25rem; }
.shell-nav-item { min-height: var(--tik-touch-target-min); padding: .65rem .75rem; display: flex; align-items: center; gap: .7rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); font-weight: 680; text-decoration: none; }
.shell-nav-item:hover { background: var(--surface-subtle); color: var(--text); }
.shell-nav-item[aria-current="page"] { border-color: color-mix(in srgb, var(--brand) 20%, transparent); background: var(--brand-soft); color: var(--brand); }
.sidebar-account { margin-top: auto; padding-top: 1rem; display: grid; gap: .35rem; border-top: 1px solid var(--line); }
.sidebar-account small { padding-inline: .75rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.session-gate { min-height: calc(100vh - 5.25rem); padding: 2rem 1rem; display: grid; place-items: center; align-content: center; gap: .8rem; color: var(--muted); text-align: center; }
.session-gate img { width: 7.5rem; height: auto; }
.session-gate-spinner { width: 1.6rem; height: 1.6rem; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: shell-spin .8s linear infinite; }
body[data-session-state="authenticated"] .session-gate { display: none; }
@keyframes shell-spin { to { transform: rotate(360deg); } }
.pilot-content { min-width: 0; }
.connection-state { display: none; align-items: center; gap: .42rem; color: var(--muted); font-size: .78rem; }
.connection-state i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--warning); }
.connection-state.online i { background: var(--success); }
.connection-state.offline i { background: var(--danger); }
.connection-state.pending i { background: var(--warning); animation: pulse 1s ease-in-out infinite alternate; }
.offline-banner { width: min(100% - 2rem, var(--content)); margin: .75rem auto 0; padding: .75rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; border: 1px solid var(--warning); border-radius: var(--radius); background: var(--warning-soft); color: var(--text); }
.offline-banner span { flex: 1 1 20rem; color: var(--muted); }
.pwa-update-ready { position: fixed; z-index: 70; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); width: min(30rem, calc(100% - 2rem)); padding: 1rem; border: 1px solid var(--brand); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.pwa-update-details { display: grid; gap: .7rem; }
.pwa-update-details > strong { color: var(--brand); }
.pwa-update-details p { margin: 0; font-size: .88rem; line-height: 1.45; }
.pwa-update-message { color: var(--danger); }
.pwa-update-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.pwa-update-actions .button, .pwa-update-ready > .button { min-height: 44px; }
.pwa-update-actions a { padding: .6rem .2rem; font-size: .85rem; }
.pwa-update-ready[data-minimized="true"] { width: auto; max-width: calc(100% - 2rem); padding: 0; border: 0; }
@media (max-width: 47.999rem) {
  .pwa-update-ready { bottom: calc(6rem + env(safe-area-inset-bottom)); }
}
@keyframes pulse { to { opacity: .35; } }
.icon-button { width: var(--tik-touch-target-min); height: var(--tik-touch-target-min); min-width: var(--tik-touch-target-min); min-height: var(--tik-touch-target-min); display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; }
.icon-button:hover { background: var(--surface-subtle); }

.page-shell { width: min(100%, var(--content)); min-height: calc(100vh - 12rem); margin: auto; padding: 1.25rem 1rem 7rem; }
.app-footer { width: min(100%, var(--content)); margin: auto; padding: 1.25rem 1rem 6.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.mobile-nav { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: .3rem max(.3rem, env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom)) max(.3rem, env(safe-area-inset-left)); background: color-mix(in srgb, var(--surface) 96%, transparent); border-top: 1px solid var(--line); box-shadow: 0 -.25rem 1.5rem color-mix(in srgb, var(--text) 7%, transparent); backdrop-filter: blur(16px); }
.mobile-nav .shell-nav-item { min-width: 0; min-height: 3.85rem; padding: .25rem .1rem; display: grid; place-items: center; align-content: center; gap: .08rem; border: 0; border-radius: var(--radius-sm); color: var(--muted); font-size: .7rem; line-height: 1.1; text-align: center; }
.mobile-nav .shell-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-nav .tik-icon { width: 1.28rem; height: 1.28rem; }
.mobile-nav .shell-nav-item[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.mobile-nav .shell-nav-emphasis { align-self: start; min-height: 3.8rem; margin-top: -.7rem; border: 1px solid color-mix(in srgb, var(--gold) 72%, var(--line)); border-radius: 1rem; background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow-sm); }
.mobile-nav .shell-nav-emphasis:hover, .mobile-nav .shell-nav-emphasis[aria-current="page"] { background: color-mix(in srgb, var(--gold) 88%, var(--surface)); color: var(--on-gold); }

.page-heading { margin: .8rem 0 1.5rem; }
.page-heading.split { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.page-heading p:last-child { margin-bottom: 0; }
.heading-actions { display: flex; gap: .75rem; }
.eyebrow { margin-bottom: .45rem; color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .105em; text-transform: uppercase; }
.lead { color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); }
.muted, .hint { color: var(--muted); }
.hint { margin-bottom: .65rem; font-size: .82rem; }
.content-narrow { width: min(100%, 52rem); margin-inline: auto; }
.content-wide { width: min(100%, 70rem); margin-inline: auto; }
.watch-form-layout { display: grid; gap: 1rem; }
.back-link { display: inline-block; margin-bottom: .9rem; color: var(--muted); font-weight: 650; text-decoration: none; }

.panel, .auth-card, .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel { padding: clamp(1rem, 3vw, 1.5rem); }
.auth-layout { min-height: calc(100vh - 13rem); display: grid; gap: 1.5rem; align-items: center; }
.welcome-panel { padding: 1rem .25rem; }
.welcome-panel h1 { font-size: clamp(2.3rem, 8vw, 4.75rem); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.auth-card { width: 100%; max-width: 31rem; margin-inline: auto; padding: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--shadow-lg); }
.benefit-list { display: grid; gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.benefit-list li { display: flex; gap: .8rem; align-items: flex-start; }
.benefit-list li > span:first-child { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.benefit-list li > span:last-child { display: grid; }
.benefit-list small { color: var(--muted); }
.segmented-control { margin: -1rem -1rem 1.5rem; padding: .35rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: .75rem; background: var(--surface-subtle); }
.segmented-control button { min-width: 0; min-height: 2.6rem; padding-inline: .45rem; border: 0; border-radius: .55rem; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
.segmented-control button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.session-welcome { text-align: center; }
.privacy-note { display: flex; gap: .5rem; margin: 1.25rem 0 0; color: var(--muted); font-size: .77rem; }

.form-stack { display: grid; gap: 1.15rem; }
.form-grid { display: grid; gap: 1rem; }
.form-grid.two { grid-template-columns: 1fr; }
.form-grid.three { grid-template-columns: 1fr; }
.form-grid .span-two { grid-column: 1 / -1; }
label { display: grid; gap: .38rem; color: var(--text); font-size: .875rem; font-weight: 680; }
label small { color: var(--muted); font-weight: 400; }
input, select, textarea { width: 100%; min-height: 2.85rem; padding: .68rem .78rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
textarea { min-height: 5rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input:disabled, select:disabled, textarea:disabled { opacity: 1; background: var(--surface-subtle); color: var(--muted); }
fieldset { margin: 0; padding: 0; border: 0; }
legend { margin-bottom: .25rem; font-size: 1.05rem; font-weight: 750; }
.check-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .7rem; font-weight: 500; }
.check-row input { width: 1.15rem; min-height: 1.15rem; margin-top: .18rem; accent-color: var(--brand); flex: 0 0 auto; }
.check-row-label-prefix { display: inline; font: inherit; }
.field-error { display: block; color: var(--danger); font-size: .78rem; font-weight: 600; }
.check-row .field-error { flex-basis: 100%; margin-left: 1.85rem; }
.form-section-heading { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.form-section-heading > span { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: white; font-weight: 800; }
.form-section-heading h2, .form-section-heading p { margin-bottom: 0; }
.form-section-heading p { color: var(--muted); font-size: .82rem; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; padding-top: .5rem; }
.form-grid { align-items: end; }
.form-grid > label, .form-grid > div, .form-grid > fieldset { min-width: 0; }
.form-grid > .form-actions { grid-column: 1 / -1; align-items: center; }
.form-grid > .check-row { align-self: center; }
.form-actions > .button { min-height: 2.85rem; height: auto; white-space: normal; }
.select-search { position: relative; min-width: 0; width: 100%; }
.select-search::after { content: "⌄"; position: absolute; right: .8rem; top: .55rem; pointer-events: none; color: var(--muted); }
.select-search .select-search-native { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; clip-path: inset(50%); pointer-events: none; }
.select-search .select-search-input { padding-right: 2.25rem; text-overflow: ellipsis; }
.select-search-popup { position: fixed; z-index: 10000; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: .875rem; }
.select-search-option { padding: .7rem .85rem; min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.select-search-option[aria-selected="true"] { font-weight: 750; }
.select-search-option.is-active, .select-search-option:hover { background: var(--brand-soft); color: var(--brand-strong); }
.select-search-option[aria-disabled="true"] { color: var(--muted); cursor: default; opacity: .65; }
.select-search-count { padding: .55rem .85rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.form-status { padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--muted); font-size: .875rem; }
.form-status.error { background: var(--danger-soft); color: var(--danger); }
.form-status.success { background: var(--success-soft); color: var(--success); }
.legal-page { display: grid; gap: 1rem; }
.legal-document { display: grid; gap: .8rem; max-width: 52rem; }
.legal-document h2 { margin: .7rem 0 0; font-size: 1.15rem; }
.legal-document p { margin: 0; }

.button { min-height: var(--tik-touch-target-min); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .65rem 1.05rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 750; line-height: 1; text-decoration: none; cursor: pointer; }
.button:disabled { cursor: not-allowed; opacity: .58; }
.button.valuation-confirm { background: #b32632; border-color: #b32632; color: #fff; }
.button.valuation-confirm:hover:not(:disabled) { background: #901c27; border-color: #901c27; }
.button.valuation-confirm:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.button.valuation-confirm:disabled { background: #e6c5c8; border-color: #c69298; color: #643239; opacity: 1; }
.button.primary { background: var(--gold); color: var(--on-gold); }
.button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--gold) 86%, #000); }
.button.secondary { border-color: var(--line); background: var(--surface); color: var(--text); }
.button.secondary:hover:not(:disabled) { background: var(--surface-subtle); }
.button.ghost { background: transparent; color: var(--muted); }
.button.danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); color: var(--danger); }
.button.wide { width: 100%; }
.button.compact { min-height: var(--tik-touch-target-min); padding: .55rem .75rem; font-size: .82rem; }

.alert { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; border-radius: var(--radius-sm); font-size: .875rem; }
.alert.info { background: var(--brand-soft); color: var(--text); border-left: 3px solid var(--brand); }
.alert.error { margin-bottom: 1rem; background: var(--danger-soft); color: var(--danger); border-left: 3px solid var(--danger); }
.badge { width: max-content; display: inline-flex; align-items: center; min-height: 1.7rem; padding: .2rem .6rem; border-radius: 999px; background: var(--surface-subtle); color: var(--muted); font-size: .72rem; font-weight: 780; }
.badge.success { background: var(--success-soft); color: var(--success); }

.choice-grid { display: grid; gap: .75rem; margin-top: 1rem; }
.choice-card { position: relative; min-height: 7.25rem; padding: 1rem; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-content: center; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.choice-card:hover { border-color: var(--brand); background: var(--brand-soft); }
.choice-card:has(input:checked) { border: 2px solid var(--brand); background: var(--brand-soft); }
.choice-card input { position: absolute; top: .75rem; right: .75rem; width: 1rem; min-height: 1rem; accent-color: var(--brand); }
.choice-card > span { grid-row: 1 / 3; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface-subtle); color: var(--brand); font-size: 1.2rem; }
.choice-card small { color: var(--muted); font-weight: 400; }
.check-grid { display: grid; gap: .4rem .8rem; grid-template-columns: 1fr; }
.check-grid .check-row { padding: .7rem; border-radius: var(--radius-sm); background: var(--surface-subtle); }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1rem; }
.kpi { min-height: 7.6rem; padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
.kpi span { color: var(--muted); font-size: .78rem; }
.kpi strong { margin: .18rem 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.1; }
.kpi small { color: var(--muted); }
.collection-panel { padding: 0; overflow: hidden; }
.panel-toolbar { padding: 1rem; display: flex; flex-direction: column; gap: .9rem; border-bottom: 1px solid var(--line); }
.panel-toolbar h2, .panel-toolbar p { margin-bottom: 0; }
.toolbar-actions { display: flex; flex-direction: column; gap: .65rem; }
.search-field { min-height: 2.65rem; display: flex; align-items: center; gap: .45rem; padding: 0 .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.search-field:focus-within { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); border-color: var(--focus); }
.search-field input { min-height: 2.5rem; padding: .4rem 0; border: 0; outline: 0; }
.search-field.large { min-height: 3.25rem; }
.search-field.large input { min-height: 3rem; }
.watch-list { display: grid; }
.watch-row { min-height: 5.75rem; display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .65rem 1rem; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.watch-row:last-child { border-bottom: 0; }
.watch-row:hover, .watch-row:focus-visible { background: var(--surface-subtle); }
.watch-row.is-archived { background: color-mix(in srgb, var(--surface-subtle) 72%, transparent); }
.watch-row:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 38%, transparent); outline-offset: -3px; }
.watch-row-thumbnail { width: 4rem; height: 4rem; position: relative; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--brand); }
.watch-row-thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; }
.watch-row-thumbnail .tik-icon { width: 1.55rem; height: 1.55rem; }
.watch-row-main { min-width: 0; display: grid; }
.watch-row-main strong, .watch-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-row-main small, .watch-row-meta { color: var(--muted); }
.watch-row-meta { display: grid; justify-items: end; font-size: .75rem; }
.watch-row-meta > span:first-child { color: var(--text); font-weight: 700; }
.watch-preview-popover { position: fixed; z-index: 85; width: min(20rem, calc(100vw - 2rem)); max-height: calc(100dvh - 1rem); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); pointer-events: none; }
.watch-preview-popover[hidden] { display: none; }
.watch-preview-media { width: 100%; aspect-ratio: 4 / 3; position: relative; display: grid; place-items: center; background: var(--surface-subtle); }
.watch-preview-media img { width: 100%; height: 100%; display: block; object-fit: contain; }
.watch-preview-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--brand); }
.watch-preview-placeholder .tik-icon { width: 3.25rem; height: 3.25rem; }
.watch-preview-body { padding: .85rem 1rem 1rem; display: grid; gap: .35rem; }
.watch-preview-body > strong, .watch-preview-body > span { overflow-wrap: anywhere; }
.watch-preview-body > span { color: var(--muted); font-size: .82rem; }
.watch-preview-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.badge.subtle { border-color: var(--line); background: var(--surface-subtle); color: var(--text); }
.watch-preview-body dl { margin: .35rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.watch-preview-body dl div { min-width: 0; }
.watch-preview-body dt { color: var(--muted); font-size: .72rem; }
.watch-preview-body dd { margin: .1rem 0 0; font-weight: 700; overflow-wrap: anywhere; }

.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }
.empty-state.narrow { width: min(100%, 36rem); margin: 4rem auto; }
.empty-state.compact { padding: 1.25rem; }
.empty-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.empty-icon .tik-icon { width: 1.65rem; height: 1.65rem; }
.loading-list, .loading-panel { display: grid; gap: .65rem; padding: 1rem; }
.loading-list i, .loading-panel i { display: block; height: 3.25rem; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-subtle), var(--surface-strong), var(--surface-subtle)); background-size: 220% 100%; animation: shimmer 1.4s infinite; }
.loading-panel { max-width: 50rem; margin: auto; }
@keyframes shimmer { to { background-position: -220% 0; } }

.card-section-nav { margin: -.35rem 0 1rem; padding: .35rem; display: flex; gap: .25rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scrollbar-width: thin; }
.card-section-nav a { min-height: var(--tik-touch-target-min); padding: .55rem .8rem; display: inline-flex; align-items: center; flex: 0 0 auto; border-radius: var(--radius-sm); color: var(--muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.card-section-nav a:hover, .card-section-nav a:focus-visible { background: var(--brand-soft); color: var(--brand); }
.detail-grid { display: grid; gap: 1rem; margin-bottom: 1rem; scroll-margin-top: 9rem; }
.watch-summary-card { display: grid; gap: 1rem; }
.watch-overview-stack { min-width: 0; display: grid; gap: 1rem; }
.detail-grid, .watch-overview-stack { align-items: start; align-content: start; }
.watch-summary-card { align-content: start; }
.watch-disclosure, .watch-subdisclosure { display: block; min-width: 0; scroll-margin-top: 9rem; }
.watch-disclosure { margin-bottom: .75rem; padding: 0 1rem; }
.watch-disclosure > summary, .watch-subdisclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.25rem; padding: .8rem 0; cursor: pointer; list-style: none; }
.watch-disclosure > summary::-webkit-details-marker, .watch-subdisclosure > summary::-webkit-details-marker { display: none; }
.watch-disclosure > summary::after, .watch-subdisclosure > summary::after { content: "+"; flex: 0 0 auto; font-size: 1.3rem; color: var(--brand); }
.watch-disclosure[open] > summary::after, .watch-subdisclosure[open] > summary::after { content: "−"; }
.watch-disclosure > summary h2, .watch-subdisclosure > summary h3 { margin: 0; font-size: 1rem; }
.watch-disclosure > summary p { margin: .2rem 0 0; font-size: .8rem; }
.watch-disclosure-body { min-width: 0; padding: .25rem 0 1rem; }
.watch-subdisclosure { border-top: 1px solid var(--line); }
.watch-subdisclosure > summary { font-weight: 700; font-size: .875rem; }
.watch-subdisclosure > summary .count-badge { margin-left: auto; }
.watch-finance-overview { margin-bottom: .75rem; }
.watch-finance-overview .kpi { min-height: 0; padding: .75rem; }
.watch-finance-overview .kpi strong { font-size: clamp(1.05rem, 1.7vw, 1.5rem); overflow-wrap: anywhere; }
.watch-disclosure .section-heading, .watch-disclosure .panel-toolbar { align-items: center; }
.watch-disclosure .section-heading > div, .watch-disclosure .panel-toolbar > div { min-width: 0; }
.watch-disclosure .form-grid > .form-actions { grid-column: 1 / -1; }
.details-section { display: grid; gap: .85rem; padding-top: 1.15rem; border-top: 1px solid var(--line); scroll-margin-top: 9rem; }
.details-section > legend { padding-right: .75rem; color: var(--brand-strong); }
.details-section > .muted { margin: -.35rem 0 0; }
.details-grid { min-width: 0; }
.condition-result { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--surface-subtle); }
.condition-result > span:not(.badge) { display: grid; gap: .16rem; color: var(--muted); font-size: .78rem; }
.condition-result strong { color: var(--text); font-size: 1rem; }
.condition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.watch-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.watch-kpi-grid .kpi { min-height: 6.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.watch-kpi-grid .kpi > .button { align-self: flex-start; margin-top: .65rem; }
.watch-photo { width: 100%; min-height: 11rem; padding: 0; position: relative; overflow: hidden; border: 0; border-radius: var(--radius); background: var(--surface-subtle); cursor: zoom-in; }
.watch-photo:disabled { cursor: default; }
.watch-photo > img { width: 100%; height: 100%; min-height: 11rem; max-height: 22rem; display: block; object-fit: contain; }
.watch-placeholder { min-height: 11rem; display: grid; place-items: center; border-radius: var(--radius); background: var(--surface-subtle); color: var(--brand); font-size: 4rem; }
.watch-placeholder .tik-icon { width: 4rem; height: 4rem; }
.section-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.section-heading h2, .section-heading p { margin-bottom: 0; }
.revision-label { color: var(--muted); font-size: .78rem; }
.financial-panel { margin-bottom: 1rem; scroll-margin-top: 9rem; }
.financial-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: end; }
.finance-history-panel { margin-bottom: 1rem; scroll-margin-top: 9rem; }
.finance-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.finance-summary-grid .kpi { min-height: 6rem; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.finance-entry-form { padding: 1rem; border-radius: var(--radius); background: var(--surface-subtle); }
.finance-history-list { display: grid; border-top: 1px solid var(--line); }
.finance-history-item { padding: .9rem 0; display: grid; gap: .6rem; border-bottom: 1px solid var(--line); }
.finance-history-item:last-child { border-bottom: 0; }
.finance-history-main { min-width: 0; display: grid; gap: .2rem; }
.finance-history-main > span { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.finance-history-money { display: grid; justify-items: start; gap: .1rem; }
.finance-history-money strong { font-size: 1rem; }
.finance-history-money small { color: var(--muted); }
.finance-history-actions { display: flex; align-items: center; justify-content: flex-start; }
.finance-history-item.is-reversal { color: var(--muted); }
.finance-history-item.is-reversal .finance-history-money strong { text-decoration: line-through; }
.ebay-valuation { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-subtle); }
.ebay-settings { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .65rem 0; }
.ebay-settings summary { cursor: pointer; font-weight: 700; }
.ebay-settings form { margin-top: .8rem; }
.ebay-result { display: grid; gap: 1rem; }
.ebay-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ebay-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ebay-offers { display: grid; gap: .35rem; max-height: min(65vh, 36rem); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding-right: .35rem; }
.ebay-offer { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.ebay-offer.is-excluded { opacity: .62; }
.ebay-offer img { width: 5rem; height: 5rem; object-fit: contain; border-radius: .55rem; background: var(--surface); }
.ebay-offer-main { min-width: 0; display: grid; gap: .35rem; }
.ebay-offer-title { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.ebay-offer-meta { color: var(--muted); font-size: .82rem; }
.ebay-offer-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.ebay-offer-actions select { min-width: 11rem; }
.ebay-price { color: var(--success); font-size: 1rem; font-weight: 800; }
.sale-state-card { margin: 0; padding: .9rem 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; border-radius: var(--radius); background: var(--surface-subtle); }
.sale-state-card div { min-width: 0; display: grid; gap: .18rem; }
.sale-state-card dt { color: var(--muted); font-size: .78rem; }
.sale-state-card dd { margin: 0; font-weight: 750; overflow-wrap: anywhere; }
.confirmation-dialog { width: min(92vw, 32rem); max-height: min(90vh, 42rem); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.confirmation-dialog::backdrop { background: color-mix(in srgb, var(--tik-color-overlay) 72%, transparent); }
.confirmation-dialog-form { display: grid; gap: 1rem; padding: 1.25rem; }
.confirmation-dialog-form > p { margin: 0; }
.confirmation-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.confirmation-dialog-header h2 { margin: 0; font-size: 1.15rem; }
.confirmation-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.cost-correction-dialog { width: min(94vw, 48rem); }
.offer-delivery-dialog { width: min(94vw, 48rem); }
.offer-delivery-list { display: grid; gap: .7rem; min-height: 3rem; }
.offer-delivery-row { display: grid; gap: .75rem; padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.offer-delivery-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; }
.offer-delivery-summary strong { font-size: .9rem; }
.offer-delivery-summary > span:not(.badge) { color: var(--muted); font-size: .82rem; }
.offer-delivery-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.offer-delivery-active, .offer-delivery-verified { color: var(--success); }
.offer-delivery-expired, .offer-delivery-revoked { color: var(--danger); }
.compact-alert { padding: .7rem .8rem; }
.offer-creator, .offers-panel { margin-top: 1rem; }
.offer-fieldset { margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--line); }
.offer-fieldset legend { padding: 0; color: var(--text); font-weight: 750; }
.offer-section-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.offer-section-grid label { min-height: 2.75rem; padding: .65rem .75rem; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.offer-section-grid .offer-section-option input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 1.15rem;
  margin: 0;
  padding: 0;
  flex: 0 0 1.15rem;
  accent-color: var(--brand);
}
.offer-section-grid .offer-section-option span { min-width: 0; line-height: 1.3; }
.offer-media-toolbar { padding: .25rem 0 .75rem; border: 0; }
.offer-media-toolbar p { margin: .25rem 0 0; }
.offer-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .65rem; }
.offer-media-option { position: relative; min-width: 0; padding: .45rem; display: grid; gap: .45rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.offer-media-option:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.offer-media-preview { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; border-radius: calc(var(--radius-sm) - 2px); background: var(--surface-subtle); }
.offer-media-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.offer-media-check { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .45rem; }
.offer-media-check input[type="checkbox"] { width: 1.1rem; height: 1.1rem; min-height: 1.1rem; margin: 0; padding: 0; accent-color: var(--brand); }
.offer-media-check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.offer-media-main { position: absolute; top: .75rem; right: .75rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.compact-loading { min-height: 4rem; }
.offers-list { display: grid; border-top: 1px solid var(--line); }
.offer-card { padding: 1rem 0; display: grid; gap: .8rem; border-bottom: 1px solid var(--line); }
.offer-card:last-child { border-bottom: 0; }
.offer-card-main { min-width: 0; display: grid; gap: .3rem; }
.offer-card-main h3 { margin: 0; font-size: 1.02rem; overflow-wrap: anywhere; }
.offer-card-meta { display: flex; flex-wrap: wrap; gap: .45rem .8rem; color: var(--muted); font-size: .8rem; }
.offer-card-price { display: grid; align-content: center; gap: .15rem; }
.offer-card-price strong { font-size: 1rem; }
.offer-card-price span { color: var(--muted); font-size: .78rem; }
.offer-card-actions { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; }
.offer-status-accepted { border-color: color-mix(in srgb, var(--success) 38%, var(--line)); color: var(--success); }
.span-all { grid-column: 1 / -1; }
.conflict-reload { justify-self: start; }
.data-list { margin: 1rem 0 0; }
.data-list div { padding: .55rem 0; display: grid; grid-template-columns: minmax(6rem, .7fr) 1.3fr; gap: .6rem; border-bottom: 1px solid var(--line); }
.data-list dt { color: var(--muted); font-size: .8rem; }
.data-list dd { margin: 0; font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.media-panel { margin-top: 1rem; scroll-margin-top: 9rem; }
.account-module-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding-top: 1rem; }
.media-tile { min-width: 0; padding: .75rem; display: flex; flex-direction: column; gap: .45rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.media-preview { width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: var(--surface-subtle); cursor: zoom-in; }
.media-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.document-preview { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--brand); text-decoration: none; }
.document-preview .tik-icon { width: 3rem; height: 3rem; }
.media-tile strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.media-tile small { color: var(--muted); }
.media-tile.is-main { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.media-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding-top: .65rem; }
.media-actions .button { min-height: var(--tik-touch-target-min); padding: .45rem .65rem; font-size: .75rem; flex: 1 1 auto; }
.count-badge { min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem; display: inline-grid; place-items: center; border-radius: var(--tik-radius-pill); background: var(--brand-soft); color: var(--brand); font: 700 .75rem/1 var(--tik-font-family-sans); }
.media-viewer { width: min(96vw, 82rem); height: min(92vh, 60rem); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.media-viewer::backdrop { background: color-mix(in srgb, var(--tik-color-overlay) 72%, transparent); }
.media-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer-toolbar { min-height: 3.5rem; padding: .5rem .75rem .5rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.viewer-toolbar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-canvas { min-height: 0; display: grid; place-items: center; overflow: auto; background: var(--surface-subtle); }
.viewer-canvas img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; }

.search-hero { margin-bottom: 1rem; }
.search-hero form { display: grid; gap: .65rem; }
.search-hero .hint { margin: .7rem 0 0; }
.result-list { display: grid; gap: .75rem; margin-bottom: 1rem; }
.result-card { padding: 1rem; display: grid; gap: .35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.result-card header { display: flex; justify-content: space-between; gap: 1rem; }
.result-card p { margin: 0; color: var(--muted); font-size: .85rem; }

.settings-stack { display: grid; gap: .8rem; }
.profile-row, .settings-row, .danger-zone { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.profile-row h2, .profile-row p, .settings-row h2, .settings-row p, .danger-zone h2, .danger-zone p { margin-bottom: 0; }
.avatar { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--brand); color: var(--surface); font-family: Georgia, serif; font-size: 1.45rem; font-weight: 700; }
.offline-page { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.toast-region { position: fixed; z-index: 100; right: 1rem; bottom: 5.5rem; display: grid; gap: .5rem; pointer-events: none; }
.toast { max-width: min(26rem, calc(100vw - 2rem)); padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); animation: toast-in .2s ease-out; }
.toast.error { border-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(.5rem); } }

@media (min-width: 36rem) {
  .page-heading.split, .panel-toolbar, .profile-row, .settings-row, .danger-zone { flex-direction: row; align-items: center; justify-content: space-between; }
  .form-grid.two, .choice-grid, .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar-actions { flex-direction: row; align-items: center; }
  .search-field { min-width: 18rem; }
  .watch-row { grid-template-columns: 4rem minmax(0, 1fr) minmax(7rem, auto); }
  .media-grid { grid-template-columns: repeat(3, 1fr); }
  .search-hero form { grid-template-columns: 1fr auto; }
}

@media (min-width: 48rem) {
  .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .condition-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .financial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finance-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ebay-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ebay-offer { grid-template-columns: 5rem minmax(0, 1fr) auto; align-items: center; }
  .finance-history-item { grid-template-columns: minmax(0, 1.4fr) minmax(8rem, .6fr) auto; align-items: center; }
  .finance-history-money { justify-items: end; }
  .finance-history-actions { justify-content: flex-end; }
  .offer-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-card { grid-template-columns: minmax(0, 1.5fr) minmax(9rem, .5fr) auto; align-items: center; }
  .offer-card-price { justify-items: end; text-align: right; }
  .offer-card-actions { justify-content: flex-end; }
}

@media (min-width: 64rem) {
  .detail-grid { grid-template-columns: minmax(20rem, .7fr) minmax(32rem, 1.3fr); }
  .financial-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .financial-grid .form-actions { grid-column: auto; }
}

@media (min-width: 48rem) {
  .page-shell { padding: 2rem 1.5rem 4rem; }
  .connection-state { display: inline-flex; }
  .app-footer { padding-inline: 1.5rem; }
  .auth-layout { grid-template-columns: minmax(0, 1.15fr) minmax(25rem, .85fr); gap: clamp(2rem, 7vw, 7rem); }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .panel-toolbar { padding: 1.2rem 1.5rem; }
  .watch-row { padding-inline: 1.5rem; }
  .detail-grid { grid-template-columns: minmax(19rem, .75fr) minmax(24rem, 1.25fr); }
  .media-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 70rem) {
  body[data-session-state="authenticated"] .app-sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: 17rem; padding: .5rem 1rem 1rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); }
  .sidebar-brand { min-height: 6.5rem; margin-bottom: .75rem; padding-inline: .5rem; border-bottom: 1px solid var(--line); }
  .sidebar-brand img.brand-logo { width: 7.5rem; height: 5.65rem; }
  body[data-session-state="authenticated"] .app-header { position: fixed; z-index: 50; left: 17rem; right: 0; min-height: 4.25rem; padding-inline: 1.5rem 10.5rem; }
  body[data-session-state="authenticated"] .pilot-content { min-height: 100vh; margin-left: 17rem; padding-top: 4.25rem; }
  body[data-session-state="authenticated"] .mobile-nav { display: none; }
  body[data-session-state="authenticated"] .page-shell { min-height: calc(100vh - 8.5rem); padding-bottom: 3rem; }
  body[data-session-state="authenticated"] .app-footer { padding-bottom: 1.25rem; }
  .connection-state { display: inline-flex; }
  .watch-form-layout { grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .65fr); align-items: start; }
}

@media (min-width: 90rem) {
  .page-shell { padding-inline: 2rem; }
  .media-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 24.375rem) {
  .anonymous-header { padding-inline: .65rem; }
  .app-header { padding-left: .75rem; padding-right: 9.5rem; }
  .shell-controls { right: max(.65rem, env(safe-area-inset-right)); }
  .brand img.brand-logo { width: 5.2rem; }
  .page-shell { padding-inline: .75rem; }
  .mobile-nav .shell-nav-item { font-size: .65rem; }
  .media-grid { grid-template-columns: 1fr; }
  .heading-actions, .heading-actions .button { width: 100%; }
  .watch-row { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .watch-row-thumbnail { width: 3.5rem; height: 3.5rem; }
  .watch-row-meta { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; gap: .5rem; }
  .watch-kpi-grid { grid-template-columns: 1fr; }
}

@media (hover: none), (pointer: coarse) {
  .watch-preview-popover:not([data-keyboard]) { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .anonymous-header, .app-sidebar, .app-header, .mobile-nav, .app-footer, .shell-theme-toggle, .shell-language-switch, .button { display: none !important; }
  .pilot-content { margin: 0 !important; padding: 0 !important; }
  .page-shell { max-width: none; padding: 0; }
  .panel, .kpi { break-inside: avoid; box-shadow: none; }
}

/* MVP visual parity: authentication, onboarding, collection filters and add-watch wizard. */
.pilot-shell:has([data-page="home"]) .anonymous-header,
.pilot-shell:has([data-page="home"]) .app-footer { display: none; }
.pilot-shell:has([data-page="home"]) .page-shell { width: 100%; max-width: none; min-height: 100vh; padding: 0; }
.auth-layout { width: 100%; min-height: 100vh; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; overflow-x: clip; }
.auth-layout > * { min-width: 0; }
.welcome-panel { position: relative; min-height: 23rem; padding: clamp(2rem, 7vw, 5rem); display: grid; align-content: center; overflow: hidden; background: var(--tik-color-light-accent); color: var(--tik-color-light-on-accent); }
.welcome-panel::before, .welcome-panel::after { content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--tik-color-brand-gold) 30%, transparent); border-radius: 50%; pointer-events: none; }
.welcome-panel::before { width: min(52vw, 32rem); aspect-ratio: 1; right: -18%; top: 12%; }
.welcome-panel::after { width: min(38vw, 23rem); aspect-ratio: 1; right: -10%; top: 27%; }
.auth-brand { position: relative; z-index: 1; width: max-content; align-self: start; }
.auth-brand img { width: 7.25rem; height: auto; display: block; }
.welcome-copy, .benefit-list, .auth-tagline { position: relative; z-index: 1; }
.welcome-panel h1 { max-width: 11ch; color: inherit; }
.welcome-panel .lead, .welcome-panel .benefit-list small { color: color-mix(in srgb, var(--tik-color-light-on-accent) 76%, transparent); }
.welcome-panel .eyebrow, .auth-tagline { color: var(--tik-color-brand-gold); }
.welcome-panel .benefit-list li > span:first-child { background: color-mix(in srgb, var(--tik-color-light-on-accent) 12%, transparent); color: var(--tik-color-brand-gold); }
.auth-tagline { align-self: end; margin: 2rem 0 0; font-size: .78rem; }
.auth-card { align-self: center; margin-block: 2rem; }

.onboarding-page { max-width: 64rem; }
.onboarding-progress, .wizard-progress { margin: 0 0 1rem; padding: 0; display: grid; list-style: none; }
.onboarding-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wizard-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.onboarding-progress li, .wizard-progress li { min-width: 0; padding: .65rem .35rem; display: grid; justify-items: center; gap: .35rem; position: relative; color: var(--muted); text-align: center; }
.onboarding-progress li::before, .wizard-progress li::before { content: ""; position: absolute; z-index: 0; top: 1.25rem; left: 0; right: 0; height: 1px; background: var(--line); }
.onboarding-progress li:first-child::before, .wizard-progress li:first-child::before { left: 50%; }
.onboarding-progress li:last-child::before, .wizard-progress li:last-child::before { right: 50%; }
.onboarding-progress li > span, .wizard-progress li > span { z-index: 1; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: .75rem; font-weight: 800; }
.onboarding-progress li > strong, .wizard-progress li > strong { min-width: 0; font-size: clamp(.68rem, 2.2vw, .82rem); line-height: 1.25; }
.onboarding-progress li[aria-current="step"], .wizard-progress li[aria-current="step"], .wizard-progress li.is-complete { color: var(--brand); }
.onboarding-progress li[aria-current="step"] > span, .wizard-progress li[aria-current="step"] > span { border-color: var(--brand); background: var(--brand); color: var(--tik-color-on-accent); }
.wizard-progress li.is-complete > span { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.onboarding-card { box-shadow: none; }
.choice-card .tik-icon { width: 1.35rem; height: 1.35rem; }

.state-panel { min-height: 16rem; padding: 2rem 1rem; display: grid; place-items: center; align-content: center; gap: .65rem; color: var(--muted); text-align: center; }
.state-panel h3, .state-panel p { max-width: 34rem; margin: 0; }
.state-icon { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.state-icon .tik-icon { width: 1.65rem; height: 1.65rem; }
.error-state .state-icon { background: var(--danger-soft); color: var(--danger); }
.filter-trigger { white-space: nowrap; }
.filter-drawer { width: min(28rem, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.filter-drawer::backdrop { background: color-mix(in srgb, var(--tik-color-overlay) 55%, transparent); }
.filter-drawer[open] { display: block; }
.filter-drawer-form { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.filter-drawer-header { padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.filter-drawer-header h2, .filter-drawer-header p { margin: 0; }
.filter-drawer-body { min-height: 0; padding: 1.25rem; overflow-y: auto; }
.filter-drawer-actions { padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; border-top: 1px solid var(--line); background: var(--surface); }

.new-watch-page { max-width: 64rem; }
.watch-wizard { display: grid; gap: 1rem; }
.wizard-step { max-width: 58rem; width: 100%; margin-inline: auto; box-shadow: none; }
.wizard-actions { padding-top: .5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
.wizard-actions .button { min-width: 7.5rem; }
.wizard-review { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.wizard-review div { min-width: 0; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.wizard-review dt { color: var(--muted); font-size: .75rem; }
.wizard-review dd { margin: .2rem 0 0; font-weight: 750; overflow-wrap: anywhere; }
.purchase-import-fields { margin: 0; }
.purchase-import-quick-summary { min-width: 0; display: grid; gap: .15rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.purchase-import-quick-summary > span { font-size: 1.2rem; font-weight: 750; }
.purchase-import-quick-summary small { color: var(--muted); overflow-wrap: anywhere; }
.purchase-import-quick > .purchase-import-quick-summary, .purchase-import-quick > .form-status { grid-column: 1 / -1; }
.new-watch-media-picker { margin: .25rem 0 0; display: grid; gap: .75rem; }
.new-watch-media-picker > p { margin: 0; }
.new-watch-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .65rem; }
.new-watch-photo-item { min-width: 0; padding: .55rem; display: grid; gap: .45rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.new-watch-photo-item img { width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: calc(var(--radius-sm) - 2px); object-fit: cover; background: var(--surface); }
.new-watch-photo-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.new-watch-photo-item .badge { justify-self: start; }
.new-watch-photo-empty { margin: 0; color: var(--muted); }

@media (min-width: 48rem) {
  .auth-layout { grid-template-columns: minmax(0, 1.05fr) minmax(24rem, .95fr); }
  .auth-card { margin-inline: clamp(2rem, 8vw, 7rem); }
  .onboarding-heading { text-align: center; }
}

@media (max-width: 47.999rem) {
  .auth-layout { min-height: 100dvh; align-content: start; background: var(--tik-color-light-accent); }
  .welcome-panel { min-height: auto; padding: 1.25rem 1rem .5rem; display: block; text-align: center; }
  .welcome-panel::before, .welcome-panel::after, .welcome-copy, .benefit-list, .auth-tagline { display: none; }
  .auth-brand { margin-inline: auto; }
  .auth-brand img { width: 5.5rem; }
  .auth-card { width: calc(100% - 1.5rem); max-width: 31rem; margin: .5rem auto max(1rem, env(safe-area-inset-bottom)); }
  .filter-drawer { width: 100%; height: auto; max-height: min(88dvh, 46rem); margin: auto 0 0; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .filter-drawer[open] { position: fixed; inset: auto 0 0; }
  .filter-drawer-form { max-height: min(88dvh, 46rem); }
  .wizard-review { grid-template-columns: 1fr; }
}

@media (max-width: 24.375rem) {
  .welcome-panel { padding-inline: .75rem; }
  .auth-card { padding: 1rem; }
  .wizard-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-actions .button { min-width: 0; }
}

@media (forced-colors: active) {
  .onboarding-progress li[aria-current="step"] > span, .wizard-progress li[aria-current="step"] > span { border: 2px solid ButtonText; }
}

/* MVP visual parity, wave 2: dashboard, watch card, media, lexicon, settings and system states. */
.watch-card-skeleton {
  min-height: 30rem;
  display: grid;
  grid-template-columns: minmax(15rem, .7fr) minmax(18rem, 1.3fr);
  grid-template-rows: 7rem 13rem 8rem;
  gap: 1rem;
}
.watch-card-skeleton span {
  display: block;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--surface-subtle), var(--surface-strong), var(--surface-subtle));
  background-size: 220% 100%;
  animation: shimmer 1.4s infinite;
}
.watch-card-skeleton span:first-child { grid-row: 1 / 3; }
.watch-card-skeleton span:nth-child(4) { grid-column: 1 / -1; }
.watch-heading h1 { max-width: 26ch; }
.watch-heading .heading-actions { flex-wrap: wrap; }
.card-section-nav { position: sticky; z-index: 20; top: 4.65rem; box-shadow: 0 .35rem 1rem color-mix(in srgb, var(--text) 4%, transparent); }
.editing-actions { position: sticky; z-index: 15; bottom: 5rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); }
.conflict-reload:not([hidden]) { border-color: var(--warning); background: var(--warning-soft); }
.media-panel .panel-toolbar { align-items: center; }
.media-panel .file-button { min-width: 9rem; }
.media-tile { transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
@media (hover: hover) and (pointer: fine) {
  .media-tile:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
}

.result-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.result-card { min-height: 6.75rem; align-content: start; box-shadow: var(--shadow-sm); }
.result-card header { align-items: flex-start; flex-wrap: wrap; }
.result-card strong { overflow-wrap: anywhere; }
.search-hero { overflow: hidden; position: relative; }
.search-hero::after { content: ""; position: absolute; width: 8rem; aspect-ratio: 1; right: -3rem; bottom: -4rem; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 50%; pointer-events: none; }

.lexicon-browser { display: grid; grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.lexicon-reference-panel { padding: .65rem; }
.lexicon-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.lexicon-section-heading h2, .lexicon-section-heading h3, .lexicon-section-heading p { margin: 0; }
.lexicon-reference-list { display: grid; gap: .45rem; max-height: min(68dvh, 52rem); padding: .15rem; overflow: auto; }
.lexicon-reference-item { position: relative; width: 100%; min-height: 5rem; display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.lexicon-reference-item:hover, .lexicon-reference-item:focus-visible { border-color: color-mix(in srgb, var(--brand) 58%, var(--line)); box-shadow: var(--shadow-sm); }
.lexicon-reference-item.selected { border-color: var(--brand); background: var(--brand-soft); }
.lexicon-reference-thumb, .lexicon-popover-image, .lexicon-evidence-image, .lexicon-image-frame { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.lexicon-reference-thumb { width: 4rem; aspect-ratio: 1; }
.lexicon-reference-thumb img, .lexicon-popover-image img, .lexicon-evidence-image img, .lexicon-image-frame img { width: 100%; height: 100%; object-fit: contain; }
.lexicon-image-placeholder { width: 100%; height: 100%; min-height: 3rem; display: grid; place-items: center; color: var(--muted); }
.lexicon-reference-copy { min-width: 0; display: grid; gap: .2rem; }
.lexicon-reference-copy strong, .lexicon-reference-copy small, .lexicon-reference-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lexicon-reference-copy small, .lexicon-reference-copy > span { color: var(--muted); font-size: .76rem; }
.lexicon-reference-popover { position: fixed; z-index: 60; left: clamp(19rem, 29vw, 29rem); width: min(20rem, calc(100vw - 2rem)); display: none; grid-template-columns: 6rem minmax(0, 1fr); gap: .45rem .75rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); pointer-events: none; }
.lexicon-reference-popover .lexicon-popover-image { width: 6rem; aspect-ratio: 1; grid-row: 1 / 4; }
.lexicon-reference-popover strong, .lexicon-reference-popover small, .lexicon-reference-popover > span { min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .lexicon-reference-item:hover .lexicon-reference-popover, .lexicon-reference-item:focus-visible .lexicon-reference-popover { display: grid; }
}
.lexicon-detail { min-height: 30rem; }
.lexicon-detail-header { display: grid; grid-template-columns: minmax(12rem, 19rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.lexicon-detail-header h2 { overflow-wrap: anywhere; }
.lexicon-image-frame { width: 100%; aspect-ratio: 1; }
.lexicon-identifier-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.lexicon-identifier { display: grid; gap: .1rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.lexicon-identifier small { color: var(--muted); }
.lexicon-evidence-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.lexicon-catalog-grid, .lexicon-physical-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.lexicon-catalog-card, .lexicon-physical-card { min-width: 0; margin: 0; padding: .65rem; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-subtle); }
.lexicon-catalog-card p, .lexicon-physical-card p { margin: .2rem 0 0; overflow-wrap: anywhere; }
.lexicon-catalog-card small, .lexicon-physical-card small { display: block; color: var(--muted); }
.lexicon-source-description { white-space: pre-wrap; }
.lexicon-catalog-card:focus-visible { outline: 3px solid var(--tik-color-focus); outline-offset: 3px; }
.lexicon-source-disclosure > summary { min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
#lexicon-mode-tabs button { min-height: max(44px, 2.75rem); }
#offer-optional-details > .form-grid { padding-block: .5rem 1rem; }
.lexicon-evidence-image { width: 5rem; aspect-ratio: 1; }
.lexicon-catalog-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .25rem; }
.lexicon-catalog-more p { margin: 0; }
.lexicon-pagination { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
.empty-inline { margin: 0; padding: .8rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); }

.settings-page { width: min(100%, 72rem); margin-inline: auto; }
.settings-layout { display: grid; gap: 1rem; }
.settings-nav { padding: .45rem; display: flex; gap: .25rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.settings-nav a { min-height: var(--tik-touch-target-min); padding: .6rem .85rem; display: inline-flex; align-items: center; flex: 0 0 auto; border-radius: var(--radius-sm); color: var(--muted); font-weight: 700; text-decoration: none; }
.settings-nav a:hover, .settings-nav a:focus-visible { background: var(--brand-soft); color: var(--brand); }
.settings-group { padding-block: .5rem; }
.settings-group > header { padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.settings-group > header h2 { margin: 0; }
.settings-group .settings-row { padding: 1rem; }
.settings-group .settings-row + .settings-row { border-top: 1px solid var(--line); }
.settings-copy { min-width: 0; flex: 1 1 auto; }
.settings-copy h2, .settings-copy h3, .settings-copy p { margin-bottom: 0; }
.settings-row select { max-width: 15rem; }
#delete-account { scroll-margin-top: 9rem; }

.state-panel.compact { min-height: 12rem; }
.state-panel .button { margin-top: .35rem; }
.state-panel[hidden] { display: none; }
.form-status.warning { border-left: 3px solid var(--warning); background: var(--warning-soft); color: var(--text); }

[data-page="shared-dashboard"] .panel { box-shadow: none; }
[data-page="shared-dashboard"] .shared-dashboard-financial-card { position: relative; overflow: hidden; }
[data-page="shared-dashboard"] .shared-dashboard-financial-card::after { content: ""; position: absolute; width: 3.5rem; aspect-ratio: 1; right: -.9rem; bottom: -.9rem; border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-radius: 50%; }
[data-page="shared-dashboard"] table { width: 100%; border-collapse: collapse; }
[data-page="shared-dashboard"] th { color: var(--muted); font-size: .75rem; text-align: left; }
[data-page="shared-dashboard"] th, [data-page="shared-dashboard"] td { padding: .7rem .55rem; border-bottom: 1px solid var(--line); }

@media (min-width: 64rem) {
  .settings-layout { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; }
  .settings-nav { position: sticky; top: 5rem; display: grid; }
  .settings-nav a { width: 100%; }
}

@media (max-width: 64rem) {
  .watch-card-skeleton { grid-template-columns: minmax(13rem, .8fr) minmax(16rem, 1.2fr); }
  .shared-dashboard-financial-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lexicon-browser { grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); }
  .lexicon-reference-popover { left: 22rem; }
}

@media (max-width: 48rem) {
  .watch-card-skeleton { min-height: 34rem; grid-template-columns: 1fr; grid-template-rows: 12rem 7rem 7rem 6rem; }
  .watch-card-skeleton span:first-child, .watch-card-skeleton span:nth-child(4) { grid-column: auto; grid-row: auto; }
  .card-section-nav { top: 4.25rem; margin-inline: -.75rem; border-inline: 0; border-radius: 0; }
  .editing-actions { bottom: 5.2rem; }
  .media-panel .panel-toolbar { align-items: stretch; }
  .media-panel .file-button { width: 100%; }
  .settings-row select { max-width: none; }
  .lexicon-browser { grid-template-columns: 1fr; }
  .lexicon-reference-list { max-height: 22rem; }
  .lexicon-reference-popover { display: none !important; }
  .lexicon-detail-header { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); }
}

@media (max-width: 26.875rem) {
  .watch-heading .heading-actions, .watch-heading .heading-actions .button { width: 100%; }
  .watch-heading .heading-actions { display: grid; grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-list { grid-template-columns: 1fr; }
  .lexicon-detail-header, .lexicon-catalog-card, .lexicon-physical-card { grid-template-columns: 1fr; }
  .lexicon-image-frame { max-width: 16rem; margin-inline: auto; }
  .lexicon-evidence-image { width: 100%; max-height: 13rem; }
}

@media (max-width: 24.375rem) {
  .settings-nav { margin-inline: -.75rem; border-inline: 0; border-radius: 0; }
  .media-tile { padding: .55rem; }
}

@media (max-width: 23.4375rem) {
  .media-grid { grid-template-columns: 1fr; }
  .condition-grid { grid-template-columns: 1fr; }
}

@media (max-width: 20rem) {
  .page-shell { padding-inline: .5rem; }
  .card-section-nav { margin-inline: -.5rem; }
  .panel { padding-inline: .75rem; }
  .mobile-nav .shell-nav-item { font-size: .58rem; }
}

@media (forced-colors: active) {
  .state-icon, .badge, .result-card, .media-tile, .settings-nav, .conflict-reload { forced-color-adjust: none; border: 1px solid CanvasText; }
  .watch-card-skeleton span { background: Canvas; border: 1px solid CanvasText; }
  .form-status.warning { border: 2px solid Highlight; }
  .lexicon-reference-item, .lexicon-reference-popover, .lexicon-catalog-card, .lexicon-physical-card { forced-color-adjust: none; border: 1px solid CanvasText; }
}
/* Professional Customer Loop V1 */
.public-offer-page {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding-block: var(--tik-space-24, 24px) var(--tik-space-32, 32px);
}

.public-offer-header,
.public-offer-actions,
.appointment-layout,
.panel-toolbar .form-actions {
  display: flex;
  align-items: center;
  gap: var(--tik-space-12, 12px);
}

.public-offer-header { justify-content: space-between; margin-bottom: var(--tik-space-16, 16px); }
.public-offer-document { display: grid; gap: var(--tik-space-20, 20px); }
.public-offer-summary { display: grid; gap: var(--tik-space-16, 16px); }
.public-offer-actions { flex-wrap: wrap; }
.appointment-layout { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
.appointment-calendar { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 1px; background: var(--tik-color-divider); border: 1px solid var(--tik-color-border); border-radius: var(--tik-radius-card, 10px); overflow: hidden; }
.appointment-calendar > * { min-height: 92px; padding: var(--tik-space-8, 8px); background: var(--tik-color-surface); }
.appointment-calendar > .appointment-calendar-weekday { min-height: 0; text-align: center; font-weight: 700; color: var(--tik-color-text-muted); background: var(--tik-color-surface-muted, #f3f1eb); text-transform: capitalize; }
.appointment-calendar > .appointment-calendar-empty { background: var(--tik-color-surface-muted, #f3f1eb); }
.appointment-list,
.notification-list { display: grid; gap: var(--tik-space-8, 8px); }
.appointment-card,
.notification-card { border: 1px solid var(--tik-color-border); border-radius: var(--tik-radius-control, 8px); padding: var(--tik-space-12, 12px); background: var(--tik-color-surface); }
.appointment-card-actions { display: flex; flex-wrap: wrap; gap: var(--tik-space-8, 8px); margin-top: var(--tik-space-12, 12px); }
.workshop-cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tik-space-16, 16px); }
.form-card { min-width: 0; margin: 0; padding: var(--tik-space-16, 16px); border: 1px solid var(--tik-color-border); border-radius: var(--tik-radius-card, 10px); }
.form-card legend { padding-inline: var(--tik-space-8, 8px); font-weight: 700; }
.workshop-media-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--tik-space-8, 8px); margin-top: var(--tik-space-12, 12px); }
.workshop-media-option { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "preview preview" "check name"; align-items: center; gap: 6px; min-width: 0; padding: 6px; border: 1px solid var(--tik-color-border); border-radius: var(--tik-radius-control, 8px); cursor: pointer; }
.workshop-media-option input[type="checkbox"] { grid-area: check; width: 1.05rem; height: 1.05rem; min-height: 1.05rem; margin: 0; padding: 0; accent-color: var(--tik-color-brand, #0f4b42); }
.workshop-media-preview { grid-area: preview; display: grid; place-items: center; width: 100%; height: 74px; overflow: hidden; border-radius: 6px; background: var(--tik-color-surface-muted, #f3f1eb); }
.workshop-media-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.workshop-media-preview .tik-icon { width: 1.4rem; height: 1.4rem; }
.workshop-media-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.workshop-list { display: grid; gap: var(--tik-space-12, 12px); }
.workshop-entry { display: grid; gap: var(--tik-space-12, 12px); padding: var(--tik-space-16, 16px); border: 1px solid var(--tik-color-border); border-radius: var(--tik-radius-card, 10px); background: var(--tik-color-surface); }
.workshop-entry > header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--tik-space-12, 12px); }
.workshop-entry h3 { margin: var(--tik-space-4, 4px) 0; }
.workshop-entry-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tik-space-12, 12px); }
.workshop-entry-facts span { display: grid; gap: 2px; }
.workshop-entry-facts strong { color: var(--tik-color-text-muted); font-size: .78rem; font-weight: 600; }

@media (max-width: 767px) {
  .appointment-layout { grid-template-columns: 1fr; }
  .appointment-calendar { display: none; }
  .public-offer-page { width: min(100% - 24px, 920px); padding-bottom: 96px; }
  .public-offer-actions > * { width: 100%; }
  .workshop-cost-grid, .workshop-entry-facts { grid-template-columns: 1fr; }
  .workshop-entry > header { display: grid; }
}

@media (max-width: 375px) {
  .public-offer-page { width: min(100% - 16px, 920px); }
  .panel-toolbar .form-actions { width: 100%; overflow-x: auto; }
}

/* Local waiting room / drafts. Draft packages are account-scoped in IndexedDB
   and become cloud collection records only after an explicit final action. */
.drafts-page { width: min(100%, 112rem); margin-inline: auto; }
.drafts-local-notice { margin-bottom: 1rem; }
.drafts-command-bar { margin-bottom: 1rem; display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(10rem, .32fr) minmax(10rem, .32fr); gap: .75rem; align-items: end; }
.drafts-command-bar label, .drafts-command-bar select, .drafts-command-bar .search-field { min-width: 0; width: 100%; }
.drafts-create-panel { margin-bottom: 1rem; }
.drafts-layout { display: grid; grid-template-columns: minmax(21rem, 25rem) minmax(32rem, 1fr); gap: 1rem; align-items: start; }
.drafts-list-panel, .draft-detail-panel { min-width: 0; }
.drafts-list-panel .panel-toolbar { align-items: flex-start; }
.draft-package-list { max-height: min(72vh, 58rem); padding-right: .2rem; display: grid; gap: .5rem; overflow-y: auto; }
.draft-package-card { width: 100%; min-width: 0; padding: .65rem; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.draft-package-card:hover, .draft-package-card:focus-visible, .draft-package-card.is-selected { border-color: color-mix(in srgb, var(--brand) 62%, var(--line)); background: var(--brand-soft); }
.draft-package-copy { min-width: 0; display: grid; gap: .15rem; }
.draft-package-card strong, .draft-package-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-package-card small { color: var(--muted); }
.draft-package-thumbnail, .draft-package-icon { width: 4.5rem; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--brand); }
.draft-package-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.draft-package-icon .tik-icon { width: 1.25rem; height: 1.25rem; }
.draft-detail-fields { margin-block: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.draft-detail-fields > label { min-width: 0; display: grid; gap: .3rem; }
.draft-detail-fields > label > span { color: var(--muted); font-size: .75rem; font-weight: 650; }
.draft-detail-fields .span-two { grid-column: 1 / -1; }
.draft-package-edit-actions { display: flex; justify-content: flex-end; }
.draft-phone-upload-panel { align-items: center; justify-content: space-between; gap: 1rem; }
.draft-phone-upload-panel > div { display: grid; gap: .25rem; }
.draft-files-heading, .draft-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.draft-files-heading { margin-block: 1rem .75rem; }
.draft-files-heading h3, .draft-files-heading p { margin: 0; }
.draft-detail-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); justify-content: flex-end; }
.draft-finalize-grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.draft-finalize-grid > section { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-subtle); }
.draft-finalize-grid h3 { margin-top: 0; }
.draft-finalize-grid .inline-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.file-drop-zone { min-height: 9rem; padding: 1.25rem; display: grid; place-items: center; align-content: center; gap: .35rem; border: 1px dashed color-mix(in srgb, var(--brand) 55%, var(--line)); border-radius: var(--radius); background: var(--brand-soft); text-align: center; cursor: pointer; }
.file-drop-zone:hover, .file-drop-zone:focus-within, .file-drop-zone.is-dragging { border-style: solid; background: color-mix(in srgb, var(--brand-soft) 72%, var(--surface)); }
.file-drop-zone .tik-icon { width: 1.8rem; height: 1.8rem; color: var(--brand); }
.file-drop-zone input { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.draft-file-summary { padding: .7rem .8rem; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--muted); overflow-wrap: anywhere; }
.draft-media-grid { min-height: 5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.draft-media-tile { min-width: 0; align-content: start; color: var(--text); text-align: left; cursor: pointer; }
.draft-media-tile:hover, .draft-media-tile:focus-visible, .draft-media-tile.is-selected { border-color: color-mix(in srgb, var(--brand) 62%, var(--line)); background: var(--brand-soft); }
.draft-media-tile > img, .draft-document-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-subtle); }
.draft-document-preview { display: grid; place-items: center; color: var(--brand); font-size: 1.25rem; font-weight: 800; letter-spacing: .08em; }
.draft-media-tile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-media-badges { min-height: 1.5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.draft-file-actions { margin-top: .75rem; padding: .7rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.draft-file-actions[hidden] { display: none; }
.draft-file-actions > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-file-name-field { min-width: min(100%, 18rem); display: grid; gap: .25rem; }
.draft-file-name-field span { color: var(--muted); font-size: .76rem; }
.draft-file-name-field input { width: 100%; }
.draft-phone-dialog { width: min(94vw, 36rem); max-width: calc(100vw - 1rem); }
.draft-phone-dialog .confirmation-dialog-form { width: 100%; min-width: 0; box-sizing: border-box; }
.draft-phone-dialog label { min-width: 0; display: grid; gap: .35rem; }
.draft-phone-dialog input, .draft-phone-dialog select { width: 100%; min-width: 0; box-sizing: border-box; }
.draft-phone-dialog #draft-phone-address { overflow-wrap: anywhere; }
.draft-phone-qr { width: min(100%, 18rem); margin-inline: auto; padding: .75rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.draft-phone-qr canvas { width: min(100%, 16.5rem); height: auto; }

@media (max-width: 70rem) {
  .drafts-layout { grid-template-columns: 1fr; }
  .draft-package-list { max-height: none; }
}

@media (max-width: 48rem) {
  .drafts-command-bar, .drafts-list-panel .panel-toolbar, .draft-files-heading, .draft-detail-actions, .draft-file-actions, .draft-phone-upload-panel { align-items: stretch; display: grid; grid-template-columns: 1fr; }
  .draft-finalize-grid, .draft-detail-fields { grid-template-columns: 1fr; }
  .draft-detail-fields .span-two { grid-column: auto; }
  .draft-finalize-grid .inline-action { grid-template-columns: 1fr; }
  .draft-finalize-grid .button, .draft-files-heading .button, .draft-phone-upload-panel .button { width: 100%; }
  .draft-package-card { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .draft-package-card > .badge { grid-column: 2; justify-self: start; }
  .draft-file-actions .row-actions { display: grid; grid-template-columns: 1fr; }
  .draft-file-actions .button { width: 100%; }
  .draft-phone-dialog .confirmation-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .draft-phone-dialog .confirmation-dialog-actions .button { width: 100%; }
}

/* RC2: truthful browser-local sync queue and conflict review. */
.pilot-shell, .pilot-content, .page-shell, [data-page] { min-width: 0; max-width: 100%; }
.professional-scope-note { margin-block: 0 1rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.sync-summary-grid { margin-block: 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.sync-summary-grid .kpi { min-width: 0; }
.sync-summary-grid .kpi strong { overflow-wrap: anywhere; }
.sync-summary-grid .kpi small { display: block; color: var(--muted); }
.sync-queue-list, .sync-conflict-list { display: grid; gap: .75rem; }
.sync-queue-item { min-width: 0; padding: .8rem; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sync-queue-icon { width: 2.5rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--brand); }
.sync-queue-icon .tik-icon { width: 1.25rem; height: 1.25rem; }
.sync-queue-copy { min-width: 0; display: grid; gap: .2rem; }
.sync-queue-copy strong, .sync-queue-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-queue-copy span { color: var(--muted); font-size: .78rem; }
.sync-conflict-card { min-width: 0; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 7%, var(--surface)); }
.sync-conflict-card > div:first-child { min-width: 0; }
.sync-conflict-card h2 { margin: .45rem 0 .2rem; overflow-wrap: anywhere; font-size: 1rem; }
.sync-conflict-card p { margin: .15rem 0; }
.conflict-code { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; overflow-wrap: anywhere; }
.sync-state-conflict { color: var(--danger); }
.sync-state-retryscheduled, .sync-state-queued { color: var(--warning); }

@media (max-width: 64rem) {
  .sync-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-queue-item { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .sync-queue-item .button { grid-column: 2 / -1; justify-self: start; }
}

@media (max-width: 36rem) {
  .sync-summary-grid { grid-template-columns: 1fr; }
  .sync-queue-item { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .sync-queue-item .badge, .sync-queue-item .button { grid-column: 2; justify-self: start; }
  .sync-conflict-card { align-items: stretch; flex-direction: column; }
  .sync-conflict-card .row-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .sync-conflict-card .button { width: 100%; }
}

/* Premium Utility RC1: task-oriented shell and the first clarity pilot. */
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-global-create {
  width: 100%;
  margin-bottom: .7rem;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .premium-navigation {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-start { margin-bottom: .2rem; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-group {
  min-width: 0;
  border-top: 1px solid var(--line);
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-group > summary {
  min-height: 2.75rem;
  padding: .65rem .7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  color: var(--muted);
  cursor: pointer;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .075em;
  list-style: none;
  text-transform: uppercase;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-group > summary::-webkit-details-marker { display: none; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-group > summary::after { content: "+"; color: var(--brand); font-size: 1rem; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-group[open] > summary::after { content: "−"; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-group-items { display: grid; gap: .15rem; padding-bottom: .45rem; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-personalizable {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: .15rem;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-personalizable.is-pinned > .shell-nav-item::after {
  content: "★";
  margin-left: auto;
  color: var(--gold-strong);
  font-size: .72rem;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-personalization-controls { display: inline-flex; justify-self: end; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-personalization-controls[hidden] { display: none; }
.shell-navigation-customize { align-self: stretch; margin-block: .25rem .65rem; }
.dashboard-refresh-actions { display: grid; justify-items: end; gap: .35rem; }
.dashboard-refresh-status { max-width: 26rem; font-size: .8rem; text-align: end; }
.watch-section-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; padding: .7rem; color: var(--muted); background: var(--surface-subtle); border-radius: var(--radius-sm); }
.watch-section-status[hidden] { display: none; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-personalization-control {
  min-width: var(--tik-touch-target-min);
  min-height: var(--tik-touch-target-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-personalization-control:hover,
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-personalization-control:focus-visible { background: var(--surface-subtle); color: var(--brand); }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-personalization-control:disabled { opacity: .35; cursor: default; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .sidebar-utility {
  margin-top: auto;
  padding-top: .55rem;
  display: grid;
  gap: .12rem;
  border-top: 1px solid var(--line);
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .sidebar-utility small {
  padding: .55rem .75rem 0;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-header-action,
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-status-link {
  min-width: 2.75rem;
  min-height: 2.75rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-header-action:hover,
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-status-link:hover { background: var(--surface-subtle); color: var(--brand); }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-status-link .connection-state { display: inline-flex; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .count-badge {
  min-width: 1.2rem;
  min-height: 1.2rem;
  padding: .05rem .28rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: var(--tik-color-on-accent);
  font-size: .63rem;
  font-weight: 800;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-header-action > .count-badge {
  position: absolute;
  top: -.35rem;
  right: -.35rem;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .count-badge.warning { background: var(--warning); color: var(--surface); }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .page-heading > div:first-child { max-width: 54rem; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .page-heading h1 { max-width: 24ch; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .professional-scope-note { border: 1px solid var(--line); border-left: 3px solid var(--brand); background: var(--surface-subtle); }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .workflow-disclosure {
  border-top: 1px solid var(--line);
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .workflow-disclosure > summary {
  min-height: 3rem;
  padding: .75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--text);
  cursor: pointer;
  font-weight: 750;
  list-style: none;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .workflow-disclosure > summary::-webkit-details-marker { display: none; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .workflow-disclosure > summary::after { content: "+"; color: var(--brand); font-size: 1.15rem; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .workflow-disclosure[open] > summary::after { content: "−"; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .workflow-disclosure .offer-fieldset { padding: .25rem 0 1rem; border-top: 0; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .offer-creator,
.pilot-shell[data-ux-experience="premium-utility-rc1"] .offers-panel,
.pilot-shell[data-ux-experience="premium-utility-rc1"] [data-page="workshop"] > .panel { box-shadow: none; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .offers-list,
.pilot-shell[data-ux-experience="premium-utility-rc1"] .workshop-list { gap: .65rem; border-top: 0; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .offer-card,
.pilot-shell[data-ux-experience="premium-utility-rc1"] .workshop-entry {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-legacy-anchor {
  height: 0;
  position: relative;
  top: -8rem;
  display: block;
  scroll-margin-top: 8rem;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details { display: grid; gap: 1rem; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details section { min-width: 0; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details h3 { margin-bottom: .65rem; color: var(--brand); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details dl > div {
  min-width: 0;
  padding: .65rem 0;
  display: grid;
  grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.2fr);
  gap: .75rem;
  border-bottom: 1px solid var(--line);
}
.pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details dt { color: var(--muted); font-size: .78rem; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details dd { margin: 0; font-weight: 680; overflow-wrap: anywhere; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] [data-watch-group="finance-transactions"],
.pilot-shell[data-ux-experience="premium-utility-rc1"] [data-watch-group="service-condition"],
.pilot-shell[data-ux-experience="premium-utility-rc1"] [data-watch-group="media-documents"] { scroll-margin-top: 9rem; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] [data-page="collection"] .collection-panel,
.pilot-shell[data-ux-experience="premium-utility-rc1"] [data-page="new-watch"] .wizard-step { box-shadow: none; }
.pilot-shell[data-ux-experience="premium-utility-rc1"] [data-page="collection"] .search-field { flex: 1 1 20rem; }

@media (min-width: 48rem) {
  .pilot-shell[data-ux-experience="premium-utility-rc1"] [data-page="collection"] .watch-row {
    min-height: 7rem;
    grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] [data-page="collection"] .watch-row-thumbnail { width: 5.25rem; height: 5.25rem; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .workflow-disclosure .offer-section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 70rem) {
  body[data-session-state="authenticated"] .pilot-shell[data-ux-experience="premium-utility-rc1"] .app-sidebar { width: 18.5rem; padding-inline: 1.1rem; }
  body[data-session-state="authenticated"] .pilot-shell[data-ux-experience="premium-utility-rc1"] .app-header { left: 18.5rem; }
  body[data-session-state="authenticated"] .pilot-shell[data-ux-experience="premium-utility-rc1"] .pilot-content { margin-left: 18.5rem; }
}

@media (max-width: 47.999rem) {
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .app-header { min-height: 4rem; padding-right: 7.4rem; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .app-header-context strong { max-width: 9rem; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .header-create-action,
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .app-header .install-button { display: none; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-status-link .connection-state > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-status-link .connection-state { min-width: .75rem; justify-content: center; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .heading-actions { display: grid; grid-template-columns: 1fr; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .heading-actions .button { width: 100%; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details dl { grid-template-columns: 1fr; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details dl > div { grid-template-columns: minmax(6.5rem, .75fr) minmax(0, 1.25fr); }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .workflow-disclosure > summary { min-height: 44px; }
}

@media (max-width: 22.5rem) {
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .page-shell { padding-inline: .65rem; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .app-header-context { display: none; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .app-header { justify-content: flex-start; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .mobile-nav .shell-nav-item { min-height: 4rem; font-size: .63rem; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .mobile-nav .shell-nav-item span { overflow: visible; white-space: normal; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .wizard-progress li { padding-inline: .1rem; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .wizard-progress li > strong { font-size: .62rem; overflow-wrap: anywhere; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details dl > div { grid-template-columns: 1fr; gap: .2rem; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .form-actions { display: grid; grid-template-columns: 1fr; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .form-actions .button { width: 100%; }
}

@media (forced-colors: active) {
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-item[aria-current="page"],
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-group,
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .workflow-disclosure,
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .watch-readonly-details dl > div { border-color: CanvasText; }
  .pilot-shell[data-ux-experience="premium-utility-rc1"] .shell-nav-item[aria-current="page"] { outline: 2px solid Highlight; }
}

.watch-adjacent-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  margin: -.5rem 0 1rem;
}
.watch-adjacent-navigation [data-watch-previous] { justify-self: start; }
.watch-adjacent-navigation [data-watch-next] { justify-self: end; }
.watch-adjacent-navigation [aria-disabled="true"] { opacity: .45; pointer-events: none; }
.watch-adjacent-navigation [data-watch-position] { text-align: center; font-size: .8rem; }
@media (max-width: 420px) {
  .watch-adjacent-navigation { gap: .3rem; }
  .watch-adjacent-navigation .button { padding-inline: .65rem; }
}

@media (max-width: 47.999rem) {
  .pilot-shell[data-ux-experience] .app-header { min-height: 4.75rem; padding-right: calc(max(1rem, env(safe-area-inset-right)) + 15.5rem); justify-content: flex-start; }
  .pilot-shell .app-header-context { display: none; }
  .pilot-shell .app-header .install-button { display: none; }
  .shell-controls { gap: .4rem; }
}

@media (max-width: 23.999rem) {
  .pilot-shell:has(.shell-install-public:not([hidden])) .app-header { min-height: 7.5rem; padding: .85rem max(.75rem, env(safe-area-inset-right)) .65rem max(.75rem, env(safe-area-inset-left)); align-items: flex-start; justify-content: space-between; }
  .pilot-shell:has(.shell-install-public:not([hidden])) .app-header-context { display: grid; }
  .pilot-shell:has(.shell-install-public:not([hidden])) .anonymous-header { min-height: 7.5rem; align-items: flex-start; }
  .pilot-shell:has(.shell-install-public:not([hidden])) .anonymous-header .brand-logo { height: 3.5rem; }
  .pilot-shell:has(.shell-install-public:not([hidden])) .shell-controls { top: 4.05rem; }
}