:root {
    --primary: #1E3A5F;
    --primary-light: #2C5282;
    --primary-dark: #152D4A;
    --ink: #1E293B;
    --ink-2: #334155;
    --text: #475569;
    --muted: #94A3B8;
    --line: #E2E8F0;
    --line-strong: #CBD5E1;
    --bg-page: #F1F5F9;
    --bg-soft: #FFFFFF;
    --accent: #1E3A5F;
    --accent-deep: #152D4A;
    --accent-soft: #EBF4FF;
    --danger: #DC2626;
    --radius: 10px;
    /* 与后台（admin.css）同名的变量别名：
       问卷页的弹窗/按钮直接用了 --bg-card、--border 等名字，这里不补就会取不到值
       （background 失效变透明、border 颜色退回文字色）。 */
    --bg-card: #FFFFFF;
    --border: var(--line);
    --border-2: #E5E7EB;
    --text-primary: var(--ink);
    --text-secondary: #64748B;
    --text-body: var(--text);
    --text-muted: var(--muted);
    /* 按钮尺寸变量 */
    --btn-padding-lg: 10px 16px;
    --btn-font-size-lg: 13px;
    --btn-padding-md: 8px 16px;
    --btn-font-size-md: 13px;
    --btn-padding-sm: 5px 10px;
    --btn-font-size-sm: 12px;
}

/* 全局统一按钮样式 */
.btn-outline {
    background: #fff;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    padding: var(--btn-padding-lg);
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--btn-font-size-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
    font-weight: 400;
}
.btn-outline:hover {
    border-color: #000;
    color: #000;
}

/* 问卷页面右上角入口按钮：白色边框透明背景，单独样式不调用全局 */
.header-btn {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.6);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
    font-weight: 400;
    white-space: nowrap;
}
.header-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    color: #fff;
}
.header-btn svg {
    width: 14px;
    height: 14px;
}

/* 蓝色查看按钮：单独样式 */
.btn-view-blue {
    background: #fff;
    color: var(--info);
    border: 1px solid var(--info);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
    font-weight: 400;
}
.btn-view-blue:hover {
    background: var(--info);
    color: #fff;
    border-color: var(--info);
}

/* 查询弹窗按钮：深蓝色背景，单独样式 */
.query-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.query-btn:hover {
    background: #152D4A;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-page);
    color: var(--text);
    min-height: 100vh;
    padding: 5px 0px;
    line-height: 1.6;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    overflow: hidden;
}

.header {
    background: var(--primary);
    color: #ffffff;
    padding: 36px 40px;
    text-align: center;
    border-bottom: 3px solid var(--primary-dark);
}

.header h1 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    margin-top: 30px;
    color: #ffffff;
}

.header p {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
}

.form-content {
    padding: 40px;
}

.section {
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}

.section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.last-section {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.section-title {
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 22px;
    padding-left: 12px;
    border-left: 3px solid var(--primary);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.question {
    margin-bottom: 24px;
}

.question label {
    display: block;
    font-size: 14px;
    color: var(--ink-2);
    margin-bottom: 8px;
    font-weight: 500;
}

.question label .required {
    color: var(--danger);
    margin-left: 3px;
}

.question input[type="text"],
.question input[type="tel"],
.question input[type="email"],
.question input[type="date"],
.question select,
.question textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink-2);
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.question input[type="date"] {
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.question input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.5;
}

.question input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.8;
}

/* 日期选择器样式优化 */
.question input[type="date"]::-webkit-datetime-edit,
.question input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: var(--ink-2);
}

.question input[type="date"]::-webkit-datetime-edit-text {
    color: var(--text-muted);
}

.question input[type="date"]::-webkit-datetime-edit-month-field:focus,
.question input[type="date"]::-webkit-datetime-edit-day-field:focus,
.question input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-radius: 2px;
}

/* 拍摄日期已过提醒（重新修改问卷时旧日期会被预填） */
.date-past-warning {
    margin-top: 8px;
    padding: 8px 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    color: var(--danger);
    font-size: 13px;
    line-height: 1.5;
}

.date-past-warning span {
    font-weight: 700;
}

.question input:focus,
.question select:focus,
.question textarea:focus {
    outline: none !important;
    border: 1px solid var(--primary) !important;
    background: #ffffff;
    
}

/* 下拉框选项选中样式 */
.question select option:checked {
    background-color: var(--primary) !important;
    color: #fff !important;
    background-image: linear-gradient(var(--primary), var(--primary)) !important;
}

.question select option:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* 自定义下拉框组件 */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 14px;
    color: var(--ink-2);
}

.custom-select-trigger:hover {
    border-color: var(--primary);
}

