/* ================================================================
   AgePulse — Component Styles
   Reusable UI components
================================================================ */

/* ── Glass Card ── */
.glass-card {
    background:         var(--glass-bg);
    backdrop-filter:    var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border:             1px solid var(--glass-border);
    border-radius:      var(--r-2xl);
    padding:            var(--sp-6);
    box-shadow:         var(--shadow-card);
    transition:         background var(--t-normal), border-color var(--t-normal),
                        transform var(--t-fast), box-shadow var(--t-fast);
    position:           relative;
    overflow:           hidden;
}
.glass-card:hover {
    background:    var(--bg-card-hover);
    box-shadow:    var(--shadow-md);
}
.glass-card::before {
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,transparent 60%);
}

/* ── Gradient Text ── */
.gradient-text {
    background:     var(--grad-main);
    -webkit-background-clip: text;
    background-clip:text;
    -webkit-text-fill-color: transparent;
    color:          transparent;
}

/* ── Buttons ── */
.btn-calculate {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        14px 32px;
    background:     var(--grad-main);
    color:          #fff;
    border:         none;
    border-radius:  var(--r-full);
    font-family:    var(--font-display);
    font-size:      1rem;
    font-weight:    700;
    cursor:         pointer;
    box-shadow:     var(--shadow-accent);
    transition:     transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
    letter-spacing: 0.01em;
    white-space:    nowrap;
}
.btn-calculate:hover:not(:disabled) {
    transform:   translateY(-2px);
    box-shadow:  0 12px 40px rgba(124,111,255,0.50);
}
.btn-calculate:active:not(:disabled) { transform: translateY(0); }
.btn-calculate:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
    box-shadow: none;
}

.btn-secondary-action {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        14px 24px;
    background:     var(--bg-tag);
    color:          var(--text-secondary);
    border:         1px solid var(--border);
    border-radius:  var(--r-full);
    font-size:      0.95rem;
    font-weight:    500;
    cursor:         pointer;
    transition:     background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    white-space:    nowrap;
}
.btn-secondary-action:hover {
    background: var(--bg-card-hover);
    color:      var(--text-primary);
    transform:  translateY(-1px);
}

.btn-icon {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-1);
    padding:        8px 14px;
    background:     var(--bg-tag);
    color:          var(--text-secondary);
    border:         1px solid var(--border);
    border-radius:  var(--r-full);
    font-size:      0.85rem;
    font-weight:    500;
    cursor:         pointer;
    transition:     background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    white-space:    nowrap;
}
.btn-icon:hover {
    background: var(--accent-light);
    color:      var(--accent);
    border-color: var(--border-active);
    transform:  translateY(-1px);
}
.btn-icon i { font-size: 1rem; }
.btn-label { font-size: 0.8rem; }

.btn-share-action {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        10px 20px;
    background:     var(--bg-tag);
    color:          var(--text-primary);
    border:         1px solid var(--border);
    border-radius:  var(--r-lg);
    font-size:      0.9rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     all var(--t-fast);
}
.btn-share-action:hover {
    background:   var(--accent-light);
    border-color: var(--border-active);
    color:        var(--accent);
    transform:    translateY(-2px);
}

.btn-refresh {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        8px 18px;
    background:     transparent;
    color:          var(--accent);
    border:         1px solid var(--border-active);
    border-radius:  var(--r-full);
    font-size:      0.85rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     all var(--t-fast);
}
.btn-refresh:hover {
    background:   var(--accent-light);
    transform:    translateY(-1px);
}
.btn-refresh i { transition: transform 0.4s; }
.btn-refresh:hover i { transform: rotate(180deg); }

/* ── Form Elements ── */
.form-label {
    display:     block;
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--text-secondary);
    margin-bottom: var(--sp-2);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.form-label i { margin-right: 4px; color: var(--accent); }

.form-input {
    width:          100%;
    padding:        12px 16px;
    background:     var(--bg-input);
    color:          var(--text-primary);
    border:         1px solid var(--border);
    border-radius:  var(--r-lg);
    font-family:    var(--font-main);
    font-size:      0.95rem;
    font-weight:    500;
    transition:     background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
    outline:        none;
    -webkit-appearance: none;
    appearance:     none;
}
.form-input:focus {
    background:    var(--bg-input-focus);
    border-color:  var(--border-active);
    box-shadow:    0 0 0 3px rgba(124,111,255,0.15);
}
.form-input::-webkit-calendar-picker-indicator {
    filter: var(--cal-filter, invert(1));
    opacity: 0.5;
    cursor: pointer;
}
[data-theme="light"] { --cal-filter: none; }

.form-select-custom { cursor: pointer; }

.optional-tag {
    font-size:      0.72rem;
    color:          var(--text-muted);
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
}
.req-star { color: var(--accent-3); }

/* ── Tab System ── */
.tab-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        10px 18px;
    background:     transparent;
    color:          var(--text-muted);
    border:         none;
    border-radius:  var(--r-full);
    font-size:      0.875rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     all var(--t-fast);
    white-space:    nowrap;
    position:       relative;
}
.tab-btn:hover { color: var(--text-primary); background: var(--bg-tag); }
.tab-btn.active {
    color:      var(--text-on-accent);
    background: var(--grad-main);
    box-shadow: var(--shadow-accent);
}
.tab-btn i { font-size: 0.95rem; }

/* ── Section Card Title ── */
.card-section-title {
    font-family:   var(--font-display);
    font-size:     1rem;
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: var(--sp-4);
    display:       flex;
    align-items:   center;
    gap:           var(--sp-2);
}
.card-section-title i {
    color:      var(--accent);
    font-size:  1.1rem;
}

