/* =============================================================
   DoubleTerminal — Dark Theme (layout-fixed)
   Struktur:
     1. Variables & Reset
     2. Base
     3. Topbar
     4. Chain Bar
     5. Search
     6. Terminal Grid
     7. Card base
     8. Token Header
     9. Chart
    10. Token News
    11. Info / Security
    12. News (shared)
    13. Statusbar
    14. Image helpers
    15. Scrollbar
    16. Responsive
   ============================================================= */

/* =============================================================
   1. VARIABLES & RESET
   ============================================================= */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
    --gold:#d4af37;
    --gold-light:#f7e6a1;
    --gold-glossy:linear-gradient(135deg,#f7e6a1 0%,#d4af37 35%,#a8841f 70%,#e6c85c 100%);
    --gold-glow:0 0 0 1px rgba(212,175,55,.4), 0 4px 18px rgba(212,175,55,.22);
    --gold-text:#3a2f08;

    --bg:#0d0d10;
    --bg2:#16161b;
    --bg3:#1d1d24;
    --bg-hover:#2a2a34;

    --border:#2a2a33;
    --border-strong:#3a3a45;
    --border-gold:rgba(212,175,55,.25);

    --text:#e8e8ec;
    --text-2:#a0a0aa;
    --text-3:#6a6a75;

    --green:#22c55e;
    --green-dim:rgba(34,197,94,.15);
    --red:#ef4444;
    --red-dim:rgba(239,68,68,.15);

    --radius:12px;
    --mono:'JetBrains Mono',monospace;
    --sans:'Inter',system-ui,sans-serif;
    --topbar-h:58px;
    --statusbar-h:26px;
}

html, body{ height:100%; }

body{
    font-family:var(--sans);
    background:
        radial-gradient(circle at 0% 0%, rgba(212,175,55,.05), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(212,175,55,.04), transparent 45%),
        var(--bg);
    color:var(--text);
    font-size:13px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-height:100vh;
    min-height:100dvh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* =============================================================
   CONVERTER
   ============================================================= */
.convert-card{
    display:flex;
    flex-direction:column;
    flex:0 0 auto;
    width:100%;
    min-width:0;
}
.convert-symbol{
    background:var(--gold-glossy);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:800;
    letter-spacing:.3px;
}
.convert-flip{
    width:28px; height:28px;
    border-radius:50%;
    border:1px solid var(--border-strong);
    background:var(--bg);
    color:var(--gold);
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:.2s;
    flex-shrink:0;
}
.convert-flip:hover{
    border-color:var(--gold);
    transform:rotate(180deg);
}
.convert-box{
    padding:12px 16px 14px;
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    min-width:0;
}
.convert-field{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:9px 12px;
    transition:.15s;
    min-width:0;
    width:100%;
}
.convert-field:focus-within{
    border-color:var(--gold);
    box-shadow:var(--gold-glow);
}
.convert-field-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    font-size:11px;
    color:var(--text-3);
    font-weight:600;
    margin-bottom:6px;
    min-width:0;
}
.convert-field-head > span:first-child{
    color:var(--text-2);
    font-weight:700;
}
.convert-bal{
    font-family:var(--mono);
    font-size:10.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}