.custom-select-trigger.open {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.custom-select-trigger .placeholder {
    color: var(--text-muted);
}

.custom-select-trigger .arrow {
    transition: transform 0.2s;
    color: var(--text-muted);
}

.custom-select-trigger.open .arrow {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    z-index: 1000;
    max-height: 260px;
    overflow-y: auto;
    display: none;
}

.custom-select-dropdown.open {
    display: block;
}

.custom-select-option {
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.15s;
    color: #334155;
    font-size: 14px;
}

.custom-select-option:hover {
    background-color: var(--primary);
    color: #fff;
}

.custom-select-option.selected {
    background-color: var(--primary);
    color: #fff;
    font-weight: 500;
}

/* 自定义日历组件 */
.custom-datepicker {
    position: relative;
    width: 100%;
}

.custom-datepicker-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 14px;
    color: var(--ink-2);
}

.custom-datepicker-trigger:hover {
    border-color: var(--primary);
}

.custom-datepicker-trigger.open {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.custom-datepicker-trigger .placeholder {
    color: var(--text-muted);
}

.custom-datepicker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    z-index: 1000;
    padding: 16px;
    display: none;
}

.custom-datepicker-dropdown.open {
    display: block;
}

.custom-datepicker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.custom-datepicker-header button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.custom-datepicker-header button:hover {
    color: var(--primary);   /* 去掉灰色底 */
}

.custom-datepicker-header .title {
    font-weight: 600;
    color: var(--primary);
}

.custom-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.custom-datepicker-grid .weekday {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
    font-weight: 500;
}

.custom-datepicker-grid .day {
    text-align: center;
    padding: 8px 0;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
    color: #334155;
    font-size: 14px;
}

.custom-datepicker-grid .day:hover {
    background-color: var(--primary);
    color: #fff;
}

.custom-datepicker-grid .day.selected {
    background-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

.custom-datepicker-grid .day.disabled {
    color: var(--border-strong);
    cursor: not-allowed;
}

.custom-datepicker-grid .day.disabled:hover {
    background: none;
    color: var(--border-strong);
}

/* 隐藏原生select和date input */
.question select,
.question input[type="date"] {
    display: none;
}

/* 自定义验证提示弹窗 */
.validation-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    color: var(--ink);
    padding: 16px 32px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 500;
    z-index: 9999;
    display: none;
    animation: popIn 0.25s ease-out;
    box-shadow: 0 12px 32px rgba(15,23,42,0.14);
    text-align: center;
    white-space: nowrap; /* 提示不换行 */
    width: max-content;
    max-width: 92vw;
    min-width: 260px;
    border-left: 4px solid var(--primary);
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* 手机端：提示条允许换行并收窄，否则长句子会撑出屏幕、两端被截断
   位置保持「屏幕正中、悬浮在弹窗上」——那才是用户认知里的"弹窗提示"，
   贴顶会飘到页面自己的头部按钮上，贴底又会掉到弹窗外面压住表单 */
@media (max-width: 640px) {
    .validation-toast {
        white-space: normal;
        /* max-content：按最长一行撑开（上限 max-width），否则默认被压到 260px，
           第一句还没写完就折行，变成「…填写信息是 / 否正确」这种断句 */
        width: max-content;
        max-width: calc(100vw - 32px);
        padding: 12px 16px;
        font-size: 13px;
        line-height: 1.6;
        word-break: break-word;
        box-sizing: border-box;
    }
}

.question textarea {
    min-height: 100px;
    resize: vertical;
}

.options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.options.inline {
    flex-direction: column;
    flex-wrap: nowrap;
}

.question .option-item {
    display: flex !important;
    align-items: center;
    padding: 11px 14px;
    background: var(--bg-soft);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    border: 1px solid var(--line);
    margin-bottom: 0;
    font-weight: normal;
}

.option-item:hover {
    background: #EBF4FF;
    border-color: var(--primary);
}

.option-item input {
    margin: 0 10px 0 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    outline: none;
    position: relative;
    top: 1px;
}

.option-item input:hover {
    border-color: var(--primary);
}

.option-item input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 9l3 3.5L12.5 4.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
}

.option-item input[type="radio"] {
    border-radius: 4px;
}

.option-item span {
    font-size: 14px;
    color: var(--text);
}

.inline .option-item {
    display: flex;
    min-width: auto;
    padding: 11px 14px;
}

.footer {
    background: transparent;
    padding: 12px 40px 32px;
    text-align: center;
    border-top: none;
}

.submit-btn {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 13px 48px;
    font-size: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-weight: 600;
    letter-spacing: 2px;
}

.submit-btn:hover {
    background: var(--primary-dark);
}

.submit-btn:active {
    background: var(--primary-dark);
}

.tips {
    margin-top: 20px;
    font-size: 13px;
    color: var(--muted);
}

.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* 图片上传样式 */
.upload-area {
    margin-top: 10px;
}

.upload-box {
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    background: #ffffff;
}

.upload-box:hover {
    border-color: var(--primary);
    background: #EBF4FF;
}

