/* imax-watch — shadcn/ui-inspired. Self-contained (no external assets), theme-aware. */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --destructive: 0 72% 51%;
  --success: 142 71% 45%;
  --border: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --radius: 0.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --destructive: 0 62% 50%;
    --success: 142 60% 46%;
    --border: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 56px; }

/* --- header --- */
header { margin-bottom: 18px; }
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
h1 .imax { color: hsl(var(--muted-foreground)); font-weight: 500; }
header .sub { color: hsl(var(--muted-foreground)); font-size: 0.875rem; margin-top: 4px; }

/* --- last-drop banner = shadcn alert --- */
.banner {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 18px 0 22px;
  font-size: 0.9rem;
}
.banner.hot { border-color: hsl(var(--foreground) / 0.32); background: hsl(var(--accent)); }
.banner .lead { font-weight: 600; }
.banner .lead .k { font-weight: 700; }
.banner .when { color: hsl(var(--muted-foreground)); font-size: 0.82rem; margin-top: 4px; }

/* --- date section = shadcn card --- */
.daysec {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.05);
  margin-bottom: 14px;
  overflow: hidden;
}
.dayhead {
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--card-foreground));
  border-bottom: 1px solid hsl(var(--border));
  text-transform: capitalize;
}

/* --- show row --- */
.show {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border));
}
.show:last-child { border-bottom: none; }
.show .time {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  min-width: 54px;
}
.show .mid { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* --- badges --- */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 600;
  padding: 2px 8px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  line-height: 1.35;
}
.badge.b-70MM { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.badge.b-TIT, .badge.b-DAB {
  background: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--muted-foreground));
}
.aud { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

/* --- availability = shadcn progress --- */
.avail { display: flex; align-items: center; gap: 10px; }
.bar {
  flex: 1; height: 6px; min-width: 56px;
  background: hsl(var(--secondary));
  border-radius: 999px; overflow: hidden;
}
.fill { height: 100%; background: hsl(var(--success)); border-radius: 999px; }
.fill.mid { background: hsl(var(--success)); }
.fill.low { background: hsl(var(--destructive)); }
.pct {
  font-size: 0.78rem; color: hsl(var(--muted-foreground));
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.added { font-size: 0.72rem; color: hsl(var(--muted-foreground)); }

/* --- buy button = shadcn button (primary) --- */
.act { display: flex; align-items: center; }
.buy {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap;
  font-size: 0.85rem; font-weight: 500;
  padding: 8px 14px;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  transition: opacity 0.15s ease;
}
.buy:hover { opacity: 0.9; }
.buy:active { transform: translateY(1px); }

/* --- sold out --- */
.show.soldout .time { text-decoration: line-through; color: hsl(var(--muted-foreground)); }
.show.soldout { color: hsl(var(--muted-foreground)); }
.soldlabel {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 600;
  color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.4);
  border-radius: calc(var(--radius) - 2px);
  padding: 2px 8px;
}

/* --- drops history --- */
.drops { margin-top: 26px; }
.drops h2 { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0 0 12px; }
#drops {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  overflow: hidden;
}
.drop {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.875rem;
}
.drop:last-child { border-bottom: none; }
.kbadge {
  display: inline-flex; align-items: center;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: calc(var(--radius) - 2px);
  white-space: nowrap;
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
  border: 1px solid transparent;
}
.kbadge.new70 { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.kbadge.new { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.kbadge.soldout { background: transparent; border-color: hsl(var(--destructive) / 0.4); color: hsl(var(--destructive)); }
.kbadge.watchdog { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.drop .dtext { flex: 1; min-width: 0; }
.drop .dwhen { color: hsl(var(--muted-foreground)); font-size: 0.76rem; white-space: nowrap; }

/* --- empty states --- */
.empty { color: hsl(var(--muted-foreground)); padding: 26px 16px; text-align: center; font-size: 0.875rem; }
#showings > .empty {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card));
}

/* --- footer --- */
footer {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
footer a { color: hsl(var(--muted-foreground)); }