/* 统一定义颜色和间距，方便未来模块复用同一套视觉语言。 */
:root{--bg:#f7f8fb;--surface:#fff;--ink:#1f2937;--muted:#778195;--line:#e7eaf0;--brand:#635bff;--brand-dark:#5048dd;--accent:#f59e0b;--ok:#159570;--danger:#d9534f;--shadow:0 12px 32px rgba(31,41,55,.07)}
/* 全局盒模型让宽度计算更稳定。 */
*{box-sizing:border-box}
/* 页面基础字体和背景。 */
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.55}
/* 链接不显示默认下划线。 */
a{color:inherit;text-decoration:none}
/* 统一按钮交互。 */
button{font:inherit;cursor:pointer}
/* 顶部栏固定高度并保持轻量阴影。 */
.topbar{height:64px;padding:0 max(20px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
/* 品牌区横向排列。 */
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
/* 预留的 logo 小方块。 */
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;font-size:11px;letter-spacing:0}
/* 顶部账号区。 */
.account-bar{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
/* 主容器限制宽度，首屏不会拉得过散。 */
.shell{max-width:1180px;margin:0 auto;padding:36px 22px 80px}
/* 认证页采用居中布局。 */
.auth-layout{min-height:calc(100vh - 140px);display:grid;place-items:center}
/* 认证卡片保持干净，不堆叠过多装饰。 */
.auth-card{width:min(100%,460px);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:36px;box-shadow:var(--shadow)}
/* 小标题。 */
.eyebrow{margin:0 0 8px;color:var(--brand);font-size:11px;font-weight:800;letter-spacing:1.5px}
/* 页面标题。 */
h1,h2,h3{margin:0;line-height:1.25}
/* 认证主标题。 */
.auth-card h1{font-size:28px;margin-bottom:12px}
/* 灰色辅助文字。 */
.muted{color:var(--muted);font-size:14px}
/* 分段切换按钮。 */
.segmented{display:flex;gap:4px;padding:4px;background:#f0f1f6;border-radius:10px;margin:26px 0 18px}
/* 分段按钮基础样式。 */
.segment{flex:1;border:0;border-radius:7px;padding:8px;background:transparent;color:var(--muted)}
/* 选中的分段按钮。 */
.segment.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(31,41,55,.08);font-weight:700}
/* 表单垂直排列。 */
.form-stack{display:grid;gap:14px}
/* 表单标签和输入上下排列。 */
label{display:grid;gap:6px;color:#4b5563;font-size:13px}
/* 输入和下拉框统一视觉。 */
input,select{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
/* 聚焦时给用户明确反馈。 */
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(99,91,255,.12)}
/* 主按钮。 */
.primary{border:0;border-radius:9px;padding:10px 16px;background:var(--brand);color:#fff;font-weight:700;transition:transform .15s,background .15s}
/* 主按钮悬停反馈。 */
.primary:hover{background:var(--brand-dark);transform:translateY(-1px)}
/* 次按钮。 */
.secondary{border:1px solid var(--line);border-radius:9px;padding:9px 14px;background:#fff;color:var(--ink)}
/* 次按钮悬停反馈。 */
.secondary:hover{border-color:var(--brand);color:var(--brand)}
/* 文字按钮。 */
.text-button{border:0;background:transparent;color:var(--brand);font-size:13px}
/* 横向撑满。 */
.wide{width:100%}
/* 页面顶部标题区。 */
.page-heading,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}
/* 主标题稍大但不夸张。 */
.page-heading h2{font-size:30px}
/* 模块入口网格。 */
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:24px}
/* 模块入口卡片。 */
.module-card{display:flex;flex-direction:column;gap:8px;min-height:148px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 16px rgba(31,41,55,.03);transition:transform .18s,box-shadow .18s,border-color .18s}
/* 模块卡片悬停。 */
.module-card:hover{transform:translateY(-3px);border-color:#c9c6ff;box-shadow:var(--shadow)}
/* 模块图标。 */
.module-icon{font-size:25px}
/* 模块名称。 */
.module-card strong{font-size:17px}
/* 模块说明。 */
.module-card small{color:var(--muted);font-size:13px}
/* 工作区分段。 */
.workspace-section{margin-top:38px}
/* 项目网格。 */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:16px}
/* 项目来源切换按钮保持紧凑，避免占用工作区高度。 */
.project-source-tabs{max-width:360px;margin:16px 0 0}
/* 项目卡片。 */
.project-card{padding:18px;background:#fff;border:1px solid var(--line);border-radius:13px;display:grid;gap:11px}
/* 项目卡片标题。 */
.project-card h4{margin:0;font-size:16px}
/* 项目元信息。 */
.project-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}
/* 状态标签。 */
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;background:#f0f1f6;color:var(--muted);font-size:12px}
/* 绿色状态标签。 */
.pill.ok{background:#e4f7ef;color:var(--ok)}
/* 项目操作区。 */
.project-actions{display:flex;gap:8px;flex-wrap:wrap}
/* 统计数字网格。 */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:18px 0}
/* 统计卡片。 */
.stat-card{padding:16px;background:#fff;border:1px solid var(--line);border-radius:12px}
/* 统计标签。 */
.stat-card small{color:var(--muted)}
/* 统计数字。 */
.stat-card strong{display:block;margin-top:5px;font-size:23px}
/* 表格容器允许手机横向滚动。 */
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
/* 表格基础。 */
table{width:100%;border-collapse:collapse;font-size:13px;min-width:580px}
/* 单元格基础。 */
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
/* 表头颜色。 */
th{color:var(--muted);font-weight:600}
/* 婚礼工作区顶部。 */
.wedding-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
/* 婚礼页面返回按钮。 */
.back-button{border:0;background:transparent;color:var(--brand);padding:0;font-size:13px}
/* 婚礼标签页。 */
.workspace-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
/* 婚礼标签。 */
.workspace-tab{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 13px;color:var(--muted)}
/* 激活的婚礼标签。 */
.workspace-tab.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
/* 婚礼内容卡片。 */
.content-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;margin-bottom:14px}
/* 卡片标题。 */
.content-card h3{font-size:17px;margin-bottom:14px}
/* 灵活横向表单。 */
.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
/* 内联表单的输入不要撑满。 */
.inline-form label{min-width:130px;flex:1}
/* 行内编辑区域让输入框和操作按钮保持紧凑。 */
.inline-editor{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 行内编辑输入框不占满整行，方便同一行修改多个字段。 */
.inline-editor input,.inline-editor select{min-width:120px}
/* 行内编辑按钮组允许在窄屏自动换行。 */
.inline-row-actions{display:flex;gap:6px;flex-wrap:wrap}
/* 正在编辑的表格行使用轻微底色提示范围。 */
.data-editing td{background:#fbfcff}
/* 表格里的编辑输入框保持稳定宽度。 */
.data-editing input,.data-editing select{min-width:110px;padding:7px 8px}
/* 方案标题行内编辑器在桌面端保持合理宽度。 */
.project-inline-editor{display:flex;align-items:end;gap:8px;flex-wrap:wrap}
/* 方案标题输入框不挤压右侧操作按钮。 */
.project-inline-editor label{min-width:180px}
/* 小按钮。 */
.small-button{border:1px solid var(--line);border-radius:7px;padding:6px 10px;background:#fff;color:var(--muted);font-size:12px}
/* 危险按钮。 */
.danger{color:var(--danger);border-color:#f2c7c5}
/* 进度条轨道。 */
.progress{height:8px;background:#eef0f5;border-radius:99px;overflow:hidden}
/* 进度条填充。 */
.progress i{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .25s ease}
/* 时间轴列表。 */
.timeline{display:grid;gap:12px}
/* 时间轴项包含复选框、分组、内容、截止日期和操作。 */
.todo-line{display:grid;grid-template-columns:18px 90px minmax(160px,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
/* 已完成待办增加淡化效果。 */
.todo-line.done .todo-text{text-decoration:line-through;color:var(--muted)}
/* 待办截止日期显示在内容右侧，便于快速扫描。 */
.todo-due{color:var(--muted);font-size:12px;white-space:nowrap}
/* 逾期提醒使用红色突出显示。 */
.todo-due.overdue,.todo-alert.overdue span{color:var(--danger);font-weight:700}
/* 临近截止提醒使用暖色突出显示。 */
.todo-due.soon,.todo-alert.soon span{color:var(--accent);font-weight:700}
/* 总览待办提醒列表保持紧凑纵向排列。 */
.todo-alert-list{display:grid;gap:8px}
/* 单条待办提醒使用浅色底区分状态。 */
.todo-alert{display:grid;grid-template-columns:100px 1fr auto;gap:10px;align-items:center;padding:9px 10px;background:#fffaf0;border-radius:8px;font-size:13px}
/* 逾期提醒使用浅红色背景。 */
.todo-alert.overdue{background:#fff5f4}
/* 提醒日期保持弱化显示。 */
.todo-alert small{color:var(--muted)}
/* 宾客状态下拉框直接作为表格中的操作控件。 */
.status-select{width:auto;min-width:100px;padding:5px 8px;border-radius:7px;background:#f7f8fb;border-color:var(--line);font-size:12px}
/* 编辑宾客其他字段时，状态保持清晰的只读标签。 */
.status-badge{white-space:nowrap}
/* 公开页面中的截止日期与待办文本保持间距。 */
.public-todo-due{margin-left:6px;color:var(--muted);font-size:12px}
/* 分享设置里的编辑开关和链接输入保持同一行布局。 */
.share-switch{display:flex;align-items:center;gap:8px;min-width:150px;white-space:nowrap}
/* 开关复用原生复选框，避免引入额外组件依赖。 */
.share-switch input{width:auto}
/* 公开页面可编辑待办使用稳定的横向网格。 */
.public-todo-row{display:grid;grid-template-columns:18px minmax(180px,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
/* 公开待办编辑输入框允许内容占满剩余空间。 */
.public-todo-text{min-width:0}
/* 提示条。 */
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#202735;color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;transition:opacity .2s,transform .2s;z-index:30}
/* 显示提示条。 */
.toast.show{opacity:1;transform:translate(-50%,0)}
/* 弹窗。 */
.dialog{width:min(900px,calc(100% - 32px));border:0;border-radius:14px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.2)}
/* 弹窗遮罩。 */
.dialog::backdrop{background:rgba(15,23,42,.42)}
/* 冲突版本并排展示。 */
.conflict-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
/* 冲突 JSON 预览。 */
pre{margin:0;max-height:280px;overflow:auto;padding:12px;background:#f7f8fb;border:1px solid var(--line);border-radius:8px;white-space:pre-wrap;font-size:12px}
/* 弹窗按钮区。 */
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* 表单错误提示。 */
.form-message{min-height:20px;margin:6px 0 0;color:var(--danger);font-size:13px}
/* 隐藏状态。 */
.hidden{display:none!important}
/* 小屏布局。 */
@media(max-width:700px){.shell{padding:24px 14px 60px}.auth-card{padding:25px}.page-heading h2{font-size:24px}.wedding-head{display:block}.wedding-head .project-actions{margin-top:14px}.todo-line{grid-template-columns:18px 72px 1fr}.todo-line .todo-due,.todo-line .todo-actions{grid-column:3}.public-todo-row{grid-template-columns:18px 1fr}.public-todo-row input[data-inline],.public-todo-row .inline-row-actions{grid-column:2}.conflict-grid{grid-template-columns:1fr}.account-bar span{display:none}}