:root { color-scheme: dark; font-family: "Segoe UI","Microsoft YaHei",Arial,sans-serif; --page:#050706; --surface:#101512; --surface2:#151c18; --line:#29332e; --ink:#f5f7f6; --muted:#93a199; --green:#43d3a0; --orange:#f47a36; --red:#ef6262; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; color:var(--ink); background:var(--page); }
button,input,textarea { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1fr) minmax(440px,620px); grid-template-rows:auto 1fr auto; background:linear-gradient(90deg,#07110d 0 55%,#050706 55%); }
.login-brand { display:flex; align-items:center; gap:12px; padding:26px 34px; }
.logo-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:7px; color:#06100c; background:var(--green); font-size:20px; font-weight:900; }
.login-brand strong,.login-brand small { display:block; }
.login-brand strong { font-size:20px; }
.login-brand small { margin-top:2px; color:var(--muted); font-size:9px; }
.login-panel { grid-column:2; align-self:center; width:min(500px,calc(100% - 48px)); margin:auto; padding:38px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 28px 80px rgba(0,0,0,.32); }
.eyebrow { color:var(--green); font-size:11px; font-weight:800; }
.login-panel h1 { margin:10px 0 8px; font-size:28px; }
.login-panel > p { margin:0 0 26px; color:var(--muted); line-height:1.7; }
.login-panel form { display:grid; gap:16px; }
.login-panel label { display:grid; gap:7px; font-size:12px; font-weight:700; }
.login-panel input { height:46px; padding:0 13px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#090d0b; outline:none; }
.login-panel input:focus { border-color:var(--green); }
.login-panel form button { height:46px; border:0; border-radius:6px; color:#06110d; background:var(--green); font-weight:850; }
.form-error { min-height:18px; color:var(--red); font-size:11px; }
.login-page > footer { grid-column:1/-1; padding:24px 34px; color:var(--muted); font-size:10px; }
.worker-shell { min-height:100vh; padding-bottom:78px; }
.worker-shell > header { position:sticky; top:0; z-index:20; min-height:68px; display:flex; align-items:center; padding:0 max(18px,calc((100% - 1040px)/2)); border-bottom:1px solid var(--line); background:rgba(5,7,6,.96); backdrop-filter:blur(12px); }
.worker-logo { display:flex; align-items:center; gap:10px; }
.worker-logo > span { width:36px; height:36px; display:grid; place-items:center; border-radius:6px; color:#06110d; background:var(--green); font-weight:900; }
.worker-logo strong,.worker-logo small { display:block; }
.worker-logo small { margin-top:2px; color:var(--muted); font-size:8px; }
.worker-account { margin-left:auto; display:flex; align-items:center; gap:9px; }
.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#062015; background:var(--green); font-weight:850; }
.worker-account > span strong,.worker-account > span small { display:block; }
.worker-account > span small { margin-top:2px; color:var(--muted); font-size:9px; }
.worker-account > button { margin-left:8px; padding:7px 10px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:var(--surface); }
.worker-shell > nav { position:fixed; inset:auto 0 0; z-index:30; height:68px; display:grid; grid-template-columns:repeat(4,1fr); padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line); background:#0b100d; }
.worker-shell > nav button { display:grid; place-items:center; align-content:center; gap:3px; border:0; color:var(--muted); background:transparent; }
.worker-shell > nav button.active { color:var(--green); background:#111b16; }
.worker-shell > nav b { font-size:12px; }
.worker-shell > nav span { font-size:9px; }
.worker-main { width:min(1040px,calc(100% - 32px)); margin:0 auto; padding:26px 0; }
.welcome { display:flex; align-items:center; gap:14px; padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.welcome > div { flex:1; }
.welcome span { color:var(--muted); font-size:11px; }
.welcome h1 { margin:5px 0 0; font-size:18px; }
.welcome .online { display:flex; align-items:center; gap:6px; color:var(--green); }
.welcome .online::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.section-head { display:flex; align-items:flex-end; gap:12px; margin:26px 0 13px; }
.section-head > div { flex:1; }
.section-head h1,.section-head h2 { margin:0; font-size:20px; }
.section-head p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.section-head > span { color:var(--green); font-size:11px; font-weight:800; }
.page-top { margin-top:6px; }
.task-list,.report-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.piece-table-head { display:grid; grid-template-columns:64px 1.6fr 1.25fr 1fr .75fr .75fr; gap:1px; margin-bottom:10px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--line); }
.piece-table-head span { min-width:0; padding:10px; color:var(--muted); background:var(--surface); font-size:10px; font-weight:800; }
.task-card,.report-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.task-card > header,.report-card > header { display:flex; align-items:flex-start; gap:12px; padding:17px; border-bottom:1px solid var(--line); }
.task-card header > div,.report-card header > div { min-width:0; flex:1; }
.process-code { display:inline-flex; padding:3px 6px; border-radius:3px; color:var(--green); background:#0e2c21; font-size:9px; font-weight:800; }
.task-card h2,.report-card h2 { overflow:hidden; margin:7px 0 3px; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.task-card p,.report-card p { margin:0; color:var(--muted); font-size:10px; }
.task-status { flex:0 0 auto; padding:4px 7px; border-radius:4px; color:var(--orange); background:#352016; font-size:9px; font-weight:800; }
.task-status.done { color:var(--green); background:#0e2c21; }
.task-metrics { display:grid; grid-template-columns:repeat(3,1fr); padding:16px; }
.task-metrics span { display:grid; gap:6px; padding:0 12px; border-right:1px solid var(--line); }
.task-metrics span:first-child { padding-left:0; }
.task-metrics span:last-child { border:0; }
.task-metrics small,.report-values small { color:var(--muted); font-size:9px; }
.task-metrics strong { font-size:17px; }
.report-button { width:calc(100% - 32px); min-height:42px; margin:0 16px 16px; border:0; border-radius:6px; color:#06110d; background:var(--green); font-weight:850; }
.report-button:disabled { color:var(--muted); background:#202723; cursor:not-allowed; }
.reported { min-height:53px; display:flex; align-items:center; gap:12px; margin:0 16px 16px; padding:0 13px; border-radius:6px; color:var(--muted); background:var(--surface2); font-size:11px; }
.reported span { flex:1; }
.reported b { color:var(--green); }
.report-values { display:grid; grid-template-columns:1fr 1fr; padding:16px; }
.report-values span { display:grid; gap:7px; }
.report-values strong { color:var(--green); font-size:16px; }
.report-source { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 16px 0; padding:12px; border:1px solid var(--line); border-radius:6px; background:rgba(255,255,255,.02); }
.report-source span { display:grid; gap:4px; min-width:0; }
.report-source small,.report-source strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-note { margin:0 16px 16px; color:var(--muted); font-size:10px; }
.report-note b { color:var(--text); margin-right:8px; }
.return-reason { margin:0 16px 16px; padding:11px; border:1px solid #5b2929; border-radius:5px; color:#f0a1a1; background:#281313; font-size:10px; line-height:1.6; }
.return-reason b { display:block; }
.payroll-hero { margin:5px 0 26px; padding:28px; border:1px solid #164c38; border-radius:8px; background:#0c2119; }
.payroll-hero span,.payroll-hero p { color:var(--muted); }
.payroll-hero strong { display:block; margin:10px 0 6px; color:var(--green); font-size:34px; }
.payroll-hero p { margin:0; font-size:10px; }
.settlement-list { display:grid; gap:9px; }
.settlement-list article { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.settlement-list article > span { flex:1; }
.settlement-list strong,.settlement-list small { display:block; }
.settlement-list small { margin-top:4px; color:var(--muted); }
.settlement-list article > b { color:var(--green); }
.empty { min-height:220px; grid-column:1/-1; display:grid; place-items:center; align-content:center; gap:7px; color:var(--muted); border:1px dashed var(--line); border-radius:8px; }
.empty strong { color:var(--ink); }
.empty span { font-size:10px; }
.modal-backdrop { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.7); }
.report-modal { width:min(520px,100%); max-height:calc(100vh - 32px); overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.report-modal > header { display:flex; align-items:flex-start; gap:12px; padding:20px; border-bottom:1px solid var(--line); }
.report-modal header > div { flex:1; }
.report-modal h2 { margin:7px 0 3px; font-size:18px; }
.report-modal p { margin:0; color:var(--muted); font-size:10px; }
.report-modal header button { width:32px; height:32px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:transparent; }
.report-modal form { display:grid; gap:17px; padding:20px; }
.limit-note { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; border-radius:6px; background:var(--surface2); }
.limit-note span { display:grid; gap:4px; color:var(--muted); font-size:10px; }
.limit-note b { color:var(--ink); font-size:15px; }
.report-modal label { display:grid; gap:7px; font-size:11px; font-weight:700; }
.number-input { display:flex; align-items:center; border:1px solid var(--line); border-radius:6px; background:#090d0b; }
.number-input input { min-width:0; flex:1; height:44px; padding:0 12px; border:0; outline:0; color:var(--ink); background:transparent; }
.number-input span { padding:0 12px; color:var(--muted); }
.report-modal textarea { min-height:82px; resize:vertical; padding:11px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#090d0b; }
.report-modal footer { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.report-modal footer button { min-height:43px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--surface2); font-weight:800; }
.report-modal footer button[type=submit] { color:#06110d; border-color:var(--green); background:var(--green); }
#worker-toast { position:fixed; right:18px; bottom:88px; z-index:80; }
.toast { min-width:260px; display:grid; gap:4px; padding:13px 15px; border:1px solid #246c51; border-radius:7px; color:var(--ink); background:#0c2119; box-shadow:0 12px 36px rgba(0,0,0,.36); }
.toast span { color:var(--muted); font-size:10px; }
.toast.danger { border-color:#6b3030; background:#281313; }
@media (min-width:860px) { .worker-shell > nav { position:sticky; top:68px; width:min(1040px,calc(100% - 32px)); height:54px; margin:0 auto; border:1px solid var(--line); border-top:0; border-radius:0 0 8px 8px; } .worker-shell { padding-bottom:0; } }
@media (max-width:720px) { .login-page { display:block; background:var(--page); } .login-brand { padding:22px 20px; } .login-panel { width:calc(100% - 28px); margin:40px auto 0; padding:24px 20px; } .login-panel h1 { font-size:23px; } .login-page > footer { padding:30px 20px; text-align:center; } .worker-shell > header { padding:0 14px; } .worker-account > span:not(.avatar) { display:none; } .task-list,.report-list { grid-template-columns:1fr; } .piece-table-head { display:none; } .task-metrics strong { font-size:14px; } .welcome { align-items:flex-start; } .welcome .online { font-size:9px; } }
@media (max-width:520px) { .report-source { grid-template-columns:1fr; } }