.upload-box.dragover {
    border-color: var(--primary);
    background: #EBF4FF;
}

.upload-icon {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 10px;
    color: var(--muted);
    display: flex;
    justify-content: center;
}

.upload-text {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 5px;
}

.upload-hint {
    font-size: 12px;
    color: var(--muted);
}

.preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-item .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: rgba(15,23,42,0.55);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.preview-item .remove-btn:hover {
    background: var(--danger);
}

.upload-count {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin-top: 10px;
}

/* 修改问卷按钮 */
.edit-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.edit-btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
}

/* 弹窗样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15,23,42,0.5);
}

.modal-content {
    background: white;
    margin: 15% auto;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 16px 48px rgba(15,23,42,0.18);
    /* 去掉 1px 边框：深蓝标题栏外会露出一圈浅色边线 */
}

.modal-header {
    background: var(--primary);
    color: #ffffff;
    padding: 18px 20px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.modal-header .close {
    color: rgba(255,255,255,0.8);
    font-size: 24px;
    font-weight: 400;
    cursor: pointer;
    line-height: 1;
}

.modal-header .close:hover {
    color: #ffffff;
}

.modal-body {
    padding: 28px;
    text-align: center;
}

.modal-body p {
    color: var(--text);
    margin-bottom: 15px;
}

.modal-body .modal-tip {
    white-space: nowrap; /* 提示保持一行 */
    font-size: 13px;
}

/* 校验未通过 / 需要用户回来修改的题目：红底 + 左侧红条（与校验红框同一套）
   不用 border-left + padding 的方式：那会把盒子撑大、让里面的输入框顶出去，
   看起来就是「红底被切了一截」。这里用背景 + inset 阴影，尺寸完全不变。
   上下留 8px 内边距再用负外边距抵消，红底才不会紧贴标签顶部（看起来局促）。 */
.question.field-error,
.question.field-highlight {
    background-color: #FFEBEE;
    box-shadow: inset 4px 0 0 #F44336;
    border-radius: 8px;
    padding: 8px 10px;
    margin: -8px -10px 16px;
}

/* 输入框自带白色背景，会把上面的浅红整块盖住 —— 只剩标签那一行是红的，
   看起来像「红框被切掉一半」。这里让错误态的控件半透明，浅红透到输入框背后，
   整个字段才是一个完整的红框；边框同时换成错误色，与左侧红条呼应。
   必须加 !important：global_input.css 里 input[type="text"] 的背景是 !important 的，
   否则这条会被全局那套压掉（实测过，不加就还是纯白）。 */
.question.field-error input,
.question.field-error select,
.question.field-error textarea,
.question.field-highlight input,
.question.field-highlight select,
.question.field-highlight textarea {
    background-color: rgba(255, 255, 255, 0.66) !important;
    border: 1px solid #F44336 !important;
}

/* 表单控件一律 border-box：width:100% 时不会再被 padding/border 顶宽，红底也就不会被切 */
#questionnaireForm input:not([type="checkbox"]):not([type="radio"]),
#questionnaireForm select,
#questionnaireForm textarea {
    box-sizing: border-box;
    max-width: 100%;
}

/* ===== 订单选择（一个手机号下有多单时） ===== */
.op-list { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-top: 6px; }
.op-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
    cursor: pointer; font-size: 13px; background: #fff;
}
.op-item:hover { border-color: var(--text-muted); }
.op-item:has(input:checked) { border-color: var(--primary); background: var(--border-light); }
.op-main { display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.op-sub { color: var(--muted); font-size: 12px; }
.soc-title { font-size: 12px; color: var(--muted); margin: 2px 0 6px 22px; }
.soc-item {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 6px 22px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
    cursor: pointer; font-size: 13px;
}
.soc-item:hover { border-color: var(--text-muted); }
.soc-item:has(input:checked) { border-color: var(--primary); }

.modal-body input {
    width: 100%;
    box-sizing: border-box; /* 否则 width:100% + padding + border 会向右溢出，看起来左宽右窄 */
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 15px;
    background: #ffffff;
}

.modal-body input:focus {
    outline: none;
    border-color: var(--primary);
    
}

.modal-body .hint {
    font-size: 13px;
    color: var(--muted);
    margin-top: 15px;
}

.header {
    position: relative;
}

@media (max-width: 600px) {
    .container {
        margin: 10px;
        border-radius: 8px;
    }
    
    .header {
        padding: 28px 20px;
    }
    
    .form-content {
        padding: 20px;
    }
    
    .inline .option-item {
        width: 100%;
    }
}

/* 弹窗提示样式 */
.submit-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    color: var(--ink);
    padding: 20px 44px;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    z-index: 9999;
    display: none;
    animation: popIn 0.25s;
    box-shadow: 0 16px 40px rgba(15,23,42,0.14);
    border-left: 4px solid var(--primary);
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
}

