:root{--ink:#071735;--muted:#758099;--line:#e2e7f0;--paper:#f4f6fb;--card:#fff;--navy:#071735;--blue:#315bd5;--green:#217a55;--red:#c24f49}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);background:var(--paper);font-family:Arial,"PingFang HK","Noto Sans TC",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}[hidden]{display:none!important}.app-shell{min-height:100vh;display:grid;grid-template-columns:232px 1fr}.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:30px 20px 24px;color:#fff;background:var(--navy)}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 38px;color:#fff;text-decoration:none}.brand-mark{display:block;width:40px;height:40px;border-radius:9px;object-fit:cover}.brand strong,.brand small{display:block}.brand strong{font-size:20px;letter-spacing:-.04em}.brand strong i,.login-brand i{color:#7898f5;font-style:normal}.brand small{margin-top:2px;color:#97a3bb;font-size:10px;letter-spacing:.08em}.sidebar nav{display:grid;gap:8px}.sidebar nav button{display:flex;gap:12px;align-items:center;width:100%;padding:13px 14px;border:0;border-radius:10px;color:#aeb8cb;background:transparent;text-align:left}.sidebar nav button:hover,.sidebar nav button.active{color:#fff;background:#263551}.sidebar nav span{width:20px;text-align:center;font-size:18px}.back-link{display:flex;gap:12px;align-items:center;margin-top:12px;padding:14px;color:#8f9cb7;border-top:1px solid #20345b;font-size:12px;text-decoration:none}.back-link:hover{color:#fff}.sidebar-note{margin-top:auto;padding:14px;border:1px solid #30405d;border-radius:10px;color:#aeb8cb;font-size:12px}.status-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:99px;background:#60c48d;box-shadow:0 0 0 3px #244a40}.logout-link{display:block;margin-top:10px;padding:0;border:0;color:#9fb5ef;background:transparent;font-size:11px;text-decoration:underline}.workspace{min-width:0;padding:36px 42px 28px}.topbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:27px}.eyebrow{margin:0 0 6px;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.18em}h1{margin:0;font-size:30px;letter-spacing:-.03em}.header-actions{display:flex;gap:9px}.button{min-height:42px;padding:0 17px;border:1px solid transparent;border-radius:9px;font-weight:700;transition:.16s ease}.button:hover{transform:translateY(-1px)}.button:disabled{cursor:not-allowed;opacity:.45;transform:none}.button.primary{color:#fff;background:var(--blue);box-shadow:0 5px 14px #315bd52b}.button.secondary{color:var(--ink);border-color:#dfe2e8;background:#fff}.button.in-button{color:var(--green)}.button.ghost{color:var(--muted);background:#f3f4f6}.button.success{color:#fff;background:var(--green)}.button.danger{color:#fff;background:var(--red)}.alert{display:flex;justify-content:space-between;align-items:center;margin:-9px 0 18px;padding:12px 15px;color:#9f3934;border:1px solid #efcbc8;border-radius:9px;background:#fff2f1;font-size:14px}.alert button{border:0;color:inherit;background:transparent;font-size:20px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.stats article{display:flex;align-items:center;gap:13px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 2px 10px #17233f08}.stat-icon{display:grid;flex:0 0 42px;height:42px;place-items:center;border-radius:10px;font-weight:900}.stat-icon.sand{color:#315bd5;background:#e8edff}.stat-icon.blue{color:#3267a2;background:#eaf2fb}.stat-icon.green{color:#287654;background:#e8f5ee}.stat-icon.red{color:#b84a44;background:#fae9e7}.stats small,.stats strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stats small{margin-bottom:5px;color:var(--muted);font-size:12px}.stats strong{font-size:20px}.panel{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 6px 24px #17233f08}.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0 0 4px;font-size:17px}.panel-head p{margin:0;color:var(--muted);font-size:12px}.search{display:flex;align-items:center;gap:8px;width:min(300px,40vw);padding:0 12px;border:1px solid #dfe2e8;border-radius:8px;color:#8490a4;background:#fafafa}.search input{width:100%;height:38px;border:0;outline:0;background:transparent;font-size:13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{padding:12px 18px;color:#8a93a4;background:#fafafa;font-size:10px;letter-spacing:.08em;text-align:left;text-transform:uppercase;white-space:nowrap}td{padding:15px 18px;border-top:1px solid #eff0f3;vertical-align:middle}tbody tr:hover{background:#fcfcfb}.product-cell{display:flex;align-items:center;gap:11px;min-width:190px}.product-cell img,.photo-placeholder{width:40px;height:40px;border-radius:9px;object-fit:cover}.photo-placeholder{display:grid;place-items:center;color:#315bd5;background:#e8edff;font-weight:800}.product-cell strong,.product-cell small,.movement-product strong,.movement-product small{display:block}.product-cell small,.movement-product small{margin-top:3px;color:#929bab;font-size:11px}.qty-pill{display:inline-grid;min-width:32px;padding:5px 9px;place-items:center;border-radius:99px;color:#235e47;background:#eaf5ef;font-weight:800}.qty-pill.low{color:#a8443f;background:#fdeceb}.low-label{display:block;margin-top:4px;color:#ba544e;font-size:9px}.remark-cell{max-width:180px;overflow:hidden;color:#687386;text-overflow:ellipsis;white-space:nowrap}.icon-button{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;color:#7d8797;background:#fff;font-weight:900}.type-pill{display:inline-block;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:800}.type-pill.in{color:#216949;background:#e6f4ec}.type-pill.out{color:#a94742;background:#fae9e7}.positive{color:var(--green);font-weight:800}.negative{color:var(--red);font-weight:800}.empty-state{display:grid;min-height:330px;padding:48px 20px;place-items:center;align-content:center;text-align:center}.empty-state h3{margin:12px 0 6px}.empty-state p{max-width:390px;margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.6}.empty-icon{display:grid;width:54px;height:54px;place-items:center;border-radius:15px;color:#315bd5;background:#e8edff;font-size:25px}.loader{width:30px;height:30px;border:3px solid #e4e7ec;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}.footer-note{margin:14px 0 0;color:#9ba3b0;font-size:11px;text-align:center}.modal{width:min(660px,calc(100% - 24px));max-height:calc(100vh - 44px);overflow:auto;padding:24px;border:0;border-radius:15px;background:#fff;box-shadow:0 24px 80px #07112652}.modal::backdrop{background:#0d1830b8;backdrop-filter:blur(4px)}.modal-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px}.modal-head h2{margin:0 0 5px;font-size:22px}.modal-head p{margin:0;color:var(--muted);font-size:13px}.modal-head button{align-self:flex-start;width:34px;height:34px;border:0;border-radius:8px;color:#788295;background:#f2f3f5;font-size:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label{display:grid;gap:7px}.form-grid label>span{color:#556074;font-size:12px;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid #dfe2e8;border-radius:8px;outline:0;background:#fff}.form-grid input,.form-grid select{height:42px;padding:0 12px}.form-grid textarea{min-height:78px;padding:10px 12px;resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#77859e;box-shadow:0 0 0 3px #17233f0c}.form-grid .full{grid-column:1/-1}.file-field{padding:13px;border:1px dashed #cfd4dc;border-radius:9px;background:#fafafa}.file-field input{height:auto;padding:6px 0;border:0;background:transparent}.file-field small{color:#9099a8;font-size:10px}.form-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:8px;border-top:1px solid var(--line)}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top right,#dfe7ff 0,transparent 36%),var(--paper)}.login-card{width:min(430px,100%);padding:38px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 24px 70px #0717351c}.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:35px;color:var(--navy);text-decoration:none}.login-brand img{width:42px;height:42px;border-radius:10px}.login-brand strong{font-size:22px;letter-spacing:-.04em}.login-card h1{margin-bottom:10px}.login-intro{margin:0 0 26px;color:var(--muted);font-size:14px;line-height:1.6}.login-form{display:grid;gap:10px}.login-form label{color:#556074;font-size:12px;font-weight:700}.login-form input{width:100%;height:48px;padding:0 14px;border:1px solid #d8deea;border-radius:9px;outline:0;font-size:20px;letter-spacing:.18em}.login-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #315bd51a}.login-form .button{margin-top:4px}.login-error{margin:2px 0;color:#a8443f;font-size:12px}.login-return{display:inline-block;margin-top:25px;color:#7b879d;font-size:12px;text-decoration:none}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:980px){.app-shell{grid-template-columns:82px 1fr}.sidebar{padding:26px 12px}.brand{justify-content:center;padding:0 0 34px}.brand div,.sidebar nav button:not(.active),.back-link{font-size:0}.sidebar nav button,.back-link{justify-content:center}.sidebar nav span{font-size:19px}.sidebar-note{font-size:0;text-align:center}.status-dot{margin:0}.stats{grid-template-columns:1fr 1fr}.workspace{padding:30px 26px}}
@media(max-width:680px){.app-shell{display:block}.sidebar{position:fixed;z-index:10;top:auto;bottom:0;width:100%;height:64px;padding:8px 14px}.brand,.sidebar-note{display:none}.sidebar nav{display:grid;grid-template-columns:1fr 1fr}.back-link{display:none}.sidebar nav button,.sidebar nav button:not(.active){justify-content:center;font-size:12px}.workspace{padding:24px 16px calc(86px + env(safe-area-inset-bottom))}.topbar{display:block}.header-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:18px}.header-actions .primary{grid-column:1/-1;grid-row:1}.stats{grid-template-columns:1fr 1fr}.stats article{padding:14px}.stat-icon{display:none}.panel-head{align-items:stretch;flex-direction:column}.search{width:100%}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.modal{padding:20px}.remark-cell{max-width:100px}.login-card{padding:28px 22px}}
