@import "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;700;900&display=swap";:root{--azam-red:#ed1c24;--azam-red-dark:#9d3530;--azam-red-tint:#fdebec;--azam-blue:#0072bc;--azam-blue-dark:#273691;--azam-blue-tint:#e5f4fa;--navy-950:#0e213b;--navy-900:#132a48;--navy-800:#1c3b62;--sky-500:#44a6d5;--sky-300:#88ceee;--gold-500:#f79009;--gold-100:#fff3df;--green-600:#1e9e6a;--green-100:#e4f5ee;--red-600:#d92d20;--red-100:#fee9e7;--purple-600:#6b4fc4;--purple-100:#efebfb;--teal-600:#128091;--teal-100:#e1f3f5;--gray-900:#1a2333;--gray-700:#3d4757;--gray-500:#6b7482;--gray-300:#c9cfd8;--gray-200:#e4e8ee;--gray-100:#f2f4f8;--gray-50:#f8fafc;--white:#fff;--shadow-card:0 1px 3px #0b1f3f14,0 4px 14px #0b1f3f0f;--shadow-lift:0 12px 32px #0b1f3f29;--radius:12px}*{box-sizing:border-box}body{background:var(--gray-100);color:var(--gray-900);margin:0;font-family:Lato,Arial,sans-serif;font-size:13px;line-height:1.45}button,input{font:inherit}button{cursor:pointer}svg{stroke-width:1.8px}h1,h2,h3,p{margin:0}h1,h2,h3,.stat strong{font-family:Lato,Arial,sans-serif}table{border-collapse:collapse;width:100%}th{text-align:left;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;background:var(--gray-50);border-block:1px solid var(--gray-200);padding:11px 12px;font-size:10.5px}td{border-bottom:1px solid var(--gray-200);color:var(--gray-700);padding:11px 12px}td small{color:var(--gray-500);margin-top:2px;display:block}tfoot td{background:var(--gray-50);color:var(--navy-900);font-weight:800}.app-shell{min-height:100vh;display:flex}.sidebar{z-index:20;color:#c4d2e8;background:linear-gradient(180deg,var(--navy-950),var(--navy-900) 43%,var(--navy-800));flex-direction:column;width:236px;padding:17px 13px;display:flex;position:fixed;top:0;bottom:0;left:0;right:auto;box-shadow:4px 0 24px #0e213b24}.sidebar:after{content:"";background:linear-gradient(#0000,#88ceee7a,#0000);width:1px;position:absolute;top:0;bottom:0;right:0}.brand{border-bottom:1px solid #ffffff1a;align-items:center;gap:10px;margin-bottom:14px;padding:0 8px 16px;display:flex}.logo-wrap{background:#fff;border-radius:9px;place-items:center;width:56px;height:43px;padding:5px 7px;display:grid}.logo-wrap img{object-fit:contain;width:100%;max-height:32px}.brand strong{color:#fff;font-family:Lato,Arial,sans-serif;font-size:14px;display:block}.brand span{color:#8ea8c7;text-transform:uppercase;letter-spacing:.08em;font-size:10px}.sidebar nav{gap:3px;display:grid;overflow:auto}.sidebar nav button,.sidebar-bottom button{color:inherit;text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:11px;width:100%;padding:9px 11px;transition:all .2s;display:flex}.sidebar nav button:hover,.sidebar-bottom button:hover{background:#ffffff12;transform:translate(2px)}.sidebar nav button.active{color:#fff;box-shadow:none;background:linear-gradient(90deg,#0072bc47,#27369140);font-weight:700}.sidebar nav em{color:#ff8b90;background:#ed1c2426;border:1px solid #ed1c2452;border-radius:20px;margin-left:auto;padding:2px 7px;font-size:9px;font-style:normal}.sidebar-bottom{border-top:1px solid #ffffff1a;margin-top:auto;padding-top:10px}.system{color:#9ab1cc;padding:8px 11px;font-size:10.5px}.system i{background:#2bd99a;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block;box-shadow:0 0 0 4px #2bd99a1a}.topbar{z-index:15;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);background:#ffffffed;align-items:center;gap:22px;height:64px;padding:0 26px;display:flex;position:sticky;top:0}.crumb{color:var(--gray-500);white-space:nowrap;align-items:center;gap:7px;display:flex}.crumb b{color:var(--gray-900)}.global-search{border:1px solid var(--gray-200);background:var(--gray-50);min-width:230px;max-width:390px;height:36px;color:var(--gray-500);border-radius:8px;flex:1;align-items:center;gap:8px;margin-left:auto;padding:0 10px;display:flex}.global-search kbd{border:1px solid var(--gray-200);background:#fff;border-radius:5px;margin-left:auto;padding:2px 6px;font-size:10px}.top-actions{align-items:center;gap:14px;display:flex}.icon-button{border:1px solid var(--gray-200);width:34px;height:34px;color:var(--gray-700);background:#fff;border-radius:8px;place-items:center;display:grid;position:relative}.icon-button svg{width:17px}.top-actions .icon-button i{background:var(--azam-red);border:1px solid #fff;border-radius:50%;width:6px;height:6px;position:absolute;top:4px;right:5px}.user{align-items:center;gap:9px;display:flex}.user>span{background:linear-gradient(135deg,var(--azam-blue),var(--sky-500));color:#fff;border-radius:50%;place-items:center;width:32px;height:32px;font-weight:800;display:grid}.user b,.user small{display:block}.user small{color:var(--gray-500);font-size:10px}main{max-width:1660px;margin:0 auto;padding:26px}.page-header{justify-content:space-between;align-items:flex-start;gap:22px;margin-bottom:20px;display:flex}.page-header h1{color:var(--navy-900);letter-spacing:-.025em;font-size:24px}.page-header p{color:var(--gray-500);margin-top:4px;font-size:13.5px}.header-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:9px;display:flex}.button{white-space:nowrap;border:0;border-radius:8px;align-items:center;gap:7px;padding:9px 14px;font-weight:700;transition:all .2s;display:inline-flex}.button:hover:not(:disabled){filter:brightness(1.03);transform:translateY(-1px)}.button.primary{color:#fff;background:linear-gradient(120deg,var(--azam-red),#f0353d);box-shadow:0 5px 16px #d7192047}.button.secondary{color:var(--azam-blue-dark);border:1px solid var(--gray-300);background:#fff}.button.ghost{color:var(--azam-blue);background:0 0;padding-inline-start:8px;padding-inline-end:8px}.button.danger{color:var(--red-600);background:#fff;border:1px solid #f3a8a5}.text-button{color:var(--azam-blue);background:0 0;border:0;align-items:center;gap:5px;font-size:12px;font-weight:700;display:flex}.badge{white-space:nowrap;background:var(--azam-blue-tint);color:var(--azam-blue-dark);border-radius:99px;align-items:center;gap:5px;padding:3px 8px;font-size:10px;font-weight:800;display:inline-flex}.badge i{background:currentColor;border-radius:50%;width:5px;height:5px}.badge.green{background:var(--green-100);color:var(--green-600)}.badge.red{background:var(--red-100);color:var(--red-600)}.badge.amber{background:var(--gold-100);color:#b26d00}.badge.navy{color:var(--navy-900);background:#e8edf6}.badge.gray{background:var(--gray-100);color:var(--gray-500)}.badge.cyan{background:var(--teal-100);color:var(--teal-600)}.card{border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-card);background:#fff;overflow:hidden}.card-head{border-bottom:1px solid var(--gray-200);justify-content:space-between;align-items:flex-start;gap:15px;padding:16px 18px;display:flex}.card-head h2{color:var(--navy-900);font-size:14px}.card-head p{color:var(--gray-500);margin-top:3px;font-size:11.5px}.stats-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;display:grid}.stats-grid.three{grid-template-columns:repeat(3,1fr);margin-top:16px}.stat{border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-card);background:#fff;align-items:center;gap:13px;padding:16px;display:flex;position:relative;overflow:hidden}.stat:before{content:"";background:var(--azam-blue);width:4px;position:absolute;top:0;bottom:0;left:0}.stat.red:before{background:var(--azam-red)}.stat.amber:before{background:var(--gold-500)}.stat.navy:before{background:var(--navy-800)}.stat.green:before{background:var(--green-600)}.stat-icon{background:var(--azam-blue-tint);width:42px;height:42px;color:var(--azam-blue);border-radius:10px;place-items:center;display:grid}.stat.red .stat-icon{background:var(--red-100);color:var(--azam-red)}.stat.amber .stat-icon{background:var(--gold-100);color:var(--gold-500)}.stat.navy .stat-icon{color:var(--navy-800);background:#e8edf6}.stat.green .stat-icon{background:var(--green-100);color:var(--green-600)}.stat span{text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);font-size:10px;font-weight:700;display:block}.stat strong{color:var(--navy-900);margin:2px 0;font-size:21px;display:block}.stat small{color:var(--green-600);font-size:10.5px}.overview-grid{grid-template-columns:1fr 1.25fr;gap:16px;margin-bottom:16px;display:grid}.chart{height:245px;padding:22px 22px 22px 50px;position:relative}.chart-y{color:var(--gray-500);flex-direction:column;justify-content:space-between;font-size:9px;display:flex;position:absolute;top:20px;bottom:31px;left:15px}.chart svg{border-bottom:1px solid var(--gray-200);background:repeating-linear-gradient(to bottom,transparent 0,transparent 45px,var(--gray-100) 46px);width:100%;height:185px}.chart .line{fill:none;stroke:var(--azam-blue);stroke-width:4px}.chart .area{fill:url(#area)}.chart-x{color:var(--gray-500);justify-content:space-between;margin-top:6px;font-size:9px;display:flex}.pipeline{align-items:center;gap:8px;padding:25px 16px 17px;display:flex}.pipe-step{border:1px solid var(--gray-200);background:var(--gray-50);text-align:center;border-radius:9px;flex:1;min-width:0;padding:15px 8px}.pipe-step span{text-transform:uppercase;color:var(--gray-500);min-height:28px;font-size:9px;font-weight:700;display:block}.pipe-step strong{font-family:Lato,Arial,sans-serif;font-size:19px}.blue{color:var(--azam-blue)!important}.red{color:var(--azam-red)!important}.amber{color:var(--gold-500)!important}.green{color:var(--green-600)!important}.cyan{color:var(--teal-600)!important}.green-text{color:var(--green-600)!important}.red-text{color:var(--red-600)!important}.mini-metrics{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;grid-template-columns:repeat(3,1fr);margin:0 16px 16px;display:grid}.mini-metrics div{border-right:1px solid var(--gray-200);justify-content:space-between;padding:11px 14px;display:flex}.mini-metrics div:last-child{border:0}.mini-metrics span{color:var(--gray-500);font-size:10px}.lower-grid{grid-template-columns:1.25fr 1fr;gap:16px;display:grid}.map-canvas{background:#dceaf0;height:310px;position:relative;overflow:hidden}.map-canvas.large{height:560px}.map-grid{background-image:linear-gradient(#0072bc14 1px,#0000 1px),linear-gradient(90deg,#0072bc14 1px,#0000 1px);background-size:34px 34px;position:absolute;top:0;bottom:0;left:0;right:0}.land-shape{clip-path:polygon(12% 0,85% 8%,100% 34%,83% 60%,77% 100%,32% 92%,18% 70%,0 40%);background:#eaf0dc;border:2px solid #0072bc2e;width:58%;height:105%;position:absolute;top:-5%;left:24%}.pin{color:var(--azam-blue);fill:#fff;filter:drop-shadow(0 3px 3px #0e213b40);width:24px;height:24px;position:absolute}.pin.p1{top:15%;left:48%}.pin.p2{top:43%;left:58%}.pin.p3{top:68%;left:42%}.pin.p4{top:63%;left:76%}.pin.hq{color:var(--azam-red);width:29px;height:29px}.map-label{color:var(--gray-700);font-size:10px;font-weight:700;position:absolute}.map-label.l1{top:22%;left:42%}.map-label.l2{top:51%;left:50%}.map-label.l3{top:77%;left:35%}.map-label.l4{top:73%;left:72%}.map-key{box-shadow:var(--shadow-card);background:#fff;border-radius:8px;gap:5px;padding:9px 12px;font-size:10px;display:grid;position:absolute;bottom:16px;left:16px}.map-key i{border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block}.red-dot{background:var(--azam-red)}.blue-dot{background:var(--azam-blue)}.map-controls{box-shadow:var(--shadow-card);display:grid;position:absolute;top:16px;right:16px}.map-controls button{border:0;border-bottom:1px solid var(--gray-200);background:#fff;width:32px;height:32px;font-size:18px}.pulse{animation:2s infinite pulse}@keyframes pulse{50%{filter:drop-shadow(0 0 8px);transform:scale(1.12)}}.simple-table{padding:4px 16px}.table-row{border-bottom:1px solid var(--gray-200);grid-template-columns:20px 1fr auto auto;align-items:center;gap:9px;padding:13px 0;display:grid}.table-row:last-child{border:0}.table-row span{color:var(--gray-500);font-size:11px}.lifecycle{border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-card);background:#fff;align-items:center;margin-bottom:16px;padding:13px 18px;display:flex}.lifecycle>div{color:var(--gray-500);align-items:center;gap:7px;display:flex}.lifecycle>div>span{border:2px solid var(--gray-300);border-radius:50%;place-items:center;width:25px;height:25px;font-size:10px;font-weight:800;display:grid}.lifecycle>div>b{white-space:nowrap;font-size:10px}.lifecycle>i{background:var(--gray-200);flex:1;height:2px;margin:0 10px}.lifecycle>div.done>span{background:var(--green-600);border-color:var(--green-600);color:#fff}.lifecycle>div.active>span{background:var(--azam-blue);border-color:var(--azam-blue);color:#fff;box-shadow:0 0 0 5px var(--azam-blue-tint)}.lifecycle>div.active>b{color:var(--azam-blue-dark)}.split-screen{grid-template-columns:1.08fr .92fr;gap:16px;display:grid}.form-grid{grid-template-columns:1fr 1fr;gap:14px;padding:18px;display:grid}.field{display:block}.field>span{text-transform:uppercase;letter-spacing:.05em;color:var(--gray-700);margin-bottom:5px;font-size:10px;font-weight:800;display:block}.field.full{grid-column:1/-1}.input{border:1px solid var(--gray-300);background:var(--gray-50);min-height:40px;color:var(--gray-700);border-radius:8px;align-items:center;gap:8px;padding:0 11px;transition:all .2s;display:flex}.input:hover{border-color:var(--sky-500);box-shadow:0 0 0 4px #4c8ddb1f}.input span:first-of-type{flex:1}.input.warn{background:#fff9f9;border-color:#f3a8a5}.input.compact{width:150px;min-height:34px}.inline-alert{background:var(--red-100);color:var(--red-600);border-radius:7px;align-items:center;gap:7px;margin-top:6px;padding:7px 9px;font-size:10px;display:flex}.inline-alert span{flex:1}.inline-alert button{color:inherit;background:0 0;border:0}.form-note{border-top:1px solid var(--gray-200);color:var(--gray-500);align-items:center;gap:7px;padding:12px 18px;font-size:10.5px;display:flex}.validation{background:linear-gradient(155deg,var(--navy-900),var(--navy-950));color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lift);overflow:hidden}.validation-head{border-bottom:1px solid #9fc1ee2e;justify-content:space-between;align-items:center;padding:16px 18px;display:flex}.validation-head>div{align-items:center;gap:8px;display:flex}.validation-head h2{font-size:14px}.validation-row{border-bottom:1px solid #9fc1ee24;grid-template-columns:30px 1fr auto 53px;align-items:center;gap:9px;padding:15px 16px;display:grid}.check-ring{color:#2bd99a;background:#2bd99a2e;border-radius:50%;place-items:center;width:26px;height:26px;display:grid}.validation-row b,.validation-row small{display:block}.validation-row b{font-size:11.5px}.validation-row small,.validation-row>span{color:#8fa6cc;font-size:9.5px}.validation-foot{color:#8fa6cc;justify-content:space-between;padding:13px 16px;font-size:9.5px;display:flex}.validation-foot span{gap:6px;display:flex}.validation-foot b{color:#2bd99a}.diagnosis-grid{grid-template-columns:1.1fr .9fr;gap:16px;margin-bottom:16px;display:grid}.outcomes{grid-template-columns:repeat(3,1fr);gap:10px;padding:18px 18px 0;display:grid}.outcomes button{text-align:left;border:1px solid var(--gray-200);background:#fff;border-radius:10px;grid-template-columns:38px 1fr 18px;align-items:center;gap:8px;min-height:100px;padding:13px;display:grid}.outcomes button.selected{border:2px solid var(--azam-blue);background:var(--azam-blue-tint)}.outcomes button>div{background:var(--azam-blue-tint);width:36px;height:36px;color:var(--azam-blue);border-radius:9px;place-items:center;display:grid}.outcomes b,.outcomes small{display:block}.outcomes small{color:var(--gray-500);margin-top:4px;font-size:9px}.outcomes button>i{border:1px solid var(--gray-300);color:#fff;border-radius:50%;place-items:center;width:17px;height:17px;display:grid}.outcomes button.selected>i{background:var(--azam-blue);border-color:var(--azam-blue)}.textarea{border:1px solid var(--gray-300);background:var(--gray-50);height:76px;color:var(--gray-700);border-radius:8px;padding:11px}.diagnosis-form{padding-top:14px}.diagnosis-grid table{margin-top:6px}.total-line{background:var(--gray-50);justify-content:space-between;padding:15px 18px;display:flex}.master-row{align-items:center;gap:14px;padding:18px;display:flex}.master-row>div:first-child{flex:1;align-items:center;gap:10px;display:flex}.master-row b,.master-row small{display:block}.master-row small{color:var(--gray-500)}.tag-list{gap:7px;display:flex}.modal-back{z-index:50;background:#060f2285;place-items:center;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.modal{background:#fff;border-radius:14px;gap:15px;width:440px;padding:18px;display:grid;box-shadow:0 28px 80px #060f2259}.modal-head{justify-content:space-between;align-items:center;display:flex}.modal-head h2{font-size:18px}.modal-head button{background:var(--gray-100);border:0;border-radius:7px;place-items:center;width:31px;height:31px;display:grid}.modal-actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.approval-grid{grid-template-columns:.9fr 1.1fr;gap:16px;margin-bottom:16px;display:grid}.identity-block{border-bottom:1px solid var(--gray-200);align-items:center;gap:14px;padding:18px;display:flex}.stb-art{background:var(--red-100);width:70px;height:70px;color:var(--azam-red);border-radius:12px;place-items:center;display:grid}.identity-block h3{margin:8px 0 3px;font-size:14px}.identity-block p{color:var(--gray-500);font-size:11px}.detail-list{grid-template-columns:1fr 1fr;padding:10px 18px;display:grid}.detail-list>div{border-bottom:1px solid var(--gray-200);padding:10px 0}.detail-list dt{color:var(--gray-500);font-size:10px}.detail-list dd{margin:3px 0 0;font-weight:700}.evidence{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:9px;align-items:center;gap:10px;margin:0 18px 18px;padding:11px;display:flex}.evidence div{flex:1}.evidence b,.evidence span{display:block}.evidence span{color:var(--gray-500);font-size:10px}.rules{padding:8px 18px}.rules>div{border-bottom:1px solid var(--gray-200);grid-template-columns:28px 1fr auto;align-items:center;gap:9px;padding:11px 0;display:grid}.rules svg{width:20px}.rules .pass>svg{color:var(--green-600)}.rules .warn>svg{color:var(--gold-500)}.rules b,.rules span{display:block}.rules span{color:var(--gray-500);font-size:10px}.rule-result{background:var(--gold-100);color:#8b5900;border:1px solid #f1d79c;border-radius:9px;gap:10px;margin:4px 18px 12px;padding:11px;display:flex}.rule-result b,.rule-result span{display:block}.rule-result span{font-size:10px}.approval-actions{justify-content:flex-end;gap:9px;padding:12px 18px;display:flex}.decision{border-radius:8px;align-items:center;gap:8px;margin:0 18px 18px;padding:9px;display:flex}.decision.approved{background:var(--green-100);color:var(--green-600)}.decision.rejected{background:var(--red-100);color:var(--red-600)}.blocked{background:var(--red-100);color:var(--red-600);border-radius:9px;align-items:center;gap:12px;margin:16px 18px;padding:14px;display:flex}.blocked div{flex:1}.blocked b,.blocked span{display:block}.blocked span{color:#9a4b49;font-size:10.5px}.hold-banner,.deadline{background:linear-gradient(90deg,var(--gold-100),#fff9ec);border-radius:var(--radius);color:#8b5900;border:1px solid #edca78;align-items:center;gap:12px;margin-bottom:16px;padding:13px 16px;display:flex}.hold-banner div,.deadline div{flex:1}.hold-banner b,.hold-banner span,.deadline b,.deadline span{display:block}.hold-banner span,.deadline span{font-size:10.5px}.hold-banner button,.deadline button{color:#8b5900;background:0 0;border:0;gap:5px;font-weight:700;display:flex}.kanban{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;display:grid}.lane{border-radius:var(--radius);background:#e9edf3;padding:10px}.lane-head{justify-content:space-between;align-items:center;padding:4px 4px 11px;display:flex}.lane-head>div{align-items:center;gap:7px;display:flex}.lane-head i{background:var(--azam-blue);border-radius:50%;width:8px;height:8px}.lane-head i.amber{background:var(--gold-500)}.lane-head i.green{background:var(--green-600)}.lane-head h2{font-size:13px}.lane-head span{background:#fff;border-radius:20px;padding:2px 7px;font-size:9px}.stb-card{border:1px solid var(--gray-200);background:#fff;border-radius:9px;margin-bottom:9px;padding:12px;box-shadow:0 2px 7px #0b1f3f0d}.stb-card>div:first-child{justify-content:space-between;align-items:center;display:flex}.stb-card>div:first-child>span{color:var(--gray-500);font-size:9px}.stb-card>b{margin:11px 0 4px;font-family:ui-monospace,monospace;display:block}.stb-card p{color:var(--gray-500);font-size:10.5px}.stb-foot{border-top:1px solid var(--gray-200);gap:15px;margin-top:11px;padding-top:9px;display:flex}.stb-foot span{color:var(--gray-500);align-items:center;gap:4px;font-size:9.5px;display:flex}.lane-more{width:100%;color:var(--azam-blue);background:0 0;border:0;justify-content:center;align-items:center;font-size:10.5px;font-weight:700;display:flex}.dropzone{border:2px dashed var(--gray-300);min-height:180px;color:var(--gray-500);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:7px;margin:18px;display:flex}.dropzone b{color:var(--gray-700)}.dropzone span{font-size:10px}.call-layout{grid-template-columns:.85fr 1.15fr;gap:16px;display:grid}.caller{border-bottom:1px solid var(--gray-200);align-items:center;gap:11px;padding:18px;display:flex}.caller>span{background:var(--azam-blue-tint);width:48px;height:48px;color:var(--azam-blue);border-radius:50%;place-items:center;font-size:15px;font-weight:800;display:grid}.caller>div{flex:1}.caller h3{font-size:14px}.caller p{color:var(--gray-500);font-size:10.5px}.attempts{background:var(--gray-50);border-bottom:1px solid var(--gray-200);align-items:center;gap:9px;padding:13px 18px;display:flex}.attempts>div{flex:1}.attempts b,.attempts span{display:block}.attempts span{color:var(--gray-500);font-size:9.5px}.attempts i{border:1px solid var(--gray-300);border-radius:50%;place-items:center;width:27px;height:27px;font-size:10px;font-style:normal;display:grid}.attempts i.filled{background:var(--azam-blue);border-color:var(--azam-blue);color:#fff}.previous-note{background:var(--gray-50);border-radius:8px;gap:8px;margin:0 18px 18px;padding:10px;display:flex}.previous-note b,.previous-note span{display:block}.previous-note span{color:var(--gray-500);font-size:9.5px}.call-outcomes{grid-template-columns:1fr 1fr;gap:9px;padding:18px;display:grid}.call-outcomes button{border:1px solid var(--gray-200);text-align:left;background:#fff;border-radius:9px;grid-template-columns:32px 1fr 17px;align-items:center;gap:8px;padding:10px;display:grid}.call-outcomes button.selected{border:2px solid var(--azam-blue);background:var(--azam-blue-tint)}.call-outcomes button>span{background:var(--gray-100);border-radius:8px;place-items:center;width:30px;height:30px;display:grid}.call-outcomes button>i{border:1px solid var(--gray-300);border-radius:50%;place-items:center;width:16px;height:16px;display:grid}.call-outcomes button.selected>i{background:var(--azam-blue);border-color:var(--azam-blue);color:#fff}.call-layout .field{padding:0 18px}.schedule{border:1px solid var(--gray-200);border-radius:9px;align-items:center;gap:9px;margin:14px 18px 0;padding:10px;display:flex}.schedule>div:nth-child(2){flex:1}.schedule b,.schedule span{display:block}.schedule span{color:var(--gray-500);font-size:9.5px}.approval-chain{align-items:center;padding:18px;display:flex}.approval-chain>div{grid-template-columns:32px 1fr;align-items:center;gap:2px 9px;min-width:170px;display:grid}.approval-chain>div>span{border:2px solid var(--gray-300);border-radius:50%;grid-row:1/4;place-items:center;width:31px;height:31px;font-weight:800;display:grid}.approval-chain>div.done>span{background:var(--green-600);border-color:var(--green-600);color:#fff}.approval-chain>div.current>span{background:var(--azam-red);border-color:var(--azam-red);color:#fff;box-shadow:0 0 0 5px var(--red-100)}.approval-chain small{color:var(--gray-500);font-size:9.5px}.approval-chain .badge{grid-column:2;width:max-content;margin-top:3px}.approval-chain>i{background:var(--gray-200);flex:1;height:2px;margin:0 9px}.settlement-layout{grid-template-columns:1fr 285px;gap:16px;margin-top:16px;display:grid}.settlement-table th,.settlement-table td{text-align:right}.settlement-table th:first-child,.settlement-table td:first-child{text-align:left}.settle-bar{background:var(--gray-50);align-items:center;gap:28px;padding:13px 18px;display:flex}.settle-bar>div>span,.settle-bar>div>b{display:block}.settle-bar>div>span{color:var(--gray-500);font-size:9.5px}.settle-bar .approval-actions{margin-left:auto;padding:0}.exceptions{padding:4px 14px}.exceptions>div{border-bottom:1px solid var(--gray-200);grid-template-columns:36px 1fr 24px 18px;align-items:center;gap:8px;padding:13px 0;display:grid}.exceptions>div>span{background:var(--gray-100);border-radius:9px;place-items:center;width:34px;height:34px;display:grid}.exceptions b,.exceptions small{display:block}.exceptions small{color:var(--gray-500)}.exceptions em{background:var(--red-100);color:var(--red-600);border-radius:20px;padding:2px 6px;font-size:9px;font-style:normal;font-weight:800}.centres-layout{grid-template-columns:1.2fr .8fr;gap:16px;display:grid}.centre-list{padding:4px 14px}.centre-list>div{border-bottom:1px solid var(--gray-200);border-radius:7px;grid-template-columns:24px 1fr 48px 48px auto;align-items:center;gap:9px;padding:13px 8px;display:grid}.centre-list>div.selected{background:var(--azam-blue-tint)}.centre-list b,.centre-list small{display:block}.centre-list small{color:var(--gray-500);font-size:9px}.centre-list>div>span{text-align:center}.audit-controls{grid-template-columns:1fr 180px 180px auto;gap:9px;margin-bottom:16px;display:grid}.audit-controls .global-search{max-width:none;margin:0}.audit-controls .badge{justify-self:end}.audit-timeline{padding:22px}.audit-timeline>div{grid-template-columns:38px 1fr;display:grid;position:relative}.audit-timeline>div:not(:last-child):before{content:"";background:var(--gray-200);width:2px;position:absolute;top:33px;bottom:-5px;left:15px}.audit-node{background:var(--azam-blue-tint);width:31px;height:31px;color:var(--azam-blue);z-index:1;border-radius:50%;place-items:center;display:grid}.audit-node.green{background:var(--green-100);color:var(--green-600)}.audit-node.amber{background:var(--gold-100);color:var(--gold-500)}.audit-node.cyan{background:var(--teal-100);color:var(--teal-600)}.audit-event{padding:3px 0 23px}.audit-event>div:first-child{align-items:center;gap:8px;display:flex}.audit-event p{color:var(--gray-500);align-items:center;gap:5px;margin-top:5px;font-size:10px;display:flex}.audit-event p svg{width:12px}.change{border:1px solid var(--gray-200);background:var(--gray-50);border-radius:7px;align-items:center;gap:8px;margin-top:9px;padding:8px;font-size:10px;display:flex}.change del{color:var(--red-600)}.change ins{color:var(--green-600);font-weight:700;text-decoration:none}.change span:last-child{color:var(--gray-500);margin-left:auto}.finance-grid{grid-template-columns:1.1fr .9fr;gap:16px;margin-bottom:16px;display:grid}.finance-summary{gap:9px;padding:18px;display:grid}.finance-summary>div{border:1px solid var(--gray-200);border-radius:9px;align-items:center;gap:10px;padding:11px;display:flex}.finance-summary>div:first-child{background:var(--gray-50)}.finance-summary>div:first-child span{color:var(--gray-500)}.finance-summary>div:first-child strong{margin-left:auto;font-family:Lato,Arial,sans-serif;font-size:20px}.finance-summary>div>span{font-weight:700}.finance-summary>div>small{color:var(--gray-500);flex:1}.bank-check{background:var(--green-100);color:var(--green-600);border-radius:8px;gap:7px;margin:0 18px 18px;padding:9px;display:flex}.payment-form{grid-template-columns:1fr 1fr 1fr 1fr auto;align-items:end;gap:12px;padding:18px;display:grid}.payment-success{background:var(--green-100);color:var(--green-600);border-radius:8px;gap:9px;margin:0 18px 18px;padding:11px;display:flex}.payment-success b,.payment-success span{display:block}.payment-success span{font-size:10px}.document-row{grid-template-columns:repeat(3,1fr);gap:12px;padding:18px;display:grid}.document-row>div{border:1px solid var(--gray-200);border-radius:9px;align-items:center;gap:8px;padding:11px;display:flex}.document-row span{flex:1}.document-row b,.document-row small{display:block}.document-row small{color:var(--gray-500);font-size:9px}.document-row button{color:var(--azam-blue);background:0 0;border:0}.deadline>button{margin-left:auto}.report-grid{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;display:grid}.report-form{grid-template-columns:1fr 1fr;gap:14px;padding:18px;display:grid}.format-tabs{border:1px solid var(--gray-300);border-radius:8px;display:flex;overflow:hidden}.format-tabs button{border:0;border-right:1px solid var(--gray-200);color:var(--gray-500);background:#fff;flex:1;justify-content:center;align-items:center;gap:5px;padding:7px;display:flex}.format-tabs button.active{background:var(--azam-blue-tint);color:var(--azam-blue);font-weight:700}.format-tabs svg{width:15px}.checkbox-list{background:var(--gray-50);border-radius:8px;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px;padding:10px;display:grid}.checkbox-list label{color:var(--gray-700);font-size:10.5px}.report-form>.button{grid-column:2;justify-self:end}.report-checks{padding:8px 18px}.report-checks>div{border-bottom:1px solid var(--gray-200);align-items:center;gap:9px;padding:10px 0;display:flex}.report-checks>div>span{background:var(--green-100);width:28px;height:28px;color:var(--green-600);border-radius:50%;place-items:center;display:grid}.report-checks>div>span.amber{background:var(--gold-100);color:var(--gold-500)}.report-checks b,.report-checks small{display:block}.report-checks small{color:var(--gray-500);font-size:9.5px}.generated-file{background:var(--green-100);color:var(--green-600);border:1px solid #b7e2d2;border-radius:9px;align-items:center;gap:9px;margin:0 18px 18px;padding:10px;display:flex}.generated-file div{flex:1}.generated-file b,.generated-file span{display:block}.generated-file span{font-size:9px}@media (max-width:1180px){.sidebar{width:205px}.main-wrap{width:calc(100% - 205px);margin-left:205px}.stats-grid{grid-template-columns:1fr 1fr}.overview-grid,.lower-grid,.split-screen,.diagnosis-grid,.approval-grid,.call-layout,.centres-layout,.finance-grid,.report-grid,.settlement-layout{grid-template-columns:1fr}.payment-form,.kanban{grid-template-columns:1fr 1fr}.approval-chain>div{min-width:130px}.global-search{display:none}}@media (max-width:780px){.sidebar{width:68px;padding-inline-start:8px;padding-inline-end:8px}.brand{padding:0 0 14px}.logo-wrap{width:50px}.brand>div:last-child,.sidebar nav span,.sidebar nav em,.sidebar-bottom{display:none}.sidebar nav button{justify-content:center;padding:12px}.main-wrap{width:calc(100% - 68px);margin-left:68px}.topbar{padding:0 14px}.crumb span,.user div,.user svg{display:none}main{padding:16px}.page-header{flex-direction:column}.header-actions{justify-content:flex-start}.stats-grid,.stats-grid.three,.form-grid,.kanban,.document-row,.report-form{grid-template-columns:1fr}.lifecycle{overflow:auto}.lifecycle>i{min-width:30px}.overview-grid{grid-template-columns:1fr}.approval-chain{overflow:auto}.payment-form,.audit-controls{grid-template-columns:1fr}.audit-controls .global-search{display:flex}.call-outcomes{grid-template-columns:1fr}.finance-summary>div{flex-wrap:wrap}}body{background:#f6f7f9}.sidebar{background:linear-gradient(176deg,var(--navy-950) 0%,#172c50 58%,var(--azam-blue-dark) 130%);width:252px;padding:18px 14px}.sidebar:before{content:"";background:linear-gradient(90deg,var(--azam-blue) 0 62%,var(--azam-red) 62% 78%,var(--azam-blue-dark) 78%);height:3px;position:absolute;top:0;left:0;right:0}.main-wrap{width:calc(100% - 252px);margin-left:252px}.brand{margin-bottom:9px;padding:5px 8px 19px}.logo-wrap{border-radius:8px;width:64px;height:44px;padding:8px 10px}.logo-wrap img{max-height:28px}.brand strong{font-size:12.5px;line-height:1.25}.brand span{letter-spacing:.13em;margin-top:3px;font-size:8px;display:block}.sidebar nav{gap:0;padding-right:2px}.nav-section{padding-top:9px}.nav-section>p{color:#7594ba;text-transform:uppercase;letter-spacing:.16em;margin:0 10px 6px;font-size:8.5px;font-weight:800}.sidebar nav button{border:1px solid #0000;margin-bottom:2px;padding:8px 10px;font-size:11.5px;position:relative}.sidebar nav button.active{box-shadow:none;color:#fff;background:linear-gradient(90deg,#0072bc47,#27369138);border-color:#88ceee2e}.sidebar nav button.active:before{content:"";background:var(--azam-red);border-radius:0 3px 3px 0;width:3px;position:absolute;top:7px;bottom:7px;left:-14px;box-shadow:0 0 12px #ed1c248c}.sidebar nav button.active svg:first-child{color:var(--sky-300)}.nav-arrow{color:#9bb3d2;margin-left:auto}.sidebar nav button.active em{margin-left:auto}.sidebar nav button.active em+.nav-arrow{margin-left:0}.sidebar-bottom{padding-top:8px}.system{background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;margin-top:5px}.brand-positioning{text-align:center;color:var(--sky-300);letter-spacing:.08em;margin-top:9px;font-size:8.5px}.topbar{border-top:3px solid #0000;height:68px;padding:0 28px;box-shadow:0 1px #0b1f3f08}.crumb{font-size:11.5px}.global-search{background:#f7f9fc;border-color:#dde3ec;max-width:430px}.top-create{background:var(--azam-blue-tint);height:34px;color:var(--azam-blue-dark);border:0;border-radius:8px;align-items:center;gap:6px;padding:0 12px;font-size:11px;font-weight:800;display:flex}.top-create:hover{background:#dceaf9}.user>span{background:linear-gradient(145deg,var(--navy-800),var(--azam-blue));box-shadow:0 0 0 3px var(--azam-blue-tint)}main{padding:28px 30px 40px}.button.primary{background:linear-gradient(120deg,var(--azam-blue-dark),var(--azam-blue));box-shadow:0 5px 16px #2e5fa840}.button.hero{color:#fff;box-shadow:none;background:#ffffff14;border:1px solid #ffffff40}.button.secondary{background:#fff;border-color:#d7dee8}.button.danger{color:var(--red-600)}.overview-hero{color:#fff;background:linear-gradient(120deg,var(--navy-950) 0%,#183e68 58%,var(--azam-blue-dark) 125%);border-radius:16px;justify-content:space-between;align-items:center;gap:30px;min-height:226px;margin-bottom:26px;padding:31px 34px;display:flex;position:relative;overflow:hidden;box-shadow:0 18px 42px #0e213b2e}.overview-hero:before{content:"";pointer-events:none;background:radial-gradient(circle at 76% 30%,#88ceee38,#0000 35%),linear-gradient(90deg,#0000 0 70%,#ed1c240d);position:absolute;top:0;bottom:0;left:0;right:0}.overview-hero:after{content:"";pointer-events:none;background:linear-gradient(145deg,#0000 65%,#ffffff06 65% 68%,#0000 68%);position:absolute;top:0;bottom:0;left:0;right:0}.hero-copy{z-index:3;max-width:690px;position:relative}.hero-date{color:var(--sky-300);letter-spacing:.16em;margin-bottom:12px;font-size:9px;font-weight:900;display:block}.hero-copy h1{letter-spacing:-.025em;font-size:30px;font-weight:900}.hero-copy p{color:#c4d7eb;max-width:620px;margin-top:9px;font-size:13px;line-height:1.7}.hero-copy p b{color:#fff}.hero-actions{gap:9px;margin-top:20px;display:flex}.network-health{z-index:3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fff1;border:1px solid #88ceee3b;border-radius:13px;align-items:center;gap:15px;width:310px;min-width:310px;padding:16px 18px;display:flex;position:relative}.health-ring{width:70px;height:70px;position:relative}.health-ring svg{width:100%;transform:rotate(-90deg)}.health-ring circle{fill:none;stroke:#ffffff1f;stroke-width:7px}.health-ring .progress{stroke:var(--sky-300);stroke-dasharray:226;stroke-dashoffset:19px;stroke-linecap:round}.health-ring strong{place-items:center;font-family:Lato,Arial,sans-serif;font-size:14px;font-weight:900;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.network-health span,.network-health b,.network-health small{display:block}.network-health span{letter-spacing:.14em;color:var(--sky-300);font-size:8.5px;font-weight:900}.network-health b{margin:4px 0 3px}.network-health small{color:#afc5dd;font-size:9.5px}.brand-flash{pointer-events:none;z-index:1;border-radius:100% 0 0 100%;width:470px;height:18px;position:absolute;right:-65px;transform:skew(-24deg)rotate(-4deg)}.flash-red{background:linear-gradient(90deg,transparent 0%,#ed1c24e6 45%,var(--azam-red) 100%);clip-path:polygon(0 48%,100% 0,100% 48%,10% 100%);top:25px}.flash-blue{background:linear-gradient(90deg,transparent 0%,var(--azam-blue) 48%,var(--azam-blue-dark) 100%);clip-path:polygon(0 65%,100% 0,100% 55%,12% 100%);bottom:18px}.hero-brand-line{z-index:2;color:#ffffff9e;letter-spacing:.12em;text-transform:uppercase;font-size:8px;font-weight:700;position:absolute;bottom:9px;right:34px}.page-header{align-items:center;margin-bottom:16px}.page-header h1{font-size:20px}.page-header p{font-size:12px}.card{border-color:#e0e5ed;box-shadow:0 1px 2px #0b1f3f0a,0 7px 20px #0b1f3f09}.card-head{padding:15px 17px}.card-head h2{font-size:13px}.card-head p{font-size:10.5px}.stats-grid{gap:12px}.stat{min-height:105px;padding:15px 16px;box-shadow:0 1px 2px #0b1f3f0a}.stat:before{width:3px}.stat-icon{border-radius:9px;width:37px;height:37px}.stat strong{font-size:19px}.stat small{font-size:9.5px}.overview-grid,.lower-grid{gap:14px}.pipeline{padding-top:20px}.pipe-step{background:#f6f8fb;border:0}.simple-table{padding-inline-start:15px;padding-inline-end:15px}.lifecycle{border-color:#e0e5ed;box-shadow:0 1px 2px #0b1f3f0a}.validation{background:linear-gradient(155deg,#0a244c,#06142d)}.hold-banner,.deadline{box-shadow:0 1px 2px #0b1f3f0a}.lane{background:#edeff4}.stb-card{box-shadow:none}.audit-node{box-shadow:0 0 0 4px #fff}.format-tabs button.active{box-shadow:inset 0 -2px 0 var(--azam-blue)}@media (max-width:1180px){.sidebar{width:218px}.main-wrap{width:calc(100% - 218px);margin-left:218px}.overview-hero{align-items:flex-start}.network-health{width:280px;min-width:280px}}@media (max-width:900px){.network-health{display:none}.overview-hero{min-height:auto}.hero-copy{max-width:none}.top-create{display:none}}@media (max-width:780px){.sidebar{width:68px}.main-wrap{width:calc(100% - 68px);margin-left:68px}.nav-section>p{display:none}.nav-section{padding-top:4px}.sidebar nav button.active:before{left:-8px}.overview-hero{padding:25px 22px}.hero-copy h1{font-size:25px}.hero-actions{flex-wrap:wrap}main{padding:16px}.topbar{padding-inline-start:13px;padding-inline-end:13px}}.approval-chain{gap:0;padding:20px 22px}.approval-chain>div{grid-template-columns:36px minmax(112px,1fr);align-items:center;min-width:174px}.approval-chain>div>span:first-child{border:2px solid var(--gray-300);border-radius:50%;grid-area:1/1/4;place-items:center;width:32px;height:32px;padding:0;font-size:11px;display:grid}.approval-chain>div.done>span:first-child{background:var(--green-600);border-color:var(--green-600);color:#fff}.approval-chain>div.current>span:first-child{background:var(--azam-red);border-color:var(--azam-red);color:#fff;box-shadow:0 0 0 5px var(--azam-red-tint)}.approval-chain>div>b{white-space:normal;grid-area:1/2;font-size:11.5px;line-height:1.2}.approval-chain>div>small{white-space:nowrap;grid-area:2/2;margin-top:2px;line-height:1.2}.approval-chain>div>.badge{place-items:initial;width:max-content;height:auto;min-height:0;box-shadow:none;border:0;border-radius:999px;grid-area:3/2;margin-top:5px;padding:3px 8px;font-size:9px;line-height:1.2;display:inline-flex}.approval-chain>div>.badge.green{background:var(--green-100);color:var(--green-600)}.approval-chain>div>.badge.amber{background:var(--gold-100);color:#a65e00}.approval-chain>i{min-width:32px;margin:0 10px}.login-page{background:#fff;grid-template-columns:minmax(520px,1.08fr) minmax(430px,.92fr);min-height:100vh;display:grid}.login-story{color:#fff;background:linear-gradient(145deg,var(--navy-950) 0%,#183a61 62%,var(--azam-blue-dark) 125%);align-items:center;padding:42px 54px;display:flex;position:relative;overflow:hidden}.login-story:before{content:"";background:linear-gradient(132deg,#0000 0 58%,#88ceee0d 58% 60%,#0000 60%),radial-gradient(circle at 18% 12%,#88ceee24,#0000 31%);position:absolute;top:0;bottom:0;left:0;right:0}.login-story-inner{z-index:3;width:100%;max-width:720px;margin:auto;position:relative}.login-brand{align-items:center;gap:15px;display:flex;position:absolute;top:-150px;left:0}.login-brand>span{background:#fff;border-radius:10px;place-items:center;width:104px;height:62px;padding:13px 16px;display:grid}.login-brand img{width:100%;display:block}.login-brand b,.login-brand small{display:block}.login-brand b{font-size:13px;font-weight:900}.login-brand small{color:#9fb8d4;text-transform:uppercase;letter-spacing:.12em;margin-top:3px;font-size:9px}.login-message>span{color:var(--sky-300);letter-spacing:.2em;font-size:9px;font-weight:900}.login-message h1{letter-spacing:-.025em;margin:16px 0 18px;font-size:39px;font-weight:900;line-height:1.13}.login-message p{color:#b9cce0;max-width:620px;font-size:14px;line-height:1.75}.login-flow{align-items:center;max-width:610px;margin-top:42px;display:flex}.login-flow>div{align-items:center;gap:8px;display:flex}.login-flow>div>span{width:32px;height:32px;color:var(--sky-300);background:#0072bc29;border:1px solid #88ceee70;border-radius:50%;place-items:center;font-size:9px;font-weight:900;display:grid}.login-flow>div>b{font-size:10.5px}.login-flow>i{background:linear-gradient(90deg,#88ceee8c,#88ceee1f);flex:1;min-width:28px;height:1px;margin:0 11px}.login-trust{color:var(--sky-300);border-top:1px solid #ffffff1a;align-items:center;gap:10px;margin-top:34px;padding-top:22px;display:flex}.login-trust b,.login-trust small{display:block}.login-trust b{color:#fff;font-size:10.5px}.login-trust small{color:#91a9c4;margin-top:2px;font-size:9.5px}.login-flash{z-index:1;width:560px;height:28px;position:absolute;right:-80px;transform:rotate(-5deg)skew(-25deg)}.login-flash.red{background:linear-gradient(90deg,transparent,var(--azam-red));clip-path:polygon(0 55%,100% 0,100% 46%,12% 100%);top:52px}.login-flash.blue{background:linear-gradient(90deg,transparent,var(--azam-blue) 55%,var(--azam-blue-dark));clip-path:polygon(0 62%,100% 0,100% 48%,12% 100%);bottom:45px}.login-positioning{z-index:2;color:#ffffff8f;letter-spacing:.1em;text-transform:uppercase;font-size:8px;position:absolute;bottom:22px;right:44px}.login-access{background:#f9fafc;flex-direction:column;justify-content:center;align-items:center;padding:44px;display:flex;position:relative}.login-access:before{content:"";opacity:.52;background:linear-gradient(150deg,#0000 0 72%,#0072bc09 72% 75%,#0000 75%),linear-gradient(28deg,#0000 0 82%,#27369107 82% 85%,#0000 85%);position:absolute;top:0;bottom:0;left:0;right:0}.login-card{z-index:2;background:#fff;border:1px solid #e0e5ed;border-radius:15px;width:min(440px,100%);padding:38px 40px;position:relative;box-shadow:0 22px 60px #0e213b1f}.mobile-login-logo{display:none}.login-kicker{color:var(--azam-red);letter-spacing:.16em;margin-bottom:9px;font-size:9px;font-weight:900;display:block}.login-card h2{color:var(--navy-950);font-size:27px;font-weight:900}.login-card>p{color:var(--gray-500);margin-top:5px;font-size:12px}.google-login{border:1px solid var(--gray-300);width:100%;height:44px;color:var(--gray-700);background:#fff;border-radius:8px;justify-content:center;align-items:center;gap:10px;margin-top:25px;transition:all .2s;display:flex}.google-login:hover{border-color:var(--azam-blue);box-shadow:0 0 0 4px var(--azam-blue-tint)}.google-g{color:#4285f4;font-size:18px;font-weight:900}.google-login b{font-size:12px}.login-divider{color:var(--gray-500);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:12px;margin:19px 0;font-size:9px;display:flex}.login-divider:before,.login-divider:after{content:"";background:var(--gray-200);flex:1;height:1px}.login-field{margin-bottom:14px;display:block}.login-field>span{color:var(--gray-700);margin-bottom:5px;font-size:10px;font-weight:800;display:block}.login-field>div{border:1px solid var(--gray-300);background:var(--gray-50);height:42px;color:var(--gray-500);border-radius:8px;align-items:center;gap:8px;padding:0 11px;transition:all .2s;display:flex}.login-field>div:focus-within{border-color:var(--azam-blue);box-shadow:0 0 0 4px var(--azam-blue-tint);background:#fff}.login-field input{min-width:0;color:var(--gray-900);background:0 0;border:0;outline:0;flex:1;font-size:12px}.login-field button{color:var(--azam-blue-dark);background:0 0;border:0;font-size:9px;font-weight:800}.login-options{color:var(--gray-500);justify-content:space-between;align-items:center;margin:3px 0 18px;font-size:9.5px;display:flex}.login-options label{align-items:center;gap:5px;display:flex}.login-options input{accent-color:var(--azam-blue)}.login-options button{color:var(--azam-blue-dark);background:0 0;border:0;font-weight:800}.login-submit{background:linear-gradient(110deg,var(--azam-blue),var(--azam-blue-dark));color:#fff;border:0;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;height:44px;font-size:12px;font-weight:900;display:flex;box-shadow:0 7px 18px #0072bc3d}.login-submit:hover{filter:brightness(1.06);transform:translateY(-1px)}.login-submit:disabled{opacity:.75}.login-help{background:var(--gray-50);color:var(--gray-500);border-radius:8px;align-items:center;gap:8px;margin-top:20px;padding:11px;font-size:9.5px;display:flex}.login-access footer{z-index:2;color:#8a94a3;justify-content:space-between;font-size:8.5px;display:flex;position:absolute;bottom:18px;left:32px;right:32px}.spin{animation:1s linear infinite rotate360}@keyframes rotate360{to{transform:rotate(360deg)}}@media (max-width:1000px){.login-page{grid-template-columns:1fr}.login-story{display:none}.login-access{min-height:100vh;padding:28px 20px}.mobile-login-logo{width:112px;margin:0 auto 25px;padding:10px 14px;display:block}.mobile-login-logo img{width:100%}.login-card{text-align:left}.login-access footer{width:min(440px,100%);margin-top:24px;position:static}}@media (max-width:520px){.login-card{border-radius:12px;padding:28px 22px}.login-card h2{font-size:24px}.login-access footer{flex-direction:column;align-items:center;gap:5px}.login-options{gap:10px}}
/*$vite$:1*/

:root {
        --azam-navy: #0e213b;
        --azam-deep: #071a31;
        --azam-blue: #0072bc;
        --azam-blue-dark: #273691;
        --azam-cyan: #88ceee;
        --azam-red: #ed1c24;
        --azam-ink: #0b1f3f;
        --azam-line: #dce4ee;
        --azam-mist: #f4f8fb;
      }

      body { background: #f4f7fb; color: var(--azam-ink); }

      /* Branded public front page */
      .login-page {
        grid-template-columns: minmax(740px, 1.7fr) minmax(420px, .82fr);
        min-height: 100vh;
        background: #fff;
      }

      .login-story {
        color: var(--azam-ink);
        align-items: stretch;
        min-height: 100vh;
        padding: 0;
        background-color: #fff;
        background-image:
          linear-gradient(90deg, #fff 0%, #fff 32%, rgba(255,255,255,.97) 40%, rgba(255,255,255,.74) 51%, rgba(255,255,255,.1) 72%),
          url("/assets/azam-rms-technician.jpg");
        background-repeat: no-repeat;
        background-position: center, center right;
        background-size: 100% 100%, cover;
        isolation: isolate;
      }

      .login-story:before {
        content: "";
        z-index: 1;
        position: absolute;
        inset: 0 0 auto 35%;
        height: 155px;
        opacity: .2;
        background: url("/assets/azam-floating-fragments.png") center / cover no-repeat;
        mix-blend-mode: multiply;
        pointer-events: none;
      }

      .login-story-inner {
        z-index: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        margin: 0;
        padding: 118px 48px 192px;
      }

      .login-brand {
        top: 34px;
        left: 48px;
        gap: 18px;
      }

      .login-brand:after {
        content: "";
        width: 1px;
        height: 42px;
        background: #cfd9e5;
        position: absolute;
        left: 152px;
      }

      .login-brand > span {
        width: 126px;
        height: 62px;
        padding: 8px 10px;
        border-radius: 0;
        background: transparent;
      }

      .login-brand > div { margin-left: 20px; }
      .login-brand b { color: var(--azam-ink); font-size: 15px; }
      .login-brand small { color: #65748a; font-size: 9px; }

      .login-message {
        z-index: 4;
        width: min(510px, 48%);
        position: relative;
      }

      .login-message > span { display: none; }
      .login-message h1 {
        color: var(--azam-ink);
        max-width: 500px;
        margin: 0 0 22px;
        font-size: clamp(38px, 3.25vw, 54px);
        font-weight: 900;
        letter-spacing: -.04em;
        line-height: 1.08;
      }

      .login-message p {
        color: #465a73;
        max-width: 470px;
        font-size: 15px;
        line-height: 1.72;
      }

      .login-message:after {
        content: "Burudani Kwa Wote\A Entertainment For Everybody";
        white-space: pre;
        display: block;
        width: max-content;
        margin-top: 26px;
        padding-top: 18px;
        border-top: 3px solid var(--azam-red);
        color: var(--azam-ink);
        font-size: 18px;
        font-style: italic;
        font-weight: 900;
        line-height: 1.45;
      }

      .login-flow {
        z-index: 6;
        position: absolute;
        right: 40px;
        bottom: 76px;
        left: 48px;
        display: grid;
        grid-template-columns: repeat(6, minmax(80px, 1fr));
        gap: 0;
        max-width: none;
        margin: 0;
        padding: 18px 16px;
        border: 1px solid rgba(220,228,238,.96);
        border-radius: 12px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 16px 42px rgba(14,33,59,.16);
        backdrop-filter: blur(14px);
      }

      .login-flow .wow-step {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 7px;
        color: var(--azam-ink);
        font-size: 10.5px;
        font-weight: 800;
      }

      .login-flow .wow-step:not(:last-child):after {
        content: "";
        position: absolute;
        top: 17px;
        left: calc(50% + 24px);
        width: calc(100% - 48px);
        height: 1px;
        background: linear-gradient(90deg, var(--azam-cyan), #d9e5f0);
      }

      .login-flow .wow-step span {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid #9bcceb;
        border-radius: 50%;
        color: var(--azam-blue);
        background: #f7fbff;
        font-size: 9px;
        font-weight: 900;
      }

      .login-trust {
        z-index: 5;
        position: absolute;
        bottom: 24px;
        left: 48px;
        margin: 0;
        padding: 0;
        border: 0;
        color: var(--azam-blue);
      }

      .login-trust b { color: var(--azam-ink); }
      .login-trust small { color: #65748a; }

      .login-flash { z-index: 2; pointer-events: none; }
      .login-flash.red {
        top: 88px;
        right: -65px;
        width: 74%;
        height: 42px;
        opacity: .96;
        background: linear-gradient(90deg,
          rgba(255,244,240,0) 0%,
          #ffd8ca 9%,
          var(--azam-red) 34%,
          var(--azam-red) 78%,
          rgba(237,28,36,0) 100%);
        clip-path: polygon(0 78%, 9% 53%, 29% 23%, 51% 8%, 76% 0, 100% 18%, 78% 15%, 52% 20%, 29% 36%, 9% 67%);
        transform: rotate(-4deg) skew(-24deg);
      }

      .login-flash.blue {
        right: -80px;
        bottom: -8px;
        width: 96%;
        height: 88px;
        opacity: .96;
        background: linear-gradient(90deg,
          var(--azam-blue) 0%,
          #075dae 48%,
          var(--azam-blue-dark) 100%);
        clip-path: polygon(0 73%, 25% 64%, 54% 43%, 82% 17%, 100% 0, 100% 100%, 0 100%);
        transform: rotate(-3deg) skew(-20deg);
      }

      .login-story:after {
        content: "";
        position: absolute;
        z-index: 2;
        right: -24px;
        bottom: 218px;
        width: 74%;
        height: 38px;
        pointer-events: none;
        background: linear-gradient(90deg,
          rgba(0,114,188,0) 0%,
          var(--azam-blue) 19%,
          #075dae 45%,
          var(--azam-blue-dark) 79%,
          rgba(255,255,255,.96) 100%);
        clip-path: polygon(0 58%, 28% 62%, 58% 44%, 100% 0, 91% 30%, 60% 64%, 29% 78%);
        transform: rotate(-3deg) skew(-20deg);
      }

      .login-positioning { display: none; }

      .login-access {
        min-height: 100vh;
        padding: 66px 42px 54px;
        background: var(--azam-mist);
      }

      .login-access:before {
        opacity: .12;
        background: url("/assets/azam-floating-fragments.png") center bottom / 100% 120px no-repeat;
      }

      .login-system {
        z-index: 3;
        position: absolute;
        top: 26px;
        right: 30px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 11px;
        border: 1px solid #dce7ef;
        border-radius: 8px;
        background: rgba(255,255,255,.92);
        box-shadow: 0 4px 16px rgba(14,33,59,.07);
        color: #2f4056;
        font-size: 10px;
        font-weight: 800;
      }

      .login-system i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #16a765;
        box-shadow: 0 0 0 4px rgba(22,167,101,.1);
      }

      .login-card {
        width: min(420px, 100%);
        padding: 36px 38px;
        border: 1px solid #dce4ee;
        border-radius: 14px;
        background: rgba(255,255,255,.98);
        box-shadow: 0 24px 70px rgba(14,33,59,.15);
      }

      .login-kicker { display: none; }
      .login-card h2 { color: var(--azam-ink); font-size: 30px; letter-spacing: -.025em; }
      .login-card > p { margin-top: 7px; color: #64748b; font-size: 12px; }
      .google-login { height: 46px; margin-top: 25px; border-radius: 7px; }
      .login-field > div { height: 44px; border-radius: 7px; background: #fbfcfe; }
      .login-submit { height: 46px; border-radius: 7px; background: var(--azam-blue); box-shadow: 0 10px 24px rgba(0,114,188,.24); }
      .login-help { justify-content: center; background: transparent; text-align: center; }
      .login-access footer { color: #68778b; }

      /* Mature command-centre polish */
      .sidebar { width: 228px; background: linear-gradient(180deg, #0b2748 0%, #071a31 100%); }
      .main-wrap { width: calc(100% - 228px); margin-left: 228px; }
      .sidebar nav button { border-radius: 7px; }
      .sidebar nav button.active { background: #0072bc; border-color: #1886cc; }
      .topbar { height: 70px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
      main { padding: 24px 28px 42px; }

      .overview-hero {
        min-height: 168px;
        padding: 28px 32px;
        border: 1px solid var(--azam-line);
        border-radius: 12px;
        color: var(--azam-ink);
        background: #fff;
        box-shadow: 0 12px 34px rgba(14,33,59,.09);
      }

      .overview-hero:before {
        z-index: 0;
        opacity: .13;
        background: url("/assets/azam-floating-fragments.png") right center / 50% 100% no-repeat;
      }

      .overview-hero:after {
        z-index: 1;
        inset: 0 0 auto 42%;
        height: 72px;
        opacity: .9;
        background:
          linear-gradient(176deg, transparent 0 41%, #ffd8ca 42%, var(--azam-red) 46% 48%, rgba(237,28,36,0) 49%),
          linear-gradient(176deg, transparent 0 56%, var(--azam-blue) 57%, #075dae 61%, var(--azam-blue-dark) 65%, rgba(255,255,255,.92) 68%, transparent 69%);
      }

      .overview-hero .hero-copy { z-index: 3; }
      .overview-hero .hero-date { color: var(--azam-blue); }
      .overview-hero .hero-copy h1 { color: var(--azam-ink); }
      .overview-hero .hero-copy p { color: #55687f; }
      .overview-hero .hero-copy p b { color: var(--azam-ink); }
      .overview-hero .button.hero { color: var(--azam-blue-dark); border-color: #bdd8eb; background: #f5fbff; }
      .overview-hero .brand-flash { display: none; }
      .overview-hero .hero-brand-line { color: #6c7d92; }

      .network-health {
        z-index: 3;
        border-color: #24466b;
        color: #fff;
        background: rgba(14,33,59,.96);
        box-shadow: 0 14px 34px rgba(14,33,59,.18);
      }

      .stats-grid {
        gap: 0;
        padding: 0;
        border: 1px solid var(--azam-line);
        border-radius: 11px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 7px 24px rgba(14,33,59,.06);
      }

      .stat {
        min-height: 108px;
        border: 0;
        border-right: 1px solid var(--azam-line);
        border-radius: 0;
        box-shadow: none;
      }

      .stat:last-child { border-right: 0; }
      .stat:before { display: none; }
      .card { border-radius: 10px; box-shadow: 0 5px 20px rgba(14,33,59,.055); }
      .simple-table th { color: #52647b; background: #f7f9fc; }
      .simple-table tr:hover td { background: #f6fbff; }
      .button.primary { background: var(--azam-blue); box-shadow: 0 7px 18px rgba(0,114,188,.22); }
      :focus-visible { outline: 3px solid rgba(136,206,238,.8); outline-offset: 2px; }

      @media (max-width: 1180px) {
        .login-page { grid-template-columns: minmax(620px, 1.35fr) minmax(380px, .8fr); }
        .login-story-inner { padding-inline: 34px; }
        .login-brand, .login-trust { left: 34px; }
        .login-flow { right: 28px; left: 34px; }
        .login-message { width: 50%; }
        .sidebar { width: 212px; }
        .main-wrap { width: calc(100% - 212px); margin-left: 212px; }
      }

      @media (max-width: 1000px) {
        .login-page { display: block; background: var(--azam-mist); }
        .login-story { display: block; min-height: 430px; background-position: center, 65% center; }
        .login-story-inner { min-height: 430px; padding: 100px 28px 42px; }
        .login-brand { top: 22px; left: 28px; }
        .login-message { width: min(520px, 68%); }
        .login-message h1 { font-size: 38px; }
        .login-flow, .login-trust { display: none; }
        .login-flash.blue { bottom: -8px; }
        .login-story:after { right: -18px; bottom: 88px; width: 78%; height: 30px; }
        .login-access { min-height: auto; padding: 54px 22px 84px; }
        .mobile-login-logo { display: none; }
        .login-access footer { position: static; width: min(420px,100%); margin-top: 24px; }
      }

      @media (max-width: 780px) {
        .sidebar { width: 68px; }
        .main-wrap { width: calc(100% - 68px); margin-left: 68px; }
        .overview-hero { padding: 24px 20px; }
        .stats-grid { grid-template-columns: 1fr 1fr; }
        .stat:nth-child(2) { border-right: 0; }
        .stat:nth-child(-n+2) { border-bottom: 1px solid var(--azam-line); }
      }

      @media (max-width: 560px) {
        .login-story { min-height: 390px; background-position: center, 60% center; }
        .login-story:before { left: 0; height: 100px; }
        .login-story-inner { min-height: 390px; padding: 92px 20px 34px; }
        .login-brand { left: 20px; transform: scale(.86); transform-origin: left top; }
        .login-message { width: 82%; }
        .login-message h1 { font-size: 31px; }
        .login-message p { font-size: 12px; line-height: 1.55; }
        .login-message:after { margin-top: 17px; padding-top: 12px; font-size: 14px; }
        .login-flash.red { top: 73px; }
        .login-story:after { bottom: 72px; width: 84%; height: 26px; }
        .login-card { padding: 30px 22px; }
        .login-system { top: 18px; right: 18px; }
        .stats-grid { grid-template-columns: 1fr; }
        .stat { border-right: 0; border-bottom: 1px solid var(--azam-line); }
      }

      @media (prefers-reduced-motion: reduce) {
        *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      }

/* Cohesive product-led login composition */
      .login-page {
        grid-template-columns: minmax(680px, 1.45fr) minmax(460px, .85fr);
        min-height: 100vh;
        background: #fff;
      }

      .login-story {
        min-height: 100vh;
        background-color: #fff;
        background-image:
          linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,.97) 40%, rgba(255,255,255,.72) 53%, rgba(255,255,255,.12) 75%),
          linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 30%),
          url("/assets/azam-rms-stb-hero-v3.png");
        background-position: center, center, 58% bottom;
        background-size: 100% 100%, 100% 100%, auto 72%;
      }

      .login-story:before {
        display: none;
      }

      .login-story:after { display: none; }

      .login-story .login-flash { display: none !important; }

      .login-story-inner {
        justify-content: flex-start;
        min-height: 100vh;
        padding: 220px 48px 176px;
      }

      .login-brand { top: 38px; left: 48px; }
      .login-brand > span { width: 132px; }
      .login-brand b { font-size: 16px; }

      .login-message {
        width: min(660px, 72%);
      }

      .login-message h1 {
        max-width: 660px;
        margin-bottom: 20px;
        font-size: clamp(40px, 3.1vw, 50px);
        line-height: 1.08;
        letter-spacing: -.038em;
      }

      .login-message p {
        max-width: 600px;
        font-size: 14.5px;
        line-height: 1.65;
      }

      .login-message:after {
        margin-top: 22px;
        padding-top: 15px;
        border-top-width: 2px;
        font-size: 16px;
        line-height: 1.4;
      }

      .login-flow {
        right: 48px;
        bottom: 54px;
        left: 48px;
        padding: 15px 14px 16px;
        border-radius: 10px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 12px 34px rgba(14,33,59,.1);
      }

      .login-flow .wow-step { gap: 6px; font-size: 10px; }
      .login-flow .wow-step span { width: 32px; height: 32px; }
      .login-flow .wow-step:not(:last-child):after { top: 16px; }
      .login-trust { display: none; }

      .login-access {
        min-height: 100vh;
        padding: 74px 44px 62px;
        border-left: 1px solid #edf1f6;
        background: #fff;
      }

      .login-access:before {
        display: none;
      }

      .login-system { top: 34px; right: 34px; }

      .login-card {
        width: min(460px, 100%);
        padding: 42px 44px 40px;
        border-color: #d8e1ec;
        border-radius: 13px;
        box-shadow: 0 26px 72px rgba(14,33,59,.13);
        overflow: hidden;
      }

      .login-card:before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: linear-gradient(90deg, var(--azam-blue), var(--azam-blue-dark));
      }

      .login-card h2 { font-size: 31px; }
      .login-card > p { font-size: 12.5px; }
      .google-login { height: 48px; margin-top: 28px; }
      .login-field > div { height: 46px; }
      .login-submit { height: 48px; }

      @media (max-width: 1180px) {
        .login-page { grid-template-columns: minmax(620px, 1.22fr) minmax(410px, .78fr); }
        .login-story-inner { padding: 200px 36px 170px; }
        .login-brand { left: 36px; }
        .login-message { width: 72%; }
        .login-message h1 { font-size: 41px; }
        .login-flow { right: 36px; left: 36px; }
        .login-access { padding-inline: 30px; }
      }

      @media (max-width: 1000px) {
        .login-page { display: block; }
        .login-story {
          min-height: 470px;
          background-image:
            linear-gradient(90deg, #fff 0%, rgba(255,255,255,.96) 36%, rgba(255,255,255,.54) 62%, rgba(255,255,255,.06) 100%),
            linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0) 34%),
            url("/assets/azam-rms-stb-hero-v3.png");
          background-position: center, center, 60% bottom;
          background-size: 100% 100%, 100% 100%, auto 78%;
        }
        .login-story-inner { min-height: 470px; padding: 128px 28px 52px; }
        .login-message { width: min(530px, 66%); }
        .login-message h1 { font-size: 38px; }
        .login-flow { display: none; }
        .login-access { min-height: auto; padding: 64px 22px 82px; border-left: 0; }
        .login-system { top: 24px; right: 24px; }
      }

      @media (max-width: 560px) {
        .login-story { min-height: 430px; background-position: center, center, 58% bottom; background-size: 100% 100%, 100% 100%, auto 76%; }
        .login-story-inner { min-height: 430px; padding: 112px 20px 42px; }
        .login-brand { left: 20px; }
        .login-message { width: 78%; }
        .login-message h1 { font-size: 31px; line-height: 1.08; }
        .login-message p { font-size: 12px; line-height: 1.5; }
        .login-message:after { margin-top: 16px; padding-top: 11px; font-size: 14px; }
        .login-card { padding: 34px 24px 30px; }
      }

.login-story:before { animation: azamFragments 14s ease-in-out infinite alternate; }
      .login-story:after { animation: azamFlashMiddle 9s ease-in-out infinite alternate; }
      .login-flash.red { animation: azamFlashRed 8s ease-in-out infinite alternate; }
      .login-flash.blue { animation: azamFlashBlue 10s ease-in-out infinite alternate; }
      .login-access:before {
        opacity: .72;
        background: url("/assets/azam-light-facets-clean.png") right bottom / cover no-repeat;
        mix-blend-mode: multiply;
      }

      main.has-journey-frame {
        background-image: url("/assets/azam-light-facets-clean.png");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: min(760px, 54vw) auto;
      }

      .has-journey-frame .overview-grid,
      .has-journey-frame .lower-grid,
      .has-journey-frame > .page-header { display: none; }

      .has-journey-frame .stats-grid { margin-top: 16px; }

      .journey-frame {
        position: relative;
        display: grid;
        grid-template-columns: minmax(280px, .72fr) minmax(560px, 1.45fr);
        min-height: 300px;
        margin: 0 0 18px;
        border: 1px solid #dce4ee;
        border-radius: 13px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 14px 42px rgba(14,33,59,.09);
        overflow: hidden;
      }

      .journey-frame:before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .8;
        background: url("/assets/azam-light-facets-clean.png") right center / auto 135% no-repeat;
        pointer-events: none;
      }

      .journey-copy,
      .journey-visual { z-index: 2; position: relative; }

      .journey-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 34px 32px;
        border-right: 1px solid rgba(220,228,238,.88);
        background: linear-gradient(100deg, #fff 0%, rgba(255,255,255,.94) 75%, rgba(255,255,255,.74) 100%);
      }

      .journey-copy h2 {
        max-width: 330px;
        color: var(--azam-ink);
        font-size: clamp(24px, 2vw, 32px);
        line-height: 1.12;
        letter-spacing: -.035em;
      }

      .journey-copy p {
        max-width: 360px;
        margin: 12px 0 22px;
        color: #617187;
        font-size: 12px;
        line-height: 1.65;
      }

      .journey-copy button {
        align-self: flex-start;
        height: 38px;
        padding: 0 16px;
        border: 0;
        border-radius: 7px;
        color: #fff;
        background: var(--azam-blue);
        font: 800 11px/1 Lato, Arial, sans-serif;
        box-shadow: 0 8px 20px rgba(0,114,188,.22);
      }

      .journey-visual {
        display: grid;
        align-content: center;
        padding: 30px 34px 26px;
      }

      .journey-visual-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 42px;
      }

      .journey-live {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #52647b;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
      }

      .journey-live i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #16a765;
        box-shadow: 0 0 0 5px rgba(22,167,101,.11);
        animation: azamPulse 1.7s ease-out infinite;
      }

      .journey-ticket {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--azam-ink);
        font-size: 10px;
        font-weight: 800;
      }

      .journey-ticket span {
        padding: 5px 8px;
        border-radius: 5px;
        color: var(--azam-blue-dark);
        background: #eaf5fc;
      }

      .journey-track {
        --journey-progress: 0%;
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        align-items: start;
        gap: 0;
      }

      .journey-track:before,
      .journey-progress {
        content: "";
        position: absolute;
        top: 19px;
        right: 8.3%;
        left: 8.3%;
        height: 3px;
        border-radius: 999px;
      }

      .journey-track:before { background: #dbe4ee; }
      .journey-progress {
        right: auto;
        width: calc(var(--journey-progress) * .834);
        background: linear-gradient(90deg, var(--azam-blue), var(--azam-blue-dark));
        transition: width .65s cubic-bezier(.22,.8,.24,1);
      }

      .journey-stage {
        z-index: 3;
        display: grid;
        justify-items: center;
        gap: 9px;
        padding: 0;
        border: 0;
        color: #77869a;
        background: transparent;
        font: 800 10px/1.2 Lato, Arial, sans-serif;
        cursor: pointer;
      }

      .journey-stage span {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 2px solid #cfdbe7;
        border-radius: 50%;
        color: #718197;
        background: #fff;
        box-shadow: 0 4px 12px rgba(14,33,59,.06);
        transition: .35s ease;
      }

      .journey-stage.done span {
        color: #fff;
        border-color: var(--azam-blue);
        background: var(--azam-blue);
      }

      .journey-stage.active { color: var(--azam-ink); }
      .journey-stage.active span {
        color: #fff;
        border-color: var(--azam-red);
        background: var(--azam-red);
        box-shadow: 0 0 0 7px rgba(237,28,36,.11), 0 8px 18px rgba(237,28,36,.2);
        transform: translateY(-2px);
      }

      .journey-caption {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 34px;
        padding: 11px 13px;
        border-radius: 8px;
        color: #52647b;
        background: rgba(244,248,251,.9);
        font-size: 10px;
      }

      .journey-caption b { color: var(--azam-ink); }
      .journey-caption span { margin-left: auto; color: var(--azam-blue); font-weight: 900; }

      @keyframes azamFragments {
        from { transform: translate3d(0,0,0) scale(1); opacity: .14; }
        to { transform: translate3d(-18px,7px,0) scale(1.035); opacity: .24; }
      }

      @keyframes azamFlashRed {
        from { transform: translateX(10px) rotate(-5deg) skew(-24deg); }
        to { transform: translateX(-24px) rotate(-5deg) skew(-24deg); }
      }

      @keyframes azamFlashBlue {
        from { transform: translateX(-8px) rotate(-4deg) skew(-24deg); }
        to { transform: translateX(25px) rotate(-4deg) skew(-24deg); }
      }

      @keyframes azamFlashMiddle {
        from { transform: translateX(-12px) rotate(-3deg) skew(-20deg); }
        to { transform: translateX(18px) rotate(-3deg) skew(-20deg); }
      }

      @keyframes azamPulse {
        0% { box-shadow: 0 0 0 0 rgba(22,167,101,.26); }
        75%,100% { box-shadow: 0 0 0 8px rgba(22,167,101,0); }
      }

      @media (max-width: 1100px) {
        .journey-frame { grid-template-columns: 1fr; }
        .journey-copy { padding: 26px 28px; border-right: 0; border-bottom: 1px solid #dce4ee; }
        .journey-copy h2, .journey-copy p { max-width: 620px; }
        .journey-visual { padding: 26px 28px; }
      }

      @media (max-width: 720px) {
        .journey-visual { overflow-x: auto; }
        .journey-visual-head, .journey-track, .journey-caption { min-width: 620px; }
      }

      @media (prefers-reduced-motion: reduce) {
        .login-story:before, .login-flash, .journey-live i { animation: none !important; }
      }

/* Native 1536 x 1024 match for the approved client demonstration frame. */
      @media (min-width: 1001px) {
        .login-page {
          grid-template-columns: minmax(680px, 1.74fr) minmax(500px, 1fr);
        }

        .login-story {
          background-image:
            linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 13%, rgba(255,255,255,.58) 20%, rgba(255,255,255,.16) 28%, rgba(255,255,255,0) 38%),
            linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 30%),
            url("/assets/azam-rms-stb-hero-square-v1.png");
          /* Square artwork matches the nearly square story panel without
             stretching the STB or pushing the workshop below the header. */
          background-position: center, center, right 136px;
          background-size: 100% 100%, 100% 100%, min(80%, 850px) auto;
        }

        .login-story .login-flash {
          display: block !important;
          pointer-events: none;
        }

        .login-flash.red {
          top: 25px;
          right: -3%;
          width: 65%;
          height: 145px;
          background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #ffd9d2 18%, #ef1c24 45%, #ed1c24 78%, rgba(237,28,36,0) 100%);
          clip-path: polygon(0 100%, 10% 82%, 30% 50%, 52% 23%, 75% 6%, 100% 0, 100% 7%, 76% 14%, 53% 31%, 31% 59%, 10% 89%);
          transform: none;
          animation: azamConceptRed 8s ease-in-out infinite alternate;
        }

        .login-flash.blue {
          right: -7%;
          bottom: 0;
          width: 116%;
          height: 150px;
          background: linear-gradient(100deg, #273691 0%, #174ca4 42%, #0072bc 76%, rgba(0,114,188,.08) 100%);
          clip-path: polygon(0 25%, 22% 48%, 50% 54%, 77% 46%, 100% 29%, 100% 100%, 0 100%);
          transform: none;
          animation: azamConceptBlue 10s ease-in-out infinite alternate;
        }

        .login-story-inner {
          padding: 228px 48px 218px;
        }

        .login-message {
          width: min(790px, 82%);
        }

        .login-message h1 {
          max-width: 790px;
          margin: 0 0 24px;
          font-size: clamp(48px, 3.4vw, 52px);
          line-height: 1.12;
          letter-spacing: -.04em;
        }

        .login-message p {
          max-width: 610px;
          font-size: 15px;
          line-height: 1.62;
        }

        .login-message:after {
          margin-top: 32px;
          padding-top: 20px;
          font-size: 17px;
          line-height: 1.45;
        }

        .login-flow {
          right: 48px;
          bottom: 138px;
          left: 48px;
          grid-template-columns: repeat(6, 1fr);
          min-height: 82px;
          padding: 10px 22px 9px;
          border-color: rgba(206,220,234,.82);
          border-radius: 14px;
          background: rgba(255,255,255,.92);
          box-shadow: 0 10px 28px rgba(14,33,59,.09);
          backdrop-filter: blur(18px);
        }

        .login-flow .wow-step {
          flex: 1;
          gap: 5px;
          font-size: 11px;
          font-weight: 700;
        }

        .login-flow .wow-step span {
          width: 44px;
          height: 44px;
          border-width: 1px;
          border-color: #7fbae5;
          color: #0876c9;
          background: rgba(249,252,255,.94);
        }

        .login-flow .wow-step span svg {
          width: 23px;
          height: 23px;
          fill: none;
          stroke: currentColor;
          stroke-width: 1.8;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        .login-flow .wow-step:not(:last-child):after {
          top: 17px;
          right: -4px;
          left: auto;
          width: 8px;
          height: 8px;
          border-top: 1.5px solid var(--azam-red);
          border-right: 1.5px solid var(--azam-red);
          background: transparent;
          transform: rotate(45deg);
        }

        .login-access {
          padding: 92px 32px 70px;
        }

        .login-card {
          display: flex;
          flex-direction: column;
          width: min(496px, 100%);
          min-height: 758px;
          padding: 66px 52px 48px;
        }

        .login-card h2 {
          font-size: 34px;
          line-height: 1.1;
        }

        .login-card > p {
          margin-top: 12px;
          font-size: 12.5px;
        }

        .google-login {
          height: 56px;
          margin-top: 34px;
        }

        .google-g {
          color: transparent;
          background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 45%, #fbbc05 0 66%, #ea4335 0 82%, #4285f4 0);
          -webkit-background-clip: text;
          background-clip: text;
        }

        .login-divider { margin: 29px 0; }
        .login-field { margin-bottom: 20px; }
        .login-field > span { margin-bottom: 7px; }
        .login-field > div { height: 58px; }
        .login-options { margin: 1px 0 25px; }
        .login-submit { height: 58px; }
        .login-help { margin-top: 28px; }
        .login-access footer { display: none; }

        .login-brand > span { width: 146px; padding-inline: 8px; }
        .login-brand b { font-size: 18px; }
        .login-brand small { font-size: 10px; }
      }

      @keyframes azamConceptRed {
        from { transform: translateX(8px); }
        to { transform: translateX(-18px); }
      }

      @keyframes azamConceptBlue {
        from { transform: translateX(-6px); }
        to { transform: translateX(10px); }
      }

      @media (max-width: 1180px) and (min-width: 1001px) {
        .login-story-inner { padding-inline: 36px; }
        .login-message h1 { font-size: 45px; }
        .login-flow { right: 36px; left: 36px; }
        .login-card { min-height: 700px; padding: 54px 38px 40px; }
      }

      /* Keep the full square artwork visible on wide, medium-height desktop
         screens while the native 1536 x 1024 frame uses the reference offset. */
      @media (min-width: 1001px) and (min-height: 851px) and (max-height: 950px) {
        .login-story {
          background-position: center, center, right center;
        }
      }

      /* Keep the complete demonstration frame visible on short desktop
         viewports, including a 1920 x 1000 display viewed at 125% zoom. */
      @media (min-width: 1001px) and (max-height: 850px) {
        .login-story {
          background-position: center, center, right 66px;
          background-size: 100% 100%, 100% 100%, min(75%, 850px) auto;
        }

        .login-brand { top: 24px; }

        .login-story-inner {
          padding-top: 142px;
          padding-bottom: 152px;
        }

        .login-message { width: min(850px, 95%); }
        .login-message h1 {
          max-width: 850px;
          margin-bottom: 18px;
          font-size: clamp(42px, 3.1vw, 48px);
        }
        .login-message p { font-size: 14px; line-height: 1.55; }
        .login-message:after {
          margin-top: 22px;
          padding-top: 14px;
          font-size: 15px;
        }

        .login-flow {
          bottom: 48px;
          min-height: 74px;
          padding-block: 7px;
        }
        .login-flow .wow-step span { width: 40px; height: 40px; }
        .login-flow .wow-step span svg { width: 21px; height: 21px; }
        .login-flow .wow-step:not(:last-child):after { top: 15px; }

        .login-flash.red { top: 4px; height: 116px; }
        .login-flash.blue { height: 112px; }

        .login-access { padding: 36px 28px 28px; }
        .login-system { top: 14px; right: 24px; }

        .login-card {
          width: min(496px, 100%);
          min-height: 690px;
          padding: 38px 46px 32px;
        }
        .login-card h2 { font-size: 31px; }
        .login-card > p { margin-top: 8px; }
        .google-login { height: 48px; margin-top: 20px; }
        .login-divider { margin: 18px 0; }
        .login-field { margin-bottom: 14px; }
        .login-field > span { margin-bottom: 5px; }
        .login-field > div { height: 48px; }
        .login-options { margin: 1px 0 18px; }
        .login-submit { height: 50px; }
        .login-help { margin-top: 18px; }
      }

      @media (max-width: 1000px) {
        .login-story {
          background-position: center, center, center bottom;
          background-size: 100% 100%, 100% 100%, 100% auto;
        }

        .login-story .login-flash.red {
          display: block !important;
          top: 30px;
          right: -5%;
          width: 78%;
          opacity: .85;
        }

        .login-story .login-flash.blue { display: none !important; }
      }

      @media (max-width: 560px) {
        .login-story {
          min-height: 350px;
          background-image:
            linear-gradient(90deg, #fff 0%, rgba(255,255,255,.96) 42%, rgba(255,255,255,.38) 72%, rgba(255,255,255,.05) 100%),
            linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 32%),
            url("/assets/azam-rms-stb-hero-square-v1.png");
          background-position: center, center, center 48px;
          background-size: 100% 100%, 100% 100%, 100% auto;
        }

        .login-story-inner {
          min-height: 350px;
          padding: 94px 10px 22px;
        }

        .login-brand {
          top: 16px;
          left: 10px;
          transform: scale(.76);
          transform-origin: left top;
        }

        .login-brand > div { white-space: nowrap; }

        .login-message { width: 96%; }
        .login-message h1 {
          max-width: 430px;
          margin-bottom: 14px;
          font-size: 26px;
          line-height: 1.05;
        }

        .login-message p {
          max-width: 410px;
          font-size: 11px;
          line-height: 1.45;
        }

        .login-message:after {
          width: 188px;
          margin-top: 12px;
          padding-top: 10px;
          font-size: 13px;
          line-height: 1.35;
        }

        .login-story .login-flash.red {
          top: 8px;
          height: 76px;
        }

        .login-access {
          padding: 44px 10px 38px;
        }

        .login-system {
          top: 12px;
          right: 10px;
        }

        .login-card {
          padding: 24px 18px 22px;
          border-radius: 12px;
        }

        .login-card h2 { font-size: 27px; }
        .google-login { margin-top: 18px; }
        .login-divider { margin: 18px 0; }
        .login-field { margin-bottom: 14px; }
        .login-options { margin-bottom: 18px; }
        .login-help { margin-top: 18px; }
      }

/* Restore the original operational dashboard; login styling remains isolated. */
      body { background: #f6f7f9; }
      .sidebar { width: 252px; padding: 18px 14px; }
      .main-wrap { width: calc(100% - 252px); margin-left: 252px; }
      .topbar { height: 68px; padding: 0 28px; }
      main { padding: 28px 30px 40px; }

      main.has-journey-frame { background-image: none; }
      .journey-frame { display: none !important; }
      .demo-launch { display: none !important; }

      .overview-hero {
        min-height: 226px;
        margin-bottom: 26px;
        padding: 31px 34px;
        border: 0;
        border-radius: 16px;
        color: #fff;
        background: linear-gradient(120deg, var(--navy-950) 0%, #183e68 58%, var(--azam-blue-dark) 125%);
        box-shadow: 0 18px 42px rgba(14,33,59,.18);
      }

      .overview-hero:before {
        display: block;
        inset: 0;
        opacity: 1;
        background:
          radial-gradient(circle at 76% 30%, rgba(136,206,238,.22), transparent 35%),
          linear-gradient(90deg, transparent 0 70%, rgba(237,28,36,.05));
        clip-path: none;
      }

      .overview-hero:after {
        display: block;
        inset: 0;
        height: auto;
        opacity: 1;
        background: linear-gradient(145deg, transparent 65%, rgba(255,255,255,.025) 65% 68%, transparent 68%);
      }

      .overview-hero .hero-date { color: var(--sky-300); }
      .overview-hero .hero-copy h1 { color: #fff; }
      .overview-hero .hero-copy p { color: #c4d7eb; }
      .overview-hero .hero-copy p b { color: #fff; }
      .overview-hero .button.hero { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
      .overview-hero .brand-flash { display: block; }
      .overview-hero .hero-brand-line { color: rgba(255,255,255,.62); }

      .network-health {
        border-color: rgba(136,206,238,.23);
        color: #fff;
        background: rgba(255,255,255,.065);
        box-shadow: none;
      }

      /* The operational panels are part of Network Overview even if an older
         browser session still carries the retired journey-frame class. */
      main > .page-header,
      main.has-journey-frame > .page-header { display: flex !important; }

      main .overview-grid,
      main .lower-grid,
      main.has-journey-frame .overview-grid,
      main.has-journey-frame .lower-grid { display: grid !important; }

      .stats-grid {
        gap: 12px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
        box-shadow: none;
      }

      .stat {
        min-height: 105px;
        padding: 15px 16px;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius);
        box-shadow: 0 1px 2px rgba(11,31,63,.04);
      }

      .stat:last-child { border-right: 1px solid var(--gray-200); }
      .stat:before { display: block; width: 3px; }

      @media (max-width: 1180px) {
        .sidebar { width: 218px; }
        .main-wrap { width: calc(100% - 218px); margin-left: 218px; }
      }

      @media (max-width: 780px) {
        .sidebar { width: 68px; }
        .main-wrap { width: calc(100% - 68px); margin-left: 68px; }
        main { padding: 16px; }
      }

.mobile-menu-toggle { display: none; }

      @media (max-width: 780px) {
        html, body, #root { max-width: 100%; overflow-x: hidden; }

        .sidebar {
          z-index: 130;
          width: min(82vw, 300px);
          padding: 18px 14px;
          transform: translateX(-102%);
          transition: transform .24s ease;
          box-shadow: 18px 0 48px rgba(5,22,43,.28);
        }

        body.mobile-nav-open { overflow: hidden; }
        body.mobile-nav-open .sidebar { transform: translateX(0); }
        body.mobile-nav-open:after {
          content: "";
          z-index: 120;
          position: fixed;
          inset: 0;
          background: rgba(7,29,73,.45);
          backdrop-filter: blur(2px);
        }

        .sidebar .brand { padding: 5px 8px 19px; }
        .sidebar .logo-wrap { width: 64px; }
        .sidebar .brand > div:last-child,
        .sidebar nav span,
        .sidebar nav em,
        .sidebar .sidebar-bottom { display: block; }
        .sidebar .nav-section > p { display: block; }
        .sidebar nav button {
          justify-content: flex-start;
          padding: 8px 10px;
        }

        .main-wrap {
          width: 100%;
          margin-left: 0;
        }

        .topbar {
          min-width: 0;
          height: 60px;
          gap: 9px;
          padding: 0 10px;
        }

        .mobile-menu-toggle {
          display: inline-grid;
          place-items: center;
          flex: 0 0 38px;
          width: 38px;
          height: 38px;
          border: 1px solid #d9e2ec;
          border-radius: 9px;
          color: var(--azam-blue-dark);
          background: #fff;
        }
        .mobile-menu-toggle svg { width: 19px; height: 19px; }

        .topbar .crumb { min-width: 0; flex: 1; }
        .topbar .crumb b {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .topbar .global-search,
        .topbar .top-create,
        .topbar .demo-launch { display: none !important; }
        .topbar .top-actions { gap: 7px; }

        main { width: 100%; padding: 14px 12px 32px; }
        .overview-hero { padding: 22px 18px; border-radius: 13px; }
        .hero-copy h1 { font-size: 24px; }
        .hero-copy p { font-size: 12px; line-height: 1.55; }
        .hero-actions { display: grid; grid-template-columns: 1fr; }
        .hero-actions .button { width: 100%; justify-content: center; }

        .page-header { align-items: stretch; gap: 12px; }
        .header-actions { display: grid; grid-template-columns: 1fr 1fr; }
        .header-actions .button { justify-content: center; }

        .stats-grid,
        .stats-grid.three,
        .overview-grid,
        .lower-grid {
          grid-template-columns: minmax(0, 1fr);
        }
        .overview-grid,
        .lower-grid { gap: 12px; }
        .card,
        .overview-grid > *,
        .lower-grid > * { min-width: 0; }

        .chart { height: 220px; padding: 18px 12px 18px 39px; }
        .chart svg { height: 166px; }

        .pipeline {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
          padding: 16px 12px 12px;
          align-items: stretch;
        }
        .pipeline > svg { display: none; }
        .pipe-step {
          min-width: 0;
          padding: 14px 8px;
          border: 1px solid var(--gray-200);
          border-radius: 9px;
        }
        .pipe-step span { min-height: 0; margin-bottom: 7px; }
        .pipe-step strong { font-size: 20px; }

        .mini-metrics {
          grid-template-columns: 1fr;
          margin: 0 12px 12px;
        }
        .mini-metrics div {
          border-right: 0;
          border-bottom: 1px solid var(--gray-200);
        }
        .mini-metrics div:last-child { border-bottom: 0; }

        .map-canvas { height: 250px; }
        .simple-table { padding-inline: 12px; }
        .table-row { min-width: 0; }
      }

      @media (max-width: 420px) {
        .topbar .user > span { width: 34px; height: 34px; }
        .topbar .notification { width: 34px; height: 34px; }
        .page-header h1 { font-size: 19px; }
      }

.demo-launch {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 34px;
        padding: 0 12px;
        border: 1px solid #c9d7e5;
        border-radius: 8px;
        color: var(--azam-blue-dark);
        background: #fff;
        font: 800 10.5px/1 Lato, Arial, sans-serif;
        transition: .2s ease;
      }

      .demo-launch:hover {
        border-color: var(--azam-blue);
        background: #f4faff;
        box-shadow: 0 0 0 4px rgba(136,206,238,.18);
      }

      .demo-launch svg { width: 15px; height: 15px; }

      .client-demo-dock {
        --demo-progress: 0%;
        z-index: 1000;
        position: fixed;
        right: 24px;
        bottom: 22px;
        left: 252px;
        display: grid;
        grid-template-columns: 154px minmax(280px, 1fr) auto;
        align-items: center;
        gap: 20px;
        min-height: 94px;
        padding: 18px 18px 16px 22px;
        border: 1px solid rgba(174,192,211,.82);
        border-radius: 12px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 22px 64px rgba(7,26,49,.22);
        backdrop-filter: blur(16px);
        transform: translateY(135%);
        opacity: 0;
        pointer-events: none;
        transition: transform .36s cubic-bezier(.22,.8,.24,1), opacity .25s ease;
        overflow: hidden;
      }

      .client-demo-dock:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: var(--demo-progress);
        height: 4px;
        background: linear-gradient(90deg, var(--azam-blue), var(--azam-blue-dark), var(--azam-red));
        transition: width .4s ease;
      }

      .client-demo-dock:after {
        content: "";
        position: absolute;
        top: -3px;
        left: calc(var(--demo-progress) - 6px);
        width: 10px;
        height: 10px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: var(--azam-red);
        box-shadow: 0 0 0 0 rgba(237,28,36,.28);
        transition: left .4s ease;
        animation: demoTrackerPulse 1.8s ease-out infinite;
      }

      .client-demo-dock.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }

      .demo-identity {
        display: flex;
        align-items: center;
        gap: 11px;
        padding-right: 18px;
        border-right: 1px solid #dce4ee;
      }

      .demo-identity span {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 9px;
        color: #fff;
        background: var(--azam-navy);
        font-size: 11px;
        font-weight: 900;
      }

      .demo-identity b,
      .demo-identity small { display: block; }
      .demo-identity b { color: var(--azam-ink); font-size: 10.5px; }
      .demo-identity small { margin-top: 3px; color: #718197; font-size: 8.5px; }

      .demo-copy { min-width: 0; }
      .demo-copy h3 {
        margin: 0 0 5px;
        color: var(--azam-ink);
        font-size: 15px;
        letter-spacing: -.015em;
      }

      .demo-copy p {
        max-width: 760px;
        margin: 0;
        color: #5d6f85;
        font-size: 10.5px;
        line-height: 1.45;
      }

      .demo-actions { display: flex; align-items: center; gap: 8px; }
      .demo-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 13px;
        border: 1px solid #cfdae6;
        border-radius: 7px;
        color: #42556d;
        background: #fff;
        font: 800 10px/1 Lato, Arial, sans-serif;
      }

      .demo-actions button:hover:not(:disabled) { border-color: var(--azam-blue); color: var(--azam-blue); }
      .demo-actions button:disabled { opacity: .42; cursor: not-allowed; }
      .demo-actions .demo-next { min-width: 82px; border-color: var(--azam-blue); color: #fff; background: var(--azam-blue); }
      .demo-actions .demo-exit { width: 36px; padding: 0; color: #75859a; }

      body.demo-presenting main { padding-bottom: 142px; }
      body.demo-presenting main.demo-enter { animation: none; }
      body.demo-presenting main.demo-enter > * {
        animation: demoItemEnter .48s cubic-bezier(.22,.8,.24,1) both;
      }
      body.demo-presenting main.demo-enter > *:nth-child(2) { animation-delay: .045s; }
      body.demo-presenting main.demo-enter > *:nth-child(3) { animation-delay: .09s; }
      body.demo-presenting main.demo-enter > *:nth-child(4) { animation-delay: .135s; }
      body.demo-presenting main.demo-enter > *:nth-child(n+5) { animation-delay: .18s; }

      .client-demo-dock.demo-step-change .demo-count { animation: demoCountTurn .45s cubic-bezier(.22,.8,.24,1); }
      .client-demo-dock.demo-step-change .demo-copy { animation: demoCopyEnter .45s cubic-bezier(.22,.8,.24,1); }

      .demo-focus {
        position: relative;
        z-index: 2;
        animation: demoFocusHalo 1.25s ease-out both;
      }

      @keyframes demoItemEnter {
        from { opacity: .72; transform: translateY(9px) scale(.998); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }

      @keyframes demoCopyEnter {
        from { opacity: 0; transform: translateX(12px); }
        to { opacity: 1; transform: translateX(0); }
      }

      @keyframes demoCountTurn {
        0% { transform: rotateY(80deg) scale(.9); opacity: .2; }
        100% { transform: rotateY(0) scale(1); opacity: 1; }
      }

      @keyframes demoTrackerPulse {
        0% { box-shadow: 0 0 0 0 rgba(237,28,36,.32); }
        70%,100% { box-shadow: 0 0 0 9px rgba(237,28,36,0); }
      }

      @keyframes demoFocusHalo {
        0% { box-shadow: 0 0 0 0 rgba(0,114,188,0); }
        28% { box-shadow: 0 0 0 5px rgba(136,206,238,.32), 0 18px 42px rgba(14,33,59,.11); }
        100% { box-shadow: 0 0 0 0 rgba(0,114,188,0); }
      }

      @media (max-width: 1180px) {
        .client-demo-dock { left: 236px; grid-template-columns: 132px 1fr auto; gap: 14px; }
      }

      @media (max-width: 900px) {
        .demo-launch span { display: none; }
        .client-demo-dock { left: 88px; grid-template-columns: 1fr auto; }
        .demo-identity { display: none; }
      }

      @media (max-width: 620px) {
        .client-demo-dock {
          right: 10px;
          bottom: 10px;
          left: 10px;
          grid-template-columns: 1fr;
          gap: 11px;
          padding: 17px 15px 14px;
        }
        .demo-actions { justify-content: flex-end; }
        body.demo-presenting main { padding-bottom: 205px; }
        .outcomes { grid-template-columns: 1fr !important; }
      }

      @media (prefers-reduced-motion: reduce) {
        .client-demo-dock, .client-demo-dock:before, .client-demo-dock:after { transition: none; animation: none; }
        body.demo-presenting main.demo-enter,
        body.demo-presenting main.demo-enter > *,
        .client-demo-dock.demo-step-change .demo-count,
        .client-demo-dock.demo-step-change .demo-copy,
        .demo-focus { animation: none; }
      }