@keyframes popIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ==================== 响应式适配 ==================== */
/* 手机端适配 */
@media screen and (max-width: 768px) {
    /* 移动端头部大间距 */
    .header {
        padding: 48px 20px;
    }
    .header h1 {
        margin-top: 50px;
    }
    /* 整体容器 */
    .container {
        padding: 15px;
        margin: 10px;
    }
    
    /* 标题 */
    .header h1 {
        font-size: 20px;
    }
    
    .header p {
        font-size: 12px;
    }
    
    .edit-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    /* 区块标题 */
    .section-title {
        font-size: 15px;
        margin-bottom: 10px;
        padding-left: 10px;
    }
    
    /* 问题样式 */
    .question {
        margin-bottom: 8px;
    }
    
    .question label {
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    /* 输入框 */
    .question input[type="text"],
    .question input[type="tel"],
    .question input[type="email"],
    .question input[type="date"],
    .question select,
    .question textarea {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    /* 单选/复选选项 */
    .options {
        gap: 8px;
    }
    
    .option-item {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .option-item input {
        width: 16px;
        height: 16px;
    }
    
    /* 提交按钮 */
    .submit-btn {
        padding: 12px 24px;
        font-size: 14px;
        width: 100%;
    }
    
    /* 弹窗 */
    .modal-content {
        width: 90%;
        margin: 30% auto;
        padding: 0;
    }
    
    .modal-header h3 {
        font-size: 16px;
    }
    
    .modal-body input {
        padding: 10px;
        font-size: 14px;
    }

    .modal-body {
        padding: 22px 16px; /* 窄屏收窄内边距，保证提示一行放得下 */
    }

    /* 提交确认弹窗（内联样式固定 340px + 40px 内边距，窄屏挤不下验证码） */
    #submitSuccessModal {
        padding: 24px 16px !important;
        min-width: 0 !important;
        width: 92% !important;
        max-height: 88vh;
        overflow-y: auto;
    }

    
    
    /* 上传区域 */
    .upload-box {
        padding: 15px;
    }
    
    .upload-box p {
        font-size: 12px;
    }
    
    /* 确认提交弹窗 */
    #submitSuccessModal {
        padding: 20px 25px;
        font-size: 14px;
        width: 85%;
    }
    
    #submitSuccessModal div:first-child {
        font-size: 16px;
    }
    
    #submitSuccessModal div:nth-child(2) {
        font-size: 12px;
    }
    
    #submitSuccessModal button {
        padding: 8px 20px;
        font-size: 13px;
    }
}

/* 更小屏幕适配 */
@media screen and (max-width: 480px) {
    .container {
        padding: 10px;
        margin: 5px;
    }
    
    .header h1 {
        font-size: 18px;
    }
    
    .question {
        margin-bottom: 10px;
    }
    
    .question label {
        font-size: 13px;
    }
    
    .option-item {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* 顶部「客片展示 / 修改问卷」两个按钮：原来只有 35px 高，手指不好点 */
    .header-btn {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }
    .header > div[style*="position:absolute"] {
        top: 14px !important;
        right: 14px !important;
        gap: 8px !important;
    }

}


/* ===== 全局输入框 focus 统一样式（深蓝色边框） ===== */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
    outline: none !important;
    border: 1px solid var(--primary) !important;
    
}

/* ===== 左下角看板娘（摄影助理） =====
   只做引导，不拦截表单操作：容器 pointer-events:none，只有人物和气泡可点。
   z-index 压在顶栏(1000)和弹窗(9999)之下，不会盖住任何浮层。 */
.kanban {
    position: fixed;
    left: 60px;     /* 不贴死浏览器左边缘：28px 时像被挤在角落，88px 又偏右 */
    bottom: 16px;   /* 不贴死浏览器底边：贴边会像被窗口切掉一截 */
    width: 162px;
    z-index: 900;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}

/* 视线层：现在只作为定位容器，本身不再做任何 transform。
   以前这里用 rotate(±4.2deg) 以脚为轴转，人看着是整个歪过去（像站不稳），
   已改成只让眼睛层微移，见下面的 .kb-eyes */
.kanban-look {
    position: relative;
}

/* ===== 眼睛层：眼神跟随 =====
   一对 40×36 的小贴片（裁自立绘的眼周一块，带 4px 羽化边），只做 1~2px 平移。
   皮肤是连续渐变，错位一两像素看不出来；虹膜和眼白的对比强，动起来就是"眼神"。
   不要放大整层、不要加 rotate —— 会连睫毛和眼线一起拖，看着像贴纸在脸上滑 */
