/*
Theme Name: TheatresDB
Theme URI: https://theatresdb.com
Author: TheatresDB
Description: India's most detailed cinema-guide theme — screen specs, projection & sound tech, comparison tools, interactive map, ticket prices, PWA, CineLog, now with multi-city support across states, cities, and areas.
Version: 4.0.0
License: GNU General Public License v2 or later
Text Domain: theatresdb
*/

/* =============================================
   RESET & BASE
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand — Letterboxd-style palette: signature green accent on a dark
     blue-black background, orange as the secondary/rating accent.
     NOTE: kept the --gold / --brass variable NAMES for compatibility with
     existing var() references across templates — only the VALUES changed. */
  --gold: #00e054;
  --gold-dk: #00b445;
  --gold-dark: #00b445;
  --gold-lt: #40e878;
  --brass: #ff8000;
  --brass-lt: #ffa040;
  /* Layout */
  --hdr-h: 60px;
  --radius: 8px;
  --radius-sm: 5px;
  --radius-pill: 100px;
  /* Type */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Animation */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Dark mode defaults (overridden by [data-theme]) */
  --bg:          #14181c;
  --bg-card:     #1c2228;
  --bg-card2:    #2c3440;
  --bg-modal:    #1c2228;
  --border:      #2c3440;
  --border-hi:   #456;
  --text:        #ffffff;
  --text-muted:  #9ab;
  --text-dim:    #456;
  --white:       #ffffff;
  --on-dark:     #ffffff;
  --shadow:      rgba(0,0,0,0.65);
  --hdr-bg:      rgba(20,24,28,0.97);
  --input-bg:    #2c3440;
  --toggle-bg:   #2c3440;
  --toggle-knob: #00e054;
}

[data-theme="dark"] {
  --bg:          #14181c;
  --bg-card:     #1c2228;
  --bg-card2:    #2c3440;
  --bg-modal:    #1c2228;
  --border:      #2c3440;
  --border-hi:   #456;
  --text:        #ffffff;
  --text-muted:  #9ab;
  --text-dim:    #456;
  --on-dark:     #ffffff;
  --shadow:      rgba(0,0,0,0.65);
  --hdr-bg:      rgba(20,24,28,0.97);
  --input-bg:    #2c3440;
  --toggle-bg:   #2c3440;
  --toggle-knob: #00e054;
}

[data-theme="light"] {
  --bg:          #f4f5f7;
  --bg-card:     #ffffff;
  --bg-card2:    #e7ecef;
  --bg-modal:    #ffffff;
  --border:      #d4dbe0;
  --border-hi:   #b5c0c8;
  --text:        #14181c;
  --text-muted:  #556678;
  --text-dim:    #a4b1bd;
  --white:       #14181c;
  --on-dark:     #14181c;
  --shadow:      rgba(0,0,0,0.10);
  --hdr-bg:      rgba(244,245,247,0.98);
  --input-bg:    #e7ecef;
  --toggle-bg:   #d4dbe0;
  --toggle-knob: #14181c;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Cinematic ambient backdrop — warms the dark sides on wide monitors
   so 1320+ viewports don't read as a void. Fixed to viewport, sits
   behind everything, doesn't scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Warm amber glow bleeding in from the left edge */
    radial-gradient(ellipse 36% 60% at 0% 30%, rgba(0,224,84,.07), transparent 60%),
    /* Warm amber glow bleeding in from the right edge */
    radial-gradient(ellipse 36% 60% at 100% 70%, rgba(216,90,48,.06), transparent 60%),
    /* Subtle film-strip perforation columns down the outer edges */
    linear-gradient(to right,
      rgba(0,0,0,.6) 0%, rgba(0,0,0,.6) 32px,
      transparent 32px, transparent calc(100% - 32px),
      rgba(0,0,0,.6) calc(100% - 32px), rgba(0,0,0,.6) 100%),
    /* Base */
    var(--bg);
}
/* Grain noise layer on top of the backdrop — film texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}
/* On narrow viewports the backdrop framing would just darken edges — disable */
@media (max-width: 1400px) {
  body::before, body::after { display: none; }
}
/* In light mode the dark film-strip columns look wrong — remove them */
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 36% 60% at 0% 30%, rgba(0,224,84,.05), transparent 60%),
    radial-gradient(ellipse 36% 60% at 100% 70%, rgba(216,90,48,.04), transparent 60%),
    var(--bg);
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dark); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* =============================================
   TYPOGRAPHY
============================================= */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

/* =============================================
   LAYOUT
============================================= */
.container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.section { padding: 28px 0 40px; }

/* =============================================
   NAVBAR — Handled entirely by cinelog.css
   Legacy classes kept for compat only
============================================= */
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  main.container.section { padding-left: 20px; padding-right: 20px; }
}

/* =============================================
   HERO
============================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-bottom: 1px solid var(--border);
}
/* Noise texture overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: 100px 28px 90px;
  text-align: center;
}
/* Ambient glow blobs */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.hero-glow-1 {
  width: 520px; height: 320px;
  background: rgba(0,224,84,0.08);
  top: -80px; left: 50%;
  transform: translateX(-50%);
}
.hero-glow-2 {
  width: 300px; height: 300px;
  background: rgba(0,224,84,0.04);
  bottom: -60px; right: 10%;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,224,84,0.08);
  border: 1px solid rgba(0,224,84,0.22);
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.hero-eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.6;
}
.hero h1 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold);
}
.hero-sub {
  font-family: 'Inter', sans-serif;
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 400;
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
/* Stats bar — styled as registry ledger entries, not marketing stat cards */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 32px;
  flex-wrap: wrap;
}
.hero-stat {
  flex: 1;
  min-width: 120px;
  padding: 0 24px;
  text-align: center;
  border-right: 1px solid var(--border);
}
[data-theme="light"] .hero-stats { border-top-color: var(--border); }
[data-theme="light"] .hero-stat  { border-right-color: var(--border); }
.hero-stat:last-child { border-right: none; }
.hero-stat-num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--text);
  display: block;
  line-height: 1;
  margin-bottom: 5px;
}
.hero-stat-num span { color: var(--gold); }
.hero-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .hero-inner { padding: 72px 20px 64px; }
  .hero-stat { min-width: 100px; padding: 0 16px; text-align: center; }
  .hero-stat-num { font-size: 1.5rem; }
  .hero-stats { gap: 8px 0; }
}

