/* ===== VARIABLES Y RESET ===== */
:root {
    --primary: #00f2ff;
    --accent: #00f2ff;
    --background-base: #020617;
    --surface-card: #0f172a;
    --surface-highlight: #1e293b;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;
    --green-400: #4ade80;
    --red-400: #f87171;
    --yellow-400: #facc15;
}

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

/* ===== BODY Y CONTENEDOR PRINCIPAL ===== */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-base);
    color: var(--slate-300);
    /*min-height: max(884px, 100dvh);*/
    min-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
}

body.no-scroll {
    overflow: hidden !important;
}

.app-container {
    width: 100%;
    max-width: 28rem;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background-base);
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border-left: 1px solid var(--slate-900);
    border-right: 1px solid var(--slate-900);
}

/* ===== HEADER ===== */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(2, 6, 23, 0.8);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(0, 242, 255, 0.2);
    padding-top: env(safe-area-inset-top, 0px);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
}

.header-title .material-symbols-outlined {
    font-size: 1.5rem;
    font-weight: 700;
}

.header-title h1 {
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: white;
}

.settings-btn {
    background: none;
    border: none;
    color: var(--slate-400);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 150ms;
}

.settings-btn:hover {
    color: var(--primary);
}

.settings-btn.active {
    color: var(--red-400);
}

.settings-btn .material-symbols-outlined {
    font-variation-settings: 'FILL' 0;
}

.settings-btn.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* ===== BANNER DE TICKERS ===== */
.ticker-banner {
    border-top: 1px solid var(--slate-900);
    border-bottom: 1px solid var(--slate-900);
    background-color: rgba(2, 6, 23, 0.5);
    padding: 0.375rem 0;
    overflow: hidden;
}

.banner-scroll {
    display: flex;
    overflow-x: auto;
    padding: 0 1rem;
    gap: 1.5rem;
    align-items: center;
}

/* Ocultar scrollbar */
.banner-scroll::-webkit-scrollbar {
    display: none;
}

.banner-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ===== MAIN CONTENT ===== */
.app-main {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 1.5rem;
}

/* Scrollbar personalizado fino */
.app-main::-webkit-scrollbar {
    width: 6px;
}

.app-main::-webkit-scrollbar-track {
    background: var(--slate-950);
}

.app-main::-webkit-scrollbar-thumb {
    background: var(--slate-800);
    border-radius: 3px;
}

.app-main::-webkit-scrollbar-thumb:hover {
    background: var(--slate-600);
}

/* Para Firefox */
.app-main {
    scrollbar-width: thin;
    scrollbar-color: var(--slate-800) var(--slate-950);
}

/* ===== BOTÓN SCROLL TO TOP ===== */
.scroll-to-top-btn {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--primary);
    border: none;
    color: var(--background-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    box-shadow: 0 10px 25px rgba(0, 242, 255, 0.3);
    transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 28rem;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.scroll-to-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.scroll-to-top-btn:hover {
    background-color: #00d4e0;
    box-shadow: 0 15px 30px rgba(0, 242, 255, 0.4);
}

.scroll-to-top-btn .material-symbols-outlined {
    font-size: 1rem;
    font-weight: 700;
}

/* ===== SECCIÓN DE BÚSQUEDA ===== */
.search-section {
    padding: 1rem;
    background-color: rgba(2, 6, 23, 0.3);
}

.search-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-left: 0.25rem;
}

.search-input-group {
    display: flex;
    align-items: center;
    height: 3rem;
    gap: 0.5rem;
}

.input-wrapper {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: var(--slate-900);
    border: 1px solid var(--slate-800);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: border-color 150ms;
}

.input-wrapper:focus-within {
    border-color: rgba(0, 242, 255, 0.5);
}

.ticker-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.ticker-input::placeholder {
    color: var(--slate-600);
}

.add-btn {
    height: 100%;
    padding: 0 1.25rem;
    background-color: rgba(0, 242, 255, 0.1);
    border: 1px solid rgba(0, 242, 255, 0.3);
    color: var(--primary);
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: background-color 150ms;
}

.add-btn:hover {
    background-color: rgba(0, 242, 255, 0.2);
}

