/* ============================================================
   OR Media 寰洋传媒 — 问卷系统全局样式 v3
   ============================================================ */
:root {
  --color-primary: #1C244B;
  --color-accent: #467FF7;
  --color-bg-dark: #010A1B;
  --color-bg-light: #F9FAFD;
  --color-bg-card: #FFFFFF;
  --color-bg-muted: #F3F5F8;
  --color-text-light: #FFFFFF;
  --color-text-dark: #1C244B;
  --color-text-muted: #54595F;
  --color-border: #e8ecf0;
  --color-hover: #1a73e8;
  --color-input-border: #D6D5D5;
  --color-input-focus: #706F6F;
  --color-btn-bg: #1C244B;
  --color-btn-hover: #323232;
  --color-danger: #e0454e;
  --color-success: #2d8a4e;
  --font-heading: 'Poppins','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body: 'Inter','Poppins','PingFang SC','Microsoft YaHei',sans-serif;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --radius: 0px;
  --transition: 0.3s ease;
  --sidebar-w: 220px;
  --header-h: 56px;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text-dark);
  background: var(--color-bg-light); line-height: 1.6; -webkit-font-smoothing: antialiased;
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-hover); }
button { font-family: inherit; }

/* ---- Header ---- */
.app-header {
  flex-shrink: 0; height: var(--header-h); display: flex; align-items: center;
  justify-content: space-between; padding: 0 24px; background: transparent;
}
.app-header--solid-dark { background: var(--color-primary); }
.app-header--login { background: var(--color-bg-dark); }
.app-logo { display: flex; align-items: center; gap: 10px; }
.app-logo img { height: 56px; width: auto; }
.header-actions { display: flex; align-items: center; gap: 14px; }

/* ---- Footer ---- */
.app-footer {
  flex-shrink: 0; background: var(--color-primary); color: rgba(255,255,255,.75);
  text-align: left; padding: 12px 16px; font-size: .78rem;
  font-family: var(--font-heading); font-weight: 300; line-height: 1.7;
}
.app-footer a { color: rgba(255,255,255,.75); }
.app-footer a:hover { color: var(--color-accent); }
.app-footer .footer-line { display: block; }
/* 登录页 footer 透明融入深色背景 */
.app-footer--login { background: var(--color-bg-dark); color: rgba(255,255,255,.75); text-align: center; }
.app-footer--login a { color: rgba(255,255,255,.75); }

/* 问卷填写页 footer：白色背景、灰色字、左对齐统一起点 */
.app-footer--survey {
  background: rgb(249,250,253);
  color: var(--color-text-muted);
  text-align: left;
  padding: 14px clamp(20px,6%,80px);
}
.app-footer--survey a { color: var(--color-text-muted); }
.app-footer--survey a:hover { color: var(--color-accent); }

