:root{--primary:#10B981;--primary-dark:#059669;--primary-light:#ECFDF5;--accent:#F97316;--accent-light:#FFF7ED;--bg:#F8FAF9;--card:#fff;--text:#111827;--text2:#9CA3AF;--text3:#6B7280;--border:#F0F0F0;--shadow:0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.04);--shadow-hover:0 2px 8px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);--danger:#EF4444;--danger-light:#FEF2F2;--warning:#F59E0B;--cat-leaf:#34D399;--cat-root:#D4A574;--cat-fruit:#FB7185;--cat-mush:#FBBF24;--cat-bean:#6EE7B7;--cat-tuber:#FDBA74}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);height:100%;overflow:hidden;font-size:14px;-webkit-font-smoothing:antialiased}

/* Login */

/* Dept select */
.dept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:16px}
.dept-card{background:#fff;border-radius:20px;padding:28px 20px;text-align:center;box-shadow:var(--shadow);cursor:pointer;border:2px solid transparent;transition:transform .25s,border-color .2s,box-shadow .25s;position:relative;overflow:hidden}
.dept-card:active{transform:scale(.96)}
.dept-card:hover{box-shadow:var(--shadow-hover)}
.dept-card.selected::after{content:'';position:absolute;bottom:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(16,185,129,.3);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px}
.dept-card.selected{transform:scale(1.02);border-color:var(--primary);box-shadow:0 0 0 3px rgba(16,185,129,.08),var(--shadow)}
.dept-card .icon{font-size:44px;margin-bottom:10px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.06))}
.dept-card .name{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.dept-card .desc{font-size:12px;color:var(--text2);margin-top:6px;font-weight:400}
.dept-card.disabled{opacity:.35;pointer-events:none;filter:grayscale(.8)}

/* App container */
.app-container{display:flex;flex-direction:column;height:100vh;max-width:520px;margin:0 auto;position:relative;overflow:hidden}

/* Header */
.header{background:var(--card);padding:10px 16px;display:flex;align-items:center;gap:10px;border-bottom:none;flex-shrink:0;z-index:50;position:relative}
.header::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.header-title{font-size:17px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);letter-spacing:-.01em}
.header-right{display:flex;align-items:center;gap:8px}
.header-btn{padding:6px 12px;border-radius:10px;font-size:12px;font-weight:500;cursor:pointer;background:var(--primary);color:#fff;border:none;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:0 1px 3px rgba(16,185,129,.2)}
.header-btn:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(16,185,129,.25)}
.header-btn:active{transform:scale(.94)}

