:root { --bg:#f5f6f4; --ink:#27342b; --soft:#66756c; --line:#dfe5df; --green:#284d38; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
[hidden] { display:none !important; }
h1 { font-size:22px; margin:0; } h2 { font-size:16px; } p { color:var(--soft); }
button,input,textarea,select { font:inherit; } button { cursor:pointer; }
input,textarea,select { width:100%; border:1px solid var(--line); border-radius:6px; padding:9px 11px; background:#fff; color:var(--ink); }
input:focus,textarea:focus,select:focus { outline:2px solid #85aa91; outline-offset:1px; }
label { display:block; margin:10px 0 5px; color:var(--soft); font-size:13px; }
.btn { border:0; border-radius:6px; padding:9px 16px; background:var(--green); color:#fff; white-space:nowrap; }
.btn.ghost { background:#e8eeea; color:var(--green); } .btn.danger { background:#fff0ee; color:#ad302c; }
.btn:disabled { opacity:.55; cursor:not-allowed; } .error { color:#af3530; } .muted { color:var(--soft); font-size:12px; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px; width:360px; max-width:100%; }
.login-card .btn { width:100%; } .app { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:100vh; }
aside { background:#fff; border-right:1px solid var(--line); padding:22px 12px; }
aside h2 { padding:0 12px; margin-bottom:24px; } aside button { width:100%; text-align:left; border:0; background:none; color:var(--soft); border-radius:6px; padding:11px 12px; margin-bottom:4px; }
aside button.active { background:#e7f0e9; color:var(--green); font-weight:600; } main { padding:28px; min-width:0; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; } .toolbar input { max-width:340px; } .toolbar select { max-width:150px; }
.table-wrap { overflow-x:auto; border-top:1px solid var(--line); background:#fff; } table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
th { background:#eff3f0; color:var(--soft); font-weight:500; white-space:nowrap; } td.actions { min-width:170px; } .actions .btn { margin:0 4px 5px 0; padding:6px 10px; }
td img { width:56px; height:56px; object-fit:cover; border-radius:6px; background:#e9eeea; } .product-name { min-width:150px; }
.badge { display:inline-block; padding:2px 8px; border-radius:5px; background:#e8efea; color:var(--green); white-space:nowrap; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.span2 { grid-column:1/-1; } fieldset { border:1px solid var(--line); border-radius:6px; margin-top:14px; } .check { display:inline-flex; align-items:center; gap:8px; margin-right:16px; color:var(--ink); } .check input { width:18px; height:18px; accent-color:var(--green); }
.images { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; } .images img { width:76px; height:76px; object-fit:cover; border-radius:6px; }
.category-bar { padding:20px 0; } .category-bar form { display:flex; gap:10px; max-width:400px; margin-top:15px; } #categories button { margin:0 8px 6px 0; }
.config-status { display:flex; gap:12px; flex-wrap:wrap; padding:12px 0 24px; color:var(--soft); }
.account-form { max-width:420px; margin-bottom:30px; } .account-form .btn { margin-top:20px; }
.form-actions { display:flex; gap:10px; margin-top:15px; } dialog { border:1px solid var(--line); border-radius:8px; padding:24px; width:400px; max-width:calc(100vw - 32px); }
dialog::backdrop { background:rgba(20,32,24,.4); } #notice { position:fixed; top:16px; right:16px; z-index:10; max-width:calc(100vw - 32px); background:#284d38; color:#fff; padding:12px 18px; border-radius:6px; display:none; }
@media(max-width:720px) { .app { display:block; } aside { padding:12px; border-right:0; border-bottom:1px solid var(--line); } aside h2 { margin:0 0 10px; padding:0; } aside nav { display:flex; flex-wrap:wrap; gap:4px; } aside button { width:auto; padding:8px 10px; } #logoutBtn { position:absolute; top:8px; right:10px; } main { padding:18px 12px; } .form-grid { grid-template-columns:1fr; } .span2 { grid-column:auto; } .toolbar { flex-wrap:wrap; } }