/* Reuse the font URLs declared by the supplied Nebula_岚野 stylesheet.
   When the app is deployed under a subdirectory on the same site, these resolve to the site's /fonts folder. */
@font-face { font-family: 'MiSans'; src: url(../../fonts/MiSans-Regular.woff2?v=20261028) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'MiSans'; src: url(../../fonts/MiSans-Semibold.woff2?v=20261028) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'MiSans'; src: url(../../fonts/MiSans-Bold.woff2?v=20261028) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Nebula_岚野 design tokens adapted from the supplied personal-site stylesheet.
   Scoped as an application theme layer so SurveyCraft's layout and behavior remain intact. */
:root {
  color-scheme: light;
  --bg-primary: #f0ebe3;
  --bg-secondary: #e8e0d4;
  --bg-tertiary: #ddd5c8;
  --accent: #8b6f4e;
  --accent-light: #a8896a;
  --accent-lighter: #c4a882;
  --accent-dark: #6d5739;
  --text-primary: #3d3428;
  --text-secondary: #6b5d4f;
  --text-tertiary: #9a8b7a;
  --text-inverse: #ffffff;
  --color-success: #4a9e6b;
  --color-warning: #c4943a;
  --color-danger: #c45a4a;
  --color-info: #5a8abf;
  --accent-bg: rgba(139,111,78,.12);
  --glass-edge: linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.15) 42%,rgba(255,255,255,.35));
  --glass-sheen: linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 28%,rgba(255,255,255,0) 52%);
  --glass-bg: rgba(255,255,255,.42);
  --glass-bg-strong: rgba(255,255,255,.60);
  --glass-bg-subtle: rgba(255,255,255,.24);
  --glass-border: rgba(255,255,255,.55);
  --glass-border-strong: rgba(255,255,255,.75);
  --glass-rim: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.35), inset 1px 0 1px rgba(255,255,255,.22), inset -1px 0 1px rgba(255,255,255,.22);
  --glass-shadow: 0 6px 28px rgba(61,52,40,.12), 0 1px 2px rgba(61,52,40,.06), var(--glass-rim);
  --glass-shadow-lg: 0 16px 48px rgba(61,52,40,.18), 0 2px 6px rgba(61,52,40,.08), var(--glass-rim);
  --glass-shadow-sm: 0 2px 14px rgba(61,52,40,.08), inset 0 1px 1px rgba(255,255,255,.65);
  --glass-blur: blur(22px) saturate(190%) brightness(1.04);
  --glass-blur-strong: blur(34px) saturate(210%) brightness(1.06);
  --bg: var(--bg-primary);
  --panel: var(--glass-bg);
  --panel2: var(--bg-secondary);
  --line: var(--glass-border-strong);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--accent);
  --cyan: var(--accent-light);
  --purple: var(--accent-lighter);
  --green: var(--color-success);
  --red: var(--color-danger);
  --font: 'MiSans','HYWenHei85W','PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --transition-fast: .15s ease;
  --transition-normal: .25s ease;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #16130e;
  --bg-secondary: #1e1a14;
  --bg-tertiary: #28231b;
  --accent: #c9a878;
  --accent-light: #d8bd94;
  --accent-lighter: #e6d2ac;
  --accent-dark: #a68756;
  --text-primary: #ece5d8;
  --text-secondary: #b7ac99;
  --text-tertiary: #948875;
  --text-inverse: #1c1710;
  --color-success: #5fbb82;
  --color-warning: #d9a84e;
  --color-danger: #d97060;
  --color-info: #73a4d6;
  --accent-bg: rgba(201,168,120,.16);
  --glass-edge: linear-gradient(160deg,rgba(238,222,192,.32),rgba(230,210,175,.05) 42%,rgba(230,210,175,.12));
  --glass-sheen: linear-gradient(135deg,rgba(255,244,224,.16) 0%,rgba(255,244,224,.04) 28%,rgba(255,244,224,0) 52%);
  --glass-bg: rgba(40,34,24,.46);
  --glass-bg-strong: rgba(50,42,30,.66);
  --glass-bg-subtle: rgba(40,34,24,.30);
  --glass-border: rgba(230,210,175,.16);
  --glass-border-strong: rgba(230,210,175,.26);
  --glass-rim: inset 0 1px 1px rgba(238,222,192,.22), inset 0 -1px 1px rgba(230,210,175,.05), inset 1px 0 1px rgba(230,210,175,.07), inset -1px 0 1px rgba(230,210,175,.07);
  --glass-shadow: 0 6px 28px rgba(0,0,0,.50), 0 1px 2px rgba(0,0,0,.30), var(--glass-rim);
  --glass-shadow-lg: 0 16px 48px rgba(0,0,0,.60), 0 2px 6px rgba(0,0,0,.35), var(--glass-rim);
  --glass-shadow-sm: 0 2px 14px rgba(0,0,0,.40), inset 0 1px 1px rgba(238,222,192,.16);
  --bg: var(--bg-primary);
  --panel: var(--glass-bg);
  --panel2: var(--bg-secondary);
  --line: var(--glass-border-strong);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--accent);
  --cyan: var(--accent-light);
  --purple: var(--accent-lighter);
  --green: var(--color-success);
  --red: var(--color-danger);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { color-scheme: dark; }
}

