.od-page {
    --od-ink: #172033;
    --od-muted: #6e7a90;
    --od-line: #dce3ee;
    --od-soft: #f6f7fb;
    --od-violet: #6946e8;
    --od-violet-dark: #5232c7;
    --od-pink: #dc3f83;
    --od-up: #1f9d63;
    --od-down: #d64545;
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    color: var(--od-ink);
}

.od-page *, .od-page *::before, .od-page *::after { box-sizing: border-box; }
.od-page button, .od-page input, .od-page select { font: inherit; }

.od-crumb { margin: 18px 2px 0; font-size: .78rem; }
.od-crumb a { color: var(--od-muted); text-decoration: none; }
.od-crumb a:hover { color: var(--od-violet); }

.od-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; padding: 30px 4px 22px; }
.od-hero > div:first-child { max-width: 780px; }
.od-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px; color: #5e6880; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.od-eyebrow i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--od-violet), var(--od-pink)); font: 800 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; font-style: normal; box-shadow: 0 8px 20px rgba(105, 70, 232, .22); }
.od-hero h1 { margin: 0 0 9px; color: #111a2b; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 830; letter-spacing: -.04em; }
.od-hero p { margin: 0; color: var(--od-muted); font-size: .95rem; line-height: 1.6; }
.od-fresh-note { display: flex; min-width: 240px; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid #e2ddf6; border-radius: 13px; background: #f8f6ff; }
.od-fresh-note > span { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #39ad70; box-shadow: 0 0 0 5px rgba(57, 173, 112, .11); }
.od-fresh-note strong, .od-fresh-note small { display: block; }
.od-fresh-note strong { font-size: .8rem; }
.od-fresh-note small { margin-top: 2px; color: #747087; font-size: .7rem; }

.od-section-label { margin: 26px 2px 12px; color: #929caf; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

/* ---- catalog cards ---- */
.od-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; }
.od-card { display: block; padding: 14px 16px 12px; border: 1px solid var(--od-line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; }
.od-card:hover { border-color: #b7a8f0; color: inherit; box-shadow: 0 10px 24px rgba(58, 46, 110, .1); transform: translateY(-1px); }
.od-card-name { display: block; overflow: hidden; font-size: .82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.od-card-slug { display: block; margin-top: 2px; color: #97a1b3; font: .64rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.od-card-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; }
.od-card-value { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.od-card-value small { margin-left: 3px; color: var(--od-muted); font-size: .66rem; font-weight: 700; }
.od-card-spark { width: 96px; height: 30px; flex: 0 0 auto; }
.od-card-spark path { fill: none; stroke: var(--od-violet); stroke-width: 1.6; }
.od-card-spark .spark-fill { fill: rgba(105, 70, 232, .09); stroke: none; }

.od-delta { display: inline-block; margin-top: 3px; font-size: .68rem; font-weight: 800; }
.od-delta.up { color: var(--od-up); }
.od-delta.down { color: var(--od-down); }
.od-delta.flat { color: var(--od-muted); }

/* ---- panels ---- */
.od-panel { overflow: hidden; border: 1px solid #cfd7e5; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(28, 42, 68, .08); }
.od-panel + .od-panel { margin-top: 16px; }
.od-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--od-line); background: #fbfcfe; }
.od-panel-head .od-kicker { display: block; margin-bottom: 3px; color: #929caf; font-size: .61rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.od-panel-head strong { font-size: .86rem; }
.od-panel-body { padding: 16px 18px; }

/* ---- big value ---- */
.od-value-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.od-value { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 830; letter-spacing: -.03em; }
.od-value small { margin-left: 4px; color: var(--od-muted); font-size: .95rem; font-weight: 700; }
.od-asof { color: var(--od-muted); font-size: .74rem; }

/* ---- period switch ---- */
.od-periods { display: inline-flex; gap: 0; overflow: hidden; border: 1px solid #d8dfea; border-radius: 10px; background: #fff; }
.od-periods button { padding: 7px 14px; border: 0; border-right: 1px solid #e6ebf3; color: #7b8799; background: #fff; font-size: .74rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.od-periods button:last-child { border-right: 0; }
.od-periods button:hover { color: var(--od-violet); }
.od-periods button.is-active { color: #fff; background: var(--od-violet); }

/* ---- chart ---- */
.od-chart { position: relative; padding: 10px 6px 2px; }
.od-chart svg { display: block; width: 100%; height: auto; }
.od-chart .od-grid-line { stroke: #edf1f7; stroke-width: 1; }
.od-chart .od-axis-text { fill: #97a1b3; font-size: 11px; }
.od-chart .od-line { fill: none; stroke: var(--od-violet); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.od-chart .od-area { fill: url(#odAreaFill); stroke: none; }
.od-chart .od-cursor { stroke: #b8a9f2; stroke-width: 1; stroke-dasharray: 3 3; }
.od-chart .od-dot { fill: var(--od-violet); stroke: #fff; stroke-width: 2; }
.od-tooltip { position: absolute; z-index: 5; padding: 7px 11px; border: 1px solid #d9d2f5; border-radius: 10px; background: #fff; box-shadow: 0 10px 26px rgba(43, 33, 92, .14); font-size: .74rem; pointer-events: none; white-space: nowrap; }
.od-tooltip strong { display: block; font-size: .82rem; letter-spacing: -.01em; }
.od-tooltip span { color: var(--od-muted); font-size: .66rem; }
.od-chart-empty { padding: 26px 10px 30px; color: var(--od-muted); font-size: .84rem; text-align: center; }

/* ---- table ---- */
.od-grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.od-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.od-table th { padding: 8px 10px; border-bottom: 1px solid var(--od-line); color: #929caf; font-size: .63rem; font-weight: 800; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.od-table td { padding: 8px 10px; border-bottom: 1px solid #eef2f8; }
.od-table tr:last-child td { border-bottom: 0; }
.od-table td:last-child, .od-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.od-table .od-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; }

.od-meta-list { margin: 0; }
.od-meta-list dt { margin-top: 10px; color: #929caf; font-size: .63rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.od-meta-list dt:first-child { margin-top: 0; }
.od-meta-list dd { margin: 3px 0 0; font-size: .82rem; }
.od-meta-list a { color: var(--od-violet); text-decoration: none; }
.od-meta-list a:hover { text-decoration: underline; }
.od-downloads { display: flex; gap: 8px; margin-top: 14px; }
.od-downloads a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #d8dfea; border-radius: 10px; color: var(--od-ink); background: #fff; font-size: .76rem; font-weight: 700; text-decoration: none; transition: all .15s; }
.od-downloads a:hover { border-color: #b7a8f0; color: var(--od-violet); box-shadow: 0 6px 16px rgba(58, 46, 110, .09); }

/* ---- converter ---- */
.cc-form { display: grid; grid-template-columns: minmax(130px, 200px) minmax(190px, 1fr) 44px minmax(190px, 1fr); gap: 12px; align-items: end; }
.cc-field span { display: block; margin-bottom: 5px; color: #929caf; font-size: .63rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cc-field input, .cc-field select { width: 100%; height: 46px; padding: 8px 12px; border: 1px solid #cec6ef; border-radius: 11px; color: var(--od-ink); background: #fff; box-shadow: 0 0 0 3px rgba(105, 70, 232, .05); outline: 0; transition: border-color .15s, box-shadow .15s; }
.cc-field input:focus, .cc-field select:focus { border-color: #8d71eb; box-shadow: 0 0 0 4px rgba(105, 70, 232, .11); }
.cc-field input { font-variant-numeric: tabular-nums; font-weight: 700; }
.cc-swap { display: grid; width: 44px; height: 46px; place-items: center; border: 1px solid #d8dfea; border-radius: 11px; color: var(--od-violet); background: #fff; font-size: 1.1rem; cursor: pointer; transition: all .15s; }
.cc-swap:hover { border-color: #b7a8f0; background: #faf9ff; box-shadow: 0 6px 16px rgba(58, 46, 110, .09); }
.cc-result { margin: 18px 0 2px; font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 830; letter-spacing: -.03em; }
.cc-result small { margin-left: 5px; color: var(--od-muted); font-size: 1rem; font-weight: 700; }
.cc-note { margin: 2px 0 0; color: var(--od-muted); font-size: .74rem; }
.cc-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; }
.cc-quick > span { color: #929caf; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cc-quick a { padding: 5px 11px; border: 1px solid #d8dfea; border-radius: 999px; color: var(--od-ink); background: #fff; font-size: .74rem; font-weight: 700; text-decoration: none; transition: all .15s; }
.cc-quick a:hover { border-color: #b7a8f0; color: var(--od-violet); }
.cc-quick a.is-active { border-color: var(--od-violet); color: #fff; background: var(--od-violet); }

.cc-popular-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

@media (max-width: 860px) {
    .od-hero { flex-direction: column; align-items: flex-start; }
    .od-grid2 { grid-template-columns: 1fr; }
    .cc-form { grid-template-columns: 1fr 1fr; }
    .cc-form .cc-field-amount { grid-column: 1 / -1; }
    .cc-swap { display: none; }
}