/* =============================================================================
   Pulse: Bradawl's platform design system (Claude Design, "Pulse 01-15", 3 Nov 2026).
   One stylesheet for the frame (sidebar, top bar, demo banner, footer), the page header, cards, tables, filter
   chips, buttons, room states and the locked-screen pattern. Values are the designs' own. Usage: PULSE.md.
   Screen-only styles go in wwwroot/css/pulse/<screen>.css, never here.
   ============================================================================= */

:root {
  /* Surfaces */
  --pulse-bg:          #0e0c0a;   /* page */
  --pulse-side:        #0a0908;   /* sidebar, inputs */
  --pulse-surface:     #14110e;   /* top bar, cards, panels */
  --pulse-hover:       #15120e;   /* menu hover and current item */
  --pulse-row-hover:   #19150f;   /* table row hover */
  --pulse-detail:      #0f0d0b;   /* opened row detail */
  --pulse-tip-bg:      #2a241c;   /* tooltip, avatar */
  /* Lines */
  --pulse-line-side:   #221e19;
  --pulse-line:        #2a2620;   /* card and panel borders */
  --pulse-line-2:      #3a342b;   /* buttons, inputs, lock card */
  --pulse-line-row:    #1f1b16;   /* between table rows */
  /* Text */
  --pulse-ivory:       #f0e9db;   /* page title, card numbers */
  --pulse-head:        #ece4d4;   /* strong text */
  --pulse-text:        #c9c1b1;   /* body */
  --pulse-sub:         #9a9385;   /* subtitle, card labels, sub-menu */
  --pulse-dim:         #8b8477;   /* quiet text, icons */
  --pulse-faint:       #6f685c;   /* notes, placeholders */
  --pulse-faintest:    #5f594f;   /* chevrons, "none" */
  /* Accent */
  --pulse-amber:       #d9952a;   /* fills: primary buttons */
  --pulse-amber-hover: #e9a93a;
  --pulse-amber-2:     #efb350;   /* amber text, links, current item */
  --pulse-link-hover:  #f4c877;
  --pulse-on-amber:    #1b1307;
  --pulse-amber-line:  #5a4a2a;
  /* Signals */
  --pulse-green:       #4cc38a;
  --pulse-green-line:  #2f7a55;
  --pulse-red:         #e5534b;
  --pulse-red-line:    #6b2a26;
  --pulse-orange:      #f08a3e;
  --pulse-orange-line: #5a3a1e;
  --pulse-preview:     #c9a24f;
  /* Type */
  --pulse-sans:  'IBM Plex Sans', system-ui, sans-serif;
  --pulse-serif: 'Newsreader', Georgia, serif;
  --pulse-mono:  'IBM Plex Mono', monospace;
  /* Frame */
  --pulse-gutter: clamp(12px, 2vw, 24px);
  --pulse-side-w: 260px;
}

