:root { color-scheme: light; --ink:#13231d; --green:#146342; --deep:#12372a; --paper:#f7f8f4; --line:#d2d9d2; --warn:#8a4c00; --danger:#a52a2a; }
* { box-sizing:border-box; }
body { margin:0; background:#e9eee8; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; font-size:17px; line-height:1.45; }
button,input,select { font:inherit; } button { cursor:pointer; touch-action:manipulation; } .app-shell { max-width:560px; min-height:100vh; margin:auto; padding:max(24px, env(safe-area-inset-top)) 18px calc(36px + env(safe-area-inset-bottom)); background:var(--paper); }
header { margin-bottom:26px; } .eyebrow { margin:0 0 2px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.12em; } h1 { margin:0; font-size:31px; } h2 { margin:0 0 8px; font-size:22px; } .guide,.small-guide { color:#56645d; margin:0 0 20px; } .small-guide { font-size:14px; }
form,fieldset { display:grid; gap:15px; } fieldset { margin:0; padding:16px; border:1px solid var(--line); border-radius:14px; } legend { padding:0 5px; font-weight:700; } label { display:grid; gap:6px; font-weight:700; } input,select { width:100%; min-height:52px; padding:10px 12px; border:1px solid #9faaa3; border-radius:10px; background:#fff; color:var(--ink); } input:focus,select:focus,button:focus-visible { outline:3px solid #82c7a9; outline-offset:2px; }
.lot-total-status { margin:0; padding:10px 12px; border-radius:9px; background:#edf1ed; font-weight:800; } .lot-total-status.matches { background:#d8f1df; color:#135b2d; } .lot-total-status.mismatch { background:#fff1d9; color:#714000; }
.choice-row,.two-columns,.secondary-actions,.button-stack { display:flex; gap:10px; } .choice-row label { display:flex; align-items:center; gap:6px; font-weight:600; } .choice-row input { width:22px; min-height:auto; height:22px; } .two-columns > * { flex:1; min-width:0; } .trip-settings { background:#f1f4ef; }.lot-row { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; } .lot-row button { min-height:52px; width:52px; }
.destination-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.destination-choice { display:block; position:relative; }.destination-choice input { position:absolute; opacity:0; }.destination-choice span { display:grid; min-height:62px; place-items:center; border:2px solid #b8c5bb; border-radius:11px; background:#fff; font-weight:800; }.destination-choice input:checked + span { border-color:var(--green); background:#d8f1df; color:#103f25; }.destination-choice input:focus-visible + span { outline:3px solid #82c7a9; outline-offset:2px; }
.field-label { margin:0 0 6px; font-weight:700; }.vehicle-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }.vehicle-grid .destination-choice span { min-height:52px; font-size:15px; }
button { min-height:55px; padding:12px 16px; border:0; border-radius:12px; font-weight:800; } .primary { width:100%; background:var(--green); color:#fff; font-size:19px; } .secondary { flex:1; background:#e0e8e2; color:var(--deep); } .small-button { min-height:46px; width:max-content; } .text-button { min-height:44px; padding:8px 0; background:none; color:var(--green); text-decoration:underline; } .danger { color:var(--danger); }
.error,.warning { margin:14px 0; padding:12px; border-radius:10px; font-weight:700; } .error { color:#8a1616; background:#ffe8e8; } .warning { color:#714000; background:#fff1d9; } .summary-card,.lot-card { border:1px solid var(--line); border-radius:15px; padding:17px; background:#fff; } .summary-card p { margin:5px 0; } .summary-card ul { margin:8px 0 0; padding-left:24px; } .button-stack { flex-direction:column; margin-top:18px; }
.destination-locked { margin:0 0 12px; color:#526159; font-size:13px; font-weight:700; }
.remaining-panel { display:flex; justify-content:center; align-items:baseline; gap:8px; margin:0 -18px 15px; padding:20px 12px; background:var(--deep); color:#fff; } .remaining-panel strong { font-size:64px; line-height:1; letter-spacing:-.05em; } .work-meta { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; color:#40534a; font-weight:700; font-size:14px; }.work-meta span { padding:4px 8px; background:#e4ebe5; border-radius:999px; }.lot-card-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }.lot-card-head h2 { font-size:18px; }.lot-card-head span { color:#526159; font-size:14px; }.lot-select-label { font-size:14px; }.lot-count { margin:12px 0 0; font-size:19px; font-weight:800; }.primary-action { margin:18px 0 10px; }.add-eight { width:100%; min-height:124px; border-radius:18px; background:var(--green); color:#fff; font-size:39px; }.secondary-actions { margin-bottom:10px; }.custom-panel { display:flex; gap:8px; align-items:end; padding:12px; background:#e9f0ea; border-radius:12px; }.custom-panel label { flex:1; font-size:14px; }.custom-panel button { flex:0 0 auto; }.undo { width:100%; margin-top:14px; background:#efe4d9; color:#623613; }.latest-time { text-align:center; color:#56645d; font-size:14px; }.completion { margin:15px 0; padding:14px; border-radius:12px; background:#d8f1df; color:#135b2d; font-weight:800; text-align:center; } details { margin-top:28px; padding-top:14px; border-top:1px solid var(--line); } summary { cursor:pointer; font-weight:800; } #work-summary { padding:12px 0; }
.lot-selector { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; }.lot-choice { min-height:68px; padding:9px; border:2px solid #b8c5bb; background:#fff; color:var(--ink); text-align:left; }.lot-choice span { display:block; color:#526159; font-size:13px; }.lot-choice.selected { border-color:var(--green); background:#d8f1df; color:#103f25; }.lot-choice.selected span { color:#135b2d; }.lot-choice.empty { opacity:.55; }
@media (max-width:380px) { .lot-row { grid-template-columns:1fr 1fr; }.lot-row button { grid-column:span 2; width:100%; }.remaining-panel strong { font-size:56px; }.custom-panel { flex-wrap:wrap; }.custom-panel button { width:100%; } }
.destination-plan { margin-bottom:18px; background:#fbfdf9; box-shadow:0 1px 3px rgba(18,55,42,.08); }.destination-plan > .remove-destination { justify-self:end; margin:-8px 0 -4px; }.destination-card { margin:14px 0; border:1px solid var(--line); border-radius:15px; padding:17px; background:#fff; }.destination-card h2 { font-size:18px; }.destination-card .small-guide { margin-bottom:10px; }.destination-selector { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }.destination-work-choice { min-height:70px; padding:9px; border:2px solid #b8c5bb; border-radius:12px; background:#fff; color:var(--ink); text-align:left; }.destination-work-choice span { display:block; color:#526159; font-size:13px; }.destination-work-choice.selected { border-color:var(--green); background:#d8f1df; color:#103f25; }.destination-work-choice.selected span { color:#135b2d; }.destination-work-choice.empty { opacity:.55; }.summary-card { margin:10px 0; }.plan-edit-form { margin-top:12px; padding:14px; border-radius:12px; background:#edf4ed; }.edit-plan-title { margin:0; font-weight:800; }.loaded-note { grid-column:1 / -1; margin:0; color:#526159; font-size:13px; }.compact-primary { min-height:52px; font-size:16px; }