/* ============================================================
   SCICOS 高保真 · 商务设计系统（hifi）
   简约 / 专业 / 商务蓝 · 中文系统黑体
   仅用于高保真界面（class 前缀 hf-）
   ============================================================ */
:root {
  --hf-font: "PingFang SC", "Microsoft YaHei", "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;

  --hf-bg: #f4f6f9;
  --hf-surface: #ffffff;
  --hf-surface-2: #fafbfc;
  --hf-ink: #1a2433;
  --hf-ink-2: #4a5868;
  --hf-ink-3: #8593a3;
  --hf-line: #e6eaf0;
  --hf-line-2: #eef1f5;

  --hf-primary: #1456c4;
  --hf-primary-d: #0f47a3;
  --hf-primary-wash: #eaf1fc;
  --hf-primary-ring: rgba(20,86,196,.18);

  --hf-ok: #1f8a5b;
  --hf-warn: #c47e16;
  --hf-danger: #c0392b;

  --hf-r: 10px;
  --hf-r-sm: 7px;
  --hf-shadow: 0 1px 3px rgba(20,33,51,.06), 0 1px 2px rgba(20,33,51,.04);
  --hf-shadow-lg: 0 8px 28px rgba(20,33,51,.10), 0 2px 8px rgba(20,33,51,.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.hf {
  background: var(--hf-bg);
  color: var(--hf-ink);
  font-family: var(--hf-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hf ::selection { background: var(--hf-primary-wash); }

/* ---------- 顶栏 ---------- */
.hf-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 28px;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--hf-line);
}
.hf-logo { display: flex; align-items: center; gap: 11px; }
.hf-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--hf-primary), #2f74e6);
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px var(--hf-primary-ring);
}
.hf-logo .nm { font-size: 17px; font-weight: 650; }
.hf-logo .nm small { display:block; font-size:12px; font-weight:400; color: var(--hf-ink-3); margin-top:1px; letter-spacing:.3px; }
.hf-topbar .right { margin-left: auto; color: var(--hf-ink-3); font-size: 13px; }

/* ---------- 容器 ---------- */
.hf-page { min-height: 100vh; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.hf-shell { max-width: 880px; margin: 0 auto; padding: 32px 24px 0; }
.hf-hero { margin-bottom: 24px; }
.hf-hero h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; letter-spacing: .5px; }
.hf-hero p { margin: 0; color: var(--hf-ink-2); font-size: 15px; }

/* ---------- 卡片 ---------- */
.hf-card {
  background: var(--hf-surface); border: 1px solid var(--hf-line);
  border-radius: 14px; box-shadow: var(--hf-shadow);
}
.hf-card-pad { padding: 26px 28px; }

/* ---------- 表单 ---------- */
.hf-section { margin-bottom: 8px; }
.hf-section + .hf-section { margin-top: 26px; }
.hf-section-hd {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 650; color: var(--hf-primary);
  letter-spacing: .6px; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--hf-line-2);
}
.hf-section-hd .bar { width: 3px; height: 13px; border-radius: 2px; background: var(--hf-primary); }

