[x-cloak] {
    display: none !important;
}

:root {
    /* Logo palette */
    --bk-logo-blue: #0061F9;
    --bk-logo-cyan: #00B8E6;
    --bk-logo-blue-deep: #0045C7;
    --bk-logo-yellow: #FFC107;
    --bk-logo-orange: #FF7A00;
    --bk-logo-orange-deep: #FF5A00;
    --bk-primary: #0061F9;
    --bk-primary-dark: #0045C7;
    --bk-primary-deep: #0045C7;
    --bk-teal: #00B8E6;
    --bk-teal-dark: #0045C7;
    --bk-teal-light: #00B8E6;
    --bk-teal-soft: rgba(0, 184, 230, 0.1);
    --bk-slate: #1a2b3c;
    --bk-slate-muted: #6c7a89;
    --bk-bg: #eef4fb;
    --bk-surface: #ffffff;
    --bk-border: rgba(0, 97, 249, 0.12);
    --bk-shadow: 0 14px 34px rgba(13, 55, 120, 0.08);
    --bk-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.05);
    --bk-radius: 0.85rem;
    --bk-radius-lg: 1.15rem;
    --bk-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
}

body.bk-body {
    font-family: var(--bk-font);
    color: var(--bk-slate);
    background:
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(0, 97, 249, 0.12), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 0%, rgba(0, 184, 230, 0.1), transparent 50%),
        linear-gradient(180deg, #eef4fb 0%, #f5f8fc 40%, #eef5f8 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

.bk-brand,
.bk-brand-text {
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--bk-primary-deep);
}

.bk-brand-mark {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #0061F9 0%, #00B8E6 55%, #FF7A00 100%);
    box-shadow: 0 8px 16px rgba(0, 97, 249, 0.28);
    flex-shrink: 0;
}

.bk-brand-favicon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.75rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 8px 16px rgba(0, 97, 249, 0.16);
    padding: 0.15rem;
    flex-shrink: 0;
}

.bk-brand-favicon--sm {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.65rem;
}

.bk-brand-favicon--lg {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1rem;
    padding: 0.28rem;
    box-shadow: 0 14px 28px rgba(0, 97, 249, 0.28);
}

.bk-brand-logo {
    max-height: 2rem;
    max-width: 10rem;
    object-fit: contain;
}

.bk-brand-logo--sm {
    max-height: 1.65rem;
    max-width: 8rem;
}

.bk-brand-logo--lg {
    max-height: 3rem;
    max-width: 14rem;
}

.bk-brand-logo--xl {
    max-height: clamp(4.5rem, 12vw, 7.5rem);
    max-width: min(92vw, 34rem);
}

.bk-brand-mark--sm {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.85rem;
    border-radius: 0.65rem;
}

.bk-brand-mark--lg {
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1.45rem;
    border-radius: 1rem;
    box-shadow: 0 14px 28px rgba(0, 97, 249, 0.32);
}

.bk-brand-mark--xl {
    width: clamp(4.2rem, 10vw, 5.8rem);
    height: clamp(4.2rem, 10vw, 5.8rem);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    border-radius: 1.35rem;
    box-shadow: 0 18px 40px rgba(0, 97, 249, 0.3);
}

.bk-brand-tagline {
    color: var(--bk-slate-muted);
    font-size: 0.95rem;
}

.bk-card {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius-lg);
    box-shadow: var(--bk-shadow-sm);
}

.bk-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bk-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--bk-shadow);
}

.btn-bk-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0061F9;
    --bs-btn-border-color: #0061F9;
    --bs-btn-hover-bg: #0045C7;
    --bs-btn-hover-border-color: #0045C7;
    --bs-btn-active-bg: #0045C7;
    --bs-btn-active-border-color: #0045C7;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(0, 97, 249, 0.22);
}

.btn-bk-outline,
.btn-bk-soft {
    --bs-btn-color: #0045C7;
    --bs-btn-bg: rgba(255, 255, 255, 0.85);
    --bs-btn-border-color: rgba(0, 97, 249, 0.22);
    --bs-btn-hover-bg: #f8fbff;
    --bs-btn-hover-color: #0045C7;
    --bs-btn-hover-border-color: rgba(0, 97, 249, 0.35);
    font-weight: 700;
}

.bk-navbar {
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(0, 97, 249, 0.1);
    box-shadow: 0 8px 24px rgba(13, 55, 120, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bk-navbar .nav-link {
    font-weight: 650;
    color: #475569;
}

.bk-navbar .nav-link:hover {
    color: #0045C7;
}

.bk-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--bk-primary-deep);
}

.bk-type-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bk-radius);
    background: rgba(0, 97, 249, 0.1);
    color: #0061F9;
    font-size: 1.35rem;
}

.bk-sidebar {
    width: 300px;
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 184, 230, 0.14), transparent 34%),
        radial-gradient(circle at 100% 18%, rgba(0, 97, 249, 0.12), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    border-right: 1px solid #E2E8F0;
    box-shadow: 8px 0 28px rgba(13, 55, 120, 0.05);
}

.bk-sidebar__brand {
    padding: 1.2rem 1.15rem 1.05rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.bk-sidebar__logo {
    display: inline-flex;
    max-width: 100%;
}

.bk-sidebar__brand .bk-brand-logo,
.bk-sidebar__brand .bk-brand-logo--lg {
    max-height: 3.6rem;
    max-width: 15.5rem;
}

.bk-sidebar__brand .bk-brand-mark,
.bk-sidebar__brand .bk-brand-mark--lg {
    width: 3.6rem;
    height: 3.6rem;
    font-size: 1.55rem;
}

.bk-sidebar__brand .bk-brand-text {
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 1.2rem;
}

.bk-sidebar__level {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.8rem;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #0061F9, #00B8E6);
    box-shadow: 0 8px 18px rgba(0, 97, 249, 0.22);
}

.bk-sidebar__level i {
    font-size: 0.85rem;
}

.bk-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 0.95rem 0.5rem;
}

.bk-sidebar .nav-link,
.bk-nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #334155;
    border-radius: 1.05rem;
    padding: 0.8rem 0.85rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-decoration: none;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.bk-nav-item__icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    font-size: 1.2rem;
    color: #0061F9;
    background: #fff;
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 4px 12px rgba(0, 97, 249, 0.08);
    transition: inherit;
}

.bk-nav-item__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.bk-nav-item__label {
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.15;
}

.bk-nav-item__desc {
    font-size: 0.74rem;
    font-weight: 600;
    color: #94A3B8;
    line-height: 1.2;
}

.bk-nav-item__arrow {
    font-size: 0.85rem;
    color: #CBD5E1;
    transition: inherit;
}

.bk-sidebar .nav-link:hover,
.bk-nav-item:hover {
    background: #fff;
    color: #0045C7;
    border-color: rgba(0, 97, 249, 0.14);
    box-shadow: 0 10px 22px rgba(0, 97, 249, 0.1);
    transform: translateX(2px);
}

.bk-sidebar .nav-link:hover .bk-nav-item__icon,
.bk-nav-item:hover .bk-nav-item__icon {
    color: #fff;
    background: linear-gradient(145deg, #0061F9, #00B8E6);
    border-color: transparent;
}

.bk-sidebar .nav-link:hover .bk-nav-item__desc,
.bk-nav-item:hover .bk-nav-item__desc {
    color: #64748B;
}

.bk-sidebar .nav-link:hover .bk-nav-item__arrow,
.bk-nav-item:hover .bk-nav-item__arrow {
    color: #0061F9;
}

.bk-sidebar .nav-link.active,
.bk-nav-item.active {
    background: linear-gradient(135deg, #0061F9 0%, #00B8E6 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(0, 97, 249, 0.28);
}

.bk-sidebar .nav-link.active .bk-nav-item__icon,
.bk-nav-item.active .bk-nav-item__icon {
    color: #0061F9;
    background: #fff;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.bk-sidebar .nav-link.active .bk-nav-item__desc,
.bk-nav-item.active .bk-nav-item__desc {
    color: rgba(255, 255, 255, 0.82);
}

.bk-sidebar .nav-link.active .bk-nav-item__arrow,
.bk-nav-item.active .bk-nav-item__arrow {
    color: rgba(255, 255, 255, 0.9);
}

.bk-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0.4rem 0.15rem;
}

.bk-sidebar-section > span {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94A3B8;
}

.bk-sidebar-section > strong {
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 0.92rem;
    font-weight: 700;
    color: #1E293B;
    letter-spacing: -0.02em;
}

.bk-nav-back {
    color: #475569 !important;
    background: #fff !important;
    border-color: #E2E8F0 !important;
    box-shadow: none !important;
}

.bk-nav-back:hover {
    color: #0061F9 !important;
    border-color: rgba(0, 97, 249, 0.18) !important;
    transform: none !important;
}

.bk-nav-back .bk-nav-item__icon {
    color: #64748B;
    background: #F8FAFC;
    border-color: #E2E8F0;
    box-shadow: none;
}

.bk-sidebar__foot {
    padding: 0.75rem 0.95rem 1.1rem;
    margin-top: auto;
}

.bk-sidebar__tip {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 0.95rem;
    border-radius: 1.05rem;
    color: #fff;
    background: linear-gradient(145deg, #0061F9 0%, #0045C7 100%);
    box-shadow: 0 12px 24px rgba(0, 97, 249, 0.22);
}

.bk-sidebar__tip > i {
    font-size: 1.15rem;
    margin-top: 0.1rem;
}

.bk-sidebar__tip strong {
    display: block;
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.15rem;
}

.bk-sidebar__tip span {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0.88;
}

/* Console account profile dropdown (body.bk-body only — manage keeps its own) */
body.bk-body .bk-profile {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

body.bk-body .bk-profile__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 97, 249, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    color: var(--bk-text, #1E293B);
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 97, 249, 0.1);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

body.bk-body .bk-profile__btn:hover,
body.bk-body .bk-profile__btn[aria-expanded='true'] {
    border-color: rgba(0, 97, 249, 0.3);
    box-shadow: 0 10px 24px rgba(0, 97, 249, 0.14);
    transform: translateY(-1px);
}

body.bk-body .bk-profile__avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(0, 97, 249, 0.18);
}

body.bk-body .bk-profile__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0061F9, #00B8E6);
    color: #fff;
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
}

body.bk-body .bk-profile__meta {
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.15;
}

body.bk-body .bk-profile__name {
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    max-width: 11rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1E293B;
}

body.bk-body .bk-profile__role {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748B;
}

body.bk-body .bk-profile__chevron {
    font-size: 0.78rem;
    color: #94A3B8;
    transition: transform 0.18s ease, color 0.18s ease;
}

body.bk-body .bk-profile__btn[aria-expanded='true'] .bk-profile__chevron {
    transform: rotate(180deg);
    color: #0061F9;
}

body.bk-body .bk-profile__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.55rem);
    width: min(18.5rem, calc(100vw - 1.5rem));
    padding: 0.55rem;
    border-radius: 1.15rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 18px 40px rgba(13, 55, 120, 0.16);
    z-index: 1060;
}

body.bk-body .bk-profile__menu-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    margin-bottom: 0.45rem;
    border-radius: 0.9rem;
    background: #fff;
    border: 1px solid #E2E8F0;
}

body.bk-body .bk-profile__menu-avatar {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(0, 97, 249, 0.16);
}

body.bk-body .bk-profile__menu-copy {
    min-width: 0;
    flex: 1 1 auto;
}

body.bk-body .bk-profile__menu-name {
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.bk-body .bk-profile__menu-email {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.bk-body .bk-profile__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.65rem;
    border: 0;
    background: #fff;
    border-radius: 0.85rem;
    padding: 0.7rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1E293B;
    text-align: left;
    border: 1px solid #E2E8F0;
}

body.bk-body .bk-profile__item-icon {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.12);
}

body.bk-body .bk-profile__item--logout:hover {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.18);
    color: #b91c1c;
}

body.bk-body .bk-profile__item:hover {
    background: rgba(0, 97, 249, 0.06);
    color: #0061F9;
}

body.bk-body .bk-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.6rem;
    padding: 0.85rem 1.25rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 184, 230, 0.1), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(0, 97, 249, 0.1), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border-bottom: 1px solid #E2E8F0;
    box-shadow: 0 8px 24px rgba(13, 55, 120, 0.04);
    position: sticky;
    top: 0;
    z-index: 30;
}

body.bk-body .bk-topbar__left,
body.bk-body .bk-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

body.bk-body .bk-topbar__menu-btn {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    border: 1px solid rgba(0, 97, 249, 0.14);
    background: #fff;
    color: #0061F9;
    box-shadow: 0 4px 12px rgba(0, 97, 249, 0.08);
}

body.bk-body .bk-topbar__title-wrap {
    min-width: 0;
}

body.bk-body .bk-topbar__eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0061F9;
    margin-bottom: 0.1rem;
}

body.bk-body .bk-topbar__title {
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #1E293B;
    line-height: 1.15;
}

body.bk-body .bk-topbar__sub {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(42vw, 22rem);
}

body.bk-body .bk-topbar__action {
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 97, 249, 0.16);
    background: #fff;
    color: #0045C7;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 97, 249, 0.08);
}

body.bk-body .bk-topbar__action:hover {
    background: #f3f8ff;
    color: #0061F9;
}

.bk-topbar {
    background: var(--bk-surface);
    border-bottom: 1px solid var(--bk-border);
}

.bk-sidebar-sub {
    padding-left: 1.5rem;
    margin-bottom: 0.35rem;
}

.bk-sidebar-sub .nav-link {
    font-size: 0.875rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.bk-sidebar-logo {
    max-height: 40px;
    max-width: 160px;
    object-fit: contain;
}

.bk-stat-label {
    color: var(--bk-slate-muted);
    font-size: 0.8rem;
}

.bk-stat-value {
    font-size: 1.75rem;
    font-weight: 650;
    line-height: 1.2;
}

.bk-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: max(3.25rem, calc(env(safe-area-inset-top, 0px) + 2.5rem));
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(160deg, var(--bk-bg) 0%, #ecfdf5 100%);
}

.bk-auth-brand-wrap {
    margin-bottom: 1.35rem !important;
}

.bk-auth-footer {
    margin-top: 1rem;
    text-align: center;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
}

.bk-auth-footer a:not(.bk-auth-switch) {
    color: #0061f9;
    font-weight: 800;
    text-decoration: none;
}

.bk-auth-footer a:not(.bk-auth-switch):hover {
    text-decoration: underline;
}

.bk-auth-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 0.95rem;
    border-radius: 1rem;
    text-align: left;
    text-decoration: none !important;
    color: #0f1f33 !important;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 31, 51, 0.08);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bk-auth-switch:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 97, 249, 0.2);
    box-shadow: 0 14px 28px rgba(0, 97, 249, 0.12);
}

.bk-auth-switch__icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(145deg, #4285f4 0%, #34a853 40%, #fbbc05 70%, #ea4335 100%);
    box-shadow: 0 8px 16px rgba(66, 133, 244, 0.22);
}

.bk-auth-switch__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bk-auth-switch__text strong {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f1f33;
    line-height: 1.2;
}

.bk-auth-switch__text small {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
}

.bk-auth-switch__chev {
    flex: 0 0 auto;
    color: #0061f9;
    font-size: 1.05rem;
}

body.bk-auth-page {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.bk-auth-page .bk-auth-wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 55% at 8% 0%, rgba(0, 97, 249, 0.18), transparent 58%),
        radial-gradient(ellipse 55% 45% at 100% 8%, rgba(255, 122, 0, 0.12), transparent 52%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(0, 184, 230, 0.1), transparent 55%),
        linear-gradient(165deg, #e8f0fb 0%, #f5f8fc 42%, #eef6f9 100%);
    background-attachment: fixed;
}

body.bk-auth-page .bk-auth-wrap::before,
body.bk-auth-page .bk-auth-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(8px);
}

body.bk-auth-page .bk-auth-wrap::before {
    width: 22rem;
    height: 22rem;
    top: -8rem;
    left: -6rem;
    background: radial-gradient(circle, rgba(0, 97, 249, 0.2), transparent 70%);
}

body.bk-auth-page .bk-auth-wrap::after {
    width: 18rem;
    height: 18rem;
    right: -5rem;
    bottom: -4rem;
    background: radial-gradient(circle, rgba(255, 122, 0, 0.16), transparent 70%);
}

body.bk-auth-page .bk-auth-wrap > * {
    position: relative;
    z-index: 1;
}

.bk-auth-brand {
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 1.75rem;
    color: #0045C7;
}

.bk-auth-tagline {
    color: #6c7a89;
    font-size: 0.9rem;
    font-weight: 600;
}

.bk-auth-card {
    overflow: visible;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 246, 255, 0.96) 100%);
    border: 1px solid rgba(15, 31, 51, 0.08);
    border-radius: 1.5rem;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
}

body.bk-auth-page .btn-bk-primary {
    --bs-btn-bg: #0061F9;
    --bs-btn-border-color: #0061F9;
    --bs-btn-hover-bg: #0045C7;
    --bs-btn-hover-border-color: #0045C7;
    --bs-btn-active-bg: #0045C7;
    --bs-btn-active-border-color: #0045C7;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(0, 97, 249, 0.22);
}

.bk-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
}