.convert-field-input{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    width:100%;
}
.convert-field-input input{
    flex:1 1 0;
    border:none;
    background:transparent;
    font-family:var(--mono);
    font-size:16px;
    font-weight:600;
    color:var(--text);
    outline:none;
    min-width:0;
    width:100%;
}
.convert-field-input input::-webkit-outer-spin-button,
.convert-field-input input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.convert-field-input input[type=number]{ -moz-appearance:textfield; }
.convert-pill{
    padding:5px 10px;
    border-radius:8px;
    background:var(--gold-glossy);
    color:var(--gold-text);
    font-weight:700;
    font-size:11.5px;
    white-space:nowrap;
    flex-shrink:0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 4px rgba(212,175,55,.25);
}
.convert-eq{
    text-align:center;
    color:var(--text-3);
    font-family:var(--mono);
    font-size:14px;
    font-weight:700;
    line-height:1;
    margin:-2px 0;
}
.convert-info{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:4px 2px;
    font-size:11px;
}
.convert-info > div{
    display:flex;
    justify-content:space-between;
    color:var(--text-2);
    gap:8px;
}
.convert-info > div span:first-child{ white-space:nowrap; }
.convert-info > div span:last-child{
    font-family:var(--mono);
    font-weight:600;
    color:var(--text);
    text-align:right;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

/* =============================================================
   CONVERTER — RESPONSIVE
   ============================================================= */

/* Tablet: news + converter side-by-side */
@media (max-width:1200px){
    .col-news{
        grid-column:1 / -1;
        max-height:none;
        height:auto;
        display:grid;
        grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
        gap:12px;
        align-items:start;
    }
    .col-news .news-card{
        height:340px;
        max-height:340px;
        width:100%;
        min-width:0;
    }
    .col-news .convert-card{
        height:auto;
        width:100%;
        min-width:0;
        align-self:start;
    }
}

/* Mobile: stack full width */
@media (max-width:760px){
    .col-news{
        /* reset semua grid property dari 1200px */
        grid-column:auto;
        grid-row:auto;
        grid-template-columns:none;
        grid-template-rows:none;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        width:100%;
        max-width:none;
        height:auto;
        max-height:none;
        overflow:visible;
    }
    .col-news > .news-card,
    .col-news > .convert-card{
        width:100%;
        max-width:100%;
        min-width:0;
        align-self:stretch;
        flex:0 0 auto;
    }
    .col-news .news-card{
        height:auto;
        max-height:400px;
    }
    .col-news .convert-card{
        height:auto;
        max-height:none;
    }
    .convert-box{ padding:10px 12px 12px; }
    .convert-field{ padding:8px 10px; }
    .convert-field-input input{ font-size:15px; }
    .convert-pill{ padding:4px 9px; font-size:11px; }
    .convert-info{ font-size:10.5px; }
}

/* Small phone */
@media (max-width:520px){
    .convert-box{ padding:9px 10px 11px; }
    .convert-field{ padding:7px 9px; }
    .convert-field-input input{ font-size:14px; }
    .convert-field-head{ font-size:10px; }
    .convert-bal{ font-size:10px; }
    .convert-info{ font-size:10px; }
    .convert-eq{ font-size:12px; }
}
img{ max-width:100%; display:block; }

/* =============================================================
   2. TOPBAR
   ============================================================= */
.topbar{
    height:var(--topbar-h);
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 20px;
    background:linear-gradient(180deg, #1a1a20 0%, var(--bg2) 100%);
    border-bottom:1px solid var(--border);
    box-shadow:0 1px 0 rgba(212,175,55,.08), 0 4px 20px rgba(0,0,0,.4);
    flex-shrink:0;
    z-index:50;
    position:relative;
}
.topbar::after{
    content:'';
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(212,175,55,.4), transparent);
}

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{
    width:34px; height:34px;
    display:grid; place-items:center;
    border-radius:9px;
    background:var(--gold-glossy);
    color:var(--gold-text);
    font-weight:800;
    font-size:14px;
    box-shadow:var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.6);
    letter-spacing:-.5px;
}
.brand-name{ font-weight:700; font-size:16px; letter-spacing:-.3px; color:var(--text); }
.brand-name span{
    background:var(--gold-glossy);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* =============================================================
   3. CHAIN BAR
   ============================================================= */
.chain-bar{
    display:flex;
    gap:4px;
    padding:4px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:10px;
    flex-shrink:0;
}
.chain-btn{
    display:flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border:none;
    background:transparent;
    border-radius:7px;
    cursor:pointer;
    font-family:var(--sans);
    font-weight:600;
    font-size:11px;
    color:var(--text-2);
    transition:.16s;
    white-space:nowrap;
}
.chain-btn:hover{ background:var(--bg-hover); color:var(--text); }
.chain-btn.active{
    background:var(--gold-glossy);
    color:var(--gold-text);
    box-shadow:0 2px 10px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.chain-ico{
    width:18px;
    height:18px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    background:var(--bg3);
    display:block;
    border:1px solid var(--border);
}
.chain-name{ letter-spacing:.3px; }
.chain-fallback{
    width:18px; height:18px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--bg3);
    color:var(--text-3);
    font-size:10px;
    font-weight:800;
    flex-shrink:0;
}

/* =============================================================
   4. SEARCH
   ============================================================= */
.search-wrap{
    position:relative;
    flex:1;
    max-width:520px;
    min-width:180px;
}
.search-wrap .search-ico{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--text-3); pointer-events:none;
}
#tokenSearch{
    width:100%;
    height:38px;
    padding:0 14px 0 38px;
    border:1px solid var(--border-strong);
    border-radius:10px;
    background:var(--bg);
    font-family:var(--sans);
    font-size:13px;
    color:var(--text);
    transition:.18s;
}
#tokenSearch::placeholder{ color:var(--text-3); }
#tokenSearch:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:var(--gold-glow);
    background:var(--bg2);
}

