/* TOP visual v2.2. Structure: approved wireframe v1.11.
   No layout, font-size, spacing or breakpoint overrides for page frames.
   Header/footer and PSA slab keep their approved component styles. */
.visual-page .page-main {
  --ink: #111111;
  --muted: #62625E;
  --line: #E2E2DC;
  --paper: #FFFFFF;
  --panel: #FAFAF7;
  --accent: #FFD400;
  --line-dark: #B8B8B1;
  --line-accent: #D6B500;
  --warm: #FFFCED;
  --soft-yellow: #FFF9D9;
  --dark: #171717;
  --cta-fill: linear-gradient(180deg,#FFDC28 0%,#FFD400 58%,#F0C900 100%);
}
.visual-page .search-panel {
  border-color: var(--line-dark);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.visual-page .search-panel:focus-within { border-color: var(--ink); }
.visual-page .search-submit,
.visual-page .panel-cta {
  color: var(--ink);
  border-color: var(--line-accent);
  border-radius: 6px;
  background: var(--cta-fill);
  box-shadow: 0 1px 2px rgba(48,39,0,.06);
}
.visual-page .evaluation-panel {
  background: linear-gradient(145deg,#FFFCED 0%,#FFF9D9 100%);
  border-color: var(--line-accent);
  box-shadow: 0 4px 14px rgba(48,39,0,.06);
}
.visual-page .evaluation-heading p { color: var(--muted); }
.visual-page .market-price {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0,0,0,.025);
}
.visual-page .market-price > span:not(.ledger-badge) { color: var(--muted); }
.visual-page .market-price > strong { color: var(--ink); }
.visual-page .radar-grid polygon,
.visual-page .radar-grid line { stroke: #C7C6B8; }
.visual-page .radar-value { fill: rgba(255,212,0,.40); stroke: #111111; stroke-opacity: .68; }
.visual-page .radar-labels text { fill: #33332F; }
.visual-page .metric-card {
  background: var(--paper);
  border-color: var(--line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.025);
}
.visual-page .metric-card b { color: var(--muted); }
.visual-page .metric-card strong { color: var(--ink); }
.visual-page .metric-card.metric-total {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--line-accent);
}
.visual-page .metric-total b { color: var(--ink); }
.visual-page .oripa-panel {
  background: var(--dark);
  border-color: var(--dark);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.visual-page .oripa-title-icon img,
.visual-page .portal-card > img { filter: none; }
.visual-page .oripa-copy p,
.visual-page .oripa-step small { color: #E2E2DC; }
.visual-page .oripa-tags span {
  color: var(--accent);
  border-color: #74746B;
  background: transparent;
}
.visual-page .flow-card {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  position: relative;
}
.visual-page .flow-arrow { color: var(--accent); }
/* Existing rc20 box/capsule/result motifs, fitted inside the unchanged diagram slots.
   This is an illustration-only adapter, not a simulation or data connection. */
.visual-page .flow-select::before {
  content: "";
  width: 30px;
  height: 38px;
  border: 3px solid #111111;
  background: #111111;
  box-shadow: 5px -5px 0 -2px #FFFFFF,5px -5px 0 1px #111111;
  transform: skewY(12deg);
}
.visual-page .flow-select i {
  position: absolute;
  color: #FFFFFF;
  font: 700 26px/1 Arial,sans-serif;
}
.visual-page .flow-gacha::before {
  content: "";
  width: 39px;
  height: 39px;
  border: 3px solid #111111;
  border-radius: 50%;
  background: linear-gradient(180deg,#FFFFFF 0 48%,#FFD400 49% 100%);
}
.visual-page .flow-gacha i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid #111111;
  border-radius: 50%;
  background: #FFFFFF;
}
.visual-page .flow-result { background: var(--warm); border-color: var(--line-accent); }
.visual-page .flow-result i {
  display: grid;
  place-items: center;
  width: 35px;
  height: 48px;
  background: #171717;
  border: 2px solid #FFD400;
  border-radius: 3px;
  color: #FFD400;
  font: 700 25px/1 Arial,sans-serif;
}
.visual-page .portal-card {
  background: var(--paper);
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.035);
}
.visual-page .portal-card small { color: var(--muted); }
.visual-page .portal-card i { color: var(--ink); }
.visual-page .spotlight-card {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 2px 6px rgba(0,0,0,.035);
}
.visual-page .spotlight-number { color: var(--muted); }
.visual-page .spotlight-meta > em { background: var(--dark); color: var(--accent); }
.visual-page .spotlight-heading > a { color: var(--muted); }
.visual-page .spotlight-list { scrollbar-color: #B8B8B1 #F3F3F1; }
.visual-page .page-main :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.visual-page .oripa-panel :focus-visible { outline-color: #FFFFFF; }
@media (hover:hover) {
  .visual-page .search-submit:hover,
  .visual-page .panel-cta:hover { background: #FFDC28; border-color: #8B7400; }
  .visual-page .portal-card:hover,
  .visual-page .spotlight-card:hover { border-color: var(--line-dark); box-shadow: 0 3px 8px rgba(0,0,0,.07); }
  .visual-page .spotlight-heading > a:hover { color: var(--ink); text-decoration: underline; }
}