:root { font-family: Inter, Pretendard, system-ui, sans-serif; color: #e9f0f7; background: #08111a; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% -20%, #153347 0, transparent 38%), #08111a; }
button, input, select { font: inherit; }
button { border: 1px solid #294052; color: #e9f0f7; background: #142431; border-radius: 9px; padding: 10px 14px; cursor: pointer; }
button:hover:not(:disabled) { border-color: #59a99c; }
button:disabled { cursor: not-allowed; opacity: .4; }
button.primary { background: #14bda8; border-color: #14bda8; color: #04120f; font-weight: 800; }
button.danger { background: #321b24; border-color: #713142; color: #ffb7c2; }
button.compact { padding: 7px 10px; font-size: 12px; }
header { height: 66px; padding: 0 max(24px, calc((100vw - 1420px) / 2)); display: flex; align-items: center; gap: 22px; border-bottom: 1px solid #1d2c38; background: #09141dcc; backdrop-filter: blur(14px); }
header nav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
header a { color: #91a8ba; text-decoration: none; font-size: 13px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand b { width: 34px; height: 34px; display: grid; place-items: center; background: #19c8b2; color: #062019; border-radius: 9px; font-size: 20px; }
.brand div { display: grid; }.brand small { color: #6f879a; font-size: 10px; letter-spacing: .08em; }
.demo { color: #ff9ba8; border: 1px solid #713340; background: #321922; padding: 5px 9px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
main { max-width: 1420px; margin: auto; padding: 36px 24px 70px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.hero p, .section-head p, .modal p { color: #24c9b4; letter-spacing: .15em; font-size: 11px; font-weight: 800; margin: 0 0 8px; }
h1 { font-size: clamp(27px, 4vw, 44px); margin: 0 0 10px; letter-spacing: -.04em; }
.hero span, .modal > div > span { color: #849aac; }
.lock-state { color: #ff9ba8 !important; background: #321922; border: 1px solid #713340; border-radius: 18px; padding: 7px 11px; font-size: 11px; font-weight: 800; }
.lock-state.unlocked { color: #56dfc8 !important; border-color: #287c72; background: #123a34; }
.setup { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; background: #0e1b25; border: 1px solid #223643; padding: 20px; border-radius: 14px; }
.setup h2 { margin: 0; font-size: 18px; }.setup p { color: #8197a8; margin: 5px 0 10px; font-size: 13px; }
.setup-actions { display: flex; gap: 8px; }
.progress { height: 3px; background: #233441; overflow: hidden; border-radius: 4px; }.progress i { display: block; width: 0; height: 100%; background: #1bc8b2; transition: width .3s; }
.dependencies { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 34px; }
.dependency { display: flex; align-items: center; gap: 9px; color: #8da1b1; padding: 11px 13px; background: #0b1720; border: 1px solid #192a36; border-radius: 9px; font-size: 12px; }
.dependency i { width: 8px; height: 8px; border-radius: 50%; background: #e76a78; }.dependency.ok i { background: #29c8a5; box-shadow: 0 0 10px #29c8a566; }
.section-head { display: flex; justify-content: space-between; align-items: end; margin: 34px 0 14px; }
.section-head h2 { margin: 0; font-size: 24px; }.section-head span { display: block; color: #71899a; margin-top: 6px; font-size: 12px; }
.flows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.flow { border: 1px solid #294052; background: #0e1b26; border-radius: 13px; padding: 17px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: end; }
.flow > div { grid-column: 1 / -1; }.flow h3 { margin: 0 0 7px; font-size: 16px; }.flow p { margin: 0 0 8px; color: #9eb0bd; font-size: 13px; min-height: 38px; }.flow small { color: #6f8798; }
.flow label { color: #7890a1; font-size: 10px; display: grid; gap: 5px; }
select, input { background: #0e1d28; color: #e9f0f7; border: 1px solid #293d4d; border-radius: 8px; padding: 10px; outline: none; }
.beds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bed { min-width: 0; background: #0d1a24; border: 1px solid #203441; border-radius: 13px; padding: 18px; display: grid; gap: 14px; }
.bed.matched { border-color: #1f6b60; }
.bed-head { display: flex; justify-content: space-between; gap: 12px; }.bed-head > div { min-width: 0; }
.bed-head span { color: #5f7a8e; text-transform: uppercase; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.bed-head h3 { margin: 4px 0; font-size: 22px; }.bed-head p { margin: 0; color: #6f8798; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bed-head b { flex: 0 0 auto; height: fit-content; padding: 6px 8px; border-radius: 6px; background: #182b38; color: #9cb3c3; font-size: 10px; }.bed.matched .bed-head b { background: #123a34; color: #56dfc8; }
.assignment { background: #091720; border: 1px solid #1b303d; border-radius: 9px; padding: 12px; }.assignment span { display: block; color: #60798b; font-size: 10px; margin-bottom: 5px; }.assignment strong { font-size: 15px; }
.bed-meta { display: flex; gap: 14px; color: #7890a1; font-size: 10px; }
.bed-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.bed-actions button { padding: 8px 10px; font-size: 11px; }
dialog { padding: 0; color: inherit; background: transparent; border: 0; max-width: min(680px, calc(100vw - 32px)); width: 100%; }
dialog::backdrop { background: #02070bd9; backdrop-filter: blur(4px); }
.modal { border: 1px solid #2b4657; background: #0d1b25; border-radius: 16px; padding: 24px; display: grid; gap: 20px; box-shadow: 0 25px 70px #0008; }
.modal h2 { margin: 0 0 7px; }.modal label { display: grid; gap: 7px; color: #8ea3b2; font-size: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.scenario-picker { max-height: 82vh; overflow: auto; }
#scenario-options { display: grid; gap: 16px; }
.option-group { display: grid; gap: 8px; }.option-group h3 { color: #8fa5b5; font-size: 12px; margin: 0; }.option-group h3 small { color: #5e7688; }
.option-group button { display: grid; text-align: left; gap: 5px; }.option-group button strong { font-size: 14px; }.option-group button span { color: #7890a1; font-size: 10px; }
.option-group.eligible button { border-color: #287c72; }.option-group.preparable button { border-color: #315e7b; }
.option-group.blocked { opacity: .65; }.option-group.blocked button { border-color: #54313b; }
.loading { color: #7890a1; }
.toast { position: fixed; z-index: 10; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: #172934; border: 1px solid #345061; padding: 12px 18px; border-radius: 9px; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast.error { background: #3a1a24; border-color: #804052; }
@media (max-width: 1050px) { .beds, .flows { grid-template-columns: repeat(2, 1fr); }.dependencies { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { header nav a { display: none; }.demo { display: none; }.hero, .setup { display: grid; }.beds, .flows { grid-template-columns: 1fr; }.flow { grid-template-columns: 1fr; }.dependencies { grid-template-columns: 1fr 1fr; } }