:root { --ink:#11251a; --green:#12653c; --green-dark:#0b4026; --cream:#f8f6ee; --line:#d8ded4; --muted:#637168; --blue:#075f8f; --orange:#9a5600; --red:#8c241e; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--cream); font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:1.45; }
.topbar { min-height:66px; padding:13px max(20px, calc((100vw - 1000px) / 2)); display:flex; align-items:center; justify-content:space-between; gap:15px; color:#fff; background:var(--green-dark); }
.brand { color:#fff; text-decoration:none; font-weight:800; letter-spacing:.1em; } .brand span { font-weight:400; font-size:.8rem; letter-spacing:0; margin-left:8px; } .container { width:min(1000px, calc(100% - 32px)); margin:28px auto 56px; }
h1 { font-size:clamp(1.65rem, 5vw, 2.25rem); line-height:1.15; margin:4px 0 10px; } h2 { font-size:1.2rem; margin:0 0 12px; } p { margin:0 0 14px; } .eyebrow { font-size:.78rem; font-weight:800; color:var(--green); letter-spacing:.12em; margin-bottom:3px; } .muted, .optional { color:var(--muted); } .optional { font-weight:normal; }
.card, .hero-card, .form-card, .login-card, .search-hero { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 2px 10px rgba(17,37,26,.05); margin-bottom:16px; } .hero-card, .search-hero { border-top:6px solid var(--green); } .compact { padding:21px 24px; } .login-card, .form-card, .search-hero { max-width:600px; margin:45px auto; } .order-summary { font-size:1.08rem; color:var(--muted); }
.stack { display:grid; gap:17px; } label { display:grid; gap:7px; font-weight:700; } input, textarea { width:100%; border:2px solid #bcc8bd; border-radius:10px; background:#fff; color:var(--ink); padding:13px; min-height:50px; font:inherit; } input:focus, textarea:focus { outline:3px solid #a6d7ba; border-color:var(--green); }
.date-fields { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.station-picker { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }.station-picker legend { padding:0; margin-bottom:8px; font-weight:700; }.station-option { position:relative; min-height:58px; display:flex; align-items:center; justify-content:center; border:2px solid #bcc8bd; border-radius:10px; padding:10px; cursor:pointer; text-align:center; font-weight:800; }.station-option input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }.station-option:has(input:checked) { border-color:var(--green); background:#e5f1e8; color:var(--green-dark); box-shadow:0 0 0 3px #a6d7ba; }.station-option:has(input:focus-visible) { outline:3px solid #a6d7ba; outline-offset:2px; }
.search-form { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; margin-top:22px; }.search-form label { grid-column:1 / -1; }.search-form input { font-size:1.2rem; font-weight:700; }.search-form .button { min-height:50px; }
.button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border:0; border-radius:10px; font:inherit; font-weight:800; text-decoration:none; cursor:pointer; text-align:center; } .primary { color:#fff; background:var(--green); } .primary:hover { background:#0d512f; } .secondary { color:var(--green-dark); background:#e5f1e8; } .complete { color:#fff; background:var(--blue); } .large { width:100%; min-height:70px; font-size:1.16rem; margin-top:5px; } .link-button { border:0; background:transparent; color:#fff; text-decoration:underline; cursor:pointer; font:inherit; padding:0; }.account { display:flex; align-items:center; gap:11px; font-size:.86rem; }.account form { margin:0; }.topnav { display:flex; gap:12px; }.topnav a { color:#fff; font-weight:700; font-size:.9rem; text-underline-offset:3px; }
.progress-wrap { height:16px; border-radius:999px; overflow:hidden; background:#e5eae4; margin:18px 0 7px; }.progress { height:100%; background:linear-gradient(90deg, #1a8a53, #57ad71); }.progress-label { display:block; color:var(--green-dark); font-size:.94rem; }
.status { padding:14px; border-radius:10px; font-weight:600; margin:20px 0 0; }.waiting { background:#fff2da; color:var(--orange); }.active { background:#dff1fb; color:#075078; }.done { background:#e4f5e8; color:#175a30; }.locked { background:#f9e4e2; color:var(--red); }
.stage-list { padding:0; margin:0; list-style:none; }.stage-list li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); color:#69756d; }.stage-list li:last-child { border:0; }.stage-dot { width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; background:#e8ece8; font-weight:800; }.stage-list .completed { color:#1b6539; }.stage-list .completed .stage-dot { background:#21834d; color:#fff; }.stage-list .current { color:var(--ink); font-weight:800; }.stage-list .current .stage-dot { background:#0f6a3e; color:#fff; }.stage-list small { margin-left:auto; font-weight:700; color:var(--blue); }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 19px; }.order-grid { display:grid; gap:10px; }.order-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px; border:1px solid var(--line); border-radius:12px; background:#fff; text-decoration:none; color:inherit; }.order-row:hover { border-color:var(--green); }.order-row strong, .order-row span { display:block; }.order-row span { color:var(--muted); font-size:.9rem; }.deadline-chip { display:inline-block; margin-top:7px; border-radius:7px; padding:4px 7px; font-size:.78rem; font-weight:800; }.row-status { text-align:right; font-weight:700; font-size:.92rem; }.row-status small { display:block; font-size:.82rem; }.date-summary { display:flex; flex-wrap:wrap; gap:22px; margin-top:15px; }.date-summary span { color:var(--muted); font-size:.88rem; }.date-summary strong { display:block; color:var(--ink); font-size:1rem; }.deadline-card { display:grid; gap:3px; margin-top:17px; padding:13px; border-radius:10px; }.deadline-card span { font-size:.86rem; }.normal { color:#175a30; background:#e4f5e8; }.soon { color:#875100; background:#fff2da; }.urgent { color:#963c00; background:#ffe5bf; }.overdue { color:#8c241e; background:#f9e4e2; }.deadline-text.normal { color:#175a30; }.deadline-text.soon { color:#875100; }.deadline-text.urgent { color:#963c00; }.deadline-text.overdue { color:#8c241e; font-weight:800; }.qr-card { display:flex; justify-content:space-between; align-items:center; gap:22px; }.qr { display:block; flex:none; width:190px; height:190px; border:8px solid #fff; image-rendering:pixelated; }.break-url { overflow-wrap:anywhere; color:var(--muted); font-size:.83rem; }.scan-success { color:#175a30; background:#e4f5e8; font-weight:700; }.scan-help { font-size:.88rem; margin-top:14px; }.back { display:inline-block; margin-bottom:17px; color:var(--green-dark); font-weight:700; }.events { list-style:none; padding:0; margin:0; }.events li { padding:12px 0; border-bottom:1px solid var(--line); }.events li:last-child { border:0; }.events span { display:block; color:var(--muted); font-size:.88rem; }.alert { padding:12px; border-radius:9px; }.error { background:#f9e4e2; color:var(--red); }.empty { text-align:center; padding:40px 25px; }.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 16px; }.summary-card { padding:18px; border-radius:14px; color:var(--green-dark); background:#e5f1e8; }.summary-card span { display:block; font-weight:700; font-size:.86rem; }.summary-card strong { display:block; margin-top:4px; font-size:2rem; line-height:1; }.summary-card.waiting { background:#fff2da; color:var(--orange); }.summary-card.active { background:#dff1fb; color:#075078; }.summary-card.done { background:#e4f5e8; color:#175a30; }.unit-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }.unit-card { padding:14px; border:1px solid var(--line); border-radius:10px; }.unit-card strong, .unit-card span { display:block; }.unit-card span { color:var(--muted); font-size:.86rem; margin-top:3px; }.table-scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:820px; } th, td { padding:13px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; } th { color:var(--muted); font-size:.83rem; } td small { display:block; color:var(--muted); margin-top:2px; }.badge { display:inline-block; border-radius:999px; padding:4px 8px; font-size:.82rem; font-weight:700; }.badge.waiting { background:#fff2da; color:var(--orange); }.badge.active { background:#dff1fb; color:#075078; }.badge.done { background:#e4f5e8; color:#175a30; }
.deadline-alert { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:0 0 16px; padding:18px 20px; border:1px solid #efba7e; border-radius:14px; background:#fff2da; }.deadline-alert h2 { color:#824900; margin-bottom:0; }.deadline-alert-list { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }.deadline-alert-list a { padding:8px 10px; border-radius:8px; background:#fff; color:var(--ink); text-decoration:none; }.deadline-alert-list strong, .deadline-alert-list span { display:block; font-size:.82rem; }.admin-filters { padding:17px; }.filter-form { display:grid; grid-template-columns:2fr 1fr 1fr auto; align-items:end; gap:12px; }.filter-form select { width:100%; min-height:50px; padding:10px; border:2px solid #bcc8bd; border-radius:10px; background:#fff; font:inherit; }.archive-link { margin-top:12px; font-weight:700; }.archive-link a { color:var(--green-dark); }.swipe-row { position:relative; overflow:hidden; border-radius:12px; touch-action:pan-y; }.swipe-actions { position:absolute; inset:0 0 0 auto; display:flex; width:172px; }.swipe-actions form { flex:1; margin:0; }.swipe-button { width:100%; height:100%; min-height:82px; border:0; color:#fff; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }.swipe-button.archive { background:#a56600; }.swipe-button.restore { background:#14653c; }.swipe-button.delete { background:#a42620; }.swipe-row .order-row { position:relative; z-index:1; margin:0; padding-right:62px; transition:transform .18s ease; }.swipe-row.actions-open .order-row { box-shadow:-4px 0 12px rgba(17,37,26,.14); }.order-menu-toggle { position:absolute; z-index:3; top:14px; right:12px; width:38px; height:38px; border:0; border-radius:50%; color:var(--green-dark); background:#e5f1e8; font-size:1.45rem; font-weight:800; line-height:1; cursor:pointer; }.order-menu-toggle:hover { background:#cfe9d7; }@keyframes swipeHint { 0%,18% { transform:translateX(0); } 44%,62% { transform:translateX(-108px); } 100% { transform:translateX(0); } }.swipe-hint .order-row { animation:swipeHint 2.1s ease-in-out 0.35s 1; }
@media (max-width:700px) { body { font-size:16px; }.container { width:min(100% - 22px, 760px); margin-top:18px; }.topbar { padding:12px 14px; }.brand span, .account > span { display:none; }.topnav { gap:8px; }.topnav a { font-size:.8rem; }.page-heading, .order-row, .qr-card, .deadline-alert { align-items:stretch; flex-direction:column; }.page-heading .button { width:100%; }.row-status { text-align:left; }.qr { width:220px; height:220px; }.login-card, .form-card, .search-hero { margin:22px auto; padding:20px; }.summary-grid { grid-template-columns:repeat(2,1fr); }.unit-grid, .date-fields, .filter-form { grid-template-columns:1fr; }.search-form { grid-template-columns:1fr; }.search-form .button { width:100%; min-height:58px; }.deadline-alert-list { justify-content:flex-start; } }