:root{
            --bo-bg: #edf3f9;
            --bo-bg-2: #f6f9fc;
            --bo-card: rgba(255,255,255,.92);
            --bo-card-strong: #ffffff;
            --bo-border: rgba(148, 163, 184, .18);
            --bo-text: #162033;
            --bo-muted: #667085;
            --bo-primary: #2563eb;
            --bo-primary-dark: #1d4ed8;
            --bo-primary-soft: rgba(37, 99, 235, .12);
            --bo-green: #16a34a;
            --bo-green-soft: rgba(22, 163, 74, .12);
            --bo-yellow: #d97706;
            --bo-yellow-soft: rgba(217, 119, 6, .12);
            --bo-red: #dc2626;
            --bo-red-soft: rgba(220, 38, 38, .12);
            --bo-dark: #0f172a;
            --bo-dark-soft: rgba(15, 23, 42, .08);
            --bo-radius: 22px;
            --bo-radius-sm: 16px;
            --bo-shadow: 0 18px 45px rgba(15, 23, 42, .08);
            --bo-shadow-soft: 0 8px 24px rgba(15, 23, 42, .06);
        }

        html, body {
            background:
                radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 28%),
                linear-gradient(180deg, #f7faff 0%, var(--bo-bg) 42%, #eaf1f8 100%);
            color: var(--bo-text);
            font-family: Inter, Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100%;
        }

        .bo-topbar{
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 18%),
                radial-gradient(circle at 15% 10%, rgba(255,255,255,.12), transparent 20%),
                linear-gradient(135deg, #0f4fe8 0%, #1d4ed8 45%, #0f2f8e 100%);
            color: #fff;
            padding: 26px 24px 22px;
            box-shadow: 0 12px 30px rgba(29, 78, 216, .25);
        }

        .bo-topbar::after{
            content: "";
            position: absolute;
            inset: auto -15% -45% auto;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%);
            pointer-events: none;
        }

        .bo-topbar h1{
            font-size: clamp(1.45rem, 2vw, 2.2rem);
            margin: 0;
            font-weight: 900;
            letter-spacing: -0.03em;
        }

        .bo-topbar .sub{
            font-size: .98rem;
            opacity: .95;
            margin-top: 8px;
            max-width: 900px;
        }

        .bo-topbar-meta{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
        }

        .bo-top-chip{
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 999px;
            padding: 8px 12px;
            font-size: .85rem;
            backdrop-filter: blur(8px);
            white-space: nowrap;
        }

        .bo-page{
            padding: 18px;
        }

        .bo-kpi-grid{
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 14px;
            margin-bottom: 18px;
        }

        .bo-kpi{
            position: relative;
            overflow: hidden;
            background: var(--bo-card);
            backdrop-filter: blur(10px);
            border: 1px solid var(--bo-border);
            border-radius: 20px;
            box-shadow: var(--bo-shadow-soft);
            padding: 18px 18px 16px;
            min-height: 132px;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }

        .bo-kpi:hover{
            transform: translateY(-2px);
            box-shadow: var(--bo-shadow);
            border-color: rgba(37, 99, 235, .18);
        }

        .bo-kpi::before{
            content: "";
            position: absolute;
            right: -18px;
            top: -18px;
            width: 92px;
            height: 92px;
            border-radius: 50%;
            background: rgba(255,255,255,.55);
            opacity: .55;
        }

        .bo-kpi-head{
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
            position: relative;
            z-index: 1;
        }

        .bo-kpi-icon{
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .bo-kpi .label{
            display: block;
            font-size: .84rem;
            color: var(--bo-muted);
            margin: 0 0 8px;
            line-height: 1.25;
        }

        .bo-kpi .value{
            font-size: clamp(1.6rem, 2vw, 2.15rem);
            font-weight: 900;
            line-height: 1.05;
            margin: 0;
            letter-spacing: -.03em;
            position: relative;
            z-index: 1;
        }

        .bo-kpi .hint{
            margin-top: 8px;
            font-size: .78rem;
            color: var(--bo-muted);
            line-height: 1.35;
            position: relative;
            z-index: 1;
        }

        .bo-kpi .subvalue{
            margin-top: 6px;
            font-size: .82rem;
            color: var(--bo-muted);
            font-weight: 600;
            position: relative;
            z-index: 1;
        }

        .bo-kpi.dark .bo-kpi-icon{ background: var(--bo-dark-soft); color: var(--bo-dark); }
        .bo-kpi.dark .value{ color: var(--bo-dark); }

        .bo-kpi.primary .bo-kpi-icon{ background: var(--bo-primary-soft); color: var(--bo-primary); }
        .bo-kpi.primary .value{ color: var(--bo-primary); }

        .bo-kpi.green .bo-kpi-icon{ background: var(--bo-green-soft); color: var(--bo-green); }
        .bo-kpi.green .value{ color: var(--bo-green); }

        .bo-kpi.yellow .bo-kpi-icon{ background: var(--bo-yellow-soft); color: var(--bo-yellow); }
        .bo-kpi.yellow .value{ color: var(--bo-yellow); }

        .bo-kpi.red .bo-kpi-icon{ background: var(--bo-red-soft); color: var(--bo-red); }
        .bo-kpi.red .value{ color: var(--bo-red); }

        .bo-kpi.span-2{ grid-column: span 2; }
        .bo-kpi.span-3{ grid-column: span 3; }

        .bo-mini-row{
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 18px;
        }

        .bo-mini-card{
            grid-column: span 2;
            background: var(--bo-card-strong);
            border: 1px solid var(--bo-border);
            border-radius: 18px;
            padding: 14px 16px;
            box-shadow: var(--bo-shadow-soft);
            min-height: 92px;
        }

        .bo-mini-card .mini-label{
            font-size: .78rem;
            color: var(--bo-muted);
            margin-bottom: 6px;
        }

        .bo-mini-card .mini-value{
            font-size: 1.4rem;
            font-weight: 900;
            line-height: 1.1;
        }

        .bo-mini-card .mini-note{
            margin-top: 6px;
            font-size: .75rem;
            color: var(--bo-muted);
        }

        .bo-panel{
            background: var(--bo-card);
            backdrop-filter: blur(10px);
            border: 1px solid var(--bo-border);
            border-radius: var(--bo-radius);
            box-shadow: var(--bo-shadow);
            overflow: hidden;
            height: 100%;
        }

        .bo-panel-header{
            padding: 16px 18px;
            border-bottom: 1px solid var(--bo-border);
            background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(248,250,252,.9));
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .bo-panel-header .title{
            font-size: 1rem;
            margin: 0;
            font-weight: 800;
            letter-spacing: -.01em;
        }

        .bo-panel-header .note{
            font-size: .78rem;
            color: var(--bo-muted);
            font-weight: 600;
            text-align: right;
        }

        .bo-panel-body{
            padding: 16px 18px;
        }

        .bo-legend{
            display: flex;
            flex-wrap: wrap;
            gap: 10px 18px;
            align-items: center;
        }

        .bo-dot{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
        }

        .bo-dot.green{ background: var(--bo-green); }
        .bo-dot.yellow{ background: var(--bo-yellow); }
        .bo-dot.red{ background: var(--bo-red); }

        .bo-placeholder{
            border: 1px dashed #c9d5e4;
            border-radius: 16px;
            padding: 22px;
            background: linear-gradient(180deg, #f9fbfd, #f4f8fc);
        }

        .bo-placeholder h6{
            margin: 0 0 10px 0;
            font-weight: 800;
        }

        .bo-placeholder p{
            margin: 0;
            color: var(--bo-muted);
            line-height: 1.5;
        }

        .bo-table{
            margin-bottom: 0;
        }

        .bo-table thead th{
            font-size: .78rem;
            color: #475467;
            background: #f8fafc;
            border-bottom: 1px solid var(--bo-border);
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: .03em;
        }

        .bo-table td{
            vertical-align: middle;
            font-size: .9rem;
        }

        .bo-badge{
            display: inline-block;
            border-radius: 999px;
            padding: 4px 10px;
            font-size: .72rem;
            font-weight: 800;
        }

        .bo-badge.green{ background: rgba(22,163,74,.12); color: var(--bo-green); }
        .bo-badge.yellow{ background: rgba(217,119,6,.14); color: var(--bo-yellow); }
        .bo-badge.red{ background: rgba(220,38,38,.12); color: var(--bo-red); }
        .bo-badge.blue{ background: rgba(37,99,235,.12); color: var(--bo-primary); }
        .bo-badge.gray{ background: rgba(107,114,128,.12); color: #4b5563; }

        .bo-section-note{
            font-size: .82rem;
            color: var(--bo-muted);
            margin-top: 10px;
            line-height: 1.45;
        }

        .bo-category-list{
            display: grid;
            gap: 10px;
        }

        .bo-category-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border: 1px solid var(--bo-border);
            background: rgba(255,255,255,.8);
            border-radius: 16px;
            padding: 11px 13px;
        }

        .bo-category-item .name{
            font-size: .88rem;
            font-weight: 700;
            color: var(--bo-text);
        }

        .bo-category-item .qty{
            min-width: 38px;
            height: 32px;
            border-radius: 10px;
            background: var(--bo-primary-soft);
            color: var(--bo-primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: .88rem;
        }

        .bo-muted{
            color: var(--bo-muted);
        }

        @media (max-width: 1599px){
            .bo-kpi.span-2{ grid-column: span 3; }
            .bo-mini-card{ grid-column: span 3; }
        }

        @media (max-width: 1199px){
            .bo-kpi.span-2{ grid-column: span 4; }
            .bo-kpi.span-3{ grid-column: span 6; }
            .bo-mini-card{ grid-column: span 4; }
        }

        @media (max-width: 991px){
            .bo-topbar{
                padding: 20px 18px 18px;
            }

            .bo-topbar-meta{
                justify-content: flex-start;
                margin-top: 14px;
            }

            .bo-page{
                padding: 14px;
            }

            .bo-panel-header{
                flex-direction: column;
                align-items: flex-start;
            }

            .bo-panel-header .note{
                text-align: left;
            }

            .bo-kpi.span-2,
            .bo-kpi.span-3,
            .bo-mini-card{
                grid-column: span 6;
            }
        }

        @media (max-width: 575px){
            .bo-kpi-grid,
            .bo-mini-row{
                gap: 10px;
            }

            .bo-kpi.span-2,
            .bo-kpi.span-3,
            .bo-mini-card{
                grid-column: span 12;
            }

            .bo-kpi{
                min-height: 120px;
                padding: 16px;
            }

            .bo-panel-body{
                padding: 14px;
            }

            .bo-table td,
            .bo-table th{
                font-size: .84rem;
            }
        }