.add-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ===== LISTA DE ACCIONES ===== */
.stocks-list {
    padding: 0 1rem;
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Layout responsivo para múltiples columnas */
@media (min-width: 640px) {
    .app-container {
        max-width: 48rem;
    }

    .stocks-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .app-container {
        max-width: 72rem;
    }

    .stocks-list {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ===== TARJETA DE ACCIÓN ===== */
.stock-card {
    position: relative;
    background-color: var(--surface-card);
    border-radius: 0.5rem;
    border: 1px solid var(--slate-800);
    overflow: hidden;
}

.grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0, 242, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.4;
    pointer-events: none;
}

.card-header {
    position: relative;
    padding: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.4);
}

.card-title-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.card-ticker {
    font-size: 1.25rem;
    font-weight: 900;
    color: white;
    letter-spacing: -0.025em;
}

.card-change {
    font-size: 10px;
    font-weight: 700;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid;
}

.card-change.positive {
    color: var(--green-400);
    background-color: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
}

.card-change.negative {
    color: var(--red-400);
    background-color: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
}

.card-price-group {
    text-align: right;
}

.card-price {
    font-size: 1.125rem;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.025em;
}

/* ===== MÉTRICAS ===== */
.card-metrics {
    position: relative;
    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
    border-top: 1px solid rgba(30, 41, 59, 0.5);
}

.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--slate-500);
    text-transform: uppercase;
}

.metric-value {
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--slate-300);
}

.metric-value.primary {
    color: var(--primary);
}

.metric-value.positive {
    color: var(--green-400);
}

.metric-value.negative {
    color: var(--red-400);
}

/* ===== NIVELES DE COMPRA ===== */
.buy-levels {
    position: relative;
    padding: 0 0.75rem 0.75rem;
}

.buy-levels-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.buy-levels-title {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--slate-500);
    letter-spacing: 0.1em;
}

.levels-container {
    display: flex;
    width: 100%;
    height: 2rem;
    background-color: var(--slate-950);
    border-radius: 0.25rem;
    border: 1px solid var(--slate-800);
    padding: 0.125rem;
    overflow: hidden;
}

.level-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid var(--slate-800);
}

.level-item:last-child {
    border-right: none;
}

.level-item.active {
    background-color: rgba(74, 222, 128, 0.2);
}

.level-label {
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: var(--slate-600);
}

.level-item.active .level-label {
    color: var(--green-400);
}

.level-price {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--slate-400);
}

.level-item.active .level-price {
    color: white;
}

/* ===== NIVELES — MODO NO COMPRAR ===== */
.buy-levels--no-buy .levels-container {
    border-color: rgba(248, 113, 113, 0.3);
    background-color: rgba(248, 113, 113, 0.05);
}

.buy-levels--no-buy .level-item {
    border-right-color: rgba(248, 113, 113, 0.2);
}

.buy-levels--no-buy .level-item.active {
    background-color: rgba(248, 113, 113, 0.2);
}

.no-buy-badge {
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--red-400);
    background-color: rgba(248, 113, 113, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 0.25rem;
    padding: 1px 5px;
    white-space: nowrap;
}

/* ===== CALIFICACIÓN ===== */
.card-rating {
    position: relative;
    padding: 0.2rem 0.75rem 0.75rem 0.75rem;
}

.rating-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating-title {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--slate-500);
    letter-spacing: 0.1em;
}

.rating-stars {
    display: flex;
    gap: 0.125rem;
    align-items: center;
}

.star-icon {
    font-size: 14px;
    line-height: 1;
}

.star-filled {
    color: var(--yellow-400, #facc15);
}

.star-half {
    color: var(--primary, #00f2ff);
}

.star-empty {
    color: var(--slate-600, #475569);
}

/* ===== ACCIONES DE LA TARJETA ===== */
.card-actions {
    position: relative;
    background-color: rgba(15, 23, 42, 0.8);
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--slate-800);
}

.detail-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: color 150ms;
}

.detail-btn:hover {
    color: white;
}

.detail-btn .material-symbols-outlined {
    font-size: 14px;
}

.delete-btn {
    background: none;
    border: none;
    color: var(--slate-600);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 150ms;
}

.delete-btn:hover {
    color: var(--accent);
}

.delete-btn .material-symbols-outlined {
    font-size: 18px;
}

.fav-btn {
    background: none;
    border: none;
    color: var(--slate-600);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 150ms;
}

.fav-btn:hover,
.fav-btn.active {
    color: var(--red-400);
}

.fav-btn .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'FILL' 0;
}

.fav-btn.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* ===== ESTADO VACÍO ===== */
.empty-state {
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 1 / -1;
    /* Centrar siempre en el grid ocupando todo el ancho */
}

.empty-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.25rem;
    background-color: var(--slate-900);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 242, 255, 0.3);
    border: 1px solid var(--slate-800);
    margin-bottom: 1rem;
    transform: rotate(45deg);
}

.empty-icon .material-symbols-outlined {
    font-size: 1.25rem;
    transform: rotate(-45deg);
}

.empty-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--slate-600);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    max-width: 240px;
}

