:root {
  --bg: #fff8ee;
  --paper: #fffdf9;
  --ink: #453f48;
  --muted: #867c83;
  --quiet: #b8aeb0;
  --line: #eadfd6;
  --line-strong: #dccdc1;
  --pink: #f3a9b9;
  --pink-deep: #dd718d;
  --butter: #f7d979;
  --mint: #bfe4d2;
  --blue: #b9dff1;
  --coral: #ef927b;
  --shadow: 0 18px 50px rgba(121, 87, 74, 0.1);
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font: 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: 0.6; }
svg { width: 16px; height: 16px; stroke-width: 2; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); letter-spacing: 0.04em; }
.app-shell { min-height: 100vh; background: radial-gradient(circle at 84% 0%, rgba(247, 217, 121, 0.18), transparent 25%), var(--bg); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 30px; min-height: 72px; padding: 0 5vw; border-bottom: 1px solid rgba(220, 205, 193, 0.7); background: rgba(255, 248, 238, 0.9); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: white; border-radius: 13px 13px 13px 5px; background: var(--pink-deep); box-shadow: 5px 5px 0 rgba(221, 113, 141, 0.16); }
.brand strong { display: block; font-size: 17px; font-weight: 900; letter-spacing: 0.02em; }
.brand small { display: block; color: var(--muted); font-size: 10px; }
.main-nav { display: flex; align-items: center; gap: 22px; margin-left: 14px; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 0; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 800; }
.nav-link svg { width: 14px; height: 14px; }
.nav-link.active, .nav-link:hover { color: var(--pink-deep); }
.nav-link.active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 10px; background: var(--pink); content: ""; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.settings-button { flex: 0 0 auto; background: rgba(255, 253, 249, 0.76); }
.soft-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 253, 249, 0.7); font-size: 10px; }
.soft-chip svg { width: 13px; height: 13px; color: var(--butter); }
.status-dot, .state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--quiet); }
.soft-chip.connected .status-dot, .state-item.connected .state-dot { background: #76bf9a; box-shadow: 0 0 0 4px rgba(118, 191, 154, 0.14); }
.soft-chip.active .status-dot, .state-item.active .state-dot { background: var(--coral); }
.page { width: min(1440px, calc(100% - 72px)); margin: 0 auto; padding: 42px 0 76px; }
.welcome-row { display: grid; grid-template-columns: minmax(320px, 0.92fr) minmax(380px, 1.15fr) minmax(220px, 0.48fr); gap: 24px; align-items: stretch; margin-bottom: 28px; }
.welcome-copy { padding: 24px 0 12px; }
.eyebrow, .section-kicker, .story-tag { color: var(--pink-deep); font: 10px/1 var(--mono); letter-spacing: 0.1em; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.eyebrow-line { width: 28px; height: 1px; background: var(--line-strong); }
h1, h2, h3, p { margin: 0; }
h1 { max-width: 540px; color: var(--ink); font-size: clamp(36px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -0.05em; }
h1 em { color: var(--pink-deep); font-style: normal; }
.welcome-copy > p { max-width: 505px; margin-top: 18px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 15px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 13px; background: var(--paper); font-weight: 800; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.button:hover { transform: translateY(-1px); border-color: var(--pink); }
.button.primary { color: white; border-color: var(--pink-deep); background: var(--pink-deep); box-shadow: 0 7px 0 rgba(221, 113, 141, 0.14); }
.button.primary:hover { color: white; background: #d26481; }
.button.soft { color: var(--ink); border-color: var(--line); background: #fff3e5; }
.button.danger { color: white; border-color: #d85f76; background: #d85f76; }
.button.danger:hover { color: white; border-color: #c94f68; background: #c94f68; }
.button.compact { min-height: 34px; padding: 0 11px; font-size: 12px; }
.button svg { width: 15px; height: 15px; }
.welcome-art { position: relative; min-height: 310px; overflow: hidden; border: 1px solid #ebd9c7; border-radius: 28px; background: #f5e6d2; box-shadow: var(--shadow); }
.welcome-art::after { position: absolute; inset: auto -10% -20% 10%; height: 52%; border-radius: 50% 50% 0 0; background: #d6b994; content: ""; }
.sun-disc { position: absolute; top: 24px; right: 52px; width: 54px; height: 54px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 12px rgba(247, 217, 121, 0.15); }
.cloud { position: absolute; z-index: 1; width: 88px; height: 24px; border-radius: 30px; background: rgba(255, 253, 249, 0.82); }
.cloud::before, .cloud::after { position: absolute; bottom: 6px; border-radius: 50%; background: inherit; content: ""; }
.cloud::before { left: 17px; width: 32px; height: 32px; }
.cloud::after { left: 43px; width: 24px; height: 24px; }
.cloud-one { top: 44px; left: 48px; }
.cloud-two { top: 88px; right: 23px; transform: scale(0.72); opacity: 0.7; }
.nursery-window { position: absolute; top: 38px; left: 50%; width: 128px; height: 108px; border: 10px solid #fdf4e9; border-bottom-width: 14px; border-radius: 9px; background: linear-gradient(140deg, #b9dff1 0 49%, #98cdb5 50% 100%); transform: translateX(-50%); box-shadow: 0 7px 0 rgba(123, 101, 83, 0.07); }
.nursery-window::after { position: absolute; top: -10px; left: 50%; width: 2px; height: 108px; background: #fdf4e9; content: ""; }
.nursery-shelf { position: absolute; top: 153px; left: 50%; z-index: 2; display: flex; gap: 11px; width: 178px; height: 8px; padding: 0 13px; border-radius: 6px; background: #a97c62; transform: translateX(-50%); }
.nursery-shelf span { width: 17px; height: 23px; margin-top: -19px; border-radius: 8px 8px 3px 3px; background: var(--pink); }
.nursery-shelf span:nth-child(2) { background: var(--mint); }
.nursery-shelf span:nth-child(3) { background: var(--blue); }
.crib { position: absolute; bottom: 48px; left: 50%; z-index: 3; width: 250px; height: 118px; transform: translateX(-50%); }
.crib::before { position: absolute; right: 10px; bottom: -12px; left: 10px; height: 12px; border-radius: 50%; background: rgba(100, 72, 50, 0.15); content: ""; }
.crib-mobile { position: absolute; top: -40px; left: 50%; display: flex; justify-content: space-between; width: 106px; color: #d896ac; transform: translateX(-50%); }
.crib-mobile svg:nth-child(2) { color: var(--butter); }
.crib-mobile svg:nth-child(3) { color: var(--blue); }
.crib-mattress { position: absolute; inset: 22px 0 0; border: 6px solid #b77e66; border-radius: 18px 18px 10px 10px; background: #fff8ef; }
.crib-rail { position: absolute; right: 12px; bottom: 8px; left: 12px; height: 54px; border: 3px solid rgba(183, 126, 102, 0.72); border-top: 0; border-radius: 0 0 12px 12px; background: repeating-linear-gradient(90deg, transparent 0 21px, rgba(183, 126, 102, 0.72) 21px 25px); }
.crib-baby { position: absolute; bottom: 23px; left: 50%; z-index: 2; width: 90px; height: 52px; border-radius: 50% 50% 30% 30%; background: #f0a9b8; transform: translateX(-50%); }
.baby-face { position: absolute; top: -10px; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; color: #ad696c; border-radius: 50%; background: #ffd9bb; transform: translateX(-50%); font-size: 20px; font-weight: 900; }
.baby-blanket { position: absolute; right: 7px; bottom: 6px; left: 7px; height: 28px; border-radius: 50%; background: #b9dff1; }
.camera-badge { position: absolute; right: 22px; bottom: 20px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 7px 10px; color: #fff; border: 2px solid #fff; border-radius: 18px; background: #76bf9a; box-shadow: 0 4px 0 rgba(70, 126, 97, 0.16); font-size: 11px; font-weight: 800; }
.camera-badge svg { width: 13px; height: 13px; }
.art-note { position: absolute; z-index: 6; padding: 5px 9px; color: #8d626d; border: 1px solid rgba(221, 113, 141, 0.24); border-radius: 10px; background: rgba(255, 253, 249, 0.82); font-size: 11px; font-weight: 800; transform: rotate(-6deg); }
.note-one { top: 18px; left: 18px; }
.note-two { right: 17px; bottom: 70px; color: #698a7e; transform: rotate(5deg); }
.today-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 310px; padding: 18px; border: 1px solid #efded1; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.today-card-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 800; }
.today-card-head svg { color: var(--pink-deep); fill: rgba(243, 169, 185, 0.25); }
.today-profile { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.profile-face { display: grid; place-items: center; width: 44px; height: 44px; color: #a96f73; border: 2px solid #fff; border-radius: 50%; background: #ffd9bb; box-shadow: 0 0 0 3px #f8d8c7; font-size: 24px; }
.today-profile strong, .today-profile span { display: block; }
.today-profile strong { font-size: 18px; }
.today-profile span { color: var(--muted); font-size: 11px; }
.today-stat { padding: 20px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.today-stat strong { display: block; color: var(--pink-deep); font-size: 45px; line-height: 1; }
.today-stat span { color: var(--muted); font-size: 12px; font-weight: 800; }
.today-status { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 11px; }
.today-status b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.status-pill, .feature-tag, .record-indicator { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 8px; color: #668d7d; border: 1px solid #c6e2d2; border-radius: 20px; background: #f0fbf3; font: 10px var(--mono); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.62fr); gap: 18px; align-items: start; }
.app-view-hidden { display: none !important; }
body:not([data-app-route="live"]) .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
body:not([data-app-route="live"]) .dashboard-grid > .surface,
body:not([data-app-route="live"]) .main-column > .surface {
  grid-column: 1 / -1;
  grid-row: auto;
}
.mobile-nav { display: none; }
.main-column { display: contents; }
.side-column { display: grid; grid-column: 2; grid-row: 1; gap: 18px; min-width: 0; }
.live-card { grid-column: 1; grid-row: 1; }
.record-panel-wide { grid-column: 1 / -1; grid-row: 2; }
.history-panel { grid-column: 1 / -1; grid-row: 3; padding: 20px; }
.story-card { grid-column: 1 / -1; grid-row: 4; }
.analysis-card { grid-column: 1 / -1; grid-row: 5; }
.video-card { grid-column: 1 / -1; grid-row: 6; }
.surface { min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 253, 249, 0.82); box-shadow: var(--shadow); }
.live-card, .story-card, .video-card, .analysis-card, .record-panel, .conversation-panel { padding: 20px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.compact-head { margin-bottom: 12px; }
.section-head h2 { margin-top: 7px; font-size: 21px; letter-spacing: -0.03em; }
.section-tools, .comic-controls, .camera-actions { display: flex; align-items: center; gap: 8px; }
.live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; color: #648c7c; border: 1px solid #c8e2d3; border-radius: 20px; background: #f0fbf3; font: 10px var(--mono); letter-spacing: 0.08em; }
.live-badge span { width: 6px; height: 6px; border-radius: 50%; background: #76bf9a; }
.live-badge.offline { color: var(--quiet); border-color: var(--line); background: #fbf6f0; }
.live-badge.offline span { background: var(--quiet); }
.icon-button, .send-button, .voice-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--muted); border: 1px solid var(--line); border-radius: 11px; background: #fff9f2; }
.icon-button:hover, .voice-button:hover { color: var(--pink-deep); border-color: var(--pink); }
.live-frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #d8c8bc; border-radius: 14px; background: #f2e8dd; }
#liveImage { display: none; width: 100%; height: 100%; object-fit: cover; }
#liveImage.fit-contain { object-fit: contain; }
.camera-placeholder { display: grid; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.camera-placeholder strong { color: var(--ink); font-size: 14px; }
.camera-placeholder span:last-child { color: var(--quiet); font-size: 11px; }
.placeholder-room { position: relative; width: 270px; height: 132px; margin-bottom: 2px; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, #cce5ed 0 62%, #e8c89c 63% 100%); }
.placeholder-moon { position: absolute; top: 18px; left: 30px; width: 32px; height: 32px; border-radius: 50%; background: #fff1b5; }
.placeholder-cloud { position: absolute; top: 26px; right: 27px; width: 62px; height: 16px; border-radius: 20px; background: rgba(255, 253, 249, 0.75); }
.placeholder-cloud::before { position: absolute; bottom: 4px; left: 9px; width: 22px; height: 22px; border-radius: 50%; background: inherit; content: ""; }
.placeholder-crib { position: absolute; bottom: 18px; left: 50%; width: 150px; height: 56px; border: 5px solid #b8856f; border-radius: 12px; background: #fff9f1; transform: translateX(-50%); }
.placeholder-crib::after { position: absolute; right: 8px; bottom: 0; left: 8px; height: 28px; background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(184, 133, 111, 0.7) 15px 18px); content: ""; }
.placeholder-crib span { position: absolute; bottom: 14px; left: 50%; z-index: 1; width: 44px; height: 24px; border-radius: 50% 50% 30% 30%; background: #f0a9b8; transform: translateX(-50%); }
.placeholder-camera { position: absolute; right: 18px; bottom: 20px; display: grid; place-items: center; width: 28px; height: 22px; color: white; border-radius: 6px; background: #7ab69a; }
.placeholder-camera svg { width: 13px; height: 13px; }
.frame-stamp { position: absolute; right: 12px; bottom: 10px; padding: 5px 8px; color: #708b80; border: 1px solid rgba(111, 163, 136, 0.27); border-radius: 8px; background: rgba(255, 253, 249, 0.84); font: 10px var(--mono); }
.frame-corner { position: absolute; width: 16px; height: 16px; border-color: var(--pink); border-style: solid; opacity: 0.7; }
.frame-corner-tl { top: 12px; left: 12px; border-width: 2px 0 0 2px; }
.frame-corner-tr { top: 12px; right: 12px; border-width: 2px 2px 0 0; }
.frame-corner-bl { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; }
.frame-corner-br { right: 12px; bottom: 12px; border-width: 0 2px 2px 0; }
.camera-footer { display: flex; justify-content: space-between; gap: 16px; align-items: end; padding-top: 14px; }
.camera-meta { display: flex; flex-direction: column; gap: 6px; color: var(--quiet); font: 10px var(--mono); }
.camera-meta span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.camera-meta svg { width: 13px; height: 13px; color: #76bf9a; }
select { height: 34px; padding: 0 26px 0 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; outline: none; background: #fff9f2; color-scheme: light; font-size: 12px; font-weight: 700; }
select:focus { border-color: var(--pink); }
select option { color: var(--ink); background: #fff9f2; }
.comic-empty { display: flex; align-items: center; gap: 14px; min-height: 116px; padding: 22px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); background: rgba(255, 248, 238, 0.56); }
.comic-empty strong { display: block; margin-bottom: 5px; color: var(--ink); }
.comic-empty p { color: var(--muted); font-size: 12px; }
.empty-art { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; color: var(--pink-deep); border: 1px solid #efb4c2; border-radius: 15px; background: #fff0f3; }
.story-overview { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 14px; }
.story-tag { color: var(--pink-deep); }
.story-overview h3 { margin-top: 7px; font-size: 21px; }
.story-overview p { max-width: 650px; margin-top: 5px; color: var(--muted); font-size: 12px; }
.story-count { color: var(--quiet); font: 11px var(--mono); white-space: nowrap; }
.comic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; align-items: start; padding: 8px; border: 2px solid #28251f; background: #f1ece2; }
.comic-page-preview { margin-bottom: 12px; padding: 4px; border: 2px solid #28251f; background: #fffdfa; box-shadow: 3px 3px 0 rgba(40, 37, 31, 0.12); }
.comic-page-preview img { display: block; width: 100%; height: auto; background: #fffdfa; }
.comic-loading { grid-column: 1 / -1; padding: 28px; color: var(--pink-deep); border: 1px dashed #efb4c2; border-radius: 12px; text-align: center; font-size: 12px; }
.comic-panel { position: relative; width: 100%; min-width: 0; margin: 0; overflow: hidden; border: 3px solid #28251f; border-radius: 2px; background: #fffdf7; box-shadow: 2px 2px 0 rgba(40, 37, 31, 0.12); }
.comic-panel.is-rejected { border-color: #d98b76; background: #fff8f1; }
.comic-panel-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #eee6dc; }
.comic-panel img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.comic-panel.is-rejected img { filter: saturate(0.7); opacity: 0.72; }
.comic-panel-status { position: absolute; top: 8px; right: 8px; padding: 5px 7px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 4px; background: rgba(54, 111, 82, 0.9); font-size: 10px; font-weight: 800; }
.comic-panel.is-rejected .comic-panel-status { background: rgba(178, 91, 66, 0.92); }
.comic-panel figcaption { padding: 8px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.comic-panel figcaption strong { display: block; margin-bottom: 2px; color: var(--pink-deep); font: 10px var(--mono); }
.comic-panel figcaption small { display: block; margin-top: 5px; color: #a16c54; font-size: 10px; }
.comic-panel .comic-missing { display: grid; place-items: center; aspect-ratio: 1 / 1; color: var(--quiet); font-size: 11px; text-align: center; }
.story-warnings { margin-top: 12px; padding: 9px 11px; color: #a16c54; border-left: 2px solid var(--coral); border-radius: 5px; background: #fff3e4; font-size: 12px; }
.story-warnings strong { display: block; margin-bottom: 6px; color: #88533f; }
.story-warnings ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; }
.story-warnings li { line-height: 1.5; }
.feature-tag { color: #7c8eab; border-color: #cfe0ed; background: #f2f9fc; font-family: var(--sans); font-weight: 800; }
.feature-tag svg { width: 13px; height: 13px; }
.video-layout { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.8fr); gap: 18px; align-items: center; }
.video-preview { padding: 11px; border: 1px solid #e2d4c9; border-radius: 16px; background: #f5eee6; }
.video-screen { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8.8; overflow: hidden; border-radius: 11px; background: linear-gradient(155deg, #c4e4ec 0 43%, #f7dfb4 44% 100%); }
.video-screen::before { position: absolute; bottom: -20px; left: 10%; width: 65%; height: 75%; border-radius: 50% 50% 0 0; background: #fff4e4; content: ""; }
.video-screen::after { position: absolute; right: 12%; bottom: 10%; width: 30%; height: 33%; border-radius: 50% 50% 40% 40%; background: #efadb8; content: ""; }
.video-screen.has-video::before, .video-screen.has-video::after { display: none; }
.video-screen video { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; background: #171717; object-fit: contain; }
.video-screen-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; color: #8c7073; }
.video-screen-copy i { display: grid; place-items: center; width: 34px; height: 34px; color: white; border-radius: 50%; background: rgba(221, 113, 141, 0.92); }
.video-screen-copy strong { font-size: 12px; }
.video-screen-copy span { font-size: 10px; }
.video-sparkle { position: absolute; z-index: 2; color: #fff; font-size: 21px; }
.sparkle-a { top: 19%; left: 21%; }
.sparkle-b { right: 17%; top: 23%; color: var(--butter); }
.video-controls { display: flex; align-items: center; gap: 7px; padding-top: 9px; }
.video-time { color: var(--quiet); font: 9px var(--mono); }
.video-track { position: relative; height: 5px; flex: 1; overflow: hidden; border-radius: 10px; background: #dfd1c5; }
.video-track span { display: block; width: 0; height: 100%; border-radius: 10px; background: var(--pink-deep); transition: width 300ms ease; }
.video-copy strong { display: block; font-size: 17px; }
.video-copy p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.video-mode-field { display: grid; gap: 8px; width: min(100%, 360px); margin-top: 18px; }
.video-mode-label { color: var(--muted); font-size: 10px; font-weight: 800; }
.video-mode-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #f5eee5; }
.video-mode-option { position: relative; min-width: 0; cursor: pointer; }
.video-mode-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.video-mode-option span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.video-mode-option svg { width: 15px; height: 15px; stroke-width: 2; }
.video-mode-option:hover span { color: var(--ink); }
.video-mode-option input:checked + span { color: var(--ink); border-color: #ead9ca; background: #fffdf9; box-shadow: 0 1px 3px rgba(76, 56, 43, 0.1); }
.video-mode-option input:focus-visible + span { outline: 2px solid var(--pink-deep); outline-offset: 2px; }
.video-copy .button { margin-top: 10px; }
#videoButton { width: min(100%, 360px); justify-content: center; }
.video-copy small { display: block; margin-top: 8px; color: var(--quiet); font-size: 10px; }
.comic-page-result { width: 100%; overflow: hidden; border: 2px solid #28251f; border-radius: 4px; background: #fffdfa; box-shadow: 3px 3px 0 rgba(40, 37, 31, 0.12); }
.comic-page-result img { display: block; width: 100%; height: auto; background: #fffdfa; }
.analysis-summary { min-height: 37px; padding: 11px 12px; color: var(--muted); border-left: 3px solid var(--mint); border-radius: 5px; background: #f1faf3; font-size: 12px; }
.timeline-overview { display: grid; grid-template-columns: repeat(4, minmax(100px, .65fr)) minmax(180px, 1.4fr); margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf5; }
.timeline-overview > div { min-width: 0; padding: 11px 13px; border-right: 1px solid var(--line); }
.timeline-overview > div:last-child { border-right: 0; }
.timeline-overview span, .timeline-overview strong { display: block; }
.timeline-overview span { color: var(--quiet); font-size: 9px; font-weight: 900; }
.timeline-overview strong { margin-top: 3px; color: var(--ink); font: 700 15px var(--mono); }
.timeline-overview .coverage i { display: block; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 4px; background: #e8ded5; }
.timeline-overview .coverage b { display: block; height: 100%; background: #76b995; }
.timeline { display: grid; margin-top: 18px; }
.trusted-timeline { position: relative; gap: 0; }
.trusted-timeline::before { position: absolute; top: 18px; bottom: 18px; left: 92px; width: 1px; background: var(--line-strong); content: ""; }
.timeline-event { position: relative; display: grid; grid-template-columns: 70px 44px minmax(0, 1fr); gap: 0; padding-bottom: 18px; }
.timeline-event:last-child { padding-bottom: 0; }
.timeline-event-time { padding: 11px 10px 0 0; text-align: right; }
.timeline-event-time time, .timeline-event-time span { display: block; font: 10px var(--mono); }
.timeline-event-time time { color: var(--pink-deep); font-weight: 700; }
.timeline-event-time span { margin-top: 3px; color: var(--quiet); }
.timeline-event-marker { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: 9px; }
.timeline-event-marker span { display: grid; place-items: center; width: 28px; height: 28px; color: #5f8c77; border: 2px solid #fffdf9; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px #a8cdbb; font: 9px var(--mono); }
.timeline-event-content { min-width: 0; padding: 13px 14px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf9; }
.timeline-event-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.timeline-event-head h3 { margin-top: 4px; font-size: 16px; }
.activity-category { color: #5f907b; font: 9px var(--mono); }
.activity-duration { flex: 0 0 auto; padding: 4px 7px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: #fff8f0; font: 9px var(--mono); }
.timeline-event-content > p { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.timeline-provenance { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.provenance-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: #547b69; border: 1px solid #c6e2d2; border-radius: 7px; background: #f0fbf3; font: 9px var(--mono); }
.provenance-tag.secondary { color: #6d718c; border-color: #d7d9e6; background: #f7f7fb; }
.provenance-tag svg { width: 12px; height: 12px; }
.timeline-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 7px; margin-top: 11px; }
.timeline-evidence-shot { position: relative; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #eee5dd; }
.timeline-evidence-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 160ms ease; }
.timeline-evidence-shot:hover img { transform: scale(1.025); }
.timeline-evidence-shot > span { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 7px 6px; color: white; background: linear-gradient(transparent, rgba(42, 35, 38, .8)); font-size: 8px; }
.timeline-evidence-shot time { font-family: var(--mono); }
.timeline-evidence-shot b { font-weight: 800; }
.timeline-no-evidence { grid-column: 1 / -1; padding: 10px; color: var(--quiet); border: 1px dashed var(--line); border-radius: 7px; font-size: 10px; text-align: center; }
.timeline-empty { padding: 24px; color: var(--quiet); border: 1px dashed var(--line); border-radius: 10px; text-align: center; font-size: 12px; }
.activity-details { margin-top: 16px; border-top: 1px solid var(--line); }
.activity-details summary { display: flex; align-items: center; gap: 7px; width: fit-content; padding-top: 12px; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 800; }
.activity-details summary svg { width: 13px; height: 13px; }
.activity-table-wrap { overflow-x: auto; margin-top: 10px; }
.activity-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.activity-table th, .activity-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; }
.activity-table th { color: var(--quiet); font: 10px var(--mono); letter-spacing: 0.06em; }
.activity-table td:first-child { width: 120px; color: var(--pink-deep); font-family: var(--mono); font-size: 10px; }
.activity-table td:nth-child(3) { color: #6b9b84; }
.activity-table td:last-child { width: 70px; color: var(--muted); font-family: var(--mono); }
.record-indicator { color: #668d7d; border-color: #c6e2d2; background: #f0fbf3; }
.record-indicator.recording { color: #b46669; border-color: #f0bcc1; background: #fff1f3; }
.record-overview { display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(300px, 1fr); gap: 12px 20px; align-items: center; }
.record-readout { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff9f2; }
.record-readout strong { font-size: 14px; }
.record-readout span { color: var(--muted); font-size: 11px; }
.record-progress { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 10px; background: #f0e5dc; }
.record-progress span { display: block; width: 0; height: 100%; border-radius: 10px; background: var(--pink); transition: width 500ms ease; }
.record-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.record-stats div { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border-left: 2px solid var(--mint); background: #f7fbf7; }
.record-stats span { color: var(--quiet); font-size: 10px; }
.record-stats strong { color: var(--ink); font: 13px var(--mono); }
.record-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-content: start; max-height: clamp(440px, 65vh, 760px); margin-top: 16px; padding: 2px 8px 8px 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.list-empty { display: flex; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 14px 0; color: var(--quiet); border: 1px dashed var(--line); border-radius: 8px; font-size: 12px; }
.list-empty svg { color: var(--pink); }
.record-entry { position: relative; display: grid; grid-template-rows: auto minmax(50px, auto); min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fffaf5; content-visibility: auto; contain-intrinsic-size: 250px; }
.record-entry time { position: absolute; top: 9px; left: 9px; z-index: 2; padding: 4px 6px; color: #8f5566; border: 1px solid rgba(239, 180, 194, 0.72); border-radius: 6px; background: rgba(255, 250, 245, 0.92); font: 10px var(--mono); }
.record-entry img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #f3e9e0; }
.record-entry p { display: -webkit-box; min-width: 0; margin: 0; overflow: hidden; padding: 10px 76px 11px 11px; color: var(--muted); font-size: 11px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.record-entry-actions { position: absolute; right: 9px; bottom: 9px; z-index: 2; display: flex; gap: 5px; }
.record-entry-actions .icon-button, .record-edit-actions .icon-button { width: 28px; height: 28px; border-radius: 7px; background: rgba(255, 250, 245, 0.96); }
.record-entry-actions svg, .record-edit-actions svg { width: 13px; height: 13px; }
.record-entry-actions .icon-button:hover, .record-edit-actions .icon-button:hover { color: var(--pink-deep); border-color: var(--pink); background: #fff0f3; transform: translateY(-1px); }
.record-entry-actions .icon-button:disabled, .record-edit-actions .icon-button:disabled { opacity: 0.45; cursor: wait; }
.record-entry.is-editing { content-visibility: visible; }
.record-edit-form { display: grid; gap: 8px; padding: 10px; background: #fffaf5; }
.record-edit-form textarea { width: 100%; min-height: 86px; resize: vertical; padding: 9px 10px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; outline: none; background: #fff; font: 12px/1.55 var(--sans); }
.record-edit-form textarea:focus { border-color: var(--pink-deep); box-shadow: 0 0 0 3px rgba(219, 126, 151, 0.14); }
.record-edit-form textarea:disabled { color: var(--quiet); background: #f7f2ed; cursor: wait; }
.record-edit-actions { display: flex; justify-content: flex-end; gap: 6px; }
.history-tools { display: flex; align-items: center; gap: 9px; }
.history-summary { color: var(--quiet); font: 10px var(--mono); white-space: nowrap; }
.history-days { border-top: 1px solid var(--line); }
.history-day { border-bottom: 1px solid var(--line); }
.history-day:last-child { border-bottom: 0; }
.history-day-summary { display: grid; grid-template-columns: minmax(220px, 0.62fr) minmax(260px, 1fr) auto; gap: 20px; align-items: center; padding: 18px 0; }
.history-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; aspect-ratio: 16 / 5.6; overflow: hidden; border-radius: 8px; background: #f0e5dc; }
.history-cover-shot, .history-gallery-shot { min-width: 0; padding: 0; overflow: hidden; border: 0; background: #f0e5dc; }
.history-cover-shot img, .history-gallery-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease, filter 180ms ease; }
.history-cover-shot:hover img, .history-gallery-shot:hover img { transform: scale(1.025); filter: saturate(1.05); }
.history-collage.cover-count-1 { grid-template-columns: 1fr; }
.history-collage.cover-count-2 { grid-template-columns: repeat(2, 1fr); }
.history-collage.cover-count-3 { grid-template-columns: 1.25fr 0.75fr; grid-template-rows: repeat(2, 1fr); }
.history-collage.cover-count-3 .history-cover-shot:first-child { grid-row: 1 / 3; }
.history-day-copy { min-width: 0; }
.history-date { display: block; margin-bottom: 5px; color: var(--pink-deep); font: 10px var(--mono); }
.history-day-copy strong { display: block; font-size: 18px; }
.history-day-copy p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.history-work-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.history-work-counts span, .history-no-captures { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; background: #fffaf4; font: 10px var(--mono); }
.history-work-counts svg { width: 13px; height: 13px; color: var(--pink-deep); }
.history-no-captures { justify-self: end; }
.history-toggle { min-width: 116px; }
.history-day-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.history-delete-button { flex: 0 0 auto; color: #a96f7c; background: #fff8f6; }
.history-delete-button:hover { color: #c94f68; border-color: #e8a3b1; background: #fff0f2; }
.history-collage-empty { display: grid; grid-column: 1 / -1; place-items: center; color: var(--pink-deep); background: #fff3f1; }
.history-collage-empty svg { width: 32px; height: 32px; }
.history-content-label { display: block; margin-bottom: 9px; color: var(--quiet); font: 10px var(--mono); }
.history-creations { padding: 2px 0 18px; }
.history-creation-grid { display: grid; gap: 12px; }
.history-creation { display: grid; grid-template-columns: minmax(220px, 0.82fr) minmax(240px, 1fr) minmax(220px, 0.8fr); gap: 15px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 250, 245, 0.72); }
.history-comic-preview, .history-video-preview { position: relative; display: grid; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; color: white; border-radius: 7px; background: #2c292c; }
.history-comic-preview img, .history-video-preview video { display: block; width: 100%; height: 100%; object-fit: contain; background: #2c292c; }
.history-comic-preview > span, .history-video-preview > span { position: absolute; right: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; background: rgba(42, 36, 39, 0.78); font: 9px var(--mono); }
.history-comic-preview svg, .history-video-preview svg { width: 13px; height: 13px; }
.history-comic-preview.empty, .history-video-preview.empty { place-items: center; align-content: center; gap: 7px; color: var(--quiet); background: #f5ece5; font-size: 11px; }
.history-comic-preview.empty svg, .history-video-preview.empty svg { width: 24px; height: 24px; color: var(--pink); }
.history-creation-copy { min-width: 0; }
.history-creation-copy strong { display: block; font-size: 16px; }
.history-creation-copy p { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.history-gallery-wrap { padding-bottom: 18px; }
.history-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 0 0 18px; }
.history-gallery-shot { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; }
.history-gallery-shot span { position: absolute; right: 0; bottom: 0; left: 0; display: flex; gap: 7px; padding: 24px 8px 7px; overflow: hidden; color: white; background: linear-gradient(transparent, rgba(44, 37, 39, 0.78)); font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.history-gallery-shot time { flex: 0 0 auto; font-family: var(--mono); }
.history-empty { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 136px; color: var(--quiet); font-size: 12px; }
.history-empty svg { color: var(--pink); }
.history-viewer { width: min(1040px, calc(100vw - 36px)); max-width: none; padding: 0; overflow: hidden; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 8px; background: #fffdf9; box-shadow: 0 30px 90px rgba(52, 38, 42, 0.34); }
.history-viewer::backdrop { background: rgba(52, 42, 46, 0.76); backdrop-filter: blur(5px); }
.history-viewer-shell { display: grid; max-height: calc(100vh - 36px); }
.history-viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.history-viewer-head strong, .history-viewer-head small { display: block; }
.history-viewer-head strong { margin-top: 5px; font-size: 16px; }
.history-viewer-head small { margin-top: 2px; color: var(--quiet); font: 10px var(--mono); }
.history-viewer-stage { position: relative; display: grid; place-items: center; min-height: 280px; overflow: hidden; background: #262326; }
.history-viewer-stage img { display: block; width: 100%; max-height: calc(100vh - 190px); object-fit: contain; }
.history-viewer-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: white; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(35, 30, 32, 0.58); transform: translateY(-50%); }
.history-viewer-nav:hover { background: rgba(221, 113, 141, 0.9); }
.history-viewer-nav.previous { left: 14px; }
.history-viewer-nav.next { right: 14px; }
.history-viewer-nav:disabled { display: none; }
.history-viewer-caption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 16px 15px; }
.history-viewer-caption time { color: var(--pink-deep); font: 10px var(--mono); }
.history-viewer-caption p { color: var(--muted); font-size: 12px; }
.history-delete-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; overflow: hidden; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); box-shadow: 0 28px 90px rgba(74, 51, 43, 0.24); }
.history-delete-dialog::backdrop { background: rgba(69, 63, 72, 0.34); backdrop-filter: blur(4px); }
.history-delete-shell { display: grid; }
.history-delete-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 0; }
.history-delete-icon { display: grid; place-items: center; width: 42px; height: 42px; color: #c94f68; border: 1px solid #f0c4cc; border-radius: 8px; background: #fff0f2; }
.history-delete-icon svg { width: 19px; height: 19px; }
.history-delete-body { padding: 15px 20px 20px; }
.history-delete-body strong { display: block; margin-top: 8px; font-size: 20px; }
.history-delete-body p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.history-delete-impact { display: block; margin-top: 14px; padding-top: 12px; color: #a85d6d; border-top: 1px solid var(--line); font: 10px var(--mono); }
.history-delete-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--line); background: #fffaf5; }
.memory-book-panel { grid-column: 1 / -1; padding: 22px; }
.memory-book-layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: 28px; padding-top: 4px; border-top: 1px solid var(--line); }
.memory-book-form { display: grid; align-content: start; gap: 14px; padding-top: 20px; }
.memory-book-intro { padding-bottom: 14px; border-bottom: 1px dashed var(--line-strong); }
.memory-book-intro strong { display: block; font-size: 16px; }
.memory-book-intro p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.memory-date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.memory-source-options { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.memory-book-form > .button { justify-self: start; }
.memory-book-results { min-width: 0; padding-top: 20px; padding-left: 26px; border-left: 1px solid var(--line); }
.memory-book-list { display: grid; gap: 9px; }
.memory-book-item { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf5; }
.memory-book-item > img { display: block; width: 116px; aspect-ratio: 1 / 1.414; object-fit: cover; border: 1px solid var(--line-strong); border-radius: 4px; background: #eee5dd; }
.memory-book-copy { min-width: 0; }
.memory-book-copy strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.memory-book-copy p { margin-top: 6px; color: var(--muted); font-size: 10px; }
.memory-book-actions { display: flex; align-items: center; gap: 6px; }
.memory-book-actions a { text-decoration: none; }
.local-only-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; color: #5e8875; border: 1px solid #c6e2d2; border-radius: 7px; background: #f0fbf3; font: 9px var(--mono); }
.local-only-badge svg { width: 13px; height: 13px; }
.privacy-dialog { width: min(780px, calc(100vw - 32px)); max-height: min(90vh, 900px); padding: 0; overflow: hidden; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); box-shadow: 0 28px 90px rgba(74, 51, 43, .28); }
.privacy-dialog::backdrop { background: rgba(49, 44, 49, .48); backdrop-filter: blur(5px); }
.privacy-dialog-shell { display: flex; flex-direction: column; max-height: min(90vh, 900px); }
.privacy-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.privacy-dialog-head strong { display: block; margin-top: 6px; font-size: 20px; }
.privacy-dialog-body { display: grid; gap: 18px; overflow-y: auto; padding: 18px 20px; }
.privacy-status-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid #ead59d; border-radius: 8px; background: #fff9df; }
.privacy-status-icon { display: grid; place-items: center; width: 38px; height: 38px; color: #9d742e; border: 1px solid #e6cb83; border-radius: 8px; background: #fffdf1; }
.privacy-status-band strong { display: block; font-size: 12px; }
.privacy-status-band p { margin-top: 3px; color: #806d4d; font-size: 10px; line-height: 1.5; }
.privacy-status-pill { padding: 5px 7px; color: #9b672f; border: 1px solid #e3c483; border-radius: 7px; background: #fffdf1; font: 9px var(--mono); white-space: nowrap; }
.privacy-status-pill.verified { color: #4f806a; border-color: #b9d9c9; background: #effaf4; }
.privacy-notice h3 { font-size: 14px; }
.privacy-notice > p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.privacy-processor-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.privacy-processor-list > div { min-width: 0; padding: 10px; border-left: 3px solid var(--blue); background: #f5fafc; }
.privacy-processor-list strong, .privacy-processor-list span, .privacy-processor-list small { display: block; }
.privacy-processor-list strong { font-size: 11px; }
.privacy-processor-list span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.privacy-processor-list small { margin-top: 5px; color: var(--quiet); font-size: 8px; }
.privacy-consent-list { display: grid; border-top: 1px solid var(--line); }
.privacy-consent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.privacy-consent-row strong, .privacy-consent-row small { display: block; }
.privacy-consent-row strong { font-size: 11px; }
.privacy-consent-row small { margin-top: 3px; color: var(--quiet); font-size: 9px; }
.privacy-retention { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf5; }
.privacy-retention strong { display: block; font-size: 11px; }
.privacy-retention p { margin-top: 3px; color: var(--muted); font-size: 9px; }
.privacy-legal-note { padding-left: 10px; color: #9a6951; border-left: 3px solid var(--coral); font-size: 9px; line-height: 1.6; }
.privacy-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px 17px; border-top: 1px solid var(--line); background: #fffaf5; }
.conversation-panel { display: flex; flex-direction: column; min-height: 402px; }
.conversation-feed { display: grid; gap: 12px; flex: 1; max-height: 325px; overflow-y: auto; padding: 4px 2px 12px; }
.message { max-width: 92%; padding: 10px 11px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 12px; background: #f3f9fc; }
.message.user { justify-self: end; border-left: 0; border-right: 3px solid var(--pink); border-radius: 12px 0 12px 12px; background: #fff0f3; text-align: right; }
.message-label { display: block; margin-bottom: 4px; color: #7195a2; font: 9px var(--mono); letter-spacing: 0.08em; }
.message.user .message-label { color: var(--pink-deep); }
.message p { color: var(--muted); font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.message.user p { color: var(--ink); }
.chat-form { display: flex; gap: 6px; padding-top: 11px; border-top: 1px solid var(--line); }
.chat-form input { min-width: 0; flex: 1; height: 36px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; outline: none; background: #fff9f2; }
.chat-form input::placeholder { color: var(--quiet); }
.chat-form input:focus { border-color: var(--pink); }
.send-button { color: white; border-color: var(--pink-deep); background: var(--pink-deep); }
.send-button:hover { color: white; background: #d26481; }
.voice-button.listening { color: white; border-color: var(--coral); background: var(--coral); }
.voice-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--quiet); font-size: 10px; }
.voice-dot { width: 5px; height: 5px; border-radius: 50%; background: #76bf9a; }
.care-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px; }
.care-note-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; color: #6c9b83; border: 1px solid #c6e2d2; border-radius: 10px; background: #f0fbf3; }
.care-note strong { display: block; font-size: 12px; }
.care-note p { margin-top: 3px; color: var(--muted); font-size: 11px; }
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; width: min(340px, calc(100vw - 36px)); }
.toast { padding: 11px 13px; color: var(--ink); border: 1px solid var(--line-strong); border-left: 3px solid var(--pink); border-radius: 11px; background: var(--paper); box-shadow: var(--shadow); font-size: 12px; }
.toast.error { border-left-color: var(--coral); }
.model-settings-dialog { width: min(820px, calc(100vw - 32px)); max-height: min(88vh, 880px); padding: 0; overflow: hidden; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 16px; background: var(--paper); box-shadow: 0 28px 90px rgba(74, 51, 43, 0.24); }
.model-settings-dialog::backdrop { background: rgba(69, 63, 72, 0.28); backdrop-filter: blur(4px); }
.model-settings-shell { display: flex; flex-direction: column; max-height: min(88vh, 880px); }
.model-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 15px; border-bottom: 1px solid var(--line); }
.model-settings-head strong { display: block; margin-top: 7px; font-size: 20px; }
.model-settings-body { overflow-y: auto; padding: 0 20px; }
.settings-group { min-width: 0; margin: 0; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); }
.settings-group:last-child { border-bottom: 0; }
.settings-group legend { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0; color: var(--ink); font-size: 13px; font-weight: 900; }
.settings-state { padding: 3px 7px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; background: #fffaf4; font: 9px var(--mono); }
.settings-state.configured { color: #5d8e78; border-color: #c6e2d2; background: #f0fbf3; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 13px; }
.settings-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.settings-field { display: grid; gap: 6px; min-width: 0; }
.settings-field-wide { grid-column: 1 / -1; }
.settings-field > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.settings-field input, .settings-field select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #fffaf4; }
.settings-field input:focus, .settings-field select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(243, 169, 185, 0.14); }
.settings-field input::placeholder { color: var(--quiet); }
.settings-check { display: flex; align-items: center; gap: 8px; min-height: 30px; color: var(--muted); font-size: 11px; }
.settings-check input { width: 16px; height: 16px; accent-color: var(--pink-deep); }
.usage-legend { justify-content: space-between; }
.usage-refresh { width: 30px; height: 30px; margin-left: auto; }
.usage-refresh.is-refreshing svg { animation: usage-spin .8s linear infinite; }
@keyframes usage-spin { to { transform: rotate(360deg); } }
.usage-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf4; }
.usage-metrics > div { min-width: 0; padding: 12px; border-right: 1px solid var(--line); }
.usage-metrics > div:last-child { border-right: 0; }
.usage-metrics span { display: block; color: var(--quiet); font-size: 9px; font-weight: 800; }
.usage-metrics strong { display: block; margin-top: 6px; overflow-wrap: anywhere; font: 700 17px var(--mono); }
.usage-table-wrap { margin-top: 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.usage-table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; font-size: 10px; }
.usage-table th, .usage-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.usage-table th { color: var(--quiet); background: #fffaf4; font-weight: 900; }
.usage-table tbody tr:last-child td { border-bottom: 0; }
.usage-table td:last-child, .usage-table th:last-child { text-align: right; }
.usage-table-model { display: block; color: var(--ink); font: 700 10px var(--mono); }
.usage-table-provider { display: block; margin-top: 3px; color: var(--quiet); font-size: 9px; }
.usage-note { margin: 9px 0 0; color: var(--quiet); font-size: 9px; line-height: 1.5; }
.model-settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fffaf4; }
.model-settings-actions > span { color: var(--quiet); font-size: 10px; }
@media (max-width: 1180px) {
  .welcome-row { grid-template-columns: minmax(300px, 0.8fr) minmax(330px, 1fr); }
  .today-card { grid-column: 1 / -1; min-height: auto; }
  .today-card { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 1.1fr; gap: 14px; align-items: center; }
  .today-stat, .today-status { padding: 0; border: 0; }
}
@media (max-width: 980px) {
  .topbar { padding: 0 24px; }
  .main-nav { display: none; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr); }
  .comic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .topbar { gap: 10px; padding: 0 16px; }
  .topbar-right { min-width: 0; }
  .camera-state-chip { max-width: 135px; overflow: hidden; white-space: nowrap; }
  .camera-state-chip #cameraState { overflow: hidden; text-overflow: ellipsis; }
  .page { width: min(100% - 28px, 680px); padding-top: 25px; }
  .mobile-nav {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 60px;
    padding: 5px;
    border: 1px solid rgba(220, 205, 193, 0.9);
    border-radius: 16px;
    background: rgba(255, 253, 249, 0.96);
    box-shadow: 0 12px 34px rgba(121, 87, 74, 0.18);
    backdrop-filter: blur(18px);
  }
  .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 5px 2px;
    border-radius: 10px;
    font-size: 9px;
    white-space: nowrap;
  }
  .mobile-nav-link svg { width: 17px; height: 17px; }
  .mobile-nav-link.active { color: var(--pink-deep); background: #fff0f3; }
  .mobile-nav-link.active::after { display: none; }
  .welcome-row { grid-template-columns: 1fr; }
  .welcome-copy { padding-top: 4px; }
  .welcome-art { min-height: 270px; }
  .today-card { display: grid; grid-template-columns: 1fr 1fr; min-height: auto; }
  .today-card-head { grid-column: 1 / -1; }
  .today-status { align-items: end; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .live-card { grid-column: 1; grid-row: 1; }
  .record-panel-wide { grid-column: 1; grid-row: 2; }
  .history-panel { grid-column: 1; grid-row: 3; }
  .story-card { grid-column: 1; grid-row: 4; }
  .analysis-card { grid-column: 1; grid-row: 5; }
  .video-card { grid-column: 1; grid-row: 6; }
  .side-column { grid-column: 1; grid-row: 7; }
  .history-day-summary { grid-template-columns: minmax(180px, 0.72fr) minmax(220px, 1fr); gap: 14px; }
  .history-day-actions { grid-column: 2; justify-self: start; }
  .history-no-captures { grid-column: 2; justify-self: start; }
  .history-creation { grid-template-columns: minmax(200px, 0.85fr) minmax(220px, 1fr); }
  .history-video-preview { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
  .record-overview { grid-template-columns: 1fr; }
  .record-progress { grid-column: 1; }
  .record-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-height: min(68vh, 680px); }
  .camera-footer { align-items: stretch; flex-direction: column; }
  .camera-actions { width: 100%; }
  .camera-actions .button { flex: 1; }
  .video-layout { grid-template-columns: 1fr; }
  .video-mode-field, #videoButton { width: 100%; }
  .settings-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-metrics > div:nth-child(2) { border-right: 0; }
  .usage-metrics > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .topbar { gap: 8px; min-height: 62px; }
  .brand small { display: none; }
  .clock-chip { display: none; }
  .camera-state-chip { max-width: 132px; }
  .page { width: calc(100% - 20px); padding-bottom: 92px; }
  .welcome-art { min-height: 238px; }
  .welcome-art .crib { transform: translateX(-50%) scale(0.82); transform-origin: bottom center; }
  .live-card, .story-card, .video-card, .analysis-card, .record-panel, .history-panel, .conversation-panel { padding: 14px; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .section-tools, .comic-controls { width: 100%; }
  .comic-controls select { flex: 1; }
  .comic-controls .button { flex: 1; }
  .story-overview { align-items: flex-start; flex-direction: column; gap: 7px; }
  .timeline-row { grid-template-columns: 78px minmax(0, 1fr); gap: 7px; }
  .timeline-label { font-size: 9px; }
  .live-frame { aspect-ratio: 4 / 3; }
  .comic-grid { grid-template-columns: 1fr; }
  .record-stats { gap: 5px; }
  .record-stats div { padding: 9px 8px; }
  .record-list { grid-template-columns: 1fr; max-height: min(72vh, 620px); }
  .history-tools { width: 100%; justify-content: space-between; }
  .history-day-summary { grid-template-columns: 1fr; gap: 12px; padding: 14px 0; }
  .history-collage { aspect-ratio: 16 / 7; }
  .history-day-actions { grid-column: 1; justify-self: stretch; }
  .history-day-actions .history-toggle { flex: 1; }
  .history-no-captures { grid-column: 1; justify-self: start; }
  .history-creation { grid-template-columns: 1fr; padding: 10px; }
  .history-comic-preview, .history-video-preview { grid-column: 1; aspect-ratio: 16 / 9; }
  .history-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-viewer { width: calc(100vw - 16px); }
  .history-viewer-stage img { max-height: calc(100vh - 210px); }
  .history-viewer-caption { grid-template-columns: 1fr; gap: 5px; }
  .history-delete-dialog { width: calc(100vw - 16px); }
  .history-delete-actions { align-items: stretch; flex-direction: column-reverse; }
  .model-settings-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .model-settings-shell { max-height: calc(100vh - 16px); }
  .model-settings-head, .model-settings-actions { padding-right: 14px; padding-left: 14px; }
  .model-settings-body { padding: 0 14px; }
  .settings-grid, .settings-grid-four { grid-template-columns: 1fr; }
  .settings-field-wide { grid-column: 1; }
  .model-settings-actions { align-items: stretch; flex-direction: column; }
  .model-settings-actions .button { width: 100%; }
}

.audio-service-button.enabled { color: #7f4c25; border-color: #e7b56d; background: #fff0c8; }
.audio-service-button { white-space: nowrap; }


.comic-source-note { color: var(--quiet); font: 10px var(--mono); white-space: nowrap; }
.comic-style-reference { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 16px; margin: 0 0 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.comic-style-reference img { display: block; width: 148px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.comic-style-reference figcaption { min-width: 0; }
.comic-style-reference figcaption span, .comic-style-reference figcaption strong, .comic-style-reference figcaption small { display: block; }
.comic-style-reference figcaption span { color: var(--quiet); font-size: 10px; font-weight: 800; }
.comic-style-reference figcaption strong { margin-top: 6px; font-size: 16px; }
.comic-style-reference figcaption small { margin-top: 5px; color: var(--muted); font: 10px var(--mono); overflow-wrap: anywhere; }
.comic-job-status { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #efb4c2; border-radius: 8px; background: #fff7f3; }
.comic-job-copy { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.comic-job-copy strong { color: var(--ink); font-size: 12px; }
.comic-job-copy span { color: var(--pink-deep); font: 10px var(--mono); white-space: nowrap; }
.comic-job-track { height: 5px; overflow: hidden; border-radius: 999px; background: #f0d9d5; }
.comic-job-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--coral); transition: width .35s ease; }
.virtual-character { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-left: 3px solid var(--pink-deep); background: #fffaf6; }
.virtual-character-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; color: var(--pink-deep); border-radius: 50%; background: #fde3e3; }
.virtual-character strong { display: block; margin-top: 4px; color: var(--ink); font-size: 13px; }
.virtual-character p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
@media (max-width: 720px) {
  .comic-source-note { width: 100%; }
  .comic-controls { flex-wrap: wrap; }
  .comic-style-reference { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
  .comic-style-reference img { width: 96px; }
  .comic-job-copy { align-items: flex-start; flex-direction: column; gap: 4px; }
}

.workspace-panel { grid-column: 1 / -1; padding: 22px; }
.workspace-actions { display: flex; align-items: center; gap: 8px; }
.workspace-empty { display: grid; place-items: center; gap: 8px; min-height: 150px; color: var(--quiet); border: 1px dashed var(--line-strong); font-size: 12px; text-align: center; }
.workspace-empty svg { width: 24px; height: 24px; color: var(--pink); }
.section-description { margin-top: -5px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.device-summary { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(120px, .7fr)); margin-bottom: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.device-summary > div { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--line); }
.device-summary > div:last-child { border-right: 0; }
.device-summary span, .device-summary strong { display: block; }
.device-summary span { color: var(--quiet); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.device-summary strong { margin-top: 5px; overflow-wrap: anywhere; font-size: 15px; }
.device-list { display: grid; }
.device-row { display: grid; grid-template-columns: minmax(210px, 1.25fr) minmax(170px, .9fr) minmax(180px, .9fr) auto; gap: 16px; align-items: center; min-height: 82px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.device-row:first-child { border-top: 1px solid var(--line); }
.device-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.device-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; color: #588a78; border: 1px solid #c6e2d2; border-radius: 8px; background: #f0fbf3; }
.device-icon.offline { color: var(--quiet); border-color: var(--line); background: #fbf6f0; }
.device-identity strong, .device-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-identity strong { font-size: 13px; }
.device-identity span { margin-top: 3px; color: var(--quiet); font: 9px var(--mono); }
.device-state { display: grid; gap: 4px; }
.device-state strong { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.device-state strong::before { width: 7px; height: 7px; border-radius: 50%; background: var(--quiet); content: ""; }
.device-state.online strong::before { background: #65ae89; box-shadow: 0 0 0 4px rgba(101, 174, 137, .12); }
.device-state span, .device-source { color: var(--quiet); font-size: 10px; }
.device-source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.device-actions { display: flex; justify-content: flex-end; gap: 6px; }
.device-actions .icon-button { width: 32px; height: 32px; border-radius: 8px; }
.device-identity .device-active-tag { display: inline-flex; width: fit-content; margin-left: 7px; padding: 2px 6px; color: #5f907b; border: 1px solid #c6e2d2; border-radius: 9px; background: #f0fbf3; font: 8px var(--mono); vertical-align: middle; }
.device-capability-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; padding: 12px 0; color: var(--muted); border-top: 1px dashed var(--line-strong); font-size: 11px; }
.device-capability-note svg { flex: 0 0 auto; margin-top: 2px; color: #6d9db0; }
.alert-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 26px; }
.alert-filter { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff8f0; }
.segmented-button { min-height: 28px; padding: 0 11px; color: var(--muted); border: 0; border-radius: 6px; background: transparent; font-size: 10px; font-weight: 900; }
.segmented-button.active { color: var(--ink); background: white; box-shadow: 0 2px 7px rgba(80, 63, 55, .08); }
.alert-count { color: #a85d6d; font: 10px var(--mono); }
.alert-list { display: grid; margin-top: 12px; }
.alert-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.alert-row:first-child { border-top: 1px solid var(--line); }
.alert-severity { width: 8px; height: 38px; border-radius: 3px; background: var(--blue); }
.alert-row.warning .alert-severity { background: var(--butter); }
.alert-row.critical .alert-severity { background: var(--coral); }
.alert-copy strong { display: block; font-size: 12px; }
.alert-copy p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.alert-copy time { display: block; margin-top: 6px; color: var(--quiet); font: 9px var(--mono); }
.alert-actions { display: flex; gap: 5px; }
.alert-actions .icon-button { width: 30px; height: 30px; border-radius: 8px; }
.alert-row.acknowledged { opacity: .62; }
.scene-settings-panel { min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.subsection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.subsection-head h3 { margin-top: 6px; font-size: 17px; }
.scene-setting-list { display: grid; margin-top: 14px; }
.scene-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.scene-setting-controls { display: flex; align-items: center; gap: 10px; }
.scene-sensitivity { width: 86px; accent-color: #6ead91; }
.scene-setting-copy strong, .scene-setting-copy span { display: block; }
.scene-setting-copy strong { font-size: 11px; }
.scene-setting-copy span { margin-top: 3px; color: var(--quiet); font-size: 9px; }
.capability-tag { display: inline-flex !important; width: fit-content; margin-top: 5px !important; padding: 2px 6px; color: #7a6c8c !important; border: 1px solid #d8d0e2; border-radius: 7px; background: #f7f4fa; font: 8px var(--mono) !important; }
.toggle { position: relative; display: inline-flex; width: 38px; height: 22px; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { width: 100%; border: 1px solid var(--line-strong); border-radius: 20px; background: #eee7e0; transition: background .16s ease; }
.toggle span::after { position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0, 0, 0, .16); content: ""; transition: transform .16s ease; }
.toggle input:checked + span { border-color: #70b394; background: #8ec9ac; }
.toggle input:checked + span::after { transform: translateX(16px); }
.toggle input:disabled + span { opacity: .5; }
.device-dialog, .login-dialog { padding: 0; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); box-shadow: 0 28px 90px rgba(74, 51, 43, .24); }
.device-dialog { width: min(560px, calc(100vw - 32px)); }
.login-dialog { width: min(410px, calc(100vw - 32px)); }
.device-dialog::backdrop, .login-dialog::backdrop { background: rgba(69, 63, 72, .38); backdrop-filter: blur(5px); }
.device-dialog-shell { display: flex; flex-direction: column; }
.device-dialog-body { display: grid; gap: 13px; padding: 18px 20px; }
.device-token-result { padding: 12px; color: #5c4f3f; border: 1px solid #ead59d; border-radius: 8px; background: #fff9df; }
.device-token-result strong { display: block; font-size: 11px; }
.device-token-result code { display: block; margin-top: 7px; overflow-wrap: anywhere; font-size: 10px; }
.device-token-result p { margin-top: 7px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.login-shell { display: grid; gap: 13px; padding: 28px; }
.login-mark { display: grid; place-items: center; width: 46px; height: 46px; color: #5d8e78; border: 1px solid #c6e2d2; border-radius: 10px; background: #f0fbf3; }
.login-mark svg { width: 22px; height: 22px; }
.login-shell h2 { font-size: 22px; }
.login-shell > p { color: var(--muted); font-size: 11px; line-height: 1.7; }
.login-error { min-height: 16px; color: #b75165; font-size: 10px; }
.login-shell .button { width: 100%; }

@media (max-width: 980px) {
  .device-row { grid-template-columns: minmax(210px, 1.2fr) minmax(150px, .8fr) auto; }
  .device-source { display: none; }
  .alert-layout { grid-template-columns: 1fr; }
  .scene-settings-panel { padding-top: 20px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 760px) {
  .mobile-nav { display: flex; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mobile-nav-link { min-width: 66px; flex: 1 0 66px; }
  .device-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-summary > div:nth-child(2) { border-right: 0; }
  .device-summary > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .device-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .device-state { grid-column: 1; }
  .device-actions { grid-column: 2; grid-row: 1 / 3; flex-direction: column; }
  .timeline-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-overview > div { border-bottom: 1px solid var(--line); }
  .timeline-overview > div:nth-child(2n) { border-right: 0; }
  .timeline-overview > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .timeline-overview .coverage { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .memory-book-layout { grid-template-columns: 1fr; gap: 8px; }
  .memory-book-results { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 520px) {
  .workspace-panel { padding: 14px; }
  .workspace-actions { width: 100%; justify-content: space-between; }
  .mobile-nav-link span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
  .device-dialog { width: calc(100vw - 16px); }
  .device-dialog .model-settings-actions { align-items: stretch; flex-direction: column; }
  .alert-actions { flex-direction: column; }
  .login-shell { padding: 22px; }
  .trusted-timeline::before { left: 16px; }
  .timeline-event { grid-template-columns: 34px minmax(0, 1fr); }
  .timeline-event-time { grid-column: 2; padding: 0 0 6px; text-align: left; }
  .timeline-event-time time, .timeline-event-time span { display: inline; }
  .timeline-event-time span::before { margin: 0 5px; content: "至"; }
  .timeline-event-marker { grid-column: 1; grid-row: 1 / 3; justify-content: flex-start; padding-top: 23px; }
  .timeline-event-content { grid-column: 2; }
  .timeline-event-head { flex-direction: column; gap: 7px; }
  .timeline-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memory-book-panel { padding: 14px; }
  .memory-date-grid { grid-template-columns: 1fr; }
  .memory-book-form > .button { width: 100%; }
  .memory-book-item { grid-template-columns: 86px minmax(0, 1fr); }
  .memory-book-item > img { width: 86px; }
  .memory-book-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .privacy-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .privacy-dialog-shell { max-height: calc(100vh - 16px); }
  .privacy-dialog-head, .privacy-dialog-body, .privacy-dialog-actions { padding-right: 14px; padding-left: 14px; }
  .privacy-status-band { grid-template-columns: auto minmax(0, 1fr); }
  .privacy-status-pill { grid-column: 2; justify-self: start; }
  .privacy-processor-list { grid-template-columns: 1fr; }
  .privacy-retention { align-items: stretch; flex-direction: column; }
  .privacy-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .privacy-dialog-actions .button { width: 100%; }
}
@media (max-width: 420px) {
  .camera-state-chip { display: none; }
}
.deployment-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 24px;
  color: #5d4712;
  background: #fff3c4;
  border-bottom: 1px solid #ead38b;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.deployment-banner svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.static-preview-mode :is(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .deployment-banner {
    align-items: flex-start;
    padding-inline: 16px;
    font-size: 12px;
    line-height: 1.5;
  }
}