/* Basic reset */
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, sans-serif; background:#f4f6f8; color:#102a43; }
a { text-decoration:none; color:inherit; }

/* Top bar */
.topbar { background:#102a43; color:#fff; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; }
.topbar nav a { margin-left:15px; color:#e0e0e0; }
.topbar nav a:hover { color:#fff; }
.logo { font-weight:bold; font-size:1.2rem; }

/* Alert */
.alert { background:#e74c3c; color:#fff; text-align:center; padding:8px; }
.hidden { display:none; }

/* Ticker */
.ticker { overflow:hidden; background:rgba(16,42,67,0.7); color:#fff; white-space:nowrap; }
.ticker .track { display:inline-block; padding-left:100%; animation:scroll 20s linear infinite; }
.ticker:hover .track { animation-play-state:paused; }
@keyframes scroll { from { transform:translateX(0); } to { transform:translateX(-100%); } }
.ticker-item { display:inline-block; padding:0 20px; font-size:0.9rem; }
.ticker-item svg { width:16px; height:16px; vertical-align:middle; margin-right:4px; }
.badge { padding:2px 6px; border-radius:4px; font-size:0.75rem; }
.badge.up { background:#2ecc71; color:#fff; }
.badge.down { background:#e74c3c; color:#fff; }

/* Search & filters */
.search-bar { padding:15px; display:flex; flex-direction:column; gap:10px; }
.search-bar input { padding:8px; border:1px solid #ccc; border-radius:4px; }
.filters button { margin-right:6px; padding:6px 12px; border:none; border-radius:4px; background:#1f7a8c; color:#fff; cursor:pointer; }
.filters button.active, .filters button:hover { background:#145364; }

/* Card grid */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:15px; padding:0 15px 30px; }
.card { background:#fff; border-radius:16px; padding:15px; box-shadow:0 2px 6px rgba(0,0,0,0.1); cursor:pointer; transition:transform .2s; }
.card:hover { transform:translateY(-3px); }
.card h3 { margin-top:0; font-size:1rem; }
.card .price { font-size:0.9rem; }

/* Converter */
.converter { background:#fff; margin:15px; padding:15px; border-radius:16px; box-shadow:0 2px 6px rgba(0,0,0,0.1); display:flex; flex-direction:column; gap:10px; }
.converter .row { display:flex; gap:10px; }
.converter select, .converter input { flex:1; padding:8px; border:1px solid #ccc; border-radius:4px; }
#swap { width:40px; }
.result { font-weight:bold; }

/* Mini chart */
.mini-chart { background:#fff; margin:15px; padding:15px; border-radius:16px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }

/* Detail page */
.detail { padding:15px; display:flex; flex-direction:column; gap:20px; }
.summary .price-line { display:flex; gap:15px; }
.chart-area { background:#fff; padding:15px; border-radius:16px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.chart-area .ranges { margin-bottom:10px; }
.chart-area .ranges button { margin-right:5px; padding:4px 8px; border:none; border-radius:4px; background:#1f7a8c; color:#fff; cursor:pointer; }
.chart-area .ranges button.active, .chart-area .ranges button:hover { background:#145364; }
.news { background:#fff; padding:15px; border-radius:16px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.news ul { list-style:none; padding:0; margin:0; }
.news li { margin-bottom:10px; }

@media(min-width:768px){
    .detail { flex-direction:row; }
    .chart-area { flex:2; }
    .news { flex:1; }
}