:root{
    --bg:#030b15;
    --panel:#071525;
    --panel2:#091b2d;
    --border:#123451;
    --border-hover:#1e5686;      /* researched against TradingView/Binance dark themes: a
                                     brighter step of the border color reads as "hover", not a
                                     brand color, so it never fights the cyan/purple brand */
    --text:#e8f2ff;
    --muted:#7f9ab5;
    --cyan:#20d9ff;
    --blue:#4285ff;
    --green:#20e6a2;
    --red:#ff5577;
    --yellow:#ffbd4a;
    --purple:#9d6cff;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:
        radial-gradient(circle at 75% 0%,rgba(28,111,190,.13),transparent 30%),
        radial-gradient(circle at 10% 90%,rgba(89,44,180,.08),transparent 30%),
        var(--bg);
    color:var(--text);
    min-height:100vh;
    /* real trading terminals (TradingView, Binance) align price digits in a
       fixed-width grid so a column of numbers doesn't jitter left/right as the
       digits change; tabular-nums does that for every price/metric on the page */
    font-variant-numeric:tabular-nums;
}

/* a slim, dark scrollbar everywhere (not just the sidebar) - Notion/Linear/every
   modern pro tool does this instead of the OS's default light scrollbar */
*{ scrollbar-width:thin; scrollbar-color:#1c4568 transparent; }
*::-webkit-scrollbar{ width:7px; height:7px; }
*::-webkit-scrollbar-thumb{ background:#1c4568; border-radius:4px; }
*::-webkit-scrollbar-thumb:hover{ background:#286089; }

button{
    font:inherit;
}

.app{
    display:flex;
    min-height:100vh;
}

/* ================= SIDEBAR ================= */

.sidebar{
    width:235px;
    height:100vh;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    background:rgba(4,15,27,.97);
    border-right:1px solid var(--border);
    padding:16px 14px;
    z-index:20;
    /* flex column, not fixed-offset absolute children: the footer can never
       overlap the nav again, however many items the nav grows to - it just
       gets pushed down and, if the list still doesn't fit, the nav scrolls
       internally instead of spilling under the footer. */
    display:flex;
    flex-direction:column;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:4px 8px 14px;
    border-bottom:1px solid #0e2a43;
    flex-shrink:0;
}

.logo{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    filter:drop-shadow(0 0 8px rgba(66,133,255,.45));
}

.logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.brand h1{
    font-size:19px;
    font-weight:800;
    letter-spacing:.5px;
    background:linear-gradient(90deg,#20d9ff,#9d6cff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.brand span{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:3px;
}

.nav{
    margin-top:12px;
    flex:1 1 auto;
    min-height:0;       /* required for a flex child to actually shrink+scroll */
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#1a4468 transparent;
}
.nav::-webkit-scrollbar{ width:6px; }
.nav::-webkit-scrollbar-thumb{ background:#1a4468; border-radius:3px; }

.nav-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:13px;
    border:0;
    background:transparent;
    color:#91a9c1;
    padding:9px 13px;
    margin-bottom:3px;
    border-radius:8px;
    cursor:pointer;
    text-align:left;
    transition:.2s;
    text-decoration:none;
    font-size:13px;
}

.nav-item:hover,
.nav-item.active{
    color:#fff;
    background:linear-gradient(90deg,#0d3659,#09233a);
    border:1px solid #16476e;
}

.nav-item.active{
    box-shadow:inset 3px 0 0 var(--cyan);   /* a clear "you are here" accent bar, like Notion/Linear/Vercel */
}

.nav-icon{
    width:20px;
    text-align:center;
    font-size:16px;
}

.sidebar-bottom{
    flex-shrink:0;              /* always fully visible, never squeezed by the nav */
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #0e2a43;
    color:#6d8aa4;
    font-size:10px;
    line-height:1.5;
}

/* ================= MAIN ================= */

.main{
    margin-left:235px;
    width:calc(100% - 235px);
}

.topbar{
    height:72px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 22px;
    background:rgba(3,12,23,.9);
    backdrop-filter:blur(10px);
    position:sticky;
    top:0;
    z-index:15;
    box-shadow:0 8px 24px -12px rgba(0,0,0,.55);
}

.market-tabs{
    display:flex;
    gap:8px;
    flex:1;
}

.market-tab{
    min-width:115px;
    background:#071a2c;
    border:1px solid #11324d;
    border-radius:8px;
    padding:8px 12px;
}

.market-tab strong{
    display:block;
    font-size:12px;
}

.market-tab span{
    color:var(--green);
    font-size:11px;
}

.live{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--green);
    font-size:12px;
    white-space:nowrap;
}

.dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 10px var(--green);
    animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{
    0%,100%{ opacity:1; box-shadow:0 0 4px var(--green); }
    50%{ opacity:.55; box-shadow:0 0 12px var(--green); }
}
@media(prefers-reduced-motion:reduce){
    .dot{ animation:none; }
}
.live.warn .dot{ animation-name:livePulseWarn; }
.live.off .dot{ animation:none; opacity:1; }
@keyframes livePulseWarn{
    0%,100%{ opacity:1; box-shadow:0 0 4px var(--yellow); }
    50%{ opacity:.55; box-shadow:0 0 12px var(--yellow); }
}

.icon-btn{
    border:0;
    background:transparent;
    color:#8ca5be;
    font-size:18px;
    cursor:pointer;
}

/* ================= CONTENT ================= */

.content{
    padding:22px;
}

.page-title{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:18px;
}

.page-title h2{
    font-size:23px;
}

.page-title p{
    color:var(--muted);
    font-size:12px;
    margin-top:5px;
}

.filters{
    display:flex;
    gap:5px;
    background:#061322;
    padding:4px;
    border:1px solid var(--border);
    border-radius:8px;
}

.filter{
    border:0;
    background:transparent;
    color:#7995ae;
    padding:7px 15px;
    border-radius:5px;
    cursor:pointer;
    font-size:11px;
}

.filter.active{
    background:#123d64;
    color:white;
}

/* ================= GRID ================= */

.asset-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.card{
    background:linear-gradient(145deg,#071728,#061321);
    border:1px solid var(--border);
    border-radius:10px;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.asset-card:hover{
    border-color:var(--border-hover);
    box-shadow:0 6px 20px -8px rgba(32,217,255,.25);
    transform:translateY(-2px);
}

.asset-card{
    padding:15px;
}

.asset-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.asset-name{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:13px;
}

.coin{
    width:27px;
    height:27px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#122f49;
}

.price{
    font-size:20px;
    margin-top:13px;
}

.change{
    color:var(--green);
    font-size:11px;
    float:right;
}

.volume{
    color:#6e8ca8;
    font-size:10px;
    margin-top:5px;
}

.mini-chart{
    height:42px;
    margin-top:10px;
}

.mini-chart svg{
    width:100%;
    height:100%;
}

/* ================= METRICS ================= */

.metric-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
    margin-top:12px;
}

.metric{
    padding:14px;
}

.metric-label{
    color:#7190aa;
    font-size:10px;
}

.metric-value{
    margin-top:8px;
    font-size:15px;
    font-weight:700;
}

.green{color:var(--green)}
.red{color:var(--red)}
.yellow{color:var(--yellow)}
.purple{color:var(--purple)}
.cyan{color:var(--cyan)}

/* ================= DASH GRID ================= */

.dashboard-grid{
    display:grid;
    grid-template-columns:1.55fr 1.15fr .8fr;
    gap:12px;
    margin-top:12px;
}

.panel{
    background:linear-gradient(145deg,#071727,#061321);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    transition:border-color .18s ease;
}

.panel:hover{
    border-color:#194467;
}

.panel-header{
    padding:14px 15px;
    border-bottom:1px solid #102c45;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.panel-header h3{
    font-size:13px;
}

.panel-header span{
    font-size:10px;
    color:#6f8ba5;
}

.panel-body{
    padding:14px;
}

/* ================= BIG CHART ================= */

.chart{
    height:290px;
    position:relative;
    overflow:hidden;
}

.grid-lines{
    position:absolute;
    inset:0;
    background:
        linear-gradient(#0b2a42 1px,transparent 1px),
        linear-gradient(90deg,#0b2a42 1px,transparent 1px);
    background-size:25% 25%;
    opacity:.55;
}

.chart svg{
    position:absolute;
    inset:20px 10px 15px;
    width:calc(100% - 20px);
    height:calc(100% - 35px);
}

.legend{
    display:flex;
    gap:16px;
    font-size:10px;
    color:#7893ad;
    margin-bottom:8px;
}

.legend i{
    width:7px;
    height:7px;
    border-radius:50%;
    display:inline-block;
    margin-right:4px;
}

/* ================= TABLE ================= */

table{
    width:100%;
    border-collapse:collapse;
}

th{
    text-align:left;
    color:#607d98;
    font-size:9px;
    font-weight:500;
    padding:9px 8px;
    border-bottom:1px solid #102c45;
}

td{
    padding:10px 8px;
    border-bottom:1px solid #0b243b;
    font-size:10px;
}

tr:last-child td{
    border-bottom:0;
}

tbody tr{
    transition:background-color .12s ease;
}

tbody tr:hover{
    background:rgba(32,217,255,.05);
}

.rank{
    color:#67849e;
}

.badge{
    padding:4px 7px;
    border-radius:20px;
    font-size:9px;
    border:1px solid;
}

.badge.green{
    background:#062b25;
    border-color:#126c59;
}

.badge.yellow{
    background:#2c2109;
    border-color:#725313;
    color:#ffd26a;
}

.badge.blue{
    background:#092440;
    border-color:#164d7c;
    color:#65b9ff;
}

.badge.red{
    background:#3a1712;
    border-color:#7c3530;
    color:#ff8a80;
}

.badge.grey{
    background:#0d1620;
    border-color:#26374a;
    color:#7893ad;
}

/* ================= AI ENGINE ================= */

.ai-engine{
    padding:15px;
}

.ai-head{
    display:flex;
    gap:12px;
    align-items:center;
}

.ai-orb{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:radial-gradient(circle,#bd82ff,#5530a3 60%,#16133b);
    box-shadow:0 0 25px #7449db;
}

.ai-head h3{
    font-size:13px;
}

.ai-head p{
    color:#7894ae;
    font-size:10px;
    margin-top:3px;
}

.scan-list{
    margin-top:18px;
}

.scan-item{
    display:flex;
    align-items:center;
    gap:8px;
    color:#91a9c0;
    font-size:10px;
    padding:6px 0;
}

.check{
    color:var(--green);
}

.progress{
    height:7px;
    border-radius:20px;
    background:#102d43;
    margin-top:15px;
    overflow:hidden;
}

.progress div{
    width:82%;
    height:100%;
    background:linear-gradient(90deg,#14c98f,#22d9ff);
}

/* ================= LOWER GRID ================= */

.lower-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:12px;
    margin-top:12px;
}

.insight{
    padding:11px;
    border-bottom:1px solid #0e2b43;
}

.insight:last-child{
    border-bottom:0;
}

.insight-top{
    display:flex;
    justify-content:space-between;
    font-size:10px;
}

.insight p{
    color:#7e99b1;
    font-size:9px;
    margin-top:5px;
}

/* ================= RESEARCH SCORE ================= */

.score-ring{
    width:125px;
    height:125px;
    border-radius:50%;
    margin:12px auto;
    display:grid;
    place-items:center;
    background:
      radial-gradient(circle,#071525 57%,transparent 58%),
      conic-gradient(var(--green) 0 87%,#173149 87% 100%);
}

.score-number{
    font-size:28px;
    font-weight:800;
}

.score-number small{
    display:block;
    color:#6d899f;
    font-size:9px;
    text-align:center;
    font-weight:400;
}

/* ================= QUALIFICATION ================= */

.qualification{
    border:1px solid #155f51;
    background:linear-gradient(145deg,#06251f,#061921);
    padding:14px;
    border-radius:9px;
}

.qual-title{
    color:var(--green);
    font-size:13px;
    font-weight:700;
}

.qual-sub{
    color:#72948d;
    font-size:10px;
    margin-top:4px;
}

.qual-list{
    margin-top:12px;
}

.qual-list div{
    font-size:10px;
    padding:5px 0;
    color:#a1b9b4;
}

.qual-list span{
    color:var(--green);
    margin-right:5px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){
    .asset-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .metric-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .dashboard-grid{
        grid-template-columns:1fr 1fr;
    }

    .ai-panel{
        grid-column:1/-1;
    }
}

@media(max-width:850px){
    .sidebar{
        width:68px;
    }

    .brand h1,
    .brand span,
    .nav-item span,
    .sidebar-bottom{
        display:none;
    }

    .brand{
        justify-content:center;
    }

    .nav-item{
        justify-content:center;
    }

    .main{
        margin-left:68px;
        width:calc(100% - 68px);
    }

    .market-tabs{
        overflow:auto;
    }

    .market-tab{
        min-width:105px;
    }

    .asset-grid,
    .metric-grid,
    .dashboard-grid,
    .lower-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .content{
        padding:12px;
    }

    .topbar{
        padding:0 10px;
    }

    .live{
        display:none;
    }

    .page-title{
        display:block;
    }

    .filters{
        margin-top:12px;
        overflow:auto;
    }
}

/* ================= LIVE STATE ================= */

.live.warn{color:var(--yellow)}
.live.warn .dot{background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
.live.off{color:var(--red)}
.live.off .dot{background:var(--red);box-shadow:0 0 10px var(--red)}

.tf-select{
    background:#071a2c;
    border:1px solid #11324d;
    color:#cfe2f3;
    border-radius:5px;
    font-size:10px;
    padding:3px 6px;
}

.src{
    color:#56728c;
    font-size:8px;
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.legend b{font-weight:600;margin-left:2px}
.qual-list div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================= IN-PAGE NAV TARGETS ================= */
/* every sidebar item scrolls to one of these instead of doing nothing */

.page-title, .panel{ scroll-margin-top: 88px; }

@keyframes panelFlash{
    0%   { box-shadow: 0 0 0 2px var(--green); }
    100% { box-shadow: 0 0 0 0 rgba(32,230,162,0); }
}
.panel-flash{ animation: panelFlash 1.2s ease-out; }

#journalText:focus{ outline: 1px solid var(--green); }

/* ================= RESEARCH SCANNER / DEEP DIVE ================= */

.score-bar-item{
    background:#050f1a;
    border:1px solid #11324d;
    border-radius:8px;
    padding:8px 9px;
}
.score-bar-item .lbl{
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#6f8ba5;
    display:flex;
    justify-content:space-between;
}
.score-bar-item .track{
    height:5px;
    border-radius:3px;
    background:#102d43;
    margin-top:6px;
    overflow:hidden;
}
.score-bar-item .fill{
    height:100%;
    background:linear-gradient(90deg,#14c98f,#22d9ff);
}

.plan-item{
    background:#050f1a;
    border:1px solid #11324d;
    border-radius:8px;
    padding:7px 9px;
    text-align:center;
}
.plan-item .k{ font-size:8px; color:#6f8ba5; text-transform:uppercase; }
.plan-item .v{ font-size:12px; font-weight:700; margin-top:2px; }

.scanner-row-selected{ background:rgba(32,217,255,.08) !important; }

.trend-pill{
    display:inline-block;
    width:16px;
    text-align:center;
    border-radius:3px;
    font-size:8px;
    font-weight:700;
    padding:1px 0;
    margin-right:2px;
}

/* ================= SETUP ALERTS (popup + sound) ================= */
@keyframes hxToastIn{
    from{ opacity:0; transform:translateX(16px); }
    to{ opacity:1; transform:translateX(0); }
}
.alert-toast{
    background:#0d1e30;
    border-radius:8px;
    padding:12px 14px;
    box-shadow:0 8px 24px rgba(0,0,0,.45);
    cursor:pointer;
    animation:hxToastIn .25s ease-out;
}
.alert-toast:hover{ filter:brightness(1.12); }
.hx-toast-close{ cursor:pointer; }
.hx-toast-close:hover{ color:#dbe9f7 !important; }