/* ── Live Badge ── */
.live-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        4px 12px;
    background:     rgba(16,185,129,0.15);
    color:          var(--success);
    border:         1px solid rgba(16,185,129,0.30);
    border-radius:  var(--r-full);
    font-size:      0.72rem;
    font-weight:    800;
    letter-spacing: 0.10em;
}
.live-dot {
    width:            7px;
    height:           7px;
    background:       var(--success);
    border-radius:    50%;
    display:          inline-block;
    animation:        livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.4; transform:scale(0.7); }
}

/* ── Stat Mini Card ── */
.stat-mini-card {
    padding:    var(--sp-4) var(--sp-5);
    text-align: center;
    cursor:     default;
}
.stat-mini-icon {
    font-size:   1.5rem;
    margin-bottom: var(--sp-2);
}
.stat-mini-icon.c-purple { color: var(--accent); }
.stat-mini-icon.c-blue   { color: var(--accent-2); }
.stat-mini-icon.c-cyan   { color: var(--info); }
.stat-mini-icon.c-pink   { color: var(--accent-3); }
.stat-mini-value {
    font-family:   var(--font-display);
    font-size:     1.4rem;
    font-weight:   800;
    color:         var(--text-primary);
    line-height:   1.1;
    margin-bottom: 4px;
}
.stat-mini-label {
    font-size:   0.78rem;
    color:       var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Info Card (Birthday Facts) ── */
.info-card {
    text-align: center;
    padding:    var(--sp-6) var(--sp-4);
    cursor:     default;
}
.ic-icon {
    font-size:     1.8rem;
    margin-bottom: var(--sp-3);
}
.gradient-card-1 .ic-icon { color: var(--accent); }
.gradient-card-2 .ic-icon { color: var(--warning); }
.gradient-card-3 .ic-icon { color: var(--accent-2); }

.ic-label {
    font-size:   0.75rem;
    font-weight: 700;
    color:       var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-2);
}
.ic-value {
    font-family:   var(--font-display);
    font-size:     1.25rem;
    font-weight:   800;
    color:         var(--text-primary);
    margin-bottom: 4px;
}
.ic-sub {
    font-size:  0.8rem;
    color:      var(--text-muted);
}

/* ── Milestone Item ── */
.milestone-item {
    display:         flex;
    align-items:     center;
    gap:             var(--sp-4);
    padding:         var(--sp-3) var(--sp-4);
    border-radius:   var(--r-lg);
    background:      var(--bg-tag);
    border:          1px solid var(--border);
    transition:      all var(--t-fast);
    position:        relative;
    overflow:        hidden;
}
.milestone-item.passed {
    border-color: rgba(16,185,129,0.20);
    background:   rgba(16,185,129,0.06);
}
.milestone-item.upcoming {
    border-color: rgba(124,111,255,0.30);
    background:   rgba(124,111,255,0.07);
}
.milestone-item.next-one {
    border-color: var(--accent);
    background:   rgba(124,111,255,0.12);
    box-shadow:   0 0 20px rgba(124,111,255,0.15);
}
.milestone-icon {
    font-size:  1.5rem;
    flex-shrink: 0;
}
.milestone-age {
    font-family: var(--font-display);
    font-size:   1.1rem;
    font-weight: 800;
    color:       var(--text-primary);
    min-width:   40px;
}
.milestone-label {
    font-size:   0.9rem;
    color:       var(--text-secondary);
    font-weight: 600;
    flex:        1;
}
.milestone-status {
    font-size:   0.78rem;
    font-weight: 700;
    padding:     3px 10px;
    border-radius: var(--r-full);
}
.milestone-status.done   { background: var(--success-bg); color: var(--success); }
.milestone-status.coming { background: var(--accent-light); color: var(--accent); }
.milestone-status.next   { background: var(--grad-main); color: #fff; }

/* ── Zodiac Card ── */
.zodiac-card {
    display:    flex;
    gap:        var(--sp-5);
    align-items: flex-start;
    padding:    var(--sp-6);
}
.zodiac-glyph {
    font-size:    3.5rem;
    line-height:  1;
    flex-shrink:  0;
    filter:       drop-shadow(0 0 16px var(--accent));
}
.zodiac-body { flex: 1; }
.zodiac-type-tag {
    font-size:   0.72rem;
    font-weight: 700;
    color:       var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-1);
}
.zodiac-sign-name {
    font-family:   var(--font-display);
    font-size:     1.6rem;
    font-weight:   800;
    color:         var(--text-primary);
    margin:        0 0 4px;
}
.zodiac-dates-range {
    font-size:    0.82rem;
    color:        var(--text-muted);
    margin-bottom: var(--sp-3);
}
.zodiac-element-tag {
    display:      inline-block;
    padding:      3px 12px;
    background:   var(--accent-light);
    color:        var(--accent);
    border-radius: var(--r-full);
    font-size:    0.78rem;
    font-weight:  700;
    margin-bottom: var(--sp-2);
}
.zodiac-ruler {
    font-size:  0.82rem;
    color:      var(--text-muted);
    margin-bottom: var(--sp-3);
}
.zodiac-traits-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.trait-tag {
    padding:       3px 10px;
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-full);
    font-size:     0.75rem;
    color:         var(--text-secondary);
    font-weight:   500;
}

