/* ═══════════════════════════════════════════
   B-Z Food Spot — Design System v2
   Light/Dark Theme + Responsive
   Mobile First → Tablet → Desktop Split View
   ═══════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ══════════════════════════════════════
   THEME: LIGHT (default)
   ══════════════════════════════════════ */
:root,
[data-theme="light"] {
  --bg-primary: #f5f6fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f2f8;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-input: #f0f2f8;
  --bg-body-gradient: radial-gradient(circle at 20% 20%, rgba(96,165,250,0.06) 0%, transparent 50%),
                      radial-gradient(circle at 80% 80%, rgba(52,211,153,0.05) 0%, transparent 50%);

  --accent-green: #16a34a;
  --accent-green-dim: rgba(22,163,74,0.1);
  --accent-green-glow: rgba(22,163,74,0.2);
  --accent-red: #dc2626;
  --accent-red-dim: rgba(220,38,38,0.08);
  --accent-red-glow: rgba(220,38,38,0.2);
  --accent-yellow: #d97706;
  --accent-yellow-dim: rgba(217,119,6,0.1);
  --accent-yellow-glow: rgba(217,119,6,0.2);
  --accent-blue: #2563eb;
  --accent-blue-dim: rgba(37,99,235,0.08);
  --accent-orange: #ea580c;
  --accent-purple: #7c3aed;

  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;

  --border-subtle: rgba(0,0,0,0.06);
  --border-light: rgba(0,0,0,0.1);
  --border-accent: rgba(0,0,0,0.14);

  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-glow-green: none;
  --shadow-glow-red: none;

  --map-filter: none;
  color-scheme: light;
}

/* ══════════════════════════════════════
   THEME: DARK
   ══════════════════════════════════════ */
[data-theme="dark"] {
  --bg-primary: #0a0a14;
  --bg-secondary: #12121f;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.08);
  --bg-glass: rgba(12,12,24,0.88);
  --bg-input: rgba(255,255,255,0.06);
  --bg-body-gradient: radial-gradient(circle at 20% 20%, rgba(52,211,153,0.03) 0%, transparent 50%),
                      radial-gradient(circle at 80% 80%, rgba(251,191,36,0.03) 0%, transparent 50%);

  --accent-green: #34d399;
  --accent-green-dim: rgba(52,211,153,0.15);
  --accent-green-glow: rgba(52,211,153,0.3);
  --accent-red: #f87171;
  --accent-red-dim: rgba(248,113,113,0.12);
  --accent-red-glow: rgba(248,113,113,0.3);
  --accent-yellow: #fbbf24;
  --accent-yellow-dim: rgba(251,191,36,0.12);
  --accent-yellow-glow: rgba(251,191,36,0.3);
  --accent-blue: #60a5fa;
  --accent-blue-dim: rgba(96,165,250,0.12);
  --accent-orange: #fb923c;
  --accent-purple: #a78bfa;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  --border-subtle: rgba(255,255,255,0.06);
  --border-light: rgba(255,255,255,0.1);
  --border-accent: rgba(255,255,255,0.15);

  --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow-green: 0 0 20px rgba(52,211,153,0.15);
  --shadow-glow-red: 0 0 20px rgba(248,113,113,0.15);

  --map-filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
  color-scheme: dark;
}

/* ══════════════════════════════════════
   SHARED TOKENS
   ══════════════════════════════════════ */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  --blur-glass: blur(20px);
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-smooth: 350ms cubic-bezier(0.4,0,0.2,1);

  --header-height: 56px;
  --bottom-nav-height: 60px;
  --max-width: 520px;
}

/* ══════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-family);
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}
body::before{
  content:'';position:fixed;inset:0;
  background:var(--bg-body-gradient);
  z-index:-1;pointer-events:none;
}
a{color:var(--accent-blue);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;color:inherit}

/* ══════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════ */
#app{
  max-width:var(--max-width);
  margin:0 auto;
  min-height:100dvh;
  position:relative;
}

/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
.app-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg-glass);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border-bottom:1px solid var(--border-subtle);
  padding:var(--space-md) var(--space-lg);
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-height);
}
.app-header__title{
  display:flex;align-items:center;gap:var(--space-sm);
  font-size:var(--font-size-lg);font-weight:700;letter-spacing:-0.02em;
}
.app-header__title .emoji{font-size:22px}
.app-header__subtitle{font-size:var(--font-size-xs);color:var(--text-muted);font-weight:400}
.app-header__actions{display:flex;gap:var(--space-sm)}

