/* ============================================================
   Hub — theme HALLOWEEN (html[data-theme="halloween"])
   ============================================================ */
:root[data-theme="halloween"] {
  --bg-primary: #0a0405; --bg-secondary: rgba(16,6,7,.88); --bg-card: rgba(24,8,9,.72); --bg-hover: rgba(193,18,31,.12); --bg-input: rgba(30,10,10,.8);
  --border: rgba(255,90,40,.14); --border-light: rgba(255,110,50,.28);
  --text-primary: #f5e6dc; --text-secondary: #d4b5a6; --text-muted: #9b7a6c;
  --accent: #ff6a00; --accent-hover: #ff8a2a; --accent-soft: #ffb37a; --accent-rgb: 255, 106, 0; --accent2-rgb: 193, 18, 31; --accent-dim: rgba(255,106,0,.15);
  --green: #9be15d; --red: #ff2a3d; --yellow: #ffb000;
  --hw-blood: #a10d1c; --hw-blood2: #5e0611;
  color-scheme: dark;
}
:root[data-theme="halloween"] body.hub-app { background: #070203; }
#hw-bg { display: none; }
:root[data-theme="halloween"] #hw-bg { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
:root[data-theme="halloween"] #hub-bg { display: none !important; }
@media (min-width: 769px) { :root[data-theme="halloween"] body.hub-app > .sidebar, :root[data-theme="halloween"] body.hub-app > .main { position: relative; z-index: 1; } }
:root[data-theme="halloween"] body.hub-app > .main { position: relative; z-index: 1; }

/* polices */
:root[data-theme="halloween"] .page-header h1, :root[data-theme="halloween"] .ovm-head h1, :root[data-theme="halloween"] .ac2-ht h2, :root[data-theme="halloween"] .sidebar-header .logo-text, :root[data-theme="halloween"] .nf2-hx b {
  font-family: 'Creepster', system-ui, sans-serif !important; letter-spacing: .04em; font-weight: 400 !important; color: #ff7a1a; -webkit-text-fill-color: #ff7a1a;
  text-shadow: 0 0 18px rgba(255,90,0,.55), 0 2px 0 #4a0508; animation: hwFlicker 6s infinite;
}
:root[data-theme="halloween"] .page-header h1 { font-size: 40px !important; }
@keyframes hwFlicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }

