/* Reference direction: cobalt navigation, white workspace, compact data tables. */
:root{--blue:#0645f5;--ink:#17202e;--muted:#788495;--line:#edf0f5;--pale:#f5f8ff}
body{background:#e9f0fa;color:var(--ink);font-family:Arial,Helvetica,sans-serif;padding:24px}
aside{inset:24px auto 24px 24px;width:210px;padding:34px 0 28px 20px;background:var(--blue);border-radius:22px 0 0 22px;z-index:2}
.brand{display:block;font:600 25px/1.2 Arial,sans-serif;color:white;letter-spacing:-1px;margin-left:15px}.brand span{color:#c5d5ff;font-size:9px;letter-spacing:1.5px;margin-top:8px}
.workspace{margin:42px 15px 27px;font-size:9px;color:#d4dfff;letter-spacing:1px}.workspace small{display:block;color:#a8c0ff;margin-top:6px;font-size:10px}
nav button{position:relative;border-radius:30px 0 0 30px;padding:14px 18px;margin:9px 0;color:#d2dfff;font-size:13px;transition:background .15s,color .15s}
nav button:hover{background:#ffffff20;color:white}nav button.active{background:white;color:#133976;font-weight:600}
nav button.active:before,nav button.active:after{content:'';position:absolute;right:0;width:22px;height:22px;background:transparent;pointer-events:none}
nav button.active:before{top:-22px;border-bottom-right-radius:22px;box-shadow:6px 6px 0 6px white}
nav button.active:after{bottom:-22px;border-top-right-radius:22px;box-shadow:6px -6px 0 6px white}
.aside-bottom{left:33px;bottom:27px;color:#d4e0ff;font-size:10px}.aside-bottom small{color:#b0c6ff;font-size:10px}.dot{background:#a5f2d0}
main{margin-left:210px;max-width:none;min-height:calc(100vh - 48px);padding:0 34px 30px;background:white;border-radius:0 22px 22px 0;box-shadow:22px 28px 60px -32px #243b694d}
header{padding:24px 0 18px;border-color:var(--line);gap:15px}.crumb,.eyebrow{color:#8b94a4;letter-spacing:1.5px;font-size:9px}.header-right{font-size:11px;color:#73829a;gap:18px}
h1{font:600 28px/1.2 Arial,sans-serif;letter-spacing:-.8px;margin:27px 0 8px}h2{font:600 16px/1.3 Arial,sans-serif;margin:0 0 13px;letter-spacing:-.2px}h3{font-size:13px}.sub{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:24px;max-width:760px}
.button{border-color:#e4e9f2;border-radius:7px;color:#344761;font-size:12px;padding:10px 15px;transition:background .15s,box-shadow .15s}.button:hover{background:#f0f5ff}.button.dark{background:var(--blue);color:white;box-shadow:0 5px 13px #0645f51a}.button.dark:hover{background:#003bdf}
.stats{gap:15px;margin:23px 0}.stat{border:1px solid #edf1f7;border-radius:10px;background:linear-gradient(135deg,#fff,#f7faff);padding:19px 21px}.stat b{font:600 31px Arial,sans-serif;letter-spacing:-1px;margin:12px 0 7px;color:#15264a}.stat:first-child{background:var(--blue);border-color:var(--blue);box-shadow:0 10px 22px #0645f524}.stat:first-child b,.stat:first-child .label{color:white}.stat:first-child small{color:#c6d6ff}.stat small{font-size:10px;color:#8d98aa}.label{font-size:11px;color:#7e8a9e}
.panel{border:1px solid #edf1f6;border-radius:10px;padding:21px;background:white;box-shadow:0 4px 22px #23386704}.grid{gap:18px;grid-template-columns:1.2fr 1fr}.panel-head{gap:15px}.muted{font-size:11px;color:#8b96a7}.banner{background:#f1f6ff;border:1px solid #e8effe;color:#627596;border-radius:8px;font-size:11px;padding:14px 18px;margin:20px 0}
table{border-collapse:separate;border-spacing:0 5px}th{font-size:9px;letter-spacing:.5px;font-weight:600;text-transform:none;color:#69778d;padding:12px 11px;background:#f8f9fc}th:first-child{border-radius:6px 0 0 6px}th:last-child{border-radius:0 6px 6px 0}td{padding:13px 11px;font-size:11px;border:0;background:#fafbfe;transition:background .15s,color .15s}td:first-child{border-radius:7px 0 0 7px}td:last-child{border-radius:0 7px 7px 0}tbody tr:hover td,tbody tr.selected td{background:var(--blue);color:white}tbody tr:hover .person,tbody tr.selected .person{color:white}tbody tr:hover .muted,tbody tr.selected .muted{color:#c5d7ff}tbody tr.selected{filter:drop-shadow(0 8px 9px #1248d526)}.person{font-size:12px;color:#2b3c56;font-weight:600}.person:before{content:'◉';display:inline-grid;place-items:center;width:25px;height:25px;margin-right:9px;border-radius:50%;background:#e6edff;color:#5d7cbc;font-size:14px;vertical-align:middle}
.badge{background:#eef3ff;color:#5974af;font-size:9px;padding:4px 7px;border-radius:5px}.badge.green{background:#e8f8f0;color:#329276}.badge.orange{background:#fff2e9;color:#bc865d}tr:hover .badge,tr.selected .badge{background:#ffffff25;color:white}
.bar{height:7px;background:#eef2fb}.bar i{background:var(--blue)}.barrow{font-size:11px;margin:21px 0}.barrow span{width:110px}.barrow b{font-size:12px;color:#45628e}.activity{border-color:var(--line);gap:12px;padding:11px 0}.activity .bubble{background:#edf3ff;color:var(--blue);border-radius:9px;font-size:13px;height:32px}.activity strong{font-size:11px;font-weight:600;color:#3b4b66}.activity small{font-size:10px;color:#8b97aa}
input,select{border-color:#e4e9f2;border-radius:7px;color:#344761;font-size:12px;padding:11px 13px}input:focus,select:focus{outline:2px solid #bfd2ff;outline-offset:2px}.filters{gap:12px}.segment{border-color:#e9eef7;border-radius:8px;padding:18px;margin:12px 0}.segment b{font:600 27px Arial;color:var(--blue)}.segment p{color:#8290a5;font-size:11px}.empty{color:#8796aa}
dialog{border:1px solid #e2e9f6;border-radius:15px;color:var(--ink);box-shadow:0 30px 90px #123b7840}dialog::backdrop{background:#14305755;backdrop-filter:blur(3px)}.close{background:#f0f5ff;color:#60789f;border-radius:6px;font-size:11px;padding:9px 12px}.journey{background:#f5f8ff}.journey ul{color:#75839b}.code{background:#f6f8fd;color:#4e658b;border-radius:7px}.textlink{color:var(--blue)}button:focus-visible,a:focus-visible{outline:3px solid #88b8ff;outline-offset:3px}
.demo-body{background:#edf3fd;max-width:1000px;padding:30px}.demo-body .brand{color:var(--blue);margin:0}.demo-body h1{font-size:40px;font-weight:600}.demo-hero{background:var(--blue);color:white;border-radius:14px;box-shadow:0 15px 35px #0645f51a}.demo-hero .sub,.demo-hero .eyebrow{color:#c7d9ff}.demo-body .panel{margin-top:20px}.log{background:#152f62;color:#ccdcff;border-radius:9px}.widget-body{background:white;padding:20px}.widget-body h2{font-size:18px}.step{background:#edf3ff;border:1px solid #d5e1ff;color:#2858b8;border-radius:7px;font-size:12px}.step:disabled{opacity:.45;cursor:not-allowed}iframe{border-color:#dce7fc}
@media(min-width:1600px){body{padding:36px 6vw}aside{left:6vw;top:36px;bottom:36px}main{min-height:calc(100vh - 72px)}}
@media(max-width:1050px){body{padding:16px}aside{inset:16px auto 16px 16px;width:180px;padding-left:12px}main{margin-left:180px;padding:0 23px 25px}.brand{font-size:23px}.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.header-right{gap:10px}.panel{overflow:auto}}
@media(max-width:650px){body{padding:10px}aside{position:relative;inset:auto;width:100%;border-radius:15px 15px 0 0;padding:20px 15px 8px}.brand{margin-left:4px}.brand span{font-size:8px}.workspace,.aside-bottom{display:none}nav{display:flex;margin-top:17px;gap:4px}nav button{min-width:110px;border-radius:7px;margin:0;padding:10px 12px;font-size:12px}nav button.active:before,nav button.active:after{display:none}main{margin-left:0;min-height:80vh;border-radius:0 0 15px 15px;padding:0 16px 20px}header{padding:18px 0}.header-right span{display:none}h1{font-size:25px}.stats{gap:10px}.stat{padding:15px}.stat b{font-size:28px}.panel{padding:15px}.filters{flex-wrap:wrap}.filters input{min-width:0;width:100%}.demo-body{padding:16px}.demo-body h1{font-size:31px}.demo-hero{padding:25px}}
#comm-editor{margin-top:24px}#comm-form fieldset{border:0;padding:0;margin:0}#comm-form label{display:flex;flex-direction:column;gap:8px;margin:12px 0;flex:1;font-size:13px;color:#536078}#comm-form input,#comm-form textarea,#comm-form select{font:inherit;padding:12px;border:1px solid #dfe5ef;border-radius:10px;background:#fff;color:#182039;box-sizing:border-box;width:100%}#comm-form fieldset:disabled{opacity:.75}#comm-form .filters{flex-wrap:wrap}#comm-message{color:#0645f5}