/* =========================================================
   BLACK HOLE — GLOBAL DESIGN SYSTEM
   Tokens, resets, typography, and shared primitives.
   Every other stylesheet builds on top of this file.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Color: surfaces ---------- */
  --bh-void:        #05060a;   /* primary background — near-black space */
  --bh-void-2:       #08090f;   /* secondary background layer */
  --bh-surface:      #0d0f17;   /* card / panel surface */
  --bh-surface-2:    #12141f;   /* elevated surface (hover, modals) */
  --bh-border:        rgba(255, 255, 255, 0.08);
  --bh-border-strong: rgba(255, 255, 255, 0.16);

  /* ---------- Color: text ---------- */
  --bh-text:         #eef0f6;   /* primary text — soft white */
  --bh-text-dim:      #9096ab;   /* secondary text — soft silver */
  --bh-text-faint:    #565c72;   /* tertiary / disabled */

  /* ---------- Color: accents ---------- */
  --bh-cyan:          #5be8ff;   /* gravitational / intelligence accent */
  --bh-violet:        #8d7bff;   /* AI / analytical accent */
  --bh-cyan-dim:       rgba(91, 232, 255, 0.14);
  --bh-violet-dim:     rgba(141, 123, 255, 0.14);

  /* ---------- Color: trading semantics ---------- */
  --bh-profit:        #2fd699;
  --bh-profit-dim:     rgba(47, 214, 153, 0.12);
  --bh-loss:           #ff5c72;
  --bh-loss-dim:        rgba(255, 92, 114, 0.12);
  --bh-warn:            #ffb648;
  --bh-warn-dim:         rgba(255, 182, 72, 0.12);

  /* ---------- Type ---------- */
  --bh-font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --bh-font-body:     'Inter', 'Segoe UI', sans-serif;
  --bh-font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* ---------- Layout ---------- */
  --bh-radius-sm:  6px;
  --bh-radius-md:  12px;
  --bh-radius-lg:  20px;
  --bh-container:  1240px;
  --bh-sidebar-w:  260px;

  /* ---------- Motion ---------- */
  --bh-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --bh-ease-fast:   cubic-bezier(0.4, 0, 0.2, 1);
  --bh-dur-fast:    150ms;
  --bh-dur-med:     380ms;
  --bh-dur-slow:    900ms;

  /* ---------- Elevation ---------- */
  --bh-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --bh-shadow-md: 0 8px 30px rgba(0,0,0,0.45);
  --bh-shadow-glow-cyan: 0 0 40px rgba(91, 232, 255, 0.15);
  --bh-shadow-glow-violet: 0 0 40px rgba(141, 123, 255, 0.15);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bh-void);
  color: var(--bh-text);
  font-family: var(--bh-font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- Typography scale ---------- */
h1, h2, h3, h4 {
  font-family: var(--bh-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.bh-eyebrow {
  font-family: var(--bh-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bh-text-dim);
}

.bh-h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.bh-h2 { font-size: clamp(2rem, 4vw, 3rem); }
.bh-h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

.bh-lead {
  font-size: 1.15rem;
  color: var(--bh-text-dim);
  line-height: 1.65;
  max-width: 640px;
}

.bh-mono { font-family: var(--bh-font-mono); }

/* ---------- Layout helpers ---------- */
.bh-container {
  max-width: var(--bh-container);
  margin: 0 auto;
  padding: 0 32px;
}

.bh-section {
  position: relative;
  padding: 120px 0;
}

.bh-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--bh-border) 20%, var(--bh-border) 80%, transparent);
}

/* ---------- Buttons ---------- */
.bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--bh-radius-sm);
  font-family: var(--bh-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--bh-dur-fast) var(--bh-ease-fast),
              box-shadow var(--bh-dur-fast) var(--bh-ease-fast),
              background var(--bh-dur-fast) var(--bh-ease-fast),
              border-color var(--bh-dur-fast) var(--bh-ease-fast);
  will-change: transform;
}
.bh-btn:focus-visible {
  outline: 2px solid var(--bh-cyan);
  outline-offset: 3px;
}

.bh-btn--primary {
  background: linear-gradient(135deg, var(--bh-cyan), var(--bh-violet));
  color: #05060a;
  box-shadow: var(--bh-shadow-glow-cyan);
}
.bh-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 50px rgba(91,232,255,0.28); }

