:root{--navy:#113448;--navy-deep:#0b293a;--blue:#216bdc;--teal:#168d80;--ink:#203745;--muted:#718794;--line:#e3eaf0;--canvas:#f3f6f9;--orange:#a76627;--error:#b24a3c}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font:14px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--canvas)}button,input,select,textarea{font:inherit}button,a{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #89b9ee;outline-offset:3px}button,input,select,textarea{-webkit-tap-highlight-color:transparent}input,select,textarea{width:100%;min-width:0;border:1px solid #d6e1e9;border-radius:7px;padding:10px 12px;background:#fff;color:var(--ink);outline:none;min-height:42px}input:focus,select:focus,textarea:focus{border-color:#76a5cd;box-shadow:0 0 0 3px #dfeefa}textarea{resize:vertical;min-height:92px}input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--blue)}h1,h2,h3,p{margin:0}h1{font-size:27px;line-height:1.4;font-weight:650}h2{font-size:17px;font-weight:600}h3{font-size:15px;font-weight:600}small,.muted{color:var(--muted)}.hidden{display:none!important}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 16px;border:1px solid #d6e1e9;border-radius:7px;background:#fff;color:#4a687a;font-size:14px;white-space:nowrap}.button:hover{background:#f5f9fc;border-color:#a8c1d1}.button.primary{background:var(--blue);border-color:var(--blue);color:white}.button.small{font-size:13px;min-height:34px;padding:6px 11px}.button.ghost{border-color:transparent;background:transparent;color:#477a97}.button.danger{color:#ad5344;background:#fff6f2;border-color:#efd3c6}.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.spinner{display:inline-block;width:18px;height:18px;border:2px solid #d5e2ee;border-top-color:#3c83b5;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}.loading-page{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;color:var(--muted)}@keyframes spin{to{transform:rotate(360deg)}}.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(320px,.9fr) minmax(440px,1.1fr)}.login-brand{padding:72px;display:flex;flex-direction:column;justify-content:center;background:var(--navy-deep);color:#e6f8ff}.login-brand img{width:160px;height:112px;object-fit:contain;margin-bottom:36px}.login-brand h1{font-size:34px}.login-brand p{color:#9cb9c9;font-size:15px;line-height:1.9;margin-top:18px;max-width:330px}.login-brand .brand-line{height:3px;width:48px;background:#5fd5bc;margin:35px 0}.login-brand small{color:#6b8fa4}.login-main{display:flex;align-items:center;justify-content:center;padding:40px}.login-card{width:100%;max-width:380px}.login-card>p{font-size:14px;color:var(--muted);margin:12px 0 30px}.login-card .button{width:100%;margin-top:10px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}.field>label{font-size:13px;font-weight:500;color:#426176}.field small{font-size:12px;line-height:1.7}.error{background:#fff1ed;border:1px solid #f1d4c9;color:var(--error);padding:11px 14px;border-radius:7px;font-size:13px;line-height:1.8;margin-bottom:17px;white-space:pre-wrap}.notice{background:#edf5fa;color:#547e96;padding:13px 16px;border-radius:8px;font-size:13px;line-height:1.8;margin-bottom:18px}.notice.warning{background:#fff7e9;color:#9a713a}.notice.success{background:#edf8f3;color:#447e68}.shell{min-height:100vh;display:flex}.sidebar{width:218px;position:fixed;inset:0 auto 0 0;padding:25px 18px;background:var(--navy-deep);color:#b2c9d6;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;flex-direction:column;gap:9px;padding:7px 0 24px}.brand img{width:116px;height:80px;object-fit:contain}.brand strong{font-size:17px;color:#e5f9ff;letter-spacing:1px}.brand small{font-size:11px;letter-spacing:2px;color:#7da4b8}.nav{margin-top:20px;display:flex;flex-direction:column;gap:8px}.nav a{display:flex;align-items:center;gap:12px;padding:12px 15px;font-size:14px;border-radius:8px;min-height:46px}.nav a:hover{background:#ffffff08}.nav a.active{background:#214b60;color:#d9fff3}.nav-icon{font-size:18px;width:21px;text-align:center;color:#8bbacb}.profile{margin-top:auto;border-top:1px solid #ffffff16;padding-top:20px}.profile strong{display:block;font-size:14px;color:#d4e7ee}.profile>small{font-size:11px;color:#83a0b3}.profile .actions{margin-top:13px}.profile button{font-size:12px;background:transparent;color:#9cbccc;padding:0;min-height:32px}.main{margin-left:218px;flex:1;min-width:0}.topbar{min-height:63px;background:#ffffffcc;border-bottom:1px solid var(--line);padding:18px 30px;display:flex;justify-content:space-between;gap:20px;align-items:center;color:#6c8594;font-size:12px}.topbar b{font-weight:500;color:#45687f}.topbar>span:last-child{text-align:right}.page{padding:31px;max-width:1540px;margin:auto}.heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.heading p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:8px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.7px;color:#809cac;margin-bottom:7px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:22px}.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:19px 21px}.stat span{font-size:13px;color:var(--muted);display:block}.stat strong{font-size:30px;font-weight:550;display:block;margin-top:10px;color:#315a70}.stat strong small{font-size:12px;font-weight:400;margin-left:7px}.panel{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:20px}.panel-head{padding:19px 21px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-body{padding:21px}.toolbar{padding:17px 20px;display:flex;gap:10px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center}.toolbar input{max-width:370px;flex:1;min-width:180px}.toolbar select{width:auto;max-width:210px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px;text-align:left}th{background:#fafcfd;color:#8398a7;font-size:12px;font-weight:500;padding:13px 18px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:18px;border-bottom:1px solid #edf1f5;vertical-align:middle;line-height:1.8}tr:last-child td{border-bottom:0}.stock-table{min-width:760px}.orders-table{min-width:800px}.purchase-table{min-width:720px}.product-name{font-size:14px;font-weight:550;display:block;color:#42687e}.sub{display:block;font-size:12px;color:#8096a5;line-height:1.8;margin-top:3px;overflow-wrap:anywhere}.quantity{font-size:18px;font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap}.quantity small{font-size:11px;font-weight:400;margin-left:4px}.unknown{color:#a58b64;font-size:12px}.tag{font-size:11px;display:inline-block;white-space:nowrap;line-height:1.7;border-radius:5px;padding:3px 8px;background:#f1f5f8;color:#71889a}.tag.blue{background:#edf3fe;color:#557fbd}.tag.green{background:#eaf7ef;color:#4b8d70}.tag.orange{background:#fff4e6;color:#b18341}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.stock-table td:nth-child(4){background:#f7fbfb}.empty{padding:46px 25px;text-align:center;color:#7e96a6;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty strong{font-size:15px;color:#5d7c90;margin-bottom:9px}.empty p{font-size:13px;max-width:420px;line-height:1.9}.empty .button{margin-top:20px}.pagination{padding:16px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:#859aaa}.record-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}.form-grid .full{grid-column:1/-1}.segmented{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}.segmented button{padding:9px 17px;border-radius:7px;background:#f0f5f8;color:#6e8799;font-size:13px}.segmented button.selected{background:#dfeefb;color:#326b94}.form-actions{padding-top:23px;border-top:1px solid var(--line);margin-top:24px;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}.check-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#5c7c90;margin-top:18px}.check-row input{margin-top:3px;flex-shrink:0}.guide p{font-size:13px;color:#7b92a2;line-height:1.9;margin:7px 0 20px}.guide b{font-size:14px;font-weight:550}.modal-overlay{position:fixed;inset:0;background:#0b2a3b5c;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px}.modal{width:100%;max-width:920px;max-height:90vh;background:white;border-radius:13px;display:flex;flex-direction:column;box-shadow:0 25px 90px #0a29354d}.modal.narrow{max-width:510px}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 25px;border-bottom:1px solid var(--line)}.modal-head button{width:32px;height:32px;background:#f3f7fa;border-radius:6px;font-size:22px;color:#7e9caf;line-height:1}.modal-body{padding:24px 25px;overflow:auto}.order-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;margin:13px 0 20px;color:#7b92a3}.detail-title{font-size:17px;line-height:1.7;color:#416981}.component-head,.component-line{display:grid;grid-template-columns:155px minmax(0,1fr) 100px 50px;gap:10px;align-items:center}.component-head{font-size:11px;color:#8ba0ae;padding:16px 0 8px}.component-line{margin-bottom:12px}.component-line input,.component-line select{font-size:13px;padding:9px;min-width:0}.component-label{display:flex;align-items:center;gap:9px;font-size:14px;color:#50728b}.component-check{border:1px solid #dae4eb;border-radius:4px;display:grid;place-items:center;width:18px;height:18px;font-size:11px;color:transparent}.component-check.selected{background:#e9f7f2;border-color:#afd3c7;color:#3c927c}.component-line>.button{padding:5px;min-height:34px}.receipt-line{display:grid;grid-template-columns:1fr 140px;gap:22px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}.receipt-line label{font-size:14px;color:#4a6d84}.receipt-line label small{display:block;font-size:12px;margin-top:4px}.receipt-line input{font-size:14px}.detail-list>div{padding:10px 0;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);font-size:13px}.detail-list b{font-weight:550}#employee-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:40;background:#163e53;color:#fff;padding:12px 19px;border-radius:8px;box-shadow:0 8px 32px #082c3840;font-size:13px;max-width:min(90vw,520px);display:none}#employee-toast.visible{display:block}.draft-note{font-size:12px;color:#8198a6;margin-top:12px}.footnote{font-size:12px;color:#869ca9;line-height:1.9;margin:15px 0}.global-error{margin:20px 30px 0}.status-line{display:flex;align-items:center;gap:7px}.status-line i{width:6px;height:6px;border-radius:50%;background:#37a78e}.field-error:empty{display:none}.table-loading{opacity:.55;pointer-events:none}
@media(max-width:1050px){.sidebar{width:190px}.main{margin-left:190px}.page{padding:24px}.heading{flex-direction:column;gap:14px}.record-grid{grid-template-columns:1fr}.component-head,.component-line{grid-template-columns:125px minmax(0,1fr) 85px 38px}.login-brand{padding:45px}}
@media(max-width:720px){.login-page{display:block}.login-brand{padding:28px 26px}.login-brand img{width:78px;height:54px;margin:0 0 12px}.login-brand h1{font-size:25px}.login-brand p{margin-top:8px;font-size:13px}.login-brand .brand-line,.login-brand small{display:none}.login-main{padding:30px 25px}.shell{display:block}.sidebar{position:relative;width:100%;padding:12px 16px}.brand{flex-direction:row;padding:0;gap:10px}.brand img{width:50px;height:36px}.brand strong{font-size:16px}.brand small{display:none}.nav{flex-direction:row;overflow-x:auto;margin-top:12px;gap:4px}.nav a{flex:0 0 auto;min-height:39px;padding:8px 11px;font-size:13px;gap:5px}.nav-icon{font-size:16px;width:18px}.profile{position:absolute;right:16px;top:13px;border:0;padding:0;text-align:right}.profile strong,.profile>small,.profile .change-password{display:none}.profile .actions{margin:0}.profile button{min-height:31px}.main{margin-left:0}.topbar{padding:11px 18px;min-height:42px;font-size:11px}.topbar>span:last-child{max-width:50%}.page{padding:22px 16px}h1{font-size:24px}.heading p{font-size:13px}.stats{gap:9px}.stat{padding:14px 12px}.stat span{font-size:11px}.stat strong{font-size:25px}.toolbar{padding:14px}.toolbar input{max-width:none}.toolbar select{max-width:100%;font-size:13px}.form-grid{grid-template-columns:1fr}.panel-body{padding:19px}.panel-head{padding:16px 19px}.modal-overlay{padding:12px}.modal{max-height:94vh}.modal-head{padding:18px}.modal-body{padding:18px}.modal-head h2{font-size:16px}.component-head{display:none}.component-line{grid-template-columns:1fr 85px 34px;gap:8px;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:15px}.component-label,.component-line>.component-category{grid-column:1/-1}.component-line>.component-category{width:100%}.component-line>.component-product{grid-column:1}.component-line>.component-quantity{grid-column:2}.component-line>.button{grid-column:3}.receipt-line{grid-template-columns:1fr 110px;gap:12px}.form-actions{gap:8px}.form-actions .button{font-size:13px}.global-error{margin:15px 16px 0}.pagination{padding:15px;gap:10px}.order-meta{gap:10px}.detail-title{font-size:15px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.stock-add-footer{padding:20px;display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);background:#fbfdfe}.stock-add-footer span{font-size:12px;color:#8296a4}.stock-add-button{min-width:145px;font-size:15px;color:#366b8d;border-color:#bed3e2;background:#f5faff}.created-product-row{background:#f3fbf7}.created-product-row td:nth-child(4){background:#edf8f2}.product-name .tag{vertical-align:middle;margin-left:5px;font-weight:400}.modal-body #new-product-form .notice{margin-top:3px}.modal-body #new-product-form .form-actions{margin-top:20px}@media(max-width:720px){.stock-add-footer{padding:17px;flex-direction:column;align-items:stretch;gap:10px}.stock-add-button{width:100%;min-height:45px}.stock-add-footer span{text-align:center;font-size:11px}}