@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-dark: #0B0C10;
  --bg-card: #15181E;
  --text-main: #C5C6C7;
  --text-bright: #FFFFFF;
  --accent-amber: #FF9F1C;
  --accent-neon: #2EC4B6;
  --border-neon: rgba(46, 196, 182, 0.35);
  --font-syne: 'Syne', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --container-max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); background-color: var(--bg-dark); color: var(--text-main); line-height: 1.65; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; }

.ticker-bar { background: var(--accent-amber); color: #0B0C10; font-family: var(--font-syne); font-weight: 800; font-size: 0.85rem; padding: 0.5rem 0; overflow: hidden; white-space: nowrap; }
.ticker-text { display: inline-block; animation: ticker 25s linear infinite; }
@keyframes ticker { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

.metro-header { background: rgba(11, 12, 16, 0.95); border-bottom: 1px solid var(--border-neon); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); }
.header-flex { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.brand-metro { font-family: var(--font-syne); font-size: 1.6rem; font-weight: 800; color: var(--text-bright); display: flex; align-items: center; gap: 0.5rem; }
.live-dot { width: 10px; height: 10px; background: var(--accent-neon); border-radius: 50%; display: inline-block; box-shadow: 0 0 10px var(--accent-neon); }

.ticket-stub { background: #15181E; border: 2px dashed var(--border-neon); border-left: 6px solid var(--accent-amber); border-radius: 12px; padding: 1.8rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.ticket-date { font-family: var(--font-syne); font-size: 1.2rem; color: var(--accent-amber); font-weight: 800; }

.terminal-chat { background: #050608; border: 1px solid var(--border-neon); border-radius: 16px; padding: 2rem; font-family: monospace; font-size: 0.95rem; color: var(--accent-neon); margin: 3rem 0; }
.chat-line { margin-bottom: 0.6rem; }
.chat-user { color: var(--accent-amber); font-weight: bold; }

.btn-amber { background: var(--accent-amber); color: #0B0C10; padding: 0.9rem 2rem; font-family: var(--font-syne); font-weight: 800; border-radius: 8px; border: none; cursor: pointer; transition: 0.3s; display: inline-block; box-shadow: 0 10px 25px rgba(255, 159, 28, 0.3); }
.btn-amber:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(255, 159, 28, 0.5); }