* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #15458d;
  --primary-light: #0c326c;
  --primary-bg: #eaf1fb;
  --accent: #15458d;
  --gold: #15458d;
  --gold-soft: #eaf1fb;
  --bg: #f4f6f8;
  --card-bg: #FFFFFF;
  --text: #132031;
  --text-secondary: #647184;
  --text-light: #7b8798;
  --border: #dce3ec;
  --success: #52C41A;
  --warning: #FAAD14;
  --danger: #FF4D4F;
  --info: #0c326c;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#app {
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg);
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

.nav-bar {
  height: 48px; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  position: sticky; top: 0; z-index: 100; flex-shrink: 0;
}
.nav-title { font-size: 17px; font-weight: 600; }
.nav-back {
  position: absolute; left: 12px; font-size: 22px; cursor: pointer;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.nav-right { position: absolute; right: 12px; font-size: 14px; cursor: pointer; }

.content { flex: 1; min-width: 0; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

.tab-bar {
  height: 56px; background: #fff; border-top: 1px solid var(--border);
  display: flex; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--app-max-width); z-index: 100;
}
.tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-light); cursor: pointer; font-size: 11px; gap: 2px; transition: color 0.2s;
}
.tab-item.active { color: var(--primary); }
.tab-icon { width: 24px; height: 24px; }

.fab {
  position: fixed; right: 20px; bottom: 76px; width: 52px; height: 52px;
  border-radius: 50%; background: var(--primary-light); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,85,72,0.4); z-index: 90; transition: transform 0.2s;
}
.fab:active { transform: scale(0.9); }
.fab svg { width: 28px; height: 28px; }