.search-results{
    position:absolute;
    top:46px; left:0; right:0;
    background:var(--bg2);
    border:1px solid var(--border-strong);
    border-radius:10px;
    box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.15);
    max-height:360px;
    overflow-y:auto;
    display:none;
    z-index:60;
}
.search-results.open{ display:block; }
.sr-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    cursor:pointer;
    border-bottom:1px solid var(--border);
    transition:background .12s;
    min-width:0;
}
.sr-item:last-child{ border-bottom:none; }
.sr-item:hover{ background:rgba(212,175,55,.08); }
.sr-item-text{ min-width:0; flex:1; display:flex; flex-direction:column; }
.sr-sym{ font-weight:700; font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-name{ color:var(--text-2); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-chain{
    margin-left:auto; font-size:10px; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.4px; font-weight:600;
    white-space:nowrap; flex-shrink:0;
}
.sr-empty{ cursor:default; color:var(--text-3); }

/* =============================================================
   5. TOPBAR META
   ============================================================= */
.topbar-meta{
    display:flex; align-items:center; gap:16px;
    margin-left:auto; flex-shrink:0;
}
.meta-item{ display:flex; flex-direction:column; align-items:flex-end; }
.meta-label{ font-size:10px; color:var(--text-3); font-weight:600; letter-spacing:.5px; }
.meta-val{ font-family:var(--mono); font-weight:600; font-size:12px; color:var(--text); }
.clock{
    font-family:var(--mono); font-weight:600; font-size:13px;
    color:var(--gold);
    padding-left:16px;
    border-left:1px solid var(--border);
}

/* =============================================================
   6. TERMINAL GRID
   ============================================================= */
.terminal{
    flex:1 1 0;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,0.95fr);
    grid-template-rows:minmax(0,1fr);
    gap:12px;
    padding:12px;
    overflow:hidden;
    min-height:0;
}
.col{
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow-y:auto;
    overflow-x:hidden;
    min-height:0;
    min-width:0;
    height:100%;
    -webkit-overflow-scrolling:touch;
}
.col-main > .chart-card{ flex:1 1 340px; min-height:340px; }
.col-main > .token-news-card{ flex:0 0 auto; }

/* =============================================================
   7. CARD BASE
   ============================================================= */
.card{
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    min-width:0;
    position:relative;
    flex-shrink:0;
}
.card::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(212,175,55,.18), transparent);
    border-radius:var(--radius) var(--radius) 0 0;
    pointer-events:none;
}
.card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    gap:8px;
    flex-wrap:wrap;
}
.card-title{
    font-weight:700; font-size:13px;
    display:flex; align-items:center; gap:8px;
    color:var(--text);
}
.live-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 0 rgba(34,197,94,.6);
    animation:pulse 1.8s infinite;
}
@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); }
    70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.src-tag{
    font-size:10px; font-weight:700; letter-spacing:.6px;
    padding:3px 8px; border-radius:5px;
    background:rgba(212,175,55,.1);
    color:var(--gold);
    border:1px solid var(--border-gold);
    white-space:nowrap;
}

/* =============================================================
   8. TOKEN HEADER
   ============================================================= */
