:root{
  --paper:#faf7f0;
  --paper-raised:#ffffff;
  --ink:#1c1b17;
  --ink-dim:#6b6559;
  --forest:#4a6b3a;
  --leaf:#5fa233;
  --leaf-bright:#73bd43;
  --rust:#c1592b;
  --danger:#c0392b;
  --hairline:rgba(28,27,23,0.10);
  --radius:12px;
  --shadow:0 2px 10px rgba(28,27,23,0.06);
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Work Sans',sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;}
a{text-decoration:none; color:inherit;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:500; margin:0 0 8px;}

/* ---------- animated leaf mark ---------- */
.leaf-spin{
  width:22px; height:22px; border-radius:50%;
  border:2px dashed var(--leaf-bright);
  display:inline-block; animation:spin 10s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- icons (simple animated inline svg via JS) ---------- */
i[data-ic]{display:inline-flex; width:18px; height:18px; vertical-align:-4px; transition:transform 0.2s ease;}
a:hover i[data-ic]{transform:translateY(-1px) scale(1.08);}
i[data-ic] svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8;}

/* ---------- layout ---------- */
.admin-shell{display:flex; min-height:100vh;}
.sidebar{
  width:230px; background:var(--paper-raised); border-right:1px solid var(--hairline);
  display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh;
  transition:transform 0.25s ease; z-index:50;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:0 8px 22px; font-size:1.1rem;}
.sidebar-brand em{font-style:italic; color:var(--leaf); font-weight:400;}
.sidebar nav{display:flex; flex-direction:column; gap:2px;}
.sidebar nav a{
  padding:11px 12px; border-radius:9px; font-size:0.92rem; color:var(--ink-dim);
  display:flex; align-items:center; gap:10px; transition:background 0.15s ease, color 0.15s ease;
}
.sidebar nav a:hover{background:rgba(95,162,51,0.08); color:var(--forest);}
.sidebar nav a.active{background:var(--leaf); color:#fff;}
.sidebar nav a.logout-link{margin-top:16px; border-top:1px solid var(--hairline); padding-top:16px; color:var(--rust);}

.main-col{flex:1; min-width:0;}
.topbar{
  display:flex; align-items:center; gap:14px; padding:18px 28px;
  background:var(--paper-raised); border-bottom:1px solid var(--hairline);
  position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:1.15rem; flex:1;}
.topbar-user{display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--ink-dim);}
.user-dot{width:8px; height:8px; border-radius:50%; background:var(--leaf-bright); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.5);}}
.hamburger{display:none; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--ink);}

.content{padding:26px 28px 60px; max-width:1320px;}

/* ---------- cards / tables ---------- */
.card{background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); margin-bottom:22px;}
.grid{display:grid; gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.stat-card{padding:20px; border-radius:var(--radius); background:var(--paper-raised); border:1px solid var(--hairline); box-shadow:var(--shadow);}
.stat-card .num{font-family:'Fraunces',serif; font-size:1.8rem; color:var(--forest);}
.stat-card .label{font-size:0.8rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.05em;}

table{width:100%; border-collapse:collapse; font-size:0.9rem;}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--hairline);}
th{color:var(--ink-dim); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em;}
tr:hover td{background:rgba(95,162,51,0.04);}
.table-wrap{overflow-x:auto; background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow);}

.thumb{width:42px; height:42px; object-fit:cover; border-radius:8px; border:1px solid var(--hairline);}

/* ---------- badges ---------- */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:0.72rem; font-weight:600; letter-spacing:0.02em;}
.badge-green{background:rgba(95,162,51,0.15); color:var(--forest);}
.badge-amber{background:rgba(201,134,15,0.15); color:#8a5f0b;}
.badge-red{background:rgba(192,57,43,0.13); color:var(--danger);}
.badge-gray{background:rgba(107,101,89,0.12); color:var(--ink-dim);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:9px;
  border:1px solid var(--hairline); background:var(--paper-raised); color:var(--ink);
  font-size:0.88rem; font-weight:600; cursor:pointer; transition:all 0.15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow);}
.btn-primary{background:var(--leaf); border-color:var(--leaf); color:#fff;}
.btn-primary:hover{background:var(--forest);}
.btn-danger{background:#fff; border-color:var(--danger); color:var(--danger);}
.btn-sm{padding:6px 12px; font-size:0.8rem;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}

/* ---------- forms ---------- */
label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:16px; color:var(--ink);}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
input[type=tel],input[type=url],input[type=date],select,textarea{
  width:100%; margin-top:6px; padding:11px 13px; border:1px solid var(--hairline); border-radius:9px;
  font-family:inherit; font-size:0.92rem; background:var(--paper); color:var(--ink);
}
textarea{resize:vertical; min-height:100px;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--leaf-bright); outline-offset:1px;}
.form-row{display:flex; gap:16px; flex-wrap:wrap;}
.form-row > *{flex:1; min-width:200px;}
.help{font-size:0.78rem; color:var(--ink-dim); font-weight:400; margin-top:4px;}
.checkbox-label{display:flex; align-items:center; gap:8px; font-weight:500;}
.checkbox-label input{width:auto; margin:0;}

/* ---------- variant cards (with per-variant image) ---------- */
.variant-card{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--hairline); align-items:flex-start;}
.variant-card-img{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; width:84px;}
.variant-img-preview{width:76px; height:76px; object-fit:cover; border-radius:9px; border:1px solid var(--hairline);}
.variant-card-img input[type=file]{width:76px; font-size:0.68rem; padding:0; border:none;}
.variant-card-fields{flex:1; min-width:0;}
.variant-row{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr 1fr auto; gap:10px; align-items:center;}
.variant-row input, .variant-row select{margin:0;}

/* ---------- gallery uploader ---------- */
.gallery-grid{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px;}
.gallery-item{position:relative; width:90px; height:90px; border-radius:9px; overflow:hidden; border:1px solid var(--hairline);}
.gallery-item img{width:100%; height:100%; object-fit:cover;}
.gallery-item .remove{position:absolute; top:2px; right:2px; background:rgba(28,27,23,0.7); color:#fff; border:none; border-radius:50%; width:20px; height:20px; cursor:pointer; font-size:12px; line-height:1;}

/* ---------- alerts ---------- */
.alert{padding:13px 16px; border-radius:9px; margin-bottom:18px; font-size:0.88rem; font-weight:500;}
.alert-success{background:rgba(95,162,51,0.12); color:var(--forest); border:1px solid rgba(95,162,51,0.3);}
.alert-error{background:rgba(192,57,43,0.1); color:var(--danger); border:1px solid rgba(192,57,43,0.28);}

/* ---------- login ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--paper);}
.login-card{background:var(--paper-raised); border:1px solid var(--hairline); border-radius:16px; padding:40px 34px; width:100%; max-width:360px; box-shadow:var(--shadow);}
.login-brand{display:flex; align-items:center; gap:10px;}
.login-brand h1{font-style:italic; font-size:1.6rem;}
.login-sub{color:var(--ink-dim); font-size:0.85rem; margin:0 0 22px;}
.login-card button{width:100%; margin-top:6px; padding:12px; background:var(--leaf); color:#fff; border:none; border-radius:9px; font-weight:600; cursor:pointer; transition:background 0.15s ease;}
.login-card button:hover{background:var(--forest);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); box-shadow:0 0 20px rgba(0,0,0,0.15);}
  .sidebar.open{transform:translateX(0);}
  .hamburger{display:block;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .content{padding:18px 16px 50px;}
  .variant-row{grid-template-columns:1fr 1fr; grid-auto-rows:auto;}
  .variant-card{flex-direction:column;}
}