:root {
	--r5-brand: #0f172a;
	--r5-accent: #2563eb;
	--r5-bg: #f6f8fb;
	--r5-text: #1f2937;
	--r5-muted: #6b7280;
	--r5-card: #fff;
	--r5-line: #e5e7eb;
	--r5-theme-preview: #1a73e8;
}
.r5-body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--r5-bg); color: var(--r5-text); }
.r5-header { background: var(--r5-brand); color: #fff; }
.r5-header__inner { max-width: 1320px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
.r5-logo { color: #fff; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.r5-logo__img { height: 32px; width: auto; display: block; background: #fff; padding: 3px 6px; border-radius: 6px; box-sizing: content-box; }
.r5-logo__suffix { font-size: 13px; font-weight: 500; color: #cbd5e1; letter-spacing: .04em; }
.r5-nav a { color: #cbd5e1; margin-left: 16px; text-decoration: none; }
.r5-main { max-width: 1320px; margin: 0 auto; padding: 24px 20px 48px; }
.r5-footer { text-align: center; color: var(--r5-muted); font-size: 13px; padding: 24px; }
.r5-hero h1 { margin: 0 0 8px; }
.r5-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 20px 0; padding: 16px; background: var(--r5-card); border: 1px solid var(--r5-line); border-radius: 12px; }
.r5-filters label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--r5-muted); }
.r5-filters select, .r5-filters button, .r5-btn, .r5-open-fs, .r5-fs__close { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--r5-line); background: #fff; cursor: pointer; }
.r5-filters button, .r5-btn, .r5-open-fs, .r5-fs__close { background: var(--r5-accent); color: #fff; border-color: transparent; text-decoration: none; display: inline-block; }
.r5-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.r5-card { background: var(--r5-card); border: 1px solid var(--r5-line); border-radius: 12px; overflow: hidden; }
.r5-card a { color: inherit; text-decoration: none; display: block; padding: 0 0 14px; }
.r5-card__cover { height: 240px; background: linear-gradient(135deg, #1e293b, #64748b); background-size: cover; background-position: center; }
.r5-card h2 { font-size: 18px; margin: 12px 14px 6px; }
.r5-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 14px; padding: 0; }
.r5-tags span { font-size: 12px; background: #eff6ff; color: #1d4ed8; padding: 2px 8px; border-radius: 999px; }
.r5-summary { margin: 8px 14px 0; color: var(--r5-muted); font-size: 14px; }
.r5-result-bar { margin: 0 0 16px; color: var(--r5-muted, #6b7280); font-size: 14px; }
.r5-clear-filter { margin-left: 8px; color: var(--r5-accent, #2563eb); }
.r5-empty { background: var(--r5-card); border: 1px dashed var(--r5-line); border-radius: 12px; padding: 32px; text-align: center; }
.r5-muted { color: var(--r5-muted); }
.r5-detail__head h1 { margin-top: 0; }
.r5-meta { color: var(--r5-muted); padding-left: 18px; }
.r5-preview-panel { margin: 24px 0; background: var(--r5-card); border: 1px solid var(--r5-line); border-radius: 12px; padding: 16px; }
.r5-preview-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.r5-toolbar-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.r5-device-switch button { margin-right: 6px; margin-bottom: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--r5-line); background: #fff; cursor: pointer; }
.r5-device-switch button.is-active { background: var(--r5-brand); color: #fff; border-color: transparent; }
.r5-picker { font-size: 13px; color: var(--r5-muted); display: inline-flex; align-items: center; gap: 6px; }
.r5-picker input[type="color"] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--r5-line); background: #fff; cursor: pointer; }
.r5-picker input[type="text"] { width: 88px; padding: 6px 8px; }
.r5-hex-msg { color: #b91c1c; font-size: 13px; }
.r5-color-hint { font-size: 12px; color: var(--r5-muted); margin: 0 0 8px; }
.r5-preview-status { font-size: 13px; color: var(--r5-muted); word-break: break-all; }
.r5-viewport-scroll, .r5-fs__scroll { overflow-x: hidden; overflow-y: auto; width: 100%; max-width: 100%; box-sizing: border-box; padding: 12px 0; background: #eef2f7; border-radius: 10px; }
.r5-scale-slot { position: relative; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.r5-device-frame { position: absolute; top: 0; left: 0; border: 1px solid #94a3b8; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.08); transform-origin: top left; will-change: transform; flex-shrink: 0; min-width: 0; box-sizing: border-box; }
.r5-device-frame.is-desktop { width: 1920px; }
.r5-device-frame.is-tablet { width: 768px; }
.r5-device-frame.is-mobile { width: 425px; }
.r5-frame-stage { position: relative; width: 100%; overflow: hidden; }
.r5-iframe { width: 100%; height: 900px; border: 0; display: block; background: #f8fafc; overflow-x: hidden; }
.r5-device-frame.is-desktop .r5-iframe { height: 1080px; }
.r5-device-frame.is-tablet .r5-iframe { height: 1024px; }
.r5-device-frame.is-mobile .r5-iframe { height: 812px; }
.r5-theme-tint { display: none !important; } /* P0: no full-page hue; color via guest proxy targeted CSS */
.r5-checklist table { width: 100%; border-collapse: collapse; background: #fff; }
.r5-checklist th, .r5-checklist td { border: 1px solid var(--r5-line); padding: 8px; text-align: left; font-size: 14px; }
.r5-export { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

.r5-fs[hidden] { display: none !important; }
.r5-fs { position: fixed; inset: 0; z-index: 100000; background: #0b1220; display: flex; flex-direction: column; }
.r5-fs__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 16px; background: #111827; color: #e5e7eb; }
.r5-fs__scroll { flex: 1; overflow: auto; padding: 12px; }
.r5-fs__hint { margin: 0; padding: 8px 16px 12px; color: #94a3b8; font-size: 12px; text-align: center; }
.r5-fs .r5-device-switch button { background: #1f2937; color: #e5e7eb; border-color: #334155; }
.r5-fs .r5-device-switch button.is-active { background: #e5e7eb; color: #111827; }

.r5-share-gate { max-width: 520px; margin: 32px auto; background: #fff; border: 1px solid var(--r5-line, #e5e7eb); border-radius: 12px; padding: 24px; }
.r5-share-gate h1 { margin-top: 0; font-size: 24px; }
.r5-share-gate label { display: block; margin: 14px 0; font-size: 14px; color: var(--r5-muted, #6b7280); }
.r5-share-gate input[type="password"] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--r5-line, #e5e7eb); border-radius: 8px; }
.r5-share-gate__error { color: #b91c1c; font-size: 14px; }
.r5-share-gate .r5-btn { display: inline-block; margin-top: 6px; }

@media (max-width: 1024px) {
	.r5-grid { grid-template-columns: repeat(2, 1fr); }
	.r5-iframe { height: 720px; }
}
@media (max-width: 767px) {
	.r5-grid { grid-template-columns: 1fr; }
	.r5-iframe { height: 640px; }
	.r5-main { padding: 16px 12px 32px; }
	.r5-logo { gap: 8px; }
	.r5-logo__img { height: 28px; }
	.r5-logo__suffix { font-size: 12px; }
	.r5-lang-switch { width: 100%; }
	.r5-lang-switch select { max-width: none; }
	.r5-preview-toolbar { align-items: stretch; }
	.r5-toolbar-right { width: 100%; justify-content: flex-start; }
	.r5-palette { width: 100%; }
	.r5-palette__edit { gap: 6px; }
	.r5-picker input[type="text"] { width: 82px; }
	.r5-open-fs { align-self: flex-start; }
	.r5-device-switch button { padding: 6px 8px; }
	.r5-fs__bar { align-items: flex-start; }
	.r5-fs .r5-palette--fs { width: 100%; }
	.r5-swatch { width: 24px; height: 24px; }
}
.r5-guest-hint,.r5-color-hint{font-size:13px;color:#5f6368;margin:8px 0}

/* 确认换色：与「全屏预览」同尺寸/圆角，黑字白底 */
.r5-apply-color {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff !important;
	color: #111 !important;
	border: 1px solid #111 !important;
	cursor: pointer;
	font: inherit;
	line-height: inherit;
	text-decoration: none;
	box-sizing: border-box;
}
.r5-apply-color:hover,
.r5-apply-color:focus-visible {
	background: #f5f5f5 !important;
	color: #111 !important;
	border-color: #111 !important;
}

/* 预览模式按钮 */
.r5-mode-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.r5-mode-btn { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--r5-line); background: #fff; cursor: pointer; color: #111; }
.r5-mode-btn.is-active { background: var(--r5-brand); color: #fff; border-color: transparent; }
.r5-mode-btn:disabled { opacity: .5; cursor: not-allowed; }
.r5-mode-msg { font-size: 13px; color: var(--r5-muted); }
.r5-empty--preview { margin: 24px; }

.r5-checklist-sheet { margin: 16px 0 24px; }
.r5-checklist-sheet h3 { margin: 0 0 8px; font-size: 16px; }
.r5-checklist-scroll { overflow-x: auto; max-width: 100%; }
.r5-checklist-sheet table { min-width: 640px; }
.r5-mode-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.r5-mode-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--r5-line); background: #fff; cursor: pointer; }
.r5-mode-btn.is-active { background: #111; color: #fff; border-color: transparent; }
.r5-mode-msg { font-size: 13px; color: var(--r5-muted); }

/* FR-16 / AC-25 checklist PDF attachment */
.r5-checklist-pdf { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--r5-line, #e5e7eb); border-radius: 8px; background: #fafafa; }
.r5-checklist-pdf h3 { margin: 0 0 8px; font-size: 16px; }
.r5-checklist-pdf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.r5-checklist-pdf__name { color: #6b7280; font-size: 13px; }
.r5-checklist-pdf__frame-wrap { width: 100%; max-width: 100%; height: 480px; border: 1px solid var(--r5-line, #e5e7eb); border-radius: 6px; overflow: hidden; background: #fff; }
.r5-checklist-pdf__frame { width: 100%; height: 100%; border: 0; }
.r5-btn--ghost { background: #fff; color: inherit; border: 1px solid var(--r5-line, #d1d5db); }

/* AC-28 front palette: primary + confirm only (no multi-style / secondary / presets) */
.r5-palette { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.r5-palette__label { font-size: 13px; color: var(--r5-muted, #6b7280); }
.r5-palette__edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.r5-palette__hint { margin: 0; font-size: 12px; color: var(--r5-muted, #9ca3af); }
.r5-palette--fs { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.r5-toolbar-right { align-items: flex-start; }

.r5-lang-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.r5-lang-switch__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--r5-muted, #6b7280); }
.r5-lang-switch select { max-width: 120px; padding: 6px 8px; border: 1px solid var(--r5-line, #e5e7eb); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; color: var(--r5-text, #1f2937); }
.r5-lang-msg { font-size: 12px; color: var(--r5-muted, #6b7280); }
.r5-lang-switch select:disabled { opacity: .55; cursor: not-allowed; }
.r5-fs .r5-lang-switch__label { color: #cbd5e1; }
.r5-fs .r5-lang-switch select { background: #1f2937; color: #e5e7eb; border-color: #334155; }
.r5-fs .r5-lang-msg { color: #94a3b8; }
.r5-swatch-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.r5-swatch-group[hidden] { display: none !important; }
.r5-swatch-group--fs .r5-swatch-label { color: #cbd5e1; }
.r5-swatch-label { font-size: 12px; color: var(--r5-muted, #6b7280); }
.r5-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.r5-swatch {
	width: 22px; height: 22px; padding: 0; border-radius: 50%;
	border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.r5-swatch:hover { transform: scale(1.12); }
.r5-swatch:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.r5-swatch.is-active { box-shadow: 0 0 0 2px #111; }
.r5-fs .r5-swatch { border-color: #111827; }
.r5-fs .r5-swatch.is-active { box-shadow: 0 0 0 2px #fff; }
.r5-detail__summary { margin: 8px 0 0; color: var(--r5-muted, #6b7280); }
.r5-module-notes { margin: 16px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--r5-line, #e5e7eb); border-radius: 10px; }
.r5-module-notes h2 { font-size: 16px; margin: 0 0 8px; }
.r5-module-notes ul { margin: 0; padding-left: 18px; color: var(--r5-muted, #6b7280); }
.r5-module-notes li { margin: 4px 0; }
.r5-module-notes strong { color: var(--r5-text, #1f2937); }
.r5-checklist-empty { padding: 16px; border: 1px dashed var(--r5-line, #e5e7eb); border-radius: 8px; color: var(--r5-muted, #6b7280); background: #fafafa; }
.r5-checklist-note { margin: 0 0 12px; padding: 8px 10px; background: #f8fafc; border-left: 3px solid var(--r5-accent, #2563eb); color: var(--r5-muted, #6b7280); font-size: 13px; }

.r5-mod-bar[hidden], .r5-mod-draft[hidden], .r5-mod-dialog[hidden] { display: none !important; }
.r5-mod-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.r5-mod-draft { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.r5-mod-draft input, .r5-mod-dialog input[type="text"] { width: 140px; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--r5-line); border-radius: 6px; }
.r5-mod-msg { margin: 0; color: var(--r5-muted); font-size: 12px; }
.r5-mod-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--r5-line); background: #fff; cursor: pointer; color: #111; }
.r5-mod-btn.is-active, .r5-mod-btn--primary { background: var(--r5-brand); color: #fff; border-color: transparent; }
.r5-mod-btn:disabled { opacity: .5; cursor: not-allowed; }
.r5-mod-draft { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.r5-mod-empty { color: var(--r5-muted); font-size: 13px; }
.r5-mod-dialog[hidden] { display: none !important; }
.r5-mod-dialog { position: fixed; inset: 0; z-index: 100001; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.r5-mod-dialog__card { width: min(480px, 100%); background: #fff; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.r5-mod-dialog__card img { max-width: 100%; max-height: 180px; object-fit: contain; background: #f8fafc; }
.r5-mod-dialog__url { margin: 0; font-size: 12px; color: var(--r5-muted); word-break: break-all; }
.r5-mod-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; }