/**
 * Astrodestino Design System
 * ===========================
 * Inspired by Astroscope: deep dark surfaces, electric blue,
 * flat design with subtle depth, no heavy shadows or glows.
 *
 * STYLE GUIDE
 * -----------
 * 1. PALETTE
 *    - Background:  #080C18, #111827
 *    - Primary (blue):  #4F6EF7
 *    - Accent (pink):  #D946EF
 *    - Surfaces semi-transparent with subtle borders
 *
 * 2. TYPOGRAPHY
 *    - All UI: Inter (clean sans-serif)
 *
 * 3. BORDER RADIUS
 *    - sm: 8px, default: 12px, lg: 16px, xl: 20px, 2xl: 24px, full: 9999px
 */

/* ============================================
   DESIGN TOKENS (CSS Custom Properties)
   ============================================ */

:root {
    /* ---- SURFACE & BACKGROUND ---- */
    --cl-background:                #080C18;
    --cl-surface:                   #111827;
    --cl-surface-secondary:         #1A2236;
    --cl-surface-tertiary:          #222D42;
    --cl-surface-lowest:            #050810;
    --cl-surface-dim:               #0A0F1C;
    --cl-surface-container-low:     #0E1525;
    --cl-surface-container:         #141C2E;
    --cl-surface-container-high:    #1C2538;
    --cl-surface-container-highest: #242F44;
    --cl-surface-bright:            #2A3650;
    --cl-surface-variant:           #1A2236;

    /* ---- PRIMARY (Electric Blue) ---- */
    --cl-primary:               #4F6EF7;
    --cl-primary-light:         #7B93FA;
    --cl-primary-lighter:       #A5B4FC;
    --cl-primary-fixed:         #C7D2FE;
    --cl-primary-fixed-dim:     #A5B4FC;
    --cl-primary-container:     rgba(79, 110, 247, 0.12);
    --cl-on-primary:            #FFFFFF;
    --cl-on-primary-container:  #A5B4FC;
    --cl-on-primary-fixed:      #1E3A8A;
    --cl-inverse-primary:       #7B93FA;
    --cl-surface-tint:          #4F6EF7;
    --cl-primary-gradient:      linear-gradient(135deg, #6B8AFF 0%, #4F6EF7 100%);

    /* ---- SECONDARY (Soft Violet) ---- */
    --cl-secondary:             #8B5CF6;
    --cl-secondary-light:       #A78BFA;
    --cl-secondary-lighter:     #C4B5FD;
    --cl-secondary-fixed:       #DDD6FE;
    --cl-secondary-fixed-dim:   #C4B5FD;
    --cl-secondary-container:   rgba(139, 92, 246, 0.12);
    --cl-on-secondary:          #FFFFFF;
    --cl-on-secondary-container:#C4B5FD;
    --cl-on-secondary-fixed:    #4C1D95;

    /* ---- TERTIARY (Deep Purple) ---- */
    --cl-tertiary:              #7C3AED;
    --cl-tertiary-light:        #A78BFA;
    --cl-tertiary-lighter:      #C4B5FD;
    --cl-tertiary-fixed:        #EDE9FE;
    --cl-tertiary-fixed-dim:    #C4B5FD;
    --cl-tertiary-container:    rgba(124, 58, 237, 0.12);
    --cl-on-tertiary:           #FFFFFF;
    --cl-on-tertiary-container: #C4B5FD;

    /* ---- ACCENT (Pink / Magenta) ---- */
    --cl-accent:                #D946EF;
    --cl-accent-light:          #E879F9;
    --cl-accent-bg:             rgba(217, 70, 239, 0.08);

    /* ---- ZODIAC COLORS ---- */
    --cl-fire:                  #F97316;
    --cl-earth:                 #22C55E;
    --cl-air:                   #06B6D4;
    --cl-water:                 #3B82F6;

    /* ---- TEXT & CONTENT ---- */
    --cl-on-surface:            #F1F5F9;
    --cl-on-surface-variant:    #94A3B8;
    --cl-on-background:         #F1F5F9;
    --cl-inverse-surface:       #F1F5F9;
    --cl-inverse-on-surface:    #080C18;
    --cl-text-primary:          #F1F5F9;
    --cl-text-secondary:        #94A3B8;
    --cl-text-tertiary:         #64748B;
    --cl-text-disabled:         #475569;
    --cl-text-inverse:          #080C18;

    /* ---- OUTLINE & BORDERS ---- */
    --cl-outline:               #334155;
    --cl-outline-variant:       #1E293B;
    --cl-border:                transparent;
    --cl-border-light:          transparent;
    --cl-border-accent:         rgba(79, 110, 247, 0.15);
    --cl-divider:               rgba(255, 255, 255, 0.04);

    /* ---- ERROR ---- */
    --cl-error:                 #EF4444;
    --cl-error-container:       rgba(239, 68, 68, 0.12);
    --cl-on-error:              #FFFFFF;
    --cl-on-error-container:    #FCA5A5;

    /* ---- SEMANTIC COLORS ---- */
    --cl-success:               #22C55E;
    --cl-success-bg:            rgba(34, 197, 94, 0.1);
    --cl-warning:               #F59E0B;
    --cl-warning-bg:            rgba(245, 158, 11, 0.1);
    --cl-info:                  #4F6EF7;

    /* ---- DEPTH (minimal, no heavy shadows) ---- */
    --cl-shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.2);
    --cl-shadow-md:             0 2px 8px rgba(0, 0, 0, 0.25);
    --cl-shadow-lg:             0 4px 16px rgba(0, 0, 0, 0.3);
    --cl-shadow-xl:             0 8px 24px rgba(0, 0, 0, 0.35);
    --cl-shadow-nav:            0 -1px 0 rgba(255, 255, 255, 0.06);
    --cl-shadow-card:           none;
    --cl-shadow-elevated:       0 4px 16px rgba(0, 0, 0, 0.3);

    /* ---- TYPOGRAPHY ---- */
    --cl-font-headline:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cl-font-body:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cl-font-label:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cl-font-zodiac:           'Inter', sans-serif;

    /* ---- FONT SIZES ---- */
    --cl-text-xs:               11px;
    --cl-text-sm:               13px;
    --cl-text-base:             15px;
    --cl-text-lg:               17px;
    --cl-text-xl:               20px;
    --cl-text-2xl:              24px;
    --cl-text-3xl:              30px;
    --cl-text-4xl:              36px;
    --cl-text-5xl:              48px;

    /* ---- FONT WEIGHTS ---- */
    --cl-font-light:            300;
    --cl-font-regular:          400;
    --cl-font-medium:           500;
    --cl-font-semibold:         600;
    --cl-font-bold:             700;

    /* ---- BORDER RADIUS ---- */
    --cl-radius-xs:             4px;
    --cl-radius-sm:             8px;
    --cl-radius:                12px;
    --cl-radius-lg:             16px;
    --cl-radius-xl:             20px;
    --cl-radius-2xl:            24px;
    --cl-radius-full:           9999px;

    /* ---- SPACING ---- */
    --cl-space-1:               4px;
    --cl-space-2:               8px;
    --cl-space-3:               12px;
    --cl-space-4:               16px;
    --cl-space-5:               20px;
    --cl-space-6:               24px;
    --cl-space-8:               32px;
    --cl-space-10:              40px;
    --cl-space-12:              48px;

    /* ---- LAYOUT ---- */
    --cl-page-px:               20px;
    --cl-max-width:             600px;
    --cl-top-bar-height:        56px;
    --cl-bottom-nav-height:     64px;
    --cl-banner-ad-height:      0px;

    /* ---- TRANSITIONS ---- */
    --cl-transition-fast:       150ms ease;
    --cl-transition:            250ms ease;
    --cl-transition-slow:       400ms ease;
    --cl-transition-cosmic:     600ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- ZODIAC SIGN SIZES ---- */
    --cl-sign-size:             80px;
    --cl-sign-size-lg:          120px;
}