@keyframes bw-spin { to { transform: rotate(360deg); } }
@keyframes bw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bw-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 83, 75, .6); } 50% { box-shadow: 0 0 0 6px rgba(229, 83, 75, 0); } }
@keyframes bw-shimmer { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ── The page, inside the frame ─────────────────────────────────────────────── */

body.pulse-body {
  margin: 0; background: var(--pulse-bg); color: var(--pulse-text);
  font-family: var(--pulse-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  --bs-body-bg: var(--pulse-bg); --bs-body-bg-rgb: 14, 12, 10; --bs-body-color: var(--pulse-text);
  --bs-paper-bg: var(--pulse-surface); --bs-paper-bg-rgb: 20, 17, 14;
  --bs-border-color: var(--pulse-line); --bs-heading-color: var(--pulse-head);
  --bs-link-color: var(--pulse-amber-2); --bs-link-color-rgb: 239, 179, 80; --bs-link-hover-color: var(--pulse-link-hover);
}
.pulse-body a { color: var(--pulse-amber-2); text-decoration: none; }
.pulse-body a:hover { color: var(--pulse-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.pulse-body *, .pulse-body *::before, .pulse-body *::after { box-sizing: border-box; }

.pulse-app { width: 100%; min-height: 100vh; display: flex; background: var(--pulse-bg); }
.pulse-col { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; overflow-x: clip; }
.pulse-main { flex: 1; padding: 24px var(--pulse-gutter) 40px; }
.pulse-content { max-width: var(--pulse-width, 1320px); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.pulse-spacer { flex: 1; }
.pulse-footer { padding: 0 var(--pulse-gutter) 20px; font-size: 14px; color: var(--pulse-dim); }

/* Pages not yet redesigned keep their theme cards; sit them on the Pulse surfaces. */
.pulse-content > .row, .pulse-content .row { --bs-gutter-y: 1rem; }
.pulse-content .card { background-color: var(--pulse-surface); border: 1px solid var(--pulse-line); border-radius: 10px; box-shadow: none; }
.pulse-content .card-header { border-bottom-color: var(--pulse-line); }
.pulse-content .table { --bs-table-bg: transparent; --bs-table-border-color: var(--pulse-line-row); }
.pulse-content .alert { border-radius: 6px; }

/* ── Sidebar ────────────────────────────────────────────────────────────────── */

.pulse-side { width: var(--pulse-side-w); flex: none; background: var(--pulse-side); border-right: 1px solid var(--pulse-line-side); display: flex; flex-direction: column; position: relative; z-index: 30; }
.pulse-brand { height: 64px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--pulse-line-side); }
.pulse-body .pulse-brand-link { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 18px; color: var(--pulse-head); }
.pulse-body .pulse-brand-link:hover { color: var(--pulse-head); text-decoration: none; }
.pulse-logo { position: relative; width: 32px; height: 12px; display: block; flex: none; }
.pulse-logo > span:first-child { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: #e8e0d0; }
.pulse-logo > span:last-child { position: absolute; left: 10px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--pulse-amber); box-shadow: 0 0 10px rgba(239, 179, 80, .7); }

.pulse-nav { display: flex; flex-direction: column; padding: 14px 12px; gap: 2px; font-size: 15px; }
.pulse-nav-group { display: flex; flex-direction: column; gap: 2px; }
.pulse-body .pulse-nav-item {
  --ic: var(--pulse-dim);
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; color: var(--pulse-text);
}
.pulse-body .pulse-nav-item > div, .pulse-body .pulse-nav-subitem > div { min-width: 0; }
.pulse-body .pulse-nav-item:hover, .pulse-body .pulse-nav-item:focus-visible { background: var(--pulse-hover); color: var(--pulse-head); text-decoration: none; }
.pulse-body .pulse-nav-item.is-active { --ic: var(--pulse-amber-2); color: var(--pulse-amber-2); background: var(--pulse-hover); }
.pulse-nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pulse-chev::before { content: "›"; color: var(--pulse-faintest); }
.pulse-nav-group.is-open > .pulse-nav-item .pulse-chev::before { content: "⌄"; color: var(--pulse-amber-2); }
.pulse-nav-sub { display: none; flex-direction: column; gap: 2px; }
.pulse-nav-group.is-open > .pulse-nav-sub { display: flex; }
.pulse-body .pulse-nav-subitem { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 40px; border-radius: 6px; color: var(--pulse-sub); font-size: 14px; }
.pulse-body .pulse-nav-subitem:hover, .pulse-body .pulse-nav-subitem:focus-visible { background: var(--pulse-hover); color: var(--pulse-head); text-decoration: none; }
.pulse-body .pulse-nav-subitem.is-active { color: var(--pulse-amber-2); }
.pulse-nav-subitem .pulse-nav-lock { margin-left: auto; }

/* The small lock (design 03) and its tooltip. */
.pulse-nav-lock { display: inline-flex; }
.pulse-lock-glyph { position: relative; width: 10px; height: 12px; display: inline-block; flex: none; }
.pulse-lock-glyph::before { content: ""; position: absolute; left: 2px; top: 0; width: 6px; height: 6px; border: 1.5px solid var(--pulse-dim); border-bottom: 0; border-radius: 4px 4px 0 0; }
.pulse-lock-glyph::after { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 7px; border-radius: 2px; background: var(--pulse-dim); }
.pulse-tip {
  display: none; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: var(--pulse-tip-bg); color: var(--pulse-head); font-size: 12px; line-height: 1.5; padding: 6px 10px; border-radius: 5px;
  border: 1px solid var(--pulse-line-2); z-index: 40; pointer-events: none;
}
.pulse-nav-item:hover .pulse-tip, .pulse-nav-item:focus-visible .pulse-tip,
.pulse-nav-subitem:hover .pulse-tip, .pulse-nav-subitem:focus-visible .pulse-tip { display: block; }

/* ── Top bar ────────────────────────────────────────────────────────────────── */

.pulse-topbar-wrap { padding: 16px var(--pulse-gutter) 0; }
.pulse-topbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--pulse-surface); border: 1px solid var(--pulse-line); border-radius: 6px; }
.pulse-burger { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: none; border: 0; cursor: pointer; }
.pulse-burger > span { width: 18px; height: 2px; background: var(--pulse-text); }
.pulse-topbar-name { font-weight: 600; color: var(--pulse-head); }
.pulse-search { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pulse-search-icon { width: 16px; height: 16px; border: 2px solid var(--pulse-dim); border-radius: 50%; flex: none; position: relative; }
.pulse-search-icon::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 2px; background: var(--pulse-dim); transform: rotate(45deg); }
.pulse-search-box { flex: 1; min-width: 0; color: var(--pulse-dim); }
/* The search (the theme's autocomplete) draws its own button: make it the design's plain words. */
.pulse-search-box .aa-Autocomplete, .pulse-search-box .aa-DetachedSearchButton { width: 100%; }
.pulse-search-box .aa-DetachedSearchButton { background: none !important; border: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; justify-content: flex-start; }
.pulse-search-box .aa-DetachedSearchButtonIcon { display: none !important; }
.pulse-search-box .aa-DetachedSearchButtonPlaceholder { color: var(--pulse-dim) !important; font-size: 15px !important; padding: 0 !important; margin: 0 !important; }
.pulse-body a.pulse-your-demo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--pulse-amber-line);
  color: var(--pulse-amber-2); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.pulse-body a.pulse-your-demo:hover { background: #1b1610; color: var(--pulse-amber-2); text-decoration: none; }
.pulse-play { width: 0; height: 0; border-left: 8px solid var(--pulse-amber-2); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pulse-avatar {
  position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--pulse-tip-bg); color: var(--pulse-amber-2); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.pulse-avatar-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--pulse-green); border: 2px solid var(--pulse-surface); }
/* The account menu: closed until the initials are clicked (pulse.js), whether or not the theme's script has loaded. */
.pulse-account { position: relative; flex: none; }
.pulse-body .pulse-menu-pop { display: none; position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 1060; background: var(--pulse-surface); border: 1px solid var(--pulse-line-2); }
.pulse-body .pulse-account.is-open .pulse-menu-pop { display: block; }
.pulse-menu-pop .dropdown-divider { border-top: 1px solid var(--pulse-line); margin: 6px 0; opacity: 1; }
.pulse-menu-pop .dropdown-item { display: block; padding: 6px 10px; color: var(--pulse-text); text-decoration: none; }
.pulse-menu-pop .dropdown-item.active { color: var(--pulse-amber-2); background: var(--pulse-hover); }
/* The search's words before (or without) the theme's search script. */
.pulse-search-box:empty::before { content: attr(data-placeholder); color: var(--pulse-dim); font-size: 15px; }
.pulse-menu-pop {
  --bs-dropdown-bg: var(--pulse-surface); --bs-dropdown-border-color: var(--pulse-line-2); --bs-dropdown-link-color: var(--pulse-text);
  --bs-dropdown-link-hover-bg: var(--pulse-hover); --bs-dropdown-link-hover-color: var(--pulse-head); --bs-dropdown-link-active-bg: var(--pulse-hover);
  --bs-dropdown-link-active-color: var(--pulse-amber-2); --bs-dropdown-divider-bg: var(--pulse-line);
  min-width: 240px; padding: 8px; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); font-size: 14px;
}
.pulse-menu-pop .dropdown-item { border-radius: 5px; }
.pulse-pop-who { display: flex; flex-direction: column; padding: 6px 10px; }
.pulse-pop-name { color: var(--pulse-head); font-weight: 600; }
.pulse-pop-sub { color: var(--pulse-dim); font-size: 13px; }
.pulse-pop-signout { padding: 4px 6px; display: grid; }

