:root{font-family:Lora,serif;line-height:1.5;font-weight:400;color-scheme:light;color:#45556c;background-color:#f8f4f0;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#615fff;text-decoration:inherit}a:hover{color:#4e4de6}body{width:100%;margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1;color:#0f172b;font-weight:900;font-family:Fraunces,serif}h2,h3{font-family:Fraunces,serif;font-weight:700}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f8f4f0;cursor:pointer;transition:border-color .25s}button:hover{border-color:#615fff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.app-header{position:fixed;top:0;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#f8f6f2d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(15,23,43,.08);z-index:100}.header-brand{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}.header-logo{height:32px;width:auto}.header-name{color:#0f172b;font-size:1rem;font-weight:700;font-family:Fraunces,serif;letter-spacing:.03em;white-space:nowrap}.header-avatar-wrap{position:relative}.header-user{display:flex;align-items:center;gap:10px;cursor:pointer}.header-nickname{font-size:.85rem;font-family:Lora,serif;color:#45556c;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-avatar{width:38px;height:38px;border-radius:50%;background:transparent;color:#fff;font-weight:700;font-size:1rem;border:2px solid #615fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .2s;overflow:hidden;flex-shrink:0;padding:0}.header-avatar--initials{background:#615fff}.header-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.header-avatar:hover{opacity:.85}.header-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:#f8f4f0;border:1px solid rgba(15,23,43,.1);border-radius:10px;overflow:hidden;min-width:170px;box-shadow:0 8px 24px #0f172b26}.header-dropdown button{display:block;width:100%;padding:12px 16px;text-align:left;background:none;border:none;color:#45556c;font-size:.9rem;font-family:Lora,serif;cursor:pointer;transition:background .15s}.header-dropdown button:hover{background:#0f172b0f}.header-dropdown button.logout{color:#ff6b6b;border-top:1px solid rgba(15,23,43,.08)}.auth-layout-main{padding-top:60px}.landing-page{display:flex;justify-content:center;align-items:center;height:100vh;background:#f8f4f0}.landing-content{display:flex;flex-direction:column;align-items:center;gap:32px}.landing-hero{display:flex;align-items:center;gap:24px}.landing-animation{width:480px;flex-shrink:0}.landing-hero-img{width:384px;height:auto;object-fit:contain;flex-shrink:0}.join-btn{padding:16px 48px;border:none;border-radius:50px;background:#615fff;color:#fff;font-size:1.2rem;font-weight:700;font-family:Lora,serif;letter-spacing:.1em;cursor:pointer;transition:opacity .2s,transform .2s}.join-btn:hover{opacity:.9;transform:scale(1.04)}.wheel-page{display:flex;justify-content:center;gap:10rem;flex-direction:row;height:100vh;transition:background-color .5s ease}.wheel-left{display:flex;justify-content:center;align-items:center}.wheel-right{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}.emotion-icon-display{display:flex;justify-content:center;align-items:center;width:120px;height:120px;border-radius:50%;box-shadow:0 4px 16px #00000026;transition:background .4s ease}.feel-row{display:flex;flex-direction:row;align-items:center;gap:12px}.feel-text{font:700 2rem Fraunces,serif;color:#0f172b;white-space:nowrap}.wheel-container{position:relative;display:inline-block;overflow:hidden}#wheel{display:block}.spin-btn{font:700 1.2em Fraunces,serif;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;top:50%;left:50%;width:15%;height:15%;transform:translate(-50%,-50%);background:#fff;color:#0f172b;box-shadow:0 0 0 8px currentColor,0 0 15px 5px #0009;border-radius:50%;transition:.8s}.open-song-btn{padding:16px 48px;border:none;border-radius:50px;background:#615fff;color:#fff;font-size:1.2rem;font-weight:700;font-family:Lora,serif;letter-spacing:.1em;cursor:pointer;transition:opacity .2s,transform .2s}.open-song-btn:hover{opacity:.9;transform:scale(1.04)}.error-popup{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background:#333;color:#fff;padding:.75rem 1.25rem;border-radius:8px;display:flex;align-items:center;gap:1rem;font:500 .95rem Fraunces,serif;z-index:2000;box-shadow:0 4px 16px #0000004d}.error-popup-close{background:none;border:none;color:#fff;cursor:pointer;font-size:1rem;padding:0;line-height:1}.spin-btn:after{content:"";position:absolute;top:-150px;left:50%;transform:translate(-50%);border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:150px solid currentColor}.emotions-dropdown{position:relative;display:inline-block}.emotions-trigger{display:flex;align-items:center;gap:8px;padding:9px 14px;background:#f8f4f0;border:1px solid rgba(15,23,43,.15);border-radius:10px;color:#0f172b;font-size:.9rem;font-family:Lora,serif;cursor:pointer;min-width:240px;transition:border-color .2s,background .2s;text-align:left}.emotions-trigger:hover{background:#f0eeea}.emotions-placeholder{color:#45556c;flex:1}.emotions-trigger span:not(.emotions-placeholder){flex:1}.emotions-chevron{margin-left:auto;color:#45556c;transition:transform .2s;flex-shrink:0}.emotions-chevron.open{transform:rotate(180deg)}.emotions-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#f8f4f0;border:1px solid rgba(15,23,43,.1);border-radius:12px;overflow:hidden;list-style:none;margin:0;padding:4px;box-shadow:0 8px 24px #0f172b1f;z-index:200}.emotions-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:none;border:none;border-radius:8px;color:#45556c;font-size:.9rem;font-family:Lora,serif;cursor:pointer;text-align:left;transition:background .15s}.emotions-item:hover{background:#0f172b0f}.emotions-item.active{background:#0f172b14}.emotions-icon-wrap{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;flex-shrink:0}.modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:16px;padding:2rem 2rem 1.5rem;width:min(560px,92vw);position:relative;box-shadow:0 8px 32px #0003;display:flex;flex-direction:column;gap:1rem}.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.2rem;cursor:pointer;color:#666;line-height:1;padding:.25rem .5rem;border-radius:4px}.modal-close:hover{background:#f0f0f0}.modal-title{font:700 1.2rem Fraunces,serif;color:#0f172b;margin:0;padding-right:2rem}.modal-video{position:relative;width:100%;aspect-ratio:16 / 9}.modal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;border-radius:8px}.modal-links{display:flex;gap:1rem}.modal-link{font:600 .95rem Fraunces,serif;color:#0f172b;text-decoration:underline;text-underline-offset:3px}.modal-link:hover{opacity:.7}.auth-page{display:flex;justify-content:center;align-items:center;height:100vh;background:#f8f4f0}.auth-card{background:#fff;border:1px solid rgba(15,23,43,.1);border-radius:16px;padding:40px;width:100%;max-width:400px;color:#0f172b}.auth-card h1{margin:0 0 28px;font-size:1.8rem;font-weight:900;font-family:Fraunces,serif;text-align:center;letter-spacing:.05em;color:#0f172b}.auth-field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}.auth-field label{font-size:.85rem;color:#45556c}.auth-field input{padding:10px 14px;border-radius:8px;border:1px solid rgba(15,23,43,.15);background:#f8f4f0;color:#0f172b;font-size:1rem;font-family:Lora,serif;outline:none;transition:border-color .2s}.auth-field input:focus{border-color:#615fff}.auth-dob{display:flex;gap:8px}.auth-dob select{padding:10px;border-radius:8px;border:1px solid rgba(15,23,43,.15);background:#f8f4f0;color:#0f172b;font-size:1rem;font-family:Lora,serif;outline:none;transition:border-color .2s;cursor:pointer;appearance:none}.auth-dob select:focus{border-color:#615fff}.auth-dob-month{flex:2}.auth-dob-day{flex:1}.auth-dob-year{flex:1.5}.auth-error{color:#ff6b6b;font-size:.85rem;margin-bottom:14px;text-align:center}.auth-submit{width:100%;padding:12px;border:none;border-radius:8px;background:#615fff;color:#fff;font-size:1rem;font-weight:700;font-family:Lora,serif;cursor:pointer;transition:opacity .2s;margin-top:4px}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-submit:hover:not(:disabled){opacity:.9}.auth-link{text-align:center;margin-top:20px;font-size:.9rem;color:#45556c}.auth-link a{color:#615fff;text-decoration:none}.auth-link a:hover{text-decoration:underline}.profile-page{min-height:100vh;background:#f8f4f0;padding:80px 24px 40px;display:flex;justify-content:center}.profile-container{width:100%;max-width:960px}.profile-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.profile-col{display:flex;flex-direction:column;gap:20px}.profile-section--fill{height:100%}@media(max-width:640px){.profile-columns{grid-template-columns:1fr}}.profile-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}.profile-header h1{margin:0;font-size:1.8rem;font-weight:900;font-family:Fraunces,serif;color:#0f172b;letter-spacing:.03em}.profile-back{background:none;border:none;color:#615fff;font-size:.9rem;font-family:Lora,serif;cursor:pointer;padding:0;white-space:nowrap}.profile-back:hover{text-decoration:underline}.profile-section{background:#fff;border:1px solid rgba(15,23,43,.1);border-radius:16px;padding:28px 32px;color:#0f172b}.profile-section h2{margin:0 0 16px;font-size:1.1rem;font-weight:700;font-family:Fraunces,serif;letter-spacing:.03em}.profile-hint{font-size:.9rem;color:#45556c;margin:0 0 16px;font-family:Lora,serif}.profile-hint strong{color:#0f172b}.avatar-form{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.avatar-preview-wrap{display:flex;align-items:center;gap:20px}.avatar-preview-img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid rgba(15,23,43,.1)}.avatar-preview-placeholder{width:72px;height:72px;border-radius:50%;background:#615fff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700}.avatar-change-btn{background:none;border:1px solid rgba(15,23,43,.2);border-radius:8px;padding:8px 14px;font-size:.85rem;font-family:Lora,serif;color:#45556c;cursor:pointer;transition:border-color .2s,color .2s}.avatar-change-btn:hover{border-color:#615fff;color:#615fff}.avatar-file-input{display:none}.profile-form{display:flex;flex-direction:column;gap:16px}.profile-field{display:flex;flex-direction:column;gap:6px}.profile-field label{font-size:.85rem;color:#45556c;font-family:Lora,serif}.profile-field input{padding:10px 14px;border-radius:8px;border:1px solid rgba(15,23,43,.15);background:#f8f4f0;color:#0f172b;font-size:1rem;font-family:Lora,serif;outline:none;transition:border-color .2s}.profile-field input:focus{border-color:#615fff}.profile-btn{padding:11px 22px;border:none;border-radius:8px;background:#615fff;color:#fff;font-size:.95rem;font-weight:700;font-family:Lora,serif;cursor:pointer;transition:opacity .2s;align-self:flex-start}.profile-btn:disabled{opacity:.6;cursor:not-allowed}.profile-btn:hover:not(:disabled){opacity:.88}.profile-success{font-size:.85rem;color:#2e7d32;margin:0;font-family:Lora,serif}.profile-error{font-size:.85rem;color:#ff6b6b;margin:0;font-family:Lora,serif}.edit-songs-page{min-height:100vh;background:#f8f4f0;padding:80px 24px 40px;display:flex;justify-content:center}.edit-songs-container{width:100%;max-width:960px}.edit-songs-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}.edit-songs-header h1{margin:0;font-size:1.8rem;font-weight:900;font-family:Fraunces,serif;color:#0f172b;letter-spacing:.03em}.edit-songs-back{background:none;border:none;color:#615fff;font-size:.9rem;font-family:Lora,serif;cursor:pointer;padding:0;flex-shrink:0}.edit-songs-back:hover{text-decoration:underline}.edit-songs-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;max-width:360px}.edit-songs-label{font-size:.85rem;font-family:Lora,serif;color:#45556c;font-weight:600}.edit-songs-select{padding:10px 14px;border:1.5px solid rgba(15,23,43,.15);border-radius:8px;background:#fff;color:#0f172b;font-size:.95rem;font-family:Lora,serif;cursor:pointer;outline:none;transition:border-color .15s}.edit-songs-select:focus{border-color:#615fff}.edit-songs-error{color:#e53e3e;font-size:.9rem;font-family:Lora,serif;margin-bottom:16px}.edit-songs-loading,.edit-songs-empty{color:#45556c;font-size:.9rem;font-family:Lora,serif}.edit-songs-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid rgba(15,23,43,.1);box-shadow:0 2px 12px #0f172b0f}.edit-songs-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-family:Lora,serif}.edit-songs-table thead tr{background:#0f172b}.edit-songs-table th{padding:12px 16px;text-align:left;font-size:.8rem;font-weight:700;color:#f8f6f2d9;letter-spacing:.05em;text-transform:uppercase;font-family:Fraunces,serif}.edit-songs-table td{padding:12px 16px;font-size:.9rem;color:#0f172b;border-bottom:1px solid rgba(15,23,43,.06);vertical-align:middle}.edit-songs-table tbody tr:last-child td{border-bottom:none}.edit-songs-table tbody tr:hover{background:#615fff0a}.edit-songs-num{color:#45556c;font-size:.8rem;width:36px}.edit-songs-name{font-weight:600}.edit-songs-genres{display:flex;flex-wrap:wrap;gap:6px}.edit-songs-genre-tag{display:inline-block;padding:3px 10px;background:#615fff1a;color:#615fff;border-radius:20px;font-size:.78rem;font-weight:600;white-space:nowrap}.edit-songs-header{justify-content:flex-start}.edit-songs-header h1{flex:1}.edit-songs-add-btn{padding:9px 18px;background:#615fff;color:#fff;border:none;border-radius:8px;font-size:.9rem;font-family:Lora,serif;font-weight:600;cursor:pointer;flex-shrink:0;transition:opacity .15s}.edit-songs-add-btn:hover{opacity:.88}.edit-songs-edit-btn{padding:5px 14px;background:none;border:1.5px solid #615fff;border-radius:6px;color:#615fff;font-size:.8rem;font-family:Lora,serif;font-weight:600;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.edit-songs-edit-btn:hover{background:#615fff;color:#fff}.song-modal-overlay{position:fixed;inset:0;background:#0f172b80;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}.song-modal{background:#f8f4f0;border-radius:16px;width:100%;max-width:580px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0f172b40}.song-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}.song-modal-header h2{margin:0;font-size:1.3rem;font-weight:900;font-family:Fraunces,serif;color:#0f172b}.song-modal-close{background:none;border:none;font-size:1.6rem;color:#45556c;cursor:pointer;line-height:1;padding:0 4px;transition:color .15s}.song-modal-close:hover{color:#0f172b}.song-modal-body{padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.song-modal-row{display:flex;flex-direction:column;gap:6px}.song-modal-row label{font-size:.82rem;font-family:Lora,serif;font-weight:600;color:#45556c}.song-modal-row input{padding:9px 12px;border:1.5px solid rgba(15,23,43,.15);border-radius:8px;background:#fff;font-size:.92rem;font-family:Lora,serif;color:#0f172b;outline:none;transition:border-color .15s}.song-modal-row input:focus{border-color:#615fff}.song-modal-row input.error{border-color:#e53e3e}.song-modal-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:480px){.song-modal-two-col{grid-template-columns:1fr}}.req{color:#e53e3e}.field-error{font-size:.78rem;color:#e53e3e;font-family:Lora,serif}.song-modal-checkboxes{display:flex;flex-wrap:wrap;gap:8px 16px}.checkbox-label{display:flex;align-items:center;gap:6px;font-size:.88rem;font-family:Lora,serif;color:#0f172b;cursor:pointer}.checkbox-label input[type=checkbox]{accent-color:#615fff;width:15px;height:15px;cursor:pointer}.song-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 20px;border-top:1px solid rgba(15,23,43,.08)}.song-modal-cancel{padding:9px 20px;background:none;border:1.5px solid rgba(15,23,43,.2);border-radius:8px;font-size:.9rem;font-family:Lora,serif;color:#45556c;cursor:pointer;transition:background .15s}.song-modal-cancel:hover:not(:disabled){background:#0f172b0d}.song-modal-save{padding:9px 20px;background:#615fff;border:none;border-radius:8px;font-size:.9rem;font-family:Lora,serif;font-weight:600;color:#fff;cursor:pointer;transition:opacity .15s}.song-modal-save:hover:not(:disabled){opacity:.88}.song-modal-cancel:disabled,.song-modal-save:disabled{opacity:.5;cursor:not-allowed}