/* ============================================
   RESET & BASE
   ============================================ */

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

html {
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--cl-font-body);
    font-size: var(--cl-text-base);
    line-height: 1.5;
    color: var(--cl-text-primary);
    background: var(--cl-background);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   MATERIAL SYMBOLS CONFIG
   ============================================ */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================
   APP WRAPPER
   ============================================ */

.cl-app-wrapper {
    max-width: var(--cl-max-width);
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--cl-background);
    position: relative;
    overflow-x: hidden;
}

/* ============================================
   TOP BAR
   ============================================ */

.cl-top-bar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cl-space-4) var(--cl-page-px);
    padding-top: calc(var(--cl-space-4) + env(safe-area-inset-top, 0px));
    background: transparent;
    height: auto;
}

.cl-top-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cl-top-bar-left {
    display: flex;
    align-items: center;
    gap: var(--cl-space-3);
}

.cl-top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--cl-space-2);
}

.cl-top-bar h1.cl-greeting {
    font-family: var(--cl-font-body);
    font-size: var(--cl-text-base);
    font-weight: var(--cl-font-semibold);
    color: var(--cl-text-primary);
}

.cl-top-bar-action {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cl-radius-full);
    background: var(--cl-surface);
    color: var(--cl-text-secondary);
    transition: all var(--cl-transition-fast);
    border: none;
}

