.playbook-workspace { max-width: 1260px; padding-bottom: 70px; }
.playbook-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(28px,5vw,55px); border: 1px solid #243556; border-radius: 21px; color: #fff; background: radial-gradient(circle at 85% 8%, rgba(92,150,255,.28), transparent 30%), linear-gradient(135deg,#111c34,#15333e); }.playbook-kicker { color: var(--accent); font-size: .68rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }.playbook-hero .playbook-kicker { color: #79b7ff; }.playbook-hero h1 { max-width: 780px; margin: 13px 0 0; font-size: clamp(2.25rem,5vw,4.45rem); line-height: .98; letter-spacing: -.045em; }.playbook-hero p { max-width: 690px; margin: 19px 0 0; color: rgba(255,255,255,.7); line-height: 1.65; }.playbook-hero__badge { display: flex; flex: 0 0 auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.06); font-size: .75rem; line-height: 1.45; }.playbook-hero__badge span { color: #7dd8aa; font-size: 1.4rem; }
.playbook-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: 16px; margin-top: 18px; }.playbook-brief,.playbook-output-panel { padding: 24px; }.playbook-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 23px; }.playbook-panel-heading h2 { margin: 8px 0 0; font-size: 1.35rem; }.playbook-step,.playbook-source { padding: 5px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .64rem; font-weight: 750; }.playbook-source { color: var(--accent); }.playbook-brief .field { margin-bottom: 15px; }.playbook-brief .field label { font-size: .78rem; font-weight: 750; }.playbook-brief select,.playbook-brief textarea { width: 100%; border-radius: 10px; }.field-help { display: block; margin-top: 6px; color: var(--muted-2); font-size: .68rem; line-height: 1.4; }.playbook-generate { width: 100%; justify-content: center; gap: 10px; margin-top: 3px; }.playbook-brief .notice { margin-top: 12px; font-size: .72rem; line-height: 1.45; }.playbook-empty { display: grid; justify-items: center; min-height: 390px; align-content: center; padding: 30px; border: 1px dashed var(--border-strong); border-radius: 14px; text-align: center; }.playbook-empty[hidden],#playbookResult[hidden] { display: none; }.playbook-empty__icon { display: grid; width: 47px; height: 47px; place-items: center; border-radius: 14px; background: color-mix(in srgb,var(--accent) 11%,transparent); color: var(--accent); font-size: 1.4rem; }.playbook-empty h3 { margin: 17px 0 7px; font-size: 1.08rem; }.playbook-empty p { max-width: 380px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }.playbook-summary { padding: 16px; border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); border-radius: 12px; background: color-mix(in srgb,var(--accent) 6%,var(--surface)); color: var(--text); font-size: .84rem; line-height: 1.6; white-space: pre-wrap; }.playbook-result-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }.playbook-result-grid article { padding: 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }.playbook-result-label { color: var(--muted-2); font-size: .62rem; font-weight: 850; letter-spacing: .1em; }.playbook-result-grid h3 { margin: 8px 0 5px; font-size: .93rem; }.playbook-result-grid p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }.playbook-output-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }.playbook-output-actions .btn { font-size: .76rem; }.playbook-principles { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; align-items: center; margin-top: 18px; padding: 25px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); }.playbook-principles h2 { max-width: 460px; margin: 8px 0 0; font-size: 1.45rem; line-height: 1.08; letter-spacing: -.025em; }.playbook-principles__items { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.playbook-principles__items span { color: var(--muted); font-size: .74rem; line-height: 1.5; }.playbook-principles__items b { display: block; margin-bottom: 4px; color: var(--text); font-size: .78rem; }
@media (max-width: 900px) { .playbook-hero { align-items: flex-start; flex-direction: column; }.playbook-hero__badge { align-self: flex-start; }.playbook-layout,.playbook-principles { grid-template-columns: 1fr; }.playbook-principles__items { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 580px) { .playbook-hero,.playbook-brief,.playbook-output-panel,.playbook-principles { padding: 19px; }.playbook-hero h1 { font-size: 2.5rem; }.playbook-result-grid,.playbook-principles__items { grid-template-columns: 1fr; }.playbook-output-actions .btn { width: 100%; justify-content: center; } }