.writer-body { min-height: 100vh; background: #eef3f1; }
.writer-main { width: min(1440px, calc(100% - 48px)); margin: 30px auto 54px; }
.writer-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 22px; }
.writer-intro h2 { font-size: clamp(28px, 4vw, 44px); }
.writer-intro > p { max-width: 370px; margin: 0 0 3px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.writer-workspace { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) minmax(210px, 250px); align-items: stretch; min-height: 670px; background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--blue); box-shadow: 0 16px 35px rgba(25, 49, 65, .07); }
.briefing-panel, .draft-panel, .writer-rules { min-width: 0; }
.briefing-panel { display: flex; flex-direction: column; gap: 16px; padding: 22px; background: #f8fbfc; border-right: 1px solid var(--line); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading .eyebrow { margin: 0; color: var(--blue-deep); }
.panel-index { color: var(--orange); font: 11px var(--mono); }
.field { display: grid; gap: 7px; color: var(--blue-deep); font-size: 12px; font-weight: 700; }
.field > span { display: block; }
.field input, .field textarea, .field select { width: 100%; color: var(--ink); background: #fff; border: 1px solid #cbd8de; border-radius: 3px; outline: none; font: 400 13px/1.55 var(--sans); }
.field input, .field select { min-height: 38px; padding: 8px 9px; }
.field textarea { resize: vertical; padding: 10px 11px; }
.field textarea::placeholder, .field input::placeholder { color: #8797a2; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10, 103, 180, .1); }
.field-topic textarea { min-height: 124px; }
.field-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.create-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.create-details summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; color: var(--blue-deep); cursor: pointer; font-size: 12px; font-weight: 700; }
.create-details summary small { color: var(--muted); font: 10px var(--mono); }
.create-details-grid { display: grid; gap: 12px; padding: 0 0 14px; }
.field-reference { grid-column: 1 / -1; }
.writer-primary { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; color: #fff; background: var(--blue); border: 0; border-radius: 4px; font-size: 13px; font-weight: 700; }
.writer-primary:hover:not(:disabled) { background: var(--blue-deep); }
.writer-primary:disabled { cursor: not-allowed; opacity: .52; }
.writer-primary svg { width: 17px; height: 17px; }
.briefing-note { margin: -7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.draft-panel { display: flex; flex-direction: column; min-height: 0; background: #fff; }
.draft-heading { min-height: 82px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.draft-heading h3 { margin: 4px 0 0; color: var(--blue-deep); font-size: 18px; line-height: 1.35; }
.draft-tools { display: flex; align-items: center; gap: 6px; }
.writer-icon-button { flex: 0 0 auto; width: 34px; height: 34px; }
.writer-icon-button svg { width: 16px; height: 16px; }
.stream-state { max-width: 125px; overflow: hidden; color: var(--muted); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.stream-state[data-state="streaming"] { color: #a36100; }
.stream-state[data-state="done"] { color: var(--green); }
.stream-state[data-state="error"] { color: var(--red); }
.stream-progress { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 22px; color: #8a5c11; background: #fff8e9; border-bottom: 1px solid #f2e3c2; font-size: 12px; }
.stream-progress time { margin-left: auto; color: #805a1b; font: 11px var(--mono); }
.stream-pulse { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; animation: writer-pulse 1.2s infinite; }
@keyframes writer-pulse { 50% { opacity: .35; transform: scale(.7); } }
.draft-scroll { flex: 1; min-height: 360px; overflow: auto; scroll-behavior: smooth; }
.draft-output { min-height: 100%; margin: 0; padding: 30px clamp(20px, 4vw, 50px) 46px; color: #253a48; background: #fff; font: 400 15px/2 var(--sans); letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.draft-output.is-placeholder { display: grid; place-items: center; color: #82929b; text-align: center; }
.revision-composer { display: grid; gap: 10px; padding: 16px 22px 18px; background: #f8fbfc; border-top: 1px solid var(--line); }
.revision-composer textarea { width: 100%; min-height: 72px; resize: vertical; padding: 10px 11px; color: var(--ink); background: #fff; border: 1px solid #cbd8de; border-radius: 3px; outline: none; font: 400 13px/1.55 var(--sans); }
.revision-composer textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10, 103, 180, .1); }
.revision-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.revision-actions > p { margin: 0; color: var(--muted); font-size: 11px; }
.revision-actions > div { display: flex; align-items: center; gap: 8px; }
.writer-primary.compact { min-height: 36px; padding: 0 12px; }
.stop-button:hover:not(:disabled) { color: var(--red); border-color: #e9c5c2; }
.writer-rules { display: flex; flex-direction: column; padding: 22px 18px; background: #f0f7fb; border-left: 1px solid var(--line); }
.writer-rules ol { display: grid; gap: 0; margin: 15px 0; padding: 0; list-style: none; }
.writer-rules li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 11px 0; color: #304858; border-bottom: 1px solid #d9e8ee; font-size: 12px; line-height: 1.55; }
.writer-rules li span { color: var(--orange); font: 10px var(--mono); }
.rule-footer { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 14px; color: #527184; border-top: 2px solid #aac7d8; font-size: 11px; line-height: 1.6; }
.rule-footer svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1060px) { .writer-workspace { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }.writer-rules { grid-column: 1 / -1; display: grid; grid-template-columns: 150px 1fr 250px; gap: 20px; align-items: start; border-top: 1px solid var(--line); border-left: 0; }.writer-rules ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin: 0; }.writer-rules li { padding-top: 0; }.rule-footer { margin: 0; padding-top: 0; border-top: 0; } }
@media (max-width: 760px) { .writer-main { width: min(100% - 28px, 1440px); margin-top: 20px; }.writer-intro { align-items: flex-start; flex-direction: column; gap: 10px; }.writer-workspace { display: block; min-height: 0; }.briefing-panel { border-right: 0; border-bottom: 1px solid var(--line); }.draft-panel { min-height: 620px; }.writer-rules { display: block; }.writer-rules ol { grid-template-columns: 1fr; margin: 15px 0; }.rule-footer { margin-top: 12px; padding-top: 14px; border-top: 2px solid #aac7d8; }.draft-heading { padding: 16px; }.stream-progress { padding: 0 16px; }.draft-output { padding: 24px 18px 34px; font-size: 14px; line-height: 1.9; }.revision-composer { padding: 14px 16px 16px; }.revision-actions { align-items: flex-end; flex-direction: column; }.revision-actions > p { align-self: flex-start; } }
@media (max-width: 460px) { .writer-topbar { align-items: flex-start; flex-wrap: wrap; gap: 12px; }.writer-topbar .app-nav { order: 3; width: 100%; }.draft-tools { gap: 3px; }.stream-state { display: none; }.writer-primary.compact { padding: 0 10px; }.revision-actions > div { width: 100%; }.revision-actions .writer-primary { flex: 1; } }