:root{--bg:#012526;--card-bg:#023437bf;--accent:#ffd966;--accent-soft:#f4e5aa;--button-bg:#045d5ce6;--button-bg-soft:#045d5cb3;--text-main:#fffae5;--text-muted:#b7d0c9;--pill-bg:#074b4a}*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{background-color:var(--bg);min-height:100vh;color:var(--text-main);justify-content:center;display:flex;position:relative;overflow-x:hidden}.app{width:100%;max-width:480px;padding:10rem 1.5rem 12rem}body:before{content:"";z-index:-1;pointer-events:none;background:url(/Background.png) top/clamp(480px,60vw,700px) no-repeat;position:fixed;inset:0}@supports (-webkit-touch-callout:none){body:before{background-attachment:scroll}}.header{text-align:center;margin-bottom:1.5rem}.header-title{letter-spacing:.12em;color:var(--accent);font-size:2.4rem;font-weight:800;line-height:1.1}.header-pineapples{justify-content:center;gap:1.5rem;margin-bottom:.3rem;display:flex}.pineapple{background:radial-gradient(circle at 30% 20%,#fff7b0,#ffbf3e);border-radius:999px;width:42px;height:64px;position:relative;box-shadow:0 0 18px #ffe46fe6}.pineapple:before{content:"";background:linear-gradient(145deg,#6ee7b7,#059669);border-radius:999px 999px 0 0;width:26px;height:32px;position:absolute;top:-18px;left:50%;transform:translate(-50%)}.login-card{background:var(--card-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #abf4de33;border-radius:18px;margin-bottom:1.5rem;padding:1.1rem 1.1rem 1.25rem}.login-card h2{color:var(--accent-soft);margin-bottom:.75rem;font-size:1rem;font-weight:600}.login-form{flex-direction:column;gap:.9rem;display:flex}.error-text{color:#fca5a5;font-size:.9rem}.login-row{flex-direction:column;gap:.6rem;margin-bottom:.8rem;display:flex}.input-field{width:100%;color:var(--text-main);background:#011e21e6;border:1px solid #cdfdf529;border-radius:999px;outline:none;padding:.6rem .85rem;font-size:.9rem;transition:border-color .2s,box-shadow .2s}.input-field:focus{border-color:#64c8b480;box-shadow:0 0 0 3px #64c8b426}.input-field::placeholder{color:var(--text-muted)}.btn-primary{width:100%;color:var(--text-main);cursor:pointer;background:linear-gradient(135deg,#0f766e,#059669);border:none;border-radius:999px;padding:.7rem 1rem;font-size:.95rem;font-weight:600}.hint{color:var(--text-muted);text-align:center;margin-top:.4rem;font-size:.8rem}.section-title{text-align:center;letter-spacing:.04em;margin:1rem 0;font-size:2.2rem}.song-list{flex-direction:column;gap:.9rem;display:flex}.song-card{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#033c3f8c 0%,#0a555a9e 100%);border:1.5px solid #64c8b459;border-radius:20px;padding:.95rem 1rem 1rem;box-shadow:0 14px 24px #00000059}.song-header{justify-content:space-between;align-items:center;margin-bottom:.45rem;display:flex}.song-title{color:var(--accent-soft);font-size:1.4rem;font-weight:700}.edit-btn{color:var(--accent-soft);cursor:pointer;background:#05504ef2;border:none;border-radius:12px;padding:.55rem .75rem;font-size:.86rem;font-weight:600;transition:background .2s}.edit-btn:hover{background:#065f5c}.song-tag{color:var(--accent-soft);background:#074b4af2;border-radius:999px;padding:.2rem .75rem;font-size:.78rem;font-weight:500}.song-meta-container{margin-top:.75rem;margin-bottom:1rem;position:relative}.song-meta{background:#082f35e6;border-radius:999px;align-items:center;height:.45rem;display:flex;position:relative;overflow:hidden}.song-meta-fill{background:linear-gradient(90deg,#22c55e,#86efac);width:55%;height:100%}.progress-slider{appearance:none;cursor:pointer;background:0 0;width:100%;height:.45rem;margin:-.225rem 0 0;position:absolute;top:50%;left:0}.progress-slider::-webkit-slider-track{background:0 0;border-radius:999px;height:.45rem}.progress-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(135deg,#a0a0a0,#707070);border:2px solid #555;border-radius:50%;width:16px;height:16px;margin-top:-.2rem;box-shadow:0 2px 4px #0000004d}.progress-slider::-webkit-slider-thumb:hover{background:linear-gradient(135deg,#b5b5b5,#858585)}.progress-slider::-moz-range-track{background:0 0;border-radius:999px;height:.45rem}.progress-slider::-moz-range-thumb{cursor:pointer;background:linear-gradient(135deg,#a0a0a0,#707070);border:2px solid #555;border-radius:50%;width:16px;height:16px;margin-top:-.2rem;box-shadow:0 2px 4px #0000004d}.edit-fields{flex-direction:column;gap:.6rem;margin:.45rem 0 .35rem;display:flex}.edit-actions{justify-content:center;width:100%;margin-top:.7rem;display:flex}.delete-btn{color:#ffecec;cursor:pointer;text-align:center;background:#b42e2eeb;border:none;border-radius:12px;width:100%;padding:.55rem .75rem;font-size:.86rem;font-weight:600;transition:background .2s}.delete-btn:hover{background:#cc3c3c}.field-label{color:var(--text-muted);font-size:.82rem}.textarea-field{width:100%;color:var(--text-main);resize:vertical;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;background:#011e21e6;border:1px solid #cdfdf529;border-radius:12px;outline:none;max-width:100%;min-height:200px;padding:.7rem .85rem;font-family:SFMono-Regular,Consolas,Liberation Mono,Courier New,monospace;font-size:1.05rem;transition:border-color .2s,box-shadow .2s}.textarea-field:focus{border-color:#64c8b480;box-shadow:0 0 0 3px #64c8b426}.link-row{gap:.45rem;width:100%;display:flex}.select-field{background-position:right .5rem center;min-width:110px;max-width:140px;padding-right:1.75rem}.add-card{cursor:pointer;background:#033c3f59;border:1.5px dashed #abf4de59;transition:border-color .2s,background .2s,transform .1s}.add-card:hover{background:#033c3f8c;border-color:#c8fff099;transform:translateY(-1px)}.add-card:active{transform:translateY(0)}.add-card-content{color:var(--accent-soft);justify-content:center;align-items:center;gap:.65rem;font-size:1rem;font-weight:700;display:flex}.add-icon{background:#065f5ccc;border:1px solid #c8fff059;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.3rem;display:inline-flex;box-shadow:0 4px 10px #0000004d}.progress-slider::-moz-range-thumb:hover{background:linear-gradient(135deg,#b5b5b5,#858585)}.song-actions{gap:.55rem;margin-top:.3rem;display:flex}.bottom-bar{justify-content:center;margin-top:2rem;padding-bottom:2rem;display:flex}.btn-pill{color:var(--accent-soft);cursor:pointer;background:#05504ef2;border:none;border-radius:999px;flex:1;padding:.55rem .4rem;font-size:.86rem;font-weight:600;transition:background .2s}.btn-pill:hover{background:#065f5c}.btn-pill:disabled{color:#f4e5aa99;cursor:not-allowed;opacity:.7;background:#05504e73}.logout-btn{width:auto;min-width:120px;padding:.55rem 1.2rem}.song-platforms{gap:.35rem;margin-left:.2rem;display:flex}.platform-pill{cursor:pointer;width:34px;height:34px;color:var(--accent-soft);background:#05504ed9;border:none;border-radius:999px;justify-content:center;align-items:center;font-size:.95rem;transition:background .2s;display:flex}.platform-pill:hover{background:#065f5c}.song-lyrics{color:var(--accent-soft);scrollbar-color:#abf4de8c #05282ae6;scrollbar-width:thin;scrollbar-gutter:stable;white-space:pre-wrap;overflow-wrap:normal;word-break:normal;border-top:1px solid #b8e6d82e;margin-top:.6rem;padding:.4rem .85rem 0;font-family:SFMono-Regular,Consolas,Liberation Mono,Courier New,monospace;font-size:1.05rem;font-weight:400;line-height:1.4}.song-lyrics::-webkit-scrollbar{width:10px}.song-lyrics::-webkit-scrollbar-track{background:0 0;border-radius:999px;margin:4px 0}.song-lyrics::-webkit-scrollbar-thumb{background:#abf4de99 padding-box padding-box;border:2px solid #0000;border-radius:999px}.song-lyrics::-webkit-scrollbar-thumb:hover{background:#abf4decc padding-box padding-box}.textarea-field{scrollbar-color:#abf4de8c transparent;scrollbar-width:thin;scrollbar-gutter:stable}.textarea-field::-webkit-scrollbar{width:16px}.textarea-field::-webkit-scrollbar-track{background:0 0;border-radius:999px;margin:8px 4px 8px 0}.textarea-field::-webkit-scrollbar-thumb{background:#abf4de99 padding-box padding-box;border:4px solid #011e2100;border-right-width:6px;border-radius:999px}.textarea-field::-webkit-scrollbar-thumb:hover{background:#abf4decc padding-box padding-box}.song-link-embed{border-top:1px solid #b8e6d82e;margin-top:.6rem;padding-top:.4rem}.embed-player{border-radius:14px;overflow:hidden}.embed-player iframe{width:100%;display:block}@media (max-width:420px){html{height:100%}body{background-position:top;background-size:100vw 100svh;background-attachment:fixed;height:100%}.header-title{font-size:2rem}.song-card{padding:.85rem .8rem .9rem}}