/* ── Identity Card ── */
.identity-card {
    text-align:  center;
    padding:     var(--sp-5);
    cursor:      default;
}
.identity-emoji {
    font-size:     2.2rem;
    margin-bottom: var(--sp-3);
    display:       block;
}
.identity-label {
    font-size:   0.75rem;
    font-weight: 700;
    color:       var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.identity-value {
    font-family:   var(--font-display);
    font-size:     1.4rem;
    font-weight:   800;
    color:         var(--text-primary);
    margin-bottom: 4px;
}
.identity-sub {
    font-size:  0.8rem;
    color:      var(--text-muted);
    line-height: 1.5;
}

/* ── Stat Card (Life Stats Grid) ── */
.stat-card {
    display:    flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding:    var(--sp-5) var(--sp-4);
    cursor:     default;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sc-icon {
    width:         52px;
    height:        52px;
    border-radius: var(--r-xl);
    background:    rgba(255,255,255,0.08);
    border:        1px solid rgba(255,255,255,0.15);
    color:         var(--sc);
    font-size:     1.5rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: var(--sp-3);
    flex-shrink:   0;
}
@supports (background: color-mix(in srgb, red 15%, transparent)) {
    .sc-icon {
        background: color-mix(in srgb, var(--sc) 15%, transparent);
        border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent);
    }
}
.sc-value {
    font-family:   var(--font-display);
    font-size:     1.35rem;
    font-weight:   800;
    color:         var(--text-primary);
    margin-bottom: 4px;
    line-height:   1.1;
}
.sc-label {
    font-size:   0.85rem;
    font-weight: 700;
    color:       var(--text-secondary);
    margin-bottom: 2px;
}
.sc-sub {
    font-size:  0.74rem;
    color:      var(--text-muted);
}

/* ── Phase Card ── */
.phase-card {
    text-align: center;
    padding:    var(--sp-6) var(--sp-5);
    cursor:     default;
}
.phase-emoji  { font-size: 2.8rem; margin-bottom: var(--sp-3); display: block; }
.phase-tag    { font-size: 0.74rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.phase-name   { font-family:var(--font-display); font-size:1.35rem; font-weight:800; color:var(--text-primary); margin-bottom:var(--sp-2); }
.phase-desc   { font-size:0.85rem; color:var(--text-secondary); line-height:1.6; }

/* ── Badge ── */
.badge-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        var(--sp-4) var(--sp-3);
    background:     var(--bg-tag);
    border:         1px solid var(--border);
    border-radius:  var(--r-xl);
    text-align:     center;
    transition:     all var(--t-fast);
    position:       relative;
}
.badge-item:hover { transform: translateY(-3px); border-color: var(--border-active); background: var(--accent-light); }
.badge-item.earned { border-color: var(--warning); background: rgba(245,158,11,0.08); }
.badge-emoji  { font-size: 2rem; }
.badge-name   { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
.badge-desc   { font-size: 0.70rem; color: var(--text-muted); line-height: 1.4; }
.badge-locked { position:absolute; inset:0; border-radius:inherit; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }

/* ── Fun Fact Item ── */
.fun-fact-item {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--sp-3);
    padding:       var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    background:    var(--bg-tag);
    border-left:   3px solid var(--accent);
    margin-bottom: var(--sp-2);
    font-size:     0.9rem;
    color:         var(--text-secondary);
    line-height:   1.6;
    animation:     fadeSlideIn 0.4s ease forwards;
}
.fun-fact-emoji { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
@keyframes fadeSlideIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Quote ── */
.quote-wrap {
    position:  relative;
    padding:   var(--sp-5) var(--sp-6);
    background: var(--bg-tag);
    border-radius: var(--r-xl);
    border-left: 4px solid var(--accent);
}
.quote-icon {
    font-size:   4rem;
    color:       var(--accent-light);
    position:    absolute;
    top:         -8px;
    left:        var(--sp-4);
    font-family: Georgia, serif;
    line-height: 1;
}
.quote-text   { font-size:1.05rem; color:var(--text-primary); font-style:italic; line-height:1.7; padding-left:var(--sp-5); margin-bottom:var(--sp-3); }
.quote-author { font-size:0.82rem; font-weight:700; color:var(--accent); text-align:right; }

/* ── Future Year Card ── */
.future-year-card {
    background:     var(--bg-tag);
    border:         1px solid var(--border);
    border-radius:  var(--r-xl);
    padding:        var(--sp-5) var(--sp-4);
    text-align:     center;
    transition:     all var(--t-fast);
    cursor:         default;
}
.future-year-card:hover { border-color: var(--border-active); background: var(--accent-light); transform: translateY(-2px); }
.future-year-card.current { border-color: var(--accent); background: rgba(124,111,255,0.10); }
.fyc-year  { font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.fyc-age   { font-family:var(--font-display); font-size:2rem; font-weight:900; color:var(--text-primary); margin-bottom:4px; line-height:1; }
.fyc-label { font-size:0.78rem; color:var(--text-muted); }
.fyc-ctx   { font-size:0.8rem; color:var(--accent); font-weight:600; margin-top:6px; }

/* ── Time Machine Card ── */
.time-machine-card {
    border-radius: var(--r-xl);
    padding:       var(--sp-6) var(--sp-5);
    text-align:    center;
    cursor:        default;
}
.tm-past   { background: rgba(139,92,246,0.10); border: 1px solid rgba(139,92,246,0.25); }
.tm-future { background: rgba(79,172,254,0.10); border: 1px solid rgba(79,172,254,0.25); }
.tm-direction { font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:var(--sp-2); }
.tm-past .tm-direction { color: #8b5cf6; }
.tm-future .tm-direction { color: var(--accent-2); }
.tm-title  { font-size:0.9rem; font-weight:600; color:var(--text-secondary); margin-bottom:var(--sp-3); }
.tm-value  { font-family:var(--font-display); font-size:1.8rem; font-weight:900; color:var(--text-primary); margin-bottom:4px; }
.tm-date   { font-size:0.82rem; color:var(--text-muted); }

/* ── Share Card ── */
.share-card {
    width:          100%;
    max-width:      520px;
    border-radius:  var(--r-2xl);
    overflow:       hidden;
    background:     linear-gradient(135deg, #0a0f1c 0%, #1a1040 50%, #0a1628 100%);
    position:       relative;
    margin:         0 auto var(--sp-4);
    border:         1px solid rgba(124,111,255,0.30);
    box-shadow:     0 20px 60px rgba(0,0,0,0.60);
    min-height:     260px;
}
.share-card-mesh {
    position: absolute;
    inset:    0;
    background: radial-gradient(ellipse at 30% 50%, rgba(124,111,255,0.25) 0%, transparent 70%),
                radial-gradient(ellipse at 80% 30%, rgba(79,172,254,0.20) 0%, transparent 60%);
}
.share-card-inner {
    position: relative;
    padding:  var(--sp-8) var(--sp-8);
    z-index:  1;
}
.share-brand {
    font-family: var(--font-display);
    font-size:   0.85rem;
    font-weight: 700;
    color:       rgba(255,255,255,0.50);
    margin-bottom: var(--sp-4);
}
.share-brand i { color: var(--accent); }
.share-person-name {
    font-family: var(--font-display);
    font-size:   1.1rem;
    font-weight: 600;
    color:       rgba(255,255,255,0.80);
    margin-bottom: var(--sp-1);
}
.share-big-age {
    font-family:  var(--font-display);
    font-size:    3rem;
    font-weight:  900;
    color:        #fff;
    margin-bottom: var(--sp-5);
    line-height:  1;
    background:   var(--grad-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.share-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     var(--sp-3);
    margin-bottom: var(--sp-5);
}
.share-stat-item {
    background: rgba(255,255,255,0.07);
    border:     1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-lg);
    padding:    var(--sp-3) var(--sp-4);
}
.ssh-label { display:block; font-size:0.68rem; color:rgba(255,255,255,0.45); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.ssh-val   { font-family:var(--font-display); font-size:0.95rem; font-weight:700; color:#fff; }
.share-footer { font-size:0.72rem; color:rgba(255,255,255,0.35); }
.share-actions { display:flex; gap:var(--sp-3); flex-wrap:wrap; }

/* ── QR Section ── */
.qr-section { display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.qr-box {
    width:          200px;
    height:         200px;
    background:     #fff;
    border-radius:  var(--r-xl);
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
    overflow:       hidden;
    padding:        var(--sp-3);
    box-shadow:     var(--shadow-md);
}
.qr-box canvas, .qr-box img { max-width:100%; max-height:100%; }
.qr-info { flex:1; min-width:160px; }
.qr-info p { font-size:0.9rem; color:var(--text-secondary); line-height:1.6; margin-bottom:var(--sp-3); }

/* ── Comparison Grid ── */
.comparison-grid {
    display:     grid;
    grid-template-columns: 1fr auto 1fr;
    gap:         var(--sp-4);
    align-items: start;
}
.comparison-side { text-align:center; padding:var(--sp-4); }
.comp-avatar {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    background:    var(--accent-light);
    color:         var(--accent);
    font-size:     1.5rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin:        0 auto var(--sp-2);
}
.them-side .comp-avatar { background:rgba(240,147,251,0.15); color:var(--accent-3); }
.comp-name  { font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.comp-age   { font-size:0.85rem; color:var(--text-muted); }
.comparison-middle { display:flex; align-items:center; justify-content:center; padding-top:var(--sp-4); }
.vs-badge { width:40px; height:40px; background:var(--grad-main); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; box-shadow:var(--shadow-accent); }
.comp-result-wrap {
    margin-top:    var(--sp-5);
    padding:       var(--sp-4) var(--sp-5);
    background:    var(--bg-tag);
    border-radius: var(--r-xl);
    border:        1px solid var(--border-active);
    text-align:    center;
}
.comp-result-headline { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--text-primary); margin-bottom:var(--sp-2); }
.comp-result-details  { font-size:0.88rem; color:var(--text-secondary); line-height:1.6; }

/* ── Caption Box ── */
.caption-box {
    padding:       var(--sp-4) var(--sp-5);
    background:    var(--bg-tag);
    border:        1px dashed var(--border-active);
    border-radius: var(--r-xl);
    font-size:     0.92rem;
    color:         var(--text-secondary);
    line-height:   1.7;
    min-height:    80px;
    font-style:    italic;
}

/* ── Personality Trait Bar ── */
.personality-trait {
    margin-bottom: var(--sp-4);
}
.pt-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.pt-name   { font-size:0.875rem; font-weight:600; color:var(--text-primary); }
.pt-score  { font-size:0.8rem; font-weight:700; color:var(--accent); }
.pt-bar-track {
    height:        8px;
    background:    var(--bg-tag);
    border-radius: var(--r-full);
    overflow:      hidden;
}
.pt-bar-fill {
    height:        100%;
    border-radius: var(--r-full);
    background:    var(--grad-main);
    transition:    width 1s cubic-bezier(0.4,0,0.2,1);
}

/* ── Compat Score Ring ── */
.compat-score-wrap { text-align:center; padding:var(--sp-3); }
.compat-score-ring {
    width:         90px;
    height:        90px;
    border-radius: 50%;
    border:        4px solid var(--border);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin:        0 auto var(--sp-2);
    background:    var(--bg-tag);
    transition:    border-color var(--t-normal), background var(--t-normal);
}
.compat-score-pct { font-family:var(--font-display); font-size:1.6rem; font-weight:900; color:var(--text-primary); }
.compat-score-label { font-size:0.8rem; font-weight:600; color:var(--text-muted); }
.compat-desc {
    margin-top:    var(--sp-4);
    padding:       var(--sp-3) var(--sp-4);
    background:    var(--bg-tag);
    border-radius: var(--r-lg);
    font-size:     0.88rem;
    color:         var(--text-secondary);
    line-height:   1.6;
}
.compat-me { text-align:center; }
.compat-glyph { font-size:3rem; margin-bottom:6px; }
.compat-my-name { font-size:0.85rem; font-weight:600; color:var(--text-secondary); }
.compat-heart-icon { font-size:1.8rem; }

/* ── Toast ── */
.toast-wrap {
    position:  fixed;
    bottom:    var(--sp-6);
    right:     var(--sp-6);
    z-index:   var(--z-toast);
    pointer-events: none;
}
.app-toast {
    display:        flex;
    align-items:    center;
    gap:            var(--sp-3);
    padding:        12px 20px;
    background:     rgba(16,24,40,0.95);
    backdrop-filter: blur(16px);
    border:         1px solid var(--border);
    border-radius:  var(--r-xl);
    box-shadow:     var(--shadow-lg);
    color:          var(--text-primary);
    font-size:      0.9rem;
    font-weight:    500;
    transform:      translateY(16px);
    opacity:        0;
    transition:     transform var(--t-normal), opacity var(--t-normal);
    pointer-events: none;
    max-width:      340px;
}
.app-toast.visible {
    transform:  translateY(0);
    opacity:    1;
    pointer-events: all;
}
.toast-ico { font-size:1.1rem; }
[data-theme="light"] .app-toast { background:rgba(255,255,255,0.97); }

/* ── Milestone Overlay ── */
.milestone-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index:    var(--z-overlay);
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    var(--sp-4);
}
.milestone-overlay.hidden { display:none; }
.milestone-dialog {
    background:    var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border:        1px solid var(--glass-border);
    border-radius: var(--r-3xl);
    padding:       var(--sp-12) var(--sp-8);
    text-align:    center;
    max-width:     440px;
    width:         100%;
    box-shadow:    var(--shadow-lg);
    animation:     milestoneIn 0.5s var(--t-spring) forwards;
}
@keyframes milestoneIn {
    from { opacity:0; transform:scale(0.7); }
    to   { opacity:1; transform:scale(1); }
}
.milestone-emoji    { font-size:4rem; margin-bottom:var(--sp-4); display:block; }
.milestone-headline { font-family:var(--font-display); font-size:1.8rem; font-weight:900; color:var(--text-primary); margin-bottom:var(--sp-3); }
.milestone-body     { font-size:1rem; color:var(--text-secondary); line-height:1.7; margin-bottom:var(--sp-6); }

/* ── Skeleton Loader ── */
.skeleton {
    background:    linear-gradient(90deg, var(--bg-tag) 25%, var(--bg-card-hover) 50%, var(--bg-tag) 75%);
    background-size: 200% 100%;
    animation:     shimmer 1.5s infinite;
    border-radius: var(--r-md);
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Life Progress Chart Center ── */
.life-progress-chart-wrap {
    position:  relative;
    max-width: 220px;
    margin:    0 auto;
}
.chart-center-text {
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%,-50%);
    text-align:     center;
    pointer-events: none;
}
.chart-pct {
    font-family:  var(--font-display);
    font-size:    1.6rem;
    font-weight:  900;
    color:        var(--text-primary);
    display:      block;
}
.chart-center-text small {
    font-size:  0.72rem;
    color:      var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Life Bar ── */
.life-bar-wrap { }
.life-bar-track {
    height:        12px;
    background:    var(--bg-tag);
    border-radius: var(--r-full);
    overflow:      visible;
    position:      relative;
}
.life-bar-fill {
    height:        100%;
    border-radius: var(--r-full);
    background:    var(--grad-main);
    transition:    width 1.2s cubic-bezier(0.4,0,0.2,1);
    position:      relative;
}
.life-bar-now {
    position:     absolute;
    top:          50%;
    width:        14px;
    height:       14px;
    background:   #fff;
    border:       3px solid var(--accent);
    border-radius: 50%;
    transform:    translate(-50%,-50%);
    box-shadow:   0 0 12px var(--accent);
    transition:   left 1.2s cubic-bezier(0.4,0,0.2,1);
    z-index:      2;
}
.life-bar-labels {
    display:         flex;
    justify-content: space-between;
    margin-top:      var(--sp-2);
    font-size:       0.74rem;
    color:           var(--text-muted);
    font-weight:     500;
}

/* ── Progress Stats Grid ── */
.progress-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.progress-stat-item { padding:var(--sp-3) var(--sp-4); background:var(--bg-tag); border-radius:var(--r-lg); border:1px solid var(--border); }
.psi-label { font-size:0.74rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; display:block; }
.psi-value { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--text-primary); }

/* ── Seconds Counter ── */
.seconds-counter-wrap { text-align:center; padding:var(--sp-6) 0; }
.seconds-big {
    font-family:   var(--font-display);
    font-size:     clamp(1.8rem,5vw,3rem);
    font-weight:   900;
    color:         transparent;
    background:    var(--grad-main);
    -webkit-background-clip: text;
    background-clip: text;
    letter-spacing: -0.02em;
    line-height:   1.1;
    margin-bottom: var(--sp-2);
    word-break:    break-all;
}
.seconds-label  { font-size:0.9rem; color:var(--text-muted); margin-bottom:var(--sp-3); }
.seconds-context { font-size:0.85rem; color:var(--text-secondary); font-style:italic; line-height:1.6; }

/* ── Time Dist Legend ── */
.time-dist-legend { }
.tdl-item {
    display:       flex;
    align-items:   center;
    gap:           var(--sp-3);
    padding:       var(--sp-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.tdl-item:last-child { border:none; }
.tdl-dot { width:12px; height:12px; border-radius:var(--r-full); flex-shrink:0; }
.tdl-label { flex:1; font-size:0.85rem; color:var(--text-secondary); }
.tdl-value { font-size:0.85rem; font-weight:700; color:var(--text-primary); }

/* ── Chart Container ── */
.chart-container { position:relative; padding:var(--sp-2); max-height:300px; }
.timeline-chart-container { position:relative; height:280px; padding:var(--sp-2); }

/* ═══════════════════════════════════════
   NEW FEATURE COMPONENTS
═══════════════════════════════════════ */

/* ── Generation Banner (Overview) ── */
.generation-banner {
    display:     flex;
    align-items: center;
    gap:         var(--sp-5);
    flex-wrap:   wrap;
}
.gen-emoji  { font-size:3rem; flex-shrink:0; filter:drop-shadow(0 0 12px rgba(124,111,255,0.4)); }
.gen-info   { flex:1; min-width:200px; }
.gen-tag    { font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.gen-name   { font-family:var(--font-display); font-size:1.35rem; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.gen-years  { font-size:0.82rem; color:var(--accent); font-weight:600; }
.gen-traits { display:flex; flex-wrap:wrap; gap:6px; }

/* ── Special Number Items ── */
.special-number-item {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--sp-3);
    padding:       var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    background:    var(--bg-tag);
    border-left:   3px solid var(--accent);
    margin-bottom: var(--sp-2);
    font-size:     0.88rem;
    color:         var(--text-secondary);
    line-height:   1.6;
}
.sni-emoji { font-size:1.2rem; flex-shrink:0; margin-top:1px; }

/* ── Other Units Grid ── */
.other-units-grid, .units-full-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-3);
}
.unit-item {
    padding:       var(--sp-3) var(--sp-4);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-lg);
    text-align:    center;
    transition:    all var(--t-fast);
}
.unit-item:hover { border-color:var(--border-active); background:var(--accent-light); }
.unit-emoji { font-size:1.4rem; margin-bottom:4px; }
.unit-value { font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--text-primary); margin-bottom:2px; }
.unit-label { font-size:0.72rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }

/* ── Famous Birthday Cards ── */
.famous-birthday-card {
    display:       flex;
    align-items:   center;
    gap:           var(--sp-4);
    padding:       var(--sp-3) var(--sp-4);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-2);
    transition:    all var(--t-fast);
}
.famous-birthday-card:hover { border-color:var(--border-active); transform:translateX(4px); }
.fb-year   { font-family:var(--font-display); font-size:0.85rem; font-weight:800; color:var(--accent); min-width:40px; }
.fb-name   { font-weight:700; color:var(--text-primary); font-size:0.92rem; }
.fb-desc   { font-size:0.78rem; color:var(--text-muted); }
.fb-empty  { font-size:0.9rem; color:var(--text-muted); font-style:italic; padding:var(--sp-4); }

/* ── Special Milestone Cards ── */
.special-milestones-grid, .smart-milestones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
}
.special-milestone-card {
    padding:       var(--sp-4);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-xl);
    text-align:    center;
    transition:    all var(--t-fast);
}
.special-milestone-card:hover { border-color:var(--border-active); transform:translateY(-2px); }
.smc-emoji { font-size:1.8rem; margin-bottom:var(--sp-2); display:block; }
.smc-title { font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.smc-value { font-family:var(--font-display); font-size:1.2rem; font-weight:900; color:var(--text-primary); margin-bottom:4px; }
.smc-sub   { font-size:0.78rem; color:var(--text-muted); }
.smc-done  { color:var(--success); font-size:0.78rem; font-weight:700; }

/* ── Alt Zodiac Card ── */
.alt-zodiac-card { border-top:3px solid var(--accent-4); }

/* ── Lucky Numbers/Colors ── */
.lucky-label { font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:var(--sp-2); }
.lucky-numbers-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.lucky-num {
    width:42px; height:42px; border-radius:50%;
    background:var(--grad-main); color:#fff;
    font-family:var(--font-display); font-size:1rem; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-accent);
    transition:transform var(--t-fast);
}
.lucky-num:hover { transform:scale(1.15) rotate(-5deg); }
.lucky-colors-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.lucky-color-chip {
    display:     flex;
    align-items: center;
    gap:         6px;
    padding:     6px 14px;
    border-radius: var(--r-full);
    font-size:   0.82rem;
    font-weight: 600;
    color:       #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transition:  transform var(--t-fast);
}
.lucky-color-chip:hover { transform:scale(1.05); }

/* ── Personality Color Card ── */
.personality-color-card {
    display:     flex;
    align-items: center;
    gap:         var(--sp-5);
    padding:     var(--sp-4);
    background:  var(--bg-tag);
    border-radius: var(--r-xl);
    flex-wrap:   wrap;
}
.pc-swatch {
    width:        80px;
    height:       80px;
    border-radius: var(--r-2xl);
    flex-shrink:  0;
    box-shadow:   var(--shadow-md);
    transition:   transform var(--t-spring);
}
.pc-swatch:hover { transform:scale(1.1) rotate(5deg); }
.pc-name { font-family:var(--font-display); font-size:1.2rem; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.pc-desc { font-size:0.85rem; color:var(--text-secondary); line-height:1.6; }

/* ── Body Stats Grid ── */
.body-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
}
.body-stat-item {
    display:       flex;
    align-items:   center;
    gap:           var(--sp-3);
    padding:       var(--sp-3) var(--sp-4);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-lg);
}
.bsi-emoji { font-size:1.4rem; flex-shrink:0; }
.bsi-val   { font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--text-primary); }
.bsi-label { font-size:0.74rem; color:var(--text-muted); }

/* ── World Context Grid ── */
.world-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
}
.world-ctx-item {
    padding:       var(--sp-4);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-xl);
    text-align:    center;
}
.wci-emoji { font-size:2rem; margin-bottom:var(--sp-2); display:block; }
.wci-value { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.wci-label { font-size:0.78rem; color:var(--text-muted); }

/* ── At Your Age ── */
.at-your-age-list, .at-age-full-list { }
.aya-item {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--sp-3);
    padding:       var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    background:    var(--bg-tag);
    border-left:   3px solid var(--warning);
    margin-bottom: var(--sp-2);
    transition:    all var(--t-fast);
}
.aya-item:hover { transform:translateX(4px); border-color:var(--accent); }
.aya-age   { font-family:var(--font-display); font-size:1.2rem; font-weight:900; color:var(--accent); min-width:36px; text-align:center; }
.aya-text  { font-size:0.88rem; color:var(--text-secondary); line-height:1.6; flex:1; }
.aya-name  { font-weight:700; color:var(--text-primary); }

