*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding:100px}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--font);transition:background .2s,color .2s}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent)}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--accent);text-decoration:none}button{border:0}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-family:var(--heading);line-height:1.2;letter-spacing:-.035em}h1{font-size:32px}h2{font-size:24px}h3{font-size:16px}p{color:var(--muted)}small{font-size:12.5px;color:var(--muted)}strong{font-weight:650}code,pre,.mono{font-family:var(--mono)}code{font-size:12px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;padding:16px;background:var(--bg);border-radius:12px;border:var(--hairline);max-height:340px;overflow:auto}.icon{width:19px;height:19px;display:inline-block;vertical-align:middle;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.muted{color:var(--muted)}.accent{color:var(--accent)}.eyebrow{font:12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.boot{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:20px}.skip-link{position:fixed;top:-60px;left:16px;z-index:999;background:var(--accent);color:var(--accent-text);padding:12px}.skip-link:focus{top:10px}.btn{min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:9px 15px;background:var(--surface-2);color:var(--text);border:var(--hairline);font-size:13px;font-weight:650;transition:background .15s,transform .15s}.btn:hover{background:var(--surface-3);transform:translateY(-1px)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn.ghost{background:transparent}.btn.small{min-height:30px;padding:5px 9px;font-size:12px}.btn.danger{color:var(--danger)}.icon-btn{height:35px;width:35px;display:inline-flex;align-items:center;justify-content:center;border:var(--hairline);border-radius:9px;background:transparent;color:var(--muted)}.icon-btn:hover{color:var(--text);background:var(--surface-2)}.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;line-height:1.4;border-radius:6px;background:var(--surface-2);color:var(--muted);border:var(--hairline);white-space:nowrap}.pill.good{background:var(--accent-soft);color:var(--accent);border-color:transparent}.pill.warn{color:var(--warning)}.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between;gap:16px}.wrap{flex-wrap:wrap}.stack{display:grid;gap:16px}.spaced{margin-top:24px}.panel{background:var(--surface);border:var(--hairline);border-radius:var(--radius);padding:22px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.panel-head h3{font-size:15px}.text-btn{color:var(--accent);font-size:12.5px;background:transparent;display:inline-flex;gap:6px;align-items:center}.brand{display:flex;align-items:center;gap:9px;color:var(--text)}.brand img{width:38px;height:38px;object-fit:contain}.brand b{font-size:24px;letter-spacing:-1.2px;font-family:var(--heading)}.brand b span{color:#12eba4}.brand em{font:11px var(--mono);color:var(--muted);font-style:normal;letter-spacing:.2em;display:block;margin-top:-4px}.sidebar{width:var(--sidebar);height:100dvh;position:fixed;inset:0 auto 0 0;background:var(--surface);border-right:var(--hairline);display:flex;flex-direction:column;padding:27px 17px 18px;z-index:30}.sidebar .brand{margin:0 9px 32px}.workspace-switch{border:var(--hairline);border-radius:10px;padding:12px 10px;display:flex;gap:10px;align-items:center;margin-bottom:28px}.workspace-switch .workspace-icon{background:var(--accent-soft);color:var(--accent);padding:7px;border-radius:7px}.workspace-switch strong{display:block;font-size:12px}.workspace-switch small{font-size:12px}.nav-label{font:11.5px var(--mono);letter-spacing:.16em;color:var(--muted);padding:0 12px;margin-bottom:8px}.nav-item{width:100%;display:flex;align-items:center;gap:11px;padding:12px;color:var(--muted);border-radius:9px;background:transparent;margin:3px 0;text-align:left;font-size:13px}.nav-item.active{background:var(--accent-soft);color:var(--accent)}.nav-item:hover{background:var(--surface-2);color:var(--text)}.nav-item .count{margin-left:auto;font-size:12px;border:var(--hairline);padding:0 6px;border-radius:4px}.side-bottom{margin-top:auto}.side-note{border:var(--hairline);border-radius:12px;padding:13px;margin:24px 0 16px}.side-note p{font-size:12px;line-height:1.65;margin:6px 0 10px}.side-note strong{font-size:13px}.user-strip{display:flex;align-items:center;gap:9px;padding:12px 6px 0;border-top:var(--hairline)}.avatar{border-radius:50%;width:31px;height:31px;background:var(--surface-3);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--accent)}.user-strip strong{font-size:12px}.user-strip small{display:block;font-size:12px}.main-shell{margin-left:var(--sidebar);min-height:100dvh;display:flex;flex-direction:column}.topbar{min-height:78px;padding:17px 34px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:var(--hairline);background:var(--bg);position:relative;z-index:21}.breadcrumb{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:10px}.breadcrumb strong{color:var(--text);font-weight:500}.top-actions{display:flex;align-items:center;gap:10px}.mode-switch{display:flex;padding:3px;background:var(--surface);border:var(--hairline);border-radius:9px}.mode-switch button{padding:6px 11px;background:none;color:var(--muted);font-size:12px;border-radius:6px;min-height:29px}.mode-switch button.active{color:var(--accent-text);background:var(--accent);font-weight:700}.select-compact{font-size:12px;max-width:148px;background:var(--surface);color:var(--muted);border:var(--hairline);padding:10px 8px;border-radius:8px}.status-line{display:flex;align-items:center;justify-content:space-between;margin:18px 34px 0;gap:12px;font-size:12px;color:var(--muted)}.status-line .demo-label{display:flex;gap:7px;align-items:center;color:var(--warning)}.main-content{padding:25px 34px 160px;width:100%;max-width:1680px;margin:0 auto}.view-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:20px}.view-title p{font-size:13px;margin-top:8px}.view-title h1{font-size:28px}.hero{position:relative;display:flex;align-items:center;min-height:246px;border:var(--hairline);border-radius:18px;overflow:hidden;background:linear-gradient(110deg,var(--surface) 45%,var(--accent-soft));padding:32px 32px;margin-bottom:22px}.hero-copy{position:relative;z-index:2;width:60%}.hero h1{font-size:38px;line-height:1.13;margin:12px 0 13px}.hero p{font-size:13px;max-width:375px;margin-bottom:20px;line-height:1.5}.hero .eyebrow{color:var(--accent)}.hero-art{position:absolute;right:-12px;bottom:0;height:100%;width:48%;object-fit:cover;object-position:center;mask-image:linear-gradient(90deg,transparent,#000 22%);opacity:.92}.hero-art-note{position:absolute;right:15px;bottom:10px;font:11px var(--mono);color:#b0c9bc;z-index:1;letter-spacing:.05em}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}.stat{padding:18px;background:var(--surface);border:var(--hairline);border-radius:13px}.stat .label{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12.5px}.stat .label .icon{width:16px;height:16px}.stat strong{font-family:var(--heading);font-size:29px;line-height:1.5;display:block;margin-top:9px}.stat small{font-size:12px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(245px,1fr);gap:20px}.accounts-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.nerd-card{background:var(--surface-2);border:var(--hairline);border-radius:12px;padding:16px;min-width:0}.nerd-card .nerd-icon{width:41px;height:41px;border:var(--hairline);border-radius:11px;padding:4px;background:var(--bg);margin-bottom:15px}.nerd-card h3{font-size:15px}.nerd-card .email{font-size:12px;margin:5px 0 15px;overflow-wrap:anywhere}.provider-list{display:flex;gap:5px;flex-wrap:wrap}.provider{font-size:12.5px;border:var(--hairline);padding:3px 7px;color:var(--muted);border-radius:4px;background:var(--surface)}.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:17px;padding-top:12px;border-top:var(--hairline);gap:8px}.card-foot small{font-size:12.5px}.activity-list{display:grid}.activity-row{display:flex;gap:11px;padding:12px 0;border-bottom:var(--hairline)}.activity-row:last-child{border:0}.activity-dot{width:26px;height:26px;border-radius:7px;color:var(--accent);background:var(--accent-soft);display:grid;place-items:center;flex-shrink:0}.activity-dot .icon{width:13px;height:13px}.activity-row strong{font-size:13px;display:block}.activity-row p{font-size:12px;margin-top:3px}.activity-row time{font:11.5px var(--mono);color:var(--muted);margin-left:auto;white-space:nowrap}.setup-row{display:flex;gap:12px;padding:11px 0;align-items:center}.step-number{display:grid;place-items:center;width:26px;height:26px;border:var(--hairline);border-radius:50%;font:12px var(--mono);color:var(--muted);flex-shrink:0}.step-number.done{background:var(--accent-soft);color:var(--accent);border-color:transparent}.setup-row strong{display:block;font-size:13px}.setup-row p{font-size:12px}.setup-row .icon{margin-left:auto;width:14px}.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cards-grid .nerd-card{background:var(--surface);padding:22px}.cards-grid .nerd-card h3{font-size:18px}.cards-grid .nerd-card .email{font-size:13px}.cards-grid .provider{font-size:12px}.notice{padding:13px 16px;border:var(--hairline);border-radius:10px;display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);background:var(--surface);margin-bottom:20px}.notice .icon{color:var(--accent);width:17px}.notice.warning{border-color:color-mix(in srgb,var(--warning),transparent 60%);color:var(--warning)}.empty{padding:45px 24px;text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:14px}.empty .icon{width:38px;height:38px;margin-bottom:16px;color:var(--accent)}.empty p{margin:12px auto 20px;max-width:460px;font-size:13px}.table-wrap{overflow:auto}.table-wrap.force-cards{border:0;overflow:visible}.table-wrap.force-cards .data-table,.table-wrap.force-cards .data-table tbody,.table-wrap.force-cards .data-table tr,.table-wrap.force-cards .data-table td{display:block;width:100%;max-width:100%}.table-wrap.force-cards .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.table-wrap.force-cards .data-table tr{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:8px 14px;margin-bottom:12px}.table-wrap.force-cards .data-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);text-align:right;overflow:visible}.table-wrap.force-cards .data-table tr td:last-child{border-bottom:0}.table-wrap.force-cards .data-table td::before{content:attr(data-label);font-weight:600;color:var(--muted);text-align:left;flex-shrink:0;max-width:45%}.table-wrap.force-cards .data-table td:not([data-label])::before{content:'Akcje';color:var(--muted)}.table-wrap.force-cards .data-table td .row-actions{flex-wrap:wrap;justify-content:flex-end}
.data-table{border-collapse:collapse;width:100%;font-size:13px}.data-table th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:12px 14px;background:var(--surface-2)}.data-table td{padding:16px 14px;border-bottom:var(--hairline);white-space:nowrap}.data-table td .sub{display:block;font-size:12.5px;color:var(--muted)}.desktop-preview{border:var(--hairline);border-radius:10px;overflow:hidden;margin:18px 0;background:#0a1714;color:#91b1a6}.desktop-preview .window-bar{padding:7px 10px;background:#192b26;display:flex;gap:4px}.window-bar i{width:5px;height:5px;display:block;background:#648478;border-radius:50%}.desktop-preview pre{border:0;margin:0;padding:15px;font-size:12px;background:transparent;min-height:110px;color:#99bbaa}.terminal-label{font:11.5px var(--mono);padding:5px 10px;border-top:1px solid #243d32;color:#75ae90}.plan-card{border:var(--hairline);border-radius:14px;background:var(--surface);padding:22px}.plan-step{display:flex;gap:10px;align-items:center;font-size:13px;margin:12px 0}.plan-step .icon{width:16px;color:var(--accent)}.plan-result{font-size:12.5px;margin-top:14px;color:var(--muted)}.sync-map{display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;margin:25px 0}.sync-node{border:var(--hairline);border-radius:14px;padding:24px;text-align:center;background:var(--surface-2)}.sync-node .icon{width:32px;height:32px;color:var(--accent);margin-bottom:10px}.sync-node h3{margin-bottom:5px}.sync-node p{font-size:12px}.sync-link{text-align:center;color:var(--accent)}.code-box{font:26px var(--mono);letter-spacing:.2em;background:var(--surface-2);padding:18px;border-radius:9px;text-align:center;margin:16px 0;color:var(--accent)}.theme-grid,.layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.choice{padding:15px;text-align:left;border:var(--hairline);border-radius:11px;color:var(--text);background:var(--surface);display:grid;gap:10px;font-size:12.5px}.choice.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.theme-sample{height:44px;border-radius:7px;padding:9px;display:flex;gap:5px}.theme-sample i{height:100%;width:20%;border-radius:3px}.theme-sample.dark{background:#0b1113}.theme-sample.dark i{background:#21efad}.theme-sample.light{background:#e5efec}.theme-sample.light i{background:#087a57}.theme-sample.warm{background:#efe6da}.theme-sample.warm i{background:#935124}.layout-grid .choice .icon{width:29px;height:29px;color:var(--accent)}.layout-grid small{font-size:12.5px}.composer-dock{position:fixed;bottom:0;left:var(--sidebar);right:0;z-index:22;padding:15px 34px 20px;background:linear-gradient(0deg,var(--bg) 65%,transparent);pointer-events:none}.composer-inner{max-width:1450px;margin:auto;pointer-events:auto}.suggestions{display:flex;gap:7px;margin-bottom:10px;overflow:auto;scrollbar-width:none}.suggestion{border:var(--hairline);padding:5px 10px;border-radius:6px;font-size:12px;white-space:nowrap;background:var(--surface);color:var(--muted)}.suggestion:hover{color:var(--accent)}.composer{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:9px 11px;border-radius:13px}.composer .agent-glyph{background:var(--accent-soft);color:var(--accent);padding:8px;border-radius:8px}.composer input{width:100%;border:0;color:var(--text);padding:7px;background:transparent;min-width:0;font-size:13.5px}.composer input:focus{outline:none}.composer .submit{background:var(--accent);color:var(--accent-text);border-radius:8px;width:36px;height:36px;flex-shrink:0}.modal-backdrop{position:fixed;inset:0;background:#0009;backdrop-filter:blur(5px);display:grid;place-items:center;z-index:90;padding:20px}.modal{background:var(--surface);border:var(--hairline);border-radius:20px;max-width:600px;width:100%;max-height:90dvh;overflow:auto;box-shadow:0 25px 90px #0007}.modal-header{padding:24px 26px 17px;display:flex;justify-content:space-between;align-items:center;gap:16px}.modal-body{padding:8px 26px 26px}.modal h2{font-size:23px}.modal .intro{font-size:13px;margin-bottom:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;font-size:13px;color:var(--muted)}.field span{color:var(--text);font-size:12px;font-weight:600}.field input,.field select,.field textarea{border:var(--hairline);border-radius:8px;background:var(--bg);color:var(--text);padding:11px 12px;width:100%;min-width:0;font-size:13.5px}.field input[readonly]{color:var(--muted)}.field textarea{min-height:80px;resize:vertical}.check-group{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}.check-pill{display:flex;gap:7px;padding:9px 11px;border:var(--hairline);border-radius:8px;background:var(--bg);font-size:13px;color:var(--text)}input[type=checkbox]{accent-color:var(--accent)}.field-note{font-size:12px;color:var(--muted)}.form-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.form-error{color:var(--danger);font-size:13px;margin:10px 0;min-height:0}.auth-toggle{margin-top:20px;text-align:center;font-size:12.5px}.auth-toggle button{border:0;background:none;color:var(--accent);padding:5px}.dialog-tabs{display:flex;gap:10px;margin-bottom:20px}details summary{cursor:pointer;font-size:12.5px;color:var(--muted);margin:8px 0 12px}.toast{padding:13px 18px;background:var(--surface-3);border:1px solid var(--accent);box-shadow:var(--shadow);color:var(--text);border-radius:11px;font-size:13px;max-width:480px;display:flex;gap:12px}.toast.error{border-color:var(--danger)}#toasts{position:fixed;bottom:130px;right:28px;display:grid;gap:10px;z-index:150;max-width:calc(100% - 40px)}.onepage-shell,.chat-shell{margin:0}.onepage-shell .topbar,.chat-shell .topbar{padding:17px max(24px,calc((100vw - 1180px)/2))}.onepage-shell .status-line,.chat-shell .status-line{max-width:1180px;width:calc(100% - 48px);margin:16px auto 0}.onepage-shell .main-content{max-width:1040px;padding-top:28px}.onepage-shell .composer-dock,.chat-shell .composer-dock{left:0}.onepage-shell .composer-inner{max-width:976px}.config-section{border:var(--hairline);border-radius:15px;background:var(--surface);margin-bottom:13px;overflow:hidden}.config-section>summary{margin:0;padding:21px 24px;list-style:none;display:flex;align-items:center;gap:14px;color:var(--text);font-size:15px;font-weight:600}.config-section>summary::-webkit-details-marker{display:none}.config-section>summary .icon:last-child{margin-left:auto;width:15px}.config-section[open]>summary{border-bottom:var(--hairline)}.config-content{padding:23px}.config-content .view-title h1{font-size:23px}.config-content .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-shell .main-content{max-width:960px}.chat-heading{text-align:center;margin:22px 0 32px}.chat-heading img{width:64px;height:64px;margin-bottom:16px}.chat-heading h1{font-size:31px;margin-bottom:11px}.chat-heading p{font-size:13px}.chat-thread{display:grid;gap:22px}.chat-message{max-width:90%;font-size:13.5px}.chat-message.user{justify-self:end;padding:14px 19px;border-radius:16px 16px 3px 16px;background:var(--surface-3);color:var(--text)}.chat-message.assistant{justify-self:start;display:flex;align-items:flex-start;gap:11px;color:var(--muted)}.chat-message.assistant .mini-mark{width:27px;height:27px;border:var(--hairline);border-radius:7px;background:var(--surface-2);padding:2px}.chat-message.assistant p{margin:2px 0 10px}.interactive-view{margin-top:24px;border:var(--hairline);border-radius:16px;padding:22px;background:var(--surface)}.interactive-view>.eyebrow{display:flex;gap:8px;align-items:center;margin-bottom:20px}.interactive-view>.eyebrow .icon{width:14px;height:14px}.interactive-view .view-title h1{font-size:23px}.interactive-view .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-shell .composer-inner{max-width:892px}.mobile-brand{display:none}.mobile-menu{display:none}.agent-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--accent-soft);border-radius:10px;padding:12px 16px;font-size:12px;color:var(--accent);margin-bottom:22px}.agent-banner .stages{font:11.5px var(--mono);display:flex;gap:12px}.guide-highlight{position:fixed;border:2px solid #21efad;border-radius:11px;box-shadow:0 0 0 9999px #0008;z-index:110;pointer-events:none;transition:all .38s ease}.guide-cursor{position:fixed;width:32px;height:39px;z-index:113;pointer-events:none;filter:drop-shadow(0 2px 4px #0008);transition:transform .6s cubic-bezier(.25,.8,.25,1);left:0;top:0}.guide-tip{position:fixed;bottom:32px;right:32px;z-index:115;width:345px;background:#101d1a;color:#f0f7f3;border:1px solid #21efad;border-radius:16px;padding:23px;box-shadow:0 18px 60px #0007}.guide-tip .eyebrow{color:#21efad;margin-bottom:10px}.guide-tip h3{font-size:19px}.guide-tip p{font-size:13px;color:#a9c1b9;margin:12px 0 16px}.guide-tip .guide-controls{display:flex;align-items:center;gap:8px}.guide-tip .btn{background:#21372f;color:#edf9f2;border-color:#315244}.guide-tip .btn.primary{background:#21efad;color:#053525}.guide-tip .progress{display:flex;gap:5px;margin-bottom:15px}.guide-tip .progress i{height:3px;flex:1;background:#274739}.guide-tip .progress i.done{background:#21efad}.guide-tip .close-guide{position:absolute;top:16px;right:14px;color:#96b6a8;background:transparent}.guide-tip .progress-count{font:11px var(--mono);color:#95baa9}.kbd{border:var(--hairline);border-radius:4px;padding:1px 5px;font:11.5px var(--mono);color:var(--muted)}.footnotes{font-size:12px;line-height:1.8;color:var(--muted);padding-top:16px}.agent-code{border:var(--hairline);border-radius:9px;background:var(--bg);padding:15px;font:12px/1.8 var(--mono);color:var(--muted);margin:16px 0}.danger-text{color:var(--danger)}.status-ping{height:7px;width:7px;display:inline-block;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@media(min-width:1700px){.main-content{padding-left:50px;padding-right:50px}.hero{min-height:290px}.hero h1{font-size:45px}.hero-art{object-position:top}.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1200px){:root{--sidebar:200px}.topbar{padding:16px 24px}.breadcrumb{display:none}.top-actions{justify-content:space-between;width:100%}.main-content{padding-left:24px;padding-right:24px}.status-line{margin-left:24px;margin-right:24px}.hero{padding:26px;min-height:235px}.hero h1{font-size:33px}.hero-copy{width:63%}.dashboard-grid{grid-template-columns:1fr}.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{padding-left:12px;padding-right:12px}.composer-dock{padding-left:24px;padding-right:24px}.onepage-shell .top-actions,.chat-shell .top-actions{width:auto}.onepage-shell .topbar,.chat-shell .topbar{padding-left:24px;padding-right:24px}}
@media(max-width:760px){:root{--sidebar:0px}.sidebar{display:none}.main-shell{margin-left:0}.topbar{padding:14px 17px;flex-wrap:wrap;gap:14px;position:static;min-height:auto}.mobile-brand{display:flex}.mobile-brand .brand img{width:30px;height:30px}.mobile-brand .brand b{font-size:22px}.mobile-brand .brand em{display:none}.mobile-menu{display:block;width:120px}.top-actions{width:100%!important;justify-content:space-between;gap:6px}.top-actions .theme-select{max-width:85px}.top-actions .layout-select{max-width:119px}.mode-switch button{padding:6px 9px;font-size:12px}.select-compact{font-size:12px;padding:9px 5px}.main-content{padding:22px 17px 160px}.status-line{margin:14px 17px 0;font-size:12px;align-items:flex-start}.status-line .source-extra{display:none}.hero{padding:24px 20px;min-height:305px;align-items:flex-start}.hero h1{font-size:31px}.hero-copy{width:83%}.hero p{max-width:220px;font-size:13px}.hero-art{right:-80px;width:75%;height:65%;opacity:.4;mask-image:linear-gradient(90deg,transparent,#000 75%);bottom:0}.hero-art-note{display:none}.hero-copy .btn{margin-top:8px}.stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px}.stat{padding:14px}.stat strong{font-size:25px;margin-top:5px}.dashboard-grid{gap:14px}.panel{padding:17px}.accounts-preview{gap:9px}.nerd-card{padding:13px}.nerd-card h3{font-size:13px}.nerd-card .email{font-size:12px}.provider{font-size:12.5px;padding:3px 6px}.cards-grid{grid-template-columns:1fr;gap:14px}.cards-grid .nerd-card{padding:20px}.view-title{gap:12px;margin-bottom:20px;align-items:flex-start}.view-title h1{font-size:25px}.view-title p{font-size:13px}.view-title .btn{font-size:12px;padding:9px 10px;white-space:nowrap}.composer-dock{left:0;padding:12px 17px calc(13px + env(safe-area-inset-bottom))}.composer{gap:5px}.composer .agent-glyph{display:none}.composer input{font-size:13px}.composer .icon-btn{width:31px;flex-shrink:0}.suggestion{font-size:12px;padding:6px 10px}.onepage-shell .topbar,.chat-shell .topbar{padding:14px 17px}.onepage-shell .topbar>.brand,.chat-shell .topbar>.brand{width:100%}.onepage-shell .status-line,.chat-shell .status-line{width:calc(100% - 34px)}.config-section>summary{padding:18px;font-size:13px}.config-content{padding:15px}.config-content .cards-grid,.interactive-view .cards-grid{grid-template-columns:1fr}.config-content .view-title{flex-direction:column}.config-content .dashboard-grid{display:block}.config-content .hero{min-height:310px}.config-content .hero h1{font-size:27px}.chat-heading h1{font-size:26px}.chat-heading{margin:10px 0 26px}.interactive-view{padding:15px}.interactive-view .view-title{flex-wrap:wrap}.chat-message{max-width:96%}.theme-grid,.layout-grid{gap:7px}.choice{padding:10px;font-size:12.5px}.theme-sample{height:34px}.form-grid{grid-template-columns:1fr;gap:0}.modal-backdrop{padding:9px;align-items:end}.modal{max-height:92dvh;border-radius:19px 19px 11px 11px}.modal-header{padding:22px 20px 14px}.modal-body{padding:6px 20px 24px}.modal h2{font-size:22px}.sync-map{grid-template-columns:1fr 38px 1fr;margin:16px 0}.sync-node{padding:18px 9px}.sync-node h3{font-size:13px}.sync-node p{font-size:12px;overflow-wrap:anywhere}.sync-node .icon{width:27px;height:27px}.agent-banner{flex-wrap:wrap}.agent-banner .stages{font-size:12.5px;gap:8px}.guide-tip{width:calc(100% - 28px);right:14px;bottom:14px;padding:19px}.guide-tip h3{font-size:17px}.guide-tip p{font-size:13px}.guide-tip .progress{margin-bottom:10px}.guide-tip .eyebrow{font-size:12.5px}#toasts{right:17px;bottom:140px}.notice{font-size:12.5px;padding:12px}.notice .icon{flex-shrink:0}.panel-head h3{font-size:13px}.data-table{font-size:12.5px}.data-table th,.data-table td{padding:10px}.status-line button{font-size:12px}.card-foot{flex-wrap:wrap}.hero .eyebrow{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* 0.3: shared atomic views, inline flows, intrinsic mobile layout */
8: *{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.brand{background:none;border:0;text-align:left;color:var(--text);padding:0}.brand b{font-size:30px}.brand em{display:block;font-style:normal;font-size:12px;letter-spacing:2px}.app-shell{height:100dvh;display:grid;grid-template-columns:var(--shell-sidebar,290px) minmax(0,1fr)}.sidebar{position:static;width:auto;height:100%;overflow:auto;padding:24px 16px;display:flex;flex-direction:column}.sidebar nav{display:grid;gap:3px}.side-bottom{margin-top:auto;padding-top:20px}.main-shell{height:100dvh;min-height:0;min-width:0;margin:0!important;display:flex;flex-direction:column;overflow:hidden}.topbar{flex:0 0 auto;position:static;min-height:66px;height:auto;padding:12px 22px;gap:10px;flex-wrap:wrap}.top-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}.topbar select{max-width:170px;min-height:35px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:5px 8px}.status-line{position:static;flex:0 0 auto;padding:8px 22px;gap:8px;flex-wrap:wrap;font-size:12px}.main-content{flex:1 1 auto;min-height:0;overflow:auto;padding:26px 28px;max-width:none;width:100%;scroll-padding:24px}.composer-dock{position:static!important;flex:0 0 auto;inset:auto!important;width:auto!important;margin:0!important;border-top:1px solid var(--line);background:var(--bg);padding:12px 24px 8px;backdrop-filter:none}.composer{max-width:1100px;margin:auto;display:flex;gap:10px;min-width:0}.composer input{flex:1;min-width:0}.composer .submit{flex-shrink:0}.mobile-navigation{display:none}.view-title{margin:0 0 20px;display:flex;gap:12px}.view-title h1{font-size:clamp(24px,3vw,34px);letter-spacing:-1px}.view-title p{max-width:760px;line-height:1.6;color:var(--muted)}.widget-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:16px;min-width:0}.widget-panel h2{font-size:18px;margin:0 0 14px}.widget-panel p{line-height:1.65;color:var(--muted)}.widget-panel form{display:grid;gap:14px;max-width:840px}.widget-panel form+form{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}.atomic-field{display:grid;gap:8px;font-size:13px;min-width:0}.atomic-field span{font-weight:600}.atomic-field input,.atomic-field select,.atomic-field textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);padding:12px;min-height:45px}.atomic-field small{color:var(--muted);line-height:1.4}.atomic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.consent-row{display:flex;align-items:flex-start;gap:10px;line-height:1.5;font-size:13px}.consent-row input{width:18px;height:18px;flex-shrink:0;accent-color:var(--accent);margin-top:2px}pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%;overflow:auto;background:var(--bg);padding:16px;border:1px solid var(--line);border-radius:10px;font-size:12px}code{overflow-wrap:anywhere}.dv-header{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;flex-wrap:wrap}.dv-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}.dv-tab{background:transparent;color:var(--muted);border:0;border-radius:8px;padding:10px 14px}.dv-tab.active{background:var(--accent-soft);color:var(--accent)}.dv-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 18px}.dv-toolbar input,.dv-toolbar select{max-width:240px;min-height:38px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px}.dv-count{font-size:12px;color:var(--muted)}.dv-spacer{flex:1}.toolbar-actions{display:flex;flex-wrap:wrap;gap:6px}.dv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:14px}.dv-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px;min-width:0}.dv-card strong{overflow-wrap:anywhere}.dv-card dl,.detail-grid{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr);gap:10px;font-size:13px}.dv-card dt,.detail-grid dt{color:var(--muted)}.dv-card dd,.detail-grid dd{margin:0;overflow-wrap:anywhere}.row-actions{display:flex;gap:8px}.table-wrap{overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:12px;container-type:inline-size}@container (max-width:620px){.table-wrap{border:0;overflow:visible}.data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}.data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.data-table{white-space:normal}.data-table tr{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:8px 14px;margin-bottom:12px}.data-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);text-align:right}.data-table tr td:last-child{border-bottom:0}.data-table td::before{content:attr(data-label);font-weight:600;color:var(--muted);text-align:left;flex-shrink:0;max-width:45%}.data-table td:not([data-label])::before{content:'Akcje';color:var(--muted)}.data-table td .row-actions{flex-wrap:wrap;justify-content:flex-end}}.data-table{border-collapse:collapse;width:100%;font-size:13px}.data-table th,.data-table td{padding:14px;border-bottom:1px solid var(--line);text-align:left;max-width:150px;overflow-wrap:anywhere;vertical-align:top}.data-table td{overflow:hidden;text-overflow:ellipsis}.column-sort{background:none;border:0;color:var(--text);font-weight:600}.inline-feedback{display:flex;justify-content:space-between;gap:10px;background:var(--accent-soft);border:1px solid var(--line);padding:12px 16px;border-radius:10px;margin-bottom:14px;font-size:13px;overflow-wrap:anywhere}.inline-feedback.error{border-color:#c56856}.guide-band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:16px 20px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:14px;margin-bottom:18px}.guide-band p{margin:6px 0;font-size:13px}.guide-cursor{width:30px;height:38px;position:fixed;left:0;top:0;z-index:9;pointer-events:none;transition:transform .5s ease}#tour-root{pointer-events:none}.inline-back{margin:0 0 16px}.inline-review{border:1px solid var(--accent);padding:18px;border-radius:12px;margin:16px 0}.member-row{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.member-row small{display:block;color:var(--muted)}.member-row form{display:flex;flex-wrap:wrap}.onepage-shell .main-content{max-width:1060px;margin:auto}.config-section{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}.config-nav{border:0;background:var(--surface);color:var(--text);width:100%;padding:16px;display:flex;gap:15px;align-items:center;text-align:left}.config-nav>span:last-child{margin-left:auto}.config-content{padding:18px}.chat-heading{padding:5px 0 15px;text-align:left}.chat-heading h1{font-size:clamp(26px,3vw,38px);margin:5px 0}.chat-shell .main-content{width:100%;max-width:1180px;margin:auto}.chat-thread{margin:12px 0;display:grid;gap:10px}.chat-message{max-width:90%;padding:12px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);overflow-wrap:anywhere}.chat-message.user{margin-left:auto;background:var(--accent-soft)}.chat-message p{margin:0 0 6px;line-height:1.5}.interactive-view{border:0;padding:0;margin-top:14px}.nav-select select{width:100%;max-width:350px;background:var(--surface);color:var(--text);border:1px solid var(--line);padding:10px;border-radius:8px}.entity-editor .editor-steps,.editor-steps{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.editor-steps button{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface);color:var(--text)}.editor-steps button.active{border-color:var(--accent);color:var(--accent)}.widget-grid{display:grid;gap:14px}.widget{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.widget input:not([type=checkbox]),.widget select,.widget textarea{width:100%;padding:12px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px}.choice-card{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:12px;border-radius:10px}.choice-card.selected{border-color:var(--accent)}.between{display:flex;align-items:center;justify-content:space-between;gap:10px}.wrap{flex-wrap:wrap}.empty{padding:35px 20px;border:1px dashed var(--line);border-radius:14px;text-align:center}.pagination{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
9: @media(max-width:1050px){.breadcrumb{display:none}.top-actions{margin-left:0}.app-shell{grid-template-columns:246px minmax(0,1fr)}.sidebar{padding:20px 12px}.main-content{padding:20px}.topbar{padding:10px 16px}}
10: @media(max-width:760px){.app-shell{display:block}.sidebar{display:none}.mobile-navigation{display:block;padding:4px 14px}.nav-select select{max-width:none}.topbar{padding:10px 12px}.top-actions{gap:6px;justify-content:flex-start}.topbar select{max-width:145px;font-size:12px;min-height:34px}.topbar .mode-switch button{font-size:12px;padding:8px}.topbar .btn{font-size:12px;padding:8px}.status-line{padding:7px 14px}.main-content{padding:16px 14px}.composer-dock{padding:10px 12px 5px}.composer{padding:8px;gap:5px}.composer input{font-size:14px}.composer .agent-glyph{display:none}.widget-panel{padding:16px;border-radius:12px}.dv-toolbar{gap:8px}.search-box{width:100%}.dv-toolbar input{max-width:none;width:100%}.dv-header{gap:3px}.view-title{margin-bottom:8px}.dv-tabs{width:100%;justify-content:space-between}.dv-tab{font-size:12px;padding:10px}.toolbar-actions .btn{font-size:12.5px}.config-content{padding:12px}.member-row{align-items:flex-start}.atomic-grid{grid-template-columns:1fr}.guide-band{padding:12px;gap:8px}.chat-message{max-width:96%}.chat-heading h1{font-size:27px}.dv-card{padding:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.entity-editor{container-type:inline-size;container-name:entityEditor}.editor-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:20px;align-items:start}@container entityEditor (max-width:820px){.editor-layout{grid-template-columns:1fr}.editor-context{position:static;order:2;padding:16px}.editor-context dl{display:grid}}.editor-section{border:0;padding:0;margin:0 0 24px;min-width:0;scroll-margin-top:16px}.editor-section:not(:last-of-type){border-bottom:1px solid var(--line);padding-bottom:24px}.editor-section .widget-heading{margin-bottom:16px}.editor-section-fields{display:grid;gap:14px}.widget-heading p{font-size:13px}.widget-field{margin-bottom:18px;border:0;padding:0;min-width:0}.widget-field>label,.widget-field>legend{display:block;font-size:13px;font-weight:600;margin-bottom:8px}.widget-field>input,.widget-field>textarea{width:100%;padding:13px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;font:inherit}.choice-grid,.reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.choice-tile,.reference-card{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:13px;cursor:pointer;min-width:0}.choice-tile.is-selected,.reference-card.is-selected{border-color:var(--accent);background:var(--accent-soft)}.choice-tile.is-disabled{opacity:0.38!important;filter:grayscale(0.8);cursor:not-allowed!important}input[type=checkbox],input[type=radio]{accent-color:var(--accent)}.reference-card strong,.reference-card small{display:block;overflow-wrap:anywhere}.reference-card small,.field-note{font-size:12px;color:var(--muted)}.editor-context{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;position:sticky;top:16px;align-self:start;display:flex;flex-direction:column;gap:14px}.editor-context .preview-card{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:16px}.editor-context .preview-card h3{font-size:15px;margin:0 0 4px}.editor-context .preview-card dl,.editor-context dl{font-size:12px;margin:10px 0 0}.editor-context dt{color:var(--muted);margin-top:8px}.editor-context dd{margin:3px 0 0;overflow-wrap:anywhere}.editor-context small{font-size:12px;color:var(--muted);line-height:1.6;display:block}.editor-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}.dv-pagination{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}.dv-pagination select{background:var(--surface);color:var(--text);border:1px solid var(--line);padding:7px;border-radius:6px}.form-error,.field-error{color:var(--danger);font-size:12px}@media(max-width:850px){.editor-layout{grid-template-columns:1fr}.editor-context{position:static;padding:16px}.editor-context dl{display:grid}.editor-context h3{font-size:15px}.reference-grid,.choice-grid{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}}
.composer .agent-glyph.clickable{cursor:pointer;position:relative;user-select:none;transition:background .15s,color .15s}
.composer .agent-glyph.clickable:hover,.composer .agent-glyph.active{background:var(--accent);color:var(--accent-text)}
.composer-input-row .agent-glyph-wrap{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;cursor:pointer;user-select:none;border-radius:10px;padding:4px 8px;transition:background .15s,color .15s}
.composer-input-row .agent-glyph-wrap:hover{background:var(--surface-2)}
.agent-glyph-wrap{position:relative;display:flex;align-items:center}
.composer-inner{position:relative}
.agent-selectlist-menu{position:absolute;bottom:calc(100% + 12px);left:0;width:min(300px,calc(100vw - 28px));background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,0.5);padding:8px;z-index:300;display:flex;flex-direction:column;gap:3px;backdrop-filter:blur(12px);animation:pop-in .15s ease-out}
@keyframes pop-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.agent-selectlist-header{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 8px;font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:1px;border-bottom:1px solid var(--line);margin-bottom:4px}
.agent-selectlist-header .icon-btn.tiny{width:22px;height:22px;padding:0;font-size:16px;line-height:1;border:0;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.agent-selectlist-header .icon-btn.tiny:hover{color:var(--text)}
.agent-selectlist-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto}
.agent-selectlist-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:13px;cursor:pointer;text-align:left;width:100%;transition:background .12s,color .12s}
.agent-selectlist-item:hover{background:var(--accent-soft);color:var(--accent)}
.agent-selectlist-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.agent-selectlist-item .item-icon{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;color:currentColor;flex-shrink:0}
.agent-selectlist-item .item-icon svg{width:16px;height:16px}
.agent-selectlist-item .item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-selectlist-item .item-badge{font-size:12px;padding:2px 6px;border-radius:6px;background:var(--accent);color:var(--accent-text);font-weight:700;flex-shrink:0}
.chat-shell .composer .agent-glyph{display:flex!important}
.sidebar .brand{padding:0 3px;margin:0 0 var(--pad-panel);display:flex;align-items:center;gap:var(--gap-inline)}
.sidebar .nav-item{width:100%;display:flex;align-items:center;gap:var(--gap-inline);padding:10px var(--pad-item);color:var(--muted);border-radius:9px;background:transparent;margin:2px 0;text-align:left;font-family:var(--font)!important;font-size:13px!important;font-weight:500!important;letter-spacing:normal!important;border:0;cursor:pointer;transition:background .15s,color .15s}
.sidebar .nav-item:hover{background:var(--surface-2);color:var(--text)}
.sidebar .nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600!important}
.sidebar .nav-item .nav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;color:currentColor}
.sidebar .nav-item .nav-icon svg{width:18px!important;height:18px!important}
.sidebar .nav-item .nav-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font)!important;font-size:13px!important;font-weight:inherit;color:inherit;letter-spacing:normal!important}
.sidebar .nav-item .nav-count{margin-left:auto;font-size:12.5px;font-family:var(--font);font-weight:600;padding:1px 6px;border-radius:6px;background:var(--surface-2);color:var(--muted);border:var(--hairline);line-height:1.3;flex-shrink:0}
.sidebar .nav-item.active .nav-count{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.sidebar .nav-item .nav-count.zero{opacity:0.6}
.sidebar .nav-item .nav-badge{position:absolute;top:-6px;right:-7px;min-width:14px;height:14px;padding:0 3px;font-size:12px;font-family:var(--font);font-weight:700;line-height:14px;text-align:center;border-radius:7px;background:var(--accent);color:var(--accent-text);pointer-events:none;box-sizing:border-box}
.sidebar .nav-item .nav-badge.zero{background:var(--surface-3);color:var(--muted);border:1px solid var(--line)}
.app-shell:not(.menu-collapsed) .nav-badge{display:none!important}
.app-shell.menu-collapsed .nav-badge{display:flex!important;align-items:center;justify-content:center}
.app-shell.menu-collapsed .nav-count{display:none!important}
.sidebar-surface-group{margin-bottom:12px}
.sidebar-surface-group:last-child{margin-bottom:0}
.sidebar-surface-header{display:flex;align-items:center;gap:6px;padding:8px var(--pad-item,10px) 4px;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);user-select:none;opacity:0.8}
.sidebar-surface-header.current-surface{color:var(--accent);opacity:1}
.app-shell.menu-collapsed .sidebar-surface-header{padding:6px 0;justify-content:center}
.app-shell.menu-collapsed .sidebar-surface-header .surface-header-text{display:none!important}
.app-shell.menu-collapsed .sidebar-surface-header::before{content:"";display:block;width:24px;height:1px;background:var(--line);margin:0 auto}
:root{--shell-sidebar:290px;--shell-collapsed:60px;--shell-chat:clamp(300px,26vw,400px)}
.app-shell{height:100dvh;display:grid;grid-template-columns:var(--shell-sidebar) minmax(0,1fr);grid-template-rows:1fr auto;overflow:hidden;transition:grid-template-columns .2s ease}
.app-shell.chat-open{grid-template-columns:var(--shell-sidebar) minmax(0,1fr) var(--shell-chat)}
.app-shell.menu-collapsed{--shell-sidebar:var(--shell-collapsed)}
.app-shell.auth-gate{display:flex;align-items:center;justify-content:center;min-height:100dvh;height:auto;overflow-y:auto;padding:24px;background:var(--bg)}
.auth-gate-inner{width:min(480px,100%)}
.auth-gate-brand{display:flex;justify-content:center;margin-bottom:18px}
.auth-gate .inline-back{display:block;margin:14px auto 0}
@media(max-width:1050px){.app-shell:not(.menu-collapsed){--shell-sidebar:246px}}
.app-shell>.left-dock{grid-column:1;grid-row:1;height:100%;min-height:0;display:flex;flex-direction:row;overflow:hidden;background:var(--surface);border-right:1px solid var(--line);box-sizing:border-box}
.app-shell>.left-dock>.sidebar{height:100%;min-height:0;overflow-y:auto;background:var(--surface);border-right:none!important;border-bottom:none!important;box-sizing:border-box;flex:1;display:flex;flex-direction:column;padding:var(--gap-row) var(--gap-inline)!important}
.app-shell>.main-shell{grid-column:2;grid-row:1;height:100%!important;min-height:0!important;min-width:0;display:flex;flex-direction:column;overflow:hidden;margin:0!important;box-sizing:border-box}
.app-shell>.right-dock{grid-column:3;grid-row:1;height:100%;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:var(--bg);border-left:1px solid var(--line);box-sizing:border-box}
.app-shell:not(.chat-open)>.right-dock{display:none!important}
.app-shell>.right-dock>.desktop-chat-panel{flex:none;min-height:100%;display:flex;flex-direction:column}
.app-shell.overview-landing.chat-open{display:grid!important;grid-template-columns:minmax(0,1fr) var(--shell-chat)!important;grid-template-rows:minmax(0,1fr) auto!important;height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;align-items:stretch!important}
.app-shell.overview-landing.chat-open>.main-shell{grid-column:1;grid-row:1;width:auto!important;max-width:none!important;min-width:0!important;height:100%!important;min-height:0!important;margin:0!important;overflow:hidden!important}
.app-shell.overview-landing.chat-open .main-content.landing-content{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;max-width:none!important}
.app-shell.overview-landing.chat-open>.right-dock{display:flex!important;grid-column:2;grid-row:1;width:auto!important;max-width:none!important;position:static!important;height:100%!important;max-height:100%!important;min-height:0!important;overflow-y:auto!important;background:var(--bg)!important;border-left:1px solid var(--line)!important;box-sizing:border-box!important}
.app-shell.overview-landing.chat-open>.right-dock>.desktop-chat-panel{display:flex!important;flex:none!important;min-height:100%!important;flex-direction:column!important}
.app-shell.overview-landing.chat-open>.composer-dock{grid-column:1 / -1;grid-row:2;position:static!important;z-index:100!important;background:var(--bg)!important;border-top:1px solid var(--line)!important}
.app-shell.overview-landing:not(.chat-open)>.composer-dock{position:sticky;bottom:0;z-index:100;background:var(--bg);border-top:1px solid var(--line);flex-shrink:0}
.app-shell>.composer-dock{grid-column:1 / -1;grid-row:2;width:100%!important;padding:0!important;margin:0!important;background:transparent!important;border:none!important;z-index:100;box-sizing:border-box}
.app-shell .composer-inner{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
.app-shell .composer{display:flex!important;gap:0!important;align-items:stretch!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
.app-shell .agent-glyph-wrap,.onepage-shell .agent-glyph-wrap{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;flex-shrink:0;box-sizing:border-box;cursor:pointer;user-select:none;border-radius:10px;border:none;background:transparent;outline:none;font:inherit;transition:background .15s,color .15s}
.app-shell .agent-glyph-wrap:hover,.onepage-shell .agent-glyph-wrap:hover{background:var(--surface-2)}
.app-shell .agent-glyph-wrap .agent-glyph{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--accent-soft);color:var(--accent);transition:background .15s,color .15s}
.app-shell .agent-glyph-wrap .agent-glyph.active{background:var(--accent);color:var(--accent-text)}
.app-shell .agent-glyph-wrap .agent-glyph svg{width:18px;height:18px}
.app-shell .agent-glyph-wrap .agent-glyph-label{display:inline-block;font-family:var(--font);font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-shell .composer-body{flex:1;display:flex;flex-direction:column;justify-content:center;background:var(--bg);border-top:1px solid var(--line);border-left:none!important;padding:10px 18px 8px;min-width:0;box-sizing:border-box}
.app-shell .composer-input-row{display:flex;align-items:center;gap:8px;width:100%}
.app-shell .composer-body input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 14px;color:var(--text);font-size:13px}
.app-shell .composer-body input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.app-shell.menu-collapsed>.left-dock>.sidebar{width:var(--shell-collapsed);min-width:var(--shell-collapsed);max-width:var(--shell-collapsed);flex:0 0 var(--shell-collapsed);border-right:1px solid var(--line)}
.app-shell.menu-collapsed>.left-dock>.sidebar .brand-text{display:none}
.app-shell.menu-collapsed>.left-dock>.sidebar nav{width:100%;display:grid;gap:var(--gap-tight)}
.app-shell.menu-collapsed>.left-dock>.sidebar .nav-item .nav-text{display:none}
.app-shell.menu-collapsed>.left-dock>.sidebar .nav-icon svg{width:18px!important;height:18px!important}
.app-shell.chat-open .desktop-chat-panel{display:flex!important;flex:none;min-width:0;height:auto;min-height:100%;flex-direction:column;background:var(--bg)}
.app-shell:not(.chat-open) .desktop-chat-panel{display:none!important}
.view-title{display:flex;align-items:center;margin:0 0 var(--gap-row)}
.dv-header .view-title{margin:0}
.dv-header-menu{display:inline-flex;align-items:center;gap:var(--gap-inline)}
.dv-header-menu .dv-header-selectlist{height:32px;padding:var(--gap-tight) var(--gap-inline);font-family:var(--font);font-size:var(--size-small);font-weight:700;color:var(--text);background:var(--surface-2);border:var(--hairline);border-radius:var(--radius-std);cursor:pointer;outline:none}
.dv-header-menu .dv-header-selectlist:focus{border-color:var(--accent)}
.dv-header-menu .dv-separator{color:var(--muted);font-size:var(--size-small);font-weight:400;user-select:none}
.dv-header-menu h2{font-family:var(--heading);font-size:var(--size-heading);font-weight:700;margin:0;color:var(--text);letter-spacing:-0.01em;line-height:1.3}
.dv-header-menu .dv-header-doc{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-std);transition:color .15s,background .15s}
.dv-header-menu .dv-header-doc:hover{color:var(--accent);background:var(--surface-2)}
.dv-header-menu .dv-header-doc svg{width:16px;height:16px}
.proc-doc-link{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:4px;font-size:var(--size-small);padding:2px 6px;border-radius:4px;transition:color .15s,background .15s}
.proc-doc-link:hover{color:var(--accent);background:var(--surface-2)}
.proc-doc-link svg{width:14px;height:14px}
.onepage-shell .dv-header-menu{display:none}
.onepage-surface{padding:0 5px 22px}
.onepage-surface .onepage-surface-select{width:100%;max-width:340px;height:38px;padding:var(--gap-tight) var(--gap-inline);font-family:var(--font);font-size:var(--size-small);font-weight:700;color:var(--text);background:var(--surface-2);border:var(--hairline);border-radius:var(--radius-std);cursor:pointer;outline:none}
.onepage-surface .onepage-surface-select:focus{border-color:var(--accent)}
.dv-header{display:flex;justify-content:space-between;align-items:center;gap:var(--gap-row);flex-wrap:wrap;margin-bottom:var(--gap-row);border-bottom:var(--hairline);padding-bottom:var(--pad-item)}
.dv-tabs{display:flex;gap:var(--gap-tight);align-items:center;flex-wrap:wrap}
.dv-tab{background:transparent;color:var(--muted);border:1px solid transparent;border-radius:var(--radius-std);padding:6px var(--pad-item);font-size:12.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:var(--gap-tight);transition:background .15s,color .15s;height:34px;box-sizing:border-box}
.dv-tab:hover{background:var(--surface-2);color:var(--text)}
.dv-tab.active{background:var(--accent-soft);color:var(--accent);font-weight:600;border-color:var(--accent)}
.dv-tab-search{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 10px;height:34px;box-sizing:border-box;color:var(--muted);cursor:text;transition:border-color .15s,background .15s}
.dv-tab-search:focus-within{border-color:var(--accent);background:var(--surface-2);color:var(--text)}
.dv-tab-search .search-icon{width:14px;height:14px;flex-shrink:0;stroke:currentColor}
.dv-tab-search input{border:none;background:transparent;color:var(--text);font-family:var(--font);font-size:12.5px;width:110px;padding:0;outline:none;transition:width .2s ease}
.dv-tab-search input:focus{width:160px;outline:none}
.dv-tab-search input::placeholder{color:var(--muted)}
.user-auth-group{display:flex;align-items:center;gap:6px}
.user-auth-group .user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.logout-btn{color:var(--danger)!important}
.logout-btn:hover{background:rgba(255,100,100,.15)!important}
.layout-select.dev-tool{opacity:.75;font-size:12.5px}
.dv-tab.dv-tab-add{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);font-weight:600;margin-left:4px}
.dv-tab.dv-tab-add:hover,.dv-tab.dv-tab-add.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
h1,h2,.view-title h2,.modal h2,.panel-head h3,.widget-panel h2{font-family:var(--heading);font-size:var(--size-heading,19px);font-weight:700;line-height:1.3;letter-spacing:-0.01em}
.hero h1{font-family:var(--heading);font-size:24px;font-weight:700;line-height:1.2}
body,input,select,textarea,button,.sidebar .nav-item,.nav-text,.btn,.dv-tab,.data-table,.dv-card,p,.composer-body input,.agent-glyph-label,.modal-body,.intro,.field>label{font-family:var(--font);font-size:var(--size-base,14px)}
small,.field-note,.status-line,.breadcrumb,.badge,.workspace-sub,.dv-count,.reference-card small,.eyebrow,.pill,.dv-pagination span,.dv-pagination select,.item-badge,.footnotes{font-family:var(--font);font-size:var(--size-small,13px);line-height:1.4}
code,pre,.agent-code,kbd{font-family:var(--mono);font-size:12.5px}
.onepage-shell .composer-body,.chat-shell .composer-body{display:flex;flex-direction:column;flex:1}
.onepage-shell .composer-input-row,.chat-shell .composer-input-row{display:flex;align-items:center;gap:8px;width:100%}
.onepage-shell .agent-glyph-label,.chat-shell .agent-glyph-label{display:none}
.onepage-shell .composer-inner,.chat-shell .composer-inner{width:100%!important;max-width:100%!important}
.onepage-shell .composer .agent-glyph{display:flex!important}
.sidebar-backdrop{display:none}
/* Mobile accordion and full-width composer */
.config-section{margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.12)}
.config-nav{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;background:var(--surface);border:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;user-select:none;box-sizing:border-box;transition:background .15s ease}
.config-nav:hover{background:var(--surface-2)}
.config-nav:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.config-nav-title{flex:1;font-weight:600;font-size:15px;color:var(--text)}
.config-nav-toggle{font-size:20px;line-height:1;font-weight:600;margin-left:auto;color:var(--accent)}
.config-content{padding:16px 18px;border-top:1px solid var(--line);background:var(--bg)}
.onepage-shell .composer-dock,.onepage-shell .composer,.onepage-shell .composer-inner{width:100%!important;max-width:100%!important}
/* Chat Panels */
.desktop-chat-panel{display:flex;flex-direction:column;height:auto;min-height:100%;background:var(--bg);box-sizing:border-box}
.mobile-chat-panel{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--bg);box-sizing:border-box}
.chat-panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line);font-size:12.5px;flex-shrink:0;position:sticky;top:0;z-index:5}
.chat-panel-header .status-ping{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);display:inline-block}
.chat-panel-body{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.desktop-chat-panel .chat-panel-body{flex:none;overflow:visible}
.empty-chat-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 12px;gap:8px;margin:auto 0}
.empty-chat-state .empty-icon{width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--muted);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.empty-chat-state .empty-icon svg{width:22px;height:22px}
.empty-chat-state h4{margin:0;font-size:13px;color:var(--text)}
.suggestion-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.suggestion-pills .suggestion{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:5px 10px;font-size:12.5px;color:var(--text);cursor:pointer;transition:all .15s ease}
.suggestion-pills .suggestion:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chat-panel-body .chat-message{width:100%!important;max-width:100%!important;box-sizing:border-box;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:13px;line-height:1.45;margin:0!important}
.chat-panel-body .chat-message.user{background:var(--accent-soft);border-color:rgba(33,239,173,.2)}
.chat-panel-body .chat-message.assistant,.chat-panel-body .chat-message.agent{background:var(--surface-2);border-color:var(--line)}
.chat-panel-body .chat-author{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.chat-panel-body .chat-message.user .chat-author{color:var(--accent)}
.chat-panel-body .chat-text{word-break:break-word}
.chat-panel-body .chat-meta{font-size:12px;color:var(--muted);margin-top:6px}
.chat-msg-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chat-msg-action{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 10px;font-size:12px;color:var(--accent);cursor:pointer;transition:all .15s ease}
.chat-msg-action:hover{background:var(--accent-soft);border-color:var(--accent)}
.chat-panel-body .chat-message.demo{border-left:3px solid var(--accent);background:var(--accent-soft)}
.chat-panel-body .chat-message.demo .chat-author{color:var(--accent)}
.chat-panel-body .chat-message.error{border-left:3px solid var(--danger);background:rgba(255,80,80,.08)}
.chat-panel-body .chat-message.icon-line{display:flex;flex-direction:row;align-items:center;gap:8px;padding:6px 10px!important;min-height:0}
.chat-msg-glyph,.chat-msg-status{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0;background:var(--surface-3);color:var(--muted)}
.chat-msg-glyph svg,.chat-msg-status svg{width:14px;height:14px}
.chat-message.user .chat-msg-glyph{color:var(--accent)}
.chat-msg-status.ok{color:var(--accent)}
.chat-msg-status.err{color:var(--danger);background:rgba(255,80,80,.12)}
.chat-message.icon-line .chat-msg-actions{margin-left:auto}
.chat-message.icon-line .chat-view-btn{width:22px;height:22px}
.demo-highlight{outline:3px solid var(--accent)!important;outline-offset:2px;border-radius:8px;box-shadow:0 0 0 6px var(--accent-soft);transition:outline-color .3s ease}
.appearance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 18px;margin:14px 0}
.appearance-field{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.appearance-ctl{display:flex;align-items:center;gap:8px;flex-shrink:0}
.appearance-ctl input[type=range]{width:110px;accent-color:var(--accent)}
.appearance-ctl input[type=color]{width:40px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer}
.appearance-ctl output{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:42px;text-align:right}
.appearance-ctl code{font-size:11px;color:var(--muted)}
.audit-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.audit-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
.audit-table td{padding:6px 8px;border-bottom:1px solid var(--line)}
.audit-table tr.audit-fail td{background:rgba(255,80,80,.07)}
.audit-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700}
.audit-badge.ok{background:var(--accent-soft);color:var(--accent)}
.audit-badge.warn{background:var(--warning);color:var(--bg)}
.audit-badge.fail{background:var(--danger);color:var(--bg)}
.audit-summary{font-size:12.5px;font-weight:600}
.audit-summary.ok{color:var(--accent)}
.audit-summary.fail{color:var(--danger)}
.chat-fab{position:fixed;right:24px;bottom:24px;z-index:150;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:var(--accent);color:var(--accent-text);font-weight:650;font-size:13px;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s ease}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab svg{width:18px;height:18px}
[data-mode=demo]{--accent:#4da3ff;--accent-text:#06203d;--accent-soft:rgba(77,163,255,.16)}
[data-theme=light][data-mode=demo],[data-theme=warm][data-mode=demo]{--accent:#1c64d8;--accent-text:#fff;--accent-soft:rgba(28,100,216,.12)}
.activity-list{display:grid}
.activity-list p{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--text)}
.activity-list p:last-child{border-bottom:0}
.activity-list p small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fleet-panel{margin-top:4px}
.fleet-panel .table-wrap{border:0;border-radius:0}
.chat-top-btn{position:relative;order:999;margin-left:auto}
.chat-top-btn.active{color:var(--accent)}
.app-shell.chat-open .chat-top-btn,.app-shell.mobile-chat-active .chat-top-btn{display:none}
.chat-top-icon{position:relative;display:inline-flex;align-items:center;justify-content:center}
.chat-badge{position:absolute;top:-6px;right:-8px;min-width:14px;height:14px;padding:0 3px;font-size:11px;font-weight:700;line-height:14px;text-align:center;border-radius:7px;background:var(--accent);color:var(--accent-text);pointer-events:none;box-sizing:border-box}
.chat-badge.zero{background:var(--surface-3);color:var(--muted);border:1px solid var(--line)}
.chat-collapse-btn{color:var(--accent);flex-shrink:0;position:relative}
.chat-view-btn{align-self:flex-start;margin-top:6px;color:var(--accent);border:1px solid var(--line)}
.doc-link{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}
.doc-link:hover{text-decoration:underline}
/* Manager view: agent board, integrations, terminal */
.chat-console{margin:6px 0 0;padding:10px 12px;background:#0a0f0e;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:11.5px;line-height:1.55;color:#9fd8c2;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.manager-view .agent-status{border-left:3px solid var(--accent)}
.manager-view .agent-status.live{background:linear-gradient(180deg,var(--accent-soft),var(--surface))}
.agent-status-meta{display:flex;flex-direction:column;gap:4px;align-items:flex-end;text-align:right}
.manager-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:14px;margin:14px 0}
.integration-list{display:grid;gap:8px}
.integration-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.integration-row>div{flex:1;min-width:0}
.integration-row small{display:block;font-size:11px}
.integration-icon{display:flex;color:var(--accent)}
.manager-terminal{margin:0;padding:12px;background:#0a0f0e;border:1px solid var(--line);border-radius:10px;font-family:var(--mono);font-size:12px;line-height:1.6;color:#9fd8c2;min-height:140px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.board-col-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line)}
.board-count{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:1px 8px;font-size:11px}
.board-card{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-size:12.5px}
.board-card strong{font-family:var(--mono);font-size:11.5px}
.board-card small{color:var(--muted);font-size:11px}
.board-card.agent-active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.agent-working{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.board-empty{margin-top:10px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:900px){.manager-grid{grid-template-columns:1fr}.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.board{grid-template-columns:1fr}}
/* Network Scan Panel for Location field */
.network-scan-panel{display:none;margin-top:14px;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.widget-field[data-widget="location"]:has(input[value="local"]:checked) .network-scan-panel{display:block}
.network-scan-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.network-scan-header .status-ping{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);display:inline-block}
.network-scan-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.network-scan-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--text);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.network-scan-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.network-scan-item .scan-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background:var(--accent-soft);color:var(--accent);flex-shrink:0}
.network-scan-item .scan-icon svg{width:16px;height:16px}
.network-scan-item .scan-info{flex:1;min-width:0;display:flex;flex-direction:column}
.network-scan-item .scan-info strong{font-size:12.5px;color:var(--text);font-family:var(--mono)}
.network-scan-item .scan-info small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Infinite Scroll Sentinel */
.infinite-scroll-sentinel{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px 10px;color:var(--muted);font-size:12.5px}
.infinite-scroll-sentinel .status-ping{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);display:inline-block;animation:pulse-ping 1.2s infinite ease-in-out}
@keyframes pulse-ping{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
/* Speech recording and auto-send states */
.composer .icon-btn.recording{background:var(--danger-soft,rgba(239,68,68,0.15))!important;color:var(--danger,#ef4444)!important;border-color:var(--danger,#ef4444)!important;animation:pulse-recording 1.2s infinite ease-in-out!important}
@keyframes pulse-recording{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}50%{box-shadow:0 0 0 5px rgba(239,68,68,0)}}
.composer .submit.auto-send{background:var(--accent)!important;color:var(--accent-text,#051613)!important;font-size:12.5px!important;font-weight:700!important;padding:0 10px!important;display:inline-flex!important;align-items:center!important;gap:5px!important;min-width:58px;justify-content:center;animation:pulse-autosend 1.5s infinite ease-in-out}
.auto-send-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-text,#051613);animation:pulse-recording 1.2s infinite ease-in-out;flex-shrink:0}
@keyframes pulse-autosend{0%,100%{opacity:1}50%{opacity:.82}}
/* Mobile Chat Visibility (40% viewport height drawer from bottom) */
.mobile-chat-panel{display:none!important}
.mobile-chat-active .mobile-chat-panel{display:flex!important;flex:0 1 40dvh!important;height:auto!important;max-height:40dvh!important;min-height:20dvh!important;flex-direction:column!important;background:var(--surface)!important;border-top:2px solid var(--line)!important;box-shadow:0 -8px 30px rgba(0,0,0,0.35)!important;overflow:hidden!important;z-index:120!important}
.mobile-chat-active .main-content{display:block!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
.onepage-shell.mobile-chat-active{height:100dvh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.onepage-shell.mobile-chat-active .main-content{display:block!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
.app-shell.overview-landing.mobile-chat-active{height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
.app-shell.overview-landing.mobile-chat-active>.main-shell{height:100%!important;max-height:100%!important;overflow:hidden!important}
.app-shell.overview-landing.mobile-chat-active .main-content.landing-content{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
/* Narrow Desktop Window (<= 960px): Chat collapses to bottom 40% drawer */
@media(max-width:960px){
.app-shell.menu-collapsed{--shell-sidebar:var(--shell-collapsed)!important}
.app-shell.chat-open{grid-template-columns:var(--shell-sidebar) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) 40dvh auto!important}
.app-shell.chat-open > .left-dock{grid-row:1 / 3!important}
.app-shell.chat-open > .main-shell{grid-row:1!important;grid-column:2!important;height:100%!important;min-height:0!important}
.app-shell.chat-open:not(.overview-landing)>.right-dock{position:static!important;grid-row:2!important;grid-column:2!important;height:100%!important;max-height:none!important;min-height:0!important;width:100%!important;background:var(--surface);border-top:2px solid var(--line)!important;border-left:none!important;box-shadow:none!important;display:flex;flex-direction:column}
.app-shell.chat-open > .composer-dock{grid-row:3!important;grid-column:1 / -1!important}
.app-shell.chat-open.menu-collapsed:not(.overview-landing)>.right-dock{left:var(--shell-collapsed)}
.app-shell.overview-landing.chat-open{display:flex!important;flex-direction:column!important;height:auto!important;max-height:none!important;overflow:visible!important;grid-template-columns:none!important;grid-template-rows:none!important}
.app-shell.overview-landing.chat-open>.right-dock{flex:0 1 40dvh!important;width:100%!important;max-width:100%!important;position:static!important;height:auto!important;max-height:40dvh!important;min-height:20dvh!important;border-left:none!important;border-top:1px solid var(--line)!important}
.app-shell.overview-landing.chat-open>.composer-dock{flex:0 0 auto!important;position:sticky!important;bottom:0!important}
.app-shell.chat-open .main-content{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding-bottom:24px}
}
@media(max-width:768px){
.mobile-chat-active .mobile-chat-panel{display:flex!important;flex:0 1 40dvh!important;height:auto!important;min-height:20dvh!important;max-height:40dvh!important}
.mobile-chat-active .main-content{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
.app-shell{height:100dvh;display:flex!important;flex-direction:column!important;grid-template-columns:none!important;grid-template-rows:none!important}
.app-shell>.left-dock{display:none!important}
.app-shell>.main-shell{flex:1 1 auto!important;min-height:0!important;height:auto!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.app-shell>.composer-dock{flex:0 0 auto!important;width:100%!important;z-index:360!important;background:var(--bg)!important;border-top:1px solid var(--line)!important;padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important}
.app-shell .composer{display:flex!important;flex-direction:row!important;gap:8px!important;align-items:center!important;width:100%!important;background:transparent!important;border:none!important;padding:0!important}
.app-shell .agent-glyph-wrap{width:auto!important;min-height:auto!important;background:transparent!important;border-right:none!important;padding:0!important}
.app-shell .agent-glyph-wrap .agent-glyph-label{display:none!important}
.app-shell .agent-glyph-wrap .agent-glyph{display:flex!important}
.app-shell .agent-glyph-wrap .agent-glyph.active{background:var(--accent);color:var(--accent-text)}
.app-shell .composer-body{flex:1 1 auto!important;padding:0!important;background:transparent!important;border-top:none!important;min-height:auto!important}
.app-shell .composer-input-row{display:flex!important;gap:6px!important;width:100%!important}
.app-shell .composer-body input{font-size:13px!important;padding:6px 10px!important}
.app-shell .sidebar,.app-shell.menu-collapsed .sidebar,.left-dock{display:none!important}
.app-shell>.right-dock{display:none!important}
.desktop-chat-panel{display:none!important}
}
/* ==========================================================================
Overview Landing Dashboard (Full-width topbar + main landing page)
========================================================================== */
html:has(.overview-landing),
body:has(.overview-landing) {
height: auto !important;
min-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.app-shell.overview-landing {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
width: 100% !important;
min-height: 100vh !important;
height: auto !important;
overflow: visible !important;
overflow-y: visible !important;
background: var(--bg);
}
.app-shell.overview-landing .main-shell.full-landing,
.app-shell.overview-landing > .main-shell {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
margin-left: auto !important;
margin-right: auto !important;
height: auto !important;
min-height: 100vh !important;
overflow: visible !important;
overflow-y: visible !important;
padding: 0 24px 48px !important;
box-sizing: border-box !important;
}
.app-shell.overview-landing .landing-topbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
min-height: 70px !important;
padding: 14px 0 !important;
border-bottom: 1px solid var(--line) !important;
background: transparent !important;
}
.app-shell.overview-landing .landing-top-actions {
display: flex;
align-items: center;
margin-left: auto;
}
.app-shell.overview-landing .main-content.landing-content {
overflow: visible !important;
overflow-y: visible !important;
height: auto !important;
flex: 1 0 auto !important;
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 24px 0 48px !important;
box-sizing: border-box !important;
}
.app-shell:not(.overview-landing) > .main-shell > .main-content {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* Landing Catalog Grid */
.landing-catalog {
display: flex;
flex-direction: column;
gap: 12px;
}
.catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.catalog-card {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
cursor: pointer;
user-select: none;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
min-height: 130px;
}
.catalog-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
background: var(--surface-2);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.catalog-card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.catalog-card-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: var(--surface-2);
color: var(--accent);
}
.catalog-card-icon svg {
width: 18px;
height: 18px;
}
.catalog-card h3 {
font-size: 14px;
font-weight: 700;
margin: 0 0 6px;
color: var(--text);
}
.catalog-card p {
font-size: 13px;
color: var(--muted);
line-height: 1.45;
margin: 0 0 12px;
}
.catalog-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid var(--line);
font-size: 13px;
font-weight: 600;
color: var(--accent);
}
.catalog-surface {
margin-bottom: 18px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
overflow: hidden;
}
.catalog-surface.is-active {
border-color: var(--accent);
}
.catalog-surface-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 10px 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--muted);
background: var(--surface-2);
border-bottom: 1px solid var(--line);
}
.catalog-surface.is-active .catalog-surface-title {
color: var(--accent);
}
.catalog-lines {
display: flex;
flex-direction: column;
}
.catalog-line {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 14px;
background: none;
border: 0;
border-bottom: 1px solid var(--line);
color: var(--text);
font: inherit;
font-size: 13.5px;
text-align: left;
cursor: pointer;
transition: background 0.12s ease;
}
.catalog-line:last-child {
border-bottom: 0;
}
.catalog-line:hover {
background: var(--surface-2);
}
.catalog-line-icon {
display: inline-flex;
flex-shrink: 0;
color: var(--accent);
}
.catalog-line-icon svg {
width: 17px;
height: 17px;
}
.catalog-line-name {
font-weight: 600;
white-space: nowrap;
}
.catalog-line-desc {
flex: 1;
min-width: 0;
color: var(--muted);
font-size: 12.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-line-arrow {
color: var(--accent);
font-weight: 700;
}
@media (max-width: 700px) {
.catalog-line-desc { display: none; }
}
/* Matrix Table & Manager Permissions */
.matrix-panel .matrix-table th.active-col {
color: var(--accent);
border-bottom-color: var(--accent) !important;
}
.matrix-panel .matrix-table tr:hover td {
background: rgba(255, 255, 255, 0.03);
}
.matrix-panel input[type=checkbox] {
width: 16px;
height: 16px;
cursor: pointer;
}
/* Billing View & Plan Selection */
.plan-choice-grid,
.choice-grid.plan-choice-grid,
.choice-grid:has(.plan-choice-card),
.choice-grid:has(.plan-card-header) {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
gap: 14px;
}
.choice-grid .choice-card,
.plan-choice-card,
.choice-grid .choice-card.plan-choice-card,
.choice-grid:has(.plan-card-header) .choice-card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 16px 18px !important;
border-radius: 12px;
background: var(--surface-2);
border: 1px solid var(--line);
cursor: pointer;
min-width: 0;
box-sizing: border-box;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.choice-grid .choice-card:hover,
.plan-choice-card:hover,
.choice-grid .choice-card.plan-choice-card:hover {
background: var(--surface-3);
border-color: var(--accent);
}
.choice-grid .choice-card.selected,
.choice-grid .choice-card:has(input:checked),
.plan-choice-card.selected,
.plan-choice-card:has(input:checked) {
border-color: var(--accent) !important;
background: var(--surface-3);
box-shadow: 0 0 0 1px var(--accent);
}
.plan-card-header {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.plan-card-header input[type="radio"] {
margin: 0 !important;
width: 16px;
height: 16px;
accent-color: var(--accent);
flex-shrink: 0;
cursor: pointer;
}
.plan-card-title {
font-weight: 700;
font-size: 15px;
color: var(--text);
line-height: 1.3;
overflow-wrap: break-word;
min-width: 0;
}
.plan-card-price {
font-size: 22px;
font-weight: 800;
color: var(--accent);
margin: 2px 0 4px;
line-height: 1.2;
display: flex;
align-items: baseline;
gap: 4px;
}
.plan-card-period {
font-size: 12px;
color: var(--muted);
font-weight: normal;
}
.plan-card-desc,
.plan-choice-card p,
.choice-grid .choice-card p {
margin: 0 !important;
font-size: 12.5px !important;
line-height: 1.5 !important;
color: var(--muted);
overflow-wrap: break-word !important;
word-break: normal !important;
hyphens: auto;
min-width: 0;
}
@media (max-width: 760px) {
.plan-choice-grid,
.choice-grid.plan-choice-grid,
.choice-grid:has(.plan-choice-card),
.choice-grid:has(.plan-card-header) {
grid-template-columns: 1fr !important;
}
}
/* Stats Monthly Sparklines and Trend Trajectory */
.stat {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
min-width: 0;
box-sizing: border-box;
}
.stat-top {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--muted);
font-size: 12.5px;
font-weight: 500;
}
.stat-top .stat-icon {
display: inline-flex;
align-items: center;
color: var(--muted);
}
.stat-top .stat-icon svg,
.stat-top .stat-icon .icon {
width: 16px;
height: 16px;
}
.stat-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
}
.stat-value {
font-family: var(--heading);
font-size: 26px;
line-height: 1.15;
color: var(--text);
font-weight: 700;
min-width: 0;
}
.stat-spark-wrap {
flex: 0 1 80px;
max-width: 80px;
height: 26px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.stat-sparkline {
width: 100%;
height: 26px;
overflow: visible;
display: block;
}
.stat-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--line);
flex-wrap: wrap;
}
.stat-sub {
font-size: 13px;
color: var(--muted);
white-space: normal;
word-break: break-word;
line-height: 1.35;
flex: 1 1 auto;
}
.stat-trend {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 12.5px;
font-weight: 600;
font-family: var(--mono);
white-space: nowrap;
padding: 2px 6px;
border-radius: 4px;
flex-shrink: 0;
}
.stat-trend.up {
color: var(--accent);
background: var(--accent-soft);
}
.stat-trend.neutral {
color: var(--muted);
background: var(--surface-2);
}
.stat-trend .trend-arrow {
font-weight: 700;
font-size: 12.5px;
}
@media(max-width:768px){
.stats{
grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;
gap:10px!important;
}
.stat{
padding:12px 14px!important;
}
.stat-row{
gap:6px!important;
}
.stat-value{
font-size:22px!important;
}
.stat-spark-wrap{
max-width:64px!important;
height:22px!important;
}
.stat-sparkline{
height:22px!important;
}
.stat-sub{
font-size:12.5px!important;
}
.stat-trend{
font-size:12.5px!important;
padding:1px 5px!important;
}
}
@media(max-width:380px){
.stats{
grid-template-columns:1fr!important;
}
}
/* Standardized Pills and Badges */
.pill {
font-family: var(--font);
font-size: var(--size-small, 12.5px);
line-height: 1.4;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border-radius: 6px;
background: var(--surface-2);
color: var(--muted);
border: var(--hairline);
white-space: nowrap;
}
.pill.outline {
background: transparent;
border: 1px solid var(--line);
color: var(--muted);
font-size: var(--size-small, 12.5px);
}
.pill.primary {
background: var(--accent-soft);
color: var(--accent);
border: 1px solid var(--accent);
font-weight: 600;
font-size: var(--size-small, 12.5px);
}
.catalog-card .pill {
font-size: var(--size-small, 12.5px);
}
/* Universal Command Palette (wellmanifest/nl-api-llm) */
.palette-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(6px);
z-index: 10000;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 60px 16px 20px;
animation: fadeIn 0.15s ease-out;
}
.palette-box {
background: var(--surface, #161820);
border: 1px solid var(--line, #2c3140);
border-radius: 14px;
width: 100%;
max-width: 680px;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
animation: slideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.palette-panel{padding:0;overflow:hidden}
.palette-panel .palette-box{max-width:none;max-height:none;box-shadow:none;animation:none;border:none;border-radius:inherit;min-height:60vh}
.palette-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--line, #2c3140);
background: rgba(255, 255, 255, 0.02);
}
.palette-search-wrap {
position: relative;
display: flex;
align-items: center;
padding: 12px 18px;
border-bottom: 1px solid var(--line, #2c3140);
background: var(--surface-2, #101217);
}
.palette-search-icon {
margin-right: 12px;
color: var(--muted);
display: flex;
align-items: center;
}
.palette-input {
flex: 1;
background: transparent;
border: none;
color: var(--text, #f0f3f6);
font-size: 15px;
outline: none;
font-family: inherit;
}
.palette-clear-btn {
background: none;
border: none;
color: var(--muted);
font-size: 18px;
cursor: pointer;
padding: 0 4px;
}
.palette-categories-bar {
display: flex;
gap: 6px;
padding: 8px 18px;
background: rgba(0, 0, 0, 0.15);
border-bottom: 1px solid var(--line, #2c3140);
overflow-x: auto;
white-space: nowrap;
}
.palette-cat-btn {
background: var(--surface-2, #1e222d);
border: 1px solid var(--line, #2c3140);
color: var(--muted, #94a3b8);
font-size: 12.5px;
padding: 4px 10px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
}
.palette-cat-btn:hover, .palette-cat-btn.active {
background: var(--accent-soft, rgba(33, 239, 173, 0.15));
border-color: var(--accent, #21efad);
color: var(--accent, #21efad);
}
.palette-results {
flex: 1;
overflow-y: auto;
padding: 10px 14px;
max-height: 440px;
}
.palette-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 10px 12px;
margin-bottom: 6px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid transparent;
transition: all 0.12s;
gap: 12px;
}
.palette-item:hover {
background: rgba(33, 239, 173, 0.06);
border-color: rgba(33, 239, 173, 0.25);
transform: translateX(2px);
}
.palette-item-main {
flex: 1;
}
.palette-item-icon {
color: var(--accent);
display: inline-flex;
}
.palette-item-title {
font-size: 13.5px;
color: var(--text, #f0f3f6);
}
.palette-item-desc {
margin-top: 3px;
line-height: 1.35;
}
.palette-prompts-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.palette-prompt-chip {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line, #2c3140);
color: var(--text-muted, #cbd5e1);
font-size: 12.5px;
padding: 3px 8px;
border-radius: 12px;
cursor: pointer;
transition: all 0.12s;
}
.palette-prompt-chip:hover {
background: var(--accent-soft, rgba(33, 239, 173, 0.2));
border-color: var(--accent, #21efad);
color: var(--accent, #21efad);
}
.palette-item-actions {
flex-shrink: 0;
display: flex;
align-items: center;
}
.palette-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 18px;
border-top: 1px solid var(--line, #2c3140);
background: rgba(0, 0, 0, 0.2);
}
.palette-shortcuts {
display: flex;
gap: 12px;
font-size: 12.5px;
color: var(--muted);
}
.kbd {
background: var(--surface-2, #101217);
border: 1px solid var(--line, #2c3140);
padding: 2px 5px;
border-radius: 4px;
font-size: 12px;
font-family: monospace;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-16px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Text-first service cards & dynamic health indicators */
.service-card {
display: flex;
flex-direction: column;
gap: 16px;
border-radius: 10px;
padding: 18px;
background: var(--surface-1, #161b22);
border: 1px solid var(--line, #30363d);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.service-card:hover {
border-color: var(--accent, #6366f1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.service-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0;
}
.service-card-heading {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
}
.service-card-heading input {
width: 16px;
height: 16px;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--accent);
}
.service-title-group {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.service-title {
display: block;
overflow-wrap: anywhere;
font-size: 15px;
font-weight: 600;
color: var(--text, #f0f6fc);
}
.service-category-tag {
font-size: 12px;
color: var(--muted, #8b949e);
}
/* Provider Logotypes */
.service-brand-icon {
width: 34px;
height: 34px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 6px;
box-sizing: border-box;
}
.service-brand-icon svg {
width: 100%;
height: 100%;
display: block;
}
.service-brand-icon.brand-agy {
background: rgba(99, 102, 241, 0.15);
border: 1px solid rgba(99, 102, 241, 0.35);
}
.service-brand-icon.brand-anthropic {
background: rgba(217, 119, 6, 0.15);
border: 1px solid rgba(217, 119, 6, 0.35);
}
.service-brand-icon.brand-openai {
background: rgba(16, 163, 127, 0.15);
border: 1px solid rgba(16, 163, 127, 0.35);
}
.service-brand-icon.brand-cursor {
background: rgba(139, 92, 246, 0.15);
border: 1px solid rgba(139, 92, 246, 0.35);
}
.service-brand-icon.brand-chrome {
background: rgba(59, 130, 246, 0.15);
border: 1px solid rgba(59, 130, 246, 0.35);
}
.service-brand-icon.brand-ollama {
background: rgba(236, 72, 153, 0.15);
border: 1px solid rgba(236, 72, 153, 0.35);
}
.service-brand-icon.brand-mcp {
background: rgba(14, 165, 233, 0.15);
border: 1px solid rgba(14, 165, 233, 0.35);
}
.service-brand-icon.brand-gemini {
background: rgba(56, 189, 248, 0.15);
border: 1px solid rgba(56, 189, 248, 0.35);
}
.service-brand-icon.brand-copilot {
background: rgba(99, 102, 241, 0.15);
border: 1px solid rgba(99, 102, 241, 0.35);
}
.service-brand-icon.brand-generic {
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--line);
}
/* Live Dynamic Status Pill */
.live-status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
}
.live-status-pill.status-healthy {
background: rgba(34, 197, 94, 0.12);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.live-status-pill.status-stopped {
background: rgba(239, 68, 68, 0.12);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.live-status-pill.status-warn {
background: rgba(234, 179, 8, 0.12);
color: #facc15;
border: 1px solid rgba(234, 179, 8, 0.3);
}
/* Status Ping Pulse */
.status-ping {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.status-ping.status-online {
background: #22c55e;
box-shadow: 0 0 8px #22c55e;
animation: pulse-ping 1.4s infinite ease-in-out;
}
.status-ping.status-offline {
background: #ef4444;
box-shadow: 0 0 4px #ef4444;
}
/* Application Thumbnails (Mockup Previews) */
.service-thumb {
border-radius: 7px;
margin: 10px 0;
background: #090d13;
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
overflow: hidden;
box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
}
.thumb-header {
padding: 6px 10px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
}
.thumb-dots {
display: flex;
gap: 5px;
align-items: center;
}
.thumb-dot {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
}
.thumb-dot.red { background: #ef4444; }
.thumb-dot.yellow { background: #eab308; }
.thumb-dot.green { background: #22c55e; }
.thumb-title {
color: var(--muted, #8b949e);
font-size: 12.5px;
}
.thumb-chip {
margin-left: auto;
font-size: 12px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.08);
color: var(--muted);
font-family: var(--font, sans-serif);
font-weight: 500;
}
.thumb-body {
padding: 10px 12px;
font-size: 13px;
line-height: 1.55;
color: #cbd5e1;
}
.thumb-code-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thumb-prompt {
color: #38bdf8;
font-weight: bold;
}
.thumb-out-ok {
color: #4ade80;
}
.thumb-check {
color: #22c55e;
font-weight: bold;
margin-right: 3px;
}
.thumb-dim {
color: #64748b;
font-size: 12px;
}
/* IDE Thumbnail specific */
.thumb-tab {
padding: 3px 8px;
font-size: 12.5px;
border-radius: 4px 4px 0 0;
background: rgba(255, 255, 255, 0.02);
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 4px;
}
.thumb-tab.active {
background: rgba(255, 255, 255, 0.08);
color: #e2e8f0;
}
.mini-icon {
width: 12px;
height: 12px;
display: inline-block;
}
.c-kwd { color: #f43f5e; font-weight: 500; }
.c-fn { color: #38bdf8; }
.c-str { color: #a3e635; }
.c-comment { color: #64748b; font-style: italic; }
/* Browser Thumbnail specific */
.thumb-nav-icons {
color: var(--muted);
letter-spacing: 2px;
font-size: 13px;
}
.thumb-url-bar {
flex: 1;
background: rgba(0, 0, 0, 0.3);
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
color: #94a3b8;
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.thumb-browser-content {
display: flex;
align-items: center;
gap: 10px;
}
.thumb-browser-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: #3b82f6;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
flex-shrink: 0;
}
.thumb-browser-info {
display: flex;
flex-direction: column;
font-size: 12.5px;
}
/* Proxy Thumbnail specific */
.thumb-badge-net, .thumb-badge-sub {
font-size: 12px;
font-weight: 600;
color: #38bdf8;
font-family: var(--font, sans-serif);
}
.thumb-telemetry-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.thumb-pill-200 {
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
padding: 2px 7px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
}
.thumb-method {
color: #e2e8f0;
font-size: 12.5px;
}
.thumb-latency {
margin-left: auto;
color: #38bdf8;
font-size: 12px;
}
/* MCP Thumbnail specific */
.thumb-mcp-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.mcp-chip {
padding: 3px 8px;
border-radius: 4px;
background: rgba(14, 165, 233, 0.15);
border: 1px solid rgba(14, 165, 233, 0.3);
color: #38bdf8;
font-size: 12px;
}
/* Service Metadata Grid */
.service-meta-grid {
display: grid;
grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
gap: 7px 14px;
padding-top: 14px;
border-top: 1px solid var(--line, #30363d);
font-size: 13px;
margin: 0;
}
.service-meta-grid dt {
color: var(--muted, #8b949e);
margin: 0;
font-weight: 500;
}
.service-meta-grid dd {
color: var(--text, #f0f6fc);
margin: 0;
overflow-wrap: anywhere;
}
.service-meta-grid code {
color: inherit;
font-size: inherit;
}
.service-card-actions {
display: flex;
justify-content: flex-start;
padding-top: 14px;
border-top: 1px solid var(--line, #30363d);
}
.service-card-actions .row-actions {
flex-wrap: wrap;
}
.service-card-actions .btn {
min-height: 32px;
}
.service-detail-heading {
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line, #30363d);
}
.service-ping-btn.loading {
opacity: 0.7;
pointer-events: none;
}
.twin-preview {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--line, #30363d);
display: grid;
gap: 12px;
}
.twin-preview h3 {
margin: 0;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.twin-preview .novnc-frame {
width: 100%;
height: clamp(320px, 55dvh, 900px);
border: 1px solid var(--line, #30363d);
border-radius: 12px;
background: #000;
display: block;
}
.twin-poster {
display: grid;
justify-items: center;
align-content: center;
gap: 8px;
height: 220px;
padding: 16px;
text-align: center;
border: 1px dashed var(--line, #30363d);
border-radius: 12px;
background: var(--surface-2, #11181c);
color: var(--muted);
font-size: 13px;
}
.twin-poster strong {
color: var(--text);
font-size: 14px;
}
.twin-poster svg {
width: 32px;
height: 32px;
opacity: 0.65;
}
@media (max-width: 850px) {
.twin-preview .novnc-frame {
height: clamp(240px, 40dvh, 420px);
}
}
/* Collapsible details for host and record parameters without page reload */
.record-details-fold {
margin: 14px 0;
border: 1px solid var(--line, #30363d);
border-radius: 8px;
background: var(--surface-2, rgba(255, 255, 255, 0.02));
overflow: hidden;
transition: border-color 0.15s ease;
}
.record-details-fold[open] {
border-color: var(--line-active, #58a6ff);
}
.more-toggle-summary {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
cursor: pointer;
user-select: none;
list-style: none;
font-size: 13px;
background: transparent;
}
.more-toggle-summary::-webkit-details-marker {
display: none;
}
.more-toggle-summary:hover {
background: var(--surface-3, rgba(255, 255, 255, 0.04));
}
.more-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--muted, #8b949e);
transition: transform 0.2s ease;
}
.more-icon svg {
width: 16px;
height: 16px;
}
.record-details-fold[open] > .more-toggle-summary .more-icon {
transform: rotate(90deg);
color: var(--text, #c9d1d9);
}
.more-badge {
display: inline-block;
font-family: var(--font-mono, monospace);
font-size: 12px;
font-weight: 600;
padding: 1px 7px;
border-radius: 4px;
background: var(--accent-subtle, rgba(88, 166, 255, 0.12));
color: var(--accent, #58a6ff);
border: 1px solid var(--accent-border, rgba(88, 166, 255, 0.25));
}
.more-label {
color: var(--muted, #8b949e);
font-size: 13px;
}
.record-details-fold > .detail-grid {
padding: 12px 14px;
margin: 0;
border-top: 1px solid var(--line, #30363d);
background: var(--surface-1, transparent);
}
.detail-heading {
align-items: center;
gap: 12px;
}
.detail-switcher {
display: inline-flex;
align-items: center;
}
/* Billing Data Tables & Responsive Wrapping */
.billing-view .data-table,
.billing-table {
min-width: 680px;
}
.billing-view .data-table th,
.billing-view .data-table td,
.billing-table th,
.billing-table td {
overflow: visible !important;
max-width: none !important;
white-space: normal !important;
vertical-align: middle !important;
}
.billing-view .data-table code,
.billing-table code {
overflow-wrap: anywhere !important;
word-break: break-all !important;
display: inline-block;
max-width: 100%;
}