:root { color-scheme:light; font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif; background:#f3efe7; color:#2d261f; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(180deg,#e5ece4,#f5f0e8 42%,#f3efe7); }
body.modal-open { overflow:hidden; }
.shell { width:min(1240px,calc(100% - 32px)); margin:0 auto; padding:32px 0 64px; }
.panel,.card,.metric { background:#fffdf9; border:1px solid #e7ded1; border-radius:16px; box-shadow:0 10px 28px rgba(67,50,37,.06); }
.login-panel { width:min(460px,100%); margin:12vh auto 0; padding:36px; }
.eyebrow { margin:0; color:#897568; letter-spacing:.15em; font-size:12px; }
h1 { margin:10px 0 0; font-size:30px; }
h2 { margin:7px 0 0; }
.muted { color:#756a60; }
input,select,textarea { width:100%; border:1px solid #ded3c5; border-radius:10px; padding:0 14px; font:inherit; color:#2d261f; background:#faf6f0; }
input,select { height:46px; }
textarea { padding:12px 14px; resize:vertical; }
button { border:0; border-radius:10px; min-height:44px; padding:0 20px; color:#fff; background:#315f50; font-weight:700; cursor:pointer; }
button:hover { filter:brightness(.96); }
button:disabled { cursor:wait; opacity:.65; }
button.secondary { color:#315f50; background:#e2ece7; }
button.danger { background:#a2473f; }
#login-form { display:grid; gap:14px; margin-top:24px; }
.error { min-height:20px; color:#b43b32; }
.hidden { display:none!important; }
.topbar,.section-heading,.modal-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar { margin-bottom:18px; }
.tabs { display:flex; gap:8px; padding:8px; margin-bottom:18px; }
.tab { flex:0 0 150px; color:#5f574f; background:transparent; }
.tab.active { color:#fff; background:#315f50; }
.metrics { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:18px; }
.metric { padding:18px; }
.metric strong { display:block; overflow-wrap:anywhere; color:#315f50; font-size:24px; }
.metric span { display:block; margin-top:7px; color:#7b6e62; font-size:13px; }
.toolbar { display:grid; grid-template-columns:minmax(240px,1fr) 170px auto; gap:12px; padding:16px; margin-bottom:18px; }
.products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card { overflow:hidden; }
.cover { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#f3eee7; }
.card-body { padding:16px; }
.card-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card h2 { margin:0; min-width:0; font-size:18px; }
.pill { flex:none; border-radius:999px; padding:4px 8px; font-size:11px; }
.pill.online { color:#28634d; background:#e0eee6; }
.pill.offline { color:#8a4742; background:#f5e5e3; }
.meta { min-height:38px; margin:8px 0; color:#817367; font-size:13px; line-height:1.5; }
.price { margin:10px 0 15px; color:#b64f32; font-size:20px; font-weight:800; }
.price span { float:right; margin-top:5px; color:#817367; font-size:12px; font-weight:500; }
.card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.empty { grid-column:1/-1; padding:50px; text-align:center; color:#817367; }
.content-panel { padding:26px; }
.section-heading { align-items:flex-start; margin-bottom:20px; }
.section-heading .muted { margin:0; }
fieldset { margin:0 0 18px; padding:18px; border:1px solid #e8dfd3; border-radius:13px; }
legend { padding:0 8px; color:#315f50; font-weight:800; }
.content-grid,.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
label span { display:block; margin-bottom:6px; color:#6e6258; font-size:12px; }
.wide { width:100%; }
.modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:rgba(29,25,21,.55); backdrop-filter:blur(3px); }
.modal-card { width:min(820px,100%); max-height:calc(100vh - 48px); padding:24px; overflow:auto; }
.icon-button { width:44px; min-width:44px; padding:0; font-size:25px; }
.image-editor { display:grid; grid-template-columns:150px 1fr; gap:18px; margin:22px 0; }
.image-editor img { width:150px; height:150px; border-radius:12px; object-fit:cover; background:#eee8df; }
.image-editor label+label { margin-top:10px; }
.hint { margin:6px 0 12px; color:#897d72; font-size:12px; }
.full { grid-column:1/-1; }
.status-line { display:flex; align-items:center; justify-content:space-between; margin:18px 0; padding:14px; border-radius:10px; background:#f5f0e8; }
.status-line span { margin:0; font-weight:700; }
.status-line input { width:22px; height:22px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.notice { position:fixed; right:24px; bottom:24px; z-index:50; padding:13px 18px; border-radius:10px; color:#fff; background:#315f50; box-shadow:0 10px 26px rgba(0,0,0,.18); }
@media (max-width:980px) { .metrics{grid-template-columns:repeat(3,1fr)} .products{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px) {
  .shell{width:min(100% - 20px,1240px);padding-top:18px}.topbar{align-items:flex-end}.topbar h1{font-size:24px}
  .tabs{position:sticky;top:0;z-index:5}.tab{flex:1}.metrics{grid-template-columns:repeat(2,1fr)}
  .toolbar{grid-template-columns:1fr}.products{grid-template-columns:1fr 1fr;gap:10px}.card-body{padding:11px}.card h2{font-size:15px}
  .meta{font-size:11px}.price{font-size:17px}.card-actions{grid-template-columns:1fr}.card-actions button{min-height:38px;padding:0 8px}
  .content-panel{padding:16px}.section-heading{display:block}.content-grid,.form-grid{grid-template-columns:1fr}.full{grid-column:auto}
  .modal{padding:10px}.modal-card{max-height:calc(100vh - 20px);padding:16px}.image-editor{grid-template-columns:100px 1fr}.image-editor img{width:100px;height:100px}
}