/* ── Demo banner (design 03) ────────────────────────────────────────────────── */

.pulse-banner {
  margin: 12px var(--pulse-gutter) 0; padding: 8px 14px; border: 1px solid var(--pulse-amber-line); background: rgba(217, 149, 42, .08);
  border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px;
}
.pulse-banner-text { display: flex; align-items: center; gap: 8px; color: var(--pulse-head); }
.pulse-banner-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--pulse-amber-2); box-shadow: 0 0 8px rgba(239, 179, 80, .8); }
.pulse-body a.pulse-banner-back { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; color: var(--pulse-amber-2); font-weight: 500; }
.pulse-body a.pulse-banner-go { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 5px; background: var(--pulse-amber); color: var(--pulse-on-amber); font-weight: 600; font-size: 13px; }
.pulse-body a.pulse-banner-go:hover { background: var(--pulse-amber-hover); color: var(--pulse-on-amber); text-decoration: none; }

/* ── Page header ────────────────────────────────────────────────────────────── */

.pulse-header { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-end; justify-content: space-between; }
.pulse-header-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pulse-eyebrow { font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pulse-amber-2); }
.pulse-body h1.pulse-title { margin: 0; font-family: var(--pulse-serif); font-weight: 400; font-size: clamp(32px, 4vw, 46px); line-height: 1.05; color: var(--pulse-ivory); }
.pulse-subtitle { margin: 0; color: var(--pulse-sub); }
.pulse-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid; font-size: 13px; }
.pulse-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pulse-pill--current { color: var(--pulse-green); border-color: var(--pulse-green-line); }
.pulse-pill--stale { color: var(--pulse-amber-2); border-color: var(--pulse-amber-line); }
.pulse-header-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 5px; background: var(--pulse-surface); border: 1px solid var(--pulse-line); font-size: 13px; color: var(--pulse-text); }

