*{box-sizing:border-box}
:root{
  --bg:#101010;--panel:#171717;--panel2:#202020;--panel3:#292929;
  --line:#3a3a3a;--text:#f2f2f2;--muted:#a8a8a8;--accent:#ff8a00;
  --accent2:#ffd166;--active:#ffffff;
}
html,body{margin:0;min-height:100%;background:linear-gradient(#111,#080808);color:var(--text);font-family:Arial,Helvetica,sans-serif}
body{min-width:320px}
button,input{font:inherit}
button{cursor:pointer}
.shell{min-height:100vh;background:radial-gradient(circle at 70% 30%,#252525 0,#111 38%,#080808 100%)}
.topbar{height:68px;background:#191919;border-bottom:1px solid #3b3b3b;display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-shadow:0 2px 10px #000}
.brand{display:flex;align-items:center;gap:11px}.brandIcon{width:40px;height:40px;border-radius:8px;background:linear-gradient(145deg,#ff9b19,#a73b00);display:grid;place-items:center;font-size:25px;font-weight:bold}
.brandTitle{font-size:19px;font-weight:700}.brandTitle span{color:var(--accent);font-size:12px;margin-left:4px}.brandSub{font-size:11px;color:#888;margin-top:3px}
.topActions{display:flex;gap:8px}.topBtn,.utilBtn{background:#2a2a2a;border:1px solid #4a4a4a;color:#eee;border-radius:5px;padding:9px 12px}.topBtn:hover,.utilBtn:hover{background:#343434}
.workspace{display:grid;grid-template-columns:265px minmax(0,1fr);max-width:1450px;margin:auto;min-height:calc(100vh - 68px)}
.sidebar{background:linear-gradient(#1b1b1b,#111);border-right:1px solid #3a3a3a;display:flex;flex-direction:column;min-width:0}
.sideHead{padding:14px 14px 9px;display:flex;justify-content:space-between}.sideHead span{color:#888}
.searchWrap{margin:0 10px 9px;background:#0e0e0e;border:1px solid #393939;border-radius:5px;display:flex;align-items:center;padding:0 8px;color:#888}.searchWrap input{background:transparent;border:0;outline:0;color:#ddd;width:100%;padding:9px 6px}
.libraryTools{display:flex;gap:6px;padding:0 10px 10px}.libraryTools button{flex:1;background:#272727;border:1px solid #444;color:#ddd;border-radius:4px;padding:7px;font-size:12px}
.library{overflow:auto;flex:1;padding:3px 7px}.songItem{padding:9px 9px;border-radius:4px;border:1px solid transparent;margin-bottom:3px;cursor:pointer}.songItem:hover{background:#242424}.songItem.active{background:#303030;border-color:#4d4d4d}.songTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.songMeta{font-size:10px;color:#777;margin-top:3px}.emptyLibrary{text-align:center;color:#777;padding:30px 15px;line-height:1.6}.sideFoot{border-top:1px solid #333;padding:11px 14px;color:#777;font-size:11px}.sideFoot b{color:#bbb}
.mainPanel{min-width:0;padding:12px;background:#0d0d0d}.status{font-size:12px;color:#bbb;padding:7px 10px;background:#171717;border:1px solid #2e2e2e;border-radius:4px;margin-bottom:10px}.status.ok{color:#a9dfaa}.status.err{color:#ff9c9c}
.karaokeStage{background:#090909;border:1px solid #373737;border-radius:4px;box-shadow:inset 0 0 0 1px #000,0 7px 22px #000;overflow:hidden}
.stageTop{height:54px;padding:9px 14px;border-bottom:1px solid #292929;background:linear-gradient(#232323,#181818);display:flex;align-items:center;justify-content:space-between}.stageSong{font-size:15px;font-weight:bold}.stageMeta{font-size:10px;color:#777;margin-top:3px}.stageBadges{display:flex;gap:6px}.stageBadges span{font-size:9px;border:1px solid #555;padding:4px 6px;border-radius:3px;color:#aaa}.stageBadges #syncBadge{color:#9dd7a1}
.lyrics{height:min(57vh,560px);min-height:360px;overflow:auto;text-align:center;padding:105px 12%;scroll-behavior:smooth;background:
 radial-gradient(ellipse at center,#202020 0,#111 45%,#070707 100%)}
.welcome{padding-top:60px;color:#777}.welcomeIcon{font-size:45px}.welcome h2{color:#bbb;margin:10px 0 5px}.welcome p{font-size:13px}
.line{font-size:clamp(21px,3vw,34px);font-weight:700;line-height:1.45;margin:13px 0;padding:5px 10px;color:#666;transition:transform .15s,opacity .15s,color .15s,background .15s;text-shadow:0 2px 4px #000}.line.past{color:#454545}.line.active{color:#f3f3f3;transform:scale(1.03)}.word{display:inline-block;transition:color .04s,background .04s}.word.active{color:#fff;background:linear-gradient(#ff9a18,#d65b00);border-radius:3px;padding:0 5px;text-shadow:0 1px 2px #000}.lyrics.training .line:not(.active){opacity:.18}.lyrics.training .line.active{opacity:1}
.stageBottom{height:38px;border-top:1px solid #292929;background:#151515;padding:7px 13px}.dotTrack{height:6px;display:flex;gap:9px;align-items:center;overflow:hidden}.dot{width:9px;height:9px;border-radius:50%;background:#555;border:1px solid #777;flex:0 0 auto}.dot.active{background:#8fce3f;box-shadow:0 0 8px #8fce3f}.stageHint{display:flex;justify-content:space-between;font-size:9px;color:#777;margin-top:4px}
.transport{background:#1c1c1c;border:1px solid #383838;border-top:0;padding:10px 13px}.transportTop{display:flex;align-items:center;gap:8px}.roundBtn,.playBtn{border:1px solid #4b4b4b;background:#2a2a2a;color:#ddd;border-radius:5px;height:35px;min-width:46px}.playBtn{width:55px;font-size:18px;background:linear-gradient(#4b4b4b,#272727);color:#fff}.stopBtn{min-width:38px}.clock{margin-left:auto;display:flex;gap:6px;color:#aaa;font-size:12px}.clock b{color:#eee}.seek{width:100%;margin-top:9px;accent-color:var(--accent)}
.controlRack{display:grid;grid-template-columns:repeat(6,1fr);background:#1b1b1b;border:1px solid #383838;border-top:0;padding:12px;gap:13px}.rackGroup{background:#141414;border:1px solid #343434;border-radius:4px;padding:8px 9px}.rackGroup label{font-size:10px;color:#888;display:flex;justify-content:space-between;margin-bottom:8px}.rackGroup label b{color:#ddd}.rackGroup input{width:100%;accent-color:#aaa}.ticks{display:flex;justify-content:space-between;color:#555;font-size:8px;margin-top:2px}
.utilityBar{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#171717;border:1px solid #343434;border-top:0;padding:8px 10px}.utilityLeft{display:flex;gap:6px;flex-wrap:wrap}.utilBtn{font-size:10px;padding:7px 9px}.utilityRight{display:flex;gap:13px;color:#777;font-size:10px}.utilityRight b{color:#bbb}
.diagnostics{margin-top:10px;background:#141414;border:1px solid #333;border-radius:4px;color:#aaa;font-size:11px}.diagnostics summary{padding:9px;cursor:pointer}.diagnostics pre{padding:10px;overflow:auto;max-height:230px;margin:0;color:#9bb09b}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.controlRack{grid-template-columns:repeat(3,1fr)}.lyrics{padding-left:7%;padding-right:7%}}
@media(max-width:600px){.topbar{height:auto;min-height:68px;gap:8px;align-items:flex-start;padding:10px}.topActions .topBtn{font-size:11px;padding:7px}.brandTitle{font-size:15px}.brandSub{display:none}.controlRack{grid-template-columns:repeat(2,1fr)}.utilityRight{display:none}.lyrics{min-height:340px;height:52vh;padding-top:95px}.line{font-size:22px}}

/* V25 mobile/desktop polish */
@media(max-width:900px){
  .topbar{position:sticky;top:0;z-index:20}
  .mainPanel{padding:8px}
  .karaokeStage{border-radius:8px}
  .stageTop{height:auto;min-height:54px;padding:10px}
  .stageBadges span{font-size:8px}
  .transport{padding:9px}
  .roundBtn,.playBtn{min-height:42px}
  .controlRack{gap:8px;padding:8px}
}
@media(max-width:600px){
  body{overflow-x:hidden}
  .topbar{padding:8px 10px}
  .brandIcon{width:34px;height:34px;font-size:21px}
  .brandTitle{font-size:14px}
  .topActions{gap:5px}
  .topActions .topBtn{padding:8px 9px;font-size:10px}
  .mainPanel{padding:6px}
  .status{font-size:11px;margin-bottom:6px}
  .lyrics{height:55vh;min-height:320px;padding:80px 5% 120px;overscroll-behavior:contain}
  .line{font-size:clamp(20px,6vw,28px);line-height:1.55;margin:12px 0;padding:4px}
  .word{padding:1px 2px}
  .word.active{padding:1px 4px}
  .stageBottom{height:42px}
  .transportTop{gap:6px}
  .roundBtn,.playBtn{height:42px;min-width:44px}
  .playBtn{width:52px}
  .clock{font-size:11px}
  .controlRack{grid-template-columns:repeat(2,minmax(0,1fr));padding:7px}
  .rackGroup{padding:8px 7px}
  .rackGroup label{font-size:9px}
  .utilityBar{padding:7px;align-items:flex-start}
  .utilityLeft{gap:4px}
  .utilBtn{font-size:9px;padding:7px}
  .diagnostics{display:none}
}
@media(max-width:380px){
  .topActions .topBtn{padding:7px 6px;font-size:9px}
  .line{font-size:19px}
  .controlRack{gap:5px}
}


/* ============================================================
   V25.1 — REAL MOBILE SONG LIST
   The previous mobile rule used .sidebar{display:none}, which
   removed the entire song list. This override intentionally
   keeps the library visible above the player.
   ============================================================ */

@media (max-width: 900px) {

  .workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(190px, 34vh) auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 68px) !important;
    margin: 0 !important;
  }

  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 190px !important;
    max-height: 34vh !important;
    overflow: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid #3a3a3a !important;
    order: 1 !important;
  }

  .sideHead {
    flex: 0 0 auto !important;
    padding: 10px 12px 7px !important;
  }

  .searchWrap {
    flex: 0 0 auto !important;
    margin: 0 10px 7px !important;
  }

  .searchWrap input {
    padding: 8px 6px !important;
  }

  .libraryTools {
    flex: 0 0 auto !important;
    padding: 0 10px 7px !important;
  }

  .library {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 3px 8px 10px !important;
  }

  .songItem {
    display: block !important;
    width: 100% !important;
    min-height: 47px !important;
    padding: 8px 10px !important;
    margin: 0 0 4px !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .songTitle {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .songMeta {
    display: block !important;
  }

  .sideFoot {
    display: none !important;
  }

  .mainPanel {
    width: 100% !important;
    min-width: 0 !important;
    order: 2 !important;
    padding: 7px !important;
  }
}

@media (max-width: 600px) {

  .workspace {
    grid-template-rows: minmax(185px, 36vh) auto !important;
  }

  .sidebar {
    min-height: 185px !important;
    max-height: 36vh !important;
  }

  .sideHead {
    padding: 8px 10px 5px !important;
  }

  .searchWrap {
    margin: 0 8px 5px !important;
  }

  .libraryTools {
    padding: 0 8px 5px !important;
  }

  .library {
    padding: 2px 6px 8px !important;
  }

  .songItem {
    min-height: 45px !important;
    padding: 8px 9px !important;
  }

  .songTitle {
    font-size: 13px !important;
  }
}

@media (max-width: 380px) {

  .workspace {
    grid-template-rows: minmax(175px, 38vh) auto !important;
  }

  .sidebar {
    min-height: 175px !important;
    max-height: 38vh !important;
  }
}