:root {
  --ink: #2d1b4e;
  --ink-soft: #5f5571;
  --violet: #8e62e8;
  --violet-dark: #38215f;
  --violet-pale: #eee8fb;
  --lavender: #f8f6fc;
  --white: #ffffff;
  --border: #e7e0f3;
  --shadow: 0 20px 50px rgba(52, 29, 91, 0.09);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--lavender);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }

.page-shell { max-width: 1280px; margin: 0 auto; padding: 0 32px 26px; }

.topbar {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(92, 64, 145, 0.13);
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 18px; font-weight: 750; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: white; background: linear-gradient(145deg, #a27af0, #7450c9); box-shadow: 0 7px 16px rgba(111, 75, 188, .22); }
.brand-mark svg { width: 22px; height: 22px; }
.topbar-label { color: var(--ink-soft); font-size: 13px; font-weight: 600; }

.hero { min-height: 380px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 64px 2px 54px; }
.eyebrow { margin: 0 0 12px; color: var(--violet); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .13em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 18px; max-width: 650px; font-size: clamp(46px, 6.5vw, 76px); line-height: .94; letter-spacing: -.065em; font-weight: 850; }
h1 span { color: var(--violet); }
.hero-text { max-width: 570px; margin-bottom: 26px; color: var(--ink-soft); font-size: 18px; line-height: 1.58; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-pills span { padding: 11px 15px; border-radius: 999px; background: var(--violet-pale); color: #564176; font-size: 13px; font-weight: 650; }

.hero-orb { position: relative; isolation: isolate; min-height: 315px; overflow: hidden; border-radius: 42px; background: linear-gradient(145deg, #e0d4fb 0%, #b69df0 57%, #7854c9 100%); box-shadow: var(--shadow); transform: rotate(2deg); }
.hero-orb::before, .hero-orb::after { position: absolute; content: ""; border-radius: 999px; background: rgba(255,255,255,.25); filter: blur(1px); }
.hero-orb::before { width: 320px; height: 320px; top: -115px; right: -85px; }
.hero-orb::after { width: 205px; height: 205px; bottom: -97px; left: -67px; }
.orb-grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, black, transparent); }
.orb-card { position: absolute; z-index: 1; left: 50%; top: 50%; display: flex; align-items: center; gap: 17px; width: min(78%, 360px); padding: 26px 23px; color: white; border: 1px solid rgba(255,255,255,.27); border-radius: 24px; background: rgba(43, 24, 78, .72); box-shadow: 0 20px 34px rgba(49,28,91,.28); transform: translate(-50%, -50%) rotate(-2deg); backdrop-filter: blur(9px); }
.orb-card strong { display: block; margin-bottom: 6px; font-size: 19px; }.orb-card small { color: #ded4ef; font-size: 12px; }.orb-icon { display: grid; flex: 0 0 auto; place-items: center; width: 55px; height: 55px; border-radius: 17px; color: #37205e; background: #f1eaff; font-size: 31px; font-weight: 800; }.orb-code { position: absolute; z-index: 2; padding: 8px 11px; border-radius: 11px; color: #513482; background: rgba(255,255,255,.64); font-size: 12px; font-weight: 800; letter-spacing: .08em; box-shadow: 0 8px 18px rgba(65,34,115,.12); }.code-usd { top: 31px; left: 36px; }.code-eur { right: 27px; bottom: 47px; }.code-cny { left: 49px; bottom: 32px; }

.dashboard { padding: 38px; border-radius: 32px; background: var(--white); box-shadow: var(--shadow); }
.section-intro { display: block; }.section-intro h2, .converter-heading h2 { margin-bottom: 0; font-size: clamp(29px, 3vw, 39px); line-height: 1; letter-spacing: -.045em; }.section-title-block { display: grid; justify-items: start; gap: 0; }.date-field, .control { display: grid; gap: 7px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }.date-field { width: min(245px, 100%); margin-top: 18px; }.date-field input, .control input, .control select { min-height: 47px; padding: 0 14px; color: var(--ink); border: 1px solid var(--border); border-radius: 13px; outline: none; background: #fcfbff; font-weight: 650; }.date-field input:focus, .control input:focus, .control select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(142, 98, 232, .12); }
.status-line { display: flex; align-items: center; gap: 8px; margin: 24px 0 19px; color: var(--ink-soft); font-size: 13px; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7b9db; }.status-line.is-ready .status-dot { background: #55ad7d; }.status-line.is-error .status-dot { background: #d65b69; }
.currency-picker-wrap { display: flex; align-items: center; gap: 15px; margin-bottom: 17px; }.currency-picker-wrap p { flex: 0 0 auto; margin: 0; color: var(--ink-soft); font-size: 12px; font-weight: 700; }.currency-picker { display: flex; flex-wrap: wrap; gap: 7px; }.currency-chip { display: inline-flex; align-items: center; gap: 4px; min-width: 48px; padding: 7px 10px; color: #75658e; border: 1px solid var(--border); border-radius: 999px; background: white; cursor: pointer; font-size: 11px; font-weight: 800; transition: .18s ease; }.chip-flag { font-size: 13px; line-height: 1; }.currency-chip:hover { border-color: #c0aae9; }.currency-chip.is-selected { color: white; border-color: var(--violet); background: var(--violet); }
.rate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; min-height: 160px; }.rate-card { position: relative; overflow: hidden; min-height: 157px; padding: 18px; border: 1px solid #ece7f5; border-radius: 19px; background: linear-gradient(145deg, #fff 0%, #fbf9ff 100%); }.rate-card::after { position: absolute; content: ""; top: -26px; right: -25px; width: 78px; height: 78px; border-radius: 50%; background: #f2edfc; }.rate-card-top { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 8px; margin-bottom: 14px; }.currency-identity { display: flex; align-items: start; min-width: 0; gap: 9px; }.flag { display: inline-grid; flex: 0 0 auto; place-items: center; width: 30px; height: 24px; margin-top: 1px; font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(45,27,78,.10)); }.currency-name { display: block; max-width: 126px; color: var(--ink); font-size: 12px; line-height: 1.12; font-weight: 800; }.rate-card code { display: block; margin-top: 4px; color: #83768f; font-size: 11px; font-weight: 800; letter-spacing: .06em; }.trend { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; padding: 6px 8px; border-radius: 999px; font-size: 11px; font-weight: 850; white-space: nowrap; cursor: help; }.trend.is-up { color: #168064; background: #e7f6f1; }.trend.is-down { color: #bc4c4c; background: #fbeceb; }.trend.is-flat { color: #71657e; background: #f0edf4; }.rate-card strong { position: relative; z-index: 1; display: block; margin-bottom: 5px; font-size: 22px; letter-spacing: -.04em; }.rate-card p { position: relative; z-index: 1; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.35; }.rate-card.is-loading { display: grid; place-items: center; color: #ad9fbe; font-size: 13px; }

.converter { margin-top: 34px; padding: 31px; border-radius: 24px; background: linear-gradient(126deg, #f2edfc 0%, #fbfaff 62%, #f4effe 100%); }.converter-heading { margin-bottom: 24px; }.converter-heading p:not(.eyebrow) { max-width: 510px; margin: 11px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }.converter-form { display: grid; grid-template-columns: 1.25fr 1fr 45px 1fr; align-items: end; gap: 11px; }.control input, .control select { width: 100%; background: rgba(255,255,255,.84); }.swap-button { display: grid; place-items: center; width: 45px; height: 47px; color: var(--violet-dark); border: 1px solid #d9cbf1; border-radius: 13px; background: white; cursor: pointer; transition: transform .2s ease, background .2s; }.swap-button:hover { background: #f7f2ff; transform: rotate(180deg); }.swap-button svg { width: 20px; height: 20px; }.result-card { margin-top: 22px; padding: 24px; border-radius: 18px; color: white; background: linear-gradient(116deg, #301c56, #51317f 64%, #7651bd); box-shadow: 0 15px 28px rgba(66, 35, 113, .16); }.result-label { display: block; margin-bottom: 7px; color: #d7c8ed; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.result-card output { display: block; font-size: clamp(27px, 4vw, 42px); font-weight: 800; letter-spacing: -.045em; }.result-card p { margin: 7px 0 0; color: #ddd2ef; font-size: 12px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px 3px 0; color: #83788f; font-size: 11px; line-height: 1.5; } footer a { color: #6d4ab0; text-decoration: none; }

@media (max-width: 820px) { .page-shell { padding: 0 18px 20px; }.hero { grid-template-columns: 1fr; padding-top: 48px; }.hero-orb { min-height: 265px; transform: none; }.dashboard { padding: 24px; }.rate-grid { grid-template-columns: repeat(2, 1fr); }.converter-form { grid-template-columns: 1fr 1fr; }.amount-control { grid-column: 1 / -1; }.swap-button { display: none; }.date-field { width: 100%; }.date-field input { width: 100%; } }
@media (max-width: 500px) { .page-shell { padding: 0 13px 16px; }.topbar { min-height: 68px; }.brand { font-size: 15px; }.topbar-label { display: none; }.hero { gap: 30px; padding: 40px 5px; }.hero-text { font-size: 16px; }.hero-pills span { padding: 9px 11px; font-size: 11px; }.dashboard { padding: 17px; border-radius: 23px; }.currency-picker-wrap { align-items: start; flex-direction: column; gap: 8px; }.converter { margin-top: 22px; padding: 20px; }.converter-form { grid-template-columns: 1fr; }.amount-control { grid-column: auto; }.rate-grid { gap: 9px; }.rate-card { min-height: 118px; padding: 14px; }.rate-card strong { font-size: 17px; } footer { flex-direction: column; gap: 7px; } }