/* Main area */
.main-area{display:flex;flex:1;overflow:hidden}
.sidebar{width:90px;background:#fff;flex-shrink:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding:8px 0}
.sidebar::-webkit-scrollbar{display:none}
.cat-item{padding:12px 6px;text-align:center;font-size:12px;color:var(--text3);cursor:pointer;transition:all .2s;border-radius:12px;margin:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.3}
.cat-item .cat-icon{font-size:22px;line-height:1;margin-bottom:2px;filter:grayscale(.3)}
.cat-item.active{background:var(--primary-light);color:var(--primary-dark);font-weight:600;border-left:none;box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.15)}
.cat-item.active .cat-icon{filter:grayscale(0);transform:scale(1.15);transition:transform .2s}
.cat-item:active{transform:scale(.95);opacity:.8}
.content{flex:1;overflow-y:auto;display:flex;flex-direction:column;background:var(--bg)}
.search-bar{background:#fff;padding:10px 14px;border-bottom:none;display:flex;align-items:center;gap:8px}
.search-bar input{flex:1;padding:9px 14px;border:1.5px solid var(--border);border-radius:20px;font-size:13px;background:#FAFAFA;outline:none;transition:all .2s;color:var(--text)}
.search-bar input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(16,185,129,.12)}
.search-bar input::placeholder{color:#D1D5DB}

/* Watermark */
.watermark{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:20px;gap:60px;user-select:none;-webkit-user-select:none}
.watermark span{font-size:14px;color:rgba(0,0,0,.06);white-space:nowrap;letter-spacing:4px;font-weight:500;transform:rotate(-20deg)}
.content{position:relative}
/* Product list */
.product-list{padding:8px 10px;min-height:100px;position:relative;z-index:2}
.empty-state{text-align:center;padding:40px 20px;color:#bbb}
.empty-icon{font-size:48px;margin-bottom:12px}
.product-card{background:#fff;border-radius:16px;padding:14px 14px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .2s,box-shadow .25s,border-color .2s,background .2s;border:1.5px solid transparent;position:relative;overflow:visible}
.product-card:active{transform:scale(.97)}
.product-card:hover{box-shadow:var(--shadow-hover)}
.product-card.selected{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 3px rgba(16,185,129,.1),var(--shadow)}
.product-card.selected::after{content:'';position:absolute;top:-5px;right:-5px;width:22px;height:22px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(16,185,129,.35);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px}
.prod-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;overflow:hidden;transition:transform .2s}
.product-card:active .prod-icon{transform:scale(.9)}
.prod-info{flex:1;min-width:0}
.prod-name{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.01em;margin-bottom:4px}
.prod-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tag{font-size:10px;padding:3px 10px;border-radius:20px;background:#F3F4F6;color:var(--text3);font-weight:500}
.tag-green{background:var(--primary-light);color:var(--primary-dark);font-weight:600}
.tag-orange{background:var(--accent-light);color:#C2410C;font-weight:600}

/* Bill bar */
.bill-bar{background:#fff;padding:12px 16px;border-top:none;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;box-shadow:0 -1px 3px rgba(0,0,0,.03)}
.bill-bar::before{content:'';position:absolute;top:-1px;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.bill-summary{font-size:13px;color:var(--text3)}
.bill-total-val{font-size:22px;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.bill-actions{display:flex;gap:10px}
.bill-btn{padding:9px 20px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.bill-btn-save{background:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(16,185,129,.25)}
.bill-btn-save:active{transform:scale(.95);box-shadow:0 1px 3px rgba(16,185,129,.2)}
.bill-btn-clear{background:var(--accent-light);color:#C2410C}

/* Bottom nav */
.bottom-nav{display:flex;border-top:1px solid var(--border);background:#fff;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,8px);position:relative}
.bottom-nav::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.04),transparent)}
.bnav-item{flex:1;text-align:center;padding:6px 2px 8px;cursor:pointer;transition:all .2s;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.bnav-icon{font-size:20px;line-height:1;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.bnav-label{font-size:10px;margin-top:2px;color:#D1D5DB;transition:all .2s;font-weight:500}
.bnav-item.active .bnav-label{color:var(--primary);font-weight:600}
.bnav-item.active .bnav-icon{transform:scale(1.15) translateY(-1px);filter:drop-shadow(0 2px 4px rgba(16,185,129,.25))}
.bnav-item.active::after{content:'';position:absolute;bottom:2px;width:16px;height:3px;background:var(--primary);border-radius:2px}

/* View pages */
.view-page{display:none;flex:1;flex-direction:column;overflow:hidden}
.view-page.show{display:flex}

/* Overlay / Modal */
.overlay{display:none;position:fixed;inset:0;z-index:200}
.overlay.show{display:flex;justify-content:center;align-items:flex-end}
.overlay-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal-sheet{background:#fff;border-radius:18px 18px 0 0;width:100%;max-width:500px;max-height:85vh;display:flex;flex-direction:column;position:relative;animation:sheetUp .25s ease}
@keyframes sheetUp{from{transform:translateY(100%)} to{transform:translateY(0)}}
.sheet-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sheet-title{font-size:16px;font-weight:600}
.sheet-close{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#999;font-size:18px;background:#f5f5f5}
.sheet-body{padding:16px 18px;overflow-y:auto;flex:1}

/* Selected items list */
.selected-list{padding:12px}
.selected-item{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:8px;background:#fff;border-radius:12px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.selected-item:active{transform:scale(.98)}
.selected-item.checked{background:var(--primary-light);border:1.5px solid var(--primary)}
.selected-item .sel-checkbox{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;transition:all .2s}
.selected-item.checked .sel-checkbox{background:var(--primary);border-color:var(--primary);color:#fff}
.selected-item .sel-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:transform .15s}
.selected-item .sel-info{flex:1;min-width:0}
.selected-item .sel-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selected-item .sel-name .new-tag{font-size:10px;color:var(--accent);margin-left:4px}
.selected-item .sel-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.selected-item .sel-row input{width:60px;padding:4px 8px;border:1.5px solid var(--border);border-radius:6px;font-size:13px;text-align:center;outline:none;background:#fff}
.selected-item .sel-row input:focus{border-color:var(--primary)}
.selected-item .sel-row select{padding:4px 6px;border:1.5px solid var(--border);border-radius:6px;font-size:12px;outline:none;background:#fff;color:var(--text)}
.selected-item .sel-row .sel-unit{font-size:12px;color:var(--text2);min-width:28px}
.selected-item .sel-amount{font-size:14px;font-weight:600;color:var(--accent);flex-shrink:0;text-align:right;min-width:70px}
.selected-item .sel-actions{display:flex;gap:4px;flex-shrink:0}
.selected-item .sel-edit{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:14px;cursor:pointer;background:var(--primary-light)}
.selected-item .sel-del{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--danger);font-size:14px;cursor:pointer;background:var(--danger-light)}
.selected-empty{text-align:center;padding:60px 20px;color:var(--text2)}
.selected-empty .empty-icon{font-size:56px;margin-bottom:12px}

/* Selected header */
.selected-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid var(--border);margin-bottom:8px;border-radius:12px 12px 0 0}
.sel-checkbox-all{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:500}
.batch-buttons{display:flex;gap:8px}
.batch-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--primary);background:#fff;color:var(--primary);font-size:12px;cursor:pointer;transition:all .15s}
.batch-btn:hover{background:var(--primary-light)}
.batch-btn:active{transform:scale(.93)}
.save-all-btn{background:var(--primary);color:#fff;font-weight:600;border:none}
.save-all-btn:hover{background:var(--primary-dark)}
.batch-del-btn{border-color:var(--danger);color:var(--danger)}
.batch-del-btn:hover{background:var(--danger-light)}

/* Header button */
.header-btn{padding:5px 12px;border-radius:14px;border:none;font-size:12px;font-weight:500;cursor:pointer}
.sheet-footer{padding:12px 18px 18px;display:flex;gap:10px;flex-shrink:0}
.sheet-footer button{flex:1;padding:14px;border-radius:12px;font-size:16px;font-weight:600;border:none;cursor:pointer}
.btn-confirm{background:var(--primary);color:#fff}
.btn-next{background:var(--primary-light);color:var(--primary-dark)}

/* My page styles */
.my-card{display:flex;align-items:center;gap:16px;padding:20px;background:#fff;border-radius:20px;box-shadow:var(--shadow);margin-bottom:20px;transition:box-shadow .2s}
.my-card:hover{box-shadow:var(--shadow-hover)}
.my-avatar{width:56px;height:56px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--primary);box-shadow:inset 0 0 0 2px rgba(16,185,129,.1)}
.my-info{flex:1}
.my-name{font-size:18px;font-weight:600;margin-bottom:4px}
.my-role{font-size:13px;color:var(--text2)}

.my-section{margin-bottom:24px}
.my-section-title{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--text);letter-spacing:-.01em}

.quota-card{background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quota-item{display:flex;flex-direction:column;align-items:flex-start;padding:10px 12px;background:#f8f9fa;border-radius:10px}
.quota-item:last-child{background:var(--primary-light)}
.quota-label{font-size:12px;color:var(--text2);margin-bottom:4px}
.quota-value{font-size:18px;font-weight:600}

.my-btn{width:100%;padding:14px;border-radius:12px;border:1.5px solid var(--border);background:#fff;font-size:14px;font-weight:500;cursor:pointer;margin-top:8px;transition:all .2s}
.my-btn:hover{background:var(--primary-light);border-color:var(--primary)}

.stats-tabs{display:flex;background:#fff;border-radius:12px;padding:4px;margin-bottom:16px;box-shadow:var(--shadow)}
.stats-tab{flex:1;text-align:center;padding:10px;font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;transition:all .2s}
.stats-tab.active{background:var(--primary);color:#fff}
.stats-content{background:#fff;border-radius:12px;padding:16px;box-shadow:var(--shadow)}

.recent-order-card{background:#fff;border-radius:10px;padding:12px 14px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06);border-left:3px solid var(--primary);cursor:pointer;transition:all .2s}
.recent-order-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.1)}

/* New dropdown styles */
.new-dropdown{position:relative;display:inline-block}
.new-btn{background:var(--primary);color:#fff;font-weight:600;padding:5px 14px;border-radius:14px;border:none;cursor:pointer;display:flex;align-items:center;gap:4px}
.new-dropdown-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.15);min-width:140px;z-index:1000;display:none;overflow:hidden}
.new-dropdown-item{padding:12px 16px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .2s}
.new-dropdown-item:hover{background:var(--primary-light)}
.new-dropdown-item:not(:last-child){border-bottom:1px solid var(--border)}

.btn-secondary{background:#F0F0F0;color:#555}
.btn-danger{background:var(--danger-light);color:var(--danger)}
.sheet-footer button:active{opacity:.85}

/* Unit slider */
.unit-slider{position:relative;display:flex;background:#F5F5F5;border-radius:10px;padding:3px;margin-bottom:10px}
.unit-slider-bg{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);background:var(--primary);border-radius:8px;transition:left .25s ease;z-index:0}
.unit-slider-bg.right{left:50%}
.unit-slider-opt{flex:1;text-align:center;padding:10px 0;font-size:14px;font-weight:500;cursor:pointer;position:relative;z-index:1;transition:color .2s}
.unit-slider-opt.active{color:#fff}

/* Entry fields */
.entry-field{margin-bottom:14px}
.entry-label{font-size:14px;color:var(--text2);margin-bottom:8px;font-weight:500}
.entry-row{display:flex;gap:10px}
.entry-col{flex:1}

/* Container options */
.container-options{display:flex;flex-wrap:wrap;gap:8px}
.copt{padding:10px 16px;border-radius:22px;border:1.5px solid var(--border);font-size:14px;cursor:pointer;transition:all .15s;background:#fff;display:flex;align-items:center;gap:4px}
.copt.active{border-color:var(--primary);background:var(--primary);color:#fff;transform:scale(1.05);box-shadow:0 2px 8px rgba(7,193,96,.25)}
.copt:active{transform:scale(.95)}

/* Number input */
.num-input-group{position:relative}
.num-input-group input{width:100%;padding:12px 50px 12px 14px;border-width:0 0 2px 0;border-style:solid;border-color:var(--primary);border-radius:0;font-size:22px;font-weight:600;text-align:left;outline:none;height:48px}
.num-input-group .unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--text2);font-weight:400}

/* Remark area */
.remark-area{margin-top:14px}
.remark-area textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;outline:none;resize:none;font-family:inherit;background:#fff;color:var(--text)}
.remark-area textarea:focus{border-color:var(--primary)}

/* History page */
.history-page{padding:0;overflow-y:auto}
.sup-filter{display:flex;gap:8px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.sup-filter::-webkit-scrollbar{display:none}
.sup-chip{padding:6px 14px;border-radius:16px;border:1px solid var(--border);font-size:12px;white-space:nowrap;cursor:pointer;flex-shrink:0;background:#fff}
.sup-chip.active{border-color:var(--primary);background:var(--primary);color:#fff}
.export-btn{padding:6px 14px;border-radius:8px;background:var(--primary);color:#fff;border:none;font-size:12px;font-weight:500;cursor:pointer;flex-shrink:0}
.history-date-section{margin-bottom:4px}
.history-date-label{font-size:13px;color:var(--primary-dark);padding:12px 16px 6px;font-weight:600;border-left:3px solid var(--primary);margin-left:12px}
.history-bill-card{background:#fff;margin:8px 14px;border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);cursor:pointer;border-left:3px solid transparent;transition:box-shadow .2s,transform .15s}
.history-bill-card:active{transform:scale(.98)}
.history-bill-card:hover{box-shadow:var(--shadow-hover)}
.hb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hb-supplier{font-size:15px;font-weight:700;color:var(--text)}
.hb-time{font-size:12px;color:var(--text2)}
.hb-detail{display:flex;gap:10px;font-size:12px;color:var(--text3);margin-top:6px}
.hb-count{color:var(--primary);font-weight:600}
.hb-total{font-size:20px;font-weight:800;color:var(--accent);letter-spacing:-.01em}
.hb-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.hb-tag{font-size:11px;padding:3px 10px;border-radius:20px;background:#F3F4F6;color:var(--text3);font-weight:500}

/* Stats page */
.stats-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.stats-card{background:#fff;border-radius:16px;padding:18px 10px;text-align:center;box-shadow:var(--shadow);transition:box-shadow .2s}
.stats-card .val{font-size:24px;font-weight:800;color:var(--accent);margin-bottom:6px;letter-spacing:-.02em}
.stats-card .lbl{font-size:11px;color:var(--text3);font-weight:500}
.stats-section{background:#fff;border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.stats-section h3{font-size:15px;font-weight:600;margin-bottom:12px}
.stat-rank-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #F0F0F0}
.stat-rank-item:last-child{border-bottom:none}
.stat-rank-num{width:22px;height:22px;border-radius:50%;background:var(--primary-light);color:var(--primary);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-rank-num.top1{background:var(--accent);color:#fff}
.stat-rank-num.top2{background:#FFB088;color:#fff}
.stat-rank-num.top3{background:#FFD4B8;color:#BF3A00}
.stat-rank-name{flex:1;font-size:14px}
.stat-rank-amt{font-size:14px;font-weight:600;color:var(--text)}
.stat-cat-bar{display:flex;align-items:center;gap:8px;padding:6px 0}
.stat-cat-label{width:48px;font-size:12px;color:var(--text2);text-align:right;flex-shrink:0}
.stat-cat-track{flex:1;height:8px;background:#F0F0F0;border-radius:4px;overflow:hidden}
.stat-cat-fill{height:100%;border-radius:4px;transition:width .3s}
.stat-cat-pct{width:48px;font-size:12px;color:var(--text2);text-align:right;flex-shrink:0}

/* Detail table */
.detail-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.detail-table th{background:#F8F9FA;padding:9px 10px;text-align:left;font-weight:600;font-size:12px;color:var(--text2);border-bottom:1px solid var(--border)}
.detail-table td{padding:9px 10px;border-bottom:1px solid #F0F0F0}
.detail-total-row td{border-top:2px solid var(--accent);font-weight:700;font-size:15px;color:var(--accent)}

/* Audit badge */
.audit-badge{display:inline-block;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:600;margin-left:6px}
.audit-badge.audited{background:var(--primary-light);color:var(--primary-dark)}
.audit-badge.unaudited{background:#FFF3E0;color:#E65100}

/* Toast */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:#fff;padding:10px 24px;border-radius:24px;font-size:14px;font-weight:500;z-index:300;opacity:0;transition:all .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Login new styles */
.login-page{background:linear-gradient(160deg,#07C160 0%,#05944E 60%,#038A3E 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-bg-pattern{position:absolute;inset:0;opacity:.08;pointer-events:none;background:radial-gradient(circle at 20% 30%,#fff 1px,transparent 1px),radial-gradient(circle at 80% 70%,#fff 1.5px,transparent 1.5px),radial-gradient(circle at 50% 10%,#fff .8px,transparent .8px);background-size:60px 60px,80px 80px,40px 40px}
.login-card{background:#fff;border-radius:20px;padding:40px 28px 36px;width:100%;max-width:360px;box-shadow:0 10px 40px rgba(0,0,0,.2);position:relative;z-index:1}
.login-brand{text-align:center;margin-bottom:28px}
.login-emoji{font-size:56px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.login-brand h1{font-size:24px;margin-bottom:4px}
.login-brand p{font-size:14px;color:#999;font-weight:400}
.login-pin-area{position:relative;margin-bottom:24px}
.login-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .15s}
.login-btn:active{transform:scale(.96);opacity:.9}

/* PIN码圆形输入框 */
.pin-dot:focus{border-color:var(--primary)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(16,185,129,.15)!important;outline:none}

/* 表单样式 */
.login-form{transition:all .3s}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;color:#666;margin-bottom:8px;font-weight:500}
.form-group input{width:100%;padding:12px 16px;border:1px solid #E8EBED;border-radius:10px;font-size:14px;background:#F9F9F9;outline:none;transition:all .2s}
.form-group input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(7,193,96,.1)}

/* 登录页脚 */
.login-footer{text-align:center;margin-top:16px;margin-bottom:24px}
.forgot-link{font-size:13px;color:#999;text-decoration:none;transition:color .2s}
.forgot-link:hover{color:var(--primary)}

/* Button transitions */
.bill-btn{transition:transform .1s,opacity .1s}
.bill-btn:active{transform:scale(.95)}
.header-btn{transition:transform .1s,opacity .1s}
.header-btn:active{transform:scale(.94)}

/* 手机号登录样式 */
.code-input-row{display:flex;gap:10px;align-items:center}
.code-input-row input{flex:1;padding:12px 16px;border:1px solid #E8EBED;border-radius:10px;font-size:14px;background:#F9F9F9;outline:none;transition:all .2s}
.code-input-row input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(7,193,96,.1)}
.code-btn{padding:12px 16px;border:1.5px solid var(--primary);border-radius:10px;background:#fff;color:var(--primary);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0}
.code-btn:hover{background:var(--primary-light)}
.code-btn:disabled{background:#F5F5F5;color:#bbb;border-color:#E8EBED;cursor:not-allowed}