/*
 * Jerroop brand overrides.
 * Loaded after Modernize styles so it wins by cascade order.
 */

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

:root {
    /* Aqua/cyan brand — matches the landing page. Coral (below) is the CTA. */
    --sf-primary: #159fc4;
    --sf-primary-hover: #1187ab;
    --sf-primary-active: #0d5f9c;
    --sf-primary-soft: #e2f4f9;
    --sf-primary-soft2: #f1fafc;
    --sf-primary-rgb: 21, 159, 196;
    /* Coral call-to-action, used by .btn-primary only. */
    --sf-cta: #f4623f;
    --sf-cta-hover: #ea522e;
    --sf-cta-active: #e2431f;
    --sf-cta-rgb: 244, 98, 63;
    --sf-surface: #eaf3f9;
    --sf-sidebar: #ffffff;
    --sf-border: #edf1f7;
    --sf-text: #2a3547;
    --sf-muted: #7c8fac;

    --bs-primary: var(--sf-primary);
    --bs-primary-rgb: var(--sf-primary-rgb);
    --bs-primary-text-emphasis: var(--sf-primary-active);
    --bs-primary-bg-subtle: var(--sf-primary-soft2);
    --bs-primary-border-subtle: var(--sf-primary-soft);
    --bs-link-color: var(--sf-primary);
    --bs-link-color-rgb: var(--sf-primary-rgb);
    --bs-link-hover-color: var(--sf-primary-hover);
}

[data-color-theme] {
    --bs-primary: var(--sf-primary);
    --bs-primary-rgb: var(--sf-primary-rgb);
}

body {
    background: var(--sf-surface);
    color: var(--sf-text);
    font-family: 'Anuphan', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Leelawadee UI', 'Noto Sans Thai', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Primary action buttons use the coral CTA colour (brand aqua stays for links,
   focus rings, sidebar, etc.). */
.btn-primary,
.btn-primary:focus {
    background-color: var(--sf-cta);
    border-color: var(--sf-cta);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--sf-cta-hover);
    border-color: var(--sf-cta-hover);
}
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--sf-cta-active);
    border-color: var(--sf-cta-active);
}
.btn-outline-primary {
    color: var(--sf-primary);
    border-color: var(--sf-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
    color: #fff;
}

.text-primary { color: var(--sf-primary) !important; }
a { color: var(--sf-primary); }
a:hover { color: var(--sf-primary-hover); }

.bg-primary { background-color: var(--sf-primary) !important; }
.bg-primary-subtle { background-color: var(--sf-primary-soft) !important; }
.text-bg-primary { background-color: var(--sf-primary) !important; color: #fff !important; }
.border-primary { border-color: var(--sf-primary) !important; }
.progress-bar { background-color: var(--sf-primary); }

.form-check-input:checked {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--sf-primary-rgb), .18);
}

.sf-logo {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: inherit;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.sf-logo__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3fbcd6, var(--sf-primary-active));
    color: #fff;
    box-shadow: 0 10px 25px -12px rgba(var(--sf-primary-rgb), .75);
}
.sf-logo__mark i { font-size: 20px; line-height: 1; }
.sf-logo__text {
    font-size: 1.35rem;
    color: #1e2a3a;
    line-height: 1;
}
.sf-logo__text b { color: var(--sf-primary); font-weight: 800; }
.sf-logo--sm .sf-logo__mark { width: 30px; height: 30px; border-radius: 9px; }
.sf-logo--sm .sf-logo__mark i { font-size: 16px; }
.sf-logo--sm .sf-logo__text { font-size: 1rem; }

.sf-admin-shell .page-wrapper,
.sf-admin-shell .body-wrapper,
.sf-admin-shell .left-sidebar,
.sf-admin-shell .body-wrapper-inner {
    background: transparent;
}

.sf-sidebar-shell {
    background: var(--sf-sidebar);
    border-right: 1px solid var(--sf-border);
}

.brand-logo .sf-logo {
    max-width: 100%;
}

.sf-sidebar-panel {
    padding: 1rem 0 1.25rem;
}

.sf-sidebarnav .nav-small-cap {
    margin-bottom: .8rem;
    color: var(--sf-text);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sf-sidebarnav .nav-small-cap .hide-menu {
    opacity: .72;
}

.sidebar-nav ul#sidebarnav li.sidebar-item {
    margin-bottom: .35rem;
}

.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link {
    border-radius: 14px;
    padding: .85rem 1rem;
    color: var(--sf-text);
    font-weight: 600;
}

