:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232c; --line:#2a3441;
  --txt:#e6edf3; --dim:#8b98a5; --accent:#6ea8fe; --accent2:#3fb950; --danger:#f85149;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
.topbar{
  padding:14px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.brand{font-size:18px;font-weight:700;letter-spacing:.5px}
.sub{color:var(--dim);font-size:12px}

.layout{
  display:grid; grid-template-columns:340px minmax(360px,1fr) 380px;
  gap:14px; padding:14px; height:calc(100vh - 62px);
}
@media(max-width:1100px){ .layout{grid-template-columns:1fr; height:auto} }

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px; overflow:auto; display:flex; flex-direction:column; gap:10px;
}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel-hd h2{margin:0;font-size:14px;color:var(--dim);font-weight:600;letter-spacing:.5px}
.tag{font-size:11px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);padding:2px 8px;border-radius:20px}

.card-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.card-list li{
  padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);
  cursor:pointer;display:flex;justify-content:space-between;gap:8px;font-size:13px;
}
.card-list li.on{border-color:var(--accent);background:#1b2740}
.card-list li .m{color:var(--dim);font-size:11px}

.form{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim)}
.form input,.form textarea,.form select{
  background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:8px;font:inherit;font-size:13px;outline:none;width:100%;
}
.form input:focus,.form textarea:focus{border-color:var(--accent)}
textarea{resize:vertical}
.chk{flex-direction:row!important;align-items:center;gap:7px!important;color:var(--txt)!important;font-size:13px!important}
.chk input{width:auto!important}
.chk.sm{font-size:12px!important}

.imgrow{display:flex;gap:9px;align-items:flex-start}
.thumb{
  width:86px;height:86px;flex:0 0 86px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--dim);overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.imgbtns{display:flex;flex-direction:column;gap:6px;flex:1}
.filebtn{
  display:inline-block;text-align:center;padding:8px;border-radius:8px;
  border:1px dashed var(--line);color:var(--accent);cursor:pointer;font-size:13px;
}
.filebtn:hover{border-color:var(--accent)}

button{
  font:inherit;font-size:13px;border-radius:8px;padding:8px 12px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);
}
button:hover{filter:brightness(1.15)}
button.primary{background:var(--accent);border-color:var(--accent);color:#08101f;font-weight:600}
button.mini{padding:5px 10px;font-size:12px}
button.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap}
.adv{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel2)}
.adv summary{cursor:pointer;color:var(--dim);font-size:12px}
.adv label{margin-top:8px}

.stage{align-items:center}
#stage{
  width:100%;max-width:512px;aspect-ratio:1/1;border-radius:14px;
  border:1px solid var(--line);background:#0a0d12;display:block;margin:0 auto;
}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.hint{font-size:12px;color:var(--dim)}

.chat{min-height:0}
.msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:4px 0;min-height:120px}
.msg{max-width:88%;padding:8px 11px;border-radius:12px;font-size:13px;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:#1f3a5f;border:1px solid #2b4c78}
.msg.assistant{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.composer{display:flex;flex-direction:column;gap:8px}
.composer textarea{
  background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:10px;
  padding:9px;font:inherit;font-size:13px;outline:none;resize:none;width:100%;
}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:#0b1a2e;border:1px solid var(--accent);color:var(--txt);
  padding:10px 16px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;
  transition:.25s;z-index:50;max-width:80vw;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* 登录门 */
.gate{
  position:fixed;inset:0;background:rgba(6,9,13,.92);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.gate.hidden{display:none}
.gate .box{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:24px;width:min(420px,92vw);display:flex;flex-direction:column;gap:12px;
}
.gate h2{margin:0;font-size:17px}
.gate p{margin:0;color:var(--dim);font-size:12px}
.gate input{
  background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:10px;font:inherit;font-size:14px;outline:none;width:100%;
}
.gate .err{color:var(--danger);font-size:12px;min-height:16px}

/* 手机竖屏：形象优先、全屏感 */
@media(max-width:760px){
  .topbar{padding:10px 14px}
  .brand{font-size:16px}
  .sub{display:none}
  .layout{display:flex;flex-direction:column;padding:8px;gap:10px;height:auto;min-height:calc(100vh - 52px)}
  .stage{order:1}
  .chat{order:2;min-height:48vh}
  .cards{order:3}
  #stage{max-width:100%;border-radius:12px}
  .panel{padding:10px;border-radius:10px}
  .msgs{min-height:140px}
  button{padding:9px 12px}
}