*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f5f5f5;color:#1a1a1a;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,textarea{font:inherit}
button{cursor:pointer;border:none;background:none}
img{max-width:100%;height:auto;display:block}

:root{
  --gold:#b8974b;
  --gold-light:#d4b06a;
  --gold-dark:#8a6f2e;
  --black:#1a1a1a;
  --anthracite:#2d2d2d;
  --gray-50:#f8f8f8;
  --gray-100:#f0f0f0;
  --gray-200:#e0e0e0;
  --gray-300:#c0c0c0;
  --gray-400:#999;
  --gray-500:#666;
  --gray-600:#444;
  --white:#fff;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 20px rgba(0,0,0,.06);
  --shadow-lg:0 12px 40px rgba(0,0,0,.08);
  --transition:.25s cubic-bezier(.4,0,.2,1)
}

/* LOGIN PAGE */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#f5f5f5 0%,#e8e8e8 100%)}
.login__card{background:var(--white);border-radius:var(--radius-xl);padding:48px 40px;box-shadow:var(--shadow-lg);width:100%;max-width:420px;text-align:center}
.login__logo{margin-bottom:32px}
.login__logo img{height:32px;width:auto;margin:0 auto}
.login__title{font-size:1.4rem;font-weight:700;margin-bottom:4px}
.login__sub{font-size:14px;color:var(--gray-400);margin-bottom:32px}

.form__group{margin-bottom:16px;text-align:left}
.form__group label{display:block;font-size:13px;font-weight:600;color:var(--gray-600);margin-bottom:6px}
.form__group input{width:100%;padding:12px 16px;border:2px solid var(--gray-200);border-radius:var(--radius-md);font-size:15px;transition:var(--transition)}
.form__group input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(184,151,75,.1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--radius-full);font-size:15px;font-weight:600;transition:var(--transition)}
.btn--block{width:100%}
.btn--primary{background:var(--black);color:var(--white)}
.btn--primary:hover{background:var(--anthracite);transform:translateY(-1px)}
.btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--white)}
.btn--gold:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(184,151,75,.4)}
.btn--sm{padding:8px 16px;font-size:13px}
.login__hint{margin-top:16px;font-size:12px;color:var(--gray-400)}

/* HEADER */
.backend-header{background:var(--white);border-bottom:1px solid var(--gray-100);padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.backend-header__left{display:flex;align-items:center;gap:16px}
.backend-header__left .logo img{height:28px;width:auto}
.backend-header__user{display:flex;align-items:center;gap:12px;font-size:14px}
.backend-header__user .avatar{width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.backend-header__user .role{font-size:12px;color:var(--gray-400)}

/* LAYOUT */
.backend-layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 64px)}
@media(max-width:768px){.backend-layout{grid-template-columns:1fr}}

/* SIDEBAR */
.sidebar{background:var(--white);border-right:1px solid var(--gray-100);padding:24px 16px}
@media(max-width:768px){.sidebar{display:none}}
.sidebar__nav{display:flex;flex-direction:column;gap:4px}
.sidebar__link{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--gray-500);transition:var(--transition)}
.sidebar__link:hover{background:var(--gray-50);color:var(--black)}
.sidebar__link.active{background:rgba(184,151,75,.08);color:var(--gold-dark);font-weight:600}
.sidebar__link svg{flex-shrink:0}

/* CONTENT */
.content{padding:32px}
@media(max-width:768px){.content{padding:24px 16px}}
.content__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;flex-wrap:wrap;gap:16px}
.content__header h1{font-size:1.5rem;font-weight:800;letter-spacing:-.5px}
.content__header p{font-size:14px;color:var(--gray-400);margin-top:2px}

/* CARDS */
.card{background:var(--white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-100)}
.card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--gray-100)}
.card__header h2{font-size:1.05rem;font-weight:700}
.card__header h2 span{font-size:13px;font-weight:400;color:var(--gray-400)}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px}
.stat-card{background:var(--white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-100)}
.stat-card__value{font-size:1.8rem;font-weight:800;letter-spacing:-1px}
.stat-card__label{font-size:13px;color:var(--gray-400);margin-top:4px}
.stat-card.gold .stat-card__value{color:var(--gold)}

/* TABLE */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:12px 16px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--gray-400);font-weight:600;border-bottom:2px solid var(--gray-100)}
td{padding:12px 16px;border-bottom:1px solid var(--gray-100);color:var(--gray-600)}
tr:hover td{background:var(--gray-50)}

/* BADGE */
.badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600}
.badge--active{background:#e8f5e9;color:#2e7d32}
.badge--pending{background:#fff3e0;color:#e65100}
.badge--inactive{background:#fbe9e7;color:#c62828}
.badge--gold{background:rgba(184,151,75,.1);color:var(--gold-dark)}

/* GRID */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:768px){.grid-2{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:768px){.grid-3{grid-template-columns:1fr}}

/* PRODUCT LIST */
.product-item{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--gray-100);font-size:14px}
.product-item:last-child{border-bottom:none}
.product-item__info{display:flex;flex-direction:column;gap:2px}
.product-item__title{font-weight:600}
.product-item__cat{font-size:12px;color:var(--gray-400)}
.product-item__price{font-weight:600;color:var(--gold-dark);text-align:right}
.product-item__price small{font-weight:400;color:var(--gray-400);font-size:12px}

/* CONFIG SUMMARY */
.config-summary{background:var(--gray-50);border-radius:var(--radius-md);padding:16px;margin-top:16px}
.config-summary__item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:var(--gray-600)}
.config-summary__item svg{color:var(--gold);flex-shrink:0}

/* EMPTY STATE */
.empty{padding:48px 24px;text-align:center;color:var(--gray-400)}
.empty svg{margin:0 auto 16px;opacity:.4}
.empty p{font-size:14px}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);z-index:9999;background:var(--black);color:var(--white);padding:12px 24px;border-radius:var(--radius-full);font-size:14px;opacity:0;transition:var(--transition);pointer-events:none}
.toast.active{opacity:1;transform:translateX(-50%) translateY(0)}

/* SECTION TOGGLE */
.section{display:none}
.section.active{display:block}

/* LOGOUT */
.logout-btn{color:var(--gray-400);font-size:13px;padding:8px 16px;border-radius:var(--radius-full);transition:var(--transition)}
.logout-btn:hover{color:#c62828;background:#fbe9e7}