.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link.active,
.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link:hover {
    background-color: var(--sf-primary);
    color: #fff;
    box-shadow: 0 10px 25px -15px rgba(var(--sf-primary-rgb), .85);
}

.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link.active > span > i,
.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link:hover > span > i {
    color: #fff;
}

.sf-sidebar-profile {
    margin-top: 1rem;
    background: #eef5ff;
    border-radius: 18px;
    padding: 1rem;
}

.sf-sidebar-avatar,
.sf-topbar-avatar,
.sf-avatar-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--sf-primary);
    background: #edf4ff;
    border-radius: 999px;
}

.sf-sidebar-avatar,
.sf-topbar-avatar {
    width: 40px;
    height: 40px;
}

.sf-topbar-avatar-lg {
    width: 46px;
    height: 46px;
}

.sf-avatar-chip {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

.sf-topbar-shell {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--sf-border);
    backdrop-filter: blur(10px);
}

.sf-topbar-nav {
    min-height: 76px;
}

.sf-topbar-shell .container-fluid,
.sf-topbar-shell .container-lg,
.sf-topbar-shell .container-md,
.sf-topbar-shell .container-sm,
.sf-topbar-shell .container-xl,
.sf-topbar-shell .container-xxl {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

.sf-topbar-nav .nav-link {
    color: var(--sf-text);
    border-radius: 999px;
}

.sf-topbar-nav .nav-link.nav-icon-hover:hover {
    background: #eef5ff;
}

.sf-dot-indicator {
    position: absolute;
    top: 12px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ff6b6b;
}

.sf-admin-dashboard .card {
    border-radius: 24px;
    border: 1px solid var(--sf-border) !important;
    box-shadow: 0 18px 45px -35px rgba(42, 53, 71, .25) !important;
}

.sf-hero-card {
    background: linear-gradient(180deg, #eef4ff 0%, #e8f0ff 100%);
    overflow: hidden;
}

.sf-hero-illustration {
    max-height: 220px;
    width: 100%;
    object-fit: contain;
}

.sf-hero-metric {
    padding-right: 1rem;
}

.sf-hero-metric--split {
    padding-left: 1rem;
    border-left: 1px solid rgba(124, 143, 172, .18);
}

.sf-hero-metric h2 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}

.sf-hero-metric p,
.sf-mini-kpi p,
.sf-summary-chip span,
.sf-bar-meta span,
.sf-metric-note {
    color: var(--sf-muted);
}

.sf-metric-note {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .9rem;
    font-weight: 600;
}

.sf-mini-kpi {
    background: #fff;
}

.sf-sidebarnav {
    padding: 0 24px;
}

.sf-sidebar-profile {
    margin: 1rem 24px 0;
}

.sf-body-shell {
    min-height: 100vh;
}

.sf-admin-shell .app-header {
    z-index: 20;
}

.sf-admin-shell .body-wrapper > .container-fluid {
    max-width: none;
}

.sf-topbar-nav .quick-links .nav-link {
    font-weight: 500;
}

.sf-topbar-nav .quick-links .nav-link:hover {
    background: #eef5ff;
}

.sf-donut-ring {
    --value: 50;
    --ring-a: var(--sf-primary);
    --ring-b: #49beff;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(var(--ring-a) 0 calc(var(--value) * 1%), var(--ring-b) calc(var(--value) * 1%) calc((var(--value) + 12) * 1%), #ebf1f6 0 100%);
}

.sf-donut-ring::after {
    content: "";
    position: absolute;
    inset: 14px;
    background: #fff;
    border-radius: 50%;
}

.sf-donut-ring > span {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--sf-text);
}

.sf-donut-ring-lg {
    width: 320px;
    height: 320px;
}

.sf-donut-ring-lg::after {
    inset: 22px;
}

.sf-donut-ring-lg > span {
    flex-direction: column;
    gap: .2rem;
}

.sf-donut-ring-lg > span strong {
    font-size: 2.6rem;
    line-height: 1;
}

.sf-donut-ring-lg > span small {
    font-size: 1rem;
    color: var(--sf-muted);
    font-weight: 600;
}

.sf-mini-bars,
.sf-sparkline {
    height: 104px;
    display: flex;
    align-items: flex-end;
    gap: .65rem;
}

