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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: #0F1117;
    color: #E5E7EB;
    line-height: 1.5;
    min-height: 100vh;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

header {
    background: #1A1F2E;
    border-bottom: 1px solid #2A2F3E;
    padding: 20px 0;
    margin-bottom: 32px;
}

header h1 {
    font-size: 22px;
    font-weight: 500;
    color: #F9FAFB;
}

.tagline {
    font-size: 13px;
    color: #9CA3AF;
    margin-top: 2px;
}

.market-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.stat {
    background: #1A1F2E;
    border-radius: 8px;
    padding: 14px 18px;
    border: 1px solid #2A2F3E;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: #9CA3AF;
    margin-bottom: 4px;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #F9FAFB;
}

.scanner h2 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
}

.scanner-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.scanner-head-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.scanner-search-input {
    background: #0F1117;
    color: #E5E7EB;
    border: 1px solid #2A2F3E;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-family: inherit;
    min-width: 200px;
}

.scanner-search-input::placeholder { color: #6B7280; }

.scanner-search-input:focus {
    outline: none;
    border-color: #3B82F6;
}

.scanner-top-toggle {
    display: inline-flex;
    background: #161925;
    border: 1px solid #2A2F3E;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.scanner-top-btn {
    background: transparent;
    color: #9CA3AF;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s ease, color 0.1s ease;
}

.scanner-top-btn:hover { color: #E5E7EB; }

.scanner-top-btn.active {
    background: #2563EB;
    color: #fff;
}

.santi-counter {
    margin-top: 16px;
    padding: 12px 14px;
    background: #161925;
    border: 1px solid #2A2F3E;
    border-radius: 6px;
    font-size: 13px;
}

.santi-counter-line {
    margin: 4px 0 0;
    color: #E5E7EB;
}

.santi-counter-list {
    list-style: none;
    padding: 8px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.santi-counter-list li {
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

.muted {
    font-size: 13px;
    color: #9CA3AF;
    margin-bottom: 16px;
}

.placeholder {
    background: #1A1F2E;
    border: 1px dashed #3A3F4E;
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    color: #6B7280;
}

.coin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 13px;
}

.coin-table thead {
    background: #1A1F2E;
}

.coin-table th {
    text-align: left;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #9CA3AF;
    border-bottom: 1px solid #2A2F3E;
}

.coin-table th.num,
.coin-table td.num {
    text-align: right;
}

.coin-table tbody tr {
    border-bottom: 1px solid #1F2330;
}

.coin-table tbody tr:hover {
    background: #161A24;
}

.coin-table td {
    padding: 12px 14px;
}

.coin-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.coin-cell img {
    border-radius: 50%;
}

.coin-name {
    font-weight: 500;
    color: #F9FAFB;
}

.coin-symbol {
    color: #9CA3AF;
    font-size: 12px;
}

.pos {
    color: #10B981;
}

.neg {
    color: #EF4444;
}

.score-badge {
    display: inline-block;
    min-width: 40px;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
}

.score-strong-buy {
    background: #064E3B;
    color: #6EE7B7;
}

.score-buy {
    background: #1E3A2E;
    color: #86EFAC;
}

.score-neutral {
    background: #1F2937;
    color: #9CA3AF;
}

.score-caution {
    background: #3F2E1A;
    color: #FCD34D;
}

.score-avoid {
    background: #3F1D1D;
    color: #FCA5A5;
}

.subscore {
    color: #9CA3AF;
    font-size: 12px;
}

/* Clickable rows on the scanner list */
.coin-row {
    cursor: pointer;
}

.coin-name-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.coin-name-link:hover .coin-name {
    color: #60A5FA;
}

/* Coin detail page */
.back-link {
    color: #9CA3AF;
    text-decoration: none;
}

.back-link:hover {
    color: #E5E7EB;
}

.coin-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.coin-header img {
    border-radius: 50%;
}

.coin-header-meta {
    flex: 1;
}

.coin-header-meta h2 {
    font-size: 22px;
    font-weight: 500;
    color: #F9FAFB;
}

.coin-header-meta h2 .coin-symbol {
    font-size: 14px;
    margin-left: 6px;
}

.coin-header-score {
    text-align: right;
}

.score-badge-lg {
    font-size: 22px;
    min-width: 64px;
    padding: 8px 14px;
    border-radius: 8px;
}

.category-card {
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 18px;
}

.category-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.category-head h3 {
    font-size: 16px;
    font-weight: 500;
    color: #F9FAFB;
}

.metric-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.metric-table td {
    padding: 10px 0;
    border-bottom: 1px solid #1F2330;
    vertical-align: top;
}

.metric-table tr:last-child td {
    border-bottom: none;
}

.metric-label {
    color: #E5E7EB;
    width: 180px;
}

.metric-value {
    color: #F9FAFB;
    font-variant-numeric: tabular-nums;
    width: 120px;
}

.metric-score {
    color: #9CA3AF;
    width: 60px;
    font-variant-numeric: tabular-nums;
}

.metric-note {
    color: #9CA3AF;
}

.metric-na {
    opacity: 0.5;
}

/* Metric definition tooltip — (?) icon next to a metric label */
.metric-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: #2A2F3E;
    color: #9CA3AF;
    font-size: 10px;
    font-weight: 600;
    cursor: help;
    user-select: none;
    position: relative;
    vertical-align: middle;
}

.metric-tip:hover,
.metric-tip:focus {
    background: #374151;
    color: #E5E7EB;
    outline: none;
}

.metric-tip::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    transform: translateX(-20%);
    background: #0F1117;
    color: #E5E7EB;
    border: 1px solid #2A2F3E;
    border-radius: 6px;
    padding: 10px 12px;
    width: 260px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 20;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    text-align: left;
    white-space: normal;
}

.metric-tip:hover::after,
.metric-tip:focus::after,
.metric-tip.show::after {
    opacity: 1;
}

/* Narrative tags */
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #242A3A;
    border: 1px solid #2F3647;
    color: #B9C2D1;
    font-size: 11px;
    font-weight: 500;
}

