:root{color-scheme:dark;--bg:#121c29;--sidebar:#0d1723;--panel:#192534;--raised:#223143;--line:#334356;--text:#eef3f9;--muted:#a9b8ca;--accent:#79bfff;--accent-ink:#0c2540;--selected:#203b55;--green:#88d4b0;--amber:#e6bf7b;--red:#ffa5ab;--radius:12px;--ease:cubic-bezier(.16,1,.3,1);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;background:var(--bg);color:var(--text);font-synthesis:none}
:root[data-theme=light]{color-scheme:light;--bg:#f3f6fa;--sidebar:#e9eef5;--panel:#fff;--raised:#edf2f8;--line:#cbd5e1;--text:#16283c;--muted:#4b6178;--accent:#145e9e;--accent-ink:#fff;--selected:#dcecfb;--green:#216746;--amber:#795411;--red:#a12c39}
*{box-sizing:border-box}body{margin:0;overflow-x:clip}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button,a{touch-action:manipulation}a{color:var(--accent);text-underline-offset:3px}button{color:inherit}::selection{background:var(--accent);color:var(--accent-ink)}input,textarea{caret-color:var(--accent)}*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}*:focus-visible{outline:2px solid var(--accent);outline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}h1{font-size:32px;letter-spacing:-.025em;font-weight:650;line-height:1.2}h2{font-size:18px;letter-spacing:-.015em;font-weight:600}h3{font-size:14px;font-weight:600}p{color:var(--muted);max-width:72ch}small{font-size:12px}svg{display:block}.icon{width:19px;height:19px;flex:none}.logo-mark{width:33px;height:33px;color:var(--accent)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:12px;top:-70px;z-index:100;background:var(--panel);padding:12px}.skip-link:focus{top:12px}.muted{color:var(--muted)}.nowrap{white-space:nowrap}.count{font-size:12px;padding:1px 6px;background:var(--raised);border-radius:4px;color:var(--muted);font-variant-numeric:tabular-nums}.avatar{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:var(--raised);color:var(--muted);font-size:12px;font-weight:600;flex:none}.avatar.large{width:42px;height:42px}.avatar.large .icon{width:22px;height:22px}
.shell{display:grid;grid-template-columns:218px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--sidebar);border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;width:218px;padding:28px 14px 17px;z-index:30;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;padding:0 15px;color:var(--text);text-decoration:none;font-size:26px;font-weight:650;letter-spacing:-.035em}.workspace{display:flex;align-items:center;gap:11px;padding:8px 12px;margin:26px 0 20px;border:1px solid var(--line);border-radius:8px}.workspace-mark{display:grid;place-items:center;width:27px;height:27px;background:var(--raised);border-radius:6px;color:var(--text);font-size:12px;font-weight:650}.workspace-copy{flex:1;min-width:0;overflow-wrap:anywhere}.workspace-copy span{display:block;font-size:12px;color:var(--muted)}.workspace-copy strong{font-weight:600;font-size:13px}.nav{display:flex;flex-direction:column;gap:6px}.nav a{display:flex;gap:12px;align-items:center;padding:12px 15px;border-radius:7px;color:var(--muted);text-decoration:none;font-weight:500;min-height:44px}.nav a:hover{color:var(--text);background:var(--raised)}.nav a.active{background:var(--selected);color:var(--accent)}.nav a .count{margin-left:auto;background:transparent}.nav-divider{height:1px;background:var(--line);margin:19px 12px}.sidebar-bottom{margin-top:auto;padding:14px 4px 0}.local-indicator{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:16px}.local-indicator:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--muted)}.profile{display:flex;gap:10px;align-items:center}.profile strong{display:block;font-size:12px;font-weight:600}.profile small{color:var(--muted);font-size:12px}.main-shell{grid-column:2;min-width:0}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 34px;gap:24px}.breadcrumb{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:12px}.breadcrumb strong{color:var(--text);font-weight:500;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb .icon{width:13px;height:13px}.top-actions{display:flex;align-items:center;gap:22px}.global-search-button{display:flex;align-items:center;gap:9px;background:none;border:0;color:var(--muted);font-size:12px;padding:8px}.global-search-button kbd{margin-left:38px;border:1px solid var(--line);border-radius:4px;padding:0 5px;font-family:inherit;font-size:12px}.demo-badge{color:var(--amber);font-size:12px;letter-spacing:.055em;border:1px solid var(--line);border-radius:4px;padding:4px 7px;white-space:nowrap}.icon-button.menu-button{display:none}.mobile-shade{display:none}main{padding:35px 34px 24px;max-width:1840px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px}.page-heading p{margin-top:8px;font-size:13px}.page-heading .button{flex:none}.page-footer{display:flex;justify-content:space-between;gap:16px;margin-top:28px;color:var(--muted);font-size:12px}.page-footer span{display:flex;align-items:center;gap:7px}.page-footer .icon{width:13px;height:13px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 13px;border:1px solid var(--line);border-radius:6px;background:var(--raised);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}.button:hover{background:var(--selected)}.button.primary{border-color:transparent;background:var(--accent);color:var(--accent-ink)}.button.primary:hover{filter:brightness(1.1)}.button.danger{color:var(--red)}.button.subtle{background:transparent}.button.small{font-size:12px;min-height:30px;padding:5px 9px}.button .icon{width:16px;height:16px}.button.full{width:100%}.button-row{display:flex;gap:10px;flex-wrap:wrap}.text-button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:3px 0;color:var(--accent);font-size:12px}.text-button:hover{text-decoration:underline;text-underline-offset:3px}.text-button .icon{width:14px;height:14px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;background:transparent;border-radius:6px;color:var(--muted)}.icon-button:hover{background:var(--raised);color:var(--text)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 326px;align-items:start;gap:24px}.content-column{min-width:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 21px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:15px}.panel-heading .muted{font-size:12px}.panel-body{padding:22px}.panel + .panel{margin-top:22px}.panel-note{display:flex;align-items:flex-start;gap:8px;padding:13px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.panel-note .icon{width:15px;height:15px;margin-top:1px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:27px 0 12px}.section-heading h2{font-size:15px}.section-heading p{font-size:12px;margin-top:2px}.tabs{display:flex;gap:22px;align-items:center;border-bottom:1px solid var(--line);padding:0 21px}.tabs button{position:relative;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);min-height:48px;padding:12px 0;font-size:12px;white-space:nowrap}.tabs button[aria-pressed=true]{color:var(--text)}.tabs button[aria-pressed=true]:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px}.input-search{display:flex;align-items:center;position:relative;min-width:100px;flex:1;max-width:270px}.input-search>.icon{position:absolute;left:11px;color:var(--muted);width:16px;height:16px}.input-search input[type=search]{width:100%;padding-left:34px;min-height:35px;font-size:12px}.segmented{display:flex;background:var(--bg);padding:3px;border:1px solid var(--line);border-radius:6px;flex:none}.segmented button{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);border:0;background:none;padding:6px 8px;border-radius:3px;min-height:28px}.segmented .icon{width:14px;height:14px}.segmented button[aria-pressed=true]{background:var(--raised);color:var(--text)}.segmented button:hover{color:var(--text)}
.table-scroll{overflow:auto}.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}.data-table th{font-weight:500;color:var(--muted);font-size:12px;padding:11px 18px;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap}.data-table td{padding:19px 18px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}.data-table tr:last-child td{border-bottom:0}.data-table .selected td{background:var(--selected)}.data-table tbody tr:hover td{background:var(--raised)}.data-table tbody tr.selected:hover td{background:var(--selected)}.row-title{display:flex;align-items:center;gap:12px;background:none;padding:0;border:0;text-align:left;min-width:155px;max-width:100%}.row-title>span:last-child{min-width:0}.row-title strong{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere}.row-title small{display:block;color:var(--muted);font-size:12px;margin-top:3px;overflow-wrap:anywhere}.agent-icon{display:grid;place-items:center;width:34px;height:34px;background:var(--raised);border-radius:8px;color:var(--muted);flex:none}.selected .agent-icon{color:var(--accent);background:var(--panel)}.system-tags{display:flex;gap:5px;flex-wrap:wrap}.system-tag{display:inline-block;font-size:12px;line-height:1.5;padding:2px 6px;background:var(--raised);border:1px solid var(--line);border-radius:4px;color:var(--muted);white-space:nowrap}.status{display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;color:var(--amber)}.status:before{content:'';height:5px;width:5px;border-radius:50%;background:currentColor}.status.ready,.status.success{color:var(--green)}.status.error{color:var(--red)}.status.pending,.status.planned{color:var(--muted)}.row-arrow{color:var(--muted);width:14px;height:14px}.integration-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.integration-row{width:100%;display:flex;align-items:center;gap:13px;padding:16px 20px;border:0;background:var(--panel);text-align:left}.integration-row+.integration-row{border-top:1px solid var(--line)}.integration-row:hover{background:var(--raised)}.integration-row .system-icon{display:grid;place-items:center;width:30px;height:30px;color:var(--muted)}.integration-row .row-text{flex:1;min-width:0}.integration-row strong{display:block;font-size:12px;font-weight:600}.integration-row small{font-size:12px;color:var(--muted)}.integration-row .status{margin-left:auto}.flow-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:21px}.flow-stage{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.flow-stage .icon{width:15px;height:15px}.flow-line{height:1px;background:var(--line);flex:1}.flow-stage.done{color:var(--green)}
.inspector{position:sticky;top:22px;min-width:0}.inspector-intro{padding:22px 22px 17px}.inspector-title{display:flex;align-items:center;gap:11px;margin-bottom:12px}.inspector-title h2{font-size:22px;letter-spacing:-.025em;overflow-wrap:anywhere}.inspector-title>.icon-button{margin-left:auto}.inspector-intro>p{font-size:12px;margin:10px 0 13px;overflow-wrap:anywhere}.inspector-content{padding:21px}.inspector-content>p{font-size:12px;line-height:1.65;margin-bottom:20px}.inspector-content h3{margin-bottom:13px}.inspector-content .section-label{display:flex;align-items:center;justify-content:space-between}.ability-row{display:flex;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}.ability-row:first-of-type{padding-top:5px}.ability-row:last-child{border-bottom:0}.ability-row>.icon{color:var(--muted);width:17px;height:17px}.ability-row>span{flex:1;min-width:0}.ability-row strong{display:block;font-weight:500;overflow-wrap:anywhere}.ability-row small{color:var(--muted);display:block;font-size:12px;margin-top:3px}.ability-row .icon-button{width:25px;height:30px}.type-label{font-size:12px!important;flex:none!important;color:var(--muted);padding:2px 5px;background:var(--bg);border-radius:3px}.type-label.action{color:var(--amber)}.scope-note{margin-top:21px;padding-top:19px;border-top:1px solid var(--line)}.scope-note p{font-size:12px;display:flex;align-items:flex-start;gap:7px}.scope-note .icon{width:14px;height:14px;margin-top:2px;color:var(--green)}.scope-note small{display:block;font-size:12px;color:var(--muted);margin:6px 0 0 21px}.inspector-actions{display:flex;flex-direction:column;gap:10px;padding:0 21px 21px}.fine-print{color:var(--muted);font-size:12px;line-height:1.6}.fine-print.center{text-align:center}.definition{margin:0}.definition>div{padding:12px 0;border-bottom:1px solid var(--line)}.definition>div:first-child{padding-top:0}.definition>div:last-child{border-bottom:0}.definition dt{font-size:12px;color:var(--muted);margin-bottom:5px}.definition dd{font-size:12px;margin:0;overflow-wrap:anywhere}.form{display:flex;flex-direction:column;gap:17px}.form label:not(.check-row){display:block;font-size:12px;font-weight:500}.form label>input:not([type=checkbox]),.form label>select,.form label>textarea{margin-top:7px}.form input:not([type=checkbox]),.form select,.form textarea{width:100%}input:not([type=checkbox]),select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:9px 10px;min-height:38px;color:var(--text);outline-offset:2px}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}textarea{resize:vertical;min-height:75px}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;flex:none;margin:0;cursor:pointer}.form small{font-size:12px;color:var(--muted);display:block;font-weight:400;margin-top:5px}.form fieldset{border:0;padding:0;margin:0}.form legend{font-size:12px;font-weight:600;padding:0;margin-bottom:8px}.check-row{display:flex;align-items:center;gap:10px;min-height:38px;font-size:12px;cursor:pointer}.check-row span{overflow-wrap:anywhere}.form-error{color:var(--red);font-size:12px;line-height:1.6}.form-error:empty{display:none}.help-note{font-size:12px;color:var(--muted);padding:13px 0;border-top:1px solid var(--line)}.form .button-row{padding-top:4px}.empty{padding:36px 24px;text-align:center;max-width:480px;margin:auto}.empty>.icon{height:28px;width:28px;color:var(--muted);margin:0 auto 15px}.empty h2,.empty h3{font-size:15px;margin-bottom:7px}.empty p{font-size:12px;margin:0 auto 18px}.empty .button{margin:auto}.empty.compact{padding:22px}.empty.compact p{margin-bottom:0}
.matrix th:not(:first-child),.matrix td:not(:first-child){text-align:center}.matrix td:first-child{min-width:180px}.matrix th button{border:0;background:none;padding:0;color:var(--text);font-size:12px}.matrix input{width:17px;height:17px}.matrix td{padding:17px 18px}.map-scroll{overflow:auto;padding:6px 20px 20px}.map-headings{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;min-width:600px;color:var(--muted);font-size:12px;padding:5px 0 17px}.map-canvas{position:relative;min-width:600px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;min-height:350px}.map-column{display:flex;flex-direction:column;gap:12px;justify-content:center;z-index:1;min-width:0}.map-node{display:flex;align-items:center;gap:8px;width:100%;text-align:left;min-height:63px;padding:10px;border:1px solid var(--line);background:var(--panel);border-radius:7px;font-size:12px;position:relative}.map-node:hover{background:var(--raised)}.map-node.selected{border-color:var(--accent);background:var(--selected)}.map-node .icon{width:15px;height:15px;color:var(--muted)}.map-node strong{font-size:12px;font-weight:500;display:block;overflow-wrap:anywhere}.map-node small{font-size:12px;display:block;margin-top:3px;color:var(--muted)}.map-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.map-svg path{stroke:var(--line);stroke-width:1.3;fill:none}.map-svg path.highlight{stroke:var(--accent);stroke-width:1.6}.table-footnote{padding:15px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.execution-result{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.execution-result p{font-size:12px;margin-top:10px;line-height:1.7}.execution-result pre{padding:12px;background:var(--bg);font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:6px;color:var(--muted)}.run-progress{font-size:12px;color:var(--accent);display:flex;align-items:center;gap:9px;padding:15px 0}.run-progress .icon{animation:spin 1.5s linear infinite}.execution-meta{font-size:12px;color:var(--muted);margin-top:9px}.wide-content{max-width:1040px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:25px}.settings-grid h2{font-size:16px;margin-bottom:7px}.settings-grid p{font-size:12px;line-height:1.7}.settings-grid .form{max-width:380px}.settings-grid+.settings-grid{border-top:1px solid var(--line)}.access-banner{display:flex;align-items:center;gap:17px;margin-bottom:23px;padding:23px;background:var(--selected);border-radius:var(--radius)}.access-banner>.icon{width:27px;height:27px;color:var(--accent)}.access-banner h2{font-size:17px;margin-bottom:4px}.access-banner p{font-size:12px}.principles{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:24px}.principles h3{display:flex;gap:8px;align-items:center;margin-bottom:9px}.principles h3 .icon{color:var(--muted);width:17px;height:17px}.principles p{font-size:12px;line-height:1.8}.detail-close-mobile{display:none}
dialog{color:var(--text);background:var(--panel);border:0;border-radius:12px;padding:25px;width:min(540px,calc(100% - 32px));max-height:80vh;box-shadow:0 24px 80px #0007}dialog::backdrop{background:#02080f99}dialog h2{font-size:20px}dialog p{font-size:13px;margin:14px 0 24px}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.dialog-heading h2{font-size:18px}#global-search{width:100%}.search-results{max-height:380px;overflow:auto;margin-top:14px}.search-result{display:flex;align-items:center;width:100%;gap:12px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:13px 7px;border-radius:5px}.search-result:hover{background:var(--raised)}.search-result>.icon{color:var(--muted)}.search-result span{flex:1}.search-result strong{font-size:12px;font-weight:500;display:block}.search-result small{font-size:12px;color:var(--muted)}.dialog-footer{color:var(--muted);font-size:12px;padding-top:17px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);z-index:100;max-width:calc(100vw - 32px);padding:12px 20px;border:1px solid var(--line);border-radius:8px;background:var(--raised);font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}.toast.visible{opacity:1;transform:translate(-50%,0)}.run-result-enter{animation:result-enter .45s var(--ease)}@keyframes result-enter{from{transform:translateY(7px);clip-path:inset(0 0 30% 0)}to{transform:translateY(0);clip-path:inset(0)}}@keyframes spin{to{transform:rotate(360deg)}}

@media(min-width:1600px){.split{grid-template-columns:minmax(0,1fr) 370px;gap:30px}main{padding:40px 42px 28px}.topbar{padding:0 42px}.data-table td{padding-top:23px;padding-bottom:23px}.inspector-content{padding:25px}.inspector-intro{padding:25px}.inspector-actions{padding:0 25px 25px}}
@media(max-width:1220px){.shell{grid-template-columns:78px minmax(0,1fr)}.sidebar{width:78px;padding:25px 10px 16px}.brand{padding:0 11px}.brand>span,.workspace,.nav-label,.nav .count,.sidebar-bottom .profile>div:not(.avatar),.local-indicator{display:none}.nav{margin-top:44px}.nav a{padding:13px 18px}.nav-divider{margin:16px 7px}.sidebar-bottom{padding:0 12px}.topbar{padding:0 26px}main{padding:29px 26px 24px}.split{gap:20px;grid-template-columns:minmax(0,1fr) 306px}.toolbar{padding:16px}.data-table th,.data-table td{padding-left:15px;padding-right:15px}.global-search-button kbd{margin-left:12px}}
@media(max-width:1000px){.split{grid-template-columns:minmax(0,1fr)}.inspector{position:static;max-width:none}.inspector-intro{padding-bottom:12px}.inspector-content{padding:20px}.inspector-actions{flex-direction:row;flex-wrap:wrap}.inspector-actions .button{width:auto}.inspector-actions .fine-print{width:100%;text-align:left}.inspector-title h2{font-size:20px}.top-actions{gap:13px}.global-search-button>span,.global-search-button kbd{display:none}.data-table td{padding-top:20px;padding-bottom:20px}.inspector{scroll-margin-top:18px}.detail-close-mobile{display:inline-flex}.page-footer{margin-top:25px}}
@media(max-width:680px){.shell{display:block}.sidebar{transform:translateX(-100%);width:236px;padding:24px 14px}.sidebar.open{transform:translateX(0)}.sidebar.open .brand>span,.sidebar.open .nav-label,.sidebar.open .workspace,.sidebar.open .local-indicator{display:flex}.sidebar.open .workspace{margin-top:28px}.sidebar.open .nav{margin-top:0}.sidebar.open .profile>div:not(.avatar){display:block}.sidebar.open .nav a{padding:12px 15px}.sidebar.open .sidebar-bottom{padding:30px 12px 0}.mobile-shade.open{display:block;position:fixed;inset:0;background:#0008;border:0;z-index:29}.icon-button.menu-button{display:inline-flex}.topbar{height:63px;padding:0 17px;gap:11px}.breadcrumb{gap:7px;flex:1}.breadcrumb>a,.breadcrumb>span,.breadcrumb>.icon{display:none}.breadcrumb strong{max-width:126px}.top-actions{gap:9px}.top-actions>.avatar{display:none}.demo-badge{font-size:12px;padding:4px 5px}.global-search-button{padding:6px}.page-heading{align-items:flex-start;margin-bottom:22px;gap:12px}.page-heading h1{font-size:27px}.page-heading p{font-size:12px;max-width:25ch;margin-top:7px}.page-heading>.button{padding:8px 10px;font-size:12px;min-height:35px}.page-heading>.button .icon{width:14px;height:14px}main{padding:25px 16px 20px}.toolbar{flex-wrap:wrap;gap:13px}.input-search{max-width:none;min-width:100%;order:2}.segmented{margin-left:auto}.tabs{gap:18px;padding:0 16px}.tabs button{font-size:12px}.data-table{min-width:480px}.matrix{min-width:580px}.data-table th,.data-table td{padding-left:15px;padding-right:15px}.panel-heading{padding:17px}.panel-note{padding:13px 16px}.integration-row{padding:15px}.integration-row small{font-size:12px}.integration-row .status{font-size:12px}.flow-preview{padding:18px 16px;gap:9px}.flow-stage{font-size:12px;gap:5px}.flow-stage .icon{width:13px;height:13px}.page-footer{font-size:12px;flex-wrap:wrap;gap:8px}.settings-grid{grid-template-columns:1fr;gap:20px;padding:21px}.settings-grid .form{max-width:none}.principles{grid-template-columns:1fr;gap:26px;padding:21px}.access-banner{padding:19px;align-items:flex-start}.access-banner h2{font-size:15px}.access-banner p{font-size:12px}.inspector-actions .button{flex:1}.section-heading .text-button{font-size:12px}.panel-body{padding:20px}.map-scroll{padding-left:16px;padding-right:16px}}
.icon-button.drawer-close{display:none}
@media(max-width:680px){body.menu-open{overflow:hidden}.icon-button.drawer-close{display:inline-flex;position:absolute;top:23px;right:15px}.sidebar .brand{font-size:24px;padding-left:9px}.sidebar:not(.open){visibility:hidden}.sidebar.open{visibility:visible}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Laravel workspace: extends the prototype's existing visual language. */
.audit-filters.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.status.active{color:var(--green)}
@media(max-width:680px){.audit-filters.form{grid-template-columns:1fr}}
.recovery-result{margin-bottom:28px;display:grid;gap:16px}.recovery-result p{font-size:13px}.recovery-codes{list-style:none;padding:0;margin:0;display:grid;gap:10px}.recovery-codes code{font-size:13px;word-break:break-all}.recovery-codes li{padding:6px 0;border-bottom:1px solid var(--line)}
.search-form .input-search{order:0}
.sidebar{overflow-y:auto}.spaced-panel{margin-top:28px}.invitation-result{margin-bottom:24px;display:grid;gap:14px}.invitation-result p{font-size:13px}.invitation-result .button{justify-self:start}.invitation-result input{width:100%;min-width:0}.invitation-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 24px;border-top:1px solid var(--line)}.invitation-row strong{overflow-wrap:anywhere}.invitation-row small{color:var(--muted);margin-top:4px}.invitation-row details{min-width:190px;max-width:300px}.invitation-row .form{margin-top:14px}summary{cursor:pointer;color:var(--accent);padding:7px 0;font-size:13px}summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.audit-filters{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.audit-filters .button-row{grid-column:1/-1}.audit-table td{vertical-align:top}.audit-table{min-width:790px}.audit-changes{max-width:360px;min-width:200px;font-size:12px;overflow-wrap:anywhere}.audit-changes div{margin-top:10px}.audit-changes dt{color:var(--muted)}.audit-changes dd{margin:3px 0 0}.invitation-row details .button{width:100%}
@media(max-width:680px){.invitation-row{flex-direction:column;padding:18px}.audit-filters{grid-template-columns:1fr}.permission-button{min-width:44px;min-height:44px}.sidebar .nav{gap:2px}.sidebar .sidebar-bottom{padding-top:20px}}
.brand>.brand-content{display:flex}
.brand-content{display:flex;gap:10px;align-items:center}.brand-content>span{font-size:26px}.row-title,.ability-row{text-decoration:none;color:var(--text)}.row-title:hover strong,.ability-row:hover{color:var(--accent)}.tabs a{position:relative;display:flex;align-items:center;min-height:48px;padding:12px 0;color:var(--muted);text-decoration:none;font-size:12px;white-space:nowrap}.tabs a[aria-current=page]{color:var(--text)}.tabs a[aria-current=page]:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}.segmented a{display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:3px;color:var(--muted);font-size:12px;text-decoration:none}.segmented a[aria-current=page]{background:var(--raised);color:var(--text)}.search-form{display:flex;gap:8px;align-items:center;min-width:130px;flex:1}.search-form .input-search{max-width:230px}.search-form input{min-width:100px}.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}.support-copy{font-size:13px;line-height:1.8}.spaced-link{margin-top:15px}.block{display:block}.feedback{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;margin-bottom:22px;border-radius:8px;background:var(--selected);font-size:13px}.feedback.success>.icon{color:var(--green)}.feedback.errors{background:var(--panel);border:1px solid var(--red);color:var(--red)}.feedback ul{padding-left:18px;margin:8px 0 0}.form-layout{display:grid;grid-template-columns:minmax(0,640px) minmax(220px,320px);gap:36px;align-items:start}.form-layout .panel-body{padding:28px}.form-help{padding:10px 0}.form-help h2{font-size:16px;margin:0 0 10px}.form-help h2:not(:first-child){margin-top:30px}.form-help p{font-size:13px;line-height:1.8}.form input[aria-invalid=true]{border-color:var(--red)}.permission-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:var(--bg)}.permission-button.allowed{background:var(--selected);color:var(--accent);border-color:var(--accent)}.permission-button:hover{background:var(--raised)}.auth-page{min-height:100vh;display:grid;place-items:center;padding:48px 20px}.auth-container{width:min(100%,440px);padding:0;margin:0}.auth-container>.brand{justify-content:center;margin-bottom:30px}.auth-panel{padding:32px}.auth-panel h1{font-size:25px}.auth-intro{font-size:13px;line-height:1.7;margin:10px 0 26px}.auth-panel .form{gap:20px}.auth-panel .help-note{margin-top:24px;padding-top:20px;line-height:1.7}.auth-panel input{font-size:15px;min-height:44px}.auth-panel .button{min-height:42px}.auth-footer{display:flex;justify-content:center;align-items:center;gap:7px;font-size:12px;margin-top:25px}.auth-footer>.icon{width:15px;height:15px}code{font-size:12px;overflow-wrap:anywhere}.profile strong{overflow-wrap:anywhere;max-width:125px}.inspector{scroll-margin-top:22px}#main:focus{outline:none}.inspector:focus{outline:2px solid var(--accent)}
@media(max-width:1220px){.sidebar .brand-content>span{display:none}.sidebar .brand{padding-left:11px;padding-right:11px}}
@media(max-width:1000px){.form-layout{grid-template-columns:minmax(0,1fr)}.form-help{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.form-help h2:not(:first-child){margin-top:0}.form-help p{grid-row:2}.inspector-actions>form{flex:1}.inspector-actions>form .button{width:100%}}
@media(max-width:680px){.sidebar.open .brand-content>span{display:inline}.sidebar .brand-content>span{font-size:24px}.topbar{padding:0 15px}.top-actions{gap:6px}.top-actions .demo-badge{font-size:10px}.top-actions .button{font-size:12px;padding:5px 9px}.breadcrumb strong{max-width:85px}.toolbar{gap:12px}.search-form{min-width:100%;order:2}.search-form .input-search{min-width:0;max-width:none}.search-form .button{flex:none}.tabs{gap:16px;overflow:auto}.tabs a{font-size:12px}.form-layout .panel-body{padding:22px}.form-help{display:block}.form-help h2:not(:first-child){margin-top:24px}.pagination{flex-wrap:wrap;font-size:12px;padding:13px 16px}.page-heading{flex-wrap:wrap}.page-heading p{max-width:40ch}.auth-panel{padding:26px}.auth-page{padding:28px 18px}.auth-container{width:100%}.auth-footer{font-size:12px;align-items:flex-start}.profile strong{max-width:135px}}
/* The QR keeps a white plate in both themes: scanners need dark modules on light. */
/* align-self keeps the plate at the QR's width inside the column flex form. */
.qr-frame{align-self:flex-start;width:fit-content;background:#fff;padding:10px;border-radius:8px;line-height:0;margin:2px 0}
.qr-frame svg{display:block;width:200px;height:200px}
.status-low{color:var(--amber)}
/* The reading sits beside its action: state and the control that changes it read as one unit. */
.mfa-state{display:flex;align-items:center;gap:17px;flex-wrap:wrap}
.mfa-state .status{margin-left:0}
.mfa-reading{display:flex;flex-direction:column;gap:2px}
.mfa-reading small{font-size:12px}
.panel-divided{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.session-list{list-style:none;margin:17px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.session-list li{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:8px}
.session-list .icon{width:17px;height:17px;color:var(--muted);flex:none}
.session-current{background:var(--bg)}
.session-current .icon{color:var(--green)}
.session-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.session-text strong{font-size:13px;font-weight:600}
.session-text small{color:var(--muted);overflow-wrap:anywhere}

/* Alternador de tema. O primeiro do grupo à direita carrega o margin-left:auto. */
.theme-toggle{margin-left:auto}
.theme-toggle button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:6px;background:transparent;color:var(--muted);transition:background .15s,color .15s}
.theme-toggle button:hover{background:var(--raised);color:var(--text)}
.theme-toggle .icon{width:18px;height:18px}

/* Avisos do sistema, no topo. Só administradores veem. */
.alerts-menu{position:relative}
.alerts-menu summary{display:flex;align-items:center;justify-content:center;position:relative;width:34px;height:34px;border-radius:6px;color:var(--muted);cursor:pointer;list-style:none}
.alerts-menu summary::-webkit-details-marker{display:none}
.alerts-menu summary:hover{background:var(--raised);color:var(--text)}
.alerts-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.alerts-count{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;border-radius:8px;background:var(--red);color:var(--bg);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.alerts-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:min(380px,calc(100vw - 32px));padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 44px -18px #000c}
.alerts-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 10px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.alerts-head small{color:var(--muted)}
.alerts-item{position:relative;display:flex;gap:10px;padding:9px 22px 9px 10px;border-radius:6px}
.alerts-item .icon{width:16px;height:16px;flex:none;margin-top:2px;color:var(--amber)}
.alerts-item.critical .icon,.alerts-item.emergency .icon,.alerts-item.alert .icon{color:var(--red)}
.alerts-item span{display:flex;flex-direction:column;gap:2px;min-width:0}
.alerts-item strong{font-size:13px;font-weight:500;overflow-wrap:anywhere}
.alerts-item small{color:var(--muted)}
.alerts-unread{background:var(--selected)}
.alerts-unread:after{content:'';position:absolute;top:14px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.alerts-read strong{font-weight:400;color:var(--muted)}
.panel-heading+.settings-grid{border-top:0}
.integration-row .button{flex:none}
/* A corrente até o WHMCS: cada elo é um veredito, e a linha entre as marcas mostra até onde chegou. */
.chain{list-style:none;margin:0;padding:20px 22px 4px}
.chain-step{position:relative;display:flex;gap:13px;padding-bottom:20px}
.chain-step:last-child{padding-bottom:16px}
.chain-step:not(:last-child):before{content:'';position:absolute;left:12px;top:26px;bottom:2px;width:1px;background:var(--line)}
.chain-step.done:not(:last-child):before{background:var(--green)}
.chain-mark{display:grid;place-items:center;width:25px;height:25px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.chain-mark .icon{width:14px;height:14px}
.chain-step.done .chain-mark{border-color:var(--green);color:var(--green)}
.chain-body{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:3px}
.chain-body strong{font-size:13px;font-weight:600}
.chain-step.todo .chain-body strong{font-weight:500;color:var(--muted)}
.chain-body small{color:var(--muted);overflow-wrap:anywhere}
.connector-actions{display:flex;flex-wrap:wrap;gap:10px;padding:0 22px 20px}
.credentials-handoff{border:1px solid var(--accent)}
.handoff-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:18px 0 12px}
.handoff-grid input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
@media(max-width:680px){.chain{padding:16px 16px 2px}.connector-actions{padding:0 16px 16px}.handoff-grid{grid-template-columns:1fr}}
.form-dialog{padding:0}
.form-dialog .dialog-scroll{overflow-y:auto;padding:22px}
.form-dialog .feedback{margin-bottom:18px}
.dialog-danger{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.dialog-danger .form{margin-top:12px}
.parameters{border:1px solid var(--line);border-radius:8px;padding:16px;margin:0}
.parameters legend{padding:0 6px;font-size:13px;font-weight:600}
.parameter-row{display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1.6fr) auto;gap:10px;align-items:end;margin-top:12px}
.parameter-required{flex-direction:row;align-items:center;gap:6px;white-space:nowrap;padding-bottom:9px}
.parameter-required input{width:auto;min-height:0}
@media(max-width:900px){.parameter-row{grid-template-columns:1fr}.parameter-required{padding-bottom:0}}
.helena-setup .definition{margin-bottom:12px}
.helena-setup code{overflow-wrap:anywhere}
.parameter-line{margin-top:4px}
.code-block{width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.6;resize:vertical;margin:10px 0}
.token-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.token-block .button{margin-top:10px}
.token-block input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.workspace-menu{position:relative}
.workspace-menu summary{cursor:pointer;list-style:none}
.workspace-menu summary::-webkit-details-marker{display:none}
.workspace-menu summary:hover{background:var(--raised)}
.workspace-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.workspace-menu summary .icon{width:15px;height:15px;color:var(--muted);transition:transform .15s}
.workspace-menu[open] summary .icon{transform:rotate(90deg)}
.workspace-menu .profile-menu-list{top:calc(100% - 14px);bottom:auto}
.workspace-menu .profile-menu-list button[disabled]{color:var(--muted);cursor:default;opacity:1}
.workspace-menu .system-tag{margin-left:auto}
.audit-table .row-unread td:first-child{box-shadow:inset 2px 0 var(--accent)}
.audit-table .row-unread small{color:var(--accent)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent);text-decoration:underline}
.alerts-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;margin-top:6px;border-top:1px solid var(--line)}
.alerts-empty{display:flex;align-items:flex-start;gap:10px;padding:11px 10px;font-size:13px;color:var(--muted)}
.alerts-empty .icon{width:16px;height:16px;flex:none;margin-top:2px;color:var(--green)}

/* Separa o perfil da navegação. Recuo igual ao do .nav-divider para as duas linhas
   terem o mesmo comprimento; o padding do bloco fica menor para o nome não quebrar. */
.sidebar-bottom{position:relative}
.sidebar-bottom:before{content:'';position:absolute;top:0;left:12px;right:12px;height:1px;background:var(--line)}

/* Menu do perfil: abre para cima, porque mora no rodapé da barra lateral. */
.profile-menu{position:relative}
.profile-menu summary{display:flex;align-items:center;gap:8px;padding:7px;border-radius:8px;cursor:pointer;list-style:none}
.profile-menu summary::-webkit-details-marker{display:none}
.profile-menu summary:hover{background:var(--raised)}
.profile-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.profile-copy{flex:1;min-width:0;display:flex;flex-direction:column}
/* Nome completo em duas linhas: a barra deixa ~144px, que corta quase todo nome com sobrenome. */
.profile-copy strong{font-size:12px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.profile-copy small{color:var(--muted)}
.profile-menu summary .icon{width:15px;height:15px;color:var(--muted);transition:transform .15s}
.profile-menu[open] summary .icon{transform:rotate(180deg)}
.profile-menu-list{position:absolute;bottom:calc(100% + 6px);left:0;right:0;z-index:40;display:flex;flex-direction:column;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 44px -18px #000c}
.profile-menu-list a,.profile-menu-list button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:var(--text);font-size:13px;font-weight:500;text-align:left;text-decoration:none;transition:background .15s}
.profile-menu-list a:hover,.profile-menu-list button:hover{background:var(--raised)}
.profile-menu-list .icon{width:16px;height:16px;color:var(--muted)}
.profile-menu-list form{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}

/* Seletor de icone do agente */
.icon-picker{display:flex;flex-direction:column;gap:8px}
.icon-group{border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.icon-group summary{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;font-size:13px;font-weight:600;border-radius:8px}
.icon-group summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon-group[open] summary{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;padding:12px}
.icon-option{position:relative}
.icon-option input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.icon-option span{display:grid;place-items:center;height:42px;border:1px solid transparent;border-radius:6px;color:var(--muted);transition:background .15s,color .15s}
.icon-option:hover span{background:var(--raised);color:var(--text)}
.icon-option input:checked+span{background:var(--selected);border-color:var(--accent);color:var(--accent)}
.icon-option input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.icon-option .icon{width:21px;height:21px}
.qr-manual{margin:2px 0}
.qr-manual summary{cursor:pointer;color:var(--accent);padding:4px 0}
.qr-manual summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.google-button{margin-top:2px}
/* The mark keeps Google's own colours, so it stays legible on either theme. */
.google-mark{flex:none}

/* Rodapé: nota à esquerda, identidade e versão à direita, sobre uma linha que o ancora. */
.page-footer{align-items:center;padding-top:20px;border-top:1px solid var(--line)}
.footer-note{display:flex;align-items:center;gap:7px}
.footer-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.footer-link{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);font-size:12px;text-decoration:none;transition:background .15s,color .15s}
.footer-link:hover{background:var(--raised);color:var(--text)}
.footer-link .icon{width:14px;height:14px}
.footer-hint{color:var(--accent)}
.footer-org{padding-left:8px;border-left:1px solid var(--line)}

/* Só quando aberto: um display aqui sem [open] anula o display:none do navegador. */
.changelog-dialog{width:min(620px,calc(100% - 32px));padding:0}
.changelog-dialog[open]{display:flex;flex-direction:column}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 22px 17px;border-bottom:1px solid var(--line)}
.dialog-head p{margin-top:4px}
.changelog-scroll{overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:24px}
.changelog-entry h3{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.changelog-version{display:inline-flex;padding:2px 7px;border-radius:4px;background:var(--selected);color:var(--accent);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.changelog-entry small{color:var(--muted)}
.changelog-entry ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:13px}
.changelog-entry li::marker{color:var(--line)}
.dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 22px;border-top:1px solid var(--line)}

/* Uma medida por página: cabeçalho, conteúdo e rodapé na mesma coluna, centrados.
   Sem isto o conteúdo limitado encosta à esquerda e o rodapé se estica até a borda. */
main:has(.wide-content){--measure:1040px}
main:has(.dashboard){--measure:1520px}
main:has(.wide-content)>*{max-width:var(--measure);margin-inline:auto;width:100%}

/* Painel */
.dashboard{display:flex;flex-direction:column;gap:24px}
.dashboard-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.dashboard-bento{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;align-items:stretch}
/* Sem isto, a tabela larga estoura a coluna: item de grid tem min-width auto por padrão. */
.dashboard-split>.panel,.dashboard-bento>.panel{min-width:0}
/* `.panel + .panel` empilha painéis na vertical; dentro do grid ele só desce os irmãos
   em 22px e desalinha a linha inteira, porque o espaçamento aqui já é o gap. */
.dashboard-split>.panel+.panel,.dashboard-bento>.panel+.panel{margin-top:0}
.reach-grid{width:100%}
.dashboard .panel-body{padding:22px}
.dashboard .empty{padding:28px 22px}
.dashboard .empty h3{font-size:15px;font-weight:600;letter-spacing:-.015em;margin:0 0 6px}
.heading-side{display:flex;align-items:center;gap:8px}
.demo-tag{color:var(--amber);font-size:12px;letter-spacing:.04em;border:1px solid var(--line);border-radius:4px;padding:2px 6px;white-space:nowrap}

/* Herói: o mecanismo desenhado, e o estado verdadeiro de cada etapa ao lado. */
.hero-panel{display:grid;grid-template-columns:1.45fr 1fr;gap:0}
.hero-flow{padding:28px;display:flex;flex-direction:column;gap:20px;min-width:0}
.hero-heading p{margin-top:8px;font-size:13px;max-width:52ch}
/* Etapas em HTML para reaproveitar o componente de ícone; o trilho é um pseudo-elemento atrás. */
/* O trilho cruza o centro dos círculos: 54px de diâmetro, menos 1px da própria linha. */
/* O gap deixa cada coluna menor que 25%, então o centro do círculo não cai em 12,5%.
   --flow-edge é a metade de uma coluna real, que é exatamente onde o primeiro centro está. */
.flow-steps{--flow-gap:16px;--flow-edge:calc((100% - var(--flow-gap) * 3) / 8);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--flow-gap);position:relative;flex:1}
.flow-steps:before{content:'';position:absolute;left:var(--flow-edge);right:var(--flow-edge);top:26px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 11px)}
/* ponytail: anima left, não transform, para a parada bater com a geometria em qualquer largura.
   São 2px de altura; se algum dia pesar no perfil, troque por transform e recalcule o percurso. */
.flow-steps:after{content:'';position:absolute;top:26px;height:2px;width:9%;border-radius:4px;background:var(--accent);animation:flow-run 4.8s var(--ease) infinite}
/* Os nós ficam acima do trilho e do pulso, que são pseudo-elementos e pintam depois. */
.flow-steps li{align-content:start;z-index:1}
@keyframes flow-run{0%{left:var(--flow-edge);opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - var(--flow-edge) - 9%);opacity:0}}

/* O nó que decide pulsa quando a solicitação chega nele, no mesmo ciclo do trilho. */
.flow-key .flow-dot{position:relative}
.flow-key .flow-dot:before,.flow-key .flow-dot:after{content:'';position:absolute;inset:-2px;border-radius:50%;animation:flow-ping 4.8s var(--ease) infinite;pointer-events:none}
.flow-key .flow-dot:before{background:radial-gradient(circle,color-mix(in oklab,var(--accent) 32%,transparent) 0%,transparent 68%)}
.flow-key .flow-dot:after{border:1.5px solid var(--accent);animation-delay:.28s}
@keyframes flow-ping{0%,5%{transform:scale(.92);opacity:0}13%{opacity:.8}48%,100%{transform:scale(2.15);opacity:0}}
.flow-steps li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;position:relative}
.flow-dot{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--panel);border:1.5px solid var(--line);color:var(--muted)}
.flow-dot .icon{width:22px;height:22px}
.flow-key .flow-dot{background:var(--selected);border-color:var(--accent);color:var(--accent);box-shadow:0 6px 18px -8px var(--accent)}
.flow-name{font-size:13px;font-weight:600}
.flow-steps small{font-size:12px;color:var(--muted);max-width:20ch;line-height:1.45}
.flow-legend{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.flow-legend strong{color:var(--text);font-size:18px;font-weight:650;font-variant-numeric:tabular-nums;margin-right:5px}
.flow-legend-off{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12px}
.flow-legend-off .icon{width:14px;height:14px}

.hero-path{padding:28px;border-left:1px solid var(--line);background:var(--bg);border-radius:0 12px 12px 0;min-width:0}
.path-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.path-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.path-list a{display:flex;align-items:center;gap:12px;padding:11px 0;text-decoration:none;color:var(--text);border-bottom:1px solid var(--line)}
.path-list li:last-child a{border-bottom:0}
.path-list a:hover .path-text strong{color:var(--accent)}
.path-list a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.path-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--muted);flex:none}
.path-mark .icon{width:15px;height:15px}
.path-done .path-mark{background:var(--selected);border-color:var(--green);color:var(--green)}
.path-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.path-text strong{font-size:13px;font-weight:600;transition:color .15s}
.path-text small{font-size:12px;color:var(--muted)}
.path-open .path-text strong{color:var(--muted)}
.path-count{font-size:18px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--muted)}
.path-done .path-count{color:var(--text)}

