:root{
  --red:#B80200; --red-deep:#7A0100; --ink:#141110; --white:#FFFFFF;
  --paper-alt:#F4F1EA; --line:#E4DFD6; --ink-soft:#4A4542;
  --sidebar-w:236px; --green:#2E7D46; --amber:#B8860B;
  --font-display:'Big Shoulders Display', sans-serif;
  --font-body:'Literata', serif;
  --font-mono:'Space Mono', monospace;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper-alt);color:var(--ink);font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
img{display:block;max-width:100%;}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;}

/* Login screen */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink);
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 2px, transparent 2px, transparent 34px);padding:20px;}
.login-card{background:var(--white);width:100%;max-width:380px;padding:40px 34px;position:relative;}
.login-card::before{content:"";position:absolute;left:0;top:0;right:0;height:6px;background:var(--red);}
.login-card img{height:44px;margin:0 auto 22px;}
.login-card h1{font-family:var(--font-display);font-weight:800;font-size:22px;text-transform:uppercase;text-align:center;margin:0 0 4px;}
.login-card p.sub{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);text-align:center;margin:0 0 26px;}
.login-card label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 6px;}
.login-card .field{margin-bottom:16px;}
.login-card input{width:100%;border:2px solid var(--ink);padding:11px 12px;font-family:var(--font-body);font-size:15px;}
.login-card input:focus{outline:none;border-color:var(--red);}
.login-card button.submit{width:100%;background:var(--red);color:var(--white);border:2px solid var(--red);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:15px;padding:13px;cursor:pointer;margin-top:6px;}
.login-card button.submit:hover{background:var(--red-deep);border-color:var(--red-deep);}
.login-error{background:#FBEAEA;border:1px solid var(--red);color:var(--red-deep);font-family:var(--font-mono);font-size:12.5px;padding:10px 14px;margin-bottom:16px;}
.login-note{font-family:var(--font-mono);font-size:10.5px;color:#9C968C;text-align:center;margin-top:16px;line-height:1.6;}

/* Shell */
#app{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar-w);flex:0 0 auto;background:var(--ink);color:#D8D2C8;min-height:100vh;position:sticky;top:0;align-self:flex-start;display:flex;flex-direction:column;}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:22px 20px;border-bottom:1px solid #322D29;}
.sidebar-brand img{height:30px;}
.sidebar-brand .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);}
.sidebar-nav{flex:1;padding:14px 0;overflow-y:auto;}
.sidebar-nav .group-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#726C64;padding:14px 20px 6px;}
.sidebar-nav a.nav-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;color:#D8D2C8;font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.01em;padding:11px 20px;cursor:pointer;border-left:3px solid transparent;}
.sidebar-nav a.nav-item:hover{background:#221E1B;color:var(--white);}
.sidebar-nav a.nav-item.active{background:#221E1B;color:var(--white);border-left-color:var(--red);}
.sidebar-nav a.nav-item .ic{width:18px;flex:0 0 auto;text-align:center;font-family:var(--font-mono);font-size:13px;}
.sidebar-foot{padding:16px 20px;border-top:1px solid #322D29;display:flex;flex-direction:column;gap:8px;}
.sidebar-foot a{font-family:var(--font-mono);font-size:12px;color:#B8B2A8;background:none;border:none;text-align:left;padding:6px 0;}
.sidebar-foot a:hover{color:var(--white);}

.main-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{background:var(--white);border-bottom:1px solid var(--line);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;z-index:20;}
.topbar h1{font-family:var(--font-display);font-weight:800;font-size:24px;text-transform:uppercase;margin:0;}
.topbar .user-chip{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;}
.topbar .avatar{width:32px;height:32px;background:var(--red);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13px;}
.topbar .role-tag{background:var(--paper-alt);padding:2px 7px;font-size:10px;text-transform:uppercase;color:var(--ink-soft);}
.content{padding:28px;flex:1;}

/* Flash messages */
.flash{font-family:var(--font-mono);font-size:13px;padding:12px 16px;margin-bottom:18px;border-left:4px solid;}
.flash.success{background:#EAF6EC;border-color:var(--green);color:#1E5A30;}
.flash.error{background:#FBEAEA;border-color:var(--red);color:var(--red-deep);}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px;}
.kpi-card{background:var(--white);border:1px solid var(--line);padding:18px;position:relative;overflow:hidden;}
.kpi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);}
.kpi-card .label{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:0 0 6px;}
.kpi-card .value{font-family:var(--font-display);font-weight:800;font-size:32px;line-height:1;margin:0;}
.kpi-card .delta{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin-top:6px;display:block;}

.card{background:var(--white);border:1px solid var(--line);padding:20px;margin-bottom:20px;}
.card h2{font-family:var(--font-display);font-weight:800;font-size:17px;text-transform:uppercase;margin:0 0 16px;}
.activity-list{list-style:none;margin:0;padding:0;}
.activity-list li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;}
.activity-list li:last-child{border-bottom:none;}
.activity-list .dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto;margin-top:5px;}
.activity-list .t{font-family:var(--font-mono);font-size:10.5px;color:#8B857C;display:block;margin-top:2px;}

.section-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.section-toolbar h1{font-family:var(--font-display);font-weight:800;font-size:26px;text-transform:uppercase;margin:0;}
.toolbar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.btn{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:10px 16px;border:2px solid var(--ink);background:var(--white);color:var(--ink);cursor:pointer;white-space:nowrap;display:inline-block;}
.btn:hover{background:var(--ink);color:var(--white);}
.btn.primary{background:var(--red);border-color:var(--red);color:var(--white);}
.btn.primary:hover{background:var(--red-deep);border-color:var(--red-deep);}
.btn.danger{border-color:var(--red);color:var(--red);}
.btn.danger:hover{background:var(--red);color:var(--white);}
.btn.small{padding:6px 10px;font-size:10.5px;}

input.search-box, select.filter-select{border:2px solid var(--ink);padding:9px 12px;font-family:var(--font-mono);font-size:12.5px;background:var(--white);color:var(--ink);}

table.data-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);}
table.data-table th{text-align:left;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:12px 14px;border-bottom:2px solid var(--ink);background:var(--paper-alt);white-space:nowrap;}
table.data-table td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;}
table.data-table tr:last-child td{border-bottom:none;}
table.data-table tr:hover td{background:#FBF9F5;}
.cell-title{font-family:var(--font-display);font-weight:700;font-size:15px;}
.cell-meta{font-family:var(--font-mono);font-size:11px;color:#8B857C;}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.row-actions button, .row-actions a{background:none;border:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;padding:5px 8px;cursor:pointer;color:var(--ink-soft);}
.row-actions button:hover, .row-actions a:hover{border-color:var(--ink);color:var(--ink);}
.row-actions .del:hover{border-color:var(--red);color:var(--red);}

.badge{display:inline-block;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border:1px solid currentColor;}
.badge.online{color:var(--green);}
.badge.offline{color:#9C968C;}
.badge.admin{color:var(--red);}
.badge.editeur{color:var(--amber);}
.badge.confirmed{color:var(--green);}
.badge.pending{color:var(--amber);}

.cat-manage-list{list-style:none;margin:0;padding:0;background:var(--white);border:1px solid var(--line);}
.cat-manage-item{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);}
.cat-manage-item:last-child{border-bottom:none;}
.cat-manage-item .order-btns{display:flex;flex-direction:column;gap:2px;}
.cat-manage-item .order-btns button{background:var(--paper-alt);border:1px solid var(--line);font-size:10px;width:22px;height:18px;cursor:pointer;line-height:1;}
.cat-manage-item .order-btns button:hover{background:var(--ink);color:var(--white);}
.cat-manage-item .cname{font-family:var(--font-display);font-weight:700;font-size:16px;flex:1;}
.cat-manage-item .ccount{font-family:var(--font-mono);font-size:11px;color:#8B857C;}
.cat-manage-item .rank{font-family:var(--font-mono);font-size:11px;color:var(--red);width:22px;}

/* Forms */
.form-card{background:var(--white);border:1px solid var(--line);padding:26px;max-width:640px;}
.form-card label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 6px;}
.form-card .field{margin-bottom:18px;}
.form-card input, .form-card select, .form-card textarea{width:100%;border:2px solid var(--ink);padding:10px 12px;font-family:var(--font-body);font-size:14.5px;background:var(--white);color:var(--ink);}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{outline:none;border-color:var(--red);}
.form-card textarea{min-height:220px;resize:vertical;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.switch-row{display:flex;align-items:center;gap:10px;}
.switch{position:relative;display:inline-block;width:38px;height:21px;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:#CFC9BE;transition:.15s;}
.switch .slider:before{position:absolute;content:"";height:15px;width:15px;left:3px;top:3px;background:var(--white);transition:.15s;}
.switch input:checked + .slider{background:var(--green);}
.switch input:checked + .slider:before{transform:translateX(17px);}

.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.mobile-toggle{display:none;}

@media (max-width:1100px){ .kpi-grid{grid-template-columns:repeat(3,1fr);} .settings-grid{grid-template-columns:1fr;} }
@media (max-width:820px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:80;transform:translateX(-100%);transition:transform .2s ease;}
  .sidebar.open{transform:translateX(0);}
  .mobile-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:2px solid var(--ink);background:var(--white);cursor:pointer;flex-direction:column;gap:4px;}
  .mobile-toggle span{display:block;width:18px;height:2px;background:var(--ink);}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .content{padding:18px;}
  .topbar{padding:14px 16px;}
  table.data-table{display:block;overflow-x:auto;}
  .field-row{grid-template-columns:1fr;}
}