500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--graphite:#353535;--graphite-deep:#2d2d2d;--canvas:#fff;--page:#f8f8f8;--ink:#171717;--muted:#888;--line:#ececec;--soft:#f5f5f5;--accent:#a4b8ff;--lavender:#edf0ff;--peach:#ffe0c7;--pink:#fff0f0;--green:#47745b;--green-soft:#e9f1e9;--radius:23px;--shadow:0 8px 30px rgba(0,0,0,.035)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--graphite);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a4b8ff88;outline-offset:2px}.app-shell{min-height:100vh;background:var(--graphite);padding:0 0 24px}.sidebar{position:fixed;inset:0 auto 0 0;width:132px;padding:82px 0 22px;background:var(--graphite);display:flex;flex-direction:column;align-items:center;z-index:10}.sidebar .brand{display:none}.workspace-label{display:none}.nav-list{display:grid;gap:9px;width:100%;padding:0 0 0 37px}.nav-item{width:100%;height:55px;display:flex;align-items:center;justify-content:center;gap:0;border:0;background:transparent;text-align:center;color:#c8c8c8;padding:10px 8px;border-radius:35px 0 0 35px;font-weight:600;transition:background .18s,color .18s}.nav-item:hover{background:#414141;color:white}.nav-item.active{background:#fff;color:#343434;box-shadow:none}.nav-icon{width:24px;text-align:center;font-size:20px;font-weight:400;line-height:1}.nav-label{display:none}.sidebar-bottom{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 5px;border-top:1px solid #ffffff15;color:#fff}.sidebar-bottom strong{display:none}.sidebar-bottom small{font-size:8px;line-height:1.5;color:#bdbdbd;text-align:center}.status-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#d6a34c;align-self:flex-start;margin-top:4px}.main-area{margin-left:132px;min-height:100vh;display:flex;flex-direction:column;background:var(--graphite);padding:0 38px 0 0}.topbar{height:68px;flex:0 0 68px;display:flex;align-items:center;gap:28px;padding:0 30px;background:var(--graphite);position:sticky;top:0;z-index:8;color:#fff}.topbar-brand{display:flex;align-items:center;gap:10px;min-width:115px;color:#fff;text-decoration:none;font:600 22px Manrope,sans-serif;letter-spacing:-.7px}.topbar-brand .brand-mark{display:none}.global-search{height:34px;width:min(255px,32vw);border-radius:999px;background:#fff;display:flex;align-items:center;gap:9px;padding:0 13px;color:#9a9a9a}.global-search>span{font-size:23px;line-height:1;transform:rotate(-20deg)}.global-search input{border:0;outline:0;background:transparent;width:100%;min-width:0;color:#242424;font-size:11px}.global-search input::placeholder{color:#aaa}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:17px}.top-icon{position:relative;border:0;background:transparent;color:#d5d5d5;font-size:21px;padding:4px}.notification-icon i{position:absolute;width:6px;height:6px;background:#e8a05c;border:1px solid var(--graphite);border-radius:50%;right:1px;top:2px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#dedede;color:#343434;font-weight:700;font-size:12px;border:2px solid #ffffff25}.mobile-menu{display:none;border:0;background:transparent;font-size:21px;color:#fff}.breadcrumb{display:none}.demo-pill{display:none}.workspace-canvas{background:#fff;border-radius:55px 55px 55px 55px;min-height:calc(100vh - 92px);flex:1;overflow:hidden}.page-content{padding:37px 40px 36px;max-width:1600px;width:100%;margin:0 auto;animation:rise .24s ease}@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:26px}.eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#999;margin-bottom:8px}.page-heading h1{font:600 clamp(24px,2.4vw,32px) Manrope,sans-serif;letter-spacing:-1px;line-height:1.15;margin:0}.page-heading p{margin:8px 0 0;color:#858585;font-size:12px;line-height:1.6}.heading-actions{display:flex;gap:9px;align-items:center}.button{border:1px solid #e8e8e8;background:#fff;border-radius:12px;padding:10px 14px;font-weight:600;font-size:11px;color:#262626;transition:transform .15s,box-shadow .15s,border-color .15s;white-space:nowrap}.button:hover{transform:translateY(-1px);border-color:#d6d6d6;box-shadow:var(--shadow)}.button.primary{background:#333;color:white;border-color:#333}.button.primary:hover{background:#111}.button:disabled{opacity:.5;cursor:not-allowed}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.metric-card,.panel{background:#fff;border:1px solid #ededed;border-radius:19px;box-shadow:none}.metric-card{padding:17px 17px 15px;min-height:119px;position:relative;overflow:hidden;transition:box-shadow .18s,transform .18s}.metric-card:hover{box-shadow:0 8px 24px #00000008;transform:translateY(-1px)}.metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#888;font-size:10px;font-weight:500}.metric-icon{width:29px;height:29px;flex:0 0 29px;display:grid;place-items:center;background:#f5f5f5;border-radius:10px;color:#555;font-size:14px}.metric-value{font:600 clamp(21px,1.9vw,27px) Manrope,sans-serif;letter-spacing:-.8px;margin:15px 0 6px;white-space:nowrap}.metric-foot{font-size:9px;color:#9a9a9a;line-height:1.4}.metric-foot strong{color:var(--green)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.8fr);gap:20px}.panel{padding:19px;min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.panel-heading h2{font:600 13px Manrope,sans-serif;letter-spacing:-.2px;margin:0}.panel-heading p{margin:5px 0 0;color:#999;font-size:10px;line-height:1.45}.text-link{border:0;background:transparent;color:#aaa;font-size:10px;font-weight:600;padding:5px;white-space:nowrap}.text-link:hover{color:#222}.table-wrap{overflow:auto;scrollbar-width:thin;scrollbar-color:#ddd transparent}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;padding:10px 9px;font-size:8px;text-transform:uppercase;letter-spacing:.9px;color:#aaa;font-weight:600;border-bottom:1px solid #eee}td{padding:13px 9px;border-bottom:1px solid #f0f0f0;font-size:10px;color:#555}tbody tr{transition:background .15s}tbody tr:hover{background:#fafafa}tbody tr:last-child td{border-bottom:0}.product-cell{display:flex;align-items:center;gap:9px;font-weight:500;color:#262626}.product-thumb{width:31px;height:31px;flex:0 0 31px;border-radius:10px;background:#f4f4f4;display:grid;place-items:center;font-size:15px;color:#666}.muted{color:#888}.status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:#edf5ee;color:#52745a;font-size:9px;font-weight:600}.status:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.status.pending{background:#fbf3e3;color:#9a7736}.branch-list{display:grid;gap:1px}.branch-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f0f0f0}.branch-row:last-child{border:0}.branch-mark{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:#f2f2f2;color:#555;font-weight:600;font-size:10px}.branch-info{flex:1;min-width:0}.branch-info strong,.branch-info small{display:block}.branch-info strong{font-size:10px;color:#333}.branch-info small{color:#999;font-size:9px;margin-top:4px}.branch-amount{text-align:right;font-weight:600;font-size:10px;color:#333}.branch-amount small{display:block;color:#aaa;font-weight:400;font-size:8px;margin-top:4px}.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:grid;gap:7px}.field label{font-size:10px;color:#777;font-weight:600}.field input,.field select{width:100%;border:1px solid #e6e6e6;border-radius:10px;padding:11px 12px;background:#fff;color:#222;outline:none;transition:border-color .15s,box-shadow .15s}.field input:focus,.field select:focus{border-color:#a4b8ff;box-shadow:0 0 0 3px #a4b8ff22}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.empty-note{padding:25px;text-align:center;color:#999;font-size:11px}.notice{display:flex;gap:11px;padding:12px 14px;border:1px solid #e7eaff;background:#f5f6ff;border-radius:13px;color:#777d9c;font-size:10px;line-height:1.55;margin-bottom:16px}.notice>span{color:#8198f2;font-size:15px}.notice strong{display:block;margin-bottom:3px;color:#555d85}.report-bars{display:grid;gap:15px}.bar-item{display:grid;gap:7px}.bar-label{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#777}.bar-label strong{color:#333}.bar-track{height:7px;background:#f0f0f0;border-radius:99px;overflow:hidden}.bar-fill{height:100%;background:#a4b8ff;border-radius:99px}.app-footer{padding:12px 0 0;font-size:8px;letter-spacing:1px;color:#aaa;font-weight:600}.app-footer>span{margin:0 5px}.footer-note{letter-spacing:0;font-weight:400;font-size:9px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#333;color:#fff;padding:12px 17px;border-radius:12px;font-size:11px;box-shadow:0 10px 35px #0002;transition:.2s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}
/* Dashboard's reference-inspired asymmetric layout */
.overview-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(285px,.9fr);gap:24px;align-items:start}.overview-main{min-width:0}.overview-side{display:grid;gap:18px}.overview-main .metrics{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px}.overview-main .dashboard-grid{grid-template-columns:1fr}.overview-side .panel{padding:22px;border-radius:21px}.spend-panel{min-height:350px}.spend-ring{width:132px;height:132px;margin:10px auto 22px;position:relative;display:grid;place-items:center}.spend-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.spend-ring circle{fill:none;stroke-width:10}.spend-ring .ring-track{stroke:#f0f0f0}.spend-ring .ring-progress{stroke:#a4b8ff;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:70}.spend-ring-center{text-align:center;z-index:1}.spend-ring-center small{display:block;color:#aaa;font-size:9px;margin-bottom:7px}.spend-ring-center strong{font:600 16px Manrope,sans-serif;white-space:nowrap}.spend-meta{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:0 0 22px}.spend-meta small{display:block;color:#aaa;font-size:9px;margin-bottom:7px}.spend-meta strong{font-size:13px;font-weight:600}.mini-summary{display:grid;gap:10px}.mini-summary-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 15px;border-radius:14px;background:var(--lavender)}.mini-summary-row.peach{background:var(--peach)}.mini-summary-row.pink{background:var(--pink)}.mini-summary-row strong,.mini-summary-row small{display:block}.mini-summary-row strong{font-size:10px;font-weight:600;margin-bottom:5px}.mini-summary-row small{font-size:9px;color:#999}.mini-summary-row .summary-value{font-size:10px;color:#777}.promo-panel{min-height:116px;padding:19px 20px!important;background:var(--peach)!important;border-color:var(--peach)!important;overflow:hidden;position:relative}.promo-panel h3{font:600 15px Manrope,sans-serif;margin:0 0 8px;max-width:190px;line-height:1.4}.promo-panel p{margin:0;color:#9d8878;font-size:10px;line-height:1.5;max-width:165px}.promo-spark{position:absolute;right:18px;bottom:5px;font-size:47px;opacity:.65;transform:rotate(-15deg)}
@media(min-width:1450px){.page-content{padding:37px 50px 30px}.overview-layout{gap:26px}.overview-side .panel{padding:24px}.metrics{gap:14px}}
@media(max-width:1100px){.sidebar{width:86px}.nav-list{padding-left:19px}.main-area{margin-left:86px;padding-right:20px}.topbar{padding:0 24px}.page-content{padding:28px 25px}.overview-layout{grid-template-columns:minmax(0,1.25fr) minmax(240px,.85fr);gap:15px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}.section-grid{grid-template-columns:1fr}.spend-ring{width:112px;height:112px}}
@media(max-width:700px){.app-shell{padding:0}.sidebar{transform:translateX(-110%);width:245px;padding-top:74px;align-items:stretch;box-shadow:10px 0 30px #0002;transition:transform .25s}.sidebar.open{transform:translateX(0)}.nav-list{padding:0 14px;gap:5px}.nav-item{justify-content:flex-start;gap:12px;padding:11px 13px;border-radius:12px;font-size:12px;color:#d0d0d0}.nav-item.active{background:#fff;color:#333}.nav-label{display:inline}.sidebar-bottom{justify-content:flex-start;padding:14px 18px}.sidebar-bottom strong{display:block;font-size:10px}.sidebar-bottom small{text-align:left}.main-area{margin-left:0;padding:0 0 0;background:var(--graphite)}.topbar{height:62px;flex-basis:62px;padding:0 15px;gap:12px}.mobile-menu{display:block}.topbar-brand{min-width:auto;font-size:20px}.global-search{width:auto;flex:1;max-width:230px;height:32px}.global-search>span{font-size:19px}.global-search input{font-size:10px}.topbar-right{gap:9px}.top-icon{font-size:18px}.topbar-right .top-icon:first-child{display:none}.avatar{width:31px;height:31px}.workspace-canvas{border-radius:29px 29px 0 0;min-height:calc(100vh - 62px)}.page-content{padding:25px 16px 22px}.page-heading{align-items:flex-start;flex-direction:column;margin-bottom:20px;gap:13px}.page-heading h1{font-size:27px}.heading-actions{width:100%}.heading-actions .button{flex:1}.overview-layout{grid-template-columns:1fr;gap:14px}.overview-main .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric-card{padding:13px;min-height:108px;border-radius:15px}.metric-value{font-size:clamp(19px,5.8vw,24px);margin:13px 0 5px}.metric-top{font-size:9px}.metric-icon{width:26px;height:26px;flex-basis:26px}.metric-foot{font-size:9px}.dashboard-grid{gap:12px}.panel{padding:15px;border-radius:15px}.panel-heading h2{font-size:12px}.overview-side{grid-template-columns:1fr}.spend-panel{min-height:auto}.spend-ring{width:124px;height:124px}.spend-meta{margin-bottom:17px}.promo-panel h3{font-size:14px}.form-grid{grid-template-columns:1fr}.section-grid{gap:12px}.app-footer{padding:12px 0;line-height:1.8}.footer-note{display:block}.notice{font-size:10px;padding:11px}.button{padding:10px 12px}.table-wrap{margin:0 -2px}}
@media(max-width:380px){.topbar{gap:8px}.topbar-brand{font-size:18px}.global-search{max-width:none;padding:0 9px}.global-search input::placeholder{font-size:9px}.topbar-right{gap:5px}.topbar-right .notification-icon{display:none}.overview-main .metrics{grid-template-columns:1fr 1fr}.metric-value{font-size:19px}.workspace-canvas{border-radius:24px 24px 0 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Sidebar refinement: contained, fully rounded active states instead of a clipped white tab */
@media(min-width:701px){
 .sidebar{width:132px;align-items:center;padding-top:82px}
 .nav-list{width:100%;padding:0 18px;gap:10px;justify-items:center}
 .nav-item{width:68px;height:54px;min-width:0;margin:0 auto;justify-content:center;gap:0;padding:10px;border-radius:18px;background:transparent;color:#c9c9c9}
 .nav-item:hover{background:#454545;color:#fff}
 .nav-item.active{width:82px;background:#fff;color:#282828;border-radius:18px;box-shadow:0 5px 16px #00000012}
 .nav-icon{width:24px;font-size:20px}
 .sidebar-bottom{width:calc(100% - 22px);justify-content:center;border-top:1px solid #ffffff18}
 .sidebar-bottom .status-dot{margin-top:3px}
}
@media(min-width:701px) and (max-width:1100px){
 .sidebar{width:86px}
 .nav-list{padding:0 8px;gap:10px}
 .nav-item,.nav-item.active{width:58px;height:54px;border-radius:17px}
 .sidebar-bottom{width:calc(100% - 12px)}
}
@media(max-width:700px){
 .nav-item.active{border-radius:12px;background:#fff;color:#333}
 .nav-item:hover{background:#414141}
 .nav-item.active:hover{background:#fff;color:#333}
}
/* Modern, familiar, heavier sidebar icons */
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px}
.nav-icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:transform .16s ease}
.nav-item{font-weight:600}
.nav-item:hover .nav-icon svg{transform:scale(1.06)}
.nav-item.active .nav-icon svg{stroke-width:2.65}
@media(min-width:701px){.nav-item,.nav-item.active{width:68px}.nav-item.active{width:82px}}
@media(max-width:700px){.nav-icon{width:24px;height:24px;flex-basis:24px}.nav-icon svg{width:21px;height:21px}}

/* Glazed premium macOS-inspired design pass */
:root{
 --graphite:#252525;--graphite-deep:#1d1d1f;--canvas:#fff;--page:#f5f5f7;
 --ink:#1d1d1f;--muted:#86868b;--line:rgba(60,60,67,.13);--soft:#f5f5f7;
 --accent:#8da8ff;--lavender:#f0f2ff;--peach:#ffe3cf;--pink:#fff0f0;
 --radius:22px;--shadow:0 12px 34px rgba(0,0,0,.055);
}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;letter-spacing:-.012em}
button,input,select{font-family:inherit}
.topbar{
 background:rgba(37,37,37,.88);
 -webkit-backdrop-filter:saturate(180%) blur(24px);
 backdrop-filter:saturate(180%) blur(24px);
 border-bottom:1px solid rgba(255,255,255,.075);
}
.topbar-brand{font-family:inherit;font-weight:650;letter-spacing:-.8px}
.global-search{height:36px;background:rgba(255,255,255,.96);box-shadow:inset 0 0 0 1px rgba(0,0,0,.035);transition:box-shadow .2s,background .2s}
.global-search:focus-within{box-shadow:0 0 0 4px rgba(141,168,255,.22),inset 0 0 0 1px rgba(141,168,255,.55)}
.global-search input{font-size:12px;letter-spacing:0}
.top-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;transition:background .18s,color .18s,transform .18s}
.top-icon:hover{background:rgba(255,255,255,.11);color:#fff}
.top-icon:active{transform:scale(.94)}
.avatar{box-shadow:0 0 0 2px rgba(255,255,255,.08);transition:transform .2s}
.avatar:hover{transform:scale(1.04)}
.sidebar{background:linear-gradient(180deg,#292929 0%,#242424 100%)}
.nav-list{gap:7px}
.nav-item{height:50px;border-radius:15px;color:rgba(255,255,255,.68);transition:background .22s cubic-bezier(.2,.8,.2,1),color .22s,transform .22s cubic-bezier(.2,.8,.2,1);will-change:transform}
.nav-item:hover{background:rgba(255,255,255,.085);color:#fff;transform:translateX(2px)}
.nav-item.active{background:rgba(255,255,255,.96);color:#202020;box-shadow:0 2px 7px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.65)}
.nav-item.active:hover{background:#fff;transform:translateX(2px)}
.nav-icon svg{stroke-width:2.15;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.nav-item:hover .nav-icon svg{transform:scale(1.07)}
.workspace-canvas{background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.3);border-radius:48px}
.page-content{animation:macPageEnter .32s cubic-bezier(.2,.75,.25,1) both}
@keyframes macPageEnter{from{opacity:0;transform:translateY(7px) scale(.997)}to{opacity:1;transform:translateY(0) scale(1)}}
.page-heading h1{font-family:inherit;font-weight:650;letter-spacing:-1.15px}
.eyebrow{letter-spacing:1.35px}
.metric-card,.panel{border-color:rgba(60,60,67,.12);box-shadow:0 1px 2px rgba(0,0,0,.018);transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .24s}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.055);border-color:rgba(60,60,67,.17)}
.metric-value{font-family:inherit;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.9px}
.panel-heading h2{font-family:inherit;font-weight:620}
.button{border-color:rgba(60,60,67,.16);border-radius:12px;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s,border-color .18s}
.button:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.08)}
.button:active{transform:scale(.975);box-shadow:none}
.button.primary{background:#292929;border-color:#292929}
.button.primary:hover{background:#111}
.field input,.field select{border-color:rgba(60,60,67,.18);border-radius:11px;transition:border-color .18s,box-shadow .18s}
.field input:focus,.field select:focus{border-color:#8da8ff;box-shadow:0 0 0 4px rgba(141,168,255,.18)}
.notice{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(242,244,255,.84)}
.mini-summary-row{transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
.mini-summary-row:hover{transform:translateY(-1px);filter:saturate(1.04)}
.branch-row{transition:background .18s;padding-left:7px;padding-right:7px;border-radius:12px}
.branch-row:hover{background:#f7f7f8}
.product-thumb,.metric-icon,.branch-mark{border:1px solid rgba(60,60,67,.045)}
.app-footer{font-family:inherit;letter-spacing:.8px}
@media(max-width:700px){
 .sidebar{background:rgba(35,35,35,.97);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
 .nav-item{border-radius:12px}
 .workspace-canvas{border-radius:30px 30px 0 0}
 .page-content{animation-duration:.25s}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* Glazed workspace — macOS-inspired dark glass reference redesign */
:root{--graphite:#171717;--graphite-deep:#111;--canvas:#171717;--page:#191919;--ink:#f5f5f7;--muted:#999;--line:rgba(255,255,255,.09);--soft:#242424;--radius:22px;--shadow:0 14px 42px rgba(0,0,0,.22)}
html,body{min-height:100%;background:#171717}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;color:#f5f5f7;letter-spacing:-.015em}
.app-shell{background:#171717;min-height:100vh;padding:0}
.sidebar{position:fixed;inset:0 auto 0 0;width:360px;padding:24px 22px 20px;background:linear-gradient(155deg,#201f1e 0%,#191918 55%,#171717 100%);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:stretch;z-index:20;overflow-y:auto;box-shadow:12px 0 38px rgba(0,0,0,.1)}
.window-controls{display:flex;gap:8px;align-items:center;margin:0 0 27px 4px;height:12px}.window-controls i{display:block;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.window-controls i:nth-child(1){background:#ff5f57}.window-controls i:nth-child(2){background:#febc2e}.window-controls i:nth-child(3){background:#28c840}
.sidebar .brand{display:flex;align-items:center;gap:13px;color:#f5f5f7;text-decoration:none;padding:4px 1px 25px;min-height:65px}.brand-mark{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:#f5f5f5;color:#1d1d1c;font-size:25px;font-weight:750;letter-spacing:-2px}.brand-copy{display:flex;flex-direction:column;gap:3px}.brand-copy strong{font-size:23px;letter-spacing:-.8px;font-weight:620}.brand-copy small{font-size:8px;letter-spacing:1.55px;color:#8b8b8b;font-weight:650}.brand-switch{margin-left:auto;color:#9b9b9b;font-size:16px;line-height:.72;text-align:center}
.sidebar-search{height:48px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:rgba(0,0,0,.16);display:flex;align-items:center;gap:10px;padding:0 14px;color:#777;box-shadow:inset 0 1px 0 rgba(255,255,255,.018);transition:border-color .2s,background .2s,box-shadow .2s}.sidebar-search:focus-within{border-color:rgba(255,255,255,.19);background:rgba(0,0,0,.28);box-shadow:0 0 0 3px rgba(255,255,255,.035)}.sidebar-search>span{font-size:26px;line-height:1;transform:rotate(-20deg)}.sidebar-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#eee;font-size:14px}.sidebar-search input::placeholder{color:#656565}.sidebar-search kbd{font:12px -apple-system,BlinkMacSystemFont,sans-serif;color:#777;white-space:nowrap}
.sidebar-rule{height:1px;background:rgba(255,255,255,.07);margin:21px 0 28px}.workspace-label,.sidebar-section-label{display:block!important;padding:0 2px;margin:0 0 13px;color:#626262;font-size:12px;font-weight:550;letter-spacing:.01em}
.nav-list{display:grid;gap:5px;width:100%;padding:0;justify-items:stretch;margin:0}.nav-item,.nav-item.active{width:100%;height:52px;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:14px;margin:0;padding:0 16px;border:0;border-radius:15px;background:transparent;color:#a6a6a6;text-align:left;font-size:15px;font-weight:480;box-shadow:none;transition:background .2s,color .2s,transform .2s}.nav-item:hover{background:rgba(255,255,255,.055);color:#f6f6f6;transform:translateX(1px)}.nav-item.active{background:rgba(255,255,255,.075);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.nav-icon{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;color:currentColor}.nav-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-label{display:inline!important}.sidebar-section-label{margin:29px 0 13px;padding-top:24px;border-top:1px solid rgba(255,255,255,.07)}
.sidebar-bottom{margin-top:auto;display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;padding:18px 3px 0;border-top:1px solid rgba(255,255,255,.07);color:#ddd}.sidebar-bottom strong{display:block;font-size:12px;font-weight:550;color:#dedede}.sidebar-bottom small{display:block;text-align:left;color:#777;font-size:11px;margin-top:4px}.status-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#d7a45a;align-self:center;margin:0}
.main-area{margin-left:360px;min-height:100vh;display:flex;flex-direction:column;padding:0;background:#111;position:relative;isolation:isolate}.main-area:before{content:"";position:fixed;z-index:-1;top:0;left:360px;right:0;height:57vh;pointer-events:none;background:radial-gradient(ellipse at 44% 0%,rgba(161,48,43,.6) 0%,rgba(124,34,32,.52) 27%,rgba(73,26,25,.25) 62%,transparent 100%),linear-gradient(180deg,#7b2c29 0%,#421d1c 48%,#171515 100%)}
.topbar{height:78px;flex:0 0 78px;display:flex;align-items:center;gap:18px;padding:0 42px;background:rgba(24,22,22,.12);position:sticky;top:0;z-index:8;color:#f7f7f7;border-bottom:1px solid rgba(255,255,255,.055);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.topbar-workspace{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:550;letter-spacing:-.5px}.workspace-glyph{font-size:26px;color:#f5f5f5}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:17px}.prototype-chip{display:flex;align-items:center;gap:8px;color:#b8a6a5;font-size:9px;font-weight:650;letter-spacing:1.2px}.prototype-chip i{width:6px;height:6px;border-radius:50%;background:#d4a15b}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eee;color:#292929;font-weight:650;font-size:12px;border:1px solid rgba(255,255,255,.3)}.mobile-menu{display:none}
.workspace-canvas{background:transparent!important;border-radius:0!important;min-height:calc(100vh - 78px);flex:1;overflow:hidden;box-shadow:none}.page-content{max-width:1600px;width:100%;padding:35px 42px 45px;margin:0 auto;animation:macPageEnter .34s cubic-bezier(.2,.75,.25,1) both;color:#f5f5f7}
.page-heading{align-items:flex-start;margin-bottom:24px}.eyebrow{color:#a7a0a0}.page-heading h1{color:#f8f8f8;font-size:31px;font-weight:620;letter-spacing:-1.15px}.page-heading p{color:#a5a0a0;font-size:13px}
.notice{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.085)!important;color:#aaa!important;border-radius:15px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.notice strong{color:#eee!important}.metric-card,.panel{background:rgba(22,22,22,.69)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:19px!important;box-shadow:0 12px 35px rgba(0,0,0,.08)!important;color:#f5f5f7}.metric-card:hover{background:rgba(35,35,35,.83)!important;border-color:rgba(255,255,255,.15)!important;box-shadow:0 14px 36px rgba(0,0,0,.2)!important}.metric-top,.metric-foot{color:#9b9b9b}.metric-value{color:#f8f8f8;font-family:inherit;font-weight:650;font-variant-numeric:tabular-nums}.metric-icon,.product-thumb,.branch-mark{background:rgba(255,255,255,.07)!important;color:#d2d2d2!important;border:1px solid rgba(255,255,255,.045)}.panel-heading h2{color:#f4f4f4}.panel-heading p{color:#898989}
th{color:#888;border-bottom-color:rgba(255,255,255,.1)}td{color:#c4c4c4;border-bottom-color:rgba(255,255,255,.065)}tbody tr:hover{background:rgba(255,255,255,.035)}.product-cell{color:#f0f0f0}.text-link{color:#a4a4a4}.text-link:hover{color:#fff}.branch-row{border-bottom-color:rgba(255,255,255,.07)}.branch-row:hover{background:rgba(255,255,255,.035)}.branch-info strong,.branch-amount{color:#eee}.branch-info small,.branch-amount small{color:#888}
.button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13);color:#f2f2f2;border-radius:12px}.button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);box-shadow:0 6px 20px rgba(0,0,0,.16)}.button.primary{background:#f4f4f4;border-color:#f4f4f4;color:#1c1c1c}.button.primary:hover{background:#fff;border-color:#fff}
.field label{color:#b3b3b3}.field input,.field select{background:rgba(0,0,0,.23);border-color:rgba(255,255,255,.13);color:#f5f5f5}.field input:focus,.field select:focus{border-color:#d8a4a0;box-shadow:0 0 0 3px rgba(216,164,160,.13)}.field select option{background:#222;color:#fff}.empty-note{color:#999}.status{background:rgba(89,155,111,.16);color:#9ccca8}.status.pending{background:rgba(224,177,91,.13);color:#e4c27f}.report-bars .bar-track{background:rgba(255,255,255,.09)}.bar-fill{background:#c77b76}
.overview-layout{grid-template-columns:minmax(0,1.55fr) minmax(285px,.8fr);gap:20px}.overview-main .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-side .panel{background:rgba(18,18,18,.7)!important}.spend-ring .ring-track{stroke:rgba(255,255,255,.1)}.spend-ring .ring-progress{stroke:#c67b76}.spend-ring-center small,.spend-meta small{color:#8d8d8d}.spend-ring-center strong,.spend-meta strong{color:#f2f2f2}.mini-summary-row{background:rgba(255,255,255,.075)!important;border:1px solid rgba(255,255,255,.035)}.mini-summary-row.peach{background:rgba(178,106,70,.17)!important}.mini-summary-row.pink{background:rgba(163,83,91,.17)!important}.mini-summary-row strong{color:#f2f2f2}.mini-summary-row small,.mini-summary-row .summary-value{color:#a5a5a5}.promo-panel{background:linear-gradient(135deg,rgba(135,54,49,.62),rgba(45,27,27,.85))!important;border-color:rgba(255,255,255,.09)!important}.promo-panel h3{color:#fff}.promo-panel p{color:#c4a5a2}.promo-spark{color:#e8b2ad}.app-footer{padding:13px 42px 20px;color:#7c7777}.footer-note{color:#777}.toast{background:#f4f4f4;color:#222;box-shadow:0 10px 35px #0005}
@media(max-width:1100px){.sidebar{width:280px;padding-left:18px;padding-right:18px}.main-area{margin-left:280px}.main-area:before{left:280px}.topbar{padding:0 28px}.page-content{padding:30px 28px}.overview-layout{grid-template-columns:1fr}.overview-side{grid-template-columns:1fr 1fr}.overview-side .spend-panel{grid-row:span 2}}
@media(max-width:700px){.sidebar{width:min(320px,88vw);padding:18px 18px 20px;transform:translateX(-110%);background:rgba(27,26,25,.98);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);box-shadow:18px 0 45px rgba(0,0,0,.4)}.sidebar.open{transform:translateX(0)}.window-controls{margin-bottom:18px}.sidebar .brand{display:flex}.sidebar-search{height:44px}.nav-list{padding:0;gap:5px}.nav-item,.nav-item.active{width:100%;height:47px;justify-content:flex-start;gap:13px;border-radius:13px;padding:0 14px;font-size:14px}.sidebar-bottom{justify-content:flex-start;padding:15px 3px 0}.sidebar-bottom strong{display:block}.sidebar-bottom small{text-align:left}.main-area{margin-left:0;padding:0}.main-area:before{left:0;height:58vh}.topbar{height:64px;flex-basis:64px;padding:0 17px;gap:12px}.topbar-workspace{font-size:18px}.workspace-glyph{font-size:22px}.prototype-chip{display:none}.mobile-menu{display:block;color:#eee;border:0;background:rgba(255,255,255,.07);border-radius:10px;width:34px;height:34px}.workspace-canvas{min-height:calc(100vh - 64px)}.page-content{padding:24px 16px 30px}.page-heading h1{font-size:27px}.overview-layout{grid-template-columns:1fr;gap:14px}.overview-main .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric-card{padding:13px;min-height:108px}.metric-value{font-size:clamp(19px,5.8vw,24px)}.dashboard-grid{grid-template-columns:1fr}.overview-side{grid-template-columns:1fr}.overview-side .spend-panel{grid-row:auto}.panel{padding:15px}.app-footer{padding:12px 16px 18px}.footer-note{display:block}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.workspace-hero{padding:25px 0 35px;max-width:760px;min-height:260px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.hero-kicker{color:#d4a09c;font-size:10px;letter-spacing:2px;font-weight:650;margin-bottom:19px}.hero-greeting{font-size:19px;color:#b6aaaa;margin:0 0 12px;letter-spacing:-.4px}.hero-title{font-size:clamp(32px,4vw,49px);font-weight:620;letter-spacing:-2px;line-height:1.08;color:#fff;margin:0}.hero-description{font-size:14px;line-height:1.7;color:#b2a6a6;max-width:520px;margin:16px 0 21px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}@media(max-width:700px){.workspace-hero{min-height:245px;padding:23px 0 30px}.hero-title{font-size:35px;letter-spacing:-1.5px}.hero-greeting{font-size:17px}.hero-description{font-size:13px}}


/* Finder-inspired Glazed variant */
:root{--blue:#6d91f6;--blue-strong:#5681f4;--line:rgba(255,255,255,.105)}
html,body{background:#222}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;letter-spacing:-.012em}
.app-shell{background:#222}
.sidebar{width:340px;padding:28px 21px 20px;background:linear-gradient(155deg,rgba(27,27,26,.97),rgba(21,21,20,.97));border-right:1px solid rgba(255,255,255,.12);box-shadow:inset -1px 0 rgba(255,255,255,.025);backdrop-filter:blur(35px);-webkit-backdrop-filter:blur(35px)}
.window-controls{margin:0 0 36px 2px}
.sidebar .brand{padding:0 0 28px;min-height:50px}
.brand-mark{background:#f7f7f7;color:#202020;border-radius:11px}
.brand-copy strong{font-size:21px}.brand-copy small{display:none}.brand-switch{display:none}
.sidebar-search{height:44px;border-radius:14px;background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.075)}
.sidebar-search>span{font-size:25px}
.sidebar-rule{margin:20px 0 24px}
.workspace-label,.sidebar-section-label{font-size:12px;color:#a1a1a1;font-weight:560;margin-bottom:9px}
.nav-list{gap:2px}
.nav-item,.nav-item.active{height:43px;border-radius:9px;padding:0 13px;gap:12px;font-size:14px;font-weight:450}
.nav-item.active{background:rgba(255,255,255,.105);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.nav-item:hover{transform:none;background:rgba(255,255,255,.07)}
.nav-icon{width:22px;height:22px;flex-basis:22px;color:#aaa}
.nav-icon svg{width:20px;height:20px;stroke-width:1.75}
.nav-item.active .nav-icon{color:#f4f4f4}
.sidebar-section-label{margin:23px 0 9px;padding-top:19px}
.sidebar-bottom{padding-top:15px}
.main-area{margin-left:340px;background:#242424}
.main-area:before{left:340px;right:0;top:0;height:100vh;background:radial-gradient(ellipse at 78% 4%,rgba(166,171,187,.34),transparent 40%),radial-gradient(ellipse at 18% 30%,rgba(92,103,86,.22),transparent 40%),linear-gradient(150deg,#62615f 0%,#373735 33%,#222221 73%,#191918 100%)}
.topbar.finder-toolbar{height:82px;flex-basis:82px;padding:0 32px;background:rgba(37,37,37,.48);border-bottom:1px solid rgba(255,255,255,.11);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);gap:22px}
.finder-history{display:flex;align-items:center;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.18);border-radius:30px;overflow:hidden}
.finder-history button{width:43px;height:38px;border:0;background:transparent;color:#dedede;font-size:28px;font-weight:300;line-height:1;cursor:pointer;transition:background .18s,color .18s}
.finder-history button+button{border-left:1px solid rgba(255,255,255,.055);color:#777}
.finder-history button:hover{background:rgba(255,255,255,.09);color:white}
.topbar-workspace{font-size:20px;font-weight:590;letter-spacing:-.3px;color:#f2f2f4}
.workspace-glyph{display:none}
.topbar-right{gap:14px}
.prototype-chip{font-size:9px;color:#c5c5c8}
.avatar{background:#e5e5e5;color:#333;width:32px;height:32px}
.workspace-canvas{background:rgba(20,20,20,.34)!important;min-height:calc(100vh - 82px);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.page-content{max-width:none;padding:29px 30px 40px}
.workspace-hero{min-height:210px;padding:9px 0 26px;max-width:800px}
.hero-kicker{color:#aebfff;font-size:10px;letter-spacing:1.6px}
.hero-greeting{color:#c2c2c5;font-size:17px}
.hero-title{font-size:clamp(29px,3.4vw,42px);letter-spacing:-1.65px;font-weight:620}
.hero-description{color:#b6b6b8;font-size:13px;max-width:480px}
.button{border-radius:11px;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.14)}
.button.primary{background:#f0f0f0;color:#222;border-color:#f0f0f0}
.notice{background:rgba(15,15,15,.29)!important;border-color:rgba(255,255,255,.1)!important}
.metric-card,.panel{background:rgba(22,22,22,.42)!important;border:1px solid rgba(255,255,255,.105)!important;border-radius:14px!important;box-shadow:0 12px 32px rgba(0,0,0,.11)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.metric-card{min-height:135px}
.metric-card:hover{background:rgba(34,34,34,.65)!important}
.metric-value{font-size:26px}
.panel-heading h2{font-size:15px;font-weight:600}
.panel-heading p{font-size:12px}
th{font-size:10px;text-transform:uppercase;letter-spacing:.7px}
td{font-size:12px}
.product-thumb{position:relative;width:34px;height:27px;min-width:34px;display:block!important;border:0!important;border-radius:7px 7px 6px 6px!important;background:linear-gradient(180deg,#81a4ff,#5e87f4)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 3px 8px rgba(45,79,173,.22);font-size:0!important;overflow:visible}
.product-thumb:before{content:"";position:absolute;left:2px;top:-4px;width:15px;height:7px;border-radius:4px 4px 0 0;background:#7398fa}
.product-thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.14)}
.product-cell{gap:12px;color:#f0f0f2}
.branch-mark{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:9px!important}
.mini-summary-row{border-radius:10px;background:rgba(255,255,255,.055)!important}
.mini-summary-row.peach,.mini-summary-row.pink{background:rgba(255,255,255,.055)!important}
.promo-panel{background:linear-gradient(135deg,rgba(75,88,130,.45),rgba(22,22,22,.55))!important}
.promo-spark{color:#8eafff}
.status{background:rgba(100,180,130,.15);color:#a7dbb5}
.status.pending{background:rgba(228,194,113,.13);color:#e5ca8b}
.app-footer{padding:12px 30px 17px;color:#aaa}
@media(max-width:1100px){.sidebar{width:280px}.main-area{margin-left:280px}.main-area:before{left:280px}.page-content{padding:25px 24px}.topbar.finder-toolbar{padding:0 24px}}
@media(max-width:700px){.sidebar{width:min(320px,88vw);padding:22px 18px 20px}.main-area{margin-left:0}.main-area:before{left:0}.topbar.finder-toolbar{height:66px;flex-basis:66px;padding:0 15px;gap:12px}.finder-history button{width:34px;height:32px}.topbar-workspace{font-size:18px}.page-content{padding:20px 16px 28px}.workspace-hero{min-height:220px}.hero-title{font-size:32px;letter-spacing:-1.2px}.prototype-chip{display:none}.workspace-canvas{min-height:calc(100vh - 66px)}.overview-main .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* macOS Finder sidebar refinement */
.sidebar{
  width:310px;
  padding:22px 14px 16px;
  background:linear-gradient(180deg,rgba(34,34,33,.94),rgba(25,25,24,.92) 48%,rgba(22,22,21,.96));
  border-right:1px solid rgba(255,255,255,.13);
  box-shadow:inset -1px 0 rgba(255,255,255,.025),8px 0 28px rgba(0,0,0,.08);
  -webkit-backdrop-filter:saturate(150%) blur(34px);
  backdrop-filter:saturate(150%) blur(34px);
}
.window-controls{padding-left:7px;margin-bottom:30px;gap:8px}
.window-controls i{width:12px;height:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.13),0 1px 1px rgba(0,0,0,.12)}
.sidebar .brand{margin:0 5px;padding:0 0 23px;min-height:48px;gap:11px}
.brand-mark{width:34px;height:34px;border-radius:9px;font-size:22px;box-shadow:0 1px 2px #0003}
.brand-copy strong{font-size:20px;letter-spacing:-.6px;font-weight:600}
.sidebar-search{margin:0 4px;height:36px;padding:0 10px;border-radius:10px;gap:8px;background:rgba(0,0,0,.17);border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.sidebar-search>span{font-size:22px;color:#8d8d8d}
.sidebar-search input{font-size:13px}
.sidebar-search kbd{font-size:11px;color:#888}
.sidebar-rule{margin:19px 5px 20px;background:rgba(255,255,255,.09)}
.workspace-label,.sidebar-section-label{padding-left:10px!important;margin:0 0 7px!important;font-size:11px!important;font-weight:600!important;letter-spacing:.015em;color:#8f8f8f!important}
.nav-list{gap:2px;padding:0 3px}
.nav-item,.nav-item.active{height:36px;border-radius:8px;padding:0 10px;gap:10px;font-size:13px;font-weight:450;letter-spacing:-.1px}
.nav-item .nav-icon{width:20px;height:20px;flex-basis:20px;color:#a6a6a6}
.nav-icon svg{width:18px;height:18px;stroke-width:1.7}
.nav-item.active{background:rgba(126,157,231,.26);color:#f7f8fc;box-shadow:inset 0 0 0 1px rgba(177,195,239,.16)}
.nav-item.active .nav-icon{color:#dbe5ff}
.nav-item:hover:not(.active){background:rgba(255,255,255,.065);color:#f0f0f0}
.nav-item:hover:not(.active) .nav-icon{color:#d0d0d0}
.sidebar-section-label{margin:19px 0 7px!important;padding:16px 10px 0!important;border-top:1px solid rgba(255,255,255,.085)}
.sidebar-bottom{margin:18px 4px 0;padding:13px 7px 0;gap:9px;border-top:1px solid rgba(255,255,255,.085)}
.sidebar-bottom strong{font-size:11px;color:#c9c9c9;font-weight:550}
.sidebar-bottom small{font-size:10px;color:#777}
.status-dot{width:6px;height:6px;flex-basis:6px}
@media(min-width:701px){.sidebar{height:100vh}.sidebar-bottom{margin-top:auto}}
@media(max-width:1100px){.sidebar{width:270px;padding:20px 12px 15px}}
@media(max-width:700px){
 .sidebar{width:min(300px,86vw);padding:19px 12px 15px;border-right:1px solid rgba(255,255,255,.15)}
 .window-controls{margin-bottom:25px}
 .sidebar .brand{display:flex;margin:0 5px;padding-bottom:20px}
 .sidebar-search{margin:0 3px;height:38px}
 .nav-list{padding:0 3px;gap:3px}
 .nav-item,.nav-item.active{height:39px;font-size:13px}
 .sidebar-section-label{margin-top:16px!important}
}


/* Clean sidebar edge: prevent horizontal overflow and remove the split scrollbar */
html,body{max-width:100%;overflow-x:hidden}
.app-shell{width:100%;max-width:100%;overflow-x:clip}
.sidebar{
  box-sizing:border-box;
  width:264px;
  max-width:100vw;
  overflow-x:hidden!important;
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  border-right:0!important;
  box-shadow:none!important;
}
.sidebar::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
.main-area{margin-left:264px;min-width:0;width:calc(100% - 264px);overflow-x:clip}
.main-area:before{left:264px}
.topbar{min-width:0}
.page-content{min-width:0;max-width:100%;box-sizing:border-box}
@media(max-width:1100px){.sidebar{width:250px}.main-area{margin-left:250px;width:calc(100% - 250px)}.main-area:before{left:250px}}
@media(max-width:700px){
 .sidebar{width:min(300px,86vw);max-width:86vw;overflow-x:hidden!important;border-right:0!important;box-shadow:18px 0 45px rgba(0,0,0,.28)!important}
 .main-area{margin-left:0;width:100%;max-width:100%}
 .main-area:before{left:0}
}


/* Plain text GLAZED wordmark */
.sidebar .brand{gap:0}
.brand-copy.brand-wordmark{display:block}
.brand-copy.brand-wordmark strong{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;font-size:22px;font-weight:650;letter-spacing:1.6px;line-height:1;color:#f5f5f7}


/* Glazed S&P — Apple system typography and refined workspace transitions */
:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif}
*,*::before,*::after{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif!important}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.brand-copy.brand-wordmark strong{font-size:20px;letter-spacing:1.25px;font-weight:650}
#pageContent{transform-origin:center center;will-change:transform,opacity,filter}
#pageContent.workspace-minimize-out{animation:macWorkspaceMinimize .14s cubic-bezier(.4,0,.8,.3) both;pointer-events:none}
#pageContent.workspace-restore-in{animation:macWorkspaceRestore .42s cubic-bezier(.2,.75,.25,1) both}
@keyframes macWorkspaceMinimize{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:0;transform:scale(.965) translateY(7px);filter:blur(5px)}
}
@keyframes macWorkspaceRestore{
  0%{opacity:0;transform:scale(.975) translateY(9px);filter:blur(4px)}
  65%{opacity:1;filter:blur(0);transform:scale(1.002) translateY(0)}
  100%{opacity:1;transform:scale(1);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
 #pageContent.workspace-minimize-out,#pageContent.workspace-restore-in{animation:none!important}
}


/* Flicker-free workspace transition: avoid blur filters and animation collisions */
#pageContent.page-content{animation:none!important;filter:none}
#pageContent.workspace-minimize-out{animation:glazedPageExit .10s cubic-bezier(.4,0,1,1) both!important;will-change:opacity,transform;backface-visibility:hidden}
#pageContent.workspace-restore-in{animation:glazedPageEnter .28s cubic-bezier(.2,.72,.25,1) both!important;will-change:opacity,transform;backface-visibility:hidden}
@keyframes glazedPageExit{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:0;transform:translate3d(0,4px,0) scale(.99)}}
@keyframes glazedPageEnter{from{opacity:0;transform:translate3d(0,7px,0) scale(.99)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@media(prefers-reduced-motion:reduce){
 #pageContent.workspace-minimize-out,#pageContent.workspace-restore-in{animation:none!important}
}

/* Product catalog and allocation tabs */
.product-tabs{display:flex;gap:8px;margin:0 0 16px}.product-tabs .button{border:1px solid var(--line,#e5e5e5);background:#fff;color:inherit}.product-tabs .button.primary{background:#171515;color:#fff}.price-missing{display:inline-block;padding:4px 8px;border-radius:6px;background:#fff0e7;color:#9a4314;font-size:12px;font-weight:700}.muted{display:block;color:#777;font-size:11px;margin-top:3px}.allocation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}.allocation-choice{display:flex;align-items:center;gap:12px;border:1px solid #e8e6e3;border-radius:10px;padding:14px;background:#fff;cursor:pointer}.allocation-choice input{width:17px;height:17px;accent-color:#171515}.allocation-choice span{display:flex;flex-direction:column;gap:3px}.allocation-choice small{font-size:12px;color:#777}@media(max-width:640px){.allocation-grid{grid-template-columns:1fr}.product-tabs{width:100%}.product-tabs .button{flex:1}}

/* Contrast fix: product tabs and allocation controls on the graphite workspace */
.product-tabs .button{background:#292929!important;color:#dedede!important;border:1px solid #454545!important;box-shadow:none!important}
.product-tabs .button:hover{background:#353535!important;color:#fff!important;border-color:#626262!important}
.product-tabs .button.primary{background:#dce5ff!important;color:#1c2945!important;border-color:#dce5ff!important}
.product-tabs .button.primary:hover{background:#c7d5ff!important;color:#17233d!important}
.allocation-choice{background:#292929!important;border:1px solid #454545!important;color:#f0f0f0!important;transition:background .15s,border-color .15s,box-shadow .15s}
.allocation-choice:hover{background:#30343d!important;border-color:#63759e!important}
.allocation-choice:has(input:checked){background:#252e42!important;border-color:#8fa8ff!important;box-shadow:inset 0 0 0 1px #8fa8ff44}
.allocation-choice input{accent-color:#91aaff!important}
.allocation-choice strong{color:#f2f4fa!important;font-size:13px}
.allocation-choice small{color:#b7bdca!important}
#allocationProduct{background:#171717!important;color:#f4f4f4!important;border:1px solid #454545!important;color-scheme:dark}
.price-missing{background:#4a2b20!important;color:#ffc09b!important;border:1px solid #70412d}

/* Branch-first product allocation */
.branch-select-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.branch-select{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:15px;border:1px solid #454545;border-radius:12px;background:#292929;color:#f4f4f4;transition:background .15s,border-color .15s}
.branch-select:hover{background:#30343d;border-color:#6578a6}
.branch-select.selected{background:#252f45;border-color:#91aaff;box-shadow:inset 0 0 0 1px #91aaff44}
.branch-select strong{font-size:13px;color:#f6f7fb}
.branch-select small{font-size:11px;color:#b7bdca}
.branch-select span{font-size:10px;color:#aebde9;margin-top:4px}
.allocation-category-list{display:grid;gap:9px}
.allocation-category{border:1px solid #414141;border-radius:12px;background:#242424;overflow:hidden}
.allocation-category summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;padding:14px 16px;cursor:pointer;background:#292929}
.allocation-category summary::-webkit-details-marker{display:none}
.allocation-category summary:after{content:'⌄';color:#b9c4e5;margin-left:4px;order:3}
.category-toggle{display:flex;align-items:center;gap:11px;flex:1;cursor:pointer;color:#f4f4f4}
.category-toggle input,.allocation-product input{width:16px;height:16px;accent-color:#91aaff;flex:0 0 auto}
.category-toggle strong{font-size:13px}
.category-count{font-size:11px;color:#aebde9;white-space:nowrap}
.allocation-products{padding:4px 16px 8px 43px}
.allocation-product{display:flex;align-items:center;gap:10px;min-height:42px;border-bottom:1px solid #383838;color:#e7e7e7;cursor:pointer}
.allocation-product:last-child{border-bottom:0}
.allocation-product span{flex:1;font-size:12px}
.allocation-product small{font-size:11px;color:#a6a6a6}
.allocation-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.allocation-footer>span{font-size:11px;color:#aaa}
@media(max-width:900px){.branch-select-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.branch-select-grid{grid-template-columns:1fr 1fr}.branch-select{padding:12px}.allocation-products{padding-left:14px}.allocation-footer{align-items:flex-start;flex-direction:column}}

.product-actions{display:flex;gap:6px;align-items:center;white-space:nowrap}.product-edit{background:#dce5ff!important;color:#1c2945!important;border:1px solid #dce5ff!important;padding:6px 10px!important}.product-delete{background:#402725!important;color:#ffc3bd!important;border:1px solid #75403b!important;padding:6px 10px!important}.product-edit:hover{background:#c7d5ff!important}.product-delete:hover{background:#58302d!important;color:#fff!important}.table-wrap{overflow-x:auto}

/* Apple-inspired compact icon-only product actions */
.product-actions{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.product-actions .button{width:30px;height:30px;min-width:30px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border-radius:9px!important;box-shadow:none!important;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.product-actions .button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.product-actions .product-edit{background:#30343a!important;color:#e5e7eb!important;border:1px solid #484d55!important}
.product-actions .product-edit:hover{background:#3b414a!important;color:#fff!important;border-color:#68707c!important}
.product-actions .product-delete{background:transparent!important;color:#a7abb3!important;border:1px solid transparent!important}
.product-actions .product-delete:hover{background:#472b2b!important;color:#ffb4ad!important;border-color:#68403d!important}
.product-actions .button:active{transform:scale(.96)}
.product-actions .button:focus-visible{outline:2px solid #9bb7ff;outline-offset:2px}

/* Fix: force SVG glyphs to render inside compact icon buttons */
.product-actions{display:flex!important;align-items:center!important;gap:7px!important}
.product-actions button.product-edit,.product-actions button.product-delete{box-sizing:border-box!important;display:inline-flex!important;flex:0 0 30px!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;align-items:center!important;justify-content:center!important;border-radius:9px!important;line-height:1!important;font-size:0!important}
.product-actions button.product-edit{background:#30343a!important;color:#f0f2f5!important;border:1px solid #555b65!important}
.product-actions button.product-delete{background:#292929!important;color:#ffaaa3!important;border:1px solid #51403f!important}
.product-actions button.product-edit:hover{background:#3d424b!important;border-color:#737b88!important}
.product-actions button.product-delete:hover{background:#482b2a!important;border-color:#8a514c!important;color:#ffd0cc!important}
.product-actions button svg{display:block!important;visibility:visible!important;opacity:1!important;width:15px!important;height:15px!important;min-width:15px!important;min-height:15px!important;overflow:visible!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;pointer-events:none!important}

/* Glazed editorial product navigation and reorder controls */
.product-category-nav{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px;padding:4px 0}
.category-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid #3a3b3e;background:#242527;color:#c6c8cc;border-radius:9px;padding:9px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease}
.category-pill span{font-size:10px;color:#858991;font-variant-numeric:tabular-nums}
.category-pill:hover{background:#303236;border-color:#555961;color:#fff}
.category-pill.active{background:#dce5ff;border-color:#dce5ff;color:#202c48}
.category-pill.active span{color:#53627f}
.reorder-hint{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:#92969e;font-size:11px}
.reorder-hint:first-letter{font-size:16px;color:#dce5ff}
.drag-handle{display:inline-flex;align-items:center;justify-content:center;color:#737983;font-size:20px;cursor:grab;user-select:none;margin-right:2px;touch-action:none}
.reorder-row{transition:background .12s ease,opacity .12s ease}.reorder-row:hover{background:rgba(220,229,255,.035)}.reorder-row.is-dragging{opacity:.35}.reorder-row.drop-target{box-shadow:inset 0 2px #b7c8ff;background:rgba(183,200,255,.08)}
.position-control{display:inline-flex;align-items:center;border:1px solid #41444a;border-radius:8px;background:#242629;padding:0 4px;height:30px;color:#9ea3ad}
.position-control select{width:32px;height:28px;background:transparent;border:0;color:#e6e8ec;font-size:11px;outline:none;cursor:pointer;padding:0 2px}
.position-control select option{background:#252629;color:#fff}
.product-actions{gap:6px!important}
.product-actions .product-edit,.product-actions .product-delete{font-size:14px!important;font-weight:500}
@media(max-width:760px){.product-category-nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}.category-pill{flex:0 0 auto}}

/* Native-feeling macOS lift, hover and drop motion */
.reorder-row{position:relative;transform:translateZ(0);transition:background-color .18s ease,box-shadow .22s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
.reorder-row:hover{background:rgba(224,231,246,.045)}
.reorder-row .drag-handle{opacity:.48;transition:opacity .18s ease,color .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);cursor:grab}
.reorder-row:hover .drag-handle{opacity:1;color:#dce5ff}
.reorder-row:active .drag-handle{cursor:grabbing}
.reorder-row.is-dragging{opacity:.72;transform:scale(1.012);background:#303238!important;box-shadow:0 12px 28px rgba(0,0,0,.32),0 2px 8px rgba(0,0,0,.2);z-index:3}
.reorder-row.drop-target{background:rgba(185,202,255,.075)!important;box-shadow:inset 0 2px 0 #c2d0ff,inset 0 -1px 0 rgba(194,208,255,.16);transform:translateY(1px)}
@keyframes productReorderSettle{0%{background:rgba(194,208,255,.14);transform:scale(1.008)}65%{transform:scale(.998)}100%{background:transparent;transform:scale(1)}}
.reorder-row.reorder-settled{animation:productReorderSettle .36s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.reorder-row,.reorder-row .drag-handle{transition:none!important}.reorder-row.reorder-settled{animation:none!important}}