.token-header{
    padding:16px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.th-left{ display:flex; gap:14px; align-items:center; min-width:0; flex:1 1 auto; }
.th-logo{
    width:52px; height:52px;
    border-radius:50%;
    border:2px solid var(--border-strong);
    object-fit:cover;
    background:var(--bg3);
    flex-shrink:0;
}
.th-left > div{ min-width:0; }
.th-symbol-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.th-symbol-row h1{
    font-size:20px; font-weight:800; letter-spacing:-.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:200px;
    color:var(--text);
}
.th-name{
    color:var(--text-2); font-size:12px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:180px;
}
.badge-chain{
    font-size:10px; font-weight:700; text-transform:uppercase;
    padding:2px 7px; border-radius:4px;
    background:rgba(212,175,55,.12);
    color:var(--gold);
    border:1px solid var(--border-gold);
    white-space:nowrap; flex-shrink:0;
}
.th-price-row{
    display:flex; align-items:baseline; gap:10px;
    margin-top:4px; flex-wrap:wrap;
}
.th-price{
    font-family:var(--mono); font-size:24px; font-weight:700;
    letter-spacing:-.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%;
    font-variant-numeric:tabular-nums;
    color:var(--text);
}
.th-change{
    font-family:var(--mono); font-size:13px; font-weight:600;
    white-space:nowrap;
    padding:2px 8px; border-radius:5px;
}
.th-change.up{ color:var(--green); background:var(--green-dim); }
.th-change.down{ color:var(--red); background:var(--red-dim); }

.th-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    align-items:center;
    flex:0 1 auto;
}
.stat{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.stat-label{
    font-size:10px; color:var(--text-3); font-weight:600;
    text-transform:uppercase; letter-spacing:.4px;
    white-space:nowrap;
}
.stat-val{
    font-family:var(--mono); font-size:13px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-variant-numeric:tabular-nums;
    color:var(--text);
}

/* =============================================================
   9. CHART
   ============================================================= */
.chart-card{
    display:flex;
    flex-direction:column;
    min-height:340px;
}
.chart-controls{ display:flex; gap:4px; flex-wrap:wrap; }
.tf-btn{
    font-family:var(--mono);
    font-size:11px; font-weight:600;
    padding:5px 9px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text-2);
    border-radius:6px;
    cursor:pointer;
    transition:.15s;
}
.tf-btn:hover{ border-color:var(--gold); color:var(--gold); }
.tf-btn.active{
    background:var(--gold-glossy);
    color:var(--gold-text);
    border-color:transparent;
    box-shadow:0 2px 8px rgba(212,175,55,.35);
}
.chart-container{
    flex:1 1 auto;
    position:relative;
    min-height:260px;
    padding:8px;
}
#priceChart{ width:100%; height:100%; display:block; }

/* =============================================================
   10. TOKEN NEWS
   ============================================================= */
.token-news-card{
    display:flex;
    flex-direction:column;
    min-height:280px;
    max-height:420px;
}
.token-news-label{
    background:var(--gold-glossy);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:800;
    letter-spacing:.3px;
}
.token-news-list{
    flex:1 1 auto;
    overflow-y:auto;
    padding:6px 0;
    min-height:0;
}
.news-fallback-note{
    font-size:10.5px;
    color:var(--text-3);
    background:rgba(212,175,55,.06);
    border:1px dashed var(--border-gold);
    border-radius:6px;
    margin:8px 12px;
    padding:6px 10px;
    text-align:center;
}

/* =============================================================
   11. INFO / SECURITY
   ============================================================= */
.info-card{ flex-shrink:0; }
.info-body{ padding:14px 16px; }
.empty-state{
    color:var(--text-3); font-size:12px;
    text-align:center; padding:14px 0;
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
}
.info-item{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:9px 11px;
    min-width:0;
    transition:border-color .15s;
}
.info-item:hover{ border-color:var(--border-gold); }
.info-item .k{
    font-size:10px; color:var(--text-3); font-weight:600;
    text-transform:uppercase; letter-spacing:.4px;
    white-space:nowrap;
}
.info-item .v{
    font-family:var(--mono); font-size:12.5px; font-weight:600;
    margin-top:3px; word-break:break-all;
    font-variant-numeric:tabular-nums;
    color:var(--text);
}
.info-item .v a{ color:var(--gold); text-decoration:none; }
.info-item .v a:hover{ text-decoration:underline; }

