/*
  NovaGuard — © 2026 NovaGuard (Maisto & Ghost). Tous droits réservés / All Rights Reserved.
  Logiciel propriétaire et confidentiel — copie, distribution ou « leak » interdits. Voir LICENSE.

  ============================================================================
  PANEL — peau « Nuit de verre », registre APPLICATION
  ============================================================================
  Chargée APRÈS tailwind.css et le <style> de index.html : elle redéfinit
  l'apparence des composants existants (mêmes noms de classes, mêmes ids) sans
  toucher au JavaScript du panel. Couleurs, polices, rayons : /assets/tokens.css.

  Registre application : densité UI, boutons 44 px, champs 44 px, rayons 12/20,
  scènes calmes. Budget de flous : barre latérale, en-tête, grands panneaux
  (.glass-panel) et barre de sauvegarde ; les cartes internes sont opaques.
*/

/* ---------- Base & typographie ---------- */
body{font-family:var(--font-body);color:var(--ink-hi);background:var(--bg-0)}
.font-display{font-family:var(--font-display)!important;letter-spacing:-.015em}
.font-mono{font-family:var(--font-mono)!important}
.section-title{font-family:var(--font-display);font-weight:300;font-size:32px;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.section-sub{color:var(--ink-2);font-size:14px;max-width:640px}
.eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  padding:0;border:0;background:none}
.eyebrow .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}

/* Recolorations des utilitaires Tailwind vers les encres de la charte */
.text-white{color:var(--ink)}
.text-slate-100,.text-slate-200{color:var(--ink-hi)}
.text-slate-300{color:var(--ink-hi)}
.text-slate-400{color:var(--ink-2)}
.text-slate-500,.text-slate-600{color:var(--ink-3)}
.text-indigo-300,.text-indigo-400{color:var(--cyan-hi)}
.border-white\/5{border-color:var(--line)}
.border-white\/10{border-color:var(--hairline-glass)}
.bg-black\/20,.bg-black\/30,.bg-black\/40{background-color:rgba(0,0,0,.16)}
.bg-white\/5{background-color:rgba(255,255,255,.05)}
.bg-white\/\[0\.02\]{background-color:rgba(255,255,255,.025)}
.bg-indigo-500\/10{background-color:var(--cyan-08)}
.border-indigo-500\/20,.border-indigo-500\/30{border-color:var(--cyan-26)}
.hover\:text-white:hover{color:var(--ink)}
.divide-white\/5>:not([hidden])~:not([hidden]){border-color:var(--line)}

/* ---------- Scène de fond (fixe, une seule, très calme) ---------- */
.panel-scene{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.panel-scene .scene-bg{position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 18% -10%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(55% 70% at 100% 30%, var(--scene-violet) 0%, rgba(124,106,255,0) 60%),
    radial-gradient(50% 60% at -10% 85%, var(--scene-cyan) 0%, rgba(63,208,255,0) 60%),
    linear-gradient(176deg, var(--scene-navy) 0%, var(--scene-base) 50%, var(--bg-0) 100%)}
.panel-scene .caustic{position:absolute;border-radius:50%;
  background:radial-gradient(circle, var(--scene-white) 0%, rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 70%)}
.panel-scene .caustic--a{width:60vw;height:60vw;max-width:980px;max-height:980px;right:-16vw;top:-24vw;animation:panel-drift-a 58s ease-in-out infinite}
.panel-scene .caustic--b{width:46vw;height:46vw;max-width:760px;max-height:760px;left:-12vw;bottom:-18vw;animation:panel-drift-b 66s ease-in-out infinite}
@keyframes panel-drift-a{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-8vw,7vw,0)}}
@keyframes panel-drift-b{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(8vw,-6vw,0)}}
.panel-scene::after{content:"";position:absolute;inset:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.panel-scene .ribbon{position:absolute;right:-6%;top:-6%;width:52%;height:auto;opacity:.32}

/* ---------- Verre ---------- */
.glass-panel{
  background:var(--glass);border:1px solid var(--hairline-glass);border-radius:var(--r-2xl);
  backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--edge), var(--sh-glass);
  transition:border-color .3s, transform .3s}
