:root {
  color-scheme: dark;
  --bg: #0b0f12;
  --surface: #141a1f;
  --surface-2: #1b2329;
  --line: rgba(255,255,255,.09);
  --text: #f4f6f7;
  --muted: #96a1a9;
  --red: #e6375b;
  --green: #159447;
  --cyan: #19b7bd;
  --gold: #d2a83a;
  --blue: #3c74a8;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #050708; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
.app-shell { width: min(100%, 430px); min-height: 100vh; margin: 0 auto; background: radial-gradient(circle at 85% 0%, rgba(40,103,113,.25), transparent 28%), var(--bg); padding: max(16px, env(safe-area-inset-top)) 16px calc(94px + env(safe-area-inset-bottom)); position: relative; overflow-x: hidden; transition: background .2s, box-shadow .2s; }
.app-shell.home-active { padding-bottom: max(28px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 95% 4%, rgba(230,55,91,.18), transparent 28%), radial-gradient(circle at 0% 43%, rgba(60,116,168,.15), transparent 29%), #080b0e; }
.app-shell.home-active > .session-strip, .app-shell.home-active > .screen, .app-shell.home-active > .bottom-nav { display: none !important; }
.app-shell:not(.home-active) > .home-screen { display: none; }
.home-screen { animation: enter .2s ease-out; }
.home-hero { position: relative; min-height: 154px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; padding: 24px 21px 33px; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: linear-gradient(125deg, #391522 0%, #1c2635 62%, #132f38 100%); box-shadow: 0 22px 55px rgba(0,0,0,.3); }
.home-hero::before, .home-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }.home-hero::before { width: 170px; height: 170px; right: -70px; top: -85px; border: 26px solid rgba(255,255,255,.035); }.home-hero::after { width: 95px; height: 95px; left: 45%; bottom: -68px; border: 18px solid rgba(230,55,91,.08); }
.home-hero-copy { position: relative; z-index: 1; }.home-hero-copy > span { color: #ef8298; font-size: 8px; font-weight: 900; letter-spacing: .22em; }.home-hero h1 { margin-top: 7px; font-size: 24px; letter-spacing: .01em; white-space: nowrap; }.home-hero p { margin: 7px 0 0; color: #b3bec4; font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.home-emblem { position: relative; z-index: 1; width: 72px; height: 72px; display: grid; place-items: center; align-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; background: rgba(8,12,16,.36); transform: rotate(4deg); box-shadow: inset 0 0 0 4px rgba(255,255,255,.025); }.home-emblem strong { color: #f3d7dc; font-size: 19px; letter-spacing: .08em; }.home-emblem small { margin-top: 3px; color: #6ed4d3; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.resume-session-card { position: relative; z-index: 3; width: calc(100% - 18px); min-height: 62px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; margin: -17px 9px 10px; padding: 9px 12px; border: 1px solid rgba(25,183,189,.3); border-radius: 16px; background: linear-gradient(105deg, rgba(18,66,69,.98), rgba(20,29,35,.98)); text-align: left; box-shadow: 0 14px 32px rgba(0,0,0,.3); }.resume-session-card.hidden { display: none; }.resume-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(25,183,189,.18); color: #6ed6d6; font-size: 13px; }.resume-session-card > span:nth-child(2) { min-width: 0; }.resume-session-card small, .resume-session-card strong, .resume-session-card em { display: block; }.resume-session-card small { color: #75aaa9; font-size: 7px; }.resume-session-card strong { overflow: hidden; margin-top: 2px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.resume-session-card em { margin-top: 2px; color: #8d9aa1; font-size: 8px; font-style: normal; }.resume-session-card > b { padding: 6px 8px; border-radius: 7px; background: rgba(25,183,189,.16); color: #76d6d5; font-size: 8px; }
.home-start-card { position: relative; z-index: 2; margin: -16px 9px 0; padding: 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(20,26,31,.98); box-shadow: 0 18px 42px rgba(0,0,0,.3); }
.home-start-card h2, .home-section-title h2 { font-size: 17px; }
.home-start-heading { display: flex; align-items: center; gap: 10px; }.home-start-heading > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(230,55,91,.15); color: #ff839a; font-size: 19px; font-weight: 900; }.home-start-heading p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.home-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 9px; margin-top: 16px; }
.home-form-grid label { min-width: 0; }.home-form-grid label > span:first-child { display: block; margin: 0 0 6px 2px; color: var(--muted); font-size: 9px; }
.home-form-grid label > span:first-child small { margin-left: 3px; color: #69767e; font-size: 7px; font-weight: 700; }
.home-date-field { grid-column: 1; }.home-machine-field { grid-column: 2; }.home-store-field { grid-column: 1 / 3; grid-row: 2; }
.home-form-grid input { width: 100%; height: 47px; min-width: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: #0e1317; color: white; font-size: 14px; font-weight: 750; }
.home-form-grid input:focus { border-color: rgba(230,55,91,.58); box-shadow: 0 0 0 3px rgba(230,55,91,.08); }
.home-number-field { position: relative; display: block; }.home-number-field input { padding-right: 42px; }.home-number-field b { position: absolute; right: 10px; top: 16px; color: var(--muted); font-size: 9px; }
.home-start-button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 14px; border: 0; border-radius: 13px; background: linear-gradient(100deg, #e6375b, #c52f5d); color: white; font-size: 13px; font-weight: 900; box-shadow: 0 10px 25px rgba(230,55,91,.24); }.home-start-button b { font-size: 17px; }
.home-start-card > small { display: block; margin-top: 8px; color: #748189; font-size: 8px; text-align: center; }
.past-session-section { margin-top: 27px; }.home-section-title { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 11px; }.home-section-title button { border: 0; background: transparent; color: #68d3d3; font-size: 10px; }
.past-session-list { display: grid; gap: 8px; }.past-session-card { width: 100%; min-height: 72px; display: grid; grid-template-columns: 47px 1fr auto 31px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(100deg, rgba(28,35,41,.96), rgba(17,23,28,.96)); text-align: left; cursor: pointer; }
.past-session-empty { min-height: 118px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed rgba(255,255,255,.11); border-radius: 16px; color: #66737b; text-align: center; }.past-session-empty.hidden { display: none; }.past-session-empty > span { font-size: 22px; }.past-session-empty strong { color: #8d999f; font-size: 10px; }.past-session-empty small { font-size: 8px; }
.archived-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }.archived-summary-grid > div { min-height: 82px; display: flex; flex-direction: column; gap: 4px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.035); }.archived-summary-grid span, .archived-summary-grid small { color: var(--muted); font-size: 9px; }.archived-summary-grid strong { color: white; font-size: 16px; }
.past-session-card:active { transform: scale(.985); }.past-session-edit { width: 31px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.045); color: #9aa7ae; font-size: 14px; }.past-session-edit:active { border-color: rgba(25,183,189,.4); color: #71d3d3; }.past-date { color: #dfe4e6; font-size: 14px; font-weight: 900; }.past-date small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 600; }
.past-place, .past-result { min-width: 0; }.past-place strong, .past-place small, .past-result strong, .past-result small { display: block; }.past-place strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.past-place small, .past-result small { margin-top: 4px; color: var(--muted); font-size: 8px; }.past-result { text-align: right; }.past-result strong { padding: 4px 6px; border-radius: 6px; background: rgba(210,168,58,.12); color: #f0c966; font-size: 9px; }
.summary-heading-actions { display: flex; align-items: center; gap: 7px; }.summary-heading-actions button { min-height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: #20282e; color: #b9c2c7; font-size: 9px; font-weight: 850; }
.past-session-edit-form { display: grid; gap: 12px; margin-top: 15px; }.past-session-edit-form label > span { display: block; margin: 0 0 6px 2px; color: var(--muted); font-size: 9px; }.past-session-edit-form input { width: 100%; height: 49px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: #0e1317; color: white; font-size: 14px; font-weight: 750; }.past-session-edit-form input:focus { border-color: rgba(25,183,189,.5); }
.app-shell.decrement-mode { background: radial-gradient(circle at 85% 0%, rgba(183,35,65,.34), transparent 32%), #13090c; box-shadow: inset 4px 0 rgba(230,55,91,.62), inset -4px 0 rgba(230,55,91,.62); }
.app-shell.decrement-mode .section-heading h2 { color: #ff9bad; }
.app-shell.decrement-mode .game-range-card, .app-shell.decrement-mode .bonus-entry-card, .app-shell.decrement-mode .dual-input-panel, .app-shell.decrement-mode .point-card, .app-shell.decrement-mode .hint-card { border-color: rgba(230,55,91,.28); }
.app-shell.decrement-mode .bell-button { border-color: rgba(230,55,91,.42); background: linear-gradient(135deg, #4a1724, #271419); }
.app-shell.decrement-mode .bell-action { background: var(--red); color: white; }
.app-shell.decrement-mode .bottom-nav button.active { color: #ff7892; }
.eyebrow { display: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 23px; letter-spacing: -.03em; }
h2 { margin-bottom: 0; font-size: 22px; letter-spacing: -.03em; }
h3 { margin-bottom: 0; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; font-weight: 900; letter-spacing: .12em; }
.session-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 22px; }
.session-strip div { background: rgba(19,25,30,.95); padding: 10px; min-width: 0; }
.session-strip span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.session-strip strong { display: block; white-space: nowrap; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.app-shell.light-screen-active .session-strip { margin-bottom: 12px; }
.screen { display: none; animation: enter .18s ease-out; }
.screen.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; }
.section-heading.compact { align-items: center; }
.screen-heading-title { min-width: 0; display: flex; align-items: center; gap: 9px; }.screen-heading-title > div { min-width: 0; }.screen-back-button { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; padding: 0 2px 2px 0; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.045); color: #d2d9dc; font-size: 25px; font-weight: 500; line-height: 1; }.screen-back-button:active { background: rgba(230,55,91,.15); color: #ff8da2; transform: scale(.95); }
.section-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.save-state { color: #6dd5a0; font-size: 11px; }
.count-mode-toggle { min-height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: #9aa5ac; font-size: 9px; font-weight: 800; }.count-mode-toggle b { font-size: 16px; line-height: 1; }.count-mode-toggle.active { border-color: rgba(230,55,91,.55); background: rgba(230,55,91,.16); color: #ff7f97; box-shadow: 0 0 0 2px rgba(230,55,91,.07); }
.large-count-mode-toggle { min-height: 44px; gap: 7px; padding: 0 15px; border-radius: 13px; font-size: 11px; white-space: nowrap; }.large-count-mode-toggle b { font-size: 22px; }
.text-button, .summary-title button { border: 0; background: transparent; color: #68d3d3; font-size: 12px; padding: 6px 0; }
.game-range-card { margin-bottom: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(20,26,31,.96); }
.game-range-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 11px; }.game-range-title h3 { font-size: 17px; }.game-range-title small { margin-bottom: 1px; color: var(--muted); font-size: 9px; }
.game-range-fields { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: end; gap: 5px; }.game-range-fields label > span:first-child { display: block; margin: 0 0 6px 2px; color: var(--muted); font-size: 9px; }.game-range-arrow { padding-bottom: 17px; color: #627079; text-align: center; }
.game-range-card .number-field { min-height: 46px; }.game-range-card .number-field input { height: 44px; font-size: 16px; }
.update-game-range-button, .record-bonus-button { width: 100%; min-height: 46px; margin-top: 12px; border: 0; border-radius: 12px; background: var(--red); color: white; font-size: 12px; font-weight: 900; }
.bell-button { width: 100%; min-height: 94px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; text-align: left; border: 1px solid rgba(232,183,66,.42); border-radius: 20px; padding: 17px 18px; background: linear-gradient(135deg, #493b16, #292616); box-shadow: 0 12px 35px rgba(0,0,0,.22); }
.light-bell-button { margin-bottom: 10px; }
.bell-label { color: #ffe19a; font-size: 17px; font-weight: 800; }
.bell-action { grid-row: 1 / 3; grid-column: 2; font-size: 26px; font-weight: 900; background: #e1ae36; color: #2b2108; min-width: 68px; height: 58px; display: grid; place-items: center; border-radius: 16px; }
.bell-result { color: var(--muted); font-size: 12px; }
.bell-result b { color: white; font-size: 18px; }
.bell-result em { color: #f1c65e; font-style: normal; margin-left: 8px; }
.bell-button:active, .quick-card:active, .event-row button:active { transform: scale(.98); }
.bonus-entry-card { margin-top: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(98,25,43,.46), var(--surface) 62%); }
.entry-card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.entry-card-title h3 { font-size: 17px; }.entry-card-title > span { min-width: 48px; padding: 7px 9px; border-radius: 10px; background: rgba(230,55,91,.14); color: #ff7892; text-align: center; font-size: 11px; font-weight: 800; }
.bonus-number-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9px; }
.bonus-number-grid label > span:first-child, .field-label { display: block; color: var(--muted); font-size: 10px; margin: 0 0 6px 2px; }
.number-field { min-height: 51px; display: flex; align-items: center; background: #0e1317; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.number-field input { width: 100%; min-width: 0; height: 49px; border: 0; outline: 0; background: transparent; color: white; padding: 0 8px 0 13px; font-size: 18px; font-weight: 800; }
.number-field b { padding-right: 12px; color: var(--muted); font-size: 12px; }
.bonus-number-grid select { width: 100%; height: 51px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: #0e1317; color: white; padding: 0 11px; font-weight: 700; }
.field-label { margin-top: 13px; }
.bonus-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.bonus-type-grid button { min-height: 44px; border: 1px solid var(--line); border-radius: 11px; background: #20282e; color: #aab4ba; font-size: 11px; font-weight: 800; }
.bonus-type-grid button.active { border-color: #e6375b; background: rgba(230,55,91,.18); color: #ff8ba1; }
.cz-type-grid { grid-template-columns: repeat(6, 1fr); }
.cz-type-grid button:nth-child(1) { grid-column: 1 / 4; grid-row: 1; border-color: rgba(230,55,91,.3); background: rgba(230,55,91,.13); color: #ff8ba1; }
.cz-type-grid button:nth-child(2) { grid-column: 4 / 7; grid-row: 1; border-color: rgba(21,148,71,.32); background: rgba(21,148,71,.14); color: #75dda0; }
.cz-type-grid button:nth-child(3) { grid-column: 1 / 3; grid-row: 2; border-color: rgba(85,91,165,.34); background: linear-gradient(110deg, rgba(230,55,91,.14), rgba(54,101,150,.16)); color: #dda6c6; }
.cz-type-grid button:nth-child(4) { grid-column: 3 / 5; grid-row: 2; border-color: rgba(64,121,123,.36); background: linear-gradient(110deg, rgba(21,148,71,.14), rgba(54,101,150,.16)); color: #a1d6bd; }
.cz-type-grid button:nth-child(5) { grid-column: 5 / 7; grid-row: 2; border-color: rgba(54,101,150,.4); background: rgba(54,101,150,.18); color: #9bc6ee; }
.cz-type-grid button.active { box-shadow: inset 0 0 0 2px currentColor; filter: brightness(1.3); }
.cz-type-grid button > span, .allstar-action > span { display: block; }
.cz-type-grid button small, .allstar-action small { display: block; margin-top: 3px; color: inherit; font-size: 8px; font-weight: 700; opacity: .72; }
.bonus-result-grid { grid-template-columns: repeat(2, 1fr); }
.cz-outcome-field.hidden, .conditional-entry-field.hidden { display: none; }.cz-outcome-field .field-label { display: flex; justify-content: space-between; }.cz-outcome-field .field-label small { color: #68757d; font-size: 8px; }
.cz-outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.cz-outcome-grid button { min-width: 0; min-height: 40px; padding: 0 2px; border: 1px solid var(--line); border-radius: 10px; background: #20282e; color: #98a3aa; font-size: 9px; font-weight: 800; }.cz-outcome-grid button.active { border-color: var(--blue); background: rgba(60,116,168,.2); color: #86bdec; }
.subsection-heading { display: flex; align-items: end; justify-content: space-between; margin: 24px 2px 10px; }
.subsection-heading h3 { font-size: 17px; }.subsection-heading small { color: var(--muted); font-size: 9px; margin-bottom: 2px; }
.hint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.hint-card { min-height: 83px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 1fr auto; gap: 2px 9px; align-items: center; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.hint-card:active { transform: scale(.98); }.hint-card .hint-symbol { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: #72d5d4; font-size: 12px; font-weight: 900; }
.hint-card > span:nth-child(2) { color: #d4dade; font-size: 11px; font-weight: 700; line-height: 1.35; }.hint-card b { color: var(--muted); font-size: 9px; }
.hint-card.trophy .hint-symbol, .hint-card.payout .hint-symbol { color: #edc75b; background: rgba(210,168,58,.12); }
.hint-card.voice .hint-symbol, .hint-card.attack .hint-symbol { color: #ff8199; background: rgba(230,55,91,.12); }
.hint-card.point3000 .hint-symbol { color: #68d798; background: rgba(21,148,71,.13); }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.quick-card { min-height: 100px; border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr auto; gap: 3px 9px; text-align: left; transition: .12s; }
.quick-card .quick-icon { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; }
.quick-card > span:nth-child(2) { color: #c8ced2; font-size: 12px; align-self: end; }
.quick-card strong { font-size: 14px; align-self: start; }
.quick-card.cyan .quick-icon { background: rgba(25,183,189,.18); color: #5bdfe1; }
.quick-card.red .quick-icon { background: rgba(230,55,91,.17); color: #ff6684; }
.quick-card.gold .quick-icon { background: rgba(210,168,58,.17); color: #f0c85d; }
.quick-card.blue .quick-icon { background: rgba(60,116,168,.2); color: #7eb9ed; }
.summary-card, .recent-card, .point-card, .input-panel, .rate-card, .judgement-card, .metric-list article { background: rgba(20,26,31,.96); border: 1px solid var(--line); border-radius: 18px; }
.summary-card, .recent-card { padding: 16px; margin-top: 10px; }
.summary-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.summary-title h3 { font-size: 14px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.summary-grid div { border-right: 1px solid var(--line); padding: 0 10px; }
.summary-grid div:first-child { padding-left: 0; }
.summary-grid div:last-child { border: 0; }
.summary-grid span, .summary-grid small { display: block; color: var(--muted); font-size: 9px; }
.rb-upgrade-field { margin-top: 14px; padding: 12px; border: 1px solid rgba(25,183,189,.28); border-radius: 13px; background: rgba(25,183,189,.08); }
.rb-upgrade-field.hidden { display: none; }
.rb-upgrade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rb-upgrade-grid button { min-height: 48px; border: 1px solid var(--line); border-radius: 11px; background: #20282e; color: #c9d1d5; font-size: 11px; font-weight: 850; }
.rb-upgrade-grid button.active { border-color: var(--cyan); background: var(--cyan); color: #062023; }
.ceiling-mode-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; margin: 0 0 12px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.ceiling-mode-field > .field-label { margin: 0; white-space: nowrap; }
.ceiling-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ceiling-mode-grid button { min-height: 35px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: #20282e; color: #c9d1d5; font-size: 10px; font-weight: 850; }
.ceiling-mode-grid button.active { border-color: #e2a54a; background: rgba(226,165,74,.18); color: #ffd387; }
.ceiling-short-tag { padding: 3px 6px; border: 1px solid rgba(226,165,74,.36); border-radius: 6px; background: rgba(226,165,74,.14); color: #ffd387; font-size: 8px; font-style: normal; font-weight: 900; white-space: nowrap; }
.win-history-group > header .history-ceiling-state { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; color: #8e9aa1; font-size: 8px; font-weight: 850; white-space: nowrap; }
.win-history-group > header .history-ceiling-state.shortened { border-color: rgba(226,165,74,.38); background: rgba(226,165,74,.14); color: #ffd387; }
.summary-grid b { display: block; font-size: 21px; margin: 3px 0; }
.recent-card ul { list-style: none; margin: 0; padding: 0; }
.recent-card li { display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.recent-card li:first-child { border: 0; padding-top: 0; }
.recent-card li:last-child { padding-bottom: 0; }
.recent-card b, .recent-card small { display: block; font-size: 12px; }
.recent-card small, .recent-card time { color: var(--muted); font-size: 10px; }
.log-dot, .timeline-dot { width: 8px; height: 8px; border-radius: 50%; }
.red-dot { background: var(--red); }.green-dot { background: var(--green); }.gray-dot { background: #64717a; }.pink-dot { background: #ea4d86; }
.dual-character-head, .dual-character-grid, .point-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dual-character-head { margin-bottom: 8px; }
.dual-character-head > div { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; font-weight: 900; }
.dual-character-head span { font-size: 14px; }.dual-character-head small { font-size: 8px; opacity: .68; letter-spacing: .08em; }
.mumei-head { background: rgba(230,55,91,.22); color: #ff8299; border: 1px solid rgba(230,55,91,.28); }
.ikoma-head { background: rgba(21,148,71,.22); color: #69dc99; border: 1px solid rgba(21,148,71,.3); }
.dual-input-panel { padding: 14px; margin-bottom: 10px; background: rgba(20,26,31,.96); border: 1px solid var(--line); border-radius: 18px; }
.light-status-panel { background: linear-gradient(135deg, rgba(81,26,42,.35), rgba(18,77,43,.3)); }
.mini-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 11px; background: #0f1418; }
.mini-segmented button { min-width: 0; min-height: 38px; padding: 0 3px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; }
.mumei-segmented button.active { background: var(--red); color: white; }
.ikoma-segmented button.active { background: var(--green); color: white; }
.character-events { display: grid; gap: 7px; }
.character-events button { min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: #20282e; transition: .12s; }
.character-events button:active { transform: scale(.97); }
.character-events span { min-width: 0; font-size: 11px; text-align: left; }.character-events b { flex: 0 0 auto; font-size: 11px; }
.chance-event-count { flex: 0 0 auto; min-width: 31px; color: #fff; font-size: 16px; font-style: normal; font-weight: 900; text-align: center; }.chance-event-count small { margin-left: 1px; color: var(--muted); font-size: 7px; font-weight: 700; }
.mumei-events b { color: #ff7690; }.ikoma-events b { color: #5bd78d; }
.point-balance-grid { margin-top: 10px; }
.point-card { padding: 16px; margin-bottom: 10px; }
.point-card.mumei-theme { background: linear-gradient(145deg, rgba(95,26,43,.6), var(--surface) 65%); }
.point-card.ikoma-theme { background: linear-gradient(145deg, rgba(18,84,44,.6), var(--surface) 65%); }
.compact-point-card { min-width: 0; margin-bottom: 0; padding: 13px; }
.compact-point-head { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
.compact-point-head > div:first-child { min-width: 0; }.compact-point-head span { display: block; color: #d1d7db; font-size: 9px; white-space: nowrap; }
.compact-point-head strong { display: block; margin-top: 3px; font-size: 25px; letter-spacing: -.04em; }
.compact-point-head strong small { margin-left: 3px; color: var(--muted); font-size: 9px; }
.ring { flex: 0 0 auto; width: 45px; height: 45px; border-radius: 50%; background: conic-gradient(#f15a79 var(--progress), rgba(255,255,255,.08) 0); display: grid; place-items: center; position: relative; }
.ikoma-theme .ring { background: conic-gradient(#36c873 var(--progress), rgba(255,255,255,.08) 0); }
.ring::after { content: ""; width: 35px; height: 35px; border-radius: 50%; background: #192026; position: absolute; }
.ring span { position: relative; z-index: 1; font-size: 10px; font-weight: 800; }
.progress-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); margin: 10px 0 0; overflow: hidden; }
.progress-track i { display: block; height: 100%; background: var(--red); border-radius: inherit; transition: .25s; }
.ikoma-theme .progress-track i { background: var(--green); }
.input-panel { padding: 15px; margin-bottom: 10px; }
.panel-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.panel-label span { font-size: 13px; font-weight: 800; }
.panel-label small { color: var(--muted); font-size: 10px; }
.event-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.event-row.one { grid-template-columns: 1fr; margin-top: 8px; }
.event-row button { min-height: 57px; border: 1px solid var(--line); background: #20282e; border-radius: 13px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; transition: .12s; }
.event-row button span { font-size: 12px; }.event-row button b { color: #ff7690; font-size: 13px; }
.rate-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; margin-bottom: 10px; }
.rate-card > div { padding: 13px; text-align: center; border-right: 1px solid var(--line); }
.rate-card span, .rate-card small { display: block; color: var(--muted); font-size: 9px; }.rate-card strong { display: block; font-size: 17px; margin: 3px; }
.rate-card .combined { grid-column: 1 / 3; border-top: 1px solid var(--line); border-right: 0; display: flex; align-items: baseline; justify-content: center; gap: 9px; }
.cz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cz-actions button { min-height: 50px; border: 0; border-radius: 13px; font-size: 12px; font-weight: 800; }
.mumei-action { background: var(--red); }.ikoma-action { background: var(--green); }
.mumei-dual-action { background: linear-gradient(90deg, var(--red) 0 48%, var(--blue) 52%); }
.ikoma-dual-action { background: linear-gradient(90deg, var(--green) 0 48%, var(--blue) 52%); }
.allstar-action { grid-column: 1 / 3; background: var(--blue); color: white; }
.reset-action { grid-column: 1 / 3; background: transparent; border: 1px solid #a44d56 !important; color: #f38a97; }
.rate-card-before-points { margin-top: 10px; }
.judgement-card { padding: 18px; background: linear-gradient(135deg, #17363a, var(--surface)); margin-bottom: 12px; }
.judgement-card > span { color: #78d9d7; font-size: 10px; }.judgement-card h3 { font-size: 20px; margin: 7px 0; }.judgement-card p { color: var(--muted); font-size: 11px; margin-bottom: 13px; }
.confidence { height: 6px; background: rgba(255,255,255,.08); border-radius: 5px; overflow: hidden; }.confidence i { display: block; height: 100%; background: #42c3b9; }.judgement-card > small { color: var(--muted); font-size: 9px; }
.summary-live-state { color: #69d79a; font-size: 9px; font-weight: 800; }
.summary-group-heading { display: flex; align-items: center; gap: 10px; margin: 19px 2px 9px; }.summary-group-heading > span { flex: 0 0 auto; min-width: 47px; padding: 6px 8px; border-radius: 8px; text-align: center; background: rgba(25,183,189,.13); color: #6fd4d4; font-size: 8px; font-weight: 900; }.summary-group-heading h3 { font-size: 14px; }.summary-group-heading small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }.strongest-heading > span { background: rgba(210,168,58,.17); color: #edc75b; }.myslot-heading > span { background: rgba(60,116,168,.2); color: #87bdeb; }.support-heading > span { background: rgba(255,255,255,.07); color: #adb7bd; }
.strong-indicator-list, .support-indicator-list { display: grid; gap: 8px; }.strong-indicator-list { grid-template-columns: repeat(3, 1fr); }.support-indicator-list { grid-template-columns: repeat(2, 1fr); }.strong-indicator-list article, .support-indicator-list article { min-width: 0; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }.strong-indicator-list article { border-color: rgba(210,168,58,.2); background: linear-gradient(145deg, rgba(97,70,16,.2), var(--surface) 68%); }.strong-indicator-list span, .support-indicator-list span { display: block; color: #d8dee1; font-size: 10px; font-weight: 800; line-height: 1.35; }.strong-indicator-list small, .support-indicator-list small { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.35; }.strong-indicator-list strong { color: #e9c761; font-size: 13px; }.support-indicator-list strong { color: #76d2d1; font-size: 13px; }
.metric-list { display: grid; gap: 9px; }
.metric-list article { padding: 15px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.metric-list article div span, .metric-list article div strong { display: block; }.metric-list article div span { color: var(--muted); font-size: 10px; }.metric-list article div strong { font-size: 13px; margin-top: 3px; }.metric-list article > b { font-size: 17px; align-self: center; }.metric-list article > small { grid-column: 1 / 3; color: var(--muted); font-size: 9px; }.good { color: #5fd89a; }.neutral { color: #d7c36f; }
.priority-metric-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }.priority-metric-list article { min-width: 0; min-height: 112px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 13px; }.priority-metric-list article:first-child { border-color: rgba(25,183,189,.27); }.priority-metric-list article div span { color: #c8d0d4; font-size: 10px; font-weight: 800; }.priority-metric-list article div strong { color: var(--muted); font-size: 9px; font-weight: 600; }.priority-metric-list article > b { font-size: 20px; }.priority-metric-list article > small { color: #77838a; font-size: 7px; line-height: 1.35; }
.myslot-summary-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.myslot-summary-card header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--line); background: #1a2228; }.myslot-summary-card header span { font-size: 11px; font-weight: 900; }.myslot-summary-card header b { color: #7e8a92; font-size: 9px; }.myslot-summary-card > div { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; border-top: 1px solid var(--line); }.myslot-summary-card header + div { border-top: 0; }.myslot-summary-card > div span { color: var(--muted); font-size: 9px; }.myslot-summary-card > div strong { text-align: right; font-size: 10px; }.myslot-summary-card.applied { border-color: rgba(60,116,168,.35); }.myslot-summary-card.applied header { background: rgba(60,116,168,.15); }.myslot-summary-card.applied header b { color: #84baeb; }
.priority-metric-list article div span { color: #d7dde0; font-size: 12px; font-weight: 850; line-height: 1.35; }
.priority-metric-list article > small { font-size: 8px; }
.strong-indicator-list span, .support-indicator-list span { font-size: 11px; line-height: 1.4; }
.strong-indicator-list small, .support-indicator-list small { font-size: 8px; }
.myslot-summary-card > div span { color: #c8d0d4; font-size: 11px; font-weight: 750; }
.myslot-summary-card > div strong { font-size: 11px; }
.history-total { padding: 7px 10px; border-radius: 10px; background: rgba(25,183,189,.14); color: #69d2d3; font-size: 10px; font-weight: 800; }
.history-heading-actions { display: flex; align-items: center; gap: 6px; }
.history-heading-actions button { min-height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: #20282e; color: #c5cdd1; font-size: 9px; font-weight: 850; }
.history-heading-actions button.ascending { border-color: rgba(25,183,189,.42); background: rgba(25,183,189,.12); color: #6ed6d7; }
.history-heading-actions.hidden { display: none; }
.history-view-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 11px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: #0e1317; }.history-view-switch button { min-height: 33px; border: 1px solid transparent; border-radius: 8px; font-size: 9px; font-weight: 850; }.history-view-switch button:first-child { background: rgba(230,55,91,.08); color: #bd7180; }.history-view-switch button:last-child { background: rgba(60,116,168,.09); color: #7899b8; }.history-view-switch button:first-child.active { border-color: rgba(230,55,91,.38); background: rgba(230,55,91,.2); color: #ff8ba1; box-shadow: 0 4px 13px rgba(0,0,0,.2); }.history-view-switch button:last-child.active { border-color: rgba(60,116,168,.44); background: rgba(60,116,168,.24); color: #96c4ed; box-shadow: 0 4px 13px rgba(0,0,0,.2); }
.history-panel { display: none; }.history-panel.active { display: block; }
.point-history-table { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(20,26,31,.96); }
.point-history-list { display: block; }
.point-table-row { min-height: 55px; display: grid; grid-template-columns: 55px 1fr 1fr; align-items: stretch; border-top: 1px solid var(--line); }.point-table-row > * { min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; }.point-table-row > * + * { border-left: 1px solid var(--line); }
.point-table-head { min-height: 34px; border-top: 0; background: #1a2228; color: #8d999f; font-size: 9px; }.point-table-head strong:first-of-type { color: #ff839a; }.point-table-head strong:last-child { color: #70d99c; }
.point-average-row { min-height: 48px; background: rgba(210,168,58,.09); }.point-average-row > span { color: #d9bd68; font-size: 9px; font-weight: 900; }.point-average-row > strong { color: #f2cf70; font-size: 14px; }
.point-history-order { flex-direction: column; color: #8a969d; font-size: 8px; font-weight: 850; }.point-history-order small { display: block; margin-top: 3px; padding: 2px 4px; border-radius: 4px; background: rgba(60,116,168,.2); color: #8ebee9; font-size: 6px; }
.point-cell { flex-direction: column; padding: 7px 4px; }.point-cell b, .point-cell small { display: block; max-width: 100%; }.point-cell b { color: #cdd4d8; font-size: 12px; }.point-cell small { overflow: hidden; margin-top: 3px; color: #77838a; font-size: 7px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }.point-cell.hit b { font-size: 14px; }.point-cell.mumei-hit { background: rgba(230,55,91,.1); }.point-cell.mumei-hit b, .point-cell.mumei-hit small { color: #ff8ba1; }.point-cell.ikoma-hit { background: rgba(21,148,71,.11); }.point-cell.ikoma-hit b, .point-cell.ikoma-hit small { color: #73d99e; }.point-cell.empty { color: #566168; font-size: 11px; }.history-point-balance { margin-top: 10px; }
.win-history-group { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(20,26,31,.96); }
.win-history-group > header { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px; border-bottom: 1px solid var(--line); background: #1a2228; }
.win-history-group > header > div { display: flex; align-items: center; gap: 9px; }.win-history-group > header strong { font-size: 12px; }.win-history-group > header small { color: var(--muted); font-size: 9px; }
.current-history-group { border-color: rgba(25,183,189,.32); }.current-history-group > header { background: rgba(25,183,189,.11); }.current-history-group > header small { color: #63d4d5; font-weight: 800; }
.history-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(25,183,189,.12); }
.st-number { min-width: 40px; padding: 5px 6px; border-radius: 8px; background: rgba(230,55,91,.16); color: #ff7892; text-align: center; font-size: 9px; font-weight: 900; }
.win-history-head, .win-history-row { display: grid; grid-template-columns: 62px 54px 1fr 34px; align-items: center; }
.win-history-head { display: none; }
.win-history-row { min-height: 53px; padding: 0 12px; border-top: 1px solid var(--line); }
.win-history-head + .win-history-row { border-top: 0; }.win-history-row > strong { font-size: 16px; }.win-history-row > span { color: #c3cbd0; font-size: 11px; }
.win-history-row > div { min-width: 0; display: flex; align-items: center; gap: 8px; }.win-history-row em { overflow: hidden; color: #dce1e4; font-size: 11px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.win-history-row > div.win-result-flow { flex-wrap: wrap; gap: 5px 7px; padding: 7px 0; }.history-event { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }.history-event em { font-size: 10px; }.win-arrow { color: #70c9c7; font-size: 8px; font-style: normal; font-weight: 900; }.cz-failed { padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.06); color: #7f8b92; font-size: 8px; font-style: normal; font-weight: 800; }
.win-kind { flex: 0 0 auto; min-width: 29px; padding: 5px 4px; border-radius: 7px; text-align: center; font-size: 9px; }
.cz-kind { background: rgba(60,116,168,.2); color: #82bced; }.rb-kind { background: rgba(210,168,58,.17); color: #efca66; }.st-kind { background: rgba(230,55,91,.2); color: #ff7b94; }
.st-win-row { background: linear-gradient(90deg, rgba(230,55,91,.08), transparent); }.st-win-row > strong { color: #ff8ca1; }
.history-edit-button { width: 30px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.04); color: #88959d; font-size: 15px; }
.history-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.history-edit-grid label > span:first-child { display: block; margin: 0 0 6px 2px; color: var(--muted); font-size: 9px; }.history-edit-grid select { width: 100%; height: 51px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: #0e1317; color: white; padding: 0 10px; font-weight: 700; }.history-edit-wide { grid-column: 1 / 3; }.history-edit-wide.hidden { display: none; }
.history-save-button, .history-delete-button { width: 100%; min-height: 48px; border-radius: 12px; font-weight: 900; }.history-save-button { margin-top: 13px; border: 0; background: var(--cyan); color: #062023; }.history-delete-button { margin-top: 9px; border: 1px solid rgba(230,55,91,.38); background: transparent; color: #ff8098; }.history-delete-button.armed { background: var(--red); color: white; }
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 56px; top: 12px; bottom: 15px; width: 1px; background: var(--line); }
.timeline article { display: grid; grid-template-columns: 42px 10px 1fr 24px; gap: 10px; align-items: start; padding: 12px 0; position: relative; }
.timeline time { color: var(--muted); font-size: 10px; padding-top: 2px; }.timeline-dot { margin-top: 3px; z-index: 1; box-shadow: 0 0 0 4px var(--bg); }.timeline b { font-size: 13px; }.timeline p { color: var(--muted); font-size: 10px; margin: 4px 0 0; }.timeline article button { border: 0; background: transparent; color: var(--muted); padding: 0; }
.bottom-nav { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 430px); height: calc(70px + env(safe-area-inset-bottom)); padding: 7px 7px env(safe-area-inset-bottom); background: rgba(12,16,19,.94); backdrop-filter: blur(18px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 20; }
.bottom-nav button { border: 0; background: transparent; color: #7f8b93; font-size: 9px; display: grid; place-items: center; align-content: center; gap: 3px; }
.bottom-nav button span { display: grid; place-items: center; width: 31px; height: 25px; font-size: 19px; font-weight: 700; }
.bottom-nav button.active { color: #5bd7d5; }
.myslot-beta { padding: 6px 9px; border-radius: 9px; background: rgba(60,116,168,.2); color: #86bdec; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.myslot-upload-card, .myslot-preview-card, .myslot-result-card, .myslot-help-card { margin-bottom: 11px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(20,26,31,.96); }.myslot-preview-card.hidden, .myslot-result-card.hidden { display: none; }
.myslot-upload-card { text-align: center; background: linear-gradient(145deg, rgba(28,72,90,.42), var(--surface) 68%); }.myslot-upload-icon { width: 48px; height: 48px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 15px; background: rgba(25,183,189,.15); color: #68d6d6; font-size: 23px; }.myslot-upload-card h3 { font-size: 16px; }.myslot-upload-card p { margin: 8px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.65; }.myslot-upload-card > small { display: block; margin-top: 9px; color: #738088; font-size: 8px; }
.myslot-file-button { min-height: 49px; display: grid; place-items: center; border-radius: 13px; background: var(--cyan); color: #062023; font-size: 12px; font-weight: 900; cursor: pointer; }
.myslot-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }.myslot-card-head h3 { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.myslot-card-head > label, .myslot-card-head > span { flex: 0 0 auto; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.06); color: #8dcfd0; font-size: 8px; font-weight: 800; cursor: pointer; }
.myslot-preview-frame { height: 190px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: #090d10; }.myslot-preview-frame img { width: 100%; height: 100%; object-fit: contain; }
.myslot-result-note { margin: 0 0 11px; color: var(--muted); font-size: 9px; line-height: 1.55; }.myslot-result-list { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }.myslot-result-list > div { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 11px; border-top: 1px solid var(--line); }.myslot-result-list > div:first-child { border-top: 0; }.myslot-result-list span { color: #aeb8be; font-size: 9px; }.myslot-result-list b { text-align: right; font-size: 10px; }
.myslot-apply-button { width: 100%; min-height: 49px; margin-top: 12px; border: 0; border-radius: 12px; background: var(--cyan); color: #062023; font-weight: 900; }.myslot-apply-button.applied { background: #315a51; color: #a8d7cb; }.myslot-help-card h3 { margin-bottom: 11px; font-size: 13px; }.myslot-help-card > div { display: flex; flex-wrap: wrap; gap: 6px; }.myslot-help-card span { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.055); color: #9aa6ad; font-size: 8px; }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; transition: .2s; z-index: 30; }
.bottom-sheet { position: fixed; z-index: 31; left: 50%; bottom: 0; transform: translate(-50%, 105%); width: min(100%, 430px); background: #192027; border-radius: 22px 22px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); transition: .25s ease-out; max-height: 82vh; overflow: auto; }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }.bottom-sheet.open { transform: translate(-50%, 0); }
.sheet-handle { width: 42px; height: 4px; border-radius: 3px; background: #59636b; margin: 2px auto 15px; }
.sheet-title { font-size: 19px; margin-bottom: 6px; }.sheet-options { display: grid; gap: 8px; }.hint-stepper { min-height: 76px; display: grid; grid-template-columns: 54px 1fr 54px; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #222b32; }.hint-stepper > button { border: 0; background: rgba(255,255,255,.045); font-size: 25px; font-weight: 500; }.hint-stepper-minus { color: #ff8098; border-right: 1px solid var(--line) !important; }.hint-stepper-plus { color: #62d9c9; border-left: 1px solid var(--line) !important; }.hint-stepper-value { min-width: 0; display: grid; place-items: center; align-content: center; padding: 8px; text-align: center; }.hint-stepper-value strong, .hint-stepper-value b, .hint-stepper-value small { display: block; }.hint-stepper-value strong { font-size: 12px; }.hint-stepper-value b { margin-top: 2px; color: white; font-size: 16px; }.hint-stepper-value small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 400; }.sheet-cancel { width: 100%; min-height: 48px; margin-top: 12px; border: 0; border-radius: 13px; background: #303940; color: #c9d0d4; }
.lottery-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lottery-sheet-head .sheet-title { margin-bottom: 0; }
.lottery-sheet-head > strong { flex: 0 0 auto; padding: 8px 10px; border-radius: 10px; background: rgba(25,183,189,.14); color: #69d2d3; font-size: 10px; }
.sheet-note { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.lottery-draw-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.lottery-draw-options button { min-width: 0; min-height: 52px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #222b32; color: #d5dbdf; font-size: 11px; font-weight: 800; }
.lottery-draw-options button.active { border-color: var(--cyan); background: rgba(25,183,189,.18); color: #73dcde; }
.vertical-lottery-options { grid-template-columns: 1fr; gap: 7px; }.vertical-lottery-options button { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; text-align: left; }.lottery-option-copy { min-width: 0; display: block; }.lottery-option-copy strong, .lottery-option-copy small { display: block; }.lottery-option-copy strong { font-size: 13px; }.lottery-option-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 500; }.vertical-lottery-options button > b { flex: 0 0 auto; color: #7f8b92; font-size: 9px; }.vertical-lottery-options button.active > b { color: #73dcde; }.vertical-lottery-options button.active .lottery-option-copy small { color: #8ecac9; }
.lottery-clear-button { width: 100%; min-height: 42px; margin-top: 10px; border: 1px solid rgba(230,55,91,.38); border-radius: 11px; background: transparent; color: #ff8098; font-size: 10px; font-weight: 800; }
.snackbar { position: fixed; z-index: 40; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translate(-50%, -18px); width: min(calc(100% - 48px), 360px); min-height: 44px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(238,243,244,.96); color: #11191d; display: flex; justify-content: space-between; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: .18s; box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: 11px; backdrop-filter: blur(14px); }
.snackbar.show { opacity: 1; transform: translate(-50%, 0); }.snackbar button { display: none; flex: 0 0 auto; border: 0; background: transparent; color: #b2193a; font-weight: 800; }.snackbar.has-undo button { display: block; pointer-events: auto; }
@media (min-width: 700px) { body { background: #030506; } .app-shell { box-shadow: 0 0 70px rgba(0,0,0,.75); } }