:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #090e1b;
  --surface: #111a2c;
  --surface-raised: #172237;
  --ink: #edf3ff;
  --muted: #97a7bf;
  --subtle: #7d8fa9;
  --line: #25324a;
  --accent: #64e6e3;
  --purple: #b3a0ff;
  --amber: #f0c278;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--bg); isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 10% 10%, #123b5438, transparent 53%), radial-gradient(ellipse at 93% 40%, #3d286330, transparent 48%), linear-gradient(#7999c506 1px, transparent 1px), linear-gradient(90deg, #7999c506 1px, transparent 1px); background-size: auto, auto, 48px 48px, 48px 48px; }
button, input { font: inherit; }
button { color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-shell { width: min(1160px, calc(100% - 80px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.topbar { height: 88px; flex: 0 0 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--accent); background: #64e6e312; border: 1px solid #64e6e345; border-radius: 11px; box-shadow: inset 0 0 16px #64e6e309, 0 0 24px #64e6e30b; }
.brand-mark svg { width: 22px; height: 22px; stroke-width: 2; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.live-date { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.live-dot, .status-pill > span { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px #64e6e360; }
.live-dot { animation: signal-pulse 3s ease-in-out infinite; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #111a2cb3; color: var(--muted); transition: color .2s, border-color .2s, background .2s, transform .2s; }
.icon-button:hover { color: var(--accent); background: #64e6e30c; border-color: #64e6e350; transform: translateY(-1px); }
.icon-button svg { width: 18px; height: 18px; }
main { flex: 1; display: flex; min-width: 0; }
.footer { min-height: 64px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--subtle); font-size: 11px; }
.footer-separator { color: #495c79; }

.setup-screen { width: 100%; min-height: 650px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; padding: 64px 20px 80px; }
.setup-copy { max-width: 560px; animation: panel-arrive .6s both; }
.setup-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; }
.sparkle { font-size: 18px; }
.setup-copy h1 { margin: 26px 0 22px; font-size: clamp(36px, 4vw, 51px); line-height: 1.4; font-weight: 700; letter-spacing: -1px; }
.setup-copy h1 span { color: var(--accent); text-shadow: 0 0 40px #64e6e326; }
.setup-copy > p { max-width: 440px; margin: 0; color: var(--muted); font-size: 15px; line-height: 2; }
.primary-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 22px; border: 1px solid #91ffff80; border-radius: 9px; color: #08212c; background: var(--accent); font-size: 13px; font-weight: 700; box-shadow: 0 4px 24px #64e6e316; transition: transform .2s, box-shadow .2s, background .2s; }
.primary-button:hover { background: #8af3ee; transform: translateY(-2px); box-shadow: 0 6px 30px #64e6e32b; }
.primary-button:active { transform: translateY(0); }
.primary-button svg { width: 17px; height: 17px; stroke-width: 2; }
.setup-cta { margin-top: 32px; }
.privacy-note { display: flex; align-items: center; gap: 7px; margin-top: 24px; color: var(--subtle); font-size: 12px; }
.privacy-note svg { width: 14px; height: 14px; }
.setup-art { min-height: 380px; position: relative; display: flex; align-items: center; justify-content: center; animation: panel-arrive .7s .1s both; }
.setup-art::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 1px solid #64e6e319; box-shadow: 0 0 0 30px #64e6e305, 0 0 0 70px #b3a0ff03; pointer-events: none; }
.desk-card { position: relative; width: min(360px, 94%); min-height: 240px; padding: 26px; border: 1px solid #537c9550; border-radius: 16px; background: linear-gradient(140deg, #17283c, #111929); box-shadow: 0 24px 70px #0000004d, inset 0 1px #a0caff14; animation: gentle-float 9s ease-in-out infinite; }
.desk-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.mini-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px #64e6e366; animation: signal-pulse 3s ease-in-out infinite; }
.fake-amount { margin-top: 24px; color: var(--accent); font: 16px var(--mono); }
.fake-amount span { margin-left: 5px; color: #e5ffff; font-size: 43px; }
.fake-label { margin-top: 8px; color: var(--subtle); font-size: 11px; }
.fake-line { height: 5px; margin-top: 27px; overflow: hidden; border-radius: 8px; background: #27364b; }
.fake-line i { display: block; width: 62%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4393e8, var(--accent)); }
.fake-bottom { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); font: 11px var(--mono); }
.sticker { position: absolute; display: grid; place-items: center; border: 1px solid #7b90b84a; background: #19253b; box-shadow: 0 6px 30px #0005; }
.sticker-sun { width: 44px; height: 44px; top: 37px; right: 20px; border-radius: 12px; color: var(--purple); font-size: 23px; transform: rotate(10deg); }
.sticker-check { width: 35px; height: 35px; left: 6px; bottom: 67px; border-radius: 10px; color: var(--accent); font-size: 17px; font-weight: 700; transform: rotate(-8deg); }
.art-caption { position: absolute; right: 7px; bottom: 10px; color: var(--muted); font-size: 12px; line-height: 1.8; }

.dashboard { width: 100%; padding: 58px 0 60px; }
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; animation: panel-arrive .5s both; }
.eyebrow { margin: 0; color: var(--subtle); font-size: 12px; font-weight: 500; letter-spacing: .5px; }
.dashboard-heading h1 { margin: 14px 0 0; font-size: 28px; line-height: 1.5; font-weight: 600; letter-spacing: -.4px; }
.secondary-button { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid #34425c; border-radius: 9px; background: #152035; color: #c2d0e6; font-size: 12px; font-weight: 500; transition: border-color .2s, color .2s, transform .2s, background .2s; }
.secondary-button:hover { border-color: #64e6e360; color: var(--accent); background: #172c3a; transform: translateY(-1px); }
.secondary-button svg { width: 15px; height: 15px; }
.dashboard-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 20px; }
.earnings-panel, .countdown-panel { min-width: 0; min-height: 376px; position: relative; border: 1px solid #2c4059; border-radius: 17px; box-shadow: 0 16px 48px #0000001f, inset 0 1px #a0caff09; }
.earnings-panel { padding: 28px 30px 26px; background: linear-gradient(130deg, #14263a 0%, #111c2e 60%, #111a2b 100%); animation: panel-arrive .6s .06s both; }
.earnings-panel::before { content: ""; position: absolute; top: -1px; left: 30px; width: 80px; height: 1px; background: var(--accent); box-shadow: 0 0 18px #64e6e37a; }
.panel-meta { display: flex; align-items: center; justify-content: space-between; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 10px; border: 1px solid #64e6e32b; border-radius: 6px; color: var(--accent); background: #64e6e30a; font-size: 11px; font-weight: 500; }
.status-pill.status-working > span { animation: signal-pulse 2.8s ease-in-out infinite; }
.status-pill.status-lunch { color: var(--amber); border-color: #f0c27835; background: #f0c2780c; }
.status-pill.status-lunch > span { background: var(--amber); box-shadow: none; }
.status-pill.status-rest { color: #b3c0d2; border-color: #97a7bf35; background: #97a7bf0c; }
.status-pill.status-rest > span { background: #97a7bf; box-shadow: none; }
.panel-date { color: var(--subtle); font-size: 11px; letter-spacing: 1px; }
.earnings-label { margin-top: 31px; color: var(--muted); font-size: 13px; }
.earnings-amount { min-height: 92px; display: flex; align-items: center; gap: 8px; margin-top: 7px; color: #b5fff5; font: 500 clamp(40px, 4.8vw, 64px)/1.3 var(--mono); letter-spacing: -2px; font-variant-numeric: tabular-nums; text-shadow: 0 0 32px #64e6e31f; }
.currency { align-self: flex-start; margin-top: 20px; color: var(--accent); font: 400 23px/1 var(--mono); }
.rate-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; color: var(--muted); font-size: 11px; }
.rate-symbol { width: 14px; height: 14px; color: var(--accent); }
.rate-unit { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rate-unit + .rate-unit { border-left: 1px solid #35465f; padding-left: 8px; }
.work-progress { margin-top: 34px; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--muted); font-size: 11px; }
.progress-copy span:last-child { color: var(--accent); font-family: var(--mono); }
.progress-track { height: 5px; overflow: hidden; border-radius: 8px; background: #25364b; }
.progress-track > span { position: relative; height: 100%; display: block; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, #468fdc, #64e6e3); transition: width .7s ease; }
.earnings-panel:has(.status-working) .progress-track > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, #fff9 50%, transparent 100%); transform: translateX(-100%); animation: progress-sweep 4.5s ease-in-out infinite; }
.schedule-line { display: flex; align-items: center; gap: 10px; margin-top: 17px; color: var(--muted); font: 11px var(--mono); }
.schedule-line > span:not(.schedule-rule) { white-space: nowrap; }
.schedule-rule { height: 1px; flex: 1; background: #2a3a52; }
.schedule-dot { width: 5px; height: 5px; display: inline-block; margin-right: 6px; vertical-align: 1px; border-radius: 50%; }
.start-dot { background: var(--accent); }
.end-dot { background: var(--purple); }
.countdown-panel { display: flex; flex-direction: column; padding: 28px 30px 23px; overflow: hidden; background: linear-gradient(145deg, #1e233e 0%, #171d32 70%); border-color: #3b3c5d; animation: panel-arrive .6s .14s both; }
.countdown-panel::before, .countdown-panel::after { content: ""; position: absolute; width: 280px; height: 280px; right: -110px; top: -135px; border: 1px solid #b3a0ff16; border-radius: 50%; pointer-events: none; }
.countdown-panel::before { width: 330px; height: 330px; right: -135px; top: -160px; border-style: dashed; border-color: #b3a0ff20; animation: orbit-turn 75s linear infinite; }
.countdown-panel::after { box-shadow: 0 0 0 26px #b3a0ff04, 0 0 0 52px #b3a0ff03; }
.countdown-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; color: #c0bddc; font-size: 12px; }
.countdown-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #b3a0ff30; border-radius: 9px; color: var(--purple); background: #b3a0ff0b; }
.countdown-icon svg { width: 17px; height: 17px; }
.countdown-digits { display: flex; align-items: center; gap: 8px; position: relative; margin-top: 31px; color: #f1edff; font: 400 52px/1.2 var(--mono); letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.countdown-digits > span { min-width: 68px; text-align: center; }
.countdown-digits i { width: 14px; color: #736c99; font-size: 29px; font-style: normal; text-align: center; }
.countdown-digits > span:last-child { color: var(--purple); }
.countdown-units { display: grid; grid-template-columns: repeat(3, 68px); column-gap: 30px; margin-top: 9px; color: #9b96b6; text-align: center; font-size: 10px; }
.countdown-finished { position: relative; display: flex; flex: 1; align-items: center; min-height: 143px; white-space: pre-line; margin: 20px 0 14px; color: #dbd2ff; font-size: 32px; line-height: 1.55; font-weight: 500; letter-spacing: 1px; }
.quote-box { position: relative; z-index: 1; min-height: 70px; display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px; border: 1px solid #b3a0ff24; border-radius: 9px; background: #b3a0ff07; }
.quote-mark { align-self: flex-start; color: var(--purple); font: 700 30px/1 Georgia, serif; }
.quote-box p { margin: 0; color: #c9c5df; font-size: 12px; line-height: 1.9; }
.quote-credit { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; color: #958fac; font-size: 10px; }
.quote-star { color: var(--purple); }
.status-lunch.countdown-panel { background: linear-gradient(140deg, #302c30, #1c202e); border-color: #5b4c3d; }
.status-lunch .countdown-icon { color: var(--amber); }
.status-rest.countdown-panel { background: linear-gradient(140deg, #1d2438, #171d2e); }
.details-strip { min-height: 106px; display: flex; align-items: center; gap: 28px; margin-top: 20px; padding: 23px 28px; border: 1px solid var(--line); border-radius: 14px; background: #111a2ce0; animation: panel-arrive .6s .22s both; }
.detail-item { display: flex; align-items: center; gap: 13px; min-width: 152px; }
.detail-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 10px; }
.detail-icon svg { width: 18px; height: 18px; }
.icon-mint { color: #64e6e3; background: #64e6e30a; border-color: #64e6e324; }
.icon-yellow { color: #b3a0ff; background: #b3a0ff0a; border-color: #b3a0ff24; }
.icon-coral { color: #7faaff; background: #7faaff0a; border-color: #7faaff24; }
.detail-copy { display: flex; flex-direction: column; gap: 8px; }
.detail-label { color: var(--muted); font-size: 11px; }
.detail-copy strong { color: #d3dff2; font: 500 13px var(--mono); white-space: nowrap; }
.detail-separator { width: 1px; height: 37px; background: var(--line); }
.detail-trailing { margin-left: auto; color: var(--subtle); text-align: right; font-size: 11px; line-height: 1.9; }

.settings-dialog { width: min(490px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; overflow: auto; border: 1px solid #455978; border-radius: 17px; background: #111b2d; color: var(--ink); box-shadow: 0 32px 120px #000a, 0 0 60px #4e83a50d, inset 0 1px #9ed6ff17; scrollbar-width: thin; scrollbar-color: #405575 #111b2d; }
.settings-dialog[open] { animation: dialog-arrive .25s ease-out both; }
.settings-dialog::backdrop { background: #030816bb; backdrop-filter: blur(8px); }
.settings-form { padding: 29px 30px 26px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 25px; }
.dialog-heading h2 { margin: 9px 0 0; font-size: 22px; font-weight: 600; }
.dialog-heading .eyebrow { color: var(--accent); font-size: 11px; }
.close-button { width: 32px; height: 32px; background: transparent; border-color: transparent; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 9px; color: #becbe0; font-size: 12px; font-weight: 500; }
.field input[type="time"], .money-input { width: 100%; height: 44px; border: 1px solid #33445e; border-radius: 8px; background: #0b1424; color: #e1ecfc; font-size: 14px; font-weight: 400; transition: border-color .2s, box-shadow .2s; }
.field input[type="time"] { padding: 0 11px; font-family: var(--mono); }
.field input[type="time"]:focus, .money-input:focus-within { border-color: #64e6e3a6; outline: none; box-shadow: 0 0 0 3px #64e6e30d; }
.field-wide { grid-column: 1 / -1; }
.money-input { display: flex; align-items: center; gap: 9px; padding: 0 12px; }
.money-input > span { color: var(--accent); font: 14px var(--mono); }
.money-input input { width: 100%; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; color: #e1ecfc; font: 14px var(--mono); }
.money-input input::placeholder { color: #7486a1; }
.income-type { margin: 0; padding: 0; border: 0; }
.income-type legend { margin-bottom: 9px; color: #becbe0; font-size: 12px; font-weight: 500; }
.segmented-control { width: fit-content; display: inline-flex; padding: 4px; border: 1px solid #33445e; border-radius: 9px; background: #0b1424; }
.segmented-control label { position: relative; cursor: pointer; }
.segmented-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented-control span { min-width: 103px; min-height: 33px; display: grid; place-items: center; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; color: #94a4bd; font-size: 12px; font-weight: 500; transition: color .2s, background .2s, border-color .2s; }
.segmented-control input:checked + span { color: var(--accent); border-color: #64e6e335; background: #64e6e311; box-shadow: 0 0 14px #64e6e305; }
.segmented-control input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rest-description { margin: 0; color: var(--subtle); font-size: 11px; font-weight: 400; line-height: 1.7; }
.rest-control { width: 100%; }
.rest-control label { flex: 1; }
.rest-control span { min-width: 0; }
.form-note { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 0; color: var(--subtle); font-size: 11px; line-height: 1.8; }
.form-note svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 3px; }
.form-error { min-height: 17px; margin: 9px 0 0; color: #ffa69b; font-size: 11px; line-height: 1.6; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.form-actions .primary-button { min-height: 44px; margin-left: auto; font-size: 12px; }
.text-button { padding: 5px 0; border: 0; background: transparent; color: #e49b9b; font-size: 11px; }
.text-button:hover { color: #ffc4bd; text-decoration: underline; }
[hidden] { display: none !important; }

@keyframes panel-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes signal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes progress-sweep { 0%, 15% { transform: translateX(-110%); } 65%, 100% { transform: translateX(110%); } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes gentle-float { 0%, 100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }

@media (max-width: 1000px) and (min-width: 761px) {
  .page-shell { width: calc(100% - 48px); }
  .earnings-panel, .countdown-panel { padding-left: 22px; padding-right: 22px; }
  .countdown-digits { font-size: 40px; gap: 5px; }
  .countdown-digits > span { min-width: 53px; }
  .countdown-digits i { width: 12px; font-size: 25px; }
  .countdown-units { grid-template-columns: repeat(3, 53px); column-gap: 22px; }
  .details-strip { gap: 17px; padding: 22px; }
  .detail-item { min-width: 0; gap: 9px; }
  .detail-copy strong { font-size: 11px; }
  .detail-trailing { font-size: 10px; }
}
@media (max-width: 760px) {
  .page-shell { width: min(calc(100% - 36px), 560px); }
  .topbar { height: 74px; flex-basis: 74px; }
  .brand { font-size: 15px; gap: 9px; letter-spacing: .5px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
  .topbar-right { gap: 12px; }
  .live-date { font-size: 10px; gap: 7px; }
  .icon-button { width: 33px; height: 33px; }
  .setup-screen { min-height: 0; grid-template-columns: 1fr; gap: 20px; padding: 48px 4px 42px; }
  .setup-copy h1 { font-size: 37px; line-height: 1.45; }
  .setup-copy > p { font-size: 14px; }
  .setup-art { min-height: 300px; }
  .setup-art::before { width: 250px; height: 250px; }
  .desk-card { width: 87%; padding: 24px; }
  .sticker-sun { top: 4px; right: 15px; }
  .sticker-check { left: 2px; bottom: 35px; }
  .art-caption { right: 4px; bottom: -14px; }
  .dashboard { padding: 36px 0 38px; }
  .dashboard-heading { align-items: flex-start; gap: 12px; margin-bottom: 23px; }
  .dashboard-heading h1 { margin-top: 11px; font-size: 21px; line-height: 1.6; }
  .dashboard-heading .eyebrow { font-size: 10px; line-height: 1.7; }
  .edit-button { min-height: 35px; padding: 0 10px; white-space: nowrap; font-size: 10px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 15px; }
  .earnings-panel { min-height: 338px; padding: 23px 24px; }
  .earnings-label { margin-top: 27px; font-size: 12px; }
  .earnings-amount { min-height: 83px; font-size: 51px; }
  .currency { margin-top: 18px; font-size: 20px; }
  .work-progress { margin-top: 28px; }
  .countdown-panel { min-height: 300px; padding: 23px 24px 20px; }
  .countdown-digits { margin-top: 22px; font-size: 47px; }
  .countdown-digits > span { min-width: 62px; }
  .countdown-units { grid-template-columns: repeat(3, 62px); }
  .countdown-finished { min-height: 128px; margin-top: 12px; font-size: 29px; }
  .quote-box { min-height: 63px; margin-top: 23px; }
  .details-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 13px; min-height: 0; padding: 23px 20px; margin-top: 15px; }
  .detail-item { min-width: 0; gap: 9px; }
  .detail-icon { width: 33px; height: 33px; flex-basis: 33px; border-radius: 9px; }
  .detail-icon svg { width: 16px; height: 16px; }
  .detail-copy { gap: 7px; }
  .detail-copy strong { font-size: 10px; }
  .detail-label { font-size: 10px; }
  .detail-separator { display: none; }
  .detail-trailing { margin: 0; text-align: left; font-size: 10px; }
  .footer { min-height: 54px; font-size: 10px; gap: 8px; }
  .settings-form { padding: 25px 23px 23px; }
}
@media (max-width: 380px) {
  .page-shell { width: calc(100% - 28px); }
  .brand { font-size: 14px; }
  .topbar-right { gap: 9px; }
  .live-dot { display: none; }
  .setup-copy h1 { font-size: 31px; }
  .dashboard-heading h1 { font-size: 18px; }
  .earnings-panel, .countdown-panel { padding-left: 20px; padding-right: 20px; }
  .earnings-amount { font-size: 43px; }
  .rate-unit + .rate-unit { border-left: 0; padding-left: 0; }
  .countdown-digits { font-size: 39px; gap: 6px; }
  .countdown-digits > span { min-width: 52px; }
  .countdown-digits i { width: 12px; font-size: 25px; }
  .countdown-units { grid-template-columns: repeat(3, 52px); column-gap: 24px; }
  .details-strip { padding: 19px 15px; gap: 20px 10px; }
  .detail-icon { width: 29px; height: 29px; flex-basis: 29px; }
  .detail-item { gap: 6px; }
  .detail-copy strong { font-size: 9px; }
  .detail-label, .detail-trailing { font-size: 9px; }
  .settings-form { padding: 23px 20px; }
  .segmented-control span { min-width: 94px; font-size: 11px; }
  .rest-control span { min-width: 0; }
}
.earnings-amount.large-amount { font-size: clamp(22px, 4vw, 38px); letter-spacing: -1px; }
html[data-page-hidden="true"] *, html[data-page-hidden="true"] *::before, html[data-page-hidden="true"] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Companion widgets share the dashboard's surfaces and accent palette. */
.companion-section { margin-top: 32px; }
.companion-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.companion-heading h2 { margin: 0; color: #dce7f8; font-size: 18px; font-weight: 600; letter-spacing: .4px; }
.companion-heading > span { color: var(--subtle); font-size: 11px; }
.widgets-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.widget-card { min-width: 0; min-height: 316px; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #111b2de8; box-shadow: inset 0 1px #a0caff07; }
.widget-heading { min-height: 30px; display: flex; align-items: center; gap: 9px; }
.widget-heading h3 { margin: 0; color: #dce7f8; font-size: 14px; font-weight: 500; white-space: nowrap; }
.widget-icon { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid #64e6e326; border-radius: 8px; color: var(--accent); background: #64e6e309; }
.widget-icon svg { width: 16px; height: 16px; }
.radar-widget .widget-icon { color: var(--purple); border-color: #b3a0ff2b; background: #b3a0ff09; }
.supply-widget .widget-icon { color: var(--amber); border-color: #f0c2782b; background: #f0c27809; }
.lottery-widget .widget-icon { color: #f4a6c8; border-color: #f4a6c82b; background: #f4a6c809; }
.widget-icon-button { width: 30px; height: 32px; flex: 0 0 30px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; transition: color .2s, border-color .2s, background .2s; }
.widget-icon-button svg { width: 15px; height: 15px; }
.widget-heading > .widget-icon-button { margin-left: auto; }
.widget-icon-button:hover { color: var(--accent); border-color: #64e6e332; background: #64e6e309; }
.widget-intro { min-height: 18px; margin: 12px 0 17px; color: var(--subtle); font-size: 11px; line-height: 1.7; }
.widget-tabs { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #2b3b53; border-radius: 7px; background: #0c1525; }
.widget-tabs button { flex: 1; min-width: 0; min-height: 29px; padding: 0 4px; border: 1px solid transparent; border-radius: 5px; color: var(--muted); background: transparent; font-size: 10px; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.widget-tabs button[aria-pressed="true"] { border-color: #64e6e330; color: var(--accent); background: #64e6e30d; }
.widget-tabs button:hover { color: #d9f9ff; background: #64e6e308; }
.reward-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; min-height: 49px; margin-top: 20px; }
#reward-quantity { min-width: 0; color: #b5fff5; font: 400 37px/1.2 var(--mono); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
#reward-unit { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.reward-value.long-value #reward-quantity { font-size: 25px; letter-spacing: -1px; }
.widget-detail { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.widget-progress { height: 4px; overflow: hidden; border-radius: 5px; margin-top: 20px; background: #28394e; }
.widget-progress > span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #4995dc, #64e6e3); transition: width .7s ease; }
.widget-bottom-note { margin: auto 0 0; padding-top: 13px; color: var(--subtle); font-size: 10px; line-height: 1.8; }
.widget-signal { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--purple); box-shadow: 0 0 8px #b3a0ff50; }
.radar-countdown { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 17px; }
.radar-countdown > span { display: inline-flex; align-items: baseline; gap: 4px; }
.radar-countdown strong { color: #dbd0ff; font: 400 28px/1.4 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.radar-countdown small { color: var(--muted); font-size: 10px; }
.radar-widget .widget-detail { min-height: 20px; margin-top: 11px; font-size: 10px; }
.radar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 21px; }
.radar-day { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 7px 0 5px; border: 1px solid transparent; border-radius: 6px; color: var(--subtle); }
.radar-day > span { font-size: 9px; }
.radar-day strong { font: 400 11px var(--mono); }
.radar-day > i { width: 3px; height: 3px; border-radius: 50%; background: #465670; }
.radar-day.today { border-color: #567092; }
.radar-day.rest-day { color: #c9baff; background: #b3a0ff0e; }
.radar-day.rest-day > i { background: var(--purple); box-shadow: 0 0 5px #b3a0ff5a; }
.task-duration { margin-left: auto; color: #c3ad82; font: 10px var(--mono); white-space: nowrap; }
.supply-task-name { min-height: 49px; margin: 0; color: #e2d7bf; font-size: 16px; line-height: 1.65; font-weight: 500; }
.supply-description { min-height: 42px; margin: 8px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.supply-actions { display: flex; align-items: center; gap: 10px; }
.widget-action-button { min-height: 35px; display: inline-flex; justify-content: center; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #64e6e335; border-radius: 7px; color: var(--accent); background: #64e6e30c; font-size: 11px; font-weight: 500; transition: border-color .2s, background .2s, transform .2s; }
.widget-action-button svg { width: 15px; height: 15px; }
.widget-action-button:hover:not(:disabled) { transform: translateY(-1px); border-color: #64e6e37a; background: #64e6e318; }
.widget-action-button:disabled { cursor: default; color: #9bc6bd; border-color: #80a79d30; background: #80a79d09; }
.supply-actions > .widget-icon-button { border-color: #33445b; background: #172238; min-height: 35px; flex-basis: 35px; }
.supply-pips { display: flex; gap: 5px; padding: 0; margin: 21px 0 0; list-style: none; }
.supply-pips li { flex: 1; height: 4px; border-radius: 5px; background: #2b384d; }
.supply-pips li.completed { background: #80d0b4; box-shadow: 0 0 8px #80d0b41c; }
.task-completed .supply-task-name { color: #b1e6d1; }
.lottery-tabs button[aria-pressed="true"] { color: #f2b5d1; border-color: #f4a6c835; background: #f4a6c80e; }
.lottery-balls { display: flex; gap: 5px; margin-top: 24px; }
.lottery-ball { flex: 1; min-width: 0; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #e996b440; border-radius: 50%; color: #f4adc8; background: #ed83aa12; font: 500 12px var(--mono); font-variant-numeric: tabular-nums; }
.lottery-ball.extra-ball { color: #85d6ff; border-color: #72b8f147; background: #72b8f112; }
.lottery-balls[data-kind="dlt"] .main-ball { color: #c6b3ff; border-color: #b3a0ff40; background: #b3a0ff12; }
.lottery-ball.empty-ball { color: #78879e; border-color: #34445e; border-style: dashed; background: transparent; }
.lottery-rule { margin: 13px 0 17px; color: var(--subtle); font-size: 10px; line-height: 1.8; }
.lottery-generate { align-self: flex-start; color: #f1bbd1; border-color: #f4a6c838; background: #f4a6c80b; }
.lottery-generate:hover:not(:disabled) { border-color: #f4a6c878; background: #f4a6c817; }
.widget-feedback { margin: 14px 0 0; color: #f0c278; font-size: 12px; }
.widget-feedback:empty { display: none; }
.widget-input { width: 100%; height: 44px; padding: 0 11px; border: 1px solid #33445e; border-radius: 8px; background: #0b1424; color: #e1ecfc; font-size: 14px; outline: 0; }
.widget-input:focus { border-color: #64e6e3a6; box-shadow: 0 0 0 3px #64e6e30d; }
.widget-input::placeholder { color: #7486a1; }
.reward-dialog { max-width: 460px; }
.reward-dialog .form-error { margin-top: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1100px) {
  .widgets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget-card { min-height: 312px; padding: 23px; }
  .lottery-balls { max-width: 290px; }
  .radar-countdown { max-width: 260px; }
}
@media (max-width: 600px) {
  .companion-section { margin-top: 28px; }
  .companion-heading { margin-bottom: 15px; gap: 10px; }
  .companion-heading h2 { font-size: 17px; }
  .companion-heading > span { font-size: 10px; }
  .widgets-grid { grid-template-columns: 1fr; gap: 15px; }
  .widget-card { min-height: 285px; padding: 22px; }
  .widget-heading h3 { font-size: 15px; }
  .widget-intro { font-size: 12px; margin-bottom: 17px; }
  .widget-tabs button { font-size: 11px; min-height: 31px; }
  .reward-value { margin-top: 21px; }
  .widget-detail, .widget-bottom-note, .radar-widget .widget-detail { font-size: 11px; }
  .radar-countdown { margin-top: 8px; }
  .radar-countdown strong { font-size: 31px; }
  .radar-week { margin-top: 16px; gap: 7px; }
  .radar-day > span { font-size: 10px; }
  .radar-day strong { font-size: 12px; }
  .supply-task-name { min-height: 0; font-size: 17px; }
  .supply-description { min-height: 0; font-size: 12px; margin-bottom: 21px; }
  .widget-action-button { min-height: 38px; font-size: 12px; }
  .supply-actions > .widget-icon-button { min-height: 38px; flex-basis: 38px; }
  .lottery-balls { max-width: none; margin-top: 22px; gap: 7px; }
  .lottery-ball { font-size: 14px; }
  .lottery-rule { font-size: 11px; }
}
@media (max-width: 380px) {
  .widget-card { padding: 20px; }
  .lottery-balls { gap: 5px; }
  .lottery-ball { font-size: 12px; }
  .radar-week { gap: 4px; }
}