/* ===== ESTADO DE ENLACES (Links cuando hay datos) ===== */
.link-state {
    padding: 1.5rem 0;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.link-state:hover .empty-icon {
    color: var(--primary);
    border-color: var(--primary);
    transform: rotate(45deg) scale(1.1);
    background-color: rgba(0, 242, 255, 0.05);
}

.link-state:hover .empty-text {
    color: var(--slate-300);
}

.link-state .link-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.links-footer {
    display: flex;
    gap: 2rem;
    justify-content: center;
    grid-column: 1 / -1;
    margin-top: 1rem;
    border-top: 1px solid var(--slate-900);
    padding-top: 1rem;
}

@media (max-width: 480px) {
    .links-footer {
        flex-direction: column;
        gap: 0;
    }
}

/* ===== NOTIFICACIONES ===== */
.notifications-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.notification {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0);
    font-size: 0.875rem;
    font-weight: 500;
    transition: opacity 300ms, transform 300ms;
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: auto;
    max-width: 300px;
    word-wrap: break-word;
}

.notification.success {
    background-color: rgb(19, 62, 35, 0.9);
    border-color: rgb(19, 62, 35);
    color: #fff;
}

.notification.error {
    background-color: rgb(200, 68, 68);
    border-color: rgb(200, 68, 68);
    color: #fff;
}

.notification.warning {
    background-color: rgb(187, 153, 16);
    border-color: rgb(187, 153, 16);
    color: #fff
}

.notification.info {
    background-color: rgb(8, 182, 191);
    border-color: rgb(8, 182, 191);
    color: #fff;
}

/* ===== HIGHLIGHT DUPLICADO ===== */
@keyframes highlightPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 242, 255, 0);
        border-color: var(--slate-800);
    }

    30% {
        box-shadow: 0 0 0 4px rgba(0, 242, 255, 0.35);
        border-color: var(--primary);
    }

    70% {
        box-shadow: 0 0 0 2px rgba(0, 242, 255, 0.2);
        border-color: rgba(0, 242, 255, 0.6);
    }
}

.highlight-pulse {
    animation: highlightPulse 3s ease-out forwards;
}

/* ===== ANIMACIONES ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stock-card-enter {
    animation: fadeIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: flex;
    white-space: nowrap;
    animation: scroll 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* ===== ESTADOS ===== */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== TRANSICIONES ===== */
* {
    transition-property: background-color, border-color, color, fill, stroke, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* ===== PANEL DE DETALLE ===== */
.detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: detailFadeIn 0.2s ease-out;
    overscroll-behavior: contain;
}