.kb-eyes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.kb-eyes .kb-eye {
    position: absolute;
    display: block;
    width: 12.3457%;      /* 40 / 324 */
    height: 6.7669%;      /* 36 / 532 */
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    /* 跟手但不"黏"：鼠标甩过去时眼睛滑过去，不是瞬移。太快像抽搐，太慢像走神 */
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* 站姿那对必须压在序列帧之上：空闲时她一直在播眨眼循环（loop 序列），
   静态图被藏起来了，眼睛层放在下面就等于永远看不见。
   眨眼的帧由 JS 按帧号隐藏（序列里有两段闭眼），见 syncStandEyes()。
   transition 给 JS 的逐帧补偿用：loop 视频里头部随眨眼起伏 ±2px，
   眼睛贴片要跟着脸挪（量出来的每帧偏移表），不挪就会在脸上飘 */
.kb-eyes-stand {
    z-index: 2;
    transition: transform .14s linear;
}

/* 姿态模式的眼睛不挂呼吸动画：身体起伏已压到 0.7px，眼睛固定不动
   （之前跟身体一起 translateY，被看成"眼睛自己在动"，不好看）。
   0.7px 的脸-眼错位肉眼不可见 */
.kanban-pose .kb-eyes { opacity: 0; transition: opacity .34s ease-in-out; }
.kanban-pose .kb-eyes.on { opacity: 1; }

/* 站姿眼睛的显隐由 JS（syncStandEyes）逐帧控制，这里不要用 opacity 规则：
   眨眼序列里闭眼那几帧必须硬切掉，否则一张睁眼的贴片会浮在闭着的眼皮上 */

/* 人物本体。呼吸交给序列动画本身（视频里就有），这里不再叠加 CSS 呼吸，
   否则会和画面里的呼吸打架，变成双倍起伏 */
.kanban-body {
    position: relative;
    z-index: 1;
    transform-origin: 50% 100%;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

@keyframes kb-breathe-soft {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.008) rotate(-0.4deg); }
}

/* 鼠标挪上去：只停住呼吸，绝对不要缩放。
   立绘是带透明通道的 PNG/WebP，非整数倍放大（1.03）时，轮廓那一圈
   半透明像素会被双线性插值拉宽，和浅灰背景混合后偏白，看起来就是
   "人物和鞋子在发光"。要有反应交给视线跟随和气泡，不动尺寸。 */
.kanban-body:hover {
    animation: none;
}

/* 气泡弹出的一瞬间歪一下头，算作回应 */
.kanban-body.nod { animation: kb-nod .55s cubic-bezier(.34, 1.3, .64, 1); }

.kanban-girl {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .18s linear;
}

/* 点一下：下压再回弹 */
.kanban-girl.boing { animation: kb-boing .5s cubic-bezier(.36, .07, .19, .97); }

/* 拍照动作序列图：6 列 × 6 行，单帧 162×266。
   切帧用 transform 而不是 background-position —— 后者 13fps 高频改会让浏览器整层重绘，
   合成层上会留残影；transform 走 GPU，稳。 */
.kanban-anim {
    position: absolute;
    left: 0;
    top: 0;
    width: 162px;
    height: 266px;
    display: none;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.kanban-anim.on { display: block; }

/* 收工回站立：相机最后一帧淡出、站姿静态图淡入，避免"咔嚓完瞬间跳回站姿"的硬切。
   序列层盖在静态图上面（z-index 1），所以淡出序列层就露出身后的静态图。 */
.kanban-anim { transition: opacity .18s linear; }
.kanban-anim.fading { opacity: 0; }

/* 快门按下的那一下：整帧被轻轻压下去再回弹。
   配合闪光用，否则只有一团白光，看不出是"她按的" */
.kanban-anim.recoil { animation: kb-recoil .24s ease-out; }

/* 只做位移，不要叠 scale：整帧缩放会让画面（尤其浅色鞋底）重采样泛白边 */
@keyframes kb-recoil {
    0%   { transform: translateY(0); }
    24%  { transform: translateY(4px); }
    62%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

.kanban-anim-inner {
    width: 972px;
    height: 1596px;
    background-repeat: no-repeat;
    background-size: 972px 1596px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* 播序列时必须把静态图藏起来：序列帧是透明的，不藏就会和站立姿势叠成"两个人"。
   用 opacity 而不是 visibility —— visibility:hidden 的元素不接收鼠标事件，
   点在人物身上会完全没反应（踩过）
   transition:none 是必须的：淡出的那 0.18 秒里两层都半透明，会透出浅色背景，
   整个人（含鞋）看起来在发光。切就硬切，序列层和静态图都是站姿，看不出来 */
.kanban-body.is-playing .kanban-girl { opacity: 0; transition: none; }

/* ===== 空闲姿态层：托腮 / 咬手指 =====
   两张图轮换，靠透明度交叉切换（不换 src，避免换图那一下闪白）。
   呼吸只做 translateY：整帧缩放会把轮廓外那圈半透明像素拉宽，浅色背景上就是"发光" */
.kanban-pose {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s linear;
}

.kanban-pose.on { opacity: 1; }

/* 姿态模式下必须把"站着举相机"那张藏掉：两张都是人，叠在一起就是双影 */
.kanban-body.is-posing .kanban-girl { opacity: 0; }

.kanban-pose .kb-pose {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity .34s ease-in-out;
    transform-origin: 50% 100%;
    will-change: opacity;
}

.kanban-pose .kb-pose.on {
    opacity: 1;
    animation: kb-pose-breathe 6.6s ease-in-out infinite;
}

/* 呼吸幅度要压到"只是活着"的程度：0.7px / 6.6s。
   之前 1.6px / 4.8s 会被看成喘气/漂浮，而且眼睛层还跟着一起动，
   看着像整张脸在上下滑。人物高 266px，0.7px 就是隐约可见的胸口起伏 */
@keyframes kb-pose-breathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.7px); }
}

