@import url("./advanced.css");

.pro-course-card { background: linear-gradient(145deg, rgba(119, 83, 255, .28), rgba(13, 29, 58, .76)); }
.pro-board { border-color: rgba(177, 151, 255, .36); }
.pro-board .board-head b, .pro-outcome strong { color: #cfc1ff; }
.pro-module-grid .module-card { min-height: 205px; }
.sprint-strip, .action-plan { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(181, 162, 255, .22); border-radius: 18px; background: rgba(123, 92, 255, .08); color: #cbd8ee; }
.sprint-strip b, .action-plan span { color: #ffda86; font-family: Inter, sans-serif; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.sprint-strip span { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.05); font-size: .83rem; }
.sprint-strip strong { margin-left: auto; color: #aeeeff; font-size: .86rem; }
.pro-case-stage { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); }
.workflow-layout, .agent-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 18px; }
.sop-form { margin: 0; }
.sop-result { min-height: 100%; }
.handoff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.handoff-card { padding: 16px; border: 1px solid rgba(130, 208, 255, .2); border-radius: 16px; background: rgba(8, 28, 52, .62); }
.handoff-card span { color: #7ee6ff; font: 700 .72rem Inter, sans-serif; letter-spacing: .08em; }
.handoff-card h3 { margin: 8px 0; color: #f0f7ff; font-size: .98rem; }
.handoff-card p { margin: 0; color: #aabdd7; font-size: .83rem; line-height: 1.7; }
.agent-roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.agent-choice { min-height: 150px; padding: 16px; text-align: left; border: 1px solid rgba(126, 230, 255, .18); border-radius: 16px; background: rgba(8, 27, 50, .58); color: #eaf6ff; cursor: pointer; transition: .2s ease; }
.agent-choice:hover, .agent-choice.active { transform: translateY(-2px); border-color: #a88cff; background: rgba(130, 91, 255, .13); }
.agent-choice span { display: block; color: #b9a9ff; font: 700 .72rem Inter, sans-serif; letter-spacing: .08em; }
.agent-choice strong { display: block; margin: 9px 0 6px; font-size: 1.03rem; }
.agent-choice small { color: #aebfd7; line-height: 1.55; }
.agent-detail { min-height: 330px; padding: 24px; border: 1px solid rgba(168, 140, 255, .3); border-radius: 20px; background: linear-gradient(145deg, rgba(24, 20, 68, .72), rgba(8, 30, 55, .72)); }
.agent-detail > span { color: #ffe197; font: 700 .75rem Inter, sans-serif; letter-spacing: .1em; }
.agent-detail h3 { margin: 10px 0; color: #fff; font-size: 1.55rem; }
.agent-detail > p { color: #b9cce4; line-height: 1.8; }
.agent-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.agent-spec-grid div { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.agent-spec-grid b { display: block; margin-bottom: 5px; color: #7ee6ff; font-size: .78rem; }
.agent-spec-grid small { color: #d5e0f0; line-height: 1.55; }
.agent-rule-card { display: grid; grid-template-columns: .72fr repeat(3, 1fr); gap: 14px; margin-top: 16px; padding: 18px; border: 1px solid rgba(255, 205, 117, .2); border-radius: 18px; background: rgba(67, 46, 18, .2); }
.agent-rule-card > span { color: #ffd675; font: 800 .83rem Inter, sans-serif; letter-spacing: .08em; }
.agent-rule-card b { color: #f7fbff; font-size: .9rem; }
.agent-rule-card p { margin: 7px 0 0; color: #b9c8dc; font-size: .82rem; line-height: 1.65; }
.agent-flow-layout, .unit-economics { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr); gap: 18px; margin-top: 18px; }
.agent-flow-card, .agent-canvas-card, .economics-result { border: 1px solid rgba(130, 208, 255, .22); border-radius: 20px; background: rgba(8, 29, 54, .64); }
.agent-flow-card { padding: 20px; }
.agent-flow-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.agent-flow-tabs button { padding: 8px 11px; border: 1px solid rgba(132, 217, 255, .17); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #b9cae2; cursor: pointer; font: 700 .78rem "Noto Sans SC", sans-serif; }
.agent-flow-tabs button.active { border-color: #a994ff; background: rgba(143, 112, 255, .18); color: #fff; }
.agent-flow-output { min-height: 176px; padding: 18px; border-radius: 15px; background: rgba(3, 18, 36, .52); }
.agent-flow-output span { color: #9f8cff; font: 800 .73rem Inter, sans-serif; letter-spacing: .08em; }
.agent-flow-output h3 { margin: 9px 0; color: #f4f8ff; font-size: 1.12rem; }
.agent-flow-output p { margin: 0; color: #b8cbe2; line-height: 1.75; }
.agent-flow-output ul { margin: 12px 0 0; padding-left: 18px; color: #d5e3f2; font-size: .87rem; line-height: 1.8; }
.agent-canvas-card { padding: 22px; background: linear-gradient(145deg, rgba(72, 47, 133, .38), rgba(9, 32, 56, .75)); }
.agent-canvas-card > span { color: #ffdc87; font: 800 .74rem Inter, sans-serif; letter-spacing: .09em; }
.agent-canvas-card h3 { margin: 10px 0; color: #fff; font-size: 1.2rem; }
.agent-canvas-card p, .agent-canvas-card li { color: #c1cfe1; font-size: .87rem; line-height: 1.72; }
.agent-canvas-card ol { margin: 12px 0; padding-left: 20px; }
.agent-canvas-card b { color: #91edff; font-size: .82rem; }
.story-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.story-grid article { min-height: 196px; padding: 18px; border: 1px solid rgba(118, 230, 255, .18); border-radius: 18px; background: rgba(8, 29, 54, .62); }
.story-grid span { color: #a895ff; font: 800 .78rem Inter, sans-serif; }
.story-grid h3 { margin: 13px 0 8px; color: #f3f8ff; font-size: 1.08rem; }
.story-grid p { min-height: 67px; margin: 0; color: #aec0d7; font-size: .86rem; line-height: 1.7; }
.story-grid b { display: block; margin-top: 12px; color: #80e4ff; font-size: .77rem; }
.pro-delivery-grid { margin-bottom: 14px; }
.action-plan { margin-top: 0; }
.action-plan p { margin: 0; color: #c2d4e8; line-height: 1.7; }
.business-principle { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid rgba(255, 207, 116, .21); border-radius: 17px; background: rgba(89, 62, 18, .2); }
.business-principle span { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: #e9f2ff; font-size: .86rem; }
.business-principle b { color: #ffda86; }
.business-principle strong { margin-left: auto; color: #a8eaff; font-size: .86rem; }
.business-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.business-choice { min-height: 132px; padding: 15px; text-align: left; border: 1px solid rgba(255, 213, 130, .16); border-radius: 16px; background: rgba(8, 28, 52, .62); color: #eef7ff; cursor: pointer; transition: .2s ease; }
.business-choice:hover, .business-choice.active { transform: translateY(-2px); border-color: #ffcf73; background: rgba(112, 74, 17, .23); }
.business-choice span { display: block; color: #ffda86; font: 800 .7rem Inter, sans-serif; letter-spacing: .08em; }
.business-choice strong { display: block; margin: 8px 0 5px; font-size: .96rem; }
.business-choice small { color: #afc0d6; font-size: .78rem; line-height: 1.55; }
.business-output { margin-top: 15px; padding: 22px; border: 1px solid rgba(255, 213, 130, .22); border-radius: 20px; background: linear-gradient(125deg, rgba(60, 42, 18, .4), rgba(7, 31, 55, .74)); }
.business-output > span { color: #ffda86; font: 800 .74rem Inter, sans-serif; letter-spacing: .08em; }
.business-output h3 { margin: 10px 0 7px; color: #fff; font-size: 1.35rem; }
.business-output > p { margin: 0; color: #bdcce0; line-height: 1.7; }
.business-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px; }
.business-detail-grid div { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .055); }
.business-detail-grid b { display: block; margin-bottom: 6px; color: #91eaff; font-size: .78rem; }
.business-detail-grid small { color: #d6e2f1; font-size: .8rem; line-height: 1.55; }
.economics-form { margin: 0; }
.economics-result { padding: 20px; }
.business-guardrails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.business-guardrails article { padding: 16px; border: 1px solid rgba(255, 211, 122, .18); border-radius: 15px; background: rgba(46, 34, 15, .22); }
.business-guardrails b { color: #ffe29b; }
.business-guardrails p { margin: 8px 0 0; color: #c0cee0; font-size: .83rem; line-height: 1.7; }

@media (max-width: 1020px) {
  .handoff-grid, .story-grid, .business-picker { grid-template-columns: repeat(2, 1fr); }
  .business-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .business-guardrails { grid-template-columns: 1fr; }
  .agent-rule-card { grid-template-columns: repeat(2, 1fr); }
  .agent-rule-card > span { grid-column: span 2; }
}
@media (max-width: 760px) {
  .pro-case-stage, .workflow-layout, .agent-layout, .agent-flow-layout, .unit-economics { grid-template-columns: 1fr; }
  .handoff-grid, .story-grid, .agent-roster, .agent-spec-grid { grid-template-columns: 1fr; }
  .agent-rule-card { grid-template-columns: 1fr; }
  .agent-rule-card > span { grid-column: auto; }
  .sprint-strip strong { margin-left: 0; width: 100%; }
  .business-picker, .business-detail-grid { grid-template-columns: 1fr; }
  .business-principle strong { margin-left: 0; width: 100%; }
}