/* Bucket label (verbal) */
.bucket-label {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.bucket-strong-buy {
    color: #6EE7B7;
}

.bucket-buy {
    color: #86EFAC;
}

.bucket-neutral {
    color: #9CA3AF;
}

.bucket-caution {
    color: #FCD34D;
}

.bucket-avoid {
    color: #FCA5A5;
}

/* Composite summary line */
.summary-line {
    background: #161A24;
    border-left: 3px solid #3A4F6F;
    padding: 12px 16px;
    margin: 0 0 20px 0;
    color: #E5E7EB;
    font-size: 14px;
    border-radius: 4px;
}

/* Top nav */
.main-nav {
    margin-top: 12px;
    display: flex;
    gap: 20px;
}

.main-nav a {
    color: #9CA3AF;
    text-decoration: none;
    font-size: 13px;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}

.main-nav a:hover {
    color: #E5E7EB;
}

.main-nav a.active {
    color: #F9FAFB;
    border-bottom-color: #60A5FA;
}

/* Heatmap page */
.heat-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: #161A24;
    border: 1px solid #2A2F3E;
    border-radius: 8px;
    padding: 4px;
    width: fit-content;
}

.heat-toggle a {
    padding: 6px 14px;
    border-radius: 6px;
    color: #9CA3AF;
    text-decoration: none;
    font-size: 13px;
}

.heat-toggle a:hover {
    color: #E5E7EB;
}

.heat-toggle a.active {
    background: #2A3147;
    color: #F9FAFB;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.heat-tile {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s ease;
    position: relative;
    overflow: hidden;
}

.heat-tile:hover {
    transform: translateY(-2px);
}

.heat-symbol {
    font-size: 15px;
    font-weight: 600;
    color: #F9FAFB;
    letter-spacing: 0.02em;
}

.heat-value {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.heat-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    padding: 1px 6px;
    min-width: 0;
}

/* Heat colors — red to green, 7 steps */
.heat-neg-3 {
    background: #7F1D1D;
}

.heat-neg-2 {
    background: #991B1B;
}

.heat-neg-1 {
    background: #7A3333;
}

.heat-neutral {
    background: #374151;
}

.heat-pos-1 {
    background: #2F5A44;
}

.heat-pos-2 {
    background: #15803D;
}

