.connect-preview{padding:24px 32px 32px;background:#e9edf0}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;font:12px var(--mono)}.preview-toolbar>span{color:#465663}.preview-toolbar button{border:2px solid var(--ink);background:var(--teal);padding:10px 16px;cursor:pointer;font:12px var(--mono);white-space:nowrap}.preview-tabs{display:flex;border:1px solid #cbd2d8;border-bottom:0;background:white;overflow:auto}.preview-tabs button{border:0;border-right:1px solid #dde3e8;background:white;padding:14px 22px;font:13px Archivo,sans-serif;color:#5b6b7a;cursor:pointer;white-space:nowrap}.preview-tabs button[aria-selected=true]{color:#fff;background:#18214d}.connect-screen{height:530px;overflow:auto;border:1px solid #cbd2d8;background:#f4f6f8;font-family:Arial,sans-serif;color:#1c2733}.demo-login{height:100%;min-height:460px;display:grid;place-items:center;background:#f4f6f8}.demo-login-card{width:330px;max-width:calc(100% - 40px);padding:30px;background:#18214d;border-radius:8px;color:white;box-shadow:0 8px 28px #18214d20}.demo-brand{font-size:19px;font-weight:700;letter-spacing:-.025em}.demo-brand:before{content:'◆';color:#f3b615;margin-right:10px;font-size:23px}.demo-login-card h4{font-size:27px;margin:22px 0 4px}.demo-login-card p{font-size:13px;color:#c2cce1;margin:0 0 24px}.demo-field{font-size:12px;margin:16px 0;color:#e1e6ef}.demo-field>div{background:white;color:#52606c;border-radius:5px;padding:10px;margin-top:6px;font-size:13px}.demo-signin{background:#2f5fa3;padding:11px;border-radius:5px;text-align:center;font-size:14px;margin-top:22px}.demo-shell{min-width:710px;display:grid;grid-template-columns:168px 1fr;min-height:100%}.demo-sidebar{background:#fff;border-right:1px solid #dde3e8;padding:24px 14px;display:flex;flex-direction:column;gap:4px}.demo-sidebar .demo-brand{font-size:17px;margin-bottom:20px}.demo-sidebar .demo-brand:before{font-size:16px;margin-right:5px}.demo-group{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#5b6b7a;margin:15px 9px 4px}.demo-nav{padding:8px 10px;font-size:12px;color:#5b6b7a;border-radius:5px}.demo-nav.active{color:#fff;background:#18214d}.demo-staff{margin-top:auto;padding:20px 10px 0;font-size:11px;color:#5b6b7a}.demo-main{padding:22px 24px 32px;overflow:hidden}.demo-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px}.demo-topline h4{font-size:25px;margin:0;letter-spacing:-.035em}.demo-chip{background:#2f5fa3;color:white;padding:9px 13px;font-size:12px;border-radius:5px;white-space:nowrap}.demo-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.demo-kpi{background:white;border:1px solid #dde3e8;border-radius:8px;padding:16px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}.demo-kpi span{font-size:11px;color:#5b6b7a;line-height:1.4}.demo-kpi strong{font-size:28px;line-height:1;color:#18214d}.demo-panel{padding:18px;margin-top:20px;border:1px solid #dde3e8;border-radius:8px;background:white}.demo-panel h5{margin:0 0 14px;font-size:14px}.demo-row{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-top:1px solid #eef1f4;font-size:12px}.demo-row span:last-child{color:#5b6b7a}.demo-search{background:white;border:1px solid #dde3e8;border-radius:5px;padding:10px 12px;font-size:12px;color:#71808c;margin-bottom:20px}.demo-board{display:flex;gap:12px;overflow:auto;padding-bottom:16px}.demo-column{background:#eef1f4;flex:1 0 155px;padding:10px;border-radius:8px;min-height:300px}.demo-column h5{font-size:11px;display:flex;justify-content:space-between;gap:12px;margin:3px 0 15px;color:#5b6b7a}.demo-record{border:1px solid #dde3e8;border-radius:6px;background:#fff;padding:12px;margin:10px 0;font-size:12px}.demo-record small{display:block;color:#5b6b7a;font-size:10px;margin-bottom:7px}.demo-record strong{display:block;line-height:1.4}.demo-record p{font-size:11px;line-height:1.5;color:#5b6b7a;margin:9px 0}.demo-tag{font-size:10px;padding:3px 5px;background:#e4edf8;color:#2f5fa3;border-radius:3px;display:inline-block}.preview-note{font-size:13px}.connect-project .project-link{background:#e9edf0}
@media(max-width:900px){.connect-preview{padding:20px 24px}.demo-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.connect-screen{height:500px}}
@media(max-width:540px){.connect-preview{padding:16px}.preview-toolbar{font-size:10px;align-items:flex-start}.preview-toolbar button{font-size:11px;padding:9px}.preview-tabs button{font-size:12px;padding:12px 14px}.connect-screen{height:440px}.demo-login{min-height:438px}.demo-shell{min-width:640px;grid-template-columns:140px 1fr}.demo-main{padding:20px 16px}.demo-sidebar{padding:20px 10px}.demo-sidebar .demo-brand{font-size:14px}}