:root{--theme-color:#6b5b95;--theme-color-light:#8274aa;--theme-color-dark:#574a7b;--theme-color-disabled:#e5e5e5;--secondary-color:#f0f0f4;--secondary-hover:#e4e4ed;--text-primary:#2d2d2d;--text-secondary:#666;--text-light:#fff;--heart-default:#8274aa;--heart-active:#ff6b6b;--heart-hover:#ff8585;--heart-active-hover:#f33;--border-color:#e0e0e0;--shadow-color:rgba(107, 91, 149, 0.1);--error-color:#f8a50b;--small-font:0.8rem}.hidden{display:none}.calculation-heading{font-weight:bold;margin:5px
0 4px 2px}.form-group{margin:0px
0px 20px 0px}.button-container{display:flex;gap:0 10px}.button-container
div{width:100%}.button-container input[type="radio"]{display:none}input[type="radio"]:checked+label{background-color:var(--theme-color);color:var(--text-light)}.button-container
label{display:flex;justify-content:center;align-items:center;box-shadow:0 4px 12px var(--shadow-color);background-color:var(--text-light);border-radius:8px;padding:10px
20px;cursor:pointer;text-align:center;color:var(--text-primary)}.button-container label:hover{background-color:var(--secondary-color)}.option{padding:10px
20px;background-color:var(--secondary-color);border:none;cursor:pointer;flex:1;border-radius:8px;transition:all 0.3s ease;color:var(--text-primary)}.option:hover{background-color:var(--theme-color-light)}.option.active{background-color:var(--theme-color);color:var(--text-light)}.ng-action-button{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:15px;background-color:var(--theme-color);color:var(--text-light);border:none;border-radius:8px;cursor:pointer;font-size:18px;font-family:"Jost","Arial",sans-serif;margin-top:15px;transition:background-color 0.3s ease}.ng-action-button.hidden{display:none}.ng-action-button:hover{background-color:var(--theme-color-light)}.ng-action-button:disabled{background-color:var(--theme-color-disabled, gray);color:#727272;cursor:not-allowed;opacity:0.6}.ng-action-button
svg{stroke:white;margin-right:8px}.ng-action-button:disabled
svg{stroke:#727272;margin-right:8px}.name-cards{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;margin-top:10px}.gender-label{color:var(--text-secondary);margin-bottom:12px;font-size:14px}.stats{display:flex;justify-content:center;gap:24px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-text{color:var(--text-secondary);font-size:14px;margin-bottom:2px}.stat-icon{width:14px;height:14px;opacity:0.6;margin-left:8px}.name-card{position:relative;background-color:white;border-radius:8px;padding:15px;box-shadow:0 4px 12px var(--shadow-color);transition:transform 0.2s ease;max-width:400px}.name-card .first-row{display:flex;justify-content:space-between;align-items:center}.name{font-size:24px;font-weight:bold;color:var(--theme-color)}.detail{font-size:14px;margin:3px
0 0 4px;color:#666}.trend{display:inline-flex;align-items:center;margin-top:10px;padding:5px
10px;border-radius:15px;font-size:12px}.trend.positive{background:#e6ffe6;color:#060}.trend.neutral{background:#f0f0f0;color:#666}.trend.negative{background:#ffe6e6;color:#c00}.stats{font-size:14px;color:var(--text-secondary)}.favorite-btn{background-color:var(--secondary-color);border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all 0.3s ease}.favorite-btn .heart-icon{width:24px;height:24px;stroke:#888}.favorite-btn.active .heart-icon{fill:var(--heart-active);stroke:var(--heart-active)}.submission-status{margin:1rem 0;padding:1rem;border-radius:4px;font-size:0.9rem;opacity:1;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;transform:translateY(0)}.submission-status.hidden{display:none;opacity:0;transform:translateY(-10px);pointer-events:none}.submission-status.error{background-color:#ffebee;color:#c62828;border:1px
solid #ffcdd2}.submission-status.info{background-color:#e3f2fd;color:#0d47a1;border:1px
solid #bbdefb}.explanation{font-style:italic;margin:10px
0;color:#666;font-size:var(--small-font)}.favorites-section{margin:20px
0;opacity:1;transition:opacity 0.3s ease-in-out;padding:15px;border-radius:8px;background-color:var(--secondary-color)}.favorites-cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:16px}.favorite-card{display:flex;justify-content:space-between;align-items:center;padding:12px;background-color:white;border-radius:8px;opacity:1;transition:opacity 0.3s ease-in-out}.favorite-card.fade-out{opacity:0}.ng-action-button.active{background-color:#4a5568;transform:translateY(2px);box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.2)}.no-favorites-text{font-size:var(--small-font);font-style:italic;grid-column:1 / -1;text-align:center;color:#666;padding:20px}@media screen and (max-width: 550px){.name-cards{grid-template-columns:1fr}}@media (hover: hover){.favorite-btn:hover{background-color:var(--secondary-hover)}.favorite-btn:hover .heart-icon{fill:var(--heart-hover);stroke:var(--heart-hover)}.favorite-btn.active:hover .heart-icon{fill:var(--heart-active-hover);stroke:var(--heart-active-hover)}}.ng-action-button.loading{position:relative;color:transparent;pointer-events:none}.ng-action-button.loading
svg{opacity:0}.ng-action-button.loading::after{content:"";position:absolute;width:20px;height:20px;border:3px
solid rgba(255, 255, 255, 0.3);border-radius:50%;border-top-color:white;animation:spin 0.8s linear infinite;left:50%;top:50%;margin-left:-10px;margin-top:-10px}@keyframes
spin{to{transform:rotate(360deg)}}.skeleton-card{height:140px;background:#f6f7f8;position:relative;overflow:hidden;border:1px
solid var(--border-color)}.skeleton-card::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0)
);animation:shimmer 2s infinite}.skeleton-line{background:#e0e0e0;border-radius:4px;margin-bottom:10px}.skeleton-title{width:60%;height:24px;margin-bottom:20px}.skeleton-detail{width:40%;height:14px}@keyframes
shimmer{100%{transform:translateX(100%)}}.favorites-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.favorites-header .calculation-heading{flex-grow:1;text-align:left;margin:0}.clear-favorites-btn{background:none;border:1px
solid var(--theme-color-light);color:var(--theme-color);padding:8px
12px;border-radius:6px;cursor:pointer;font-size:var(--small-font);font-weight:500;transition:all 0.2s ease;white-space:nowrap}.clear-favorites-btn:hover{background-color:var(--theme-color);color:var(--text-light)}