.hf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.hf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hf-field.full { grid-column: 1 / -1; }
.hf-field label { font-size: 13px; color: var(--hf-ink-2); font-weight: 550; }
.hf-field label .req { color: var(--hf-danger); margin-left: 3px; }
.hf-field .hf-input,
.hf-field input, .hf-field select, .hf-field textarea {
  font-family: var(--hf-font); font-size: 15px; color: var(--hf-ink);
  background: var(--hf-surface); border: 1px solid var(--hf-line);
  border-radius: var(--hf-r); padding: 11px 13px; width: 100%;
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.hf-field input::placeholder, .hf-field textarea::placeholder { color: var(--hf-ink-3); }
.hf-field input:focus, .hf-field select:focus, .hf-field textarea:focus {
  border-color: var(--hf-primary); box-shadow: 0 0 0 3px var(--hf-primary-ring);
}
.hf-field textarea { min-height: 84px; resize: vertical; }
.hf-field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%238593a3' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; }

/* ---------- 按钮 ---------- */
.hf-btn {
  font-family: var(--hf-font); font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--hf-line); background: var(--hf-surface); color: var(--hf-ink);
  border-radius: var(--hf-r); padding: 11px 20px;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.hf-btn:hover { border-color: #cfd7e2; background: var(--hf-surface-2); }
.hf-btn:active { transform: translateY(1px); }
.hf-btn.primary {
  background: var(--hf-primary); border-color: var(--hf-primary); color: #fff;
  box-shadow: 0 2px 8px var(--hf-primary-ring);
}
.hf-btn.primary:hover { background: var(--hf-primary-d); border-color: var(--hf-primary-d); }
.hf-btn.lg { padding: 13px 26px; font-size: 16px; }
.hf-btn.block { width: 100%; }
.hf-btn.ghost { border-color: transparent; background: transparent; color: var(--hf-ink-2); }
.hf-btn.ghost:hover { background: var(--hf-line-2); }

.hf-form-foot { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hf-line-2); }
.hf-form-foot .hint { color: var(--hf-ink-3); font-size: 13px; flex: 1; }
body.hf.hf-modal-open { overflow: hidden; }

/* ---------- 提交成功 ---------- */
.hf-success { max-width: 560px; margin: 7vh auto 0; padding: 0 24px; text-align: center; }
.hf-success .ring {
  width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 22px;
  background: var(--hf-primary-wash); color: var(--hf-primary);
  display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.hf-success h2 { font-size: 25px; margin: 0 0 8px; font-weight: 700; }
.hf-success .lead { color: var(--hf-ink-2); font-size: 15px; margin: 0 0 22px; }
.hf-no {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--hf-primary);
  background: var(--hf-primary-wash); border: 1px solid #d4e2f8;
  border-radius: 12px; padding: 12px 24px;
}
.hf-statusline { color: var(--hf-ink-2); font-size: 14px; margin-bottom: 24px; }
.hf-statusline .pill { display:inline-block; background: var(--hf-warn); color:#fff; border-radius: 20px; padding: 2px 11px; font-size: 13px; font-weight:600; margin: 0 2px; }
.hf-recap {
  text-align: left; background: var(--hf-surface); border: 1px solid var(--hf-line);
  border-radius: 14px; box-shadow: var(--hf-shadow); padding: 8px 22px; margin-bottom: 26px;
}
.hf-recap .row { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hf-line-2); font-size: 14px; }
.hf-recap .row:last-child { border-bottom: none; }
.hf-recap .row .k { color: var(--hf-ink-3); width: 92px; flex: none; }
.hf-recap .row .v { color: var(--hf-ink); }
.hf-success .acts { display: flex; gap: 12px; justify-content: center; }

@media (max-width: 680px) {
  .hf-topbar { padding: 0 16px; }
  .hf-shell { padding: 22px 14px 0; }
  .hf-card-pad { padding: 20px 16px; }
  .hf-grid { grid-template-columns: 1fr; gap: 16px; }
  .hf-hero h1 { font-size: 22px; }
  .hf-topbar { min-height: 58px; }
  .hf-logo { gap: 10px; }
  .hf-logo .nm { font-size: 15px; }
  .hf-logo .nm small { font-size: 11px; }
  .hf-topbar .right { display: none; }
  .hf-field label { line-height: 1.45; }
  .hf-peek { display: inline-block; margin-left: 0; margin-top: 6px; }
  .hf-form-foot {
    position: sticky;
    bottom: 0;
    z-index: 6;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 26px -16px -20px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--hf-line);
  }
  .hf-form-foot .hint { font-size: 12px; }
  .hf-form-foot .hf-btn { width: 100%; }
  .hf-submit-main { min-height: 48px; }
  .hf-success { margin-top: 24px; padding: 0 14px; }
  .hf-recap { padding: 8px 16px; }
  .hf-recap .row { flex-direction: column; gap: 4px; }
  .hf-recap .row .k { width: auto; }
  .hf-success .acts { flex-direction: column; }
  .hf-success .acts .hf-btn { width: 100%; }
  .hf-modal-scrim { padding: 0; align-items: flex-end; }
  .hf-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 18px 18px 0 0;
  }
  .hf-modal-hd,
  .hf-modal-body,
  .hf-modal-ft { padding-left: 16px; padding-right: 16px; }
  .hf-welcome-stage,
  .hf-welcome-stage .hf-welcome-img { max-height: 32vh; }
  .hf-mode-row { flex-direction: column; }
  .hf-mode { width: 100%; }
  .hf-modal-ft { flex-wrap: wrap; gap: 10px; }
  .hf-modal-ft .note { flex: 1 0 100%; }
  .hf-modal-ft .hf-btn { flex: 1; min-width: 0; }
  .hf-quick { gap: 6px; }
  .hf-quick-chip { width: 100%; text-align: left; border-radius: 12px; padding: 10px 12px; }
  .hf-field input,
  .hf-field select,
  .hf-field textarea { font-size: 16px; }
}