/* ── Life Bingo ── */
.life-bingo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-2);
}
.bingo-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    padding:        var(--sp-3);
    background:     var(--bg-tag);
    border:         1px solid var(--border);
    border-radius:  var(--r-lg);
    text-align:     center;
    font-size:      0.78rem;
    color:          var(--text-muted);
    transition:     all var(--t-fast);
    position:       relative;
    overflow:       hidden;
}
.bingo-item.achieved {
    background:   rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.35);
    color:        var(--text-primary);
}
.bingo-item.achieved::after {
    content:'✓';
    position:     absolute;
    top:4px; right:6px;
    font-size:    0.7rem;
    color:        var(--success);
    font-weight:  800;
}
.bingo-emoji { font-size:1.4rem; }
.bingo-text  { line-height:1.4; }

/* ── Generation Hero Card (History Tab) ── */
.generation-hero-card { }
.gen-hero-inner {
    display:     flex;
    align-items: flex-start;
    gap:         var(--sp-6);
    flex-wrap:   wrap;
}
.gen-hero-emoji {
    font-size:   5rem;
    flex-shrink: 0;
    filter:      drop-shadow(0 0 24px rgba(124,111,255,0.50));
    animation:   cakeBounce 3s ease-in-out infinite;
}
.gen-hero-body  { flex:1; min-width:240px; }
.gen-hero-tag   { font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--sp-2); }
.gen-hero-name  { font-family:var(--font-display); font-size:clamp(1.5rem,3.5vw,2.2rem); font-weight:900; color:var(--text-primary); margin-bottom:var(--sp-2); letter-spacing:-0.02em; }
.gen-hero-years { font-size:0.85rem; color:var(--accent); font-weight:600; margin-bottom:var(--sp-3); }
.gen-hero-desc  { font-size:0.92rem; color:var(--text-secondary); line-height:1.75; margin-bottom:var(--sp-4); }
.gen-hero-traits { display:flex; flex-wrap:wrap; gap:6px; }

