:root {
  /* RavenTech.ai — Light (Apple-esque) */
  --bg: #f5f5f7;
  --bg2: #ffffff;

  /* Glass surfaces */
  --surface: rgba(255, 255, 255, 0.70);
  --surfaceElev: rgba(255, 255, 255, 0.86);
  --surfaceSolid: #ffffff;

  /* Neutrals */
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.14);
  --line: rgba(15, 23, 42, 0.08);
  --text: #0b0b0f;
  --muted: rgba(11, 11, 15, 0.62);
  --muted2: rgba(11, 11, 15, 0.48);

  /* Accents */
  --blue: rgba(0, 122, 255, 0.95);
  --green: rgba(52, 199, 89, 0.95);
  --amber: rgba(255, 159, 10, 0.95);
  --red: rgba(255, 59, 48, 0.95);

  /* Elevation */
  --shadow: 0 10px 30px rgba(15, 20, 30, 0.08);
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.85) inset, 0 10px 30px rgba(15, 20, 30, 0.08);

  /* Focus + hover */
  --hover: rgba(2, 6, 23, 0.03);
  --focus-ring: rgba(0, 122, 255, 0.22);

  /* Radii */
  --radius-card: 18px;
  --radius-control: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1000px 700px at 18% -10%, rgba(0, 122, 255, 0.12), transparent 56%),
    radial-gradient(900px 600px at 85% 10%, rgba(52, 199, 89, 0.08), transparent 58%),
    var(--bg);
  color: var(--text);
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 20px 64px;
}

.appHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.appBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brandLogo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(15, 20, 30, 0.10);
}

.appHeaderText {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.appTitle {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.appSubtitle {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.controlBar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 10px 12px 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.controlBarForm {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 56px;
}

/* Engine 2 (SPX) control bar: fit controls without horizontal overflow */
.controlBarForm.controlBarForm--engine2 {
  display: grid;
  /* With desk-locked controls, just auto-fit the remaining fields */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: end;
  height: auto;
  max-width: 980px;
  margin: 0 auto;
  padding: 2px 0;
}

.controlBarForm.controlBarForm--engine2 .controlGroup {
  min-width: 0; /* override base min-width to prevent overflow */
}

.controlBarForm.controlBarForm--engine2 .controlSpacer {
  display: none;
}

.controlBarForm.controlBarForm--engine2 #runBtn {
  grid-column: auto;
  justify-self: end;
  min-width: 110px;
}

.controlGroup {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.toggleRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.toggleText {
  color: var(--muted);
  font-size: 12px;
}

.mcOverrideRow {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
  align-items: center;
}

.controlLabel {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.1px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.controlSpacer {
  flex: 1;
  min-width: 10px;
}

.controlInput, .controlSelect {
  height: 36px;
  background: var(--surfaceElev);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.80) inset;
}

.controlInput::placeholder {
  color: rgba(11, 11, 15, 0.35);
}

.controlInput:focus, .controlSelect:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px var(--focus-ring), 0 1px 0 rgba(255,255,255,0.85) inset;
}

.primaryButton {
  height: 36px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.70));
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-glass);
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}

.primaryButton:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.76));
  border-color: rgba(15, 23, 42, 0.18);
}

.primaryButton:active {
  transform: translateY(0.5px);
}

.primaryButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-glass);
}

.primaryButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btnSpinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(11,11,15,0.22);
  border-top-color: rgba(11,11,15,0.65);
  display: none;
}

