/* liveview.css — the camera on a phone (js/liveview.js), option D.
 *
 * Two kinds of surface live here, and they theme differently on purpose:
 *
 *   · The camera itself — the picture and everything floating on it, the
 *     menu, the sheet of looks, the progress card. A viewfinder is one visual
 *     world in every theme, the way every camera app's is: white chrome and a
 *     readout over a dark scrim, because they sit on a photograph and the
 *     photograph does not change with the theme. Black gets its no-lighter-
 *     than-the-ground surfaces; light and dark are the same camera.
 *   · Settings and the cards — ordinary UI, styled for all three themes
 *     through the --c-* tokens below.
 */

/* The camera replaces the chassis while it is up; desktop never gets here. */
html.lvd-on body.live-view .chassis { display: none !important; }
html.lvd-on body { overscroll-behavior: none; }
/* Toasts land above the wheel instead of on the shutter. */
html.lvd-on .lr-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 300px); }
html.lvd-on .save-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 300px); }

.lvd {
  position: fixed; inset: 0; z-index: 85;
  background: #000; color: #fff; overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font: 15px/1.4 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --lcd: 'Share Tech Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sel: #ff6b86; --cherry: #f0334f; --stamp: #ff9a2e;
  --st: max(10px, env(safe-area-inset-top, 0px));
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: max(14px, env(safe-area-inset-left, 0px));
  --sr: max(14px, env(safe-area-inset-right, 0px));
  --glass: rgba(18, 20, 28, 0.44);
  --glass-line: rgba(255, 255, 255, 0.22);
}
.lvd[hidden] { display: none; }
.lvd button { font: inherit; color: inherit; margin: 0; -webkit-tap-highlight-color: transparent; }
.lvd button:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }

/* ── the picture ────────────────────────────────────────────────────────── */
.lvd-back { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; z-index: 0; }
.lvd-zone { position: absolute; inset: 0; z-index: 1; }
.lvd-vf { position: absolute; z-index: 1; pointer-events: none; }
.lvd-scrim-top { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--st) + 140px); z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,0)); }
.lvd-scrim-bot { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--sb) + 330px); z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6) 42%, rgba(0,0,0,.82)); }
.lvd-af { position: absolute; z-index: 3; pointer-events: none; }
.lvd-af i { position: absolute; width: 20px; height: 20px; border: 0 solid rgba(255,255,255,.9); filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.lvd-af i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.lvd-af i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.lvd-af i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.lvd-af i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.lvd.osd-off .lvd-af, .lvd.osd-off .lvd-osd, .lvd.orig .lvd-af { display: none; }

/* ── the top bar: leave · quality · date · menu ─────────────────────────── */
.lvd-top { position: absolute; top: calc(var(--st) + 2px); left: var(--sl); right: var(--sr); height: 44px; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lvd-top-r { display: flex; gap: 8px; align-items: center; }
.lvd-chrome { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; padding: 0; border: 0; cursor: pointer;
  color: #2c323e !important;
  background: radial-gradient(circle at 50% 28%, #ffffff, #dde2ea 55%, #aeb6c3);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.18), inset 0 1px 0 #fff;
  transition: transform .12s; }
.lvd-chrome:active { transform: scale(.93); }
.lvd-chrome.big { width: 48px; height: 48px; }
.lvd-chrome[hidden] { display: none; }
.lvd-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; min-width: 0;
  background: rgba(214,220,230,.2); border: 1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.lvd-seg[hidden] { display: none; }
.lvd-seg button { height: 32px; padding: 0 11px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font: 800 11px/1 Inter, -apple-system, sans-serif; letter-spacing: .06em; color: rgba(255,255,255,.82); }
.lvd-seg button.on { background: linear-gradient(#ffffff, #d6dbe4); color: #1b1f28; box-shadow: inset 0 -1px 0 rgba(0,0,0,.18); }
.lvd-seg button:disabled { opacity: .38; cursor: default; }
.lvd-date { height: 36px; padding: 0 12px 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 800 11.5px/1 Inter, -apple-system, sans-serif; letter-spacing: .12em; color: rgba(255,255,255,.7);
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lvd-date i { width: 8px; height: 8px; border-radius: 50%; background: #6b707b; box-shadow: inset 0 1px 1px rgba(0,0,0,.4); }
.lvd-date.on { color: #ffb15c; background: rgba(40,22,4,.58); border-color: rgba(255,154,46,.55); }
.lvd-date.on i { background: var(--stamp); box-shadow: 0 0 8px 2px rgba(255,154,46,.7); }

/* ── the flash (the app only): off · auto · on ─────────────────────────── */
.lvd-flashbtn { position: absolute; top: calc(var(--st) + 54px); right: var(--sr); width: 40px; height: 40px; z-index: 10; }
.lvd-flashbtn[hidden] { display: none; }
.lvd-flashbtn svg { display: block; }
.lvd-flashbtn.off > svg { opacity: .5; }
.lvd-flash-x { position: absolute; inset: 0; display: grid; place-items: center; opacity: .7; }
.lvd-flash-a { position: absolute; right: 5px; bottom: 3px; font: 800 9.5px/1 Inter, -apple-system, sans-serif; font-style: normal; }
.lvd-flashbtn.on { color: #3a2800 !important; background: radial-gradient(circle at 50% 28%, #fff8cf, #ffd84a 55%, #e3a400);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 16px 2px rgba(255,210,70,.5), inset 0 1px 0 #fff; }
.lvd.has-flash .lvd-osd { right: calc(var(--sr) + 56px); }

/* ── the body's print and the readout ───────────────────────────────────── */
.lvd-brand { position: absolute; top: calc(var(--st) + 55px); left: 0; right: 0; z-index: 9; pointer-events: none;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  font: 800 10px/1 Inter, -apple-system, sans-serif; letter-spacing: .24em; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.75); }
.lvd-brand em { font-style: normal; letter-spacing: .14em; color: rgba(255,255,255,.55); }
.lvd-led { width: 7px; height: 7px; border-radius: 50%; background: #5fd08a; box-shadow: 0 0 7px 2px rgba(95,208,138,.6); }
.lvd.rec .lvd-led { background: #ff2e4d; box-shadow: 0 0 9px 2px rgba(255,46,77,.75); animation: lvd-blink 1s steps(2, start) infinite; }
.lvd-osd { position: absolute; top: calc(var(--st) + 80px); left: calc(var(--sl) + 8px); right: calc(var(--sr) + 8px); z-index: 6; pointer-events: none;
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--lcd); font-size: 17px; line-height: 1; letter-spacing: .02em; white-space: pre; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 10px rgba(0,0,0,.35); }
.lvd-rec-t { color: #ff5a72; font-weight: 400; }
.lvd-chip { position: absolute; top: calc(var(--st) + 110px); left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none;
  height: 32px; padding: 0 14px; display: flex; align-items: center; border-radius: 999px; white-space: nowrap; max-width: calc(100% - 32px);
  background: rgba(18,20,28,.62); border: 1px solid rgba(255,255,255,.22); color: #fff;
  font: 600 12px/1 Inter, -apple-system, sans-serif; letter-spacing: .02em;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.lvd-chip[hidden] { display: none; }

/* ── the main dial: a ruler at the right edge, the number riding the pointer ── */
.lvd-ruler { position: absolute; right: var(--sr); top: 26%; width: 76px; height: 272px; z-index: 9; }
.lvd-ruler[hidden] { display: none; }
.lvd-ruler svg { width: 76px; height: 272px; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,.85)) drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.lvd-ruler line { stroke: rgba(255,255,255,.5); stroke-width: 2.1; stroke-linecap: round; }
.lvd-ruler line.on { stroke: #fff; }
.lvd-ruler line.base { stroke: rgba(255,255,255,.6); stroke-width: 1.4; }
.lvd-ruler line.ptr { stroke: var(--sel); stroke-width: 2.8; }
.lvd-ruler polygon.ptr { fill: var(--sel); }
.lvd-ruler-read { position: absolute; right: 52px; padding: 6px 0 6px 10px; border: 0; background: none; cursor: pointer; text-align: right; white-space: nowrap;
  font-family: var(--lcd); font-size: 27px; line-height: 1; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.45); }
.lvd-ruler-read small { display: block; margin-bottom: 3px; font: 800 9.5px/1 Inter, -apple-system, sans-serif; letter-spacing: .16em; color: rgba(255,255,255,.82); }
.lvd-ruler-read b { font-weight: 400; }

/* ── the look: its name, the scale, the wheel ───────────────────────────── */
.lvd-all { position: absolute; bottom: calc(var(--sb) + 276px); left: 50%; transform: translateX(-50%); z-index: 8;
  display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 800 10px/1 Inter, -apple-system, sans-serif; letter-spacing: .15em; color: rgba(255,255,255,.72); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lvd-name { position: absolute; bottom: calc(var(--sb) + 222px); left: 0; right: 0; z-index: 8;
  display: flex; justify-content: center; align-items: flex-start; gap: 0; }
.lvd-name-t { min-width: 0; max-width: calc(100% - 112px); padding: 2px 4px; border: 0; background: none; cursor: pointer; text-align: center; }
.lvd-name-t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--lcd); font-size: 25px; line-height: 1.05; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.lvd-name-t small { display: block; margin-top: 4px; font: 800 9.5px/1 Inter, -apple-system, sans-serif; letter-spacing: .2em; color: rgba(255,255,255,.62); }
.lvd-step { width: 44px; height: 44px; margin-top: -8px !important; flex: none; border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--lcd); font-size: 19px; line-height: 1; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.lvd-step:disabled { opacity: .22; cursor: default; }
.lvd-arc { position: absolute; left: 0; bottom: calc(var(--sb) + 144px); width: 100%; height: 80px; z-index: 7; pointer-events: none; }
.lvd-wheel { position: absolute; left: 0; right: 0; bottom: calc(var(--sb) + 76px); height: 96px; z-index: 8; }
.lvd-wi { position: absolute; left: 0; top: 0; width: 52px; height: 52px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 2px solid #d5dbe4; background: #1c2029; transform-origin: 26px 26px; will-change: transform, opacity; visibility: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.32), 0 4px 14px rgba(0,0,0,.5); }
.lvd-wi img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lvd-wi.blank { background: radial-gradient(circle at 50% 35%, #3a404c, #15181f); }

/* The shutter: a thin chrome ring, the look inside it. */
.lvd-shut { position: absolute; left: calc(50% - 44px); top: 4px; width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; z-index: 2;
  display: grid; place-items: center;
  background: conic-gradient(from 210deg, #f7f9fc, #98a1b0, #ffffff, #8b94a4, #eef1f5, #a6aebb, #f7f9fc);
  box-shadow: 0 8px 22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 1px rgba(0,0,0,.45);
  transition: box-shadow .2s; }
.lvd-shut-in { position: relative; display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: #1a1d24;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); transition: transform .12s ease; }
.lvd-shut:active .lvd-shut-in { transform: scale(.92); }
.lvd-shut-in img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lvd-shut-in img:not([src]) { visibility: hidden; }
.lvd-shut-dot { display: none; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ff8b9d, #f0334f 58%, #a0112d);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.5); transition: border-radius .18s, width .18s, height .18s, margin .18s; }
.lvd.mode-video .lvd-shut-dot { display: block; }
.lvd.rec .lvd-shut { box-shadow: 0 8px 22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 3px var(--cherry), 0 0 26px 6px rgba(240,51,79,.55); }
.lvd.rec .lvd-shut-in { background: radial-gradient(circle at 50% 28%, #ff8b9d, #f0334f 58%, #a0112d); }
.lvd.rec .lvd-shut-in img { opacity: 0; }
.lvd.rec .lvd-shut-dot { display: block; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.lvd-shut.busy .lvd-shut-in::after { content: ''; position: absolute; inset: 22px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: lvd-spin .8s linear infinite; }
/* While a take runs the look holds still: no neighbours, no scale. */
.lvd.rec .lvd-wi, .lvd.rec .lvd-arc, .lvd.rec .lvd-all, .lvd.rec .lvd-step { visibility: hidden !important; }

/* ── the bottom row: last shot · photo/video · flip ─────────────────────── */
.lvd-bot { position: absolute; left: calc(var(--sl) + 6px); right: calc(var(--sr) + 6px); bottom: calc(var(--sb) + 10px); height: 52px; z-index: 9;
  display: flex; align-items: center; justify-content: space-between; }
.lvd-last { position: relative; width: 46px; height: 46px; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; flex: none;
  border: 2px solid #d5dbe4; background: #111; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.5); }
.lvd-last[hidden], .lvd-last-ghost[hidden] { display: none; }
.lvd-last img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lvd-last-vid { position: absolute; right: 4px; bottom: 4px; width: 0; height: 0;
  border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
.lvd-last-vid[hidden] { display: none; }
.lvd-last-ghost { width: 46px; height: 46px; flex: none; }
.lvd-slide { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; }
.lvd-sl-lab { font: 800 10px/1 Inter, -apple-system, sans-serif; letter-spacing: .1em; color: rgba(255,255,255,.62); transition: color .15s; }
.lvd-sl-lab.on { color: var(--sel); }
.lvd-sl-track { position: relative; flex: none; width: 48px; height: 26px; border-radius: 13px;
  background: linear-gradient(#aab2c0, #d6dbe4); box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.35); }
.lvd-sl-track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff, #cfd5df); box-shadow: 0 1px 3px rgba(0,0,0,.38);
  transition: left .2s cubic-bezier(0.34, 1.4, 0.55, 1); }
.lvd.mode-video .lvd-sl-track i { left: 25px; }
.lvd.rec [data-a="flip"] { visibility: hidden; }
.lvd.rec .lvd-slide, .lvd.rec .lvd-seg { opacity: .4; pointer-events: none; }

/* ── progress, flash, menu ──────────────────────────────────────────────── */
.lvd-busy { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgba(4,5,9,.42); }
.lvd-busy[hidden] { display: none; }
.lvd-busy-card { min-width: 240px; max-width: 100%; padding: 22px 24px 20px; border-radius: 22px; text-align: center;
  display: grid; justify-items: center; gap: 8px;
  background: rgba(16,18,27,.9); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
.lvd-busy-card b { font: 700 15px/1.3 Inter, -apple-system, sans-serif; }
.lvd-busy-card small { font: 500 12.5px/1.4 Inter, -apple-system, sans-serif; color: #b9c2dd; font-variant-numeric: tabular-nums; }
.lvd-busy-card small:empty { display: none; }
.lvd-spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.2); border-top-color: var(--sel); animation: lvd-spin .8s linear infinite; }
.lvd-flash { position: absolute; inset: 0; z-index: 25; background: #fff; opacity: 0; pointer-events: none; }
.lvd-flash.go { animation: lvd-flash .28s ease-out; }

.lvd-pop { position: absolute; top: calc(var(--st) + 52px); right: var(--sr); z-index: 40; min-width: 250px; max-width: calc(100% - 28px); padding: 6px;
  border-radius: 18px; background: rgba(16,18,27,.92); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
.lvd-pop[hidden] { display: none; }
.lvd-pop-i { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left;
  font: 600 14.5px/1.2 Inter, -apple-system, sans-serif; color: #f0f3fb; }
.lvd-pop-i:hover, .lvd-pop-i:active { background: rgba(255,255,255,.08); }
.lvd-pop-i svg { width: 18px; height: 18px; flex: none; color: #c6cff5; }
.lvd-pop-i em { margin-left: auto; padding-left: 8px; font: 500 11.5px/1 Inter, -apple-system, sans-serif; font-style: normal; color: #8b94b0; white-space: nowrap; }

/* ── every look, as a sheet ─────────────────────────────────────────────── */
.lvd-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 45; height: min(76%, 660px);
  display: flex; flex-direction: column; padding-bottom: var(--sb);
  border-radius: 26px 26px 0 0; background: rgba(12,14,20,.97); border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -20px 60px rgba(0,0,0,.6);
  transform: translateY(100%); transition: transform .32s cubic-bezier(0.34, 1.15, 0.55, 1); }
.lvd-sheet.open { transform: none; }
.lvd-sheet[hidden] { display: none; }
.lvd-sheet-grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 8px auto 2px; flex: none; }
.lvd-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 6px 20px; flex: none; }
.lvd-sheet-head b { font: 800 17px/1 Inter, -apple-system, sans-serif; }
.lvd-sheet-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); display: grid; place-items: center; cursor: pointer; }
.lvd-sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 0 16px 24px; }
.lvd-sheet-sec { margin: 16px 2px 10px; font: 800 10.5px/1 Inter, -apple-system, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8b94b0; }
.lvd-sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.lvd-sheet-i { display: grid; gap: 6px; justify-items: center; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.lvd-sheet-im { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #3a404c, #15181f);
  border: 2px solid rgba(213,219,228,.82); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.lvd-sheet-i.on .lvd-sheet-im { border-color: var(--sel); box-shadow: 0 0 0 3px rgba(255,107,134,.35); }
.lvd-sheet-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lvd-sheet-n { max-width: 100%; min-height: 2.3em; overflow: hidden; text-align: center; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font: 700 10px/1.15 Inter, -apple-system, sans-serif; letter-spacing: .04em; color: #dfe4f2; }

/* Black: no surface lighter than the ground, hairlines instead. */
html[data-theme="black"] .lvd-pop,
html[data-theme="black"] .lvd-busy-card { background: rgba(0,0,0,.94); border-color: rgba(255,255,255,.22); }
html[data-theme="black"] .lvd-sheet { background: #000; border-top-color: rgba(255,255,255,.22); }

/* ── on its side: the picture fits the screen, the controls float on it ─── */
@media (orientation: landscape) {
  .lvd-brand, .lvd-arc, .lvd-all { display: none; }
  .lvd-osd { top: calc(var(--st) + 100px); }
  .lvd-chip { top: calc(var(--st) + 54px); }
  .lvd-name { bottom: calc(var(--sb) + 100px); }
  .lvd-wheel { bottom: calc(var(--sb) + 4px); }
  .lvd-bot { position: static; }
  .lvd-last, .lvd-last-ghost { position: absolute; left: calc(var(--sl) + 6px); bottom: calc(var(--sb) + 28px); z-index: 9; }
  .lvd-bot [data-a="flip"] { position: absolute; right: calc(var(--sr) + 6px); bottom: calc(var(--sb) + 26px); z-index: 9; }
  .lvd-slide { position: absolute; right: calc(var(--sr) + 2px); top: calc(var(--st) + 52px); z-index: 9; }
  .lvd-ruler { top: 14%; }
  .lvd-flashbtn { top: calc(var(--st) + 98px); }
  .lvd-scrim-bot { height: calc(var(--sb) + 190px); }
}

/* ── cards and settings: ordinary UI, all three themes ──────────────────── */
.lvd-set, .lvd-card-ov {
  --c-ground: #f4f6fb; --c-card: #ffffff; --c-ink: #1c2a5e; --c-muted: #6f82c8; --c-line: rgba(28,42,94,.1);
  --c-sel: #d61f4d; --c-seg: #e9edf7; --c-seg-on: #2a3a5e; --c-seg-on-ink: #fff; --c-tog: #cdd4e6; --c-btn-line: rgba(28,42,94,.18);
  --c-cta: linear-gradient(120deg, #f0334f, #8e0e3a);
}
html[data-theme="dark"] .lvd-set, html[data-theme="dark"] .lvd-card-ov {
  --c-ground: #07080b; --c-card: #12151e; --c-ink: #f3f5fc; --c-muted: #b9c2dd; --c-line: rgba(255,255,255,.08);
  --c-sel: #ff6b86; --c-seg: #1c2130; --c-seg-on: #eef1fa; --c-seg-on-ink: #0b0d13; --c-tog: #2a3042; --c-btn-line: rgba(255,255,255,.2);
}
html[data-theme="black"] .lvd-set, html[data-theme="black"] .lvd-card-ov {
  --c-ground: #000; --c-card: rgba(255,255,255,.035); --c-ink: #fff; --c-muted: #cdd4e8; --c-line: rgba(255,255,255,.16);
  --c-sel: #ff6b86; --c-seg: #000; --c-seg-on: #f0f3ff; --c-seg-on-ink: #000; --c-tog: rgba(255,255,255,.2); --c-btn-line: rgba(255,255,255,.26);
}

.lvd-card-ov { position: fixed; inset: 0; z-index: 2147482300; display: grid; place-items: center; padding: 22px;
  background: rgba(4,5,9,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: 15px/1.4 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
.lvd-card-ov[hidden] { display: none; }
.lvd-card { width: min(380px, 100%); max-height: calc(100% - 20px); overflow-y: auto; padding: 26px 22px 18px; border-radius: 28px; text-align: center;
  background: var(--c-card); color: var(--c-ink); border: 1px solid var(--c-line);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  animation: lvd-pop-in .32s cubic-bezier(0.34, 1.4, 0.55, 1); }
html[data-theme="black"] .lvd-card { background: #000; }
.lvd-card-mk { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--c-ink); }
.lvd-card-mk svg { width: 40px; height: 40px; display: block; }
.lvd-card h4 { margin: 0 0 8px; font: 800 21px/1.25 Inter, -apple-system, sans-serif; letter-spacing: -.01em; text-wrap: balance; }
.lvd-card p { margin: 0 0 20px; font: 500 14.5px/1.45 Inter, -apple-system, sans-serif; color: var(--c-muted); }
.lvd-btn-p, .lvd-btn-g { display: block; width: 100%; border-radius: 999px; cursor: pointer; font-family: Inter, -apple-system, sans-serif; }
.lvd-btn-p { height: 52px; border: 0; color: #fff; font-size: 15.5px; font-weight: 700; background: var(--c-cta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px rgba(190,20,60,.45); transition: transform .12s, box-shadow .12s; }
.lvd-btn-p:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px rgba(190,20,60,.5); }
.lvd-btn-p:active { transform: scale(.97); }
.lvd-btn-g { height: 48px; margin-top: 10px; border: 1px solid var(--c-btn-line); background: transparent; color: var(--c-ink); font-size: 14.5px; font-weight: 600; }
.lvd-card-where { margin-top: 16px; font: 500 12.5px/1.4 Inter, -apple-system, sans-serif; color: var(--c-muted); }
.lvd-card-where b { color: var(--c-ink); font-weight: 700; }
.lvd-help { display: grid; gap: 0; margin: 12px 0 14px; text-align: left; border-radius: 16px; border: 1px solid var(--c-line); overflow: hidden; }
.lvd-help-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; padding: 11px 14px; font-size: 13.5px; line-height: 1.35; }
.lvd-help-r + .lvd-help-r { border-top: 1px solid var(--c-line); }
.lvd-help-r b { font-weight: 700; }
.lvd-help-r span { color: var(--c-muted); }
.lvd-help-n { font-size: 13px !important; margin-bottom: 8px !important; }

.lvd-set { position: fixed; inset: 0; z-index: 2147482200; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(16px, env(safe-area-inset-left, 0px));
  background: var(--c-ground); color: var(--c-ink);
  font: 15px/1.4 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  transform: translateX(24px); opacity: 0; transition: transform .26s cubic-bezier(0.34, 1.15, 0.55, 1), opacity .18s; }
.lvd-set.open { transform: none; opacity: 1; }
.lvd-set[hidden] { display: none; }
.lvd-s-head { position: sticky; top: 0; z-index: 1; height: 50px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--c-ground); max-width: 560px; margin: 0 auto; }
.lvd-s-head b { font: 800 17px/1 Inter, -apple-system, sans-serif; }
.lvd-s-back { justify-self: start; height: 40px; padding: 0 8px 0 0; border: 0; background: none; cursor: pointer; font: 600 15px/1 Inter, -apple-system, sans-serif; color: var(--c-sel); }
.lvd-s-body { max-width: 560px; margin: 0 auto; }
.lvd-s-sec { margin: 18px 6px 8px; font: 800 10.5px/1 Inter, -apple-system, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.lvd-s-group { border-radius: 18px; background: var(--c-card); border: 1px solid var(--c-line); overflow: hidden; margin-bottom: 12px; }
.lvd-s-row { min-height: 54px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 16px; }
.lvd-s-row + .lvd-s-row { border-top: 1px solid var(--c-line); }
.lvd-s-row.col { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 15px; }
.lvd-s-row.link { cursor: pointer; }
.lvd-s-row.link:active { background: var(--c-line); }
.lvd-s-l { font: 600 15px/1.25 Inter, -apple-system, sans-serif; }
.lvd-s-hint { flex-basis: 100%; font: 500 12.5px/1.4 Inter, -apple-system, sans-serif; color: var(--c-muted); }
.lvd-s-row.col .lvd-s-hint { flex-basis: auto; }
.lvd-s-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--c-seg); border: 1px solid var(--c-line); }
.lvd-s-seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer; white-space: nowrap;
  font: 700 12px/1 Inter, -apple-system, sans-serif; color: var(--c-muted); }
.lvd-s-seg button.on { background: var(--c-seg-on); color: var(--c-seg-on-ink); }
.lvd-s-seg button:disabled { opacity: .4; cursor: default; }
.lvd-s-seg.wide { display: grid; grid-template-columns: 1fr 1fr; }
.lvd-s-seg.wide button { height: 40px; font-size: 14px; }
.lvd-s-tog { position: relative; flex: none; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 16px; background: var(--c-tog); cursor: pointer; transition: background .2s; }
.lvd-s-tog i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3);
  transition: left .22s cubic-bezier(0.34, 1.4, 0.55, 1); }
.lvd-s-tog.on { background: var(--c-cta); }
.lvd-s-tog.on i { left: 22px; }
.lvd-s-chev { display: grid; place-items: center; color: var(--c-muted); }
.lvd-s-foot { margin-top: 8px; text-align: center; font: 800 10px/1 Inter, -apple-system, sans-serif; letter-spacing: .22em; color: var(--c-muted); opacity: .7; }
.lvd-set button:focus-visible, .lvd-card button:focus-visible, .lvd-s-row.link:focus-visible { outline: 2px solid var(--c-sel); outline-offset: 2px; }

@keyframes lvd-spin { to { transform: rotate(360deg); } }
@keyframes lvd-flash { from { opacity: .85; } to { opacity: 0; } }
@keyframes lvd-blink { to { opacity: .25; } }
@keyframes lvd-pop-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .lvd *, .lvd-set, .lvd-card { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}