:root { --ink:#171716; --paper:#f7f4ed; --cream:#ebe5da; --peach:#ff8468; --orange:#f05b38; --yellow:#f7cb43; --muted:#77736e; --line:#d9d3c8; }
* { box-sizing:border-box; } body { margin:0; background:#dedbd4; color:var(--ink); font-family:"DM Sans",sans-serif; } button { font:inherit; cursor:pointer; } .app-shell { width:100%; max-width:430px; min-height:100dvh; margin:auto; background:var(--paper); padding:24px 24px 108px; overflow:hidden; position:relative; }
.topbar { height:54px; display:flex; align-items:flex-start; justify-content:space-between; } .brand { color:var(--ink); text-decoration:none; font-size:21px; letter-spacing:-1px; font-weight:600; } .brand em { font-family:"Playfair Display"; font-weight:600; } .icon-button { width:32px; height:26px; border:0; background:transparent; padding:5px 0; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; } .icon-button span { height:1.5px; width:25px; background:var(--ink); } .icon-button span:nth-child(2) { width:16px; }
.settings-cog { display:grid; place-items:center; padding:0; color:var(--ink); font-size:25px; line-height:1; }
.home-screen #todayDate { display:inline-block; margin-top:19px; padding:7px 10px; border:1px solid var(--line); border-radius:20px; color:var(--ink); font-size:11px; letter-spacing:1px; }
.build-stamp { color:#9a948a; font:9px "DM Mono",monospace; letter-spacing:.6px; }
.screen { display:none; animation:enter .35s ease; } .screen.active { display:block; } @keyframes enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }.eyebrow,.mono { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:1.1px; }.eyebrow { color:var(--orange); margin-top:19px; } h1,h2 { font-size:42px; line-height:1.02; letter-spacing:-2.8px; margin:15px 0; font-weight:600; } h1 i,h2 i { font-family:"Playfair Display"; font-weight:600; } .intro { font-size:15px; line-height:1.45; color:#5c5954; width:88%; margin:0 0 28px; }.progress-row { display:flex; gap:14px; align-items:center; color:#5e5b55; font-size:12px; }.progress-row b { color:var(--ink); }.progress-track { flex:1; background:#dfdad0; height:5px; border-radius:9px; overflow:hidden; }.progress-track i { display:block; height:100%; width:0%; background:var(--orange); border-radius:9px; transition:.4s; }
.challenge-list { margin:20px 0 22px; display:grid; gap:11px; }.challenge-card { border:1px solid var(--line); border-radius:16px; padding:14px; display:flex; align-items:center; gap:13px; background:#fcfaf5; text-align:left; transition:.2s; }.challenge-card:hover { transform:translateY(-2px); border-color:#aaa196; }.challenge-card.complete { background:#f1e9dc; }.challenge-icon { height:47px; width:47px; border-radius:50%; background:var(--yellow); display:grid; place-items:center; font-size:24px; flex:0 0 auto; }.challenge-card:nth-child(2) .challenge-icon { background:#b9d7c2; }.challenge-card:nth-child(3) .challenge-icon { background:#f3b8ad; }.challenge-copy { flex:1; }.challenge-copy small { color:var(--orange); font-family:"DM Mono"; font-size:9px; letter-spacing:.7px; }.challenge-copy strong { display:block; margin-top:3px; font-size:15px; letter-spacing:-.3px; }.challenge-copy p { margin:3px 0 0; color:var(--muted); font-size:12px; }.card-arrow { font-size:21px; }.check { color:#386b4d; font-size:20px; }
.daily-reset { margin:8px 0 0; color:var(--muted); font-size:11px; }
.primary-button { border:0; border-radius:13px; background:var(--ink); color:#fff; width:100%; padding:17px 18px; text-align:left; font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:space-between; transition:.2s; }.primary-button:hover { background:#35332f; transform:translateY(-1px); }.primary-button:disabled { background:#bbb6ad; cursor:not-allowed; transform:none; }.button-plus { font-size:21px; font-weight:400; }.compilation-button { margin-top:2px; }.footnote { text-align:center; font-size:11px; color:#858078; margin:14px auto; }
.back-button,.text-button { border:0; color:#5f5b53; background:transparent; padding:8px 0; font-size:13px; }.challenge-screen .sound-orb { margin:29px auto 22px; }.sound-orb { height:124px; width:124px; border-radius:50%; display:grid; place-items:center; background:var(--yellow); box-shadow:10px 12px 0 #eadfad; font-size:57px; }.challenge-screen h2 { margin:10px 0 8px; }.challenge-prompt { min-height:64px; font-size:16px; line-height:1.45; color:#54514d; }.sound-preview { padding:14px; background:#ebe4d7; border-radius:13px; display:flex; align-items:center; justify-content:space-between; margin:23px 0 30px; }.sound-preview .mono { display:block; color:#8b776b; margin-bottom:5px; }.sound-preview strong { font-size:14px; }.round-play { border:0; height:38px; width:38px; border-radius:50%; background:var(--orange); color:#fff; padding-left:3px; }
.record-screen { position:fixed; z-index:10; inset:0; max-width:430px; margin:auto; background:#171716; color:white; }.record-screen video,.camera-fallback { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }.camera-fallback { display:grid; place-items:center; background:linear-gradient(150deg,#5e6358,#171915 70%); text-align:center; font:600 31px/1 "Playfair Display"; letter-spacing:-1px; color:#e4e5d3; }.record-hud { position:relative; display:flex; padding:30px 24px; align-items:center; justify-content:space-between; }.close-record { background:#ffffff28; border:0; height:35px; width:35px; color:#fff; font-size:25px; border-radius:50%; }.recording-status { font:13px "DM Mono"; display:flex; align-items:center; gap:7px; }.record-dot { width:8px; height:8px; background:#ff5b52; border-radius:50%; }.moment-chip { position:absolute; top:84px; left:50%; transform:translateX(-50%); white-space:nowrap; background:#111111a8; border:1px solid #ffffff3a; padding:7px 10px; border-radius:20px; font:9px "DM Mono"; letter-spacing:.6px; }.record-controls { position:absolute; bottom:37px; left:0; right:0; text-align:center; padding:0 24px; }.record-controls p { font-size:13px; text-shadow:0 1px 8px #000; }.sound-trigger { margin:12px auto 20px; background:var(--yellow); color:#191817; border:0; border-radius:24px; padding:11px 17px; font-weight:600; display:flex; align-items:center; gap:8px; }.sound-trigger:disabled { opacity:.48; }.sound-burst { font-size:18px; }.record-button { border:3px solid white; background:#ffffff35; border-radius:50%; width:68px; height:68px; padding:6px; }.record-button i { display:block; height:100%; background:#ff514a; border-radius:50%; transition:.2s; }.record-button.is-recording i { border-radius:8px; margin:12px; height:auto; }.record-label { display:block; margin-top:7px; font:9px "DM Mono"; letter-spacing:1px; }
.review-screen h2,.reel-screen h2 { margin-top:10px; }.review-video-wrap { height:315px; position:relative; background:#34332f; border-radius:16px; overflow:hidden; margin:25px 0 16px; }.review-video-wrap video { width:100%; height:100%; object-fit:cover; }.video-placeholder { height:100%; display:grid; place-items:center; color:#f8e8ce; background:linear-gradient(150deg,#7a4b38,#302520); font:600 34px/1 "Playfair Display"; letter-spacing:-1px; text-align:center; }.duration-pill { position:absolute; bottom:12px; right:12px; border-radius:20px; background:#111111b8; padding:5px 8px; font:10px "DM Mono"; color:white; }.review-note { color:var(--muted); font-size:14px; }.text-button { width:100%; margin-top:8px; }.reel-card { position:relative; background:#24231f; color:#faf5e9; border-radius:17px; padding:14px; overflow:hidden; margin:26px 0 22px; }.reel-header { display:flex; justify-content:space-between; font:8px "DM Mono"; letter-spacing:.7px; padding:0 1px 10px; }.reel-clips { display:flex; gap:5px; height:262px; }.reel-clip { flex:1; border-radius:8px; background:var(--card-color); display:flex; align-items:flex-end; padding:9px; position:relative; overflow:hidden; }.reel-clip span { position:relative; font:600 15px/1 "Playfair Display"; }.reel-clip:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 48%,#0008); }.reel-footer { font:italic 15px "Playfair Display"; padding:11px 0 2px; }.reel-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-10%); height:48px; width:48px; border-radius:50%; border:0; padding-left:4px; color:var(--ink); background:#fff; }.style-row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:19px; }.style-row .mono { color:#7b766e; margin-right:4px; }.style-pill { font-size:11px; background:transparent; border:1px solid #c9c2b8; padding:7px 10px; border-radius:20px; }.style-pill.active { color:white; border-color:var(--ink); background:var(--ink); }
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-width:430px; width:100%; background:#f7f4edee; backdrop-filter:blur(9px); display:flex; justify-content:space-around; border-top:1px solid var(--line); padding:15px 20px calc(15px + env(safe-area-inset-bottom)); z-index:5; }.bottom-nav a { text-decoration:none; color:#8b867e; font-size:11px; }.bottom-nav .nav-active { color:var(--ink); font-weight:700; }.toast { position:fixed; z-index:20; bottom:90px; left:50%; transform:translate(-50%,18px); opacity:0; background:#24231f; color:#fff; border-radius:30px; padding:10px 15px; font-size:12px; transition:.25s; white-space:nowrap; }.toast.show { opacity:1; transform:translate(-50%,0); }
.bottom-nav a.nav-locked { color:#c5bfb5; }
body:has(.record-screen.active) .bottom-nav { display:none; }
@media (min-width:500px) { body { padding:18px 0; } .app-shell { min-height:calc(100dvh - 36px); border-radius:24px; box-shadow:0 16px 55px #4e4a4333; } .bottom-nav { bottom:18px; border-radius:0 0 24px 24px; } .record-screen { top:18px; bottom:18px; border-radius:24px; } }
.reel-clip video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reel-clip span { z-index:1; }
.reel-play { z-index:2; }
.reel-player { position:absolute; inset:0; z-index:3; background:#161513; }
.reel-player-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s linear; }
.reel-player-caption { position:absolute; z-index:1; top:31px; left:15px; right:15px; color:#fff; text-align:center; text-shadow:0 1px 5px #000; font:600 21px/1 "Playfair Display"; transition:opacity .2s; }
.reel-player.reel-style-bold .reel-player-caption { font-family:"Archivo Black",sans-serif; font-size:18px; font-weight:400; letter-spacing:.15px; text-transform:uppercase; }
.reel-player-caption .caption-title,.reel-player-caption .caption-time,.reel-player-caption .caption-challenge { display:block; }.reel-player-caption .caption-time { margin-top:5px; color:var(--yellow); font:11px "DM Mono",monospace; letter-spacing:1px; }.reel-player-caption .caption-challenge { max-width:330px; margin:8px auto 0; color:#fff; font:600 13px/1.35 "DM Sans",sans-serif; letter-spacing:0; text-transform:none; }.reel-player.reel-style-bold .reel-player-caption .caption-title { color:#fff; -webkit-text-stroke:.55px #76283f; text-shadow:0 2px 6px #000; }.reel-player.reel-style-bold .reel-player-caption .caption-time { color:#fff; font:italic 16px "Playfair Display",serif; letter-spacing:.8px; }.reel-player.reel-style-fun .reel-player-caption { font-family:"Baloo 2",sans-serif; font-size:24px; font-weight:800; line-height:.98; }.reel-player.reel-style-fun .caption-title,.reel-player.reel-style-fun .caption-time,.reel-player.reel-style-fun .caption-challenge { background:linear-gradient(90deg,#ff5d8f,#ff9e45,#f5dd4f,#58d990,#52b5ff,#b07cff); -webkit-background-clip:text; background-clip:text; color:transparent; }.reel-player.reel-style-fun .caption-time { margin-top:7px; font:700 15px/1 "Baloo 2",sans-serif; letter-spacing:1px; }.reel-player.reel-style-fun .caption-challenge { margin-top:9px; font:700 14px/1.25 "Baloo 2",sans-serif; }.reel-player-toggle { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); height:45px; width:45px; border:0; border-radius:10px; background:#171716c9; color:#fff; font-size:17px; opacity:0; transition:opacity .28s ease; }.reel-player.show-controls .reel-player-toggle { opacity:1; }.reel-rewind { position:absolute; z-index:3; bottom:11px; left:11px; height:35px; width:35px; border:0; border-radius:50%; background:#171716b8; color:#fff; font-size:20px; }
.share-icon { font-size:20px; line-height:0; }.export-sheet { position:fixed; z-index:30; inset:0; max-width:430px; margin:auto; }.sheet-scrim { position:absolute; inset:0; width:100%; border:0; background:#111a; }.sheet-panel { position:absolute; bottom:0; width:100%; background:var(--paper); border-radius:23px 23px 0 0; padding:10px 24px calc(28px + env(safe-area-inset-bottom)); animation:sheet-in .25s ease; }.sheet-handle { height:4px; width:35px; border-radius:4px; background:#c8c1b7; margin:0 auto 19px; }.sheet-panel .mono { color:var(--orange); }.sheet-panel h3 { font-size:27px; letter-spacing:-1.5px; line-height:1.05; margin:8px 0 18px; }.export-option { width:100%; display:flex; align-items:center; gap:13px; border:0; border-top:1px solid var(--line); padding:15px 0; text-align:left; background:transparent; }.export-symbol { height:37px; width:37px; display:grid; place-items:center; border-radius:50%; background:var(--cream); font-size:20px; }.export-option b,.export-option small { display:block; }.export-option b { font-size:14px; }.export-option small { margin-top:3px; color:var(--muted); font-size:11px; }@keyframes sheet-in { from { transform:translateY(100%); } to { transform:none; } }
.export-screen.active { position:fixed; z-index:15; inset:0; max-width:430px; height:100dvh; margin:auto; padding:24px; background:var(--paper); display:flex; flex-direction:column; overflow:hidden; }.export-stage { position:relative; flex:1; width:100%; text-align:center; }.export-heading { position:absolute; top:7dvh; left:0; right:0; display:flex; flex-direction:column; align-items:center; }.export-spinner { width:min(50vw,190px); height:min(50vw,190px); display:grid; place-items:center; }.export-screen h2 { font-size:36px; margin:20px 0 10px; }.export-stage p { margin:0; color:var(--muted); font-size:13px; }.spinner { height:100%; width:100%; border:5px solid #d8d2c8; border-top-color:var(--orange); border-radius:50%; animation:spin .8s linear infinite; }.export-progress-track { width:100%; max-width:280px; height:5px; margin:23px auto 9px; overflow:hidden; border-radius:10px; background:var(--cream); }.export-progress-track i { display:block; height:100%; width:0; background:var(--orange); border-radius:10px; transition:width .15s linear; }@keyframes spin { to { transform:rotate(360deg); } }
.style-pill:disabled { opacity:.4; cursor:not-allowed; }
.export-screen .primary-button { margin-top:auto; margin-bottom:0; }
.export-video-stage { position:fixed; z-index:14; inset:0; width:100vw; height:100dvh; object-fit:cover; opacity:.001; pointer-events:none; }
.settings-sheet { position:fixed; z-index:30; inset:0; max-width:430px; margin:auto; }.settings-panel h3 { font-size:27px; letter-spacing:-1.5px; line-height:1.05; margin:8px 0 18px; }.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:15px 0; }.setting-row b,.setting-row small { display:block; }.setting-row b,.setting-choice b { font-size:14px; }.setting-row small,.setting-choice small,.delete-recordings small { margin-top:3px; color:var(--muted); font-size:11px; max-width:230px; }.setting-toggle { width:42px; height:24px; padding:3px; border:0; border-radius:20px; background:#cec8be; flex:0 0 auto; transition:.2s; }.setting-toggle:after { content:""; display:block; width:18px; height:18px; border-radius:50%; background:#fff; transition:.2s; }.setting-toggle.active { background:var(--orange); }.setting-toggle.active:after { transform:translateX(18px); }.setting-choice { border-top:1px solid var(--line); padding:15px 0; }.choice-group { display:flex; gap:6px; margin-top:10px; }.choice-group button { border:1px solid #c9c2b8; border-radius:20px; background:transparent; padding:7px 11px; font-size:11px; }.choice-group button.active { border-color:var(--ink); background:var(--ink); color:#fff; }.delete-recordings { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; border-top:1px solid var(--line); background:transparent; color:#b83b31; padding:16px 0 3px; text-align:left; }.delete-recordings b,.delete-recordings small { display:block; }.delete-recordings b { font-size:14px; }.delete-recordings > span:last-child { font-size:22px; }
.reel-style-bold .reel-clip span { color:#fff; font-family:"Archivo Black",sans-serif; font-size:12px; font-weight:400; letter-spacing:.15px; -webkit-text-stroke:.35px #76283f; text-shadow:0 2px 4px #000; }
.reel-style-fun .reel-clip span { font-family:"Baloo 2",sans-serif; font-size:16px; font-weight:800; line-height:.9; background:linear-gradient(90deg,#ff5d8f,#ff9e45,#f5dd4f,#58d990,#52b5ff,#b07cff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 4px #000; }
.reel-player.reel-style-fun .caption-title,.reel-player.reel-style-fun .caption-time,.reel-player.reel-style-fun .caption-challenge,.reel-style-fun .reel-clip span { -webkit-text-fill-color:transparent; }
.reel-player.reel-style-fun .reel-player-caption,.reel-style-fun .reel-clip span { text-shadow:none; }
.record-screen #cameraPreview,.record-screen .camera-fallback { pointer-events:none; }
.record-controls { z-index:11; display:flex; flex-direction:column; align-items:center; pointer-events:auto; }
.record-controls > button { pointer-events:auto; }
.record-controls > :not(button) { pointer-events:none; }
.flip-camera { position:absolute; right:24px; bottom:45px; z-index:2; height:43px; width:43px; display:grid; place-items:center; border:1px solid #ffffff55; border-radius:50%; background:#1111116e; color:#fff; font-size:25px; line-height:1; }
.recording-guidance { position:absolute; top:116px; left:34px; right:34px; margin:0; color:#fff; text-align:center; font-size:12px; line-height:1.35; text-shadow:0 1px 6px #000; }

/* Keep the recording affordance as one native button: its paint and hit area
   are deliberately the same element, without a nested layer intercepting taps. */
.record-button {
  display:block;
  margin:0 auto;
  padding:0;
  position:relative;
  z-index:20;
  width:68px;
  height:68px;
  min-width:68px;
  min-height:68px;
  flex:0 0 68px;
  line-height:0;
  overflow:hidden;
  border:3px solid #fff;
  border-radius:50%;
  background:#ffffff35;
  box-shadow:inset 0 0 0 6px #ff514a;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  appearance:none;
  user-select:none;
  transition:border-radius .22s ease, transform .22s ease, box-shadow .22s ease;
}
.record-button.is-recording {
  border-radius:19px;
  transform:scale(.92);
  border-color:#ff514a;
  background:#ff514a;
  box-shadow:inset 0 0 0 12px #ff514a;
}

/* Home header and date hierarchy */
.topbar { height:68px; align-items:center; }
.topbar-actions { display:flex; align-items:center; align-self:center; gap:0; height:42px; padding:0; border:0; border-radius:0; background:transparent; }
.brand { font-size:30px; letter-spacing:-1.6px; font-weight:700; line-height:1; }
.brand em { font-weight:700; }
.icon-button { width:42px; height:42px; display:flex; align-items:center; justify-content:center; padding:0; color:var(--ink); line-height:1; }
.topbar-actions .icon-button { width:42px; height:42px; }
.topbar-actions .settings-cog { position:relative; border:0; }
.topbar-actions .settings-cog:before { content:""; position:absolute; left:0; top:50%; width:1px; height:24px; background:var(--line); transform:translateY(-50%); }
.settings-cog { font-size:31px; }
.theme-toggle { font-size:29px; }
.theme-toggle span { width:auto; height:auto; background:transparent; display:block; line-height:1; transform:translateY(2px); }
body.dark-mode .theme-toggle span { transform:translateY(1px); }
.home-screen .build-stamp { margin-top:3px; }
.home-screen #todayDate.home-date { height:16.666dvh; min-height:92px; max-height:142px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; margin:0; padding:0; border:0; border-radius:0; color:inherit; font-size:inherit; letter-spacing:normal; text-align:center; }
.home-date span { color:var(--orange); font:15px "DM Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; }
.home-date strong { color:var(--ink); font:700 clamp(29px,8vw,39px)/.95 "DM Sans",sans-serif; letter-spacing:-1.8px; }
.home-screen h1 { margin-top:5px; }
body:has(.home-screen.active) .app-shell { overflow-y:auto; }

/* Dark mode: black foundation, white type, and burgundy accents. */
body.dark-mode {
  --ink:#fff;
  --paper:#000;
  --cream:#151114;
  --peach:#7d1d3b;
  --orange:#d06989;
  --yellow:#8e2043;
  --muted:#c7bcc1;
  --line:#4c3540;
  background:#000;
  color:#fff;
}
body.dark-mode .app-shell { background:#000; }
body.dark-mode .build-stamp { color:#a89ba1; }
body.dark-mode .intro,
body.dark-mode .progress-row,
body.dark-mode .back-button,
body.dark-mode .text-button,
body.dark-mode .challenge-prompt { color:#ddd4d8; }
body.dark-mode .progress-track { background:#311d27; }
body.dark-mode .challenge-card { background:#101010; border-color:var(--line); color:#fff; }
body.dark-mode .challenge-card:hover { border-color:var(--orange); }
body.dark-mode .challenge-card.complete { background:#260d18; }
body.dark-mode .challenge-card .challenge-icon,
body.dark-mode .challenge-card:nth-child(2) .challenge-icon,
body.dark-mode .challenge-card:nth-child(3) .challenge-icon { background:#8e2043; color:#fff; }
body.dark-mode .challenge-copy p,
body.dark-mode .daily-reset,
body.dark-mode .footnote { color:var(--muted); }
body.dark-mode .check { color:#fff; }
body.dark-mode .primary-button { background:#fff; color:#000; }
body.dark-mode .primary-button:hover { background:#8e2043; color:#fff; }
body.dark-mode .primary-button:disabled { background:#342b30; color:#958b90; }
body.dark-mode .sound-orb { background:#8e2043; box-shadow:10px 12px 0 #3f1122; }
body.dark-mode .sound-preview { background:#151114; }
body.dark-mode .sound-preview .mono { color:#c5b7bd; }
body.dark-mode .round-play,
body.dark-mode .sound-trigger { background:#8e2043; color:#fff; }
body.dark-mode .reel-card { background:#0d0d0d; color:#fff; border:1px solid var(--line); }
body.dark-mode .reel-clip { background:#4a1326; }
body.dark-mode .reel-play { background:#fff; color:#000; }
body.dark-mode .style-row .mono { color:var(--muted); }
body.dark-mode .style-pill { border-color:var(--line); color:#fff; }
body.dark-mode .style-pill.active { background:#8e2043; border-color:#8e2043; color:#fff; }
body.dark-mode .bottom-nav { background:#000000ee; }
body.dark-mode .bottom-nav a { color:#a99ca2; }
body.dark-mode .bottom-nav .nav-active { color:#fff; }
body.dark-mode .bottom-nav a.nav-locked { color:#5a4a51; }
body.dark-mode .toast { background:#8e2043; color:#fff; }
body.dark-mode .sheet-panel { background:#000; color:#fff; }
body.dark-mode .sheet-handle { background:#5c4650; }
body.dark-mode .export-symbol { background:#181114; color:#fff; }
body.dark-mode .export-option small,
body.dark-mode .setting-row small,
body.dark-mode .setting-choice small,
body.dark-mode .delete-recordings small { color:var(--muted); }
body.dark-mode .spinner { border-color:#3b2931; border-top-color:#8e2043; }
body.dark-mode .setting-toggle { background:#44343b; }
body.dark-mode .setting-toggle.active { background:#8e2043; }
body.dark-mode .choice-group button { border-color:var(--line); color:#fff; }
body.dark-mode .choice-group button.active { border-color:#8e2043; background:#8e2043; color:#fff; }
body.dark-mode .delete-recordings { color:#a82a4e; }
body.dark-mode .camera-fallback { background:linear-gradient(150deg,#4a1326,#000 70%); color:#fff; }