.header-btn{
  width:36px;height:36px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-input);border:1px solid var(--border-subtle);
  transition:all var(--transition-fast);font-size:16px;
}
.header-btn:hover{background:var(--bg-card-hover);border-color:var(--border-light)}
.header-btn:active{transform:scale(0.95)}

/* ══════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════ */
.stats-bar{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--space-sm);padding:var(--space-md) var(--space-lg);
  border-bottom:1px solid var(--border-subtle);
}
.stat-card{
  text-align:center;padding:var(--space-sm) var(--space-xs);
  border-radius:var(--radius-sm);background:var(--bg-card);
  border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-card);
  transition:all var(--transition-normal);
}
.stat-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-elevated)}
.stat-card__number{font-size:var(--font-size-xl);font-weight:800;line-height:1.2;letter-spacing:-0.02em}
.stat-card__label{font-size:var(--font-size-xs);color:var(--text-muted);margin-top:2px}
.stat-card--total .stat-card__number{color:var(--text-primary)}
.stat-card--available .stat-card__number{color:var(--accent-green)}
.stat-card--unavailable .stat-card__number{color:var(--accent-red)}
.stat-card--reports .stat-card__number{color:var(--accent-yellow)}

/* ══════════════════════════════════════
   SEARCH & FILTER
   ══════════════════════════════════════ */
.search-filter-bar{
  padding:var(--space-md) var(--space-lg);
  display:flex;flex-direction:column;gap:var(--space-sm);
  border-bottom:1px solid var(--border-subtle);
}
.search-input-wrapper{position:relative;display:flex;align-items:center}
.search-input-wrapper .search-icon{
  position:absolute;left:var(--space-md);
  color:var(--text-muted);font-size:14px;pointer-events:none;
}
.search-input{
  width:100%;padding:10px var(--space-lg) 10px 38px;
  background:var(--bg-input);border:1px solid var(--border-subtle);
  border-radius:var(--radius-full);font-size:var(--font-size-sm);
  color:var(--text-primary);outline:none;
  transition:all var(--transition-normal);
}
.search-input::placeholder{color:var(--text-muted)}
.search-input:focus{
  border-color:var(--accent-blue);
  background:var(--accent-blue-dim);
  box-shadow:0 0 0 3px rgba(37,99,235,0.08);
}
[data-theme="dark"] .search-input:focus{
  box-shadow:0 0 0 3px rgba(96,165,250,0.1);
}

.filter-row{
  display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;
}
.filter-row::-webkit-scrollbar{display:none}

.filter-chip{
  flex-shrink:0;padding:6px 12px;border-radius:var(--radius-full);
  font-size:var(--font-size-xs);font-weight:600;
  background:var(--bg-input);border:1px solid var(--border-subtle);
  color:var(--text-secondary);transition:all var(--transition-fast);
  white-space:nowrap;cursor:pointer;
}
.filter-chip:hover{background:var(--bg-card-hover);border-color:var(--border-light)}
.filter-chip:active{transform:scale(0.96)}
.filter-chip.active{background:var(--accent-blue-dim);border-color:var(--accent-blue);color:var(--accent-blue)}
.filter-chip--green.active{background:var(--accent-green-dim);border-color:var(--accent-green);color:var(--accent-green)}
.filter-chip--red.active{background:var(--accent-red-dim);border-color:var(--accent-red);color:var(--accent-red)}
.filter-chip--yellow.active{background:var(--accent-yellow-dim);border-color:var(--accent-yellow);color:var(--accent-yellow)}
.filter-chip--distance.active{background:rgba(124,58,237,0.1);border-color:var(--accent-purple);color:var(--accent-purple)}

/* Result count */
.result-count{
  padding:var(--space-xs) var(--space-lg);
  font-size:var(--font-size-xs);color:var(--text-muted);
  border-bottom:1px solid var(--border-subtle);
}

/* ══════════════════════════════════════
   TAB NAVIGATION
   ══════════════════════════════════════ */
.tab-nav{display:flex;border-bottom:1px solid var(--border-subtle)}
.tab-btn{
  flex:1;padding:var(--space-md);font-size:var(--font-size-sm);
  font-weight:600;color:var(--text-muted);text-align:center;
  transition:all var(--transition-normal);position:relative;
}
.tab-btn::after{
  content:'';position:absolute;bottom:-1px;left:20%;right:20%;
  height:2px;background:var(--accent-blue);border-radius:2px 2px 0 0;
  opacity:0;transition:all var(--transition-smooth);
}
.tab-btn.active{color:var(--accent-blue)}
.tab-btn.active::after{opacity:1;left:10%;right:10%}
.tab-btn:hover:not(.active){color:var(--text-secondary)}

