.register-form{max-width:400px;margin:60px auto;background:#fff;padding:32px;border-radius:10px;box-shadow:0 4px 20px #0000000d;display:flex;flex-direction:column;gap:16px}.register-form h2{font-size:22px;font-weight:700;margin-bottom:8px;text-align:center}.register-form input{padding:10px 14px;border-radius:5px;border:1px solid #d1d5db;font-size:14px;outline:none}.register-form input:focus{border-color:#2e2e2e;box-shadow:0 0 0 2px #ede9fe}.register-form button{background:#1a1a1a;color:#fff;font-size:14px;padding:10px;border:none;border-radius:5px;cursor:pointer;transition:background .2s ease}.register-form button:hover{background:#3f3f3f}.login-form{max-width:400px;margin:60px auto;background:#fff;padding:32px;border-radius:10px;box-shadow:0 4px 20px #0000000d;display:flex;flex-direction:column;gap:16px}.login-form h2{font-size:22px;font-weight:700;margin-bottom:8px;text-align:center}.login-form input{padding:10px 14px;border-radius:5px;border:1px solid #d1d5db;font-size:14px;outline:none}.login-form input:focus{border-color:#333;box-shadow:0 0 0 2px #ede9fe}.login-form button{background:#1a1a1a;color:#fff;font-size:14px;padding:10px;border:none;border-radius:5px;cursor:pointer;transition:background .2s ease}.login-form button:hover{background:#303030}.profile-page{max-width:960px;margin:0 auto;padding:40px 20px;background-color:#f3f4f6;min-height:100vh;box-sizing:border-box}.profile-box{background:#fff;border-radius:16px;padding:32px;box-shadow:0 6px 20px #0000000d;display:flex;align-items:center;gap:32px;max-width:960px;margin:0 auto 40px;box-sizing:border-box}.profile-avatar,.profile-avatar-placeholder{width:100px;height:100px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:3px solid rgb(82,82,82);flex-shrink:0;box-shadow:0 4px 10px #00000026}.profile-avatar-placeholder{background-color:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:30px;font-weight:700}.profile-info{flex:1;display:flex;flex-direction:column;gap:6px}.profile-info h2{font-size:20px;font-weight:700;color:#111827;margin:0}.bio{font-style:italic;color:#374151;font-size:14px;margin-top:6px}.profile-info p{font-size:14px;color:#6b7280;margin:2px 0}.profile-info-top{display:flex;justify-content:space-between;align-items:center}.profile-box h2{font-size:24px;font-weight:700;margin-bottom:6px;color:#111827}.profile-box p{font-size:14px;color:#6b7280;margin:2px 0}.profile-box .bio{font-style:italic;color:#374151;margin-top:14px;line-height:1.5;font-size:15px}.edit-btn{padding:4px 10px;background:#1f1f1f;color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap}.edit-btn:hover{background-color:#383838}.record-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.record-card-link{text-decoration:none;color:inherit;display:block}.record-card.vinyl-style{position:relative;aspect-ratio:1 / 1;overflow:hidden;border-radius:12px;box-shadow:0 4px 12px #0003;background:transparent;transition:transform .3s ease}.record-card.vinyl-style:hover{transform:scale(1.02)}.vinyl-full{position:absolute;width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle,#111 0,#111 2px,#1a1a1a 2px,#1a1a1a 4px);box-shadow:inset 0 0 10px #00000080;z-index:1;transition:transform 3s linear}.vinyl-style:hover .vinyl-full{transform:rotate(360deg)}.vinyl-full:after{content:"";position:absolute;width:22%;height:22%;border-radius:50%;background:radial-gradient(circle,#fff,#ddd 90%);top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 4px #0000004d}.record-overlay{position:absolute;top:0;right:0;width:25%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:2;border-top-right-radius:12px;border-bottom-right-radius:12px;box-shadow:-4px 0 10px #0003}.record-card-content{position:absolute;bottom:12px;left:12px;z-index:3;color:#fff;background:#0006;padding:8px 12px;border-radius:8px;font-size:14px}.record-card-content h4{font-size:16px;font-weight:600;margin-bottom:4px}.record-card-content p{font-size:14px;opacity:.9}.vinyl-hover{position:relative;width:100%;aspect-ratio:1 / 1;overflow:hidden;border-radius:12px;background:transparent}.vinyl-disc{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-radial-gradient(circle,#111 0,#111 2px,#1a1a1a 2px,#1a1a1a 4px);border-radius:50%;z-index:1;box-shadow:inset 0 0 12px #00000080;opacity:0;transition:opacity .4s ease;animation:spin 5s linear infinite}.vinyl-disc:after{content:"";position:absolute;width:22%;height:22%;border-radius:50%;background:radial-gradient(circle,#fff,#ccc 90%);top:50%;left:50%;transform:translate(-50%,-50%)}.vinyl-cover{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:2;border-radius:12px;transition:transform .5s ease;will-change:transform}.record-card-text{position:absolute;bottom:1px;left:1px;right:1px;z-index:3;color:#fff;opacity:0;transition:opacity .4s ease;background:#00000080;padding:10px 14px;border-radius:10px}.vinyl-hover:hover .vinyl-cover{transform:translate(75%)}.vinyl-hover:hover .vinyl-disc{opacity:1}.vinyl-hover:hover .record-card-text{opacity:1}.vinyl-disc .vinyl-label{position:absolute;width:22%;height:22%;border-radius:50%;-o-object-fit:cover;object-fit:cover;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}.add-record-form{max-width:500px;margin:0 auto;background:#fff;padding:32px;border-radius:10px;box-shadow:0 4px 20px #0000000d;display:flex;flex-direction:column;gap:16px}.add-record-form h2{font-size:20px;font-weight:700;margin-bottom:8px;text-align:center}.add-record-form input,.add-record-form textarea{padding:10px 14px;border-radius:5px;border:1px solid #d1d5db;font-size:14px;outline:none}.add-record-form input:focus,.add-record-form textarea:focus{border-color:#272727;box-shadow:0 0 0 2px #ede9fe}.add-record-form button{background:#141414;color:#fff;font-size:14px;padding:10px;border:none;border-radius:5px;cursor:pointer;transition:background .2s ease}.add-record-form button:hover{background:#2c2c2c}.moderation-wrapper{max-width:800px;margin:0 auto;padding:40px 20px}.moderation-title{font-size:24px;font-weight:700;margin-bottom:24px;text-align:center}.moderation-empty{text-align:center;color:#6b7280;font-size:15px}.moderation-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}.moderation-item{background:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 20px #0000000d}.moderation-item img{display:block;margin-top:10px;max-width:200px;border-radius:8px}.moderation-info strong{font-size:16px}.moderation-description{font-size:14px;color:#4b5563;margin-top:6px}.moderation-actions{margin-top:12px;display:flex;gap:12px}.approve-btn,.reject-btn{padding:8px 14px;font-size:14px;border:none;border-radius:10px;cursor:pointer;color:#fff;transition:background .2s ease}.approve-btn{background-color:#16a34a}.approve-btn:hover{background-color:#15803d}.reject-btn{background-color:#dc2626}.reject-btn:hover{background-color:#b91c1c}.record-detail{max-width:1000px;margin:0 auto;padding:40px 20px}.record-error,.record-loading{text-align:center;font-size:16px;color:#dc2626;margin-top:40px}.record-back{display:inline-block;margin-bottom:20px;font-size:14px;color:#363636;text-decoration:none}.record-back:hover{text-decoration:underline;color:#585858}.record-cover{width:100%;max-height:440px;-o-object-fit:cover;object-fit:cover;border-radius:16px;box-shadow:0 4px 24px #00000014;margin-bottom:24px}.record-title{font-size:28px;font-weight:700;margin-bottom:8px}.record-sub{font-size:15px;color:#6b7280;margin-bottom:20px}.record-description{font-size:16px;color:#374151;line-height:1.6;white-space:pre-line}.comment-section{margin-top:40px}.comment-title{font-size:18px;font-weight:700;margin-bottom:16px}.comment-form{margin-bottom:20px}.comment-form textarea{width:100%;border:1px solid #ccc;border-radius:8px;padding:8px;font-family:inherit;resize:vertical}.comment-form button{margin-top:8px;padding:6px 12px;background-color:#333;color:#fff;border:none;border-radius:6px;cursor:pointer}.comment-form button:hover{background-color:#555}.comment-list{margin-top:20px}.comment-item{border-left:2px solid #ccc;padding-left:12px;margin-top:12px}.comment-header{font-size:14px;color:#555;margin-bottom:4px}.comment-header span{margin-left:8px;font-size:12px;color:#999}.comment-actions{margin-top:4px;display:flex;gap:10px}.comment-actions button{background:none;border:none;color:#07c;cursor:pointer;font-size:14px}.comment-replying{background:#f0f0f0;padding:6px 10px;border-left:3px solid #0077cc;font-size:14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.record-actions-bar{margin-top:1px;display:flex;gap:12px;justify-content:flex-start}.record-actions-bar button{color:#5f5f5f;padding:1px;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:background-color .2s ease}.record-actions-bar button:hover{color:#b1b1b1}.record-actions-bar button:last-child{color:#ff7c7c}.record-actions-bar button:last-child:hover{color:#ffcdcd}.record-likes{font-size:14px;color:#777;margin-top:4px}.player-top-view{display:flex;align-items:center;justify-content:center;gap:100px;margin-bottom:50px;flex-wrap:wrap}.record-detail-cover-left{width:380px;height:380px;-o-object-fit:cover;object-fit:cover;border-radius:12px}.record-player-center{width:380px;height:380px;position:relative}.turntable-bg{position:absolute;top:0;left:0;width:380px;height:380px;background-image:url(/turntable.png);background-size:cover;background-position:center;z-index:0;border-radius:10px;box-shadow:0 8px 20px #0000004d}.vinyl-spinning{position:absolute;width:70%;height:70%;margin-top:40px;margin-left:36px;top:0;right:0;bottom:0;left:0;animation:spin 4s linear infinite;z-index:1}.vinyl-center{width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle,#111 0,#111 2px,#1a1a1a 2px,#1a1a1a 4px);box-shadow:inset 0 0 16px #00000080;position:relative;z-index:1}.vinyl-label-detail{position:absolute;width:70px;height:70px;-o-object-fit:cover;object-fit:cover;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}.needle-arm{position:absolute;width:100px;height:10px;background:#ccc;border-radius:4px;top:30px;left:160px;transform:rotate(-20deg);transform-origin:left center;z-index:3;animation:arm-drop 1s ease-out 1s forwards;opacity:0}.needle-img{position:absolute;top:45px;right:5px;width:140px;z-index:5;pointer-events:none;opacity:0;transform:rotate(-30deg);animation:needle-drop 1s ease-out 1s forwards}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes needle-drop{0%{transform:rotate(-50deg);opacity:0}to{transform:rotate(-20deg);opacity:1}}.record-uploader{border-top:1px solid #ddd;padding-top:20px;margin-top:40px}.comment-item{background-color:#f9fafb;border-radius:6px;padding:10px}.comment-actions button{margin-right:10px;font-size:13px;background:none;border:none;color:#4b5563;cursor:pointer}.comment-actions button:hover{text-decoration:underline}.app-wrapper{min-height:100vh;background-color:#f3f4f6;color:#1f2937;font-family:Segoe UI,sans-serif}.app-header{background-color:#e0e0e0;color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.logo a{color:#fff;text-decoration:none;font-size:20px;font-weight:700}.nav-links{display:flex;gap:16px;font-size:14px}.nav-links a{color:#414141;text-decoration:none;transition:opacity .2s ease}.nav-links a:hover{opacity:.8}.main-content{max-width:960px;margin:0 auto;padding:40px 20px;font-size:16px}.app-logo{display:flex;align-items:center;gap:2px;font-size:20px;font-weight:700;color:#6d28d9;text-decoration:none}.logo-img{width:602px;height:62px;-o-object-fit:contain;object-fit:contain}.welcome-logo-img{width:602px;height:150px;-o-object-fit:contain;object-fit:contain}.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center}/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}.block{display:block}.flex{display:flex}.border{border-style:var(--tw-border-style);border-width:1px}.text-center{text-align:center}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}.library-wrapper{max-width:1080px;margin:0 auto;padding:40px 20px}.library-title{font-size:24px;font-weight:700;margin-bottom:24px;text-align:center}.library-empty{color:#6b7280;text-align:center;font-size:15px}.library-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.library-card{background:#fff;border-radius:16px;box-shadow:0 4px 20px #0000000d;overflow:hidden;transition:transform .2s ease}.library-card:hover{transform:translateY(-3px)}.library-cover{width:100%;height:180px;-o-object-fit:cover;object-fit:cover}.library-content{padding:16px}.library-title-link{font-size:16px;font-weight:700;color:#1d4ed8;text-decoration:none}.library-title-link:hover{text-decoration:underline}.library-subtext{font-size:14px;color:#6b7280;margin-top:4px}.library-description{font-size:14px;color:#374151;margin-top:8px}.library-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0}.library-filters input,.library-filters select,.library-filters button{padding:6px 10px;border-radius:6px;border:1px solid #ccc;font-size:14px}.library-filters select{background-color:#fff;cursor:pointer}.library-filters button{background-color:#f3f4f6;cursor:pointer;transition:background-color .2s ease}.library-filters button:hover{background-color:#e5e7eb}.sort-buttons{display:flex;gap:8px;margin-top:12px}.sort-buttons button{padding:6px 12px;border:1px solid #ccc;background:#fff;cursor:pointer;border-radius:6px;font-weight:500}.sort-buttons .active{background:#000;color:#fff;border-color:#000}.sort-controls{display:flex;justify-content:flex-end;margin:8px 0 16px}.sort-controls select{padding:6px 10px;border-radius:6px;border:1px solid #ccc;font-size:14px}.welcome-screen{height:calc(100vh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}.welcome-title{font-size:48px;font-weight:900;margin-bottom:16px;letter-spacing:2px}.welcome-subtext{font-size:20px;color:#555;max-width:600px;line-height:1.5}.welcome-btn{margin-top:32px;padding:12px 24px;font-size:16px;background-color:#000;color:#fff;border-radius:8px;text-decoration:none;transition:.2s ease}.welcome-btn:hover{background-color:#333}.edit-record-page{max-width:600px;margin:40px auto;padding:24px;background:#fff;border-radius:12px;box-shadow:0 4px 16px #0000000f}.edit-record-page h2{font-size:24px;font-weight:700;margin-bottom:24px;text-align:center}.edit-record-form{display:flex;flex-direction:column;gap:16px}.edit-record-form input,.edit-record-form textarea{font-size:16px;padding:10px 14px;border:1px solid #ccc;border-radius:8px;resize:vertical;font-family:inherit;width:100%;box-sizing:border-box}.edit-record-form textarea{min-height:100px}.edit-record-form button{padding:12px 20px;background-color:#111827;color:#fff;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s}.edit-record-form button:hover{background-color:#374151}