:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --card:#111b26;
  --text:#e8eef6;
  --muted:#9fb0c3;
  --line:#1f2b3a;
  --accent:#7cf7c5;
  --accent-2:#2ea8ff;
  --accent-soft:rgba(124,247,197,.08);
  --shadow:0 14px 34px rgba(0,0,0,.28);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --max:1100px;
  --content-max:980px;

  --chart-grid:rgba(255,255,255,0.08);
  --chart-axis:rgba(255,255,255,0.20);
  --chart-text:rgba(255,255,255,0.75);
  --eur-color:#5da2ff;
  --usd-color:#78f2a7;
  --chf-color:#ffd266;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 20% -10%, #142033 0%, var(--bg) 55%) fixed;
  color:var(--text);
}

a{color:var(--accent);text-decoration:none}
a:hover{opacity:.92}

.wrap{max-width:var(--max);margin:0 auto;padding:22px}
.main{display:flex;flex-direction:column;gap:16px;padding-top:14px}

/* ================= CENTERED BRANDING (homepage + landing + amount) ================= */
.header,
.landing-wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding:22px 14px 10px;
}

.header .brand,
.landing-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}

.logo-row{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.logo-link{display:inline-flex;align-items:center;text-decoration:none}
.site-logo{height:68px !important;width:auto !important;display:block;max-width:min(92vw,420px)}
.tagline{color:var(--muted);max-width:64ch;text-align:center;line-height:1.55;margin:0 auto}
.meta{margin-top:14px;margin-bottom:16px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pill{
  border:1px solid var(--line);
  background:rgba(17,27,38,.55);
  padding:10px 12px;
  border-radius:999px;
  color:var(--muted);
}

/* ================= TOPBAR / shared include header ================= */
.topbar{
  max-width:var(--content-max);
  margin:0 auto 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
}

.topbar .brand{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
}

.topbar-logo{
  display:block;
  height:42px;
  width:auto;
  max-width:240px;
  object-fit:contain;
}

.topbar-logo-fallback{
  display:none;
  font-size:16px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--text);
}

.nav,.footerlinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.nav a,
.footerlinks a{
  border:1px solid var(--line);
  background:rgba(17,27,38,.55);
  padding:9px 12px;
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

/* ================= HERO ================= */
.hero{
  background:linear-gradient(180deg, rgba(17,27,38,.88), rgba(15,22,32,.78));
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:26px;
  margin:0 auto 18px;
  box-shadow:var(--shadow);
}
.hero h1{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.08;
  letter-spacing:-0.02em;
}
.lead{color:var(--muted);font-size:17px;max-width:60ch;line-height:1.6;margin:0}
.eyebrow{display:inline-block;margin-bottom:12px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-2)}
.landing-rate{font-size:46px;font-weight:900;letter-spacing:-0.03em;margin:10px 0 0}

/* ================= BUTTONS / ACTIONS ================= */
.cta-row,.actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.btn,
.actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:rgba(17,27,38,.65);
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
}
.btn-primary{background:var(--accent);color:#00140e;border:none}

/* ================= CARDS / PANELS ================= */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.card,
.panel{
  background:rgba(15,22,32,.65);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ccy{font-weight:800;font-size:16px;letter-spacing:.08em}
.unit{color:var(--muted);font-size:12px}
.value{font-size:40px;font-weight:900;margin-top:6px;letter-spacing:-0.02em}
.sub{color:var(--muted);margin-top:4px;font-size:13px}
.card .delta{margin-top:6px;font-size:13px;color:var(--muted)}
.card .delta.up{color:#7cf7c5}
.card .delta.down{color:#ff8a8a}
.card .spark{margin-top:8px;width:100%;height:36px;display:block;opacity:.95}

.grid{display:grid;grid-template-columns:1.25fr .95fr;gap:16px;align-items:start}
.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.panel-head > h1,
.panel-head > h2{
  width:100%;
  margin:0;
  text-align:center;
  font-size:18px;
  letter-spacing:-0.01em;
h2{margin:0;font-size:18px;letter-spacing:-0.01em}
}

.panel.home-intro .panel-head > h1{
  width:100%;
  margin:0;
  text-align:center;
}

.panel.home-intro .textblock,
.panel.home-intro .textblock p{
  text-align:left !important;
}
.section-title{font-size:20px;margin:0 0 12px;line-height:1.25}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ================= CONVERTER / FORMS ================= */
.converter{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.converter-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  padding:14px;
}

.converter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:150px;
  flex:1 1 160px;
}

.converter-field label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--muted);
}

.converter input[type="number"],
.converter select{
  width:100%;
  min-height:46px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font:inherit;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.converter input[type="number"]:focus,
.converter select:focus{
  border-color:rgba(124,247,197,.55);
  box-shadow:0 0 0 3px rgba(124,247,197,.12);
}

.converter input[type="number"]{min-width:120px}

.converter-arrow{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 2px 10px;
  font-size:20px;
  color:var(--muted);
  flex:0 0 auto;
}

.converter-result{
  min-height:46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:170px;
  padding:10px 14px;
  border:1px solid rgba(124,247,197,.18);
  background:rgba(124,247,197,.06);
  border-radius:12px;
  flex:1 1 180px;
}

.converter-result-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--muted);
}

