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

:root {
    --bg: #0b0f19;
    --surface: #131722;
    --surface2: #171d2b;
    --line: #2a2e39;
    --accent: #00ff99;
    --accent2: #62ffd0;
    --text: #f1f5f9;
    --text2: #94a3b8;
    --up: #00ff99;
    --down: #ff4136;
    --warn: #fbbf24;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius: .9rem;
    --shadow: 0 16px 45px rgba(0, 0, 0, .22);
}

body[data-theme="light"] {
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface2: #f8fafc;
    --line: #e0e4eb;
    --accent: #00a854;
    --accent2: #08c969;
    --text: #1a1d29;
    --text2: #5c6475;
    --up: #00a854;
    --down: #e84762;
    --shadow: 0 14px 35px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
    min-height: 100vh;
    font-family: var(--font);
    color: var(--text);
    background:
        radial-gradient(circle at 12% 8%, rgba(0, 255, 153, .12), transparent 24rem),
        radial-gradient(circle at 88% 12%, rgba(98, 255, 208, .08), transparent 22rem),
        var(--bg);
    transition: background .25s ease, color .25s ease;
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.container { max-width: 1480px; margin: 0 auto; padding: 1rem; }

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.logo { font-size: 1.35rem; font-weight: 800; color: var(--accent); letter-spacing: -.035em; }
.last-update { margin-top: .25rem; font-size: .72rem; color: var(--text2); }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.ghost-button {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    background: rgba(255, 255, 255, .02);
    padding: .45rem .8rem;
    transition: border-color .15s, color .15s, transform .15s;
}
.ghost-button:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.theme-switch { display: flex; align-items: center; gap: .45rem; color: var(--text2); font-size: .75rem; }
.switch { position: relative; width: 2.35rem; height: 1.3rem; background: var(--line); border: 0; border-radius: 1rem; }
.switch::after { content: ''; position: absolute; top: .16rem; left: .16rem; width: .98rem; height: .98rem; background: var(--accent); border-radius: 50%; transition: transform .2s; }
body[data-theme="light"] .switch::after { transform: translateX(1.05rem); }

.toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    margin-bottom: .85rem;
}
.search-box, .select-box {
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 1px solid var(--line);
    background: rgba(19, 23, 34, .72);
    border-radius: var(--radius);
    padding: .65rem .75rem;
}
body[data-theme="light"] .search-box,
body[data-theme="light"] .select-box { background: rgba(255, 255, 255, .82); }
.search-box span, .select-box span { color: var(--text2); font-size: .75rem; white-space: nowrap; }
.search-box input, .select-box select {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
}
.select-box select option { color: #111827; }

.market-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
    margin-bottom: 1rem;
}
.summary-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: .8rem;
    box-shadow: var(--shadow);
}
.summary-card span { display: block; color: var(--text2); font-size: .72rem; margin-bottom: .2rem; }
.summary-card strong { font-size: 1rem; }
.up { color: var(--up); }
.down { color: var(--down); }
.warn { color: var(--warn); }

.layout { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.coins-panel, .charts-section {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(19, 23, 34, .88);
    box-shadow: var(--shadow);
}
body[data-theme="light"] .coins-panel,
body[data-theme="light"] .charts-section { background: rgba(255, 255, 255, .9); }
.panel-title, .chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem .25rem;
}
h2 { font-size: 1rem; letter-spacing: -.02em; }
small { color: var(--text2); }
.coins-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; padding: 1rem; }
.coin-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface2);
    padding: .95rem;
    transition: transform .15s ease, border-color .15s ease, background .2s ease;
}
.coin-card:hover, .coin-card.active { transform: translateY(-2px); border-color: var(--accent); }
.coin-header { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-bottom: .8rem; }
.coin-info { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.coin-icon { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; background: var(--line); }
.coin-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-symbol { color: var(--text2); font-size: .72rem; margin-top: .12rem; }
.favorite-btn { border: 0; background: transparent; color: var(--text2); font-size: 1.15rem; line-height: 1; }
.favorite-btn.active { color: var(--warn); }
.price-section { text-align: right; }
.current-price { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.price-change { display: inline-block; margin-top: .28rem; padding: .2rem .42rem; border-radius: .38rem; font-size: .7rem; font-weight: 700; }
.price-up { background: rgba(0,255,153,.12); color: var(--up); }
.price-down { background: rgba(255,65,54,.12); color: var(--down); }
.price-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .72rem; }
.stat-item { display: flex; justify-content: space-between; gap: .5rem; }
.stat-label { color: var(--text2); }
.stat-value { font-weight: 700; text-align: right; }

.chart-head { align-items: center; flex-wrap: wrap; }
.period-tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.period-button {
    border: 1px solid var(--line);
    border-radius: .55rem;
    color: var(--text2);
    background: transparent;
    padding: .42rem .68rem;
    font-size: .75rem;
    font-weight: 700;
}
.period-button:hover, .period-button.active { color: #00150d; border-color: var(--accent); background: var(--accent); }
.chart-container { position: relative; height: 420px; padding: .75rem 1rem 1rem; }
.chart-container canvas { width: 100%; height: 100%; }
.chart-loading { position: absolute; inset: .75rem 1rem 1rem; display: none; align-items: center; justify-content: center; color: var(--text2); background: var(--surface); border-radius: .75rem; }
.chart-loading.show { display: flex; }
.spinner { width: 1.2rem; height: 1.2rem; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; margin-right: .5rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-message { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 20; border: 1px solid var(--down); border-radius: .75rem; color: var(--down); background: rgba(255,65,54,.12); backdrop-filter: blur(12px); padding: .8rem 1rem; font-size: .8rem; }
.empty-state { border: 1px dashed var(--line); border-radius: var(--radius); color: var(--text2); padding: 1.2rem; text-align: center; }

@media (min-width: 760px) {
    html { font-size: 15px; }
    .container { padding: 1.35rem; }
    .toolbar { grid-template-columns: 1.5fr .75fr .75fr; }
    .market-summary { grid-template-columns: repeat(4, 1fr); }
    .coins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
    html { font-size: 16px; }
    .layout { grid-template-columns: minmax(420px, .9fr) minmax(560px, 1.1fr); align-items: start; }
    .charts-section { position: sticky; top: 1rem; }
    .coins-grid { grid-template-columns: 1fr; max-height: calc(100vh - 17rem); overflow: auto; }
    .chart-container { height: 560px; }
}