.bk-status-dot--online {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.bk-status-dot--offline {
    background: #94a3b8;
}

.bk-status-dot--warning {
    background: #FFC107;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.bk-storage-bar .progress {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--bk-border);
}

.bk-storage-bar .progress-bar {
    background: var(--bk-teal);
    border-radius: 999px;
}

.bk-storage-bar.bk-storage-bar--warning .progress-bar {
    background: #FFC107;
}

.bk-storage-bar.bk-storage-bar--danger .progress-bar {
    background: #ef4444;
}

@media (max-width: 991.98px) {
    .bk-sidebar {
        position: fixed;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .bk-sidebar.bk-sidebar-open {
        transform: translateX(0);
    }

    .bk-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        z-index: 1035;
    }
}

/* =========================================================
   CMS Admin ? Hippam-inspired shell (stable rewrite)
   ========================================================= */

body.bk-manage {
    --bk-primary: #0061F9;
    --bk-primary-dark: #0045C7;
    --bk-primary-deep: #0045C7;
    --bk-text: #1a2b3c;
    --bk-muted: #6c7a89;
    --bk-line: rgba(0, 97, 249, 0.12);
    --bk-aside-w: 292px;
    --bk-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin: 0;
    min-height: 100vh;
    font-family: var(--bk-font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bk-text);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(0, 97, 249, 0.12), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 0%, rgba(0, 184, 230, 0.1), transparent 50%),
        linear-gradient(180deg, #eef4fb 0%, #f5f8fc 40%, #eef5f8 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

body.bk-manage *,
body.bk-manage *::before,
body.bk-manage *::after {
    box-sizing: border-box;
}

body.bk-manage a {
    color: var(--bk-primary-deep);
    text-decoration: none;
}

body.bk-manage a:hover {
    color: var(--bk-primary);
}

body.bk-manage h1,
body.bk-manage h2,
body.bk-manage h3,
body.bk-manage h4,
body.bk-manage h5,
body.bk-manage h6 {
    font-family: var(--bk-font);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bk-text);
}

/* Cards & buttons inside manage */
body.bk-manage .bk-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

body.bk-manage .btn-bk-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bk-primary);
    --bs-btn-border-color: var(--bk-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bk-primary-dark);
    --bs-btn-hover-border-color: var(--bk-primary-dark);
    --bs-btn-active-bg: var(--bk-primary-deep);
    --bs-btn-active-border-color: var(--bk-primary-deep);
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(0, 97, 249, 0.22);
}

body.bk-manage .btn-bk-outline {
    --bs-btn-color: var(--bk-primary-deep);
    --bs-btn-border-color: rgba(0, 97, 249, 0.35);
    --bs-btn-hover-bg: rgba(0, 97, 249, 0.08);
    --bs-btn-hover-color: var(--bk-primary-deep);
    border-radius: 999px;
    font-weight: 700;
}

body.bk-manage .form-control,
body.bk-manage .form-select {
    border-radius: 0.75rem;
    border-color: rgba(0, 97, 249, 0.16);
    font-weight: 500;
}

body.bk-manage .form-control:focus,
body.bk-manage .form-select:focus {
    border-color: rgba(0, 97, 249, 0.45);
    box-shadow: 0 0 0 0.2rem rgba(0, 97, 249, 0.15);
}

body.bk-manage .table {
    --bs-table-bg: transparent;
    color: var(--bk-text);
    margin-bottom: 0;
}

body.bk-manage .table thead th {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bk-muted);
    border-bottom-color: var(--bk-line);
    white-space: nowrap;
    background: transparent;
}

body.bk-manage .table > :not(caption) > * > * {
    border-bottom-color: rgba(0, 97, 249, 0.08);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

body.bk-manage .table tbody tr:hover {
    background: rgba(0, 97, 249, 0.03);
}

body.bk-manage .badge.rounded-pill {
    font-weight: 700;
}

body.bk-manage .bk-storage-bar .progress-bar {
    background: linear-gradient(90deg, #0061F9, #00B8E6);
}

/* Shell: CSS Grid ? no fixed+margin fights */
.bk-shell {
    display: grid;
    grid-template-columns: var(--bk-aside-w) minmax(0, 1fr);
    min-height: 100vh;
    width: 100%;
}

.bk-aside {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-right: 1px solid var(--bk-line);
    box-shadow: 4px 0 24px rgba(13, 55, 120, 0.05);
    z-index: 30;
    overflow: hidden;
}

.bk-aside__brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 1rem 0.95rem 0.95rem;
    border-bottom: 1px solid rgba(0, 97, 249, 0.08);
    flex-shrink: 0;
}

/* Logo already includes the mark ? hide standalone favicon when expanded */
.bk-aside__brand-link:has(.bk-aside__logo) > .bk-aside__favicon,
.bk-aside__brand-link:has(.bk-aside__logo) > .bk-aside__mark {
    display: none;
}

.bk-aside__brand .bk-rail-toggle {
    margin-left: auto;
    flex-shrink: 0;
}

.bk-rail-toggle {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    border: 1px solid rgba(0, 97, 249, 0.18);
    background: linear-gradient(145deg, #ffffff 0%, #eef6ff 100%);
    color: #0045C7;
    box-shadow:
        0 8px 18px rgba(0, 97, 249, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
}

.bk-rail-toggle__glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 97, 249, 0.22), transparent 55%);
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bk-rail-toggle i {
    position: relative;
    font-size: 1rem;
    font-weight: 700;
    transition: transform 0.18s ease;
}

.bk-rail-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 97, 249, 0.36);
    color: #0061F9;
    background: linear-gradient(145deg, #ffffff 0%, #e0efff 100%);
    box-shadow:
        0 12px 24px rgba(0, 97, 249, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.bk-rail-toggle:hover .bk-rail-toggle__glow {
    opacity: 1;
    transform: scale(1.08);
}

.bk-rail-toggle:hover i {
    transform: scale(1.06);
}

.bk-rail-toggle:focus-visible {
    outline: 2px solid rgba(0, 97, 249, 0.45);
    outline-offset: 2px;
    box-shadow:
        0 0 0 4px rgba(0, 97, 249, 0.16),
        0 10px 22px rgba(0, 97, 249, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.bk-rail-toggle:active {
    transform: translateY(1px) scale(0.96);
    color: #0061F9;
    background: linear-gradient(145deg, #e8f2ff 0%, #dbeafe 100%);
    border-color: rgba(0, 97, 249, 0.4);
    box-shadow:
        0 2px 8px rgba(0, 97, 249, 0.16),
        inset 0 1px 2px rgba(0, 97, 249, 0.08);
}

.bk-nav-fly__label {
    display: none;
}

.bk-aside__brand-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    color: inherit !important;
}

.bk-aside__mark {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, #0061F9 0%, #00B8E6 55%, #FF7A00 100%);
    box-shadow: 0 8px 16px rgba(0, 97, 249, 0.28);
    flex-shrink: 0;
}

.bk-aside__favicon {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.9rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 8px 16px rgba(0, 97, 249, 0.16);
    flex-shrink: 0;
    padding: 0.2rem;
}

.bk-aside__logo {
    max-height: 56px;
    max-width: 198px;
    width: auto;
    object-fit: contain;
}

.bk-aside__brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.bk-aside__brand-text strong {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #0045C7;
}

.bk-aside__brand-text small {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--bk-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bk-aside__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0.7rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 97, 249, 0.28) transparent;
}

.bk-aside__nav::-webkit-scrollbar {
    width: 6px;
}

.bk-aside__nav::-webkit-scrollbar-track {
    background: transparent;
    margin: 0.5rem 0;
}

.bk-aside__nav::-webkit-scrollbar-thumb {
    background: rgba(0, 97, 249, 0.22);
    border-radius: 999px;
}

.bk-aside__nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 97, 249, 0.4);
}

.bk-nav {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.58rem 0.7rem;
    margin-bottom: 0.2rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    color: #334155 !important;
    font-weight: 600;
    font-size: 0.9rem;
    background: transparent;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.bk-nav i.bi:first-child,
.bk-nav__lead i.bi {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    font-size: 1.08rem;
    flex-shrink: 0;
    color: #0061F9;
    background: rgba(0, 97, 249, 0.1);
    border: 1px solid rgba(0, 97, 249, 0.14);
}

.bk-nav .bi-people {
    color: #00B8E6;
    background: rgba(0, 184, 230, 0.12);
    border-color: rgba(0, 184, 230, 0.18);
}

.bk-nav .bi-receipt {
    color: #FF7A00;
    background: rgba(255, 122, 0, 0.12);
    border-color: rgba(255, 122, 0, 0.18);
}

.bk-nav .bi-cash-coin {
    color: #c98900;
    background: rgba(255, 193, 7, 0.18);
    border-color: rgba(255, 193, 7, 0.35);
}

.bk-nav .bi-gear {
    color: #0045C7;
    background: rgba(0, 69, 199, 0.1);
    border-color: rgba(0, 69, 199, 0.16);
}

.bk-nav:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 97, 249, 0.12);
    color: #0045C7 !important;
    box-shadow: 0 4px 12px rgba(0, 97, 249, 0.06);
}

.bk-nav:active {
    transform: scale(0.985);
    background: #eff6ff;
    border-color: rgba(0, 97, 249, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 97, 249, 0.08);
}

.bk-nav:focus-visible {
    outline: 2px solid rgba(0, 97, 249, 0.4);
    outline-offset: 1px;
}

.bk-nav.is-active {
    background: linear-gradient(135deg, rgba(0, 97, 249, 0.12), rgba(255, 255, 255, 0.95));
    border-color: rgba(0, 97, 249, 0.16);
    color: #0045C7 !important;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 97, 249, 0.08);
}

.bk-nav--toggle {
    position: relative;
    justify-content: flex-start;
}

.bk-nav--toggle .bk-nav__chevron {
    margin-left: auto;
}

.bk-nav--toggle::before {
    content: '';
    position: absolute;
    left: 0.28rem;
    top: 50%;
    width: 3px;
    height: 1.2rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #0061F9, #00B8E6);
    opacity: 0;
    transform: translateY(-50%) scaleY(0.4);
    transition: opacity 160ms ease, transform 160ms ease;
}

.bk-nav--toggle.is-open,
.bk-nav--toggle.is-active {
    background: linear-gradient(135deg, rgba(0, 97, 249, 0.1), rgba(255, 255, 255, 0.95));
    border-color: rgba(0, 97, 249, 0.14);
    color: #0045C7 !important;
    font-weight: 700;
}

.bk-nav--toggle.is-open::before,
.bk-nav--toggle.is-active::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.bk-nav__lead {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.bk-nav__chevron {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.72rem;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.bk-nav__chevron.is-open {
    transform: rotate(180deg);
    color: #0061F9;
    background: rgba(0, 97, 249, 0.12);
    border-color: rgba(0, 97, 249, 0.2);
}

.bk-aside__rail {
    display: none;
}

.bk-nav-drop {
    margin-bottom: 0.2rem;
}

.bk-nav-drop.is-open {
    margin-bottom: 0.35rem;
}

.bk-nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
}

.bk-nav-sub.is-open {
    grid-template-rows: 1fr;
}

.bk-nav-sub__inner {
    overflow: hidden;
    min-height: 0;
}

.bk-nav-sub.is-open .bk-nav-sub__inner {
    margin: 0.2rem 0 0.15rem 0.95rem;
    padding: 0.25rem 0.2rem 0.25rem 0.55rem;
    border-left: 2px solid rgba(0, 97, 249, 0.22);
    border-radius: 0 0.75rem 0.75rem 0;
    background: linear-gradient(90deg, rgba(0, 97, 249, 0.06), rgba(255, 255, 255, 0.35));
}

.bk-nav--sub {
    position: relative;
    padding: 0.48rem 0.6rem 0.48rem 0.55rem;
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 0.12rem;
    color: #475569 !important;
}

.bk-nav--sub::before {
    content: '';
    position: absolute;
    left: -0.62rem;
    top: 50%;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #cbd5e1;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 97, 249, 0.12);
    transform: translateY(-50%);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.bk-nav--sub:hover::before,
.bk-nav--sub.is-active::before {
    background: #0061F9;
    box-shadow: 0 0 0 2px rgba(0, 97, 249, 0.18);
}

.bk-nav--sub i.bi {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.85rem;
    border-radius: 0.45rem;
}

.bk-nav--sub.is-active {
    background: rgba(0, 97, 249, 0.1);
    border-color: rgba(0, 97, 249, 0.14);
    color: #0045C7 !important;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.bk-nav-group {
    margin: 0.55rem 0 0.35rem;
    padding: 0.35rem 0 0.2rem;
    border-top: 1px solid rgba(0, 97, 249, 0.07);
}

.bk-nav-group__label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.bk-nav-group__label i.bi {
    width: 1.55rem;
    height: 1.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    background: rgba(0, 97, 249, 0.08);
    border: 1px solid rgba(0, 97, 249, 0.12);
}

.bk-nav-group__label .bi-receipt {
    color: #FF7A00;
    background: rgba(255, 122, 0, 0.12);
    border-color: rgba(255, 122, 0, 0.18);
}

.bk-nav-group__label .bi-gear {
    color: #475569;
    background: rgba(71, 85, 105, 0.1);
    border-color: rgba(71, 85, 105, 0.16);
}

.bk-aside__foot {
    flex-shrink: 0;
    padding: 0.75rem 0.85rem 1rem;
    border-top: 1px solid rgba(0, 97, 249, 0.08);
}

.bk-user-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.bk-avatar {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: #fff;
    background: linear-gradient(135deg, #0061F9, #00B8E6);
    box-shadow: 0 4px 10px rgba(0, 97, 249, 0.25);
    flex-shrink: 0;
}

.bk-avatar--lg {
    width: 2.65rem;
    height: 2.65rem;
    font-size: 1rem;
}

.bk-user-chip__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.bk-user-chip__meta strong {
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-user-chip__meta small {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bk-muted);
}

.bk-aside__link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 0;
    background: transparent;
    border-radius: 0.55rem;
    color: #475569 !important;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.bk-aside__link:hover {
    background: rgba(0, 97, 249, 0.06);
    color: #0045C7 !important;
}

.bk-workspace {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bk-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 68px;
    padding: 0.75rem 1.35rem;
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 97, 249, 0.05);
}

.bk-header__left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.bk-header__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-header__sub {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bk-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-icon-btn {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    border: 1px solid rgba(0, 97, 249, 0.16);
    background: linear-gradient(145deg, #fff, #f0f7ff);
    color: #0045C7;
    box-shadow: 0 4px 12px rgba(0, 97, 249, 0.1);
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.bk-icon-btn:hover {
    transform: translateY(-1px);
    color: #0061F9;
    border-color: rgba(0, 97, 249, 0.32);
    background: linear-gradient(145deg, #ffffff, #e0efff);
    box-shadow: 0 8px 18px rgba(0, 97, 249, 0.16);
}

.bk-icon-btn:focus-visible {
    outline: 2px solid rgba(0, 97, 249, 0.45);
    outline-offset: 2px;
}

.bk-icon-btn:active {
    transform: translateY(1px) scale(0.96);
    background: linear-gradient(145deg, #e8f2ff, #dbeafe);
    box-shadow: 0 2px 8px rgba(0, 97, 249, 0.14);
}

.bk-profile-dd {
    position: relative;
}

.bk-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.28rem 0.55rem 0.28rem 0.28rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 97, 249, 0.12);
    background: rgba(255, 255, 255, 0.78);
    color: var(--bk-text);
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 97, 249, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.bk-profile:hover {
    border-color: rgba(0, 97, 249, 0.24);
    box-shadow: 0 6px 20px rgba(0, 97, 249, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: #0045C7;
}

.bk-profile[aria-expanded='true'] {
    border-color: rgba(0, 97, 249, 0.28);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(0, 97, 249, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.bk-profile.dropdown-toggle::after,
.bk-profile::after {
    display: none !important;
}

.bk-profile__meta {
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.15;
}

.bk-profile__name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--bk-text);
    max-width: 10rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-profile__role {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bk-muted);
}

.bk-profile__chevron {
    font-size: 0.75rem;
    color: var(--bk-muted);
    margin-right: 0.1rem;
    transition: transform 0.2s ease;
}

.bk-profile[aria-expanded='true'] .bk-profile__chevron {
    transform: rotate(180deg);
    color: #0061F9;
}

.bk-profile-menu {
    --bs-dropdown-zindex: 1060;
    z-index: 1060;
    min-width: 17rem;
    padding: 0.55rem;
    margin-top: 0.55rem !important;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 20px 48px rgba(13, 55, 120, 0.14),
        0 6px 18px rgba(0, 97, 249, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 0 0 1px rgba(0, 97, 249, 0.06);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.bk-profile-menu__head {
    padding: 0.15rem 0.2rem 0.05rem;
}

.bk-profile-menu__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, #f3f8ff 0%, #eefbff 100%);
    border: 1px solid rgba(0, 97, 249, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bk-profile-menu__meta {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}

.bk-profile-menu__name {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--bk-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-profile-menu__role {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0045C7;
}

.bk-profile-menu__username {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bk-muted);
}

.bk-profile-menu__divider {
    margin: 0.45rem 0.35rem;
    opacity: 0.12;
    border-color: #0061F9;
}

.bk-profile-logout {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.7rem !important;
    border-radius: 0.8rem;
    border: 1px solid transparent;
    white-space: normal;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bk-profile-logout__icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.16);
    font-size: 1.05rem;
}

.bk-profile-logout__copy {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
    text-align: left;
}

.bk-profile-logout__title {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #b91c1c;
    line-height: 1.2;
}

.bk-profile-logout__desc {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.25;
}

.bk-profile-logout:hover,
.bk-profile-logout:focus {
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(255, 255, 255, 0.98)) !important;
    border-color: rgba(220, 38, 38, 0.16);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.08);
}

.bk-profile-logout:hover .bk-profile-logout__icon,
.bk-profile-logout:focus .bk-profile-logout__icon {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.22);
}

.bk-profile-logout:hover .bk-profile-logout__title,
.bk-profile-logout:focus .bk-profile-logout__title {
    color: #991b1b;
}

.bk-main {
    flex: 1;
    padding: 1.25rem 1.35rem 2rem;
    min-width: 0;
    width: 100%;
}

/* Stat cards */
.bk-stat {
    position: relative;
    height: 100%;
    padding: 1rem 1rem 1rem 1.15rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.bk-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #0061F9, #00B8E6);
}

.bk-stat--success::before {
    background: linear-gradient(180deg, #198754, #00B8E6);
}

.bk-stat--warning::before {
    background: linear-gradient(180deg, #FFC107, #FFC107);
}

.bk-stat--danger::before {
    background: linear-gradient(180deg, #ef4444, #f97316);
}

.bk-stat--info::before {
    background: linear-gradient(180deg, #00B8E6, #0061F9);
}

.bk-stat__icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.55rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0045C7;
    background: rgba(0, 97, 249, 0.1);
    border: 1px solid rgba(0, 97, 249, 0.14);
}

.bk-stat__label {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--bk-muted);
    margin-bottom: 0.2rem;
}

.bk-stat__value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--bk-text);
    word-break: break-word;
}

.bk-stat__hint {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--bk-muted);
}

.bk-stat--link {
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bk-stat--link:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 97, 249, 0.22);
    box-shadow: 0 10px 28px rgba(13, 55, 120, 0.1);
    color: inherit;
}

.bk-stat__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0045C7;
    background: rgba(0, 97, 249, 0.08);
    border: 1px solid rgba(0, 97, 249, 0.12);
}

.bk-stat__chip--cyan {
    color: #0277a0;
    background: rgba(0, 184, 230, 0.12);
    border-color: rgba(0, 184, 230, 0.2);
}

.bk-stat__chip--ok {
    color: #0f7a45;
    background: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.18);
}

.bk-stat__chip--warn {
    color: #9a6700;
    background: rgba(255, 193, 7, 0.16);
    border-color: rgba(255, 193, 7, 0.28);
}

.bk-stat__icon--cyan {
    color: #0277a0;
    background: rgba(0, 184, 230, 0.12);
    border-color: rgba(0, 184, 230, 0.2);
}

.bk-stat__icon--ok {
    color: #0f7a45;
    background: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.18);
}

