/* Generated from backend Blade inline styles. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Dashboard */

            body.sd-page-dashboard{
                --primary: #fa4682;
                --primary-dark: #f8085b;
                --primary-gradient: linear-gradient(135deg, #fa4682, #f8085b);
                --primary-light: #fbeaf0;
                --accent: #185fa5;
                --success: #3b6d11;
                --warning: #854f0b;
                --danger: #a32d2d;
                --purple: #185fa5;
                --bg: #f5f6f8;
                --surface: #ffffff;
                --surface-2: #faf8f2;
                --border: #e2e4e9;
                --border-strong: #d3d1c9;
                --text-1: #1a1a2e;
                --text-2: #5f5e5a;
                --text-3: #888780;
                --sidebar-bg: #1a1a2e;
                --sidebar-text: rgba(255, 255, 255, 0.5);
                --sidebar-hover: rgba(248,8,91, 0.14);
                --sidebar-w: 240px;
                --radius-sm: 8px;
                --radius-md: 12px;
                --radius-lg: 16px;
                --radius-xl: 20px;
                --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
                --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
                --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
            }
            body.sd-page-dashboard .mobile-dashboard-shell{ display: none; }
            body.sd-page-dashboard .mobile-dashboard-shell,
body.sd-page-dashboard .mobile-dashboard-shell *{ box-sizing: border-box; }

            body.sd-page-dashboard .mobile-dashboard-shell a{ text-decoration: none; }

            body.sd-page-dashboard .mobile-phone-wrap{
                display: flex;
                justify-content: center;
                padding: 10px 0 22px;
            }

            body.sd-page-dashboard .mobile-phone{
                width: min(100%, 390px);
                min-height: 760px;
                background: linear-gradient(180deg, #f9fbff 0%, #f5f7fb 100%);
                border-radius: 34px;
                border: 1px solid #d7ddea;
                overflow: hidden;
                position: relative;
                box-shadow: 0 24px 52px -26px rgba(15, 23, 42, 0.34), 0 6px 18px -14px rgba(15, 23, 42, 0.28);
            }

            body.sd-page-dashboard .mobile-notch{
                background: linear-gradient(180deg, #22263a 0%, #181c2f 100%);
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }

            body.sd-page-dashboard .mobile-notch-pill{
                width: 90px;
                height: 10px;
                background: #0a0a1a;
                border-radius: 10px;
            }

            body.sd-page-dashboard .mobile-screen{
                display: flex;
                flex-direction: column;
                min-height: calc(100vh - 16px);
                background: linear-gradient(180deg, #f8fafc 0%, #f2f5fa 100%);
            }

            body.sd-page-dashboard .mobile-status-bar{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 6px 18px;
                font-size: 11px;
                font-weight: 600;
                color: #fff;
                background: var(--primary-gradient);
            }

            body.sd-page-dashboard .mobile-header{
                background:
                    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 38%),
                    radial-gradient(circle at 82% 4%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 30%),
                    var(--primary-gradient);
                padding: 14px 18px 24px;
                color: #fff;
                position: relative;
                border-bottom: 1px solid rgba(255, 255, 255, 0.24);
                box-shadow: 0 18px 34px -22px rgba(248,8,91, 0.62);
                overflow: hidden;
            }

            body.sd-page-dashboard .mobile-header::after{
                content: '';
                position: absolute;
                inset: auto -18% -42% -18%;
                height: 64%;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
                pointer-events: none;
            }

            body.sd-page-dashboard .mobile-header-top{
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
                margin-bottom: 14px;
            }

            body.sd-page-dashboard .mobile-shop-info{
                display: flex;
                align-items: center;
                gap: 10px;
                min-width: 0;
            }

            body.sd-page-dashboard .mobile-shop-avatar{
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.25);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                font-weight: 700;
                color: #fff;
                border: 2px solid rgba(255, 255, 255, 0.5);
                flex-shrink: 0;
            }

            body.sd-page-dashboard .mobile-shop-copy{ min-width: 0; }
            body.sd-page-dashboard .mobile-shop-name{
                font-size: 15px;
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            body.sd-page-dashboard .mobile-shop-sub{
                font-size: 11px;
                opacity: .85;
                margin-top: 1px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            body.sd-page-dashboard .mobile-header-icons{
                display: flex;
                gap: 12px;
                align-items: center;
                flex-shrink: 0;
            }

            body.sd-page-dashboard .mobile-hicon{
                width: 34px;
                height: 34px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.24);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                color: #fff;
                border: 1px solid rgba(255, 255, 255, 0.34);
                position: relative;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
            }
            body.sd-page-dashboard .mobile-hicon svg{
                width: 16px;
                height: 16px;
                stroke-width: 2;
            }

            body.sd-page-dashboard .mobile-notif-dot{
                position: absolute;
                top: -2px;
                right: -2px;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #ffd700;
                border: 1.5px solid #b50d55;
            }

            body.sd-page-dashboard .mobile-balance-card{
                background: rgba(255, 255, 255, 0.2);
                border-radius: 16px;
                padding: 12px 16px;
                border: 1px solid rgba(255, 255, 255, 0.36);
                backdrop-filter: blur(4px);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
            }

            body.sd-page-dashboard .mobile-balance-label{ font-size: 11px; opacity: .85; margin-bottom: 2px; }
            body.sd-page-dashboard .mobile-balance-amount{ font-size: 26px; font-weight: 800; letter-spacing: -.5px; }

            body.sd-page-dashboard .mobile-balance-row{
                display: flex;
                gap: 16px;
                margin-top: 8px;
            }

            body.sd-page-dashboard .mobile-balance-mini{ flex: 1; min-width: 0; }
            body.sd-page-dashboard .mobile-balance-mini-label{
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 10px;
                opacity: .8;
            }
            body.sd-page-dashboard .mobile-balance-mini-label svg{
                width: 12px;
                height: 12px;
                stroke-width: 2;
            }
            body.sd-page-dashboard .mobile-balance-mini-val{ font-size: 14px; font-weight: 700; }

            body.sd-page-dashboard .mobile-flash-stack{
                padding: 12px 16px 0;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            body.sd-page-dashboard .mobile-flash-card{
                border-radius: 12px;
                padding: 10px 12px;
                font-size: 12px;
                font-weight: 700;
                box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
            }

            body.sd-page-dashboard .mobile-flash-card.success{
                background: #ecfdf5;
                color: #065f46;
                border-left: 4px solid #10b981;
            }

            body.sd-page-dashboard .mobile-flash-card.error{
                background: #fef2f2;
                color: #991b1b;
                border-left: 4px solid #ef4444;
            }

            body.sd-page-dashboard .mobile-quick-grid{
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
                padding: 0 16px;
                margin-top: clamp(6px, 2.5vw, 14px);
            }

            body.sd-page-dashboard .mobile-quick-btn{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                color: #1a1a2e;
            }

            body.sd-page-dashboard .mobile-quick-icon{
                width: 52px;
                height: 52px;
                border-radius: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                box-shadow: 0 14px 22px -14px rgba(15, 23, 42, 0.44);
            }
            body.sd-page-dashboard .mobile-quick-icon svg{
                width: 20px;
                height: 20px;
                stroke-width: 1.8;
            }

            body.sd-page-dashboard .mobile-quick-label{
                font-size: 11px;
                font-weight: 600;
                color: #1a1a2e;
                text-align: center;
                line-height: 1.3;
            }

            body.sd-page-dashboard .mobile-quick-icon.sale{ background: var(--primary-gradient); }
            body.sd-page-dashboard .mobile-quick-icon.expense{ background: linear-gradient(135deg, #f7941d, #ffb347); }
            body.sd-page-dashboard .mobile-quick-icon.product{ background: linear-gradient(135deg, #334155, #64748b); }
            body.sd-page-dashboard .mobile-quick-icon.customer{ background: linear-gradient(135deg, #0f766e, #14b8a6); }
            body.sd-page-dashboard .mobile-quick-icon.supplier{ background: linear-gradient(135deg, #6d4c41, #a1887f); }
            body.sd-page-dashboard .mobile-quick-icon.baki{ background: linear-gradient(135deg, #1565c0, #4285f4); }
            body.sd-page-dashboard .mobile-quick-icon.stock{ background: linear-gradient(135deg, #1a9e5a, #34c97a); }
            body.sd-page-dashboard .mobile-quick-icon.cash-box{ background: linear-gradient(135deg, #0f766e, #10b981); }
            body.sd-page-dashboard .mobile-quick-icon.invoice{ background: linear-gradient(135deg, #7b2ff7, #a855f7); }
            body.sd-page-dashboard .mobile-quick-icon.sms{ background: linear-gradient(135deg, #0097a7, #26c6da); }
            body.sd-page-dashboard .mobile-quick-icon.report{ background: linear-gradient(135deg, #e53935, #ef5350); }
            body.sd-page-dashboard .mobile-quick-icon.more{ background: linear-gradient(135deg, #455a64, #78909c); }

            body.sd-page-dashboard .mobile-quick-actions-block{
                position: relative;
            }

            body.sd-page-dashboard .mobile-quick-more-wrap{
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 18px 16px 2px;
                margin-top: 2px;
            }

            body.sd-page-dashboard .mobile-quick-more-wrap::before{
                content: '';
                position: absolute;
                left: 16px;
                right: 16px;
                top: 50%;
                height: 1px;
                transform: translateY(-50%);
                background: linear-gradient(90deg, rgba(248,8,91, 0), rgba(248,8,91, 0.22), rgba(248,8,91, 0));
            }

            body.sd-page-dashboard .mobile-quick-more-wrap::after{
                content: '';
                position: absolute;
                inset: 2px 16px auto;
                height: 56px;
                border-radius: 999px;
                background: linear-gradient(90deg, rgba(29, 78, 216, 0.08), rgba(255, 255, 255, 0), rgba(248,8,91, 0.1));
                filter: blur(12px);
                pointer-events: none;
            }

            body.sd-page-dashboard .mobile-quick-more-toggle{
                position: relative;
                z-index: 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                min-width: 150px;
                cursor: pointer;
                appearance: none;
                border: 1px solid rgba(248,8,91, 0.12);
                background: rgba(255, 255, 255, 0.96);
                color: #e11d74;
                padding: 12px 22px;
                border-radius: 999px;
                font-size: 15px;
                font-weight: 800;
                letter-spacing: -0.01em;
                box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.45), 0 4px 14px rgba(226, 232, 240, 0.55);
                transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
            }

            body.sd-page-dashboard .mobile-quick-more-toggle.is-open{
                box-shadow: 0 16px 30px -22px rgba(225, 29, 116, 0.45), 0 6px 16px rgba(226, 232, 240, 0.6);
            }

            body.sd-page-dashboard .mobile-quick-more-toggle:active{
                transform: translateY(1px) scale(0.99);
            }

            body.sd-page-dashboard .mobile-quick-more-text{
                line-height: 1;
            }

            body.sd-page-dashboard .mobile-quick-more-chevron{
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 18px;
                height: 18px;
                transition: transform 0.2s ease;
            }

            body.sd-page-dashboard .mobile-quick-more-chevron svg{
                width: 16px;
                height: 16px;
                stroke-width: 2.4;
            }

            body.sd-page-dashboard .mobile-quick-more-chevron.is-open{
                transform: rotate(180deg);
            }

            body.sd-page-dashboard .mobile-quick-more-panel{
                overflow: hidden;
                padding-top: 4px;
            }

            body.sd-page-dashboard .mobile-quick-more-panel.hidden{
                display: none;
            }

            body.sd-page-dashboard .mobile-quick-more-panel .mobile-quick-grid{
                margin-top: 0;
            }

            body.sd-page-dashboard .mobile-spacer{ height: 16px; }

            body.sd-page-dashboard .mobile-alert-strip{
                display: flex;
                align-items: center;
                gap: 8px;
                background: #fff8e1;
                border-left: 4px solid #f7941d;
                margin: 10px 16px 0;
                padding: 10px 12px;
                border-radius: 0 10px 10px 0;
                font-size: 12px;
                color: #7c4f00;
                font-weight: 600;
            }
            body.sd-page-dashboard .mobile-alert-strip svg{
                width: 14px;
                height: 14px;
                stroke-width: 2;
                flex-shrink: 0;
            }

            body.sd-page-dashboard .mobile-alert-strip.alert-ok{
                background: #effcf5;
                border-left-color: #1a9e5a;
                color: #0f7a43;
            }

            body.sd-page-dashboard .mobile-section{ padding: 16px 16px 0; }
            body.sd-page-dashboard .mobile-section-title{
                font-size: 13px;
                font-weight: 700;
                color: #6b7280;
                text-transform: uppercase;
                letter-spacing: .5px;
                margin-bottom: 12px;
            }

            body.sd-page-dashboard .mobile-stats-row{
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                padding: 0 16px;
            }

            body.sd-page-dashboard .mobile-stat-card{
                background: #fff;
                border-radius: 10px;
                padding: 14px;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
                position: relative;
                overflow: hidden;
                color: #1a1a2e;
            }

            body.sd-page-dashboard .mobile-stat-card::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
            }

            body.sd-page-dashboard .mobile-stat-card.pink::before{ background: var(--primary); }
            body.sd-page-dashboard .mobile-stat-card.orange::before{ background: #f7941d; }
            body.sd-page-dashboard .mobile-stat-card.green::before{ background: #1a9e5a; }
            body.sd-page-dashboard .mobile-stat-card.blue::before{ background: #1565c0; }

            body.sd-page-dashboard .mobile-stat-label{ font-size: 11px; color: #6b7280; font-weight: 600; margin-bottom: 4px; }
            body.sd-page-dashboard .mobile-stat-val{ font-size: 20px; font-weight: 800; color: #1a1a2e; }
            body.sd-page-dashboard .mobile-stat-sub{ font-size: 10px; color: #6b7280; margin-top: 2px; }
            body.sd-page-dashboard .mobile-stat-icon{
                position: absolute;
                right: 10px;
                top: 14px;
                opacity: .15;
            }
            body.sd-page-dashboard .mobile-stat-icon svg{
                width: 22px;
                height: 22px;
                stroke-width: 2;
            }

            body.sd-page-dashboard .mobile-sale-list{
                padding: 0 16px;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            body.sd-page-dashboard .mobile-sale-item{
                background: #fff;
                border-radius: 10px;
                padding: 12px 14px;
                display: flex;
                align-items: center;
                gap: 12px;
                box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
                color: #1a1a2e;
            }

            body.sd-page-dashboard .mobile-sale-avatar{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                font-weight: 700;
                flex-shrink: 0;
            }

            body.sd-page-dashboard .mobile-sale-avatar.pink{ background: var(--primary-light); color: var(--primary); }
            body.sd-page-dashboard .mobile-sale-avatar.blue{ background: #e3f2fd; color: #1565c0; }
            body.sd-page-dashboard .mobile-sale-avatar.green{ background: #e8f5e9; color: #1a9e5a; }
            body.sd-page-dashboard .mobile-sale-avatar.orange{ background: #fff3e0; color: #f7941d; }

            body.sd-page-dashboard .mobile-sale-info{ flex: 1; min-width: 0; }
            body.sd-page-dashboard .mobile-sale-name{ font-size: 14px; font-weight: 700; color: #1a1a2e; }
            body.sd-page-dashboard .mobile-sale-time{ font-size: 11px; color: #6b7280; margin-top: 2px; }
            body.sd-page-dashboard .mobile-sale-right{ text-align: right; }
            body.sd-page-dashboard .mobile-sale-amount{ font-size: 15px; font-weight: 800; color: #1a1a2e; }

            body.sd-page-dashboard .mobile-sale-badge{
                display: inline-block;
                font-size: 10px;
                font-weight: 700;
                padding: 2px 8px;
                border-radius: 20px;
                margin-top: 3px;
            }

            body.sd-page-dashboard .mobile-sale-badge.paid{ background: #e8f5e9; color: #1a9e5a; }
            body.sd-page-dashboard .mobile-sale-badge.baki{ background: var(--primary-light); color: var(--primary); }
            body.sd-page-dashboard .mobile-sale-badge.partial{ background: #fff3e0; color: #f7941d; }

            body.sd-page-dashboard .mobile-empty-card{
                background: #fff;
                border-radius: 10px;
                padding: 14px;
                text-align: center;
                color: #6b7280;
                font-size: 12px;
                box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
            }

            body.sd-page-dashboard .mobile-dashboard-shell .mobile-bottom-nav{
                position: sticky;
                bottom: 0;
                background: rgba(255, 255, 255, 0.92);
                border-top: 1px solid rgba(209, 213, 219, 0.78);
                display: flex;
                padding: 8px 0 12px;
                z-index: 100;
                margin-top: auto;
                backdrop-filter: blur(14px);
            }

            body.sd-page-dashboard .mobile-nav-item{
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 3px;
                color: #6b7280;
                padding: 4px 0;
            }

            body.sd-page-dashboard .mobile-nav-icon{
                display: inline-flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
            }
            body.sd-page-dashboard .mobile-nav-label{ font-size: 10px; font-weight: 600; color: #6b7280; }
            body.sd-page-dashboard .mobile-nav-item.active .mobile-nav-label{ color: var(--primary); }
            body.sd-page-dashboard .mobile-nav-item.active .mobile-nav-icon{ filter: drop-shadow(0 0 3px rgba(226, 19, 110, 0.4)); }

            body.sd-page-dashboard .mobile-nav-pos{
                flex: 0 0 64px;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: -22px;
                color: var(--primary);
            }

            body.sd-page-dashboard .mobile-nav-pos-btn{
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: var(--primary-gradient);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                box-shadow: 0 4px 16px rgba(226, 19, 110, 0.45);
                border: 3px solid #fff;
                color: #fff;
            }

            body.sd-page-dashboard .mobile-nav-pos-label{
                font-size: 10px;
                font-weight: 700;
                color: var(--primary);
                margin-top: 2px;
            }
            body.sd-page-dashboard .content{ flex: 1; }

            body.sd-page-dashboard .dashboard-flash{
                margin-bottom: 14px;
                padding: 12px 14px;
                border-radius: var(--radius-md);
                border: 1px solid var(--border);
                background: var(--surface);
                box-shadow: var(--shadow-sm);
                font-size: 12.5px;
                font-weight: 600;
            }

            body.sd-page-dashboard .dashboard-flash.success{
                border-color: #a7f3d0;
                background: #ecfdf5;
                color: #065f46;
            }

            body.sd-page-dashboard .dashboard-flash.error{
                border-color: #fecaca;
                background: #fef2f2;
                color: #991b1b;
            }

            body.sd-page-dashboard .quick-actions{
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: 12px;
                margin-bottom: 22px;
            }

            body.sd-page-dashboard .mobile-app-shortcuts{ display: none; }
            body.sd-page-dashboard .mobile-app-grid{
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 10px;
            }
            body.sd-page-dashboard .mobile-app-btn{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                text-decoration: none;
                color: var(--text-1);
            }
            body.sd-page-dashboard .mobile-app-icon{
                width: 54px;
                height: 54px;
                border-radius: 16px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.4);
            }
            body.sd-page-dashboard .mobile-app-icon svg{
                width: 22px;
                height: 22px;
                stroke-width: 2;
            }
            body.sd-page-dashboard .mobile-app-label{
                font-size: 11px;
                font-weight: 700;
                line-height: 1.2;
                text-align: center;
                color: var(--text-1);
            }

            body.sd-page-dashboard .mobile-app-icon.sale{ background: var(--primary-gradient); }
            body.sd-page-dashboard .mobile-app-icon.expense{ background: linear-gradient(135deg, #f7941d, #ffb347); }
            body.sd-page-dashboard .mobile-app-icon.product{ background: linear-gradient(135deg, #334155, #64748b); }
            body.sd-page-dashboard .mobile-app-icon.customer{ background: linear-gradient(135deg, #0f766e, #14b8a6); }
            body.sd-page-dashboard .mobile-app-icon.supplier{ background: linear-gradient(135deg, #6d4c41, #a1887f); }
            body.sd-page-dashboard .mobile-app-icon.baki{ background: linear-gradient(135deg, #1565c0, #4285f4); }
            body.sd-page-dashboard .mobile-app-icon.stock{ background: linear-gradient(135deg, #1a9e5a, #34c97a); }
            body.sd-page-dashboard .mobile-app-icon.cash-box{ background: linear-gradient(135deg, #0f766e, #10b981); }
            body.sd-page-dashboard .mobile-app-icon.invoice{ background: linear-gradient(135deg, #7b2ff7, #a855f7); }
            body.sd-page-dashboard .mobile-app-icon.sms{ background: linear-gradient(135deg, #0097a7, #26c6da); }
            body.sd-page-dashboard .mobile-app-icon.report{ background: linear-gradient(135deg, #e53935, #ef5350); }

            body.sd-page-dashboard .qa-btn{
                background: var(--surface);
                border: 1.5px solid var(--border);
                border-radius: var(--radius-md);
                padding: 14px 12px;
                display: flex;
                align-items: center;
                gap: 12px;
                cursor: pointer;
                transition: all .2s ease;
                text-decoration: none;
            }

            body.sd-page-dashboard .qa-btn:hover{ border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); transform: translateY(-1px); }
            body.sd-page-dashboard .qa-icon{
                width: 40px;
                height: 40px;
                border-radius: var(--radius-sm);
                display: grid;
                place-items: center;
                font-size: 18px;
                flex-shrink: 0;
            }

            body.sd-page-dashboard .qa-icon.blue{ background: #dbeafe; color: #1d4ed8; }
            body.sd-page-dashboard .qa-icon.green{ background: #d1fae5; color: #065f46; }
            body.sd-page-dashboard .qa-icon.orange{ background: #fed7aa; color: #92400e; }
            body.sd-page-dashboard .qa-icon.purple{ background: #ede9fe; color: #5b21b6; }
            body.sd-page-dashboard .qa-label{ font-size: 13.5px; font-weight: 600; color: var(--text-1); }
            body.sd-page-dashboard .qa-sub{ font-size: 11px; color: var(--text-3); margin-top: 1px; }

            body.sd-page-dashboard .stat-grid{
                display: grid;
                grid-template-columns: repeat(5, minmax(0, 1fr));
                gap: 14px;
                margin-bottom: 22px;
            }

            body.sd-page-dashboard .stat-card{
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                padding: 18px 20px;
                position: relative;
                overflow: hidden;
                transition: box-shadow .2s, transform .2s;
            }

            body.sd-page-dashboard .stat-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
            body.sd-page-dashboard .stat-card::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
            }

            /* .stat-card.c1::before { background: var(--primary); }
            .stat-card.c2::before { background: var(--success); }
            .stat-card.c3::before { background: var(--warning); }
            .stat-card.c4::before { background: var(--danger); }
            .stat-card.c5::before { background: var(--purple); }
            .stat-card.c6::before { background: var(--accent); }
            .stat-card.c7::before { background: #10b981; }
            .stat-card.c8::before { background: #f43f5e; } */

            body.sd-page-dashboard .stat-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
            body.sd-page-dashboard .stat-icon-wrap{
                width: 36px;
                height: 36px;
                border-radius: var(--radius-sm);
                display: grid;
                place-items: center;
                font-size: 16px;
            }

            body.sd-page-dashboard .c1 .stat-icon-wrap{ background: #dbeafe; color: #1d4ed8; }
            body.sd-page-dashboard .c2 .stat-icon-wrap{ background: #d1fae5; color: #065f46; }
            body.sd-page-dashboard .c3 .stat-icon-wrap{ background: #fef3c7; color: #92400e; }
            body.sd-page-dashboard .c4 .stat-icon-wrap{ background: #fee2e2; color: #991b1b; }
            body.sd-page-dashboard .c5 .stat-icon-wrap{ background: #ede9fe; color: #5b21b6; }
            body.sd-page-dashboard .c6 .stat-icon-wrap{ background: #cffafe; color: #155e75; }
            body.sd-page-dashboard .c7 .stat-icon-wrap{ background: #d1fae5; color: #065f46; }
            body.sd-page-dashboard .c8 .stat-icon-wrap{ background: #ffe4e6; color: #9f1239; }

            body.sd-page-dashboard .stat-trend{
                font-size: 10.5px;
                font-weight: 600;
                padding: 3px 7px;
                border-radius: 99px;
            }

            body.sd-page-dashboard .stat-trend.up{ background: #d1fae5; color: #065f46; }
            body.sd-page-dashboard .stat-trend.down{ background: #fee2e2; color: #991b1b; }
            body.sd-page-dashboard .stat-trend.neu{ background: #f1f5f9; color: #475569; }
            body.sd-page-dashboard .stat-label{ font-size: 15.5px; color: var(--text-3); font-weight: 600; margin-bottom: 4px; }
            body.sd-page-dashboard .stat-value{ font-size: 22px; font-weight: 700; color: var(--text-1); line-height: 1; font-family: 'JetBrains Mono', monospace; }
            body.sd-page-dashboard .stat-sub{ font-size: 11px; color: var(--text-3); margin-top: 5px; }

            body.sd-page-dashboard .two-col{ display: grid; grid-template-columns: 1fr 340px; gap: 16px; margin-bottom: 22px; }
            body.sd-page-dashboard .three-col{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 22px; }

            body.sd-page-dashboard .panel{
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                overflow: hidden;
            }

            body.sd-page-dashboard .panel-head{
                padding: 16px 20px;
                border-bottom: 1px solid var(--border);
                display: flex;
                align-items: center;
                gap: 10px;
            }

            body.sd-page-dashboard .panel-title{ font-size: 17px; font-weight: 700; color: var(--text-1); }
            body.sd-page-dashboard .panel-actions{ margin-left: auto; display: flex; gap: 8px; }
            body.sd-page-dashboard .panel-body{ padding: 16px 20px; }

            body.sd-page-dashboard .link-btn{
                font-size: 12px;
                font-weight: 600;
                color: var(--primary);
                background: var(--primary-light);
                border: none;
                padding: 5px 12px;
                border-radius: var(--radius-sm);
                cursor: pointer;
                text-decoration: none;
                transition: background .15s;
            }

            body.sd-page-dashboard .link-btn:hover{ background: #bae6fd; }

            body.sd-page-dashboard .chart-area{
                height: 180px;
                background: linear-gradient(to bottom, #f0f9ff, #fff);
                border-radius: var(--radius-sm);
                position: relative;
                overflow: hidden;
                display: flex;
                align-items: flex-end;
                gap: 6px;
                padding: 0 4px 0;
            }

            body.sd-page-dashboard .bar{
                flex: 1;
                border-radius: 4px 4px 0 0;
                background: var(--primary-light);
                transition: height .3s ease;
                cursor: pointer;
                position: relative;
            }

            body.sd-page-dashboard .bar:hover{ background: var(--primary); }
            body.sd-page-dashboard .bar.today{ background: var(--primary); }
            body.sd-page-dashboard .chart-labels{ display: flex; gap: 6px; padding: 0 4px; margin-top: 6px; }
            body.sd-page-dashboard .chart-label{ flex: 1; text-align: center; font-size: 9.5px; color: var(--text-3); }

            body.sd-page-dashboard table{ width: 100%; border-collapse: collapse; }
            body.sd-page-dashboard thead th{
                padding: 10px 14px;
                font-size: 10.5px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: .06em;
                color: var(--text-3);
                background: var(--surface-2);
                border-bottom: 1px solid var(--border);
                text-align: left;
            }

            body.sd-page-dashboard tbody tr{ border-bottom: 1px solid var(--border); transition: background .15s; }
            body.sd-page-dashboard tbody tr:last-child{ border: none; }
            body.sd-page-dashboard tbody tr:hover{ background: var(--surface-2); }
            body.sd-page-dashboard tbody td{ padding: 11px 14px; font-size: 12.5px; color: var(--text-1); vertical-align: middle; }

            body.sd-page-dashboard .badge{
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 3px 8px;
                border-radius: 99px;
                font-size: 10.5px;
                font-weight: 600;
            }

            body.sd-page-dashboard .badge.paid{ background: #d1fae5; color: #065f46; }
            body.sd-page-dashboard .badge.partial{ background: #fef3c7; color: #92400e; }
            body.sd-page-dashboard .badge.due{ background: #fee2e2; color: #991b1b; }
            body.sd-page-dashboard .badge.dot::before{
                content: '';
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: currentColor;
            }

            body.sd-page-dashboard .cust-item{
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 10px 0;
                border-bottom: 1px solid var(--border);
            }

            body.sd-page-dashboard .cust-item:last-child{ border: none; }
            body.sd-page-dashboard .cust-ava{
                width: 34px;
                height: 34px;
                border-radius: 50%;
                display: grid;
                place-items: center;
                font-size: 13px;
                font-weight: 700;
                color: #fff;
                flex-shrink: 0;
            }

            body.sd-page-dashboard .cust-name{ font-size: 13px; font-weight: 600; }
            body.sd-page-dashboard .cust-phone{ font-size: 11px; color: var(--text-3); }
            body.sd-page-dashboard .cust-due{
                margin-left: auto;
                text-align: right;
                font-size: 13px;
                font-weight: 700;
                color: var(--danger);
                font-family: 'JetBrains Mono', monospace;
            }

            body.sd-page-dashboard .cust-due-label{ font-size: 10px; color: var(--text-3); }

            body.sd-page-dashboard .stock-item{
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 9px 0;
                border-bottom: 1px solid var(--border);
            }

            body.sd-page-dashboard .stock-item:last-child{ border: none; }
            body.sd-page-dashboard .stock-img{
                width: 34px;
                height: 34px;
                border-radius: var(--radius-sm);
                background: var(--surface-2);
                border: 1px solid var(--border);
                display: grid;
                place-items: center;
                font-size: 18px;
            }

            body.sd-page-dashboard .stock-name{ font-size: 12.5px; font-weight: 600; }
            body.sd-page-dashboard .stock-qty{ font-size: 11px; color: var(--danger); font-weight: 600; }
            body.sd-page-dashboard .stock-bar-wrap{
                flex: 1;
                height: 4px;
                background: #fee2e2;
                border-radius: 99px;
                overflow: hidden;
            }

            body.sd-page-dashboard .stock-bar{ height: 100%; background: var(--danger); border-radius: 99px; }

            body.sd-page-dashboard .info-row{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 9px 0;
                border-bottom: 1px solid var(--border);
                font-size: 15.5px;
            }

            body.sd-page-dashboard .info-row:last-child{ border: none; }
            body.sd-page-dashboard .info-key{ color: var(--text-2); }
            body.sd-page-dashboard .info-val{ font-weight: 700; font-family: 'JetBrains Mono', monospace; }
            body.sd-page-dashboard .info-val.green{ color: var(--success); }
            body.sd-page-dashboard .info-val.red{ color: var(--danger); }
            body.sd-page-dashboard .info-val.blue{ color: var(--primary); }

            body.sd-page-dashboard .sms-card{
                background: linear-gradient(135deg, #1a1a2e, #27304f);
                border-radius: var(--radius-md);
                padding: 16px;
                color: #fff;
            }

            body.sd-page-dashboard .sms-count{ font-size: 28px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
            body.sd-page-dashboard .sms-label{ font-size: 11px; color: #94a3b8; margin-bottom: 12px; }
            body.sd-page-dashboard .sms-bar-wrap{ height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 99px; overflow: hidden; }
            body.sd-page-dashboard .sms-bar{ height: 100%; border-radius: 99px; background: var(--primary); }
            body.sd-page-dashboard .sms-footer{ display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: #64748b; }

            body.sd-page-dashboard [data-tip]{ position: relative; }
            body.sd-page-dashboard [data-tip]::after{
                content: attr(data-tip);
                position: absolute;
                bottom: calc(100% + 6px);
                left: 50%;
                transform: translateX(-50%) scale(.9);
                background: #0f172a;
                color: #fff;
                padding: 4px 8px;
                border-radius: 6px;
                font-size: 11px;
                white-space: nowrap;
                pointer-events: none;
                opacity: 0;
                transition: opacity .15s, transform .15s;
                z-index: 200;
            }

            body.sd-page-dashboard [data-tip]:hover::after{ opacity: 1; transform: translateX(-50%) scale(1); }
            @media (max-width: 1200px){body.sd-page-dashboard{ --sidebar-w: 200px; }
                body.sd-page-dashboard .stat-grid{ grid-template-columns: repeat(4, 1fr); }
                body.sd-page-dashboard .quick-actions{ grid-template-columns: repeat(2, 1fr); }
                body.sd-page-dashboard .two-col{ grid-template-columns: 1fr; }
                body.sd-page-dashboard .three-col{ grid-template-columns: 1fr 1fr; }}

            @media (max-width: 900px){body.sd-page-dashboard .mobile-dashboard-shell{ display: block; }
                body.sd-page-dashboard .main{ display: none; }
                body.sd-page-dashboard .sd-font-plus > header.sticky{ display: none; }
                body.sd-page-dashboard .sd-font-plus > main{ padding: 0 !important; }
                body.sd-page-dashboard .sd-font-plus > .md\:hidden{ display: none !important; }
                body.sd-page-dashboard .mobile-screen{ padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
                body.sd-page-dashboard .mobile-dashboard-shell .mobile-bottom-nav{
                    position: fixed;
                    left: 50%;
                    right: auto;
                    bottom: 0;
                    width: min(100%, 390px);
                    transform: translateX(-50%);
                    padding-bottom: max(env(safe-area-inset-bottom), 12px);
                    z-index: 100;
                }
                body.sd-page-dashboard .stat-grid{ grid-template-columns: repeat(2, 1fr); }
                body.sd-page-dashboard .quick-actions{ grid-template-columns: repeat(2, 1fr); }
                body.sd-page-dashboard .three-col{ grid-template-columns: 1fr; }
                body.sd-page-dashboard .mobile-app-shortcuts{ display: block; margin-bottom: 16px; }
                body.sd-page-dashboard .quick-actions{ display: none; }
                body.sd-page-dashboard .mobile-dashboard-shell{ font-size: 16px; }
                body.sd-page-dashboard .mobile-status-bar{ font-size: 13px; }
                body.sd-page-dashboard .mobile-shop-name{ font-size: 17px; }
                body.sd-page-dashboard .mobile-shop-sub{ font-size: 13px; }
                body.sd-page-dashboard .mobile-hicon{ font-size: 16px; }
                body.sd-page-dashboard .mobile-balance-label{ font-size: 13px; }
                body.sd-page-dashboard .mobile-balance-amount{ font-size: 28px; letter-spacing: 0; }
                body.sd-page-dashboard .mobile-balance-mini-label{ font-size: 12px; }
                body.sd-page-dashboard .mobile-balance-mini-val{ font-size: 16px; }
                body.sd-page-dashboard .mobile-flash-card,
body.sd-page-dashboard .mobile-alert-strip,
body.sd-page-dashboard .mobile-empty-card,
body.sd-page-dashboard .dashboard-flash{ font-size: 14px; }
                body.sd-page-dashboard .mobile-quick-label,
body.sd-page-dashboard .mobile-app-label{ font-size: 13px; font-weight: 700; }
                body.sd-page-dashboard .mobile-section-title{ font-size: 14px; letter-spacing: 0.04em; }
                body.sd-page-dashboard .mobile-stat-label{ font-size: 13px; }
                body.sd-page-dashboard .mobile-stat-val{ font-size: 22px; }
                body.sd-page-dashboard .mobile-stat-sub{ font-size: 12px; }
                body.sd-page-dashboard .mobile-sale-avatar,
body.sd-page-dashboard .mobile-sale-amount{ font-size: 16px; }
                body.sd-page-dashboard .mobile-sale-name{ font-size: 15px; }
                body.sd-page-dashboard .mobile-sale-time{ font-size: 13px; }
                body.sd-page-dashboard .mobile-sale-badge{ font-size: 11px; }
                body.sd-page-dashboard .mobile-nav-label,
body.sd-page-dashboard .mobile-nav-pos-label{ font-size: 12px; }}

            @media (max-width: 500px){body.sd-page-dashboard .mobile-phone-wrap{ padding: 0; }
                body.sd-page-dashboard .mobile-phone{
                    width: 100%;
                    min-height: 100vh;
                    border: none;
                    border-radius: 0;
                    box-shadow: none;
                }

                body.sd-page-dashboard .mobile-notch{ display: none; }
                body.sd-page-dashboard .mobile-screen{ min-height: 100vh; }
                body.sd-page-dashboard .mobile-dashboard-shell .mobile-bottom-nav{
                    left: 0;
                    right: 0;
                    width: 100%;
                    transform: none;
                }
                body.sd-page-dashboard .stat-grid{ grid-template-columns: repeat(2, 1fr); }
                body.sd-page-dashboard .stat-value{ font-size: 18px; }
                body.sd-page-dashboard .date-chip{ display: none; }}

            @media (min-width: 901px){body.sd-page-dashboard .profile-meta{ display: block; }}

/* POS */
/* ── FONTS ── */
    body.sd-page-pos{
        --pos-accent:     var(--sd-pink, #fa4682);
        --pos-accent-dark:var(--sd-pink-strong, #f8085b);
        --pos-accent-gradient: var(--sd-primary-gradient, linear-gradient(135deg, #fa4682, #f8085b));
        --pos-accent-lt:  var(--sd-pink-bg, #fdf2f8);
        --pos-accent-mid: var(--sd-pink-border, #f5b8cf);
        --pos-green:      #059669;
        --pos-green-lt:   #ECFDF5;
        --pos-red:        #DC2626;
        --pos-red-lt:     #FEF2F2;
        --pos-amber:      #D97706;
        --pos-amber-lt:   #FFFBEB;
        --pos-border:     #E2E8F0;
        --pos-bg:         #F8FAFC;
        --pos-surface:    #FFFFFF;
        --pos-text:       #0F172A;
        --pos-muted:      #64748B;
        --pos-subtle:     #94A3B8;
        --pos-mono:       'JetBrains Mono', monospace;
        --pos-sans:       var(--font-bengali);
        --pos-radius:     14px;
        --pos-radius-sm:  8px;
        --pos-radius-lg:  20px;
        --pos-shadow:     0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
        --pos-shadow-md:  0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
        --pos-shadow-lg:  0 12px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
    }

    body.sd-page-pos, body.sd-page-pos *{ box-sizing: border-box; }
    body.sd-page-pos{ font-family: var(--pos-sans); background: var(--pos-bg); color: var(--pos-text); }

    /* ── LAYOUT ── */
    body.sd-page-pos .pos-wrap{
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(360px, 420px);
        gap: 18px;
        min-height: calc(100vh - 64px);
        padding: 18px;
        overflow: hidden;
        align-items: start;
    }

    /* ── LEFT PANEL ── */
    body.sd-page-pos .pos-left{
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: hidden;
        min-width: 0;
    }

    /* ── TOPBAR ── */
    body.sd-page-pos .pos-topbar{
        background: var(--pos-surface);
        border: 1px solid var(--pos-border);
        border-radius: var(--pos-radius);
        padding: 10px 14px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        box-shadow: var(--pos-shadow);
        flex-shrink: 0;
    }

    body.sd-page-pos .pos-branch-chip{
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        background: var(--pos-accent-lt);
        border: 1px solid var(--pos-accent-mid);
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        color: var(--pos-accent);
        white-space: nowrap;
        flex-shrink: 0;
    }

    body.sd-page-pos .pos-branch-chip svg{ width: 12px; height: 12px; }

    body.sd-page-pos .search-box{
        flex: 1;
        position: relative;
        min-width: 220px;
    }

    body.sd-page-pos .search-box input{
        width: 100%;
        height: 38px;
        border: 1.5px solid var(--pos-border);
        border-radius: var(--pos-radius-sm);
        padding: 0 12px 0 38px;
        font-size: 14px;
        font-family: var(--pos-sans);
        background: var(--pos-bg);
        color: var(--pos-text);
        outline: none;
        transition: border-color .15s;
    }

    body.sd-page-pos .search-box input:focus{ border-color: var(--pos-accent); background: #fff; }
    body.sd-page-pos .search-box input::placeholder{ color: var(--pos-subtle); }

    body.sd-page-pos .search-icon{
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: var(--pos-subtle);
        pointer-events: none;
    }

    body.sd-page-pos .barcode-btn{
        display: flex;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 0 14px;
        border: 1.5px solid var(--pos-border);
        border-radius: var(--pos-radius-sm);
        background: var(--pos-surface);
        color: var(--pos-muted);
        font-size: 13px;
        font-family: var(--pos-sans);
        font-weight: 600;
        cursor: pointer;
        transition: all .15s;
        white-space: nowrap;
    }

    body.sd-page-pos .barcode-btn:hover{ border-color: var(--pos-accent); color: var(--pos-accent); background: var(--pos-accent-lt); }
    body.sd-page-pos .barcode-btn svg{ width: 15px; height: 15px; }

    body.sd-page-pos .mobile-cart-btn{
        display: none;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 0 14px;
        border: 1.5px solid var(--pos-accent);
        border-radius: var(--pos-radius-sm);
        background: var(--pos-accent);
        color: #fff;
        font-size: 13px;
        font-family: var(--pos-sans);
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── CATEGORY TABS ── */
    body.sd-page-pos .cat-strip{
        background: var(--pos-surface);
        border: 1px solid var(--pos-border);
        border-radius: var(--pos-radius);
        padding: 4px 12px;
        display: flex;
        gap: 2px;
        overflow-x: auto;
        flex-shrink: 0;
        box-shadow: var(--pos-shadow);
        scrollbar-width: none;
    }

    body.sd-page-pos .cat-strip::-webkit-scrollbar{ display: none; }

    body.sd-page-pos .cat-tab{
        padding: 7px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--pos-muted);
        cursor: pointer;
        border: none;
        background: transparent;
        white-space: nowrap;
        font-family: var(--pos-sans);
        transition: all .15s;
        position: relative;
    }

    body.sd-page-pos .cat-tab:hover{ background: var(--pos-bg); color: var(--pos-text); }

    body.sd-page-pos .cat-tab.active{
        background: var(--pos-accent-lt);
        color: var(--pos-accent);
    }

    body.sd-page-pos .cat-tab .cat-count{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--pos-accent);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        margin-left: 5px;
        vertical-align: middle;
    }

    /* ── TOOLBAR ── */
    body.sd-page-pos .prod-toolbar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 0 2px;
    }

    body.sd-page-pos .toolbar-left{ display: flex; align-items: center; gap: 8px; }

    body.sd-page-pos .result-text{ font-size: 13px; color: var(--pos-muted); }
    body.sd-page-pos .result-text strong{ color: var(--pos-text); font-weight: 700; }

    body.sd-page-pos .hot-label{
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--pos-amber);
        background: var(--pos-amber-lt);
        border: 1px solid #FDE68A;
        padding: 3px 10px;
        border-radius: 20px;
    }

    body.sd-page-pos .view-toggle{ display: flex; gap: 4px; }

    body.sd-page-pos .vtbtn{
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--pos-border);
        border-radius: var(--pos-radius-sm);
        background: var(--pos-surface);
        color: var(--pos-muted);
        cursor: pointer;
        transition: all .15s;
    }

    body.sd-page-pos .vtbtn:hover{ border-color: var(--pos-accent); color: var(--pos-accent); }
    body.sd-page-pos .vtbtn.active{ background: var(--pos-accent); border-color: var(--pos-accent); color: #fff; }
    body.sd-page-pos .vtbtn svg{ width: 14px; height: 14px; }

    /* ── PRODUCT GRID ── */
    body.sd-page-pos .prod-area{
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: thin;
        scrollbar-color: var(--pos-border) transparent;
    }

    body.sd-page-pos .prod-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
        gap: 12px;
    }

    body.sd-page-pos .prod-grid.list{ grid-template-columns: 1fr; }

    /* ── PRODUCT CARD ── */
    body.sd-page-pos .p-card{
        background: var(--pos-surface);
        border: 1.5px solid var(--pos-border);
        border-radius: var(--pos-radius);
        padding: 14px 12px;
        cursor: pointer;
        transition: all .18s cubic-bezier(.4,0,.2,1);
        position: relative;
        overflow: hidden;
        text-align: center;
        user-select: none;
    }

    body.sd-page-pos .p-card:hover{
        border-color: var(--pos-accent);
        box-shadow: var(--pos-shadow-md);
        transform: translateY(-2px);
    }

    body.sd-page-pos .p-card:active{ transform: scale(.97); }

    body.sd-page-pos .p-card.in-cart{ border-color: var(--pos-accent); background: var(--pos-accent-lt); }

    body.sd-page-pos .p-card .hot-dot{
        position: absolute;
        top: 8px;
        right: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #F59E0B;
        box-shadow: 0 0 0 2px #FDE68A;
        pointer-events: none;
    }

    body.sd-page-pos .p-card .low-dot{
        position: absolute;
        top: 8px;
        left: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--pos-red);
        box-shadow: 0 0 0 2px #FECACA;
        pointer-events: none;
    }

    body.sd-page-pos .p-card .p-img{
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: var(--pos-bg);
        border: 1px solid var(--pos-border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin: 0 auto 10px;
        overflow: hidden;
    }

    body.sd-page-pos .p-card .p-img img{ width: 100%; height: 100%; object-fit: cover; }

    body.sd-page-pos .p-card .p-name{
        font-size: 12px;
        font-weight: 700;
        color: var(--pos-text);
        line-height: 1.35;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.sd-page-pos .p-card .p-price{
        font-size: 15px;
        font-weight: 700;
        color: var(--pos-accent);
        font-family: var(--pos-mono);
        margin-bottom: 2px;
    }

    body.sd-page-pos .p-card .p-stock{
        font-size: 10px;
        color: var(--pos-subtle);
        font-weight: 600;
    }

    body.sd-page-pos .p-card .p-stock.low{ color: var(--pos-red); }

    body.sd-page-pos .p-card .cart-badge{
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--pos-accent);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(.6);
        transition: all .2s cubic-bezier(.34,1.56,.64,1);
    }

    body.sd-page-pos .p-card.in-cart .cart-badge{ opacity: 1; transform: scale(1); }

    body.sd-page-pos .p-card .p-quick-add{
        position: absolute;
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        border: none;
        border-radius: 999px;
        background: var(--pos-accent);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(248,8,91, 0.28);
        transition: transform .15s, background .15s;
        z-index: 2;
    }

    body.sd-page-pos .p-card .p-quick-add:hover{ background: var(--pos-accent-dark); transform: scale(1.05); }
    body.sd-page-pos .p-card .p-quick-add svg{ width: 15px; height: 15px; }

    /* LIST CARD */
    body.sd-page-pos .prod-grid.list .p-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        text-align: left;
    }

    body.sd-page-pos .prod-grid.list .p-card .p-img{ margin: 0; flex-shrink: 0; width: 40px; height: 40px; }
    body.sd-page-pos .prod-grid.list .p-card .p-info{ flex: 1; min-width: 0; }
    body.sd-page-pos .prod-grid.list .p-card .p-name{ margin-bottom: 2px; }
    body.sd-page-pos .prod-grid.list .p-card .p-price{ font-size: 14px; }
    body.sd-page-pos .prod-grid.list .p-card .p-quick-add{
        position: static;
        margin-left: auto;
        flex-shrink: 0;
    }

    /* SEARCH RESULTS OVERLAY */
    body.sd-page-pos #search-results .s-result-item{
        background: var(--pos-surface);
        border: 1.5px solid var(--pos-border);
        border-radius: var(--pos-radius-sm);
        padding: 10px 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        transition: all .15s;
    }

    body.sd-page-pos #search-results .s-result-item:hover{ border-color: var(--pos-accent); background: var(--pos-accent-lt); }
    body.sd-page-pos #search-results .s-result-item .s-name{ font-size: 13px; font-weight: 700; }
    body.sd-page-pos #search-results .s-result-item .s-meta{ font-size: 11px; color: var(--pos-muted); margin-top: 2px; }
    body.sd-page-pos #search-results .s-result-item .s-price{ font-size: 14px; font-weight: 700; color: var(--pos-accent); font-family: var(--pos-mono); }

    /* BARCODE PANEL */
    body.sd-page-pos .barcode-panel{
        background: var(--pos-surface);
        border: 1px solid var(--pos-border);
        border-radius: var(--pos-radius);
        padding: 14px;
        display: flex;
        gap: 10px;
        align-items: center;
        box-shadow: var(--pos-shadow);
        flex-shrink: 0;
    }

    body.sd-page-pos .barcode-panel input{
        flex: 1;
        height: 38px;
        border: 1.5px dashed var(--pos-accent-mid);
        border-radius: var(--pos-radius-sm);
        padding: 0 12px;
        font-size: 13px;
        font-family: var(--pos-mono);
        background: var(--pos-accent-lt);
        color: var(--pos-text);
        outline: none;
        transition: border-color .15s;
    }

    body.sd-page-pos .barcode-panel input:focus{ border-color: var(--pos-accent); background: #fff; }
    body.sd-page-pos .barcode-panel input::placeholder{ font-family: var(--pos-sans); color: var(--pos-subtle); }

    body.sd-page-pos .barcode-panel .bp-label{
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        color: var(--pos-accent);
        white-space: nowrap;
    }

    body.sd-page-pos .barcode-panel .bp-label svg{ width: 16px; height: 16px; }

    body.sd-page-pos .barcode-clear{
        height: 38px;
        padding: 0 14px;
        border: 1.5px solid var(--pos-border);
        border-radius: var(--pos-radius-sm);
        background: var(--pos-surface);
        color: var(--pos-muted);
        font-size: 12px;
        font-weight: 600;
        font-family: var(--pos-sans);
        cursor: pointer;
        transition: all .15s;
    }

    body.sd-page-pos .barcode-clear:hover{ border-color: var(--pos-red); color: var(--pos-red); background: var(--pos-red-lt); }

    /* ── RIGHT PANEL (CART) ── */
    body.sd-page-pos .pos-right{
        background: var(--pos-surface);
        border: 1px solid var(--pos-border);
        border-radius: var(--pos-radius);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: var(--pos-shadow-md);
        min-height: calc(100vh - 100px);
        position: sticky;
        top: 80px;
    }

    /* CART HEADER */
    body.sd-page-pos .cart-header{
        padding: 14px 16px;
        border-bottom: 1px solid var(--pos-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    body.sd-page-pos .cart-title{ font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
    body.sd-page-pos .cart-title svg{ width: 16px; height: 16px; color: var(--pos-accent); }

    body.sd-page-pos .cart-pill{
        background: var(--pos-accent);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 20px;
        font-family: var(--pos-mono);
    }

    /* SUMMARY STATS */
    body.sd-page-pos .cart-stats{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--pos-border);
        border-bottom: 1px solid var(--pos-border);
        flex-shrink: 0;
    }

    body.sd-page-pos .cs-cell{
        background: var(--pos-bg);
        padding: 10px 14px;
    }

    body.sd-page-pos .cs-label{ font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pos-subtle); margin-bottom: 4px; }

    body.sd-page-pos .cs-val{
        font-size: 18px;
        font-weight: 700;
        color: var(--pos-text);
        font-family: var(--pos-mono);
    }

    body.sd-page-pos .cs-val.green{ color: var(--pos-green); }
    body.sd-page-pos .cs-val.red{ color: var(--pos-red); }
    body.sd-page-pos .cs-val.blue{ color: var(--pos-accent); }

    /* CART ITEMS */
    body.sd-page-pos .cart-items-wrap{
        flex: 1;
        overflow-y: auto;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--pos-border) transparent;
        min-height: 0;
    }

    body.sd-page-pos .mobile-cart-toolbar{ display: none; }

    body.sd-page-pos .mobile-cart-action{
        flex: 1;
        height: 36px;
        border: 1.5px solid var(--pos-border);
        border-radius: 999px;
        background: var(--pos-bg);
        color: var(--pos-text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        font-family: var(--pos-sans);
        cursor: pointer;
        transition: all .15s;
    }

    body.sd-page-pos .mobile-cart-action svg{
        width: 14px;
        height: 14px;
        transition: transform .2s ease;
    }

    body.sd-page-pos .mobile-cart-action:hover{
        border-color: var(--pos-accent);
        color: var(--pos-accent);
        background: var(--pos-accent-lt);
    }

    body.sd-page-pos .cart-empty-state{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 32px;
        border: 1.5px dashed var(--pos-border);
        border-radius: var(--pos-radius);
        background: var(--pos-bg);
    }

    body.sd-page-pos .cart-empty-state svg{ width: 32px; height: 32px; color: var(--pos-border); }
    body.sd-page-pos .cart-empty-state p{ font-size: 13px; color: var(--pos-subtle); font-weight: 600; text-align: center; }

    /* CART ITEM ROW */
    body.sd-page-pos .c-item{
        background: var(--pos-bg);
        border: 1px solid var(--pos-border);
        border-radius: var(--pos-radius-sm);
        padding: 10px 12px;
        transition: border-color .15s;
    }

    body.sd-page-pos .c-item:hover{ border-color: var(--pos-accent-mid); }

    body.sd-page-pos .c-item-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    body.sd-page-pos .c-item-name{ font-size: 13px; font-weight: 700; line-height: 1.3; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.sd-page-pos .c-item-remove{ background: none; border: none; cursor: pointer; color: var(--pos-subtle); padding: 0; line-height: 1; transition: color .15s; flex-shrink: 0; }
    body.sd-page-pos .c-item-remove:hover{ color: var(--pos-red); }
    body.sd-page-pos .c-item-remove svg{ width: 14px; height: 14px; }

    body.sd-page-pos .c-item-controls{ display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; align-items: center; }

    body.sd-page-pos .qty-ctrl{
        display: flex;
        align-items: center;
        border: 1px solid var(--pos-border);
        border-radius: 6px;
        background: var(--pos-surface);
        overflow: hidden;
    }

    body.sd-page-pos .qty-btn{
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        color: var(--pos-muted);
        transition: all .12s;
        flex-shrink: 0;
    }

    body.sd-page-pos .qty-btn:hover{ background: var(--pos-accent-lt); color: var(--pos-accent); }

    body.sd-page-pos .qty-num{
        width: 34px;
        text-align: center;
        border: none;
        background: transparent;
        font-size: 13px;
        font-weight: 700;
        font-family: var(--pos-mono);
        color: var(--pos-text);
        outline: none;
        padding: 0;
    }

    body.sd-page-pos .mini-input{
        height: 28px;
        border: 1px solid var(--pos-border);
        border-radius: 6px;
        padding: 0 8px;
        font-size: 12px;
        font-family: var(--pos-mono);
        font-weight: 600;
        color: var(--pos-text);
        background: var(--pos-surface);
        outline: none;
        width: 100%;
        transition: border-color .15s;
    }

    body.sd-page-pos .mini-input:focus{ border-color: var(--pos-accent); }

    body.sd-page-pos .mini-label{ font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pos-subtle); display: block; margin-bottom: 3px; }

    body.sd-page-pos .c-item-total{ display: flex; justify-content: flex-end; margin-top: 6px; }
    body.sd-page-pos .line-total{ font-size: 13px; font-weight: 700; color: var(--pos-green); font-family: var(--pos-mono); }

    /* ── BOTTOM FORM ── */
    body.sd-page-pos .cart-form{
        border-top: 1px solid var(--pos-border);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex-shrink: 0;
        background: var(--pos-surface);
    }

    /* CUSTOMER ROW */
    body.sd-page-pos .cf-row{ display: flex; flex-direction: column; gap: 3px; }

    body.sd-page-pos .cf-label{
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--pos-subtle);
    }

    body.sd-page-pos .cf-select,
body.sd-page-pos .cf-input{
        height: 36px;
        border: 1.5px solid var(--pos-border);
        border-radius: var(--pos-radius-sm);
        padding: 0 10px;
        font-size: 13px;
        font-family: var(--pos-sans);
        font-weight: 600;
        color: var(--pos-text);
        background: var(--pos-bg);
        outline: none;
        transition: border-color .15s;
        width: 100%;
    }

    body.sd-page-pos .cf-select:focus,
body.sd-page-pos .cf-input:focus{ border-color: var(--pos-accent); background: #fff; }

    body.sd-page-pos .cf-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    body.sd-page-pos .collect-paid-btn{
        min-height: 24px;
        border: 1px solid rgba(16, 185, 129, .32);
        border-radius: 999px;
        padding: 3px 10px;
        display: inline-flex;
        align-items: center;
        background: var(--pos-green-lt);
        color: var(--pos-green);
        font-family: var(--pos-sans);
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
        transition: border-color .15s, box-shadow .15s, transform .15s;
    }

    body.sd-page-pos .collect-paid-btn:hover{
        border-color: rgba(16, 185, 129, .58);
        box-shadow: 0 5px 14px rgba(16, 185, 129, .16);
        transform: translateY(-1px);
    }

    body.sd-page-pos .collect-paid-btn:active{ transform: translateY(0); }

    body.sd-page-pos .collect-paid-btn:disabled{
        cursor: not-allowed;
        opacity: .55;
        box-shadow: none;
        transform: none;
    }

    body.sd-page-pos .customer-inline{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }

    body.sd-page-pos .cf-inline-btn,
body.sd-page-pos .modal-btn{
        height: 36px;
        border: 1.5px solid var(--pos-accent-mid);
        border-radius: var(--pos-radius-sm);
        padding: 0 14px;
        background: var(--pos-accent-lt);
        color: var(--pos-accent);
        font-size: 12px;
        font-weight: 700;
        font-family: var(--pos-sans);
        cursor: pointer;
        transition: all .15s;
        white-space: nowrap;
    }

    body.sd-page-pos .cf-inline-btn:hover,
body.sd-page-pos .modal-btn:hover{
        border-color: var(--pos-accent);
        background: #fff;
    }

    body.sd-page-pos .modal-btn.primary{
        border-color: var(--pos-accent);
        background: var(--pos-accent);
        color: #fff;
        box-shadow: 0 4px 14px rgba(248,8,91,.22);
    }

    body.sd-page-pos .modal-btn.primary:hover{
        background: var(--pos-accent-dark);
        border-color: var(--pos-accent-dark);
    }

    body.sd-page-pos .quick-modal[hidden]{ display: none; }

    body.sd-page-pos .quick-modal{
        position: fixed;
        inset: 0;
        z-index: 80;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    body.sd-page-pos .quick-modal-backdrop{
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, .48);
        backdrop-filter: blur(2px);
    }

    body.sd-page-pos .quick-modal-card{
        position: relative;
        width: min(100%, 420px);
        max-height: min(90dvh, calc(100vh - 40px));
        border-radius: var(--pos-radius);
        border: 1px solid var(--pos-border);
        background: var(--pos-surface);
        box-shadow: var(--pos-shadow-lg);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.sd-page-pos .quick-modal-card.custom-item-card{
        width: min(100%, 520px);
    }

    body.sd-page-pos .quick-modal-header{
        padding: 16px 18px 10px;
        border-bottom: 1px solid var(--pos-border);
        flex-shrink: 0;
    }

    body.sd-page-pos .quick-modal-title{
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: var(--pos-text);
    }

    body.sd-page-pos .quick-modal-subtitle{
        margin: 4px 0 0;
        font-size: 12px;
        color: var(--pos-muted);
    }

    body.sd-page-pos .quick-modal-form{
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 10px;
        padding: 16px 18px 18px;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.sd-page-pos .quick-modal-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        min-width: 0;
    }

    body.sd-page-pos .quick-modal-status{
        min-height: 18px;
        font-size: 12px;
        font-weight: 600;
        color: var(--pos-red);
    }

    body.sd-page-pos .quick-modal-status.success{ color: var(--pos-green); }

    body.sd-page-pos .quick-modal-actions{
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 2px;
    }

    /* PAYMENT METHOD PILLS */
    body.sd-page-pos .pay-methods{ display: flex; flex-wrap: wrap; gap: 5px; }

    body.sd-page-pos .pay-chip{
        padding: 4px 12px;
        border: 1.5px solid var(--pos-border);
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        color: var(--pos-muted);
        background: var(--pos-bg);
        cursor: pointer;
        font-family: var(--pos-sans);
        transition: all .15s;
        border: none;
    }

    body.sd-page-pos .pay-chip:hover{ background: var(--pos-accent-lt); color: var(--pos-accent); }
    body.sd-page-pos .pay-chip.active{ background: var(--pos-accent); color: #fff; }

    /* PAID / DISCOUNT ROW */
    body.sd-page-pos .cf-grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    /* DUE PILL */
    body.sd-page-pos .due-banner{
        padding: 8px 14px;
        border-radius: var(--pos-radius-sm);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 700;
        background: var(--pos-red-lt);
        color: var(--pos-red);
        border: 1px solid #FECACA;
    }

    body.sd-page-pos .due-banner.zero{ background: var(--pos-green-lt); color: var(--pos-green); border-color: #A7F3D0; }
    body.sd-page-pos .due-banner .due-amt{ font-family: var(--pos-mono); font-size: 15px; }

    body.sd-page-pos .change-banner{
        padding: 8px 14px;
        border-radius: var(--pos-radius-sm);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 700;
        background: #F8FAFC;
        color: var(--pos-muted);
        border: 1px dashed var(--pos-border);
    }

    body.sd-page-pos .change-banner.active{
        background: var(--pos-green-lt);
        color: var(--pos-green);
        border-color: #A7F3D0;
        border-style: solid;
    }

    body.sd-page-pos .change-banner .change-amt{ font-family: var(--pos-mono); font-size: 15px; }

    /* NOTE */
    body.sd-page-pos .cf-textarea{
        border: 1.5px solid var(--pos-border);
        border-radius: var(--pos-radius-sm);
        padding: 8px 10px;
        font-size: 12px;
        font-family: var(--pos-sans);
        color: var(--pos-text);
        background: var(--pos-bg);
        outline: none;
        resize: none;
        width: 100%;
        transition: border-color .15s;
    }

    body.sd-page-pos .cf-textarea:focus{ border-color: var(--pos-accent); background: #fff; }

    /* SUBMIT BUTTONS */
    body.sd-page-pos .btn-complete{
        width: 100%;
        height: 46px;
        background: var(--pos-accent-gradient);
        color: #fff;
        border: none;
        border-radius: var(--pos-radius-sm);
        font-size: 15px;
        font-weight: 700;
        font-family: var(--pos-sans);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all .15s;
        box-shadow: 0 4px 14px rgba(248,8,91,.34);
    }

    body.sd-page-pos .btn-complete:hover{ filter: brightness(1.03); box-shadow: 0 6px 20px rgba(248,8,91,.42); }
    body.sd-page-pos .btn-complete:active{ transform: scale(.98); }
    body.sd-page-pos .btn-complete svg{ width: 18px; height: 18px; }

    body.sd-page-pos .btn-row{ display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }

    body.sd-page-pos .btn-icon{
        height: 46px;
        width: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--pos-border);
        border-radius: var(--pos-radius-sm);
        background: var(--pos-surface);
        color: var(--pos-muted);
        cursor: pointer;
        transition: all .15s;
    }

    body.sd-page-pos .btn-icon:hover{ border-color: var(--pos-accent); color: var(--pos-accent); background: var(--pos-accent-lt); }
    body.sd-page-pos .btn-icon svg{ width: 18px; height: 18px; }

    /* ── BARCODE UPGRADE BANNER ── */
    body.sd-page-pos .barcode-upgrade{
        background: var(--pos-amber-lt);
        border: 1px solid #FDE68A;
        border-radius: var(--pos-radius-sm);
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        font-weight: 600;
        color: var(--pos-amber);
    }

    body.sd-page-pos .barcode-upgrade svg{ width: 16px; height: 16px; flex-shrink: 0; }

    body.sd-page-pos .barcode-upgrade a{
        margin-left: auto;
        font-size: 11px;
        font-weight: 700;
        color: var(--pos-amber);
        text-decoration: underline;
        white-space: nowrap;
    }

    /* ── MESSAGE ── */
    body.sd-page-pos .pos-message{
        font-size: 12px;
        font-weight: 600;
        color: var(--pos-green);
        min-height: 18px;
        padding: 0 2px;
    }

    /* ── MOBILE ── */
    @media (max-width: 1023px){body.sd-page-pos .pos-wrap{
            grid-template-columns: 1fr;
            height: auto;
            overflow: visible;
            padding: 12px;
        }

        body.sd-page-pos .mobile-cart-btn{ display: flex; }

        body.sd-page-pos .pos-right{
            min-height: 0;
            position: fixed;
            top: auto;
        }
        body.sd-page-pos .pos-right{
            inset: auto 0 0 0;
            z-index: 50;
            border-radius: 20px 20px 0 0;
            height: min(92dvh, calc(100vh - 8px));
            max-height: 92dvh;
            transform: translateY(calc(100% - 60px));
            transition: transform .3s cubic-bezier(.4,0,.2,1);
            box-shadow: 0 -12px 40px rgba(15,23,42,.15);
            background: var(--pos-surface);
        }

        body.sd-page-pos .pos-right.open{ transform: translateY(0); }

        body.sd-page-pos .mobile-drag-handle{
            width: 40px;
            height: 4px;
            border-radius: 2px;
            background: var(--pos-border);
            margin: 8px auto 0;
        }

        body.sd-page-pos .cart-items-wrap{
            flex: 0 0 clamp(140px, 24vh, 240px);
            min-height: 140px;
            max-height: clamp(140px, 24vh, 240px);
            padding: 12px;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            scrollbar-gutter: stable both-edges;
        }

        body.sd-page-pos #sale-form{
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        body.sd-page-pos .mobile-cart-toolbar{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 0 12px 10px;
            border-bottom: 1px solid var(--pos-border);
            flex-shrink: 0;
            background: var(--pos-surface);
        }

        body.sd-page-pos .cart-form{
            padding: 12px;
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
        }}

    @media (max-width: 639px){body.sd-page-pos .pos-wrap{ padding: 8px; gap: 8px; }
        body.sd-page-pos .prod-grid{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
        body.sd-page-pos .search-box{ min-width: 100%; }
        body.sd-page-pos .barcode-btn{ flex: 1 1 auto; justify-content: center; }
        body.sd-page-pos .customer-inline,
body.sd-page-pos .quick-modal-grid{ grid-template-columns: 1fr; }
        body.sd-page-pos .cf-inline-btn{ width: 100%; }
        body.sd-page-pos .quick-modal{
            align-items: flex-end;
            padding: 10px;
        }

        body.sd-page-pos .quick-modal-card,
        body.sd-page-pos .quick-modal-card.custom-item-card{
            width: 100%;
            max-height: calc(100dvh - 20px);
            border-radius: 16px 16px 0 0;
        }

        body.sd-page-pos .quick-modal-header{ padding: 14px 14px 9px; }
        body.sd-page-pos .quick-modal-title{ font-size: 16px; }
        body.sd-page-pos .quick-modal-subtitle{ font-size: 11.5px; line-height: 1.45; }

        body.sd-page-pos .quick-modal-form{
            gap: 9px;
            padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
        }

        body.sd-page-pos .quick-modal-actions{
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 8px;
            position: sticky;
            bottom: 0;
            padding-top: 8px;
            background: var(--pos-surface);
        }

        body.sd-page-pos .quick-modal-actions .modal-btn{
            width: 100%;
            padding: 0 10px;
        }

        body.sd-page-pos .cart-items-wrap{
            flex: 0 0 clamp(124px, 22vh, 190px);
            min-height: 124px;
            max-height: clamp(124px, 22vh, 190px);
            padding: 10px;
        }

        body.sd-page-pos .cart-items-wrap #cartItems{
            min-height: 100%;
        }

        body.sd-page-pos .c-item{
            padding: 12px;
            border-width: 1.5px;
            border-color: #cbd5e1;
            background: #fff;
            box-shadow: 0 2px 10px rgba(15,23,42,.06);
        }
        body.sd-page-pos .c-item-top{ margin-bottom: 6px; }
        body.sd-page-pos .c-item-name{
            font-size: 12.5px;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }

        body.sd-page-pos .c-item-controls{
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 8px;
        }

        body.sd-page-pos .c-item-controls > div:first-child{ grid-column: 1 / -1; }
        body.sd-page-pos .qty-ctrl{ width: 100%; max-width: 170px; }
        body.sd-page-pos .qty-num{ width: 64px; font-size: 14px; }
        body.sd-page-pos .mini-label{ font-size: 10.5px; margin-bottom: 4px; }
        body.sd-page-pos .mini-input{
            height: 34px;
            font-size: 13px;
            border-width: 1.5px;
        }
        body.sd-page-pos .c-item-total{
            margin-top: 8px;
            padding-top: 6px;
            border-top: 1px dashed var(--pos-border);
        }
        body.sd-page-pos .line-total{ font-size: 12.5px; }
        body.sd-page-pos .cart-empty-state{
            padding: 20px 14px;
            min-height: 180px;
        }}

/* Purchase Form */
body.sd-page-purchase-form{
            --pos-accent: var(--sd-pink, #fa4682);
            --pos-accent-dark: var(--sd-pink-strong, #f8085b);
            --pos-accent-gradient: var(--sd-primary-gradient, linear-gradient(135deg, #fa4682, #f8085b));
            --pos-accent-lt: var(--sd-pink-bg, #fdf2f8);
            --pos-accent-mid: var(--sd-pink-border, #f5b8cf);
            --pos-green: #059669;
            --pos-green-lt: #ecfdf5;
            --pos-red: #dc2626;
            --pos-red-lt: #fef2f2;
            --pos-amber: #d97706;
            --pos-amber-lt: #fffbeb;
            --pos-blue-lt: #eff6ff;
            --pos-border: #e2e8f0;
            --pos-bg: #f8fafc;
            --pos-surface: #ffffff;
            --pos-text: #0f172a;
            --pos-muted: #64748b;
            --pos-subtle: #94a3b8;
            --pos-radius: 14px;
            --pos-radius-sm: 8px;
            --pos-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
            --pos-shadow-md: 0 4px 16px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
        }

        body.sd-page-purchase-form .pos-wrap{
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(360px, 420px);
            gap: 18px;
            min-height: calc(100vh - 64px);
            padding: 18px;
            overflow: hidden;
            align-items: start;
        }

        body.sd-page-purchase-form .pos-left{
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow: hidden;
            min-width: 0;
        }

        body.sd-page-purchase-form .pos-topbar,
body.sd-page-purchase-form .cat-strip,
body.sd-page-purchase-form .purchase-alert{
            background: var(--pos-surface);
            border: 1px solid var(--pos-border);
            border-radius: var(--pos-radius);
            box-shadow: var(--pos-shadow);
        }

        body.sd-page-purchase-form .pos-topbar{
            padding: 10px 14px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        body.sd-page-purchase-form .purchase-alert{
            padding: 12px 14px;
            font-size: 12px;
            font-weight: 700;
            color: var(--pos-amber);
            background: linear-gradient(135deg, var(--pos-amber-lt), #fff);
            border-color: #fde68a;
        }

        body.sd-page-purchase-form .purchase-alert.error{
            color: var(--pos-red);
            background: linear-gradient(135deg, var(--pos-red-lt), #fff);
            border-color: #fecaca;
        }

        body.sd-page-purchase-form .purchase-alert p + p{
            margin-top: 5px;
        }

        body.sd-page-purchase-form .pos-branch-chip{
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            background: var(--pos-accent-lt);
            border: 1px solid var(--pos-accent-mid);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            color: var(--pos-accent);
            white-space: nowrap;
        }

        body.sd-page-purchase-form .search-box{
            flex: 1;
            position: relative;
            min-width: 220px;
        }

        body.sd-page-purchase-form .search-box input,
body.sd-page-purchase-form .barcode-panel input{
            width: 100%;
            height: 38px;
            border: 1.5px solid var(--pos-border);
            border-radius: var(--pos-radius-sm);
            padding: 0 12px 0 38px;
            font-size: 14px;
            background: var(--pos-bg);
            color: var(--pos-text);
            outline: none;
            transition: border-color .15s;
        }

        body.sd-page-purchase-form .search-box input:focus,
body.sd-page-purchase-form .barcode-panel input:focus,
body.sd-page-purchase-form .cf-select:focus,
body.sd-page-purchase-form .cf-input:focus,
body.sd-page-purchase-form .cf-textarea:focus,
body.sd-page-purchase-form .mini-input:focus,
body.sd-page-purchase-form .cf-file:focus{
            border-color: var(--pos-accent);
            background: #fff;
        }

        body.sd-page-purchase-form .search-icon{
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: var(--pos-subtle);
            pointer-events: none;
        }

        body.sd-page-purchase-form .barcode-btn,
body.sd-page-purchase-form .mobile-cart-btn,
body.sd-page-purchase-form .barcode-clear,
body.sd-page-purchase-form .quick-link{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 38px;
            padding: 0 14px;
            border: 1.5px solid var(--pos-border);
            border-radius: var(--pos-radius-sm);
            background: var(--pos-surface);
            color: var(--pos-muted);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all .15s;
            text-decoration: none;
            white-space: nowrap;
        }

        body.sd-page-purchase-form .barcode-btn:hover,
body.sd-page-purchase-form .barcode-clear:hover,
body.sd-page-purchase-form .quick-link:hover{
            border-color: var(--pos-accent);
            color: var(--pos-accent);
            background: var(--pos-accent-lt);
        }

        body.sd-page-purchase-form .mobile-cart-btn{
            display: none;
            border-color: var(--pos-accent);
            background: var(--pos-accent);
            color: #fff;
        }

        body.sd-page-purchase-form .mobile-sheet-backdrop{
            position: fixed;
            inset: 0;
            z-index: 45;
            background: rgba(15, 23, 42, .38);
            backdrop-filter: blur(2px);
        }

        body.sd-page-purchase-form .cat-strip{
            padding: 4px 12px;
            display: flex;
            gap: 4px;
            overflow-x: auto;
            flex-shrink: 0;
            scrollbar-width: none;
        }

        body.sd-page-purchase-form .cat-strip::-webkit-scrollbar{
            display: none;
        }

        body.sd-page-purchase-form .cat-tab{
            padding: 7px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 700;
            color: var(--pos-muted);
            cursor: pointer;
            border: none;
            background: transparent;
            white-space: nowrap;
            transition: all .15s;
        }

        body.sd-page-purchase-form .cat-tab:hover{
            background: var(--pos-bg);
            color: var(--pos-text);
        }

        body.sd-page-purchase-form .cat-tab.active{
            background: var(--pos-accent-lt);
            color: var(--pos-accent);
        }

        body.sd-page-purchase-form .cat-tab .cat-count{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            border-radius: 999px;
            background: var(--pos-accent);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 0 5px;
            margin-left: 5px;
        }

        body.sd-page-purchase-form .prod-toolbar{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 0 2px;
            flex-shrink: 0;
        }

        body.sd-page-purchase-form .toolbar-left{
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        body.sd-page-purchase-form .result-text{
            font-size: 13px;
            color: var(--pos-muted);
        }

        body.sd-page-purchase-form .result-text strong{
            color: var(--pos-text);
            font-weight: 700;
        }

        body.sd-page-purchase-form .hot-label{
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 700;
            color: var(--pos-amber);
            background: var(--pos-amber-lt);
            border: 1px solid #fde68a;
            padding: 3px 10px;
            border-radius: 20px;
        }

        body.sd-page-purchase-form .view-toggle{
            display: flex;
            gap: 4px;
        }

        body.sd-page-purchase-form .vtbtn{
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid var(--pos-border);
            border-radius: var(--pos-radius-sm);
            background: var(--pos-surface);
            color: var(--pos-muted);
            cursor: pointer;
            transition: all .15s;
        }

        body.sd-page-purchase-form .vtbtn:hover{
            border-color: var(--pos-accent);
            color: var(--pos-accent);
        }

        body.sd-page-purchase-form .vtbtn.active{
            background: var(--pos-accent);
            border-color: var(--pos-accent);
            color: #fff;
        }

        body.sd-page-purchase-form .vtbtn svg{
            width: 14px;
            height: 14px;
        }

        body.sd-page-purchase-form .barcode-panel{
            background: var(--pos-surface);
            border: 1px solid var(--pos-border);
            border-radius: var(--pos-radius);
            padding: 14px;
            display: flex;
            gap: 10px;
            align-items: center;
            box-shadow: var(--pos-shadow);
            flex-shrink: 0;
        }

        body.sd-page-purchase-form .barcode-panel input{
            padding-left: 12px;
        }

        body.sd-page-purchase-form .barcode-panel .bp-label{
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 700;
            color: var(--pos-accent);
            white-space: nowrap;
        }

        body.sd-page-purchase-form .prod-area{
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        body.sd-page-purchase-form .prod-grid{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
            gap: 12px;
        }

        body.sd-page-purchase-form .prod-grid.list{
            grid-template-columns: 1fr;
        }

        body.sd-page-purchase-form .p-card{
            position: relative;
            background: var(--pos-surface);
            border: 1.5px solid var(--pos-border);
            border-radius: var(--pos-radius);
            padding: 14px 12px;
            transition: all .18s cubic-bezier(.4, 0, .2, 1);
            text-align: center;
            cursor: pointer;
            user-select: none;
            overflow: hidden;
        }

        body.sd-page-purchase-form .p-card:hover{
            border-color: var(--pos-accent);
            box-shadow: var(--pos-shadow-md);
            transform: translateY(-2px);
        }

        body.sd-page-purchase-form .p-card.in-cart{
            border-color: var(--pos-accent);
            background: var(--pos-accent-lt);
        }

        body.sd-page-purchase-form .p-card .p-img{
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: var(--pos-bg);
            border: 1px solid var(--pos-border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin: 0 auto 10px;
            overflow: hidden;
        }

        body.sd-page-purchase-form .p-card .p-img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        body.sd-page-purchase-form .p-card .p-name{
            font-size: 12px;
            font-weight: 700;
            color: var(--pos-text);
            line-height: 1.35;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        body.sd-page-purchase-form .p-card .p-price{
            font-size: 15px;
            font-weight: 700;
            color: var(--pos-accent);
            margin-bottom: 2px;
        }

        body.sd-page-purchase-form .p-card .p-stock{
            font-size: 10px;
            color: var(--pos-subtle);
            font-weight: 700;
            line-height: 1.4;
        }

        body.sd-page-purchase-form .p-card .low-dot{
            position: absolute;
            top: 8px;
            left: 8px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--pos-red);
            box-shadow: 0 0 0 2px #fecaca;
        }

        body.sd-page-purchase-form .p-card .cart-badge{
            position: absolute;
            bottom: 8px;
            right: 8px;
            min-width: 22px;
            height: 22px;
            border-radius: 999px;
            background: var(--pos-accent);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(.6);
            transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
            padding: 0 6px;
        }

        body.sd-page-purchase-form .p-card.in-cart .cart-badge{
            opacity: 1;
            transform: scale(1);
        }

        body.sd-page-purchase-form .p-card .p-quick-add{
            position: absolute;
            top: 10px;
            right: 10px;
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 999px;
            background: var(--pos-accent);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(248,8,91, .28);
        }

        body.sd-page-purchase-form .p-card .p-quick-add:hover{
            background: var(--pos-accent-dark);
        }

        body.sd-page-purchase-form .p-card .p-quick-add svg{
            width: 15px;
            height: 15px;
        }

        body.sd-page-purchase-form .prod-grid.list .p-card{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            text-align: left;
        }

        body.sd-page-purchase-form .prod-grid.list .p-card .p-img{
            margin: 0;
            flex-shrink: 0;
            width: 40px;
            height: 40px;
        }

        body.sd-page-purchase-form .prod-grid.list .p-card .p-info{
            flex: 1;
            min-width: 0;
        }

        body.sd-page-purchase-form .prod-grid.list .p-card .p-quick-add{
            position: static;
            margin-left: auto;
        }

        body.sd-page-purchase-form .pos-right{
            background: var(--pos-surface);
            border: 1px solid var(--pos-border);
            border-radius: var(--pos-radius);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: var(--pos-shadow-md);
            min-height: calc(100vh - 100px);
            position: sticky;
            top: 80px;
        }

        body.sd-page-purchase-form .mobile-drag-handle{
            width: 40px;
            height: 4px;
            border-radius: 2px;
            background: var(--pos-border);
            margin: 8px auto 0;
            display: none;
        }

        body.sd-page-purchase-form .mobile-cart-toolbar{
            display: none;
        }

        body.sd-page-purchase-form .mobile-cart-action{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            height: 38px;
            border: 1.5px solid var(--pos-border);
            border-radius: 10px;
            background: var(--pos-surface);
            color: var(--pos-muted);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all .15s;
        }

        body.sd-page-purchase-form .mobile-cart-action:hover{
            border-color: var(--pos-accent);
            color: var(--pos-accent);
            background: var(--pos-accent-lt);
        }

        body.sd-page-purchase-form .mobile-cart-action.toggle{
            background: var(--pos-accent-lt);
            border-color: var(--pos-accent-mid);
            color: var(--pos-accent);
        }

        body.sd-page-purchase-form .mobile-cart-action svg{
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        body.sd-page-purchase-form .cart-header{
            padding: 14px 16px;
            border-bottom: 1px solid var(--pos-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        body.sd-page-purchase-form .cart-title{
            font-size: 14px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        body.sd-page-purchase-form .cart-title svg{
            width: 16px;
            height: 16px;
            color: var(--pos-accent);
        }

        body.sd-page-purchase-form .cart-pill{
            background: var(--pos-accent);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 10px;
            border-radius: 20px;
        }

        body.sd-page-purchase-form .cart-stats{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background: var(--pos-border);
            border-bottom: 1px solid var(--pos-border);
            flex-shrink: 0;
        }

        body.sd-page-purchase-form .cs-cell{
            background: var(--pos-bg);
            padding: 10px 14px;
        }

        body.sd-page-purchase-form .cs-label{
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--pos-subtle);
            margin-bottom: 4px;
        }

        body.sd-page-purchase-form .cs-val{
            font-size: 18px;
            font-weight: 700;
            color: var(--pos-text);
        }

        body.sd-page-purchase-form .cs-val.green{
            color: var(--pos-green);
        }

        body.sd-page-purchase-form .cs-val.red{
            color: var(--pos-red);
        }

        body.sd-page-purchase-form .cs-val.blue{
            color: var(--pos-accent);
        }

        body.sd-page-purchase-form .cart-items-wrap{
            flex: 1;
            overflow-y: auto;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 0;
        }

        body.sd-page-purchase-form .cart-empty-state{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 32px;
            border: 1.5px dashed var(--pos-border);
            border-radius: var(--pos-radius);
            background: var(--pos-bg);
            text-align: center;
            color: var(--pos-subtle);
            font-size: 13px;
            font-weight: 700;
        }

        body.sd-page-purchase-form .c-item{
            background: var(--pos-bg);
            border: 1px solid var(--pos-border);
            border-radius: var(--pos-radius-sm);
            padding: 10px 12px;
        }

        body.sd-page-purchase-form .c-item-top{
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
        }

        body.sd-page-purchase-form .c-item-name{
            font-size: 13px;
            font-weight: 700;
            line-height: 1.3;
            flex: 1;
            min-width: 0;
        }

        body.sd-page-purchase-form .c-item-remove{
            background: none;
            border: none;
            cursor: pointer;
            color: var(--pos-subtle);
            padding: 0;
            line-height: 1;
        }

        body.sd-page-purchase-form .c-item-remove:hover{
            color: var(--pos-red);
        }

        body.sd-page-purchase-form .c-item-remove svg{
            width: 14px;
            height: 14px;
        }

        body.sd-page-purchase-form .purchase-qty-price{
            display: grid;
            grid-template-columns: auto 1fr 1fr;
            gap: 6px;
            align-items: end;
        }

        body.sd-page-purchase-form .purchase-extra-grid{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            margin-top: 8px;
        }

        body.sd-page-purchase-form .purchase-toggle-row{
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--pos-subtle);
        }

        body.sd-page-purchase-form .purchase-toggle-row label{
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        body.sd-page-purchase-form .qty-ctrl{
            display: flex;
            align-items: center;
            border: 1px solid var(--pos-border);
            border-radius: 6px;
            background: var(--pos-surface);
            overflow: hidden;
            height: 30px;
        }

        body.sd-page-purchase-form .qty-btn{
            width: 26px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            font-weight: 700;
            color: var(--pos-muted);
        }

        body.sd-page-purchase-form .qty-btn:hover{
            background: var(--pos-accent-lt);
            color: var(--pos-accent);
        }

        body.sd-page-purchase-form .qty-num,
body.sd-page-purchase-form .mini-input,
body.sd-page-purchase-form .cf-select,
body.sd-page-purchase-form .cf-input,
body.sd-page-purchase-form .cf-file,
body.sd-page-purchase-form .cf-textarea{
            width: 100%;
            border: 1.5px solid var(--pos-border);
            border-radius: var(--pos-radius-sm);
            background: var(--pos-bg);
            color: var(--pos-text);
            outline: none;
            transition: border-color .15s;
        }

        body.sd-page-purchase-form .qty-num{
            width: 48px;
            text-align: center;
            border: none;
            background: transparent;
            font-size: 13px;
            font-weight: 700;
            padding: 0;
        }

        body.sd-page-purchase-form .mini-input{
            height: 30px;
            padding: 0 8px;
            font-size: 12px;
            font-weight: 600;
        }

        body.sd-page-purchase-form .mini-label,
body.sd-page-purchase-form .cf-label{
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--pos-subtle);
            display: block;
            margin-bottom: 3px;
        }

        body.sd-page-purchase-form .c-item-total{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
        }

        body.sd-page-purchase-form .line-total{
            font-size: 13px;
            font-weight: 700;
            color: var(--pos-green);
        }

        body.sd-page-purchase-form .line-meta{
            font-size: 10px;
            font-weight: 700;
            color: var(--pos-subtle);
        }

        body.sd-page-purchase-form .cart-form{
            border-top: 1px solid var(--pos-border);
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex-shrink: 0;
            background: var(--pos-surface);
        }

        body.sd-page-purchase-form .cf-row{
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        body.sd-page-purchase-form .cf-inline{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        body.sd-page-purchase-form .cf-select,
body.sd-page-purchase-form .cf-input,
body.sd-page-purchase-form .cf-file{
            height: 36px;
            padding: 0 10px;
            font-size: 13px;
            font-weight: 600;
        }

        body.sd-page-purchase-form .cf-file{
            padding: 7px 10px;
        }

        body.sd-page-purchase-form .cf-textarea{
            padding: 8px 10px;
            font-size: 12px;
            resize: none;
        }

        body.sd-page-purchase-form .pay-methods{
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        body.sd-page-purchase-form .pay-chip{
            padding: 4px 12px;
            border: 1.5px solid var(--pos-border);
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            color: var(--pos-muted);
            background: var(--pos-bg);
            cursor: pointer;
            border: none;
            transition: all .15s;
        }

        body.sd-page-purchase-form .pay-chip:hover{
            background: var(--pos-accent-lt);
            color: var(--pos-accent);
        }

        body.sd-page-purchase-form .pay-chip.active{
            background: var(--pos-accent);
            color: #fff;
        }

        body.sd-page-purchase-form .cf-grid2,
body.sd-page-purchase-form .cf-grid3{
            display: grid;
            gap: 8px;
        }

        body.sd-page-purchase-form .cf-grid2{
            grid-template-columns: 1fr 1fr;
        }

        body.sd-page-purchase-form .cf-grid3{
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        body.sd-page-purchase-form .due-banner{
            padding: 8px 14px;
            border-radius: var(--pos-radius-sm);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            font-weight: 700;
            background: var(--pos-red-lt);
            color: var(--pos-red);
            border: 1px solid #fecaca;
        }

        body.sd-page-purchase-form .due-banner.zero{
            background: var(--pos-green-lt);
            color: var(--pos-green);
            border-color: #a7f3d0;
        }

        body.sd-page-purchase-form .due-banner .due-amt{
            font-size: 15px;
        }

        body.sd-page-purchase-form .purchase-meta-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        body.sd-page-purchase-form .purchase-meta-card{
            padding: 10px 12px;
            border-radius: var(--pos-radius-sm);
            background: var(--pos-bg);
            border: 1px solid var(--pos-border);
        }

        body.sd-page-purchase-form .purchase-meta-card strong{
            display: block;
            font-size: 13px;
            color: var(--pos-text);
            margin-top: 3px;
        }

        body.sd-page-purchase-form .mobile-sheet-summary{
            display: none;
        }

        body.sd-page-purchase-form .btn-row{
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 6px;
        }

        body.sd-page-purchase-form .btn-complete{
            width: 100%;
            height: 46px;
            background: var(--pos-accent-gradient);
            color: #fff;
            border: none;
            border-radius: var(--pos-radius-sm);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 14px rgba(248,8,91, .34);
        }

        body.sd-page-purchase-form .btn-complete:hover{
            filter: brightness(1.03);
        }

        body.sd-page-purchase-form .btn-complete:disabled{
            opacity: .55;
            cursor: not-allowed;
        }

        body.sd-page-purchase-form .btn-icon{
            height: 46px;
            width: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid var(--pos-border);
            border-radius: var(--pos-radius-sm);
            background: var(--pos-surface);
            color: var(--pos-muted);
            cursor: pointer;
            transition: all .15s;
            text-decoration: none;
        }

        body.sd-page-purchase-form .btn-icon:hover{
            border-color: var(--pos-accent);
            color: var(--pos-accent);
            background: var(--pos-accent-lt);
        }

        body.sd-page-purchase-form .purchase-list-link{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 36px;
            border: 1.5px solid var(--pos-border);
            border-radius: var(--pos-radius-sm);
            font-size: 12px;
            font-weight: 700;
            color: var(--pos-muted);
            text-decoration: none;
            transition: all .15s;
        }

        body.sd-page-purchase-form .purchase-list-link:hover{
            border-color: var(--pos-accent);
            color: var(--pos-accent);
            background: var(--pos-accent-lt);
        }

        @media (max-width: 1023px){body.sd-page-purchase-form .pos-wrap{
                grid-template-columns: 1fr;
                height: auto;
                overflow: visible;
                padding: 12px;
            }

            body.sd-page-purchase-form .mobile-cart-btn{
                display: inline-flex;
            }

            body.sd-page-purchase-form .mobile-drag-handle{
                display: block;
            }

            body.sd-page-purchase-form .mobile-cart-toolbar{
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                padding: 0 12px 10px;
                border-bottom: 1px solid var(--pos-border);
                background: var(--pos-surface);
                flex-shrink: 0;
            }

            body.sd-page-purchase-form .pos-right{
                min-height: 0;
                position: fixed;
                inset: auto 0 0 0;
                z-index: 50;
                border-radius: 20px 20px 0 0;
                max-height: 92vh;
                transform: translateY(calc(100% - 60px));
                transition: transform .3s cubic-bezier(.4, 0, .2, 1);
                box-shadow: 0 -12px 40px rgba(15, 23, 42, .15);
            }

            body.sd-page-purchase-form .pos-right.open{
                transform: translateY(0);
            }

            body.sd-page-purchase-form .cart-items-wrap{
                flex: 0 0 clamp(150px, 24vh, 250px);
                min-height: 150px;
                max-height: clamp(150px, 24vh, 250px);
                padding: 10px 10px 12px;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }

            body.sd-page-purchase-form .cart-form{
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                padding: 12px;
                padding-bottom: calc(18px + env(safe-area-inset-bottom));
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }

            body.sd-page-purchase-form .mobile-sheet-summary{
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                padding: 10px 12px;
                border: 1px solid var(--pos-border);
                border-radius: 12px;
                background: linear-gradient(135deg, var(--pos-blue-lt), #fff);
            }

            body.sd-page-purchase-form .mobile-sheet-summary strong{
                display: block;
                font-size: 14px;
                color: var(--pos-text);
            }

            body.sd-page-purchase-form .mobile-sheet-summary span{
                font-size: 10px;
                font-weight: 700;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--pos-subtle);
            }}

        @media (max-width: 639px){body.sd-page-purchase-form .pos-wrap{
                padding: 8px;
                gap: 8px;
            }

            body.sd-page-purchase-form .prod-grid{
                grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
                gap: 8px;
            }

            body.sd-page-purchase-form .search-box{
                min-width: 100%;
            }

            body.sd-page-purchase-form .barcode-btn,
body.sd-page-purchase-form .quick-link{
                flex: 1 1 auto;
            }

            body.sd-page-purchase-form .purchase-qty-price,
body.sd-page-purchase-form .purchase-extra-grid,
body.sd-page-purchase-form .cf-grid2,
body.sd-page-purchase-form .cf-grid3,
body.sd-page-purchase-form .purchase-meta-grid{
                grid-template-columns: 1fr;
            }

            body.sd-page-purchase-form .btn-row{
                grid-template-columns: 1fr auto auto;
            }

            body.sd-page-purchase-form .pos-topbar{
                padding: 10px 12px;
            }

            body.sd-page-purchase-form .prod-toolbar{
                align-items: flex-start;
            }

            body.sd-page-purchase-form .toolbar-left{
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }

            body.sd-page-purchase-form .cart-form{
                gap: 12px;
            }}

/* Admin Dashboard */
body.sd-page-admin-dashboard .sa-shell{
            --sa-bg: var(--sd-page);
            --sa-card: var(--sd-surface);
            --sa-border: var(--sd-border);
            --sa-text: var(--sd-text);
            --sa-muted: var(--sd-text-2);
            --sa-soft: var(--sd-surface-soft);
            --sa-orange: var(--sd-amber);
            --sa-orange-soft: var(--sd-amber-bg);
            --sa-navy: var(--sd-blue);
            --sa-teal: var(--sd-green);
            --sa-blue: var(--sd-blue);
            --sa-green: var(--sd-green);
            --sa-red: var(--sd-red);
        }

        body.sd-page-admin-dashboard .sa-shell,
body.sd-page-admin-dashboard .sa-shell *{
            box-sizing: border-box;
        }

        body.sd-page-admin-dashboard .sa-shell{
            color: var(--sa-text);
        }

        body.sd-page-admin-dashboard .sa-grid{
            display: grid;
            gap: 1rem;
        }

        body.sd-page-admin-dashboard .sa-panel{
            border: 1px solid var(--sa-border);
            background: var(--sa-card);
            border-radius: 24px;
            box-shadow: 0 20px 50px -34px rgba(17, 24, 39, 0.18);
        }

        body.sd-page-admin-dashboard .sa-chip{
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            border: 1px solid var(--sa-border);
            background: #fff;
            color: var(--sa-muted);
            border-radius: 999px;
            padding: 0.6rem 0.95rem;
            font-size: 0.76rem;
            font-weight: 800;
        }

        body.sd-page-admin-dashboard .sa-action{
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            border-radius: 14px;
            padding: 0.8rem 1rem;
            font-size: 0.82rem;
            font-weight: 800;
            text-decoration: none;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

        body.sd-page-admin-dashboard .sa-action:hover{
            transform: translateY(-1px);
        }

        body.sd-page-admin-dashboard .sa-action-primary{
            background: var(--sd-primary-gradient);
            color: #fff;
            box-shadow: 0 18px 35px -24px rgba(248,8,91, 0.72);
        }

        body.sd-page-admin-dashboard .sa-action-secondary{
            border: 1px solid var(--sa-border);
            background: #fff;
            color: var(--sa-text);
        }

        body.sd-page-admin-dashboard .sa-hero{
            padding: 1.35rem;
            position: relative;
            overflow: hidden;
        }

        body.sd-page-admin-dashboard .sa-hero::after{
            content: "";
            position: absolute;
            inset: auto -18% -35% auto;
            width: 180px;
            height: 180px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 65%);
            pointer-events: none;
        }

        body.sd-page-admin-dashboard .sa-mini-amber{ background: linear-gradient(180deg, var(--sd-amber-bg), #ffffff); }
        body.sd-page-admin-dashboard .sa-mini-rose{ background: linear-gradient(180deg, var(--sd-red-bg), #ffffff); }
        body.sd-page-admin-dashboard .sa-mini-violet{ background: linear-gradient(180deg, var(--sd-pink-bg), #ffffff); }
        body.sd-page-admin-dashboard .sa-mini-sky{ background: linear-gradient(180deg, var(--sd-blue-bg), #ffffff); }

        body.sd-page-admin-dashboard .sa-progress{
            height: 8px;
            border-radius: 999px;
            background: #edf2f7;
            overflow: hidden;
        }

        body.sd-page-admin-dashboard .sa-progress > span{
            display: block;
            height: 100%;
            border-radius: inherit;
            background: var(--sd-primary-gradient);
        }

        body.sd-page-admin-dashboard .sa-bar-wrap{
            display: flex;
            align-items: end;
            gap: 0.75rem;
            min-height: 220px;
            padding-top: 1rem;
        }

        body.sd-page-admin-dashboard .sa-bar{
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.55rem;
        }

        body.sd-page-admin-dashboard .sa-bar-track{
            width: 100%;
            height: 170px;
            display: flex;
            align-items: end;
            justify-content: center;
            border-radius: 18px 18px 12px 12px;
            background: linear-gradient(180deg, var(--sd-amber-bg), #fffdf9);
            padding: 0 0.45rem 0.45rem;
        }

        body.sd-page-admin-dashboard .sa-bar-fill{
            width: 100%;
            border-radius: 14px 14px 10px 10px;
            background: linear-gradient(180deg, var(--sd-pink-border), var(--sd-pink));
            box-shadow: 0 16px 26px -20px rgba(248,8,91, 0.68);
        }

        body.sd-page-admin-dashboard .sa-activity-item + .sa-activity-item{
            border-top: 1px solid var(--sa-border);
        }

        body.sd-page-admin-dashboard .sa-quick-action:hover{
            border-color: var(--sd-pink-border);
            color: var(--sd-pink);
        }

        @media (min-width: 768px){body.sd-page-admin-dashboard .sa-main-grid{
                grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
            }

            body.sd-page-admin-dashboard .sa-lower-grid{
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }}

        @media (max-width: 767px){body.sd-page-admin-dashboard .sa-shell{
                margin-left: -0.25rem;
                margin-right: -0.25rem;
            }

            body.sd-page-admin-dashboard .sa-hero-actions{
                width: 100%;
            }

            body.sd-page-admin-dashboard .sa-hero-actions a{
                flex: 1 1 0;
                justify-content: center;
            }

            body.sd-page-admin-dashboard .sa-bar-wrap{
                gap: 0.45rem;
                min-height: 170px;
            }

            body.sd-page-admin-dashboard .sa-bar-track{
                height: 130px;
            }}

/* Report Export */
body.sd-page-report-export, body.sd-page-report-export *{ box-sizing: border-box; }
        body.sd-page-report-export{ font-family: DejaVu Sans, sans-serif; color: #0f172a; margin: 24px; }
        body.sd-page-report-export h1,
body.sd-page-report-export h2,
body.sd-page-report-export h3,
body.sd-page-report-export p{ margin: 0; }
        body.sd-page-report-export .header{ margin-bottom: 20px; }
        body.sd-page-report-export .meta{ color: #475569; font-size: 12px; margin-top: 6px; }
        body.sd-page-report-export .filters,
body.sd-page-report-export .summary,
body.sd-page-report-export .table-wrap{ margin-top: 18px; }
        body.sd-page-report-export .chips{ margin-top: 10px; }
        body.sd-page-report-export .chip{ display: inline-block; margin: 0 8px 8px 0; padding: 6px 10px; border-radius: 999px; background: #f8fafc; border: 1px solid #cbd5e1; font-size: 11px; }
        body.sd-page-report-export .summary-grid{ width: 100%; border-collapse: separate; border-spacing: 0 10px; }
        body.sd-page-report-export .summary-grid td{ width: 25%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; vertical-align: top; }
        body.sd-page-report-export .summary-label{ font-size: 11px; text-transform: uppercase; color: #64748b; margin-bottom: 6px; }
        body.sd-page-report-export .summary-value{ font-size: 18px; font-weight: 700; }
        body.sd-page-report-export table.report{ width: 100%; border-collapse: collapse; margin-top: 10px; }
        body.sd-page-report-export table.report th,
body.sd-page-report-export table.report td{ border: 1px solid #cbd5e1; padding: 10px 12px; font-size: 12px; text-align: left; vertical-align: top; }
        body.sd-page-report-export table.report th{ background: #f8fafc; }
        @media print{body.sd-page-report-export{ margin: 12px; }}

/* Reports Dashboard */
@media (max-width: 639px){body.sd-page-reports-dashboard .sd-report-choice-grid{
            gap: 1rem 0.75rem;
        }

        body.sd-page-reports-dashboard .sd-report-choice-card{
            min-height: 124px !important;
            justify-content: center !important;
            gap: 0.45rem !important;
            padding: 0.75rem 0.45rem !important;
        }

        body.sd-page-reports-dashboard .sd-report-choice-icon{
            width: 3.25rem !important;
            height: 3.25rem !important;
            border-radius: 1rem !important;
            box-shadow: 0 14px 22px -14px rgba(15, 23, 42, 0.44) !important;
        }

        body.sd-page-reports-dashboard .sd-report-choice-title{
            min-height: 2.35em;
            font-size: 11px !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            color: #1a1a2e !important;
        }

        body.sd-page-reports-dashboard .sd-font-plus .sd-report-choice-title{
            font-size: 12px !important;
        }

        body.sd-page-reports-dashboard .sd-report-choice-open{
            display: none !important;
        }

        body.sd-page-reports-dashboard .sd-report-choice-lock{
            padding: 0.2rem 0.65rem !important;
            font-size: 9px !important;
            line-height: 1 !important;
            letter-spacing: 0.12em !important;
        }}

    @media (max-width: 360px){body.sd-page-reports-dashboard .sd-report-choice-card{
            min-height: 118px !important;
            padding-inline: 0.35rem !important;
        }

        body.sd-page-reports-dashboard .sd-report-choice-icon{
            width: 3rem !important;
            height: 3rem !important;
        }}

/* Invoice Show */
body.sd-page-invoice-show{
    background: #eef1f5;
}

body.sd-page-invoice-show .invoice-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    padding: 1rem;
    box-shadow: 0 18px 45px -34px rgba(15, 23, 42, 0.48);
}

body.sd-page-invoice-show .invoice-toolbar-actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

body.sd-page-invoice-show .invoice-toolbar-actions a{
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

body.sd-page-invoice-show .invoice-preview-wrap{
    display: flex;
    justify-content: center;
}

body.sd-page-invoice-show .invoice-a4-document{
    width: min(100%, 210mm);
    min-height: 297mm;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 22px;
    background: #fff;
    color: #111827;
    box-shadow: 0 26px 70px -45px rgba(15, 23, 42, 0.58);
}

body.sd-page-invoice-show .invoice-a4-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 2rem;
}

body.sd-page-invoice-show .invoice-company{
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 1rem;
}

body.sd-page-invoice-show .invoice-company-logo,
body.sd-page-invoice-show .invoice-company-mark{
    width: 4.2rem;
    height: 4.2rem;
    flex-shrink: 0;
    border-radius: 16px;
}

body.sd-page-invoice-show .invoice-company-logo{
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

body.sd-page-invoice-show .invoice-company-mark{
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fa4682, #f8085b);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
}

body.sd-page-invoice-show .invoice-company h2{
    margin: 0.35rem 0 0;
    color: #0f172a;
    font-size: 1.7rem;
    line-height: 1.15;
    font-weight: 900;
}

body.sd-page-invoice-show .invoice-company p{
    margin: 0.45rem 0 0;
    max-width: 34rem;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.6;
}

body.sd-page-invoice-show .invoice-kicker,
body.sd-page-invoice-show .invoice-label{
    margin: 0;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.sd-page-invoice-show .invoice-contact-line{
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    margin-top: 0.75rem;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

body.sd-page-invoice-show .invoice-title-card{
    min-width: 15rem;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #0f172a;
    padding: 1.15rem;
    color: #fff;
    text-align: right;
}

body.sd-page-invoice-show .invoice-title-card p{
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.sd-page-invoice-show .invoice-title-card h1{
    margin: 0.55rem 0 0.85rem;
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 900;
}

body.sd-page-invoice-show .invoice-status{
    display: inline-flex;
    border-radius: 999px;
    padding: 0.36rem 0.72rem;
    font-size: 0.72rem;
    font-weight: 900;
}

body.sd-page-invoice-show .invoice-status-paid{ background: #dcfce7; color: #166534; }
body.sd-page-invoice-show .invoice-status-partial{ background: #fef3c7; color: #92400e; }
body.sd-page-invoice-show .invoice-status-due{ background: #fee2e2; color: #991b1b; }

body.sd-page-invoice-show .invoice-info-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.4rem 2rem;
}

body.sd-page-invoice-show .invoice-info-box{
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f8fafc;
    padding: 1rem;
}

body.sd-page-invoice-show .invoice-info-box h3{
    margin: 0.45rem 0 0.25rem;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

body.sd-page-invoice-show .invoice-info-box span{
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

body.sd-page-invoice-show .invoice-items-section{
    padding: 0 2rem 1.4rem;
}

body.sd-page-invoice-show .invoice-items-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    font-size: 0.86rem;
}

body.sd-page-invoice-show .invoice-items-table th{
    background: #111827;
    color: #fff;
    padding: 0.82rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
}

body.sd-page-invoice-show .invoice-items-table td{
    border-bottom: 1px solid #e5e7eb;
    padding: 0.88rem 0.9rem;
    color: #1f2937;
    vertical-align: top;
}

body.sd-page-invoice-show .invoice-items-table tr:last-child td{
    border-bottom: 0;
}

body.sd-page-invoice-show .invoice-items-table td strong{
    display: block;
    color: #0f172a;
    font-weight: 900;
}

body.sd-page-invoice-show .invoice-items-table td span{
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

body.sd-page-invoice-show .invoice-bottom-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 1.25rem;
    padding: 0 2rem 1.6rem;
}

body.sd-page-invoice-show .invoice-note-box,
body.sd-page-invoice-show .invoice-total-card{
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    padding: 1.1rem;
}

body.sd-page-invoice-show .invoice-note-box p:not(.invoice-label){
    margin: 0.65rem 0 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.75;
}

body.sd-page-invoice-show .invoice-signature-row{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2.1rem;
}

body.sd-page-invoice-show .invoice-signature-row span{
    display: block;
    border-top: 1px solid #94a3b8;
}

body.sd-page-invoice-show .invoice-signature-row p{
    margin-top: 0.5rem !important;
    color: #64748b !important;
    font-size: 0.75rem !important;
    font-weight: 800;
}

body.sd-page-invoice-show .invoice-total-card{
    background: #f8fafc;
}

body.sd-page-invoice-show .invoice-total-card div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed #cbd5e1;
    padding: 0.55rem 0;
    color: #475569;
    font-size: 0.88rem;
}

body.sd-page-invoice-show .invoice-total-card div:last-child{
    border-bottom: 0;
}

body.sd-page-invoice-show .invoice-total-card strong{
    color: #0f172a;
    font-weight: 900;
}

body.sd-page-invoice-show .invoice-total-card .grand-total{
    margin: 0.35rem -0.35rem;
    border: 0;
    border-radius: 12px;
    background: #0f172a;
    padding: 0.9rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}

body.sd-page-invoice-show .invoice-total-card .grand-total strong{
    color: #fff;
    font-size: 1.08rem;
}

body.sd-page-invoice-show .invoice-a4-footer{
    margin-top: auto;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    padding: 1rem 2rem;
    text-align: center;
}

body.sd-page-invoice-show .invoice-a4-footer p{
    margin: 0;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 900;
}

body.sd-page-invoice-show .invoice-a4-footer span{
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

body.sd-page-invoice-show .invoice-a4-document{
    border-radius: 4px;
    background: #fff;
    color: #111;
}

body.sd-page-invoice-show .invoice-a4-header{
    align-items: stretch;
    border: 1px solid #111;
    background: #fff;
    padding: 18px;
}

body.sd-page-invoice-show .invoice-company-logo{
    width: 64px;
    height: 64px;
    border: 1px solid #111;
    border-radius: 0;
    object-fit: contain;
}

body.sd-page-invoice-show .invoice-company h2{
    margin-top: 0.2rem;
    color: #111;
    font-size: 1.55rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.sd-page-invoice-show .invoice-company p,
body.sd-page-invoice-show .invoice-contact-line,
body.sd-page-invoice-show .invoice-info-box span,
body.sd-page-invoice-show .invoice-note-box p:not(.invoice-label),
body.sd-page-invoice-show .invoice-a4-footer span{
    color: #222;
}

body.sd-page-invoice-show .invoice-kicker,
body.sd-page-invoice-show .invoice-label{
    color: #111;
    letter-spacing: 0.08em;
}

body.sd-page-invoice-show .invoice-title-card{
    min-width: 14rem;
    border: 1px solid #111;
    border-radius: 0;
    background: #fff;
    color: #111;
    padding: 0.8rem;
}

body.sd-page-invoice-show .invoice-title-card p,
body.sd-page-invoice-show .invoice-title-card span{
    display: block;
    color: #111;
}

body.sd-page-invoice-show .invoice-title-card h1{
    margin: 0.45rem 0;
    color: #111;
    font-size: 1.05rem;
}

body.sd-page-invoice-show .invoice-status,
body.sd-page-invoice-show .invoice-status-paid,
body.sd-page-invoice-show .invoice-status-partial,
body.sd-page-invoice-show .invoice-status-due{
    border: 1px solid #111;
    background: #fff;
    color: #111;
}

body.sd-page-invoice-show .invoice-a4-title{
    margin: 12px auto 0;
    width: fit-content;
    border: 1px solid #111;
    padding: 5px 22px;
    color: #111;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

body.sd-page-invoice-show .invoice-info-grid{
    gap: 0;
    padding: 14px 0 0;
}

body.sd-page-invoice-show .invoice-info-box{
    border-color: #111;
    border-radius: 0;
    background: #fff;
    padding: 0.75rem 0.85rem;
}

body.sd-page-invoice-show .invoice-info-box + .invoice-info-box{
    border-left: 0;
}

body.sd-page-invoice-show .invoice-info-box h3{
    color: #111;
    font-size: 0.92rem;
}

body.sd-page-invoice-show .invoice-items-section{
    padding: 14px 0 0;
}

body.sd-page-invoice-show .invoice-items-table{
    border-color: #111;
    border-radius: 0;
    font-size: 0.82rem;
}

body.sd-page-invoice-show .invoice-items-table th{
    border-bottom: 1px solid #111;
    border-right: 1px solid #111;
    background: #fff;
    color: #111;
    padding: 0.55rem 0.6rem;
    letter-spacing: 0.05em;
}

body.sd-page-invoice-show .invoice-items-table th:last-child,
body.sd-page-invoice-show .invoice-items-table td:last-child{
    border-right: 0;
}

body.sd-page-invoice-show .invoice-items-table td{
    border-right: 1px solid #111;
    border-bottom: 1px solid #111;
    color: #111;
    padding: 0.55rem 0.6rem;
}

body.sd-page-invoice-show .invoice-items-table td strong{
    color: #111;
}

body.sd-page-invoice-show .invoice-items-table td span{
    color: #222;
}

body.sd-page-invoice-show .invoice-bottom-grid{
    grid-template-columns: minmax(0, 1fr) 70mm;
    gap: 12px;
    padding: 14px 0 0;
}

body.sd-page-invoice-show .invoice-note-box,
body.sd-page-invoice-show .invoice-total-card{
    border-color: #111;
    border-radius: 0;
    background: #fff;
}

body.sd-page-invoice-show .invoice-total-card div{
    border-color: #111;
    color: #111;
}

body.sd-page-invoice-show .invoice-total-card strong{
    color: #111;
}

body.sd-page-invoice-show .invoice-total-card .grand-total{
    margin: 0;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    border-radius: 0;
    background: #fff;
    color: #111;
    padding: 0.7rem 0;
}

body.sd-page-invoice-show .invoice-total-card .grand-total strong{
    color: #111;
}

body.sd-page-invoice-show .invoice-signature-row span{
    border-color: #111;
}

body.sd-page-invoice-show .invoice-signature-row p{
    color: #111 !important;
}

body.sd-page-invoice-show .invoice-a4-footer{
    margin-top: 16px;
    border-color: #111;
    background: #fff;
    padding: 0.8rem 0 0;
}

body.sd-page-invoice-show .invoice-a4-footer p{
    color: #111;
}

body.sd-page-invoice-show .invoice-pos-receipt{
    display: none;
    width: min(100%, 80mm);
    background: #fff;
    color: #111827;
    font-family: var(--font-bengali), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.sd-invoice-paper-pos .invoice-preview-wrap{
    align-items: flex-start;
}

body.sd-invoice-paper-pos .invoice-a4-document{
    display: none;
}

body.sd-invoice-paper-pos .invoice-pos-receipt{
    display: block;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 22px 55px -38px rgba(15, 23, 42, 0.65);
}

body.sd-page-invoice-show .pos-receipt-header{
    border-bottom: 1px dashed #111827;
    padding-bottom: 0.6rem;
    text-align: center;
}

body.sd-page-invoice-show .pos-receipt-header img{
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 0.4rem;
    object-fit: cover;
}

body.sd-page-invoice-show .pos-receipt-header h2{
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
}

body.sd-page-invoice-show .pos-receipt-header p,
body.sd-page-invoice-show .pos-receipt-footer p,
body.sd-page-invoice-show .pos-receipt-footer span{
    margin: 0.18rem 0 0;
    font-size: 0.68rem;
    line-height: 1.35;
}

body.sd-page-invoice-show .pos-receipt-meta,
body.sd-page-invoice-show .pos-receipt-total{
    border-bottom: 1px dashed #111827;
    padding: 0.55rem 0;
}

body.sd-page-invoice-show .pos-receipt-meta div,
body.sd-page-invoice-show .pos-receipt-total div{
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.18rem;
    font-size: 0.68rem;
}

body.sd-page-invoice-show .pos-receipt-meta strong,
body.sd-page-invoice-show .pos-receipt-total strong{
    text-align: right;
}

body.sd-page-invoice-show .pos-receipt-items{
    border-bottom: 1px dashed #111827;
    padding: 0.45rem 0;
}

body.sd-page-invoice-show .pos-receipt-item{
    padding: 0.28rem 0;
}

body.sd-page-invoice-show .pos-receipt-item-top,
body.sd-page-invoice-show .pos-receipt-item-sub{
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

body.sd-page-invoice-show .pos-receipt-item-top{
    font-size: 0.72rem;
    font-weight: 900;
}

body.sd-page-invoice-show .pos-receipt-item-top strong{
    overflow-wrap: anywhere;
}

body.sd-page-invoice-show .pos-receipt-item-sub{
    margin-top: 0.12rem;
    color: #4b5563;
    font-size: 0.64rem;
}

body.sd-page-invoice-show .pos-receipt-total .pos-grand{
    margin: 0.42rem 0;
    border-top: 1px solid #111827;
    border-bottom: 1px solid #111827;
    padding: 0.35rem 0;
    font-size: 0.84rem;
    font-weight: 900;
}

body.sd-page-invoice-show .pos-receipt-footer{
    padding-top: 0.55rem;
    text-align: center;
}

body.sd-page-invoice-show .pos-receipt-footer strong{
    display: block;
    margin-top: 0.35rem;
    font-size: 0.68rem;
}

@media (max-width: 767px){
    body.sd-page-invoice-show .invoice-page{
        padding: 0.75rem;
    }

    body.sd-page-invoice-show .invoice-toolbar{
        align-items: stretch;
        flex-direction: column;
    }

    body.sd-page-invoice-show .invoice-toolbar-actions{
        justify-content: stretch;
    }

    body.sd-page-invoice-show .invoice-toolbar-actions a{
        flex: 1 1 9rem;
        justify-content: center;
    }

    body.sd-page-invoice-show .invoice-a4-header,
    body.sd-page-invoice-show .invoice-company{
        flex-direction: column;
    }

    body.sd-page-invoice-show .invoice-title-card{
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    body.sd-page-invoice-show .invoice-info-grid,
    body.sd-page-invoice-show .invoice-bottom-grid{
        grid-template-columns: 1fr;
    }

    body.sd-page-invoice-show .invoice-a4-header,
    body.sd-page-invoice-show .invoice-info-grid,
    body.sd-page-invoice-show .invoice-items-section,
    body.sd-page-invoice-show .invoice-bottom-grid{
        padding-inline: 1rem;
    }

    body.sd-page-invoice-show .invoice-items-section{
        overflow-x: auto;
    }

    body.sd-page-invoice-show .invoice-items-table{
        min-width: 44rem;
    }
}

@media print{
    body.sd-page-invoice-show,
    body.sd-page-invoice-show *{
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.sd-page-invoice-show .no-print{
        display: none !important;
    }

    body.sd-page-invoice-show{
        background: #fff !important;
        color: #000 !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    body.sd-page-invoice-show .invoice-page{
        max-width: none !important;
        padding: 0 !important;
    }

    body.sd-page-invoice-show .invoice-preview-wrap{
        display: block !important;
    }

    body.sd-invoice-paper-a4 .invoice-a4-document{
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #000 !important;
    }

    body.sd-invoice-paper-a4 .invoice-pos-receipt,
    body.sd-invoice-paper-pos .invoice-a4-document{
        display: none !important;
    }

    body.sd-invoice-paper-a4 .invoice-a4-header{
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px !important;
        border: 1px solid #000 !important;
        padding: 8px 10px !important;
        page-break-inside: avoid !important;
    }

    body.sd-invoice-paper-a4 .invoice-company{
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    body.sd-invoice-paper-a4 .invoice-company-logo{
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #000 !important;
    }

    body.sd-invoice-paper-a4 .invoice-kicker,
    body.sd-invoice-paper-a4 .invoice-label{
        color: #000 !important;
        font-size: 8.5px !important;
        letter-spacing: 0.08em !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-a4 .invoice-company h2{
        margin: 2px 0 0 !important;
        color: #000 !important;
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    body.sd-invoice-paper-a4 .invoice-company p{
        margin: 4px 0 0 !important;
        color: #000 !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    body.sd-invoice-paper-a4 .invoice-contact-line{
        gap: 4px 10px !important;
        margin-top: 6px !important;
        color: #000 !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-a4 .invoice-title-card{
        width: 54mm !important;
        min-width: 54mm !important;
        border: 1px solid #000 !important;
        padding: 7px 8px !important;
        text-align: right !important;
    }

    body.sd-invoice-paper-a4 .invoice-title-card p,
    body.sd-invoice-paper-a4 .invoice-title-card span{
        color: #000 !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    body.sd-invoice-paper-a4 .invoice-title-card h1{
        margin: 4px 0 !important;
        color: #000 !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    body.sd-invoice-paper-a4 .invoice-a4-title{
        margin: 8px auto 0 !important;
        padding: 3px 16px !important;
        color: #000 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-a4 .invoice-info-grid{
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0 !important;
        padding: 8px 0 0 !important;
        page-break-inside: avoid !important;
    }

    body.sd-invoice-paper-a4 .invoice-info-box{
        border: 1px solid #000 !important;
        border-left-width: 0 !important;
        padding: 7px 8px !important;
        min-height: 0 !important;
    }

    body.sd-invoice-paper-a4 .invoice-info-box:first-child{
        border-left-width: 1px !important;
    }

    body.sd-invoice-paper-a4 .invoice-info-box h3{
        margin: 4px 0 2px !important;
        color: #000 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-a4 .invoice-info-box span{
        color: #000 !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-a4 .invoice-items-section,
    body.sd-invoice-paper-a4 .invoice-bottom-grid{
        padding: 8px 0 0 !important;
    }

    body.sd-invoice-paper-a4 .invoice-items-table{
        min-width: 0 !important;
        border: 1px solid #000 !important;
        border-radius: 0 !important;
        font-size: 10px !important;
        page-break-inside: auto !important;
    }

    body.sd-invoice-paper-a4 .invoice-items-table th,
    body.sd-invoice-paper-a4 .invoice-items-table td{
        border-color: #000 !important;
        padding: 5px 6px !important;
        color: #000 !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-a4 .invoice-items-table th{
        background: #fff !important;
        color: #000 !important;
    }

    body.sd-invoice-paper-a4 .invoice-items-table tr{
        page-break-inside: avoid !important;
    }

    body.sd-invoice-paper-a4 .invoice-items-table td strong{
        color: #000 !important;
        font-size: 9.8px !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-a4 .invoice-items-table td span{
        margin-top: 2px !important;
        color: #000 !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    body.sd-invoice-paper-a4 .invoice-bottom-grid{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 58mm !important;
        gap: 8px !important;
        page-break-inside: avoid !important;
    }

    body.sd-invoice-paper-a4 .invoice-note-box,
    body.sd-invoice-paper-a4 .invoice-total-card{
        border: 1px solid #000 !important;
        padding: 8px !important;
    }

    body.sd-invoice-paper-a4 .invoice-note-box p:not(.invoice-label){
        margin-top: 6px !important;
        color: #000 !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    body.sd-invoice-paper-a4 .invoice-signature-row{
        gap: 12px !important;
        margin-top: 22px !important;
    }

    body.sd-invoice-paper-a4 .invoice-signature-row p{
        margin-top: 4px !important;
        color: #000 !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    body.sd-invoice-paper-a4 .invoice-total-card div{
        padding: 4px 0 !important;
        color: #000 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-a4 .invoice-total-card strong{
        color: #000 !important;
        font-size: 10px !important;
    }

    body.sd-invoice-paper-a4 .invoice-total-card .grand-total{
        margin: 2px 0 !important;
        padding: 6px 0 !important;
        color: #000 !important;
        font-size: 11px !important;
    }

    body.sd-invoice-paper-a4 .invoice-total-card .grand-total strong{
        color: #000 !important;
        font-size: 11.5px !important;
    }

    body.sd-invoice-paper-a4 .invoice-a4-footer{
        margin-top: 8px !important;
        padding: 6px 0 0 !important;
        page-break-inside: avoid !important;
    }

    body.sd-invoice-paper-a4 .invoice-a4-footer p{
        color: #000 !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-a4 .invoice-a4-footer span{
        margin-top: 2px !important;
        color: #000 !important;
        font-size: 8.5px !important;
        line-height: 1.2 !important;
    }

    body.sd-invoice-paper-pos .invoice-pos-receipt{
        display: block !important;
        width: 72mm !important;
        margin: 0 auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        color: #000 !important;
        font-size: 10px !important;
    }
}

/* Support Help Widget */
.sd-help-root { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; font-family: var(--font-bengali); }
            .sd-help-fab { display: inline-flex; align-items: center; gap: 0.65rem; border: 0; border-radius: 999px; padding: 0.9rem 1.1rem; background: var(--sd-primary-gradient); color: #fff; box-shadow: 0 20px 45px rgba(248, 8, 91, 0.28); font-size: 0.95rem; font-weight: 800; cursor: pointer; }
            .sd-help-fab-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
            .sd-help-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.28); backdrop-filter: blur(6px); }
            .sd-help-panel { position: fixed; right: 1rem; bottom: 5.6rem; width: min(26rem, calc(100vw - 1.5rem)); max-height: min(80vh, 44rem); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1.5rem; background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%); box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18); opacity: 0; transform: translateY(18px) scale(0.98); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
            .sd-help-root.is-open .sd-help-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
            .sd-help-root.is-open .sd-help-backdrop { display: block; }
            .sd-help-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 0.9rem; border-bottom: 1px solid rgba(15, 23, 42, 0.07); background: radial-gradient(circle at top left, rgba(248, 8, 91, 0.14), transparent 45%), radial-gradient(circle at top right, rgba(250, 70, 130, 0.12), transparent 35%), #fff; }
            .sd-help-kicker { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sd-pink); }
            .sd-help-title { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 900; color: #0f172a; }
            .sd-help-header-actions { display: flex; align-items: center; gap: 0.55rem; }
            .sd-help-lang { display: inline-flex; padding: 0.2rem; border-radius: 999px; background: var(--sd-pink-bg); }
            .sd-help-lang button, .sd-help-close, .sd-help-link, .sd-help-ghost, .sd-help-primary, .sd-help-question, .sd-help-category, .sd-help-action { cursor: pointer; }
            .sd-help-lang button { border: 0; background: transparent; color: var(--sd-pink); font-size: 0.78rem; font-weight: 800; padding: 0.4rem 0.7rem; border-radius: 999px; }
            .sd-help-lang button.is-active { background: var(--sd-primary-gradient); color: #fff; }
            .sd-help-close { width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: rgba(15, 23, 42, 0.06); color: #0f172a; font-size: 1.2rem; line-height: 1; }
            .sd-help-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border-bottom: 1px solid rgba(15, 23, 42, 0.06); background: rgba(250, 250, 249, 0.92); }
            .sd-help-search { flex: 1; display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 0.85rem; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 1rem; background: #fff; color: #64748b; }
            .sd-help-search input { width: 100%; border: 0; background: transparent; color: #0f172a; font-size: 0.92rem; outline: none; }
            .sd-help-ghost, .sd-help-link, .sd-help-primary, .sd-help-question, .sd-help-category, .sd-help-action { transition: 0.2s ease; }
            .sd-help-ghost { border: 1px solid var(--sd-pink-border); border-radius: 999px; background: var(--sd-pink-bg); color: var(--sd-pink); padding: 0.75rem 0.9rem; font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
            .sd-help-body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; overflow-y: auto; background: linear-gradient(180deg, rgba(248, 250, 252, 0.45), rgba(255, 255, 255, 0.96)); }
            .sd-help-section { display: flex; flex-direction: column; gap: 0.8rem; }
            .sd-help-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
            .sd-help-section-head h4 { margin: 0; font-size: 0.84rem; font-weight: 900; color: #0f172a; letter-spacing: 0.02em; }
            .sd-help-link { border: 0; background: transparent; color: var(--sd-pink); font-size: 0.78rem; font-weight: 800; padding: 0; }
            .sd-help-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
            .sd-help-category { width: 100%; text-align: left; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 1rem; background: #fff; padding: 0.85rem 0.9rem; font-size: 0.84rem; font-weight: 800; color: #0f172a; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04); }
            .sd-help-category small { display: block; margin-top: 0.35rem; color: #64748b; font-size: 0.72rem; font-weight: 700; }
            .sd-help-category.is-active, .sd-help-category:hover { border-color: var(--sd-pink-border); background: var(--sd-pink-bg); }
            .sd-help-list { display: flex; flex-direction: column; gap: 0.55rem; }
            .sd-help-question, .sd-help-action { width: 100%; text-align: left; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1rem; background: #fff; padding: 0.85rem 0.95rem; color: #0f172a; font-size: 0.84rem; font-weight: 700; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04); }
            .sd-help-question small, .sd-help-action small { display: block; margin-top: 0.35rem; color: #64748b; font-size: 0.72rem; font-weight: 700; }
            .sd-help-question:hover, .sd-help-action:hover { border-color: var(--sd-pink-border); background: rgba(255, 255, 255, 0.98); transform: translateY(-1px); }
            .sd-help-chat { display: flex; flex-direction: column; gap: 0.75rem; }
            .sd-help-bubble { max-width: 88%; padding: 0.85rem 0.95rem; border-radius: 1.15rem; font-size: 0.86rem; line-height: 1.6; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); animation: sd-help-rise 0.22s ease; }
            .sd-help-bubble.user { align-self: flex-end; border-bottom-right-radius: 0.35rem; background: var(--sd-primary-gradient); color: #fff; }
            .sd-help-bubble.assistant { align-self: flex-start; border-bottom-left-radius: 0.35rem; background: #fff; border: 1px solid rgba(148, 163, 184, 0.16); color: #0f172a; }
            .sd-help-bubble-meta { margin-bottom: 0.45rem; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; }
            .sd-help-feedback { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.75rem; flex-wrap: wrap; }
            .sd-help-feedback button { border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; background: rgba(248, 250, 252, 0.9); color: #0f172a; padding: 0.45rem 0.75rem; font-size: 0.74rem; font-weight: 800; }
            .sd-help-feedback .is-done { color: var(--sd-pink); font-size: 0.74rem; font-weight: 800; }
            .sd-help-empty, .sd-help-contact-card { border: 1px dashed var(--sd-pink-border); border-radius: 1.2rem; background: var(--sd-pink-bg); padding: 1rem; }
            .sd-help-empty p, .sd-help-copy { margin: 0 0 0.75rem; color: #0f172a; font-size: 0.84rem; line-height: 1.6; }
            .sd-help-primary { border: 0; border-radius: 999px; background: var(--sd-primary-gradient); color: #fff; padding: 0.75rem 1rem; font-size: 0.8rem; font-weight: 900; }
            .sd-help-contact-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.95rem; }
            .sd-help-action { width: auto; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.9rem; }
            .sd-help-form { display: flex; flex-direction: column; gap: 0.85rem; }
            .sd-help-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
            .sd-help-form label { display: flex; flex-direction: column; gap: 0.4rem; color: #0f172a; font-size: 0.76rem; font-weight: 800; }
            .sd-help-form input, .sd-help-form textarea, .sd-help-form select { border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 0.95rem; background: #fff; color: #0f172a; padding: 0.75rem 0.9rem; font-size: 0.84rem; outline: none; }
            .sd-help-form textarea { resize: vertical; }
            .sd-help-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
            .sd-help-form-status { margin: 0; color: var(--sd-pink); font-size: 0.76rem; font-weight: 800; }
            @keyframes sd-help-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
            @media (max-width: 640px) {
                .sd-help-root { right: 0.75rem; left: 0.75rem; bottom: 4.75rem; }
                .sd-help-fab { position: fixed; right: 0.75rem; bottom: 5rem; padding: 0.88rem 1rem; }
                .sd-help-panel { right: 0.75rem; left: 0.75rem; bottom: 0.75rem; width: auto; max-height: 82vh; }
                .sd-help-category-grid, .sd-help-form-grid { grid-template-columns: 1fr; }
                .sd-help-toolbar { flex-direction: column; align-items: stretch; }
                .sd-help-ghost, .sd-help-primary { width: 100%; text-align: center; }
            }

/* Reports Print */
body.sd-page-reports-print{ font-family: var(--font-bengali); margin: 24px; color: #1a1a2e; } body.sd-page-reports-print h1{ margin: 0 0 8px; color: #fa4682; } body.sd-page-reports-print p{ margin: 0 0 18px; color: #5f5e5a; } body.sd-page-reports-print .grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } body.sd-page-reports-print .card{ border: 1px solid #e2e4e9; padding: 14px; border-radius: 10px; background: #faf8f2; font-weight: 700; }

/* Staff Performance Print */
body.sd-page-staff-performance-print{ font-family: var(--font-bengali); margin: 24px; color: #1a1a2e; } body.sd-page-staff-performance-print h1{ margin: 0 0 8px; color: #fa4682; } body.sd-page-staff-performance-print p{ margin: 0 0 18px; color: #5f5e5a; } body.sd-page-staff-performance-print table{ width: 100%; border-collapse: collapse; } body.sd-page-staff-performance-print th,
body.sd-page-staff-performance-print td{ border: 1px solid #e2e4e9; padding: 10px; font-size: 12px; } body.sd-page-staff-performance-print th{ background: #f1efe8; color: #5f5e5a; }

/* Staff Attendance Print */
body.sd-page-staff-attendance-print{ font-family: var(--font-bengali); margin: 24px; color: #1a1a2e; } body.sd-page-staff-attendance-print h1{ margin: 0 0 8px; color: #fa4682; } body.sd-page-staff-attendance-print p{ margin: 0 0 18px; color: #5f5e5a; } body.sd-page-staff-attendance-print table{ width: 100%; border-collapse: collapse; font-size: 12px; } body.sd-page-staff-attendance-print th,
body.sd-page-staff-attendance-print td{ border: 1px solid #e2e4e9; padding: 8px; text-align: left; } body.sd-page-staff-attendance-print th{ background: #faf8f2; }

/* Baki Print */
body.sd-page-baki-print{ font-family: var(--font-bengali); margin: 24px; color: #1a1a2e; } body.sd-page-baki-print h1{ margin: 0 0 8px; color: #fa4682; } body.sd-page-baki-print p{ margin: 0 0 8px; color: #5f5e5a; } body.sd-page-baki-print table{ width: 100%; border-collapse: collapse; margin-top: 16px; } body.sd-page-baki-print th,
body.sd-page-baki-print td{ border: 1px solid #e2e4e9; padding: 10px; text-align: left; font-size: 12px; } body.sd-page-baki-print th{ background: #f1efe8; color: #5f5e5a; }

/* Barcode Print Preview */
body.sd-page-barcode-print-preview, body.sd-page-barcode-print-preview *{ box-sizing: border-box; }
body.sd-page-barcode-print-preview{ margin: 0; padding: 20px; background: #f5f6f8; color: #111827; font-family: 'Hind Siliguri', var(--font-bengali), 'Nirmala UI', sans-serif; }
body.sd-page-barcode-print-preview .toolbar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 18px; background: #ffffff; box-shadow: 0 16px 40px -30px rgba(15, 23, 42, 0.35); }
body.sd-page-barcode-print-preview .toolbar h1{ margin: 0; font-size: 20px; font-weight: 800; }
body.sd-page-barcode-print-preview .toolbar p{ margin: 6px 0 0; font-size: 13px; color: #64748b; }
body.sd-page-barcode-print-preview .toolbar-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
body.sd-page-barcode-print-preview .toolbar-actions a,
body.sd-page-barcode-print-preview .toolbar-actions button{ appearance: none; border: 1px solid #cbd5e1; border-radius: 999px; background: #ffffff; color: #0f172a; cursor: pointer; font-size: 13px; font-weight: 700; padding: 10px 14px; text-decoration: none; }
body.sd-page-barcode-print-preview .toolbar-actions button{ background: #111827; border-color: #111827; color: #ffffff; }
body.sd-page-barcode-print-preview .sheet{ margin: 0 auto 18px; background: #ffffff; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 24px 55px -40px rgba(15, 23, 42, 0.45); }
body.sd-page-barcode-print-preview .sheet.a4{ width: 210mm; min-height: 297mm; padding: 10mm; }
body.sd-page-barcode-print-preview .sheet.thermal{ width: calc(var(--label-width) + 8mm); padding: 4mm; }
body.sd-page-barcode-print-preview .sheet.single{ width: calc(var(--label-width) + 8mm); padding: 4mm; }
body.sd-page-barcode-print-preview .labels-grid{ display: grid; gap: var(--label-gap); justify-content: start; align-content: start; }
body.sd-page-barcode-print-preview .labels-grid.thermal{ grid-template-columns: var(--label-width); }
body.sd-page-barcode-print-preview .labels-grid.single{ grid-template-columns: var(--label-width); }
body.sd-page-barcode-print-preview .barcode-label{ width: var(--label-width); min-height: var(--label-height); padding: var(--label-padding); background: #ffffff; border: var(--label-border); color: #000000; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
body.sd-page-barcode-print-preview .label-shop{ font-size: calc(var(--label-font) - 1px); font-weight: 800; line-height: 1.15; text-align: center; }
body.sd-page-barcode-print-preview .label-name{ margin-top: 1mm; font-size: var(--label-font); font-weight: 700; line-height: 1.18; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.sd-page-barcode-print-preview .label-meta,
body.sd-page-barcode-print-preview .label-price,
body.sd-page-barcode-print-preview .label-barcode-number{ font-size: calc(var(--label-font) - 1px); line-height: 1.15; }
body.sd-page-barcode-print-preview .label-meta{ margin-top: 0.7mm; color: #111827; }
body.sd-page-barcode-print-preview .label-price{ margin-top: 0.7mm; font-weight: 800; text-align: center; }
body.sd-page-barcode-print-preview .barcode-svg{ margin-top: auto; width: 100%; }
body.sd-page-barcode-print-preview .barcode-svg svg{ display: block; width: 100%; height: auto; max-height: var(--barcode-height); }
body.sd-page-barcode-print-preview .label-barcode-number{ margin-top: 0.7mm; font-family: 'DejaVu Sans Mono', 'Courier New', monospace; font-weight: 700; letter-spacing: 0.03em; text-align: center; word-break: break-all; }
body.sd-page-barcode-print-preview .empty-state{ border: 1px dashed #cbd5e1; border-radius: 18px; background: #ffffff; padding: 28px; text-align: center; color: #64748b; }
@media print{body.sd-page-barcode-print-preview{ background: #ffffff; padding: 0; } body.sd-page-barcode-print-preview .no-print{ display: none !important; } body.sd-page-barcode-print-preview .sheet{ box-shadow: none; border: 0; border-radius: 0; margin: 0; width: auto; } body.sd-page-barcode-print-preview .sheet.a4{ width: auto; min-height: auto; padding: 0; } body.sd-page-barcode-print-preview .sheet.thermal,
body.sd-page-barcode-print-preview .sheet.single{ width: auto; padding: 0; } body.sd-page-barcode-print-preview .page-break{ page-break-after: always; } body.sd-page-barcode-print-preview .page-break:last-child{ page-break-after: auto; }}