:root {
  color-scheme: dark;
  --kr-primary: #4ade80;
  --kr-primary-light: #dcfce7;
  --kr-accent: #10b981;
  --kr-danger: #ef4444;
  --kr-warning: #f59e0b;
  --kr-text: #111827;
  --kr-muted: #6b7280;
  --kr-border: #e5e7eb;
  --kr-surface: #f9fafb;
  --font-main: 'Inter', system-ui, sans-serif;
  --bg: #101214;
  --hero: #101820;
  --panel: #1c2227;
  --panel-2: #242b31;
  --panel-3: #2b333a;
  --ink: #f4f7f8;
  --muted: #a7b3ba;
  --faint: #78858d;
  --line: rgba(255, 255, 255, 0.11);
  --primary: #20b59f;
  --amber: #d6a94a;
  --coral: #e36d5a;
  --blue: #86efac;
  --green: #5bd28b;
  --shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
}
a { color: inherit; }
.hero {
  background:
    radial-gradient(circle at 22% 16%, rgba(74, 222, 128, 0.16), transparent 32%),
    radial-gradient(circle at 88% 2%, rgba(16, 185, 129, 0.18), transparent 34%),
    linear-gradient(115deg, rgba(34, 197, 94, 0.12), transparent 48%),
    var(--hero);
  border-bottom: 1px solid var(--line);
  padding: 12px clamp(16px, 4vw, 56px) 18px;
  overflow: hidden;
  position: relative;
}
.hero::before {
  background: url("./radar-logo.svg") center / contain no-repeat;
  content: "";
  height: clamp(190px, 22vw, 330px);
  left: 50%;
  opacity: .085;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -48%) rotate(-10deg);
  width: clamp(190px, 22vw, 330px);
}
.hero > * { position: relative; z-index: 1; }
.nav, .hero-grid, main { margin: 0 auto; max-width: 1440px; }
.nav { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.top-bar { min-height: 64px; }
.brand { align-items: center; display: inline-flex; font-size: clamp(26px, 2.25vw, 34px); font-weight: 950; gap: 15px; letter-spacing: .02em; text-decoration: none; }
.brand-logo {
  border-radius: 999px; display: block; flex: 0 0 auto; height: clamp(62px, 5.8vw, 82px);
  filter: drop-shadow(0 0 16px rgba(74,222,128,.48)); object-fit: contain; width: clamp(62px, 5.8vw, 82px);
}
.top-bar-meta {
  align-items: flex-end; color: var(--muted); display: grid; gap: 4px 10px;
  grid-template-columns: minmax(0, 1fr) auto; justify-items: end; min-width: 0;
}
.top-intelligence {
  color: #86e7d7; font-size: 11px; font-weight: 950; grid-column: 1 / 2;
  letter-spacing: .02em; text-transform: none; white-space: nowrap;
}
.top-avatar {
  align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; grid-column: 2; grid-row: 1 / 3;
  color: #dce7eb; display: inline-flex; flex: 0 0 auto; font-size: 10px; font-weight: 900; height: 28px; justify-content: center; width: 28px;
}
.brand-mark, .brand-badge {
  align-items: center; background: #f4f7f8; border-radius: 8px; color: #101820; display: inline-flex;
  font-size: 12px; font-weight: 950; height: 30px; justify-content: center; width: 30px;
}
.sync { color: var(--muted); font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-banner {
  align-items: center; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.34); border-radius: 8px;
  color: #fde68a; display: flex; font-size: 12px; font-weight: 600; gap: 12px; justify-content: space-between;
  line-height: 1.45; margin: 14px auto 0; max-width: 1440px; padding: 10px 12px;
}
.info-banner button {
  background: transparent; border: 0; color: #fde68a; cursor: pointer; flex: 0 0 auto; font-size: 20px;
  height: 28px; line-height: 1; padding: 0; width: 28px;
}
.hero-grid { align-items: center; display: grid; gap: clamp(18px, 3vw, 36px); grid-template-columns: minmax(760px, 1.24fr) minmax(340px, .56fr); padding-top: 10px; }
.hero-content { position: relative; }
.intro { max-width: 980px; }
.eyebrow { align-items: center; color: #86e7d7; display: flex; flex-wrap: wrap; font-size: 12px; font-weight: 900; gap: 9px; margin: 0 0 8px; text-transform: uppercase; }
.eyebrow span { border-left: 1px solid rgba(134,231,215,.34); color: #d4e6e2; padding-left: 9px; }
h1 { font-size: clamp(19px, 1.58vw, 24px); letter-spacing: 0; line-height: 1.08; margin: 0; max-width: 100%; white-space: nowrap; }
.hero-subtitle { color: #b8c8cf; font-size: 14px; line-height: 1.5; margin: 10px 0 0; max-width: 560px; }
.lead { color: #c8d3d8; font-size: 15px; line-height: 1.55; margin: 10px 0 0; max-width: 610px; }
.stats-panel { display: grid; gap: 8px; justify-self: end; max-width: 490px; width: 100%; }
.stats-glass-panel {
  backdrop-filter: blur(12px); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; box-shadow: 0 18px 54px rgba(0,0,0,.26), 0 0 42px rgba(74,222,128,.11); padding: 8px;
}
.snapshot { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.snapshot div {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  min-width: 0; overflow: hidden; padding: 10px 11px; position: relative; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.snapshot div:hover { border-color: rgba(134,239,172,.44); box-shadow: 0 0 28px rgba(74,222,128,.13); transform: translateY(-1px); }
.snapshot span { color: var(--kr-muted); display: block; font-size: 10px; font-weight: 500; letter-spacing: .05em; margin-bottom: 5px; text-transform: uppercase; }
.snapshot strong { color: #f8fafc; display: block; font-size: 23px; font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; transition: color 180ms ease; white-space: nowrap; }
.snapshot div:hover strong { color: #bbf7d0; }
.snapshot i { bottom: 6px; color: rgba(32,181,159,.22); font-size: 29px; font-style: normal; position: absolute; right: 8px; }
.hero-results { align-items: center; background: rgba(32,181,159,.08); border: 1px solid rgba(32,181,159,.22); border-radius: 8px; color: var(--muted); display: flex; font-size: 10px; font-weight: 900; min-height: 27px; overflow: hidden; padding: 7px 10px; text-overflow: ellipsis; white-space: nowrap; }
main { padding: 14px clamp(16px, 4vw, 56px) 54px; }
.toolbar {
  background: transparent; display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; padding: 8px 0 8px; position: sticky; top: 16px; transition: filter 180ms ease; z-index: 30;
}
.filter-toolbar.is-stuck { filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)); }
.filters {
  align-items: end; backdrop-filter: blur(18px); background: rgba(28,34,39,.78); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; box-shadow: 0 16px 38px rgba(0,0,0,.22);
  display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(120px, .9fr)) minmax(260px, 1.65fr) auto; padding: 12px;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.filter-toolbar.is-stuck .filters { background: rgba(21,26,31,.92); border-color: rgba(134,239,172,.2); box-shadow: 0 22px 54px rgba(0,0,0,.34), 0 0 28px rgba(74,222,128,.1); }
.filters > label { min-width: 0; }
label span { color: var(--muted); display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; }
select, input {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  font-size: 14px; height: 40px; outline: none; padding: 0 11px; width: 100%;
}
select:focus, input:focus { border-color: rgba(32,181,159,.85); box-shadow: 0 0 0 3px rgba(32,181,159,.14); }
.filter-switches { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; height: auto; min-height: 38px; min-width: 0; }
.hero-switches { margin-top: 12px; max-width: 760px; }
.toggle { align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; display: flex; gap: 8px; height: 36px; padding: 0 11px; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
.toggle::before { background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 999px; content: ""; height: 13px; width: 13px; }
.toggle:hover { background: rgba(255,255,255,.08); border-color: rgba(32,181,159,.38); }
.toggle:has(input:checked) { background: rgba(32,181,159,.14); border-color: rgba(32,181,159,.62); color: #f4f7f8; }
.toggle:has(input:checked)::before { background: var(--primary); border-color: transparent; box-shadow: 0 0 0 4px rgba(32,181,159,.14); }
.toggle input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.toggle span { font-size: 12px; margin: 0; white-space: nowrap; }
.action-toggle { color: #dce7eb; font: inherit; font-weight: 800; }
.action-toggle::before { display: none; }
.action-toggle:hover { color: #f4f7f8; transform: translateY(-1px); }
.bank-rail { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; }
.bank-chip {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); flex: 0 0 auto;
  font-size: 13px; font-weight: 850; padding: 9px 12px; position: relative; text-decoration: none; transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.bank-chip:hover { background: var(--panel-2); border-color: rgba(32,181,159,.42); color: #e7f5f2; transform: translateY(-1px); }
.bank-chip.selected { background: rgba(32,181,159,.12); border-color: rgba(32,181,159,.48); color: #f4f7f8; }
.bank-chip.selected::after { background: var(--primary); border-radius: 999px; bottom: -1px; content: ""; height: 2px; left: 12px; position: absolute; right: 12px; }
.calculator-panel {
  background: linear-gradient(145deg, rgba(28,34,39,.96), rgba(21,26,31,.96)); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; box-shadow: 0 22px 58px rgba(0,0,0,.32), 0 0 42px rgba(74,222,128,.09);
  display: grid; gap: 18px; margin: 16px auto 0; max-width: 1180px; padding: clamp(18px, 3vw, 30px); width: 100%;
}
.calculator-panel[hidden] { display: none; }
.calculator-panel p { color: #b8c8cf; font-size: 14px; }
.calculator-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }
.kr-slider-row {
  align-content: start; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 82px; margin: 0; padding: 12px;
}
.kr-slider-row label { color: #a8b4bb; font-size: 12px; font-weight: 800; grid-column: 1 / -1; }
.kr-slider-row input[type="range"] { grid-column: 1 / -1; height: 30px; min-width: 0; padding: 0; width: 100%; }
.manual-spend { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: #eef5f7; font-size: 12px; font-weight: 700; height: 32px; min-width: 0; padding: 0 8px; width: 100%; }
.manual-spend:focus { border-color: rgba(32,181,159,.85); box-shadow: 0 0 0 3px rgba(32,181,159,.12); outline: none; }
.kr-slider-row span { align-self: center; color: #dce7eb; font-size: 12px; font-weight: 800; text-align: right; }
.calculator-total {
  align-items: center; background: rgba(32,181,159,.08); border: 1px solid rgba(32,181,159,.18); border-radius: 12px;
  color: #dce7eb; display: flex; flex-wrap: wrap; font-size: 13px; font-weight: 800; gap: 14px; justify-content: space-between; padding: 10px 12px;
}
.calculator-total strong { color: #86e7d7; }
.calculator-results { display: grid; gap: 8px; }
.calculator-result {
  align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: #dce7eb;
  cursor: pointer; display: flex; gap: 12px; justify-content: space-between; min-height: 46px; padding: 11px 14px; text-align: left;
}
.calculator-result:hover { border-color: rgba(74,222,128,.5); box-shadow: 0 0 0 3px rgba(74,222,128,.12); }
.calculator-result span { color: #dce7eb; font-size: 13px; font-weight: 800; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calculator-result strong { color: #86e7d7; font-size: 14px; white-space: nowrap; }
.settings-open { align-self: end; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; color: #dce7eb; cursor: pointer; font-size: 17px; font-weight: 900; height: 40px; justify-self: end; min-height: 40px; padding: 0; white-space: nowrap; width: 42px; }
.settings-open:hover { background: rgba(32,181,159,.13); border-color: rgba(32,181,159,.45); color: #f4f7f8; }
.settings-hint {
  align-self: start; color: rgba(167,179,186,.72); font-size: 11px; font-weight: 650; grid-column: 1 / -1;
  line-height: 1.35; margin: -2px 2px 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings-drawer { background: transparent; border: 0; color: var(--ink); height: 100vh; inset: 0 0 0 auto; margin: 0 0 0 auto; max-height: 100vh; max-width: min(500px, calc(100vw - 20px)); padding: 0; position: fixed; width: min(500px, calc(100vw - 20px)); }
.settings-drawer::backdrop { background: rgba(0,0,0,.58); backdrop-filter: blur(6px); }
.settings-shell { background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; min-height: 100%; overflow: auto; padding: 18px; }
.settings-head { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.settings-head span { color: var(--primary); display: block; font-size: 11px; font-weight: 950; margin-bottom: 5px; text-transform: uppercase; }
.settings-head h2 { font-size: 24px; }
.settings-close { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); cursor: pointer; height: 36px; min-height: 36px; padding: 0; width: 36px; }
.settings-copy { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.settings-drawer .manual-entry, .settings-drawer .my-cards-panel, .settings-drawer .value-panel, .settings-drawer .health-panel, .settings-drawer .history-panel { margin: 0; }
.settings-drawer .manual-form { grid-template-columns: 1fr; }
.manual-entry, .my-cards-panel, .value-panel, .history-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin: 0 0 16px; padding: 0; }
.manual-entry summary, .my-cards-panel summary, .value-panel summary, .history-panel summary { color: #dce7eb; cursor: pointer; font-size: 13px; font-weight: 950; list-style: none; padding: 14px 16px; }
.manual-entry summary::-webkit-details-marker, .my-cards-panel summary::-webkit-details-marker, .value-panel summary::-webkit-details-marker, .history-panel summary::-webkit-details-marker { display: none; }
.manual-entry summary::after, .my-cards-panel summary::after, .value-panel summary::after, .history-panel summary::after { color: var(--primary); content: "+"; float: right; font-size: 18px; line-height: 1; }
.manual-entry[open] summary::after, .my-cards-panel[open] summary::after, .value-panel[open] summary::after, .history-panel[open] summary::after { content: "-"; }
.my-cards-grid { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; }
.card-pick { align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; display: inline-flex; gap: 8px; min-height: 38px; padding: 0 11px; }
.card-pick input { accent-color: var(--primary); height: 16px; width: 16px; }
.card-pick span { color: #dce7eb; font-size: 13px; font-weight: 900; margin: 0; }
.spend-control { border-top: 1px solid var(--line); display: grid; gap: 12px; padding: 14px; }
.spend-control label { align-items: center; display: flex; justify-content: space-between; }
.spend-control label span { margin: 0; }
.spend-control strong { color: var(--primary); font-size: 18px; }
.spend-control input { accent-color: var(--primary); padding: 0; }
.conversion-note { border-left: 3px solid #e5e7eb; color: var(--muted); font-size: 11px; line-height: 1.45; padding-left: 8px; }
.health-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin: 0 0 16px; }
.health-panel summary { color: #dce7eb; cursor: pointer; font-size: 13px; font-weight: 950; list-style: none; padding: 14px 16px; }
.health-panel summary::-webkit-details-marker { display: none; }
.health-panel summary::after { color: var(--primary); content: "+"; float: right; font-size: 18px; line-height: 1; }
.health-panel[open] summary::after { content: "-"; }
.health-grid { border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.health-item { align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid rgba(156,163,175,.7); border-radius: 8px; display: grid; gap: 6px 10px; grid-template-columns: minmax(88px, 1fr) auto auto; padding: 12px; }
.health-item.health-fresh { border-left-color: #10b981; }
.health-item.health-warn { border-left-color: #f59e0b; }
.health-item.health-stale { background: rgba(227,109,90,.08); border-color: rgba(227,109,90,.34); border-left-color: #ef4444; }
.health-item strong, .health-item span, .health-item small { display: block; }
.health-item strong { font-size: 13px; }
.health-item span { color: var(--muted); font-size: 12px; font-weight: 850; }
.health-item small { color: var(--faint); font-size: 11px; font-weight: 850; text-align: right; }
.history-shell { border-top: 1px solid var(--line); display: grid; gap: 12px; padding: 14px; }
.history-summary { color: #dce7eb; font-size: 13px; font-weight: 850; }
.history-list { display: grid; gap: 8px; }
.history-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 4px; padding: 10px; }
.history-item span { color: #dce7eb; font-size: 12px; font-weight: 800; }
.history-item strong { color: var(--primary); font-size: 12px; }
.history-item small, .history-empty { color: var(--muted); font-size: 12px; }
.history-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.danger-button { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.34); border-radius: 8px; color: #fca5a5; cursor: pointer; font-size: 13px; font-weight: 800; min-height: 40px; padding: 0 14px; }
.danger-button:hover { background: rgba(239,68,68,.18); }
.manual-form { border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: minmax(180px,1.1fr) minmax(180px,1.3fr) minmax(180px,1fr) minmax(180px,1fr) auto; padding: 14px; }
.campaigns { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.state-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; grid-column: 1/-1;
  padding: 42px clamp(18px, 4vw, 46px); text-align: center;
}
.state-panel h2 { color: var(--ink); font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.state-panel p { color: var(--muted); margin: 0 auto; max-width: 560px; }
.state-panel p strong { color: #dce7eb; font-weight: 700; }
.state-icon { display: block; margin: 0 auto 14px; }
.loading-spinner { animation: spin 1s linear infinite; color: #1a56db; display: block; margin: 0 auto 12px; }
.skeleton-state-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.skeleton-state-card { background: #fff; border: 1px solid var(--kr-border); border-radius: 10px; padding: 14px; text-align: left; }
.skeleton {
  animation: shimmer 1.4s infinite; background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size: 400px 100%; border-radius: 8px; height: 16px;
}
.skeleton-title { margin-bottom: 12px; width: 100%; }
.skeleton-line { margin-bottom: 8px; width: 86%; }
.skeleton-line.short { width: 64%; }
.skeleton-footer { margin-top: 16px; width: 42%; }
.state-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.secondary-button, .secondary-link {
  align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: #dce7eb;
  cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 800; justify-content: center; min-height: 40px; padding: 0 14px; text-decoration: none;
}
.secondary-button:hover, .secondary-link:hover { background: rgba(255,255,255,.08); border-color: rgba(32,181,159,.38); color: #f4f7f8; }
.apply-button {
  align-items: center; background: linear-gradient(135deg, rgba(74,222,128,.96), rgba(32,181,159,.94));
  border: 1px solid rgba(134,239,172,.55); border-radius: 10px; box-shadow: 0 12px 24px rgba(16,185,129,.18);
  color: #04110f; cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 950; justify-content: center;
  min-height: 40px; padding: 0 16px; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.apply-button:hover { box-shadow: 0 16px 30px rgba(16,185,129,.25); filter: brightness(1.05); transform: translateY(-1px); }
.apply-button:active { transform: translateY(0); }
.urgent-banner {
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.36); border-radius: 8px; color: #fde68a;
  display: grid; gap: 10px; grid-column: 1/-1; padding: 14px;
}
.urgent-banner-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.urgent-banner strong { color: #fff7d6; font-size: 14px; }
.urgent-banner ul { color: #f8d783; display: grid; font-size: 12px; gap: 5px; list-style: none; margin: 0; padding: 0; }
.campaign-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 16px 38px rgba(0,0,0,.18); display: flex; flex-direction: column; min-height: 100%; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, opacity 200ms ease; }
.campaign-card:hover { border-color: rgba(32,181,159,.42); box-shadow: var(--shadow); transform: translateY(-2px); }
.campaign-card.is-expired { opacity: .5; }
.campaign-card.deadline-warning-card { border-color: rgba(245,158,11,.38); }
.campaign-card.deadline-danger-card { border-color: rgba(239,68,68,.5); }
.campaign-card.urgent-hours-card { border-left: 4px solid #ef4444; }
.campaign-card.urgent-days-card { border-left: 4px solid #f59e0b; }
.campaign-card.calculator-highlight { outline: 2px solid #1a56db; outline-offset: 3px; }
.campaign-card.used-card { border-left: 4px solid #10b981; }
.radar-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.radar-card.is-expired { filter: grayscale(1); opacity: .5; }
.card-header { align-items: center; display: grid; gap: 10px; grid-template-columns: 32px minmax(0, 1fr) 34px; }
.bank-logo { align-items: center; background: var(--logo-bg, #3b82f6); border-radius: 999px; display: inline-flex; height: 32px; justify-content: center; overflow: hidden; width: 32px; }
.bank-logo img { display: block; height: 100%; object-fit: cover; width: 100%; }
.bank-logo span { color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.card-bank-meta { display: grid; gap: 4px; min-width: 0; }
.card-bank-meta strong { color: #eef5f7; font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-bank-meta .category-badge { align-self: start; font-size: 10px; padding: 5px 7px; }
.card-body { align-content: start; display: grid; gap: 4px; min-height: 72px; }
.card-title { display: -webkit-box; font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card-description { color: var(--muted); display: -webkit-box; font-size: 12px; line-height: 1.45; margin: 0; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-footer { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; min-height: 32px; }
.card-source { display: grid; gap: 10px; margin-top: auto; padding-top: 2px; }
.card-source span { color: var(--faint); font-size: 10px; font-weight: 500; }
.source-disclaimer { border-top: 1px solid #f3f4f6; color: #9ca3af; display: block; font-size: 10px; margin-top: 6px; padding-top: 6px; }
.source-button { align-items: center; background: transparent; border: 1px solid rgba(74,222,128,.48); border-radius: 8px; color: #bbf7d0; cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 700; gap: 6px; justify-content: center; min-height: 36px; padding: 0 12px; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.source-button:hover { background: var(--kr-primary); border-color: var(--kr-primary); color: #fff; }
.used-button { align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: #dce7eb; cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 800; justify-content: center; min-height: 34px; padding: 0 12px; }
.used-button:hover { border-color: rgba(16,185,129,.46); color: #86efac; }
.used-button.is-used { border-color: #10b981; color: #10b981; cursor: default; }
.media { align-items: center; aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(32,181,159,.16), rgba(214,169,74,.1)), var(--panel-3); display: flex; justify-content: center; overflow: hidden; text-decoration: none; }
.media img { display: block; height: 100%; object-fit: cover; transition: transform 220ms ease; width: 100%; }
.campaign-card:hover .media img { transform: scale(1.035); }
.media-monogram { align-items: center; background: var(--logo-bg, #1a56db); border-radius: 18px; color: #fff; display: inline-flex; font-size: 42px; font-weight: 950; height: 96px; justify-content: center; width: 96px; }
.campaign-body { display: flex; flex: 1; flex-direction: column; gap: 15px; padding: 18px; }
.campaign-topline, .campaign-meta, .campaign-footer, .badges { align-items: center; display: flex; gap: 9px; }
.campaign-topline { justify-content: space-between; }
.campaign-meta { flex: 1; min-width: 0; }
.bank-name { color: #dce7eb; display: block; font-size: 12px; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status, .category-badge, .reward-badge, .date-badge, .gain-badge, .urgent-badge { border-radius: 999px; display: inline-flex; flex: 0 0 auto; font-size: 11px; font-weight: 950; line-height: 1; padding: 7px 9px; }
.status.active { background: rgba(91,210,139,.13); color: var(--green); }
.status.inactive { background: rgba(227,109,90,.13); color: var(--coral); }
.favorite-button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: #9ca3af; cursor: pointer; font-size: 19px; height: 34px; line-height: 1; transition: transform 150ms ease, background 150ms ease, color 150ms ease; width: 34px; }
.favorite-button:hover, .favorite-button.selected { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.42); color: #f59e0b; }
.favorite-button.is-bumping { animation: favorite-pop 150ms ease; }
.favorite-wrap { display: inline-grid; position: relative; }
.favorite-urgent-dot { background: #f59e0b; border: 2px solid var(--panel); border-radius: 999px; height: 10px; position: absolute; right: -2px; top: -2px; width: 10px; }
@keyframes favorite-pop { 50% { transform: scale(1.4); } }
.badges { flex-wrap: wrap; margin-bottom: 2px; }
.category-badge { background: rgba(156,163,175,.14); color: #cbd5e1; }
.category-travel { background: rgba(59,130,246,.16); color: #93c5fd; }
.category-food { background: rgba(249,115,22,.17); color: #fdba74; }
.category-market { background: rgba(16,185,129,.16); color: #86efac; }
.category-fuel { background: rgba(14,165,233,.16); color: #7dd3fc; }
.category-online { background: rgba(139,92,246,.17); color: #c4b5fd; }
.category-opportunity { background: rgba(245,158,11,.17); color: #fcd34d; }
.category-general { background: rgba(156,163,175,.14); color: #cbd5e1; }
.badge-kategori { background: #1f2937; color: #9ca3af; }
.badge-kategori[data-kategori="Market"],
.badge-kategori[data-kategori="market"],
.badge-kategori[data-kategori="Süpermarket"] { background: #14532d; color: #4ade80; }
.badge-kategori[data-kategori="Restoran"],
.badge-kategori[data-kategori="restoran"],
.badge-kategori[data-kategori="Yemek"] { background: #7f1d1d; color: #f87171; }
.badge-kategori[data-kategori="Akaryakıt"],
.badge-kategori[data-kategori="Yakıt"],
.badge-kategori[data-kategori="akaryakıt"] { background: #7c2d12; color: #fb923c; }
.badge-kategori[data-kategori="Seyahat"],
.badge-kategori[data-kategori="seyahat"] { background: #1e3a5f; color: #60a5fa; }
.badge-kategori[data-kategori="Online"],
.badge-kategori[data-kategori="online"],
.badge-kategori[data-kategori="E-ticaret"] { background: #4c1d95; color: #c4b5fd; }
.badge-kategori[data-kategori="Genel"],
.badge-kategori[data-kategori="genel"] { background: #1f2937; color: #9ca3af; }
.reward-badge { background: rgba(103,167,255,.13); color: var(--blue); }
.reward-tl, .reward-indirim { background: rgba(91,210,139,.16); color: #7ff0a7; }
.reward-card-tl { background: #d1fae5; color: #065f46; }
.reward-card-percent { background: #dbeafe; color: #1e40af; }
.reward-card-puan { background: #ede9fe; color: #5b21b6; }
.reward-card-mil { background: #fef3c7; color: #92400e; }
.reward-card-default { background: rgba(107,114,128,.18); color: #cbd5e1; }
.reward-percent { background: rgba(103,167,255,.17); color: #8fbdff; }
.reward-puan { background: rgba(214,169,74,.17); color: #f0cf7b; }
.reward-mil { background: rgba(245,158,11,.17); color: #f8c471; }
.reward-taksit { background: rgba(103,167,255,.17); color: #8fbdff; }
.reward-ayricalik { background: rgba(227,109,90,.16); color: #ff9a8c; }
.reward-firsat { background: rgba(178,143,255,.15); color: #c9b5ff; }
.date-badge { background: rgba(214,169,74,.13); color: #e9c878; }
.gain-badge { background: rgba(26,86,219,.18); color: #93c5fd; }
.deadline-neutral { background: rgba(107,114,128,.18); color: #cbd5e1; }
.deadline-warning { background: rgba(245,158,11,.18); color: #facc15; }
.deadline-danger { background: rgba(239,68,68,.2); color: #fca5a5; }
.deadline-expired { background: rgba(107,114,128,.12); color: #9ca3af; }
.pulse { animation: pulse-danger 1.1s ease-in-out infinite; }
@keyframes pulse-danger { 50% { box-shadow: 0 0 0 4px rgba(239,68,68,.16); } }
.urgent-badge { background: rgba(227,109,90,.18); color: #ff9a8c; }
.urgent-hours { background: rgba(239,68,68,.22); color: #fecaca; }
.urgent-days { background: rgba(245,158,11,.2); color: #fde68a; }
h2 { font-size: 18px; letter-spacing: 0; line-height: 1.34; margin: 0; }
.campaign-highlight { align-self: flex-start; background: rgba(32,181,159,.12); border: 1px solid rgba(32,181,159,.34); border-radius: 8px; color: #73f0dd; font-size: 18px; font-weight: 950; line-height: 1.15; padding: 9px 11px; }
p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.campaign-footer { border-top: 1px solid var(--line); justify-content: space-between; margin-top: auto; padding-top: 15px; }
.campaign-footer span { color: var(--faint); font-size: 10px; font-weight: 850; }
.campaign-footer a { align-items: center; background: #f4f7f8; border-radius: 8px; color: #101820; display: inline-flex; font-size: 13px; font-weight: 950; gap: 6px; padding: 9px 12px; text-decoration: none; }
.external-icon { font-size: 12px; line-height: 1; opacity: .72; }
.detail-button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: #dce7eb; cursor: pointer; font-size: 13px; font-weight: 950; min-height: 36px; padding: 0 12px; }
.detail-modal, .used-modal { background: transparent; border: 0; color: var(--ink); max-width: min(560px, calc(100vw - 28px)); padding: 0; }
.detail-modal::backdrop, .used-modal::backdrop { background: rgba(0,0,0,.62); backdrop-filter: blur(6px); }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 22px; position: relative; }
.modal-close { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); cursor: pointer; height: 34px; min-height: 34px; padding: 0; position: absolute; right: 14px; top: 14px; width: 34px; }
.modal-bank { color: var(--primary); display: block; font-size: 12px; font-weight: 950; margin: 0 42px 10px 0; }
.modal-title { margin: 0 42px 14px 0; }
.modal-description { margin: 14px 0 18px; }
.modal-link { align-items: center; background: var(--primary); border-radius: 8px; color: #04110f; display: inline-flex; font-size: 13px; font-weight: 950; gap: 7px; padding: 10px 13px; text-decoration: none; }
.used-modal-card { display: grid; gap: 14px; min-width: min(420px, calc(100vw - 32px)); }
.used-modal-card label { color: #a8b4bb; display: grid; font-size: 12px; font-weight: 800; gap: 7px; }
.used-modal-card input, .used-modal-card textarea { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: #eef5f7; font: inherit; padding: 10px 11px; resize: vertical; }
.used-modal-card input:focus, .used-modal-card textarea:focus { border-color: rgba(32,181,159,.85); box-shadow: 0 0 0 3px rgba(32,181,159,.12); outline: none; }
.used-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.empty { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; grid-column: 1/-1; padding: 44px 34px; text-align: center; }
.empty-icon { align-items: center; background: rgba(214,169,74,.14); border: 1px solid rgba(214,169,74,.28); border-radius: 8px; color: var(--amber); display: inline-flex; font-size: 28px; height: 56px; justify-content: center; margin-bottom: 16px; width: 56px; }
.empty .apply-button { margin-top: 16px; }
.empty-actions { align-items: center; display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.empty-actions a { background: #f4f7f8; border-radius: 8px; color: #101820; font-size: 13px; font-weight: 950; padding: 11px 13px; text-decoration: none; }
.error-state .empty-icon { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.32); color: #fca5a5; }
.site-disclaimer {
  color: #6b7280; font-size: 11px; line-height: 1.55; margin: 0 auto; max-width: 720px; padding: 24px 16px;
  text-align: center;
}
.site-links { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.site-links a {
  border: 1px solid rgba(32,181,159,.22); border-radius: 999px; color: #86e7d7; font-size: 11px; font-weight: 850;
  padding: 7px 10px; text-decoration: none;
}
.site-links a:hover { background: rgba(32,181,159,.1); border-color: rgba(32,181,159,.48); color: #d7fff7; }
.legal-page { background: var(--bg); min-height: 100vh; }
.legal-hero {
  background:
    radial-gradient(circle at 18% 12%, rgba(74,222,128,.14), transparent 32%),
    linear-gradient(135deg, rgba(32,181,159,.12), transparent 42%),
    var(--hero);
  border-bottom: 1px solid var(--line);
  padding: 12px clamp(18px, 4vw, 56px) 34px;
}
.legal-back {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  color: #dce7eb; font-size: 13px; font-weight: 850; padding: 10px 13px; text-decoration: none;
}
.legal-back:hover { background: rgba(32,181,159,.12); border-color: rgba(32,181,159,.42); color: #f4f7f8; }
.legal-title { margin: 34px auto 0; max-width: 900px; }
.legal-title span { color: #86e7d7; display: block; font-size: 12px; font-weight: 950; letter-spacing: .04em; margin-bottom: 10px; text-transform: uppercase; }
.legal-title h1 { color: #f8fafc; font-size: clamp(36px, 7vw, 76px); line-height: .96; margin: 0; white-space: normal; }
.legal-title p { color: #b8c8cf; font-size: 16px; line-height: 1.55; margin-top: 16px; max-width: 720px; }
.legal-main { display: grid; gap: 16px; max-width: 900px; padding: 28px clamp(18px, 4vw, 56px) 64px; }
.legal-card {
  background: rgba(28,34,39,.72); border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  box-shadow: 0 18px 46px rgba(0,0,0,.2); padding: clamp(18px, 3vw, 28px);
}
.legal-card h2 { color: #f8fafc; font-size: 22px; margin-bottom: 12px; }
.legal-card p, .legal-card li { color: #b8c8cf; font-size: 15px; line-height: 1.68; }
.legal-card ul { margin: 0; padding-left: 20px; }
.legal-card li + li { margin-top: 8px; }
.back-to-top { align-items: center; background: var(--primary); border: 0; border-radius: 8px; bottom: 22px; box-shadow: 0 16px 34px rgba(0,0,0,.32); color: #04110f; cursor: pointer; display: inline-flex; font-size: 22px; font-weight: 950; height: 44px; justify-content: center; opacity: 0; pointer-events: none; position: fixed; right: 22px; transform: translateY(10px); transition: opacity 160ms ease, transform 160ms ease; width: 44px; z-index: 50; }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
@media (max-width: 1180px) {
  .hero-grid, .filters { grid-template-columns: 1fr; }
  .calculator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-switches, .settings-open { grid-column: auto; justify-self: stretch; }
  .settings-hint { grid-column: 1 / -1; margin-top: 0; }
  .snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-panel { max-width: none; }
  .filter-switches { height: auto; }
  .manual-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { align-items: stretch; flex-direction: column; }
  .brand { font-size: 22px; }
  .brand-logo { height: 56px; width: 56px; }
  .top-bar-meta { align-items: flex-start; justify-items: start; }
  .top-intelligence { font-size: 10px; }
  h1 { font-size: 28px; line-height: 1.12; white-space: normal; }
  .hero::before { height: 230px; left: auto; opacity: .07; right: -74px; top: 178px; transform: rotate(-10deg); width: 230px; }
  .toolbar { position: static; }
  .hero-grid { gap: 16px; padding-top: 16px; }
  .filter-switches, .bank-rail { overflow-x: auto; padding-bottom: 4px; }
  .toggle, .settings-open { flex: 0 0 auto; }
  .health-item { align-items: start; grid-template-columns: 1fr; }
  .health-item small { text-align: left; }
  .snapshot { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calculator-grid { grid-template-columns: 1fr; }
  .snapshot div { padding: 10px 12px; }
  .snapshot strong { font-size: 22px; }
  .snapshot span { font-size: 10px; }
  .campaigns { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skeleton-state-grid { grid-template-columns: 1fr; }
  .campaign-card { border-radius: 7px; }
  .media { aspect-ratio: 4/3; }
  .campaign-body { gap: 9px; padding: 11px; }
  .brand-badge { border-radius: 7px; font-size: 10px; height: 28px; width: 28px; }
  .bank-name, .campaign-footer span, .campaign-card p { display: none; }
  .radar-card { gap: 10px; padding: 10px; }
  .radar-card .card-description { display: -webkit-box; }
  .card-header { gap: 8px; grid-template-columns: 32px minmax(0, 1fr) 32px; }
  .card-bank-meta strong { font-size: 11px; }
  .card-footer { align-items: flex-start; flex-direction: column; }
  .status, .category-badge, .reward-badge, .date-badge, .urgent-badge { font-size: 10px; padding: 6px 7px; }
  .kr-slider-row { align-items: center; display: grid; gap: 8px; grid-template-columns: 70px 1fr 80px; margin: 8px 0; }
  .kr-slider-row label { color: var(--kr-muted); font-size: 12px; }
  .kr-slider-row input[type="range"] { width: 100%; }
  .kr-slider-row input[type="number"] { background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: 6px; color: var(--kr-text); font-size: 12px; padding: 4px 6px; width: 100%; }
  .kr-slider-row span { display: none; }
  #kalk-sonuc .calculator-result { font-size: 11px; min-height: 36px; padding: 8px; }
  #kalk-sonuc .kampanya-adi { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .campaign-card h2 { font-size: 13px; line-height: 1.25; }
  .card-title { -webkit-line-clamp: 2; }
  .campaign-highlight { font-size: 13px; padding: 7px 8px; }
  .campaign-footer { gap: 7px; padding-top: 10px; }
  .campaign-footer a, .detail-button { flex: 1 1 0; font-size: 11px; justify-content: center; min-height: 32px; padding: 0 7px; }
  h1 { font-size: 30px; }
}