/* ==========================================================================
   MASSIFY — DESIGN SYSTEM (couche finale, chargée après massify-ui.css)
   Construction identique à la plateforme de référence :
   tokens, boutons (dégradé or + reflet + ombre interne), cartes, tags,
   champs, onglets, drawer, modales, toasts et TOUTES les animations.
   Produit : Immobilier (vente & location de biens) — aucun contenu « auto ».
   ========================================================================== */

/* -------- 0. TOKENS -------- */
:root {
  --bg: #070b16;
  --bg2: #0c142c;
  --card: #101b3d;
  --card2: #0a1230;
  --line: #22315e;
  --txt: #eef2ff;
  --mut: #93a3cf;
  --acc: #f59e0b;
  --gold: #f59e0b;
  --gold2: #fbbf24;
  --ok: #22c55e;
  --bad: #ef4444;
  --blue: #3b82f6;
  --vio: #7b2ff7;
  --deep: 0 20px 48px rgba(0, 0, 0, .52);

  --ds-r: 18px;
  --ds-r-in: 11px;
  --ds-pad: 15px;
  --ds-ease: cubic-bezier(.22, .9, .3, 1);
  --ds-ease-back: cubic-bezier(.22, 1.35, .36, 1);
}

/* -------- 1. BASE -------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .002em;
}
::selection { background: rgba(245, 158, 11, .34); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #070b16; }
::-webkit-scrollbar-thumb { background: #22315e; border-radius: 9px; border: 2px solid #070b16; }
::-webkit-scrollbar-thumb:hover { background: #33518f; }

h1, h2, h3 { color: var(--txt); font-weight: 900; letter-spacing: -.02em; line-height: 1.18; }
h2 { position: relative; padding-left: 12px; }
h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px;
  border-radius: 3px; background: linear-gradient(#fbbf24, #f59e0b);
  box-shadow: 0 0 12px rgba(245, 158, 11, .75);
}
.small, .meta, .muted { font-size: 12.5px; color: var(--mut); }
.hidden { display: none !important; }

main, section, .card, header, footer, .row > *, .grid > * { min-width: 0; max-width: 100%; }

/* -------- 2. BOUTONS — construction de référence -------- */
html[data-app] button:not(.mz-fab):not(.tg-ibtn):not(.icon-btn):not(.tabbtn):not(.pub-tab):not(.navbtn):not(.dlink):not(.theme-btn):not(.hamburger):not(.hamb-btn):not(.notif-bell-btn):not(.close):not(.btn-icon):not(.car-btn):not(.pw-toggle):not(.tg-act):not(.tg-chip):not(.preset):not(.chip):not(.legal-tab):not(.tab):not(.favbtn):not(.drawer-close),
html[data-app] .btn,
html[data-app] a.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--ds-r-in) !important;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, #f8b73a, #f59e0b 62%, #e08a06);
  color: #1c1102;
  font-weight: 800;
  font-size: 13.8px;
  letter-spacing: .01em;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 9px 22px -8px rgba(245, 158, 11, .65);
  transition: transform .15s, box-shadow .2s, filter .2s, border-color .2s;
}
/* reflet supérieur du bouton (même construction que la référence) */
html[data-app] button:not(.mz-fab):not(.tg-ibtn):not(.icon-btn):not(.tabbtn):not(.pub-tab):not(.navbtn):not(.dlink):not(.theme-btn):not(.hamburger):not(.hamb-btn):not(.notif-bell-btn):not(.close):not(.btn-icon):not(.car-btn):not(.pw-toggle):not(.tg-act):not(.tg-chip):not(.preset):not(.chip):not(.legal-tab):not(.tab):not(.favbtn):not(.drawer-close)::before,
html[data-app] a.btn::before {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent);
  opacity: .7;
  pointer-events: none;
  border-radius: inherit;
}
html[data-app] button:hover,
html[data-app] .btn:hover,
html[data-app] a.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
html[data-app] button:active,
html[data-app] .btn:active,
html[data-app] a.btn:active { transform: translateY(0) scale(.985); }
html[data-app] button:disabled,
html[data-app] .btn:disabled {
  filter: grayscale(.8) brightness(.7);
  cursor: not-allowed;
  transform: none;
}

