:root { --red:#c92b18; --red-dark:#a82113; --bg:#f4f5f7; --surface:#fff; --text:#181a1d; --muted:#747980; --line:#e7e9ec; --dark:#202327; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; min-width:1080px; background:var(--bg); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.login-view { min-height:100vh; display:grid; place-items:center; padding:32px; background:radial-gradient(circle at 20% 20%,#fff 0,transparent 30%),linear-gradient(135deg,#f1f2f4,#e5e7ea); }
.login-card { width:430px; padding:34px; border-radius:22px; background:#fff; box-shadow:0 24px 70px rgba(28,30,34,.13); }
.brand-row { display:flex; align-items:center; gap:13px; }
.brand-row img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.brand-row h1 { margin:0; font-size:23px; letter-spacing:.08em; font-weight:600; }
.brand-row p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.login-card h2 { margin:34px 0 20px; font-size:22px; }
label { display:flex; flex-direction:column; gap:8px; color:#42464c; font-size:13px; font-weight:500; }
input,textarea,select { width:100%; border:1px solid #dfe2e6; border-radius:9px; padding:11px 12px; color:var(--text); background:#fff; outline:none; }
input:focus,textarea:focus,select:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(201,43,24,.1); }
.login-card form { display:grid; gap:17px; }
.primary,.secondary { min-height:42px; padding:0 17px; border-radius:9px; border:0; font-weight:600; }
.primary { color:#fff; background:var(--red); }
.primary:hover { background:var(--red-dark); }
.secondary { color:var(--text); background:#eef0f2; }
.error { min-height:18px; margin:0; color:#b42318; font-size:12px; }
.app-view { min-height:100vh; display:grid; grid-template-columns:238px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; padding:27px 18px 20px; display:flex; flex-direction:column; color:#fff; background:var(--dark); }
.sidebar-brand { padding:0 8px 27px; border-bottom:1px solid rgba(255,255,255,.09); }
.sidebar-brand img { width:44px; height:44px; }
.sidebar-brand h1 { font-size:19px; }
.sidebar-brand p { color:#989da5; }
.sidebar nav { display:grid; gap:6px; margin-top:25px; }
.nav-item,.logout { border:0; border-radius:9px; color:#aeb2b8; background:transparent; text-align:left; padding:12px 15px; }
.nav-item.active,.nav-item:hover { color:#fff; background:rgba(255,255,255,.09); }
.logout { margin-top:auto; }
.workspace { min-width:0; padding:0 38px 50px; }
.topbar { height:108px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.topbar h2 { margin:4px 0 0; font-size:27px; }
.eyebrow { margin:0; color:var(--red); font-size:10px; font-weight:700; letter-spacing:.18em; }
.admin-badge,.tag { display:inline-flex; padding:7px 11px; border-radius:20px; font-size:12px; color:var(--red); background:#fff0ed; }
.view { display:none; padding-top:28px; }
.view.active { display:block; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stats article { padding:23px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.stats span { color:var(--muted); font-size:13px; }
.stats strong { display:block; margin-top:12px; font-size:34px; }
.welcome-panel { margin-top:20px; padding:32px; display:flex; align-items:flex-end; justify-content:space-between; border-radius:17px; color:#fff; background:linear-gradient(135deg,#282b2f,#151719); }
.welcome-panel h3 { margin:18px 0 9px; font-size:25px; }
.welcome-panel p { width:620px; max-width:70vw; margin:0; color:#b9bdc2; line-height:1.7; }
.section-actions { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.section-actions h3 { margin:0; font-size:20px; }
.section-actions p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.table-wrap { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
table { width:100%; border-collapse:collapse; }
th,td { padding:15px 17px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; }
th { color:var(--muted); font-weight:500; background:#fafafb; }
tbody tr:last-child td { border-bottom:0; }
.product-cell { display:flex; align-items:center; gap:12px; }
.thumb { width:54px; height:54px; border-radius:9px; object-fit:cover; background:#eceeef; }
.thumb-placeholder { display:grid; place-items:center; color:var(--red); font-weight:700; }
.status { display:inline-flex; padding:5px 9px; border-radius:14px; font-size:11px; color:#157347; background:#e9f8ef; }
.status.off { color:#6b7280; background:#eff0f2; }
.row-actions { display:flex; gap:8px; justify-content:flex-end; }
.row-actions button { border:0; border-radius:7px; padding:7px 10px; color:#3f444a; background:#eef0f2; }
.row-actions .danger { color:#b42318; background:#fff0ed; }
dialog { width:min(820px,calc(100vw - 64px)); max-height:90vh; padding:0; border:0; border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.28); }
dialog::backdrop { background:rgba(20,22,25,.55); backdrop-filter:blur(2px); }
.dialog-form { padding:27px; }
.dialog-form header,.dialog-form footer { display:flex; align-items:center; justify-content:space-between; }
.dialog-form header { margin-bottom:23px; }
.dialog-form h3 { margin:4px 0 0; font-size:22px; }
.dialog-form footer { justify-content:flex-end; gap:10px; margin-top:24px; }
.icon-button { width:38px; height:38px; border:0; border-radius:50%; font-size:24px; color:var(--muted); background:#f1f2f4; }
.dialog-form:not(.product-form) { display:grid; gap:17px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.full { grid-column:1/-1; }
.check { display:flex; flex-direction:row; align-items:center; gap:8px; }
.check input { width:17px; height:17px; }
.check-group { display:flex; align-items:center; gap:24px; padding-top:25px; }
.upload-row { display:flex; gap:8px; }
.upload-row button { border:0; border-radius:8px; padding:0 14px; color:var(--red); background:#fff0ed; white-space:nowrap; }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; padding:11px 16px; border-radius:10px; color:#fff; background:#202327; transition:.2s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:1100px) { body{min-width:860px}.workspace{padding-left:24px;padding-right:24px}.app-view{grid-template-columns:210px 1fr} }