:root{
    --bg0:#070A12;
    --bg1:#0B1020;
    --glass:rgba(255,255,255,.10);
    --glass2:rgba(255,255,255,.06);
    --stroke:rgba(255,255,255,.14);
    --stroke2:rgba(255,255,255,.10);
    --text:rgba(255,255,255,.92);
    --text2:rgba(255,255,255,.72);
    --muted:rgba(255,255,255,.56);
    --shadow:0 24px 90px rgba(0,0,0,.55);
    --shadow2:0 10px 30px rgba(0,0,0,.35);
    --r12:12px;
    --r16:16px;
    --r20:20px;
    --r26:26px;
    --r32:32px;
    --pad:16px;
    --navH:74px;
    --topH:64px;
    --maxW:1120px;
    --maxText:720px;
    --accent:rgba(125,211,252,.98);
    --accent2:rgba(167,139,250,.95);
    --danger:#ef4444;
    --ok:#22c55e;
    --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

body[data-theme="light"]{
    --bg0:#F6F7FB;
    --bg1:#FFFFFF;
    --glass:rgba(0,0,0,.06);
    --glass2:rgba(0,0,0,.035);
    --stroke:rgba(0,0,0,.10);
    --stroke2:rgba(0,0,0,.08);
    --text:rgba(10,14,24,.92);
    --text2:rgba(10,14,24,.70);
    --muted:rgba(10,14,24,.52);
    --shadow:0 24px 90px rgba(0,0,0,.10);
    --shadow2:0 10px 30px rgba(0,0,0,.08);
    --accent:rgba(2,132,199,.95);
    --accent2:rgba(99,102,241,.92);
    --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:var(--font);
    color:var(--text);
    background:
            radial-gradient(1200px 800px at 18% 18%, rgba(167,139,250,.22), transparent 55%),
            radial-gradient(1100px 850px at 78% 24%, rgba(125,211,252,.18), transparent 58%),
            radial-gradient(900px 700px at 50% 86%, rgba(244,63,94,.12), transparent 55%),
            linear-gradient(180deg, var(--bg0), var(--bg1));
    overflow-x:hidden;
}

a{color:inherit}
button,input,textarea,select{font:inherit}
.hidden{display:none !important}
#app{min-height:100dvh; padding-bottom:calc(var(--navH) + env(safe-area-inset-bottom))}

.diamond-bg{
    position:fixed;
    inset:-20%;
    background:
            radial-gradient(900px 700px at 18% 20%, rgba(167,139,250,.26), transparent 60%),
            radial-gradient(900px 700px at 82% 30%, rgba(125,211,252,.22), transparent 60%),
            radial-gradient(900px 700px at 40% 88%, rgba(244,63,94,.14), transparent 60%);
    filter: blur(30px);
    opacity:.9;
    pointer-events:none;
    z-index:-2;
}

.glass-header{
    position:sticky;
    top:0;
    z-index:120;
    height:calc(var(--topH) + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-left:calc(var(--pad) + env(safe-area-inset-left));
    padding-right:calc(var(--pad) + env(safe-area-inset-right));
    background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.logo{
    font-weight:1000;
    letter-spacing:.02em;
    font-size:18px;
    cursor:pointer;
    user-select:none;
}

.header-right{display:flex; align-items:center; gap:10px}

.auth-pill{
    height:40px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;
    background:var(--glass);
    border:1px solid var(--stroke);
    box-shadow:var(--shadow2);
    cursor:pointer;
    font-weight:900;
    color:var(--text);
}

.user-avatar{
    width:40px;
    height:40px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:1000;
    background:
            radial-gradient(40px 40px at 30% 30%, rgba(255,255,255,.22), transparent 60%),
            linear-gradient(135deg, rgba(125,211,252,.30), rgba(167,139,250,.24));
    border:1px solid var(--stroke);
    box-shadow:var(--shadow2);
    cursor:pointer;
    user-select:none;
}

.main-content{
    width:min(100%, var(--maxW));
    margin:0 auto;
    padding:18px var(--pad) 24px;
}

.section-h{
    display:block;
    margin:18px 0 10px;
    font-size:14px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:1000;
    opacity:.75;
}

.hero-banner{
    border-radius:var(--r26);
    padding:18px 18px;
    background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border:1px solid var(--stroke);
    box-shadow:var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow:hidden;
    position:relative;
}

.hero-banner:before{
    content:"";
    position:absolute;
    inset:-1px;
    background:
            radial-gradient(700px 300px at 20% 20%, rgba(125,211,252,.18), transparent 60%),
            radial-gradient(700px 300px at 80% 30%, rgba(167,139,250,.18), transparent 60%);
    filter: blur(10px);
    opacity:.9;
    pointer-events:none;
}

.hero-banner h1{
    position:relative;
    margin:0;
    font-size:22px;
    font-weight:1100;
    letter-spacing:.01em;
}

.hero-banner p{
    position:relative;
    margin:6px 0 0;
    color:var(--text2);
    font-weight:850;
}

.grid-cards{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
}

@media (min-width:640px){
    .grid-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width:980px){
    .grid-cards{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.card{
    border-radius:var(--r20);
    padding:10px;
    background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border:1px solid var(--stroke);
    box-shadow:var(--shadow2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor:pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
    min-width:0;
}

.card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.20); }

.c-img{
    width:100%;
    aspect-ratio:1/1;
    border-radius:var(--r16);
    object-fit:cover;
    border:1px solid var(--stroke2);
    background:rgba(255,255,255,.06);
}

.c-title{
    margin-top:10px;
    font-weight:1000;
    font-size:13px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--text);
}

.c-sub{
    margin-top:4px;
    font-size:12px;
    font-weight:850;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:calc(var(--navH) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:130;
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bottom-nav:before{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:10px;
    height:56px;
    border-radius:999px;
    background:var(--glass);
    border:1px solid var(--stroke);
    box-shadow:var(--shadow2);
}

.nav-item{
    position:relative;
    width:62px;
    height:52px;
    border:none;
    background:transparent;
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:1;
}

.nav-item i{ width:22px; height:22px; }

.nav-item.active{
    color:var(--text);
}

.nav-item.active:before{
    content:"";
    position:absolute;
    inset:7px 10px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(125,211,252,.26), rgba(167,139,250,.20));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 26px rgba(0,0,0,.22);
}

.mini-player{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(var(--navH) + 10px + env(safe-area-inset-bottom));
    height:72px;
    z-index:125;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
    border:1px solid var(--stroke);
    box-shadow:var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mini-player img{
    width:52px;
    height:52px;
    border-radius:18px;
    object-fit:cover;
    border:1px solid var(--stroke2);
    background:rgba(255,255,255,.06);
}

.mp-info{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
#mp-title{
    font-weight:1000;
    font-size:14px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
#mp-artist{
    font-weight:850;
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mp-controls{ display:flex; align-items:center; gap:8px; }
.mp-btn{
    width:40px;
    height:40px;
    border-radius:16px;
    border:1px solid var(--stroke2);
    background:var(--glass2);
    color:var(--text);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.mp-btn i{ width:18px; height:18px; }
.mp-btn-main{
    background:linear-gradient(135deg, rgba(125,211,252,.26), rgba(167,139,250,.18));
    border-color:rgba(255,255,255,.16);
}

.mp-progress-bar{
    position:absolute;
    left:14px;
    right:14px;
    bottom:10px;
    height:3px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    overflow:hidden;
}
.mp-fill{ height:100%; width:0%; background:var(--accent); border-radius:999px; }

.full-player{
    position:fixed;
    inset:0;
    z-index:200;
}

.fp-backdrop{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:rgba(0,0,0,.40);
}

.fp-backdrop img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter: blur(36px) saturate(1.2);
    transform: scale(1.15);
    opacity:.55;
}

.fp-content{
    position:relative;
    height:100dvh;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:calc(var(--pad) + env(safe-area-inset-left));
    padding-right:calc(var(--pad) + env(safe-area-inset-right));
    display:flex;
    flex-direction:column;
}

.fp-top{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.fp-header-title{
    font-weight:1000;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:13px;
    opacity:.8;
}

.icon-btn{
    width:44px;
    height:44px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background:var(--glass);
    color:var(--text);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:var(--shadow2);
}
.icon-btn i{ width:20px; height:20px; }

.fp-art-container{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 0 0;
}

.fp-art{
    width:min(320px, 72vw);
    aspect-ratio:1/1;
    border-radius:34px;
    object-fit:cover;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 34px 120px rgba(0,0,0,.55);
    background:rgba(255,255,255,.05);
}

.fp-info-block{
    text-align:center;
    margin-top:14px;
}

.fp-info-block h2{
    margin:0;
    font-size:22px;
    line-height:1.2;
    font-weight:1100;
    letter-spacing:.01em;
}

.fp-info-block p{
    margin:6px 0 0;
    color:var(--text2);
    font-weight:900;
}

.fp-timeline-block{
    margin-top:14px;
    background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border:1px solid var(--stroke);
    border-radius:24px;
    padding:12px 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:var(--shadow2);
}

#fp-seek{
    width:100%;
    appearance:none;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    outline:none;
}
#fp-seek::-webkit-slider-thumb{
    appearance:none;
    width:18px;
    height:18px;
    border-radius:999px;
    background:var(--text);
    border:1px solid rgba(0,0,0,.12);
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}
#fp-seek::-moz-range-thumb{
    width:18px;
    height:18px;
    border-radius:999px;
    background:var(--text);
    border:1px solid rgba(0,0,0,.12);
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.fp-times{
    margin-top:10px;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-weight:900;
    font-size:12px;
}

.fp-controls-block{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.glass-btn{
    width:54px;
    height:54px;
    border-radius:20px;
    border:1px solid var(--stroke);
    background:var(--glass);
    color:var(--text);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:var(--shadow2);
}
.glass-btn i{ width:20px; height:20px; }

.fp-right-controls{
    display:flex;
    align-items:center;
    gap:10px;
}

.fp-btn-play{
    width:70px;
    height:70px;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(135deg, rgba(125,211,252,.30), rgba(167,139,250,.22));
    color:var(--text);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.fp-btn-play i{ width:24px; height:24px; }

.page-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.page-back{
    height:44px;
    padding:0 14px;
    border-radius:18px;
    border:1px solid var(--stroke);
    background:var(--glass);
    color:var(--text);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:950;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:var(--shadow2);
}
.page-back i{ width:18px; height:18px; }

.upload-container{
    border-radius:var(--r26);
    padding:14px;
    background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border:1px solid var(--stroke);
    box-shadow:var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.modal-form{display:flex; flex-direction:column; gap:12px}

.glass-input,
.upload-field,
.search-bar,
#gen-output{
    width:100%;
    border-radius:20px;
    padding:14px 14px;
    border:1px solid var(--stroke);
    background:rgba(0,0,0,.18);
    color:var(--text);
    font-weight:900;
    outline:none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
body[data-theme="light"] .glass-input,
body[data-theme="light"] .upload-field,
body[data-theme="light"] .search-bar,
body[data-theme="light"] #gen-output{
    background:rgba(255,255,255,.70);
}

.glass-input::placeholder,
.upload-field::placeholder,
.search-bar::placeholder,
#gen-output::placeholder{ color: var(--muted); }

textarea.upload-field{ resize:vertical; min-height:120px; }

.submit-btn{
    height:54px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.16);
    background:linear-gradient(135deg, rgba(125,211,252,.32), rgba(167,139,250,.22));
    color:var(--text);
    font-weight:1100;
    cursor:pointer;
    box-shadow:var(--shadow2);
}
body[data-theme="light"] .submit-btn{
    border-color:rgba(0,0,0,.10);
}

.glass-primary{
    height:54px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.16);
    background:linear-gradient(135deg, rgba(125,211,252,.30), rgba(167,139,250,.18));
    color:var(--text);
    font-weight:1100;
    cursor:pointer;
    box-shadow:var(--shadow2);
}

.glass-ghost{
    height:54px;
    border-radius:20px;
    border:1px solid var(--stroke);
    background:var(--glass);
    color:var(--text);
    font-weight:1050;
    cursor:pointer;
    box-shadow:var(--shadow2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.danger-btn{
    height:54px;
    border-radius:20px;
    border:1px solid rgba(239,68,68,.35);
    background:rgba(239,68,68,.14);
    color:rgba(255,255,255,.95);
    font-weight:1100;
    cursor:pointer;
    box-shadow:var(--shadow2);
}
body[data-theme="light"] .danger-btn{ color:rgba(10,14,24,.92); }

.file-box{
    border-radius:20px;
    border:1px dashed var(--stroke);
    padding:14px 14px;
    background:var(--glass2);
    color:var(--text2);
    font-weight:950;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    gap:10px;
}
.file-box input{ display:none; }

.modal{
    position:fixed;
    inset:0;
    z-index:220;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:16px;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    background:rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-box{
    width:min(520px, 100%);
    border-radius:28px;
    padding:14px;
    background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    border:1px solid var(--stroke);
    box-shadow:var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:4px 4px 10px;
}

.modal-title{
    margin:0;
    font-weight:1100;
    letter-spacing:.02em;
}

.profile-top{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 6px 6px;
}

.big-avatar{
    width:58px;
    height:58px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:1100;
    background:
            radial-gradient(50px 50px at 30% 30%, rgba(255,255,255,.22), transparent 60%),
            linear-gradient(135deg, rgba(125,211,252,.30), rgba(167,139,250,.24));
    border:1px solid var(--stroke);
    box-shadow:var(--shadow2);
}

.p-meta{display:flex; flex-direction:column; min-width:0}
.p-name{font-weight:1100; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-email{font-weight:850; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.profile-actions{display:flex; flex-direction:column; gap:10px; padding:12px 6px 6px}

.stats-wrap{padding:6px}

.stats-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}

.stat-card{
    border-radius:22px;
    padding:12px;
    border:1px solid var(--stroke);
    background:var(--glass);
    box-shadow:var(--shadow2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.stat-k{
    font-weight:950;
    color:var(--muted);
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.stat-v{
    margin-top:6px;
    font-weight:1200;
    font-size:22px;
}

.stats-title{
    margin-top:14px;
    font-weight:1100;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--muted);
}

.stats-list{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }

.stats-item{
    border-radius:18px;
    padding:12px 12px;
    border:1px solid var(--stroke);
    background:var(--glass2);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-weight:950;
}

.playlist-item-add{
    border-radius:20px;
    padding:10px 10px;
    border:1px solid var(--stroke);
    background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:var(--shadow2);
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.playlist-item-add img{
    width:46px;
    height:46px;
    border-radius:16px;
    object-fit:cover;
    border:1px solid var(--stroke2);
    background:rgba(255,255,255,.06);
}

.del-btn{
    width:44px;
    height:44px;
    border-radius:16px;
    border:1px solid rgba(239,68,68,.28);
    background:rgba(239,68,68,.14);
    color:rgba(255,255,255,.95);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

body[data-theme="light"] .del-btn{ color:rgba(10,14,24,.92); }

#lyrics-overlay .fp-content{
    height:100dvh;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
}

#lyrics-container{
    height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: 18px 18px 26px;
    display: flex;
    justify-content: center;
    scrollbar-width: none;
}
#lyrics-container::-webkit-scrollbar{ width:0; height:0; }

.lyrics-wrap{
    width: 100%;
    max-width: var(--maxText);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18vh 0;
}

.lyrics-tag{
    font-size: 15px;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .78;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.lyrics-line{
    width: 100%;
    max-width: var(--maxText);
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 950;
    line-height: 1.55;
    color: var(--text);
    opacity: .92;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-wrap: balance;
}


.karaoke-line{
    width: 100%;
    max-width: var(--maxText);
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 1000;
    line-height: 1.55;
    color: var(--text2);
    opacity: .72;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid transparent;
    transition: transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.karaoke-line.active{
    opacity: 1;
    color: var(--text);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    transform: scale(1.03);
}

.static-lyrics{
    width: 100%;
    max-width: var(--maxText);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: clamp(15px, 2.4vw, 20px);
    font-weight: 950;
    line-height: 1.6;
    color: var(--text);
    opacity: .92;
}

@media (min-width:900px){
    .fp-content{ padding-left:24px; padding-right:24px; }
    .fp-art{ width:min(360px, 40vw); }
}

@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; scroll-behavior:auto !important; }
}