/* The supplied brand artwork stays intact; the symbol is framed with CSS. */
:root{--line:#d9e4ed;--radius:10px;--muted:#65758a;background:#e9f0f6}
.shell{grid-template-columns:194px minmax(0,1fr);grid-template-rows:80px 1fr;background:linear-gradient(120deg,#c3d3df 0,#eff6fb 36%,#e2ebf3 100%)}
.masthead{grid-column:1/-1;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px;padding:0 24px 0 13px;overflow:hidden;background:linear-gradient(125deg,#a9bdce,#f7fbff 70%,#c3d8e9);border-bottom:1px solid #fff;box-shadow:0 2px 10px #31465d24}
.masthead:before{content:"";position:absolute;inset:0 51% 0 0;z-index:-1;clip-path:polygon(0 0,100% 0,87% 100%,0 100%);background:linear-gradient(135deg,#070d11 15%,#263139 64%,#0c141a 65%,#0c1319 90%,#53616b);border-bottom:1px solid #657582}
.masthead:after{content:"";position:absolute;top:-80px;left:46%;width:85px;height:200px;transform:skewX(-42deg);border-left:1px solid #ffffffa6;border-right:1px solid #ffffff75;background:#fff3;z-index:-1}
.masthead-brand{display:flex;align-items:center;gap:27px;min-width:0}
.brand-logo{display:block;width:302px;height:78px;object-fit:contain;filter:brightness(1.45) drop-shadow(0 1px 1px #ffffff30)}
.brand-tagline{font-size:13px;letter-spacing:.2em;color:#eef2f6;white-space:nowrap}
.masthead-right{display:flex;align-items:center;gap:20px;min-width:0}
.brand-promise{text-align:right;color:#344354;white-space:nowrap}
.brand-promise strong{display:block;font-size:13px;letter-spacing:.22em;font-weight:600}
.brand-promise small{display:block;font-size:10px;letter-spacing:.07em;margin-top:4px}
.masthead .demo-badge{font-size:11px;background:#ffffff9c;color:#695368;border:1px solid white;box-shadow:0 2px 5px #53698212}
.masthead .profile{border-left:1px solid #adbcc98a;padding-left:17px;white-space:nowrap}
.profile .avatar{color:#fb6fa9;background:linear-gradient(140deg,#485966,#141e27);border:1px solid #8ca0af;box-shadow:inset 0 1px #ffffff60}
.sidebar{grid-row:2;padding:17px 14px 16px;height:calc(100vh - 80px);top:0;background:linear-gradient(115deg,#070e13,#17232c 54%,#080f15);border-right:1px solid #81929f;box-shadow:inset -5px 0 14px #0004;color:#e1e8ee}
.nav-label{font-size:10px;letter-spacing:.13em;padding:11px 9px;color:#9caebb}
.nav button{font-size:12px;gap:11px;padding:13px 10px;border-radius:6px;border:1px solid transparent;min-height:46px}
.nav button:hover{background:#ffffff0b;border-color:#ffffff24}
.nav button.active{color:#fff;border-color:#f68fbb70;background:linear-gradient(108deg,#e71672b8,#8d315961 62%,#35404750);box-shadow:inset 3px 0 #ff3293,inset 0 1px #ff9bc870,0 0 17px #e919702c;text-shadow:0 0 10px #ffc2dc66}
.nav button.active svg{filter:drop-shadow(0 0 6px #ff92c7)}
.nav.secondary{padding-bottom:15px;border-bottom:1px solid #8596a63d}
.sidebar-bottom{padding-top:25px}
.storage{position:relative;overflow:hidden;isolation:isolate;padding:25px 13px 18px;background:linear-gradient(145deg,#111b24,#0b1015 65%,#26333c);border-color:#576874;border-radius:8px}
.storage:before{content:"";position:absolute;z-index:-1;width:30px;height:250px;right:24px;top:-62px;transform:rotate(40deg);background:linear-gradient(90deg,#780733,#f7358b 45%,#ffb6d4 48%,#8c1446 55%,#50122e);box-shadow:0 0 20px #f0226b55;opacity:.85}
.storage>svg{color:#ff8bbc}
.storage p{color:#becad3;font-size:11px}
.storage .text-btn{color:#ffa6ce;font-size:11px}
.sidebar-footer{display:block;margin:15px 0 0}
.sidebar-footer img{width:157px;height:auto;display:block;filter:brightness(1.7)}
.sidebar-footer small{display:block;font-size:8px;color:#b0bfcb;letter-spacing:.08em;margin-top:5px;text-align:center}
.main{grid-row:2}
.page{padding:14px 17px 18px}
.page-heading{margin-bottom:13px;gap:14px;min-height:44px}
.page-heading h1{font-size:20px;letter-spacing:.08em}
.page-heading .eyebrow{display:none}
.page-heading p{font-size:11px;margin-top:5px;color:#697b8c}
.month-control,.button{border-color:#c4d3e0;box-shadow:inset 0 1px #fff}
.button.primary{background:linear-gradient(170deg,#ff469a,#ef0f70 50%,#cb0654);border:1px solid #ff9fc6;box-shadow:inset 0 1px 2px #fff9,0 2px 7px #e9197040;outline:1px solid #fff;outline-offset:2px}
.button.primary:hover{background:linear-gradient(170deg,#ff63a9,#ef177b 50%,#b80751)}
.button.primary:focus-visible{outline:3px solid #9f1b61;outline-offset:3px}
.stats{gap:12px;margin-bottom:13px;padding:9px;border:1px solid #fff;border-radius:13px;background:linear-gradient(125deg,#ffffff75,#c0cfdd90 55%,#ebd9e3a6 76%,#8497aa80);box-shadow:0 3px 8px #324c6619,inset 0 0 0 1px #acbdcb}
.stat{min-height:106px;padding:15px 19px;gap:16px;border:1px solid #8c9ca8;color:#fff;background:linear-gradient(125deg,#41515e,#18232b 40%,#596978 76%,#c0cbd5);box-shadow:inset 0 0 0 3px #dde9f233,inset 0 1px 2px #fff,0 2px 5px #243d4f4d;border-radius:10px;text-shadow:0 1px 2px #0003}
.stat:after{content:"";position:absolute;width:105px;top:-40px;bottom:-40px;right:5%;transform:skewX(-39deg);background:linear-gradient(90deg,transparent,#fff2,transparent);pointer-events:none}
.stat:nth-child(2){background:linear-gradient(125deg,#8694a2,#526273 45%,#a4b2c2 80%,#d5dde5)}
.stat:nth-child(3){background:linear-gradient(125deg,#8f9ba9,#697585 44%,#a5aebc 74%,#d6a5bc)}
.stat:nth-child(4){color:#253344;background:linear-gradient(130deg,#fff,#e5e9f1 55%,#fbd4e4);text-shadow:none;border-color:#d1dce7}
.stat:hover{border-color:#f684b7;box-shadow:inset 0 0 0 3px #ffffff40,0 2px 10px #e9197033}
.stat .stat-icon{align-self:flex-start;display:flex;align-items:center;justify-content:center;padding:0;width:54px;height:60px;flex-shrink:0;background:linear-gradient(140deg,#71818b,#25333e);color:#fff;border:1px solid #c4d3dd55;border-radius:9px;box-shadow:inset 0 1px #e4f3ff60,0 6px 12px #0003}
.stat .stat-icon svg{width:29px;height:29px}
.stat:first-child .stat-icon{color:#ff74ae;background:linear-gradient(140deg,#3d505b,#142028)}
.stat:last-child .stat-icon{color:#fff;background:linear-gradient(140deg,#687584,#27313e)}
.stat label,.stat p,.stat strong small{color:#edf4fc;position:relative;z-index:1}
.stat label{font-size:12px;font-weight:600;letter-spacing:.06em}
.stat strong{font-size:29px;line-height:1.2;margin-top:3px}
.stat p{margin-top:6px;font-size:10px}
.stat:last-child label,.stat:last-child p,.stat:last-child strong small{color:#46566e}
.stat .corner-icon{color:#ff8dbb;top:21px;right:10px}
.workflow{display:block;isolation:isolate;padding:18px 23px 20px;margin-bottom:17px;min-height:202px;overflow:hidden;border:1px solid #8e9fab;background:linear-gradient(128deg,#071015,#19232c 48%,#0e151c 78%,#3f172b);box-shadow:inset 0 0 0 2px #ffffff16,inset 0 1px 2px #c3d9e6,0 3px 7px #39567133;color:#f8fbff}
.workflow:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(133deg,transparent 60%,#96a9ba19 60.1%,transparent 70%),linear-gradient(132deg,transparent 72%,#0007 72.1%,#0007 77%,transparent 77.1%)}
.workflow:after{content:"";position:absolute;width:3px;height:440px;right:10%;top:-140px;transform:rotate(43deg);background:#ff93c0;box-shadow:0 0 5px 1px #ff4d9f,0 0 30px 10px #ff087a55;opacity:.9;z-index:-1}
.workflow-copy{display:flex;align-items:baseline;gap:18px;position:relative;z-index:2;min-width:0;padding-right:120px}
.workflow-copy h2{font-size:18px;font-weight:650;letter-spacing:.07em;white-space:nowrap}
.workflow-copy p{font-size:11px;color:#c3d0da;line-height:1.8;margin:0}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;width:77%;min-width:0;margin:19px 0 0;padding:0;list-style:none;align-items:start}
.step{display:block;position:relative;white-space:normal;min-width:0;font-size:12px}
.step:not(:last-child):after{content:none}
.step-icon{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:54px;margin:0 0 10px 23px;border:1px solid #627781;border-radius:10px;background:linear-gradient(140deg,#43515b70,#263139 55%,#121b21);box-shadow:inset 0 1px #c2e1f230,0 5px 13px #0005}
.step-icon>svg{width:30px;height:30px;filter:drop-shadow(0 0 4px #fff2)}
.step:nth-child(-n+2) .step-icon{color:#ff81b7;box-shadow:inset 0 1px #ffa7d130,0 0 18px #ed1c7520}
.step:first-child .step-icon svg{filter:drop-shadow(0 0 5px #f3227a88)}
.step:not(:last-child) .step-icon:after{content:none}
.step-connector{position:absolute;left:87px;right:-7px;top:26px;height:1px;background:linear-gradient(90deg,#81939f55,#be7899,#ff78b1);display:flex;justify-content:center;align-items:center;color:#ff9bc3;pointer-events:none}
.step-connector:before{content:"";width:3px;height:4px;background:#ffe2ee;border-radius:50%;box-shadow:0 0 5px 2px #ff2487}
.step-connector svg{position:absolute;right:-2px;width:13px;height:13px}
.step:last-child .step-connector{display:none}
.step-heading{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;letter-spacing:.03em;white-space:nowrap}
.step .step-number{width:22px;height:22px;flex-shrink:0;border-radius:50%;border:1px solid #ffadd2;color:#a1074b;background:radial-gradient(circle at 35% 25%,#fff,#ffb2d1 45%,#f14f98);box-shadow:0 0 12px #f5227b88,inset 0 1px #fff;font-size:12px;font-weight:700}
.step p{padding-left:31px;margin-top:5px;font-size:10px;line-height:1.65;color:#c6d2dc}
.workflow-art{position:absolute;z-index:0;right:0;top:0;width:24%;height:100%;pointer-events:none;overflow:hidden;background:linear-gradient(135deg,transparent 23%,#0004 23.2%,#0001 54%,#ff318914 54.2%)}
.workflow-art:before{content:"";position:absolute;right:-14px;top:-70px;height:380px;width:30px;transform:rotate(43deg);border-left:1px solid #ffabd0;border-right:1px solid #ff72ab;background:linear-gradient(90deg,#f5197270,#77113410);box-shadow:0 0 20px #fa348b40}
.workflow-motto{position:absolute;left:9%;top:55px;z-index:2;font-family:"Segoe Print","Comic Sans MS",cursive;font-weight:400;font-style:italic;font-size:clamp(16px,1.65vw,29px);line-height:1.3;transform:rotate(-18deg);color:#ff75b0;text-shadow:0 0 10px #f3157570}
.brand-symbol{position:absolute;right:-8px;bottom:-26px;width:175px;height:214px;overflow:hidden;transform:rotate(8deg);filter:drop-shadow(-10px 8px 12px #0008)}
.brand-symbol img{display:block;position:absolute;width:820px;max-width:none;height:auto;left:-48px;top:-13px;filter:brightness(1.2)}
.section-title{margin-bottom:9px}.section-title h2{font-size:14px}.section-title p{color:#60738a;font-size:11px}
.workspace{gap:10px;grid-template-columns:minmax(245px,.9fr) minmax(290px,1fr) minmax(340px,1.12fr)}
.panel{border:1px solid #d3e2ee;box-shadow:inset 0 0 0 1px #fff,0 2px 6px #4566820c;background:linear-gradient(120deg,#fff,#f9fcff 80%,#edf4fa)}
.panel-header,.result-tabs{height:48px;background:linear-gradient(120deg,#fff,#edf4f9);border-bottom-color:#d6e2eb}
.panel-header{padding:0 15px}.panel-header h2 svg{color:#f22a7b;filter:drop-shadow(0 0 4px #ff90bd44)}
.mail-tools{padding:10px 10px 0}.search{background:#fff;border-color:#d7e3ed}
.filter-tabs{gap:5px;margin:8px 0;border:0;overflow:visible}.filter-tabs button{padding:6px 7px;flex:1;border:1px solid #e2e8ee;border-radius:5px;color:#586778;font-size:10px;background:linear-gradient(#f9fbfd,#e7edf3)}
.filter-tabs button.active{background:linear-gradient(150deg,#ff57a0,#eb096b);border-color:#ffabd0;color:#fff;box-shadow:inset 0 1px #ffffff70,0 1px 6px #f4237a33}
.mail-item{padding:14px 12px;border-color:#e2ebf2}.mail-item.selected{background:linear-gradient(120deg,#ffd8e9,#fff5fa);box-shadow:inset 0 0 0 1px #f9b8d4}
.mail-item .avatar,.sender .avatar{border-radius:50%;background:linear-gradient(140deg,#a7bdca,#496779);color:#fff;border:1px solid #fff;box-shadow:0 1px 2px #41617530}
.mail-info .meta b{color:#3a4b60}.mail-info h3{color:#2c3a4e}.mail-info p,.mail-info .meta{color:#6f8093}
.mail-content{padding:17px 19px}.mail-subject{font-size:15px}.mail-body{color:#384b61;font-size:12px;line-height:1.9}
.extracted{border:1px solid #dfebf3;border-radius:4px;overflow:hidden}.field-row{padding:10px;gap:10px;border-bottom-color:#e1eaf2}.extracted .field-row:nth-child(odd){background:#edf3f8a6}.field-row dt{color:#607289}.field-row dd{color:#34485e}
.result-tabs{padding:0 14px;gap:15px}.result-tabs button{font-size:12px}.result-content{padding:15px}.bottom-bar{color:#677c91;font-size:10px}
@media(min-width:1700px){.page{padding:15px 21px}.workspace{grid-template-columns:minmax(290px,.9fr) minmax(360px,1fr) minmax(380px,1.12fr)}}
@media(max-width:1350px){.masthead{gap:12px}.brand-logo{width:270px}.brand-tagline{font-size:11px;letter-spacing:.08em}.brand-promise{display:none}.masthead:before{right:42%}.masthead:after{left:52%}.sidebar{padding-left:10px;padding-right:10px}.stat{padding:15px 12px;gap:11px}.stat .stat-icon{width:43px;height:51px}.stat p{font-size:9px}.workflow-copy{display:block;padding-right:190px}.workflow-copy h2{font-size:16px}.workflow-copy p{font-size:10px;margin-top:5px}.steps{width:79%;gap:8px}.workflow-art{width:22%}.workflow-motto{font-size:20px;left:0;top:45px}.brand-symbol{right:-15px;width:145px;height:175px;bottom:-16px}.brand-symbol img{width:680px;left:-39px;top:-11px}.step-heading{font-size:11px;gap:6px}.step p{padding-left:28px;font-size:10px}.step-icon{margin-left:22px}.workspace{grid-template-columns:265px minmax(300px,1fr)}.results{grid-column:1/-1}.step-connector{left:84px}}
@media(max-width:1050px){.brand-tagline{display:none}.masthead:before{right:58%}.masthead:after{left:33%}.masthead .profile{display:none}.workflow{padding:17px}.steps{width:100%;position:relative;z-index:1}.workflow-copy{min-height:62px;padding-right:180px}.workflow-art{height:107px;width:180px}.workflow-motto{top:21px;font-size:18px}.brand-symbol{width:91px;height:127px;bottom:-22px;right:0}.brand-symbol img{width:440px;left:-25px;top:-7px}.stat p{max-width:105px;line-height:1.6}.stat label{font-size:11px}.stat{gap:9px}.stat .stat-icon{width:37px;height:47px}.stat .stat-icon svg{width:24px}}
@media(max-width:950px){.shell{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding:10px 9px}.nav{margin-top:8px;gap:8px}.nav button{padding:12px 8px;justify-content:center}.nav.secondary{margin-top:23px;border:0}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-height:96px;padding:15px 18px}.stat p{max-width:none}.stat .stat-icon{width:47px;height:54px}.stat label{font-size:12px}.workspace{grid-template-columns:230px minmax(0,1fr)}.workflow-copy h2{font-size:15px;white-space:normal}.workflow-copy p{max-width:350px}.page-heading h1{font-size:18px}.page-heading p{font-size:10px}}
@media(max-width:680px){.shell{display:block}.masthead{height:78px;padding:0 13px;gap:8px}.masthead:before{right:29%;clip-path:polygon(0 0,100% 0,91% 100%,0 100%)}.masthead:after{left:54%;width:40px}.brand-logo{width:225px;height:73px}.masthead-right{display:block}.masthead .demo-badge{max-width:121px;padding:5px 6px;line-height:1.5;font-size:9px}.masthead .demo-badge svg{width:14px}.sidebar{height:auto;position:relative;padding:6px 12px 8px;border-bottom:1px solid #8b9ba7;border-right:0}.nav{margin:0;gap:5px}.nav button{min-height:43px;padding:9px 5px}.nav button>span:not(.count){display:inline;font-size:10px}.nav button{gap:5px}.nav button svg{width:16px;height:16px}.nav.secondary{display:flex;margin-top:5px;gap:7px;padding:0}.nav.secondary button{min-height:26px;padding:5px;font-size:10px;background:#ffffff08}.page{padding:14px 12px}.page-heading{display:block;margin-bottom:14px}.page-heading h1{font-size:21px}.page-heading p{font-size:11px}.page-heading .actions{margin-top:13px;gap:10px;justify-content:flex-start}.stats{gap:8px;padding:7px;margin-bottom:12px}.stat{gap:9px;padding:13px 9px;min-height:104px}.stat .stat-icon{width:34px;height:42px}.stat .stat-icon svg{width:22px;height:22px}.stat label{font-size:10px;letter-spacing:0}.stat strong{font-size:27px}.stat p{font-size:9px;line-height:1.6;max-width:110px}.workflow{min-height:0;padding:18px 15px}.workflow-copy{min-height:84px;padding-right:110px}.workflow-copy h2{font-size:16px;line-height:1.6;max-width:285px}.workflow-copy p{font-size:10px;margin-top:7px}.workflow-art{width:122px;height:121px}.workflow-motto{font-size:15px;top:12px;left:6px}.brand-symbol{right:-6px;bottom:-15px;width:84px;height:107px}.brand-symbol img{width:400px;left:-24px;top:-6px}.steps{width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin-top:24px}.step{padding-left:0;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:9px}.step-icon{grid-column:1;grid-row:1/3;width:39px;height:42px;margin:0}.step-icon>svg{width:23px;height:23px}.step-heading{grid-column:2;font-size:11px;gap:5px;white-space:normal;line-height:1.5}.step .step-number{width:18px;height:18px;font-size:10px}.step p{grid-column:2;padding:0;margin-top:5px;font-size:10px}.step:not(:last-child) .step-icon:after,.step-connector{display:none}.step:last-child{grid-column:1/-1;max-width:210px}.workflow:after{right:25px;opacity:.5}.workspace{grid-template-columns:1fr}.results{grid-column:auto}.panel-header,.result-tabs{height:49px}.mail-content{padding:20px}.mail-body{font-size:13px}.section-title p{display:block;font-size:10px}.section-title h2{font-size:13px}.filter-tabs button{font-size:11px}.bottom-bar{font-size:10px}.brand-promise{display:none}}
@media(max-width:380px){.brand-logo{width:195px}.masthead .demo-badge{max-width:111px;font-size:8px}.nav button>span:not(.count){font-size:9px}.nav button svg{width:14px}.stat{padding:12px 7px;gap:6px}.stat .stat-icon{width:29px;height:38px}.page-heading .actions{gap:8px}.actions>.button{padding:10px 11px}.month-control input{width:119px}.workflow-copy{padding-right:90px}.workflow-art{width:104px}.steps{column-gap:10px}.step{grid-template-columns:32px 1fr;column-gap:7px}.step-icon{width:32px;height:38px}.step-heading{font-size:10px}.step p{font-size:10px}}

@media(max-width:680px){.nav:not(.secondary) button{flex-direction:column;gap:4px;min-height:55px}.nav:not(.secondary) button>span:not(.count){white-space:nowrap;font-size:10px}.nav:not(.secondary) button svg{width:18px;height:18px}}