:root{
    --brand:#f2801b;
    --brand-dark:#d76c0f;
    --ink:#1f2430;
    --muted:#6b7280;
    --line:#e6e8ec;
    --bg:#f6f7fb;
    --card:#ffffff;
    --danger:#e5484d;
    --success:#1fa571;
}
*{box-sizing:border-box;}
body{
    margin:0;
    font-family:'Segoe UI',Arial,sans-serif;
    background:var(--bg);
    color:var(--ink);
    font-size:14px;
}
a{color:var(--brand);text-decoration:none;}
a:hover{color:var(--brand-dark);}

.admin-shell{display:flex;min-height:100vh;}

.admin-sidebar{
    width:230px;
    background:#161a23;
    color:#fff;
    flex-shrink:0;
    padding:22px 0;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
}
.admin-sidebar .brand{
    padding:0 20px 20px;
    font-size:18px;
    font-weight:700;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:10px;
}
.admin-sidebar .brand span{color:var(--brand);}
.admin-sidebar nav a{
    display:block;
    padding:11px 20px;
    color:#c7cad1;
    font-size:13.5px;
}
.admin-sidebar nav a.active,
.admin-sidebar nav a:hover{
    background:rgba(242,128,27,.12);
    color:#fff;
    border-left:3px solid var(--brand);
    padding-left:17px;
}
.admin-sidebar .cat-group-title{
    padding:16px 20px 6px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#7c8291;
}

.admin-main{flex:1;min-width:0;}
.admin-topbar{
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:14px 26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.admin-topbar h1{font-size:18px;margin:0;font-weight:600;}
.admin-content{padding:26px;}

.btn{
    display:inline-block;
    padding:9px 16px;
    border-radius:6px;
    border:1px solid transparent;
    background:var(--brand);
    color:#fff;
    cursor:pointer;
    font-size:13.5px;
    font-weight:500;
}
.btn:hover{background:var(--brand-dark);color:#fff;}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink);}
.btn-outline:hover{background:#f2f3f5;color:var(--ink);}
.btn-danger{background:var(--danger);}
.btn-danger:hover{background:#c8383c;}
.btn-sm{padding:6px 11px;font-size:12.5px;}

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:22px;
    margin-bottom:20px;
}

.grid-cats{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:16px;
}
.cat-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:18px;
    transition:box-shadow .15s, transform .15s;
}
.cat-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.06);transform:translateY(-1px);}
.cat-card h3{margin:0 0 4px;font-size:15px;}
.cat-card .count{color:var(--muted);font-size:13px;margin-bottom:12px;}

table.data-table{width:100%;border-collapse:collapse;}
table.data-table th, table.data-table td{
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:middle;
    font-size:13.5px;
}
table.data-table th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;}
table.data-table tr:hover{background:#fafbfc;}
.thumb{
    width:52px;height:52px;object-fit:cover;border-radius:6px;border:1px solid var(--line);
}
.badge{
    display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;
}
.badge-active{background:#e6f7ef;color:var(--success);}
.badge-inactive{background:#fdeaea;color:var(--danger);}

.form-group{margin-bottom:16px;}
.form-group label{display:block;font-weight:600;margin-bottom:6px;font-size:13.5px;}
.form-group .hint{color:var(--muted);font-size:12px;margin-top:4px;}
.form-control{
    width:100%;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:6px;
    font-size:13.5px;
    font-family:inherit;
}
textarea.form-control{resize:vertical;min-height:90px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:700px){.form-row{grid-template-columns:1fr;}}

.existing-images{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.existing-images .img-item{position:relative;width:100px;}
.existing-images img{width:100px;height:100px;object-fit:cover;border-radius:6px;border:1px solid var(--line);}
.existing-images label{
    display:flex;align-items:center;gap:5px;font-weight:400;font-size:11.5px;margin-top:5px;color:var(--danger);
}

.alert{padding:12px 16px;border-radius:6px;margin-bottom:18px;font-size:13.5px;}
.alert-success{background:#e6f7ef;color:#0d7a4d;border:1px solid #bfe9d3;}
.alert-error{background:#fdeaea;color:#b3282d;border:1px solid #f6c6c8;}

.login-wrap{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#161a23,#2b2f3a);
}
.login-card{
    background:#fff;
    width:360px;
    padding:34px 30px;
    border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.login-card h2{margin:0 0 4px;font-size:20px;}
.login-card p.sub{color:var(--muted);margin:0 0 22px;font-size:13px;}
.login-card .btn{width:100%;padding:11px;font-size:14px;}

.empty-state{
    text-align:center;
    padding:50px 20px;
    color:var(--muted);
}
.actions-row{display:flex;gap:8px;flex-wrap:wrap;}
.top-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
