*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0f1a;--sf:#111827;--sf2:#1e293b;--bd:rgba(148,163,184,.12);
  --tx:#e2e8f0;--tx2:#94a3b8;--tx3:#64748b;
  --ac:#6366f1;--ac2:#818cf8;
  --font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Courier New',Consolas,monospace;
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--tx);font-family:var(--font)}

#app{display:flex;height:100vh}

/* ---- sidebar ---- */
#sidebar{
  width:272px;flex-shrink:0;background:var(--sf);
  border-right:1px solid var(--bd);
  display:flex;flex-direction:column;padding:20px 0;overflow-y:auto;
}
.sb-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 18px;margin-bottom:6px}
.logo{display:flex;align-items:center;gap:8px}
.logo-i{font-size:22px;font-weight:700;color:var(--ac)}
.logo-t{font-size:18px;font-weight:700;letter-spacing:-.02em}
#lang{
  background:var(--sf2);border:1px solid var(--bd);color:var(--tx);
  padding:3px 6px;border-radius:6px;font-size:11px;cursor:pointer;outline:none;
}
#sub{font-size:11px;color:var(--tx3);padding:0 18px;margin-bottom:14px}
#qlist{flex:1;padding:0 8px}

.qi{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:10px;cursor:pointer;transition:background .15s;margin-bottom:1px;
}
.qi:hover{background:var(--sf2)}
.qi.on{background:rgba(99,102,241,.15)}
.qi .n{
  width:26px;height:26px;border-radius:7px;background:var(--sf2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--tx3);flex-shrink:0;
}
.qi.on .n{background:var(--ac);color:#fff}
.qi .tt{font-size:12.5px;font-weight:500;line-height:1.35}

/* ---- main ---- */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#cvwrap{flex:1;position:relative;min-height:0;background:var(--bg)}
#cv{position:absolute;inset:0;width:100%;height:100%}

#bar{
  padding:12px 20px;border-top:1px solid var(--bd);
  display:flex;align-items:center;gap:16px;background:var(--sf);
  min-height:56px;
}
#desc{flex:1;font-size:12.5px;color:var(--tx2);line-height:1.5}
#ctrl{display:flex;align-items:center;gap:8px;flex-shrink:0}
#ctrl button{
  width:34px;height:34px;border-radius:9px;
  border:1px solid var(--bd);background:var(--sf2);color:var(--tx);
  font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
#ctrl button:hover{background:var(--ac);border-color:var(--ac);color:#fff}
#slbl{font-size:11px;color:var(--tx3);font-family:var(--mono);width:28px;text-align:right}
#spd{width:70px;accent-color:var(--ac)}

/* ---- responsive ---- */
@media(max-width:768px){
  #app{flex-direction:column}
  #sidebar{
    width:100%;height:auto;max-height:180px;
    border-right:none;border-bottom:1px solid var(--bd);padding:10px 0;
  }
  #qlist{display:flex;overflow-x:auto;gap:4px;padding:0 8px;flex-wrap:nowrap}
  .qi{flex-shrink:0;white-space:nowrap}
  #bar{flex-direction:column;gap:8px}
}

/* scrollbar */
#sidebar::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-thumb{background:var(--sf2);border-radius:4px}