:root { color-scheme: dark; font-family: "DM Sans", sans-serif; background: #101914; color: #f2f1e8; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: radial-gradient(ellipse at 75% 4%, #29382c 0, transparent 37%), #101914; min-height: 100vh; }
main { max-width: 1240px; margin: auto; padding: 0 42px; }
header { height: 93px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ffffff20; }
.brand { color: #f4f3e7; text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: .16em; }
.auth-view { max-width: 430px; margin: 55px auto; padding: 26px; background: #ffffff08; border: 1px solid #ffffff1b; }
.auth-view h1 { font: 28px Georgia, serif; }
.auth-view form { display: grid; gap: 12px; }
.auth-view label { font-size: 12px; color: #a7b3a8; }
.auth-view input { padding: 12px; background: #101914; border: 1px solid #ffffff40; color: #f2f1e8; font: inherit; }
.auth-view button, #logout { padding: 10px 12px; border: 1px solid #ffffff40; background: transparent; color: #f2f1e8; cursor: pointer; }
#auth-message { font-size: 13px; line-height: 1.5; color: #d6bd8b; }
.dashboard { padding: 35px 0 85px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; background: #ffffff08; }
th, td { padding: 18px 20px; border-bottom: 1px solid #ffffff1b; }
thead th { color: #afbaad; font-size: 11px; font-weight: 600; }
tbody td { font-size: 13px; white-space: nowrap; }
tbody tr[data-symbol] { cursor: pointer; }
tbody tr[data-symbol]:hover, tbody tr.selected { background: #ffffff10; }
.quote-button { color: inherit; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.quote-button:focus-visible, #chart-close:focus-visible, #telegram-send:focus-visible { outline: 2px solid #d6bd8b; outline-offset: 4px; }
.symbol { font-size: 12px; letter-spacing: .07em; }
.price { font-family: Georgia, serif; font-size: 22px; }
.detail { display: block; color: #a7b3a8; font: 11px/1.6 sans-serif; letter-spacing: 0; margin-top: 4px; }
.providers { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 23px; color: #a7b3a8; font-size: 12px; }
.provider-error, .notice { color: #e6ad89; }
.notice { border: 1px solid #c17f5a; padding: 12px; margin-bottom: 14px; }
.chart-panel { padding: 24px; border: 1px solid #ffffff1b; background: #ffffff08; }
.chart-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.chart-heading h2 { margin: 0; font: 26px Georgia, serif; }
.chart-heading p, .chart-note, .chart-times, #chart-message { color: #a7b3a8; font-size: 12px; }
#chart-close, #telegram-send { border: 1px solid #ffffff30; color: #f2f1e8; background: transparent; padding: 8px 12px; cursor: pointer; }
#telegram-send:disabled { opacity: .5; cursor: wait; }
.telegram-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; font-size: 12px; color: #a7b3a8; }
#chart { width: 100%; height: auto; overflow: visible; }
#chart text { fill: #a7b3a8; font: 12px sans-serif; }
.chart-times { display: flex; justify-content: space-between; gap: 10px; }
.chart-note { line-height: 1.5; margin-bottom: 0; }
@media (max-width: 600px) { main { padding: 0 22px; } header { height: 70px; } th, td { padding: 14px; } }