/* Buttons */
.hero-actions .btn, .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.btn-primary { background: var(--gold); color: #000; }
.btn-primary:hover { background: #ffc85a; color: #000; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,224,84,0.3); }
.btn-outline { background: transparent; color: rgba(255,255,255,0.85); border: 1.5px solid rgba(255,255,255,0.18); }
.btn-outline:hover { background: rgba(255,255,255,0.06); color: #fff; transform: translateY(-1px); }

/* Legacy compat */
.hero-badge { display: none; }
.hero-buttons { display: none; }

/* =============================================
   SECTION DIVIDER
============================================= */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.section-label::before, .section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-label span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* =============================================
   THEATER CARD
============================================= */
.theater-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.theater-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.theater-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,224,84,0.35);
  color: inherit;
}
.card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.theater-card:hover .card-image img { transform: scale(1.05); }
.card-badge {
  position: absolute;
  top: 10px; right: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-premium { background: var(--gold); color: #000; }
.badge-imax { background: #1a6ef5; color: #fff; }
.badge-multiplex { background: rgba(255,255,255,0.15); color: #fff; backdrop-filter: blur(6px); }
.badge-single { background: rgba(255,255,255,0.1); color: #ccc; backdrop-filter: blur(6px); }
[data-theme="light"] .badge-multiplex { background: rgba(0,0,0,0.07); color: var(--text); backdrop-filter: none; }
[data-theme="light"] .badge-single    { background: rgba(0,0,0,0.05); color: var(--text-muted); backdrop-filter: none; }

.card-body { padding: 16px; }
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.card-name {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.card-address {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-bottom: 8px;
  line-height: 1.4;
}
.card-screens {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-bottom: 12px;
}
.card-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.amenity-tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
}
[data-theme="light"] .amenity-tag { background: rgba(0,0,0,0.04); }
.amenity-tag.highlight { color: var(--gold); border-color: rgba(0,224,84,0.3); background: rgba(0,224,84,0.06); }
/* Headline tag — the one feature the editor wants to lead with.
   Stronger fill than .highlight so the eye finds it first on the card. */
.amenity-tag.headline {
  color: var(--gold);
  background: rgba(0,224,84,0.18);
  border-color: rgba(0,224,84,0.5);
  font-weight: 600;
}

/* Editor's note — italic serif pull-quote with a gold left rule.
   Optional per theatre; only renders when _ht_editor_note has a value. */
.card-editor-note {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.4;
  color: #d0d0d8;
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 10px;
  margin: 10px 0 4px;
}
[data-theme="light"] .card-editor-note { color: #3a3a3a; }

/* =============================================
   SEARCH & FILTER
============================================= */
.search-filter-wrap { margin-bottom: 28px; }
.search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.search-input-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.search-input-wrap svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
#theater-search {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px 10px 38px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
}
#theater-search:focus { border-color: var(--gold); }
#theater-search::placeholder { color: var(--text-dim); }

#area-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
  min-width: 150px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.filter-chip {
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.filter-chip.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 700; }
.filter-chip:hover:not(.active) { border-color: rgba(0,224,84,0.4); color: var(--text); }

.results-count { font-size: 0.8rem; color: var(--text-muted); }

/* =============================================
   THEATER DETAIL PAGE
============================================= */
.theater-detail-hero {
  position: relative;
  height: 320px;
  overflow: hidden;
}
.theater-detail-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.theater-detail-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(10,10,10,0.95) 100%);
}
.theater-detail-hero-content {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.theater-detail-name { font-size: clamp(1.5rem, 4vw, 2.2rem); color: #fff; }
.theater-detail-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.theater-detail-meta span { font-size: 0.8rem; color: var(--text-muted); display: flex; gap: 4px; align-items: center; }
.rating-large { font-size: 1.5rem; font-weight: 800; color: var(--gold); display: flex; align-items: center; gap: 6px; }

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; padding: 40px 0; }
@media(max-width: 768px) { .detail-grid { grid-template-columns: 1fr; } }

.detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.detail-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--white);
}

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width: 560px) { .pros-cons { grid-template-columns: 1fr; } }
.pros-list li, .cons-list li {
  display: flex; gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  align-items: flex-start;
}
.pros-list li::before { content: '✓'; color: #22c55e; font-weight: 700; margin-top: 1px; }
.cons-list li::before { content: '✗'; color: #ef4444; font-weight: 700; margin-top: 1px; }

.info-row { display: flex; gap: 8px; margin-bottom: 12px; font-size: 0.83rem; }
.info-row .label { color: var(--text-dim); min-width: 110px; }
.info-row .value { color: var(--text); font-weight: 500; }

/* =============================================
   COMPARE PAGE
============================================= */
.compare-wrap { max-width: 900px; margin: 0 auto; padding: 60px 24px; }
.compare-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
@media(max-width: 600px) { .compare-selectors { grid-template-columns: 1fr; } }
.compare-select-group label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.compare-select {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  outline: none;
}
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.compare-table th { color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.compare-table td { color: var(--text); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .row-label { color: var(--text-muted); font-size: 0.8rem; }
.compare-header-cell { font-family: 'Inter', -apple-system, sans-serif; font-size: 1rem !important; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; }

/* =============================================
   MAP PAGE (v3.2.0 premium redesign)
============================================= */

/* Stats bar under page header */
.htmap-stats {
  display: inline-flex; gap: 10px; align-items: center;
  margin-top: 14px;
  font-size: 0.82rem; color: var(--text-muted);
}
.htmap-stats strong { color: var(--gold); font-weight: 600; }
.htmap-stats-dot { opacity: 0.4; }

/* Two-column layout */
.htmap-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  height: 75vh;
  min-height: 620px;
}
@media (max-width: 900px) {
  .htmap-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .htmap-sidebar { max-height: 60vh; }
  .htmap-map-wrap { height: 65vh; min-height: 480px; }
}

/* Sidebar shell */
.htmap-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Search */
.htmap-search-wrap {
  position: relative;
  padding: 14px 14px 10px;
}
.htmap-search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
#htmap-search {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px 10px 38px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
#htmap-search:focus {
  border-color: var(--gold);
  background: var(--bg);
}
#htmap-search::placeholder { color: var(--text-muted); }

/* Filter chips */
.htmap-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 14px 14px;
  border-bottom: 1px solid var(--border);
}
.htmap-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.htmap-chip:hover { background: var(--bg-card2); color: var(--text); }
.htmap-chip-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
}
.htmap-chip-active:hover { background: var(--gold-lt); color: #0a0a0a; }

/* List meta + scrollable list */
.htmap-list-meta {
  padding: 10px 18px 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.htmap-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 10px;
}
.htmap-list::-webkit-scrollbar { width: 6px; }
.htmap-list::-webkit-scrollbar-track { background: transparent; }
.htmap-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
.htmap-list::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* Cards */
.htmap-card {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  outline: none;
}
.htmap-card:hover { background: var(--bg-card2); }
.htmap-card:active { transform: scale(0.99); }
.htmap-card-selected {
  background: linear-gradient(135deg, rgba(0,224,84,0.12), rgba(0,224,84,0.04));
  border-color: rgba(0,224,84,0.4);
}

.htmap-card-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background-color: var(--bg-card2);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.htmap-card-thumb-empty {
  background-image: linear-gradient(135deg, rgba(0,224,84,0.18), rgba(0,224,84,0.04));
}
.htmap-card-initial {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  color: var(--gold);
}

.htmap-card-body { flex: 1; min-width: 0; }
.htmap-card-name {
  margin: 1px 0 3px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.htmap-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.htmap-card-area {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.htmap-card-rating {
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
  font-size: 0.72rem;
}
.htmap-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.htmap-tag {
  font-size: 0.64rem;
  background: var(--bg-card2);
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.htmap-tag-type {
  background: rgba(0,224,84,0.12);
  color: var(--gold);
}

/* Map area */
.htmap-map-wrap {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.htmap-container {
  width: 100%;
  height: 100%;
  background: #0e0e12;
}

/* Custom branded pins */
.leaflet-marker-icon.htmap-pin {
  background: transparent !important;
  border: none !important;
  pointer-events: auto;
}
.htmap-pin-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: var(--gold);
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0,224,84,0.55);
  transition: transform 0.15s;
  z-index: 2;
}
.htmap-pin-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%) scale(0.6);
  border: 2px solid rgba(0,224,84,0.55);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.htmap-pin:hover .htmap-pin-dot { transform: translate(-50%, -50%) scale(1.25); }
.htmap-pin.selected .htmap-pin-ring {
  opacity: 1;
  animation: htmap-pulse 2.2s ease-in-out infinite;
}
@keyframes htmap-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.8; }
  50%      { transform: translate(-50%, -50%) scale(1.5); opacity: 0.2; }
}

/* Floating detail card */
.htmap-detail {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(140%);
  background: rgba(20, 20, 28, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  width: calc(100% - 32px);
  max-width: 460px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.65);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
  z-index: 1000;
}
[data-theme="light"] .htmap-detail {
  background: rgba(255,255,255,0.97);
  border-color: var(--border);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.18);
}
[data-theme="light"] .htmap-detail-close:hover { background: var(--bg-card2); }
[data-theme="light"] .htmap-detail-name { color: var(--text); }
.htmap-detail.open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.htmap-detail-close {
  position: absolute;
  top: 8px; right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.htmap-detail-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.htmap-detail-thumb {
  width: 76px; height: 76px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-card2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.htmap-detail-thumb.htmap-card-thumb-empty {
  background-image: linear-gradient(135deg, rgba(0,224,84,0.20), rgba(0,224,84,0.04));
}
#htmap-detail-initial {
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  color: var(--gold);
}
.htmap-detail-body { flex: 1; min-width: 0; padding-right: 18px; }
.htmap-detail-name {
  margin: 2px 0 4px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.htmap-detail-meta {
  display: flex;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  align-items: center;
}
.htmap-detail-meta-dot { opacity: 0.4; }
.htmap-detail-rating { color: var(--gold); font-weight: 600; }
.htmap-detail-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.htmap-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.htmap-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.htmap-btn:active { transform: scale(0.97); }
.htmap-btn-primary { background: var(--gold); color: #0a0a0a; }
.htmap-btn-primary:hover { background: var(--gold-lt); color: #0a0a0a; text-decoration: none; }
.htmap-btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: rgba(255,255,255,0.10);
}
.htmap-btn-ghost:hover { background: rgba(255,255,255,0.12); color: var(--text); text-decoration: none; }
[data-theme="light"] .htmap-btn-ghost { background: var(--bg-card2); border-color: var(--border); }
[data-theme="light"] .htmap-btn-ghost:hover { background: var(--border); }

@media (max-width: 600px) {
  .htmap-detail {
    width: calc(100% - 24px);
    max-width: none;
    padding: 12px;
  }
  .htmap-detail-thumb { width: 64px; height: 64px; }
  .htmap-detail-name  { font-size: 0.95rem; }
}

/* Leaflet popup theming (in case any popup is ever shown) */
.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}
.leaflet-popup-tip { background: var(--bg-card) !important; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-muted) !important; }
.leaflet-control-attribution {
  background: rgba(10,10,10,0.7) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  border-radius: 6px 0 0 0 !important;
}
[data-theme="light"] .leaflet-control-attribution { background: rgba(255,255,255,0.88) !important; }
.leaflet-control-attribution a { color: var(--text) !important; }

/* =============================================
   SPECS PAGE — see new .htspec-* block at bottom of file (v3.3.0)
============================================= */

/* =============================================
   BLOG SECTION
============================================= */
.blog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  gap: 0;
  transition: border-color 0.2s;
  text-decoration: none;
  color: inherit;
}
.blog-card:hover { border-color: rgba(0,224,84,0.35); color: inherit; }
.blog-card-img {
  width: 120px;
  min-width: 120px;
  height: 90px;
  object-fit: cover;
}
.blog-card-body { padding: 14px 16px; flex: 1; }
.blog-meta { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.blog-category { color: var(--gold); font-weight: 600; }
.blog-title { font-family: 'Inter', -apple-system, sans-serif; font-size: 0.95rem; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.blog-excerpt { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-read { color: var(--gold); font-size: 0.75rem; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.blog-list { display: flex; flex-direction: column; gap: 14px; }

/* =============================================
   FOOTER
============================================= */
#site-footer {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 28px 24px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* =============================================
   PAGE HEADER
============================================= */
.page-header {
  text-align: center;
  padding: 50px 24px 40px;
  border-bottom: 1px solid var(--border);
}
.page-header h1 { margin-bottom: 8px; }
.page-header h1 .accent { color: var(--gold); }
.page-header p { color: var(--text-muted); font-size: 0.9rem; }

/* =============================================
   UTILS
============================================= */
.hidden { display: none !important; }
.text-gold { color: var(--gold); }
.star { color: var(--gold); }
.icon { display: inline-block; vertical-align: middle; }

/* Animate in */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeUp 0.4s ease forwards; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }


/* =============================================
   CINELOG — Dark/Light Mode + Header + Modals
============================================= */
/* ═══════════════════════════════════════════════════
   CINELOG v3 — Plus Jakarta Sans + Full fixes
   ═══════════════════════════════════════════════════ */

/* Font families set globally at top */

/* CSS Tokens defined at top of file */

/* Base styles set above */

/* ═══════════════════════════════════════════════════
   HEADER — Complete redesign
   ═══════════════════════════════════════════════════ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--hdr-h);
  background: var(--hdr-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.hdr-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Logo */
.hdr-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 32px;
}
.hdr-logo-box {
  width: 32px;
  height: 32px;
  background: var(--gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #000;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.hdr-logo:hover .hdr-logo-box {
  transform: rotate(-8deg) scale(1.06);
}
.hdr-logo-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hdr-logo-tld {
  color: var(--text-muted);
  font-weight: 400;
}

/* Desktop nav */
.hdr-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.hdr-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 7px;
  position: relative;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.hdr-nav a:hover {
  color: var(--text);
  background: rgba(128,128,128,0.08);
}
.hdr-nav a.hdr-nav-active {
  color: var(--text);
  background: rgba(128,128,128,0.1);
}
.hdr-nav a.hdr-nav-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

/* Right controls */
.hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Theme Toggle ──────────────────────────────── */
.hdr-theme-btn {
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.hdr-toggle-track {
  position: relative;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: var(--toggle-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s;
}
.hdr-toggle-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--toggle-knob);
  box-shadow: 0 1px 5px rgba(0,0,0,0.35);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
  z-index: 2;
  left: 3px;
}
[data-theme="dark"]  .hdr-toggle-thumb { transform: translateX(24px); }
[data-theme="light"] .hdr-toggle-thumb { transform: translateX(0px); }

.hdr-toggle-icon {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.25s;
}
.hdr-icon-sun  { left: 6px;  color: #00e054; }
.hdr-icon-moon { right: 6px; color: #9ab0d4; }
[data-theme="dark"]  .hdr-icon-sun  { opacity: 0.35; }
[data-theme="dark"]  .hdr-icon-moon { opacity: 1;    }
[data-theme="light"] .hdr-icon-sun  { opacity: 1;    }
[data-theme="light"] .hdr-icon-moon { opacity: 0.35; }

/* ── Auth buttons ──────────────────────────────── */
.hdr-signin-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.hdr-signin-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.hdr-user-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ── Auth state: controlled by data-auth on <html> set inline before first paint ──
   This prevents layout shift — the browser never renders the wrong button.       */
:root:not([data-auth])        .hdr-signin-btn  { visibility: hidden; }  /* flash guard while resolving */
:root:not([data-auth])        .hdr-user-group  { display: none; }
[data-auth="out"]             .hdr-user-group  { display: none !important; }
[data-auth="in"]              .hdr-signin-btn  { display: none !important; }
[data-auth="in"]              .hdr-user-group  { display: flex !important; }

.hdr-logvisit-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--gold);
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.hdr-logvisit-btn:hover {
  background: var(--gold-lt);
  transform: translateY(-1px);
}

.hdr-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(0,224,84,0.12);
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.hdr-avatar-btn:hover {
  background: rgba(0,224,84,0.22);
}

/* Hamburger */
.hdr-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.hdr-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.hdr-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hdr-hamburger.open span:nth-child(2) { opacity: 0; }
.hdr-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile nav drawer */
.hdr-mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  position: absolute;
  top: var(--hdr-h);
  left: 0; right: 0;
  z-index: 899;
  box-shadow: 0 12px 40px var(--shadow);
  animation: slideDown 0.2s var(--ease);
}
.hdr-mobile-nav.open { display: flex; }
.hdr-mobile-nav a {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.hdr-mobile-nav a:hover { color: var(--text); background: rgba(128,128,128,0.07); }
.hdr-mobile-nav a.hdr-mnav-active { color: var(--text); font-weight: 700; }
.hdr-mobile-nav a.hdr-mnav-active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive header ─────────────────────────── */
@media (max-width: 900px) {
  .hdr-nav { display: none; }
  .hdr-hamburger { display: flex; }
  .hdr-logo { margin-right: auto; }
  .hdr-right { gap: 10px; }
}
@media (max-width: 480px) {
  .hdr-wrap { padding: 0 14px; }
  .hdr-logo-name { display: none; }
  .hdr-logo-box { margin-right: 0; }
  .hdr-right { gap: 8px; }
  /* Slimmer log-visit button on phones */
  .hdr-logvisit-btn {
    padding: 6px 12px;
    font-size: 0.76rem;
    letter-spacing: -0.005em;
  }
  /* Slightly smaller theme toggle on phones — saves horizontal space */
  .hdr-toggle-track { width: 44px; height: 24px; }
  .hdr-toggle-thumb { width: 18px; height: 18px; }
  [data-theme="dark"] .hdr-toggle-thumb { transform: translateX(22px); }
  /* Compact avatar */
  .hdr-avatar-btn { width: 30px; height: 30px; border-width: 1.5px; font-size: 0.7rem; }
  /* Compact search/theme buttons */
  .hdr-search-btn,
  .hdr-theme-btn { padding: 3px 1px; }
}

/* ── User dropdown ─────────────────────────────── */
.cl-user-dropdown {
  position: fixed;
  top: calc(var(--hdr-h) + 8px);
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  min-width: 210px;
  box-shadow: 0 16px 48px var(--shadow);
  z-index: 2000;
  animation: dropFade 0.15s var(--ease);
}
@keyframes dropFade {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cl-dd-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px;
}
.cl-dd-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,224,84,0.15);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cl-dd-name { font-weight: 700; font-size: 0.88rem; color: var(--text); }
.cl-dd-handle { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.cl-dd-sep { height: 1px; background: var(--border); margin: 2px 0; }
.cl-dd-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--text-muted);
  background: none; border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.cl-dd-item:hover { background: rgba(128,128,128,0.08); color: var(--text); }
.cl-dd-logout { color: #ef4444 !important; }
.cl-dd-logout:hover { background: rgba(239,68,68,0.08) !important; }

/* ═══════════════════════════════════════════════════
   MODAL SYSTEM
   ═══════════════════════════════════════════════════ */
.cl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 5000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.cl-overlay.open { display: flex; }

.cl-modal {
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 28px 80px var(--shadow);
  animation: modalPop 0.28s cubic-bezier(0.34,1.3,0.64,1);
  max-height: 92vh;
  overflow-y: auto;
}
.cl-modal-wide  { max-width: 520px; }
.cl-modal-log   { max-width: 600px; padding: 32px 28px 28px; }
.cl-modal-share { max-width: 600px; padding: 32px 24px 28px; }
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.90) translateY(24px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.cl-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  z-index: 1;
}
.cl-close-btn:hover { background: var(--border-hi); color: var(--text); }

/* ── Auth brand ──────────────────────────────── */
.cl-brand { text-align: center; margin-bottom: 24px; }
.cl-brand-emoji { font-size: 2.2rem; margin-bottom: 8px; display: block; }
.cl-brand-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.65rem;
  color: var(--text);
  margin-bottom: 6px;
}
.cl-brand-title span { color: var(--gold); }
.cl-brand-sub { font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }

/* ── Tabs ────────────────────────────────────── */
.cl-tab-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.cl-tab {
  flex: 1;
  padding: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.cl-tab-active {
  color: var(--gold) !important;
  border-bottom-color: var(--gold) !important;
}

/* ── Form fields ─────────────────────────────── */
.cl-form { width: 100%; }
.cl-field { margin-bottom: 16px; }
.cl-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cl-field-row .cl-field { margin-bottom: 16px; }
.cl-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.cl-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cl-field input,
.cl-field select,
.cl-field textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 13px;
  font-size: 0.88rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.cl-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.cl-field input:focus,
.cl-field select:focus,
.cl-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(0,224,84,0.1);
}
.cl-field input::placeholder,
.cl-field textarea::placeholder { color: var(--text-dim); }
.cl-field textarea { resize: vertical; min-height: 80px; }

/* ── Star rating ─────────────────────────────── */
.cl-stars {
  display: flex;
  gap: 3px;
}
.cl-star {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--border-hi);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  transition: color 0.1s, transform 0.1s;
}
.cl-star:hover, .cl-star.active {
  color: var(--gold);
  transform: scale(1.15);
}

/* ── Buttons ─────────────────────────────────── */
.cl-primary-btn {
  width: 100%;
  padding: 13px;
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-top: 4px;
}
.cl-primary-btn:hover { background: var(--gold-lt); transform: translateY(-1px); }
.cl-secondary-btn {
  flex: 1;
  padding: 13px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.cl-secondary-btn:hover { border-color: var(--gold); color: var(--gold); }
.cl-form-actions { display: flex; gap: 10px; margin-top: 20px; }
.cl-form-actions .cl-primary-btn { flex: 1.5; margin-top: 0; }
.cl-hint { text-align: center; font-size: 0.75rem; color: var(--text-dim); margin-top: 12px; }

/* ── Log modal header ────────────────────────── */
.cl-log-heading {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 4px;
}
.cl-log-sub { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 24px; }

/* ═══════════════════════════════════════════════════
   SHARE CARD
   ═══════════════════════════════════════════════════ */
.cl-card-preview { margin-top: 20px; animation: fadeUp 0.25s ease; display: flex; flex-direction: column; align-items: center; }
.cl-preview-label {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
/* ══════════════════════════════════════════════════════
   🎬 PORTRAIT TICKET CARD v3 — Poster-BG top + Stub bottom
   Full poster background | Glass overlay | Tear line | Stub
══════════════════════════════════════════════════════ */
:root {
  --tk-accent:  #f0a500;
  --tk-green:   #4ecb8d;
  --tk-card-bg: #0d0b18;
  --tk-stub-bg: #13101f;
  --tk-border:  rgba(130,100,255,0.28);
}

/* ── Outer card shell — just a container, no overflow clip ── */
.cl-share-card {
  display: flex !important;
  flex-direction: column !important;
  width: 360px !important;
  max-width: 360px !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 22px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.85) !important;
  position: relative !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  filter: none !important;
  margin: 0 auto !important;
}

/* ── TOP SECTION — poster fills as background ── */
.csc-top-section {
  position: relative !important;
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
  background: #0d0b18 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1.5px solid var(--tk-border) !important;
  border-bottom: none !important;
}

/* Poster as full background image */
.csc-poster-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
  z-index: 0 !important;
}
.csc-poster-bg.visible {
  opacity: 1 !important;
}
/* #csc-poster — the live preview poster in the log modal */
#csc-poster {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
  z-index: 0 !important;
}
#csc-poster.visible {
  opacity: 1 !important;
}