/* ══════════════════════════════════════
   TAB CONTENT
   ══════════════════════════════════════ */
.tab-content{padding-bottom:calc(var(--bottom-nav-height) + var(--space-xl))}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeIn 200ms ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════
   ZONE GROUP
   ══════════════════════════════════════ */
.zone-group{margin-bottom:var(--space-md)}
.zone-group__header{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-sm) var(--space-lg);
  font-size:var(--font-size-xs);font-weight:700;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;
  position:sticky;top:var(--header-height);
  background:var(--bg-glass);backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);z-index:10;
}
.zone-group__header::before{
  content:'';width:3px;height:14px;background:var(--accent-blue);border-radius:2px;
}
.zone-group__count{color:var(--text-muted);font-weight:400}

/* ══════════════════════════════════════
   RESTAURANT CARD
   ══════════════════════════════════════ */
.restaurant-list{
  padding:0 var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);
}
.restaurant-card{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);
  transition:all var(--transition-normal);cursor:pointer;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.restaurant-card::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  transition:all var(--transition-normal);
}
.restaurant-card--available::before{background:var(--accent-green)}
.restaurant-card--unavailable::before{background:var(--accent-red)}
.restaurant-card--unverified::before{background:var(--accent-yellow)}
.restaurant-card:hover,.restaurant-card:active{
  background:var(--bg-card-hover);border-color:var(--border-light);
  box-shadow:var(--shadow-elevated);transform:translateY(-1px);
}

.restaurant-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-sm)}
.restaurant-card__name{font-size:var(--font-size-base);font-weight:700;line-height:1.3;flex:1}
.restaurant-card__status{
  flex-shrink:0;padding:3px 8px;border-radius:var(--radius-full);
  font-size:var(--font-size-xs);font-weight:600;
  display:flex;align-items:center;gap:3px;
}
.status-available{background:var(--accent-green-dim);color:var(--accent-green)}
.status-unavailable{background:var(--accent-red-dim);color:var(--accent-red)}
.status-unverified{background:var(--accent-yellow-dim);color:var(--accent-yellow)}

.restaurant-card__meta{
  display:flex;flex-wrap:wrap;gap:var(--space-sm);
  margin-top:6px;font-size:var(--font-size-xs);color:var(--text-muted);
}
.restaurant-card__meta-item{display:flex;align-items:center;gap:3px}

/* Distance badge */
.restaurant-card__distance{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:var(--radius-full);
  font-size:var(--font-size-xs);font-weight:600;
  background:rgba(124,58,237,0.08);color:var(--accent-purple);
  border:1px solid rgba(124,58,237,0.15);
}

.restaurant-card__note{
  margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);
  background:var(--accent-yellow-dim);
  border-left:2px solid var(--accent-yellow);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:var(--font-size-xs);color:var(--text-secondary);line-height:1.5;
}
.restaurant-card__special-note{
  margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);
  background:var(--accent-blue-dim);
  border-left:2px solid var(--accent-blue);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:var(--font-size-xs);color:var(--text-secondary);line-height:1.5;
}