/* barre laterale : bois brule + bougie sur l'element actif */
:root[data-theme="halloween"] .sidebar { background: linear-gradient(180deg, rgba(22,6,6,.94), rgba(10,3,4,.96)) !important; border-right: 1px solid rgba(255,90,40,.15) !important; box-shadow: 10px 0 40px rgba(0,0,0,.6); }
:root[data-theme="halloween"] .nav-item { transition: color .25s, background .25s; }
:root[data-theme="halloween"] .nav-item:hover { color: #ffb37a; background: rgba(255,90,0,.08); }
:root[data-theme="halloween"] .nav-item.active { color: #fff !important; background: linear-gradient(90deg, rgba(193,18,31,.45), rgba(255,106,0,.08)) !important; box-shadow: inset 3px 0 0 #ff6a00, 0 0 22px rgba(255,90,0,.18) !important; animation: hwCandle 2.6s ease-in-out infinite; }
@keyframes hwCandle { 0%, 100% { box-shadow: inset 3px 0 0 #ff6a00, 0 0 18px rgba(255,90,0,.15); } 50% { box-shadow: inset 3px 0 0 #ffb000, 0 0 30px rgba(255,120,0,.3); } }
:root[data-theme="halloween"] .sidebar-header::after { content: '🎃'; margin-left: 6px; font-size: 18px; filter: drop-shadow(0 0 8px rgba(255,120,0,.8)); animation: hwBob 3s ease-in-out infinite; display: inline-block; }
@keyframes hwBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }

/* cartes : pierre sombre, liseré braise */
:root[data-theme="halloween"] :is(.vd-card, .vd-kpi, .settings-card, .ovm-card, .ovm-k, .ls-card, .stat-card, .card, .bd, .nf2-it, .ch-c, .ac2-acc, .gb, .pz, .ss-c, .ai-card, .dr-card, .rp-card, .conv-item, .ovm-pc) {
  background: linear-gradient(180deg, rgba(34,10,10,.62), rgba(16,5,6,.7)) !important; box-shadow: inset 0 0 0 1px rgba(255,90,40,.14), 0 10px 30px rgba(0,0,0,.45) !important; backdrop-filter: blur(6px);
}
:root[data-theme="halloween"] :is(.vd-card, .settings-card, .ovm-card, .ls-card):hover { box-shadow: inset 0 0 0 1px rgba(255,106,0,.32), 0 0 30px rgba(193,18,31,.18), 0 10px 30px rgba(0,0,0,.45) !important; }
:root[data-theme="halloween"] .vd-kpi-v, :root[data-theme="halloween"] .ovm-big { color: #ffd0a8; text-shadow: 0 0 14px rgba(255,90,0,.35); }

/* boutons ensanglantes : le sang coule au survol */
:root[data-theme="halloween"] :is(.btn-primary, .hd-b.hd-ok, .nf2-all) {
  position: relative; overflow: visible !important; color: #fff !important; border: 0 !important;
  background: linear-gradient(180deg, #d4161f 0%, #8e0a14 70%, #5e0611 100%) !important;
  box-shadow: 0 6px 18px rgba(161,13,28,.45), inset 0 1px 0 rgba(255,160,140,.35), inset 0 -2px 0 rgba(0,0,0,.35) !important; text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
:root[data-theme="halloween"] :is(.btn-primary, .hd-b.hd-ok, .nf2-all)::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: calc(100% - 2px); height: 14px; pointer-events: none;
  background:
    radial-gradient(circle at 10% 0, #8e0a14 3px, transparent 3.5px) 0 0 / 22% 100% no-repeat,
    radial-gradient(ellipse 3px 9px at 30% 0, #8e0a14 98%, transparent 100%),
    radial-gradient(ellipse 2.5px 6px at 55% 0, #8e0a14 98%, transparent 100%),
    radial-gradient(ellipse 3.5px 11px at 78% 0, #8e0a14 98%, transparent 100%);
  transform-origin: top; transform: scaleY(.55); transition: transform .5s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
:root[data-theme="halloween"] :is(.btn-primary, .hd-b.hd-ok, .nf2-all):hover::after { transform: scaleY(1.4); }
:root[data-theme="halloween"] :is(.btn-primary, .hd-b.hd-ok):hover { filter: brightness(1.12); transform: translateY(-1px); }
:root[data-theme="halloween"] :is(.btn-secondary, .cp-btn, .filter-btn, .pp-chip) { background: rgba(40,12,12,.7) !important; border-color: rgba(255,90,40,.22) !important; color: #e8cbbb !important; }
:root[data-theme="halloween"] :is(.filter-btn.active, .pp-chip.active, .conv-filter.active, .settings-tab.active, .ovm-seg button.on, .nf2-seg button.on) { background: linear-gradient(180deg, #ff6a00, #c43d00) !important; color: #1a0503 !important; box-shadow: 0 0 18px rgba(255,90,0,.45) !important; }
:root[data-theme="halloween"] .btn-danger, :root[data-theme="halloween"] .hd-b.hd-red { background: linear-gradient(180deg, #5e0611, #2a0206) !important; box-shadow: inset 0 0 0 1px #c1121f !important; }
:root[data-theme="halloween"] :is(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]) { background: rgba(26,8,8,.85) !important; border-color: rgba(255,90,40,.2) !important; color: var(--text-primary) !important; }
:root[data-theme="halloween"] :is(input, textarea):focus { box-shadow: 0 0 0 3px rgba(255,90,0,.25) !important; border-color: #ff6a00 !important; }

/* toiles d'araignee + araignee qui descend */
.hw-web { display: none; }
:root[data-theme="halloween"] .hw-web { display: block; position: fixed; top: 0; width: 170px; height: 170px; z-index: 2; pointer-events: none; opacity: .9; }
:root[data-theme="halloween"] .hw-web.l { left: var(--sidebar-width, 240px); }
:root[data-theme="halloween"] .hw-web.r { right: 0; transform: scaleX(-1); width: 130px; height: 130px; }
.hw-web svg { width: 100%; height: 100%; }
.hw-spider { position: absolute; left: 70px; top: 0; width: 1px; height: 60px; background: rgba(230,220,210,.35); animation: hwSpider 9s ease-in-out infinite; transform-origin: top; }
.hw-spider::after { content: '🕷️'; position: absolute; bottom: -12px; left: -9px; font-size: 18px; filter: drop-shadow(0 2px 4px #000); }
@keyframes hwSpider { 0%, 100% { height: 30px; } 45% { height: 120px; } 55% { height: 110px; } }
@media (max-width: 768px) { :root[data-theme="halloween"] .hw-web.l { left: 0; width: 110px; height: 110px; } :root[data-theme="halloween"] .hw-web.r { display: none; } }

/* gouttes de sang au clic */
.hw-drop { position: fixed; z-index: 99999; pointer-events: none; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #ff3b3b, #8e0a14 60%, #4a0508); transform: translate(-50%, -50%); animation: hwDrop .85s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes hwDrop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); } }

/* transition de page : griffures rouges */
#hw-wipe { display: none; }
:root[data-theme="halloween"] #hw-wipe { display: block; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(161,13,28,.85) 46px 52px, transparent 52px 72px); }
:root[data-theme="halloween"] #hw-wipe.go { animation: hwWipe .7s ease-out; }
@keyframes hwWipe { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 25% { opacity: .9; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
:root[data-theme="halloween"] .page.active { animation: hwRise .6s cubic-bezier(.16,1,.3,1); }
@keyframes hwRise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* details */
:root[data-theme="halloween"] ::selection { background: #c1121f; color: #fff; }
:root[data-theme="halloween"] ::-webkit-scrollbar-thumb { background: linear-gradient(#8e0a14, #ff6a00); border-radius: 8px; }
:root[data-theme="halloween"] .hv-btn { background: radial-gradient(circle at 30% 25%, #ff9a3d, #c1121f 60%, #4a0508) !important; box-shadow: 0 12px 30px rgba(193,18,31,.55) !important; }
:root[data-theme="halloween"] .account-item.acc-live { background: linear-gradient(90deg, rgba(255,106,0,.16), transparent) !important; box-shadow: inset 0 0 0 1px rgba(255,106,0,.3) !important; }
:root[data-theme="halloween"] .hd-box { background: linear-gradient(180deg, rgba(40,10,10,.98), rgba(14,4,5,.98)) !important; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,90,40,.25) !important; }
:root[data-theme="halloween"] .message.sent .message-bubble, :root[data-theme="halloween"] .hv-m.me { background: linear-gradient(145deg, #a10d1c, #5e0611) !important; color: #fff !important; }
.hub-th i[style*="#0a0304"] { box-shadow: inset 0 0 0 1px rgba(255,106,0,.4); }
@media (prefers-reduced-motion: reduce) { :root[data-theme="halloween"] * { animation: none !important; } }