.addr-box{
    display:flex; align-items:center; gap:8px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px 10px;
    margin-bottom:8px;
    font-family:var(--mono);
    font-size:11.5px;
    min-width:0;
}
.addr-box .lbl{
    color:var(--text-3); font-size:10px; text-transform:uppercase;
    font-weight:700; flex-shrink:0;
}
.addr-box .val{
    flex:1; word-break:break-all; min-width:0;
    color:var(--text);
}
.copy-btn{
    border:none;
    background:rgba(212,175,55,.12);
    color:var(--gold);
    padding:3px 7px; border-radius:5px;
    font-size:10px; font-weight:700;
    cursor:pointer;
    font-family:var(--sans);
    flex-shrink:0;
    transition:background .15s;
}
.copy-btn:hover{ background:rgba(212,175,55,.22); }

.socials{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.socials a{
    font-size:11px; font-weight:600;
    padding:5px 10px; border-radius:6px;
    background:var(--bg); border:1px solid var(--border);
    color:var(--text-2); text-decoration:none;
    transition:.15s;
    white-space:nowrap;
}
.socials a:hover{ border-color:var(--gold); color:var(--gold); }

.sec-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 0;
    border-bottom:1px solid var(--border);
    font-size:12px;
    gap:8px;
    color:var(--text);
}
.sec-row:last-child{ border-bottom:none; }
.sec-row > span:first-child{
    min-width:0; overflow:hidden; text-overflow:ellipsis;
    color:var(--text-2);
}
.sec-row .tag{
    font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:4px;
    flex-shrink:0;
}
.tag.ok{ background:var(--green-dim); color:var(--green); }
.tag.warn{ background:var(--red-dim); color:var(--red); }

/* =============================================================
   12. NEWS (shared)
   ============================================================= */