/* ---- Login ---- */
.login-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #010A1B, #02122F); padding: 24px; overflow-y: auto;
}
.login-card { width: 100%; max-width: 400px; background: var(--color-bg-card); padding: 40px; }
.login-card h1 { font-family: var(--font-heading); font-weight: 300; font-size: 1.6rem; text-align: center; margin-bottom: 6px; }
.login-card .subtitle { text-align: center; color: var(--color-text-muted); font-size: var(--fs-small); margin-bottom: 28px; }
.login-card .field { margin-bottom: 20px; }
.login-card label { display: block; font-family: var(--font-heading); font-size: var(--fs-small); margin-bottom: 6px; }
.login-card input { width: 100%; padding: 11px 14px; border: 1px solid var(--color-input-border); font-family: var(--font-body); font-size: var(--fs-body); }
.login-card input:focus { outline: none; border-color: var(--color-input-focus); }
.login-card .btn { width: 100%; }
.login-error { color: var(--color-danger); font-size: var(--fs-small); text-align: center; margin-bottom: 14px; min-height: 18px; }
.login-hint { margin-top: 20px; text-align: center; font-size: .8rem; color: #a0a4ad; }
.captcha-row { display: flex; gap: 10px; align-items: center; }
.captcha-row input { flex: 1; }

/* ---- 后台：左侧菜单布局 ---- */
.admin-layout { flex: 1; display: flex; overflow: hidden; }
.admin-sidebar {
  flex-shrink: 0; width: var(--sidebar-w); background: var(--color-primary);
  display: flex; flex-direction: column; color: #fff; overflow-y: auto;
}
.admin-sidebar .sidebar-logo { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.admin-sidebar .sidebar-logo img { height: 64px; width: auto; filter: brightness(0) invert(1); }
.admin-sidebar .sidebar-logo span { font-family: var(--font-heading); font-size: .85rem; font-weight: 300; }
.sidebar-nav { flex: 1; padding: 12px 0; }
.sidebar-nav .nav-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  color: rgba(255,255,255,.7); cursor: pointer; font-family: var(--font-heading);
  font-size: .9rem; transition: all var(--transition); border-left: 3px solid transparent;
}
.sidebar-nav .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav .nav-item.active { background: rgba(70,127,247,.15); border-left-color: var(--color-accent); color: #fff; }
.sidebar-nav .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-bottom { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; }
.sidebar-bottom .user-info { color: rgba(255,255,255,.6); margin-bottom: 8px; }
.admin-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.admin-topbar {
  flex-shrink: 0; height: var(--header-h); background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border); display: flex; align-items: center;
  justify-content: space-between; padding: 0 24px;
}
.admin-topbar .page-title { font-family: var(--font-heading); font-weight: 400; font-size: 1.1rem; }
.admin-body { flex: 1; padding: 24px; overflow-y: auto; }

/* ---- 问卷填写页 ---- */
.survey-main { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.survey-hero { padding: 24px clamp(20px,6%,80px) 12px; text-align: left; }
.survey-logo { margin-bottom: 16px; }
.survey-logo img { height: 62px; width: auto; }
.survey-hero h1 { font-family: var(--font-heading); font-weight: 300; font-size: clamp(24px,4vw,42px); margin-bottom: 6px; }
.survey-hero p { color: var(--color-text-muted); font-size: var(--fs-body); }
.progress-wrap { width: 100%; max-width: 760px; margin: 0 0 28px; padding: 0 clamp(20px,6%,80px); }
.progress-track { width: 100%; height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--color-accent); border-radius: 2px; transition: width .4s cubic-bezier(.4,0,.2,1); }
.survey-content { max-width: 760px; margin: 0; padding: 0 clamp(20px,6%,80px) 40px; width: 100%; }
.survey-page { display: none; }
.survey-page.active { display: block; }
.survey-nav { display: flex; justify-content: space-between; margin-top: 28px; gap: 12px; }

/* ---- 表单控件 ---- */
.field, .editor-field { margin-bottom: 22px; }
.survey-form label, .editor-field label { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.05rem; margin-bottom: 8px; }
.survey-form label .req { color: var(--color-accent); margin-left: 4px; }
.survey-form input[type="text"],.survey-form input[type="email"],.survey-form input[type="tel"],
.survey-form input[type="number"],.survey-form input[type="date"],.survey-form select,.survey-form textarea,
.editor-field input,.editor-field select,.editor-field textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-body); padding: 11px 14px;
  border: 1px solid var(--color-input-border); border-radius: var(--radius); background: var(--color-bg-card);
  color: var(--color-text-dark); transition: border-color var(--transition); -webkit-appearance: none; appearance: none;
}
.survey-form select,.editor-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2354595F' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.survey-form textarea,.editor-field textarea { resize: vertical; min-height: 100px; }
.survey-form input:focus,.survey-form select:focus,.survey-form textarea:focus,
.editor-field input:focus,.editor-field select:focus,.editor-field textarea:focus { outline: none; border-color: var(--color-input-focus); }
.survey-form input.invalid { border-color: var(--color-danger); }
.field-error { color: var(--color-danger); font-size: var(--fs-small); margin-top: 4px; min-height: 18px; }
.option-group { display: flex; flex-direction: column; gap: 10px; }
.option-group label { display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; padding: 11px 16px; border: 1px solid var(--color-border); transition: all var(--transition); margin-bottom: 0; }
.option-group label:hover { background: var(--color-bg-muted); }
.option-group input { accent-color: var(--color-accent); width: 18px; height: 18px; }
.option-group label:has(input:checked) { border-color: var(--color-accent); background: rgba(70,127,247,.06); }

