/* Dark UI hint + iOS background beyond body */
:root { color-scheme: dark; }

:root{
  --bg:#0b0f17; --bg2:#0e1320; --card:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.18); --text:#eef3ff; --muted:#b5c0da;
  --accent:#7c9cff; --accent-strong:#5b7bff; --ok:#46e0b3;
  --shadow:0 20px 60px rgba(0,0,0,.35); --radius:18px;
}

*{box-sizing:border-box}

/* Prevent horizontal scroll on mobile */
html,body{min-height:100%; position:relative; overflow-x:hidden;}
html{ background:#070a11; }

.logo-box {
  display:flex;align-items:center;justify-content:center;
  width:44px; height:44px; font-size:22px; border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  border:1px solid var(--border);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:var(--shadow);
  color:var(--accent);
  transition:transform .25s ease, filter .25s ease;
}

body{
  margin:0;
  color:var(--text);
  background:linear-gradient(180deg,#070a11 0%,#0e1425 100%);
  font:16px/1.35 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}

/* Full-viewport gradient (fixed to avoid pushing layout) */
.bg-gradient {
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at -10% -10%, rgba(92,130,255,.25), transparent 60%),
    radial-gradient(35vmax 35vmax at 110% -10%, rgba(67,230,179,.18), transparent 70%),
    radial-gradient(40vmax 40vmax at 50% 120%, rgba(124,156,255,.12), transparent 60%),
    linear-gradient(180deg, #070a11 0%, #0e1425 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Fallback if d*vw/d*vh unsupported */
@supports not (width: 100dvw) {
  .bg-gradient{
    width: 100vw;
    height: 100vh;
  }
}

/* Keep content constrained */
.shell{
  width:min(1100px, 92vw);
  margin-inline:auto;
  padding-left:max(0px, env(safe-area-inset-left));
  padding-right:max(0px, env(safe-area-inset-right));
}

/* Header */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(24px + env(safe-area-inset-top)) 0 24px 0;
}
.brand{display:flex;gap:14px;align-items:center}
.logo{font-size:28px}
.title h1{margin:0;font-size:20px;letter-spacing:.3px}
.title p{margin:2px 0 0;color:var(--muted);font-size:13px}
.header-actions{display:flex;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  border:1px solid var(--border);backdrop-filter:blur(8px) saturate(140%);box-shadow:var(--shadow);
  color:var(--text);text-decoration:none;font-weight:600;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.pill.link{cursor:pointer}
#dateTimePill{ white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Status indicator */
.pill .dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.pill.online .dot{background:var(--ok)}
.pill.offline .dot{background:#ff6b6b}

/* Grid + Cards */
.grid{display:grid;gap:18px;grid-template-columns:1.2fr 1fr}
.card.glass{
  padding:20px 20px 16px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  border:1px solid var(--border);backdrop-filter:blur(14px) saturate(140%);box-shadow:var(--shadow);
  transition:transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.card h2{margin:0 0 12px;font-size:16px;letter-spacing:.3px}

/* Form */
.row{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{font-weight:700;font-size:13px;letter-spacing:.25px}
.muted{color:var(--muted)}
.input-with-prefix{display:flex;align-items:center;gap:8px}
.input-with-prefix span{
  min-width:100px; display:flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:8px 12px;border-radius:10px;
  background:rgba(255,255,255,.08);border:1px solid var(--border);
  font-weight:700;letter-spacing:.3px;
  transition:transform .25s ease, filter .25s ease;
}
input,select,button{font:inherit;color:var(--text)}
input,select{
  width:100%;background:rgba(11,15,23,.6);border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;outline:none;transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,156,255,.25)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;
  border-radius:12px;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(124,156,255,.25),rgba(124,156,255,.12));
  cursor:pointer;font-weight:800;letter-spacing:.3px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn.sm{padding:8px 10px;font-weight:700}
.btn.primary:hover,
.btn:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.btn:active{ transform:translateY(0) scale(1.0); }
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-strong));border-color:transparent}

/* Results */
.results{display:grid;gap:14px}
.stat{
  display:flex;align-items:baseline;justify-content:space-between;padding:12px;border-radius:12px;
  border:1px dashed var(--border);background:rgba(255,255,255,.04);
  transition:background .2s ease, transform .2s ease;
}
.stat .label{color:var(--muted);font-size:13px}
.stat .value{font-weight:800;font-size:20px; display:flex; align-items:center; gap:8px;}
.stat .value.accent{color:var(--ok)}

/* Emphasized rate/update row */
#fx-meta .value{
  font-size:15px;font-weight:700;line-height:1.35;text-align:right;
  display:flex;flex-direction:column;gap:4px;
}
#fx-meta #fx-rate{ color:var(--accent); }
#fx-meta #fx-updated{ color:var(--muted); font-weight:600; font-size:13px; }

/* Chart + Summary */
.chart-card .chart-head,
.summary-card .chart-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px
}
.chart-card .chart-actions{display:flex;gap:8px}
.chart-wrap{
  position:relative;
  border:1px dashed var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  padding:10px;
  overflow:hidden; /* contain hover marker/tooltip */
}
#fx-chart{width:100%;max-width:100%;height:auto;display:block}

