:root { --ink:#24302a; --muted:#718078; --paper:#fbfaf5; --sage:#d9e5d6; --green:#3f775b; --green-dark:#23533c; --peach:#f5dfcf; --yellow:#f5e4a6; --line:#e6e9e2; --danger:#bf5b51; --shadow:0 14px 38px rgba(42,67,51,.10); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(150deg,#f5f2e7 0%,#fbfaf5 48%,#eff4ea 100%); }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(1160px,calc(100% - 32px)); margin:auto; padding:42px 0 70px; }
.hero { display:flex; justify-content:space-between; align-items:end; padding:22px 0 34px; }
.hero-actions { display:flex; align-items:center; gap:12px; }
.sync-status { display:inline-flex; align-items:center; border-radius:999px; padding:7px 10px; background:#f1f4ee; color:var(--muted); font-size:12px; font-weight:750; white-space:nowrap; }.sync-status.syncing{background:#fbefc8;color:#956d1b}.sync-status.synced{background:#e4eee5;color:#397053}.sync-status.error{background:#fae2df;color:#a4473f}
.eyebrow { margin:0 0 7px; color:var(--green); font-size:12px; letter-spacing:.13em; font-weight:800; }
h1,h2,h3,p { margin:0; } h1 { font-family:Georgia,"Songti SC",serif; font-size:clamp(40px,7vw,68px); line-height:1; letter-spacing:.04em; } h2 { font-size:24px; } h3 { font-size:18px; }
.hero-copy { color:var(--muted); margin-top:12px; font-size:17px; }
.primary-button,.secondary-button,.icon-button,.entry-tab { border:0; border-radius:12px; transition:.18s ease; }
.primary-button { background:var(--green); color:white; padding:12px 18px; font-weight:750; box-shadow:0 8px 16px rgba(63,119,91,.18); } .primary-button:hover { background:var(--green-dark); transform:translateY(-1px); } .primary-button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.secondary-button { background:#fff; color:var(--green-dark); padding:11px 15px; border:1px solid #d9e1d6; font-weight:700; } .secondary-button:hover { background:#f3f7f1; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric { padding:20px; border-radius:18px; min-height:110px; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow); } .metric:nth-child(2){background:var(--peach)} .metric:nth-child(3){background:var(--yellow)} .metric:nth-child(4){background:var(--sage)}
.metric span { display:block; color:var(--muted); font-size:13px; } .metric strong { display:block; margin-top:13px; font-size:31px; }
.attention-section,.inventory-section { margin-top:34px; padding:24px; border:1px solid rgba(232,234,225,.9); background:rgba(255,255,255,.76); border-radius:22px; box-shadow:var(--shadow); }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }.count-pill,.status-chip { display:inline-flex; align-items:center; border-radius:999px; padding:6px 10px; background:#f1f4ee; color:var(--green-dark); font-size:12px; font-weight:750; }.status-chip.danger{background:#fae2df;color:#a4473f}.status-chip.warn{background:#fbefc8;color:#956d1b}.status-chip.low{background:#e4eee5;color:#397053}
.attention-list { display:grid; gap:10px; }.attention-item { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:13px; background:#fbfcf9; border:1px solid var(--line); }.attention-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--peach); }.attention-copy { flex:1; }.attention-copy strong{display:block}.attention-copy span{color:var(--muted);font-size:13px}.quiet { padding:17px; color:var(--muted); text-align:center; background:#f7faf5; border-radius:13px; }
.inventory-heading { align-items:end; }.filters{display:flex;gap:8px}.filters input,.filters select{min-width:120px}.filters input{width:180px}
input,select { width:100%; border:1px solid #dce2d9; border-radius:10px; color:var(--ink); background:white; min-height:42px; padding:9px 11px; outline:none; } input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(63,119,91,.12)}
.inventory-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.supply-card{padding:17px;border:1px solid var(--line);border-radius:17px;background:#fff;transition:.18s ease}.supply-card:hover{box-shadow:0 10px 20px rgba(35,83,60,.1);transform:translateY(-2px)}.card-top{display:flex;justify-content:space-between;gap:8px;align-items:start}.card-top h3{margin-top:3px}.card-meta{color:var(--muted);font-size:13px;margin-top:6px}.stock-line{display:flex;justify-content:space-between;align-items:end;margin:20px 0 12px}.stock-line strong{font-size:27px}.stock-line span{font-size:13px;color:var(--muted)}.card-actions{display:flex;gap:7px}.card-actions button{flex:1;padding:8px;border:1px solid #dce4dc;border-radius:9px;background:#f8faf7;color:var(--green-dark);font-weight:700}.card-actions button:last-child{background:var(--green);color:white;border-color:var(--green)}
.empty-state { padding:48px 20px; text-align:center; color:var(--muted); }.empty-state h3{margin:10px 0 8px;color:var(--ink)}.empty-state .secondary-button{margin-top:19px}.empty-icon{font-size:36px;color:var(--green)}
.app-dialog { width:min(720px,calc(100% - 26px)); border:0; border-radius:22px; padding:24px; color:var(--ink); box-shadow:0 30px 80px rgba(24,43,32,.24); }.app-dialog::backdrop{background:rgba(28,43,33,.38);backdrop-filter:blur(3px)}.dialog-header{display:flex;justify-content:space-between;align-items:start}.dialog-copy{margin-top:10px;color:var(--muted);line-height:1.6}.onboarding-dialog{width:min(460px,calc(100% - 26px))}.onboarding-message{min-height:0;margin:0}.onboarding-message:empty{display:none}.icon-button{display:grid;place-items:center;width:34px;height:34px;background:#f1f4ef;color:var(--green-dark);font-size:24px}.entry-tabs{display:flex;gap:4px;margin:22px 0 14px;padding:4px;background:#f1f4ef;border-radius:12px}.entry-tab{flex:1;padding:9px;background:transparent;color:var(--muted);font-weight:700}.entry-tab.active{background:white;color:var(--green-dark);box-shadow:0 2px 5px rgba(40,63,49,.1)}.template-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:17px}.template-row button{border:1px solid #d6e1d4;color:var(--green-dark);background:#f5f9f3;border-radius:999px;padding:7px 10px;font-size:13px}.item-form{display:grid;gap:15px}.form-grid{display:grid;gap:12px}.form-grid.two{grid-template-columns:repeat(2,1fr)}.form-grid.three{grid-template-columns:repeat(3,1fr)}label{display:grid;gap:6px;font-size:13px;font-weight:700;color:#526058}.form-actions{display:flex;justify-content:end;gap:9px;margin-top:5px}.field-hint{font-size:13px;color:#a4473f;background:#fff2ef;padding:9px 11px;border-radius:9px}.photo-link{font-size:13px;color:var(--muted);padding:8px 10px;background:#f5f7f4;border-radius:9px}.photo-panel{margin-top:12px}.hidden{display:none!important}.photo-dropzone{position:relative;min-height:230px;border:1.5px dashed #afc9b5;background:#f7faf5;border-radius:15px;overflow:hidden;display:grid;place-items:center;text-align:center;color:var(--green-dark)}.photo-dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}.photo-dropzone span{display:block;font-size:38px;margin-bottom:8px}.photo-dropzone small{display:block;color:var(--muted);margin-top:6px}.photo-dropzone img{width:100%;height:270px;object-fit:contain;background:#edf1ec}.photo-actions{display:flex;justify-content:end;gap:9px;margin-top:12px}.recognition-message{min-height:20px;margin-top:10px;color:var(--muted);font-size:13px}.recognition-message.error{color:#a4473f}.recognition-message.success{color:var(--green-dark)}.detail-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 20px}.detail-summary p{color:var(--muted);font-size:14px}.batch-list{display:grid;gap:9px}.batch-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:11px}.batch-row img{width:42px;height:42px;object-fit:cover;border-radius:8px}.batch-main{flex:1}.batch-main strong,.batch-main span{display:block}.batch-main span{font-size:12px;color:var(--muted);margin-top:3px}.danger-button{border:0;background:#fff0ee;color:#a4473f;border-radius:8px;padding:7px 9px}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#243b2d;color:white;padding:11px 16px;border-radius:999px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:780px){.app-shell{width:min(100% - 22px,1160px);padding-top:25px}.hero{align-items:start;gap:18px;flex-direction:column}.metrics{grid-template-columns:repeat(2,1fr)}.inventory-list{grid-template-columns:1fr}.inventory-heading,.section-heading{align-items:start;flex-direction:column}.filters{width:100%;flex-wrap:wrap}.filters input{width:100%}.filters select{flex:1}.form-grid.two,.form-grid.three{grid-template-columns:1fr}.attention-section,.inventory-section{padding:17px}.app-dialog{padding:18px}}

/* Mobile-first PWA layout */
body { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(560px, 100%); padding: 22px 16px 106px; }
.metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric { min-height: 88px; padding: 15px; }
.metric strong { margin-top: 9px; font-size: 26px; }
.inventory-list { grid-template-columns: 1fr; gap: 11px; }
.supply-card { padding: 15px; }
.supply-card:active { background: #f7faf5; }
.card-actions button { min-height: 43px; padding: 10px 8px; }
.mobile-action-bar { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 250, 245, .92); border-top: 1px solid rgba(220, 226, 217, .8); backdrop-filter: blur(14px); }
.mobile-add-button { display: block; width: min(528px, 100%); margin: auto; padding: 14px; border: 0; border-radius: 14px; color: #fff; background: var(--green); box-shadow: 0 8px 18px rgba(63, 119, 91, .2); font-size: 16px; font-weight: 800; }
.mobile-add-button span { font-size: 20px; vertical-align: -1px; }
.app-dialog { width: 100%; max-width: 560px; max-height: 92dvh; margin: auto 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
.form-actions { position: sticky; bottom: -20px; padding: 12px 0 calc(2px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); }
.template-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
.template-row button { white-space: nowrap; }
.toast { bottom: 86px; }
@media (max-width: 420px) { .hero .primary-button { display: none; } .app-shell { padding-right: 12px; padding-left: 12px; } }