.bk-stat__icon--warn {
    color: #9a6700;
    background: rgba(255, 193, 7, 0.16);
    border-color: rgba(255, 193, 7, 0.28);
}

/* Console account dashboard */
body.bk-body {
    --bk-font: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
    --bk-display: 'Sora', 'Manrope', sans-serif;
    font-family: var(--bk-font);
}

.bk-console-page {
    max-width: 1120px;
}

.bk-settings-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bk-settings-menu {
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 28px rgba(13, 55, 120, 0.05);
    overflow: hidden;
}

.bk-settings-menu.is-open {
    border-color: #BFDBFE;
    box-shadow: 0 14px 32px rgba(0, 82, 204, 0.08);
}

.bk-settings-menu__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.05rem 1.15rem;
    border: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 82, 204, 0.05), transparent 46%),
        #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease;
}

.bk-settings-menu__trigger:hover {
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 82, 204, 0.08), transparent 46%),
        #F8FAFC;
}

.bk-settings-menu__icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0, 82, 204, 0.08);
    color: #0052CC;
    font-size: 1.15rem;
}

.bk-settings-menu__copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.bk-settings-menu__title {
    font-family: "Sora", sans-serif;
    font-size: 1.02rem;
    font-weight: 750;
    color: #0F172A;
    line-height: 1.25;
}

.bk-settings-menu__desc {
    font-size: 0.86rem;
    color: #64748B;
    line-height: 1.35;
}

.bk-settings-menu__chevron {
    color: #94A3B8;
    font-size: 1rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.bk-settings-menu.is-open .bk-settings-menu__chevron {
    transform: rotate(180deg);
    color: #0052CC;
}

.bk-settings-menu__body {
    border-top: 1px solid #EEF2F7;
    background: #fff;
}

.bk-settings-menu-enter {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.bk-settings-menu-enter-start,
.bk-settings-menu-leave-end {
    opacity: 0;
    transform: translateY(-0.35rem);
}

.bk-settings-menu-enter-end,
.bk-settings-menu-leave-start {
    opacity: 1;
    transform: translateY(0);
}

.bk-settings-menu-leave {
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.bk-settings-domain__section {
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    background: #F8FAFC;
    overflow: hidden;
}

.bk-settings-domain__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid #E2E8F0;
    background: #fff;
}

.bk-settings-domain__section-title {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 0.95rem;
    font-weight: 750;
    color: #0F172A;
}

.bk-settings-domain__section-body {
    padding: 1rem 1.1rem 1.15rem;
    background: #fff;
}

.bk-console-filter {
    padding: 1rem 1.1rem 1.15rem;
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 82, 204, 0.06), transparent 42%),
        #fff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 28px rgba(13, 55, 120, 0.06);
}

.bk-console-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.bk-console-filter__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: "Sora", sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0F172A;
}

.bk-console-filter__title i {
    color: #0052CC;
}

.bk-console-filter__reset {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748B;
    text-decoration: none;
}

.bk-console-filter__reset:hover {
    color: #0052CC;
}

.bk-console-filter__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 0.75rem 0.85rem;
    align-items: end;
}

.bk-console-filter__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748B;
}

.bk-console-filter__search {
    position: relative;
}

.bk-console-filter__search i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    pointer-events: none;
}

.bk-console-filter__search .form-control {
    padding-left: 2.35rem;
    min-height: 2.7rem;
    border-radius: 0.9rem;
    border-color: #E2E8F0;
    background: #F8FAFC;
    font-weight: 600;
    color: #0F172A;
}

.bk-console-filter__search .form-control:focus {
    background: #fff;
    border-color: #93C5FD;
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

.bk-console-filter__actions {
    display: flex;
    align-items: end;
}

.bk-console-filter__actions .btn {
    min-height: 2.7rem;
    padding-inline: 1.15rem;
    font-weight: 700;
}

.bk-console-select {
    position: relative;
}

.bk-console-select__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.7rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #0F172A;
    font-size: 0.92rem;
    font-weight: 650;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.bk-console-select__btn:hover,
.bk-console-select__btn[aria-expanded="true"] {
    background: #fff;
    border-color: #93C5FD;
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
}

.bk-console-select__btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-console-select__btn i {
    color: #64748B;
    transition: transform 0.15s ease;
}

.bk-console-select__btn i.is-open {
    transform: rotate(180deg);
}

.bk-console-select__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    min-width: 100%;
    padding: 0.35rem;
    border-radius: 0.95rem;
    border: 1px solid #E2E8F0;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.bk-console-select__option {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: #0F172A;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
}

.bk-console-select__option:hover,
.bk-console-select__option.is-active {
    background: rgba(0, 82, 204, 0.08);
    color: #0052CC;
}

.bk-console-table-card {
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 28px rgba(13, 55, 120, 0.05);
    overflow: hidden;
}

.bk-console-table-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #EEF2F7;
    background: linear-gradient(180deg, #FBFCFF 0%, #fff 100%);
}

.bk-console-table-card__title {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 1.05rem;
    font-weight: 750;
    color: #0F172A;
}

.bk-console-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.bk-console-table thead th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #EEF2F7;
    background: #F8FAFC;
    color: #64748B;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bk-console-table tbody td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}

.bk-console-table tbody tr:last-child td {
    border-bottom: 0;
}

.bk-console-table tbody tr:hover td {
    background: #F8FBFF;
}

.bk-console-table__site {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 14rem;
}

.bk-console-table__avatar {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: 0.8rem;
    background: linear-gradient(145deg, #0052CC, #00B8E6);
    color: #fff;
    font-family: "Sora", sans-serif;
    font-size: 0.95rem;
    font-weight: 750;
}

.bk-console-table__avatar--cyan {
    background: linear-gradient(145deg, #0891B2, #00B8E6);
}

.bk-console-table__name {
    display: inline-block;
    color: #0F172A;
    font-weight: 750;
    text-decoration: none;
}

.bk-console-table__name:hover {
    color: #0052CC;
}

.bk-console-table__host {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.15rem;
    color: #64748B;
    font-size: 0.82rem;
    font-weight: 600;
}

.bk-console-table__type {
    margin-top: 0.15rem;
    color: #94A3B8;
    font-size: 0.75rem;
    font-weight: 650;
}

.bk-console-table__primary {
    color: #0F172A;
    font-size: 0.9rem;
    font-weight: 700;
}

.bk-console-table__muted {
    margin-top: 0.1rem;
    color: #94A3B8;
    font-size: 0.78rem;
    font-weight: 600;
}

.bk-console-table__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #F1F5F9;
    color: #0F172A;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.bk-console-table__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

@media (max-width: 991.98px) {
    .bk-console-filter__grid {
        grid-template-columns: 1fr 1fr;
    }

    .bk-console-filter__field--search,
    .bk-console-filter__actions {
        grid-column: 1 / -1;
    }

    .bk-console-filter__actions .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .bk-console-filter__grid {
        grid-template-columns: 1fr;
    }
}

.bk-list-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.bk-list-summary__item {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.15rem;
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 8% 20%, rgba(0, 184, 230, 0.14), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 10px 24px rgba(13, 55, 120, 0.07);
}

.bk-list-summary__item--wide {
    width: 100%;
    max-width: 36rem;
}

.bk-list-summary__icon {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    color: #fff !important;
    background: linear-gradient(145deg, #0061F9, #00B8E6);
    box-shadow: 0 10px 18px rgba(0, 97, 249, 0.24);
    font-size: 1.25rem;
    line-height: 1;
}

.bk-list-summary__icon i {
    display: block;
    line-height: 1;
    color: inherit;
}

.bk-list-summary__copy {
    min-width: 0;
}

.bk-list-summary__copy strong {
    display: block;
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #1E293B;
    line-height: 1.15;
    margin-bottom: 0.15rem;
}

.bk-list-summary__copy p {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: #64748B;
    line-height: 1.3;
}

.bk-list-summary__icon--cyan {
    background: linear-gradient(145deg, #00B8E6, #0891b2);
    box-shadow: 0 10px 18px rgba(0, 184, 230, 0.24);
}

.bk-list-summary__icon--green {
    background: linear-gradient(145deg, #16a34a, #0f766e);
    box-shadow: 0 10px 18px rgba(22, 163, 74, 0.24);
}

.bk-list-summary__icon--orange {
    background: linear-gradient(145deg, #FF7A00, #e35d00);
    box-shadow: 0 10px 18px rgba(255, 122, 0, 0.24);
}

.bk-site-card--cyan {
    background: linear-gradient(150deg, #00B8E6 0%, #0891b2 58%, #0e7490 100%);
}

.bk-site-card--orange {
    background: linear-gradient(150deg, #FF7A00 0%, #e35d00 100%);
}

.bk-site-card__note {
    position: relative;
    z-index: 1;
    margin-top: 0.15rem;
    margin-bottom: 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
}

.bk-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.1);
    color: #15803D;
    font-size: 0.78rem;
    font-weight: 750;
}

.bk-live-pill__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #22C55E;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
    animation: bk-live-pulse 1.4s ease-out infinite;
}

@keyframes bk-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70% { box-shadow: 0 0 0 0.45rem rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.bk-metric-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 11.5rem;
    padding: 1.1rem 1.15rem 1rem;
    border-radius: 1.25rem;
    color: #fff;
    box-shadow: 0 14px 30px rgba(13, 55, 120, 0.14);
}

.bk-metric-card--blue {
    background: linear-gradient(150deg, #0052CC 0%, #0747A6 58%, #0B3D91 100%);
}

.bk-metric-card--cyan {
    background: linear-gradient(150deg, #00B8E6 0%, #0891B2 58%, #0E7490 100%);
}

.bk-metric-card--orange {
    background: linear-gradient(150deg, #FF7A00 0%, #E35D00 58%, #C2410C 100%);
}

.bk-metric-card--green {
    background: linear-gradient(150deg, #16A34A 0%, #15803D 58%, #166534 100%);
}

.bk-metric-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.bk-metric-card__icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1.05rem;
}

.bk-metric-card__label {
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.92;
}

.bk-metric-card__body {
    position: relative;
    z-index: 1;
    flex: 1;
}

.bk-metric-card__hero {
    font-family: "Sora", sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
}

.bk-metric-card__hero--sm {
    font-size: 1.15rem;
    word-break: break-word;
}

.bk-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 750;
}

.bk-metric-chip--soft {
    background: rgba(255, 255, 255, 0.12);
}

.bk-domain-help {
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
}

.bk-domain-help code {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0052CC;
}

.bk-domain-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.15rem;
}

.bk-domain-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 1.15rem;
}

.bk-domain-progress__item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 0.9rem;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    color: #94a3b8;
}

.bk-domain-progress__item.is-active {
    background: rgba(0, 97, 249, 0.08);
    border-color: rgba(0, 97, 249, 0.18);
    color: #0052CC;
}

.bk-domain-progress__item.is-done {
    color: #047857;
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.16);
}

.bk-domain-progress__dot {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(148, 163, 184, 0.18);
    color: inherit;
    font-size: 0.74rem;
    font-weight: 800;
}

.bk-domain-progress__item.is-active .bk-domain-progress__dot {
    background: rgba(0, 97, 249, 0.14);
}

.bk-domain-progress__item.is-done .bk-domain-progress__dot {
    background: rgba(16, 185, 129, 0.16);
}

.bk-domain-progress__label {
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-domain-pane[x-cloak] {
    display: none !important;
}

.bk-domain-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
}

.bk-domain-step--solo {
    margin: 0;
}

.bk-domain-inline-error {
    margin: 0.4rem 0 0;
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 700;
}

.bk-domain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.bk-domain-actions__grow {
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
}

.bk-domain-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.55rem 0.75rem;
}

.bk-domain-primary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
    padding: 0.22rem 0.65rem;
    border: 1px solid rgba(0, 97, 249, 0.22);
    border-radius: 999px;
    background: rgba(0, 97, 249, 0.08);
    color: #0052CC;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

button.bk-domain-primary-badge:hover:not(:disabled) {
    background: rgba(0, 97, 249, 0.14);
}

button.bk-domain-primary-badge:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.bk-domain-primary-badge.is-active {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    cursor: default;
}

.bk-domain-verify-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
}

.bk-domain-verify-card__domain {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.bk-domain-verify-card__meta {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 650;
}

.bk-domain-toast {
    position: fixed;
    top: 1.15rem;
    right: 1.15rem;
    z-index: 1080;
    width: min(24rem, calc(100vw - 1.5rem));
    pointer-events: none;
}

.bk-domain-toast__card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1rem 1.05rem;
    border-radius: 1.05rem;
    border: 1px solid transparent;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.bk-domain-toast__card--success {
    background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%);
    border-color: #a7f3d0;
    color: #065f46;
}

.bk-domain-toast__card--error {
    background: linear-gradient(180deg, #fff1f2 0%, #fff7f8 100%);
    border-color: #fecdd3;
    color: #9f1239;
}

.bk-domain-toast__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.7);
}

.bk-domain-toast__body {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 0.25rem;
}

.bk-domain-toast__body strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.25;
}

.bk-domain-toast__body p {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

.bk-domain-toast__close {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    padding: 0.15rem;
    line-height: 1;
    border-radius: 0.4rem;
}

.bk-domain-toast__close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.45);
}

.bk-domain-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    animation: bk-domain-toast-progress 4.5s linear forwards;
}

.bk-domain-toast__card--success .bk-domain-toast__progress {
    background: #059669;
}

.bk-domain-toast__card--error .bk-domain-toast__progress {
    background: #e11d48;
}

.bk-domain-toast-enter {
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.bk-domain-toast-enter-start {
    opacity: 0;
    transform: translateY(-0.55rem) scale(0.98);
}

.bk-domain-toast-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.bk-domain-toast-leave {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bk-domain-toast-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.bk-domain-toast-leave-end {
    opacity: 0;
    transform: translateY(-0.4rem) scale(0.98);
}

@keyframes bk-domain-toast-progress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

@media (max-width: 575.98px) {
    .bk-domain-toast {
        top: auto;
        bottom: 1rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }
}

.bk-domain-verify-card.is-verifying {
    opacity: 0.92;
}

.bk-domain-local-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: inherit;
    background: rgba(248, 250, 252, 0.88);
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 750;
    z-index: 2;
}

.bk-domain-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bk-domain-spinner {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    display: inline-block;
    animation: bk-domain-spin 0.7s linear infinite;
}

.bk-domain-spinner--lg {
    width: 1.25rem;
    height: 1.25rem;
    border-color: rgba(0, 97, 249, 0.2);
    border-top-color: #0052CC;
}

tr.is-verifying-row td {
    background: rgba(0, 97, 249, 0.04);
}

@keyframes bk-domain-spin {
    to {
        transform: rotate(360deg);
    }
}

.bk-domain-step__num {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 97, 249, 0.1);
    color: #0052CC;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 0.1rem;
}