/* Chart tooltip */
.chart-tip{
  position:absolute; pointer-events:none;
  transform:translate(-50%, -120%);
  padding:8px 10px;border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid var(--border); backdrop-filter:blur(10px) saturate(140%);
  box-shadow:var(--shadow); color:var(--text); font-size:12px; white-space:nowrap;
  opacity:0; transition:opacity .12s ease, transform .12s ease; z-index:2;
}
.chart-tip.show{ opacity:1; transform:translate(-50%, -130%); }
.chart-tip .date{ color:var(--muted); margin-left:6px; }

/* Summary card tweaks */
.summary-card .results .stat .value{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px; text-align:right;
}
.summary-card .results .stat .value .sub{ color:var(--muted); font-weight:600; font-size:13px; }
#fx-chg.pos{ color: var(--ok); }
#fx-chg.neg{ color: #ff6b6b; }

/* Footer (micro size, link wrap) */
footer.foot{
  padding:32px 0 calc(50px + env(safe-area-inset-bottom));
  text-align:center;
  margin-top:2rem
}
.footer-text{
  display:inline-block; line-height:1.4; font-size:12px; color:var(--muted);
  overflow-wrap:anywhere;
}
.footer-text a{color:var(--accent); text-decoration:none; font-weight:600; font-size:12px}
.footer-text a:hover{text-decoration:underline}

/* ---------- Animated Flag Loader ---------- */
.flag-loader[hidden]{ display:none !important; }
.flag-loader{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; font-size:16px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

@keyframes flagSpin {
  0%{ transform:rotate(0deg) scale(1) }
  60%{ transform:rotate(300deg) scale(1.06) }
  100%{ transform:rotate(360deg) scale(1) }
}
.flag-loader.spin { animation: flagSpin .9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .flag-loader.spin { animation: none }
  .flag-loader { opacity:.7 }
}

/* ---------- Motion ---------- */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes glassPop {
  0% { transform:scale(.98); filter:saturate(90%) }
  60%{ transform:scale(1.015) }
  100%{ transform:scale(1) ; filter:saturate(100%) }
}
@keyframes bump {
  0%{ transform:translateY(0) scale(1) }
  40%{ transform:translateY(-2px) scale(1.03) }
  100%{ transform:translateY(0) scale(1) }
}
@keyframes flash {
  0%{ box-shadow:0 0 0 0 rgba(124,156,255,.45) }
  100%{ box-shadow:0 0 0 10px rgba(124,156,255,0) }
}

/* staged reveal */
.reveal-init { opacity:0; transform:translateY(8px) }
.reveal-active { animation:fadeUp .5s ease forwards }
.card.reveal-active { animation:fadeUp .5s ease forwards, glassPop .6s ease 80ms }

/* currency prefix bump */
.prefix-bump { animation:bump .32s ease }

/* briefly flash selects when changed */
.flash { animation:flash .6s ease }

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-active, .card.reveal-active, .prefix-bump, .flash,
  .btn, .pill, .input-with-prefix span { animation:none !important; transition:none !important }
}

/* Responsive */
@media (max-width:920px){
  .grid{grid-template-columns:1fr}
  .header-actions{display:none}
}