body { min-width: 1100px; }
main { height: calc(100dvh - 80px); max-width: 1900px; margin: 0 auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; }
main > .heading { flex-shrink: 0; }
h1, #notice { margin: 0; } h1 { font-size: 24px; }
.task-picker { width: 65%; display: flex; gap: 14px; align-items: center; margin: 0; }
.task-picker select { flex: 1; margin: 0; min-width: 0; }
.trial-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(420px, 1fr); gap: 16px; }
.trial-workspace > section { margin: 0; min-height: 0; }
.trial-canvas { overflow: auto; }
.trial-controls { padding: 0; overflow: hidden; }
.trial-controls form { height: 100%; display: flex; flex-direction: column; }
.trial-scroll { flex: 1; min-height: 0; overflow: auto; padding: 20px; overscroll-behavior: contain; }
.trial-actions { flex-shrink: 0; display: flex; gap: 12px; padding: 14px 20px; border-top: 1px solid #ccd8d2; background: #f3f6ee; }
.trial-actions button { flex: 1; }
.outline-card { padding: 14px; margin: 12px 0; border: 1px solid #cadbd6; border-radius: 8px; }
.outline-card h3 { margin-bottom: 8px; }
.ai-adviser { margin: 20px 0; padding: 16px; background: #f3f7f5; border: 1px solid #cadbd6; border-radius: 8px; }
.ai-adviser h2 { margin-top: 0; }
.trial-svg { width: 100%; height: 290px; border: 1px solid #ccd9d3; background: #fafbf7; display: block; }
.layout-svg { height: 500px; }
.trial-before { fill: none; stroke: #8b9699; stroke-dasharray: 5 4; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.trial-after { fill: #25878422; stroke: #257b78; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.trial-cloth { fill: #edf1e7; stroke: #85978c; vector-effect: non-scaling-stroke; }
.trial-label { fill: #243d4c; font: 12px system-ui; }
.trial-watermark { font-weight: 700; color: #955c25; }
@media (max-height: 720px) { main { gap: 5px; padding-top: 8px; } #notice { padding: 6px 12px; } }