:root { --bg:#f5f6f0; --paper:#fff; --ink:#243c34; --muted:#748178; --line:#e5e9df; --green:#1e7157; --light-green:#e8f3e5; --blue:#3475a5; --light-blue:#eaf3fa; --amber:#885a18; --radius:24px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); font-size:15px; }
* { box-sizing:border-box; } body { margin:0; } button,input,textarea,select { font:inherit; } button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; } button,a { touch-action:manipulation; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } button:disabled { opacity:.45; cursor:not-allowed; } :focus-visible { outline:3px solid #8fbeb1; outline-offset:3px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(26px,4vw,36px); line-height:1.3; letter-spacing:-1px; margin-bottom:10px; } h2 { font-size:19px; margin-bottom:18px; } h3 { font-size:16px; } p { line-height:1.7; } small { display:block; color:var(--muted); font-size:12px; line-height:1.6; } .muted { color:var(--muted); } .number { font-size:12px; color:var(--muted); font-weight:400; margin-left:6px; overflow-wrap:anywhere; } .loading { text-align:center; padding:100px 0; }
.topbar { max-width:1100px; margin:0 auto; padding:27px 28px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .brand { display:flex; align-items:center; gap:12px; font-size:21px; font-weight:700; white-space:nowrap; } .brand small { font-weight:400; letter-spacing:2px; font-size:10px; margin-top:3px; } .header-actions { display:flex; gap:12px; align-items:center; } .icon-button { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:white; color:var(--ink); font-size:22px; flex-shrink:0; } main { max-width:1100px; margin:auto; padding:26px 28px 32px; min-height:calc(100vh - 240px); } .page-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:30px; } .eyebrow { font-size:11px; color:var(--green); letter-spacing:2px; font-weight:700; margin-bottom:10px; } .subtitle { color:var(--muted); font-size:14px; margin-bottom:0; } .button { min-height:44px; border:1px solid transparent; border-radius:12px; background:var(--green); color:#fff; padding:10px 17px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:100%; overflow-wrap:anywhere; } .button:hover { filter:brightness(.96); } .secondary { background:#fff; border-color:var(--line); color:var(--ink); } .text-button { background:transparent; color:var(--green); padding:0; border:0; } .small { padding:7px 12px; min-height:36px; font-size:12px; } .danger { background:#a6443d; color:white; } .danger.secondary { background:transparent; color:#a6443d; border-color:#eed7d4; }
.today-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:22px; } .card { border:1px solid var(--line); border-radius:var(--radius); padding:27px; background:var(--paper); margin-bottom:22px; min-width:0; } .card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; } .card-top h2,.card-top h3 { margin:0; } .category { font-weight:600; font-size:14px; } .pill { border-radius:20px; padding:5px 10px; background:#eff1ea; font-size:11px; color:#687168; white-space:nowrap; } .pill.green { background:var(--light-green); color:var(--green); } .pill.blue { background:var(--light-blue); color:var(--blue); } .pill.amber { background:#fff2d9; color:var(--amber); } .assigned { padding:12px 0 10px; } .avatar { width:42px; height:42px; border-radius:14px; display:flex; justify-content:center; align-items:center; background:#e7f0e1; color:var(--green); font-size:19px; font-weight:600; flex-shrink:0; overflow:hidden; } .avatar.large { width:64px; height:64px; font-size:29px; border-radius:20px; margin-bottom:22px; } .assigned h2 { font-size:28px; overflow-wrap:anywhere; margin-bottom:5px; } .avatar.blue { background:#e1eff9; color:var(--blue); } .avatar.small { width:32px; height:32px; font-size:14px; border-radius:10px; } .duty-card { background:linear-gradient(145deg,#fff 60%,#f0f6e9); } .water-card { background:linear-gradient(145deg,#fff 60%,#eef5fa); } .card-note { margin:25px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; } .water-title { font-size:19px; margin-top:34px; } .pair { display:flex; align-items:center; justify-content:center; gap:30px; padding:14px 0 26px; } .pair>div { display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; min-width:0; overflow-wrap:anywhere; flex:1; } .pair .avatar { margin-bottom:4px; } .pair-plus { color:#abc5d9; font-size:25px; } .water-button { background:var(--blue); width:100%; } .water-person { display:flex; align-items:center; gap:12px; padding:12px 0; } .water-person>div:nth-child(2) { flex:1; overflow-wrap:anywhere; } .water-label { color:var(--blue); font-weight:600; } .below-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; } .compact { padding:24px; } .mini-row { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:15px 0; gap:8px; } .row-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#navigation { position:sticky; bottom:18px; max-width:580px; margin:8px auto 0; border-radius:19px; padding:7px; background:#fff; border:1px solid var(--line); box-shadow:0 7px 32px #24483612; display:flex; justify-content:space-between; z-index:20; } .nav-button { display:flex; align-items:center; flex-direction:column; gap:5px; background:transparent; border:0; border-radius:13px; padding:9px; color:var(--muted); font-size:11px; flex:1; min-width:0; min-height:52px; } .nav-button span:first-child { font-size:18px; } .nav-button.active { color:var(--green); background:#eef5e7; } .page-footer { text-align:center; padding:22px 10px 38px; font-size:12px; color:#8e998e; } .page-footer span { display:block; margin-top:7px; font-size:10px; }
.toolbar { display:flex; justify-content:space-between; gap:10px; padding:0 4px 18px; align-items:center; } .switch-label { display:flex; gap:10px; align-items:center; font-size:13px; line-height:1.7; margin:16px 0; } input[type="checkbox"] { accent-color:var(--green); width:18px; height:18px; flex-shrink:0; } .schedule-list { padding:0 24px; } .schedule-row { display:flex; align-items:center; gap:20px; padding:21px 0; border-bottom:1px solid var(--line); } .schedule-row:last-child { border-bottom:0; } .date-box { text-align:center; min-width:64px; } .date-box>span { display:block; font-weight:600; font-size:20px; } .is-today .date-box { color:var(--green); } .shift-person { flex:1; overflow-wrap:anywhere; min-width:0; } .shift-person>small { margin-top:5px; } .queue-list { padding:0; margin:0; list-style:none; } .queue-list li { display:flex; gap:12px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); } .queue-list li>span:nth-child(2) { flex:1; } .rank { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:#f1f3eb; font-size:12px; } .rank.next { color:var(--blue); background:#e9f3fa; } .history-row { display:grid; grid-template-columns:1fr auto; gap:5px; padding:14px 0; border-top:1px solid var(--line); } .history-row strong { font-size:13px; overflow-wrap:anywhere; } .history-row small { grid-column:1/-1; } .water-feature { max-width:640px; }
.request-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:32px; } .request-card { background:white; border:1px solid var(--line); border-radius:20px; padding:24px; min-width:0; overflow-wrap:anywhere; } .request-card .row-actions { margin:18px 0; } .reason { font-size:13px; padding:12px; border-radius:12px; background:#f7f8f3; } .section-title { margin-bottom:20px; } .count { color:var(--muted); font-size:12px; font-weight:400; padding:3px 8px; background:#ecefe7; border-radius:9px; margin-left:8px; } .empty { padding:30px 10px; text-align:center; width:100%; } .empty-mark { font-size:30px; color:#9aada0; display:block; margin-bottom:14px; } .empty p { font-size:13px; color:var(--muted); max-width:330px; margin:0 auto 18px; } .empty h3 { margin-bottom:10px; }
.subtabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; } .person-row { display:flex; gap:12px; align-items:center; padding:17px 0; border-bottom:1px solid var(--line); } .person-row:last-child { border-bottom:0; } .person-details { flex:1; min-width:0; overflow-wrap:anywhere; } .person-details strong { font-weight:500; } .form-inline { display:flex; gap:12px; flex-wrap:wrap; align-items:end; } .form-inline .field { flex:1; min-width:180px; } .field { display:flex; flex-direction:column; gap:8px; margin:16px 0; font-size:13px; } .field>span { font-weight:500; } .field input:not([type="checkbox"]),.field textarea,.field select { width:100%; max-width:100%; min-height:44px; padding:11px 12px; border:1px solid #dce3d6; border-radius:11px; color:var(--ink); background:#fafbf7; } .field input[type="file"] { font-size:12px; } .field textarea { resize:vertical; line-height:1.6; } .divider { border-top:1px solid var(--line); margin:26px 0; } .narrow { max-width:650px; } .audit-row { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; border-top:1px solid var(--line); padding:13px 0; } .audit-row time { color:var(--muted); } .audit-row span { flex:1; }
dialog { border:1px solid var(--line); padding:25px; border-radius:24px; width:440px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); color:var(--ink); overflow-y:auto; box-shadow:0 20px 100px #193c2f33; } dialog::backdrop { background:#132d2459; backdrop-filter:blur(3px); } .modal-head { display:flex; gap:12px; align-items:center; justify-content:space-between; } .modal-head h2 { margin:0; } .modal-head+p { font-size:12px; } .modal-footer { display:flex; gap:10px; margin-top:24px; } .modal-footer .button { flex:1; } .form-error { padding:10px; color:#943d35; font-size:13px; background:#faefec; border-radius:10px; } .notice { padding:13px 16px; border-radius:13px; background:#edf4eb; font-size:12px; } .notice.amber { background:#fff4df; color:var(--amber); } .pin-list { max-height:40vh; overflow:auto; } .pin-row { display:flex; gap:10px; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); } .pin-row code { font-size:18px; color:var(--green); letter-spacing:2px; } #toast { position:fixed; z-index:100; bottom:105px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 32px); padding:13px 20px; border-radius:13px; background:#233e33; color:white; font-size:13px; box-shadow:0 5px 25px #12282133; }
@media (max-width:700px) { .topbar { padding:20px 18px; } .brand { font-size:18px; gap:9px; } .header-actions { gap:7px; } .header-actions .button { padding:9px 12px; font-size:12px; } main { padding:13px 18px 20px; } .page-heading { align-items:start; margin-bottom:22px; flex-direction:column; gap:16px; } .page-heading>.button { min-height:38px; } h1 { font-size:28px; } .today-grid,.below-grid,.request-grid { grid-template-columns:1fr; gap:0; } .card { border-radius:20px; padding:22px; margin-bottom:17px; } .compact { padding:21px; } .assigned { display:grid; grid-template-columns:56px 1fr; column-gap:15px; align-items:center; padding:8px 0; } .assigned .avatar { width:56px; height:56px; grid-row:1/3; margin:0; } .assigned h2 { font-size:25px; margin:0; } .assigned p { margin:4px 0 0; } .card-note { margin-top:20px; padding-top:14px; } .duty-card .row-actions { margin-top:18px; } .water-title { margin-top:0; } .pair { gap:20px; } #navigation { position:sticky; bottom:10px; margin:8px 12px 0; max-width:none; padding:5px; padding-bottom:max(5px,env(safe-area-inset-bottom)); } .nav-button { padding:8px 3px; font-size:10px; } .page-footer { padding-bottom:25px; } .schedule-list { padding:0 17px; } .schedule-row { gap:12px; flex-wrap:wrap; padding:17px 0; } .schedule-row .row-actions { width:100%; padding-left:74px; } .date-box { min-width:60px; } .request-card { margin-bottom:16px; padding:22px; } .person-row { gap:8px; } .person-row .avatar { display:none; } .person-row .number { display:block; margin:4px 0 0; } .subtabs { gap:5px; } .subtabs .button { padding:9px 11px; font-size:12px; } .water-person { gap:8px; } .water-person .button { padding:7px 9px; } .field { margin:15px 0; } dialog { padding:21px; } .request-grid>.empty { padding-top:16px; } }
#toast { pointer-events:none; }
#identity { max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:700px) { #identity { max-width:132px; } }
@media (prefers-reduced-motion:no-preference) { .button,.nav-button { transition:background .16s,filter .16s; } }