.cl-top-bar-action:active {
    transform: scale(0.95);
    background: var(--cl-surface-secondary);
}

/* ============================================
   ZODIAC SIGNS
   ============================================ */

.cl-zodiac-icon {
    width: var(--cl-sign-size);
    height: var(--cl-sign-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: var(--cl-surface);
    border: none;
    border-radius: var(--cl-radius-full);
    transition: all var(--cl-transition);
}

.cl-zodiac-icon--lg {
    width: var(--cl-sign-size-lg);
    height: var(--cl-sign-size-lg);
    font-size: 56px;
}

.cl-zodiac-icon--fire {
    border-color: rgba(249, 115, 22, 0.3);
}

.cl-zodiac-icon--earth {
    border-color: rgba(34, 197, 94, 0.3);
}

.cl-zodiac-icon--air {
    border-color: rgba(6, 182, 212, 0.3);
}

.cl-zodiac-icon--water {
    border-color: rgba(59, 130, 246, 0.3);
}

.cl-zodiac-icon.selected {
    border-color: var(--cl-primary);
    background: var(--cl-primary-container);
    transform: scale(1.05);
}

/* ============================================
   ZODIAC GRID (for sign selection)
   ============================================ */

.cl-zodiac-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cl-space-3);
    padding: 0 var(--cl-page-px);
}

.cl-zodiac-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cl-space-2);
    padding: var(--cl-space-3);
    background: var(--cl-surface);
    border: none;
    border-radius: var(--cl-radius-lg);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
}

.cl-zodiac-option:active {
    transform: scale(0.95);
}

.cl-zodiac-option.selected {
    border-color: var(--cl-primary);
    background: var(--cl-primary-container);
}

.cl-zodiac-option__symbol {
    font-size: 28px;
}

.cl-zodiac-option__name {
    font-size: var(--cl-text-xs);
    color: var(--cl-text-secondary);
    text-align: center;
}

.cl-zodiac-option__dates {
    font-size: 9px;
    color: var(--cl-text-tertiary);
}

/* ============================================
   ENERGY CARD (Daily horoscope visual)
   ============================================ */

.cl-energy-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--cl-radius-xl);
    overflow: hidden;
    margin: 0 auto;
}

.cl-energy-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cl-energy-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(8, 12, 24, 0.9) 100%);
}

.cl-energy-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--cl-space-5);
    text-align: center;
}

.cl-energy-card__label {
    font-size: var(--cl-text-xs);
    color: var(--cl-primary-light);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--cl-space-1);
}

.cl-energy-card__title {
    font-family: var(--cl-font-headline);
    font-size: var(--cl-text-2xl);
    color: var(--cl-text-primary);
    font-weight: var(--cl-font-semibold);
}

/* ============================================
   RATING BARS (Love, Work, Money, Health)
   ============================================ */

.cl-ratings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cl-space-3);
    padding: 0 var(--cl-page-px);
}

.cl-rating-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cl-space-1);
    padding: var(--cl-space-3);
    background: var(--cl-surface);
    border-radius: var(--cl-radius);
    border: none;
}

.cl-rating-item__icon {
    font-size: 20px;
}

.cl-rating-item__label {
    font-size: var(--cl-text-xs);
    color: var(--cl-text-tertiary);
}

.cl-rating-item__stars {
    display: flex;
    gap: 2px;
}

.cl-rating-star {
    width: 12px;
    height: 12px;
    background: var(--cl-surface-tertiary);
    border-radius: 2px;
}

.cl-rating-star.filled {
    background: var(--cl-primary);
}

/* ============================================
   CARDS
   ============================================ */

.cl-card {
    background: var(--cl-surface);
    border-radius: var(--cl-radius-lg);
    padding: var(--cl-space-4);
    margin: 0 var(--cl-page-px);
    border: none;
}

.cl-card--accent {
    border-color: var(--cl-border-accent);
}

/* ============================================
   BUTTONS
   ============================================ */

.cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cl-space-2);
    font-family: var(--cl-font-body);
    font-weight: var(--cl-font-semibold);
    font-size: var(--cl-text-sm);
    border-radius: var(--cl-radius-full);
    padding: var(--cl-space-3) var(--cl-space-5);
    transition: all var(--cl-transition-fast);
    cursor: pointer;
    border: none;
    text-decoration: none;
    line-height: 1;
}

.cl-btn:active {
    transform: scale(0.96);
}

.cl-btn-primary {
    background: var(--cl-primary);
    color: var(--cl-on-primary);
}

.cl-btn-primary:hover {
    background: var(--cl-primary-light);
}

.cl-btn-secondary {
    background: var(--cl-secondary);
    color: var(--cl-on-secondary);
}

.cl-btn-ghost {
    background: transparent;
    color: var(--cl-text-secondary);
    border: none;
}

.cl-btn-ghost:hover {
    background: var(--cl-surface);
    border-color: rgba(255, 255, 255, 0.1);
}

.cl-btn-lg {
    padding: var(--cl-space-4) var(--cl-space-6);
    font-size: var(--cl-text-base);
}

.cl-btn-block {
    width: 100%;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.cl-main-content {
    position: relative;
    z-index: 1;
    padding-bottom: calc(var(--cl-bottom-nav-height) + var(--cl-banner-ad-height) + var(--cl-space-6) + env(safe-area-inset-bottom, 0px));
}

/* ============================================
   SECTION HEADERS
   ============================================ */

.cl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cl-space-4);
    padding: 0 var(--cl-page-px);
}

.cl-section-title {
    font-family: var(--cl-font-headline);
    font-size: var(--cl-text-lg);
    font-weight: var(--cl-font-semibold);
    color: var(--cl-text-primary);
}

.cl-section-link {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--cl-text-sm);
    font-weight: var(--cl-font-medium);
    color: var(--cl-primary-light);
}

/* ============================================
   BOTTOM NAVIGATION
   ============================================ */

.cl-bottom-nav {
    position: fixed;
    bottom: var(--cl-banner-ad-height);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--cl-max-width);
    height: var(--cl-bottom-nav-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--cl-surface);
    border-top: none;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.cl-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--cl-space-2) var(--cl-space-3);
    color: var(--cl-text-tertiary);
    transition: all var(--cl-transition-fast);
    text-decoration: none;
    position: relative;
}

.cl-nav-item .material-symbols-outlined {
    font-size: 26px;
    transition: all var(--cl-transition-fast);
}

.cl-nav-item > span:last-child {
    font-size: 10px;
    font-weight: var(--cl-font-medium);
}

.cl-nav-item.active {
    color: var(--cl-primary);
}

.cl-nav-item:active {
    transform: scale(0.95);
}

/* ============================================
   PROGRESS BAR
   ============================================ */

.cl-progress-bar {
    height: 4px;
    background: var(--cl-surface-tertiary);
    border-radius: var(--cl-radius-full);
    overflow: hidden;
}

.cl-progress-fill {
    height: 100%;
    background: var(--cl-primary);
    border-radius: var(--cl-radius-full);
    transition: width var(--cl-transition);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.cl-form-input,
.cl-form-textarea,
.cl-form-select {
    width: 100%;
    padding: var(--cl-space-3) var(--cl-space-4);
    background: var(--cl-surface);
    border: none;
    border-radius: var(--cl-radius);
    font-family: inherit;
    font-size: var(--cl-text-base);
    color: var(--cl-text-primary);
    transition: all var(--cl-transition-fast);
}

.cl-form-input:focus,
.cl-form-textarea:focus,
.cl-form-select:focus {
    outline: none;
    border-color: var(--cl-primary);
    background: var(--cl-surface-secondary);
}

.cl-form-input::placeholder,
.cl-form-textarea::placeholder {
    color: var(--cl-text-tertiary);
}

/* ============================================
   LOADING & SPINNER
   ============================================ */

.cl-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 24, 0.95);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cl-space-4);
}

.cl-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid var(--cl-surface-tertiary);
    border-top-color: var(--cl-primary);
    border-radius: 50%;
    animation: cl-spin 0.8s linear infinite;
}

@keyframes cl-spin {
    to { transform: rotate(360deg); }
}

.cl-loading-text {
    font-size: var(--cl-text-sm);
    color: var(--cl-text-secondary);
}

/* ============================================
   BIRTH CHART VISUAL
   ============================================ */