/* primaire or */
html[data-app] .btn-primary,
html[data-app] .btn-gold,
html[data-app] .btn-or {
  background: linear-gradient(180deg, #f8b73a, #f59e0b 62%, #e08a06) !important;
  color: #1c1102 !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 9px 22px -8px rgba(245, 158, 11, .65) !important;
}

/* secondaire (ghost) */
html[data-app] .btn-ghost,
html[data-app] .btn-navy,
html[data-app] .btn-dark,
html[data-app] .btn-line,
html[data-app] .btn-secondary {
  background: linear-gradient(180deg, #151f46, #0b1229) !important;
  color: var(--txt) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .9) !important;
}
html[data-app] .btn-ghost:hover,
html[data-app] .btn-navy:hover,
html[data-app] .btn-dark:hover,
html[data-app] .btn-line:hover { border-color: rgba(245, 158, 11, .7) !important; color: #fff !important; }

/* vert */
html[data-app] .btn-ok,
html[data-app] .btn-accept,
html[data-app] .btn-green {
  background: linear-gradient(180deg, #4ade80, #22c55e) !important;
  color: #052e16 !important;
  border-color: rgba(255, 255, 255, .3) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 9px 22px -8px rgba(34, 197, 94, .7) !important;
}

/* bleu */
html[data-app] .btn-blue,
html[data-app] .btn-info {
  background: linear-gradient(180deg, #60a5fa, #3b82f6) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 9px 22px -8px rgba(59, 130, 246, .7) !important;
}

/* rouge */
html[data-app] .btn-danger,
html[data-app] .btn-reject,
html[data-app] .btn-logout,
html[data-app] .logout-btn {
  background: linear-gradient(180deg, #f87171, #ef4444) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 9px 22px -8px rgba(239, 68, 68, .7) !important;
}

/* whatsapp */
html[data-app] .btn-wa {
  background: linear-gradient(180deg, #34d399, #25d366) !important;
  color: #04240f !important;
  border-color: rgba(255, 255, 255, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 9px 22px -8px rgba(37, 211, 102, .65) !important;
}

/* tailles */
html[data-app] .btn-sm {
  padding: 7px 11px !important;
  font-size: 12.4px !important;
  border-radius: 10px !important;
  gap: 5px !important;
}
html[data-app] .btn-lg, html[data-app] .full.btn { padding: 13px 20px !important; font-size: 15px !important; }
html[data-app] .btn:has(> .ic) { padding-inline: 13px; }
html[data-app] .ic { font-style: normal; line-height: 1; }

/* boutons icônes / neutres (mêmes neutralisations que la référence) */
html[data-app] .tg-ibtn,
html[data-app] .icon-btn,
html[data-app] .theme-btn,
html[data-app] .langsel,
html[data-app] .hamburger,
html[data-app] .hamb-btn,
html[data-app] .notif-bell-btn,
html[data-app] .car-btn,
html[data-app] .pw-toggle,
html[data-app] .drawer-theme-btn,
html[data-app] .close,
html[data-app] .btn-icon {
  width: 36px; height: 36px;
  min-width: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #e2e8f0 !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
html[data-app] .tg-ibtn::before,
html[data-app] .icon-btn::before,
html[data-app] .theme-btn::before,
html[data-app] .langsel::before,
html[data-app] .hamburger::before,
html[data-app] .hamb-btn::before,
html[data-app] .notif-bell-btn::before,
html[data-app] .car-btn::before,
html[data-app] .pw-toggle::before,
html[data-app] .close::before,
html[data-app] .btn-icon::before { display: none !important; }
html[data-app] .tg-ibtn:hover,
html[data-app] .icon-btn:hover,
html[data-app] .theme-btn:hover,
html[data-app] .langsel:hover,
html[data-app] .hamburger:hover,
html[data-app] .hamb-btn:hover,
html[data-app] .notif-bell-btn:hover,
html[data-app] .car-btn:hover,
html[data-app] .pw-toggle:hover { background: rgba(56, 189, 248, .18) !important; border-color: rgba(56, 189, 248, .55) !important; color: #fff !important; }

/* liens de navigation (drawer) */
html[data-app] .navbtn,
html[data-app] .dlink,
html[data-app] .drawer-nav a,
html[data-app] .drw-btn,
html[data-app] .drawer-row a,
html[data-app] .drawer-row button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--mut) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  white-space: normal;
  box-shadow: none !important;
  transition: background .2s, color .2s, transform .2s;
}
html[data-app] .navbtn::before,
html[data-app] .dlink::before,
html[data-app] .drawer-nav a::before,
html[data-app] .drw-btn::before,
html[data-app] .drawer-row a::before,
html[data-app] .drawer-row button::before { display: none !important; }
html[data-app] .navbtn:hover,
html[data-app] .dlink:hover,
html[data-app] .drawer-nav a:hover,
html[data-app] .drw-btn:hover,
html[data-app] .drawer-row a:hover,
html[data-app] .drawer-row button:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
  transform: translateX(3px);
  box-shadow: none !important;
}
html[data-app] .navbtn.on,
html[data-app] .dlink.on,
html[data-app] .drawer-nav a.active,
html[data-app] .navbtn.active {
  background: linear-gradient(90deg, rgba(245, 158, 11, .22), rgba(123, 47, 247, .14)) !important;
  border-color: rgba(245, 158, 11, .5) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -12px rgba(245, 158, 11, .9) !important;
}
html[data-app] .navbtn.on::after,
html[data-app] .navbtn.active::after {
  content: "";
  position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(#f59e0b, #ff2d95);
  box-shadow: 0 0 12px rgba(245, 158, 11, .9);
  animation: navBar .3s cubic-bezier(.22, 1.3, .36, 1);
}

/* petites actions type « chip » */
html[data-app] .tg-act,
html[data-app] .tg-chip,
html[data-app] .preset,
html[data-app] .chip {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11.4px !important;
  font-weight: 700 !important;
  background: rgba(245, 158, 11, .1) !important;
  border: 1px solid rgba(245, 158, 11, .28) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}
html[data-app] .tg-act::before,
html[data-app] .tg-chip::before,
html[data-app] .preset::before,
html[data-app] .chip::before { display: none !important; }
html[data-app] .tg-act:hover,
html[data-app] .tg-chip:hover,
html[data-app] .preset:hover,
html[data-app] .chip:hover { background: rgba(245, 158, 11, .22) !important; color: #fff !important; }


/* -------- 2 bis. CORRECTIFS DE COMPOSITION -------- */

/* sélecteur de langue : pastille compacte (jamais pleine largeur) */
html[data-app] select.langsel,
html[data-app] .langsel {
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
}

/* bouton d'encaissement flottant : garde son ancrage et sa forme */
html[data-app] .mz-fab {
  position: fixed !important;
  right: 14px !important;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  background: linear-gradient(180deg, #f8b73a, #f59e0b 62%, #e08a06) !important;
  color: #1c1102 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 34px -6px rgba(245, 158, 11, .7) !important;
  z-index: 2147482000;
}
html[data-app] .mz-fab::before { display: none !important; }

/* barre d'onglets basse : jamais en flux normal */
html[data-app] #bottomNav,
html[data-app] .pub-bnav {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
}

/* bandeau de catégories / filtres : puces défilantes */
html[data-app] .cats,
html[data-app] .chips {
  display: flex !important;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
html[data-app] .cats::-webkit-scrollbar,
html[data-app] .chips::-webkit-scrollbar { display: none; }
html[data-app] .cats .cat,
html[data-app] .chip,
html[data-app] .fav-chip {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  white-space: nowrap;
}
html[data-app] .cats .cat[aria-pressed="true"],
html[data-app] .cat.on,
html[data-app] .chip.on,
html[data-app] .chip.active {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: #140c02 !important;
  border-color: rgba(255, 255, 255, .35) !important;
}

/* vignette d'annonce : mêmes proportions que la référence */
html[data-app] .card { padding: 0 !important; overflow: hidden; }
html[data-app] .card > .card-img { position: relative; height: 184px; flex: none; background: #131f49; overflow: hidden; }
html[data-app] .card > .card-img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(transparent, rgba(10, 18, 48, .92)); pointer-events: none;
}
html[data-app] .card > .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ds-ease); }
html[data-app] .card:hover > .card-img img { transform: scale(1.05); }
html[data-app] .card-body, html[data-app] .card > .bd { padding: 14px !important; }
html[data-app] .card > .card-img + .card-body,
html[data-app] .card > .card-img + .bd { padding-top: 13px !important; }
html[data-app] .card .badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(7, 11, 22, .82) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #fcd34d !important;
  backdrop-filter: blur(6px);
  letter-spacing: .04em;
}
html[data-app] .card .badge::before { display: none !important; }
html[data-app] .card .badge i, html[data-app] .card .badge .feat { font-style: normal; }
html[data-app] .card .favbtn,
html[data-app] .favbtn {
  position: absolute !important; top: 9px; right: 9px; z-index: 2;
  width: 34px !important; height: 34px !important; min-width: 34px;
  padding: 0 !important; border-radius: 50% !important;
  background: rgba(7, 11, 22, .72) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  color: #fcd34d !important;
  font-size: 15px !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
}
html[data-app] .favbtn::before { display: none !important; }
html[data-app] .favbtn.on { background: rgba(245, 158, 11, .9) !important; color: #1c1102 !important; }
html[data-app] .card .price { position: relative; font-size: 18px; }

/* grille d'annonces */
html[data-app] .cards, html[data-app] .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 15px;
}
html[data-app] .hscroll {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  border: 0 !important;
  background: transparent !important;
}
html[data-app] .hscroll > * { scroll-snap-align: start; }


/* rangée wilaya / commune : deux colonnes égales, empilées sur mobile */
html[data-app] .selrow {
  display: grid !important;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 8px;
  align-items: end;
  margin-top: 10px;
}
html[data-app] .selrow > * { min-width: 0; }
@media (max-width: 640px) {
  html[data-app] .selrow { grid-template-columns: 1fr; }
}

/* boutons liens "clairs" éventuels : ramenés au style secondaire */
html[data-app] a.btn[style*="#fff"],
html[data-app] .btn[style*="background:#fff"] {
  background: linear-gradient(180deg, #151f46, #0b1229) !important;
  color: var(--txt) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}


/* sélecteur segmenté (Vente / Location) : l'actif passe en or */
html[data-app] button[aria-pressed] {
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 12.8px !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
}
html[data-app] button[aria-pressed="true"] {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #140c02 !important;
  box-shadow: 0 9px 22px -10px rgba(245, 158, 11, .9) !important;
}
html[data-app] button[aria-pressed]::before { display: none !important; }


/* sélecteur segmenté : largeur au contenu, jamais étiré */
html[data-app] .toggle {
  display: inline-flex !important;
  gap: 6px;
  width: auto !important;
  max-width: 100%;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
html[data-app] .toggle > button { flex: 0 0 auto !important; width: auto !important; min-width: 0; }

/* -------- 3. CHAMPS -------- */
html[data-app] input,
html[data-app] select,
html[data-app] textarea {
  width: 100%;
  padding: 11px 13px;
  margin: 4px 0 0;
  border-radius: var(--ds-r-in) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: #091026 !important;
  color: var(--txt) !important;
  font-size: 14.5px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-shadow: none;
}
html[data-app] input:focus,
html[data-app] select:focus,
html[data-app] textarea:focus {
  outline: none;
  border-color: rgba(245, 158, 11, .85) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .16) !important;
  background: #0d1838 !important;
}
html[data-app] input::placeholder,
html[data-app] textarea::placeholder { color: #6b7aa8; }
html[data-app] .lbl,
html[data-app] label.small {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9db0da;
  margin-top: 9px;
}
html[data-app] .field { margin-top: 10px; }
html[data-app] .pw-wrap { position: relative; display: block; }

/* switch (mêmes valeurs que la référence) */
html[data-app] .switch { position: relative; display: inline-block; width: 50px; height: 27px; flex: none; margin: 0 !important; }
html[data-app] .switch input { position: absolute; opacity: 0; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; pointer-events: none; }
html[data-app] .switch .sl {
  position: absolute; inset: 0; border-radius: 20px;
  background: #334155; border: 1px solid var(--line); transition: all .25s; cursor: pointer;
}
html[data-app] .switch .sl::before {
  content: ""; position: absolute; width: 19px; height: 19px; left: 3px; top: 3px;
  border-radius: 50%; background: #fff; transition: all .25s; box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
html[data-app] .switch input:checked + .sl { background: linear-gradient(90deg, #f59e0b, #ef4444); }
html[data-app] .switch input:checked + .sl::before { transform: translateX(23px); }

/* -------- 4. CARTES / SURFACES -------- */
html[data-app] .card,
html[data-app] .panel,
html[data-app] .kpi,
html[data-app] .item,
html[data-app] .agency-card,
html[data-app] .plan-card,
html[data-app] .choice,
html[data-app] .villa,
html[data-app] .detail,
html[data-app] .state,
html[data-app] .bubble,
html[data-app] .alert,
html[data-app] .modal,
html[data-app] .info,
html[data-app] .warn {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), var(--card) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-top-color: rgba(255, 255, 255, .2) !important;
  border-radius: var(--ds-r) !important;
  padding: var(--ds-pad) !important;
  margin: 13px 0;
  box-shadow: var(--deep) !important;
  color: var(--txt);
}
html[data-app] .card > * + *,
html[data-app] .panel > * + * { margin-top: 8px; }
html[data-app] .kpi { margin: 8px 0; padding: 13px !important; }
html[data-app] .item { margin: 9px 0; padding: 12px !important; }
html[data-app] .item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html[data-app] .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
html[data-app] .kpi b, html[data-app] .kpi strong { font-size: 21px; font-weight: 900; color: var(--gold2); }
html[data-app] .kpi-sub { font-size: 11.4px; color: var(--mut) !important; }
html[data-app] .sep { height: 1px; background: rgba(255, 255, 255, .09); margin: 10px 0; }
html[data-app] .spacer { flex: 1 1 auto; }

/* variantes d'alerte */
html[data-app] .alert.ok, html[data-app] .ok {
  background: linear-gradient(180deg, rgba(34, 197, 94, .16), rgba(34, 197, 94, .06)), var(--card) !important;
  border-color: rgba(34, 197, 94, .5) !important;
}
html[data-app] .alert.warn, html[data-app] .warn {
  background: linear-gradient(180deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .06)), var(--card) !important;
  border-color: rgba(245, 158, 11, .5) !important;
}
html[data-app] .alert.err, html[data-app] .err {
  background: linear-gradient(180deg, rgba(239, 68, 68, .18), rgba(239, 68, 68, .07)), var(--card) !important;
  border-color: rgba(239, 68, 68, .55) !important;
  color: #fecaca !important;
}

/* -------- 5. TAGS / BADGES (pastille lumineuse) -------- */
html[data-app] .tag,
html[data-app] .badge,
html[data-app] .state-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .24);
  background: #334155;
  color: #fff;
  box-shadow: none;
}
html[data-app] .tag::before,
html[data-app] .badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .9);
}
html[data-app] .tag.ok, html[data-app] .tag.PAYE, html[data-app] .tag.ACTIVE,
html[data-app] .badge.ok, html[data-app] .tag.green { background: #15803d; border-color: rgba(255, 255, 255, .24); }
html[data-app] .tag.warn, html[data-app] .tag.EN_ATTENTE, html[data-app] .tag.PENDING,
html[data-app] .badge.warn { background: #b45309; }
html[data-app] .tag.bad, html[data-app] .tag.REJETE, html[data-app] .tag.REJECTED,
html[data-app] .tag.red, html[data-app] .badge.bad { background: #b91c1c; }
html[data-app] .tag.blue, html[data-app] .badge.blue { background: #1d4ed8; }
html[data-app] .nbadge {
  font-size: 10.5px; font-weight: 900; background: #ef4444; color: #fff;
  border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center; letter-spacing: 0;
}

/* -------- 6. ONGLETS (tabs / bottom-nav) -------- */
html[data-app] .tabs,
html[data-app] .legal-tabs,
html[data-app] .hscroll {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow-x: auto;
  scrollbar-width: none;
}
html[data-app] .tabs::-webkit-scrollbar,
html[data-app] .hscroll::-webkit-scrollbar { display: none; }
html[data-app] .tab,
html[data-app] .tabs button,
html[data-app] .legal-tab,
html[data-app] .langs button {
  flex: none;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  white-space: nowrap;
}
html[data-app] .tab::before,
html[data-app] .tabs button::before,
html[data-app] .legal-tab::before { display: none !important; }
html[data-app] .tab.on,
html[data-app] .tab.active,
html[data-app] .tabs button.on,
html[data-app] .tabs button.active,
html[data-app] .legal-tab.on {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: #140c02 !important;
  border-color: rgba(255, 255, 255, .35) !important;
}
html[data-app] .tabbtn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px 6px !important;
  border-radius: 13px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--mut) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
html[data-app] .tabbtn::before { display: none !important; }
html[data-app] .tabbtn i { font-style: normal; font-size: 17px; line-height: 1; transition: transform .28s cubic-bezier(.22, 1.5, .36, 1); }
html[data-app] .tabbtn.on,
html[data-app] .tabbtn.active {
  background: linear-gradient(180deg, rgba(245, 158, 11, .26), rgba(123, 47, 247, .16)) !important;
  border-color: rgba(245, 158, 11, .55) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -12px rgba(245, 158, 11, 1) !important;
}
html[data-app] .tabbtn.on i { transform: translateY(-3px) scale(1.15); }

/* barre de navigation basse (verre dépoli) */
html[data-app] #bottomNav,
html[data-app] .pub-bnav,
html[data-app] .bnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  gap: 4px;
  background: rgba(7, 11, 22, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, .11);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}


/* -------- 6 bis. BARRE D'ONGLETS BASSE (app publique) -------- */
html[data-app] nav.bottomnav {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 50 !important;
  background: rgba(7, 11, 22, .94) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, .11) !important;
  border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .55);
  overflow: visible;
}
html[data-app] .bottomnav-inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 3px;
  max-width: 720px;
  margin: 0 auto;
}
html[data-app] .bottomnav .navbtn {
  position: relative;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  gap: 2px !important;
  text-align: center !important;
  padding: 6px 3px 5px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #93a3cf !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transform: none !important;
}
html[data-app] .bottomnav .navbtn::after { display: none !important; }
html[data-app] .bottomnav .navbtn .ic {
  font-size: 16px !important;
  line-height: 1.1;
  transition: transform .28s cubic-bezier(.22, 1.5, .36, 1);
}
html[data-app] .bottomnav .navbtn:hover { color: #fff !important; background: rgba(255, 255, 255, .05) !important; }
html[data-app] .bottomnav .navbtn.on,
html[data-app] .bottomnav .navbtn.active,
html[data-app] .bottomnav .navbtn[aria-current] {
  background: linear-gradient(180deg, rgba(245, 158, 11, .26), rgba(123, 47, 247, .16)) !important;
  border-color: rgba(245, 158, 11, .55) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -12px rgba(245, 158, 11, 1) !important;
}
html[data-app] .bottomnav .navbtn.on .ic { transform: translateY(-2px) scale(1.12); }
@media (max-width: 760px) {
  html[data-app] body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* bouton neutre par défaut : le secondaire est le style « ghost » */
html[data-app] .btn:not(.btn-gold):not(.btn-primary):not(.btn-ok):not(.btn-accept):not(.btn-green):not(.btn-blue):not(.btn-info):not(.btn-danger):not(.btn-reject):not(.btn-logout):not(.btn-wa):not(.btn-navy):not(.btn-dark):not(.btn-line):not(.btn-ghost) {
  background: linear-gradient(180deg, #151f46, #0b1229) !important;
  color: var(--txt) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .9) !important;
}

/* -------- 7. DRAWER (menu latéral) -------- */
html[data-app] #drawer,
html[data-app] aside.drawer,
html[data-app] .drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  z-index: 92;
  background: linear-gradient(180deg, #0f1938, #070b18) !important;
  border-left: 1px solid rgba(245, 158, 11, .42) !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, .8) !important;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  transform: translateX(104%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.22, .9, .3, 1), visibility 0s linear .28s;
}
html[data-app] #drawer.open,
html[data-app] #drawer.show,
html[data-app] aside.drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .28s cubic-bezier(.22, .9, .3, 1), visibility 0s;
}
html[data-app] .drawer-head,
html[data-app] .drw-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
html[data-app] .drawer-logo { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .16); }
html[data-app] .drawer-nav { display: flex; flex-direction: column; gap: 4px; }
html[data-app] .drawer-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
html[data-app] .drawer-row { display: flex; align-items: center; gap: 8px; }
html[data-app] .drw-sec {
  font-size: 10px; font-weight: 900; letter-spacing: .13em;
  text-transform: uppercase; color: #7f92c4; margin: 10px 4px 2px;
}

/* -------- 8. MODALES / FEUILLES -------- */
html[data-app] .modal-bg,
html[data-app] .mz-sheet-wrap {
  background: rgba(3, 6, 16, .78) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 150;
}
/* voile du menu : toujours SOUS le drawer, sinon le menu paraît éteint */
html[data-app] .mz-overlay,
html[data-app] #drawerOverlay,
html[data-app] .drawer-overlay,
html[data-app] #pubBackdrop {
  background: rgba(3, 6, 16, .58) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90 !important;
}
html[data-app] #drawer,
html[data-app] aside.drawer { z-index: 92 !important; }
html[data-app] .modal,
html[data-app] .mz-sheet,
html[data-app] .cam-card {
  max-width: 740px;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 20px !important;
  margin: 0;
  border-radius: 20px !important;
  animation: modalIn .28s cubic-bezier(.22, .9, .3, 1.1) both;
}
html[data-app] .mz-sheet { border-top-left-radius: 22px !important; border-top-right-radius: 22px !important; }
html[data-app] .mz-grab { width: 44px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); margin: 0 auto 12px; }
html[data-app] .mz-method {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 13px !important;
  color: var(--txt) !important;
  box-shadow: none !important;
  padding: 11px 12px !important;
  font-weight: 800 !important;
}
html[data-app] .mz-method::before { display: none !important; }
html[data-app] .mz-method.active {
  background: linear-gradient(180deg, rgba(245, 158, 11, .24), rgba(245, 158, 11, .08)) !important;
  border-color: rgba(245, 158, 11, .65) !important;
  color: #fff !important;
}

/* -------- 9. TOASTS -------- */
html[data-app] #toast,
html[data-app] .mz-toast,
html[data-app] .toast {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%) translateY(90px);
  background: #0a1230 !important;
  border: 1px solid var(--ok) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 11px 18px !important;
  z-index: 220;
  opacity: 0;
  pointer-events: none;
  font-weight: 700;
  font-size: 13.4px;
  max-width: 92vw;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .65) !important;
}
html[data-app] #toast.show,
html[data-app] .mz-toast.show,
html[data-app] .toast.show,
html[data-app] .toast.ok { opacity: 1; transform: translateX(-50%) translateY(0); animation: toastPop .45s cubic-bezier(.22, 1.35, .36, 1); }
html[data-app] .toast.err { border-color: var(--bad) !important; }
html[data-app] .toast-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 220; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }

