/* ════════════════════════════════════════════════════════════════
   Brand Hub — global UI styles
   Imported by every tool. Tool-specific styles go in tool folders.
   ════════════════════════════════════════════════════════════════ */

:root {
  --ui-ink: #1A1A1A;
  --ui-ink-mid: #3C3C3C;
  --ui-ink-light: #6B6B6B;
  --ui-ink-faint: #B8B8B8;
  --ui-rule: #D4D4D4;
  --ui-row-bg: #F6F6F4;
  --ui-canvas: #F4F4F0;
  --ui-toolbar: #111110;
  --ui-shadow: rgba(0,0,0,.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--brand-font-english);
  background: var(--ui-canvas);
  color: var(--ui-ink);
  min-height: 100vh;
}

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

/* ─── HEADER ─── */
.bh-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--ui-toolbar);
  border-bottom: 1px solid #1E1E1C;
  height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
}
.bh-header-l, .bh-header-r {
  display: flex; align-items: center; gap: 12px;
}
.bh-logo {
  font-family: var(--brand-font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--brand-primary-red);
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.bh-sep { width: 1px; height: 18px; background: #2A2A28; }
.bh-crumb {
  font-family: var(--brand-font-mono);
  font-size: 11px; color: #888882;
  letter-spacing: .04em;
}
.bh-user {
  font-family: var(--brand-font-mono);
  font-size: 11px; color: #555550;
}

/* ─── BUTTONS ─── */
.bh-btn {
  font-family: var(--brand-font-english);
  font-size: 11.5px; font-weight: 500;
  padding: 6px 14px; border-radius: 5px; cursor: pointer;
  border: none; display: inline-flex; align-items: center; gap: 5px;
  transition: all .12s;
}
.bh-btn:disabled { opacity: .4; cursor: not-allowed; }
.bh-btn-ghost {
  background: transparent; color: #888882;
  border: 1px solid #252522;
}
.bh-btn-ghost:hover:not(:disabled) {
  background: #1A1A18; color: #BBBBB6;
}
.bh-btn-primary {
  background: var(--brand-primary-red); color: #fff;
}
.bh-btn-primary:hover:not(:disabled) { background: #AA1100; }
.bh-btn-save {
  background: #1E1E1C; color: #CACAC4;
  border: 1px solid #2E2E2A;
}
.bh-btn-save:hover:not(:disabled) { background: #272724; }

/* ─── LAYOUT ─── */
.bh-page-body {
  max-width: 1080px; margin: 0 auto;
  padding: 36px 32px 72px;
}
.bh-page-title {
  font-size: 24px; font-weight: 500;
  margin-bottom: 4px;
}
.bh-page-sub {
  font-family: var(--brand-font-mono);
  font-size: 11px; color: var(--ui-ink-light);
  margin-bottom: 32px;
}
.bh-section {
  margin-bottom: 40px;
}
.bh-section-title {
  font-family: var(--brand-font-mono);
  font-size: 10px; color: var(--ui-ink-light);
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 14px;
}

/* ─── TOAST ─── */
.bh-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--ui-toolbar); color: #CCCCC6;
  font-family: var(--brand-font-mono); font-size: 11px;
  padding: 9px 18px; border-radius: 6px; border: 1px solid #252522;
  opacity: 0; transition: opacity .18s, transform .18s;
  pointer-events: none; z-index: 999; white-space: nowrap;
}
.bh-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }