:root { font-family: system-ui, sans-serif; color: #172033; background: #f4f6fa; }
* { box-sizing: border-box; } body { margin: 0; padding-bottom: 84px; } header { min-height: 64px; display: flex; gap: 14px; align-items: center; padding: 12px max(18px, calc((100vw - 1180px)/2)); background: #172033; color: white; } header div { flex: 1; display: grid; gap: 2px; } header small { color: #bbc6d9; font-size: 12px; } button, .handoff-link { cursor: pointer; border: 1px solid #cad2df; border-radius: 8px; padding: 9px 12px; background: white; color: #172033; text-decoration: none; } .badge { font-size: 11px; letter-spacing: .08em; padding: 5px 7px; border-radius: 4px; background: #e7b957; color: #172033; font-weight: 800; } main { max-width: 1180px; margin: 28px auto; padding: 0 18px; position: relative; } .purpose { display: grid; grid-template-columns: 1.08fr .92fr; gap: 24px; background: #e8f0ff; border: 1px solid #bfd0fa; border-radius: 14px; padding: 22px; margin-bottom: 18px; } .eyebrow { color: #2454bb; font-size: 12px; font-weight: 800; letter-spacing: .06em; } .purpose h1 { margin: 7px 0 10px; font-size: 24px; line-height: 1.3; } .purpose p { line-height: 1.7; } .purpose-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .purpose-actions span { padding: 5px 8px; border-radius: 5px; background: #fff; color: #40506b; font-size: 12px; } .flow-map { display: grid; justify-items: center; align-content: center; gap: 7px; padding: 8px; } .flow-row { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; } .flow-node { min-width: 128px; padding: 9px 10px; border: 1px solid #a8bee9; border-radius: 8px; background: white; text-align: center; font-size: 13px; font-weight: 750; } .flow-node small { color: #667085; font-size: 11px; font-weight: 500; } .flow-node.group { background: #2d61d7; border-color: #2d61d7; color: white; } .flow-node.group small { color: #dce7ff; } .flow-node.emphasis { background: #fff7df; border-color: #e8d49d; } .flow-node.wide { width: 100%; max-width: 420px; } .flow-arrow { color: #2d61d7; font-weight: 900; } .headline { display: flex; gap: 16px; align-items: stretch; margin-bottom: 18px; } .headline > div { flex: 1; border-radius: 12px; padding: 18px; background: white; border: 1px solid #dfe5ee; } p { color: #667085; margin: 0; } h1 { margin: 6px 0; } .alert { display: grid; gap: 4px; max-width: 390px; border-left: 5px solid #d36a54 !important; } .alert b { color: #bc4328; } nav { display: flex; overflow-x: auto; gap: 8px; margin-bottom: 18px; } nav button.active { background: #2d61d7; color: white; border-color: #2d61d7; } #screen { min-height: 350px; margin-right: 320px; } .panel, .metric, .event, .tree > li { background: white; border: 1px solid #dfe5ee; border-radius: 10px; } .panel { padding: 16px; } .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .metric { padding: 14px; } .metric b { display: block; font-size: 21px; margin: 6px 0; } .metric small { color: #667085; } .events { display: grid; gap: 10px; } .event { padding: 14px; display: flex; align-items: center; justify-content: space-between; } .event span { color: #667085; font-size: 13px; } details { border-top: 1px solid #e7ebf2; padding: 10px 0; } summary { cursor: pointer; font-weight: 700; } .tree { padding-left: 0; list-style: none; display: grid; gap: 10px; } .tree > li { padding: 14px; } .tree ul { margin: 10px 0 0 10px; border-left: 2px solid #d9e1ec; padding-left: 16px; list-style: none; display: grid; gap: 8px; } .tag { display: inline-block; background: #e8f0ff; color: #2454bb; padding: 3px 6px; border-radius: 4px; font-size: 12px; } .spec { position: absolute; top: 462px; right: 18px; width: 290px; background: #fff7df; border: 1px solid #e8d49d; border-radius: 10px; padding: 16px; } .spec h2 { margin: 0 0 12px; font-size: 15px; } dl { margin: 0; display: grid; gap: 6px; } dt { font-weight: 700; font-size: 13px; } dd { margin: 0 0 8px; color: #4c5668; font-size: 13px; line-height: 1.5; } .switcher { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px; background: #172033; color: white; border-radius: 99px; box-shadow: 0 8px 24px #17203355; } .switcher button { padding: 6px 10px; } .switcher span { min-width: 175px; text-align: center; font-size: 13px; }
.screen-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .screen-title h2 { margin: 4px 0 0; } .metric.warning { border-color: #e8b4a9; background: #fff7f4; } .business-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .business { min-height: 105px; display: grid; gap: 6px; text-align: left; } .business span, .business em { color: #667085; font-size: 12px; font-style: normal; } .business.focus { border-color: #5d88ea; background: #f3f6ff; } .dropzone { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 10px; margin-top: 18px; border: 2px dashed #a8bee9; border-radius: 10px; background: #f8faff; } .dropzone span { color: #667085; font-size: 13px; } .import-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-top: 18px; } .import-layout > div { padding: 12px; border: 1px solid #dfe5ee; border-radius: 8px; } .mapping { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid #eef1f6; font-size: 13px; } select, input { min-width: 0; width: 100%; padding: 9px; border: 1px solid #cad2df; border-radius: 7px; background: white; font: inherit; } .checks { padding-left: 20px; line-height: 2; font-size: 13px; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; } .form-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; } .form-field span { color: #4c5668; } #custom-fields { display: grid; gap: 8px; margin-bottom: 10px; } .custom-field { display: grid; grid-template-columns: 1.3fr .7fr .8fr; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: #f8faff; } .custom-field label { color: #4c5668; font-size: 12px; white-space: nowrap; } .custom-field input[type="checkbox"] { width: auto; vertical-align: middle; } .secondary { margin-bottom: 12px; } .primary { display: block; margin-top: 14px; border-color: #2d61d7; background: #2d61d7; color: white; } .notice { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #fff7df; color: #4c5668; font-size: 13px; line-height: 1.6; } .success { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #eaf7ef; color: #17683d; font-size: 13px; }
@media (max-width: 760px) { header { flex-wrap: wrap; } header button, .handoff-link { width: 100%; text-align: center; } .purpose { grid-template-columns: 1fr; padding: 17px; } .purpose h1 { font-size: 20px; } .headline { display: grid; } .alert { max-width: none; } #screen { margin-right: 0; } .spec { position: static; width: auto; margin-top: 14px; } .metrics, .business-grid, .form-grid, .import-layout { grid-template-columns: 1fr; } .event { display: grid; gap: 8px; } .flow-row { flex-direction: column; } .flow-row .flow-arrow { transform: rotate(90deg); } .flow-node { width: 100%; } .custom-field { grid-template-columns: 1fr; } }