/* 2026-08-12 - "bright, exclusive" redesign (Founder-approved concept,
   see the published mockup this replaces the dark obsidian/purple
   theme with). Same token NAMES as before on purpose - every component
   rule elsewhere in this file and in admin.css/trading-bot.css already
   reads these vars, so redefining them here recolors the whole app
   without touching those rules. Warm ivory base + deep amethyst
   (matches the CRABSEM mascot's own violet) + antique gold as the
   premium accent, in place of the old near-black + flat purple. */
:root{

    --bg:#f6f1e6;
    --panel:#ffffff;
    --panel2:#efe6d4;
    --panel3:#fbf8f1;
    --border:rgba(32,21,48,.10);
    --border-strong:rgba(32,21,48,.18);

    --green:#157a52;
    --green-soft:#e1f4ec;
    --yellow:#a66a12;
    --yellow-soft:#faf0da;
    --red:#b9293a;
    --red-soft:#fbe7e9;

    --purple:#6b21c9;
    --purple-bright:#8b3ff0;
    --purple-soft:#f0e6fc;
    --gold:#a8791f;
    --gold-bright:#c99a3a;
    --gold-soft:#f7ecd2;

    --text:#1e1430;
    --text-dim:#4d3f63;
    --muted:#8c8375;
    --muted-2:#aca290;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Poppins,sans-serif;
    overflow-x:hidden;
}

.app{

    max-width:100vw;

    overflow-x:hidden;

}

/* =======================
TOPBAR
======================= */

.topbar{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 28px;

    background:#efe6d4;
    border-bottom:1px solid var(--border);

}

.logo{

    display:flex;
    align-items:center;
    gap:12px;

}

.logo img{

    width:42px;
    height:42px;
    min-width:42px;
    aspect-ratio:1/1;
    flex-shrink:0;
    object-fit:contain;

}

.logo h2{

    margin:0;
    font-size:22px;

}

.logo span{

    font-size:11px;
    color:var(--muted);

}

.search input{

    width:370px;
    height:42px;

    border:none;
    outline:none;

    background:#efe6d4;

    border-radius:12px;

    padding:0 16px;

    color:var(--text);

    font-size:14px;

}

.search input:focus{

    box-shadow:0 0 0 2px #6b21c9;

}

.top-right{

    display:flex;
    align-items:center;
    gap:18px;

}

.live-status{

    display:flex;
    align-items:center;
    gap:8px;

    color:#157a52;

    font-size:13px;
    font-weight:600;

}

.helpBtn{

    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    aspect-ratio:1/1;
    flex-shrink:0;

    border-radius:50%;

    background:var(--panel2);
    border:1px solid var(--border);

    color:var(--text);
    font-weight:800;
    font-size:14px;

    text-decoration:none;

}

.helpBtn:hover{

    border-color:var(--purple);

}

.live-status.limited{

    color:#a66a12;

}

.live-status.offline{

    color:#b9293a;

}

.live-dot{

    width:10px;
    height:10px;
    min-width:10px;
    min-height:10px;
    aspect-ratio:1/1;
    flex-shrink:0;
    border-radius:50%;

    background:#157a52;

    animation:pulse 1.3s infinite;

}

@keyframes pulse{

    0%{opacity:1;}
    50%{opacity:.3;}
    100%{opacity:1;}

}

/* Real connectivity states (Engine/LIVE) -
   no longer hardcoded */

