:root{
  --bg:#f8fafc;--card-bg:#ffffff;--text:#1f2937;--text-muted:#64748b;--border:#e2e8f0;
  --accent:#22c55e;--warning:#facc15;--danger:#ef4444;
  --radius:.5rem;--spacing:1rem;
  --font-sans:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  --font-mono:"Fira Code",SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --content-max: 2000px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
code,pre,.mono{font-family:var(--font-mono);font-size:.85em}
table,.tabular{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;border:none;font-family:inherit}

main{padding: var(--spacing); max-width: var(--content-max); margin-inline: auto;}

header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(var(--spacing)/2);padding:calc(var(--spacing)/2) var(--spacing);background:var(--card-bg);border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:calc(var(--spacing)/2)}
.logo img{height:2rem}
.logo span{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.status-bar{display:flex;align-items:center;gap:calc(var(--spacing)/2);font-size:.875rem;color:var(--text-muted)}
#ping{min-width:2ch;text-align:right}
#status{padding:.25rem .75rem;border-radius:9999px;font-weight:600;font-size:.875rem}
#status.connected{background:var(--accent);color:#fff}
#status.connecting{background:var(--warning);color:#000}
#status.error,#status.disconnected{background:var(--danger);color:#fff}
#userCount{display:flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:9999px;background:#f1f5f9;font-weight:500;font-size:.875rem}
.controls{display:flex;gap:calc(var(--spacing)/2)}
.btn-wrapper{position:relative;display:inline-block}
.btn-wrapper>button{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .75rem;min-width:50px;border-radius:var(--radius);font-size:.875rem;font-weight:600;transition:background .2s}
.btn-wrapper>button:hover{background:var(--border)}

#globalModal{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.25rem;display:none;z-index:100;max-height:calc(100vh - 20px);overflow-y:auto}
#globalModal.show{display:block}
.modal-arrow{position:absolute;top:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--card-bg)}
.modal-content{position:relative;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;padding:calc(var(--spacing)*.8);box-shadow:0 2px 6px rgba(0,0,0,.1);min-width:300px;max-width:calc(100vw - 2*var(--spacing));max-height:calc(100vh - 40px);overflow-y:auto}
#globalModal.support .modal-content{max-width:260px}

.settings-form{display:flex;flex-direction:column;gap:var(--spacing);margin-top:var(--spacing)}
.settings-form.ranges .form-group{margin:.75rem 0 1rem}
.settings-form.ranges label{display:block;margin-bottom:.25rem;font-weight:600}
.settings-form.ranges input[type="range"]{width:100%}
.settings-form.ranges .range-value{display:inline-block;min-width:100px;text-align:right;margin-left:.5rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.settings-form.compact{display:grid;gap:.75rem 1rem}
.settings-form.compact .section{grid-column:1/-1;margin-top:.25rem;font-weight:700;font-size:.95rem;opacity:.9;display:flex;align-items:center;gap:.5rem}
.settings-form.compact .section::before,.settings-form.compact .section::after{content:"";height:1px;background:var(--border);flex:1}
.settings-form.compact .section span{white-space:nowrap;font-weight:600}
.settings-form.compact .row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;padding:.35rem .25rem;border-radius:.4rem}
.settings-form.compact .label{font-weight:600;font-size:.92rem}
.settings-form.compact .ctrl{display:flex;align-items:center;gap:.6rem;min-width:230px;justify-self:end;width:min(360px,48vw)}
.settings-form.compact input[type="range"]{flex:1}
.settings-form.compact .val{min-width:82px;text-align:right;color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.9rem}
@media (min-width:560px){.settings-form.compact{grid-template-columns:1fr 1fr}}
@media (max-width:559.98px){.settings-form.compact{grid-template-columns:1fr}.settings-form.compact .ctrl{width:100%;justify-self:stretch}}

.form-group{display:flex;flex-direction:column;gap:.25rem}
.form-group label{font-size:.85rem;font-weight:600}
.form-group input{padding:.4rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;font-family:var(--font-sans)}
.modal-footer{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}
.modal-footer button{flex:1;padding:.4rem;border-radius:var(--radius);font-size:.85rem;font-weight:600}
.modal-footer button:hover{background:var(--border)}
.settings-wrapper #globalModal{left:auto;right:0;transform:none}

main{padding:var(--spacing)}
.dashboard{display:grid;gap:var(--spacing);grid-template-columns:1fr 1fr}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--spacing);box-shadow:0 2px 4px rgba(0,0,0,.05);position:relative}
.card h2{margin-bottom:calc(var(--spacing)/2);font-size:1.08rem;font-weight:600;letter-spacing:-.01em;text-align:center}

