:root {
  color-scheme: dark;
  --bg: #000;
  --surface: #171719;
  --surface-2: #242426;
  --surface-3: #303033;
  --text: #f7f7f8;
  --muted: #9a9aa1;
  --hairline: rgba(255, 255, 255, 0.1);
  --accent: #1683ff;
  --accent-2: #55a6ff;
  --green: #53d17f;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-viewport-height: 100dvh;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0d0d0f; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .app-shell::-webkit-scrollbar, .rail::-webkit-scrollbar { display: none; }
body { color: var(--text); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang TC", "Noto Sans TC", sans-serif; -webkit-font-smoothing: antialiased; }
button, select, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

.app-shell { position: relative; width: min(100%, 430px); min-height: 100vh; margin: 0 auto; overflow-x: hidden; background: var(--bg); box-shadow: 0 0 70px rgba(0,0,0,.6); }
.local-mode-banner {
  position: fixed;
  z-index: 65;
  left: 50%;
  bottom: calc(98px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 406px);
  min-height: 66px;
  padding: 10px 10px 10px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(78,167,255,.32);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(16,42,71,.97), rgba(18,22,31,.98));
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
}
.local-mode-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(22,131,255,.18); color: #85c5ff; }
.local-mode-icon svg { width: 22px; height: 22px; }
.local-mode-banner > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.local-mode-banner strong { font-size: 14px; }
.local-mode-banner small { overflow: hidden; display: -webkit-box; color: #aebccc; font-size: 12px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.local-mode-banner button { min-height: 38px; padding: 0 11px; border: 0; border-radius: 11px; background: #1683ff; color: white; font-size: 13px; font-weight: 800; }
.local-mode-banner[data-state="pending"] { border-color: rgba(255,159,10,.3); background: linear-gradient(135deg, rgba(70,45,15,.97), rgba(24,22,20,.98)); }
.local-mode-banner[data-state="pending"] .local-mode-icon { background: rgba(255,159,10,.15); color: #ffc166; }
.pwa-install-banner { position: fixed; z-index: 68; left: 50%; bottom: calc(100px + var(--safe-bottom)); transform: translateX(-50%); width: min(calc(100% - 24px), 470px); min-height: 84px; padding: 12px 46px 12px 12px; display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(85,166,255,.38); border-radius: 20px; background: linear-gradient(135deg, rgba(13,31,55,.98), rgba(15,17,23,.98)); box-shadow: 0 18px 54px rgba(0,0,0,.62); backdrop-filter: blur(22px); }
.pwa-install-icon, .pwa-install-icon img { width: 50px; height: 50px; border-radius: 14px; }
.pwa-install-banner > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.pwa-install-banner strong { font-size: 15px; }
.pwa-install-banner small { color: #b8c5d5; font-size: 13px; line-height: 1.35; }
.pwa-install-banner em { margin-top: 3px; color: #8bc4ff; font-size: 12px; font-style: normal; line-height: 1.35; }
.pwa-install-banner > button:not(.pwa-install-close) { min-width: 66px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--accent); color: white; font-size: 14px; font-weight: 850; }
.pwa-install-close { position: absolute; top: 5px; right: 7px; width: 34px; height: 34px; border: 0; background: transparent; color: #8e8e96; font-size: 24px; }
.screen { display: none; min-height: 100vh; padding: 0 20px calc(124px + var(--safe-bottom)); }
.screen.is-active { display: block; }
.screen-full { min-height: 0; height: var(--app-viewport-height); padding: 0; overflow: hidden; }
.screen-full.is-active { display: block; }
.topbar { min-height: 106px; padding-top: max(22px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.home-topbar { min-height: 118px; }
.topbar h1 { margin: 1px 0 0; font-size: 31px; line-height: 1; letter-spacing: -.03em; }
.brand-lockup h1 small { color: var(--accent-2); font-size: 15px; font-weight: 750; letter-spacing: 0; }
.eyebrow { color: #77777e; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.eyebrow.blue { color: var(--accent-2); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-icon { width: 52px; height: 52px; border-radius: 15px; object-fit: cover; box-shadow: 0 8px 24px rgba(22,131,255,.15); }
.icon-button, .glass-button { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); }
.icon-button svg, .glass-button svg { width: 23px; height: 23px; }
.accent-button { background: var(--accent); border-color: var(--accent); }
.compact-topbar { min-height: 94px; }
.center-title { min-width: 0; display: grid; justify-items: center; text-align: center; }
.center-title strong { font-size: 18px; }
.center-title span { max-width: 230px; overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.header-spacer { width: 48px; }
.done-link { min-width: 48px; padding: 12px 0; border: 0; background: transparent; color: var(--accent-2); font-size: 16px; font-weight: 750; }

.rail { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hero-rail { width: calc(100% + 20px); padding-right: 20px; }
.hero-card { position: relative; flex: 0 0 calc(100% - 30px); height: 348px; overflow: hidden; border-radius: var(--radius-xl); scroll-snap-align: start; background: var(--surface); isolation: isolate; }
.hero-card > img, .loading-hero > img, .scenario-card > img, .recent-card > img, .guide-card > img, .result-photo > img, .summary-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-card[data-card="quick"] > img { object-position: 55% center; }
.hero-card[data-card="patrol"] > img { object-position: 57% center; }
.hero-card[data-card="loading"] > img { object-position: 54% center; }
.photo-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.46) 52%, rgba(0,0,0,.05) 100%), linear-gradient(0deg, rgba(0,0,0,.48), transparent 50%); }
.photo-shade-strong { background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.58) 50%, rgba(0,0,0,.12) 100%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); }
.hero-copy { position: absolute; z-index: 2; inset: 0; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.hero-copy h2 { margin: 14px 0 7px; font-size: 38px; line-height: 1.03; letter-spacing: -.045em; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.hero-copy p { max-width: 270px; margin: 0 0 17px; color: rgba(255,255,255,.78); font-size: 15px; }
.pill { display: inline-flex; align-items: center; min-height: 31px; padding: 5px 11px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.pill-light { background: rgba(255,255,255,.9); color: #111; }
.pill-blue { background: var(--accent); color: white; }
.button { min-height: 50px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 800; }
.button svg { width: 20px; height: 20px; }
.button-light { background: white; color: #101012; }
.button-primary { background: var(--accent); color: white; box-shadow: 0 9px 26px rgba(22,131,255,.18); }
.button-secondary { background: var(--surface-2); color: white; }
.rail-dots { height: 30px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.rail-dots span { width: 6px; height: 6px; border-radius: 99px; background: #404044; transition: .2s; }
.rail-dots span.is-current { width: 19px; background: white; }

.section-block { margin-top: 24px; }
.section-heading { min-height: 40px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.section-caption { color: #707076; font-size: 14px; font-weight: 650; }
.text-link { padding: 8px 0 8px 12px; display: flex; align-items: center; gap: 1px; border: 0; background: transparent; color: #77777e; font-size: 14px; font-weight: 750; }
.text-link svg { width: 18px; height: 18px; }

.resume-rail, .scenario-rail, .recent-rail, .guide-rail, .barn-shortcuts { width: calc(100% + 20px); padding-right: 20px; }
.resume-card { flex: 0 0 86%; min-height: 118px; padding: 16px; display: grid; grid-template-columns: 52px 1fr auto; gap: 13px; align-items: center; border: 1px solid var(--hairline); border-radius: var(--radius-lg); scroll-snap-align: start; background: linear-gradient(135deg, #202024, #131315); text-align: left; }
.resume-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: #303034; }
.resume-icon.blue { background: rgba(22,131,255,.18); color: var(--accent-2); }
.resume-card > span:nth-child(2) > * { display: block; font-style: normal; }
.resume-card small, .resume-card em { color: var(--muted); font-size: 14px; }
.resume-card strong { margin: 2px 0; font-size: 18px; }
.resume-progress { align-self: start; display: flex; align-items: center; color: var(--accent-2); font-size: 14px; font-weight: 800; }
.resume-progress svg { width: 17px; }

.scenario-card { position: relative; flex: 0 0 72%; height: 246px; padding: 0; overflow: hidden; border: 0; border-radius: 22px; scroll-snap-align: start; background: var(--surface); text-align: left; isolation: isolate; }
.scenario-card > img { object-position: center; }
.scenario-card .photo-shade { background: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.06) 77%); }
.scenario-copy { position: absolute; z-index: 2; left: 17px; right: 17px; bottom: 17px; }
.scenario-copy > * { display: block; font-style: normal; }
.scenario-copy small { color: var(--accent-2); font-size: 14px; font-weight: 800; }
.scenario-copy strong { margin: 2px 0; font-size: 23px; line-height: 1.18; }
.scenario-copy em { color: rgba(255,255,255,.7); font-size: 14px; }

.barn-shortcuts > button { position: relative; flex: 0 0 64%; min-height: 190px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; border: 1px solid var(--hairline); border-radius: 21px; scroll-snap-align: start; background: var(--surface); text-align: left; isolation: isolate; }
.barn-shortcuts .barn-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.barn-shortcuts .barn-photo-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.14) 75%); }
.barn-shortcuts .barn-code { width: 42px; height: 42px; margin-bottom: auto; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(12,12,14,.62); backdrop-filter: blur(10px); font-size: 18px; }
.barn-shortcuts strong { font-size: 21px; text-shadow: 0 2px 10px #000; }
.barn-shortcuts small { margin-top: 3px; color: rgba(255,255,255,.74); font-size: 14px; }
.barn-code { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg, #3b3b40, #27272b); color: white; font-size: 25px; font-weight: 850; }

.daily-card { padding: 19px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: linear-gradient(140deg, #202023, #111113); }
.daily-card > div:first-child { display: flex; align-items: end; justify-content: space-between; }
.daily-card strong { font-size: 16px; }
.daily-card b { font-size: 33px; }
.muted { color: var(--muted); font-size: 14px; }
.daily-progress { height: 7px; margin: 16px 0 10px; overflow: hidden; border-radius: 999px; background: #353538; }
.daily-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #70b7ff); }
.daily-card p { margin: 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; }

.recent-card { position: relative; flex: 0 0 66%; height: 178px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; border: 0; border-radius: 20px; scroll-snap-align: start; background: var(--surface); color: white; text-align: left; isolation: isolate; }
.recent-card > *:not(img):not(.photo-shade) { position: relative; z-index: 2; }
.recent-card .photo-shade { background: linear-gradient(0deg, rgba(0,0,0,.88), rgba(0,0,0,.08) 78%); }
.recent-place { width: 100%; overflow: hidden; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.recent-card strong { font-size: 35px; line-height: 1; }
.recent-card small { font-size: 14px; }
.guide-rail { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 120px); grid-auto-columns: 70%; gap: 10px; }
.guide-card { position: relative; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; border-radius: 18px; scroll-snap-align: start; isolation: isolate; }
.guide-card::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.15)); }
.guide-card strong, .guide-card small { position: relative; z-index: 2; }
.guide-card strong { font-size: 17px; }
.guide-card small { color: rgba(255,255,255,.72); font-size: 14px; }

.bottom-nav { position: fixed; z-index: 40; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 430px); height: calc(88px + var(--safe-bottom)); padding: 7px 14px var(--safe-bottom); display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; background: rgba(5,5,6,.96); border-top: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(20px); }
.nav-item, .nav-camera { min-height: 66px; padding: 7px 2px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; color: #6e6e74; font-size: 14px; }
.nav-item svg { width: 27px; height: 27px; stroke-width: 2.2; }
.nav-item.is-active { color: white; }
.notification-nav-item, .nav-icon-wrap { position: relative; }
.nav-icon-wrap { width: 30px; height: 29px; display: grid; place-items: center; }
.notification-badge { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border: 2px solid #111114; border-radius: 999px; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 5px 14px rgba(255,59,48,.3); }
.nav-notification-badge { position: absolute; top: -8px; right: -11px; }
.nav-camera { transform: translateY(-19px); color: white; }
.nav-camera > span { width: 64px; height: 64px; display: grid; place-items: center; border: 7px solid #050506; border-radius: 50%; background: linear-gradient(145deg, #323236, #242427); }
.nav-camera svg { width: 29px; height: 29px; }
.nav-camera small { font-size: 14px; }

.camera-stage { position: relative; width: 100%; height: var(--app-viewport-height); min-height: 0; overflow: hidden; background: #101012; }
.camera-stage > img, .camera-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.camera-stage > video { z-index: 1; background: #050506; }
.camera-stage.is-live > img { opacity: 0; }
.camera-stage.is-live > video { opacity: 1; }
.camera-vignette { position: absolute; inset: 0; background: linear-gradient(#0009 0%, transparent 28%, transparent 58%, #000d 100%); }
.camera-topbar { position: absolute; z-index: 3; top: max(18px, env(safe-area-inset-top)); left: 18px; right: 18px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; }
.glass-button { background: rgba(15,15,17,.56); backdrop-filter: blur(12px); }
.camera-title { display: grid; justify-items: center; text-shadow: 0 2px 10px #000; }
.camera-title strong { font-size: 18px; }
.camera-title span { min-height: 1.35em; font-size: 14px; line-height: 1.35; white-space: nowrap; }
.capture-queue-status-button { position: absolute; z-index: 4; top: max(78px, calc(env(safe-area-inset-top) + 70px)); right: 18px; max-width: min(230px, calc(100% - 36px)); min-height: 52px; padding: 7px 9px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 27px; align-items: center; gap: 8px; border: 1px solid rgba(80,170,255,.42); border-radius: 16px; background: linear-gradient(145deg, rgba(12,34,58,.88), rgba(9,15,25,.9)); color: white; box-shadow: 0 10px 28px rgba(0,0,0,.34); backdrop-filter: blur(16px); text-align: left; }
.capture-queue-status-button > svg { width: 25px; height: 25px; color: #6bb8ff; }
.capture-queue-status-button > span { min-width: 0; display: grid; }
.capture-queue-status-button strong { font-size: 14px; line-height: 1.2; }
.capture-queue-status-button small { overflow: hidden; color: #a9bdd0; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.capture-queue-status-button > b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-size: 13px; box-shadow: 0 5px 15px rgba(22,131,255,.34); }
.capture-queue-status-button:active { transform: scale(.98); }
.capture-frame { position: absolute; z-index: 2; inset: 20% 9% 28%; }
.capture-frame i { position: absolute; width: 54px; height: 54px; border-style: solid; border-color: var(--accent-2); filter: drop-shadow(0 1px 4px #0009); }
.capture-frame i:nth-child(1) { top: 0; left: 0; border-width: 4px 0 0 4px; border-radius: 16px 0 0; }
.capture-frame i:nth-child(2) { top: 0; right: 0; border-width: 4px 4px 0 0; border-radius: 0 16px 0 0; }
.capture-frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 16px; }
.capture-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 16px; }
.capture-guide { position: absolute; z-index: 3; left: 50%; bottom: 155px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 44px); padding: 9px 15px; border-radius: 999px; background: rgba(12,12,14,.68); backdrop-filter: blur(12px); font-size: 15px; font-weight: 700; text-align: center; }
.processing-card { position: absolute; z-index: 6; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.7); backdrop-filter: blur(9px); }
.processing-card.is-visible { display: flex; }
.processing-card strong { margin-top: 20px; font-size: 27px; }
.processing-card small { margin-top: 4px; color: #b7b7bb; font-size: 14px; }
.spinner { width: 52px; height: 52px; border: 4px solid #4b4b50; border-top-color: var(--accent-2); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.camera-controls { position: absolute; z-index: 4; left: 24px; right: 24px; bottom: max(27px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 94px 1fr; align-items: center; }
.camera-side { padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; font-size: 14px; }
.camera-side svg { width: 27px; height: 27px; }
.flash-glyph { font-size: 29px; line-height: 27px; }
.shutter { width: 82px; height: 82px; margin: auto; padding: 6px; border: 3px solid white; border-radius: 50%; background: transparent; }
.shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: white; transition: .15s; }
.shutter:active span { transform: scale(.9); }
.camera-stage.is-review .capture-frame, .camera-stage.is-review .capture-guide, .camera-stage.is-review .camera-controls { display: none; }
.camera-stage.is-review > img { opacity: 1; }
.capture-review-actions { position: absolute; z-index: 5; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); left: 14px; padding: 17px; border: 1px solid rgba(255,255,255,.14); border-radius: 23px; background: linear-gradient(145deg, rgba(25,27,32,.94), rgba(8,10,14,.96)); box-shadow: 0 20px 60px rgba(0,0,0,.58); backdrop-filter: blur(22px); }
.capture-review-copy { display: grid; gap: 3px; }
.capture-review-copy strong { font-size: 22px; letter-spacing: -.02em; }
.capture-review-copy small { color: #aeb4be; font-size: 14px; }
.capture-review-primary { margin-top: 14px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 9px; }
.capture-review-primary .button { width: 100%; }
.capture-review-queue-actions { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.capture-review-queue-actions.is-single-action { grid-template-columns: 1fr; }
.capture-queue-action { width: 100%; min-width: 0; min-height: 66px; padding: 10px 11px; display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 8px; align-items: center; border: 1px solid rgba(70,157,255,.25); border-radius: 16px; background: rgba(22,131,255,.10); color: white; text-align: left; }
.capture-queue-action > svg:first-child { width: 25px; height: 25px; color: #67b2ff; }
.capture-queue-action > svg:last-child { width: 18px; color: #64788d; }
.capture-queue-action strong, .capture-queue-action small { display: block; }
.capture-queue-action strong { font-size: 15px; line-height: 1.25; }
.capture-queue-action small { margin-top: 1px; color: #91a1b1; font-size: 12px; line-height: 1.3; }
.capture-queue-open { grid-template-columns: minmax(0, 1fr) 18px; border-color: rgba(68,164,255,.48); background: linear-gradient(145deg, rgba(22,131,255,.23), rgba(11,64,116,.20)); }
.capture-queue-open strong { color: #e9f4ff; }
.capture-queue-open strong b { color: #69b7ff; font-size: 18px; }
.capture-review-storage-note { grid-column: 1 / -1; margin-top: -1px; color: #7f8996; font-size: 12px; line-height: 1.35; text-align: center; }

.queue-editor-screen { min-height: 100dvh; padding-bottom: calc(24px + var(--safe-bottom)); background: #0d0d12; color: #fff; }
.queue-editor-topbar { position: relative; z-index: 5; }
.queue-editor-topbar #queueReviewSaveButton:not([hidden]) + .queue-topbar-spacer { display: none; }
.queue-editor-workspace { display: grid; gap: 16px; }
.queue-preview-column, .queue-console-column { min-width: 0; }
.queue-preview-stage { position: relative; height: clamp(260px, 72vw, 390px); overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: #030304; }
.queue-preview-stage > img { width: 100%; height: 100%; object-fit: contain; background: #030304; }
.queue-preview-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 50%, rgba(0,0,0,.78)); }
.queue-current-status { position: absolute; top: 14px; left: 14px; min-height: 34px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(14,14,17,.78); color: #c7c8cd; font-size: 14px; font-weight: 850; backdrop-filter: blur(12px); }
.queue-current-status.is-processing { color: #73b8ff; }
.queue-current-status.is-ready { color: #55d58c; }
.queue-current-status.is-error { color: #ff7183; }
.queue-preview-caption { position: absolute; right: 16px; bottom: 14px; left: 16px; display: grid; gap: 2px; }
.queue-preview-caption span { overflow: hidden; font-size: 16px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.queue-preview-caption small { color: rgba(255,255,255,.67); font-size: 14px; }
.queue-empty { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; justify-items: center; padding: 32px; background: radial-gradient(circle at 50% 35%, rgba(22,131,255,.14), transparent 45%), #0f1015; text-align: center; }
.queue-empty[hidden] { display: none; }
.queue-empty span { max-width: 260px; margin-top: 7px; color: #8f929c; }
.queue-status-strip { min-height: 50px; margin-top: 10px; padding: 7px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; overflow-x: auto; border-radius: 14px; background: #19191e; color: #9799a2; font-size: 14px; scrollbar-width: none; }
.queue-status-strip::-webkit-scrollbar { display: none; }
.queue-status-strip span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.queue-status-strip i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #8e8e93; }
.queue-status-strip i.processing { background: #55aaff; }
.queue-status-strip i.ready { background: #39c97a; }
.queue-status-strip i.error { background: #ff596e; }
.queue-field-card { width: 100%; min-height: 68px; margin-top: 10px; padding: 9px 12px; display: grid; grid-template-columns: 40px minmax(0,1fr) 20px; gap: 10px; align-items: center; border: 1px solid rgba(76,162,255,.22); border-radius: 16px; background: linear-gradient(135deg, rgba(22,131,255,.12), #19191e 70%); color: #fff; text-align: left; }
.queue-field-card > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.queue-field-card small, .queue-field-card strong, .queue-field-card em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-field-card small { color: #8e98a5; font-size: 14px; }
.queue-field-card strong { font-size: 16px; }
.queue-field-card em { color: #65adf7; font-size: 14px; font-style: normal; }
.queue-field-card > svg { width: 20px; height: 20px; color: #6f7782; }
.queue-field-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(22,131,255,.2); color: #64b2ff; }
.queue-field-icon svg { width: 23px; height: 23px; }
.queue-field-card:disabled { opacity: .4; }
.queue-transport { min-height: 64px; display: grid; grid-template-columns: 48px minmax(126px,1fr) 48px minmax(54px,auto); gap: 10px; align-items: center; }
.queue-transport button { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #222329; color: #e8e9ec; font-size: 29px; line-height: 1; }
.queue-transport .queue-recognize-button { width: 100%; height: 54px; padding: 0 16px; border-radius: 16px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 850; line-height: 1.2; }
.queue-transport .queue-recognize-button:disabled { background: #292a30; color: #777982; }
.queue-transport button:disabled { opacity: .35; }
.queue-transport strong { justify-self: end; font-size: 18px; letter-spacing: .02em; }
.queue-timeline { padding: 13px 0 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: #15151a; }
.queue-timeline > header { min-height: 28px; padding: 0 15px 8px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #777982; font-size: 14px; font-weight: 800; }
.queue-timeline > header b { color: #a5a7ae; font-size: 14px; letter-spacing: .1em; }
.queue-timeline > header span:last-child { justify-self: end; }
.queue-filmstrip-shell { position: relative; }
.queue-filmstrip { padding: 9px calc(50% - 55px) 12px; display: flex; gap: 3px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; touch-action: pan-x; }
.queue-filmstrip::-webkit-scrollbar { display: none; }
.queue-frame { position: relative; flex: 0 0 110px; height: 78px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; scroll-snap-align: center; background: #050506; opacity: .64; transition: opacity .16s ease, border-color .16s ease; }
.queue-frame img { width: 100%; height: 100%; object-fit: cover; }
.queue-frame b { position: absolute; left: 5px; bottom: 5px; min-width: 26px; height: 26px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: rgba(0,0,0,.78); color: white; font-size: 14px; }
.queue-frame i { position: absolute; top: 5px; right: 5px; width: 11px; height: 11px; border: 2px solid white; border-radius: 50%; background: #8e8e93; box-shadow: 0 2px 7px #000; }
.queue-frame.is-current { border-color: #4ca2ff; opacity: 1; box-shadow: 0 0 0 1px rgba(76,162,255,.38); }
.queue-frame.is-ready { opacity: 1; }
.queue-frame.is-ready i { background: #35cc78; }
.queue-frame.is-error { opacity: 1; }
.queue-frame.is-error i { background: #ff536b; }
.queue-frame.is-processing i { background: #4ca5ff; animation: queuePulse 1s ease-in-out infinite; }
.queue-add-frame { flex: 0 0 74px; height: 78px; margin-left: 5px; display: grid; place-content: center; justify-items: center; gap: 2px; border: 1px dashed #4f515b; border-radius: 8px; scroll-snap-align: center; background: #202127; color: #aaacb4; }
.queue-add-frame b { color: #fff; font-size: 30px; font-weight: 400; line-height: 1; }
.queue-add-frame span { font-size: 14px; font-weight: 750; }
@keyframes queuePulse { 50% { transform: scale(1.45); opacity: .55; } }
.queue-playhead { position: absolute; z-index: 3; top: 0; bottom: 4px; left: 50%; width: 2px; pointer-events: none; background: #58a9ff; box-shadow: 0 0 12px rgba(88,169,255,.7); }
.queue-playhead i { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 13px; height: 10px; clip-path: polygon(0 0,100% 0,50% 100%); background: #58a9ff; }
.queue-playhead span { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #58a9ff; }
.queue-playback-track { height: 4px; margin: 0 15px; overflow: hidden; border-radius: 999px; background: #303036; }
.queue-playback-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1683ff, #52d58c); transition: width .25s ease; }
.queue-timeline > p { margin: 10px 15px 0; color: #858991; font-size: 14px; line-height: 1.45; text-align: center; }
.queue-editor-tools { margin-top: 13px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.queue-editor-tools button { min-width: 0; min-height: 76px; padding: 8px 3px; display: grid; place-content: center; justify-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #1a1a1f; color: #a7a8af; font-size: 14px; font-weight: 750; }
.queue-editor-tools button b { width: 30px; height: 30px; display: grid; place-items: center; color: #e5e6e9; font-size: 25px; font-weight: 500; }
.queue-editor-tools button:disabled { opacity: .34; }
.queue-actions { margin-top: 10px; }
.queue-actions .button { width: 100%; }
.queue-footnote { margin: 13px 6px 0; text-align: center; }

.result-batch-navigator { margin: 0 0 10px; padding: 11px; border: 1px solid rgba(79,165,255,.28); border-radius: 17px; background: linear-gradient(145deg, rgba(22,131,255,.12), rgba(18,18,22,.96)); }
.result-batch-navigator > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 0 2px 9px; }
.result-batch-navigator > header > div { display: grid; gap: 1px; }
.result-batch-navigator > header strong { font-size: 16px; }
.result-batch-navigator > header small { color: #8fa0b3; font-size: 13px; text-align: right; }
.result-batch-transport { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 7px; }
.result-batch-transport > button { width: 40px; height: 58px; border: 1px solid rgba(255,255,255,.10); border-radius: 13px; background: rgba(255,255,255,.055); color: #e8f3ff; font-size: 28px; }
.result-batch-transport > button:disabled { opacity: .28; }
.result-batch-filmstrip { min-width: 0; padding: 2px; display: flex; gap: 7px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.result-batch-filmstrip::-webkit-scrollbar { display: none; }
.result-batch-frame { position: relative; flex: 0 0 76px; height: 58px; overflow: hidden; scroll-snap-align: center; border: 2px solid transparent; border-radius: 11px; background: #08090b; color: white; }
.result-batch-frame.is-current { border-color: #53a9ff; box-shadow: 0 0 0 2px rgba(31,133,255,.18); }
.result-batch-frame img { width: 100%; height: 100%; object-fit: cover; opacity: .76; }
.result-batch-frame.is-current img { opacity: 1; }
.result-batch-frame b { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: rgba(0,0,0,.74); font-size: 11px; }
.result-batch-frame span { position: absolute; right: 4px; bottom: 4px; padding: 2px 5px; border-radius: 999px; background: rgba(0,0,0,.76); font-size: 11px; font-weight: 800; }

.result-photo { position: relative; height: clamp(286px, 74vw, 326px); overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: #09090b; }
.result-photo::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 -42px 54px rgba(0,0,0,.12); }
#resultCanvas { width: 100%; height: 100%; display: block; outline: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#resultCanvas:active { cursor: grabbing; }
#resultCanvas.is-adding { cursor: crosshair; }
#resultCanvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-2); }
.demo-badge { position: absolute; z-index: 3; top: 14px; left: 14px; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.62); color: rgba(255,255,255,.88); backdrop-filter: blur(10px); font-size: 14px; font-weight: 750; }
.result-fullscreen-button { position: absolute; z-index: 4; top: 12px; right: 12px; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(8,10,14,.74); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.34); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.result-fullscreen-button svg { width: 23px; height: 23px; }
.result-fullscreen-button:active { transform: scale(.95); background: rgba(22,131,255,.88); }
.result-fullscreen-button:focus-visible { outline: 3px solid rgba(85,166,255,.52); outline-offset: 2px; }
.marker { position: absolute; z-index: 2; transform: translate(-50%,-50%); width: 29px; height: 29px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; background: var(--accent); font-size: 14px; font-weight: 850; box-shadow: 0 3px 9px #0008; }
.viewer-toolbar { min-height: 54px; margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.viewer-gesture-hint { color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap; }
.viewer-toolbar > div { display: flex; gap: 6px; }
.viewer-toolbar button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 13px; background: var(--surface); color: #e8e8eb; font-size: 23px; font-weight: 700; }
.viewer-toolbar button:first-child { width: 60px; }
.viewer-toolbar button b { font-size: 14px; }
.viewer-toolbar button:active { background: var(--surface-3); }
.viewer-toolbar button:disabled { opacity: .38; }
.fullscreen-panel-grip,
.fullscreen-layout-reset { display: none; }
.review-controls { margin-top: 10px; padding: 12px; border: 1px solid var(--hairline); border-radius: 19px; background: linear-gradient(145deg, #1d1d20, #141416); }
.review-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.review-breakdown > div { min-height: 61px; padding: 8px 4px; display: grid; place-items: center; align-content: center; border-radius: 13px; background: rgba(255,255,255,.045); text-align: center; }
.review-breakdown strong, .review-breakdown span { display: block; }
.review-breakdown strong { font-size: 22px; line-height: 1.05; }
.review-breakdown span { margin-top: 3px; color: var(--muted); font-size: 14px; }
.review-tool-segment { margin-top: 9px; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 15px; background: #0d0d0f; }
.review-tool { min-height: 53px; padding: 5px 3px; display: grid; grid-template-columns: 22px 1fr; align-items: center; justify-items: start; gap: 2px; border: 0; border-radius: 11px; background: transparent; color: #9a9aa1; font-size: 14px; font-weight: 750; text-align: left; }
.review-tool b { font-size: 21px; line-height: 1; justify-self: center; }
.review-tool.is-active { background: var(--accent); color: white; box-shadow: 0 4px 13px rgba(22,131,255,.22); }
.review-tool:disabled { opacity: .36; }
.review-hint { min-height: 21px; margin: 9px 3px 0; color: #aaaab0; font-size: 14px; text-align: center; }
.legacy-edit-notice { margin: 12px 0; padding: 14px; display: grid; gap: 12px; border: 1px solid rgba(255,159,10,.42); border-radius: 16px; background: rgba(255,159,10,.09); }
.legacy-edit-notice > span { display: grid; gap: 4px; }
.legacy-edit-notice strong { color: #ffd08a; font-size: 15px; }
.legacy-edit-notice small { color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.45; }
.legacy-edit-notice .button { width: 100%; min-height: 48px; }
.count-panel { padding: 18px 0 0; text-align: center; }
.count-editor { margin: 5px 0 0; display: flex; align-items: center; justify-content: center; gap: 26px; }
.count-editor button { width: 48px; height: 48px; border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); font-size: 29px; line-height: 1; }
.count-editor button.is-active { border-color: var(--accent-2); background: rgba(22,131,255,.18); color: var(--accent-2); box-shadow: 0 0 0 2px rgba(22,131,255,.08); }
.count-editor strong { min-width: 112px; font-size: 72px; line-height: 1; letter-spacing: -.06em; }
.count-unit { display: block; margin-top: 1px; font-size: 16px; font-weight: 700; }
.field-link { width: 100%; min-height: 58px; margin-top: 18px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--hairline); border-radius: 15px; background: var(--surface); font-size: 16px; font-weight: 750; }
.field-link:disabled { color: #d1d1d4; }
.field-link svg { width: 18px; }
.baseline-note { min-height: 40px; margin: 10px 8px 0; color: var(--muted); font-size: 14px; }
.result-actions { margin-top: 13px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }

.page-intro { padding: 14px 0 24px; }
.page-intro h1 { margin: 8px 0 14px; font-size: 43px; line-height: 1.04; letter-spacing: -.045em; }
.page-intro p { max-width: 355px; margin: 0; color: var(--muted); font-size: 16px; }
.barn-rail { width: calc(100% + 20px); padding-right: 20px; }
.barn-select { position: relative; flex: 0 0 74%; min-height: 225px; padding: 22px; border: 1px solid var(--hairline); border-radius: var(--radius-xl); scroll-snap-align: start; background: linear-gradient(145deg, #242427, #131315); color: white; text-align: left; }
.barn-select.is-selected { border-color: rgba(85,166,255,.9); box-shadow: inset 0 0 0 1px rgba(22,131,255,.65); }
.select-check { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border: 1px solid #5a5a60; border-radius: 50%; display: grid; place-items: center; color: transparent; }
.select-check svg { width: 18px; height: 18px; }
.barn-select.is-selected .select-check { border-color: var(--accent); background: var(--accent); color: white; }
.barn-select .barn-code { margin-bottom: 30px; }
.barn-select strong, .barn-select small { display: block; }
.barn-select strong { font-size: 25px; }
.barn-select small { margin-top: 3px; color: var(--muted); font-size: 14px; }
.route-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.route-summary > div { min-height: 92px; padding: 16px; border-radius: var(--radius-md); background: var(--surface); }
.route-summary span, .route-summary strong { display: block; }
.route-summary strong { margin-top: 4px; font-size: 17px; }
.route-summary b { font-size: 25px; }
.page-cta { width: 100%; margin-top: 16px; }
.page-footnote { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 14px; }

.loading-hero { position: relative; height: 230px; overflow: hidden; border-radius: 24px; isolation: isolate; }
.loading-hero .photo-shade { background: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.06) 78%); }
.loading-hero > div:last-child { position: absolute; z-index: 2; left: 19px; right: 19px; bottom: 18px; }
.loading-hero h1 { margin: 9px 0 1px; font-size: 30px; line-height: 1.08; }
.loading-hero p { margin: 0; color: rgba(255,255,255,.75); font-size: 14px; }
.form-card { margin-top: 14px; padding: 18px; border: 1px solid var(--hairline); border-radius: 20px; background: var(--surface); }
.field-label { display: block; color: white; font-size: 16px; font-weight: 800; }
.field-label span { margin-left: 4px; color: var(--muted); font-size: 14px; font-weight: 650; }
.text-field, .number-field { width: 100%; height: 52px; margin-top: 9px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-2); color: white; }
.text-field { padding: 0 14px; font-size: 16px; }
.text-area { height: auto; min-height: 96px; padding-block: 13px; resize: vertical; line-height: 1.45; }
.text-field::placeholder, .number-field input::placeholder { color: #717177; }
.field-help { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.form-divider { height: 1px; margin: 18px 0 2px; background: var(--hairline); }
.toggle-row { min-height: 76px; margin: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle-row.compact { min-height: 66px; margin: 0; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: 16px; }
.toggle-row small { color: var(--muted); font-size: 14px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch > span, .ios-switch { width: 52px; height: 31px; padding: 2px; display: block; border-radius: 999px; background: #4a4a4e; }
.switch i, .ios-switch i { display: block; width: 27px; height: 27px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; }
.switch input:checked + span, .ios-switch.is-on { background: var(--accent); }
.switch input:checked + span i, .ios-switch.is-on i { transform: translateX(21px); }
.target-field { padding-top: 13px; border-top: 1px solid var(--hairline); }
.number-field { padding: 0 14px; display: flex; align-items: center; }
.number-field input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: white; font-size: 20px; font-weight: 800; }
.number-field span { color: var(--muted); font-size: 16px; }
.source-grid { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.source-select { position: relative; min-height: 69px; padding: 11px 38px 11px 13px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-2); text-align: left; }
.source-select span, .source-select small { display: block; }
.source-select span { font-size: 16px; font-weight: 800; }
.source-select small { color: var(--muted); font-size: 14px; }
.source-select svg { position: absolute; top: 22px; right: 12px; width: 21px; height: 21px; color: transparent; }
.source-select.is-selected { border-color: var(--accent-2); background: rgba(22,131,255,.14); }
.source-select.is-selected svg { color: var(--accent-2); }
.info-note { margin: 15px 0 0; padding: 13px; display: grid; grid-template-columns: 21px 1fr; gap: 9px; border-radius: 13px; background: #222226; color: #aaaab0; font-size: 14px; }
.info-note svg { width: 21px; height: 21px; color: var(--accent-2); }

.summary-visual { position: relative; height: 250px; overflow: hidden; border-radius: 23px; }
.summary-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.32), transparent); }
.summary-check { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); width: 60px; height: 60px; display: grid; place-items: center; border: 5px solid rgba(255,255,255,.22); border-radius: 50%; background: var(--accent); box-shadow: 0 9px 30px rgba(22,131,255,.4); }
.summary-check svg { width: 30px; height: 30px; stroke-width: 2.7; }
.summary-count { padding: 24px 0 18px; text-align: center; }
.summary-count > span { color: var(--muted); font-size: 14px; }
.summary-count strong { display: block; line-height: 1; font-size: 21px; }
.summary-count b { font-size: 66px; letter-spacing: -.06em; }
.summary-count p { width: fit-content; margin: 11px auto 0; padding: 7px 12px; border-radius: 999px; background: rgba(83,209,127,.13); color: var(--green); font-size: 14px; font-weight: 800; }
.summary-detail { overflow: hidden; border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface); }
.summary-detail > div { min-height: 65px; padding: 12px 15px; display: grid; grid-template-columns: 95px 1fr; align-items: center; border-bottom: 1px solid var(--hairline); }
.summary-detail > div:last-child { border-bottom: 0; }
.summary-detail span { color: var(--muted); font-size: 14px; }
.summary-detail strong { text-align: right; font-size: 15px; }
.stack-actions { margin-top: 16px; display: grid; gap: 9px; }

.segmented { min-height: 48px; padding: 4px; gap: 5px; border-radius: 999px; background: var(--surface); scroll-snap-type: none; touch-action: pan-x; }
.segmented button { position: relative; flex: 0 0 auto; min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 750; touch-action: pan-x; }
.segmented button.is-active { background: white; color: #111; }
.segmented button:not(.is-active):active { background: #2b2b2e; color: white; }
.segmented button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.segmented button b { min-width: 21px; height: 21px; margin-left: 4px; padding: 1px 6px; display: inline-grid; place-items: center; border-radius: 999px; background: #303034; color: #b9b9bf; font-size: 12px; }
.segmented button.is-active b { background: #dedee1; color: #111; }
.filter-summary { margin: 11px 3px -10px; color: var(--muted); font-size: 14px; font-weight: 700; }
.record-list, .structure-list { display: grid; gap: 12px; margin-top: 22px; }
.record-card { width: 100%; min-height: 94px; padding: 11px; display: grid; grid-template-columns: 74px 1fr 22px; gap: 13px; align-items: center; border: 0; border-radius: var(--radius-md); background: var(--surface); color: white; text-align: left; }
.record-card:active, .structure-card:active { transform: scale(.985); }
.record-card img { width: 74px; height: 70px; border-radius: 12px; object-fit: cover; }
.record-card > span > * { display: block; }
.record-card > span > span, .record-card small { color: var(--muted); font-size: 14px; }
.record-mode-badge { width: fit-content; margin-bottom: 2px; padding: 3px 8px; border-radius: 999px; background: rgba(22,131,255,.14); color: var(--accent-2) !important; font-size: 12px !important; font-weight: 800; }
.record-card strong { margin: 2px 0; font-size: 20px; }
.record-card > svg { width: 19px; color: #5f5f64; }
.screen-lead { margin: -8px 0 22px; color: var(--muted); font-size: 16px; }
.structure-card { width: 100%; padding: 18px; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: white; text-align: left; }
.structure-head { display: grid; grid-template-columns: 64px 1fr 22px; gap: 14px; align-items: center; }
.structure-photo { width: 64px; height: 58px; border-radius: 14px; object-fit: cover; }
.structure-head .barn-code { width: 54px; height: 54px; border-radius: 15px; font-size: 23px; }
.structure-head strong, .structure-head small { display: block; }
.structure-head strong { font-size: 19px; }
.structure-head small { color: var(--muted); font-size: 14px; }
.structure-head > svg { color: #66666b; }
.pen-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--hairline); }
.pen-chips span { min-height: 34px; padding: 6px 11px; border-radius: 10px; background: var(--surface-2); color: #d4d4d7; font-size: 14px; }
.empty-state { margin-top: 22px; min-height: 210px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--hairline); border-radius: var(--radius-lg); color: var(--muted); text-align: center; }
.empty-state strong { color: white; font-size: 18px; }
.empty-state span { margin-top: 5px; font-size: 14px; }

.settings-group { overflow: hidden; margin-bottom: 16px; border-radius: var(--radius-lg); background: var(--surface); }
.settings-row { width: 100%; min-height: 82px; padding: 14px 16px; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid var(--hairline); background: none; color: white; text-align: left; }
.settings-row:last-child { border-bottom: 0; }
.setting-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: white; }
.setting-icon svg { width: 25px; height: 25px; stroke-width: 2; }
.setting-icon.blue { background: linear-gradient(145deg, #1683ff, #0960c8); }
.setting-icon.purple { background: linear-gradient(145deg, #a762ff, #7342d6); }
.setting-icon.indigo { background: linear-gradient(145deg, #6269ef, #4147ac); }
.setting-icon.green { background: linear-gradient(145deg, #36c77a, #1a8b4e); }
.setting-icon.orange { background: linear-gradient(145deg, #ff9f2f, #d56a0a); }
.setting-icon.cyan { background: linear-gradient(145deg, #20c7d9, #087f95); }
.setting-icon.rose { background: linear-gradient(145deg, #ff6685, #bd3452); }
.settings-row strong, .settings-row small { display: block; }
.settings-row strong { font-size: 16px; }
.settings-row small { margin-top: 2px; color: var(--muted); font-size: 14px; }
.settings-row > svg { width: 20px; color: #696970; }
.settings-notification-value, .management-notification-value { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: #696970; }
.settings-notification-value svg, .management-notification-value svg { width: 20px; }
.settings-notification-value .notification-badge, .management-notification-value .notification-badge { border-color: var(--surface); }
.value { max-width: 142px; color: var(--muted); font-size: 14px; line-height: 1.25; text-align: right; }
.value.green { color: var(--green); }

.notification-screen { --notification-accent: #1683ff; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.notification-summary { margin-bottom: 14px; padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 13px; border: 1px solid rgba(22,131,255,.24); border-radius: 20px; background: linear-gradient(145deg, rgba(22,131,255,.13), var(--surface) 64%); }
.notification-summary > div { min-width: 0; display: flex; align-items: center; gap: 12px; }
.notification-summary > div > span:last-child { min-width: 0; }
.notification-summary strong, .notification-summary small { display: block; }
.notification-summary strong { font-size: 16px; }
.notification-summary small { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.notification-summary-actions { flex: 0 0 auto; gap: 8px !important; }
.notification-summary-actions > button { min-height: 42px; padding: 0 12px; flex: 0 0 auto; border: 1px solid rgba(88,174,255,.28); border-radius: 12px; background: rgba(22,131,255,.14); color: #8cc8ff; font-size: 14px; font-weight: 800; }
.notification-summary-actions > button.is-destructive { border-color: rgba(255,69,58,.24); background: rgba(255,69,58,.08); color: #ff8178; }
.notification-summary-actions > button:disabled { opacity: .42; }
.notification-filters { width: 100%; margin-bottom: 15px; }
.notification-filters button { min-width: 0; flex: 1; font-size: 14px; }
.notification-list { display: grid; gap: 10px; }
.notification-card { position: relative; width: 100%; min-height: 112px; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 54px; border: 1px solid var(--hairline); border-radius: 19px; background: var(--surface); color: var(--text); }
.notification-card.is-unread { border-color: rgba(22,131,255,.32); background: linear-gradient(145deg, rgba(22,131,255,.13), var(--surface) 62%); box-shadow: inset 3px 0 0 var(--notification-accent); }
.notification-card.is-resolved { opacity: .78; }
.notification-card-open { min-width: 0; min-height: 110px; padding: 15px; display: grid; grid-template-columns: 46px minmax(0,1fr) 20px; align-items: start; gap: 12px; border: 0; background: transparent; color: inherit; text-align: left; }
.notification-card-open:focus-visible, .notification-delete-button:focus-visible { outline: 2px solid #58aeff; outline-offset: -3px; }
.notification-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(22,131,255,.14); color: #69b5ff; }
.notification-card[data-category="action"] .notification-card-icon { background: rgba(255,159,10,.14); color: #ffb54b; }
.notification-card[data-type^="access-approved"], .notification-card[data-type^="device-transfer-approved"] { --notification-accent: #30d158; }
.notification-card[data-type^="access-approved"] .notification-card-icon, .notification-card[data-type^="device-transfer-approved"] .notification-card-icon { background: rgba(48,209,88,.14); color: #67de84; }
.notification-card-icon svg { width: 23px; height: 23px; }
.notification-card-copy { min-width: 0; }
.notification-card-copy > span:first-child { display: flex; align-items: center; gap: 7px; }
.notification-card-copy strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.notification-unread-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 4px rgba(255,69,58,.1); }
.notification-card-copy p { margin: 5px 0 8px; overflow: hidden; display: -webkit-box; color: #b2b2b8; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notification-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #77777f; font-size: 14px; }
.notification-action-label { color: #69b5ff; font-weight: 800; }
.notification-resolved-label { color: #70cf88; font-weight: 800; }
.notification-card-open > svg { align-self: center; color: #66666c; }
.notification-delete-button { min-width: 54px; min-height: 100%; display: grid; place-items: center; border: 0; border-left: 1px solid var(--hairline); background: rgba(255,255,255,.012); color: #77777f; }
.notification-delete-button svg { width: 21px; height: 21px; }
.notification-delete-button:hover, .notification-delete-button:active { background: rgba(255,69,58,.1); color: #ff6961; }
.notification-empty { margin-top: 12px; }
.empty-notification-icon { width: 58px; height: 58px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 19px; background: var(--surface-2); color: #777780; }
.empty-notification-icon svg { width: 28px; height: 28px; }

.email-notification-sheet { width: 100%; }
.notification-preferences-panel { margin: 28px 0 8px; padding: 18px; border: 1px solid rgba(88,174,255,.22); border-radius: 22px; background: linear-gradient(145deg, rgba(22,131,255,.1), var(--surface) 36%); }
.notification-preferences-heading { margin-bottom: 14px; }
.notification-preferences-heading h2 { margin: 3px 0 0; font-size: 23px; }
.email-notification-sheet form { display: grid; gap: 13px; }
.email-channel-card { min-height: 70px; padding: 11px 13px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface-2); }
.email-channel-card + form { margin-top: 13px; }
.email-channel-card > span:nth-child(2) { min-width: 0; }
.email-channel-card strong, .email-channel-card small { display: block; }
.email-channel-card strong { font-size: 16px; }
.email-channel-card small { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.email-channel-card > b { color: var(--green); font-size: 14px; }
.email-channel-app { border-color: rgba(22,131,255,.24); background: linear-gradient(145deg, rgba(22,131,255,.13), var(--surface-2)); }
.email-address-field { display: block; color: var(--muted); font-size: 14px; font-weight: 750; }
.email-verification-line { min-height: 44px; padding: 0 3px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.email-verification-line > span { color: #ffb54b; font-size: 14px; font-weight: 800; }
.email-verification-line > span.is-verified { color: var(--green); }
.email-verification-line button { min-height: 40px; padding: 0 13px; border: 1px solid rgba(88,174,255,.32); border-radius: 12px; background: rgba(22,131,255,.13); color: #75bcff; font-size: 14px; font-weight: 800; }
.email-verification-code { padding: 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; border: 1px solid rgba(255,159,10,.25); border-radius: 16px; background: rgba(255,159,10,.07); }
.email-verification-code[hidden] { display: none; }
.email-verification-code label { color: var(--muted); font-size: 14px; font-weight: 750; }
.email-verification-code .sheet-input { letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.email-verification-code .button { min-width: 130px; margin: 0; }
.email-delivery-mode { min-height: 62px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface-2); }
.email-delivery-mode strong, .email-delivery-mode small { display: block; }
.email-delivery-mode strong { font-size: 15px; }
.email-delivery-mode small { margin-top: 2px; color: var(--muted); font-size: 14px; }
.email-delivery-mode > b { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 14px; white-space: nowrap; }
.email-delivery-mode svg { width: 18px; height: 18px; }
.email-category-section { padding: 4px 0 0; }
.email-category-section h3 { margin: 3px 0 10px; font-size: 19px; }
.email-category-list { overflow: hidden; border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface-2); }
.email-category-list > label { min-height: 70px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.email-category-list > label:last-child { border-bottom: 0; }
.email-category-list > label[hidden] { display: none; }
.email-category-list strong, .email-category-list small { display: block; }
.email-category-list strong { font-size: 15px; }
.email-category-list small { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.email-category-list .switch { flex: 0 0 auto; }
.email-category-list .switch > span { width: 48px; height: 29px; }
.email-category-list .switch i { width: 25px; height: 25px; }
.email-category-list .switch input:checked + span i { transform: translateX(19px); }
.email-delivery-notice { margin: 0; padding: 12px 13px; border-radius: 14px; background: rgba(255,159,10,.1); color: #efb567; font-size: 14px; line-height: 1.5; }
.email-delivery-notice.is-ready { background: rgba(48,209,88,.1); color: #76dd8e; }
.email-notification-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.email-notification-actions .button { min-height: 52px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.email-notification-actions svg { width: 20px; height: 20px; }
.email-notification-sheet [disabled] { cursor: not-allowed; opacity: .5; }

@media (max-width: 480px) {
  .notification-summary { align-items: stretch; flex-direction: column; }
  .notification-summary-actions { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
  .notification-summary-actions > button { width: 100%; }
  .notification-filters { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .notification-filters::-webkit-scrollbar { display: none; }
  .notification-filters button { min-width: 124px; flex: 0 0 auto; }
  .email-notification-actions { grid-template-columns: 1fr; }
  .email-verification-code { grid-template-columns: 1fr; }
  .email-verification-code .button { width: 100%; }
  .notification-preferences-panel { margin-top: 22px; padding: 14px; border-radius: 20px; }
  .notification-preferences-heading { align-items: flex-end; }
  .notification-preferences-heading .section-caption { max-width: 116px; }
}

.about-card {
  position: relative;
  margin: 10px 0 20px;
  overflow: hidden;
  border: 1px solid rgba(73, 156, 255, .25);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(22, 131, 255, .21), transparent 42%),
    linear-gradient(145deg, #191d26, #111318 72%);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
}
.about-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -86px; top: -90px; border: 1px solid rgba(73, 156, 255, .22); border-radius: 50%; box-shadow: 0 0 0 24px rgba(30, 126, 255, .035); pointer-events: none; }
.about-card > summary { position: relative; z-index: 1; min-height: 76px; padding: 12px 15px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; cursor: pointer; list-style: none; user-select: none; }
.about-card > summary::-webkit-details-marker { display: none; }
.about-card > summary:focus-visible { outline: 3px solid rgba(22, 131, 255, .45); outline-offset: -3px; border-radius: 18px; }
.about-card-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.about-card-brand img { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 8px 20px rgba(0, 0, 0, .32); }
.about-card-brand > span { min-width: 0; display: grid; gap: 2px; }
.about-card-brand small { color: #64adff; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.about-card-brand strong { color: #fff; font-size: 17px; }
.about-card-brand em { color: #aab3c2; font-size: 12px; font-style: normal; }
.about-card-toggle { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; color: #7ebaff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.about-card-toggle svg { width: 18px; height: 18px; transition: transform .22s ease; }
.about-card[open] .about-card-toggle svg { transform: rotate(90deg); }
.about-card-content { position: relative; z-index: 1; padding: 0 15px 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.about-card-content > p { margin: 13px 0; color: var(--muted); font-size: 14px; }
.about-card dl { margin: 0; overflow: hidden; border: 1px solid var(--hairline); border-radius: 16px; background: rgba(255, 255, 255, .035); }
.about-card dl div { min-height: 46px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--hairline); }
.about-card dl div:last-child { border-bottom: 0; }
.about-card dt { color: var(--muted); font-size: 13px; }
.about-card dd { margin: 0; color: #f4f7fb; font-size: 14px; font-weight: 700; text-align: right; }
.about-card dd a { color: #79baff; overflow-wrap: anywhere; }
.about-card .about-card-notice { margin: 13px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 159, 47, .08); color: #d8bd92; font-size: 12px; line-height: 1.5; }
.about-card nav { display: flex; flex-wrap: wrap; gap: 8px; }
.about-card nav a { min-height: 38px; padding: 9px 12px; display: inline-flex; align-items: center; border: 1px solid rgba(72, 155, 255, .22); border-radius: 11px; background: rgba(22, 131, 255, .09); color: #79baff; font-size: 13px; font-weight: 700; text-decoration: none; }

@media (max-width: 520px) {
  .about-card-toggle > span { display: none; }
  .about-card dl div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .about-card dd { width: 100%; text-align: left; line-height: 1.55; }
}

.backup-section { margin-top: 28px; padding-bottom: 18px; }
.backup-heading { align-items: end; margin-bottom: 13px; }
.backup-heading h2 { margin: 3px 0 0; font-size: 25px; }
.backup-heading .section-caption { max-width: 150px; text-align: right; }
.backup-hero { position: relative; min-height: 174px; padding: 20px; display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; overflow: hidden; border: 1px solid rgba(75,155,255,.26); border-radius: 24px; background: radial-gradient(circle at 88% 5%, rgba(25,112,255,.28), transparent 40%), linear-gradient(145deg, #191d27, #111318 72%); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.backup-hero::after { content: ""; position: absolute; width: 150px; height: 150px; right: -70px; top: -72px; border: 1px solid rgba(75,155,255,.28); border-radius: 50%; box-shadow: 0 0 0 24px rgba(30,126,255,.04), 0 0 0 52px rgba(30,126,255,.025); pointer-events: none; }
.backup-hero-orb { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg, #2a94ff, #0765de); color: white; box-shadow: 0 10px 28px rgba(0,117,255,.34); }
.backup-hero-orb svg { width: 29px; height: 29px; }
.backup-hero-copy { min-width: 0; }
.backup-hero-copy > span, .backup-last span { display: block; color: var(--muted); font-size: 13px; font-weight: 700; }
.backup-hero-copy > strong { display: block; margin-top: 2px; overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.backup-hero-copy small { margin-top: 6px; display: flex; align-items: center; gap: 6px; color: #b9b9bf; font-size: 13px; font-style: normal; }
.backup-hero-copy small i { color: #55565d; font-style: normal; }
.backup-state { color: var(--muted); font-size: 13px; }
.backup-state.connected { color: #5ee293; }
.backup-state.needs-setup { color: #ffbd5b; }
.backup-last { position: relative; z-index: 1; align-self: start; text-align: right; }
.backup-last strong { display: block; margin-top: 3px; color: #d8d8dc; font-size: 13px; white-space: nowrap; }
.backup-progress, .backup-error { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 750; }
.backup-progress { background: rgba(22,131,255,.15); color: #78b8ff; }
.backup-progress::before { content: ""; width: 9px; height: 9px; margin-right: 8px; display: inline-block; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.backup-error { background: rgba(255,159,47,.1); color: #ffbd5b; }
.compact-section-heading { margin: 23px 2px 11px; }
.compact-section-heading h3 { margin: 0; font-size: 18px; }
.provider-rail { gap: 11px; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
.provider-card { position: relative; min-width: 132px; height: 146px; padding: 16px 14px 13px; display: grid; grid-template-rows: 60px auto auto; justify-items: start; border: 1px solid var(--hairline); border-radius: 20px; background: linear-gradient(145deg, #202024, #171719); color: white; text-align: left; scroll-snap-align: start; }
.provider-card::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; pointer-events: none; }
.provider-card.is-selected::after { border-color: var(--accent); }
.provider-card.is-selected { background: radial-gradient(circle at 100% 0, rgba(22,131,255,.23), transparent 54%), linear-gradient(145deg, #222630, #17191d); }
.provider-card.is-connected::before { content: "✓"; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #30c777; color: white; font-size: 12px; font-weight: 900; }
.provider-card > strong { width: 100%; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.provider-card > small { margin-top: 3px; color: var(--muted); font-size: 13px; }
.provider-logo { width: 55px; height: 55px; padding: 7px; display: grid; place-items: center; overflow: hidden; border-radius: 17px; background: #2b2b30; }
.provider-logo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.provider-logo.google-drive { padding: 8px; background: #fff; }
.provider-logo.onedrive { padding: 4px; background: linear-gradient(145deg, #10283f, #0d1d2e); }
.provider-logo.dropbox { padding: 6px; background: #fff; }
.provider-logo.box { padding: 5px; background: #fff; }
.provider-logo.icloud { padding: 0; background: transparent; }
.backup-preferences { margin-top: 20px; }
.backup-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.backup-action { min-height: 92px; padding: 14px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface); color: white; text-align: left; }
.backup-action.primary { border-color: rgba(45,145,255,.42); background: linear-gradient(145deg, rgba(22,131,255,.26), rgba(22,131,255,.11)); }
.backup-action > svg { width: 28px; height: 28px; color: var(--accent-2); }
.backup-action strong, .backup-action small { display: block; }
.backup-action strong { font-size: 15px; }
.backup-action small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.25; }
.backup-action:disabled { opacity: .5; }
.backup-privacy-note { margin: 13px 2px 0; padding: 13px 14px; display: grid; grid-template-columns: 22px 1fr; gap: 10px; border: 1px solid rgba(52,199,89,.18); border-radius: 15px; background: rgba(52,199,89,.07); color: #aeb3b0; font-size: 13px; line-height: 1.5; }
.backup-privacy-note svg { width: 21px; height: 21px; color: #4bd17f; }
.backup-version-list { display: grid; gap: 10px; max-height: min(52vh, 520px); overflow-y: auto; }
.backup-version-card { width: 100%; min-height: 72px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--hairline); border-radius: 17px; background: var(--surface-2); color: white; text-align: left; }
.backup-version-card span, .backup-version-card strong, .backup-version-card small { display: block; min-width: 0; }
.backup-version-card strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.backup-version-card small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.backup-version-card b { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: rgba(22,131,255,.16); color: var(--accent-2); font-size: 13px; }
.provider-sheet-status { padding: 14px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; border-radius: 17px; background: var(--surface-2); }
.provider-sheet-status small, .provider-sheet-status strong { display: block; }
.provider-sheet-status small { color: var(--muted); font-size: 13px; }
.provider-sheet-status strong { margin-top: 2px; font-size: 17px; }
.provider-sheet-details { margin: 12px 0 16px; padding: 14px; border: 1px solid var(--hairline); border-radius: 15px; }
.provider-sheet-details div { display: grid; grid-template-columns: 86px 1fr; gap: 10px; }
.provider-sheet-details span { color: var(--muted); font-size: 14px; }
.provider-sheet-details strong { text-align: right; font-size: 14px; }
.provider-sheet-details p { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 13px; line-height: 1.45; }
.provider-sheet-actions { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.provider-sheet-actions button { min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--hairline); border-radius: 15px; background: var(--surface-2); color: white; font-size: 14px; font-weight: 800; }
.provider-sheet-actions svg { width: 22px; height: 22px; color: var(--accent-2); }
.apple-cloudkit-buttons { margin: 12px 0; padding: 13px; display: grid; gap: 8px; justify-items: center; border-radius: 15px; background: #f3f3f5; }
.apple-cloudkit-buttons small { color: #555; font-size: 12px; }
.backup-content-choice { min-height: 70px; }
.backup-content-choice > span { display: grid; gap: 3px; text-align: left; }
.backup-content-choice small { color: var(--muted); font-size: 13px; font-weight: 650; }
.restore-preview { overflow: hidden; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface-2); }
.restore-preview > div { min-height: 50px; padding: 10px 14px; display: grid; grid-template-columns: 92px 1fr; align-items: center; border-bottom: 1px solid var(--hairline); }
.restore-preview > div:last-child { border-bottom: 0; }
.restore-preview span { color: var(--muted); font-size: 14px; }
.restore-preview strong { text-align: right; font-size: 14px; }
.restore-warning { margin: 12px 0; padding: 12px; border-radius: 13px; background: rgba(255,159,47,.1); color: #e6b36e; font-size: 13px; line-height: 1.45; }
.restore-warning.is-danger { background: rgba(255,69,84,.14); color: #ff8993; }

.sheet-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(0,0,0,.67); }
.bottom-sheet { position: fixed; z-index: 51; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 430px); padding: 10px 20px calc(24px + var(--safe-bottom)); border-radius: 28px 28px 0 0; background: #1c1c1f; box-shadow: 0 -24px 60px rgba(0,0,0,.45); }
.sheet-handle { width: 40px; height: 5px; margin: 0 auto 16px; border-radius: 99px; background: #5a5a60; }
.bottom-sheet header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px; }
.bottom-sheet h2 { margin: 2px 0 0; font-size: 24px; }
.close-sheet { border: 0; background: none; color: var(--accent-2); font-size: 16px; font-weight: 750; }
.bottom-sheet > label { display: block; margin-top: 12px; color: var(--muted); font-size: 14px; font-weight: 700; }
.bottom-sheet select { width: 100%; height: 52px; margin-top: 7px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 14px; background: #2a2a2e; color: white; font-size: 16px; }
.bottom-sheet > .button { width: 100%; }
.app-sheet { max-height: min(88vh, 720px); overflow-y: auto; }
.detail-photo { width: 100%; height: min(38vh, 300px); min-height: 205px; display: block; border-radius: 18px; background: #09090b; object-fit: contain; }
.detail-photo.is-loading { opacity: .55; }
.detail-media-switch { margin-top: 10px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 14px; background: #101012; }
.detail-media-switch button { min-height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 15px; font-weight: 800; }
.detail-media-switch button.is-active { background: var(--surface-3); color: white; }
.detail-media-note { margin: 7px 2px 0; color: var(--muted); font-size: 14px; text-align: center; }
.detail-count { padding: 18px 0 13px; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.detail-count strong { font-size: 58px; line-height: 1; letter-spacing: -.05em; }
.detail-count span { font-size: 16px; font-weight: 800; }
.detail-edit-button { width: 100%; min-height: 52px; margin: 0 0 12px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.detail-edit-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.detail-rows { overflow: hidden; border: 1px solid var(--hairline); border-radius: 15px; background: var(--surface-2); }
.detail-rows > div { min-height: 58px; padding: 11px 14px; display: grid; grid-template-columns: 90px 1fr; align-items: center; border-bottom: 1px solid var(--hairline); }
.detail-rows > div:last-child { border-bottom: 0; }
.detail-rows span { color: var(--muted); font-size: 14px; }
.detail-rows strong { text-align: right; font-size: 15px; }
.sheet-choice-list { display: grid; gap: 8px; }
.sheet-choice { width: 100%; min-height: 54px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-2); color: white; font-size: 16px; font-weight: 750; }
.sheet-choice svg { color: transparent; }
.sheet-choice.is-selected { border-color: var(--accent-2); background: rgba(22,131,255,.14); }
.sheet-choice.is-selected svg { color: var(--accent-2); }
.app-sheet > label { display: block; margin-top: 12px; color: var(--muted); font-size: 14px; font-weight: 700; }
.sheet-input { width: 100%; height: 52px; margin-top: 7px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 14px; outline: 0; background: #2a2a2e; color: white; font-size: 16px; }
.sheet-input:focus { border-color: var(--accent-2); }
.edit-loading-target { margin-top: 13px; padding: 13px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.edit-loading-sources { margin: 14px 0; }
.edit-loading-sources .source-grid { max-height: 190px; overflow-y: auto; padding-right: 2px; }
#loadingEditSheet textarea.sheet-input { height: auto; min-height: 88px; padding-top: 12px; resize: vertical; }
.sheet-preview { margin: 13px 0; padding: 11px 13px; border-radius: 12px; background: rgba(22,131,255,.12); color: var(--accent-2); font-size: 14px; font-weight: 750; }
.barn-photo-editor { position: relative; height: 176px; overflow: hidden; border-radius: 18px; background: var(--surface-2); }
.barn-photo-editor img { width: 100%; height: 100%; object-fit: cover; }
.barn-photo-editor::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.68), transparent 65%); }
.photo-edit-button { position: absolute; z-index: 2; left: 12px; bottom: 12px; min-height: 43px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(12,12,14,.68); color: white; backdrop-filter: blur(10px); font-size: 14px; font-weight: 800; }
.photo-edit-button svg { width: 20px; height: 20px; }
.language-note { margin: -4px 0 14px; color: var(--muted); font-size: 14px; }
.language-list .sheet-choice { min-height: 64px; }
.language-list .sheet-choice { justify-content: flex-start; gap: 12px; }
.language-list .sheet-choice > svg { margin-left: auto; }
.language-flag { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: #303034; font-size: 27px; line-height: 1; }
.language-copy { min-width: 0; display: grid; text-align: left; }
.language-list .sheet-choice strong { font-size: 16px; }
.language-list .sheet-choice small { color: var(--muted); font-size: 13px; font-weight: 650; }
.danger-button { margin-top: 9px; background: rgba(255,69,58,.13); color: #ff6961; }
.app-shell.font-large :where(p, button, input, select, label) { font-size: 17px; }
.app-shell.font-large :where(small, em, .eyebrow, .muted, .section-caption) { font-size: 15px; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(104px + var(--safe-bottom)); transform: translate(-50%, 18px); width: max-content; max-width: calc(100% - 40px); padding: 11px 16px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(39,39,42,.95); opacity: 0; pointer-events: none; transition: .25s; font-size: 15px; font-weight: 700; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 431px) { .bottom-nav { border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); } }
@media (max-width: 350px) { .viewer-toolbar { align-items: flex-start; flex-direction: column; } .viewer-toolbar > div { width: 100%; justify-content: space-between; } .review-tool { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
html:not([lang="zh-Hant"]) .hero-copy h2 { font-size: 34px; }
html:not([lang="zh-Hant"]) .review-tool { min-height: 66px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
html:is([lang="th"], [lang="vi"], [lang="id"], [lang="fil"]) .button { min-height: 54px; padding-block: 10px; line-height: 1.18; text-align: center; }
@media (max-height: 700px) { .hero-card { height: 305px; } .camera-controls { bottom: max(10px, env(safe-area-inset-bottom)); } .capture-guide { bottom: 126px; } .shutter { width: 72px; height: 72px; } }

/*
 * Adaptive iPad layout
 * Compact widths keep the phone tab bar. Regular widths use denser cards,
 * multi-column lists and, in landscape, an iPad-style navigation rail.
 */
@media (min-width: 700px) {
  :root {
    --tablet-gutter: clamp(28px, 4.5vw, 54px);
    --tablet-gap: clamp(18px, 2.4vw, 28px);
  }

  html, body { background: #050506; }
  .app-shell { width: 100%; max-width: none; min-height: 100dvh; box-shadow: none; }
  .screen { padding: 0 var(--tablet-gutter) calc(128px + var(--safe-bottom)); }
  .screen.screen-full { max-width: none; margin: 0; padding: 0; }
  .screen:not(.screen-full) { max-width: 1040px; margin-inline: auto; }
  .topbar { min-height: 124px; }
  .home-topbar { min-height: 138px; }
  .topbar h1 { font-size: 36px; }
  .brand-icon { width: 58px; height: 58px; border-radius: 17px; }
  .icon-button, .glass-button { width: 52px; height: 52px; }

  .screen[data-screen="home"].is-active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--tablet-gap);
    align-items: start;
  }
  .screen[data-screen="home"] > :is(.home-topbar, .hero-rail, .hero-dots) { grid-column: 1 / -1; }
  .screen[data-screen="home"] > .section-block { min-width: 0; margin-top: 20px; }
  .hero-rail,
  .resume-rail,
  .scenario-rail,
  .recent-rail,
  .guide-rail,
  .barn-shortcuts,
  .barn-rail { width: 100%; padding-right: 0; }
  .hero-card { flex: 0 0 68%; height: 420px; }
  .hero-copy { padding: 30px; }
  .hero-copy h2 { font-size: 43px; }
  .resume-card { flex-basis: 92%; }
  .scenario-card { flex-basis: 82%; height: 274px; }
  .barn-shortcuts > button { flex-basis: 82%; min-height: 216px; }
  .recent-card { flex-basis: 80%; height: 205px; }
  .guide-rail { grid-auto-columns: 84%; }

  .barn-select { flex-basis: 47%; min-height: 244px; }
  .record-list, .structure-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-card { min-height: 112px; grid-template-columns: 82px 1fr 22px; }
  .record-card img { width: 82px; height: 82px; }
  .structure-card { min-height: 176px; }
  .segmented { width: fit-content; max-width: 100%; }

  .screen[data-screen="settings"].is-active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--tablet-gap);
    align-items: start;
  }
  .screen[data-screen="settings"] > .topbar,
  .screen[data-screen="settings"] > .settings-group:first-of-type,
  .screen[data-screen="settings"] > .about-card,
  .screen[data-screen="settings"] > .backup-section { grid-column: 1 / -1; }
  .settings-row { min-height: 88px; }
  .screen[data-screen="notifications"] { max-width: 900px; }
  .notification-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backup-section { width: 100%; }
  .provider-rail { margin-inline: 0; padding-inline: 0; }
  .provider-card { min-width: 154px; }
  .backup-action { min-height: 102px; }

  .result-photo { height: clamp(420px, 56vw, 540px); }
  .result-actions { max-width: 620px; margin-inline: auto; }
  .summary-visual { height: 360px; }
  .loading-hero { height: 310px; }
  .source-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .bottom-nav {
    bottom: 16px;
    width: min(620px, calc(100% - 48px));
    height: calc(82px + var(--safe-bottom));
    padding-inline: 18px;
    overflow: visible;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 27px;
    background: rgba(17,17,20,.88);
    box-shadow: 0 20px 55px rgba(0,0,0,.46);
  }
  .nav-camera > span { border-color: #111114; }
  .toast { bottom: calc(118px + var(--safe-bottom)); }

  .bottom-sheet {
    top: 50%;
    bottom: auto;
    width: min(620px, calc(100% - 56px));
    max-height: min(82dvh, 780px);
    padding: 24px 28px calc(28px + var(--safe-bottom));
    transform: translate(-50%, -50%);
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 30px;
    box-shadow: 0 32px 100px rgba(0,0,0,.66);
  }
  .sheet-handle { display: none; }
  .bottom-sheet header { margin-bottom: 22px; }
  .bottom-sheet h2 { font-size: 28px; }
  .detail-photo { height: min(42dvh, 370px); }
}

@media (min-width: 700px) and (orientation: portrait) {
  .screen:not(.screen-full) { max-width: 880px; }
  .hero-card { flex-basis: 76%; }
  .page-intro { padding-top: 24px; }
  .page-intro h1 { font-size: 52px; }
}

@media (min-width: 900px) and (orientation: landscape) {
  :root { --nav-rail-width: 106px; }

  .screen:not(.screen-full) {
    max-width: none;
    margin: 0;
    padding-right: var(--tablet-gutter);
    padding-bottom: 44px;
    padding-left: calc(var(--nav-rail-width) + var(--tablet-gutter));
  }
  .topbar { min-height: 112px; }
  .home-topbar { min-height: 122px; }

  .bottom-nav {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: var(--nav-rail-width);
    height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 9px calc(18px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, minmax(74px, 1fr));
    gap: 4px;
    align-items: stretch;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.09);
    border-radius: 0;
    background: rgba(9,9,11,.95);
    box-shadow: 20px 0 60px rgba(0,0,0,.3);
  }
  .nav-item, .nav-camera { min-height: 0; padding: 7px 2px; justify-content: center; }
  .nav-item { border-radius: 19px; }
  .nav-item.is-active { background: rgba(255,255,255,.08); color: white; }
  .nav-camera { transform: none; }
  .nav-camera > span { width: 62px; height: 62px; border: 0; background: linear-gradient(145deg, #238cff, #086bdd); box-shadow: 0 10px 28px rgba(22,131,255,.28); }
  .toast { left: calc(50% + (var(--nav-rail-width) / 2)); bottom: 28px; }
  .local-mode-banner { left: calc(50% + (var(--nav-rail-width) / 2)); bottom: 22px; width: min(520px, calc(100% - var(--nav-rail-width) - 40px)); }

  .screen[data-screen="home"].is-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-card { flex-basis: 47%; height: min(430px, 55dvh); }
  .resume-card { flex-basis: 74%; }
  .scenario-card { flex-basis: 62%; }
  .barn-shortcuts > button { flex-basis: 58%; }
  .recent-card { flex-basis: 56%; }
  .guide-rail { grid-auto-columns: 58%; }

  .screen[data-screen="result"].is-active {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, .85fr);
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: clamp(24px, 3vw, 42px);
    align-items: start;
  }
  .screen[data-screen="result"] > .topbar { grid-column: 1 / -1; }
  .screen[data-screen="result"] > .result-batch-navigator { grid-column: 1 / -1; grid-row: 2; }
  .screen[data-screen="result"] > .result-photo { grid-column: 1; grid-row: 3 / 6; width: 100%; height: clamp(430px, calc(100dvh - 290px), 690px); }
  .screen[data-screen="result"] > .viewer-toolbar { grid-column: 1; grid-row: 6; }
  .screen[data-screen="result"] > .review-controls { grid-column: 2; grid-row: 3; margin-top: 0; }
  .screen[data-screen="result"] > .count-panel { grid-column: 2; grid-row: 4; }
  .screen[data-screen="result"] > .result-actions { grid-column: 2; grid-row: 5; width: 100%; }
  .result-batch-navigator { margin-bottom: 16px; }
  .result-batch-frame { flex-basis: 96px; height: 64px; }
  .count-panel { padding-top: 16px; }
  .count-editor strong { font-size: 68px; }

  .screen[data-screen="capture-queue"].is-active {
    display: block;
    padding-left: var(--tablet-gutter);
  }
  .queue-editor-workspace { grid-template-columns: minmax(420px, 1.3fr) minmax(360px, .9fr); gap: clamp(24px, 3vw, 46px); align-items: start; }
  .queue-preview-column { position: sticky; top: 22px; }
  .queue-preview-stage { height: clamp(440px, calc(100dvh - 360px), 680px); }
  .queue-console-column { padding-top: 4px; }
  .queue-transport { min-height: 78px; }
  .queue-filmstrip { padding-inline: calc(50% - 65px); }
  .queue-frame { flex-basis: 130px; height: 90px; }
  .queue-editor-tools button { min-height: 84px; }

  .screen[data-screen="patrol"].is-active {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: clamp(28px, 4vw, 60px);
    align-items: start;
  }
  .screen[data-screen="patrol"] > .topbar { grid-column: 1 / -1; }
  .screen[data-screen="patrol"] > .page-intro { grid-column: 1; grid-row: 2 / 5; padding-top: 34px; }
  .screen[data-screen="patrol"] > .barn-rail { grid-column: 2; grid-row: 2; }
  .screen[data-screen="patrol"] > .route-summary { grid-column: 2; grid-row: 3; }
  .screen[data-screen="patrol"] > .page-cta { grid-column: 2; grid-row: 4; }
  .screen[data-screen="patrol"] > .page-footnote { grid-column: 2; grid-row: 5; }
  .page-intro h1 { font-size: clamp(52px, 5vw, 72px); }
  .barn-select { flex-basis: 47%; }

  .screen[data-screen="loading"].is-active {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "header header header"
      "hero hero vehicle"
      "sources sources note"
      "cta cta cta";
    column-gap: var(--tablet-gap);
    align-items: start;
  }
  .screen[data-screen="loading"] > .topbar { grid-area: header; }
  .screen[data-screen="loading"] > .loading-hero { grid-area: hero; height: 100%; min-height: 318px; margin-top: 14px; }
  .screen[data-screen="loading"] > .form-card:nth-of-type(2) { grid-area: vehicle; }
  .screen[data-screen="loading"] > .sources-card { grid-area: sources; }
  .screen[data-screen="loading"] > .form-card:nth-of-type(4) { grid-area: note; }
  .screen[data-screen="loading"] > .page-cta { grid-area: cta; width: min(560px, 100%); justify-self: center; }
  .source-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .screen[data-screen="loading-summary"].is-active {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr);
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
  .screen[data-screen="loading-summary"] > .topbar { grid-column: 1 / -1; }
  .screen[data-screen="loading-summary"] > .summary-visual { grid-column: 1; grid-row: 2 / 5; height: clamp(440px, calc(100dvh - 180px), 650px); }
  .screen[data-screen="loading-summary"] > .summary-count { grid-column: 2; grid-row: 2; }
  .screen[data-screen="loading-summary"] > .summary-detail { grid-column: 2; grid-row: 3; }
  .screen[data-screen="loading-summary"] > .stack-actions { grid-column: 2; grid-row: 4; }

  .record-list, .structure-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .record-card { grid-template-columns: 72px 1fr 18px; }
  .record-card img { width: 72px; height: 76px; }

  .backup-section {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-areas:
      "backup-heading backup-heading"
      "backup-hero provider-heading"
      "backup-hero providers"
      "backup-preferences backup-actions"
      "backup-privacy backup-privacy";
    column-gap: var(--tablet-gap);
    align-items: start;
  }
  .backup-section > .backup-heading { grid-area: backup-heading; }
  .backup-section > .backup-hero { grid-area: backup-hero; height: 100%; min-height: 210px; }
  .backup-section > .compact-section-heading { grid-area: provider-heading; margin-top: 0; }
  .backup-section > .provider-rail { grid-area: providers; }
  .backup-section > .backup-preferences { grid-area: backup-preferences; margin-top: 20px; }
  .backup-section > .backup-action-grid { grid-area: backup-actions; margin-top: 20px; }
  .backup-section > .backup-privacy-note { grid-area: backup-privacy; }
  .provider-card { min-width: 142px; }

  .camera-stage { height: var(--app-viewport-height); min-height: 0; }
  .capture-frame { inset: 12% 18% 12% 7%; }
  .capture-guide { left: 46%; bottom: max(26px, env(safe-area-inset-bottom)); }
  .camera-controls {
    top: 50%;
    right: max(28px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    width: 96px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    gap: 20px;
  }
  .camera-side { min-height: 72px; border-radius: 18px; background: rgba(12,12,14,.52); backdrop-filter: blur(12px); }
  .shutter { width: 84px; height: 84px; }
  .capture-review-actions { top: 50%; right: max(28px, env(safe-area-inset-right)); bottom: auto; left: auto; transform: translateY(-50%); width: min(390px, 38vw); }
  .camera-stage.is-review .capture-frame { display: block; right: calc(min(390px, 38vw) + 54px); }
}

@media (min-width: 1280px) and (orientation: landscape) {
  .screen:not(.screen-full) { padding-right: max(var(--tablet-gutter), calc((100vw - 1500px) / 2)); padding-left: max(calc(var(--nav-rail-width) + var(--tablet-gutter)), calc((100vw - 1500px) / 2 + var(--nav-rail-width))); }
  .hero-card { flex-basis: 42%; }
  .record-list, .structure-list { grid-template-columns: repeat(3, minmax(300px, 1fr)); }
}

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

/* Fog-grey technology light mode. Camera and photo-review surfaces intentionally
   keep their dark working background so masks and image edges remain legible. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f3f5;
  --surface: #fbfcfc;
  --surface-2: #e8edf0;
  --surface-3: #d9e0e4;
  --text: #1e262e;
  --muted: #727c84;
  --hairline: rgba(39, 52, 61, .13);
  --accent: #396a84;
  --accent-2: #2c6a89;
  --green: #258158;
}
html[data-theme="light"],
html[data-theme="light"] body { background: #e4e8eb; }
html[data-theme="light"] body { color: var(--text); }
html[data-theme="light"] .app-shell { background: var(--bg); box-shadow: 0 0 70px rgba(48, 61, 70, .18); }
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-caption,
html[data-theme="light"] .text-link { color: var(--muted); }
html[data-theme="light"] .eyebrow.blue,
html[data-theme="light"] .brand-lockup h1 small { color: var(--accent-2); }
html[data-theme="light"] .icon-button { background: rgba(251,252,252,.94); box-shadow: 0 5px 18px rgba(47,62,72,.07); }
html[data-theme="light"] .accent-button { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="light"] .button-secondary { background: var(--surface-2); color: var(--text); }
html[data-theme="light"] .hero-card,
html[data-theme="light"] .scenario-card,
html[data-theme="light"] .barn-shortcuts > button,
html[data-theme="light"] .guide-card,
html[data-theme="light"] .loading-hero,
html[data-theme="light"] .camera-stage,
html[data-theme="light"] .summary-check { color: #fff; }
html[data-theme="light"] .resume-card,
html[data-theme="light"] .daily-card { background: linear-gradient(145deg, #fbfcfc, #eef1f3); box-shadow: 0 12px 32px rgba(43,58,68,.07); }
html[data-theme="light"] .resume-icon { background: #e1e6e9; }
html[data-theme="light"] .daily-progress { background: #d7dde1; }
html[data-theme="light"] .rail-dots span { background: #c2c9ce; }
html[data-theme="light"] .rail-dots span.is-current { background: var(--accent); }
html[data-theme="light"] .bottom-nav {
  border-color: rgba(47,61,70,.12);
  background: rgba(248,250,251,.94);
  box-shadow: 0 -12px 34px rgba(45,58,67,.08);
}
html[data-theme="light"] .nav-item,
html[data-theme="light"] .nav-camera { color: #7d878e; }
html[data-theme="light"] .nav-item.is-active { color: var(--accent); }
html[data-theme="light"] .nav-camera { color: #fff; }
html[data-theme="light"] .nav-camera > span { border-color: #f8fafb; background: linear-gradient(145deg, #4c788f, #315e75); }
html[data-theme="light"] .notification-badge { border-color: #f8fafb; }
html[data-theme="light"] .local-mode-banner {
  border-color: rgba(57,106,132,.24);
  background: linear-gradient(135deg, rgba(236,243,246,.98), rgba(250,251,252,.98));
  box-shadow: 0 14px 38px rgba(52,65,73,.16);
}
html[data-theme="light"] .local-mode-icon { background: rgba(57,106,132,.13); color: var(--accent); }
html[data-theme="light"] .local-mode-banner small { color: #697781; }
html[data-theme="light"] .local-mode-banner[data-state="pending"] { border-color: rgba(190,122,42,.25); background: linear-gradient(135deg, #fff6e9, #fbfcfc); }
html[data-theme="light"] .pwa-install-banner {
  border-color: rgba(57,106,132,.24);
  background: linear-gradient(135deg, rgba(239,245,247,.98), rgba(251,252,252,.98));
  box-shadow: 0 18px 48px rgba(49,63,72,.18);
}
html[data-theme="light"] .pwa-install-banner small { color: #65747e; }
html[data-theme="light"] .pwa-install-banner em { color: var(--accent-2); }
html[data-theme="light"] .pwa-install-close { color: #78838a; }
html[data-theme="light"] .viewer-toolbar button { color: var(--text); }
html[data-theme="light"] .result-batch-navigator { border-color: rgba(57,106,132,.22); background: linear-gradient(145deg, #f9fbfc, #e7edf1); box-shadow: 0 10px 26px rgba(45,59,67,.07); }
html[data-theme="light"] .result-batch-navigator > header small { color: #6f7d86; }
html[data-theme="light"] .result-batch-transport > button { border-color: rgba(57,73,83,.12); background: rgba(57,106,132,.08); color: var(--accent); }
html[data-theme="light"] .review-controls { background: linear-gradient(145deg, #fbfcfc, #e9edef); box-shadow: 0 12px 28px rgba(45,59,67,.07); }
html[data-theme="light"] .review-breakdown > div { background: rgba(57,106,132,.07); }
html[data-theme="light"] .review-tool-segment { background: #dce2e5; }
html[data-theme="light"] .review-tool { color: #68757e; }
html[data-theme="light"] .review-hint { color: var(--muted); }
html[data-theme="light"] .legacy-edit-notice strong { color: #8a5b18; }
html[data-theme="light"] .legacy-edit-notice small { color: #71644f; }
html[data-theme="light"] .field-link:disabled { color: #8e989e; }
html[data-theme="light"] .barn-select { background: linear-gradient(145deg, #fbfcfc, #e7ecef); color: var(--text); box-shadow: 0 12px 30px rgba(45,59,68,.07); }
html[data-theme="light"] .select-check { border-color: #a5afb5; }
html[data-theme="light"] .field-label,
html[data-theme="light"] .text-field,
html[data-theme="light"] .number-field input,
html[data-theme="light"] .record-card,
html[data-theme="light"] .structure-card,
html[data-theme="light"] .settings-row,
html[data-theme="light"] .provider-card,
html[data-theme="light"] .backup-action,
html[data-theme="light"] .backup-version-card,
html[data-theme="light"] .provider-sheet-actions button,
html[data-theme="light"] .bottom-sheet select,
html[data-theme="light"] .sheet-input,
html[data-theme="light"] .sheet-choice { color: var(--text); }
html[data-theme="light"] .text-field,
html[data-theme="light"] .number-field,
html[data-theme="light"] .source-select,
html[data-theme="light"] .bottom-sheet select,
html[data-theme="light"] .sheet-input { background: #eef1f3; }
html[data-theme="light"] .text-field::placeholder,
html[data-theme="light"] .number-field input::placeholder,
html[data-theme="light"] .sheet-input::placeholder { color: #8b959b; }
html[data-theme="light"] .switch > span,
html[data-theme="light"] .ios-switch { background: #b8c0c5; }
html[data-theme="light"] .info-note { background: #e6ebee; color: #68747c; }
html[data-theme="light"] .segmented { box-shadow: inset 0 0 0 1px rgba(39,52,61,.05); }
html[data-theme="light"] .segmented button.is-active { background: var(--accent); color: #fff; box-shadow: 0 5px 14px rgba(57,106,132,.2); }
html[data-theme="light"] .segmented button:not(.is-active):active { background: #dce2e5; color: var(--text); }
html[data-theme="light"] .segmented button b { background: #d8dee2; color: #68747c; }
html[data-theme="light"] .segmented button.is-active b { background: rgba(255,255,255,.2); color: #fff; }
html[data-theme="light"] .record-card,
html[data-theme="light"] .structure-card,
html[data-theme="light"] .settings-group,
html[data-theme="light"] .about-card,
html[data-theme="light"] .summary-detail,
html[data-theme="light"] .form-card { box-shadow: 0 12px 28px rgba(45,59,67,.055); }
html[data-theme="light"] .record-card > svg,
html[data-theme="light"] .structure-head > svg,
html[data-theme="light"] .settings-row > svg { color: #8a949a; }
html[data-theme="light"] .notification-summary { border-color: rgba(57,106,132,.2); background: linear-gradient(145deg, rgba(57,106,132,.1), #fbfcfc 66%); }
html[data-theme="light"] .notification-card { background: #fbfcfc; color: var(--text); box-shadow: 0 10px 25px rgba(45,59,67,.05); }
html[data-theme="light"] .notification-card.is-unread { border-color: rgba(57,106,132,.25); background: linear-gradient(145deg, rgba(57,106,132,.09), #fbfcfc 66%); }
html[data-theme="light"] .notification-card-copy p { color: #65737d; }
html[data-theme="light"] .email-channel-card,
html[data-theme="light"] .email-delivery-mode,
html[data-theme="light"] .email-category-list { background: #eef2f4; }
html[data-theme="light"] .email-channel-app { background: linear-gradient(145deg, rgba(57,106,132,.1), #eef2f4); }
html[data-theme="light"] .email-verification-code { background: #fff8ed; }
html[data-theme="light"] .email-delivery-notice { color: #835315; }
html[data-theme="light"] .email-delivery-notice.is-ready { color: #27683a; }
html[data-theme="light"] .about-card { border-color: rgba(26, 111, 206, .2); background: radial-gradient(circle at 100% 0%, rgba(22, 131, 255, .13), transparent 42%), linear-gradient(145deg, #fff, #eef2f7 74%); }
html[data-theme="light"] .about-card-brand strong,
html[data-theme="light"] .about-card dd { color: #17202b; }
html[data-theme="light"] .about-card dl { background: rgba(255, 255, 255, .58); }
html[data-theme="light"] .about-card .about-card-notice { color: #835315; }
html[data-theme="light"] .pen-chips span { color: #53616a; }
html[data-theme="light"] .empty-state strong { color: var(--text); }
html[data-theme="light"] .backup-hero {
  border-color: rgba(57,106,132,.22);
  background: radial-gradient(circle at 88% 5%, rgba(57,106,132,.16), transparent 42%), linear-gradient(145deg, #f8fafb, #e8edef 72%);
  box-shadow: 0 18px 42px rgba(45,59,67,.1);
}
html[data-theme="light"] .backup-hero-copy small { color: #65737c; }
html[data-theme="light"] .backup-hero-copy small i { color: #a4adb2; }
html[data-theme="light"] .backup-last strong { color: #4e5c65; }
html[data-theme="light"] .provider-card { background: linear-gradient(145deg, #fbfcfc, #e8edef); }
html[data-theme="light"] .provider-card.is-selected { background: radial-gradient(circle at 100% 0, rgba(57,106,132,.16), transparent 55%), linear-gradient(145deg, #f8fafb, #e4e9ec); }
html[data-theme="light"] .provider-logo { background: #dfe5e8; }
html[data-theme="light"] .provider-logo.onedrive { background: linear-gradient(145deg, #d8e7ef, #cbdce5); }
html[data-theme="light"] .backup-privacy-note { color: #5f6f67; }
html[data-theme="light"] .bottom-sheet { background: #f7f9fa; box-shadow: 0 -24px 60px rgba(43,55,63,.2); }
html[data-theme="light"] .sheet-handle { background: #b7c0c5; }
html[data-theme="light"] .sheet-backdrop { background: rgba(34,43,49,.42); }
html[data-theme="light"] .detail-media-switch { background: #dce2e5; }
html[data-theme="light"] .detail-media-switch button.is-active { color: var(--text); }
html[data-theme="light"] .language-flag { background: #dfe4e7; }
html[data-theme="light"] .toast { background: rgba(39,50,57,.94); color: #fff; }
html[data-theme="light"] .account-profile-section,
html[data-theme="light"] .identity-section { border-color: var(--hairline); background: linear-gradient(145deg, #fbfcfc, #e9edef); }
html[data-theme="light"] .account-profile-form label,
html[data-theme="light"] .identity-section-note { color: var(--muted); }
html[data-theme="light"] .account-profile-form input,
html[data-theme="light"] .account-profile-form select { border-color: var(--hairline); background: #e8edef; color: var(--text); }
html[data-theme="light"] .identity-provider-card { border-color: var(--hairline); background: rgba(255,255,255,.72); }
html[data-theme="light"] .identity-provider-card.is-linked { border-color: rgba(57,106,132,.25); background: rgba(57,106,132,.08); }
html[data-theme="light"] .identity-provider-card > b { background: #e1e6e9; color: #68747c; }
html[data-theme="light"] .account-device-card { border-color: rgba(57,106,132,.22); background: linear-gradient(135deg, rgba(57,106,132,.1), #f8fafb); }

@media (min-width: 700px) {
  html[data-theme="light"], html[data-theme="light"] body { background: #e4e8eb; }
  html[data-theme="light"] .bottom-nav { border-color: rgba(47,61,70,.12); background: rgba(248,250,251,.92); box-shadow: 0 20px 55px rgba(45,58,67,.14); }
}
@media (min-width: 900px) and (orientation: landscape) {
  html[data-theme="light"] .bottom-nav { border-right-color: rgba(47,61,70,.12); background: rgba(242,245,247,.96); box-shadow: 20px 0 60px rgba(45,58,67,.1); }
  html[data-theme="light"] .nav-item.is-active { background: rgba(57,106,132,.11); color: var(--accent); }
}

/* Single-photo and batch review share one compact live editor. Batch review
   adds only the PHOTO TIMELINE and queue transport around this host. */
.queue-inline-review[hidden] { display: none !important; }
.queue-inline-review { min-width: 0; }
.result-editor-host.is-compact-review > .result-photo { height: clamp(280px, 72vw, 430px); }
.result-editor-host.is-compact-review > .viewer-toolbar,
.result-editor-host.is-compact-review > .review-controls,
.result-editor-host.is-compact-review > .legacy-edit-notice,
.result-editor-host.is-compact-review > .count-panel,
.result-editor-host.is-compact-review > .fullscreen-field-button,
.queue-inline-review > .result-actions { display: none; width: 100%; }
.queue-editor-screen.is-reviewing .queue-preview-stage { display: none; }
.queue-editor-screen.is-reviewing .queue-footnote { display: none; }
#queueReviewFullscreenButton { display: none; }
.result-editor-host.is-compact-review > .result-photo #queueReviewFullscreenButton { position: absolute; z-index: 12; inset: 0; width: 100%; height: 100%; padding: 0; display: grid; align-items: end; justify-items: center; border: 0; border-radius: inherit; background: transparent; color: #fff; cursor: zoom-in; }
.result-editor-host.is-compact-review > .result-photo .queue-review-fullscreen-hit span { min-height: 38px; margin-bottom: 13px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(4,8,14,.78); font-size: 14px; font-weight: 800; box-shadow: 0 8px 26px rgba(0,0,0,.32); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.result-editor-host.is-compact-review > .result-photo .queue-review-fullscreen-hit svg { width: 17px; height: 17px; }
.result-editor-host.is-compact-review > .result-photo .result-fullscreen-button { display: none; }
.screen[data-screen="result"].is-compact-review > .topbar .done-link { visibility: hidden; pointer-events: none; }
.single-review-status-strip,
.single-review-field-card { width: 100%; }
.single-review-field-card.is-readonly > svg { display: none; }
.screen[data-screen="result"].is-compact-review > .result-actions { margin-top: 14px; }
.fullscreen-field-button { display: none; }
.queue-frame span { position: absolute; right: 5px; bottom: 5px; max-width: 72px; overflow: hidden; padding: 3px 6px; border-radius: 999px; background: rgba(0,0,0,.76); color: #fff; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.queue-frame b + span { padding-left: 7px; }
.result-count-watermark { position: absolute; z-index: 4; right: 14px; bottom: 14px; min-width: 66px; min-height: 48px; padding: 5px 11px; display: flex; align-items: baseline; justify-content: center; gap: 3px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(4,7,12,.72); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.34); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); pointer-events: none; }
.result-count-watermark strong { font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.result-count-watermark span { font-size: 13px; font-weight: 800; }
.result-fullscreen-save { display: none; }
#toggleMasksButton.is-active { border-color: rgba(76,162,255,.65); background: rgba(22,131,255,.2); color: #70b8ff; }

@media (min-width: 351px) and (max-width: 520px) {
  .viewer-toolbar { gap: 6px; }
  .viewer-gesture-hint { flex: 1 1 auto; min-width: 0; font-size: 12px; white-space: nowrap; }
  .viewer-toolbar > div { flex: 0 0 auto; gap: 4px; }
  .viewer-toolbar button { width: 40px; }
  .viewer-toolbar button:first-child { width: 48px; }
  .viewer-toolbar button b { font-size: 12px; }
}

@media (min-width: 900px) and (orientation: landscape) {
  .queue-editor-screen.is-reviewing .queue-editor-workspace { grid-template-columns: minmax(520px, 1.45fr) minmax(380px, .75fr); }
  .result-editor-host.is-compact-review > .result-photo { height: clamp(420px, calc(100dvh - 360px), 650px); }
  .screen[data-screen="result"].is-compact-review { grid-template-columns: minmax(520px, 1.45fr) minmax(360px, .75fr); grid-template-rows: auto auto auto auto 1fr; }
  .screen[data-screen="result"].is-compact-review > .topbar { grid-column: 1 / -1; grid-row: 1; }
  .screen[data-screen="result"].is-compact-review > .result-photo { grid-column: 1; grid-row: 2; width: 100%; }
  .screen[data-screen="result"].is-compact-review > .single-review-status-strip { grid-column: 1; grid-row: 3; }
  .screen[data-screen="result"].is-compact-review > .single-review-field-card { grid-column: 1; grid-row: 4; }
  .screen[data-screen="result"].is-compact-review > .result-actions { grid-column: 2; grid-row: 2; width: 100%; margin-top: 0; align-self: start; }
}

/* The editor itself occupies the full visual viewport. Android uses the
   native Fullscreen API; iPhone uses the same fixed-cover layout as a safe
   fallback when arbitrary element fullscreen is unavailable. */
body.result-editor-open { overflow: hidden; overscroll-behavior: none; }
.result-editor-host:fullscreen,
.result-editor-host:-webkit-full-screen,
.result-editor-host.is-editor-fullscreen {
  --fullscreen-safe-top: env(safe-area-inset-top, 0px);
  --fullscreen-safe-right: env(safe-area-inset-right, 0px);
  --fullscreen-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fullscreen-safe-left: env(safe-area-inset-left, 0px);
  position: fixed !important;
  z-index: 260 !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: var(--app-viewport-height) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  overscroll-behavior: none;
}
.result-editor-host:fullscreen > :not(.result-photo):not(.viewer-toolbar):not(.review-controls):not(.fullscreen-field-button),
.result-editor-host:-webkit-full-screen > :not(.result-photo):not(.viewer-toolbar):not(.review-controls):not(.fullscreen-field-button),
.result-editor-host.is-editor-fullscreen > :not(.result-photo):not(.viewer-toolbar):not(.review-controls):not(.fullscreen-field-button) { display: none !important; }
.result-editor-host:fullscreen > .result-photo,
.result-editor-host:-webkit-full-screen > .result-photo,
.result-editor-host.is-editor-fullscreen > .result-photo {
  position: absolute !important;
  z-index: 1;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000;
}
.result-editor-host:fullscreen > .result-photo::after,
.result-editor-host:-webkit-full-screen > .result-photo::after,
.result-editor-host.is-editor-fullscreen > .result-photo::after { box-shadow: inset 0 92px 80px -55px rgba(0,0,0,.8), inset 0 -260px 150px -95px rgba(0,0,0,.82); }
.result-editor-host:fullscreen .demo-badge,
.result-editor-host:-webkit-full-screen .demo-badge,
.result-editor-host.is-editor-fullscreen .demo-badge { display: none; }
.result-editor-host:fullscreen .queue-review-fullscreen-hit,
.result-editor-host:-webkit-full-screen .queue-review-fullscreen-hit,
.result-editor-host.is-editor-fullscreen .queue-review-fullscreen-hit { display: none !important; }
.result-editor-host:fullscreen .result-fullscreen-button,
.result-editor-host:-webkit-full-screen .result-fullscreen-button,
.result-editor-host.is-editor-fullscreen .result-fullscreen-button {
  position: fixed;
  z-index: 30;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  display: grid;
  background: rgba(8,10,14,.82);
}
.result-editor-host:fullscreen .result-fullscreen-save,
.result-editor-host:-webkit-full-screen .result-fullscreen-save,
.result-editor-host.is-editor-fullscreen .result-fullscreen-save {
  position: fixed;
  z-index: 30;
  top: calc(12px + env(safe-area-inset-top));
  left: 14px;
  min-width: 72px;
  min-height: 42px;
  padding: 0 15px;
  display: block;
  border: 1px solid rgba(104,181,255,.45);
  border-radius: 999px;
  background: rgba(22,131,255,.9);
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  box-shadow: 0 8px 28px rgba(0,0,0,.34);
}
.result-editor-host:fullscreen > .fullscreen-field-button,
.result-editor-host:-webkit-full-screen > .fullscreen-field-button,
.result-editor-host.is-editor-fullscreen > .fullscreen-field-button {
  position: fixed;
  z-index: 30;
  top: calc(64px + env(safe-area-inset-top));
  left: 14px;
  max-width: min(54vw, 260px);
  min-height: 42px;
  padding: 0 13px;
  display: flex !important;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(8,10,14,.82);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.result-editor-host:fullscreen > .fullscreen-field-button svg,
.result-editor-host:-webkit-full-screen > .fullscreen-field-button svg,
.result-editor-host.is-editor-fullscreen > .fullscreen-field-button svg { width: 20px; height: 20px; flex: 0 0 auto; color: #67b2ff; }
.result-editor-host:fullscreen > .fullscreen-field-button span,
.result-editor-host:-webkit-full-screen > .fullscreen-field-button span,
.result-editor-host.is-editor-fullscreen > .fullscreen-field-button span { overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.result-editor-host:fullscreen > .fullscreen-field-button:disabled,
.result-editor-host:-webkit-full-screen > .fullscreen-field-button:disabled,
.result-editor-host.is-editor-fullscreen > .fullscreen-field-button:disabled { opacity: .55; }
.result-editor-host:fullscreen .result-count-watermark,
.result-editor-host:-webkit-full-screen .result-count-watermark,
.result-editor-host.is-editor-fullscreen .result-count-watermark {
  position: fixed;
  z-index: 28;
  top: calc(10px + env(safe-area-inset-top));
  right: 50%;
  bottom: auto;
  transform: translateX(50%);
  min-width: 94px;
  min-height: 52px;
  border-radius: 16px;
  background: rgba(3,7,12,.7);
}
.result-editor-host:fullscreen .result-count-watermark strong,
.result-editor-host:-webkit-full-screen .result-count-watermark strong,
.result-editor-host.is-editor-fullscreen .result-count-watermark strong { font-size: 38px; }
.result-editor-host:fullscreen > .viewer-toolbar,
.result-editor-host:-webkit-full-screen > .viewer-toolbar,
.result-editor-host.is-editor-fullscreen > .viewer-toolbar {
  position: fixed !important;
  z-index: 24;
  right: auto;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 10px;
  width: min(calc(100vw - var(--fullscreen-safe-left) - var(--fullscreen-safe-right) - 20px), 340px) !important;
  min-height: 58px;
  margin: 0 !important;
  padding: 44px 6px 6px;
  display: block;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(15,16,20,.86);
  box-shadow: 0 12px 38px rgba(0,0,0,.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.result-editor-host:fullscreen .viewer-gesture-hint,
.result-editor-host:-webkit-full-screen .viewer-gesture-hint,
.result-editor-host.is-editor-fullscreen .viewer-gesture-hint { display: none; }
.result-editor-host:fullscreen .viewer-toolbar > div,
.result-editor-host:-webkit-full-screen .viewer-toolbar > div,
.result-editor-host.is-editor-fullscreen .viewer-toolbar > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.result-editor-host:fullscreen .viewer-toolbar button,
.result-editor-host:-webkit-full-screen .viewer-toolbar button,
.result-editor-host.is-editor-fullscreen .viewer-toolbar button { width: 100% !important; height: 46px; border-color: rgba(255,255,255,.1); background: rgba(44,45,50,.88); color: #fff; }
.result-editor-host:fullscreen > .review-controls,
.result-editor-host:-webkit-full-screen > .review-controls,
.result-editor-host.is-editor-fullscreen > .review-controls {
  position: fixed !important;
  z-index: 23;
  right: auto;
  bottom: calc(98px + env(safe-area-inset-bottom));
  left: 10px;
  width: min(calc(100vw - var(--fullscreen-safe-left) - var(--fullscreen-safe-right) - 20px), 340px) !important;
  margin: 0 !important;
  padding: 45px 8px 8px;
  display: block !important;
  border-color: rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(15,16,20,.84) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.52);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.result-editor-host:fullscreen .review-breakdown,
.result-editor-host:-webkit-full-screen .review-breakdown,
.result-editor-host.is-editor-fullscreen .review-breakdown { gap: 4px; }
.result-editor-host:fullscreen .review-breakdown > div,
.result-editor-host:-webkit-full-screen .review-breakdown > div,
.result-editor-host.is-editor-fullscreen .review-breakdown > div { min-height: 43px; padding: 4px 2px; }
.result-editor-host:fullscreen .review-breakdown strong,
.result-editor-host:-webkit-full-screen .review-breakdown strong,
.result-editor-host.is-editor-fullscreen .review-breakdown strong { font-size: 18px; }
.result-editor-host:fullscreen .review-breakdown span,
.result-editor-host:-webkit-full-screen .review-breakdown span,
.result-editor-host.is-editor-fullscreen .review-breakdown span { margin-top: 1px; font-size: 11px; }
.result-editor-host:fullscreen .review-tool-segment,
.result-editor-host:-webkit-full-screen .review-tool-segment,
.result-editor-host.is-editor-fullscreen .review-tool-segment { margin-top: 5px; background: rgba(0,0,0,.42); }
.result-editor-host:fullscreen .review-tool,
.result-editor-host:-webkit-full-screen .review-tool,
.result-editor-host.is-editor-fullscreen .review-tool { min-height: 42px; }
.result-editor-host:fullscreen .review-hint,
.result-editor-host:-webkit-full-screen .review-hint,
.result-editor-host.is-editor-fullscreen .review-hint { display: none; }

.result-editor-host:fullscreen [data-fullscreen-panel],
.result-editor-host:-webkit-full-screen [data-fullscreen-panel],
.result-editor-host.is-editor-fullscreen [data-fullscreen-panel] {
  max-width: calc(100vw - var(--fullscreen-safe-left) - var(--fullscreen-safe-right) - 16px) !important;
  max-height: calc(var(--app-viewport-height) - var(--fullscreen-safe-top) - var(--fullscreen-safe-bottom) - 16px) !important;
  transition: box-shadow .16s ease, border-color .16s ease;
  will-change: left, top;
}
.result-editor-host:fullscreen [data-fullscreen-panel].is-fullscreen-panel-front,
.result-editor-host:-webkit-full-screen [data-fullscreen-panel].is-fullscreen-panel-front,
.result-editor-host.is-editor-fullscreen [data-fullscreen-panel].is-fullscreen-panel-front { z-index: 27; }
.result-editor-host:fullscreen [data-fullscreen-panel].is-fullscreen-panel-dragging,
.result-editor-host:-webkit-full-screen [data-fullscreen-panel].is-fullscreen-panel-dragging,
.result-editor-host.is-editor-fullscreen [data-fullscreen-panel].is-fullscreen-panel-dragging {
  z-index: 29;
  border-color: rgba(87,171,255,.68);
  box-shadow: 0 18px 52px rgba(0,0,0,.68), 0 0 0 2px rgba(22,131,255,.2);
}
.result-editor-host:fullscreen .fullscreen-panel-grip,
.result-editor-host:-webkit-full-screen .fullscreen-panel-grip,
.result-editor-host.is-editor-fullscreen .fullscreen-panel-grip {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96px !important;
  height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: #fff;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.result-editor-host:fullscreen .fullscreen-panel-grip:active,
.result-editor-host:-webkit-full-screen .fullscreen-panel-grip:active,
.result-editor-host.is-editor-fullscreen .fullscreen-panel-grip:active { cursor: grabbing; }
.result-editor-host:fullscreen .fullscreen-panel-grip:focus-visible,
.result-editor-host:-webkit-full-screen .fullscreen-panel-grip:focus-visible,
.result-editor-host.is-editor-fullscreen .fullscreen-panel-grip:focus-visible { outline: 2px solid #6eb7ff; outline-offset: 1px; }
.result-editor-host:fullscreen .fullscreen-panel-grip span,
.result-editor-host:-webkit-full-screen .fullscreen-panel-grip span,
.result-editor-host.is-editor-fullscreen .fullscreen-panel-grip span {
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: rgba(255,255,255,.68);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.result-editor-host:fullscreen .fullscreen-layout-reset,
.result-editor-host:-webkit-full-screen .fullscreen-layout-reset,
.result-editor-host.is-editor-fullscreen .fullscreen-layout-reset { display: grid; }

@media (min-width: 740px) and (orientation: landscape) {
  .result-editor-host:fullscreen > .viewer-toolbar,
  .result-editor-host:-webkit-full-screen > .viewer-toolbar,
  .result-editor-host.is-editor-fullscreen > .viewer-toolbar { right: auto; left: 12px; width: clamp(320px, 48vw, 520px) !important; }
  .result-editor-host:fullscreen > .review-controls,
  .result-editor-host:-webkit-full-screen > .review-controls,
  .result-editor-host.is-editor-fullscreen > .review-controls { top: calc(76px + env(safe-area-inset-top)); right: 12px; bottom: auto; left: auto; width: clamp(238px, 29vw, 290px) !important; }
}