@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#202124;--muted:#70757a;--line:#e6e8eb;--paper:#f8f9fb;--white:#fff;
  --green:#1a73e8;--green2:#185abc;--mint:#e8f0fe;--lime:#d2e3fc;
  --amber:#fef7e0;--red:#fce8e6;--shadow:0 1px 2px rgba(60,64,67,.08),0 6px 24px rgba(60,64,67,.06);
  --shadow-soft:0 1px 2px rgba(60,64,67,.05),0 12px 36px rgba(60,64,67,.07)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:15px 'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before,body:after{content:'';position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.28;animation:ambient 14s ease-in-out infinite alternate}
body:before{width:420px;height:420px;right:-180px;top:60px;background:radial-gradient(circle,#a8c7fa 0,#dce8ff 42%,transparent 72%)}
body:after{width:360px;height:360px;left:-180px;bottom:0;background:radial-gradient(circle,#d8c8ff 0,#eee9ff 42%,transparent 72%);animation-delay:-6s}
button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.layout{min-height:100vh}
.sidebar{width:246px;background:rgba(255,255,255,.82);border-right:1px solid rgba(218,220,224,.9);backdrop-filter:blur(18px);position:fixed;inset:0 auto 0 0;padding:22px 14px;display:flex;flex-direction:column;z-index:20}
.brand{display:flex;align-items:center;gap:11px;padding:2px 10px 25px;font:800 20px Manrope;letter-spacing:-.8px}.brand-icon{height:36px;width:36px;border-radius:12px;background:linear-gradient(145deg,#1a73e8,#7c4dff);color:white;display:grid;place-items:center;font:800 19px Manrope;box-shadow:0 5px 18px #4285f433;position:relative;overflow:hidden}.brand-icon:after{content:'';position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 35%,#fff8 50%,transparent 65%);transform:translateX(-80%);animation:shine 5s ease-in-out infinite}.brand small{display:block;font:700 9px 'DM Sans';letter-spacing:1.3px;color:#8a9096;margin-top:2px}
.workspace{margin:0 4px 22px;padding:11px;border:1px solid var(--line);border-radius:14px;display:flex;gap:9px;align-items:center;background:#fff9}.avatar{width:33px;height:33px;border-radius:11px;background:linear-gradient(145deg,#e8f0fe,#f1eaff);color:#5b4bb7;font-weight:800;display:grid;place-items:center}.workspace b{display:block;font-size:12px}.workspace small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.navlabel{font-size:9px;font-weight:800;letter-spacing:1.25px;color:#9aa0a6;padding:12px 11px 7px}.nav{width:100%;display:flex;gap:12px;align-items:center;border:0;background:transparent;padding:11px 12px;border-radius:11px;color:#5f6368;font-size:12px;font-weight:600;text-align:left;margin:2px 0;transition:background .2s,color .2s,transform .2s}.nav .ico{font-size:16px;width:19px;text-align:center}.nav:hover{background:#f1f3f4;color:#202124;transform:translateX(1px)}.nav.active{background:#e8f0fe;color:#185abc;font-weight:800}.nav em{font-style:normal;font-size:9px;background:#d2e3fc;padding:3px 5px;border-radius:6px;margin-left:auto}.sidebar-bottom{margin-top:auto;padding:10px}.helpbox{padding:13px;background:linear-gradient(145deg,#f8f9ff,#f7f4ff);border:1px solid #e8e4f7;border-radius:14px;margin-bottom:15px}.helpbox b{font-size:12px}.helpbox p{font-size:11px;color:var(--muted);line-height:1.5}.helpbox a{color:#185abc;font-weight:800;font-size:11px}.sidebar-bottom>small{font-size:9px;letter-spacing:1px;color:#9aa0a6}
.main{margin-left:246px;min-height:100vh}.topbar{height:68px;background:rgba(255,255,255,.74);backdrop-filter:blur(18px);border-bottom:1px solid rgba(218,220,224,.9);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:10}.crumb{font-size:12px;color:#70757a}.crumb b{color:#202124}.topright{display:flex;align-items:center;gap:12px}.saved{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.dot{width:7px;height:7px;background:#34a853;border-radius:50%;box-shadow:0 0 0 4px #34a85312}.userchip{display:flex;gap:8px;align-items:center;border-left:1px solid var(--line);padding-left:14px;font-weight:700;font-size:11px}.userchip .avatar{width:30px;height:30px}
.content{max-width:1400px;margin:auto;padding:30px 34px 60px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#5f6368;margin-bottom:10px}.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:25px}.pagehead h1{font:800 clamp(26px,3vw,36px) Manrope;letter-spacing:-1.5px;margin:0 0 9px}.pagehead p{color:var(--muted);margin:0;max-width:700px;line-height:1.6}
.button{border:1px solid #dadce0;border-radius:10px;background:#fff;padding:11px 15px;font-weight:700;font-size:12px;color:#3c4043;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s}.button:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:#c9ccd1}.button.primary{background:#1a73e8;border-color:#1a73e8;color:#fff;box-shadow:0 5px 16px #1a73e822}.button.primary:hover{background:#185abc}.button.soft{background:#e8f0fe;color:#185abc;border-color:#d2e3fc}.button.danger{background:#fff7f6;color:#a50e0e;border-color:#f3d7d3}.button.small{padding:8px 10px;font-size:11px}.button.full{width:100%}
.grid{display:grid;gap:16px}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:rgba(255,255,255,.88);border:1px solid rgba(218,220,224,.9);border-radius:18px;padding:20px;box-shadow:var(--shadow);min-width:0;backdrop-filter:blur(12px);transition:transform .2s,box-shadow .2s,border-color .2s}.card:hover{box-shadow:var(--shadow-soft);border-color:#d9dce1}.cardhead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}.card h2{font:800 15px Manrope;margin:0;letter-spacing:-.3px}.card p.sub{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.5}.metric{padding:17px 18px;position:relative;overflow:hidden}.metric:after{content:'';position:absolute;width:110px;height:110px;right:-55px;top:-55px;border-radius:50%;background:linear-gradient(135deg,#e8f0fe,#f0eaff);opacity:.8}.metric .label{color:var(--muted);font-size:11px;font-weight:600}.metric strong{display:block;font:800 25px Manrope;letter-spacing:-1px;margin:10px 0 5px;position:relative;z-index:1}.metric small{font-size:10px;color:var(--muted)}.metric .metricicon{float:right;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#e8f0fe;color:#185abc;font-size:16px;position:relative;z-index:2}.pill{display:inline-flex;align-items:center;border-radius:20px;padding:5px 8px;background:#f1f3f4;color:#5f6368;font-size:9px;font-weight:800;letter-spacing:.3px}.pill.green{background:#e6f4ea;color:#137333}.pill.amber{background:#fef7e0;color:#b06000}.pill.red{background:#fce8e6;color:#a50e0e}.muted{color:var(--muted)}.tiny{font-size:10px;line-height:1.55}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field label,.field>span{font-size:11px;font-weight:800;color:#3c4043}.field input,.field select,.field textarea,input.control,select.control,textarea.control{width:100%;min-width:0;border:1px solid #dadce0;background:#fff;border-radius:10px;padding:12px;color:var(--ink);outline:none;transition:border-color .18s,box-shadow .18s}.field textarea,textarea.control{resize:vertical;min-height:82px;line-height:1.5}.field input:focus,.field select:focus,.field textarea:focus,input.control:focus,select.control:focus,textarea.control:focus{border-color:#1a73e8;box-shadow:0 0 0 3px #1a73e818}.field .hint{font-size:10px;color:var(--muted);line-height:1.5}.formactions{display:flex;gap:9px;flex-wrap:wrap;margin-top:19px}.divider{height:1px;background:var(--line);margin:18px 0}.callout{padding:13px 15px;border-radius:13px;background:#f1f3f4;border:1px solid #e1e3e5;color:#3c4043;font-size:11px;line-height:1.6}.callout.amber{background:#fef7e0;border-color:#f3e4bf;color:#7a5b00}
.hero{background:linear-gradient(120deg,#202124 0%,#303134 45%,#263b65 100%);color:#fff;border-radius:22px;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:25px;position:relative;overflow:hidden;box-shadow:0 18px 45px #20212418}.hero:before{content:'';position:absolute;width:420px;height:420px;right:-90px;top:-220px;border-radius:50%;background:radial-gradient(circle at 40% 60%,#8ab4f8aa 0,#8ab4f81f 28%,transparent 62%);filter:blur(2px);animation:float 9s ease-in-out infinite}.hero:after{content:'';position:absolute;width:230px;height:230px;border:1px solid #ffffff20;border-radius:50%;right:45px;top:-90px;box-shadow:0 0 0 32px #ffffff09,0 0 0 66px #ffffff05;animation:pulseRing 7s ease-in-out infinite}.hero>*{position:relative;z-index:1}.hero h2{font:800 27px Manrope;letter-spacing:-1px;margin:0 0 10px;max-width:550px}.hero p{color:#dfe1e5;max-width:550px;line-height:1.6;font-size:12px}.hero .button{background:#fff;color:#202124;border-color:#fff}.hero .button:hover{background:#f1f3f4}
.activity{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #edf0ed}.activity:last-child{border-bottom:0}.activity .bullet{width:33px;height:33px;border-radius:10px;background:#f1f3f4;display:grid;place-items:center;color:#185abc}.activity b{display:block;font-size:11px}.activity small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.activity .right{margin-left:auto;text-align:right;font-weight:800;font-size:11px}.quick{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #edf0ed}.quick:last-child{border:0}.quick .quickicon{width:36px;height:36px;border-radius:11px;background:#e8f0fe;color:#185abc;display:grid;place-items:center;font-size:17px}.quick div{flex:1}.quick b{display:block;font-size:12px}.quick small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.quick .arrow{font-size:17px;color:#9aa0a6}
.script-day{border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-top:12px;background:#fff}.script-day summary{list-style:none;cursor:pointer;padding:16px;display:flex;align-items:center;gap:12px}.script-day summary::-webkit-details-marker{display:none}.daynum{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#e8f0fe;color:#185abc;font-weight:800}.daytitle{flex:1;min-width:0}.daytitle b{display:block;font-size:12px}.daytitle small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.script-body{padding:0 17px 18px 62px}.script-body h4{font:800 11px Manrope;margin:16px 0 7px}.script-text{white-space:pre-wrap;line-height:1.75;font-size:12px;color:#3c4043;background:#f8f9fa;padding:13px;border-radius:10px}.step-list{padding-left:17px;font-size:11px;line-height:1.8;color:#5f6368}.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.service-card{display:flex;flex-direction:column;gap:12px}.service-card .price{font:800 23px Manrope;letter-spacing:-.7px}.service-card ul{padding-left:17px;margin:0;color:var(--muted);font-size:11px;line-height:1.9}.service-card .button{margin-top:auto}.result{animation:rise .35s cubic-bezier(.2,.8,.2,1) both}.loading{display:flex;align-items:center;gap:10px;padding:15px;color:#185abc;font-weight:700;font-size:12px}.spinner{width:16px;height:16px;border:2px solid #d2e3fc;border-top-color:#1a73e8;border-radius:50%;animation:spin .7s linear infinite}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid #edf0ed;font-size:11px}th{font-size:9px;letter-spacing:.8px;color:#80868b;text-transform:uppercase}td strong{font-size:11px}.mobile-menu{display:none;border:1px solid #dadce0;background:white;border-radius:10px;width:38px;height:38px;font-size:20px}.overlay{display:none}.toast{position:fixed;bottom:22px;right:24px;background:#202124;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 12px 30px #0002;font-size:12px;z-index:60;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;max-width:min(360px,calc(100vw - 30px))}.toast.show{opacity:1;transform:translateY(0)}.empty{text-align:center;padding:28px 12px;color:var(--muted);font-size:12px}.choice-row{display:flex;gap:8px;flex-wrap:wrap}.choice{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:11px;font-weight:700;transition:.18s}.choice:hover{background:#f8f9fa}.choice:has(input:checked){background:#e8f0fe;border-color:#a8c7fa;color:#185abc}.choice input{accent-color:#1a73e8}.mobile-bottom{display:none}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ambient{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(18px,-14px,0) scale(1.05)}}
@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-18px,14px,0) scale(1.04)}}
@keyframes pulseRing{0%,100%{transform:scale(.96);opacity:.65}50%{transform:scale(1.04);opacity:1}}
@keyframes shine{0%,70%,100%{transform:translateX(-90%)}82%{transform:translateX(90%)}}

@media(max-width:1100px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.content{padding:25px 22px 45px}.topbar{padding:0 22px}}
@media(max-width:760px){.sidebar{transform:translateX(-105%);transition:transform .24s ease;box-shadow:12px 0 40px #10251b0c;width:270px}.sidebar.open{transform:translateX(0)}.overlay.show{display:block;position:fixed;inset:0;background:#20212465;z-index:15}.main{margin-left:0;padding-bottom:68px}.topbar{height:60px;padding:0 15px}.mobile-menu{display:block}.crumb{display:flex;align-items:center;gap:10px}.saved{display:none}.userchip{padding-left:0;border:0}.userchip .who{display:none}.content{padding:23px 14px 35px}.pagehead{display:block}.pagehead>.button{margin-top:16px}.pagehead h1{font-size:28px}.grid.two,.grid.three{grid-template-columns:1fr}.grid.four{gap:10px}.metric{padding:14px}.metric strong{font-size:22px}.hero{padding:23px;display:block}.hero h2{font-size:24px}.hero .button{margin-top:7px}.formgrid{grid-template-columns:1fr}.card{padding:16px}.script-body{padding:0 13px 16px}.script-day summary{padding:12px}.mobile-bottom{display:flex;position:fixed;z-index:12;bottom:0;left:0;right:0;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:7px 5px calc(7px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -8px 20px #1c352608}.mobile-bottom a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:#70757a;min-width:50px;padding:4px}.mobile-bottom a span{font-size:17px}.mobile-bottom a.active{color:#185abc;font-weight:800}.toolbar .button{flex:1}.service-card .price{font-size:21px}.tablewrap{margin:0 -5px}.toast{bottom:80px;right:12px}.topright{gap:8px}}

body.demo-staff .sidebar .nav:not([href="pos.html"]),body.demo-staff .sidebar .navlabel,body.demo-staff .sidebar .workspace,body.demo-staff .sidebar .helpbox,body.demo-staff .sidebar-bottom>small{display:none!important}
body.demo-staff .mobile-bottom a:not([href="pos.html"]){display:none!important}

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

/* BOSTOP responsive product management, theme control and refined motion */
:root{color-scheme:light;--page-bg:#f7f8fc;--surface:#fff;--surface-2:#f8faff;--ink:#202124;--muted:#70757a;--line:#e6e8eb;--shadow:0 1px 2px rgba(60,64,67,.08),0 8px 28px rgba(60,64,67,.055)}
body{background:var(--page-bg);color:var(--ink);transition:background-color .2s ease,color .2s ease}
.card,.topbar,.sidebar,.mobile-bottom,.product-modal{background:var(--surface);color:var(--ink)}
.brand-icon{position:relative;display:grid;place-items:center;background:linear-gradient(135deg,#4285f4,#7657d5)!important;color:white!important;border-radius:13px!important;box-shadow:0 5px 14px #4285f42b;overflow:hidden}.brand-icon:after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 38%,#ffffff80 49%,transparent 60%);transform:translateX(-120%);animation:brand-shine 7s ease-in-out infinite}
@keyframes brand-shine{0%,68%,100%{transform:translateX(-120%)}82%{transform:translateX(120%)}}
.theme-toggle{min-width:38px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);cursor:pointer;font-size:15px;transition:transform .18s,border-color .18s}.theme-toggle:hover{transform:translateY(-1px);border-color:#8ab4f8}
.product-cards{display:none;gap:10px;padding:12px 0}.product-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;min-width:0;transition:border-color .16s,transform .16s,box-shadow .16s}.product-card:hover{border-color:#a8c7fa;box-shadow:var(--shadow);transform:translateY(-1px)}.product-card:focus-visible{outline:2px solid #4285f4;outline-offset:2px}.product-thumb{width:54px;height:54px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:22px}.product-thumb img{width:100%;height:100%;object-fit:cover}.product-card-main{min-width:0}.product-card-main strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.product-card-main small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.product-card-side{text-align:right;white-space:nowrap}.product-card-side strong{display:block;font-size:12px}.product-card-side small{font-size:10px;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;z-index:80;background:rgba(20,27,40,.48);backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px;overflow-y:auto}.modal-backdrop[hidden]{display:none}.product-modal{width:min(650px,100%);max-height:min(92vh,900px);overflow:auto;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 24px 80px #11182730;animation:modal-in .2s ease-out}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.modal-head h2{margin:4px 0 0;font-size:22px}.icon-button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:24px;cursor:pointer}.product-image-editor{display:grid;grid-template-columns:100px 1fr;gap:14px;align-items:center;margin-bottom:18px}.product-image-preview{width:100px;height:100px;border-radius:14px;border:1px dashed var(--line);background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden;color:var(--muted)}.product-image-preview>span{font-size:26px}.product-image-preview img{width:100%;height:100%;object-fit:cover}.product-image-preview small{font-size:10px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.product-modal .field{min-width:0}.product-modal .control{width:100%;min-width:0}.product-modal input[type=file]{font-size:12px;padding:9px}.product-modal .muted{display:block;font-size:11px;line-height:1.5;margin-top:5px}.modal-actions .button{min-width:100px}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
body.dark-mode,
html.dark-preload body{color-scheme:dark;--page-bg:#111318;--surface:#191c23;--surface-2:#20242d;--ink:#edf0f7;--muted:#a5adbd;--line:#303541;--shadow:0 1px 2px #0005,0 8px 28px #0002;background:var(--page-bg);color:var(--ink)}
body.dark-mode .sidebar,body.dark-mode .topbar,body.dark-mode .mobile-bottom,body.dark-mode .card,body.dark-mode .product-modal,body.dark-mode .product-card,
html.dark-preload body .sidebar,html.dark-preload body .topbar,html.dark-preload body .mobile-bottom,html.dark-preload body .card,html.dark-preload body .product-modal,html.dark-preload body .product-card{background:var(--surface);color:var(--ink);border-color:var(--line)}body.dark-mode .workspace,body.dark-mode .control,body.dark-mode input,body.dark-mode select,body.dark-mode textarea,body.dark-mode .button:not(.primary),body.dark-mode .theme-toggle,body.dark-mode .icon-button,html.dark-preload body .workspace,html.dark-preload body .control,html.dark-preload body input,html.dark-preload body select,html.dark-preload body textarea,html.dark-preload body .button:not(.primary),html.dark-preload body .theme-toggle,html.dark-preload body .icon-button{background:var(--surface-2);color:var(--ink);border-color:var(--line)}body.dark-mode .mobile-bottom,html.dark-preload body .mobile-bottom{background:rgba(25,28,35,.94)}body.dark-mode th,body.dark-mode td,html.dark-preload body th,html.dark-preload body td{border-color:var(--line)}body.dark-mode .script-day,body.dark-mode .script-text,body.dark-mode .demo-creds,html.dark-preload body .script-day,html.dark-preload body .script-text,html.dark-preload body .demo-creds{background:var(--surface-2);color:var(--ink);border-color:var(--line)}body.dark-mode .nav,html.dark-preload body .nav{color:#c3c9d4}body.dark-mode .nav.active,html.dark-preload body .nav.active{background:#263751;color:#a8c7fa}body.dark-mode .pill.green,html.dark-preload body .pill.green{background:#18392d;color:#8fe0b2}body.dark-mode .pill.amber,html.dark-preload body .pill.amber{background:#40331a;color:#f8d88b}body.dark-mode .pill.red,html.dark-preload body .pill.red{background:#472426;color:#ffb4ab}body.dark-mode .choice:has(input:checked),html.dark-preload body .choice:has(input:checked){background:#263751;color:#a8c7fa;border-color:#527ab5}body.dark-mode .tablewrap,html.dark-preload body .tablewrap{border-color:var(--line)}body.dark-mode .brand,html.dark-preload body .brand{color:var(--ink)}
@media(max-width:760px){.desktop-product-table{display:none}.product-cards{display:grid}.product-card{grid-template-columns:48px minmax(0,1fr) auto;padding:10px;gap:9px}.product-thumb{width:48px;height:48px}.product-card-main strong{font-size:12px}.product-card-side strong{font-size:11px}.product-card-side small{display:block}.modal-backdrop{padding:8px;align-items:end}.product-modal{border-radius:20px 20px 12px 12px;max-height:92dvh;padding:17px}.modal-head h2{font-size:20px}.product-image-editor{grid-template-columns:82px 1fr;gap:11px}.product-image-preview{width:82px;height:82px}.product-modal .formgrid{grid-template-columns:1fr 1fr;gap:10px}.product-modal .field label{font-size:11px}.modal-actions{position:sticky;bottom:-17px;background:var(--surface);padding:12px 0 2px}.theme-toggle{min-width:36px;padding:0 9px}.theme-toggle .theme-label{display:none}}
@media(max-width:380px){.product-modal .formgrid{grid-template-columns:1fr}.product-card{grid-template-columns:42px minmax(0,1fr) auto}.product-thumb{width:42px;height:42px}.product-card-side .pill{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* BOSTOP readability and dark-first defaults */
body{font-size:15px}
.tiny{font-size:11px;line-height:1.65}
.eyebrow{font-size:11px;letter-spacing:1.35px}
.field label,.field>span{font-size:12px}
.nav{font-size:13px}
.workspace b{font-size:13px}
.workspace small{font-size:11px}
.saved{font-size:12px}
.button{font-size:13px}
.button.small{font-size:12px}
th{font-size:10px}
td{font-size:12px}
.metric .label{font-size:12px}
.metric small{font-size:11px}
body.dark-mode,
html.dark-preload body{--page-bg:#101218;--surface:#181c24;--surface-2:#222733;--ink:#f3f5fb;--muted:#c0c7d5;--line:#353c4a;--shadow:0 1px 2px #0006,0 8px 28px #0003;background:var(--page-bg);color:var(--ink)}
body.dark-mode .eyebrow,body.dark-mode .crumb,body.dark-mode .field label,body.dark-mode .field>span,
html.dark-preload body .eyebrow,html.dark-preload body .crumb,html.dark-preload body .field label,html.dark-preload body .field>span{color:#d5dbea}
body.dark-mode .callout,
html.dark-preload body .callout{background:#222733;color:#e6eaf3;border-color:#394152}
body.dark-mode .activity,body.dark-mode .quick,
html.dark-preload body .activity,html.dark-preload body .quick{border-color:#303744}
body.dark-mode .activity .bullet,body.dark-mode .quick .quickicon,
html.dark-preload body .activity .bullet,html.dark-preload body .quick .quickicon{background:#29364b;color:#b8d2ff}
body.dark-mode .metric:after,
html.dark-preload body .metric:after{background:linear-gradient(135deg,#283b59,#3c3158);opacity:.8}
body.dark-mode .button.danger,
html.dark-preload body .button.danger{background:#392427;color:#ffc1c1;border-color:#63383c}
body.dark-mode .button.soft,
html.dark-preload body .button.soft{background:#263751;color:#b8d2ff;border-color:#394f70}
body.dark-mode .hero .button,
html.dark-preload body .hero .button{background:#f4f6fc;color:#172033}

/* Business briefing and sale-mode helpers */
.brief-item{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.brief-dot{width:9px;height:9px;border-radius:50%;background:#a6d96a;margin-top:5px;flex-shrink:0}.brief-item.warning .brief-dot{background:#f0b44c}.brief-item.alert .brief-dot{background:#ef7474}.brief-item b{display:block;font-size:13px}.brief-item small{display:block;color:var(--muted);margin-top:3px}.sale-tabs{display:flex;gap:8px;flex-wrap:wrap}

/* BOSTOP overview refinement: clear hierarchy, touch-friendly controls, coherent dark mode */
.brand-icon{width:38px;height:38px;flex:0 0 38px}.brand-icon img{width:100%;height:100%;display:block;object-fit:cover}
.overview-welcome{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:4px 0 18px}.overview-welcome h1{font:800 clamp(25px,3vw,32px) Manrope, sans-serif;letter-spacing:-.7px;margin:5px 0 0}.overview-welcome .button{white-space:nowrap}
.grid.four:has(.metric-sales){grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.metric[href]{text-decoration:none;color:inherit;cursor:pointer;position:relative;overflow:hidden;min-height:148px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:transform .18s,border-color .18s,box-shadow .18s;border:1px solid var(--line)}
.metric[href]:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#8ab4f8}.metric[href]:focus-visible{outline:3px solid #8ab4f8;outline-offset:3px}
.metric-sales{background:linear-gradient(145deg,var(--surface),#e9f5ff)!important}.metric-profit{background:linear-gradient(145deg,var(--surface),#e9f8f0)!important}.metric-debt{background:linear-gradient(145deg,var(--surface),#fff2e5)!important}.metric-stock{background:linear-gradient(145deg,var(--surface),#f0edff)!important}
.metric .metricicon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#ffffffb8;font-weight:800;font-size:20px;color:#285a91}.metric .label{font-size:13px;font-weight:700}.metric strong{font-size:clamp(22px,2.1vw,29px);line-height:1.2;letter-spacing:-.6px}.metric small{font-size:12px;line-height:1.4;color:var(--muted)}
.briefing-card #businessBriefing{margin-bottom:12px}.briefing-card #businessBriefing .brief-item:nth-child(n+3){display:none}.briefing-card.show-all #businessBriefing .brief-item{display:flex}.briefing-card #briefingToggle{margin-top:4px}
.mobile-menu{background:var(--surface-2,var(--surface));color:var(--ink);border-color:var(--line);box-shadow:0 1px 3px #0001;display:none;align-items:center;justify-content:center;min-width:42px;min-height:42px;font-size:21px;font-weight:700;cursor:pointer}
.mobile-bottom a{font-size:11px;min-width:58px;padding:6px 8px;gap:4px;font-weight:650}.mobile-bottom a span{font-size:21px}.mobile-bottom{padding-top:9px}
body.dark-mode .metric-sales,body.dark-mode .metric-profit,body.dark-mode .metric-debt,body.dark-mode .metric-stock,
html.dark-preload body .metric-sales,html.dark-preload body .metric-profit,html.dark-preload body .metric-debt,html.dark-preload body .metric-stock{background:linear-gradient(145deg,#1a202a,#232c3a)!important;border-color:#394253}body.dark-mode .metric .metricicon,html.dark-preload body .metric .metricicon{background:#30394a;color:#c4d8ff}body.dark-mode .mobile-menu,html.dark-preload body .mobile-menu{background:#252b36;color:#f3f5fb;border-color:#4b5567}
body.dark-mode .overview-welcome .eyebrow,
html.dark-preload body .overview-welcome .eyebrow{color:#c5d2e8}
@media(max-width:900px){.grid.four:has(.metric-sales){grid-template-columns:repeat(2,minmax(0,1fr))}.metric[href]{min-height:140px}}
@media(max-width:760px){.mobile-menu{display:inline-flex}.overview-welcome{padding:0 0 15px;align-items:center}.overview-welcome h1{font-size:27px}.overview-welcome .button{min-height:44px;padding:0 12px;font-size:13px}.grid.four:has(.metric-sales){gap:10px}.metric[href]{padding:15px;min-height:145px}.metric .metricicon{width:36px;height:36px}.metric .label{font-size:13px;line-height:1.35}.metric strong{font-size:22px}.metric small{font-size:12px}.brief-item{padding:14px}.brief-item b{font-size:14px;line-height:1.4}.brief-item small{font-size:12px;line-height:1.5}.mobile-bottom a{font-size:11px;min-width:0;flex:1}.mobile-bottom a span{font-size:22px}}
@media(max-width:380px){.overview-welcome{align-items:flex-start;flex-direction:column}.overview-welcome .button{width:100%;justify-content:center}.metric[href]{min-height:135px;padding:12px}.metric strong{font-size:20px}}
/* Colourful, branded print receipt */
.trend-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:end;min-height:190px;padding:12px 0}.trend-day{min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.trend-bar-wrap{height:118px;width:min(100%,34px);display:flex;align-items:flex-end;background:var(--surface-2);border-radius:9px;overflow:hidden}.trend-bar{width:100%;min-height:3px;background:linear-gradient(180deg,#69b6ff,#3478d4);border-radius:8px 8px 3px 3px}.trend-day b{font-size:10px;white-space:nowrap}.trend-day small{font-size:11px;color:var(--muted)}

/* BOSTOP refinement: persistent dark paint, clearer text and dashboard hierarchy */
html,body{min-height:100%}body{font-size:16px;background:var(--paper);transition:none}body.dark-mode,html.dark-preload body{background:#101218!important;color:#f3f5fb}body.dark-mode .main,body.dark-mode .layout,html.dark-preload body .main,html.dark-preload body .layout{background:#101218}body.dark-mode .topbar,html.dark-preload body .topbar{background:#181c24;border-color:#353c4a}body.dark-mode .sidebar,html.dark-preload body .sidebar{background:#181c24;border-color:#353c4a}
.brand small{display:none}.workspace b{font-size:13px}.workspace small{font-size:11px}.nav{font-size:13px}.navlabel{font-size:10px}.saved,.userchip,.crumb{font-size:13px}.card h2{font-size:17px}.card p.sub{font-size:13px}.activity b,.quick b{font-size:13px}.activity small,.quick small{font-size:12px}.tiny{font-size:12px}.label,.metric .label{font-size:13px}.metric small{font-size:12px}.field label,.field>span{font-size:13px}.field .hint{font-size:12px}.button.small{font-size:12px}
.overview-metrics{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));gap:14px}.overview-metrics .metric{min-height:156px}.overview-metrics .metric-sales{grid-row:span 1;min-height:190px;padding:23px}.overview-metrics .metric-sales strong{font-size:34px}.overview-metrics .metric-sales .label{font-size:15px}.overview-metrics .metric-sales small{font-size:13px}.overview-metrics .metric:not(.metric-sales){padding:18px 15px}.overview-metrics .metric:not(.metric-sales) strong{font-size:22px}.overview-metrics .metric:not(.metric-sales) .label{font-size:12px}
.mini-trend-card{display:block;margin-top:14px;text-decoration:none!important;border-color:#303b50!important;background:linear-gradient(130deg,#1b2330,#202a3b)!important;color:#f3f5fb!important}.mini-trend-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.mini-trend-top .label{display:block;color:#c1cbe0}.mini-trend-top strong{display:block;font:800 24px Manrope;margin:5px 0}.mini-trend-top small{font-size:12px;color:#b6c2d7}.trend-arrow{font-size:30px;color:#8eb7ff}.mini-trend-svg{width:100%;height:88px;display:block;margin-top:10px;overflow:visible}.mini-trend-days{display:flex;justify-content:space-between;color:#b6c2d7;font-size:11px}.mini-trend-link{display:block;margin-top:10px;color:#a9c8ff;font-size:13px;font-weight:800}.trend-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}.trend-summary>div{padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}.trend-summary .label{display:block;color:var(--muted);font-size:12px}.trend-summary strong{display:block;font-size:20px;margin-top:7px}
@media(max-width:1050px){.overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-metrics .metric-sales{min-height:160px}.overview-metrics .metric:not(.metric-sales){min-height:140px}}
@media(max-width:760px){.content{padding:22px 16px 92px}.overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.overview-metrics .metric-sales{grid-column:1/-1;min-height:145px}.overview-metrics .metric-sales strong{font-size:30px}.overview-metrics .metric:not(.metric-sales){min-height:135px}.mini-trend-card{margin-top:10px;padding:16px}.trend-summary{grid-template-columns:1fr}.pagehead h1{font-size:28px}.pagehead p{font-size:14px;line-height:1.5}.mobile-bottom a{font-size:13px;padding:10px 4px;min-height:64px}.mobile-bottom a span{font-size:25px}.recent-activity,.activity{font-size:14px}}

/* BOSTOP fintech-inspired navy workspace and quick-action tiles */
body.dark-mode,

/* BOSTOP fintech-inspired navy workspace and quick-action tiles */
html.dark-preload body{--page-bg:#080f20;--surface:#111c31;--surface-2:#182640;--ink:#f3f6ff;--muted:#a5b1c7;--line:#263653;background:#080f20;color:#f3f6ff}
body.dark-mode:before,body.dark-mode:after,
html.dark-preload body:before,html.dark-preload body:after{opacity:.12}
body.dark-mode .sidebar,body.dark-mode .topbar,body.dark-mode .mobile-bottom,
html.dark-preload body .sidebar,html.dark-preload body .topbar,html.dark-preload body .mobile-bottom{background:#0c1629;border-color:#22314b}
body.dark-mode .card,body.dark-mode .product-card,body.dark-mode .product-modal,
html.dark-preload body .card,html.dark-preload body .product-card,html.dark-preload body .product-modal{background:#111c31;border-color:#263653}
body.dark-mode .workspace,
html.dark-preload body .workspace{background:#111c31;border-color:#293b5a}
body.dark-mode .nav,
html.dark-preload body .nav{color:#b7c3d8}body.dark-mode .nav:hover,html.dark-preload body .nav:hover{background:#192a46;color:#fff}body.dark-mode .nav.active,html.dark-preload body .nav.active{background:#1c3458;color:#8ebcff}
body.dark-mode .brand-icon,
html.dark-preload body .brand-icon{background:linear-gradient(145deg,#2676f3,#7c4dff)}
body.dark-mode .button:not(.primary),body.dark-mode .theme-toggle,body.dark-mode .control,body.dark-mode input,body.dark-mode select,body.dark-mode textarea,
html.dark-preload body .button:not(.primary),html.dark-preload body .theme-toggle,html.dark-preload body .control,html.dark-preload body input,html.dark-preload body select,html.dark-preload body textarea{background:#182640;color:#f3f6ff;border-color:#2c3e5e}
body.dark-mode .callout,
html.dark-preload body .callout{background:#172640;border-color:#2c3e5e;color:#dce6f7}
body.dark-mode .metric-sales,body.dark-mode .metric-profit,body.dark-mode .metric-debt,body.dark-mode .metric-stock,
html.dark-preload body .metric-sales,html.dark-preload body .metric-profit,html.dark-preload body .metric-debt,html.dark-preload body .metric-stock{background:linear-gradient(145deg,#13213a,#172944)!important;border-color:#2a3b59}
body.dark-mode .mini-trend-card,
html.dark-preload body .mini-trend-card{background:linear-gradient(125deg,#13284a,#17223b)!important;border-color:#2d4d7d!important}
.action-groups{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:18px;margin-top:22px}
.action-section{min-width:0}.section-label{font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--muted);margin:0 0 10px 2px}
.action-tiles{display:grid;gap:10px}.sell-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.manage-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.action-tile{min-width:0;min-height:112px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:17px;border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--ink);text-decoration:none!important;transition:transform .18s,border-color .18s,background .18s;box-shadow:0 8px 22px #0000000a}
.action-tile:hover{transform:translateY(-2px);border-color:#426aa1;background:var(--surface-2)}.tile-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;font-size:22px;font-weight:700}.icon-blue{background:#183b68;color:#7bb6ff}.icon-orange{background:#493020;color:#ffb16c}.icon-yellow{background:#49401f;color:#ffda70}.icon-purple{background:#3b2e5b;color:#c5a5ff}.icon-cyan{background:#173f4a;color:#7ce3ef}.tile-label{font-size:14px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.promo-banner{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:170px;margin-top:24px;padding:24px 27px;border-radius:20px;overflow:hidden;text-decoration:none!important;background:linear-gradient(110deg,#d8eaff 0%,#b7d9ff 54%,#93bdff 100%);color:#10294d;border:1px solid #9cc7ff;box-shadow:0 12px 30px #3677ce18}
.promo-copy{position:relative;z-index:2;max-width:520px}.promo-kicker{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#315b8b}.promo-copy h2{font:800 23px Manrope;margin:8px 0 5px;letter-spacing:-.7px}.promo-copy p{font-size:13px;line-height:1.5;color:#315274;margin:0 0 14px}.promo-cta{display:inline-flex;align-items:center;gap:13px;padding:10px 14px;background:#1769d2;color:white;border-radius:10px;font-size:12px;font-weight:800}.promo-cta b{font-size:17px}.promo-art{position:relative;width:180px;height:120px;flex:0 0 180px}.promo-orbit{position:absolute;display:block;border:1px solid #3b7dc455;border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:150px;height:92px;right:3px;top:13px}.orbit-two{width:115px;height:70px;right:20px;top:24px}.promo-bars{position:absolute;bottom:12px;right:32px;height:76px;display:flex;align-items:flex-end;gap:7px}.promo-bars i{display:block;width:15px;border-radius:5px 5px 2px 2px;background:#3b82df;box-shadow:0 4px 8px #1b5eb322}.promo-bars i:nth-child(1){height:25px;opacity:.5}.promo-bars i:nth-child(2){height:42px;opacity:.65}.promo-bars i:nth-child(3){height:34px;opacity:.75}.promo-bars i:nth-child(4){height:59px;opacity:.85}.promo-bars i:nth-child(5){height:75px;background:#1769d2}.promo-arrow{position:absolute;top:0;right:8px;font-size:32px;font-weight:800;color:#1769d2}.promo-dots{display:flex;justify-content:center;gap:6px;margin:9px 0 20px}.promo-dots i{width:6px;height:6px;border-radius:50%;background:#66758a55}.promo-dots i.active{width:18px;border-radius:10px;background:#4b8de7}.recent-card{margin-top:4px}
@media(max-width:900px){.action-groups{grid-template-columns:1fr}.sell-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.manage-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.action-tile{min-height:105px}}
@media(max-width:600px){.action-groups{gap:18px;margin-top:17px}.action-tile{min-height:104px;padding:14px;gap:12px;border-radius:15px}.tile-icon{width:39px;height:39px;font-size:20px}.tile-label{font-size:13px}.promo-banner{min-height:160px;padding:20px 18px;gap:5px}.promo-copy h2{font-size:20px}.promo-copy p{font-size:12px;max-width:250px}.promo-art{width:95px;flex-basis:95px;transform:scale(.78);transform-origin:center right;margin-right:-10px}.promo-kicker{font-size:9px}.promo-cta{padding:9px 11px;font-size:11px}.recent-card{padding:16px}}

/* ===== Homepage only (.home3): compact tile layout at about half size. Other pages unaffected. ===== */
.home3{max-width:none;width:100%;box-sizing:border-box}
.home3 .h3-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.home3 .h3-head h1{font:800 clamp(18px,2.4vw,22px) Manrope;letter-spacing:-.6px;margin:0}.home3 .h3-head .eyebrow{font-size:9px;margin-bottom:3px}
.home3 .h3-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.home3 .h3-stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 11px;min-width:0;display:flex;flex-direction:column;gap:2px;color:var(--ink);transition:border-color .18s,transform .18s}
.home3 .h3-stat:hover{border-color:#4da3ff;transform:translateY(-1px)}
.home3 .h3-lab{font-size:10px;color:var(--muted);font-weight:600}
.home3 .h3-stat strong{font:800 clamp(14px,1.8vw,17px) Manrope;letter-spacing:-.4px;overflow-wrap:anywhere}
.home3 .h3-stat small{font-size:9px;color:var(--muted)}
.home3 .h3-sec{font:600 11px 'DM Sans',sans-serif;color:var(--muted);margin:14px 0 7px;letter-spacing:.2px}
.home3 .h3-tiles{display:grid;gap:8px}.home3 .h3-tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}.home3 .h3-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.home3 .h3-tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:9px;font-weight:700;font-size:12px;color:var(--ink);min-width:0;transition:border-color .18s,transform .18s}
.home3 .h3-tile span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home3 .h3-tile:hover{border-color:#4da3ff;transform:translateY(-1px)}
.home3 .h3-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex:none;background:rgba(128,140,170,.16)}
.home3 .h3-ico.blue{color:#4da3ff}.home3 .h3-ico.orange{color:#ff9a4d}.home3 .h3-ico.gold{color:#e0a82e}.home3 .h3-ico.purple{color:#a98bff}.home3 .h3-ico.cyan{color:#35c4d8}
.home3 .h3-trend{margin-top:14px;padding:11px 14px}
.home3 .mini-trend-top strong{font-size:16px;margin:3px 0}.home3 .mini-trend-top small{font-size:10px}.home3 .mini-trend-top .label{font-size:10px}
.home3 .mini-trend-svg{height:48px;margin-top:6px}.home3 .mini-trend-days{font-size:9px}.home3 .mini-trend-link{font-size:11px;margin-top:6px}
.home3 .h3-brief{margin-top:10px;padding:11px 14px}.home3 .h3-brief .cardhead{margin-bottom:8px}.home3 .h3-brief h2{font-size:13px}
.home3 .h3-brief .brief-item{padding:8px 10px;border-radius:10px;gap:8px}.home3 .h3-brief .brief-item b{font-size:11px}.home3 .h3-brief .brief-item small{font-size:10px;margin-top:2px}
.home3 .h3-brief .empty{padding:10px}.home3 .h3-brief .button{margin-top:2px}
.home3 .h3-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border-radius:14px;background:linear-gradient(120deg,#d9ecff,#bcdcff);color:#12305a}
.home3 .h3-kick{font-size:8px;font-weight:800;letter-spacing:1px;color:#315b8b;display:block}
.home3 .h3-banner b{font:800 14px Manrope;display:block;margin:3px 0 2px}.home3 .h3-banner p{margin:0;font-size:11px}
.home3 .h3-banner-btn{background:#1f6fe0;color:#fff;font-weight:700;font-size:11px;padding:7px 12px;border-radius:8px;flex:none}
.home3 .h3-recent{margin-top:12px;padding:11px 14px}.home3 .h3-recent .cardhead{margin-bottom:4px}.home3 .h3-recent h2{font-size:13px}.home3 .h3-recent .empty{padding:12px 8px}
@media(max-width:900px){.home3 .h3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.home3 .h3-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}.home3 .h3-tiles.three .h3-tile{flex-direction:column;text-align:center;padding:9px 4px;gap:5px;font-size:11px}.home3 .h3-banner{flex-direction:column;align-items:flex-start}}

/* ===== Bigger home tiles, popups ===== */
.home3 .h3-stats{gap:10px}
.home3 .h3-stat{padding:15px 14px;gap:5px;border-radius:15px}
.home3 .h3-lab{font-size:12px}.home3 .h3-stat strong{font-size:clamp(19px,2.2vw,22px)}.home3 .h3-stat small{font-size:11px}
.home3 .h3-sec{font-size:12px;margin:18px 0 9px}
.home3 .h3-tiles{gap:10px}
.home3 .h3-tile{padding:15px 14px;gap:11px;font-size:13px;border-radius:15px;min-height:62px}
.home3 .h3-ico{width:34px;height:34px;border-radius:10px;font-size:18px}
@media(max-width:600px){.home3 .h3-tiles.three .h3-tile{padding:14px 6px;gap:8px;font-size:12px;min-height:96px;justify-content:center}.home3 .h3-tiles.three .h3-tile span:last-child{white-space:normal;line-height:1.25}}
.popup-stack{position:fixed;top:76px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100vw - 28px))}
.popup{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;border-radius:14px;background:#111c31;border:1px solid #2c3e5e;color:#f3f6ff;box-shadow:0 12px 34px #0006;animation:popin .25s ease both;text-decoration:none}
.popup b{display:block;font-size:13px}.popup small{display:block;color:#a5b1c7;font-size:11px;margin-top:3px;line-height:1.45}
.popup-dot{width:9px;height:9px;border-radius:50%;background:#a6d96a;margin-top:5px;flex:none}.popup.warning .popup-dot{background:#f0b44c}.popup.alert .popup-dot{background:#ef7474}
.popup>div{flex:1;min-width:0}.popup-x{border:0;background:transparent;color:#a5b1c7;font-size:20px;line-height:1;padding:0 4px;cursor:pointer}
@keyframes popin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:600px){.popup-stack{top:68px;right:14px}}

/* ===== Glass look (light default + dark) + transactions list ===== */
html:not(.dark-preload) body:not(.dark-mode) {background:linear-gradient(155deg,#e6efff 0%,#f1ecff 48%,#ffeef6 100%) fixed;--surface:rgba(255,255,255,.62);--line:rgba(120,140,200,.22);--muted:#5d6b85;--ink:#18233b}
html:not(.dark-preload) body:not(.dark-mode) :before{opacity:.55;background:radial-gradient(circle,#7fb0ff 0,#c9dcff 45%,transparent 72%)}
html:not(.dark-preload) body:not(.dark-mode) :after{opacity:.5;background:radial-gradient(circle,#c3a6ff 0,#eadfff 45%,transparent 72%)}
html:not(.dark-preload) body:not(.dark-mode) .card,html:not(.dark-preload) body:not(.dark-mode) .h3-stat,html:not(.dark-preload) body:not(.dark-mode) .h3-tile,html:not(.dark-preload) body:not(.dark-mode) .brief-item,html:not(.dark-preload) body:not(.dark-mode) .txn,html:not(.dark-preload) body:not(.dark-mode) .popup,html:not(.dark-preload) body:not(.dark-mode) .workspace,html:not(.dark-preload) body:not(.dark-mode) .product-card{background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 30px rgba(70,90,170,.13),inset 0 1px 0 rgba(255,255,255,.9)}
html:not(.dark-preload) body:not(.dark-mode) .topbar,html:not(.dark-preload) body:not(.dark-mode) .sidebar,html:not(.dark-preload) body:not(.dark-mode) .mobile-bottom{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-color:rgba(140,160,215,.25)}
html:not(.dark-preload) body:not(.dark-mode) .nav.active{background:linear-gradient(135deg,#dfe9ff,#ece4ff);color:#2a5bd7}
html:not(.dark-preload) body:not(.dark-mode) .button.primary{background:linear-gradient(135deg,#2f7bff,#6a5cff);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(80,100,240,.28)}
html:not(.dark-preload) body:not(.dark-mode) .mini-trend-card{background:rgba(255,255,255,.58)!important;border:1px solid rgba(255,255,255,.8)!important;color:var(--ink)!important}
html:not(.dark-preload) body:not(.dark-mode) .mini-trend-top .label,html:not(.dark-preload) body:not(.dark-mode) .mini-trend-top small,html:not(.dark-preload) body:not(.dark-mode) .mini-trend-days{color:#5d6b85}
html:not(.dark-preload) body:not(.dark-mode) .mini-trend-link{color:#2a5bd7}
html:not(.dark-preload) body:not(.dark-mode) .h3-banner{box-shadow:0 10px 28px rgba(60,110,230,.22)}
body.dark-mode ,html.dark-preload body {background:radial-gradient(900px 500px at 85% -5%,#16306b 0,transparent 60%),radial-gradient(700px 500px at 0% 100%,#2b1a5c 0,transparent 60%),#080f20 fixed}
body.dark-mode :before,html.dark-preload body :before{opacity:.38;background:radial-gradient(circle,#2f7bff 0,#1a3a82 45%,transparent 72%)}
body.dark-mode :after,html.dark-preload body :after{opacity:.32;background:radial-gradient(circle,#7c4dff 0,#3a2480 45%,transparent 72%)}
body.dark-mode .card,html.dark-preload body .card,body.dark-mode .h3-stat,html.dark-preload body .h3-stat,body.dark-mode .h3-tile,html.dark-preload body .h3-tile,body.dark-mode .brief-item,html.dark-preload body .brief-item,body.dark-mode .txn,html.dark-preload body .txn,body.dark-mode .popup,html.dark-preload body .popup,body.dark-mode .workspace,html.dark-preload body .workspace,body.dark-mode .product-card,html.dark-preload body .product-card{background:rgba(255,255,255,.065);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.13);box-shadow:0 10px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
body.dark-mode .topbar,html.dark-preload body .topbar,body.dark-mode .sidebar,html.dark-preload body .sidebar,body.dark-mode .mobile-bottom,html.dark-preload body .mobile-bottom{background:rgba(10,18,38,.6);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-color:rgba(255,255,255,.1)}
body.dark-mode .button.primary,html.dark-preload body .button.primary{background:linear-gradient(135deg,#2f7bff,#6a5cff);border-color:transparent;color:#fff}
body.dark-mode .mini-trend-card,html.dark-preload body .mini-trend-card{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.14)!important}
.brief-item{color:inherit;text-decoration:none;transition:transform .15s,border-color .15s}.brief-item:hover{transform:translateY(-1px)}
.txn-list{display:flex;flex-direction:column;gap:8px}
.txn{border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.txn-head{width:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:12px 14px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.txn-id strong{display:block;font-size:13px}.txn-id small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.txn-cust{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.txn-amt{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.txn-amt b{font-size:14px}
.txn-chev{color:var(--muted);transition:transform .2s}.txn.open .txn-chev{transform:rotate(180deg)}
.txn-body{padding:2px 14px 14px;border-top:1px dashed var(--line)}.txn-body[hidden]{display:none}
.txn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:12px}
.txn-grid small{display:block;font-size:10px;color:var(--muted);margin-bottom:2px}.txn-grid b{font-size:12px;overflow-wrap:anywhere}
@media(max-width:600px){.txn-head{grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"id amt chev" "cust amt chev"}.txn-id{grid-area:id}.txn-cust{grid-area:cust}.txn-amt{grid-area:amt}.txn-chev{grid-area:chev}}
body.dark-mode,html.dark-preload body{background:radial-gradient(900px 500px at 85% -5%,#16306b 0,transparent 60%),radial-gradient(700px 500px at 0% 100%,#2b1a5c 0,transparent 60%),#080f20 fixed!important}
body.dark-mode .main,body.dark-mode .layout,html.dark-preload body .main,html.dark-preload body .layout{background:transparent}

/* Camera barcode scanner */
.barcode-camera-backdrop{position:fixed;inset:0;z-index:1000;background:#07101dcc;display:flex;align-items:center;justify-content:center;padding:16px}
.barcode-camera-dialog{width:min(520px,100%);background:var(--surface,#fff);color:var(--ink,#202124);border:1px solid var(--line,#e6e8eb);border-radius:20px;padding:18px;box-shadow:0 24px 80px #0005}
.barcode-camera-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.barcode-video-wrap{position:relative;overflow:hidden;background:#050505;border-radius:14px;aspect-ratio:4/3;margin:14px 0}
.barcode-video-wrap video{width:100%;height:100%;object-fit:cover}
.barcode-scan-line{position:absolute;left:8%;right:8%;top:50%;height:2px;background:#47e6a3;box-shadow:0 0 12px #47e6a3;pointer-events:none}
.barcode-camera-status{font-size:13px;min-height:20px}
/* Fast numeric camera workflow */
.number-camera-dialog{width:min(560px,100%);max-height:94vh;overflow:auto}
.number-video-wrap{aspect-ratio:4/3;margin:12px 0 8px}
.number-target{position:absolute;inset:28% 9%;border:2px solid #72e0ad;border-radius:15px;box-shadow:0 0 0 999px #0003;pointer-events:none;display:flex;align-items:flex-end;justify-content:center}
.number-target span{background:#07101dcc;color:#fff;border-radius:8px;padding:5px 9px;font-size:11px;margin-bottom:-13px}
.number-camera-status{min-height:22px;font-size:12px;font-weight:700;padding:7px 0;color:var(--ink,#202124)}
.number-match{border:1px solid var(--line);border-radius:15px;padding:14px;margin:8px 0 12px;background:var(--surface-2,#f7f9fc)}
.number-match-title{font-weight:800;font-size:17px;line-height:1.3}.number-match-meta{font-size:12px;color:var(--muted);margin:6px 0 12px}
.number-qty-label{display:block;font-size:11px;font-weight:800;margin:12px 0 6px}.number-qty-row{display:grid;grid-template-columns:48px minmax(70px,120px) 48px;gap:8px;align-items:center}.number-qty-row input{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-align:center;font-size:20px;font-weight:800}
.number-match-buttons{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px}.number-camera-actions{display:flex;justify-content:flex-end}.number-camera-dialog header .tiny{margin-top:4px}
@media(max-width:520px){.barcode-camera-backdrop{padding:8px;align-items:center}.number-camera-dialog{padding:13px;border-radius:16px}.number-match-buttons .button{flex:1}.number-video-wrap{aspect-ratio:3/4}.number-target{inset:35% 7%}}

.number-candidate{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:10px 12px;margin:6px 0;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer}.number-candidate:hover{border-color:#72a7f7}.number-candidate span{display:flex;flex-direction:column;gap:4px}.number-candidate small{font-size:11px;color:var(--muted)}


/* Overview desktop-width layout: use the full area between sidebar and viewport edge. */
.content.home3{width:100%;max-width:none;margin:0;padding:30px clamp(18px,2vw,32px) 48px}
.content.home3 .h3-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.content.home3 .h3-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.content.home3 .h3-tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1200px){.content.home3{padding-left:28px;padding-right:28px}}

/* Copyright footer and product code camera action */
.site-copyright{display:block;text-align:center;padding:11px 16px 13px;margin:14px 0 0;color:var(--muted,#748094);font-size:12px;border-top:1px solid var(--line,rgba(120,130,150,.2));width:100%;box-sizing:border-box}.main>.site-copyright{margin-top:auto}.product-camera-trigger{display:inline-flex;align-items:center;gap:6px}.barcode-camera-backdrop{position:fixed;inset:0;background:rgba(4,8,18,.72);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.barcode-camera-dialog{width:min(520px,100%);max-height:92vh;overflow:auto;background:var(--card,#fff);color:var(--text,#172033);border-radius:18px;padding:18px;box-shadow:0 22px 70px rgba(0,0,0,.3)}.barcode-camera-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.barcode-video-wrap{position:relative;overflow:hidden;border-radius:12px;background:#070b12}.barcode-video-wrap video{max-height:55vh;object-fit:cover}.number-target{position:absolute;left:8%;right:8%;top:35%;height:30%;border:2px solid #31d49a;border-radius:10px;pointer-events:none;display:flex;align-items:flex-end;justify-content:center}.number-target span{background:rgba(0,0,0,.65);color:white;font-size:12px;padding:5px 8px;border-radius:5px;margin-bottom:-25px}.number-camera-status{font-size:13px;font-weight:600;margin:14px 0}

/* Mobile overview fix: four KPI cards remain landscape rectangles in a balanced 2x2 grid. */
@media (max-width: 760px) {
  .home3 .h3-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch; }
  .home3 .h3-stat { min-width: 0; min-height: 104px !important; padding: 13px 12px !important; display: flex; flex-direction: column; justify-content: center; border-radius: 13px; }
  .home3 .h3-stat strong { font-size: clamp(17px, 4.7vw, 22px) !important; line-height: 1.2; overflow-wrap: anywhere; }
  .home3 .h3-stat .h3-lab { font-size: 11px; line-height: 1.3; }
  .home3 .h3-stat small { font-size: 10px; line-height: 1.25; }
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .overview-metrics .metric, .overview-metrics .metric-sales { grid-row: auto !important; grid-column: auto !important; min-height: 112px !important; padding: 13px !important; }
  .grid.four:has(.metric-sales) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .metric[href] { min-height: 112px !important; padding: 13px !important; }
}
@media (max-width: 380px) {
  .home3 .h3-stats { gap: 8px !important; }
  .home3 .h3-stat { min-height: 98px !important; padding: 10px !important; }
  .home3 .h3-stat strong { font-size: 17px !important; }
}
/* Purchases & warehouse action launcher and focused sheets */
.ops-launchers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}.ops-launcher{display:flex;align-items:center;gap:13px;text-align:left;padding:18px;border:1px solid var(--line,#dce3ef);border-radius:16px;background:linear-gradient(135deg,var(--card,#fff),var(--surface,#f5f7fb));color:var(--text,#172033);font:inherit;font-weight:750;cursor:pointer;box-shadow:0 5px 16px #14213b0b;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.ops-launcher:hover,.ops-launcher:focus-visible{transform:translateY(-3px);box-shadow:0 12px 25px #14213b18;border-color:var(--accent,#5b7cfa);outline:none}.ops-launcher .launch-icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:#e8edff;color:#344fce;font-size:22px}.ops-launcher small{display:block;margin-top:4px;color:var(--muted,#667085);font-weight:500}.ops-grid.ops-grid-sheet-mode{display:none}.ops-sheet-backdrop{position:fixed;inset:0;z-index:1000;background:#080d18a6;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:opsFade .16s ease}.ops-sheet{width:min(760px,100%);max-height:min(88vh,900px);overflow:auto;background:var(--card,#fff);color:var(--text,#172033);border-radius:20px;box-shadow:0 24px 80px #0005;animation:opsRise .2s ease}.ops-sheet-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--card,#fff);border-bottom:1px solid var(--line,#e4e8ef)}.ops-sheet-head strong{font-size:16px}.ops-sheet-close{border:0;border-radius:10px;width:38px;height:38px;background:var(--surface,#f1f3f8);font-size:24px;cursor:pointer;color:inherit}.ops-sheet .ops-card{border:0;box-shadow:none;border-radius:0;padding:18px;margin:0}.ops-sheet .cardhead{margin-bottom:14px}@keyframes opsFade{from{opacity:0}to{opacity:1}}@keyframes opsRise{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}@media(max-width:760px){.ops-launchers{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ops-launcher{padding:12px;gap:9px}.ops-launcher .launch-icon{width:34px;height:34px}.ops-sheet-backdrop{padding:10px;align-items:flex-end}.ops-sheet{max-height:91vh;border-radius:20px 20px 10px 10px}.ops-sheet .ops-card{padding:14px}}

/* Performance-safe interaction and low-end fallbacks */
button,a,.nav,.mobile-bottom a,input,select,textarea{touch-action:manipulation}
@media (hover:none){.product-card:hover,.action-tile:hover,.metric[href]:hover,.brief-item:hover,.ops-launcher:hover{transform:none;box-shadow:none}}
html.perf-lite .scene-layer,html.perf-lite .scene,html.perf-lite .ambient-scene{display:none!important}
html.perf-lite .card,html.perf-lite .h3-stat,html.perf-lite .h3-tile,html.perf-lite .brief-item,html.perf-lite .txn,html.perf-lite .popup,html.perf-lite .workspace,html.perf-lite .product-card,html.perf-lite .topbar,html.perf-lite .sidebar,html.perf-lite .mobile-bottom{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.perf-lite .card,html.perf-lite .h3-stat,html.perf-lite .h3-tile,html.perf-lite .brief-item,html.perf-lite .txn,html.perf-lite .popup,html.perf-lite .workspace,html.perf-lite .product-card{background:var(--surface)!important}
html.perf-lite .topbar,html.perf-lite .sidebar,html.perf-lite .mobile-bottom{background:var(--surface)!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}