/* ==========================================================================
   BÍBLIA VERSOS — PÁGINA GRAFO
   Fase 4.10 · scripture-graph.css migrado e escopado
   ========================================================================== */

body.page-graph {
  height: 100vh;
  overflow: hidden;
}

/* =========================================================================
   ScriptureGraph — estilos da tela do grafo e da home de entrada
   Escopo: classes dentro de .app (grafo) e .home (tela inicial)
   Não interfere no restante do app pois o grafo usa position:fixed
   ========================================================================= */

/* ─ variáveis locais (não conflitam com app.css) ─ */
body.page-graph .app,
body.page-graph .home {
  --sg-bg:    #f7f3eb;
  --sg-line:  #e4d9c9;
  --sg-line2: #d7c8b4;
  --sg-muted: #68736b;
  --sg-green: #245c37;
  --sg-g2:    #287043;
  --sg-g3:    #1a5c2e;
  --sg-gold:  #b07a22;
  --sg-sh:    0 8px 28px rgba(52,39,21,.09);
  --sg-sh2:   0 3px 12px rgba(52,39,21,.06);
}

/* ─ SHELL ─ */
body.page-graph .app { height: calc(100vh - var(--nav-h, 44px)); display: grid; grid-template-columns: 1fr; font-family: Inter, system-ui, sans-serif; color: #101712; }

/* ─ MAIN ─ */
body.page-graph .sg-main { display: grid; grid-template-rows: 44px 1fr 40px; height: 100%; min-width: 0; }

/* ─ TOPBAR ─ */
body.page-graph .sg-top {
  border-bottom: 1px solid var(--sg-line);
  background: rgba(255,252,247,.9);
  backdrop-filter: blur(14px);
  display: flex; align-items: center;
  gap: 12px; padding: 0 16px; height: 44px;
}
body.page-graph .sg-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-right: 12px; border-right: 1px solid var(--sg-line); }
body.page-graph .sg-logo {
  width: 24px; height: 24px; border-radius: 4px;
  background: linear-gradient(145deg,#183e28,#4f7f5b);
  color: #fff; display: grid; place-items: center;
  font-weight: 900; font-size: 11px;
  box-shadow: 0 3px 8px rgba(36,92,55,.22); flex-shrink: 0;
}
body.page-graph .sg-brand-name { font-size: 13px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
body.page-graph .sg-crumbs { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
body.page-graph .sg-crumb-label { font-size: 11.5px; color: var(--sg-muted); white-space: nowrap; flex-shrink: 0; }
body.page-graph .sg-bc { display: flex; align-items: center; gap: 5px; overflow-x: auto; flex: 1; scrollbar-width: none; }
body.page-graph .sg-bc::-webkit-scrollbar { display: none; }
body.page-graph .sg-chip { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 4px; border: 1px solid #c7dfcd; background: #e6f2e9; color: var(--sg-green); white-space: nowrap; flex-shrink: 0; }
body.page-graph .sg-chip.dim { background: #f0ede6; border-color: #ddd8cc; color: #6b5e46; font-weight: 700; }
body.page-graph .sg-chip.cur { background: var(--sg-green); color: #fff; border-color: var(--sg-green); }
body.page-graph .sg-sep { color: #bbb; font-size: 13px; flex-shrink: 0; }
body.page-graph .sg-acts { display: flex; gap: 6px; flex-shrink: 0; }
body.page-graph .sg-btn {
  height: 28px; border: 1px solid var(--sg-line2); background: #fff; border-radius: 4px;
  padding: 0 13px; font-size: 12.5px; font-weight: 800; color: #1c241f;
  box-shadow: 0 3px 9px rgba(38,28,15,.04); transition: background .12s; cursor: pointer;
}
body.page-graph .sg-btn:hover { background: #f3f0ea; }
body.page-graph .sg-btn:disabled { opacity: .35; cursor: default; }
body.page-graph .sg-btn.g { background: var(--sg-green); color: #fff; border-color: var(--sg-green); }
body.page-graph .sg-btn.g:hover { background: #1c4a2d; }

/* ─ CANVAS ─ */
body.page-graph .sg-canvas {
  position: relative; overflow-x: auto; overflow-y: hidden; display: flex;
  background: linear-gradient(120deg,rgba(255,255,255,.65),rgba(250,246,238,.85));
}
body.page-graph .sg-canvas::-webkit-scrollbar { height: 5px; }
body.page-graph .sg-canvas::-webkit-scrollbar-track { background: transparent; }
body.page-graph .sg-canvas::-webkit-scrollbar-thumb { background: #cfc9be; border-radius: 3px; }
body.page-graph .sg-canvas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(36,92,55,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(36,92,55,.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
body.page-graph svg#sg-links { position: absolute; top: 0; left: 0; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
body.page-graph .onode {
  position: absolute; z-index: 6; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--sg-g2);
  box-shadow: 0 0 0 3px rgba(40,112,67,.18);
  transform: translate(-50%,-50%); pointer-events: none;
}
body.page-graph .onode::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #1b6637; }
body.page-graph .onode.active { border-color: #1b6637; box-shadow: 0 0 0 4px rgba(27,102,55,.28); }
body.page-graph .sg-link { fill: none; stroke: var(--sg-g2); stroke-width: 2; opacity: .55; transition: stroke-width .15s, opacity .15s, stroke .15s; }
body.page-graph .sg-link:hover,
body.page-graph .sg-link.lit { stroke: var(--sg-g3); stroke-width: 3; opacity: 1; }
body.page-graph .sg-link.active { stroke: #1b6637; stroke-width: 3.5; opacity: 1; }
body.page-graph .sg-link.faint { opacity: .18; }

/* ─ COLUMNS ─ */
body.page-graph .sg-cols { display: flex; height: 100%; min-width: 100%; width: max-content; position: relative; z-index: 2; }

body.page-graph .col-root { width: 260px; flex-shrink: 0; padding: 16px 0 12px 16px; display: flex; flex-direction: column; border-right: 1px solid var(--sg-line); }
body.page-graph .col-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em; font-weight: 900; color: #24473a; margin-bottom: 10px; }
body.page-graph .root-wrap { flex: 1; display: flex; align-items: flex-start; padding-top: 4px; }
body.page-graph .rcard {
  background: linear-gradient(180deg,#fff,#fffdf9); border: 1.5px solid var(--sg-g2);
  border-radius: 7px; padding: 14px 14px 12px;
  box-shadow: 0 16px 44px rgba(36,92,55,.1), 0 0 0 5px rgba(255,252,247,.8); width: 100%;
}
body.page-graph .rcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
body.page-graph .rcard h2 { font-size: 14px; letter-spacing: -.03em; }
body.page-graph .rbadge { font-size: 9px; border-radius: 3px; padding: 2px 6px; font-weight: 800; white-space: nowrap; }
body.page-graph .rbadge.cur { background: #e7f4eb; border: 1px solid #bddac4; color: var(--sg-green); }
body.page-graph .rcard .txt { font-size: 12px; line-height: 1.58; color: #1e2820; margin: 8px 0 10px; }
body.page-graph .rmeta { border-top: 1px solid var(--sg-line); padding-top: 8px; display: grid; gap: 5px; color: #4d5750; font-size: 10.5px; }
body.page-graph .ochap { margin-left: auto; border: 1px solid var(--sg-line2); background: #fff; border-radius: 3px; height: 24px; padding: 0 8px; font-weight: 800; font-size: 10px; cursor: pointer; }

body.page-graph .col-list { width: 255px; flex-shrink: 0; border-right: 1px solid var(--sg-line); display: flex; flex-direction: column; padding: 16px 0 12px 0; transition: opacity .2s; }
body.page-graph .col-list.ghost { opacity: .35; pointer-events: none; }
body.page-graph .list-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 12px; margin-bottom: 8px; }
body.page-graph .list-head .col-lbl { margin: 0; }
body.page-graph .lcnt { font-size: 10px; color: #66706a; }
body.page-graph .rlist { flex: 1; overflow-y: auto; padding: 0 12px; display: grid; gap: 6px; align-content: start; }
body.page-graph .rlist::-webkit-scrollbar { width: 3px; }
body.page-graph .rlist::-webkit-scrollbar-thumb { background: #cfc9be; border-radius: 3px; }

body.page-graph .rc {
  position: relative; background: rgba(255,255,255,.96); border: 1px solid var(--sg-line);
  border-radius: 5px; padding: 9px 56px 9px 38px;
  box-shadow: var(--sg-sh2); overflow: visible; cursor: pointer;
  transition: border-color .13s, box-shadow .13s, background .13s;
}
body.page-graph .rc:hover { border-color: var(--sg-g2); box-shadow: 0 0 0 2px rgba(40,112,67,.13), var(--sg-sh2); }
body.page-graph .rc.sel {
  border-color: #1b6637; border-width: 2px;
  background: linear-gradient(180deg,#e8f5ec,#f4fbf5);
  box-shadow: 0 0 0 3px rgba(27,102,55,.22), 0 4px 16px rgba(27,102,55,.18);
  position: relative; z-index: 2;
}
body.page-graph .rc.sel .rnum { border-color: #1b6637; background: #e8f5ec; color: #1b6637; }
body.page-graph .rc.lit { border-color: var(--sg-g2); box-shadow: 0 0 0 2px rgba(40,112,67,.15), var(--sg-sh2); }
body.page-graph .rnum {
  position: absolute; left: 7px; top: 9px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--sg-line); background: #fffdf8;
  font-weight: 950; font-size: 11px;
}
body.page-graph .rc h3 { font-size: 12px; font-weight: 800; line-height: 1; margin-bottom: 4px; letter-spacing: -.02em; }
body.page-graph .rc p { font-size: 11px; line-height: 1.5; color: #28312b; }
body.page-graph .rscore {
  position: absolute; right: 5px; top: 6px; width: 44px; height: 30px;
  border: 1px solid #e9c98f; background: #fff9ed; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; color: var(--sg-gold);
}
body.page-graph .rscore small { font-size: 7.5px; line-height: 1; }
body.page-graph .rscore b { font-size: 11px; line-height: 1.2; font-weight: 900; }
body.page-graph .rbtn {
  position: absolute; right: 5px; bottom: 6px; width: 44px; height: 20px;
  border: 1px solid var(--sg-line); background: #fff; border-radius: 3px;
  font-size: 9.5px; font-weight: 800; transition: background .1s, border-color .1s; cursor: pointer;
}
body.page-graph .rbtn:hover { background: #eaf4ed; border-color: var(--sg-g2); }
body.page-graph .rc.sel .rbtn { background: #eaf4ed; border-color: var(--sg-g2); color: var(--sg-green); }
body.page-graph .rtlist { display: none; }
body.page-graph .nport {
  position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; background: var(--sg-g2); border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 2px var(--sg-g2); z-index: 8;
  transition: background .13s, box-shadow .13s;
}
body.page-graph .rc:hover .nport,
body.page-graph .rc.sel .nport,
body.page-graph .rc.lit .nport { background: var(--sg-g3); box-shadow: 0 0 0 3px var(--sg-g3); }

body.page-graph .col-empty {
  width: 200px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 8px;
  opacity: .38; padding: 16px; text-align: center; border-right: 1px solid var(--sg-line);
}
body.page-graph .col-empty svg { display: block; }
body.page-graph .col-empty p { font-size: 11px; color: #4d5750; line-height: 1.5; }

/* ─ BOTTOM ─ */
body.page-graph .sg-bot {
  border-top: 1px solid var(--sg-line); background: rgba(255,252,247,.92);
  display: flex; align-items: center; padding: 0 20px; height: 40px; flex-shrink: 0;
}
body.page-graph .bstat { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid var(--sg-line); height: 100%; }
body.page-graph .bstat:first-child { padding-left: 0; }
body.page-graph .bstat:last-child { border-right: 0; margin-left: auto; padding-right: 0; }
body.page-graph .bstat-icon { font-size: 13px; color: #5a6b60; flex-shrink: 0; }
body.page-graph .bstat-body { display: flex; flex-direction: column; line-height: 1.2; }
body.page-graph .bstat-val { font-size: 13px; font-weight: 800; color: #1e2820; letter-spacing: -.02em; }
body.page-graph .bstat-lbl { font-size: 10px; color: #7a8279; }
body.page-graph .bstat-text { font-size: 11.5px; font-weight: 600; color: #2a3a2d; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-graph .bstat-sub { font-size: 10px; color: #7a8279; }
body.page-graph .bprogress { display: flex; align-items: center; gap: 4px; padding: 0 18px; border-right: 1px solid var(--sg-line); height: 100%; }
body.page-graph .bpdot { width: 8px; height: 8px; border-radius: 50%; background: var(--sg-line); border: 1.5px solid var(--sg-line2); transition: all .2s; }
body.page-graph .bpdot.done { background: var(--sg-g2); border-color: #1b6637; }
body.page-graph .bpdot.cur { background: #1b6637; border-color: #1b6637; box-shadow: 0 0 0 2px rgba(27,102,55,.25); }

/* ─ LOADING state ─ */
body.page-graph .sg-loading { opacity: .5; pointer-events: none; }
body.page-graph .sg-skeleton { background: linear-gradient(90deg,#f0ece5 25%,#e8e3da 50%,#f0ece5 75%); background-size: 200% 100%; animation: sg-shimmer 1.2s infinite; border-radius: 4px; }
@keyframes sg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─ animação entrada coluna ─ */
@keyframes sg-slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
body.page-graph .col-list.new { animation: sg-slideIn .18s ease both; }

/* ══════════════════════════════════════════════════════════
   HOME SCREEN
   ══════════════════════════════════════════════════════════ */
@keyframes sg-fadeUp   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sg-logoIn   { from { opacity: 0; transform: scale(.7) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

body.page-graph .home {
  position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%,  rgba(54,120,74,.13),  transparent),
    radial-gradient(ellipse 50% 40% at 90% 80%,  rgba(176,122,34,.10), transparent),
    radial-gradient(ellipse 40% 60% at 75% 5%,   rgba(54,120,74,.06),  transparent),
    #f7f3eb;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px 32px; overflow-y: auto;
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
  font-family: Inter, system-ui, sans-serif;
}
body.page-graph .home.out { opacity: 0; transform: scale(.975) translateY(-8px); pointer-events: none; }
body.page-graph .home.in .h-hero         { animation: sg-fadeUp .5s .05s both; }
body.page-graph .home.in .h-search-wrap  { animation: sg-fadeUp .5s .15s both; }
body.page-graph .home.in .h-section      { animation: sg-fadeUp .5s .25s both; }
body.page-graph .home.in .h-recent       { animation: sg-fadeUp .5s .32s both; }

body.page-graph .home-deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
body.page-graph .home-deco svg { width: 100%; height: 100%; }

/* hero */
body.page-graph .h-hero { position: relative; z-index: 1; text-align: center; margin-bottom: 32px; }
body.page-graph .h-logo-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 16px; }
body.page-graph .h-logo {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(145deg,#0f2d1c 0%,#1e5534 45%,#3a7a52 100%);
  color: #fff; display: grid; place-items: center;
  font-weight: 900; font-size: 24px; letter-spacing: -.04em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 12px 36px rgba(15,45,28,.4), 0 4px 12px rgba(15,45,28,.2);
  animation: sg-logoIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
body.page-graph .h-logo-badge {
  margin-top: -8px; background: linear-gradient(90deg,#b07a22,#d4a23a);
  color: #fff; font-size: 8.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 10px; border-radius: 0 0 6px 6px; box-shadow: 0 2px 8px rgba(176,122,34,.35);
}
body.page-graph .h-title {
  font-size: 32px; font-weight: 900; letter-spacing: -.05em;
  background: linear-gradient(135deg,#0f2d1c 0%,#1e5534 50%,#3a7a52 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1; margin-bottom: 8px;
}
body.page-graph .h-sub { font-size: 13.5px; color: #5a6b60; line-height: 1.65; max-width: 380px; margin: 0 auto; }
body.page-graph .h-sub strong { color: #1e5534; font-weight: 700; }

/* busca */
body.page-graph .h-search-wrap { position: relative; z-index: 2; width: 100%; max-width: 720px; margin-bottom: 36px; }
body.page-graph .h-search-box {
  position: relative; display: flex; align-items: center;
  background: #fff; border: 1.5px solid #d7c8b4; border-radius: 12px;
  box-shadow: 0 4px 24px rgba(52,39,21,.09), 0 1px 4px rgba(52,39,21,.05);
  transition: border-color .18s, box-shadow .18s;
}
body.page-graph .h-search-box:focus-within {
  border-color: #287043;
  box-shadow: 0 0 0 3px rgba(40,112,67,.14), 0 6px 28px rgba(40,112,67,.12);
}
body.page-graph .h-search-icon-left { width: 48px; display: grid; place-items: center; flex-shrink: 0; color: #8a9a8e; }
body.page-graph .h-search-icon-left svg { width: 16px; height: 16px; }
body.page-graph .h-search-box input {
  flex: 1; height: 52px; border: 0; outline: none; background: transparent;
  font-size: 14px; font-weight: 500; color: #101712; padding-right: 16px; font-family: inherit;
}
body.page-graph .h-search-box input::placeholder { color: #a8b2a9; font-weight: 400; }
body.page-graph .h-search-kbd {
  margin-right: 12px; padding: 3px 8px; border: 1px solid #e4d9c9;
  border-radius: 5px; font-size: 10px; color: #9aa09a; background: #f8f5f0; white-space: nowrap; flex-shrink: 0;
}
body.page-graph .h-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1.5px solid #d7c8b4; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(52,39,21,.14), 0 4px 12px rgba(52,39,21,.06);
  display: none; z-index: 20;
  max-height: 420px; overflow-y: auto;
}
body.page-graph .h-search-results::-webkit-scrollbar { width: 4px; }
body.page-graph .h-search-results::-webkit-scrollbar-thumb { background: #cfc9be; border-radius: 3px; }
body.page-graph .h-search-results.open { display: block; }
body.page-graph .hsr-header {
  padding: 8px 14px 6px; font-size: 9.5px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: #8a9a8e;
  border-bottom: 1px solid #e4d9c9;
}
body.page-graph .hsr-item {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #e4d9c9;
  transition: background .1s; display: flex; align-items: center; gap: 12px;
}
body.page-graph .hsr-item:last-child { border-bottom: 0; }
body.page-graph .hsr-item:hover,
body.page-graph .hsr-item.focused { background: #f2f8f4; }
body.page-graph .hsr-dot { width: 6px; height: 6px; border-radius: 50%; background: #287043; flex-shrink: 0; }
body.page-graph .hsr-body { flex: 1; min-width: 0; }
body.page-graph .hsr-ref { font-size: 12.5px; font-weight: 800; color: #1b6637; }
body.page-graph .hsr-txt { font-size: 11px; color: #5a6b5d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
body.page-graph .hsr-score { font-size: 10.5px; font-weight: 800; color: #b07a22; background: #fff9ed; border: 1px solid #e9c98f; border-radius: 4px; padding: 1px 6px; flex-shrink: 0; }

/* temas */
body.page-graph .h-section { position: relative; z-index: 1; width: 100%; max-width: 780px; }
body.page-graph .h-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body.page-graph .h-section-label {
  font-size: 10px; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: #7a8279;
  display: flex; align-items: center; gap: 7px;
}
body.page-graph .h-section-label::before { content: ""; display: block; width: 16px; height: 1.5px; background: linear-gradient(90deg,#287043,transparent); }
body.page-graph .h-section-hint { font-size: 11px; color: #a0a89e; }
body.page-graph .h-themes { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
body.page-graph .theme-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1.5px solid #e8e2d8; border-radius: 10px;
  padding: 16px 14px 14px; cursor: pointer; text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
body.page-graph .theme-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tc, linear-gradient(90deg,#287043,#3a7a52)); opacity: .9;
}
body.page-graph .theme-card:hover {
  border-color: #287043; transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(40,112,67,.12), 0 8px 24px rgba(40,112,67,.12);
}
body.page-graph .theme-card:active { transform: translateY(0); }
body.page-graph .tc-icon { font-size: 22px; line-height: 1; margin-bottom: 8px; display: block; }
body.page-graph .tc-name { font-size: 12.5px; font-weight: 800; color: #1e2820; letter-spacing: -.02em; margin-bottom: 3px; }
body.page-graph .tc-ref {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: #245c37;
  background: #eaf4ed; border-radius: 4px; padding: 1px 7px; margin-bottom: 7px;
}
body.page-graph .tc-preview {
  font-size: 10.5px; color: #6a7a6d; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}

/* recentes */
body.page-graph .h-recent { position: relative; z-index: 1; width: 100%; max-width: 780px; margin-top: 20px; }
body.page-graph .h-recent-inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.page-graph .h-recent-label {
  font-size: 10px; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: #7a8279;
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
}
body.page-graph .h-recent-label::before { content: ""; display: block; width: 16px; height: 1.5px; background: linear-gradient(90deg,#b07a22,transparent); }
body.page-graph .recent-pill {
  height: 30px; padding: 0 13px;
  border: 1px solid #e4ddd2; background: #fff; border-radius: 15px;
  font-size: 11.5px; font-weight: 700; color: #3a4a3d;
  cursor: pointer; transition: all .14s;
  display: flex; align-items: center; gap: 6px; font-family: inherit;
}
body.page-graph .recent-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #287043; flex-shrink: 0; }
body.page-graph .recent-pill:hover { background: #eaf4ed; border-color: #287043; color: #245c37; }

/* tagline */
body.page-graph .h-tagline {
  margin-top: 28px; font-size: 10.5px; color: #a8b0a4;
  display: flex; align-items: center; gap: 8px; z-index: 1;
}
body.page-graph .h-tagline::before,
body.page-graph .h-tagline::after { content: ""; flex: 1; max-width: 48px; height: 1px; background: #e4d9c9; }