.converter strong{
  font-size:20px;
  line-height:1.2;
  color:var(--text);
}

.converter-note{
  margin-top:10px;
}

.landing-center .converter,
.panel .converter[style],
.panel .converter{justify-content:flex-start}

/* ================= TEXT / FAQ / STATS ================= */
.textblock{
  line-height:1.82;
  color:var(--text);
  max-width:none;
  width:100%;
  margin:0;
  text-align:left;
}

.textblock p{
  margin:0 0 16px;
  max-width:none;
  text-align:left;
}

.textblock p:last-child{
  margin-bottom:0;
}
.kicker{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.subvalue{color:var(--muted);font-size:14px;margin-top:6px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.badge{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);padding:7px 10px;border-radius:999px;font-size:12px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.stat{border:1px solid var(--line);background:rgba(17,27,38,.45);border-radius:12px;padding:12px}
.stat-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.stat-value{font-size:15px;font-weight:700}
.note{margin-top:16px;border:1px solid rgba(124,247,197,.18);background:rgba(124,247,197,.06);color:var(--text);border-radius:14px;padding:12px 14px;line-height:1.6;font-size:14px}
.faq{margin-top:6px}
.faq-item{padding:16px 0;border-top:1px solid var(--line)}
.faq-item:first-child{border-top:none;padding-top:0}
.faq-q{margin:0 0 8px;font-size:16px;font-weight:700}
.faq-a{margin:0;color:var(--muted);line-height:1.7;font-size:14px}

/* ================= LINKS ================= */
.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.linkbox{display:block;border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(17,27,38,.55);color:inherit}
.linkbox strong{display:block;font-size:14px;line-height:1.45}
.mini{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
.quick-links,.all-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.quick-links a,.all-links a{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;text-decoration:none}

/* ================= TABLE ================= */
.table-wrap{overflow:auto;border-radius:12px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:520px;background:rgba(17,27,38,.55)}
th,td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
tbody tr:hover{background:rgba(124,247,197,.06)}

/* ================= CHART ================= */
#history-panel .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.chart-wrap{position:relative;width:100%;overflow:hidden;margin-top:10px}
#history-chart{width:100%;height:280px;display:block;border-radius:12px;border:1px solid var(--line);background:rgba(17,27,38,.35)}

.chart-legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin:6px 0 10px;
  color:var(--text);
}

.chart-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
}

.chart-legend-swatch{
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.chart-legend-swatch.eur{background:var(--eur-color)}
.chart-legend-swatch.usd{background:var(--usd-color)}
.chart-legend-swatch.chf{background:var(--chf-color)}

.range{display:flex;gap:8px}
.range-btn,.legend-btn{border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.03);color:inherit;padding:6px 10px;border-radius:10px;cursor:pointer;font-size:13px;user-select:none}
.range-btn.active,.legend-btn.active{border-color:rgba(255,255,255,0.30);background:rgba(255,255,255,0.08)}
.legend{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.tooltip{position:absolute;pointer-events:none;z-index:3;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,0.75);color:white;font-size:12px;line-height:1.35;transform:translate(10px,10px);max-width:260px;box-shadow:0 10px 25px rgba(0,0,0,0.25)}

/* ================= EMBED / ADS ================= */
.ad-slot{width:100%;min-height:90px;border:1px dashed rgba(255,255,255,0.14);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:rgba(255,255,255,0.02);overflow:hidden}
.ad-slot.is-loaded{border-style:solid;background:transparent}
.embed-grid{display:grid;grid-template-columns:1fr;gap:12px}
.embed-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.embed-controls select,.embed-controls input{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.14);color:var(--text);border-radius:10px;padding:8px 10px}
.embed-controls button{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer}
.embed-controls button:hover{background:rgba(255,255,255,0.12)}
.embed-code{width:100%;min-height:86px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(0,0,0,0.25);color:var(--text);resize:vertical}
.embed-preview{border:1px solid rgba(255,255,255,0.14);border-radius:14px;overflow:hidden;background:rgba(255,255,255,0.02)}
.embed-preview iframe{width:100%;height:190px;border:0;display:block}

/* ================= FLAGS ================= */
.flag{width:18px;height:14px;margin-right:8px;border-radius:3px;vertical-align:-0.15em;box-shadow:0 0 0 1px rgba(255,255,255,0.08);object-fit:cover;max-width:22px;max-height:16px}
.ccy-main strong{display:inline-flex;align-items:center;gap:0}

