html[data-screen="principles-flow"], html[data-screen="principles-flow"] body, html[data-screen="principles-flow"] #app { min-height: 100%; margin: 0; }
html[data-screen="principles-flow"] body { overflow: hidden; }
.principles-app .insight-sidebar .is-placeholder { opacity: .72; }
.principles-write-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); gap: 22px; align-items: start; }
.principles-guidance { display: grid; gap: 16px; padding: 22px; }
.principles-guidance > span { color: var(--insight-accent); font-size: 10px; }
.principles-guidance h2 { margin: -4px 0 0; font-size: 19px; }
.principles-guidance p { margin: 0; color: var(--insight-muted); font-size: 12px; line-height: 1.75; }
.principles-save-warning { margin: 14px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--insight-coral) 48%, transparent); border-radius: 6px; color: var(--insight-coral); background: color-mix(in srgb, var(--insight-coral) 10%, transparent); font-size: 12px; line-height: 1.6; }
.principles-guidance ul { display: grid; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.principles-guidance li { position: relative; padding-left: 20px; color: var(--insight-muted); font-size: 12px; line-height: 1.55; }
.principles-guidance li::before { content: ""; position: absolute; top: 7px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--insight-green); }
.principles-ai-badge { padding: 11px 12px; border: 1px solid var(--insight-line); border-radius: 6px; color: var(--insight-coral); background: var(--insight-input); font-size: 11px; }
.principles-review-grid { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(420px, 1.35fr) minmax(220px, .65fr); gap: 18px; align-items: start; }
.principles-review-form { padding: 22px; }
.principles-review-form .insight-field textarea { min-height: 82px; }
.principles-review-form > .insight-field textarea { min-height: 92px; }
.principles-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.principles-result-grid .insight-field { margin: 0; }
.principles-result-field textarea { min-height: 118px !important; }
.principles-experiment { margin-top: 18px !important; }
.principles-saved-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr) minmax(220px, .6fr); gap: 18px; align-items: start; }
.principles-saved-record, .principles-saved-breakdown { padding: 24px; }
.principles-saved-record > span, .principles-saved-breakdown > span { color: var(--insight-accent); font-size: 10px; }
.principles-saved-record h2 { margin: 10px 0 16px; font-size: 22px; line-height: 1.4; overflow-wrap: anywhere; }
.principles-saved-section { padding: 14px 0; border-top: 1px solid var(--insight-line); }
.principles-saved-section > span { color: var(--insight-faint); font-size: 10px; }
.principles-saved-section p { margin: 6px 0 0; color: var(--insight-muted); font-size: 12px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.principles-saved-breakdown .principles-saved-section:first-of-type { margin-top: 8px; }
.principles-library-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .principles-review-grid { grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.25fr); } .principles-review-grid .insight-checklist { grid-column: 1 / -1; } .principles-saved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .principles-saved-grid .insight-result-panel { grid-column: 1 / -1; } }
@media (max-width: 820px) { html[data-screen="principles-flow"] body { overflow: auto; } .principles-write-grid, .principles-review-grid, .principles-saved-grid { grid-template-columns: 1fr; } .principles-review-grid .insight-checklist, .principles-saved-grid .insight-result-panel { grid-column: auto; } }
@media (max-width: 520px) { .principles-result-grid, .principles-library-list { grid-template-columns: 1fr; } .principles-guidance, .principles-review-form, .principles-saved-record, .principles-saved-breakdown { padding: 18px; } .principles-review-form .insight-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .principles-review-form .insight-form-actions .is-primary { grid-column: 1 / -1; } }