/* ============== Root / tokens ============== */
.wvyc-root{
  --wvyc-primary: #f4b431; /* gold (can be overridden by JS from settings) */
  --wvyc-accent:  #0b2a4a; /* deep blue */
  --wvyc-bg: #ffffff;
  --wvyc-muted: #f5f7fb;
  --wvyc-border: #e5e7eb;
  --wvyc-text: #0f172a;
  --wvyc-text-soft:#475569;
  color: var(--wvyc-text);
}

.wvyc-root *{ box-sizing:border-box; }

/* ============== Typography ============== */
.wvyc-headline{ font-size: clamp(20px, 2.4vw, 28px); line-height:1.25; margin:0 0 8px; }
.wvyc-subline{ color: var(--wvyc-text-soft); margin:0; }

/* ============== Buttons ============== */
.wvyc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:10px; border:1px solid transparent;
  font-weight:700; text-decoration:none; cursor:pointer;
  transition:transform .03s ease, background-color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.wvyc-btn:active{ transform: translateY(1px); }

.wvyc-btn-primary{
  background: var(--wvyc-primary);
  color:#111827;
  border-color: #eab30833;
}
.wvyc-btn-primary:hover{ filter: brightness(0.95); }

.wvyc-btn-accent{
  background: var(--wvyc-primary);
  color:#111827;
  border-color:#eab30833;
}
.wvyc-btn-accent:hover{ filter: brightness(0.95); }

