: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} html,body{height:100%}
html { background-color: #0b0f17; }
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;
}

/* Glass background */
.bg-gradient {
  position: fixed;
  inset: 0;
  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%);
  filter: saturate(120%) blur(.2px);
  z-index: -2;
  pointer-events: none;
}

/* Keep content constrained */
.shell { width: min(1100px, 92%); margin-inline: auto; }

/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:24px 0}
.brand{display:flex;gap:14px;align-items:center}

/* Glass logo box */
.logo-box{
  width: 44px; height: 44px; display:grid; place-items:center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.logo-emoji{ font-size: 22px; line-height: 1; }

.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}
.pill.link{cursor:pointer}

#dateTimePill { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 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)}
.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}

/* Currency chip (flag left + code right) */
.currency-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 15px;
}
.currency-chip .flag { font-size: 20px; line-height: 1; }
.currency-chip .code { font-size: 15px; }

/* Match input height with chip */
.input-with-prefix input {
  height: 40px;
  padding: 0 12px;
}

/* Inputs / selects */
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;
}
input:focus,select:focus{border-color:var(--accent)}
.segmented{display:flex;background:rgba(255,255,255,.06);border:1px solid var(--border);
  border-radius:12px;padding:4px;gap:6px}
.seg{flex:1;padding:8px 10px;border-radius:8px;background:transparent;border:none;cursor:pointer;
  color:var(--text);font-weight:700}
.seg.active{background:rgba(255,255,255,.18)}

/* 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}
.btn.primary:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-strong));border-color:transparent}

/* Results */
.results{display:grid;gap:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.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)}
.stat .label{color:var(--muted);font-size:13px}
.stat .value{font-weight:800;font-size:20px}
.stat .value.accent{color:var(--ok)}

.bullets{margin:0;padding:0 0 0 18px}
.bullets li{margin:8px 0}
.micro{font-size:12px}
footer.foot{padding:32px 0 50px}

.foot { text-align: center; margin-top: 2rem; }
.footer-text { display: inline-block; line-height: 1.4; }
.footer-text a { color: var(--accent); text-decoration: none; font-weight: 600; }
.footer-text a:hover { text-decoration: underline; }

/* --- Modal (v2.1 centered + animated + stronger blur) --- */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 5vh 16px;
}
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
.modal-dialog {
  position: relative;
  width: min(640px, 92vw);
  margin: 0;
  border-radius: var(--radius);
  padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transform-origin: center;
  will-change: transform, opacity;
  animation: modalIn 240ms cubic-bezier(.2,.7,.2,1) both;
}
.modal-dialog h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: .3px; }
.modal-close {
  position: absolute; top: 10px; right: 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,.08); color: var(--text);
  font-weight: 800; padding: 6px 10px; cursor: pointer;
}
.modal-dialog.closing { animation: modalOut 180ms cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes modalIn { from { opacity:0; transform:scale(.94) translateY(6px);} to{ opacity:1; transform:scale(1) translateY(0);} }
@keyframes modalOut { from { opacity:1; transform:scale(1) translateY(0);} to{ opacity:0; transform:scale(.94) translateY(6px);} }

body.modal-open { overflow: hidden; }

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

/* ========= Added Micro-interactions & Motion ========= */

/* Motion tokens */
:root{
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-quick: 160ms;
  --dur-med: 320ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Subtle transitions */
.card.glass,
.pill,
.btn,
.seg,
.input-with-prefix input,
select {
  transition:
    transform var(--dur-quick) var(--ease),
    box-shadow var(--dur-quick) var(--ease),
    background-color var(--dur-quick) var(--ease),
    border-color var(--dur-quick) var(--ease),
    opacity var(--dur-quick) var(--ease);
}

.card.glass:hover { transform: translateY(-2px); }
.pill:hover { transform: translateY(-1px); }
.seg.active { box-shadow: 0 6px 20px rgba(124,156,255,.18) inset; }

/* Staggered reveal on load */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp .5s var(--ease) both;
  animation-delay: var(--delay, 0ms);
}
.results .stat.reveal { animation-name: popIn; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0% { opacity: 0; transform: translateY(8px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Currency chip bump */
.currency-chip.bump { animation: bump .36s var(--ease) both; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Flash hint for changing labels */
.flash { animation: flash 680ms var(--ease) both; }
@keyframes flash {
  0% { color: var(--text); }
  30% { color: var(--accent); }
  100% { color: var(--text); }
}