table{width:100%;border-collapse:collapse;table-layout:fixed}
thead th,td{text-align:center;padding:.5rem 0;font-size:.86rem;word-wrap:break-word;overflow-wrap:anywhere;font-weight:600}
thead th{position:sticky;top:0;background:var(--card-bg);font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
tbody tr+tr{border-top:1px solid var(--border)}
.positive{color:var(--accent);font-weight:600}
.negative{color:var(--danger);font-weight:600}
.row-warning{background:#fff8e1 !important;transition:background .3s}
.sorted-asc::after{content:" ▴";font-size:.75em}
.sorted-desc::after{content:" ▾";font-size:.75em}
.copy-symbol{cursor:pointer}

footer{text-align:center;padding:var(--spacing);font-size:.83rem;color:var(--text-muted)}

.modal#docModal{display:none;position:fixed;inset:0;z-index:101}
.modal#docModal.show{display:block}
.doc-modal-backdrop{position:fixed;inset:0;background:rgba(30,32,40,.35);z-index:102}
.doc-modal-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#222;border-radius:var(--radius);max-width:680px;width:94vw;max-height:88vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.19);z-index:103;padding:2rem 1.2rem 1.5rem 1.2rem;font-size:.98em;animation:doc-fade-in .3s}
.doc-modal-close{position:absolute;top:10px;right:16px;background:none;border:none;font-size:1.75rem;color:#888;cursor:pointer;z-index:104;line-height:1}
.doc-modal-content h2{font-size:1.18em;margin-top:0}
.doc-modal-content table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.95em}
.doc-modal-content th,.doc-modal-content td{border:1px solid #e3e7ef;padding:.45em .6em}
.doc-modal-content th{background:#f3f6fa;font-weight:600}
.doc-modal-content ul,.doc-modal-content ol{margin:0 0 1em 1.1em}
@keyframes doc-fade-in{from{opacity:.7;transform:translate(-50%,-60%)}to{opacity:1;transform:translate(-50%,-50%)}}

.startup-loader{position:fixed;left:0;right:0;width:100vw;height:calc(100vh - var(--header-height,64px));z-index:50;background:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .4s}
body .startup-loader{background:#f8fafc}
.startup-loader .spinner{width:52px;height:52px;border:5px solid #e5e7eb;border-top:5px solid #22c55e;border-radius:50%;animation:spin .8s linear infinite}
.table-loader{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);z-index:2}
.spinner{width:38px;height:38px;border:4px solid #eee;border-top:4px solid #22c55e;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@keyframes row-fade-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes row-fade-out{from{ opacity:1; transform:translateY(0) scale(1) } to  { opacity:0; transform:translateY(20px) scale(.98) }}
.tr-anim-enter{animation:row-fade-in .36s cubic-bezier(.33,1.12,.55,1) both}
.tr-anim-exit{ will-change: transform, opacity; animation:row-fade-out .36s cubic-bezier(.33,1.12,.55,1) both }

tr,td,#status{transition:color .25s ease,background-color .25s ease}

@media (prefers-reduced-motion:no-preference){
  .row-warning{animation:rowPulse 2.2s ease-in-out infinite}
  #status.connected{animation:breathe 3s ease-in-out infinite}
}
@keyframes rowPulse{0%,100%{box-shadow:0 0 0 0 rgba(250,204,21,0)}50%{box-shadow:0 0 0 6px rgba(250,204,21,.06)}}
@keyframes breathe{0%,100%{filter:saturate(1)}50%{filter:saturate(1.25)}}

@media (max-width:1024px){.dashboard{grid-template-columns:1fr}}
@media (min-width:641px){
  header{display:flex;align-items:center;gap:calc(var(--spacing)/2)}
  .logo{flex:0 0 auto}
  .status-bar{margin:0 auto}
  .controls{flex:0 0 auto}
}
@media (max-width:640px){
  header{display:flex !important;flex-direction:column;gap:.5rem;padding:.5rem .8rem}
  .status-bar,.controls{width:100%;justify-content:center}
  #globalModal{position:fixed !important;inset:0;width:100vw;height:100vh;margin:0;transform:none}
  .modal-content{width:100vw;height:100vh;max-width:none;border-radius:0;box-shadow:none}
  .modal-arrow{display:none}
  #globalModal.support .modal-content,#globalModal.settings .modal-content{width:100vw;height:100vh;max-width:none}
  thead th,td{font-size:.55rem}
  .card h2{font-size:.9rem}
  #price-change-section thead th:nth-child(4),#price-change-section tbody td:nth-child(4){display:none}
  #major-coins-section thead th:nth-child(3),#major-coins-section tbody td:nth-child(3),
  #major-coins-section thead th:nth-child(7),#major-coins-section tbody td:nth-child(7),
  #major-coins-section thead th:nth-child(8),#major-coins-section tbody td:nth-child(8),
  #major-coins-section thead th:nth-child(9),#major-coins-section tbody td:nth-child(9){display:none}
  #volume-spikes-section thead th:nth-child(3),#volume-spikes-section tbody td:nth-child(3),
  #volume-spikes-section thead th:nth-child(4),#volume-spikes-section tbody td:nth-child(4){display:none}
  #other-coins-section thead th:nth-child(3),#other-coins-section tbody td:nth-child(3),
  #other-coins-section thead th:nth-child(7),#other-coins-section tbody td:nth-child(7),
  #other-coins-section thead th:nth-child(8),#other-coins-section tbody td:nth-child(8),
  #other-coins-section thead th:nth-child(9),#other-coins-section tbody td:nth-child(9){display:none}
}
@media (max-width:600px){.doc-modal-content{padding:1.15rem .1rem 1.15rem .1rem;font-size:.90em}}

#langWrapper>button{min-width:auto}
#currentLangShort{font-weight:600;letter-spacing:.02em}

td[data-col="price"],
.price, .price-cell {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}