:root { --navy:#173b57; --blue:#277fa7; --ink:#173145; --muted:#718593; --line:#e2e9ed; --soft:#f4f7f8; --green:#34886d; --amber:#d9902f; font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; color:var(--ink); background:#dfe8ed; }
button,a,input,select { font:inherit; -webkit-tap-highlight-color:transparent; }
.phone-shell { width:100%; max-width:480px; min-height:100vh; margin:0 auto; padding-bottom:82px; position:relative; background:var(--soft); box-shadow:0 0 50px rgba(19,49,69,.12); overflow:hidden; }
.mobile-head { padding:calc(18px + env(safe-area-inset-top)) 21px 70px; color:#fff; border-radius:0 0 30px 30px; background:radial-gradient(circle at 84% 30%,rgba(87,193,215,.28),transparent 26%),linear-gradient(145deg,#153650,#1e617c); }
.head-row { display:flex; align-items:center; gap:9px; }.head-row a { margin-left:auto; color:#d5e7ee; font-size:11px; text-decoration:none; }.logo { width:32px;height:32px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.3);font-size:11px;font-weight:800; }.demo-badge { padding:4px 8px;border-radius:12px;background:rgba(255,255,255,.12);font-size:9px;letter-spacing:.08em; }
.mobile-head p { margin:30px 0 3px;color:#b9d1dc;font-size:12px; }.mobile-head h1 { margin:0;font-size:26px; }.head-stats { margin-top:27px; display:grid; grid-template-columns:repeat(3,1fr); }.head-stats div { border-right:1px solid rgba(255,255,255,.14); text-align:center; }.head-stats div:last-child { border:0; }.head-stats strong,.head-stats span { display:block; }.head-stats strong { font-size:21px; }.head-stats span { margin-top:4px;color:#b9d1dc;font-size:10px; }
.worker-content { margin-top:-42px; padding:0 15px; position:relative; }.notice { padding:14px 15px;display:flex;gap:12px;align-items:center;border-radius:15px;background:#fff;box-shadow:0 10px 25px rgba(19,49,69,.09); }.notice>span { flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#fff0d8;color:#95621d;font-weight:800; }.notice p,.notice strong,.notice small { margin:0;display:block; }.notice strong { font-size:12px; }.notice small { margin-top:4px;color:var(--muted);font-size:9px; }
.section-title { margin:24px 2px 12px;display:flex;justify-content:space-between;align-items:center; }.section-title h2 { margin:0;font-size:16px; }.section-title button { border:0;background:transparent;color:var(--blue);font-size:11px; }
.task-list { display:grid;gap:11px; }.task-card { padding:16px;border:1px solid #e4ebef;border-radius:15px;background:#fff;box-shadow:0 7px 18px rgba(19,49,69,.035);cursor:pointer; }.task-top { display:flex;align-items:center;gap:8px; }.task-tag { padding:4px 8px;border-radius:12px;color:var(--blue);background:#e8f4f8;font-size:9px;font-weight:700; }.task-tag.quality { color:#996320;background:#fff1d9; }.task-time { margin-left:auto;color:var(--muted);font-size:9px; }.task-card h3 { margin:11px 0 7px;font-size:16px; }.task-card>p { margin:0;color:var(--muted);font-size:10px; }.task-bottom { margin-top:14px;padding-top:12px;border-top:1px solid #edf1f3;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px; }.task-bottom strong { margin-left:auto;color:var(--ink);font-size:10px; }.priority { width:7px;height:7px;border-radius:50%;background:#db746b; }.priority.normal { background:#66b39a; }
.tabbar { width:100%;max-width:480px;height:68px;padding-bottom:env(safe-area-inset-bottom);position:fixed;bottom:0;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;border-top:1px solid var(--line);background:rgba(255,255,255,.96);z-index:10;backdrop-filter:blur(12px); }.tabbar button { border:0;background:transparent;color:#8799a5;font-size:9px;display:grid;place-items:center;gap:3px; }.tabbar button>span { width:25px;height:25px;display:grid;place-items:center;border-radius:9px;font-size:10px; }.tabbar button.active { color:var(--blue); }.tabbar button.active>span { background:#e7f2f6; }.tabbar .scan>span { width:43px;height:43px;margin-top:-25px;border:5px solid var(--soft);border-radius:15px;color:#fff;background:var(--navy);box-shadow:0 7px 16px rgba(23,59,87,.22); }
.sheet-backdrop { position:fixed;inset:0;background:rgba(8,27,40,.45);opacity:0;pointer-events:none;transition:.2s;z-index:20; }.sheet-backdrop.open { opacity:1;pointer-events:auto; }.task-sheet { width:100%;max-width:480px;max-height:88vh;overflow:auto;position:fixed;left:50%;bottom:0;transform:translate(-50%,102%);padding:9px 18px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:#f7f9fa;transition:transform .25s ease;z-index:21;box-shadow:0 -18px 50px rgba(8,27,40,.2); }.task-sheet.open { transform:translate(-50%,0); }.sheet-handle { width:44px;height:4px;margin:1px auto 12px;border-radius:4px;background:#cad5db; }.task-sheet header { position:relative;padding:5px 3px 15px; }.task-sheet header button { position:absolute;right:0;top:0;width:31px;height:31px;border:0;border-radius:50%;background:#e8edef;color:#71828e;font-size:20px; }.task-type { color:var(--blue);font-size:10px;font-weight:700; }.task-sheet h2 { margin:7px 0 6px;font-size:22px; }.task-sheet header p { margin:0;color:var(--muted);font-size:10px; }.detail-progress { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 3px 16px; }.detail-progress span { height:3px;border-radius:3px;background:#dce5e9; }.detail-progress .complete { background:#6eb197; }.detail-progress .current { background:var(--blue); }
.form-card { padding:18px;border:1px solid var(--line);border-radius:15px;background:#fff; }.form-card h3 { margin:0 0 15px;font-size:14px; }.field { margin:13px 0; }.field label { display:block;margin-bottom:7px;font-size:11px;font-weight:700; }.field label em { color:#d45c55;font-style:normal; }.field input,.field select { width:100%;height:43px;padding:0 12px;border:1px solid #d9e3e8;border-radius:9px;background:#fbfcfc;color:var(--ink); }.photo-box { min-height:80px;border:1px dashed #b9cbd4;border-radius:10px;display:grid;place-items:center;color:#78909e;background:#f8fbfc;font-size:10px; }.choice-row { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.choice { padding:11px;border:1px solid var(--line);border-radius:9px;text-align:center;font-size:10px; }.choice.active { color:var(--blue);border-color:#85bfd4;background:#edf7fa; }
.sheet-actions { display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:15px; }.sheet-actions button { height:46px;border-radius:11px;font-weight:700; }.sheet-actions .ghost { border:1px solid var(--line);background:#fff;color:var(--ink); }.sheet-actions .primary { border:0;color:#fff;background:var(--navy); }
.toast { position:fixed;left:50%;bottom:88px;transform:translate(-50%,20px);padding:10px 14px;border-radius:20px;color:#fff;background:rgba(14,38,54,.92);font-size:10px;opacity:0;pointer-events:none;transition:.2s;z-index:30;white-space:nowrap; }.toast.show { opacity:1;transform:translate(-50%,0); }
@media (min-width:481px) { body { padding:20px 0; }.phone-shell { min-height:calc(100vh - 40px);border-radius:24px; }.tabbar { bottom:20px;border-radius:0 0 24px 24px; }.task-sheet { bottom:20px;border-radius:24px; } }