.kanban-body { cursor: pointer; }

/* 气泡有两套内容：默认是引导（问题 + 按钮），拍照后切成"说话"（一句台词） */
.kb-say { display: none; }
.kanban-bubble.talking .kb-guide { display: none; }
.kanban-bubble.talking .kb-say { display: block; }

.kb-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink);
    min-height: 23px;
    /* 中文可以在任意字间断行，短句被挤到只剩一个字很丑（"不会外传" → "不会外"/"传"）。
       balance 让两行长度尽量均分，避免孤字；配合下面的 max-width 上限使用 */
    text-wrap: balance;
}

.kb-caret {
    display: inline-block;
    width: 2px;
    height: 13px;
    margin-left: 2px;
    background: var(--primary);
    vertical-align: -2px;
    animation: kb-caret .9s step-end infinite;
}

/* 台词下方的客片入口：她说完话顺手给个去处 */
.kb-link {
    display: inline-block;
    margin-top: 9px;
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .18s ease;
}

.kb-link:hover { border-bottom-color: var(--primary); }

@keyframes kb-caret {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

@keyframes kb-boing {
    0%   { transform: scale(1, 1) translateY(0); }
    28%  { transform: scale(1.08, .92) translateY(3px); }
    55%  { transform: scale(.96, 1.05) translateY(-7px); }
    80%  { transform: scale(1.01, .99) translateY(0); }
    100% { transform: scale(1, 1) translateY(0); }
}

@keyframes kb-nod {
    0%   { transform: rotate(0deg) scale(1); }
    45%  { transform: rotate(2.6deg) scale(1.012); }
    100% { transform: rotate(0deg) scale(1); }
}

/* 开心跳：靠「挤压—拉伸」做出重量感。
   起跳前下蹲压扁（scaleY<1）、腾空时拉长（scaleY>1）、落地再压一下回弹。
   只动这一张图，不换图，所以不会有重影。 */
.kanban-body.jump { animation: kb-jump .86s cubic-bezier(.33, .72, .36, 1); }

@keyframes kb-jump {
    0%   { transform: translateY(0) scale(1, 1); }
    14%  { transform: translateY(3px) scale(1.07, .90); }    /* 蓄力下蹲 */
    30%  { transform: translateY(-24px) scale(.95, 1.07); }  /* 蹬地起跳 */
    48%  { transform: translateY(-33px) scale(1, 1); }       /* 最高点 */
    64%  { transform: translateY(-16px) scale(.98, 1.03); }  /* 下落 */
    80%  { transform: translateY(1px) scale(1.08, .92); }    /* 落地压扁 */
    92%  { transform: translateY(0) scale(.98, 1.02); }      /* 回弹 */
    100% { transform: translateY(0) scale(1, 1); }
}

/* 快门白闪：举到眼前那一刻从相机位置炸开 */
.kb-flash {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 112px;
    height: 112px;
    margin: -56px 0 0 -54px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, .95) 0%,
        rgba(255, 255, 255, .62) 34%,
        rgba(255, 255, 255, 0) 68%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

.kb-flash.on { animation: kb-flash .34s ease-out; }

@keyframes kb-flash {
    0%   { opacity: 0; transform: scale(.5); }
    14%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.36); }
}

/* 头部两侧冒出的星星（不放正上方：那里是气泡的位置） */
.kb-sparks {
    position: absolute;
    left: 50%;
    top: 30%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 2;
}

.kb-spark {
    position: absolute;
    left: -9px;
    top: -9px;
    width: 18px;
    height: 18px;
    fill: #F4B740;
    opacity: 0;
    transform: scale(.2);
}