.heat-pos-3 {
    background: #065F46;
}

/* Macro landscape page */
.macro-context {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: #161A24;
    border: 1px solid #2A2F3E;
    border-radius: 8px;
}

.macro-context-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.macro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.macro-tile {
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.macro-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.macro-tile-name {
    font-size: 14px;
    font-weight: 600;
    color: #F9FAFB;
}

.macro-tile-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.macro-tile-price {
    font-size: 22px;
    font-weight: 500;
    color: #F9FAFB;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.macro-tile-change {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.macro-fineprint {
    margin-top: 18px;
    font-size: 12px;
}

/* Auth pages (login, verify, account) */
.auth-card {
    max-width: 400px;
    margin: 32px auto;
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 12px;
    padding: 28px 32px;
}

.auth-card h2 {
    font-size: 20px;
    font-weight: 500;
    color: #F9FAFB;
    margin-bottom: 8px;
}

.auth-card .muted {
    margin-bottom: 20px;
}

.auth-card label {
    display: block;
    font-size: 12px;
    color: #9CA3AF;
    margin-bottom: 6px;
    margin-top: 16px;
}

.auth-card input {
    width: 100%;
    padding: 10px 12px;
    background: #0F1117;
    border: 1px solid #2A2F3E;
    border-radius: 6px;
    color: #F9FAFB;
    font-size: 14px;
    font-family: inherit;
}

.auth-card input:focus {
    outline: none;
    border-color: #60A5FA;
}

.auth-card button {
    width: 100%;
    margin-top: 20px;
    padding: 10px 16px;
    background: #2563EB;
    color: #F9FAFB;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.auth-card button:hover {
    background: #1D4ED8;
}

.auth-card button.btn-secondary {
    background: #2A2F3E;
    margin-top: 16px;
}

.auth-card button.btn-secondary:hover {
    background: #374151;
}

.auth-error {
    background: #3F1D1D;
    color: #FCA5A5;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 12px;
}

.auth-fineprint {
    margin-top: 20px;
    font-size: 12px;
}

.auth-fineprint a {
    color: #60A5FA;
    text-decoration: none;
}

.auth-success {
    background: #1E3A2E;
    color: #86EFAC;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 16px;
}

/* Branded header link */
.brand-link {
    color: inherit;
    text-decoration: none;
}

/* Landing page */
.hero {
    padding: 64px 0 48px;
    text-align: center;
}

.hero-title {
    font-size: 44px;
    font-weight: 600;
    color: #F9FAFB;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.hero-sub {
    font-size: 17px;
    color: #B9C2D1;
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.55;
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    background: #2563EB;
    color: #F9FAFB;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.1s;
}

.cta-button:hover {
    background: #1D4ED8;
}

.hero-fineprint {
    margin-top: 12px;
    font-size: 12px;
}

.preview {
    max-width: 640px;
    margin: 40px auto 60px;
    text-align: center;
}

.preview-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.preview-tile {
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.preview-tile img {
    border-radius: 50%;
}

.preview-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.preview-name {
    font-size: 13px;
    font-weight: 500;
    color: #F9FAFB;
}

.preview-symbol {
    font-size: 11px;
    color: #9CA3AF;
}

.preview-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.preview-footer {
    margin-top: 16px;
    font-size: 12px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 60px 0;
}

.feature {
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 10px;
    padding: 20px 22px;
}

.feature h3 {
    font-size: 15px;
    font-weight: 500;
    color: #F9FAFB;
    margin-bottom: 8px;
}

.feature .muted {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Upgrade / paywall */
/* Watchlist star button */
.star-form {
    display: inline-block;
    margin: 0;
}

.star-btn {
    background: transparent;
    border: none;
    padding: 4px 8px;
    font-size: 16px;
    color: #4B5563;
    cursor: pointer;
    transition: color 0.1s ease, transform 0.1s ease;
    font-family: inherit;
}

.star-btn:hover {
    color: #9CA3AF;
    transform: scale(1.1);
}

.star-btn.star-on {
    color: #FCD34D;
}

.star-btn.star-on:hover {
    color: #FBBF24;
}

.star-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.star-cell {
    width: 36px;
    padding-left: 6px !important;
    padding-right: 0 !important;
}

.coin-header-star {
    margin-top: 10px;
    font-size: 20px;
}

.coin-header-star .star-btn {
    font-size: 22px;
    padding: 6px 10px;
}

/* Weights settings */
.weights-card {
    max-width: 480px;
}

.weights-row {
    display: grid;
    grid-template-columns: 130px 1fr 24px;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.weights-row label {
    margin: 0;
    color: #E5E7EB;
    font-size: 14px;
}

.weights-row input {
    margin: 0;
    padding: 8px 10px;
    text-align: right;
}

.weights-unit {
    color: #9CA3AF;
    font-size: 13px;
}

.weights-total {
    margin-top: 16px;
    font-size: 13px;
    text-align: right;
}

.weights-reset-form {
    margin-top: 8px;
}

/* About / how-it-works */
.about-page {
    max-width: 760px;
    padding-bottom: 60px;
}

.about-intro {
    margin-bottom: 40px;
}

.about-intro h2 {
    font-size: 28px;
    font-weight: 600;
    color: #F9FAFB;
    margin-bottom: 12px;
}

.about-intro .muted {
    font-size: 15px;
    line-height: 1.6;
}

.about-section {
    margin-bottom: 40px;
}

.about-section h3 {
    font-size: 18px;
    font-weight: 500;
    color: #F9FAFB;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2A2F3E;
}

.about-section > p {
    margin-bottom: 14px;
    color: #E5E7EB;
    font-size: 14px;
    line-height: 1.6;
}

.about-card {
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.about-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: #F9FAFB;
    margin-bottom: 8px;
}

.about-card p {
    font-size: 13px;
    line-height: 1.55;
    color: #E5E7EB;
    margin-bottom: 6px;
}

.about-card p.muted {
    color: #9CA3AF;
    margin-bottom: 0;
}

.about-bucket-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #E5E7EB;
}

.about-bucket-row .score-badge {
    flex-shrink: 0;
}

.about-disclaimer {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px 14px;
    background: #161A24;
    border-left: 3px solid #3A4F6F;
    border-radius: 4px;
}

.about-list {
    margin: 8px 0 0 20px;
    color: #E5E7EB;
    font-size: 13px;
    line-height: 1.7;
}

.cta-inline {
    display: inline-block;
    color: #60A5FA;
    text-decoration: none;
    font-weight: 500;
    margin-top: 8px;
}

.cta-inline:hover {
    color: #93C5FD;
}

/* Guide page (typography-forward explainer) */
.guide-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 720px);
    gap: 56px;
    padding-bottom: 80px;
}

.guide-toc {
    position: sticky;
    top: 24px;
    align-self: start;
    font-size: 13px;
}

.guide-toc-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6B7280;
    margin-bottom: 10px;
}

