/* ═══════════════════════════════════════════════════════
   AtlasMarket v1.0.7 — Fresh CSS
═══════════════════════════════════════════════════════ */

/* ── AtlasMarket maps to AtlasBase shared design system ── */
:root {
    --am-dark:       var(--ab-dark);
    --am-dark2:      var(--ab-dark2);
    --am-blue:       var(--ab-blue);
    --am-blue-h:     var(--ab-blue-hover);
    --am-light:      var(--ab-bg);
    --am-white:      var(--ab-white);
    --am-border:     var(--ab-border);
    --am-border-lt:  var(--ab-border-light);
    --am-muted:      var(--ab-text-muted);
    --am-muted2:     var(--ab-text-faint);
    --am-muted3:     var(--ab-text-ultra);
    --am-green:      var(--ab-green);
    --am-green-bg:   var(--ab-green-bg);
    --am-red:        var(--ab-red);
    --am-red-bg:     var(--ab-red-bg);
    --am-font:       var(--ab-font);
}
.am-wrap *{box-sizing:border-box}
.am-wrap{font-family:var(--am-font);color:var(--am-dark);background:var(--am-light);width:100%}
.am-wrap--boxed{max-width:1100px;margin:0 auto;border:1px solid var(--am-border)}
.am-wrap h1,.am-wrap h2,.am-wrap h3{margin:0;padding:0}
.am-wrap a{text-decoration:none}
.am-wrap button{font-family:var(--am-font);cursor:pointer}