.restaurant-card__actions{
  display:flex;gap:6px;margin-top:var(--space-md);flex-wrap:wrap;
}
.card-action-btn{
  padding:5px 10px;border-radius:var(--radius-full);
  font-size:var(--font-size-xs);font-weight:600;
  border:1px solid var(--border-subtle);background:var(--bg-input);
  color:var(--text-secondary);transition:all var(--transition-fast);
  display:flex;align-items:center;gap:3px;
}
.card-action-btn:hover{background:var(--bg-card-hover);border-color:var(--border-light);color:var(--text-primary)}
.card-action-btn:active{transform:scale(0.96)}
.card-action-btn--naver:hover{border-color:#1ec800;color:#1ec800}
.card-action-btn--kakao:hover{border-color:#fee500;color:#8a7600}
[data-theme="dark"] .card-action-btn--kakao:hover{color:#fee500}
.card-action-btn--google:hover{border-color:#4285f4;color:#4285f4}
.card-action-btn--report{border-color:var(--accent-orange);color:var(--accent-orange)}
.card-action-btn--map{border-color:var(--accent-purple);color:var(--accent-purple)}

/* User report badge */
.restaurant-card__user-report{
  margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-sm);font-size:var(--font-size-xs);
  display:flex;align-items:center;gap:var(--space-sm);
}
.restaurant-card__user-report--success{
  background:var(--accent-green-dim);border:1px solid var(--accent-green-glow);color:var(--accent-green);
}
.restaurant-card__user-report--fail{
  background:var(--accent-red-dim);border:1px solid var(--accent-red-glow);color:var(--accent-red);
}

/* ══════════════════════════════════════
   MAP VIEW
   ══════════════════════════════════════ */
.map-container{
  height:calc(100dvh - var(--header-height) - var(--bottom-nav-height) - 200px);
  min-height:400px;margin:var(--space-md) var(--space-lg);
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-subtle);position:relative;
  box-shadow:var(--shadow-card);
}

/* Naver Maps 범례 */
.map-legend{
  position:absolute;bottom:var(--space-md);left:var(--space-md);z-index:10;
  background:var(--bg-glass);backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:var(--space-sm) var(--space-md);font-size:var(--font-size-xs);
  display:flex;flex-direction:column;gap:3px;
}
.map-legend-item{display:flex;align-items:center;gap:var(--space-sm);color:var(--text-secondary)}
.map-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.map-legend-dot--green{background:#16a34a}
.map-legend-dot--red{background:#dc2626}
.map-legend-dot--yellow{background:#d97706}
.map-legend-dot--blue{background:#2563eb}

/* ══════════════════════════════════════
   ZEROPAY SEARCH VIEW
   ══════════════════════════════════════ */
.zeropay-header{
  padding:var(--space-lg);text-align:center;
}
.zeropay-header__title{
  font-size:var(--font-size-lg);font-weight:800;color:var(--text-primary);
  margin-bottom:var(--space-sm);
}
.zeropay-header__desc{
  font-size:var(--font-size-sm);color:var(--text-muted);line-height:1.5;
}
.zeropay-loading{
  display:flex;align-items:center;justify-content:center;gap:var(--space-md);
  padding:var(--space-xl);color:var(--text-muted);font-size:var(--font-size-sm);
}
.spinner{
  width:20px;height:20px;border:2px solid var(--border-subtle);
  border-top-color:var(--accent-blue);border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.zeropay-tier-group{
  margin:0 var(--space-lg) var(--space-lg);
}
.zeropay-tier-header{
  padding:var(--space-sm) var(--space-md);
  font-size:var(--font-size-sm);font-weight:700;color:var(--text-primary);
  background:var(--bg-card);border-radius:var(--radius-sm);
  margin-bottom:var(--space-sm);
  display:flex;align-items:center;justify-content:space-between;
}
.zeropay-tier-count{
  font-size:var(--font-size-xs);color:var(--text-muted);font-weight:500;
}
.zeropay-list{display:flex;flex-direction:column;gap:var(--space-sm)}

.zeropay-card{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-md);
  box-shadow:var(--shadow-card);transition:all var(--transition-fast);
}
.zeropay-card:hover{
  box-shadow:var(--shadow-elevated);transform:translateY(-1px);
}
.zeropay-card--matched{
  border-left:3px solid var(--accent-green);
}
.zeropay-card__top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  margin-bottom:var(--space-xs);flex-wrap:wrap;
}
.zeropay-card__name{
  font-size:var(--font-size-base);font-weight:700;color:var(--text-primary);
}
.zeropay-card__meta{
  display:flex;flex-wrap:wrap;gap:var(--space-sm);
  font-size:var(--font-size-xs);color:var(--text-muted);
  margin-bottom:var(--space-xs);
}
.zeropay-card__actions{
  display:flex;gap:var(--space-sm);margin-top:var(--space-sm);
  padding-top:var(--space-sm);border-top:1px solid var(--border-subtle);
}
.zeropay-card__actions .card-action-btn{
  font-size:var(--font-size-xs);padding:3px 8px;
  border-radius:var(--radius-full);border:1px solid var(--border-subtle);
  color:var(--text-secondary);background:transparent;cursor:pointer;
  text-decoration:none;transition:all var(--transition-fast);
}
.zeropay-card__actions .card-action-btn:hover{
  border-color:var(--accent-blue);color:var(--accent-blue);
}

.zeropay-badge{
  font-size:10px;padding:2px 8px;border-radius:var(--radius-full);
  font-weight:600;white-space:nowrap;
}
.zeropay-badge--match{
  background:rgba(22,163,74,0.1);color:#16a34a;
}
.zeropay-badge--new{
  background:rgba(37,99,235,0.1);color:#2563eb;
}

/* filter chip blue variant */
.filter-chip--blue{
  background:rgba(37,99,235,0.08);color:#2563eb;border-color:rgba(37,99,235,0.2);
}
.filter-chip--blue.active{
  background:rgba(37,99,235,0.15);border-color:#2563eb;
}

/* ══════════════════════════════════════
   STATS VIEW
   ══════════════════════════════════════ */
.stats-view{padding:var(--space-lg)}
.stats-section{margin-bottom:var(--space-xl)}
.stats-section__title{
  font-size:var(--font-size-sm);font-weight:700;color:var(--text-muted);
  margin-bottom:var(--space-md);text-transform:uppercase;letter-spacing:0.04em;
}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}
.stats-big-card{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-lg);text-align:center;
  box-shadow:var(--shadow-card);
}
.stats-big-card__number{font-size:var(--font-size-3xl);font-weight:800;line-height:1}
.stats-big-card__label{font-size:var(--font-size-sm);color:var(--text-muted);margin-top:var(--space-sm)}

.stats-bar-chart{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-card);
}
.stats-bar-row{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.stats-bar-row:last-child{margin-bottom:0}
.stats-bar-label{font-size:var(--font-size-xs);color:var(--text-secondary);width:80px;flex-shrink:0;text-align:right}
.stats-bar-track{flex:1;height:8px;background:var(--bg-input);border-radius:var(--radius-full);overflow:hidden}
.stats-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 800ms cubic-bezier(0.4,0,0.2,1)}
.stats-bar-fill--green{background:var(--accent-green)}
.stats-bar-fill--red{background:var(--accent-red)}
.stats-bar-fill--yellow{background:var(--accent-yellow)}
.stats-bar-value{font-size:var(--font-size-xs);color:var(--text-muted);width:28px;text-align:right}

/* Recent Reports */
.recent-reports{display:flex;flex-direction:column;gap:var(--space-sm)}
.recent-report-item{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);background:var(--bg-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  font-size:var(--font-size-xs);box-shadow:var(--shadow-card);
}
.recent-report-item__icon{font-size:16px;flex-shrink:0}
.recent-report-item__info{flex:1;min-width:0}
.recent-report-item__name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-report-item__date{color:var(--text-muted)}
.recent-report-item__delete{
  flex-shrink:0;color:var(--text-muted);font-size:14px;padding:4px;
  border-radius:var(--radius-sm);transition:all var(--transition-fast);
}
.recent-report-item__delete:hover{color:var(--accent-red);background:var(--accent-red-dim)}

/* ══════════════════════════════════════
   BOTTOM NAVIGATION
   ══════════════════════════════════════ */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--max-width);height:var(--bottom-nav-height);
  background:var(--bg-glass);backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border-top:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:space-around;
  z-index:100;padding-bottom:env(safe-area-inset-bottom,0);
}
.bottom-nav__btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--space-sm);font-size:var(--font-size-xs);
  color:var(--text-muted);transition:all var(--transition-fast);
  border-radius:var(--radius-sm);min-width:60px;
}
.bottom-nav__btn .nav-icon{font-size:20px;line-height:1}
.bottom-nav__btn.active{color:var(--accent-blue)}
.bottom-nav__btn:hover:not(.active){color:var(--text-secondary)}

