
:root{
  --green:#08b05a;--green-dark:#058f48;--brown:#6c2b24;--bg:#f5f8f5;--card:#fff;--text:#1f1f1f;--muted:#6f6f6f;
  --line:rgba(0,0,0,.08);--shadow:0 18px 45px rgba(15,23,42,.08);--shadow-soft:0 10px 24px rgba(0,0,0,.05);--sidebar:280px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#fbfdfb 0%,#f3f7f3 100%);color:var(--text);line-height:1.55;overflow-x:hidden}
a{text-decoration:none;color:inherit} img{display:block;max-width:100%} button,input,textarea,select{font:inherit}
.admin-layout{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#101712 0%,#172119 100%);color:rgba(255,255,255,.88);padding:24px 20px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;padding:10px;border-radius:20px;background:rgba(255,255,255,.04);margin-bottom:24px}.brand img{width:110px;max-width:110px;height:auto;background:#fff;border-radius:14px;padding:8px;object-fit:contain}
.admin-badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(8,176,90,.14);color:#91efb9;font-size:12px;font-weight:700;margin-bottom:18px}
.menu-group{margin-bottom:22px}.menu-title{color:rgba(255,255,255,.46);font-size:12px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;padding:0 10px}.menu{display:grid;gap:8px}.menu a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;color:rgba(255,255,255,.84);font-weight:500}
.menu a:hover,.menu a.active{background:linear-gradient(135deg,rgba(8,176,90,.18),rgba(8,176,90,.10));color:#fff;box-shadow:inset 0 0 0 1px rgba(8,176,90,.22)}.menu .icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);flex-shrink:0;font-size:14px;font-weight:700}
.sidebar-footer{margin-top:22px;padding:16px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}.sidebar-footer h4{margin-bottom:8px;color:#fff}.sidebar-footer p{font-size:13px;color:rgba(255,255,255,.68);margin-bottom:12px}
.content{padding:24px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}.topbar-mobile-actions{display:none}
.search-wrap{flex:1;min-width:260px;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);color:var(--muted)}.search-wrap input{border:0;outline:0;background:transparent;width:100%}.top-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.icon-btn,.btn{border:0;cursor:pointer;transition:.2s ease}.icon-btn{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);font-size:18px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border-radius:999px;font-weight:700;white-space:nowrap}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--green),var(--green-dark));box-shadow:0 14px 28px rgba(8,176,90,.22)}.btn-dark{color:#fff;background:linear-gradient(135deg,var(--brown),#4f1c17);box-shadow:0 14px 28px rgba(108,43,36,.18)}.btn-outline{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.user-box{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft)}.avatar{width:40px;height:40px;border-radius:50%;background:rgba(8,176,90,.12);color:var(--green-dark);display:grid;place-items:center;font-weight:800}
.card,.panel,.table-card,.form-card,.stat-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:28px}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-bottom:24px}.hero-card{padding:30px;background:radial-gradient(circle at top right,rgba(8,176,90,.12),transparent 26%),linear-gradient(180deg,#fff 0%,#f6fbf7 100%)}
.eyebrow{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(8,176,90,.12);color:var(--green-dark);font-size:13px;font-weight:700;margin-bottom:14px}.hero-card h1{font-size:clamp(32px,3.6vw,52px);line-height:1.02;letter-spacing:-1.5px;margin-bottom:12px}.muted{color:var(--muted)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.grid-3,.grid-4{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.mini-card,.status-box,.stat-card{padding:18px;border-radius:24px}.mini-card,.status-box{background:linear-gradient(180deg,#fff 0%,#f8fbf8 100%);border:1px solid var(--line)}.mini-card h3,.status-box strong,.stat-card h3{font-size:28px;color:var(--green-dark);margin-bottom:4px}
.status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.main-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin-bottom:24px}.table-card,.form-card,.panel{padding:24px}.card-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.section-title{font-size:24px;color:var(--brown);margin-bottom:4px}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:14px 12px;border-bottom:1px solid rgba(0,0,0,.06);vertical-align:middle}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.product-cell{display:flex;align-items:center;gap:12px}.product-thumb{width:54px;height:54px;border-radius:16px;background:linear-gradient(180deg,#eef9f1 0%,#fafafa 100%);display:grid;place-items:center;color:var(--green-dark);font-weight:800;text-align:center;padding:6px;overflow:hidden}.status-pill{display:inline-flex;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700}.status-live{background:rgba(8,176,90,.12);color:var(--green-dark)}.status-low{background:rgba(255,186,55,.16);color:#a46a00}.status-draft{background:rgba(108,43,36,.10);color:var(--brown)}
.form-grid{display:grid;gap:14px}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-group label{display:block;font-weight:700;margin-bottom:8px}.form-control{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#fff;outline:0;box-shadow:var(--shadow-soft)} textarea.form-control{min-height:140px;resize:vertical}
.alert{padding:14px 16px;border-radius:16px;margin-bottom:18px;font-weight:600}.alert-success{background:rgba(8,176,90,.12);color:var(--green-dark);border:1px solid rgba(8,176,90,.15)}.alert-error{background:rgba(176,41,8,.12);color:#8c2a1a;border:1px solid rgba(176,41,8,.12)}
.action-links{display:flex;gap:8px;flex-wrap:wrap}.action-links .btn{padding:10px 14px;font-size:14px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#fbfdfb 0%,#f3f7f3 100%)}.login-card{width:min(520px,100%);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:30px;padding:34px}.login-card .logo{width:180px;margin:0 auto 18px}.login-card .logo img{max-width:180px;height:auto}.login-card h1{text-align:center;margin-bottom:8px;color:var(--brown)}.login-card p{text-align:center;color:var(--muted);margin-bottom:24px}
@media (max-width:1100px){.hero,.main-grid,.grid-4,.grid-3{grid-template-columns:1fr}.top-actions{width:100%;justify-content:flex-start}}
@media (max-width:900px){.admin-layout{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;height:100vh;width:min(320px,88vw);z-index:200;transform:translateX(-100%);transition:.25s ease}.admin-layout.sidebar-open .sidebar{transform:translateX(0)}.content{padding:16px}.topbar-mobile-actions{display:block}.search-wrap{min-width:100%}.user-box{width:100%;justify-content:flex-start}}
@media (max-width:700px){.form-row,.status-grid{grid-template-columns:1fr}.table,.table thead,.table tbody,.table th,.table td,.table tr{display:block}.table thead{display:none}.table tr{padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06)}.table td{padding:8px 0;border:0}.btn{width:100%}.top-actions{width:100%}.action-links .btn{width:auto}}
