:root { --navy:#0b1f3a; --navy2:#13365e; --blue:#1769aa; --orange:#ef7d17; --yellow:#ffc928; --green:#168451; --red:#c23a3a; --ink:#162235; --muted:#66778d; --line:#dfe7f0; --surface:#f4f7fb; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--ink); font-family:"Manrope",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.admin-shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; background:linear-gradient(180deg,var(--navy),#061425); color:#c5d4e5; padding:24px 16px; overflow:auto; }
.admin-brand { display:flex; align-items:center; gap:11px; padding:0 8px 24px; color:#fff; font-weight:900; }
.admin-brand span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:var(--navy); background:var(--yellow); font-weight:900; }
.sidebar-label { padding:18px 12px 8px; color:#67829e; font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; font-weight:900; }
.sidebar nav { display:grid; gap:4px; }
.sidebar nav a { padding:11px 12px; border-radius:11px; font-size:.9rem; font-weight:700; }
.sidebar nav a:hover,.sidebar nav a.active { color:#fff; background:rgba(255,255,255,.1); }
.sidebar .logout { color:#ffb5b5; margin-top:12px; }
.admin-main { min-width:0; }
.admin-topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 28px; background:#fff; border-bottom:1px solid var(--line); }
.admin-topbar small { color:var(--muted); display:block; }
.admin-topbar a { color:var(--blue); font-weight:800; }
.admin-content { padding:30px; max-width:1500px; margin:auto; }
.page-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:24px; }
.page-head h1 { margin:3px 0 0; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.1; }
.eyebrow { color:var(--orange); font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; font-weight:900; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:11px; padding:10px 15px; cursor:pointer; font-weight:800; transition:.2s; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--yellow); color:var(--navy); }
.btn-dark { background:var(--navy); color:#fff; }
.btn-outline { border:1px solid var(--line); background:#fff; color:var(--ink); }
.btn-danger { background:#fff0f0; color:var(--red); }
.btn-small { padding:7px 10px; font-size:.78rem; }
.btn-block { width:100%; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:17px; padding:20px; box-shadow:0 8px 22px rgba(10,31,58,.05); }
.kpi span { display:block; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; }
.kpi strong { display:block; margin-top:8px; font-size:1.75rem; color:var(--navy); }
.panel { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 22px rgba(10,31,58,.04); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 20px; border-bottom:1px solid var(--line); }
.panel-head h2 { margin:0; font-size:1.05rem; }
.panel-body { padding:20px; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:760px; }
th,td { text-align:left; padding:13px 15px; border-bottom:1px solid #edf1f6; vertical-align:middle; }
th { color:#728299; background:#f9fbfd; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
td { font-size:.87rem; }
tr:last-child td { border-bottom:0; }
.table-image { width:52px; height:52px; object-fit:contain; border-radius:10px; background:#f3f6fa; border:1px solid var(--line); }
.table-placeholder { width:52px; height:52px; border-radius:10px; display:grid; place-items:center; background:#eef3f8; color:#8091a5; font-weight:900; }
.actions { display:flex; flex-wrap:wrap; gap:7px; }
.badge { display:inline-flex; border-radius:99px; padding:5px 9px; font-size:.7rem; font-weight:900; text-transform:capitalize; }
.badge-success { color:#166d47; background:#e5f7ee; }
.badge-info { color:#17629b; background:#e7f3fc; }
.badge-warning { color:#936108; background:#fff4cf; }
.badge-danger { color:#a32f2f; background:#ffeded; }
.badge-muted { color:#5f6e81; background:#edf1f5; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.toolbar .form-control { max-width:360px; }
.form-card { max-width:980px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.form-group { display:grid; gap:7px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:.82rem; font-weight:800; }
.form-control { width:100%; border:1px solid var(--line); border-radius:11px; padding:11px 12px; background:#fff; outline:none; }
.form-control:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(23,105,170,.1); }
textarea.form-control { min-height:120px; resize:vertical; }
.form-help { color:var(--muted); font-size:.75rem; }
.form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.check-row { display:flex; align-items:center; gap:9px; min-height:44px; }
.preview-image { width:min(280px,100%); max-height:220px; object-fit:contain; padding:10px; border:1px solid var(--line); border-radius:13px; background:#f5f8fb; }
.variant-row { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:9px; margin-bottom:9px; }
.flash { margin-bottom:18px; border-radius:12px; padding:12px 15px; font-weight:700; }
.flash-success { color:#176c48; background:#e4f7ed; border:1px solid #ace1c5; }
.flash-error { color:#a12e2e; background:#fff0f0; border:1px solid #efbcbc; }
.empty { color:var(--muted); text-align:center; padding:36px; }
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.detail { background:#f7f9fc; border-radius:12px; padding:13px; }
.detail small { display:block; color:var(--muted); }
.detail strong { display:block; margin-top:5px; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top right,#fde99f,transparent 28%),linear-gradient(135deg,#07182c,#1769aa); }
.login-card { width:min(460px,100%); background:#fff; border-radius:24px; padding:34px; box-shadow:0 30px 80px rgba(0,0,0,.28); }
.login-logo { width:66px; height:66px; display:grid; place-items:center; border-radius:19px; background:var(--yellow); color:var(--navy); font-weight:900; font-size:1.6rem; margin-bottom:20px; }
.login-card h1 { margin:0; }
.login-card p { color:var(--muted); }
.login-card form { display:grid; gap:15px; margin-top:24px; }
.muted { color:var(--muted); }

@media (max-width:1000px) { .admin-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.sidebar nav{display:flex;overflow:auto}.sidebar-label{display:none}.sidebar nav a{white-space:nowrap}.kpi-grid{grid-template-columns:repeat(2,1fr)}.admin-content>div[style*="grid-template-columns"]{grid-template-columns:1fr!important} }
@media (max-width:650px) { .admin-content{padding:20px 12px}.admin-topbar{padding:12px 15px}.page-head{display:block}.page-head .btn{margin-top:14px}.kpi-grid,.form-grid,.detail-grid{grid-template-columns:1fr}.form-group.full{grid-column:auto}.variant-row{grid-template-columns:1fr 1fr}.variant-row .remove-variant{grid-column:1/-1}.login-card{padding:25px} }