/* ══════════════════════════════════════
   MODAL
   ══════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);z-index:200;
  align-items:flex-end;justify-content:center;
}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,0.6)}
.modal-overlay.open{display:flex;animation:overlayIn 200ms ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}

.modal{
  width:100%;max-width:var(--max-width);max-height:85dvh;
  background:var(--bg-secondary);border:1px solid var(--border-light);
  border-bottom:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:var(--space-xl);overflow-y:auto;
  animation:slideUp 300ms cubic-bezier(0.4,0,0.2,1);
  box-shadow:var(--shadow-elevated);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal__handle{width:36px;height:4px;background:var(--text-muted);border-radius:2px;margin:0 auto var(--space-lg);opacity:0.5}
.modal__title{font-size:var(--font-size-lg);font-weight:700;margin-bottom:var(--space-xs)}
.modal__subtitle{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--space-xl)}

.form-group{margin-bottom:var(--space-lg)}
.form-label{display:block;font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--space-sm);color:var(--text-secondary)}
.form-radio-group{display:flex;gap:var(--space-sm)}
.form-radio-btn{
  flex:1;padding:var(--space-md);text-align:center;border-radius:var(--radius-md);
  border:1px solid var(--border-subtle);background:var(--bg-card);
  font-size:var(--font-size-sm);font-weight:600;cursor:pointer;
  transition:all var(--transition-fast);box-shadow:var(--shadow-card);
}
.form-radio-btn .radio-emoji{display:block;font-size:24px;margin-bottom:var(--space-xs)}
.form-radio-btn.selected--success{border-color:var(--accent-green);background:var(--accent-green-dim);color:var(--accent-green)}
.form-radio-btn.selected--fail{border-color:var(--accent-red);background:var(--accent-red-dim);color:var(--accent-red)}
.form-radio-btn.selected--unknown{border-color:var(--accent-yellow);background:var(--accent-yellow-dim);color:var(--accent-yellow)}

.form-textarea{
  width:100%;min-height:80px;padding:var(--space-md);
  background:var(--bg-input);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);font-size:var(--font-size-sm);
  color:var(--text-primary);resize:vertical;outline:none;
  transition:border-color var(--transition-fast);
}
.form-textarea:focus{border-color:var(--accent-blue)}
.form-textarea::placeholder{color:var(--text-muted)}
.form-input{
  width:100%;padding:var(--space-sm) var(--space-md);
  background:var(--bg-input);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);font-size:var(--font-size-sm);
  color:var(--text-primary);outline:none;
}
.form-input:focus{border-color:var(--accent-blue)}
.form-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-xl)}

.btn{
  flex:1;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);
  font-size:var(--font-size-sm);font-weight:700;text-align:center;
  transition:all var(--transition-fast);
}
.btn--primary{background:var(--accent-blue);color:var(--text-inverse)}
.btn--primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.25)}
.btn--ghost{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-secondary)}
.btn--ghost:hover{background:var(--bg-card-hover);border-color:var(--border-light)}

/* ══════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════ */
.empty-state{text-align:center;padding:var(--space-3xl) var(--space-lg);color:var(--text-muted)}
.empty-state__icon{font-size:48px;margin-bottom:var(--space-md)}
.empty-state__text{font-size:var(--font-size-sm)}