.login-page {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); padding: 40px 24px;
}
.login-logo {
  width: 80px; height: 80px; background: rgba(255,255,255,0.15); border-radius: 20px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; backdrop-filter: blur(10px);
}
.login-logo svg { width: 44px; height: 44px; color: #fff; }
.login-title { color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.login-subtitle { color: rgba(255,255,255,0.7); font-size: 13px; margin-bottom: 32px; }
.login-card { width: 100%; background: #fff; border-radius: 16px; padding: 28px 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.input-group { margin-bottom: 18px; }
.input-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; display: block; }
.input-field {
  width: 100%; height: 44px; border: 1.5px solid var(--border); border-radius: 8px; padding: 0 14px;
  font-size: 15px; transition: border-color 0.2s; outline: none;
}
.input-field:focus { border-color: var(--primary-light); }
textarea.input-field { padding: 10px 14px; height: auto; resize: vertical; min-height: 60px; }
.btn {
  width: 100%; height: 44px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: opacity 0.2s;
}
.btn:active { opacity: 0.8; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-light { background: var(--primary-bg); color: var(--primary); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-sm { height: 32px; font-size: 13px; border-radius: 6px; width: auto; padding: 0 14px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.register-link { text-align: center; margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.8); }
.register-link a { color: #fff; font-weight: 600; text-decoration: underline; }

.home-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); padding: 20px 16px 48px; color: #fff; }
.home-user { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.home-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600;
}
.home-name { font-size: 17px; font-weight: 600; }
.home-role { font-size: 12px; color: rgba(255,255,255,0.7); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px; margin-top: -32px; }
.stat-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: var(--shadow); text-align: center; }
.stat-num { font-size: 24px; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.section-title { font-size: 16px; font-weight: 600; padding: 20px 16px 10px; display: flex; align-items: center; justify-content: space-between; }
.section-title .more { font-size: 13px; color: var(--text-light); font-weight: 400; }
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px; }
.quick-action { background: #fff; border-radius: 12px; padding: 14px 8px; text-align: center; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.15s; }
.quick-action:active { transform: scale(0.95); }
.quick-action .icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; }
.quick-action .icon svg { width: 20px; height: 20px; color: #fff; }
.quick-action .label { font-size: 11px; color: var(--text); }

.list-search { padding: 10px 16px; background: #fff; position: sticky; top: 48px; z-index: 50; }
.list-search input { width: 100%; height: 36px; border: none; background: var(--bg); border-radius: 18px; padding: 0 16px; font-size: 14px; outline: none; }
.list-filter { display: flex; gap: 6px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--border); overflow-x: auto; }
.filter-chip { padding: 4px 14px; border-radius: 14px; font-size: 13px; white-space: nowrap; cursor: pointer; background: var(--bg); color: var(--text-secondary); transition: all 0.2s; }
.filter-chip.active { background: var(--primary); color: #fff; }
.report-card { margin: 8px 16px; background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s; }
.report-card:active { transform: scale(0.98); }
.report-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.report-no { font-size: 12px; color: var(--text-light); }
.report-title { font-size: 15px; font-weight: 600; margin: 4px 0; }
.report-info { font-size: 13px; color: var(--text-secondary); display: flex; gap: 12px; flex-wrap: wrap; }
.report-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.status-badge { padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.status-draft { background: #E8E8E8; color: #666; }
.status-submitted { background: #FFF7E6; color: #D48806; }
.status-reviewed { background: #eaf1fb; color: #0c326c; }
.status-archived { background: #F6FFED; color: #52C41A; }

.form-section { margin: 8px 16px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.form-section-title { background: var(--primary-bg); color: var(--primary); font-size: 14px; font-weight: 600; padding: 10px 14px; border-left: 3px solid var(--primary-light); }
.form-section-body { padding: 14px; }
.form-row { display: flex; gap: 10px; margin-bottom: 12px; }
.form-row > * { flex: 1; }
.form-row:last-child { margin-bottom: 0; }
.form-actions { padding: 16px; display: flex; gap: 10px; }
.form-actions .btn { flex: 1; }

.detail-section { margin: 8px 16px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.detail-section-title { background: var(--primary-bg); color: var(--primary); font-size: 14px; font-weight: 600; padding: 10px 14px; }
.detail-row { display: flex; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--text-secondary); width: 90px; flex-shrink: 0; }
.detail-value { flex: 1; color: var(--text); font-weight: 500; }

.timeline { padding: 8px 16px; }
.timeline-item { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: 5px; top: 20px; bottom: -8px; width: 2px; background: var(--border); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary-light); flex-shrink: 0; margin-top: 3px; z-index: 1; }
.timeline-content { flex: 1; }
.timeline-action { font-size: 13px; font-weight: 500; }
.timeline-user { font-size: 12px; color: var(--text-light); }
.timeline-time { font-size: 11px; color: var(--text-light); }

.role-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.role-admin { background: #FFE7E7; color: #CF1322; }
.role-uploader { background: #FFF7E6; color: #D48806; }
.role-reviewer { background: #F6FFED; color: #389E0D; }
.role-surveyor { background: #eaf1fb; color: #15458d; }
.role-viewer { background: #F0F0F0; color: #666; }

.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; z-index: 9999; white-space: nowrap; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 24px; }
.modal-box { background: #fff; border-radius: 14px; width: 100%; max-width: 360px; overflow: hidden; }
.modal-title { padding: 16px 20px 8px; font-size: 17px; font-weight: 600; text-align: center; }
.modal-body { padding: 8px 20px 20px; font-size: 14px; color: var(--text-secondary); text-align: center; }
.modal-actions { display: flex; border-top: 1px solid var(--border); }
.modal-actions button { flex: 1; height: 46px; border: none; background: #fff; font-size: 16px; cursor: pointer; }
.modal-actions button:first-child { border-right: 1px solid var(--border); color: var(--text-secondary); }
.modal-actions button:last-child { color: var(--primary); font-weight: 600; }
.modal-body img { max-width: 100%; border-radius: 8px; }
.modal-body textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 13px; resize: vertical; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-light); }
.empty-state svg { width: 64px; height: 64px; margin-bottom: 12px; opacity: 0.3; }
.empty-state p { font-size: 14px; }

.image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.img-preview-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

.input-field.error { border-color: var(--danger); background: #FFF1F0; }
.input-hint { font-size: 11px; color: var(--text-light); margin-top: 3px; }
.input-hint.error { color: var(--danger); }
.input-field.valid { border-color: var(--success); }
.required-mark { color: var(--danger); margin-left: 2px; }
.floor-info-display { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 12px; background: linear-gradient(135deg, #eaf1fb, #f4f6f8); border-radius: 8px; border: 1px solid #dce3ec; }
.floor-info-tag { font-size: 15px; font-weight: 700; color: #0c326c; }
.floor-info-sep { font-size: 14px; color: #dce3ec; font-weight: 400; }

.solution-card { margin: 8px 16px; background: linear-gradient(135deg, #fff 0%, #f4f6f8 100%); border: 1px solid #dce3ec; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(8,63,54,0.1); }
.solution-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
.solution-header svg { width: 20px; height: 20px; }
.solution-header .title { font-size: 16px; font-weight: 700; }
.solution-body { padding: 14px 16px; }
.solution-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.spec-item { background: #fff; border-radius: 8px; padding: 10px 12px; border: 1px solid var(--border); }
.spec-item .spec-label { font-size: 11px; color: var(--text-light); margin-bottom: 2px; }
.spec-item .spec-value { font-size: 15px; font-weight: 600; color: var(--primary); }
.solution-notes { background: var(--primary-bg); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--text); line-height: 1.6; margin-top: 8px; }
.solution-notes .note-title { font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.solution-summary { background: #FFFBE6; border: 1px solid #FFE58F; border-radius: 8px; padding: 12px; font-size: 13px; color: var(--text); line-height: 1.7; white-space: pre-wrap; margin-top: 10px; }
.solution-status { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; margin-left: auto; }
.solution-ready { background: rgba(255,255,255,0.3); color: #fff; }

.info-banner { margin: 8px 16px; background: #eaf1fb; border: 1px solid #dce3ec; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #15458d; display: flex; align-items: flex-start; gap: 8px; }
.info-banner svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.tag-select-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-option { padding: 6px 14px; border: 1.5px solid var(--border); border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.2s; background: #fff; color: var(--text-secondary); }
.tag-option.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); font-weight: 600; }

.share-btn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.share-btn svg { width: 18px; height: 18px; }

.image-preview-modal { max-width: 500px; }
.image-preview-modal img { width: 100%; border-radius: 8px; }
.image-preview-actions { display: flex; gap: 8px; margin-top: 12px; }
.image-preview-actions .btn { flex: 1; }

/* 转发/下载页面 */
.forward-page { padding: 16px; }
.forward-success { text-align: center; padding: 32px 16px 24px; }
.forward-success-icon { width: 64px; height: 64px; margin: 0 auto 12px; background: #E8F5E9; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.forward-success-icon svg { width: 36px; height: 36px; color: #52C41A; }
.forward-success-text { font-size: 20px; font-weight: 700; color: var(--text); }
.forward-success-sub { font-size: 13px; color: var(--text-light); margin-top: 6px; }

.forward-hint { background: #FFF7E6; border: 1px solid #FFD591; border-radius: 12px; padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; }
.forward-hint-icon { flex-shrink: 0; width: 22px; height: 22px; }
.forward-hint-icon svg { width: 22px; height: 22px; color: #FAAD14; }
.forward-hint-text { font-size: 13px; color: #8C6E2A; line-height: 1.6; }
.forward-dots { display: inline-block; background: #FAAD14; color: #fff; border-radius: 4px; padding: 0 6px; font-weight: 700; font-size: 14px; }

.forward-actions { display: flex; flex-direction: column; gap: 12px; }
.forward-btn { display: flex; flex-direction: column; align-items: center; padding: 18px 16px; border-radius: 14px; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.forward-btn:active { transform: scale(0.98); }
.forward-btn svg { width: 32px; height: 32px; margin-bottom: 8px; }
.forward-btn-text { font-size: 16px; font-weight: 600; }
.forward-btn-sub { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.forward-btn-jpg { background: linear-gradient(135deg, #15458d 0%, #0c326c 100%); color: #fff; box-shadow: 0 4px 14px rgba(31, 78, 121, 0.25); }
.forward-btn-pdf { background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); color: #fff; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25); }

.forward-preview { margin-top: 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; position: relative; }
.forward-preview img { display: block; width: 100%; }
.forward-preview-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); color: #fff; text-align: center; font-size: 12px; padding: 6px; }

.report-image-template { position: fixed; left: -9999px; top: 0; width: 750px; background: #fff; padding: 40px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; }
.rpt-header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 3px solid var(--primary); }
.rpt-header .rpt-company { font-size: 24px; font-weight: 700; color: var(--primary); }
.rpt-header .rpt-title { font-size: 18px; color: var(--text-secondary); margin-top: 6px; }
.rpt-header .rpt-no { font-size: 13px; color: var(--text-light); margin-top: 8px; }
.rpt-section-title { background: var(--primary); color: #fff; font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: 6px; margin: 16px 0 10px; }
.rpt-info-table { width: 100%; border-collapse: collapse; }
.rpt-info-table td { border: 1px solid #D0D0D0; padding: 8px 12px; font-size: 13px; }
.rpt-info-table .rpt-label { background: var(--primary-bg); font-weight: 600; color: var(--primary); width: 120px; }
.rpt-solution-box { background: linear-gradient(135deg, #f4f6f8 0%, #eaf1fb 100%); border: 2px solid var(--primary-light); border-radius: 10px; padding: 16px; margin-top: 12px; }
.rpt-solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rpt-solution-item { background: #fff; border-radius: 8px; padding: 10px 14px; }
.rpt-solution-item .label { font-size: 12px; color: var(--text-light); }
.rpt-solution-item .value { font-size: 16px; font-weight: 700; color: var(--primary); margin-top: 2px; }
.rpt-notes { background: #FFFBE6; border: 1px solid #FFE58F; border-radius: 8px; padding: 12px; font-size: 13px; line-height: 1.7; margin-top: 10px; }
.rpt-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-size: 12px; color: var(--text-light); }

/* Public edition: keep the original layout usable on narrow screens and desktop. */
.form-row > * { min-width: 0; }
.fab { right: max(var(--page-gutter), calc((100% - var(--app-max-width)) / 2 + var(--page-gutter))); }
.detail-value, .report-title { overflow-wrap: anywhere; }
.rpt-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.modal-body { overflow-wrap: anywhere; }
.splash-logo { width: 76px; }
#splash-screen.hidden { visibility: hidden; }
.forward-actions .btn { min-height: 44px; height: auto; padding: 12px; }
@media (max-width: 360px) { .form-section-body { padding: 12px; } .input-field { padding: 0 10px; } .tag-option { padding: 6px 11px; } }

/* VI source: https://www.52lift.com/styles.css, captured 2026-10-09. */
:root {
  --primary: #15458d;
  --primary-light: #0c326c;
  --primary-bg: #eaf1fb;
  --accent: #15458d;
  --gold: #15458d;
  --gold-soft: #eaf1fb;
  --bg: #f4f6f8;
  --card-bg: #fff;
  --text: #132031;
  --text-secondary: #647184;
  --text-light: #7b8798;
  --border: #dce3ec;
  --shadow: 0 14px 36px rgba(31,46,67,.07);
  color-scheme: light;
  font-synthesis: none;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.vi-wordmark { color: #15458d; font-size: 27px; font-weight: 750; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.vi-wordmark > span { font-weight: 500; letter-spacing: .035em; }
.vi-masthead { min-height: 62px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border-bottom: 1px solid var(--border); }
.vi-masthead .vi-wordmark { font-size: 24px; text-decoration: none; }
.vi-masthead > span { color: var(--text-secondary); font-size: 11px; letter-spacing: .08em; }
#app { box-shadow: 0 0 0 1px var(--border); }
.nav-bar { background: #fff; color: var(--text); border-bottom: 1px solid var(--border); }
.nav-title { font-size: 15px; font-weight: 600; }
.nav-back, .nav-right { color: var(--primary); }
.home-header { background: #fff; color: var(--text); }
.home-avatar { background: var(--primary-bg); color: var(--primary); border-radius: 7px; }
.home-role { color: var(--text-secondary); }
.home-name { font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.stat-card, .report-card, .form-section, .detail-section { box-shadow: none; border: 1px solid var(--border); border-radius: 7px; }
.stat-num { font-weight: 500; font-variant-numeric: tabular-nums; }
.section-title { font-size: 15px; font-weight: 600; }
.section-title .more { color: var(--primary); font-size: 12px; }
.report-title { font-size: 15px; font-weight: 600; }
.report-no, .report-footer { font-variant-numeric: tabular-nums; }
.report-card:hover { border-color: var(--primary); }
.form-section-title, .detail-section-title { background: #fff; border-left: 0; border-bottom: 1px solid var(--border); color: var(--primary); font-weight: 600; padding: 12px 14px; }
.input-label { color: var(--text-secondary); font-size: 12px; }
.input-field { border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--text); }
.input-field:focus { border-color: #3d75c7; box-shadow: 0 0 0 2px rgba(61,117,199,.1); }
.btn { border-radius: 5px; font-size: 14px; font-weight: 600; }
.btn-primary { background: #15458d; }
.btn-primary:hover { background: #0c326c; }
.btn-light { background: var(--primary-bg); color: var(--primary); }
.btn-outline { border: 1px solid var(--primary); background: #fff; }
.fab { border-radius: 7px; background: #15458d; box-shadow: 0 4px 10px rgba(21,69,141,.12); }
.fab:hover { background: #0c326c; }
.tag-option { border-width: 1px; border-radius: 5px; font-size: 12px; }
.tag-option.active { background: var(--primary-bg); }
.info-banner, .floor-info-display { border-radius: 6px; }
.floor-info-display { background: var(--primary-bg); }
.floor-info-tag { font-size: 14px; }
.status-submitted { color: #15458d; background: #eaf1fb; }
.img-preview-item, .modal-box, .modal-body img { border-radius: 7px; }
.tab-bar { background: #fff; }
.timeline-dot { background: #15458d; }
.forward-page { padding: 20px 16px; }
.forward-success { padding: 22px 16px; }
.forward-success-icon { width: 48px; height: 48px; background: #eaf1fb; border-radius: 7px; }
.forward-success-icon svg { color: #15458d; width: 28px; height: 28px; }
.forward-success-text { font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.forward-hint { background: #eaf1fb; border: 1px solid #dce3ec; border-radius: 6px; }
.forward-hint-icon svg, .forward-hint-text { color: #15458d; }
.forward-dots { color: #15458d; background: #fff; }
.forward-btn { border-radius: 5px; box-shadow: none; padding: 16px; }
.forward-btn-jpg { color: #fff; background: #15458d; border: 1px solid #15458d; }
.forward-btn-pdf { color: #15458d; background: #fff; border: 1px solid #15458d; }
.forward-btn-text { font-size: 15px; font-weight: 600; }
.forward-btn-sub { font-size: 11px; }
.forward-btn svg { width: 25px; height: 25px; margin-bottom: 7px; }
.forward-preview { border-radius: 6px; border: 1px solid var(--border); box-shadow: none; }
.rpt-header { border-bottom-color: #15458d; }
.rpt-header .rpt-company { font-weight: 600; }
.rpt-info-table td { border-color: #dce3ec; }
.rpt-info-table .rpt-label { background: #eaf1fb; }
.rpt-section-title { border-radius: 5px; background: #15458d; }
.rpt-notes { background: #f4f6f8; border-color: #dce3ec; border-radius: 5px; }

/* The welcome page follows the site's editorial white-and-blue identity. */
#splash-screen { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; background: #fff; padding: 32px 24px; overflow-y: auto; justify-content: center; transition: opacity .2s; }
#splash-screen.hidden { opacity: 0; pointer-events: none; }
.splash-card { position: relative; max-width: 390px; width: 100%; padding: 0; border: 0; border-radius: 0; background: #fff; backdrop-filter: none; text-align: left; }
.splash-card::before { display: none; }
.splash-brand { color: #15458d; letter-spacing: 0; font-size: 32px; font-weight: 750; }
.splash-brand .vi-wordmark { font-size: 34px; }
.splash-brand-en { color: #647184; font-size: 11px; letter-spacing: .06em; margin: 9px 0 43px; }
.splash-tag { display: flex; align-items: center; gap: 10px; padding: 0; border-radius: 0; margin-bottom: 22px; color: #15458d; background: transparent; font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.splash-tag::before { content: ''; width: 24px; height: 1px; background: #15458d; }
.splash-title { color: #132031; font-size: 38px; font-weight: 650; letter-spacing: -.065em; line-height: 1.3; }
.splash-title > span { color: #15458d; }
.splash-sub { color: #647184; font-size: 13px; letter-spacing: 0; margin-top: 18px; line-height: 1.9; }
.splash-features { display: flex; justify-content: space-between; gap: 12px; padding-top: 22px; margin-top: 24px; border-top: 1px solid #dce3ec; }
.splash-f-item { text-align: left; flex: 1; }
.splash-f-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #eaf1fb; border-radius: 6px; margin: 0 0 10px; }
.splash-f-icon svg { width: 20px; height: 20px; fill: #15458d; }
.splash-f-text { color: #132031; font-size: 12px; font-weight: 600; }
.splash-f-desc { color: #647184; font-size: 10px; margin-top: 3px; }
.splash-enter { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 30px; padding: 15px 20px; border: 0; border-radius: 5px; background: #15458d; box-shadow: none; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0; cursor: pointer; }
.splash-enter:hover { background: #0c326c; }
.splash-enter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.splash-trust { display: flex; align-items: center; margin-top: 18px; justify-content: flex-start; gap: 6px; }
.splash-trust svg { fill: #15458d; width: 14px; height: 14px; }
.splash-trust span { color: #647184; font-size: 10px; }
.splash-hotline { position: static; max-width: 390px; width: 100%; margin-top: 42px; padding-top: 16px; border-top: 1px solid #dce3ec; color: #647184; font-size: 10px; text-align: left; }
@media (max-height: 720px) { #splash-screen { justify-content: flex-start; padding-block: 24px; } .splash-brand-en { margin-bottom: 28px; } .splash-hotline { margin-top: 26px; } }
@media (max-width: 360px) { .splash-title { font-size: 35px; } .vi-masthead { padding-inline: 16px; } }

/* Responsive workspace: phone < 768px, tablet >= 768px, desktop >= 1024px. */
:root {
  --app-max-width: 1280px;
  --page-gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
.vi-masthead { padding-inline: var(--page-gutter); }
.nav-bar { min-height: 52px; height: auto; padding: 12px 60px; }
.nav-title { text-align: center; overflow-wrap: anywhere; }
.nav-back { width: 44px; height: 44px; left: 8px; }
.nav-right { min-height: 44px; display: flex; align-items: center; }
.tab-bar {
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.fab-label { display: none; }
.home-header { padding-inline: var(--page-gutter); }
.home-user > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.home-avatar { flex-shrink: 0; }
.stats-grid, .section-title { padding-inline: var(--page-gutter); }
.report-grid, .form-layout, .detail-layout, .settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 16px var(--page-gutter);
}
.report-grid { margin-top: 0; }
.settings-layout { margin-top: -16px; }
.report-grid > .report-card,
.form-layout > .form-section,
.detail-layout > .detail-section,
.settings-layout > .form-section { min-width: 0; margin: 0; }
.report-grid > .empty-state { grid-column: 1 / -1; }
.report-info, .detail-section, .forward-success-sub, .timeline-content { overflow-wrap: anywhere; }
.report-card-header { gap: 12px; }
.status-badge { flex-shrink: 0; }
.form-row > .input-group { margin-bottom: 0; }
.form-row { margin-bottom: 18px; }
.form-section-body > .input-group:last-child { margin-bottom: 0; }
#content > .info-banner { margin: 16px var(--page-gutter); }
.detail-export { padding: 0 var(--page-gutter) 16px; }
.input-field { min-width: 0; font-size: 16px; }
.tag-option { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.floor-info-display { flex-wrap: wrap; }
.form-actions { padding: 8px var(--page-gutter) calc(24px + env(safe-area-inset-bottom, 0px)); }
.form-actions .btn { min-width: 0; height: auto; min-height: 44px; padding: 10px 12px; }
.detail-label { width: 100px; }
.detail-value { min-width: 0; }
.forward-page { padding: 20px var(--page-gutter); }
.forward-preview { width: 100%; max-width: 750px; margin-inline: auto; }
.modal-overlay { padding: 16px; }
.modal-box { display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.modal-title, .modal-actions { flex-shrink: 0; }
.modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.toast { width: max-content; max-width: calc(100% - 32px); white-space: normal; text-align: center; overflow-wrap: anywhere; }

@media (max-width: 479px) {
  .form-row { flex-direction: column; gap: 18px; }
  .vi-masthead { gap: 10px; }
  .vi-masthead > span { font-size: 10px; letter-spacing: 0; }
  .detail-section-title { flex-wrap: wrap; gap: 8px; overflow-wrap: anywhere; }
}

@media (min-width: 768px) {
  :root { --page-gutter: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  .vi-masthead { min-height: 72px; }
  .vi-masthead .vi-wordmark { font-size: 28px; }
  .vi-masthead > span { font-size: 12px; }
  .nav-title { font-size: 17px; }
  .home-header { padding-top: 28px; padding-bottom: 56px; }
  .stat-card { padding: 24px; text-align: left; }
  .stat-num { font-size: 32px; }
  .stats-grid { gap: 16px; }
  .section-title { padding-top: 28px; padding-bottom: 16px; }
  .report-grid, .detail-layout, .settings-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-card { padding: 20px; }
  .settings-submitter { grid-row: span 2; }
  .form-section-body { padding: 20px; }
  .form-section-title, .detail-section-title { padding: 14px 20px; }
  .detail-row { padding: 12px 20px; }
  .tab-item { flex-direction: row; gap: 8px; font-size: 14px; }
  .form-actions { justify-content: flex-end; }
  .form-actions .btn { flex: 0 1 200px; }
  .forward-page { max-width: 1000px; margin-inline: auto; }
  .forward-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forward-actions > .btn-primary { grid-column: 1 / -1; }
  .forward-preview { margin-top: 24px; }
  .modal-box { max-width: 480px; }
  .image-preview-modal { max-width: none; }
  #splash-screen { padding: 40px; }
  .splash-card {
    max-width: 1000px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: clamp(32px, 6vw, 96px);
  }
  .splash-brand, .splash-brand-en { grid-column: 1 / -1; }
  .splash-brand-en { margin-bottom: 40px; }
  .splash-title { font-size: clamp(40px, 4.5vw, 56px); }
  .splash-sub { font-size: 16px; }
  .splash-features {
    grid-column: 2;
    grid-row: 3 / 8;
    align-self: center;
    flex-direction: column;
    gap: 32px;
    margin: 0;
    padding: 24px 0 24px 32px;
    border-top: 0;
    border-left: 1px solid var(--border);
  }
  .splash-f-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .splash-f-icon { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .splash-f-text { font-size: 15px; }
  .splash-f-desc { font-size: 12px; }
  .splash-enter { max-width: 420px; min-height: 52px; }
  .splash-trust { grid-column: 1; }
  .splash-hotline { max-width: 1000px; margin-top: 40px; font-size: 12px; }
}

@media (min-width: 1024px) {
  :root { --page-gutter: 32px; }
  .vi-masthead { position: sticky; top: 0; z-index: 100; padding-right: 280px; }
  .nav-bar { top: 72px; justify-content: flex-start; padding-inline: var(--page-gutter); }
  .nav-back { position: static; margin-left: -12px; margin-right: 8px; }
  .content { padding-bottom: 32px; }
  .tab-bar {
    top: 0;
    bottom: auto;
    left: auto;
    right: max(var(--page-gutter), calc((100% - var(--app-max-width)) / 2 + var(--page-gutter)));
    transform: none;
    width: auto;
    height: 72px;
    padding: 12px 0;
    border: 0;
    gap: 8px;
  }
  .tab-item { min-width: 96px; padding: 0 16px; border-radius: 5px; }
  .tab-item.active { background: var(--primary-bg); }
  .tab-icon { width: 20px; height: 20px; }
  .fab { bottom: 32px; width: auto; gap: 8px; padding: 0 20px; }
  .fab svg { width: 22px; height: 22px; }
  .fab-label { display: inline; font-weight: 600; }
  .form-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 24px; }
  .form-submitter { grid-column: 1; grid-row: 1; }
  .form-shaft { grid-column: 2; grid-row: 1 / span 2; }
  .form-project { grid-column: 1; grid-row: 2; }
  .report-grid, .detail-layout, .settings-layout { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Direct form: focus on filling in and taking the report away. */
.vi-masthead { min-height: 56px; padding-right: var(--page-gutter); }
.text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; border: 0; background: transparent; color: var(--primary); font: inherit; cursor: pointer; text-decoration: none; }
.text-button:disabled { color: var(--text-light); cursor: wait; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.nav-bar { top: 0; padding: 12px 56px; }
.nav-back { border: 0; background: transparent; font-size: 28px; }
.nav-title { font-size: 17px; }
.content { padding-bottom: 24px; }
.form-content { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
.form-intro { margin: 18px var(--page-gutter) 20px; }
.form-intro p { font-size: 14px; color: var(--text); }
.form-intro > span { display: block; margin-top: 6px; color: var(--text-secondary); font-size: 12px; }
.form-layout { gap: 16px; }
.form-section { border-radius: 10px; }
.form-section-title { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 15px; color: var(--text); }
.section-number { color: var(--primary); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.section-unit { margin-left: auto; color: var(--text-secondary); font-size: 11px; font-weight: 400; }
.form-section-body { padding: 18px 16px; }
.input-label { color: var(--text); font-size: 13px; }
.input-group { scroll-margin-top: 128px; }
.input-field { min-height: 48px; border-radius: 6px; padding-inline: 12px; line-height: 1.5; font-family: inherit; }
.input-field::placeholder { color: #7b8798; opacity: 1; }
.input-hint { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.input-hint:empty { display: none; }
.input-field.valid { border-color: #9eb8a8; }
.input-hint.error { color: #b52b32; }
.input-field.error { border-color: #c83c43; }
.section-note { color: var(--text-secondary); font-size: 12px; }
.form-row { flex-direction: row; gap: 12px; margin-bottom: 18px; }
.form-optional { margin-top: 4px; border-top: 1px solid var(--border); }
.form-optional summary { min-height: 48px; padding-block: 13px; color: var(--primary); font-size: 13px; cursor: pointer; }
.form-optional summary > span { float: right; color: var(--text-secondary); font-size: 12px; }
.optional-body { padding-top: 8px; }
.optional-body textarea { min-height: 104px; }
.optional-body > .input-group:last-child { margin-bottom: 0; }
.tag-select-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tag-option { min-height: 48px; font-family: inherit; font-size: 14px; border-radius: 6px; transition: background-color .15s, border-color .15s; }
.tag-option.active { box-shadow: inset 0 0 0 1px var(--primary); }
.tag-select-group.error .tag-option { border-color: #c83c43; }
.floor-info-display { margin-top: -8px; margin-bottom: 18px; }
.form-toolbar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 110; background: #fff; border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); }
.form-toolbar-inner { max-width: var(--app-max-width); margin-inline: auto; padding: 10px var(--page-gutter) 12px; }
.form-save-status { display: block; min-height: 18px; margin-bottom: 8px; color: var(--text-secondary); font-size: 11px; }
.form-toolbar .form-actions { padding: 0; display: grid; grid-template-columns: minmax(88px, 1fr) minmax(0, 2fr); gap: 10px; }
.form-toolbar .btn { min-height: 48px; font-size: 15px; }
.form-toolbar .btn-light { background: var(--bg); color: var(--text-secondary); }
.records-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px var(--page-gutter); color: var(--text-secondary); font-size: 13px; }
.forward-page { max-width: 800px; padding-top: 12px; }
.forward-success { padding: 16px 0 12px; }
.forward-success-icon { margin-bottom: 12px; }
.forward-success-text { font-size: 20px; }
.forward-success-sub { font-size: 12px; }
.download-status { margin: 0 0 20px; color: var(--text-secondary); text-align: center; line-height: 1.7; font-size: 13px; overflow-wrap: anywhere; }
.download-started { padding: 12px; border-radius: 6px; background: var(--primary-bg); color: var(--primary); }
.download-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.forward-btn { min-width: 0; min-height: 136px; padding: 18px 10px; border-radius: 8px; transition: opacity .15s, transform .15s; font-family: inherit; }
.forward-btn:disabled { cursor: wait; opacity: .5; }
.download-format { margin-bottom: 10px; font-size: 24px; font-weight: 600; letter-spacing: .04em; }
.forward-btn-text { font-size: 16px; }
.forward-btn-sub { font-size: 11px; }
.download-mobile-hint { margin: 16px 0 20px; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.forward-preview { margin-top: 0; border-radius: 8px; cursor: default; }
.forward-preview > img { border-radius: 0; -webkit-touch-callout: default; }
.forward-preview-label { position: static; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--border); background: #fff; color: var(--primary); font-size: 13px; cursor: pointer; }
.download-secondary { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.download-secondary .text-button { font-size: 13px; }
.generation-mark { font-size: 28px; line-height: 1; }
.generation-placeholder { min-height: 240px; padding: 28px 24px; color: var(--text-secondary); text-align: center; background: #fff; }
.generation-placeholder p { margin-top: 16px; font-size: 13px; }
.generation-placeholder .btn { margin-top: 16px; }
.generation-line { height: 24px; margin-bottom: 16px; background: #eef1f5; border-radius: 3px; }
.generation-line:nth-child(2) { height: 80px; }
.generation-line:nth-child(3) { width: 65%; }
.clear-submitter-option { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; text-align: left; cursor: pointer; }
.clear-submitter-option input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--primary); }
.btn:active, .tag-option:active, .text-button:active { transform: scale(.98); }

@media (max-width: 359px) {
  .form-row:not(.dimension-row) { flex-direction: column; gap: 18px; }
  .forward-btn-sub { font-size: 10px; }
  .form-toolbar .btn { font-size: 14px; }
}
@media (min-width: 768px) {
  .vi-masthead { min-height: 64px; }
  .form-intro { margin-block: 24px; }
  .form-section-body { padding: 20px; }
  .form-section-title { padding-inline: 20px; }
  .forward-page { padding-top: 28px; }
  .download-actions { gap: 16px; }
  .form-toolbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
  .form-save-status { margin: 0; font-size: 12px; }
  .form-toolbar .form-actions { width: 400px; }
}
@media (min-width: 1024px) {
  .nav-bar { top: 64px; justify-content: center; }
  .nav-back { position: absolute; margin: 0; }
  .form-layout { gap: 20px; }
  .form-submitter { grid-row: 1; }
  .form-project { grid-row: 2; }
  .form-shaft { grid-row: 1 / span 2; }
}