/* V21 reference layout. Load last to neutralize earlier desktop navigation rules. */
body[data-lf21]{--lf21-accent:#6940ee;--lf21-tint:#eee9ff;background:radial-gradient(ellipse at 90% 0,#f9efff,transparent 50%),#f5f6ff!important;color:#101638;font-family:Arial,Helvetica,sans-serif}
body[data-lf207=a1]{--lf21-accent:#d60014;--lf21-tint:#ffedf0;background:#fff6f6!important}
body[data-lf207=petrol]{--lf21-accent:#0066df;--lf21-tint:#e8f4ff;background:#f2f9ff!important}
body[data-lf21] #app .lf10-shell{display:block!important;width:100%!important;max-width:1220px!important;margin:0 auto!important;padding:0!important;min-height:100dvh}
body[data-lf21] #app .lf10Header{position:relative!important;inset:auto!important;transform:none!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:22px 24px 10px!important;z-index:20;border:0!important;background:transparent!important}
body[data-lf21] #app .lf10HeaderLine{display:flex!important;flex-direction:row!important;align-items:center!important;gap:16px!important;min-height:58px}
body[data-lf21] #app .lf20Profile{flex:1;min-width:0}
body[data-lf21] #app .headerProfile{padding:0!important;background:transparent!important;border:0!important;min-width:0;text-align:left;box-shadow:none!important}
body[data-lf21] #app .headerProfile strong{font-size:17px!important;letter-spacing:-.3px;color:#111738;white-space:normal}
body[data-lf21] #app .headerAvatar{width:52px!important;height:52px!important;font-size:26px!important;background:linear-gradient(135deg,#8b65ff,#5521c7)!important}
body[data-lf207=a1] .headerAvatar{background:linear-gradient(135deg,#ed1226,#a9000d)!important}
body[data-lf207=petrol] .headerAvatar{background:linear-gradient(135deg,#2ad6bd,#0061bb)!important}
body[data-lf21] #app .headerProfile p,body[data-lf21] #app .lf18Role{display:table;margin:5px 0 0!important;padding:4px 12px!important;border:1px solid #dfd3ff!important;border-radius:30px!important;font-size:12px!important;line-height:1.2;background:var(--lf21-tint)!important;color:var(--lf21-accent)!important;font-weight:700}
.lf21CurrentArea{display:block;margin-top:5px;color:#767a98;font-size:10px;line-height:1.3}
body[data-lf21] #app .lf10HeaderActions{display:flex!important;align-items:center!important;flex-direction:row!important;flex:none;gap:8px!important;margin-left:auto}
body[data-lf21] #app .lf10MessageStack{display:flex!important;flex-direction:row!important}
body[data-lf21] #app .lf10HeaderActions .lf19Assigned,body[data-lf21] #app .lf10MessengerBtn,body[data-lf21] #app .lf10HeaderActions [data-logout],body[data-lf21] #app .lf10HeaderActions [data-page=logout]{display:none!important}
body[data-lf21] #app .lf10HeaderActions button{width:43px!important;height:43px!important;min-width:43px!important;padding:10px!important}
body[data-lf21] #app .lf10Body{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;max-width:none!important;margin:0!important;padding:12px 24px 120px!important;display:block!important;min-height:calc(100dvh - 180px)}
body[data-lf21] #app .lf10Bottom{position:fixed!important;inset:auto 0 0!important;transform:none!important;width:100%!important;max-width:1220px!important;margin:0 auto!important;height:auto!important;min-height:72px;display:grid!important;grid-template-columns:repeat(var(--nav-count,5),minmax(0,1fr))!important;gap:4px!important;flex-direction:row!important;z-index:100!important;background:#fffffff5!important;padding:9px 15px max(10px,env(safe-area-inset-bottom))!important;border:1px solid #efedf9!important;border-radius:28px 28px 0 0!important;box-shadow:0 -8px 25px #37305709!important}
body[data-lf21] #app .lf10Bottom button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:100%!important;min-width:0!important;padding:7px 3px!important;margin:0!important;color:#555b7d;font-size:12px!important;border-radius:18px!important;border:0!important;background:transparent;min-height:55px;white-space:normal!important}
body[data-lf21] #app .lf10Bottom button.selected{background:var(--lf21-tint)!important;color:var(--lf21-accent)!important}
body[data-lf21] #app .lf10Bottom .sym,body[data-lf21] #app .lf206NavGlyph,body[data-lf21] #app .lfinsNavIcon{font-size:25px!important;height:27px;line-height:27px}
.lf21MenuButton{display:grid;place-items:center;flex:none;width:40px;height:46px;border:0!important;border-radius:12px;background:transparent!important;padding:8px;color:#131641;cursor:pointer}
.lf21MenuButton svg{width:25px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body[data-lf21] #app .lf207BranchRail[hidden]{display:none!important}
body.lf21DrawerOpen{overflow:hidden}
.lf21DrawerBackdrop{position:fixed;inset:0;z-index:199;border:0;background:#17123870;backdrop-filter:blur(5px);cursor:pointer}
body[data-lf21] #app .lf207BranchRail{position:fixed!important;inset:0 auto 0 0!important;z-index:200!important;width:min(390px,90vw)!important;height:100dvh!important;max-height:100dvh;overflow:auto;display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;padding:28px 20px!important;background:#fcfbff!important;border:0!important;border-radius:0 28px 28px 0!important;box-shadow:20px 0 80px #221a6040}
.lf21DrawerHead{display:flex;align-items:flex-start;gap:12px;margin-bottom:0}.lf21DrawerHead>div{flex:1}.lf21DrawerHead small{font-size:10px;letter-spacing:.18em;color:#8061c4;font-weight:800}.lf21DrawerHead h2{font-size:25px;line-height:1.15;margin:10px 0;color:#15133e;letter-spacing:-.7px}
body[data-lf21] #app .lf21DrawerHead button{width:35px!important;min-height:35px!important;height:35px!important;display:block!important;font-size:25px;background:#eee9fc;color:#6238d7;border:0;padding:0}
.lf21DrawerIntro{font-size:14px;line-height:1.5;color:#7a7794;margin:0 0 12px}
body[data-lf21] #app .lf207BranchRail>button{width:100%!important;min-height:82px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:15px;padding:14px!important;border:1px solid #eae5f7!important;background:#fff;border-radius:19px!important;text-align:left}
body[data-lf21] #app .lf207BranchRail>button>span{display:grid;place-items:center;width:43px;height:45px;flex:none;font-size:25px;background:#f0eaff;color:#7140e8;border-radius:13px}
body[data-lf21] #app .lf207BranchRail>button b{font-size:15px!important;line-height:1.3!important;color:#252142;display:block}
body[data-lf21] #app .lf207BranchRail>button b small{display:block;color:#827c97;font-size:11px;line-height:1.5;margin-top:4px;font-weight:400}
body[data-lf21] #app .lf207BranchRail>button.active{border-color:#9a7af2!important;background:#f1eaff!important;box-shadow:0 5px 18px #7148d012}
body[data-lf21] #app .lf207BranchRail>button.red>span{color:#d50018;background:#ffedf0}body[data-lf21] #app .lf207BranchRail>button.blue>span{color:#0875d9;background:#e9f7ff}body[data-lf21] #app .lf207BranchRail>button.gold>span{color:#dd9411;background:#fff7dd}
.lf21DrawerFoot{font-size:11px;line-height:1.7;color:#8e88a4;margin-top:auto;padding:18px 10px 0}
body[data-lf21] #app button:focus-visible,body[data-lf21] #app a:focus-visible{outline:3px solid #9c85f4;outline-offset:3px}
/* The plan's labels and number inputs stay inside their own cells. */
body[data-lf21] #app .lf19PlanGrid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;min-width:0}
body[data-lf21] #app .lf19PlanGrid>label{display:grid!important;grid-template-columns:minmax(60px,1fr) minmax(80px,110px);align-items:center;gap:5px;min-width:0;font-size:11px}
body[data-lf21] #app .lf19PlanGrid>label>div{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px;min-width:0}
body[data-lf21] #app .lf19PlanGrid input{min-width:0!important;width:100%!important;padding:8px 3px!important;min-height:35px;box-sizing:border-box}
body[data-lf21] #app .lf206StatPair{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch;gap:14px}
body[data-lf21] #app .lf206StatPair>*{min-width:0;overflow:hidden}
body[data-lf21] #app .lf206Hero,body[data-lf21] #app .lfinsHero{border-radius:25px;min-height:265px}
body[data-lf21] #app .lf206Hero-general{background:linear-gradient(112deg,#3424ac,#6540ee 62%,#f397cf)}
.lf206PetrolArt svg{display:block;width:100%;height:100%}
.lf21IncomeLine{width:100%;height:100px;display:block;margin-top:15px}.lf206Widget .lf19Bars{height:100px;margin-top:15px}
body[data-lf21] #app .lf206BrandArt.lf206PetrolArt{width:34%;height:95%;right:1%;bottom:0;opacity:.95}
body[data-lf21] #app .lf206HeroCopy{max-width:73%}
body[data-lf21] #app .lf206Hero h1{font-size:clamp(29px,4.5vw,49px)}
body[data-lf21] #app .lf206Hero .lf206HeroCopy>small{font-size:10px;letter-spacing:.19em}
body[data-lf21] #app .lf206Widget,body[data-lf21] #app .lf206Block,body[data-lf21] #app .lfinsPanel{border-radius:24px!important;background:#fff;border:1px solid #ffffff;box-shadow:0 8px 24px #45407905}
body[data-lf21] #app .lf206HeroCopy>p{font-size:16px;line-height:1.45}
body[data-lf21] #app .lfinsHero{padding:30px;background:linear-gradient(115deg,#3424aa,#7044ed 65%,#e18deb)}
body[data-lf21] #app .lfinsHero:after{display:none}
body[data-lf21] #app .lfinsHero h1{font-size:clamp(31px,5vw,47px);letter-spacing:-1px}
body[data-lf21] #app .lfinsHero>p{max-width:70%;line-height:1.5}
.lf21ShieldArt{position:absolute!important;right:0;bottom:4px;width:34%;height:90%;pointer-events:none;z-index:0!important}
body[data-lf21] #app .lfinsQuick{grid-template-columns:repeat(4,minmax(0,1fr))!important}
body[data-lf21] #app .lfinsQuick button{min-height:81px!important;padding:10px 3px;font-size:12px}
@media(min-width:900px){body[data-lf21] #app .lf10-shell{max-width:1100px!important}body[data-lf21] #app .lf10Header{padding-top:28px!important}body[data-lf21] #app .lf10Bottom{max-width:1052px!important}.lf206Hero{min-height:300px!important}.lf206HeroCopy{max-width:66%!important}}
@media(max-width:600px){body[data-lf21] #app .lf10Header{padding:17px 14px 8px!important}body[data-lf21] #app .lf10HeaderLine{gap:9px!important}body[data-lf21] #app .lf10Body{padding:10px 14px 115px!important}body[data-lf21] #app .headerAvatar{width:43px!important;height:43px!important;font-size:24px!important}body[data-lf21] #app .headerProfile{gap:9px!important}body[data-lf21] #app .headerProfile strong{font-size:14px!important}body[data-lf21] #app .headerProfile p{font-size:10px!important;padding:3px 8px!important}body[data-lf21] #app .lf10HeaderActions{gap:4px!important}body[data-lf21] #app .lf10HeaderActions button{width:35px!important;height:37px!important;min-width:35px!important;padding:7px!important}body[data-lf21] #app .lf20LangButton{display:none!important}.lf21MenuButton{width:27px;padding:1px}.lf21CurrentArea{font-size:9px}body[data-lf21] #app .lf206Hero{min-height:240px;padding:24px 20px}body[data-lf21] #app .lf206HeroCopy{max-width:88%}body[data-lf21] #app .lf206HeroCopy>p{font-size:13px;max-width:93%}body[data-lf21] #app .lf206Hero h1{font-size:29px}body[data-lf21] #app .lf206Hero .lf206HeroCopy>small{font-size:8px;letter-spacing:.15em}body[data-lf21] #app .lf206BrandArt,body[data-lf21] #app .lf206GraphArt{opacity:.26!important}body[data-lf21] #app .lf206Widget{padding:15px 12px}.lf206Widget h2{font-size:13px!important;line-height:1.3}body[data-lf21] #app .lf206StatPair{gap:9px}.lf206Widget>strong{font-size:24px!important}.lf206MoneyGrid{gap:9px}body[data-lf21] #app .lf206Search{border-radius:17px}.lf206Search input{font-size:12px}.lf206Search button{padding:11px 17px}.lf206Pills{gap:6px}.lf206Pills button{font-size:10px;padding:9px 11px}body[data-lf21] #app .lfinsHero{min-height:235px;padding:24px 20px}body[data-lf21] #app .lfinsHero p{font-size:13px}.lfinsExit{font-size:12px}.lfinsEyebrow{font-size:8px}.lfinsQuick button{font-size:10px!important;line-height:1.4}.lf206Daily .lf19PlanGrid>label{grid-template-columns:1fr 37px 37px!important;font-size:9px!important}body[data-lf21] #app .lf10Bottom{padding-left:7px!important;padding-right:7px!important}body[data-lf21] #app .lf10Bottom button{font-size:10px!important}}
@media(max-width:600px){body[data-lf21] #app .lf206Daily .lf19PlanGrid>label{grid-template-columns:1fr!important;font-size:10px!important;gap:4px}}
@media(max-width:360px){body[data-lf21] #app .lf206StatPair{grid-template-columns:1fr!important}.lf21CurrentArea{display:none}body[data-lf21] #app .headerProfile strong{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){body[data-lf21] #app *{scroll-behavior:auto!important;transition:none!important}}

body[data-lf21] #app .lf10Header .headerProfile{display:flex!important;min-width:0!important;padding-left:0!important}body[data-lf21] #app .lf10Bottom button{text-align:center!important;overflow:visible!important}body[data-lf21] #app .lf10Header .lf13Logout{font-size:0!important}body[data-lf21] #app .lf10Header .lf13Logout:after{content:"↗";font-size:22px}

.lf211Tree ul{list-style:none;padding-left:22px;border-left:2px solid #ddd4fa}.lf211Tree li{padding:8px 0}.lf211Tree summary{cursor:pointer;padding:12px;border-radius:12px;background:#f7f4ff}.lf211Tree small{margin-left:10px;color:#705e92}