/* ── Cards and panels ───────────────────────────────────────────────────────── */

.pulse-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.pulse-kpi { padding: 16px 18px; border: 1px solid var(--pulse-line); border-radius: 8px; background: var(--pulse-surface); display: flex; flex-direction: column; gap: 4px; }
.pulse-kpi--bad { border-color: var(--pulse-red-line); }
.pulse-kpi-label { font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-sub); }
.pulse-kpi-value { font-family: var(--pulse-serif); font-size: 38px; line-height: 1; color: var(--pulse-ivory); }
.pulse-kpi-of { font-family: var(--pulse-sans); font-size: 16px; color: var(--pulse-dim); }
.pulse-kpi-sub { font-size: 13px; color: var(--pulse-dim); }
.pulse-panel { border: 1px solid var(--pulse-line); border-radius: 10px; background: var(--pulse-surface); }
.pulse-panel--pad { padding: clamp(14px, 2vw, 20px); display: flex; flex-direction: column; gap: 12px; }
.pulse-panel-title { margin: 0; font-family: var(--pulse-sans); font-size: 17px; font-weight: 600; color: var(--pulse-head); }
.pulse-empty { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--pulse-line); border-radius: 10px; background: var(--pulse-surface); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.pulse-empty h2 { margin: 0; font-family: var(--pulse-sans); font-size: 20px; font-weight: 600; color: var(--pulse-head); }
.pulse-empty p { margin: 0; max-width: 460px; }
.pulse-strip { border: 1px solid var(--pulse-line); border-left: 4px solid var(--pulse-red); border-radius: 8px; background: var(--pulse-surface); padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.pulse-strip--amber { border-left-color: var(--pulse-amber-2); }
.pulse-strip > p { flex: 1 1 420px; min-width: 0; margin: 0; color: var(--pulse-head); line-height: 1.55; }
.pulse-notice { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--pulse-amber-line); background: rgba(239, 179, 80, .08); color: var(--pulse-amber-2); font-size: 14px; }
.pulse-notice::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.pulse-allwell { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--pulse-green); font-size: 15px; }
.pulse-skel { animation: bw-shimmer 1.6s ease-in-out infinite; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */

.pulse-table-wrap { border: 1px solid var(--pulse-line); border-radius: 10px; background: var(--pulse-surface); overflow: hidden; }
.pulse-table-wrap--scroll { overflow-x: auto; }
.pulse-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pulse-table th { padding: 10px 18px; border-bottom: 1px solid var(--pulse-line); font-family: var(--pulse-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-dim); text-align: left; vertical-align: bottom; }
.pulse-table td { padding: 13px 18px; border-bottom: 1px solid var(--pulse-line-row); vertical-align: middle; color: var(--pulse-text); }
.pulse-table tbody tr:hover { background: var(--pulse-row-hover); }
.pulse-table tr.is-bad > td:first-child { box-shadow: inset 3px 0 0 var(--pulse-red); }
.pulse-table .pulse-strong { font-weight: 600; color: var(--pulse-head); }
.pulse-mono { font-family: var(--pulse-mono); font-size: 13px; }
.pulse-quiet { color: var(--pulse-dim); }
.pulse-none { color: var(--pulse-faintest); }
/* The designs' grid tables: set grid-template-columns on the head and rows. */
.pulse-grid-head { display: grid; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--pulse-line); font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-dim); }
.pulse-grid-row { display: grid; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--pulse-line-row); align-items: center; font-size: 14px; }
.pulse-grid-row:hover { background: var(--pulse-row-hover); }
.pulse-row-detail { padding: 12px 18px 16px 15px; border-top: 1px solid var(--pulse-line-row); background: var(--pulse-detail); font-size: 13px; animation: bw-in .2s ease both; }
.pulse-table-note { margin: 0; padding: 10px 18px; font-size: 12px; color: var(--pulse-faint); border-top: 1px solid var(--pulse-line-row); }
.pulse-sev { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; border: 1px solid currentColor; vertical-align: middle; }
.pulse-sev--critical { color: var(--pulse-red); }
.pulse-sev--warning { color: var(--pulse-amber-2); }