.bh-btn--ghost {
  background: transparent;
  color: var(--bh-text);
  border: 1px solid var(--bh-border-strong);
}
.bh-btn--ghost:hover { border-color: var(--bh-cyan); background: var(--bh-cyan-dim); }

/* ---------- Cards / glass ---------- */
.bh-card {
  background: linear-gradient(180deg, var(--bh-surface), var(--bh-surface-2) 140%);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius-md);
  padding: 24px;
  transition: border-color var(--bh-dur-fast) var(--bh-ease-fast),
              transform var(--bh-dur-fast) var(--bh-ease-fast);
}
.bh-card:hover {
  border-color: var(--bh-border-strong);
  transform: translateY(-2px);
}

/* ---------- Semantic tags ---------- */
.bh-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bh-font-mono);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
}
.bh-tag--profit { color: var(--bh-profit); background: var(--bh-profit-dim); }
.bh-tag--loss   { color: var(--bh-loss);   background: var(--bh-loss-dim); }
.bh-tag--warn   { color: var(--bh-warn);   background: var(--bh-warn-dim); }
.bh-tag--ai     { color: var(--bh-violet); background: var(--bh-violet-dim); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bh-void); }
::-webkit-scrollbar-thumb { background: var(--bh-surface-2); border-radius: 8px; border: 2px solid var(--bh-void); }

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--bh-cyan); outline-offset: 2px; }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--bh-dur-slow) var(--bh-ease),
              transform var(--bh-dur-slow) var(--bh-ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utility ---------- */
.bh-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================
   BLACK HOLE — SMOOTH INTERACTION LAYER
   Keeps the existing visual design while making scrolling,
   navigation and controls feel less abrupt.
   ========================================================= */

html{
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}

body{
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Native momentum scrolling where supported */
.bh-app-main,
.bh-app-sidebar__scroll,
.bh-table-wrap,
.bh-replay-viewport,
.bh-simple-replay-stage,
.bh-journal-table-wrap,
.bh-modal__body{
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}

/* Professional, restrained scrollbar treatment */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(138,119,230,.34) rgba(255,255,255,.025);
}
*::-webkit-scrollbar{
  width:9px;
  height:9px;
}
*::-webkit-scrollbar-track{
  background:rgba(255,255,255,.018);
}
*::-webkit-scrollbar-thumb{
  background:rgba(138,119,230,.25);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{
  background:rgba(138,119,230,.42);
  border:2px solid transparent;
  background-clip:padding-box;
}

/* Global interactive easing */
a,
button,
input,
select,
textarea,
.bh-card,
.bh-nav-item,
.bh-btn{
  -webkit-tap-highlight-color:transparent;
}

a,
button,
.bh-btn,
.bh-nav-item,
.bh-topbar-icon,
.bh-source-card,
.bh-card[role="button"],
[role="button"]{
  transition:
    transform .16s cubic-bezier(.2,.7,.2,1),
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    opacity .18s ease,
    box-shadow .18s ease;
}

button:active,
.bh-btn:active,
.bh-nav-item:active,
[role="button"]:active{
  transform:scale(.985);
}

.bh-btn:hover,
.bh-nav-item:hover,
button:hover{
  will-change:transform;
}

/* Keep the app shell steady while content changes */
.bh-app-main{
  animation:bh-content-enter .22s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes bh-content-enter{
  from{opacity:.72;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* Smooth anchored section arrival without hiding headings under top bars */
[id]{
  scroll-margin-top:88px;
}

@media(prefers-reduced-motion:reduce){
  html,
  .bh-app-main,
  .bh-app-sidebar__scroll,
  .bh-table-wrap,
  .bh-replay-viewport{
    scroll-behavior:auto;
  }
  .bh-app-main{
    animation:none;
  }
  a,button,.bh-btn,.bh-nav-item,[role="button"]{
    transition:none;
  }
}

/* User interface preferences */
html.bh-user-hide-space-motion #bh-app-bg{display:none!important}
html.bh-user-reduced-motion *,html.bh-user-reduced-motion *::before,html.bh-user-reduced-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

/* Sidebar navigation — keep its scroll position stable between pages */
.bh-app-sidebar__scroll{
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}

/* Launch hardening */
.bh-connectivity{position:fixed;z-index:100000;left:50%;bottom:18px;transform:translate(-50%,14px);opacity:0;pointer-events:none;padding:9px 13px;border:1px solid rgba(226,151,78,.25);border-radius:8px;background:rgba(12,13,18,.96);box-shadow:0 12px 34px rgba(0,0,0,.4);color:#d4b184;font:600 9px var(--bh-font-mono);transition:opacity .2s ease,transform .2s ease}
.bh-connectivity.is-visible{opacity:1;transform:translate(-50%,0)}.bh-connectivity.is-restored{color:#72cbae;border-color:rgba(84,197,158,.22)}
.bh-first-trade-state{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding:17px 19px;border:1px solid rgba(126,106,236,.16);border-radius:10px;background:linear-gradient(110deg,rgba(126,106,236,.055),rgba(255,255,255,.012))}
.bh-first-trade-state span,.bh-first-trade-state strong,.bh-first-trade-state p{display:block}.bh-first-trade-state span{font:650 10px var(--bh-font-mono);letter-spacing:.12em;color:#8177b4}.bh-first-trade-state strong{font-size:13px;margin-top:4px}.bh-first-trade-state p{font-size:9px;color:#707783;margin:4px 0 0}
.bh-draft-restored{margin-bottom:12px;padding:9px 11px;border:1px solid rgba(82,194,157,.18);border-radius:7px;background:rgba(82,194,157,.045);color:#7dc8ad;font:600 9px var(--bh-font-mono)}
@media (hover:none),(pointer:coarse){button,.bh-btn,.bh-nav-item,a.bh-nav-item,input,select{min-height:42px}.bh-app-sidebar__scroll{-webkit-overflow-scrolling:touch;scroll-snap-type:none}.bh-card{transform:none!important}}
@media(max-width:640px){.bh-first-trade-state{align-items:flex-start;flex-direction:column}.bh-first-trade-state .bh-btn{width:100%;justify-content:center}.bh-connectivity{width:calc(100% - 28px);text-align:center}}

/* MOBILE SIDEBAR — independent, persistent touch scrolling */
.bh-app-sidebar{overflow:hidden}
.bh-app-sidebar__scroll{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  touch-action:pan-y;
}

@media (max-width:768px){
  .bh-app-sidebar{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    height:100dvh;
    max-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .bh-app-sidebar__brand{flex:0 0 auto}

  .bh-app-sidebar__scroll{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    max-height:none;
    overflow-y:auto !important;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    padding-bottom:24px;
    scrollbar-width:none;
  }

  .bh-app-sidebar__scroll::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

  .bh-app-sidebar__footer{flex:0 0 auto}
}

/* =========================================================
   BLACK HOLE — SITEWIDE TYPE + ACTION SYSTEM REFRESH
   Keeps every product page visually consistent with the newer
   landing / AI Screenshot language without changing app logic.
   ========================================================= */
:root {
  --bh-font-display: 'Inter', 'Segoe UI', sans-serif;
  --bh-font-body: 'Inter', 'Segoe UI', sans-serif;
  --bh-font-mono: 'DM Mono', 'IBM Plex Mono', monospace;
  --bh-font-accent: 'Playfair Display', Georgia, serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--bh-font-body);
}

h1, h2, h3, h4,
.bh-app-topbar__title,
.bh-auth__title,
.bh-card__title,
.bh-section-title {
  font-family: var(--bh-font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
}

h1 em, h2 em, h3 em,
.bh-accent-serif,
.bh-ai-intake h2 em {
  font-family: var(--bh-font-accent) !important;
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
}

.bh-eyebrow,
.bh-replay-kicker,
.bh-scene-number,
[class*="kicker"],
[class*="eyebrow"] {
  font-family: var(--bh-font-mono);
  letter-spacing: .14em;
}

/* Premium action buttons — same family as the landing CTAs. */
.bh-btn,
.bh-auth__submit,
.bh-ai-action,
.bh-ai-analyze,
.bh-ai-command,
.bh-replay-play,
.bh-simple-play {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid rgba(132,110,210,.26);
  color: #ebe8f8;
  background:
    radial-gradient(circle at 18% 22%, rgba(114,80,214,.16), transparent 33%),
    linear-gradient(135deg, rgba(10,11,24,.92), rgba(18,15,39,.86));
  box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.06);
  font-family: var(--bh-font-body);
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: none;
  transition: transform .24s cubic-bezier(.22,.8,.22,1), border-color .24s ease, background .24s ease, box-shadow .24s ease, color .24s ease;
}

.bh-btn::before,
.bh-auth__submit::before,
.bh-ai-action::before,
.bh-ai-analyze::before,
.bh-ai-command::before,
.bh-replay-play::before,
.bh-simple-play::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0));
  opacity: .72;
  z-index: -1;
}

.bh-btn::after,
.bh-auth__submit::after,
.bh-ai-action::after,
.bh-ai-analyze::after,
.bh-ai-command::after,
.bh-replay-play::after,
.bh-simple-play::after {
  content: "";
  position: absolute;
  top: -135%;
  left: -35%;
  width: 44%;
  height: 370%;
  pointer-events: none;
  transform: rotate(24deg) translateX(-190%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  opacity: 0;
  transition: transform .7s cubic-bezier(.2,.75,.2,1), opacity .3s ease;
  z-index: -1;
}

.bh-btn:hover,
.bh-auth__submit:hover,
.bh-ai-action:hover,
.bh-ai-analyze:hover,
.bh-ai-command:hover,
.bh-replay-play:hover,
.bh-simple-play:hover,
.bh-btn:focus-visible,
.bh-auth__submit:focus-visible,
.bh-ai-action:focus-visible,
.bh-ai-analyze:focus-visible,
.bh-ai-command:focus-visible,
.bh-replay-play:focus-visible,
.bh-simple-play:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(172,138,255,.43);
  box-shadow: 0 18px 42px rgba(19,10,48,.35), 0 0 26px rgba(120,82,255,.12), inset 0 1px rgba(255,255,255,.08);
}

.bh-btn:hover::after,
.bh-auth__submit:hover::after,
.bh-ai-action:hover::after,
.bh-ai-analyze:hover::after,
.bh-ai-command:hover::after,
.bh-replay-play:hover::after,
.bh-simple-play:hover::after,
.bh-btn:focus-visible::after,
.bh-auth__submit:focus-visible::after,
.bh-ai-action:focus-visible::after,
.bh-ai-analyze:focus-visible::after,
.bh-ai-command:focus-visible::after,
.bh-replay-play:focus-visible::after,
.bh-simple-play:focus-visible::after {
  opacity: .9;
  transform: rotate(24deg) translateX(430%);
}

.bh-btn--primary,
.bh-auth__submit,
.bh-ai-action--primary,
.bh-ai-analyze,
.bh-ai-command--accent {
  color: #fbfbff !important;
  border-color: rgba(166,134,255,.38) !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(175,146,255,.32), transparent 34%),
    linear-gradient(135deg, #0a0816 0%, #171133 34%, #341971 68%, #6d3cff 100%) !important;
  box-shadow: 0 18px 48px rgba(72,34,168,.30), 0 0 0 1px rgba(150,120,255,.07), inset 0 1px rgba(255,255,255,.15) !important;
}

.bh-btn--primary:hover,
.bh-auth__submit:hover,
.bh-ai-action--primary:hover,
.bh-ai-analyze:hover,
.bh-ai-command--accent:hover {
  border-color: rgba(190,164,255,.52) !important;
  box-shadow: 0 22px 60px rgba(86,41,196,.40), 0 0 28px rgba(118,73,255,.20), inset 0 1px rgba(255,255,255,.19) !important;
}

.bh-btn--ghost {
  color: #ebe8f8;
  border-color: rgba(132,110,210,.25);
  background:
    radial-gradient(circle at 18% 22%, rgba(114,80,214,.12), transparent 34%),
    linear-gradient(135deg, rgba(10,11,24,.86), rgba(18,15,39,.78));
}

.bh-btn:active,
.bh-auth__submit:active,
.bh-ai-action:active,
.bh-ai-analyze:active,
.bh-ai-command:active,
.bh-replay-play:active,
.bh-simple-play:active {
  transform: translateY(0) scale(.988);
}

@media (prefers-reduced-motion: reduce) {
  .bh-btn::after,
  .bh-auth__submit::after,
  .bh-ai-action::after,
  .bh-ai-analyze::after,
  .bh-ai-command::after,
  .bh-replay-play::after,
  .bh-simple-play::after { display: none; }
}


/* =========================================================
   BLACK HOLE — Professional logout confirmation
   ========================================================= */
html.bh-logout-open,
html.bh-logout-open body { overflow: hidden; }

.bh-logout-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  visibility: hidden;
}
.bh-logout-modal.is-open { pointer-events: auto; visibility: visible; }
.bh-logout-modal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(70,39,144,.16), transparent 42%), rgba(1,2,8,.68);
  backdrop-filter: blur(14px) saturate(.9);
  -webkit-backdrop-filter: blur(14px) saturate(.9);
  opacity: 0;
  transition: opacity .24s ease;
}
.bh-logout-modal.is-open .bh-logout-modal__backdrop { opacity: 1; }
.bh-logout-modal__panel {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  padding: 31px 30px 28px;
  overflow: hidden;
  border: 1px solid rgba(151,121,255,.22);
  border-radius: 24px;
  color: #f4f1ff;
  background: radial-gradient(circle at 50% -18%, rgba(119,75,255,.22), transparent 42%), linear-gradient(145deg, rgba(15,13,34,.97), rgba(6,7,18,.98) 62%, rgba(11,8,25,.98));
  box-shadow: 0 42px 110px rgba(0,0,0,.58), 0 0 0 1px rgba(116,82,214,.06), inset 0 1px 0 rgba(255,255,255,.07);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.975);
  transition: opacity .24s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}
.bh-logout-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 24%, rgba(255,255,255,.035) 48%, transparent 68%);
  transform: translateX(-100%);
  opacity: .6;
}
.bh-logout-modal.is-open .bh-logout-modal__panel { opacity: 1; transform: translateY(0) scale(1); }
.bh-logout-modal.is-open .bh-logout-modal__panel::before { animation: bhLogoutSheen 1.05s .08s cubic-bezier(.2,.75,.2,1) both; }
@keyframes bhLogoutSheen { to { transform: translateX(100%); } }
.bh-logout-modal__close {
  position: absolute;
  top: 15px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  color: rgba(231,226,247,.72);
  background: rgba(255,255,255,.025);
  font: 400 22px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.bh-logout-modal__close:hover,
.bh-logout-modal__close:focus-visible { color:#fff; border-color:rgba(150,119,255,.28); background:rgba(120,80,235,.08); transform:translateY(-1px); outline:none; }
.bh-logout-modal__mark { position:relative; width:58px; height:58px; margin:0 auto 20px; display:grid; place-items:center; }
.bh-logout-modal__orbit {
  position:absolute;
  inset:3px;
  border:1px solid rgba(134,104,255,.48);
  border-left-color:rgba(88,210,255,.8);
  border-radius:50%;
  box-shadow:0 0 24px rgba(94,65,220,.14);
  animation:bhLogoutOrbit 8s linear infinite;
}
.bh-logout-modal__core {
  width:25px;
  height:25px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #171c3e 0 16%, #060713 58%, #000 100%);
  box-shadow:0 0 0 1px rgba(135,106,255,.5), 0 0 26px rgba(85,69,240,.22);
}
@keyframes bhLogoutOrbit { to { transform:rotate(360deg); } }
.bh-logout-modal__eyebrow { margin-bottom:9px; color:#8f83ae; font:600 9px/1.2 "DM Mono", monospace; letter-spacing:.18em; }
.bh-logout-modal__panel h2 { margin:0; color:#f8f5ff; font:700 clamp(23px,3vw,29px)/1.18 Inter,system-ui,sans-serif; letter-spacing:-.03em; }
.bh-logout-modal__panel p { max-width:380px; margin:14px auto 0; color:#9d98ae; font:400 13px/1.72 Inter,system-ui,sans-serif; }
.bh-logout-modal__actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:26px; }
.bh-logout-modal__btn {
  min-height:48px;
  padding:0 17px;
  border-radius:13px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#eeeaf8;
  font:700 12px/1 Inter,system-ui,sans-serif;
  letter-spacing:.015em;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.22,.8,.22,1),border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.bh-logout-modal__btn::before { content:""; position:absolute; inset:1px; z-index:-1; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.08),transparent); pointer-events:none; }
.bh-logout-modal__btn--cancel { border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.bh-logout-modal__btn--cancel:hover,
.bh-logout-modal__btn--cancel:focus-visible { border-color:rgba(154,127,227,.25); background:rgba(129,95,255,.07); transform:translateY(-2px); outline:none; }
.bh-logout-modal__btn--confirm {
  border-color:rgba(166,134,255,.36);
  color:#fff;
  background:radial-gradient(circle at 18% 24%, rgba(175,146,255,.3), transparent 34%), linear-gradient(135deg,#0a0816 0%,#171133 34%,#341971 68%,#6d3cff 100%);
  box-shadow:0 16px 38px rgba(72,34,168,.25), inset 0 1px rgba(255,255,255,.14);
}
.bh-logout-modal__btn--confirm:hover,
.bh-logout-modal__btn--confirm:focus-visible { border-color:rgba(193,166,255,.52); box-shadow:0 20px 48px rgba(86,41,196,.35),0 0 24px rgba(118,73,255,.16); transform:translateY(-2px); outline:none; }
.bh-logout-modal__btn--confirm span:last-child { transition:transform .2s ease; }
.bh-logout-modal__btn--confirm:hover span:last-child { transform:translate(2px,-1px); }
.bh-logout-modal__btn:active { transform:translateY(0) scale(.988); }
.bh-logout-modal__btn:disabled { cursor:wait; opacity:.74; }
@media (max-width:520px) {
  .bh-logout-modal { padding:16px; }
  .bh-logout-modal__panel { padding:28px 20px 20px; border-radius:20px; }
  .bh-logout-modal__actions { grid-template-columns:1fr; }
  .bh-logout-modal__btn--confirm { order:-1; }
}
@media (prefers-reduced-motion: reduce) {
  .bh-logout-modal__panel,.bh-logout-modal__backdrop,.bh-logout-modal__close,.bh-logout-modal__btn { transition:none !important; }
  .bh-logout-modal__panel::before,.bh-logout-modal__orbit { animation:none !important; }
}

/* =========================================================
   BLACK HOLE UI v1 — action hierarchy + unified dialogs
   ========================================================= */
/* Secondary/ghost controls stay calm. Animated light sweeps are reserved for
   primary conversion/action buttons instead of appearing on every control. */
.bh-btn--ghost::after,
.bh-btn--secondary::after,
.bh-settings-danger-btn::after { display: none !important; }

.bh-btn--secondary {
  color: #e9e7f2;
  border-color: rgba(139, 122, 194, .23);
  background: rgba(10, 12, 24, .78);
  box-shadow: 0 10px 26px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.035);
}
.bh-btn--secondary:hover,
.bh-btn--secondary:focus-visible {
  border-color: rgba(145, 126, 211, .38);
  background: rgba(18, 17, 38, .86);
}

html.bh-ui-dialog-open,
html.bh-ui-dialog-open body { overflow: hidden; }
.bh-ui-layer { position: fixed; inset: 0; z-index: 120000; pointer-events: none; }
.bh-ui-dialog { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; visibility: hidden; pointer-events: none; }
.bh-ui-dialog.is-open { visibility: visible; pointer-events: auto; }
.bh-ui-dialog__backdrop { position:absolute; inset:0; background:rgba(1,2,8,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); opacity:0; transition:opacity .18s ease; }
.bh-ui-dialog.is-open .bh-ui-dialog__backdrop { opacity:1; }
.bh-ui-dialog__panel {
  position:relative; width:min(470px,calc(100vw - 30px)); padding:30px; border-radius:22px;
  border:1px solid rgba(145,117,233,.22); color:#f5f3fb;
  background:radial-gradient(circle at 50% -14%,rgba(108,73,211,.16),transparent 44%),linear-gradient(145deg,rgba(13,14,29,.985),rgba(5,6,15,.985));
  box-shadow:0 38px 100px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.055);
  opacity:0; transform:translateY(10px) scale(.982); transition:opacity .18s ease,transform .25s cubic-bezier(.2,.8,.2,1);
}
.bh-ui-dialog.is-open .bh-ui-dialog__panel { opacity:1; transform:none; }
.bh-ui-dialog__close { position:absolute; right:14px; top:13px; width:34px; height:34px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(255,255,255,.025); color:#8c91a4; font-size:20px; cursor:pointer; }
.bh-ui-dialog__mark { width:44px; height:44px; margin-bottom:18px; display:grid; place-items:center; border:1px solid rgba(126,100,218,.25); border-radius:13px; background:rgba(112,79,219,.06); }
.bh-ui-dialog__mark i { width:16px; height:16px; border:2px solid #7659e8; border-right-color:#65d3ed; border-radius:50%; box-shadow:0 0 18px rgba(102,79,226,.22); }
.bh-ui-dialog--danger .bh-ui-dialog__mark { border-color:rgba(223,92,112,.22); background:rgba(207,70,91,.06); }
.bh-ui-dialog--danger .bh-ui-dialog__mark i { border-color:#c95e75; border-right-color:#ee879b; box-shadow:0 0 18px rgba(207,70,91,.14); }
.bh-ui-dialog__eyebrow { color:#777f99; font:600 10px/1.2 var(--bh-font-mono); letter-spacing:.15em; }
.bh-ui-dialog__panel h2 { margin:8px 0 0; font:700 24px/1.18 var(--bh-font-display); letter-spacing:-.025em; }
.bh-ui-dialog__panel p { margin:12px 0 0; color:#969db2; font-size:14px; line-height:1.65; }
.bh-ui-dialog__field { display:grid; gap:7px; margin-top:20px; text-align:left; }
.bh-ui-dialog__field span { color:#7f87a2; font:600 10px var(--bh-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.bh-ui-dialog__field input { width:100%; height:46px; border:1px solid rgba(132,113,193,.20); border-radius:12px; background:#070916; color:#f0f2fb; padding:0 13px; outline:none; font-size:14px; }
.bh-ui-dialog__field input:focus { border-color:rgba(91,203,235,.44); box-shadow:0 0 0 4px rgba(91,203,235,.07); }
.bh-ui-dialog__actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }
.bh-ui-dialog__btn { min-height:47px; border-radius:12px; border:1px solid transparent; color:#eceaf5; font:700 12px var(--bh-font-ui); cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.bh-ui-dialog__btn:hover { transform:translateY(-1px); }
.bh-ui-dialog__btn--secondary { border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.bh-ui-dialog__btn--primary { border-color:rgba(153,123,244,.34); background:linear-gradient(135deg,#17112d,#4d2aa4 72%,#6c3cff); box-shadow:0 14px 34px rgba(73,42,161,.22); }
.bh-ui-dialog__btn--danger { border-color:rgba(221,91,111,.30); color:#fff; background:linear-gradient(135deg,#211017,#6d2534 70%,#99384c); box-shadow:0 14px 34px rgba(113,35,53,.20); }
.bh-ui-dialog__btn:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.bh-ui-toast { position:absolute; right:24px; bottom:24px; display:flex; align-items:center; gap:10px; min-width:230px; max-width:min(390px,calc(100vw - 32px)); padding:13px 15px; border:1px solid rgba(126,111,180,.18); border-radius:12px; background:rgba(8,10,20,.96); color:#e9ebf4; box-shadow:0 18px 50px rgba(0,0,0,.42); opacity:0; transform:translateY(10px); transition:opacity .18s ease,transform .18s ease; pointer-events:auto; }
.bh-ui-toast.is-visible { opacity:1; transform:none; }
.bh-ui-toast__dot { width:7px; height:7px; border-radius:50%; background:#64d3bd; box-shadow:0 0 12px rgba(100,211,189,.45); }
.bh-ui-toast--danger .bh-ui-toast__dot { background:#e56c80; box-shadow:0 0 12px rgba(229,108,128,.35); }
.bh-ui-toast strong { font-size:13px; font-weight:600; line-height:1.4; }
@media (max-width:540px) { .bh-ui-dialog__panel{padding:25px 20px}.bh-ui-dialog__actions{grid-template-columns:1fr}.bh-ui-toast{right:16px;bottom:16px} }

/* =========================================================
   BLACK HOLE — GLOBAL FORM + READABILITY POLISH
   Dark professional controls and readable default sizing
   across all internal product pages.
   ========================================================= */
.bh-app-main input,
.bh-app-main select,
.bh-app-main textarea,
.bh-app-main button { font-size: 14px; line-height: 1.45; }

.bh-app-main input::placeholder,
.bh-app-main textarea::placeholder { color: #7a8093; opacity: 1; }

.bh-app-main select,
.bh-app-main option,
.bh-app-main optgroup {
  background-color: #06080f;
  color: #edf0f7;
}

.bh-app-main select {
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.bh-app-main select:focus,
.bh-app-main input:focus,
.bh-app-main textarea:focus {
  border-color: rgba(142,124,255,.34) !important;
  box-shadow: 0 0 0 3px rgba(96,76,188,.08);
}

.bh-app-main ::selection { background: rgba(112,92,214,.28); color: #f7f7fb; }