.glass-panel.lift:hover{transform:translateY(-2px);border-color:var(--line-3);background:var(--glass)}
/* Cartes internes : même matière, opaques (pas de flou, budget GPU) */
.kpi-card,.cfg-card,.cfg-selector,.bot-card,.price-card,.cfg-empty{
  background:rgba(14,14,28,.78);border:1px solid var(--hairline-glass);border-radius:var(--r-2xl);
  box-shadow:inset 0 1px 0 var(--edge), 0 2px 6px rgba(0,0,0,.3), 0 20px 48px -28px rgba(0,0,0,.7)}
.kpi-card:hover,.bot-card:hover,.price-card:hover{transform:translateY(-2px);border-color:var(--line-3);box-shadow:inset 0 1px 0 var(--edge-hi), 0 2px 6px rgba(0,0,0,.3), 0 26px 56px -28px rgba(0,0,0,.8)}
.cfg-card:hover{border-color:var(--line-3)}
.cfg-empty{border-style:dashed;background:rgba(14,14,28,.5)}
.price-card.featured{background:rgba(18,18,36,.86);border-color:rgba(143,224,255,.28);box-shadow:inset 0 1px 0 var(--edge-hi), 0 24px 50px -30px rgba(63,208,255,.35)}

/* ---------- KPI ---------- */
.kpi-card{padding:24px 26px 22px}
.kpi-card .kpi-glow{opacity:.55;filter:blur(10px)}
.kpi-card .kpi-icon{width:40px;height:40px;border-radius:13px;background:var(--glass-pill);border:1px solid var(--hairline-glass);
  color:var(--cyan-hi)!important;box-shadow:inset 0 1px 0 var(--edge)}
.kpi-card .kpi-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--ink-3)}
.kpi-card .kpi-value{font-family:var(--font-display);font-weight:300;font-size:46px;letter-spacing:-.02em;color:var(--ink)}
.kpi-card .kpi-sub{font-family:var(--font-mono);color:var(--ink-3)}

/* ---------- Barre latérale & en-tête ---------- */
aside#dashboard-sidebar{background:var(--glass-veil);border-right:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}
#app-dashboard>main>header,#app-public>header{background:var(--glass-veil);border-bottom:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}
.nav-group{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--ink-3);padding:16px 14px 6px}
.nav-link{border-radius:12px;color:var(--ink-2);font-size:13.5px;transition:color .25s, background .25s, border-color .25s, box-shadow .25s}
.nav-link:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nav-link.bg-white\/5{background:rgba(255,255,255,.06);border-color:var(--hairline-glass);color:var(--ink);box-shadow:inset 0 1px 0 var(--edge)}
.nav-link::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan);width:2px}
.nav-link.bg-white\/5 iconify-icon{color:var(--cyan-hi)}
.nav-link span.font-medium{font-weight:500}
.brand-mark{background:none;box-shadow:none;animation:none;border-radius:0;width:34px;height:34px}
.brand-mark::after{display:none}
.brand-mark:has(img.is-broken)::after{display:grid;font-family:var(--font-display);font-weight:500}
.host-badge{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  background:var(--glass-pill);border:1px solid var(--hairline-glass);box-shadow:inset 0 1px 0 var(--edge)}
.host-badge .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}
/* Le style inline .host-badge{display:inline-flex} battait l'utilitaire .hidden :
   le badge apparaissait sur mobile. On rend la main à hidden / md:inline-flex. */
.host-badge.hidden{display:none}
/* Visible seulement à partir de 1024 px : entre 768 et 1023 (iPad portrait, barre
   latérale ouverte) il chevauchait le fil d'Ariane et masquait l'avatar. */
@media (min-width:1024px){.host-badge.hidden{display:inline-flex}}
#app-dashboard>main>header div.w-9.h-9{background:linear-gradient(180deg,#ffffff,#dbe7fa)!important;color:var(--bg-0)!important;
  box-shadow:inset 0 1px 0 #fff, 0 6px 16px -8px rgba(143,224,255,.6)!important;font-family:var(--font-display);font-weight:500}
#app-dashboard>main>header nav span{font-family:var(--font-mono);letter-spacing:.18em}

/* ---------- Boutons ---------- */
.btn-grad{
  background:linear-gradient(180deg,#ffffff 0%,#e3ecfa 100%);color:var(--bg-0)!important;border-radius:999px;
  font-weight:500;letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -12px rgba(143,224,255,.55);
  transition:transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.4), 0 20px 40px -14px rgba(143,224,255,.75)}
.btn-grad::before{display:none}
.btn-grad iconify-icon{color:var(--bg-0)}
.btn-magique::before{display:none}
.btn-magique:hover{box-shadow:none;border-color:var(--line-3)}
/* Boutons fantômes : bordure hairline + arête, pilule */
#app-dashboard button.border-white\/10,#app-public button.border-white\/10,
#app-dashboard a.border-white\/10,#shop-free-modal button.border-white\/10{
  background:rgba(255,255,255,.04);border-color:var(--hairline-glass);color:var(--ink-hi);border-radius:999px;
  box-shadow:inset 0 1px 0 var(--edge);transition:transform .35s var(--ease-out-expo), border-color .3s, color .3s}
#app-dashboard button.border-white\/10:hover,#app-public button.border-white\/10:hover,#shop-free-modal button.border-white\/10:hover{
  color:var(--ink);border-color:var(--line-3);background:rgba(255,255,255,.06);transform:translateY(-1px)}
#app-dashboard button.border-white\/10.w-7{border-radius:999px;transform:none}
#app-dashboard button.bg-red-500\/15{border-radius:999px}

/* ---------- Champs ---------- */
.ng-input,.cfg-input,.cfg-select{
  background:rgba(255,255,255,.04);border:1px solid var(--hairline-glass);color:var(--ink);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .25s, background .25s, box-shadow .25s}
.ng-input::placeholder,.cfg-input::placeholder{color:var(--ink-3)}
.ng-input:focus,.cfg-input:focus,.cfg-select:focus{outline:none;border-color:rgba(143,224,255,.45);background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 4px rgba(63,208,255,.10)}
.cfg-select,.cfg-input{height:44px}
.cfg-textarea{height:auto;font-family:var(--font-mono)}
.cfg-selector-label,.cfg-label{font-family:var(--font-mono);letter-spacing:.18em;color:var(--ink-3)}
.cfg-selector-label iconify-icon,.cfg-mod span iconify-icon{color:var(--cyan-hi)}
.cfg-hint{background:rgba(255,255,255,.04);border-color:var(--line)}
.cfg-card-head{background:rgba(255,255,255,.02);border-bottom:1px solid var(--line)}
.cfg-card-icon{background:var(--glass-pill);border:1px solid var(--hairline-glass);color:var(--cyan-hi);box-shadow:inset 0 1px 0 var(--edge);border-radius:13px}
.cfg-card-title{font-family:var(--font-display);font-weight:500;color:var(--ink);letter-spacing:-.01em}
.cfg-card-sub{color:var(--ink-3)}
.cfg-empty-icon{background:var(--glass-pill);border:1px solid var(--hairline-glass);color:var(--cyan-hi);box-shadow:inset 0 1px 0 var(--edge)}

