:root{
  --green:#2E8B57; --green-dark:#1F6B41; --green-pale:#DCEFE2;
  --amber:#F0A93A; --amber-dark:#CE8419;
  --ink:#1E2A23; --muted:#647169; --border:#E4DFD1; --surface:#F8F6EF; --bg:#F3F6F2;
  --red:#D6431E; --red-pale:#FDE2D6;
}
*{box-sizing:border-box;}
body{margin:0; font-family:-apple-system,'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--ink);}
a{color:inherit; text-decoration:none;}
input,select,textarea,button{font-family:inherit;}

/* LOGIN */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}
.login-card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:32px; width:100%; max-width:360px;}
.login-logo{display:flex; align-items:center; gap:9px; font-size:20px; font-weight:700; margin-bottom:2px;}
.login-logo .mark{width:32px;height:32px;border-radius:9px; background:var(--green); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700;}
.login-sub{color:var(--muted); font-size:13px; margin:0 0 22px;}
.login-card label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px;}
.login-card input{width:100%; padding:11px 12px; border:1.5px solid var(--border); border-radius:9px; margin-bottom:16px; font-size:14px;}
.login-card button{width:100%; padding:12px; background:var(--green); color:#fff; border:none; border-radius:9px; font-weight:700; font-size:14.5px; cursor:pointer;}
.login-card button:hover{background:var(--green-dark);}

/* LAYOUT */
.admin-wrap{display:flex; min-height:100vh;}
.sidebar{width:230px; flex-shrink:0; background:#fff; border-right:1px solid var(--border); padding:20px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.sidebar .logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; padding:0 8px 18px; border-bottom:1px solid var(--border); margin-bottom:14px;}
.sidebar .logo .mark{width:30px;height:30px;border-radius:8px; background:var(--green); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:13px;}
.sidebar nav a{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:9px; font-size:13.8px; font-weight:600; color:var(--muted); margin-bottom:2px;}
.sidebar nav a:hover{background:var(--surface); color:var(--ink);}
.sidebar nav a.active{background:var(--green-pale); color:var(--green-dark);}
.sidebar .group-label{font-size:11px; text-transform:uppercase; color:#9AA79E; font-weight:700; letter-spacing:.04em; margin:16px 8px 6px;}
.sidebar .view-site{display:block; margin-top:18px; padding:10px; text-align:center; background:var(--surface); border-radius:9px; font-size:13px; font-weight:700;}
.sidebar .logout-link{display:block; margin-top:8px; padding:10px; text-align:center; color:var(--red); font-size:13px; font-weight:700;}

.main{flex:1; min-width:0;}
.topbar{background:#fff; border-bottom:1px solid var(--border); padding:16px 28px; display:flex; justify-content:space-between; align-items:center;}
.topbar h1{font-size:19px; margin:0;}
.topbar .who{font-size:13px; color:var(--muted);}
.content{padding:26px 28px 60px;}

/* COMPONENTS */
.card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; margin-bottom:20px;}
.card h2{font-size:16px; margin:0 0 16px;}
.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:1fr 1fr 1fr;}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px;}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field input[type=password],.field select,.field textarea{
  width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:9px; font-size:14px; background:#fff;
}
.field textarea{resize:vertical; min-height:90px; font-family:monospace; font-size:13px;}
.field .hint{font-size:11.5px; color:var(--muted); margin-top:5px;}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-bottom:14px;}

.btn{display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:9px; font-weight:700; font-size:13.5px; border:1.5px solid transparent; cursor:pointer;}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{background:var(--green-dark);}
.btn-outline{background:#fff; border-color:var(--border); color:var(--ink);}
.btn-outline:hover{border-color:var(--green); color:var(--green-dark);}
.btn-danger{background:var(--red-pale); color:var(--red);}
.btn-danger:hover{background:#f9c6b0;}
.btn-sm{padding:6px 12px; font-size:12.5px;}

table{width:100%; border-collapse:collapse;}
table th, table td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--border); font-size:13.5px;}
table th{color:var(--muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
table tr:hover td{background:var(--surface);}
.table-actions{display:flex; gap:6px;}

.alert{padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px;}
.alert-ok{background:var(--green-pale); color:var(--green-dark);}
.alert-err{background:var(--red-pale); color:var(--red);}

.badge{display:inline-block; padding:3px 9px; border-radius:100px; font-size:11px; font-weight:700;}
.badge-green{background:var(--green-pale); color:var(--green-dark);}
.badge-amber{background:#FCE9C9; color:var(--amber-dark);}
.badge-muted{background:var(--surface); color:var(--muted);}

.page-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.page-head h2{margin:0; font-size:18px;}
.empty-hint{color:var(--muted); font-size:13.5px; padding:30px; text-align:center;}
.dash-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
@media(max-width:900px){.dash-stats{grid-template-columns:repeat(2,1fr);}}
.dash-stat{background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px;}
.dash-stat .num{font-size:26px; font-weight:800;}
.dash-stat .lbl{font-size:12.5px; color:var(--muted); margin-top:4px;}