.news-card{
    display:flex;
    flex-direction:column;
    min-height:0;
    height:100%;
    flex:1 1 auto;
}
.news-list{
    flex:1 1 auto;
    overflow-y:auto;
    padding:6px 0;
    min-height:0;
}
.news-item{
    padding:11px 16px;
    border-bottom:1px solid var(--border);
    cursor:pointer;
    transition:background .12s;
    display:flex;
    gap:10px;
    min-width:0;
}
.news-item:hover{ background:rgba(212,175,55,.06); }
.news-item:last-child{ border-bottom:none; }
.news-thumb{
    width:54px; height:54px; border-radius:8px;
    object-fit:cover; flex-shrink:0;
    background:var(--bg3);
    border:1px solid var(--border);
}
.news-content{
    flex:1; min-width:0;
    display:flex; flex-direction:column; gap:4px;
}
.news-title{
    font-size:12.5px; font-weight:600; line-height:1.35;
    color:var(--text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break:break-word;
}
.news-subtitle{
    font-size:11px;
    color:var(--text-3);
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-top:2px;
}
.news-meta{
    display:flex; gap:8px; align-items:center;
    font-size:10.5px; color:var(--text-3);
    margin-top:auto;
    flex-wrap:wrap;
}
.news-src{
    font-weight:700; color:var(--gold);
    background:rgba(212,175,55,.12);
    padding:1px 6px; border-radius:3px;
    white-space:nowrap;
    border:1px solid var(--border-gold);
}

/* =============================================================
   13. STATUSBAR
   ============================================================= */
.statusbar{
    position:relative;
    height:var(--statusbar-h);
    display:flex;
    align-items:center;
    gap:24px;
    padding:0 20px;
    background:linear-gradient(0deg, #0a0a0d 0%, var(--bg2) 100%);
    border-top:1px solid var(--border);
    font-size:11px;
    color:var(--text-2);
    font-family:var(--mono);
    flex-shrink:0;
    overflow:hidden;
}
.statusbar::before{
    content:'';
    position:absolute;
    left:0; right:0; top:-1px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(212,175,55,.3), transparent);
}
.statusbar > div{
    display:flex; align-items:center; gap:6px;
    white-space:nowrap;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
.statusbar > div:nth-child(2){ margin-left:auto; color:var(--text-3); }
.dot-green{
    width:7px; height:7px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 6px rgba(34,197,94,.7);
    flex-shrink:0;
}

/* =============================================================
   14. IMAGE HELPERS
   ============================================================= */
img.img-broken{ visibility:hidden; }

.sr-logo{
    width:22px; height:22px;
    border-radius:50%;
    background:var(--bg3);
    flex-shrink:0;
    object-fit:cover;
    border:1px solid var(--border);
}

span.img-empty{
    display:inline-block;
    background:var(--bg3);
    border:1px solid var(--border);
    position:relative;
}
span.img-empty::after{
    content:'';
    position:absolute;
    inset:35%;
    border-radius:50%;
    background:rgba(212,175,55,.35);
}
span.th-logo.img-empty{
    width:52px; height:52px; border-radius:50%;
}
span.news-thumb.img-empty{
    width:54px; height:54px; border-radius:8px;
}
span.sr-logo.img-empty{
    width:22px; height:22px; border-radius:50%;
}

/* =============================================================
   15. SCROLLBAR
   ============================================================= */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
    background:rgba(212,175,55,.2);
    border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(212,175,55,.4); }
* { scrollbar-width:thin; scrollbar-color:rgba(212,175,55,.2) transparent; }

::selection{ background:rgba(212,175,55,.3); color:#fff; }
button:focus-visible,
input:focus-visible,
select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
a{ color:var(--gold); }
a:hover{ color:var(--gold-light); }

/* =============================================================
   16. RESPONSIVE
   ============================================================= */

/* ---------- 1200px: 3 kolom → 2 kolom ---------- */
@media (max-width:1200px){
    .terminal{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        grid-template-rows:minmax(0,1fr) auto;
        overflow-y:auto;
    }
    .col{
        overflow-y:auto;
        height:auto;
        max-height:none;
    }
    .col-main,
    .col-info{ height:auto; }
    .col-news{
        grid-column:1 / -1;
        max-height:340px;
        height:auto;
    }
    .col-news .news-card{ height:340px; }
    .topbar-meta .meta-item:nth-child(2){ display:none; }
}

/* ---------- 960px: hide chain label ---------- */
@media (max-width:960px){
    .chain-name{ display:none; }
    .topbar{ gap:10px; padding:0 14px; }
    .th-price{ font-size:20px; }
}

/* ---------- 760px: mobile stack ---------- */
@media (max-width:760px){
    html, body{ height:auto; }
    body{ overflow:auto; }

    .topbar{
        height:auto;
        min-height:var(--topbar-h);
        padding:10px 12px;
        gap:8px;
        flex-wrap:wrap;
    }
    .brand-name{ display:none; }
    .brand-mark{ width:30px; height:30px; font-size:12px; }

    .brand{ order:1; }
    .topbar-meta{ order:1; margin-left:auto; gap:10px; }
    .meta-item{ display:none; }
    .clock{ padding-left:10px; font-size:12px; border-left:none; }

    .search-wrap{
        order:2;
        width:100%;
        max-width:none;
        min-width:0;
        flex:1 1 100%;
    }

    .chain-bar{
        order:3;
        width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        flex-wrap:nowrap;
    }
    .chain-bar::-webkit-scrollbar{ display:none; }
    .chain-btn{ flex-shrink:0; padding:6px 12px; }
    .chain-name{ display:inline; }

    /* TERMINAL: flex column, semua overflow visible */
    .terminal{
        display:flex;
        flex-direction:column;
        padding:8px;
        gap:8px;
        overflow:visible;
        min-height:0;
        flex:0 0 auto;
    }
    .col{
        overflow:visible;
        height:auto;
        max-height:none;
        width:100%;
        flex:0 0 auto;
        min-height:0;
    }
    .col-main,
    .col-info,
    .col-news{ overflow:visible; height:auto; max-height:none; }

    .col-main > .chart-card{ flex:0 0 auto; }

    .chart-card{ min-height:280px; }
    .chart-container{ min-height:220px; padding:4px; }

    .token-header{
        padding:12px;
        flex-direction:column;
        gap:12px;
        align-items:stretch;
    }
    .th-left{ width:100%; }
    .th-logo{ width:44px; height:44px; }
    span.th-logo.img-empty{ width:44px; height:44px; }
    .th-symbol-row h1{ font-size:18px; max-width:140px; }
    .th-price{ font-size:22px; }
    .th-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        width:100%;
        padding-top:10px;
        border-top:1px solid var(--border);
    }
    .stat-label{ font-size:9.5px; }
    .stat-val{ font-size:12px; }

    .card-head{ padding:10px 12px; }

    /* INFO GRID → 3 kolom di mobile */
    .info-grid{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:6px;
    }
    .info-item{
        padding:7px 8px;
    }
    .info-item .k{
        font-size:8.5px;
        letter-spacing:.2px;
    }
    .info-item .v{
        font-size:11px;
        margin-top:2px;
    }

    .token-news-card{ min-height:280px; max-height:none; }
    .token-news-list{ max-height:360px; }

    .news-card{ height:auto; max-height:400px; }
    .news-list{ max-height:400px; }
    .news-item{ padding:10px 12px; }
    .news-thumb{ width:44px; height:44px; }
    span.news-thumb.img-empty{ width:44px; height:44px; }

    .statusbar{
        flex-wrap:wrap;
        height:auto;
        padding:6px 12px;
        gap:8px 16px;
        font-size:10px;
    }
    .statusbar > div:nth-child(2){ margin-left:0; }
}

/* ---------- 520px: tiny phone ---------- */
@media (max-width:520px){
    .terminal{ padding:6px; gap:6px; }
    .col{ gap:6px; }

    .card-head{ padding:9px 10px; }
    .card-title{ font-size:12px; }
    .src-tag{ font-size:9px; padding:2px 6px; }

    .th-symbol-row h1{ font-size:16px; max-width:110px; }
    .th-price{ font-size:18px; }
    .th-change{ font-size:11px; }
    .th-name{ max-width:120px; font-size:11px; }

    .th-stats{ gap:8px; }
    .stat-label{ font-size:9px; letter-spacing:.2px; }
    .stat-val{ font-size:11px; }

    .chart-card{ min-height:240px; }
    .chart-container{ min-height:180px; }
    .tf-btn{ padding:4px 7px; font-size:10px; }

    /* INFO GRID tetap 3 kolom, lebih rapat */
    .info-grid{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:5px;
    }
    .info-item{
        padding:6px 7px;
    }
    .info-item .k{
        font-size:8px;
        letter-spacing:.15px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .info-item .v{
        font-size:10.5px;
        margin-top:2px;
        word-break:break-word;
        line-height:1.25;
    }

    .token-news-card{ min-height:220px; }
    .token-news-list{ max-height:280px; }

    .news-title{ font-size:12px; }
    .news-thumb{ width:40px; height:40px; }
    span.news-thumb.img-empty{ width:40px; height:40px; }

    .brand-mark{ width:28px; height:28px; font-size:11px; }

    .search-results{ max-height:280px; }
    .sr-chain{ display:none; }
    .sr-item{ padding:8px 10px; }
}

/* ---------- Landscape mobile ---------- */
@media (max-width:900px) and (orientation:landscape){
    html, body{ height:auto; }
    body{ overflow:auto; }

    .terminal{
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        grid-template-rows:auto auto;
        padding:8px;
        gap:8px;
        overflow:visible;
    }
    .col{
        overflow:visible;
        height:auto;
        max-height:none;
    }
    .col-main{ grid-column:1; grid-row:1; }
    .col-info{ grid-column:2; grid-row:1; }
    .col-news{ grid-column:1 / -1; grid-row:2; max-height:240px; }

    .chart-card{ min-height:200px; }
    .chart-container{ min-height:160px; }

    .topbar{
        flex-wrap:wrap;
        height:auto;
        min-height:auto;
        padding:8px 12px;
    }
    .search-wrap{
        order:2;
        width:100%;
        flex:1 1 100%;
    }
    .chain-bar{ order:3; width:100%; overflow-x:auto; }

    /* info grid 3 kolom juga di landscape */
    .info-grid{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:6px;
    }
}

/* ---------- iOS safe area ---------- */
@supports (padding: max(0px)){
    .topbar{
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    .statusbar{
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    @media (max-width:760px){
        .topbar{
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
        }
        .statusbar{
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
        }
        .terminal{ padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    }
}