/* ============================================================
   Hub v780 — APPARENCE (agent apparence-menu, 08/11)
   Theme « Hub » (defaut) = noir + orange, le meme rendu que la demo :
     html[data-theme="neutre"][data-look="hub"] (base Neutre + accent orange sur toutes les plateformes).
   Theme « Neutre » = html[data-theme="neutre"] sans data-look (gris / blanc).
   Theme « Clair », « Classique (OG) » (ancien violet), « Halloween » (refait ici).
   + corrections communes : voile « Bientot » (Inventaire), Guide Vinted, Retours & idees, menu Depop / Leboncoin,
     roue des Prereglages (Automatisations), page Recuperation de compte, Logiciels (Chrome Web Store).
   ============================================================ */

/* ---------- theme Hub : noir + orange (meme accent quelle que soit la plateforme) ---------- */
:root[data-look="hub"][data-theme="neutre"][data-platform] {
  --accent: #FF8A5B; --accent-hover: #ff9d74; --accent-soft: #ffc2a8; --accent-rgb: 255, 138, 91; --accent2-rgb: 255, 138, 91;
  --accent-dim: rgba(255, 138, 91, .15);
  --bg-primary: #050505; --bg-secondary: #0a0a0a; --bg-card: #101010; --bg-hover: #1a1a1a; --bg-input: #0c0c0c;
  --border: rgba(255,255,255,0.08); --border-light: rgba(255,255,255,0.14);
  --text-primary: #f5f5f5; --text-secondary: #a1a1a1; --text-muted: #626262;
}
:root[data-look="hub"] { --up: #34d399; --down: #f87171; --up-rgb: 52,211,153; --down-rgb: 248,113,113; }
:root[data-look="hub"] .btn-primary, :root[data-look="hub"] .login-tab.active {
  background: linear-gradient(180deg, #ff9a70, #f2733f) !important; color: #140a05 !important; border: 0;
  box-shadow: 0 0 0 1px rgba(255,138,91,.35), 0 8px 22px -8px rgba(255,120,60,.55) !important;
}
:root[data-look="hub"] .btn-primary:hover { filter: brightness(1.06); }
:root[data-look="hub"] .btn-primary:disabled { filter: grayscale(.6) brightness(.7); }
:root[data-look="hub"] .nav-item .badge { color: #140a05; }
/* elements « actifs » qui etaient blancs en Neutre -> accent orange */
:root[data-look="hub"] :is(.rt-seg button.on, .rta-chip.on, .nfx-seg button.on, .snd-seg button.on, .au-af button.on, .hd-b.hd-ok) {
  background: var(--accent) !important; color: #140a05 !important; border-color: var(--accent) !important;
}
:root[data-look="hub"] .conv-item.active { background: linear-gradient(90deg, rgba(255,138,91,.16), rgba(255,138,91,.03)) !important; box-shadow: inset 0 0 0 1px rgba(255,138,91,.28) !important; }
:root[data-look="hub"] #ac-banner button.go { background: var(--accent) !important; border-color: var(--accent) !important; color: #140a05 !important; }
/* restes « bleu nuit / bleu Vinted » codes en dur dans des blocs qui ne sont pas propres a Vinted */
:root[data-look="hub"] :is(.ai2-own, .sp-box, .pz-c.ref) { background: rgba(255,138,91,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,138,91,.22) !important; }
:root[data-look="hub"] .sp-cell { background: rgba(255,138,91, calc(.05 + var(--a, 0) * .4)) !important; }
:root[data-look="hub"] .ss-bw i { background: linear-gradient(180deg, #ffb08f, #e0602c) !important; box-shadow: 0 0 12px rgba(255,138,91,.25) !important; }
:root[data-look="hub"] .nw-qs .nw-rm.s-en_cours > i { background: var(--accent) !important; box-shadow: 0 0 10px var(--accent) !important; }
:root[data-look="hub"] .nw-qs .nw-rm.s-en_cours em { color: var(--accent) !important; }
:root[data-look="hub"] .ac-hero { background: radial-gradient(120% 140% at 0% 0%, rgba(255,138,91,.13), transparent 55%), var(--bg-card) !important; }
:root[data-look="hub"] .ac-bar i { background: linear-gradient(90deg, #ffb08f, #ff8a5b) !important; box-shadow: 0 0 12px rgba(255,138,91,.5) !important; }
:root[data-look="hub"] .ov-wallet { background: radial-gradient(120% 160% at 0% 0%, rgba(255,138,91,.14), transparent 55%), var(--bg-card) !important; }
:root[data-look="hub"] :is(.ln-box, .lot-card) { background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,138,91,.05)) !important; box-shadow: inset 0 0 0 1px rgba(255,138,91,.22) !important; }
:root[data-look="hub"] .vd-dayhead { background: linear-gradient(135deg, rgba(255,138,91,.12), rgba(255,255,255,.03)) !important; }
:root[data-look="hub"] .pk-prog i { background: linear-gradient(90deg, #34d399, #ff8a5b) !important; }
:root[data-look="hub"] .hs-menu { background: linear-gradient(180deg, rgba(26,26,26,.96), rgba(12,12,12,.98)) !important; }
:root[data-look="hub"] .acc-kind.pro { background: rgba(255,138,91,.16) !important; color: #ffc2a8 !important; border-color: rgba(255,138,91,.4) !important; }
:root[data-look="hub"] .hu-tip { background: linear-gradient(160deg, #1f1f1f, #0b0b0b) !important; }
:root[data-look="hub"] .hub-logo b { text-shadow: 0 0 18px rgba(255,138,91,.35); }
/* Theme Neutre : vraiment gris / blanc (aucune lueur coloree) */
:root[data-theme="neutre"]:not([data-look]) body.hub-app { background: radial-gradient(1100px 620px at 92% -12%, rgba(255,255,255,.06), transparent 62%), #000; background-attachment: fixed; }

/* ---------- vignettes des themes (Parametres > Apparence) ---------- */
.hub-th small.hub-th-def { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(var(--accent-rgb), .16); color: var(--accent); vertical-align: 1px; }

/* ---------- Halloween refait ---------- */
:root[data-theme="halloween"][data-platform] { --accent: #ff6a00; --accent-hover: #ff8a2a; --accent-soft: #ffb37a; --accent-rgb: 255, 106, 0; --accent2-rgb: 193, 18, 31; }
:root[data-theme="halloween"] .nav-item .badge { background: #ff6a00 !important; color: #1a0503 !important; box-shadow: 0 0 10px rgba(255,106,0,.6) !important; }
:root[data-theme="halloween"] .nav-item.active svg { color: #ffb37a !important; filter: drop-shadow(0 0 6px rgba(255,106,0,.7)) !important; }
:root[data-theme="halloween"] .sidebar-header::after { content: none !important; }
:root[data-theme="halloween"] .sidebar-header .hub-logo .lp-mark { box-shadow: inset 0 1px 0 rgba(255,200,150,.2), 0 0 18px rgba(255,106,0,.55) !important; border-color: rgba(255,106,0,.45) !important; }
:root[data-theme="halloween"] .page-header h1 { font-size: 34px !important; animation: none !important; }
:root[data-theme="halloween"] .hw-spider::after { content: '' !important; width: 14px; height: 12px; left: -7px; bottom: -10px; border-radius: 50% 50% 45% 45%; background: #1a0a0a; box-shadow: 0 0 0 1px rgba(255,106,0,.35), -5px -2px 0 -4px #1a0a0a, 5px -2px 0 -4px #1a0a0a; }
:root[data-theme="halloween"] .hw-web { opacity: .45 !important; }
:root[data-theme="halloween"] :is(.btn-primary, .hd-b.hd-ok, .nf2-all)::after { transform: scaleY(.35); }
:root[data-theme="halloween"] :is(.vd-card, .settings-card, .stat-card, .vd-kpi) { backdrop-filter: none !important; }
:root[data-theme="halloween"] .hub-th i[style*="#0a0304"] { box-shadow: inset 0 0 0 1px rgba(255,106,0,.4); }

/* ---------- voile « Bientot disponible » (Inventaire et autres pages en preparation) ---------- */
/* avant : position fixe calee sur la largeur du menu -> decale des que la page est animee (capture 6b8a6a0c) */
.page > .hub-wip { position: absolute !important; inset: 0 !important; left: 0 !important; align-items: flex-start !important; padding: 70px 24px 24px !important; border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.82)) !important; backdrop-filter: blur(7px) saturate(.6); -webkit-backdrop-filter: blur(7px) saturate(.6); }
.page > .hub-wip .hub-wip-c { background: linear-gradient(160deg, rgba(30,30,30,.92), rgba(12,12,12,.95)) !important; box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(var(--accent-rgb), .22) !important; }
.page > .hub-wip .hub-wip-c h2 em { color: var(--accent); }
:root[data-theme="clair"] .page > .hub-wip { background: linear-gradient(180deg, rgba(243,245,249,.6), rgba(243,245,249,.88)) !important; }
:root[data-theme="clair"] .page > .hub-wip .hub-wip-c { background: #fff !important; color: #0d1220; box-shadow: 0 30px 90px rgba(15,23,42,.18), inset 0 0 0 1px rgba(15,23,42,.08) !important; }
:root[data-theme="clair"] .page > .hub-wip .hub-wip-t span { background: rgba(15,23,42,.05); color: #0d1220; }

/* ---------- Guide Vinted : couleurs du theme (avant : fond noir brut, capture 5e32f8f1) ---------- */
#page-guide { --gv-bg: transparent; --gv-card: var(--bg-card); --gv-card2: var(--bg-hover); --gv-line: var(--border); --gv-line2: var(--border-light); --gv-tx: var(--text-primary); --gv-tx2: var(--text-secondary); --gv-tx3: var(--text-muted); --gv-hi: var(--text-primary); }
html.gv-on #hub-bg { opacity: 1 !important; }
html.gv-on body { background: unset; }
#page-guide .gv-wrap { margin: 0 !important; max-width: 1240px; }
#page-guide .gv-step, #page-guide .gv-toc { background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--bg-card) !important; }
:root[data-theme="clair"] #page-guide .gv-step, :root[data-theme="clair"] #page-guide .gv-toc { background: #fff !important; }
#page-guide .gv-toc a.on { background: rgba(var(--accent-rgb), .12) !important; color: var(--text-primary) !important; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .28); }
#page-guide :is(.gv-toc a.done .n, .gv-step.done .gv-num, .gv-chk.on) { background: var(--accent) !important; border-color: var(--accent) !important; color: #140a05 !important; }
#page-guide .gv-bar i { background: linear-gradient(90deg, rgba(var(--accent-rgb), .55), var(--accent)) !important; }
#page-guide .gv-scroll i { background: var(--accent) !important; }
#page-guide :is(code, .gv-k, .gv-btn-n) { background: var(--bg-hover) !important; color: var(--text-primary) !important; }

/* ---------- Depop / Leboncoin pas encore ouverts : seulement la page « Le Hub arrive » + les onglets communs ---------- */
html.pf-soon .sidebar .nav-section.lk-plat { display: none !important; }

/* ---------- Automatisations : la barre « Prereglages » devient une petite roue (bas droite du bloc des onglets) ---------- */
#au-root .au-pre { display: none !important; }
#au-root .au-tabs { position: relative; }
.lk-gear { position: absolute; right: 8px; bottom: 7px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--text-secondary); cursor: pointer; transition: color .2s, border-color .2s, transform .4s cubic-bezier(.16,1,.3,1); z-index: 2; padding: 0; }
.lk-gear:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); transform: rotate(40deg); }
.lk-pre-ov { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: lkIn .2s ease; }
@keyframes lkIn { from { opacity: 0; } }
.lk-pre { width: min(460px, 100%); border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--bg-card); border: 1px solid var(--border-light); box-shadow: 0 30px 90px rgba(0,0,0,.6); padding: 20px; color: var(--text-primary); }
:root[data-theme="clair"] .lk-pre { background: #fff; }
.lk-pre h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.lk-pre h3 svg { color: var(--accent); }
.lk-pre p { margin: 0 0 14px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.lk-pre .lk-pre-l { display: grid; gap: 8px; }
.lk-pre .lk-pre-l button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 11px 14px !important; border-radius: 12px !important; font: inherit; }
.lk-pre .lk-pre-l button small { font-size: 11.5px; font-weight: 400; color: var(--text-secondary); opacity: .9; }
.lk-pre .lk-pre-l .btn-primary small { color: inherit; opacity: .75; }
.lk-pre .lk-pre-x { float: right; border: 0; background: none; color: var(--text-secondary); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }

/* ---------- Recuperation de compte : vraie page « en preparation » ---------- */
.lk-prep { max-width: 980px; display: grid; gap: 14px; margin-top: 6px; }
.lk-prep-hero { position: relative; overflow: hidden; padding: 24px 26px; border-radius: 20px; border: 1px solid var(--border); background: radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), .12), transparent 55%), var(--bg-card); }
.lk-prep-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 4px 11px; border-radius: 999px; background: rgba(var(--accent-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3); }
.lk-prep-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.lk-prep-hero h2 { margin: 12px 0 6px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.lk-prep-hero p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; max-width: 760px; }
.lk-prep-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .lk-prep-g { grid-template-columns: 1fr; } }
.lk-prep-c { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); }
.lk-prep-c b { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.lk-prep-c b span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: 12px; font-weight: 700; }
.lk-prep-c ul { margin: 0; padding-left: 17px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.lk-prep-n { padding: 14px 18px; border-radius: 14px; border: 1px dashed var(--border-light); font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.lk-prep-n b { color: var(--text-primary); }
#page-unban.tu-soon-only > .tu-banner.lk-hide { display: none !important; }

/* ---------- Logiciels : installation depuis le Chrome Web Store ---------- */
.lk-store { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 18px 20px; margin: 0 0 14px; border-radius: 18px; border: 1px solid rgba(var(--accent-rgb), .3); background: radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-rgb), .12), transparent 60%), var(--bg-card); }
.lk-store-t { flex: 1 1 320px; min-width: 0; }
.lk-store-t b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 4px; }
.lk-store-t span { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.lk-store a.btn-primary { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.xt-actions.lk-zip { opacity: .92; }
#page-extension .xt-actions.lk-zip .extension-download-btn { background: transparent !important; color: var(--text-primary) !important; border: 1px solid var(--border-light) !important; box-shadow: none !important; }
#page-extension .xt-actions.lk-zip .extension-download-btn:hover { border-color: rgba(var(--accent-rgb), .5) !important; }
.lk-zip-t { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 6px 0 8px; }

/* ---------- Retours & idees : couleurs du theme ---------- */
.rt-seg button.on { background: rgba(var(--accent-rgb), .16) !important; color: var(--text-primary) !important; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45) !important; }
:root[data-look="hub"] .rt-seg button.on { background: var(--accent) !important; color: #140a05 !important; box-shadow: 0 4px 14px rgba(255,138,91,.25) !important; }
.rt-card { background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--bg-card) !important; }
.rt-card h3 svg, .rt-k i { color: var(--accent); }
.rt-k { background: radial-gradient(120% 140% at 100% 0%, rgba(var(--accent-rgb), .08), transparent 60%), var(--bg-card) !important; }
.rt-drop { border-color: rgba(var(--accent-rgb), .3) !important; }
:root[data-theme="clair"] .rt-card, :root[data-theme="clair"] .rt-k { background: #fff !important; }

/* ---------- bouton « Voir le tutoriel » (discret, seulement quand une video existe) ---------- */
.tu-btn { font-size: 12px !important; font-weight: 500 !important; padding: 5px 11px 5px 7px !important; opacity: .85; border-color: var(--border-light) !important; }
.tu-btn:hover { opacity: 1; border-color: rgba(var(--accent-rgb), .5) !important; color: var(--accent) !important; }

/* ---------- Compte assiste : boutons au theme (avant : blanc code en dur) ---------- */
:root[data-look="hub"] #as-root .as-go:not([disabled]) { background: linear-gradient(180deg, #ff9a70, #f2733f); color: #140a05; }
:root[data-look="hub"] #as-root .as-seg button.on { background: var(--accent); color: #140a05; }
:root[data-look="hub"] #as-root .as-row.open { border-color: rgba(255,138,91,.4) !important; }

/* ---------- fenetres et bulles encore « bleu nuit » (ancien theme Hub) -> anthracite en Hub et Neutre ---------- */
:root[data-theme="neutre"] :is(.hu-t-card, .xt-pop-card, .hd-pop, .pg-modal, .pf-m, .pf-crop, .nt-pop, .hg-cf-b, .hd-box, .hs-menu) {
  background: linear-gradient(160deg, rgba(30,30,30,.97), rgba(11,11,11,.98)) !important;
}
:root[data-theme="neutre"] .hu-toast.in { background: rgba(0,0,0,.42); }
:root[data-theme="neutre"] .hu-t-card { box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.09), 0 0 50px rgba(var(--accent-rgb), .14) !important; }
:root[data-theme="neutre"] .page > .hub-wip .hub-wip-p { color: var(--text-primary); background: rgba(var(--accent-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3); }

/* ---------- theme Clair : les 2 premiers chiffres du Dashboard etaient blancs sur fond blanc ---------- */
:root[data-theme="clair"] .vd-kpi:first-child .vd-kpi-v, :root[data-theme="clair"] .vd-kpi:nth-child(2) .vd-kpi-v { color: var(--text-primary) !important; text-shadow: none !important; }
:root[data-theme="clair"] .vd-kpi-v { text-shadow: none !important; }

/* ---------- telephone : barre du haut et bandeau « Installe l'appli » (bleu nuit avant) ---------- */
@media (max-width: 768px) {
  :root[data-theme="neutre"] .mobile-topbar { background: rgba(8,8,8,.86) !important; border-bottom: 1px solid var(--border); }
}
:root[data-theme="neutre"] .pwa-bar { background: rgba(20,20,20,.96) !important; box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08) !important; }
:root[data-look="hub"] .pwa-bar button:not(.x) { background: var(--accent) !important; color: #140a05 !important; }