.guide-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-toc li {
    margin-bottom: 8px;
}

.guide-toc a {
    color: #9CA3AF;
    text-decoration: none;
    line-height: 1.4;
}

.guide-toc a:hover {
    color: #E5E7EB;
}

.guide-content {
    line-height: 1.7;
    color: #D1D5DB;
}

.guide-content p {
    margin-bottom: 16px;
    font-size: 15px;
}

.guide-content strong {
    color: #F9FAFB;
}

.guide-content em {
    color: #B9C2D1;
    font-style: italic;
}

.guide-content a {
    color: #60A5FA;
    text-decoration: none;
}

.guide-content a:hover {
    color: #93C5FD;
}

.guide-h1 {
    font-size: 32px;
    font-weight: 600;
    color: #F9FAFB;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
}

.guide-h2 {
    font-size: 22px;
    font-weight: 600;
    color: #F9FAFB;
    margin-top: 16px;
    margin-bottom: 16px;
}

.guide-h3 {
    font-size: 16px;
    font-weight: 600;
    color: #F9FAFB;
    margin-top: 24px;
    margin-bottom: 10px;
}

.guide-divider {
    border: none;
    border-top: 1px solid #2A2F3E;
    margin: 40px 0;
}

.guide-bucket-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
}

.guide-bucket-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 14px;
}

.guide-bucket-list .score-badge {
    flex-shrink: 0;
}

