:root { color-scheme: light; }
.ai-planner-page { --brand: #e21413; --brand-dark: #c90f10; min-width: 320px; background: #fafafa; color: var(--text); }.planner-topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 clamp(22px,5vw,72px); border-bottom: 1px solid var(--border); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }.planner-brand, .planner-back { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; font-weight: 700; }.planner-brand > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: var(--brand); color: #fff; font-size: 12px; }.planner-back { color: var(--text-3); font-size: 13px; }.planner-back:hover { color: var(--brand); }.planner-back svg { width: 16px; }.planner-main { width: min(1180px,calc(100% - 48px)); margin: 0 auto; padding: 72px 0 96px; }.planner-hero { max-width: 790px; }.planner-hero h1 { margin: 8px 0 16px; font-size: clamp(40px,5vw,64px); line-height: 1; letter-spacing: -.055em; }.planner-hero h1 span { color: var(--brand); }.planner-hero > p { margin: 0; color: var(--text-3); font-size: 17px; line-height: 1.8; }.planner-foundations { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; color: var(--text-3); font-size: 12px; font-weight: 700; }.planner-foundations span { padding: 7px 10px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }.planner-foundations i { color: var(--brand); font-style: normal; }.planner-prompt-card { margin-top: 36px; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(31,32,38,.05); }.planner-prompt-card > label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 800; }.planner-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }.planner-input-row textarea { width: 100%; min-height: 56px; resize: vertical; padding: 16px; border: 1px solid var(--border); border-radius: 8px; outline: 0; color: var(--text); background: #fff; font: inherit; line-height: 1.5; }.planner-input-row textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(226,20,19,.08); }.planner-primary { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; gap: 7px; min-width: 132px; border: 0; border-radius: 4px; background: linear-gradient(148.66deg,#f96766 0%,#e21413 100%); color: #fff; font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 8px 18px rgba(226,20,19,.14); }.planner-primary svg { width: 17px; }.planner-primary:disabled { opacity: .62; cursor: wait; }.planner-prompt-card > p { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; color: var(--text-4); font-size: 12px; }.planner-prompt-card > p svg { width: 14px; color: var(--brand); }.planner-result, .planner-architecture, .planner-pages { margin-top: 72px; }.planner-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }.planner-section-head h2 { margin: 3px 0 0; font-size: 27px; letter-spacing: -.035em; }.planner-section-head > span, .planner-section-head > p { margin: 0; color: var(--text-4); font-size: 12px; }.planner-overview-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 16px; }.planner-summary, .planner-delivery { padding: 26px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }.planner-summary > span, .planner-delivery > span { color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .12em; }.planner-summary h3 { margin: 12px 0; font-size: 23px; letter-spacing: -.03em; }.planner-summary > p { margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.8; }.planner-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0 0; }.planner-summary dl div { padding-top: 13px; border-top: 1px solid var(--border); }.planner-summary dt { color: var(--text-4); font-size: 11px; }.planner-summary dd { margin: 6px 0 0; font-size: 13px; font-weight: 700; }.planner-delivery > div:not(.planner-delivery-chain) { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; margin-top: 14px; }.planner-delivery > div > svg { grid-row: span 2; width: 36px; height: 36px; padding: 8px; border-radius: 8px; background: var(--brand-bg); color: var(--brand); }.planner-delivery strong { font-size: 16px; }.planner-delivery small { margin-top: 5px; color: var(--text-3); font-size: 12px; line-height: 1.55; }.planner-delivery-chain { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-4); font-size: 10px; }.planner-delivery-chain b { color: var(--text-2); }.planner-delivery-chain i { color: var(--brand); font-style: normal; }.planner-tree { padding: 30px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }.tree-root { display: flex; align-items: center; gap: 10px; width: max-content; margin: 0 auto; padding: 12px 16px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 14px; }.tree-root svg { width: 18px; }.tree-branches { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-top: 44px; padding-top: 20px; }.tree-branches::before { position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--border); content: ''; }.tree-branch { position: relative; display: flex; min-height: 88px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; text-align: center; }.tree-branch::before { position: absolute; top: -21px; left: 50%; width: 1px; height: 20px; background: var(--border); content: ''; }.tree-branch svg { width: 19px; color: var(--brand); }.tree-branch span { font-size: 13px; font-weight: 700; }.tree-branch small { color: var(--text-4); font-size: 10px; }.planner-page-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }.planner-page-list article { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 86px; padding: 15px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }.planner-page-list article > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 5px; background: var(--brand-bg); color: var(--brand); font-size: 11px; font-weight: 800; }.planner-page-list strong, .planner-page-list small { display: block; }.planner-page-list strong { font-size: 14px; }.planner-page-list small { margin-top: 5px; color: var(--text-4); font-size: 11px; }.planner-page-list em { color: var(--text-4); font-size: 10px; font-style: normal; }.planner-generate { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 22px 24px; border: 1px solid rgba(226,20,19,.22); border-radius: 10px; background: linear-gradient(110deg,#fff 0%,var(--brand-bg) 100%); }.planner-generate strong, .planner-generate span { display: block; }.planner-generate strong { font-size: 15px; }.planner-generate span { margin-top: 6px; color: var(--text-3); font-size: 12px; }.planner-generate .planner-primary { min-height: 38px; padding: 0 15px; white-space: nowrap; }.planner-toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; padding: 13px 16px; border-radius: 8px; background: #27282d; color: #fff; font-size: 13px; box-shadow: 0 14px 32px rgba(0,0,0,.18); opacity: 0; transform: translateY(12px); transition: .2s ease; pointer-events: none; }.planner-toast.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) { .planner-overview-grid { grid-template-columns: 1fr; }.tree-branches { grid-template-columns: repeat(3,1fr); }.tree-branches::before { display: none; }.tree-branch::before { display: none; } }.planner-page-list article:nth-child(2n) { border-right: 0; }
@media (max-width: 600px) { .planner-topbar { height: 58px; padding: 0 20px; }.planner-brand { font-size: 12px; }.planner-back { font-size: 0; }.planner-back svg { width: 19px; }.planner-main { width: min(100% - 32px,1180px); padding-top: 48px; }.planner-hero h1 { font-size: 40px; }.planner-hero > p { font-size: 15px; }.planner-input-row { grid-template-columns: 1fr; }.planner-primary { min-height: 44px; }.planner-section-head { align-items: flex-start; flex-direction: column; gap: 8px; }.planner-summary dl { grid-template-columns: 1fr; }.tree-branches, .planner-page-list { grid-template-columns: 1fr; }.planner-page-list article { border-right: 0; }.planner-generate { align-items: flex-start; flex-direction: column; }.planner-generate .planner-primary { width: 100%; }.planner-foundations { gap: 6px; }.planner-foundations span { font-size: 11px; } }

.planner-brand > img { display:block; width:74px; height:auto; }
@media (max-width:600px) { .planner-brand > img { width:62px; } }