:root{
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #4b5563;
  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --border: #e5e7eb;
  --control-h: 44px;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
}
[data-theme="dark"]{
  --bg: #0f172a;
  --card: #111827;
  --text: #f8fafc;
  --muted: #a1a1aa;
  --accent: #22c55e;
  --accent-contrast: #00110a;
  --border: #1f2937;
  --shadow: 0 12px 30px rgba(0,0,0,0.35);
}
*{ box-sizing: border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; }
a{ color:var(--accent); text-decoration:none; }
.appbar{ display:flex; align-items:center; justify-content:space-between; padding:24px; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#22c55e, #2563eb); color:#fff; display:grid; place-items:center; font-weight:700; }
.titles h1{ margin:0; font-size:22px; }
.subtitle{ margin:0; color:var(--muted); }
.nav{ display:flex; gap:12px; flex-wrap:wrap; }
.nav a{ padding:10px 12px; border:1px solid var(--border); background:var(--card); border-radius:12px; }
.actions{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.icon-btn{ width:44px; height:44px; border-radius:12px; border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow); cursor:pointer; }
.cta{ background:var(--accent); color:var(--accent-contrast); padding:12px 16px; border-radius:14px; box-shadow:var(--shadow); }

.container{ max-width:1100px; margin:0 auto; padding:0 24px 80px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow:var(--shadow); }

.converter .fields{ display:grid; grid-template-columns: 1fr auto 1fr; gap:12px; align-items:end; }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.swap{ width:54px; height:var(--control-h); border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.amount-row{ margin-top:12px; display:flex; gap:12px; align-items:end; }
.amount-row .grow{ flex:1; }
input[type=number], input[type=date]{ height:var(--control-h); width:100%; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--text); padding:0 14px; line-height:var(--control-h); }
.btn{ height:var(--control-h); padding:0 18px; border-radius:12px; border:none; background:var(--accent); color:var(--accent-contrast); cursor:pointer; box-shadow:var(--shadow); }
.btn.secondary{ background:transparent; color:var(--accent); border:1px solid var(--accent); }

.result{ margin-top:14px; border-top:1px dashed var(--border); padding-top:12px; }
.result-text{ font-size:28px; font-weight:800; }
.result-meta{ color:var(--muted); font-size:12px; text-align:right; }

.history-card{ margin-top:14px; border-top:1px dashed var(--border); padding-top:12px; }
.history-title{ margin:0 0 8px 0; font-size:14px; color:var(--muted); }
.history-chart-wrap{ width:100%; min-height:140px; }

.rates{ margin-top:24px; }
.rates-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.base-select{ min-width:260px; }
.rates-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.rates-table th, .rates-table td{ padding:12px 10px; border-bottom:1px dashed var(--border); }
.rates-table td.rate{ font-variant-numeric: tabular-nums; }
.delta.positive{ color:#16a34a; } .delta.negative{ color:#dc2626; }

.foot{ margin-top:20px; color:var(--muted); }

/* Select2 alignment & rounding */
.select2-container{ width:100% !important; }
.select2-selection__rendered .currency-pill .flag{ width:20px; height:15px; border-radius:4px; }
.select2-container--default .select2-selection--single{
  height: var(--control-h) !important;
  border-radius:12px !important;
  display:flex; align-items:center;
  border:1px solid var(--border);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  height: var(--control-h) !important;
  line-height:1 !important;
  display:flex; align-items:center;
  padding-left:44px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height: var(--control-h) !important; }
.currency-pill{ display:flex; align-items:center; gap:10px; }
.currency-pill .flag{ border-radius:4px; }

/* ---------- Mobile/layout tweaks ---------- */
@media (max-width: 720px) {
  .appbar { flex-wrap: wrap; gap: 12px; }
  .actions { margin-left: auto; }
  .cta { padding: 10px 14px; border-radius: 12px; }
  .nav { width:100%; }

  /* Stack selects */
  .converter .fields {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .swap {
    justify-self: center;
    width: 48px;
    height: var(--control-h);
    margin: 2px 0 6px;
  }

  /* Amount + Convert */
  .amount-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .amount-row .btn { width: 100%; }

  .result-text { font-size: 22px; }
  .result-meta { text-align: left; margin-top: 4px; }
  .history-chart-wrap { min-height: 200px; }

  .rates-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .base-select { min-width: 0; }
  .rates-table { display: block; width: 100%; overflow-x: auto; }
  .rates-table > * { min-width: 640px; }

  .select2-container--default .select2-selection--single,
  input[type=number], input[type=date] { height: 48px !important; }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 48px !important; padding-left: 44px !important;
  }
}
@media (max-width: 400px) {
  .result-text { font-size: 20px; }
  .logo { width: 36px; height: 36px; border-radius: 10px; }
}

.history-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.history-range{ height: var(--control-h); border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--text); padding:0 12px; }
@media (max-width: 720px){
  .history-head{ flex-direction:column; align-items:stretch; }
  .history-range{ width:100%; }
}