:root { color-scheme: light; --ink:#18221d; --muted:#65716b; --line:#dde3df; --surface:#fff; --canvas:#f4f6f5; --green:#16784c; --green-soft:#e8f4ed; --red:#ba3d35; --blue:#2367a8; --amber:#a76a12; font-family:"Segoe UI","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-size:14px; letter-spacing:0; }
button,input,select,textarea { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
.shell { min-height:100vh; display:grid; grid-template-columns:226px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; padding:20px 14px; background:#17231d; color:#edf5f0; display:flex; flex-direction:column; z-index:20; }
.brand { display:flex; align-items:center; gap:11px; padding:2px 8px 22px; }
.brand strong,.brand span { display:block; }.brand span { color:#8fa49a; font-size:10px; margin-top:3px; }
.brand-seal { width:54px; height:54px; display:grid; place-items:center; background:var(--green); color:white; border-radius:6px; font-size:22px; font-weight:700; }
.brand-seal.small { width:34px; height:34px; font-size:15px; }
nav { flex:1; overflow:auto; }.nav-label { color:#778c82; font-size:11px; padding:18px 10px 7px; }
.nav-item { width:100%; height:40px; border:0; border-radius:5px; padding:0 10px; display:flex; align-items:center; gap:10px; color:#bac9c1; background:transparent; text-align:left; margin:2px 0; }
.nav-item:hover,.nav-item.active { color:white; background:#26362e; }.nav-item.active { box-shadow:inset 3px 0 var(--green); }
.nav-count { margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:10px; background:#bd463d; color:white; font-size:11px; }
.nav-mark,.category-mark { width:25px; height:25px; border-radius:5px; display:grid; place-items:center; flex:none; font-size:11px; font-style:normal; font-weight:700; color:#fff; }
.nav-mark.dark { background:#35473e; }.green { background:#2d8a5f; }.blue { background:#347bb7; }.amber { background:#bf8124; }.cyan { background:#338b91; }.violet { background:#7666a5; }.gray { background:#707b75; }
.sidebar-foot { border-top:1px solid #2a3a32; padding-top:8px; }.admin-row { display:flex; align-items:center; gap:8px; padding:12px 8px 0; }.avatar { width:30px; height:30px; border-radius:50%; background:#dbe9e1; color:#205c40; display:grid; place-items:center; font-weight:700; }.admin-row div { flex:1; }.admin-row strong,.admin-row small { display:block; }.admin-row small { color:#879b90; font-size:11px; }.plain { border:0; background:none; color:#98aaa0; padding:5px; }
.main { min-width:0; min-height:100vh; display:flex; flex-direction:column; }.topbar { height:68px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; background:white; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }.topbar>div:first-of-type span,.topbar>div:first-of-type strong { display:block; }.topbar span { color:var(--muted); font-size:11px; }.topbar strong { margin-top:2px; }.top-actions { display:flex; align-items:center; gap:8px; }.top-actions input { width:280px; }
input,select,textarea { width:100%; border:1px solid #cfd8d3; border-radius:5px; background:white; color:var(--ink); padding:10px 11px; outline:none; }.top-actions input { padding:9px 12px; }input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(22,120,76,.1); }textarea { min-height:82px; resize:vertical; }
.primary,.secondary { min-height:38px; border-radius:5px; padding:0 14px; border:1px solid transparent; font-weight:600; }.primary { background:var(--green); color:white; }.primary:hover { background:#11643f; }.secondary { background:white; border-color:#cfd8d3; color:#28352f; }.text-button { border:0; background:none; color:var(--green); padding:5px; }.link-button { display:inline-flex; align-items:center; text-decoration:none; }
.content { width:100%; padding:28px; max-width:1500px; margin:0 auto; flex:1; }.site-footer { flex:none; min-height:48px; display:flex; align-items:center; justify-content:center; padding:13px 20px; border-top:1px solid var(--line); color:var(--muted); background:var(--surface); font-size:11px; }.site-footer a { color:inherit; text-decoration:none; }.site-footer a:hover { color:var(--green); text-decoration:underline; }.page-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }.page-head h1 { font-size:25px; margin:0; }.page-head p { margin:6px 0 0; color:var(--muted); }.page-head>div:last-child { display:flex; gap:8px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); background:white; border:1px solid var(--line); border-radius:7px; margin-bottom:18px; }.metrics>div { padding:18px 20px; border-right:1px solid var(--line); }.metrics>div:last-child { border:0; }.metrics span,.metrics small,.stock-number span,.stock-number small { display:block; color:var(--muted); }.metrics strong { display:block; font-size:25px; margin:7px 0 3px; }.metrics small { font-size:11px; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }.category-card { position:relative; min-height:150px; padding:18px; display:grid; grid-template-columns:36px 1fr auto; grid-template-rows:auto auto 1fr; gap:5px 10px; text-align:left; border:1px solid var(--line); border-radius:7px; background:white; color:var(--ink); }.category-card:hover { border-color:#aabbb2; box-shadow:0 4px 14px rgba(24,34,29,.06); }.category-card .category-mark { width:34px; height:34px; grid-row:1/3; }.category-name { font-weight:700; align-self:center; }.category-total { grid-column:3; grid-row:1/3; align-self:center; }.category-total b { font-size:28px; }.category-label { grid-column:2; color:var(--muted); font-size:11px; }.category-card small { grid-column:1/4; align-self:end; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.category-card>i { position:absolute; right:15px; bottom:13px; color:#91a098; font-style:normal; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr); gap:18px; }.section { background:white; border:1px solid var(--line); border-radius:7px; padding:20px; margin-bottom:18px; }.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.section-head.padded { padding:18px 20px 0; }.section h2,.settings-band h2 { margin:0; font-size:16px; }.section-head p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.stock-alert { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-bottom:18px; padding:13px 16px; border:1px solid #e5c3bf; border-radius:6px; background:#fff5f4; color:var(--ink); text-align:left; }.stock-alert span { padding:4px 7px; border-radius:4px; background:var(--red); color:white; font-size:11px; }.stock-alert small { color:var(--red); }.recommendation-metrics { grid-template-columns:repeat(2,1fr); }.recommendation-metrics>div:nth-child(2) { border-right:0; }.recommendation-row { display:grid; grid-template-columns:minmax(180px,1fr) 90px 100px 130px 94px; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid #edf0ee; }.recommendation-row:last-child,.threshold-row:last-child { border:0; }.recommendation-row>div:first-child strong,.recommendation-row>div:first-child small,.recommendation-row>div:not(:first-child) span,.recommendation-row>div:not(:first-child) strong { display:block; }.recommendation-row small,.recommendation-row span { color:var(--muted); font-size:11px; }.recommendation-row>div:not(:first-child) strong { margin-top:4px; }.threshold-row { min-height:58px; display:grid; grid-template-columns:minmax(180px,1fr) 130px 140px 44px 70px; gap:12px; align-items:center; border-bottom:1px solid #edf0ee; }.threshold-row>div strong,.threshold-row>div small { display:block; }.threshold-row small,.threshold-row>span { color:var(--muted); }.threshold-row i { padding:4px 6px; border-radius:4px; background:#f8eae8; color:var(--red); font-size:11px; font-style:normal; text-align:center; }.compact-modal { width:min(480px,100%); }
.movement-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #edf0ee; }.movement-row:last-child { border:0; }.movement-row div strong,.movement-row div small { display:block; }.movement-row div small { margin-top:4px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.movement-type { border-radius:4px; padding:5px 6px; text-align:center; font-size:12px; background:#edf1ef; }.movement-type.in { color:var(--green); background:var(--green-soft); }.movement-type.out { color:var(--red); background:#f8eae8; }.positive { color:var(--green); }.negative { color:var(--red); }
.destination-row { padding:13px 0; border-bottom:1px solid #edf0ee; }.destination-row:last-child { border:0; }.destination-row>strong { display:block; margin-bottom:8px; }.destination-tags { display:flex; flex-wrap:wrap; gap:6px; }.destination-tags span { padding:5px 8px; border-radius:4px; background:#eef3f0; color:#526159; font-size:12px; }.destination-tags b { color:var(--ink); }
.category-summary { display:flex; align-items:baseline; gap:10px; padding:22px; margin-bottom:18px; border-left:4px solid var(--green); background:white; border-radius:0 7px 7px 0; }.category-summary span { color:var(--muted); }.category-summary strong { font-size:34px; }.category-summary small { color:var(--muted); }.stock-row { display:grid; grid-template-columns:minmax(0,1fr) 150px 60px; align-items:center; padding:14px 0; border-bottom:1px solid #edf0ee; }.stock-row:last-child { border:0; }.product-main { display:flex; gap:12px; align-items:center; }.product-main strong,.product-main small { display:block; }.product-main small { color:var(--muted); margin-top:3px; }.stock-number { text-align:right; }.stock-number strong { font-size:22px; }.stock-number span { display:inline; }.stock-number small { font-size:11px; }
.notice { display:flex; gap:12px; padding:12px 16px; border:1px solid #e5d6b8; border-radius:6px; background:#fffaf0; color:#665333; margin-bottom:14px; }.notice span { color:#806f50; }.table-section { padding:0; }.table-wrap { overflow:auto; }table { width:100%; border-collapse:collapse; min-width:760px; }th { text-align:left; color:#68736d; background:#f8faf9; font-size:11px; padding:11px 14px; border-bottom:1px solid var(--line); }td { padding:12px 14px; border-bottom:1px solid #edf0ee; vertical-align:top; }td strong,td small { display:block; }td small { color:var(--muted); margin-top:4px; }.tag { display:inline-block; padding:4px 7px; border-radius:4px; background:#edf1ef; color:#58635d; font-size:11px; }.tag.ok { background:var(--green-soft); color:var(--green); }.mono { font-family:Consolas,monospace; font-size:12px; }.empty { padding:35px 10px; text-align:center; color:#87918c; }
.settings-band { display:grid; grid-template-columns:260px minmax(300px,480px); gap:40px; background:white; border:1px solid var(--line); border-radius:7px; padding:28px; }.settings-band>div span,.settings-band>div strong,.settings-band>div small { display:block; }.settings-band>div span,.settings-band>div small { color:var(--muted); }.settings-band>div strong { font-size:24px; margin:8px 0 4px; }.settings-band form { display:grid; gap:14px; }.field { display:grid; gap:6px; }.field span { color:#4f5c55; font-size:12px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.field.full,.check.full { grid-column:1/-1; }.check { display:flex; align-items:center; gap:9px; }.check input { width:16px; }.check span { color:#48564f; }
.user-metrics { grid-template-columns:repeat(2,1fr); }.user-metrics>div:nth-child(2) { border-right:0; }.permission-guide { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:18px; border:1px solid var(--line); border-radius:7px; background:white; }.permission-guide>div { padding:16px 18px; border-right:1px solid var(--line); }.permission-guide>div:last-child { border:0; }.permission-guide strong,.permission-guide span { display:block; }.permission-guide span,.muted { margin-top:4px; color:var(--muted); font-size:12px; }.role-admin { color:#75520f; background:#fff3d7; }.role-operator { color:var(--blue); background:#eaf3fb; }.role-viewer { color:#59645e; background:#edf1ef; }
.analytics-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr); gap:18px; }.chart-legend { display:flex; gap:14px; color:var(--muted); font-size:11px; }.chart-legend span::before { content:""; display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; }.in-key::before { background:var(--green); }.out-key::before { background:var(--red); }.column-chart { min-height:195px; display:flex; align-items:end; gap:8px; padding:20px 8px 0; border-bottom:1px solid var(--line); overflow-x:auto; }.column-group { min-width:44px; flex:1; display:grid; gap:8px; justify-items:center; }.column-values { height:150px; display:flex; align-items:end; justify-content:center; gap:4px; }.column-values i { display:block; width:12px; border-radius:3px 3px 0 0; }.bar-in { background:var(--green); }.bar-out { background:var(--red); }.column-group>span { color:var(--muted); font-size:10px; white-space:nowrap; }.rank-chart { display:grid; gap:13px; }.rank-row { display:grid; grid-template-columns:125px minmax(70px,1fr) auto; align-items:center; gap:10px; }.rank-row strong,.rank-row span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.rank-row span { margin-top:2px; color:var(--muted); font-size:10px; }.rank-row>b { font-size:11px; }.rank-track,.spend-track { height:7px; border-radius:3px; overflow:hidden; background:#edf1ef; }.rank-track i,.spend-track i { height:100%; display:block; background:#347bb7; }.spend-chart { display:grid; gap:13px; }.spend-chart>div { display:grid; grid-template-columns:75px minmax(120px,1fr) 120px 50px; align-items:center; gap:12px; }.spend-chart span,.spend-chart small { color:var(--muted); }.spend-chart strong { text-align:right; }.spend-track i { background:var(--amber); }
.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; padding:18px; background:rgba(15,25,20,.55); z-index:50; }.modal { width:min(720px,100%); max-height:92vh; overflow:auto; border-radius:7px; background:white; box-shadow:0 24px 60px rgba(0,0,0,.25); }.modal header,.modal footer { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }.modal footer { justify-content:flex-end; gap:8px; border-top:1px solid var(--line); border-bottom:0; }.modal h2 { margin:0; font-size:18px; }.modal header p { margin:4px 0 0; color:var(--muted); font-size:12px; }.modal-close { width:34px; height:34px; border:0; background:#f1f4f2; border-radius:5px; font-size:20px; }.modal-body { padding:20px 22px; }
.import-modal { width:min(980px,100%); }.import-tools { display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px; }.import-drop { min-height:220px; display:grid; place-items:center; align-content:center; gap:10px; border:1px dashed #aebdb5; border-radius:6px; background:#f8faf9; text-align:center; }.import-drop input { width:min(420px,90%); }.import-drop span { color:var(--muted); font-size:12px; }.import-summary { display:flex; flex-wrap:wrap; gap:18px; padding:12px 14px; background:#f5f8f6; border:1px solid var(--line); border-radius:5px 5px 0 0; }.import-table { max-height:430px; border:1px solid var(--line); border-top:0; }.import-table table { min-width:720px; }.invalid-row { background:#fff7f6; }.import-error { color:var(--red); font-size:11px; }
.login-shell { min-height:100vh; display:flex; flex-direction:column; }.login-page { min-height:0; flex:1; display:grid; grid-template-columns:1fr 460px; background:#17231d; }.login-brand { padding:9vw; display:flex; flex-direction:column; justify-content:center; color:white; background:linear-gradient(135deg,#17231d 0%,#203b2d 100%); }.login-brand h1 { font-size:42px; margin:24px 0 8px; }.login-brand p { color:#a9bbb1; font-size:17px; }.login-panel { display:grid; place-items:center; padding:40px; background:#f4f6f5; }.login-panel form { width:100%; display:grid; gap:16px; }.login-title { margin-bottom:12px; }.login-title span,.login-title small { display:block; }.login-title span { font-size:24px; font-weight:700; }.login-title small { color:var(--muted); margin-top:5px; }.login-submit { margin-top:8px; }.form-error { min-height:20px; color:var(--red); margin:0; }.toast { position:fixed; right:24px; bottom:24px; z-index:80; padding:12px 16px; color:white; background:#223129; border-radius:5px; box-shadow:0 8px 25px rgba(0,0,0,.2); }.menu-button { display:none; }
@media (max-width:1000px) { .category-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid,.analytics-grid { grid-template-columns:1fr; }.top-actions input { width:200px; }.metrics { grid-template-columns:repeat(2,1fr); }.metrics>div:nth-child(2) { border-right:0; }.metrics>div:nth-child(-n+2) { border-bottom:1px solid var(--line); } }
@media (max-width:720px) { .shell { display:block; }.sidebar { position:fixed; left:-240px; width:226px; transition:left .2s; box-shadow:8px 0 24px rgba(0,0,0,.2); }.sidebar.open { left:0; }.menu-button { display:block; border:0; background:none; font-size:20px; }.topbar { height:auto; min-height:62px; padding:10px 14px; }.topbar>div:first-of-type { display:none; }.top-actions { flex:1; }.top-actions input { min-width:0; width:100%; }.top-actions .secondary { display:none; }.content { padding:18px 14px; }.page-head { align-items:flex-start; }.page-head h1 { font-size:22px; }.metrics,.category-grid { grid-template-columns:1fr; }.metrics>div { border-right:0; border-bottom:1px solid var(--line); }.category-card { min-height:135px; }.form-grid { grid-template-columns:1fr; }.field.full,.check.full { grid-column:auto; }.settings-band { grid-template-columns:1fr; padding:20px; }.notice { display:block; }.notice span { display:block; margin-top:5px; }.login-page { grid-template-columns:1fr; background:#f4f6f5; }.login-brand { min-height:230px; padding:38px 28px; }.login-brand h1 { font-size:30px; margin-top:18px; }.login-panel { padding:32px 24px; align-items:start; }.stock-row { grid-template-columns:minmax(0,1fr) 90px; }.stock-row>.text-button { display:none; }.spend-chart>div { grid-template-columns:62px minmax(80px,1fr) 92px; }.spend-chart small { display:none; }.rank-row { grid-template-columns:105px minmax(60px,1fr); }.rank-row>b { display:none; }.stock-alert { grid-template-columns:auto 1fr; }.stock-alert small { display:none; }.recommendation-row { grid-template-columns:1fr 72px 86px; }.recommendation-row>div:nth-child(3) { display:none; }.recommendation-row button { grid-column:1/-1; }.threshold-row { grid-template-columns:1fr auto; padding:12px 0; }.threshold-row>span,.threshold-row>i { display:none; }.permission-guide { grid-template-columns:1fr; }.permission-guide>div { border-right:0; border-bottom:1px solid var(--line); } }