/* ── Filter chips, inputs ───────────────────────────────────────────────────── */

.pulse-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pulse-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pulse-body .pulse-chip {
  min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pulse-line-2); background: transparent; color: var(--pulse-text);
  font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.pulse-body .pulse-chip:hover { text-decoration: none; color: var(--pulse-head); }
.pulse-body .pulse-chip.is-active, .pulse-body .pulse-chip[aria-pressed="true"] { background: var(--pulse-amber-2); border-color: var(--pulse-amber-2); color: var(--pulse-on-amber); }
.pulse-chip-count { font-family: var(--pulse-mono); opacity: .7; }
.pulse-input { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--pulse-line-2); background: var(--pulse-side); flex: 1 1 160px; max-width: 280px; }
.pulse-input::before { content: ""; width: 12px; height: 12px; flex: none; border: 1.5px solid var(--pulse-dim); border-radius: 50%; }
.pulse-input input { flex: 1; min-width: 0; background: none; border: 0; color: var(--pulse-head); font-size: 14px; outline: none; font-family: inherit; }
.pulse-input input::placeholder { color: var(--pulse-faint); }
.pulse-select { min-height: 38px; padding: 0 10px; border-radius: 5px; border: 1px solid var(--pulse-line-2); background: var(--pulse-side); color: var(--pulse-head); font-size: 14px; font-family: inherit; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.pulse-body .pulse-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 5px;
  border: 1px solid var(--pulse-line-2); background: transparent; color: var(--pulse-head); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.pulse-body .pulse-btn:hover { border-color: var(--pulse-amber); color: var(--pulse-amber-2); text-decoration: none; }
.pulse-body .pulse-btn--primary { border: 0; background: var(--pulse-amber); color: var(--pulse-on-amber); font-weight: 600; }
.pulse-body .pulse-btn--primary:hover { background: var(--pulse-amber-hover); color: var(--pulse-on-amber); }
.pulse-body .pulse-btn--sm { min-height: 34px; padding: 0 12px; }
.pulse-body .pulse-btn--block { width: 100%; }
.pulse-body .pulse-btn-big {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 0 20px; border-radius: 6px; border: 0;
  background: var(--pulse-amber); color: var(--pulse-on-amber); font-weight: 600; font-size: 16px; cursor: pointer; text-align: center; line-height: 1.35;
}
.pulse-body .pulse-btn-big:hover { background: var(--pulse-amber-hover); color: var(--pulse-on-amber); text-decoration: none; }
.pulse-body .pulse-link-btn { min-height: 36px; padding: 0; background: none; border: 0; color: var(--pulse-amber-2); font-family: inherit; font-size: inherit; font-weight: 500; cursor: pointer; }
.pulse-body .pulse-link-btn:hover { text-decoration: underline; }

/* ── Room states ────────────────────────────────────────────────────────────────
   <span class="pulse-state pulse-state--recording"><span class="pulse-state-icon"></span>Recording</span>
   <span class="pulse-dot pulse-state--offline"></span>                      (the 10px glowing dot) */

.pulse-state--idle       { --st: var(--pulse-dim);     --st-glow: rgba(139, 132, 119, .3); --st-bg: transparent;              --st-line: var(--pulse-line); }
.pulse-state--previewing { --st: var(--pulse-preview); --st-glow: rgba(201, 162, 79, .4);  --st-bg: transparent;              --st-line: var(--pulse-line); }
.pulse-state--recording  { --st: var(--pulse-red);     --st-glow: rgba(229, 83, 75, .5);   --st-bg: rgba(229, 83, 75, .15);   --st-line: var(--pulse-line); }
.pulse-state--complete   { --st: var(--pulse-green);   --st-glow: rgba(76, 195, 138, .4);  --st-bg: transparent;              --st-line: var(--pulse-line); }
.pulse-state--processing { --st: var(--pulse-amber-2); --st-glow: rgba(239, 179, 80, .45); --st-bg: transparent;              --st-line: var(--pulse-line); }
.pulse-state--stuck      { --st: var(--pulse-orange);  --st-glow: rgba(240, 138, 62, .45); --st-bg: transparent;              --st-line: var(--pulse-orange-line); }
.pulse-state--offline    { --st: var(--pulse-red);     --st-glow: rgba(229, 83, 75, .5);   --st-bg: rgba(229, 83, 75, .15);   --st-line: var(--pulse-red-line); }
.pulse-state--faulted    { --st: var(--pulse-red);     --st-glow: rgba(229, 83, 75, .5);   --st-bg: transparent;              --st-line: var(--pulse-red-line); }
.pulse-state { display: inline-flex; align-items: center; gap: 8px; color: var(--st); font-weight: 500; }
.pulse-state-icon { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; border: 1px solid var(--st); background: var(--st-bg); }
.pulse-state--idle .pulse-state-icon::before       { content: "○"; }
.pulse-state--previewing .pulse-state-icon::before { content: "◐"; }
.pulse-state--recording .pulse-state-icon::before  { content: "●"; }
.pulse-state--complete .pulse-state-icon::before   { content: "✓"; }
.pulse-state--processing .pulse-state-icon::before { content: "↻"; }
.pulse-state--stuck .pulse-state-icon::before      { content: "⏱"; }
.pulse-state--offline .pulse-state-icon::before    { content: "△"; }
.pulse-state--faulted .pulse-state-icon::before    { content: "!"; }
.pulse-state--recording .pulse-state-icon, .pulse-dot.pulse-state--recording { animation: bw-live 1.6s ease-out infinite; }
.pulse-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--st); box-shadow: 0 0 10px var(--st-glow); display: inline-block; }
.pulse-tone-green { color: var(--pulse-green); }
.pulse-tone-amber { color: var(--pulse-amber-2); }
.pulse-tone-orange { color: var(--pulse-orange); }
.pulse-tone-red { color: var(--pulse-red); }
.pulse-tone-dim { color: var(--pulse-dim); }

/* ── The locked-screen pattern (design 03) ──────────────────────────────────── */

.pulse-locked { position: relative; }
.pulse-locked-card-only { display: contents; }
.pulse-ghost { filter: blur(2.5px); opacity: .5; pointer-events: none; user-select: none; display: flex; flex-direction: column; gap: 16px; min-height: 560px; }
/* A page that ghosts its own content (as Pulse 06 does): <div class="pulse-locked pulse-locked--content"><div class="pulse-ghost">...</div>_ScreenLock</div> */
.pulse-locked--content .pulse-ghost { opacity: .45; min-height: 0; gap: 18px; }
.pulse-locked--content .pulse-lock-layer { padding: 60px 24px; }
.pulse-ghost .gb { display: block; height: 10px; border-radius: 3px; background: var(--pulse-line-2); }
.pulse-ghost .gb--faint { background: #2e2a24; }
.pulse-ghost .gv { display: block; height: 34px; border-radius: 4px; background: #4a4438; }
.pulse-ghost-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.pulse-ghost-card { padding: 18px; border: 1px solid var(--pulse-line); border-radius: 8px; background: var(--pulse-surface); display: flex; flex-direction: column; gap: 12px; }
.pulse-ghost-table { border: 1px solid var(--pulse-line); border-radius: 8px; background: var(--pulse-surface); overflow: hidden; }
.pulse-ghost-table-head, .pulse-ghost-table-row { display: grid; grid-template-columns: 1.6fr 1.2fr 1.2fr .8fr; gap: 16px; padding: 12px 18px; }
.pulse-ghost-table-head { border-bottom: 1px solid var(--pulse-line); font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-dim); }
.pulse-ghost-table-row { padding: 16px 18px; border-bottom: 1px solid var(--pulse-line-row); align-items: center; }
.pulse-ghost-table-row .gb, .pulse-ghost-table-row .gv { height: 12px; border-radius: 3px; }
.pulse-ghost-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pulse-ghost-tile { padding: 16px; border: 1px solid var(--pulse-line); border-radius: 8px; background: var(--pulse-surface); display: flex; flex-direction: column; gap: 12px; }
.pulse-ghost-tile-head { display: flex; align-items: center; gap: 10px; }
.pulse-ghost-tile .pulse-dot { animation: none; }
.pulse-ghost-campus { position: relative; min-height: 560px; border: 1px solid var(--pulse-line); border-radius: 10px; background: #0b0a08; overflow: hidden; }
.pulse-ghost-campus-ground { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 25%; }
.pulse-ghost-campus-ground > div {
  position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; transform: rotateX(60deg) rotateZ(40deg);
  background-color: #100e0b; background-image: linear-gradient(rgba(217, 149, 42, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 149, 42, .06) 1px, transparent 1px);
  background-size: 44px 44px; border: 1px solid rgba(217, 149, 42, .1);
}
.pulse-ghost-campus-ground span { position: absolute; border: 1px solid var(--pulse-line); }
.pulse-ghost-campus-ground span:nth-child(1) { left: 230px; top: 230px; width: 220px; height: 130px; background: #191511; }
.pulse-ghost-campus-ground span:nth-child(2) { left: 120px; top: 420px; width: 120px; height: 90px; background: var(--pulse-hover); }
.pulse-ghost-campus-ground span:nth-child(3) { left: 480px; top: 140px; width: 110px; height: 110px; background: var(--pulse-hover); }
.pulse-ghost-campus-fade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 30%, #0b0a08 95%); }
.pulse-ghost-campus-cards { position: absolute; right: 20px; top: 20px; display: flex; gap: 10px; }
.pulse-ghost-campus-cards span { width: 120px; height: 70px; border: 1px solid var(--pulse-line); border-radius: 6px; background: var(--pulse-surface); }
.pulse-ghost-campus-panel { position: absolute; left: 20px; bottom: 20px; width: 300px; height: 120px; border: 1px solid var(--pulse-line); border-radius: 6px; background: var(--pulse-surface); }

.pulse-lock-layer { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 72px 24px; }
.pulse-lock-card {
  width: 100%; max-width: 560px; background: var(--pulse-surface); border: 1px solid var(--pulse-line-2); border-radius: 10px; padding: clamp(20px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); animation: bw-in .3s ease both;
}
.pulse-lock-card[hidden] { display: none; }
.pulse-lock-card h2 { margin: 0; font-family: var(--pulse-sans); font-size: 22px; font-weight: 600; color: var(--pulse-head); line-height: 1.2; }
.pulse-lock-card p { margin: 0; color: var(--pulse-text); }
.pulse-lock-words p { text-wrap: pretty; }
.pulse-lock-words { display: flex; flex-direction: column; gap: 8px; }
.pulse-lock-icon { position: relative; width: 26px; height: 30px; display: inline-block; }
.pulse-lock-icon::before { content: ""; position: absolute; left: 5px; top: 0; width: 16px; height: 15px; border: 2.5px solid var(--pulse-amber-2); border-bottom: 0; border-radius: 9px 9px 0 0; }
.pulse-lock-icon::after { content: ""; position: absolute; left: 0; top: 13px; width: 26px; height: 17px; border-radius: 4px; background: var(--pulse-amber-2); }
.pulse-lock-ways { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; font-size: 14px; }
.pulse-body .pulse-lock-ways > a { min-height: 36px; display: inline-flex; align-items: center; font-weight: 500; }
.pulse-lock-card--error { border-color: var(--pulse-line); gap: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.pulse-lock-card--error h2 { font-size: 20px; line-height: 1.5; }
.pulse-body .pulse-lock-card--error .pulse-btn-big { min-height: 52px; }
.pulse-lock-card--error .pulse-link-btn { min-height: 0; padding: 6px 0; }
.pulse-lock-checking { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; background: var(--pulse-surface); border: 1px solid var(--pulse-line); color: var(--pulse-text); font-size: 14px; }
.pulse-spinner { display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid #4a4133; border-top-color: var(--pulse-amber-2); border-radius: 50%; animation: bw-spin .8s linear infinite; }

/* "Add this to your subscription" */
.pulse-ask { position: fixed; inset: 0; z-index: 1090; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pulse-ask[hidden] { display: none; }
.pulse-ask-panel { width: 100%; max-width: 440px; background: var(--pulse-surface); border: 1px solid var(--pulse-line-2); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 14px; animation: bw-in .25s ease both; color: var(--pulse-text); text-align: left; }
.pulse-ask-panel p { margin: 0; }
.pulse-ask-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pulse-ask-head { display: flex; flex-direction: column; gap: 4px; }
.pulse-ask-head h2 { margin: 0; font-family: var(--pulse-sans); font-size: 20px; font-weight: 600; color: var(--pulse-head); line-height: 1.5; }
.pulse-ask-panel .pulse-btn--sm { min-height: 36px; }
[data-ask-before] { display: flex; flex-direction: column; gap: 14px; }
[data-ask-before][hidden] { display: none; }
.pulse-body .pulse-btn--ask { min-height: 46px; padding: 0 18px; border-radius: 6px; }
.pulse-ask-note { font-size: 13px; color: var(--pulse-dim); }
.pulse-ask-done { padding: 12px 14px; border-radius: 6px; border: 1px solid var(--pulse-green-line); background: rgba(76, 195, 138, .08); color: var(--pulse-green); }

/* ── Phone ──────────────────────────────────────────────────────────────────── */

.pulse-phone-only { display: none; }
@media (max-width: 991.98px) {
  .pulse-phone-only { display: flex; }
  .pulse-desktop-only { display: none !important; }
  .pulse-side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 300px; max-width: 85%; overflow: auto; z-index: 1080;
    transform: translateX(-105%); transition: transform .25s ease; padding: 2px 0;
  }
  .pulse-side .pulse-brand { display: none; }
  .pulse-side .pulse-nav { padding: 14px 12px; }
  .pulse-app.is-menu-open .pulse-side { transform: none; }
  .pulse-scrim { position: fixed; inset: 0; z-index: 1079; background: rgba(0, 0, 0, .6); }
  .pulse-scrim[hidden] { display: none; }
  /* The phone's slide-out lists the items by name (design 03), with the lock's words under a locked item instead of a tooltip. */
  .pulse-nav-item > span:first-child { display: none !important; }
  .pulse-body .pulse-nav-item, .pulse-body .pulse-nav-subitem { flex-wrap: wrap; row-gap: 2px; column-gap: 10px; }
  .pulse-nav-end { display: contents; }
  .pulse-chev { margin-left: auto; }
  .pulse-tip, .pulse-nav-item:hover .pulse-tip, .pulse-nav-subitem:hover .pulse-tip {
    display: block; position: static; transform: none; order: 10; flex-basis: 100%; padding: 0; background: none; border: 0;
    font-size: 12px; color: var(--pulse-dim); white-space: normal;
  }
  .pulse-body .pulse-nav-subitem { padding-left: 28px; }
  .pulse-nav-subitem .pulse-nav-lock { margin-left: 0; }
  .pulse-ghost { min-height: 360px; }
  .pulse-ghost-campus { min-height: 360px; }
  .pulse-lock-layer, .pulse-locked--content .pulse-lock-layer { padding: 24px 0; }
}

/* Design 03's own open screens (the lock preview's demo and unlocked states). */
.pulse-design-open { display: flex; flex-direction: column; gap: 16px; animation: bw-in .3s ease both; }
.pulse-kpi--03 { padding: 18px; gap: 6px; }
.pulse-kpi-value--40 { font-size: 40px; }
.pulse-kpi-label--row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pulse-kpi-tag { padding: 2px 8px; border-radius: 4px; background: var(--pulse-line); color: #b8b0a0; letter-spacing: 0; text-transform: none; font-family: var(--pulse-sans); font-size: 12px; }
.pulse-menu-pop, .pulse-lang { list-style: none; margin: 0; }
.pulse-lang { padding: 0; }