/* Interrupteurs, curseurs, choix */
.cfg-toggle-track{background:rgba(255,255,255,.08);border-color:var(--hairline-glass)}
.cfg-toggle-thumb{background:var(--ink-3)}
.cfg-toggle input:checked + .cfg-toggle-track{background:linear-gradient(180deg,#ffffff,#dbe7fa);border-color:transparent;box-shadow:0 6px 16px -8px rgba(143,224,255,.6)}
.cfg-toggle input:checked + .cfg-toggle-track .cfg-toggle-thumb{background:var(--bg-0);box-shadow:none}
.cfg-slider{background:rgba(255,255,255,.1)}
.cfg-slider::-webkit-slider-thumb{background:#fff;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.4)}
.cfg-slider::-moz-range-thumb{background:#fff;border:0}
.cfg-slider-val{font-family:var(--font-mono);color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--hairline-glass);border-radius:999px}
.cfg-radio,.cfg-check,.cfg-mod{background:rgba(255,255,255,.03);border-color:var(--hairline-glass);color:var(--ink-2);border-radius:999px}
.cfg-mod{border-radius:12px}
.cfg-radio input,.cfg-check input,.cfg-mod input{accent-color:#e3ecfa}
.cfg-radio:hover,.cfg-check:hover,.cfg-mod:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.cfg-radio:has(input:checked),.cfg-check:has(input:checked),.cfg-mod:has(input:checked){
  background:rgba(255,255,255,.08);border-color:var(--line-3);color:var(--ink);box-shadow:inset 0 1px 0 var(--edge)}
.cfg-mod:has(input:checked) span iconify-icon{color:var(--cyan-hi)}
.cfg-pill{font-family:var(--font-mono);border-color:var(--line);border-radius:999px}

/* Onglets */
.cfg-tabs-bar{background:rgba(14,14,28,.7);border-color:var(--hairline-glass);border-radius:999px;box-shadow:inset 0 1px 0 var(--edge)}
.cfg-tab{font-family:var(--font-body);font-weight:500;color:var(--ink-2);border-radius:999px}
.cfg-tab:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.cfg-tab.active{background:linear-gradient(180deg,#ffffff,#e3ecfa);color:var(--bg-0);box-shadow:0 8px 20px -10px rgba(143,224,255,.6)}
.cfg-tab.active iconify-icon{color:var(--bg-0)}

/* Barre de sauvegarde */
.cfg-savebar{background:var(--glass-strong);border-color:var(--hairline-glass);border-radius:var(--r-2xl);
  backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--edge-hi), var(--sh-glass)}

/* ---------- Tableaux & flux ---------- */
table.ng-table thead tr{background:rgba(255,255,255,.03)}
table.ng-table th{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--ink-3);font-weight:400}
table.ng-table tbody tr:hover{background:rgba(255,255,255,.03)}
table.ng-table td{color:var(--ink-hi)}
.feed-row{font-family:var(--font-mono)}
.feed-row:hover{background:rgba(255,255,255,.03)}
.feed-badge{border-radius:999px;font-family:var(--font-mono);letter-spacing:.14em}
.feed-badge.ok{background:var(--ok-bg);color:var(--ok-hi);border-color:var(--ok-line)}
.feed-badge.warn{background:var(--warn-bg);color:var(--warn-hi);border-color:var(--warn-line)}
.feed-badge.block{background:var(--err-bg);color:var(--err-hi);border-color:var(--err-line)}
.custom-checkbox input:checked + div{background:#fff;border-color:#fff}
.custom-checkbox div{border-radius:5px}

/* ---------- Modales ---------- */
#shop-free-modal{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(6,6,14,.6)}
#shop-free-modal .glass-panel{background:var(--glass-strong);border-radius:var(--r-glass)}

/* ---------- Boutique publique ---------- */
#app-public>footer{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--line)}
#app-public details.rounded-lg{background:rgba(14,14,28,.6);border-color:var(--hairline-glass);border-radius:16px;box-shadow:inset 0 1px 0 var(--edge)}
#app-public .rounded-lg.border{border-color:var(--hairline-glass)}

/* ---------- Transitions de page ---------- */
.page-content{animation:panel-in .7s var(--ease-out-expo) both}
@keyframes panel-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Mobile ---------- */
@media (max-width:767.98px){
  aside#dashboard-sidebar.mobile-sidebar-open{background:var(--glass-strong)}
  .section-title{font-size:27px}
  .kpi-card .kpi-value{font-size:38px}
}