:root{
  --bg:#f7fbff; --card:#fff; --ink:#0b2d6a; --muted:#718bb2; --line:#e7eff7;
  --blue:#187bff; --cyan:#11cbd2; --teal:#11bea1; --purple:#8d73ef; --amber:#f9bf46; --red:#ff6176;
  --shadow:0 10px 28px rgba(67,113,154,.08); --radius:18px; --sidebar:106px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-width:320px;background:radial-gradient(circle at 20% 0%,rgba(53,174,255,.08),transparent 28%),linear-gradient(180deg,#f9fcff,#f3f8fd);color:var(--ink);font-family:"Noto Sans Arabic",Tahoma,"Segoe UI",sans-serif;font-size:14px;line-height:1.55}
button,input{font:inherit}button{cursor:pointer}a{color:inherit}
svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

.app-shell{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);min-height:100vh;direction:ltr}.dashboard{grid-column:1;grid-row:1;direction:rtl;padding:10px 18px 0 22px;min-width:0}.sidebar-shell{grid-column:2;grid-row:1;direction:rtl;position:sticky;top:0;height:100vh;padding:6px 9px 10px;display:flex;flex-direction:column;z-index:60}.brand{height:58px;display:flex;align-items:center;justify-content:center}.brand img{width:96px;height:auto;display:block}.sidebar-nav{flex:1;background:rgba(255,255,255,.96);border:1px solid #e8f0f7;border-radius:22px;box-shadow:var(--shadow);padding:10px 7px;display:flex;flex-direction:column;gap:4px}.nav-item{height:58px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:#4569aa;font-size:10.5px;font-weight:500;transition:.18s ease}.nav-item svg{width:23px;height:23px}.nav-item:hover{background:#f1f7fe;color:#1e6ed0}.nav-item.active{color:#fff;background:linear-gradient(160deg,#15d2cd,#0aa8f5);box-shadow:0 10px 28px rgba(9,183,221,.28)}

.topbar{height:46px;display:grid;grid-template-columns:1fr minmax(330px,500px) 1fr;align-items:center;gap:16px;margin-bottom:6px;position:relative;z-index:90}.topbar-meta,.profile-zone{display:flex;align-items:center;gap:10px}.topbar-meta{justify-content:flex-start}.profile-zone{justify-content:flex-end}.weather,.date{font-size:11px;color:#41689f;white-space:nowrap}.icon-btn{width:34px;height:34px;border:1px solid #e4edf6;border-radius:50%;background:#fff;color:#426caf;display:grid;place-items:center;box-shadow:0 5px 14px rgba(77,118,155,.07)}.icon-btn svg{width:18px;height:18px}.notification{position:relative}.notification b{position:absolute;top:-5px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#ff5265;color:#fff;font-size:9px;display:grid;place-items:center;border:2px solid #fff}.profile-button{border:0;background:transparent;display:flex;align-items:center;gap:9px;color:var(--ink);padding:2px 0 2px 6px}.profile-button>img{width:40px;height:40px;border-radius:50%;object-fit:cover}.profile-button>span{display:flex;flex-direction:column;align-items:flex-start}.profile-button strong{font-size:13px}.profile-button small{font-size:9px;color:var(--muted)}.profile-chevron{width:16px;height:16px;color:#6e87ad}.search-wrap{position:relative}.searchbox{height:38px;background:#fff;border:1px solid #e1ebf4;border-radius:13px;display:flex;align-items:center;gap:8px;padding:0 11px;box-shadow:0 5px 15px rgba(82,130,170,.07)}.searchbox>svg{width:18px;height:18px;color:#456bb0}.searchbox input{width:100%;border:0;outline:0;background:transparent;color:#234876;font-size:11px}.searchbox input::placeholder{color:#8aa4c7}.searchbox kbd{font-size:9px;color:#5575ab;background:#f6f9fd;border:1px solid #e2e9f1;border-radius:6px;padding:2px 7px;direction:ltr}
.popover{position:absolute;top:46px;background:#fff;border:1px solid #e3edf6;border-radius:15px;box-shadow:0 18px 45px rgba(55,93,135,.16);padding:10px;display:none;z-index:100;min-width:230px}.popover.open{display:block}.popover strong{display:block;font-size:12px;margin-bottom:8px}.quick-panel{right:0}.profile-panel{left:0;width:225px}.search-results{left:0;right:0;top:44px}.popover button{width:100%;border:0;background:transparent;color:#325984;text-align:right;border-radius:10px;padding:8px 9px;font-size:10px;display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center}.popover button:hover{background:#f4f9ff}.popover button span:nth-child(2){font-weight:600}.popover button small{grid-column:2;font-size:8.5px;color:#8095b3}.panel-dot{width:8px;height:8px;border-radius:50%}.cyan-dot{background:var(--cyan)}.blue-dot{background:var(--blue)}.green-dot{background:var(--teal)}.amber-dot{background:var(--amber)}.red-dot{background:var(--red)}.profile-panel-head{display:flex;gap:9px;align-items:center;padding:3px 4px 10px;border-bottom:1px solid #edf3f8;margin-bottom:5px}.profile-panel-head img{width:40px;height:40px;border-radius:50%}.profile-panel-head small{display:block;font-size:9px;color:var(--muted)}.profile-panel button svg{width:16px;height:16px}.switch-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#335987;padding:5px 8px}.switch-row input{display:none}.switch{width:34px;height:19px;background:#e6eef7;border-radius:20px;position:relative}.switch:after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;top:2px;right:2px;box-shadow:0 2px 5px rgba(0,0,0,.12);transition:.2s}.switch-row input:checked+.switch{background:#17c5a4}.switch-row input:checked+.switch:after{right:17px}

.hero-card{height:168px;position:relative;border-radius:20px;overflow:hidden;box-shadow:0 12px 30px rgba(42,99,145,.15);margin-bottom:10px}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,77,116,.86) 0%,rgba(0,104,147,.45) 36%,rgba(255,255,255,.02) 72%)}.hero-copy{position:absolute;left:34px;top:30px;color:#fff;text-align:right}.hero-copy h1{font-size:27px;line-height:1.3;margin:0 0 8px;font-weight:800;text-shadow:0 2px 8px rgba(0,54,86,.2)}.hero-copy p{margin:0 0 14px;font-size:13px}.hero-actions{display:flex;align-items:center;gap:11px}.primary-light{height:38px;border:0;border-radius:12px;background:#fff;color:#1673cb;padding:0 16px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 8px 20px rgba(0,56,101,.15)}.primary-light svg{width:17px;height:17px}.play{width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.95);background:rgba(255,255,255,.12);color:#fff}.hero-card blockquote{position:absolute;right:28px;top:29px;width:245px;margin:0;padding:14px 18px;background:rgba(244,252,255,.86);backdrop-filter:blur(12px);border-radius:15px;color:#12366e;font-size:13px;font-weight:700;line-height:1.8;box-shadow:0 10px 22px rgba(0,71,107,.12)}

.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:10px}.kpi{min-height:94px;background:#fff;border:1px solid #e8f0f7;border-radius:16px;box-shadow:0 8px 22px rgba(71,119,159,.07);padding:11px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr 28px;column-gap:9px;overflow:visible;position:relative}.kpi-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center}.kpi-icon svg{width:23px;height:23px}.kpi-icon.blue{background:#edf5ff;color:#1877ff}.kpi-icon.cyan{background:#e9fbff;color:#0eb9dd}.kpi-icon.green{background:#eafff8;color:#11bb8e}.kpi-copy{min-width:0}.kpi-copy span{font-size:10.5px;color:#496ba2;display:block;white-space:nowrap}.kpi-copy strong{font-size:18px;display:block;color:#0a2c69;margin-top:2px;white-space:nowrap}.kpi-copy em{font-style:normal;display:inline-block;font-size:9px;color:#0bae7f;background:#eafff7;padding:1px 5px;border-radius:6px;margin-top:2px}.spark{grid-column:1/3;width:100%;height:30px;overflow:visible;touch-action:none}.spark .spark-line{fill:none;stroke:#1682ff;stroke-width:2.4;vector-effect:non-scaling-stroke}.spark .spark-area{fill:url(#sparkGrad);stroke:none}.spark .spark-point{fill:#fff;stroke:#1682ff;stroke-width:1.8;opacity:0;transition:.15s}.kpi:hover .spark-point{opacity:1}.red-spark .spark-line,.red-spark .spark-point{stroke:#ff5572}.cyan-spark .spark-line,.cyan-spark .spark-point{stroke:#12c6cf}

.card{background:rgba(255,255,255,.97);border:1px solid #e5eef6;border-radius:18px;box-shadow:0 8px 24px rgba(76,126,166,.07);min-width:0;overflow:visible}.card-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px 6px}.card-head h2{margin:0;font-size:14px;font-weight:800;color:#0b2d6b}.filter{border:0;background:#f3f8ff;color:#315d9f;border-radius:9px;font-size:9.5px;padding:5px 9px}.analytics-row{display:grid;grid-template-columns:.82fr 1.27fr 1.03fr;gap:10px;margin-bottom:10px}.secondary-row{display:grid;grid-template-columns:.8fr .88fr 1fr .82fr;gap:10px;margin-bottom:10px}.bottom-row{display:grid;grid-template-columns:.9fr .84fr 1.26fr;gap:10px;align-items:stretch}.analytics-row>.card{min-height:250px}.secondary-row>.card{min-height:176px}.bottom-row>.card,.bottom-row>.ai-card{min-height:164px}
.channels-body,.ticket-body,.status-body{display:flex;align-items:center;justify-content:space-evenly;gap:14px;padding:7px 14px 12px}.donut-shell{position:relative;width:144px;height:144px;flex:0 0 auto}.donut-shell.small{width:105px;height:105px}.interactive-donut{width:100%;height:100%;display:block;touch-action:none}.donut-center{position:absolute;inset:24%;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}.donut-center strong{font-size:21px}.donut-center span{font-size:10px;font-weight:700}.donut-center small{font-size:8px;color:#758eaf}.legend{list-style:none;margin:0;padding:0;min-width:145px}.legend li{display:grid;grid-template-columns:9px 1fr auto;gap:7px;align-items:center;font-size:9.5px;color:#45669a;padding:3px 0}.legend b{color:#173c78}.legend i{width:7px;height:7px;border-radius:50%}.c1{background:#11c7aa}.c2{background:#278dff}.c3{background:#8c73ee}.c4{background:#f8bf44}.c5{background:#ff6176}.legend.compact{min-width:125px}.legend.compact li{padding:2px 0}
.trend-head{padding-bottom:2px}.tabs{display:flex;gap:5px}.tabs button{border:0;background:#f3f8ff;color:#4668a0;border-radius:10px;padding:5px 12px;font-size:9.5px}.tabs button.active{background:linear-gradient(160deg,#25cdda,#268bff);color:#fff;box-shadow:0 5px 13px rgba(34,138,255,.22)}.chart-legend{display:flex;gap:16px;padding:0 16px 1px;font-size:9.5px;color:#5b78a7}.chart-legend span{display:flex;align-items:center;gap:5px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.teal{background:#11c6b5}.blue-dot{background:#218dff}.trend-wrap{height:196px;padding:1px 10px 9px}.trend-chart{width:100%;height:100%;display:block;touch-action:none}.trend-chart .bar{fill:url(#barGrad);opacity:.95}.trend-chart .sales-line{fill:none;stroke:#10b9ca;stroke-width:3;vector-effect:non-scaling-stroke}.trend-chart .sales-area{fill:url(#areaGrad)}.trend-chart .point{fill:#fff;stroke:#0baac5;stroke-width:2;vector-effect:non-scaling-stroke}.trend-chart text{font-family:"Noto Sans Arabic",Tahoma,sans-serif;fill:#7891b4;font-size:10px}.trend-chart .grid{stroke:#e8f0f7;stroke-width:1}.trend-chart .hover-line{stroke:#8dd5e7;stroke-width:1.4;stroke-dasharray:5 5}.trend-chart .hover-point{fill:#fff;stroke:#0aa8c7;stroke-width:3}
.map-content{display:grid;grid-template-columns:1.18fr .86fr;align-items:center;padding:0 12px}.map-visual{height:180px;position:relative}.map-visual img{width:100%;height:100%;object-fit:contain}.map-hotspot{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;border-radius:50%;border:3px solid #fff;background:#0fc7d0;box-shadow:0 0 0 7px rgba(15,199,208,.18);transform:translate(-50%,-50%)}.city-bars{list-style:none;margin:0;padding:0}.city-bars li{display:grid;grid-template-columns:42px 1fr 27px;gap:6px;align-items:center;font-size:9.5px;color:#45669e;padding:4px 0}.city-bars li>div{height:7px;background:#e8f2fa;border-radius:10px;overflow:hidden}.city-bars i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#12c9c8,#3da1ff)}.button-link{border:0;background:transparent}.card-link{font-size:9px;color:#0877ed;text-decoration:none}.map-card>.card-link{margin:0 14px 8px}
.customer-number{display:flex;justify-content:center;align-items:flex-end;gap:8px;padding-top:1px}.customer-number strong{font-size:20px}.customer-number span{font-size:9px;color:#6c84a7}.customer-number em{font-style:normal;color:#0ca97e;background:#eafff7;border-radius:6px;padding:1px 5px;font-size:8.5px}.bar-chart{width:100%;height:103px;display:block;padding:4px 14px 10px;touch-action:none}.bar-chart text{font-family:"Noto Sans Arabic",Tahoma,sans-serif;font-size:9px;fill:#6b83a9}.products{list-style:none;margin:0;padding:0 14px 9px}.products li{display:grid;grid-template-columns:28px 78px 1fr 42px 40px;gap:6px;align-items:center;padding:4px 0;font-size:9px;color:#365a8d}.product-thumb{width:24px;height:24px;border-radius:6px;object-fit:cover}.products li>div{height:7px;background:#eaf3f9;border-radius:10px;overflow:hidden}.products li>div i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#0ec5c5,#2e9aff)}.products em{font-style:normal;color:#0ca879;background:#eafff7;border-radius:7px;padding:2px 4px;text-align:center}

.ai-card{border-radius:18px;background:linear-gradient(135deg,#e8f8ff,#8fd7ff);border:1px solid #bce7fb;display:grid;grid-template-columns:42% 58%;overflow:hidden;box-shadow:0 10px 28px rgba(29,126,190,.15)}.ai-art{min-height:164px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(72,161,222,.08))}.ai-art img{width:100%;height:100%;object-fit:cover;object-position:center}.ai-copy{padding:14px 13px 12px;display:flex;flex-direction:column;justify-content:center}.ai-copy h2{font-size:15px;margin:0 0 8px}.ai-bubble{background:rgba(255,255,255,.83);border-radius:15px;padding:10px 11px;box-shadow:0 8px 18px rgba(45,126,186,.08)}.ai-bubble p{font-size:9.5px;color:#426995;line-height:1.8;margin:0 0 8px}.ai-bubble button{border:0;border-radius:10px;background:linear-gradient(90deg,#10c8d3,#188bff);color:#fff;padding:6px 14px;font-size:9.5px;font-weight:700}
.tasks{list-style:none;margin:0;padding:0 13px 9px}.tasks li{display:grid;grid-template-columns:1fr 58px 8px;gap:6px;align-items:center;padding:4px 0;border-bottom:1px solid #edf3f8;font-size:9px;color:#36598d}.tasks li:last-child{border-bottom:0}.tasks label{display:flex;align-items:center;gap:7px}.tasks input{appearance:none;width:13px;height:13px;border:1.5px solid #16c49c;border-radius:3px;position:relative}.tasks input:checked{background:#13c99d}.tasks input:checked:after{content:"✓";position:absolute;left:1px;top:-3px;color:#fff;font-size:10px}.tasks time{color:#758bab}.priority{width:7px;height:7px;border-radius:50%}.p1{background:#8a5ff0}.p2{background:#ff5e76}.p3{background:#ffbf40}.p4{background:#18c4a0}.add-btn{width:24px;height:24px;border:0;border-radius:7px;background:#0e7ef5;color:#fff;font-size:16px;line-height:1}.tasks-head{justify-content:flex-start;gap:9px}
.orders-card table{width:100%;border-collapse:collapse;font-size:8.5px;white-space:nowrap}.orders-card th{padding:4px 6px;text-align:right;color:#637fa7;border-bottom:1px solid #e7eef5;font-weight:600}.orders-card td{padding:4px 6px;color:#355987;border-bottom:1px solid #eef3f7}.orders-card tr:last-child td{border-bottom:0}.orders-card td img{width:18px;height:18px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-left:4px}.tag{border-radius:8px;padding:2px 7px}.blue-tag{background:#e8f5ff;color:#147bd1}.green-tag{background:#e8fff5;color:#0da37e}.cyan-tag{background:#e7fbff;color:#0aa8c3}.red-tag{background:#fff0f2;color:#e2485e}
.site-footer{margin-top:12px;border-top:1px solid #e4edf6;min-height:50px;display:flex;align-items:center;justify-content:space-between;color:#7a8fac;font-size:10px;padding:0 4px}

.chart-float-tooltip{position:fixed;z-index:130;pointer-events:none;background:#0b2e68;color:#fff;border-radius:10px;padding:7px 9px;font-size:9px;line-height:1.6;box-shadow:0 10px 24px rgba(11,46,104,.23);opacity:0;transform:translate(-50%,-120%);transition:opacity .12s}.chart-float-tooltip.show{opacity:1}.toast{position:fixed;left:24px;bottom:24px;z-index:150;background:#0d2f6b;color:#fff;border-radius:12px;padding:9px 14px;box-shadow:0 12px 30px rgba(18,52,102,.23);font-size:10px;opacity:0;transform:translateY(12px);transition:.22s}.toast.show{opacity:1;transform:translateY(0)}.modal{position:fixed;inset:0;z-index:140;background:rgba(11,36,70,.32);backdrop-filter:blur(5px);display:none;place-items:center;padding:18px}.modal.open{display:grid}.modal-card{width:min(520px,100%);background:#fff;border-radius:19px;box-shadow:0 25px 70px rgba(14,50,92,.28);padding:22px;position:relative}.modal-close{position:absolute;left:12px;top:10px;width:30px;height:30px;border:0;border-radius:50%;background:#f1f6fb;color:#3d6093;font-size:20px}.modal-card h3{margin:0 0 10px;font-size:18px}.modal-card p{font-size:11px;color:#5e769b;line-height:1.8}.modal-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.modal-metrics div{background:#f4f9ff;border-radius:12px;padding:12px;text-align:center}.modal-metrics strong{display:block;font-size:18px}.modal-metrics span{font-size:9px;color:#6981a6}

body.focus-mode .sidebar-shell,body.focus-mode .topbar{opacity:.72}body.focus-mode .card,body.focus-mode .kpi,body.focus-mode .hero-card{box-shadow:0 10px 26px rgba(59,111,160,.05)}

@media (min-width:1500px){:root{--sidebar:110px}.dashboard{padding-left:22px}.hero-card{height:168px}.analytics-row>.card{min-height:258px}.secondary-row>.card{min-height:180px}.bottom-row>.card,.bottom-row>.ai-card{min-height:168px}}
@media (max-width:1280px){:root{--sidebar:92px}.dashboard{padding:9px 13px 0 16px}.brand img{width:82px}.nav-item{height:53px;font-size:9.5px}.topbar{grid-template-columns:.9fr minmax(280px,430px) 1fr}.weather{display:none}.hero-copy h1{font-size:23px}.hero-card blockquote{width:220px}.kpi-grid{grid-template-columns:repeat(3,1fr)}.analytics-row{grid-template-columns:1fr 1.15fr}.map-card{grid-column:1/-1}.secondary-row{grid-template-columns:1fr 1fr}.bottom-row{grid-template-columns:1fr 1fr}.orders-card{grid-column:1/-1}.orders-card table{font-size:9px}}
@media (max-width:980px){:root{--sidebar:82px}.brand img{width:72px}.sidebar-shell{padding-inline:6px}.nav-item{height:51px;font-size:9px}.nav-item svg{width:21px;height:21px}.topbar{grid-template-columns:1fr 1fr}.profile-zone{grid-column:2}.topbar-meta{display:none}.search-wrap{grid-column:1;grid-row:1}.profile-button span{display:none}.kpi-grid{grid-template-columns:repeat(2,1fr)}.analytics-row,.secondary-row,.bottom-row{grid-template-columns:1fr}.map-card{grid-column:auto}.orders-card{grid-column:auto}.analytics-row>.card,.secondary-row>.card,.bottom-row>.card,.bottom-row>.ai-card{min-height:unset}.trend-wrap{height:230px}.map-content{grid-template-columns:1.1fr 1fr}.ai-card{grid-template-columns:34% 66%}.ai-art{min-height:190px}.site-footer{padding-bottom:8px}}
@media (max-width:700px){:root{--sidebar:70px}.dashboard{padding:7px 8px 0 10px}.sidebar-shell{padding:5px 5px 8px}.brand{height:50px}.brand img{width:62px}.sidebar-nav{border-radius:18px;padding:8px 4px}.nav-item{height:48px;font-size:8px;border-radius:12px}.nav-item svg{width:19px;height:19px}.topbar{height:auto;min-height:44px;grid-template-columns:1fr auto;gap:8px}.search-wrap{grid-column:1}.profile-zone{grid-column:2}.profile-zone .icon-btn:first-child{display:none}.profile-button img{width:36px;height:36px}.searchbox{height:36px}.searchbox kbd{display:none}.hero-card{height:220px}.hero-copy{left:18px;right:18px;top:25px}.hero-copy h1{font-size:21px;max-width:420px}.hero-card blockquote{right:18px;bottom:17px;top:auto;width:220px;font-size:11px}.kpi-grid{grid-template-columns:1fr 1fr}.analytics-row,.secondary-row,.bottom-row{gap:8px}.channels-body,.ticket-body,.status-body{gap:8px}.map-content{grid-template-columns:1fr}.map-visual{height:185px}.city-bars{padding:0 8px 8px}.products li{grid-template-columns:26px 72px 1fr 38px 38px}.orders-card table{font-size:8px}}
@media (max-width:520px){:root{--sidebar:66px}.dashboard{padding-right:6px;padding-left:6px}.brand img{width:57px}.nav-item{height:46px;font-size:7.5px}.nav-item svg{width:18px;height:18px}.searchbox input{font-size:9px}.profile-zone .notification{display:none}.hero-card{height:230px}.hero-card blockquote{display:none}.hero-copy{top:42px}.hero-copy h1{font-size:19px}.hero-copy p{font-size:10px}.kpi-grid{grid-template-columns:1fr}.kpi{grid-template-columns:42px 1fr 110px;grid-template-rows:1fr}.kpi .spark{grid-column:3;grid-row:1;height:46px;align-self:center}.kpi-copy strong{font-size:17px}.channels-body,.ticket-body,.status-body{flex-direction:column}.legend{width:100%;min-width:0}.donut-shell{width:132px;height:132px}.donut-shell.small{width:108px;height:108px}.trend-wrap{height:240px}.chart-legend{flex-wrap:wrap}.products li{grid-template-columns:24px 70px 1fr 34px 36px;font-size:8px}.ai-card{grid-template-columns:1fr}.ai-art{height:180px;min-height:180px}.ai-art img{object-fit:cover}.ai-copy{padding-top:10px}.tasks li{grid-template-columns:1fr 50px 8px}.orders-card table,.orders-card thead,.orders-card tbody,.orders-card tr,.orders-card td{display:block;width:100%}.orders-card thead{display:none}.orders-card tr{border:1px solid #e8f0f7;border-radius:12px;padding:6px 8px;margin:7px 10px;width:auto}.orders-card td{display:grid;grid-template-columns:78px 1fr;border:0;padding:3px 0;white-space:normal}.orders-card td::before{content:attr(data-label);font-weight:700;color:#6f86a8}.site-footer{flex-direction:column;justify-content:center;gap:2px;padding:8px 0}}

/* ===== Final presentation pass: readability, complete cards, fixed sidebar ===== */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.sidebar-shell{width:var(--sidebar)}
.brand{overflow:visible}
.brand img{width:104px;max-width:100%;height:52px;object-fit:contain;object-position:center}
.sidebar-nav{overflow:visible}
.card,.kpi,.ai-card{overflow:hidden}
.card-head h2{font-size:15.5px;line-height:1.35}
.filter{font-size:10.5px;line-height:1.3;padding:6px 10px}
.kpi-copy span{font-size:11.5px;line-height:1.45}
.kpi-copy strong{font-size:19px;line-height:1.25}
.kpi-copy em{font-size:9.5px;line-height:1.3}
.legend li{font-size:10.5px;line-height:1.5}
.city-bars li{font-size:10.3px}
.products li{font-size:10px;line-height:1.4}
.customer-number span{font-size:10px}.customer-number em{font-size:9px}
.bar-chart text,.trend-chart text{font-size:10.5px}
.chart-legend{font-size:10.5px}
.tasks li{font-size:10px;line-height:1.45;padding:5.5px 0}
.ai-copy h2{font-size:16px}.ai-bubble p{font-size:10.5px;line-height:1.85}.ai-bubble button{font-size:10.5px}
.ai-art{min-height:176px;padding:8px 4px 0;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(72,161,222,.08))}
.ai-art img{width:100%;height:100%;object-fit:contain;object-position:center bottom;border-radius:14px 0 0 14px}
.bottom-row>.card,.bottom-row>.ai-card{min-height:176px}
.orders-card table{font-size:9.6px;table-layout:fixed}
.orders-card th,.orders-card td{padding:5px 6px;overflow:hidden;text-overflow:ellipsis}
.orders-card td:nth-child(2){white-space:nowrap}
.site-footer{font-size:10.5px;min-height:46px}
.popover{font-size:10.5px}.popover strong{font-size:12.5px}.popover button{font-size:10.5px}.popover button small{font-size:9px}
.searchbox input{font-size:11.5px}

@media (max-width:1280px){
  .brand img{width:88px;height:48px}.card-head h2{font-size:14.5px}.legend li{font-size:10px}.products li{font-size:9.5px}.tasks li{font-size:9.5px}.orders-card table{font-size:9.2px}
}
@media (max-width:980px){
  .brand img{width:76px;height:44px}.card-head h2{font-size:15px}.legend li{font-size:10.5px}.products li{font-size:10px}.orders-card table{font-size:9.7px}.ai-copy h2{font-size:16px}.ai-bubble p{font-size:10.5px}
}
@media (max-width:700px){
  :root{--sidebar:64px}
  .sidebar-shell{width:64px;padding:5px 4px 8px}
  .brand{height:48px}.brand img{width:56px;height:44px}
  .sidebar-nav{padding:7px 3px;border-radius:17px;gap:2px}
  .nav-item{height:46px;font-size:8.5px;gap:2px}.nav-item svg{width:19px;height:19px}
  .dashboard{padding:7px 7px 0 8px}
  .card-head{padding:11px 12px 6px}.card-head h2{font-size:13px}.filter{font-size:9px;padding:5px 8px}
  .kpi-copy span{font-size:11px}.kpi-copy strong{font-size:18px}.kpi-copy em{font-size:9px}
  .legend li{font-size:10px}.city-bars li{font-size:9.8px}.products li{font-size:9.5px}
  .chart-legend{font-size:9.8px}.trend-chart text,.bar-chart text{font-size:10px}
  .tasks li{font-size:9.5px}.ai-bubble p{font-size:10px}.orders-card table{font-size:9.3px}
}
@media (max-width:520px){
  :root{--sidebar:60px}
  .sidebar-shell{width:60px}.brand img{width:52px}.nav-item{height:44px;font-size:8px}.nav-item svg{width:18px;height:18px}
  .dashboard{padding-left:6px;padding-right:6px}
  .hero-copy h1{font-size:20px;line-height:1.4}.hero-copy p{font-size:10.5px}.primary-light{font-size:10px}
  .kpi{min-height:92px;padding:10px}.kpi-copy span{font-size:11px}.kpi-copy strong{font-size:17px}.kpi .spark{height:48px}
  .card-head h2{font-size:12.5px}.legend li{font-size:9.8px}.products li{font-size:9px}
  .ai-card{grid-template-columns:1fr}.ai-art{height:190px;min-height:190px;padding:6px 10px 0}.ai-art img{object-fit:contain;border-radius:14px 14px 0 0}.ai-copy{padding:12px}.ai-copy h2{font-size:15px}.ai-bubble p{font-size:10px}
  .orders-card table{font-size:10px}.orders-card td{font-size:10px}
  .site-footer{font-size:9.5px;text-align:center}
}

/* Never create an internal scroll area inside dashboard cards. */
.card,.kpi,.ai-card,.channels-body,.ticket-body,.status-body,.trend-wrap,.map-content,.tasks,.orders-card{scrollbar-width:none}
.orders-card table{table-layout:auto}
.orders-card th,.orders-card td{overflow:visible;text-overflow:clip;white-space:nowrap}


/* ===== v4 visual fidelity refinements ===== */
/* Popovers are anchored by JS directly under their trigger. */
.topbar .popover:not(.search-results){position:fixed;top:auto;right:auto;left:auto;transform:none;z-index:1000;margin:0}
.search-results{position:absolute;top:44px;left:0;right:0}
.popover{min-width:238px;padding:11px 12px;border-radius:14px;border:1px solid #dfeaf4;box-shadow:0 16px 38px rgba(43,83,127,.18)}
.popover:before{content:"";position:absolute;top:-6px;width:12px;height:12px;background:#fff;border-left:1px solid #dfeaf4;border-top:1px solid #dfeaf4;transform:rotate(45deg)}
.search-results:before{display:none}
.popover[data-anchor="right"]:before{right:18px}.popover[data-anchor="center"]:before{left:50%;margin-left:-6px}.popover[data-anchor="left"]:before{left:18px}

/* Remove inherited SVG outlines that made charts look unlike the design. */
.trend-chart rect,.trend-chart polygon,.trend-chart path,.bar-chart rect,.spark polygon,.spark path{stroke-linejoin:round}
.trend-chart .bar,.bar-chart rect,.spark .spark-area{stroke:none!important}
.interactive-donut circle{fill:none}

/* KPI sparklines: thin, clean, no heavy filled area — closer to reference. */
.kpi{grid-template-rows:1fr 27px}
.spark{height:27px}
.spark .spark-line{stroke-width:2.1}
.spark .spark-area{opacity:.18}
.spark .spark-point{r:2.4px}

/* Main sales chart fidelity. */
.trend-wrap{height:196px;padding:1px 10px 8px;position:relative;overflow:visible}
.trend-chart .bar{fill:url(#barGrad);opacity:.98;stroke:none!important}
.trend-chart .sales-line{fill:none;stroke:#13aed4;stroke-width:2.5;vector-effect:non-scaling-stroke}
.trend-chart .sales-area{display:none}
.trend-chart .point{fill:#fff;stroke:#10aeda;stroke-width:2;vector-effect:non-scaling-stroke}
.trend-chart .grid{stroke:#e8eff6;stroke-width:1}
.trend-chart text{font-size:10.2px;font-weight:600;fill:#6f8caf}
.trend-chart .axis-right{fill:#6f8caf}
.trend-chart .hover-line{stroke:#9bd7e6;stroke-width:1.2;stroke-dasharray:4 4}
.trend-chart .hover-point{fill:#fff;stroke:#0aa8ce;stroke-width:3}
.trend-pinned-tooltip{position:absolute;z-index:4;min-width:136px;padding:8px 11px;border:1px solid #dbe8f3;border-radius:11px;background:rgba(255,255,255,.97);box-shadow:0 9px 24px rgba(49,92,133,.14);font-size:9.5px;color:#345b8c;line-height:1.55;pointer-events:none;transform:translate(-50%,-100%)}
.trend-pinned-tooltip .tip-date{display:block;margin-bottom:2px;color:#6280a8}.trend-pinned-tooltip b{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#173a73}.tip-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}.teal-tip{background:#10c5bc}.blue-tip{background:#2a8dff}

/* Customer bars should be flat/clean, without dark outlines. */
.bar-chart{width:100%;height:92px;display:block;overflow:visible}.bar-chart rect{stroke:none!important}.bar-chart text{font-size:10.5px;font-weight:600;fill:#607fa9}

/* Tables: larger and bolder for presentation readability. */
.orders-card{overflow:hidden}
.orders-card table{font-size:11.3px;font-weight:600;line-height:1.55;table-layout:auto}
.orders-card thead th{font-size:11px;font-weight:800;color:#45658f;padding:5px 7px;background:linear-gradient(180deg,#fbfdff,#f7faff)}
.orders-card tbody td{font-size:11.1px;font-weight:650;color:#244b7f;padding:5px 7px}
.orders-card tbody tr{height:25px}
.orders-card td img{width:20px;height:20px;margin-left:5px}
.orders-card .tag{font-size:10px;font-weight:700;padding:2px 7px}
.orders-card .card-head{padding-bottom:4px}

/* Other compact text made more legible. */
.products li{font-size:10px;font-weight:600}.products li b{font-weight:800}.legend li{font-size:10.2px;font-weight:500}.legend b{font-weight:800}
.city-bars li{font-size:10.2px;font-weight:600}.tasks li{font-size:10px;font-weight:550}.card-link,.button-link{font-size:10px;font-weight:700}

@media (min-width:1500px){
  .orders-card table{font-size:11.6px}.orders-card thead th{font-size:11.3px}.orders-card tbody td{font-size:11.4px}
}
@media (max-width:1280px){
  .orders-card table{font-size:10.8px}.orders-card thead th,.orders-card tbody td{font-size:10.7px}
}
@media (max-width:700px){
  .orders-card table{font-size:11px}.orders-card td{font-size:11px;font-weight:650}
}

/* v4.1 chart/table finishing */
.spark .spark-area{display:none!important}
.trend-chart text,.bar-chart text{stroke:none!important;paint-order:normal}
.orders-card table{font-size:12px!important;font-weight:700!important}
.orders-card thead th{font-size:11.7px!important;font-weight:800!important}
.orders-card tbody td{font-size:11.8px!important;font-weight:700!important;color:#183f75!important}
.orders-card .tag{font-size:10.5px!important;font-weight:800!important}
@media (max-width:1280px){.orders-card table{font-size:11.2px!important}.orders-card thead th{font-size:11px!important}.orders-card tbody td{font-size:11px!important}}
@media (max-width:700px){.orders-card table{font-size:11.2px!important}.orders-card tbody td{font-size:11.2px!important}}

/* v5 — exact chart cleanup + nationwide Iran coverage */
.trend-card{border-color:#e7eff7}
.trend-wrap{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}
.trend-chart{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}
.trend-chart .interaction-layer{stroke:none!important;fill:transparent!important}
.trend-chart > rect{stroke:none!important}
.trend-chart:focus{outline:none!important}

/* Full-country sales coverage map: the entire Iran silhouette stays visible at every breakpoint. */
.map-content{grid-template-columns:1.28fr .82fr;gap:8px;align-items:center}
.nationwide-map{height:188px;position:relative;display:grid;place-items:center;overflow:visible;isolation:isolate}
.nationwide-map>img{position:absolute;inset:2px 0 0 0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:1;filter:drop-shadow(0 8px 16px rgba(40,126,174,.08))}
.map-heat{position:absolute;z-index:2;width:72px;height:72px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(21,216,199,.28) 0,rgba(31,174,255,.15) 38%,rgba(31,174,255,0) 72%);filter:blur(.2px)}
.heat-north{left:42%;top:18%}.heat-center{left:42%;top:43%;width:92px;height:92px}.heat-south{left:46%;top:67%}.heat-east{left:68%;top:42%}.heat-west{left:20%;top:42%}
.map-hotspot{z-index:4;width:10px;height:10px;border:2px solid #fff;background:#12cdb4;box-shadow:0 0 0 4px rgba(18,205,180,.17),0 3px 8px rgba(12,121,152,.18);transition:transform .15s ease,box-shadow .15s ease}
.map-hotspot.primary{width:13px;height:13px;background:#13b8f5;box-shadow:0 0 0 6px rgba(19,184,245,.17),0 5px 12px rgba(15,120,185,.2)}
.map-hotspot:hover,.map-hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.35);box-shadow:0 0 0 7px rgba(18,205,180,.18),0 6px 14px rgba(12,121,152,.22);outline:0}
@media (min-width:1500px){.nationwide-map{height:196px}}
@media (max-width:980px){.map-content{grid-template-columns:1.15fr .85fr}.nationwide-map{height:220px}}
@media (max-width:700px){.map-content{grid-template-columns:1fr}.nationwide-map{height:235px}.city-bars{padding-top:2px}}


/* ===== v7 exact KPI cards + simplified agency popup ===== */
.kpi-grid{gap:10px}
.kpi{
  min-height:100px;height:100px;padding:10px 12px 9px 12px;
  grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto 1fr;
  column-gap:10px;align-items:start;border-radius:14px;
  border:1px solid #e9f1f8;background:#fff;
  box-shadow:0 7px 18px rgba(67,113,154,.065);
  overflow:hidden;
}
.kpi-icon{width:48px;height:48px;border-radius:13px;background:#f2f8ff!important;color:#0b79f6!important;box-shadow:inset 0 0 0 1px rgba(23,123,255,.03)}
.kpi-icon svg{width:27px;height:27px;stroke-width:1.9}
.kpi-copy{padding-top:1px;min-width:0;text-align:right}
.kpi-copy span{font-size:11.5px;line-height:1.35;color:#4f6fa5;font-weight:600;white-space:nowrap}
.kpi-copy strong{font-size:20px;line-height:1.25;color:#082c6b;font-weight:800;letter-spacing:-.15px;margin-top:3px;white-space:nowrap}
.kpi-copy em{position:absolute;left:14px;bottom:9px;margin:0;padding:0;background:transparent;color:#0db57f;font-size:12px;line-height:1;font-weight:800;direction:ltr}
.kpi .spark{position:absolute;right:12px;bottom:6px;width:50%;height:36px;display:block;overflow:visible;touch-action:none;cursor:crosshair}
.spark .spark-area{display:none!important}
.spark .spark-line{fill:none;stroke:#1682ff;stroke-width:2.15;vector-effect:non-scaling-stroke;filter:none}
.spark .spark-point{opacity:0;fill:#fff;stroke-width:2;transition:none}
.kpi:hover .spark-point{opacity:0}
.spark .spark-active-point{fill:#fff;stroke-width:2.2;pointer-events:none}
.spark .spark-guide{stroke:#b9d9f3;stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.spark .spark-hit{fill:transparent;stroke:none;cursor:crosshair}
.kpi-spark-tip{position:absolute;z-index:8;display:none;pointer-events:none;min-width:86px;padding:5px 7px;border:1px solid #dce9f4;border-radius:9px;background:rgba(255,255,255,.98);box-shadow:0 8px 20px rgba(46,92,136,.14);font-size:8.5px;color:#53729f;line-height:1.55;text-align:right;white-space:nowrap}
.kpi-spark-tip.open{display:block}.kpi-spark-tip b{display:block;color:#0d3b7b;font-size:9.5px}
@media (max-width:1280px){.kpi{height:102px;min-height:102px}.kpi-copy strong{font-size:19px}.kpi .spark{width:48%}}
@media (max-width:700px){.kpi{height:100px;min-height:100px}.kpi-copy strong{font-size:18px}.kpi .spark{width:50%;height:34px}}
@media (max-width:520px){.kpi{grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr;height:102px;min-height:102px}.kpi .spark{grid-column:auto;grid-row:auto;width:48%;height:36px;right:11px;bottom:7px}.kpi-icon{width:44px;height:44px}.kpi-copy strong{font-size:18px}.kpi-copy em{font-size:11px}}



/* ===== v8: compact representative map + clean coded header ===== */
.hero-bg{object-fit:cover;object-position:center center}
.hero-card{background:#0c6f9f}
.map-card{position:relative}
.map-hotspot{cursor:pointer}
.map-hotspot:focus-visible{outline:3px solid rgba(30,141,255,.22);outline-offset:3px}
.mini-agency-popover{position:absolute;z-index:35;width:286px;display:none;background:rgba(255,255,255,.985);border:1px solid #dceaf4;border-radius:16px;box-shadow:0 18px 42px rgba(18,62,105,.20);padding:13px;direction:rtl;text-align:right}
.mini-agency-popover.open{display:block}
.mini-agency-close{position:absolute;left:9px;top:9px;width:26px;height:26px;border:0;border-radius:8px;background:#f2f7fb;color:#6b84a7;font-size:19px;line-height:1}
.mini-agency-head{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding-left:24px}
.mini-agency-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#12cbb6,#258dff);color:#fff;font-weight:800}
.mini-agency-head small{display:block;color:#8ba0bc;font-size:9px}.mini-agency-head h3{margin:1px 0 0;font-size:13px;color:#163d75}.mini-agency-status{font-size:8px;font-weight:800;color:#08a678;background:#e8fff6;border-radius:20px;padding:4px 7px}
.mini-agency-info{display:grid;gap:6px;margin-top:10px}.mini-agency-info p{margin:0;display:grid;grid-template-columns:48px 1fr;gap:7px;padding:7px 8px;border:1px solid #e8f1f7;background:#f8fbfe;border-radius:9px}.mini-agency-info span{font-size:8.5px;color:#8298b6;font-weight:600}.mini-agency-info b{font-size:9.7px;line-height:1.65;color:#2c557f;font-weight:800}
@media(max-width:760px){.mini-agency-popover{width:min(270px,calc(100% - 24px));right:12px!important;left:auto!important;top:70px!important}.hero-bg{object-position:center center}}

/* === V9 refinements: readable menus, overlay popups, real dropdown filters === */
.weather,.date{
  font-size:13px!important;
  font-weight:800!important;
  color:#254f8e!important;
  letter-spacing:-.1px;
}

/* Top navigation menus are intentionally larger and bolder for presentation readability. */
.popover{
  min-width:270px!important;
  padding:13px 14px!important;
  border-radius:16px!important;
  z-index:3000!important;
}
.popover strong{
  font-size:14px!important;
  font-weight:800!important;
  color:#123d78!important;
  margin-bottom:9px!important;
}
.popover button{
  font-size:12.5px!important;
  font-weight:700!important;
  line-height:1.55!important;
  padding:10px 11px!important;
}
.popover button span:nth-child(2){font-weight:800!important}
.popover button small{
  font-size:11px!important;
  font-weight:600!important;
  color:#6f88ad!important;
  line-height:1.5!important;
}
.profile-panel-head strong{font-size:13.5px!important;font-weight:800!important}
.profile-panel-head small{font-size:10.5px!important;font-weight:600!important}
.switch-row{font-size:12.5px!important;font-weight:700!important}

/* Search results are rendered as a fixed overlay so they can never hide behind the dashboard. */
.search-results{
  position:fixed!important;
  inset:auto auto auto auto!important;
  width:auto;
  min-width:330px!important;
  max-width:min(520px,calc(100vw - 20px));
  z-index:3500!important;
}
.searchbox{position:relative;z-index:3501}
.searchbox input{font-size:12.5px!important;font-weight:600!important}
.searchbox kbd{display:none!important}

/* Global filter dropdown used by chart time-range controls. */
.filter-menu{
  position:fixed;
  z-index:3600;
  display:none;
  min-width:165px;
  padding:7px;
  background:#fff;
  border:1px solid #dce8f3;
  border-radius:13px;
  box-shadow:0 16px 36px rgba(39,77,119,.18);
  direction:rtl;
}
.filter-menu.open{display:block}
.filter-menu button{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:#315987;
  text-align:right;
  padding:9px 11px;
  border-radius:9px;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.filter-menu button:hover,.filter-menu button.selected{background:#eef7ff;color:#0e72d9}
.filter{font-weight:700!important;font-size:10.5px!important}

/* KPI layout: primary number always sits directly above growth/decline percentage. */
.kpi{display:block!important;position:relative!important;height:104px!important;min-height:104px!important;padding:10px 12px!important;overflow:visible!important}
.kpi-icon{position:absolute!important;right:12px!important;top:11px!important;width:42px!important;height:42px!important}
.kpi-copy{
  position:absolute!important;
  left:13px!important;
  top:10px!important;
  width:calc(100% - 74px)!important;
  text-align:right!important;
  padding:0!important;
}
.kpi-copy span{font-size:11.5px!important;font-weight:700!important;line-height:1.35!important}
.kpi-copy strong{display:block!important;font-size:20px!important;font-weight:900!important;line-height:1.22!important;margin-top:4px!important}
.kpi-copy em{
  position:static!important;
  display:block!important;
  width:max-content;
  margin-top:4px!important;
  padding:0!important;
  background:transparent!important;
  font-size:11.5px!important;
  font-weight:900!important;
  direction:ltr;
}
.kpi .spark{position:absolute!important;right:12px!important;bottom:7px!important;width:50%!important;height:34px!important}

/* Representative popover is a viewport overlay, never clipped by its map card. */
.mini-agency-popover{
  position:fixed!important;
  z-index:4000!important;
  width:300px!important;
  max-width:calc(100vw - 24px)!important;
  padding:14px!important;
  box-shadow:0 22px 52px rgba(17,57,99,.24)!important;
}
.mini-agency-head small{font-size:10px!important;font-weight:700!important}
.mini-agency-head h3{font-size:14px!important;font-weight:900!important}
.mini-agency-status{font-size:9px!important}
.mini-agency-info span{font-size:9.5px!important;font-weight:700!important}
.mini-agency-info b{font-size:10.5px!important;font-weight:800!important}

/* SVG chart labels remain readable when ranges change. */
.bar-chart text{font-family:"Vazirmatn","Tahoma",sans-serif;font-size:11px!important;font-weight:700!important;fill:#5f7ca8}

@media (max-width:700px){
  .weather,.date{font-size:11px!important}
  .popover{min-width:min(280px,calc(100vw - 20px))!important}
  .search-results{min-width:0!important;max-width:calc(100vw - 20px)!important}
  .kpi{height:104px!important;min-height:104px!important}
  .kpi-copy strong{font-size:18px!important}
  .kpi-copy em{font-size:10.5px!important}
}



/* ===== V10: larger alert badge + AI card matched to provided reference ===== */
.notification b{
  top:-8px!important;
  right:-7px!important;
  min-width:24px!important;
  height:24px!important;
  border-radius:12px!important;
  font-size:11px!important;
  font-weight:900!important;
  box-shadow:0 8px 16px rgba(255,82,101,.32)!important;
}

.ai-card{
  min-height:178px!important;
  grid-template-columns:39% 61%!important;
  align-items:stretch!important;
  background:linear-gradient(135deg,#89cfff 0%,#b8e1ff 48%,#d5f0ff 100%)!important;
  border:1px solid #c9e8ff!important;
  border-radius:18px!important;
  overflow:hidden!important;
  position:relative!important;
}
.ai-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 12% 22%,rgba(255,255,255,.28),transparent 26%);
  pointer-events:none;
}
.ai-art{
  min-height:178px!important;
  height:100%!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  padding:6px 0 0 6px!important;
  background:transparent!important;
  position:relative!important;
  z-index:1!important;
}
.ai-art img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:left bottom!important;
}
.ai-copy{
  padding:14px 18px 14px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:10px!important;
  position:relative!important;
  z-index:1!important;
}
.ai-copy h2{
  margin:0!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:900!important;
  color:#0b2d6a!important;
  text-align:right!important;
}
.ai-bubble{
  position:relative!important;
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:18px!important;
  padding:14px 16px!important;
  min-height:68px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:none!important;
}
.ai-bubble::after{
  content:"";
  position:absolute;
  left:-11px;
  top:22px;
  width:18px;
  height:18px;
  background:rgba(255,255,255,.74);
  border-left:1px solid rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.55);
  transform:rotate(45deg);
  border-radius:0 0 0 5px;
}
.ai-bubble p{
  margin:0!important;
  font-size:11.5px!important;
  line-height:1.95!important;
  font-weight:700!important;
  color:#4d6796!important;
  text-align:center!important;
}
.ai-cta{
  align-self:flex-start!important;
  border:0!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#15c8ef 0%,#148cff 100%)!important;
  color:#fff!important;
  padding:13px 26px!important;
  min-width:142px!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:0 14px 24px rgba(20,142,255,.22)!important;
}
.ai-cta:hover{filter:brightness(1.03)}
.ai-cta:active{transform:translateY(1px)}

@media (max-width:980px){
  .ai-card{grid-template-columns:34% 66%!important;min-height:190px!important}
  .ai-art{min-height:190px!important}
}
@media (max-width:520px){
  .notification b{
    min-width:22px!important;
    height:22px!important;
    font-size:10.5px!important;
  }
  .ai-card{
    grid-template-columns:1fr!important;
    min-height:unset!important;
  }
  .ai-art{
    height:170px!important;
    min-height:170px!important;
    padding:8px 14px 0!important;
  }
  .ai-art img{
    object-position:center bottom!important;
  }
  .ai-copy{
    padding:12px!important;
    gap:8px!important;
  }
  .ai-copy h2{
    font-size:16px!important;
  }
  .ai-bubble{
    padding:13px 14px!important;
    min-height:60px!important;
  }
  .ai-bubble::after{
    left:24px!important;
    top:auto!important;
    bottom:-8px!important;
    transform:rotate(45deg)!important;
  }
  .ai-bubble p{
    font-size:10.5px!important;
    line-height:1.9!important;
  }
  .ai-cta{
    align-self:center!important;
    min-width:150px!important;
    padding:11px 22px!important;
  }
}


/* ===== V11: force larger alert badge + AI card closer to reference ===== */
.notification{
  overflow: visible !important;
}
.notification b{
  top:-10px !important;
  right:-9px !important;
  min-width:28px !important;
  width:28px !important;
  height:28px !important;
  border-radius:14px !important;
  border:3px solid #fff !important;
  background:linear-gradient(180deg,#ff6b7b 0%,#ff4f63 100%) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 10px 18px rgba(255,79,99,.35) !important;
  z-index:5 !important;
}

.bottom-row{
  align-items:stretch !important;
}
.bottom-row > .ai-card{
  min-height:192px !important;
}
.ai-card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:40% 60% !important;
  min-height:192px !important;
  background:linear-gradient(135deg,#7dc8ff 0%,#b7e2ff 52%,#d9f1ff 100%) !important;
  border:1px solid #cbe8ff !important;
  border-radius:18px !important;
  box-shadow:0 12px 28px rgba(41,122,190,.14) !important;
  overflow:hidden !important;
}
.ai-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 11% 18%, rgba(255,255,255,.30), transparent 24%);
  pointer-events:none;
}
.ai-art{
  position:relative !important;
  min-height:192px !important;
  height:100% !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  padding:0 0 0 6px !important;
  background:transparent !important;
  z-index:1 !important;
}
.ai-art img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:left bottom !important;
  border-radius:0 !important;
}
.ai-copy{
  position:relative !important;
  z-index:1 !important;
  padding:16px 18px 14px 14px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:10px !important;
}
.ai-copy h2{
  margin:0 !important;
  font-size:19px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  color:#0a2c68 !important;
  text-align:right !important;
}
.ai-bubble{
  position:relative !important;
  margin-top:2px !important;
  min-height:74px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:14px 16px !important;
}
.ai-bubble::after{
  content:'' !important;
  position:absolute !important;
  left:-10px !important;
  top:25px !important;
  width:18px !important;
  height:18px !important;
  background:rgba(255,255,255,.72) !important;
  border-left:1px solid rgba(255,255,255,.58) !important;
  border-bottom:1px solid rgba(255,255,255,.58) !important;
  transform:rotate(45deg) !important;
  border-radius:0 0 0 4px !important;
}
.ai-bubble p{
  margin:0 !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  line-height:2 !important;
  color:#506b98 !important;
  text-align:center !important;
}
.ai-cta{
  align-self:flex-start !important;
  margin-top:auto !important;
  min-width:160px !important;
  height:48px !important;
  padding:0 28px !important;
  border:0 !important;
  border-radius:19px !important;
  background:linear-gradient(180deg,#1ad1f0 0%,#168cff 100%) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:48px !important;
  text-align:center !important;
  box-shadow:0 14px 26px rgba(22,140,255,.24) !important;
}
.ai-cta:hover{filter:brightness(1.03) !important}
.ai-cta:active{transform:translateY(1px) !important}

@media (max-width:980px){
  .bottom-row > .ai-card,.ai-card{min-height:204px !important;grid-template-columns:38% 62% !important}
  .ai-art{min-height:204px !important}
}
@media (max-width:520px){
  .notification b{
    min-width:24px !important;
    width:24px !important;
    height:24px !important;
    border-radius:12px !important;
    font-size:11px !important;
    top:-8px !important;
    right:-7px !important;
  }
  .bottom-row > .ai-card,.ai-card{
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }
  .ai-art{
    min-height:178px !important;
    height:178px !important;
    padding:6px 12px 0 !important;
  }
  .ai-art img{
    object-position:center bottom !important;
  }
  .ai-copy{
    padding:12px 12px 14px !important;
    gap:8px !important;
  }
  .ai-copy h2{
    font-size:17px !important;
  }
  .ai-bubble{
    min-height:66px !important;
    padding:12px 14px !important;
  }
  .ai-bubble::after{
    left:22px !important;
    top:auto !important;
    bottom:-8px !important;
  }
  .ai-bubble p{
    font-size:11px !important;
    line-height:1.9 !important;
  }
  .ai-cta{
    align-self:center !important;
    min-width:152px !important;
    height:44px !important;
    line-height:44px !important;
    font-size:13px !important;
  }
}


/* ===== V12: AI left + larger bottom toast ===== */
.ai-card{
  direction:ltr !important;
  grid-template-columns:40% 60% !important;
}
.ai-art{
  grid-column:1 !important;
  direction:ltr !important;
  background:linear-gradient(135deg,#79c9ff 0%,#9fdcff 48%,#bfe8ff 100%) !important;
}
.ai-art img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:left center !important;
  background:transparent !important;
}
.ai-copy{
  grid-column:2 !important;
  direction:rtl !important;
  text-align:right !important;
  padding:16px 18px 14px 16px !important;
}
.ai-copy h2{
  text-align:right !important;
}
.ai-bubble{
  direction:rtl !important;
}
.ai-bubble::after{
  left:-10px !important;
  right:auto !important;
}
.ai-cta{
  align-self:flex-start !important;
  margin-left:auto !important;
  margin-right:0 !important;
}

.toast{
  left:28px !important;
  bottom:28px !important;
  min-width:280px !important;
  max-width:min(520px,calc(100vw - 40px)) !important;
  padding:15px 20px !important;
  border-radius:16px !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.8 !important;
  background:linear-gradient(135deg,#0b2f6f 0%,#16498f 100%) !important;
  box-shadow:0 18px 45px rgba(18,52,102,.30) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  text-align:right !important;
}
.toast.show{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}

@media (max-width:520px){
  .ai-card{
    grid-template-columns:1fr !important;
    direction:rtl !important;
  }
  .ai-art{
    grid-column:1 !important;
    grid-row:1 !important;
    height:175px !important;
    min-height:175px !important;
  }
  .ai-art img{
    object-fit:contain !important;
    object-position:center bottom !important;
  }
  .ai-copy{
    grid-column:1 !important;
    grid-row:2 !important;
    direction:rtl !important;
  }
  .toast{
    left:12px !important;
    right:12px !important;
    bottom:14px !important;
    min-width:0 !important;
    max-width:none !important;
    padding:14px 16px !important;
    font-size:12px !important;
  }
}


/* ===== V13: exact AI reference + visible task check ===== */

/* AI card — matched to the supplied reference */
.ai-card{
  direction:ltr !important;
  display:grid !important;
  grid-template-columns:36.5% 63.5% !important;
  min-height:160px !important;
  height:160px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  border:1px solid #cbe8fb !important;
  background:linear-gradient(135deg,#85cdf8 0%,#b8e1fb 50%,#d9efff 100%) !important;
  box-shadow:0 8px 22px rgba(66,135,192,.12) !important;
  position:relative !important;
}
.ai-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0)) !important;
  pointer-events:none !important;
}
.ai-art{
  grid-column:1 !important;
  min-height:160px !important;
  height:160px !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  background:transparent !important;
  position:relative !important;
  z-index:1 !important;
}
.ai-art img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:left center !important;
  background:transparent !important;
  border-radius:0 !important;
}
.ai-copy{
  grid-column:2 !important;
  min-width:0 !important;
  direction:rtl !important;
  text-align:right !important;
  padding:14px 18px 12px 8px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:8px !important;
  position:relative !important;
  z-index:2 !important;
}
.ai-copy h2{
  margin:0 !important;
  font-size:18px !important;
  font-weight:900 !important;
  line-height:1.25 !important;
  color:#082c68 !important;
  text-align:right !important;
}
.ai-bubble{
  position:relative !important;
  min-height:58px !important;
  border-radius:17px !important;
  padding:10px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(255,255,255,.64) !important;
  box-shadow:none !important;
}
.ai-bubble::after{
  content:"" !important;
  position:absolute !important;
  left:-9px !important;
  right:auto !important;
  top:20px !important;
  width:16px !important;
  height:16px !important;
  background:rgba(255,255,255,.74) !important;
  border-left:1px solid rgba(255,255,255,.64) !important;
  border-bottom:1px solid rgba(255,255,255,.64) !important;
  transform:rotate(45deg) !important;
  border-radius:0 0 0 4px !important;
}
.ai-bubble p{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.85 !important;
  font-weight:700 !important;
  color:#526b97 !important;
  text-align:center !important;
}
.ai-cta{
  align-self:center !important;
  margin:0 !important;
  min-width:132px !important;
  height:38px !important;
  padding:0 22px !important;
  border:0 !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#18c9ee 0%,#168cff 100%) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:38px !important;
  text-align:center !important;
  box-shadow:0 10px 20px rgba(20,142,255,.20) !important;
}

/* Tasks — unmistakable white check mark when selected */
.tasks input{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  border:2px solid #12c39a !important;
  border-radius:5px !important;
  background:#fff !important;
  position:relative !important;
  display:inline-block !important;
  cursor:pointer !important;
  transition:.16s ease !important;
}
.tasks input:checked{
  background:linear-gradient(135deg,#15caa0,#0fbf91) !important;
  border-color:#10b989 !important;
  box-shadow:0 3px 9px rgba(16,185,137,.20) !important;
}
.tasks input:checked::after{
  content:"" !important;
  position:absolute !important;
  width:5px !important;
  height:9px !important;
  left:4px !important;
  top:1px !important;
  border-right:2.4px solid #fff !important;
  border-bottom:2.4px solid #fff !important;
  transform:rotate(45deg) !important;
  transform-origin:center !important;
}
.tasks input:focus-visible{
  outline:3px solid rgba(22,196,156,.22) !important;
  outline-offset:2px !important;
}
.tasks label{
  gap:9px !important;
}
.tasks li:has(input:checked) label span{
  color:#6f86a8 !important;
}

@media (max-width:980px){
  .ai-card{
    grid-template-columns:36.5% 63.5% !important;
    min-height:160px !important;
    height:160px !important;
  }
  .ai-art{
    min-height:160px !important;
    height:160px !important;
  }
}
@media (max-width:520px){
  .ai-card{
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:auto !important;
    direction:rtl !important;
  }
  .ai-art{
    grid-column:1 !important;
    grid-row:1 !important;
    height:170px !important;
    min-height:170px !important;
  }
  .ai-art img{
    object-fit:cover !important;
    object-position:left center !important;
  }
  .ai-copy{
    grid-column:1 !important;
    grid-row:2 !important;
    padding:12px 12px 14px !important;
  }
  .ai-bubble::after{
    left:24px !important;
    top:auto !important;
    bottom:-8px !important;
  }
}


/* ===== V14: AI card closer to reference ===== */
.ai-card{
  direction:ltr !important;
  display:grid !important;
  grid-template-columns:146px 1fr !important;
  width:100% !important;
  min-height:160px !important;
  height:160px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  border:1px solid #d3e7f5 !important;
  background:linear-gradient(180deg,#c9e9ff 0%,#c8e7fb 100%) !important;
  box-shadow:none !important;
  position:relative !important;
}
.ai-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0)) !important;
  pointer-events:none !important;
}
.ai-art{
  grid-column:1 !important;
  width:146px !important;
  min-width:146px !important;
  height:160px !important;
  min-height:160px !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  background:linear-gradient(180deg,#79cbff 0%,#92d8ff 100%) !important;
  position:relative !important;
}
.ai-art img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:left center !important;
  background:transparent !important;
  border-radius:0 !important;
}
.ai-copy{
  grid-column:2 !important;
  direction:rtl !important;
  text-align:right !important;
  padding:14px 18px 12px 12px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:10px !important;
}
.ai-copy h2{
  margin:0 !important;
  font-size:17px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  color:#0a2c67 !important;
  letter-spacing:0 !important;
  text-align:right !important;
}
.ai-bubble{
  position:relative !important;
  align-self:stretch !important;
  margin:0 !important;
  min-height:58px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.66) !important;
  border:0 !important;
  box-shadow:none !important;
  padding:11px 15px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.ai-bubble::after{
  content:"" !important;
  position:absolute !important;
  left:-8px !important;
  top:22px !important;
  width:15px !important;
  height:15px !important;
  background:rgba(255,255,255,.66) !important;
  border:0 !important;
  transform:rotate(45deg) !important;
  border-radius:0 0 0 3px !important;
}
.ai-bubble p{
  margin:0 !important;
  font-size:11.4px !important;
  line-height:1.95 !important;
  font-weight:700 !important;
  color:#5f78a3 !important;
  text-align:center !important;
}
.ai-cta{
  align-self:center !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  margin-top:auto !important;
  min-width:142px !important;
  height:40px !important;
  padding:0 18px !important;
  border:0 !important;
  border-radius:17px !important;
  background:linear-gradient(180deg,#17c9eb 0%,#128dff 100%) !important;
  color:#fff !important;
  font-size:12.5px !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-shadow:0 10px 22px rgba(18,141,255,.22) !important;
}
.ai-cta span{
  display:inline-flex !important;
  align-items:center !important;
}
.ai-cta-icon{
  font-size:14px !important;
  line-height:1 !important;
  transform:translateY(-1px) !important;
}
.ai-cta:hover{filter:brightness(1.02) !important}
.ai-cta:active{transform:translateY(1px) !important}

/* make checked task tick very clear */
.tasks input:checked::after{
  content:"" !important;
  position:absolute !important;
  width:5px !important;
  height:10px !important;
  left:4px !important;
  top:0.5px !important;
  border-right:2.7px solid #fff !important;
  border-bottom:2.7px solid #fff !important;
  transform:rotate(45deg) !important;
}

@media (max-width:980px){
  .ai-card{
    grid-template-columns:136px 1fr !important;
  }
  .ai-art{
    width:136px !important;
    min-width:136px !important;
  }
}
@media (max-width:520px){
  .ai-card{
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:auto !important;
  }
  .ai-art{
    width:100% !important;
    min-width:0 !important;
    height:170px !important;
    min-height:170px !important;
  }
  .ai-copy{
    padding:12px !important;
    gap:8px !important;
  }
  .ai-bubble::after{
    left:24px !important;
    top:auto !important;
    bottom:-7px !important;
  }
}


/* ===== V15: transparent robot asset in AI card ===== */
.ai-card{
  background:linear-gradient(180deg,#caeaff 0%,#c4e6fc 100%) !important;
}
.ai-art{
  background:linear-gradient(180deg,#72c8ff 0%,#9ad9ff 100%) !important;
  overflow:hidden !important;
}
.ai-art img{
  object-fit:contain !important;
  object-position:left bottom !important;
  background:transparent !important;
}


/* ===== V17: use transparent robot asset ===== */
.ai-art img{
  background: transparent !important;
  object-fit: contain !important;
  object-position: left bottom !important;
}


/* ===== V18: unify AI card background and robot sizing ===== */
.ai-card{
  background: linear-gradient(180deg,#cae9ff 0%,#c7e6fb 100%) !important;
}
.ai-art{
  background: transparent !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  padding:0 0 0 8px !important;
  overflow:hidden !important;
}
.ai-art img{
  width:auto !important;
  max-width:100% !important;
  height:80% !important;
  max-height:80% !important;
  object-fit:contain !important;
  object-position:left bottom !important;
  background:transparent !important;
  align-self:flex-end !important;
}
@media (max-width:520px){
  .ai-art{
    justify-content:center !important;
    padding:0 !important;
  }
  .ai-art img{
    height:82% !important;
    max-height:82% !important;
  }
}


/* ===== V19: KPI layout + larger robot ===== */

/* KPI cards:
   right-top: icon
   right-bottom: chart
   left: title / value / percent */
.kpi{
  position:relative !important;
  display:block !important;
  height:108px !important;
  min-height:108px !important;
  padding:0 !important;
  overflow:visible !important;
}
.kpi-icon{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  width:42px !important;
  height:42px !important;
  border-radius:13px !important;
  z-index:3 !important;
}
.kpi-icon svg{
  width:24px !important;
  height:24px !important;
}
.kpi .spark{
  position:absolute !important;
  right:10px !important;
  bottom:8px !important;
  width:44% !important;
  height:34px !important;
  margin:0 !important;
  overflow:visible !important;
}
.kpi-copy{
  position:absolute !important;
  top:10px !important;
  left:12px !important;
  width:50% !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  text-align:right !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:3px !important;
}
.kpi-copy span{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  color:#46699f !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
.kpi-copy strong{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  color:#082d6c !important;
  font-size:20px !important;
  line-height:1.28 !important;
  font-weight:900 !important;
  letter-spacing:-.15px !important;
  white-space:nowrap !important;
}
.kpi-copy em{
  position:static !important;
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:#0caf7f !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  font-style:normal !important;
  direction:ltr !important;
}
.kpi *{
  font-weight:800;
}

/* Robot: twice the previous displayed size (80% -> about 160%) */
.ai-art{
  overflow:hidden !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  padding:0 !important;
}
.ai-art img{
  width:auto !important;
  max-width:none !important;
  height:160% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left bottom !important;
  transform:none !important;
  align-self:flex-end !important;
  margin-left:-6px !important;
  margin-bottom:-3px !important;
}

@media (max-width:1280px){
  .kpi{
    height:106px !important;
    min-height:106px !important;
  }
  .kpi-copy strong{font-size:19px !important}
  .kpi-copy span{font-size:11.5px !important}
  .kpi-copy em{font-size:11.5px !important}
}
@media (max-width:700px){
  .kpi{
    height:104px !important;
    min-height:104px !important;
  }
  .kpi-copy{
    left:10px !important;
    width:52% !important;
  }
  .kpi-copy strong{font-size:18px !important}
  .kpi-copy span{font-size:11px !important}
  .kpi-copy em{font-size:11px !important}
  .kpi .spark{
    width:42% !important;
    right:9px !important;
  }
}
@media (max-width:520px){
  .kpi{
    height:106px !important;
    min-height:106px !important;
  }
  .kpi-copy{
    top:10px !important;
    left:12px !important;
    width:52% !important;
  }
  .kpi-copy strong{font-size:18px !important}
  .kpi-copy span{font-size:11.5px !important}
  .kpi-copy em{font-size:11px !important}
  .kpi .spark{
    right:10px !important;
    bottom:8px !important;
    width:42% !important;
    height:34px !important;
  }
  .ai-art img{
    height:150% !important;
    margin-left:0 !important;
  }
}


/* ===== V20: KPI left alignment + larger values + smaller robot ===== */

/* KPI text block: flush to the left side of each card */
.kpi-copy{
  left:10px !important;
  right:auto !important;
  width:52% !important;
  align-items:flex-start !important;
  text-align:left !important;
}
.kpi-copy span,
.kpi-copy strong,
.kpi-copy em{
  text-align:left !important;
  align-self:flex-start !important;
}
.kpi-copy strong{
  font-size:25px !important;
  line-height:1.18 !important;
  font-weight:900 !important;
}
.kpi-copy span{
  font-size:12px !important;
  font-weight:900 !important;
}
.kpi-copy em{
  font-size:12px !important;
  font-weight:900 !important;
}

/* Robot reduced to half of V19 size */
.ai-art img{
  height:80% !important;
  max-height:80% !important;
  width:auto !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-bottom:0 !important;
}

@media (max-width:1280px){
  .kpi-copy strong{font-size:23px !important}
}
@media (max-width:700px){
  .kpi-copy{
    left:9px !important;
    width:54% !important;
  }
  .kpi-copy strong{font-size:22px !important}
}
@media (max-width:520px){
  .kpi-copy{
    left:10px !important;
    width:54% !important;
  }
  .kpi-copy strong{font-size:21px !important}
  .ai-art img{
    height:80% !important;
    max-height:80% !important;
  }
}


/* ===== V21: larger green percent + robot 95% height ===== */
.kpi-copy em{
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:#0aae7d !important;
}

.ai-art img{
  height:95% !important;
  max-height:95% !important;
  width:auto !important;
  max-width:100% !important;
}

@media (max-width:1280px){
  .kpi-copy em{
    font-size:14px !important;
  }
}
@media (max-width:700px){
  .kpi-copy em{
    font-size:13.5px !important;
  }
}
@media (max-width:520px){
  .kpi-copy em{
    font-size:13px !important;
  }
  .ai-art img{
    height:95% !important;
    max-height:95% !important;
  }
}


/* ===== V22: bolder AI text + larger bubble starting beside robot ===== */

/* AI text: stronger hierarchy */
.ai-copy h2{
  font-weight:900 !important;
  font-size:18px !important;
  color:#082c68 !important;
}
.ai-bubble p{
  font-weight:900 !important;
  font-size:12.5px !important;
  line-height:1.9 !important;
  color:#4f6996 !important;
}
.ai-cta{
  font-weight:900 !important;
}

/* White bubble starts right beside the robot and is larger */
.ai-copy{
  padding-left:0 !important;
  gap:8px !important;
}
.ai-bubble{
  width:calc(100% + 2px) !important;
  min-height:68px !important;
  margin-left:-1px !important;
  padding:13px 18px !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.78) !important;
}
.ai-bubble::after{
  left:-9px !important;
  top:24px !important;
  width:17px !important;
  height:17px !important;
  background:rgba(255,255,255,.78) !important;
}

@media (max-width:520px){
  .ai-copy{
    padding-left:12px !important;
  }
  .ai-bubble{
    width:100% !important;
    min-height:66px !important;
    margin-left:0 !important;
  }
  .ai-bubble p{
    font-size:11.5px !important;
  }
}