@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Lato:wght@400;700&display=swap');

/* Trackside: warm paper, racing green, precise numbers. */
:root{color-scheme:light;font-family:'Lato','Noto Sans JP',sans-serif;font-synthesis:none;background:#e6e8df;color:#233d32;--ink:#233d32;--green:#214f3b;--muted:#778177;--line:#dedfd5;--paper:#f5f4ed;--card:#fffefa;--red:#b84a47}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:wait}button:focus-visible{outline:1px solid #6a806c;outline-offset:3px}input:focus,select:focus{outline:none;box-shadow:none}a{color:inherit;text-underline-offset:3px}
.shell{max-width:640px;min-height:100dvh;margin:auto;padding-bottom:40px;background:var(--paper)}
header{display:flex;align-items:center;gap:20px;padding:32px 24px 26px;border-top:5px solid var(--green)}
#main-title{flex:1;min-width:0;font-size:23px;line-height:1.55;letter-spacing:-.035em;font-weight:700;margin:0;overflow-wrap:anywhere}
h2{font-size:15px;line-height:1.5;letter-spacing:.025em;font-weight:600;margin:0}
.settings-button{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;padding:0;border:1px solid #ced2c6;border-radius:50%;background:transparent;color:#657364;transition:background .15s,color .15s}
.settings-button:hover,.settings-button.active{background:var(--green);color:#fff;border-color:var(--green)}
nav{display:flex;gap:6px;margin:0 24px;padding:5px;background:#e8eadf;border:1px solid #e0e3d7;border-radius:8px}
nav button{flex:1;border:0;border-radius:5px;background:none;color:#7a8276;padding:11px 6px;font-size:12px;font-weight:600;letter-spacing:.04em;transition:background .15s,color .15s}
nav button:hover{color:var(--ink)}nav button.active{background:var(--card);color:var(--green);box-shadow:0 1px 4px #243b3010}
#main{padding-top:22px}
.person-picker{display:flex;padding:0 24px 16px}
select{min-width:0;width:100%;padding:12px 42px 12px 14px;border:1px solid #cdd3c6;border-radius:6px;background:var(--card);color:var(--ink);font-size:15px}
.person-picker select{font-weight:700;height:48px;letter-spacing:.025em}
.select-wrap{position:relative;display:block;min-width:0;width:100%}.select-wrap select{appearance:none;-webkit-appearance:none;background-image:none;width:100%;margin-top:0;padding-right:42px}
.select-wrap::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;border-right:1.5px solid #76836f;border-bottom:1.5px solid #76836f;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.summary{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:18px;margin:0 24px;padding:25px 22px 27px;border:1px solid #264e3d;border-radius:9px;background:var(--green);color:#fffdf3;box-shadow:0 6px 16px #233d3210}
.profit-block{flex:1;min-width:0}.summary small{display:block;margin-bottom:9px;font-size:10px;letter-spacing:.08em;font-weight:400;color:#ccd6c4}
.summary strong{display:block;font-size:clamp(28px,8.2vw,40px);line-height:1.15;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.summary .rate{flex-shrink:0;padding-left:18px;border-left:1px solid #ffffff24;text-align:right}.summary .rate strong{font-size:21px;font-weight:400;color:#dfdfba;letter-spacing:.01em}
.summary .positive,.summary .zero{color:#fffdf3}.summary .negative{color:#ffb4a6}
.currency-unit{display:inline-block;font-family:'Noto Sans JP',sans-serif;font-size:max(10px,.48em);font-weight:400;letter-spacing:0;margin-left:.35em;vertical-align:baseline;opacity:.75}
.races{display:grid;gap:14px;padding:20px 24px 0}
.race{position:relative;padding:18px 18px 20px;border:1px solid #e0e2d7;border-radius:9px;background:var(--card);box-shadow:0 2px 3px #2a3c2603}
.race-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}
.race-no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:27px;padding:0 8px;background:#e8eee3;border:1px solid #e0e7d9;border-radius:4px;color:var(--green);font-size:13px;font-weight:700;letter-spacing:.035em}
.start-time{display:flex;align-items:baseline;gap:7px}.start-time>span{font-size:10px;color:#8b9387}.start-time time{font:400 13px 'Lato',sans-serif;color:#697764;letter-spacing:.02em}.time-unset{font-size:10px;color:#91998b}
.race-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.race-name{flex:1;min-width:0;color:#65715f;font-size:12px;font-weight:400;line-height:1.85;overflow-wrap:anywhere}.race-name a,.race-name a:hover,.race-name a:visited{color:inherit;text-decoration:none}
.race-result{flex:0 1 auto;min-width:0;text-align:right}.race-profit{display:block;font-size:29px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.positive{color:#24563d}.negative{color:var(--red)}.zero{color:#7c8678}
.money-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding-top:16px;border-top:1px solid #ecece3}
label{display:block;font-size:10px;color:#7e8678;letter-spacing:.025em}
input{min-width:0;width:100%;padding:12px;margin-top:7px;border:1px solid #dce0d3;border-radius:5px;background:#fffefa;color:var(--ink);font-size:16px;transition:border-color .15s}
input::placeholder{color:#a8aea0}input:hover{border-color:#c2cbb9}input:focus{border-color:#a4b49a}
.money-wrap{position:relative}.money-wrap input{padding:10px 28px 10px 12px;background:#f3f5ee;border-color:#e4e8dc;font-size:17px;font-variant-numeric:tabular-nums;text-align:right}.money-wrap input:focus{border-color:#b7c5ac}.money-wrap span{position:absolute;right:12px;top:23px;font-size:10px;color:#919986}
.primary,.secondary,.danger{padding:12px 16px;border:1px solid #d6dccd;border-radius:6px;font-size:12px;font-weight:600;background:var(--card);color:var(--green)}.primary{background:var(--green);color:#fffefa;border-color:var(--green)}.primary:hover{background:#2c6148}.secondary:hover{background:#e9eee1}.danger{color:#a7574c;border-color:#dfd0c7;background:#faf3ec}.danger:hover{background:#f5e7dc}
.empty{text-align:center;padding:48px 24px}.empty-icon{font-size:28px;color:#849d75}.empty h2{margin:18px 0 10px}.empty p{font-size:12px;color:var(--muted);line-height:1.9}
.settings{padding:0 24px}.settings section{padding:22px 18px;margin-bottom:16px;border:1px solid #e0e2d7;border-radius:9px;background:var(--card)}.settings h2{margin-bottom:20px}.settings p{font-size:11px;line-height:1.9;color:var(--muted)}
.person-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}.person-row input{margin:0}.person-row button{flex-shrink:0}.add-form{display:flex;gap:8px;align-items:end;margin-top:20px}.add-form label{flex:1;min-width:0}
.setting-race{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px 10px;align-items:center;padding:18px 0;border-bottom:1px solid #e8eade}.setting-race:last-child{border-bottom:0;padding-bottom:0}.setting-race>label{font-size:12px;font-weight:700;color:var(--green)}.setting-race input{margin:0;font-size:14px}.setting-race input[type=time]{grid-column:2;width:130px}.setting-race input[data-race-link]{grid-column:2}
.calendar-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:18px}.calendar-fields>label{min-width:0}.calendar-fields input,.calendar-fields select{min-width:0;max-width:100%;width:100%;height:46px}.calendar-fields .select-wrap,.calendar-preview .select-wrap{margin-top:7px}.calendar-fields select,.calendar-preview select{font-size:14px}
.calendar-preview{padding:16px;margin-top:20px;border:1px solid #d8e0ce;border-radius:6px;background:#f0f4e9}.calendar-preview h3{font-size:13px;font-weight:700;margin:0 0 12px}.calendar-preview ol{list-style:none;padding:0;margin:0 0 18px}.calendar-preview li{padding:10px 0;border-bottom:1px solid #dce4d4;font-size:11px;line-height:1.8;overflow-wrap:anywhere}.preview-race{display:flex;justify-content:space-between;margin-bottom:4px}.preview-race b{font-weight:700}.preview-race time{color:#76846b;font-variant-numeric:tabular-nums}#calendar-result{font-size:12px;line-height:1.8}
.comparison{container-type:inline-size;padding:0 16px}.table-scroll,.comparison-head-scroll{overflow-x:auto;scrollbar-width:none}.table-scroll::-webkit-scrollbar,.comparison-head-scroll::-webkit-scrollbar{display:none}
.comparison-sticky{position:sticky;top:0;z-index:5;background:var(--green);border-radius:7px 7px 0 0}
table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;font-variant-numeric:tabular-nums}.comparison table{width:100%;min-width:calc(104px + var(--people) * ((100cqw - 104px) / 2))}
th,td{padding:20px 10px;border-bottom:1px solid #e2e5d9;text-align:right;font-size:16px;font-weight:700;background:var(--card)}
.comparison th,.comparison td{padding-inline:10px}.comparison tbody tr:nth-child(even) td{background:#f0f3e9}
th:first-child,td:first-child{position:sticky;left:0;width:104px;z-index:1;background:#eef1e5}.compare-race{text-align:left;font-size:11px;line-height:1.8;font-weight:400;overflow-wrap:anywhere;color:#65745d}.compare-race>span:first-child{display:block;font-size:11px;font-weight:700;color:var(--green);margin-bottom:5px}.compare-race>span:last-child{display:block}
thead th{background:var(--green);color:#fffdf3;vertical-align:top;padding:22px 10px;border-bottom:1px solid #38634b}thead th:first-child{background:var(--green);color:#c9d3bf;font-size:10px;font-weight:400;vertical-align:middle;text-align:left}
.person-name{display:block;font-size:12px;font-weight:400;color:#cbd7c1;margin-bottom:13px;overflow-wrap:anywhere}thead .total{display:block;font-size:clamp(13px,4.8cqw,23px);font-weight:700;white-space:nowrap}thead .positive,thead .zero{color:#fffdf3}thead .negative{color:#ffb4a6}thead .recovery{display:block;color:#d9dcaf;font-size:10px;font-weight:400;margin-top:9px}
.accessible-table-head{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.comparison-head-scroll th{position:static}.comparison-head-scroll th:first-child{position:sticky;left:0;z-index:1}
.dialog-actions{display:flex;justify-content:end;gap:8px;margin-top:20px}#save-error{margin:16px 24px 0;padding:12px;border:1px solid #e0bfb1;border-radius:6px;background:#f9eae0;color:#9b5141;font-size:12px;line-height:1.7}#save-error button{margin-left:8px;border:0;background:none;color:inherit;text-decoration:underline}
#day-profit,.race-profit,thead .total,.comparison td{letter-spacing:.02em}
@media(min-width:700px){.shell{margin:32px auto;border:1px solid #d5dacb;border-radius:12px;min-height:calc(100dvh - 64px);box-shadow:0 12px 50px #33432b0a}header{border-radius:11px 11px 0 0;padding-top:36px}.summary strong{font-size:42px}}
@media(max-width:600px){.calendar-fields{grid-template-columns:minmax(0,1fr);gap:16px}.calendar-fields input[type=date]{appearance:none;-webkit-appearance:none;display:block}.calendar-fields input[type=date]::-webkit-date-and-time-value{text-align:left}}
@media(max-width:360px){header{padding-inline:18px}nav{margin-inline:18px}.person-picker{padding-inline:18px}.summary{margin-inline:18px;padding-inline:16px;gap:12px}.summary .rate{padding-left:12px}.summary .rate strong{font-size:18px}.races{padding-inline:18px}.race{padding:16px}.race-head{gap:10px}.race-profit{font-size:26px}.comparison{padding-inline:12px}.settings{padding-inline:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Restore the minimal black interface. */
:root{color-scheme:dark;background:#000;color:#f2f2f2;--ink:#eee;--green:#ededed;--muted:#929292;--line:#242424;--paper:#080808;--card:#101010;--red:#c44444}
.shell{background:#080808;border-color:#202020;box-shadow:none;border-radius:0}
header{border-top:0;border-radius:0;padding:30px 24px 26px}
#main-title{font-size:22px;font-weight:500;letter-spacing:-.045em}
.settings-button{border-color:#303030;border-radius:5px;color:#888;background:none}.settings-button:hover,.settings-button.active{background:#161616;color:#eee;border-color:#303030}
nav{gap:20px;margin:0;padding:0 24px;background:none;border:0;border-bottom:1px solid #242424;border-radius:0}
nav button{padding:16px 0;border:0;border-bottom:1px solid transparent;border-radius:0;color:#888;font-weight:500;letter-spacing:.02em;background:none}
nav button:hover,nav button.active{color:#f5f5f5;background:none;box-shadow:none}nav button.active{border-bottom-color:#eee}
#main{padding-top:24px}.person-picker{padding:0 24px 12px}
select{background:#101010;border-color:#303030;color:#eee}.person-picker select{border-color:#3a3a3a;height:auto;font-weight:500;letter-spacing:.015em}.select-wrap::after{border-color:#aaa}
.summary{align-items:end;gap:16px;margin:0 24px;padding:28px 0 30px;background:#080808f5;backdrop-filter:blur(16px);border:0;border-bottom:1px solid #363636;border-radius:0;box-shadow:none}
.summary small{color:#8b8b8b;letter-spacing:.06em;margin-bottom:10px}.summary strong{font-size:clamp(27px,8.5vw,40px);font-weight:500;line-height:1.2}
.summary .rate{padding:0 0 2px;border:0}.summary .rate strong{font-size:19px;font-weight:400;color:#aaa;letter-spacing:-.035em}
.summary .positive,.summary .zero{color:#fafafa}.summary .negative{color:#c44444}
.races{gap:14px;padding:20px 24px 0}.race{padding:20px;background:#101010;border-color:#292929;border-radius:10px;box-shadow:none}
.race-meta{margin-bottom:18px}.race-no{display:inline;min-width:0;height:auto;padding:0;border:0;border-radius:0;background:none;color:#d0d0d0;font-weight:500;font-size:13px}
.start-time>span{color:#777}.start-time time{color:#999;font-size:12px}.time-unset{color:#666}.race-name{color:#b4b4b4;line-height:1.9}.race-profit{font-size:30px;font-weight:500;line-height:1.2}
.positive{color:#fafafa}.zero{color:#c2c2c2}.negative{color:#c44444}
.money-fields{gap:14px;padding-top:0;border-top:0}label{color:#929292;letter-spacing:0}input{background:#101010;border-color:#2a2a2a;color:#eee;border-radius:4px;margin-top:8px}input::placeholder{color:#555}input:hover{border-color:#555}input:focus{border-color:#444}
.money-wrap input{background:#080808;border-color:#303030;font-size:17px;padding-block:11px}.money-wrap input:focus{border-color:#444}.money-wrap span{color:#666;top:25px}
.primary,.secondary,.danger{font-weight:500;border-radius:5px}.primary{background:#ededed;color:#080808;border-color:#ededed}.primary:hover{background:#ccc}.secondary,.danger{background:#111;color:#eee;border-color:#333}.secondary:hover,.danger:hover{background:#222}
.empty-icon{color:#666}.settings{padding:0 24px}.settings section{padding:8px 0 30px;margin-bottom:24px;border:0;border-bottom:1px solid #242424;border-radius:0;background:none}.settings h2{font-weight:500;letter-spacing:.02em;margin-bottom:18px}
.setting-race{padding:0;margin:18px 0;border:0}.setting-race>label{color:#929292;font-size:10px;font-weight:400}.calendar-preview{background:#101010;border-color:#292929}.calendar-preview li{border-color:#262626}.preview-race time{color:#999}
.comparison-sticky{background:#101010;border-radius:0}th,td{background:#080808;border-bottom-color:#242424;font-weight:500}.comparison th,.comparison td{padding-inline:12px}.comparison td{font-size:17px}.comparison tbody tr:nth-child(even) td{background:#080808}
th:first-child,td:first-child{background:#080808}thead th,thead th:first-child{background:#101010;border-bottom-color:#444}thead th:first-child{color:#888}.person-name{color:#b5b5b5}thead .total{font-weight:500;font-size:clamp(13px,5cqw,22px)}thead .positive,thead .zero{color:#fafafa}thead .negative{color:#c44444}thead .recovery{color:#888}.compare-race{color:#bbb}.compare-race>span:first-child{color:#929292;font-weight:400}
#save-error{background:#151515;color:#eee;border-color:#444}
@media(min-width:700px){.summary strong{font-size:44px}}
@media(max-width:360px){header{padding-inline:20px}nav{margin:0}.person-picker{padding-inline:24px}.summary{margin-inline:20px;padding-inline:0;gap:16px}.summary .rate{padding-left:0}.summary .rate strong{font-size:17px}.races{padding-inline:20px}.race{padding:16px}.race-head{gap:10px}.race-profit{font-size:27px}.settings{padding-inline:24px}}

.race-name{color:#f2f2f2}.race-no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:27px;padding:0 8px;border:1px solid #383838;border-radius:4px;background:#1a1a1a;color:#eee}
.race-name{font-size:14px}
.race-profit{font-size:24px}

/* Shared-space entry */
.entering nav,.entering header{display:none}
.entering .shell{min-height:100dvh;margin:0 auto;padding-bottom:0;border:0}
.entering #main{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 0}
.entry-form{width:100%;max-width:340px;margin:0 auto;padding:0 12px;display:flex;flex-direction:column;align-items:stretch}
.entry-form img{align-self:center;image-rendering:pixelated;margin-bottom:28px}
.entry-form p{text-align:center;color:#888;font-size:13px;margin:0 0 32px}
.entry-form input{text-align:center;width:100%;min-height:50px;background:#101010;border:1px solid #333;color:#fff;border-radius:8px;padding:12px 14px;font-size:16px}
.entry-form .primary{margin-top:14px;min-height:48px}
.entry-form #entry-error{color:#c44444;margin-top:16px}
.space-phrase{overflow-wrap:anywhere;color:#eee!important;font-size:16px!important}
.space-exit button{width:100%;min-height:46px}

.entry-form #entry-error:empty{display:none}

.title-heading{flex:1;min-width:0;margin:0;font-size:inherit}
#main-title{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left}
.settings-close,.settings-button.active .settings-gear{display:none}
.settings-button.active .settings-close{display:block}
.settings-open nav[aria-label="メインメニュー"]{display:none}