@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root{
  /* Fonds - légèrement plus clairs pour plus de contraste */
  --d1:#32353a; --d2:#26292e; --d3:#1f2227; --d4:#17191e; --d5:#111318;
  /* Purple - plus saturé et présent */
  --p:#9a5bff; --p2:#7c3aed; --p3:#c4a0ff; --p4:#6d28d9;
  --pg:rgba(154,91,255,.18); --pg2:rgba(154,91,255,.09); --pg3:rgba(154,91,255,.3);
  /* Textes - plus contrastés */
  --text:#f4f4f5; --t2:#c4c8d0; --t3:#7c8491;
  /* Bordures avec plus de violet */
  --border:rgba(154,91,255,.12); --bp:rgba(154,91,255,.4); --bp2:rgba(154,91,255,.22);
  --ok:#22d3a0; --warn:#f59e0b; --bad:#f43f5e; --info:#38bdf8;
  --r:14px; --r2:10px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--d4);color:var(--text);min-height:100vh;overflow-x:hidden;font-size:14px;line-height:1.5;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,.syne{font-family:'Syne',sans-serif;}

/* ── SIDEBAR ─────────────────────────────── */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:256px;
  background:var(--d3);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:100;
  transition:transform .3s ease;
}
.main{margin-left:256px;flex:1;display:flex;flex-direction:column;min-height:100vh;}

.s-logo{padding:22px 20px 16px;border-bottom:1px solid var(--border);}
.brand{display:flex;align-items:center;gap:10px;}
.brand-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--p2),var(--p));
  display:flex;align-items:center;justify-content:center;font-size:17px;
  box-shadow:0 0 22px rgba(154,91,255,.45);
}
.brand-name{font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--text);}
.brand-name span{color:var(--p);}

.s-user{
  margin:12px;padding:12px 13px;
  background:rgba(154,91,255,.08);
  border:1px solid var(--bp2);
  border-radius:var(--r2);
  display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s;
}
.s-user:hover{background:var(--pg);border-color:var(--bp);}
.u-av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--p2),var(--p));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#fff;
  box-shadow:0 0 12px rgba(154,91,255,.35);
}
.u-name{font-weight:700;font-size:13px;color:var(--text);}
.u-email{color:var(--t2);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.u-status{background:rgba(34,211,160,.15);color:var(--ok);font-size:10px;padding:2px 8px;border-radius:20px;font-weight:700;flex-shrink:0;}

.s-nav{flex:1;padding:6px 9px;overflow-y:auto;}
.nav-section{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--p);opacity:.7;padding:14px 11px 5px;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:var(--r2);cursor:pointer;margin-bottom:2px;
  color:var(--t2);font-size:13px;font-weight:500;
  border:1px solid transparent;transition:all .15s;
}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--text);}
.nav-item.active{background:var(--pg);color:var(--p3);border-color:var(--bp2);font-weight:600;}
.nav-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:14px;flex-shrink:0;}
.nav-item.active .nav-icon{background:rgba(154,91,255,.22);}
.nav-badge{margin-left:auto;background:var(--p);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;min-width:20px;text-align:center;}
.nav-badge.w{background:var(--warn);color:#000;}

.s-footer{padding:12px;border-top:1px solid var(--border);}
.credit-box{
  background:linear-gradient(135deg,rgba(154,91,255,.14),rgba(124,58,237,.07));
  border:1px solid var(--bp2);border-radius:var(--r2);padding:12px 14px;margin-bottom:10px;
}
.credit-lbl{font-size:11px;color:var(--t2);margin-bottom:3px;}
.credit-val{font-size:22px;font-weight:800;color:var(--p3);}
.btn-logout{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 13px;background:transparent;border:1px solid var(--border);
  border-radius:var(--r2);color:var(--t2);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;
}
.btn-logout:hover{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.4);color:var(--bad);}

/* ── TOPBAR ─────────────────────────────── */
.topbar{
  position:sticky;top:0;height:62px;
  background:rgba(23,25,30,.95);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 28px;display:flex;align-items:center;justify-content:space-between;z-index:50;
}
.topbar-l{display:flex;align-items:center;gap:12px;}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:4px;}
.page-ttl{font-size:15px;font-weight:800;color:var(--text);}
.breadcrumb{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:5px;}
.breadcrumb span{color:var(--t2);}
.topbar-r{display:flex;align-items:center;gap:9px;}

.search-box{
  display:flex;align-items:center;gap:8px;height:35px;
  background:var(--d2);border:1px solid var(--border);border-radius:9px;
  padding:0 13px;transition:all .2s;
}
.search-box:focus-within{border-color:var(--bp);box-shadow:0 0 0 3px rgba(154,91,255,.1);}
.search-box input{background:none;border:none;outline:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;width:150px;}
.search-box input::placeholder{color:var(--t3);}