.bk-domain-step__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
}

.bk-domain-step__text {
    margin: 0.28rem 0 0;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
}

.bk-domain-dns-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.bk-domain-dns-card {
    position: relative;
    padding: 1rem 1rem 0.9rem;
    border-radius: 1rem;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
}

.bk-domain-dns-card__badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.45rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.bk-domain-dns-card__badge--alt {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.bk-domain-dns-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

.bk-domain-dns-card__desc {
    margin: 0.3rem 0 0.75rem;
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
}

.bk-domain-dns-card code,
.bk-domain-step__text code {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0052CC;
}

.bk-domain-dns-rows {
    margin: 0;
    display: grid;
    gap: 0.45rem;
}

.bk-domain-dns-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border-radius: 0.7rem;
    background: #fff;
    border: 1px solid #E8EEF5;
}

.bk-domain-dns-row dt {
    margin: 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 750;
}

.bk-domain-dns-row dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 700;
}

.bk-domain-dns-hint {
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 650;
}

.bk-domain-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-left: auto;
    padding: 0.28rem 0.55rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--bk-primary-dark, #0047b3);
    background: rgba(0, 97, 249, 0.1);
    transition: background 0.15s ease, transform 0.15s ease;
}

.bk-domain-copy:hover {
    background: rgba(0, 97, 249, 0.16);
    transform: translateY(-1px);
}

@media (max-width: 767.98px) {
    .bk-domain-dns-grid {
        grid-template-columns: 1fr;
    }

    .bk-domain-dns-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .bk-domain-copy {
        margin-left: 0;
    }
}

.bk-metric-card__meta {
    margin-top: 0.3rem;
    font-size: 0.88rem;
    font-weight: 650;
    opacity: 0.9;
}

.bk-metric-card__value {
    margin-top: 0.55rem;
    font-size: 0.95rem;
    font-weight: 750;
}

.bk-metric-card__sep {
    opacity: 0.7;
    margin: 0 0.2rem;
}

.bk-metric-card__bar {
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.bk-metric-card__bar-fill {
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transition: width 0.35s ease;
}

.bk-metric-card__foot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.92;
}

.bk-metric-card__corner {
    position: absolute;
    right: -0.35rem;
    bottom: -0.45rem;
    font-size: 4.2rem;
    opacity: 0.12;
    pointer-events: none;
    transform: rotate(-8deg);
}

.bk-detail-panel {
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 82, 204, 0.05), transparent 40%),
        #fff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 28px rgba(13, 55, 120, 0.05);
    overflow: hidden;
}

.bk-detail-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1.05rem 1.2rem;
    border-bottom: 1px solid #EEF2F7;
    background: linear-gradient(180deg, #FBFCFF 0%, #fff 100%);
}

.bk-detail-panel__title {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 1.05rem;
    font-weight: 750;
    color: #0F172A;
}

.bk-detail-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}

.bk-detail-status--success {
    background: rgba(22, 163, 74, 0.1);
    color: #15803D;
}

.bk-detail-status--warning {
    background: rgba(234, 88, 12, 0.1);
    color: #C2410C;
}

.bk-detail-status--muted {
    background: #F1F5F9;
    color: #475569;
}

.bk-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 1.1rem 1.2rem 1.25rem;
}

.bk-detail-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 100%;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid #EEF2F7;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}

.bk-detail-tile__icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    background: rgba(0, 82, 204, 0.08);
    color: #0052CC;
    font-size: 1rem;
}

.bk-detail-tile__icon--cyan {
    background: rgba(8, 145, 178, 0.12);
    color: #0E7490;
}

.bk-detail-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0 1.2rem 1.2rem;
}

.bk-detail-tile__label {
    display: block;
    margin-bottom: 0.2rem;
    color: #64748B;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bk-detail-tile__value {
    display: block;
    color: #0F172A;
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.3;
    word-break: break-word;
}

.bk-detail-tile__hint {
    display: block;
    margin-top: 0.2rem;
    color: #94A3B8;
    font-size: 0.78rem;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .bk-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .bk-detail-panel__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .bk-detail-grid {
        grid-template-columns: 1fr;
    }
}

.bk-invoice-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.bk-invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 97, 249, 0.05), transparent 40%),
        #fff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 6px 18px rgba(13, 55, 120, 0.05);
    color: inherit;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.bk-invoice-row:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 97, 249, 0.2);
    box-shadow: 0 12px 26px rgba(13, 55, 120, 0.1);
    color: inherit;
}

.bk-invoice-row__icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    color: #0061F9;
    background: rgba(0, 97, 249, 0.1);
    border: 1px solid rgba(0, 97, 249, 0.14);
    font-size: 1.1rem;
}

.bk-invoice-row__main {
    min-width: 0;
    flex: 1 1 auto;
}

.bk-invoice-row__number {
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1E293B;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-invoice-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748B;
}

.bk-invoice-row__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.bk-invoice-row__meta i {
    font-size: 0.85rem;
    opacity: 0.85;
}

.bk-invoice-row__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.bk-invoice-row__amount {
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: #1E293B;
}

@media (max-width: 575.98px) {
    .bk-invoice-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .bk-invoice-row__aside {
        align-items: flex-start;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }
}