/* ================= UTILITIES ================= */
.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
.footer{padding-top:8px;padding-bottom:28px}
.footerlinks{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ================= MOBILE ================= */
@media (max-width:920px){
  .grid{grid-template-columns:1fr}
  .links{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}

@media (max-width:860px){
  .cards{grid-template-columns:1fr}
  .value{font-size:30px}
  .topbar{gap:10px}
  .topbar-logo{height:34px;max-width:180px}
  .site-logo{height:54px !important;max-width:min(92vw,320px)}
  .hero h1{font-size:32px}

  .converter{
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .converter input[type="number"],
  .converter select{
    height:auto;
    min-height:46px;
    font-size:16px;
    padding:10px 12px;
    border-radius:12px;
  }

  .converter strong{font-size:18px}
}

@media (max-width:720px){
  .wrap{padding:14px 12px 40px}
  .header,
  .landing-wrap{padding:18px 12px 8px}
  .hero,.card,.panel{padding:20px}
  .site-logo{height:46px !important;max-width:min(92vw,260px)}
  .tagline{font-size:14px}
  .nav a,.footerlinks a,.pill{font-size:13px;padding:9px 12px}
  .landing-rate{font-size:38px}

  .converter-card{
    padding:12px;
  }

  .converter{
    align-items:stretch;
  }

  .converter-field,
  .converter-result{
    min-width:100%;
    flex:1 1 100%;
  }

  .converter-arrow{
    width:100%;
    min-height:auto;
    padding:2px 0;
    justify-content:center;
  }

  .chart-legend{
    gap:10px 14px;
    margin-top:2px;
  }

  .chart-legend-item{
    font-size:12px;
  }


  #history-panel .panel-head{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:12px;
  }

  #history-panel .panel-head > div:first-child{
    width:100%;
    text-align:center;
  }

  #history-panel .actions{
    width:100%;
    justify-content:center;
    margin-top:0;
  }

  .textblock{
    max-width:none;
    margin:0;
    font-size:15px;
    line-height:1.72;
  }

  .textblock p{
    margin-bottom:14px;
  }
}


@media (max-width:480px){
  .textblock{
    font-size:14px;
    line-height:1.65;
  }
}

/* ================= ARTICLE PAGES ================= */
.article-wrap,
article.article-wrap{
  max-width:860px;
  margin:0 auto;
}

.article-wrap h1,
article.article-wrap h1,
body.article-page h1{
  margin:0 0 18px;
  font-size:42px;
  line-height:1.12;
  letter-spacing:-0.02em;
}

.article-text,
.article-wrap .textblock,
article.article-wrap .textblock,
body.article-page .textblock{
  max-width:760px;
  margin-left:0;
  margin-right:0;
}

body.article-page main,
body.article-page .main{
  gap:18px;
}

body.article-page .panel{
  overflow:hidden;
}

@media (max-width:720px){
  .article-wrap h1,
  article.article-wrap h1,
  body.article-page h1{
    font-size:32px;
    line-height:1.16;
    margin-bottom:14px;
  }

  .article-text,
  .article-wrap .textblock,
  article.article-wrap .textblock,
  body.article-page .textblock{
    max-width:100%;
    font-size:15px;
    line-height:1.72;
  }
}

@media (max-width:480px){
  .article-wrap h1,
  article.article-wrap h1,
  body.article-page h1{
    font-size:28px;
    line-height:1.18;
  }

  .article-text,
  .article-wrap .textblock,
  article.article-wrap .textblock,
  body.article-page .textblock{
    font-size:14px;
    line-height:1.68;
  }
}

/* ================= SEO / FOOTER / LEGAL ================= */
.seo-pill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.seo-pill-grid.compact{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.seo-pill{display:flex;align-items:center;justify-content:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(17,27,38,.55);color:var(--text);font-weight:700;text-align:center;min-height:48px}
.footer-site{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;padding-top:18px;padding-bottom:34px}
.footer-within-wrap{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.footer-brand-row{display:flex;align-items:center;gap:8px;font-size:16px}
.footer-contact{font-size:15px}
.footer-legal-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.footer-seo-panel{margin-bottom:4px}
.legal-page h1{margin:0;font-size:34px;line-height:1.1}
.legal-page h2{margin:24px 0 10px;font-size:20px}
.legal-content{max-width:860px}
.legal-content p{margin:0 0 12px}

@media (max-width:920px){
  .seo-pill-grid,.seo-pill-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .seo-pill-grid,.seo-pill-grid.compact{grid-template-columns:1fr}
  .legal-page h1{font-size:28px}
}

/* ============================= */
/* Footer */
/* ============================= */

.footerlinks{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:30px;
  font-size:14px;
}

.footerlinks a{
  padding:6px 10px;
  border-radius:6px;
  background:#0f172a;
  color:#fff;
  text-decoration:none;
  opacity:.9;
}

.footerlinks a:hover{
  opacity:1;
}

.footer-meta{
  margin-top:18px;
  text-align:center;
  font-size:14px;
}

.footer-sites{
  margin-bottom:8px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.footer-contact{
  margin-top:4px;
}

.footer-legal-links{
  margin-top:10px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.footer-source{
  margin-top:12px;
  font-size:13px;
  opacity:.75;
}
@media (max-width:720px){
  .panel.home-intro .panel-head > h1{
    text-align:center !important;
  }
}