.preview-shell{min-height:100dvh;display:grid;grid-template-columns:248px minmax(0,1fr);background:#f3f6fa;color:#17314f;font-family:Inter,"Segoe UI",sans-serif}.preview-sidebar{position:sticky;top:0;height:100dvh;padding:25px 16px 18px;display:flex;flex-direction:column;background:#102b4e;color:#fff}.preview-sidebar>img{width:172px;height:55px;object-fit:contain;object-position:left center;margin:0 10px 28px}.preview-sidebar nav{display:grid;gap:5px}.preview-sidebar nav a{min-height:46px;padding:0 14px;display:flex;align-items:center;gap:13px;border-radius:10px;color:#dce7f1;text-decoration:none;font-size:14px;font-weight:600}.preview-sidebar nav a span:first-child{width:22px;text-align:center;color:#9dbbd7;font-size:18px}.preview-sidebar nav a:hover,.preview-sidebar nav a.active{background:#005098;color:#fff}.preview-sidebar nav a.active span:first-child{color:#fff}.preview-support{margin-top:auto;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.06)}.preview-support span{color:#b9cce0;font-size:12px}.preview-main{min-width:0;display:flex;flex-direction:column}.preview-topbar{height:72px;padding:0 34px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #dce7f1;background:#fff}.preview-search{width:min(440px,45vw);height:40px;padding:0 14px;display:flex;align-items:center;gap:10px;border:1px solid #dce7f1;border-radius:10px;color:#607895;background:#f8fafc}.preview-user{margin-left:auto;display:flex;align-items:center;gap:10px}.preview-user>span:last-child{display:flex;flex-direction:column}.preview-user strong{font-size:13px}.preview-user small{color:#607895}.preview-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#e7f1fb;color:#005098;font-weight:800}.preview-content{width:100%;max-width:1440px;margin:0 auto;padding:34px;box-sizing:border-box}.preview-page-header{margin-bottom:25px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.preview-page-header span{color:#005098;font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.preview-page-header h1{margin:7px 0 6px;font-size:clamp(28px,3vw,40px);line-height:1.05}.preview-page-header p{margin:0;color:#607895}.preview-shell button{min-height:42px;padding:0 16px;border:1px solid #dce7f1;border-radius:10px;background:#fff;color:#005098;font:inherit;font-weight:700;cursor:pointer}.preview-shell button.primary,.preview-page-header>button{border-color:#005098;background:#005098;color:#fff}.preview-shell button:focus-visible,.preview-shell a:focus-visible,.preview-shell input:focus-visible,.preview-shell select:focus-visible{outline:3px solid rgba(32,167,223,.35);outline-offset:2px}.preview-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.preview-kpi{min-height:152px;padding:22px;display:flex;flex-direction:column;border:1px solid #dce7f1;border-radius:16px;background:#fff;box-shadow:0 8px 26px rgba(16,43,78,.06)}.preview-kpi span{color:#607895;font-size:13px;font-weight:700}.preview-kpi strong{margin:13px 0 5px;color:#102b4e;font-size:38px}.preview-kpi small{color:#607895}.preview-kpi::before{content:"";width:38px;height:4px;margin-bottom:16px;border-radius:5px;background:#005098}.preview-kpi.success::before{background:#20835d}.preview-kpi.cyan::before{background:#20a7df}.preview-kpi.danger::before{background:#bf3d3d}.preview-grid{display:grid;gap:18px;margin-bottom:18px}.preview-grid.two{grid-template-columns:1.1fr .9fr}.preview-grid.account{grid-template-columns:1fr 1fr}.preview-card{padding:22px;border:1px solid #dce7f1;border-radius:16px;background:#fff;box-shadow:0 8px 26px rgba(16,43,78,.05)}.preview-card-title{margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:14px}.preview-card-title h2{margin:0;color:#102b4e;font-size:18px}.preview-card-title span{color:#607895;font-size:12px}.status-bars{display:grid;gap:17px}.status-row{display:grid;grid-template-columns:80px 1fr 24px;align-items:center;gap:10px;font-size:13px}.status-row>div{height:8px;overflow:hidden;border-radius:8px;background:#edf2f7}.status-row i{height:100%;display:block;border-radius:inherit;background:#005098}.status-row i.success{background:#20835d}.status-row i.danger{background:#bf3d3d}.status-row i.warning{background:#a96812}.preview-alert{min-height:64px;padding:10px 0;display:grid;grid-template-columns:38px minmax(0,1fr) auto 38px;align-items:center;gap:10px;border-bottom:1px solid #eef2f6}.preview-alert:last-child{border-bottom:0}.alert-symbol{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#fceaea;color:#bf3d3d;font-weight:900}.preview-alert>div{min-width:0;display:flex;flex-direction:column;gap:5px}.preview-alert strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.preview-alert small{overflow:hidden;color:#607895;text-overflow:ellipsis;white-space:nowrap}.preview-alert button{min-height:36px;width:36px;padding:0}.badge{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:99px;font-size:11px;font-weight:800}.badge.success{background:#e5f4ed;color:#176846}.badge.danger{background:#fceaea;color:#a52e2e}.badge.warning{background:#fff0da;color:#88510b}.preview-filters{margin-bottom:18px;display:grid;grid-template-columns:minmax(200px,1fr) 210px auto;align-items:end;gap:12px}.preview-card label{display:flex;flex-direction:column;gap:7px;color:#17314f;font-size:13px;font-weight:700}.preview-card input,.preview-card select{height:44px;padding:0 12px;border:1px solid #cbd9e6;border-radius:10px;background:#fff;color:#17314f;font:inherit}.preview-table-wrap{overflow-x:auto}.preview-table-wrap table{width:100%;border-collapse:collapse}.preview-table-wrap th,.preview-table-wrap td{padding:14px 12px;border-bottom:1px solid #e6edf4;text-align:left;white-space:nowrap;font-size:13px}.preview-table-wrap th{color:#607895;background:#f8fafc;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.preview-table-wrap td:first-child{color:#102b4e;font-weight:700}.preview-table-wrap td:last-child,.preview-table-wrap th:last-child{text-align:right}.preview-table-wrap td button{min-height:34px;padding:0 10px}.preview-pagination{padding-top:16px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.preview-pagination span{margin-right:auto;color:#607895;font-size:12px}.preview-segment{margin-bottom:16px;display:flex;gap:8px;overflow-x:auto}.preview-segment button{white-space:nowrap}.preview-segment button.active{border-color:#005098;background:#e8f2fb}.preview-segment b{margin-left:6px}.alarm-list{padding-top:8px;padding-bottom:8px}.preview-grid.account .preview-card{display:grid;gap:16px}.security-row{min-height:62px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #e6edf4}.security-row>span:first-child{display:flex;flex-direction:column;gap:4px}.security-row small{color:#607895}.preview-unavailable{max-width:680px;margin:12vh auto;padding:32px;color:#17314f;font-family:Inter,"Segoe UI",sans-serif}
@media(max-width:1100px){.preview-shell{grid-template-columns:214px minmax(0,1fr)}.preview-sidebar{padding-inline:12px}.preview-content{padding:26px}.preview-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-grid.two{grid-template-columns:1fr}}
@media(max-width:760px){.preview-shell{display:block}.preview-sidebar{position:static;width:100%;height:auto;padding:14px;box-sizing:border-box}.preview-sidebar>img{width:145px;height:43px;margin:0 4px 12px}.preview-sidebar nav{display:flex;overflow-x:auto}.preview-sidebar nav a{min-width:max-content;min-height:44px}.preview-support{display:none}.preview-topbar{height:62px;padding:0 14px}.preview-search{flex:1}.preview-user>span:last-child{display:none}.preview-content{padding:20px 14px 28px}.preview-page-header{align-items:flex-start}.preview-page-header p{max-width:260px}.preview-kpis{gap:10px}.preview-kpi{min-height:134px;padding:17px}.preview-kpi strong{font-size:32px}.preview-grid.account{grid-template-columns:1fr}.preview-filters{grid-template-columns:1fr 1fr}.preview-filters button{grid-column:1/-1}.preview-alert{grid-template-columns:36px minmax(0,1fr) 36px}.preview-alert .badge{grid-column:2}.preview-table-wrap table,.preview-table-wrap thead,.preview-table-wrap tbody,.preview-table-wrap tr,.preview-table-wrap td{display:block}.preview-table-wrap thead{display:none}.preview-table-wrap tr{padding:12px 0;border-bottom:1px solid #dce7f1}.preview-table-wrap td{padding:5px 8px;border:0;display:flex;justify-content:space-between;gap:16px;white-space:normal}.preview-table-wrap td::before{content:attr(data-label);color:#607895;font-size:11px;font-weight:700;text-transform:uppercase}.preview-table-wrap td:last-child{justify-content:flex-end}.preview-table-wrap td:last-child::before{display:none}}
@media(max-width:430px){.preview-sidebar nav a span:last-child{display:none}.preview-sidebar nav a{min-width:48px;justify-content:center;padding:0}.preview-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-content{padding-inline:12px}.preview-page-header{display:block}.preview-page-header>button{width:100%;margin-top:16px}.preview-kpis{grid-template-columns:1fr 1fr}.preview-kpi{min-height:124px}.preview-kpi span{font-size:12px}.preview-kpi strong{font-size:28px}.preview-kpi small{font-size:11px}.preview-card{padding:16px}.preview-filters{grid-template-columns:1fr}.preview-filters button{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.preview-shell *{scroll-behavior:auto!important;transition:none!important}}