.wvyc-btn-ghost{
  background:#fff; color: var(--wvyc-accent);
  border-color: var(--wvyc-border);
}
.wvyc-btn-ghost:hover{ background:#f8fafc; }

/* ============== Cards / panels ============== */
.wvyc-panel, .wvyc-card, .wvyc-cta-card{
  background:#fff; border:1px solid var(--wvyc-border); border-radius:14px;
  padding:16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.wvyc-card + .wvyc-card{ margin-top:14px; }
.wvyc-cta-card .wvyc-cta-line{ color: var(--wvyc-text); margin-bottom:10px; }
.wvyc-cta-caption{ color: var(--wvyc-text-soft); margin-top:8px; font-size:.9rem; }

/* ============== Hero (3 columns on desktop) ============== */
.wvyc-hero{
  margin: 10px 0 18px;
}
.wvyc-hero--three{
  display:grid;
  grid-template-columns: auto 1fr 380px;
  gap:20px;
  align-items:center;
}
.wvyc-hero-logo img{ max-height:72px; width:auto; }
.wvyc-hero-mid .wvyc-menu-hero{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.wvyc-menu-hero .wvyc-menu-item{ list-style:none; }

/* ============== Calculator ============== */
.wvyc-calc-wrap{ margin: 8px 0 18px; }
.wvyc-calc h3{ margin:0 0 10px; }
.wvyc-calc-grid{
  display:grid; gap:16px;
  grid-template-columns: 1.4fr .8fr;
}
.wvyc-form{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
.wvyc-field label{ display:block; font-weight:600; margin-bottom:6px; }
.wvyc-field input[type="number"],
.wvyc-field input[type="email"],
.wvyc-field select{
  width:100%; padding:10px 12px; border:1px solid var(--wvyc-border);
  border-radius:10px; background:#fff;
}
.wvyc-range{ display:grid; grid-template-columns: 1fr 88px; gap:10px; align-items:center; }
.wvyc-range input[type="range"]{ width:100%; }
.wvyc-result-tiles{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
.wvyc-tile{ background:#fff; border:1px solid var(--wvyc-border); border-radius:12px; padding:14px; }
.wvyc-tile .label{ color: var(--wvyc-text-soft); margin-bottom:6px; }
.wvyc-tile .value{ font-size: 22px; font-weight:800; }

/* ============== Grid: left table / right rail ============== */
.wvyc-grid{
  display:grid; gap:20px;
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
  align-items:start;
}
.wvyc-left{ min-width:0; }  /* allow shrink */
.wvyc-right{ min-width:280px; }
@media (min-width:1200px){
  .wvyc-right{ position:sticky; top:84px; }
}

/* toolbar */
.wvyc-toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px;
}
.wvyc-updated{ margin-left:auto; color: var(--wvyc-text-soft); font-size:.92rem; }
.wvyc-stale{ color:#b91c1c; margin-left:6px; }

/* table */
.wvyc-table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--wvyc-border); border-radius:12px; overflow:hidden; table-layout: fixed; }
.wvyc-table th, .wvyc-table td{ padding:10px 12px; border-bottom:1px solid var(--wvyc-border); text-align:left; }
.wvyc-table thead th{ background:#fafafa; font-weight:700; }
.wvyc-table th.t-right, .wvyc-table td.t-right{ text-align:right; }
.wvyc-attrib{ color: var(--wvyc-text-soft); font-size:.9rem; margin-top:8px; }

/* ============== Charts ============== */
.wvyc-card canvas,
#wvyc-canvas, #wvyc-canvas-spark, #wvyc-canvas-scatter{
  display:block; width:100% !important; height:220px !important; max-width:100%;
}

/* ============== Menus rendered as buttons ============== */
.wvyc-menu{ list-style:none; padding:0; margin:0; }
.wvyc-menu .wvyc-menu-item{ display:inline-block; margin-right:8px; margin-bottom:8px; }
.wvyc-menu-rail .wvyc-menu-item{ display:block; }
.wvyc-menu-rail .wvyc-btn{ width:100%; }

/* ============== Forms (newsletter) ============== */
.wvyc-field input[type="email"]{ height:44px; }

/* ============== Responsive ============== */

/* Tablet: collapse hero to 2 cols, grid to single column, remove sticky */
@media (max-width: 1024px){
  .wvyc-hero--three{
    grid-template-columns: auto 1fr; /* logo + middle; CTA drops below as full width card */
    grid-auto-rows:auto;
  }
  .wvyc-hero-right{ grid-column: 1 / -1; }
  .wvyc-grid{ grid-template-columns: 1fr; }
  .wvyc-right{ position:static; }
  .wvyc-calc-grid{ grid-template-columns: 1fr; }
  .wvyc-form{ grid-template-columns: 1fr; }
  .wvyc-result-tiles{ grid-template-columns: 1fr 1fr; }
}

/* Phone: hero stacks, larger taps, table scroll, full-width buttons */
@media (max-width: 680px){
  .wvyc-hero--three{ grid-template-columns: 1fr; }
  .wvyc-hero-logo{ text-align:center; }
  .wvyc-hero-logo img{ max-height:64px; }
  .wvyc-hero-mid{ text-align:center; }
  .wvyc-menu-hero{ justify-content:center; }
  .wvyc-cta-card{ padding:14px; }
  .wvyc-btn, .wvyc-menu-hero .wvyc-btn{ width:100%; }
  .wvyc-result-tiles{ grid-template-columns: 1fr; }
  .wvyc-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .wvyc-table table{ min-width: 720px; }
  .wvyc-toolbar{ gap:8px; }
  .wvyc-updated{ width:100%; margin-left:0; }
}

/* Tiny phones: reduce paddings & font sizes a touch */
@media (max-width: 380px){
  .wvyc-headline{ font-size: 18px; }
  .wvyc-subline{ font-size: 14px; }
  .wvyc-btn{ padding:10px 12px; }
}

/* ============== Utilities ============== */
.wvyc-micro{ color: var(--wvyc-text-soft); font-size:.9rem; margin-top:8px; }

/* ===== WealthVille gold theming (inputs + buttons) ===== */

/* Inputs: search, email, number, selects */
.wvyc-field input[type="number"],
.wvyc-field input[type="email"],
.wvyc-toolbar input#wvyc-search,
.wvyc-field select,
#wvyc-fiat, #wvyc-chain{
  border:1.5px solid #e8e2cf;
  border-radius: 14px;
  background:#fff;
  color:#0b2a4a;
  height: 48px;
  padding: 12px 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.wvyc-toolbar input#wvyc-search::placeholder{
  color:#9aa3b2;
}

/* Focus: WealthVille gold ring */
.wvyc-field input[type="number"]:focus,
.wvyc-field input[type="email"]:focus,
.wvyc-toolbar input#wvyc-search:focus,
.wvyc-field select:focus,
#wvyc-fiat:focus, #wvyc-chain:focus{
  outline: none;
  border-color: var(--wvyc-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wvyc-primary) 35%, transparent);
}

/* Make the selects feel like the inputs */
.wvyc-field select,
#wvyc-fiat, #wvyc-chain{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, #7a889a 50%),
    linear-gradient(135deg, #7a889a 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 4px),
    calc(100% - 12px) calc(50% - 4px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* ===== Buttons in WealthVille gold ===== */