.kb-spark:nth-child(1) { --dx: -40px; --dy: -26px; --rot: -40deg; }
.kb-spark:nth-child(2) { --dx: 44px;  --dy: -34px; --rot: 24deg; width: 23px; height: 23px; left: -11.5px; top: -11.5px; fill: #FFD164; }
.kb-spark:nth-child(3) { --dx: 48px; --dy: -6px; --rot: 56deg; width: 14px; height: 14px; left: -7px; top: -7px; }

.kb-sparks.on .kb-spark {
    animation: kb-pop .92s cubic-bezier(.2, .8, .3, 1) both;
}

.kb-spark:nth-child(2) { animation-delay: .07s; }
.kb-spark:nth-child(3) { animation-delay: .14s; }

@keyframes kb-pop {
    0%   { opacity: 0; transform: translate(0, 8px) scale(.2) rotate(0deg); }
    30%  { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); }
    100% { opacity: 0; transform: translate(calc(var(--dx) * 1.5), calc(var(--dy) - 24px)) scale(.5) rotate(calc(var(--rot) * 1.9)); }
}

/* 开心笑脸贴纸：从人物右上方弹出来，停一会儿再收 */
.kb-face {
    position: absolute;
    right: -9px;
    top: 26px;
    width: 36px;
    height: 36px;
    opacity: 0;
    transform: scale(.2) rotate(-24deg);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 3px 6px rgba(15, 23, 42, .16));
    pointer-events: none;
    z-index: 2;
}

.kb-face.on { animation: kb-face-pop 1.6s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes kb-face-pop {
    0%   { opacity: 0; transform: scale(.2) rotate(-24deg); }
    16%  { opacity: 1; transform: scale(1.14) rotate(7deg); }
    28%  { transform: scale(.98) rotate(-4deg); }
    40%  { transform: scale(1.03) rotate(1deg); }
    50%  { transform: scale(1) rotate(0deg); }
    84%  { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(.92) translateY(-6px); }
}

/* 歪头：像在听你说话，头往一边偏一下再回来 */
.kanban-body.tilt { animation: kb-tilt 2.4s ease-in-out; }

@keyframes kb-tilt {
    0%, 100% { transform: rotate(0deg) scale(1); }
    26%      { transform: rotate(-6.5deg) scale(1.012); }
    64%      { transform: rotate(3.6deg) scale(1.012); }
}

/* 点头：整图下沉 + 纵向压扁，像真的在点头（不换图、无重影） */
.kanban-body.bow { animation: kb-bow 1.1s ease-in-out; }

@keyframes kb-bow {
    0%        { transform: translateY(0) scale(1, 1); }
    18%       { transform: translateY(6px) scale(1.02, 0.955); }
    34%       { transform: translateY(0) scale(1, 1); }
    50%       { transform: translateY(6px) scale(1.02, 0.955); }
    66%       { transform: translateY(0) scale(1, 1); }
    80%       { transform: translateY(3px) scale(1.01, 0.98); }
    100%      { transform: translateY(0) scale(1, 1); }
}

/* 摇头：以脚为轴左右轻摆 */
.kanban-body.shake { animation: kb-shake 1.2s ease-in-out; }

@keyframes kb-shake {
    0%, 100% { transform: rotate(0deg); }
    15%      { transform: rotate(-3.4deg); }
    33%      { transform: rotate(3.4deg); }
    51%      { transform: rotate(-2.6deg); }
    69%      { transform: rotate(2deg); }
    85%      { transform: rotate(-1deg); }
}

/* 张望：左右扭头看两下，像在等下一个客人 */
.kanban-body.look { animation: kb-look 2.7s ease-in-out; }

@keyframes kb-look {
    0%, 100% { transform: rotate(0deg) scale(1); }
    30%      { transform: rotate(-5.2deg) scale(1.015); }
    68%      { transform: rotate(5.6deg) scale(1.015); }
}

/* 入场：淡入，只动 opacity，避免 transform 影响内部 fixed 气泡的定位 */
.kanban { animation: kb-fade .55s ease-out both; }

@keyframes kb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 手机端圆钮的呼吸缩放 */
@keyframes kb-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* 系统开了「减弱动态效果」：只停掉持续性的呼吸/淡入，一次性动作（歪头、张望、拍照帧）
   照常播放 —— 否则整只就静止了，等于没有看板娘。 */
@media (prefers-reduced-motion: reduce) {
    .kanban { animation: none !important; }
    .kanban-body:not(.tilt):not(.look):not(.nod) { animation: none !important; }
    .kanban-girl:not(.boing) { animation: none !important; }
}

.kanban-bubble {
    position: absolute;
    left: 0;
    bottom: 300px;   /* 留出头顶星星的位置，否则星星会被气泡盖住 */
    /* 气泡从人物左侧开始。宽度跟着台词走：短句不撑成一条长条，
       长句到上限自动换行。上限仍按「不能盖住表单」推算：
       表单左边缘 = 50vw - 400，气泡右缘 = 60 + width + 34，
       所以 width ≤ 50vw - 502；窄窗口下自动收窄。
       用 max-content 而不是 fit-content：气泡是绝对定位、父容器很窄，
       fit-content 的 shrink-to-fit 会被父宽压到 min-width。 */
    width: max-content;
    max-width: min(216px, calc(50vw - 504px));
    min-width: 128px;
    z-index: 3;   /* 人物跳起来时会顶到气泡，气泡必须在上面 */
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .10);
}

