* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 2rem; background: #f8fafc; color: #111827; }
header { margin-bottom: 2rem; max-width: 1200px; margin-left: auto; margin-right: auto; }
h1 { margin: 0 0 0.5rem; font-size: 2.5rem; }
.header-desc { color: #6b7280; margin: 0.5rem 0; }
.controls { display: flex; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
.control-group { display: flex; gap: 0.5rem; align-items: center; }
label { font-weight: 500; color: #374151; }
select, input[type="text"] { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.95rem; }
select { cursor: pointer; }
input[type="text"] { flex: 1; min-width: 200px; }
button[type="submit"] { padding: 0.5rem 1rem; background: #1d4ed8; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500; }
button[type="submit"]:hover { background: #1e40af; }
a { color: #1d4ed8; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; }

.stock-table { width: 100%; border-collapse: collapse; background: white; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.stock-table thead tr { background: #f8fafc; border-bottom: 2px solid #e5e7eb; }
.stock-table th { padding: 0.25rem 0.45rem; text-align: left; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
.stock-table th.num { text-align: right; }
.stock-table td { padding: 0.25rem 0.45rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; font-size: 0.72rem; }
.stock-row:last-child td { border-bottom: none; }
.stock-row:hover td { background: #f9fafb; }
.stock-row.positive { border-left: 3px solid #059669; }
.stock-row.negative { border-left: 3px solid #dc2626; }

.sym-cell a { font-size: 0.72rem; font-weight: 700; color: #111827; }
.sym-cell a:hover { color: #1d4ed8; text-decoration: none; }
.name-cell { max-width: 220px; }
.company-name { display: block; font-size: 0.68rem; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exchange { display: block; font-size: 0.6rem; color: #9ca3af; margin-top: 0.05rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.price { font-size: 0.95rem; font-weight: 600; color: #111827; }
.change { font-size: 0.9rem; }
.change-pct { font-size: 0.9rem; font-weight: 600; }
.positive-text { color: #059669; }
.negative-text { color: #dc2626; }

.market-cell { white-space: nowrap; }
.market-badge { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 0.25rem; background: #f3f4f6; color: #6b7280; }
.market-badge.open { background: #d1fae5; color: #065f46; }

.actions-cell { white-space: nowrap; text-align: right; }
.watchlist-btn { background: none; border: 1px solid #d1d5db; padding: 0.1rem 0.25rem; border-radius: 0.2rem; cursor: pointer; font-size: 0.62rem; color: #6b7280; transition: all 0.15s; }
.watchlist-btn:hover { background: #f3f4f6; }
.watchlist-btn.active { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.yf-link { margin-left: 0.25rem; font-size: 0.62rem; color: #9ca3af; text-decoration: none; }
.yf-link:hover { color: #1d4ed8; }

.section { margin-bottom: 3rem; }
.section-title { font-size: 1.8rem; font-weight: 700; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 3px solid #1d4ed8; }
.trending-title { border-bottom-color: #dc2626; }

.news-list-compact { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.news-row { display: grid; grid-template-columns: 64px 1fr 80px; align-items: start; gap: 0.75rem; padding: 0.65rem 1rem; border-bottom: 1px solid #f3f4f6; }
.news-row:last-child { border-bottom: none; }
.news-row:hover { background: #f9fafb; }
.news-row-thumb { width: 64px; height: 48px; border-radius: 0.25rem; overflow: hidden; background: #f3f4f6; flex-shrink: 0; }
.news-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-row-body { min-width: 0; }
.news-row-source { font-size: 0.7rem; font-weight: 600; color: #1d4ed8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.15rem; }
.news-row-title { font-size: 0.875rem; line-height: 1.2; }
.news-row-title a { color: #111827; text-decoration: none; }
.news-row-title a:hover { color: #1d4ed8; }
.news-row-title strong { font-weight: 600; }
.news-row-desc { font-size: 0.78rem; color: #6b7280; line-height: 1.4; margin-top: 0.2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-row-author { font-size: 0.7rem; color: #9ca3af; margin-top: 0.2rem; }
.news-row-time { font-size: 0.7rem; color: #9ca3af; text-align: right; white-space: nowrap; padding-top: 0.15rem; }

.search-form { background: white; padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.footer { margin-top: 2rem; font-size: 0.95rem; color: #6b7280; text-align: center; }
.error { background: #fee2e2; color: #991b1b; padding: 1rem; border-radius: 0.375rem; margin-bottom: 1rem; }
.feed-link { display: inline-block; margin-top: 1rem; }
.daily-banner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.banner-wide { grid-column: span 1; }
@media (max-width: 900px) { .daily-banner { grid-template-columns: 1fr; } .banner-wide { grid-column: span 1; } }
@media (max-width: 600px) { .daily-banner { grid-template-columns: 1fr; } .banner-wide { grid-column: span 1; } }
.quote-card { background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%); color: white; border-radius: 0.75rem; padding: 1.5rem; }
.quote-card blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; font-style: italic; }
.quote-card cite { display: block; margin-top: 0.75rem; font-size: 0.9rem; opacity: 0.8; font-style: normal; }
.joke-card { background: linear-gradient(135deg, #065f46 0%, #059669 100%); color: white; border-radius: 0.75rem; padding: 1.5rem; }
.joke-card .setup { font-size: 1rem; line-height: 1.5; margin: 0 0 0.75rem; }
.joke-card .reveal-btn { background: rgba(255,255,255,0.2); border: none; color: white; border-radius: 0.375rem; padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.95rem; }
.joke-card .reveal-btn:hover { background: rgba(255,255,255,0.3); }
.joke-card .punchline { font-size: 1rem; font-weight: 600; margin: 0; }
.card-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 0.75rem; }
.small-card { border-radius: 0.75rem; padding: 1rem; text-decoration: none; display: block; color: white; }
.small-card:hover { opacity: 0.9; text-decoration: none; }
.small-card .card-label { color: white; margin-bottom: 0.5rem; }
.weather-card { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); }
.weather-main { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.weather-icon { font-size: 1.6rem; }
.weather-temp { font-size: 1.6rem; font-weight: 200; color: white; }
.weather-desc { font-size: 0.8rem; opacity: 0.8; color: white; }
.weather-stats { display: flex; gap: 0.5rem; font-size: 0.75rem; opacity: 0.7; color: white; flex-wrap: wrap; margin-top: 0.35rem; }
.iss-card { background: linear-gradient(135deg, #0a0a1a 0%, #1a0533 50%, #0d1b2a 100%); border: 1px solid rgba(255,255,255,0.1); }
.iss-main { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.iss-icon { font-size: 1.6rem; }
.iss-coords { font-size: 0.85rem; font-weight: 600; color: white; }
.iss-desc { font-size: 0.8rem; opacity: 0.8; color: white; margin-bottom: 0.35rem; }
.iss-stats { display: flex; gap: 0.5rem; font-size: 0.75rem; opacity: 0.7; color: white; flex-wrap: wrap; }
.tide-card { background: linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 100%); }
.tide-rows { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.35rem; }
.tide-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.tide-type-H { font-weight: 700; }
.tide-type-L { opacity: 0.75; }
.bus-card { background: linear-gradient(135deg, #1a1a2e 0%, #c2410c 100%); }
.bus-rows { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.35rem; }
.bus-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; gap: 0.4rem; }
.bus-line { background: #c2410c; border-radius: 0.25rem; padding: 0.1rem 0.4rem; font-weight: 900; font-size: 0.85rem; flex: 0 0 auto; min-width: 2rem; text-align: center; }
.bus-dest { flex: 1; opacity: 0.85; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bus-time { font-weight: 700; flex: 0 0 auto; font-size: 0.8rem; }

.movie-strip { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.75rem; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
.movie-card { flex: 0 0 150px; background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: transform 0.15s, box-shadow 0.15s; }
.movie-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.movie-poster { width: 100%; height: 220px; object-fit: cover; display: block; }
.movie-poster-placeholder { width: 100%; height: 220px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.movie-info { padding: 0.75rem; }
.movie-title { font-size: 0.85rem; font-weight: 600; color: #111827; line-height: 1.3; margin-bottom: 0.35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.movie-meta { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.movie-year { font-size: 0.75rem; color: #9ca3af; }
.movie-rating { font-size: 0.75rem; color: #f59e0b; font-weight: 600; }
.movie-services { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.service-badge { font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 0.25rem; border: 1px solid; text-decoration: none; white-space: nowrap; }
.service-badge:hover { opacity: 0.8; }
.movie-release { font-size: 0.72rem; color: #6b7280; margin-top: 0.3rem; }