/* Loading */
.am-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px 20px;font-size:14px;color:var(--am-muted);background:var(--am-white)}
.am-loading-spinner{width:20px;height:20px;border:2px solid var(--am-border);border-top-color:var(--am-blue);border-radius:50%;animation:am-spin .8s linear infinite;flex-shrink:0}
@keyframes am-spin{to{transform:rotate(360deg)}}
.am-error{text-align:center;padding:60px 20px;background:var(--am-white)}
.am-error-icon{font-size:32px;display:block;margin-bottom:12px}
.am-error p{color:var(--am-muted);margin-bottom:20px}
.am-btn{display:inline-block;background:var(--am-blue);color:#fff !important;padding:8px 18px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none !important;border:none}
.am-btn:hover{background:var(--am-blue-h)}

/* ═══ HEADER ═══ */
.am-header{background:var(--am-dark);display:flex;flex-direction:column}

/* Row 1 — Logo | Info | Price */
.am-header-info-row{display:flex;align-items:center;gap:18px;padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.am-logo-wrap{flex-shrink:0}
.am-logo{width:56px;height:56px;object-fit:contain;background:var(--am-white);padding:4px;display:block}
.am-logo-placeholder{width:56px;height:56px;background:var(--am-blue);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff}
.am-header-info{flex:1;min-width:0}
.am-header-left{display:none}
.am-header-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0;line-height:1.1}
.am-sym{font-size:28px;font-weight:700;color:#fff;letter-spacing:.04em;line-height:1}
.am-name{font-size:20px !important;color:#fff !important;font-weight:600 !important;margin:0 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px;line-height:1.1}
.am-industry{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;background:var(--am-blue);color:#fff;line-height:1;white-space:nowrap;align-self:center}
/* Legacy classes retained for backward compatibility (unused after v1.2.8 header redesign) */
.am-exchange{display:none}
.am-type-badge{display:none}
.am-sector{display:none}
.am-aff-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.am-aff-btn{display:inline-block;color:#fff !important;border:1px solid rgba(255,255,255,.25);padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;text-decoration:none !important;background:transparent;white-space:nowrap}
.am-aff-btn:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.am-header-right{text-align:right;flex-shrink:0}
.am-price{font-size:34px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1}
.am-change{font-size:14px;font-weight:600;margin-top:5px}
.am-change--up{color:#4ade80}
.am-change--down{color:#f87171}
.am-updated{font-size:10px;color:var(--am-muted);margin-top:5px}

/* Row 2 — Search + Refresh */
.am-header-search-row{display:flex !important;align-items:center;padding:10px 20px;gap:0;background:var(--am-dark)}
.am-search-input{width:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-right:none;color:#fff;padding:8px 14px;font-size:13px;font-family:var(--am-font);outline:none;height:36px}
.am-search-input:focus{border-color:var(--am-blue);background:rgba(255,255,255,.11)}
.am-search-input::placeholder{color:var(--am-muted)}
.am-search-btn{background:var(--am-blue);color:#fff;border:none;padding:0 16px;font-size:11px;font-weight:700;letter-spacing:.1em;height:36px;flex-shrink:0}
.am-search-btn:hover{background:var(--am-blue-h)}
.am-refresh-btn{background:transparent;color:var(--am-muted2);border:1px solid rgba(255,255,255,.15);padding:0 14px;font-size:11px;font-weight:700;height:36px;margin-left:8px;min-width:88px;text-align:center;flex-shrink:0}
.am-refresh-btn:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.am-spin-icon{display:inline-block}
.am-refresh-btn.am-refreshing .am-spin-icon{animation:am-spin .8s linear infinite}

/* Sponsor Bar */
.am-sponsor-bar{background:var(--am-white);border-bottom:1px solid var(--am-border-lt);display:flex;align-items:stretch}
.am-sponsor-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;font-weight:500;color:var(--am-muted3);letter-spacing:.06em;text-transform:uppercase;padding:4px 3px;flex-shrink:0}
.am-sponsor-inner{display:flex;align-items:center;gap:12px;padding:8px 14px;flex:1;text-decoration:none !important;color:var(--am-dark) !important}
.am-sponsor-text{font-size:12px;font-weight:500;flex:1}
.am-sponsor-cta{background:var(--am-blue);color:#fff;font-size:9px;font-weight:700;letter-spacing:.1em;padding:5px 10px;text-transform:uppercase;flex-shrink:0}

/* Chart */
.am-chart-wrap{background:var(--am-white)}
.am-chart-tabs{display:flex;background:var(--am-dark2)}
.am-chart-tab{padding:8px 16px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--am-muted2);background:none;border:none;cursor:pointer;text-transform:uppercase}
.am-chart-tab:hover{color:#fff}
.am-chart-tab--active{color:#fff;background:var(--am-blue)}
.am-chart-frame{height:400px}
.am-chart-frame iframe{width:100%;height:100%;border:none;display:block}

/* Stats Grid */
.am-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--am-border-lt);border:1px solid var(--am-border-lt);margin-top:16px}
.am-stat{background:var(--am-white);padding:14px 16px}
.am-stat-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--am-muted2);margin-bottom:6px}
.am-stat-value{font-size:15px;font-weight:600;color:var(--am-dark)}
.am-stat-value--up{color:var(--am-green)}
.am-stat-value--down{color:var(--am-red)}

/* Bottom Grids */
.am-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:stretch}

/* Panels */
.am-panel{background:var(--am-white);border:1px solid var(--am-border-lt)}
.am-panel-hd{background:var(--am-dark2);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-bottom:2px solid var(--am-blue)}
.am-panel-body{padding:0}

/* Stat rows */
.am-stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--am-border-lt);font-size:13px}
.am-stat-row:last-child{border-bottom:none}
.am-stat-row-label{color:var(--am-muted);font-weight:500}
.am-stat-row-value{font-weight:600;color:var(--am-dark)}
.am-stat-row-value--up{color:var(--am-green)}
.am-stat-row-value--down{color:var(--am-red)}

/* Performance bars */
.am-perf-row{padding:10px 16px;border-bottom:1px solid var(--am-border-lt)}
.am-perf-row:last-child{border-bottom:none}
.am-perf-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.am-perf-label span:first-child{color:var(--am-muted);font-weight:500}
.am-perf-label span:last-child{font-weight:700}
.am-perf-bar-bg{background:var(--am-border-lt);height:5px;position:relative}
.am-perf-bar{height:5px;position:absolute;top:0}
.am-perf-bar--up{background:var(--am-green);left:50%}
.am-perf-bar--down{background:var(--am-red);right:50%}
.am-perf-center{position:absolute;left:50%;top:-3px;width:1px;height:11px;background:var(--am-border)}

/* About */
.am-desc{font-size:13px;color:var(--am-muted);line-height:1.7;margin:0;padding:14px 16px}
.am-link{display:block;font-size:12px;color:var(--am-blue);font-weight:600;padding:0 16px 14px}
.am-link:hover{text-decoration:underline}

/* Table */
.am-table{width:100%;border-collapse:collapse;font-size:13px}
.am-table th{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--am-muted2);padding:10px 16px 8px;text-align:left;border-bottom:1px solid var(--am-border-lt)}
.am-table th:last-child{text-align:right}
.am-table td{padding:9px 16px;border-bottom:1px solid var(--am-border-lt);color:var(--am-dark)}
.am-table td:last-child{text-align:right;font-weight:600}
.am-table tbody tr:last-child td{border-bottom:none}

/* News */
.am-news-list{padding:0}
.am-news-item{display:block;padding:12px 16px;border-bottom:1px solid var(--am-border-lt);text-decoration:none !important}
.am-news-item:last-child{border-bottom:none}
.am-news-item:hover .am-news-headline{color:var(--am-blue)}
.am-news-headline{font-size:13px;font-weight:600;color:var(--am-dark);line-height:1.4;margin-bottom:4px;transition:color .15s}
.am-news-meta{font-size:11px;color:var(--am-muted2);display:flex;gap:10px}

/* Crypto supply */
.am-crypto-supply{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--am-border-lt)}
.am-supply-item{background:var(--am-white);padding:10px 16px}
.am-supply-label{font-size:10px;color:var(--am-muted2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.am-supply-value{font-size:13px;font-weight:600}

/* Mobile */
@media(max-width:768px){
    .am-header-info-row{padding:14px;flex-wrap:wrap;gap:12px}
    .am-header-search-row{padding:8px 14px}
    .am-search-input{max-width:none;flex:1}
    .am-price{font-size:26px}
    .am-sym{font-size:22px}
    .am-name{font-size:16px !important;max-width:none}
    .am-logo,.am-logo-placeholder{width:48px;height:48px}
    .am-logo-placeholder{font-size:18px}
    .am-stats-grid{grid-template-columns:repeat(2,1fr)}
    .am-bottom-grid{grid-template-columns:1fr}
    .am-chart-frame{height:300px}
    .am-chart-tab{padding:8px 10px;font-size:10px}
    .am-header-left{flex-wrap:wrap}
    .am-name{white-space:normal}
}

/* ─── Affiliate Banners (AtlasWatch style) ─── */
.am-aff-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #1f2024;
    border-top: 1px solid #343a40;
    text-decoration: none !important;
}
.am-aff-banner:hover { background: #343a40; }
.am-aff-banner-text {
    font-size: 11px;
    color: #a0a1ad;
    line-height: 1.4;
    flex: 1;
}
.am-aff-banner-cta {
    background: #1a3a5c;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Standalone Affiliate Slot Buttons (steel blue, AtlasWatch style) ─── */
.am-aff-slot-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a3a5c;
    color: #ffffff !important;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    width: 100%;
    border: none;
    transition: background 0.15s;
}
.am-aff-slot-btn:hover { background: #0f2744; color: #ffffff !important; }
.am-aff-slot-arrow { font-size: 16px; font-weight: 400; opacity: 0.7; }


/* ─── Two-column layout — fixed 400px height ─── */
.am-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.am-col-left {
    display: flex;
    flex-direction: column;
    height: 400px;
    overflow: hidden;
}
.am-col-left .am-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.am-col-left .am-panel-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.am-col-right {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    height: 400px;
}
.am-col-right .am-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.am-col-right .am-panel-body,
.am-col-right .am-news-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ─── Affiliate slot button — right column width ─── */
.am-aff-slot-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a3a5c;
    color: #ffffff !important;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    flex-shrink: 0;
    height: 40px;
    transition: background 0.15s;
}
.am-aff-slot-btn:hover { background: #0f2744; color: #ffffff !important; }
.am-aff-slot-arrow { font-size: 16px; font-weight: 400; opacity: 0.7; }

/* Mobile */
@media(max-width:768px) {
    .am-two-col { grid-template-columns: 1fr; height: auto; }
    .am-col-left .am-panel-body,
    .am-col-right .am-panel-body,
    .am-col-right .am-news-list { height: 300px; }
}