.icon-btn{
  width:35px;height:35px;background:var(--d2);border:1px solid var(--border);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--t2);font-size:15px;transition:all .2s;position:relative;
}
.icon-btn:hover{border-color:var(--bp);color:var(--text);}
.icon-btn .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--p);border-radius:50%;border:2px solid var(--d4);}

/* Notif dropdown */
.notif-wrap{position:relative;}
.notif-drop{
  position:absolute;top:44px;right:0;width:320px;
  background:var(--d2);border:1px solid var(--bp2);border-radius:var(--r);
  box-shadow:0 20px 60px rgba(0,0,0,.6);display:none;z-index:200;overflow:hidden;
}
.notif-drop.open{display:block;animation:fadeUp .2s ease;}
.notif-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.notif-head h4{font-size:13px;font-weight:700;color:var(--text);}
.notif-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.notif-item:hover{background:rgba(255,255,255,.03);}
.notif-item.unread{background:var(--pg2);}
.notif-item:last-child{border-bottom:none;}
.ni-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.ni-text{font-size:12.5px;line-height:1.45;margin-bottom:3px;color:var(--text);}
.ni-time{font-size:10.5px;color:var(--t3);}

/* ── CONTENT ────────────────────────────── */
.content{padding:28px;flex:1;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── CARDS ──────────────────────────────── */
.card{
  background:var(--d2);
  border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
}
.card.accent{border-color:var(--bp2);}
.card-accent-left{border-left:3px solid var(--p);}
.card-header{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.card-title{font-size:13.5px;font-weight:700;color:var(--text);}
.card-body{padding:20px;}
.card-link{font-size:12px;color:var(--p3);font-weight:600;}
.card-link:hover{color:var(--p);}

/* ── BUTTONS ────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;
  border-radius:9px;font-family:'DM Sans',sans-serif;font-size:13px;
  font-weight:600;cursor:pointer;transition:all .2s;border:none;
  text-decoration:none;white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--p2),var(--p));color:#fff;
  box-shadow:0 3px 16px rgba(154,91,255,.35);
}
.btn-primary:hover{box-shadow:0 5px 24px rgba(154,91,255,.5);transform:translateY(-1px);}
.btn-secondary{background:var(--d3);color:var(--t2);border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--bp);color:var(--text);}
.btn-ghost{background:transparent;color:var(--p3);border:1px solid var(--bp2);}
.btn-ghost:hover{background:var(--pg);color:var(--p3);}
.btn-danger{background:rgba(244,63,94,.1);color:var(--bad);border:1px solid rgba(244,63,94,.25);}
.btn-danger:hover{background:rgba(244,63,94,.2);}
.btn-sm{padding:6px 13px;font-size:12px;border-radius:7px;}
.btn-xs{padding:3px 10px;font-size:11px;border-radius:6px;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;}

/* ── BADGES ─────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.badge-g{background:rgba(34,211,160,.14);color:#4ade80;}
.badge-g::before{background:#4ade80;}
.badge-r{background:rgba(244,63,94,.14);color:#fb7185;}
.badge-r::before{background:#fb7185;}
.badge-o{background:rgba(245,158,11,.14);color:#fbbf24;}
.badge-o::before{background:#fbbf24;}
.badge-b{background:rgba(56,189,248,.14);color:#7dd3fc;}
.badge-b::before{background:#7dd3fc;}
.badge-x{background:rgba(148,163,184,.1);color:#94a3b8;}
.badge-x::before{background:#94a3b8;}
.badge-p{background:var(--pg);color:var(--p3);}
.badge-p::before{background:var(--p);}

/* ── TABLES ─────────────────────────────── */
.tbl-wrap{overflow-x:auto;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th{
  padding:10px 16px;text-align:left;
  font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--p3);opacity:.8;
  border-bottom:1px solid var(--border);white-space:nowrap;
  background:rgba(154,91,255,.04);
}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;color:var(--text);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover td{background:rgba(154,91,255,.04);}
.tbl-clickable tbody tr{cursor:pointer;}

/* ── FORMS ──────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:15px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.form-grid .full{grid-column:1/-1;}
.form-label{font-size:12px;font-weight:700;color:var(--t2);letter-spacing:.3px;}
.form-input,.form-select,.form-textarea{
  background:var(--d3);border:1px solid var(--border);border-radius:var(--r2);
  color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;
  padding:10px 13px;outline:none;transition:all .2s;width:100%;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--bp);background:var(--d2);
  box-shadow:0 0 0 3px rgba(154,91,255,.1);
}
.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237c8491' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
.form-textarea{resize:vertical;min-height:110px;line-height:1.6;}
.form-input::placeholder,.form-textarea::placeholder{color:var(--t3);}
.form-error{font-size:11px;color:var(--bad);}
.form-hint{font-size:11px;color:var(--t3);}

/* ── STATS GRID ─────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.stat-card{
  background:var(--d2);border:1px solid var(--border);border-radius:var(--r);
  padding:18px;transition:all .2s;cursor:pointer;position:relative;overflow:hidden;
}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--p2),var(--p));opacity:0;transition:opacity .2s;}
.stat-card:hover{border-color:var(--bp2);transform:translateY(-2px);}
.stat-card:hover::after{opacity:1;}
.stat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.si-p{background:rgba(154,91,255,.18);}
.si-g{background:rgba(34,211,160,.14);}
.si-o{background:rgba(245,158,11,.14);}
.si-b{background:rgba(56,189,248,.14);}
.si-r{background:rgba(244,63,94,.14);}
.stat-trend{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;}
.st-g{background:rgba(34,211,160,.12);color:#4ade80;}
.st-o{background:rgba(245,158,11,.12);color:#fbbf24;}
.st-r{background:rgba(244,63,94,.12);color:#fb7185;}
.stat-value{font-size:26px;font-weight:800;margin-bottom:3px;color:var(--text);}
.stat-label{font-size:12px;color:var(--t2);font-weight:500;}

/* ── WELCOME BANNER ─────────────────────── */
.welcome{
  background:linear-gradient(135deg,#130a22 0%,#1a0d35 50%,#0d1628 100%);
  border:1px solid var(--bp2);border-radius:var(--r);
  padding:26px 30px;margin-bottom:24px;position:relative;overflow:hidden;
}
.welcome::before{content:'';position:absolute;top:-60px;right:-60px;width:260px;height:260px;background:radial-gradient(circle,rgba(154,91,255,.22) 0%,transparent 70%);pointer-events:none;}
.welcome::after{content:'';position:absolute;bottom:-40px;left:25%;width:180px;height:180px;background:radial-gradient(circle,rgba(56,189,248,.07) 0%,transparent 70%);pointer-events:none;}
.welcome-title{font-size:23px;font-weight:800;margin-bottom:6px;position:relative;color:var(--text);}
.welcome-title em{color:var(--p3);font-style:normal;}
.welcome-sub{color:var(--t2);font-size:13.5px;position:relative;}
.welcome-actions{display:flex;gap:9px;margin-top:18px;position:relative;}

/* ── SECTION HEADER ─────────────────────── */
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.sec-title{font-size:21px;font-weight:800;color:var(--text);}
.filter-bar{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap;}
.filter-btn{
  padding:5px 14px;background:var(--d2);border:1px solid var(--border);
  border-radius:20px;color:var(--t2);font-size:12px;font-weight:500;
  cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif;
}
.filter-btn:hover,.filter-btn.active{background:var(--pg);border-color:var(--bp2);color:var(--p3);font-weight:600;}

/* ── ACTIVITY FEED ──────────────────────── */
.a-item{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);align-items:flex-start;}
.a-item:last-child{border-bottom:none;}
.a-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.a-text{font-size:12.5px;margin-bottom:2px;color:var(--text);}
.a-time{font-size:11px;color:var(--t3);}

/* ── TICKET THREAD ──────────────────────── */
.t-msg{display:flex;gap:11px;align-items:flex-start;margin-bottom:16px;}
.t-msg.staff{flex-direction:row-reverse;}
.msg-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.msg-av.client{background:linear-gradient(135deg,var(--p2),var(--p));}
.msg-av.staff-a{background:linear-gradient(135deg,#0369a1,#38bdf8);}
.msg-bubble{flex:1;max-width:76%;background:var(--d3);border:1px solid var(--border);border-radius:13px;padding:13px 16px;}
.t-msg.staff .msg-bubble{background:rgba(154,91,255,.08);border-color:var(--bp2);}
.msg-meta{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.msg-name{font-size:12.5px;font-weight:700;color:var(--text);}
.msg-time{font-size:11px;color:var(--t3);}
.msg-text{font-size:13px;line-height:1.65;color:var(--t2);}

/* ── SERVICE CARDS ──────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.svc-card{
  background:var(--d2);border:1px solid var(--border);border-radius:var(--r);
  padding:20px;transition:all .2s;position:relative;overflow:hidden;
}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--p2),var(--p));opacity:0;transition:opacity .2s;}
.svc-card:hover{border-color:var(--bp2);transform:translateY(-2px);}
.svc-card:hover::before{opacity:1;}
.svc-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.svc-name{font-size:14px;font-weight:700;margin-bottom:3px;color:var(--text);}
.svc-sub{font-size:11.5px;color:var(--t3);}
.svc-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.svc-lbl{font-size:10.5px;color:var(--p3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:2px;opacity:.8;}
.svc-val{font-size:12.5px;font-weight:600;color:var(--text);}
.progress-bar{height:3px;background:var(--d3);border-radius:2px;overflow:hidden;margin-top:14px;}
.progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--p2),var(--p));}
.progress-lbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--t3);margin-top:5px;}
.svc-actions{display:flex;gap:7px;margin-top:15px;}

/* ── DOMAIN CARDS ───────────────────────── */
.dom-card{background:var(--d2);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:all .2s;}
.dom-card:hover{border-color:var(--bp2);transform:translateY(-2px);}
.dom-card.expiring{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.03);}
.dom-name{font-size:15px;font-weight:800;font-family:'Syne',sans-serif;color:var(--text);}

/* ── PAGINATION ─────────────────────────── */
.pagination{display:flex;gap:5px;margin-top:16px;justify-content:center;}
.page-btn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--d2);border:1px solid var(--border);border-radius:8px;
  font-size:12.5px;color:var(--t2);transition:all .15s;
}
.page-btn:hover,.page-btn.active{background:var(--pg);border-color:var(--bp2);color:var(--p3);font-weight:700;}

/* ── EMPTY STATE ────────────────────────── */
.empty{text-align:center;padding:50px 20px;}
.empty-icon{font-size:44px;opacity:.25;margin-bottom:12px;}
.empty-text{font-size:13.5px;color:var(--t3);}

/* ── MODAL ──────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(5px);z-index:500;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;animation:fadeIn .15s ease;}
.modal{background:var(--d2);border:1px solid var(--bp2);border-radius:var(--r);width:520px;max-width:95vw;max-height:90vh;overflow-y:auto;animation:scaleIn .2s ease;}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:rgba(154,91,255,.04);}
.modal-title{font-size:15px;font-weight:700;color:var(--text);}
.modal-close{width:28px;height:28px;background:var(--d3);border:none;border-radius:7px;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .15s;}
.modal-close:hover{background:rgba(244,63,94,.15);color:var(--bad);}
.modal-body{padding:22px;}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px;background:rgba(0,0,0,.15);}

/* ── TOAST ──────────────────────────────── */
.toast{
  position:fixed;bottom:22px;right:22px;min-width:270px;
  background:var(--d2);border:1px solid var(--bp2);border-radius:12px;
  padding:13px 17px;display:flex;align-items:center;gap:11px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:9000;
  transform:translateY(90px);opacity:0;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;
}
.toast.show{transform:none;opacity:1;}
.toast.err{border-color:rgba(244,63,94,.4);}
.toast-icon{font-size:18px;}
.toast-text{font-size:13px;font-weight:500;color:var(--text);}

/* ── ALERTS ─────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--r2);font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:10px;font-weight:500;}
.alert-ok{background:rgba(34,211,160,.1);border:1px solid rgba(34,211,160,.28);color:#4ade80;}
.alert-bad{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.28);color:#fb7185;}
.alert-warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);color:#fbbf24;}
.alert-info{background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.28);color:#7dd3fc;}

/* ── AUTH PAGES ─────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--d4);padding:20px;}
.auth-card{
  width:440px;max-width:100%;
  background:var(--d3);border:1px solid var(--bp2);border-radius:var(--r);
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.auth-header{
  background:linear-gradient(135deg,#110820,#160d2b);
  padding:28px;text-align:center;border-bottom:1px solid var(--border);position:relative;overflow:hidden;
}
.auth-header::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(154,91,255,.25) 0%,transparent 70%);}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px;}
.auth-sub{color:var(--t2);font-size:12.5px;}
.auth-body{padding:28px;}

/* ── SCROLLBAR ──────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(154,91,255,.2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(154,91,255,.4);}

/* ── RESPONSIVE ─────────────────────────── */
.overlay-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:99;}
.overlay-bg.show{display:block;}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}

@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:860px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:none;}
  .main{margin-left:0;}
  .hamburger{display:block;}
  .form-grid{grid-template-columns:1fr;}
  .svc-grid{grid-template-columns:1fr;}
  .search-box input{width:100px;}
}
@media(max-width:600px){
  .content{padding:14px;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .welcome{padding:18px 16px;}
}