/* 信息采集网站（学生用）。观感照外包版（2026-11-04 用户定）：毕业照登录页、白顶栏、蓝侧边栏、灰底白面板、卡片首页。
   学生主要用电脑填；窄屏（手机）没有侧边栏，格子一栏。
   员工页也引这个文件画表单，所以整页的样式都挂在 .cf-body 下面，别写裸的 body。 */
:root {
  --cf-bg: #F5F7FB; --cf-panel: #fff; --cf-main: #4D8FBA; --cf-primary: #3A7AA5; --cf-primary-dark: #2C6288; --cf-soft: #EAF2F8;
  --cf-border: #DCDFE6; --cf-line: #EBEEF5; --cf-text: #292929; --cf-muted: #6B7280; --cf-danger: #C0392B; --cf-danger-soft: #FDECEA;
  --cf-ok: #2E7D4F; --cf-ok-soft: #E7F4EC; --cf-warn: #8A5D08; --cf-warn-soft: #FBF0DD;
}
.cf-field *, .cf-item * { box-sizing: border-box; }
.cf-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cf-grow { flex: 1; min-width: 0; }
.cf-load { color: var(--cf-muted); text-align: center; padding: 48px 0; }

/* 整页 */
.cf-body { display: flex; flex-direction: column; min-height: 100vh; }
.cf-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 16px; background: #fff; box-shadow: 0 1px 4px rgba(32, 57, 88, .08); }
.cf-brand b { display: block; font-size: 16px; line-height: 1.2; color: var(--cf-primary); }
.cf-brand small { display: block; font-size: 12px; line-height: 1.3; color: var(--cf-muted); }
#c-slot { flex: 0 1 auto; min-width: 0; overflow: hidden; }
#c-slot .cf-save { display: block; overflow: hidden; text-overflow: ellipsis; }
.cf-brand { flex: none; white-space: nowrap; }
.cf-wrap { overflow-wrap: anywhere; }
.cf-who { flex: none; display: flex; align-items: center; gap: 14px; font-size: 13.5px; white-space: nowrap; }
.cf-who b { font-weight: 600; }
.cf-shell { flex: 1; display: flex; min-height: 0; }
.cf-side { display: none; }
.cf-wrap { flex: 1; min-width: 0; padding: 16px 16px 40px; }
.cf-foot { padding: 18px 16px; background: var(--cf-main); color: #fff; font-size: 13px; text-align: center; }
.cf-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.3; }
.cf-crumb { display: none; }
.cf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.cf-card { background: var(--cf-panel); border-radius: 14px; padding: 20px 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(32, 57, 88, .05); }
.cf-h1 { margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--cf-primary); }
.cf-sub { color: var(--cf-muted); font-size: 13.5px; margin: 4px 0 0; }
.cf-card > .cf-sub:last-of-type { margin-bottom: 18px; }
.cf-card > .cf-h1:has(+ .cf-intro), .cf-card > .cf-h1:has(+ div) { margin-bottom: 18px; }
.cf-link { background: none; border: none; color: var(--cf-primary); padding: 4px 0; cursor: pointer; font-size: 14px; }
.cf-link:hover { color: var(--cf-primary-dark); }
.cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 1px solid var(--cf-primary); background: var(--cf-primary); color: #fff; border-radius: 4px; padding: 8px 20px; cursor: pointer; font-size: 14px; }
.cf-btn:hover { background: var(--cf-primary-dark); border-color: var(--cf-primary-dark); }
.cf-btn:disabled { opacity: .55; cursor: default; }
.cf-btn.ghost { background: #fff; color: var(--cf-text); border-color: var(--cf-border); }
.cf-btn.ghost:hover { color: var(--cf-primary); border-color: var(--cf-main); background: #fff; }
.cf-btn.sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.cf-btn.block { width: 100%; }
.cf-btn.cf-add { min-height: 46px; border-style: dashed; color: var(--cf-primary); border-color: #B9D0E2; }
.cf-msg { border-radius: 4px; padding: 9px 12px; font-size: 14px; margin-bottom: 12px; white-space: pre-wrap; }
.cf-msg.bad { background: var(--cf-danger-soft); color: var(--cf-danger); }
.cf-msg.good { background: var(--cf-ok-soft); color: var(--cf-ok); }
.cf-msg.warn { background: var(--cf-warn-soft); color: var(--cf-warn); }

/* 登录 */
.cf-body.view-login { background: #73A4D2 url(login.jpg) center / cover no-repeat fixed; }
.cf-body.view-login::before { content: ""; position: fixed; inset: 0; background: rgba(255, 255, 255, .24); pointer-events: none; }
.view-login .cf-head { position: relative; background: none; box-shadow: none; }
.view-login .cf-brand b, .view-login .cf-brand small { color: #fff; text-shadow: 0 1px 3px rgba(32, 57, 88, .4); }
.view-login .cf-shell { position: relative; }
.view-login .cf-wrap { display: flex; align-items: center; justify-content: center; padding: 16px 16px 40px; }
.view-login #app { width: 100%; }
.view-login .cf-foot { position: relative; }
.cf-login { width: 100%; max-width: 480px; margin: 0 auto; padding: 36px 24px 32px; border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(32, 57, 88, .13); }
.cf-login h1 { margin: 0; font-size: 23px; font-weight: 700; text-align: center; }
.cf-login .cf-sub { margin: 8px 0 24px; text-align: center; }
.cf-lin { position: relative; margin-bottom: 18px; }
.cf-lin .cf-ico { position: absolute; left: 14px; top: 15px; width: 19px; height: 19px; color: #A3ACB8; }
.cf-lin .cf-in { height: 49px; padding-left: 44px; border-color: #C2C9D5; border-radius: 5px; font-size: 15px; }
.cf-lin.pw .cf-in { padding-right: 56px; }
.cf-eye { position: absolute; right: 8px; top: 10px; height: 29px; padding: 0 8px; border: none; background: none; color: var(--cf-primary); cursor: pointer; font-size: 13px; }
.cf-login .cf-btn { height: 46px; margin-top: 12px; border: none; border-radius: 24px; background: var(--cf-main); font-size: 16px; }
.cf-login .cf-btn:hover { background: #4082AD; }
.cf-tip { margin: 16px 0 0; color: var(--cf-muted); font-size: 12.5px; text-align: center; }

/* 首页 */
.cf-progress { display: flex; align-items: center; gap: 14px; margin: 10px 0 18px; }
.cf-total { white-space: nowrap; color: var(--cf-muted); font-size: 14px; }
.cf-total b { font-size: 16px; color: var(--cf-primary); }
.cf-track { height: 6px; border-radius: 3px; background: #E3E8EF; overflow: hidden; }
.cf-track i { display: block; height: 100%; background: var(--cf-main); border-radius: 3px; transition: width .2s; }
.cf-progress .cf-track { flex: 1; max-width: 300px; }
.cf-tasks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cf-task { position: relative; display: block; width: 100%; min-height: 146px; padding: 24px 26px 46px; border: none; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 1px 3px rgba(32, 57, 88, .05); transition: box-shadow .15s, transform .15s; }
.cf-task:hover { box-shadow: 0 6px 18px rgba(32, 57, 88, .11); transform: translateY(-1px); }
.cf-task .n { display: block; margin-bottom: 10px; padding-right: 76px; font-size: 19px; color: var(--cf-primary); }
.cf-task .d { display: block; font-size: 13.5px; line-height: 1.6; color: var(--cf-muted); }
.cf-task .a { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; min-width: 76px; padding: 0 12px; border-radius: 0 14px 0 14px; background: var(--cf-main); box-shadow: -2px 3px 0 #DBE6F3; color: #fff; font-size: 13px; }
.cf-task .a .cf-ico { width: 14px; height: 14px; }
.cf-task > .cf-pill { position: absolute; left: 26px; bottom: 15px; }
.cf-home-h { margin: 28px 0 12px; font-size: 16px; color: var(--cf-primary); }
.cf-gcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cf-gcard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: none; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 1px 3px rgba(32, 57, 88, .05); }
.cf-gcard:hover { box-shadow: 0 4px 12px rgba(32, 57, 88, .1); }
.cf-gcard .cf-ico { flex: none; width: 24px; height: 24px; color: var(--cf-main); }
.cf-gcard b { display: block; font-size: 15px; color: var(--cf-primary); }
.cf-gcard small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--cf-muted); }

/* 申请指南的文章 */
.cg { max-width: 820px; padding: 22px 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(32, 57, 88, .05); font-size: 15px; line-height: 1.8; }
.cg h1 { margin: 0 0 4px; font-size: 22px; line-height: 1.4; color: var(--cf-primary); }
.cg-desc { margin: 0 0 14px; color: var(--cf-muted); font-size: 14px; }
.cg-toc { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: 8px; background: var(--cf-bg); }
.cg-toc button { padding: 2px 0; border: none; background: none; color: var(--cf-primary); font-size: 13.5px; cursor: pointer; }
.cg h2 { margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--cf-line); font-size: 18px; line-height: 1.5; color: var(--cf-primary-dark); }
.cg h3 { margin: 22px 0 6px; font-size: 15.5px; line-height: 1.5; color: var(--cf-primary); }
.cg p { margin: 8px 0; }
.cg ul, .cg ol { margin: 8px 0; padding-left: 22px; }
.cg li { margin: 3px 0; }
.cg-en { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--cf-main); background: var(--cf-bg); font-size: 14.5px; line-height: 1.7; }
.cg-tip { margin: 8px 0; color: var(--cf-primary-dark); font-weight: 600; }
.cg-bad { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--cf-danger); background: var(--cf-danger-soft); color: var(--cf-danger); font-size: 14.5px; }
.cg-bad::before { content: "别这样说：\A"; white-space: pre; font-weight: 700; }
.cg figure { margin: 12px 0; }
.cg figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--cf-line); border-radius: 4px; }
.cg figcaption { margin-top: 4px; color: var(--cf-muted); font-size: 12.5px; }
.cg-ph { display: flex; align-items: center; justify-content: center; min-height: 160px; border: 1px dashed var(--cf-border); border-radius: 4px; color: var(--cf-muted); font-size: 13px; }
.cg-wrap { margin: 12px 0; overflow-x: auto; }
.cg table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13.5px; line-height: 1.6; }
.cg th { padding: 8px 10px; background: var(--cf-main); color: #fff; text-align: left; font-weight: 600; }
.cg td { padding: 8px 10px; border-bottom: 1px solid var(--cf-line); vertical-align: top; }
.cg td:first-child { white-space: nowrap; font-weight: 600; color: var(--cf-primary); }
.cg td ul { margin: 0; padding-left: 16px; }
.cg-pages { margin: 14px 0; }
.cg-pages > button { min-height: 40px; padding: 0 16px; border: 1px solid var(--cf-main); border-radius: 4px; background: #fff; color: var(--cf-primary); cursor: pointer; }
.cg-pages > div { margin-top: 10px; }
.cg-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.cg-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 8px 14px; border: 1px solid var(--cf-line); border-radius: 8px; color: var(--cf-primary); text-decoration: none; font-size: 14.5px; }
.cg-links a:hover { border-color: var(--cf-main); background: var(--cf-soft); }
.cg-links a span { flex: none; color: var(--cf-muted); font-size: 12.5px; }
.cg-links li small { display: block; margin-top: 2px; padding-left: 14px; color: var(--cf-warn); font-size: 12.5px; }

.cf-pill { font-size: 12px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--cf-soft); color: var(--cf-primary-dark); }
.cf-pill.todo { background: #EEF1F5; color: var(--cf-muted); }
.cf-pill.submitted, .cf-pill.confirmed { background: var(--cf-ok-soft); color: var(--cf-ok); }
.cf-pill.returned { background: var(--cf-danger-soft); color: var(--cf-danger); }
.cf-pill.changed { background: var(--cf-warn-soft); color: var(--cf-warn); }

/* 步骤条：手机上横着滑，电脑上是一条带圆点的线 */
.cf-save { font-size: 12.5px; color: var(--cf-muted); white-space: nowrap; }
.cf-save.off { color: var(--cf-warn); }
.cf-save.err { color: var(--cf-danger); }
.cf-steps { position: relative; display: flex; gap: 6px; margin-bottom: 14px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cf-steps::-webkit-scrollbar { display: none; }
.cf-step { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border: 1px solid var(--cf-border); border-radius: 999px; background: #fff; color: var(--cf-muted); font-size: 13px; cursor: pointer; }
.cf-step .k { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #EEF1F5; font-size: 12px; font-style: normal; }
.cf-step .k.cf-ok { background: var(--cf-soft); color: var(--cf-primary); font-weight: 700; }
.cf-step.on { border-color: var(--cf-main); background: var(--cf-main); color: #fff; }
.cf-step.on .k { background: #fff; color: var(--cf-primary); }
.cf-step.bad { border-color: var(--cf-danger); color: var(--cf-danger); }

/* 格子 */
.cf-field { margin-bottom: 20px; }
.cf-lrow { display: flex; align-items: baseline; gap: 12px; min-height: 22px; margin-bottom: 6px; }
.cf-lrow > label, .cf-field > label, .cf-lab { display: block; flex: 1; min-width: 0; font-size: 14px; color: var(--cf-text); }
.cf-field > label { margin-bottom: 6px; }
.cf-lab { margin-bottom: 8px; font-weight: 600; }
.cf-req { margin-right: 3px; color: #F56C6C; }
.cf-hint { margin-top: 5px; font-size: 12.5px; color: var(--cf-muted); }
.cf-ex { margin-top: 4px; font-size: 12.5px; color: var(--cf-muted); }
.cf-ex span { display: block; }
.cf-ex .x { color: var(--cf-danger); }
.cf-ex .o { color: var(--cf-ok); }
.cf-in { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--cf-border); border-radius: 4px; background: #fff; font-size: 16px; outline: none; transition: border-color .15s; }
.cf-in::placeholder { color: #AEB5C0; }
.cf-in:hover { border-color: #C0C6CF; }
.cf-in:focus { border-color: var(--cf-main); }
textarea.cf-in { display: block; height: auto; min-height: 96px; padding: 9px 12px; line-height: 1.65; resize: vertical; }
select.cf-in { display: block; -webkit-appearance: none; appearance: none; padding-right: 30px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23A3ACB8' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 11px center / 12px; }
.cf-count { margin-top: 3px; font-size: 12px; color: var(--cf-muted); text-align: right; }
.cf-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; background: var(--cf-soft); color: var(--cf-primary-dark); font-size: 11.5px; line-height: 18px; vertical-align: 1px; }
.cf-tag.chg { background: var(--cf-warn-soft); color: var(--cf-warn); }
.cf-note { margin-bottom: 6px; padding: 6px 10px; border-radius: 4px; background: var(--cf-danger-soft); color: var(--cf-danger); font-size: 13.5px; }
.cf-note button { padding: 0 0 0 6px; border: none; background: none; color: var(--cf-danger); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.cf-err { margin-top: 4px; font-size: 13px; color: var(--cf-danger); }
.cf-err.warn { color: var(--cf-warn); }
.cf-field.has-err .cf-in { border-color: var(--cf-danger); }

/* 一格里的小表格 */
.cf-rows-r { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.cf-rows-r.c3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; }
.cf-rows-r.c3.head { display: none; }
.cf-rows-r.c3 > :first-child { grid-column: 1 / -1; }
.cf-rows-r.head { margin-bottom: 4px; font-size: 12.5px; color: var(--cf-muted); }
.cf-rows-x { width: 28px; height: 28px; border: none; border-radius: 50%; background: none; color: var(--cf-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.cf-rows-x:hover { background: var(--cf-danger-soft); color: var(--cf-danger); }
.cf-rows-add { font-size: 13.5px; }

/* 单选、多选：点开是小圆点和小方框 */
.cf-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; min-height: 40px; }
.cf-pills button { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: none; background: none; color: var(--cf-text); font-size: 14px; text-align: left; cursor: pointer; }
.cf-pills button::before { content: ""; flex: none; box-sizing: border-box; width: 15px; height: 15px; border: 1px solid #C0C6CF; border-radius: 50%; background: #fff; }
.cf-pills button:hover::before { border-color: var(--cf-main); }
.cf-pills button.on { color: var(--cf-primary); }
.cf-pills button.on::before { border: 5px solid var(--cf-main); }
.cf-pills.multi button::before { border-radius: 3px; }
.cf-pills.multi button.on::before { border: none; background: var(--cf-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* 日期框 */
.cf-date { position: relative; }
.cf-date .cf-in { padding-right: 38px; }
.cf-date-btn { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; padding: 0; border: none; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3ACB8' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6h16v14H4zM4 10.5h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cf-cal { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 282px; max-width: calc(100vw - 48px); padding: 12px; border: 1px solid var(--cf-line); border-radius: 6px; background: #fff; box-shadow: 0 6px 20px rgba(32, 57, 88, .16); }
.cf-cal.up { top: auto; bottom: calc(100% + 6px); }
.cf-cal-h { display: flex; gap: 8px; margin-bottom: 10px; }
.cf-cal-h select { flex: 1; height: 32px; padding: 0 6px; border: 1px solid var(--cf-border); border-radius: 4px; background: #fff; font-size: 14px; }
.cf-cal-m { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cf-cal-d { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cf-cal-d span { color: var(--cf-muted); font-size: 12px; line-height: 26px; text-align: center; }
.cf-cal-m button, .cf-cal-d button { height: 32px; padding: 0; border: none; border-radius: 4px; background: none; color: var(--cf-text); font-size: 13px; cursor: pointer; }
.cf-cal-m button:hover, .cf-cal-d button:hover { background: var(--cf-soft); }
.cf-cal-m button.on, .cf-cal-d button.on { background: var(--cf-main); color: #fff; }

.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chips:not(:empty) { margin-bottom: 8px; }
.cf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; background: var(--cf-soft); color: var(--cf-primary-dark); font-size: 14px; }
.cf-chip button { padding: 0 2px; border: none; background: none; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.cf-row { display: flex; align-items: center; gap: 8px; }
.cf-row .cf-in, .cf-row .cf-date { flex: 1; min-width: 0; }
.cf-row .cf-btn.sm { min-height: 40px; flex: none; }
.cf-opts { max-height: 240px; margin-top: 6px; overflow: auto; border: 1px solid var(--cf-border); border-radius: 4px; background: #fff; }
.cf-opts button { display: block; width: 100%; padding: 8px 11px; border: none; border-top: 1px solid var(--cf-line); background: none; font-size: 14px; text-align: left; cursor: pointer; }
.cf-opts button:first-child { border-top: none; }
.cf-opts button:hover { background: var(--cf-soft); }
.cf-opts small { margin-left: 6px; color: var(--cf-muted); }

/* 可以加多条的 */
.cf-item { margin-bottom: 14px; border: 1px solid var(--cf-line); border-radius: 8px; background: #fff; }
.cf-item-h { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 8px; background: #F8FAFC; font-weight: 600; cursor: pointer; }
.cf-item-h .cf-grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-fold { font-size: 12.5px; font-weight: 400; color: var(--cf-primary); }
.cf-item-b { padding: 18px 16px 2px; border-top: 1px solid var(--cf-line); }
.cf-grp { margin: 4px 0 14px; padding-top: 14px; border-top: 1px solid var(--cf-line); font-size: 14.5px; font-weight: 700; color: var(--cf-primary); }
.cf-item-b > .cf-grp:first-child { padding-top: 0; border-top: none; }

/* 文件 */
.cf-file { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 10px; border: 1px solid var(--cf-line); border-radius: 4px; background: #fff; font-size: 13.5px; }
.cf-file .cf-grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-file small { color: var(--cf-muted); white-space: nowrap; }
.cf-file button { padding: 2px 4px; border: none; background: none; color: var(--cf-primary); font-size: 13px; white-space: nowrap; cursor: pointer; }
.cf-file.up { display: block; }
.cf-file.bad { border-color: var(--cf-danger); background: var(--cf-danger-soft); color: var(--cf-danger); }
.cf-file .cf-track { margin-top: 5px; height: 4px; }
.cf-filebtns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-filebtns input { display: none; }
.cf-dropzone { padding: 10px 12px; border: 1px dashed #CBD3DD; border-radius: 6px; background: #FBFCFE; }
.cf-dropzone.over { border-color: var(--cf-main); background: var(--cf-soft); }
.cf-drop-tip { font-size: 12.5px; color: var(--cf-muted); }

.cf-star { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px dashed var(--cf-border); border-radius: 4px; background: #fff; text-align: left; cursor: pointer; }
.cf-star.on { border-style: solid; border-color: var(--cf-main); background: var(--cf-soft); color: var(--cf-primary-dark); }
.cf-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.cf-agree input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cf-main); }
.cf-info { min-height: 40px; padding: 9px 12px; border-radius: 4px; background: #F5F7FA; font-size: 14px; }
/* 保存、下一步一直看得到：长表不用滚到底 */
html:has(.cf-nav) { scroll-padding-bottom: 72px; }
.cf-nav { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; margin: 4px -4px 0; padding: 10px 4px; background: var(--cf-bg); }
.cf-nav .cf-btn { flex: 1; }
.cf-issue { display: block; width: 100%; padding: 10px 2px; border: none; border-top: 1px solid var(--cf-line); background: none; font-size: 14px; text-align: left; cursor: pointer; }
.cf-issue:first-of-type { border-top: none; }
.cf-issue b { font-weight: 600; }
.cf-issue span { margin-left: 6px; color: var(--cf-danger); }
.cf-issue.warn span { color: var(--cf-warn); }
.cf-toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; max-width: 88%; padding: 9px 14px; border-radius: 6px; background: var(--cf-primary-dark); color: #fff; font-size: 14px; transform: translateX(-50%); }
.cf-pop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(18, 48, 73, .45); }
.cf-pop > div { width: 100%; max-width: 640px; max-height: 80vh; padding: 18px; overflow: auto; border-radius: 12px 12px 0 0; background: #fff; }

/* 说明和例子 */
.cf-intro { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--cf-main); border-radius: 0 4px 4px 0; background: #F2F7FB; color: #3D5568; font-size: 13.5px; white-space: pre-wrap; }
.cf-guide-btn { flex: none; padding: 0; font-size: 12.5px; white-space: nowrap; }
.cf-guide { margin-bottom: 8px; padding: 10px 14px; border: 1px solid var(--cf-line); border-radius: 4px; background: #F8FAFC; color: var(--cf-muted); font-size: 13px; white-space: pre-wrap; }
.cf-sample { margin-top: 6px; color: var(--cf-text); }
.cf-guide > .cf-sample:first-child { margin-top: 0; }
.cf-sample b { color: var(--cf-primary-dark); font-size: 12.5px; }
.cf-ok { color: var(--cf-ok); font-weight: 700; }

@media (min-width: 680px) {
  .cf-pop { align-items: center; }
  .cf-pop > div { border-radius: 12px; }
}
@media (min-width: 720px) {
  .cf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
  .cf-grid > .cf-field { grid-column: span 2; }
  .cf-grid > .cf-field.q4 { grid-column: span 1; }
  .cf-grid .cf-grp { grid-column: 1 / -1; }
  .cf-grid > .cf-field.wide, .cf-grid > .cf-field.solo { grid-column: 1 / -1; }
  .cf-grid > .cf-field.solo > .cf-in, .cf-grid > .cf-field.solo > .cf-date { width: calc(50% - 14px); }
  .cf-item-b.cf-grid[style*="none"] { display: none; }
  .cf-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .cf-head { height: 60px; padding: 0 40px; }
  .cf-brand b { font-size: 17px; }
  .cf-side { display: block; flex: none; width: 176px; background: var(--cf-main); }
  .view-login .cf-side { display: none; }
  .cf-side-in { position: sticky; top: 60px; padding-top: 8px; }
  .cf-side-i { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 0 0 26px; border: none; border-bottom: 1px solid rgba(255, 255, 255, .13); background: none; color: #fff; font-size: 14px; text-align: left; cursor: pointer; }
  .cf-side-h { padding: 18px 0 6px 26px; color: rgba(255, 255, 255, .75); font-size: 12.5px; }
  .cf-side-i:hover { background: rgba(255, 255, 255, .13); }
  .cf-side-i.on { background: #fff; color: var(--cf-primary); }
  .cf-wrap { padding: 22px 60px 56px; }
  .view-login .cf-wrap { padding: 12px 16px 60px; }
  #app { max-width: 1160px; margin: 0 auto; }
  .cf-title { font-size: 28px; }
  .cf-crumb { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--cf-muted); text-align: right; }
  .cf-top { margin-bottom: 22px; }
  .cf-card { padding: 30px 44px 34px; border-radius: 20px; margin-bottom: 22px; }
  .cf-h1 { font-size: 18px; }
  .cf-login { padding: 44px 64px 40px; }
  .cf-task { min-height: 165px; padding: 30px 32px 48px; border-radius: 18px; }
  .cf-task .a { border-radius: 0 18px 0 18px; }
  .cf-task > .cf-pill { left: 32px; bottom: 18px; }
  .cf-tasks { gap: 28px 32px; }
  .cf-grid { column-gap: 56px; }
  .cf-grid > .cf-field.solo > .cf-in, .cf-grid > .cf-field.solo > .cf-date { width: calc(50% - 28px); }
  .cf-in { font-size: 14px; }
  textarea.cf-in { min-height: 120px; }

  .cf-steps { gap: 0; margin-bottom: 24px; padding: 0; overflow: visible; }
  .cf-step { position: relative; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 6px; padding: 0 4px; border: none; border-radius: 0; background: none; line-height: 1.35; }
  .cf-step::before { content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px; background: #DDE3EA; }
  .cf-step:first-child::before { display: none; }
  .cf-step .k { position: relative; z-index: 1; width: 30px; height: 30px; border: 2px solid #DDE3EA; background: #fff; font-size: 13px; }
  .cf-step .k.cf-ok { border-color: var(--cf-main); background: var(--cf-main); color: #fff; }
  .cf-step:hover { color: var(--cf-primary); }
  .cf-step.on { background: none; color: var(--cf-primary); font-weight: 700; }
  .cf-step.on .k { border-color: var(--cf-main); background: var(--cf-main); color: #fff; }
  .cf-step.bad { color: var(--cf-danger); }
  .cf-step.bad .k { border-color: var(--cf-danger); background: #fff; color: var(--cf-danger); }

  .cf-nav { justify-content: flex-end; }
  .cf-gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-rows-r { grid-template-columns: minmax(0, 1fr) 140px 28px; }
  .cf-rows-r.c3 { grid-template-columns: minmax(0, 1fr) 170px 130px 28px; }
  .cf-rows-r.c3.head { display: grid; }
  .cf-rows-r.c3 > :first-child { grid-column: auto; }
  .cg { padding: 30px 40px; }
  .cg-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-nav .cf-btn { flex: 0 0 auto; min-width: 136px; }
  #c-submit { display: flex; width: 200px; margin-left: auto; }
  #c-home { width: auto; min-width: 136px; }
}
@media (min-width: 1280px) {
  .cf-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}