:root {
  --bg: #f8f9fb; --surface: #fff; --border: #e2e5ea; --text: #1a1d23;
  --text2: #6b7280; --accent: #4f46e5; --accent-hover: #4338ca;
  --ok: #059669; --warn: #d97706; --err: #dc2626;
  --star: #f59e0b; --radius: 10px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
@media(prefers-color-scheme:dark) {
  :root { --bg:#0f1117; --surface:#1a1d27; --border:#2a2d37; --text:#e5e7eb; --text2:#9ca3af; }
}
:root[data-theme="dark"] { --bg:#0f1117; --surface:#1a1d27; --border:#2a2d37; --text:#e5e7eb; --text2:#9ca3af; }
:root[data-theme="light"] { --bg:#f8f9fb; --surface:#fff; --border:#e2e5ea; --text:#1a1d23; --text2:#6b7280; }

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); line-height:1.5; min-height:100vh; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.container { max-width:960px; margin:0 auto; padding:24px 20px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:16px; }

h1 { font-size:24px; font-weight:700; margin-bottom:8px; }
h2 { font-size:18px; font-weight:600; margin-bottom:12px; }
h3 { font-size:15px; font-weight:600; margin-bottom:8px; }
.muted { color:var(--text2); font-size:13px; }

.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--text); font-size:14px; font-weight:500;
  cursor:pointer; transition:.15s;
}
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover { background:var(--accent-hover); }
.btn.sm { padding:5px 12px; font-size:13px; }
.btn.danger { color:var(--err); border-color:var(--err); }
.btn.danger:hover { background:var(--err); color:#fff; }

.inp {
  width:100%; padding:9px 14px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--text); font-size:14px; outline:none;
}
.inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,70,229,.12); }
select.inp { appearance:auto; }
textarea.inp { resize:vertical; min-height:80px; }
label { display:block; font-size:13px; font-weight:500; margin-bottom:4px; }

.badge {
  display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:500;
}
.badge.draft { background:#e5e7eb; color:#374151; }
.badge.open { background:#d1fae5; color:#065f46; }
.badge.closed { background:#fee2e2; color:#991b1b; }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.flex { display:flex; align-items:center; gap:8px; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.mb8 { margin-bottom:8px; }
.mb16 { margin-bottom:16px; }
.mt16 { margin-top:16px; }
.mt24 { margin-top:24px; }

.stars { display:inline-flex; gap:2px; cursor:pointer; font-size:28px; user-select:none; }
.stars .star { color:var(--border); transition:.1s; }
.stars .star.active { color:var(--star); }
.stars .star:hover { color:var(--star); }

.scale10 { display:flex; gap:4px; flex-wrap:wrap; }
.scale10 .num {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--border); border-radius:8px; font-size:15px; font-weight:600;
  cursor:pointer; transition:.15s;
}
.scale10 .num.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.scale10 .num:hover { border-color:var(--accent); }

.radio-group { display:flex; flex-direction:column; gap:6px; }
.radio-group label { display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; padding:6px 0; }
.radio-group input[type="radio"] { accent-color:var(--accent); width:18px; height:18px; }

.progress-bar { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.progress-bar .fill { height:100%; border-radius:4px; transition:width .3s; }

.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex;
  align-items:center; justify-content:center; z-index:100;
}
.modal { background:var(--surface); border-radius:12px; padding:28px; max-width:560px; width:90%; max-height:90vh; overflow-y:auto; }

.topbar {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:12px 20px; position:sticky; top:0; z-index:10;
}
.topbar .inner { max-width:960px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.topbar .logo { font-size:16px; font-weight:700; color:var(--text); }

.survey-list { display:flex; flex-direction:column; gap:12px; }

.tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
.tab-bar button {
  padding:10px 20px; border:none; background:none; color:var(--text2); font-size:14px;
  font-weight:500; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px;
}
.tab-bar button.active { color:var(--accent); border-bottom-color:var(--accent); }

@media(max-width:600px) {
  .grid2 { grid-template-columns:1fr; }
  .container { padding:16px; }
  .scale10 .num { width:32px; height:32px; font-size:13px; }
}