@media (max-width: 420px) {
  .hf-shell { padding: 18px 10px 0; }
  .hf-card-pad { padding: 18px 12px; }
  .hf-hero h1 { font-size: 20px; }
  .hf-hero p { font-size: 14px; }
  .hf-mark { width: 32px; height: 32px; font-size: 12px; }
  .hf-field label { font-size: 12px; }
  .hf-field input,
  .hf-field select,
  .hf-field textarea { padding: 10px 12px; }
  .hf-btn.lg { padding: 12px 18px; font-size: 15px; }
  .hf-form-foot {
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -18px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .hf-modal-hd { font-size: 15px; }
  .hf-welcome-overlay { padding: 8% 8%; gap: 10px; }
  .hf-welcome-overlay .wm-play { width: 52px; height: 52px; font-size: 22px; }
  .hf-welcome-overlay .wm-welcome { line-height: 1.3; }
}

/* ---------- 内联校验提示（替代原生 alert） ---------- */
.hf-alert {
  display: flex; align-items: center; gap: 10px;
  background: #fdecea; border: 1px solid #f5c6c0; color: #a5342a;
  border-radius: var(--hf-r); padding: 12px 15px; font-size: 14px;
  margin-bottom: 20px;
}
.hf-alert .ic { width: 18px; height: 18px; border-radius: 50%; background: var(--hf-danger); color:#fff; font-size: 12px; display:flex; align-items:center; justify-content:center; flex:none; }
.hf-field.err input, .hf-field.err select, .hf-field.err textarea { border-color: var(--hf-danger); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }

/* ---------- 欢迎屏内容：可点提示 + 示意图弹窗 ---------- */
.hf-peek { color: var(--hf-primary); font-size: 12px; font-weight: 500; margin-left: 8px; cursor: pointer; }
.hf-peek:hover { text-decoration: underline; }
.hf-modal-scrim {
  position: fixed; inset: 0; background: rgba(20,33,51,.46);
  z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: hf-fade .15s ease;
}
@keyframes hf-fade { from { opacity: 0; } to { opacity: 1; } }
.hf-modal {
  width: 720px; max-width: 94vw; max-height: 92vh; overflow-y: auto; background: var(--hf-surface);
  border-radius: 16px; box-shadow: var(--hf-shadow-lg); overflow-x: hidden;
  display: flex; flex-direction: column;
}
.hf-modal-hd { position: sticky; top: 0; background: var(--hf-surface); z-index: 2; }
.hf-modal-hd { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--hf-line); font-size: 16px; font-weight: 650; }
.hf-modal-hd .hf-modal-x { margin-left: auto; border: none; background: var(--hf-line-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--hf-ink-2); }
.hf-modal-hd .hf-modal-x:hover { background: #e2e7ee; }
.hf-modal-body { padding: 18px 20px; background: var(--hf-surface-2); }
.hf-welcome-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--hf-line); background: var(--hf-line-2); }
.hf-modal-ft { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--hf-line); position: sticky; bottom: 0; background: var(--hf-surface); z-index: 2; }
.hf-modal-ft .note { color: var(--hf-ink-3); font-size: 13px; flex: 1; }

/* 欢迎屏舞台：背景图 + 文字叠层 */
.hf-welcome-stage { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--hf-line); max-height: 46vh; background: #000; }
.hf-welcome-stage .hf-welcome-img { border: none; border-radius: 0; max-height: 46vh; }
.hf-welcome-stage .hf-welcome-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: none; background: #000;
}
.hf-welcome-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 6% 10%; text-align: center; pointer-events: none; }
.hf-welcome-overlay .wm-welcome { color: #fff; font-size: clamp(18px, 3.4vw, 34px); font-weight: 700; line-height: 1.35; letter-spacing: .5px; text-shadow: 0 2px 12px rgba(0,0,0,.4); text-wrap: balance; }
.hf-welcome-overlay .wm-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--hf-primary); display: flex; align-items: center; justify-content: center; font-size: 26px; padding-left: 5px; }
.hf-welcome-overlay .wm-deftxt { color: rgba(255,255,255,.92); font-size: clamp(15px, 2.2vw, 22px); font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.4); }

/* 模式切换 */
.hf-mode-row { display: flex; gap: 10px; margin-top: 16px; }
.hf-mode { flex: 1; font-family: var(--hf-font); font-size: 14px; font-weight: 600; cursor: pointer; padding: 11px 14px; border-radius: var(--hf-r); border: 1px solid var(--hf-line); background: var(--hf-surface); color: var(--hf-ink-2); transition: all .15s; }
.hf-mode:hover { border-color: #cfd7e2; }
.hf-mode.on { border-color: var(--hf-primary); background: var(--hf-primary-wash); color: var(--hf-primary); box-shadow: 0 0 0 3px var(--hf-primary-ring); }

.hf-cnt { color: var(--hf-ink-3); font-size: 12px; font-weight: 400; }
.hf-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hf-quick-chip { font-family: var(--hf-font); font-size: 13px; cursor: pointer; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--hf-line); background: var(--hf-surface); color: var(--hf-ink-2); }
.hf-quick-chip:hover { border-color: var(--hf-primary); color: var(--hf-primary); background: var(--hf-primary-wash); }