.isLoading .btnSpinner { display: inline-block; animation: spin 0.8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.status {
  margin-top: 8px;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.status.isError { color: var(--red); }
.status.isOk { color: rgba(11,11,15,0.70); }
.status.isRunning { color: rgba(11,11,15,0.62); }

.results.hidden { display: none; }
.hidden { display: none !important; }

.surface {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  /* Tooltips: each surface is a stacking context (due to backdrop-filter). Make it
     positionable so we can raise the active surface above later siblings. */
  position: relative;
  z-index: 0;
}

/* When a tooltip is open/hovered/focused inside a surface, raise that entire surface
   above following sections so the tooltip isn't hidden behind the next card/table. */
.surface:has(.tipWrap.isOpen),
.surface:has(.tipWrap:hover),
.surface:has(.tipWrap:focus-within) {
  z-index: 1000;
}

.sectionHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.sectionTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.sectionMeta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.muted { color: var(--muted); }

.info {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.metricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metricGrid.metricGrid--regime {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.metricGrid.metricGrid--skewWingsTop {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metricGrid.metricGrid--eventRisk {
  /* Give "Top Drivers" a wider lane so we don't truncate */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

.metricGrid.metricGrid--snapshot {
  /* Avoid awkward empty “holes” when we have 5–6 cards */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.metricGrid.metricGrid--snapshot #recCard {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .metricGrid.metricGrid--snapshot #recCard {
    grid-column: auto;
  }
}

@media (max-width: 1200px) {
  .metricGrid.metricGrid--regime {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .metricGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controlBarForm { flex-wrap: wrap; height: auto; padding: 8px 0; }
  .controlSpacer { display: none; }
  .controlBarForm.controlBarForm--engine2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controlBarForm.controlBarForm--engine2 #runBtn { justify-self: stretch; }
}

@media (max-width: 640px) {
  .metricGrid.metricGrid--skewWingsTop { grid-template-columns: 1fr; }
  .controlBarForm.controlBarForm--engine2 { grid-template-columns: 1fr; }
}

.metricGrid.metricGrid--skewWingsBottom {
  grid-template-columns: 1fr;
}

.metricCard {
  padding: 14px 14px 12px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
}

.metricCard.isMuted {
  opacity: 0.65;
}

.metricLabel {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.metricValue {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.12px;
}

.metricGrid--regime .metricValue {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.12px;
}

.metricGrid--regime .metricValue .pill {
  font-weight: 600;
}

.metricValue--message {
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: 0.10px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Snapshot-specific tightening (Engine 2) */
#recMain {
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: 0.10px;
}

.snapshotLines {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 550;
  color: rgba(11,11,15,0.74);
}

.snapLine {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: start;
}

.snapKey {
  color: rgba(11,11,15,0.48);
  font-weight: 650;
  letter-spacing: 0.08px;
}

.pillRow {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.pill.pill--mini {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 650;
}

.snapDetails {
  margin-top: 2px;
}

.snapDetails summary {
  list-style: none;
  cursor: pointer;
  color: rgba(0, 122, 255, 0.90);
  font-weight: 650;
  user-select: none;
}

.snapDetails summary::-webkit-details-marker { display: none; }

.snapDetails summary:after {
  content: " ▾";
  color: rgba(0, 122, 255, 0.70);
  font-weight: 700;
}

.snapDetails[open] summary:after { content: " ▴"; }

.snapDetailBody {
  margin-top: 8px;
  color: rgba(11,11,15,0.70);
  font-weight: 550;
  line-height: 1.35;
}

.chipRow {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.62);
  font-size: 12px;
  font-weight: 650;
  color: rgba(11,11,15,0.72);
}

.chip .k { color: rgba(11,11,15,0.50); font-weight: 700; }

/* Macro week list formatting (Engine 2 Snapshot) */
.macroEventList {
  margin-top: 6px;
  display: grid;
  gap: 6px;
}

.macroEventLine {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.metricGrid--regime #bufferTargetCard .segmented {
  margin-top: 8px;
}

.metricGrid--regime #bufferTargetCard .segButton {
  padding: 5px 9px;
  font-size: 11px;
}

.metricGrid--regime #bufferTargetCard .miniGrid {
  margin-top: 10px;
}

.metricValueSub {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.segmented {
  margin-top: 10px;
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 23, 0.02);
}

.segButton {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(11,11,15,0.62);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.segButton.isActive {
  background: rgba(255,255,255,0.80);
  border-color: var(--border);
  color: rgba(11,11,15,0.88);
}

.segButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.miniGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 13px;
}

.miniGrid .k {
  color: var(--muted);
  font-weight: 500;
}

.miniGrid .v {
  font-weight: 650;
}

.tradeBuilder {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tradeBuilderControls {
  display: grid;
  gap: 10px;
}

.tbRow {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 10px;
}

@media (max-width: 820px) {
  .tbRow { grid-template-columns: 1fr; }
}

.tbLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.tbInputs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.tradeBuilderOutputs {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 820px) {
  .tradeBuilderOutputs { grid-template-columns: 1fr; }
}

.tbColTitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: rgba(11,11,15,0.72);
  margin-bottom: 6px;
}

.advCol { display: none; }
.showAdvanced .advCol { display: table-cell; }

.metricCaption {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.metricCard,
.quarterCard {
  transition: background 120ms ease, border-color 120ms ease;
}

.metricCard:hover,
.quarterCard:hover {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255,255,255,0.88);
}

.actionSummary {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.tradeReadStrip {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  color: rgba(11, 11, 15, 0.78);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sectionDivider {
  height: 1px;
  background: var(--line);
  margin: 16px 2px 2px;
  border-radius: 999px;
}

.regimeValidationGrid {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.rvLine {
  color: var(--muted);
  font-weight: 500;
}

.execNote {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
}

.execNoteTitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.execNoteBody {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.execNoteRule {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
}

.mono, .num, td.num, th.num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}

.quarterGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .quarterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.quarterCard {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  padding: 14px;
}

.quarterTop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.quarterHeading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quarterLabel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  margin-top: 12px;
  font-size: 13px;
}

.kv .k { color: var(--muted); font-weight: 500; }
.kv .v { font-weight: 600; }

.finePrint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
}

.tableWrap {
  margin-top: 8px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
}

.dataTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1150px;
  font-size: 13px;
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  background: rgba(245, 245, 247, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  z-index: 1;
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

tbody tr:hover { background: var(--hover); }

tr.row--breach { background: rgba(255, 59, 48, 0.08); }
tr.row--near { background: rgba(255, 159, 10, 0.08); }

.ref {
  opacity: 0.75;
  font-size: 12px;
}

.regimeCell .pill {
  padding: 3px 10px;
}

.regimeMult {
  margin-left: 8px;
  color: var(--muted2);
  font-weight: 600;
  font-size: 12px;
}

.gateCell .pill {
  padding: 4px 12px;
  font-weight: 700;
}

.linkButton {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.linkButton:hover { filter: brightness(0.95); }

.spacerDot { margin: 0 8px; color: rgba(11,11,15,0.30); }

.breachCell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breachDot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  vertical-align: middle;
}

.breachDot--bad {
  background: rgba(255, 59, 48, 0.18);
  border-color: rgba(255, 59, 48, 0.35);
}

.breachDot--good {
  background: rgba(52, 199, 89, 0.16);
  border-color: rgba(52, 199, 89, 0.32);
}

.breachLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  background: rgba(255,255,255,0.55);
}

.pill.good { color: var(--green); border-color: rgba(52, 199, 89, 0.30); }
.pill.bad { color: var(--red); border-color: rgba(255, 59, 48, 0.32); }
.pill.warn { color: var(--amber); border-color: rgba(255, 159, 10, 0.28); }
.pill.neutral { color: rgba(11,11,15,0.55); border-color: var(--border); }

.eventRiskList {
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(11,11,15,0.74);
  font-size: 13px;
  font-weight: 550;
}

.eventRiskBody {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.08px;
  line-height: 1.25;
}

.eventRiskBody .eventRiskList {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.28;
}

.eventRiskBody .eventRiskMuted {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
}

.eventRiskList li {
  margin: 6px 0;
}

.eventRiskMuted {
  color: rgba(11,11,15,0.55);
  font-weight: 500;
}

.eventRiskKicker {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  font-size: 12px;
  font-weight: 650;
  color: rgba(11,11,15,0.72);
}

.delta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.delta.pos { color: var(--red); }
.delta.neg { color: var(--green); }
.delta.zero { color: var(--muted); font-weight: 600; }

/* ---- Tooltips (Engine 2 + general) ---- */
.tipWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tipBtn {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  color: rgba(11,11,15,0.62);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.tipBtn:hover {
  background: rgba(255,255,255,0.82);
  border-color: rgba(15, 23, 42, 0.16);
}

.tipBtn:active { transform: translateY(0.5px); }

.tipBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring), 0 1px 0 rgba(255,255,255,0.85) inset;
}

.tipPanel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 76vw);
  z-index: 1001;
  padding: 12px 12px 11px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 40px rgba(15, 20, 30, 0.18);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: rgba(11,11,15,0.88);
  display: none;
}

.tipWrap.isOpen .tipPanel,
.tipWrap:hover .tipPanel,
.tipWrap:focus-within .tipPanel {
  display: block;
}

.tipPanel:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.92);
  border-left: 1px solid rgba(15, 23, 42, 0.12);
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.tipTitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1px;
  margin-bottom: 6px;
}

.tipBody {
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  color: rgba(11,11,15,0.78);
  white-space: normal;
}

.tipBody p {
  margin: 8px 0 0;
}

.tipBody p:first-child { margin-top: 0; }

.tipBody ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.tipBody li { margin: 6px 0; }