/* -------- 10. HERO + pastilles -------- */
html[data-app] .hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(#070b16, #0b1330) !important;
}
html[data-app] .hero::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(closest-side at 22% 18%, rgba(245, 158, 11, .30), transparent 70%),
    radial-gradient(closest-side at 82% 78%, rgba(123, 47, 247, .30), transparent 70%);
  filter: blur(6px);
  animation: kenburns 26s ease-in-out infinite alternate;
  pointer-events: none;
}
html[data-app] .hero > * { position: relative; z-index: 2; }
html[data-app] .hero-pill,
html[data-app] .badge-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(245, 158, 11, .15);
  border: 1px solid rgba(245, 158, 11, .45);
  color: #fcd34d; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px;
}
html[data-app] .hbadge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(10, 18, 48, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px; color: #e2e8f0; font-weight: 600;
  backdrop-filter: blur(6px);
}
html[data-app] .hero-logo { width: 74px; height: 74px; border-radius: 18px; object-fit: cover; box-shadow: 0 14px 34px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .14); }
html[data-app] .price { color: var(--gold2) !important; font-weight: 900; }

/* topbar verre dépoli */
html[data-app] .topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7, 11, 22, .92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
html[data-app] .topbar-inner { display: flex; align-items: center; gap: 9px; }
html[data-app] .brand b { font-weight: 900; letter-spacing: -.02em; }