.sf-mini-bars span,
.sf-sparkline span {
    display: block;
    flex: 1;
    border-radius: 10px 10px 6px 6px;
    background: linear-gradient(180deg, #5fc9dc 0%, #159fc4 100%);
}

.sf-icon-tile {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.sf-line-visual {
    height: 76px;
    position: relative;
    overflow: hidden;
}

.sf-line-visual span,
.sf-wave-line {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(21, 159, 196, .08), rgba(21, 159, 196, 0));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cpath d='M0 70 C40 45, 70 18, 110 30 S180 86, 230 60 S310 14, 350 30 S390 56, 400 48' fill='none' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cpath d='M0 70 C40 45, 70 18, 110 30 S180 86, 230 60 S310 14, 350 30 S390 56, 400 48' fill='none' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    background-color: #159fc4;
}

.sf-wave-card {
    border-top: 1px solid var(--sf-border);
    padding-top: 1rem;
}

.sf-wave-line {
    height: 82px;
}

.sf-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.sf-vertical-bars {
    min-height: 250px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.sf-bar-group {
    flex: 1;
}

.sf-bar-track {
    height: 180px;
    border-radius: 18px;
    background: #eef3f9;
    display: flex;
    align-items: end;
    padding: 10px;
}

.sf-bar-fill {
    width: 100%;
    border-radius: 14px;
}

.sf-bar-meta {
    padding-top: .85rem;
    text-align: center;
}

.sf-bar-meta strong,
.sf-summary-chip strong {
    display: block;
    color: var(--sf-text);
    font-size: 1.05rem;
}

.sf-summary-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 84px;
    border-radius: 18px;
    background: #f8fbff;
}

.sf-summary-chip i {
    font-size: 1.4rem;
}

.sf-admin-table thead th {
    color: var(--sf-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom-color: var(--sf-border);
}

.sf-admin-table tbody td {
    border-bottom-color: var(--sf-border);
}

@media (max-width: 1199.98px) {
    .sf-donut-ring-lg {
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 991.98px) {
    .sf-hero-metric--split {
        padding-left: 0;
        border-left: 0;
    }

    .sf-topbar-nav {
        min-height: 68px;
    }
}

/* Customer event workspace */
.jr-workspace { --jr-ink: #152238; --jr-cyan: #14b8a6; color: var(--jr-ink); }
.jr-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.jr-welcome { position: relative; min-height: 290px; overflow: hidden; display: flex; align-items: center; padding: clamp(2rem, 5vw, 4.5rem); border-radius: 30px; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(20,184,166,.65), transparent 28%), linear-gradient(125deg, #10264c 0%, #174a86 58%, #168a9b 100%); box-shadow: 0 28px 70px -45px rgba(15, 43, 82, .8); }
.jr-welcome__content { position: relative; z-index: 2; max-width: 650px; }
.jr-welcome h1 { margin: .7rem 0; color: #fff; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; letter-spacing: -.045em; }
.jr-welcome p { max-width: 560px; margin: 0; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.jr-welcome__signal { position: absolute; inset: 0 0 0 auto; width: 42%; }
.jr-orbit { position: absolute; top: 50%; right: 20%; width: 132px; height: 132px; transform: translateY(-50%); display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 3rem; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 0 0 34px rgba(255,255,255,.06), 0 0 0 68px rgba(255,255,255,.035); backdrop-filter: blur(10px); }
.jr-signal { position: absolute; border-radius: 50%; background: #5eead4; box-shadow: 0 0 20px #5eead4; animation: jr-float 4s ease-in-out infinite; }
.jr-signal--one { width: 13px; height: 13px; top: 24%; right: 10%; }
.jr-signal--two { width: 8px; height: 8px; bottom: 23%; right: 44%; animation-delay: -2s; }
@keyframes jr-float { 50% { transform: translateY(-12px); opacity: .6; } }
.jr-metric, .jr-panel, .jr-event-card, .jr-event-workspace, .jr-usage-card { border: 1px solid var(--sf-border); background: #fff; box-shadow: 0 18px 45px -38px rgba(21,34,56,.35); }
.jr-metric { display: flex; align-items: center; gap: 1rem; padding: 1.35rem; border-radius: 20px; }
.jr-metric__icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 15px; font-size: 1.35rem; }
.jr-metric__icon--blue { color: #2563eb; background: #eaf2ff; }.jr-metric__icon--green { color: #0f9f83; background: #e7faf6; }.jr-metric__icon--orange { color: #e2742c; background: #fff2e8; }.jr-metric__icon--navy { color: #173f73; background: #e9eff7; }
.jr-metric strong { display: block; color: var(--jr-ink); font-size: 1.75rem; line-height: 1.1; }.jr-metric span:last-child { display: block; margin-top: .25rem; color: var(--sf-muted); font-size: .85rem; }
.jr-panel { padding: 1.5rem; border-radius: 24px; }
.jr-step { height: 100%; padding: 1.4rem; border-radius: 18px; background: #f7f9fc; border: 1px solid transparent; }.jr-step.is-active { background: #eef4ff; border-color: #cfe0ff; }.jr-step > span { color: var(--sf-primary); font-weight: 800; }.jr-step h3 { margin: 1.1rem 0 .35rem; font-size: 1rem; }.jr-step p { margin: 0; color: var(--sf-muted); font-size: .88rem; }
.jr-event-card { padding: 1.4rem; border-radius: 22px; }.jr-event-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.jr-event-card h3 { margin: 1.1rem 0 .7rem; font-size: 1.15rem; }.jr-event-card__stats { display: flex; gap: 1rem; color: var(--sf-muted); font-size: .85rem; }.jr-event-card__actions { display: flex; gap: .55rem; margin-top: 1.3rem; }
.jr-usage-strip { display: grid; grid-template-columns: auto minmax(280px,1fr) auto; align-items: center; gap: 2rem; padding: 1.4rem 1.6rem; border-radius: 22px; background: #eaf3f5; }.jr-usage-strip strong { display: block; margin: .15rem 0; font-size: 1.45rem; }.jr-usage-strip p { margin: 0; color: #486071; }
.jr-page-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }.jr-page-head h1 { margin: .35rem 0 .15rem; font-size: clamp(1.85rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; }.jr-page-head p { margin: 0; color: var(--sf-muted); }
.jr-empty-icon { width: 72px; height: 72px; display: inline-grid; place-items: center; border-radius: 22px; color: var(--sf-primary); background: var(--sf-primary-soft); font-size: 2rem; }
.jr-event-workspace { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }.jr-event-workspace:hover { transform: translateY(-3px); box-shadow: 0 25px 55px -38px rgba(21,34,56,.55); }.jr-event-workspace header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.35rem 0; }.jr-event-workspace__body { flex: 1; padding: 1.25rem 1.35rem; }.jr-event-workspace h2 { margin: .4rem 0; font-size: 1.3rem; }.jr-public-link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: #59718d; font-size: .85rem; white-space: nowrap; }.jr-event-workspace__metrics { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 1.4rem; padding: 1rem 0; border-top: 1px solid var(--sf-border); }.jr-event-workspace__metrics div + div { border-left: 1px solid var(--sf-border); padding-left: 1rem; }.jr-event-workspace__metrics strong, .jr-event-workspace__metrics span { display: block; }.jr-event-workspace__metrics strong { font-size: 1.15rem; }.jr-event-workspace__metrics span { color: var(--sf-muted); font-size: .76rem; }.jr-event-workspace footer { display: flex; gap: .55rem; padding: 1rem 1.35rem; background: #f8fafc; border-top: 1px solid var(--sf-border); }
.jr-usage-card { display: flex; flex-direction: column; padding: 1.35rem; border-radius: 20px; }.jr-usage-card i { color: var(--sf-primary); font-size: 1.4rem; }.jr-usage-card strong { margin-top: .8rem; font-size: 1.45rem; }.jr-usage-card span { color: var(--sf-muted); font-size: .85rem; }.jr-usage-table th { padding: 1rem 1.25rem; color: var(--sf-muted); font-size: .75rem; text-transform: uppercase; }.jr-usage-table td { padding: 1rem 1.25rem; }.jr-usage-table td strong, .jr-usage-table td small { display: block; }.jr-usage-table td small { margin-top: .2rem; color: var(--sf-muted); }
@media (max-width: 991.98px) { .jr-welcome__signal { opacity: .4; width: 55%; }.jr-usage-strip { grid-template-columns: 1fr auto; }.jr-usage-strip p { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .jr-welcome { min-height: 330px; padding: 1.5rem; align-items: end; }.jr-welcome__signal { inset: -50px 0 auto auto; width: 100%; height: 220px; }.jr-orbit { right: 15%; width: 90px; height: 90px; font-size: 2.2rem; }.jr-page-head { align-items: stretch; flex-direction: column; }.jr-page-head .btn { width: 100%; }.jr-event-workspace footer { flex-wrap: wrap; }.jr-event-workspace footer .btn:first-child { flex: 1 0 100%; }.jr-usage-strip { grid-template-columns: 1fr; }.jr-usage-strip .btn { width: 100%; }.jr-metric { padding: 1rem; align-items: flex-start; flex-direction: column; gap: .7rem; }.jr-metric strong { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .jr-signal { animation: none; }.jr-event-workspace { transition: none; } }
.jr-form-shell > .card { border: 0; border-radius: 26px; box-shadow: 0 24px 60px -48px rgba(21,34,56,.55); }.jr-form-shell > .card > .card-body > .card { border: 1px solid var(--sf-border); border-radius: 20px; box-shadow: none; }.jr-form-nav { position: sticky; top: 88px; z-index: 8; display: flex; gap: .45rem; padding: .55rem; overflow-x: auto; border: 1px solid var(--sf-border); border-radius: 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }.jr-form-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem .85rem; color: #50637b; border-radius: 11px; font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap; }.jr-form-nav a:hover { color: var(--sf-primary); background: var(--sf-primary-soft2); }.jr-form-section-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; margin-right: .5rem; border-radius: 12px; color: var(--sf-primary); background: var(--sf-primary-soft); }.scroll-mt { scroll-margin-top: 170px; }.jr-form-actions { position: sticky; bottom: 0; z-index: 6; margin: 0 -1.25rem -1.25rem; padding: 1rem 1.25rem; background: rgba(255,255,255,.96); border-top: 1px solid var(--sf-border); backdrop-filter: blur(10px); }

/* Keep customer workflows on the same visual system as the Modernize admin. */
.jr-eyebrow {
    color: var(--sf-primary);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.jr-welcome {
    min-height: 0;
    padding: 1.5rem;
    border: 0;
    border-radius: 1rem;
    color: var(--sf-text);
    background: var(--sf-primary-soft2);
    box-shadow: none;
}

.jr-welcome__content {
    max-width: 720px;
}

.jr-welcome h1 {
    margin: .45rem 0;
    color: var(--sf-text);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
}

.jr-welcome p {
    color: var(--sf-muted);
    font-size: .95rem;
}

.jr-welcome__signal {
    display: none;
}

.jr-metric,
.jr-panel,
.jr-event-card,
.jr-event-workspace,
.jr-usage-card {
    border: 0;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.jr-metric {
    padding: 1.5rem;
}

.jr-metric__icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: .65rem;
    font-size: 1.2rem;
}

.jr-metric strong {
    color: var(--sf-text);
    font-size: 1.35rem;
    font-weight: 600;
}

.jr-panel {
    padding: 1.5rem;
}

.jr-step,
.jr-step.is-active {
    padding: 1.25rem;
    border-radius: .75rem;
}

.jr-step h3 {
    margin-top: .8rem;
}

.jr-event-card {
    padding: 1.5rem;
}

.jr-usage-strip {
    border: 0;
    border-radius: 1rem;
    background: var(--bs-info-bg-subtle, #e5f3fb);
    box-shadow: none;
}

.jr-page-head {
    align-items: center;
}

.jr-page-head h1 {
    margin: .2rem 0;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0;
}

.jr-event-workspace {
    border: 0;
    border-radius: 1rem;
    transition: none;
}

.jr-event-workspace:hover {
    transform: none;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.jr-event-workspace header {
    padding: 1.5rem 1.5rem 0;
}

.jr-event-workspace__body {
    padding: 1.25rem 1.5rem;
}

.jr-event-workspace footer {
    padding: 1rem 1.5rem;
    background: transparent;
}

.jr-usage-card {
    padding: 1.5rem;
}

.jr-usage-card strong {
    font-size: 1.35rem;
    font-weight: 600;
}

.jr-usage-table th,
.jr-usage-table td {
    padding: 1rem 1.5rem;
}

.jr-form-shell > .card {
    border-radius: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.jr-form-shell > .card > .card-body > .card {
    border-color: var(--sf-border);
    border-radius: .75rem;
}

.jr-form-nav {
    top: 76px;
    border: 0;
    border-radius: .65rem;
    background: #f6f9fc;
    backdrop-filter: none;
}

.jr-form-nav a,
.jr-form-nav .nav-link {
    padding: .55rem .8rem;
    border-radius: .5rem;
    font-size: .82rem;
    font-weight: 600;
}

.jr-form-nav a:hover,
.jr-form-nav .nav-link:hover {
    color: var(--sf-primary);
    background: var(--sf-primary-soft2);
}

.jr-form-section-icon {
    width: 34px;
    height: 34px;
    border-radius: .6rem;
}

.jr-form-actions {
    background: #fff;
    backdrop-filter: none;
}

@media (max-width: 575.98px) {
    .jr-welcome {
        min-height: 0;
        padding: 1.25rem;
        align-items: center;
    }

    .jr-metric {
        padding: 1.25rem;
        align-items: center;
        flex-direction: row;
    }
}