/* ── Moon Phase Card ── */
.moon-phase-card {
    display:     flex;
    align-items: center;
    gap:         var(--sp-6);
    padding:     var(--sp-4);
    background:  var(--bg-tag);
    border-radius: var(--r-xl);
    flex-wrap:   wrap;
}
.moon-phase-visual {
    font-size:   4.5rem;
    flex-shrink: 0;
    filter:      drop-shadow(0 0 20px rgba(255,255,255,0.25));
    animation:   iconPulse 3s ease-in-out infinite;
}
.moon-phase-info      { flex:1; min-width:200px; }
.moon-phase-name      { font-family:var(--font-display); font-size:1.4rem; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.moon-illumination    { font-size:0.82rem; color:var(--accent); font-weight:600; margin-bottom:var(--sp-2); }
.moon-phase-desc      { font-size:0.88rem; color:var(--text-secondary); line-height:1.65; }

/* ── Famous List Full ── */
.famous-birthdays-list, .famous-list-full { }

/* ── Tech Era ── */
.tech-era-wrap { padding:var(--sp-3); background:var(--bg-tag); border-radius:var(--r-xl); }
.tech-era-period { font-size:0.82rem; font-weight:700; color:var(--accent); margin-bottom:var(--sp-3); }
.tech-tags-row   { display:flex; flex-wrap:wrap; gap:8px; }
.tech-tag-chip {
    padding:       6px 14px;
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--r-full);
    font-size:     0.8rem;
    color:         var(--text-secondary);
    font-weight:   500;
    transition:    all var(--t-fast);
}
.tech-tag-chip:hover { border-color:var(--border-active); color:var(--accent); }

