:root{
  color-scheme: light dark;

  /* Mint/Blau Palette */
  --bg-1: #081426;
  --bg-2: #0b1f3f;
  --ink: #eaf4ff;
  --ink-2: #c7d8ee;
  --muted: #9db2c9;

  --mint: #7cf4d6;
  --blue: #60a5fa;

  --glass: rgba(255,255,255,0.10);
  --glass-strong: rgba(255,255,255,0.16);
  --stroke: 1px solid rgba(255,255,255,0.18);

  --radius-xl: 22px; --radius-lg: 16px; --radius-md: 12px;
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.45);
  --shadow-sm: 0 10px 30px rgba(0,0,0,0.25);
}

.bg-grad{
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 900px at 12% -10%, rgba(124,244,214,0.22), transparent 60%),
    radial-gradient(1000px 760px at 100% 0%, rgba(96,165,250,0.22), transparent 60%),
    radial-gradient(1000px 800px at 0% 100%, rgba(124,244,214,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  filter: saturate(118%);
}

*{ box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-top: calc(env(safe-area-inset-top, 0px));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px));
}

.container{
  max-width: 1120px;
  padding-left: calc(clamp(16px, 4vw, 28px) + env(safe-area-inset-left, 0px));
  padding-right: calc(clamp(16px, 4vw, 28px) + env(safe-area-inset-right, 0px));
  margin-left: auto; margin-right: auto;
}

.header{
  position: sticky; top:0; z-index: 10;
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  background: linear-gradient(180deg, rgba(11,31,63,0.65), rgba(11,31,63,0.35));
  border-bottom: var(--stroke);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top: clamp(10px, 2.5vw, 18px);
  padding-bottom: clamp(10px, 2.5vw, 18px);
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo-dot{
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--mint), var(--blue));
  box-shadow: 0 0 18px rgba(124,244,214,0.6);
}
.header h1{ margin:0; font-size: clamp(20px, 5.5vw, 24px); letter-spacing: .2px; }
.subhead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom: clamp(8px, 2vw, 16px);
}
.subhead p{ margin:0; color: var(--ink-2); font-size: clamp(12px, 3.5vw, 14px); }
.muted{ color: var(--muted); font-size: clamp(12px, 3.5vw, 13px); }

.today{
  padding: clamp(6px, 1.8vw, 8px) clamp(10px, 3vw, 12px);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: var(--stroke);
  box-shadow: var(--shadow-sm);
}

.controls{
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  margin: clamp(12px, 3vw, 22px) 0 clamp(6px, 2vw, 14px);
}
.field{ display:flex; gap:10px; align-items:center; }
.field span{ font-size: clamp(12px, 3.5vw, 13px); color: var(--ink-2); }
.field input{
  background: rgba(255,255,255,0.10);
  color: var(--ink);
  border: var(--stroke);
  border-radius: clamp(10px, 3vw, 12px);
  padding: clamp(7px, 2.2vw, 9px) clamp(10px, 3vw, 12px);
  width: 150px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.field input:focus{
  box-shadow: 0 0 0 6px rgba(96,165,250,0.18), 0 10px 28px rgba(96,165,250,0.18);
  border-color: rgba(96,165,250,0.6);
}

/* Buttons */
.refresh{
  padding: clamp(7px, 2.2vw, 9px) clamp(10px, 3vw, 12px);
  border-radius: clamp(10px, 3vw, 12px);
  border: var(--stroke);
  background: linear-gradient(135deg, var(--mint), var(--blue));
  color: #0b1f3f; font-weight: 800; cursor: pointer;
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 24px rgba(96,165,250,0.25);
}
.refresh:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.refresh.loading{ opacity:.7; pointer-events:none; }

.grid{
  display:grid; gap: clamp(10px, 3vw, 18px);
  margin: 8px 0 30px;
}
@media (min-width: 780px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.card{
  display:grid; grid-template-columns: 1fr 1.6fr; gap: clamp(10px, 3vw, 14px);
  padding: clamp(12px, 3.5vw, 18px);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));
  border: var(--stroke);
  border-radius: clamp(12px, 3vw, 16px);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.5);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.08));
}

.card-left{ display:flex; align-items:center; justify-content:center; }
.chip{
  display:flex; align-items:center; gap: clamp(8px, 2.2vw, 12px);
  padding: clamp(8px, 2.6vw, 12px) clamp(10px, 3vw, 14px);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124,244,214,0.18), rgba(96,165,250,0.18));
  border: var(--stroke);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.chip .kw{ font-weight: 800; font-size: clamp(16px, 4.3vw, 18px); color: #a4fbe8; }
.chip .dot{
  width:6px; height:6px; border-radius:50%;
  background: linear-gradient(180deg, var(--blue), var(--mint));
  box-shadow: 0 0 8px rgba(124,244,214,0.8);
}
.chip .date{ font-weight: 700; font-size: clamp(13px, 3.8vw, 15px); color: #e8f3ff; }

.card-right{ display:flex; flex-direction:column; justify-content:center; gap:8px; }
.market{ margin:0; font-size: clamp(18px, 4.8vw, 20px); font-weight: 800; letter-spacing: .2px; }
.addr{ margin:0; color: var(--ink-2); font-size: clamp(13px, 3.8vw, 14px); }
.meta-row{ display:flex; align-items:center; justify-content:flex-start; gap:12px; }
.price{
  font-size: clamp(17px, 4.6vw, 18px); font-weight: 800;
  background: linear-gradient(90deg, var(--blue), var(--mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.empty{ padding: 16px 6px; color: var(--ink-2); text-align:center; }
main.container{ padding-bottom: calc(clamp(16px, 4vw, 24px) + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 560px){
  .card{ grid-template-columns: 1fr; }
  .card-left{ justify-content:flex-start; }
}