html, body { background: var(--bg-primary); color: var(--text-primary); }
body { font-family: var(--font); transition: background-color var(--transition-normal), color var(--transition-normal); }
.admin-body, .login-body, .install-body, .public-body {
  background: radial-gradient(ellipse at 12% 0%, rgba(196,168,130,.24), transparent 34%), radial-gradient(ellipse at 92% 100%, rgba(168,137,106,.19), transparent 32%), var(--bg-primary);
  color: var(--text-primary);
}
html[data-theme="dark"] .admin-body, html[data-theme="dark"] .login-body,
html[data-theme="dark"] .install-body, html[data-theme="dark"] .public-body {
  background: radial-gradient(ellipse at 12% 0%, rgba(201,168,120,.13), transparent 34%), radial-gradient(ellipse at 92% 100%, rgba(168,137,86,.10), transparent 32%), var(--bg-primary);
}
.sidebar { background: color-mix(in srgb, var(--bg-secondary) 78%, transparent); border-right-color: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 5px 0 28px rgba(61,52,40,.04); }
.brand-mark { color: var(--text-inverse); background: linear-gradient(140deg,var(--accent-dark),var(--accent-light)); box-shadow: 0 8px 24px rgba(139,111,78,.24), var(--glass-rim); }
.brand b, .top-user b { color: var(--text-primary); }
.brand small, .side-label, .top-user small { color: var(--text-tertiary); }
.side-link { color: var(--text-secondary); border: 1px solid transparent; transition: background var(--transition-normal), color var(--transition-fast), border-color var(--transition-fast); }
.side-link:hover { background: var(--glass-bg); color: var(--text-primary); border-color: var(--glass-border); }
.side-link.active { color: var(--accent-dark); background: var(--glass-bg-strong); border-color: var(--glass-border-strong); box-shadow: var(--glass-shadow-sm); }
html[data-theme="dark"] .side-link.active { color: var(--accent-lighter); }
.nav-dot { border-color: currentColor; }
.side-link.active .nav-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.side-status { color: var(--text-tertiary); border-top-color: var(--glass-border); }
.side-status i, .public-meta i { background: var(--color-success); box-shadow: 0 0 8px color-mix(in srgb, var(--color-success) 55%, transparent); }
.main-area { color: var(--text-primary); }
.topbar { border-bottom-color: var(--glass-border); }
.eyebrow { color: var(--accent); }
.topbar h1, .page-heading h2, .panel-head h3, .section-title b, .subsection-title { color: var(--text-primary); }
.avatar { color: var(--text-inverse); background: linear-gradient(135deg,var(--accent-dark),var(--accent-light)); box-shadow: var(--glass-shadow-sm); }
.admin-footer { color: var(--text-tertiary); border-top-color: var(--glass-border); }
.welcome-banner { border-color: rgba(255,255,255,.24); border-radius: var(--radius-xl); background: linear-gradient(112deg,#6d5739 0%,#8b6f4e 54%,#a8896a 100%); box-shadow: 0 14px 36px rgba(109,87,57,.18), inset 0 1px 1px rgba(255,255,255,.28); }
.welcome-banner h2, .welcome-banner p, .welcome-banner .eyebrow { color: #fff; }
.welcome-banner p { opacity: .82; }
.welcome-banner:after { border-color: rgba(255,255,255,.16); box-shadow: 0 0 0 35px rgba(255,255,255,.035), 0 0 0 75px rgba(255,255,255,.025); }
.orbit-ring { border-color: rgba(255,255,255,.34); }
.ring-b { border-color: rgba(255,255,255,.25); }
.orbit-core { color: #fff; background: linear-gradient(145deg,#c4a882,#6d5739); box-shadow: 0 0 35px rgba(255,239,211,.34); }
.orbit-dot { background: #e6d2ac; box-shadow: 0 0 12px #e6d2ac; }
.dot-b { background: #fff0d6; }
.btn { border-radius: 10px; transition: transform var(--transition-fast), filter var(--transition-fast), background var(--transition-normal); }
.btn.primary { background: linear-gradient(110deg,var(--accent-dark),var(--accent-light)); color: #fff; box-shadow: 0 7px 18px rgba(109,87,57,.20), inset 0 1px 1px rgba(255,255,255,.24); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.light { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--glass-border-strong); }
.btn.ghost { border-color: var(--glass-border-strong); color: var(--text-secondary); background: var(--glass-bg-subtle); }
.btn.ghost:hover { background: var(--glass-bg-strong); color: var(--text-primary); }
.btn.dashed { background: var(--accent-bg, rgba(139,111,78,.08)); border-color: color-mix(in srgb, var(--accent) 52%, transparent); color: var(--accent-dark); }
html[data-theme="dark"] .btn.dashed { color: var(--accent-lighter); }
.stat-card, .panel, .form-panel, .question-card, .answer-panel, .login-card, .install-card, .public-card {
  background-color: var(--glass-bg); background-image: var(--glass-sheen); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.stat-card { padding: 19px 21px; }
.stat-card span, .panel-head p, .page-heading p, .toolbar-note, label small, .section-title small,
.q-options-wrap small, .share-strip small, .answer-content small, .muted { color: var(--text-secondary); }
.stat-card strong { color: var(--text-primary); }
.stat-card small { color: var(--text-tertiary); }
.stat-icon { color: color-mix(in srgb, var(--accent) 42%, transparent); }
.panel-head { border-color: var(--glass-border); }
.text-link, .row-action, .action-row a, .link-action { color: var(--accent); }
th { color: var(--text-tertiary); border-bottom-color: var(--glass-border); }
td { color: var(--text-secondary); border-bottom-color: color-mix(in srgb, var(--accent) 10%, transparent); }
td b { color: var(--text-primary); }
td small.table-sub { color: var(--text-tertiary); }
.status.published { background: color-mix(in srgb, var(--color-success) 13%, transparent); color: var(--color-success); }
.status.draft { background: color-mix(in srgb, var(--text-tertiary) 13%, transparent); color: var(--text-secondary); }
.status.closed { background: color-mix(in srgb, var(--color-danger) 13%, transparent); color: var(--color-danger); }
.link-danger { color: var(--color-danger); }
.activity-item { border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.activity-mark, .section-title>span, .empty-icon { color: var(--accent); background: var(--accent-bg, rgba(139,111,78,.10)); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.activity-main b, .empty-state b { color: var(--text-primary); }
.activity-main small, .activity-item time, .empty-state p, .empty-mini { color: var(--text-tertiary); }
.page-heading p { color: var(--text-secondary); }
.form-grid label, .stack-form label, .question-config label, .login-form label, .install-form label { color: var(--text-secondary); }
input, textarea, select, .toolbar input, .toolbar select, .public-input {
  color: var(--text-primary); background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); border-radius: 10px;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
textarea { color: var(--text-primary); }
.question-card { background: var(--glass-bg-subtle); border-color: var(--glass-border); }
.question-card-top { border-bottom-color: var(--glass-border); }
.drag-label { color: var(--accent); }
.remove-question { color: var(--color-danger); }
.q-options { background: var(--glass-bg-strong); }
.share-strip, .share-url { background: var(--glass-bg-subtle); border-color: var(--glass-border); }
.share-strip b, .answer-meta b, .answer-content b { color: var(--text-primary); }
.share-strip small { color: var(--text-secondary); }
.share-url input { color: var(--text-secondary); background: transparent; }
.alert { border-radius: 12px; }
.alert.success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); border-color: color-mix(in srgb, var(--color-success) 28%, transparent); }
.alert.error { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, transparent); border-color: color-mix(in srgb, var(--color-danger) 28%, transparent); }
.answer-meta, .answer-item { border-bottom-color: var(--glass-border); }
.answer-index { color: var(--accent); }
.answer-content p { color: var(--text-secondary); }
.trend-chart, .trend-track, .rank-track { background: var(--bg-tertiary); }
.trend-track i, .rank-track i { background: linear-gradient(180deg,var(--accent-light),var(--accent-dark)); }
.trend-value, .rank-top span { color: var(--text-secondary); }
.rank-top b { color: var(--text-primary); }
.rank-top i { color: var(--accent); }
.user-grid, .settings-grid { color: var(--text-primary); }
.subsection-title { border-bottom-color: var(--glass-border); }
.stack-form hr { border-color: var(--glass-border); }
.info-row { border-bottom-color: var(--glass-border); }
.info-row b { color: var(--text-primary); }
.security-note { background: var(--glass-bg-subtle); border-color: var(--glass-border); color: var(--text-secondary); }
.security-note b { color: var(--text-primary); }
.security-note p { color: var(--text-secondary); }
.login-glow { opacity: .28; filter: blur(5px); }
.glow-one { background: radial-gradient(circle,rgba(196,168,130,.55),transparent 68%); }
.glow-two { background: radial-gradient(circle,rgba(139,111,78,.36),transparent 68%); }
.login-card, .install-card { border-radius: var(--radius-2xl); }
.login-brand .brand-mark, .install-brand .brand-mark { flex: 0 0 auto; }
.login-card h1, .install-card h1 { color: var(--text-primary); }
.login-foot, .install-foot { color: var(--text-tertiary); border-top-color: var(--glass-border); }
.install-brand b { color: var(--text-primary); }
.install-brand small { color: var(--text-tertiary); }
.requirements { background: var(--glass-bg-subtle); border: 1px solid var(--glass-border); border-radius: var(--radius-md); }
.requirements>b, .install-form h2 { color: var(--text-primary); }
.check-item { color: var(--text-secondary); }
.check-item i { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.check-item i.bad { background: color-mix(in srgb, var(--color-danger) 13%, transparent); color: var(--color-danger); }
.public-noise { opacity: .08; }
.public-top { border-bottom-color: var(--glass-border); background: var(--glass-bg-subtle); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.public-brand { color: var(--text-primary); }
.public-tag { color: var(--accent); background: var(--glass-bg); border-color: var(--glass-border); }
.public-wrap { color: var(--text-primary); }
.public-hero { background-color: var(--glass-bg); background-image: var(--glass-sheen); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.public-hero h1, .public-question h2, .public-submit b, .public-card h1 { color: var(--text-primary); }
.public-hero p, .public-question .question-head small, .public-submit small, .public-card p { color: var(--text-secondary); }
.hero-decor span, .hero-decor i, .hero-decor b { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.public-meta { color: var(--text-secondary); }
.public-question { background-color: var(--glass-bg); background-image: var(--glass-sheen); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow-sm); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.question-number { color: var(--accent); background: var(--accent-bg, rgba(139,111,78,.1)); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.question-head h2 em { color: var(--color-danger); }
.public-input { background: var(--glass-bg-strong); color: var(--text-primary); }
.choice-item { color: var(--text-secondary); }
.choice-control { border-color: color-mix(in srgb, var(--accent) 42%, var(--text-tertiary)); }
.choice-item input:checked+.choice-control { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--bg-secondary); }
.choice-item input:focus-visible+.choice-control { outline-color: var(--accent-light); }
.rating-choice span { border-color: var(--glass-border-strong); color: var(--text-secondary); background: var(--glass-bg-strong); }
.rating-choice input:checked+span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text-primary); }
.rating-choice input:focus-visible+span { outline-color: var(--accent-light); }
.rating-hints { color: var(--text-tertiary); }
.public-submit { border-color: var(--glass-border); background: var(--glass-bg); box-shadow: var(--glass-shadow-sm); }
.public-errors { background: color-mix(in srgb, var(--color-danger) 9%, transparent); border-color: color-mix(in srgb, var(--color-danger) 28%, transparent); color: var(--color-danger); }
.public-card { margin-top: 85px; }
.success-symbol { background: color-mix(in srgb, var(--color-success) 13%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 28%, transparent); }
.unavailable-symbol { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.success-line { background: linear-gradient(90deg,var(--accent-dark),var(--accent-light)); }
.public-card small, .public-footer { color: var(--text-tertiary); }
.public-footer span { color: var(--accent-light); }

.theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--glass-border-strong); border-radius: 50%; background: var(--glass-bg); color: var(--accent); box-shadow: var(--glass-shadow-sm); cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.theme-toggle:hover { background: var(--glass-bg-strong); color: var(--text-primary); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }
html[data-theme="dark"] .theme-toggle .sun { display: inline; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
.theme-toggle.floating { position: fixed; top: 18px; right: 20px; z-index: 20; }

@media (max-width:720px) {
  .sidebar { background: color-mix(in srgb, var(--bg-secondary) 90%, transparent); }
  .welcome-banner { box-shadow: var(--glass-shadow); }
  .theme-toggle.floating { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Installation wizard: allow the full form to scroll on short/mobile viewports.
   The legacy layout used a centered grid with overflow:hidden, which clipped
   fields below the viewport on phones. */
html:has(body.install-body) {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
body.install-body {
  display: block;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  padding: max(24px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.install-wrap {
  width: min(100%, 720px);
  margin: 0 auto;
  min-width: 0;
}
.install-card {
  min-width: 0;
  max-height: none;
  overflow: visible;
}
.install-form,
.install-form .form-grid {
  min-width: 0;
}
.install-form input,
.install-form select,
.install-form textarea {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  font-size: 16px;
}
.install-form button[type="submit"] {
  min-height: 48px;
  margin-bottom: 4px;
  touch-action: manipulation;
}
@media (max-width: 720px) {
  body.install-body {
    padding: max(18px, env(safe-area-inset-top)) 12px max(32px, env(safe-area-inset-bottom));
  }
  .install-wrap { width: 100%; }
  .install-brand { margin: 0 0 13px 3px; padding-right: 48px; }
  .install-card {
    padding: 23px 17px 22px;
    border-radius: var(--radius-xl);
  }
  .install-card h1 { font-size: 21px; }
  .install-card .muted { line-height: 1.75; }
  .install-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .install-form .form-grid label,
  .install-form .form-grid label.full { grid-column: 1 / -1; }
  .install-form input { min-height: 44px; }
  .install-form .btn.wide { position: static; width: 100%; }
  .theme-toggle.floating { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 13px; }
}

/* Real mobile admin layout: replace the desktop icon rail with a compact,
   horizontally scrollable navigation bar and let content use the full width. */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .admin-shell { display: block; width: 100%; min-width: 0; }
  .sidebar {
    position: relative;
    inset: auto;
    z-index: 10;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 12px 14px 9px;
    border-right: 0;
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 5px 24px rgba(0,0,0,.06);
  }
  .brand { width: 100%; padding: 0 2px 10px; justify-content: flex-start; gap: 10px; }
  .brand > span:not(.brand-mark) { display: block; min-width: 0; }
  .brand b { font-size: 14px; }
  .brand small { font-size: 9px; }
  .side-label, .sidebar-bottom { display: none; }
  .side-nav {
    display: flex;
    gap: 7px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 0 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-link, .side-link:not(.active) {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    height: 36px;
    gap: 8px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
  }
  .side-link .nav-dot { width: 7px; height: 7px; flex: 0 0 7px; }
  .main-area {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 15px 24px;
  }
  .topbar {
    width: 100%;
    min-height: 76px;
    height: auto;
    margin-bottom: 17px;
    padding: 12px 0;
    gap: 10px;
  }
  .topbar > div:first-child { min-width: 0; }
  .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .topbar h1 { font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
  .top-user { flex: 0 0 auto; gap: 8px; }
  .top-user > div:last-child { display: none; }
  .theme-toggle { width: 36px; height: 36px; }
  .page-content { width: 100%; min-width: 0; }
  .welcome-banner {
    min-height: 0;
    padding: 24px 21px;
    gap: 0;
    align-items: flex-start;
  }
  .welcome-banner > div:first-child { position: relative; z-index: 2; max-width: 100%; }
  .welcome-banner h2 { max-width: 18em; font-size: clamp(19px, 5vw, 23px); line-height: 1.5; }
  .welcome-banner p { max-width: 29em; line-height: 1.8; }
  .banner-orbit { display: none; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-width: 0; padding: 15px 14px; min-height: 108px; }
  .stat-card span { font-size: 11px; }
  .stat-card strong { font-size: 25px; }
  .stat-icon { right: 13px; top: 20px; font-size: 20px; }
  .content-grid, .stats-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .panel { min-width: 0; padding: 16px 14px; }
  .panel-head { gap: 8px; }
  .page-heading { display: flex; flex-wrap: wrap; gap: 12px; }
  .page-heading > div { min-width: 0; flex: 1 1 100%; }
  .page-heading > .btn { max-width: 100%; }
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .toolbar { min-width: 0; flex-wrap: wrap; gap: 9px; }
  .toolbar input, .toolbar select { min-width: 0; max-width: 100%; flex: 1 1 150px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid label, .form-grid label.full { grid-column: 1 / -1; min-width: 0; }
  .form-grid input, .form-grid textarea, .form-grid select { width: 100%; min-width: 0; font-size: 16px; }
  .question-editor, .question-card, .question-config, .answer-content { min-width: 0; }
  .share-strip { min-width: 0; }
  .share-url { min-width: 0; display: flex; width: 100%; }
  .share-url input { min-width: 0; width: 100%; }
  .admin-footer { margin-top: 20px; padding-bottom: 10px; }
}

@media (max-width: 390px) {
  .main-area { padding-right: 12px; padding-left: 12px; }
  .sidebar { padding-right: 11px; padding-left: 11px; }
  .welcome-banner { padding: 21px 17px; }
  .stat-grid { gap: 8px; }
  .stat-card { padding: 13px 11px; }
  .stat-card strong { font-size: 23px; }
  .panel { padding: 14px 12px; }
}

/* Per-option icon picker */
.q-options-wrap { display:flex; flex-direction:column; gap:8px; margin-top:14px; color:var(--text-secondary); font-size:12px; }
.q-options-wrap[hidden], .q-icon-editor[hidden] { display:none !important; }
.q-options-label { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.q-options-label small, .q-icon-heading small { color:var(--text-tertiary); font-size:11px; }
.q-icon-editor { display:grid; gap:7px; margin-top:5px; padding:13px; border:1px solid var(--glass-border); border-radius:var(--radius-md); background:var(--glass-bg); }
.q-icon-heading { display:grid; gap:3px; margin-bottom:3px; }
.q-icon-heading b { color:var(--text-primary); font-size:12px; }
.q-icon-row { display:grid; grid-template-columns:minmax(80px,1fr) 34px minmax(130px,190px) auto auto; align-items:center; gap:8px; min-width:0; padding:6px 0; border-bottom:1px solid var(--glass-border); }
.q-icon-row:last-child { border-bottom:0; }
.q-icon-option-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); font-size:12px; }
.q-icon-preview { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--glass-bg-strong); color:var(--accent); font-size:19px; overflow:hidden; }
.q-icon-preview img { width:100%; height:100%; object-fit:contain; }
.q-icon-select { min-width:0; height:34px; padding:5px 8px; font-size:11px; }
.q-icon-upload, .q-icon-clear { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 10px; border:1px solid var(--glass-border-strong); border-radius:8px; background:var(--glass-bg-strong); color:var(--text-primary); font-size:11px; cursor:pointer; white-space:nowrap; }
.q-icon-upload:hover, .q-icon-clear:hover { border-color:var(--accent); color:var(--accent); }
.option-icon { display:inline-grid; place-items:center; width:25px; height:25px; flex:0 0 25px; object-fit:contain; border-radius:7px; color:var(--accent); font-size:19px; }
.preset-icon { font-weight:600; }
.choice-item { gap:10px; }
@media(max-width:720px) {
 .q-icon-row { grid-template-columns:minmax(0,1fr) 32px; gap:7px; }
 .q-icon-option-text { grid-column:1; grid-row:1; }
 .q-icon-preview { grid-column:2; grid-row:1; }
 .q-icon-select { grid-column:1/-1; grid-row:2; width:100%; }
 .q-icon-upload { grid-column:1; grid-row:3; }
 .q-icon-clear { grid-column:2; grid-row:3; }
 .option-icon { width:23px; height:23px; flex-basis:23px; }
}