/* SDMR UI PRO v1 - Design premium Sora */
:root{
  --sdmr-bg:#f5f7fb; --sdmr-surface:#fff;
  --sdmr-primary:#4f46e5; --sdmr-primary-dark:#4338ca; --sdmr-primary-light:#eef2ff;
  --sdmr-success:#10b981; --sdmr-success-light:#d1fae5;
  --sdmr-warning:#f59e0b; --sdmr-warning-light:#fef3c7;
  --sdmr-danger:#ef4444; --sdmr-danger-light:#fee2e2;
  --sdmr-info:#0ea5e9; --sdmr-info-light:#e0f2fe;
  --sdmr-slate-50:#f8fafc; --sdmr-slate-100:#f1f5f9; --sdmr-slate-200:#e2e8f0;
  --sdmr-slate-500:#64748b; --sdmr-slate-700:#334155; --sdmr-slate-900:#0f172a;
  --sdmr-shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 1px rgba(15,23,42,.03);
  --sdmr-shadow:0 4px 8px -2px rgba(15,23,42,.06),0 2px 4px -2px rgba(15,23,42,.04);
  --sdmr-shadow-md:0 10px 18px -3px rgba(15,23,42,.08),0 4px 6px -4px rgba(15,23,42,.05);
  --sdmr-shadow-lg:0 22px 40px -8px rgba(15,23,42,.12),0 8px 12px -6px rgba(15,23,42,.06);
  --sdmr-radius-sm:8px; --sdmr-radius:12px; --sdmr-radius-md:14px; --sdmr-radius-lg:18px;
  --sdmr-tr:200ms cubic-bezier(.4,0,.2,1);
}
body{background:var(--sdmr-bg) !important;color:var(--sdmr-slate-900);font-feature-settings:"ss01","cv11"}
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px;border:2px solid var(--sdmr-bg)}
*::-webkit-scrollbar-thumb:hover{background:#94a3b8}
*:focus-visible{outline:2px solid var(--sdmr-primary);outline-offset:2px;border-radius:6px}
h1,h2{letter-spacing:-.015em;color:var(--sdmr-slate-900)}
h1{font-size:26px;font-weight:800;margin:0 0 18px}
h2{font-size:19px;font-weight:700;margin:0 0 14px}

/* CARDS PREMIUM */
.card{background:var(--sdmr-surface) !important;border:1px solid var(--sdmr-slate-200) !important;border-radius:var(--sdmr-radius-md) !important;box-shadow:var(--sdmr-shadow-sm) !important;padding:20px !important;transition:box-shadow var(--sdmr-tr),transform var(--sdmr-tr);animation:sdmrFadeUp .4s ease-out backwards}
.card:hover{box-shadow:var(--sdmr-shadow-md) !important}
.router-card{box-shadow:var(--sdmr-shadow) !important;border-radius:var(--sdmr-radius-md) !important;transition:box-shadow var(--sdmr-tr),transform var(--sdmr-tr)}
.router-card:hover{box-shadow:var(--sdmr-shadow-lg) !important;transform:translateY(-2px)}
@keyframes sdmrFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* BOUTONS PREMIUM */
.btn{border-radius:10px !important;padding:11px 18px !important;font-weight:600 !important;letter-spacing:.01em;transition:all var(--sdmr-tr);box-shadow:var(--sdmr-shadow-sm);position:relative;overflow:hidden}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sdmr-shadow-md)}
.btn:active{transform:translateY(0);box-shadow:var(--sdmr-shadow-sm)}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.1);opacity:0;transition:opacity .15s}
.btn:hover::after{opacity:1}
.btn.ghost{box-shadow:none}
.btn.ghost:hover{background:var(--sdmr-slate-50) !important;transform:none}
.btn-primary{background:linear-gradient(135deg,var(--sdmr-primary),var(--sdmr-primary-dark)) !important;color:#fff !important;border:0 !important}
.btn-success{background:linear-gradient(135deg,var(--sdmr-success),#059669) !important;color:#fff !important;border:0 !important}
.btn-danger{background:linear-gradient(135deg,var(--sdmr-danger),#dc2626) !important;color:#fff !important;border:0 !important}
.btn-warn{background:linear-gradient(135deg,var(--sdmr-warning),#d97706) !important;color:#fff !important;border:0 !important}

/* INPUTS PREMIUM */
input,select,textarea{border-radius:10px !important;transition:border var(--sdmr-tr),box-shadow var(--sdmr-tr) !important;background:var(--sdmr-slate-50) !important}
input:focus,select:focus,textarea:focus{border-color:var(--sdmr-primary) !important;box-shadow:0 0 0 4px var(--sdmr-primary-light) !important;background:#fff !important;outline:none}
label{color:var(--sdmr-slate-700) !important;font-weight:600 !important}

/* BADGES PREMIUM */
.badge{padding:4px 11px !important;border-radius:999px !important;font-weight:600 !important;letter-spacing:.02em;display:inline-flex;align-items:center;gap:5px}
.badge.on{background:var(--sdmr-success-light) !important;color:#065f46 !important}
.badge.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sdmr-success);animation:sdmrPulse 2s infinite}
.badge.off{background:var(--sdmr-danger-light) !important;color:#991b1b !important}
.badge.off::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sdmr-danger)}
@keyframes sdmrPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}

/* STATS PREMIUM */
.stat{border-radius:var(--sdmr-radius-md) !important;padding:22px !important;transition:transform var(--sdmr-tr),box-shadow var(--sdmr-tr);position:relative;overflow:hidden}
.stat:hover{transform:translateY(-3px);box-shadow:0 20px 30px -8px rgba(2,32,71,.3) !important}
.stat::before{content:"";position:absolute;top:0;right:0;width:100px;height:100px;background:radial-gradient(circle,rgba(255,255,255,.15),transparent);border-radius:50%;transform:translate(30px,-30px)}
.stat .l{opacity:.85;font-size:12px !important;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.stat .v{font-size:32px !important;font-weight:800 !important;letter-spacing:-.02em;margin-top:4px}

/* TOPBAR PREMIUM */
.topbar{background:var(--sdmr-surface) !important;padding:14px 22px !important;border-radius:var(--sdmr-radius-md);box-shadow:var(--sdmr-shadow-sm);margin-bottom:18px;border:1px solid var(--sdmr-slate-200)}
.tt{font-weight:800 !important;color:var(--sdmr-slate-900);font-size:17px !important}
.ts{color:var(--sdmr-slate-500) !important;font-size:12px !important;letter-spacing:.03em}
.clock,.pill{box-shadow:var(--sdmr-shadow-sm);transition:all var(--sdmr-tr)}
.clock:hover,.pill:hover{transform:translateY(-1px);box-shadow:var(--sdmr-shadow)}
.pill{background:linear-gradient(135deg,var(--sdmr-primary-light),#fff) !important;color:var(--sdmr-primary-dark) !important;font-weight:700 !important;border:1px solid #c7d2fe}
.uavatar{box-shadow:var(--sdmr-shadow);background:linear-gradient(135deg,var(--sdmr-primary),#7c3aed) !important}
.userpill{transition:all var(--sdmr-tr);box-shadow:var(--sdmr-shadow-sm)}
.userpill:hover{transform:translateY(-1px);box-shadow:var(--sdmr-shadow)}

/* SIDEBAR PREMIUM */
aside{background:linear-gradient(180deg,var(--sdmr-slate-900),#1e293b) !important;border-right:1px solid #1e293b}
.topbrand{background:rgba(255,255,255,.06) !important;backdrop-filter:blur(10px);border-radius:var(--sdmr-radius);margin:0 10px}
.nav a{border-radius:10px !important;transition:all var(--sdmr-tr);margin:2px 0}
.nav a:hover{background:rgba(255,255,255,.08) !important;transform:translateX(2px)}
.nav a.active{background:linear-gradient(90deg,var(--sdmr-primary),var(--sdmr-primary-dark)) !important;box-shadow:0 4px 12px rgba(79,70,229,.4) !important;color:#fff !important}
.sec{color:#94a3b8 !important;font-size:11px !important;letter-spacing:.1em !important;text-transform:uppercase;margin-top:18px !important;padding:0 14px !important}

/* FLASH PREMIUM */
.flash{border-radius:var(--sdmr-radius) !important;border-left:4px solid var(--sdmr-success) !important;box-shadow:var(--sdmr-shadow-sm);animation:sdmrFadeUp .3s ease-out}
.err{border-radius:var(--sdmr-radius) !important;border-left:4px solid var(--sdmr-danger) !important;box-shadow:var(--sdmr-shadow-sm);animation:sdmrFadeUp .3s ease-out}

/* NOUVEAUX COMPOSANTS */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em;background:var(--sdmr-slate-100);color:var(--sdmr-slate-700)}
.chip.primary{background:var(--sdmr-primary-light);color:var(--sdmr-primary-dark)}
.chip.success{background:var(--sdmr-success-light);color:#065f46}
.chip.warn{background:var(--sdmr-warning-light);color:#92400e}
.chip.danger{background:var(--sdmr-danger-light);color:#991b1b}
.alert{padding:14px 18px;border-radius:var(--sdmr-radius);display:flex;align-items:start;gap:12px;margin-bottom:16px;animation:sdmrFadeUp .3s ease-out;border-left:4px solid}
.alert-info{background:var(--sdmr-info-light);border-color:var(--sdmr-info);color:#0c4a6e}
.alert-success{background:var(--sdmr-success-light);border-color:var(--sdmr-success);color:#065f46}
.alert-warn{background:var(--sdmr-warning-light);border-color:var(--sdmr-warning);color:#92400e}
.alert-danger{background:var(--sdmr-danger-light);border-color:var(--sdmr-danger);color:#991b1b}
.skeleton{background:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 50%,#f1f5f9 100%);background-size:200% 100%;animation:sdmrShimmer 1.4s infinite;border-radius:8px}
@keyframes sdmrShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty-state{text-align:center;padding:48px 24px;color:var(--sdmr-slate-500)}
.empty-state .ico{font-size:48px;margin-bottom:14px;opacity:.4}

/* TABLES PREMIUM */
table{box-shadow:var(--sdmr-shadow-sm) !important;border-radius:var(--sdmr-radius-md) !important}
tbody tr{transition:background var(--sdmr-tr)}
tbody tr:hover{background:var(--sdmr-slate-50) !important}

/* TABS PREMIUM */
.tabs a{transition:all var(--sdmr-tr);border-radius:8px 8px 0 0}
.tabs a:hover{background:var(--sdmr-slate-50)}
.tabs a.active{color:var(--sdmr-primary) !important;border-bottom-color:var(--sdmr-primary) !important}

/* ANIMATIONS CARDS DELAY */
.card:nth-child(2){animation-delay:.05s}
.card:nth-child(3){animation-delay:.1s}
.card:nth-child(4){animation-delay:.15s}
.stat:nth-child(2){animation-delay:.05s}
.stat:nth-child(3){animation-delay:.1s}
.stat:nth-child(4){animation-delay:.15s}

/* MOBILE RESPONSIVE */
@media(max-width:900px){
  .wrap{padding:14px !important}
  h1{font-size:22px}
  .topbar{padding:12px 14px !important}
  .stat{padding:16px !important}
  .stat .v{font-size:26px !important}
  .card{padding:14px !important}
  .btn{padding:10px 14px !important;font-size:13px !important}
}
@media(max-width:600px){
  .form-row{flex-direction:column !important;gap:8px !important}
  .form-row > div{min-width:0 !important;width:100%}
}

/* AMELIORATION FORCEE TOUTES PAGES */
.main{background:transparent !important}
.wrap{padding:20px 24px !important;max-width:1400px}
form:not(.topbar form){background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;box-shadow:0 1px 2px rgba(15,23,42,.04);margin-bottom:16px}
p.muted{color:#64748b;line-height:1.55}
hr{border:0;border-top:1px solid #e2e8f0;margin:18px 0}
.btn+.btn{margin-left:8px}
a:not(.nav a):not(.btn):not(.quick-tile):not(.alert-pro a):not(.ra){color:#4f46e5;transition:all .15s}
a:not(.nav a):not(.btn):not(.quick-tile):not(.alert-pro a):not(.ra):hover{color:#4338ca;text-decoration:underline}

/* Pages contenu brut sans wrapper card */
.main > h1:first-child,.main > h2:first-child{margin-top:0;padding:4px 0 12px;border-bottom:2px solid #e2e8f0;position:relative}
.main > h1:first-child::after,.main > h2:first-child::after{content:"";position:absolute;left:0;bottom:-2px;width:60px;height:2px;background:linear-gradient(90deg,#4f46e5,#ec4899);border-radius:2px}

/* Section wrapper auto */
.main > p+h2,.main > div+h2,.main > table+h2{margin-top:24px}

/* QR codes et images */
img[alt*="QR"],img[src*="qr"]{border:1px solid #e2e8f0;border-radius:10px;padding:4px;background:#fff}

/* Code blocks premium */
pre,.code{background:#0f172a !important;color:#e2e8f0 !important;padding:14px 18px !important;border-radius:12px !important;font-family:'JetBrains Mono',ui-monospace,monospace !important;overflow-x:auto;position:relative;box-shadow:0 4px 12px rgba(15,23,42,.1)}

/* Loading state global */
.loading{position:relative;color:transparent !important}
.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 50%,#f1f5f9 100%);background-size:200% 100%;animation:sdmrShimmer 1.4s infinite;border-radius:inherit}

/* Toast notifications */
.sdmr-toast{position:fixed;bottom:20px;right:20px;background:#0f172a;color:#fff;padding:14px 20px;border-radius:12px;box-shadow:0 20px 40px -10px rgba(0,0,0,.3);z-index:9999;animation:toastIn .3s;max-width:400px;display:flex;align-items:center;gap:12px}
.sdmr-toast.success{background:linear-gradient(135deg,#10b981,#059669)}
.sdmr-toast.error{background:linear-gradient(135deg,#ef4444,#dc2626)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Breadcrumb auto */
.breadcrumb{display:flex;gap:6px;align-items:center;font-size:13px;color:#64748b;margin-bottom:14px}
.breadcrumb a{color:#4f46e5;text-decoration:none}
.breadcrumb .sep{opacity:.4}

/* Floating action button pour mobile */
.fab{display:none;position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;align-items:center;justify-content:center;font-size:24px;box-shadow:0 10px 30px rgba(79,70,229,.4);text-decoration:none;z-index:100;transition:all .25s}
.fab:hover{transform:scale(1.1) rotate(90deg)}
@media(max-width:900px){.fab{display:flex}}

/* Section titre premium */
.sec-title{display:flex;align-items:center;gap:10px;margin:24px 0 14px;font-size:16px;font-weight:800;color:#0f172a}
.sec-title::before{content:"";width:4px;height:20px;background:linear-gradient(180deg,#4f46e5,#ec4899);border-radius:2px}

/* Nouveau badge "NEW" */
.new-badge{display:inline-flex;align-items:center;background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;font-size:9px;padding:2px 7px;border-radius:999px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-left:6px;vertical-align:middle;animation:newPulse 2s infinite}
@keyframes newPulse{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,.4)}50%{box-shadow:0 0 0 6px rgba(236,72,153,0)}}


/* MIKHMON PAGE PREMIUM */
.main h1+.muted{color:#64748b;font-size:14px;margin-bottom:20px}
.main .card{position:relative;overflow:hidden;transition:all .3s}
.main .card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#4f46e5,#ec4899)}
.main .card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(79,70,229,.2) !important}
.main .card h2{display:flex;align-items:center;gap:10px;font-size:17px}
.main .card h2 small{font-weight:500;color:#64748b;font-size:13px}
.main .code{background:linear-gradient(135deg,#f8fafc,#f1f5f9) !important;color:#0f172a !important;border:1px solid #e2e8f0;position:relative;padding-right:50px !important}
.main .code::after{content:"📋";position:absolute;right:14px;top:50%;transform:translateY(-50%);opacity:.3;transition:opacity .2s;cursor:pointer}
.main .code:hover::after{opacity:1}

/* Badges statut premium */
.badge.on,span[class*="actif"],span[class*="Actif"]{position:relative}

/* Boutons premium groupés */
.btn[href*="mikhmon"],.btn[href*="router"]{background:linear-gradient(135deg,#4f46e5,#7c3aed) !important;color:#fff !important;border:0 !important;box-shadow:0 4px 12px rgba(79,70,229,.3)}
.btn[href*="mikhmon"]:hover,.btn[href*="router"]:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(79,70,229,.4)}

/* Solde dispo card */
div[style*="Solde"],div[style*="solde"]{background:linear-gradient(135deg,#fef3c7,#fde68a) !important;border:1px solid #f59e0b !important;border-radius:14px !important;padding:20px !important;box-shadow:0 8px 20px rgba(245,158,11,.15) !important}

/* ===== Icones SVG inline ===== */
.ico{
  display:inline-block;
  vertical-align:-0.18em;
  margin-right:.5em;
  flex:0 0 auto;
}
.btn .ico, .link .ico{ margin-right:.4em; }
.si .ico{ margin-right:0; }

/* ===== Bouton theme clair/sombre ===== */
.themebtn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--bd);
  background:var(--card);color:var(--tx);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,transform .15s;padding:0;
}
.themebtn:hover{transform:translateY(-1px)}
.themebtn .ico{margin:0}
.themebtn .t-moon{display:none}
:root[data-theme="dark"] .themebtn .t-sun{display:none}
:root[data-theme="dark"] .themebtn .t-moon{display:inline-flex}

/* ===== Bouton theme ===== */
.themebtn{width:auto;min-width:34px;height:34px;border-radius:999px;border:1px solid var(--bd);
  background:var(--card);color:var(--tx);cursor:pointer;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.themebtn:hover{transform:translateY(-1px)}
.themebtn .ico{margin:0}
.themebtn .t-moon{display:none}
:root[data-theme="dark"] .themebtn .t-sun{display:none}
:root[data-theme="dark"] .themebtn .t-moon{display:inline-flex}

/* ===== THEME SOMBRE ===== */
:root[data-theme="dark"]{
  --bg:#0b1220; --card:#131c2e; --bd:#243247; --tx:#e6edf7; --mut:#93a3bd;
  --sdmr-bg:#0b1220; --sdmr-surface:#131c2e;
  --sdmr-slate-50:#1a2437; --sdmr-slate-100:#1f2b40; --sdmr-slate-200:#243247;
  --sdmr-slate-500:#93a3bd; --sdmr-slate-700:#c3cfe2; --sdmr-slate-900:#e6edf7;
  --sdmr-primary-light:#1e2a52;
}
:root[data-theme="dark"] body{background:var(--bg) !important;color:var(--tx)}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] .sec-title{color:var(--tx)}
:root[data-theme="dark"] .topbar{background:var(--card) !important;border-color:var(--bd)}
:root[data-theme="dark"] .topbar .tt{color:var(--tx)}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .router-card,
:root[data-theme="dark"] .stat-pro,
:root[data-theme="dark"] .quick-tile,
:root[data-theme="dark"] .empty-pro{background:var(--card) !important;border-color:var(--bd) !important;color:var(--tx)}
:root[data-theme="dark"] form:not(.topbar form){background:var(--card);border-color:var(--bd);color:var(--tx)}
:root[data-theme="dark"] table{background:var(--card) !important;color:var(--tx)}
:root[data-theme="dark"] th{background:var(--sdmr-slate-100) !important;color:var(--mut) !important;border-color:var(--bd) !important}
:root[data-theme="dark"] td{border-color:var(--bd) !important;color:var(--tx)}
:root[data-theme="dark"] tbody tr:hover{background:var(--sdmr-slate-50) !important}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{background:var(--sdmr-slate-50) !important;border-color:var(--bd) !important;color:var(--tx) !important}
:root[data-theme="dark"] input:focus{background:var(--sdmr-slate-100) !important}
:root[data-theme="dark"] label,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] p.muted,
:root[data-theme="dark"] .ss,
:root[data-theme="dark"] .rsub{color:var(--mut) !important}
:root[data-theme="dark"] .clock{background:var(--sdmr-slate-100);color:var(--tx)}
:root[data-theme="dark"] .pill{background:var(--sdmr-primary-light) !important;color:#c7d2fe !important;border-color:#2d3a63}
:root[data-theme="dark"] hr{border-color:var(--bd)}
:root[data-theme="dark"] .main > h1:first-child,
:root[data-theme="dark"] .main > h2:first-child{border-bottom-color:var(--bd)}
:root[data-theme="dark"] .main .code{background:var(--sdmr-slate-50) !important;color:var(--tx) !important;border-color:var(--bd)}
:root[data-theme="dark"] .badge.on{background:#07331f !important;color:#6ee7b7 !important}
:root[data-theme="dark"] .badge.off{background:#3a1114 !important;color:#fca5a5 !important}
:root[data-theme="dark"] .chip{background:var(--sdmr-slate-100);color:var(--sdmr-slate-700)}
:root[data-theme="dark"] div[style*="Solde"],
:root[data-theme="dark"] div[style*="solde"]{background:linear-gradient(135deg,#3a2f0c,#4a3c10) !important;border-color:#8a6d1f !important}
:root[data-theme="dark"] img[alt*="QR"],
:root[data-theme="dark"] img[src*="qr"]{background:#fff}