:root {
  color-scheme: light;
  --ink: #2f3331;
  --muted: #7a807b;
  --quiet: #a4aaa5;
  --line: rgba(69, 78, 72, 0.14);
  --line-strong: rgba(69, 78, 72, 0.24);
  --surface: rgba(255, 255, 255, 0.74);
  --surface-solid: #fbfaf6;
  --wash: #edf0ea;
  --sage: #9aa897;
  --eucalyptus: #6e8378;
  --clay: #b99b8d;
  --taupe: #b7aea3;
  --mauve: #aa9aa4;
  --graphite: #3c4140;
  --danger: #9f5f5a;
  --success: #6e8f79;
  --shadow: 0 24px 68px rgba(60, 65, 64, 0.22);
  --soft-shadow: 0 12px 32px rgba(60, 65, 64, 0.12);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: #dfe5dc; }
body { margin: 0; min-height: 100%; color: var(--ink); background: radial-gradient(circle at 20% -10%, rgba(185,155,141,.28), transparent 24rem), radial-gradient(circle at 110% 8%, rgba(154,168,151,.22), transparent 22rem), linear-gradient(145deg, #f8f7f2 0%, #e7ece5 48%, #d6ddd6 100%); -webkit-font-smoothing: antialiased; letter-spacing: 0; }
button, input, textarea, select { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
.app-shell { width: min(100%, 430px); min-height: 100dvh; margin: 0 auto; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(69,82,76,.96) 0 218px, rgba(237,240,234,0) 218px), var(--wash); box-shadow: var(--shadow); }
.app-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(90deg, rgba(255,255,255,.18), transparent 18%, transparent 82%, rgba(48,55,52,.08)); }
.screen { min-height: 100dvh; padding: calc(16px + var(--safe-top)) 15px calc(98px + var(--safe-bottom)); position: relative; z-index: 1; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 3px 16px; color: #fffdf8; }
.brand-kicker { margin: 0; color: rgba(255,253,248,.68); font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.title { margin: 4px 0 0; font-size: 28px; line-height: 1.05; font-weight: 850; letter-spacing: 0; }
.date-pill, .state-pill { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; padding: 0 12px; background: rgba(255,255,255,.13); color: #fffdf8; font-size: 12px; font-weight: 780; backdrop-filter: blur(18px); white-space: nowrap; }
.stack { display: grid; gap: 14px; }
.card, .hero-card { min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--soft-shadow); backdrop-filter: blur(24px); padding: 15px; }
.hero-card { color: #fffdf8; border-color: rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 42%), linear-gradient(145deg, #7f9086, #596c64 56%, #3d4945); }
.hero-head, .card-head, .record-row, .draw-row, .member-row, .setting-row, .ticket-line, .ticket-total, .ticket-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-head { align-items: flex-start; margin-bottom: 14px; }
h2 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 830; }
.hero-head p, .empty, .fine, .record-row span, .draw-row span, .member-row span, .setting-row span, .ticket-line span { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.42; }
.hero-head p { color: rgba(255,253,248,.7); }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.metric { min-height: 78px; border-radius: 16px; padding: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.15); }
.metric span { display: block; color: rgba(255,253,248,.72); font-size: 12px; font-weight: 730; }
.metric strong { display: block; margin-top: 7px; color: #fffdf8; font-size: 21px; font-weight: 860; line-height: 1.08; }
.form-grid, .drawer, .table { display: grid; gap: 10px; }
.form-grid > *, .two-col > *, .field { min-width: 0; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.field { display: grid; gap: 7px; }
.field span { color: var(--muted); font-size: 12px; font-weight: 760; }
.input, .textarea, .select { display: block; width: 100%; max-width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.82); color: var(--ink); outline: none; padding: 12px 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.78); }
.textarea { min-height: 170px; resize: vertical; line-height: 1.58; font-family: "SF Mono", Consolas, monospace; }
.textarea.compact { min-height: 112px; }
.input:focus, .textarea:focus, .select:focus { border-color: rgba(110,131,120,.65); box-shadow: 0 0 0 4px rgba(110,131,120,.16); }
input[type="date"] { -webkit-appearance: none; appearance: none; text-align: center; }
#drawDate { width: 100%; max-width: 100%; min-width: 0; }
.button { min-height: 46px; border-radius: 16px; padding: 0 14px; background: var(--graphite); color: #fffdf8; font-weight: 820; box-shadow: 0 12px 26px rgba(60,65,64,.18); }
.button.secondary { background: rgba(69,78,72,.08); color: var(--graphite); box-shadow: none; }
.button.danger { background: rgba(159,95,90,.11); color: var(--danger); border: 1px solid rgba(159,95,90,.18); box-shadow: none; }
.button.ticket-choice { min-height: 54px; font-size: 18px; letter-spacing: .2px; background: linear-gradient(145deg, #6e8378, #50645d); }
.button.ticket-choice.secondary { color: #fffdf8; background: linear-gradient(145deg, #b99b8d, #927a72); }
.card-actions { display: flex; align-items: center; gap: 8px; }
.card-actions .button { min-height: 38px; padding: 0 10px; font-size: 12px; }
.member-picker { display: grid; gap: 8px; }
.member-manage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.member-manage-row .button { min-height: 44px; padding: 0 12px; font-size: 12px; }
.record-preview { display: grid; gap: 3px; text-align: right; min-width: 132px; }
.record-preview span { display: block; margin: 0; color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.32; }
.small-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 5px; border-radius: 16px; background: rgba(69,78,72,.07); border: 1px solid var(--line); }
.small-segmented button { min-height: 36px; border-radius: 12px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 820; }
.small-segmented button.active { background: var(--surface-solid); color: var(--graphite); box-shadow: 0 4px 12px rgba(60,65,64,.1); }
.record-row, .draw-row, .member-row, .setting-row { min-height: 62px; border-radius: 16px; padding: 11px; background: rgba(255,255,255,.66); border: 1px solid var(--line); }
.record-row strong, .draw-row strong, .member-row strong, .setting-row strong { display: block; font-size: 14px; line-height: 1.2; color: var(--ink); }
.record-open { cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; }
.record-check { width: 18px; height: 18px; accent-color: var(--eucalyptus); }
.amount { text-align: right; white-space: nowrap; }
.amount strong { color: var(--graphite); }
.ticket-view { display: grid; gap: 8px; border: 1px dashed rgba(69,78,72,.28); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.54); }
.ticket-header { padding-bottom: 8px; border-bottom: 1px dashed rgba(69,78,72,.18); color: var(--muted); font-size: 12px; font-weight: 780; }
.ticket-line { min-height: 56px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.74); }
.ticket-line strong { display: block; font-size: 14px; }
.ticket-total { padding-top: 10px; border-top: 1px solid var(--line); font-weight: 860; }
.hit-highlight { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin: 0 1px; padding: 0 5px; border-radius: 999px; background: #7f9086; color: #fffdf8; box-shadow: 0 8px 18px rgba(110,131,120,.25); font-weight: 860; }
.balls { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ball { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 999px; background: #f7f4ed; color: var(--graphite); border: 1px solid rgba(69,78,72,.14); font-size: 12px; font-weight: 850; }
.ball.special { background: #e8ddd7; color: #6d5750; }
.status-chip { min-height: 28px; display: inline-flex; align-items: center; border-radius: 999px; padding: 0 10px; background: rgba(110,131,120,.12); color: var(--eucalyptus); font-size: 12px; font-weight: 820; }
.notice { border: 1px solid rgba(185,155,141,.24); border-radius: 16px; padding: 11px; background: rgba(250,247,241,.76); color: var(--graphite); font-size: 12px; line-height: 1.48; margin-bottom: 10px; }
.rate-grid { width: min(100%, 168px); display: grid; gap: 6px; }
.rate-grid .input { min-height: 34px; padding: 7px 9px; text-align: right; }
.bottom-nav { position: fixed; left: 50%; bottom: max(10px, var(--safe-bottom)); z-index: 9; width: min(calc(100% - 22px), 408px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; border: 1px solid rgba(255,255,255,.62); border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 18px 44px rgba(60,65,64,.19); backdrop-filter: blur(22px); }
.nav-button { min-height: 52px; border-radius: 18px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 780; }
.nav-button.active { background: var(--graphite); color: #fffdf8; }
.nav-mark { display: block; width: 18px; height: 3px; margin: 0 auto 7px; border-radius: 999px; background: currentColor; opacity: .55; }
.login-screen { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, rgba(185,155,141,.28), transparent 18rem), radial-gradient(circle at 92% 0%, rgba(110,131,120,.28), transparent 20rem), linear-gradient(145deg, #eef1eb 0%, #dfe7de 48%, #cfd8d0 100%); }
.login-panel { width: min(100%, 330px); border: 1px solid rgba(255,255,255,.62); border-radius: 24px; padding: 30px 26px; background: rgba(251,250,246,.78); color: var(--ink); box-shadow: 0 28px 70px rgba(60,65,64,.22); backdrop-filter: blur(24px); display: grid; gap: 16px; }
.login-brand { color: var(--graphite); font-size: 32px; line-height: 1; font-weight: 900; letter-spacing: 0; text-transform: none; }
.login-panel h2 { margin: 0; font-size: 25px; font-weight: 850; }
.login-panel p { margin: -6px 0 2px; color: var(--muted); font-size: 13px; }
.login-panel .input { border-radius: 16px; border-color: var(--line); background: rgba(255,255,255,.82); color: var(--ink); }
.login-panel .button { border-radius: 16px; background: linear-gradient(145deg, #6e8378, #50645d); color: #fffdf8; }
.modal { display: none; position: fixed; inset: 0; z-index: 30; padding: 16px; background: rgba(47,51,49,.5); backdrop-filter: blur(18px); place-items: center; }
.modal[style*="flex"] { display: flex !important; }
.modal-content { width: min(100%, 398px); max-height: 86dvh; overflow: auto; border: 1px solid rgba(255,255,255,.6); border-radius: 24px; padding: 15px; background: rgba(251,250,246,.92); box-shadow: 0 28px 70px rgba(60,65,64,.24); }
.modal-actions { margin-top: 12px; }
.undo-float-btn { position: fixed; bottom: calc(88px + var(--safe-bottom)); right: max(16px, calc((100vw - 430px) / 2 + 16px)); z-index: 12; min-height: 38px; border-radius: 999px; padding: 0 13px; background: rgba(255,255,255,.76); border: 1px solid rgba(69,78,72,.16); color: var(--graphite); font-size: 13px; font-weight: 820; box-shadow: 0 12px 28px rgba(60,65,64,.16); backdrop-filter: blur(18px); }
.undo-float-btn.disabled { opacity: .35; pointer-events: none; }
.hidden { display: none !important; }
@media (min-width: 760px) { body { padding: 28px 0; } .app-shell { border-radius: 38px; min-height: calc(100dvh - 56px); } .screen { min-height: calc(100dvh - 56px); } }
@media (max-width: 360px) { .screen { padding-left: 11px; padding-right: 11px; } .metric-grid { grid-template-columns: 1fr; } .record-row { grid-template-columns: auto 1fr; } .record-row .amount, .record-preview { grid-column: 2; text-align: left; } .title { font-size: 25px; } }

.split-actions { display: grid; gap: 12px; }
.split-return-actions { margin: 10px 0 2px; }
.split-button-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.split-btn { min-height: 42px; padding: 0 6px; border-radius: 14px; font-size: 12px; }
.split-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; }
.mini-btn { min-height: 34px; border-radius: 12px; padding: 0 10px; font-size: 12px; }
@media (max-width: 360px) { .split-button-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .split-row { grid-template-columns: 1fr auto; } .split-row .mini-btn { grid-column: 1 / -1; } }

.split-panel { display: grid; gap: 12px; }
.split-overview { display: grid; gap: 10px; padding-top: 2px; }
.split-result-block { display: grid; gap: 10px; margin: 10px 0 2px; color: #fffdf8; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 15px; background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 42%), linear-gradient(145deg, #7f9086, #596c64 56%, #3d4945); box-shadow: var(--soft-shadow); }
.split-result-block .card-head { margin-bottom: 0; }
.split-result-block .fine { color: rgba(255,253,248,.72); }
.split-result-block .metric { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.15); }
.split-result-block .metric span { color: rgba(255,253,248,.72); }
.split-result-block .metric strong { color: #fffdf8; }


.active-mode { background: var(--graphite) !important; color: #fffdf8 !important; box-shadow: 0 10px 24px rgba(60,65,64,.18) !important; }
.ticket-action-mode .ticket-clickable { cursor: pointer; border-color: rgba(110,131,120,.38); box-shadow: 0 0 0 2px rgba(110,131,120,.08) inset; }
.ticket-action-mode .ticket-clickable:active { transform: scale(.99); background: rgba(110,131,120,.12); }
.split-overview .metric { background: rgba(69,78,72,.07); border-color: var(--line); }
.split-overview .metric span { color: var(--muted); }
.split-overview .metric strong { color: var(--graphite); }
.textarea[readonly] { color: var(--graphite); background: rgba(255,255,255,.58); }

.split-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.readonly-text { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.62); color: var(--graphite); font-size: 12px; line-height: 1.6; font-family: "SF Mono", Consolas, monospace; margin-bottom: 10px; }
.modal-section-gap { height: 12px; }
@media (max-width: 360px) { .split-metric-grid { grid-template-columns: 1fr; } }

.card-head { flex-wrap: wrap; align-items: flex-start; }
.card-head h2 { min-width: 0; }
.card-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.form-grid, .field { width: 100%; max-width: 100%; overflow: hidden; }
input[type="date"].input, #drawDate { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; -webkit-min-logical-width: 0; }
#drawDate::-webkit-date-and-time-value { min-width: 0; width: 100%; text-align: center; }
.app-shell.tab-calc.game-49 { background: linear-gradient(180deg, rgba(143,118,110,.96) 0 218px, rgba(237,240,234,0) 218px), var(--wash); }
.app-shell.tab-calc.game-49 .hero-card,
.app-shell.tab-calc.game-49 .split-result-block { background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%), linear-gradient(145deg, #b99b8d, #8f766e 56%, #5f504b); }
.app-shell.tab-calc.game-49 .hit-highlight { background: #b99b8d; box-shadow: 0 8px 18px rgba(185,155,141,.25); }
.app-shell.game-49 .button.ticket-choice:not(.secondary) { background: linear-gradient(145deg, #6e8378, #50645d); }
.app-shell.tab-calc.game-49 .active-mode { background: #5f504b !important; }
.app-shell.tab-numbers .small-segmented button { color: #fffdf8; background: rgba(255,255,255,.14); }
.app-shell.tab-numbers .small-segmented button.active { color: #fffdf8; background: rgba(60,65,64,.72); box-shadow: 0 4px 12px rgba(60,65,64,.16); }
.image-preview-wrap { display: grid; gap: 12px; }
.image-preview { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--soft-shadow); -webkit-touch-callout: default; user-select: auto; }
.image-download-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.ledger-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; padding: 5px; border-radius: 16px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.16); }
.ledger-mode-tabs button { min-height: 34px; border-radius: 12px; background: transparent; color: rgba(255,253,248,.74); font-size: 12px; font-weight: 850; }
.ledger-mode-tabs button.active { background: rgba(255,255,255,.9); color: var(--graphite); box-shadow: 0 6px 14px rgba(60,65,64,.12); }
.ledger-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ledger-metric-grid .metric:last-child { grid-column: 1 / -1; min-height: 68px; }

.login-mark { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fffdf8; background: linear-gradient(145deg, #7f9086, #596c64); box-shadow: 0 18px 38px rgba(60,65,64,.2); }
.login-mark span { font-size: 22px; font-weight: 900; letter-spacing: 0; }

.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topbar-actions .date-pill { min-height: 32px; padding: 0 10px; }
.report-text { white-space: pre-wrap; margin: 12px 0 0; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.68); color: var(--graphite); font: 700 14px/1.65 "SF Mono", Consolas, monospace; }


.record-date-editor { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; margin-bottom: 12px; }
.record-date-editor .button { min-height: 48px; border-radius: 16px; }
.fusion-detail { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid rgba(69,78,72,.14); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(246,244,239,.62)); box-shadow: inset 0 1px 0 rgba(255,255,255,.65); }
.fusion-title { display: flex; align-items: center; justify-content: space-between; color: var(--graphite); font-size: 13px; font-weight: 860; }
.fusion-source { margin-bottom: 0; background: rgba(255,255,255,.72); }
.fusion-ticket .ticket-view { background: rgba(255,255,255,.58); border-style: solid; }
.fusion-ticket .empty { margin: 0; }
.modal-split-overview .fusion-detail { margin-top: 12px; }
@media (max-width: 360px) { .record-date-editor { grid-template-columns: 1fr; } }


.backup-list { display: grid; gap: 10px; margin-top: 12px; }
.backup-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.68); }
.backup-item strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.25; }
.backup-item span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.warning-box { display: grid; gap: 5px; padding: 10px 12px; border-radius: 15px; border: 1px solid rgba(158,91,82,.22); background: rgba(250,241,237,.72); color: #7b4c45; }
.warning-box strong { font-size: 12px; font-weight: 860; }
.warning-box span { display: block; font-size: 12px; line-height: 1.4; }
.sync-status { margin: -2px 0 12px; padding: 10px 12px; border-radius: 15px; background: rgba(110,131,120,.1); border: 1px solid rgba(110,131,120,.16); color: var(--graphite); font-size: 12px; font-weight: 760; line-height: 1.42; }
.detail-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; margin: 12px 0; padding: 5px; border-radius: 16px; background: rgba(69,78,72,.07); border: 1px solid var(--line); }
.detail-tabs button { min-height: 34px; border-radius: 12px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 850; }
.detail-tabs button.active { background: rgba(255,255,255,.92); color: var(--graphite); box-shadow: 0 6px 14px rgba(60,65,64,.1); }
.report-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }
.history-box { display: grid; gap: 6px; margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(69,78,72,.06); border: 1px solid var(--line); color: var(--muted); }
.history-box strong { color: var(--graphite); font-size: 13px; }
.history-box span { font-size: 12px; line-height: 1.45; }
.record-compact { min-height: 54px; }
.record-compact .record-preview { gap: 2px; }
.record-compact .record-preview span:first-child { color: var(--graphite); }
@media (max-width: 360px) { .backup-item { grid-template-columns: 1fr; } .report-tabs { grid-template-columns: 1fr; } }