/* ══════════════════════════════════════════════════════════════════════════
   lrc-editor.css  —  LRC Editor page specific styles
   Defines local aliases --gb/--shadow/--shine/--cyan.
   .card/.btn/.section-label override shared.css.
   ══════════════════════════════════════════════════════════════════════════ */

.wrap{width:100%;max-width:var(--page-max);margin:0 auto;position:relative;z-index:1;animation:rise .45s cubic-bezier(.16,1,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.card{background:var(--card-bg);border:1px solid var(--gb);border-radius:22px;padding:1.4rem 1.6rem;margin-bottom:1rem;position:relative;overflow:hidden;backdrop-filter:blur(40px);box-shadow:var(--shadow)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}
.card::after{content:'';position:absolute;inset:0;background:var(--shine);pointer-events:none;border-radius:22px}
.section-label{font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:.85rem;position:relative;z-index:1}
/* btn base + ghost/accent/green/cyan/sm inherited from shared.css */
.btn-play{width:44px;height:44px;border-radius:50%;background:rgba(124,92,252,.2);border:1.5px solid rgba(124,92,252,.5);color:var(--text);font-size:1.1rem;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-play:hover{background:rgba(124,92,252,.35);transform:scale(1.05)}
.mode-tabs{display:flex;gap:.3rem;background:rgba(0,0,0,.25);border-radius:12px;padding:3px;margin-bottom:1rem;width:100%;position:relative;z-index:1}
.mode-tab{padding:.35rem 1rem;border-radius:9px;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s;border:none;background:none;color:var(--text-dim);font-family:inherit;flex:1;text-align:center}
.mode-tab:hover:not(.active){color:var(--text)}.mode-tab.active{background:rgba(124,92,252,.2);color:#a8b4ff}
.panel{display:none}.panel.active{display:block}
.player-row{display:flex;align-items:center;gap:.85rem;position:relative;z-index:1;margin-bottom:.85rem}
.audio-title{flex:1;min-width:0}
.audio-title-text{font-size:.9rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audio-artist{font-size:.75rem;color:var(--text-dim);margin-top:.1rem}
.progress-row{display:flex;align-items:center;gap:.65rem;position:relative;z-index:1}
.progress-track{flex:1;height:5px;background:rgba(255,255,255,.1);border-radius:3px;cursor:pointer;position:relative}
.progress-fill{height:5px;background:linear-gradient(90deg,#7c5cfc,#22d3ee);border-radius:3px;pointer-events:none;transition:width .1s linear}
.time-display{font-size:.75rem;font-family:'DM Mono',monospace;color:var(--text-dim);white-space:nowrap}
.drop-zone{border:2px dashed rgba(255,255,255,.12);border-radius:14px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;position:relative;z-index:1}
.drop-zone:hover,.drop-zone.drag-over{border-color:rgba(124,92,252,.5);background:rgba(124,92,252,.05)}
.drop-zone-icon{font-size:2rem;margin-bottom:.5rem;opacity:.5}
.drop-zone-text{font-size:.85rem;color:var(--text-dim)}
.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.lyrics-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.65rem;position:relative;z-index:1}
.lyric-count{font-size:.75rem;color:var(--text-dim);margin-left:auto}
.lyrics-list{display:flex;flex-direction:column;gap:.3rem;max-height:420px;overflow-y:auto;padding-right:.25rem;position:relative;z-index:1}
.lyrics-list::-webkit-scrollbar{width:4px}
.lyrics-list::-webkit-scrollbar-thumb{background:rgba(124,92,252,.3);border-radius:2px}
.lyric-row{display:flex;align-items:center;gap:.5rem;padding:.45rem .65rem;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid transparent;transition:all .15s;cursor:pointer}
.lyric-row:hover{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.07)}
.lyric-row.active{background:rgba(124,92,252,.1);border-color:rgba(124,92,252,.3)}
.lyric-row.stamped{background:rgba(52,211,153,.04);border-color:rgba(52,211,153,.12)}
.lyric-ts{font-size:.72rem;font-family:'DM Mono',monospace;color:var(--text-dim);width:62px;flex-shrink:0;cursor:text}
.lyric-ts.set{color:var(--green)}
.lyric-text{flex:1;font-size:.88rem;color:var(--text);background:none;border:none;outline:none;font-family:'DM Sans',sans-serif;padding:0;min-width:0}
.lyric-del{width:22px;height:22px;border-radius:5px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;flex-shrink:0}
.lyric-row:hover .lyric-del{opacity:1}.lyric-del:hover{background:rgba(248,113,113,.15);color:var(--red)}
.sync-hint{text-align:center;padding:.65rem;background:rgba(124,92,252,.08);border:1px solid rgba(124,92,252,.2);border-radius:10px;font-size:.8rem;color:var(--accent2);margin-bottom:.65rem;position:relative;z-index:1}
.sync-hint kbd{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:.1rem .35rem;font-family:'DM Mono',monospace;font-size:.75rem}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:.85rem;position:relative;z-index:1}
.field-group{display:flex;flex-direction:column;gap:.2rem}
.field-group label{font-size:.67rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim)}
.field-input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.45rem .75rem;color:var(--text);font-size:.85rem;font-family:inherit;outline:none;transition:border-color .2s;width:100%}
.field-input:focus{border-color:var(--accent-border)}.field-input::placeholder{color:var(--text-muted)}
.nudge-row{display:flex;align-items:center;gap:.5rem;position:relative;z-index:1;flex-wrap:wrap}
.nudge-label{font-size:.78rem;color:var(--text-dim);margin-right:.25rem}
.lyrics-raw{width:100%;min-height:200px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.75rem 1rem;color:var(--text);font-size:.85rem;font-family:'DM Mono',monospace;outline:none;resize:vertical;transition:border-color .2s;position:relative;z-index:1;line-height:1.7}
.lyrics-raw:focus{border-color:var(--accent-border)}.lyrics-raw::placeholder{color:var(--text-muted);font-style:italic;font-family:'DM Sans',sans-serif}
.scan-result-card{background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.2);border-radius:12px;padding:1rem 1.1rem;margin-top:.75rem;position:relative;z-index:1}
.scan-result-title{font-size:.95rem;font-weight:700;color:var(--text)}
.scan-result-meta{font-size:.78rem;color:var(--text-dim);margin-top:.2rem}
.lrc-action-bar{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:1rem}
.auto-step{padding:.85rem 1rem;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:.65rem;position:relative;z-index:1}
.auto-step-head{display:flex;align-items:center;gap:.5rem}
.auto-step-num{width:22px;height:22px;border-radius:50%;background:rgba(124,92,252,.25);border:1px solid rgba(124,92,252,.4);color:var(--accent2);font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auto-step-label{font-size:.82rem;font-weight:700;color:var(--text)}
.identify-progress{font-size:0.78rem;color:var(--text-dim);margin-top:0.5rem;display:none;align-items:center;gap:0.45rem;min-height:1.2rem}
.identify-progress.active{display:flex}
.identify-progress-dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);flex-shrink:0;animation:idpulse 1.1s ease-in-out infinite}
@keyframes idpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.7)}}
#toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.4rem;pointer-events:none}
.toast-item{padding:.6rem 1rem;border-radius:10px;font-size:.82rem;font-weight:600;background:rgba(20,20,36,.95);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);color:var(--text);animation:tIn .25s cubic-bezier(.16,1,.3,1)}
@keyframes tIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.meta-grid{grid-template-columns:1fr}}
@media(max-width:540px){body{padding-left:0.65rem;padding-right:0.65rem;}.card,.glass-card{padding:1.1rem 1.1rem;}}