.cm-coin-detail { 
    --bg-surface: hsl(0 0 7 / 50%);
    --bg-elevated: hsl(0 0 7 / 50%);
    --bg-subtle: hsl(0 0 7 / 50%);
    
    --color-positive: var(--green);
    --color-negative: var(--red);

    width: 100%;
    color: var(--text-primary);
}

[data-theme="light"] .cm-coin-detail { 
    --bg-surface: #E0E2DE;
    --bg-elevated: #E0E2DE;
    --bg-subtle: #E0E2DE;
}

.cm-coin-detail__header { display: flex; align-items: center; gap: var(--gap-16); margin-bottom: 2.4rem; flex-wrap: wrap; }
.cm-coin-detail__logo { width: 4.8rem; height: 4.8rem; border-radius: 50%; object-fit: cover; }
.cm-coin-detail__id-group h1 { font-size: var(--font-size-32); font-weight: 700; margin: 0; line-height: 1.2; display: inline-block; color: var(--text-primary); }
.cm-coin-detail__symbol { font-size: var(--font-size-16); font-weight: 500; color: var(--text-secondary); margin-left: var(--gap-8); }
.cm-coin-detail__rank { font-size: var(--font-size-12); font-weight: 600; color: var(--text-secondary); background: var(--bg-subtle); padding: 0.2rem 0.6rem; border-radius: 0.4rem; margin-left: var(--gap-8); vertical-align: middle; }

.cm-coin-detail__price-container { margin-bottom: var(--gap-32); display: flex; align-items: center; gap: 1.2rem; }
.cm-coin-detail__price { font-size: var(--font-size-32); font-weight: 700; color: var(--text-primary); }
.cm-coin-detail__change { font-size: var(--font-size-14); font-weight: 600; color: var(--text-inverse); padding: var(--gap-4) var(--gap-8); border-radius: 0.6rem; display: inline-flex; align-items: center; gap: var(--gap-4); }
.cm-coin-detail__change.positive { background: var(--color-positive); }
.cm-coin-detail__change.negative { background: var(--color-negative); }

.cm-coin-detail__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-16); margin-bottom: 2.4rem; }
.cm-coin-detail__stat-card { background: var(--bg-elevated); border-radius: 0.8rem; padding: 2rem; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.cm-coin-detail__stat-card.full-width { grid-column: span 2; }
.cm-coin-detail__stat-title { font-size: var(--font-size-12); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--gap-8); display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.cm-coin-detail__stat-value { font-size: var(--font-size-18); font-weight: 700; color: var(--text-primary); }

.cm-coin-detail__tags { margin-bottom: var(--gap-32); font-size: var(--font-size-14); color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-8); }
.cm-coin-detail__tags-label { font-weight: 700; color: var(--text-tertiary); }
.cm-coin-detail__tag { color: var(--text-secondary); background: var(--bg-subtle); padding: var(--gap-4) var(--gap-8); border-radius: 0.4rem; font-size: var(--font-size-12); font-weight: 500; }
.cm-coin-detail__tag:hover { background: var(--bg-elevated); color: var(--text-primary); }

.cm-coin-detail__about { margin-top: 2.4rem; }
.cm-coin-detail__about-header { font-size: var(--font-size-16); font-weight: 700; margin-bottom: var(--gap-16); display: inline-flex; align-items: center; gap: var(--gap-8); background: var(--bg-subtle); padding: var(--gap-8) var(--gap-16); border-radius: 0.8rem; color: var(--text-primary); }
.cm-coin-detail__about-header i { color: var(--text-secondary); }
.cm-coin-detail__description { line-height: 1.6; color: var(--text-primary); }

@media (max-width: 768px) {
    .cm-coin-detail__stats { grid-template-columns: 1fr; }
    .cm-coin-detail__stat-card.full-width { grid-column: span 1; }
}