/* Crypto & Stock Tracker v4.1 */

:root {
    --cst-pri:#6366f1; --cst-pri-l:rgba(99,102,241,.10);
    --cst-grn:#10b981; --cst-grn-bg:rgba(16,185,129,.10);
    --cst-red:#ef4444; --cst-red-bg:rgba(239,68,68,.10);
    --cst-bg:#fff; --cst-bg2:#f8fafc; --cst-brd:#e2e8f0;
    --cst-txt:#1e293b; --cst-txt2:#64748b; --cst-rad:12px;
}

.cst-widget {
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--cst-bg); border:1px solid var(--cst-brd); border-radius:var(--cst-rad);
    padding:24px; margin:24px 0; color:var(--cst-txt); box-shadow:0 1px 3px rgba(0,0,0,.05); line-height:1.5;
}
.cst-widget * { box-sizing:border-box; }

.cst-hdr { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.cst-hdr-r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cst-ttl { font-size:20px; font-weight:700; margin:0; display:flex; align-items:center; gap:10px; }
.cst-ttl img { width:28px; height:28px; border-radius:50%; flex-shrink:0; }

.cst-toggle { display:flex; gap:2px; background:var(--cst-bg2); border-radius:8px; padding:3px; }
.cst-tb {
    border:none; background:transparent; padding:6px 10px; border-radius:6px;
    cursor:pointer; color:var(--cst-txt2); transition:all .15s; display:flex; align-items:center;
}
.cst-tb:hover { color:var(--cst-txt); background:var(--cst-pri-l); }
.cst-tb.active { background:var(--cst-pri); color:#fff; }

.cst-pbtns { display:flex; gap:3px; background:var(--cst-bg2); border-radius:8px; padding:3px; }
.cst-pb {
    border:none; background:transparent; padding:6px 12px; border-radius:6px;
    font-size:12px; font-weight:600; cursor:pointer; color:var(--cst-txt2); transition:all .15s;
}
.cst-pb:hover { color:var(--cst-txt); background:var(--cst-pri-l); }
.cst-pb.on { background:var(--cst-pri); color:#fff; }

.cst-prow { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cst-cprice { font-size:32px; font-weight:800; }
.cst-cchg { font-size:14px; font-weight:600; padding:3px 10px; border-radius:6px; }
.cst-cchg.up { color:var(--cst-grn); background:var(--cst-grn-bg); }
.cst-cchg.dn { color:var(--cst-red); background:var(--cst-red-bg); }

.cst-chart-box { position:relative; width:100%; height:320px; margin-bottom:8px; }
.cst-chart-box canvas { width:100%!important; height:100%!important; }
.cst-chart-sm { height:180px; }

.cst-label {
    font-size:12px; font-weight:700; color:var(--cst-txt2); text-transform:uppercase;
    letter-spacing:.8px; margin:16px 0 6px; padding-left:2px;
}

.cst-ld {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.88); border-radius:8px; font-size:14px; color:var(--cst-txt2);
    gap:8px; z-index:5; transition:opacity .3s;
}
.cst-ld.off { opacity:0; pointer-events:none; }
.cst-sp {
    display:inline-block; width:20px; height:20px; border:3px solid var(--cst-brd);
    border-top-color:var(--cst-pri); border-radius:50%; animation:cst-r .65s linear infinite;
}
@keyframes cst-r { to { transform:rotate(360deg); } }

.cst-tbl-wrap { overflow-x:auto; margin-top:16px; }
.cst-stats { width:100%; border-collapse:collapse; font-size:14px; }
.cst-stats th {
    background:var(--cst-bg2); text-align:left; padding:10px 14px; font-weight:600;
    color:var(--cst-txt2); font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    border-bottom:2px solid var(--cst-brd);
}
.cst-stats td { padding:10px 14px; border-bottom:1px solid var(--cst-brd); white-space:nowrap; }
.cst-stats tr:last-child td { border-bottom:none; }
.cst-stats td:first-child { font-weight:600; }
.cst-stats .hi { color:var(--cst-grn); font-weight:600; }
.cst-stats .lo { color:var(--cst-red); font-weight:600; }

.cst-ctrls { display:flex; gap:8px; align-items:center; }
.cst-srch {
    border:1px solid var(--cst-brd); border-radius:8px; padding:7px 14px;
    font-size:14px; width:180px; outline:none; transition:border .2s;
}
.cst-srch:focus { border-color:var(--cst-pri); }
.cst-psel { border:1px solid var(--cst-brd); border-radius:8px; padding:7px 10px; font-size:13px; outline:none; cursor:pointer; }

.cst-scrl { overflow-x:auto; position:relative; min-height:200px; }
.cst-mk { width:100%; border-collapse:collapse; font-size:14px; }
.cst-mk thead th {
    background:var(--cst-bg2); padding:10px 12px; text-align:left; font-weight:600;
    color:var(--cst-txt2); font-size:11px; text-transform:uppercase; letter-spacing:.4px;
    border-bottom:2px solid var(--cst-brd); position:sticky; top:0; z-index:2;
}
.cst-mk tbody tr { transition:background .12s; }
.cst-mk tbody tr:hover { background:var(--cst-bg2); }
.cst-mk td { padding:10px 12px; border-bottom:1px solid var(--cst-brd); white-space:nowrap; }

.c-rk { width:40px; text-align:center!important; color:var(--cst-txt2); font-weight:600; }
.c-nm { min-width:160px; }
.c-pr,.c-mc,.c-vl { text-align:right!important; }
.c-ch { text-align:right!important; min-width:90px; }
.c-sp { width:100px; }

.coin-i { display:flex; align-items:center; gap:10px; }
.coin-i img { width:24px; height:24px; border-radius:50%; flex-shrink:0; }
.coin-n { font-weight:600; }
.coin-s { color:var(--cst-txt2); font-size:12px; margin-left:6px; }
.chg-up { color:var(--cst-grn); font-weight:600; }
.chg-dn { color:var(--cst-red); font-weight:600; }
.spark-cv { width:90px; height:32px; }

.cst-pag { display:flex; justify-content:center; align-items:center; gap:4px; margin-top:20px; flex-wrap:wrap; }
.cst-pag:empty { display:none; }
.cst-pag button {
    border:1px solid var(--cst-brd); background:var(--cst-bg); padding:7px 13px;
    border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; color:var(--cst-txt);
    transition:all .15s; min-width:38px;
}
.cst-pag button:hover { background:var(--cst-pri-l); border-color:var(--cst-pri); }
.cst-pag button.on { background:var(--cst-pri); color:#fff; border-color:var(--cst-pri); }
.cst-pag button:disabled { opacity:.4; cursor:default; }
.cst-pag .cst-pag-info { font-size:13px; color:var(--cst-txt2); padding:0 12px; }

/* ─── Fold (collapsible indicators) ─── */

.cst-fold { margin-top:6px; }
.cst-fold-btn {
    display:flex; align-items:center; gap:6px; width:100%;
    border:none; background:var(--cst-bg2); padding:9px 14px; border-radius:8px;
    font-size:12px; font-weight:700; color:var(--cst-txt2); text-transform:uppercase;
    letter-spacing:.7px; cursor:pointer; transition:background .15s;
}
.cst-fold-btn:hover { background:var(--cst-brd); color:var(--cst-txt); }
.cst-arrow { margin-left:auto; font-size:13px; }
.cst-fold-body { display:none; padding-top:6px; }

/* ─── Cross Icons ─── */

.cst-cross-label { display:inline-flex; align-items:center; gap:5px; }
.cst-cross-icon { vertical-align:middle; flex-shrink:0; }

/* ─── ATR ─── */

.cst-atr {
    font-size:12px; color:var(--cst-txt2); padding:4px 10px;
    background:var(--cst-bg2); border-radius:6px;
}
.cst-atr strong { color:var(--cst-txt); }

/* ─── Signal Panel ─── */

.cst-sig-summary {
    background:var(--cst-bg2); border-radius:10px; padding:14px 18px; margin-bottom:16px;
}
.cst-sig-overall {
    font-size:18px; font-weight:700; margin-bottom:8px;
}
.cst-sig-counts {
    display:flex; gap:16px; font-size:13px; font-weight:600; margin-bottom:10px;
}
.sig-bull { color:var(--cst-grn); }
.sig-bear { color:var(--cst-red); }
.sig-neut { color:#eab308; }

.cst-sig-bar {
    display:flex; height:8px; border-radius:4px; overflow:hidden; margin-bottom:12px;
}
.cst-sb-bull { background:var(--cst-grn); }
.cst-sb-neut { background:#eab308; }
.cst-sb-bear { background:var(--cst-red); }

.cst-sig-details {
    display:grid; grid-template-columns:1fr 1fr; gap:4px 16px;
}
.cst-sig-row {
    display:flex; align-items:center; gap:6px; font-size:12px; padding:3px 0;
}
.cst-sig-icon { font-size:10px; width:14px; text-align:center; }
.cst-sig-row.sig-bull .cst-sig-icon { color:var(--cst-grn); }
.cst-sig-row.sig-bear .cst-sig-icon { color:var(--cst-red); }
.cst-sig-row.sig-neut .cst-sig-icon { color:#eab308; }
.cst-sig-name { font-weight:600; color:var(--cst-txt); }
.cst-sig-note { color:var(--cst-txt2); margin-left:auto; }

/* ─── Crosses Table ─── */

.cst-crosses-wrap { margin-top:8px; }
.cst-crosses-tbl td:nth-child(2) { font-weight:600; }

/* ─── Fear & Greed ─── */

.cst-fg-w .cst-fg-updated {
    font-size:12px; color:var(--cst-txt2);
}

.cst-fg-gauge-row {
    display:flex; justify-content:center; padding:10px 0 0;
}

.cst-fg-gauge-wrap {
    text-align:center; position:relative;
}

.cst-fg-gauge { display:block; margin:0 auto; }

.cst-fg-score {
    font-size:48px; font-weight:800; color:var(--cst-txt);
    margin-top:-50px; position:relative; z-index:1;
}

.cst-fg-label-text {
    font-size:16px; font-weight:700; margin-top:2px;
    text-transform:uppercase; letter-spacing:1px;
}

.fg-cls-extreme-fear { color:#dc2626; }
.fg-cls-fear { color:#f97316; }
.fg-cls-neutral { color:#eab308; }
.fg-cls-greed { color:#84cc16; }
.fg-cls-extreme-greed { color:#22c55e; }

.cst-fg-components { margin-top:24px; }

.cst-fg-comp-title {
    font-size:13px; font-weight:700; color:var(--cst-txt2);
    text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px;
}

.cst-fg-comp { margin-bottom:12px; }

.cst-fg-comp-hdr {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:5px; font-size:13px;
}

.cst-fg-comp-name { font-weight:600; color:var(--cst-txt); }
.cst-fg-comp-name small { color:var(--cst-txt2); font-weight:400; }

.cst-fg-tech-row {
    display:flex; align-items:center; gap:8px; padding:6px 0;
    border-bottom:1px solid var(--cst-brd); font-size:13px;
}
.cst-fg-tech-row:last-child { border-bottom:none; }
.cst-fg-tech-name { flex:1; font-weight:500; color:var(--cst-txt); }
.cst-fg-tech-val { font-weight:700; font-size:14px; min-width:60px; text-align:right; }
.cst-fg-tech-note { font-size:11px; color:var(--cst-txt2); min-width:80px; text-align:right; }

.cst-fg-source {
    font-size:11px; color:var(--cst-txt2); margin-top:16px; text-align:center;
}
.cst-fg-source a { color:var(--cst-pri); text-decoration:none; }
.cst-fg-source a:hover { text-decoration:underline; }

.cst-err {
    background:var(--cst-red-bg); color:var(--cst-red); padding:14px 18px;
    border-radius:8px; font-size:14px; text-align:center; margin:12px 0;
}

@media (max-width:768px) {
    .cst-widget { padding:16px; }
    .cst-hdr { flex-direction:column; align-items:flex-start; }
    .cst-cprice { font-size:26px; }
    .cst-chart-box { height:240px; }
    .cst-chart-sm { height:140px; }
    .cst-srch { width:130px; }
    .c-sp,.c-vl { display:none; }
    .cst-pb { padding:5px 8px; font-size:11px; }
}
@media (max-width:480px) {
    .cst-pbtns { flex-wrap:wrap; }
    .c-mc { display:none; }
    .cst-sig-details { grid-template-columns:1fr; }
    .cst-sig-counts { gap:10px; font-size:12px; }
}