/* Dark gradient overlay */
.csc-poster-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to bottom,
    rgba(10,8,24,0.35) 0%,
    rgba(10,8,24,0.05) 25%,
    rgba(10,8,24,0.40) 55%,
    rgba(10,8,24,1.00) 100%
  ) !important;
}

/* Placeholder when no poster */
.csc-poster-ph {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 3rem !important;
  background: linear-gradient(135deg, #1a1235 0%, #0d0b18 100%) !important;
  z-index: 0 !important;
  color: rgba(255,255,255,0.08) !important;
}

/* Content layer on top of overlay */
.csc-top-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  padding: 18px 20px 22px !important;
}

/* ── USER ROW ── */
.csc-user-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.csc-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: #6c4fe0 !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', sans-serif !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  box-shadow: none !important;
}
/* Avatar color variants by initial */
.csc-avatar[data-initial="A"],.csc-avatar[data-initial="J"],.csc-avatar[data-initial="S"] { background: #6c4fe0 !important; }
.csc-avatar[data-initial="B"],.csc-avatar[data-initial="K"],.csc-avatar[data-initial="T"] { background: #e0714f !important; }
.csc-avatar[data-initial="C"],.csc-avatar[data-initial="L"],.csc-avatar[data-initial="U"] { background: #4f9fe0 !important; }
.csc-avatar[data-initial="D"],.csc-avatar[data-initial="M"],.csc-avatar[data-initial="V"] { background: #4fe09f !important; color: #0a2a1a !important; }
.csc-avatar[data-initial="E"],.csc-avatar[data-initial="N"],.csc-avatar[data-initial="W"] { background: #e04f9f !important; }
.csc-avatar[data-initial="F"],.csc-avatar[data-initial="O"],.csc-avatar[data-initial="X"] { background: #e0c04f !important; color: #1a1200 !important; }
.csc-avatar[data-initial="G"],.csc-avatar[data-initial="P"],.csc-avatar[data-initial="Y"] { background: #4fe0d4 !important; color: #0a2220 !important; }
.csc-avatar[data-initial="H"],.csc-avatar[data-initial="Q"],.csc-avatar[data-initial="Z"] { background: #9f4fe0 !important; }
.csc-avatar[data-initial="I"],.csc-avatar[data-initial="R"] { background: #e04f4f !important; }
.csc-user-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.csc-handle {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0 !important;
}
.csc-action {
  font-size: 0.7rem !important;
  color: rgba(255,255,255,0.5) !important;
  display: block !important;
  font-style: normal !important;
  margin-top: 0 !important;
}

/* ── FORMAT BADGE — top right of poster area ── */
.csc-badge {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  z-index: 3 !important;
  font-size: 0.56rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  background: rgba(15,10,35,0.85) !important;
  border: 1px solid rgba(130,100,255,0.6) !important;
  color: #c4b0ff !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  bottom: auto !important;
  left: auto !important;
}

/* ── MOVIE INFO — pinned to bottom of top section ── */
.csc-movie-info {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.csc-movie {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: clamp(1.55rem, 6vw, 2rem) !important;
  line-height: 1.1 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  word-break: break-word !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.9) !important;
  position: static !important;
  transform: none !important;
  text-align: left !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
}
.csc-screen-line {
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.85) !important;
  opacity: 1 !important;
  background: rgba(255,255,255,0.12) !important;
  display: inline-flex !important;
  width: fit-content !important;
  padding: 4px 10px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
.csc-loc-line {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.74rem !important;
  color: rgba(255,255,255,0.52) !important;
  justify-content: flex-start !important;
}

/* ── TEAR LINE with side-cut notches ── */
.csc-tear-wrap {
  position: relative !important;
  height: 0 !important;
  z-index: 10 !important;
}
.csc-tear-line {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -1px !important;
  display: flex !important;
  align-items: center !important;
}
.csc-notch {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--bg, #111111) !important;
  flex-shrink: 0 !important;
  z-index: 11 !important;
}
.csc-notch-l { margin-left: -11px !important; }
.csc-notch-r { margin-right: -11px !important; }
.csc-dashes {
  flex: 1 !important;
  border-top: 2px dashed rgba(255,255,255,0.16) !important;
  margin: 0 !important;
}

/* ── STUB SECTION ── */
.csc-stub {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 20px 16px !important;
  background: var(--tk-stub-bg) !important;
  border-radius: 0 0 22px 22px !important;
  border: 1.5px solid var(--tk-border) !important;
  border-top: none !important;
  gap: 8px !important;
  margin-top: 11px !important;
}
.csc-stars {
  font-size: 0.9rem !important;
  color: var(--tk-accent) !important;
  letter-spacing: 2px !important;
  flex-shrink: 0 !important;
  border-top: none !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}
.csc-brand {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  text-align: center !important;
  flex: 1 !important;
}
.csc-brand span { color: var(--tk-accent) !important; }
.csc-brand-tld { color: rgba(255,255,255,0.25) !important; }
.csc-date-tag {
  text-align: right !important;
  flex-shrink: 0 !important;
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}
.csc-date-label {
  display: block !important;
  font-size: 0.42rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.22) !important;
  margin-bottom: 2px !important;
}
.csc-date {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.7) !important;
  line-height: 1 !important;
}

/* ── Hide all legacy/unused elements ── */
.csc-left, .csc-perf, .csc-right, .csc-glow,
.csc-glow-1, .csc-glow-2, .csc-right-fade,
.csc-top-bar, .csc-detail-block, .csc-bottom-row,
.csc-header-bar, .csc-movie-row, .csc-thumb-wrap,
.csc-main-body, .csc-left-col, .csc-right-col,
.csc-date-inline, .csc-stub-row,
.csc-theater-name, .csc-footer-bar, .csc-footer-brand, .csc-footer-tag,
.csc-header, .csc-logo, .csc-meta, .csc-sep,
.csc-body, .csc-poster-wrap, .csc-details { display: none !important; }

/* Final card in share modal */
.cl-final-card .cl-share-card {
  height: auto !important;
  min-height: 0 !important;
}

/* ── TMDB Movie Picker — big poster grid ── */
/* Movie field wrapper */
.cl-movie-field-wrap { position: relative; }
.cl-movie-field-wrap input[type="text"] { width: 100%; }

/* Selected movie chip — shows after picking */
.cl-selected-movie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0,224,84,0.07);
  border: 1px solid rgba(0,224,84,0.3);
  border-radius: 10px;
  animation: fadeUp 0.2s ease;
}
.cl-selected-movie img {
  width: 36px; height: 54px;
  object-fit: cover; border-radius: 5px;
  flex-shrink: 0;
}
.cl-selected-movie span {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
}
.cl-selected-movie button {
  background: none; border: none;
  color: var(--text-muted); font-size: 0.8rem;
  cursor: pointer; padding: 4px 6px;
  border-radius: 4px; flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.cl-selected-movie button:hover { color: #ef4444; background: rgba(239,68,68,0.08); }

.cl-movie-picker {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  z-index: 200;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  max-height: 320px;
  overflow-y: auto;
}
.cl-movie-picker.show { display: block; }

.cl-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 500px) { .cl-picker-grid { grid-template-columns: repeat(3, 1fr); } }

.cl-picker-item {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
  position: relative;
  aspect-ratio: 2/3;
  background: var(--bg-card2);
}
.cl-picker-item:hover {
  border-color: var(--gold);
  transform: scale(1.04);
}
.cl-picker-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cl-picker-item-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: var(--bg-card2);
}
.cl-picker-title {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  color: #fff; font-size: 0.58rem; font-weight: 700;
  padding: 16px 5px 5px; text-align: center; line-height: 1.2;
}
.cl-picker-year {
  position: absolute; top: 5px; right: 5px;
  background: rgba(0,0,0,0.7); color: rgba(255,255,255,0.7);
  font-size: 0.5rem; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
}

/* Movie input field wrapper */
.cl-movie-field-wrap { position: relative; flex: 1; min-width: 0; }
.cl-movie-field-wrap input { width: 100%; }

/* Remove old small suggestions box */
.cl-movie-suggestions { display: none !important; }

/* Share success */
.cl-share-success { text-align: center; }
.cl-success-emoji { font-size: 3rem; display: block; margin-bottom: 10px; animation: bounceIn 0.5s ease; }
.cl-share-success h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem; color: var(--text); margin-bottom: 4px;
}
.cl-share-success p { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 20px; }
.cl-final-card { margin: 0 auto 22px; max-width: 100%; }
.cl-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cl-share-grid button {
  padding: 11px 10px; border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem; font-weight: 700; cursor: pointer; border: none;
  transition: opacity 0.15s, transform 0.1s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cl-share-grid button:hover { opacity: 0.88; transform: translateY(-2px); }
.cl-share-x  { background: #111; color: #fff; }
.cl-share-wa { background: #075e54; color: #fff; }
.cl-share-ig { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); color: #fff; }
.cl-share-dl { background: var(--bg-card2); color: var(--text); border: 1px solid var(--border) !important; }

/* ── Cinema Logs — ticket stub entries ── */
.cl-logs-list {
  display: flex; flex-direction: column;
  gap: 10px; max-height: 60vh;
  overflow-y: auto; padding-right: 4px;
}
.cl-logs-empty {
  text-align: center; padding: 48px 20px;
  color: var(--text-muted); font-size: 0.9rem;
}
.cl-log-entry {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  display: block !important;
  padding: 0 !important; gap: 0 !important;
}
.cl-log-entry:hover { border-color: rgba(0,224,84,0.4); transform: translateY(-1px); }

/* Top row inside log entry */
.cl-log-body {
  display: flex; align-items: center; gap: 0;
}
.cl-log-thumb {
  width: 52px; height: 78px; flex-shrink: 0;
  position: relative; overflow: hidden;
  background: #0d0804;
}
.cl-log-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
}
.cl-log-thumb-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: linear-gradient(160deg, #2a1509, #0f0804);
}
.cl-log-info {
  flex: 1; min-width: 0;
  padding: 10px 12px;
}
.cl-log-stars { font-size: 0.78rem; color: var(--gold); letter-spacing: 1px; margin-bottom: 3px; }
.cl-log-movie { font-family: 'Inter', sans-serif; font-size: 0.95rem; color: var(--text); margin-bottom: 2px; }
.cl-log-place { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-log-review-text { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cl-log-date { font-size: 0.68rem; color: var(--text-dim); flex-shrink: 0; padding: 10px 12px 10px 0; white-space: nowrap; }

/* Expand arrow */
.cl-log-arrow {
  font-size: 0.75rem; color: var(--text-dim);
  padding-right: 12px; flex-shrink: 0;
  transition: transform 0.2s;
}
.cl-log-entry.expanded .cl-log-arrow { transform: rotate(180deg); color: var(--gold); }

/* Expanded ticket inside log */
.cl-log-ticket {
  display: none;
  padding: 0 12px 12px 12px;
  animation: fadeUp 0.2s ease;
}
.cl-log-ticket.open { display: block; }

/* Final card in share modal uses same ticket */
.cl-final-card .cl-share-card { height: auto !important; min-height: 0 !important; }

/* Mobile */
@media (max-width: 560px) {
  .cl-modal-log, .cl-modal-share { padding: 24px 14px 20px; }
  .cl-share-card { height: auto !important; min-height: 0 !important; border-radius: 14px !important; }
  .csc-movie { font-size: 1.4rem !important; }
}

/* ── My Cinema Logs ──────────────────────────── */

/* ═══════════════════════════════════════════════════
   LIGHT MODE PATCHES for existing theme components
   ═══════════════════════════════════════════════════ */
[data-theme="light"] .theater-card,
[data-theme="light"] .detail-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .tr-card,
[data-theme="light"] .tr-screen-card,
[data-theme="light"] .compare-table th { background: var(--bg-card); }

[data-theme="light"] .theater-card,
[data-theme="light"] .detail-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .tr-card,
[data-theme="light"] .tr-screen-card { border-color: var(--border); }

[data-theme="light"] #theater-search,
[data-theme="light"] #area-select,
[data-theme="light"] .compare-select,
[data-theme="light"] .specs-filters select,
[data-theme="light"] #specs-search {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="light"] .filter-chip { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }
[data-theme="light"] .filter-chip.active { background: var(--gold); color: #000; border-color: var(--gold); }

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .card-name,
[data-theme="light"] .blog-title,
[data-theme="light"] .tr-card-name { color: var(--on-dark); }

[data-theme="light"] .specs-table th { background: var(--bg-card2); }
/* amenity-tag base bg already fixed inline; this block adds border reinforcement */
[data-theme="light"] .amenity-tag { background: rgba(0,0,0,0.04); border-color: var(--border); }
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Toast ───────────────────────────────────── */
.ht-toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  box-shadow: 0 8px 32px var(--shadow);
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
  pointer-events: none;
}
.ht-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Global transition for theme switch ──────── */
body, #site-header, .theater-card, .blog-card, .tr-card, .tr-screen-card,
.detail-card, .compare-table td, .specs-table td, .filter-chip,
input, select, textarea, .hdr-mobile-nav {
  transition: background-color 0.28s var(--ease), border-color 0.28s var(--ease), color 0.28s var(--ease);
}
.hdr-toggle-thumb { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background-color 0.28s; }

/* ═══════════════════════════════════════════════════
   FOOTER — Full redesign
   ═══════════════════════════════════════════════════ */
#site-footer {
  border-top: 1px solid #252525;
  border-top: 1px solid var(--border, #252525);
  background: #111111;
  background: var(--bg-card, #111111);
  margin-top: auto;
  padding-top: 8px;
  width: 100%;
  flex-shrink: 0;
}

[data-theme="light"] #site-footer {
  border-top-color: #dedad2;
  background: #ffffff;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}

.footer-top {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 48px;
  padding: 56px 0 48px;
  border-bottom: 1px solid #252525;
  border-bottom: 1px solid var(--border, #252525);
  align-items: start;
}

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr !important; gap: 36px 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 28px 20px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr !important; gap: 24px; }
  .footer-inner { padding: 0 20px; }
}

/* Brand column */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  margin-bottom: 14px;
}
.footer-logo-box {
  width: 32px; height: 32px;
  background: var(--gold);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 16px; color: #000;
}
.footer-logo-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 0.9rem;
  color: var(--text); letter-spacing: -0.01em;
}
.footer-logo-tld { color: var(--text-muted); font-weight: 400; }

.footer-tagline {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 8px;
}
.footer-social-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.footer-social-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(0,224,84,0.07);
}

/* Nav columns */
.footer-nav-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav-list a {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-nav-list a:hover { color: var(--gold); }

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy {
  font-size: 0.78rem;
  color: var(--text-dim);
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-bottom-links a:hover { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════
   SINGLE THEATER — CineLog button
   ═══════════════════════════════════════════════════ */
.th-btn-cinelog {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 100px;
  background: rgba(0,224,84,0.12);
  border: 1.5px solid rgba(0,224,84,0.35);
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.th-btn-cinelog:hover {
  background: rgba(0,224,84,0.2);
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════
   ARCHIVE / THEATERS PAGE — font patch
   ═══════════════════════════════════════════════════ */
.th-hero-badge,
.th-section-title,
.th-hero-name,
.th-card-name,
.th-stat-num {
  font-family: 'Inter', -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE — footer & single theater patches
   ═══════════════════════════════════════════════════ */

[data-theme="light"] .footer-nav-list a { color: var(--text-muted); }
[data-theme="light"] .footer-nav-list a:hover { color: var(--gold-dk); }
[data-theme="light"] .footer-copy,
[data-theme="light"] .footer-bottom-links a { color: var(--text-dim); }
[data-theme="light"] .footer-social-btn {
  background: var(--bg-card2);
  border-color: var(--border);
  color: var(--text-muted);
}

/* detail-card h3 uses var(--white) which is now themed — extra insurance */
[data-theme="light"] .detail-card h3 { color: var(--text); }

/* compare table header cell */
[data-theme="light"] .compare-header-cell { color: var(--text) !important; }

/* htmap close button */
[data-theme="light"] .htmap-detail-close:hover { background: var(--bg-card2); color: var(--text); }

/* htcomp header remove button – hardcoded dark bg */
[data-theme="light"] .htcomp-header-remove { background: rgba(0,0,0,0.12); color: var(--text-muted); }
[data-theme="light"] .htcomp-header-remove:hover { background: #ef4444; color: #fff; }

/* Notify modal box – uses hardcoded dark surface colours */
[data-theme="light"] .ht-notify-modal-box {
  background: var(--bg-card);
  border-color: rgba(0,224,84,0.3);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
[data-theme="light"] .th-notify-email-input,
[data-theme="light"] .ht-notify-modal-input {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

/* Single theater hero name – always sits on the dark gradient overlay so #fff is correct,
   no fix needed. But theater-detail-meta muted text should remain readable. */

/* cl-picker-title gradient is over a poster – #fff is intentional, no fix needed */
/* csc-* share card uses its own dark ticket design – intentionally dark, no fix needed */

/* ═══════════════════════════════════════════════════
   SECTION HEADING STYLE — unified across all pages
   ═══════════════════════════════════════════════════ */
.ht-section-title,
.th-section-title {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════
   HERO SECTION BACKGROUND — ensure dark bg in light mode  
   ═══════════════════════════════════════════════════ */
[data-theme="light"] .hero {
  background: linear-gradient(180deg, #f5f3ee 0%, #f0ece4 100%);
}
[data-theme="light"] .hero h1 { color: var(--on-dark); }
[data-theme="light"] .hero h1 em { color: var(--gold-dk); }
[data-theme="light"] .hero-stat-num { color: var(--on-dark); }
[data-theme="light"] .hero-eyebrow { 
  background: rgba(200,132,26,0.08); 
  border-color: rgba(200,132,26,0.2);
}
[data-theme="light"] .hero-stats { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .hero-stat { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .btn-outline {
  color: var(--on-dark);
  border-color: rgba(0,0,0,0.18);
}
[data-theme="light"] .btn-outline:hover {
  background: rgba(0,0,0,0.04);
  color: var(--on-dark);
}

/* ═══════════════════════════════════════════════════
   TRENDING SECTION — font consistency
   ═══════════════════════════════════════════════════ */
.tr-card-name,
.ht-section-title span,
.tr-sc-type {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════
   MOBILE — general spacing fixes
   ═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .hero-inner { padding: 64px 20px 56px; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .hero-sub { font-size: 0.95rem; }
  .hero-actions .btn { padding: 11px 20px; font-size: 0.85rem; }
  .hero-stats { padding-top: 28px; }
  .hero-stat { min-width: 90px; padding: 0 12px; }
  .hero-stat-num { font-size: 1.4rem; }
  .footer-top { padding: 40px 0 36px; gap: 24px; }
}

/* ═══════════════════════════════════════════════════
   CINELOG COMMUNITY FEED — homepage
   ═══════════════════════════════════════════════════ */
.cinelog-feed { margin-bottom: 28px; }

.clf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .clf-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px)  { .clf-grid { grid-template-columns: 1fr; } }

.clf-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  transition: border-color 0.2s, transform 0.15s;
}
.clf-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
}
.clf-card-you {
  border-color: rgba(0,224,84,0.25) !important;
  background: rgba(0,224,84,0.03);
}

.clf-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.clf-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,224,84,0.15);
  border: 1.5px solid rgba(0,224,84,0.3);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}
.clf-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.clf-handle {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  font-family: 'Inter', sans-serif;
}
.clf-time {
  font-size: 0.68rem;
  color: var(--text-dim);
}
.clf-badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.clf-movie {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.2;
}
.clf-theater {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clf-screen {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clf-stars {
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Feed CTA */
.cinelog-feed-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  gap: 16px;
  flex-wrap: wrap;
}
.cinelog-feed-cta p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}
[data-theme="light"] .clf-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .clf-movie { color: var(--on-dark); }
[data-theme="light"] .cinelog-feed-cta { background: var(--bg-card); border-color: var(--border); }

/* ══════════════════════════════════════════════════════════════════
 *  NOTIFY ME — Under Construction Theater Waitlist
 * ════════════════════════════════════════════════════════════════ */

/* Hero "Notify Me" button */
.th-btn-notify {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(0,224,84,.15);
    border: 1.5px solid var(--gold, #00e054);
    color: var(--gold, #00e054);
    border-radius: 8px;
    padding: 9px 18px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, color .18s;
    margin-top: 6px;
}
.th-btn-notify:hover {
    background: var(--gold, #00e054);
    color: #000;
}

/* Sidebar notify card */
.th-notify-card { border: 1.5px solid rgba(0,224,84,.4) !important; }

.th-notify-date-hint {
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 7px;
    padding: 7px 11px;
    font-size: .78rem;
    color: #f59e0b;
    font-weight: 600;
    margin-bottom: 12px;
}

.th-notify-label {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.th-notify-input-row {
    display: flex;
    gap: 6px;
}

.th-notify-email-input {
    flex: 1;
    background: var(--surface2, #1a1a2e);
    border: 1.5px solid var(--border, #2a2a3e);
    border-radius: 8px;
    color: var(--text, #fff);
    padding: 8px 11px;
    font-size: .82rem;
    outline: none;
    transition: border-color .15s;
    min-width: 0;
}
.th-notify-email-input:focus { border-color: var(--gold, #00e054); }
.th-notify-email-input::placeholder { color: var(--text-muted); }

.th-notify-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--gold, #00e054);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 8px 13px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
}
.th-notify-submit-btn:hover  { opacity: .85; }
.th-notify-submit-btn:disabled { opacity: .55; cursor: not-allowed; }

.th-notify-msg {
    font-size: .78rem;
    margin: 7px 0 0;
    min-height: 18px;
}
.th-notify-msg--ok  { color: #4ade80; }
.th-notify-msg--err { color: #f87171; }

/* ── Modal ───────────────────────────────────────────────────── */
.ht-notify-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ht-notify-modal[hidden] { display: none; }

.ht-notify-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s;
}
.ht-notify-modal--open .ht-notify-modal-backdrop { opacity: 1; }

.ht-notify-modal-box {
    position: relative;
    background: var(--surface, #12122a);
    border: 1px solid rgba(0,224,84,.35);
    border-radius: 16px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
    transform: translateY(18px) scale(.97);
    opacity: 0;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s;
}
.ht-notify-modal--open .ht-notify-modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ht-notify-modal-close {
    position: absolute;
    top: 14px; right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color .15s;
}
.ht-notify-modal-close:hover { color: var(--text, #fff); }

.ht-notify-modal-icon  { font-size: 2.2rem; margin-bottom: 10px; }
.ht-notify-modal-title { margin: 0 0 8px; font-size: 1.2rem; }
.ht-notify-modal-sub   { color: var(--text-muted); font-size: .87rem; margin: 0 0 20px; line-height: 1.55; }
.ht-notify-modal-date  { color: #f59e0b; font-weight: 600; }

.ht-notify-modal-input {
    width: 100%;
    background: var(--surface2, #1a1a2e);
    border: 1.5px solid var(--border, #2a2a3e);
    border-radius: 10px;
    color: var(--text, #fff);
    padding: 11px 14px;
    font-size: .9rem;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 10px;
    transition: border-color .15s;
}
.ht-notify-modal-input:focus  { border-color: var(--gold, #00e054); }
.ht-notify-modal-input::placeholder { color: var(--text-muted); }

.ht-notify-modal-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--gold, #00e054);
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .15s;
}
.ht-notify-modal-btn:hover   { opacity: .88; }
.ht-notify-modal-btn:disabled { opacity: .55; cursor: not-allowed; }

.ht-notify-modal-msg  { font-size: .82rem; margin: 8px 0 0; min-height: 18px; text-align: center; }
.ht-notify-modal-fine { color: var(--text-muted); font-size: .74rem; text-align: center; margin: 14px 0 0; }

@media (max-width: 480px) {
    .ht-notify-modal-box { padding: 28px 20px 22px; }
    .th-notify-input-row { flex-direction: column; }
    .th-notify-submit-btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────
   v3.1 — Accessibility (focus ring + reduced motion)
   Additive only; does not alter existing component styling.
   ───────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 9px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================
   SPECS PAGE — v3.3.0 premium redesign
============================================= */
.htspec-stats {
  display: inline-flex; gap: 10px; align-items: center;
  margin-top: 14px;
  font-size: 0.82rem; color: var(--text-muted);
}
.htspec-stats strong { color: var(--gold); font-weight: 600; }
.htspec-stats-dot { opacity: 0.4; }

/* Sticky toolbar */
.htspec-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px 10px;
  margin-bottom: 18px;
  position: sticky;
  top: 70px;
  z-index: 10;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.htspec-search { position: relative; margin-bottom: 12px; }
.htspec-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
#htspec-search-input {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px 10px 38px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
#htspec-search-input:focus { border-color: var(--gold); background: var(--bg); }
#htspec-search-input::placeholder { color: var(--text-muted); }

.htspec-chip-groups {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.htspec-chip-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.htspec-chip-label {
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-right: 4px;
}
.htspec-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.htspec-chip:hover { background: var(--bg-card2); color: var(--text); }
.htspec-chip-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
}
.htspec-chip-active:hover { background: var(--gold-lt); color: #0a0a0a; }

.htspec-result-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px;
  font-size: 0.78rem; color: var(--text-muted);
}
.htspec-reset {
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.htspec-reset:hover { text-decoration: underline; }

/* Table */
.htspec-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  overflow-x: auto;
}
.htspec-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}
.htspec-table th {
  background: var(--bg-card2);
  padding: 11px 16px;
  text-align: left;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.htspec-th-theater { padding-left: 18px; }
.htspec-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
  color: var(--text);
  vertical-align: middle;
}
.htspec-row:hover td { background: rgba(255,255,255,0.02); }
[data-theme="light"] .htspec-row:hover td { background: rgba(0,0,0,0.02); }

/* Theater group divider row */
.htspec-group-row td {
  padding: 0 !important;
  background: rgba(0,224,84,0.05);
  border-bottom: none !important;
  border-top: 1px solid rgba(0,224,84,0.18) !important;
}
.htspec-group-row:first-child td { border-top: none !important; }
.htspec-group {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 18px;
}
.htspec-group-thumb {
  width: 38px; height: 38px;
  border-radius: 9px;
  background-color: var(--bg-card2);
  background-size: cover; background-position: center;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.htspec-group-thumb-empty {
  background-image: linear-gradient(135deg, rgba(0,224,84,0.18), rgba(0,224,84,0.04));
}
.htspec-group-thumb span {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem; color: var(--gold);
}
.htspec-group-body { min-width: 0; }
.htspec-group-name {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  text-decoration: none;
}
.htspec-group-name svg { color: var(--text-muted); transition: color 0.15s; }
a.htspec-group-name:hover { color: var(--gold); }
a.htspec-group-name:hover svg { color: var(--gold); }
.htspec-group-meta {
  display: flex; gap: 8px; align-items: center;
  margin-top: 2px;
  font-size: 0.75rem; color: var(--text-muted);
}
.htspec-group-rating { color: var(--gold); font-weight: 600; }

/* Cells */
.htspec-cell-screen { padding-left: 56px !important; }
.htspec-screen-name { color: var(--text); font-weight: 500; }
.htspec-cell-num { font-variant-numeric: tabular-nums; }
.htspec-empty { color: var(--text-muted); opacity: 0.45; }

/* Badges */
.htspec-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--bg-card2);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.htspec-badge.res-4k {
  background: rgba(0,224,84,0.16);
  color: var(--gold);
}
.htspec-badge.res-2k { color: var(--text-muted); }
.htspec-badge.proj-laser {
  background: rgba(0,224,84,0.10);
  color: var(--gold);
}
.htspec-badge.proj-dual {
  background: rgba(0,224,84,0.20);
  color: var(--gold);
}
.htspec-badge.proj-led {
  background: rgba(60, 180, 130, 0.16);
  color: #5ed2a4;
}
.htspec-badge.proj-lamp { color: var(--text-muted); }
.htspec-badge.sound-atmos {
  background: rgba(0,224,84,0.14);
  color: var(--gold);
}

.htspec-tag {
  display: inline-block;
  font-size: 0.7rem;
  background: var(--bg-card2);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 500;
}
.htspec-tag-type {
  background: rgba(0,224,84,0.12);
  color: var(--gold);
}

.htspec-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.htspec-empty-state a, .htspec-empty-state button {
  color: var(--gold);
  background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit;
}

@media (max-width: 700px) {
  .htspec-toolbar { position: static; padding: 12px; }
  .htspec-chip-groups { gap: 6px 12px; }
  .htspec-table { min-width: 720px; }
  .htspec-cell-screen { padding-left: 16px !important; }
  .htspec-group { padding: 10px 12px; }
}

/* =============================================
   COMPARE PAGE — v3.3.0 premium redesign
============================================= */
.htcomp-wrap { max-width: 1180px; margin: 0 auto; }

/* Selection bar */
.htcomp-picker { margin-bottom: 20px; }
.htcomp-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.htcomp-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 8px 8px 8px;
  min-width: 220px;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.htcomp-chip:hover {
  border-color: rgba(0,224,84,0.35);
  background: linear-gradient(135deg, rgba(0,224,84,0.06), rgba(0,224,84,0.02));
}
.htcomp-chip-thumb {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--bg-card2);
  display: flex; align-items: center; justify-content: center;
}
.htcomp-chip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.htcomp-thumb-empty {
  background-image: linear-gradient(135deg, rgba(0,224,84,0.20), rgba(0,224,84,0.04));
}
.htcomp-thumb-initial {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  color: var(--gold);
}
.htcomp-chip-body { line-height: 1.25; min-width: 0; flex: 1; }
.htcomp-chip-name {
  font-size: 0.88rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 150px;
}
.htcomp-chip-area { font-size: 0.74rem; color: var(--text-muted); }
.htcomp-chip-remove {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.htcomp-chip-remove:hover { background: rgba(239,68,68,0.15); color: #ef4444; }

.htcomp-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 220px;
  background: transparent;
  border: 1px dashed var(--border-hi);
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 14px 16px;
  transition: border-color 0.2s, color 0.2s, background 0.15s;
}
.htcomp-add:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(0,224,84,0.04);
}

.htcomp-meta {
  margin-top: 10px;
  display: flex; gap: 14px; align-items: center;
  font-size: 0.78rem; color: var(--text-muted);
}
.htcomp-clear {
  background: none; border: none; padding: 0;
  color: var(--gold);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
}
.htcomp-clear:hover { text-decoration: underline; }

/* Search panel */
.htcomp-search-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.3s;
  margin-bottom: 0;
}
.htcomp-search-wrap.open {
  max-height: 480px;
  margin-bottom: 20px;
}
.htcomp-search-inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  max-width: 520px;
}
.htcomp-search-bar {
  position: relative;
  margin-bottom: 10px;
  display: flex; align-items: center;
}
.htcomp-search-bar svg:first-child {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
#htcomp-search-input {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 38px 10px 38px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
#htcomp-search-input:focus { border-color: var(--gold); }
.htcomp-search-close {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.htcomp-search-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
[data-theme="light"] .htcomp-search-close:hover { background: var(--bg-card2); }

.htcomp-search-list {
  max-height: 340px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 2px;
}
.htcomp-search-list::-webkit-scrollbar { width: 6px; }
.htcomp-search-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }

.htcomp-search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.htcomp-search-item:hover {
  background: var(--bg-card2);
  border-color: var(--border);
}
.htcomp-search-item-thumb {
  width: 40px; height: 40px;
  border-radius: 9px;
  background-color: var(--bg-card2);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.htcomp-search-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.htcomp-search-item-body { flex: 1; min-width: 0; }
.htcomp-search-item-name {
  font-size: 0.88rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.htcomp-search-item-meta { font-size: 0.74rem; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
.htcomp-search-item-rating { color: var(--gold); font-weight: 600; }
.htcomp-search-item-add {
  font-size: 0.72rem; font-weight: 600;
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(0,224,84,0.12);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.htcomp-search-empty {
  padding: 18px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Empty state */
.htcomp-empty {
  text-align: center;
  padding: 80px 20px;
  background: var(--bg-card);
  border: 1px dashed var(--border-hi);
  border-radius: 16px;
}
.htcomp-empty-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,224,84,0.16), rgba(0,224,84,0.04));
  color: var(--gold);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.htcomp-empty h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  color: var(--text);
  margin: 0 0 6px;
}
.htcomp-empty p { color: var(--text-muted); font-size: 0.88rem; margin: 0; }

/* Comparison table */
.htcomp-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow-x: auto;
}
.htcomp-table {
  width: 100%;
  border-collapse: collapse;
}
.htcomp-table td {
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.htcomp-table tr:last-child td { border-bottom: none; }

/* Header card row */
.htcomp-header-row td {
  padding: 0;
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
}
.htcomp-header-cell { position: relative; }
.htcomp-header-card {
  padding: 18px 16px;
  text-align: center;
  position: relative;
}
.htcomp-header-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  border: none; cursor: pointer;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}
.htcomp-header-remove:hover { background: #ef4444; }
.htcomp-header-thumb {
  width: 100%; max-width: 160px;
  aspect-ratio: 16 / 10;
  margin: 0 auto 10px;
  border-radius: 10px;
  background-color: var(--bg-card2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.htcomp-header-thumb img { width: 100%; height: 100%; object-fit: cover; }
.htcomp-header-thumb.htcomp-thumb-empty .htcomp-thumb-initial {
  font-size: 2.4rem;
}
.htcomp-header-info { line-height: 1.25; }
.htcomp-header-name {
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}
.htcomp-header-area {
  font-size: 0.76rem; color: var(--text-muted);
  margin-bottom: 12px;
}
.htcomp-header-actions {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.htcomp-btn {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.htcomp-btn:active { transform: scale(0.97); }
.htcomp-btn-primary { background: var(--gold); color: #0a0a0a; }
.htcomp-btn-primary:hover { background: var(--gold-lt); color: #0a0a0a; text-decoration: none; }
.htcomp-btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: rgba(255,255,255,0.10);
}
.htcomp-btn-ghost:hover { background: rgba(255,255,255,0.12); color: var(--text); text-decoration: none; }
[data-theme="light"] .htcomp-btn-ghost { background: var(--bg-card2); border-color: var(--border); }
[data-theme="light"] .htcomp-btn-ghost:hover { background: var(--border); }

/* Row label + value cells */
.htcomp-row-label {
  width: 150px; min-width: 130px;
  padding: 13px 16px;
  background: var(--bg-card2);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  position: sticky;
  left: 0;
  box-shadow: 1px 0 0 var(--border);
}
.htcomp-cell {
  padding: 13px 16px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text);
  position: relative;
}
.htcomp-cell-muted { color: var(--text-muted); opacity: 0.6; }
.htcomp-cell-best {
  background: rgba(0,224,84,0.07);
  color: var(--gold);
  font-weight: 700;
}
.htcomp-cell-best::after {
  content: 'BEST';
  position: absolute;
  top: 4px; right: 6px;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  opacity: 0.7;
  font-weight: 800;
  background: rgba(0,224,84,0.18);
  padding: 1px 5px;
  border-radius: 4px;
}
.htcomp-rating { color: var(--gold); font-weight: 700; }
.htcomp-yes { color: #5ed2a4; font-size: 1.05rem; font-weight: 700; }
.htcomp-no  { color: var(--text-muted); opacity: 0.5; }

/* Section subheaders inside the table */
.htcomp-subhead td {
  background: var(--bg);
  padding: 14px 16px 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: var(--text);
  font-size: 0.95rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 720px) {
  .htcomp-chip { min-width: 0; flex: 1 1 100%; }
  .htcomp-add { min-width: 0; flex: 1 1 100%; }
  .htcomp-row-label {
    width: 90px; min-width: 90px;
    font-size: 0.62rem; padding: 11px 8px;
    letter-spacing: 0.04em;
  }
  .htcomp-cell { padding: 11px 6px; font-size: 0.78rem; overflow-wrap: anywhere; }
  .htcomp-cell-best::after { display: none; }
  .htcomp-header-card { padding: 12px 6px; }
  .htcomp-header-thumb { max-width: 100px; }
  .htcomp-header-name { font-size: 0.78rem; }
  .htcomp-header-area { font-size: 0.66rem; margin-bottom: 8px; }
  .htcomp-btn { font-size: 0.7rem; padding: 5px 9px; }
  .htcomp-subhead td { padding: 10px 8px 4px; font-size: 0.85rem; }
}