/* 心晴脉搏 网页体验版样式 —— 配色沿用小程序 app.wxss */
:root {
  --brand: #176B62;
  --brand-btn: #137D70;
  --bg: #F6F8F5;
  --ink: #183C36;
  --muted: #6B817C;
  --purple: #A7469B;
  --card: #FFFFFF;
  --line: #E4ECE8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
.page { max-width: 520px; margin: 0 auto; padding: 18px 15px 48px; }
@media (min-width: 720px) { .page { padding-top: 28px; } }

/* 品牌行 */
.brand-row { display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; }
.brand-logo { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: 1px; color: var(--brand); }
.brand-sub { color: var(--muted); font-size: 12px; margin-top: 1px; }

/* 角色切换 */
.role-row { display: flex; padding: 4px; border-radius: 12px; background: #EAF3F0; margin-bottom: 14px; }
.role-tab { flex: 1; text-align: center; padding: 9px 4px; font-size: 14px; color: #638079; border-radius: 9px; text-decoration: none; display: block; }
.role-tab.active { background: #FFF; color: var(--brand); font-weight: 700; box-shadow: 0 2px 6px rgba(30,88,77,.10); }

/* Hero */
.hero { border-radius: 16px; padding: 20px 16px; background: linear-gradient(135deg, #FFF8EE 0%, #FFFDF8 52%, #EAF6F1 100%); border: 1px solid #E0EDE7; }
.manager-hero { background: linear-gradient(135deg, #EEF9F4 0%, #F9F7FD 100%); }
.eyebrow { font-size: 13px; color: #5D796F; font-weight: 700; margin-bottom: 7px; }
.dot { color: #B745A4; padding-right: 4px; }
.hero-title { font-size: 24px; font-weight: 800; line-height: 1.28; letter-spacing: .5px; color: #16483F; }
.hero-copy { font-size: 14px; color: #58746D; margin: 10px 0 12px; }

/* 按钮链接 */
.primary-link, .secondary-link, .text-link { display: block; box-sizing: border-box; text-align: center; text-decoration: none; cursor: pointer; }
.primary-link { background: var(--brand-btn); color: #FFF; border: 0; width: 100%; border-radius: 24px; padding: 11px 14px; font-weight: 700; font-size: 15px; margin-top: 10px; font-family: inherit; }
.primary-link:disabled { background: #B9CDC7; cursor: not-allowed; }
.secondary-link { background: #FFF; color: var(--brand); border: 1px solid #C8DFD8; width: 100%; border-radius: 24px; padding: 10px 14px; font-weight: 700; font-size: 15px; margin-top: 10px; font-family: inherit; }
.text-link { color: var(--brand); font-size: 14px; font-weight: 700; padding: 12px 0 2px; }

/* 区块与卡片 */
.section { margin-top: 18px; }
.section-title { font-size: 17px; color: var(--ink); font-weight: 750; margin-bottom: 8px; }
.section-sub { color: #6C837D; font-size: 13px; margin-top: -3px; margin-bottom: 8px; }
.card { background: var(--card); border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(22,72,63,.05); border-radius: 13px; padding: 14px; margin-bottom: 10px; display: block; text-decoration: none; color: inherit; }
a.card:hover { border-color: #C8DFD8; }
.card-title { font-size: 15px; color: #224E46; font-weight: 700; }
.muted { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* 流程 */
.flow { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF3F0; }
.flow:last-child { border-bottom: 0; }
.num { width: 21px; height: 21px; border-radius: 50%; background: linear-gradient(135deg,#176B62,#A7469B); color: #FFF; text-align: center; line-height: 21px; font-size: 12px; font-weight: 700; flex: 0 0 auto; }

/* 标签 */
.chip { display: inline-block; border-radius: 11px; padding: 2px 8px; background: #E8F4EF; color: var(--brand); font-size: 12px; font-weight: 700; }
.chip.purple { background: #F6EAF5; color: #9B438F; }
.chip.warn { background: #FFF3DF; color: #8F6B1F; }

/* 提示条 */
.notice { background: #EFF7F3; color: #4C6A62; padding: 10px 11px; border-radius: 10px; font-size: 13px; line-height: 1.65; border-left: 3px solid #5FAE86; }
.notice.warn { background: #FFF7E8; border-left-color: #D2A443; color: #715E35; }
.notice.plain { background: #F3F0F8; border-left-color: #A7469B; color: #6B4A68; }

/* 指标 */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metric { border-radius: 10px; padding: 12px 6px; text-align: center; background: #F2F7F4; text-decoration: none; display: block; }
.metric-value { color: var(--brand); font-size: 19px; font-weight: 800; }
.metric-label { color: #718780; font-size: 11px; margin-top: 1px; }

/* 分数行 */
.score-row { padding: 10px 0; border-bottom: 1px solid #EEF2F0; }
.score-row:last-child { border-bottom: 0; }
.row { display: flex; justify-content: space-between; gap: 9px; align-items: center; }
.score-name { font-size: 15px; font-weight: 700; color: #254D45; }
.score-meta { font-size: 11px; color: #869892; font-weight: 400; margin-top: 1px; }
.score-value { font-size: 18px; font-weight: 800; color: var(--brand); }
.bar { height: 7px; background: #EDF3F0; border-radius: 99px; overflow: hidden; margin-top: 7px; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#176B62,#A7469B); transition: width .5s ease; }
.bar-fill.neg { background: linear-gradient(90deg,#A7469B,#D2894B); }

/* 答题 */
.progress-wrap { position: sticky; top: 0; z-index: 20; background: rgba(246,248,245,.96); backdrop-filter: blur(4px); padding: 8px 0 10px; margin: 0 -2px 6px; }
.progress-info { display: flex; justify-content: space-between; font-size: 12px; color: #5D796F; font-weight: 700; margin-bottom: 5px; }
.progress-bar { height: 8px; background: #E4ECE8; border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#176B62,#A7469B); transition: width .25s ease; }
.module-head { margin: 18px 0 8px; }
.module-title { font-size: 16px; font-weight: 800; color: #16483F; }
.module-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.question { margin-bottom: 12px; }
.question.missing { border-color: #E4A6A6; box-shadow: 0 0 0 3px rgba(214,90,90,.12); }
.question-title { font-size: 15px; font-weight: 700; color: #214B43; line-height: 1.55; margin-top: 8px; }
.miss-tag { display: none; font-size: 12px; color: #C0504D; font-weight: 700; margin-top: 4px; }
.question.missing .miss-tag { display: block; }
.option { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-top: 8px; border: 1px solid #E4ECE8; border-radius: 11px; color: #54716A; font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.option input { display: none; }
.option .radio-dot { width: 17px; height: 17px; border-radius: 50%; border: 2px solid #B9CDC7; flex: 0 0 auto; position: relative; }
.option.selected { border-color: var(--brand); background: #F0F7F4; color: #16483F; font-weight: 700; }
.option.selected .radio-dot { border-color: var(--brand); }
.option.selected .radio-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }
textarea { width: 100%; min-height: 80px; margin-top: 12px; padding: 10px 12px; border: 1px solid #E4ECE8; border-radius: 11px; font-family: inherit; font-size: 14px; color: #355B53; background: #FBFDFC; resize: vertical; }
textarea:focus { outline: 2px solid #C8DFD8; }
.divider { height: 1px; background: #EAF0ED; margin: 8px 0; }

/* 同意页 */
.consent-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #E4ECE8; border-radius: 11px; margin-top: 8px; cursor: pointer; }
.consent-item input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: 0 0 auto; }
.consent-item.checked { border-color: var(--brand); background: #F0F7F4; }

/* 优先级与计划 */
.priority { display: flex; gap: 8px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid #EEF2F0; }
.priority:last-child { border-bottom: 0; }
.priority-tag { background: #FDEDEF; color: #B44D5C; border-radius: 7px; padding: 2px 6px; font-size: 12px; font-weight: 800; }
.priority-tag.keep { background: #E6F4EA; color: #367A50; }
.plan-item { padding: 10px 0; border-bottom: 1px solid #EEF2F0; }
.plan-item:last-child { border-bottom: 0; }
.plan-date { color: var(--purple); font-size: 12px; font-weight: 700; margin-bottom: 3px; }

/* 报告模式标识 */
.mode-banner { border-radius: 11px; padding: 10px 12px; font-size: 13px; font-weight: 700; margin-top: 12px; }
.mode-banner.mine { background: #E8F4EF; color: var(--brand); border: 1px solid #C8DFD8; }
.mode-banner.sample { background: #FFF7E8; color: #8F6B1F; border: 1px solid #EDD9A8; }

.footer-note { color: #869892; font-size: 12px; text-align: center; margin: 18px 8px 0; line-height: 1.6; }
.toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); background: rgba(24,60,54,.92); color: #FFF; padding: 10px 18px; border-radius: 22px; font-size: 14px; z-index: 99; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 86%; text-align: center; }
.toast.show { opacity: 1; }
.danger-link { display: block; text-align: center; color: #B44D5C; font-size: 13px; font-weight: 700; padding: 12px 0 2px; text-decoration: none; cursor: pointer; background: none; border: 0; width: 100%; font-family: inherit; }

/* ===== 桌面端适配（≥900px）：宽屏多列排版，手机端不受影响 ===== */
@media (min-width: 900px) {
  .page { max-width: 1000px; padding-top: 36px; padding-bottom: 64px; }
  .brand-logo { width: 48px; height: 48px; }
  .brand-name { font-size: 22px; }
  .brand-sub { font-size: 13px; }
  .role-row { max-width: 420px; }
  .hero { padding: 34px 38px; border-radius: 20px; }
  .hero-title { font-size: 32px; line-height: 1.3; }
  .hero-copy { font-size: 15px; max-width: 600px; }
  .hero .primary-link, .hero .secondary-link { display: inline-block; width: auto; padding: 11px 30px; margin: 12px 12px 0 0; }
  .section { margin-top: 24px; }
  .section-title { font-size: 19px; }
  .card { padding: 18px 20px; border-radius: 15px; }
  /* 多列网格（由 app.js 在对应区块上加类） */
  .desk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .desk-grid-2 > .card { margin-bottom: 0; }
  .desk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
  .desk-grid-3 > .card, .desk-grid-3 > .section { margin-bottom: 0; margin-top: 0; }
  .desk-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .desk-cols-2 .score-row:nth-last-child(2) { border-bottom: 0; }
  /* 答题页：选项横排成组，减少长滚动 */
  .question .option { display: inline-flex; margin: 8px 8px 0 0; min-width: 150px; }
  .question .option .radio-dot { margin: 0; }
  /* 报告主按钮横排 */
  .page > .primary-link, .page > .secondary-link { display: inline-block; width: auto; padding: 11px 30px; margin: 10px 12px 0 0; }
  .page > .danger-link { display: inline-block; width: auto; padding: 12px 12px 2px; }
  .metric-grid { gap: 14px; }
  .metric { padding: 18px 10px; }
  .metric-value { font-size: 22px; }
  .footer-note { font-size: 12.5px; }
}

/* 1.1 服务、后台与阅读改进 */
[hidden] { display:none !important; }
body {font-size:16px;}
.brand-sub,.muted,.notice,.section-sub,.module-sub,.hero-copy,.mode-banner,.consent-item,.option {font-size:14px;}
.card-title,.question-title,input,select,textarea {font-size:16px;}
.metric-label,.score-meta,.footer-note {font-size:12px;}
.service-card {display:flex;flex-direction:column;gap:12px;}
.service-card .chip {align-self:flex-start;}
.service-card .primary-link,.service-card .secondary-link {margin-top:auto;}
h1,h2,h3 {font-family:inherit;}
.article-card {display:flex;flex-direction:column;gap:12px;}
.article-link {color:var(--brand);font-weight:700;margin-top:8px;}
.qr-card {max-width:240px;margin:16px auto;text-align:center;}
.qr-card img {display:block;width:180px;height:180px;object-fit:contain;margin:auto;background:white;border-radius:10px;}
.qr-card figcaption {font-size:13px;color:var(--muted);margin-top:8px;}
.form-stack {display:flex;flex-direction:column;gap:18px;}
.form-stack label {display:flex;flex-direction:column;gap:7px;font-weight:600;}
.form-stack label.consent-item {flex-direction:row;font-size:14px;font-weight:400;}
.form-grid {display:grid;grid-template-columns:1fr;gap:18px;}
input:not([type=checkbox]):not([type=radio]),select {width:100%;padding:12px;border:1px solid #C8DFD8;border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;min-height:46px;}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible {outline:3px solid #9BBEB4;outline-offset:3px;}
.form-error {color:#9e2439;white-space:pre-wrap;font-size:14px;}
.form-success {color:var(--brand);font-weight:600;}
.honey {position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.receipt {padding:16px;background:var(--bg);border-radius:12px;overflow-wrap:anywhere;}
.receipt span,.receipt strong {display:block;}
.receipt strong {margin-top:8px;font-size:15px;}
.success-mark {width:48px;height:48px;border-radius:50%;background:#E8F4EF;color:var(--brand);font-size:32px;text-align:center;}
.option {position:relative;}
.option input {display:block;position:absolute;width:1px;height:1px;opacity:0;}
.option:focus-within {outline:3px solid #9BBEB4;outline-offset:2px;}
.toolbar {display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:18px 0;}
.toolbar a,.toolbar button {width:auto;margin:0;}
.toolbar select {width:auto;max-width:100%;}
.admin-nav {display:flex;gap:8px;background:#EAF3F0;padding:5px;border-radius:12px;margin:18px 0;}
.admin-nav a {flex:1;text-align:center;padding:10px;text-decoration:none;color:var(--brand);border-radius:8px;}
.admin-nav a.active {background:white;font-weight:700;}
.admin-page {max-width:1120px;}
.admin-login {max-width:460px;margin:36px auto;}
.booking-card {display:flex;flex-direction:column;gap:12px;}
.booking-data {display:grid;grid-template-columns:1fr;gap:8px;}
.booking-data dt {font-size:13px;color:var(--muted);}
.booking-data dd {margin:0;overflow-wrap:anywhere;white-space:pre-wrap;}
.booking-card textarea {margin-top:0;}
.booking-actions {display:flex;gap:10px;flex-wrap:wrap;}
.booking-actions button {width:auto;margin:0;}
.settings-section {margin:24px 0;}
.settings-section h2 {margin-bottom:12px;}
.article-edit {padding:16px;background:#F6F8F5;border:1px solid var(--line);border-radius:12px;margin:12px 0;}
.article-edit .danger-link {width:auto;}
.page {overflow-wrap:break-word;}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr}.booking-data{grid-template-columns:1fr 1fr}.booking-data .wide{grid-column:1/-1}}
@media print {
 @page {size:A4;margin:15mm;}
 body {background:#fff;font-size:11pt;color:#111;}
 .page {max-width:none;margin:0;padding:0;}
 .role-row,.no-print,.primary-link,.secondary-link,.danger-link,.text-link,.toast,.footer-note,.progress-wrap {display:none !important;}
 .card,.notice,.score-row,.flow,.mode-banner {break-inside:avoid;box-shadow:none;}
 .section {break-inside:auto;}
 .section-title {break-after:avoid;}
 .desk-grid-2,.desk-cols-2 {display:block;}
 .hero-title {font-size:22pt;}
 .bar,.bar-fill {print-color-adjust:exact;-webkit-print-color-adjust:exact;}
}
.qr-preview {width:160px;height:160px;object-fit:contain;background:white;border:1px solid var(--line);border-radius:8px;margin-top:12px;}

/* v1.2 项目、权限与正式汇总，延续现有心晴配色。 */
.admin-nav{flex-wrap:wrap;}
.admin-nav a{flex:1 1 130px;min-height:44px;font-size:14px;}
.project-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0;}
.project-metrics strong,.project-metrics span{display:block;}
.project-metrics strong{font-size:30px;color:var(--brand);}
.project-metrics span{font-size:14px;margin-top:6px;}
.org-score{margin:20px 0;}
.org-track{height:10px;background:#e8f1ee;border-radius:8px;margin-top:9px;overflow:hidden;}
.org-track div{height:100%;background:#147c71;border-radius:8px;print-color-adjust:exact;}
.organization-report p,.manager-form p{line-height:1.8;}
.preserve-lines{white-space:pre-wrap;}
fieldset{border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0;}
legend,summary{font-weight:700;font-size:16px;}
summary{cursor:pointer;min-height:44px;}
.ticket-output textarea{min-height:150px;font-family:monospace;}
.organization-report h3{margin-top:20px;}
@media(max-width:650px){.project-metrics{grid-template-columns:1fr;}.admin-nav a{flex-basis:40%;}.manager-form .consent-item{align-items:flex-start;}.booking-actions a{max-width:100%;}}
@media print{.admin-nav,.toolbar,details,.manager-form{display:none!important;}.org-track{print-color-adjust:exact;}.organization-report .project-metrics{grid-template-columns:repeat(3,1fr);}}