.scroll-top-btn{
  position:fixed;bottom:calc(var(--bottom-nav-height) + var(--space-lg));right:var(--space-lg);
  width:40px;height:40px;border-radius:50%;background:var(--accent-blue);
  color:white;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-elevated);opacity:0;pointer-events:none;
  transition:all var(--transition-normal);z-index:50;font-size:18px;
}
.scroll-top-btn.visible{opacity:1;pointer-events:auto}

.toast{
  position:fixed;top:calc(var(--header-height) + var(--space-md));
  left:50%;transform:translateX(-50%) translateY(-20px);
  padding:var(--space-sm) var(--space-lg);
  background:var(--bg-glass);backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border:1px solid var(--border-light);border-radius:var(--radius-full);
  font-size:var(--font-size-sm);font-weight:600;z-index:300;
  opacity:0;pointer-events:none;transition:all var(--transition-smooth);
  white-space:nowrap;box-shadow:var(--shadow-elevated);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast--success{border-color:var(--accent-green);color:var(--accent-green)}
.toast--error{border-color:var(--accent-red);color:var(--accent-red)}
.toast--info{border-color:var(--accent-blue);color:var(--accent-blue)}

.skeleton{
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card-hover) 50%,var(--bg-card) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ══════════════════════════════════════
   RESPONSIVE: TABLET (768px+)
   ══════════════════════════════════════ */
@media (min-width:768px){
  :root{--max-width:640px;--font-size-base:15px}
  .stats-bar{gap:var(--space-md)}
  .stat-card{padding:var(--space-md)}
  .stat-card__number{font-size:var(--font-size-2xl)}
}

/* ══════════════════════════════════════
   RESPONSIVE: DESKTOP (1024px+)
   ══════════════════════════════════════ */
@media (min-width:1024px){
  :root{--max-width:680px;--header-height:60px}
  .stat-card__number{font-size:var(--font-size-2xl)}
  .map-container{min-height:500px}
  .restaurant-list{gap:var(--space-md)}
}

/* ══════════════════════════════════════
   RESPONSIVE: WIDE (1440px+)
   ══════════════════════════════════════ */
@media (min-width:1440px){
  :root{--max-width:720px}
}

/* ══════════════════════════════════════
   SAFE AREA (notch / home indicator)
   ══════════════════════════════════════ */
@supports (padding-bottom:env(safe-area-inset-bottom)){
  .bottom-nav{
    padding-bottom:env(safe-area-inset-bottom);
    height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  }
}