:root {
    --jt-bg: #f6f7fb;
    --jt-surface: #ffffff;
    --jt-surface-soft: #f8f6fe;
    --jt-text: #2b303b;
    --jt-muted: #6b7280;
    --jt-border: #e5e7eb;
    --jt-primary: #6b26d9;
    --jt-primary-2: #9234ea;
    --jt-success: #16a34a;
    --jt-info: #2563eb;
    --jt-warning: #d97706;
    --jt-danger: #dc2626;
    --jt-shadow-sm:
        0 1px 3px rgba(43, 48, 59, 0.06), 0 1px 2px rgba(43, 48, 59, 0.04);
    --jt-shadow-md: 0 12px 30px rgba(43, 48, 59, 0.08);
}

body {
    font-family: "Inter", system-ui, sans-serif;
    background: var(--jt-bg);
    color: var(--jt-text);
}

.sidebar-desktop {
    width: 280px;
    flex: 0 0 280px;
    min-height: 100vh;
    background: var(--jt-surface);
    border-right: 1px solid var(--jt-border);
}

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

.brand-mark,
.icon-chip,
.avatar-mark,
.notification-badge,
.hero-brand {
    background: linear-gradient(135deg, var(--jt-primary), var(--jt-primary-2));
    color: #fff;
}

.brand-mark,
.icon-chip {
    width: 0.85rem;
    height: 2.5rem;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-brand {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-brand__image {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.landing-brand-mark {
    background: transparent;
    color: inherit;
    width: 3rem;
    height: 3rem;
    border-radius: 0.7rem;
    flex: 0 0 auto;
}

.landing-brand-mark__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

@keyframes auth-orbs-move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.auth-orbs-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    overflow: hidden;
}

.auth-orbs-background span {
    width: 34vmin;
    height: 34vmin;
    border-radius: 34vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: auth-orbs-move linear infinite;
}

.auth-orbs-background span:nth-child(1) { color: #583C87; top: 73%; left: 83%; animation-duration: 95s; animation-delay: -76s; transform-origin: 4vw -5vh; box-shadow: -68vmin 0 9.326972246339722vmin currentColor; }
.auth-orbs-background span:nth-child(2) { color: #FFACAC; top: 11%; left: 74%; animation-duration: 154s; animation-delay: -111s; transform-origin: -5vw -2vh; box-shadow: 68vmin 0 9.24415458517159vmin currentColor; }
.auth-orbs-background span:nth-child(3) { color: #E45A84; top: 42%; left: 19%; animation-duration: 198s; animation-delay: -140s; transform-origin: 15vw 22vh; box-shadow: 68vmin 0 9.105933492701249vmin currentColor; }
.auth-orbs-background span:nth-child(4) { color: #E45A84; top: 94%; left: 32%; animation-duration: 33s; animation-delay: -183s; transform-origin: -5vw -5vh; box-shadow: 68vmin 0 8.543126351220856vmin currentColor; }
.auth-orbs-background span:nth-child(5) { color: #E45A84; top: 61%; left: 70%; animation-duration: 205s; animation-delay: -48s; transform-origin: 18vw -19vh; box-shadow: 68vmin 0 8.551458961094534vmin currentColor; }
.auth-orbs-background span:nth-child(6) { color: #FFACAC; top: 82%; left: 16%; animation-duration: 73s; animation-delay: -180s; transform-origin: 15vw 16vh; box-shadow: -68vmin 0 8.6202764390411vmin currentColor; }
.auth-orbs-background span:nth-child(7) { color: #583C87; top: 31%; left: 77%; animation-duration: 134s; animation-delay: -104s; transform-origin: -14vw 24vh; box-shadow: -68vmin 0 9.43342782904628vmin currentColor; }
.auth-orbs-background span:nth-child(8) { color: #E45A84; top: 7%; left: 14%; animation-duration: 141s; animation-delay: -14s; transform-origin: 5vw -4vh; box-shadow: 68vmin 0 8.509233813312264vmin currentColor; }
.auth-orbs-background span:nth-child(9) { color: #E45A84; top: 17%; left: 64%; animation-duration: 50s; animation-delay: -161s; transform-origin: -18vw 21vh; box-shadow: -68vmin 0 9.371319663462678vmin currentColor; }
.auth-orbs-background span:nth-child(10) { color: #FFACAC; top: 77%; left: 3%; animation-duration: 202s; animation-delay: -6s; transform-origin: -21vw -19vh; box-shadow: -68vmin 0 9.493092201004195vmin currentColor; }
.auth-orbs-background span:nth-child(11) { color: #FFACAC; top: 25%; left: 32%; animation-duration: 22s; animation-delay: -195s; transform-origin: 8vw 15vh; box-shadow: -68vmin 0 8.897029788094969vmin currentColor; }
.auth-orbs-background span:nth-child(12) { color: #FFACAC; top: 43%; left: 87%; animation-duration: 40s; animation-delay: -44s; transform-origin: 22vw -24vh; box-shadow: -68vmin 0 9.441629065715603vmin currentColor; }
.auth-orbs-background span:nth-child(13) { color: #583C87; top: 76%; left: 64%; animation-duration: 147s; animation-delay: -103s; transform-origin: -19vw 18vh; box-shadow: -68vmin 0 8.751339374088523vmin currentColor; }
.auth-orbs-background span:nth-child(14) { color: #FFACAC; top: 70%; left: 92%; animation-duration: 38s; animation-delay: -109s; transform-origin: -20vw 25vh; box-shadow: -68vmin 0 8.666124192091663vmin currentColor; }
.auth-orbs-background span:nth-child(15) { color: #583C87; top: 48%; left: 91%; animation-duration: 161s; animation-delay: -123s; transform-origin: -12vw -16vh; box-shadow: -68vmin 0 8.881756323318488vmin currentColor; }
.auth-orbs-background span:nth-child(16) { color: #E45A84; top: 5%; left: 45%; animation-duration: 161s; animation-delay: -122s; transform-origin: 9vw 14vh; box-shadow: 68vmin 0 9.339753359319316vmin currentColor; }
.auth-orbs-background span:nth-child(17) { color: #FFACAC; top: 40%; left: 50%; animation-duration: 175s; animation-delay: -192s; transform-origin: 18vw -12vh; box-shadow: 68vmin 0 8.90071499472807vmin currentColor; }
.auth-orbs-background span:nth-child(18) { color: #583C87; top: 97%; left: 29%; animation-duration: 196s; animation-delay: -169s; transform-origin: 25vw -22vh; box-shadow: 68vmin 0 9.331569570940292vmin currentColor; }
.auth-orbs-background span:nth-child(19) { color: #583C87; top: 89%; left: 43%; animation-duration: 188s; animation-delay: -105s; transform-origin: -6vw 15vh; box-shadow: 68vmin 0 9.004073745104318vmin currentColor; }
.auth-orbs-background span:nth-child(20) { color: #583C87; top: 76%; left: 36%; animation-duration: 157s; animation-delay: -124s; transform-origin: 1vw -2vh; box-shadow: 68vmin 0 9.28334967398562vmin currentColor; }
.auth-orbs-background span:nth-child(21) { color: #FFACAC; top: 38%; left: 62%; animation-duration: 180s; animation-delay: -56s; transform-origin: -18vw 22vh; box-shadow: -68vmin 0 8.502890342966213vmin currentColor; }
.auth-orbs-background span:nth-child(22) { color: #E45A84; top: 34%; left: 52%; animation-duration: 25s; animation-delay: -139s; transform-origin: -22vw -10vh; box-shadow: -68vmin 0 8.750960585632898vmin currentColor; }

.avatar-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.nav-pill {
    border-radius: 0.9rem;
    color: #4b5563;
    font-weight: 500;
    padding: 0.75rem 0.9rem;
}

.nav-pill:hover,
.nav-pill.active {
    background: #f5f3ff;
    color: var(--jt-primary);
}

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

.card-soft-hover {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.card-soft-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--jt-shadow-md);
    border-color: rgba(107, 38, 217, 0.18);
}

.card-gradient {
    background: linear-gradient(135deg, var(--jt-primary), var(--jt-primary-2));
    color: #fff;
    border: 0;
}

.btn-brand {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--jt-primary), var(--jt-primary-2));
}

.btn-brand:hover,
.btn-brand:focus {
    color: #fff;
    opacity: 0.97;
}

.btn-soft {
    border: 1px solid var(--jt-border);
    background: #fff;
    color: var(--jt-text);
}

.soft-box {
    background: var(--jt-surface-soft);
    border-radius: 0.9rem;
}

.surface-muted {
    background: rgba(248, 246, 254, 0.9);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: currentColor;
}

.status-active {
    background: rgba(22, 163, 74, 0.1);
    color: var(--jt-success);
    border-color: rgba(22, 163, 74, 0.14);
}

.status-inactive {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

.status-info,
.status-sent,
.status-delivered {
    background: rgba(37, 99, 235, 0.1);
    color: var(--jt-info);
    border-color: rgba(37, 99, 235, 0.14);
}

.status-draft,
.status-pending {
    background: rgba(217, 119, 6, 0.1);
    color: var(--jt-warning);
    border-color: rgba(217, 119, 6, 0.14);
}

.status-failed {
    background: rgba(220, 38, 38, 0.1);
    color: var(--jt-danger);
    border-color: rgba(220, 38, 38, 0.14);
}

.icon-stroke,
.icon-stroke-lg,
.icon-stroke-xl {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-stroke {
    width: 1rem;
    height: 1rem;
}

.icon-stroke-lg {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-stroke-xl {
    width: 1.5rem;
    height: 1.5rem;
}

.notification-badge {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
}

.table > :not(caption) > * > * {
    padding: 0.9rem 1.1rem;
    border-bottom-color: var(--jt-border);
}

.table thead th {
    background: #f8f6fe;
    color: var(--jt-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.metric-card .display-6 {
    font-size: 2.1rem;
}

.profile-banner {
    background: linear-gradient(135deg, var(--jt-primary), var(--jt-primary-2));
    height: 5rem;
}

.initials-badge {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    border: 4px solid var(--jt-surface);
    background: var(--jt-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--jt-shadow-md);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--jt-primary);
}

/* CSS untuk index.html */
body.public-page {
    --jt-bg: #ffffff;
    --jt-surface: rgba(255, 255, 255, 0.92);
    --jt-text: #2b303b;
    --jt-muted: #6b7280;
    --jt-border: #e5e7eb;
    --jt-accent: #f4effe;
    --jt-accent-text: #6b26d9;
    --jt-primary: #6b26d9;
    --jt-primary-2: #9234ea;
    --jt-shadow-sm:
        0 1px 3px rgba(43, 48, 59, 0.06), 0 1px 2px rgba(43, 48, 59, 0.04);
    --jt-shadow-md: 0 10px 25px rgba(43, 48, 59, 0.08);
    background: var(--jt-bg);
    color: var(--jt-text);
}

body.public-page .site-header {
    background: var(--jt-surface);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--jt-border);
}

body.public-page .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--jt-border);
    border-radius: 999px;
    background: var(--jt-accent);
    color: var(--jt-accent-text);
    font-weight: 600;
    font-size: 0.95rem;
}

body.public-page .text-gradient {
    background: linear-gradient(135deg, var(--jt-primary), var(--jt-primary-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.public-page .btn-brand {
    box-shadow: var(--jt-shadow-md);
}

body.public-page .btn-brand:hover,
body.public-page .btn-brand:focus {
    opacity: 0.96;
}

body.public-page .btn-outline-soft {
    border: 1px solid var(--jt-border);
    background: #fff;
    color: var(--jt-text);
}

body.public-page .card-soft {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

body.public-page .card-soft:hover {
    transform: translateY(-2px);
    border-color: rgba(107, 38, 217, 0.2);
    box-shadow: var(--jt-shadow-md);
}

body.public-page .feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--jt-accent);
    color: var(--jt-accent-text);
}

body.public-page .section-gap {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

body.public-page .hero-section {
    padding-top: 5.5rem;
    padding-bottom: 5rem;
}

body.public-page .footer-line {
    border-top: 1px solid var(--jt-border);
    color: var(--jt-muted);
}

body.public-page .icon-stroke {
    width: 1.2rem;
    height: 1.2rem;
}

body.public-page .icon-stroke-lg {
    width: 1.5rem;
    height: 1.5rem;
}