.live-dot.ok{ background:#157a52; }
.live-dot.limited{ background:#a66a12; animation:pulse .8s infinite; }
.live-dot.offline{ background:#b9293a; animation:none; }

.live-status span#liveStatusText{ color:inherit; }

#engineStatusText.ok{ color:#157a52; }
#engineStatusText.limited{ color:#a66a12; }
#engineStatusText.offline{ color:#b9293a; }

.disclaimerNote{

    font-size:10.5px;

    color:var(--muted);

    opacity:.8;

    margin:4px 0 0;

    line-height:1.4;

}

/* =======================
WALLET MENU (dropdown)
======================= */

.walletMenu{

    position:relative;

}

.walletTrigger{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    background:linear-gradient(135deg,#f0e6fc,#ffffff);

    border:1px solid rgba(139,92,246,.35);

    border-radius:14px;

    padding:8px 16px;

    color:var(--text);

    font-size:12px;
    font-weight:700;

    cursor:pointer;

    line-height:1.5;

    transition:.2s;

}

.walletTrigger:hover{

    border-color:#6b21c9;

    box-shadow:0 0 0 3px rgba(139,92,246,.15);

}

.walletTrigger small{

    font-weight:500;

    color:var(--muted);

    font-size:10px;

}

.walletDropdown{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    width:270px;

    background:#efe6d4;

    border:1px solid rgba(139,92,246,.25);

    border-radius:16px;

    padding:18px;

    box-shadow:0 20px 40px rgba(0,0,0,.5);

    z-index:50;

    display:none;

    flex-direction:column;

    gap:12px;

}

.walletDropdown.open{

    display:flex;

}

.walletDropdownHeader{

    display:flex;
    align-items:center;
    gap:10px;

    padding-bottom:12px;

    border-bottom:1px solid var(--border);

}

.walletAvatar{

    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    aspect-ratio:1/1;
    flex-shrink:0;

    border-radius:50%;

    background:linear-gradient(135deg,#6b21c9,#4c1d95);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;

}

.walletDropdownTitle{

    font-size:13px;
    font-weight:700;

    color:#1f9c6a;

}

.walletDropdownSub{

    font-size:11px;

    color:var(--muted);

    margin-top:2px;

}

.walletDropdownRow{

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:12px;

    color:var(--muted);

}

.walletDropdownRow strong{

    color:var(--text);
    font-size:13px;

}

.walletTierPill{

    display:inline-block;

    padding:3px 10px;

    border-radius:999px;

    background:rgba(139,92,246,.18);

    color:#6b21c9;

    font-size:11px;
    font-weight:700;

}

.walletDropdownLink{

    display:block;

    text-align:center;

    padding:9px;

    border-radius:10px;

    background:#efe6d4;

    color:#6b21c9;

    font-size:12px;
    font-weight:600;

    text-decoration:none;

    border:1px solid var(--border);

}

.walletDropdownLink:hover{

    border-color:#6b21c9;

}

.walletLogoutBtn{

    width:100%;

    padding:10px;

    border:none;

    border-radius:10px;

    background:rgba(255,90,90,.12);

    color:#c94a56;

    font-size:12px;
    font-weight:700;

    cursor:pointer;

}

.walletLogoutBtn:hover{

    background:rgba(255,90,90,.2);

}

/* =======================
STATS
======================= */

.statsCompact{

    display:grid;

    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;

    align-items:center;

    background:#efe6d4;

    border:1px solid var(--border);

    border-radius:16px;

    margin:16px 20px;

    padding:14px 0;

}

.statItem{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:2px;

    padding:0 12px;

    text-align:center;

    min-width:0;

}

.statItem .statValue{

    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

}

.statLabel{

    font-size:10.5px;

    color:var(--muted);

    text-transform:uppercase;

    letter-spacing:.4px;

}

.statValue{

    font-size:18px;

    font-weight:700;

    color:var(--text);

    line-height:1.3;

}

.statSub{

    font-size:10px;

    color:var(--muted);

    white-space:nowrap;

}

.statDivider{

    width:1px;

    align-self:stretch;

    background:var(--border);

}

.liveMonitorStat .statValue{

    color:#157a52;

}

/* =======================
LAYOUT
======================= */

.content{

    display:grid;

    grid-template-columns:minmax(0,3fr) minmax(320px,1fr);

    gap:20px;

    padding:0 20px 20px;

    align-items:start;

}

.coin-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));

    gap:14px;

    align-content:start;

}

/* =======================
CARD - total redesign.
Grid-based, fixed row heights, every
element always in the same place
regardless of content length. No
absolute positioning anywhere - badges,
the favorite star, everything lives in
normal flow so nothing can overlap.
Hierarchy (largest -> smallest visual
weight): Recommendation (.ccAction) >
Participant Score (.ccScoreValue) >
Market Info (.ccMarketInfo) > Badges
(.ccBadgeRow).
======================= */

.coinCard{

    display:grid;

    grid-template-rows:36px 22px 46px 48px 34px;

    gap:8px;

    background:#efe6d4;

    border:1px solid rgba(32,21,48,.06);

    border-radius:16px;

    padding:12px;

    cursor:pointer;

    transition:.25s;

    overflow:hidden;

}

.coinCard:hover{

    transform:translateY(-3px);

    border-color:#6b21c9;

    box-shadow:0 10px 25px rgba(0,0,0,.30);

}

/* ---- Header: rank, logo, name, price change, favorite ---- */

.ccHeader{

    display:flex;

    align-items:center;

    gap:8px;

    min-width:0;

}

.ccRank{

    flex:0 0 auto;

    min-width:20px;

    height:20px;

    padding:0 5px;

    border-radius:999px;

    background:rgba(32,21,48,.08);

    color:var(--muted);

    font-size:10px;

    font-weight:800;

    display:flex;

    align-items:center;

    justify-content:center;

}

.ccRank.medal{

    background:rgba(246,185,59,.18);

    font-size:13px;

}

.ccLogo{

    width:28px;
    height:28px;
    min-width:28px;
    min-height:28px;
    aspect-ratio:1/1;
    flex-shrink:0;

    border-radius:50%;

    object-fit:cover;

    background:#efe6d4;

}

.ccTitle{

    flex:1 1 auto;

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.ccTitle h3{

    margin:0;

    font-size:14px;

    font-weight:700;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.ccTitle small{

    display:block;

    margin-top:1px;

    color:var(--muted);

    font-size:10px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.ccChange{

    flex:0 0 auto;

    font-size:11.5px;

    font-weight:700;

}

/* Favorite toggle - a real circle: box-sizing is border-box globally,
   so an explicit min-height/min-width equal to the actual size is
   required to override the global `button{ min-height:38px }` reset
   below, which was previously stretching this into an oval. Lives in
   normal flex flow now, not an absolute overlay, so it can never
   collide with the badges below it. */
.watchStar{

    flex:0 0 auto;

    width:24px;

    height:24px;

    min-width:24px;

    min-height:24px;

    padding:0;

    border-radius:50%;

    border:1px solid rgba(32,21,48,.12);

    background:rgba(0,0,0,.25);

    color:#a66a12;

    font-size:13px;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

}

.watchStar.active{

    background:rgba(246,185,59,.18);

    border-color:#a66a12;

}

/* ---- Badge row: EARLY/MID/LATE + data-freshness tag. Always
   reserves its own row (grid-template-rows above) so its presence or
   absence never changes card height - empty is just quiet, not
   collapsed. ---- */

.ccBadgeRow{

    display:flex;

    align-items:center;

    gap:6px;

    min-width:0;

    overflow:hidden;

}

.entryBadge{

    flex:0 0 auto;

    padding:2px 8px;

    border-radius:999px;

    font-size:9px;

    font-weight:800;

    letter-spacing:.4px;

    white-space:nowrap;

}

.entryBadge.early{ background:rgba(24,214,123,.18); color:#1f9c6a; }
.entryBadge.mid{ background:rgba(246,185,59,.18); color:#a66a12; }
.entryBadge.late{ background:rgba(255,90,90,.18); color:#c94a56; }

.lifecycleTag{

    flex:0 1 auto;

    min-width:0;

    padding:2px 7px;

    border-radius:999px;

    font-size:8.5px;

    font-weight:800;

    letter-spacing:.02em;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.lifecycleTag.watchlist{ background:rgba(246,185,59,.16); color:#a66a12; }
.lifecycleTag.archived{ background:rgba(255,77,77,.16); color:#b9293a; }

.lifecycleLabel.active{ color:#157a52; }
.lifecycleLabel.watchlist{ color:#a66a12; }
.lifecycleLabel.archived{ color:#b9293a; }

/* ---- Market Info: Vol / Liq / MCap ---- */

.ccMarketInfo{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:6px;

}

.ccMarketInfo div{

    min-width:0;

    background:#efe6d4;

    padding:4px 2px;

    border-radius:8px;

    text-align:center;

}

.ccMarketInfo span{

    display:block;

    color:var(--muted);

    font-size:9px;

}

.ccMarketInfo strong{

    display:block;

    margin-top:2px;

    font-size:11px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

/* ---- AI: Participant Score (dominant number) + Confidence/Risk ---- */

.ccAiInfo{

    display:flex;

    align-items:center;

    gap:8px;

    background:#efe6d4;

    border-radius:10px;

    padding:5px 10px;

    min-width:0;

}

.ccScore{

    flex:0 0 auto;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    line-height:1.15;

}

.ccScoreLabel{

    font-size:8.5px;

    color:var(--muted);

    letter-spacing:.4px;

}

.ccScoreValue{

    font-size:23px;

    font-weight:800;

}

.ccAiMeta{

    flex:1 1 auto;

    min-width:0;

    margin-left:auto;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:2px;

    font-size:10px;

    color:var(--muted);

    text-align:right;

}

.ccAiMeta strong{ color:var(--text); }
.ccAiMeta .riskHigh strong{ color:#b9293a; }
.ccAiMeta .riskMed strong{ color:#a66a12; }
.ccAiMeta .riskLow strong{ color:#157a52; }

/* ---- Footer: the Recommendation - highest visual weight on the
   card (full-width, saturated color, bold) ---- */

.ccFooter{

    display:flex;

    align-items:stretch;

    gap:8px;

    min-width:0;

}

.ccAction{

    flex:1 1 auto;

    min-width:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    color:#fff;

    font-size:11.5px;

    font-weight:800;

    letter-spacing:.2px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    padding:0 8px;

}

.ccActionWarn{

    box-shadow:inset 0 0 0 2px rgba(255,90,90,.55);

}

.ccChain{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e3d7c0;

    padding:0 9px;

    border-radius:9px;

    font-size:9.5px;

    font-weight:700;

    color:var(--muted);

}

/* =======================
AI TRADE PLAN / TOKEN STATUS / MODE TABS / DETAIL WATCH BUTTON
======================= */

/* Mode tabs - Trending / Recently Viewed / Watch Later / Favorites.
   Same 16px rhythm as .statsCompact's own margin above it, and the
   same again below before the card grid starts - previously 0
   bottom spacing here left the tabs touching the first row of cards. */
.modeTabs{

    display:flex;

    gap:8px;

    margin:0 20px 16px;

    padding:0;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

.modeTab{

    flex:0 0 auto;

    padding:7px 14px;

    border-radius:999px;

    border:1px solid rgba(32,21,48,.1);

    background:rgba(32,21,48,.04);

    color:var(--muted);

    font-size:12.5px;

    font-weight:600;

    cursor:pointer;

    white-space:nowrap;

}

.modeTab.active{

    background:#6b21c9;

    border-color:#6b21c9;

    color:#fff;

}

/* Detail panel: watch-later toggle - deliberately a small, secondary
   chip (roughly 40% smaller than the main Recommendation pill) so it
   never competes with it for attention. */
.detailWatchBtn{

    flex:0 0 auto;

    margin-left:auto;

    padding:4px 10px;

    border-radius:999px;

    border:1px solid rgba(32,21,48,.15);

    background:rgba(32,21,48,.05);

    color:var(--muted);

    font-size:10px;

    font-weight:700;

    cursor:pointer;

    white-space:nowrap;

    min-height:0;

}

.detailWatchBtn.active{

    background:rgba(24,214,123,.15);

    border-color:#157a52;

    color:#157a52;

}

.smartRecallBanner{

    margin-top:10px;

    padding:9px 12px;

    border-radius:10px;

    background:rgba(124,58,237,.12);

    border:1px solid rgba(124,58,237,.35);

    font-size:12px;

    color:#6b21c9;

}

.tokenStatusTag{

    padding:6px 12px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    background:rgba(32,21,48,.08);

    color:var(--muted);

}

.tokenStatusTag.dumped{ background:rgba(255,77,77,.15); color:#c94a56; }
.tokenStatusTag.dead{ background:rgba(32,21,48,.06); color:#8c8375; }
.tokenStatusTag.inactive{ background:rgba(246,185,59,.12); color:#a66a12; }
.tokenStatusTag.completed{ background:rgba(59,130,246,.15); color:#7cb0ff; }

.tradePlanBands{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin:14px 0;

}

.tradePlanBands div{

    background:#efe6d4;

    border-radius:10px;

    padding:10px 8px;

    text-align:center;

}

.tradePlanBands span{

    display:block;

    font-size:10px;

    color:var(--muted);

    margin-bottom:4px;

}

.tradePlanBands strong{

    font-size:13px;

    display:block;

}

.tradePlanBands small{

    display:block;

    margin-top:2px;

    font-size:9.5px;

    color:var(--muted);

    font-weight:400;

}

.tradePlanBands strong.tpTarget{ color:#157a52; }
.tradePlanBands strong.tpStop{ color:#b9293a; }

.tradePlanTimeline .tradePlanStep{

    display:flex;

    flex-direction:column;

    gap:2px;

    padding:8px 0;

    border-bottom:1px solid rgba(32,21,48,.06);

}

.tradePlanTimeline .tradePlanStep.isLive{

    position:relative;

    padding-left:10px;

}

.tradePlanTimeline .tradePlanStep.isLive:before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#157a52;

    box-shadow:0 0 0 3px rgba(24,214,123,.2);

}

.tradePlanTimeline .tradePlanStep span{

    font-size:10.5px;

    color:var(--muted);

}

.tradePlanTimeline .tradePlanStep small{

    font-size:11px;

    color:#8c8375;

}

/* =======================
DETAIL PANEL (sticky +
independent vertical scroll)
======================= */

.detail-panel{

    background:#efe6d4;

    border-radius:18px;

    border:1px solid var(--border);

    padding:0;

    position:sticky;

    top:20px;

    align-self:start;

    width:100%;

    max-width:380px;

    min-width:300px;

    max-height:calc(100vh - 40px);

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

#detailContent{

    padding:18px 20px;

    overflow-y:auto;

    flex:1 1 auto;

    min-height:0;

}

#detailContent::-webkit-scrollbar{

    width:6px;

}

#detailContent::-webkit-scrollbar-thumb{

    background:rgba(139,92,246,.35);

    border-radius:999px;

}

.detail-panel img{

    width:72px;
    height:72px;
    min-width:72px;
    min-height:72px;
    aspect-ratio:1/1;
    flex-shrink:0;

    border-radius:50%;
    object-fit:cover;

}

/* Root cause of "Watch Later too big" (fix #6): this generic
   full-width/purple/14px-padded rule has higher specificity
   (class + :not(class)) than .detailWatchBtn's own rule (one class),
   so it was silently winning regardless of source order - excluding
   it here is what actually makes the small secondary-chip styling
   take effect. */
.detail-panel button:not(.closeDetailBtn):not(.detailWatchBtn){

    width:100%;

    margin-top:12px;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#6b21c9;

    color:var(--text);

    font-size:14px;

    cursor:pointer;

}

.detail-panel button:hover{

    opacity:.9;

}

.empty{

    opacity:.45;

    text-align:center;

    margin-top:120px;

}

ul{

    padding-left:18px;

}

li{

    margin-bottom:6px;

    color:#4d3f63;

}

/* =======================
DETAIL SECTIONS
======================= */

.detailHeader{

    display:flex;
    align-items:center;
    gap:14px;

}

.detailHeaderInfo h2{

    margin:0 0 2px;

    font-size:18px;

}

.detailHeaderInfo span{

    color:var(--muted);

    font-size:12px;

}

.entryMeter{

    display:flex;

    margin:16px 0;

    border-radius:999px;

    overflow:hidden;

    border:1px solid var(--border);

}

.entryMeter div{

    flex:1;

    text-align:center;

    padding:8px 0;

    font-size:11px;
    font-weight:700;

    color:var(--muted);

    background:#efe6d4;

}

.entryMeter div.active.early{

    background:#157a52;
    color:#ffffff;

}

.entryMeter div.active.mid{

    background:#a66a12;
    color:#ffffff;

}

.entryMeter div.active.late{

    background:#b9293a;
    color:#ffffff;

}

.sectionTitle{

    font-size:11.5px;
    font-weight:800;

    letter-spacing:.6px;

    color:var(--muted);

    margin:16px 0 8px;

    text-transform:uppercase;

}

.sectionTitle:first-child{

    margin-top:0;

}

.whyList{

    list-style:none;

    padding-left:0;

    margin:0;

}

.whyList li{

    display:flex;

    align-items:flex-start;

    gap:8px;

    font-size:13px;

    color:#4d3f63;

    margin-bottom:6px;

}

.whyList li .tick{

    color:#157a52;
    font-weight:800;

}

.riskList li .tick{

    color:#b9293a;
    font-weight:800;

}

.targetGrid,
.healthGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}

.metricBox{

    background:#efe6d4;

    border-radius:10px;

    padding:10px;

}

.metricBox small{

    display:block;

    color:var(--muted);

    font-size:10px;

}

.metricBox strong{

    display:block;

    margin-top:4px;

    font-size:14px;

}

.metricBox.tp strong{

    color:#157a52;

}

.metricBox.sl strong{

    color:#b9293a;

}

.monitorBox{

    background:#efe6d4;

    border-radius:12px;

    padding:11px 14px;

}

.monitorRow{

    display:flex;

    justify-content:space-between;

    font-size:12px;

    color:var(--muted);

    margin-bottom:6px;

}

.monitorRow:last-child{

    margin-bottom:0;

}

.monitorRow strong{

    color:var(--text);

}

.monitorRow strong.liveTag{

    color:#157a52;

}

.monitorRow strong.changedYes{

    color:#a66a12;

}

.monitorRow strong.changedNo{

    color:var(--muted);

}

.historyTimeline{

    display:flex;

    flex-direction:column;

    gap:0;

}

.historyStep{

    position:relative;

    padding:0 0 18px 22px;

    font-size:12px;

    color:var(--muted);

}

.historyStep:before{

    content:"";

    position:absolute;

    left:4px;

    top:4px;

    width:9px;
    height:9px;

    border-radius:50%;

    background:#ddd0b5;

}

.historyStep:after{

    content:"";

    position:absolute;

    left:8px;

    top:14px;

    bottom:0;

    width:1px;

    background:rgba(32,21,48,.1);

}

.historyStep:last-child:after{

    display:none;

}

.historyStep.current:before{

    background:#6b21c9;

    box-shadow:0 0 0 4px rgba(139,92,246,.2);

}

.historyStep strong{

    display:block;

    color:var(--text);

    font-size:13px;

}

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

.closeDetailBtn{

    display:none;

}

@media(max-width:1100px){

    .content{

        grid-template-columns:1fr;

    }

    /* The right panel no longer disappears on mobile -
       it becomes a full-screen overlay opened on card
       tap, with its own close button, instead of being
       permanently hidden. */

    .detail-panel{

        display:none;

        position:fixed;

        inset:0;

        z-index:200;

        max-width:none;

        min-width:0;

        max-height:100vh;

        border-radius:0;

        padding:0;

    }

    .detail-panel.mobileOpen{

        display:flex;

    }

    #detailContent{

        max-height:100vh;

        padding-top:56px;

    }

    .closeDetailBtn{

    display:flex;

    align-items:center;
    justify-content:center;

    width:auto;

    position:absolute;

    top:10px;

    right:10px;

    z-index:201;

    background:#efe6d4;

    color:var(--text);

    border:1px solid var(--border);

    border-radius:999px;

    padding:8px 14px;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

}

}

/* =======================
TABLET - a genuinely distinct tier, not desktop-minus-a-column or
mobile-plus-a-column: a fixed 2-up card grid (predictable rhythm on a
tablet's wider-but-still-narrow viewport) at a slightly tighter
density than desktop. The detail panel is already a full-screen
overlay below 1100px (see that breakpoint), which is the correct
tablet behavior - a permanently docked 380px sidebar doesn't fit a
tablet's proportions the way it does a wide desktop monitor.
======================= */

@media(min-width:601px) and (max-width:1100px){

    .coin-grid{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

    .coinCard{

        grid-template-rows:34px 20px 44px 46px 32px;

        padding:11px;

    }

}

@media(max-width:850px){

    .topbar{

        flex-wrap:wrap;

        gap:14px;

    }

    .search{

        width:100%;

        order:3;

    }

    .search input{

        width:100%;

    }

    .stats{

        grid-template-columns:repeat(2,1fr);

    }

    .walletDropdown{

        width:min(270px, calc(100vw - 32px));

        right:-8px;

    }

}

@media(max-width:600px){

    .coin-grid{

        grid-template-columns:1fr;

        gap:10px;

    }

    .logo span{

        display:none;

    }

    .topbar{

        padding:14px 16px;

    }

    .top-right{

        gap:10px;

        flex-wrap:wrap;

    }

    .walletTrigger{

        font-size:11px;

        padding:8px 12px;

        min-height:40px;

    }

    .targetGrid,
    .healthGrid{

        grid-template-columns:1fr 1fr;

        gap:8px;

    }

    /* Compact horizontal stats grid - never
       scrolls, always fits by shrinking padding/
       font-size instead (Part 1: no horizontal
       scroll on any phone width). */

    .statsCompact{

        margin:12px 10px;

        padding:10px 0;

    }

    .statItem{

        padding:0 6px;

    }

    .statValue{

        font-size:14px;

    }

    .statLabel{

        font-size:8.5px;

        letter-spacing:0;

    }

    .statSub{

        font-size:8.5px;

        overflow:hidden;

        text-overflow:ellipsis;

        max-width:100%;

    }

    /* =======================
    MOBILE CARD - HOTFIX #3 REDESIGN.
    Real mobile-first layout, not the previous sprint's
    shrunk-desktop-row: a genuine two-column split.
    LEFT = token branding (bigger logo, bigger name,
    bigger EARLY/WATCHLIST badges, clear signal action) -
    RIGHT = Volume/Liquidity/Market Cap, stacked and
    sized for one-second readability. Same 5 semantic
    blocks as desktop (header/badges/market/ai/footer),
    just remapped into a 2-column grid instead of 5
    stacked rows - no HTML change, only CSS. Desktop is
    completely untouched (all of this is inside this one
    max-width:600px query). Fixed row heights again, so
    every mobile card is still the same height regardless
    of content - deliberately taller than the previous
    sprint's ultra-compact version, since "much bigger,
    much more readable" and "5-7 rows visible" pull in
    opposite directions and this hotfix explicitly asks
    for readability.
    ======================= */

    .coin-grid{

        grid-template-columns:1fr;

        gap:10px;

    }

    .coinCard{

        grid-template-columns:1.15fr 1fr;

        grid-template-rows:56px 24px 36px;

        grid-template-areas:

            "header market"

            "badges market"

            "footer ai";

        column-gap:10px;

        row-gap:6px;

        padding:10px 12px;

        border-radius:14px;

    }

    .ccHeader{ grid-area:header; }

    .ccRank{

        min-width:16px;

        height:16px;

        font-size:8px;

    }

    .ccRank.medal{ font-size:11px; }

    /* "Logo jauh lebih besar" - more than doubled from the previous
       20px compact-row version, real branding presence. */
    .ccLogo{

        width:44px;
        height:44px;
        min-width:44px;
        min-height:44px;

    }

    /* "Token Name lebih besar" - both the symbol and the full name
       are shown now (the full name was hidden entirely in the old
       compact-row layout to save space that this redesign no longer
       needs to save). */
    .ccTitle h3{ font-size:15px; }

    .ccTitle small{ display:block; font-size:10.5px; }

    /* Price change % moves out of the mobile card - the right column
       is reserved for exactly Volume/Liquidity/Market Cap per this
       hotfix's spec; still one tap away in the detail panel. */
    .ccChange{ display:none; }

    .watchStar{

        width:22px;
        height:22px;
        min-width:22px;
        min-height:22px;
        font-size:12px;

    }

    .ccBadgeRow{

        grid-area:badges;

        flex-wrap:wrap;

        row-gap:4px;

    }

    /* "EARLY badge lebih besar" / "WATCHLIST badge lebih besar" */
    .entryBadge{ font-size:10px; padding:3px 9px; }

    .lifecycleTag{ font-size:9px; padding:3px 8px; max-width:120px; }

    /* Right column: Volume / Liquidity / Market Cap, stacked and
       sized to actually read at a glance instead of one truncated
       inline row. Spans the header+badges row height (grid area
       "market" repeats across both), so it's vertically roomy. */
    .ccMarketInfo{

        grid-area:market;

        display:flex;

        flex-direction:column;

        justify-content:center;

        gap:6px;

        background:rgba(32,21,48,.04);

        border-radius:10px;

        padding:8px 10px;

    }

    .ccMarketInfo div{

        background:none;

        padding:0;

        text-align:right;

        display:flex;

        justify-content:space-between;

        align-items:baseline;

        gap:8px;

    }

    .ccMarketInfo span{ font-size:10.5px; }

    .ccMarketInfo strong{ margin-top:0; font-size:13px; }

    /* Score/Confidence/Risk - kept (nothing removed), but secondary
       to the signal action button, sitting quietly bottom-right. */
    .ccAiInfo{

        grid-area:ai;

        padding:3px 8px;

    }

    .ccScoreLabel{ display:none; }

    .ccScoreValue{ font-size:15px; }

    .ccAiMeta{ flex-direction:row; gap:6px; font-size:8.5px; }

    /* "Signal badge jelas" - the clearest, boldest element on the
       left column. */
    .ccFooter{ grid-area:footer; height:auto; }

    .ccAction{ font-size:11.5px; padding:7px 8px; min-height:32px; }

    .ccChain{ display:none; } /* every token on this platform is SOL today - low information value at this density */

}

@media(max-width:380px){

    .targetGrid,
    .healthGrid{

        grid-template-columns:1fr;

    }

    .walletDropdown{

        width:calc(100vw - 24px);

        right:-4px;

    }

    .statsCompact{

        grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;

        margin:10px 8px;

    }

    .statItem{

        padding:0 3px;

    }

    .statValue{

        font-size:12.5px;

    }

    .statLabel{

        font-size:8px;

    }

}
/* ===========================
   TOP OPPORTUNITIES
=========================== */

.topPicks{

padding:0 24px 24px;

}

.topTitle{

font-size:20px;

font-weight:700;

margin-bottom:16px;

}

.topPicksGrid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:14px;

}

.pickCard{

background:#efe6d4;

border:1px solid rgba(32,21,48,.08);

border-radius:16px;

padding:14px;

cursor:pointer;

transition:.2s;

}

.pickCard:hover{

transform:translateY(-3px);

border-color:#6b21c9;

}

.pickCard h3{

margin:0;

font-size:18px;

}

.pickCard p{

margin:6px 0;

font-size:13px;

opacity:.8;

}

/* ===========================
   GMGN BUTTON
=========================== */

.gmgnBtn{

    background:linear-gradient(135deg,#157a52,#0b8f52) !important;

}

.gmgnBtn:hover{

    opacity:.92;

}

/* ===========================
   BUY / SELL PRESSURE BAR
=========================== */

.buySellBar{

    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:#b9293a;

    margin-bottom:6px;

}

.buySellFill{

    height:100%;

    background:#157a52;

}

.buySellLabels{

    display:flex;

    justify-content:space-between;

    font-size:11px;

    color:var(--muted);

}

/* ============================
   MOBILE CLOSE BUTTON FIX
============================ */

.closeDetailBtn{

    width:auto !important;
    margin:0 !important;
    padding:10px 14px !important;

    position:absolute;
    top:12px;
    right:12px;

    border-radius:12px;

    background:#efe6d4 !important;
    border:1px solid rgba(32,21,48,.08);

    font-size:13px;
    font-weight:700;

    color:var(--text);

    z-index:999;
}

.closeDetailBtn:hover{

    background:#e3d7c0 !important;

}

/* =======================
SKELETON LOADING
Shown while a scan/search is in flight so the
dashboard never shows an empty area.
======================= */

.skeleton-grid{

    display:none;

}

.skeletonCard{

    background:#efe6d4;

    border:1px solid rgba(32,21,48,.06);

    border-radius:16px;

    padding:12px;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.skeletonRow{

    display:flex;

    align-items:center;

    gap:10px;

}

.skeletonCircle{

    width:40px;

    height:40px;

    min-width:40px;

    border-radius:50%;

    flex-shrink:0;

}

.skeletonLine{

    height:12px;

    border-radius:6px;

}

.skeletonLine.w100{ width:100%; height:56px; border-radius:12px; }
.skeletonLine.w80{ width:80%; }
.skeletonLine.w60{ width:60%; }
.skeletonLine.w40{ width:40%; }

.skeletonCircle,
.skeletonLine{

    background:linear-gradient(

        90deg,

        #efe6d4 25%,

        #e3d7c0 37%,

        #efe6d4 63%

    );

    background-size:400% 100%;

    animation:skeletonShimmer 1.4s ease infinite;

}

@keyframes skeletonShimmer{

    0%{ background-position:100% 50%; }

    100%{ background-position:0 50%; }

}

/* =======================
SAFE AREA (iPhone notch / home
indicator) + touch target polish
======================= */

.topbar{

    padding-top:calc(18px + env(safe-area-inset-top));

    padding-left:calc(28px + env(safe-area-inset-left));

    padding-right:calc(28px + env(safe-area-inset-right));

}

.app{

    padding-bottom:env(safe-area-inset-bottom);

}

.walletButton,
.walletTrigger,
.walletLogoutBtn,
.closeDetailBtn,
.coinCard,
.watchStar,
.modeTab,
.detailWatchBtn{

    -webkit-tap-highlight-color:transparent;

}

button{

    min-height:38px;

    touch-action:manipulation;

}

@media(max-width:600px){

    .topbar{

        padding-top:calc(14px + env(safe-area-inset-top));

        padding-left:calc(16px + env(safe-area-inset-left));

        padding-right:calc(16px + env(safe-area-inset-right));

    }

    .coinCard{

        min-height:44px;

        cursor:pointer;

    }

    .walletDropdownLink,
    .walletLogoutBtn,
    .walletOption{

        min-height:44px;

    }

}

/* =======================
V14 MOBILE UX OVERHAUL
Comprehensive mobile polish per user
request: comfortable reading, no
horizontal overflow, one-hand reach,
proportional bars/badges, smoother
loading, readable detail panel.
======================= */

html, body{

    overflow-x:hidden;

    max-width:100vw;

}

img{

    max-width:100%;

}

/* Smoother loading: cards fade+rise in
   instead of popping */

.coinCard{

    animation:cardIn .25s ease both;

}

@keyframes cardIn{

    from{ opacity:0; transform:translateY(6px); }

    to{ opacity:1; transform:none; }

}

@media (prefers-reduced-motion: reduce){

    .coinCard{ animation:none; }

}

@media(max-width:600px){

    /* Base readability: slightly larger
       body text + relaxed line height */

    .detail-panel{

        font-size:15px;

        line-height:1.55;

    }

    .detail-panel .sectionTitle{

        font-size:13px;

        letter-spacing:1.2px;

        margin-top:22px;

    }

    .whyList li{

        font-size:14.5px;

        line-height:1.55;

        margin-bottom:10px;

    }

    /* Score bars: taller + labels never
       cramped against values */

    .scoreBarRow{

        margin-bottom:14px;

    }

    .scoreBarHead{

        font-size:13.5px;

    }

    .scoreBarTrack{

        height:9px;

    }

    /* Target / Market Health stat tiles:
       force 2-col grid that can never
       overflow, numbers wrap gracefully */

    .targetGrid, .healthGrid{

        display:grid;

        grid-template-columns:repeat(2, minmax(0,1fr));

        gap:10px;

    }

    .targetGrid > div, .healthGrid > div{

        min-width:0;

    }

    .targetGrid strong, .healthGrid strong{

        font-size:16px;

        word-break:break-word;

    }

    /* Action buttons: full-width, tall,
       thumb-reach friendly - excludes .detailWatchBtn, which is
       deliberately a small secondary chip (see fix #6: Watch Later
       must never be as prominent as the Recommendation) and would
       otherwise get stretched to the same size as Copy Contract/
       DexScreener/GMGN by this same generic selector. */

    .detail-panel button:not(.detailWatchBtn),
    .detailActions button{

        width:100%;

        min-height:48px;

        font-size:15px;

        border-radius:14px;

    }


    /* History timeline breathing room */

    .historyTimeline{

        padding-left:6px;

    }

    /* Monitor box rows never overflow */

    .monitorRow{

        display:flex;

        justify-content:space-between;

        gap:10px;

        min-width:0;

    }

    .monitorRow strong{

        text-align:right;

        word-break:break-word;

    }

    /* Wallet-browser hint stands out just
       enough without shouting */

    .walletBrowserHint{

        background:rgba(139,92,246,.08);

        border:1px solid rgba(139,92,246,.25);

        border-radius:12px;

        padding:10px 12px;

    }

    /* Ticker/stats rows: hard stop on
       sideways scroll */

    .statsCompact, .coin-grid, .detail-panel{

        max-width:100%;

        overflow-x:hidden;

    }

}

@media(max-width:380px){

    .detail-panel{ font-size:14px; }

    .targetGrid strong, .healthGrid strong{ font-size:14.5px; }

}

/* Base (desktop) styles for the refactored
   class-based scoreBar - previously inline */

.scoreBarRow{

    margin-bottom:10px;

}

.scoreBarHead{

    display:flex;

    justify-content:space-between;

    align-items:baseline;

    flex-wrap:wrap;

    gap:4px 12px;

    margin-bottom:6px;

    font-size:13px;

}

/* Hotfix #4: the "No data" label grew into a real, contextual reason
   ("Security — Security check not yet run") - noticeably longer than
   the old "(No data)" suffix. Lets it wrap onto its own line in the
   narrow detail panel instead of overflowing, while the score value
   on the right never wraps. */
.scoreBarHead span{

    flex:1 1 160px;

    min-width:0;

}

.scoreBarHead strong{

    flex:0 0 auto;

    white-space:nowrap;

}

.scoreBarTrack{

    height:8px;

    background:#efe6d4;

    border-radius:999px;

    overflow:hidden;

}

/* No real data - the track stays visibly empty (not the neutral-floor
   score rendered as if it were a real fill) and the row dims slightly
   so "no data" reads as absence, not as a low-but-real score. */
.scoreBarRow.noData .scoreBarHead{

    opacity:.55;

}

.scoreBarRow.noData .scoreBarTrack{

    background:#efe6d4;

}

.scoreBarFill{

    height:100%;

    background:#6b21c9;

    border-radius:999px;

}