.theme-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 13px; border: 1px solid #6d6480; border-radius: 9px; background: #282433; color: #e7def4; font: 650 12px "Segoe UI","Malgun Gothic",sans-serif; cursor: pointer; white-space: nowrap; }
.theme-toggle:focus-visible { outline: 3px solid #9c7acb; outline-offset: 3px; }
.guide-header nav { align-items: center; }
.privacy-theme-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
body.readonly .top-actions { display: flex; }
body.readonly .local-tag { display: none; }
html[data-theme=light] { color-scheme: light; color: #202a3b; background: #f4f6fa; --muted: #566276; --line: #d6dce7; --panel: #fff; --purple: #6741a5; --accent: #3f6424; }
html[data-theme=light] body:not(.wheel-only), html[data-theme=light] body[data-tool=pick]:not(.pick-only) { background: #f4f6fa; color: #202a3b; }
html[data-theme=light] .theme-toggle { background: #fff; color: #51416a; border-color: #8c7aa3; }
html[data-theme=light] .topbar { background: #fff; border-color: #d6dce7; }
html[data-theme=light] .brand span { color: #596579; border-color: #c9d1de; }
html[data-theme=light] .eyebrow, html[data-theme=light] .connection-label span, html[data-theme=light] .rule-settings-heading p, html[data-theme=light] .tiny, html[data-theme=light] .participant-help { color: #566276; }
html[data-theme=light] .tiny { font-size: 11px; }
html[data-theme=light] h1 span { color: #37621b; }
html[data-theme=light] .round-badge strong { color: #37621b; }
html[data-theme=light] .panel { border-color: #cbd4e1; box-shadow: 0 3px 14px #32425e05; }
html[data-theme=light] .platform-picker { background: #edf1f7; border-color: #cbd4e1; }
html[data-theme=light] .platform-picker button { color: #49586e; }
html[data-theme=light] .platform-picker button[aria-pressed=true] { background: #d0f59a; color: #23331e; }
html[data-theme=light] #platform-status { color: #634783; }
html[data-theme=light] .status { color: #566276; }
html[data-theme=light] .status[data-state=connected] { color: #32621d; }
html[data-theme=light] .status[data-state=error] { color: #a22d2d; }
html[data-theme=light] .status[data-state=connecting], html[data-theme=light] .status[data-state=reconnecting] { color: #835209; }
html[data-theme=light] label:not(.check,.text-button), html[data-theme=light] .settings .rule-choice { color: #41516a; }
html[data-theme=light] input:not([type=checkbox],[type=file]), html[data-theme=light] select { background: #f8faff; color: #223047; border-color: #7e8a9e; }
html[data-theme=light] input::placeholder { color: #607088; }
html[data-theme=light] :is(button,a,input,select,summary):focus-visible { outline-color: #6f4a99; }
html[data-theme=light] #nickname:read-only { background: #edf1f7; color: #566276; }
html[data-theme=light] .subtle, html[data-theme=light] .secondary { background: #edf1f7; color: #3f4c63; border: 1px solid #7e8a9e; }
html[data-theme=light] .guide-button { background: #f3edf9; border-color: #806b9d; color: #614182; }
html[data-theme=light] .guide-button:hover { background: #eae0f4; }
html[data-theme=light] .rule-settings-heading h2 { color: #243149; }
html[data-theme=light] .rule-save-area { border-color: #cbd4e1; }
html[data-theme=light] .exact-rule-summary { border-color: #cbd4e1; background: #f5f7fb; }
html[data-theme=light] .exact-rule-summary p { color: #52627b; }
html[data-theme=light] .settings .example { color: #36581d; background: #eff7e8; border-color: #a2bf8d; }
html[data-theme=light] .tag { color: #536078; background: #edf1f7; }
html[data-theme=light] .count { color: #37621b; background: #eaf3e1; }
html[data-theme=light] .participant-undo { background: #f2edf8; border-color: #927ca6; color: #604080; }
html[data-theme=light] .list-header { color: #566276; }
html[data-theme=light] .person { border-color: #dce3ed; }
html[data-theme=light] .person-name, html[data-theme=light] .person-name-button { color: #263447; }
html[data-theme=light] .person-name-button:hover { color: #6741a5; }
html[data-theme=light] .person-slot-form .slot-step { background: #edf1f7; border-color: #7e8a9e; color: #34445b; }
html[data-theme=light] .person-remove { background: #fff1f3; border-color: #a66876; color: #8f314d; }
html[data-theme=light] .empty strong, html[data-theme=light] .empty p { color: #59657a; }
html[data-theme=light] th { background: #edf1f7; color: #4a5871; }
html[data-theme=light] td { color: #40516a; border-color: #dce3ed; }
html[data-theme=light] td.positive { color: #356220; }
html[data-theme=light] td.negative { color: #a33347; }
html[data-theme=light] td.table-empty { color: #59657a; }
html[data-theme=light] .tab { color: #566276; }
html[data-theme=light] .tab.active { background: #eee8f5; color: #5c4376; }
html[data-theme=light] .source-badge { background: #eee9f7; color: #604087; }
html[data-theme=light] .source-badge.panda { background: #fff3d5; color: #785806; }
html[data-theme=light] .share-panel a, html[data-theme=light] footer a { color: #604080; }
html[data-theme=light] .guide a { color: #604080; }
html[data-theme=light] .share-panel span, html[data-theme=light] footer, html[data-theme=light] .text-button { color: #53637a; }
html[data-theme=light] .ad-label, html[data-theme=light] .ad-space { color: #657187; }
html[data-theme=light] .ad-space { background: #edf1f6; border-color: #9ca8ba; }
html[data-theme=light] .notice { background: #eef6e7; border-color: #83a96a; color: #34521f; }
html[data-theme=light] .notice.danger { background: #fff1f0; border-color: #b85c53; color: #8c3431; }
html[data-theme=light] .toast { background: #edf8e7; border-color: #6d9455; color: #2d5117; }
html[data-theme=light] .toast.error { background: #fff1f0; border-color: #b85c53; color: #8c3431; }
html[data-theme=light] dialog { background: #fff; color: #202a3b; border-color: #8793a7; }
html[data-theme=light] dialog p { color: #52627a; }
html[data-theme=light] .rule-dialog-heading, html[data-theme=light] .rule-dialog-footer { border-color: #cbd4e1; }
html[data-theme=light] .rule-dialog-footer { background: #f5f7fb; }
html[data-theme=light] .rule-dialog .exact-rule { background: #f8faff; border-color: #cbd4e1; }
html[data-theme=light] .rule-dialog .exact-range { color: #53627b; }
html[data-theme=light] .rule-dialog .exact-example { color: #365e1f; }
html[data-theme=light] .rule-dialog .rule-editor-error { color: #9c2c34; }
html[data-theme=light] .tool-tabs { background: #fff; border-color: #cbd4e1; }
html[data-theme=light] .tool-tabs button { color: #536078; }
html[data-theme=light] .tool-tabs button[aria-selected=true] { background: #d8c8f3; color: #38264d; }
html[data-theme=light] .pick-heading h1 span, html[data-theme=light] .pick-spark { color: #694099; }
html[data-theme=light] .pick-heading > div > p:last-child { color: #596579; }
html[data-theme=light] .pick-card { background: #fff; border-color: #cbd4e1; }
html[data-theme=light] .pick-card .eyebrow { color: #67508e; font-size: 10px; }
html[data-theme=light] .pick-card h2 { color: #2d2640; }
html[data-theme=light] .pick-fields label, html[data-theme=light] .pick-card form > label { color: #52627a; }
html[data-theme=light] .pick-hint, html[data-theme=light] .pick-storage-note, html[data-theme=light] .pick-footer, html[data-theme=light] .pick-roster-label { color: #59657b; }
html[data-theme=light] .pick-primary { background: #d7c4f3; color: #38244c; }
html[data-theme=light] .pick-secondary { background: #eee8f5; color: #5c4376; }
html[data-theme=light] #pick-link { background: #f7f4fb; border-color: #8c7ca5; color: #604087; }
html[data-theme=light] .pick-card .pick-mode-choice { background: #f4eff9; border-color: #9582ad; color: #4b3664; }
html[data-theme=light] .pick-approved { color: #536078; }
html[data-theme=light] .pick-approved strong { color: #614287; }
html[data-theme=light] .pick-visitor { background: #f4f0f8; border-color: #8c7ca5; color: #5b4376; }
html[data-theme=light] .pick-visitor[data-approved=true] { background: #ecf5e4; border-color: #6d9153; color: #315519; }
html[data-theme=light] .pick-participant-card { background: #f5f0fa; border-color: #9d8baf; }
html[data-theme=light] .pick-participant-card strong { color: #604080; }
.pick-cell { color: #080c12; }
.pick-board-top .eyebrow, #pick-status, .pick-empty p { opacity: 1; }
html[data-theme=light] .guide-header { background: #fff; border-color: #cbd4e1; }
html[data-theme=light] .jump a { color: #4b596e; background: #fff; border-color: #a2aebe; }
html[data-theme=light] .jump a:hover { background: #edf2f7; }
html[data-theme=light] .card { background: #fff; border-color: #cbd4e1; box-shadow: 0 3px 14px #32425e05; }
html[data-theme=light] .step { background: #d4f2a8; color: #294217; }
html[data-theme=light] strong { color: #243149; }
html[data-theme=light] .wheel-hub strong { color: #f2f3f9; }
html[data-theme=light] .ui { background: #ede5f6; color: #604080; }
html[data-theme=light] .note { background: #f4effb; border-color: #9275b0; color: #4e5b73; }
html[data-theme=light] .example { background: #f1f7e9; border-color: #9cbb83; }
html[data-theme=light] .sample-row span { background: #e9f3db; color: #35591f; }
html[data-theme=light] .mini { background: #f5f7fb; border-color: #c7d0dd; }
html[data-theme=light] .mini h3 { color: #604080; }
html[data-theme=light] .math { color: #35591f; }
html[data-theme=light] details, html[data-theme=light] .guide-footer { border-color: #cbd4e1; }
html[data-theme=light] details p, html[data-theme=light] .sample-caption, html[data-theme=light] .guide-footer { color: #53637a; }
html[data-theme=light] .guide-footer a { color: #604080; }
html[data-theme=light] .skip { background: #e3f1d5; color: #263e19; }
.sample-cell.win { background: #349c72; color: #080c12; }
.sample-cell.lose { background: #d85e71; color: #080c12; }
.sample-cell:not(.win,.lose) { color: #080c12; }
.guide-header ~ main p, .guide-header ~ main li { font-size: 16px; }
html[data-theme=dark] .tiny { color: #a6afc1; }
html[data-theme=dark] .identity-note, html[data-theme=dark] footer { color: #a0aabe; }
@media(max-width:480px) { .top-actions { gap: 10px; } .theme-toggle { padding: 8px 10px; min-height: 36px; } }
@media(max-width:730px) {
  .rule-dialog .exact-rules { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:480px) {
  .rule-dialog .exact-rule { grid-template-columns: minmax(0,1fr); grid-template-areas: 'quantity' 'match' 'slots' 'calculation' 'range' 'example'; }
  .settings .exact-rule-summary { flex-direction: column; align-items: stretch; }
  .settings .exact-rule-summary button { width: 100%; max-width: none; }
}
@media(max-width:730px) and (pointer:coarse) {
  body:not(.wheel-only):not(.pick-only) input:not([type=checkbox],[type=file]),
  .rule-dialog input:not([type=checkbox]), .rule-dialog select { font-size: 16px; min-height: 44px; }
  .settings select { font-size: 14px; min-height: 44px; }
  .settings label:not(.check), .settings .rule-choice, .pick-fields label { font-size: 12px; }
  .settings .input-unit > span { top: 15px; }
  .person-slot-form { height: 50px; grid-template-columns: minmax(0,1fr) 40px; }
  .person-slot-form input { height: 50px; }
  .person-slot-form .input-unit > span { top: 18px; }
  .slot-stepper { height: 50px; }
  .person-slot-form .slot-step { height: 24px; font-size: 11px; }
  .person-name-form input { height: 44px; }
}