*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans TC",sans-serif;background:#f6f7fb;color:#111}
a{color:inherit;text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.brand{font-weight:800;font-size:18px}
.btn{border:0;border-radius:10px;padding:10px 12px;font-weight:700;background:#111;color:#fff;cursor:pointer}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.soft{background:#e9ecf3;color:#111}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.input,.select,.textarea{width:100%;border:1px solid #d7dbe6;border-radius:10px;padding:10px;background:#fff}
.input{max-width:520px}
.select{max-width:220px}
.textarea{resize:vertical}
.list{display:grid;gap:10px}
.card{background:#fff;border:1px solid #e3e6ef;border-radius:14px;padding:14px}
.card:hover{border-color:#cfd5e6}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;background:#111;color:#fff}
.badge.soft{background:#e9ecf3;color:#111}
.badge.ok{background:#17a34a}
.badge.warn{background:#f59e0b;color:#111}
.title{font-weight:800;font-size:16px;margin:6px 0}
.meta{color:#5b6478;font-size:13px}
.body{margin-top:10px;line-height:1.6}
.empty{padding:22px;text-align:center;color:#5b6478}
.form{display:grid;gap:12px}
.grid2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}
.actions{display:flex;justify-content:flex-end}
.alert{background:#fff3cd;border:1px solid #ffe69c;padding:10px;border-radius:10px}
.section{margin-top:14px}
.section-title{font-weight:900;margin:10px 0}
.subttl{font-weight:900;margin:8px 0}
.inline{margin-top:10px}
.answer.accepted{border:2px solid #17a34a}
.attach{display:grid;gap:8px;margin-top:8px}
.attach-item .dim{color:#5b6478;font-size:12px;margin-left:6px}
.video video{width:100%;max-height:420px;border-radius:12px;margin-top:8px;background:#000}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:999;
}
.modal{
  position:fixed; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
}
.modal-card{
  width:min(820px, 100%);
  background:#fff;
  border:1px solid #e3e6ef;
  border-radius:16px;
  padding:14px;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.modal-title{font-weight:900;font-size:16px}
/* ===== Ask Modal v2 ===== */
.modal-card{
  width:min(920px, 100%);
  max-height: calc(100vh - 56px);
  overflow:auto;
  padding:0;
}

.modal-head{
  position:sticky; top:0;
  background:#fff;
  border-bottom:1px solid #e3e6ef;
  padding:12px 14px;
  border-radius:16px 16px 0 0;
}

.modal-title{font-weight:900;font-size:16px;display:flex;gap:10px;align-items:center}
.modal-sub{color:#5b6478;font-size:12px;font-weight:600}

.modal-body{padding:14px}
.modal-foot{
  position:sticky; bottom:0;
  background:#fff;
  border-top:1px solid #e3e6ef;
  padding:12px 14px;
  border-radius:0 0 16px 16px;
  display:flex; gap:10px; justify-content:flex-end; align-items:center;
}

.kb-hint{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  color:#374151;
  font-size:13px;
  line-height:1.5;
}

.req{color:#ef4444;font-weight:900;margin-left:4px}
.small{font-size:12px;color:#5b6478}
.counter{font-size:12px;color:#5b6478;text-align:right;margin-top:4px}

.seg{
  display:flex; gap:8px; flex-wrap:wrap;
}
.seg button{
  border:1px solid #d7dbe6;
  background:#fff;
  color:#111;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.seg button.active{
  background:#111;
  color:#fff;
  border-color:#111;
}

.dropzone{
  border:1.5px dashed #cfd5e6;
  background:#fafbff;
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dropzone.dragover{
  border-color:#111;
  background:#f4f6ff;
}
.file-row{display:flex; gap:10px; align-items:center; justify-content:space-between}
.file-list{display:grid; gap:8px}
.file-item{
  background:#fff;
  border:1px solid #e3e6ef;
  border-radius:12px;
  padding:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.file-item .name{font-weight:800;font-size:13px}
.file-item .meta{font-size:12px;color:#5b6478}
.file-item .x{
  border:0; background:#e9ecf3; color:#111;
  border-radius:10px; padding:6px 10px;
  cursor:pointer; font-weight:900;
}
.file-item .x:hover{filter:brightness(.95)}
hr.sep{border:0;border-top:1px solid #eef1f7;margin:14px 0}

.inline2{display:grid; gap:10px; grid-template-columns: 1fr 1fr}
@media (max-width:720px){ .inline2{grid-template-columns:1fr} }

.input.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}