:root{
  --bg:#f6f7fb;
  --card:#fff;
  --text:#202124;
  --muted:#5f6368;
  --pri:#1a73e8;
  --pri2:#185abc;
  --border:#e0e3eb;
  --ok:#1e8e3e;
  --bad:#d93025;
  --shadow:0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --radius:14px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:16px}
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(246,247,251,.9);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;gap:12px;align-items:center;padding:12px 16px}
.logo{width:36px;height:36px;border-radius:10px;background:transparent;box-shadow:var(--shadow);object-fit:cover;display:block;}

.titleblock{display:flex;flex-direction:column}
.titleblock .h1{font-weight:650}
.titleblock .h2{color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.grid{display:grid;gap:12px}
.grid.cols2{grid-template-columns:1fr 1fr}
@media (max-width: 900px){.grid.cols2{grid-template-columns:1fr}}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{
  appearance:none;border:1px solid var(--border);
  background:#fff;color:var(--text);
  padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:600;
}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.primary:hover{background:var(--pri2)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.input,.select,.textarea{
  width:100%;border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;font-size:15px;background:#fff;outline:none;
}
.textarea{min-height:120px;resize:vertical}
.small{font-size:13px;color:var(--muted)}
.tablewrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:650;background:#fafbff;position:sticky;top:0}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border);color:var(--muted)}
.badge.ok{border-color:#b7e1c1;color:var(--ok);background:#e9f7ee}
.badge.stop{border-color:#f6c7c4;color:var(--bad);background:#fdecea}
.badge.draft{border-color:#d6d9e3;background:#f3f4f8}
.footer{margin-top:16px;padding:14px 10px;text-align:center;color:var(--muted);font-size:13px}

/* === Question cards: exactly 2 per row on desktop === */
.cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){
  .cards{grid-template-columns:1fr;}
}

.qcard{padding:12px; display:flex; flex-direction:column; gap:10px; min-height:180px;}
.qhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.qtitle{font-weight:650}

/* show question body text inside card */
.qbody{
  color:var(--text);
  font-size:14px;
  line-height:1.3;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:6;      /* limit lines to fit card */
  -webkit-box-orient:vertical;
}
.qbody img{max-width:100%; height:auto; display:block;}
.qactions{margin-top:auto;}

/* progress */
.progress{height:10px;background:#eef1f7;border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.progress>div{height:100%;background:linear-gradient(90deg,#1a73e8,#34a853);width:0%}

hr{border:none;border-top:1px solid var(--border);margin:12px 0}
.notice{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff}
.notice.ok{border-color:#b7e1c1;background:#e9f7ee;color:var(--ok)}
.notice.err{border-color:#f6c7c4;background:#fdecea;color:var(--bad)}

/* pasted images in question/answer */
.pasted-img{
  max-width:100% !important;
  height:auto !important;
  display:block;
  margin:8px 0;
}

/* editable html boxes */
.editor{
  width:100%;
  min-height:160px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  outline:none;
}
.editor:focus{
  border-color:#c6dafc;
  box-shadow:0 0 0 3px rgba(26,115,232,.15);
}