.bk-console-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 12% 20%, rgba(0, 184, 230, 0.12), transparent 36%),
        radial-gradient(circle at 88% 10%, rgba(0, 97, 249, 0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid #E2E8F0;
    box-shadow: 0 8px 24px rgba(13, 55, 120, 0.05);
}

.bk-console-hero__eyebrow {
    font-family: var(--bk-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0061F9;
}

.bk-console-hero__title {
    font-family: var(--bk-display);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #1E293B;
    line-height: 1.15;
}

.bk-console-hero__sub {
    color: #64748B;
    font-weight: 600;
}

.bk-dash-tiles > [class*='col-'] {
    display: flex;
}

.bk-dash-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 12.5rem;
    padding: 1.2rem 1.25rem 1.25rem;
    border-radius: 1.25rem;
    overflow: hidden;
    color: #fff;
    border: 0;
    box-shadow: 0 14px 32px rgba(13, 55, 120, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.bk-dash-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(13, 55, 120, 0.22);
    filter: brightness(1.03);
    color: #fff;
}

.bk-dash-tile--blue {
    background: linear-gradient(145deg, #0061F9 0%, #0045C7 100%);
}

.bk-dash-tile--cyan {
    background: linear-gradient(145deg, #00B8E6 0%, #0891b2 100%);
}

.bk-dash-tile--green {
    background: linear-gradient(145deg, #16a34a 0%, #0f766e 100%);
}

.bk-dash-tile--orange {
    background: linear-gradient(145deg, #FF7A00 0%, #e35d00 100%);
}

.bk-dash-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.55rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.bk-dash-tile__icon {
    width: 2.55rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    font-size: 1.2rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(4px);
    flex-shrink: 0;
}

.bk-dash-tile__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    white-space: nowrap;
}

.bk-dash-tile__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 6.5rem;
}

.bk-dash-tile__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.88;
    margin-bottom: 0.3rem;
    min-height: 1.1rem;
}

.bk-dash-tile__value {
    font-family: var(--bk-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 0.4rem;
    min-height: 3.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bk-dash-tile__hint {
    margin-top: auto;
    font-size: 0.86rem;
    font-weight: 600;
    opacity: 0.9;
    max-width: 88%;
    min-height: 2.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bk-dash-tile__corner {
    position: absolute;
    right: -0.2rem;
    bottom: -0.4rem;
    width: 1em;
    height: 1em;
    font-size: 5.8rem;
    line-height: 1;
    opacity: 0.16;
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 0;
}

.bk-console-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.bk-console-section-title {
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #1E293B;
}

.bk-console-section-sub {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748B;
}

.bk-console-section-link {
    font-size: 0.86rem;
    font-weight: 700;
    color: #0061F9;
    text-decoration: none;
    white-space: nowrap;
}

.bk-console-section-link:hover {
    color: #0045C7;
}

.bk-console-empty__icon {
    width: 3.25rem;
    height: 3.25rem;
    margin-inline: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    color: #0061F9;
    background: rgba(0, 97, 249, 0.1);
    border: 1px solid rgba(0, 97, 249, 0.14);
    font-size: 1.4rem;
}

.bk-site-cards > [class*='col-'] {
    display: flex;
}

.bk-site-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 15.5rem;
    padding: 1.2rem 1.25rem 1.25rem;
    border-radius: 1.25rem;
    overflow: hidden;
    color: #fff;
    border: 0;
    box-shadow: 0 14px 32px rgba(13, 55, 120, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.bk-site-card--blue {
    background: linear-gradient(150deg, #0061F9 0%, #0045C7 58%, #023e8a 100%);
}

.bk-site-card--warn {
    background: linear-gradient(150deg, #FFC107 0%, #FF7A00 100%);
    color: #1E293B;
}

.bk-site-card--muted {
    background: linear-gradient(150deg, #64748B 0%, #334155 100%);
}

.bk-site-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(13, 55, 120, 0.22);
    filter: brightness(1.03);
}

.bk-site-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.bk-site-card__mark {
    position: relative;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
    overflow: hidden;
}

.bk-site-card__mark > i {
    position: absolute;
    font-size: 1.7rem;
    opacity: 0.22;
    right: -0.15rem;
    bottom: -0.2rem;
}

.bk-site-card__mark > span {
    position: relative;
    z-index: 1;
}

.bk-site-card--warn .bk-site-card__mark {
    color: #1E293B;
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.65);
}

.bk-site-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.bk-site-card--warn .bk-site-card__status {
    color: #1E293B;
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.7);
}

.bk-site-card__body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
}

.bk-site-card__name {
    margin: 0 0 0.35rem;
    font-family: var(--bk-display, 'Sora', sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: inherit;
}

.bk-site-card__host {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.84rem;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 0.95rem;
    word-break: break-all;
}

.bk-site-card__host i {
    flex-shrink: 0;
}

.bk-site-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.bk-site-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: inherit;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bk-site-card--warn .bk-site-card__meta span {
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.55);
}

.bk-site-card__actions {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bk-site-card__btn-primary {
    --bs-btn-color: #0045C7;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #0045C7;
    --bs-btn-hover-bg: #f3f8ff;
    --bs-btn-hover-border-color: #f3f8ff;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.bk-site-card--warn .bk-site-card__btn-primary {
    --bs-btn-color: #9a4b00;
    --bs-btn-hover-color: #9a4b00;
}

.bk-site-card__btn-ghost {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-border-color: rgba(255, 255, 255, 0.35);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.22);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
}

.bk-site-card--warn .bk-site-card__btn-ghost {
    --bs-btn-color: #1E293B;
    --bs-btn-bg: rgba(255, 255, 255, 0.35);
    --bs-btn-border-color: rgba(255, 255, 255, 0.55);
    --bs-btn-hover-color: #1E293B;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.55);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.7);
}

.bk-site-card__corner {
    position: absolute;
    right: -0.25rem;
    bottom: -0.45rem;
    font-size: 5.8rem;
    line-height: 1;
    opacity: 0.14;
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 575.98px) {
    .bk-console-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .bk-console-hero .btn {
        width: 100%;
    }
}

.bk-panel-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.bk-panel-title i {
    color: var(--bk-primary);
}

.bk-activity {
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(0, 97, 249, 0.08);
}

.bk-activity:last-child {
    border-bottom: 0;
}

.bk-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(2px);
}

@media (max-width: 991.98px) {
    .bk-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-aside {
        position: fixed;
        left: 0;
        top: 0;
        width: min(var(--bk-aside-w), 86vw);
        transform: translateX(-105%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.22s ease, opacity 0.2s ease, visibility 0.2s ease;
        z-index: 50;
        box-shadow: 12px 0 40px rgba(13, 55, 120, 0.16);
    }

    .bk-shell--open .bk-aside {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .bk-header,
    .bk-main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .bk-shell--mini {
        --bk-aside-w: 292px;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   Mini / icon-only sidebar (desktop)
   ========================================================= */

@media (min-width: 992px) {
    .bk-shell {
        transition: grid-template-columns 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .bk-shell--mini {
        --bk-aside-w: 92px;
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .bk-shell--mini .bk-aside {
        overflow: visible;
    }

    .bk-shell--mini .bk-aside__brand {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.55rem;
        padding: 0.95rem 0.45rem 0.9rem;
    }

    .bk-shell--mini .bk-aside__brand-link {
        justify-content: center;
    }

    .bk-shell--mini .bk-aside__brand .bk-rail-toggle {
        margin-left: 0;
        width: 2.35rem;
        height: 2.35rem;
    }

    .bk-shell--mini .bk-aside__brand-text {
        display: none !important;
    }

    .bk-shell--mini .bk-aside__logo {
        display: block !important;
        max-height: 2.75rem;
        max-width: 4.25rem;
    }

    .bk-shell--mini .bk-aside__mark {
        width: 2.55rem;
        height: 2.55rem;
        font-size: 1.05rem;
        border-radius: 0.85rem;
        box-shadow: 0 8px 18px rgba(0, 97, 249, 0.26);
    }

    .bk-shell--mini .bk-aside__nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.45rem;
        padding: 0.5rem 0.55rem 0.8rem;
        overflow: visible;
    }

    .bk-shell--mini .bk-nav-drop {
        position: relative;
        width: auto;
        display: flex;
        justify-content: center;
        margin: 0;
    }

    .bk-shell--mini .bk-nav {
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
        margin: 0;
        padding: 0;
        gap: 0;
        justify-content: center;
        align-items: center;
        border-radius: 0.95rem;
        border: 1px solid rgba(0, 97, 249, 0.1);
        background: linear-gradient(160deg, #ffffff 0%, #eef5ff 100%);
        box-shadow:
            0 6px 14px rgba(0, 97, 249, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .bk-shell--mini .bk-nav > span,
    .bk-shell--mini .bk-nav__chevron,
    .bk-shell--mini .bk-nav__lead > span {
        display: none !important;
    }

    .bk-shell--mini .bk-nav > i.bi:first-of-type,
    .bk-shell--mini .bk-nav__lead > i.bi {
        width: 1.55rem !important;
        height: 1.55rem !important;
        font-size: 1.3rem !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .bk-shell--mini .bk-nav .bi-house-door { color: #0061F9; }
    .bk-shell--mini .bk-nav .bi-people { color: #00B8E6; }
    .bk-shell--mini .bk-nav .bi-receipt { color: #FF7A00; }
    .bk-shell--mini .bk-nav .bi-gear { color: #0045C7; }

    .bk-shell--mini .bk-nav:hover {
        transform: translateY(-1px);
        border-color: rgba(0, 97, 249, 0.22);
        box-shadow: 0 10px 18px rgba(0, 97, 249, 0.14);
    }

    .bk-shell--mini .bk-nav.is-active,
    .bk-shell--mini .bk-nav--toggle.is-open,
    .bk-shell--mini .bk-nav--toggle.is-active {
        background: linear-gradient(145deg, #e8f1ff, #dcebff);
        border-color: rgba(0, 97, 249, 0.28);
        box-shadow:
            0 8px 18px rgba(0, 97, 249, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .bk-shell--mini .bk-nav--toggle {
        justify-content: center;
    }

    .bk-shell--mini .bk-nav--toggle::before {
        display: none !important;
    }

    .bk-shell--mini .bk-nav-sub {
        position: absolute;
        left: calc(100% + 0.55rem);
        top: 50%;
        z-index: 120;
        width: 14rem;
        display: none;
        grid-template-rows: none;
        height: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(0, -50%);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    }

    .bk-shell--mini .bk-nav-sub.is-open {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(0, -50%);
    }

    .bk-shell--mini .bk-nav-sub .bk-nav-sub__inner {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .bk-shell--mini .bk-nav-sub.is-open .bk-nav-sub__inner {
        padding: 0.55rem !important;
        border-radius: 1.05rem !important;
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 255, 0.96) 100%) !important;
        border: 1px solid rgba(0, 97, 249, 0.14) !important;
        box-shadow:
            0 22px 48px rgba(13, 55, 120, 0.16),
            0 8px 18px rgba(0, 97, 249, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 1) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .bk-shell--mini .bk-nav-fly__label {
        display: block;
        padding: 0.2rem 0.55rem 0.55rem;
        margin-bottom: 0.35rem;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
        border-bottom: 1px solid rgba(0, 97, 249, 0.1);
    }

    .bk-shell--mini .bk-nav--sub {
        width: 100%;
        height: auto;
        min-height: 2.45rem;
        min-width: 0;
        justify-content: flex-start;
        padding: 0.45rem 0.55rem;
        margin-bottom: 0.2rem;
        border-radius: 0.8rem;
        gap: 0.6rem;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .bk-shell--mini .bk-nav--sub:last-child {
        margin-bottom: 0;
    }

    .bk-shell--mini .bk-nav--sub:hover {
        background: rgba(0, 97, 249, 0.07);
        border-color: rgba(0, 97, 249, 0.12);
        box-shadow: none;
        transform: none;
    }

    .bk-shell--mini .bk-nav--sub.is-active {
        background: linear-gradient(145deg, #eff6ff, #e8f1ff);
        border-color: rgba(0, 97, 249, 0.22);
        color: #0045C7 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .bk-shell--mini .bk-nav--sub > span {
        display: inline !important;
    }

    .bk-shell--mini .bk-nav--sub::before {
        display: none !important;
    }

    .bk-shell--mini .bk-nav--sub > i.bi:first-of-type {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.92rem !important;
        border: 1px solid rgba(0, 97, 249, 0.14) !important;
        background: rgba(0, 97, 249, 0.08) !important;
        border-radius: 0.55rem !important;
        color: #0061F9 !important;
    }

    .bk-shell--mini .bk-nav--sub .bi-cash-coin {
        color: #c98900 !important;
        background: rgba(255, 193, 7, 0.18) !important;
        border-color: rgba(255, 193, 7, 0.35) !important;
    }

    .bk-shell--mini .bk-nav-drop.is-open {
        z-index: 130;
    }

    .bk-shell--mini .bk-aside__rail {
        display: none;
    }

    .bk-shell--mini .bk-rail-toggle {
        width: 2.65rem;
        height: 2.65rem;
        border-radius: 0.85rem;
    }
}
/* =========================================================
   CMS Admin ? content polish (filters, tables, buttons)
   ========================================================= */

body.bk-manage .form-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
}

body.bk-manage .form-control,
body.bk-manage .form-select {
    min-height: 2.65rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(0, 97, 249, 0.14);
    background-color: #fff;
    color: var(--bk-text);
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.02);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

body.bk-manage .form-select {
    padding-right: 2.55rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230a58ca' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    background-size: 14px 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

body.bk-manage .form-control::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

body.bk-manage .form-control:hover,
body.bk-manage .form-select:hover {
    border-color: rgba(0, 97, 249, 0.28);
}

body.bk-manage .form-control:focus,
body.bk-manage .form-select:focus {
    border-color: rgba(0, 97, 249, 0.5);
    box-shadow: 0 0 0 0.22rem rgba(0, 97, 249, 0.14);
    background-color: #fff;
}

body.bk-manage .form-control-sm,
body.bk-manage .form-select-sm {
    min-height: 2.25rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

body.bk-manage .form-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bk-muted);
}

body.bk-manage .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    border-color: rgba(0, 97, 249, 0.28);
    cursor: pointer;
}

body.bk-manage .form-check-input:checked {
    background-color: #0061F9;
    border-color: #0061F9;
}

body.bk-manage .form-check-label {
    font-weight: 600;
    color: #334155;
}

/* Filter toolbar */
.bk-filter {
    position: relative;
    z-index: 2;
    margin-bottom: 1.1rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: 1.25rem;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 251, 255, 0.88) 100%);
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow:
        0 14px 34px rgba(13, 55, 120, 0.07),
        0 2px 8px rgba(15, 23, 42, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bk-filter--open {
    z-index: 40;
}

.bk-filter__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.95rem;
    padding: 0.28rem 0.7rem 0.28rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0045C7;
    background: rgba(0, 97, 249, 0.08);
    border: 1px solid rgba(0, 97, 249, 0.12);
}

.bk-filter__title i {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #0061F9, #00B8E6);
    font-size: 0.72rem;
}

.bk-filter__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.bk-filter__actions .btn {
    min-height: 2.65rem;
}

.bk-filter .form-label {
    margin-bottom: 0.35rem;
}

.bk-search {
    position: relative;
}

.bk-search > i.bi {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #64748b;
    pointer-events: none;
    font-size: 0.95rem;
    line-height: 1;
}

.bk-search .form-control {
    padding-left: 2.55rem !important;
}

.bk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}

.bk-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

.bk-toolbar__filters .form-control,
.bk-toolbar__filters .form-select {
    width: auto;
    min-width: 11rem;
}

.bk-toolbar__filters .bk-search {
    flex: 1 1 14rem;
    min-width: 12rem;
    max-width: 22rem;
}

.bk-toolbar__filters .bk-search .form-control {
    width: 100%;
}

/* Custom date picker (dd/mm/yyyy, Asia/Jakarta display) */
.bk-date {
    position: relative;
    width: 100%;
}

.bk-date__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bk-date__trigger {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-weight: 700;
    color: var(--bk-text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.94) 100%) !important;
}

.bk-date__label {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bk-date__label.is-placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.bk-date__trigger .bi {
    color: #0061F9;
    font-size: 1.05rem;
}

.bk-date.is-open .bk-date__trigger {
    border-color: rgba(0, 97, 249, 0.5) !important;
    box-shadow: 0 0 0 0.22rem rgba(0, 97, 249, 0.14) !important;
}

.bk-date__panel {
    position: fixed;
    z-index: 2100;
    box-sizing: border-box;
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(0, 97, 249, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    box-shadow:
        0 22px 48px rgba(13, 55, 120, 0.18),
        0 8px 20px rgba(0, 97, 249, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bk-date__panel[hidden] {
    display: none !important;
}

.bk-date__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bk-date__title {
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.bk-date__nav {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 97, 249, 0.14);
    background: rgba(0, 97, 249, 0.08);
    color: #0045C7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 140ms ease, transform 140ms ease;
}

.bk-date__nav:hover {
    background: rgba(0, 97, 249, 0.14);
    transform: translateY(-1px);
}

.bk-date__weekdays,
.bk-date__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.bk-date__weekday {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0.2rem 0 0.35rem;
}

.bk-date__day {
    min-height: 2.15rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    background: transparent;
    color: #1e293b;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.bk-date__day:hover {
    background: rgba(0, 97, 249, 0.1);
    color: #0045C7;
}

.bk-date__day.is-outside {
    color: #cbd5e1;
    font-weight: 600;
}

.bk-date__day.is-today:not(.is-selected) {
    border-color: rgba(0, 97, 249, 0.3);
    color: #0045C7;
    background: rgba(0, 97, 249, 0.08);
}

.bk-date__day.is-selected {
    background: linear-gradient(135deg, #0061F9, #0045C7);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 97, 249, 0.28);
}

.bk-date__foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.2rem;
    border-top: 1px solid rgba(0, 97, 249, 0.08);
}

.bk-date__action {
    min-height: 2rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #fff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
}

.bk-date__action.is-primary {
    border-color: rgba(0, 97, 249, 0.28);
    background: rgba(0, 97, 249, 0.1);
    color: #0045C7;
}

.bk-date__action:hover {
    border-color: rgba(0, 97, 249, 0.35);
    color: #0045C7;
    background: #f8fbff;
}

/* Buttons ? soft blue motion, no black flash */
button,
.btn,
.bk-rail-toggle,
.bk-icon-btn,
.bk-nav,
.bk-float__btn,
.bk-date__nav,
.bk-date__day,
.bk-date__action,
.page-link,
.bk-profile {
    -webkit-tap-highlight-color: transparent;
}

.btn,
body.bk-manage .btn,
body.bk-body .btn,
body.bk-auth-page .btn {
    --bs-btn-focus-shadow-rgb: 0, 97, 249;
    font-family: var(--bk-font, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        filter 0.18s ease;
}

.btn:hover,
body.bk-manage .btn:hover,
body.bk-body .btn:hover,
body.bk-auth-page .btn:hover {
    transform: translateY(-1px);
}

.btn:active,
body.bk-manage .btn:active,
body.bk-body .btn:active,
body.bk-auth-page .btn:active {
    transform: translateY(1px) scale(0.985);
    filter: none;
}

.btn:focus-visible,
body.bk-manage .btn:focus-visible,
body.bk-body .btn:focus-visible,
body.bk-auth-page .btn:focus-visible {
    outline: 2px solid rgba(0, 97, 249, 0.45);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 97, 249, 0.15) !important;
}

.btn-bk-primary,
.btn-primary,
body.bk-manage .btn-bk-primary,
body.bk-manage .btn-primary,
body.bk-body .btn-bk-primary,
body.bk-auth-page .btn-bk-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0061F9;
    --bs-btn-border-color: #0061F9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0052d6;
    --bs-btn-hover-border-color: #0052d6;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0045C7;
    --bs-btn-active-border-color: #0045C7;
    --bs-btn-disabled-bg: #93c0ff;
    --bs-btn-disabled-border-color: #93c0ff;
    --bs-btn-focus-shadow-rgb: 0, 97, 249;
    box-shadow: 0 8px 18px rgba(0, 97, 249, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-bk-primary:hover,
.btn-primary:hover,
body.bk-manage .btn-bk-primary:hover,
body.bk-manage .btn-primary:hover {
    box-shadow: 0 12px 26px rgba(0, 97, 249, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn-bk-primary:active,
.btn-primary:active,
body.bk-manage .btn-bk-primary:active,
body.bk-manage .btn-primary:active {
    box-shadow: 0 4px 12px rgba(0, 97, 249, 0.22), inset 0 1px 2px rgba(0, 45, 120, 0.18);
}

.btn-bk-outline,
.btn-bk-soft,
.btn-outline-secondary,
.btn-outline-primary,
.btn-bk-action,
body.bk-manage .btn-bk-outline,
body.bk-manage .btn-bk-soft,
body.bk-manage .btn-outline-secondary,
body.bk-manage .btn-outline-primary,
body.bk-manage .btn-bk-action {
    --bs-btn-color: #0045C7;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: rgba(0, 97, 249, 0.24);
    --bs-btn-hover-color: #0045C7;
    --bs-btn-hover-bg: #eff6ff;
    --bs-btn-hover-border-color: rgba(0, 97, 249, 0.4);
    --bs-btn-active-color: #0045C7;
    --bs-btn-active-bg: #dbeafe;
    --bs-btn-active-border-color: rgba(0, 97, 249, 0.48);
    --bs-btn-focus-shadow-rgb: 0, 97, 249;
    box-shadow: 0 4px 12px rgba(0, 97, 249, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.btn-bk-action,
.btn-outline-primary,
body.bk-manage .btn-bk-action,
body.bk-manage .btn-outline-primary {
    --bs-btn-bg: rgba(0, 97, 249, 0.06);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0061F9;
    --bs-btn-hover-border-color: #0061F9;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0045C7;
    --bs-btn-active-border-color: #0045C7;
}

.btn-secondary,
body.bk-manage .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4f7cff;
    --bs-btn-border-color: #4f7cff;
    --bs-btn-hover-bg: #0061F9;
    --bs-btn-hover-border-color: #0061F9;
    --bs-btn-active-bg: #0045C7;
    --bs-btn-active-border-color: #0045C7;
    --bs-btn-focus-shadow-rgb: 0, 97, 249;
}

.btn-sm,
body.bk-manage .btn-sm {
    min-height: 2rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
}

.btn-danger,
.btn-outline-danger,
body.bk-manage .btn-danger,
body.bk-manage .btn-outline-danger {
    border-radius: 999px;
    font-weight: 700;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
}

.btn-outline-danger,
body.bk-manage .btn-outline-danger {
    --bs-btn-hover-bg: #fee2e2;
    --bs-btn-hover-color: #b91c1c;
    --bs-btn-active-bg: #fecaca;
    --bs-btn-active-color: #991b1b;
}

/* Table panel */
.bk-panel {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1.15rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.bk-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid rgba(0, 97, 249, 0.08);
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}

.bk-panel__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.bk-panel__title i {
    color: #0061F9;
}

.bk-panel__body {
    padding: 0;
}

.bk-panel .table-responsive {
    margin: 0;
}

body.bk-manage .bk-panel .table,
body.bk-manage .bk-card .table {
    margin-bottom: 0;
}

body.bk-manage .table thead th {
    padding: 0.85rem 1rem;
    background: #f8fbff;
    border-bottom: 1px solid rgba(0, 97, 249, 0.1);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

body.bk-manage .table tbody td {
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a2b3c;
    border-bottom: 1px solid rgba(0, 97, 249, 0.06);
    vertical-align: middle;
}

body.bk-manage .table tbody tr:last-child td {
    border-bottom: 0;
}

body.bk-manage .table tbody tr:hover td {
    background: rgba(0, 97, 249, 0.03);
}

body.bk-manage .table .text-muted,
body.bk-manage .table .small {
    font-weight: 500;
}

body.bk-manage .badge.rounded-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4em 0.75em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

body.bk-manage .badge.text-bg-success {
    background: rgba(25, 135, 84, 0.12) !important;
    color: #146c43 !important;
    border-color: rgba(25, 135, 84, 0.18);
}

body.bk-manage .badge.text-bg-secondary {
    background: rgba(100, 116, 139, 0.12) !important;
    color: #475569 !important;
    border-color: rgba(100, 116, 139, 0.18);
}

body.bk-manage .badge.text-bg-warning {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #FF5A00 !important;
    border-color: rgba(245, 158, 11, 0.22);
}

body.bk-manage .badge.text-bg-danger {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.18);
}

body.bk-manage .badge.text-bg-primary,
body.bk-manage .badge.text-bg-info {
    background: rgba(0, 97, 249, 0.12) !important;
    color: #0045C7 !important;
    border-color: rgba(0, 97, 249, 0.18);
}

/* Empty + pagination */
.bk-empty {
    text-align: center;
    padding: 2.75rem 1.25rem;
}

.bk-empty__icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.85rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    color: #0045C7;
    background: rgba(0, 97, 249, 0.1);
    border: 1px solid rgba(0, 97, 249, 0.14);
    font-size: 1.35rem;
}

.bk-empty__title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--bk-text);
}

.bk-empty__text {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bk-muted);
}

.bk-pager {
    display: flex;
    justify-content: center;
    padding: 0.95rem 1rem 1.1rem;
    border-top: 1px solid rgba(0, 97, 249, 0.08);
    background: #fbfdff;
}

body.bk-manage .pagination {
    gap: 0.25rem;
    margin: 0;
    flex-wrap: wrap;
}

body.bk-manage .page-link {
    border-radius: 0.65rem !important;
    border: 1px solid rgba(0, 97, 249, 0.12);
    color: #0045C7;
    font-weight: 700;
    padding: 0.4rem 0.7rem;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 97, 249, 0.04);
    transition:
        transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

body.bk-manage .page-link:hover {
    background: #eff6ff;
    border-color: rgba(0, 97, 249, 0.28);
    color: #0045C7;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 97, 249, 0.12);
}

body.bk-manage .page-link:focus-visible {
    outline: 2px solid rgba(0, 97, 249, 0.45);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 97, 249, 0.15);
}

body.bk-manage .page-link:active {
    transform: translateY(1px) scale(0.98);
    background: #dbeafe;
    color: #0045C7;
}

body.bk-manage .page-item.active .page-link {
    background: linear-gradient(135deg, #0061F9, #0045C7);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 97, 249, 0.25);
}

body.bk-manage .page-item.active .page-link:hover {
    color: #fff;
    background: linear-gradient(135deg, #0052d6, #003dad);
}

body.bk-manage .page-item.disabled .page-link {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    transform: none;
    box-shadow: none;
}

/* Definition lists / detail cards */
body.bk-manage dl.row dt {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bk-muted);
}

body.bk-manage dl.row dd {
    font-weight: 600;
    color: var(--bk-text);
}

body.bk-manage .bk-card h2.h6,
body.bk-manage .bk-card .h6 {
    font-size: 0.95rem;
    font-weight: 800;
}

body.bk-manage code {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0045C7;
    background: rgba(0, 97, 249, 0.08);
    padding: 0.15rem 0.4rem;
    border-radius: 0.4rem;
}

body.bk-manage .dropdown-menu {
    border-radius: 0.9rem;
    border: 1px solid rgba(0, 97, 249, 0.1);
    box-shadow: 0 16px 40px rgba(13, 55, 120, 0.12);
    padding: 0.4rem;
}

body.bk-manage .dropdown-item {
    border-radius: 0.65rem;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
}

body.bk-manage .dropdown-item:hover,
body.bk-manage .dropdown-item:focus {
    background: rgba(0, 97, 249, 0.08);
    color: #0045C7;
}

@media (max-width: 767.98px) {
    body.bk-manage .form-control,
    body.bk-manage .form-select {
        font-size: 16px !important;
    }

    .bk-filter {
        padding: 0.9rem;
        border-radius: 1rem;
    }

    .bk-toolbar__filters .form-control,
    .bk-toolbar__filters .form-select {
        min-width: 0;
        width: 100%;
    }

    .bk-toolbar__filters .bk-search {
        max-width: none;
        width: 100%;
    }
}


/* =========================================================
   Public landing — brand-first, no-nav hero + type tiles
   ========================================================= */

body.bk-landing-page {
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(0, 97, 249, 0.18), transparent 58%),
        radial-gradient(ellipse 50% 40% at 100% 20%, rgba(0, 184, 230, 0.14), transparent 55%),
        radial-gradient(ellipse 45% 35% at 0% 70%, rgba(255, 122, 0, 0.1), transparent 50%),
        linear-gradient(180deg, #eef4fb 0%, #f7fafc 42%, #eef6f9 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

body.bk-landing-page:not(:has(.bk-landing--jenis-open)) {
    overflow-y: hidden;
    height: 100vh;
    height: 100dvh;
}

.bk-bare-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.bk-landing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.bk-hero {
    position: relative;
    overflow: hidden;
    flex: 1 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.bk-hero__atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bk-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    animation: bk-orb-float 9s ease-in-out infinite;
}

.bk-hero__orb--a {
    width: 26rem;
    height: 26rem;
    top: -10rem;
    left: -8rem;
    background: radial-gradient(circle, rgba(0, 97, 249, 0.28), transparent 68%);
}

.bk-hero__orb--b {
    width: 22rem;
    height: 22rem;
    top: 10%;
    right: -9rem;
    background: radial-gradient(circle, rgba(255, 122, 0, 0.2), transparent 68%);
    animation-delay: -3s;
}

.bk-hero__orb--c {
    width: 16rem;
    height: 16rem;
    bottom: -4rem;
    left: 35%;
    background: radial-gradient(circle, rgba(0, 184, 230, 0.2), transparent 68%);
    animation-delay: -5.5s;
}

.bk-hero__grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(0, 97, 249, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 97, 249, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%);
}

@keyframes bk-orb-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, 18px, 0) scale(1.04); }
}

.bk-hero__stage {
    max-width: 46rem;
    animation: bk-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bk-hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.bk-hero__brand {
    margin-bottom: 1.35rem;
}

.bk-hero__brand-inner {
    transform-origin: center;
}

.bk-hero__name {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.8rem, 8vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #0045C7;
    margin: 0;
}

.bk-hero__tagline {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0061F9;
    margin: 0 0 0.85rem;
}

.bk-hero__lead {
    max-width: 30rem;
    margin: 0 auto 1.75rem;
    color: #5b6b7c;
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.55;
}

.bk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.bk-hero__cta i {
    font-size: 1.35rem;
    line-height: 1;
}

.bk-types {
    position: relative;
    padding: 3.5rem 0 4.5rem;
    z-index: 1;
    scroll-margin-top: 1rem;
}

.bk-types-enter {
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.bk-types-enter-start {
    opacity: 0;
    transform: translateY(24px);
}

.bk-types-enter-end {
    opacity: 1;
    transform: translateY(0);
}

.bk-types--inner {
    padding-top: 3rem;
}

.bk-types__head {
    max-width: 28rem;
    margin-bottom: 2rem;
}

.bk-types__title {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f1f33;
    margin: 0 0 0.45rem;
}

.bk-types__sub {
    margin: 0;
    color: #64748b;
    font-weight: 600;
    font-size: 1.02rem;
}

.bk-types__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.1rem;
}

.bk-type-tile {
    --bk-tile-a: #0061F9;
    --bk-tile-b: #0045C7;
    --bk-tile-text: #ffffff;
    --bk-tile-muted: rgba(255, 255, 255, 0.86);
    --bk-tile-icon-bg: rgba(255, 255, 255, 0.2);
    --bk-tile-icon-color: #ffffff;
    --bk-tile-badge-bg: rgba(255, 255, 255, 0.22);
    --bk-tile-badge-color: #ffffff;
    --bk-tile-cta-bg: #ffffff;
    --bk-tile-cta-color: #0045C7;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-height: 15.5rem;
    padding: 1.45rem 1.4rem 1.3rem;
    border-radius: 1.5rem;
    text-decoration: none !important;
    color: var(--bk-tile-text) !important;
    background: linear-gradient(155deg, var(--bk-tile-a) 0%, var(--bk-tile-b) 100%);
    border: 0;
    box-shadow:
        0 18px 36px color-mix(in srgb, var(--bk-tile-b) 38%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    grid-column: span 12;
    isolation: isolate;
    animation: bk-tile-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--bk-delay, 0s);
    transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.22s ease,
        filter 0.22s ease;
}

@keyframes bk-tile-in {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 576px) {
    .bk-type-tile { grid-column: span 6; }
}

@media (min-width: 992px) {
    .bk-type-tile { grid-column: span 4; }
    .bk-type-tile:nth-child(1),
    .bk-type-tile:nth-child(2) {
        grid-column: span 6;
        min-height: 17rem;
    }
}

.bk-type-tile__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.55) 1px, transparent 0);
    background-size: 18px 18px;
    mask-image: linear-gradient(135deg, #000 10%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.bk-type-tile__orb {
    position: absolute;
    width: 11rem;
    height: 11rem;
    right: -3rem;
    top: -3.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 68%);
    z-index: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.bk-type-tile__corner {
    position: absolute;
    left: -0.15rem;
    bottom: -0.55rem;
    z-index: 0;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: clamp(4.8rem, 9vw, 6.4rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.16);
    pointer-events: none;
    transform: rotate(-8deg);
    transition: transform 0.35s ease, color 0.25s ease;
}

.bk-type-tile__corner i,
.bk-type-tile__corner svg {
    display: block;
    font-size: inherit;
    width: 1em;
    height: 1em;
}

.bk-type-tile__top,
.bk-type-tile__icon,
.bk-type-tile__body,
.bk-type-tile__cta {
    position: relative;
    z-index: 1;
}

.bk-type-tile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.bk-type-tile__icon {
    width: 3.85rem;
    height: 3.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.15rem;
    font-size: 1.65rem;
    color: var(--bk-tile-icon-color);
    background: var(--bk-tile-icon-bg);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(6px);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.bk-type-tile__title {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bk-tile-text);
    margin: 0 0 0.4rem;
}

.bk-type-tile__desc {
    margin: 0;
    color: var(--bk-tile-muted);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.5;
}

.bk-type-tile__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bk-tile-badge-color);
    background: var(--bk-tile-badge-bg);
    border: 1px solid rgba(255, 255, 255, 0.28);
    white-space: nowrap;
}

.bk-type-tile__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    padding: 0.52rem 0.95rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--bk-tile-cta-color);
    background: var(--bk-tile-cta-bg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
    transition: gap 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bk-type-tile__cta i {
    font-size: 0.95rem;
    transition: transform 0.2s ease;
}

.bk-type-tile--live:hover {
    transform: translateY(-7px);
    box-shadow:
        0 28px 48px color-mix(in srgb, var(--bk-tile-b) 42%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    filter: saturate(1.05) brightness(1.03);
}

.bk-type-tile--live:hover .bk-type-tile__orb {
    transform: scale(1.18) translate(-8px, 10px);
}

.bk-type-tile--live:hover .bk-type-tile__corner {
    transform: rotate(-4deg) scale(1.06);
    color: rgba(255, 255, 255, 0.22);
}

.bk-type-tile--live:hover .bk-type-tile__icon {
    transform: scale(1.08) rotate(-5deg);
}

.bk-type-tile--live:hover .bk-type-tile__cta {
    gap: 0.7rem;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
}

.bk-type-tile--live:hover .bk-type-tile__cta i {
    transform: translate(2px, -2px);
}

.bk-type-tile--live:active {
    transform: translateY(-2px) scale(0.99);
}

.bk-type-tile--soon {
    filter: saturate(0.92);
}

.bk-type-tile--soon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.08);
    z-index: 0;
    pointer-events: none;
}

.bk-type-tile--blue {
    --bk-tile-a: #0061F9;
    --bk-tile-b: #0045C7;
    --bk-tile-cta-color: #0045C7;
}

.bk-type-tile--teal {
    --bk-tile-a: #00B8E6;
    --bk-tile-b: #0087b0;
    --bk-tile-cta-color: #007297;
}

.bk-type-tile--cyan {
    --bk-tile-a: #14c4ef;
    --bk-tile-b: #0061F9;
    --bk-tile-cta-color: #0061F9;
}

.bk-type-tile--rose,
.bk-type-tile--orange {
    --bk-tile-a: #FF7A00;
    --bk-tile-b: #FF5A00;
    --bk-tile-cta-color: #c2410c;
}

.bk-type-tile--amber,
.bk-type-tile--yellow {
    --bk-tile-a: #FFC107;
    --bk-tile-b: #FF9800;
    --bk-tile-text: #3b2a00;
    --bk-tile-muted: rgba(59, 42, 0, 0.78);
    --bk-tile-icon-bg: rgba(255, 255, 255, 0.42);
    --bk-tile-icon-color: #7a5200;
    --bk-tile-badge-bg: rgba(255, 255, 255, 0.55);
    --bk-tile-badge-color: #7a5200;
    --bk-tile-cta-bg: #3b2a00;
    --bk-tile-cta-color: #fff8e7;
}

.bk-type-tile--navy {
    --bk-tile-a: #1f4b99;
    --bk-tile-b: #0f2f66;
    --bk-tile-cta-color: #0f2f66;
}

.bk-type-tile--indigo {
    --bk-tile-a: #4f6bff;
    --bk-tile-b: #0045C7;
    --bk-tile-cta-color: #0045C7;
}

.bk-types__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
    color: #64748b;
    font-weight: 600;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px dashed rgba(0, 97, 249, 0.2);
}

.bk-landing-foot {
    margin-top: auto;
    padding: 1.25rem 0 1.75rem;
    color: #7a8a9a;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

.bk-checkout-summary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.bk-checkout-summary--plan {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 52rem;
    margin: 0 auto 1.5rem;
    padding: 1.15rem 1.35rem;
}

.bk-checkout-summary__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
}

.bk-checkout-summary__label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.bk-checkout-summary__name {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f1f33;
    letter-spacing: -0.03em;
}

.bk-checkout-summary__specs {
    color: #475569;
    font-weight: 600;
    font-size: 0.95rem;
}

.bk-checkout-summary__type {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0061f9;
    background: rgba(0, 97, 249, 0.08);
    border: 1px solid rgba(0, 97, 249, 0.16);
    white-space: nowrap;
}

/* Build-mode page: full-bleed atmosphere + ticket plan + mode cards */
.bk-pricing--mode {
    position: relative;
    isolation: isolate;
}

.bk-pricing--mode > .bk-pricing__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bk-pricing--mode .bk-pricing__hero,
.bk-pricing--mode .bk-pricing__list {
    position: relative;
    z-index: 1;
}

.bk-pricing--mode .bk-pricing__orb--a {
    width: 28rem;
    height: 28rem;
    top: -10rem;
    left: -8rem;
    background: radial-gradient(circle, rgba(0, 97, 249, 0.22), transparent 70%);
}

.bk-pricing--mode .bk-pricing__orb--b {
    width: 22rem;
    height: 22rem;
    top: 8%;
    right: -8rem;
    background: radial-gradient(circle, rgba(255, 122, 0, 0.16), transparent 70%);
}

.bk-pricing--mode .bk-pricing__orb--c {
    width: 24rem;
    height: 24rem;
    bottom: -6rem;
    left: 20%;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.12), transparent 70%);
    animation-delay: -6s;
}

.bk-pricing--mode .bk-pricing__mesh {
    opacity: 0.22;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 78%);
}

.bk-plan-ticket {
    position: relative;
    display: grid;
    grid-template-columns: 0.55rem 1fr;
    max-width: 54rem;
    margin: 0 auto 1.55rem;
    border-radius: 1.4rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 246, 255, 0.96) 100%);
    border: 1px solid rgba(15, 31, 51, 0.08);
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.bk-plan-ticket__accent {
    background:
        linear-gradient(180deg, #0061f9 0%, #00b8e6 55%, #ff7a00 100%);
}

.bk-plan-ticket__main {
    padding: 1.1rem 1.25rem 1.2rem;
}

.bk-plan-ticket__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.bk-plan-ticket__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #0061f9;
}

.bk-plan-ticket__label i {
    font-size: 0.95rem;
}

.bk-plan-ticket__type {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f1f33;
    background: rgba(15, 31, 51, 0.06);
    border: 1px solid rgba(15, 31, 51, 0.08);
}

.bk-plan-ticket__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bk-plan-ticket__plan {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
}

.bk-plan-ticket__glyph {
    width: 3.1rem;
    height: 3.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(145deg, #0061f9 0%, #0045c7 100%);
    box-shadow: 0 12px 22px rgba(0, 97, 249, 0.28);
}

.bk-plan-ticket__name {
    display: block;
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f1f33;
    line-height: 1.1;
}

.bk-plan-ticket__hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
}

.bk-plan-ticket__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.bk-plan-ticket__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
    background: #fff;
    border: 1px solid rgba(15, 31, 51, 0.08);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.bk-plan-ticket__chip i {
    color: #0061f9;
    font-size: 0.95rem;
}

.bk-plan-ticket__chip--price {
    color: #9a3412;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: rgba(255, 122, 0, 0.22);
}

.bk-plan-ticket__chip--price i {
    color: #ea580c;
}

.bk-mode-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    max-width: 54rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .bk-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 1.35rem;
    }
}

.bk-mode-card {
    --mc-accent: #0891b2;
    --mc-ink: #0f172a;
    --mc-muted: #475569;
    --mc-check: #0891b2;
    --mc-foot: linear-gradient(160deg, #ecfeff 0%, #cffafe 55%, #a5f3fc 100%);
    --mc-cta-bg: linear-gradient(135deg, #22d3ee 0%, #0891b2 60%, #0e7490 100%);
    --mc-cta-shadow: rgba(8, 145, 178, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.65rem;
    color: var(--mc-ink);
    background: #fff;
    box-shadow:
        0 18px 36px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

.bk-mode-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 28px 48px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.bk-mode-card--diy {
    --mc-accent: #0891b2;
    --mc-check: #0891b2;
    --mc-foot: linear-gradient(160deg, #ecfeff 0%, #cffafe 55%, #a5f3fc 100%);
    --mc-cta-bg: linear-gradient(135deg, #22d3ee 0%, #0891b2 60%, #0e7490 100%);
    --mc-cta-shadow: rgba(8, 145, 178, 0.3);
}

.bk-mode-card--service {
    --mc-accent: #db2777;
    --mc-check: #db2777;
    --mc-foot: linear-gradient(160deg, #fdf2f8 0%, #fce7f3 55%, #fbcfe8 100%);
    --mc-cta-bg: linear-gradient(135deg, #f472b6 0%, #db2777 55%, #be185d 100%);
    --mc-cta-shadow: rgba(219, 39, 119, 0.3);
}

.bk-mode-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.34rem 0.75rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #831843;
    background: linear-gradient(135deg, #fce7f3 0%, #f9a8d4 100%);
    border: 1px solid rgba(219, 39, 119, 0.25);
    box-shadow: 0 8px 18px rgba(219, 39, 119, 0.16);
}

.bk-mode-card__badge i {
    color: #be185d;
}

.bk-mode-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.45rem 1.35rem 1.1rem;
    text-align: left;
}

.bk-mode-card--service .bk-mode-card__content {
    padding-top: 2.7rem;
}

.bk-mode-card__title {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
    line-height: 1.15;
    color: #0f172a;
}

.bk-mode-card__copy {
    margin: 0;
    color: var(--mc-muted);
    font-weight: 600;
    line-height: 1.5;
    font-size: 0.95rem;
}

.bk-mode-card__points {
    list-style: none;
    margin: 0.1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.bk-mode-card__points li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

.bk-mode-card__points i {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.85rem;
    color: #fff;
    background: var(--mc-check);
    box-shadow: 0 6px 12px color-mix(in srgb, var(--mc-check) 28%, transparent);
}

.bk-mode-card__foot {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    padding: 0.95rem 1.15rem 1.1rem;
    background: var(--mc-foot);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.bk-mode-card__cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.05rem;
    padding: 0.7rem 1.15rem !important;
    border-radius: 999px !important;
    border: 0;
    font-weight: 800;
    color: #fff !important;
    background: var(--mc-cta-bg) !important;
    box-shadow: 0 12px 24px var(--mc-cta-shadow);
    transition: transform 0.18s ease, gap 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.bk-mode-card__cta-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    color: #fff;
}

.bk-mode-card__cta-label {
    flex: 0 1 auto;
    text-align: center;
    min-width: 0;
}

.bk-mode-card__cta > .bi-arrow-right {
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.bk-mode-card__cta:hover {
    color: #fff !important;
    background: var(--mc-cta-bg) !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
    gap: 0.7rem;
    box-shadow: 0 16px 28px var(--mc-cta-shadow);
}

@media (max-width: 575.98px) {
    .bk-plan-ticket__body {
        flex-direction: column;
        align-items: flex-start;
    }

    .bk-checkout-summary--plan {
        flex-direction: column;
        align-items: flex-start;
    }
}

.bk-mode-copy {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    line-height: 1.45;
}

.bk-service-price {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.05rem;
}

.bk-service-features {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.bk-service-features li {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.bk-checkout-form,
.bk-checkout-panel {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 246, 255, 0.96) 100%);
    border: 1px solid rgba(15, 31, 51, 0.08);
    border-radius: 1.5rem;
    padding: 1.35rem 1.4rem 1.4rem;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.bk-checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 64rem;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .bk-checkout-layout {
        grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
        align-items: start;
        gap: 1.4rem;
    }
}

.bk-checkout-panel--summary {
    position: sticky;
    top: 1rem;
    background:
        linear-gradient(160deg, #ffffff 0%, #eff6ff 55%, #e0f2fe 100%);
    border-color: rgba(0, 97, 249, 0.14);
}

.bk-checkout-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.bk-checkout-panel__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0061f9;
}

.bk-checkout-panel__mode {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #0f1f33;
    background: rgba(15, 31, 51, 0.06);
    border: 1px solid rgba(15, 31, 51, 0.08);
    white-space: nowrap;
}

.bk-checkout-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.bk-checkout-item:first-of-type {
    border-top: 0;
    padding-top: 0.15rem;
}

.bk-checkout-item__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.95rem;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(145deg, #0061f9 0%, #0045c7 100%);
    box-shadow: 0 10px 18px rgba(0, 97, 249, 0.24);
}

.bk-checkout-item__icon--service {
    background: linear-gradient(145deg, #f472b6 0%, #db2777 100%);
    box-shadow: 0 10px 18px rgba(219, 39, 119, 0.24);
}

.bk-checkout-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    text-align: left;
}

.bk-checkout-item__title {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f1f33;
    letter-spacing: -0.02em;
}

.bk-checkout-item__meta,
.bk-checkout-item__specs {
    font-size: 0.86rem;
    font-weight: 600;
    color: #64748b;
}

.bk-checkout-item__price {
    text-align: right;
    white-space: nowrap;
}

.bk-checkout-item__price strong {
    display: block;
    font-size: 1.05rem;
    color: #0f1f33;
}

.bk-checkout-item__price span {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.bk-checkout-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.bk-checkout-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
    padding: 0.8rem 0.9rem;
    border-radius: 0.9rem;
    font-size: 0.84rem;
    color: #475569;
    font-weight: 600;
    background: rgba(0, 97, 249, 0.05);
    border: 1px solid rgba(0, 97, 249, 0.1);
}

.bk-checkout-note i {
    color: #0061f9;
    margin-top: 0.1rem;
}

.bk-checkout-total {
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1.2rem;
}

.bk-checkout-total__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    font-weight: 700;
    color: #0f1f33;
}

.bk-checkout-total__row strong {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    color: #0061f9;
}

.bk-checkout-total__row--muted {
    color: #64748b;
    font-weight: 600;
    font-size: 0.92rem;
}

.bk-checkout-actions {
    display: grid;
    gap: 0.75rem;
}

.bk-checkout-actions__hint {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.4;
}

.bk-checkout-cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.05rem;
    padding: 0.7rem 1.15rem !important;
    border-radius: 999px !important;
    border: 0;
    font-weight: 800;
    color: #fff !important;
    background: linear-gradient(135deg, #3b82f6 0%, #0061f9 55%, #0045c7 100%) !important;
    box-shadow: 0 14px 26px rgba(0, 97, 249, 0.28);
    transition: transform 0.18s ease, gap 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    text-decoration: none !important;
}

.bk-checkout-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.bk-checkout-cta__label {
    flex: 0 1 auto;
}

.bk-checkout-cta:hover {
    color: #fff !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
    gap: 0.7rem;
    box-shadow: 0 18px 30px rgba(0, 97, 249, 0.32);
}

.bk-checkout-cta-secondary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    border-radius: 999px !important;
    font-weight: 800;
    color: #0045c7 !important;
    background: #fff !important;
    border: 1px solid rgba(0, 97, 249, 0.22) !important;
    text-decoration: none !important;
}

.bk-google-complete__head {
    margin-bottom: 1.15rem;
}

.bk-google-complete__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #047857;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.bk-google-complete__title {
    margin: 0 0 0.35rem;
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f1f33;
}

.bk-google-complete__sub {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}

.bk-google-pending {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding: 0.95rem 1rem;
    border-radius: 1.15rem;
    background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(0, 97, 249, 0.14);
    box-shadow: 0 10px 22px rgba(0, 97, 249, 0.08);
}

.bk-google-pending__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.35rem;
    background: linear-gradient(180deg, #0061f9 0%, #00b8e6 55%, #ff7a00 100%);
}

.bk-google-pending__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0061f9;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
}

.bk-google-pending__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-google-pending__meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bk-google-pending__label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0061f9;
}

.bk-google-pending__name {
    font-size: 1rem;
    font-weight: 800;
    color: #0f1f33;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-google-pending__email {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-google-pending__check {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.28);
}

.bk-google-complete__form {
    display: grid;
    gap: 0.95rem;
}

.bk-google-field__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #334155;
}

.bk-google-field__control {
    position: relative;
}

.bk-google-field__control > i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #0061f9;
    font-size: 1.05rem;
    pointer-events: none;
    z-index: 2;
}

.bk-wa-hint {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.bk-google-field__control .form-control {
    min-height: 2.9rem;
    padding-left: 2.55rem;
    border-radius: 0.9rem;
    border-color: rgba(0, 97, 249, 0.16);
    font-weight: 600;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.bk-google-field__control .form-control:focus {
    border-color: #0061f9;
    box-shadow: 0 0 0 0.2rem rgba(0, 97, 249, 0.12);
}

.bk-google-complete__cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.05rem;
    margin-top: 0.25rem;
    padding: 0.7rem 1.15rem !important;
    border-radius: 999px !important;
    border: 0;
    font-weight: 800;
    color: #fff !important;
    background: linear-gradient(135deg, #3b82f6 0%, #0061f9 55%, #0045c7 100%) !important;
    box-shadow: 0 14px 26px rgba(0, 97, 249, 0.28);
    transition: transform 0.18s ease, gap 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.bk-google-complete__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.bk-google-complete__cta:hover {
    color: #fff !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
    gap: 0.7rem;
    box-shadow: 0 18px 30px rgba(0, 97, 249, 0.32);
}

.bk-google-address {
    position: relative;
    overflow: visible;
    display: grid;
    gap: 0.85rem;
    padding: 1.05rem 1rem 1.1rem;
    border-radius: 1.25rem;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 246, 255, 0.96) 100%);
    border: 1px solid rgba(0, 97, 249, 0.14);
    box-shadow:
        0 12px 28px rgba(0, 97, 249, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bk-google-address__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.bk-google-address__title {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.bk-google-address__mark {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    color: #fff;
    background: linear-gradient(145deg, #3b82f6 0%, #0061f9 55%, #0045c7 100%);
    box-shadow: 0 10px 18px rgba(0, 97, 249, 0.24);
    font-size: 1.05rem;
}

.bk-google-address__title strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f1f33;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.bk-google-address__title small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.bk-google-address__step {
    flex: 0 0 auto;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #0045c7;
    background: rgba(0, 97, 249, 0.1);
    border: 1px solid rgba(0, 97, 249, 0.14);
}

.bk-wilayah-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

.bk-wilayah-steps__dot {
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
}

.bk-wilayah-steps__dot.is-done {
    background: linear-gradient(90deg, #34d399, #10b981);
}

.bk-wilayah-steps__dot.is-current {
    background: linear-gradient(90deg, #60a5fa, #0061f9);
}

.bk-wilayah-chips {
    display: grid;
    gap: 0.45rem;
}

.bk-wilayah-chip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(16, 185, 129, 0.18);
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
    text-align: left;
    color: #0f1f33;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bk-wilayah-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.12);
}

.bk-wilayah-chip__icon {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #34d399, #10b981);
    font-size: 0.85rem;
}

.bk-wilayah-chip__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.bk-wilayah-chip__label {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #059669;
}

.bk-wilayah-chip strong {
    font-size: 0.88rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-wilayah-chip__edit {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.74rem;
    font-weight: 800;
    color: #0061f9;
}

.bk-wilayah-done {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.95rem;
    color: #047857;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.bk-wilayah-done i {
    font-size: 1.25rem;
}

.bk-wilayah-done strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
}

.bk-wilayah-done small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: #059669;
}

.bk-google-field--wilayah {
    margin: 0;
}

.bk-wilayah {
    position: relative;
    z-index: 1;
}

.bk-wilayah.is-open {
    z-index: 30;
}

.bk-wilayah__control {
    position: relative;
}

.bk-wilayah__control > .bi-search {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #0061f9;
    z-index: 2;
}

.bk-wilayah__control .form-control {
    min-height: 3rem;
    padding-left: 2.55rem;
    padding-right: 3.4rem;
    border-radius: 0.95rem;
    border-color: rgba(0, 97, 249, 0.18);
    font-weight: 600;
    background: #fff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

.bk-wilayah__control .form-control:focus {
    border-color: #0061f9;
    box-shadow: 0 0 0 0.2rem rgba(0, 97, 249, 0.12);
}

.bk-wilayah__hint {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.18rem 0.45rem;
    border-radius: 0.45rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    background: rgba(15, 23, 42, 0.06);
    pointer-events: none;
}

.bk-wilayah__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 40;
    max-height: 14rem;
    overflow: auto;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(15, 31, 51, 0.1);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
}

.bk-wilayah__option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0.72rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f1f33;
}

.bk-wilayah__option i {
    color: #94a3b8;
    font-size: 0.95rem;
}

.bk-wilayah__option.is-active,
.bk-wilayah__option:hover {
    background: rgba(0, 97, 249, 0.08);
    color: #0045c7;
}

.bk-wilayah__option.is-active i,
.bk-wilayah__option:hover i {
    color: #0061f9;
}

.bk-wilayah__empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #64748b;
}

.bk-wilayah__spinner {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    border: 2px solid rgba(0, 97, 249, 0.18);
    border-top-color: #0061f9;
    animation: bk-wilayah-spin 0.7s linear infinite;
}

@keyframes bk-wilayah-spin {
    to { transform: rotate(360deg); }
}

[x-cloak] {
    display: none !important;
}

@media (max-width: 575.98px) {
    .bk-checkout-item {
        grid-template-columns: auto 1fr;
    }

    .bk-checkout-item__price {
        grid-column: 2;
        text-align: left;
    }
}

.bk-landing-foot__brand {
    color: #0045C7;
    font-weight: 800;
    text-decoration: none;
}

.bk-landing-foot__brand:hover {
    color: #0061F9;
    text-decoration: underline;
}

.bk-float {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
}

.bk-float__btn {
    width: 3.05rem;
    height: 3.05rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: 0;
    text-decoration: none;
    font-size: 1.15rem;
    box-shadow: 0 12px 26px rgba(0, 97, 249, 0.22);
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.bk-float__btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 30px rgba(0, 97, 249, 0.3);
    color: #fff !important;
    filter: brightness(1.04);
}

.bk-float__btn:focus-visible {
    outline: 2px solid rgba(0, 97, 249, 0.5);
    outline-offset: 3px;
}

.bk-float__btn:active {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 6px 14px rgba(0, 97, 249, 0.2);
    filter: brightness(0.98);
}

.bk-float__btn--blue { background: linear-gradient(145deg, #0061F9, #0045C7); }
.bk-float__btn--teal { background: linear-gradient(145deg, #00B8E6, #0061F9); }
.bk-float__btn--cyan { background: linear-gradient(145deg, #00B8E6, #0045C7); }
.bk-float__btn--top { background: linear-gradient(145deg, #FF7A00, #FF5A00); }


/* =========================================================
   Pricing page (jenis show)
   ========================================================= */

body.bk-pricing-page {
    background:
        radial-gradient(ellipse 80% 50% at 50% -8%, rgba(0, 97, 249, 0.16), transparent 58%),
        radial-gradient(ellipse 45% 35% at 100% 30%, rgba(0, 184, 230, 0.12), transparent 55%),
        radial-gradient(ellipse 40% 30% at 0% 80%, rgba(255, 122, 0, 0.1), transparent 50%),
        linear-gradient(180deg, #eef4fb 0%, #f7fafc 45%, #eef6f9 100%);
    background-attachment: fixed;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

body.bk-pricing-page .bk-bare-main {
    min-height: auto;
    height: auto;
    overflow: visible;
}

.bk-pricing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}

.bk-pricing__hero {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    padding: clamp(1.75rem, 5vh, 3.5rem) 0 0;
}

.bk-pricing__atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bk-pricing__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    animation: bk-pricing-float 10s ease-in-out infinite;
}

.bk-pricing__orb--a {
    width: 20rem;
    height: 20rem;
    top: -8rem;
    left: -6rem;
    background: radial-gradient(circle, rgba(0, 97, 249, 0.24), transparent 70%);
}

.bk-pricing__orb--b {
    width: 16rem;
    height: 16rem;
    top: 0;
    right: -5rem;
    background: radial-gradient(circle, rgba(255, 122, 0, 0.18), transparent 70%);
    animation-delay: -4s;
}

@keyframes bk-pricing-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(1.2rem, 0.8rem, 0) scale(1.04); }
}

.bk-pricing__mesh {
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(0, 97, 249, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 97, 249, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 15%, transparent 75%);
}

.bk-pricing__brand {
    display: inline-flex;
    justify-content: center;
    margin: 0 auto;
}

.bk-pricing__brand .bk-brand-logo--xl {
    max-height: clamp(4.25rem, 9vh, 7rem);
    max-width: min(92vw, 30rem);
}

.bk-pricing__category {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.15rem, 2.8vh, 1.85rem);
}

.bk-pricing__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.48rem 1.05rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0045C7;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 97, 249, 0.18);
    box-shadow:
        0 10px 22px rgba(0, 97, 249, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bk-pricing__kicker i {
    font-size: 0.88rem;
    color: #0061F9;
}

.bk-pricing__heading {
    margin-top: clamp(1.35rem, 3.2vh, 2.15rem);
}

.bk-pricing__title {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.65rem, 3.8vh, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #0f1f33;
    margin: 0 0 clamp(0.4rem, 1vh, 0.65rem);
}

.bk-pricing__sub {
    margin: 0 auto;
    max-width: 30rem;
    color: #64748b;
    font-weight: 600;
    font-size: clamp(0.92rem, 1.8vh, 1.05rem);
    line-height: 1.45;
}

.bk-pricing__list {
    padding: clamp(1.5rem, 3.5vh, 2.5rem) 0 clamp(1.5rem, 3vh, 2.5rem);
    flex: 1 0 auto;
    overflow: visible;
}

.bk-pricing__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.85rem, 1.8vh, 1.15rem);
    max-width: 68rem;
    margin: 0 auto;
    overflow: visible;
}

@media (min-width: 768px) {
    .bk-pricing__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: clamp(0.85rem, 1.6vw, 1.15rem);
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
}

.bk-price-card {
    --pc-a: #0061F9;
    --pc-b: #0045C7;
    --pc-ink: #ffffff;
    --pc-muted: rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.6vh, 1.1rem);
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: clamp(1rem, 2vh, 1.35rem) clamp(0.95rem, 1.4vw, 1.2rem) clamp(0.95rem, 1.8vh, 1.2rem);
    border-radius: 1.5rem;
    color: var(--pc-ink);
    background: linear-gradient(165deg, var(--pc-a) 0%, var(--pc-b) 100%);
    box-shadow:
        0 18px 36px color-mix(in srgb, var(--pc-b) 32%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
    animation: bk-price-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bk-pricing__cards > .bk-price-card:nth-child(1) { animation-delay: 0.05s; }
.bk-pricing__cards > .bk-price-card:nth-child(2) { animation-delay: 0.14s; }
.bk-pricing__cards > .bk-price-card:nth-child(3) { animation-delay: 0.23s; }

@keyframes bk-price-in {
    from {
        opacity: 0;
        filter: blur(3px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

.bk-price-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.14) 48%,
        transparent 62%
    );
    transform: translateX(-120%);
    transition: transform 0.7s ease;
    pointer-events: none;
}

.bk-price-card:hover::after {
    transform: translateX(120%);
}

.bk-price-card__glow {
    position: absolute;
    width: 11rem;
    height: 11rem;
    right: -3rem;
    top: -3.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 70%);
    pointer-events: none;
}

.bk-price-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 26px 46px color-mix(in srgb, var(--pc-b) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.bk-price-card--featured {
    z-index: 1;
    box-shadow:
        0 24px 48px color-mix(in srgb, var(--pc-b) 40%, transparent),
        0 0 0 5px rgba(20, 200, 240, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

@media (min-width: 992px) and (min-height: 900px) {
    .bk-price-card--featured {
        transform: translateY(-8px);
    }

    .bk-price-card--featured:hover {
        transform: translateY(-12px);
    }
}

.bk-price-card__ribbon {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0045C7;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.bk-price-card__ribbon i {
    color: #FFC107;
    font-size: 0.7rem;
}

.bk-price-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-right: 5.5rem;
}

.bk-price-card:not(.bk-price-card--featured) .bk-price-card__head {
    padding-right: 0;
}

.bk-price-card__icon {
    width: clamp(2.7rem, 5vh, 3.15rem);
    height: clamp(2.7rem, 5vh, 3.15rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-size: clamp(1.15rem, 2.2vh, 1.35rem);
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.bk-price-card__intro {
    min-width: 0;
}

.bk-price-card__name {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.25rem, 2.6vh, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
    line-height: 1;
}

.bk-price-card__hint {
    margin: 0;
    color: var(--pc-muted);
    font-weight: 600;
    font-size: clamp(0.8rem, 1.6vh, 0.9rem);
    line-height: 1.35;
}

.bk-price-card__specs {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(0.45rem, 1vh, 0.6rem);
}

.bk-price-card__spec {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: clamp(0.65rem, 1.3vh, 0.85rem) 0.9rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}

.bk-price-card__spec-icon {
    width: clamp(2rem, 3.8vh, 2.35rem);
    height: clamp(2rem, 3.8vh, 2.35rem);
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 1rem;
    flex-shrink: 0;
}

.bk-price-card__spec-copy {
    min-width: 0;
}

.bk-price-card__spec strong {
    display: block;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
}

.bk-price-card__spec small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.86;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bk-price-card__cta {
    position: relative;
    z-index: 1;
    margin-top: auto;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: clamp(2.55rem, 5vh, 2.9rem);
    border-radius: 999px !important;
    border: 0;
    font-weight: 800;
    color: var(--pc-b) !important;
    background: #fff !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, gap 0.18s ease;
}

.bk-price-card__cta i {
    transition: transform 0.18s ease;
}

.bk-price-card__cta:hover {
    color: var(--pc-b) !important;
    background: #f8fbff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
    gap: 0.65rem;
}

.bk-price-card__cta:hover i.bi-arrow-right {
    transform: translateX(3px);
}

.bk-price-card__wa {
    position: relative;
    z-index: 1;
    margin: -0.2rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.bk-price-card--blue { --pc-a: #0061F9; --pc-b: #0045C7; }
.bk-price-card--cyan { --pc-a: #0bb8e8; --pc-b: #0061F9; }
.bk-price-card--orange { --pc-a: #FF8A1F; --pc-b: #FF5A00; }

.bk-pricing .bk-landing-foot {
    margin-top: auto;
    flex: 0 0 auto;
    padding-top: clamp(0.35rem, 1vh, 0.75rem);
    padding-bottom: 0.25rem;
}

@media (max-height: 860px) {
    .bk-pricing__brand .bk-brand-logo--xl {
        max-height: clamp(3.4rem, 7.5vh, 5.25rem);
        max-width: min(90vw, 24rem);
    }

    .bk-pricing__category {
        margin-top: 1rem;
    }

    .bk-pricing__heading {
        margin-top: 1.1rem;
    }

    .bk-pricing__sub {
        display: none;
    }

    .bk-pricing__list {
        padding-top: 1.25rem;
    }

    .bk-price-card__hint {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .bk-pricing__cards {
        padding-top: 0;
        padding-bottom: 0;
    }

    .bk-price-card--featured,
    .bk-price-card--featured:hover {
        transform: none;
    }
}

@media (max-height: 720px) {
    .bk-pricing__brand .bk-brand-logo--xl {
        max-height: 3.1rem;
        max-width: 18rem;
    }

    .bk-pricing__category {
        margin-top: 0.8rem;
    }

    .bk-pricing__heading {
        margin-top: 0.85rem;
    }

    .bk-pricing__title {
        font-size: 1.4rem;
        margin-bottom: 0.15rem;
    }

    .bk-pricing__list {
        padding-top: 1rem;
    }

    .bk-price-card__spec small {
        font-size: 0.66rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-pricing__orb,
    .bk-price-card,
    .bk-price-card::after,
    .bk-price-card__cta,
    .bk-price-card__cta i {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 767.98px) {
    .bk-pricing__hero { padding-top: 1.75rem; }
    .bk-price-card { min-height: 0; }
    .bk-price-card--featured {
        transform: none;
        outline: none;
        box-shadow:
            0 20px 40px color-mix(in srgb, var(--pc-b) 34%, transparent),
            0 0 0 5px rgba(20, 200, 240, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
}

@media (max-width: 575.98px) {
    .bk-hero { padding: 1.5rem 0; }
    .bk-types { padding-top: 2.5rem; }
    .bk-type-tile { min-height: 14rem; }
    .bk-float { right: 0.85rem; bottom: 0.85rem; }
    .bk-float__btn { width: 2.8rem; height: 2.8rem; }
}


/* Payment page */
.bk-pay-hero__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bk-primary);
}

.bk-pay {
    max-width: 34rem;
    margin: 0 auto;
    display: grid;
    gap: 0.85rem;
    animation: bk-pay-in 0.45s ease both;
}

@keyframes bk-pay-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.bk-pay__status {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.95rem;
    border-radius: 1.1rem;
    border: 1px solid transparent;
    background: #fff;
    box-shadow: var(--bk-shadow-sm);
}

.bk-pay__status.is-pending {
    border-color: rgba(255, 122, 0, 0.22);
    background: linear-gradient(160deg, #fff8ef, #fff3e6);
}

.bk-pay__status.is-paid {
    border-color: rgba(0, 97, 249, 0.18);
    background: linear-gradient(160deg, #f3f8ff, #eef8fc);
}

.bk-pay__status-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.bk-pay__status.is-pending .bk-pay__status-dot {
    background: var(--bk-logo-orange);
    animation: bk-pay-pulse 1.4s ease-out infinite;
}

.bk-pay__status.is-paid .bk-pay__status-dot {
    background: var(--bk-primary);
}

@keyframes bk-pay-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 122, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0); }
}

.bk-pay__status-body {
    display: grid;
    gap: 0.08rem;
    flex: 1;
    text-align: left;
}

.bk-pay__status-body strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--bk-slate);
}

.bk-pay__status-body small {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--bk-slate-muted);
}

.bk-pay__status-live {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c2410c;
    background: rgba(255, 122, 0, 0.12);
}

.bk-pay__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}

.bk-pay__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bk-primary-dark);
    background: rgba(0, 97, 249, 0.08);
    border: 1px solid rgba(0, 97, 249, 0.1);
}

.bk-pay__chip i {
    font-size: 0.85rem;
    opacity: 0.85;
}

.bk-pay__amount {
    padding: 1.4rem 1.25rem 1.15rem;
    border-radius: 1.45rem;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.22), transparent 40%),
        linear-gradient(145deg, #0045C7 0%, #0061F9 48%, #00B8E6 100%);
    box-shadow: 0 22px 40px rgba(0, 97, 249, 0.28);
}

.bk-pay__label {
    display: block;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.9;
}

.bk-pay__total-row {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.bk-pay__total {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.bk-pay__currency {
    font-size: 0.52em;
    font-weight: 800;
    opacity: 0.88;
}

.bk-pay__unique-digits {
    color: #FFE08A;
    text-shadow: 0 0 18px rgba(255, 224, 138, 0.35);
}

.bk-pay__copy-amount {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.42rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(4px);
    transition: transform 0.15s ease, background 0.15s ease;
}

.bk-pay__copy-amount:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.bk-pay__breakdown {
    margin: 0.9rem auto 0;
    max-width: 17.5rem;
    display: grid;
    gap: 0.3rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.12);
    text-align: left;
}

.bk-pay__breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.84rem;
    font-weight: 600;
}

.bk-pay__breakdown-row--unique {
    color: #fff8d6;
}

.bk-pay__breakdown-row--unique strong {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 224, 138, 0.2);
    font-variant-numeric: tabular-nums;
}

.bk-pay__amount-note {
    margin: 0.75rem 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.92;
}

.bk-pay__pending,
.bk-pay__paid {
    display: grid;
    gap: 0.85rem;
}

.bk-pay__section {
    padding: 1.1rem 1.15rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, #fff, #f5f9ff);
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: var(--bk-shadow-sm);
}

.bk-pay__section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bk-primary);
}

.bk-pay__banks {
    display: grid;
    gap: 0.7rem;
}

.bk-pay-bank {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border-radius: 1.05rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.bk-pay-bank:hover {
    border-color: rgba(0, 97, 249, 0.2);
    transform: translateY(-1px);
}

.bk-pay-bank__badge {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 0.9rem;
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(145deg, #0050d4, #0061F9);
    box-shadow: 0 8px 16px rgba(0, 97, 249, 0.25);
}

.bk-pay-bank__top {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.4rem;
}

.bk-pay-bank__name {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bk-slate);
}

.bk-pay-bank__owner {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bk-slate-muted);
}

.bk-pay-bank__number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.bk-pay-bank__number strong {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.bk-pay-bank__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--bk-primary-dark);
    background: rgba(0, 97, 249, 0.1);
    transition: background 0.15s ease, transform 0.15s ease;
}

.bk-pay-bank__copy:hover {
    background: rgba(0, 97, 249, 0.16);
    transform: translateY(-1px);
}

.bk-pay__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.bk-pay__step {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    text-align: center;
    padding: 0.75rem 0.45rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 97, 249, 0.1);
    box-shadow: var(--bk-shadow-sm);
}

.bk-pay__step span {
    width: 1.55rem;
    height: 1.55rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, #0061F9, #00B8E6);
}

.bk-pay__step p {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.35;
}

.bk-pay__actions {
    display: grid;
    gap: 0.5rem;
}

.bk-pay__confirm {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.3rem;
    border: 0;
    border-radius: 999px !important;
    font-weight: 800;
    font-size: 1.02rem;
    color: #fff !important;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    box-shadow: 0 16px 30px rgba(18, 140, 126, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.bk-pay__confirm:hover {
    color: #fff !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 20px 34px rgba(18, 140, 126, 0.34);
}

.bk-pay__confirm:disabled {
    opacity: 0.75;
    transform: none;
}

.bk-pay__dashboard {
    text-decoration: none !important;
    background: linear-gradient(135deg, #0061F9 0%, #0045C7 100%) !important;
    box-shadow: 0 16px 30px rgba(0, 97, 249, 0.28) !important;
}

.bk-pay__paid-card {
    padding: 1.4rem 1.2rem;
    border-radius: 1.3rem;
    text-align: center;
    background: linear-gradient(160deg, #fff, #f3f8ff);
    border: 1px solid rgba(0, 97, 249, 0.14);
    box-shadow: var(--bk-shadow-sm);
}

.bk-pay__paid-icon {
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto 0.75rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--bk-primary);
    background: rgba(0, 97, 249, 0.1);
    font-size: 1.7rem;
}

.bk-pay__paid-card h2 {
    margin: 0 0 0.35rem;
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--bk-slate);
}

.bk-pay__paid-card p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.45;
}

.bk-pay__back {
    display: block;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bk-slate-muted);
    text-decoration: none;
}

.bk-pay__back:hover {
    color: var(--bk-primary);
}

.bk-spin {
    display: inline-block;
    animation: bk-wilayah-spin 0.8s linear infinite;
}

@media (max-width: 575.98px) {
    .bk-pay__steps {
        grid-template-columns: 1fr;
    }

    .bk-pay__step {
        grid-template-columns: auto 1fr;
        justify-items: start;
        text-align: left;
        align-items: center;
        gap: 0.65rem;
        padding: 0.7rem 0.85rem;
    }

    .bk-pay-bank {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .bk-pay-bank__badge {
        width: 2.55rem;
        height: 2.55rem;
    }
}

[x-cloak] {
    display: none !important;
}

/* Console start (no website yet) */
.bk-console-start-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 10%, rgba(0, 184, 230, 0.16), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(0, 97, 249, 0.14), transparent 36%),
        linear-gradient(180deg, #eef4fb 0%, #f7faff 100%);
}

.bk-console-start {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    position: relative;
}

.bk-console-start__atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bk-console-start__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
    opacity: 0.55;
}

.bk-console-start__orb--a {
    width: 18rem;
    height: 18rem;
    left: -4rem;
    top: 10%;
    background: rgba(0, 184, 230, 0.22);
}

.bk-console-start__orb--b {
    width: 16rem;
    height: 16rem;
    right: -3rem;
    bottom: 12%;
    background: rgba(0, 97, 249, 0.18);
}

.bk-console-start__card {
    position: relative;
    width: min(100%, 28rem);
    padding: 2rem 1.5rem 1.4rem;
    border-radius: 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 24px 48px rgba(13, 55, 120, 0.12);
    animation: bk-pay-in 0.45s ease both;
}

.bk-console-start__brand {
    display: inline-flex;
    margin-bottom: 1rem;
}

.bk-console-start__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bk-primary);
}

.bk-console-start__title {
    margin: 0 0 0.5rem;
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.45rem, 4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bk-slate);
}

.bk-console-start__sub {
    margin: 0 0 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bk-slate-muted);
    line-height: 1.45;
}

.bk-console-start__cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.35rem;
    border: 0;
    border-radius: 999px !important;
    font-weight: 800;
    font-size: 1.02rem;
    color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #0061F9 0%, #0045C7 55%, #00B8E6 100%) !important;
    box-shadow: 0 16px 30px rgba(0, 97, 249, 0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.bk-console-start__cta:hover {
    color: #fff !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 20px 34px rgba(0, 97, 249, 0.34);
}

.bk-console-start__logout {
    margin-top: 1rem;
}

.bk-console-start__logout button {
    border: 0;
    background: transparent;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--bk-slate-muted);
}

.bk-console-start__logout button:hover {
    color: var(--bk-primary);
}

/* Onboarding (subdomain + website info) */
.bk-onboard-hero {
    padding-bottom: 0.5rem;
}

.bk-onboard-steps {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.85rem 0 1.1rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 8px 20px rgba(13, 55, 120, 0.06);
}

.bk-onboard-steps__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bk-slate-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.bk-onboard-steps__num {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(15, 23, 42, 0.06);
    color: var(--bk-slate-muted);
}

.bk-onboard-steps__item.is-active {
    color: var(--bk-primary);
}

.bk-onboard-steps__item.is-active .bk-onboard-steps__num,
.bk-onboard-steps__item.is-done .bk-onboard-steps__num {
    background: linear-gradient(135deg, #0061F9, #00B8E6);
    color: #fff;
}

.bk-onboard-steps__item.is-done {
    color: var(--bk-slate);
}

.bk-onboard-steps__line {
    width: 1.6rem;
    height: 2px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
}

.bk-onboard-steps__line.is-done {
    background: linear-gradient(90deg, #0061F9, #00B8E6);
}

.bk-onboard {
    max-width: 36rem;
    margin: 0 auto;
    display: grid;
    gap: 0.95rem;
    animation: bk-pay-in 0.45s ease both;
    padding-bottom: 2.5rem;
}

.bk-onboard-card {
    display: grid;
    gap: 1.1rem;
    padding: 1.35rem 1.25rem 1.25rem;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 22px 44px rgba(13, 55, 120, 0.1);
}

.bk-onboard-card__preview {
    display: grid;
    gap: 0.35rem;
    padding: 0.95rem 1rem;
    border-radius: 1.05rem;
    background: linear-gradient(145deg, #f3f8ff 0%, #eefafc 100%);
    border: 1px solid rgba(0, 97, 249, 0.12);
}

.bk-onboard-card__preview-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bk-primary);
}

.bk-onboard-card__preview-url {
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.05rem, 3.4vw, 1.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bk-slate);
    word-break: break-all;
    line-height: 1.3;
}

.bk-onboard-field {
    display: grid;
    gap: 0.45rem;
}

.bk-onboard-field__label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bk-slate);
}

.bk-onboard-field__optional {
    margin-left: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bk-slate-muted);
}

.bk-onboard-field__hint {
    margin: 0;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bk-slate-muted);
    line-height: 1.4;
}

.bk-onboard-field__error {
    font-size: 0.8rem;
    font-weight: 700;
    color: #dc2626;
}

.bk-onboard-domain {
    display: flex;
    align-items: stretch;
    border-radius: 1rem;
    overflow: hidden;
    border: 1.5px solid rgba(0, 97, 249, 0.18);
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bk-onboard-domain:focus-within {
    border-color: rgba(0, 97, 249, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 97, 249, 0.12);
}

.bk-onboard-domain.is-invalid {
    border-color: rgba(220, 38, 38, 0.45);
}

.bk-onboard-domain.is-available {
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.bk-onboard-domain.is-checking {
    border-color: rgba(0, 97, 249, 0.35);
}

.bk-onboard-check {
    margin-top: 0.15rem;
}

.bk-onboard-check__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.bk-onboard-check__pill.is-ok {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}

.bk-onboard-check__pill.is-bad {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.1);
}

.bk-onboard-check__pill.is-wait {
    color: var(--bk-primary);
    background: rgba(0, 97, 249, 0.1);
}

.bk-onboard-btn--primary:disabled,
.bk-onboard-btn--primary[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.bk-onboard-domain__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bk-slate);
    background: transparent;
}

.bk-onboard-domain__input::placeholder {
    color: rgba(100, 116, 139, 0.7);
    font-weight: 600;
}

.bk-onboard-domain__suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--bk-slate-muted);
    background: linear-gradient(180deg, #f8fbff, #eef5ff);
    border-left: 1px solid rgba(0, 97, 249, 0.12);
    white-space: nowrap;
}

.bk-onboard-input {
    width: 100%;
    border-radius: 1rem;
    border: 1.5px solid rgba(0, 97, 249, 0.16);
    background: #fff;
    padding: 0.85rem 1rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--bk-slate);
    outline: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bk-onboard-input:focus {
    border-color: rgba(0, 97, 249, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 97, 249, 0.12);
}

.bk-onboard-input.is-invalid {
    border-color: rgba(220, 38, 38, 0.45);
}

.bk-onboard-input--area {
    resize: vertical;
    min-height: 7rem;
    line-height: 1.5;
}

.bk-onboard-card__actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.65rem;
    margin-top: 0.15rem;
}

.bk-onboard-btn {
    min-height: 3.1rem;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

.bk-onboard-btn--ghost {
    border: 1.5px solid rgba(0, 97, 249, 0.22) !important;
    background: #fff !important;
    color: var(--bk-primary) !important;
}

.bk-onboard-btn--ghost:hover {
    background: #f3f8ff !important;
    transform: translateY(-1px);
}

.bk-onboard-btn--primary {
    border: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0061F9 0%, #0045C7 55%, #00B8E6 100%) !important;
    box-shadow: 0 14px 28px rgba(0, 97, 249, 0.28);
}

.bk-onboard-btn--primary:hover {
    color: #fff !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(0, 97, 249, 0.34);
}

.bk-onboard-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 97, 249, 0.12);
    box-shadow: 0 12px 28px rgba(13, 55, 120, 0.07);
}

.bk-onboard-address__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bk-primary);
}

.bk-onboard-address__url {
    flex: 1 1 auto;
    font-family: Sora, 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--bk-slate);
    word-break: break-all;
}

.bk-onboard-address__edit {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--bk-primary);
    text-decoration: none;
}

.bk-onboard-address__edit:hover {
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .bk-onboard-card {
        padding: 1.15rem 1rem 1.05rem;
    }

    .bk-onboard-card__actions {
        grid-template-columns: 1fr;
    }

    .bk-onboard-domain {
        flex-direction: column;
    }

    .bk-onboard-domain__suffix {
        justify-content: center;
        border-left: 0;
        border-top: 1px solid rgba(0, 97, 249, 0.12);
        padding: 0.55rem 1rem;
    }

    .bk-onboard-steps__label {
        display: none;
    }
}