/* ── Biorhythm Components ── */
.biorhythm-chart-container { position:relative; height:320px; padding:var(--sp-2); }
.biorh-hero-header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   var(--sp-5);
    flex-wrap:       wrap;
    gap:             var(--sp-3);
}
.biorh-composite    { text-align:center; }
.biorh-comp-ring {
    width:           72px;
    height:          72px;
    border-radius:   50%;
    border:          4px solid var(--accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto var(--sp-1);
    background:      var(--accent-light);
}
.biorh-comp-val   { font-family:var(--font-display); font-size:1.2rem; font-weight:900; color:var(--text-primary); }
.biorh-comp-label { font-size:0.74rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }

.biorh-bars-grid  { display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.biorh-bar-row    { display:flex; align-items:center; gap:var(--sp-3); }
.biorh-bar-label  { display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600; color:var(--text-secondary); min-width:120px; }
.biorh-bar-track  {
    flex:          1;
    height:        12px;
    background:    var(--bg-tag);
    border-radius: var(--r-full);
    overflow:      visible;
    position:      relative;
}
.biorh-bar-center { position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--border); border-radius:1px; }
.biorh-bar-fill {
    position:      absolute;
    top:           0;
    height:        100%;
    border-radius: var(--r-full);
    transition:    width 1s ease, left 1s ease;
}
.biorh-bar-val { min-width:44px; font-size:0.82rem; font-weight:700; text-align:right; }
.biorh-interpretation {
    font-size:     0.88rem;
    color:         var(--text-secondary);
    line-height:   1.7;
    padding:       var(--sp-3) var(--sp-4);
    background:    var(--bg-tag);
    border-radius: var(--r-lg);
    border-left:   3px solid var(--accent-2);
}

.biorh-day-card {
    text-align:    center;
    padding:       var(--sp-5);
    border-radius: var(--r-xl);
    cursor:        default;
}
.biorh-best  { background:rgba(16,185,129,0.08);  border:1px solid rgba(16,185,129,0.25); }
.biorh-worst { background:rgba(245,158,11,0.08);  border:1px solid rgba(245,158,11,0.25); }
.biorh-day-icon  { font-size:2rem; margin-bottom:var(--sp-2); }
.biorh-day-label { font-size:0.74rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:var(--sp-2); }
.biorh-day-date  { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.biorh-day-sub   { font-size:0.8rem; color:var(--text-muted); }

.cycle-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
}
.cycle-info-card {
    padding:       var(--sp-4);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-xl);
    border-top:    3px solid var(--cycle-color, var(--accent));
    cursor:        default;
}
.cic-emoji  { font-size:1.5rem; margin-bottom:var(--sp-2); }
.cic-label  { font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.cic-period { font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.cic-desc   { font-size:0.78rem; color:var(--text-muted); line-height:1.5; }

.biorh-custom-result {
    padding:       var(--sp-4);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-xl);
    font-size:     0.88rem;
    color:         var(--text-secondary);
    line-height:   1.6;
    min-height:    56px;
    display:       flex;
    align-items:   center;
}

/* ── Numerology Grid ── */
.numerology-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-3);
}
.num-card {
    padding:       var(--sp-5) var(--sp-4);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-xl);
    text-align:    center;
    transition:    all var(--t-fast);
    cursor:        default;
}
.num-card:hover { border-color:var(--border-active); transform:translateY(-2px); }
.num-badge {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    background:    var(--grad-main);
    color:         #fff;
    font-family:   var(--font-display);
    font-size:     1.4rem;
    font-weight:   900;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin:        0 auto var(--sp-3);
    box-shadow:    var(--shadow-accent);
}
.num-label   { font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.num-meaning { font-size:0.82rem; color:var(--text-secondary); line-height:1.5; }

/* ── Personal Year Card ── */
.personal-year-card {
    padding:       var(--sp-5);
    background:    var(--bg-tag);
    border-radius: var(--r-xl);
    border:        1px solid var(--border-active);
    display:       flex;
    gap:           var(--sp-5);
    align-items:   center;
    flex-wrap:     wrap;
}
.py-number {
    font-family:   var(--font-display);
    font-size:     3.5rem;
    font-weight:   900;
    color:         transparent;
    background:    var(--grad-main);
    -webkit-background-clip: text;
    background-clip: text;
    flex-shrink:   0;
    line-height:   1;
}
.py-info { flex:1; }
.py-label   { font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.py-meaning { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--text-primary); margin-bottom:var(--sp-2); }
.py-desc    { font-size:0.85rem; color:var(--text-secondary); line-height:1.65; }

/* ── Name Numerology ── */
.name-numerology-content { font-size:0.9rem; color:var(--text-secondary); line-height:1.7; padding:var(--sp-2); }
.name-num-row {
    display:       flex;
    align-items:   center;
    gap:           var(--sp-4);
    padding:       var(--sp-3) var(--sp-4);
    background:    var(--bg-tag);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-2);
    border:        1px solid var(--border);
}
.nnr-num   { font-family:var(--font-display); font-size:1.5rem; font-weight:900; color:var(--accent); min-width:36px; }
.nnr-label { font-weight:700; color:var(--text-primary); font-size:0.9rem; }
.nnr-desc  { font-size:0.8rem; color:var(--text-muted); }

/* ── Birth Date Numbers Grid ── */
.birth-date-numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-3);
}
.bdn-item {
    padding:       var(--sp-4);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: var(--r-xl);
    text-align:    center;
}
.bdn-val   { font-family:var(--font-display); font-size:1.6rem; font-weight:900; color:var(--text-primary); margin-bottom:4px; }
.bdn-label { font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }

/* ── Responsive additions ── */
@media (max-width:767px) {
    .gen-hero-emoji { font-size:3.5rem; }
    .moon-phase-visual { font-size:3rem; }
    .biorhythm-chart-container { height:240px; }
    .biorh-bar-row { flex-wrap:wrap; }
    .biorh-bar-label { min-width:100px; }
    .gen-hero-name { font-size:1.5rem; }
    .other-units-grid { grid-template-columns: repeat(2, 1fr); }
}