.kanban-bubble.show { opacity: 1; visibility: visible; transform: translateY(0); }

.kanban-bubble::after {
    content: '';
    position: absolute;
    left: 84px;
    bottom: -7px;
    width: 12px;
    height: 12px;
    background: var(--bg-soft);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transform: rotate(45deg);
}

.kanban-bubble h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

.kanban-bubble p {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text);
}

.kanban-actions { display: flex; gap: 8px; }

.kanban-btn {
    font: inherit;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--line-strong);
    background: var(--bg-soft);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, border-color .18s ease;
}

.kanban-btn:hover { background: #F8FAFC; }

.kanban-btn.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.kanban-btn.primary:hover { background: var(--primary-light); border-color: var(--primary-light); }

/* 窄屏：全身立绘会压住表单，改成右下角圆形头像钮，点一下从底部弹气泡（行业通行做法）。
   断点取 1250：表单左边缘 = 50vw - 400，人物 left 60 + 宽 162 = 右缘 222，
   窗口窄于 1244 时两者必然重叠 */
@media (max-width: 1250px) {
    .kanban {
        width: 58px;
        height: 58px;
        left: auto;
        right: 14px;
        bottom: 16px;
        border-radius: 50%;
        overflow: visible;   /* 头顶的星星/笑脸要能露到圆外，裁剪放在 .kanban-look 上 */
        background: var(--bg-soft);
        box-shadow: 0 4px 16px rgba(15, 23, 42, .16);
    }

    /* 立绘是 162×266 竖图，圆钮只有 58px：不裁就是个溢出圆外的竖方块 */
    .kanban-body,
    .kanban-look {
        width: 100%;
        height: 100%;
    }

    .kanban-look {
        border-radius: 50%;
        overflow: hidden;
    }

    /* 圆钮改成整体呼吸缩放：上下浮动会让按钮跑位，不好点中 */
    .kanban-body {
        animation: kb-breathe 3.4s ease-in-out infinite;
        transform-origin: 50% 50%;
    }

    .kanban-body:hover {
        animation: kb-breathe 3.4s ease-in-out infinite;
        transform: none;
    }

    .kanban-girl {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 4%;   /* 竖图按宽铺满后，取景框要往上才拍得到脸 */
    }

    .kanban-shoot {
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: 50% 10%;
    }

    /* 气泡跟着圆钮走：靠右的小卡片，尾巴对准按钮。
       拉成整屏宽会横穿表单，把输入框压掉 */
    .kanban-bubble {
        position: fixed;
        left: auto;
        right: 12px;
        bottom: 86px;
        /* 宽度跟着台词走：短句不再撑成一条空荡荡的长条。
           fit-content 取「内容宽度」和 max-width 的较小值，打字时只会单向变宽，
           不会来回抖；长句到 max-width 才换行。 */
        width: max-content;
        max-width: min(262px, calc(100vw - 24px));
        min-width: 122px;
        padding: 11px 13px;
    }

    /* 手机上气泡越矮越好，别把表单压掉太多 */
    .kb-link { margin-top: 5px; font-size: 11.5px; }
    .kb-line { font-size: 12.5px; }

    /* 圆钮位置固定，跳跃只做挤压不做位移，否则按钮会跑出可点区域 */
    .kanban-body.jump { animation: kb-jump-m .7s cubic-bezier(.33, .72, .36, 1); }
    @keyframes kb-jump-m {
        0%   { transform: scale(1, 1); }
        18%  { transform: scale(1.1, .88); }
        46%  { transform: scale(.95, 1.08); }
        78%  { transform: scale(1.09, .91); }
        100% { transform: scale(1, 1); }
    }

    /* 圆钮太小放不下 162px 的序列动画，手机端只用跳跃 */
    .kanban-anim { display: none !important; }

    /* 圆钮只有 58px，星星和笑脸都要按比例缩，否则糊满半个屏幕 */
    .kb-face { width: 20px; height: 20px; right: -9px; top: -5px; }

    .kb-spark { width: 10px; height: 10px; left: -5px; top: -5px; }
    .kb-spark:nth-child(1) { --dx: -14px; --dy: -19px; --rot: -40deg; }
    .kb-spark:nth-child(2) { --dx: 1px; --dy: -26px; --rot: 24deg; width: 12px; height: 12px; left: -6px; top: -6px; }
    .kb-spark:nth-child(3) { --dx: 15px; --dy: -16px; --rot: 56deg; }

    .kb-sparks { top: 4%; }

    .kanban-bubble::after { left: auto; right: 22px; }
}