:root{--ink:#17201d;--muted:#66726d;--paper:#f4f2e9;--card:#fffdf7;--line:#d9dbd1;--acid:#d8ff57;--teal:#0e7467;--soft:#e1f2ed;--shadow:0 20px 60px rgba(30,42,37,.08)}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 5%,rgba(216,255,87,.18),transparent 24rem),var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}
.topbar{height:76px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(23,32,29,.1)}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font:700 1.25rem "Syne",sans-serif}.brand>span:last-child>span{color:var(--teal)}.brand-mark{width:35px;height:35px;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:50%;background:var(--ink)}.brand-mark span{width:3px;border-radius:3px;background:var(--acid)}.brand-mark span:nth-child(1){height:10px}.brand-mark span:nth-child(2){height:18px}.brand-mark span:nth-child(3){height:13px}.header-actions{display:flex;align-items:center;gap:18px}.streak{color:var(--muted);font-size:.875rem}.streak span{color:var(--teal);margin-right:5px}.icon-button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:1.2rem}
main{width:min(1400px,calc(100% - 40px));margin:0 auto;padding:clamp(36px,5vw,72px) 0 32px}.intro{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:38px}.eyebrow,.analysis-kicker{margin:0 0 13px;color:var(--teal);font-weight:700;font-size:.75rem;letter-spacing:.14em}h1{margin:0;font:600 clamp(2.4rem,4.6vw,4.9rem)/.98 "Syne",sans-serif;letter-spacing:-.055em}h1 em{position:relative;font-style:normal;z-index:0}h1 em:after{content:"";position:absolute;left:-2%;right:-3%;bottom:4%;height:18%;background:var(--acid);z-index:-1;transform:rotate(-1deg)}.intro-copy{max-width:360px;margin:0 0 6px;color:var(--muted);font-size:1rem;line-height:1.65}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:18px;min-height:570px}.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.composer{padding:28px;display:flex;flex-direction:column}.field-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--line)}.field-row label,.lyrics-label,.song-fields label>span{font-size:.875rem;font-weight:600}.select-wrap select{border:0;background:var(--soft);border-radius:99px;padding:9px 34px 9px 14px;color:var(--teal);font-size:.875rem;font-weight:600}.select-wrap select:invalid{color:var(--muted)}.song-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px 0}.song-fields label{display:flex;flex-direction:column;gap:8px}.song-fields small{font-weight:400;color:#929b97}.song-fields input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);outline:none}.song-fields input:focus,.textarea-wrap:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,116,103,.1)}.textarea-wrap{position:relative;flex:1;min-height:265px;margin-top:8px;border:1px solid var(--line);border-radius:12px;transition:.2s}.textarea-wrap textarea{width:100%;height:100%;min-height:263px;padding:16px 16px 40px;resize:none;border:0;outline:0;background:transparent;color:var(--ink);line-height:1.65}.textarea-wrap textarea::placeholder{color:#a4aaa7}.textarea-wrap>span{position:absolute;right:14px;bottom:12px;color:#929b97;font-size:.75rem}.composer-footer{display:flex;align-items:center;justify-content:space-between;padding-top:20px}.text-button{border:0;background:transparent;color:var(--teal);font-weight:600}.primary-button{display:flex;align-items:center;gap:15px;padding:13px 18px 13px 22px;border:0;border-radius:10px;background:var(--ink);color:white;font-weight:700;box-shadow:0 8px 20px rgba(23,32,29,.15)}.primary-button:hover{transform:translateY(-1px)}.primary-button b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--acid);color:var(--ink)}
.results{position:relative;overflow:hidden}.results:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(216,255,87,.13);right:-150px;top:-150px}.empty-state,.loading-state{height:100%;min-height:570px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:45px}.empty-state h2,.loading-state h2{margin:22px 0 8px;font:600 1.45rem "Syne",sans-serif}.empty-state>p,.loading-state p{max-width:430px;margin:0;color:var(--muted);line-height:1.6}.vinyl{position:relative;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#202926 0 4px,#131917 5px 7px);box-shadow:12px 12px 0 var(--acid);transform:rotate(-8deg)}.vinyl-ring{position:absolute;width:62px;height:62px;border:1px solid #74807b;border-radius:50%}.vinyl-center{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:var(--teal);color:#fff;font:700 .65rem "Syne",sans-serif}.result-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}.result-pills span,.level-badge{padding:7px 11px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:.75rem}
.loading-state[hidden],.analysis[hidden],.tab-content[hidden]{display:none}.loader-bars{height:50px;display:flex;align-items:center;gap:5px}.loader-bars i{width:5px;height:18px;border-radius:5px;background:var(--teal);animation:pulse .7s infinite alternate}.loader-bars i:nth-child(2),.loader-bars i:nth-child(4){animation-delay:.2s}.loader-bars i:nth-child(3){animation-delay:.4s}@keyframes pulse{to{height:48px;background:var(--acid)}}
.analysis{position:relative;padding:28px;height:100%}.analysis-head{display:flex;align-items:start;justify-content:space-between}.analysis-head h2{margin:0;font:600 1.55rem "Syne",sans-serif}.analysis-kicker{display:block;margin-bottom:7px}.level-badge{background:var(--soft);border:0;color:var(--teal);font-weight:600}.tabs{display:flex;gap:4px;margin:24px 0 20px;padding-bottom:10px;border-bottom:1px solid var(--line)}.tab{padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-weight:600;font-size:.875rem}.tab.active{background:var(--ink);color:white}.line-card{padding:13px 0;border-bottom:1px solid var(--line)}.line-card .original{margin:0 0 5px;color:var(--ink);font-weight:600}.line-card .translated{margin:0;color:var(--teal);line-height:1.45}.meaning-card{padding:20px;border-radius:13px;background:var(--soft);line-height:1.65}.meaning-card h3{margin:0 0 8px;font:600 1.05rem "Syne",sans-serif}.meaning-card p{margin:0;color:#40514b}.vocab-item{display:grid;grid-template-columns:145px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}.vocab-item strong{color:var(--teal)}.vocab-item p{margin:0;color:var(--muted);line-height:1.5}.privacy-note{text-align:center;margin:18px 0 0;color:#7c8782;font-size:.75rem}.privacy-note span{color:var(--teal);font-size:.5rem}
body.dark{--ink:#edf4ee;--muted:#a9b5af;--paper:#101613;--card:#17201c;--line:#334039;--soft:#203b34;--shadow:none}body.dark .primary-button{background:var(--acid);color:#16201c}body.dark .primary-button b{background:#16201c;color:white}
@media(max-width:820px){.streak{display:none}.intro{display:block}.intro-copy{margin-top:24px}.workspace{grid-template-columns:1fr}.empty-state,.loading-state{min-height:480px}.results{min-height:480px}}@media(max-width:520px){main{width:min(100% - 24px,1400px);padding-top:32px}.topbar{height:64px}.intro{margin-bottom:26px}h1{font-size:2.45rem}.composer,.analysis{padding:20px}.song-fields{grid-template-columns:1fr}.composer-footer{gap:15px}.primary-button{padding:12px 14px}.result-pills{display:none}.vocab-item{grid-template-columns:1fr;gap:6px}}

.admin-body{background:var(--paper)}.admin-home-link,.admin-signout{color:var(--teal);font-size:.875rem;font-weight:700;text-decoration:none}.admin-signout{padding:9px 14px;border:1px solid var(--line);border-radius:9px}.admin-main{width:min(1440px,calc(100% - 40px));padding-top:42px}.admin-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.admin-heading h1{font-size:clamp(2.2rem,4vw,4rem)}.admin-heading>div>p:last-child{margin:12px 0 0;color:var(--muted)}.admin-secondary-button,.admin-danger-button{padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-weight:700}.admin-danger-button{border-color:#d77d76;color:#a23d35}.admin-stats{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--muted)}.admin-stats strong{color:var(--ink);font:700 1.8rem "Syne",sans-serif}.admin-layout{display:grid;grid-template-columns:minmax(330px,.75fr) minmax(0,1.4fr);gap:16px;align-items:start}.admin-panel{border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow)}.admin-list-panel{overflow:hidden}.admin-panel-head{padding:18px 20px;border-bottom:1px solid var(--line);font-weight:700}.admin-panel-head>div{display:flex;justify-content:space-between;gap:20px}.admin-panel-head small{color:var(--muted);font-weight:500}.admin-list{max-height:720px;overflow:auto}.admin-list-item{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--line)}.admin-list-item.selected{background:var(--soft)}.admin-item-main{display:flex;min-width:0;flex-direction:column;align-items:start;gap:3px;padding:16px 18px;border:0;background:transparent;color:var(--ink);text-align:left}.admin-item-main strong,.admin-item-main span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-item-main span,.admin-item-main small{color:var(--muted)}.admin-item-main small{margin-top:4px}.admin-delete-small{align-self:center;margin-right:12px;padding:7px 9px;border:0;border-radius:7px;background:transparent;color:#a23d35;font-weight:700}.admin-delete-small:hover{background:#fbe9e7}.admin-loading,.admin-empty-detail{padding:50px 24px;color:var(--muted);text-align:center}.admin-loading p,.admin-empty-detail p{margin:7px auto 0;max-width:360px}.admin-load-more{display:block;margin:16px auto}.admin-load-more[hidden]{display:none}.admin-detail{min-height:360px;padding:24px}.admin-detail-head{display:flex;align-items:start;justify-content:space-between;gap:20px}.admin-detail-head h2{margin:0;font:700 1.6rem "Syne",sans-serif}.admin-detail-head>div>span{display:block;margin-top:6px;color:var(--muted)}.admin-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.admin-meta>div{padding:12px;border-radius:10px;background:var(--soft)}.admin-meta dt{color:var(--muted);font-size:.75rem}.admin-meta dd{margin:5px 0 0;font-weight:700;overflow-wrap:anywhere}.admin-detail-actions{margin-bottom:18px}.admin-detail-actions a{color:var(--teal);font-weight:700}.admin-lyrics{margin:18px 0;border:1px solid var(--line);border-radius:10px}.admin-lyrics summary{padding:13px 15px;cursor:pointer;font-weight:700}.admin-lyrics pre{max-height:320px;margin:0;padding:16px;overflow:auto;border-top:1px solid var(--line);white-space:pre-wrap;font:400 .875rem/1.65 "DM Sans",sans-serif}.admin-result-section{margin-top:24px}.admin-result-section h3{margin:0 0 12px;font:700 1.05rem "Syne",sans-serif}.admin-result-section>p{color:var(--muted);line-height:1.65}.admin-translation{padding:13px 0;border-bottom:1px solid var(--line)}.admin-translation p{margin:0 0 5px}.admin-translation>strong{display:block;color:var(--teal)}.admin-translation small{display:block;margin-top:7px;color:var(--muted);line-height:1.5}.admin-vocabulary{display:grid;gap:10px;margin:0;padding:0;list-style:none}.admin-vocabulary li{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:12px;border-radius:10px;background:var(--soft)}.admin-vocabulary span{color:var(--muted)}.admin-message{margin-bottom:16px;padding:13px 16px;border-radius:10px;background:#fbe9e7;color:#8d3029}.admin-message.success{background:var(--soft);color:var(--teal)}.admin-auth-main{display:grid;min-height:calc(100vh - 76px);place-items:center;padding:30px}.admin-auth-card{width:min(520px,100%);padding:46px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow);text-align:center}.admin-auth-card h1{font-size:2rem;letter-spacing:-.04em}.admin-auth-card>p:not(.eyebrow){margin:14px auto 26px;color:var(--muted);line-height:1.6}.admin-lock{display:grid;width:62px;height:62px;margin:0 auto 24px;place-items:center;border-radius:50%;background:var(--ink);color:var(--acid);font:700 .9rem "Syne",sans-serif}.admin-primary-link{display:block;padding:13px 18px;border-radius:10px;background:var(--ink);color:white;font-weight:700;text-decoration:none}.admin-back-link{display:inline-block;margin-top:18px;color:var(--teal);font-weight:700;text-decoration:none;font-size:.875rem}
@media(max-width:900px){.admin-layout{grid-template-columns:1fr}.admin-list{max-height:430px}}@media(max-width:600px){.admin-main{width:min(100% - 24px,1440px);padding-top:28px}.admin-heading{align-items:start;flex-direction:column}.admin-heading h1{font-size:2.4rem}.admin-heading .admin-secondary-button{width:100%}.admin-meta{grid-template-columns:1fr}.admin-detail{padding:18px}.admin-vocabulary li{grid-template-columns:1fr}.admin-auth-card{padding:32px 22px}.admin-home-link{display:none}}

[hidden] { display: none !important; }
.admin-login-form { display: grid; gap: 10px; text-align: left; }
.admin-login-form label { font-weight: 600; }
.admin-login-form input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); }
.admin-login-form input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.admin-login-form button { margin-top: 12px; border: 0; text-align: center; }
.admin-auth-card .admin-login-error { color: #8d3029; }
.admin-login-error:empty { display: none; }
button.admin-signout { background: var(--card); }
.line-note, .literal-note, .vocab-example, .br-equivalent { display: block; margin-top: 7px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.line-note { padding: 9px 11px; border-left: 3px solid var(--acid); background: color-mix(in srgb, var(--acid) 10%, transparent); border-radius: 0 7px 7px 0; }
.literal-note { opacity: .82; }
.br-equivalent { color: var(--teal); }
.primary-button:disabled { opacity: .62; cursor: wait; transform: none; }
.error-state { min-height: 570px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px; text-align: center; }
.error-state h2 { margin: 18px 0 8px; font: 600 1.45rem "Syne", sans-serif; }
.error-state p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.6; }
.error-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #ffe3df; color: #9c2e24; font: 700 1.7rem "Syne", sans-serif; }
.retry-button { margin-top: 22px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font-weight: 700; }
.progress-track { width: min(300px, 80%); height: 6px; margin-top: 22px; overflow: hidden; border-radius: 99px; background: var(--line); }
.progress-track span { display: block; width: 8%; height: 100%; border-radius: inherit; background: var(--teal); transition: width .8s ease; }
#elapsedTime { margin-top: 10px; color: var(--muted); font-size: .78rem; }
@media(max-width:820px){.error-state{min-height:480px}}
.analysis-actions { display: flex; align-items: center; gap: 8px; }
.share-button { padding: 7px 11px; border: 1px solid var(--teal); border-radius: 99px; background: transparent; color: var(--teal); font-size: .75rem; font-weight: 700; }
.share-button:hover { background: var(--soft); }
.artist-label { display: block; margin-top: 5px; color: var(--muted); font-size: .82rem; }
@media(max-width:520px){.analysis-head{gap:12px}.analysis-actions{align-items:flex-end;flex-direction:column}.share-button{padding:7px 9px}}