:root { --primary:#673ab7; --bg:#f0ebf8; --card:#fff; --text:#202124; --muted:#5f6368; --border:#dadce0; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Google Sans',Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--primary); }
button { cursor:pointer; }
.topbar { background:#fff; padding:12px 24px; box-shadow:0 1px 3px rgba(0,0,0,.12); display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:10; }
.topbar h1 { margin:0; font-size:22px; color:var(--primary); }
.topbar .right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.container { max-width:900px; margin:24px auto; padding:0 16px; }
.card { background:var(--card); border-radius:8px; padding:24px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.btn { padding:8px 16px; border:none; border-radius:4px; font-size:14px; background:var(--primary); color:#fff; }
.btn.secondary { background:#e8eaed; color:#3c4043; }
.btn.danger { background:#d93025; }
.btn.link { background:transparent; color:var(--primary); padding:4px 8px; }
.input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:4px; font-size:14px; }
.textarea { min-height:60px; resize:vertical; }
.form-title { font-size:24px; font-weight:500; }
.muted { color:var(--muted); font-size:13px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.space { height:12px; }
.list-item { display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid var(--border); }
.list-item:last-child { border-bottom:none; }
.badge { background:#e8f0fe; color:#1967d2; padding:2px 8px; border-radius:12px; font-size:12px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal { background:#fff; padding:24px; border-radius:8px; width:90%; max-width:400px; }
.qcard { border-left:4px solid var(--primary); }
.qtype-select { width:auto; }
.choice-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.choice-row input { flex:1; }
.handle { cursor:grab; color:var(--muted); }
.progress { height:4px; background:#e0e0e0; border-radius:2px; overflow:hidden; margin:8px 0; }
.progress > div { height:100%; background:var(--primary); transition:width .3s; }
.bar { display:flex; align-items:center; gap:8px; margin:4px 0; }
.bar .track { flex:1; height:20px; background:#f1f3f4; border-radius:4px; overflow:hidden; }
.bar .fill { height:100%; background:var(--primary); }
.grid { display:grid; gap:12px; }
@media(min-width:700px){ .grid-2 { grid-template-columns:1fr 1fr; } }
.center { text-align:center; }
.loginbox { max-width:360px; margin:80px auto; }
HTML
echo done