*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root {
  --bg-0:#080808;
  --bg-1:#0d0d0d;
  --bg-2:#141414;
  --bg-card:rgba(18,18,18,0.9);
  --bg-card-hover:rgba(22,22,22,0.97);
  --border:rgba(255,255,255,0.10);
  --border-hover:rgba(255,255,255,0.26);
  --accent:#ffffff;
  --accent-dim:rgba(255,255,255,0.7);
  --accent-faint:rgba(255,255,255,0.08);
  --accent-glow:rgba(255,255,255,0.06);
  --logo-blue:#00d4ff;
  --logo-white:#ffffff;
  --green:#22c55e;
  --red:#ef4444;
  --amber:#f59e0b;
  --text-0:#ffffff;
  --text-1:#f0f0f0;
  --text-2:#c8c8c8;
  --text-3:#666666;
  --font-display:'Archivo Black',sans-serif;
  --font-hero:'Bebas Neue',sans-serif;
  --font-heading:'Lilita One',sans-serif;
  --font-body:'Instrument Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --radius:12px;
  --radius-sm:8px;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --status-working:#22c55e;
  --status-evening:#f59e0b;
  --status-night:#525252;
  --nav-bg:rgba(8,8,8,0.85);
  --nav-border:rgba(255,255,255,0.1);
}

[data-theme="light"] {
  --bg-0:#f5f5f5;
  --bg-1:#eeeeee;
  --bg-2:#e5e5e5;
  --bg-card:rgba(240,240,240,0.95);
  --bg-card-hover:rgba(235,235,235,0.98);
  --border:rgba(0,0,0,0.1);
  --border-hover:rgba(0,0,0,0.22);
  --accent:#0a0a0a;
  --accent-dim:rgba(10,10,10,0.7);
  --accent-faint:rgba(0,0,0,0.06);
  --accent-glow:rgba(0,0,0,0.04);
  --text-0:#0a0a0a;
  --text-1:#404040;
  --text-2:#737373;
  --text-3:#d4d4d4;
  --nav-bg:rgba(245,245,245,0.9);
  --nav-border:rgba(0,0,0,0.12);
}

html{scroll-behavior:auto;overflow-x:hidden;width:100%;}
body{font-family:var(--font-body);background:var(--bg-0);color:var(--text-0);min-height:100vh;overflow-x:hidden;line-height:1.5;transition:background 0.5s var(--ease),color 0.5s var(--ease);width:100%;position:relative;}

html.theme-switching body,
html.theme-switching header,
html.theme-switching .hero-nav,
html.theme-switching main,
html.theme-switching .content-area,
html.theme-switching .sidebar,
html.theme-switching .country-card,
html.theme-switching .city-card,
html.theme-switching .fav-card,
html.theme-switching .stats-bar,
html.theme-switching #search-input,
html.theme-switching .tab-btn,
html.theme-switching .tabs,
html.theme-switching .my-location-card,
html.theme-switching .planner-card,
html.theme-switching .timeline-chart,
html.theme-switching .sidebar-card,
html.theme-switching .diff-card {
  transition:
    background-color 0.28s cubic-bezier(0.4,0,0.2,1),
    border-color     0.28s cubic-bezier(0.4,0,0.2,1),
    color            0.20s cubic-bezier(0.4,0,0.2,1),
    box-shadow       0.28s cubic-bezier(0.4,0,0.2,1) !important;
}

.hero-nav { transition: top 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.nav-theme-btn .icon-sun, .nav-theme-btn .icon-moon { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }

#app { width: 100%; max-width: 100vw; overflow-x: hidden; }