:root{color-scheme:light;--ink:#283741;--muted:#697780;--blue:#526f83;--line:#dce3e7;--wash:#f3f6f7;--paper:#fff;font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.7;color:var(--ink);background:var(--wash)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,svg{touch-action:manipulation}button{border:1px solid var(--blue);border-radius:9px;padding:12px 24px;background:var(--blue);color:white;cursor:pointer;font-weight:600;min-height:48px}button:hover:not(:disabled){background:#405d71}button:disabled{opacity:.43;cursor:not-allowed}button.secondary{background:white;color:var(--blue);border-color:var(--line)}button.link{background:transparent;border:0;color:var(--muted);padding:8px 10px;font-weight:400}a{color:var(--blue)}:focus-visible{outline:3px solid #90b5d1;outline-offset:4px}.site-header{max-width:920px;padding:28px 24px 20px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--ink);font-size:20px;font-weight:700;letter-spacing:.05em}.brand-icon{display:inline-grid;place-items:center;background:#e5ecf0;width:34px;height:34px;border-radius:10px;color:var(--blue)}.demo-badge{border:1px solid #d3dfe6;border-radius:30px;padding:3px 12px;font-size:12px;letter-spacing:.08em;color:var(--blue)}main{max-width:800px;margin:0 auto;padding:0 24px;min-height:68vh}.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:36px;margin:20px 0;box-shadow:0 5px 20px #24394604}h1{font-size:28px;line-height:1.4;margin:8px 0 16px;letter-spacing:.02em}h2{font-size:20px;margin:0 0 8px}h3{font-size:16px;margin:24px 0 6px}p{margin:8px 0 18px}.muted,.intro{color:var(--muted)}.eyebrow{color:var(--blue);font-size:12px;letter-spacing:.16em}.flow{display:flex;gap:8px;align-items:center;margin:20px 0;font-size:13px;color:var(--muted);flex-wrap:wrap}.flow span:not(:last-child):after{content:' →';color:#a6b4bd}.flow .active{color:var(--blue);font-weight:700}.divider{border:0;border-top:1px solid var(--line);margin:26px 0}.actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.actions button{flex:1}.check{display:flex;gap:12px;align-items:flex-start;padding:18px 0}.check input{width:20px;height:20px;accent-color:var(--blue);flex-shrink:0;margin-top:4px}.center{text-align:center}.rest-orb{border:1px solid #bacbd6;border-radius:50%;width:190px;height:190px;display:grid;place-items:center;margin:36px auto;color:var(--blue);font-size:22px;background:#f9fbfc;box-shadow:0 0 0 12px #f6f9fa}.progress{height:6px;border-radius:8px;background:#e8edef;overflow:hidden;margin:24px 0 12px}.progress>div{background:#809aa9;height:100%;transition:width .4s}.save-status{font-size:12px;color:var(--muted);text-align:right;min-height:24px}.notice{border:1px solid #dfbd8b;background:#fff9ef;color:#75552e;border-radius:10px;padding:14px 18px;margin:16px 0}.notice button{margin-left:12px;padding:5px 14px;min-height:36px}.scale-key{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:20px 0}.scale-key span{background:var(--wash);padding:4px 9px;border-radius:5px}.panas-item{border:0;border-top:1px solid var(--line);padding:20px 0;margin:0;min-width:0}.panas-item legend{float:left;width:100%;padding:0 0 12px;font-size:15px}.ratings{clear:both;display:flex;gap:8px}.rating{position:relative;flex:1;text-align:center;cursor:pointer}.rating input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0}.rating span{display:block;border:1px solid var(--line);border-radius:8px;padding:8px 2px;font-size:13px}.rating input:checked+span{background:#e4edf3;border-color:var(--blue);color:#314f63;font-weight:600}.rating input:focus-visible+span{outline:3px solid #90b5d1;outline-offset:2px}.scs-wrap{max-width:540px;margin:20px auto}.scs{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;user-select:none}.scs .grid{stroke:#c8d2d9;stroke-width:.6;stroke-dasharray:3 4}.scs .axis{stroke:#6b808d;stroke-width:1.4}.scs text{fill:#60727e;font-size:10px}.scs .axis-label{font-size:13px;font-weight:600}.point-info{background:var(--wash);padding:14px;border-radius:8px;font-size:14px;text-align:center;min-height:56px}.counter{font-size:13px;color:var(--blue)}.receipt{background:var(--wash);padding:18px 22px;border-radius:10px;text-align:left;overflow-wrap:anywhere}.receipt dt{font-size:12px;color:var(--muted)}.receipt dd{margin:2px 0 12px}.success-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin:12px auto 24px;background:#e7f0ed;color:#537566;font-size:30px}.headphones{font-size:64px;color:var(--blue);line-height:1.4;margin:28px}.login{margin-top:30px}.login input{display:block;width:100%;border:1px solid var(--line);border-radius:8px;padding:12px;margin:8px 0 16px;background:#fff}.token{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--wash);padding:18px;border-radius:8px;user-select:all;font-family:ui-monospace,monospace}footer{text-align:center;color:#87949d;font-size:12px;line-height:1.9;padding:36px 24px 26px}.hidden,[hidden]{display:none!important}@media(max-width:560px){.site-header{padding:20px 18px}main{padding:0 14px}.card{padding:24px 19px;border-radius:14px;margin:12px 0}h1{font-size:25px}.ratings{gap:5px}.rating span{font-size:12px;padding:9px 1px}.actions{flex-direction:column}.flow{gap:5px;font-size:12px}.scs-wrap{margin:16px -8px}.rest-orb{width:160px;height:160px}.scale-key{gap:5px}}
.test-mode-banner{border:1px solid #9bb9cb;background:#edf5f8;color:#36596d;border-radius:10px;padding:10px 14px;margin:16px 0 8px;text-align:center;font-size:14px;font-weight:700;letter-spacing:.02em}

/* MPA portal shell and participant/admin navigation */
:root{--navy:#11294d;--portal-bg:#f3f4f6;--portal-card:#fff}
.experiment-page{background:var(--portal-bg)}.experiment-page .site-header{max-width:760px;background:var(--navy);color:#fff;padding:22px 20px;border-radius:0 0 26px 26px}.experiment-page .brand{color:#fff}.experiment-page .brand-icon{background:#ffffff20;color:#fff}.experiment-page .demo-badge{border-color:#ffffff66;color:#fff}.experiment-page main{max-width:760px;padding-bottom:24px}
.portal-page{background:var(--portal-bg);color:#151922}
.portal-page .site-header{display:none}
.portal-page main{max-width:760px;padding:0 20px 24px}
.portal-hero{margin:0 -20px 18px;padding:34px 24px 44px;background:var(--navy);color:#fff;border-radius:0 0 30px 30px}
.portal-hero p{margin:0 0 6px;opacity:.78}.portal-hero h1{margin:0;font-size:28px}
.portal-stack{display:grid;gap:14px;margin-top:-34px}
.info-panel{background:var(--portal-card);border:1px solid #e6e8ec;border-radius:20px;padding:20px;box-shadow:0 8px 24px #1018280d}
.info-panel h2{font-size:19px;margin:0 0 8px}.info-panel p{margin:6px 0;color:#596273}
.info-panel label{display:grid;gap:5px;margin:10px 0;font-weight:600}.info-panel input,.info-panel select{width:100%;border:1px solid #d9dde4;border-radius:11px;padding:10px;background:#fff}.info-panel .check{display:grid;grid-template-columns:auto 1fr}.info-panel .check input{width:20px}.admin-page .cycle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.primary-link,.secondary-link{display:block;border-radius:999px;padding:13px 18px;text-align:center;text-decoration:none;font-weight:700}
.primary-link{background:var(--navy);color:#fff}.secondary-link{margin-top:10px;border:1px solid #dfe3e9;color:var(--navy)}
.bottom-nav{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,760px);display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid #e3e6eb;padding:7px 8px max(8px,env(safe-area-inset-bottom))}
.bottom-nav a{display:grid;place-items:center;gap:2px;min-height:52px;color:#7b8492;text-decoration:none;font-size:13px}.bottom-nav a span{font-size:20px;line-height:1}.bottom-nav a.active{color:var(--navy);font-weight:700}
.login-panel{display:grid;gap:9px;max-width:520px;margin:-34px auto 0}.login-panel input{width:100%;border:1px solid #d9dde4;border-radius:12px;padding:12px;background:#fff}.login-panel button{margin-top:8px}
.panel-row,.history-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.history-row{padding:10px 0;border-top:1px solid #eceef1}.history-row:first-of-type{border-top:0}
.portal-progress{height:8px;border-radius:99px;overflow:hidden;background:#e6e9ef;margin:14px 0}.portal-progress span{display:block;height:100%;background:var(--navy)}
.cycle-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.cycle-grid>span{display:grid;place-items:center;min-height:68px;border-radius:13px;background:#f1f3f6;color:#737c89;text-align:center}.cycle-grid small{display:block}.cycle-grid .done{color:#253044}.cycle-grid .current{outline:2px solid var(--navy);color:var(--navy)}
.export-links{display:flex;gap:8px;flex-wrap:wrap}.export-links a{border:1px solid #d9dde4;border-radius:999px;padding:9px 13px;color:var(--navy);text-decoration:none}

/* Experiment & Questionnaire Layout */
.experiment-context{border-radius:18px;background:#e9edf3;color:var(--navy);padding:8px 16px;margin:8px 0 12px;text-align:center;font-weight:700;font-size:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.text-action{width:auto;padding:4px 8px;margin-left:8px;background:transparent;color:#7d2632;border:1px solid #d7aeb4}.review-actions{display:flex;gap:8px;flex-wrap:wrap}.review-actions button{width:auto;flex:1}.review-actions .secondary{background:#fff;color:var(--navy);border:1px solid var(--navy)}.private-link{display:inline-block;margin:6px 0 12px;color:var(--navy);font-weight:700}.form-message{color:#a12434;min-height:1.4em}
.questionnaire-card{border-radius:22px;padding:28px 24px}
.questionnaire-title{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:8px}
.questionnaire-title h1{margin:2px 0 0;font-size:24px}
.questionnaire-actions{display:flex;gap:12px;margin-top:20px}.questionnaire-actions>*{flex:1}
.submit-panel{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.submit-panel button{width:100%}

/* ==========================================================================
   问卷步骤导航、打分圆点矩阵（Likert 标度）与响应式布局
   ========================================================================== */

/* 步骤导航标签栏 (Step Nav) */
.questionnaire-step-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1f5f9;
  padding: 6px;
  border-radius: 14px;
  margin-bottom: 22px;
}
.q-step-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #64748b;
  padding: 8px 12px;
  min-height: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.q-step-tab:hover:not(:disabled) {
  background: #e2e8f0;
  color: #1e293b;
}
.q-step-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.q-step-tab.active {
  background: #ffffff;
  color: #1f4268;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-color: #e2e8f0;
}
.q-step-tab .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.q-step-tab.active .step-badge {
  background: #1f4268;
}
.q-step-tab .step-count {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #e2e8f0;
  color: #475569;
}
.q-step-tab.active .step-count {
  background: #e0f2fe;
  color: #0369a1;
}
.q-step-tab .step-count.done {
  background: #dcfce7;
  color: #15803d;
  font-weight: 600;
}
.step-arrow {
  color: #94a3b8;
  font-size: 14px;
  user-select: none;
}

/* PANAS Header & Legend */
.panas-screen { padding: 28px 24px; }
.panas-screen .intro { font-size: 14px; line-height: 1.6; margin: 8px 0 14px; color: #475569; }
.counter-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #3b82f6;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid #e2e8f0;
}
.counter-badge.completed {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.panas-legend-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 16px;
  margin: 12px 0 16px;
  font-size: 13px;
  color: #475569;
  flex-wrap: wrap;
  gap: 8px;
}
.panas-legend-title { font-weight: 600; color: #1e293b; }
.panas-legend-scale { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.panas-legend-item { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.panas-legend-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1f4268;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

/* PANAS Table Layout */
.panas-table-wrap {
  overflow: auto;
  border: 1px solid #d0d7de;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(16, 24, 40, 0.04);
  margin: 12px 0 20px;
}
.panas-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.5;
}
.panas-table thead {
  background: linear-gradient(135deg, #1f4268, #2b5b8d);
  color: #ffffff;
}
.panas-table thead th {
  padding: 12px 14px;
  font-weight: 600;
  text-align: left;
  letter-spacing: 0.02em;
}
.panas-table thead th.col-num { text-align: center; width: 56px; }
.panas-table thead th.col-text { width: 180px; }
.panas-table thead th.col-dots { text-align: center; }

.dot-col-headers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 420px;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 600;
  padding: 0 8px;
}
.dot-col-headers span {
  flex: 1;
  text-align: center;
}

.panas-table tbody tr {
  transition: background-color 0.15s ease;
}
.panas-table tbody tr:nth-child(even) { background-color: #f8fafc; }
.panas-table tbody tr:hover { background-color: #edf4fb; }
.panas-table tbody tr.row-answered { background-color: #f0f7ff; }

.panas-table td, .panas-table tbody th {
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}
.panas-table tbody tr:last-child td, .panas-table tbody tr:last-child th {
  border-bottom: none;
}
.panas-table .col-num {
  text-align: center;
  color: #64748b;
  font-weight: 600;
}
.panas-table tbody th.col-text {
  text-align: left;
  font-weight: 500;
  color: #1e293b;
  font-size: 15px;
}

/* Likert 一排点 (Horizontal Rating Dots) */
.col-dots {
  padding: 6px 12px !important;
}
.rating-dots {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.rating-dot-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: all 0.15s ease;
  user-select: none;
  position: relative;
  min-width: 48px;
}
.rating-dot-label:hover {
  background: #e2e8f0;
}
.rating-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.dot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.rating-dot-label:hover .dot-btn {
  border-color: #1f4268;
  color: #1f4268;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(31, 66, 104, 0.15);
}
.rating-dot-label.selected .dot-btn {
  background: linear-gradient(135deg, #1f4268, #2d5e8f);
  border-color: #1f4268;
  color: #ffffff;
  font-weight: 700;
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(31, 66, 104, 0.35);
}
.dot-caption {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  transition: color 0.15s;
  white-space: nowrap;
}
.rating-dot-label.selected .dot-caption {
  color: #1f4268;
  font-weight: 700;
}
.rating-dot-label:focus-within .dot-btn {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Actions and Buttons */
.questionnaire-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.primary-btn {
  background: #1f4268;
  color: #ffffff;
  border: 1px solid #1f4268;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.primary-btn:hover:not(:disabled) {
  background: #163250;
  box-shadow: 0 4px 12px rgba(31, 66, 104, 0.25);
}
.primary-btn.ready {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}
.primary-btn.ready:hover {
  background: #1d4ed8;
}

/* SCS Plot Screen & Return Actions */
.scs-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  margin-top: 18px;
}
.submit-panel {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}
.submit-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.axis-explainer {
  display: grid;
  gap: 6px;
  background: #f4f6f8;
  border-radius: 14px;
  padding: 14px;
  margin: 12px 0;
}
.axis-explainer p { margin: 0; font-size: 15px; color: #3e4857; }
.scs-screen .scs-wrap { max-width: 560px; }
.scs-screen .scs text { font-size: 12px; }
.scs-screen .scs .axis-label { font-size: 16px; }
.scs-screen .point-info { font-size: 16px; }

body:has(.questionnaire-card) .site-header, body:has(.questionnaire-card) > footer, body:has(.questionnaire-card) .bottom-nav { display: none !important; }
body:has(.questionnaire-card) main { padding-bottom: 24px; }
#app:has(.questionnaire-card) { display: block; }

/* Audio Volume Booster & Control Panel */
.volume-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 20px 0;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.volume-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.volume-icon-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.volume-icon-btn:hover { background: #edf2f7; border-color: #94a3b8; }
.volume-label { font-weight: 600; font-size: 15px; color: #1e293b; margin-left: 10px; flex: 1; }
.volume-badge {
  background: #e2e8f0;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  transition: all 0.2s;
}
.volume-badge.boosted { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
.volume-slider-wrap { margin: 10px 0 14px; }
.volume-slider { width: 100%; height: 8px; border-radius: 4px; accent-color: #1f4268; cursor: pointer; }
.volume-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.volume-hint { font-size: 13px; color: #64748b; font-weight: 500; }
.volume-preset-btn {
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}
.volume-preset-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.volume-preset-btn.active { background: #1f4268; color: #ffffff; border-color: #1f4268; }
.volume-tip { font-size: 12px; color: #64748b; margin: 12px 0 0; line-height: 1.5; }

/* Responsive adjustments */
@media(max-width: 640px) {
  .questionnaire-step-nav { flex-direction: column; gap: 6px; }
  .step-arrow { display: none; }
  .q-step-tab { width: 100%; justify-content: flex-start; }
  .panas-legend-bar { font-size: 12px; padding: 8px 10px; }
  .panas-legend-scale { gap: 8px; }
  .panas-table thead { display: none; }
  .panas-table, .panas-table tbody, .panas-table tr, .panas-table td, .panas-table th {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .panas-table tbody tr {
    padding: 12px 10px;
    border-bottom: 1px solid #e2e8f0;
  }
  .panas-table .col-num { display: none; }
  .panas-table tbody th.col-text {
    font-size: 15px;
    font-weight: 600;
    padding: 0 0 10px 0;
    border-bottom: none;
    color: #1e293b;
  }
  .col-dots {
    padding: 0 !important;
    border-bottom: none !important;
  }
  .rating-dots {
    max-width: 100%;
    justify-content: space-between;
    gap: 4px;
  }
  .rating-dot-label {
    flex: 1;
    min-width: 0;
    padding: 4px 2px;
  }
  .dot-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 14px;
  }
  .dot-caption { font-size: 10px; }
  .questionnaire-actions { flex-direction: column; }
  .questionnaire-actions button { width: 100%; }
  .scs-actions { flex-direction: column; }
  .scs-actions button { width: 100%; }
  .submit-buttons { flex-direction: column; }
  .submit-buttons button { width: 100%; }
}

@media(max-width: 560px) {
  .portal-page main { padding-left: 14px; padding-right: 14px; }
  .portal-hero { margin-left: -14px; margin-right: -14px; padding-left: 18px; padding-right: 18px; }
  .cycle-grid { grid-template-columns: repeat(5, 1fr); }
  .questionnaire-card { padding: 18px 14px; border-radius: 16px; }
  .panas-screen { padding: 18px 14px; }
  .panas-screen .questionnaire-title h1 { font-size: 20px; }
  .scs-screen { padding: 18px 14px !important; }
  .scs-screen h1 { font-size: 24px; }
  .axis-explainer p { font-size: 14px; }
  .volume-panel { padding: 14px 14px; }
  .volume-preset-btn { padding: 0 8px; font-size: 12px; }
}

/* ==========================================================================
   11组管理看板、被试组Sheet分析与表格预览组件
   ========================================================================== */

/* 11组网格布局 */
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.group-card {
  background: var(--portal-card);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: transform .2s, box-shadow .2s;
}
.group-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.group-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.group-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.badge-blue { background: #e0f2fe; color: #0369a1; }
.badge-green { background: #dcfce7; color: #15803d; }
.badge-gray { background: #f1f5f9; color: #64748b; }
.badge-amber { background: #fef3c7; color: #b45309; }
.badge-rose { background: #ffe4e6; color: #be123c; }

.group-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 10px 0 14px;
  background: #f8fafc;
  padding: 10px;
  border-radius: 10px;
}
.group-metric-item small {
  display: block;
  font-size: 11px;
  color: #64748b;
}
.group-metric-item b {
  font-size: 15px;
  color: #0f172a;
}
.group-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.group-actions button, .group-actions a {
  flex: 1;
  min-height: 38px;
  padding: 6px 12px;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 现代数据表格样式 */
.data-table-wrap {
  overflow-x: auto;
  margin: 14px 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.data-table th {
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid #cbd5e1;
  white-space: nowrap;
}
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}
.data-table tbody tr:nth-child(even) {
  background: #f8fafc;
}
.data-table tbody tr:hover {
  background: #f0f9ff;
}

/* 预览模态弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-dialog {
  background: #ffffff;
  border-radius: 20px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: modalPop .2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  min-height: auto;
  line-height: 1;
}
.modal-close:hover {
  color: #0f172a;
}
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 表格内选项卡 (Sheet 1 / Sheet 2) */
.sheet-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 16px;
}
.sheet-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: #64748b;
  font-weight: 600;
  padding: 8px 16px;
  min-height: auto;
  border-radius: 0;
  cursor: pointer;
}
.sheet-tab-btn.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* 历史答题卡片 */
.sheet-card-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.sheet-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: border-color .15s;
}
.sheet-card:hover {
  border-color: #94a3b8;
}
.sheet-card-info h3 {
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--navy);
}
.sheet-card-info p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}
.sheet-card-actions {
  display: flex;
  gap: 8px;
}
.sheet-card-actions button, .sheet-card-actions a {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 管理员后台导航与顶部操作栏 */
.admin-hero {
  padding-bottom: 20px;
}
.admin-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-user-action {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}
.admin-logout-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.16);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  width: auto;
  min-height: 36px;
}
.admin-logout-button:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
  transform: translateY(-1px);
}
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 2px;
  overflow-x: auto;
}
.admin-tab {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px 8px 0 0;
  transition: all 0.15s;
  white-space: nowrap;
}
.admin-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.admin-tab.active {
  color: #38bdf8;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.14);
  border-bottom: 2px solid #38bdf8;
}

/* Site footer & ICP Filing Information */
.site-footer {
  text-align: center;
  color: #7b8893;
  font-size: 13px;
  line-height: 1.8;
  padding: 28px 20px 32px;
  border-top: 1px solid #e2e7eb;
  margin-top: auto;
  box-sizing: border-box;
  width: 100%;
}
.site-footer .footer-research {
  color: #8c9ba5;
  font-size: 12px;
  line-height: 1.7;
}
.site-footer .footer-icp {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
}
.site-footer .footer-icp a {
  color: #526f83;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all .2s ease;
}
.site-footer .footer-icp a:hover {
  color: var(--navy, #11294d);
  background: #e2e8ee;
  text-decoration: underline;
}
.portal-page .site-footer,
.experiment-page .site-footer {
  padding-bottom: 88px;
}
body:not(:has(.bottom-nav)) .site-footer {
  padding-bottom: 32px;
}