/* FrameCraft refined responsive visual system */
:root{--ink:#30241d;--muted:#7b6958;--line:#e6d9c8;--paper:#f6f0e6;--white:#fffdf9;--green:#563a29;--green2:#efe3d3;--lime:#d9bd91;--gold:#ad8051;--red:#a64e42;--shadow:0 10px 28px rgba(62,42,27,.075)}
html,body{background:var(--paper);color:var(--ink)}body{font-family:Inter,'DM Sans','Noto Sans Devanagari',system-ui,sans-serif}.sidebar{background:#38251b;color:#f9f1e6}.brand-mark{background:#e3cba8;color:#432c20}.nav button{color:#e5d8c9}.nav button .icon{color:#e2c69c}.nav button:hover,.nav button.active{background:#5b3b29;color:#fffaf1}.nav button.active{box-shadow:inset 3px 0 #e4c99b}.side-bottom{background:#2e1f18;border-color:#594230;color:#d9c8b7}.offline{color:#e5cba3}.dot{background:#d4ac73}.topbar{background:#fffdf9ed;border-color:#e6d9c8;box-shadow:0 4px 18px rgba(62,42,27,.06)}.crumb{color:#846f5b}.crumb strong{color:#39291f}.top-actions{border-color:#e6d9c8;background:#f8f2e9}.chip{color:#765b43;border-color:#e6d9c8}.switch{background:#efe6d8}.switch button{color:#715b47}.switch button.on{background:#533726;color:#fffaf4;box-shadow:0 2px 8px rgba(55,34,22,.2)}.btn.primary{background:#563a29;color:#fffaf4}.btn.primary:hover{background:#704b32}.btn.light,.btn.subtle{background:#fffdf9;border-color:#e3d4c1;color:#433126}.btn.danger{background:#a64e42}.card,.stat,.visit-record,.dashboard-shortcut,.modal,.bill-preview,.og-card,.og-job,.og-bill{background:#fffdf9;border-color:#e7dbcb;box-shadow:var(--shadow)}.heading h2,.card-head h3{color:#39281e}.heading .eyebrow,.eyebrow{color:#947452}.hero{background:linear-gradient(120deg,#432a1e 0%,#704c34 100%);color:#fffaf4}.hero .eyebrow{color:#e4c89d}.hero:after{border-color:#ffffff20;box-shadow:0 0 0 38px #ffffff0a,0 0 0 76px #ffffff07}.door{border-color:#e1c69b;box-shadow:12px 9px 0 #2d1d15}.door span{border-color:#cda879;background:#ffffff10}.door:after{background:#e7c999}.hero .btn{background:#e5c99c;color:#382619}.stat-top,.stat-foot{color:#826d58}.stat-value{color:#38271e}.shortcut-icon,.graphic-mark{background:#f2e6d3!important;color:#69452e!important}.dashboard-shortcut{color:#34271f}.dashboard-shortcut:hover{border-color:#b99468}.dashboard-shortcut small{color:#846f5b}.fc-icon{color:#765034}.billing-tab.active,.billing-flow-step.active,.subpage-btn.active{background:#563a29;color:#fffaf4;border-color:#563a29}.field input:focus,.field select:focus,.field textarea:focus,.search:focus{border-color:#a77b4e;box-shadow:0 0 0 3px #b9895425;outline:0}.table th{background:#f2e8da;color:#5a412e}.badge,.pill,.status-pill{background:#f1e5d4;color:#68482f;border-color:#e0ccb0}.progress>span,.progress-bar>span{background:linear-gradient(90deg,#785236,#c3a171)}.modal-head,.modal-foot{background:#fbf6ee;border-color:#e6d9c8}.header-home{border:1px solid #e6d9c8!important;background:#fffaf2!important;color:#513725!important;border-radius:12px!important;min-height:42px;padding:8px 12px!important;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.home-icon{color:#8b623c}.admin-menu-trigger{background:#543726!important;color:#fffaf4!important;border:1px solid #543726!important;border-radius:12px!important;min-height:42px;padding:8px 11px!important;display:flex;align-items:center;gap:8px;white-space:nowrap}.admin-mark{color:#e5c89a}.portal-role-menu{background:#fffdf9!important;border:1px solid #e7d9c8!important;box-shadow:0 14px 30px rgba(55,35,22,.18)!important;border-radius:14px!important}.portal-role-menu button{color:#39291f!important;min-height:48px}.portal-role-menu button:hover{background:#f4eadb!important}.graphic-mark{width:30px;height:30px;border-radius:10px;display:inline-grid;place-items:center;vertical-align:middle;margin-right:8px}.graphic-mark svg{width:17px;height:17px}.billing-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.billing-flow-arrow{color:#99754f;font-weight:800}.billing-flow-step{border-radius:12px!important;min-height:44px}
/* Character illustration on the admin dashboard */
.hero-art{overflow:visible}.workshop-guide{position:absolute;right:-3px;bottom:-2px;width:72px;height:98px;z-index:2;filter:drop-shadow(0 5px 7px #25160d44)}.workshop-guide svg{display:block;width:100%;height:100%}
@media(max-width:760px){
 html,body{width:100%;max-width:100%;overflow-x:hidden}.app{min-height:100dvh}.sidebar{position:fixed;inset:auto 0 0;width:100%;height:calc(68px + env(safe-area-inset-bottom));padding:5px 6px env(safe-area-inset-bottom);background:#3a261c;border:0;border-top:1px solid #765538;border-radius:18px 18px 0 0;box-shadow:0 -8px 24px rgba(47,30,20,.17);z-index:20}.brand,.nav-label,.side-bottom{display:none}.nav{height:58px;width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr;gap:4px;padding:0;overflow:visible;align-items:stretch}.nav button{min-width:0;width:100%;height:56px;min-height:52px;padding:5px 2px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;white-space:nowrap;font-size:10px;line-height:1.1;color:#f1e5d6}.nav button .icon{font-size:18px;line-height:1;color:#e2c69b}.nav button.active{background:#68472f;box-shadow:inset 0 2px #e5c99d;color:white}.nav button.active .icon{color:#f0d8b0}.main{margin-left:0;min-height:100dvh;padding-bottom:calc(82px + env(safe-area-inset-bottom))}.topbar{height:auto;min-height:62px;position:sticky;top:0;z-index:12;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:8px 10px;background:#fffdf9f2;border-radius:0 0 16px 16px;backdrop-filter:blur(14px)}.header-home{min-height:42px;padding:7px 9px!important;font-size:12px}.home-icon{font-size:18px}.crumb{min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;border:0;background:transparent;box-shadow:none;font-size:11px}.crumb span{display:none}.top-actions{min-width:0;padding:0;border:0;background:transparent;gap:6px}.top-actions .chip{display:none}.top-actions #languageSelect{width:76px!important;min-width:76px!important;max-width:76px!important;flex:0 0 76px!important;min-height:40px!important;padding:6px!important;font-size:12px!important;border-radius:11px}.top-actions .switch{padding:0;background:transparent}.admin-menu-trigger{min-height:40px!important;padding:7px 9px!important;font-size:12px!important;border-radius:11px!important}.portal-role-menu{position:absolute;right:10px;top:calc(100% + 8px);min-width:190px;z-index:22}.content{padding:16px 12px 22px;max-width:100%}.heading{align-items:flex-start;gap:8px;margin-bottom:14px}.heading h2{font-size:22px;line-height:1.22;letter-spacing:-.4px}.heading p{font-size:13px;margin-top:6px}.hero{padding:20px 18px;border-radius:22px;min-height:172px;margin-bottom:14px;gap:8px}.hero-copy{max-width:calc(100% - 72px)}.hero h2{font-size:22px;line-height:1.2}.hero p:not(.eyebrow){font-size:13px;line-height:1.5}.hero-art{width:74px;height:114px;flex:0 0 74px}.door{width:64px;height:91px;padding:5px;gap:4px;border-width:2px;box-shadow:7px 6px 0 #2d1d15}.door:after{right:3px;top:44px}.workshop-guide{width:49px;height:69px;right:-7px;bottom:-1px}.dashboard-shortcuts{grid-template-columns:1fr;gap:9px;margin-bottom:14px}.dashboard-shortcut{min-height:60px;padding:11px 12px;border-radius:16px}.shortcut-icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}.stat{min-width:0;padding:13px;border-radius:16px}.stat-value{font-size:20px}.card{padding:14px;border-radius:18px;margin-bottom:11px}.card-head{align-items:center}.card-head h3{font-size:16px}.btn,.billing-tab,.subpage-btn{min-height:48px;padding:10px 13px;border-radius:12px;font-size:13px}.btn.small{min-height:44px}.form-grid,.grid2,.supplier-grid,.machine-grid,.guide-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px}.field input,.field select,.field textarea,.search,.og-form input,.og-form select,.og-form textarea{min-height:48px;font-size:16px!important;border-radius:12px}.table-wrap{border-radius:12px}.modal{border-radius:20px}.og-photo{width:min(44vw,180px);height:126px;object-fit:cover;border-radius:14px}.photo-grid img,.work-photo,.fitting-photo{width:100%;max-height:220px;object-fit:cover;border-radius:14px}.visit-record{border-radius:14px}.billing-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.billing-flow-step{width:100%;min-width:0;min-height:54px;padding:7px 5px!important;font-size:11px}.billing-flow-arrow{display:none}.payment-total{font-size:22px}.manufacturing-actions{grid-template-columns:1fr 1fr;gap:8px}.manufacturing-actions .btn{min-height:50px;border-radius:13px}.graphic-mark{width:28px;height:28px;flex:0 0 28px}.hero .graphic-mark{display:none}
}
@media(min-width:761px){.topbar{min-height:70px}.sidebar{background:linear-gradient(180deg,#39251b,#2e1f18)}.content{padding-top:26px}.hero{border-radius:22px}.card,.stat,.dashboard-shortcut{border-radius:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Refined warm palette, typography and low-motion interactions */
:root{--ink:#30221b;--muted:#746354;--line:#e4d6c5;--paper:#f4ede2;--white:#fffdf9;--brown:#573827;--brown-deep:#38251b;--brass:#bb905c;--copper:#a66f48;--cream-soft:#eee1cf;--shadow:0 12px 30px rgba(62,40,25,.08)}
html,body{background:radial-gradient(ellipse at 82% 8%,#fff9ed 0%,transparent 40%),var(--paper);color:var(--ink)}
body{font-family:"DM Sans","Noto Sans Devanagari",system-ui,sans-serif;font-size:15px;line-height:1.55;font-optical-sizing:auto;letter-spacing:.005em}
:lang(hi),[lang="hi"]{font-family:"Noto Sans Devanagari","DM Sans",system-ui,sans-serif;line-height:1.65;letter-spacing:0}
h1,h2,h3,h4,.heading h2,.card-head h3,.hero h2{font-family:"DM Sans","Noto Sans Devanagari",system-ui,sans-serif;font-weight:650;letter-spacing:-.025em;line-height:1.25}
:lang(hi) h1,:lang(hi) h2,:lang(hi) h3,:lang(hi) h4{letter-spacing:0;line-height:1.45}
.heading p,.hero p:not(.eyebrow),.card p{line-height:1.65}
.card,.stat,.dashboard-shortcut,.portalDesignCards{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
@media(hover:hover){.card:hover,.stat:hover,.dashboard-shortcut:hover,.portalDesignCards:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(62,40,25,.11)}}
.btn,.nav button,.billing-tab,.subpage-btn,.header-home,.admin-menu-trigger{transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.btn:active,.nav button:active,.billing-tab:active,.subpage-btn:active{transform:scale(.98)}
.hero{isolation:isolate;overflow:hidden;background:linear-gradient(118deg,#3d281e 0%,#64432f 58%,#77533a 100%);box-shadow:0 18px 38px rgba(61,40,29,.16)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 36%,rgba(255,247,232,.07) 52%,transparent 72%);transform:translateX(-110%);animation:heroSheen 9s ease-in-out infinite}
.hero .eyebrow{color:#e8c99b}.shortcut-icon,.graphic-mark{background:#f2e5d2!important;color:#68452f!important}
.stat-icon,.stats .stat-top span:last-child{background:#f1e4d1!important;color:#68452f!important}
.badge,.pill,.status-pill{background:#f3e6d5;color:#69472e;border-color:#e5d2ba}
.topbar{box-shadow:0 6px 22px rgba(62,40,25,.07)}
.workshop-guide{transform-origin:50% 100%;animation:guideFloat 4.3s ease-in-out infinite}
.workshop-helper{position:absolute;width:39px;height:57px;left:-20px;bottom:-1px;z-index:2;transform-origin:50% 100%;animation:helperFloat 4.8s ease-in-out infinite}
@keyframes guideFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes helperFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes heroSheen{0%,70%,100%{transform:translateX(-110%)}85%{transform:translateX(110%)}}
@keyframes softEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.hero,.dashboard-shortcut,.stats .stat,.card{animation:softEnter .42s both ease-out}
.dashboard-shortcut:nth-child(2),.stats .stat:nth-child(2){animation-delay:.04s}.dashboard-shortcut:nth-child(3),.stats .stat:nth-child(3){animation-delay:.08s}.dashboard-shortcut:nth-child(4),.stats .stat:nth-child(4){animation-delay:.12s}
@media(max-width:600px){.workshop-helper{width:27px;height:40px;left:-12px;bottom:0}.hero-art{overflow:visible}.hero .hero-copy{max-width:calc(100% - 64px)}}
@media(prefers-reduced-motion:reduce){.hero:before,.workshop-guide,.workshop-helper,.hero,.dashboard-shortcut,.stats .stat,.card{animation:none!important}.card,.stat,.dashboard-shortcut{transition:none!important}}

/* Keep all dialogs above the sticky app bar and bottom navigation; scroll only the body. */
.modal-backdrop{z-index:1000!important;overflow-y:auto;overscroll-behavior:contain;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))!important}
.modal-backdrop.show{display:grid;align-items:center}
.modal{display:flex;flex-direction:column;width:min(620px,100%);max-height:min(90vh,820px);max-height:min(90dvh,820px);overflow:hidden}
.modal-head,.modal-foot{position:relative;z-index:2;flex:0 0 auto;background:#fffdf9}
.modal-head{border-radius:20px 20px 0 0}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal-foot{border-radius:0 0 20px 20px}
@media(max-width:760px){.modal-backdrop{padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))!important}.modal{width:100%;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);border-radius:18px}.modal-head{padding:13px 15px}.modal-body{padding:14px 15px}.modal-foot{padding:11px 15px}.modal-foot .btn{min-height:42px}}

/* Keep dialogs inside the mobile app content space, clear of header and bottom navigation. */
@media screen and (max-width:760px){.modal-backdrop{box-sizing:border-box;padding:calc(70px + env(safe-area-inset-top)) 8px calc(82px + env(safe-area-inset-bottom))!important;align-items:start!important}.modal-backdrop.show{align-items:start!important}.modal{box-sizing:border-box;width:100%;max-height:calc(100dvh - 152px)!important;margin:0 auto;min-height:0}.modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.modal-head,.modal-foot{flex-shrink:0}}

/* Larger mobile navigation and a single-row header. */
@media screen and (max-width:760px){
 body .topbar{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:6px!important;min-height:58px;height:auto;padding:8px!important}
 body .topbar>.crumb{display:none!important}
 body .topbar .header-home{flex:0 0 auto;min-height:40px!important;padding:7px 8px!important;font-size:12px!important;gap:4px!important}
 body .topbar .top-actions{display:flex!important;align-items:center;flex-wrap:nowrap!important;margin-left:auto;gap:6px!important;min-width:0}
 body .topbar .top-actions #languageSelect{width:76px!important;min-width:76px!important;max-width:76px!important;flex:0 0 76px!important;font-size:12px!important;min-height:40px!important;padding:4px!important}
 body .topbar #helpHeaderActions{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:6px!important;grid-area:auto!important;min-width:0}
 body .topbar #helpHeaderActions>.switch{display:flex!important;flex:0 0 auto!important;padding:0!important;border:0!important;background:none!important;min-width:0!important}
 body .topbar #helpHeaderActions .admin-menu-trigger{min-width:0!important;min-height:40px!important;padding:7px 8px!important;gap:4px!important;font-size:12px!important}
 body .topbar #appHelpButton{min-height:40px!important;padding:7px 9px!important;font-size:12px!important}
 body .sidebar{height:calc(146px + env(safe-area-inset-bottom))!important;padding:6px 8px env(safe-area-inset-bottom)!important;border-radius:20px 20px 0 0}
 body .sidebar #nav.nav{height:134px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:6px!important;align-items:stretch}
 body .sidebar #nav.nav button{height:64px!important;min-height:60px!important;padding:6px!important;gap:4px!important;border:1px solid #ffffff20;font-size:15px!important;font-weight:750!important;line-height:1.15!important;white-space:normal!important;color:#fff8ed;border-radius:13px;background:#ffffff08;touch-action:manipulation}
 body .sidebar #nav.nav button .icon{font-size:23px!important;line-height:1!important}
 body .sidebar #nav.nav button.active{background:#805b3c!important;border-color:#dcba88!important;box-shadow:inset 0 2px #e7c99d!important}
 body .main{padding-bottom:calc(162px + env(safe-area-inset-bottom))!important}
 body #pwaInstallBanner{bottom:calc(160px + env(safe-area-inset-bottom))!important}
 body .modal-backdrop{padding:calc(66px + env(safe-area-inset-top)) 8px calc(158px + env(safe-area-inset-bottom))!important}
 body .modal{max-height:calc(100dvh - 232px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}
}

/* Keep the six main destinations on one mobile row. */
@media screen and (max-width:760px){
 body .sidebar{height:calc(82px + env(safe-area-inset-bottom))!important;padding:6px 5px env(safe-area-inset-bottom)!important}
 body .sidebar #nav.nav{height:70px!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:1fr!important;gap:3px!important}
 body .sidebar #nav.nav button{height:66px!important;min-height:60px!important;padding:5px 1px!important;gap:5px!important;font-size:13px!important;white-space:nowrap!important;border-radius:11px}
 body .sidebar #nav.nav button .icon{font-size:23px!important}
 body .main{padding-bottom:calc(98px + env(safe-area-inset-bottom))!important}
 body #pwaInstallBanner{bottom:calc(96px + env(safe-area-inset-bottom))!important}
 body .modal-backdrop{padding:calc(66px + env(safe-area-inset-top)) 8px calc(94px + env(safe-area-inset-bottom))!important}
 body .modal{max-height:calc(100dvh - 168px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}
}

/* Consistent line graphics and a quieter app dock. */
#nav .icon svg{display:block;width:24px;height:24px;margin:auto}
@media screen and (max-width:760px){
 body .sidebar{background:#3e2c24!important;border-top:1px solid #a1805e!important;box-shadow:0 -4px 20px #2e1e181c!important;border-radius:20px 20px 0 0!important}
 body .sidebar #nav.nav{gap:2px!important}
 body .sidebar #nav.nav button{background:transparent!important;border:0!important;box-shadow:none!important;color:#e6d9cb!important;font-size:13px!important;font-weight:650!important;border-radius:14px!important;gap:6px!important;transition:background .16s ease,color .16s ease}
 body .sidebar #nav.nav button .icon{display:grid;place-items:center;min-height:25px;color:inherit!important;font-size:22px!important}
 body .sidebar #nav.nav button.active{background:#f2e3ce!important;color:#4e3526!important;box-shadow:0 2px 6px #21130d15!important;border:0!important;font-weight:800!important}
 body .sidebar #nav.nav button.active .icon{color:#805936!important}
 body .sidebar #nav.nav button:focus-visible{outline:2px solid #e8c99d!important;outline-offset:-2px}
}