:root{--bg:#f5f7f8;--surface:#fff;--ink:#17211c;--muted:#68746d;--line:#e4e9e6;--brand:#126d4d;--brand-dark:#0d593e;--brand-soft:#e5f4ed;--sidebar:#12231c;--sidebar-muted:#8ea39a}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--ink);letter-spacing:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px}button,input{font:inherit;letter-spacing:0}button{cursor:pointer}.app-shell{min-height:100vh}.sidebar{z-index:20;background:var(--sidebar);color:#fff;flex-direction:column;width:236px;padding:22px 14px 16px;display:flex;position:fixed;inset:0 auto 0 0}.brand{align-items:center;gap:10px;height:38px;padding:0 8px;font-size:17px;font-weight:750;display:flex}.brand>span:last-of-type span{color:#53c895}.brand-mark{color:#d8fff0;background:#1c4937;border:1px solid #2c5e4a;border-radius:7px;place-items:center;width:34px;height:34px;display:grid}.nav{gap:5px;margin-top:32px;display:grid}.nav-item{width:100%;height:42px;color:var(--sidebar-muted);text-align:left;background:0 0;border:0;border-radius:6px;align-items:center;gap:11px;padding:0 12px;display:flex}.nav-item span{color:#afc3ba;text-align:center;background:#253930;border-radius:10px;min-width:24px;margin-left:auto;padding:2px 7px;font-size:11px}.nav-item:hover,.nav-item.active{color:#fff;background:#1c3429}.nav-item.active{box-shadow:inset 3px 0 #4dc88f}.sidebar-footer{margin-top:auto}.profile{border-top:1px solid #26382f;grid-template-columns:34px 1fr 16px;align-items:center;gap:10px;margin-top:14px;padding:15px 8px 0;display:grid}.avatar{color:#174d38;background:#d0eadf;border-radius:50%;place-items:center;width:34px;height:34px;font-size:11px;font-weight:750;display:grid}.profile div{gap:2px;display:grid}.profile strong{font-size:12px}.profile small{color:var(--sidebar-muted);font-size:10px}.main{min-height:100vh;margin-left:236px}.topbar{border-bottom:1px solid var(--line);z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffeb;align-items:center;height:80px;padding:0 32px;display:flex;position:sticky;top:0}.topbar h1,.section-heading h2,.project-header h2,.modal h2{margin:0;font-size:20px;line-height:1.2}.topbar p,.section-heading p,.block-heading p,.modal-header p{color:var(--muted);margin:4px 0 0;font-size:12px}.topbar-actions{align-items:center;gap:10px;margin-left:auto;display:flex}.icon-button{border:1px solid var(--line);background:var(--surface);color:#526159;border-radius:6px;place-items:center;width:36px;height:36px;padding:0;display:grid;position:relative}.icon-button:hover{color:var(--brand);background:#f0f4f2}.notification-dot{background:#e25252;border:1px solid #fff;border-radius:50%;width:6px;height:6px;position:absolute;top:7px;right:7px}.primary-button,.secondary-button{border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:0 14px;font-weight:650;display:inline-flex}.primary-button{background:var(--brand);color:#fff;box-shadow:0 2px 5px #126d4d26}.primary-button:hover{background:var(--brand-dark)}.secondary-button{border-color:var(--line);color:#49564f;background:#fff}.content{max-width:1500px;margin:0 auto;padding:24px 30px 40px}.metrics{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.metric{border:1px solid var(--line);background:var(--surface);border-radius:7px;grid-template-columns:42px 1fr auto;align-items:center;gap:13px;min-height:86px;padding:16px 18px;display:grid}.metric-icon{border-radius:7px;place-items:center;width:42px;height:42px;display:grid}.metric-icon.green{color:#137453;background:#e6f5ee}.metric-icon.blue{color:#356cb5;background:#e8f0fb}.metric-icon.amber{color:#a96714;background:#fff2d9}.metric div{gap:3px;display:grid}.metric small{color:var(--muted);font-size:11px}.metric strong{font-size:23px;line-height:1}.metric em{color:#849088;align-self:end;padding-bottom:4px;font-size:10px;font-style:normal}.workspace{border:1px solid var(--line);background:var(--surface);border-radius:7px;grid-template-columns:330px minmax(0,1fr);min-height:480px;margin-top:18px;display:grid;overflow:hidden}.projects-pane{border-right:1px solid var(--line);padding:20px 16px}.section-heading,.block-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.section-heading h2{font-size:16px}.search-box{border:1px solid var(--line);color:#829087;background:#fafbfa;border-radius:6px;align-items:center;gap:8px;height:38px;margin:17px 0 10px;padding:0 11px;display:flex}.search-box:focus-within{border-color:#8bbfa9;box-shadow:0 0 0 3px #e7f3ee}.search-box input{width:100%;color:var(--ink);background:0 0;border:0;outline:0}.project-list{gap:4px;display:grid}.project-row{text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;width:100%;min-height:62px;padding:8px 9px;display:grid}.project-row:hover{background:#f6f8f7}.project-row.selected{background:#edf7f2;border-color:#c8e1d6}.project-logo{color:#2c5c48;background:#f5f8f7;border:1px solid #d8e3de;border-radius:7px;place-items:center;width:38px;height:38px;font-size:11px;font-weight:800;display:grid}.project-logo.large{background:#def2e9;border-color:#c4e4d6;width:48px;height:48px;font-size:13px}.project-info,.project-meta,.integration-row>div,.catalog button>span:nth-child(2),.activity-row>div{gap:3px;min-width:0;display:grid}.project-info strong,.integration-row strong,.catalog strong,.activity-row strong{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.project-info small,.project-meta small,.integration-row small,.catalog small,.activity-row small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.project-meta{color:#8a9790;grid-template-columns:1fr 16px;align-items:center}.details-pane{min-width:0;padding:22px 24px}.project-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding-bottom:20px;display:flex}.project-title{align-items:center;gap:13px;display:flex}.project-title h2{margin:2px 0;font-size:18px}.project-title a{color:#527d6b;font-size:11px;text-decoration:none}.status-line{color:#398062;text-transform:uppercase;align-items:center;gap:5px;font-size:9px;font-weight:700;display:flex}.status-dot{background:#35a875;border-radius:50%;width:6px;height:6px}.detail-grid{grid-template-columns:minmax(0,1fr) 250px;gap:20px;padding-top:21px;display:grid}.block-heading{margin-bottom:13px}.block-heading h3{margin:0;font-size:13px}.block-heading>span{color:#5c6962;text-align:center;background:#eef3f0;border-radius:10px;min-width:24px;padding:3px 7px;font-size:10px}.integration-list{border-top:1px solid var(--line)}.integration-row{border-bottom:1px solid var(--line);grid-template-columns:38px minmax(0,1fr) auto 36px;align-items:center;gap:10px;min-height:62px;display:grid}.integration-icon{border-radius:7px;place-items:center;width:38px;height:38px;display:grid}.integration-icon.mint{color:#1b7754;background:#e5f5ec}.integration-icon.blue{color:#416ab0;background:#e8eefb}.integration-icon.sky{color:#2581a4;background:#e5f3f8}.integration-icon.amber{color:#a96c18;background:#fff2dc}.integration-icon.violet{color:#7655ae;background:#f0eafb}.connected{color:#34805f;align-items:center;gap:4px;font-size:9px;font-weight:650;display:flex}.integration-row .icon-button{border:0;width:30px;height:30px}.dashed-button{color:#476a5a;background:#fbfcfb;border:1px dashed #b8c8c0;border-radius:6px;justify-content:center;align-items:center;gap:7px;width:100%;height:40px;margin-top:13px;font-size:11px;font-weight:650;display:flex}.api-block{border:1px solid var(--line);background:#f8faf9;border-radius:7px;align-self:start;padding:16px}.api-block label{color:#7c8881;margin:14px 0 6px;font-size:9px;font-weight:700;display:block}.key-field{border:1px solid var(--line);background:#fff;border-radius:5px;align-items:center;height:36px;padding-left:10px;display:flex;overflow:hidden}.key-field code{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:10px;overflow:hidden}.key-field .icon-button{border-width:0 0 0 1px;border-radius:0;width:34px;height:34px}.api-block>p{color:var(--muted);margin:15px 0 6px;font-size:10px}.endpoint{color:#315e4b;text-overflow:ellipsis;white-space:nowrap;font-size:9px;display:block;overflow:hidden}.activity-section{border:1px solid var(--line);background:var(--surface);border-radius:7px;margin-top:18px;padding:20px}.text-button{color:var(--brand);background:0 0;border:0;align-items:center;gap:3px;font-size:11px;display:flex}.activity-table{border-top:1px solid var(--line);margin-top:13px}.activity-row{border-bottom:1px solid var(--line);grid-template-columns:30px minmax(0,1fr) 180px 120px;align-items:center;gap:10px;min-height:56px;display:grid}.event-dot{color:#5a9c7f}.activity-project{color:#425049;font-size:11px}.activity-row time{color:#87938d;text-align:right;font-size:10px}.empty-state{color:var(--muted);text-align:center;padding:24px 10px;font-size:11px}.empty-state.full{place-items:center;min-height:350px;display:grid}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0b1b147a;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#fff;border:1px solid #d7e0dc;border-radius:8px;width:min(500px,100%);max-height:90vh;overflow-y:auto;box-shadow:0 24px 70px #071c1338}.modal-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 22px 17px;display:flex}.modal-header h2{font-size:17px}.project-form{gap:15px;padding:20px 22px 22px;display:grid}.project-form label{color:#3d4a43;gap:7px;font-size:11px;font-weight:650;display:grid}.project-form input,.project-form select{background:#fff;border:1px solid #dbe2de;border-radius:6px;outline:0;height:41px;padding:0 12px}.project-form input:focus,.project-form select:focus{border-color:#73aa92;box-shadow:0 0 0 3px #e8f3ee}.modal-actions{justify-content:flex-end;gap:9px;margin-top:4px;display:flex}.form-error{color:#bd4343;margin:0;font-size:11px}.catalog{gap:7px;padding:14px;display:grid}.catalog button{text-align:left;background:#fff;border:1px solid #0000;border-radius:7px;grid-template-columns:40px 1fr 20px;align-items:center;gap:12px;min-height:64px;padding:9px 10px;display:grid}.catalog button:hover{background:#f5faf7;border-color:#c8dfd5}.catalog button>svg{color:#75837c}.systems-page{border:1px solid var(--line);background:var(--surface);border-radius:7px;min-height:520px;padding:22px}.systems-grid{border-top:1px solid var(--line);gap:0;margin-top:18px;display:grid}.system-card{border-bottom:1px solid var(--line);grid-template-columns:42px minmax(0,1fr) 100px 90px 36px;align-items:center;gap:13px;min-height:70px;display:grid}.system-card>div{gap:4px;display:grid}.system-card strong{font-size:12px}.system-card small{color:var(--muted);font-size:10px}.system-projects{color:#526159;font-size:11px}.menu-button,.sidebar-close{display:none}.login-page{background:#eef3f0;place-items:center;min-height:100vh;padding:24px;display:grid}.login-panel{background:#fff;border:1px solid #dbe4df;border-radius:8px;width:min(420px,100%);padding:34px;box-shadow:0 20px 60px #1133251f}.login-brand{align-items:center;gap:10px;display:flex}.login-brand>span{background:var(--sidebar);color:#d8fff0;border-radius:7px;place-items:center;width:40px;height:40px;display:grid}.login-brand strong{font-size:18px}.login-brand strong span{color:var(--brand)}.login-copy{margin:36px 0 24px}.login-copy h1{margin:0;font-size:24px}.login-copy p{color:var(--muted);margin:7px 0 0;font-size:12px}.login-form{gap:16px;display:grid}.login-form>label{color:#3e4b44;gap:7px;font-size:11px;font-weight:700;display:grid}.login-field{color:#7b8881;border:1px solid #d7e0db;border-radius:6px;align-items:center;gap:9px;height:44px;padding:0 11px;display:flex}.login-field:focus-within{color:var(--brand);border-color:#72aa91;box-shadow:0 0 0 3px #e7f3ed}.login-field input{min-width:0;color:var(--ink);background:0 0;border:0;outline:0;flex:1}.login-field button{color:#7b8881;background:0 0;border:0;place-items:center;width:30px;height:30px;padding:0;display:grid}.login-submit{background:var(--brand);color:#fff;border:0;border-radius:6px;height:44px;margin-top:3px;font-weight:700}.login-submit:hover{background:var(--brand-dark)}.login-submit:disabled{cursor:wait;opacity:.65}.login-error{color:#bd4343;margin:-3px 0 0;font-size:11px}.login-security{color:#87928c;text-align:center;margin:23px 0 0;font-size:10px}@media (max-width:1050px){.detail-grid{grid-template-columns:1fr}.api-block{width:100%}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric em{display:none}}@media (max-width:800px){.sidebar{transition:transform .2s;transform:translate(-100%);box-shadow:14px 0 40px #0000002e}.sidebar.sidebar-open{transform:translate(0)}.sidebar-close{color:#fff;background:0 0;border-color:#315044;margin-left:auto;display:grid}.main{margin-left:0}.menu-button{margin-right:12px;display:grid}.content{padding:16px}.topbar{height:70px;padding:0 16px}.topbar p{display:none}.metrics,.workspace{grid-template-columns:1fr}.projects-pane{border-right:0;border-bottom:1px solid var(--line)}.project-list{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-row{grid-template-columns:28px 1fr auto}.activity-project{display:none}.system-card{grid-template-columns:42px minmax(0,1fr) 80px 36px}.system-card .connected{display:none}}@media (max-width:520px){.login-page{padding:14px}.login-panel{padding:26px 20px}.topbar h1{font-size:16px}.topbar-actions>.icon-button{display:none}.topbar-actions .primary-button{width:38px;padding:0;font-size:0}.project-list{grid-template-columns:1fr}.details-pane{padding:18px 14px}.project-header{align-items:flex-start}.project-header>.primary-button{width:38px;padding:0;font-size:0}.integration-row{grid-template-columns:38px minmax(0,1fr) 30px}.connected{display:none}.activity-section{padding:16px 12px}.activity-row{grid-template-columns:24px minmax(0,1fr)}.activity-row time{display:none}.systems-page{padding:16px 12px}.systems-page>.section-heading .primary-button{width:38px;padding:0;font-size:0}.system-card{grid-template-columns:42px minmax(0,1fr) 36px}.system-projects{display:none}}