/* Gráfico de área: geometria em atributos SVG, nunca em style inline (CSP style-src 'self'). */
.area-chart{width:100%;height:auto}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-tick{fill:var(--muted);font-size:12px;font-family:inherit;font-variant-numeric:tabular-nums}
.area-fill{fill:var(--selected);opacity:.55}
.area-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.area-point{fill:transparent}
.area-point:hover{fill:var(--accent)}
.chart-footnote{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.chart-footnote strong{color:var(--text);font-variant-numeric:tabular-nums}

.stack-bar{display:flex;height:10px;border-radius:4px;overflow:hidden;background:var(--bg)}
.stack-part{display:block;height:100%}
.stack-part.success{background:var(--green)}
.stack-part.denied{background:var(--amber)}
.stack-part.failed{background:var(--red)}
.legend-list{list-style:none;margin:17px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.legend-list li{display:flex;align-items:center;gap:8px;font-size:13px}
.legend-dot{width:8px;height:8px;border-radius:50%;flex:none}
.legend-dot.success{background:var(--green)}
.legend-dot.denied{background:var(--amber)}
.legend-dot.failed{background:var(--red)}
.legend-text{color:var(--muted)}
.legend-value{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}

.latency-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:14px}
.latency-list li{display:grid;grid-template-columns:1fr;gap:6px}
.latency-label{font-size:13px;color:var(--muted)}
.latency-track{position:relative;height:8px;border-radius:4px;background:var(--bg);overflow:hidden}
.latency-p95,.latency-p50{position:absolute;left:0;top:0;height:100%;border-radius:4px}
.latency-p95{background:var(--selected)}
.latency-p50{background:var(--accent)}
.latency-value{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.latency-value small{color:var(--muted);font-weight:400;margin-left:2px}

.reach-grid th[scope=row]{white-space:nowrap;vertical-align:middle}
.reach-agent{display:flex;align-items:center;gap:9px}
.agent-icon.small{width:27px;height:27px}
.agent-icon.small .icon{width:16px;height:16px}
.reach-cell{text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.reach-cell span{display:block}
.reach-0{color:var(--muted);font-weight:400}
.reach-1{background:color-mix(in oklab,var(--accent) 12%,transparent)}
.reach-2{background:color-mix(in oklab,var(--accent) 22%,transparent)}
.reach-3{background:color-mix(in oklab,var(--accent) 34%,transparent)}
.reach-4{background:color-mix(in oklab,var(--accent) 48%,transparent);color:var(--text)}

.reach-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.reach-row:last-child{border-bottom:0}
.reach-row:hover .reach-name{color:var(--accent)}
.reach-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.reach-name{display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:600;transition:color .15s}
.reach-name small,.reach-count small{font-size:12px;font-weight:400;color:var(--muted)}
.reach-count{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:18px;font-weight:650;font-variant-numeric:tabular-nums}

.gap-list{list-style:none;margin:17px 0 0;padding:17px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.gap-list a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:8px;background:var(--bg);text-decoration:none;color:var(--text);transition:background .15s}
.gap-list a:hover{background:var(--selected)}
.gap-list a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gap-list svg{flex:none;width:19px;height:19px}
.gap-count{font-size:18px;font-weight:650;font-variant-numeric:tabular-nums;min-width:2ch}
.gap-text{font-size:13px;color:var(--muted)}
.gap-open svg{color:var(--amber)}

/* As colunas mantêm um traço visível nos dias zerados, para o eixo continuar legível. */
.activity-chart{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:5px;height:96px}
.activity-chart li{flex:1;display:flex;align-items:flex-end;height:100%}
.activity-column{display:block;width:100%;min-height:2px;border-radius:4px 4px 0 0;background:var(--accent);opacity:.75;transition:opacity .15s}
.activity-chart li:hover .activity-column{opacity:1}

.action-list{list-style:none;margin:17px 0 0;padding:17px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.action-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.action-list code{color:var(--muted);font-size:12px}
.action-list span{font-weight:600;font-variant-numeric:tabular-nums}

.fact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.fact-list li{display:flex;align-items:baseline;gap:12px}
.fact-value{font-size:18px;font-weight:650;font-variant-numeric:tabular-nums;min-width:3.5ch}
.fact-text{display:flex;flex-direction:column;gap:2px;font-size:14px}
.fact-text small{font-size:12px;color:var(--muted)}
.fact-good .fact-value{color:var(--green)}
.fact-warn .fact-value{color:var(--amber)}

@media (max-width:1220px){
    .dashboard-bento{grid-template-columns:1fr 1fr}
    .bento-wide{grid-column:1/-1}
}
@media (max-width:1000px){
    .dashboard-split,.dashboard-bento{grid-template-columns:1fr}
    .bento-wide{grid-column:auto}
    .hero-panel{grid-template-columns:1fr}
    .hero-path{border-left:0;border-top:1px solid var(--line);border-radius:0 0 12px 12px}
}
/* Os tres nos da marca acendem em sequencia, no sentido do fluxo: topo, base esquerda, base direita. */
.logo-mark circle{animation:logo-node 4.5s var(--ease) infinite}
.logo-mark circle:nth-of-type(2){animation-delay:.5s}
.logo-mark circle:nth-of-type(3){animation-delay:1s}
@keyframes logo-node{0%,40%,100%{opacity:.6}12%{opacity:1}}

@media (max-width:680px){
    .dashboard{gap:16px}
    .hero-flow,.hero-path{padding:20px}
    .activity-chart{height:76px;gap:3px}
    .flow-legend-off{margin-left:0}
}
   entao um style="width:x%" no elemento e bloqueado e a barra renderiza cheia. */
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}
.h-0{height:0%}.h-1{height:1%}.h-2{height:2%}.h-3{height:3%}.h-4{height:4%}.h-5{height:5%}.h-6{height:6%}.h-7{height:7%}.h-8{height:8%}.h-9{height:9%}.h-10{height:10%}.h-11{height:11%}.h-12{height:12%}.h-13{height:13%}.h-14{height:14%}.h-15{height:15%}.h-16{height:16%}.h-17{height:17%}.h-18{height:18%}.h-19{height:19%}.h-20{height:20%}.h-21{height:21%}.h-22{height:22%}.h-23{height:23%}.h-24{height:24%}.h-25{height:25%}.h-26{height:26%}.h-27{height:27%}.h-28{height:28%}.h-29{height:29%}.h-30{height:30%}.h-31{height:31%}.h-32{height:32%}.h-33{height:33%}.h-34{height:34%}.h-35{height:35%}.h-36{height:36%}.h-37{height:37%}.h-38{height:38%}.h-39{height:39%}.h-40{height:40%}.h-41{height:41%}.h-42{height:42%}.h-43{height:43%}.h-44{height:44%}.h-45{height:45%}.h-46{height:46%}.h-47{height:47%}.h-48{height:48%}.h-49{height:49%}.h-50{height:50%}.h-51{height:51%}.h-52{height:52%}.h-53{height:53%}.h-54{height:54%}.h-55{height:55%}.h-56{height:56%}.h-57{height:57%}.h-58{height:58%}.h-59{height:59%}.h-60{height:60%}.h-61{height:61%}.h-62{height:62%}.h-63{height:63%}.h-64{height:64%}.h-65{height:65%}.h-66{height:66%}.h-67{height:67%}.h-68{height:68%}.h-69{height:69%}.h-70{height:70%}.h-71{height:71%}.h-72{height:72%}.h-73{height:73%}.h-74{height:74%}.h-75{height:75%}.h-76{height:76%}.h-77{height:77%}.h-78{height:78%}.h-79{height:79%}.h-80{height:80%}.h-81{height:81%}.h-82{height:82%}.h-83{height:83%}.h-84{height:84%}.h-85{height:85%}.h-86{height:86%}.h-87{height:87%}.h-88{height:88%}.h-89{height:89%}.h-90{height:90%}.h-91{height:91%}.h-92{height:92%}.h-93{height:93%}.h-94{height:94%}.h-95{height:95%}.h-96{height:96%}.h-97{height:97%}.h-98{height:98%}.h-99{height:99%}.h-100{height:100%}
.panel-collapse>summary.panel-heading{cursor:pointer;color:var(--text);font-size:inherit;list-style:none}
.panel-collapse>summary::-webkit-details-marker{display:none}
.panel-collapse>summary:hover{background:var(--raised)}
.panel-collapse>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.panel-collapse:not([open])>summary.panel-heading{border-bottom:0}
/* ── Tela de entrada ─────────────────────────────────────────────────────────────────────── */
.auth-page{background:var(--sidebar);position:relative;overflow:hidden}
.auth-page:before{content:'';position:fixed;inset:0;background:radial-gradient(42% 38% at 50% 48%,color-mix(in oklab,var(--accent) 12%,transparent),transparent 72%);pointer-events:none}

/* A cena ocupa a janela inteira e fica atrás de tudo. As curvas usam espaço 0–100 esticado, com
   traço de largura fixa, para os pontos de chegada caírem sempre nas mesmas frações da tela. */
.auth-scene{position:fixed;inset:0;pointer-events:none}
/* O deslocamento vem do ponteiro, suavizado no script. Cada camada tem sua profundidade, e a
   translação em 3D mantém o trabalho no compositor. */
.auth-layer{position:absolute;inset:0;transform:translate3d(calc(var(--mx,0) * var(--depth,0) * 1px),calc(var(--my,0) * var(--depth,0) * 1px),0)}
.auth-dust{background-image:radial-gradient(circle,color-mix(in oklab,var(--accent) 26%,transparent) .9px,transparent 1px);background-size:46px 46px;opacity:.22;inset:-40px}
.auth-net{position:absolute;inset:0;width:100%;height:100%}
.auth-net-line{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:5 9;animation:auth-net 2.6s linear var(--delay,0s) infinite;opacity:.9}
.auth-net-line.live{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:7 11}
@keyframes auth-net{to{stroke-dashoffset:-28}}

/* Trilho ancorado no meio da altura, empilhado por gap. Sem geometria em porcentagem: a posição
   vem do fluxo normal, que é o que sobrevive a qualquer tamanho de janela. */
.auth-rail{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:18px}
.auth-rail-in{left:clamp(24px,6vw,120px)}
.auth-rail-out{right:clamp(24px,6vw,120px)}
.auth-rail-name{font-size:12px;font-weight:600;line-height:1.5;text-align:center;margin-bottom:6px}
.auth-rail-name small{display:block;font-weight:400;color:var(--muted)}
.auth-agents{display:flex;flex-direction:column;gap:14px}
/* Os agentes acendem fora de sincronia: é tráfego chegando, não um metrônomo. */
.auth-agent{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);animation:auth-agent 4.2s var(--ease) var(--delay,0s) infinite}
.auth-agent .icon{width:19px;height:19px}
@keyframes auth-agent{0%,100%{border-color:var(--line);color:var(--muted)}42%{border-color:color-mix(in oklab,var(--accent) 60%,var(--line));color:var(--accent)}}
.auth-chip-system{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid var(--line);border-radius:99px;background:var(--panel);font-size:12px;white-space:nowrap}
.auth-chip-system i{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.auth-chip-system.on{border-color:color-mix(in oklab,var(--green) 45%,var(--line))}
.auth-chip-system.on i{background:var(--green);animation:status-live 2.8s ease-in-out infinite}

.auth-container{position:relative;z-index:1;width:min(100%,430px)}
/* overflow visível: o painel herda overflow:hidden de .panel, que cortava o nó do topo. */
.auth-panel{position:relative;overflow:visible;padding-top:54px;box-shadow:0 34px 80px -38px rgb(0 0 0/.8);animation:auth-rise .8s var(--ease) both}
@keyframes auth-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* O nó do meio do fluxo, com o mesmo ping do nó Agenter no painel inicial. */
.auth-core{position:absolute;top:-33px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:var(--selected);border:1.5px solid var(--accent);color:var(--accent);box-shadow:0 8px 24px -8px var(--accent);animation:auth-rise .8s var(--ease) .1s both}
.auth-core .logo-mark{width:31px;height:31px}
.auth-core:before,.auth-core:after{content:'';position:absolute;inset:-2px;border-radius:50%;animation:flow-ping 4.8s var(--ease) infinite;pointer-events:none}
.auth-core:before{background:radial-gradient(circle,color-mix(in oklab,var(--accent) 32%,transparent) 0%,transparent 68%)}
.auth-core:after{border:1.5px solid var(--accent);animation-delay:.28s}
/* O selo espelha o nó: um ancora o painel em cima, o outro embaixo. */
.auth-seal{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:1px solid var(--line);border-radius:99px;background:var(--raised);color:var(--muted);font-size:12px;white-space:nowrap}
.auth-seal .icon{width:14px;height:14px}
.auth-panel .button.primary{transition:transform .15s var(--ease),filter .15s}
.auth-panel .button.primary:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.auth-net-line,.auth-pin,.auth-core:before,.auth-core:after,.auth-target.on i{animation:none}.auth-panel,.auth-core{animation:none}}

.auth-brand{display:none}
/* A superfície que recebe a digitação é a única elevada da tela: sombra com deslocamento e
   desfoque de verdade, e não um halo em volta. */
.auth-panel{box-shadow:0 26px 64px -34px rgb(0 0 0/.72)}
.auth-panel input{transition:border-color .15s,box-shadow .15s}
.auth-panel input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)}
.auth-alternatives{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-alternatives .button{justify-content:center;min-height:42px}
.auth-alternatives .button:only-child{grid-column:1/-1}
.code-input{font-size:24px;letter-spacing:.34em;text-align:center;font-variant-numeric:tabular-nums}

/* Sem largura para a rede, ela sai de cena e o painel continua sozinho, com o nó no topo. */
@media(max-width:1080px){
    .auth-scene{display:none}
    .auth-brand{display:flex;justify-content:center;margin-bottom:34px}
}

/* A escolha carrega uma consequência de segurança, então o aviso fica junto da caixa. */
.remember-row{align-items:flex-start;gap:11px;min-height:0;margin:4px 0 2px}
.remember-row input{margin-top:2px;flex:none}
.remember-row small{display:block;color:var(--muted);margin-top:3px;line-height:1.5}
.device-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.device-row .row-text{flex:1;min-width:0}
.device-row strong{display:block;font-size:13px;font-weight:600}
.device-row small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.device-row .current{color:var(--green)}
.map-headings{text-transform:uppercase;letter-spacing:.08em;text-align:center}
.map-column{align-items:center}
/* O nó é um link, mas não deve parecer um: no comp o texto é branco e cinza, sem sublinhado. */
.map-node{text-decoration:none;color:var(--text);max-width:330px;gap:11px;padding:12px 14px;transition:border-color .15s,background .15s}
.map-node strong{color:var(--text);font-size:13px;font-weight:600;letter-spacing:-.01em}
.map-node small{color:var(--muted);margin-top:2px}
.map-node .icon{width:18px;height:18px}
.map-node .agent-icon{width:34px;height:34px}
.map-node .agent-icon .icon{width:16px;height:16px;color:inherit}
.map-node:hover{border-color:var(--muted)}
.map-node.selected .agent-icon{background:var(--accent);color:var(--accent-ink)}
.map-svg line.map-divider{stroke:var(--line);stroke-dasharray:3 7;stroke-width:1;opacity:.7}
#map-arrow path{fill:var(--line)}
#map-arrow-strong path{fill:var(--accent)}
.test-dialog .dialog-scroll{display:flex;flex-direction:column;gap:18px}
.field-flag{margin-left:7px;font-size:12px;font-weight:400;color:var(--muted)}
.test-result{display:flex;flex-direction:column;align-items:flex-start;gap:11px;border-top:1px solid var(--line);padding-top:18px}
.test-result>.result-json{align-self:stretch}
.test-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.test-status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.test-status.ok{color:var(--green)}
.test-status.failed{color:var(--red)}
.test-status.running{color:var(--amber)}
.test-status.running:before{animation:status-live 1.1s ease-in-out infinite}
.result-json{max-height:340px;overflow:auto;margin:0;padding:15px 16px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.6;white-space:pre;color:var(--muted)}
.result-json:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.result-json:empty{display:none}
.tok-key{color:var(--accent)}
.tok-str{color:var(--text)}
.tok-num{color:var(--amber)}
.tok-bool{color:var(--green)}
.tok-null{color:var(--red)}
.system-summary{gap:13px}
.system-mark{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:8px;background:var(--raised);color:var(--muted);transition:color .15s,background .15s}
.panel-collapse[open]>.system-summary .system-mark,.system-summary:hover .system-mark{background:var(--selected);color:var(--text)}
.system-copy{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto}
.system-copy strong{font-size:15px;font-weight:600;letter-spacing:-.015em}
.system-copy small{font-size:12px;color:var(--muted)}
.status.live:before{animation:status-live 2.8s ease-in-out infinite}
@keyframes status-live{0%,45%,100%{opacity:1}22%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.status.live:before{animation:none}}
.collapse-tail{display:flex;align-items:center;gap:12px}
.collapse-tail>.icon{width:15px;height:15px;color:var(--muted);transition:transform .15s}
.panel-collapse[open]>summary .collapse-tail>.icon{transform:rotate(90deg)}