/* indicateur de chargement */
html[data-app] .spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: var(--gold);
  animation: mzspin .7s linear infinite;
}
@keyframes mzspin { to { transform: rotate(360deg); } }
html[data-app] .skel {
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .11), rgba(255, 255, 255, .05));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* effet d'onde (ripple) des boutons */
html[data-app] .ripple,
html[data-app] .mz-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, .55);
  animation: rip .6s ease-out forwards;
}


/* -------- 10 bis. PAGE PUBLIQUE : composition de référence -------- */
html[data-app] .hero { padding: 34px 16px 22px !important; }
html[data-app] .hero-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
html[data-app] .hero h1 { font-size: clamp(24px, 4.4vw, 40px); line-height: 1.08; letter-spacing: -.03em; max-width: 760px; text-shadow: 0 4px 24px rgba(0, 0, 0, .65); margin: 2px 0 0; }
html[data-app] .hero h1 b.g,
html[data-app] .hero h1 .g {
  font-weight: 900;
  background: linear-gradient(100deg, #fbbf24, #f59e0b 55%, #ffb547);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fbbf24;
}
html[data-app] .hero-sub { color: #cbd5e1 !important; font-size: 14.2px; max-width: 660px; margin-top: 9px; }
html[data-app] .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
html[data-app] .hero h1 span { display: inline; }

/* bloc de recherche encadré (verre dépoli + liseré or) */
html[data-app] .search {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(20, 31, 68, .88), rgba(10, 17, 40, .94)) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-top-color: rgba(245, 158, 11, .45) !important;
  border-radius: 20px !important;
  padding: 15px 15px 17px !important;
  max-width: 1120px;
  margin: 18px auto 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
  animation: cardIn .32s var(--ds-ease) both;
}
html[data-app] .search-row {
  display: grid;
  grid-template-columns: 190px 200px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: end;
}
html[data-app] .search-row .lbl { margin-top: 0; }
html[data-app] .search-row .toggle { display: flex; gap: 6px; margin-top: 4px; }
html[data-app] .search-row > div { min-width: 0; }
html[data-app] .search .cats { margin-top: 4px; padding-top: 10px; }
html[data-app] .search-actions { display: flex; gap: 9px; margin-top: 11px; }
html[data-app] .search-actions .btn { flex: 1 1 auto; }
html[data-app] .search-actions .btn-ghost { flex: 0 1 220px; }
html[data-app] .sell-link {
  display: inline-flex;
  margin-bottom: 2px;
  line-height: 1.5; align-items: center; gap: 6px;
  margin-top: 11px; font-size: 12.8px; font-weight: 800;
  color: #fcd34d !important; text-decoration: none;
  border-bottom: 1px dashed rgba(245, 158, 11, .45);
  padding-bottom: 1px;
}
html[data-app] .sell-link:hover { color: #fff !important; border-color: #fff; }
@media (max-width: 980px) {
  html[data-app] .search-row { grid-template-columns: 1fr 1fr; }
  html[data-app] .search-kw { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  html[data-app] .search-row { grid-template-columns: 1fr; gap: 8px; }
  html[data-app] .search-actions { flex-direction: column; }
  html[data-app] .search-actions .btn-ghost { flex: 1 1 auto; }
  html[data-app] .hero-badges .hbadge { font-size: 11.4px; }
}

/* -------- 11. ANIMATIONS (clés identiques à la référence) -------- */
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes modalIn { from { opacity: 0; transform: scale(.9) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes rip { from { transform: scale(0); opacity: .65; } to { transform: scale(2.6); opacity: 0; } }
@keyframes toastPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(84px) scale(.88); }
  62% { opacity: 1; transform: translateX(-50%) translateY(-7px) scale(1.03); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes tgPop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes navBar { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulseB { 0%, 100% { box-shadow: 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 0 26px rgba(245, 158, 11, .45); } }
@keyframes drawerSlideIn { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: none; } }

/* application des animations sur nos composants */
html[data-app] .card,
html[data-app] .panel,
html[data-app] .kpi,
html[data-app] .item,
html[data-app] .agency-card,
html[data-app] .plan-card,
html[data-app] .choice,
html[data-app] .villa {
  animation: cardIn .3s var(--ds-ease) both;
}
html[data-app] .card:nth-child(2), html[data-app] .item:nth-child(2), html[data-app] .kpi:nth-child(2) { animation-delay: .04s; }
html[data-app] .card:nth-child(3), html[data-app] .item:nth-child(3), html[data-app] .kpi:nth-child(3) { animation-delay: .08s; }
html[data-app] .card:nth-child(4), html[data-app] .item:nth-child(4), html[data-app] .kpi:nth-child(4) { animation-delay: .12s; }
html[data-app] .card:nth-child(5), html[data-app] .item:nth-child(5) { animation-delay: .16s; }
html[data-app] .view,
html[data-app] .page { animation: pageIn .28s var(--ds-ease) both; }
html[data-app] .hero h1,
html[data-app] .hero .hero-logo,
html[data-app] .hero p,
html[data-app] .hero .hero-sub { animation: riseIn .8s var(--ds-ease) both; }
html[data-app] .hero .hero-logo { animation-delay: .05s; }
html[data-app] .hero h1 { animation-delay: .1s; }
html[data-app] .hero p, html[data-app] .hero .hero-sub { animation-delay: .18s; }
html[data-app] .tag, html[data-app] .badge { animation: tgPop .2s var(--ds-ease) both; }
html[data-app] .mz-phone { animation: tgPop .2s var(--ds-ease) both; }

@media (prefers-reduced-motion: reduce) {
  html[data-app] .card, html[data-app] .panel, html[data-app] .kpi, html[data-app] .item,
  html[data-app] .agency-card, html[data-app] .plan-card, html[data-app] .choice,
  html[data-app] .villa, html[data-app] .view, html[data-app] .page,
  html[data-app] .hero::before, html[data-app] .tag, html[data-app] .badge {
    animation: none !important;
  }
}

/* -------- 12. RESPONSIVE -------- */
@media (max-width: 760px) {
  html[data-app] .grid2, html[data-app] .cols2, html[data-app] .r2 { grid-template-columns: 1fr !important; }
  html[data-app] .rowflex { flex-wrap: wrap; }
  html[data-app] .card, html[data-app] .panel { padding: 14px !important; border-radius: 16px !important; }
  html[data-app] #drawer, html[data-app] aside.drawer { width: min(305px, 85vw); }
  html[data-app] .btn { flex: 1 1 auto; }
}
@media (min-width: 761px) {
  html[data-app] .pub-bnav, html[data-app] .bnav { display: none; }
}