:root{--ink:#16231e;--muted:#6c7872;--line:#e5eae7;--green:#147b50;--pale:#edf8f1;--yellow:#a86700;--red:#bf3d36}*{box-sizing:border-box}body{margin:0;background:#f6f8f7;color:var(--ink);font:14px/1.5 "Microsoft YaHei",system-ui,sans-serif}.app-shell{min-height:100vh;display:flex}.sidebar{width:240px;background:#123728;color:#dcece3;padding:26px 16px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:0 10px 34px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#4ccd88;color:#103323;font-size:19px;font-weight:800}.brand strong,.brand small{display:block}.brand small{font-size:12px;color:#a9c8b9}.nav-item{display:block;width:100%;border:0;border-radius:9px;background:transparent;color:#c4d8cf;text-align:left;padding:12px 14px;margin:4px 0;font:inherit;cursor:pointer}.nav-item:hover,.nav-item.active{background:#225440;color:white}.sidebar-footer{margin-top:auto;color:#8db3a2;font-size:12px;padding:12px}.content{flex:1;padding:34px clamp(24px,5vw,72px);max-width:1500px}header,.panel-title,.toolbar,.modal-head,.modal-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}header{margin-bottom:30px}.eyebrow{margin:0;color:var(--muted);font-size:13px}h1{margin:3px 0;font-size:28px}h2{font-size:18px;margin:0}.primary,.secondary,.text-btn{border:0;border-radius:8px;padding:10px 16px;font:inherit;cursor:pointer}.primary{background:var(--green);color:white;font-weight:600}.primary:hover{background:#0d6841}.secondary{background:white;border:1px solid #d7dfda;color:#34473d}.text-btn{background:transparent;color:var(--green);padding:4px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat,.panel{background:white;border:1px solid var(--line);border-radius:13px}.stat{padding:19px}.stat span,.stat small{display:block;color:var(--muted)}.stat strong{font-size:27px;display:block;margin:7px 0}.stat.warning strong{color:var(--yellow)}.panel{padding:22px}.panel-title p{margin:3px 0 0;color:var(--muted);font-size:13px}.low-list{margin-top:15px}.low-item,.record{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-top:1px solid var(--line)}.item-name{font-weight:600}.item-meta,.muted{color:var(--muted);font-size:13px}.badge{border-radius:20px;padding:4px 9px;font-size:12px;font-weight:600;background:#eaf0ed;color:#4f6257}.badge.low{background:#fff0dc;color:var(--yellow)}.toolbar{margin-bottom:15px}.toolbar input,.toolbar select{height:39px;border:1px solid #d7dfda;border-radius:8px;background:white;padding:0 11px;font:inherit}.toolbar input{width:min(380px,100%)}.table-wrap{overflow:auto;background:white;border:1px solid var(--line);border-radius:13px}table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}th{color:var(--muted);background:#fbfcfb;font-size:12px;font-weight:600}tr:last-child td{border:0}.actions{display:flex;gap:7px}.small-btn{border:1px solid #dbe3de;background:white;border-radius:6px;padding:5px 8px;color:#28583f;cursor:pointer}.small-btn.danger{color:var(--red)}.records{margin-top:13px}.record-type{width:48px;text-align:center;border-radius:6px;padding:3px;background:#e6f6ed;color:var(--green);font-weight:600}.record-type.out{background:#fff0e6;color:#b55016}.hidden{display:none!important}dialog{width:min(580px,calc(100vw - 32px));border:0;border-radius:14px;padding:0;box-shadow:0 20px 60px #12372855}dialog::backdrop{background:#10221877}dialog form{padding:23px}.close{border:0;background:none;font-size:25px;line-height:1;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.form-grid.one{grid-template-columns:1fr}label{font-weight:600}label input,label select{display:block;width:100%;height:39px;border:1px solid #d6dfd9;border-radius:7px;margin-top:6px;padding:0 9px;font:inherit}.modal-actions{justify-content:flex-end;margin-top:22px}@media(max-width:800px){.sidebar{display:none}.content{padding:24px 16px}.stat-grid{grid-template-columns:1fr 1fr}header{align-items:flex-end}.form-grid{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-wrap:wrap}.toolbar input{width:100%}}@media(max-width:420px){.stat-grid{grid-template-columns:1fr}h1{font-size:23px}}
.cashier-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}.cashier-main{min-width:0}.scan-card{border:1px solid #b8e3cd;background:linear-gradient(135deg,#f0fbf5,#fff);border-radius:14px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:0 15px;align-items:center}.scan-card h2{margin:0}.scan-card p{margin:4px 0;color:var(--muted)}.scan-icon{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:11px;background:#d6f4e2;color:var(--green);font-size:24px}.scan-card input{grid-column:1 / -1;margin-top:20px;height:52px;border:2px solid var(--green);border-radius:10px;padding:0 15px;font:16px inherit;outline:0}.scan-card input:focus{box-shadow:0 0 0 4px #147b5022}.manual-add{position:relative;margin-top:20px}.manual-add>input{height:42px;width:100%;border:1px solid #d7dfda;border-radius:8px;padding:0 12px;font:inherit}.search-results{position:absolute;z-index:2;left:0;right:0;background:white;border-radius:8px;box-shadow:0 6px 20px #12372824;overflow:hidden}.search-result{padding:11px 13px;border-bottom:1px solid var(--line);cursor:pointer}.search-result:hover{background:var(--pale)}.cart-panel{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;min-height:560px;display:flex;flex-direction:column}.cart-head{padding:19px 19px 12px;display:flex;justify-content:space-between}.cart-head p{margin:3px 0;color:var(--muted);font-size:13px}.cart-items{padding:0 19px;flex:1;overflow:auto}.empty-cart{text-align:center;padding:50px 0}.cart-item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:13px 0;border-top:1px solid var(--line)}.cart-item-name{font-weight:600}.qty-control{display:flex;align-items:center;gap:9px}.qty-control button{border:1px solid #d7dfda;background:white;width:25px;height:25px;border-radius:6px;cursor:pointer}.cart-price{color:var(--muted);font-size:13px}.checkout{border-top:1px solid var(--line);padding:16px 19px}.total{display:flex;align-items:end;justify-content:space-between}.total span{color:var(--muted)}.total strong{font-size:26px;color:var(--green)}.pay-method{display:flex;gap:7px;margin:14px 0}.pay{border:1px solid #d7dfda;background:white;border-radius:7px;padding:6px 10px;cursor:pointer}.pay.active{border-color:var(--green);background:var(--pale);color:var(--green)}.checkout-btn{width:100%;font-size:16px;padding:13px}.receipt{text-align:center;padding:20px}.receipt-check{margin:auto auto 12px;display:grid;place-items:center;width:48px;height:48px;background:#d8f5e4;color:var(--green);border-radius:50%;font-size:27px}.receipt strong{font-size:30px;color:var(--green)}@media(max-width:1000px){.cashier-layout{grid-template-columns:1fr}.cart-panel{min-height:380px}}@media(max-width:800px){.content:has(#cashierView:not(.hidden)){padding:16px}.content:has(#cashierView:not(.hidden)) header{margin-bottom:16px}.content:has(#cashierView:not(.hidden)) header .primary{display:none}.scan-card{padding:16px}.scan-card p{font-size:12px}.cart-panel{min-height:340px}}
@media(max-width:800px){.sidebar{position:fixed;display:block;z-index:20;bottom:0;left:0;width:100%;height:64px;padding:5px 6px;background:#123728}.sidebar .brand,.sidebar-footer{display:none}.sidebar nav{display:flex;justify-content:space-around;height:100%}.sidebar .nav-item{flex:1;margin:0;padding:8px 3px;border-radius:7px;text-align:center;font-size:12px;white-space:nowrap}.content{padding-bottom:88px!important}}
/* ========== 同步状态指示器 ========== */
.sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.sync-indicator.synced  { background: #e6f6ed; color: #147b50; }
.sync-indicator.syncing { background: #fff8e6; color: #a86700; }
.sync-indicator.offline { background: #ffeaea; color: #bf3d36; }
.sync-indicator.hasUpdate { background: #e6f0ff; color: #1a56db; animation: pulse 1.5s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.sync-btn {
  font-size: 13px;
  padding: 8px 12px;
}