.guide-bucket-list .confidence-dot {
    width: 14px;
    height: 14px;
    margin-left: 0;
    margin-right: 4px;
    cursor: default;
    flex-shrink: 0;
}

.guide-list {
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.guide-list li {
    margin-bottom: 12px;
    font-size: 15px;
}

/* Subtle colored accent per category — left border on the section */
.guide-cat {
    padding-left: 14px;
    border-left: 3px solid #2A2F3E;
    margin-bottom: 28px;
}

.cat-technical { border-left-color: #60A5FA; }
.cat-on-chain { border-left-color: #34D399; }
.cat-fundamentals { border-left-color: #A78BFA; }
.cat-sentiment { border-left-color: #FBBF24; }
.cat-macro { border-left-color: #F87171; }

.guide-cat .guide-h3 {
    margin-top: 0;
}

/* FAQ Q/A styling */
.faq-q {
    color: #F9FAFB;
    font-weight: 600;
    margin-top: 22px;
    margin-bottom: 6px;
}

/* Bottom CTA card */
.guide-cta {
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 12px;
    padding: 28px 32px;
    text-align: center;
    margin-top: 24px;
}

.guide-cta .guide-h2 {
    margin-top: 0;
}

.guide-cta p {
    margin-bottom: 20px;
    color: #B9C2D1;
}

.guide-cta .cta-button {
    margin-top: 0;
}

@media (max-width: 880px) {
    .guide-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .guide-toc {
        display: none;
    }
}

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

.account-links a {
    color: #60A5FA;
    text-decoration: none;
}

.account-weights-btn {
    display: inline-block;
    margin: 16px 0 8px;
    padding: 10px 18px;
    background: #2563EB;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.1s ease;
}

.account-weights-btn:hover {
    background: #1D4ED8;
}

/* Checkbox / radio rows used in auth, account, unsubscribe */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px !important;
    font-size: 13px;
    color: #E5E7EB;
}

.checkbox-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.briefing-toggle-form {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #2A2F3E;
}

.briefing-dev-tools {
    margin-top: 20px;
    padding: 14px 16px;
    background: #161A24;
    border: 1px dashed #2F3647;
    border-radius: 8px;
}

.briefing-dev-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px !important;
}

.briefing-send-form {
    margin-top: 12px;
}

.unsub-reason-prompt {
    margin-top: 18px;
    font-size: 13px;
}

.unsub-reason-form {
    margin-top: 8px;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: #E5E7EB;
}

.radio-row input[type="radio"] {
    width: auto;
    margin: 0;
}

.upgrade-card .btn-disabled {
    width: 100%;
    padding: 10px 16px;
    background: #2A2F3E;
    color: #6B7280;
    border: 1px dashed #3F4656;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: not-allowed;
    font-family: inherit;
    margin-top: 16px;
    margin-bottom: 24px;
}

/* Data-confidence indicator — small colored dot shown next to a composite
   score on the scanner and inside the drill-down confidence badge. */
.confidence-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    cursor: help;
    outline: none;
}

.confidence-full    { background: #10B981; }  /* green */
.confidence-partial { background: #F59E0B; }  /* amber */
.confidence-limited { background: #6B7280; }  /* gray  */

.confidence-dot::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0F1117;
    color: #E5E7EB;
    border: 1px solid #2A2F3E;
    border-radius: 6px;
    padding: 8px 10px;
    width: 220px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 20;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    text-align: left;
    white-space: normal;
}

.confidence-dot:hover::after,
.confidence-dot:focus::after {
    opacity: 1;
}

/* Drill-down badge — sits just below the coin header, above the summary */
.confidence-badge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 10px 14px;
    background: #161925;
    border: 1px solid #2A2F3E;
    border-left: 3px solid #2A2F3E;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}

.confidence-badge.confidence-full    { border-left-color: #10B981; }
.confidence-badge.confidence-partial { border-left-color: #F59E0B; }
.confidence-badge.confidence-limited { border-left-color: #6B7280; }

.confidence-badge .confidence-dot {
    margin-top: 6px;
    margin-left: 0;
    cursor: default;
}

.confidence-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.confidence-line {
    color: #D1D5DB;
}

.confidence-line.muted {
    color: #9CA3AF;
}

.confidence-warning {
    color: #F59E0B;
    font-weight: 500;
}

/* 30-day composite score sparkline on the coin drill-down */
.sparkline-box {
    margin: 8px 0 16px;
    padding: 0;
}

.sparkline-svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.sparkline-caption {
    margin: 4px 0 0;
    font-size: 12px;
}

.sparkline-note {
    margin: 8px 0 16px;
    font-size: 12px;
    font-style: italic;
}

/* "Biggest score movers in the last 24h" — two columns between the stat
   bar and the scanner table. Matches .stat card styling. */
.movers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.movers-col {
    background: #1A1F2E;
    border-radius: 8px;
    padding: 14px 18px;
    border: 1px solid #2A2F3E;
}

.movers-title {
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}

.movers-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.movers-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    color: #E5E7EB;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.1s ease;
}

.movers-row:hover {
    background: #232838;
}

.movers-row img {
    border-radius: 50%;
    flex-shrink: 0;
}

.movers-sym {
    font-weight: 600;
    color: #F9FAFB;
    min-width: 44px;
}

.movers-score {
    color: #9CA3AF;
    font-variant-numeric: tabular-nums;
}

.movers-delta {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.movers-delta.pos { color: #10B981; }
.movers-delta.neg { color: #EF4444; }

.movers-empty {
    margin: 0;
    font-size: 13px;
}

@media (max-width: 720px) {
    .movers { grid-template-columns: 1fr; }
}

/* ───────── /devs page ───────── */
.devs-header h2 {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 4px;
}

.devs-header p {
    margin: 0 0 24px;
    max-width: 720px;
    line-height: 1.55;
}

.devs-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.devs-card {
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 8px;
    padding: 14px 18px;
    border-top: 3px solid #2A2F3E;
}

.devs-card-rising  { border-top-color: #10B981; }
.devs-card-leaders { border-top-color: #3B82F6; }
.devs-card-fading  { border-top-color: #EF4444; }

.devs-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 4px;
}

.devs-card-sub {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
}

.devs-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.devs-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    color: #E5E7EB;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.1s ease;
}

.devs-card-row:hover { background: #232838; }
.devs-card-row img   { border-radius: 50%; flex-shrink: 0; }

.devs-card-name {
    font-weight: 500;
    color: #F9FAFB;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.devs-card-stat,
.devs-card-delta {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 500;
}

.devs-card-delta.pos { color: #10B981; }
.devs-card-delta.neg { color: #EF4444; }

.devs-card-empty { font-size: 12px; font-style: italic; margin: 8px 0 0; }

/* Filter bar */
.devs-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #161925;
    border: 1px solid #2A2F3E;
    border-radius: 8px;
}

.devs-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.devs-filter-group label {
    font-size: 11px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.devs-filter-group select,
.devs-filter-group input[type="text"] {
    background: #0F1117;
    color: #E5E7EB;
    border: 1px solid #2A2F3E;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
}

.devs-filter-search input { min-width: 180px; }

.devs-filter-apply {
    background: #2563EB;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    height: 32px;
}

.devs-filter-apply:hover { background: #1D4ED8; }

/* Main table */
.devs-table-wrap {
    overflow-x: auto;
}

.devs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #1A1F2E;
    border: 1px solid #2A2F3E;
    border-radius: 8px;
    overflow: hidden;
}

.devs-table th,
.devs-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #2A2F3E;
    vertical-align: middle;
}

.devs-table th {
    font-size: 11px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #161925;
}

.devs-table td.num,
.devs-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.devs-row { cursor: pointer; }
.devs-row:hover { background: #232838; }

.devs-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.devs-sort:hover { color: #E5E7EB; }

.devs-sort-active { color: #E5E7EB; }
.devs-sort-arrow { font-size: 10px; }

.devs-sparkline {
    display: block;
}

/* Coin cell on the devs table. Scoped flex wrapper lives inside the <td>
   instead of on the <td> itself — that way vertical-align: middle on the
   cell works for every other numeric column. */
.dev-coin {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dev-coin img {
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .devs-cards { grid-template-columns: 1fr; }
}