.cl-chart-wheel {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
    border-radius: var(--cl-radius-full);
    background: conic-gradient(
        from 0deg,
        rgba(249, 115, 22, 0.15) 0deg 30deg,
        rgba(34, 197, 94, 0.15) 30deg 60deg,
        rgba(6, 182, 212, 0.15) 60deg 90deg,
        rgba(59, 130, 246, 0.15) 90deg 120deg,
        rgba(249, 115, 22, 0.15) 120deg 150deg,
        rgba(34, 197, 94, 0.15) 150deg 180deg,
        rgba(6, 182, 212, 0.15) 180deg 210deg,
        rgba(59, 130, 246, 0.15) 210deg 240deg,
        rgba(249, 115, 22, 0.15) 240deg 270deg,
        rgba(34, 197, 94, 0.15) 270deg 300deg,
        rgba(6, 182, 212, 0.15) 300deg 330deg,
        rgba(59, 130, 246, 0.15) 330deg 360deg
    );
    border: none;
}

.cl-chart-wheel::before {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-background);
    border: none;
}

.cl-chart-wheel::after {
    content: '';
    position: absolute;
    inset: 60px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-surface);
    border: none;
}

.cl-chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-primary-container);
    border: 2px solid var(--cl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    z-index: 1;
}

/* ============================================
   PLANET POSITIONS
   ============================================ */

.cl-planet-list {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-2);
}

.cl-planet-row {
    display: flex;
    align-items: center;
    gap: var(--cl-space-3);
    padding: var(--cl-space-3);
    background: var(--cl-surface);
    border-radius: var(--cl-radius);
    border: none;
}

.cl-planet-row__symbol {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--cl-surface-secondary);
    border-radius: var(--cl-radius-sm);
}

.cl-planet-row__info {
    flex: 1;
}

.cl-planet-row__name {
    font-size: var(--cl-text-sm);
    font-weight: var(--cl-font-medium);
    color: var(--cl-text-primary);
}

.cl-planet-row__position {
    font-size: var(--cl-text-xs);
    color: var(--cl-text-tertiary);
}

.cl-planet-row__sign {
    font-size: 24px;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes cl-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes cl-rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cl-float {
    animation: cl-float 3s ease-in-out infinite;
}

.cl-rotate-slow {
    animation: cl-rotate-slow 60s linear infinite;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.cl-text-primary-color {
    color: var(--cl-primary-light);
}

.cl-text-accent {
    color: var(--cl-accent);
}

.cl-font-headline {
    font-family: var(--cl-font-headline);
}

/* ============================================
   PREMIUM BADGE
   ============================================ */

.cl-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-1);
    padding: var(--cl-space-1) var(--cl-space-2);
    background: var(--cl-secondary);
    border-radius: var(--cl-radius-full);
    font-size: 10px;
    font-weight: var(--cl-font-bold);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cl-premium-badge .material-symbols-outlined {
    font-size: 12px;
}

/* ============================================
   CHIP / TAG (pill tabs like Astroscope)
   ============================================ */

.cl-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-1);
    padding: var(--cl-space-2) var(--cl-space-4);
    background: transparent;
    border: none;
    border-radius: var(--cl-radius-full);
    font-size: var(--cl-text-xs);
    font-weight: var(--cl-font-medium);
    color: var(--cl-text-secondary);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
}

.cl-chip.active,
.cl-chip--active {
    background: var(--cl-primary);
    border-color: var(--cl-primary);
    color: var(--cl-on-primary);
}

.cl-chip:active {
    transform: scale(0.95);
}

/* ============================================
   EXPANDABLE ROW (like Astroscope planet rows)
   ============================================ */

.cl-expand-row {
    display: flex;
    align-items: center;
    gap: var(--cl-space-3);
    padding: var(--cl-space-4);
    background: var(--cl-surface);
    border: none;
    border-radius: var(--cl-radius);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
}

.cl-expand-row:active {
    background: var(--cl-surface-secondary);
}

.cl-expand-row__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--cl-surface-secondary);
    border-radius: var(--cl-radius-sm);
    color: var(--cl-text-secondary);
}

.cl-expand-row__content {
    flex: 1;
}

.cl-expand-row__title {
    font-size: var(--cl-text-sm);
    font-weight: var(--cl-font-semibold);
    color: var(--cl-text-primary);
}

.cl-expand-row__subtitle {
    font-size: var(--cl-text-xs);
    color: var(--cl-text-tertiary);
}

.cl-expand-row__chevron {
    color: var(--cl-text-tertiary);
    transition: transform var(--cl-transition-fast);
}

.cl-expand-row.open .cl-expand-row__chevron {
    transform: rotate(180deg);
}