@keyframes detailFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes detailSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.detail-panel {
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    background-color: #080f10;
    border: 1px solid #3a494b;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
    background-image: radial-gradient(circle, rgba(0, 219, 231, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: detailSlideUp 0.25s ease-out;
    overflow: hidden;
}

@media (max-width: 512px) {
    .detail-overlay {
        align-items: flex-start;
    }

    .detail-panel {
        width: 100vw;
        max-width: 100vw;
        max-height: 100%;
        max-height: 100dvh;
        height: 100%;
        height: 100dvh;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Top bar */
.detail-panel__bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(56px + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
    background-color: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(6, 182, 212, 0.30);
}

.detail-panel__bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-panel__bar-left a {
    text-decoration: none;
    cursor: default;
}

.detail-panel__bar-icon {
    color: #22d3ee;
    font-size: 22px !important;
}

.detail-panel__bar-ticker {
    font-size: 18px;
    font-weight: 900;
    color: #22d3ee;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    margin: 0;
}

.detail-panel__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background-color 0.15s;
}

.detail-panel__close:hover {
    background-color: rgba(6, 182, 212, 0.10);
}

.detail-panel__close .material-symbols-outlined {
    color: #22d3ee;
    font-size: 22px !important;
}

/* Scrollable body */
.detail-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scrollbar-width: thin;
    scrollbar-color: #3a494b #080f10;
    overscroll-behavior: contain;
}

.detail-panel__body::-webkit-scrollbar {
    width: 4px;
}

.detail-panel__body::-webkit-scrollbar-track {
    background: #080f10;
}

.detail-panel__body::-webkit-scrollbar-thumb {
    background: #3a494b;
    border-radius: 2px;
}

/* Summary card */
.detail-panel__summary {
    border: 1px solid #3a494b;
    background-color: #151d1e;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.detail-panel__company {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    letter-spacing: 0.15em;
    font-weight: 900;
    text-transform: uppercase;
    color: #849495;
    margin: 0;
}

.detail-panel__price {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.05em;
    font-weight: 900;
    color: #00f2ff;
    margin: 2px 0 0;
}

.detail-panel__range {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.detail-panel__range-item {
    display: flex;
    flex-direction: column;
}

.detail-panel__range-label {
    font-size: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #849495;
    line-height: 1;
    margin-bottom: 2px;
}

.detail-panel__range-value {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #dce4e4;
}

.detail-panel__right {
    text-align: right;
}

.detail-panel__change {
    font-family: monospace;
    font-size: 16px;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.detail-panel__change--up {
    color: #65f695;
}

.detail-panel__change--down {
    color: #ffb4ab;
}

.detail-panel__stars {
    display: flex;
    gap: 2px;
    margin-top: 4px;
    justify-content: flex-end;
}

.detail-panel__stars .material-symbols-outlined {
    font-size: 20px !important;
}

.dp-star-on {
    color: #fbbf24;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.dp-star-off {
    color: rgba(251, 191, 36, 0.25);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Section header */
.detail-panel__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-panel__section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.detail-panel__section-line {
    height: 1px;
    flex: 1;
    background-color: #3a494b;
}

.detail-panel__section-title {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    letter-spacing: 0.2em;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.detail-panel__section-title--muted {
    color: #b9cacb;
}

.detail-panel__section-title--accent {
    color: #00f2ff;
}

/* Rating items */
.detail-panel__rating-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-panel__rating-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background-color: #192122;
    border-left: 2px solid;
    transition: background-color 0.15s;
}

.detail-panel__rating-item:hover {
    background-color: #232b2c;
}

.detail-panel__rating-item--ok {
    border-left-color: #4de082;
}

.detail-panel__rating-item--bad {
    border-left-color: #ffb4ab;
    opacity: 0.8;
}

.detail-panel__rating-icon {
    font-size: 16px !important;
    margin-top: 1px;
    flex-shrink: 0;
}

.detail-panel__rating-icon--ok {
    color: #fbbf24;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.detail-panel__rating-icon--bad {
    color: #ffb4ab;
}

.detail-panel__rating-title--ok {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #e1fdff;
}

.detail-panel__rating-title--bad {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #b9cacb;
}

.detail-panel__rating-desc {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    color: #849495;
    margin-top: 2px;
}

/* Metrics */
.detail-panel__metrics-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-panel__metric-card {
    background-color: #192122;
    padding: 10px 12px;
    border: 1px solid rgba(58, 73, 75, 0.4);
}

.detail-panel__metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.detail-panel__metric-label {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #849495;
    text-transform: uppercase;
}

.detail-panel__metric-value {
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
    color: #00dbe7;
}

.detail-panel__metric-badge {
    color: #f87171;
    margin-left: 4px;
    font-size: 10px;
    font-weight: 700;
}

.detail-panel__metric-badge--low {
    color: #4ade80;
}

.detail-panel__progress {
    height: 5px;
    width: 100%;
    background-color: #2e3637;
    border-radius: 999px;
    overflow: hidden;
}

.detail-panel__progress-fill {
    background-color: #00f2ff;
    height: 100%;
    transition: width 0.4s ease;
}

.detail-panel__progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    font-size: 8px;
    font-family: monospace;
    color: rgba(132, 148, 149, 0.5);
}

.detail-panel__sma-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.detail-panel__sma-card {
    background-color: #192122;
    padding: 10px 12px;
    border: 1px solid rgba(58, 73, 75, 0.4);
}

.detail-panel__sma-label {
    font-size: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #849495;
    display: block;
    margin-bottom: 3px;
}

.detail-panel__sma-val-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.detail-panel__sma-value {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    letter-spacing: -0.05em;
    font-weight: 900;
}

.detail-panel__sma-value--up {
    color: #65f695;
}

.detail-panel__sma-value--down {
    color: #ffb4ab;
}

.detail-panel__sma-icon {
    font-size: 12px !important;
}

.detail-panel__sma-icon--up {
    color: #65f695;
}

.detail-panel__sma-icon--down {
    color: #ffb4ab;
}

.detail-panel__volume-card {
    background-color: #192122;
    padding: 10px 12px;
    border: 1px solid rgba(58, 73, 75, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-panel__volume-value {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.05em;
    font-weight: 900;
}

.detail-panel__volume-value--up {
    color: #00f2ff;
}

.detail-panel__volume-value--down {
    color: #ffb4ab;
}

/* Emoji icon in rating items */
.detail-panel__rating-emoji {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
    width: 20px;
    text-align: center;
}

/* Short accent line for insights header */
.detail-panel__section-line--short {
    height: 1px;
    width: 16px;
    background-color: #00f2ff;
    flex: none;
}

/* Insights pills */
.detail-panel__insights-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-panel__insight-tag {
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 5px 10px;
    border: 1px solid rgba(0, 242, 255, 0.20);
    background-color: rgba(0, 242, 255, 0.07);
    color: #00dbe7;
}