Henry84003/Workout-Recommender

1:root {2    --bg-color: #0f172a;3    --card-bg: rgba(30, 41, 59, 0.7);4    --border-color: rgba(255, 255, 255, 0.1);5    --primary: #8b5cf6;6    --primary-hover: #7c3aed;7    --secondary: #ec4899;8    --text-main: #f8fafc;9    --text-muted: #94a3b8;10    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);11    --glass-blur: blur(12px);12}13 14* {15    margin: 0;16    padding: 0;17    box-sizing: border-box;18    font-family: 'Outfit', sans-serif;19}20 21body {22    background-color: var(--bg-color);23    color: var(--text-main);24    min-height: 100vh;25    display: flex;26    justify-content: center;27    align-items: center;28    overflow-x: hidden;29    position: relative;30    padding: 2rem;31}32 33/* Background Animated Shapes */34.background-shapes {35    position: fixed;36    top: 0;37    left: 0;38    width: 100vw;39    height: 100vh;40    z-index: -1;41    overflow: hidden;42}43 44.shape {45    position: absolute;46    border-radius: 50%;47    filter: blur(80px);48    opacity: 0.5;49    animation: float 20s infinite alternate ease-in-out;50}51 52.shape-1 {53    width: 400px;54    height: 400px;55    background: var(--primary);56    top: -100px;57    left: -100px;58}59 60.shape-2 {61    width: 500px;62    height: 500px;63    background: var(--secondary);64    bottom: -100px;65    right: -100px;66    animation-delay: -5s;67}68 69.shape-3 {70    width: 300px;71    height: 300px;72    background: #3b82f6;73    bottom: 20%;74    left: 20%;75    animation-delay: -10s;76}77 78@keyframes float {79    0% { transform: translate(0, 0) scale(1); }80    100% { transform: translate(100px, 50px) scale(1.2); }81}82 83.container {84    width: 100%;85    max-width: 800px;86    z-index: 1;87}88 89.header {90    text-align: center;91    margin-bottom: 2rem;92}93 94.header h1 {95    font-size: 3rem;96    font-weight: 700;97    letter-spacing: -1px;98    margin-bottom: 0.5rem;99}100 101.gradient-text {102    background: linear-gradient(135deg, var(--secondary), var(--primary));103    -webkit-background-clip: text;104    -webkit-text-fill-color: transparent;105}106 107.header p {108    color: var(--text-muted);109    font-size: 1.1rem;110}111 112/* Glassmorphism Panel */113.glass-panel {114    background: var(--card-bg);115    backdrop-filter: var(--glass-blur);116    -webkit-backdrop-filter: var(--glass-blur);117    border: 1px solid var(--border-color);118    border-radius: 24px;119    padding: 2rem;120    box-shadow: var(--glass-shadow);121}122 123/* Tabs */124.tabs {125    display: flex;126    gap: 1rem;127    margin-bottom: 2rem;128    border-bottom: 1px solid var(--border-color);129    padding-bottom: 1rem;130}131 132.tab-btn {133    background: none;134    border: none;135    color: var(--text-muted);136    font-size: 1.1rem;137    font-weight: 500;138    cursor: pointer;139    padding: 0.5rem 1rem;140    border-radius: 8px;141    transition: all 0.3s ease;142}143 144.tab-btn:hover {145    color: var(--text-main);146    background: rgba(255, 255, 255, 0.05);147}148 149.tab-btn.active {150    color: var(--text-main);151    background: rgba(139, 92, 246, 0.2);152    border: 1px solid rgba(139, 92, 246, 0.3);153}154 155.tab-content {156    display: none;157    animation: fadeIn 0.4s ease forwards;158}159 160.tab-content.active {161    display: block;162}163 164@keyframes fadeIn {165    from { opacity: 0; transform: translateY(10px); }166    to { opacity: 1; transform: translateY(0); }167}168 169/* Form Styles */170.form-grid {171    display: grid;172    grid-template-columns: 1fr 1fr;173    gap: 1.5rem;174}175 176.input-group {177    display: flex;178    flex-direction: column;179    gap: 0.5rem;180}181 182.full-width {183    grid-column: 1 / -1;184}185 186label {187    font-size: 0.95rem;188    font-weight: 500;189    color: var(--text-main);190}191 192input[type="number"] {193    background: rgba(15, 23, 42, 0.6);194    border: 1px solid var(--border-color);195    color: var(--text-main);196    padding: 1rem;197    border-radius: 12px;198    font-size: 1rem;199    outline: none;200    transition: all 0.3s ease;201}202 203input[type="number"]:focus {204    border-color: var(--primary);205    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);206}207 208/* Radio Buttons */209.radio-group {210    display: flex;211    gap: 1rem;212}213 214.radio-card {215    flex: 1;216    position: relative;217    cursor: pointer;218}219 220.radio-card input {221    position: absolute;222    opacity: 0;223    cursor: pointer;224}225 226.radio-content {227    display: flex;228    align-items: center;229    justify-content: center;230    background: rgba(15, 23, 42, 0.6);231    border: 1px solid var(--border-color);232    padding: 1rem;233    border-radius: 12px;234    transition: all 0.3s ease;235    font-weight: 500;236}237 238.radio-card input:checked ~ .radio-content {239    background: rgba(139, 92, 246, 0.2);240    border-color: var(--primary);241    color: var(--text-main);242}243 244/* Button */245.btn-primary {246    background: linear-gradient(135deg, var(--primary), var(--secondary));247    color: white;248    border: none;249    padding: 1rem;250    border-radius: 12px;251    font-size: 1.1rem;252    font-weight: 600;253    cursor: pointer;254    width: 100%;255    transition: all 0.3s ease;256    display: flex;257    justify-content: center;258    align-items: center;259    min-height: 54px;260}261 262.btn-primary:hover {263    transform: translateY(-2px);264    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);265}266 267.btn-primary:active {268    transform: translateY(0);269}270 271/* Loader */272.loader {273    width: 24px;274    height: 24px;275    border: 3px solid rgba(255, 255, 255, 0.3);276    border-radius: 50%;277    border-top-color: white;278    animation: spin 1s ease-in-out infinite;279}280 281@keyframes spin {282    to { transform: rotate(360deg); }283}284 285.hidden {286    display: none !important;287}288 289/* Result Section */290.result-container {291    margin-top: 2rem;292    text-align: center;293    padding-top: 2rem;294    border-top: 1px solid var(--border-color);295    animation: fadeIn 0.5s ease;296}297 298.result-container h3 {299    color: var(--text-muted);300    margin-bottom: 1rem;301    font-weight: 500;302}303 304.recommendation-card {305    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));306    border: 1px solid rgba(255, 255, 255, 0.2);307    padding: 1.5rem;308    border-radius: 16px;309    font-size: 1.5rem;310    font-weight: 700;311    color: #fff;312    text-shadow: 0 2px 4px rgba(0,0,0,0.3);313}314 315.description-text {316    margin-top: 1.5rem;317    color: var(--text-muted);318    font-size: 1.05rem;319    line-height: 1.6;320    padding: 0 1rem;321}322 323/* Gallery styles */324.evaluation-header {325    text-align: center;326    margin-bottom: 2rem;327}328 329.evaluation-header p {330    color: var(--text-muted);331}332 333.gallery {334    display: grid;335    grid-template-columns: 1fr;336    gap: 1.5rem;337    max-height: 60vh;338    overflow-y: auto;339    padding-right: 0.5rem;340}341 342.gallery::-webkit-scrollbar {343    width: 8px;344}345 346.gallery::-webkit-scrollbar-track {347    background: rgba(255, 255, 255, 0.05);348    border-radius: 4px;349}350 351.gallery::-webkit-scrollbar-thumb {352    background: var(--primary);353    border-radius: 4px;354}355 356.gallery-item {357    background: rgba(15, 23, 42, 0.6);358    border: 1px solid var(--border-color);359    border-radius: 16px;360    overflow: hidden;361    transition: transform 0.3s ease;362}363 364.gallery-item:hover {365    transform: scale(1.02);366}367 368.gallery-item img {369    width: 100%;370    height: auto;371    display: block;372}373 374.gallery-item p {375    padding: 1rem;376    text-align: center;377    font-weight: 500;378    font-size: 1.1rem;379    background: rgba(0, 0, 0, 0.2);380}381 382@media (max-width: 600px) {383    .form-grid {384        grid-template-columns: 1fr;385    }386}387