/* 量表/评分/NPS */
.scale-group { display: flex; gap: 0; border: 1px solid var(--color-border); }
.scale-group label { flex: 1; text-align: left; padding: 12px 8px; border-right: 1px solid var(--color-border); cursor: pointer; font-weight: 400; transition: all var(--transition); }
.scale-group label:last-child { border-right: none; }
.scale-group label:hover { background: var(--color-bg-muted); }
.scale-group label:has(input:checked) { background: var(--color-accent); color: #fff; }
.scale-group input { display: none; }
.nps-group { display: flex; gap: 0; }
.nps-group label { flex: 1; text-align: left; padding: 10px 4px; border: 1px solid var(--color-border); border-right: none; cursor: pointer; font-size: .85rem; transition: all var(--transition); }
.nps-group label:last-child { border-right: 1px solid var(--color-border); }
.nps-group label:has(input:checked) { background: var(--color-accent); color: #fff; }
.nps-group input { display: none; }

/* 矩阵题 */
.matrix-table { width: 100%; border-collapse: collapse; }
.matrix-table th, .matrix-table td { border: 1px solid var(--color-border); padding: 8px 10px; text-align: left; font-size: .9rem; }
.matrix-table th { background: var(--color-bg-muted); font-family: var(--font-heading); font-weight: 500; }
.matrix-table td:first-child { text-align: left; font-weight: 500; background: var(--color-bg-muted); }

/* ---- 按钮 ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; padding: 11px 32px; border: none; border-radius: var(--radius); cursor: pointer; transition: background var(--transition),transform .15s ease; }
.btn--primary { background: var(--color-btn-bg); color: var(--color-text-light); }
.btn--primary:hover { background: var(--color-btn-hover); }
.btn--primary:active { transform: scale(.98); }
.btn--secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn--secondary:hover { background: var(--color-primary); color: #fff; }
.btn--danger { background: transparent; color: var(--color-danger); border: 1px solid var(--color-danger); padding: 6px 14px; font-size: var(--fs-small); }
.btn--danger:hover { background: var(--color-danger); color: #fff; }
.btn--sm { padding: 8px 18px; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- 卡片/表格/工具栏 ---- */
.msg-card { max-width: 480px; margin: 60px auto; text-align: center; padding: 48px 32px; background: var(--color-bg-card); }
.msg-card .check { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: rgba(70,127,247,.12); display: flex; align-items: center; justify-content: center; }
.msg-card .check svg { width: 32px; height: 32px; }
.msg-card h2 { font-family: var(--font-heading); margin-bottom: 8px; }
.msg-card p { color: var(--color-text-muted); }
.stats-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 180px; background: var(--color-bg-card); padding: 22px; border: 1px solid var(--color-border); }
.stat-card .num { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 300; color: var(--color-primary); }
.stat-card .label { color: var(--color-text-muted); font-size: var(--fs-small); }
.table-wrap { width: 100%; overflow-x: auto; background: var(--color-bg-card); border: 1px solid var(--color-border); }
table { width: 100%; border-collapse: collapse; }
th,td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--color-border); }
th { font-family: var(--font-heading); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); white-space: nowrap; background: var(--color-bg-muted); }
tr:hover td { background: var(--color-bg-muted); }
.empty-state { text-align: left; padding: 60px 20px; color: var(--color-text-muted); }
.badge { display: inline-block; padding: 3px 10px; font-size: .8rem; background: var(--color-bg-muted); color: var(--color-text-dark); }
.badge--green { background: rgba(45,138,78,.12); color: var(--color-success); }
.badge--gray { background: var(--color-bg-muted); color: #999; }
.badge--blue { background: rgba(70,127,247,.12); color: var(--color-accent); }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

/* ---- 答卷详情抽屉 ---- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; display: none; }
.drawer-overlay.active { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: var(--color-bg-card); z-index: 201; overflow-y: auto; transform: translateX(100%); transition: transform var(--transition); box-shadow: -4px 0 24px rgba(0,0,0,.12); }
.drawer.active { transform: translateX(0); }
.drawer-header { padding: 18px 24px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
.drawer-header h2 { font-family: var(--font-heading); font-weight: 400; font-size: 1.2rem; }
.drawer-body { padding: 24px; }
.drawer-body .detail-row { margin-bottom: 18px; }
.drawer-body .detail-label { font-family: var(--font-heading); font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: 4px; }
.drawer-body .detail-value { font-size: 1rem; }

/* ---- 分析图表 ---- */
.analysis-question { background: var(--color-bg-card); border: 1px solid var(--color-border); padding: 20px; margin-bottom: 16px; }
.analysis-question h4 { font-family: var(--font-heading); font-weight: 500; margin-bottom: 12px; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bar-label { width: 140px; flex-shrink: 0; font-size: var(--fs-small); }
.bar-track { flex: 1; height: 24px; background: var(--color-bg-muted); overflow: hidden; }
.bar-fill { height: 100%; background: var(--color-accent); transition: width .6s ease; }
.bar-count { width: 40px; flex-shrink: 0; font-size: var(--fs-small); color: var(--color-text-muted); text-align: right; }

/* ---- 详情页布局（左侧功能栏） ---- */
.detail-layout { display: flex; flex: 1; overflow: hidden; height: 100vh; }
.detail-sidebar { flex-shrink: 0; width: 200px; background: var(--color-primary); display: flex; flex-direction: column; padding-top: 12px; overflow-y: auto; }
.detail-sidebar .ds-item { display: flex; align-items: center; gap: 10px; padding: 12px 18px; color: rgba(255,255,255,.7); cursor: pointer; font-family: var(--font-heading); font-size: .88rem; border-left: 3px solid transparent; transition: all var(--transition); }
.detail-sidebar .ds-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.detail-sidebar .ds-item.active { background: rgba(70,127,247,.15); border-left-color: var(--color-accent); color: #fff; }
.detail-sidebar .ds-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.detail-main { flex: 1; overflow-y: auto; padding: 28px; }
.detail-panel { display: none; }
.detail-panel.active { display: block; }

/* ---- 编辑器 ---- */
.editor-palette { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.palette-group { margin-bottom: 12px; }
.palette-group-title { font-family: var(--font-heading); font-size: .8rem; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 6px; }
.palette-item { padding: 6px 12px; border: 1px solid var(--color-border); cursor: grab; font-size: .82rem; background: var(--color-bg-card); transition: all var(--transition); display: inline-block; margin: 0 4px 4px 0; }
.palette-item:hover { border-color: var(--color-accent); background: rgba(70,127,247,.06); }
.editor-canvas { background: var(--color-bg-card); border: 1px solid var(--color-border); padding: 20px; min-height: 300px; }
.editor-q-card { border: 1px solid var(--color-border); padding: 16px; margin-bottom: 12px; cursor: grab; transition: all var(--transition); }
.editor-q-card.dragging { opacity: .5; }
.editor-q-card.drag-over { border-color: var(--color-accent); border-style: dashed; }
.editor-q-card.selected { border-color: var(--color-accent); background: rgba(70,127,247,.02); }
.editor-q-card .q-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.editor-q-card .q-type { font-size: .8rem; color: var(--color-accent); font-family: var(--font-heading); }
.editor-q-card .q-actions { display: flex; gap: 6px; }
.editor-q-card .q-actions button { font-size: .75rem; padding: 4px 10px; }
.editor-options { margin-top: 8px; }
.editor-option-row { display: flex; gap: 6px; margin-bottom: 6px; }
.editor-option-row input { flex: 1; padding: 6px 10px; font-size: var(--fs-small); border: 1px solid var(--color-input-border); }
/* 属性面板 */
.q-props { margin-top: 12px; padding: 14px; background: var(--color-bg-muted); border: 1px solid var(--color-border); }
.q-props .prop-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .85rem; }
.q-props .prop-row label { margin-bottom: 0; white-space: nowrap; }
.q-props input[type="text"], .q-props input[type="number"], .q-props select, .q-props textarea { padding: 6px 10px; font-size: .85rem; border: 1px solid var(--color-input-border); }
.q-props textarea { width: 100%; min-height: 50px; }
.batch-options { width: 100%; min-height: 80px; padding: 8px; font-size: .85rem; border: 1px solid var(--color-input-border); margin-top: 6px; }

/* ---- 预览 ---- */
.preview-frame-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.preview-devices { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.preview-stage { background: var(--color-bg-muted); padding: 24px; border: 1px solid var(--color-border); overflow: auto; max-height: 70vh; display: flex; justify-content: center; width: 100%; }
.preview-frame { border: 1px solid var(--color-border); background: #fff; transition: all .3s ease; height: 600px; }
.device-btn { padding: 8px 16px; border: 1px solid var(--color-border); background: var(--color-bg-card); cursor: pointer; font-size: var(--fs-small); }
.device-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.custom-size-row { display: flex; gap: 8px; align-items: center; }

/* ---- 表单/设置通用 ---- */
.settings-card { background: var(--color-bg-card); border: 1px solid var(--color-border); padding: 24px; max-width: 700px; }
.settings-card .field { margin-bottom: 18px; }
.settings-card label { display: block; font-family: var(--font-heading); font-size: .9rem; margin-bottom: 6px; }
.settings-card input, .settings-card select, .settings-card textarea { width: 100%; padding: 10px; border: 1px solid var(--color-input-border); font-family: var(--font-body); }
.settings-card input:focus, .settings-card select:focus, .settings-card textarea:focus { outline: none; border-color: var(--color-input-focus); }
.settings-card .checkbox-row { display: flex; align-items: center; gap: 8px; }
.settings-card .checkbox-row input { width: auto; }

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .admin-sidebar { width: 180px; }
  .detail-sidebar { width: 170px; }
}
@media (max-width: 767px) {
  .admin-sidebar { display: none; }
  .stats-grid { gap: 12px; }
  .drawer { width: 100vw; }
  .bar-label { width: 100px; }
  .detail-layout { flex-direction: column; }
  .detail-sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
  .detail-sidebar .ds-item { border-left: none; border-bottom: 3px solid transparent; }
  .detail-sidebar .ds-item.active { border-bottom-color: var(--color-accent); }
}

/* ---- 工具类 ---- */
.hidden { display: none !important; }
.text-muted { color: var(--color-text-muted); }
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 28px; }
.mb-2 { margin-bottom: 16px; }
.flex { display: flex; }
.gap-2 { gap: 8px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }