@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --black:#0b0b0a; --white:#fff; --beige:#f3eee5; --beige-dark:#e6ddcc;
  --gray:#7c766b; --gray-light:#f6f4f0; --accent:#ff4d1c; --accent-dark:#d63c11;
  --serif:'Playfair Display', serif; --sans:'Inter', sans-serif;
  --border:#e5e1d8; --radius:6px;
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--sans); color:var(--black); background:var(--gray-light); font-size:14px;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--serif); margin:0 0 8px; font-weight:600;}
.btn{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius); font-weight:600; font-size:13px; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-dark{background:var(--black); color:#fff;}
.btn-outline{background:#fff; border-color:var(--border); color:var(--black);}
.btn-outline:hover{border-color:var(--black);}
.btn-danger{background:#fdeae6; color:#b8341a;}
.btn-sm{padding:6px 11px; font-size:12px;}

/* Login admin */
.admin-login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--black); background-image:radial-gradient(circle at 30% 20%, #1c1a18, #0b0b0a);}
.admin-login-card{background:#fff; width:100%; max-width:400px; padding:44px 38px; border-radius:10px;}
.admin-login-card .logo{font-family:var(--serif); font-size:24px; font-weight:800; margin-bottom:6px;}
.admin-login-card .logo span{color:var(--accent);}
.admin-login-card .tag{color:var(--gray); font-size:13px; margin-bottom:30px; display:block; text-transform:uppercase; letter-spacing:.08em;}

/* Shell */
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{width:236px; background:var(--black); color:#fff; padding:24px 18px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;}
.admin-sidebar .logo{font-family:var(--serif); font-size:19px; font-weight:800; color:#fff; margin-bottom:6px; display:block;}
.admin-sidebar .logo span{color:var(--accent);}
.admin-sidebar .role-tag{font-size:11px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.08em; margin-bottom:30px; display:block;}
.admin-nav-group{margin-bottom:22px;}
.admin-nav-group .grp-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35); padding:0 10px; margin-bottom:8px; display:block;}
.admin-nav a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; color:rgba(255,255,255,.68); font-size:13.5px; font-weight:500; margin-bottom:2px;}
.admin-nav a:hover, .admin-nav a.active{background:rgba(255,255,255,.09); color:#fff;}
.admin-sidebar .admin-user{margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:rgba(255,255,255,.6);}
.admin-sidebar .admin-user strong{display:block; color:#fff; font-size:13.5px;}
.admin-sidebar .admin-user a{color:var(--accent); font-size:12px; font-weight:600;}

.admin-main{flex:1; padding:32px 38px; max-width:1400px;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;}
.admin-topbar .sub{color:var(--gray); font-size:13px; margin:0;}
.breadcrumb{font-size:12px; color:var(--gray); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em;}

.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
.kpi-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px;}
.kpi-card .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray); margin-bottom:10px;}
.kpi-card .value{font-family:var(--serif); font-size:28px;}
.kpi-card .trend{font-size:12px; margin-top:6px;}
.trend.up{color:#1e7d3c;} .trend.down{color:#b8341a;}

.panel{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:24px;}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.panel-head h2{font-size:16px;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray); padding:9px 10px; border-bottom:1px solid var(--border); background:var(--gray-light);}
table td{padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
table tr:hover td{background:#fbfaf8;}

.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600;}
.badge-blue{background:#e5edfb; color:#2251c4;}
.badge-amber{background:#fdf1da; color:#a9690a;}
.badge-green{background:#e6f4ea; color:#1e7d3c;}
.badge-gray{background:#eee; color:#666;}
.badge-red{background:#fdeae6; color:#b8341a;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-family:var(--sans); font-size:13.5px; background:#fff;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--black);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-alert{padding:11px 15px; border-radius:6px; font-size:13.5px; margin-bottom:18px;}
.form-alert.error{background:#fdeae6; color:#b8341a; border:1px solid #f6c3b6;}
.form-alert.success{background:#e6f4ea; color:#1e7d3c; border:1px solid #b9e3c6;}

/* Tabs CMS */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:22px; flex-wrap:wrap;}
.tabs a{padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--gray); border-bottom:2px solid transparent;}
.tabs a.active{color:var(--black); border-color:var(--accent);}

/* Kanban */
.kanban{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:start;}
.kanban-col{background:var(--gray-light); border-radius:var(--radius); padding:14px;}
.kanban-col h3{font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center;}
.kanban-col h3 .count{background:var(--border); border-radius:20px; padding:1px 8px; font-size:11px; font-family:var(--sans);}
.kanban-card{background:#fff; border:1px solid var(--border); border-radius:6px; padding:13px; margin-bottom:10px; font-size:13px;}
.kanban-card .brand{font-weight:700; margin-bottom:3px;}
.kanban-card .track{color:var(--gray); font-size:11.5px; margin-bottom:8px;}
.kanban-card .kb-actions{display:flex; justify-content:space-between; gap:6px; margin-top:10px;}
.kanban-card form{display:inline;}

.avatar-sm{width:30px; height:30px; border-radius:50%; background:var(--black); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:var(--serif);}

.stat-mini{display:flex; gap:8px; align-items:center;}
.empty-state{padding:40px 20px; text-align:center; color:var(--gray);}

@media (max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .kanban{grid-template-columns:1fr 1fr;}
}