/* ==========================================================================
   Inventaris Android — Design System
   Font: Inter (Google Fonts)
   Theme: Dark + Accent Indigo/Violet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Liquid Hub — light glass theme (selaras global.css) */
    --and-bg-base: #dbeafe;
    --and-theme-color: #dbeafecc;
    --and-statusbar-tint: rgba(219, 234, 254, 0.8);
    --and-bg-surface: rgba(255, 255, 255, 0.65);
    --and-bg-card: rgba(255, 255, 255, 0.7);
    --and-bg-card-alt: rgba(255, 255, 255, 0.5);
    --and-bg-input: rgba(255, 255, 255, 0.4);
    --and-bg-overlay: rgba(219, 234, 254, 0.85);

    /* Colors — Borders */
    --and-border: rgba(255, 255, 255, 0.45);
    --and-border-focus: rgba(255, 90, 0, 0.45);

    /* Colors — Text */
    --and-text-primary: #0f172a;
    --and-text-secondary: #475569;
    --and-text-muted: #64748b;
    --and-text-inverse: #ffffff;

    /* Font Al-Qur'an (Arab) */
    --and-font-quran: "Amiri Quran", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", "Times New Roman", serif;

    /* Colors — Brand / Accent (primary orange) */
    --and-accent: #ff5a00;
    --and-accent-light: #ff5a00;
    --and-accent-dark: #e04e00;
    --and-accent-glow: rgba(255, 90, 0, 0.28);
    --and-accent-surface: rgba(255, 90, 0, 0.1);

    /* Colors — Semantic */
    --and-success: #10b981;
    --and-warning: #f59e0b;
    --and-danger: #ef4444;
    --and-info: #2563eb;

    /* Colors — AI / Special */
    --and-ai-start: #7c3aed;
    --and-ai-end: #ec4899;
    --and-mcp-start: #0891b2;
    --and-mcp-end: #6366f1;

    /* Status Badge Colors */
    --and-status-dipinjam: rgba(37, 99, 235, 0.12);
    --and-status-dipinjam-text: #2563eb;
    --and-status-telat: rgba(239, 68, 68, 0.12);
    --and-status-telat-text: #dc2626;
    --and-status-kembali: rgba(16, 185, 129, 0.12);
    --and-status-kembali-text: #059669;
    --and-status-parsial: rgba(245, 158, 11, 0.12);
    --and-status-parsial-text: #d97706;

    /* Spacing */
    --and-space-xs: 4px;
    --and-space-sm: 8px;
    --and-space-md: 16px;
    --and-space-lg: 24px;
    --and-space-xl: 32px;

    /* Lebar konten — selaras pengaturan-pwa (landscape tidak melar) */
    --and-content-max: 640px;

    /* Border Radius */
    --and-radius-sm: 8px;
    --and-radius-md: 12px;
    --and-radius-lg: 16px;
    --and-radius-xl: 24px;
    --and-radius-2xl: 44px;
    --and-radius-pill: 48px;
    --and-radius-full: 9999px;

    /* Shadows — soft elevation (border + surface first) */
    --and-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --and-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.05);
    --and-shadow-lg: 0 10px 28px -12px rgba(15, 23, 42, 0.08);
    --and-shadow-glass: 0 8px 24px -12px rgba(15, 23, 42, 0.06);
    --and-shadow-nav: 0 -1px 0 rgba(15, 23, 42, 0.04), 0 -4px 16px -8px rgba(15, 23, 42, 0.06);
    --and-shadow-accent: 0 6px 16px -6px rgba(255, 90, 0, 0.18);
    --and-shadow-ai: 0 2px 12px rgba(124, 58, 237, 0.12);
    --and-elev-0: none;
    --and-elev-1: 0 1px 2px rgba(15, 23, 42, 0.04);
    --and-elev-2: 0 2px 8px rgba(15, 23, 42, 0.05);
    --and-elev-nav:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 10px 40px -8px rgba(255, 174, 110, 0.32),
        0 4px 24px -6px rgba(42, 28, 20, 0.2);
    --and-elev-fab: 0 2px 8px rgba(255, 90, 0, 0.22), 0 0 0 2px rgba(61, 43, 34, 0.55);
    --and-nav-ease: 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --and-nav-ease-out: 220ms cubic-bezier(0.22, 1, 0.36, 1);

    /* Transitions */
    --and-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --and-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Bottom Nav — row ikon + FAB mengambang */
    --and-nav-height: 36px;
    --and-nav-float-gap: 0px;
    --and-nav-row: 44px;
    --and-nav-shell-pt: 10px;
    --and-nav-shell-pb: 8px;
    --and-nav-fab-size: 48px;
    --and-nav-fab-rise: 18px;
    --and-nav-total: calc(var(--and-nav-shell-pt) + var(--and-nav-row) + var(--and-nav-shell-pb) + var(--and-nav-fab-rise) + var(--and-safe-bottom));
    --and-top-nav-row: 40px;
    --and-top-nav-shell-pt: 4px;
    --and-top-nav-shell-pb: 6px;
    --and-top-nav-total: calc(var(--and-safe-top) + var(--and-top-nav-shell-pt) + var(--and-top-nav-row) + var(--and-top-nav-shell-pb));
    --and-nav-shell-bg: rgba(255, 255, 255, 0.72);
    --and-nav-shell-blur: 16px;
    --and-nav-shell-saturate: 1.2;
    --and-nav-shell-border: rgba(15, 23, 42, 0.06);
    --and-nav-shell-fallback-bg: rgba(255, 255, 255, 0.94);
    --and-nav-chip-bg: rgba(255, 255, 255, 0.72);
    --and-nav-chip-blur: 10px;
    --and-nav-chip-border: rgba(194, 65, 12, 0.34);
    --and-nav-chip-active-bg: #fff7ed;
    --and-nav-chip-active-border: rgba(194, 65, 12, 0.46);
    --and-nav-icon: #c2410c;
    --and-nav-icon-active: #9a3412;
    --and-top-nav-icon: var(--and-nav-icon);
    --and-top-nav-chip-bg: var(--and-nav-chip-bg);
    --and-top-nav-chip-border: var(--and-nav-chip-border);
    --and-page-inset-top: var(--and-safe-top);
    --and-buku-nav-row: 52px;
    --and-buku-nav-total: calc(8px + var(--and-buku-nav-row) + 8px + var(--and-safe-bottom));

    /* Nav chrome — warm brown, soft surface (sidebar + bottom bar) */
    --and-nav-brown-0: #8f6b52;
    --and-nav-brown-1: #7d5c45;
    --and-nav-brown-2: #6b4e3b;
    --and-nav-brown-glow: rgba(255, 174, 110, 0.12);
    --and-nav-brown-glow-soft: rgba(255, 196, 140, 0.08);
    --and-nav-brown-border: rgba(255, 236, 210, 0.16);
    --and-nav-brown-text: rgba(255, 251, 245, 0.96);
    --and-nav-brown-text-muted: rgba(254, 228, 196, 0.72);
    --and-nav-brown-icon: rgba(254, 228, 196, 0.78);
    --and-nav-brown-surface: rgba(255, 255, 255, 0.08);
    --and-nav-brown-gradient: linear-gradient(180deg, #8f6b52 0%, #7d5c45 48%, #6b4e3b 100%);
    --and-bottom-nav-shell-bg: var(--and-nav-shell-bg);
    --and-bottom-nav-shell-blur: var(--and-nav-shell-blur);
    --and-bottom-nav-shell-saturate: var(--and-nav-shell-saturate);
    --and-bottom-nav-shell-border: var(--and-nav-shell-border);
    --and-bottom-nav-shell-shadow: var(--and-elev-1);
    --and-bottom-nav-shell-fallback-bg: var(--and-nav-shell-fallback-bg);
    --and-bottom-nav-chip-bg: var(--and-nav-chip-bg);
    --and-bottom-nav-chip-blur: var(--and-nav-chip-blur);
    --and-bottom-nav-chip-border: var(--and-nav-chip-border);
    --and-bottom-nav-chip-active-bg: var(--and-nav-chip-active-bg);
    --and-bottom-nav-chip-active-border: var(--and-nav-chip-active-border);
    --and-bottom-nav-icon: var(--and-nav-icon);
    --and-bottom-nav-icon-active: var(--and-nav-icon-active);

    /* Al-Qur'an reading nav — transparan 30% */
    --and-qrn-reading-nav-shell-bg: rgba(255, 255, 255, 0.3);
    --and-qrn-reading-nav-shell-border: rgba(255, 255, 255, 0.22);
    --and-qrn-reading-nav-shell-tint-top: rgba(255, 255, 255, 0.34);
    --and-qrn-reading-nav-shell-tint-bottom: rgba(255, 255, 255, 0.22);
    --and-qrn-reading-nav-shell-fallback-bg: rgba(255, 255, 255, 0.92);
    --and-qrn-reading-nav-chip-bg: rgba(255, 255, 255, 0.26);
    --and-qrn-reading-nav-chip-border: rgba(255, 255, 255, 0.2);
    --and-qrn-reading-nav-chip-active-bg: rgba(255, 247, 237, 0.42);
    --and-qrn-reading-nav-chip-active-border: rgba(194, 65, 12, 0.28);

    /* Al-Qur'an drawer menu — solid agar stabil di mobile (hindari blur bertumpuk) */
    --and-qrn-drawer-panel-bg: rgba(255, 252, 245, 0.97);
    --and-qrn-drawer-panel-blur: 0px;
    --and-qrn-drawer-panel-border: rgba(93, 78, 58, 0.12);
    --and-qrn-drawer-head-bg: rgba(255, 252, 245, 0.98);
    --and-qrn-drawer-item-bg: #FFFFFF;
    --and-qrn-drawer-item-border: rgba(93, 78, 58, 0.1);
    --and-qrn-reading-nav-icon: #c2410c;
    --and-qrn-reading-nav-icon-active: #9a3412;
    --and-qrn-reading-nav-label: rgba(71, 85, 105, 0.28);
    --and-qrn-reading-nav-label-active: rgba(154, 52, 18, 0.58);
    --and-nav-brown-glow-radial:
        radial-gradient(circle at 50% 0%, rgba(255, 196, 140, 0.1) 0%, transparent 55%);
    --and-nav-brown-mesh: none;
    --and-nav-brown-mesh-drawer: none;
    --and-nav-active: #ff8a1a;
    --and-nav-sidebar-bg: #35261f;
    --and-nav-sidebar-border: #2a1f19;
    --and-nav-text: #f7efe6;
    --and-nav-text-muted: #b59a82;
    --and-nav-icon-bg: #4a382e;
    --and-nav-icon-fg: #f0dfc8;
    --and-nav-group-bg: #2f221c;
    --and-nav-group-open-bg: #281c17;
    --and-nav-sub-text: #dcc9ba;
    --and-nav-sub-icon: #cdb5a4;
    --and-nav-nested-bg: #221914;
    --and-nav-nested-text: #c4b0a0;
    --and-nav-parent-bg: #4a3428;
    --and-nav-parent-fg: #ffb347;
    --and-nav-active-bg: #ff8a1a;
    --and-nav-active-fg: #ffffff;
    --and-nav-active-icon-bg: #ffffff;
    --and-nav-active-icon-fg: #c2410c;

    /* Safe area (notch) */
    --and-safe-top: env(safe-area-inset-top, 0px);
    --and-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: auto;
    background-color: var(--and-bg-base);
    color-scheme: light;
}

/* Sembunyikan scrollbar — scroll tetap berfungsi */
html,
body,
.and-body,
.and-body * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.and-body::-webkit-scrollbar,
.and-body *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

body.and-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--and-bg-base);
    color: var(--and-text-primary);
    min-height: 100svh;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* Status bar chrome — transparan 80%, tanpa border pemisah */
#and-spa-app::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--and-safe-top);
    background: var(--and-statusbar-tint);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9998;
    pointer-events: none;
    border: 0;
    box-shadow: none;
}

/* Ambient gradient blobs */
body.and-body::before,
body.and-body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
}

body.and-body::before {
    top: -10%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: rgba(96, 165, 250, 0.32);
    animation: and-liquid-pulse 8s ease-in-out infinite;
}

body.and-body::after {
    bottom: -10%;
    right: -10%;
    width: 70%;
    height: 70%;
    background: rgba(99, 102, 241, 0.18);
}

@keyframes and-liquid-pulse {

    0%,
    100% {
        opacity: 0.85;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
textarea,
select {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}

ul,
ol {
    list-style: none;
}

/* --------------------------------------------------------------------------
   3. Layout Shell
   -------------------------------------------------------------------------- */
.and-layout {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    width: 100%;
    max-width: var(--and-content-max);
    margin-inline: auto;
    padding-top: var(--and-page-inset-top);
    padding-bottom: calc(var(--and-nav-total) + 8px);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.and-layout--ambient:not(.and-layout--quran)::before {
    content: '';
    position: fixed;
    top: 20%;
    right: 5%;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: rgba(192, 132, 252, 0.16);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

/* Al-Qur'an — tanpa ambient glow ungu */
.and-layout--quran.and-layout--ambient::before,
.and-layout--quran.and-layout--ambient::after,
body.and-body--quran-surat .and-layout--ambient::before,
body.and-body--quran-surat .and-layout--ambient::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    filter: none !important;
    box-shadow: none !important;
    content: none !important;
    pointer-events: none !important;
}

.and-page-header {
    position: sticky;
    top: calc(var(--and-page-inset-top) + 8px);
    z-index: 50;
    margin: 8px var(--and-space-md) 0;
    min-height: 56px;
    padding: 10px var(--and-space-md);
    display: flex;
    align-items: center;
    gap: var(--and-space-sm);
    border-radius: var(--and-radius-2xl);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--and-shadow-glass);
    outline: 1px solid rgba(255, 255, 255, 0.4);
}

.and-page-header--dashboard {
    min-height: 72px;
    padding: 12px 16px;
    gap: 12px;
}

.and-page-header__search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.and-page-header__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.and-page-header__search-input {
    width: 100%;
    padding: 11px 16px 11px 44px;
    border-radius: var(--and-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.4);
    color: var(--and-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    outline: none;
    transition: background var(--and-transition), border-color var(--and-transition), box-shadow var(--and-transition);
}

.and-page-header__search-input::placeholder {
    color: #94a3b8;
}

.and-page-header__search-input:focus {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}

.and-page-header__search:focus-within .and-page-header__search-icon {
    color: var(--and-accent);
}

.and-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.and-page-header__title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--and-text-primary);
    flex: 1;
    letter-spacing: -0.02em;
}

.and-page-header__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--and-radius-full);
    color: #64748b;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--and-shadow-sm);
    outline: 1px solid rgba(255, 255, 255, 0.3);
    transition: background var(--and-transition), color var(--and-transition), transform var(--and-transition);
}

.and-page-header__action:hover,
.and-page-header__action:focus-visible {
    background: rgba(255, 255, 255, 0.85);
    color: var(--and-accent);
    outline: none;
    transform: scale(1.04);
}

.and-page-header__action:active {
    transform: scale(0.96);
}

/* Home notifikasi live slider */
.and-home-notif-slider {
    margin-bottom: 20px;
    padding: 18px 20px 16px;
    border-radius: 2.5rem;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.52) 0%, rgba(30, 58, 95, 0.16) 52%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #0f172a;
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.55);
    outline: 1px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: box-shadow .25s ease, border-color .25s ease;
    -webkit-tap-highlight-color: transparent;
}

.and-home-notif-slider--unread {
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.12), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}

.and-home-notif-slider--pulse {
    animation: and-home-notif-pulse .6s ease 2;
}

@keyframes and-home-notif-pulse {
    0%, 100% { box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.12); }
    50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18), 0 8px 24px -12px rgba(15, 23, 42, 0.12); }
}

.and-home-notif-slider__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.and-home-notif-slider .and-live-badge--notif {
    background: rgba(255, 255, 255, 0.78);
    color: #b45309;
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.16);
}

.and-home-notif-slider .and-live-badge--notif .and-live-badge__dot {
    background: #eab308;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.28);
}

.and-home-notif-slider .and-live-badge__bell {
    flex-shrink: 0;
    color: #ca8a04;
    stroke: #ca8a04;
}

.and-home-notif-slider__time {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.and-home-notif-slider__body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    transition: opacity .3s ease;
}

.and-home-notif-slider__body.is-fading {
    opacity: 0;
}

.and-home-notif-slider__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
    color: #ca8a04;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.22);
}

.and-home-notif-slider__icon--orange,
.and-home-notif-slider__icon--blue,
.and-home-notif-slider__icon--green,
.and-home-notif-slider__icon--rose,
.and-home-notif-slider__icon--amber,
.and-home-notif-slider__icon--indigo,
.and-home-notif-slider__icon--muted,
.and-home-notif-slider__icon--gold {
    color: #ca8a04;
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.22);
}

.and-home-notif-slider__icon--gold svg,
.and-home-notif-slider__icon svg {
    color: #ca8a04;
    stroke: #ca8a04;
}

.and-home-notif-slider__text {
    min-width: 0;
    flex: 1;
}

.and-home-notif-slider__title {
    margin: 0 0 4px;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.and-home-notif-slider__message {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #475569;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-home-notif-slider__count {
    flex-shrink: 0;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 5px;
    border-radius: var(--and-radius-full);
    background: rgba(255, 255, 255, 0.78);
    color: #b45309;
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.24);
    font-size: 0.625rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.and-home-notif-slider__progress-track {
    height: 4px;
    border-radius: var(--and-radius-full);
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
    margin-bottom: 10px;
}

.and-home-notif-slider__progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width .35s ease;
}

.and-home-notif-slider__progress-bar--done {
    background: linear-gradient(90deg, #34d399, #10b981);
}

.and-home-notif-slider__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(255, 90, 0, 0.22);
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.1);
    color: #c2410c;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.and-home-notif-slider__btn:active {
    transform: scale(0.98);
}

/* Liquid Hub dashboard layout */
.and-main--dashboard {
    padding-top: 12px;
    padding-bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
}

.and-dash-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.and-dash-burger {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--and-radius-full);
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #334155;
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.and-dash-burger:active {
    transform: scale(0.96);
}

.and-dash-burger[aria-expanded="true"] {
    color: var(--and-accent);
    border-color: rgba(255, 90, 0, 0.25);
    background: rgba(255, 90, 0, 0.08);
}

.and-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
}

.and-nav-drawer[hidden] {
    display: none !important;
}

.and-nav-drawer:not([hidden]) {
    display: block;
    visibility: visible;
}

.and-nav-drawer.is-open {
    pointer-events: auto;
}

.and-nav-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    opacity: 0;
    transition: opacity var(--and-nav-ease-out);
    will-change: opacity;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.and-nav-drawer.is-open .and-nav-drawer__backdrop {
    opacity: 1;
}

.and-nav-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(88vw, 300px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--and-nav-sidebar-bg);
    border-radius: 0 20px 20px 0;
    border-right: 1px solid var(--and-nav-sidebar-border);
    box-shadow: 4px 0 24px -12px rgba(15, 23, 42, 0.18);
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

.and-nav-drawer__panel::before,
.and-nav-drawer__panel::after {
    display: none;
}

.and-nav-drawer.is-open .and-nav-drawer__panel {
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {

    .and-nav-drawer__backdrop,
    .and-nav-drawer__panel,
    .and-nav-drawer__indicator,
    .and-nav-drawer__link,
    .and-nav-drawer__link-icon,
    .and-nav-drawer__link-label {
        transition: none !important;
    }
}

.and-nav-drawer__brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(var(--and-safe-top) + 16px) 16px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--and-nav-sidebar-border);
}

.and-nav-drawer__brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.and-nav-drawer__brand-logo {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
    box-shadow: none;
}

.and-nav-drawer__brand-name {
    flex: 1;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--and-nav-text);
    letter-spacing: -0.025em;
}

.and-nav-drawer__close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--and-nav-icon-bg);
    border: 1px solid var(--and-nav-sidebar-border);
    color: var(--and-nav-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    transition: background var(--and-nav-ease), color var(--and-nav-ease), transform var(--and-nav-ease);
}

.and-nav-drawer__close:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.1);
}

.and-nav-drawer__nav {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px 16px;
    -webkit-overflow-scrolling: touch;
}

.and-nav-drawer__indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 10px;
    background: var(--and-nav-active-bg);
    border: none;
    box-shadow: none;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--and-nav-ease-out),
        width var(--and-nav-ease-out),
        height var(--and-nav-ease-out),
        opacity var(--and-nav-ease);
    will-change: transform, width, height;
}

.and-nav-drawer__indicator.is-initial {
    transition: none !important;
}

.and-nav-drawer__section {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}

.and-nav-drawer__section:last-child {
    margin-bottom: 6px;
}

.and-nav-drawer__section-title {
    margin: 0 0 8px;
    padding: 0 8px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--and-nav-text-muted);
    opacity: 0.85;
}

.and-nav-drawer__groups {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.and-nav-drawer__group-panel[hidden],
.and-nav-drawer__subgroup-panel[hidden] {
    display: none !important;
}

/* ── Grup menu (opaque — cegah indicator tembus ke submenu) ── */
.and-nav-drawer__group {
    position: relative;
    z-index: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--and-nav-group-bg);
    border: 1px solid var(--and-nav-sidebar-border);
    isolation: isolate;
}

.and-nav-drawer__group.is-open {
    background: var(--and-nav-group-bg);
    border-color: var(--and-nav-sidebar-border);
}

.and-nav-drawer__group:has(.and-nav-drawer__link.is-active),
.and-nav-drawer__group.has-active {
    border-color: rgba(255, 138, 26, 0.4);
}

.and-nav-drawer__group-toggle {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    min-height: 44px;
    border: none;
    border-radius: 0;
    background: var(--and-nav-group-bg);
    color: var(--and-nav-text);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--and-nav-ease), color var(--and-nav-ease);
}

.and-nav-drawer__group-toggle:active {
    transform: scale(0.99);
}

.and-nav-drawer__group.is-open > .and-nav-drawer__group-toggle {
    background: var(--and-nav-group-open-bg);
    color: var(--and-nav-text);
}

.and-nav-drawer__group:has(.and-nav-drawer__link.is-active) > .and-nav-drawer__group-toggle,
.and-nav-drawer__group.has-active > .and-nav-drawer__group-toggle {
    color: var(--and-nav-parent-fg);
    background: var(--and-nav-parent-bg);
}

.and-nav-drawer__group-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--and-nav-icon-fg);
    background: var(--and-nav-icon-bg);
    border: none;
    transition: color var(--and-nav-ease), background var(--and-nav-ease);
}

.and-nav-drawer__group.is-open .and-nav-drawer__group-icon {
    background: var(--and-nav-sidebar-border);
    color: var(--and-nav-text);
}

.and-nav-drawer__group:has(.and-nav-drawer__link.is-active) .and-nav-drawer__group-icon,
.and-nav-drawer__group.has-active .and-nav-drawer__group-icon {
    color: var(--and-nav-active);
    background: var(--and-nav-active-icon-bg);
}

.and-nav-drawer__group-label {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: inherit;
    line-height: 1.25;
}

.and-nav-drawer__group-chevron {
    flex-shrink: 0;
    color: var(--and-nav-text-muted);
    display: flex;
    transition: transform 0.2s ease, color 0.15s ease;
}

.and-nav-drawer__group.is-open .and-nav-drawer__group-chevron {
    transform: rotate(180deg);
    color: var(--and-nav-text);
}

.and-nav-drawer__group:has(.and-nav-drawer__link.is-active) .and-nav-drawer__group-chevron,
.and-nav-drawer__group.has-active .and-nav-drawer__group-chevron {
    color: var(--and-nav-parent-fg);
}

.and-nav-drawer__group-panel {
    position: relative;
    z-index: 1;
    padding: 4px 6px 8px;
    background: var(--and-nav-group-open-bg);
    border-top: 1px solid var(--and-nav-sidebar-border);
}

/* ── Sub-menu item (solid, redup) ── */
.and-nav-drawer__links--sub {
    gap: 3px;
    padding-top: 2px;
}

.and-nav-drawer__links--sub .and-nav-drawer__link {
    padding: 7px 9px 7px 12px;
    gap: 9px;
    border-radius: 8px;
    background: var(--and-nav-group-open-bg);
}

.and-nav-drawer__links--sub .and-nav-drawer__link.is-active,
.and-nav-drawer__links--sub .and-nav-drawer__link.is-navigating {
    background: var(--and-nav-active-bg);
}

.and-nav-drawer__links--sub .and-nav-drawer__link:not(.is-active) .and-nav-drawer__link-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: transparent;
    border: none;
    color: var(--and-nav-sub-icon);
    box-shadow: none;
}

.and-nav-drawer__links--sub .and-nav-drawer__link:not(.is-active) .and-nav-drawer__link-label {
    color: var(--and-nav-sub-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.and-nav-drawer__links--top {
    margin-bottom: 6px;
}

/* ── Subgrup nested (opaque — cegah indicator tembus) ── */
.and-nav-drawer__subgroup {
    position: relative;
    z-index: 1;
    margin: 4px 0;
    border-radius: 10px;
    background: var(--and-nav-nested-bg);
    border: 1px solid var(--and-nav-sidebar-border);
    overflow: hidden;
    isolation: isolate;
}

.and-nav-drawer__subgroup.is-open {
    border-color: var(--and-nav-sidebar-border);
}

.and-nav-drawer__subgroup:has(.and-nav-drawer__link.is-active),
.and-nav-drawer__subgroup.has-active {
    border-color: rgba(255, 138, 26, 0.35);
}

.and-nav-drawer__subgroup-toggle {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 10px;
    border: none;
    border-radius: 0;
    background: var(--and-nav-nested-bg);
    color: var(--and-nav-sub-text);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--and-nav-ease), color var(--and-nav-ease);
}

.and-nav-drawer__subgroup-toggle:active {
    background: var(--and-nav-sidebar-border);
}

.and-nav-drawer__subgroup-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--and-nav-sub-icon);
    background: var(--and-nav-icon-bg);
    border: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.and-nav-drawer__subgroup:has(.and-nav-drawer__link.is-active) .and-nav-drawer__subgroup-icon,
.and-nav-drawer__subgroup.has-active .and-nav-drawer__subgroup-icon {
    color: var(--and-nav-active);
    background: var(--and-nav-active-icon-bg);
}

.and-nav-drawer__subgroup-label {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: inherit;
    line-height: 1.25;
}

.and-nav-drawer__subgroup-chevron {
    flex-shrink: 0;
    color: var(--and-nav-text-muted);
    display: flex;
    transition: transform 0.2s ease, color 0.15s ease;
}

.and-nav-drawer__subgroup.is-open .and-nav-drawer__subgroup-chevron {
    transform: rotate(180deg);
    color: var(--and-nav-sub-text);
}

.and-nav-drawer__subgroup:has(.and-nav-drawer__link.is-active) .and-nav-drawer__subgroup-toggle,
.and-nav-drawer__subgroup.has-active .and-nav-drawer__subgroup-toggle,
.and-nav-drawer__subgroup:has(.and-nav-drawer__link.is-active) .and-nav-drawer__subgroup-label,
.and-nav-drawer__subgroup.has-active .and-nav-drawer__subgroup-label {
    color: var(--and-nav-parent-fg);
    background: var(--and-nav-parent-bg);
}

.and-nav-drawer__subgroup:has(.and-nav-drawer__link.is-active) .and-nav-drawer__subgroup-chevron,
.and-nav-drawer__subgroup.has-active .and-nav-drawer__subgroup-chevron {
    color: var(--and-nav-parent-fg);
}

.and-nav-drawer__subgroup-panel {
    position: relative;
    z-index: 1;
    padding: 3px 6px 6px 8px;
    margin: 0 0 0 8px;
    border-left: 2px solid rgba(255, 138, 26, 0.45);
    background: var(--and-nav-nested-bg);
}

.and-nav-drawer__links--nested {
    gap: 2px;
    padding-top: 2px;
}

.and-nav-drawer__links--nested .and-nav-drawer__link {
    padding: 6px 8px 6px 10px;
    gap: 8px;
    border-radius: 7px;
    background: var(--and-nav-nested-bg);
}

.and-nav-drawer__links--nested .and-nav-drawer__link.is-active,
.and-nav-drawer__links--nested .and-nav-drawer__link.is-navigating {
    background: var(--and-nav-active-bg);
}

.and-nav-drawer__links--nested .and-nav-drawer__link:not(.is-active) .and-nav-drawer__link-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: transparent;
    border: none;
    color: var(--and-nav-nested-text);
    box-shadow: none;
}

.and-nav-drawer__links--nested .and-nav-drawer__link:not(.is-active) .and-nav-drawer__link-label {
    color: var(--and-nav-nested-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.and-nav-drawer__subgroup.is-open > .and-nav-drawer__subgroup-toggle {
    background: var(--and-nav-sidebar-border);
    color: var(--and-nav-sub-text);
}

/* ── Link umum ── */
.and-nav-drawer__links {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.and-nav-drawer__link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    min-height: 44px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--and-nav-ease), transform 0.1s ease, background var(--and-nav-ease);
}

.and-nav-drawer__link.is-pressing {
    transform: scale(0.985);
}

.and-nav-drawer__link.is-pressing .and-nav-drawer__link-icon {
    transform: scale(0.94);
    transition-duration: 0.1s;
}

/* Aktif — solid opaque (menutupi indicator di belakang) */
.and-nav-drawer__link.is-navigating,
.and-nav-drawer__link.is-active {
    background: var(--and-nav-active-bg);
    z-index: 2;
}

.and-nav-drawer__link.is-navigating .and-nav-drawer__link-icon,
.and-nav-drawer__link.is-active .and-nav-drawer__link-icon {
    background: var(--and-nav-active-icon-bg);
    color: var(--and-nav-active-icon-fg);
    border: none;
    box-shadow: none;
}

.and-nav-drawer__link.is-navigating .and-nav-drawer__link-label,
.and-nav-drawer__link.is-active .and-nav-drawer__link-label {
    color: var(--and-nav-active-fg);
    font-weight: 700;
    text-shadow: none;
}

.and-nav-drawer__link-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--and-nav-icon-fg);
    background: var(--and-nav-icon-bg);
    border: none;
    box-shadow: none;
    transition:
        transform var(--and-nav-ease),
        color var(--and-nav-ease),
        background var(--and-nav-ease);
}

.and-nav-drawer__link-label {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--and-nav-text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--and-nav-ease);
}

.and-nav-drawer__badge {
    flex-shrink: 0;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #ff5a00;
    color: #fff;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
    box-shadow: none;
}

.and-nav-drawer__badge[hidden] {
    display: none !important;
}

.and-nav-drawer__loading {
    margin: 0;
    padding: 24px 12px;
    font-size: 0.8125rem;
    color: var(--and-nav-brown-text-muted);
    text-align: center;
}

.and-nav-drawer__profile {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 10px 12px calc(var(--and-safe-bottom) + 12px);
    background: #2a1f19;
    border-top: 1px solid var(--and-nav-sidebar-border);
    box-shadow: none;
}

.and-nav-drawer__profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--and-nav-group-bg);
    border: 1px solid var(--and-nav-sidebar-border);
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--and-nav-ease);
}

.and-nav-drawer__profile-card:active {
    background: var(--and-nav-group-open-bg);
}

.and-nav-drawer__avatar-btn {
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.and-nav-drawer__avatar-btn:active .and-nav-drawer__avatar {
    transform: scale(0.94);
}

.and-nav-drawer__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--and-nav-icon-bg);
    color: var(--and-nav-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform 0.15s ease;
    box-shadow: none;
}

.and-nav-drawer__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-nav-drawer__profile-text {
    flex: 1;
    min-width: 0;
}

.and-nav-drawer__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-nav-drawer__role {
    margin: 2px 0 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--and-nav-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-nav-drawer__logout {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--and-nav-text-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid var(--and-nav-sidebar-border);
    background: var(--and-nav-icon-bg);
    transition: background 0.15s ease, color 0.15s ease;
}

.and-nav-drawer__logout:active {
    background: var(--and-nav-group-open-bg);
    border-color: var(--and-nav-sidebar-border);
    color: var(--and-nav-text);
}

body.and-nav-drawer-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

/* Desktop / tablet landscape — sidebar persisten, tanpa bottom bar */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    :root {
        --and-sidebar-width: 264px;
    }

    body.and-body--desktop-nav {
        overflow: hidden;
        height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        padding-right: 0;
    }

    body.and-body--desktop-nav.and-nav-drawer-open {
        overflow: hidden;
        padding-right: 0;
    }

    body.and-body--desktop-nav #and-spa-app {
        margin-left: var(--and-sidebar-width);
        width: calc(100% - var(--and-sidebar-width));
        height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    body.and-body--desktop-nav .and-bottom-nav,
    body.and-body--desktop-nav #and-spa-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.and-body--desktop-nav .and-dash-burger,
    body.and-body--desktop-nav #andPageBurger,
    body.and-body--desktop-nav #andHomeHeroBurger,
    body.and-body--desktop-nav .and-home-hero__burger,
    body.and-body--desktop-nav #andTopBurger {
        display: none !important;
    }

    body.and-body--desktop-nav .and-layout {
        padding-bottom: calc(var(--and-safe-bottom) + 16px);
    }

    body.and-body--desktop-nav .and-main--dashboard {
        padding-bottom: calc(var(--and-safe-bottom) + 24px);
        padding-top: calc(var(--and-page-inset-top) + 8px);
    }

    body.and-body--desktop-nav .and-nav-drawer,
    .and-nav-drawer.and-nav-drawer--pinned {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: var(--and-sidebar-width);
        height: 100dvh !important;
        max-height: 100dvh;
        z-index: 200;
        pointer-events: auto;
        visibility: visible;
        display: block;
        transform: none !important;
        will-change: auto;
        inset: 0 auto 0 0;
    }

    body.and-body--desktop-nav .and-nav-drawer[hidden],
    .and-nav-drawer.and-nav-drawer--pinned[hidden] {
        display: block !important;
    }

    body.and-body--desktop-nav .and-nav-drawer__backdrop,
    .and-nav-drawer.and-nav-drawer--pinned .and-nav-drawer__backdrop {
        display: none;
    }

    body.and-body--desktop-nav .and-nav-drawer__close,
    .and-nav-drawer.and-nav-drawer--pinned .and-nav-drawer__close {
        display: none;
    }

    body.and-body--desktop-nav .and-nav-drawer__panel,
    .and-nav-drawer.and-nav-drawer--pinned .and-nav-drawer__panel {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        transform: none !important;
        transition: none !important;
        will-change: auto;
        box-shadow: none;
        border-right: 1px solid var(--and-nav-sidebar-border);
    }

    body.and-body--desktop-nav .and-nav-drawer.is-open .and-nav-drawer__panel,
    .and-nav-drawer.and-nav-drawer--pinned .and-nav-drawer__panel {
        transform: none !important;
    }

    /* Top bar desktop: jangan hide saat scroll */
    body.and-body--desktop-nav #and-spa-topbar.and-top-nav,
    body.and-body--desktop-nav .and-top-nav {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: none;
    }

    body.and-body--desktop-nav .and-top-nav.is-scroll-hidden {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: none;
    }

    body.and-body--desktop-nav .and-top-nav__shell {
        pointer-events: auto;
    }

    body.and-body--desktop-nav #and-spa-topbar {
        left: var(--and-sidebar-width);
        width: calc(100% - var(--and-sidebar-width));
        max-width: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .and-nav-drawer__link:not(.is-active):hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .and-nav-drawer__group-toggle:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .and-nav-drawer__close:hover,
        .and-nav-drawer__logout:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--and-nav-text);
        }

        .and-top-nav__item:hover .and-top-nav__icon--chip,
        .and-top-nav__item:hover .and-top-nav__icon--fab {
            background: #fff7ed;
            border-color: rgba(194, 65, 12, 0.4);
        }

        .and-bottom-nav__item:not(.and-bottom-nav__item--center):not(.is-active):hover .and-bottom-nav__icon {
            background: var(--and-nav-chip-active-bg);
            border-color: var(--and-nav-chip-active-border);
        }
    }
}

.and-dash-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.and-dash-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pencarian dengan AI smart search — ikon orange */
.and-dash-search--smart .and-dash-search__icon {
    color: #ff5a00;
}

.and-dash-search--smart .and-dash-search__input:focus {
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}

/* Voice search — field shell + mic slot */
.and-dash-search--has-voice {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.and-dash-search--has-voice .and-dash-search__field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    border-radius: var(--and-radius-full);
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    box-shadow: var(--and-elev-1);
    overflow: hidden;
    transition: border-color var(--and-nav-ease), box-shadow var(--and-nav-ease);
}

.and-dash-search--has-voice .and-dash-search__field.is-voice-active {
    border-color: rgba(22, 163, 74, 0.45);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1), 0 4px 16px -4px rgba(15, 23, 42, 0.08);
}

.and-dash-search--has-voice .and-dash-search__icon {
    position: static;
    transform: none;
    flex-shrink: 0;
    margin-left: 14px;
    margin-right: 2px;
}

.and-dash-search--has-voice .and-dash-search__search-spinner {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.and-dash-search--has-voice .and-dash-search__input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 12px 10px 12px 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.and-dash-search--has-voice .and-dash-search__input:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

.and-voice-search__slot {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 40px;
    margin-right: 4px;
}

.and-voice-search__slot::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(15, 23, 42, 0.08);
}

.and-voice-search__ripples {
    position: absolute;
    inset: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.and-voice-search__ripples span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(22, 163, 74, 0.4);
    animation: and-voice-ripple 1.4s ease-out infinite;
}

.and-voice-search__ripples span:nth-child(2) { animation-delay: 0.45s; }

.and-voice-search__slot.is-active .and-voice-search__ripples {
    opacity: 1;
}

.and-voice-search__btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 90, 0, 0.1);
    color: #ff5a00;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.and-voice-search__btn:active {
    transform: scale(0.92);
}

.and-voice-search__btn .and-voice-search__icon--stop {
    display: none;
}

.and-voice-search__btn.is-active {
    background: #16a34a;
    color: #fff;
}

.and-voice-search__btn.is-active .and-voice-search__icon--mic {
    display: none;
}

.and-voice-search__btn.is-active .and-voice-search__icon--stop {
    display: block;
}

.and-voice-search__strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 12px;
    border-radius: var(--and-radius-full);
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.09) 0%, rgba(22, 163, 74, 0.04) 100%);
    border: 1px solid rgba(22, 163, 74, 0.14);
    font-size: 0.75rem;
    font-weight: 600;
    color: #15803d;
    animation: and-voice-fade-in 0.22s ease;
}

.and-voice-search__strip.is-error {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%);
    border-color: rgba(220, 38, 38, 0.18);
    color: #b91c1c;
}

.and-voice-search__strip.is-error .and-voice-search__dot {
    background: #dc2626;
    animation: none;
}

.and-voice-search__strip[hidden] {
    display: none !important;
}

.and-voice-search__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    animation: and-voice-pulse-dot 1.1s ease-in-out infinite;
}

.and-voice-search__strip-text {
    line-height: 1.3;
}

@keyframes and-voice-ripple {
    0% { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(1.35); opacity: 0; }
}

@keyframes and-voice-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.82); }
}

@keyframes and-voice-fade-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .and-voice-search__ripples span,
    .and-voice-search__dot,
    .and-voice-search__strip,
    .and-restock-search-panel.is-open {
        animation: none !important;
    }
}

.and-barang-top:has(.and-dash-search.is-voice-active) {
    align-items: flex-start;
}

.and-dash-search__input {
    width: 100%;
    padding: 14px 18px 14px 46px;
    border-radius: var(--and-radius-full);
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: var(--and-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    outline: none;
    box-shadow: var(--and-elev-1);
}

.and-dash-search--ai .and-dash-search__shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    border-radius: var(--and-radius-full);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, #ff8a3d 0%, #ff5a00 100%);
    box-shadow: 0 2px 10px -2px rgba(255, 90, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition:
        box-shadow var(--and-nav-ease-out),
        border-color var(--and-nav-ease-out),
        transform var(--and-nav-ease);
}

.and-dash-search--ai .and-dash-search__input {
    flex: 1;
    min-width: 0;
    padding: 14px 8px 14px 18px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.and-dash-search__input::placeholder {
    color: #94a3b8;
}

.and-dash-search--ai .and-dash-search__input::placeholder {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
}

.and-dash-search__input:focus {
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1);
}

.and-dash-search--ai .and-dash-search__input:focus {
    outline: none;
    box-shadow: none;
}

.and-dash-search__action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #ff5a00;
    box-shadow: none;
    opacity: 0.72;
    transform: scale(0.9);
    transition:
        opacity var(--and-nav-ease-out),
        transform var(--and-nav-ease-out),
        background var(--and-nav-ease),
        margin var(--and-nav-ease-out),
        width var(--and-nav-ease-out),
        height var(--and-nav-ease-out);
}

.and-dash-search__action svg {
    display: block;
}

/* Ask anything — tombol mic + voice input */
.and-dash-search__mic {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #ff5a00;
    box-shadow: none;
    opacity: 0.88;
    transform: scale(0.92);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        opacity var(--and-nav-ease-out),
        transform var(--and-nav-ease-out),
        background var(--and-nav-ease),
        box-shadow var(--and-nav-ease),
        width var(--and-nav-ease-out),
        height var(--and-nav-ease-out),
        margin var(--and-nav-ease-out);
}

.and-dash-search__mic .and-voice-ask__icon--stop {
    display: none;
}

.and-dash-search__mic.is-listening {
    opacity: 1;
    transform: scale(1);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
    animation: and-voice-ask-mic-pulse 1.15s ease-in-out infinite;
}

.and-dash-search__mic.is-listening .and-voice-ask__icon--mic {
    display: none;
}

.and-dash-search__mic.is-listening .and-voice-ask__icon--stop {
    display: block;
}

.and-voice-ask__ripples {
    position: absolute;
    inset: -5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.and-dash-search__mic.is-listening .and-voice-ask__ripples {
    opacity: 1;
}

.and-voice-ask__ripples span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.65);
    animation: and-voice-ask-ripple 1.35s ease-out infinite;
}

.and-voice-ask__ripples span:nth-child(2) {
    animation-delay: 0.42s;
}

.and-voice-ask__waves {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    transform: translateY(-50%) scale(0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.and-voice-ask__waves.is-active {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.and-voice-ask__waves span {
    display: block;
    width: 3px;
    height: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.92);
    transform-origin: center bottom;
    animation: and-voice-ask-wave 0.9s ease-in-out infinite;
}

.and-voice-ask__waves span:nth-child(1) { animation-delay: 0s; }
.and-voice-ask__waves span:nth-child(2) { animation-delay: 0.12s; }
.and-voice-ask__waves span:nth-child(3) { animation-delay: 0.24s; }
.and-voice-ask__waves span:nth-child(4) { animation-delay: 0.16s; }
.and-voice-ask__waves span:nth-child(5) { animation-delay: 0.08s; }

.and-dash-search--ai.is-voice-active .and-dash-search__input::placeholder {
    color: rgba(255, 255, 255, 0.95);
}

.and-voice-ask__strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 4px 2px;
    padding: 9px 16px;
    border-radius: var(--and-radius-full);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 90, 0, 0.16);
    box-shadow: var(--and-elev-1);
    font-size: 0.75rem;
    font-weight: 700;
    color: #c2410c;
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity var(--and-nav-ease-out),
        transform var(--and-nav-ease-out);
}

.and-voice-ask__strip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.and-voice-ask__strip[hidden] {
    display: none !important;
}

.and-voice-ask__strip.is-error {
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.2);
    background: rgba(255, 255, 255, 0.96);
}

.and-voice-ask__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5a00;
    animation: and-voice-ask-dot 1.05s ease-in-out infinite;
}

.and-voice-ask__strip.is-error .and-voice-ask__dot {
    background: #dc2626;
    animation: none;
}

@keyframes and-voice-ask-wave {
    0%, 100% { transform: scaleY(0.45); opacity: 0.55; }
    50% { transform: scaleY(1.35); opacity: 1; }
}

@keyframes and-voice-ask-shell-glow {
    0%, 100% {
        box-shadow:
            0 4px 16px -6px rgba(255, 90, 0, 0.32),
            0 0 0 2px rgba(255, 255, 255, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    50% {
        box-shadow:
            0 6px 18px -6px rgba(255, 90, 0, 0.4),
            0 0 0 3px rgba(255, 255, 255, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
}

@keyframes and-voice-ask-mic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes and-voice-ask-ripple {
    0% { transform: scale(0.7); opacity: 0.8; }
    100% { transform: scale(1.45); opacity: 0; }
}

@keyframes and-voice-ask-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Ask anything — expand full width ala Dynamic Island saat focus */
.and-dash-top {
    position: relative;
    transition: gap 0.58s cubic-bezier(0.34, 1.22, 0.64, 1);
}

.and-dash-top .and-dash-burger,
.and-dash-top .and-page-context-icon,
.and-dash-top .and-dash-bell {
    flex: 0 0 50px;
    transition:
        opacity 0.5s cubic-bezier(0.34, 1.15, 0.64, 1),
        transform 0.56s cubic-bezier(0.34, 1.22, 0.64, 1),
        flex 0.58s cubic-bezier(0.34, 1.22, 0.64, 1),
        max-width 0.58s cubic-bezier(0.34, 1.22, 0.64, 1),
        width 0.58s cubic-bezier(0.34, 1.22, 0.64, 1),
        margin 0.58s cubic-bezier(0.34, 1.22, 0.64, 1);
}

.and-dash-search--ai {
    flex: 1 1 0;
    min-width: 0;
    transition:
        flex 0.58s cubic-bezier(0.34, 1.22, 0.64, 1),
        max-width 0.58s cubic-bezier(0.34, 1.22, 0.64, 1);
}

.and-dash-search--ai::before {
    content: '';
    position: absolute;
    inset: -6px -4px;
    border-radius: var(--and-radius-full);
    background: linear-gradient(135deg, rgba(255, 154, 77, 0.42) 0%, rgba(255, 90, 0, 0.3) 100%);
    opacity: 0;
    filter: blur(12px);
    z-index: 0;
    pointer-events: none;
    transition:
        opacity 0.58s cubic-bezier(0.34, 1.15, 0.64, 1),
        inset 0.58s cubic-bezier(0.34, 1.22, 0.64, 1);
}

.and-dash-top:has(.and-dash-search--ai:focus-within),
.and-dash-top.is-ask-island,
.and-dash-top.is-voice-ask-active {
    gap: 0;
}

.and-dash-top:has(.and-dash-search--ai:focus-within) .and-dash-burger,
.and-dash-top:has(.and-dash-search--ai:focus-within) .and-page-context-icon,
.and-dash-top:has(.and-dash-search--ai:focus-within) .and-dash-bell,
.and-dash-top.is-ask-island .and-dash-burger,
.and-dash-top.is-ask-island .and-page-context-icon,
.and-dash-top.is-ask-island .and-dash-bell,
.and-dash-top.is-voice-ask-active .and-dash-burger,
.and-dash-top.is-voice-ask-active .and-page-context-icon,
.and-dash-top.is-voice-ask-active .and-dash-bell {
    opacity: 0;
    transform: scale(0.78);
    flex: 0 0 0;
    max-width: 0;
    width: 0;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

.and-dash-top.is-ask-island:not(.is-ask-island--leaving) .and-dash-burger,
.and-dash-top.is-ask-island:not(.is-ask-island--leaving) .and-page-context-icon,
.and-dash-top.is-ask-island:not(.is-ask-island--leaving) .and-dash-bell {
    transition-delay: 0s;
}

.and-dash-top.is-ask-island--leaving .and-dash-burger,
.and-dash-top.is-ask-island--leaving .and-page-context-icon,
.and-dash-top.is-ask-island--leaving .and-dash-bell {
    transition-delay: 0.2s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
}

.and-dash-top:has(.and-dash-search--ai:focus-within) .and-dash-search--ai,
.and-dash-top.is-ask-island .and-dash-search--ai,
.and-dash-top.is-voice-ask-active .and-dash-search--ai {
    flex: 1 1 100%;
    max-width: 100%;
}

.and-dash-top.is-ask-island:not(.is-ask-island--leaving) .and-dash-search--ai {
    transition-delay: 0.08s;
}

.and-dash-top.is-ask-island--leaving .and-dash-search--ai {
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
}

.and-dash-top:has(.and-dash-search--ai:focus-within) .and-dash-search--ai::before,
.and-dash-top.is-ask-island .and-dash-search--ai::before,
.and-dash-top.is-voice-ask-active .and-dash-search--ai::before {
    opacity: 1;
    inset: -8px -2px;
}

.and-dash-top:has(.and-dash-search--ai:focus-within) .and-dash-search--ai .and-dash-search__shell,
.and-dash-top.is-ask-island .and-dash-search--ai .and-dash-search__shell,
.and-dash-top.is-voice-ask-active .and-dash-search--ai .and-dash-search__shell {
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow:
        0 4px 16px -6px rgba(255, 90, 0, 0.32),
        0 0 0 2px rgba(255, 255, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    animation: and-ask-island-breathe 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.and-dash-top.is-voice-ask-active .and-dash-search--ai.is-voice-active .and-dash-search__shell,
.and-dash-search--ai.is-voice-active .and-dash-search__shell {
    animation: and-voice-ask-shell-glow 1.6s ease-in-out infinite;
}

.and-dash-top.is-ask-island--leaving .and-dash-search--ai .and-dash-search__shell {
    animation: none;
    transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
}

.and-dash-top:has(.and-dash-search--ai:focus-within) .and-dash-search--ai .and-dash-search__input,
.and-dash-top.is-ask-island .and-dash-search--ai .and-dash-search__input {
    padding: 15px 10px 15px 20px;
}

.and-dash-top:has(.and-dash-search--ai:focus-within) .and-dash-search__action,
.and-dash-top.is-ask-island .and-dash-search__action,
.and-dash-top:has(.and-dash-search--ai:focus-within) .and-dash-search__mic,
.and-dash-top.is-ask-island .and-dash-search__mic,
.and-dash-top.is-voice-ask-active .and-dash-search__mic {
    opacity: 1;
    transform: scale(1);
    width: 36px;
    height: 36px;
    margin-right: 10px;
    background: #fff;
    color: #ff5a00;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.and-dash-top.is-ask-island:not(.is-ask-island--leaving) .and-dash-search__action {
    transition-delay: 0.16s;
}

.and-dash-top.is-ask-island--leaving .and-dash-search__action {
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
}

@keyframes and-ask-island-breathe {

    0%,
    100% {
        box-shadow:
            0 4px 16px -6px rgba(255, 90, 0, 0.3),
            0 0 0 2px rgba(255, 255, 255, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    50% {
        box-shadow:
            0 6px 18px -6px rgba(255, 90, 0, 0.38),
            0 0 0 3px rgba(255, 255, 255, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
}

@media (prefers-reduced-motion: reduce) {

    .and-dash-top,
    .and-dash-top .and-dash-burger,
    .and-dash-top .and-dash-bell,
    .and-dash-search--ai,
    .and-dash-search--ai::before,
    .and-dash-search--ai .and-dash-search__shell,
    .and-dash-search--ai .and-dash-search__input,
    .and-dash-search__action,
    .and-dash-search__mic,
    .and-voice-ask__waves span,
    .and-voice-ask__ripples span,
    .and-voice-ask__dot,
    .and-voice-ask__strip {
        transition: none !important;
        transition-delay: 0s !important;
        animation: none !important;
    }
}

.and-dash-bell {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--and-radius-full);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 90, 0, 0.22);
    color: #ff5a00;
    box-shadow: 0 4px 16px -4px rgba(255, 90, 0, 0.14);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.and-dash-bell svg {
    stroke: #ff5a00;
    fill: none;
}

.and-dash-bell--unread {
    background: rgba(255, 90, 0, 0.14);
    border-color: rgba(255, 90, 0, 0.38);
    box-shadow: 0 4px 18px -4px rgba(255, 90, 0, 0.28);
}

.and-dash-bell--unread svg {
    stroke: #ff5a00;
}

.and-dash-bell:active {
    transform: scale(0.96);
}

.and-dash-bell__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--and-radius-full);
    background: #ff5a00;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(255, 90, 0, 0.45);
}

.and-dash-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.and-dash-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--and-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.7);
    color: #334155;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.06);
}

.and-stats-grid--liquid {
    gap: 14px;
    margin-bottom: 28px;
}

.and-stats-grid--liquid .and-stat-card {
    border-radius: 2.5rem;
    padding: 22px 20px;
    min-height: 148px;
}

.and-stat-card__watermark {
    position: absolute;
    right: -6px;
    bottom: -10px;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.14;
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.12));
    pointer-events: none;
    color: inherit;
}

.and-stat-card--barang .and-stat-card__watermark {
    color: #6366f1;
}

.and-stat-card--pinjam .and-stat-card__watermark {
    color: #3b82f6;
}

.and-stat-card--requests .and-stat-card__watermark {
    color: #d97706;
}

.and-stat-card--damaged .and-stat-card__watermark {
    color: #e11d48;
}

.and-ai-home-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 28px;
    padding: 28px 20px 24px;
    border-radius: 2.5rem;
    background: linear-gradient(165deg, rgba(255, 140, 66, 0.48) 0%, rgba(255, 90, 0, 0.14) 52%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    outline: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 32px -16px rgba(255, 90, 0, 0.18);
    color: #9a3412;
}

.and-ai-home-widget__icon-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 90, 0, 0.18);
    color: #ff5a00;
    box-shadow: 0 8px 20px -10px rgba(255, 90, 0, 0.2);
}

.and-ai-home-widget__badge {
    position: absolute;
    top: 0;
    right: -20px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff;
    color: #ff5a00;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.and-ai-home-widget__badge--limit {
    color: #e11d48;
}

.and-ai-home-widget__title {
    margin: 0 0 20px;
    font-size: 1.3125rem;
    font-weight: 800;
    color: #c2410c;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.and-ai-home-widget__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.and-ai-home-widget__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.and-ai-home-widget__btn--primary {
    background: rgba(255, 255, 255, 0.88);
    color: #ff5a00;
    border: 1px solid rgba(255, 90, 0, 0.2);
    box-shadow: 0 8px 18px -8px rgba(255, 90, 0, 0.22);
}

.and-ai-home-widget__btn--ghost {
    background: rgba(255, 90, 0, 0.06);
    color: #c2410c;
    border: 1.5px solid rgba(255, 90, 0, 0.22);
}

.and-ai-home-widget__btn:active {
    transform: scale(0.98);
    opacity: 0.94;
}

.and-nav-drawer__link[data-and-nav-key="quran-surat"] .and-nav-drawer__link-icon {
    color: #d4a574;
}

/* ── Home: menu cepat (glass iOS) ── */
.and-home-quick__panel {
    padding: 18px 14px 14px;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(28px) saturate(185%);
    -webkit-backdrop-filter: blur(28px) saturate(185%);
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow:
        0 16px 48px -20px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.and-home-quick__head {
    padding: 0 6px 14px;
}

.and-home-quick__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--and-text, #0f172a);
}

.and-home-quick__sub {
    margin: 4px 0 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.52);
}

.and-home-quick__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.and-home-quick__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 8px 12px;
    border-radius: 1.35rem;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
        0 8px 24px -14px rgba(15, 23, 42, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.and-home-quick__card:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.55);
}

.and-home-quick__orb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.and-home-quick__card--violet .and-home-quick__orb {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.28), rgba(167, 139, 250, 0.14));
    color: #6d28d9;
}

.and-home-quick__card--sky .and-home-quick__orb {
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.28), rgba(56, 189, 248, 0.14));
    color: #0369a1;
}

.and-home-quick__card--mint .and-home-quick__orb {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.28), rgba(52, 211, 153, 0.14));
    color: #047857;
}

.and-home-quick__card--rose .and-home-quick__orb {
    background: linear-gradient(145deg, rgba(244, 63, 94, 0.26), rgba(251, 113, 133, 0.14));
    color: #be123c;
}

.and-home-quick__card--amber .and-home-quick__orb {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.3), rgba(251, 191, 36, 0.14));
    color: #b45309;
}

.and-home-quick__card--indigo .and-home-quick__orb {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.28), rgba(129, 140, 248, 0.14));
    color: #4338ca;
}

.and-home-quick__plus {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: linear-gradient(145deg, #334155, #0f172a);
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.45);
}

.and-home-quick__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    color: rgba(15, 23, 42, 0.82);
    letter-spacing: -0.01em;
}

.and-home-quick__grid:has(.and-home-quick__card:nth-child(5)):not(:has(.and-home-quick__card:nth-child(6))) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.and-home-quick__grid:has(.and-home-quick__card:nth-child(5)):not(:has(.and-home-quick__card:nth-child(6))) .and-home-quick__card:nth-child(-n+3) {
    grid-column: span 2;
}

.and-home-quick__grid:has(.and-home-quick__card:nth-child(5)):not(:has(.and-home-quick__card:nth-child(6))) .and-home-quick__card:nth-child(4) {
    grid-column: 2 / span 2;
}

.and-home-quick__grid:has(.and-home-quick__card:nth-child(5)):not(:has(.and-home-quick__card:nth-child(6))) .and-home-quick__card:nth-child(5) {
    grid-column: 4 / span 2;
}

@media (max-width: 360px) {
    .and-home-quick__orb {
        width: 46px;
        height: 46px;
    }

    .and-home-quick__label {
        font-size: 0.66rem;
    }
}

.and-stat-card__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.and-stats-grid--liquid .and-stat-card__icon {
    display: none;
}

.and-stat-card__badge {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: var(--and-radius-full);
}

.and-stat-card__badge--success {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-stat-card__badge--muted {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.and-stat-card__badge--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.and-stat-card__badge--danger {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
}

.and-stats-grid--liquid .and-stat-card__label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748b;
    opacity: 0.65;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.and-stats-grid--liquid .and-stat-card__value {
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 1;
}

.and-stat-card__value--danger {
    color: #e11d48;
}

.and-stat-card--requests .and-stat-card__icon {
    --and-icon-bg: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.and-stat-card--damaged .and-stat-card__icon {
    --and-icon-bg: rgba(244, 63, 94, 0.12);
    color: #e11d48;
}

.and-panel {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2rem;
    padding: 22px 20px;
    box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.and-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.and-panel__title {
    font-size: 1.375rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.and-panel__subtitle {
    margin-top: 4px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748b;
    opacity: 0.75;
}

.and-panel__menu {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.6);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.and-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    height: 200px;
    padding-top: 8px;
}

.and-chart-bars__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.and-chart-bars__col>span {
    margin-top: 10px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    opacity: 0.6;
}

.and-chart-bars__track {
    width: 100%;
    height: var(--h, 70%);
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1.25rem;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.and-chart-bars__fill {
    width: 100%;
    height: var(--f, 60%);
    border-radius: 1.25rem;
    background: linear-gradient(to top, rgba(255, 90, 0, 0.92), rgba(96, 165, 250, 0.72));
}

.and-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--and-radius-full);
    background: rgba(16, 185, 129, 0.1);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #059669;
}

.and-live-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: and-live-pulse 1.5s ease-in-out infinite;
}

@keyframes and-live-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.85);
    }
}

.and-live-feed__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.and-live-feed__item:last-child {
    margin-bottom: 0;
}

.and-live-feed__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    font-size: 1.125rem;
    font-weight: 900;
    color: #64748b;
}

.and-live-feed__icon--add {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.2);
}

.and-live-feed__icon--loan {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.2);
}

.and-live-feed__icon--alert {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
    border-color: rgba(244, 63, 94, 0.2);
}

.and-barang-outstanding {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-asset-row--outstanding .and-asset-row__icon {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    flex-shrink: 0;
}

.and-live-feed__title {
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
}

.and-live-feed__sub {
    margin-top: 2px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
    opacity: 0.75;
}

.and-panel--home-feed .and-panel__head {
    margin-bottom: 4px;
}

.and-home-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-home-feed__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.65);
    text-decoration: none;
    color: inherit;
    transition: background 0.18s ease, transform 0.14s ease;
}

.and-home-feed__item:active {
    transform: scale(0.99);
    background: rgba(255, 255, 255, 0.82);
}

.and-home-feed__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.and-home-feed__icon--add {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.2);
}

.and-home-feed__icon--loan {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.2);
}

.and-home-feed__icon--alert {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
    border-color: rgba(244, 63, 94, 0.2);
}

.and-home-feed__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.and-home-feed__title {
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-home-feed__sub {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.and-home-feed__chev {
    flex-shrink: 0;
    color: #94a3b8;
}

.and-home-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.and-home-section__hint {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
}

.and-panel--home-feed .and-panel__head {
    margin-bottom: 18px;
}

.and-panel--home-loans {
    padding-bottom: 18px;
}

.and-panel--home-loans .and-panel__head--compact {
    margin-bottom: 14px;
    align-items: center;
}

.and-home-loans-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.and-home-loans-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.72);
    color: #475569;
    text-decoration: none;
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.2);
    transition: transform 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.and-home-loans-action svg {
    display: block;
}

.and-home-loans-action:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.92);
}

.and-home-loans-action--accent {
    background: linear-gradient(145deg, #ff7a1a 0%, #ff5a00 100%);
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(255, 90, 0, 0.45);
}

.and-home-loans-action--accent:active {
    background: linear-gradient(145deg, #ff6a0a 0%, #e04e00 100%);
}

.and-panel--home-loans .and-panel__title {
    font-size: 1.25rem;
}

.and-home-loans {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-home-loan {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.18);
    text-decoration: none;
    color: inherit;
    transition: background 0.18s ease, transform 0.18s ease;
}

.and-home-loan:active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(0.99);
}

.and-home-loan__icon {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 90, 0, 0.1);
    color: #ea580c;
    flex-shrink: 0;
}

.and-home-loan__icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.and-home-loan__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.and-home-loan__title {
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-home-loan__sub {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.and-home-loan__badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--and-radius-full);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.and-home-loan__badge--pinjam {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.and-home-loan__badge--parsial {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.and-home-loan__badge--telat {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.and-home-loan__badge--lost {
    background: rgba(139, 92, 246, 0.14);
    color: #7c3aed;
}

/* ── Home: BAST widget ── */
.and-panel--home-st .and-panel__head {
    align-items: center;
}

.and-panel--home-st .and-panel__title {
    font-size: 1.25rem;
}

.and-home-st-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.and-home-st-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.72);
    color: #475569;
    text-decoration: none;
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.2);
    transition: transform 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    font: inherit;
}

.and-home-st-action svg {
    display: block;
}

.and-home-st-action:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.92);
}

.and-home-st-action--camera {
    color: #ff5a00;
}

.and-home-st__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.and-home-st__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.and-home-st__row:last-child {
    border-bottom: none;
}

.and-home-st__row:active {
    background: rgba(248, 250, 252, 0.85);
}

.and-home-st__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.and-home-st__icon svg {
    width: 20px;
    height: 20px;
}

.and-home-st__icon--peach {
    background: rgba(255, 90, 0, 0.12);
    color: #ea580c;
}

.and-home-st__icon--sky {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.and-home-st__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.and-home-st__title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-home-st__sub {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-home-st__meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.and-home-st__when {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

.and-home-st__status {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.and-home-st__status--ok {
    color: #16a34a;
}

.and-home-st__status--draft {
    color: #d97706;
}

.and-home-st__status--muted {
    color: #64748b;
}

.and-home-empty {
    margin: 0;
    padding: 10px 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
}

/* Home redesign: command center */
.and-body--home {
    background-color: #6f879d;
    background-image:
        radial-gradient(circle at 14% 0%, rgba(255, 90, 0, 0.12), transparent 34%),
        radial-gradient(circle at 92% 16%, rgba(59, 130, 246, 0.14), transparent 32%),
        linear-gradient(180deg, #9db0c4 0%, #849bb1 46%, #6f879d 100%);
    background-attachment: scroll;

    --and-home-glass-bg: rgba(255, 255, 255, 0.88);
    --and-home-glass-border: rgba(255, 255, 255, 0.52);
    --and-home-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    --and-home-glass-shadow: 0 14px 36px -20px rgba(15, 23, 42, 0.22);
    --and-home-glass-blur: blur(10px) saturate(130%);
    --and-home-glass-nested: rgba(255, 255, 255, 0.92);
    --and-home-glass-nested-border: rgba(148, 163, 184, 0.18);
}

.and-body--home::before,
.and-body--home::after {
    display: none;
}

.and-body--home #and-spa-app,
.and-body--home .and-spa-outlet-wrap,
.and-body--home #and-spa-outlet {
    background: transparent;
}

.and-layout--home {
    flex: 1;
    width: 100%;
    min-height: 100dvh;
    background: transparent;
}

.and-body--home .and-layout--ambient::before {
    display: none;
}

.and-layout--home::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 62%);
    pointer-events: none;
}

.and-layout--home > .and-main {
    position: relative;
    z-index: 1;
    flex: 1;
}

.and-main--dashboard {
    position: relative;
    padding-top: 10px;
}

.and-layout--home .and-main--dashboard {
    background: transparent;
}

.and-layout--home .and-main--dashboard::before {
    display: none;
}

.and-body--home .and-home-hero {
    margin-bottom: 16px;
    padding-bottom: 16px;
}

.and-body--home .and-home-notif-slider {
    margin-bottom: 0;
}

.and-home-hero {
    position: relative;
    margin: 0 0 16px;
    padding: 12px 14px 16px;
    border-radius: 20px;
    background: linear-gradient(165deg, #3a2a22 0%, #2f221c 55%, #281c17 100%);
    color: #fff;
    overflow: visible;
    border: 1px solid rgba(255, 236, 210, 0.1);
    box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.18);
}

.and-home-hero::after {
    display: none;
}

.and-home-hero__mesh {
    display: none;
}

.and-home-hero .and-page-context-icon {
    display: none !important;
}

.and-home-hero .and-dash-top {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
    gap: 8px;
}

.and-home-hero .and-home-hero__burger,
.and-home-hero .and-dash-burger,
.and-home-hero .and-dash-bell {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.96);
    color: #c2410c;
    border-radius: 12px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background var(--and-nav-ease), border-color var(--and-nav-ease), transform var(--and-nav-ease);
}

.and-home-hero .and-dash-top:not(.is-ask-island):not(.is-voice-ask-active):not(:has(.and-dash-search--ai:focus-within)) .and-home-hero__burger,
.and-home-hero .and-dash-top:not(.is-ask-island):not(.is-voice-ask-active):not(:has(.and-dash-search--ai:focus-within)) .and-dash-burger,
.and-home-hero .and-dash-top:not(.is-ask-island):not(.is-voice-ask-active):not(:has(.and-dash-search--ai:focus-within)) .and-dash-bell {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.and-home-hero .and-home-hero__burger svg,
.and-home-hero .and-dash-burger svg,
.and-home-hero .and-dash-bell svg {
    stroke: currentColor;
    stroke-width: 2;
    width: 20px;
    height: 20px;
}

.and-home-hero .and-home-hero__burger[aria-expanded="true"],
.and-home-hero .and-dash-burger[aria-expanded="true"] {
    background: #fff7ed;
    border-color: rgba(194, 65, 12, 0.35);
    color: #c2410c;
}

.and-home-hero .and-dash-bell--unread {
    background: #fff7ed;
    border-color: rgba(194, 65, 12, 0.35);
    color: #c2410c;
}

.and-home-hero .and-dash-bell--unread svg {
    stroke: #c2410c;
}

.and-home-hero .and-dash-search--ai .and-dash-search__shell {
    min-height: 44px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.and-home-hero .and-dash-search--ai .and-dash-search__input {
    color: #fff;
    font-weight: 500;
    padding: 12px 8px 12px 16px;
}

.and-home-hero .and-dash-search--ai .and-dash-search__input::placeholder {
    color: rgba(255, 247, 237, 0.62);
    font-weight: 500;
}

.and-home-hero .and-dash-search__mic {
    opacity: 1;
    transform: scale(1);
    width: 32px;
    height: 32px;
    margin-right: 6px;
    background: #ff5a00;
    color: #fff;
    box-shadow: none;
}

.and-home-hero .and-dash-search__mic svg {
    stroke: currentColor;
    width: 16px;
    height: 16px;
}

.and-home-hero .and-dash-search__mic.is-listening {
    background: #fff;
    color: #ff5a00;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.and-home-hero__intro {
    position: relative;
    z-index: 2;
    padding: 0;
}

.and-home-hero__left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding-bottom: 2px;
}

.and-home-hero__row {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-home-hero__notif-col {
    min-width: 0;
}

.and-home-hero__notif-col > .and-home-notif-slider {
    margin: 0;
}

/* Desktop — kiri: profil+chips | kanan: notifikasi */
@media (min-width: 1024px) {
    body.and-body--home .and-home-hero {
        padding: 14px 16px 16px;
    }

    body.and-body--home .and-home-hero__row {
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
    }

    body.and-body--home .and-home-hero__left {
        flex: 0 1 auto;
        max-width: min(360px, 38%);
        gap: 10px;
        justify-content: center;
    }

    body.and-body--home .and-home-hero__notif-col {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
    }

    body.and-body--home .and-home-hero__notif-col > .and-home-notif-slider {
        width: 100%;
        padding: 12px 14px 10px;
        border-radius: 14px;
    }

    body.and-body--home .and-home-hero .and-home-notif-slider__head {
        margin-bottom: 8px;
    }

    body.and-body--home .and-home-hero .and-home-notif-slider__body {
        margin-bottom: 8px;
        gap: 10px;
    }

    body.and-body--home .and-home-hero .and-home-notif-slider__icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    body.and-body--home .and-home-hero .and-home-notif-slider__progress-track {
        margin-bottom: 8px;
    }

    body.and-body--home .and-home-hero .and-home-notif-slider__btn {
        padding: 8px 12px;
        font-size: 0.6875rem;
        letter-spacing: 0.04em;
    }
}

.and-home-hero__user-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--and-nav-ease);
}

.and-home-hero__user-link:active {
    opacity: 0.88;
}

.and-home-hero__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
    overflow: hidden;
}

.and-home-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-home-hero__user-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.and-home-hero__eyebrow {
    display: inline-flex;
    margin-bottom: 0;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(254, 215, 170, 0.72);
}

.and-home-hero__name {
    display: block;
    font-size: clamp(1.125rem, 4.2vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-home-hero__chips {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 2px 0 4px;
    overflow: visible;
    min-height: 32px;
}

.and-home-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    min-height: 28px;
    line-height: 1.25;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 247, 237, 0.88);
    font-size: 0.6875rem;
    font-weight: 600;
    box-sizing: border-box;
}

.and-home-hero__chip i {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .and-body--home .and-live-badge__dot,
    .and-body--home .and-home-notif-slider--pulse,
    .and-body--home .and-skeleton {
        animation: none !important;
    }
}

.and-home-hero .and-home-notif-slider {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 14px 14px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
}

.and-home-hero .and-home-notif-slider__head {
    margin-bottom: 12px;
    min-height: 24px;
}

.and-home-hero .and-home-notif-slider__body {
    margin-bottom: 12px;
}

.and-home-hero .and-home-notif-slider__btn {
    min-height: 40px;
    padding: 10px 12px;
}

.and-home-hero .and-home-notif-slider__time {
    color: rgba(255, 247, 237, 0.55);
    font-size: 0.6875rem;
    font-weight: 500;
}

.and-home-hero .and-home-notif-slider__title {
    color: #fff;
    font-weight: 600;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-home-hero .and-home-notif-slider__message {
    color: rgba(255, 247, 237, 0.58);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-home-hero .and-home-notif-slider__btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(254, 215, 170, 0.9);
    font-weight: 600;
}

.and-home-hero .and-home-notif-slider .and-live-badge--notif {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(254, 215, 170, 0.95);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
    font-weight: 600;
}

.and-home-hero .and-home-notif-slider .and-live-badge--notif .and-live-badge__dot {
    background: #eab308;
    box-shadow: none;
}

.and-home-hero .and-home-notif-slider .and-live-badge__bell {
    color: rgba(254, 215, 170, 0.9);
    stroke: rgba(254, 215, 170, 0.9);
    fill: none;
}

.and-home-hero .and-home-notif-slider__icon,
.and-home-hero .and-home-notif-slider__icon--gold,
.and-home-hero .and-home-notif-slider__icon[class*="and-home-notif-slider__icon--"] {
    color: #fed7aa;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.and-home-hero .and-home-notif-slider__icon svg {
    color: #fed7aa;
    stroke: #fed7aa;
    fill: none;
    stroke-width: 1.75;
}

.and-home-hero .and-home-notif-slider__count {
    background: #ff5a00;
    color: #fff;
    border: none;
    box-shadow: none;
    font-weight: 700;
}

.and-home-hero .and-home-notif-slider__count[hidden] {
    display: none !important;
}

.and-home-hero .and-dash-bell__badge {
    background: #ff5a00;
    color: #fff;
    border: 1.5px solid #fff;
    box-shadow: none;
}

.and-stats-grid--liquid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.and-body--home .and-stats-grid--liquid {
    margin-top: 6px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.and-body--home .and-stats-grid--liquid .and-stat-card {
    min-height: 128px;
    padding: 14px 14px 16px;
    border-radius: 22px;
    background: var(--and-home-glass-bg);
    border: 1px solid var(--and-home-glass-border);
    box-shadow: var(--and-home-glass-shadow), var(--and-home-glass-inset);
    backdrop-filter: var(--and-home-glass-blur);
    -webkit-backdrop-filter: var(--and-home-glass-blur);
    overflow: hidden;
}

.and-body--home .and-stats-grid--liquid .and-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, rgba(255, 90, 0, 0.82), rgba(124, 45, 18, 0.55));
    pointer-events: none;
}

.and-body--home .and-stats-grid--liquid .and-stat-card::before {
    opacity: 0.08;
    pointer-events: none;
}

.and-body--home .and-stats-grid--liquid .and-stat-card__label {
    letter-spacing: 0.12em;
    color: #64748b;
    opacity: 0.88;
}

.and-body--home .and-stats-grid--liquid .and-stat-card__value {
    color: #0f172a;
    font-size: 1.875rem;
}

.and-body--home .and-stats-grid--liquid .and-stat-card__value--danger {
    color: #e11d48;
}

.and-body--home .and-stats-grid--liquid .and-stat-card__watermark {
    opacity: 0.12;
}

.and-body--home .and-stats-grid--liquid .and-stat-card--barang .and-stat-card__watermark {
    color: #6366f1;
}

.and-body--home .and-stats-grid--liquid .and-stat-card--pinjam .and-stat-card__watermark {
    color: #3b82f6;
}

.and-body--home .and-stats-grid--liquid .and-stat-card--requests .and-stat-card__watermark {
    color: #d97706;
}

.and-body--home .and-stats-grid--liquid .and-stat-card--damaged .and-stat-card__watermark {
    color: #e11d48;
}

.and-stats-grid--liquid .and-stat-card {
    min-height: 136px;
    padding: 16px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(100, 116, 139, 0.22);
    box-shadow:
        0 12px 32px -22px rgba(15, 23, 42, 0.34),
        0 2px 8px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.and-stats-grid--liquid .and-stat-card::before {
    content: '';
    position: absolute;
    inset: auto -28px -42px auto;
    width: 100px;
    height: 100px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.07;
    pointer-events: none;
}

.and-stats-grid--liquid .and-stat-card__label {
    letter-spacing: 0.12em;
    color: #64748b;
    opacity: 0.75;
}

.and-stats-grid--liquid .and-stat-card__value {
    font-size: 2rem;
}

.and-body--home .and-home-quick__panel,
.and-body--home .and-panel,
.and-body--home .and-ai-home-widget {
    border-radius: 26px;
    background: var(--and-home-glass-bg);
    border: 1px solid var(--and-home-glass-border);
    box-shadow: var(--and-home-glass-shadow), var(--and-home-glass-inset);
    backdrop-filter: var(--and-home-glass-blur);
    -webkit-backdrop-filter: var(--and-home-glass-blur);
    outline: 0;
}

.and-home-quick__panel,
.and-panel,
.and-ai-home-widget {
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(100, 116, 139, 0.22);
    box-shadow:
        0 12px 34px -24px rgba(15, 23, 42, 0.32),
        0 2px 8px rgba(15, 23, 42, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    outline: 0;
}

.and-home-quick__panel {
    padding: 16px;
}

.and-home-quick__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 14px;
}

.and-home-quick__title,
.and-panel__title {
    font-size: 1.08rem;
    letter-spacing: -0.03em;
}

.and-home-quick__sub,
.and-panel__subtitle {
    font-size: 0.75rem;
    font-weight: 650;
}

.and-body--home .and-home-quick__card {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.and-body--home .and-home-quick__card:active {
    background: rgba(255, 255, 255, 0.52);
}

.and-home-quick__card {
    border-radius: 20px;
    background: linear-gradient(145deg, #fff, #f8fafc);
    border-color: rgba(148, 163, 184, 0.14);
}

.and-home-quick__orb {
    width: 50px;
    height: 50px;
    border-radius: 17px;
}

.and-body--home .and-ai-home-widget {
    background:
        radial-gradient(circle at 86% 8%, rgba(255, 90, 0, 0.1), transparent 34%),
        var(--and-home-glass-bg);
    color: #0f172a;
}

.and-ai-home-widget {
    position: relative;
    align-items: stretch;
    text-align: left;
    margin-bottom: 18px;
    padding: 18px;
    background:
        radial-gradient(circle at 86% 8%, rgba(255, 90, 0, 0.08), transparent 34%),
        linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    color: #0f172a;
    overflow: hidden;
}

.and-ai-home-widget::after {
    content: '';
    position: absolute;
    right: -52px;
    top: -52px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.08);
}

.and-ai-home-widget__icon-wrap,
.and-ai-home-widget__title,
.and-ai-home-widget__actions {
    position: relative;
    z-index: 1;
}

.and-ai-home-widget__icon-wrap {
    align-self: flex-start;
}

.and-ai-home-widget__title {
    color: #0f172a;
    font-size: 1.35rem;
    margin: 14px 0;
}

.and-ai-home-widget__btn--ghost {
    color: #c2410c;
    border-color: rgba(255, 90, 0, 0.16);
    background: rgba(255, 90, 0, 0.07);
}

.and-ai-home-widget__btn--primary {
    box-shadow: 0 12px 26px -16px rgba(255, 90, 0, 0.95);
}

.and-body--home .and-chart-bars__track {
    background: rgba(255, 255, 255, 0.42);
    border-color: rgba(255, 255, 255, 0.38);
}

.and-chart-bars {
    height: 160px;
}

.and-chart-bars__track {
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.7);
    border-color: rgba(148, 163, 184, 0.16);
}

.and-chart-bars__fill {
    border-radius: 999px;
    background: linear-gradient(to top, #ff5a00, #fbbf24);
    box-shadow: 0 -8px 20px -10px rgba(255, 90, 0, 0.75);
}

.and-body--home .and-home-feed__item,
.and-body--home .and-home-loan,
.and-body--home .and-home-st__row {
    background: var(--and-home-glass-nested);
    border: 1px solid var(--and-home-glass-nested-border);
    box-shadow: 0 6px 16px -12px rgba(15, 23, 42, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.and-body--home .and-home-st__row {
    border-bottom: none;
    border-radius: 18px;
}

.and-body--home .and-home-st {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-body--home .and-home-st__row:active {
    background: rgba(255, 255, 255, 0.62);
}

.and-home-feed__item,
.and-home-loan,
.and-home-st__card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.22);
}

.and-home-feed__item,
.and-home-loan {
    border-radius: 18px;
    padding: 13px;
}

.and-home-feed__icon,
.and-home-loan__icon,
.and-home-st__icon {
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.and-body--home .and-home-feed__item:active,
.and-body--home .and-home-loan:active {
    background: rgba(255, 255, 255, 0.62);
}

.and-home-feed__icon,
.and-body--home .and-home-st-action {
    background: var(--and-home-glass-nested);
    border-color: var(--and-home-glass-nested-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.and-home-loans-action,
.and-home-st-action {
    border-radius: 15px;
    background: #fff;
    border-color: rgba(148, 163, 184, 0.16);
}

.and-home-loans-action--accent {
    background: linear-gradient(145deg, #ff7a1a 0%, #ff5a00 100%);
    color: #fff;
}

.and-panel__cta {
    display: block;
    margin-top: 20px;
    padding: 14px;
    text-align: center;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.5);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #475569;
    text-decoration: none;
}

.and-ai-banner {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(99, 102, 241, 0.06));
    border-color: rgba(124, 58, 237, 0.2);
}

.and-ai-banner__inner {
    display: flex;
    align-items: center;
    gap: 16px;
}

.and-ai-banner__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}

.and-ai-banner__text {
    flex: 1;
}

.and-ai-banner__title {
    font-weight: 700;
    color: var(--and-text-primary);
    margin-bottom: 2px;
}

.and-ai-banner__quota {
    margin-top: 4px;
}

.and-ai-quota-strip {
    max-width: var(--and-content-max);
    margin: 0 auto;
    padding: 0 var(--and-space-md) 8px;
    width: 100%;
}

.and-gemini-quota__line {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--and-text-secondary, #64748b);
}

.and-gemini-quota__hint {
    margin: 6px 0 0;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--and-text-muted, #94a3b8);
}

.and-gemini-quota__bar {
    margin-top: 6px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}

.and-gemini-quota__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width .35s ease;
}

.and-gemini-quota--warn .and-gemini-quota__fill {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.and-gemini-quota--danger .and-gemini-quota__fill,
.and-gemini-quota--danger .and-gemini-quota__line {
    color: #dc2626;
}

.and-gemini-quota--danger .and-gemini-quota__fill {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.and-gemini-quota--exempt .and-gemini-quota__line {
    color: #7c3aed;
}

.and-gemini-quota--status {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
}

.and-gemini-quota--status.and-gemini-quota--ok { color: #059669; }
.and-gemini-quota--status.and-gemini-quota--warn { color: #d97706; }
.and-gemini-quota--status.and-gemini-quota--danger { color: #dc2626; }
.and-gemini-quota--status.and-gemini-quota--exempt { color: #7c3aed; }
.and-gemini-quota--status.and-gemini-quota--disabled { color: #64748b; }

.and-gemini-quota--banner .and-gemini-quota__line {
    font-size: 0.68rem;
}

.and-gemini-quota--card {
    padding: 2px 0;
}

.and-ps-quota-card__body {
    padding: 14px 16px;
}

.and-panel--home-quota .and-home-quota-card {
    padding: 2px 2px 4px;
}

.and-pg-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 600;
}

.and-pg-alert--ok { background: rgba(34, 197, 94, 0.12); color: #15803d; border: 1px solid rgba(34, 197, 94, 0.2); }
.and-pg-alert--err { background: rgba(239, 68, 68, 0.12); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.2); }
.and-pg-alert--info { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; border: 1px solid rgba(59, 130, 246, 0.2); }

.and-main--pg-gemini {
    width: 100%;
    margin: 0 auto;
}

.and-pg-topbar__text {
    flex: 1;
    min-width: 0;
}

.and-pg-topbar__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.2;
}

.and-pg-topbar__sub {
    margin: 4px 0 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-pg-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 16px;
    margin-bottom: 20px;
    border-radius: 2rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(99, 102, 241, 0.05)), rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(124, 58, 237, 0.14);
    box-shadow: 0 20px 40px -12px rgba(124, 58, 237, 0.15);
}

.and-pg-hero__glow {
    position: absolute;
    right: -20px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.and-pg-hero__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
    position: relative;
    z-index: 1;
}

.and-pg-hero__body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.and-pg-hero__label {
    display: block;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7c3aed;
    margin-bottom: 6px;
}

.and-pg-hero__quota .and-gemini-quota--card {
    padding: 0;
}

.and-pg-hero__quota .and-gemini-quota__line {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.and-panel--pg {
    padding-bottom: 8px;
}

.and-pg-panel-body {
    padding: 4px 4px 8px;
}

.and-pg-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.and-pg-switch-row {
    padding: 12px 8px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    margin-bottom: 8px;
}

.and-pg-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 8px 8px 4px;
}

@media (max-width: 420px) {
    .and-pg-fields {
        grid-template-columns: 1fr;
    }
}

.and-pg-field__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 8px;
}

.and-pg-input {
    width: 100%;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 700;
}

.and-pg-field__hint {
    margin: 6px 0 0;
    font-size: 0.68rem;
    color: #94a3b8;
    line-height: 1.35;
}

.and-pg-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 8px 8px;
}

.and-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    padding: 12px 18px;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.and-pg-btn:active {
    transform: scale(0.97);
}

.and-pg-btn--primary {
    flex: 1;
    min-width: 140px;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.28);
}

.and-pg-btn--ghost {
    color: #475569;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.and-pg-usage-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 4px 8px;
}

.and-pg-usage-empty {
    margin: 0;
    padding: 24px 12px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
}

.and-pg-user {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.and-pg-user:last-child {
    border-bottom: 0;
}

.and-pg-user__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.12);
}

.and-pg-user__body {
    flex: 1;
    min-width: 0;
}

.and-pg-user__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.and-pg-user__name {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
}

.and-pg-user__role {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
}

.and-pg-user__sub {
    margin: 2px 0 8px;
    font-size: 0.72rem;
    color: #94a3b8;
}

.and-pg-user__bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.1);
    overflow: hidden;
    margin-bottom: 8px;
}

.and-pg-user__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
}

.and-pg-user__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.72rem;
    color: #64748b;
}

.and-pg-user__stats em {
    font-style: normal;
    font-weight: 800;
    color: #334155;
}

.and-ai-banner__chev {
    color: var(--and-text-muted);
    flex-shrink: 0;
}

.and-main {
    flex: 1;
    padding: var(--and-space-md);
    padding-bottom: var(--and-space-lg);
}

.and-main--no-pad {
    padding: 0;
}

/* --------------------------------------------------------------------------
   4. Bottom Navigation Bar
   -------------------------------------------------------------------------- */
.and-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--and-z-nav, 130);
    width: 100%;
    max-width: 100vw;
    background: transparent;
    pointer-events: none;
}

.and-bottom-nav__shell {
    pointer-events: auto;
    position: relative;
    border-radius: 0;
    border-top: 1px solid var(--and-bottom-nav-shell-border);
    padding: var(--and-nav-shell-pt) 12px calc(var(--and-nav-shell-pb) + var(--and-safe-bottom));
    overflow: visible;
}

.and-bottom-nav__shell::before,
.and-bottom-nav__shell::after {
    display: none;
}

.and-bottom-nav__track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 54px 1fr;
    align-items: end;
    column-gap: 0;
    height: var(--and-nav-row);
    min-height: var(--and-nav-row);
}

.and-bottom-nav__indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--and-nav-ease-out),
        opacity var(--and-nav-ease);
    will-change: transform;
}

.and-bottom-nav__indicator.is-fab {
    width: var(--and-nav-fab-size);
    height: var(--and-nav-fab-size);
    border-radius: 50%;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.and-bottom-nav__indicator.is-initial {
    transition: none !important;
}

.and-bottom-nav__side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: end;
    align-self: end;
    min-width: 0;
    height: var(--and-nav-row);
}

.and-bottom-nav__fab-slot {
    width: 54px;
    height: var(--and-nav-row);
    position: relative;
    justify-self: center;
    align-self: end;
}

.and-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 52px;
    min-width: 44px;
    height: var(--and-nav-row);
    padding: 0;
    color: var(--and-bottom-nav-icon);
    position: relative;
    z-index: 1;
    transition: color var(--and-nav-ease), transform var(--and-nav-ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.and-bottom-nav__item.is-pressing {
    transform: scale(0.96);
}

.and-bottom-nav__item.is-active,
.and-bottom-nav__item.is-navigating {
    color: var(--and-bottom-nav-icon-active);
}

.and-bottom-nav__item.is-pressing .and-bottom-nav__svg {
    transform: scale(0.92);
    transition-duration: 0.12s;
}

.and-bottom-nav__item.is-active .and-bottom-nav__svg,
.and-bottom-nav__item.is-navigating .and-bottom-nav__svg {
    transform: none;
    transition-delay: 0s;
}

.and-bottom-nav__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--and-bottom-nav-chip-bg);
    border: 1px solid var(--and-bottom-nav-chip-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    -webkit-backdrop-filter: blur(var(--and-bottom-nav-chip-blur)) saturate(1.15);
    backdrop-filter: blur(var(--and-bottom-nav-chip-blur)) saturate(1.15);
    color: var(--and-bottom-nav-icon);
    transition:
        color var(--and-nav-ease),
        background var(--and-nav-ease),
        border-color var(--and-nav-ease),
        transform var(--and-nav-ease);
}

.and-bottom-nav__svg {
    display: block;
    width: 20px;
    height: 20px;
    overflow: visible;
    shape-rendering: geometricPrecision;
    opacity: 1;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.25;
    color: inherit;
    transition:
        width var(--and-nav-ease),
        height var(--and-nav-ease),
        stroke-width var(--and-nav-ease);
}

.and-bottom-nav__item:not(.and-bottom-nav__item--center).is-active .and-bottom-nav__icon {
    background: var(--and-bottom-nav-chip-active-bg);
    border-color: var(--and-bottom-nav-chip-active-border);
    color: var(--and-bottom-nav-icon-active);
    box-shadow: var(--and-elev-1);
    transform: none;
}

.and-bottom-nav__item:not(.and-bottom-nav__item--center).is-active .and-bottom-nav__svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.25;
    color: var(--and-bottom-nav-icon-active);
}

.and-bottom-nav__item:not(.and-bottom-nav__item--center):active .and-bottom-nav__icon {
    transform: scale(0.94);
    background: #fff;
}

.and-bottom-nav__item:not(.and-bottom-nav__item--center).is-active:active .and-bottom-nav__icon {
    background: var(--and-bottom-nav-chip-active-bg);
    transform: scale(0.96);
}

.and-bottom-nav__item[data-spa-nav="favorit"].is-active .and-bottom-nav__svg path {
    fill: rgba(255, 90, 0, 0.22);
    stroke: currentColor;
    opacity: 1;
}

.and-bottom-nav__fab {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -36%);
    width: var(--and-nav-fab-size);
    height: var(--and-nav-fab-size);
    border-radius: 50%;
    background: linear-gradient(160deg, #ff8a3d 0%, #ff5a00 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: var(--and-elev-fab);
    transition:
        transform var(--and-nav-ease-out),
        box-shadow var(--and-nav-ease),
        background var(--and-nav-ease);
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}

.and-bottom-nav__item--center {
    max-width: none;
    flex: none;
    gap: 0;
    padding: 0;
    width: var(--and-nav-fab-size);
    height: var(--and-nav-fab-size);
    color: #ffffff;
}

.and-bottom-nav__item--center .and-bottom-nav__icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: #ffffff;
}

.and-bottom-nav__svg--center {
    width: 22px;
    height: 22px;
    stroke: #ffffff;
    stroke-width: 2;
}

.and-bottom-nav__item--center.is-active {
    color: #ffffff;
    transform: translate(-50%, calc(-36% - 2px)) scale(1.04);
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.32);
}

.and-bottom-nav__item--center.is-active .and-bottom-nav__svg--center {
    width: 22px;
    height: 22px;
}

.and-bottom-nav__item--center:active,
.and-bottom-nav__fab:active {
    transform: translate(-50%, -36%) scale(0.94);
}

.and-bottom-nav__item--center.is-active:active {
    transform: translate(-50%, calc(-36% - 1px)) scale(1.02);
}

.and-bottom-nav__fab .and-bottom-nav__svg {
    display: block;
}

@media (prefers-reduced-motion: reduce) {

    .and-bottom-nav__item,
    .and-bottom-nav__icon,
    .and-bottom-nav__fab,
    .and-bottom-nav__indicator,
    .and-nav-drawer__indicator {
        transition: none !important;
    }
}

/* Buku module — bottom nav 5 tab (ikon + label) */
.and-bottom-nav--buku .and-bottom-nav__shell {
    padding-top: 6px;
    padding-bottom: calc(6px + var(--and-safe-bottom));
}

.and-bottom-nav--buku .and-bottom-nav__track {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center;
    column-gap: 0;
    height: auto;
    min-height: var(--and-buku-nav-row);
}

.and-bottom-nav--buku .and-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: var(--and-buku-nav-row);
    padding: 2px 0 0;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.and-bottom-nav--buku .and-bottom-nav__icon {
    width: 40px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--and-bottom-nav-chip-bg);
    border: 1px solid var(--and-bottom-nav-chip-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    -webkit-backdrop-filter: blur(var(--and-bottom-nav-chip-blur)) saturate(1.15);
    backdrop-filter: blur(var(--and-bottom-nav-chip-blur)) saturate(1.15);
    color: var(--and-bottom-nav-icon);
}

.and-bottom-nav--buku .and-bottom-nav__svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.25;
    color: inherit;
}

.and-bottom-nav--buku .and-bottom-nav__label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: #64748b;
}

.and-bottom-nav--buku .and-bottom-nav__item.is-active,
.and-bottom-nav--buku .and-bottom-nav__item.is-navigating {
    color: var(--and-bottom-nav-icon-active);
}

.and-bottom-nav--buku .and-bottom-nav__item.is-active .and-bottom-nav__label {
    color: var(--and-bottom-nav-icon-active);
}

.and-bottom-nav--buku .and-bottom-nav__item.is-active .and-bottom-nav__icon {
    background: var(--and-bottom-nav-chip-active-bg);
    border-color: var(--and-bottom-nav-chip-active-border);
    color: var(--and-bottom-nav-icon-active);
    transform: none;
}

.and-bottom-nav--buku .and-bottom-nav__indicator {
    width: 40px;
    height: 36px;
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.and-card {
    background: var(--and-bg-card);
    border: 1px solid var(--and-border);
    border-radius: var(--and-radius-lg);
    overflow: hidden;
    transition: border-color var(--and-transition), transform var(--and-transition);
}

.and-card:active {
    transform: scale(0.98);
}

.and-card--link {
    cursor: pointer;
    display: block;
}

.and-card--link:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

.and-card--glow {
    box-shadow: var(--and-shadow-accent);
    border-color: rgba(99, 102, 241, 0.25);
}

.and-card__body {
    padding: var(--and-space-md);
}

.and-card__body--sm {
    padding: var(--and-space-sm) var(--and-space-md);
}

.and-card__body--lg {
    padding: var(--and-space-lg);
}

.and-card__header {
    padding: var(--and-space-md);
    border-bottom: 1px solid var(--and-border);
    display: flex;
    align-items: center;
    gap: var(--and-space-sm);
}

.and-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--and-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   6. Stat Cards (Dashboard)
   -------------------------------------------------------------------------- */
.and-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--and-space-sm);
    margin-bottom: var(--and-space-md);
}

.and-stat-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--and-radius-xl);
    padding: var(--and-space-md);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--and-transition-slow), box-shadow var(--and-transition-slow);
    display: block;
    text-decoration: none;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.and-stat-card:active {
    transform: scale(0.97);
}

.and-stat-card::before {
    display: none;
}

.and-stat-card--barang {
    --and-gradient: linear-gradient(90deg, #6366f1, #818cf8);
}

.and-stat-card--pinjam {
    --and-gradient: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.and-stat-card--st {
    --and-gradient: linear-gradient(90deg, #10b981, #34d399);
}

.and-stat-card--service {
    --and-gradient: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.and-stat-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--and-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--and-space-sm);
    background: var(--and-icon-bg, var(--and-accent-surface));
}

.and-stat-card--barang .and-stat-card__icon {
    --and-icon-bg: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.and-stat-card--pinjam .and-stat-card__icon {
    --and-icon-bg: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.and-stat-card--st .and-stat-card__icon {
    --and-icon-bg: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-stat-card--service .and-stat-card__icon {
    --and-icon-bg: rgba(255, 90, 0, 0.12);
    color: #ff5a00;
}

.and-stat-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--and-text-primary);
    margin-bottom: 2px;
}

.and-stat-card__label {
    font-size: 0.75rem;
    color: var(--and-text-muted);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. List Items
   -------------------------------------------------------------------------- */
.and-list {
    display: flex;
    flex-direction: column;
    gap: var(--and-space-xs);
}

.and-list-item {
    background: var(--and-bg-card);
    border: 1px solid var(--and-border);
    border-radius: var(--and-radius-md);
    padding: var(--and-space-md);
    display: flex;
    align-items: center;
    gap: var(--and-space-md);
    transition: border-color var(--and-transition), transform var(--and-transition);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.and-list-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    transition: opacity var(--and-transition);
}

.and-list-item:active::after {
    opacity: 1;
}

.and-list-item:active {
    transform: scale(0.99);
}

.and-list-item__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--and-radius-md);
    background: var(--and-accent-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--and-accent-light);
    flex-shrink: 0;
}

.and-list-item__body {
    flex: 1;
    min-width: 0;
}

.and-list-item__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--and-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-list-item__subtitle {
    font-size: 0.8125rem;
    color: var(--and-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-list-item__meta {
    font-size: 0.75rem;
    color: var(--and-text-secondary);
    text-align: right;
    flex-shrink: 0;
}

/* Gambar default — path kosong atau file tidak ditemukan (404) */
img.and-img--fallback,
.and-img--fallback {
    object-fit: contain !important;
    padding: 14%;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(224, 231, 255, 0.9));
    box-sizing: border-box;
}

.and-list-item__thumb img.and-img--fallback,
.and-asset-row__thumb img.and-img--fallback,
.and-asset-card__media img.and-img--fallback,
.and-rst-card__thumb img.and-img--fallback,
.and-pjm-item__thumb img.and-img--fallback,
.and-prof-asset-card__thumb img.and-img--fallback,
.and-restock-row__thumb img.and-img--fallback,
.and-item-gallery__hero img.and-img--fallback {
    padding: 18%;
}

/* Barang list — gambar + filter (selaras mobile m-data-barang) */
.and-list--barang {
    gap: var(--and-space-sm);
}

.and-list-item--barang {
    align-items: stretch;
    padding: 10px 12px;
}

.and-list-item__thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--and-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--and-bg-card-alt);
    border: 1px solid var(--and-border);
}

.and-list-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-list-item__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.and-list-item__tag {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--and-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.and-barang-stok {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--and-radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}

.and-barang-stok--ok {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.and-barang-stok--low {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.and-barang-stok--empty {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.and-list-item__price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--and-accent-light);
    margin-top: 2px;
}

.and-list-item__sku {
    font-size: 0.75rem;
    color: var(--and-text-muted);
    margin-top: 2px;
}

.and-barang-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.and-barang-toolbar__count {
    font-size: 0.8125rem;
    color: var(--and-text-muted);
}

.and-barang-sort {
    position: relative;
}

.and-barang-sort__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--and-radius-full);
    border: 1px solid var(--and-border);
    background: var(--and-bg-card-alt);
    color: var(--and-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.and-barang-sort__trigger:active {
    background: var(--and-accent-surface);
}

.and-barang-sort__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 168px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--and-bg-surface);
    border: 1px solid var(--and-border);
    border-radius: var(--and-radius-md);
    box-shadow: var(--and-shadow-lg);
    z-index: 50;
}

.and-barang-sort__option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-radius: var(--and-radius-sm);
    background: transparent;
    color: var(--and-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.and-barang-sort__option.is-active {
    background: var(--and-accent-surface);
    color: var(--and-accent-light);
    font-weight: 600;
}

.and-barang-sort__option:active {
    background: rgba(255, 255, 255, 0.06);
}

.and-barang-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.and-barang-chips::-webkit-scrollbar {
    display: none;
}

.and-barang-chip {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: var(--and-radius-full);
    border: 1px solid var(--and-border);
    background: var(--and-bg-card-alt);
    color: var(--and-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.14s ease,
        box-shadow 0.28s ease;
}

.and-barang-chip.is-active {
    background: var(--and-accent-surface);
    border-color: var(--and-accent);
    color: var(--and-accent-light);
}

.and-barang-chip:active {
    transform: scale(0.97);
}

.and-chip-track {
    position: relative;
    isolation: isolate;
}

.and-chip-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform, width, height;
    transition:
        transform 0.46s cubic-bezier(0.34, 1.28, 0.64, 1),
        width 0.42s cubic-bezier(0.34, 1.22, 0.64, 1),
        height 0.38s cubic-bezier(0.34, 1.18, 0.64, 1),
        opacity 0.24s ease,
        background 0.32s ease,
        box-shadow 0.32s ease,
        border-radius 0.32s ease;
}

.and-chip-indicator.is-visible {
    opacity: 1;
}

.and-chip-track > :not(.and-chip-indicator) {
    position: relative;
    z-index: 1;
}

.and-chip-track--barang {
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.and-chip-track--inbox {
    gap: 6px;
    padding: 2px 0 6px;
}

.and-chip-track--ra {
    padding: 5px;
}

.and-chip-track--segment {
    padding: 5px;
}

.and-chip-track--status {
    padding: 4px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.and-chip-track .and-barang-chip,
.and-chip-track .and-inbox-tab,
.and-chip-track .and-ra-view-tab,
.and-chip-track .and-st-segment__btn,
.and-chip-track .and-ang-status-chip {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transition:
        color 0.34s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.34, 1.18, 0.64, 1),
        font-weight 0.2s ease;
}

.and-chip-track .and-barang-chip.is-active {
    color: #c94500;
    font-weight: 700;
    transform: scale(1.03);
}

.and-chip-track .and-inbox-tab.is-active {
    color: #fff;
    font-weight: 800;
    transform: scale(1.03);
}

.and-chip-track .and-ra-view-tab.is-active {
    color: #fff;
    transform: scale(1.02);
}

.and-chip-track .and-st-segment__btn.is-active {
    transform: scale(1.02);
}

.and-chip-track .and-ang-status-chip.is-active {
    transform: scale(1.03);
}

.and-chip-track .and-ang-status-chip[data-status="proses"].is-active { color: #b45309; }
.and-chip-track .and-ang-status-chip[data-status="acc"].is-active { color: #047857; }
.and-chip-track .and-ang-status-chip[data-status="ditolak"].is-active { color: #b91c1c; }
.and-chip-track .and-ang-status-chip[data-status="realisasi_selesai"].is-active { color: #0369a1; }

@media (prefers-reduced-motion: reduce) {
    .and-chip-indicator,
    .and-chip-track .and-barang-chip,
    .and-chip-track .and-inbox-tab,
    .and-chip-track .and-ra-view-tab,
    .and-chip-track .and-st-segment__btn,
    .and-chip-track .and-ang-status-chip {
        transition-duration: 0.01ms !important;
    }
}

.and-mb-sm {
    margin-bottom: var(--and-space-sm);
}

/* --------------------------------------------------------------------------
   8. Badges / Status Pills
   -------------------------------------------------------------------------- */
.and-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--and-radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.and-badge--dipinjam {
    background: var(--and-status-dipinjam);
    color: var(--and-status-dipinjam-text);
}

.and-badge--telat {
    background: var(--and-status-telat);
    color: var(--and-status-telat-text);
}

.and-badge--kembali,
.and-badge--dikembalikan {
    background: var(--and-status-kembali);
    color: var(--and-status-kembali-text);
}

.and-badge--parsial {
    background: var(--and-status-parsial);
    color: var(--and-status-parsial-text);
}

.and-badge--tidak_dikembalikan {
    background: var(--and-status-telat);
    color: var(--and-status-telat-text);
}

.and-badge--active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.and-badge--inactive {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
}

/* --------------------------------------------------------------------------
   9. Search Bar
   -------------------------------------------------------------------------- */
.and-search {
    position: relative;
    margin-bottom: var(--and-space-md);
}

.and-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--and-text-muted);
    pointer-events: none;
    display: flex;
}

.and-search__input {
    width: 100%;
    background: var(--and-bg-input);
    border: 1px solid var(--and-border);
    border-radius: var(--and-radius-full);
    color: var(--and-text-primary);
    font-size: 0.9375rem;
    padding: 11px 16px 11px 44px;
    outline: none;
    transition: border-color var(--and-transition), box-shadow var(--and-transition);
}

.and-search__input::placeholder {
    color: var(--and-text-muted);
}

.and-search__input:focus {
    border-color: var(--and-accent);
    box-shadow: 0 0 0 3px var(--and-accent-glow);
}

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */
.and-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--and-space-sm);
    padding: 12px 20px;
    border-radius: var(--and-radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all var(--and-transition);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.and-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity var(--and-transition);
}

.and-btn:active::after {
    opacity: 1;
}

.and-btn:active {
    transform: scale(0.97);
}

.and-btn--primary {
    background: linear-gradient(135deg, var(--and-accent), var(--and-accent-dark));
    color: #fff;
    box-shadow: var(--and-shadow-accent);
}

.and-btn--primary:hover {
    box-shadow: 0 6px 28px rgba(99, 102, 241, 0.45);
}

.and-btn--brown {
    background: linear-gradient(135deg, var(--and-nav-brown-0) 0%, var(--and-nav-brown-2) 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(117, 84, 66, 0.32);
}

.and-btn--brown:hover {
    box-shadow: 0 10px 28px rgba(117, 84, 66, 0.42);
}

.and-btn--ghost {
    background: var(--and-accent-surface);
    color: var(--and-accent-light);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.and-btn--outline {
    background: rgba(255, 255, 255, 0.85);
    color: var(--and-accent);
    border: 1px solid rgba(255, 90, 0, 0.28);
}

.and-btn--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.and-btn--sm {
    padding: 8px 14px;
    font-size: 0.8125rem;
    border-radius: var(--and-radius-sm);
}

.and-btn--full {
    width: 100%;
}

.and-btn--loading {
    pointer-events: none;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   11. Form Inputs
   -------------------------------------------------------------------------- */
.and-form-group {
    margin-bottom: var(--and-space-md);
}

.and-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--and-text-secondary);
    margin-bottom: var(--and-space-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.and-input {
    width: 100%;
    background: var(--and-bg-input);
    border: 1px solid var(--and-border);
    border-radius: var(--and-radius-md);
    color: var(--and-text-primary);
    font-size: 0.9375rem;
    padding: 12px 16px;
    outline: none;
    transition: border-color var(--and-transition), box-shadow var(--and-transition);
}

.and-input::placeholder {
    color: var(--and-text-muted);
}

.and-input:focus {
    border-color: var(--and-accent);
    box-shadow: 0 0 0 3px var(--and-accent-glow);
}

/* --------------------------------------------------------------------------
   12. AI Chat Interface
   -------------------------------------------------------------------------- */
.and-body--chat {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.and-body--chat .and-spa-outlet-wrap,
.and-body--chat #and-spa-outlet {
    height: 100%;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.and-body--chat .and-spa-outlet {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.and-body--chat .and-layout--chat {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom));
}

.and-body--chat.and-body--no-nav .and-layout--chat,
.and-body--chat.and-body--no-nav .and-layout--ai-chat {
    padding-bottom: 0;
}

.and-body--chat:not(.and-body--no-nav) .and-chat__composer {
    bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom));
}

/* AI Chat — header + composer tetap, hanya pesan yang scroll */
.and-layout--ai-chat {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    max-width: var(--and-content-max);
    margin-inline: auto;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--and-space-md);
    background: #f4f6f8;
    --and-ai-shell-radius: 1.25rem;
    --and-ai-inset-radius: var(--and-radius-lg);
}

.and-ai-header {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: var(--and-content-max);
    margin: 0 auto;
    padding: 0;
    border-radius: 0 0 var(--and-ai-shell-radius, 1.25rem) var(--and-ai-shell-radius, 1.25rem);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92));
    border: 1px solid rgba(255, 200, 140, 0.14);
    border-top: 0;
    box-shadow: 0 20px 40px -26px rgba(15, 23, 42, 0.7);
    overflow: hidden;
    transition:
        background 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-ai-header::after {
    content: '';
    position: absolute;
    inset: auto -20% -54% 18%;
    height: 110px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 0;
}

.and-ai-header__bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(var(--and-safe-top) + 10px) 12px 12px;
}

.and-ai-header__back,
.and-ai-header__action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: var(--and-radius-full);
    background: rgba(241, 245, 249, 0.9);
    color: #475569;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.and-ai-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.and-ai-header__back--desktop,
.and-ai-header__actions--desktop {
    display: none;
}

.and-ai-header__action-label {
    display: none;
}

.and-ai-header__action--danger {
    color: #dc2626;
    background: rgba(254, 226, 226, 0.85);
}

.and-ai-header__back:active,
.and-ai-header__action:active {
    transform: scale(0.96);
}

.and-ai-header__brand {
    flex: 1;
    min-width: 0;
    padding-left: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.and-ai-header__menu-btn {
    flex-shrink: 0;
    transition: background 0.35s ease, color 0.35s ease, transform 0.2s ease;
}

.and-ai-dd {
    position: relative;
    flex-shrink: 0;
}

.and-ai-dd__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: var(--and-radius-full);
    background: rgba(241, 245, 249, 0.9);
    color: #475569;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.and-ai-dd__trigger:active {
    transform: scale(0.96);
}

.and-ai-dd__panel {
    position: absolute;
    right: 0;
    z-index: 120;
    min-width: 220px;
    max-width: min(92vw, 320px);
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.and-ai-dd__panel--attached {
    position: static;
    right: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    clip-path: none;
    transform: none;
    pointer-events: none;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-ai-dd__panel--attached.is-open:not(.is-closing) {
    max-height: var(--and-ai-dd-h, 520px);
    pointer-events: auto;
}

.and-ai-dd__panel--attached.is-closing {
    max-height: 0;
    pointer-events: none;
}

.and-ai-dd__panel--attached[hidden] {
    display: none !important;
}

.and-ai-dd__panel-body {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__panel-body {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.and-ai-dd__panel--attached.is-closing .and-ai-dd__panel-body {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.and-ai-dd__panel--header .and-ai-dd__panel-body {
    padding: 0 8px;
    border-top: 1px solid transparent;
    background: rgba(255, 255, 255, 0.08);
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__panel--header .and-ai-dd__panel-body {
    padding: 4px 8px 10px;
    border-top-color: rgba(255, 200, 140, 0.24);
}

.and-ai-dd__panel--header .and-ai-dd__item {
    border-radius: var(--and-ai-inset-radius, var(--and-radius-lg));
    color: rgba(255, 247, 237, 0.94);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
    transition: background 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.12, 0.64, 1);
}

.and-ai-dd__panel--header .and-ai-dd__item:last-child {
    margin-bottom: 0;
}

.and-ai-dd__panel--header .and-ai-dd__item:active {
    transform: scale(0.985);
    background: rgba(255, 255, 255, 0.12);
}

.and-ai-dd__panel--header .and-ai-dd__item--danger {
    color: #fecaca;
}

.and-ai-dd__panel--header .and-ai-dd__item--danger svg {
    color: #fca5a5;
}

.and-ai-dd__panel--composer .and-ai-dd__panel-body {
    padding: 2px 2px 0;
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.65);
}

.and-ai-dd__panel--composer.is-open .and-ai-dd__panel-body--terbaru {
    margin: 0;
    padding: 10px 12px 12px;
    border-radius: var(--and-ai-shell-radius, 1.25rem) var(--and-ai-shell-radius, 1.25rem) 0 0;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.65);
    box-shadow: none;
}

.and-ai-dd__panel--composer.is-open .and-ai-dd__panel-body--terbaru .and-ai-dd__scroll {
    max-height: none;
    overflow: hidden;
    margin-top: 0;
    padding: 6px 8px 14px;
    border-radius: var(--and-ai-inset-radius, var(--and-radius-lg));
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__item,
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__nav-card {
    animation: andAiDdItemIn 0.38s cubic-bezier(0.34, 1.12, 0.64, 1) both;
}

.and-ai-dd__panel--attached.is-closing .and-ai-dd__item,
.and-ai-dd__panel--attached.is-closing .and-ai-dd__nav-card {
    animation: none !important;
    opacity: 0;
    transform: translate3d(0, -4px, 0);
    transition:
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__heading,
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__section,
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__hero {
    animation: andAiDdItemIn 0.34s cubic-bezier(0.34, 1.12, 0.64, 1) both;
}

.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__scroll .and-ai-dd__item:nth-child(1),
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__nav-list .and-ai-dd__nav-card:nth-child(1) { animation-delay: 0.04s; }
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__scroll .and-ai-dd__item:nth-child(2),
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__nav-list .and-ai-dd__nav-card:nth-child(2) { animation-delay: 0.08s; }
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__scroll .and-ai-dd__item:nth-child(3),
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__nav-list .and-ai-dd__nav-card:nth-child(3) { animation-delay: 0.12s; }
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__scroll .and-ai-dd__item:nth-child(4),
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__nav-list .and-ai-dd__nav-card:nth-child(4) { animation-delay: 0.16s; }
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__scroll .and-ai-dd__item:nth-child(5),
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__nav-list .and-ai-dd__nav-card:nth-child(5) { animation-delay: 0.2s; }
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__scroll .and-ai-dd__item:nth-child(n+6),
.and-ai-dd__panel--attached.is-open:not(.is-closing) .and-ai-dd__nav-list .and-ai-dd__nav-card:nth-child(n+6) { animation-delay: 0.24s; }

.and-ai-dd__panel--attached.is-open:not(.is-closing) > .and-ai-dd__panel-body > .and-ai-dd__item:nth-child(1) { animation-delay: 0.05s; }
.and-ai-dd__panel--attached.is-open:not(.is-closing) > .and-ai-dd__panel-body > .and-ai-dd__item:nth-child(2) { animation-delay: 0.1s; }
.and-ai-dd__panel--attached.is-open:not(.is-closing) > .and-ai-dd__panel-body > .and-ai-dd__item:nth-child(3) { animation-delay: 0.15s; }

.and-ai-header.is-dd-open,
.and-ai-header.is-dd-closing {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(124, 45, 18, 0.94));
    box-shadow: 0 22px 44px -24px rgba(15, 23, 42, 0.78);
    transition:
        background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-chat__composer-shell.is-dd-open,
.and-chat__composer-shell.is-dd-closing {
    border-color: rgba(255, 90, 0, 0.3);
    box-shadow: 0 12px 32px -10px rgba(255, 90, 0, 0.2);
}

@keyframes andAiDdItemIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .and-ai-dd__panel--attached,
    .and-ai-dd__panel-body,
    .and-ai-header,
    .and-layout--ai-chat .and-chat__composer-shell,
    .and-ai-dd__panel--attached.is-open .and-ai-dd__item,
    .and-ai-dd__panel--attached.is-open .and-ai-dd__nav-card,
    .and-ai-dd__panel--attached.is-open .and-ai-dd__heading,
    .and-ai-dd__panel--attached.is-open .and-ai-dd__section,
    .and-ai-dd__panel--attached.is-open .and-ai-dd__hero {
        transition-duration: 0.01ms !important;
        animation: none !important;
    }
}

.and-ai-dd__panel--header .and-ai-dd__scroll,
.and-ai-dd__panel--header {
    max-height: none;
}

.and-ai-header.is-dd-open .and-ai-header__menu-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.and-ai-header .and-ai-dd__trigger,
.and-ai-header__menu-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.and-ai-dd__panel--down {
    top: calc(100% + 8px);
}

.and-ai-dd__panel--up {
    bottom: calc(100% + 10px);
    max-height: min(62vh, 420px);
    display: flex;
    flex-direction: column;
}

.and-ai-dd__heading {
    margin: 0;
    padding: 8px 12px 6px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.and-ai-dd__section {
    margin: 8px 0 4px;
    padding: 8px 12px 2px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ff5a00;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.and-ai-dd__scroll {
    overflow-y: auto;
    max-height: min(52vh, 360px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.and-ai-dd__scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.and-ai-dd__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.and-ai-dd__item svg {
    flex-shrink: 0;
    color: #64748b;
}

.and-ai-dd__item:active {
    background: rgba(241, 245, 249, 0.95);
}

.and-ai-dd__item--tx {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.72);
    background: rgba(255, 255, 255, 0.88);
    margin-bottom: 6px;
}

.and-ai-dd__item--tx:last-child {
    margin-bottom: 0;
}

.and-ai-dd__item--tx:active {
    background: rgba(248, 250, 252, 0.98);
}

.and-ai-dd__tx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.and-ai-dd__tx-type {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ff5a00;
}

.and-ai-dd__tx-line {
    display: block;
    width: 100%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
}

.and-ai-dd__tx-line strong {
    font-weight: 800;
}

.and-ai-dd__tx-meta {
    display: block;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
}

.and-ai-dd__tx-total {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
    padding: 3px 8px;
    border-radius: 999px;
}

.and-ai-dd__tx-dot {
    margin: 0 4px;
    color: #cbd5e1;
}

.and-ai-dd__item--danger {
    color: #dc2626;
}

.and-ai-dd__item--danger svg {
    color: #dc2626;
}

.and-ai-dd--composer {
    position: relative;
}

.and-layout--ai-chat .and-chat__composer-shell {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding: 0;
    border-radius: var(--and-ai-shell-radius, 1.25rem);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 28px -8px rgba(59, 130, 246, 0.22);
    transition:
        border-color 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.and-ai-dd__panel--composer {
    order: -1;
    flex-shrink: 0;
}

.and-ai-dd__panel--composer .and-ai-dd__scroll {
    max-height: none;
    overflow: visible;
    padding-bottom: 4px;
    padding-right: 2px;
}

.and-layout--ai-chat .and-chat__input-row {
    display: grid;
    grid-template-columns: 40px 40px minmax(0, 1fr) 40px;
    align-items: center;
    padding: 8px 12px;
    gap: 6px;
    overflow: visible;
    min-height: 56px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.and-layout--ai-chat .and-chat__input-row > .and-ai-dd__trigger--menu,
.and-layout--ai-chat .and-chat__input-row > .and-chat__vision-btn,
.and-layout--ai-chat .and-chat__input-row > .and-chat__send-btn {
    margin: 0;
    width: 40px;
    height: 40px;
    justify-self: center;
    align-self: center;
}

.and-layout--ai-chat .and-chat__input-row > .and-chat__vision-btn {
    margin: 0;
}

.and-layout--ai-chat .and-chat__composer-shell:has(.and-voice-composer__strip:not([hidden])) .and-chat__input-row {
    padding-bottom: 6px;
}

.and-layout--ai-chat .and-chat__input-row:focus-within {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.and-layout--ai-chat .and-chat__textarea {
    grid-column: 3;
    width: 100%;
    flex: none;
    min-width: 0;
    min-height: 40px;
    max-height: 120px;
    padding: 9px 8px;
    line-height: 1.4;
    align-self: center;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

.and-layout--ai-chat .and-chat__input-row > .and-chat__send-btn.and-chat__mic-btn {
    grid-column: 4;
    border-radius: 12px;
    box-shadow: none;
}

.and-layout--ai-chat .and-chat__textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.and-ai-dd__trigger--menu {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin: 2px 0;
    color: #ff5a00;
    background: rgba(255, 90, 0, 0.1);
    border: 1px solid rgba(255, 90, 0, 0.22);
    border-radius: 12px;
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.2s ease;
}

.and-ai-dd__trigger--menu .and-ai-dd__trigger-icon {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.and-ai-dd__trigger--menu .and-ai-dd__trigger-icon--close {
    display: none;
}

.and-ai-dd__trigger--menu.is-active .and-ai-dd__trigger-icon--menu {
    display: none;
}

.and-ai-dd__trigger--menu.is-active .and-ai-dd__trigger-icon--close {
    display: block;
}

.and-ai-dd__trigger--menu.is-active {
    background: rgba(255, 90, 0, 0.18);
    border-color: rgba(255, 90, 0, 0.38);
}

.and-chat__vision-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin: 2px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ff5a00;
    background: rgba(255, 90, 0, 0.1);
    border: 1px solid rgba(255, 90, 0, 0.22);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.28s ease, border-color 0.28s ease, transform 0.2s ease, box-shadow 0.28s ease;
    box-shadow: 0 0 0 0 rgba(255, 90, 0, 0);
}

.and-chat__vision-btn:active {
    background: rgba(255, 90, 0, 0.18);
    border-color: rgba(255, 90, 0, 0.38);
    transform: scale(0.96);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}

.and-ai-dd__panel-body--terbaru {
    padding: 8px 10px 10px;
}

.and-ai-dd__panel--composer.is-open .and-ai-dd__panel-body--terbaru .and-ai-dd__hero {
    margin-bottom: 6px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.75);
}

.and-ai-dd__hero {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0 2px 10px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.75);
}

.and-ai-dd__hero-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 90, 0, 0.12);
    color: #ff5a00;
}

.and-ai-dd__hero-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.and-ai-dd__hero-sub {
    margin: 3px 0 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
}

.and-ai-dd__nav-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.and-ai-dd__nav-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: var(--and-ai-inset-radius, var(--and-radius-lg));
    background: #fff;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 14px -6px rgba(15, 23, 42, 0.1);
    transition: transform 0.22s cubic-bezier(0.34, 1.12, 0.64, 1), box-shadow 0.22s ease, background 0.22s ease;
}

.and-ai-dd__nav-card:active {
    transform: scale(0.985);
    background: rgba(255, 248, 242, 0.96);
    box-shadow:
        0 1px 2px rgba(255, 90, 0, 0.08),
        0 8px 18px -10px rgba(255, 90, 0, 0.28);
}

.and-ai-dd__nav-card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 90, 0, 0.1);
    border: 1px solid rgba(255, 90, 0, 0.18);
    color: #ff5a00;
}

.and-ai-dd__nav-card[data-type="realisasi"] .and-ai-dd__nav-card-icon {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.2);
    color: #16a34a;
}

.and-ai-dd__nav-card[data-type="peminjaman"] .and-ai-dd__nav-card-icon,
.and-ai-dd__nav-card[data-type="serah_terima"] .and-ai-dd__nav-card-icon {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    color: #2563eb;
}

.and-ai-dd__nav-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.and-ai-dd__nav-card-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.and-ai-dd__nav-card-meta {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-ai-dd__nav-card-meta strong {
    font-weight: 800;
    color: #334155;
}

.and-ai-dd__nav-card-dot {
    margin: 0 4px;
    opacity: 0.55;
}

.and-ai-dd__nav-chevron {
    flex-shrink: 0;
    color: #cbd5e1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.and-ai-dd__nav-card:active .and-ai-dd__nav-chevron {
    color: #ff5a00;
    transform: translateX(2px);
}

.and-ai-dd__empty-state {
    padding: 14px 12px;
    border-radius: 0.9rem;
    background: rgba(248, 250, 252, 0.9);
    border: 1px dashed rgba(148, 163, 184, 0.35);
    text-align: center;
}

.and-ai-dd__empty-state p {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.4;
}

.and-ai-header__mark {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #ff8c42, #ff5a00);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 90, 0, 0.28);
}

.and-ai-header__avatar {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #dbeafe, #fef3c7);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    flex-shrink: 0;
}

.and-ai-header__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.and-ai-header__status {
    margin: 2px 0 0;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(254, 215, 170, 0.92);
}

.and-main--ai-chat {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 6px;
    max-width: var(--and-content-max);
    margin: 0 auto;
    width: 100%;
}

.and-layout--ai-chat .and-chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.and-layout--ai-chat .and-chat__messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px calc(var(--and-chat-composer-offset, 72px) + var(--and-safe-bottom) + 12px);
    gap: 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.and-layout--ai-chat .and-chat__messages::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.and-layout--ai-chat .and-chat__composer--portaled {
    position: fixed;
    left: var(--and-ai-track-left, 50%);
    right: auto;
    bottom: calc(var(--and-safe-bottom) + 8px);
    width: var(--and-ai-track-width, min(calc(var(--and-content-max) - var(--and-space-md) * 2), calc(100vw - var(--and-space-md) * 2)));
    max-width: var(--and-ai-track-width, min(calc(var(--and-content-max) - var(--and-space-md) * 2), calc(100vw - var(--and-space-md) * 2)));
    transform: translateX(var(--and-ai-track-offset-x, -50%));
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 95;
}

body.and-body--chat:not(.and-body--no-nav) .and-chat__composer--portaled {
    bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom));
}

.and-layout--ai-chat .and-chat__composer--portaled .and-chat__composer-shell {
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
}

.and-chat__date-pill {
    display: flex;
    justify-content: center;
    margin: 4px 0 10px;
}

.and-chat__date-pill span {
    padding: 5px 14px;
    border-radius: var(--and-radius-full);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-layout--ai-chat .and-chat__avatar--ai {
    width: 32px;
    height: 32px;
    border-radius: 0.625rem;
    background: #fff4ed;
    border: 1px solid rgba(255, 90, 0, 0.2);
    box-shadow: 0 2px 8px rgba(255, 90, 0, 0.12);
}

.and-layout--ai-chat .and-chat__bubble--ai {
    padding: 12px 14px;
    border-radius: 1.125rem;
    border-bottom-left-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.1);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.and-chat__bubble--welcome-typing {
    min-height: 7.5rem;
}

.and-chat__type-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: text-bottom;
    border-radius: 1px;
    background: #ff5a00;
    animation: and-chat-type-cursor 0.9s step-end infinite;
}

@keyframes and-chat-type-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .and-chat__type-cursor {
        animation: none;
    }
}

.and-layout--ai-chat .and-chat__bubble--user {
    padding: 10px 14px;
    border-radius: 1.125rem;
    border-bottom-right-radius: 6px;
    background: linear-gradient(135deg, #ff5a00 0%, #ff8c42 100%);
    box-shadow: 0 6px 18px -4px rgba(255, 90, 0, 0.45);
}

.and-layout--ai-chat .and-chat__avatar--user {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.and-chat__bubble--thinking {
    min-width: 180px;
    padding: 12px 14px !important;
}

.and-chat__thinking-text {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #3b82f6;
    transition: opacity 0.2s ease;
}

.and-chat__thinking-bar {
    margin-top: 8px;
    height: 3px;
    border-radius: 2px;
    background: rgba(59, 130, 246, 0.15);
    overflow: hidden;
}

.and-chat__thinking-bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    animation: and-ai-think-bar 1.1s ease-in-out infinite;
}

@keyframes and-ai-think-bar {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(280%);
    }
}

.and-layout--ai-chat .and-chat__result {
    margin-top: 12px;
    padding: 14px;
    border-radius: 1rem;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.and-layout--ai-chat .and-chat__result-title {
    color: #f8fafc;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.and-layout--ai-chat .and-chat__result-subtitle {
    color: #cbd5e1;
}

.and-layout--ai-chat .and-chat__result-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.and-layout--ai-chat .and-chat__result-nomor,
.and-layout--ai-chat .and-chat__result-card-name,
.and-layout--ai-chat .and-chat__result-meta-v {
    color: #f8fafc;
}

.and-layout--ai-chat .and-chat__result-meta-k {
    color: #94a3b8;
}

.and-layout--ai-chat .and-chat__result-status {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.and-layout--ai-chat .and-chat__result-foot {
    color: #93c5fd;
}

.and-layout--ai-chat .and-chat__reply-text strong {
    color: #0f172a;
}

/* Bubble dengan list hasil / menu transaksi — melebar penuh */
.and-layout--ai-chat .and-chat__bubble-wrap--wide,
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__result),
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__menu),
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__pick-list) {
    max-width: 100%;
    width: 100%;
}

.and-layout--ai-chat .and-chat__bubble-wrap--wide .and-chat__bubble-col,
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__result) .and-chat__bubble-col,
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__menu) .and-chat__bubble-col,
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__pick-list) .and-chat__bubble-col {
    flex: 1;
    max-width: none;
    min-width: 0;
}

.and-layout--ai-chat .and-chat__bubble-wrap--wide .and-chat__bubble--ai,
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__result) .and-chat__bubble--ai,
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__menu) .and-chat__bubble--ai,
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__pick-list) .and-chat__bubble--ai {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.and-layout--ai-chat .and-chat__bubble-wrap--wide .and-chat__result,
.and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__result) .and-chat__result {
    width: 100%;
}

.and-main--chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: var(--and-content-max);
    margin: 0 auto;
    width: 100%;
}

.and-page-header--chat {
    max-width: var(--and-content-max);
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--and-space-md) * 2);
    align-items: center;
    min-height: 56px;
}

.and-chat-header__meta {
    flex: 1;
    min-width: 0;
}

.and-chat-header__back {
    flex-shrink: 0;
    text-decoration: none;
}

.and-chat-header__back:active {
    transform: scale(0.94);
}

.and-page-header--chat .and-page-header__title {
    font-size: 1.0625rem;
    line-height: 1.2;
}

.and-page-header--chat .and-page-header__action {
    margin-top: 0;
}

.and-chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.and-chat__messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 8px calc(var(--and-chat-composer-offset, 72px) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 8px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.and-chat__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 2px;
    animation: and-chat-suggest-in 0.45s ease both;
}

@keyframes and-chat-suggest-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.and-chat__bubble-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

.and-chat__bubble-wrap--enter {
    animation: and-chat-bubble-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.and-chat__bubble-wrap--user {
    flex-direction: row-reverse;
    align-self: flex-end;
    align-items: flex-end;
    max-width: 94%;
    animation-name: and-chat-bubble-in-user;
}

.and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):not(.and-chat__bubble-wrap--typing) {
    align-self: flex-start;
    max-width: 94%;
}

.and-chat__bubble-wrap--typing {
    align-self: flex-start;
    max-width: 88%;
}

@keyframes and-chat-bubble-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes and-chat-bubble-in-user {
    from {
        opacity: 0;
        transform: translateX(12px) translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

.and-chat__bubble-col {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 38px);
}

.and-chat__bubble-wrap--user .and-chat__bubble-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.and-chat__avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--and-radius-full);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
}

.and-chat__avatar--ai {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #7c3aed;
    box-shadow: var(--and-shadow-sm);
    outline: 1px solid rgba(255, 255, 255, 0.35);
}

.and-chat__avatar--ai svg {
    stroke: #7c3aed;
}

.and-chat__avatar--user {
    background: linear-gradient(135deg, #ff5a00, #ff7a33);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.28);
}

.and-chat__bubble {
    width: fit-content;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.9375rem;
    line-height: 1.55;
    word-break: break-word;
}

.and-chat__bubble--ai {
    padding: 8px 12px;
    border-radius: var(--and-radius-lg);
    border-bottom-left-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    outline: 1px solid rgba(255, 255, 255, 0.38);
    color: var(--and-text-primary);
    box-shadow: var(--and-shadow-glass);
    font-size: 0.875rem;
    line-height: 1.45;
}

.and-chat__bubble--typing {
    min-width: 64px;
    padding: 6px 12px;
}

.and-chat__bubble--user {
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--and-accent) 0%, #ff7a33 100%);
    color: #fff;
    border-bottom-right-radius: 8px;
    box-shadow: var(--and-shadow-accent);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.and-chat__bubble--error {
    padding: 8px 12px;
    background: rgba(254, 242, 242, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(239, 68, 68, 0.22);
    outline: none;
    color: #dc2626;
}

.and-chat__time {
    font-size: 0.625rem;
    color: var(--and-text-muted);
    margin-top: 3px;
    padding: 0 2px;
}

.and-chat__bubble-wrap--user .and-chat__time {
    text-align: right;
}

.and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user) .and-chat__time {
    text-align: left;
}

/* Chat Composer — fixed floating pill (selaras bottom nav) */
.and-chat__composer {
    position: fixed;
    bottom: calc(var(--and-nav-float-gap) + var(--and-safe-bottom));
    left: var(--and-space-md);
    right: var(--and-space-md);
    z-index: 90;
    max-width: var(--and-content-max);
    margin: 0 auto;
    pointer-events: none;
}

.and-chat__composer-shell {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-radius: var(--and-radius-pill);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--and-shadow-nav);
    outline: 1px solid rgba(255, 255, 255, 0.4);
}

.and-chat__mcp-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.and-chat__mcp-actions:has(.and-chat__mcp-btn:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.and-chat__mcp-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 56px;
    padding: 8px 6px;
    border-radius: var(--and-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.55);
    color: var(--and-text-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.and-chat__mcp-btn svg {
    flex-shrink: 0;
}

.and-chat__mcp-btn:active {
    transform: scale(0.96);
}

.and-chat__mcp-btn--stok {
    color: #c2410c;
    background: rgba(255, 90, 0, 0.1);
    border-color: rgba(255, 90, 0, 0.22);
}

.and-chat__mcp-btn--stok:active {
    background: rgba(255, 90, 0, 0.18);
}

.and-chat__mcp-btn--lokasi {
    color: #6d28d9;
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.2);
}

.and-chat__mcp-btn--lokasi:active {
    background: rgba(124, 58, 237, 0.18);
}

.and-chat__mcp-btn--restock {
    color: #0e7490;
    background: rgba(8, 145, 178, 0.1);
    border-color: rgba(8, 145, 178, 0.22);
}

.and-chat__mcp-btn--restock:active {
    background: rgba(8, 145, 178, 0.18);
}

@media (min-width: 640px) {
    .and-chat__messages {
        padding-left: 16px;
        padding-right: 16px;
    }

    .and-ai-header {
        width: 100%;
        max-width: var(--and-content-max);
        border-radius: 0 0 var(--and-ai-shell-radius, 1.25rem) var(--and-ai-shell-radius, 1.25rem);
    }

    .and-layout--ai-chat .and-chat__composer {
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        max-width: none;
    }

    .and-chat__composer {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - var(--and-space-md) * 2);
    }

    .and-chat__bubble-wrap--user,
    .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):not(.and-chat__bubble-wrap--typing):not(.and-chat__bubble-wrap--wide) {
        max-width: 88%;
    }

    .and-layout--ai-chat .and-chat__bubble-wrap--wide,
    .and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__result),
    .and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__menu),
    .and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):has(.and-chat__pick-list) {
        max-width: 100%;
    }
}

.and-chat__quick-actions {
    display: flex;
    gap: var(--and-space-xs);
    overflow-x: auto;
    padding-bottom: 2px;
}

.and-chat__quick-actions::-webkit-scrollbar {
    display: none;
}

.and-chat__quick-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--and-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--and-border);
    background: var(--and-bg-card);
    color: var(--and-text-secondary);
    cursor: pointer;
    transition: all var(--and-transition);
    white-space: nowrap;
}

.and-chat__quick-btn:active {
    transform: scale(0.94);
}

.and-chat__quick-btn--mcp {
    border-color: rgba(8, 145, 178, 0.3);
    background: rgba(8, 145, 178, 0.08);
    color: #22d3ee;
}

.and-chat__quick-btn--mcp:hover {
    border-color: rgba(8, 145, 178, 0.6);
    background: rgba(8, 145, 178, 0.15);
}

.and-chat__input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 4px 4px 4px 16px;
    min-height: 48px;
    border-radius: var(--and-radius-pill);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 4px 16px rgba(15, 23, 42, 0.05);
    transition: border-color var(--and-transition), box-shadow var(--and-transition), background var(--and-transition);
}

.and-chat__input-row:focus-within {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 90, 0, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 3px var(--and-accent-glow);
}

.and-chat__textarea {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--and-text-primary);
    font-size: 0.9375rem;
    padding: 12px 6px 12px 0;
    resize: none;
    max-height: 120px;
    min-height: 24px;
    outline: none;
    line-height: 1.5;
    font-family: inherit;
    box-shadow: none;
}

.and-chat__textarea::placeholder {
    color: var(--and-text-muted);
}

.and-chat__textarea:focus {
    border: none;
    box-shadow: none;
}

.and-chat__send-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--and-radius-full);
    background: linear-gradient(135deg, var(--and-accent), var(--and-accent-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: all var(--and-transition);
    box-shadow: var(--and-shadow-accent);
}

.and-chat__send-btn:active {
    transform: scale(0.9);
}

.and-chat__send-btn:disabled {
    background: var(--and-bg-card-alt);
    color: var(--and-text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* AI chat — voice input (tema orange) */
.and-chat__mic-btn {
    position: relative;
    overflow: visible;
}

.and-chat__mic-btn .and-voice-composer__icon--stop {
    display: none;
}

.and-chat__mic-btn.is-voice-listening {
    background: linear-gradient(135deg, #ff8c42 0%, #ff5a00 100%);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.22), var(--and-shadow-accent);
    animation: and-voice-composer-pulse 1.15s ease-in-out infinite;
}

.and-chat__mic-btn.is-voice-listening .and-voice-composer__icon--mic {
    display: none;
}

.and-chat__mic-btn.is-voice-listening .and-voice-composer__icon--stop {
    display: block;
}

.and-voice-composer__ripples {
    position: absolute;
    inset: -4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.and-chat__mic-btn.is-voice-listening .and-voice-composer__ripples {
    opacity: 1;
}

.and-voice-composer__ripples span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 90, 0, 0.45);
    animation: and-voice-composer-ripple 1.4s ease-out infinite;
}

.and-voice-composer__ripples span:nth-child(2) {
    animation-delay: 0.45s;
}

.and-layout--ai-chat .and-chat__input-row.is-voice-active {
    border-color: rgba(255, 90, 0, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(255, 90, 0, 0.16);
}

.and-layout--ai-chat .and-chat__composer-shell.is-voice-active {
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 10px 28px -8px rgba(255, 90, 0, 0.28);
}

.and-voice-composer__strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 10px 10px;
    padding: 8px 14px;
    border-radius: var(--and-radius-full);
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.12) 0%, rgba(255, 90, 0, 0.05) 100%);
    border: 1px solid rgba(255, 90, 0, 0.2);
    font-size: 0.75rem;
    font-weight: 600;
    color: #c2410c;
    animation: and-voice-fade-in 0.22s ease;
}

.and-voice-composer__strip[hidden] {
    display: none !important;
}

.and-voice-composer__strip.is-error {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%);
    border-color: rgba(220, 38, 38, 0.18);
    color: #b91c1c;
}

.and-voice-composer__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5a00;
    animation: and-voice-composer-dot 1.1s ease-in-out infinite;
}

.and-voice-composer__strip.is-error .and-voice-composer__dot {
    background: #dc2626;
    animation: none;
}

@keyframes and-voice-composer-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes and-voice-composer-ripple {
    0% { transform: scale(0.65); opacity: 0.75; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes and-voice-composer-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
    .and-chat__mic-btn.is-voice-listening,
    .and-voice-composer__ripples span,
    .and-voice-composer__dot,
    .and-voice-composer__strip {
        animation: none !important;
    }
}

/* MCP Result Card */
.and-mcp-result {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(8, 145, 178, 0.25);
    border-radius: var(--and-radius-lg);
    padding: var(--and-space-md);
    margin-top: var(--and-space-xs);
}

.and-mcp-result__header {
    display: flex;
    align-items: center;
    gap: var(--and-space-sm);
    margin-bottom: var(--and-space-sm);
}

.and-mcp-result__tool-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--and-radius-full);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(8, 145, 178, 0.15);
    color: #22d3ee;
    letter-spacing: 0.05em;
}

.and-mcp-result__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--and-text-primary);
}

.and-mcp-result__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--and-border);
}

.and-mcp-result__row:last-child {
    border-bottom: none;
}

.and-mcp-result__key {
    font-size: 0.8125rem;
    color: var(--and-text-muted);
}

.and-mcp-result__val {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--and-text-primary);
}

.and-chat__bubble--ai .and-mcp-result {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--and-radius-md);
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.and-chat__bubble--ai .and-mcp-result__row {
    padding: 4px 0;
}

/* AI Chat — menu & result cards (glass, compact) */
.and-chat__reply-text {
    line-height: 1.45;
}

.and-chat__reply-text strong {
    color: var(--and-text-primary);
    font-weight: 700;
}

.and-chat__reply-text p {
    margin: 0;
}

.and-chat__menu {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.and-chat__menu-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--and-text-muted);
    margin-bottom: 6px;
}

.and-chat__menu-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.and-chat__menu-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border-radius: var(--and-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--and-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--and-transition), border-color var(--and-transition), transform 0.2s ease;
}

a.and-chat__menu-btn {
    text-decoration: none;
    box-sizing: border-box;
}

.and-chat__menu-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(124, 58, 237, 0.28);
}

.and-chat__menu--pick .and-chat__menu-btn--pick {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.and-chat__menu-toggle {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--and-radius-md);
    background: transparent;
    color: var(--and-accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.and-chat__menu-toggle:active {
    opacity: 0.75;
}

.and-chat__pick-list {
    margin-top: 8px;
    padding: 0;
    background: transparent;
    border: none;
}

.and-chat__pick-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.and-chat__pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.and-chat__pick-row:active {
    transform: scale(0.985);
    background: rgba(255, 248, 242, 0.98);
    border-color: rgba(255, 90, 0, 0.24);
    box-shadow: 0 4px 14px -10px rgba(255, 90, 0, 0.25);
}

.and-chat__pick-vision {
    margin-top: 10px;
}

.and-chat__pick-vision .and-bis-compare-banner {
    margin: 0;
    padding: 10px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.and-chat__pick-vision .and-bis-compare-banner__frame {
    min-height: 72px;
}

.and-chat__pick-vision .and-bis-compare-banner__frame img {
    max-height: 88px;
}

.and-chat__pick-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.and-chat__pick-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-chat__pick-thumb-img--ph {
    object-fit: contain;
    padding: 20%;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(224, 231, 255, 0.9));
}

.and-chat__pick-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.and-chat__pick-sku {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: #94a3b8;
    line-height: 1.2;
}

.and-chat__pick-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.32;
    color: #0f172a;
}

.and-chat__pick-stok {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.25;
}

.and-chat__result {
    margin-top: 8px;
}

.and-chat__result-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-accent);
    margin-bottom: 2px;
}

.and-chat__result-subtitle {
    font-size: 0.6875rem;
    color: var(--and-text-muted);
    margin-bottom: 6px;
}

.and-chat__result-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.and-chat__result-card {
    display: block;
    padding: 8px 10px;
    border-radius: var(--and-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-decoration: none;
    color: inherit;
}

.and-chat__result-card--link:active {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(255, 90, 0, 0.25);
}

.and-chat__result-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.and-chat__result-nomor {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--and-text-muted);
}

.and-chat__result-status {
    font-size: 0.6875rem;
    padding: 2px 6px;
    border-radius: var(--and-radius-full);
    background: rgba(124, 58, 237, 0.15);
    color: var(--and-accent-light);
}

.and-chat__result-card-name,
.and-chat__result-stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--and-text-primary);
    margin-bottom: 4px;
}

.and-chat__result-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.and-chat__result-meta-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8125rem;
}

.and-chat__result-meta-k {
    color: var(--and-text-muted);
}

.and-chat__result-meta-v {
    font-weight: 600;
    color: var(--and-text-primary);
    text-align: right;
}

.and-chat__result-foot {
    display: block;
    margin-top: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--and-accent);
}

/* Typing indicator */
.and-chat__typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    min-height: 16px;
}

.and-chat__typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7c3aed;
    opacity: 0.55;
    animation: and-typing-bounce 1.1s ease-in-out infinite;
}

.and-chat__typing span:nth-child(2) {
    animation-delay: 0.18s;
}

.and-chat__typing span:nth-child(3) {
    animation-delay: 0.36s;
}

@keyframes and-typing-bounce {

    0%,
    60%,
    100% {
        transform: translateY(0) scale(0.85);
        opacity: 0.45;
    }

    30% {
        transform: translateY(-8px) scale(1);
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   13. Login Page — Liquid glass (InvenTech)
   -------------------------------------------------------------------------- */
.and-body--login .and-spa-outlet-wrap {
    background: #dbeafe;
}

.and-body--login #and-spa-outlet {
    min-height: 100svh;
}

.and-login-page {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    overflow: hidden;
    color: #1e293b;
}

.and-login-page__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.and-login-page__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.and-login-page__blob--top {
    top: -10%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: rgba(59, 130, 246, 0.2);
}

.and-login-page__blob--bottom {
    bottom: -20%;
    left: -10%;
    width: 70%;
    height: 70%;
    background: rgba(79, 70, 229, 0.15);
}

.and-login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 40px 32px;
    border-radius: 3rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.15);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.and-login-card__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}

.and-login-card__logo {
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
    border-radius: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
    outline: 1px solid rgba(15, 23, 42, 0.06);
}

.and-login-card__logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-login-card__title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.and-login-card__subtitle {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #64748b;
    opacity: 0.85;
}

.and-login-card__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.and-login__error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 1rem;
    padding: 12px 14px;
    color: #dc2626;
    font-size: 0.8125rem;
    font-weight: 600;
    display: none;
}

.and-login__error.is-visible {
    display: block;
}

.and-login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-login-field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
}

.and-login-field__label {
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    opacity: 0.75;
    padding-left: 4px;
}

.and-login-field__wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.and-login-field__wrap:focus-within .and-login-field__icon {
    color: var(--and-accent, #ff5a00);
}

.and-login-field__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    display: flex;
    pointer-events: none;
    transition: color 0.2s ease;
}

.and-login-field__input {
    width: 100%;
    padding: 16px 48px 16px 52px;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.42);
    outline: none;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #334155;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.and-login-field__input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.and-login-field__input:focus {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}

.and-login-field__toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 6px;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.and-login-field__toggle:hover {
    color: #475569;
}

.and-login-field__eye {
    display: none;
    flex-shrink: 0;
}

.and-login-field__eye.is-active {
    display: block;
}

.and-login-field__link {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--and-accent, #ff5a00);
    cursor: pointer;
    text-decoration: none;
}

.and-login-field__link:hover {
    text-decoration: underline;
}

.and-login-field__link--inline {
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 800;
}

.and-login-remember {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -4px;
    padding: 0 4px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.and-login-remember__box {
    width: 20px;
    height: 20px;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--and-accent, #ff5a00);
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.and-login-remember__box svg {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.and-login-remember.is-active .and-login-remember__box {
    background: rgba(255, 255, 255, 0.85);
}

.and-login-remember.is-active .and-login-remember__box svg {
    opacity: 1;
    transform: scale(1);
}

.and-login-remember__text {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}

.and-login-submit {
    width: 100%;
    margin-top: 4px;
    padding: 16px 20px;
    border: none;
    border-radius: 1rem;
    background: var(--and-accent, #ff5a00);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 16px 32px rgba(255, 90, 0, 0.28);
    outline: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.and-login-submit:hover {
    box-shadow: 0 18px 36px rgba(255, 90, 0, 0.34);
    transform: translateY(-1px);
}

.and-login-submit:active {
    transform: translateY(0);
}

.and-login-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.and-login-card__foot {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    text-align: center;
}

.and-login-card__foot p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #64748b;
}

@media (min-width: 480px) {
    .and-login-card {
        padding: 48px 52px;
    }
}

/* --------------------------------------------------------------------------
   14. Section Headers
   -------------------------------------------------------------------------- */
.and-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--and-space-sm);
}

.and-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.and-section-link {
    font-size: 0.8125rem;
    color: var(--and-accent-light);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   15. Empty / Loading States
   -------------------------------------------------------------------------- */
.and-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--and-space-xl) var(--and-space-md);
    gap: var(--and-space-sm);
    color: var(--and-text-muted);
    text-align: center;
}

.and-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--and-radius-xl);
    background: var(--and-bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--and-text-muted);
    margin-bottom: var(--and-space-xs);
}

.and-empty__text {
    font-size: 0.875rem;
}

/* Skeleton loader */
.and-skeleton {
    background: linear-gradient(90deg, var(--and-bg-card) 25%, var(--and-bg-card-alt) 50%, var(--and-bg-card) 75%);
    background-size: 200% 100%;
    animation: and-skeleton-wave 1.5s ease-in-out infinite;
    border-radius: var(--and-radius-sm);
}

@keyframes and-skeleton-wave {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* --------------------------------------------------------------------------
   16. Detail Page
   -------------------------------------------------------------------------- */
.and-detail-hero {
    background: linear-gradient(160deg, var(--and-bg-card-alt), var(--and-bg-card));
    border: 1px solid var(--and-border);
    border-radius: var(--and-radius-xl);
    padding: var(--and-space-lg);
    margin-bottom: var(--and-space-md);
    position: relative;
    overflow: hidden;
}

.and-detail-hero::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, var(--and-accent-glow), transparent 70%);
    pointer-events: none;
}

.and-detail-hero__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--and-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--and-space-xs);
}

.and-detail-hero__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--and-text-primary);
    margin-bottom: var(--and-space-sm);
    line-height: 1.3;
}

.and-detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--and-space-xs);
    margin-bottom: var(--and-space-md);
}

.and-detail-hero__stok {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--and-accent-light);
}

.and-detail-hero__stok-label {
    font-size: 0.875rem;
    color: var(--and-text-muted);
}

.and-info-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.and-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--and-border);
    gap: var(--and-space-md);
}

.and-info-row:last-child {
    border-bottom: none;
}

.and-info-row__key {
    font-size: 0.8125rem;
    color: var(--and-text-muted);
    flex-shrink: 0;
}

.and-info-row__val {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--and-text-primary);
    text-align: right;
}

/* --------------------------------------------------------------------------
   17. Profile Page (Employee Detail)
   -------------------------------------------------------------------------- */
.and-layout--prof .and-main.and-prof {
    padding: 0;
    position: relative;
    overflow-x: hidden;
    background: #f4f6f8;
    min-height: 100%;
}

.and-layout--prof {
    padding-top: 0;
    padding-bottom: 0;
    background: #f4f6f8;
}

/* Mobile: wrapper transparan agar urutan hero → stats → body tetap sama */
.and-prof-aside {
    display: contents;
}

.and-prof-hero {
    position: relative;
    padding: calc(var(--and-safe-top, 0px) + 8px) 16px 52px;
    background: linear-gradient(165deg, #0f172a 0%, #134e4a 42%, #0f766e 100%);
    overflow: hidden;
}

.and-prof-hero__mesh {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.35'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.and-prof-hero__curve {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -1px;
    height: 42px;
    background: #f4f6f8;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

.and-prof-hero__toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.and-prof-hero__back,
.and-prof-hero__icon-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, transform 0.15s ease;
}

.and-prof-hero__back {
    text-decoration: none;
}

.and-prof-hero__back:active,
.and-prof-hero__icon-btn:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.16);
}

.and-prof-hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

.and-prof-hero__icon-btn--danger {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(252, 165, 165, 0.35);
    color: #fecaca;
}

.and-prof-hero__identity {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.and-prof-avatar-wrap {
    position: relative;
    margin-bottom: 4px;
}

.and-prof-avatar {
    width: 92px;
    height: 92px;
    border-radius: 1.35rem;
    border: 4px solid rgba(15, 23, 42, 0.55);
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.and-prof-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-prof-avatar__badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #22c55e;
    border: 2px solid #0f172a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.45);
}

.and-prof-name {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.15;
}

.and-prof-role {
    margin: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.82);
}

.and-prof-empty-note {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.72);
}

.and-prof-stats {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: -28px 16px 0;
    padding: 14px 8px;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.18);
}

.and-prof-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    text-align: center;
}

.and-prof-stats__item + .and-prof-stats__item {
    border-left: 1px solid rgba(226, 232, 240, 0.9);
}

.and-prof-stats__item strong {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.and-prof-stats__item span {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-prof-body {
    position: relative;
    z-index: 1;
    padding: 18px 16px calc(var(--and-nav-total) + 16px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-prof-group__label {
    margin: 0 0 8px;
    padding: 0 6px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-prof-group__card {
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 8px 24px -14px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.and-prof-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid rgba(241, 245, 249, 0.95);
    background: transparent;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease;
}

.and-prof-row:last-child {
    border-bottom: 0;
}

.and-prof-row:active {
    background: rgba(248, 250, 252, 0.95);
}

.and-prof-row__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.and-prof-row__icon--blue { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.and-prof-row__icon--violet { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.and-prof-row__icon--amber { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.and-prof-row__icon--green { background: rgba(16, 185, 129, 0.12); color: #059669; }
.and-prof-row__icon--rose { background: rgba(244, 63, 94, 0.12); color: #e11d48; }
.and-prof-row__icon--slate { background: rgba(100, 116, 139, 0.12); color: #475569; }

.and-prof-row__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.and-prof-row__title {
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.and-prof-row__sub {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-prof-row__chev {
    flex-shrink: 0;
    color: #cbd5e1;
}

.and-prof-row--danger .and-prof-row__title {
    color: #dc2626;
}

.and-prof-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 0.875rem;
    padding: 20px 12px;
}

.and-prof-skeleton--hero {
    width: 92px;
    height: 92px;
    border-radius: 1.35rem;
    margin: 0 auto 12px;
    background: linear-gradient(110deg, rgba(255,255,255,0.08) 8%, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0.08) 33%);
    background-size: 200% 100%;
    animation: and-skeleton-wave 1.2s ease-in-out infinite;
}

.and-prof-skeleton--nav {
    height: 220px;
    border-radius: 1.25rem;
    background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
    background-size: 200% 100%;
    animation: and-skeleton-wave 1.2s ease-in-out infinite;
}
.and-prof-settings__title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    padding: 0 4px 10px;
}

.and-prof-settings__card {
    padding: 16px 18px;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.and-prof-settings__label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.and-prof-settings__desc {
    font-size: 0.8125rem;
    color: var(--and-text-muted);
    margin-bottom: 12px;
}

.and-prof-settings__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.and-prof-skeleton {
    border-radius: 1rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.35) 25%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.35) 75%);
    background-size: 200% 100%;
    animation: and-skeleton-wave 1.2s ease-in-out infinite;
}

.and-prof-skeleton--hero {
    height: 220px;
}

.and-menu-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--and-bg-card);
    border: 1px solid var(--and-border);
    border-radius: var(--and-radius-lg);
    overflow: hidden;
}

.and-menu-item {
    display: flex;
    align-items: center;
    gap: var(--and-space-md);
    padding: 14px var(--and-space-md);
    color: var(--and-text-primary);
    cursor: pointer;
    transition: background var(--and-transition);
    text-decoration: none;
    position: relative;
}

.and-menu-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 56px;
    right: 0;
    height: 1px;
    background: var(--and-border);
}

.and-menu-item:active {
    background: var(--and-bg-card-alt);
}

.and-menu-item__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--and-radius-md);
    background: var(--and-accent-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--and-accent-light);
    flex-shrink: 0;
}

.and-menu-item--danger .and-menu-item__icon {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.and-menu-item--danger .and-menu-item__label {
    color: #f87171;
}

.and-menu-item__label {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
}

.and-menu-item__arrow {
    color: var(--and-text-muted);
}

/* --------------------------------------------------------------------------
   18. Toast / Snackbar
   -------------------------------------------------------------------------- */
.and-toast-container {
    position: fixed;
    bottom: calc(var(--and-nav-height) + var(--and-safe-bottom) + var(--and-space-md));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - (var(--and-space-md) * 2));
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--and-space-sm);
    pointer-events: none;
}

.and-toast {
    background: #fff;
    color: var(--and-text-primary);
    border-radius: var(--and-radius-lg);
    padding: 12px var(--and-space-md);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--and-shadow-lg);
    animation: and-toast-in 0.3s ease-out, and-toast-out 0.3s ease-in 2.7s forwards;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--and-space-sm);
    width: fit-content;
    max-width: min(360px, calc(100vw - 48px));
}

.and-toast--success {
    background: #10b981;
    color: #fff;
}

.and-toast--error {
    background: #ef4444;
    color: #fff;
}

.and-toast--warning {
    background: #f59e0b;
    color: #fff;
}

.and-toast--info {
    background: var(--and-accent);
    color: #fff;
}

@keyframes and-toast-in {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes and-toast-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-10px);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   18b. Msgbox — dialog global (sukses / peringatan / konfirmasi)
   -------------------------------------------------------------------------- */
.and-msgbox {
    --and-msgbox-max-width: 22.5rem;
    --and-msgbox-gutter: 1.5rem;
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, var(--and-safe-top)) var(--and-msgbox-gutter) max(16px, var(--and-safe-bottom));
    pointer-events: none;
    color: #0f172a;
    isolation: isolate;
}

.and-msgbox[hidden] {
    display: none !important;
}

.and-msgbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.and-msgbox.is-open {
    pointer-events: auto;
}

.and-msgbox.is-open .and-msgbox__backdrop {
    opacity: 1;
    pointer-events: auto;
}

.and-msgbox.is-closing .and-msgbox__backdrop {
    opacity: 0;
    pointer-events: none;
}

.and-msgbox__panel {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: min(var(--and-msgbox-max-width), calc(100vw - (var(--and-msgbox-gutter) * 2)));
    min-width: 0;
    flex: 0 1 auto;
    align-self: center;
    margin-inline: auto;
    max-height: min(85vh, 32rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 20px 18px;
    border-radius: 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.35);
    text-align: center;
    transform: translateY(18px) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1),
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
    pointer-events: none;
    color: #0f172a;
    will-change: transform, opacity;
}

.and-msgbox:not([hidden]) .and-msgbox__panel {
    visibility: visible;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1),
        opacity 0.3s ease,
        visibility 0s;
}

.and-msgbox.is-open .and-msgbox__panel {
    pointer-events: auto;
    transform: translateY(0) scale(1);
    opacity: 1;
}

.and-msgbox.is-closing .and-msgbox__panel {
    transform: translateY(12px) scale(0.97);
    opacity: 0;
    pointer-events: none;
}

.and-msgbox.is-open .and-msgbox__icon {
    animation: and-msgbox-icon-in 0.34s cubic-bezier(0.34, 1.2, 0.64, 1) 0.04s both;
}

@keyframes and-msgbox-icon-in {
    from {
        transform: scale(0.88);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .and-msgbox__backdrop,
    .and-msgbox__panel {
        transition-duration: 0.01ms !important;
    }
    .and-msgbox.is-open .and-msgbox__icon {
        animation: none;
    }
}

.and-msgbox__title {
    margin: 0 0 8px;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0f172a !important;
    line-height: 1.3;
}

.and-msgbox__message {
    margin: 0 0 18px;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #475569 !important;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.and-msgbox__message[hidden] {
    display: none;
}

.and-msgbox__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.and-msgbox__icon--success {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.and-msgbox__icon--warning {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
}

.and-msgbox__icon--danger {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
}

.and-msgbox__icon--error {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
}

.and-msgbox__icon--info {
    background: rgba(59, 130, 246, 0.14);
    color: #2563eb;
}

.and-msgbox__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.and-msgbox__actions--dual {
    grid-template-columns: 1fr 1fr;
}

.and-msgbox__btn {
    min-height: 44px;
    padding: 10px 14px;
    border: none;
    border-radius: 0.875rem;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
}

.and-msgbox__btn:active {
    transform: scale(0.98);
}

.and-msgbox__btn--ghost {
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
}

.and-msgbox__btn--primary {
    background: var(--and-accent);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 90, 0, 0.28);
}

.and-msgbox__btn--success {
    background: #10b981;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.28);
    color: #fff;
}

.and-msgbox__btn--warning {
    background: #f59e0b;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.28);
    color: #fff;
}

.and-msgbox__btn--info {
    background: #3b82f6;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.28);
    color: #fff;
}

.and-msgbox__btn--danger {
    background: #ef4444;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.28);
    color: #fff;
}

body.and-msgbox-open {
    overflow: hidden;
}

body.and-msgbox-open--passive {
    overflow: auto;
}

.and-msgbox--overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 0 16px calc(var(--and-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 20px);
    pointer-events: none;
}

.and-msgbox--overlay.is-open {
    pointer-events: none;
}

.and-msgbox--overlay .and-msgbox__backdrop {
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
}

.and-msgbox--overlay .and-msgbox__panel {
    pointer-events: none;
    max-width: min(22rem, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 16px;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.35);
    transform: translateY(12px);
    opacity: 0;
}

.and-msgbox--overlay.is-open .and-msgbox__panel {
    transform: translateY(0);
    opacity: 1;
}

.and-msgbox--overlay.is-closing .and-msgbox__panel {
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
}

.and-msgbox--overlay.is-closing .and-msgbox__backdrop {
    opacity: 0;
}

.and-msgbox--overlay .and-msgbox__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}

.and-msgbox--overlay .and-msgbox__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.and-msgbox--overlay .and-msgbox__actions {
    display: none !important;
}

body.and-body--qrn-reading-nav.and-msgbox-open--passive .and-msgbox--overlay {
    padding-bottom: calc(var(--and-qrn-reading-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 16px);
}

.and-msgbox--compact {
    --and-msgbox-max-width: 18.75rem;
}

.and-msgbox--compact .and-msgbox__panel {
    padding: 16px 16px 14px;
}

.and-msgbox--compact .and-msgbox__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}

.and-msgbox--compact .and-msgbox__icon svg {
    width: 22px;
    height: 22px;
}

.and-msgbox--compact .and-msgbox__title {
    font-size: 0.9375rem;
    margin-bottom: 6px;
}

.and-msgbox--compact .and-msgbox__message {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-bottom: 14px;
}

.and-msgbox--compact.and-msgbox--no-message .and-msgbox__title {
    margin-bottom: 14px;
}

.and-msgbox--compact .and-msgbox__btn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.8125rem;
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-msgbox--compact .and-msgbox__panel {
        padding: 14px 14px 12px;
    }
}

/* --------------------------------------------------------------------------
   19. AI Welcome / Intro Card
   -------------------------------------------------------------------------- */
.and-ai-intro {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(255, 90, 0, 0.06));
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: var(--and-radius-xl);
    padding: var(--and-space-lg);
    text-align: center;
    margin-bottom: var(--and-space-xs);
    animation: and-chat-suggest-in 0.5s ease both;
}

.and-ai-intro__icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--and-ai-start), var(--and-ai-end));
    border-radius: var(--and-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--and-space-md);
    box-shadow: var(--and-shadow-ai);
}

.and-ai-intro__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--and-text-primary);
    margin-bottom: var(--and-space-xs);
}

.and-ai-intro__desc {
    font-size: 0.875rem;
    color: var(--and-text-secondary);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */
.and-mb-sm {
    margin-bottom: var(--and-space-sm);
}

.and-mb-md {
    margin-bottom: var(--and-space-md);
}

.and-mb-lg {
    margin-bottom: var(--and-space-lg);
}

.and-text-primary {
    color: var(--and-text-primary);
}

.and-text-secondary {
    color: var(--and-text-secondary);
}

.and-text-muted {
    color: var(--and-text-muted);
}

.and-text-accent {
    color: var(--and-accent-light);
}

.and-text-sm {
    font-size: 0.8125rem;
}

.and-text-xs {
    font-size: 0.75rem;
}

.and-fw-600 {
    font-weight: 600;
}

.and-fw-700 {
    font-weight: 700;
}

.and-d-flex {
    display: flex;
}

.and-align-center {
    align-items: center;
}

.and-justify-between {
    justify-content: space-between;
}

.and-gap-sm {
    gap: var(--and-space-sm);
}

.and-gap-md {
    gap: var(--and-space-md);
}

.and-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Spinner */
.and-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--and-border);
    border-top-color: var(--and-accent);
    border-radius: 50%;
    animation: and-spin 0.7s linear infinite;
    display: inline-block;
}

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

/* Divider */
.and-divider {
    border: none;
    border-top: 1px solid var(--and-border);
    margin: var(--and-space-md) 0;
}

/* Gradient text */
.and-text-gradient {
    background: linear-gradient(135deg, var(--and-accent-light), var(--and-ai-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Safe-area padding helpers */
.and-pt-safe {
    padding-top: var(--and-safe-top);
}

.and-pb-safe {
    padding-bottom: var(--and-safe-bottom);
}

/* ==========================================================================
   Assets list — Liquid Hub item cards
   ========================================================================== */
.and-main--barang {
    padding-top: calc(var(--and-page-inset-top) + 12px);
    padding-bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
}

.and-barang-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.and-barang-fabs {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.and-barang-fab {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--and-radius-full);
    background: linear-gradient(145deg, #ff7a1a 0%, #ff5a00 100%);
    color: #fff;
    box-shadow:
        0 0 0 3px #ffffff,
        0 6px 20px rgba(255, 90, 0, 0.35);
    border: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.and-barang-fab__svg {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.and-barang-fab:active {
    transform: scale(0.95);
}

/* Base toolbar — flex (aman desktop). Grid simetris hanya di mobile (lihat max-width di bawah). */
.and-barang-toolbar-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 15px 40px -10px rgba(15, 23, 42, 0.05);
    outline: 1px solid rgba(255, 255, 255, 0.4);
    overflow: visible;
}

.and-barang-filter-fields {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;
    align-items: stretch;
}

.and-barang-filter-field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.and-barang-filter-field__label {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
    padding-left: 4px;
    line-height: 1;
}

.and-barang-select--filter,
.and-barang-toolbar-panel .and-barang-select {
    appearance: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 0.875rem;
    background-color: rgba(255, 255, 255, 0.78);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #334155;
    padding: 9px 30px 9px 12px;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-barang-select--filter:focus,
.and-barang-toolbar-panel .and-barang-select:focus {
    outline: none;
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}

.and-barang-select {
    appearance: none;
    background: transparent;
    border: none;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #475569;
    padding: 6px 14px 6px 0;
    cursor: pointer;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}

.and-barang-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.78);
    color: #334155;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    align-self: flex-end;
    margin-bottom: 2px;
}

.and-barang-filter-btn[aria-expanded="true"] {
    background: rgba(255, 90, 0, 0.12);
    border-color: rgba(255, 90, 0, 0.25);
    color: var(--and-accent);
}

.and-barang-toolbar-panel__sep {
    width: 1px;
    height: 32px;
    background: rgba(148, 163, 184, 0.3);
    flex-shrink: 0;
    margin: 0 2px;
    align-self: flex-end;
    margin-bottom: 10px;
}

.and-barang-view-toggle {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: var(--and-radius-md);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-end;
}

.and-barang-view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--and-radius-sm);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.and-barang-view-toggle__btn.is-active {
    background: rgba(255, 255, 255, 0.92);
    color: var(--and-accent);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.and-desktop-filter-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.and-desktop-filter-sidebar .and-barang-chips--hero {
    margin: 0;
}

.and-desktop-filter-sidebar .and-barang-toolbar-panel {
    position: static;
    top: auto;
}

.and-barang-chips--panel {
    margin-bottom: 12px;
    width: 100%;
    min-width: 0;
}

.and-desktop-filter-sidebar .and-barang-chips--panel {
    margin-bottom: 12px;
}

.and-desktop-filter-sidebar .and-barang-toolbar-panel {
    margin-bottom: 12px;
}

@media (max-width: 1023px) {
    .and-desktop-filter-sidebar {
        gap: 12px;
        margin-bottom: 16px;
    }

    .and-desktop-filter-sidebar .and-barang-toolbar-panel,
    .and-desktop-filter-sidebar .and-barang-chips--panel,
    .and-desktop-filter-sidebar .and-favorit-toolbar {
        margin-bottom: 0;
    }

    .and-main--favorit > .and-barang-grid {
        margin-top: 2px;
        padding-top: 6px;
    }

    .and-main--favorit > .and-barang-search-notice:not([hidden]) {
        margin-bottom: 10px;
    }
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-desktop-filter-sidebar .and-barang-chips--panel,
    .and-desktop-filter-sidebar .and-barang-toolbar-panel,
    .and-desktop-filter-sidebar .and-favorit-toolbar {
        margin-bottom: 0;
    }
}

.and-desktop-content-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.and-barang-chips--panel .and-barang-chips {
    margin-bottom: 0;
}

/* Barang list — sub-kategori chips selaras hero top bar */
.and-barang-chips--hero {
    position: relative;
    margin: -6px 0 14px;
    padding: 0 14px 14px;
    overflow: hidden;
    border: 0;
    border-radius: 0 0 24px 24px;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92)),
        radial-gradient(circle at 12% 0%, rgba(255, 90, 0, 0.42), transparent 42%);
    box-shadow: 0 20px 40px -26px rgba(15, 23, 42, 0.7);
}

.and-barang-chips--hero::after {
    content: '';
    position: absolute;
    inset: auto -20% -54% 18%;
    height: 110px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(-8deg);
    pointer-events: none;
}

.and-barang-chips__eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 10px 2px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(254, 215, 170, 0.92);
}

.and-barang-chips--hero .and-barang-chips {
    position: relative;
    z-index: 1;
}

.and-barang-chips--hero .and-chip-track--barang {
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.and-barang-chips--hero .and-chip-track .and-barang-chip {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: rgba(255, 247, 237, 0.82);
    font-weight: 600;
}

.and-barang-chips--hero .and-chip-track .and-barang-chip.is-active {
    background: transparent;
    border-color: transparent;
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
}

.and-main--barang.and-barang-chips-open .and-data-hero,
.and-main--buku.and-barang-chips-open .and-data-hero,
.and-main--favorit.and-barang-chips-open .and-data-hero,
.and-main--data-restock.and-barang-chips-open .and-data-hero,
.and-main--restock.and-barang-chips-open .and-data-hero,
.and-main--karyawan.and-barang-chips-open .and-data-hero,
.and-main--btrx.and-barang-chips-open .and-data-hero,
.and-main--sti.and-barang-chips-open .and-data-hero,
.and-main--inbox.and-barang-chips-open:not(.and-desktop-list-grid) .and-data-hero,
.and-main--quran.and-barang-chips-open .and-data-hero {
    margin-bottom: 0;
    border-radius: 24px 24px 0 0;
}

/* Desktop-nav: hero tetap rounded penuh (chips di sidebar, bukan menempel hero) */
body.and-body--desktop-nav .and-main--barang.and-barang-chips-open > .and-data-hero,
body.and-body--desktop-nav .and-main--buku.and-barang-chips-open > .and-data-hero,
body.and-body--desktop-nav .and-main--favorit.and-barang-chips-open > .and-data-hero {
    margin-bottom: 0;
    border-radius: 24px;
}

.and-main--barang.and-barang-chips-open .and-barang-chips--hero,
.and-main--buku.and-barang-chips-open .and-barang-chips--hero,
.and-main--favorit.and-barang-chips-open .and-barang-chips--hero,
.and-main--data-restock.and-barang-chips-open .and-barang-chips--hero,
.and-main--restock.and-barang-chips-open .and-barang-chips--hero,
.and-main--karyawan.and-barang-chips-open .and-barang-chips--hero,
.and-main--btrx.and-barang-chips-open .and-barang-chips--hero,
.and-main--sti.and-barang-chips-open .and-barang-chips--hero,
.and-main--inbox.and-barang-chips-open:not(.and-desktop-list-grid) .and-barang-chips--hero,
.and-main--quran.and-barang-chips-open .and-barang-chips--hero {
    margin-top: 0;
}

/* Anggaran — divisi chips inline (putih, di bawah status hero) */
.and-main--data-restock .and-barang-chips--inline {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(51, 65, 85, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 28px -12px rgba(15, 23, 42, 0.24);
}

.and-main--data-restock .and-barang-chips--inline .and-barang-chips__eyebrow--inline {
    color: #64748b;
}

.and-main--data-restock .and-barang-chips--inline .and-chip-track--barang {
    width: 100%;
    min-width: 0;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(51, 65, 85, 0.12);
}

.and-main--data-restock .and-barang-chips--inline .and-chip-track .and-barang-chip {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #334155;
    font-weight: 600;
}

.and-main--data-restock .and-barang-chips--inline .and-chip-track .and-barang-chip.is-active {
    background: rgba(255, 255, 255, 0.92);
    border-color: transparent;
    color: var(--and-accent);
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.and-barang-chips--hero .and-chip-track .and-barang-chip.and-barang-chip--toggle.is-active {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: 800;
}

.and-rst-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px;
    padding: 0 4px;
}

.and-main--barang .and-barang-filter-btn[aria-expanded="true"],
.and-main--data-restock .and-barang-filter-btn[aria-expanded="true"],
.and-main--restock .and-barang-filter-btn[aria-expanded="true"],
.and-main--karyawan .and-barang-filter-btn[aria-expanded="true"],
.and-main--sti .and-barang-filter-btn[aria-expanded="true"] {
    background: rgba(255, 90, 0, 0.14);
    border-color: rgba(255, 90, 0, 0.32);
    color: var(--and-accent);
}

.and-barang-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-text-muted);
    margin: 0 4px 12px;
    padding-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.and-main--barang:not(.and-main--favorit) > .and-barang-count {
    padding-top: 18px;
    margin-top: 4px;
}

.and-barang-ai-wrap {
    margin: 0 2px 16px;
}

.and-barang-search-notice {
    margin: 0 4px 10px;
    padding: 10px 14px;
    border-radius: 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.and-barang-vision-panel {
    padding: 14px 14px 16px;
    border-radius: 1.2rem;
    background: linear-gradient(155deg, rgba(255, 237, 213, 0.72) 0%, rgba(255, 248, 242, 0.95) 42%, rgba(254, 243, 199, 0.38) 100%);
    border: 1px solid rgba(255, 90, 0, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 10px 28px -14px rgba(255, 90, 0, 0.28);
}

.and-barang-vision-panel__head {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 90, 0, 0.14);
}

.and-barang-vision-panel__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c2410c;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 90, 0, 0.18);
}

.and-barang-vision-panel__badge svg {
    flex-shrink: 0;
    color: #ff5a00;
}

.and-barang-vision-panel__notice {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.35;
    color: #0f172a;
}

.and-barang-vision-results-heading {
    margin: 0 4px 10px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-barang-vision-results-heading[hidden] {
    display: none !important;
}

.and-barang-ai-wrap:not([hidden]) + .and-barang-vision-results-heading:not([hidden]) {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.and-barang-grid.and-barang-grid--vision-active {
    margin-top: 0;
}

.and-barang-search-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 4px 10px;
    padding: 10px 14px;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.and-barang-search-loading[hidden] {
    display: none !important;
}

.and-barang-search-loading__spin {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 90, 0, 0.2);
    border-top-color: #ff5a00;
    border-radius: 50%;
    animation: and-spin 0.7s linear infinite;
}

.and-dash-search__search-spinner {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 90, 0, 0.2);
    border-top-color: #ff5a00;
    border-radius: 50%;
    animation: and-spin 0.7s linear infinite;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.and-dash-search.is-searching .and-dash-search__icon {
    opacity: 0;
}

.and-dash-search.is-searching .and-dash-search__search-spinner {
    opacity: 1;
}

.and-barang-grid--searching {
    opacity: 0.58;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.and-smart-search-notice {
    margin: 0;
    padding: 8px 12px;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: #475569;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.and-smart-search-notice--gemini {
    color: #c2410c;
    background: rgba(255, 90, 0, 0.08);
    border-color: rgba(255, 90, 0, 0.22);
}

.and-smart-search-notice--external {
    color: #9a3412;
    background: linear-gradient(145deg, rgba(255, 122, 26, 0.12) 0%, rgba(255, 90, 0, 0.08) 100%);
    border-color: rgba(255, 90, 0, 0.22);
}

.and-smart-search-notice--warn {
    color: #92400e;
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
}

.and-barang-empty-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 4px 12px;
    padding: 14px 16px;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 247, 237, 0.88) 100%);
    border: 1px solid rgba(251, 146, 60, 0.28);
    box-shadow: 0 10px 28px -16px rgba(234, 88, 12, 0.35);
    backdrop-filter: blur(8px);
}

.and-barang-empty-notice__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ea580c;
    background: rgba(255, 90, 0, 0.1);
}

.and-barang-empty-notice__body {
    min-width: 0;
    flex: 1;
}

.and-barang-empty-notice__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: #9a3412;
}

.and-barang-empty-notice__query {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: #64748b;
    word-break: break-word;
}

.and-search-external-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 4px 14px;
}

.and-search-external-cta__hint {
    margin: 0 0 2px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
    color: #64748b;
}

.and-search-external-cta--typo {
    margin-top: 4px;
}

.and-search-external-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    border-radius: 0.875rem;
    border: none;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.and-search-external-cta__btn:active {
    transform: scale(0.98);
}

.and-search-external-cta__btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #4285f4 0%, #3367d6 100%);
    box-shadow: 0 8px 22px -10px rgba(66, 133, 244, 0.65);
}

.and-search-external-cta__btn--ghost {
    color: #64748b;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.28);
}

.and-barang-grid--search-empty {
    min-height: 0;
}

.and-ai-lookup--optin {
    padding: 14px;
}

.and-ai-lookup {
    border-radius: 1.25rem;
    padding: 14px;
    background: linear-gradient(145deg, rgba(255, 122, 26, 0.14) 0%, rgba(255, 90, 0, 0.08) 100%);
    border: 1px solid rgba(255, 90, 0, 0.22);
    box-shadow: 0 12px 32px -12px rgba(255, 90, 0, 0.28);
}

.and-ai-lookup--fade {
    animation: andAiLookupFadeIn 0.35s ease-out both;
}

@keyframes andAiLookupFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.and-ai-lookup__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.and-ai-lookup__spark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7a1a, #ff5a00);
    animation: andAiSparkPulse 1.2s ease-in-out infinite;
}

@keyframes andAiSparkPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.1); }
}

.and-ai-lookup__status {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #e04e00;
}

.and-ai-lookup__hint {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
}

.and-ai-lookup__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c2410c;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 90, 0, 0.28);
}

.and-ai-lookup__card {
    padding: 14px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.and-ai-lookup__card--skeleton .and-ai-lookup__sk-line {
    height: 14px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.and-ai-lookup__sk-line--sm { width: 55%; }
.and-ai-lookup__sk-line--md { width: 78%; }

.and-ai-lookup__sk-btn {
    height: 40px;
    width: 60%;
    border-radius: 12px;
    margin-top: 6px;
}

.and-ai-lookup__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.and-ai-lookup__key {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-ai-lookup__val {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.and-ai-lookup__desc {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #475569;
}

.and-ai-lookup__empty-msg {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: #64748b;
}

.and-ai-lookup__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.and-ai-lookup__btn {
    appearance: none;
    border: none;
    border-radius: 0.875rem;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.and-ai-lookup__btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #ff7a1a 0%, #ff5a00 100%);
    box-shadow: 0 8px 20px -8px rgba(255, 90, 0, 0.5);
}

.and-ai-lookup__btn--ghost {
    color: #64748b;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.and-ai-lookup__btn:active {
    transform: scale(0.98);
}

.and-barang-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.and-barang-grid:not(.and-barang-grid--list) .and-asset-card {
    border-radius: 1.75rem;
}

.and-barang-grid:not(.and-barang-grid--list) .and-asset-card__media {
    margin: 10px 10px 0;
    border-radius: 1.25rem;
}

.and-barang-grid:not(.and-barang-grid--list) .and-asset-card__body {
    padding: 10px 14px 16px;
}

.and-barang-grid:not(.and-barang-grid--list) .and-asset-card__title {
    font-size: 0.8125rem;
}

.and-barang-grid:not(.and-barang-grid--list) .and-asset-card__price {
    font-size: 0.75rem;
    margin-top: 4px;
}

.and-barang-grid:not(.and-barang-grid--list) .and-asset-card__badge {
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
}

.and-barang-grid--list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Buku list — satu kolom, judul & deskripsi jelas */
.and-buku-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.and-buku-list--searching {
    opacity: 0.55;
    pointer-events: none;
}

.and-buku-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.28);
}

.and-buku-card__link {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    align-items: start;
}

.and-buku-card__thumb {
    position: relative;
    width: 88px;
    aspect-ratio: 3 / 4;
    border-radius: 0.65rem;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.06);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08);
}

.and-buku-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-buku-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.and-buku-card__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.35;
    color: #0f172a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-buku-card__mapel {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--and-accent);
}

.and-buku-card__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-buku-card__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.and-buku-card__kode {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.03em;
}

.and-buku-card__stok {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #334155;
}

.and-buku-card__kelas {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}

.and-buku-card__avail {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.and-buku-card__avail.and-asset-card__badge--ok {
    background: rgba(16, 185, 129, 0.92);
    color: #fff;
}

.and-buku-card__avail.and-asset-card__badge--loan {
    background: rgba(59, 130, 246, 0.92);
    color: #fff;
}

.and-buku-card__avail.and-asset-card__badge--warn {
    background: rgba(245, 158, 11, 0.94);
    color: #fff;
}

.and-buku-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(248, 250, 252, 0.9);
}

.and-buku-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.82);
    color: #475569;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.and-buku-card__action svg {
    flex-shrink: 0;
}

.and-buku-card__action:active {
    transform: scale(0.98);
}

.and-buku-card__toggle {
    color: #334155;
}

.and-buku-card__update svg {
    flex-shrink: 0;
}

.and-buku-card__update {
    background: rgba(255, 90, 0, 0.1);
    border-color: rgba(255, 90, 0, 0.24);
    color: var(--and-accent);
    box-shadow: 0 1px 2px rgba(255, 90, 0, 0.08);
}

.and-buku-card__update:active {
    background: rgba(255, 90, 0, 0.16);
}

.and-buku-card__foot:has(.and-buku-card__update):not(:has(.and-buku-card__toggle)) .and-buku-card__update {
    flex: 1;
}

.and-buku-card__detail {
    padding: 0 12px 12px;
    background: rgba(248, 250, 252, 0.92);
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.and-buku-card__spec {
    margin: 10px 0 0;
    display: grid;
    gap: 8px;
}

.and-buku-card__spec-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.and-buku-card__spec-row dt {
    margin: 0;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-buku-card__spec-row dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
    word-break: break-word;
}

.and-buku-card__detail-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-accent);
    text-decoration: none;
}

.and-main--buku .and-buku-toolbar .and-barang-view-toggle {
    display: none;
}

@media (min-width: 640px) {
    .and-buku-card__link {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .and-buku-card__thumb {
        width: 96px;
    }
}

.and-asset-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 3rem;
    overflow: hidden;
    box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.25s ease;
}

.and-asset-card:active {
    transform: scale(0.985);
}

.and-asset-card__media {
    position: relative;
    margin: 16px 16px 0;
    aspect-ratio: 4 / 3;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.06);
    outline: 1px solid rgba(255, 255, 255, 0.4);
}

.and-asset-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-asset-card__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 14px;
    border-radius: var(--and-radius-full);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
}

.and-asset-card__badge--ok {
    background: rgba(16, 185, 129, 0.85);
}

.and-asset-card__badge--loan {
    background: rgba(59, 130, 246, 0.85);
}

.and-asset-card__badge--warn {
    background: rgba(245, 158, 11, 0.9);
}

.and-asset-card__badge--sm {
    position: static;
    font-size: 0.5625rem;
    padding: 4px 10px;
}

.and-asset-card__body {
    padding: 12px 28px 28px;
}

.and-asset-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.and-asset-card__cat {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--and-accent);
}

.and-asset-card__sku {
    font-size: 0.625rem;
    font-weight: 700;
    color: #94a3b8;
    opacity: 0.65;
}

.and-asset-card__title {
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-asset-card__price {
    margin: 8px 0 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--and-accent);
    letter-spacing: 0.01em;
}

.and-asset-card__desc {
    margin: 6px 0 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-asset-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.and-asset-card__owner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.and-asset-card__avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--and-radius-full);
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
    font-size: 0.6875rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.and-asset-card__owner-name {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-asset-card__loc {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    flex-shrink: 0;
}

.and-asset-card__loc svg {
    color: var(--and-accent);
}

.and-asset-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.6);
    text-decoration: none;
    color: inherit;
}

.and-asset-row__thumb {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--and-bg-card-alt);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.and-asset-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-asset-row__thumb img.and-img--fallback {
    object-fit: contain;
    padding: 22%;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(224, 231, 255, 0.9));
}

.and-asset-row__body {
    flex: 1;
    min-width: 0;
}

.and-asset-row__title {
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-asset-row__sub {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-asset-row__meta {
    font-size: 0.75rem;
    color: var(--and-text-muted);
}

/* ==========================================================================
   Peminjaman list — selaras barang.php & mobile m-data-peminjaman
   ========================================================================== */
.and-main--peminjaman {
    padding-top: calc(var(--and-page-inset-top) + 12px);
    padding-bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
}

.and-main--data-restock {
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
    box-sizing: border-box;
}

.and-stats-grid--rst {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.and-rst-hero {
    margin: 4px 0 14px;
}

.and-rst-hero--loading .and-rst-hero__grid {
    pointer-events: none;
}

.and-rst-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 420px) {
    .and-rst-hero__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.and-rst-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    padding: 12px 8px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: var(--and-shadow-sm);
    text-align: center;
}

.and-rst-hero__stat strong {
    display: block;
    font-size: clamp(1rem, 4vw, 1.125rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.and-rst-hero__stat span {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.and-rst-hero__stat.is-plus strong {
    color: #059669;
}

.and-rst-hero__stat.is-minus strong {
    color: #dc2626;
}

.and-rst-hero__stat--sk {
    gap: 8px;
}

.and-rst-hero__sk-val {
    width: 56%;
    height: 18px;
    border-radius: 6px;
}

.and-rst-hero__sk-label {
    width: 72%;
    height: 10px;
    border-radius: 4px;
}

.and-rst-hero--ready .and-rst-hero__stat {
    animation: and-rst-stat-in 0.34s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.and-rst-hero--ready .and-rst-hero__stat:nth-child(1) {
    animation-delay: 0.02s;
}

.and-rst-hero--ready .and-rst-hero__stat:nth-child(2) {
    animation-delay: 0.05s;
}

.and-rst-hero--ready .and-rst-hero__stat:nth-child(3) {
    animation-delay: 0.08s;
}

.and-rst-hero--ready .and-rst-hero__stat:nth-child(4) {
    animation-delay: 0.11s;
}

@keyframes and-rst-stat-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.and-rst-list--loading .and-sk-rst {
    animation: and-skeleton-wave 1.5s ease-in-out infinite;
}

.and-rst-list--loading-more::after {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    margin: 12px auto 4px;
    border: 2px solid rgba(255, 90, 0, 0.2);
    border-top-color: var(--and-accent);
    border-radius: 50%;
    animation: and-spin 0.7s linear infinite;
}

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

.and-rst-list--ready {
    animation: and-rst-list-in 0.32s ease both;
}

@keyframes and-rst-list-in {
    from {
        opacity: 0.4;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.and-rst-card-link--enter,
.and-rst-card-wrap--enter {
    animation: and-rst-card-in 0.28s ease both;
    animation-delay: calc(min(var(--rst-i, 0), 5) * 28ms);
}

@keyframes and-rst-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .and-rst-hero--ready .and-rst-hero__stat,
    .and-rst-list--ready,
    .and-rst-card-link--enter,
    .and-rst-card-wrap--enter {
        animation: none;
    }
}

.and-rst-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    transition: opacity 0.28s ease;
}

.and-rst-card__img.is-loaded,
.and-rst-card__img.is-error {
    opacity: 1;
}

.and-stats-grid--rst .and-stat-card__value {
    font-size: clamp(1.125rem, 4.5vw, 1.375rem);
}

.and-rst-aggregate-btn {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: var(--and-radius-full);
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.45);
    color: var(--and-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.and-rst-aggregate-btn.is-active {
    background: var(--and-accent-surface);
    border-color: rgba(255, 90, 0, 0.3);
    color: var(--and-accent);
}

.and-rst-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-rst-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.and-rst-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: var(--and-shadow-sm);
    transition: transform 0.15s ease, background 0.2s ease;
}

.and-rst-card-link:active .and-rst-card,
.and-rst-card:active {
    transform: scale(0.985);
    background: rgba(255, 255, 255, 0.68);
}

.and-rst-card__thumb {
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: var(--and-shadow-sm);
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.15), rgba(59, 130, 246, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--and-accent);
}

.and-rst-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-rst-card__body {
    flex: 1;
    min-width: 0;
}

.and-rst-card__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--and-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-rst-card__meta {
    font-size: 0.75rem;
    color: var(--and-text-muted);
    font-weight: 500;
    line-height: 1.35;
}

.and-rst-card__qty {
    flex-shrink: 0;
    min-width: 52px;
    padding: 8px 10px;
    border-radius: 0.875rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 800;
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
}

.and-rst-card__qty.is-plus {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-rst-card__qty.is-minus {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.and-sk-rst {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.and-sk-rst__thumb {
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    flex-shrink: 0;
}

.and-sk-rst__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-sk-rst__qty {
    width: 52px;
    height: 36px;
    border-radius: 0.875rem;
    flex-shrink: 0;
}

#and-spa-app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.and-spa-outlet-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    opacity: 1;
}

.and-spa-outlet-wrap.and-nav-transition-out {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.17s ease, transform 0.17s ease;
    pointer-events: none;
}

.and-spa-outlet-wrap.is-loading {
    overflow: hidden;
}

#and-spa-outlet {
    flex: 1;
    min-height: 0;
}

#and-spa-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--and-z-nav, 130);
    width: 100%;
    max-width: 100vw;
    background: transparent;
    pointer-events: none;
}

#and-spa-nav .and-bottom-nav__shell {
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Top Navigation Bar (mirror bottom nav — burger, notif, quick add)
   -------------------------------------------------------------------------- */
.and-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--and-z-nav, 130) + 2);
    width: 100%;
    max-width: 100vw;
    pointer-events: none;
    transform: translateY(0);
    opacity: 1;
    transition:
        transform var(--and-nav-ease-out),
        opacity var(--and-nav-ease);
    will-change: transform, opacity;
}

.and-top-nav.is-scroll-hidden {
    transform: translateY(calc(-100% - 8px));
    opacity: 0;
    pointer-events: none;
}

.and-top-nav__shell {
    pointer-events: auto;
    position: relative;
    border-radius: 0;
    border-bottom: 1px solid var(--and-nav-shell-border);
    padding: calc(var(--and-safe-top) + var(--and-top-nav-shell-pt)) 12px var(--and-top-nav-shell-pb);
    overflow: visible;
}

/* Frosted glass — top bar (lebih terlihat) */
.and-top-nav__shell {
    background: var(--and-nav-shell-bg);
    -webkit-backdrop-filter: blur(var(--and-nav-shell-blur)) saturate(var(--and-nav-shell-saturate));
    backdrop-filter: blur(var(--and-nav-shell-blur)) saturate(var(--and-nav-shell-saturate));
    box-shadow: var(--and-elev-1);
}

/* Bottom nav Inventaris — sama seperti top bar */
.and-bottom-nav__shell {
    background: var(--and-bottom-nav-shell-bg);
    -webkit-backdrop-filter: blur(var(--and-bottom-nav-shell-blur)) saturate(var(--and-bottom-nav-shell-saturate));
    backdrop-filter: blur(var(--and-bottom-nav-shell-blur)) saturate(var(--and-bottom-nav-shell-saturate));
    box-shadow: var(--and-bottom-nav-shell-shadow);
}

/* Al-Qur'an reading nav — transparan polos, tanpa backdrop-blur */
.and-qrn-reading-nav__shell {
    background:
        linear-gradient(
            180deg,
            var(--and-qrn-reading-nav-shell-tint-top) 0%,
            var(--and-qrn-reading-nav-shell-tint-bottom) 100%
        ),
        var(--and-qrn-reading-nav-shell-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .and-top-nav__shell {
        background: var(--and-nav-shell-fallback-bg);
    }

    .and-bottom-nav__shell {
        background: var(--and-bottom-nav-shell-fallback-bg);
    }

    .and-qrn-reading-nav__shell {
        background: var(--and-qrn-reading-nav-shell-fallback-bg);
    }
}

.and-top-nav__shell::before {
    display: none;
}

.and-top-nav__shell::after {
    display: none;
}

.and-top-nav__track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 8px;
    min-height: var(--and-top-nav-row);
}

.and-top-nav__spacer {
    min-width: 0;
}

.and-top-nav__side {
    display: flex;
    align-items: center;
    gap: 4px;
}

.and-top-nav__side--left {
    grid-column: 1;
}

.and-top-nav__audio-slot {
    grid-column: 2;
}

.and-top-nav__side--right {
    justify-content: flex-end;
    grid-column: 3;
}

.and-top-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--and-top-nav-icon);
    text-decoration: none;
    position: relative;
    z-index: 1;
    border-radius: 12px;
    transition: color var(--and-nav-ease), transform var(--and-nav-ease), background var(--and-nav-ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
}

.and-top-nav__item:active {
    transform: scale(0.94);
}

.and-top-nav__item--unread {
    color: #c2410c;
}

.and-top-nav__item--unread .and-top-nav__icon--chip {
    border-color: rgba(194, 65, 12, 0.4);
    background: #fff7ed;
}

.and-top-nav__item--fab {
    width: 44px;
    height: 44px;
}

.and-top-nav__icon--chip,
.and-top-nav__icon--fab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--and-top-nav-chip-bg);
    border: 1px solid var(--and-top-nav-chip-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    -webkit-backdrop-filter: blur(var(--and-nav-chip-blur)) saturate(1.15);
    backdrop-filter: blur(var(--and-nav-chip-blur)) saturate(1.15);
    transition: background var(--and-nav-ease), border-color var(--and-nav-ease), transform var(--and-nav-ease);
}

.and-top-nav__icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.and-top-nav__svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    color: var(--and-top-nav-icon);
}

.and-top-nav__svg--solid {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.5;
}

.and-top-nav__svg--fab {
    stroke-width: 2.25;
}

.and-top-nav__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff5a00;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 1.5px solid #fff;
    box-shadow: none;
}

.and-page-context-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 90, 0, 0.08);
    border: 1px solid rgba(255, 90, 0, 0.12);
    color: rgba(194, 65, 12, 0.85);
    flex-shrink: 0;
    pointer-events: none;
}

.and-page-context-icon--empty {
    width: 40px;
    height: 40px;
    background: transparent;
    border-color: transparent;
}

.and-page-context-icon__svg {
    width: 20px;
    height: 20px;
}

.and-body--topbar {
    --and-page-inset-top: var(--and-safe-top);
}

.and-body--topbar-audio {
    --and-page-inset-top: var(--and-top-nav-total);
}

.and-body--topbar-audio.and-body--chat .and-layout--ai-chat,
.and-body--topbar-audio:not(.and-body--topbar) .and-layout {
    padding-top: var(--and-top-nav-total);
}

.and-body--topbar .and-layout {
    padding-top: var(--and-top-nav-total);
}

.and-body--topbar.and-body--barang-hub,
.and-body--topbar.and-body--buku-hub,
.and-body--topbar.and-body--quran-hub,
.and-body--topbar.and-body--notif,
.and-body--topbar:has(.and-layout--inbox) {
    --and-page-inset-top: var(--and-top-nav-total);
}

.and-body--topbar.and-body--barang-hub .and-layout,
.and-body--topbar.and-body--buku-hub .and-layout,
.and-body--topbar.and-body--quran-hub .and-layout,
.and-body--topbar .and-layout--notif,
.and-body--topbar:has(.and-layout--inbox) .and-layout {
    padding-top: 0;
}

.and-body--topbar .and-layout--ambient:not(.and-layout--home):not(.and-layout--notif):not(.and-layout--inbox):not(.and-layout--fm) > .and-main--data-restock {
    padding-top: 6px;
}

.and-body--topbar .and-layout--ambient:not(.and-layout--home) > .and-main--karyawan:not(.and-main--santri),
.and-body--topbar .and-layout--ambient:not(.and-layout--home) > .and-main--wali-santri,
.and-body--topbar .and-layout--ambient:not(.and-layout--home) > .and-main--kelas,
.and-body--topbar .and-layout--ambient:not(.and-layout--home) > .and-main--wali-kelas,
.and-body--topbar .and-layout--ambient:not(.and-layout--home) > .and-main--ra {
    padding-top: calc(var(--and-page-inset-top, var(--and-top-nav-total)) + 12px);
}

/* Mobile — jarak header halaman dari top bar (selaras beranda, kecuali home) */
@media (max-width: 767px) {
    .and-body--topbar:not(.and-body--home) {
        --and-mobile-content-top-gap: 12px;
    }

    .and-body--topbar:not(.and-body--home).and-body--barang-hub,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub,
    .and-body--topbar:not(.and-body--home).and-body--quran-hub,
    .and-body--topbar:not(.and-body--home).and-body--notif,
    .and-body--topbar:not(.and-body--home):has(.and-layout--inbox) {
        --and-page-inset-top: calc(var(--and-top-nav-total) + var(--and-mobile-content-top-gap));
    }

    .and-body--topbar:not(.and-body--home).and-body--barang-hub .and-main--barang,
    .and-body--topbar:not(.and-body--home).and-body--barang-hub .and-main--favorit,
    .and-body--topbar:not(.and-body--home).and-body--barang-hub .and-main--item-detail,
    .and-body--topbar:not(.and-body--home).and-body--barang-hub .and-main.and-main--barang-form,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--buku,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--buku-hub-sub,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--item-detail,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--santri,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--wali-santri,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--kelas,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--wali-kelas,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--btrx,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--btrx-detail,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main.and-main--barang-form,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-main--btrx-form,
    .and-body--topbar:not(.and-body--home).and-body--quran-hub .and-main--quran,
    .and-body--topbar:not(.and-body--home).and-body--quran-hub .and-main--tahfizh {
        padding-top: var(--and-page-inset-top);
    }

    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-layout--ambient:not(.and-layout--home) > .and-main--karyawan:not(.and-main--santri),
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-layout--ambient:not(.and-layout--home) > .and-main--wali-santri,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-layout--ambient:not(.and-layout--home) > .and-main--kelas,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-layout--ambient:not(.and-layout--home) > .and-main--wali-kelas,
    .and-body--topbar:not(.and-body--home).and-body--buku-hub .and-layout--ambient:not(.and-layout--home) > .and-main--ra {
        padding-top: var(--and-page-inset-top);
    }

    .and-body--topbar:not(.and-body--home):not(.and-body--barang-hub):not(.and-body--buku-hub):not(.and-body--quran-hub):not(.and-body--notif) .and-layout:not(.and-layout--home):not(.and-layout--inbox):not(.and-layout--fm):not(.and-layout--notif) > .and-main {
        padding-top: calc(var(--and-page-inset-top, 0px) + var(--and-mobile-content-top-gap));
    }

    .and-body--topbar:not(.and-body--home):not(.and-body--barang-hub):not(.and-body--buku-hub):not(.and-body--quran-hub) .and-layout--ambient:not(.and-layout--home) > .and-main--data-restock {
        padding-top: var(--and-mobile-content-top-gap);
    }

    .and-body--topbar:not(.and-body--home):not(.and-body--barang-hub):not(.and-body--buku-hub):not(.and-body--quran-hub) .and-layout--ambient:not(.and-layout--home) > .and-main--karyawan:not(.and-main--santri),
    .and-body--topbar:not(.and-body--home):not(.and-body--barang-hub):not(.and-body--buku-hub):not(.and-body--quran-hub) .and-layout--ambient:not(.and-layout--home) > .and-main--wali-santri,
    .and-body--topbar:not(.and-body--home):not(.and-body--barang-hub):not(.and-body--buku-hub):not(.and-body--quran-hub) .and-layout--ambient:not(.and-layout--home) > .and-main--kelas,
    .and-body--topbar:not(.and-body--home):not(.and-body--barang-hub):not(.and-body--buku-hub):not(.and-body--quran-hub) .and-layout--ambient:not(.and-layout--home) > .and-main--wali-kelas,
    .and-body--topbar:not(.and-body--home):not(.and-body--barang-hub):not(.and-body--buku-hub):not(.and-body--quran-hub) .and-layout--ambient:not(.and-layout--home) > .and-main--ra {
        padding-top: var(--and-mobile-content-top-gap);
    }

    .and-body--topbar:not(.and-body--home).and-body--notif .and-main.and-main--notif,
    .and-body--topbar:not(.and-body--home):has(.and-layout--inbox) .and-main--inbox {
        padding-top: var(--and-page-inset-top);
    }
}

.and-body--chat .and-layout--ai-chat {
    padding-top: 0;
}

.and-body--topbar .and-data-hero__nav .and-page-context-icon,
.and-body--topbar .and-dash-top .and-page-context-icon {
    opacity: 0.92;
}

.and-body--topbar .and-data-hero__title-icon {
    display: none;
}

.and-body--topbar .and-dash-bell {
    display: none;
}

/* Mobile home: burger di top bar saja — sembunyikan yang di header halaman */
.and-body--topbar.and-body--home .and-home-hero #andHomeHeroBurger,
.and-body--topbar.and-body--home .and-home-hero .and-home-hero__burger,
.and-body--topbar.and-body--home .and-home-hero .and-dash-burger,
.and-body--topbar.and-body--home .and-thz-dash-hero #andThzDashBurger,
.and-body--topbar.and-body--home .and-thz-dash-hero .and-home-hero__burger {
    display: none !important;
}

.and-body--topbar.and-body--home .and-home-hero .and-dash-top .and-dash-bell {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .and-top-nav {
        transition: none;
    }
}

.and-offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: calc(var(--and-safe-top, 0px) + 8px) 16px 8px;
    background: rgba(245, 158, 11, 0.95);
    color: #78350f;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.and-body--offline .and-main {
    padding-top: calc(var(--and-safe-top, 0px) + 36px);
}

.and-push-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.and-btn--sm {
    padding: 8px 14px;
    font-size: 0.8125rem;
}

.and-stats-grid--pjm {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.and-stats-grid--pjm.and-stats-grid--liquid {
    margin-bottom: 16px;
}

.and-stats-grid--pjm .and-stat-card {
    min-height: 118px;
    padding: 16px 14px;
    cursor: default;
}

.and-stats-grid--pjm .and-stat-card__icon {
    display: none;
}

.and-stats-grid--pjm .and-stat-card__head {
    justify-content: flex-end;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.and-stats-grid--pjm .and-stat-card__label,
.and-stats-grid--pjm .and-stat-card__value {
    position: relative;
    z-index: 1;
}

.and-stats-grid--pjm .and-stat-card--barang .and-stat-card__watermark {
    color: #6366f1;
}

.and-stats-grid--pjm .and-stat-card--pinjam .and-stat-card__watermark {
    color: #3b82f6;
}

.and-stats-grid--pjm .and-stat-card--st .and-stat-card__watermark {
    color: #059669;
}

.and-pjm-chart-panel {
    margin-top: 8px;
}

.and-main--pjm-form {
    padding-top: calc(var(--and-page-inset-top) + 12px);
    padding-bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 96px);
}

.and-main--pjm-form .and-ra-form-section:last-of-type {
    padding-bottom: 14px;
}

.and-pjm-catatan-field {
    margin-bottom: 0;
}

.and-pjm-catatan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.and-pjm-catatan-head .and-ra-label {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.and-pjm-voice-pill {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 0.6875rem;
}

.and-pjm-catatan-box {
    position: relative;
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.and-pjm-catatan-box:focus-within,
.and-pjm-catatan-box.is-voice-active {
    border-color: rgba(255, 90, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1);
}

.and-pjm-catatan-input {
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 12px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    color: #0f172a;
    line-height: 1.45;
    resize: vertical;
}

.and-pjm-catatan-input::placeholder {
    color: #94a3b8;
}

.and-pjm-catatan-input:focus {
    outline: none;
}

.and-pjm-catatan-box .and-voice-composer__strip {
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.and-pjm-catatan-box--no-voice .and-pjm-catatan-hint {
    display: none;
}

.and-pjm-catatan-hint {
    margin: 6px 2px 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.35;
}

/* Dock keranjang / simpan — portal ke body, tanpa backdrop-filter (scroll lebih ringan) */
html:has(body.and-body--pjm-dock) {
    scroll-behavior: auto;
}

body.and-body--pjm-dock::before {
    animation: none;
}

body.and-body--pjm-dock {
    --and-pjm-dock-h: 76px;
}

body.and-body--pjm-dock .and-layout {
    padding-bottom: calc(var(--and-safe-bottom) + 8px);
}

.and-pjm-dock--body.and-pjm-dock--portaled {
    z-index: 130;
}

.and-pjm-dock--body .and-pjm-cart-bar {
    border-radius: 1.25rem 1.25rem 0 0;
    border-top: 0;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92));
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.22);
}

.and-pjm-dock--body .and-pjm-cart-bar__info > span:first-child {
    color: #fff;
}

.and-pjm-dock--body .and-pjm-cart-bar__hint {
    color: rgba(255, 247, 237, 0.78);
}

.and-pjm-dock--body .and-pjm-cart-bar__toggle {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fed7aa;
}

.and-pjm-dock--body .and-pjm-cart-bar__badge {
    background: #fff;
    color: #7c2d12;
}

.and-pjm-dock--body .and-pjm-cart-bar__btn {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.and-pjm-dock--body .and-pjm-cart-bar__btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 247, 237, 0.92);
}

.and-pjm-dock--body .and-pjm-cart-panel {
    left: 0;
    right: 0;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.24);
}

.and-pjm-dock--body .and-pjm-cart-panel__head {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.and-pjm-dock--body .and-pjm-cart-panel__title {
    color: #fff;
}

.and-pjm-dock--body .and-pjm-cart-panel__close {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}

.and-pe-save-bar--trio {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.and-pe-save-bar--trio .and-pe-cancel-btn,
.and-pe-save-bar--trio .and-pe-save-btn {
    flex: 1 1 0;
    min-width: 0;
}

.and-pe-cancel-btn--muted {
    font-size: 0.8125rem;
}

body.and-body--st-form .and-pe-save-bar--portaled,
body.and-body--pjm-form .and-pe-save-bar--portaled,
body.and-body--rab-form .and-pe-save-bar--portaled,
body.and-body--pgl-form .and-pe-save-bar--portaled,
body.and-body--svc-form .and-pe-save-bar--portaled {
    z-index: 130;
}

.and-main--st-form.and-main--svc-form,
.and-main--st-form:not(.and-main--pjm-form):not(.and-main--rab-form) {
    padding-bottom: calc(var(--and-safe-bottom, 0px) + 108px);
}

.and-main--pjm-form {
    padding-bottom: calc(var(--and-safe-bottom, 0px) + 108px);
}

.and-main--rab-form {
    padding-bottom: calc(var(--and-safe-bottom, 0px) + 108px);
}

.and-pjm-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.and-pjm-dock.and-pjm-dock--body {
    left: 50%;
    right: auto;
    width: min(var(--and-content-max), 100%);
    max-width: 100%;
    box-sizing: border-box;
    transform: translateX(-50%);
}

.and-pjm-cart-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px calc(var(--and-safe-bottom) + 12px);
    min-height: calc(var(--and-pjm-dock-h) + var(--and-safe-bottom));
    border-radius: 1.25rem 1.25rem 0 0;
    background: #ffffff;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.1);
    pointer-events: auto;
    touch-action: manipulation;
}

.and-pjm-cart-bar>* {
    pointer-events: auto;
}

.and-pjm-cart-bar__toggle {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 14px;
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.and-pjm-cart-bar__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--and-accent);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.and-pjm-cart-bar__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.and-pjm-cart-bar__info>span:first-child {
    font-size: 0.875rem;
    font-weight: 800;
    color: #334155;
}

.and-pjm-cart-bar__hint {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-pjm-cart-bar__btn {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 11px 16px;
    background: var(--and-accent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.and-pjm-cart-bar__btn:active:not(:disabled) {
    opacity: 0.88;
    transform: none;
}

.and-pjm-cart-bar__btn--ghost {
    background: transparent;
    color: #64748b;
    box-shadow: none;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.and-pjm-cart-bar__btn:disabled,
.and-pjm-cart-bar__btn--ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.and-pjm-cart-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 100%;
    margin-bottom: 16px;
    z-index: 1;
    max-height: min(62vh, 460px);
    display: flex;
    flex-direction: column;
    border-radius: 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    pointer-events: auto;
    touch-action: manipulation;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.3s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.and-pjm-cart-panel.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.and-pjm-cart-panel[hidden] {
    display: none !important;
}

.and-pjm-cart-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    flex-shrink: 0;
}

.and-pjm-cart-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.and-pjm-cart-panel__close {
    border: none;
    background: rgba(148, 163, 184, 0.15);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 1.375rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.and-pjm-cart-panel__list {
    overflow-y: auto;
    padding: 10px 16px 16px;
    -webkit-overflow-scrolling: touch;
}

.and-pjm-cart-panel__empty {
    margin: 0;
    padding: 24px 12px;
    text-align: center;
    font-size: 0.875rem;
    color: #94a3b8;
}

.and-pjm-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.and-pjm-cart-item:last-child {
    border-bottom: none;
}

.and-pjm-cart-item__thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.and-pjm-cart-item__body {
    flex: 1;
    min-width: 0;
}

.and-pjm-cart-item__name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-pjm-cart-item__sub {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-pjm-cart-item__remove {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
}

body.and-pjm-cart-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

.and-pjm-gudang-field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.and-pjm-gudang-field__label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.and-pjm-pick-row {
    width: 100%;
    border: none;
    text-align: left;
    cursor: pointer;
}

.and-pjm-pick-row.is-in-cart {
    outline: 2px solid rgba(255, 90, 0, 0.35);
}

.and-pjm-pick-row__badge {
    flex-shrink: 0;
    min-width: 36px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
    font-size: 0.6875rem;
    font-weight: 800;
    text-align: center;
}

.and-pjm-kondisi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.and-pjm-kondisi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 92px;
    padding: 12px 8px;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.and-pjm-kondisi-card__emoji {
    font-size: 2.25rem;
    line-height: 1;
}

.and-pjm-kondisi-card__label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #475569;
    text-align: center;
    line-height: 1.2;
}

.and-pjm-kondisi-card.is-active {
    border-color: var(--and-accent);
    background: rgba(255, 90, 0, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.14);
}

.and-pjm-kondisi-card.is-active .and-pjm-kondisi-card__label {
    color: var(--and-accent);
}

body.and-pjm-sheet-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

.and-pjm-pick-sheet {
    z-index: 200;
}

.and-pjm-pick-sheet .and-restock-sheet__panel {
    padding-bottom: calc(var(--and-safe-bottom) + var(--and-pjm-dock-h, 76px) + 20px);
    max-height: min(88vh, calc(100vh - var(--and-safe-top, 0px) - 24px));
}

.and-pjm-form-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.and-pjm-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.and-pjm-form-field .and-bf-input,
.and-pjm-form-field .and-bf-select,
.and-pjm-form-field .and-bf-textarea {
    width: 100%;
}

.and-pjm-form-field__label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.and-pjm-form-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.and-pjm-form-item:last-child {
    border-bottom: none;
}

.and-pjm-form-item__thumb {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.and-pjm-form-item__body {
    flex: 1;
    min-width: 0;
}

.and-pjm-form-item__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
}

.and-pjm-form-item__sub {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-pjm-form-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom));
    z-index: 110;
    padding: 14px 16px 12px;
    background: #ffffff;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.1);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style;
    pointer-events: none;
    touch-action: manipulation;
}

.and-body--no-nav .and-pjm-form-bar {
    bottom: 0;
    padding-bottom: calc(var(--and-safe-bottom) + 12px);
}

.and-body--no-nav .and-main--pjm-form {
    padding-bottom: calc(var(--and-safe-bottom) + 96px);
}

.and-pjm-form-bar__actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    pointer-events: auto;
}

.and-pjm-form-bar .and-btn {
    box-shadow: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.875rem;
    min-height: 48px;
    padding: 12px 18px;
}

.and-pjm-form-bar__back {
    flex-shrink: 0;
    gap: 6px;
    padding: 12px 16px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #ffffff;
    color: #475569;
}

.and-pjm-form-bar__save {
    flex: 1;
    min-width: 0;
}

.and-pjm-form-bar .and-btn:active:not(:disabled) {
    opacity: 0.88;
    transform: none;
}

.and-main--pjm-form .and-btn--full {
    margin-top: 0;
}

.and-main--pjm-return {
    padding-top: calc(var(--and-page-inset-top) + 12px);
    padding-bottom: calc(var(--and-safe-bottom) + var(--and-pjm-dock-h, 76px) + 20px);
}

/* ── Serah terima: pilih barang & form BAST ── */
.and-main--st-create,
.and-main--st-form,
.and-main--svc-create,
.and-main--pjm-create,
.and-main--pgl-create,
.and-main--rab-create {
    padding-top: calc(var(--and-page-inset-top) + 6px);
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: calc(var(--and-safe-bottom) + var(--and-pjm-dock-h, 76px) + 24px);
}

.and-main--st-create .and-data-hero {
    margin: 0 0 14px;
}

.and-main--st-create.and-barang-chips-open .and-data-hero,
.and-main--svc-create.and-barang-chips-open .and-data-hero,
.and-main--pjm-create.and-barang-chips-open .and-data-hero,
.and-main--pgl-create.and-barang-chips-open .and-data-hero,
.and-main--rab-create.and-barang-chips-open .and-data-hero {
    margin-bottom: 0;
    border-radius: 24px 24px 0 0;
}

.and-main--st-create.and-barang-chips-open .and-barang-chips--hero,
.and-main--svc-create.and-barang-chips-open .and-barang-chips--hero,
.and-main--pjm-create.and-barang-chips-open .and-barang-chips--hero,
.and-main--pgl-create.and-barang-chips-open .and-barang-chips--hero,
.and-main--rab-create.and-barang-chips-open .and-barang-chips--hero {
    margin-top: 0;
}

.and-main--st-create .and-barang-chips--hero,
.and-main--svc-create .and-barang-chips--hero,
.and-main--pjm-create .and-barang-chips--hero,
.and-main--pgl-create .and-barang-chips--hero,
.and-main--rab-create .and-barang-chips--hero {
    margin: -6px 0 12px;
}

.and-main--st-create > .and-barang-chips--inline,
.and-main--svc-create > .and-barang-chips--inline,
.and-main--pjm-create > .and-barang-chips--inline,
.and-main--pgl-create > .and-barang-chips--inline,
.and-main--rab-create > .and-barang-chips--inline {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(51, 65, 85, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 28px -12px rgba(15, 23, 42, 0.24);
}

.and-main--st-create > .and-barang-chips--inline .and-barang-chips__eyebrow--inline,
.and-main--svc-create > .and-barang-chips--inline .and-barang-chips__eyebrow--inline,
.and-main--pjm-create .and-barang-chips--inline .and-barang-chips__eyebrow--inline,
.and-main--pgl-create .and-barang-chips--inline .and-barang-chips__eyebrow--inline,
.and-main--rab-create .and-barang-chips--inline .and-barang-chips__eyebrow--inline {
    color: #64748b;
}

.and-main--st-create > .and-barang-chips--inline .and-chip-track--barang,
.and-main--svc-create > .and-barang-chips--inline .and-chip-track--barang,
.and-main--pjm-create .and-barang-chips--inline .and-chip-track--barang,
.and-main--pgl-create .and-barang-chips--inline .and-chip-track--barang,
.and-main--rab-create .and-barang-chips--inline .and-chip-track--barang {
    width: 100%;
    min-width: 0;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(51, 65, 85, 0.12);
}

.and-main--st-create > .and-barang-chips--inline .and-chip-track .and-barang-chip,
.and-main--svc-create > .and-barang-chips--inline .and-chip-track .and-barang-chip,
.and-main--pjm-create .and-barang-chips--inline .and-chip-track .and-barang-chip,
.and-main--pgl-create .and-barang-chips--inline .and-chip-track .and-barang-chip,
.and-main--rab-create .and-barang-chips--inline .and-chip-track .and-barang-chip {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #334155;
    font-weight: 600;
}

.and-main--st-create > .and-barang-chips--inline .and-chip-track .and-barang-chip.is-active,
.and-main--svc-create > .and-barang-chips--inline .and-chip-track .and-barang-chip.is-active,
.and-main--pjm-create .and-barang-chips--inline .and-chip-track .and-barang-chip.is-active,
.and-main--pgl-create .and-barang-chips--inline .and-chip-track .and-barang-chip.is-active,
.and-main--rab-create .and-barang-chips--inline .and-chip-track .and-barang-chip.is-active {
    background: rgba(255, 255, 255, 0.92);
    border-color: transparent;
    color: var(--and-accent);
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.and-pick-toolbar {
    margin-bottom: 12px;
}

.and-pick-count {
    margin: 0 0 14px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #64748b;
}

/* Pick flows (serah terima / peminjaman) — mobile/portrait: layout stacked */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) {
    .and-pick-page.and-desktop-list-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: calc(var(--and-page-inset-top) + 6px);
        padding-bottom: calc(var(--and-safe-bottom) + var(--and-pjm-dock-h, 76px) + 24px);
    }

    .and-pick-page.and-desktop-list-grid > .and-data-hero {
        margin: 0;
    }

    .and-pick-page.and-barang-chips-open .and-data-hero {
        margin-bottom: 0;
        border-radius: 24px 24px 0 0;
    }

    .and-pick-page.and-desktop-list-grid > .and-desktop-filter-sidebar {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        max-height: none;
        overflow: visible;
    }

    .and-pick-page.and-barang-chips-open .and-desktop-filter-sidebar .and-barang-chips--hero {
        margin-top: 0;
    }

    .and-pick-page.and-desktop-list-grid .and-desktop-filter-sidebar .and-barang-chips--inline {
        margin: 0 0 14px;
        padding: 10px 12px;
        border-radius: 1.25rem;
        background: #fff;
        border: 1px solid rgba(51, 65, 85, 0.18);
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.05),
            0 10px 28px -12px rgba(15, 23, 42, 0.24);
    }

    .and-pick-page.and-desktop-list-grid .and-desktop-filter-sidebar .and-barang-chips--inline .and-barang-chips__eyebrow--inline {
        color: #64748b;
    }

    .and-pick-page.and-desktop-list-grid .and-desktop-filter-sidebar .and-barang-chips--inline .and-chip-track--barang {
        width: 100%;
        min-width: 0;
        background: rgba(15, 23, 42, 0.06);
        border: 1px solid rgba(51, 65, 85, 0.12);
    }

    .and-pick-page.and-desktop-list-grid .and-desktop-filter-sidebar .and-barang-chips--inline .and-chip-track .and-barang-chip {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        color: #334155;
        font-weight: 600;
    }

    .and-pick-page.and-desktop-list-grid .and-desktop-filter-sidebar .and-barang-chips--inline .and-chip-track .and-barang-chip.is-active {
        background: rgba(255, 255, 255, 0.92);
        border-color: transparent;
        color: var(--and-accent);
        font-weight: 800;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    }

    .and-pick-page.and-desktop-list-grid > .and-desktop-content-column {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
    }

    .and-st-dock.and-pjm-dock--body.and-pjm-dock--portaled {
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 0 !important;
        width: min(var(--and-content-max), 100%) !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        transform: translateX(-50%) !important;
        display: block !important;
        flex-direction: unset !important;
        justify-content: unset !important;
    }

    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock.and-pjm-dock--portaled {
        top: auto !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
    }

    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-panel.is-open {
        flex: none;
        min-height: 0;
        max-height: min(62vh, 460px);
        margin: 0 0 16px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: absolute;
        bottom: 100%;
        left: 12px;
        right: 12px;
    }

    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-panel__list,
    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-st-cart-panel__list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .and-st-dock .and-pjm-cart-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        min-height: calc(var(--and-pjm-dock-h) + var(--and-safe-bottom)) !important;
        height: auto !important;
        border-radius: 1.25rem 1.25rem 0 0 !important;
        padding: 12px 16px calc(var(--and-safe-bottom) + 12px) !important;
    }

    .and-st-dock .and-pjm-cart-bar__actions {
        display: contents;
    }

    .and-st-dock .and-pjm-cart-bar__toggle,
    .and-st-dock .and-pjm-cart-bar__info,
    .and-st-dock .and-pjm-cart-bar__btn {
        grid-column: unset !important;
        grid-row: unset !important;
    }

    .and-st-dock .and-pjm-cart-panel {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 100%;
        width: auto;
        max-height: min(62vh, 460px);
    }

    body.and-body--pjm-dock:has(.and-st-dock) .and-toast-container {
        bottom: calc(var(--and-safe-bottom) + var(--and-pjm-dock-h, 76px) + 16px);
        top: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: auto;
        max-width: min(360px, calc(100vw - 24px));
        align-items: center;
    }
}

.and-pick-grid {
    gap: 10px;
}

.and-pick-sumber-field {
    min-width: 0;
}

.and-pick-sumber-val {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) .and-restock-header.and-form-hero,
.and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) .and-data-hero.and-form-hero,
.and-main--st-form.and-main--svc-form .and-restock-header.and-form-hero,
.and-main--svc-form .and-restock-header.and-form-hero {
    margin: 0 0 14px;
    width: 100%;
    box-sizing: border-box;
}

.and-main--st-form .and-ra-form-section:not(.and-pjm-form-card) {
    margin: 0 0 14px;
    padding: 14px 14px 6px;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.and-st-form-summary {
    margin-top: 4px;
}

.and-st-form-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.and-st-form-summary__head .and-ra-form-section__title {
    margin: 0;
}

.and-st-form-summary__list {
    max-height: min(52vh, 420px);
    min-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.and-st-form-note,
.and-st-form-hint {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-st-req {
    color: #ef4444;
}

.and-st-opt {
    color: #94a3b8;
    font-weight: 500;
}

.and-st-form-check {
    margin-bottom: 12px;
}

body.and-st-picker-open {
    overflow: hidden;
}

.and-st-pick-row.is-in-cart {
    border-color: rgba(255, 90, 0, 0.35);
    background: rgba(255, 90, 0, 0.04);
}

.and-st-pick-row__badge {
    flex-shrink: 0;
    min-width: 40px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.and-st-pick-row.is-in-cart .and-st-pick-row__badge {
    background: var(--and-accent);
    color: #fff;
}

.and-svc-sumber-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 16px 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.and-svc-sumber-row__text {
    min-width: 0;
}

.and-svc-sumber-row__text strong {
    display: block;
    font-size: 0.875rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-svc-sumber-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 90, 0, 0.28);
    background: rgba(255, 90, 0, 0.08);
    color: var(--and-accent);
    font-size: 0.75rem;
    font-weight: 800;
}

.and-svc-sumber-btn:active {
    transform: scale(0.98);
}

.and-svc-st-sheet .and-svc-st-list {
    flex: 1;
    overflow: auto;
    padding: 8px 16px 24px;
}

.and-svc-st-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    margin-bottom: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #fff;
    text-align: left;
}

.and-svc-st-item.is-selected {
    border-color: rgba(255, 90, 0, 0.45);
    background: rgba(255, 90, 0, 0.06);
}

.and-svc-st-item strong {
    font-size: 0.875rem;
    color: #0f172a;
}

.and-svc-st-item span,
.and-svc-st-item em {
    font-size: 0.75rem;
    color: #64748b;
    font-style: normal;
}

.and-svc-st-clear {
    border: none;
    background: transparent;
    color: var(--and-accent);
    font-size: 0.75rem;
    font-weight: 700;
}

.and-svc-st-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    font-size: 0.6875rem;
    font-weight: 700;
}

.and-svc-cart-remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    font-size: 1.125rem;
    line-height: 1;
}

.and-svc-jk-select {
    width: 100%;
    margin-bottom: 0;
}

.and-svc-cart-panel.and-pjm-cart-panel {
    left: 10px;
    right: 10px;
    border-radius: 1.375rem;
}

.and-svc-cart-panel .and-pjm-cart-panel__head {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.and-svc-cart-panel .and-pjm-cart-panel__list,
.and-svc-cart-panel .and-st-cart-panel__list {
    padding: 18px 20px 24px;
    background: #f1f5f9;
}

.and-svc-cart-panel .and-pjm-cart-panel__empty {
    padding: 32px 20px;
}

.and-st-cart-card.and-svc-cart-card {
    padding: 18px;
    margin-bottom: 12px;
    border-radius: 20px;
    border-bottom: none;
}

.and-st-cart-card.and-svc-cart-card:last-child {
    margin-bottom: 0;
}

.and-svc-cart-card.is-jk-error {
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.and-st-cart-card.and-svc-cart-card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.12);
}

.and-svc-cart-card .and-st-cart-card__head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.and-svc-req {
    color: #ef4444;
    font-weight: 800;
}

.and-svc-jk-field {
    margin-bottom: 14px;
}

.and-svc-jk-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-svc-jk-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.and-svc-jk-select-wrap .and-svc-jk-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 48px;
    padding: 12px 40px 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #f8fafc;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.and-svc-jk-field.is-empty .and-svc-jk-select {
    color: #94a3b8;
}

.and-svc-jk-field.is-filled .and-svc-jk-select {
    background: #fff;
}

.and-svc-jk-field.is-error .and-svc-jk-select {
    border-color: rgba(239, 68, 68, 0.55);
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.and-svc-jk-select:focus {
    outline: none;
    border-color: rgba(255, 90, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}

.and-svc-jk-select__chev {
    position: absolute;
    right: 12px;
    pointer-events: none;
    color: #94a3b8;
}

.and-svc-jk-field__error {
    margin: 6px 0 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #dc2626;
}

.and-svc-catatan-field {
    display: block;
    margin-top: 2px;
}

.and-svc-catatan-textarea {
    width: 100%;
    min-height: 72px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #f8fafc;
    font: inherit;
    font-size: 0.875rem;
    color: #0f172a;
    resize: vertical;
}

.and-svc-catatan-textarea::placeholder {
    color: #94a3b8;
}

.and-svc-catatan-textarea:focus {
    outline: none;
    border-color: rgba(255, 90, 0, 0.35);
    background: #fff;
}

.and-svc-sumber-readonly {
    margin: 0;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

.and-main--svc-form .and-pjm-input-shell .and-svc-sumber-readonly {
    padding: 2px 0;
}

.and-main--svc-form .and-pjm-input-shell .and-ra-input {
    width: 100%;
    min-width: 0;
}

.and-main--svc-form #andSvcFormMsg {
    margin: 0 0 14px;
}

.and-ra-input--readonly {
    background: rgba(148, 163, 184, 0.08);
    color: #475569;
}

body.and-svc-st-open,
body.and-svc-picker-open {
    overflow: hidden;
}

.and-st-cart-panel {
    max-height: min(72vh, 520px);
}

.and-st-cart-panel__error {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(254, 242, 242, 0.95);
    color: #b91c1c;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.45;
}

.and-st-cart-req {
    color: #ef4444;
}

.and-st-cart-field-err {
    margin: 4px 0 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #dc2626;
}

.and-st-cart-card--invalid {
    background: rgba(254, 242, 242, 0.35);
}

.and-st-cart-catatan.is-invalid {
    border-color: rgba(239, 68, 68, 0.55) !important;
    background: rgba(254, 242, 242, 0.35);
}

.and-st-cart-panel__list {
    padding-bottom: 20px;
}

.and-st-cart-card {
    padding: 14px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.and-st-cart-card:last-child {
    border-bottom: none;
}

.and-st-cart-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.and-st-cart-card__img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.and-st-cart-card__info {
    flex: 1;
    min-width: 0;
}

.and-st-cart-card__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-st-cart-card__meta {
    margin: 3px 0 0;
    font-size: 0.6875rem;
    color: #64748b;
}

.and-st-cart-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.and-st-cart-qty__btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.15);
    color: #334155;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.and-st-cart-qty__val {
    min-width: 28px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
}

.and-st-cart-label {
    display: block;
    margin: 10px 0 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.and-st-cart-catatan {
    min-height: 64px;
    resize: vertical;
}

.and-st-cart-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.and-st-cart-thumb-wrap {
    position: relative;
    width: 56px;
    height: 56px;
}

.and-st-cart-thumb-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.and-st-cart-thumb-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
}

.and-st-cart-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.and-st-cart-upload__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: rgba(248, 250, 252, 0.9);
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.and-st-cart-upload__btn:active {
    background: rgba(241, 245, 249, 0.98);
}

.and-st-cart-upload__btn--ai {
    border-style: solid;
    border-color: rgba(234, 88, 12, 0.28);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.82));
    color: #9a3412;
}

.and-st-cart-upload__btn--ai:active {
    background: linear-gradient(145deg, rgba(255, 247, 237, 0.98), rgba(255, 237, 213, 0.88));
}

.and-st-cart-upload__icon-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.and-st-cart-upload__icon {
    color: #ea580c;
}

.and-st-cart-upload__ai-badge {
    position: absolute;
    right: -6px;
    bottom: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #ff8a2a 0%, #ff5a00 100%);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 7px rgba(255, 90, 0, 0.42);
    pointer-events: none;
}

.and-st-cart-upload__ai-badge svg {
    display: block;
    width: 8px;
    height: 8px;
}

.and-st-cart-card--busy {
    pointer-events: none;
}

.and-st-cart-card--busy .and-st-cart-upload__btn {
    opacity: 0.5;
}

.and-st-cart-ai-progress {
    margin: 8px 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 247, 237, 0.95), rgba(255, 237, 213, 0.55));
    border: 1px solid rgba(234, 88, 12, 0.22);
}

.and-st-cart-ai-progress__track {
    height: 5px;
    border-radius: 999px;
    background: rgba(234, 88, 12, 0.15);
    overflow: hidden;
    margin-bottom: 8px;
}

.and-st-cart-ai-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fb923c, #ea580c);
    transition: width 0.38s cubic-bezier(0.34, 1.1, 0.64, 1);
    animation: and-stcv-bar-shine 1.4s ease-in-out infinite;
}

.and-st-cart-ai-progress__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c2410c;
}

.and-st-cart-ai-progress[data-stage="read"] .and-st-cart-ai-progress__label,
.and-st-cart-ai-progress[data-stage="apply"] .and-st-cart-ai-progress__label {
    color: #9a3412;
}

.and-st-cart-catatan--flash {
    animation: and-stcv-catatan-flash 0.65s ease-out;
    border-color: rgba(234, 88, 12, 0.55) !important;
    background: rgba(255, 247, 237, 0.65) !important;
}

@keyframes and-stcv-bar-shine {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.82; }
}

@keyframes and-stcv-catatan-flash {
    0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.35); }
    70% { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0); }
    100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .and-st-cart-ai-progress__bar {
        animation: none;
        transition: none;
    }
    .and-st-cart-catatan--flash {
        animation: none;
    }
}

body.and-st-cart-open {
    overflow: hidden;
}

.and-st-form-stats {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-accent);
}

.and-st-form-item {
    display: flex;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.and-st-form-item:last-child {
    border-bottom: none;
}

.and-st-form-item__thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.and-st-form-item__body {
    flex: 1;
    min-width: 0;
}

.and-st-form-item__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
}

.and-st-form-item__sub {
    margin: 3px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-st-form-item__note {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: #475569;
    font-style: italic;
}

.and-st-form-item__thumbs {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.and-st-form-item__mini {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

/* Peminjaman form modern */
.and-main--pjm-form {
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 90, 0, 0.12), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(20, 184, 166, 0.12), transparent 24%),
        linear-gradient(180deg, #fff7ed 0%, #f8fafc 34%, #f1f5f9 100%);
}

.and-main--pjm-form .and-pjm-form-hero {
    position: relative;
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92));
    color: #fff;
    box-shadow: 0 20px 40px -26px rgba(15, 23, 42, 0.7);
    overflow: hidden;
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-main--pjm-form .and-pjm-form-hero,
    .and-main--pjm-form > .and-restock-header.and-form-hero,
    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > .and-restock-header.and-form-hero,
    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) .and-st-form-hero {
        margin: 0;
    }
}

.and-main--pjm-form .and-pjm-form-hero::after {
    content: '';
    position: absolute;
    inset: auto -20% -54% 18%;
    height: 110px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(-8deg);
    pointer-events: none;
}

.and-main--pjm-form .and-pjm-form-hero .and-restock-header__back {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.and-pjm-form-hero__copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.and-pjm-form-hero__eyebrow {
    display: inline-flex;
    margin-bottom: 4px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(254, 215, 170, 0.92);
}

.and-main--pjm-form .and-pjm-form-hero .and-restock-header__title {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.and-pjm-form-hero__copy p {
    margin: 5px 0 0;
    max-width: 280px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(255, 247, 237, 0.78);
}

.and-main--pjm-form .and-pjm-form-card {
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.86);
    box-shadow:
        0 18px 38px -30px rgba(15, 23, 42, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.and-main--pjm-form .and-pjm-summary-card {
    padding-bottom: 12px;
}

.and-pjm-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.and-pjm-section-title--form {
    margin-bottom: 14px;
}

.and-pjm-section-title__icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(145deg, rgba(255, 90, 0, 0.16), rgba(20, 184, 166, 0.12));
    color: #ea580c;
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.14);
}

.and-pjm-section-title .and-ra-form-section__title {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: #0f172a;
}

.and-pjm-section-title p {
    margin: 2px 0 0;
    font-size: 0.6875rem;
    color: #94a3b8;
    line-height: 1.35;
}

.and-main--pjm-form .and-st-form-stats {
    flex-shrink: 0;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.1);
    color: #ea580c;
    font-size: 0.6875rem;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.14);
}

.and-main--pjm-form .and-st-form-summary__head {
    margin-bottom: 12px;
}

.and-main--pjm-form .and-st-form-summary__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(52vh, 420px);
    min-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.and-main--pjm-form .and-st-form-item {
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}

.and-main--pjm-form .and-st-form-item__thumb {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.55);
}

.and-main--pjm-form .and-st-form-item__name {
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.35;
    word-break: break-word;
}

.and-main--pjm-form .and-st-form-item__sub {
    font-size: 0.6875rem;
    color: #64748b;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.35;
}

.and-main--pjm-form .and-st-form-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255, 247, 237, 0.9);
    color: #9a3412;
    font-size: 0.71875rem;
}

.and-main--pjm-form .and-st-form-note::before {
    content: '!';
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ff5a00;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 900;
}

.and-main--pjm-form .and-pjm-modern-field {
    margin-bottom: 12px;
}

.and-main--pjm-form .and-ra-label {
    margin-bottom: 7px;
    padding-left: 2px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #334155;
}

.and-pjm-input-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    width: 100%;
    padding: 0 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.and-pjm-input-shell:focus-within {
    border-color: rgba(255, 90, 0, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(255, 90, 0, 0.1);
}

.and-pjm-input-shell__icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 90, 0, 0.1);
    color: #ea580c;
}

.and-pjm-input-shell .and-ra-input,
.and-pjm-input-shell .and-ra-picker-btn {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.and-pjm-input-shell .and-ra-input:focus {
    outline: none;
}

.and-pjm-input-shell .and-ra-picker-btn {
    color: #94a3b8;
    font-size: 0.875rem;
}

.and-pjm-input-shell .and-ra-picker-btn.has-value {
    color: #0f172a;
}

.and-main--pjm-form .and-pjm-catatan-field {
    margin-top: 4px;
}

.and-pjm-catatan-head {
    margin-bottom: 7px;
}

.and-pjm-voice-pill {
    padding: 7px 11px;
    background: linear-gradient(145deg, rgba(255, 90, 0, 0.14), rgba(20, 184, 166, 0.1));
    color: #ea580c;
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.18);
}

.and-pjm-catatan-box {
    border-radius: 16px;
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(145deg, #ffffff, #f8fafc);
}

.and-pjm-catatan-input {
    min-height: 112px;
    padding: 13px 14px;
    font-size: 0.875rem;
}

.and-pjm-catatan-hint {
    margin-top: 7px;
    color: #94a3b8;
}

.and-main--pjm-form #andPjmFormMsg {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(254, 226, 226, 0.86);
}

/* Serah terima form — modern (shares peminjaman tokens) */
.and-main--st-form {
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 90, 0, 0.12), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(20, 184, 166, 0.12), transparent 24%),
        linear-gradient(180deg, #fff7ed 0%, #f8fafc 34%, #f1f5f9 100%);
}

.and-main--st-form .and-st-form-hero,
.and-main--rab-form .and-st-form-hero {
    position: relative;
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92));
    color: #fff;
    box-shadow: 0 20px 40px -26px rgba(15, 23, 42, 0.7);
    overflow: hidden;
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-main--st-form:not(.and-main--svc-form) .and-st-form-hero,
    .and-main--st-form:not(.and-main--svc-form) > .and-restock-header.and-form-hero,
    .and-main--rab-form .and-st-form-hero {
        margin: 0;
    }
}

.and-main--st-form .and-st-form-hero::after,
.and-main--rab-form .and-st-form-hero::after {
    content: '';
    position: absolute;
    inset: auto -20% -54% 18%;
    height: 110px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(-8deg);
    pointer-events: none;
}

.and-main--st-form .and-st-form-hero .and-restock-header__back,
.and-main--rab-form .and-st-form-hero .and-restock-header__back {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.and-main--st-form .and-st-form-hero .and-restock-header__title,
.and-main--rab-form .and-st-form-hero .and-restock-header__title {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.and-main--st-form .and-pjm-form-card {
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.86);
    box-shadow:
        0 18px 38px -30px rgba(15, 23, 42, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.and-main--st-form .and-pjm-summary-card {
    padding-bottom: 12px;
}

.and-main--st-form .and-st-form-stats {
    flex-shrink: 0;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.1);
    color: #ea580c;
    font-size: 0.6875rem;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.14);
}

.and-main--st-form .and-st-form-summary__head {
    margin-bottom: 12px;
}

.and-main--st-form .and-st-form-summary__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(52vh, 420px);
    min-height: 280px;
    padding-right: 2px;
}

.and-main--st-form .and-st-form-item {
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}

.and-main--st-form .and-st-form-item__thumb {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.55);
}

.and-main--st-form .and-st-form-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255, 247, 237, 0.9);
    color: #9a3412;
    font-size: 0.71875rem;
}

.and-main--st-form .and-st-form-note::before {
    content: '!';
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--and-accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 900;
}

.and-main--st-form .and-pjm-modern-field {
    margin-bottom: 12px;
}

.and-main--st-form .and-ra-label {
    margin-bottom: 7px;
    padding-left: 2px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #334155;
}

.and-main--st-form .and-st-form-check--modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 90, 0, 0.16);
    background: linear-gradient(145deg, rgba(255, 247, 237, 0.92), rgba(255, 255, 255, 0.95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #9a3412;
}

.and-st-form-check__icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
}

.and-main--st-form .and-st-bukti-preview--modern {
    margin-bottom: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 90, 0, 0.16);
    background: linear-gradient(145deg, #ffffff, #fff7ed);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.and-main--st-form .and-st-cart-upload--modern .and-st-cart-upload__btn {
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    font-size: 0.8125rem;
}

.and-main--st-form .and-st-cart-upload--modern .and-st-cart-upload__btn--accent {
    border-color: rgba(255, 90, 0, 0.28);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.88));
    color: #9a3412;
}

.and-main--st-form .and-st-cart-upload--modern .and-st-cart-upload__btn svg {
    color: var(--and-accent);
}

.and-main--st-form #andStFormMsg {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(254, 226, 226, 0.86);
}

.and-st-realisasi-sheet__header {
    gap: 8px;
}

.and-st-realisasi-sheet__title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    justify-content: center;
}

.and-st-realisasi-sheet__icon {
    width: 32px;
    height: 32px;
    border-radius: 11px;
}

.and-st-realisasi-sheet .and-svc-st-list {
    padding: 8px 16px 24px;
}

.and-st-realisasi-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
    padding: 14px 14px 14px 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.and-st-realisasi-item.is-selected {
    border-color: rgba(255, 90, 0, 0.45);
    background: linear-gradient(145deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 90, 0, 0.12),
        0 8px 20px -16px rgba(255, 90, 0, 0.35);
}

.and-st-realisasi-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 90, 0, 0.1);
    color: var(--and-accent);
}

.and-st-realisasi-item__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.and-st-realisasi-item__body strong {
    font-size: 0.875rem;
    color: #0f172a;
}

.and-st-realisasi-item__body span,
.and-st-realisasi-item__body em {
    font-size: 0.75rem;
    color: #64748b;
    font-style: normal;
}

.and-st-realisasi-item__check {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--and-accent);
    opacity: 0;
}

.and-st-realisasi-item.is-selected .and-st-realisasi-item__check {
    opacity: 1;
}

.and-pjm-form-bar {
    padding: 10px 14px calc(var(--and-safe-bottom) + 10px);
    background: rgba(255, 255, 255, 0.82);
    border-top: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 -18px 40px -28px rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.and-pjm-form-bar__actions {
    gap: 10px;
}

.and-pjm-form-bar .and-btn {
    min-height: 50px;
    border-radius: 16px;
}

.and-pjm-form-bar__back {
    background: #fff;
}

.and-pjm-form-bar__save {
    background: linear-gradient(135deg, #ff5a00, #f97316);
    box-shadow: 0 14px 26px -16px rgba(249, 115, 22, 0.9) !important;
}

.and-st-form-switch__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.and-st-form-switch__label {
    font-size: 0.8125rem;
    color: #64748b;
}

.and-st-bukti-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.and-st-bukti-preview__thumb {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.12);
}

.and-st-bukti-preview__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-st-bukti-pdf {
    font-size: 0.625rem;
    font-weight: 800;
    color: #64748b;
}

.and-st-bukti-preview__name {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-st-bukti-preview__clear {
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.and-st-form-bar__draft {
    flex-shrink: 0;
    min-width: 72px;
}

.and-st-save-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: andStOverlayIn 0.28s ease;
}

.and-st-save-overlay[hidden] {
    display: none !important;
}

.and-st-save-overlay__card {
    width: min(100%, 300px);
    padding: 28px 24px;
    border-radius: 1.25rem;
    background: #fff;
    text-align: center;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
    animation: andStCardIn 0.36s cubic-bezier(0.32, 0.72, 0, 1);
}

.and-st-save-overlay__spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 3px solid rgba(255, 90, 0, 0.18);
    border-top-color: var(--and-accent);
    animation: andStSpin 0.85s linear infinite;
}

.and-st-save-overlay__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.and-st-save-overlay__sub {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
}

body.and-st-saving {
    overflow: hidden;
}

@keyframes andStSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes andStOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes andStCardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.and-pjm-return-loading {
    padding: 8px 0 16px;
}

.and-pjm-return-summary {
    padding: 4px 4px 8px;
}

.and-pjm-return-summary__nomor {
    margin: 0 0 4px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--and-accent);
}

.and-pjm-return-summary__name {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.and-pjm-return-summary__meta {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    color: #64748b;
}

.and-pjm-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.and-pjm-status--dipinjam {
    background: rgba(255, 90, 0, 0.12);
    color: #ea580c;
}

.and-pjm-status--parsial {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.and-pjm-status--telat {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.and-pjm-status--dikembalikan {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-pjm-status--tidak {
    background: rgba(148, 163, 184, 0.16);
    color: #64748b;
}

.and-pjm-status--muted {
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
}

.and-pjm-return-all-btn {
    display: inline-flex;
    align-items: center;
    margin: 0 4px 12px;
    padding: 0;
    border: none;
    background: none;
    color: var(--and-accent);
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
}

.and-pjm-return-item {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.72);
}

.and-pjm-return-item.is-active {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.06);
}

.and-pjm-return-item.is-done {
    opacity: 0.55;
}

.and-pjm-return-item__head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.and-pjm-return-item__thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(148, 163, 184, 0.12);
}

.and-pjm-return-item__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.and-pjm-return-item__body {
    flex: 1;
    min-width: 0;
}

.and-pjm-return-item__name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
}

.and-pjm-return-item__meta {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
}

.and-pjm-return-qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.and-pjm-return-qty__btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #fff;
    color: #334155;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.and-pjm-return-qty__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.and-pjm-return-qty__input {
    width: 64px;
    text-align: center;
    padding: 8px 6px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
}

.and-pjm-return-kondisi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.and-pjm-return-kondisi .and-pjm-kondisi-card {
    min-height: 76px;
    padding: 10px 6px;
}

.and-pjm-return-preview {
    margin: 14px 4px 0;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.45;
}

.and-restock-header__back {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.and-stats-grid--pjm .and-stat-card:active {
    transform: none;
}

.and-stats-grid--pjm .and-stat-card__value {
    font-size: 1.5rem;
}

.and-pjm-filter-active {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--and-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-pjm-filter-reset {
    flex-shrink: 0;
    padding: 6px 12px;
    margin-left: auto;
    border-radius: var(--and-radius-full);
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-accent);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.and-pjm-filter-reset:active {
    transform: scale(0.97);
    background: rgba(255, 90, 0, 0.1);
}

.and-pjm-card__content {
    flex: 1;
    min-width: 0;
}

.and-pjm-card__expand-hint {
    margin: 6px 0 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--and-accent);
}

.and-pjm-card.is-open .and-pjm-card__expand-hint {
    color: #64748b;
}

.and-pjm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-pjm-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--and-radius-xl);
    box-shadow: var(--and-shadow-sm);
    outline: 1px solid rgba(255, 255, 255, 0.45);
    overflow: hidden;
}

.and-pjm-card.is-open .and-pjm-card__chev {
    transform: rotate(90deg);
}

.and-pjm-card__head {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 12px 10px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.and-pjm-card__chev {
    flex-shrink: 0;
    margin-top: 4px;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.and-pjm-card__main {
    flex: 1;
    min-width: 0;
}

.and-pjm-card__hero {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.and-pjm-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--and-radius-full);
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.and-pjm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-pjm-avatar--sm {
    width: 28px;
    height: 28px;
    font-size: 0.625rem;
}

.and-pjm-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.and-pjm-card__nomor {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--and-text-primary);
    line-height: 1.3;
}

.and-pjm-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.and-pjm-hari {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--and-radius-full);
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.and-pjm-card__meta {
    font-size: 0.6875rem;
    color: var(--and-text-muted);
    line-height: 1.45;
    margin-bottom: 2px;
}

.and-pjm-card__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
}

.and-pjm-card__sender {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.and-pjm-card__sender-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0;
}

.and-pjm-card__actions {
    padding: 0 12px 12px;
}

.and-pjm-return-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--and-radius-lg);
    background: rgba(255, 90, 0, 0.1);
    border: 1px solid rgba(255, 90, 0, 0.25);
    color: var(--and-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}

.and-pjm-return-btn:active {
    transform: scale(0.98);
    background: rgba(255, 90, 0, 0.16);
}

.and-pjm-card__detail {
    padding: 10px 12px 12px 36px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(248, 250, 252, 0.35);
}

.and-pjm-card__detail[hidden] {
    display: none;
}

.and-pjm-detail-title {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--and-text-muted);
}

.and-pjm-detail-empty {
    margin: 0;
    padding: 4px 0;
    font-size: 0.8125rem;
    color: var(--and-text-muted);
}

.and-pjm-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 0;
}

.and-pjm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--and-radius-md);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.and-pjm-item__thumb {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(148, 163, 184, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.and-pjm-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-pjm-item__body {
    flex: 1;
    min-width: 0;
}

.and-pjm-item__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--and-text-primary);
    margin: 0;
}

.and-pjm-item__sub {
    font-size: 0.6875rem;
    color: var(--and-text-muted);
    margin: 2px 0 0;
}

.and-pjm-item__qty {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--and-accent);
    white-space: nowrap;
}

.and-pjm-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.and-pjm-card--link:active {
    transform: scale(0.985);
}

.and-pjm-card--compact .and-pjm-card__head {
    cursor: default;
    pointer-events: none;
}

.and-pjm-card--compact .and-pjm-card__chev {
    display: none;
}

/* --------------------------------------------------------------------------
   Item detail — Liquid Hub
   -------------------------------------------------------------------------- */
.and-main--item-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
    box-sizing: border-box;
    gap: 8px;
}

.and-body--no-nav .and-main--item-detail {
    padding-bottom: calc(var(--and-safe-bottom) + 24px);
}

.and-item-gallery {
    margin-top: 4px;
}

.and-item-detail-header {
    position: relative;
    top: auto;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 24px;
    border: 0;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92));
    color: #fff;
    box-shadow: 0 20px 40px -26px rgba(15, 23, 42, 0.7);
    overflow: hidden;
    flex-shrink: 0;
}

.and-item-detail-header.and-bf-header.and-form-hero {
    margin-bottom: 14px;
}

.and-item-detail-body {
    min-width: 0;
}

.and-item-detail-header__back,
.and-item-detail-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--and-radius-full);
    color: #64748b;
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.and-item-detail-header__icon--edit {
    color: var(--and-accent);
    background: rgba(255, 90, 0, 0.08);
}

.and-item-detail-header__titles {
    flex: 1;
    min-width: 0;
}

.and-item-detail-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.and-item-detail-header__admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.and-item-detail-header__admin-btn--icon {
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--and-radius-full);
}

.and-item-detail-header__admin-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.and-item-detail-header__admin-btn--danger {
    color: #dc2626;
    background: rgba(254, 226, 226, 0.85);
    border-color: rgba(248, 113, 113, 0.35);
}

.and-item-detail-header__admin-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.and-item-detail-inactive {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    color: #64748b;
    background: rgba(148, 163, 184, 0.2);
}

.and-item-detail-header__title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.and-item-detail-header__sku {
    margin: 2px 0 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
}

.and-item-gallery__hero {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 1.5rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.45);
    margin-bottom: 12px;
}

.and-item-gallery__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-item-gallery__badges {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.and-item-gallery__badge {
    padding: 6px 12px;
    border-radius: var(--and-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.and-item-gallery__badge--ok {
    background: rgba(16, 185, 129, 0.92);
}

.and-item-gallery__badge--muted {
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
}

.and-item-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.and-item-gallery__thumb {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 0;
    cursor: pointer;
    background: #fff;
}

.and-item-gallery__thumb.is-active {
    border-color: var(--and-accent);
    box-shadow: 0 0 0 2px rgba(255, 90, 0, 0.2);
}

.and-item-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-item-detail-body {
    padding: 0 2px;
}

.and-item-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.and-item-detail-tag {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
}

.and-item-detail-tag--primary {
    background: rgba(255, 90, 0, 0.1);
    color: var(--and-accent);
}

.and-item-detail-tag--pill {
    border-radius: var(--and-radius-full);
    text-transform: none;
    font-weight: 600;
}

.and-item-detail-name {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin: 0 0 6px;
}

.and-item-detail-card {
    margin-bottom: 16px;
    padding: 18px 16px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08);
}

.and-item-detail-desc {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 14px;
}

.and-item-detail-desc__link {
    color: var(--and-accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.and-item-detail-ref {
    margin: 0 0 16px;
}

.and-item-detail-ref__label {
    margin: 0 0 8px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-item-detail-desc--ref {
    margin: 0;
}

.and-item-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 90, 0, 0.18);
    color: var(--and-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    max-width: 100%;
}

.and-item-detail-link__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.and-item-detail-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.and-item-detail-stat {
    padding: 12px 14px;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.and-item-detail-stat--price {
    background: rgba(255, 255, 255, 0.82);
}

.and-item-detail-stat__label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 4px;
}

.and-item-detail-stat__value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.and-item-detail-stat__value--price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: -0.01em;
}

.and-item-action-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
    margin-top: 2px;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(51, 65, 85, 0.1);
}

.and-item-action-strip--compact {
    grid-template-columns: 1fr 1fr;
}

.and-item-action-strip__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    padding: 10px 8px;
    border: 1px solid rgba(51, 65, 85, 0.12);
    border-radius: 0.875rem;
    background: #fff;
    color: #334155;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.and-item-action-strip__btn svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    opacity: 0.9;
}

.and-item-action-strip__btn:active {
    transform: scale(0.97);
}

.and-item-action-strip__btn--accent {
    background: rgba(255, 90, 0, 0.1);
    border-color: rgba(255, 90, 0, 0.28);
    color: var(--and-accent);
    box-shadow: 0 1px 2px rgba(255, 90, 0, 0.08);
}

.and-item-action-strip__btn--accent svg {
    color: var(--and-accent);
    opacity: 1;
}

.and-item-tabs-wrap {
    margin-top: 14px;
    padding: 12px;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(51, 65, 85, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 28px -12px rgba(15, 23, 42, 0.24);
}

.and-item-detail-card > .and-item-tabs-wrap--in-card {
    margin-top: 0;
    margin-bottom: 16px;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid rgba(51, 65, 85, 0.1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.and-item-detail-card > .and-item-tabs-wrap--in-card .and-item-tabs {
    margin-bottom: 12px;
}

.and-item-tabs {
    position: relative;
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    padding: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(51, 65, 85, 0.1);
}

.and-item-tabs__btn {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    border: none;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
}

.and-item-tabs__btn.is-active {
    color: #c94500;
    font-weight: 800;
}

.and-item-tabs__indicator {
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    height: auto;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(51, 65, 85, 0.1);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 4px 12px rgba(15, 23, 42, 0.08);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

.and-item-tab-panels {
    position: relative;
    min-height: 120px;
    padding-top: 14px;
}

.and-item-tab-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
    pointer-events: none;
    position: absolute;
    inset: 12px 0 0;
}

.and-item-tab-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    inset: auto;
}

.and-history-loading:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
}

.and-history-loading[hidden] {
    display: none !important;
}

.and-history-empty {
    margin: 0;
    padding: 20px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 600;
}

.and-history-section {
    margin-bottom: 20px;
}

.and-history-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.and-history-section__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
}

.and-history-section__badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--and-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    background: rgba(148, 163, 184, 0.2);
    color: #475569;
}

.and-history-section__badge--real {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.and-history-section__badge--bast {
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
}

.and-history-section__badge--restock {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.and-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-history-card {
    padding: 14px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.and-history-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.and-history-card__type {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--and-radius-full);
}

.and-history-card__type--real {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.and-history-card__type--bast {
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
}

.and-history-card__type--restock {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.and-history-card__date {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
}

.and-history-card__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
}

.and-history-card__sub {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-history-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    font-size: 0.75rem;
    color: #64748b;
}

.and-history-card__meta strong {
    color: #0f172a;
}

.and-history-card__qty--in strong {
    color: #059669;
}

.and-history-card__qty--out strong {
    color: #dc2626;
}

.and-history-card__tag {
    font-style: normal;
    font-size: 0.625rem;
    font-weight: 700;
    color: #0284c7;
}

.and-history-card__foot {
    margin: 8px 0 0;
    font-size: 0.6875rem;
    color: #94a3b8;
}

.and-item-spec-card {
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 24px;
}

.and-item-spec-card__head {
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.and-item-spec-card__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    font-size: 0.875rem;
}

.and-item-spec-card__row span {
    color: #64748b;
}

.and-item-spec-card__row strong {
    color: #0f172a;
    text-align: right;
}

.and-body--no-nav .and-layout--item-detail {
    padding-bottom: calc(var(--and-safe-bottom) + 96px);
}

.and-item-detail-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 8px);
    z-index: 120;
    display: flex;
    gap: 10px;
    padding: 0 var(--and-space-md);
    pointer-events: none;
}

.and-body--no-nav .and-item-detail-bar {
    bottom: calc(var(--and-safe-bottom) + 12px);
}

.and-bottom-nav[hidden],
.and-bottom-nav.is-suppressed,
.and-body--no-nav .and-bottom-nav,
.and-body--no-nav #and-spa-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(0, calc(100% + 32px), 0) !important;
    clip-path: inset(100% 0 0 0);
}

.and-body--no-nav .and-layout {
    padding-bottom: 0;
}

.and-body--no-nav .and-layout--std-detail {
    padding-bottom: 0;
}

.and-body--no-nav .and-main--pg-gemini:not(.and-main--ps-page) {
    padding-bottom: calc(var(--and-safe-bottom) + 24px);
}

.and-item-detail-bar__primary,
.and-item-detail-bar__more,
.and-item-detail-bar__edit {
    pointer-events: auto;
}

.and-item-detail-bar__primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 1rem;
    background: var(--and-accent);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(255, 90, 0, 0.35);
    border: none;
    cursor: pointer;
    font: inherit;
}

.and-item-detail-bar__more {
    width: 48px;
    height: 48px;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.and-item-detail-bar__edit {
    width: 48px;
    height: 48px;
    border-radius: 1rem;
    border: 1px solid rgba(255, 90, 0, 0.22);
    background: rgba(255, 255, 255, 0.92);
    color: var(--and-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-skeleton--hero {
    height: 220px;
    border-radius: 1.5rem;
    margin-bottom: 16px;
}

.and-skeleton--block {
    height: 280px;
    border-radius: 1rem;
}

/* ==========================================================================
   Barang form — Add / Edit (Liquid Hub wizard)
   ========================================================================== */
.and-barang-form-layout {
    min-height: 100svh;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* Barang form — AI Vision dari foto */
.and-bf-vision-wrap {
    flex-shrink: 0;
    overflow: hidden;
    transition: margin 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.and-bf-vision-wrap.is-exiting {
    pointer-events: none;
}

.and-bf-vision-wrap.is-collapsed {
    margin-bottom: 0;
}

.and-bf-vision {
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 90, 0, 0.14);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.98) 55%, rgba(255, 248, 242, 0.95) 100%);
    box-shadow: 0 10px 28px -14px rgba(255, 90, 0, 0.22);
    padding: 14px 12px 12px;
    overflow: hidden;
    transition:
        opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.and-bf-vision--enter {
    animation: and-bf-vision-fade 0.42s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.and-bf-vision.is-exiting {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
    max-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
}

.and-bf-vision__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
}

.and-bf-vision__title--center {
    text-align: center;
}

.and-bf-vision__sub {
    margin: 4px 0 14px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

.and-bf-vision__sub--center {
    text-align: center;
}

.and-bf-vision__drop-hint {
    margin: 10px 0 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
}

.and-bf-vision-wrap.is-dragover .and-bf-vision--idle {
    border-color: rgba(255, 90, 0, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12), 0 10px 28px -14px rgba(255, 90, 0, 0.28);
}

.and-bf-vision--processing {
    text-align: center;
    padding: 20px 14px 18px;
}

.and-bf-vision__compress-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.and-bf-vision__compress-icon {
    font-size: 1.75rem;
    line-height: 1;
    animation: and-bf-vision-pulse 1.2s ease-in-out infinite;
}

.and-bf-vision__compress-note {
    margin: 12px 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
}

.and-bf-vision__progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.and-bf-vision__progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff5a00 0%, #ff8a3d 50%, #ff5a00 100%);
    background-size: 200% 100%;
    animation: and-bf-vision-progress-shine 1.4s ease-in-out infinite;
    transition: width 0.35s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.and-bf-vision__compress-stats {
    margin: 10px 0 4px;
    padding: 10px 12px;
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.and-bf-vision__stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 0.72rem;
    color: #64748b;
    padding: 3px 0;
}

.and-bf-vision__stat-row strong {
    color: #0f172a;
    font-weight: 800;
    font-size: 0.75rem;
}

.and-bf-vision__stat-row--save strong {
    color: #16a34a;
}

.and-bf-vision__cache-hit {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 0.75rem;
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.2);
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.and-bf-vision__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.and-bf-vision__pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.and-bf-vision__pick--card {
    aspect-ratio: 1;
    min-height: 132px;
    padding: 16px 10px 14px;
    border-radius: 1.15rem;
    border: 2px dashed rgba(255, 90, 0, 0.42);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.72) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.2s cubic-bezier(0.34, 1.15, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.and-bf-vision__pick--card:active {
    transform: scale(0.96);
    border-color: rgba(255, 90, 0, 0.62);
    box-shadow: 0 8px 20px -10px rgba(255, 90, 0, 0.35);
}

.and-bf-vision__pick-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1.5px solid rgba(255, 90, 0, 0.38);
    background: rgba(255, 255, 255, 0.92);
    color: #ff5a00;
}

.and-bf-vision__pick-label {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.and-bf-vision__pick-tag {
    margin-top: 4px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ff5a00;
}

.and-bf-vision__preview-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #0f172a;
    aspect-ratio: 16 / 10;
}

.and-bf-vision__preview-wrap--sm {
    aspect-ratio: 16 / 9;
    max-height: 160px;
}

.and-bf-vision__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-bf-vision__scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 90, 0, 0.18) 48%, transparent 100%);
    animation: and-bf-vision-scan 1.8s ease-in-out infinite;
    pointer-events: none;
}

.and-bf-vision__loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 0 2px;
}

.and-bf-vision__loader-ring {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 90, 0, 0.18);
    border-top-color: #ff5a00;
    animation: and-bf-vision-spin 0.85s linear infinite;
}

.and-bf-vision__stage {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #c2410c;
    text-align: center;
}

.and-bf-vision__warn {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 700;
}

.and-bf-vision__card {
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    margin-bottom: 10px;
}

.and-bf-vision__row {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    font-size: 0.75rem;
}

.and-bf-vision__row:last-child {
    border-bottom: none;
}

.and-bf-vision__key {
    flex: 0 0 38%;
    color: #64748b;
    font-weight: 600;
}

.and-bf-vision__val {
    flex: 1;
    color: #0f172a;
    font-weight: 700;
    word-break: break-word;
}

.and-bf-vision__note {
    margin: 0 0 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.45;
}

.and-bf-vision__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.and-bf-vision__foot .and-bf-btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 42px;
}

.and-bf-vision__foot .and-bf-btn--primary {
    flex: 1 1 100%;
}

.and-bf-vision__err {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #b91c1c;
    text-align: center;
}

@keyframes and-bf-vision-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes and-bf-vision-scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@keyframes and-bf-vision-spin {
    to { transform: rotate(360deg); }
}

@keyframes and-bf-vision-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes and-bf-vision-progress-shine {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .and-bf-vision,
    .and-bf-vision-wrap,
    .and-bf-vision__scan,
    .and-bf-vision__loader-ring,
    .and-bf-vision__compress-icon,
    .and-bf-vision__progress-bar {
        animation: none !important;
        transition: none !important;
    }
}

.and-main.and-main--barang-form {
    max-width: none;
    width: 100%;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(var(--and-nav-total) + 12px);
    box-sizing: border-box;
    gap: 12px;
}

.and-bf-form--wizard {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.and-bf-form--wizard .and-bf-panel.is-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.and-bf-form--wizard .and-bf-panel[data-panel="3"].is-active {
    overflow: hidden;
}

.and-bf-panel[data-panel="3"] > .and-bf-media-picks,
.and-bf-panel[data-panel="3"] > .and-bf-media-hint,
.and-bf-panel[data-panel="3"] > .and-bf-dropzone,
.and-bf-panel[data-panel="3"] > .and-bf-media-grid,
.and-bf-panel[data-panel="3"] > .and-bf-msg {
    margin-left: 12px;
    margin-right: 12px;
}

.and-bf-panel[data-panel="3"] > .and-bf-media-picks {
    margin-top: 14px;
}

.and-bf-panel__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px 12px;
}

.and-bf-header {
    position: relative;
    top: auto;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 16px 40px -12px rgba(255, 90, 0, 0.1);
    flex-shrink: 0;
    overflow: hidden;
}

.and-bf-header__left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.and-bf-header__info {
    flex: 1;
    min-width: 0;
}

.and-bf-header__mode {
    margin: 0 0 2px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--and-accent);
    line-height: 1.2;
}

.and-bf-header__back,
.and-bf-header__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: 1px;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #64748b;
    flex-shrink: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.and-bf-header__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.and-bf-header__meta {
    margin: 2px 0 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-bf-header__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
    align-self: center;
    padding-top: 0;
}

.and-bf-header__actions .and-bf-btn {
    padding: 9px 12px;
    border-radius: 0.75rem;
    white-space: nowrap;
}

.and-bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    border-radius: 0.85rem;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
}

.and-bf-btn:active {
    transform: scale(0.97);
}

.and-bf-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.and-bf-btn--ghost {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #475569;
}

.and-bf-btn--primary {
    background: var(--and-accent);
    color: #fff;
    box-shadow: 0 8px 24px rgba(255, 90, 0, 0.28);
}

.and-bf-steps-card {
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

.and-bf-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}

.and-bf-steps__track {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 18px;
    height: 3px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    z-index: 0;
}

.and-bf-steps__progress {
    height: 100%;
    width: 25%;
    background: var(--and-accent);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(255, 90, 0, 0.45);
    transition: width 0.35s ease;
}

.and-bf-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.and-bf-step__num {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #94a3b8;
    transition: all 0.25s ease;
}

.and-bf-step__label {
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-bf-step.is-active .and-bf-step__num {
    background: var(--and-accent);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(255, 90, 0, 0.35);
}

.and-bf-step.is-active .and-bf-step__label {
    color: var(--and-accent);
}

.and-bf-step.is-done .and-bf-step__num {
    background: rgba(255, 90, 0, 0.15);
    color: var(--and-accent);
    border-color: rgba(255, 90, 0, 0.2);
}

.and-bf-panel {
    padding: 0;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 48px -14px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.and-bf-panel__head {
    margin-bottom: 24px;
}

.and-bf-panel__title {
    margin: 0 0 6px;
    font-size: 1.625rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.and-bf-panel__sub {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #64748b;
}

.and-bf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.and-bf-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-bf-grid--compact {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.and-bf-field--full {
    grid-column: 1 / -1;
}

.and-bf-field {
    margin-bottom: 0;
    width: 100%;
}

.and-bf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
    padding-bottom: 0;
    overflow-x: visible;
}

.and-bf-chips.and-bf-chips--wrap {
    max-height: none;
}

.and-bf-chips .and-barang-chip {
    flex-shrink: 0;
}

.and-bf-field--kelas {
    padding-bottom: 14px;
    margin-bottom: 2px;
}

.and-bf-chips--year {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(100, 116, 139, 0.28);
    border-radius: 0.35rem;
    background: rgba(248, 250, 252, 0.72);
    overflow-x: visible;
}

.and-bf-chips--year .and-barang-chip {
    border-radius: 0.25rem;
    padding: 6px 10px;
    min-width: 3rem;
    text-align: center;
}

.and-bf-panel__content .and-bf-stack:not(:last-child),
.and-bf-panel__content .and-bf-field:not(:last-child),
.and-bf-panel__content .and-bf-grid:not(:last-child) {
    margin-bottom: 0;
}

@media (min-width: 640px) {
    .and-bf-grid {
        grid-template-columns: 1fr 1fr;
    }

    .and-main.and-main--barang-form {
        max-width: 720px;
        margin: 0 auto;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.and-bf-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-bf-label__opt {
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.625rem;
}

.and-bf-input,
.and-bf-select,
.and-bf-textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 0.85rem;
    border: 1.5px solid rgba(100, 116, 139, 0.45);
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #334155;
    outline: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.and-bf-input--tall {
    min-height: 52px;
}

.and-bf-input--readonly,
.and-bf-input[readonly] {
    background: rgba(248, 250, 252, 0.95);
    color: #64748b;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

.and-bf-input--readonly:focus,
.and-bf-input[readonly]:focus {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(100, 116, 139, 0.35);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.and-bf-select--tall,
.and-bf-select {
    min-height: 52px;
}

.and-bf-input:focus,
.and-bf-select:focus,
.and-bf-textarea:focus {
    background: #fff;
    border-color: rgba(255, 90, 0, 0.65);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12), inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.and-bf-textarea {
    resize: vertical;
    min-height: 64px;
    font-weight: 500;
    line-height: 1.45;
}

.and-bf-textarea--multiline {
    min-height: 96px;
    max-height: 200px;
    font-weight: 600;
}

.and-bf-textarea--compact {
    min-height: 56px;
    max-height: 88px;
}

.and-bf-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.and-bf-input-action {
    position: relative;
}

.and-bf-input-action .and-bf-input {
    padding-right: 56px;
    min-height: 52px;
}

.and-bf-input-action--area .and-bf-textarea {
    padding-right: 56px;
    min-height: 96px;
    border: 1.5px solid rgba(100, 116, 139, 0.45);
}

.and-bf-input-action__btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(100, 116, 139, 0.35);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--and-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.and-bf-input-action__btn--paste {
    top: 8px;
    transform: none;
}

.and-bf-url-import-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.and-bf-url-import-panel {
    margin-top: 10px;
}

.and-bf-url-import-panel[hidden] {
    display: none !important;
}

.and-bf-url-import__meta {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: #64748b;
}

.and-bf-btn--sm {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.82rem;
}

.and-bf-input-prefix {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    min-height: 52px;
    border-radius: 0.85rem;
    border: 1.5px solid rgba(100, 116, 139, 0.45);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.and-bf-input-prefix:focus-within {
    border-color: rgba(255, 90, 0, 0.65);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12), inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.and-bf-input-prefix--tall {
    min-height: 52px;
}

.and-bf-input-prefix span {
    font-weight: 800;
    color: #64748b;
    flex-shrink: 0;
}

.and-bf-input-prefix .and-bf-input {
    border: none;
    background: transparent;
    padding-left: 0;
    min-height: 0;
    box-shadow: none;
}

.and-bf-media-picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.and-bf-media-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(51, 65, 85, 0.14);
    border-radius: 1rem;
    background: #f8fafc;
    color: #334155;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.and-bf-media-pick:first-child {
    color: var(--and-accent);
    background: rgba(255, 90, 0, 0.08);
    border-color: rgba(255, 90, 0, 0.22);
}

.and-bf-media-pick:active {
    transform: scale(0.985);
    background: #fff;
}

.and-bf-media-pick:first-child:active {
    background: rgba(255, 90, 0, 0.12);
}

.and-bf-media-hint {
    margin: 0 0 12px;
    padding: 0 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    line-height: 1.45;
}

.and-bf-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 148px;
    padding: 24px 18px;
    margin-bottom: 16px;
    border: 2px dashed rgba(255, 90, 0, 0.34);
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 247, 237, 0.72) 0%, rgba(255, 255, 255, 0.98) 100%);
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.and-bf-dropzone:active {
    transform: scale(0.992);
}

.and-bf-dropzone.is-drag,
.and-bf-dropzone:focus-within {
    border-color: rgba(255, 90, 0, 0.55);
    background: rgba(255, 247, 237, 0.92);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}

.and-bf-dropzone__icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.16);
}

.and-bf-dropzone__title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.and-bf-dropzone__sub {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
}

.and-bf-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.and-bf-media-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.14);
    background: #f8fafc;
    cursor: pointer;
}

.and-bf-media-item.is-utama {
    border-color: var(--and-accent);
}

.and-bf-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-bf-media-item__del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.and-bf-media-item__tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--and-accent);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
}

.and-bf-media-item__tag--clone {
    background: rgba(59, 130, 246, 0.92);
    top: 6px;
    bottom: auto;
}

.and-bf-media-item__tag--pick {
    background: rgba(15, 23, 42, 0.72);
}

.and-bf-media-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.and-search-select__panel.is-floating {
    display: flex;
    flex-direction: column;
    z-index: 220;
}

.and-search-select__panel.is-floating .and-search-select__list {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.and-search-select.is-open-up .and-search-select__panel:not(.is-floating) {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom center;
}

.and-bf-panel__foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid rgba(255, 90, 0, 0.1);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0 0 1.35rem 1.35rem;
}

.and-bf-panel__foot .and-bf-btn {
    flex: 1;
    min-height: 44px;
    border-radius: 0.875rem;
}

.and-bf-panel__foot .and-bf-btn--primary {
    flex: 1.15;
}

.and-bf-msg {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.and-bf-msg--error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.and-bf-msg--ok {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

@media (max-width: 480px) {
    .and-bf-header__actions .and-bf-btn--ghost {
        display: none;
    }
}

/* ==========================================================================
   Karyawan — Daftar karyawan (profil card)
   ========================================================================== */
.and-main--karyawan {
    padding-top: calc(var(--and-page-inset-top) + 12px);
    padding-bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
}

.and-kar-toolbar__hint {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.and-kar-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.and-kar-card {
    position: relative;
    padding: 24px 20px 20px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.96) 0%, rgba(245, 236, 226, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 18px 40px -24px rgba(87, 62, 45, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    text-align: center;
}

.and-kar-card--sk {
    pointer-events: none;
}

.and-kar-card__avatar-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
}

.and-kar-card__avatar {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 154, 77, 0.18), rgba(255, 90, 0, 0.1));
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px -12px rgba(124, 45, 18, 0.35);
    font-size: 1.5rem;
    font-weight: 900;
    color: #9a3412;
}

.and-kar-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-kar-card__status {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #cbd5e1;
    border: 3px solid #fff7ed;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.and-kar-card__status.is-online {
    background: #22c55e;
}

.and-kar-card__name {
    margin: 0 0 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #3f2f24;
}

.and-kar-card__role {
    margin: 0 0 10px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a18068;
}

.and-kar-card__dept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto 18px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(161, 128, 104, 0.16);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b7355;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-kar-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 18px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(161, 128, 104, 0.14);
}

.and-kar-card__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 0;
}

.and-kar-card__stat + .and-kar-card__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 4px;
    width: 1px;
    background: rgba(161, 128, 104, 0.14);
}

.and-kar-card__stat strong {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #3f2f24;
}

.and-kar-card__stat span {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a18068;
}

.and-kar-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(161, 128, 104, 0.16);
    box-shadow: 0 8px 20px -14px rgba(87, 62, 45, 0.28);
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: #5c4638;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease, background 0.15s ease;
}

.and-kar-card__cta:active {
    transform: scale(0.98);
    background: #fff;
}

/* Karyawan — bottom sheet profil & form */
body.and-kar-sheet-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

.and-kar-sheet[hidden] {
    display: none !important;
}

.and-kar-sheet {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
}

.and-kar-sheet:not([hidden]) {
    display: flex;
    visibility: visible;
}

.and-kar-sheet.is-open {
    pointer-events: auto;
}

.and-kar-sheet__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.32s ease;
}

.and-kar-sheet.is-open .and-kar-sheet__backdrop {
    opacity: 1;
}

.and-kar-sheet__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 12px 20px calc(var(--and-safe-bottom) + 24px);
    border-radius: 1.75rem 1.75rem 0 0;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(245, 236, 226, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 -20px 60px rgba(87, 62, 45, 0.18);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
}

.and-kar-sheet.is-open .and-kar-sheet__panel {
    transform: translate3d(0, 0, 0);
}

.and-kar-sheet__handle {
    width: 40px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: rgba(161, 128, 104, 0.35);
}

.and-kar-sheet__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.and-kar-sheet__title {
    margin: 0 0 16px;
    padding-right: 40px;
    font-size: 1.125rem;
    font-weight: 800;
    color: #5c4638;
}

.and-kar-sheet__body {
    min-height: 80px;
}

.and-kar-profile__loading,
.and-kar-profile__error {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
}

.and-kar-profile__error {
    color: #b91c1c;
}

.and-kar-profile__hero {
    text-align: center;
    margin-bottom: 18px;
}

.and-kar-profile__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f5ebe0 0%, #e8d5c4 100%);
    font-size: 1.75rem;
    font-weight: 800;
    color: #8b6914;
    overflow: hidden;
}

.and-kar-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-kar-profile__name {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #5c4638;
}

.and-kar-profile__role {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a18068;
}

.and-kar-profile__dept {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(161, 128, 104, 0.16);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #8b6914;
}

.and-kar-profile__status {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: rgba(148, 163, 184, 0.16);
    color: #64748b;
}

.and-kar-profile__status.is-active {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.and-kar-profile__stats {
    display: flex;
    margin-bottom: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(161, 128, 104, 0.12);
    overflow: hidden;
}

.and-kar-profile__stat {
    flex: 1;
    padding: 14px 10px;
    text-align: center;
    position: relative;
}

.and-kar-profile__stat + .and-kar-profile__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: rgba(161, 128, 104, 0.16);
}

.and-kar-profile__stat strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: #5c4638;
}

.and-kar-profile__stat span {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a18068;
}

.and-kar-profile__dl {
    display: grid;
    grid-template-columns: minmax(0, 38%) 1fr;
    gap: 8px 12px;
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(161, 128, 104, 0.12);
}

.and-kar-profile__dl dt {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a18068;
}

.and-kar-profile__dl dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #5c4638;
    word-break: break-word;
}

.and-kar-profile__about-label {
    margin: 0 0 6px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a18068;
}

.and-kar-profile__about {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(161, 128, 104, 0.12);
}

.and-kar-profile__about-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #5c4638;
}

.and-kar-profile__addrs {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(161, 128, 104, 0.12);
}

.and-kar-profile__addr-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-kar-profile__addr-list li {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #5c4638;
}

.and-kar-profile__addr-type {
    display: block;
    margin-bottom: 2px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a18068;
}

.and-kar-form-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-kar-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.and-kar-form-field.is-hidden {
    display: none;
}

.and-kar-form-field__label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a18068;
}

.and-kar-form__msg {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
}

.and-kar-form__msg--error {
    color: #b91c1c;
}

.and-kar-form__submit {
    width: 100%;
    margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .and-kar-sheet__backdrop,
    .and-kar-sheet__panel {
        transition: none;
    }
}


.and-kar-card__sk-avatar {
    width: 88px;
    height: 88px;
    margin: 0 auto;
    border-radius: 22px;
}

.and-main--karyawan .and-data-hero__search .and-dash-search--has-voice .and-dash-search__field {
    border-color: rgba(255, 255, 255, 0.28);
}

/* ==========================================================================
   Restock — Lakukan Restock (selaras mobile/m-tambah-restok)
   ========================================================================== */
.and-main--restock {
    padding-top: calc(var(--and-page-inset-top) + 12px);
    padding-bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
}

.and-restock-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.and-restock-header__back,
.and-restock-header__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--and-radius-full);
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.5);
    color: #64748b;
    flex-shrink: 0;
}

.and-restock-header__search-btn--smart {
    color: #ff5a00;
    border-color: rgba(255, 90, 0, 0.35);
    background: rgba(255, 90, 0, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 90, 0, 0.08);
}

.and-restock-header__search-btn--smart:active {
    background: rgba(255, 90, 0, 0.18);
}

.and-restock-header__title {
    flex: 1;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
}

.and-restock-search-panel {
    margin-bottom: 10px;
}

.and-restock-search-panel:not([hidden]) {
    padding-top: 2px;
}

.and-restock-search-panel .and-dash-search--smart {
    width: 100%;
}

.and-restock-search-panel .and-dash-search__field {
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: #ffffff;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.1);
}

.and-restock-search-panel.is-open {
    animation: and-voice-fade-in 0.22s ease;
}

.and-restock-header__search-btn.is-open {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.25);
}

.and-restock-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.and-restock-header__search-btn--quick {
    color: #ff5a00;
    border-color: rgba(255, 90, 0, 0.35);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 1px rgba(255, 90, 0, 0.1);
}

.and-restock-header__search-btn--quick:active {
    background: rgba(255, 90, 0, 0.14);
}

.and-restock-toolbar {
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.and-restock-toolbar .and-barang-select {
    flex: 0 0 auto;
    min-width: 118px;
    max-width: none;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 8px 22px 8px 10px;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.55);
    background-position: right 8px center;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.and-restock-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin: 0 0 14px;
}

.and-restock-hint {
    margin: 0 4px 12px;
    font-size: 0.8125rem;
    color: #64748b;
}

.and-restock-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-restock-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.65);
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.and-restock-row:active {
    transform: scale(0.985);
    background: rgba(255, 255, 255, 0.85);
}

.and-restock-row__thumb {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--and-bg-card-alt);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.and-restock-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-restock-row__thumb img.and-img--fallback {
    object-fit: contain;
    padding: 22%;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(224, 231, 255, 0.9));
}

.and-restock-row__body {
    flex: 1;
    min-width: 0;
}

.and-restock-row__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-restock-row__sub {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-restock-row__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
    flex-shrink: 0;
}

body.and-restock-sheet-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

.and-restock-sheet[hidden] {
    display: none !important;
}

.and-restock-sheet {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
}

.and-restock-sheet:not([hidden]) {
    display: flex;
    visibility: visible;
}

.and-restock-sheet.is-open {
    pointer-events: auto;
}

.and-restock-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.32s ease;
    will-change: opacity;
}

.and-restock-sheet.is-open .and-restock-sheet__backdrop {
    opacity: 1;
}

.and-restock-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 12px 20px calc(var(--and-safe-bottom) + 24px);
    border-radius: 1.75rem 1.75rem 0 0;
    background: rgba(219, 234, 254, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.15);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.and-restock-sheet.is-open .and-restock-sheet__panel {
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {

    .and-restock-sheet__backdrop,
    .and-restock-sheet__panel,
    .and-pjm-cart-panel {
        transition: none;
    }
}

.and-restock-sheet__handle {
    width: 40px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
}

.and-restock-sheet__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.and-restock-sheet__hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1.25rem;
    overflow: hidden;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.5);
}

.and-restock-sheet__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-restock-sheet__hero img.and-img--fallback {
    object-fit: contain;
    padding: 18%;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(224, 231, 255, 0.9));
}

.and-restock-sheet__title {
    margin: 0 0 4px;
    padding-right: 40px;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
}

.and-restock-sheet__sku {
    margin: 0 0 16px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.and-restock-panel {
    padding: 16px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
}

.and-restock-panel__label {
    margin: 0 0 4px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
}

.and-restock-panel__current {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    color: #64748b;
}

.and-restock-panel__current strong {
    color: #0f172a;
}

.and-restock-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.and-restock-stepper__btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: #1a1a1a;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.and-restock-stepper__input {
    width: 72px;
    height: 40px;
    text-align: center;
    font-weight: 800;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #fff;
}

.and-restock-stepper__save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    margin-left: auto;
    border: none;
    border-radius: 999px;
    background: var(--and-accent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 90, 0, 0.3);
}

.and-restock-panel__msg {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.and-restock-panel__msg--error {
    color: #dc2626;
}

.and-restock-panel__msg--success {
    color: #059669;
}

.and-restock-panel__msg--info {
    color: #64748b;
}

.and-restock-sheet__detail {
    display: block;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--and-accent);
    text-decoration: none;
}

/* Buku form — data bantu (mapel/kategori) */
.and-bf-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.and-bf-label-row .and-bf-label {
    margin-bottom: 0;
}

.and-bf-manage-btn {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--and-accent);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    cursor: pointer;
}

.and-bf-manage-btn:active {
    opacity: 0.75;
}

.and-buku-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.and-buku-suggest[hidden] {
    display: none !important;
}

.and-buku-suggest .and-barang-chip {
    font-size: 0.6875rem;
    padding: 4px 10px;
}

.and-bf-field--mapel {
    position: relative;
    z-index: 2;
}

.and-bf-mapel-picker {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 0.875rem;
    border: 1px solid rgba(100, 116, 139, 0.28);
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.and-bf-mapel-picker:active {
    transform: scale(0.99);
}

.and-bf-mapel-picker.has-value .and-ra-picker-btn__text {
    color: #0f172a;
    font-weight: 600;
}

.and-bf-mapel-picker:not(.has-value) .and-ra-picker-btn__text {
    color: #94a3b8;
    font-weight: 500;
}

/* Searchable select (legacy — unused by buku form) */
.and-search-select {
    position: relative;
}

.and-search-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.and-search-select__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.and-search-select__label.is-placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.and-search-select__chev {
    flex-shrink: 0;
    color: #64748b;
    transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.and-search-select.is-open .and-search-select__chev {
    transform: rotate(180deg);
}

.and-search-select.is-open {
    z-index: 30;
    position: relative;
}

.and-bf-form--wizard .and-bf-panel.is-active:has(.and-search-select.is-open),
.and-bf-panel__content:has(.and-search-select.is-open) {
    overflow: visible;
}

.and-search-select__panel {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
    overflow: hidden;
    transform-origin: top center;
    animation: andSearchSelectIn 0.26s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes andSearchSelectIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.and-search-select__search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    background: #f8fafc;
}

.and-search-select__search-icon {
    flex-shrink: 0;
    color: #94a3b8;
}

.and-search-select__search {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    outline: none;
}

.and-search-select__list {
    max-height: min(240px, 42vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
}

.and-search-select__option {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.14s ease;
}

.and-search-select__option:active {
    transform: scale(0.98);
}

.and-search-select__option.is-active,
.and-search-select__option:hover {
    background: var(--and-accent-surface);
    color: var(--and-accent-light);
}

.and-search-select__empty {
    margin: 0;
    padding: 16px 12px;
    text-align: center;
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* Kategori — chip-only picker */
.and-bf-field--kategori .and-buku-kategori-chips {
    margin-top: 4px;
}

.and-buku-kategori-chips .and-barang-chip {
    transition:
        background 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.18s cubic-bezier(0.34, 1.2, 0.64, 1),
        box-shadow 0.32s ease;
}

.and-buku-kategori-chips .and-barang-chip.is-active {
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.18);
}

/* Buku form — kurangi rounded pembungkus pilihan chip */
.and-main--barang-form .and-chip-track--barang {
    border-radius: 0.5rem;
}

.and-main--barang-form .and-bf-chips--year {
    border-radius: 0.5rem;
}

.and-main--barang-form .and-chip-track .and-chip-indicator {
    border-radius: 0.375rem !important;
}

.and-buku-databantu-sheet .and-restock-sheet__panel {
    max-height: min(88vh, 640px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-buku-databantu-sheet .and-restock-sheet__backdrop {
    transition: opacity 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.and-buku-databantu-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

.and-buku-databantu-sheet.is-open .and-restock-sheet__title,
.and-buku-databantu-sheet.is-open .and-buku-databantu-sheet__sub,
.and-buku-databantu-sheet.is-open .and-buku-databantu-add {
    animation: and-buku-sheet-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.07s both;
}

.and-buku-databantu-sheet.is-open .and-buku-databantu-list {
    animation: and-buku-sheet-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

@keyframes and-buku-sheet-in {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.and-buku-mapel-sheet.and-ra-fullsheet .and-ra-fullsheet__backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.and-buku-mapel-sheet.and-ra-fullsheet .and-restock-sheet__panel {
    transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-buku-mapel-sheet.is-open .and-ra-fullsheet__header,
.and-buku-mapel-sheet.is-open .and-ra-picker-search-wrap {
    animation: and-buku-sheet-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.and-buku-mapel-sheet.is-open .and-ra-picker-list {
    animation: and-buku-sheet-in 0.44s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

@media (prefers-reduced-motion: reduce) {
    .and-buku-databantu-sheet.is-open .and-restock-sheet__title,
    .and-buku-databantu-sheet.is-open .and-buku-databantu-sheet__sub,
    .and-buku-databantu-sheet.is-open .and-buku-databantu-add,
    .and-buku-databantu-sheet.is-open .and-buku-databantu-list,
    .and-buku-mapel-sheet.is-open .and-ra-fullsheet__header,
    .and-buku-mapel-sheet.is-open .and-ra-picker-search-wrap,
    .and-buku-mapel-sheet.is-open .and-ra-picker-list {
        animation: none;
    }
}

.and-buku-databantu-sheet__sub {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: #64748b;
    text-align: center;
}

.and-buku-databantu-add {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 8px;
}

.and-buku-databantu-add .and-bf-input {
    flex: 1;
    min-width: 0;
}

.and-buku-databantu-add .and-bf-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.and-buku-databantu-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 8px;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
}

.and-buku-databantu-empty {
    margin: 16px 0;
    text-align: center;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.and-buku-databantu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.and-buku-databantu-item__val {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    word-break: break-word;
}

.and-buku-databantu-item__edit {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
}

.and-buku-databantu-item__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.and-buku-databantu-item__btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    background: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.and-buku-databantu-item__btn--danger {
    color: #dc2626;
}

.and-buku-databantu-item__btn[hidden] {
    display: none !important;
}

/* ==========================================================================
   SPA — Content-area loader, page transitions, skeleton placeholders
   ========================================================================== */
.and-spa-loader {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, rgba(238, 242, 255, 0.96), rgba(255, 247, 237, 0.96));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms ease, visibility 320ms ease;
}

.and-spa-loader.is-visible {
    opacity: 1;
    visibility: visible;
}

.and-spa-loader.is-hiding {
    opacity: 0;
    visibility: hidden;
}

.and-spa-loader__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(280px, 86vw);
    padding: 24px 28px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

.and-spa-loader__spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(255, 90, 0, 0.18);
    border-top-color: var(--and-accent, #ff5a00);
    animation: and-spa-spin 0.85s linear infinite;
}

.and-spa-loader__label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--and-text-muted, #64748b);
    text-align: center;
}

.and-spa-loader__progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-spa-loader__progress-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.12);
    overflow: hidden;
}

.and-spa-loader__progress-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7a33, var(--and-accent, #ff5a00));
    transition: width 280ms ease;
}

.and-spa-loader__percent {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--and-accent, #ff5a00);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@keyframes and-spa-spin {
    to {
        transform: rotate(360deg);
    }
}

.and-spa-outlet {
    min-height: 100vh;
    opacity: 1;
}

.and-spa-outlet--hidden {
    opacity: 0;
    pointer-events: none;
}

.and-spa-outlet--enter {
    animation: and-nav-page-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes and-nav-page-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.and-skeleton--sm {
    height: 12px;
    width: 55%;
    margin-bottom: 8px;
}

.and-skeleton--xs {
    height: 10px;
    width: 40%;
}

.and-sk-grid {
    display: grid;
    gap: 12px;
}

.and-sk-grid--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.and-sk-grid--barang {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.and-sk-stat {
    min-height: 96px;
    padding: 14px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.and-sk-stat--card {
    min-height: 108px;
}

.and-sk-stat__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.and-sk-stat__line {
    margin-bottom: 10px;
}

.and-sk-stat__val {
    height: 28px;
    width: 72px;
}

.and-sk-barang {
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.and-sk-barang__media {
    aspect-ratio: 1;
    width: 100%;
}

.and-sk-barang__body {
    padding: 12px;
    min-height: 72px;
}

.and-sk-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.and-sk-pjm {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 96px;
    padding: 14px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.and-sk-pjm__avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    flex-shrink: 0;
}

.and-sk-pjm__body {
    flex: 1;
    min-width: 0;
}

.and-sk-feed {
    display: flex;
    gap: 12px;
    min-height: 72px;
    padding: 12px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.and-sk-feed__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
}

.and-sk-feed__body {
    flex: 1;
}

.and-sk-ai {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.and-sk-ai__row {
    display: flex;
}

.and-sk-ai__row--user {
    justify-content: flex-end;
}

.and-sk-ai__bubble {
    width: min(72%, 280px);
    height: 56px;
    border-radius: 18px;
}

.and-sk-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 160px;
    padding: 16px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.and-sk-chart__bar {
    flex: 1;
    height: var(--h, 60%);
    border-radius: 8px 8px 4px 4px;
}

.and-list-sentinel {
    width: 100%;
    height: 1px;
    margin-top: 8px;
    pointer-events: none;
    visibility: hidden;
}

/* ==========================================================================
   Notifications — glass cards
   ========================================================================== */
.and-body--notif {
    overflow-x: hidden;
}

.and-body--notif #and-spa-app,
.and-body--notif .and-spa-outlet-wrap,
.and-body--notif #and-spa-outlet {
    max-width: 100%;
    overflow-x: hidden;
}

.and-layout--notif {
    width: 100%;
    max-width: var(--and-content-max);
    margin-inline: auto;
    min-width: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.and-layout--notif .and-main.and-main--notif {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
}

.and-notif-top {
    align-items: center;
    margin-bottom: 16px;
    width: 100%;
    min-width: 0;
}

.and-notif-top .and-dash-burger {
    flex-shrink: 0;
}

.and-notif-top__meta {
    flex: 1;
    min-width: 0;
}

.and-notif-top__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.2;
}

.and-notif-top__subtitle {
    margin: 3px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-notif-mark-all {
    flex-shrink: 0;
    max-width: 42%;
    padding: 10px 12px;
    border-radius: var(--and-radius-full);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: #ffffff;
    color: #334155;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-notif-mark-all:active {
    transform: scale(0.96);
}

.and-notif-mark-all:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.and-notif-loading[hidden] {
    display: none !important;
}

.and-notif-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-width: 0;
}

.and-notif-group__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 0 8px;
}

.and-notif-group__label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748b;
    opacity: 0.75;
    white-space: nowrap;
}

.and-notif-group__line {
    flex: 1;
    height: 1px;
    background: rgba(148, 163, 184, 0.25);
}

.and-notif-group__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.and-notif-group.is-dim .and-notif-card {
    opacity: 0.82;
}

.and-notif-card {
    position: relative;
    display: flex;
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 15px 40px -10px rgba(15, 23, 42, 0.08);
    outline: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.and-notif-card.is-unread {
    background: rgba(255, 255, 255, 0.82);
}

.and-notif-card__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.and-notif-card__icon--blue {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.and-notif-card__icon--amber {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.and-notif-card__icon--rose {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
}

.and-notif-card__icon--green {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-notif-card__icon--indigo {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

.and-notif-card__body {
    flex: 1;
    min-width: 0;
}

.and-notif-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    min-width: 0;
}

.and-notif-card__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.and-notif-card__time {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    color: #94a3b8;
}

.and-notif-card__message {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.55;
    font-weight: 500;
    color: #475569;
    overflow-wrap: anywhere;
}

.and-notif-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.and-notif-card__btn {
    padding: 8px 14px;
    border-radius: 0.85rem;
    border: none;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.and-notif-card__btn--primary {
    background: var(--and-accent);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(255, 90, 0, 0.45);
}

.and-notif-card__btn--soft {
    background: rgba(255, 90, 0, 0.1);
    color: var(--and-accent);
}

.and-notif-card__btn--ghost {
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
}

.and-notif-card__dot {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--and-accent);
    box-shadow: 0 0 10px rgba(255, 90, 0, 0.75);
}

.and-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: #64748b;
}

.and-notif-empty svg {
    opacity: 0.45;
}

.and-notif-load-wrap {
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
}

.and-notif-load-more {
    padding: 12px 24px;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.6);
    color: #64748b;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.and-notif-load-more[hidden] {
    display: none;
}

/* Notifikasi — preview modal (top-bar bell) */
.and-notif-modal {
    position: fixed;
    inset: 0;
    z-index: 1320;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
}

.and-notif-modal:not([hidden]) {
    display: flex;
    visibility: visible;
}

.and-notif-modal.is-open {
    pointer-events: auto;
}

.and-notif-modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.32s ease;
    cursor: pointer;
}

.and-notif-modal.is-open .and-notif-modal__backdrop {
    opacity: 1;
}

.and-notif-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: min(82vh, 720px);
    border-radius: 1.75rem 1.75rem 0 0;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -12px 40px -12px rgba(15, 23, 42, 0.18);
    transform: translateY(105%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.and-notif-modal.is-open .and-notif-modal__panel {
    transform: translateY(0);
}

.and-notif-modal__handle {
    flex-shrink: 0;
    width: 40px;
    height: 4px;
    margin: 10px auto 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
}

.and-notif-modal__body {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 12px 8px;
}

.and-notif-modal__skel {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}

.and-notif-modal__skel-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(226, 232, 240, 0.7) 0%, rgba(241, 245, 249, 0.95) 50%, rgba(226, 232, 240, 0.7) 100%);
    background-size: 200% 100%;
    animation: and-notif-skel-shimmer 1.2s ease-in-out infinite;
}

.and-notif-modal__skel-lines {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.and-notif-modal__skel-line {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(226, 232, 240, 0.7) 0%, rgba(241, 245, 249, 0.95) 50%, rgba(226, 232, 240, 0.7) 100%);
    background-size: 200% 100%;
    animation: and-notif-skel-shimmer 1.2s ease-in-out infinite;
}

.and-notif-modal__skel-line--title {
    width: 62%;
    height: 12px;
}

.and-notif-modal__skel-line--msg {
    width: 88%;
}

@keyframes and-notif-skel-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.and-notif-list--modal.is-loaded .and-notif-group,
.and-notif-list--modal.is-loaded .and-notif-empty {
    animation: and-notif-modal-fade-in 0.28s ease-out both;
}

.and-notif-list--modal.is-loaded .and-notif-card {
    animation: and-notif-modal-fade-in 0.32s ease-out both;
}

.and-notif-list--modal.is-loaded .and-notif-card:nth-child(2) { animation-delay: 0.03s; }
.and-notif-list--modal.is-loaded .and-notif-card:nth-child(3) { animation-delay: 0.06s; }
.and-notif-list--modal.is-loaded .and-notif-card:nth-child(4) { animation-delay: 0.09s; }

@keyframes and-notif-modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.and-notif-list--modal {
    gap: 16px;
}

.and-notif-list--modal .and-notif-group__head {
    margin-bottom: 8px;
}

.and-notif-list--modal .and-notif-card {
    padding: 12px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.and-notif-list--modal .and-notif-card.is-unread {
    background: rgba(255, 255, 255, 0.92);
}

.and-notif-modal__foot {
    flex-shrink: 0;
    padding: 8px 16px calc(10px + var(--and-safe-bottom));
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: transparent;
    text-align: center;
}

.and-notif-modal__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 0;
    padding: 4px 2px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #ea580c;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.and-notif-modal__more:active {
    opacity: 0.72;
    transform: none;
}

button.and-dash-bell,
button.and-top-nav__item {
    cursor: pointer;
    font: inherit;
}

button.and-dash-bell {
    padding: 0;
}

.and-barang-top .and-dash-burger {
    flex-shrink: 0;
}

/* ── Favorit page & detail tab ── */
.and-main--favorit {
    padding-bottom: calc(var(--and-nav-total) + 16px);
}

.and-favorit-top__title-wrap {
    flex: 1;
    min-width: 0;
}

.and-favorit-search {
    flex: 1;
    min-width: 0;
}

.and-favorit-top .and-dash-burger {
    flex-shrink: 0;
}

.and-favorit-top__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.and-favorit-toolbar.and-barang-toolbar-panel {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.and-favorit-sort-field {
    flex: 1 1 0;
    min-width: 0;
}

.and-favorit-sort-field > .and-barang-select--filter {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
}

.and-favorit-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #ff7a1a 0%, #ff5a00 100%);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 12px 24px -16px rgba(255, 90, 0, 0.65);
    transition: transform 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
}

.and-favorit-manage-btn[hidden] {
    display: none !important;
}

.and-favorit-manage-btn svg {
    flex-shrink: 0;
}

.and-favorit-manage-btn:active {
    transform: scale(0.97);
}

.and-favorit-toolbar:has(.and-favorit-manage-btn[hidden]) .and-favorit-sort-field {
    flex: 1 1 100%;
    width: 100%;
}

/* Count di luar toolbar (sibling grid) — jangan uppercase panjang */
.and-main--favorit > .and-favorit-count.and-barang-count {
    display: block;
    margin: 0 4px 12px;
    padding: 0 4px;
    text-transform: none;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.and-favorit-card {
    position: relative;
}

.and-favorit-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.and-favorit-card__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
}

/* ── Favorit modal (kelola / tambah / ubah) ── */
body.and-fav-modal-open {
    overflow: hidden;
}

body.and-fav-modal-open .and-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.and-fav-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    pointer-events: none;
}

.and-fav-modal:not([hidden]) {
    pointer-events: auto;
}

.and-fav-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.and-fav-modal.is-open .and-fav-modal__backdrop {
    opacity: 1;
}

/* Sheet — kelola favorit */
.and-fav-modal--sheet {
    display: block;
}

.and-fav-modal__panel--sheet {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 10px);
    max-width: 480px;
    margin: 0 auto;
    max-height: min(68vh, calc(100dvh - var(--and-nav-height) - var(--and-nav-float-gap) - var(--and-safe-bottom) - 48px));
    display: flex;
    flex-direction: column;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.14), 0 24px 48px rgba(15, 23, 42, 0.08);
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.28s ease;
}

.and-fav-modal--sheet.is-open .and-fav-modal__panel--sheet {
    transform: translateY(0);
    opacity: 1;
}

.and-fav-modal__handle {
    width: 40px;
    height: 4px;
    margin: 10px auto 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
    flex-shrink: 0;
}

.and-fav-modal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.and-fav-modal__head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.14), rgba(255, 138, 76, 0.2));
    color: var(--and-accent);
    flex-shrink: 0;
}

.and-fav-modal__head-text {
    flex: 1;
    min-width: 0;
}

.and-fav-modal__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.and-fav-modal__subtitle {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-fav-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
    cursor: pointer;
    flex-shrink: 0;
}

.and-fav-modal__close:active {
    transform: scale(0.94);
}

.and-fav-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    -webkit-overflow-scrolling: touch;
}

.and-fav-modal__empty {
    padding: 28px 16px 20px;
    text-align: center;
}

.and-fav-modal__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 1.25rem;
    background: rgba(255, 90, 0, 0.08);
    color: var(--and-accent);
}

.and-fav-modal__empty-title {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
}

.and-fav-modal__empty-text {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

.and-fav-modal__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    margin-bottom: 8px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.and-fav-modal__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 0.75rem;
    background: rgba(255, 90, 0, 0.1);
    color: var(--and-accent);
    flex-shrink: 0;
}

.and-fav-modal__item-body {
    flex: 1;
    min-width: 0;
}

.and-fav-modal__item-name {
    margin: 0 0 2px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.and-fav-modal__item-meta {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.and-fav-modal__item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.and-fav-modal__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.75rem;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.and-fav-modal__icon-btn:active {
    transform: scale(0.94);
}

.and-fav-modal__icon-btn--danger {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.15);
    background: rgba(254, 242, 242, 0.9);
}

.and-fav-modal__foot {
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.and-fav-modal__primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--and-accent), #ff7a33);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 90, 0, 0.28);
}

.and-fav-modal__primary:active {
    transform: scale(0.98);
}

/* Form — tambah / ubah favorit */
.and-fav-modal--form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, var(--and-safe-top)) 16px calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 16px);
}

.and-fav-modal__panel--form {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    padding: 24px 22px 20px;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.28s ease;
}

.and-fav-modal--form.is-open .and-fav-modal__panel--form {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.and-fav-modal__form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.12), rgba(255, 138, 76, 0.18));
    color: var(--and-accent);
}

.and-fav-modal__form-title {
    margin: 0 0 6px;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    letter-spacing: -0.02em;
}

.and-fav-modal__form-desc {
    margin: 0 0 18px;
    font-size: 0.8125rem;
    color: #64748b;
    text-align: center;
    line-height: 1.5;
}

.and-fav-modal__field {
    display: block;
    margin-bottom: 18px;
}

.and-fav-modal__label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-fav-modal__input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid rgba(148, 163, 184, 0.28);
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.and-fav-modal__input:focus {
    border-color: rgba(255, 90, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}

.and-fav-modal__input.is-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.and-fav-modal__form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.and-fav-modal__btn {
    padding: 13px 14px;
    border-radius: 0.875rem;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.and-fav-modal__btn:active {
    transform: scale(0.98);
}

.and-fav-modal__btn--ghost {
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
}

.and-fav-modal__btn--accent {
    background: linear-gradient(135deg, var(--and-accent), #ff7a33);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 90, 0, 0.25);
}

.and-item-tabs__btn {
    padding: 10px 8px;
    font-size: 0.75rem;
}

.and-item-favorit-hint {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

.and-item-favorit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.and-item-favorit-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.and-item-favorit-pill svg {
    flex-shrink: 0;
    color: #94a3b8;
}

.and-item-favorit-pill.is-active {
    border-color: rgba(255, 90, 0, 0.35);
    background: rgba(255, 90, 0, 0.1);
    color: var(--and-accent);
}

.and-item-favorit-pill.is-active svg {
    color: var(--and-accent);
}

.and-item-favorit-pill:disabled {
    opacity: 0.6;
    cursor: wait;
}

.and-item-favorit-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px dashed rgba(255, 90, 0, 0.35);
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.5);
    color: var(--and-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.and-item-favorit-create--inline {
    width: 100%;
    margin-bottom: 10px;
}

.and-item-favorit-link {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--and-accent);
    text-decoration: none;
}

.and-item-favorit-empty {
    margin: 0;
    padding: 24px 12px;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.55;
}

.and-item-favorit-empty .and-item-favorit-create {
    margin-top: 12px;
}

/* ==========================================================================
   Doc List — kartu dokumen/tabel global (vendor-style)
   ========================================================================== */
.and-doc-list-host {
    display: block;
}

.and-doc-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-doc-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.and-doc-card-link:active .and-doc-card {
    transform: scale(0.985);
}

.and-doc-card-wrap,
.and-doc-card-link {
    display: block;
}

.and-doc-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease;
}

.and-doc-card__hero {
    height: 72px;
    border-radius: 1.75rem 1.75rem 0 0;
}

.and-doc-card--peach .and-doc-card__hero {
    background: linear-gradient(135deg, #ffd4bc 0%, #ffb4a2 48%, #ffc8d8 100%);
}

.and-doc-card--lavender .and-doc-card__hero {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 50%, #e9d5ff 100%);
}

.and-doc-card--mint .and-doc-card__hero {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 50%, #a7f3d0 100%);
}

.and-doc-card--cocoa .and-doc-card__hero {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.9) 0%, rgba(124, 45, 18, 0.82) 52%, rgba(154, 52, 18, 0.76) 100%);
}

.and-doc-card--sky .and-doc-card__hero {
    background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 50%, #a5f3fc 100%);
}

.and-doc-card--rose .and-doc-card__hero {
    background: linear-gradient(135deg, #fecdd3 0%, #fda4af 50%, #fbcfe8 100%);
}

.and-doc-card--sk .and-doc-card__hero {
    min-height: 72px;
}

.and-doc-card__icon-box {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 18px;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    overflow: hidden;
}

.and-doc-card--peach .and-doc-card__icon-svg {
    color: #ea580c;
}

.and-doc-card--lavender .and-doc-card__icon-svg {
    color: #7c3aed;
}

.and-doc-card--mint .and-doc-card__icon-svg {
    color: #059669;
}

.and-doc-card--cocoa .and-doc-card__icon-svg {
    color: #9a3412;
}

.and-doc-card--sky .and-doc-card__icon-svg {
    color: #0284c7;
}

.and-doc-card--rose .and-doc-card__icon-svg {
    color: #e11d48;
}

.and-doc-card__icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.and-doc-card__icon-svg svg {
    width: 100%;
    height: 100%;
}

.and-doc-card__icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.and-doc-card__icon-img.is-loaded,
.and-doc-card__icon-img.is-error {
    opacity: 1;
}

.and-doc-card__body {
    padding: 14px 18px 12px;
}

.and-doc-card__title {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-doc-card__subtitle {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.4;
}

.and-doc-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-doc-card__meta-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.4;
}

.and-doc-card__meta-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: #94a3b8;
}

.and-doc-card__meta-icon svg {
    width: 100%;
    height: 100%;
}

.and-doc-card__meta-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.and-doc-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.and-doc-card__stat {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.and-doc-card__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--and-accent);
    flex-shrink: 0;
}

.and-doc-card__stat-icon svg {
    width: 100%;
    height: 100%;
}

.and-doc-card__stat--plus .and-doc-card__stat-icon,
.and-doc-card__stat--plus .and-doc-card__stat-value {
    color: #059669;
}

.and-doc-card__stat--minus .and-doc-card__stat-icon,
.and-doc-card__stat--minus .and-doc-card__stat-value {
    color: #dc2626;
}

.and-doc-card__stat-value {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
}

.and-doc-card__stat-suffix {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
}

.and-doc-card__action {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--and-accent);
    text-decoration: none;
    white-space: nowrap;
}

.and-doc-card__action--muted {
    color: #94a3b8;
}

.and-doc-card-link--enter,
.and-doc-card-wrap--enter {
    animation: and-doc-card-in 0.32s ease both;
    animation-delay: calc(var(--doc-i, 0) * 0.045s);
}

.and-doc-list-host--ready .and-doc-card-link--enter,
.and-doc-list-host--ready .and-doc-card-wrap--enter {
    animation-name: and-doc-card-in;
}

@keyframes and-doc-card-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .and-doc-card-link--enter,
    .and-doc-card-wrap--enter {
        animation: none;
    }
}

/* ==========================================================================
   Rencana Acara — kalender & daftar (selaras m-rencana-acara)
   ========================================================================== */
.and-main--ra {
    padding-top: calc(var(--and-page-inset-top) + 12px);
    padding-bottom: calc(var(--and-nav-total) + 8px);
}

.and-ra-top {
    align-items: center;
    margin-bottom: 12px;
}

.and-ra-top .and-dash-burger {
    flex-shrink: 0;
}

.and-ra-top__meta {
    flex: 1;
    min-width: 0;
}

.and-ra-top__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.and-ra-top__subtitle {
    margin: 3px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
}

.and-ra-add-btn[hidden] {
    display: none !important;
}

.and-ra-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 10px;
}

.and-ra-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.and-ra-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.and-ra-legend__dot--event {
    background: linear-gradient(135deg, #ffe066, #ff5a00);
}

.and-ra-legend__dot--notif {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.and-ra-view-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 90, 0, 0.08);
    border: 1px solid rgba(255, 90, 0, 0.12);
}

.and-ra-view-tab {
    flex: 1;
    border: 0;
    border-radius: 10px;
    padding: 8px 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ff5a00;
    background: transparent;
    transition:
        color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.14s ease;
}

.and-ra-view-tab.is-active {
    background: #ff5a00;
    color: #fff;
    box-shadow: 0 2px 10px rgba(255, 90, 0, 0.28);
}

.and-ra-calendar-card {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    padding: 10px 8px 8px;
    overflow: visible;
}

.and-ra-calendar-card.and-ra-cal--month {
    overflow: hidden;
}

.and-ra-calendar-card.and-ra-cal--time {
    overflow: hidden;
}

.and-ra-cal--time #andRaCalendar {
    min-height: 360px;
}

.and-ra-calendar-card .fc {
    --fc-border-color: rgba(15, 23, 42, 0.08);
    --fc-today-bg-color: rgba(255, 90, 0, 0.06);
    --fc-button-bg-color: #ff5a00;
    --fc-button-border-color: #ff5a00;
    --fc-button-hover-bg-color: #e04e00;
    --fc-button-hover-border-color: #e04e00;
    --fc-button-active-bg-color: #c94500;
    --fc-button-active-border-color: #c94500;
    --fc-page-bg-color: transparent;
    font-size: 0.8125rem;
}

.and-ra-calendar-card .fc-toolbar-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

.and-ra-calendar-card .fc-toolbar.fc-header-toolbar {
    margin-bottom: 8px !important;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
}

.and-ra-calendar-card .fc-toolbar-chunk {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.and-ra-calendar-card .fc-button {
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px;
}

.and-ra-calendar-card .fc-daygrid-day-number {
    font-size: 0.76rem;
    font-weight: 700;
    color: #334155;
    padding: 2px 4px;
}

.and-ra-cal--month .fc-daygrid-day-frame {
    min-height: 4rem !important;
}

.and-ra-cal--month .fc-daygrid-day-events {
    min-height: 0 !important;
    max-height: 2.75rem;
    overflow: hidden;
}

.and-ra-cal--month .fc-daygrid-event {
    border-radius: 6px;
    font-size: 0.62rem;
    margin: 0 0 2px !important;
}

.and-ra-month-ev,
.and-ra-time-ev__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.and-ra-time-ev__time {
    font-size: 0.68rem;
    font-weight: 700;
}

.and-ra-calendar-card .fc-event:not(.text-white),
.and-ra-calendar-card .fc-event:not(.text-white) .fc-event-main,
.and-ra-calendar-card .fc-event:not(.text-white) .and-ra-month-ev,
.and-ra-calendar-card .fc-event:not(.text-white) .and-ra-time-ev {
    color: #0f172a !important;
}

.and-ra-calendar-card .fc-event.text-white,
.and-ra-calendar-card .fc-event.text-white .fc-event-main,
.and-ra-calendar-card .fc-event.text-white .and-ra-time-ev {
    color: #fff !important;
}

.and-ra-day-notif {
    position: absolute;
    top: 2px;
    left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

.and-ra-calendar-card .fc-daygrid-day.has-and-notif .fc-daygrid-day-frame {
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}

.and-ra-event-list {
    margin-top: 16px;
}

.and-ra-event-list__section+.and-ra-event-list__section {
    margin-top: 16px;
}

.and-ra-event-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.and-ra-event-list__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
}

.and-ra-event-list__badge {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
}

.and-ra-event-list__badge--upcoming {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.and-ra-event-list__badge--past {
    background: #e2e8f0;
    color: #475569;
}

.and-ra-event-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-ra-event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    text-align: left;
}

.and-ra-event-item--upcoming {
    border-color: rgba(16, 185, 129, 0.2);
}

.and-ra-event-item--past {
    background: #f1f5f9;
}

.and-ra-event-item__bar {
    width: 4px;
    align-self: stretch;
    min-height: 40px;
    border-radius: 999px;
    flex-shrink: 0;
}

.and-ra-event-item__body {
    flex: 1;
    min-width: 0;
}

.and-ra-event-item__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.and-ra-event-item--past .and-ra-event-item__title {
    font-weight: 600;
    color: #475569;
}

.and-ra-event-item__time {
    display: block;
    margin-top: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.and-ra-event-item__chev {
    flex-shrink: 0;
    color: #94a3b8;
}

.and-ra-event-list__empty {
    text-align: center;
    padding: 24px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #64748b;
}

.and-ra-event-list__empty svg {
    margin: 0 auto 8px;
    color: #ff5a00;
    opacity: 0.7;
}

/* Warna acara */
.bg-warning-subtle {
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
}

.bg-orange-subtle {
    background-color: #ffe8cc !important;
    border-color: #fd7e14 !important;
}

.bg-info-subtle {
    background-color: #cff4fc !important;
    border-color: #0dcaf0 !important;
}

.bg-primary-subtle {
    background-color: #cfe2ff !important;
    border-color: #0d6efd !important;
}

.bg-purple-subtle {
    background-color: #e2d9f3 !important;
    border-color: #6f42c1 !important;
}

.bg-cyan-subtle {
    background-color: #cff4fc !important;
    border-color: #20c997 !important;
}

.bg-theme-1-subtle {
    background-color: #fff0e6 !important;
    border-color: rgba(255, 90, 0, 0.35) !important;
}

.bg-theme-1-space.text-white,
.bg-theme-1-space {
    background: linear-gradient(145deg, #334155, #0f172a) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

body.and-ra-sheet-open,
body.and-ra-peserta-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

body.and-ra-sheet-open .and-bottom-nav,
body.and-ra-peserta-open .and-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.and-ra-fullsheet[hidden] {
    display: none !important;
}

.and-ra-fullsheet {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    visibility: hidden;
}

.and-ra-fullsheet:not([hidden]) {
    visibility: visible;
}

.and-ra-fullsheet.is-open {
    pointer-events: auto;
}

.and-ra-fullsheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.and-ra-fullsheet.is-open .and-ra-fullsheet__backdrop {
    opacity: 1;
}

.and-ra-fullsheet .and-restock-sheet__panel {
    position: relative;
    flex: 1;
    min-height: 0;
    max-width: none;
    max-height: 100dvh;
    height: 100%;
    width: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: #f8fafc;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.and-ra-fullsheet.is-open .and-restock-sheet__panel {
    transform: translate3d(0, 0, 0);
}

.and-ra-fullsheet__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    padding-top: calc(10px + var(--and-safe-top));
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.and-ra-fullsheet__title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
}

.and-ra-fullsheet__spacer {
    width: 40px;
    flex-shrink: 0;
}

.and-ra-fullsheet__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
    -webkit-overflow-scrolling: touch;
}

.and-ra-fullsheet__body--detail {
    padding-bottom: 12px;
}

.and-ra-fullsheet__footer {
    position: relative;
    flex-shrink: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(12px + var(--and-safe-bottom));
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}

.and-ra-fullsheet__footer--single {
    justify-content: stretch;
}

.and-ra-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    color: #334155;
    flex-shrink: 0;
}

.and-ra-btn-save {
    flex: 1;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.9375rem;
    background: #ff5a00;
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.32);
}

.and-ra-btn-save--full {
    width: 100%;
    flex: none;
}

.and-ra-btn-save:disabled {
    opacity: 0.55;
}

.and-ra-btn-delete {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: #fff;
    color: #dc2626;
    font-weight: 800;
}

.and-ra-form-section {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.and-ra-form-section__title {
    margin: 0 0 12px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.and-ra-field {
    display: block;
    margin-bottom: 12px;
}

.and-ra-field--half {
    flex: 1;
    min-width: 0;
}

.and-ra-field-row {
    display: flex;
    gap: 10px;
}

.and-ra-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
}

.and-ra-input,
.and-ra-select,
.and-ra-textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: #fff;
    font: inherit;
    color: #0f172a;
}

.and-ra-textarea {
    min-height: 88px;
    resize: vertical;
}

.and-ra-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 90, 0, 0.06);
    margin-bottom: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

#andRaJamWrap.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.and-ra-form-error {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #dc2626;
}

.and-ra-form-error[hidden],
.and-ra-detail-content[hidden],
.and-ra-detail-loading[hidden],
.and-ra-peserta-tags[hidden] {
    display: none !important;
}

.and-ra-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.and-ra-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: #fff;
    color: #64748b;
    font-size: 0.875rem;
    text-align: left;
}

.and-ra-picker-btn.has-value {
    color: #0f172a;
    font-weight: 600;
}

.and-ra-peserta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.and-ra-peserta-tag {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: rgba(255, 90, 0, 0.1);
    color: #ff5a00;
}

.and-ra-picker-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 12px;
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.and-ra-picker-search-wrap svg {
    color: #94a3b8;
    flex-shrink: 0;
}

.and-ra-picker-search {
    flex: 1;
    border: 0;
    background: transparent;
    font: inherit;
    outline: none;
}

.and-ra-picker-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.and-ra-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: #fff;
    text-align: left;
    font-size: 0.9375rem;
}

.and-ra-picker-item.is-selected {
    background: rgba(255, 90, 0, 0.06);
    color: #ff5a00;
    font-weight: 700;
}

.and-ra-picker-item svg {
    opacity: 0;
    color: #ff5a00;
}

.and-ra-picker-item.is-selected svg {
    opacity: 1;
}

.and-ra-picker-empty {
    text-align: center;
    padding: 32px 16px;
    color: #64748b;
    margin: 0;
}

.and-ra-detail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 16px;
    color: #64748b;
    font-size: 0.875rem;
}

.and-ra-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 90, 0, 0.2);
    border-top-color: #ff5a00;
    border-radius: 50%;
    animation: and-spin 0.7s linear infinite;
}

.and-ra-detail-hero {
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.and-ra-detail-hero__title {
    margin: 0 0 6px;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.3;
}

.and-ra-detail-hero__waktu {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.9;
}

.and-ra-detail-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #334155;
    white-space: pre-wrap;
}

.and-ra-detail-desc.is-empty,
.and-ra-detail-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.875rem;
}

.and-ra-peserta-item,
.and-ra-detail-creator__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.06);
    margin-bottom: 6px;
}

.and-ra-person-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

.and-ra-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-ra-person-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

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

/* ==========================================================================
   Serah Terima — selaras data-restock (doc cards + rst hero)
   ========================================================================== */
.and-st-banner {
    margin: 0 var(--and-pad-x, 16px) 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--and-text-secondary, #64748b);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

/* Toolbar filter halaman anggaran (RAB, RKAT, dll.) */
.and-ang-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
}

.and-ang-toolbar__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}

.and-ang-toolbar__active {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-ang-toolbar__reset {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--and-radius-full);
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.88);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-accent);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.and-ang-toolbar__reset:active {
    transform: scale(0.97);
    background: rgba(255, 90, 0, 0.1);
}

.and-ang-toolbar__grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.and-ang-toolbar__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.and-ang-toolbar__cell--status {
    min-width: 0;
}

.and-ang-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
    min-width: 0;
}

.and-ang-status-chips::-webkit-scrollbar {
    display: none;
}

.and-ang-status-chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}

.and-ang-status-chip:active:not(.is-active) {
    transform: scale(0.97);
}

.and-ang-status-chip.is-active {
    border-color: transparent;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.and-ang-status-chip[data-status="proses"].is-active {
    color: #d97706;
    background: rgba(245, 158, 11, 0.14);
}

.and-ang-status-chip[data-status="acc"].is-active {
    color: #059669;
    background: rgba(16, 185, 129, 0.14);
}

.and-ang-status-chip[data-status="ditolak"].is-active {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
}

.and-ang-status-chip[data-status="realisasi_selesai"].is-active {
    color: #0284c7;
    background: rgba(56, 189, 248, 0.2);
}

@media (max-width: 400px) {
    .and-ang-toolbar {
        padding: 10px 12px;
    }

    .and-ang-toolbar__reset {
        margin-left: auto;
        padding: 5px 10px;
        font-size: 0.6875rem;
    }

    .and-ang-status-chip {
        min-height: 32px;
        padding: 6px 11px;
        font-size: 0.75rem;
    }
}

.and-st-expand-totals {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.and-st-expand-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
}

.and-st-expand-totals__row+.and-st-expand-totals__row {
    border-top: 1px dashed rgba(148, 163, 184, 0.35);
}

.and-st-expand-totals__row span:last-child {
    font-weight: 700;
    color: #0f172a;
    text-align: right;
    white-space: nowrap;
}

.and-st-expand-totals__row--biaya span:last-child {
    color: #ea580c;
}

.and-st-expand-totals__row--total {
    padding-top: 8px;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
}

.and-st-expand-totals__row--total span:last-child {
    color: #ff5a00;
    font-size: 0.9375rem;
}

.and-st-toolbar {
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Serah terima — toolbar filter (status chips di hero + divisi/gedung) */
.and-st-filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.and-st-filter-toolbar__head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.and-st-filter-toolbar__summary {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-st-filter-toolbar__head .and-pjm-filter-reset {
    margin-left: 0;
    flex-shrink: 0;
}

.and-st-filter-toolbar__fields {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    gap: 8px;
}

.and-st-filter-toolbar__fields .and-barang-filter-field {
    flex: 1 1 0;
    min-width: 0;
}

.and-st-filter-toolbar--compact .and-st-filter-toolbar__head {
    width: 100%;
}

.and-st-filter-toolbar--compact .and-st-filter-toolbar__summary {
    flex: 1;
}

.and-main--serah-terima .and-st-filter-toolbar .and-barang-select--filter,
.and-main--sti .and-st-filter-toolbar .and-barang-select--filter {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.and-st-toolbar__fields {
    flex: 1 1 100%;
    min-width: 0;
}

.and-st-toolbar__status {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.and-st-segment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.and-st-segment__btn {
    min-height: 38px;
    padding: 8px 6px;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.and-st-segment__btn.is-active {
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.and-st-segment__btn[data-status="draft"].is-active {
    color: #d97706;
}

.and-st-segment__btn[data-status="selesai"].is-active {
    color: #059669;
}

/* Serah terima list — brown accent (selaras form hero) */
.and-main--serah-terima .and-st-segment__btn[data-status="selesai"].is-active {
    color: #9a3412;
    background: rgba(124, 45, 18, 0.12);
    box-shadow: inset 0 0 0 1px rgba(124, 45, 18, 0.14);
}

.and-main--serah-terima .and-st-status-pill--selesai {
    background: rgba(124, 45, 18, 0.12);
    color: #9a3412;
}

.and-main--serah-terima .and-rst-hero__stat.is-plus strong {
    color: #9a3412;
}

.and-main--serah-terima .and-doc-card__stat--plus .and-doc-card__stat-icon,
.and-main--serah-terima .and-doc-card__stat--plus .and-doc-card__stat-value {
    color: #9a3412;
}

.and-doc-card--cocoa .and-st-card-hero__label {
    color: rgba(254, 215, 170, 0.82);
}

.and-doc-card--cocoa .and-st-card-hero__nomor {
    color: #fff7ed;
}

.and-doc-card--cocoa .and-st-status-pill--hero {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.and-doc-card--cocoa .and-st-status-pill--hero.and-st-status-pill--selesai {
    color: #fed7aa;
}

.and-doc-card--cocoa .and-st-status-pill--hero.and-st-status-pill--draft {
    color: #fde68a;
}

.and-doc-card--cocoa .and-st-status-pill--hero.and-st-status-pill--dibatalkan {
    color: #fecaca;
}

.and-st-toolbar__status--scroll {
    min-width: 0;
}

.and-st-segment--scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    grid-template-columns: none;
}

.and-st-segment--scroll::-webkit-scrollbar {
    display: none;
}

.and-st-segment--scroll .and-st-segment__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: 12px;
}

.and-pjm-toolbar .and-st-toolbar__status {
    width: 100%;
}

.and-doc-list-host--filtering {
    opacity: 0.42;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    pointer-events: none;
}

.and-doc-list-host:not(.and-doc-list-host--loading):not(.and-doc-list-host--filtering) {
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.and-pjm-toolbar .and-pjm-filter-active {
    transition: color 0.18s ease, opacity 0.18s ease;
}

.and-pjm-toolbar .and-st-segment__btn {
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.14s ease;
}

.and-pjm-toolbar .and-st-segment__btn:active:not(.is-active) {
    transform: scale(0.97);
}

.and-pjm-status-pill--dipinjam {
    background: rgba(59, 130, 246, 0.14);
    color: #2563eb;
}

.and-pjm-status-pill--parsial {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.and-pjm-status-pill--telat {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.and-pjm-status-pill--dikembalikan {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.and-pjm-status-pill--tidak_dikembalikan {
    background: rgba(139, 92, 246, 0.14);
    color: #7c3aed;
}

.and-st-segment__btn[data-status="dipinjam"].is-active {
    color: #2563eb;
}

.and-st-segment__btn[data-status="parsial"].is-active {
    color: #d97706;
}

.and-st-segment__btn[data-status="telat"].is-active {
    color: #dc2626;
}

.and-st-segment__btn[data-status="dikembalikan"].is-active {
    color: #059669;
}

.and-st-segment__btn[data-status="tidak_dikembalikan"].is-active {
    color: #7c3aed;
}

body.and-pjm-picker-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

@media (min-width: 420px) {
    .and-st-toolbar__fields {
        flex: 1 1 0;
    }
}

.and-st-card-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-height: 88px;
    height: auto;
    padding: 14px 16px 38px;
}

.and-st-card-hero__text {
    flex: 1;
    min-width: 0;
    padding-right: 92px;
}

.and-st-card-hero__badges {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: 46%;
}

.and-st-card-hero__badges .and-st-status-pill--hero {
    position: static;
    top: auto;
    right: auto;
}

.and-ang-hero-nomor-line {
    margin: 0;
}

.and-ang-hero-nomor-line .and-ang-hero-date {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: inherit;
    color: #64748b;
    white-space: nowrap;
}

.and-st-status-pill--bos {
    background: rgba(251, 191, 36, 0.94);
    color: #92400e;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.12);
}

.and-st-card-hero__label {
    display: block;
    margin: 0 0 4px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.62);
}

.and-st-card-hero__nomor {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #0f172a;
    word-break: break-word;
}

.and-st-status-pill--hero {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.and-st-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    color: #2563eb;
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
}

.and-st-card-body {
    padding-top: 10px;
}

.and-st-card-body .and-st-indicators {
    margin-top: 0;
}

.and-st-items-head {
    margin: 0 0 12px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.and-st-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-st-items-empty {
    margin: 0;
    padding: 8px 0;
    font-size: 0.875rem;
    color: #94a3b8;
}

.and-st-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.and-st-item__media {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
}

.and-st-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-st-item__main {
    min-width: 0;
}

.and-st-item__name {
    margin: 0 0 4px;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.3;
    color: #0f172a;
}

.and-st-item__sku {
    margin: 0 0 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.and-st-item__loc {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #94a3b8;
}

.and-st-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.and-st-item__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    padding-top: 2px;
}

.and-st-item__qty {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.and-st-item__sat {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.and-st-gedung-hero {
    margin: 0 0 14px;
}

.and-st-gedung-hero__label {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.and-st-gedung-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.and-st-gedung-scroll::-webkit-scrollbar {
    display: none;
}

.and-st-gedung-scroll--loading {
    pointer-events: none;
}

.and-st-gedung-chip {
    flex: 0 0 auto;
    min-width: 132px;
    max-width: 168px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--and-shadow-sm);
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.and-st-gedung-chip:active {
    transform: scale(0.98);
}

.and-st-gedung-chip strong {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.and-st-gedung-chip span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-st-gedung-chip em {
    font-style: normal;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}

.and-st-gedung-hero__empty {
    margin: 0;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.and-st-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.and-st-card-head .and-doc-card__title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.and-st-status-pill {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.and-st-status-pill--selesai {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.and-st-status-pill--draft {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.and-st-status-pill--dibatalkan {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.and-st-status-pill--other {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.and-st-status-pill--baru {
    background: rgba(59, 130, 246, 0.14);
    color: #2563eb;
}

.and-st-status-pill--proses {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.and-st-status-pill--ditolak {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.and-st-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.and-st-indic {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
}

.and-st-indic svg {
    flex-shrink: 0;
}

.and-st-indic--sm {
    font-size: 0.625rem;
    padding: 2px 6px;
}

.and-st-indic--audit {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.and-st-indic--service {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.and-st-doc-wrap {
    display: block;
}

.and-st-doc-wrap .and-doc-card {
    margin: 0;
    overflow: hidden;
}

.and-st-doc-foot {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.and-st-doc-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
}

.and-st-doc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.and-st-doc-btn--accent {
    border-color: rgba(255, 90, 0, 0.35);
    background: rgba(255, 90, 0, 0.08);
    color: #e04e00;
}

.and-st-doc-btn--ghost {
    border-style: dashed;
    background: transparent;
}

.and-st-doc-detail .and-st-doc-btn--ghost {
    margin-top: 10px;
}

.and-st-doc-btn--print {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(248, 250, 252, 0.95);
    color: #475569;
}

.and-st-doc-actions .and-st-doc-btn {
    margin-top: 0;
    flex: 0 0 auto;
}

.and-st-doc-detail {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding: 16px 18px 18px;
    background: rgba(248, 250, 252, 0.92);
}

.and-st-doc-detail[hidden] {
    display: none !important;
}

.and-st-doc-detail .and-pjm-detail-title {
    margin: 0 0 8px;
}

.and-st-doc-detail .and-pjm-items {
    margin-top: 0;
}

.and-st-doc-detail .and-st-items-head {
    margin-top: 0;
}

.and-pjm-item__qty-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.and-st-item-service {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.and-st-item-service__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    color: #64748b;
}

.and-st-detail-note {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #475569;
}

.and-st-load-end {
    text-align: center;
    padding: 14px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
}

/* ==========================================================================
   Serah Terima — Detail BAST (mobile-style overview)
   ========================================================================== */
.and-layout--std-detail {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

.and-body--no-nav .and-layout--std-detail {
    padding-bottom: 0;
}

.and-layout--std-detail > .and-main--std-detail {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(20px + var(--and-safe-bottom));
    box-sizing: border-box;
    gap: 8px;
    scroll-padding-bottom: calc(88px + var(--and-safe-bottom));
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    body.and-body--desktop-nav .and-layout--std-detail > .and-main--std-detail {
        overflow-x: visible;
    }
}

.and-main--std-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 8px;
}

.and-main--std-detail #andStdContent {
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
}

.and-std-header--compact.and-bf-header.and-form-hero {
    margin-bottom: 10px;
}

.and-main--std-detail .and-form-hero .and-std-header__title,
.and-main--std-detail .and-form-hero .and-bf-header__title {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.and-main--std-detail .and-form-hero .and-std-header__meta {
    font-size: 0.6875rem;
}

.and-std-header.and-bf-header.and-form-hero {
    position: relative;
    top: auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92)),
        radial-gradient(circle at 12% 0%, rgba(255, 90, 0, 0.42), transparent 42%);
    color: #fff;
    box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.45);
    overflow: visible;
    flex-shrink: 0;
    pointer-events: auto;
}

.and-std-header.and-bf-header.and-form-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 70% 80% at 88% 120%, rgba(255, 255, 255, 0.1) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.and-std-header.and-bf-header.and-form-hero .and-bf-header__left {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.and-std-header.and-bf-header.and-form-hero .and-bf-header__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 0;
    align-self: center;
}

.and-std-header.and-bf-header.and-form-hero .and-std-header__back,
.and-std-header.and-bf-header.and-form-hero .and-bf-header__back,
.and-std-header.and-bf-header.and-form-hero .and-std-header__print,
.and-std-header.and-bf-header.and-form-hero .and-std-header__acc,
.and-std-header.and-bf-header.and-form-hero .and-form-hero__action {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    box-sizing: border-box;
}

.and-form-hero .and-std-header__meta {
    margin: 5px 0 0;
    color: rgba(255, 247, 237, 0.78);
    font-size: 0.75rem;
    line-height: 1.45;
}

.and-form-hero .and-std-header__meta--selesai {
    color: rgba(254, 215, 170, 0.92);
}

.and-form-hero .and-std-header__meta--draft {
    color: rgba(253, 230, 138, 0.9);
}

.and-form-hero .and-std-header__meta--batal {
    color: rgba(254, 202, 202, 0.9);
}

.and-std-header.and-bf-header.and-form-hero .and-std-header__acc {
    color: #fed7aa;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
}

.and-layout--std-detail .and-std-bar__btn--acc {
    background: linear-gradient(145deg, #9a3412 0%, #7c2d12 100%);
    box-shadow: 0 10px 24px -8px rgba(124, 45, 18, 0.45);
}

.and-std-header:not(.and-form-hero) {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: calc(var(--and-page-inset-top) + 8px) 16px 10px;
    background: transparent;
    pointer-events: none;
}

.and-std-header__bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(14px);
}

.and-std-header__back,
.and-std-header__print,
.and-std-header__acc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    color: #334155;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.and-std-header__acc {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-std-header__acc:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.and-std-header__titles {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.and-std-header__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.and-std-header__status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.and-std-header__status--selesai {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.and-std-header__status--draft {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
}

.and-std-header__status--batal {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.and-std-header__status--other {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.and-std-loading,
.and-std-error {
    text-align: center;
    padding: 48px 16px;
    color: #64748b;
    font-size: 0.875rem;
}

.and-std-loading__spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border: 3px solid rgba(148, 163, 184, 0.25);
    border-top-color: var(--and-accent);
    border-radius: 50%;
    animation: and-spin 0.8s linear infinite;
}

.and-std-error {
    color: #dc2626;
}

.and-std-card {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.12);
}

.and-std-card__head {
    margin-bottom: 12px;
}

.and-std-card__head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.and-std-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-std-card__count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #94a3b8;
}

.and-std-card--overview {
    margin-top: 4px;
}

.and-std-card--overview .and-std-card__head {
    margin-bottom: 14px;
}

.and-rab-overview-nomor-line {
    margin-bottom: 0;
}

.and-rab-overview-nomor-line .and-rab-overview-date {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    max-width: none;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: inherit;
    color: rgba(255, 247, 237, 0.72);
    white-space: nowrap;
}

.and-std-tx-nomor {
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(124, 45, 18, 0.88));
    color: #fff7ed;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    word-break: break-word;
}

.and-std-mini-grid--stack {
    margin-top: 10px;
}

.and-std-mini-grid--stack:first-of-type {
    margin-top: 0;
}

.and-std-mini-card__icon--purple {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.and-std-mini-card__icon--pink {
    background: rgba(236, 72, 153, 0.12);
    color: #db2777;
}

.and-std-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.and-std-mini-card {
    padding: 12px;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.and-std-mini-card--wide {
    grid-column: 1 / -1;
}

.and-std-mini-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    border-radius: 12px;
}

.and-std-mini-card__icon--blue {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.and-std-mini-card__icon--orange {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}

.and-std-mini-card__icon--green {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-std-mini-card__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-std-mini-card__value {
    display: block;
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.35;
    color: #0f172a;
    word-break: break-word;
}

.and-std-mini-card__sub {
    display: block;
    margin-top: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.35;
    color: #64748b;
}

.and-std-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.03);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #475569;
}

.and-std-note--warn {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}

.and-std-assets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-std-items-table__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 10px;
    align-items: end;
    padding: 0 4px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    margin-bottom: 4px;
}

.and-std-items-table__col {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-std-items-table__col--qty {
    text-align: center;
}

.and-std-asset__top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.and-std-asset__col--name {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.and-std-asset__col--qty {
    flex-shrink: 0;
    width: 56px;
    display: flex;
    justify-content: center;
}

.and-std-asset__col--qty .and-std-asset__aside {
    align-items: center;
}

.and-std-asset__note-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(180, 83, 9, 0.18);
}

.and-std-item-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(255, 247, 237, 0.98) 0%, rgba(254, 243, 199, 0.38) 100%);
    border: 1px solid rgba(180, 83, 9, 0.16);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

.and-std-item-note--empty {
    opacity: 0.78;
}

.and-std-item-note__badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    box-shadow: 0 4px 12px -6px rgba(146, 64, 14, 0.55);
}

.and-std-item-note__text {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    color: #78350f;
    word-break: break-word;
    white-space: pre-line;
}

.and-std-item-note--empty .and-std-item-note__text {
    color: #a8a29e;
    font-weight: 600;
    font-style: italic;
}

.and-std-detail-scroll-pad {
    flex-shrink: 0;
    height: 24px;
}

.and-layout--std-detail > .and-main--std-detail .and-std-card:last-of-type {
    margin-bottom: 8px;
}

.and-std-asset {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.and-std-asset--audited {
    border-color: rgba(16, 185, 129, 0.22);
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.55) 0%, rgba(248, 250, 252, 0.95) 42%);
}

.and-std-asset__row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.and-std-asset__thumb {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
}

.and-std-asset__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-std-asset__name {
    margin: 0 0 4px;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.3;
    color: #0f172a;
}

.and-std-asset__sku {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #64748b;
}

.and-std-asset__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.and-std-asset__badge {
    display: inline-flex;
    color: #f97316;
}

.and-std-asset__badge--audit {
    color: #10b981;
}

.and-std-asset__qty {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
}

.and-std-asset__audit-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.12);
    border: 1px solid rgba(255, 90, 0, 0.22);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--and-accent);
    text-decoration: none;
    line-height: 1;
}

.and-std-asset__audit-badge svg {
    flex-shrink: 0;
}

.and-std-audit-box {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.and-std-audit-box__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #059669;
}

.and-std-audit-box__title svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #10b981;
}

.and-std-audit-box__count {
    font-weight: 700;
    opacity: 0.85;
}

.and-std-audit-entry+.and-std-audit-entry {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(16, 185, 129, 0.22);
}

.and-std-audit-entry__title {
    margin: 0 0 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
}

.and-std-audit-dl {
    display: grid;
    grid-template-columns: minmax(5.5rem, 38%) 1fr;
    gap: 4px 8px;
    margin: 0;
}

.and-std-audit-dl>div {
    display: contents;
}

.and-std-audit-dl dt {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
}

.and-std-audit-dl dd {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
}

.and-std-audit-selisih--ok {
    color: #059669;
    font-weight: 800;
}

.and-std-audit-selisih--warn {
    color: #d97706;
    font-weight: 800;
}

.and-std-audit-selisih--bad {
    color: #dc2626;
    font-weight: 800;
}

.and-std-audit-kondisi {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.and-std-audit-kondisi--baik {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.and-std-audit-kondisi--rusak {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.and-std-audit-kondisi--hilang {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.and-std-audit-kondisi--other {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
}

.and-std-audit-catatan {
    margin: 8px 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #334155;
}

.and-std-audit-catatan strong {
    color: #64748b;
    font-weight: 700;
}

.and-std-audit-bukti {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-accent);
    text-decoration: none;
}

.and-std-empty {
    margin: 0;
    font-size: 0.875rem;
    color: #94a3b8;
}

.and-std-people-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 380px) {
    .and-std-people-grid {
        grid-template-columns: 1fr;
    }
}

.and-std-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 8px 0;
}

.and-std-person__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-std-person__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.and-std-person__dot--blue {
    background: #3b82f6;
}

.and-std-person__dot--green {
    background: #10b981;
}

.and-std-person__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
}

.and-std-person__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-std-person__avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 800;
    color: #2563eb;
}

.and-std-person__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
}

.and-std-person__role {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-std-sign {
    width: 100%;
    margin-top: 4px;
}

.and-std-sign__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-std-sign__box {
    min-height: 72px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px dashed rgba(148, 163, 184, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.and-std-sign__box img {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
}

.and-std-sign__box--empty span,
.and-std-sign__box--stamp span {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
}

.and-std-sign__box--stamp.is-verified {
    border-style: solid;
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
}

.and-std-sign__verified {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #059669;
}

.and-std-sign__verified em {
    font-style: normal;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.and-std-header__print[hidden],
.and-std-header__acc[hidden],
.and-std-bar__primary [hidden] {
    display: none !important;
}

.and-std-bar__primary {
    display: contents;
}

.and-std-bar__primary .and-std-bar__btn {
    width: 100%;
}

.and-std-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    padding: 10px 16px calc(10px + var(--and-safe-bottom));
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 -4px 24px -4px rgba(15, 23, 42, 0.10);
}

.and-layout--std-detail > .and-std-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
    z-index: 30;
    box-sizing: border-box;
    padding-bottom: calc(12px + var(--and-safe-bottom));
}

.and-layout--std-detail > .and-std-bar--rab-detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    flex: none;
    width: 100%;
    margin-top: 0;
    z-index: 1250;
    padding: 10px 16px calc(10px + var(--and-safe-bottom));
}

.and-main--std-detail > .and-std-bar--rab-detail {
    position: sticky;
    bottom: 0;
    left: auto;
    right: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    z-index: 30;
    transform: none;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.14);
    padding: 10px 12px calc(10px + var(--and-safe-bottom));
    box-sizing: border-box;
    overflow: visible;
}

@media (min-width: 768px) {
    .and-layout--std-detail {
        width: min(var(--and-content-max), calc(100% - var(--and-space-md) * 2));
        max-width: var(--and-content-max);
        margin-inline: auto;
    }

    .and-main--std-detail > .and-std-bar--rab-detail {
        padding: 12px 14px;
        border-radius: 16px;
    }
}

.and-layout--std-detail:has(.and-std-bar--rab-detail) > .and-main--std-detail {
    padding-bottom: calc(12px + var(--and-safe-bottom));
    scroll-padding-bottom: calc(12px + var(--and-safe-bottom));
}

.and-layout--std-detail .and-std-bar--rab-detail .and-std-bar__btn--primary {
    background: linear-gradient(145deg, #0f2744 0%, #1e3a5f 100%);
    box-shadow: 0 10px 24px -8px rgba(15, 39, 68, 0.45);
}

.and-std-bar--st-detail {
    z-index: 30;
}

.and-layout--std-detail .and-std-bar--st-detail .and-std-bar__btn--primary {
    background: linear-gradient(145deg, #9a3412 0%, #7c2d12 100%);
    box-shadow: 0 10px 24px -8px rgba(124, 45, 18, 0.45);
}

.and-spa-outlet-wrap:has(> #and-spa-outlet > .and-layout--std-detail),
#and-spa-outlet:has(> .and-layout--std-detail) {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.and-body--no-nav .and-std-bar {
    bottom: auto;
}

.and-body--no-nav .and-std-bar--rab-detail {
    position: sticky;
    left: auto;
    right: auto;
    bottom: 0;
    z-index: 30;
}

.and-std-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid transparent;
}

.and-std-bar__btn--ghost {
    background: #fff;
    border-color: rgba(148, 163, 184, 0.35);
    color: #334155;
}

.and-std-bar__btn--primary {
    background: var(--and-accent);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(255, 90, 0, 0.45);
}

.and-std-bar__btn--acc {
    background: #10b981;
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(16, 185, 129, 0.45);
    cursor: pointer;
}

.and-std-bar__btn--acc:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Serah Terima — Audit session (v2)
   ========================================================================== */
.and-layout--sta {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.and-body--no-nav .and-layout--sta {
    padding-bottom: 0;
}

.and-layout--sta > .and-main--item-detail.and-main--sta {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(96px + var(--and-safe-bottom));
    scroll-padding-bottom: calc(96px + var(--and-safe-bottom));
}

.and-layout--sta:not(:has(> .and-sta-bar:not([hidden]))) > .and-main--item-detail.and-main--sta {
    padding-bottom: calc(20px + var(--and-safe-bottom));
    scroll-padding-bottom: calc(20px + var(--and-safe-bottom));
}

.and-spa-outlet-wrap:has(> #and-spa-outlet > .and-layout--sta),
#and-spa-outlet:has(> .and-layout--sta) {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.and-form-hero .and-sta-header__shield {
    background: rgba(16, 185, 129, 0.22);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

.and-item-detail-header.and-form-hero .and-bf-header__left {
    flex: 1;
    min-width: 0;
}

.and-sta-header:not(.and-form-hero) {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: calc(var(--and-page-inset-top) + 8px) 16px 10px;
    background: transparent;
    pointer-events: none;
}

.and-sta-header__bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(14px);
}

.and-sta-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.98);
    color: #334155;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
    cursor: pointer;
}

.and-sta-header__center {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.and-sta-header__eyebrow {
    display: block;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-sta-header__nomor {
    display: block;
    margin-top: 1px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.and-sta-header__meta {
    display: block;
    margin-top: 2px;
    font-size: 0.625rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-sta-header__shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.18);
    flex-shrink: 0;
}

.and-sta-loading,
.and-sta-error {
    text-align: center;
    padding: 48px 16px;
    color: #64748b;
    font-size: 0.875rem;
}

.and-sta-loading__spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border: 3px solid rgba(148, 163, 184, 0.25);
    border-top-color: var(--and-accent);
    border-radius: 50%;
    animation: and-spin 0.8s linear infinite;
}

.and-sta-error {
    color: #dc2626;
}

.and-sta-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-sta-panel {
    padding: 16px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.12);
}

.and-sta-panel__title {
    margin: 0 0 12px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.and-sta-panel__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.and-sta-panel__head-row .and-sta-panel__title {
    margin: 0;
}

.and-sta-panel__badge {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.1);
    font-size: 0.625rem;
    font-weight: 700;
    color: #2563eb;
}

.and-sta-item-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.and-sta-item-card__media {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, #f8fafc, #eef2ff);
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.18);
}

.and-sta-item-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-sta-item-card__name {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.28;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.and-sta-item-card__sku {
    margin: 0 0 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}

.and-sta-item-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.and-sta-stat-pill {
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.98);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.and-sta-stat-pill__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-sta-stat-pill__value {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.and-sta-stat-pill--loc .and-sta-stat-pill__value {
    color: #2563eb;
}

.and-sta-loc__sub {
    display: block;
    margin-top: 2px;
    font-size: 0.5625rem;
    font-weight: 600;
    color: #64748b;
}

.and-sta-qty-card {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.and-sta-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    color: #334155;
    cursor: pointer;
}

.and-sta-qty-btn--plus {
    background: rgba(255, 90, 0, 0.14);
    color: var(--and-accent);
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.15);
}

.and-sta-qty-display {
    text-align: center;
    padding: 0 4px;
}

.and-sta-qty-value {
    display: block;
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.and-sta-qty-label {
    display: block;
    margin-top: 6px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-sta-qty-diff {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.and-sta-qty-diff.is-ok {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-sta-qty-diff.is-warn {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.and-sta-qty-diff.is-bad {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.and-sta-kondisi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.and-sta-kondisi__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 108px;
    padding: 14px 8px 12px;
    border: 2px solid transparent;
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.98);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
}

.and-sta-kondisi__btn:active {
    transform: scale(0.98);
}

.and-sta-kondisi__btn.is-active {
    background: #fff;
}

.and-sta-kondisi__btn--good.is-active {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 8px 20px -8px rgba(16, 185, 129, 0.25);
}

.and-sta-kondisi__btn--fair.is-active {
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 8px 20px -8px rgba(249, 115, 22, 0.22);
}

.and-sta-kondisi__btn--bad.is-active {
    border-color: rgba(244, 63, 94, 0.4);
    box-shadow: 0 8px 20px -8px rgba(244, 63, 94, 0.2);
}

.and-sta-kondisi__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
}

.and-sta-kondisi__btn--good .and-sta-kondisi__icon {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-sta-kondisi__btn--fair .and-sta-kondisi__icon {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}

.and-sta-kondisi__btn--bad .and-sta-kondisi__icon {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
}

.and-sta-kondisi__label {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #334155;
    text-align: center;
    line-height: 1.25;
}

.and-sta-notes {
    width: 100%;
    min-height: 96px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.98);
    font-size: 0.875rem;
    line-height: 1.45;
    color: #0f172a;
    resize: vertical;
}

.and-sta-notes::placeholder {
    color: #94a3b8;
}

.and-sta-extra-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.and-sta-field--full {
    width: 100%;
}

.and-sta-field__opt {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #cbd5e1;
}

.and-sta-date-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.and-sta-date-wrap__icon {
    flex-shrink: 0;
    color: var(--and-accent, #ff5a00);
    display: inline-flex;
}

.and-sta-date-wrap .and-sta-date {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 10px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    -webkit-appearance: none;
    appearance: none;
}

.and-sta-bukti {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.and-sta-bukti-hint {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.45;
    color: #94a3b8;
}

.and-sta-bukti-picks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.and-sta-bukti-pick {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
    padding: 10px 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    background: #fff;
    color: #334155;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.and-sta-bukti-pick:active {
    background: rgba(255, 90, 0, 0.06);
    border-color: rgba(255, 90, 0, 0.35);
}

.and-sta-bukti-pick svg {
    color: var(--and-accent, #ff5a00);
}

.and-sta-bukti-pick--pdf svg {
    color: #64748b;
}

.and-sta-bukti-status {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-sta-bukti-status[hidden] {
    display: none !important;
}

.and-sta-bukti-progress {
    padding: 12px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.and-sta-bukti-progress[hidden] {
    display: none !important;
}

.and-sta-bukti-progress__track {
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
    margin-bottom: 8px;
}

.and-sta-bukti-progress__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--and-accent, #ff5a00), #fb923c);
    transition: width 0.25s ease;
}

.and-sta-bukti-progress__text {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}

.and-sta-bukti-preview {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 90, 0, 0.22);
    background: rgba(255, 247, 237, 0.65);
}

.and-sta-bukti-preview[hidden] {
    display: none !important;
}

.and-sta-bukti-preview__media {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.and-sta-bukti-preview__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-sta-bukti-preview__media img[hidden],
.and-sta-bukti-preview__pdf[hidden] {
    display: none !important;
}

.and-sta-bukti-preview__pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.and-sta-bukti-preview__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-right: 28px;
}

.and-sta-bukti-preview__meta strong {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.and-sta-bukti-preview__meta span {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.4;
}

.and-sta-bukti-preview__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #475569;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.and-sta-panel--bukti .and-sta-notes {
    margin-bottom: 4px;
}

.and-sta-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.and-sta-field__label {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    padding-left: 2px;
}

.and-sta-date {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.98);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
}

.and-sta-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 46px;
    padding: 10px 8px;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: rgba(248, 250, 252, 0.98);
    cursor: pointer;
    text-align: center;
}

.and-sta-upload__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.and-sta-upload__icon {
    color: #94a3b8;
}

.and-sta-upload__label {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-sta-upload__text {
    font-size: 0.625rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
}

.and-sta-auditor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px -14px rgba(15, 23, 42, 0.1);
}

.and-sta-auditor__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.and-sta-auditor__avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    color: #2563eb;
    flex-shrink: 0;
}

.and-sta-auditor__label {
    display: block;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-sta-auditor__name,
.and-sta-auditor__shift {
    display: block;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
}

.and-sta-auditor__right {
    text-align: right;
    flex-shrink: 0;
}

.and-sta-hint {
    margin: 0;
    padding: 0 4px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
}

.and-sta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    padding: 10px 16px calc(10px + var(--and-safe-bottom));
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 -4px 24px -4px rgba(15, 23, 42, 0.10);
}

.and-sta-bar[hidden] {
    display: none !important;
}

.and-sta-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    cursor: pointer;
}

.and-sta-bar__btn--ghost {
    background: #fff;
    border-color: rgba(148, 163, 184, 0.35);
    color: #334155;
}

.and-sta-bar__btn--primary {
    background: var(--and-accent);
    color: #fff;
    box-shadow: 0 12px 28px -8px rgba(255, 90, 0, 0.45);
}

.and-sta-bar__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 380px) {
    .and-sta-item-card {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .and-sta-item-card__media {
        width: 80px;
        height: 80px;
    }

    .and-sta-extra-grid {
        grid-template-columns: 1fr;
    }

    .and-sta-bukti-picks {
        grid-template-columns: 1fr;
    }

    .and-sta-bukti-pick {
        flex-direction: row;
        min-height: 48px;
    }
}

@media (max-width: 340px) {
    .and-sta-item-card__stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Serah Terima — Item list (flat per barang)
   ========================================================================== */
.and-main--sti {
    padding-bottom: calc(var(--and-nav-height) + var(--and-safe-bottom) + 16px);
}

.and-sti-load {
    margin: 0 16px 10px;
    padding: 0;
    max-height: 56px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.28s ease, margin 0.28s ease;
}

.and-sti-load:not(.is-active):not(.is-done) {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

.and-sti-load.is-active {
    max-height: 56px;
    opacity: 1;
    margin-bottom: 12px;
}

.and-sti-load__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.and-sti-load__pct {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--and-accent);
    font-variant-numeric: tabular-nums;
}

.and-sti-load.is-done {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
}

.and-sti-load__track {
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}

.and-sti-load__fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff5a00, #ff8a3d, #ff5a00);
    background-size: 200% 100%;
    animation: and-sti-load-shine 1.1s linear infinite;
    transition: width 0.22s ease-out;
}

.and-sti-load__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #64748b;
}

@keyframes and-sti-load-shine {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.and-sti-list-host--loading .and-sti-list--sk {
    pointer-events: none;
}

.and-sti-card--sk {
    animation: and-sti-sk-rise 0.45s ease both;
    animation-delay: calc(var(--sk-i, 0) * 0.07s);
}

.and-sti-card__footer--sk {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.and-st-gedung-chip--sk {
    min-width: 92px;
    height: 72px;
    border-radius: 16px;
    flex-shrink: 0;
    animation: and-sti-sk-rise 0.4s ease both;
    animation-delay: calc(var(--sk-i, 0) * 0.05s);
}

@keyframes and-sti-sk-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.and-sti-list-host {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 8px;
}

.and-sti-list-host--ready .and-sti-card {
    animation: and-sti-sk-rise 0.38s ease both;
    animation-delay: calc(min(var(--sti-i, 0), 5) * 0.05s);
}

.and-sti-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.and-sti-card {
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 14px 36px -16px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.and-sti-card--inactive {
    opacity: 0.72;
}

.and-sti-card__hero {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
    overflow: hidden;
}

.and-sti-card__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-sti-card__hero-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #cbd5e1;
}

.and-sti-card__badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.and-sti-card__badge--action {
    background: #ef4444;
}

.and-sti-card__badge--service,
.and-sti-card__badge--ok {
    background: #10b981;
}

.and-sti-card__badge--draft {
    background: #f59e0b;
}

.and-sti-card__body {
    padding: 16px 16px 14px;
}

.and-sti-card__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.and-sti-card__titles {
    flex: 1;
    min-width: 0;
}

.and-sti-card__title {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.and-sti-card__meta {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-sti-card__zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 237, 213, 0.85);
    border: 1px solid rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(255, 90, 0, 0.12);
}

.and-sti-card__quote {
    margin: 0 0 12px;
    padding: 0 0 0 12px;
    border-left: 3px solid rgba(148, 163, 184, 0.35);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.55;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-sti-card__audit-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.16);
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.and-sti-card__audit-strip strong {
    color: #0f172a;
}

.and-sti-card__diff--ok {
    color: #059669;
}

.and-sti-card__diff--warn {
    color: #d97706;
}

.and-sti-card__diff--bad {
    color: #dc2626;
}

.and-sti-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.and-sti-card__person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.and-sti-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}

.and-sti-card__person-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.and-sti-card__person-text strong {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-sti-card__person-text span {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-sti-card__audit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid rgba(194, 65, 12, 0.22);
    box-shadow: 0 10px 24px rgba(194, 65, 12, 0.24), 0 0 0 2px rgba(251, 146, 60, 0.14);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9a3412;
    text-decoration: none;
    flex-shrink: 0;
}

.and-main--sti .and-data-hero__actions .and-data-hero__action {
    border-radius: 14px;
}

.and-sti-card__qty-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    flex-shrink: 0;
}

.and-sti-load-end {
    padding: 12px 0 4px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
}

@media (max-width: 380px) {
    .and-sti-card__title {
        font-size: 1rem;
    }

    .and-sti-card__audit-btn {
        min-width: 76px;
        padding: 0 14px;
    }
}

/* ── Data Laporan ── */
.and-main--lpr {
    padding-bottom: calc(var(--and-nav-height, 72px) + 16px);
}

.and-lpr-list .and-lpr-card-wrap {
    margin-bottom: 12px;
}

.and-lpr-card {
    overflow: hidden;
}

.and-lpr-card__toggle {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 28px;
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 12px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.and-lpr-card__thumb {
    width: 72px;
    height: 72px;
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.18);
    flex-shrink: 0;
}

.and-lpr-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-lpr-card__body {
    min-width: 0;
}

.and-lpr-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.and-lpr-card__nomor {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.and-lpr-card__svc-ref {
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-accent);
}

.and-lpr-card__meta,
.and-lpr-card__lokasi {
    margin: 0 0 4px;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
}

.and-lpr-card__preview {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-lpr-card__pelapor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.and-lpr-card__pelapor .and-doc-card__icon-box {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
}

.and-lpr-card__pelapor-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.and-lpr-card__pelapor-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}

.and-lpr-card__chev {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: transform 0.22s ease;
}

.and-lpr-card-wrap.is-open .and-lpr-card__chev {
    transform: rotate(180deg);
}

.and-lpr-card__detail {
    padding: 0 12px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.and-lpr-detail {
    padding-top: 12px;
}

.and-lpr-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.and-lpr-detail__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 0.6875rem;
    font-weight: 700;
    color: #475569;
}

.and-lpr-detail__empty,
.and-lpr-detail__error {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    color: #64748b;
}

.and-lpr-detail__error {
    color: #dc2626;
}

.and-lpr-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.and-lpr-gambar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.and-lpr-gambar-item {
    display: block;
    aspect-ratio: 1;
    border-radius: 0.875rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.and-lpr-gambar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-lpr-svc-block {
    margin: 0 0 12px;
    padding: 12px;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.and-lpr-svc-block.is-pending {
    border-color: rgba(255, 90, 0, 0.28);
    background: rgba(255, 237, 213, 0.45);
}

.and-lpr-svc-block__title {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
}

.and-lpr-svc-pending {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: #9a3412;
}

.and-lpr-svc-meta {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 6px;
}

.and-lpr-svc-meta li {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
    font-size: 0.75rem;
}

.and-lpr-svc-meta li span {
    color: #64748b;
    font-weight: 600;
}

.and-lpr-svc-meta li strong {
    color: #0f172a;
    font-weight: 700;
}

.and-lpr-svc-sheet .and-lpr-svc-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 12px 16px;
}

.and-lpr-svc-hint {
    margin: 0;
    padding: 0 16px 8px;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
}

.and-lpr-svc-pick-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    text-align: left;
    cursor: pointer;
}

.and-lpr-svc-pick-item strong {
    font-size: 0.875rem;
    color: #0f172a;
}

.and-lpr-svc-pick-item span {
    font-size: 0.75rem;
    color: #64748b;
}

body.and-lpr-svc-open {
    overflow: hidden;
}

/* ==========================================================================
   Tambah Laporan — form modern (soft UI)
   ========================================================================== */
.and-main--lpr-form {
    padding: calc(var(--and-page-inset-top) + 12px) var(--and-space-md) calc(var(--and-safe-bottom, 0px) + 108px);
}

.and-lpr-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 16px;
}

.and-lpr-form-header__back {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.and-lpr-form-header__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.and-lpr-form {
    padding: 0 0 12px;
}

.and-lpr-form-section {
    background: #fff;
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.and-lpr-form-section__label {
    display: block;
    margin-bottom: 12px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-lpr-form-uploads {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-lpr-form-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 112px;
    padding: 16px;
    border-radius: 16px;
    border: 2px dashed rgba(148, 163, 184, 0.35);
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.and-lpr-form-upload:active {
    transform: scale(0.99);
}

.and-lpr-form-upload__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.and-lpr-form-upload--camera .and-lpr-form-upload__icon {
    color: #ea580c;
    background: rgba(234, 88, 12, 0.1);
}

.and-lpr-form-upload--gallery .and-lpr-form-upload__icon {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
}

.and-lpr-form-upload__title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
}

.and-lpr-form-upload__sub {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-lpr-form-previews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.and-lpr-form-preview {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
}

.and-lpr-form-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-lpr-form-preview__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.and-lpr-form-hint,
.and-lpr-form-nomor {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-lpr-form-vision-status {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.16);
}

.and-lpr-form-vision-status.is-error {
    color: #b45309;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.and-lpr-form-vision-status.is-success {
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.18);
}

.and-lpr-form-preview--ai::after {
    content: 'AI';
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 1;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(255, 90, 0, 0.92);
}

.and-lpr-form-section--bukti.is-busy .and-lpr-form-upload {
    opacity: 0.72;
    pointer-events: none;
}

.and-lpr-form-previews.is-processing {
    min-height: 88px;
}

.and-lpr-form-preview--loading {
    background: linear-gradient(110deg, #f1f5f9 8%, #e2e8f0 18%, #f1f5f9 33%);
    background-size: 200% 100%;
    animation: and-lpr-shimmer 1.1s ease-in-out infinite;
}

.and-lpr-form-preview--enter {
    animation: and-lpr-preview-in 0.38s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.and-lpr-form-preview--ai.is-scanning::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 90, 0, 0.35) 50%, transparent 100%);
    animation: and-lpr-scan 1.4s ease-in-out infinite;
    pointer-events: none;
}

.and-lpr-form-preview--ai.is-scanning img {
    filter: saturate(0.85);
}

.and-lpr-vision-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.and-lpr-vision-status__spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(14, 165, 233, 0.25);
    border-top-color: #0ea5e9;
    flex-shrink: 0;
    animation: and-lpr-spin 0.75s linear infinite;
}

.and-lpr-vision-status.is-loading {
    animation: and-lpr-status-pulse 1.2s ease-in-out infinite;
}

.and-lpr-loc-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-lpr-loc-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.and-lpr-loc-card:active:not(:disabled) {
    transform: scale(0.985);
}

.and-lpr-loc-card.has-value {
    border-color: rgba(255, 90, 0, 0.28);
    box-shadow: 0 8px 20px -12px rgba(255, 90, 0, 0.35);
}

.and-lpr-loc-card.is-disabled,
.and-lpr-loc-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f8fafc;
}

.and-lpr-loc-card__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.and-lpr-loc-card__icon--gedung {
    color: #ea580c;
    background: rgba(255, 90, 0, 0.1);
}

.and-lpr-loc-card__icon--ruangan {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
}

.and-lpr-loc-card__body {
    min-width: 0;
}

.and-lpr-loc-card__kicker {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 2px;
}

.and-lpr-loc-card__opt {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #cbd5e1;
}

.and-lpr-loc-card__value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-lpr-loc-card.has-value .and-lpr-loc-card__value {
    color: #0f172a;
}

.and-lpr-loc-card__chev {
    color: #94a3b8;
    flex-shrink: 0;
}

.and-lpr-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.and-lpr-detail-head .and-lpr-form-section__label {
    margin-bottom: 0;
}

.and-lpr-voice-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 90, 0, 0.14), rgba(255, 138, 61, 0.1));
    color: #ea580c;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.2);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.and-lpr-voice-pill:active {
    transform: scale(0.96);
}

.and-lpr-voice-pill .and-voice-composer__icon--stop {
    display: none;
}

.and-lpr-voice-pill.is-voice-listening,
.and-lpr-voice-pill.and-chat__mic-btn.is-voice-listening {
    background: linear-gradient(145deg, rgba(255, 90, 0, 0.28), rgba(255, 138, 61, 0.2));
    color: #c2410c;
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.15), inset 0 0 0 1px rgba(255, 90, 0, 0.28);
    animation: and-lpr-voice-pulse 1.1s ease-in-out infinite;
}

.and-lpr-voice-pill.is-voice-listening .and-voice-composer__icon--mic,
.and-lpr-voice-pill.and-chat__mic-btn.is-voice-listening .and-voice-composer__icon--mic {
    display: none;
}

.and-lpr-voice-pill.is-voice-listening .and-voice-composer__icon--stop,
.and-lpr-voice-pill.and-chat__mic-btn.is-voice-listening .and-voice-composer__icon--stop {
    display: block;
}

.and-lpr-voice-pill__text {
    line-height: 1;
}

.and-lpr-detail-box {
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #f8fafc;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.and-lpr-detail-box:focus-within {
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1);
}

.and-lpr-detail-box .and-voice-composer__strip {
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.and-lpr-detail-box .and-ra-textarea {
    min-height: 88px;
    padding: 14px;
    border-radius: 0;
    border: 0;
    background: transparent;
    resize: vertical;
}

.and-lpr-detail-box .and-ra-textarea:focus {
    outline: none;
}

.and-lpr-form-section--detail .and-lpr-form-textarea {
    min-height: 132px;
    padding: 14px 14px 12px;
    border-radius: 0;
    border: 0;
    background: transparent;
    resize: vertical;
}

.and-lpr-form-section--detail .and-lpr-form-textarea:focus {
    outline: none;
}

@keyframes and-lpr-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes and-lpr-preview-in {
    from { opacity: 0; transform: scale(0.92) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes and-lpr-scan {
    0% { transform: translateY(-100%); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

@keyframes and-lpr-spin {
    to { transform: rotate(360deg); }
}

@keyframes and-lpr-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.82; }
}

@keyframes and-lpr-voice-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .and-lpr-form-preview--enter,
    .and-lpr-form-preview--loading,
    .and-lpr-form-preview--ai.is-scanning::before,
    .and-lpr-vision-status.is-loading,
    .and-lpr-voice-pill.is-voice-listening {
        animation: none;
    }
}

.and-lpr-form-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #fff;
    color: #64748b;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: left;
}

.and-lpr-form-picker.has-value {
    color: #0f172a;
}

.and-lpr-form-picker svg {
    color: #94a3b8;
    flex-shrink: 0;
}

.and-lpr-form-textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px;
    border-radius: 14px;
    border: 0;
    background: #f8fafc;
    font: inherit;
    font-size: 0.9375rem;
    color: #0f172a;
    resize: vertical;
}

.and-lpr-form-textarea::placeholder {
    color: #94a3b8;
    font-style: italic;
}

.and-lpr-form-hint--tight {
    margin-top: 4px;
    margin-bottom: 10px;
}

body.and-body--lpr-form .and-lpr-form-bar.and-pe-save-bar--portaled {
    z-index: 130;
}

.and-lpr-form-bar .and-pe-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.and-lpr-form-bar .and-pjm-form-bar__actions {
    gap: 10px;
}

.and-lpr-form-bar__cancel {
    flex: 1;
}

.and-lpr-form-bar__save {
    flex: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.and-lpr-picker-open {
    overflow: hidden;
}

body.and-body--lpr-form .and-lpr-form-bar {
    z-index: 120;
}

/* ==========================================================================
   Service — Tindakan session (modern clean layout)
   ========================================================================== */
.and-layout--svc-tnd.and-layout--std-detail > .and-main--svc-tnd {
    gap: 12px;
}

.and-layout--svc-tnd .and-item-detail-header {
    margin-bottom: 10px;
}

.and-svc-tnd-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.and-svc-tnd-summary {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 36px -18px rgba(15, 23, 42, 0.14);
}

.and-svc-tnd-summary__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.and-svc-tnd-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #475569;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.and-svc-tnd-chip--proses,
.and-svc-tnd-chip--draft {
    color: #b45309;
    background: #fffbeb;
    border-color: rgba(245, 158, 11, 0.25);
}

.and-svc-tnd-chip--selesai {
    color: #047857;
    background: #ecfdf5;
    border-color: rgba(16, 185, 129, 0.25);
}

.and-svc-tnd-chip--ditolak {
    color: #b91c1c;
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.2);
}

.and-svc-tnd-chip--parsial {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: rgba(59, 130, 246, 0.22);
}

.and-svc-tnd-summary__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.and-svc-tnd-stat {
    padding: 12px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.14);
    min-width: 0;
}

.and-svc-tnd-stat__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-svc-tnd-stat__value {
    display: block;
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.35;
    color: #0f172a;
    word-break: break-word;
}

.and-svc-tnd-summary__note {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #475569;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 3px solid rgba(37, 99, 235, 0.35);
}

.and-svc-tnd-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px 2px;
}

.and-svc-tnd-section-head__title {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.and-svc-tnd-section-head__count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #94a3b8;
}

.and-svc-tnd-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-svc-tnd-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-svc-tnd-card {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 32px -16px rgba(15, 23, 42, 0.12);
}

.and-svc-tnd-card.is-final {
    opacity: 0.92;
}

.and-svc-tnd-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.and-svc-tnd-card__index {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #cbd5e1;
}

.and-svc-tnd-status-badge {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.and-svc-tnd-status-badge--draft {
    color: #64748b;
    background: #f1f5f9;
}

.and-svc-tnd-status-badge--proses {
    color: #b45309;
    background: #fffbeb;
}

.and-svc-tnd-status-badge--selesai {
    color: #047857;
    background: #ecfdf5;
}

.and-svc-tnd-status-badge--ditolak {
    color: #b91c1c;
    background: #fef2f2;
}

.and-svc-tnd-status-badge--parsial {
    color: #1d4ed8;
    background: #eff6ff;
}

.and-svc-tnd-product {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.and-svc-tnd-product__media {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(145deg, #f8fafc, #eef2ff);
    box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.16);
}

.and-svc-tnd-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-svc-tnd-product__name {
    margin: 0 0 4px;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.3;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.and-svc-tnd-product__sku {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
}

.and-svc-tnd-product__tag {
    display: inline-flex;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.625rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    line-height: 1.3;
}

.and-svc-tnd-history-block {
    margin: 0;
    padding-top: 12px;
}

.and-svc-tnd-history-block__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    user-select: none;
}

.and-svc-tnd-history-block__toggle::-webkit-details-marker {
    display: none;
}

.and-svc-tnd-history-block__toggle::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.and-svc-tnd-history-block[open] .and-svc-tnd-history-block__toggle::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.and-svc-tnd-timeline {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 0 14px;
    border-left: 2px solid rgba(148, 163, 184, 0.2);
}

.and-svc-tnd-timeline__item {
    position: relative;
    padding: 0 0 12px 12px;
}

.and-svc-tnd-timeline__item:last-child {
    padding-bottom: 0;
}

.and-svc-tnd-timeline__dot {
    position: absolute;
    left: -19px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.and-svc-tnd-timeline__meta {
    margin: 0 0 3px;
    font-size: 0.625rem;
    font-weight: 700;
    color: #94a3b8;
    line-height: 1.4;
}

.and-svc-tnd-timeline__text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #334155;
    white-space: pre-wrap;
}

.and-svc-tnd-timeline__empty {
    margin: 8px 0 0;
    padding-left: 12px;
    font-size: 0.8125rem;
    color: #94a3b8;
    font-style: italic;
    list-style: none;
}

.and-svc-tnd-action {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.and-svc-tnd-block__title {
    margin: 0 0 8px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-svc-tnd-block__title+.and-svc-tnd-status-strip {
    margin-top: 0;
}

.and-svc-tnd-action .and-svc-tnd-block__title:not(:first-child) {
    margin-top: 14px;
}

.and-svc-tnd-textarea,
.and-svc-tnd-input,
.and-svc-tnd-select {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    font-size: 0.875rem;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.and-svc-tnd-textarea {
    min-height: 88px;
    padding: 12px 14px;
    resize: vertical;
    margin-bottom: 12px;
}

.and-svc-tnd-textarea::placeholder {
    color: #94a3b8;
}

.and-svc-tnd-textarea:focus,
.and-svc-tnd-input:focus,
.and-svc-tnd-select:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.and-svc-tnd-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}

.and-svc-tnd-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.and-svc-tnd-field__label {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-svc-tnd-input,
.and-svc-tnd-select {
    min-height: 44px;
    padding: 10px 12px;
}

.and-svc-tnd-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.and-svc-tnd-pill {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1.5px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    background: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #64748b;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.and-svc-tnd-pill:active {
    transform: scale(0.98);
}

.and-svc-tnd-pill--draft.is-active {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #475569;
}

.and-svc-tnd-pill--fair.is-active {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
}

.and-svc-tnd-pill--good.is-active {
    border-color: #10b981;
    background: #ecfdf5;
    color: #047857;
}

.and-svc-tnd-pill--bad.is-active {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

.and-svc-tnd-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.8125rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed rgba(148, 163, 184, 0.35);
}

.and-svc-tnd-locked svg {
    flex-shrink: 0;
    color: #94a3b8;
}

.and-svc-tnd-hint {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    color: #64748b;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.and-svc-tnd-empty {
    margin: 0;
    padding: 24px 16px;
    text-align: center;
    font-size: 0.875rem;
    color: #94a3b8;
}

@media (max-width: 380px) {

    .and-svc-tnd-summary__grid,
    .and-svc-tnd-fields {
        grid-template-columns: 1fr;
    }

    .and-svc-tnd-pill {
        flex: 1 1 100%;
    }
}

/* ============================================================
   Profile Edit (Onboard-style)
   ============================================================ */
.and-layout--pe {
    --and-pe-accent: #876048;
    --and-pe-accent-soft: rgba(135, 96, 72, 0.14);
    --and-pe-ink: #0f172a;
    --and-pe-muted: #64748b;
    --and-pe-bg: #eef1f6;
    background: var(--and-pe-bg);
}

.and-layout--pe .and-item-detail-header.and-form-hero {
    margin-bottom: 4px;
}

.and-main--pe {
    padding: calc(var(--and-safe-top, 0px) + 12px) 16px calc(var(--and-safe-bottom, 0px) + 108px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.and-pe-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 4px;
}

.and-pe-header__back {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #fff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.and-pe-header__title {
    margin: 4px 0 0;
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    font-weight: 800;
    color: var(--and-pe-ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.and-pe-header__sub {
    margin: 6px 0 0;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-pe-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.and-pe-card {
    background: #fff;
    border-radius: 1.75rem;
    padding: 20px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.and-pe-photo-card {
    text-align: center;
    padding: 24px 20px 20px;
}

.and-pe-photo-zone {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}

.and-pe-photo-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 148px;
    border: 2px dashed rgba(148, 163, 184, 0.45);
    border-radius: 1.5rem;
    background: #f8fafc;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.and-pe-photo-drop.has-photo {
    border-style: solid;
    border-color: rgba(148, 163, 184, 0.25);
    background: transparent;
}

.and-pe-photo-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.and-pe-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.and-pe-photo-add {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--and-pe-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(234, 88, 12, 0.35);
}

.and-pe-name-preview {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--and-pe-ink);
}

.and-pe-photo-hint {
    margin: 8px 0 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-pe-checklist-card {
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    padding: 22px 20px;
}

.and-pe-checklist__title {
    margin: 0 0 14px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-pe-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.and-pe-checklist__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #cbd5e1;
}

.and-pe-checklist__mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.45);
    flex-shrink: 0;
    position: relative;
}

.and-pe-checklist__item.is-done {
    color: #f8fafc;
}

.and-pe-checklist__item.is-done .and-pe-checklist__mark {
    border-color: #10b981;
    background: #10b981;
}

.and-pe-checklist__item.is-done .and-pe-checklist__mark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.and-pe-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.and-pe-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--and-pe-accent-soft);
    color: var(--and-pe-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-pe-section-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--and-pe-ink);
}

.and-pe-section-desc {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--and-pe-muted);
}

.and-pe-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-pe-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-pe-label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-pe-label--inline {
    margin-bottom: 4px;
}

.and-pe-req {
    color: #ef4444;
}

.and-pe-input,
.and-pe-textarea,
.and-pe-picker {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1rem;
    background: #f8fafc;
    color: var(--and-pe-ink);
    font-size: 0.9375rem;
    font-family: inherit;
}

.and-pe-textarea {
    min-height: 96px;
    resize: vertical;
}

.and-pe-input--readonly {
    background: #f1f5f9;
    color: #64748b;
}

.and-pe-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
}

.and-pe-picker.has-value {
    color: var(--and-pe-ink);
    background: #fff;
}

.and-pe-addr-type {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}

.and-pe-addr-opt {
    flex: 1;
    display: block;
    cursor: pointer;
}

.and-pe-addr-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.and-pe-addr-opt span {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #f8fafc;
    font-size: 0.875rem;
    font-weight: 700;
    color: #64748b;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.and-pe-addr-opt input:checked+span {
    border-color: var(--and-pe-accent);
    background: var(--and-pe-accent-soft);
    color: var(--and-pe-accent);
}

.and-pe-note {
    margin: 0 0 4px;
    font-size: 0.8125rem;
    color: var(--and-pe-muted);
    line-height: 1.5;
}

.and-pe-note a {
    color: var(--and-pe-accent);
    font-weight: 700;
    text-decoration: none;
}

.and-pe-status {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    color: var(--and-pe-muted);
}

.and-pe-status.is-ok {
    color: #059669;
}

.and-pe-status.is-err {
    color: #dc2626;
}

.and-pe-form-spacer {
    height: 24px;
}

.and-pe-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.and-pe-save-bar {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(var(--and-content-max), 100%);
    z-index: 40;
    padding: 12px var(--and-space-md) calc(var(--and-safe-bottom, 0px) + 12px);
    background: linear-gradient(180deg, rgba(238, 241, 246, 0) 0%, rgba(238, 241, 246, 0.92) 28%, #eef1f6 100%);
    box-sizing: border-box;
    pointer-events: none;
}

.and-pe-save-bar--portaled {
    z-index: 130;
    pointer-events: auto;
}

.and-pe-save-bar--portaled .and-pe-save-btn,
.and-pe-save-bar--portaled .and-pe-cancel-btn {
    pointer-events: auto;
}

.and-pe-save-bar--duo {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.and-pe-save-bar--duo .and-pe-save-btn,
.and-pe-save-bar--duo .and-pe-cancel-btn {
    flex: 1 1 0;
    min-width: 0;
}

.and-pe-cancel-btn {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(117, 84, 66, 0.28);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.96);
    color: #755442;
    font-size: 0.9375rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.and-pe-cancel-btn:active {
    transform: scale(0.98);
}

.and-pe-save-btn {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--and-nav-brown-0) 0%, var(--and-nav-brown-2) 100%);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 16px 36px rgba(117, 84, 66, 0.28);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.and-pe-save-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.and-pe-save-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.and-pe-section-head--compact {
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.and-pe-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
}

.and-pe-alert[hidden] {
    display: none !important;
}

.and-pe-alert--success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.22);
    color: #047857;
}

.and-pe-alert--warn {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #b45309;
}

.and-pe-alert code {
    font-size: 0.75rem;
}

.and-pa-email-value {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--and-pe-ink);
    word-break: break-all;
}

.and-pa-pending {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 1rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.16);
}

.and-pa-pending__text {
    margin: 0;
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.5;
}

.and-pa-pending__cancel {
    margin-top: 10px;
    padding: 0;
    border: none;
    background: none;
    color: #dc2626;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.and-pe-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.and-pe-tabs__indicator {
    position: absolute;
    top: 6px;
    left: 0;
    height: calc(100% - 12px);
    border-radius: 1rem;
    background: var(--and-pe-accent);
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.28);
    transition: transform 0.28s ease, width 0.28s ease;
    pointer-events: none;
    z-index: 0;
}

.and-pe-tabs__indicator.is-instant {
    transition: none;
}

.and-pe-tab {
    position: relative;
    z-index: 1;
    min-height: 44px;
    border: none;
    border-radius: 1rem;
    background: transparent;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
}

.and-pe-tab.is-active {
    color: #fff;
}

.and-pa-pane[hidden] {
    display: none !important;
}

.and-pa-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.and-pa-pw-wrap {
    position: relative;
}

.and-pa-pw-wrap .and-pe-input {
    padding-right: 48px;
}

.and-pa-pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.and-pa-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--and-pe-muted);
    line-height: 1.45;
}

.and-pa-save-bar[data-active-tab="email"] .and-pe-save-btn#andPaSavePassword,
.and-pa-save-bar[data-active-tab="password"] .and-pe-save-btn#andPaSaveEmail {
    display: none;
}

.and-pa-save-bar[data-active-tab="email"] .and-pe-save-btn#andPaSaveEmail,
.and-pa-save-bar[data-active-tab="password"] .and-pe-save-btn#andPaSavePassword {
    display: inline-flex;
}

.and-pe-note a,
.and-pe-note #andPeCredLink {
    color: var(--and-pe-accent);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.and-pe-status.is-warn {
    color: #b45309;
}

/* Profile — Pengaturan Aplikasi */
.and-ps-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-ps-group__label {
    margin: 0 0 0 2px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-ps-list {
    padding: 8px 16px 14px;
}

.and-ps-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 8px 0;
}

.and-ps-row.is-disabled {
    opacity: 0.72;
}

.and-ps-row__stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.and-ps-row__label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--and-pe-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.and-ps-row__sub {
    font-size: 0.75rem;
    color: var(--and-pe-muted);
    line-height: 1.4;
}

.and-ps-row--field {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.and-ps-row--action {
    min-height: auto;
    padding: 4px 0 8px;
}

.and-ps-row--action-duo {
    display: flex;
    gap: 10px;
}

.and-ps-row--action-duo .and-ps-action-btn {
    flex: 1;
}

.and-ps-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.2);
    margin: 4px 0;
}

.and-ps-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
}

.and-ps-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.and-ps-switch__track {
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.2s ease;
    position: relative;
}

.and-ps-switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease;
}

.and-ps-switch input:checked+.and-ps-switch__track {
    background: linear-gradient(135deg, #ff8c42 0%, #ff5a00 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 2px 12px rgba(255, 90, 0, 0.32);
}

.and-ps-switch input:checked+.and-ps-switch__track::after {
    transform: translateX(20px);
    box-shadow: 0 2px 8px rgba(255, 90, 0, 0.28);
}

.and-ps-switch input:focus-visible+.and-ps-switch__track {
    outline: 2px solid rgba(255, 90, 0, 0.35);
    outline-offset: 2px;
}

.and-ps-switch input:disabled+.and-ps-switch__track {
    opacity: 0.55;
}

.and-ps-pill {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #f1f5f9;
    color: #64748b;
}

.and-ps-pill.is-granted {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.and-ps-pill.is-denied {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.and-ps-pill.is-default {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.and-ps-select {
    min-height: 44px;
}

.and-ps-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: none;
    border-radius: 1rem;
    background: var(--and-pe-accent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.and-ps-action-btn--outline {
    background: #fff;
    color: var(--and-pe-accent);
    border: 1px solid rgba(234, 88, 12, 0.35);
}

.and-ps-hint {
    margin: 0;
    padding: 0 0 8px;
    font-size: 0.75rem;
    color: #b45309;
    line-height: 1.45;
}

.and-ps-hint[hidden] {
    display: none !important;
}

.and-ps-links {
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.and-ps-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 1rem;
    color: var(--and-pe-ink);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 700;
    transition: background 0.15s ease;
}

.and-ps-link:active {
    background: rgba(148, 163, 184, 0.12);
}

.and-ps-link+.and-ps-link {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.and-ps-link__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--and-pe-accent-soft);
    color: var(--and-pe-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-ps-link__text {
    flex: 1;
}

.and-ps-link__chev {
    color: #94a3b8;
    flex-shrink: 0;
}

/* ── RAB detail (and-std layout + RAB-specific blocks) ── */
.and-rab-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.and-rab-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
}

.and-rab-pill--proses {
    background: rgba(249, 115, 22, 0.15);
    color: #c2410c;
}

.and-rab-pill--acc {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.and-rab-pill--ditolak {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.and-rab-pill--ta {
    background: rgba(251, 191, 36, 0.2);
    color: #92400e;
    text-transform: none;
    font-weight: 700;
}

.and-rab-pill--muted {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
    text-transform: none;
}

.and-rab-pill--bos {
    background: rgba(251, 191, 36, 0.22);
    color: #92400e;
    text-transform: none;
    font-weight: 700;
}

.and-rab-bos-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.1);
}

.and-rab-bos-callout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.2);
    color: #b45309;
}

.and-rab-bos-callout__icon svg {
    display: block;
}

.and-rab-bos-callout__title {
    margin: 0 0 2px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #92400e;
}

.and-rab-bos-callout__text {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #64748b;
}

.and-std-card--bos {
    border-color: rgba(251, 191, 36, 0.28);
}

.and-rab-summary__row--bos .and-rab-summary__bos {
    font-weight: 800;
    color: #fde68a;
}

.and-ang-funding-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.and-ang-funding-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #92400e;
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.and-ang-funding-tag svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.and-doc-card--bos {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 28px -12px rgba(180, 83, 9, 0.22);
}

.and-rab-bos-filter .and-barang-chip--bos.is-active {
    color: #b45309;
}

.and-rab-person-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.and-rab-person-row:last-child {
    margin-bottom: 0;
}

.and-rab-person-row--compact {
    margin-bottom: 8px;
}

.and-rab-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    font-size: 0.75rem;
    font-weight: 800;
    color: #2563eb;
}

.and-rab-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-rab-person__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.and-rab-person__meta {
    margin: 2px 0 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.4;
}

.and-rab-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.8125rem;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
}

.and-rab-meta-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.and-rab-meta-row span {
    color: #64748b;
    font-weight: 600;
}

.and-rab-meta-row strong {
    color: #0f172a;
    font-weight: 700;
    text-align: right;
}

.and-rab-summary {
    background: linear-gradient(135deg, #0f2744 0%, #1e3a5f 55%, #152238 100%);
    border: 0;
    color: #fff;
}

.and-rab-summary .and-std-card__eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.and-rab-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.and-rab-summary__row+.and-rab-summary__row {
    border-top: 1px dashed rgba(255, 255, 255, 0.22);
}

.and-rab-summary__row--total {
    font-size: 0.9375rem;
    font-weight: 800;
    padding-top: 10px;
}

.and-rab-stage {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.and-rab-stage:last-child {
    margin-bottom: 0;
}

.and-rab-stage.is-done {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
}

.and-rab-stage.is-reject {
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.05);
}

.and-rab-stage.is-locked {
    opacity: 0.72;
}

.and-rab-stage.is-final {
    border-color: rgba(255, 90, 0, 0.22);
    background: rgba(255, 90, 0, 0.05);
}

.and-rab-stage__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
}

.and-rab-stage.is-done .and-rab-stage__icon {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.and-rab-stage.is-reject .and-rab-stage__icon {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.and-rab-stage__body {
    flex: 1;
    min-width: 0;
}

.and-rab-stage__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.and-rab-stage__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.and-rab-stage__badge {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
    white-space: nowrap;
}

.and-rab-stage.is-done .and-rab-stage__badge {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.and-rab-stage.is-reject .and-rab-stage__badge {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.and-rab-stage-hint {
    margin: 0 0 8px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #64748b;
}

.and-rab-approvals-lead {
    margin: -4px 0 10px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #64748b;
}

.and-rab-reject-reason {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    font-size: 0.75rem;
    line-height: 1.45;
    color: #b91c1c;
}

.and-rab-stage-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.and-rab-stage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

.and-rab-stage-btn svg {
    flex-shrink: 0;
}

.and-rab-stage-btn--acc {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.and-rab-stage-btn--tolak {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

.and-rab-acc-card {
    border-left: 3px solid rgba(16, 185, 129, 0.45);
}

.and-rab-acc-card--reject {
    border-left-color: rgba(239, 68, 68, 0.5);
}

.and-rab-item-price {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 4px 0 0;
    font-size: 0.6875rem;
    color: #64748b;
}

.and-rab-item-price strong {
    color: #0f2744;
    font-weight: 800;
}

.and-rab-item-sat {
    font-size: 0.625rem;
    font-weight: 700;
    color: #94a3b8;
}

.and-rab-realisasi__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.and-rab-realisasi__flag {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.and-rab-realisasi__flag.is-selesai {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.and-rab-realisasi__flag.is-need {
    background: rgba(255, 90, 0, 0.12);
    color: var(--and-accent);
}

.and-rab-realisasi__hint {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
}

.and-rab-realisasi__spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid rgba(255, 90, 0, 0.2);
    border-top-color: var(--and-accent);
    border-radius: 50%;
    vertical-align: -2px;
    animation: andSpin 0.7s linear infinite;
}

.and-rab-realisasi__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--and-accent) 0%, #e04e00 100%);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(255, 90, 0, 0.25);
}

.and-rab-real-compare {
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.and-rab-real-compare__title {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.and-rab-real-compare__row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.75rem;
    color: #475569;
}

.and-rab-real-compare__row strong {
    color: #0f172a;
    font-weight: 800;
}

.and-rab-real-compare__row--selisih.is-sisa strong {
    color: #059669;
}

.and-rab-real-compare__row--selisih.is-kurang strong {
    color: #dc2626;
}

.and-rab-real-compare__row em {
    font-style: normal;
    font-size: 0.625rem;
    font-weight: 800;
    margin-left: 4px;
}

.and-rab-real-compare__progress {
    height: 6px;
    margin: 8px 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.and-rab-real-compare__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #10b981;
}

.and-rab-real-compare__bar.is-over {
    background: #ef4444;
}

.and-rab-real-compare__bar.is-pas {
    background: #3b82f6;
}

.and-rab-real-compare__meta,
.and-rab-real-compare__desc {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: #64748b;
}

/* BAST detail — realisasi sumber (modern) */
.and-st-real-jump {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(14, 165, 233, 0.08) 100%);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.and-st-real-jump:active {
    transform: scale(0.985);
}
.and-st-real-jump__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.14);
    color: #2563eb;
    flex-shrink: 0;
}
.and-st-real-jump__body {
    flex: 1;
    min-width: 0;
}
.and-st-real-jump__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.and-st-real-jump__value {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    font-weight: 800;
    color: #1e3a8a;
    word-break: break-word;
}
.and-st-real-jump__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    font-size: 0.6875rem;
    font-weight: 800;
    flex-shrink: 0;
}

.and-st-real-section {
    margin: 12px 0 28px;
    padding: 0;
}
.and-st-real-hero {
    display: block;
    width: 100%;
    margin-bottom: 0;
    padding: 14px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 48%, #f59e0b 100%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(234, 88, 12, 0.22);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: margin-bottom 0.32s ease, box-shadow 0.32s ease, transform 0.15s ease;
}
.and-st-real-section.is-expanded .and-st-real-hero {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.18);
}
.and-st-real-hero:active {
    transform: scale(0.992);
}
.and-st-real-hero__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.and-st-real-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
}
.and-st-real-hero__copy {
    flex: 1;
    min-width: 0;
}
.and-st-real-hero__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
}
.and-st-real-hero__sub {
    margin: 4px 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}
.and-st-real-hero__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.and-st-real-section.is-expanded .and-st-real-hero__chev {
    transform: rotate(180deg);
}
.and-st-real-hero__toggle-hint {
    display: block;
    margin-top: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
    transition: opacity 0.24s ease;
}
.and-st-real-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
.and-st-real-section.is-expanded .and-st-real-collapse {
    grid-template-rows: 1fr;
}
.and-st-real-collapse__inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.28s ease,
        transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
.and-st-real-section.is-expanded .and-st-real-collapse__inner {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .and-st-real-hero,
    .and-st-real-hero__chev,
    .and-st-real-collapse,
    .and-st-real-collapse__inner {
        transition: none;
    }
    .and-st-real-collapse__inner {
        transform: none;
    }
}
.and-st-real-hero__badge {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.6875rem;
    font-weight: 800;
    flex-shrink: 0;
}
.and-st-real-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 0 14px 12px;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 48%, #f59e0b 100%);
    border-radius: 0 0 18px 18px;
}
#andStRealHeroStats:not(:empty) + .and-st-real-entries {
    margin-top: 10px;
}
.and-st-real-stat {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.and-st-real-stat__label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
.and-st-real-stat__value {
    display: block;
    margin-top: 4px;
    font-size: 0.875rem;
    font-weight: 800;
    color: #fff;
}

.and-st-real-section--placeholder .and-st-real-hero {
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.14);
}
.and-st-real-section--loading .and-st-real-hero {
    opacity: 0.82;
    pointer-events: none;
}
.and-st-real-section--loading .and-st-real-hero__toggle-hint {
    font-style: italic;
}

.and-st-real-entries {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.and-st-real-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.and-st-real-card.is-highlight {
    border-color: rgba(234, 88, 12, 0.45);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.14), 0 10px 28px rgba(234, 88, 12, 0.12);
}
.and-st-real-card__glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #c2410c, #ea580c, #f59e0b);
}
.and-st-real-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 10px;
}
.and-st-real-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(234, 88, 12, 0.1);
    color: #c2410c;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.and-st-real-card__nomor {
    display: block;
    margin-top: 6px;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    word-break: break-word;
}
.and-st-real-card__time {
    display: block;
    margin-top: 4px;
    font-size: 0.6875rem;
    color: #64748b;
}
.and-st-real-card__amount {
    text-align: right;
    flex-shrink: 0;
}
.and-st-real-card__amount span {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}
.and-st-real-card__amount strong {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    font-weight: 800;
    color: #c2410c;
}
.and-st-real-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 12px;
}
.and-st-real-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.95);
    color: #334155;
    font-size: 0.6875rem;
    font-weight: 800;
    text-decoration: none;
}
.and-st-real-action--rab {
    border-color: rgba(255, 90, 0, 0.22);
    background: rgba(255, 90, 0, 0.08);
    color: #c2410c;
}
.and-st-real-card__catatan {
    margin: 0 14px 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
    font-size: 0.75rem;
    line-height: 1.45;
    color: #475569;
}
.and-st-real-card__items {
    list-style: none;
    margin: 0;
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.and-st-real-card__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 247, 237, 0.95);
    border: 1px solid rgba(234, 88, 12, 0.08);
}
.and-st-real-card__item .and-std-asset__thumb {
    width: 40px;
    height: 40px;
    min-width: 40px;
}
.and-st-real-card__item-body strong {
    display: block;
    font-size: 0.75rem;
    color: #0f172a;
}
.and-st-real-card__sku {
    display: block;
    font-size: 0.625rem;
    color: #94a3b8;
}
.and-st-real-card__item-qty {
    margin-top: 4px;
    font-size: 0.6875rem;
    color: #64748b;
}
.and-st-real-card__item-qty em {
    display: block;
    font-style: normal;
    font-size: 0.625rem;
    color: #94a3b8;
}
.and-st-real-card__item-price {
    text-align: right;
}
.and-st-real-card__item-price span {
    display: block;
    font-size: 0.625rem;
    color: #94a3b8;
}
.and-st-real-card__item-price strong {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0f172a;
}

/* RAB detail — riwayat realisasi (modern timeline) */
.and-rab-real-history {
    margin: 12px 0 28px;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.and-rab-real-history__hero {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
}
.and-rab-real-history__hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(5, 150, 105, 0.12));
    color: #059669;
    flex-shrink: 0;
}
.and-rab-real-history__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
}
.and-rab-real-history__sub {
    margin: 4px 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #64748b;
}
.and-rab-real-history__count {
    margin-left: auto;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    font-size: 0.6875rem;
    font-weight: 800;
    flex-shrink: 0;
}

.and-rab-real-timeline {
    position: relative;
    padding-left: 18px;
}
.and-rab-real-timeline::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 5px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #10b981 0%, rgba(16, 185, 129, 0.15) 100%);
}

.and-rab-real-card {
    position: relative;
    margin-bottom: 14px;
}
.and-rab-real-card.is-last {
    margin-bottom: 0;
}
.and-rab-real-card.is-highlight .and-rab-real-card__panel {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.and-rab-real-card__dot {
    position: absolute;
    left: -18px;
    top: 18px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}
.and-rab-real-card__panel {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.95);
}
.and-rab-real-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.and-rab-real-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.and-rab-real-card__id strong {
    display: block;
    margin-top: 6px;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    word-break: break-word;
}
.and-rab-real-card__amount {
    text-align: right;
    flex-shrink: 0;
}
.and-rab-real-card__amount span {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}
.and-rab-real-card__amount strong {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    font-weight: 800;
    color: #047857;
}
.and-rab-real-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
    font-size: 0.6875rem;
    color: #64748b;
}
.and-rab-real-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.and-rab-real-card__meta em {
    font-style: normal;
    font-weight: 700;
    color: #475569;
}
.and-rab-real-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.and-rab-real-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    color: #334155;
    font-size: 0.6875rem;
    font-weight: 800;
    text-decoration: none;
}
.and-rab-real-card__catatan {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
    font-size: 0.75rem;
    line-height: 1.45;
    color: #475569;
}
.and-rab-real-card__items {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.and-rab-real-card__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.05);
}
.and-rab-real-card__thumb {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}
.and-rab-real-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.and-rab-real-card__thumb--empty {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.08));
}
.and-rab-real-card__item-body strong {
    display: block;
    font-size: 0.75rem;
    color: #0f172a;
}
.and-rab-real-card__item-body span {
    display: block;
    margin-top: 2px;
    font-size: 0.625rem;
    color: #94a3b8;
}
.and-rab-real-card__item-price {
    font-size: 0.75rem;
    font-weight: 800;
    color: #0f172a;
}

.and-rab-real-bast {
    padding: 10px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.08), rgba(255, 138, 76, 0.06));
    border: 1px dashed rgba(255, 90, 0, 0.22);
}
.and-rab-real-bast__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    color: #c2410c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.and-rab-real-bast__label em {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.14);
    font-style: normal;
    font-size: 0.625rem;
}
.and-rab-real-bast__chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.and-rab-real-bast__chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 90, 0, 0.18);
    background: #fff;
    color: #9a3412;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.08);
}
.and-rab-real-bast__chip.is-done {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(240, 253, 244, 0.95);
    color: #047857;
}
.and-rab-real-bast__chip-nomor {
    font-size: 0.75rem;
    font-weight: 800;
}
.and-rab-real-bast__chip-meta {
    font-size: 0.625rem;
    font-weight: 700;
    color: #94a3b8;
}

.and-rab-sheet {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.and-rab-sheet[hidden] {
    display: none !important;
}

.and-rab-sheet.is-open {
    pointer-events: auto;
}

.and-rab-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.and-rab-sheet.is-open .and-rab-sheet__backdrop {
    opacity: 1;
}

.and-rab-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.and-rab-sheet.is-open .and-rab-sheet__panel {
    transform: translateY(0);
}

.and-rab-sheet__title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.and-rab-sheet__body {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #475569;
}

.and-rab-sheet__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.and-rab-sheet__textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 12px;
    font: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

.and-rab-sheet__error {
    margin: 8px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
}

.and-rab-sheet__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.and-rab-sheet__btn {
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
}

.and-rab-sheet__btn--ghost {
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
}

.and-rab-sheet__btn--primary {
    background: var(--and-accent);
    color: #fff;
}

body.and-rab-sheet-open {
    overflow: hidden;
}

/* ── RAB realisasi form ── */
.and-main--rreal {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.and-rreal-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.and-rreal-summary {
    margin-bottom: 12px;
}

.and-rreal-meta {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.and-rreal-keperluan {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
}

.and-rreal-keperluan__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.and-rreal-section-hint {
    margin: -6px 0 12px;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
}

.and-rreal-item {
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.and-rreal-item.is-removed {
    display: none;
}

.and-rreal-item__head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    margin-bottom: 12px;
}

.and-rreal-item__thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.and-rreal-item__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
}

.and-rreal-item__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.and-rreal-item__sku {
    margin: 2px 0 0;
    font-size: 0.6875rem;
    color: #64748b;
}

.and-rreal-item__plan {
    margin: 6px 0 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #64748b;
}

.and-rreal-item__remove {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.and-rreal-item__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-rreal-item__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.and-rreal-item__field--total {
    padding-top: 8px;
    border-top: 1px dashed rgba(148, 163, 184, 0.35);
}

.and-rreal-item__label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    flex-shrink: 0;
}

.and-rreal-stepper {
    flex: 1;
    max-width: 220px;
}

.and-rreal-stepper .and-restock-stepper__input {
    font-size: 0.875rem;
    font-weight: 700;
}

.and-rreal-item__subtotal {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f2744;
}

.and-rreal-grand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 90, 0, 0.08);
    border: 1px solid rgba(255, 90, 0, 0.18);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #475569;
}

.and-rreal-grand strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--and-accent);
}

.and-rreal-budget-alert {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.1);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
    color: #b45309;
}

.and-rreal-budget-alert.is-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

.and-rreal-budget-alert[hidden] {
    display: none !important;
}

.and-rreal-history {
    padding: 10px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.and-rreal-history:last-child {
    border-bottom: 0;
}

.and-rreal-history__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.and-rreal-history__top strong {
    font-size: 0.8125rem;
    color: #0f172a;
}

.and-rreal-history__top span {
    font-size: 0.6875rem;
    color: #94a3b8;
    font-weight: 600;
}

.and-rreal-history__sub {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-ra-field--last {
    margin-bottom: 0;
}

/* ── Pengeluaran detail ── */
.and-pgl-summary {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 55%, #3730a3 100%);
}

.and-pgl-meta-dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.and-pgl-meta-dl>div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}

.and-pgl-meta-dl>div:last-child {
    border-bottom: 0;
}

.and-pgl-meta-dl dt {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-pgl-meta-dl dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
    text-align: right;
}

.and-pgl-asset .and-std-asset__aside {
    align-items: flex-end;
    min-width: 72px;
}

.and-pgl-item-note {
    margin: 4px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
    font-style: italic;
}

.and-pgl-no-bukti {
    font-size: 0.75rem;
    color: #94a3b8;
}

.and-pgl-bukti-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 10px;
}

.and-pgl-bukti-btn img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.and-pgl-bukti-fallback {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.05);
    font-size: 1rem;
}

.and-pgl-bukti-more {
    font-size: 0.625rem;
    font-weight: 800;
    color: #64748b;
}

.and-pgl-gallery[hidden] {
    display: none !important;
}

.and-pgl-gallery {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
}

.and-pgl-gallery:not([hidden]) {
    display: flex;
    visibility: visible;
}

.and-pgl-gallery.is-open {
    pointer-events: auto;
}

.and-pgl-gallery__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.and-pgl-gallery.is-open .and-pgl-gallery__backdrop {
    opacity: 1;
}

.and-pgl-gallery__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.and-pgl-gallery.is-open .and-pgl-gallery__panel {
    transform: translateY(0);
}

.and-pgl-gallery__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.and-pgl-gallery__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.and-pgl-gallery__close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 1.5rem;
    line-height: 1;
    color: #475569;
    cursor: pointer;
}

.and-pgl-gallery__body {
    overflow-y: auto;
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

.and-pgl-gallery__fig {
    margin: 0 0 14px;
    text-align: center;
}

.and-pgl-gallery__fig img {
    max-width: 100%;
    max-height: 72vh;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

body.and-pgl-gallery-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

/* ── RAB create (tambah + form) ── */
.and-rab-cart-card {
    padding-bottom: 14px;
}

.and-rab-cart-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    align-items: center;
}

.and-rab-cart-price-row__label {
    grid-column: 1 / -1;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-rab-cart-price-row__input {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    background: #f8fafc;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
}

.and-rab-cart-price-row__input:focus {
    outline: none;
    border-color: rgba(255, 90, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
    background: #fff;
}

.and-rab-cart-price-row__total {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #ea580c;
    white-space: nowrap;
    text-align: right;
}

body.and-rab-cart-open {
    overflow: hidden;
}

.and-main--rab-form {
    padding-bottom: 108px;
}

.and-rab-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
}

.and-rab-form-header__back,
.and-rab-form-header__reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.and-rab-form-header__reset {
    color: #ea580c;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 237, 0.9));
    border: 1px solid rgba(255, 90, 0, 0.16);
    box-shadow: 0 8px 20px -16px rgba(234, 88, 12, 0.45);
}

.and-rab-form-header__reset:active {
    transform: scale(0.96);
}

.and-rab-form-header__text {
    min-width: 0;
    flex: 1;
}

.and-rab-form-header__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
}

.and-rab-form-header__sub {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

.and-rab-form-scroll {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 4px 16px 32px;
}

.and-rab-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.and-rab-form-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.and-rab-form-card--summary {
    background: linear-gradient(145deg, rgba(255, 90, 0, 0.08), rgba(255, 255, 255, 0.96));
    border-color: rgba(255, 90, 0, 0.12);
}

.and-rab-form-card--totals {
    background: linear-gradient(180deg, #fff, #fff8f3);
}

.and-rab-form-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.and-rab-form-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
}

.and-rab-form-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ea580c;
    background: linear-gradient(145deg, rgba(255, 90, 0, 0.13), rgba(20, 184, 166, 0.08));
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.12);
}

.and-rab-form-card__head .and-rab-form-card__title {
    margin-bottom: 0;
}

.and-rab-form-card__chip {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ea580c;
    background: rgba(255, 90, 0, 0.1);
    padding: 4px 10px;
    border-radius: 999px;
}

.and-rab-form-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-rab-form-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.and-rab-form-summary-item__thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: #f1f5f9;
    flex-shrink: 0;
}

.and-rab-form-summary-item__body {
    min-width: 0;
    flex: 1;
}

.and-rab-form-summary-item__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-rab-form-summary-item__meta {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.and-rab-form-summary-empty {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
}

.and-rab-form-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed rgba(255, 90, 0, 0.35);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: #ea580c;
    font-size: 0.875rem;
    font-weight: 700;
}

.and-rab-form-preview {
    margin: 6px 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.and-rab-form-preview__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    color: #64748b;
}

.and-rab-form-preview__row+.and-rab-form-preview__row {
    margin-top: 10px;
}

.and-rab-form-preview__row strong {
    color: #0f172a;
    font-weight: 700;
    text-align: right;
}

.and-rab-form .and-ra-field {
    margin-bottom: 16px;
}

.and-rab-form .and-ra-field:last-child {
    margin-bottom: 0;
}

.and-rab-form .and-ra-field-row {
    gap: 14px;
    margin-bottom: 16px;
}

.and-rab-form .and-ra-field-row .and-ra-field {
    margin-bottom: 0;
}

.and-rab-form .and-ra-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.and-rab-field-icon {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ea580c;
    background: rgba(255, 90, 0, 0.09);
}

.and-rab-form .and-ra-check-row {
    margin-bottom: 16px;
    border: 1px solid rgba(255, 90, 0, 0.12);
    background: linear-gradient(145deg, rgba(255, 90, 0, 0.08), rgba(255, 255, 255, 0.9));
}

.and-rab-form .and-ra-input,
.and-rab-form .and-ra-textarea,
.and-rab-form .and-ra-picker-btn {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(145deg, #fff, #f8fafc);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.and-rab-form .and-ra-input:focus,
.and-rab-form .and-ra-textarea:focus,
.and-rab-form .and-ra-picker-btn:focus-visible {
    border-color: rgba(255, 90, 0, 0.42);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.09);
    outline: none;
}

.and-rab-form .and-ra-form-error {
    margin-top: 16px;
}

.and-rab-form-money {
    font-weight: 700;
    text-align: right;
}

.and-rab-form-totals {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.and-rab-form-totals__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.875rem;
    color: #475569;
}

.and-rab-form-totals__row strong {
    color: #0f172a;
    font-weight: 700;
}

.and-rab-form-totals__row--grand {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
    font-size: 0.9375rem;
    color: #0f172a;
}

.and-rab-form-totals__row--grand strong {
    color: #ea580c;
    font-size: 1.0625rem;
}

.and-rab-form-bar {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

.and-ra-picker-list--plain {
    padding-top: 8px;
}

/* Shared form top bar */
.and-form-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92));
    color: #fff;
    box-shadow: 0 20px 40px -26px rgba(15, 23, 42, 0.7);
    overflow: hidden;
}

.and-form-hero::after {
    content: '';
    position: absolute;
    inset: auto -20% -54% 18%;
    height: 110px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(-8deg);
    pointer-events: none;
}

.and-form-hero__copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
}

.and-form-hero__eyebrow {
    display: inline-flex;
    margin-bottom: 4px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(254, 215, 170, 0.92);
}

.and-form-hero .and-restock-header__title,
.and-form-hero .and-rab-form-header__title,
.and-form-hero .and-lpr-form-header__title,
.and-form-hero .and-bf-header__title,
.and-form-hero .and-item-detail-header__title,
.and-form-hero .and-std-header__title,
.and-form-hero .and-sta-header__nomor,
.and-form-hero .and-pg-topbar__title,
.and-form-hero .and-pe-header__title,
.and-form-hero .and-data-hero__title {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.and-form-hero__copy p {
    margin: 5px 0 0;
    max-width: 300px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(255, 247, 237, 0.78);
}

.and-form-hero .and-restock-header__back,
.and-form-hero .and-data-hero__back,
.and-form-hero .and-rab-form-header__back,
.and-form-hero .and-lpr-form-header__back,
.and-form-hero .and-bf-header__back,
.and-form-hero .and-item-detail-header__back,
.and-form-hero .and-std-header__back,
.and-form-hero .and-std-header__print,
.and-form-hero .and-std-header__acc,
.and-form-hero .and-sta-header__back,
.and-form-hero .and-pg-topbar__back,
.and-form-hero .and-pe-header__back,
.and-form-hero__action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: none;
    flex-shrink: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.and-form-hero .and-rab-form-header__sub {
    display: inline-flex;
    max-width: 100%;
    margin-top: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 247, 237, 0.84);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-form-hero .and-bf-header__meta,
.and-form-hero .and-item-detail-header__sku,
.and-form-hero .and-sta-header__meta,
.and-form-hero .and-pe-header__sub {
    margin: 5px 0 0;
    color: rgba(255, 247, 237, 0.78);
    font-size: 0.75rem;
    line-height: 1.45;
}

.and-form-hero .and-bf-header__left,
.and-form-hero .and-sta-header__bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.and-form-hero .and-bf-header__actions,
.and-form-hero .and-item-detail-header__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 0;
    margin: 0;
    align-self: center;
}

.and-form-hero .and-bf-header__back,
.and-form-hero .and-std-header__back,
.and-form-hero .and-std-header__print,
.and-form-hero .and-std-header__acc,
.and-form-hero .and-form-hero__action {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.and-form-hero .and-bf-btn,
.and-form-hero .and-item-detail-header__admin-btn {
    min-height: 38px;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: none;
}

.and-form-hero .and-bf-btn--primary,
.and-form-hero .and-item-detail-header__admin-btn--primary {
    background: rgba(255, 255, 255, 0.22);
}

.and-form-hero .and-item-detail-header__admin-btn--danger {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(254, 202, 202, 0.24);
}

.and-form-hero__action {
    color: #fed7aa;
}

.and-form-hero__action:active,
.and-form-hero .and-restock-header__back:active,
.and-form-hero .and-data-hero__back:active,
.and-form-hero .and-rab-form-header__back:active,
.and-form-hero .and-lpr-form-header__back:active,
.and-form-hero .and-bf-header__back:active,
.and-form-hero .and-item-detail-header__back:active,
.and-form-hero .and-std-header__back:active,
.and-form-hero .and-std-header__print:active,
.and-form-hero .and-std-header__acc:active,
.and-form-hero .and-sta-header__back:active,
.and-form-hero .and-pg-topbar__back:active,
.and-form-hero .and-pe-header__back:active {
    transform: scale(0.96);
}

.and-std-header.and-form-hero,
.and-sta-header.and-form-hero {
    position: relative;
    top: auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92));
    color: #fff;
    box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.45);
    overflow: visible;
    pointer-events: auto;
    flex-shrink: 0;
}

.and-std-header.and-form-hero::after,
.and-sta-header.and-form-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 70% 80% at 88% 120%, rgba(255, 255, 255, 0.1) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.and-std-header.and-form-hero .and-std-header__bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.and-std-header.and-form-hero .and-std-header__back,
.and-std-header.and-form-hero .and-std-header__print,
.and-std-header.and-form-hero .and-std-header__acc {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.and-std-header.and-form-hero .and-std-header__titles {
    flex: 1;
    min-width: 0;
}

.and-std-header.and-form-hero .and-std-header__title {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.and-std-header.and-form-hero .and-std-header__status {
    display: inline-flex;
    max-width: 100%;
    margin-top: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 247, 237, 0.84);
    font-size: 0.6875rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep dark detail top bars readable across document pages. */
.and-std-header.and-form-hero .and-std-header__bar,
.and-form-hero .and-sta-header__bar {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.and-std-header.and-form-hero .and-std-header__bar {
    padding: 0;
}

.and-form-hero .and-sta-header__bar {
    padding: 0;
    width: 100%;
}

.and-std-header.and-form-hero .and-std-header__title,
.and-form-hero .and-sta-header__nomor {
    color: #fff;
    text-shadow: 0 1px 12px rgba(15, 23, 42, 0.24);
}

.and-form-hero .and-sta-header__eyebrow {
    color: rgba(254, 215, 170, 0.94);
}

.and-form-hero .and-sta-header__meta {
    color: rgba(255, 247, 237, 0.8);
}

.and-std-header.and-form-hero .and-std-header__back,
.and-std-header.and-form-hero .and-std-header__print,
.and-std-header.and-form-hero .and-std-header__acc,
.and-form-hero .and-sta-header__back,
.and-form-hero .and-sta-header__shield {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: none;
}

.and-std-header.and-form-hero .and-std-header__acc {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(187, 247, 208, 0.24);
}

.and-std-header.and-form-hero .and-std-header__back svg,
.and-std-header.and-form-hero .and-std-header__print svg,
.and-std-header.and-form-hero .and-std-header__acc svg,
.and-form-hero .and-sta-header__back svg,
.and-form-hero .and-sta-header__shield svg,
.and-form-hero__action svg {
    stroke: currentColor;
}

.and-std-header.and-form-hero .and-std-header__status {
    background: rgba(255, 255, 255, 0.13);
    color: rgba(255, 247, 237, 0.88);
}

.and-form-hero .and-std-header__titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex-wrap: nowrap;
}

.and-form-hero .and-sta-header__center {
    text-align: left;
}

.and-form-hero .and-sta-header__nomor {
    display: block;
    text-align: left;
}

/* Data list pages — shared hero top bar (serah terima, peminjaman, restock, dll.) */
.and-data-hero.and-form-hero,
.and-list-hero.and-form-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
}

.and-data-hero__head {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.and-data-hero__nav {
    flex-shrink: 0;
}

.and-data-hero__copy {
    flex: 1;
    min-width: 0;
}

.and-data-hero__title,
.and-list-hero__title {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.and-data-hero__title--with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.and-data-hero__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
    color: #fff;
}

.and-data-hero__title-icon svg {
    display: block;
}

.and-data-hero__title-text {
    min-width: 0;
}

.and-data-hero__sub {
    margin: 4px 0 0;
    max-width: 100%;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(255, 247, 237, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-data-hero__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.and-data-hero__action {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.and-data-hero__action svg {
    display: block;
    pointer-events: none;
}

.and-data-hero__actions .and-data-hero__action {
    width: 40px;
    height: 40px;
}

.and-data-hero__action--accent {
    background: linear-gradient(145deg, #ff7a1a 0%, #ff5a00 100%) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 8px 18px -8px rgba(255, 90, 0, 0.55);
    color: #fff !important;
}

.and-data-hero__action--accent:active {
    transform: scale(0.94);
}

.and-data-hero__text-btn {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 247, 237, 0.92);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.and-data-hero__text-btn:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.18);
}

.and-data-hero__search .and-inbox-search-wrap,
.and-data-hero__search .and-dash-search--vision {
    width: 100%;
}

.and-data-hero__search .and-dash-search--vision {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 46px;
    padding: 0 5px 0 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.and-data-hero__search .and-dash-search--vision .and-dash-search__input,
.and-data-hero__search .and-dash-search--has-voice .and-dash-search__input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 12px 10px 12px 44px;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    color: #fff;
    -webkit-appearance: none;
    appearance: none;
}

.and-data-hero__search .and-dash-search--vision .and-dash-search__input:focus,
.and-data-hero__search .and-dash-search--smart.and-dash-search--vision .and-dash-search__input:focus,
.and-data-hero__search .and-dash-search--has-voice .and-dash-search__input:focus {
    outline: none;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.and-data-hero__search .and-dash-search--vision .and-dash-search__input::placeholder,
.and-data-hero__search .and-dash-search--has-voice .and-dash-search__input::placeholder {
    color: rgba(255, 247, 237, 0.68);
}

.and-data-hero__search .and-dash-search--vision .and-dash-search__icon,
.and-data-hero__search .and-dash-search--has-voice .and-dash-search__icon,
.and-data-hero__search .and-dash-search--smart .and-dash-search__icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 247, 237, 0.72);
    z-index: 1;
    pointer-events: none;
}

.and-data-hero__search .and-dash-search--vision .and-dash-search__search-spinner,
.and-data-hero__search .and-dash-search--has-voice .and-dash-search__search-spinner {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}

.and-data-hero__search .and-dash-search--vision .and-dash-search__vision-btn,
.and-data-hero__search .and-dash-search--vision .and-dash-search__vision-btn--inline {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 2px 0 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff8a2a 0%, #ff5a00 100%);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(255, 90, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.and-data-hero__search .and-dash-search--vision .and-dash-search__vision-btn::before,
.and-data-hero__search .and-dash-search--vision .and-dash-search__vision-btn--inline::before {
    display: none;
}

.and-data-hero__search .and-dash-search--vision .and-dash-search__vision-btn svg,
.and-data-hero__search .and-dash-search--vision .and-dash-search__vision-btn--inline svg {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.and-data-hero__search .and-dash-search--vision .and-dash-search__vision-btn:active,
.and-data-hero__search .and-dash-search--vision .and-dash-search__vision-btn--inline:active {
    transform: scale(0.94);
    box-shadow: 0 4px 10px -4px rgba(255, 90, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Voice search inside data-hero — satu shell gelas, mic seukuran kamera */
.and-data-hero__search .and-dash-search--vision.and-dash-search--has-voice {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
}

.and-data-hero__search .and-dash-search--has-voice .and-dash-search__field {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 4px 0 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.and-data-hero__search .and-dash-search--has-voice .and-dash-search__field.is-voice-active {
    border-color: rgba(74, 222, 128, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 2px rgba(74, 222, 128, 0.16);
}

.and-data-hero__search .and-dash-search--has-voice .and-dash-search__field {
    position: relative;
}

.and-data-hero__search .and-voice-search__slot {
    width: 42px;
    height: 42px;
    margin: 0 2px 0 0;
}

.and-data-hero__search .and-voice-search__slot::before {
    background: rgba(255, 255, 255, 0.14);
}

.and-data-hero__search .and-voice-search__btn {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.and-data-hero__search .and-voice-search__btn svg {
    width: 20px;
    height: 20px;
}

.and-data-hero__search .and-voice-search__btn.is-active {
    background: linear-gradient(145deg, #34d399 0%, #16a34a 100%);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.and-data-hero__search .and-dash-search--has-voice .and-dash-search__field .and-dash-search__vision-btn,
.and-data-hero__search .and-dash-search--has-voice .and-dash-search__field .and-dash-search__vision-btn--inline {
    width: 38px;
    height: 38px;
    margin: 0 2px 0 0;
}

.and-data-hero__search .and-dash-search--has-voice {
    gap: 10px;
}

.and-data-hero__search .and-voice-search__strip {
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 8px 12px;
    background: rgba(22, 163, 74, 0.16);
    border: 1px solid rgba(74, 222, 128, 0.24);
    color: rgba(220, 252, 231, 0.96);
}

.and-data-hero__search .and-voice-search__strip.is-error {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(248, 113, 113, 0.28);
    color: rgba(254, 226, 226, 0.96);
}

.and-data-hero__search .and-voice-search__dot {
    background: #4ade80;
}

.and-data-hero__search .and-voice-search__strip.is-error .and-voice-search__dot {
    background: #f87171;
}

.and-main--barang .and-data-hero:has(.is-voice-active),
.and-main--karyawan .and-data-hero:has(.and-dash-search__field.is-voice-active),
.and-main--karyawan .and-data-hero:has(.and-voice-search__strip:not([hidden])) {
    margin-bottom: 14px;
}

.and-data-hero__search .and-inbox-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.and-data-hero__search .and-inbox-search {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 0.9375rem;
}

.and-data-hero__search .and-inbox-search::placeholder {
    color: rgba(255, 247, 237, 0.68);
}

.and-data-hero__search .and-inbox-search:focus {
    outline: none;
}

.and-data-hero__search .and-inbox-search-icon {
    color: rgba(255, 247, 237, 0.72);
    flex-shrink: 0;
}

.and-data-hero__search .and-inbox-search-clear {
    flex-shrink: 0;
    color: rgba(255, 247, 237, 0.78);
}

.and-data-hero__action .and-inbox-folder-btn__dot {
    position: absolute;
    top: 8px;
    right: 8px;
}

.and-data-hero.and-form-hero--compact {
    margin-bottom: 12px;
}

.and-layout--log .and-data-hero {
    margin: 12px 12px 10px;
}

.and-layout--fm .and-data-hero {
    margin: 0 0 10px;
    width: 100%;
    box-sizing: border-box;
}

.and-layout--inbox .and-data-hero,
.and-layout--notif .and-data-hero {
    margin: 0 0 14px;
}

.and-main--favorit .and-data-hero,
.and-main--barang .and-data-hero {
    margin-bottom: 14px;
}

.and-data-hero__search {
    position: relative;
    z-index: 1;
    width: 100%;
}

.and-data-hero .and-dash-burger,
.and-list-hero .and-dash-burger {
    width: 46px;
    height: 46px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: none;
}

.and-data-hero__search .and-dash-search__input,
.and-list-hero .and-dash-search__input {
    min-height: 46px;
    border-radius: 16px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.and-data-hero__search .and-dash-search__input:focus,
.and-list-hero .and-dash-search__input:focus {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.16);
    outline: none;
}

.and-data-hero__search .and-dash-search__input::placeholder,
.and-list-hero .and-dash-search__input::placeholder {
    color: rgba(255, 247, 237, 0.68);
}

.and-data-hero__search .and-dash-search__icon,
.and-data-hero__search.and-dash-search .and-dash-search__icon,
.and-list-hero .and-dash-search__icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 247, 237, 0.72);
    pointer-events: none;
}

.and-data-hero__search.and-dash-search {
    position: relative;
}

.and-data-hero__search.and-dash-search .and-dash-search__input {
    padding-left: 44px;
}

.and-list-hero__tools {
    margin-bottom: 0;
}

.and-list-hero .and-barang-top {
    margin-bottom: 0;
}

.and-list-hero .and-barang-fab {
    box-shadow: 0 8px 18px -8px rgba(255, 90, 0, 0.55);
}

@media (max-width: 380px) {
    .and-data-hero__sub {
        display: none;
    }

    .and-data-hero__actions .and-data-hero__action {
        width: 38px;
        height: 38px;
    }
}

/* ============================================================
   Inbox
   ============================================================ */

.and-main--inbox {
    position: relative;
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
    box-sizing: border-box;
    min-height: 100%;
}

@media (max-width: 767px) {
    .and-layout--inbox .and-main--inbox.and-barang-chips-open > .and-data-hero {
        margin-bottom: 0;
        border-radius: 24px 24px 0 0;
    }

    .and-layout--inbox .and-main--inbox > .and-desktop-filter-sidebar {
        gap: 0;
        margin-bottom: 14px;
    }

    .and-layout--inbox .and-main--inbox > .and-desktop-filter-sidebar > .and-barang-chips--hero {
        margin: 0;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 20px 40px -26px rgba(15, 23, 42, 0.7);
    }

    .and-layout--inbox .and-main--inbox > .and-desktop-filter-sidebar > .and-barang-chips--hero .and-barang-chips {
        margin-bottom: 0;
    }
}

.and-inbox-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 1.5rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    margin-bottom: 14px;
}

.and-inbox-top .and-dash-burger {
    flex-shrink: 0;
}

.and-inbox-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0 14px;
    height: 42px;
}

.and-inbox-search-icon {
    color: #94a3b8;
    flex-shrink: 0;
}

.and-inbox-search {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    color: #0f172a;
    outline: none;
}

.and-inbox-search::placeholder {
    color: #94a3b8;
}

.and-inbox-search-clear {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-inbox-folder-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-inbox-folder-btn__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ea580c;
    border: 2px solid #f1f5f9;
}

.and-inbox-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
    scrollbar-width: none;
}

.and-inbox-tabs::-webkit-scrollbar {
    display: none;
}

.and-inbox-tab {
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition:
        color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.14s ease;
}

.and-inbox-tab.is-active {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.28);
}

.and-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.and-inbox-loading {
    text-align: center;
    padding: 32px 16px;
    color: #94a3b8;
    font-size: 0.875rem;
}

.and-inbox-empty {
    text-align: center;
    padding: 40px 16px;
    color: #94a3b8;
    font-size: 0.875rem;
}

.and-inbox-empty--error {
    color: #e11d48;
}

.and-inbox-card {
    position: relative;
    display: flex;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.94);
    padding: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.and-inbox-card.is-unread {
    border-color: rgba(234, 88, 12, 0.15);
}

.and-inbox-card--sk {
    pointer-events: none;
}

.and-inbox-card__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #f97316, #ea580c);
    border-radius: 4px 0 0 4px;
}

.and-inbox-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.and-inbox-avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 0.875rem;
}

.and-inbox-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-inbox-card__body {
    flex: 1;
    min-width: 0;
}

.and-inbox-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.and-inbox-card__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.and-inbox-card__role {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-top: 2px;
}

.and-inbox-card__time {
    font-size: 0.6875rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

.and-inbox-card__subject {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-inbox-card__preview {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}

.and-inbox-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.and-inbox-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
    background: #f1f5f9;
}

.and-inbox-card__tag--priority {
    color: #ea580c;
    background: rgba(234, 88, 12, 0.1);
}

.and-inbox-fab {
    position: fixed;
    right: max(var(--and-space-md), calc((100vw - min(var(--and-content-max), 100vw)) / 2 + var(--and-space-md)));
    bottom: calc(var(--and-bottom-nav-h, 72px) + 20px);
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    z-index: 40;
}

.and-inbox-fab--portaled {
    z-index: 130;
}

.and-inbox-panel[hidden] {
    display: none !important;
}

.and-inbox-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 1200;
    width: min(var(--and-content-max), 100%);
    background: #eef1f6;
    display: flex;
    flex-direction: column;
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.24s ease;
    pointer-events: none;
    visibility: hidden;
}

.and-inbox-panel.is-open {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.and-inbox-panel.is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: #eef1f6;
    z-index: -1;
    pointer-events: none;
}

.and-inbox-panel__header.and-form-hero {
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
    padding-top: calc(14px + var(--and-safe-top, 0px));
}

.and-inbox-panel__header.and-form-hero .and-inbox-hdr-btn.is-starred {
    color: #fbbf24;
}

.and-inbox-panel__header.and-form-hero .and-inbox-hdr-btn--danger {
    color: #fecaca;
}

.and-inbox-panel__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.and-inbox-panel__header--compose {
    border-radius: 0;
}

.and-inbox-panel__title {
    flex: 1;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f172a;
    text-align: center;
}

.and-inbox-panel__actions {
    display: flex;
    gap: 4px;
}

.and-inbox-hdr-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-inbox-hdr-btn.is-starred {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

.and-inbox-hdr-btn--danger {
    color: #e11d48;
}

.and-inbox-hdr-spacer {
    width: 40px;
    flex-shrink: 0;
}

.and-inbox-thread-head {
    padding: 16px 20px 8px;
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.and-inbox-thread-head__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.and-inbox-thread-head__meta {
    flex: 1;
    min-width: 0;
}

.and-inbox-thread-head__meta strong {
    display: block;
    font-size: 1rem;
    color: #0f172a;
}

.and-inbox-thread-head__to {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-top: 4px;
}

.and-inbox-thread-head__time {
    text-align: right;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.and-inbox-thread-head__subject {
    margin: 14px 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.and-inbox-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 100px;
    background: #fff;
}

.and-inbox-msg {
    margin-bottom: 18px;
}

.and-inbox-msg.is-mine .and-inbox-msg__bubble {
    background: #f1f5f9;
    margin-left: auto;
}

.and-inbox-msg__meta {
    font-size: 0.6875rem;
    color: #94a3b8;
    margin: 0 0 6px;
}

.and-inbox-msg__bubble {
    max-width: 92%;
    padding: 12px 14px;
    border-radius: 1rem;
    background: #f8fafc;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.and-inbox-att-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.and-inbox-att {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
    max-width: 140px;
    padding: 10px 12px;
    border-radius: 0.875rem;
    background: #f1f5f9;
    text-decoration: none;
    color: #0f172a;
}

.and-inbox-att__icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #cbd5e1;
}

.and-inbox-att.is-pdf .and-inbox-att__icon {
    background: #fecaca;
}

.and-inbox-att.is-img .and-inbox-att__icon {
    background: #bfdbfe;
}

.and-inbox-att__name {
    font-size: 0.75rem;
    font-weight: 600;
}

.and-inbox-att__size {
    font-size: 0.6875rem;
    color: #94a3b8;
}

.and-inbox-reply-dock {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.and-inbox-reply-trigger {
    flex: 1;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    padding: 12px 16px;
    text-align: left;
}

.and-inbox-reply-trigger__text {
    font-size: 0.875rem;
    color: #0f172a;
}

.and-inbox-reply-trigger__text.is-placeholder {
    color: #94a3b8;
}

.and-inbox-reply-attach {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-inbox-reply-modal[hidden] {
    display: none !important;
}

.and-inbox-reply-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.and-inbox-reply-modal.is-open {
    pointer-events: auto;
}

.and-inbox-reply-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.and-inbox-reply-modal.is-open .and-inbox-reply-modal__backdrop {
    opacity: 1;
}

.and-inbox-reply-modal__sheet {
    position: relative;
    width: 100%;
    max-width: var(--and-content-max);
    max-height: 88vh;
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    transform: translateY(100%);
    transition: transform 0.24s ease;
    overflow: hidden;
}

.and-inbox-reply-modal.is-open .and-inbox-reply-modal__sheet {
    transform: translateY(0);
}

.and-inbox-reply-modal__header.and-form-hero {
    margin: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    flex-shrink: 0;
}

.and-inbox-reply-modal__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.and-inbox-reply-modal__heading {
    flex: 1;
    min-width: 0;
}

.and-inbox-reply-modal__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
}

.and-inbox-reply-modal__subtitle {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

.and-inbox-reply-modal__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.and-inbox-send-btn {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 18px;
    flex-shrink: 0;
}

.and-inbox-send-btn--hero {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.and-inbox-send-btn--sm {
    padding: 8px 14px;
}

.and-inbox-send-btn--full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    margin-top: 8px;
    background: #1e293b;
    font-size: 0.8125rem;
}

.and-inbox-compose {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: #fff;
}

.and-inbox-compose__section {
    margin-bottom: 18px;
}

.and-inbox-compose__section--grow {
    flex: 1;
}

.and-inbox-compose__label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
}

.and-inbox-compose__search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border-radius: 1rem;
    padding: 0 12px;
    height: 48px;
}

.and-inbox-compose__search-wrap svg {
    color: #94a3b8;
    flex-shrink: 0;
}

.and-inbox-compose__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 0.9375rem;
    color: #0f172a;
    outline: none;
    height: 48px;
}

.and-inbox-compose__add {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.08);
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-inbox-textarea {
    width: 100%;
    border: 0;
    border-radius: 1rem;
    background: #f1f5f9;
    padding: 14px 16px;
    font-size: 0.9375rem;
    color: #0f172a;
    resize: vertical;
    min-height: 160px;
    outline: none;
    font-family: inherit;
    line-height: 1.5;
}

.and-inbox-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.and-inbox-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(234, 88, 12, 0.1);
    color: #ea580c;
    font-size: 0.8125rem;
    font-weight: 600;
}

.and-inbox-tag button {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.and-inbox-user-picker,
.and-inbox-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.and-inbox-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    border-radius: 0.875rem;
    background: #f8fafc;
    padding: 10px 12px;
    text-align: left;
}

.and-inbox-user-item__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.and-inbox-user-item__text strong {
    font-size: 0.875rem;
    color: #0f172a;
}

.and-inbox-user-item__text span {
    font-size: 0.75rem;
    color: #94a3b8;
}

.and-inbox-attach-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.and-inbox-attach-add {
    width: 88px;
    height: 88px;
    border: 2px dashed #cbd5e1;
    border-radius: 1rem;
    background: transparent;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.and-inbox-compose-files {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.and-inbox-compose-file {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 88px;
    padding: 10px;
    border-radius: 1rem;
    background: #f1f5f9;
}

.and-inbox-compose-file__icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #bfdbfe;
}

.and-inbox-compose-file.is-img .and-inbox-compose-file__icon {
    background: #bfdbfe;
}

.and-inbox-compose-file__name,
.and-inbox-compose-file__size {
    font-size: 0.6875rem;
    color: #64748b;
}

.and-inbox-compose__hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 8px 0 0;
}

.and-inbox-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.and-inbox-file-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 0.75rem;
    background: #f1f5f9;
    font-size: 0.8125rem;
}

.and-inbox-file-chip em {
    font-style: normal;
    color: #94a3b8;
    font-size: 0.75rem;
}

.and-inbox-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.and-inbox-contacts-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px;
    background: #f1f5f9;
    border-radius: 1rem;
    padding: 0 14px;
    height: 44px;
}

.and-inbox-contacts-search-wrap svg {
    color: #94a3b8;
}

.and-inbox-contacts-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 24px;
    max-height: none;
}

.and-inbox-folder-sheet[hidden] {
    display: none !important;
}

.and-inbox-folder-sheet {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.and-inbox-folder-sheet.is-open {
    pointer-events: auto;
}

.and-inbox-folder-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.and-inbox-folder-sheet.is-open .and-inbox-folder-sheet__backdrop {
    opacity: 1;
}

.and-inbox-folder-sheet__panel {
    position: relative;
    width: 100%;
    max-width: var(--and-content-max);
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    transform: translateY(100%);
    transition: transform 0.24s ease;
    overflow: hidden;
}

.and-inbox-folder-sheet.is-open .and-inbox-folder-sheet__panel {
    transform: translateY(0);
}

.and-inbox-folder-sheet__header.and-form-hero {
    margin: 0;
    border-radius: 1.5rem 1.5rem 0 0;
}

.and-inbox-folder-sheet__body {
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.and-inbox-folder-sheet__title {
    margin: 0 0 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-inbox-folder-sheet__item {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0.875rem;
    background: #f8fafc;
    padding: 14px 16px;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
}

.and-prof-toolbar__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.and-inbox-panel-open,
body.and-inbox-overlay-open {
    overflow: hidden;
}

body.and-inbox-panel-open .and-bottom-nav,
body.and-inbox-overlay-open .and-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

body.and-inbox-overlay-open .and-inbox-fab {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   Log Aktivitas — Terminal UI (fullscreen)
   ============================================================ */

.and-body--log {
    background: #0c0c0c;
}

.and-body--log .and-spa-outlet-wrap,
.and-body--log .and-spa-outlet {
    background: #0c0c0c;
    min-height: 100svh;
    min-height: 100dvh;
    flex: 1;
}

.and-body--log .and-bottom-nav {
    display: none !important;
}

.and-layout--log {
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #0c0c0c;
    z-index: 1;
}

.and-layout--log::before {
    display: none;
}

.and-layout--log .and-main.and-log {
    padding: 0;
    min-height: 100%;
    flex: 1;
}

.and-log-term {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    background: #0c0c0c;
    border: none;
    box-shadow: none;
    font-family: Consolas, 'Courier New', ui-monospace, monospace;
}

.and-log-term__titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    color: #d4d4d4;
    font-size: 0.6875rem;
    flex-shrink: 0;
}

.and-log-term__titlebar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.and-log-term__dots {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c42b1c;
    box-shadow: 14px 0 0 #d8a32e, 28px 0 0 #2d9f4e;
    flex-shrink: 0;
    margin-right: 22px;
}

.and-log-term__titlebar-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #e8e8e8;
}

.and-log-term__titlebar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.and-log-term__titlebar-actions .and-dash-burger {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #9cdcfe;
    border: 1px solid #333;
    border-radius: 6px;
    background: #1e1e1e;
}

.and-log-term__subtitle {
    padding: 4px 12px 6px;
    font-size: 0.625rem;
    color: #6a9955;
    background: #141414;
    border-bottom: 1px solid #2a2a2a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.and-log-term__tool-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #333;
    border-radius: 6px;
    background: #1e1e1e;
    color: #9cdcfe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-log-term__search,
.and-log-term__filter {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    background: #101010;
    border-bottom: 1px solid #2a2a2a;
}

.and-log-term__search-input,
.and-log-term__filter-select {
    flex: 1;
    border: 1px solid #333;
    border-radius: 4px;
    background: #0c0c0c;
    color: #d4d4d4;
    font-family: inherit;
    font-size: 0.8125rem;
    padding: 8px 10px;
    outline: none;
}

.and-log-term__filter-apply {
    border: 1px solid #333;
    border-radius: 4px;
    background: #264f78;
    color: #fff;
    font-family: inherit;
    font-size: 0.75rem;
    padding: 8px 12px;
    white-space: nowrap;
}

.and-log-term__meta {
    padding: 6px 12px;
    font-size: 0.6875rem;
    color: #6a9955;
    background: #0a0a0a;
    border-bottom: 1px solid #222;
}

.and-log-term__body {
    flex: 1;
    margin: 0;
    padding: 12px;
    overflow: auto;
    background: #0c0c0c;
    color: #d4d4d4;
    font-size: 0.75rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
}

.and-log-entry {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 14px;
    font: inherit;
    color: inherit;
    cursor: default;
}

.and-log-entry.is-clickable {
    cursor: pointer;
}

.and-log-entry.is-clickable:hover .and-log-line--head {
    text-decoration: underline;
}

.and-log-line {
    display: block;
}

.and-log-line--system {
    color: #6a9955;
}

.and-log-line--alert {
    color: #f44747;
}

.and-log-line--head {
    margin-bottom: 2px;
}

.and-log-line--detail {
    color: #9cdcfe;
    padding-left: 2px;
}

.and-log-ts {
    color: #4fc1ff;
}

.and-log-level {
    font-weight: 700;
}

.and-log-level--info {
    color: #6a9955;
}

.and-log-level--alert {
    color: #f44747;
}

.and-log-event {
    color: #dcdcaa;
}

.and-log-entry.is-alert .and-log-line--detail {
    color: #f44747;
}

.and-log-term__statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #001a33;
    border-top: 1px solid #264f78;
    font-size: 0.625rem;
    color: #9cdcfe;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.and-log-term__keys {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.and-log-term__live {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6a9955;
    font-weight: 700;
}

.and-log-term__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2d9f4e;
    box-shadow: 0 0 8px #2d9f4e;
    animation: and-log-pulse 1.8s ease-in-out infinite;
}

@keyframes and-log-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.and-log-kar-sheet {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.and-log-kar-sheet.is-open {
    pointer-events: auto;
}

.and-log-kar-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.and-log-kar-sheet.is-open .and-log-kar-sheet__backdrop {
    opacity: 1;
}

.and-log-kar-sheet__panel {
    position: relative;
    width: 100%;
    max-height: 82vh;
    background: #fff;
    border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(100%);
    transition: transform 0.24s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.and-log-kar-sheet.is-open .and-log-kar-sheet__panel {
    transform: translateY(0);
}

.and-log-kar-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.and-log-kar-sheet__head h3 {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
}

.and-log-kar-sheet__close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
}

.and-log-kar-sheet__body {
    overflow-y: auto;
    padding: 16px;
}

.and-log-kar-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.and-log-kar-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    overflow: hidden;
}

.and-log-kar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-log-kar-hero strong {
    display: block;
    color: #0f172a;
}

.and-log-kar-hero span {
    font-size: 0.8125rem;
    color: #64748b;
}

.and-log-kar-dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px 12px;
    margin: 0;
    font-size: 0.875rem;
}

.and-log-kar-dl dt {
    color: #94a3b8;
    font-weight: 600;
}

.and-log-kar-dl dd {
    margin: 0;
    color: #0f172a;
}

.and-log-kar-loading,
.and-log-kar-error {
    text-align: center;
    padding: 24px;
    color: #64748b;
}

.and-log-kar-error {
    color: #e11d48;
}

body.and-log-sheet-open {
    overflow: hidden;
}

body.and-log-sheet-open .and-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================================================
   File Manager — Kelola Berkas
   ============================================================ */

.and-layout--fm {
    min-height: 100%;
    padding-bottom: 0;
}

.and-fm {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px var(--and-space-md) calc(var(--and-nav-total) + 10px);
    min-height: 100%;
    box-sizing: border-box;
}

.and-fm-home {
    animation: and-fm-home-in 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.and-fm-home[aria-hidden="true"] {
    opacity: 0;
    transform: scale(0.985);
    pointer-events: none;
}

.and-fm-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 2px;
}

.and-fm-header__title {
    flex: 1;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.and-fm-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.and-fm-header__actions .and-fm-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.1);
}

.and-fm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #334155;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.and-fm-icon-btn:active {
    transform: scale(0.96);
    background: rgba(15, 23, 42, 0.06);
}

.and-fm-scope {
    margin: 0 2px 12px;
    padding: 10px 14px;
    border-radius: 20px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.and-fm-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.and-fm-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 108px;
    padding: 16px 8px 14px;
    border: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.22s ease;
    -webkit-tap-highlight-color: transparent;
}

.and-fm-cat:active {
    transform: scale(0.96);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
}

.and-fm-cat__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.and-fm-cat__icon svg {
    width: 26px;
    height: 26px;
}

.and-fm-cat__label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}

.and-fm-cat--orange .and-fm-cat__icon { background: #ffedd5; color: #ea580c; }
.and-fm-cat--blue .and-fm-cat__icon { background: #dbeafe; color: #2563eb; }
.and-fm-cat--purple .and-fm-cat__icon { background: #ede9fe; color: #7c3aed; }
.and-fm-cat--green .and-fm-cat__icon { background: #dcfce7; color: #16a34a; }
.and-fm-cat--teal .and-fm-cat__icon { background: #ccfbf1; color: #0d9488; }
.and-fm-cat--amber .and-fm-cat__icon { background: #fef3c7; color: #d97706; }

.and-fm-section {
    margin-bottom: 18px;
    padding: 0 2px;
}

.and-fm-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.and-fm-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.and-fm-section__title--solo {
    margin-bottom: 12px;
}

.and-fm-section__link {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: 0.875rem;
    font-weight: 600;
}

.and-fm-recent {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -10px;
    padding: 0 10px 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.and-fm-recent__card {
    flex: 0 0 112px;
    scroll-snap-align: start;
    border: 0;
    border-radius: 24px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
    text-align: left;
}

.and-fm-recent__thumb {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    background: #f1f5f9;
    overflow: hidden;
    margin-bottom: 8px;
}

.and-fm-recent__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-fm-recent__badge {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.and-fm-recent__badge--red { color: #dc2626; }
.and-fm-recent__badge--green { color: #16a34a; }
.and-fm-recent__badge--blue { color: #2563eb; }
.and-fm-recent__badge--slate { color: #64748b; }

.and-fm-recent__name {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    word-break: break-word;
}

.and-fm-recent__empty,
.and-fm-empty {
    margin: 0;
    padding: 20px 16px;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04);
}

.and-fm-recent__skel,
.and-fm-storage__skel {
    height: 96px;
    border-radius: 28px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: and-fm-shimmer 1.2s infinite;
}

.and-fm-storage {
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.and-fm-storage__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    text-align: left;
    transition: background 0.2s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    -webkit-tap-highlight-color: transparent;
}

.and-fm-storage__item:not(.and-fm-storage__item--disabled):active {
    background: #f8fafc;
    transform: scale(0.992);
}

.and-fm-storage__item:last-child {
    border-bottom: 0;
}

.and-fm-storage__item--disabled {
    opacity: 0.72;
    pointer-events: none;
}

.and-fm-storage__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.and-fm-storage__icon svg {
    width: 24px;
    height: 24px;
}

.and-fm-storage__icon--blue { background: #dbeafe; color: #2563eb; }
.and-fm-storage__icon--indigo { background: #e0e7ff; color: #4f46e5; }
.and-fm-storage__icon--orange { background: #ffedd5; color: #ea580c; }

.and-fm-storage__main {
    flex: 1;
    min-width: 0;
}

.and-fm-storage__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

.and-fm-storage__bar {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
    margin-bottom: 4px;
}

.and-fm-storage__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.and-fm-storage__sub {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
}

.and-fm-storage__sub--muted {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.and-fm-storage__chev {
    color: #94a3b8;
    flex-shrink: 0;
}

.and-fm-browse[hidden] {
    display: none !important;
}

.and-fm-browse {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.and-fm-browse.is-open {
    transform: translateX(0);
}

.and-fm-browse__header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px 8px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.and-fm-browse__head-main {
    flex: 1;
    min-width: 0;
}

.and-fm-browse__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0f172a;
}

.and-fm-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.75rem;
}

.and-fm-crumb__item {
    border: 0;
    background: transparent;
    color: #2563eb;
    padding: 0;
    font-weight: 600;
}

.and-fm-crumb__item.is-current {
    color: #64748b;
}

.and-fm-crumb__sep {
    color: #cbd5e1;
}

.and-fm-browse__actions {
    display: flex;
    gap: 2px;
}

.and-fm-trash-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.and-fm-browse__toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.and-fm-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
}

.and-fm-search {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    color: #0f172a;
    outline: none;
}

.and-fm-filter {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px;
    border-radius: 12px;
    background: #f1f5f9;
}

.and-fm-filter__btn {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748b;
}

.and-fm-filter__btn.is-active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.and-fm-trash-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.8125rem;
}

.and-fm-dropzone {
    margin: 12px;
    padding: 18px;
    border-radius: 16px;
    border: 1.5px dashed #cbd5e1;
    background: #fff;
    text-align: center;
    color: #64748b;
}

.and-fm-dropzone svg {
    color: #2563eb;
    margin-bottom: 6px;
}

.and-fm-dropzone p {
    margin: 0 0 10px;
    font-size: 0.8125rem;
}

.and-fm-upload-btn {
    border: 0;
    border-radius: 10px;
    padding: 8px 14px;
    background: #2563eb;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.and-fm-loading[hidden] {
    display: none !important;
}

.and-fm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    pointer-events: none;
}

.and-fm-loading__spin {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: and-fm-spin 0.8s linear infinite;
}

.and-fm-grid {
    flex: 1;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
    align-content: start;
    opacity: 1;
    transition: opacity 0.24s ease;
}

.and-fm-grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

.and-fm-grid.is-entering .and-fm-item {
    animation: and-fm-item-in 0.34s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.and-fm-grid.is-entering .and-fm-item:nth-child(1) { animation-delay: 0.02s; }
.and-fm-grid.is-entering .and-fm-item:nth-child(2) { animation-delay: 0.04s; }
.and-fm-grid.is-entering .and-fm-item:nth-child(3) { animation-delay: 0.06s; }
.and-fm-grid.is-entering .and-fm-item:nth-child(4) { animation-delay: 0.08s; }
.and-fm-grid.is-entering .and-fm-item:nth-child(5) { animation-delay: 0.1s; }
.and-fm-grid.is-entering .and-fm-item:nth-child(6) { animation-delay: 0.12s; }
.and-fm-grid.is-entering .and-fm-item:nth-child(n+7) { animation-delay: 0.14s; }

.and-fm-item {
    position: relative;
    border-radius: 14px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.and-fm-item:active {
    transform: scale(0.97);
}

.and-fm-item__thumb-wrap {
    position: relative;
    width: 100%;
}

.and-fm-item__thumb {
    width: 100%;
    aspect-ratio: 1;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #64748b;
}

.and-fm-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-fm-item__thumb svg {
    width: 32px;
    height: 32px;
}

.and-fm-item--folder .and-fm-item__thumb {
    color: #f59e0b;
}

.and-fm-item__name {
    margin: 6px 0 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    word-break: break-word;
}

.and-fm-item__acts {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    z-index: 3;
    pointer-events: none;
}

.and-fm-item__acts:empty {
    display: none;
}

.and-fm-item__act {
    position: relative;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #64748b;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
    pointer-events: auto;
    flex-shrink: 0;
}

.and-fm-item__act--danger {
    color: #dc2626;
}

.and-fm-sheet[hidden] {
    display: none !important;
    pointer-events: none;
    visibility: hidden;
}

.and-fm-sheet {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    visibility: visible;
}

.and-fm-sheet.is-open {
    pointer-events: auto;
}

.and-fm-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.and-fm-sheet.is-open .and-fm-sheet__backdrop {
    opacity: 1;
}

.and-fm-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.16);
    transform: translateY(100%);
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.and-fm-sheet.is-open .and-fm-sheet__panel {
    transform: translateY(0);
}

.and-fm-sheet__panel h3 {
    margin: 0 0 12px;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0f172a;
}

.and-fm-sheet__item {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    padding: 14px 4px;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
}

.and-fm-sheet__item--muted {
    color: #64748b;
    border-bottom: 0;
}

.and-fm-sheet__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.and-fm-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    font-size: 0.9375rem;
}

.and-fm-btn {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.875rem;
    font-weight: 700;
}

.and-fm-btn--ghost {
    background: #f1f5f9;
    color: #334155;
}

.and-fm-btn--primary {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.and-fm-btn--danger {
    background: #ef4444;
    color: #fff;
}

.and-fm-error {
    margin: 8px 0 0;
    color: #dc2626;
    font-size: 0.8125rem;
}

.and-fm-preview__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.and-fm-preview__body {
    margin: 12px 0;
}

.and-fm-preview__img {
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 12px;
    background: #f8fafc;
}

.and-fm-preview__path {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: #64748b;
    word-break: break-all;
}

.and-fm-preview__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.and-fm-delete__body {
    margin: 0 0 8px;
    color: #334155;
    font-size: 0.875rem;
}

.and-fm-delete__path {
    margin: 0;
    font-size: 0.75rem;
    color: #94a3b8;
    word-break: break-all;
}

body.and-fm-overlay-open {
    overflow: hidden;
}

body.and-fm-overlay-open .and-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes and-fm-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes and-fm-spin {
    to { transform: rotate(360deg); }
}

@keyframes and-fm-home-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes and-fm-item-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .and-fm-home,
    .and-fm-browse,
    .and-fm-sheet__backdrop,
    .and-fm-sheet__panel,
    .and-fm-cat,
    .and-fm-storage__item,
    .and-fm-item,
    .and-fm-grid {
        animation: none !important;
        transition: none !important;
    }

    .and-fm-browse,
    .and-fm-browse.is-open,
    .and-fm-sheet__panel,
    .and-fm-sheet.is-open .and-fm-sheet__panel {
        transform: none !important;
    }

    .and-fm-sheet__backdrop,
    .and-fm-sheet.is-open .and-fm-sheet__backdrop {
        opacity: 1;
    }
}

/* ── Offline download (Pengaturan) ── */
.and-ps-offline-card {
    padding: 1rem 1.1rem 1.1rem;
}

.and-ps-offline-status {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--and-text, #0f172a);
}

.and-ps-offline-status--ok { color: #15803d; }
.and-ps-offline-status--warn { color: #b45309; }

.and-ps-offline-desc {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--and-muted, #64748b);
}

.and-ps-offline-progress {
    margin-bottom: 0.85rem;
}

.and-ps-offline-progress__track {
    height: 6px;
    border-radius: 99px;
    background: color-mix(in srgb, #cbd5e1 50%, transparent);
    overflow: hidden;
}

.and-ps-offline-progress__bar {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #ff5a00, #ff7a2f);
    transition: width 0.25s ease;
}

.and-ps-offline-progress__text {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--and-muted, #64748b);
}

.and-ps-offline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.and-ps-action-btn--primary {
    background: linear-gradient(135deg, #ff5a00 0%, #ff7a2f 100%);
    color: #fff;
    border: none;
}

/* ── Pengaturan modern (profile/pengaturan) ── */
.and-layout--ps-modern {
    --and-pe-ink: #0f172a;
    --and-pe-muted: #64748b;
    --and-pe-bg: #eef1f6;
    --and-ps-grad-a: #fff7ed;
    --and-ps-grad-b: #eef1f6;
    background: linear-gradient(180deg, var(--and-ps-grad-a) 0%, var(--and-ps-grad-b) 200px, var(--and-pe-bg) 380px);
}

.and-main--ps-page {
    padding: calc(var(--and-page-inset-top) + 8px) var(--and-space-md) calc(var(--and-nav-total) + 12px);
}

.and-main--ps-page.and-main--dashboard {
    padding-top: calc(var(--and-page-inset-top) + 8px);
}

.and-ps-topbar {
    margin-bottom: 22px;
    align-items: center;
    gap: 12px;
}

.and-ps-topbar .and-pg-topbar__back {
    width: 44px;
    height: 44px;
    margin-right: 0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.and-ps-topbar .and-pg-topbar__text {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.and-ps-topbar .and-pg-topbar__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.and-ps-topbar.and-form-hero {
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 24px;
}

.and-ps-topbar.and-form-hero .and-pg-topbar__back {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    box-shadow: none;
}

.and-ps-topbar.and-form-hero .and-pg-topbar__text {
    display: block;
    min-height: 0;
}

.and-ps-topbar.and-form-hero .and-pg-topbar__title {
    color: #fff;
    font-size: 1.35rem;
}

.and-ps-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.and-ps-panel {
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    padding: 4px 16px 14px;
}

.and-ps-panel .and-ps-divider {
    margin: 6px -16px;
    background: rgba(148, 163, 184, 0.16);
}

.and-ps-panel .and-ps-row {
    min-height: 46px;
    padding: 6px 0;
}

.and-ps-panel .and-ps-row--action {
    padding: 2px 0 6px;
}

.and-ps-panel .and-ps-action-btn {
    width: 100%;
    justify-content: center;
}

.and-ps-panel .and-ps-row--action-duo .and-ps-action-btn {
    width: auto;
    flex: 1;
}

.and-ps-panel .and-ps-hint {
    margin: 0 0 8px;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--and-pe-muted);
}

.and-ps-panel--offline,
.and-ps-panel--quota {
    padding: 16px;
}

.and-ps-panel--links {
    padding: 6px 0;
}

.and-ps-panel--links .and-ps-link {
    padding-left: 16px;
    padding-right: 16px;
}

.and-ps-group--admin {
    margin-bottom: 0;
}

.and-ps-admin-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-ps-admin-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 16px 16px 14px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.07);
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.and-ps-admin-tile:active {
    transform: scale(0.985);
}

.and-ps-admin-tile--pwa .and-ps-admin-tile__icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(37, 99, 235, 0.08));
    color: #2563eb;
}

.and-ps-admin-tile--gemini .and-ps-admin-tile__icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.14), rgba(124, 58, 237, 0.08));
    color: #7c3aed;
}

.and-ps-admin-tile__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-ps-admin-tile__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.and-ps-admin-tile__title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--and-pe-ink);
    line-height: 1.25;
}

.and-ps-admin-tile__sub {
    font-size: 0.75rem;
    color: var(--and-pe-muted);
    line-height: 1.35;
}

.and-ps-admin-tile__chev {
    flex-shrink: 0;
    color: #94a3b8;
}

.and-ps-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 10px;
}

.and-ps-card-head__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.and-ps-card-head__icon--notif {
    background: rgba(234, 88, 12, 0.12);
    color: #ea580c;
}

.and-ps-card-head__icon--offline {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.and-ps-card-head__icon--ai {
    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
}

.and-ps-card-head__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--and-pe-ink);
    letter-spacing: -0.01em;
}

.and-ps-card-head__sub {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--and-pe-muted);
}

.and-ps-list--modern,
.and-ps-offline-card--modern,
.and-ps-quota-card--modern,
.and-ps-links--modern {
    border-radius: 1.25rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.and-ps-action-btn--soft {
    background: rgba(234, 88, 12, 0.1);
    color: #c2410c;
    border: 1px solid rgba(234, 88, 12, 0.15);
}

.and-ps-feedback {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.08);
}

.and-ps-feedback.is-ok {
    background: rgba(34, 197, 94, 0.1);
}

.and-ps-feedback.is-err {
    background: rgba(239, 68, 68, 0.08);
}

.and-ps-feedback.is-warn {
    background: rgba(245, 158, 11, 0.1);
}

.and-pg-topbar__back {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.9);
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    margin-right: 4px;
}

.and-pg-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.and-pg-topbar__text {
    flex: 1;
    min-width: 0;
}

/* ── PWA Guard & Install Required ── */
.and-pwa-guard-loader {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, #eff6ff 0%, #fff7ed 48%, #ffffff 100%);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.and-pwa-guard-loader[hidden] {
    display: none !important;
}

.and-pwa-guard-loader__panel {
    text-align: center;
    padding: 2rem 1.5rem;
    min-width: 220px;
}

.and-pwa-guard-loader__spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--and-accent, #ff5a00) 18%, transparent);
    border-top-color: var(--and-accent, #ff5a00);
    animation: and-pwa-spin 0.85s linear infinite;
}

.and-pwa-guard-loader__label {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--and-text, #1e293b);
}

.and-body--pwa-validating .and-spa-outlet-wrap,
.and-body--pwa-validating #and-spa-nav {
    visibility: hidden;
}

.and-body--pwa-blocked #and-spa-app {
    display: none !important;
}

.and-pwa-install-root {
    position: fixed;
    inset: 0;
    z-index: 11000;
}

.and-pwa-install-root[hidden] {
    display: none !important;
}

.and-pwa-install {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
    background: linear-gradient(165deg, #dbeafe 0%, #fff7ed 42%, #ffffff 100%);
    overflow-y: auto;
    animation: and-pwa-fade-in 0.45s ease both;
}

.and-pwa-install__ambient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 20% 10%, color-mix(in srgb, #ff5a00 12%, transparent), transparent 60%),
        radial-gradient(ellipse 60% 45% at 85% 85%, color-mix(in srgb, #3b82f6 10%, transparent), transparent 55%);
    pointer-events: none;
}

.and-pwa-install__card {
    position: relative;
    width: min(100%, 420px);
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid color-mix(in srgb, #fff 40%, #cbd5e1);
    box-shadow: 0 24px 60px color-mix(in srgb, #0f172a 12%, transparent);
    backdrop-filter: blur(12px);
    text-align: center;
}

.and-pwa-install__icon-wrap {
    width: 96px;
    height: 96px;
    margin: 0 auto 0.85rem;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 28px color-mix(in srgb, #0f172a 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.and-pwa-install__icon {
    width: 88px;
    height: 88px;
    object-fit: contain;
    display: block;
}

.and-pwa-install__app-name {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--and-text, #0f172a);
}

.and-pwa-install__app-short {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    color: var(--and-muted, #64748b);
}

.and-pwa-install__title {
    margin: 0 0 0.65rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--and-text, #0f172a);
}

.and-pwa-install__desc {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--and-muted, #475569);
}

.and-pwa-install__hint {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--and-accent, #ff5a00) 80%, #0f172a);
    font-weight: 600;
}

.and-pwa-install__guide {
    margin: 0 0 1.15rem;
    text-align: left;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, #eff6ff 70%, #fff);
    border: 1px solid color-mix(in srgb, #93c5fd 35%, transparent);
}

.and-pwa-guide__title {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--and-text, #0f172a);
}

.and-pwa-guide__steps {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--and-muted, #475569);
}

.and-pwa-guide__steps li + li {
    margin-top: 0.35rem;
}

.and-pwa-install__actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.and-pwa-install__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 1rem;
    border-radius: 14px;
    border: none;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.and-pwa-install__btn:active {
    transform: scale(0.98);
}

.and-pwa-install__btn--primary {
    background: linear-gradient(135deg, #ff5a00 0%, #ff7a2f 100%);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, #ff5a00 35%, transparent);
}

.and-pwa-install__btn--ghost {
    background: #fff;
    color: var(--and-text, #0f172a);
    border: 1px solid color-mix(in srgb, #cbd5e1 80%, transparent);
}

.and-pwa-install__btn--soft {
    background: color-mix(in srgb, #eff6ff 80%, #fff);
    color: var(--and-muted, #475569);
}

.and-pwa-install__foot {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
}

.and-pwa-install__foot--ok { color: #15803d; }
.and-pwa-install__foot--warn { color: #b45309; }
.and-pwa-install__foot--info { color: #475569; }

@keyframes and-pwa-spin {
    to { transform: rotate(360deg); }
}

@keyframes and-pwa-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pengaturan PWA admin */
.and-layout--pg-pwa .and-pg-icon-preview {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid color-mix(in srgb, #cbd5e1 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px color-mix(in srgb, #0f172a 8%, transparent);
}

.and-layout--pg-pwa .and-pg-icon-preview img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.and-layout--pg-pwa .and-pg-upload-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .and-pwa-install,
    .and-pwa-guard-loader__spinner,
    .and-pwa-install__btn {
        animation: none !important;
        transition: none !important;
    }
}

.and-ra-fullsheet--body {
    justify-content: center;
}

.and-ra-fullsheet--body .and-restock-sheet__panel,
.and-ra-fullsheet--body .and-ra-fullsheet__panel {
    width: 100%;
    max-width: var(--and-content-max);
    margin-inline: auto;
}

.and-ra-fullsheet--body .and-ra-fullsheet__hero.and-form-hero,
.and-ra-fullsheet--body .and-item-detail-header.and-form-hero.and-ra-fullsheet__hero {
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
    padding-top: calc(14px + var(--and-safe-top, 0px));
}

.and-ra-fullsheet--body .and-form-hero .and-svc-st-clear {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.and-main--svc-form {
    padding-bottom: calc(var(--and-safe-bottom, 0px) + 108px);
}

body.and-body--svc-form .and-pe-save-bar--portaled,
body.and-body--lpr-form .and-pe-save-bar--portaled {
    z-index: 130;
}

.and-ra-fullsheet--rab-quick {
    z-index: 1320;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
}

.and-ra-fullsheet--rab-quick .and-ra-fullsheet__backdrop {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.32s ease;
}

.and-ra-fullsheet--rab-quick .and-restock-sheet__panel {
    flex: 0 1 auto;
    height: auto;
    max-height: min(88vh, 780px);
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    border-radius: 1.75rem 1.75rem 0 0;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -12px 40px -12px rgba(15, 23, 42, 0.18);
    transform: translateY(105%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-ra-fullsheet--rab-quick.is-open .and-restock-sheet__panel {
    transform: translateY(0);
}

.and-rab-quick-sheet__handle {
    flex-shrink: 0;
    width: 40px;
    height: 4px;
    margin: 10px auto 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
}

.and-rab-quick-form__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.and-rab-quick-form__vision {
    padding: 12px var(--and-space-md) 4px;
}

.and-bf-vision-wrap--compact .and-bf-vision {
    padding: 12px;
    box-shadow: none;
}

.and-bf-vision-wrap--compact .and-bf-vision__pick--card {
    min-height: 108px;
    padding: 12px 8px 10px;
}

.and-bf-vision-wrap--compact .and-bf-vision__sub--center {
    margin-bottom: 10px;
}

.and-bf-vision-wrap--compact .and-bf-vision--applied {
    padding: 10px 12px;
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: none;
}

.and-bf-vision__applied-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.and-bf-vision__preview-wrap--applied {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #f1f5f9;
}

.and-bf-vision__preview-wrap--applied .and-bf-vision__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-bf-vision__applied-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.and-bf-vision__applied-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
}

.and-bf-vision__change-photo {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 0.8125rem;
}

.and-rab-quick-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px var(--and-space-md) 12px;
}

.and-rab-quick-form--modern .and-rab-quick-field {
    margin-bottom: 0;
}

.and-rab-quick-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 0;
}

.and-rab-quick-form__row + .and-rab-quick-form__row {
    margin-top: 6px;
}

.and-rab-quick-form__row + .and-rab-quick-field {
    margin-top: 6px;
}

.and-rab-quick-form__row .and-rab-quick-field {
    margin-bottom: 0;
    min-width: 0;
}

.and-rab-quick-form--modern .and-rab-quick-label {
    display: block;
    margin-bottom: 9px;
    padding-top: 2px;
}

.and-rab-quick-label__badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #475569;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.and-rab-quick-label__badge--req {
    color: #9a3412;
    background: rgba(255, 237, 213, 0.42);
    border-color: rgba(255, 90, 0, 0.16);
}

.and-rab-quick-label__badge--opt {
    color: #64748b;
    background: rgba(241, 245, 249, 0.55);
    border-color: rgba(100, 116, 139, 0.14);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.71875rem;
}

.and-rab-quick-form--modern .and-ra-input,
.and-rab-quick-form--modern .and-ra-textarea,
.and-rab-quick-form--modern .and-rab-quick-select {
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.and-rab-quick-form--modern .and-ra-textarea {
    min-height: 76px;
    line-height: 1.45;
}

.and-rab-quick-form--modern .and-ra-input:focus,
.and-rab-quick-form--modern .and-ra-textarea:focus,
.and-rab-quick-form--modern .and-rab-quick-select:focus {
    border-color: rgba(255, 90, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1);
    outline: none;
    background: #fff;
}

.and-rab-quick-input--readonly {
    color: #64748b;
    background: rgba(248, 250, 252, 0.95) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.and-rab-quick-input--money {
    font-weight: 700;
    text-align: right;
}

.and-rab-quick-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px !important;
}

.and-rab-quick-ref .and-ra-input {
    padding-right: 44px;
}

.and-rab-quick-ref .and-bf-input-action__btn {
    border-radius: 10px;
}

@media (max-width: 420px) {
    .and-rab-quick-form__row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .and-rab-quick-form__row .and-rab-quick-field {
        margin-bottom: 0;
    }
}

.and-rab-quick-form__hint {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.45;
}

.and-rab-quick-form__footer {
    flex-shrink: 0;
    z-index: 3;
    margin-top: 0;
    padding: 10px var(--and-space-md) calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.35);
}

.and-rab-quick-form__footer .and-btn {
    flex: 1;
    min-height: 46px;
}

body.and-rab-quick-barang-open {
    overflow: hidden;
}

.and-dash-search--vision.and-dash-search--has-voice .and-dash-search__input {
    padding-right: 6px;
}

.and-dash-search__vision-btn--inline {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0 2px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 90, 0, 0.12);
    color: #ff5a00;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.18);
}

.and-dash-search__vision-btn--inline::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(15, 23, 42, 0.08);
}

.and-dash-search__vision-btn--inline:active {
    background: rgba(255, 90, 0, 0.22);
    transform: scale(0.94);
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.35), 0 0 0 3px rgba(255, 90, 0, 0.1);
}

.and-dash-search--vision {
    position: relative;
}

.and-bis-overlay {
    position: fixed;
    inset: 0;
    z-index: 700;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    padding-bottom: calc(16px + var(--and-safe-bottom));
    background: transparent;
    pointer-events: none;
}

.and-bis-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        backdrop-filter 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        -webkit-backdrop-filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, backdrop-filter;
}

.and-bis-overlay.is-visible,
.and-bis-overlay.is-closing {
    pointer-events: auto;
}

.and-bis-overlay.is-visible::before {
    opacity: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.and-bis-overlay.is-visible.is-closing::before {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition-duration: 0.38s;
}

.and-bis-overlay[hidden] {
    display: none !important;
}

.and-bis-flow,
.and-bis-picker {
    width: 100%;
    max-width: 420px;
    border-radius: 1.25rem;
    background: #fff;
    padding: 18px 16px 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    transform: translateY(18px);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.32s ease;
}

.and-bis-overlay.is-visible .and-bis-flow,
.and-bis-overlay.is-visible .and-bis-picker {
    transform: translateY(0);
    opacity: 1;
}

.and-bis-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 10px 16px calc(16px + var(--and-safe-bottom, 0px));
    border-radius: 1.35rem 1.35rem 1.15rem 1.15rem;
    background: #fff;
    box-shadow:
        0 -4px 24px rgba(15, 23, 42, 0.06),
        0 24px 60px rgba(15, 23, 42, 0.22);
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    transform-origin: center bottom;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.and-bis-overlay.is-visible .and-bis-sheet {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.and-bis-overlay.is-visible.is-closing .and-bis-sheet {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    transition-duration: 0.38s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.and-bis-sheet .and-bf-vision__title--center,
.and-bis-sheet .and-bf-vision__sub--center {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-bis-overlay.is-visible .and-bis-sheet .and-bf-vision__title--center {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.1s;
}

.and-bis-overlay.is-visible .and-bis-sheet .and-bf-vision__sub--center {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.16s;
}

.and-bis-overlay.is-visible.is-closing .and-bis-sheet .and-bf-vision__title--center,
.and-bis-overlay.is-visible.is-closing .and-bis-sheet .and-bf-vision__sub--center,
.and-bis-overlay.is-visible.is-closing .and-bis-sheet .and-bf-vision__pick--card,
.and-bis-overlay.is-visible.is-closing .and-bis-sheet__handle,
.and-bis-overlay.is-visible.is-closing .and-bis-sheet__close {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition-duration: 0.2s;
    transition-delay: 0s;
}

.and-bis-sheet .and-bf-vision__pick--card {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.96);
    transition:
        opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-bis-overlay.is-visible .and-bis-sheet .and-bf-vision__pick--card:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0.22s;
}

.and-bis-overlay.is-visible .and-bis-sheet .and-bf-vision__pick--card:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0.3s;
}

.and-bis-sheet__handle {
    width: 40px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.14);
    opacity: 0;
    transform: scaleX(0.5);
    transition:
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.and-bis-overlay.is-visible .and-bis-sheet__handle {
    opacity: 1;
    transform: scaleX(1);
    transition-delay: 0.08s;
}

.and-bis-sheet__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: rgba(241, 245, 249, 0.95);
    color: #64748b;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: scale(0.88);
    transition:
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.2s ease,
        color 0.2s ease;
}

.and-bis-overlay.is-visible .and-bis-sheet__close {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.14s;
}

.and-bis-sheet__close:active {
    background: rgba(226, 232, 240, 0.95);
    color: #0f172a;
    transform: scale(0.94);
}

.and-bf-vision--sheet {
    padding: 4px 0 2px;
    border: none;
    background: transparent;
    box-shadow: none;
}

.and-bf-vision--sheet .and-bf-vision__title--center {
    margin-top: 2px;
    padding-right: 28px;
}

.and-bf-vision--sheet .and-bf-vision__actions {
    margin-top: 4px;
}

.and-bis-flow--enter {
    animation: none;
}

.and-bis-flow__compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

.and-bis-flow__photo {
    margin: 0;
    text-align: center;
}

.and-bis-flow__photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.9rem;
    border: 2px solid rgba(15, 23, 42, 0.08);
    display: block;
    background: #f1f5f9;
}

.and-bis-flow__photo figcaption {
    margin-top: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
}

.and-bis-flow__photo--match.has-match img {
    border-color: rgba(22, 163, 74, 0.45);
}

.and-bis-flow__match-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, #f8fafc, #eef2f7);
    border: 2px dashed rgba(15, 23, 42, 0.12);
    color: #94a3b8;
    font-size: 1.5rem;
    font-weight: 800;
}

.and-bis-flow__bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #ff5a00;
}

.and-bis-flow__bridge-line {
    width: 2px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent, rgba(255, 90, 0, 0.5), transparent);
}

.and-bis-flow__bridge-icon {
    font-size: 0.9rem;
    font-weight: 800;
    animation: and-bis-bridge-pulse 1.2s ease-in-out infinite;
}

.and-bis-flow__steps {
    list-style: none;
    margin: 12px 0 10px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.and-bis-flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    opacity: 0.45;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.and-bis-flow__step.is-active {
    opacity: 1;
    transform: translateY(-2px);
}

.and-bis-flow__step.is-done {
    opacity: 0.78;
}

.and-bis-flow__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.and-bis-flow__step.is-active .and-bis-flow__dot {
    background: #ff5a00;
    box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.18);
    transform: scale(1.15);
}

.and-bis-flow__step.is-done .and-bis-flow__dot {
    background: #16a34a;
}

.and-bis-flow__step-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.2;
}

.and-bis-flow__status {
    margin: 0 0 10px;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    min-height: 1.25em;
    transition: opacity 0.25s ease;
}

.and-bis-flow__status.is-changing {
    opacity: 0.55;
}

.and-bis-flow__progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.and-bis-flow__progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff5a00 0%, #ff8a3d 55%, #ff5a00 100%);
    background-size: 200% 100%;
    animation: and-bf-vision-progress-shine 1.4s ease-in-out infinite;
    transition: width 0.55s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.and-bis-flow__cache {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 0.75rem;
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.and-barang-vision-panel .and-bis-compare-banner {
    margin-bottom: 0;
}

.and-bis-compare-banner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.18);
}

.and-bis-compare-banner__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.and-bis-compare-banner__label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.and-bis-compare-banner__frame {
    overflow: hidden;
    border-radius: 0.85rem;
    background: #f8fafc;
    border: 2px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.and-bis-compare-banner__frame img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.and-bis-compare-banner__vs {
    align-self: center;
    padding-bottom: 24px;
}

.and-bis-compare-banner__vs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ff5a00;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 90, 0, 0.2);
    box-shadow: 0 4px 12px -6px rgba(255, 90, 0, 0.35);
}

.and-bis-compare-banner__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: #f8fafc;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
    padding: 8px;
}

@keyframes and-bis-bridge-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

.and-bis-picker--enter {
    animation: none;
}

.and-bis-overlay__stage,
.and-bis-picker__title {
    text-align: center;
    font-weight: 800;
    color: #0f172a;
}

.and-bis-overlay__icon {
    display: block;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 8px;
}

.and-bis-overlay__text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.and-bis-overlay__preview {
    margin-bottom: 12px;
    border-radius: 0.9rem;
    overflow: hidden;
    max-height: 160px;
}

.and-bis-overlay__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-bis-overlay__cache {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 0.75rem;
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.and-bis-picker__sub {
    margin: 4px 0 14px;
    text-align: center;
    font-size: 0.78rem;
    color: #64748b;
}

.and-bis-picker__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.and-bis-picker__btn {
    min-height: 56px;
    border-radius: 1rem;
    border: 2px dashed rgba(255, 90, 0, 0.35);
    background: rgba(255, 248, 242, 0.9);
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.and-bis-picker__btn:active {
    transform: scale(0.97);
    background: rgba(255, 90, 0, 0.12);
}

.and-bis-picker__emoji {
    font-size: 1.25rem;
    line-height: 1;
}

.and-bis-picker__cancel {
    width: 100%;
    margin-top: 10px;
    min-height: 42px;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 700;
    cursor: pointer;
}

body.and-bis-overlay-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .and-bis-overlay::before,
    .and-bis-sheet,
    .and-bis-sheet__handle,
    .and-bis-sheet__close,
    .and-bis-sheet .and-bf-vision__title--center,
    .and-bis-sheet .and-bf-vision__sub--center,
    .and-bis-sheet .and-bf-vision__pick--card {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation: none !important;
    }

    .and-bis-overlay.is-visible::before,
    .and-bis-overlay.is-visible .and-bis-sheet,
    .and-bis-overlay.is-visible .and-bis-sheet__handle,
    .and-bis-overlay.is-visible .and-bis-sheet__close,
    .and-bis-overlay.is-visible .and-bis-sheet .and-bf-vision__title--center,
    .and-bis-overlay.is-visible .and-bis-sheet .and-bf-vision__sub--center,
    .and-bis-overlay.is-visible .and-bis-sheet .and-bf-vision__pick--card {
        opacity: 1 !important;
        transform: none !important;
    }
}

.and-bis-empty {
    padding: 14px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.and-barang-ai-wrap .and-barang-vision-panel + .and-bis-empty {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(148, 163, 184, 0.2);
}

.and-bis-empty--after-vision {
    border-radius: 0 0 1.2rem 1.2rem;
    margin-top: -4px;
    border-top: none;
}

.and-bis-empty__title {
    margin: 0 0 10px;
    font-weight: 800;
    color: #0f172a;
}

.and-bis-empty__ai {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.04);
    font-size: 0.8rem;
    color: #475569;
}

.and-bis-empty__ai p {
    margin: 4px 0;
}

.and-bis-empty__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-bis-vision-tag {
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 2;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.92);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.2;
}

.and-asset-card__media,
.and-asset-row__thumb {
    position: relative;
}

.and-asset-card__sku {
    margin: 2px 0 0;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}

/* ── Halaman 404 ── */
.and-layout--404 {
    min-height: 100dvh;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.and-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: calc(var(--and-space-xl) + env(safe-area-inset-top, 0px)) var(--and-space-lg) calc(var(--and-space-xl) + env(safe-area-inset-bottom, 0px));
    text-align: center;
}

.and-404__hero {
    position: relative;
    width: min(280px, 72vw);
    height: 140px;
    margin-bottom: var(--and-space-lg);
}

.and-404__bg-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(5.5rem, 22vw, 7.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: rgba(148, 163, 184, 0.28);
    line-height: 1;
    user-select: none;
}

.and-404__search-icon {
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%) rotate(-12deg);
    color: var(--and-accent);
    filter: drop-shadow(0 8px 18px rgba(255, 90, 0, 0.25));
}

.and-404__title {
    margin: 0 0 10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.55rem, 5vw, 1.85rem);
    font-weight: 700;
    color: var(--and-text-primary);
    line-height: 1.25;
}

.and-404__desc {
    margin: 0 0 var(--and-space-xl);
    max-width: 340px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--and-text-muted);
}

.and-404__card {
    width: min(100%, 360px);
    padding: var(--and-space-lg) var(--and-space-md) var(--and-space-md);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.and-404__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--and-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.and-404__sparkle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: var(--and-space-md) auto var(--and-space-sm);
    border-radius: 16px;
    background: var(--and-accent-surface);
    color: var(--and-accent);
}

.and-404__card-title {
    margin: 0 0 8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--and-text-primary);
}

.and-404__card-desc {
    margin: 0 0 var(--and-space-md);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--and-text-muted);
}

.and-404__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--and-accent) 0%, #ff7a2f 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(255, 90, 0, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.and-404__cta:active {
    transform: scale(0.98);
    box-shadow: 0 6px 16px rgba(255, 90, 0, 0.22);
}

body.and-body--404 {
    background: #eef2f7;
}

/* ── Scan Nomor Serah Terima (BAST) ── */
.and-st-scan {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #020617;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.and-st-scan.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.and-st-scan[hidden] {
    display: none !important;
}

body.and-st-scan-open {
    overflow: hidden;
}

.and-st-scan__shell {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.and-st-scan__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.and-st-scan__camera {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.and-st-scan__video,
.and-st-scan__freeze {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0f172a;
}

.and-st-scan__video[hidden],
.and-st-scan__freeze[hidden] {
    display: none;
}

.and-st-scan__shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 72% 42% at 50% 44%, transparent 0%, rgba(2, 6, 23, 0.55) 100%);
    pointer-events: none;
}

.and-st-scan__frame {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.45);
    pointer-events: none;
    transition: width 0.28s ease, height 0.28s ease, top 0.28s ease, border-radius 0.28s ease;
}

.and-st-scan__frame--dokumen {
    top: 40%;
    width: min(78vw, 320px);
    height: min(34vw, 140px);
}

.and-st-scan__frame--barcode {
    top: 42%;
    width: min(88vw, 340px);
    height: min(22vw, 88px);
    border-radius: 12px;
}

.and-st-scan__flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}

.and-st-scan__flash.is-play {
    animation: and-st-scan-flash 0.42s ease-out forwards;
}

@keyframes and-st-scan-flash {
    0% { opacity: 0.85; }
    100% { opacity: 0; }
}

.and-st-scan__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0) 100%);
}

.and-st-scan__modes {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
}

.and-st-scan__mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.and-st-scan__mode svg {
    flex-shrink: 0;
}

.and-st-scan__mode.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.and-st-scan__mode.is-disabled,
.and-st-scan__mode:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.and-st-scan__shutter {
    position: relative;
    width: 74px;
    height: 74px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease;
}

.and-st-scan__shutter:active:not(:disabled) {
    transform: scale(0.94);
}

.and-st-scan__shutter.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.and-st-scan__shutter-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.and-st-scan__shutter-core {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease, background 0.15s ease;
}

.and-st-scan__shutter:active:not(:disabled) .and-st-scan__shutter-core {
    transform: scale(0.88);
    background: #e2e8f0;
}

.and-st-scan__hint {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
    max-width: 280px;
    line-height: 1.4;
}

.and-st-scan__process {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

.and-st-scan__process[hidden] {
    display: none !important;
}

.and-st-scan__process-inner {
    width: 100%;
    max-width: 340px;
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    animation: and-st-scan-rise 0.45s ease forwards;
}

.and-st-scan__process-preview {
    width: 100%;
    height: 120px;
    margin: 0 auto 18px;
    border-radius: 16px;
    background: #1e293b center / cover no-repeat;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.4);
}

.and-st-scan__pipe {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.and-st-scan__pipe-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    opacity: 0.45;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.and-st-scan__pipe-step.is-active {
    opacity: 1;
    transform: scale(1.04);
}

.and-st-scan__pipe-step.is-done {
    opacity: 0.85;
}

.and-st-scan__pipe-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.35);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.and-st-scan__pipe-step.is-active .and-st-scan__pipe-dot {
    background: var(--and-accent, #ff5a00);
    box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.22);
    animation: and-st-scan-pulse 1.1s ease-in-out infinite;
}

.and-st-scan__pipe-step.is-done .and-st-scan__pipe-dot {
    background: #22c55e;
    box-shadow: none;
}

.and-st-scan__pipe-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.and-st-scan__pipe-step.is-active .and-st-scan__pipe-label {
    color: #f8fafc;
}

.and-st-scan__think {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

.and-st-scan__think span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #64748b;
    animation: and-st-scan-think 1.2s ease-in-out infinite;
}

.and-st-scan__think span:nth-child(2) { animation-delay: 0.15s; }
.and-st-scan__think span:nth-child(3) { animation-delay: 0.3s; }

@keyframes and-st-scan-think {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
    40% { transform: translateY(-6px); opacity: 1; }
}

@keyframes and-st-scan-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes and-st-scan-rise {
    to { opacity: 1; transform: translateY(0); }
}

.and-st-scan__process-status {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: #cbd5e1;
}

.and-st-scan__result-wrap {
    width: 100%;
    max-width: 380px;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    animation: and-st-scan-result-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes and-st-scan-result-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.and-st-scan__frame-corner::before,
.and-st-scan__frame-corner::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid #38bdf8;
}

.and-st-scan__frame-corner::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    border-radius: 8px 0 0 0;
}

.and-st-scan__frame-corner::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 8px 0;
}

.and-st-scan__top {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: start;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.72) 100%);
}

.and-st-scan__heading {
    text-align: center;
    min-width: 0;
}

.and-st-scan__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.02em;
}

.and-st-scan__status {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}

.and-st-scan__icon-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.and-st-scan__icon-btn.is-on {
    color: #fde047;
    background: rgba(234, 179, 8, 0.22);
}

.and-st-scan__result {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    overflow-y: auto;
}

.and-st-scan__result[hidden] {
    display: none !important;
}

.and-st-scan__camera[hidden] {
    display: none !important;
}

.and-st-scan__spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 14px;
    border: 3px solid rgba(148, 163, 184, 0.25);
    border-top-color: var(--and-accent, #ff5a00);
    border-radius: 50%;
    animation: and-st-scan-spin 0.75s linear infinite;
}

@keyframes and-st-scan-spin {
    to { transform: rotate(360deg); }
}

.and-st-scan__result-card--loading {
    text-align: center;
}

.and-st-scan__result-card {
    width: 100%;
    max-width: 380px;
    padding: 22px 18px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
}

.and-st-scan__result-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 8px;
}

.and-st-scan__result-lead {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 800;
    color: #f8fafc;
}

.and-st-scan__result-sub {
    margin: 0 0 16px;
    font-size: 0.86rem;
    color: #94a3b8;
    line-height: 1.5;
}

.and-st-scan__result-sub strong {
    color: #e2e8f0;
    font-size: 1rem;
    word-break: break-all;
}

.and-st-scan__result-dl {
    margin: 0 0 18px;
    display: grid;
    gap: 10px;
}

.and-st-scan__result-dl div {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8px;
    align-items: baseline;
}

.and-st-scan__result-dl dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.and-st-scan__result-dl dd {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: #f1f5f9;
    text-align: right;
    word-break: break-word;
}

.and-st-scan__result-actions {
    display: grid;
    gap: 10px;
}

.and-st-scan__btn {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.and-st-scan__btn--primary {
    border: none;
    background: linear-gradient(135deg, var(--and-accent) 0%, #ff7a2f 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(255, 90, 0, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .and-st-scan,
    .and-st-scan__frame,
    .and-st-scan__process-inner,
    .and-st-scan__result-wrap,
    .and-st-scan__flash.is-play {
        transition: none;
        animation: none !important;
    }

    .and-st-scan.is-visible {
        opacity: 1;
    }

    .and-st-scan__process-inner,
    .and-st-scan__result-wrap {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Barang hub — selaras top bar hero (slate → orange)
   List / detail / form
   ========================================================================== */
.and-body--barang-hub {
    --and-statusbar-tint: rgba(111, 135, 157, 0.82);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background-color: #6f879d;
    background-image:
        radial-gradient(circle at 14% 0%, rgba(255, 90, 0, 0.14), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(124, 45, 18, 0.18), transparent 30%),
        linear-gradient(180deg, #9db0c4 0%, #849bb1 46%, #6f879d 100%);
    background-attachment: scroll;
}

.and-body--barang-hub::before,
.and-body--barang-hub::after {
    display: none;
}

.and-body--barang-hub #and-spa-app,
.and-body--barang-hub .and-spa-outlet-wrap,
.and-body--barang-hub #and-spa-outlet {
    background: transparent;
    max-width: 100%;
    overflow-x: hidden;
}

.and-body--barang-hub #and-spa-app {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.and-body--barang-hub .and-spa-outlet-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.and-body--barang-hub #and-spa-outlet {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.and-body--barang-hub #and-spa-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--and-z-nav, 130);
}

.and-body--barang-hub .and-layout {
    background: transparent;
    width: 100%;
    max-width: var(--and-content-max);
    margin-inline: auto;
    min-width: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.and-body--barang-hub .and-main--barang,
.and-body--barang-hub .and-main--favorit,
.and-body--barang-hub .and-main--item-detail {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(var(--and-nav-total) + 16px);
    box-sizing: border-box;
}

.and-body--barang-hub .and-main.and-main--barang-form {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(var(--and-nav-total) + 16px);
    box-sizing: border-box;
}

.and-body--barang-hub .and-layout--ambient::before {
    top: 6%;
    right: -6%;
    width: 48%;
    height: 42%;
    opacity: 0.32;
    background: rgba(255, 90, 0, 0.16);
    filter: blur(88px);
}

.and-bf-header.and-form-hero,
.and-item-detail-header.and-bf-header.and-form-hero,
.and-std-header.and-bf-header.and-form-hero {
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92)),
        radial-gradient(circle at 12% 0%, rgba(255, 90, 0, 0.42), transparent 42%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    color: #fff;
    box-shadow: 0 20px 40px -26px rgba(15, 23, 42, 0.7);
}

.and-body--barang-hub .and-barang-search-notice,
.and-body--barang-hub .and-bf-steps-card,
.and-body--barang-hub .and-bf-panel,
.and-body--barang-hub .and-bf-vision-wrap .and-barang-vision-panel,
.and-body--barang-hub .and-item-detail-card,
.and-body--barang-hub .and-item-detail-stat,
.and-body--barang-hub .and-item-spec-card,
.and-body--barang-hub .and-item-gallery__hero,
.and-body--barang-hub .and-asset-card {
    background: #fff;
    border: 1px solid rgba(51, 65, 85, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 28px -12px rgba(15, 23, 42, 0.24);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    outline: none;
}

.and-body--barang-hub .and-asset-card__media {
    outline-color: rgba(51, 65, 85, 0.1);
    box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.05);
}

.and-body--barang-hub .and-item-spec-card__head {
    background: rgba(248, 250, 252, 0.96);
    border-bottom-color: rgba(51, 65, 85, 0.1);
}

.and-body--barang-hub .and-item-action-strip {
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(51, 65, 85, 0.1);
    box-shadow: none;
}

.and-body--barang-hub .and-item-action-strip__btn {
    background: #fff;
    border: 1px solid rgba(51, 65, 85, 0.12);
}

.and-body--barang-hub .and-item-action-strip__btn--accent {
    background: rgba(255, 90, 0, 0.1);
    border-color: rgba(255, 90, 0, 0.28);
    color: var(--and-accent);
}

.and-body--barang-hub .and-item-tabs-wrap:not(.and-item-tabs-wrap--in-card) {
    background: #fff;
    border: 1px solid rgba(51, 65, 85, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 28px -12px rgba(15, 23, 42, 0.24);
}

.and-body--barang-hub .and-item-detail-card > .and-item-tabs-wrap--in-card {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(51, 65, 85, 0.1);
    box-shadow: none;
}

.and-body--barang-hub .and-item-tabs {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(51, 65, 85, 0.1);
}

.and-body--barang-hub .and-item-tabs__btn.is-active {
    color: #c94500;
}

.and-body--barang-hub .and-item-tabs__indicator {
    background: #fff;
    border-color: rgba(51, 65, 85, 0.1);
}

.and-item-tabs-wrap .and-item-spec-card,
.and-body--barang-hub .and-item-tabs-wrap .and-item-spec-card {
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.and-body--barang-hub .and-barang-chips--panel:not(.and-barang-chips--hero) {
    padding: 10px 12px;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(51, 65, 85, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 28px -12px rgba(15, 23, 42, 0.24);
}

.and-body--barang-hub .and-barang-chips--hero {
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92)),
        radial-gradient(circle at 12% 0%, rgba(255, 90, 0, 0.42), transparent 42%);
    border: 0;
    box-shadow: 0 20px 40px -26px rgba(15, 23, 42, 0.7);
}

.and-body--barang-hub .and-barang-chips--hero .and-chip-track--barang {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}

.and-body--barang-hub .and-barang-chips--hero .and-chip-track .and-barang-chip {
    color: rgba(255, 247, 237, 0.82);
}

.and-body--barang-hub .and-barang-chips--hero .and-chip-track .and-barang-chip.is-active {
    color: #fff;
}

.and-body--barang-hub .and-barang-chips--panel:not(.and-barang-chips--hero) .and-chip-track--barang {
    width: 100%;
    min-width: 0;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(51, 65, 85, 0.12);
}

.and-body--barang-hub .and-barang-chips--panel:not(.and-barang-chips--hero) .and-chip-track .and-barang-chip {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #334155;
}

.and-body--barang-hub .and-barang-chips--panel:not(.and-barang-chips--hero) .and-chip-track .and-barang-chip.is-active {
    background: transparent;
    border-color: transparent;
    color: #c94500;
    font-weight: 700;
}

.and-body--barang-hub .and-barang-chips:not(.and-chip-track) .and-barang-chip {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(51, 65, 85, 0.16);
    color: #475569;
}

.and-body--barang-hub .and-barang-chips:not(.and-chip-track) .and-barang-chip.is-active {
    background: rgba(255, 90, 0, 0.12);
    border-color: rgba(255, 90, 0, 0.42);
    color: var(--and-accent);
}

.and-body--barang-hub .and-barang-select--filter,
.and-body--barang-hub .and-barang-toolbar-panel .and-barang-select {
    background-color: #f8fafc;
    border-color: rgba(51, 65, 85, 0.14);
}

.and-body--barang-hub .and-bf-steps__track {
    background: rgba(148, 163, 184, 0.24);
}

.and-body--barang-hub .and-bf-step__num {
    background: #fff;
    border-color: rgba(51, 65, 85, 0.16);
}

.and-body--barang-hub .and-bf-step.is-active .and-bf-step__num,
.and-body--barang-hub .and-bf-step.is-done .and-bf-step__num {
    border-color: rgba(255, 90, 0, 0.35);
}

.and-body--barang-hub .and-empty {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(51, 65, 85, 0.14);
    border-radius: 1.25rem;
}

/* ==========================================================================
   Buku hub — layout scroll + bottom nav khusus (5 tab)
   ========================================================================== */
.and-body--buku-hub {
    --and-statusbar-tint: rgba(111, 135, 157, 0.82);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background-color: #6f879d;
    background-image:
        radial-gradient(circle at 14% 0%, rgba(255, 90, 0, 0.14), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(124, 45, 18, 0.18), transparent 30%),
        linear-gradient(180deg, #9db0c4 0%, #849bb1 46%, #6f879d 100%);
    background-attachment: scroll;
}

.and-body--buku-hub::before,
.and-body--buku-hub::after {
    display: none;
}

.and-body--buku-hub #and-spa-app,
.and-body--buku-hub .and-spa-outlet-wrap,
.and-body--buku-hub #and-spa-outlet {
    background: transparent;
    max-width: 100%;
    overflow-x: hidden;
}

.and-body--buku-hub #and-spa-app {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Desktop: konten buku/transaksi scroll di outlet — sidebar tetap fixed di viewport */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    body.and-body--desktop-nav.and-body--buku-hub #and-spa-app {
        overflow: hidden;
    }

    body.and-body--desktop-nav.and-body--buku-hub #and-spa-outlet {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

.and-body--buku-hub .and-spa-outlet-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.and-body--buku-hub #and-spa-outlet {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.and-body--buku-hub #and-spa-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--and-z-nav, 130);
}

.and-body--buku-hub .and-layout {
    background: transparent;
    width: 100%;
    max-width: var(--and-content-max);
    margin-inline: auto;
    min-width: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.and-body--buku-hub .and-main--buku,
.and-body--buku-hub .and-main--buku-hub-sub,
.and-body--buku-hub .and-main--item-detail,
.and-body--buku-hub .and-main--santri,
.and-body--buku-hub .and-main--wali-santri,
.and-body--buku-hub .and-main--kelas,
.and-body--buku-hub .and-main--wali-kelas,
.and-body--buku-hub .and-main--btrx,
.and-body--buku-hub .and-main--btrx-detail {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(var(--and-buku-nav-total) + 20px);
    box-sizing: border-box;
}

.and-body--buku-hub.and-body--no-nav .and-main--santri,
.and-body--buku-hub.and-body--no-nav .and-main--wali-santri,
.and-body--buku-hub.and-body--no-nav .and-main--kelas,
.and-body--buku-hub.and-body--no-nav .and-main--wali-kelas,
.and-body--buku-hub.and-body--no-nav .and-main--btrx-form {
    padding-bottom: calc(var(--and-safe-bottom) + 20px);
}

.and-body--buku-hub .and-main.and-main--barang-form {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding: calc(var(--and-page-inset-top) + 6px) var(--and-space-md) calc(var(--and-buku-nav-total) + 20px);
    box-sizing: border-box;
}

.and-body--buku-hub.and-body--no-nav .and-main--buku,
.and-body--buku-hub.and-body--no-nav .and-main--item-detail,
.and-body--buku-hub.and-body--no-nav .and-main.and-main--barang-form,
.and-body--buku-hub.and-body--no-nav .and-main--btrx-form {
    padding-bottom: calc(var(--and-safe-bottom) + 20px);
}

.and-buku-hub-header {
    margin-bottom: 18px;
}

.and-buku-hub-header__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 4px;
}

.and-buku-hub-header__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.and-buku-hub-header__sub {
    margin: 6px 0 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.82);
}

.and-empty--hub {
    margin-top: 12px;
    padding: 28px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(51, 65, 85, 0.14);
    border-radius: 1.25rem;
}

.and-empty--hub .and-empty__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    color: rgba(100, 116, 139, 0.7);
}

.and-empty--hub .and-empty__hint {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: rgba(100, 116, 139, 0.85);
}

/* Buku detail — ringkasan stok kompak */
.and-buku-stok-summary {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 0.875rem;
    background: rgba(248, 250, 252, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.and-buku-stok-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.and-buku-stok-summary__head-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.and-buku-stok-summary__head-value {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.and-buku-stok-summary__pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.and-buku-stok-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.and-buku-stok-pill__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

.and-buku-stok-pill__value {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #334155;
    line-height: 1;
}

.and-buku-stok-pill--ok .and-buku-stok-pill__value { color: #059669; }
.and-buku-stok-pill--warn .and-buku-stok-pill__value { color: #d97706; }
.and-buku-stok-pill--bad .and-buku-stok-pill__value { color: #dc2626; }
.and-buku-stok-pill--muted .and-buku-stok-pill__value { color: #94a3b8; }

/* Buku detail — tab Rak */
.and-buku-rak-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-buku-rak-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.and-buku-rak-row.is-active {
    border-color: rgba(255, 90, 0, 0.28);
    background: rgba(255, 247, 237, 0.72);
}

.and-buku-rak-row__label {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
}

.and-buku-rak-row__qty {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.and-buku-rak-row.is-active .and-buku-rak-row__qty {
    color: #ea580c;
}

.and-buku-rak-empty {
    margin: 0;
    padding: 16px 12px;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
}

.and-buku-rak-tab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.and-buku-rak-tab-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
}

/* Buku restock modal */
.and-buku-restock-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.and-buku-restock-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-buku-restock-rak-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.and-buku-restock-rak-row .and-restock-panel__label {
    margin-bottom: 0;
}

.and-buku-restock-rak-select {
    width: 100%;
}

.and-buku-restock-kondisi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.and-buku-restock-stepper {
    margin-top: 2px;
}

.and-buku-restock-hint {
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.and-buku-restock-section.is-hilang .and-restock-panel__label {
    color: #b45309;
}

.and-buku-restock-section.is-hilang .and-buku-restock-hint {
    color: #b45309;
}

.and-buku-restock-kondisi .and-pjm-kondisi-card {
    transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, transform 0.18s ease;
}

.and-buku-restock-kondisi .and-pjm-kondisi-card:active {
    transform: scale(0.96);
}

@media (min-width: 380px) {
    .and-buku-restock-kondisi {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .and-buku-restock-kondisi .and-pjm-kondisi-card {
        min-height: 84px;
        padding: 10px 6px;
    }

    .and-buku-restock-kondisi .and-pjm-kondisi-card__emoji {
        font-size: 1.75rem;
    }
}

.and-buku-restock-ket {
    display: block;
}

.and-buku-restock-ket .and-bf-textarea {
    width: 100%;
    margin-top: 6px;
    min-height: 64px;
    resize: vertical;
}

.and-buku-restock-panel .and-restock-panel__msg {
    margin: 0;
}

.and-buku-restock-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.and-buku-restock-btn {
    min-height: 44px;
    border: none;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
}

.and-buku-restock-btn--cancel {
    background: rgba(15, 23, 42, 0.08);
    color: #475569;
}

.and-buku-restock-btn--cancel:active {
    background: rgba(15, 23, 42, 0.14);
}

.and-buku-restock-btn--save {
    background: var(--and-accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 90, 0, 0.3);
}

.and-buku-restock-btn--save:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* —— Data Santri —— */
.and-main--santri .and-data-hero__search .and-dash-search--has-voice .and-dash-search__field {
    padding-right: 0;
}

.and-main--santri .and-data-hero:has(.and-dash-search__field.is-voice-active),
.and-main--santri .and-data-hero:has(.and-voice-search__strip:not([hidden])) {
    padding-bottom: 0.35rem;
}

.and-main--santri .and-kar-card__dept {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.and-san-vision-root {
    margin-bottom: 1rem;
}

.and-san-vision-root .and-bf-vision-wrap {
    margin: 0;
}

/* Santri — upload foto multi + galeri detail */
.and-san-photos {
    margin-bottom: 1rem;
}

.and-san-photos__label {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
}

.and-san-photos__picks {
    margin-bottom: 8px;
}

.and-san-photos__hint {
    margin: 0 0 10px;
}

.and-san-photos__dropzone {
    margin-bottom: 12px;
}

.and-san-photos__grid {
    margin-bottom: 0;
}

.and-kar-profile--santri .and-san-gallery {
    margin: 0 0 1rem;
}

.and-san-gallery__main {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.and-san-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-san-gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.and-san-gallery__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    cursor: pointer;
}

.and-san-gallery__thumb.is-active {
    border-color: var(--and-accent, #ea580c);
}

.and-san-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-san-card__photo-count {
    position: absolute;
    right: -2px;
    bottom: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

.and-san-card__photo-count--santri {
    right: auto;
    left: -2px;
    bottom: -2px;
    background: var(--and-accent, #ea580c);
}

.and-main--wali-santri .and-kar-profile__section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.25);
}

.and-main--wali-santri .and-kar-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .and-main--wali-santri .and-kar-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    body.and-body--desktop-nav .and-main--wali-santri .and-kar-grid,
    .and-main--wali-santri .and-kar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

.and-main--wali-santri .and-wls-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 16px;
    min-height: 100%;
}

.and-main--wali-santri .and-wls-card__head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.and-main--wali-santri .and-wls-card__head-copy {
    min-width: 0;
}

.and-main--wali-santri .and-wls-card .and-kar-card__avatar-wrap {
    width: 72px;
    height: 72px;
    margin: 0;
}

.and-main--wali-santri .and-wls-card .and-kar-card__avatar {
    width: 72px;
    height: 72px;
    font-size: 1.15rem;
    border-radius: 18px;
}

.and-main--wali-santri .and-wls-card .and-kar-card__name {
    margin: 0 0 4px;
    font-size: 0.9375rem;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-main--wali-santri .and-wls-card__meta {
    margin: 0 0 8px;
    text-align: left;
}

.and-main--wali-santri .and-wls-card__status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.and-main--wali-santri .and-wls-card__status-pill--aktif {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.and-main--wali-santri .and-wls-card__status-pill--pending {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.and-main--wali-santri .and-wls-card__status-pill--nonaktif {
    background: rgba(148, 163, 184, 0.2);
    color: #64748b;
}

.and-main--wali-santri .and-wls-card__contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.28);
}

.and-main--wali-santri .and-wls-card__contact-item {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-main--wali-santri .and-wls-card__santri-section {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 12px;
}

.and-main--wali-santri .and-wls-card__santri-label {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-main--wali-santri .and-wls-card__santri-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(234, 88, 12, 0.12);
    color: #c2410c;
    font-size: 0.625rem;
    vertical-align: middle;
}

.and-main--wali-santri .and-wls-card__santri-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-main--wali-santri .and-wls-card__santri-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.and-main--wali-santri .and-wls-card__santri-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 154, 77, 0.18), rgba(255, 90, 0, 0.1));
    color: #9a3412;
    font-size: 0.75rem;
    font-weight: 800;
}

.and-main--wali-santri .and-wls-card__santri-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.and-main--wali-santri .and-wls-card__santri-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.and-main--wali-santri .and-wls-card__santri-copy strong {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-main--wali-santri .and-wls-card__santri-copy span {
    font-size: 0.625rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-main--wali-santri .and-wls-card__santri-more {
    display: block;
    margin-top: 2px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #ea580c;
}

.and-main--wali-santri .and-wls-card__santri-empty {
    margin: 0;
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

.and-main--wali-santri .and-wls-card .and-kar-card__cta {
    width: 100%;
    margin-top: auto;
    font-size: 0.6875rem;
    padding: 9px 12px;
}

.and-kar-grid--profile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 0.75rem;
}

.and-kar-sheet--picker {
    z-index: 1410;
}

.and-kar-sheet--picker .and-kar-sheet__backdrop {
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.and-kar-sheet--picker .and-kar-sheet__panel {
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 720px);
    padding-bottom: calc(var(--and-safe-bottom) + 16px);
}

.and-kar-sheet--picker .and-wls-picker-head {
    flex-shrink: 0;
}

.and-kar-sheet--picker .and-kar-sheet__title {
    margin-bottom: 6px;
}

.and-kar-sheet--picker .and-wls-picker-hint {
    margin: 0 0 14px;
    padding-right: 40px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #64748b;
}

.and-kar-sheet--picker .and-wls-picker-toolbar {
    flex-shrink: 0;
    margin-bottom: 12px;
}

.and-kar-sheet--picker .and-wls-picker-search {
    width: 100%;
}

.and-kar-sheet--picker .and-wls-picker-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.and-kar-sheet--picker .and-wls-picker-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overscroll-behavior: contain;
}

.and-kar-sheet--picker .and-wls-picker-foot {
    flex-shrink: 0;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.and-kar-sheet--picker .and-kar-sheet__footer-btn {
    width: 100%;
    margin: 0;
}

.and-wls-picker-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.and-wls-picker-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--and-accent, #ea580c);
}

.and-wls-picker-item .and-kar-card__avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 0.85rem;
}

.and-wls-picker-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.and-wls-picker-item__body strong {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-wls-picker-item__body span {
    font-size: 0.75rem;
    color: #64748b;
}

.and-wls-picker-item {
    z-index: 1300;
}

.and-kar-sheet.is-under-stacked-sheet .and-kar-sheet__backdrop {
    opacity: 0.15;
    pointer-events: none;
}

/* Kelas — list, detail, form */
.and-main--kelas .and-kar-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .and-main--kelas .and-kar-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

body.and-body--desktop-nav .and-main--kelas .and-kar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Wali Kelas — list */
.and-main--wali-kelas .and-kar-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .and-main--wali-kelas .and-kar-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

body.and-body--desktop-nav .and-main--wali-kelas .and-kar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.and-wlk-card__kelas {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--and-text-muted, rgba(255, 255, 255, 0.72));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-wlk-card__stats {
    font-size: 0.75rem;
    opacity: 0.85;
}

.and-wlk-card__kelas-count {
    right: auto;
    left: 0;
}

.and-kls-card__meta {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 700;
    color: #8b6914;
}

.and-kls-card__badge {
    background: linear-gradient(145deg, #fff7ed 0%, #fed7aa 100%);
    color: #9a3412;
    font-weight: 800;
    border-radius: 18px;
}

.and-kls-card__badge--lg {
    width: 88px;
    height: 88px;
    font-size: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
}

.and-kls-profile-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 14px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(161, 128, 104, 0.12);
}

.and-kls-profile-pair__col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.and-kls-profile-pair__label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a18068;
}

.and-kls-profile-pair__value {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.35;
    color: #5c4638;
    word-break: break-word;
}

.and-kls-profile-pair__empty {
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
}

.and-kls-profile-pair__wali {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.and-kls-profile-pair__wali-av {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(145deg, #f5ebe0 0%, #e8d5c4 100%);
    font-size: 0.8rem;
    font-weight: 800;
    color: #8b6914;
    overflow: hidden;
}

.and-kls-profile-pair__wali-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-kls-wali-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.and-kls-wali-block .and-kar-card__avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 0.9rem;
}

.and-kls-wali-block__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.and-kls-wali-block__body strong {
    font-size: 0.875rem;
}

.and-kls-wali-block__body span {
    font-size: 0.75rem;
    color: #64748b;
}

.and-kls-kar-pick-btn {
    width: 100%;
    text-align: left;
    min-height: 48px;
    height: auto;
    padding: 10px 12px;
    align-items: flex-start;
}

.and-kls-kar-pick-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.3;
}

.and-kls-kar-pick-label.is-placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.and-kls-kar-pick-label span {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.and-kls-kar-picker-list {
    max-height: min(50vh, 360px);
    overflow-y: auto;
}

.and-kls-kar-pick.is-selected {
    border-color: rgba(234, 88, 12, 0.45);
    background: rgba(255, 247, 237, 0.95);
}

.and-kls-sheet__footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.and-kls-sheet__footer .and-kar-sheet__footer-btn {
    flex: 1 1 120px;
}

.and-kar-sheet--kelas-profile .and-kar-sheet__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(96vw, 520px);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    padding: 12px 20px 0;
    border-radius: 1.75rem 1.75rem 0 0;
}

.and-kar-sheet--kelas-profile .and-kar-sheet__handle,
.and-kar-sheet--kelas-profile .and-kar-sheet__title {
    flex-shrink: 0;
}

.and-kar-sheet--kelas-profile .and-kar-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
}

.and-kar-sheet--kelas-profile .and-kls-sheet__footer {
    flex-shrink: 0;
    margin: 0;
    padding: 12px 0 max(var(--and-safe-bottom, 0px), 12px);
    border-top: 1px solid rgba(161, 128, 104, 0.22);
    background: #f5ece2;
}

.and-kar-sheet--kelas-profile .and-kls-sheet__footer .and-kar-sheet__footer-btn {
    width: auto;
    margin: 0;
}

.and-kls-santri-section {
    margin-bottom: 4px;
}

.and-kar-sheet--kelas-form .and-kar-sheet__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(96vw, 720px);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    padding: 12px 20px 0;
    border-radius: 1.75rem 1.75rem 0 0;
}

.and-kar-sheet--kelas-form.and-kar-sheet--wali-form .and-kar-sheet__title {
    padding-right: 7.5rem;
    flex-shrink: 0;
}

.and-kls-form-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 4px;
}

.and-kls-form-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
}

.and-kls-form-foot {
    flex-shrink: 0;
    padding: 12px 0 calc(var(--and-safe-bottom, 0px) + 16px);
    border-top: 1px solid rgba(161, 128, 104, 0.22);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(245, 236, 226, 0.98) 100%);
}

.and-kls-form-foot .and-kar-form__submit {
    margin-top: 0;
}

.and-kls-form-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.and-kls-manual-toggle {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.6875rem;
    color: #8b6914;
    margin: 0;
}

.and-kls-manual-toggle input {
    margin-right: 6px;
}

.and-kls-form-hint {
    margin: 4px 0 0;
    font-size: 0.6875rem;
    color: #94a3b8;
    line-height: 1.35;
}

.and-bf-input.is-auto {
    background: rgba(255, 247, 237, 0.65);
    color: #7c2d12;
}

.and-bf-input.is-auto[readonly] {
    cursor: default;
    opacity: 1;
}

.and-kar-sheet--kelas-form .and-kar-form-fields {
    gap: 12px;
}

.and-kls-santri-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.and-kls-santri-section__head .and-kar-profile__about-label {
    margin: 0;
}

.and-kls-santri-add {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.and-kls-santri-roster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.and-kls-santri-item {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.and-kls-santri-item__main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(161, 128, 104, 0.2);
    background: rgba(255, 255, 255, 0.72);
    text-align: left;
    cursor: pointer;
}

.and-kls-santri-item__avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    background: linear-gradient(145deg, #fff7ed 0%, #fed7aa 100%);
    color: #9a3412;
    overflow: hidden;
}

.and-kls-santri-item__avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-kls-santri-item__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.and-kls-santri-item__text strong {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-kls-santri-item__text span {
    font-size: 0.75rem;
    color: #64748b;
}

.and-kls-santri-item__remove {
    flex-shrink: 0;
    width: 44px;
    border-radius: 14px;
    border: 1px solid rgba(185, 28, 28, 0.22);
    background: #fff;
    color: #b91c1c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.and-kls-san-pick__badge {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.6875rem;
    color: #b45309;
    font-weight: 600;
}

.and-kls-san-picker-list {
    max-height: min(52vh, 400px);
}

/* Halaqoh — card list */
.and-main--halaqoh .and-kar-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .and-main--halaqoh .and-kar-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

body.and-body--desktop-nav .and-main--halaqoh .and-kar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 1024px) {
    body.and-body--desktop-nav .and-main--halaqoh .and-kar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

.and-main--halaqoh .and-hlq-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 16px;
    min-height: 100%;
}

.and-main--halaqoh .and-hlq-card__head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.and-main--halaqoh .and-hlq-card__head-copy {
    min-width: 0;
    padding-right: 5.5rem;
}

.and-main--halaqoh .and-hlq-card__santri-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.12);
    border: 1px solid rgba(255, 90, 0, 0.22);
    color: var(--and-accent, #ea580c);
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.and-main--halaqoh .and-hlq-card__santri-badge svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.and-main--halaqoh .and-hlq-card .and-kar-card__avatar-wrap {
    width: 72px;
    height: 72px;
    margin: 0;
}

.and-main--halaqoh .and-hlq-card .and-kar-card__avatar {
    width: 72px;
    height: 72px;
    font-size: 1.15rem;
    border-radius: 18px;
}

.and-main--halaqoh .and-hlq-card__badge {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.12) 100%);
    color: #047857;
    font-weight: 800;
}

.and-main--halaqoh .and-hlq-card .and-kar-card__name {
    margin: 0 0 4px;
    font-size: 0.9375rem;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-main--halaqoh .and-hlq-card__guru {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-main--halaqoh .and-hlq-card__guru-label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-right: 4px;
}

.and-main--halaqoh .and-hlq-card__status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.and-main--halaqoh .and-hlq-card__status-pill--aktif {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.and-main--halaqoh .and-hlq-card__status-pill--pending {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.and-main--halaqoh .and-hlq-card__status-pill--nonaktif {
    background: rgba(148, 163, 184, 0.2);
    color: #64748b;
}

.and-main--halaqoh .and-hlq-card__foot {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
}

.and-main--halaqoh .and-hlq-card__foot .and-kar-card__cta {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.and-main--halaqoh .and-hlq-card__actions {
    display: flex;
    flex-direction: row;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.and-hlq-form-santri-field {
    margin-top: 4px;
}

.and-kar-sheet--halaqoh-form .and-kar-form-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.and-kar-sheet--halaqoh-form .and-kar-form-field--full {
    width: 100%;
    min-width: 0;
}

.and-kar-sheet--halaqoh-form .and-ra-picker-btn.and-kls-kar-pick-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.and-kar-sheet--halaqoh-form .and-kls-kar-pick-label {
    flex: 1;
    min-width: 0;
}

.and-hlq-form-santri-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.and-hlq-form-santri-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #b45309;
}

.and-hlq-form-santri-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .and-hlq-form-santri-toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .and-hlq-form-santri-search {
        flex: 1 1 200px;
        min-width: 0;
    }
}

.and-hlq-select-all {
    margin: 0;
}

.and-hlq-form-santri-search {
    width: 100%;
}

.and-hlq-form-santri-list {
    max-height: min(42vh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(161, 128, 104, 0.22);
    border-radius: 16px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.55);
}

.and-hlq-form-santri-list .and-wls-picker-item {
    margin-bottom: 6px;
}

.and-hlq-san-pick input[type="checkbox"] {
    flex-shrink: 0;
}

.and-hlq-santri-meta {
    display: block;
    font-size: 0.6875rem;
    color: #94a3b8;
    margin-top: 2px;
}

body.and-body--desktop-nav .and-kar-sheet--halaqoh-form .and-kar-sheet__panel {
    width: min(520px, calc(100vw - var(--and-sidebar-width, 280px) - 32px));
    max-width: 520px;
    max-height: none;
    height: 100dvh;
}

body.and-body--desktop-nav .and-kar-sheet--halaqoh-form .and-hlq-form-santri-list {
    max-height: min(50vh, 420px);
}

.and-kar-sheet.is-under-stacked-sheet .and-kar-sheet__panel {
    filter: brightness(0.97);
}

.and-kar-sheet--wali-form .and-kar-sheet__panel {
    max-width: min(96vw, 720px);
    max-height: 94vh;
}

.and-kar-sheet--wali-form .and-kar-form-fields {
    gap: 12px;
}

.and-kar-sheet--no-dismiss .and-kar-sheet__backdrop {
    pointer-events: none;
}

.and-kar-sheet--wali-form .and-kar-sheet__close--prominent {
    top: 14px;
    right: 14px;
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 14px 0 12px;
    gap: 8px;
    border: 2px solid rgba(185, 28, 28, 0.28);
    background: #fff;
    color: #b91c1c;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
    font-weight: 800;
    z-index: 3;
}

.and-kar-sheet--wali-form .and-kar-sheet__close-label {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.and-kar-sheet--wali-form .and-kar-sheet__title {
    padding-right: 7.5rem;
}

.and-wls-req {
    color: #dc2626;
    font-weight: 800;
}

.and-wls-form-collapse {
    margin: 10px 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(161, 128, 104, 0.24);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(245, 236, 226, 0.92) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

.and-wls-form-collapse__toggle {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    width: 100%;
    padding: 15px 16px 14px;
    border: none;
    background: rgba(255, 154, 77, 0.07);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}

.and-wls-form-collapse__toggle:active {
    background: rgba(255, 154, 77, 0.12);
}

.and-wls-form-collapse__title {
    grid-column: 1;
    font-size: 0.875rem;
    font-weight: 800;
    color: #5c4638;
    line-height: 1.3;
}

.and-wls-form-collapse__hint {
    grid-column: 1;
    font-size: 0.6875rem;
    color: #8b7355;
    line-height: 1.4;
}

.and-wls-form-collapse__chev {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(161, 128, 104, 0.2);
    color: #9a3412;
    transition: transform 0.28s ease, background 0.2s ease;
}

.and-wls-form-collapse.is-expanded .and-wls-form-collapse__chev {
    transform: rotate(180deg);
    background: rgba(255, 154, 77, 0.14);
}

.and-wls-form-collapse.is-expanded .and-wls-form-collapse__toggle {
    border-bottom: 1px solid rgba(161, 128, 104, 0.2);
    padding-bottom: 15px;
}

.and-wls-form-collapse__panel {
    border-top: none;
    background: rgba(255, 255, 255, 0.42);
}

.and-wls-form-collapse__panel[hidden] {
    display: none;
}

.and-wls-form-collapse__fields {
    padding: 16px 14px 16px;
    margin-top: 2px;
}

.and-kar-form-fields--wali-tail {
    margin-top: 2px;
}

.and-wls-santri-pick {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.28);
}

.and-wls-santri-pick__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.and-kar-sheet--form .and-san-photos__grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-kar-sheet--form .and-san-photos__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .and-san-gallery__main {
        aspect-ratio: 16 / 10;
        max-height: 280px;
    }

    .and-san-gallery__thumb {
        width: 72px;
        height: 72px;
    }

    body.and-body--desktop-nav .and-kar-sheet--form .and-san-photos {
        padding-right: 4px;
    }
}

.and-kar-sheet__footer-btn {
    width: calc(100% - 2rem);
    margin: 0 1rem 1rem;
}

.and-kar-form__msg--ok {
    color: #0f766e;
}

.and-kar-form-field .and-bf-input.is-nisn-dup {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

body.and-buku-restock-open {
    overflow: hidden;
}

/* —— Transaksi buku — list + form wizard —— */
/* Mode mobile chips-open saja; desktop pakai .and-desktop-list-grid */
.and-body--buku-hub .and-main--btrx.and-barang-chips-open:not(.and-desktop-list-grid) .and-data-hero {
    margin-bottom: 0;
    border-radius: 24px 24px 0 0;
}

.and-body--buku-hub .and-main--btrx.and-barang-chips-open:not(.and-desktop-list-grid) .and-barang-chips--hero {
    margin-top: 0;
    margin-bottom: 14px;
}

.and-body--buku-hub .and-main--btrx .and-barang-count {
    color: rgba(255, 255, 255, 0.88);
    margin: 0 4px 10px;
}

.and-body--buku-hub .and-main--btrx.and-desktop-list-grid .and-barang-count {
    color: #475569;
}

.and-body--buku-hub .and-main--btrx .and-doc-list-host {
    margin-top: 0;
}

.and-main--btrx .and-btrx-list.and-doc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.and-btrx-card-wrap {
    display: block;
}

.and-btrx-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px 14px;
    align-items: start;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 10px 28px -12px rgba(15, 23, 42, 0.16),
        0 2px 8px rgba(15, 23, 42, 0.05);
}

.and-btrx-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.2);
}

.and-btrx-card--peach .and-btrx-card__avatar {
    background: linear-gradient(145deg, #fff7ed, #ffedd5);
    color: #c2410c;
}

.and-btrx-card--lavender .and-btrx-card__avatar {
    background: linear-gradient(145deg, #f5f3ff, #ede9fe);
    color: #6d28d9;
}

.and-btrx-card--mint .and-btrx-card__avatar {
    background: linear-gradient(145deg, #ecfdf5, #d1fae5);
    color: #047857;
}

.and-btrx-card--sky .and-btrx-card__avatar {
    background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
    color: #0369a1;
}

.and-btrx-card--rose .and-btrx-card__avatar {
    background: linear-gradient(145deg, #fff1f2, #ffe4e6);
    color: #be123c;
}

.and-btrx-card__initials {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.and-btrx-card__body {
    min-width: 0;
}

.and-btrx-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.and-btrx-card__ref {
    min-width: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.and-btrx-card__status {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    background: rgba(148, 163, 184, 0.16);
    color: #475569;
}

.and-btrx-card__status--dipinjam {
    background: #e0f2fe;
    color: #0369a1;
}

.and-btrx-card__status--parsial {
    background: #ffedd5;
    color: #c2410c;
}

.and-btrx-card__status--telat {
    background: #ffe4e6;
    color: #be123c;
}

.and-btrx-card__status--dikembalikan {
    background: #d1fae5;
    color: #047857;
}

.and-btrx-card__status--tidak_dikembalikan {
    background: #ede9fe;
    color: #6d28d9;
}

.and-btrx-card__title {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-btrx-card__sub {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.35;
}

.and-btrx-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.and-btrx-card__meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.35;
}

.and-btrx-card__meta-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: #94a3b8;
}

.and-btrx-card__meta-icon svg {
    width: 100%;
    height: 100%;
}

.and-btrx-card__meta-text {
    min-width: 0;
    word-break: break-word;
}

.and-btrx-card--link {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.and-btrx-card--link:active {
    transform: scale(0.985);
}

.and-btrx-card--link:focus-visible {
    outline: 2px solid rgba(255, 90, 0, 0.55);
    outline-offset: 2px;
}

.and-main--btrx .and-list-sentinel {
    height: 1px;
    margin-top: 4px;
}

.and-main--btrx-form.and-main--barang-form {
    gap: 10px;
    padding-bottom: calc(var(--and-safe-bottom) + 16px);
}

.and-body--buku-hub.and-body--no-nav #and-spa-outlet:has(.and-main--btrx-form) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.and-body--buku-hub.and-body--no-nav .and-barang-form-layout:has(.and-main--btrx-form) {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.and-body--buku-hub.and-body--no-nav .and-barang-form-layout:has(.and-btrx-form-shell) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.and-body--buku-hub.and-body--no-nav .and-barang-form-layout .and-btrx-form-shell {
    flex: 1;
    min-height: 0;
}

.and-body--buku-hub.and-body--no-nav .and-layout.and-barang-form-layout:has(.and-main--btrx-form) {
    min-height: 0;
}

.and-body--buku-hub.and-body--no-nav .and-main--btrx-form {
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding-top: calc(var(--and-page-inset-top) + 4px);
    padding-bottom: calc(var(--and-safe-bottom) + 4px);
}

.and-main--btrx-form.and-btrx-step-2 {
    gap: 6px;
    padding-top: calc(var(--and-page-inset-top) + 2px);
}

.and-main--btrx-form.and-btrx-step-2 .and-bf-header__sub,
.and-main--btrx-form.and-btrx-step-2 .and-bf-header__mode {
    display: none;
}

.and-main--btrx-form.and-btrx-step-2 .and-bf-header.and-form-hero {
    padding: 8px 10px;
    margin-bottom: 0;
}

.and-main--btrx-form.and-btrx-step-2 .and-bf-header__title {
    font-size: 0.9375rem;
    margin: 0;
}

.and-btrx-form-shell:not(.and-thz-form-shell) .and-main--btrx-form.and-btrx-step-2 .and-bf-steps-card {
    padding: 6px 8px;
}

.and-btrx-form-shell:not(.and-thz-form-shell) .and-main--btrx-form.and-btrx-step-2 .and-bf-step__num {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
}

.and-btrx-form-shell:not(.and-thz-form-shell) .and-main--btrx-form.and-btrx-step-2 .and-bf-step__label {
    font-size: 0.45rem;
}

.and-btrx-form-shell:not(.and-thz-form-shell) .and-main--btrx-form.and-btrx-step-2 .and-bf-steps__track {
    top: 15px;
}

.and-main--btrx-form.and-btrx-step-2 .and-bf-panel[data-panel="2"].is-active {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
}

.and-main--btrx-form.and-btrx-dock-visible {
    padding-bottom: calc(var(--and-safe-bottom) + var(--and-pjm-dock-h, 88px) + 8px);
}

body.and-body--pjm-dock:has(.and-btrx-dock) {
    --and-pjm-dock-h: 88px;
}

.and-main--btrx-form.and-btrx-dock-visible .and-btrx-pick-list--buku {
    padding-bottom: calc(var(--and-pjm-dock-h, 88px) + var(--and-safe-bottom) + 20px);
    scroll-padding-bottom: calc(var(--and-pjm-dock-h, 88px) + var(--and-safe-bottom) + 20px);
}

.and-main--btrx-form .and-bf-header,
.and-main--btrx-form .and-bf-steps-card {
    flex-shrink: 0;
}

.and-main--btrx-form .and-bf-form--wizard {
    flex: 1;
    min-height: 0;
    gap: 8px;
}

.and-main--btrx-form .and-bf-steps-card {
    padding: 8px 10px;
}

.and-main--btrx-form .and-bf-panel[data-panel="2"].is-active {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.and-main--btrx-form .and-bf-panel__content--btrx-buku {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    padding: 8px 10px 4px;
    gap: 4px;
}

.and-btrx-bk-toolbar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.and-main--btrx-form .and-bf-panel__content--btrx-buku .and-btrx-search {
    margin-bottom: 0;
    flex-shrink: 0;
    flex: none;
}

.and-main--btrx-form.and-btrx-step-2 .and-btrx-bk-count {
    margin: 0;
    padding: 0 2px;
    flex-shrink: 0;
    font-size: 0.72rem;
    line-height: 1.2;
}

.and-main--btrx-form .and-btrx-pick-list--buku {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-self: stretch;
}

.and-main--btrx-form .and-bf-panel__foot--solo {
    justify-content: stretch;
}

.and-main--btrx-form .and-bf-panel__foot--solo .and-bf-btn {
    flex: 1;
}

.and-btrx-panel__foot--step2 {
    display: none;
}

.and-btrx-form-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.and-btrx-cart-rail {
    display: none;
}

.and-main--btrx-form .and-bf-panel__content--btrx-summary {
    padding-bottom: 16px;
}

.and-main--btrx-form .and-btrx-form-header {
    display: block;
    padding: 10px 12px;
}

.and-btrx-form-header__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.and-btrx-form-header__bar .and-bf-header__info {
    flex: 1;
    min-width: 0;
}

.and-btrx-form-header__bar .and-bf-header__back,
.and-btrx-form-header__bar .and-btrx-header-reset {
    margin-top: 0;
    flex-shrink: 0;
    align-self: center;
}

.and-btrx-form-header__bar .and-btrx-header-reset {
    color: #fed7aa;
}

.and-btrx-form-header__bar .and-bf-header__back svg,
.and-btrx-form-header__bar .and-btrx-header-reset svg {
    display: block;
}

.and-main--btrx-form .and-bf-header.and-form-hero .and-bf-header__left {
    align-items: flex-start;
}

.and-main--btrx-form .and-bf-header.and-form-hero .and-bf-header__actions {
    align-self: flex-start;
    padding-top: 1px;
    margin-top: 0;
}

.and-bf-header.and-form-hero .and-btrx-header-reset {
    margin-top: 0;
    color: #fed7aa;
}

.and-btrx-qty-badge {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.14);
    border: 1px solid rgba(255, 90, 0, 0.18);
    color: #c2410c;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.and-btrx-qty-badge--summary,
.and-btrx-qty-badge--cart {
    flex-shrink: 0;
    align-self: center;
}

.and-btrx-qty-badge--dock {
    min-width: 28px;
    height: 22px;
    font-size: 0.6875rem;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.and-btrx-qty-badge--caption {
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    font-size: 0.6875rem;
}

.and-btrx-cart-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.and-pjm-cart-item .and-btrx-qty-badge--cart {
    margin-right: 4px;
}

.and-btrx-dock.and-pjm-dock--body.and-pjm-dock--portaled {
    z-index: 130;
}

.and-btrx-cart-item__thumb {
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    background: #f1f5f9;
    object-fit: cover;
}

.and-main--btrx-form .and-bf-panel__head {
    margin-bottom: 14px;
}

.and-main--btrx-form .and-bf-panel__title {
    font-size: 1.25rem;
}

.and-main--btrx-form .and-bf-panel__sub {
    font-size: 0.875rem;
    line-height: 1.45;
}

.and-main--btrx-form .and-bf-panel__content:not(.and-bf-panel__content--btrx-buku) .and-btrx-search {
    margin-bottom: 10px;
}

.and-main--btrx-form .and-btrx-search .and-dash-search__field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    border-radius: var(--and-radius-full);
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.and-main--btrx-form .and-btrx-search .and-dash-search__icon {
    position: static;
    transform: none;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5a00;
    pointer-events: none;
}

.and-main--btrx-form .and-btrx-search .and-dash-search__search-spinner {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.and-main--btrx-form .and-btrx-search .and-dash-search__input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 12px 6px 12px 2px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}

.and-main--btrx-form .and-btrx-search .and-dash-search__input:focus {
    border: none;
    box-shadow: none;
}

.and-main--btrx-form .and-btrx-search .and-dash-search__vision-btn,
.and-main--btrx-form .and-btrx-search .and-dash-search__vision-btn--inline {
    flex-shrink: 0;
    margin-right: 6px;
}

.and-btrx-santri-selected {
    margin-bottom: 12px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    max-height: 0;
    transition:
        opacity 0.32s ease,
        transform 0.32s cubic-bezier(0.22, 0.72, 0.2, 1),
        max-height 0.36s ease;
    pointer-events: none;
}

.and-btrx-santri-selected.is-shown {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 520px;
    pointer-events: auto;
}

.and-btrx-santri-card {
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(14, 165, 233, 0.22);
    box-shadow: 0 10px 28px -18px rgba(14, 116, 178, 0.45);
}

.and-btrx-santri-selected__top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.and-btrx-santri-selected__body {
    flex: 1;
    min-width: 0;
}

.and-btrx-santri-selected__avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    background: linear-gradient(145deg, #0ea5e9, #6366f1);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 18px -10px rgba(14, 116, 178, 0.55);
}

.and-btrx-santri-selected__name {
    margin: 0;
    font-weight: 800;
    font-size: 1rem;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.and-btrx-santri-selected__meta {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.and-btrx-santri-selected__badge {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: #dcfce7;
    color: #166534;
}

.and-btrx-santri-selected__change {
    flex-shrink: 0;
    border: 0;
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
}

.and-btrx-santri-details {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    gap: 8px 12px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(14, 165, 233, 0.14);
}

.and-btrx-santri-details__row {
    display: contents;
}

.and-btrx-santri-details__row dt {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.and-btrx-santri-details__row dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    word-break: break-word;
}

.and-btrx-santri-details__empty {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.and-btrx-pick-block {
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        max-height 0.32s ease;
}

.and-btrx-pick-block.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

.and-main--btrx .and-btrx-kategori-panel {
    margin: -6px 0 14px;
    padding: 10px 12px;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(51, 65, 85, 0.16);
    box-shadow: 0 10px 28px -12px rgba(15, 23, 42, 0.2);
}

.and-main--btrx .and-btrx-kategori-panel .and-barang-chips__eyebrow--inline {
    color: #64748b;
}

.and-btrx-detail-asset__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.and-btrx-detail-asset__tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}

.and-btrx-detail-asset__tag--kat {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.and-btrx-pick-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(46vh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 8px;
    padding-right: 2px;
    position: relative;
    z-index: 1;
}

.and-btrx-pick-empty {
    margin: 12px 0;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}

.and-btrx-pick-empty--inline {
    margin: 8px 0 4px;
    font-size: 0.8125rem;
}

.and-btrx-pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.and-btrx-pick-row:active:not(:disabled) {
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 4px 14px -8px rgba(255, 90, 0, 0.35);
}

.and-btrx-pick-row:disabled,
.and-btrx-pick-row.is-no-stok {
    opacity: 0.55;
}

.and-btrx-pick-row.is-no-stok .and-btrx-pick-row__sub {
    color: #b45309;
}

.and-btrx-pick-row__body {
    flex: 1;
    min-width: 0;
}

.and-btrx-pick-row__avatar,
.and-btrx-pick-row__cover {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f1f5f9;
    font-weight: 700;
    font-size: 0.82rem;
    color: #475569;
}

.and-btrx-pick-row__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.and-btrx-pick-row__avatar img,
.and-thz-san-avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.and-thz-santri-photo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    overflow: hidden;
}
.and-thz-santri-photo.and-thz-san-avatar--photo {
    background: #f1f5f9;
    box-shadow: 0 10px 22px -12px rgba(14, 116, 178, 0.45);
}
.and-thz-santri-card .and-btrx-santri-selected__top {
    align-items: center;
}
.and-main--btrx-form .and-bf-header__title {
    margin: 0;
}

.and-btrx-pick-row__title {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-btrx-pick-row__sub {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    color: #64748b;
}

.and-btrx-pick-row__sub--partial {
    color: #b45309;
    font-weight: 600;
}

.and-btrx-pick-row.is-partial.is-selected {
    border-color: rgba(245, 158, 11, 0.45);
}

.and-btrx-bk-count {
    margin: 6px 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.and-btrx-cart {
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.and-btrx-cart__title {
    margin: 0 0 8px;
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
}

.and-btrx-cart__badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--and-accent, #ff5a00);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    vertical-align: middle;
}

.and-btrx-cart__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.and-btrx-cart-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.and-btrx-cart-item__body {
    flex: 1;
    min-width: 0;
}

.and-btrx-cart-item__title {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-btrx-cart-item__sub {
    margin: 2px 0 0;
    font-size: 0.74rem;
    color: #64748b;
}

.and-btrx-cart-item__remove {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.and-btrx-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.and-btrx-summary__section {
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 16px -8px rgba(15, 23, 42, 0.08);
}

.and-btrx-summary__caption {
    margin: 0 0 10px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.and-btrx-summary__santri {
    display: flex;
    align-items: center;
    gap: 12px;
}

.and-btrx-summary__avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.9rem;
    background: linear-gradient(145deg, #0ea5e9, #6366f1);
    color: #fff;
    flex-shrink: 0;
}

.and-btrx-summary__santri-body {
    flex: 1;
    min-width: 0;
}

.and-btrx-summary__name {
    margin: 0;
    font-weight: 800;
    font-size: 1rem;
    color: #0f172a;
    line-height: 1.3;
}

.and-btrx-summary__meta {
    margin: 3px 0 0;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.4;
}

.and-btrx-summary__books {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.and-btrx-summary__book {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.and-btrx-summary__book:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.and-btrx-summary__book:first-child {
    padding-top: 0;
}

.and-btrx-summary__cover {
    width: 44px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.and-btrx-summary__cover--ph {
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}

.and-btrx-summary__book-body {
    flex: 1;
    min-width: 0;
}

.and-btrx-summary__book-title {
    margin: 0;
    font-weight: 700;
    font-size: 0.875rem;
    color: #0f172a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-btrx-summary__book-meta {
    margin: 3px 0 0;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
}

.and-btrx-summary-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.and-btrx-summary-fields .and-bf-field {
    margin: 0;
}

.and-btrx-summary-fields .and-bf-label {
    margin-bottom: 6px;
}

body.and-btrx-rak-open {
    overflow: hidden;
    padding-right: var(--and-scrollbar-comp, 0px);
}

.and-btrx-rak-sheet {
    z-index: 1260;
}

.and-btrx-rak-sheet__panel {
    padding: 14px 18px calc(var(--and-safe-bottom) + 24px);
    max-height: min(92vh, calc(100vh - var(--and-safe-top, 0px) - 12px));
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.and-btrx-rak-book {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin: 0 0 16px;
    padding: 12px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 28px -16px rgba(15, 23, 42, 0.18);
}

.and-btrx-rak-book__cover {
    width: 84px;
    height: 112px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e0f2fe, #ede9fe);
    color: #64748b;
    font-size: 1.75rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.and-btrx-rak-book__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-btrx-rak-book__body {
    min-width: 0;
    padding-top: 2px;
}

.and-btrx-rak-book__title {
    margin: 0 28px 4px 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.and-btrx-rak-book__code {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.and-btrx-rak-book__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.and-btrx-rak-book__tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}

.and-btrx-rak-book__tag--kat {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.and-btrx-rak-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 8px 24px -14px rgba(15, 23, 42, 0.14);
}

.and-btrx-rak-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.and-btrx-rak-field__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.and-btrx-rak-stok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.14);
}

.and-btrx-rak-stok__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
}

.and-btrx-rak-stok__value {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0369a1;
}

.and-btrx-rak-stepper {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: center;
}

.and-btrx-rak-stepper__btn {
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
}

.and-btrx-rak-stepper__input {
    width: 100%;
    height: 44px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    background: #fff;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.and-btrx-rak-save {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #ff6a00, #ea580c);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px -10px rgba(234, 88, 12, 0.55);
    cursor: pointer;
}

.and-btrx-rak-save:active {
    transform: scale(0.985);
}

.and-btrx-rak-msg {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #b45309;
}

.and-btrx-pick-row__cover .and-btrx-lazy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
}

body.and-btrx-rak-open.and-body--pjm-dock .and-btrx-rak-sheet .and-btrx-rak-sheet__panel,
body.and-btrx-rak-open.and-body--pjm-dock .and-btrx-rak-sheet .and-restock-sheet__panel {
    padding-bottom: calc(var(--and-safe-bottom) + var(--and-pjm-dock-h, 88px) + 32px);
    max-height: min(82vh, calc(100vh - var(--and-safe-top, 0px) - var(--and-pjm-dock-h, 88px) - 24px));
}

.and-main--btrx-detail .and-btrx-detail-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.and-main--btrx-detail #andBtrxDetailContent {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.and-btrx-detail-summary {
    margin-top: 0;
}

.and-btrx-detail-asset__sub {
    margin: 4px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

/* ==========================================================================
   Responsive adaptive pass
   Presentation-only overrides for mobile, tablet, landscape, and desktop.
   ========================================================================== */
:root {
    --and-content-compact: 640px;
    --and-content-tablet: 760px;
    --and-content-wide: 1040px;
    --and-content-desktop: 1240px;
    --and-content-readable: 680px;
    --and-shell-gutter: clamp(12px, 2.4vw, 28px);
    --and-section-gap: clamp(14px, 2vw, 22px);
    --and-card-gap: clamp(10px, 1.8vw, 16px);
    --and-fixed-shell-width: min(var(--and-content-max), calc(100vw - (var(--and-shell-gutter) * 2)));
}

@media (prefers-reduced-transparency: reduce) {
    .and-top-nav__shell {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--and-nav-shell-fallback-bg);
    }

    .and-bottom-nav__shell {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--and-bottom-nav-shell-fallback-bg);
    }

    .and-qrn-reading-nav__shell {
        background: var(--and-qrn-reading-nav-shell-fallback-bg);
    }

    .and-top-nav__icon--chip,
    .and-top-nav__icon--fab,
    .and-bottom-nav__icon {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.96);
    }

    .and-qrn-reading-nav__icon {
        background: rgba(255, 255, 255, 0.72);
    }

    .and-bottom-nav__indicator,
    .and-bottom-nav__fab {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (min-width: 768px) and (orientation: portrait) {
    :root {
        --and-content-max: var(--and-content-tablet);
    }
}

@media (min-width: 900px) {
    :root {
        --and-content-max: var(--and-content-wide);
    }
}

@media (min-width: 1280px) {
    :root {
        --and-content-max: var(--and-content-desktop);
    }
}

.and-layout {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
}

.and-main {
    width: 100%;
}

@media (min-width: 768px) {
    .and-layout:not(.and-layout--ai-chat) {
        padding-left: var(--and-shell-gutter);
        padding-right: var(--and-shell-gutter);
    }

    .and-page-header,
    .and-data-hero,
    .and-list-hero,
    .and-restock-header,
    .and-form-hero {
        margin-left: 0;
        margin-right: 0;
    }

    .and-main--dashboard,
    .and-main--barang,
    .and-main--buku,
    .and-main--favorit,
    .and-main--data-restock,
    .and-main--peminjaman,
    .and-main--st-create,
    .and-main--pjm-create,
    .and-main--rab-create,
    .and-main--pgl-create,
    .and-main--svc-create,
    .and-main--std-detail,
    .and-main--barang-form {
        display: flex;
        flex-direction: column;
        gap: var(--and-section-gap);
    }
}

@media (min-width: 768px) and (orientation: portrait) {
    .and-layout:not(.and-layout--ai-chat) {
        min-height: 100dvh;
    }

    .and-home-quick__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .and-home-quick__grid:has(.and-home-quick__card:nth-child(5)):not(:has(.and-home-quick__card:nth-child(6))) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .and-home-quick__grid:has(.and-home-quick__card:nth-child(5)):not(:has(.and-home-quick__card:nth-child(6))) .and-home-quick__card {
        grid-column: auto;
    }

    .and-stats-grid--liquid,
    .and-stats-grid,
    .and-stats-grid--rst,
    .and-stats-grid--pjm {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 840px) {
    .and-barang-grid:not(.and-barang-grid--list) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--and-card-gap);
    }

    .and-barang-toolbar-panel {
        align-items: flex-end;
        gap: 10px;
    }

    .and-barang-toolbar-panel .and-barang-select,
    .and-barang-select--filter {
        min-width: 0;
    }

    .and-doc-list,
    .and-doc-list-host {
        width: 100%;
    }
}

@media (min-width: 1180px) {
    .and-barang-grid:not(.and-barang-grid--list) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .and-body--home .and-stats-grid--liquid,
    .and-stats-grid--liquid,
    .and-stats-grid,
    .and-stats-grid--rst,
    .and-stats-grid--pjm {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .and-home-quick__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    body.and-body--desktop-nav #and-spa-app {
        min-height: 100dvh;
    }

    /* Jarak napas header halaman dari top bar / tepi viewport (semua halaman desktop) */
    body.and-body--desktop-nav {
        --and-desktop-content-top-gap: 20px;
    }

    /* Hub + topbar: inset dihitung di main (layout padding-top: 0) */
    body.and-body--desktop-nav.and-body--topbar.and-body--barang-hub,
    body.and-body--desktop-nav.and-body--topbar.and-body--buku-hub,
    body.and-body--desktop-nav.and-body--topbar.and-body--quran-hub,
    body.and-body--desktop-nav.and-body--topbar.and-body--notif,
    body.and-body--desktop-nav.and-body--topbar:has(.and-layout--inbox) {
        --and-page-inset-top: calc(var(--and-top-nav-total) + var(--and-desktop-content-top-gap));
    }

    /* Non-hub + topbar: clear top bar di layout, lalu beri gap tambahan */
    body.and-body--desktop-nav.and-body--topbar .and-layout {
        padding-top: calc(var(--and-top-nav-total) + var(--and-desktop-content-top-gap));
    }

    body.and-body--desktop-nav.and-body--topbar.and-body--barang-hub .and-layout,
    body.and-body--desktop-nav.and-body--topbar.and-body--buku-hub .and-layout,
    body.and-body--desktop-nav.and-body--topbar.and-body--quran-hub .and-layout,
    body.and-body--desktop-nav.and-body--topbar .and-layout--notif,
    body.and-body--desktop-nav.and-body--topbar:has(.and-layout--inbox) .and-layout {
        padding-top: 0;
    }

    /* Halaman tanpa top bar — tetap ada jarak dari tepi atas */
    body.and-body--desktop-nav:not(.and-body--topbar) {
        --and-page-inset-top: calc(var(--and-safe-top) + var(--and-desktop-content-top-gap));
    }

    /* Override rule mobile yang menekan padding-top jadi 6/12px di bawah top bar */
    body.and-body--desktop-nav.and-body--topbar .and-layout--ambient:not(.and-layout--home):not(.and-layout--notif):not(.and-layout--inbox):not(.and-layout--fm) > .and-main--data-restock,
    body.and-body--desktop-nav.and-body--topbar .and-layout--ambient:not(.and-layout--home) > .and-main--karyawan:not(.and-main--santri),
    body.and-body--desktop-nav.and-body--topbar .and-layout--ambient:not(.and-layout--home) > .and-main--wali-santri,
    body.and-body--desktop-nav.and-body--topbar .and-layout--ambient:not(.and-layout--home) > .and-main--kelas,
    body.and-body--desktop-nav.and-body--topbar .and-layout--ambient:not(.and-layout--home) > .and-main--ra {
        padding-top: calc(var(--and-page-inset-top, var(--and-top-nav-total)) + 12px);
    }

    body.and-body--desktop-nav .and-layout:not(.and-layout--ai-chat) {
        max-width: min(var(--and-content-max), calc(100vw - var(--and-sidebar-width, 280px) - 48px));
        padding-left: var(--and-shell-gutter);
        padding-right: var(--and-shell-gutter);
    }

    body.and-body--desktop-nav .and-nav-drawer__panel {
        border-right: 1px solid var(--and-nav-sidebar-border);
    }

    body.and-body--desktop-nav .and-pjm-dock.and-pjm-dock--body,
    body.and-body--desktop-nav .and-st-dock.and-pjm-dock--body,
    body.and-body--desktop-nav .and-svc-dock.and-pjm-dock--body {
        left: calc(var(--and-sidebar-width, 280px) + ((100vw - var(--and-sidebar-width, 280px)) / 2));
        width: min(var(--and-content-max), calc(100vw - var(--and-sidebar-width, 280px) - 48px));
        max-width: calc(100vw - var(--and-sidebar-width, 280px) - 48px);
    }

    body.and-body--desktop-nav .and-std-bar {
        left: var(--and-sidebar-width, 280px);
        width: calc(100vw - var(--and-sidebar-width, 280px));
    }

    body.and-body--desktop-nav .and-layout--std-detail > .and-std-bar:not(.and-std-bar--rab-detail) {
        left: auto;
        width: 100%;
    }

    body.and-body--desktop-nav .and-layout--std-detail > .and-std-bar--rab-detail {
        left: var(--and-sidebar-width, 280px);
        width: calc(100vw - var(--and-sidebar-width, 280px));
    }

    /* RAB detail bar ada di dalam <main> — jangan pakai lebar full viewport */
    body.and-body--desktop-nav .and-main--std-detail > .and-std-bar,
    body.and-body--desktop-nav .and-main--std-detail > .and-std-bar--rab-detail,
    body.and-body--desktop-nav.and-body--no-nav .and-main--std-detail > .and-std-bar--rab-detail {
        position: sticky;
        left: auto;
        right: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 12px 14px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    body.and-body--desktop-nav .and-main--std-detail > .and-std-bar .and-std-bar__btn,
    body.and-body--desktop-nav .and-main--std-detail > .and-std-bar--rab-detail .and-std-bar__btn {
        min-height: 44px;
        white-space: nowrap;
    }

    body.and-body--desktop-nav .and-layout--std-detail:has(.and-std-bar--rab-detail) > .and-main--std-detail {
        padding-bottom: 16px;
        scroll-padding-bottom: 88px;
    }
}

@media (max-width: 640px) {
    /* Barang mobile only — simetris; favorit & desktop tidak ikut */
    body:not(.and-body--desktop-nav) .and-main--barang:not(.and-main--favorit) .and-barang-toolbar-panel:not(.and-favorit-toolbar) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "filter fields"
            "view view";
        align-items: end;
        column-gap: 8px;
        row-gap: 10px;
    }

    body:not(.and-body--desktop-nav) .and-main--barang:not(.and-main--favorit) .and-barang-toolbar-panel:not(.and-favorit-toolbar) > .and-barang-filter-btn {
        grid-area: filter;
        align-self: end;
        margin: 0;
    }

    body:not(.and-body--desktop-nav) .and-main--barang:not(.and-main--favorit) .and-barang-toolbar-panel:not(.and-favorit-toolbar) > .and-barang-toolbar-panel__sep {
        display: none;
    }

    body:not(.and-body--desktop-nav) .and-main--barang:not(.and-main--favorit) .and-barang-toolbar-panel:not(.and-favorit-toolbar) > .and-barang-filter-fields {
        grid-area: fields;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        flex: none;
    }

    body:not(.and-body--desktop-nav) .and-main--barang:not(.and-main--favorit) .and-barang-toolbar-panel:not(.and-favorit-toolbar) > .and-barang-view-toggle {
        grid-area: view;
        width: 100%;
        justify-self: stretch;
        margin: 0;
        height: 40px;
        padding: 3px;
        border-radius: 0.875rem;
        align-self: stretch;
    }

    body:not(.and-body--desktop-nav) .and-main--barang:not(.and-main--favorit) .and-barang-toolbar-panel:not(.and-favorit-toolbar) > .and-barang-view-toggle .and-barang-view-toggle__btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 100%;
        padding: 0 10px;
        border-radius: 0.7rem;
    }

    .and-pjm-cart-bar {
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .and-pjm-cart-bar__btn {
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Favorit mobile only — Kelola + Urutkan simetris seperti barang; count di luar sidebar. */
@media (max-width: 1023px) {
    body:not(.and-body--desktop-nav) .and-main--favorit .and-favorit-toolbar.and-barang-toolbar-panel {
        display: grid !important;
        grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
        align-items: end;
        column-gap: 8px;
        row-gap: 0;
        padding: 10px 12px;
        margin-bottom: 8px;
        grid-template-areas: none !important;
    }

    body:not(.and-body--desktop-nav) .and-main--favorit .and-favorit-toolbar:has(.and-favorit-manage-btn[hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.and-body--desktop-nav) .and-main--favorit .and-favorit-manage-btn {
        width: 100%;
        height: 40px;
        min-height: 40px;
        padding: 0 12px;
        margin: 0;
        white-space: nowrap;
        font-size: 0.75rem;
    }

    body:not(.and-body--desktop-nav) .and-main--favorit .and-favorit-sort-field {
        min-width: 0;
        width: 100%;
    }

    body:not(.and-body--desktop-nav) .and-main--favorit .and-favorit-sort-field > .and-barang-select--filter {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 40px;
        min-height: 40px;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    body:not(.and-body--desktop-nav) .and-main--favorit > .and-favorit-count.and-barang-count {
        display: block;
        width: auto;
        margin: 0 4px 10px !important;
        padding: 0 4px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.25;
        font-size: 0.75rem;
        text-transform: none;
        letter-spacing: 0.02em;
    }

    body:not(.and-body--desktop-nav) .and-main--favorit > .and-barang-grid {
        padding-top: 0;
        margin-top: 0;
    }
}

/* Auth and signup cleanup */
.and-login-card--signup {
    display: flex;
    flex-direction: column;
    max-height: min(95dvh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.and-login-card--signup .and-login-card__head {
    margin-bottom: 20px;
}

.and-login-card--signup .and-login-card__logo {
    margin-bottom: 12px;
}

.and-login-card__form--signup {
    gap: 16px;
}

.and-signup-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.and-signup-steps__gap {
    width: 8px;
    flex: 0 0 8px;
}

.step-indicator {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background-color: #cbd5e1;
    transition: background-color 0.2s ease;
}

.step-indicator.is-active {
    background-color: var(--and-accent, #ff5a00);
}

.step-label {
    margin-bottom: 12px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.and-signup-step {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.and-signup-step.is-active {
    display: flex;
}

.and-signup-input--icon {
    padding: 12px 16px 12px 42px;
}

.and-signup-input--plain {
    padding: 12px 16px;
}

.and-signup-input--password {
    padding: 12px 40px 12px 42px;
}

.and-signup-phone {
    display: flex;
    gap: 8px;
}

.and-signup-phone__code {
    width: 85px;
    flex: 0 0 85px;
}

.and-signup-phone__number {
    flex: 1;
    min-width: 0;
}

.and-signup-phone__select {
    padding: 12px 24px 12px 8px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    font-size: 0.875rem;
}

.and-signup-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.and-signup-actions .and-login-submit {
    flex: 1;
    padding: 12px 20px;
}

.and-login-card--signup .and-login-submit {
    padding: 12px 20px;
}

.and-login-submit--next {
    margin-top: 8px;
}

.and-login-submit--secondary {
    background-color: #64748b;
    box-shadow: none;
}

.and-login-pwd-reqs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-left: 4px;
    color: #64748b;
    font-size: 0.72rem;
}

.and-login-pwd-reqs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.and-login-pwd-reqs__item.is-valid {
    color: #10b981;
}

.req-bullet {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

.and-login-pwd-reqs__item.is-valid .req-bullet {
    background-color: #10b981;
}

.and-login-field--signup-confirm {
    margin-bottom: 8px;
}

.and-login-card--signup .and-login-card__foot {
    margin-top: 20px;
    padding-top: 16px;
}

@media (max-height: 680px) {
    .and-login-page {
        align-items: flex-start;
        padding-top: calc(var(--and-safe-top) + 12px);
        padding-bottom: calc(var(--and-safe-bottom) + 12px);
    }

    .and-login-card--signup {
        max-height: none;
    }
}

@media (max-width: 360px) {
    .and-signup-actions {
        flex-direction: column;
    }

    .and-signup-phone {
        gap: 6px;
    }

    .and-signup-phone__code {
        width: 78px;
        flex-basis: 78px;
    }
}

/* AI chat remains readable even when the rest of the app gets wider. */
body.and-body--chat {
    --and-content-max: var(--and-content-readable);
}

body.and-body--chat .and-chat__composer--portaled {
    position: fixed;
    left: var(--and-ai-track-left, 50%);
    right: auto;
    width: var(--and-ai-track-width, min(calc(var(--and-content-max) - var(--and-space-md) * 2), calc(100vw - var(--and-space-md) * 2)));
    max-width: var(--and-ai-track-width, min(calc(var(--and-content-max) - var(--and-space-md) * 2), calc(100vw - var(--and-space-md) * 2)));
    transform: translateX(var(--and-ai-track-offset-x, -50%));
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 95;
    bottom: calc(var(--and-safe-bottom) + 8px + var(--and-keyboard-offset, 0px));
}

body.and-body--chat .and-chat__composer--portaled .and-chat__composer-shell {
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
}

body.and-body--chat:not(.and-body--no-nav) .and-chat__composer--portaled {
    bottom: calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + var(--and-keyboard-offset, 0px));
}

/* ==========================================================================
   AI Chat — desktop-only (body.and-ai-chat--desktop dari views-ai.js mount)
   Mobile tidak terpengaruh: class hanya ditambah saat viewport desktop.
   ========================================================================== */
body.and-ai-chat--desktop.and-body--chat {
    --and-content-max: min(720px, calc(100vw - var(--and-sidebar-width, 264px) - 72px));
}

body.and-ai-chat--desktop .and-ai-header__back--desktop,
body.and-ai-chat--desktop .and-ai-header__actions--desktop {
    display: flex;
}

body.and-ai-chat--desktop .and-ai-header__menu-btn--mobile,
body.and-ai-chat--desktop .and-ai-header__panel--mobile {
    display: none !important;
}

body.and-ai-chat--desktop #and-spa-app {
    background: #e8edf3;
}

body.and-ai-chat--desktop .and-layout--ai-chat {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    max-width: min(760px, calc(100vw - var(--and-sidebar-width, 264px) - 48px));
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    min-height: 0;
    margin: 12px auto 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    gap: 0;
}

body.and-ai-chat--desktop .and-ai-header {
    position: relative;
    top: auto;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-bottom: 1px solid #eef2f6;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    margin: 0;
    overflow: visible;
    transition: none;
}

body.and-ai-chat--desktop .and-ai-header::after {
    display: none;
}

body.and-ai-chat--desktop .and-ai-header__bar {
    padding: 14px 18px;
    gap: 14px;
}

body.and-ai-chat--desktop .and-ai-header__brand {
    flex: 1;
    min-width: 0;
}

body.and-ai-chat--desktop .and-ai-header__mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

body.and-ai-chat--desktop .and-ai-header__name {
    color: #0f172a;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

body.and-ai-chat--desktop .and-ai-header__status {
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
}

body.and-ai-chat--desktop .and-ai-header__status::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #22c55e;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

body.and-ai-chat--desktop .and-ai-header__back--desktop {
    width: 38px;
    height: 38px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

body.and-ai-chat--desktop .and-ai-header__back--desktop:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

body.and-ai-chat--desktop .and-ai-header__actions--desktop {
    gap: 8px;
}

body.and-ai-chat--desktop .and-ai-header__action {
    width: auto;
    height: 38px;
    padding: 0 14px;
    gap: 7px;
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

body.and-ai-chat--desktop .and-ai-header__action-label {
    display: inline;
}

body.and-ai-chat--desktop .and-ai-header__action:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

body.and-ai-chat--desktop .and-ai-header__action--danger {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

body.and-ai-chat--desktop .and-ai-header__action--danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

body.and-ai-chat--desktop .and-main--ai-chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 16px 48px -20px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

body.and-ai-chat--desktop .and-layout--ai-chat .and-chat {
    flex: 1;
    min-height: 0;
}

body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__messages {
    flex: 1;
    min-height: 0;
    padding: 20px 22px calc(var(--and-chat-composer-offset, 84px) + 28px);
    gap: 18px;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 120px);
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
    -ms-overflow-style: auto;
}

body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__messages::-webkit-scrollbar {
    display: block;
    width: 7px;
}

body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.5);
}

body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__messages::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.65);
}

body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__bubble-wrap--user,
body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__bubble-wrap:not(.and-chat__bubble-wrap--user):not(.and-chat__bubble-wrap--typing):not(.and-chat__bubble-wrap--wide) {
    max-width: 82%;
}

body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__bubble--ai {
    background: #fff;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.08);
}

body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__bubble--user {
    box-shadow: 0 4px 14px -4px rgba(255, 90, 0, 0.35);
}

body.and-ai-chat--desktop.and-body--desktop-nav .and-chat__composer--portaled,
body.and-ai-chat--desktop:not(.and-body--desktop-nav) .and-chat__composer--portaled {
    bottom: 28px;
    padding: 0 22px;
    box-sizing: border-box;
}

body.and-ai-chat--desktop .and-chat__composer--portaled .and-chat__composer-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    pointer-events: auto;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow:
        0 4px 6px -2px rgba(15, 23, 42, 0.05),
        0 16px 40px -12px rgba(15, 23, 42, 0.16);
}

body.and-ai-chat--desktop .and-chat__composer--portaled .and-chat__input-row,
body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__input-row {
    display: grid;
    grid-template-columns: 40px 40px minmax(0, 1fr) 40px;
    align-items: center;
    padding: 10px 12px;
    gap: 6px;
    min-height: 56px;
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    overflow: visible;
    box-shadow: none;
}

body.and-ai-chat--desktop .and-chat__composer--portaled .and-chat__input-row > .and-ai-dd__trigger--menu,
body.and-ai-chat--desktop .and-chat__composer--portaled .and-chat__input-row > .and-chat__vision-btn,
body.and-ai-chat--desktop .and-chat__composer--portaled .and-chat__input-row > .and-chat__send-btn,
body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__input-row > .and-ai-dd__trigger--menu,
body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__input-row > .and-chat__vision-btn,
body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__input-row > .and-chat__send-btn {
    margin: 0;
    width: 40px;
    height: 40px;
    justify-self: center;
    align-self: center;
}

body.and-ai-chat--desktop .and-chat__composer--portaled .and-chat__textarea,
body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__textarea {
    grid-column: 3;
    width: 100%;
    flex: none;
    min-width: 0;
    min-height: 40px;
    padding: 9px 8px;
    line-height: 1.4;
    align-self: center;
    text-align: left;
}

body.and-ai-chat--desktop .and-chat__composer--portaled .and-chat__input-row:focus-within,
body.and-ai-chat--desktop .and-layout--ai-chat .and-chat__input-row:focus-within {
    background: #fff;
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1);
}

/* Keep list headers visually connected to their filter chip bars (mobile/stacked only).
   Jangan pakai di desktop-nav: chips ada di sidebar, bukan menempel ke hero. */
@media (min-width: 768px) {
    body:not(.and-body--desktop-nav) .and-main.and-barang-chips-open:not(.and-desktop-list-grid),
    body:not(.and-body--desktop-nav) .and-main:has(> .and-data-hero + .and-barang-chips--hero):not(.and-desktop-list-grid) {
        gap: 0;
    }

    body:not(.and-body--desktop-nav) .and-main.and-barang-chips-open:not(.and-desktop-list-grid) > .and-data-hero,
    body:not(.and-body--desktop-nav) .and-main:has(> .and-data-hero + .and-barang-chips--hero):not(.and-desktop-list-grid) > .and-data-hero {
        margin-bottom: 0;
        border-radius: 24px 24px 0 0;
    }

    body:not(.and-body--desktop-nav) .and-main.and-barang-chips-open:not(.and-desktop-list-grid) > .and-barang-chips--hero,
    body:not(.and-body--desktop-nav) .and-main:has(> .and-data-hero + .and-barang-chips--hero):not(.and-desktop-list-grid) > .and-barang-chips--hero {
        margin-top: 0;
        margin-bottom: var(--and-section-gap);
        border-radius: 0 0 24px 24px;
    }

    body:not(.and-body--desktop-nav) .and-main.and-barang-chips-open:not(.and-desktop-list-grid) > .and-barang-chips--hero[hidden],
    body:not(.and-body--desktop-nav) .and-main:has(> .and-data-hero + .and-barang-chips--hero[hidden]):not(.and-desktop-list-grid) > .and-barang-chips--hero[hidden] {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Desktop adaptive layouts
   Desktop gets page-specific structure while mobile keeps the current UX.
   ========================================================================== */
@media (min-width: 768px) {
    .and-barang-grid:not(.and-barang-grid--list) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    }

    .and-doc-list-host,
    .and-doc-list,
    .and-sti-list-host,
    .and-sti-list,
    .and-notif-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: var(--and-card-gap);
        align-items: stretch;
    }

    .and-doc-list-host > .and-doc-list,
    .and-sti-list-host > .and-sti-list {
        display: contents;
    }

    .and-doc-list-host > .and-empty-state,
    .and-doc-list-host > .and-doc-list-empty,
    .and-sti-list-host > .and-empty-state,
    .and-notif-empty,
    .and-notif-group {
        grid-column: 1 / -1;
    }

    .and-buku-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--and-card-gap);
    }

    .and-kar-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
        gap: var(--and-card-gap);
    }

    .and-pick-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
        gap: var(--and-card-gap);
        align-items: stretch;
    }

    .and-pick-grid .and-restock-row {
        height: 100%;
        align-items: flex-start;
    }

    .and-body--home .and-home-loans {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--and-card-gap);
    }
}

@media (min-width: 1024px) {
    .and-kar-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    }

    .and-pick-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    }

    .and-body--home .and-main--dashboard {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
        gap: var(--and-section-gap);
        align-items: stretch;
    }

    .and-body--home .and-home-hero,
    .and-body--home .and-stats-grid--liquid,
    .and-body--home .and-home-quick {
        grid-column: 1 / -1;
    }

    .and-body--home .and-home-ai-st-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
        gap: var(--and-section-gap);
        align-items: stretch;
    }

    .and-body--home .and-home-ai-st-row > .and-ai-home-widget,
    .and-body--home .and-home-ai-st-row > .and-panel--home-st {
        height: 100%;
        min-height: 260px;
        margin-bottom: 0;
    }

    .and-body--home .and-home-ai-st-row > .and-panel--home-st {
        display: flex;
        flex-direction: column;
    }

    .and-body--home .and-home-ai-st-row > .and-panel--home-st .and-home-st {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
    }

    .and-body--home .and-home-ai-st-row > .and-panel--home-st .and-home-st__card {
        flex: 1 1 auto;
        width: 100%;
    }

    .and-body--home .and-panel--chart,
    .and-body--home #andDashChartWrap {
        grid-column: 1;
    }

    .and-body--home .and-panel--home-feed,
    .and-body--home #andLiveFeed,
    .and-body--home #andHomeStList {
        grid-column: 2;
    }

    .and-body--home .and-panel--home-feed {
        grid-column: 2;
    }

    .and-body--home .and-panel--chart,
    .and-body--home .and-panel--home-feed {
        height: 100%;
        margin-bottom: 0;
    }

    .and-body--home .and-panel--home-loans,
    .and-body--home .and-home-loans {
        grid-column: 1 / -1;
    }

    .and-body--home .and-home-loans {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1180px) {
    .and-barang-grid:not(.and-barang-grid--list) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    }

    .and-doc-list-host,
    .and-doc-list,
    .and-sti-list-host,
    .and-sti-list {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }

    .and-kar-grid,
    .and-pick-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    }
}

/* Form fields: two columns only where the form is naturally pairable. */
@media (min-width: 768px) {
    .and-pe-fields,
    .and-lpr-loc-grid,
    .and-lpr-form-uploads,
    .and-ps-admin-grid,
    .and-kar-form-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--and-card-gap);
    }

    .and-pe-field--full,
    .and-pe-fields .and-pe-field:has(textarea),
    .and-lpr-form-section--full,
    .and-kar-form-field--full {
        grid-column: 1 / -1;
    }

    .and-ra-field-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--and-card-gap);
        align-items: start;
    }

    .and-ra-field-row .and-ra-field,
    .and-ra-field-row .and-ra-field--half {
        margin-bottom: 0;
        min-width: 0;
    }

    .and-main--st-form .and-ra-form-section:not(.and-pjm-form-card),
    .and-main--pjm-form .and-ra-form-section:not(.and-pjm-summary-card),
    .and-main--rab-form .and-ra-form-section,
    .and-main--pgl-form .and-ra-form-section,
    .and-main--svc-form .and-ra-form-section,
    .and-main--lpr-form .and-lpr-form-section,
    .and-main--pe .and-pe-card {
        padding: clamp(16px, 2vw, 22px);
    }
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-main--st-form,
    .and-main--pjm-form,
    .and-main--rab-form,
    .and-main--pgl-form,
    .and-main--svc-form {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
        align-items: start;
        width: 100%;
        max-width: min(var(--and-content-max), 100%);
        box-sizing: border-box;
    }

    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form),
    .and-main--pjm-form {
        gap: 0 clamp(18px, 2.2vw, 32px);
    }

    .and-main--rab-form,
    .and-main--pgl-form {
        gap: clamp(20px, 2.5vw, 40px);
    }

    body:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form) .and-layout--ambient {
        padding-top: 0;
    }

    .and-main--pjm-form,
    .and-main--st-form,
    .and-main--svc-form,
    .and-main--pgl-form,
    .and-main--rab-form {
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
    }

    /* Peminjaman form — napas dari atas + header ↔ konten */
    .and-main--pjm-form {
        padding-top: 12px;
        row-gap: 14px;
        column-gap: clamp(18px, 2.2vw, 32px);
        gap: 14px clamp(18px, 2.2vw, 32px);
        grid-template-rows: auto auto;
        align-content: start;
    }

    .and-main--pjm-form > .and-pjm-form-hero.and-form-hero,
    .and-main--pjm-form > .and-restock-header.and-form-hero {
        margin: 0;
    }

    .and-main--pjm-form > .and-st-form,
    .and-main--pjm-form > #andPjmForm,
    .and-main--pjm-form > .and-pjm-summary-card,
    .and-main--pjm-form > .and-st-form-summary {
        margin-top: 0;
    }

    .and-main--pjm-form > .and-pjm-summary-card,
    .and-main--pjm-form .and-pjm-info-card {
        margin-bottom: 0;
    }

    /* Serah terima form — napas dari atas + header ↔ konten */
    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) {
        padding-top: 12px;
        row-gap: 14px;
        column-gap: clamp(18px, 2.2vw, 32px);
        gap: 14px clamp(18px, 2.2vw, 32px);
        grid-template-rows: auto auto;
        align-content: start;
    }

    /* Service form — napas atas + jarak header↔konten via margin hero (bukan row-gap) */
    .and-main--st-form.and-main--svc-form,
    .and-main--svc-form {
        padding-top: 12px;
        row-gap: 0;
        column-gap: clamp(18px, 2.2vw, 32px);
        gap: 0 clamp(18px, 2.2vw, 32px);
        grid-template-rows: auto auto;
        align-content: start;
    }

    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > .and-st-form-hero {
        margin: 0;
    }

    .and-main--svc-form > .and-st-form-hero,
    .and-main--svc-form > .and-restock-header.and-form-hero,
    .and-main--st-form.and-main--svc-form > .and-st-form-hero,
    .and-main--st-form.and-main--svc-form > .and-restock-header.and-form-hero {
        margin: 0 0 14px;
    }

    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > .and-st-form,
    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > #andStForm,
    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > .and-pjm-summary-card,
    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > .and-st-form-summary,
    .and-main--svc-form > .and-st-form,
    .and-main--svc-form > #andSvcForm,
    .and-main--svc-form > .and-pjm-summary-card,
    .and-main--svc-form > .and-st-form-summary {
        margin-top: 0;
    }

    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > .and-pjm-summary-card,
    .and-main--svc-form > .and-pjm-summary-card {
        margin-bottom: 0;
    }

    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) .and-st-form-summary__list,
    .and-main--svc-form .and-st-form-summary__list {
        min-height: 0;
        max-height: min(50vh, 480px);
    }

    .and-main--pjm-form > .and-st-form,
    .and-main--pjm-form > #andPjmForm {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

    .and-main--pjm-form > .and-st-form-summary,
    .and-main--pjm-form > .and-pjm-summary-card {
        min-width: 0;
    }

    .and-main--pjm-form .and-st-form-summary__list {
        min-height: 0;
        max-height: min(50vh, 480px);
    }

    .and-main--st-form > .and-st-form,
    .and-main--st-form > #andStForm {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

    .and-main--svc-form > .and-st-form,
    .and-main--svc-form > #andSvcForm {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

    .and-main--pgl-form > .and-st-form,
    .and-main--pgl-form > #andPglForm {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

    /* Save bar — tombol sejajar kolom form & ringkasan */
    body:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form, .and-body--rab-form) .and-pe-save-bar--duo.and-pe-save-bar--portaled {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
        gap: clamp(20px, 2.5vw, 40px);
        width: min(var(--and-content-max), calc(100vw - var(--and-sidebar-width, 0px) - (var(--and-shell-gutter) * 2)));
        max-width: calc(100vw - var(--and-sidebar-width, 0px) - (var(--and-shell-gutter) * 2));
        left: calc(var(--and-sidebar-width, 0px) + ((100vw - var(--and-sidebar-width, 0px)) / 2));
        transform: translateX(-50%);
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
        box-sizing: border-box;
    }

    body:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form, .and-body--rab-form) .and-pe-save-bar--duo.and-pe-save-bar--portaled .and-pe-cancel-btn,
    body:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form, .and-body--rab-form) .and-pe-save-bar--duo.and-pe-save-bar--portaled .and-pe-save-btn {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    body:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form, .and-body--rab-form) .and-pe-save-bar--duo.and-pe-save-bar--portaled .and-pe-cancel-btn {
        grid-column: 1;
    }

    body:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form, .and-body--rab-form) .and-pe-save-bar--duo.and-pe-save-bar--portaled .and-pe-save-btn {
        grid-column: 2;
    }

    body.and-body--desktop-nav:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form, .and-body--rab-form) .and-pe-save-bar--duo.and-pe-save-bar--portaled {
        width: min(var(--and-content-max), calc(100vw - var(--and-sidebar-width, 280px) - (var(--and-shell-gutter) * 2)));
        max-width: calc(100vw - var(--and-sidebar-width, 280px) - (var(--and-shell-gutter) * 2));
        left: calc(var(--and-sidebar-width, 280px) + ((100vw - var(--and-sidebar-width, 280px)) / 2));
    }

    /* Save bar trio (Batal / Draft / Simpan) — sejajar kolom form & ringkasan */
    body:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form) .and-pe-save-bar--trio.and-pe-save-bar--portaled {
        display: grid;
        /* Kolom 3 meniru kolom ringkasan pada grid utama (0.475 dari sisa lebar, floor 340px) agar Simpan sejajar */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(340px, calc((100% - clamp(20px, 2.5vw, 40px)) * 0.475));
        column-gap: clamp(20px, 2.5vw, 40px);
        width: min(var(--and-content-max), calc(100vw - var(--and-sidebar-width, 0px) - (var(--and-shell-gutter) * 2)));
        max-width: calc(100vw - var(--and-sidebar-width, 0px) - (var(--and-shell-gutter) * 2));
        left: calc(var(--and-sidebar-width, 0px) + ((100vw - var(--and-sidebar-width, 0px)) / 2));
        transform: translateX(-50%);
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
        box-sizing: border-box;
    }

    body:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form) .and-pe-save-bar--trio.and-pe-save-bar--portaled .and-pe-cancel-btn,
    body:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form) .and-pe-save-bar--trio.and-pe-save-bar--portaled .and-pe-save-btn {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    body.and-body--desktop-nav:is(.and-body--pjm-form, .and-body--st-form, .and-body--svc-form, .and-body--pgl-form) .and-pe-save-bar--trio.and-pe-save-bar--portaled {
        width: min(var(--and-content-max), calc(100vw - var(--and-sidebar-width, 280px) - (var(--and-shell-gutter) * 2)));
        max-width: calc(100vw - var(--and-sidebar-width, 280px) - (var(--and-shell-gutter) * 2));
        left: calc(var(--and-sidebar-width, 280px) + ((100vw - var(--and-sidebar-width, 280px)) / 2));
    }

    .and-main--st-form > .and-form-hero,
    .and-main--pjm-form > .and-form-hero,
    .and-main--rab-form > .and-form-hero,
    .and-main--pgl-form > .and-form-hero,
    .and-main--svc-form > .and-form-hero,
    .and-main--st-form > .and-st-banner,
    .and-main--pjm-form > .and-st-banner,
    .and-main--rab-form > .and-st-banner,
    .and-main--pgl-form > .and-st-banner,
    .and-main--svc-form > .and-st-banner {
        grid-column: 1 / -1;
    }

    .and-main--st-form:not(.and-main--svc-form) > .and-form-hero,
    .and-main--pjm-form > .and-form-hero,
    .and-main--pgl-form > .and-form-hero,
    .and-main--rab-form > .and-form-hero {
        grid-row: 1;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        padding: clamp(16px, 2vw, 22px);
    }

    .and-main--svc-form > .and-form-hero {
        grid-row: 1;
        margin: 0 0 14px;
        width: 100%;
        box-sizing: border-box;
        padding: clamp(16px, 2vw, 22px);
    }

    .and-main--st-form > .and-st-form,
    .and-main--st-form > #andStForm,
    .and-main--svc-form > .and-st-form,
    .and-main--svc-form > #andSvcForm,
    .and-main--pjm-form > .and-st-form,
    .and-main--pjm-form > #andPjmForm,
    .and-main--pgl-form > .and-st-form,
    .and-main--pgl-form > #andPglForm {
        display: flex;
        flex-direction: column;
        gap: clamp(14px, 1.6vw, 20px);
    }

    .and-main--st-form .and-st-form .and-pjm-form-card,
    .and-main--svc-form .and-st-form .and-pjm-form-card,
    .and-main--pjm-form .and-st-form .and-pjm-form-card,
    .and-main--pgl-form .and-st-form .and-pjm-form-card,
    .and-main--st-form .and-st-form .and-ra-form-section,
    .and-main--svc-form .and-st-form .and-ra-form-section,
    .and-main--pjm-form .and-st-form .and-ra-form-section,
    .and-main--pgl-form .and-st-form .and-ra-form-section {
        margin: 0;
    }

    .and-main--st-form > .and-st-form-summary.and-pjm-summary-card,
    .and-main--svc-form > .and-st-form-summary.and-pjm-summary-card,
    .and-main--pjm-form > .and-st-form-summary.and-pjm-summary-card,
    .and-main--pgl-form > .and-st-form-summary.and-pjm-summary-card {
        margin: 0;
    }

    .and-main--st-form > .and-st-form-summary,
    .and-main--st-form > .and-pjm-summary-card,
    .and-main--pjm-form > .and-st-form-summary,
    .and-main--pjm-form > .and-pjm-summary-card,
    .and-main--pgl-form > .and-st-form-summary,
    .and-main--pgl-form > .and-pjm-summary-card,
    .and-main--svc-form > .and-st-form-summary,
    .and-main--svc-form > .and-pjm-summary-card {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        position: sticky;
        top: 12px;
    }

    .and-main--rab-form > .and-st-form-summary,
    .and-main--rab-form > .and-pjm-summary-card {
        grid-column: 2;
        grid-row: span 4;
        position: sticky;
        top: calc(var(--and-page-inset-top) + 18px);
    }

    /* Floating forms — pastikan hero rapat ke body (spesifisitas > .and-rest-header.and-form-hero) */
    .and-main--pjm-form > header.and-restock-header.and-form-hero,
    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > header.and-restock-header.and-form-hero {
        margin: 0;
        padding: clamp(14px, 1.6vw, 18px);
    }

    .and-main--st-form.and-main--svc-form > header.and-restock-header.and-form-hero {
        margin: 0 0 14px;
        padding: clamp(14px, 1.6vw, 18px);
    }

    .and-main--pjm-form > .and-st-form-summary,
    .and-main--pjm-form > .and-pjm-summary-card,
    .and-main--st-form.and-main--svc-form > .and-st-form-summary,
    .and-main--st-form.and-main--svc-form > #andSvcForm,
    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > .and-st-form-summary,
    .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > #andStForm {
        margin-top: 0;
    }

    /* Peminjaman form — final override (main punya st-form + pjm-form) */
    .and-main.and-main--pjm-form.and-main--st-form {
        padding-top: 12px;
        row-gap: 14px;
        gap: 14px clamp(18px, 2.2vw, 32px);
        align-content: start;
    }

    .and-main.and-main--pjm-form.and-main--st-form > header.and-pjm-form-hero.and-restock-header.and-form-hero {
        margin: 0;
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .and-main.and-main--pjm-form.and-main--st-form > #andPjmForm.and-st-form {
        margin: 0;
        grid-row: 2;
        grid-column: 1;
        align-self: start;
    }

    .and-main.and-main--pjm-form.and-main--st-form > section.and-pjm-summary-card {
        margin: 0;
        grid-row: 2;
        grid-column: 2;
        align-self: start;
    }

    /* Service form — final override (main punya st-form + svc-form) */
    .and-main.and-main--st-form.and-main--svc-form {
        padding-top: 12px;
        row-gap: 0;
        gap: 0 clamp(18px, 2.2vw, 32px);
        align-content: start;
        grid-template-rows: auto auto;
    }

    .and-main.and-main--st-form.and-main--svc-form > header.and-st-form-hero.and-pjm-form-hero.and-restock-header.and-form-hero {
        margin: 0 0 14px;
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .and-main.and-main--st-form.and-main--svc-form > section.and-st-form-summary.and-pjm-summary-card {
        margin: 0;
        grid-row: 2;
        grid-column: 2;
        align-self: start;
    }

    .and-main.and-main--st-form.and-main--svc-form > #andSvcForm.and-st-form {
        margin: 0;
        grid-row: 2;
        grid-column: 1;
        align-self: start;
    }

    .and-main--lpr-form {
        max-width: min(980px, 100%);
        margin-inline: auto;
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
        padding-top: calc(var(--and-page-inset-top) + 6px);
        box-sizing: border-box;
    }

    .and-main--lpr-form > .and-lpr-form-header.and-form-hero {
        margin: 0 0 clamp(16px, 2vw, 24px);
        width: 100%;
        box-sizing: border-box;
        padding: clamp(16px, 2vw, 22px);
    }

    /* Save bar duo — sejajar header & form (kolom tunggal) */
    body.and-body--lpr-form .and-lpr-form-bar.and-pe-save-bar--duo.and-pe-save-bar--portaled {
        display: flex;
        align-items: stretch;
        gap: clamp(12px, 1.5vw, 16px);
        width: min(980px, calc(100vw - var(--and-sidebar-width, 0px) - (var(--and-shell-gutter) * 2)));
        max-width: calc(100vw - var(--and-sidebar-width, 0px) - (var(--and-shell-gutter) * 2));
        left: calc(var(--and-sidebar-width, 0px) + ((100vw - var(--and-sidebar-width, 0px)) / 2));
        transform: translateX(-50%);
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
        box-sizing: border-box;
    }

    body.and-body--lpr-form .and-lpr-form-bar.and-pe-save-bar--duo.and-pe-save-bar--portaled .and-pe-cancel-btn,
    body.and-body--lpr-form .and-lpr-form-bar.and-pe-save-bar--duo.and-pe-save-bar--portaled .and-pe-save-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    body.and-body--desktop-nav.and-body--lpr-form .and-lpr-form-bar.and-pe-save-bar--duo.and-pe-save-bar--portaled {
        width: min(980px, calc(100vw - var(--and-sidebar-width, 280px) - (var(--and-shell-gutter) * 2)));
        max-width: calc(100vw - var(--and-sidebar-width, 280px) - (var(--and-shell-gutter) * 2));
        left: calc(var(--and-sidebar-width, 280px) + ((100vw - var(--and-sidebar-width, 280px)) / 2));
    }

    .and-main--rab-form {
        display: block;
        padding-top: calc(var(--and-page-inset-top) + 6px);
        box-sizing: border-box;
    }

    .and-main--rab-form > .and-rab-form-header.and-form-hero,
    .and-main--rab-form > .and-form-hero {
        margin: 0 0 clamp(12px, 1.5vw, 18px);
    }

    .and-main--rab-form .and-rab-form-scroll {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
        gap: clamp(20px, 2.5vw, 40px);
        align-items: start;
        padding: 0 0 32px;
    }

    .and-main--rab-form .and-rab-form-card--summary {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: calc(var(--and-page-inset-top) + 18px);
    }

    .and-main--rab-form .and-rab-form {
        grid-column: 1;
        grid-row: 1;
    }

    .and-main--pe {
        max-width: min(980px, 100%);
        margin-inline: auto;
    }
}

/* Desktop content filter sidebars for multi-filter list pages. */
@media (min-width: 1024px) {
    .and-main--barang,
    .and-main--buku,
    .and-main--favorit,
    #andRstMain,
    #andStMain,
    #andStiMain,
    #andRabMain.and-main--data-restock,
    #andRkatMain.and-main--data-restock,
    #andRealMain,
    #andPglMain.and-main--data-restock,
    #andSvcMain {
        display: grid;
        grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
        gap: var(--and-section-gap);
        align-items: start;
    }

    .and-main--barang > .and-data-hero,
    .and-main--buku > .and-data-hero,
    .and-main--favorit > .and-data-hero,
    #andRstMain > .and-data-hero,
    #andStMain > .and-data-hero,
    #andStiMain > .and-data-hero,
    #andRabMain.and-main--data-restock > .and-data-hero,
    #andRkatMain.and-main--data-restock > .and-data-hero,
    #andRealMain > .and-data-hero,
    #andPglMain.and-main--data-restock > .and-data-hero,
    #andSvcMain > .and-data-hero,
    .and-main--barang > .and-barang-search-loading,
    .and-main--barang > .and-barang-search-notice,
    .and-main--barang > .and-barang-ai-wrap,
    .and-main--buku > .and-barang-search-loading,
    .and-main--buku > .and-barang-search-notice,
    .and-main--buku > .and-barang-ai-wrap,
    .and-main--favorit > .and-barang-search-notice {
        grid-column: 1 / -1;
    }

    .and-main--barang > .and-data-hero,
    .and-main--buku > .and-data-hero,
    .and-main--favorit > .and-data-hero,
    #andRstMain > .and-data-hero,
    #andStMain > .and-data-hero,
    #andStiMain > .and-data-hero,
    #andRabMain.and-main--data-restock > .and-data-hero,
    #andRkatMain.and-main--data-restock > .and-data-hero,
    #andRealMain > .and-data-hero,
    #andPglMain.and-main--data-restock > .and-data-hero,
    #andSvcMain > .and-data-hero {
        grid-row: 1;
    }

    .and-main--barang > .and-barang-chips--hero,
    .and-main--barang > .and-barang-toolbar-panel,
    .and-main--buku > .and-barang-chips--hero,
    .and-main--buku > .and-barang-toolbar-panel,
    .and-main--favorit > .and-barang-chips--hero,
    .and-main--favorit > .and-barang-toolbar-panel,
    #andRstMain > .and-barang-chips--hero,
    #andStMain > .and-barang-chips--hero,
    #andStMain > .and-barang-chips--inline,
    #andStMain > .and-barang-toolbar-panel,
    #andStiMain > .and-barang-chips--hero,
    #andStiMain > .and-barang-chips--inline,
    #andStiMain > .and-barang-toolbar-panel,
    #andRabMain.and-main--data-restock > .and-barang-chips--hero,
    #andRabMain.and-main--data-restock > .and-barang-chips--inline,
    #andRabMain.and-main--data-restock > .and-barang-toolbar-panel,
    #andRkatMain.and-main--data-restock > .and-barang-chips--hero,
    #andRkatMain.and-main--data-restock > .and-barang-chips--inline,
    #andRkatMain.and-main--data-restock > .and-barang-toolbar-panel,
    #andRealMain > .and-barang-chips--inline,
    #andRealMain > .and-barang-toolbar-panel,
    #andPglMain.and-main--data-restock > .and-barang-chips--inline,
    #andPglMain.and-main--data-restock > .and-barang-toolbar-panel,
    #andSvcMain > .and-barang-chips--hero,
    #andSvcMain > .and-barang-toolbar-panel {
        grid-column: 1;
        position: sticky;
        top: calc(var(--and-page-inset-top) + 18px);
        margin: 0;
        border-radius: 24px;
    }

    .and-main--barang > .and-barang-chips--hero,
    .and-main--buku > .and-barang-chips--hero,
    .and-main--favorit > .and-barang-chips--hero,
    #andRstMain > .and-barang-chips--hero,
    #andStMain > .and-barang-chips--hero,
    #andStiMain > .and-barang-chips--hero,
    #andRabMain.and-main--data-restock > .and-barang-chips--hero,
    #andRkatMain.and-main--data-restock > .and-barang-chips--hero,
    #andSvcMain > .and-barang-chips--hero {
        grid-row: 2;
    }

    .and-main--barang > .and-barang-toolbar-panel,
    .and-main--buku > .and-barang-toolbar-panel,
    .and-main--favorit > .and-barang-toolbar-panel,
    #andStMain > .and-barang-toolbar-panel,
    #andStiMain > .and-barang-toolbar-panel,
    #andRabMain.and-main--data-restock > .and-barang-toolbar-panel,
    #andRkatMain.and-main--data-restock > .and-barang-toolbar-panel,
    #andRealMain > .and-barang-toolbar-panel,
    #andPglMain.and-main--data-restock > .and-barang-toolbar-panel,
    #andSvcMain > .and-barang-toolbar-panel {
        grid-row: 3;
    }

    .and-main--barang > .and-barang-toolbar-panel,
    .and-main--buku > .and-barang-toolbar-panel,
    .and-main--favorit > .and-barang-toolbar-panel,
    #andStMain > .and-barang-toolbar-panel,
    #andStiMain > .and-barang-toolbar-panel,
    #andRabMain.and-main--data-restock > .and-barang-toolbar-panel,
    #andRkatMain.and-main--data-restock > .and-barang-toolbar-panel,
    #andRealMain > .and-barang-toolbar-panel,
    #andPglMain.and-main--data-restock > .and-barang-toolbar-panel,
    #andSvcMain > .and-barang-toolbar-panel {
        align-self: start;
        margin-top: 0;
        flex-direction: column;
        align-items: stretch;
        background: rgba(255, 255, 255, 0.86);
        border-radius: 24px;
    }

    .and-main--barang > .and-barang-toolbar-panel .and-barang-filter-fields,
    .and-main--buku > .and-barang-toolbar-panel .and-barang-filter-fields,
    .and-main--favorit > .and-barang-toolbar-panel .and-barang-filter-fields,
    #andStMain > .and-barang-toolbar-panel .and-barang-filter-fields,
    #andStiMain > .and-barang-toolbar-panel .and-barang-filter-fields,
    #andRabMain.and-main--data-restock > .and-barang-toolbar-panel .and-barang-filter-fields,
    #andRkatMain.and-main--data-restock > .and-barang-toolbar-panel .and-barang-filter-fields,
    #andRealMain > .and-barang-toolbar-panel .and-barang-filter-fields,
    #andPglMain.and-main--data-restock > .and-barang-toolbar-panel .and-barang-filter-fields,
    #andSvcMain > .and-barang-toolbar-panel .and-barang-filter-fields {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .and-main--barang > .and-barang-toolbar-panel__sep,
    .and-main--buku > .and-barang-toolbar-panel__sep,
    .and-main--favorit > .and-barang-toolbar-panel__sep {
        display: none;
    }

    .and-main--barang > .and-barang-count,
    .and-main--barang > .and-barang-grid,
    .and-main--barang > #andBarangVisionResultsHeading,
    .and-main--buku > .and-barang-count,
    .and-main--buku > .and-buku-list,
    .and-main--favorit > .and-barang-count,
    .and-main--favorit > .and-barang-grid,
    #andRstMain > .and-rst-hero,
    #andRstMain > .and-barang-count,
    #andRstMain > .and-doc-list-host,
    #andStMain > .and-rst-hero,
    #andStMain > .and-barang-count,
    #andStMain > .and-doc-list-host,
    #andStiMain > .and-rst-hero,
    #andStiMain > .and-st-gedung-hero,
    #andStiMain > .and-barang-count,
    #andStiMain > .and-sti-list-host,
    #andRabMain.and-main--data-restock > .and-rst-hero,
    #andRabMain.and-main--data-restock > .and-barang-count,
    #andRabMain.and-main--data-restock > .and-doc-list-host,
    #andRkatMain.and-main--data-restock > .and-rst-hero,
    #andRkatMain.and-main--data-restock > .and-barang-count,
    #andRkatMain.and-main--data-restock > .and-doc-list-host,
    #andRealMain > .and-rst-hero,
    #andRealMain > .and-barang-count,
    #andRealMain > .and-doc-list-host,
    #andPglMain.and-main--data-restock > .and-rst-hero,
    #andPglMain.and-main--data-restock > .and-barang-count,
    #andPglMain.and-main--data-restock > .and-doc-list-host,
    #andSvcMain > .and-st-banner,
    #andSvcMain > .and-rst-hero,
    #andSvcMain > .and-barang-count,
    #andSvcMain > .and-doc-list-host {
        grid-column: 2;
    }

    .and-main--barang > .and-barang-count,
    .and-main--favorit > .and-barang-count,
    .and-main--barang > #andBarangVisionResultsHeading {
        grid-row: 2;
        align-self: end;
        margin-bottom: 0;
    }

    .and-main--barang > .and-barang-grid,
    .and-main--favorit > .and-barang-grid {
        grid-row: 3;
        align-self: start;
    }

    #andRstMain > .and-rst-hero,
    #andStMain > .and-rst-hero,
    #andStiMain > .and-rst-hero,
    #andStiMain > .and-st-gedung-hero,
    #andRabMain.and-main--data-restock > .and-rst-hero,
    #andRkatMain.and-main--data-restock > .and-rst-hero,
    #andRealMain > .and-rst-hero,
    #andPglMain.and-main--data-restock > .and-rst-hero,
    #andSvcMain > .and-st-banner,
    #andSvcMain > .and-rst-hero {
        grid-row: 2;
    }

    #andRstMain > .and-barang-count,
    #andStMain > .and-barang-count,
    #andStiMain > .and-barang-count,
    #andRabMain.and-main--data-restock > .and-barang-count,
    #andRkatMain.and-main--data-restock > .and-barang-count,
    #andRealMain > .and-barang-count,
    #andPglMain.and-main--data-restock > .and-barang-count,
    #andSvcMain > .and-barang-count {
        grid-row: 3;
        align-self: end;
        margin-bottom: 0;
    }

    #andRstMain > .and-doc-list-host,
    #andStMain > .and-doc-list-host,
    #andStiMain > .and-sti-list-host,
    #andRabMain.and-main--data-restock > .and-doc-list-host,
    #andRkatMain.and-main--data-restock > .and-doc-list-host,
    #andRealMain > .and-doc-list-host,
    #andPglMain.and-main--data-restock > .and-doc-list-host,
    #andSvcMain > .and-doc-list-host {
        grid-row: 4;
        align-self: start;
    }

    .and-main--barang.and-barang-chips-open > .and-data-hero,
    .and-main--buku.and-barang-chips-open > .and-data-hero,
    .and-main--favorit.and-barang-chips-open > .and-data-hero,
    .and-main--data-restock.and-barang-chips-open > .and-data-hero {
        border-radius: 24px;
    }

    .and-main--barang > .and-barang-chips--hero,
    .and-main--buku > .and-barang-chips--hero,
    .and-main--favorit > .and-barang-chips--hero,
    #andRstMain > .and-barang-chips--hero,
    #andStMain > .and-barang-chips--hero,
    #andStiMain > .and-barang-chips--hero,
    #andRabMain.and-main--data-restock > .and-barang-chips--hero,
    #andRkatMain.and-main--data-restock > .and-barang-chips--hero,
    #andSvcMain > .and-barang-chips--hero {
        padding: 14px;
        box-shadow: 0 18px 38px -28px rgba(15, 23, 42, 0.7);
        max-width: 230px;
    }

    .and-main--barang > .and-barang-chips--hero .and-barang-chips,
    .and-main--buku > .and-barang-chips--hero .and-barang-chips,
    .and-main--favorit > .and-barang-chips--hero .and-barang-chips,
    #andRstMain > .and-barang-chips--hero .and-barang-chips,
    #andStMain > .and-barang-chips--hero .and-barang-chips,
    #andStiMain > .and-barang-chips--hero .and-barang-chips,
    #andRabMain.and-main--data-restock > .and-barang-chips--hero .and-barang-chips,
    #andRkatMain.and-main--data-restock > .and-barang-chips--hero .and-barang-chips,
    #andSvcMain > .and-barang-chips--hero .and-barang-chips {
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .and-main--barang > .and-barang-chips--hero,
    .and-main--favorit > .and-barang-chips--hero {
        grid-column: 1 / -1;
        grid-row: 2;
        position: relative;
        top: auto;
        max-width: none;
        width: 100%;
    }

    .and-main--barang > .and-barang-toolbar-panel,
    .and-main--favorit > .and-barang-toolbar-panel {
        grid-row: 3;
    }

    .and-main--barang > .and-barang-count,
    .and-main--barang > #andBarangVisionResultsHeading {
        grid-row: 3;
        align-self: start;
        margin-top: 0;
        margin-bottom: 0;
        z-index: 1;
    }

    .and-main--barang > .and-barang-grid {
        grid-row: 3;
        padding-top: 34px;
    }

    .and-main--barang > .and-barang-chips--hero .and-chip-track--barang,
    .and-main--favorit > .and-barang-chips--hero .and-chip-track--barang,
    #andRstMain > .and-barang-chips--hero .and-chip-track--barang,
    #andStMain > .and-barang-chips--hero .and-chip-track--barang,
    #andStiMain > .and-barang-chips--hero .and-chip-track--barang,
    #andRabMain.and-main--data-restock > .and-barang-chips--hero .and-chip-track--barang,
    #andRkatMain.and-main--data-restock > .and-barang-chips--hero .and-chip-track--barang,
    #andSvcMain > .and-barang-chips--hero .and-chip-track--barang {
        border-radius: 18px;
    }

    .and-doc-list-host .and-doc-card,
    .and-doc-list .and-doc-card,
    .and-sti-list-host .and-sti-card,
    .and-sti-list .and-sti-card {
        height: 100%;
    }

    .and-doc-list-host .and-st-doc-foot,
    .and-doc-list .and-st-doc-foot {
        align-items: flex-start;
    }

    .and-doc-list-host .and-st-doc-actions,
    .and-doc-list .and-st-doc-actions {
        flex: 1 0 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

    .and-doc-list-host .and-st-doc-btn,
    .and-doc-list .and-st-doc-btn {
        min-width: 72px;
    }

    .and-doc-list-host .and-st-doc-btn--accent,
    .and-doc-list .and-st-doc-btn--accent {
        min-width: 108px;
    }
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    body.and-body--desktop-nav .and-main--barang,
    body.and-body--desktop-nav .and-main--buku,
    body.and-body--desktop-nav .and-main--favorit,
    .and-main--barang,
    .and-main--buku,
    .and-main--favorit {
        --and-list-below-hero: clamp(24px, 3vw, 36px);
        display: grid;
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
        column-gap: clamp(18px, 2.4vw, 28px);
        row-gap: var(--and-list-below-hero);
        align-items: start;
        align-content: start;
        height: fit-content;
        min-height: 0;
        flex: none;
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
    }

    /* Paksa jarak header↔kiri/kanan di desktop-nav (chips-open tidak boleh gap:0) */
    body.and-body--desktop-nav .and-main--barang,
    body.and-body--desktop-nav .and-main--buku,
    body.and-body--desktop-nav .and-main--favorit,
    body.and-body--desktop-nav .and-main--barang.and-barang-chips-open,
    body.and-body--desktop-nav .and-main--buku.and-barang-chips-open,
    body.and-body--desktop-nav .and-main--favorit.and-barang-chips-open {
        gap: var(--and-list-below-hero);
        row-gap: var(--and-list-below-hero);
    }

    .and-layout--ambient > .and-main--barang,
    .and-layout--ambient > .and-main--buku,
    .and-layout--ambient > .and-main--favorit {
        flex: none;
        height: fit-content;
    }

    .and-main--barang > .and-data-hero,
    .and-main--buku > .and-data-hero,
    .and-main--favorit > .and-data-hero {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 0;
        border-radius: 24px;
    }

    body.and-body--desktop-nav .and-main--barang > .and-desktop-filter-sidebar,
    body.and-body--desktop-nav .and-main--favorit > .and-desktop-filter-sidebar,
    body.and-body--desktop-nav .and-main--buku > .and-desktop-filter-sidebar {
        gap: 14px;
        padding-top: 2px;
    }

    body.and-body--desktop-nav .and-main--favorit > .and-barang-grid {
        padding-top: 2px;
    }

    body.and-body--desktop-nav .and-main--barang > .and-barang-count,
    body.and-body--desktop-nav .and-main--barang > #andBarangVisionResultsHeading {
        padding-top: 2px;
    }

    body.and-body--desktop-nav .and-main--buku > .and-desktop-content-column {
        padding-top: 2px;
        gap: 12px;
    }

    /* Desktop sidebar toolbar: kolom vertikal (jangan ikut grid mobile) */
    body.and-body--desktop-nav .and-main--barang .and-desktop-filter-sidebar .and-barang-toolbar-panel:not(.and-favorit-toolbar),
    body.and-body--desktop-nav .and-main--buku .and-desktop-filter-sidebar .and-buku-toolbar.and-barang-toolbar-panel,
    body.and-body--desktop-nav .and-main--favorit .and-desktop-filter-sidebar .and-favorit-toolbar.and-barang-toolbar-panel {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
        grid-template-columns: none;
        grid-template-areas: none;
    }

    body.and-body--desktop-nav .and-main--barang .and-desktop-filter-sidebar .and-barang-filter-fields,
    body.and-body--desktop-nav .and-main--buku .and-desktop-filter-sidebar .and-barang-filter-fields {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        flex: none;
    }

    body.and-body--desktop-nav .and-main--barang .and-desktop-filter-sidebar .and-barang-view-toggle {
        width: 100%;
        margin-left: 0;
        align-self: stretch;
        height: 40px;
        padding: 3px;
        border-radius: 16px;
        background: rgba(15, 23, 42, 0.06);
    }

    body.and-body--desktop-nav .and-main--barang .and-desktop-filter-sidebar .and-barang-view-toggle__btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 100%;
        border-radius: 12px;
    }

    .and-main--barang > .and-desktop-filter-sidebar,
    .and-main--favorit > .and-desktop-filter-sidebar {
        grid-column: 1;
        grid-row: 2 / span 2;
        position: static;
        top: auto;
        align-self: start;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        width: 100%;
        min-width: 0;
        z-index: auto;
    }

    .and-main--buku > .and-desktop-filter-sidebar {
        grid-column: 1;
        grid-row: 2 / span 2;
        position: static;
        top: auto;
        align-self: start;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        width: 100%;
        min-width: 0;
        z-index: auto;
    }

    .and-main--barang .and-desktop-filter-sidebar .and-barang-filter-fields,
    .and-main--buku .and-desktop-filter-sidebar .and-barang-filter-fields,
    .and-main--favorit .and-desktop-filter-sidebar .and-barang-filter-fields {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
    }

    .and-main--barang .and-desktop-filter-sidebar .and-barang-filter-field,
    .and-main--buku .and-desktop-filter-sidebar .and-barang-filter-field,
    .and-main--favorit .and-desktop-filter-sidebar .and-barang-filter-field {
        gap: 7px;
    }

    .and-main--barang .and-desktop-filter-sidebar .and-barang-filter-field__label,
    .and-main--buku .and-desktop-filter-sidebar .and-barang-filter-field__label,
    .and-main--favorit .and-desktop-filter-sidebar .and-barang-filter-field__label {
        padding-left: 2px;
        color: rgba(254, 215, 170, 0.92);
        letter-spacing: 0.12em;
    }

    .and-main--barang .and-desktop-filter-sidebar .and-barang-select,
    .and-main--buku .and-desktop-filter-sidebar .and-barang-select,
    .and-main--favorit .and-desktop-filter-sidebar .and-barang-select,
    .and-main--barang .and-desktop-filter-sidebar .and-barang-select--filter,
    .and-main--buku .and-desktop-filter-sidebar .and-barang-select--filter,
    .and-main--favorit .and-desktop-filter-sidebar .and-barang-select--filter {
        min-width: 0;
        width: 100%;
        min-height: 42px;
        border-radius: 14px;
        background-color: rgba(255, 255, 255, 0.94);
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: none;
    }

    .and-main--barang .and-desktop-filter-sidebar .and-barang-view-toggle,
    .and-main--favorit .and-desktop-filter-sidebar .and-barang-view-toggle {
        width: 100%;
        justify-content: stretch;
        padding: 3px;
        border-radius: 16px;
        background: rgba(15, 23, 42, 0.06);
        margin: 0;
        align-self: stretch;
        height: 40px;
    }

    .and-main--barang .and-desktop-filter-sidebar .and-barang-view-toggle__btn,
    .and-main--favorit .and-desktop-filter-sidebar .and-barang-view-toggle__btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        min-height: 0;
        height: 100%;
        border-radius: 12px;
    }

    .and-main--barang > .and-barang-count,
    .and-main--barang > #andBarangVisionResultsHeading {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin: 0;
        padding: 2px 12px 10px;
    }

    .and-main--barang > .and-barang-grid {
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: start;
    }

    .and-main--favorit > .and-barang-count {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin: 0;
        padding: 2px 4px 10px;
        z-index: 2;
    }

    .and-main--favorit > .and-barang-grid {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        padding: 4px 10px 4px;
    }

    .and-main--barang > .and-barang-grid {
        padding: 34px 10px 4px;
    }

    /* Desktop-nav: count di atas list (jangan overlap — padding 34px sebelumnya diganti gap baris) */
    body.and-body--desktop-nav .and-main--barang > .and-barang-count,
    body.and-body--desktop-nav .and-main--barang > #andBarangVisionResultsHeading {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin: 0;
        padding: 2px 4px 10px;
        z-index: 2;
        position: relative;
        background: transparent;
    }

    body.and-body--desktop-nav .and-main--barang > .and-barang-search-loading,
    body.and-body--desktop-nav .and-main--barang > .and-barang-search-notice,
    body.and-body--desktop-nav .and-main--barang > .and-barang-ai-wrap {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin-top: 28px;
    }

    body.and-body--desktop-nav .and-main--barang > .and-barang-grid {
        grid-column: 2;
        grid-row: 3;
        padding: 0 10px 4px;
        margin-top: 0;
    }

    body.and-body--desktop-nav .and-main--favorit > .and-barang-grid {
        padding: 2px 10px 4px;
    }

    body.and-body--desktop-nav .and-main--barang > .and-desktop-filter-sidebar,
    body.and-body--desktop-nav .and-main--favorit > .and-desktop-filter-sidebar {
        grid-row: 2 / span 2;
    }

    .and-main--buku > .and-desktop-content-column {
        grid-column: 2;
        grid-row: 2 / span 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
    }

    .and-main--buku .and-desktop-content-column > .and-barang-count {
        margin: 0;
        padding: 0 2px 2px;
    }

    .and-main--buku .and-desktop-content-column > .and-buku-list {
        padding: 0;
        margin: 0;
    }

    .and-main--favorit .and-desktop-filter-sidebar .and-favorit-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .and-main--favorit .and-desktop-filter-sidebar .and-favorit-manage-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        gap: 8px;
        padding: 0 14px;
        border: 0;
        border-radius: 16px;
        background: linear-gradient(145deg, #ff7a1a 0%, #ff5a00 100%);
        color: #fff;
        font-size: 0.8125rem;
        font-weight: 900;
        letter-spacing: 0.02em;
        box-shadow: 0 16px 30px -18px rgba(255, 90, 0, 0.75);
    }

    .and-main--favorit .and-desktop-filter-sidebar .and-favorit-manage-btn svg {
        width: 18px;
        height: 18px;
    }

    .and-main--favorit .and-desktop-filter-sidebar .and-favorit-sort-field {
        width: 100%;
        min-width: 0;
    }

    .and-main--favorit .and-desktop-filter-sidebar .and-favorit-sort-field > .and-barang-select--filter {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-left: 0;
        min-height: 42px;
        border-radius: 14px;
        background-color: #fff;
        border-color: rgba(100, 116, 139, 0.18);
    }

    body.and-body--desktop-nav .and-main--favorit > .and-favorit-count.and-barang-count {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin: 0;
        padding: 2px 4px 10px;
        text-transform: none;
        letter-spacing: 0.02em;
    }

    body.and-body--desktop-nav .and-main--favorit > .and-barang-grid {
        grid-column: 2;
        grid-row: 3;
        padding: 0 10px 4px;
    }

    .and-desktop-list-grid {
        --and-list-below-hero: clamp(18px, 2.2vw, 24px);
        display: grid;
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
        column-gap: clamp(18px, 2.4vw, 28px);
        row-gap: var(--and-list-below-hero);
        align-items: start;
        align-content: start;
        height: fit-content;
        min-height: 0;
        flex: none;
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
    }

    .and-layout--ambient > .and-desktop-list-grid {
        flex: none;
        height: fit-content;
    }

    .and-desktop-list-grid > .and-data-hero {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .and-desktop-list-grid > .and-desktop-filter-sidebar {
        grid-column: 1;
        grid-row: 2;
        position: static;
        top: auto;
        align-self: start;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        width: 100%;
        min-width: 0;
        z-index: auto;
    }

    .and-desktop-list-grid > .and-desktop-content-column {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
    }

    .and-desktop-list-grid .and-desktop-content-column > .and-rst-hero,
    .and-desktop-list-grid .and-desktop-content-column > .and-st-gedung-hero,
    .and-desktop-list-grid .and-desktop-content-column > .and-st-banner {
        margin: 0;
    }

    .and-desktop-list-grid .and-desktop-content-column > .and-barang-count {
        margin: 0;
        padding: 0 2px 2px;
    }

    .and-desktop-list-grid .and-desktop-content-column > .and-doc-list-host,
    .and-desktop-list-grid .and-desktop-content-column > .and-sti-list-host {
        margin: 0;
    }

    /* Transaksi buku — desktop grid + sidebar filter */
    .and-main--btrx.and-desktop-list-grid {
        --and-list-below-hero: clamp(22px, 2.8vw, 32px);
        width: 100%;
        max-width: none;
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
        column-gap: clamp(24px, 3vw, 36px);
        row-gap: var(--and-list-below-hero);
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
    }

    body.and-body--buku-hub .and-main--btrx.and-desktop-list-grid {
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
        overflow-x: visible;
    }

    body.and-body--desktop-nav .and-layout:has(> .and-main--btrx.and-desktop-list-grid) {
        max-width: min(1100px, calc(100vw - var(--and-sidebar-width, 264px) - 48px));
    }

    /* Header penuh rounded — jangan menyambung ke chips seperti mode mobile chips-open */
    .and-main--btrx.and-desktop-list-grid > .and-data-hero.and-form-hero,
    body.and-body--buku-hub .and-main--btrx.and-desktop-list-grid > .and-data-hero.and-form-hero {
        margin-bottom: 0;
        border-radius: 24px;
        overflow: hidden;
    }

    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar {
        gap: 14px;
        padding-top: 2px;
    }

    /* Pakai palette gelap sidebar (sama halaman list lain) — jangan override putih */
    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips--hero,
    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips--panel,
    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-btrx-kategori-panel {
        margin: 0;
        width: 100%;
        color: #fff7ed;
    }

    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips__eyebrow,
    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips__eyebrow--inline {
        margin: 0 0 10px 2px;
        color: rgba(254, 215, 170, 0.92);
        font-size: 0.625rem;
        font-weight: 800;
        letter-spacing: 0.12em;
    }

    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips,
    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chip {
        color: rgba(255, 247, 237, 0.88);
    }

    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chip {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chip.is-active {
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.28);
        color: #ffffff;
    }

    .and-main--btrx.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips {
        flex-wrap: wrap;
        gap: 8px;
    }

    .and-main--btrx.and-desktop-list-grid > .and-desktop-content-column {
        gap: 14px;
        padding-top: 2px;
    }

    .and-main--btrx.and-desktop-list-grid > .and-desktop-content-column > .and-barang-count {
        margin: 0;
        padding: 0 2px;
        color: var(--and-text-secondary, #475569);
    }

    .and-main--btrx.and-desktop-list-grid > .and-desktop-content-column > .and-doc-list-host {
        margin: 0;
    }

    /* Data service — desktop: chip filter 1 kolom, rapatkan hero ↔ konten list */
    body.and-body--desktop-nav #andSvcMain.and-main--data-restock.and-desktop-list-grid {
        --and-list-below-hero: clamp(8px, 1vw, 12px);
        display: grid;
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
        column-gap: clamp(18px, 2.4vw, 28px);
        row-gap: var(--and-list-below-hero);
        gap: var(--and-list-below-hero) clamp(18px, 2.4vw, 28px);
        align-items: start;
        align-content: start;
        padding-top: 12px;
    }

    body.and-body--desktop-nav #andSvcMain.and-desktop-list-grid > .and-desktop-filter-sidebar {
        gap: 10px;
        padding-top: 0;
        align-self: start;
    }

    body.and-body--desktop-nav #andSvcMain.and-desktop-list-grid > .and-desktop-content-column {
        gap: 6px;
        padding-top: 0;
    }

    body.and-body--desktop-nav #andSvcMain.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips--panel .and-barang-chips,
    body.and-body--desktop-nav #andSvcMain.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips.and-chip-track--barang {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 18px;
        padding: 8px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
    }

    body.and-body--desktop-nav #andSvcMain.and-desktop-list-grid > .and-desktop-filter-sidebar :is(.and-barang-chip, .and-chip-track .and-barang-chip) {
        width: 100%;
        flex: none;
        min-width: 0;
        justify-content: center;
    }

    /* Data laporan — desktop: hero utuh, chip status di sidebar kiri */
    body.and-body--desktop-nav #andLprMain.and-main--data-restock.and-desktop-list-grid {
        --and-list-below-hero: clamp(8px, 1vw, 12px);
        display: grid;
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
        column-gap: clamp(18px, 2.4vw, 28px);
        row-gap: var(--and-list-below-hero);
        gap: var(--and-list-below-hero) clamp(18px, 2.4vw, 28px);
        align-items: start;
        align-content: start;
        padding-top: 12px;
    }

    body.and-body--desktop-nav #andLprMain.and-desktop-list-grid > .and-data-hero {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 0;
        border-radius: 24px;
    }

    body.and-body--desktop-nav #andLprMain.and-desktop-list-grid > .and-desktop-filter-sidebar {
        gap: 10px;
        padding-top: 0;
        align-self: start;
    }

    body.and-body--desktop-nav #andLprMain.and-desktop-list-grid > .and-desktop-content-column {
        gap: 6px;
        padding-top: 0;
    }

    body.and-body--desktop-nav #andLprMain.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips--panel .and-barang-chips,
    body.and-body--desktop-nav #andLprMain.and-desktop-list-grid > .and-desktop-filter-sidebar .and-barang-chips.and-chip-track--barang {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 18px;
        padding: 8px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
    }

    body.and-body--desktop-nav #andLprMain.and-desktop-list-grid > .and-desktop-filter-sidebar :is(.and-barang-chip, .and-chip-track .and-barang-chip) {
        width: 100%;
        flex: none;
        min-width: 0;
        justify-content: center;
    }

    body.and-body--desktop-nav #andLprMain.and-desktop-list-grid > .and-desktop-content-column > .and-barang-count {
        margin: 0;
        padding: 0 2px;
        color: var(--and-text-secondary, #475569);
    }

    body.and-body--desktop-nav #andLprMain.and-desktop-list-grid > .and-desktop-content-column > .and-doc-list-host {
        margin: 0;
    }

    /* Form mengambang — desktop-nav: padding layout nol (inset cukup di main) */
    body.and-body--desktop-nav:is(.and-body--st-form, .and-body--svc-form, .and-body--pjm-form) .and-layout--ambient {
        padding-top: 0;
    }

    body.and-body--desktop-nav.and-body--st-form .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) {
        padding-top: 12px;
        row-gap: 14px;
    }

    body.and-body--desktop-nav.and-body--svc-form .and-main--svc-form,
    body.and-body--desktop-nav.and-body--svc-form .and-main.and-main--st-form.and-main--svc-form {
        padding-top: 12px;
        row-gap: 0;
        gap: 0 clamp(18px, 2.2vw, 32px);
        align-content: start;
    }

    body.and-body--desktop-nav.and-body--pjm-form .and-main--pjm-form,
    body.and-body--desktop-nav.and-body--pjm-form .and-main.and-main--pjm-form.and-main--st-form {
        padding-top: 12px;
        row-gap: 14px;
    }

    body.and-body--desktop-nav.and-body--st-form .and-main--st-form:not(.and-main--pjm-form):not(.and-main--svc-form) > .and-st-form-hero,
    body.and-body--desktop-nav.and-body--pjm-form .and-main--pjm-form > .and-pjm-form-hero,
    body.and-body--desktop-nav.and-body--pjm-form .and-main--pjm-form > .and-restock-header.and-form-hero,
    body.and-body--desktop-nav:is(.and-body--st-form, .and-body--pjm-form) .and-main > .and-form-hero {
        margin-bottom: 0;
        padding: clamp(14px, 1.6vw, 18px);
    }

    body.and-body--desktop-nav.and-body--svc-form .and-main.and-main--st-form.and-main--svc-form > header.and-form-hero,
    body.and-body--desktop-nav.and-body--svc-form .and-main--svc-form > .and-st-form-hero {
        margin: 0 0 14px;
        padding: clamp(14px, 1.6vw, 18px);
    }

    /* Detail RAB / std-detail — header actions simetris di desktop */
    body.and-body--desktop-nav .and-main--std-detail .and-std-header.and-bf-header.and-form-hero,
    body.and-body--desktop-nav .and-main--std-detail .and-std-header.and-form-hero {
        align-items: center;
        overflow: visible;
        padding: 14px 16px;
    }

    body.and-body--desktop-nav .and-main--std-detail .and-std-header .and-std-header__back,
    body.and-body--desktop-nav .and-main--std-detail .and-std-header .and-bf-header__back,
    body.and-body--desktop-nav .and-main--std-detail .and-std-header .and-std-header__print,
    body.and-body--desktop-nav .and-main--std-detail .and-std-header .and-form-hero__action {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        border-radius: 12px;
    }

    body.and-body--desktop-nav .and-main--std-detail .and-bf-header__left {
        align-items: center;
    }

    body.and-body--desktop-nav .and-main--std-detail .and-bf-header__actions {
        padding-top: 0;
        align-self: center;
    }

    /* Inbox desktop — jarak top bar, gap header→sidebar/list, header rounded penuh */
    .and-main--inbox.and-desktop-list-grid {
        --and-list-below-hero: clamp(24px, 3vw, 36px);
        padding-top: calc(var(--and-page-inset-top) + 4px);
        padding-bottom: calc(var(--and-safe-bottom) + 28px);
        padding-left: clamp(16px, 2vw, 24px);
        padding-right: clamp(16px, 2vw, 24px);
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
        column-gap: clamp(24px, 3vw, 36px);
        row-gap: var(--and-list-below-hero);
    }

    body.and-body--desktop-nav .and-layout--inbox > .and-main--inbox.and-desktop-list-grid > .and-data-hero,
    body.and-body--desktop-nav .and-layout--inbox > .and-main--inbox.and-desktop-list-grid > .and-data-hero.and-form-hero,
    body.and-body--desktop-nav .and-main--inbox.and-desktop-list-grid.and-barang-chips-open > .and-data-hero {
        margin: 0;
        border-radius: 24px;
        overflow: hidden;
    }

    body.and-body--desktop-nav .and-layout--inbox > .and-main--inbox.and-desktop-list-grid > .and-desktop-filter-sidebar {
        gap: 14px;
        padding-top: 4px;
    }

    body.and-body--desktop-nav .and-layout--inbox > .and-main--inbox.and-desktop-list-grid > .and-desktop-content-column {
        gap: 14px;
        padding-top: 4px;
        min-width: 0;
    }

    .and-main--inbox.and-desktop-list-grid .and-inbox-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
    }

    /* FAB pensil — jangan mengambang di atas tinggi bottom-nav yang sudah disembunyikan */
    body.and-body--desktop-nav .and-inbox-fab,
    body.and-body--desktop-nav .and-inbox-fab.and-inbox-fab--portaled {
        position: fixed;
        right: calc(var(--and-shell-gutter) + 8px);
        bottom: calc(var(--and-shell-gutter) + 8px);
        left: auto;
        z-index: 50;
    }

    body.and-body--desktop-nav.and-inbox-overlay-open .and-inbox-fab,
    body.and-body--desktop-nav.and-inbox-panel-open .and-inbox-fab {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Modal tulis / baca pesan — kartu dialog di desktop-nav (bukan sheet mobile penuh) */
    body.and-body--desktop-nav .and-inbox-panel {
        top: calc(var(--and-top-nav-total, 64px) + 16px);
        left: auto;
        right: var(--and-shell-gutter);
        bottom: var(--and-shell-gutter);
        width: min(620px, calc(100vw - var(--and-sidebar-width, 280px) - 72px));
        max-width: 620px;
        height: auto;
        max-height: none;
        border-radius: 28px;
        transform: translate3d(0, 20px, 0);
        box-shadow: 0 30px 80px -32px rgba(15, 23, 42, 0.42);
        overflow: hidden;
    }

    body.and-body--desktop-nav .and-inbox-panel.is-open {
        transform: translate3d(0, 0, 0);
    }

    body.and-body--desktop-nav .and-inbox-panel.is-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.38);
        z-index: -1;
        pointer-events: none;
        border-radius: 0;
    }

    body.and-body--desktop-nav .and-inbox-panel__header.and-form-hero {
        border-radius: 28px 28px 0 0;
        padding-top: 14px;
    }

    body.and-body--desktop-nav .and-inbox-compose,
    body.and-body--desktop-nav .and-inbox-messages {
        min-height: 0;
    }

    body.and-body--desktop-nav .and-inbox-reply-dock {
        padding-bottom: 12px;
        border-radius: 0 0 28px 28px;
    }

    body.and-body--desktop-nav .and-inbox-reply-modal {
        align-items: center;
        justify-content: center;
        padding: var(--and-shell-gutter);
    }

    body.and-body--desktop-nav .and-inbox-reply-modal__sheet {
        width: min(520px, 100%);
        max-width: 520px;
        max-height: min(80vh, 720px);
        border-radius: 24px;
        transform: translateY(16px) scale(0.98);
    }

    body.and-body--desktop-nav .and-inbox-reply-modal.is-open .and-inbox-reply-modal__sheet {
        transform: translateY(0) scale(1);
    }

    body.and-body--desktop-nav .and-inbox-reply-modal__header.and-form-hero {
        border-radius: 24px 24px 0 0;
        padding-top: 14px;
    }

    body.and-body--desktop-nav .and-inbox-folder-sheet {
        align-items: center;
        justify-content: center;
        padding: var(--and-shell-gutter);
    }

    body.and-body--desktop-nav .and-inbox-folder-sheet__panel {
        width: min(420px, 100%);
        max-width: 420px;
        border-radius: 24px;
        transform: translateY(16px);
    }

    body.and-body--desktop-nav .and-inbox-folder-sheet.is-open .and-inbox-folder-sheet__panel {
        transform: translateY(0);
    }

    body.and-body--desktop-nav .and-inbox-folder-sheet__header.and-form-hero {
        border-radius: 24px 24px 0 0;
    }

    body.and-body--desktop-nav .and-inbox-folder-sheet__body {
        padding-bottom: 20px;
    }

    .and-main--ra.and-desktop-list-grid {
        padding-top: 0;
        padding-bottom: calc(var(--and-nav-total) + 8px);
    }

    .and-main--ra .and-desktop-content-column--ra {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
        gap: clamp(18px, 2.4vw, 28px);
        align-items: start;
    }

    .and-main--ra .and-desktop-content-column--ra > .and-ra-calendar-card {
        grid-column: 1;
        margin: 0;
        min-width: 0;
    }

    .and-main--ra .and-desktop-content-column--ra > .and-ra-event-list {
        grid-column: 2;
        margin: 0;
        position: sticky;
        top: calc(var(--and-page-inset-top) + 18px);
        max-height: calc(100dvh - var(--and-page-inset-top) - 48px);
        overflow: auto;
    }

    .and-fm.and-desktop-list-grid {
        padding-top: 0;
        padding-bottom: calc(var(--and-nav-total) + 10px);
        max-width: none;
    }

    .and-fm.and-desktop-list-grid .and-desktop-content-column > .and-fm-home,
    .and-fm.and-desktop-list-grid .and-desktop-content-column > .and-fm-browse {
        margin: 0;
        min-width: 0;
    }

    .and-fm.and-desktop-list-grid .and-fm-browse.is-open {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .and-fm.and-desktop-list-grid .and-fm-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* Global desktop sidebar — brown badges, hidden scrollbars, capped chip lists */
    .and-desktop-filter-sidebar {
        --and-sidebar-badge-bg:
            linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(124, 45, 18, 0.92)),
            radial-gradient(circle at 12% 0%, rgba(255, 90, 0, 0.42), transparent 42%);
        gap: 14px;
        align-self: start;
        max-height: calc(100dvh - var(--and-page-inset-top) - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .and-desktop-filter-sidebar::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips--hero, .and-barang-chips--inline, .and-barang-chips--panel) {
        position: static;
        top: auto;
        align-self: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 14px;
        border: 0;
        border-radius: 26px;
        background: var(--and-sidebar-badge-bg);
        box-shadow: none;
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        max-height: 300px;
        flex-shrink: 0;
        overflow: hidden;
    }

    .and-desktop-filter-sidebar :is(.and-barang-toolbar-panel, .and-favorit-toolbar, .and-buku-toolbar),
    .and-desktop-filter-sidebar :is(.and-ra-legend, .and-ra-view-tabs),
    .and-desktop-filter-sidebar .and-fm-cats {
        position: static;
        top: auto;
        align-self: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 14px;
        border: 0;
        border-radius: 26px;
        background: var(--and-sidebar-badge-bg);
        box-shadow: none;
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex-shrink: 0;
        overflow: hidden;
    }

    .and-desktop-filter-sidebar :is(.and-barang-toolbar-panel, .and-favorit-toolbar, .and-buku-toolbar) {
        display: flex;
        flex-direction: column;
        padding: 16px;
        gap: 14px;
        grid-template-columns: none;
        grid-template-areas: none;
    }

    .and-desktop-filter-sidebar .and-barang-toolbar-panel > .and-barang-filter-btn,
    .and-desktop-filter-sidebar .and-barang-toolbar-panel > .and-barang-toolbar-panel__sep,
    .and-desktop-filter-sidebar .and-barang-toolbar-panel > .and-barang-filter-fields,
    .and-desktop-filter-sidebar .and-barang-toolbar-panel > .and-barang-view-toggle {
        grid-area: auto;
        width: 100%;
        align-self: stretch;
    }

    .and-desktop-filter-sidebar .and-barang-chips--hero::after {
        display: none;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips__eyebrow, .and-barang-chips__eyebrow--inline) {
        flex-shrink: 0;
        margin: 0 0 10px 2px;
        color: rgba(254, 215, 170, 0.92);
        letter-spacing: 0.12em;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips, .and-chip-track--barang, .and-fm-cats) {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips, .and-chip-track--barang, .and-fm-cats)::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips, .and-chip-track--barang) {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        margin: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips--hero, .and-barang-chips--inline, .and-barang-chips--panel) > .and-barang-chips {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips--hero, .and-barang-chips--inline, .and-barang-chips--panel) > .and-barang-chips:has(.and-chip-track--barang) {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips--hero, .and-barang-chips--inline, .and-barang-chips--panel) .and-chip-track--barang {
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.08);
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips--hero, .and-barang-chips--inline, .and-barang-chips--panel) :is(.and-barang-chip, .and-chip-track .and-barang-chip) {
        width: 100%;
        flex: none;
        min-width: 0;
        justify-content: center;
        padding: 10px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: rgba(255, 247, 237, 0.82);
        box-shadow: none;
        font-weight: 600;
        text-shadow: none;
    }

    .and-desktop-filter-sidebar :is(.and-barang-chips--hero, .and-barang-chips--inline, .and-barang-chips--panel) :is(.and-barang-chip.is-active, .and-chip-track .and-barang-chip.is-active) {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.22);
        color: #fff;
        font-weight: 800;
    }

    .and-desktop-filter-sidebar :is(.and-barang-filter-btn, .and-barang-toolbar-panel__sep) {
        display: none;
    }

    .and-desktop-filter-sidebar .and-barang-filter-fields {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .and-desktop-filter-sidebar .and-barang-filter-field__label,
    .and-desktop-filter-sidebar .and-pjm-filter-active,
    .and-desktop-filter-sidebar .and-st-filter-toolbar__summary {
        color: rgba(254, 215, 170, 0.92);
    }

    .and-desktop-filter-sidebar :is(.and-barang-select, .and-barang-select--filter) {
        min-width: 0;
        width: 100%;
        min-height: 42px;
        border-radius: 14px;
        background-color: rgba(255, 255, 255, 0.94);
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: none;
    }

    .and-desktop-filter-sidebar :is(.and-ra-legend, .and-ra-view-tabs) {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .and-desktop-filter-sidebar .and-ra-view-tabs {
        padding: 12px;
    }

    .and-desktop-filter-sidebar .and-ra-legend__item {
        color: rgba(255, 247, 237, 0.82);
    }

    .and-desktop-filter-sidebar .and-ra-view-tab {
        width: 100%;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: rgba(255, 247, 237, 0.82);
    }

    .and-desktop-filter-sidebar .and-ra-view-tab.is-active {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.22);
        color: #fff;
    }

    .and-desktop-filter-sidebar .and-fm-cats {
        gap: 8px;
        height: auto;
        max-height: 300px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .and-desktop-filter-sidebar .and-fm-cat {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: rgba(255, 247, 237, 0.92);
    }

    .and-desktop-filter-sidebar .and-fm-cat:active {
        background: rgba(255, 255, 255, 0.16);
    }

    .and-fm.and-desktop-list-grid .and-fm-browse {
        position: static;
        inset: auto;
        z-index: auto;
        transform: none;
        transition: none;
        background: transparent;
        padding-bottom: 0;
        min-height: 0;
    }

    .and-fm.and-desktop-list-grid .and-fm-browse.is-open {
        transform: none;
    }
}

/* Desktop split panes and side rails. */
@media (min-width: 1024px) {
    .and-layout--item-detail .and-item-detail-body:not(.and-btrx-detail-body) {
        display: grid;
        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.25fr);
        gap: var(--and-section-gap);
        align-items: start;
    }

    .and-layout--item-detail .and-item-gallery {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: calc(var(--and-page-inset-top) + 18px);
    }

    .and-layout--item-detail .and-item-detail-card {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .and-layout--item-detail .and-item-tabs-wrap:not(.and-item-tabs-wrap--in-card),
    .and-layout--item-detail .and-item-action-strip {
        min-width: 0;
    }

    .and-layout--item-detail .and-item-tabs-wrap:not(.and-item-tabs-wrap--in-card) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Inbox panels: default wide desktop fallback (tanpa sidebar) */
    .and-inbox-panel {
        left: auto;
        right: var(--and-shell-gutter);
        bottom: var(--and-shell-gutter);
        width: min(620px, calc(100vw - 72px));
        max-width: 620px;
        border-radius: 28px;
        transform: translate3d(0, 24px, 0);
        box-shadow: 0 30px 80px -32px rgba(15, 23, 42, 0.42);
    }

    .and-inbox-panel.is-open {
        transform: translate3d(0, 0, 0);
    }

    .and-inbox-panel.is-open::before {
        display: none;
    }

    /* Dengan sidebar: pastikan lebar & posisi menang atas rule generik di atas */
    body.and-body--desktop-nav .and-inbox-panel {
        top: calc(var(--and-top-nav-total, 64px) + 16px);
        right: var(--and-shell-gutter);
        width: min(620px, calc(100vw - var(--and-sidebar-width, 280px) - 72px));
        transform: translate3d(0, 20px, 0);
    }

    body.and-body--desktop-nav .and-inbox-panel.is-open {
        transform: translate3d(0, 0, 0);
    }

    body.and-body--desktop-nav .and-inbox-panel.is-open::before {
        display: block;
        background: rgba(15, 23, 42, 0.38);
    }

    .and-kar-sheet {
        justify-content: flex-end;
        align-items: stretch;
    }

    .and-kar-sheet__panel {
        width: min(480px, calc(100vw - var(--and-sidebar-width, 0px) - 48px));
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 28px 0 0 28px;
        transform: translate3d(100%, 0, 0);
    }

    body.and-body--desktop-nav .and-kar-sheet__panel {
        width: min(500px, calc(100vw - var(--and-sidebar-width, 280px) - 48px));
    }

    body.and-body--desktop-nav .and-kar-sheet--wali-form .and-kar-sheet__panel,
    body.and-body--desktop-nav .and-kar-sheet--kelas-form .and-kar-sheet__panel {
        width: min(720px, calc(100vw - var(--and-sidebar-width, 280px) - 32px));
        max-height: none;
        height: 100dvh;
    }

    body.and-body--desktop-nav .and-kar-sheet--kelas-profile .and-kar-sheet__panel {
        width: min(520px, calc(100vw - var(--and-sidebar-width, 280px) - 32px));
        max-height: none;
        height: 100dvh;
    }

    body.and-body--desktop-nav .and-kar-sheet--picker .and-kar-sheet__panel {
        width: min(560px, calc(100vw - var(--and-sidebar-width, 280px) - 32px));
        max-height: none;
        height: 100dvh;
    }

    .and-kar-sheet__handle {
        display: none;
    }

    /* ── Profile — desktop: kolom seimbang, kartu identitas vertikal; mobile tak berubah ── */
    body.and-body--desktop-nav .and-layout--prof {
        max-width: min(1180px, calc(100vw - var(--and-sidebar-width, 280px) - 48px));
        width: 100%;
        margin-inline: auto;
        padding-top: calc(var(--and-page-inset-top, var(--and-safe-top)) + var(--and-desktop-content-top-gap, 20px));
        padding-bottom: calc(var(--and-safe-bottom) + 28px);
        padding-left: var(--and-shell-gutter);
        padding-right: var(--and-shell-gutter);
        background: transparent;
        box-sizing: border-box;
    }

    body.and-body--desktop-nav .and-layout--prof .and-main.and-prof {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(18px, 2.4vw, 28px);
        row-gap: 0;
        align-items: start;
        align-content: start;
        padding: 0;
        min-height: 0;
        background: transparent;
        overflow: visible;
    }

    /* Panel kiri — sticky, lebar penuh kolom */
    body.and-body--desktop-nav .and-layout--prof .and-prof-aside {
        display: flex;
        flex-direction: column;
        gap: 0;
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        position: sticky;
        top: calc(var(--and-page-inset-top, var(--and-safe-top)) + 12px);
        width: 100%;
        min-width: 0;
        border-radius: 22px;
        overflow: hidden;
        border: 1px solid rgba(15, 23, 42, 0.07);
        box-shadow: 0 20px 48px -28px rgba(15, 23, 42, 0.28);
        background: #fff;
    }

    /* Hero — identitas vertikal terpusat */
    body.and-body--desktop-nav .and-layout--prof .and-prof-hero {
        position: relative;
        border-radius: 0;
        padding: 26px 20px 24px;
        overflow: hidden;
        box-shadow: none;
        background: linear-gradient(160deg, #0b1220 0%, #115e59 50%, #0d9488 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-hero__mesh {
        opacity: 0.12;
        mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-hero__curve,
    body.and-body--desktop-nav .and-layout--prof .and-prof-hero__back,
    body.and-body--desktop-nav .and-layout--prof .and-prof-hero__toolbar {
        display: none;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-hero__identity {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 10px;
        width: 100%;
    }

    /* Foto — satu ring bersih, tanpa kotak pembungkus ganda */
    body.and-body--desktop-nav .and-layout--prof .and-prof-avatar-wrap {
        position: relative;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        width: auto;
        height: auto;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-avatar {
        width: 104px;
        height: 104px;
        border-radius: 26px;
        border: 3px solid rgba(255, 255, 255, 0.95);
        font-size: 1.65rem;
        flex-shrink: 0;
        margin: 0;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.15),
            0 14px 36px -10px rgba(0, 0, 0, 0.5);
        background: rgba(255, 255, 255, 0.08);
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-skeleton--hero {
        width: 104px;
        height: 104px;
        border-radius: 26px;
        flex-shrink: 0;
        margin: 0;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-avatar img {
        border-radius: 22px;
    }

    /* Badge — menempel rapi di sudut foto */
    body.and-body--desktop-nav .and-layout--prof .and-prof-avatar__badge {
        right: -4px;
        bottom: -4px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: linear-gradient(145deg, #4ade80, #16a34a);
        border: 2.5px solid #fff;
        color: #fff;
        box-shadow: 0 2px 8px rgba(22, 163, 74, 0.5);
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-avatar__badge svg {
        width: 12px;
        height: 12px;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-name {
        font-family: inherit;
        font-size: 1.22rem;
        font-weight: 800;
        line-height: 1.25;
        margin: 2px 0 0;
        letter-spacing: -0.02em;
        color: #fff;
        max-width: 100%;
        word-break: break-word;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-role {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 5px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.13);
        border: 1px solid rgba(255, 255, 255, 0.22);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.11em;
        color: rgba(255, 255, 255, 0.95);
        max-width: 100%;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-role::before {
        content: none;
        display: none;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-hero__identity:has(.and-prof-avatar__badge) .and-prof-role::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4ade80;
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
        flex-shrink: 0;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-empty-note {
        font-size: 0.6875rem;
        line-height: 1.45;
        color: rgba(226, 232, 240, 0.8);
        max-width: 260px;
    }

    /* Stats — footer panel kiri */
    body.and-body--desktop-nav .and-layout--prof .and-prof-stats {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 14px 10px 16px;
        border-radius: 0;
        gap: 0;
        box-sizing: border-box;
        background: #fff;
        border: 0;
        box-shadow: none;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-stats__item {
        padding: 2px 6px;
        gap: 5px;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-stats__item + .and-prof-stats__item {
        border-left-color: rgba(226, 232, 240, 0.85);
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-stats__item strong {
        font-size: 1.15rem;
        color: #0f172a;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-stats__item span {
        font-size: 0.5625rem;
        letter-spacing: 0.12em;
        color: #94a3b8;
    }

    /* Menu kanan — panel seimbang dengan kiri */
    body.and-body--desktop-nav .and-layout--prof .and-prof-body {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        min-width: 0;
        align-self: start;
        width: 100%;
        background: #fff;
        border: 1px solid rgba(15, 23, 42, 0.07);
        border-radius: 22px;
        box-shadow: 0 20px 48px -28px rgba(15, 23, 42, 0.22);
        box-sizing: border-box;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-group__label {
        padding: 0 4px;
        margin-bottom: 8px;
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-group__card {
        border-radius: 16px;
        border: 1px solid rgba(226, 232, 240, 0.9);
        box-shadow: none;
        overflow: hidden;
        background: #f8fafc;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-row {
        padding: 12px 14px;
        gap: 12px;
        background: #fff;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-row + .and-prof-row {
        border-top: 1px solid rgba(241, 245, 249, 0.95);
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-row__icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-row__title {
        font-size: 0.9rem;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-row__sub {
        font-size: 0.75rem;
        white-space: normal;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-skeleton--nav {
        height: 280px;
        border-radius: 16px;
    }

    @media (hover: hover) and (pointer: fine) {
        body.and-body--desktop-nav .and-layout--prof .and-prof-row:hover {
            background: rgba(248, 250, 252, 0.98);
        }
    }
}

/* Profile — layar lebar: foto sedikit lebih besar */
@media (min-width: 1280px) {
    body.and-body--desktop-nav .and-layout--prof {
        max-width: min(1240px, calc(100vw - var(--and-sidebar-width, 280px) - 48px));
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-avatar {
        width: 112px;
        height: 112px;
        border-radius: 28px;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-skeleton--hero {
        width: 112px;
        height: 112px;
        border-radius: 28px;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-avatar img {
        border-radius: 24px;
    }

    body.and-body--desktop-nav .and-layout--prof .and-prof-name {
        font-size: 1.3rem;
    }
}

/* ── Profile sub-pages (edit / akun / pengaturan) — desktop only ── */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    /* Shared wide shell */
    body.and-body--desktop-nav .and-layout--pe,
    body.and-body--desktop-nav .and-layout--ps-modern {
        max-width: min(1120px, calc(100vw - var(--and-sidebar-width, 280px) - 48px));
        width: 100%;
        margin-inline: auto;
        padding-left: var(--and-shell-gutter);
        padding-right: var(--and-shell-gutter);
        padding-bottom: calc(var(--and-safe-bottom) + 28px);
        box-sizing: border-box;
    }

    body.and-body--desktop-nav.and-body--topbar .and-layout--pe,
    body.and-body--desktop-nav.and-body--topbar .and-layout--ps-modern {
        padding-top: calc(var(--and-top-nav-total) + var(--and-desktop-content-top-gap, 20px));
    }

    body.and-body--desktop-nav:not(.and-body--topbar) .and-layout--pe,
    body.and-body--desktop-nav:not(.and-body--topbar) .and-layout--ps-modern {
        padding-top: calc(var(--and-page-inset-top, var(--and-safe-top)) + var(--and-desktop-content-top-gap, 20px));
    }

    /* —— Edit Profil + Email/Sandi —— */
    body.and-body--desktop-nav .and-layout--pe .and-main--pe {
        max-width: none;
        width: 100%;
        margin-inline: 0;
        padding: 0 0 calc(var(--and-safe-bottom) + 100px);
        gap: clamp(16px, 2vw, 24px);
        background: transparent;
    }

    body.and-body--desktop-nav .and-layout--pe .and-item-detail-header.and-form-hero,
    body.and-body--desktop-nav .and-layout--pe .and-bf-header.and-form-hero {
        margin: 0;
        padding: clamp(16px, 1.8vw, 22px);
        border-radius: 24px;
    }

    body.and-body--desktop-nav .and-layout--pe .and-pe-form {
        display: grid;
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
        column-gap: clamp(20px, 2.4vw, 32px);
        row-gap: 16px;
        align-items: start;
    }

    body.and-body--desktop-nav .and-layout--pe .and-pe-form > .and-pe-photo-card {
        grid-column: 1;
        position: sticky;
        top: calc(var(--and-page-inset-top, 0px) + 12px);
        z-index: 2;
    }

    body.and-body--desktop-nav .and-layout--pe .and-pe-form > .and-pe-checklist-card {
        grid-column: 1;
    }

    body.and-body--desktop-nav .and-layout--pe .and-pe-form > .and-pe-card:not(.and-pe-photo-card):not(.and-pe-checklist-card),
    body.and-body--desktop-nav .and-layout--pe .and-pe-form > .and-pe-status,
    body.and-body--desktop-nav .and-layout--pe .and-pe-form > .and-pe-form-spacer {
        grid-column: 2;
    }

    body.and-body--desktop-nav .and-layout--pe .and-pe-photo-drop {
        width: 168px;
        height: 168px;
        border-radius: 1.75rem;
    }

    body.and-body--desktop-nav .and-layout--pe .and-pe-card {
        border-radius: 1.5rem;
        padding: clamp(18px, 2vw, 24px);
    }

    body.and-body--desktop-nav .and-layout--pe .and-pe-fields {
        gap: 14px 16px;
    }

    /* Akun: email card kiri, tabs + form kanan */
    body.and-body--desktop-nav .and-layout--pe #andPaMain.and-main--pe {
        display: grid;
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
        column-gap: clamp(20px, 2.4vw, 32px);
        row-gap: 16px;
        align-items: start;
    }

    body.and-body--desktop-nav .and-layout--pe #andPaMain > .and-item-detail-header.and-form-hero,
    body.and-body--desktop-nav .and-layout--pe #andPaMain > .and-pe-alert {
        grid-column: 1 / -1;
    }

    body.and-body--desktop-nav .and-layout--pe #andPaEmailCard {
        grid-column: 1;
        align-self: start;
        position: sticky;
        top: calc(var(--and-page-inset-top, 0px) + 12px);
    }

    body.and-body--desktop-nav .and-layout--pe #andPaMain > .and-pe-tabs {
        grid-column: 2;
        margin: 0;
    }

    body.and-body--desktop-nav .and-layout--pe #andPaMain > .and-pa-pane {
        grid-column: 2;
        min-width: 0;
    }

    /* Save bar — offset sidebar, lebar shell */
    body.and-body--desktop-nav.and-body--pe .and-pe-save-bar {
        left: calc(var(--and-sidebar-width, 280px) + ((100vw - var(--and-sidebar-width, 280px)) / 2));
        width: min(1120px, calc(100vw - var(--and-sidebar-width, 280px) - 48px));
        max-width: calc(100vw - var(--and-sidebar-width, 280px) - 48px);
        transform: translateX(-50%);
        padding-left: var(--and-shell-gutter);
        padding-right: var(--and-shell-gutter);
    }

    @media (hover: hover) and (pointer: fine) {
        body.and-body--desktop-nav .and-layout--pe .and-pe-card {
            transition: box-shadow 0.18s ease;
        }

        body.and-body--desktop-nav .and-layout--pe .and-pe-photo-drop:hover {
            border-color: rgba(135, 96, 72, 0.55);
            background: #f1f5f9;
        }
    }

    /* —— Pengaturan —— */
    body.and-body--desktop-nav .and-layout--ps-modern {
        background: linear-gradient(180deg, #fff7ed 0%, #eef1f6 180px, transparent 320px);
    }

    body.and-body--desktop-nav .and-layout--ps-modern .and-main--ps-page {
        max-width: none;
        width: 100%;
        padding: 0 0 calc(var(--and-safe-bottom) + 28px);
        gap: clamp(16px, 2vw, 24px);
    }

    body.and-body--desktop-nav .and-layout--ps-modern .and-ps-topbar.and-form-hero {
        margin: 0 0 8px;
        padding: clamp(16px, 1.8vw, 22px);
        border-radius: 24px;
    }

    body.and-body--desktop-nav .and-layout--ps-modern .and-ps-stack {
        display: flex;
        flex-direction: column;
        gap: clamp(14px, 1.6vw, 18px);
        align-items: stretch;
    }

    body.and-body--desktop-nav .and-layout--ps-modern .and-ps-group {
        width: 100%;
        min-width: 0;
    }

    body.and-body--desktop-nav .and-layout--ps-modern .and-ps-group--admin {
        width: 100%;
    }

    body.and-body--desktop-nav .and-layout--ps-modern .and-ps-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    body.and-body--desktop-nav .and-layout--ps-modern .and-ps-panel {
        border-radius: 1.35rem;
        padding: 8px 18px 16px;
        box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.14);
    }

    body.and-body--desktop-nav .and-layout--ps-modern .and-ps-group__label {
        margin-bottom: 10px;
        padding: 0 4px;
    }

    body.and-body--desktop-nav .and-layout--ps-modern .and-ps-admin-tile {
        padding: 16px 18px;
        border-radius: 1.25rem;
    }

    @media (hover: hover) and (pointer: fine) {
        body.and-body--desktop-nav .and-layout--ps-modern .and-ps-admin-tile:hover {
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.16);
        }

        body.and-body--desktop-nav .and-layout--ps-modern .and-ps-link:hover {
            background: rgba(248, 250, 252, 0.98);
        }
    }
}

@media (min-width: 1280px) {
    /* Edit: fields 2-col lebih lega di kolom kanan */
    body.and-body--desktop-nav .and-layout--pe .and-pe-form > .and-pe-card:not(.and-pe-photo-card):not(.and-pe-checklist-card) .and-pe-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.and-body--desktop-nav .and-layout--pe .and-pe-addr-type {
        grid-column: 1 / -1;
    }

    body.and-body--desktop-nav .and-layout--pe .and-pe-label--inline {
        grid-column: 1 / -1;
    }
}

/* ── Log aktivitas — desktop windowed terminal; mobile fullscreen tak berubah ── */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    body.and-body--desktop-nav.and-body--log {
        background: #0c0c0c;
    }

    body.and-body--desktop-nav.and-body--log .and-layout--log {
        max-width: min(1280px, calc(100vw - var(--and-sidebar-width, 280px) - 48px));
        width: 100%;
        margin-inline: auto;
        min-height: 0;
        height: auto;
        padding-top: calc(var(--and-page-inset-top, var(--and-safe-top)) + var(--and-desktop-content-top-gap, 20px));
        padding-bottom: calc(var(--and-safe-bottom) + 20px);
        padding-left: var(--and-shell-gutter);
        padding-right: var(--and-shell-gutter);
        box-sizing: border-box;
        background: transparent;
    }

    body.and-body--desktop-nav.and-body--log .and-layout--log .and-main.and-log {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: calc(100dvh - var(--and-page-inset-top, var(--and-safe-top)) - var(--and-safe-bottom) - 48px);
        padding: 0;
        background: transparent;
    }

    body.and-body--desktop-nav.and-body--log .and-layout--log .and-data-hero {
        margin: 0;
        flex-shrink: 0;
        border-radius: 20px;
    }

    body.and-body--desktop-nav.and-body--log .and-log-term {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100dvh - var(--and-page-inset-top, var(--and-safe-top)) - var(--and-safe-bottom) - 120px);
        border-radius: 14px;
        border: 1px solid #333;
        box-shadow: 0 28px 64px -28px rgba(0, 0, 0, 0.75);
        overflow: hidden;
    }

    body.and-body--desktop-nav.and-body--log .and-log-term__titlebar {
        border-radius: 13px 13px 0 0;
        padding: 12px 16px;
    }

    body.and-body--desktop-nav.and-body--log .and-log-term__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 14px 18px;
        font-size: 0.8125rem;
        line-height: 1.55;
    }

    body.and-body--desktop-nav.and-body--log .and-log-term__statusbar {
        border-radius: 0 0 13px 13px;
        padding: 10px 16px;
    }

    /* Detail karyawan → drawer kanan */
    body.and-body--desktop-nav.and-body--log .and-log-kar-sheet {
        align-items: stretch;
        justify-content: flex-end;
    }

    body.and-body--desktop-nav.and-body--log .and-log-kar-sheet__panel {
        width: min(480px, calc(100vw - var(--and-sidebar-width, 280px) - 48px));
        max-height: none;
        height: 100dvh;
        margin: 0;
        border-radius: 28px 0 0 28px;
        transform: translate3d(100%, 0, 0);
    }

    body.and-body--desktop-nav.and-body--log .and-log-kar-sheet.is-open .and-log-kar-sheet__panel {
        transform: translate3d(0, 0, 0);
    }
}

/* ── File manager — desktop: kategori kiri, konten kanan rapi; mobile tak berubah ── */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    body.and-body--desktop-nav .and-layout--fm {
        max-width: min(1100px, calc(100vw - var(--and-sidebar-width, 280px) - 48px));
        width: 100%;
        margin-inline: auto;
        padding-left: var(--and-shell-gutter);
        padding-right: var(--and-shell-gutter);
        padding-bottom: calc(var(--and-safe-bottom) + 28px);
        box-sizing: border-box;
    }

    body.and-body--desktop-nav .and-fm.and-desktop-list-grid {
        --and-list-below-hero: 18px;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 !important;
        grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: clamp(16px, 2vw, 24px);
        row-gap: var(--and-list-below-hero);
        align-items: start;
    }

    body.and-body--desktop-nav .and-layout--fm .and-data-hero {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0;
        border-radius: 22px;
    }

    /* Sheet — keluar dari alur grid (jangan bikin baris kosong) */
    body.and-body--desktop-nav .and-fm.and-desktop-list-grid > .and-fm-sheet {
        position: fixed;
        inset: 0;
        z-index: 140;
        display: flex;
        grid-column: unset;
        grid-row: unset;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        overflow: visible;
        pointer-events: none;
    }

    body.and-body--desktop-nav .and-fm.and-desktop-list-grid > .and-fm-sheet[hidden] {
        display: none !important;
    }

    body.and-body--desktop-nav .and-fm.and-desktop-list-grid > .and-fm-sheet.is-open {
        pointer-events: auto;
    }

    /* Kategori — rail kiri */
    body.and-body--desktop-nav .and-fm.and-desktop-list-grid > .and-desktop-filter-sidebar {
        grid-column: 1;
        grid-row: 2;
        position: sticky;
        top: calc(var(--and-page-inset-top, var(--and-top-nav-total, 0px)) + 12px);
        align-self: start;
        max-height: none;
        overflow: visible;
        gap: 0;
    }

    body.and-body--desktop-nav .and-fm .and-desktop-filter-sidebar .and-fm-cats {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 5px;
        margin: 0 !important;
        padding: 14px;
        max-height: none !important;
        height: auto;
        overflow: visible !important;
        border-radius: 20px;
        background: var(--and-sidebar-badge-bg);
        box-shadow: none;
    }

    body.and-body--desktop-nav .and-fm .and-desktop-filter-sidebar .and-fm-cats::before {
        content: 'Kategori';
        display: block;
        margin: 0 0 6px 2px;
        color: rgba(254, 215, 170, 0.92);
        font-size: 0.625rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    body.and-body--desktop-nav .and-fm .and-desktop-filter-sidebar .and-fm-cat {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        min-height: 0 !important;
        height: auto;
        padding: 9px 11px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none !important;
        color: rgba(255, 247, 237, 0.94);
        transform: none !important;
    }

    body.and-body--desktop-nav .and-fm .and-desktop-filter-sidebar .and-fm-cat.is-active {
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.26);
        color: #fff;
    }

    body.and-body--desktop-nav .and-fm .and-desktop-filter-sidebar .and-fm-cat__icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, 0.14) !important;
        color: #fff7ed !important;
        flex-shrink: 0;
    }

    body.and-body--desktop-nav .and-fm .and-desktop-filter-sidebar .and-fm-cat__icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    body.and-body--desktop-nav .and-fm .and-desktop-filter-sidebar .and-fm-cat__label {
        color: rgba(255, 247, 237, 0.94) !important;
        font-size: 0.8125rem;
        font-weight: 650;
        text-align: left;
        line-height: 1.2;
    }

    @media (hover: hover) and (pointer: fine) {
        body.and-body--desktop-nav .and-fm .and-desktop-filter-sidebar .and-fm-cat:hover {
            background: rgba(255, 255, 255, 0.16);
        }
    }

    /* Konten kanan — panel putih menyatu */
    body.and-body--desktop-nav .and-fm.and-desktop-list-grid > .and-desktop-content-column {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        min-height: 0;
        background: #fff;
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 20px;
        box-shadow: 0 14px 36px -20px rgba(15, 23, 42, 0.12);
        overflow: hidden;
    }

    /* Home tersembunyi saat browse — jangan sisakan ruang kosong */
    body.and-body--desktop-nav .and-fm .and-fm-home[aria-hidden="true"] {
        display: none !important;
        opacity: 1;
        transform: none;
        pointer-events: none;
    }

    body.and-body--desktop-nav .and-fm .and-fm-home {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 18px;
    }

    body.and-body--desktop-nav .and-fm .and-fm-section {
        margin: 0;
        padding: 0;
    }

    body.and-body--desktop-nav .and-fm .and-fm-scope {
        margin: 0;
        border-radius: 14px;
    }

    body.and-body--desktop-nav .and-fm .and-fm-section__head {
        margin-bottom: 10px;
    }

    body.and-body--desktop-nav .and-fm .and-fm-recent {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
        gap: 10px;
        margin: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    body.and-body--desktop-nav .and-fm .and-fm-recent__card {
        flex: none;
        width: auto;
        min-width: 0;
        border-radius: 16px;
        padding: 8px;
    }

    body.and-body--desktop-nav .and-fm .and-fm-recent__thumb {
        border-radius: 12px;
        margin-bottom: 6px;
    }

    body.and-body--desktop-nav .and-fm .and-fm-recent__skel {
        height: 88px;
        border-radius: 16px;
    }

    body.and-body--desktop-nav .and-fm .and-fm-storage {
        border-radius: 16px;
        border: 1px solid rgba(226, 232, 240, 0.9);
        box-shadow: none;
    }

    body.and-body--desktop-nav .and-fm .and-fm-storage__item {
        padding: 14px 16px;
    }

    body.and-body--desktop-nav .and-fm .and-fm-storage__icon {
        width: 42px;
        height: 42px;
    }

    /* Browse — isi panel kanan (bukan overlay fullscreen) */
    body.and-body--desktop-nav .and-fm .and-fm-browse {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        transform: none !important;
        transition: none !important;
        background: transparent;
        padding: 0;
        min-height: 0;
        will-change: auto;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0;
    }

    body.and-body--desktop-nav .and-fm .and-fm-browse.is-open {
        display: flex !important;
        flex-direction: column;
        transform: none !important;
    }

    body.and-body--desktop-nav .and-fm .and-fm-browse__header {
        flex-shrink: 0;
        margin: 0;
        padding: 14px 16px;
        border-radius: 0;
        border-bottom: 1px solid #e2e8f0;
        box-shadow: none;
        background: #fff;
    }

    body.and-body--desktop-nav .and-fm .and-fm-browse__toolbar {
        flex-shrink: 0;
        margin: 0;
        padding: 12px 16px;
        border-bottom: 1px solid #f1f5f9;
        background: #fff;
    }

    body.and-body--desktop-nav .and-fm .and-fm-trash-banner {
        flex-shrink: 0;
        margin: 0;
        padding: 10px 16px;
        border-bottom: 1px solid #fef2f2;
    }

    body.and-body--desktop-nav .and-fm .and-fm-dropzone {
        flex-shrink: 0;
        margin: 12px 16px 0;
        padding: 20px 16px;
        border-radius: 14px;
        border: 1px dashed #cbd5e1;
        background: #f8fafc;
    }

    body.and-body--desktop-nav .and-fm .and-fm-grid {
        flex: 1 1 auto;
        min-height: 0;
        padding: 12px 16px 16px;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        align-content: start;
    }

    body.and-body--desktop-nav .and-fm .and-fm-empty {
        margin: 12px 16px 16px;
        border-radius: 14px;
    }

    body.and-body--desktop-nav .and-fm .and-fm-loading {
        padding: 24px 16px;
    }

    /* Sheet drawer kanan */
    body.and-body--desktop-nav .and-fm-sheet {
        align-items: stretch;
        justify-content: flex-end;
    }

    body.and-body--desktop-nav .and-fm-sheet__panel {
        width: min(400px, calc(100vw - var(--and-sidebar-width, 280px) - 48px));
        max-width: none;
        height: 100dvh;
        margin: 0;
        border-radius: 24px 0 0 24px;
        transform: translate3d(100%, 0, 0);
    }

    body.and-body--desktop-nav .and-fm-sheet.is-open .and-fm-sheet__panel {
        transform: translate3d(0, 0, 0);
    }

    body.and-body--desktop-nav .and-fm-sheet__panel--preview {
        width: min(520px, calc(100vw - var(--and-sidebar-width, 280px) - 40px));
    }
}

/* Desktop pick flows: catalog expands while cart becomes a side rail when open. */
@media (min-width: 1024px) {
    .and-main--rab-create,
    .and-main--pgl-create:not(.and-pick-page),
    .and-main--svc-create:not(.and-pick-page) {
        padding-right: clamp(280px, 28vw, 380px);
    }

    .and-pjm-dock.and-pjm-dock--body {
        left: auto;
        right: var(--and-shell-gutter);
        bottom: var(--and-shell-gutter);
        width: clamp(280px, 28vw, 360px);
        max-width: calc(100vw - 48px);
        transform: none;
    }

    .and-st-dock.and-pjm-dock--body.and-pjm-dock--portaled {
        left: auto;
        right: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        transform: none;
    }

    body.and-body--desktop-nav .and-pjm-dock.and-pjm-dock--body,
    body.and-body--desktop-nav .and-st-dock.and-pjm-dock--body,
    body.and-body--desktop-nav .and-svc-dock.and-pjm-dock--body {
        left: auto;
        right: var(--and-shell-gutter);
        width: clamp(280px, 28vw, 360px);
        max-width: calc(100vw - var(--and-sidebar-width, 280px) - 48px);
    }

    .and-pjm-dock--body .and-pjm-cart-bar {
        border-radius: 24px;
        padding: 12px;
        box-shadow: 0 18px 48px -24px rgba(15, 23, 42, 0.32);
    }

    .and-pjm-dock--body .and-pjm-cart-panel {
        position: static;
        max-height: min(58dvh, 560px);
        margin-bottom: 10px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 18px 48px -24px rgba(15, 23, 42, 0.32);
    }
}

/* Pick flows — landscape: catalog + filter sidebar + cart side rail */
@media (min-width: 768px) and (orientation: landscape) {
    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) {
        --and-st-pick-rail-top: calc(var(--and-page-inset-top, 0px) + 6px);
        --and-st-pick-cart-w: clamp(320px, 28vw, 380px);
        --and-st-pick-gap: clamp(20px, 2.4vw, 28px);
        --and-st-pick-inner-w: calc(100vw - var(--and-sidebar-width, 0px) - (var(--and-shell-gutter) * 2));
        --and-st-pick-catalog-w: calc(var(--and-st-pick-inner-w) - var(--and-st-pick-cart-w) - var(--and-st-pick-gap));
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) #and-spa-app {
        box-sizing: border-box;
        width: var(--and-st-pick-catalog-w);
        max-width: var(--and-st-pick-catalog-w);
        min-width: 0;
        margin-left: calc(var(--and-sidebar-width, 0px) + var(--and-shell-gutter));
        margin-right: calc(var(--and-st-pick-cart-w) + var(--and-st-pick-gap) + var(--and-shell-gutter));
        /* Shell fixed; scrolling happens on #and-spa-outlet (flex min-height:0 otherwise clips) */
        height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-spa-outlet-wrap {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) #and-spa-outlet {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-layout:not(.and-layout--ai-chat) {
        padding-left: 0;
        padding-right: 0;
        max-width: none;
        width: 100%;
        padding-bottom: 0;
        min-height: 0;
        height: auto;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock.and-pjm-dock--portaled {
        position: fixed !important;
        top: var(--and-st-pick-rail-top);
        left: calc(var(--and-sidebar-width, 0px) + var(--and-shell-gutter) + var(--and-st-pick-catalog-w) + var(--and-st-pick-gap)) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: var(--and-st-pick-cart-w) !important;
        max-width: var(--and-st-pick-cart-w) !important;
        z-index: 90;
        pointer-events: none;
    }

    body.and-body--desktop-nav.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock.and-pjm-dock--portaled {
        left: calc(var(--and-sidebar-width, 280px) + var(--and-shell-gutter) + var(--and-st-pick-catalog-w) + var(--and-st-pick-gap)) !important;
        right: auto !important;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-bar,
    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-panel {
        pointer-events: auto;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page.and-desktop-list-grid {
        padding-top: var(--and-st-pick-rail-top);
        padding-left: 0;
        padding-right: 0;
        padding-bottom: calc(var(--and-safe-bottom) + 24px);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        grid-template-columns: 1fr;
        row-gap: clamp(16px, 2vw, 24px);
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page.and-desktop-list-grid > .and-desktop-filter-sidebar {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        max-height: none;
        overflow: visible;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page.and-desktop-list-grid > .and-desktop-content-column {
        grid-column: 1;
        grid-row: 3;
        container-type: inline-size;
        container-name: st-pick-catalog;
    }

    .and-pick-page.and-desktop-list-grid > .and-data-hero {
        margin: 0;
        border-radius: 24px;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page.and-desktop-list-grid > .and-data-hero {
        min-height: var(--and-st-pick-head-h, auto);
    }

    .and-pick-page.and-desktop-list-grid .and-desktop-content-column > .and-pick-count,
    .and-pick-page.and-desktop-list-grid .and-desktop-content-column > .and-pick-grid,
    .and-pick-page.and-desktop-list-grid .and-desktop-content-column > .and-barang-search-notice,
    .and-pick-page.and-desktop-list-grid .and-desktop-content-column > .and-barang-ai-wrap {
        margin: 0;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-panel {
        position: static;
        left: auto;
        right: auto;
        width: 100%;
        margin: 0 0 10px;
        max-height: min(58dvh, 520px);
        border-radius: 24px;
        opacity: 1;
        transform: none;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-panel[hidden] {
        display: none !important;
    }

    /* Keranjang expand — top sejajar header, bar tetap di bawah rail */
    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock.and-pjm-dock--portaled {
        top: var(--and-st-pick-rail-top) !important;
        bottom: max(var(--and-shell-gutter), var(--and-safe-bottom, 0px)) !important;
        height: auto !important;
        max-height: none !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-panel.is-open {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        margin: 0 0 10px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-panel__head {
        flex-shrink: 0;
    }

    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-panel__list,
    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-st-cart-panel__list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-bar {
        flex-shrink: 0;
        min-height: 0 !important;
        height: auto;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page .and-pick-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--and-card-gap);
        align-items: stretch;
    }

    @container st-pick-catalog (min-width: 620px) {
        .and-pick-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page .and-restock-row__title {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.35;
        word-break: break-word;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-bar {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 12px 14px;
        align-content: center;
        border-radius: 24px;
        padding: 14px 16px;
        min-height: var(--and-st-pick-head-h, 0px);
        box-sizing: border-box;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-bar__toggle {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: 48px;
        height: 48px;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-bar__info {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        min-width: 0;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-bar__actions {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-bar__info > span:first-child {
        white-space: nowrap;
        font-size: 0.9375rem;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-bar__hint {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.35;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock .and-pjm-cart-bar__actions .and-pjm-cart-bar__btn {
        width: 100%;
        min-width: 0;
        padding: 11px 12px;
        text-align: center;
    }

    body.and-body--pjm-dock:has(.and-st-dock) .and-toast-container {
        bottom: auto;
        top: calc(var(--and-page-inset-top, 0px) + 12px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: auto;
        max-width: min(360px, calc(100vw - 32px));
        align-items: center;
        z-index: 1000;
    }

    .and-pjm-cart-bar--flash {
        animation: and-st-cart-bar-flash 0.85s ease-out;
    }

    @keyframes and-st-cart-bar-flash {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45), 0 18px 48px -24px rgba(15, 23, 42, 0.32);
        }

        35% {
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28), 0 18px 48px -24px rgba(15, 23, 42, 0.32);
        }

        100% {
            box-shadow: 0 18px 48px -24px rgba(15, 23, 42, 0.32);
        }
    }
}

@media (min-width: 1280px) and (orientation: landscape) {
    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page.and-desktop-list-grid {
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
        column-gap: clamp(24px, 3vw, 36px);
        row-gap: clamp(16px, 2vw, 24px);
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page.and-desktop-list-grid > .and-desktop-filter-sidebar {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: calc(100dvh - var(--and-page-inset-top) - 40px);
        overflow-y: auto;
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page.and-desktop-list-grid > .and-desktop-content-column {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (min-width: 768px) and (orientation: landscape) {
    .and-pick-page,
    .and-pick-page.and-desktop-list-grid {
        padding-right: clamp(16px, 2vw, 24px);
    }

    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page,
    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-pick-page.and-desktop-list-grid {
        padding-right: 0;
    }

    body.and-body--desktop-nav.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock.and-pjm-dock--body,
    body.and-body--pjm-dock:has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock.and-pjm-dock--body {
        position: fixed !important;
        top: var(--and-st-pick-rail-top) !important;
        left: calc(var(--and-sidebar-width, 0px) + var(--and-shell-gutter) + var(--and-st-pick-catalog-w) + var(--and-st-pick-gap)) !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--and-st-pick-cart-w) !important;
        max-width: var(--and-st-pick-cart-w) !important;
        transform: none !important;
    }

    body.and-body--pjm-dock:is(.and-st-cart-open, .and-pjm-cart-open):has(.and-st-dock.and-pjm-dock--portaled) .and-st-dock.and-pjm-dock--body {
        top: var(--and-st-pick-rail-top) !important;
        bottom: max(var(--and-shell-gutter), var(--and-safe-bottom, 0px)) !important;
    }
}

/* Transaksi form — desktop / landscape: step indicators + cart side rail */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-main--btrx-form .and-bf-steps-card {
        padding: 14px 18px;
        background: rgba(255, 255, 255, 0.78);
        border-color: rgba(255, 255, 255, 0.62);
    }

    .and-main--btrx-form .and-bf-step__num {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .and-main--btrx-form .and-bf-step__label {
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
    }

    .and-main--btrx-form .and-bf-steps__track {
        top: 22px;
        height: 4px;
        left: 10%;
        right: 10%;
    }

    .and-btrx-form-shell:not(.and-thz-form-shell) .and-main--btrx-form.and-btrx-step-2 .and-bf-steps-card {
        padding: 14px 18px;
    }

    .and-main--btrx-form.and-btrx-step-2 .and-bf-header.and-form-hero {
        padding: clamp(14px, 1.6vw, 18px) clamp(16px, 2vw, 22px);
    }

    .and-main--btrx-form.and-btrx-step-2 .and-bf-header__title {
        font-size: 1.0625rem;
    }

    .and-btrx-form-shell:not(.and-thz-form-shell) .and-main--btrx-form.and-btrx-step-2 .and-bf-step__num {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .and-btrx-form-shell:not(.and-thz-form-shell) .and-main--btrx-form.and-btrx-step-2 .and-bf-step__label {
        font-size: 0.6875rem;
    }

    .and-btrx-form-shell:not(.and-thz-form-shell) .and-main--btrx-form.and-btrx-step-2 .and-bf-steps__track {
        top: 22px;
    }
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-btrx-form-shell--step2-desktop {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
        align-items: start;
        gap: clamp(16px, 2vw, 24px);
        width: 100%;
    }

    .and-btrx-form-shell--step2-desktop > .and-main--btrx-form {
        grid-column: 1;
        min-width: 0;
    }

    .and-btrx-form-shell--step2-desktop > .and-btrx-cart-rail {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: calc(var(--and-page-inset-top, 0px) + 8px);
        align-self: start;
        width: 100%;
        min-width: 0;
        max-height: calc(100dvh - var(--and-page-inset-top, 0px) - 24px);
    }

    .and-btrx-cart-rail .and-pjm-cart-panel,
    .and-btrx-cart-rail .and-pjm-cart-panel.is-rail {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        max-height: calc(100dvh - var(--and-page-inset-top, 0px) - 24px);
        position: static;
        width: 100%;
        margin: 0;
        border-radius: 24px;
        overflow: hidden;
        opacity: 1;
        transform: none;
        box-shadow: 0 18px 48px -24px rgba(15, 23, 42, 0.22);
    }

    .and-btrx-cart-rail .and-pjm-cart-panel__head {
        flex-shrink: 0;
    }

    .and-btrx-cart-rail .and-pjm-cart-panel__close {
        display: none;
    }

    .and-btrx-cart-rail .and-pjm-cart-panel__list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .and-main--btrx-form.and-btrx-step-2 .and-bf-panel[data-panel="2"].is-active {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .and-main--btrx-form.and-btrx-step-2 .and-btrx-pick-list--buku {
        max-height: min(56dvh, calc(100dvh - var(--and-page-inset-top) - 280px));
    }

    .and-main--btrx-form.and-btrx-step-2 .and-btrx-panel__foot--step2 {
        display: flex;
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .and-main--btrx-form.and-btrx-step-2 .and-btrx-panel__foot--step2 .and-bf-btn {
        flex: 1;
    }

    body.and-body--pjm-dock:has(.and-main--btrx-form.and-btrx-step-2) .and-main--btrx-form.and-btrx-dock-visible {
        padding-bottom: calc(var(--and-safe-bottom) + 8px);
    }

    /* Modal pilih rak — desktop: overlay full halaman, panel compact di tengah */
    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet {
        align-items: center;
        justify-content: center;
        padding: max(16px, var(--and-safe-top)) 16px max(16px, var(--and-safe-bottom));
        left: calc(var(--and-sidebar-width, 0px) + var(--and-shell-gutter, 16px));
        width: min(var(--and-content-max), calc(100vw - var(--and-sidebar-width, 0px) - (var(--and-shell-gutter, 16px) * 2)));
        right: auto;
        top: calc(var(--and-page-inset-top, 0px) + 8px);
        bottom: max(var(--and-shell-gutter, 16px), var(--and-safe-bottom, 0px));
    }

    body.and-body--desktop-nav.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet {
        left: calc(var(--and-sidebar-width, 280px) + var(--and-shell-gutter, 24px));
        width: min(var(--and-content-max), calc(100vw - var(--and-sidebar-width, 280px) - 48px));
    }

    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet .and-restock-sheet__panel,
    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet .and-btrx-rak-sheet__panel {
        width: min(100%, 480px);
        max-height: min(86dvh, 640px);
        border-radius: 24px;
        margin: 0 auto;
        transform: translateY(10px) scale(0.98);
        padding: 18px 20px 22px;
    }

    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet.is-open .and-restock-sheet__panel,
    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet.is-open .and-btrx-rak-sheet__panel {
        transform: translateY(0) scale(1);
    }

    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet .and-restock-sheet__backdrop {
        background: rgba(15, 23, 42, 0.28);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    body.and-body--buku-hub.and-msgbox-open:has(.and-main--btrx-form) .and-msgbox,
    body.and-body--quran-hub.and-msgbox-open:has(.and-thz-form-shell) .and-msgbox,
    body.and-body--quran-hub.and-msgbox-open:has(.and-main--tahfizh) .and-msgbox {
        align-items: flex-start;
        justify-content: center;
        padding-top: calc(var(--and-page-inset-top, 0px) + 20px);
    }

    body.and-body--buku-hub.and-msgbox-open:has(.and-main--btrx-form) .and-msgbox__backdrop,
    body.and-body--quran-hub.and-msgbox-open:has(.and-thz-form-shell) .and-msgbox__backdrop,
    body.and-body--quran-hub.and-msgbox-open:has(.and-main--tahfizh) .and-msgbox__backdrop {
        background: rgba(15, 23, 42, 0.2);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    body.and-body--buku-hub.and-msgbox-open:has(.and-main--btrx-form) .and-msgbox__panel,
    body.and-body--quran-hub.and-msgbox-open:has(.and-thz-form-shell) .and-msgbox__panel,
    body.and-body--quran-hub.and-msgbox-open:has(.and-main--tahfizh) .and-msgbox__panel {
        box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.28);
    }
}

/* Transaksi form — desktop only (≥1024px) */
@media (min-width: 1024px) {
    .and-btrx-form-shell--step2-desktop {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
        gap: 12px;
    }

    /* Modal pilih rak: overlay menutup seluruh viewport */
    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet {
        inset: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        align-items: center;
        justify-content: center;
        padding: max(20px, var(--and-safe-top)) 20px max(20px, var(--and-safe-bottom));
    }

    body.and-body--desktop-nav.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet {
        left: 0 !important;
        width: 100% !important;
    }

    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet .and-restock-sheet__backdrop {
        background: rgba(15, 23, 42, 0.42);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet .and-restock-sheet__panel,
    body.and-btrx-rak-open:has(.and-main--btrx-form) .and-btrx-rak-sheet .and-btrx-rak-sheet__panel {
        width: min(100%, 420px);
        max-width: 420px;
    }

    /* Toast sukses / info: compact, tidak full lebar */
    body.and-body--buku-hub:has(.and-main--btrx-form) .and-toast-container {
        top: calc(var(--and-page-inset-top, 0px) + 14px);
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: auto;
        max-width: min(340px, calc(100vw - 48px));
        align-items: center;
    }

    body.and-body--buku-hub:has(.and-main--btrx-form) .and-toast {
        width: fit-content;
        max-width: min(340px, calc(100vw - 48px));
        justify-content: center;
        padding: 10px 18px;
        border-radius: 999px;
        box-shadow: 0 10px 32px -8px rgba(15, 23, 42, 0.28);
    }
}

/* ——— Al-Qur'an (lazy list) ——— */
.and-qrn-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0 0 4px;
    background: transparent;
    overflow: visible;
    position: relative;
    z-index: 5;
    isolation: isolate;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-header {
    margin-bottom: -36px;
}
.and-main--quran:not(.and-main--quran-reading) #andQrnLastReadWrap {
    margin: 0 0 14px;
    position: relative;
    z-index: 2;
}
.and-main--quran:not(.and-main--quran-reading) #andQrnList {
    padding-top: 0;
    position: relative;
    z-index: 1;
}
.and-qrn-header__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: transparent;
    padding: 0 var(--and-space-md, 16px);
    box-sizing: border-box;
    overflow: visible;
}
.and-qrn-header__logo-wrap {
    display: block;
    width: min(340px, 94vw);
    max-width: 340px;
    padding: 0;
    flex-shrink: 0;
    overflow: visible;
    background: transparent;
    line-height: 0;
    box-sizing: content-box;
    pointer-events: none;
}
.and-qrn-header__logo {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    vertical-align: middle;
    background: none;
    border: none;
    box-shadow: none;
    pointer-events: none;
}
@media (min-width: 768px) {
    .and-qrn-header__logo-wrap {
        width: min(420px, 58vw);
        max-width: 420px;
    }
    .and-main--quran:not(.and-main--quran-reading) .and-qrn-header {
        margin-bottom: -44px;
    }
}
.and-main--quran:not(.and-main--quran-reading) #andQrnLastReadWrap:not([hidden]),
.and-main--quran:not(.and-main--quran-reading) #andQrnNotice:not([hidden]) {
    position: relative;
    z-index: 1;
}
.and-main--quran-reading > .and-qrn-header[hidden] {
    display: none !important;
}
.and-qrn-bc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--and-qrn-bc-glass, rgba(255, 255, 255, 0.72));
    border: 1px solid var(--and-qrn-read-border, rgba(107, 78, 59, 0.12));
    box-shadow: var(--and-qrn-read-shadow, 0 6px 20px -12px rgba(15, 23, 42, 0.12));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}
.and-body--quran-reading .and-qrn-bc {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}
.and-body--quran-reading .and-qrn-bc.is-scrolled {
    background: var(--and-qrn-bc-solid, rgba(255, 255, 255, 0.96));
    box-shadow: 0 4px 18px -8px rgba(15, 23, 42, 0.14);
    border-color: var(--and-qrn-read-border, rgba(107, 78, 59, 0.14));
}
.and-qrn-bc__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 6px 10px 6px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--and-qrn-bc-btn-bg, rgba(107, 78, 59, 0.08));
    color: var(--and-qrn-bc-text, #6b4e3b);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.3s ease;
}
.and-qrn-bc__back:active {
    transform: scale(0.97);
    background: color-mix(in srgb, var(--and-qrn-bc-text, #6b4e3b) 16%, transparent);
}
.and-qrn-bc__trail {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    justify-content: flex-end;
}
.and-qrn-bc__sep {
    color: var(--and-qrn-meta-color, rgba(107, 78, 59, 0.35));
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    transition: color 0.3s ease;
}
.and-qrn-bc__current {
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--and-qrn-bc-current, #4a3426);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}
.and-qrn-drawer-turun__hint {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.45;
}
.and-qrn-drawer-turun__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.and-body--quran-hub .and-main--quran,
.and-body--quran-hub .and-main--tahfizh {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding: calc(var(--and-page-inset-top) + 4px) var(--and-space-md) calc(var(--and-nav-height) + var(--and-nav-float-gap) + var(--and-safe-bottom) + 24px);
    box-sizing: border-box;
}
.and-body--quran-hub .and-main--quran:not(.and-main--quran-reading) {
    padding-top: var(--and-page-inset-top, 0px);
}

.and-body--topbar.and-body--quran-hub .and-layout:not(.and-layout--quran):not(.and-layout--tahfizh) > .and-main:not(.and-main--quran):not(.and-main--tahfizh) {
    padding-top: calc(var(--and-page-inset-top) + 4px);
}

.and-main--quran .and-qrn-toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}
.and-main--quran .and-qrn-toolbar-row--halaman label {
    font-size: 0.9rem;
    color: var(--and-text-muted, #64748b);
}
.and-main--quran .and-qrn-toolbar-row--halaman .and-bf-input {
    width: 88px;
}
.and-qrn-subtoolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.and-qrn-subtoolbar__title {
    font-weight: 600;
    font-size: 0.95rem;
}
.and-qrn-notice {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 10%, transparent);
}
.and-qrn-notice--err {
    background: color-mix(in srgb, #dc2626 12%, transparent);
    color: #b91c1c;
}
.and-qrn-empty {
    color: var(--and-text-muted, #64748b);
    padding: 24px 8px;
    text-align: center;
}
.and-qrn-surat-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.and-qrn-loadmore-wrap {
    margin-top: 12px;
    padding-bottom: 8px;
}
.and-qrn-surat-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
    width: 100%;
    min-height: 72px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #e2e8f0) 80%, transparent);
    border-radius: 14px;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.and-qrn-surat-card__open {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
    text-align: left;
    padding: 12px 10px 12px 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.and-qrn-surat-card__open:active {
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 4%, transparent);
}
.and-qrn-surat-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0 10px 0 2px;
    border-left: 1px solid color-mix(in srgb, var(--bs-border-color, #e2e8f0) 55%, transparent);
}
.and-qrn-play-btn {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 12%, transparent);
    color: var(--bs-primary, #2563eb);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.and-qrn-play-btn--surat {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}
.and-qrn-play-btn:active {
    transform: scale(0.94);
}
.and-qrn-play-btn.is-active {
    background: var(--bs-primary, #2563eb);
    color: #fff;
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--bs-primary, #2563eb) 55%, transparent);
}
.and-qrn-play-btn--ayat {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 10px;
}
.and-qrn-ayat-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.and-qrn-ayat-card__head .and-qrn-ayat-card__meta {
    margin: 0;
    flex: 1;
    min-width: 0;
}
.and-qrn-audio-bar {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.and-qrn-audio-bar[hidden] {
    display: none !important;
}
.and-top-nav__audio-slot {
    display: none;
    min-width: 0;
    width: 100%;
    align-self: center;
    padding: 0 4px;
    box-sizing: border-box;
}
.and-top-nav__audio-slot:not([hidden]) {
    display: block;
}
.and-top-nav--has-audio .and-top-nav__track {
    column-gap: 6px;
}
.and-top-nav--audio-only .and-top-nav__side {
    display: none;
}
.and-top-nav--audio-only .and-top-nav__audio-slot {
    grid-column: 1 / -1;
    padding: 0;
}
body.and-body--topbar {
    --and-top-nav-total: calc(var(--and-safe-top) + var(--and-top-nav-shell-pt) + var(--and-top-nav-row) + var(--and-top-nav-shell-pb));
}
body.and-body--topbar-audio:not(.and-body--topbar) {
    --and-top-nav-total: calc(var(--and-safe-top) + var(--and-top-nav-shell-pt) + var(--and-top-nav-row) + var(--and-top-nav-shell-pb));
}
.and-qrn-audio-bar__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid color-mix(in srgb, var(--bs-primary, #2563eb) 16%, #e2e8f0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
}
.and-qrn-audio-bar__play {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: var(--bs-primary, #2563eb);
    color: #fff;
    cursor: pointer;
}
.and-qrn-audio-bar__play svg {
    width: 14px;
    height: 14px;
}
.and-qrn-audio-bar__icon--pause {
    display: none;
}
.and-qrn-audio-bar.is-playing .and-qrn-audio-bar__icon--play {
    display: none;
}
.and-qrn-audio-bar.is-playing .and-qrn-audio-bar__icon--pause {
    display: block;
}
.and-qrn-audio-bar__meta {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.and-qrn-audio-bar__title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.and-qrn-audio-bar__sub {
    display: none;
}
.and-qrn-audio-bar__qari-wrap {
    flex: 0 0 auto;
    min-width: 0;
}
.and-qrn-audio-bar__qari-label {
    display: none;
}
.and-qrn-audio-bar__qari {
    width: auto;
    min-width: 0;
    max-width: 92px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    color: #334155;
}
.and-qrn-audio-bar__close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
}
.and-qrn-audio-bar__close svg {
    width: 14px;
    height: 14px;
}
@media (min-width: 641px) {
    .and-top-nav__audio-slot {
        padding: 0 6px;
    }
    .and-qrn-audio-bar__inner {
        gap: 6px;
        padding: 0 8px;
    }
    .and-qrn-audio-bar__qari {
        max-width: 108px;
        font-size: 0.6875rem;
        padding: 5px 7px;
    }
}
@media (max-width: 640px) {
    .and-qrn-audio-bar__title {
        font-size: 0.6875rem;
    }
    .and-qrn-audio-bar__qari {
        max-width: 76px;
        padding: 3px 5px;
    }
    .and-top-nav--has-audio .and-top-nav__track {
        column-gap: 4px;
    }
}
.and-qrn-surat-card__no {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 14%, transparent);
    color: var(--bs-primary, #2563eb);
    font-weight: 800;
    font-size: 0.8125rem;
    line-height: 1;
}
.and-qrn-surat-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    min-width: 0;
    flex: 1;
}
.and-qrn-surat-card__latin {
    grid-column: 1;
    grid-row: 1;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.25;
    color: #0f172a;
}
.and-qrn-surat-card__meta {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--and-text-muted, #64748b);
}
.and-qrn-surat-card__arab {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--and-font-quran);
    font-size: 1.25rem;
    line-height: 1.4;
    color: #0f172a;
    text-align: right;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.and-qrn-ayat-list {
    display: flex;
    flex-direction: column;
    gap: var(--and-qrn-ayat-gap, 10px);
}
.and-qrn-ayat-card {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #e2e8f0) 70%, transparent);
    background: var(--bs-body-bg, #fff);
}
.and-qrn-ayat-card__meta {
    font-size: 0.78rem;
    color: var(--and-text-muted, #64748b);
    margin: 0 0 6px;
}
.and-qrn-ayat-card__arab {
    font-family: var(--and-font-quran);
    font-size: 1.85rem;
    line-height: 2.3;
    margin: 0 0 10px;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.and-qrn-ayat-card__latin {
    font-size: 0.82rem;
    color: var(--and-text-muted, #64748b);
    margin: 0 0 4px;
}
.and-qrn-ayat-card__id {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.45;
}

.and-body--quran-hub .and-barang-chips:not(.and-chip-track) .and-barang-chip {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 247, 237, 0.82);
}

.and-body--quran-hub .and-barang-chips:not(.and-chip-track) .and-barang-chip.is-active {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
    font-weight: 800;
}

.and-main--quran.and-barang-chips-open .and-data-hero {
    margin-bottom: 0;
    border-radius: 24px 24px 0 0;
}

.and-main--quran.and-barang-chips-open .and-barang-chips--hero {
    margin-top: 0;
}

.and-main--quran > #andQrnSuratTurunChipsWrap.and-barang-chips--hero {
    margin-bottom: 0;
}

.and-main--quran > #andQrnLastReadWrap:not([hidden]) {
    display: block;
    margin: 14px 0;
}

.and-main--quran > #andQrnBreadcrumbWrap:not([hidden]) {
    display: none;
}

.and-qrn-read > .and-qrn-bc {
    margin: 0 0 12px;
}

.and-qrn-read .and-qrn-ayat-card {
    scroll-margin-top: calc(var(--and-page-inset-top, 0px) + 16px);
}

.and-qrn-last-read-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 14px 14px 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--and-qrn-read-border, rgba(15, 23, 42, 0.08));
    background: var(--and-qrn-surface, #F7F7F5);
    box-shadow: none;
}
.and-qrn-last-read-card__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.and-qrn-last-read-card__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--and-qrn-active-bg, color-mix(in srgb, var(--and-qrn-ayat-no-color, #b45309) 12%, transparent));
    color: var(--and-qrn-ayat-no-color, #b45309);
}
.and-qrn-last-read-card__icon svg {
    display: block;
}
.and-qrn-last-read-card__copy {
    min-width: 0;
    flex: 1;
}
.and-qrn-last-read-card__label {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--and-qrn-muted, #9a8b78);
}
.and-qrn-last-read-card__surat {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--and-qrn-text, #2c2416);
}
.and-qrn-last-read-card__meta {
    margin: 3px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--and-qrn-muted, #7a6b58);
}
.and-qrn-last-read-card__btn {
    flex-shrink: 0;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--and-qrn-ayat-no-color, #b45309) 28%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--and-qrn-ayat-no-color, #b45309) 10%, var(--and-qrn-read-bg, #fff));
    color: var(--and-qrn-ayat-no-color, #b45309);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, transform 0.15s ease;
}
.and-qrn-last-read-card__btn:active {
    transform: scale(0.97);
    background: color-mix(in srgb, var(--and-qrn-ayat-no-color, #b45309) 16%, var(--and-qrn-read-bg, #fff));
}
.and-qrn-theme-light.and-body--quran-surat .and-qrn-last-read-card {
    background: var(--and-qrn-surface-3, #F5F5F5);
}

.and-qrn-last-read-panel {
    margin: 0;
    border-radius: 24px;
    padding: 16px 14px 14px;
}

.and-qrn-last-read-panel .and-barang-chips__eyebrow {
    margin-top: 0;
    margin-bottom: 12px;
}

.and-main--quran.and-barang-chips-open > #andQrnSuratTurunChipsWrap.and-barang-chips--hero {
    border-radius: 0 0 24px 24px;
}

.and-qrn-last-read-panel .and-qrn-last-read__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.and-qrn-last-read-panel .and-qrn-last-read__copy {
    min-width: 0;
    flex: 1;
}

.and-qrn-last-read-panel .and-qrn-last-read__surat {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff7ed;
}

.and-qrn-last-read-panel .and-qrn-last-read__meta {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: rgba(255, 247, 237, 0.78);
}

.and-qrn-last-read__btn {
    flex-shrink: 0;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    background: linear-gradient(160deg, #ff8a3d 0%, var(--and-accent, #ff5a00) 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 8px 20px -10px rgba(255, 90, 0, 0.55);
}

.and-qrn-last-read__btn:active {
    transform: scale(0.97);
}

.and-qrn-last-read--sheet {
    flex-direction: column;
    align-items: stretch;
}

.and-qrn-chips .and-barang-chips__eyebrow--sub {
    margin-top: 10px;
}

.and-qrn-chips--juz .and-barang-chip,
.and-qrn-chips__quick .and-barang-chip {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.and-qrn-halaman-jump {
    margin-top: 4px;
}

.and-qrn-halaman-jump__field {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 50px;
    padding: 5px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 24px -16px rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.and-qrn-halaman-jump__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 247, 237, 0.95);
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.14s ease;
}

.and-qrn-halaman-jump__step:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.16);
}

.and-qrn-halaman-jump__input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 4px;
}

.and-qrn-halaman-jump__prefix,
.and-qrn-halaman-jump__suffix {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(254, 215, 170, 0.82);
}

.and-qrn-halaman-jump__input {
    width: 100%;
    max-width: 72px;
    min-width: 48px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.and-qrn-halaman-jump__input:focus {
    outline: none;
}

.and-qrn-halaman-jump__input::-webkit-outer-spin-button,
.and-qrn-halaman-jump__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.and-qrn-halaman-jump__field:focus-within {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 2px rgba(255, 90, 0, 0.18),
        0 10px 28px -14px rgba(15, 23, 42, 0.5);
}

.and-qrn-halaman-jump__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    height: 40px;
    padding: 0 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 122, 26, 0.98), rgba(255, 90, 0, 0.92));
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow:
        0 4px 16px rgba(255, 90, 0, 0.38),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    transition: transform 0.14s ease, box-shadow 0.2s ease;
}

.and-qrn-halaman-jump__go:active {
    transform: scale(0.97);
}

.and-qrn-halaman-jump__go svg {
    flex-shrink: 0;
}

@media (max-width: 380px) {
    .and-qrn-halaman-jump__go span {
        display: none;
    }

    .and-qrn-halaman-jump__go {
        width: 40px;
        padding: 0;
    }
}

@media (min-width: 1024px) {
    .and-qrn-halaman-jump__field {
        max-width: 420px;
    }
}

@media (min-width: 1024px) {
    .and-qrn-chips--juz .and-barang-chips,
    .and-qrn-chips__quick {
        flex-wrap: wrap;
        overflow: visible;
        border-radius: 20px;
    }

    .and-body--quran-hub .and-main--quran .and-qrn-surat-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .and-body--quran-hub .and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__open {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .and-body--quran-hub .and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__arab {
        width: 100%;
        margin-inline-start: 0;
        margin-top: 2px;
        text-align: right;
        font-size: 1.2rem;
    }

    .and-body--quran-hub .and-main--quran .and-qrn-surat-card__arab {
        font-size: 1.15rem;
    }
}

/* ——— Al-Qur'an — mode baca & UX baru ——— */
.and-qrn-last-read--sheet {
    flex-direction: column;
    align-items: stretch;
}

@media (max-width: 480px) {
    .and-qrn-last-read-card {
        flex-direction: column;
        align-items: stretch;
    }
    .and-qrn-last-read-card__btn {
        width: 100%;
        text-align: center;
    }
    .and-qrn-last-read-panel .and-qrn-last-read__body {
        flex-direction: column;
        align-items: stretch;
    }
    .and-qrn-last-read__btn {
        width: 100%;
        text-align: center;
    }
}

.and-qrn-icon-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.and-qrn-icon-btn:active {
    transform: scale(0.92);
}
.and-qrn-icon-btn.is-active {
    background: color-mix(in srgb, #ef4444 12%, transparent);
}
.and-qrn-icon-btn--lastread.is-active {
    background: color-mix(in srgb, var(--and-accent, #ff5a00) 14%, transparent);
}
.and-body--quran-reading.and-qrn-hide-latin .and-qrn-ayat-card__latin,
.and-qrn-hide-latin .and-qrn-ayat-card__latin {
    display: none !important;
}
.and-body--quran-reading.and-qrn-hide-terjemahan .and-qrn-ayat-card__id,
.and-qrn-hide-terjemahan .and-qrn-ayat-card__id {
    display: none !important;
}
.and-qrn-ayat-card__arab--tajweed {
    font-family: var(--and-font-quran);
    font-size: var(--and-qrn-arab-size, 1.85rem);
    line-height: 2.3;
    margin: 0 0 10px;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.and-qrn-ayat-card__arab--tajweed .and-tajweed {
    font-weight: inherit;
}
.and-qrn-ayat-card__arab--tajweed .and-tajweed--ham_wasl,
.and-qrn-ayat-card__arab--tajweed .and-tajweed--laam_shamsiyah,
.and-qrn-ayat-card__arab--tajweed .and-tajweed--slnt,
.and-qrn-ayat-card__arab--tajweed .and-tajweed--silent { color: #AAAAAA; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--madda,
.and-qrn-ayat-card__arab--tajweed .and-tajweed--madda_normal { color: #537FFF; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--madda_permissible { color: #4050FF; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--madda_necessary,
.and-qrn-ayat-card__arab--tajweed .and-tajweed--madda_obligatory { color: #000EBC; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--ghunnah,
.and-qrn-ayat-card__arab--tajweed .and-tajweed--idgham,
.and-qrn-ayat-card__arab--tajweed .and-tajweed--idgham_ghunnah { color: #169777; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--ikhafa { color: #9400A8; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--ikhafa_shafawi { color: #D500B7; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--iqlab { color: #26BFFD; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--idgham_wo_ghunnah { color: #169200; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--idgham_shafawi { color: #58B800; }
.and-qrn-ayat-card__arab--tajweed .and-tajweed--qalaqah,
.and-qrn-ayat-card__arab--tajweed .and-tajweed--qalqah { color: #DD0008; }
.and-qrn-settings__hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--and-text-muted, #64748b);
    line-height: 1.4;
}
.and-qrn-tajweed-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.and-qrn-tajweed-legend__title {
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--and-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.and-qrn-tajweed-legend__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.and-qrn-tajweed-legend__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--and-text-muted, #475569);
}
.and-qrn-tajweed-legend__swatch {
    font-family: var(--and-font-quran);
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
}
.and-body--quran-reading.and-qrn-arab-font-sm,
.and-qrn-arab-font-sm {
    --and-qrn-arab-size: 1.35rem;
}
.and-body--quran-reading.and-qrn-arab-font-md,
.and-qrn-arab-font-md {
    --and-qrn-arab-size: clamp(1.45rem, 4.8vw, 1.85rem);
}
.and-body--quran-reading.and-qrn-arab-font-lg,
.and-qrn-arab-font-lg {
    --and-qrn-arab-size: clamp(1.65rem, 5.4vw, 2.15rem);
}
.and-body--quran-reading.and-qrn-arab-font-xl,
.and-qrn-arab-font-xl {
    --and-qrn-arab-size: clamp(1.9rem, 6.2vw, 2.45rem);
}
.and-qrn-trans-font-sm {
    --and-qrn-trans-size: 0.78rem;
}
.and-qrn-trans-font-md {
    --and-qrn-trans-size: 0.88rem;
}
.and-qrn-trans-font-lg {
    --and-qrn-trans-size: 0.98rem;
}
.and-qrn-trans-font-xl {
    --and-qrn-trans-size: 1.08rem;
}
.and-qrn-ayat-gap-sm {
    --and-qrn-ayat-gap: 8px;
}
.and-qrn-ayat-gap-md {
    --and-qrn-ayat-gap: 14px;
}
.and-qrn-ayat-gap-lg {
    --and-qrn-ayat-gap: 22px;
}
.and-qrn-line-height-normal {
    --and-qrn-arab-lh: 1.72;
    --and-qrn-trans-lh: 1.42;
}
.and-qrn-line-height-relaxed {
    --and-qrn-arab-lh: 1.92;
    --and-qrn-trans-lh: 1.58;
}
.and-qrn-line-height-loose {
    --and-qrn-arab-lh: 2.18;
    --and-qrn-trans-lh: 1.78;
}
.and-qrn-read {
    position: relative;
    padding-bottom: calc(16px + var(--and-qrn-read-player-h, var(--and-qrn-mini-h, 0px)));
}
.and-qrn-progress {
    margin: 0 0 14px;
}
.and-qrn-progress__track {
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 12%, #e2e8f0);
    overflow: hidden;
}
.and-qrn-progress__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--bs-primary, #2563eb);
    transition: width 0.25s ease;
}
.and-qrn-progress__label {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: var(--and-text-muted, #64748b);
}
.and-qrn-progress-float {
    display: none !important;
}
.and-qrn-search-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.and-qrn-find-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.and-qrn-find-panel__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.and-qrn-find-panel__section + .and-qrn-find-panel__section {
    padding-top: 18px;
    border-top: 1px solid var(--and-qrn-border, rgba(15, 23, 42, 0.08));
}
.and-qrn-find-panel__title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--and-qrn-meta-color, #64748b);
}
.and-qrn-find-panel__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--and-qrn-muted, var(--and-text-muted, #64748b));
}
.and-qrn-find-panel .and-dash-search__input,
.and-qrn-find-panel .and-qrn-find-panel__search {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 0.95rem;
}
.and-qrn-jump-form--drawer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.and-qrn-jump-form--drawer .and-qrn-jump-form__label {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--and-qrn-text, #334155);
}
.and-qrn-jump-input {
    width: 100%;
    min-height: 54px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--and-qrn-border, rgba(15, 23, 42, 0.12));
    background: var(--and-qrn-surface, #fff);
    color: var(--and-qrn-text, #0f172a);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}
.and-qrn-jump-input::-webkit-outer-spin-button,
.and-qrn-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.and-qrn-jump-input::placeholder {
    color: var(--and-qrn-muted, #94a3b8);
    font-weight: 600;
}
.and-qrn-jump-input:focus {
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1);
}
.and-qrn-jump-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.and-qrn-jump-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    background: linear-gradient(160deg, #ff8a3d 0%, var(--and-accent, #ff5a00) 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(255, 90, 0, 0.55);
    transition: transform 0.12s ease, opacity 0.15s ease;
}
.and-qrn-jump-btn:active:not(:disabled) {
    transform: scale(0.98);
}
.and-qrn-jump-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}
.and-qrn-jump-form--inline .and-qrn-jump-form__row {
    margin-top: 0;
}
.and-qrn-search-panel .and-dash-search__input {
    width: 100%;
}
.and-qrn-search-panel__hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--and-text-muted, #64748b);
}
.and-qrn-theme-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.and-qrn-theme-picker--reading {
    gap: 12px;
}
.and-qrn-theme-picker__hint {
    margin: 14px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--and-qrn-muted, var(--and-text-muted, #64748b));
}
.and-qrn-theme-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 96px;
    padding: 14px 10px;
    border-radius: 16px;
    border: 1px solid var(--and-qrn-border, color-mix(in srgb, var(--bs-border-color, #e2e8f0) 85%, transparent));
    background: var(--and-qrn-surface-2, var(--bs-body-bg, #fafafa));
    color: var(--and-qrn-text, inherit);
    cursor: pointer;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        color 0.35s ease;
}
.and-qrn-theme-pick__swatch {
    display: block;
    width: 100%;
    max-width: 52px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.and-qrn-theme-pick--light .and-qrn-theme-pick__swatch {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.08);
}
.and-qrn-theme-pick--warm .and-qrn-theme-pick__swatch {
    background: linear-gradient(135deg, #F7F7F5 55%, #ECECEA);
}
.and-qrn-theme-pick--dark .and-qrn-theme-pick__swatch {
    background:
        radial-gradient(circle at 50% 30%, rgba(232, 184, 120, 0.35) 0%, transparent 55%),
        linear-gradient(145deg, #45423E 0%, #353230 55%, #2E2C29 100%);
    border-color: rgba(212, 175, 120, 0.22);
    box-shadow: 0 0 12px -2px rgba(212, 165, 116, 0.25);
}
.and-qrn-theme-pick--sepia .and-qrn-theme-pick__swatch {
    background: linear-gradient(135deg, #E8DCC8 55%, #D9CCB6);
}
.and-qrn-theme-pick.is-active {
    border-color: color-mix(in srgb, var(--and-accent, #ff5a00) 45%, var(--and-qrn-border, #e2e8f0));
    background: color-mix(in srgb, var(--and-accent, #ff5a00) 8%, var(--and-qrn-surface-2, #fff));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--and-accent, #ff5a00) 22%, transparent);
}
.and-qrn-theme-pick__icon {
    font-size: 1.25rem;
    line-height: 1;
}
.and-qrn-theme-pick__label {
    font-size: 0.84rem;
    font-weight: 600;
    text-align: center;
}

/* ——— Tema membaca Al-Qur'an ——— */
body.and-qrn-theme-light,
body.and-qrn-theme-warm,
body.and-qrn-theme-dark,
body.and-qrn-theme-sepia {
    transition: background-color 0.4s ease, color 0.4s ease;
}
body.and-qrn-theme-light {
    --and-qrn-read-bg: #FFFFFF;
    --and-qrn-read-surface: #FFFFFF;
    --and-qrn-read-surface-solid: #FFFFFF;
    --and-qrn-read-border: rgba(0, 0, 0, 0.06);
    --and-qrn-read-shadow: none;
    --and-qrn-arab-color: #121212;
    --and-qrn-latin-color: #666666;
    --and-qrn-trans-color: #444444;
    --and-qrn-meta-color: #888888;
    --and-qrn-ayat-no-color: #a67c00;
    --and-qrn-text: #121212;
    --and-qrn-muted: #666666;
    --and-qrn-surface: #FFFFFF;
    --and-qrn-surface-2: #FFFFFF;
    --and-qrn-surface-3: #F5F5F5;
    --and-qrn-border: rgba(0, 0, 0, 0.08);
    --and-qrn-bc-glass: #FFFFFF;
    --and-qrn-bc-solid: #FFFFFF;
    --and-qrn-bc-btn-bg: rgba(0, 0, 0, 0.05);
    --and-qrn-bc-text: #444444;
    --and-qrn-bc-current: #121212;
    --and-qrn-active-bg: rgba(166, 124, 0, 0.06);
    --and-qrn-active-border: rgba(166, 124, 0, 0.22);
    --and-qrn-progress-track: rgba(166, 124, 0, 0.12);
    --and-qrn-drawer-panel-bg: rgba(255, 255, 255, 0.98);
    --and-qrn-drawer-panel-blur: 0px;
    --and-qrn-drawer-panel-border: rgba(0, 0, 0, 0.08);
    --and-qrn-drawer-head-bg: #FFFFFF;
    --and-qrn-drawer-item-bg: #FAFAFA;
    --and-qrn-drawer-item-border: rgba(0, 0, 0, 0.07);
}
body.and-qrn-theme-warm {
    --and-qrn-read-bg: #FFFFFF;
    --and-qrn-read-surface: #FFFFFF;
    --and-qrn-read-surface-solid: #FFFFFF;
    --and-qrn-read-border: rgba(26, 26, 26, 0.08);
    --and-qrn-read-shadow: none;
    --and-qrn-arab-color: #1A1A1A;
    --and-qrn-latin-color: #5C5C5C;
    --and-qrn-trans-color: #737373;
    --and-qrn-meta-color: #8A8A8A;
    --and-qrn-ayat-no-color: #2563eb;
    --and-qrn-text: #1A1A1A;
    --and-qrn-muted: #737373;
    --and-qrn-surface: #F7F7F5;
    --and-qrn-surface-2: #F0F0EE;
    --and-qrn-surface-3: #E8E8E6;
    --and-qrn-border: rgba(26, 26, 26, 0.1);
    --and-qrn-bc-glass: rgba(247, 247, 245, 0.72);
    --and-qrn-bc-solid: rgba(247, 247, 245, 0.98);
    --and-qrn-bc-btn-bg: rgba(26, 26, 26, 0.06);
    --and-qrn-bc-text: #4A4A4A;
    --and-qrn-bc-current: #1A1A1A;
    --and-qrn-active-bg: rgba(37, 99, 235, 0.06);
    --and-qrn-active-border: rgba(37, 99, 235, 0.22);
    --and-qrn-progress-track: rgba(37, 99, 235, 0.12);
    --and-qrn-drawer-panel-bg: rgba(255, 252, 245, 0.97);
    --and-qrn-drawer-panel-blur: 0px;
    --and-qrn-drawer-panel-border: rgba(93, 78, 58, 0.12);
    --and-qrn-drawer-head-bg: rgba(255, 252, 245, 0.98);
    --and-qrn-drawer-item-bg: #FFFFFF;
    --and-qrn-drawer-item-border: rgba(93, 78, 58, 0.1);
}
body.and-qrn-theme-dark {
    --and-qrn-read-bg: #1E1C19;
    --and-qrn-read-bg-glow-top: rgba(212, 175, 120, 0.07);
    --and-qrn-read-bg-glow-bottom: rgba(180, 140, 80, 0.05);
    --and-qrn-read-surface: rgba(36, 33, 30, 0.88);
    --and-qrn-read-surface-solid: #24211E;
    --and-qrn-read-border: rgba(212, 175, 120, 0.18);
    --and-qrn-read-shadow: none;
    --and-qrn-active-glow: none;
    --and-qrn-arab-color: #F5F0E6;
    --and-qrn-arab-glow: 0 0 28px rgba(245, 235, 210, 0.12), 0 0 2px rgba(245, 235, 210, 0.08);
    --and-qrn-latin-color: #D4CEC4;
    --and-qrn-trans-color: #C8C2B8;
    --and-qrn-meta-color: #B8B2A8;
    --and-qrn-ayat-no-color: #E8B878;
    --and-qrn-text: #F0EBE3;
    --and-qrn-muted: #A8A29A;
    --and-qrn-surface: #353230;
    --and-qrn-surface-2: #3D3A36;
    --and-qrn-surface-3: #4A4742;
    --and-qrn-border: rgba(212, 175, 120, 0.2);
    --and-qrn-bc-glass: rgba(46, 44, 41, 0.82);
    --and-qrn-bc-solid: rgba(52, 49, 45, 0.96);
    --and-qrn-bc-btn-bg: rgba(232, 184, 120, 0.1);
    --and-qrn-bc-text: #D4CEC4;
    --and-qrn-bc-current: #F5F0E6;
    --and-qrn-active-bg: rgba(212, 165, 116, 0.14);
    --and-qrn-active-border: rgba(232, 184, 120, 0.38);
    --and-qrn-active-glow: 0 0 36px -6px rgba(232, 184, 120, 0.28), 0 0 0 1px rgba(232, 184, 120, 0.12);
    --and-qrn-progress-track: rgba(212, 165, 116, 0.22);
    --and-qrn-drawer-panel-bg: #24211E;
    --and-qrn-drawer-panel-blur: 0px;
    --and-qrn-drawer-panel-border: rgba(212, 175, 120, 0.18);
    --and-qrn-drawer-head-bg: #2A2724;
    --and-qrn-drawer-item-bg: #353230;
    --and-qrn-drawer-item-border: rgba(212, 175, 120, 0.16);
}
body.and-qrn-theme-sepia {
    --and-qrn-read-bg: #E8DCC8;
    --and-qrn-read-surface: rgba(240, 232, 218, 0.85);
    --and-qrn-read-surface-solid: #E0D4C0;
    --and-qrn-read-border: rgba(93, 78, 58, 0.14);
    --and-qrn-read-shadow: none;
    --and-qrn-arab-color: #3D2B1F;
    --and-qrn-latin-color: #5D4E3A;
    --and-qrn-trans-color: #6F5F4A;
    --and-qrn-meta-color: #8A7964;
    --and-qrn-ayat-no-color: #A16207;
    --and-qrn-text: #3D2B1F;
    --and-qrn-muted: #6F5F4A;
    --and-qrn-surface: #E8DCC8;
    --and-qrn-surface-2: #E0D4C0;
    --and-qrn-surface-3: #D6CAB4;
    --and-qrn-border: rgba(93, 78, 58, 0.16);
    --and-qrn-bc-glass: rgba(232, 220, 200, 0.76);
    --and-qrn-bc-solid: rgba(232, 220, 200, 0.97);
    --and-qrn-bc-btn-bg: rgba(93, 78, 58, 0.1);
    --and-qrn-bc-text: #5D4E3A;
    --and-qrn-bc-current: #3D2B1F;
    --and-qrn-active-bg: rgba(161, 98, 7, 0.08);
    --and-qrn-active-border: rgba(161, 98, 7, 0.24);
    --and-qrn-progress-track: rgba(161, 98, 7, 0.14);
    --and-qrn-drawer-panel-bg: #E0D4C0;
    --and-qrn-drawer-panel-blur: 0px;
    --and-qrn-drawer-panel-border: rgba(93, 78, 58, 0.18);
    --and-qrn-drawer-head-bg: #E8DCC8;
    --and-qrn-drawer-item-bg: #EDE4D4;
    --and-qrn-drawer-item-border: rgba(93, 78, 58, 0.16);
}

body.and-qrn-theme-dark .and-qrn-reading-nav__shell {
    --and-qrn-reading-nav-shell-bg: rgba(20, 18, 16, 0.3);
    --and-qrn-reading-nav-shell-border: rgba(212, 175, 120, 0.18);
    --and-qrn-reading-nav-shell-tint-top: rgba(30, 28, 24, 0.34);
    --and-qrn-reading-nav-shell-tint-bottom: rgba(20, 18, 16, 0.22);
    --and-qrn-reading-nav-chip-bg: rgba(40, 36, 32, 0.26);
    --and-qrn-reading-nav-chip-border: rgba(212, 175, 120, 0.18);
}
body.and-qrn-theme-dark .and-qrn-reading-nav__item {
    --and-qrn-reading-nav-icon: #e8b878;
    --and-qrn-reading-nav-icon-active: #f5d9a8;
}
body.and-qrn-theme-dark .and-qrn-reading-nav__label {
    --and-qrn-reading-nav-label: rgba(232, 184, 120, 0.78);
    --and-qrn-reading-nav-label-active: #F5D9A8;
}
body.and-qrn-theme-dark .and-qrn-reading-nav__icon svg {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 1px rgba(232, 184, 120, 0.35));
}
body.and-qrn-theme-sepia .and-qrn-reading-nav__shell {
    --and-qrn-reading-nav-shell-bg: rgba(255, 252, 245, 0.3);
    --and-qrn-reading-nav-shell-border: rgba(93, 78, 58, 0.18);
    --and-qrn-reading-nav-shell-tint-top: rgba(255, 252, 245, 0.34);
    --and-qrn-reading-nav-shell-tint-bottom: rgba(244, 236, 216, 0.22);
    --and-qrn-reading-nav-chip-bg: rgba(255, 252, 245, 0.26);
    --and-qrn-reading-nav-chip-border: rgba(93, 78, 58, 0.16);
}
body.and-qrn-theme-sepia .and-qrn-reading-nav__label {
    --and-qrn-reading-nav-label: rgba(93, 78, 58, 0.26);
}
body.and-body--quran-reading {
    background: var(--and-qrn-read-bg, #FFFFFF);
    --and-qrn-read-radius: 16px;
}
body.and-qrn-theme-dark.and-body--quran-reading {
    background: var(--and-qrn-read-bg);
}
body.and-qrn-theme-dark.and-body--quran-hub:not(.and-body--quran-surat) .and-layout--ambient::before {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 165, 116, 0.1), transparent 70%);
}
body.and-body--quran-reading .and-main--quran {
    background: var(--and-qrn-read-bg, #FFFFFF);
    color: var(--and-qrn-text);
    transition: background-color 0.4s ease, color 0.4s ease;
}
body.and-qrn-theme-dark.and-body--quran-reading .and-main--quran {
    background: var(--and-qrn-read-bg);
}
body.and-qrn-theme-light .and-main--quran,
body.and-qrn-theme-warm .and-main--quran,
body.and-qrn-theme-dark .and-main--quran,
body.and-qrn-theme-sepia .and-main--quran {
    color: var(--and-qrn-text);
}
body.and-qrn-theme-dark .and-qrn-header__logo {
    filter: brightness(0) invert(1) sepia(0.12) saturate(2.2) hue-rotate(350deg);
}
body.and-qrn-theme-light .and-qrn-surat-card,
body.and-qrn-theme-warm .and-qrn-surat-card,
body.and-qrn-theme-dark .and-qrn-surat-card,
body.and-qrn-theme-sepia .and-qrn-surat-card,
body.and-qrn-theme-light .and-qrn-ayat-card,
body.and-qrn-theme-warm .and-qrn-ayat-card,
body.and-qrn-theme-dark .and-qrn-ayat-card,
body.and-qrn-theme-sepia .and-qrn-ayat-card,
body.and-qrn-theme-light .and-qrn-bc,
body.and-qrn-theme-warm .and-qrn-bc,
body.and-qrn-theme-dark .and-qrn-bc,
body.and-qrn-theme-sepia .and-qrn-bc,
body.and-qrn-theme-light .and-qrn-nav-card,
body.and-qrn-theme-warm .and-qrn-nav-card,
body.and-qrn-theme-dark .and-qrn-nav-card,
body.and-qrn-theme-sepia .and-qrn-nav-card,
body.and-qrn-theme-light .and-qrn-theme-pick,
body.and-qrn-theme-warm .and-qrn-theme-pick,
body.and-qrn-theme-dark .and-qrn-theme-pick,
body.and-qrn-theme-sepia .and-qrn-theme-pick,
body.and-qrn-theme-light .and-qrn-settings__size,
body.and-qrn-theme-warm .and-qrn-settings__size,
body.and-qrn-theme-dark .and-qrn-settings__size,
body.and-qrn-theme-sepia .and-qrn-settings__size {
    background: var(--and-qrn-surface-2);
    border-color: var(--and-qrn-border);
    color: var(--and-qrn-text);
    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        color 0.4s ease,
        box-shadow 0.4s ease;
}
body.and-qrn-theme-light .and-qrn-drawer__head,
body.and-qrn-theme-warm .and-qrn-drawer__head,
body.and-qrn-theme-dark .and-qrn-drawer__head,
body.and-qrn-theme-sepia .and-qrn-drawer__head {
    background: var(--and-qrn-drawer-head-bg);
    border-bottom-color: var(--and-qrn-drawer-panel-border);
}
body.and-qrn-theme-light .and-qrn-drawer__panel,
body.and-qrn-theme-warm .and-qrn-drawer__panel,
body.and-qrn-theme-dark .and-qrn-drawer__panel,
body.and-qrn-theme-sepia .and-qrn-drawer__panel {
    background: var(--and-qrn-drawer-panel-bg);
    border-left-color: var(--and-qrn-drawer-panel-border);
    color: var(--and-qrn-text);
}
body.and-qrn-theme-light .and-qrn-drawer-item,
body.and-qrn-theme-warm .and-qrn-drawer-item,
body.and-qrn-theme-dark .and-qrn-drawer-item,
body.and-qrn-theme-sepia .and-qrn-drawer-item,
body.and-qrn-theme-light .and-qrn-drawer-list__item,
body.and-qrn-theme-warm .and-qrn-drawer-list__item,
body.and-qrn-theme-dark .and-qrn-drawer-list__item,
body.and-qrn-theme-sepia .and-qrn-drawer-list__item {
    background: var(--and-qrn-drawer-item-bg);
    border-color: var(--and-qrn-drawer-item-border);
    color: var(--and-qrn-text);
}
body.and-qrn-theme-light .and-qrn-drawer__title,
body.and-qrn-theme-warm .and-qrn-drawer__title,
body.and-qrn-theme-dark .and-qrn-drawer__title,
body.and-qrn-theme-sepia .and-qrn-drawer__title {
    color: var(--and-qrn-text);
}
body.and-qrn-theme-light .and-qrn-drawer__back,
body.and-qrn-theme-warm .and-qrn-drawer__back,
body.and-qrn-theme-dark .and-qrn-drawer__back,
body.and-qrn-theme-sepia .and-qrn-drawer__back,
body.and-qrn-theme-light .and-qrn-drawer__close,
body.and-qrn-theme-warm .and-qrn-drawer__close,
body.and-qrn-theme-dark .and-qrn-drawer__close,
body.and-qrn-theme-sepia .and-qrn-drawer__close {
    background: var(--and-qrn-surface-3);
    color: var(--and-qrn-text);
}
body.and-qrn-theme-light .and-qrn-drawer-item:active,
body.and-qrn-theme-warm .and-qrn-drawer-item:active,
body.and-qrn-theme-dark .and-qrn-drawer-item:active,
body.and-qrn-theme-sepia .and-qrn-drawer-item:active,
body.and-qrn-theme-light .and-qrn-drawer-list__item:active,
body.and-qrn-theme-warm .and-qrn-drawer-list__item:active,
body.and-qrn-theme-dark .and-qrn-drawer-list__item:active,
body.and-qrn-theme-sepia .and-qrn-drawer-list__item:active {
    background: color-mix(in srgb, var(--and-accent, #ff5a00) 18%, var(--and-qrn-drawer-item-bg));
    border-color: color-mix(in srgb, var(--and-accent, #ff5a00) 30%, var(--and-qrn-drawer-item-border));
}
body.and-qrn-theme-light .and-qrn-drawer-item__icon,
body.and-qrn-theme-warm .and-qrn-drawer-item__icon,
body.and-qrn-theme-dark .and-qrn-drawer-item__icon,
body.and-qrn-theme-sepia .and-qrn-drawer-item__icon {
    background: color-mix(in srgb, var(--and-accent, #ff5a00) 16%, var(--and-qrn-surface-3));
}
body.and-qrn-theme-light .and-qrn-drawer-item__label,
body.and-qrn-theme-warm .and-qrn-drawer-item__label,
body.and-qrn-theme-dark .and-qrn-drawer-item__label,
body.and-qrn-theme-sepia .and-qrn-drawer-item__label,
body.and-qrn-theme-light .and-qrn-drawer-list__title,
body.and-qrn-theme-warm .and-qrn-drawer-list__title,
body.and-qrn-theme-dark .and-qrn-drawer-list__title,
body.and-qrn-theme-sepia .and-qrn-drawer-list__title,
body.and-qrn-theme-light .and-qrn-drawer-last__surat,
body.and-qrn-theme-warm .and-qrn-drawer-last__surat,
body.and-qrn-theme-dark .and-qrn-drawer-last__surat,
body.and-qrn-theme-sepia .and-qrn-drawer-last__surat,
body.and-qrn-theme-light .and-qrn-surat-card__latin,
body.and-qrn-theme-warm .and-qrn-surat-card__latin,
body.and-qrn-theme-dark .and-qrn-surat-card__latin,
body.and-qrn-theme-sepia .and-qrn-surat-card__latin,
body.and-qrn-theme-light .and-qrn-surat-card__arab,
body.and-qrn-theme-warm .and-qrn-surat-card__arab,
body.and-qrn-theme-dark .and-qrn-surat-card__arab,
body.and-qrn-theme-sepia .and-qrn-surat-card__arab,
body.and-qrn-theme-light .and-qrn-bc__current,
body.and-qrn-theme-warm .and-qrn-bc__current,
body.and-qrn-theme-dark .and-qrn-bc__current,
body.and-qrn-theme-sepia .and-qrn-bc__current,
body.and-qrn-theme-light .and-qrn-bc__back,
body.and-qrn-theme-warm .and-qrn-bc__back,
body.and-qrn-theme-dark .and-qrn-bc__back,
body.and-qrn-theme-sepia .and-qrn-bc__back,
body.and-qrn-theme-light .and-qrn-nav-card__name,
body.and-qrn-theme-warm .and-qrn-nav-card__name,
body.and-qrn-theme-dark .and-qrn-nav-card__name,
body.and-qrn-theme-sepia .and-qrn-nav-card__name,
body.and-qrn-theme-light .and-qrn-nav-card__eyebrow,
body.and-qrn-theme-warm .and-qrn-nav-card__eyebrow,
body.and-qrn-theme-dark .and-qrn-nav-card__eyebrow,
body.and-qrn-theme-sepia .and-qrn-nav-card__eyebrow {
    color: var(--and-qrn-text);
}
body.and-qrn-theme-light .and-qrn-nav-card__eyebrow,
body.and-qrn-theme-warm .and-qrn-nav-card__eyebrow,
body.and-qrn-theme-sepia .and-qrn-nav-card__eyebrow {
    color: var(--and-accent-dark, #c2410c);
}
body.and-qrn-theme-dark .and-qrn-nav-card__eyebrow {
    color: var(--and-qrn-ayat-no-color, #e8b878);
}
body.and-qrn-theme-light .and-qrn-nav-card__meta,
body.and-qrn-theme-warm .and-qrn-nav-card__meta,
body.and-qrn-theme-dark .and-qrn-nav-card__meta,
body.and-qrn-theme-sepia .and-qrn-nav-card__meta,
body.and-qrn-theme-light .and-qrn-nav-card__pill,
body.and-qrn-theme-warm .and-qrn-nav-card__pill,
body.and-qrn-theme-dark .and-qrn-nav-card__pill,
body.and-qrn-theme-sepia .and-qrn-nav-card__pill {
    color: var(--and-qrn-muted);
}
body.and-qrn-theme-light .and-qrn-nav-card__label,
body.and-qrn-theme-warm .and-qrn-nav-card__label,
body.and-qrn-theme-dark .and-qrn-nav-card__label,
body.and-qrn-theme-sepia .and-qrn-nav-card__label {
    color: var(--and-qrn-muted);
}
body.and-qrn-theme-dark .and-qrn-nav-card__no,
body.and-qrn-theme-sepia .and-qrn-nav-card__no {
    color: rgba(255, 255, 255, 0.12);
}
body.and-qrn-theme-dark .and-qrn-nav-card__icon {
    background: linear-gradient(160deg, rgba(232, 184, 120, 0.2) 0%, rgba(212, 165, 116, 0.1) 100%);
    border-color: rgba(212, 175, 120, 0.22);
    color: var(--and-qrn-ayat-no-color, #e8b878);
}
body.and-qrn-theme-dark .and-qrn-nav-card__pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 175, 120, 0.12);
}
body.and-qrn-theme-dark .and-qrn-nav-card__pill--mekah {
    background: rgba(232, 184, 120, 0.12);
    border-color: rgba(232, 184, 120, 0.2);
    color: var(--and-qrn-ayat-no-color, #e8b878);
}
body.and-qrn-theme-dark .and-qrn-nav-card__pill--madinah {
    background: rgba(147, 197, 253, 0.1);
    border-color: rgba(147, 197, 253, 0.18);
    color: #93c5fd;
}
body.and-qrn-theme-light .and-qrn-settings__heading,
body.and-qrn-theme-warm .and-qrn-settings__heading,
body.and-qrn-theme-dark .and-qrn-settings__heading,
body.and-qrn-theme-sepia .and-qrn-settings__heading {
    color: var(--and-qrn-text);
}
body.and-qrn-theme-light .and-qrn-drawer-item__desc,
body.and-qrn-theme-warm .and-qrn-drawer-item__desc,
body.and-qrn-theme-dark .and-qrn-drawer-item__desc,
body.and-qrn-theme-sepia .and-qrn-drawer-item__desc,
body.and-qrn-theme-light .and-qrn-drawer-list__sub,
body.and-qrn-theme-warm .and-qrn-drawer-list__sub,
body.and-qrn-theme-dark .and-qrn-drawer-list__sub,
body.and-qrn-theme-sepia .and-qrn-drawer-list__sub,
body.and-qrn-theme-light .and-qrn-drawer-last__meta,
body.and-qrn-theme-warm .and-qrn-drawer-last__meta,
body.and-qrn-theme-dark .and-qrn-drawer-last__meta,
body.and-qrn-theme-sepia .and-qrn-drawer-last__meta,
body.and-qrn-theme-light .and-qrn-drawer-turun__hint,
body.and-qrn-theme-warm .and-qrn-drawer-turun__hint,
body.and-qrn-theme-dark .and-qrn-drawer-turun__hint,
body.and-qrn-theme-sepia .and-qrn-drawer-turun__hint,
body.and-qrn-theme-light .and-qrn-surat-card__meta,
body.and-qrn-theme-warm .and-qrn-surat-card__meta,
body.and-qrn-theme-dark .and-qrn-surat-card__meta,
body.and-qrn-theme-sepia .and-qrn-surat-card__meta,
body.and-qrn-theme-light .and-qrn-ayat-card__meta,
body.and-qrn-theme-warm .and-qrn-ayat-card__meta,
body.and-qrn-theme-dark .and-qrn-ayat-card__meta,
body.and-qrn-theme-sepia .and-qrn-ayat-card__meta,
body.and-qrn-theme-light .and-qrn-ayat-card__latin,
body.and-qrn-theme-warm .and-qrn-ayat-card__latin,
body.and-qrn-theme-dark .and-qrn-ayat-card__latin,
body.and-qrn-theme-sepia .and-qrn-ayat-card__latin,
body.and-qrn-theme-light .and-qrn-progress__label,
body.and-qrn-theme-warm .and-qrn-progress__label,
body.and-qrn-theme-dark .and-qrn-progress__label,
body.and-qrn-theme-sepia .and-qrn-progress__label,
body.and-qrn-theme-light .and-qrn-search-panel__hint,
body.and-qrn-theme-warm .and-qrn-search-panel__hint,
body.and-qrn-theme-dark .and-qrn-search-panel__hint,
body.and-qrn-theme-sepia .and-qrn-search-panel__hint,
body.and-qrn-theme-light .and-qrn-find-panel__hint,
body.and-qrn-theme-warm .and-qrn-find-panel__hint,
body.and-qrn-theme-dark .and-qrn-find-panel__hint,
body.and-qrn-theme-sepia .and-qrn-find-panel__hint,
body.and-qrn-theme-light .and-qrn-find-panel__title,
body.and-qrn-theme-warm .and-qrn-find-panel__title,
body.and-qrn-theme-dark .and-qrn-find-panel__title,
body.and-qrn-theme-sepia .and-qrn-find-panel__title,
body.and-qrn-theme-light .and-qrn-settings__hint,
body.and-qrn-theme-warm .and-qrn-settings__hint,
body.and-qrn-theme-dark .and-qrn-settings__hint,
body.and-qrn-theme-sepia .and-qrn-settings__hint,
body.and-qrn-theme-light .and-qrn-empty,
body.and-qrn-theme-warm .and-qrn-empty,
body.and-qrn-theme-dark .and-qrn-empty,
body.and-qrn-theme-sepia .and-qrn-empty,
body.and-qrn-theme-light .and-barang-count,
body.and-qrn-theme-warm .and-barang-count,
body.and-qrn-theme-dark .and-barang-count,
body.and-qrn-theme-sepia .and-barang-count,
body.and-qrn-theme-light .and-qrn-nav-card__meta,
body.and-qrn-theme-warm .and-qrn-nav-card__meta,
body.and-qrn-theme-dark .and-qrn-nav-card__meta,
body.and-qrn-theme-sepia .and-qrn-nav-card__meta,
body.and-qrn-theme-light .and-qrn-nav-card__label,
body.and-qrn-theme-warm .and-qrn-nav-card__label,
body.and-qrn-theme-dark .and-qrn-nav-card__label,
body.and-qrn-theme-sepia .and-qrn-nav-card__label {
    color: var(--and-qrn-muted);
}
body.and-qrn-theme-light .and-qrn-bc__sep,
body.and-qrn-theme-warm .and-qrn-bc__sep,
body.and-qrn-theme-dark .and-qrn-bc__sep,
body.and-qrn-theme-sepia .and-qrn-bc__sep {
    color: var(--and-qrn-meta-color);
}
body.and-qrn-theme-light .and-qrn-surat-card__no,
body.and-qrn-theme-warm .and-qrn-surat-card__no,
body.and-qrn-theme-sepia .and-qrn-surat-card__no {
    background: color-mix(in srgb, var(--and-qrn-ayat-no-color) 16%, var(--and-qrn-surface-3));
    color: var(--and-qrn-ayat-no-color);
}
body.and-qrn-theme-dark .and-qrn-surat-card__no {
    background: color-mix(in srgb, var(--and-qrn-ayat-no-color) 20%, var(--and-qrn-surface-3));
    color: var(--and-qrn-ayat-no-color);
}
body.and-qrn-theme-light .and-qrn-surat-card__actions,
body.and-qrn-theme-warm .and-qrn-surat-card__actions,
body.and-qrn-theme-dark .and-qrn-surat-card__actions,
body.and-qrn-theme-sepia .and-qrn-surat-card__actions {
    border-left-color: var(--and-qrn-border);
}
body.and-qrn-theme-light .and-qrn-ayat-card__arab,
body.and-qrn-theme-warm .and-qrn-ayat-card__arab,
body.and-qrn-theme-dark .and-qrn-ayat-card__arab,
body.and-qrn-theme-sepia .and-qrn-ayat-card__arab,
body.and-qrn-theme-light .and-qrn-ayat-card__arab--tajweed,
body.and-qrn-theme-warm .and-qrn-ayat-card__arab--tajweed,
body.and-qrn-theme-dark .and-qrn-ayat-card__arab--tajweed,
body.and-qrn-theme-sepia .and-qrn-ayat-card__arab--tajweed {
    color: var(--and-qrn-arab-color);
}
body.and-qrn-theme-light .and-qrn-ayat-card__id,
body.and-qrn-theme-warm .and-qrn-ayat-card__id,
body.and-qrn-theme-dark .and-qrn-ayat-card__id,
body.and-qrn-theme-sepia .and-qrn-ayat-card__id {
    color: var(--and-qrn-trans-color);
}
body.and-qrn-theme-light .and-qrn-progress__track,
body.and-qrn-theme-warm .and-qrn-progress__track,
body.and-qrn-theme-dark .and-qrn-progress__track,
body.and-qrn-theme-sepia .and-qrn-progress__track {
    background: var(--and-qrn-progress-track);
}
body.and-qrn-theme-light .and-dash-search__input,
body.and-qrn-theme-warm .and-dash-search__input,
body.and-qrn-theme-dark .and-dash-search__input,
body.and-qrn-theme-sepia .and-dash-search__input,
body.and-qrn-theme-light .and-bf-input,
body.and-qrn-theme-warm .and-bf-input,
body.and-qrn-theme-dark .and-bf-input,
body.and-qrn-theme-sepia .and-bf-input,
body.and-qrn-theme-light .and-qrn-jump-input,
body.and-qrn-theme-warm .and-qrn-jump-input,
body.and-qrn-theme-dark .and-qrn-jump-input,
body.and-qrn-theme-sepia .and-qrn-jump-input {
    background: var(--and-qrn-surface);
    border-color: var(--and-qrn-border);
    color: var(--and-qrn-text);
}
body.and-qrn-theme-light .and-qrn-theme-pick.is-active,
body.and-qrn-theme-warm .and-qrn-theme-pick.is-active,
body.and-qrn-theme-dark .and-qrn-theme-pick.is-active,
body.and-qrn-theme-sepia .and-qrn-theme-pick.is-active,
body.and-qrn-theme-light .and-qrn-settings__size.is-active,
body.and-qrn-theme-warm .and-qrn-settings__size.is-active,
body.and-qrn-theme-dark .and-qrn-settings__size.is-active,
body.and-qrn-theme-sepia .and-qrn-settings__size.is-active {
    background: color-mix(in srgb, var(--and-accent, #ff5a00) 12%, var(--and-qrn-surface-2));
    border-color: color-mix(in srgb, var(--and-accent, #ff5a00) 38%, var(--and-qrn-border));
    color: var(--and-qrn-text);
}
body.and-qrn-theme-light .and-qrn-notice,
body.and-qrn-theme-warm .and-qrn-notice,
body.and-qrn-theme-dark .and-qrn-notice,
body.and-qrn-theme-sepia .and-qrn-notice {
    background: var(--and-qrn-surface-2);
    border-color: var(--and-qrn-border);
    color: var(--and-qrn-text);
}
body.and-qrn-theme-dark .and-qrn-notice--err,
body.and-qrn-theme-light .and-qrn-notice--err,
body.and-qrn-theme-warm .and-qrn-notice--err,
body.and-qrn-theme-sepia .and-qrn-notice--err {
    background: color-mix(in srgb, #ef4444 12%, var(--and-qrn-surface-2));
    color: #fecaca;
}
body.and-qrn-theme-light .and-ps-row__label,
body.and-qrn-theme-warm .and-ps-row__label,
body.and-qrn-theme-dark .and-ps-row__label,
body.and-qrn-theme-sepia .and-ps-row__label {
    color: var(--and-qrn-text);
}
body.and-qrn-theme-light .and-ps-row__sub,
body.and-qrn-theme-warm .and-ps-row__sub,
body.and-qrn-theme-dark .and-ps-row__sub,
body.and-qrn-theme-sepia .and-ps-row__sub {
    color: var(--and-qrn-muted);
}
.and-qrn-nav-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--and-qrn-read-border, rgba(15, 23, 42, 0.08));
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 247, 237, 0.42) 100%),
        var(--and-qrn-read-surface, rgba(255, 255, 253, 0.88));
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px -16px rgba(255, 90, 0, 0.18);
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        opacity 0.28s ease;
    -webkit-tap-highlight-color: transparent;
}
.and-qrn-nav-card--prev {
    margin-bottom: 14px;
}
.and-qrn-nav-card--next {
    margin-top: 16px;
    margin-bottom: 20px;
    flex-direction: row-reverse;
    text-align: right;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
}
.and-qrn-nav-card--next.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.and-qrn-nav-card:active {
    transform: scale(0.985);
}
.and-qrn-nav-card--next:active.is-visible {
    transform: scale(0.985);
}
.and-qrn-nav-card__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 138, 61, 0.18) 0%, rgba(255, 90, 0, 0.12) 100%);
    border: 1px solid rgba(255, 90, 0, 0.16);
    color: var(--and-accent-dark, #c2410c);
}
.and-qrn-nav-card__chev {
    display: block;
}
.and-qrn-nav-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.and-qrn-nav-card--next .and-qrn-nav-card__body {
    align-items: flex-end;
}
.and-qrn-nav-card__eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--and-accent-dark, #c2410c);
}
.and-qrn-nav-card__name {
    width: 100%;
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--and-qrn-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.and-qrn-nav-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.and-qrn-nav-card--next .and-qrn-nav-card__meta {
    justify-content: flex-end;
}
.and-qrn-nav-card__pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--and-qrn-muted, #64748b);
}
.and-qrn-nav-card__pill--mekah {
    background: rgba(255, 90, 0, 0.08);
    border-color: rgba(255, 90, 0, 0.14);
    color: var(--and-accent-dark, #c2410c);
}
.and-qrn-nav-card__pill--madinah {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.14);
    color: #1d4ed8;
}
.and-qrn-nav-card__no {
    flex-shrink: 0;
    min-width: 28px;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgba(15, 23, 42, 0.14);
}
.and-qrn-nav-card__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-primary, #2563eb);
}
.and-body--quran-reading .and-qrn-ayat-card {
    content-visibility: visible;
    contain-intrinsic-size: auto;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transition: opacity 0.22s ease;
}
.and-qrn-ayat-card.is-active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    animation: none;
}
.and-qrn-ayat-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.and-body--quran-reading .and-qrn-ayat-card__meta {
    color: var(--and-qrn-meta-color, var(--and-text-muted, #64748b));
    transition: color 0.4s ease;
}
.and-body--quran-reading .and-qrn-ayat-card__arab,
.and-body--quran-reading .and-qrn-ayat-card__arab--tajweed {
    font-size: var(--and-qrn-arab-size, clamp(1.45rem, 4.8vw, 1.85rem));
    line-height: var(--and-qrn-arab-lh, 1.92);
    margin: 8px 0 10px;
    color: var(--and-qrn-arab-color, #1A1A1A);
    transition: color 0.4s ease, font-size 0.2s ease, line-height 0.2s ease;
}
.and-body--quran-reading .and-qrn-ayat-card__latin {
    font-size: 0.82rem;
    color: var(--and-qrn-latin-color, var(--and-text-muted, #64748b));
    transition: color 0.4s ease;
}
.and-body--quran-reading .and-qrn-ayat-card__id {
    font-size: var(--and-qrn-trans-size, 0.88rem);
    line-height: var(--and-qrn-trans-lh, 1.58);
    color: var(--and-qrn-trans-color, var(--and-text-muted, #737373));
    transition: color 0.4s ease, font-size 0.2s ease, line-height 0.2s ease;
}
.and-body--quran-reading .and-qrn-nav-card {
    background: #FFFFFF;
    border-color: var(--and-qrn-read-border, rgba(15, 23, 42, 0.06));
    box-shadow: none;
    transition: border-color 0.4s ease, transform 0.18s ease, opacity 0.28s ease;
}
.and-body--quran-reading .and-qrn-nav-card:hover {
    border-color: color-mix(in srgb, var(--and-qrn-active-border, rgba(255, 90, 0, 0.24)) 55%, var(--and-qrn-read-border));
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card__meta {
    color: color-mix(in srgb, var(--and-qrn-ayat-no-color) 55%, var(--and-qrn-meta-color));
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card.is-active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card__arab,
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card__arab--tajweed {
    color: var(--and-qrn-arab-color);
    text-shadow: var(--and-qrn-arab-glow, none);
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-bc {
    box-shadow:
        0 0 24px -8px rgba(212, 165, 116, 0.12),
        var(--and-qrn-read-shadow, 0 4px 18px -8px rgba(20, 18, 16, 0.35));
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-bc.is-scrolled {
    box-shadow:
        0 0 32px -6px rgba(212, 165, 116, 0.18),
        0 4px 20px -8px rgba(20, 18, 16, 0.4);
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-nav-card {
    background: var(--and-qrn-read-bg);
    border-color: var(--and-qrn-read-border);
    box-shadow: none;
}
body.and-qrn-theme-dark .and-qrn-surat-card {
    box-shadow: none;
}
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-surat-card {
    box-shadow: none !important;
}
body.and-qrn-theme-dark .and-qrn-progress__bar {
    background: linear-gradient(90deg, #C9955A, #E8B878);
    box-shadow: 0 0 12px -2px rgba(232, 184, 120, 0.45);
}
body.and-body--quran-surat .and-qrn-progress__bar,
body.and-body--quran-reading .and-qrn-progress__bar {
    box-shadow: none !important;
}
.and-body--quran-reading .and-qrn-progress__label {
    color: var(--and-qrn-meta-color, var(--and-text-muted, #64748b));
}
.and-qrn-settings__sizes--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .and-body--quran-reading .and-qrn-read {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .and-body--quran-reading .and-qrn-ayat-card {
        padding: 0;
    }
}
@media (min-width: 1024px) {
    .and-body--quran-reading .and-qrn-read {
        max-width: none;
        width: 100%;
    }
    .and-body--quran-reading .and-qrn-ayat-card__arab,
    .and-body--quran-reading .and-qrn-ayat-card__arab--tajweed {
        font-size: var(--and-qrn-arab-size, clamp(1.75rem, 4.5vw, 2.25rem));
    }
}
.and-qrn-mini-player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--and-bottom-nav-h, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    padding: 8px 12px 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.and-qrn-mini-player.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.and-qrn-mini-player__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid color-mix(in srgb, var(--bs-primary, #2563eb) 18%, #e2e8f0);
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(12px);
}
.and-qrn-mini-player__surat {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
}
.and-qrn-mini-player__ayat {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--and-text-muted, #64748b);
}
.and-qrn-mini-player__controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.and-qrn-mini-player__btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 10%, transparent);
    color: var(--bs-primary, #2563eb);
    font-size: 0.85rem;
    cursor: pointer;
}
.and-qrn-mini-player__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.and-qrn-mini-player__btn--main {
    width: 44px;
    height: 44px;
    background: var(--bs-primary, #2563eb);
    color: #fff;
}
.and-qrn-mini-player__icon--pause {
    display: none;
}
.and-qrn-mini-player.is-playing .and-qrn-mini-player__icon--play {
    display: none;
}
.and-qrn-mini-player.is-playing .and-qrn-mini-player__icon--pause {
    display: block;
}
body.and-body--qrn-mini-audio {
    --and-qrn-mini-h: 72px;
    padding-bottom: calc(var(--and-qrn-mini-h) + 8px);
}
.and-qrn-fab-wrap {
    position: fixed;
    right: 16px;
    bottom: calc(var(--and-bottom-nav-h, 64px) + var(--and-qrn-mini-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 130;
    pointer-events: none;
}
.and-qrn-fab-wrap > * {
    pointer-events: auto;
}
.and-qrn-fab {
    display: grid;
    place-items: center;
    width: var(--and-nav-fab-size, 56px);
    height: var(--and-nav-fab-size, 56px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: linear-gradient(160deg, #ff8a3d 0%, var(--and-accent, #ff5a00) 100%);
    color: #fff;
    box-shadow: var(--and-elev-fab, 0 10px 28px -8px rgba(255, 90, 0, 0.45));
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.and-qrn-fab__icon {
    grid-area: 1 / 1;
}
.and-qrn-fab__icon--close {
    opacity: 0;
    transform: scale(0.8) rotate(-90deg);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.and-qrn-fab__icon--menu {
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.and-qrn-fab.is-open {
    background: linear-gradient(160deg, var(--and-accent-dark, #e04e00) 0%, var(--and-accent, #ff5a00) 100%);
}
.and-qrn-fab.is-open .and-qrn-fab__icon--menu {
    opacity: 0;
    transform: scale(0.8) rotate(90deg);
}
.and-qrn-fab.is-open .and-qrn-fab__icon--close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.and-qrn-fab:active {
    transform: scale(0.94);
}
body.and-body--qrn-reading-nav {
    --and-qrn-reading-nav-h: 56px;
    --and-bottom-nav-h: var(--and-qrn-reading-nav-h);
}
body.and-body--qrn-reading-nav #and-spa-nav {
    display: none !important;
}
body.and-body--qrn-reading-nav .and-qrn-fab-wrap {
    display: none !important;
}
body.and-body--qrn-reading-nav .and-main--quran {
    padding-bottom: calc(var(--and-qrn-reading-nav-h, 56px) + var(--and-safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
}
.and-qrn-reading-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--and-z-nav, 130) + 1);
    pointer-events: none;
}
.and-qrn-reading-nav:not([hidden]) {
    pointer-events: auto;
}
.and-qrn-reading-nav[hidden] {
    display: none !important;
}
.and-qrn-reading-nav__shell {
    position: relative;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    border-top: 1px solid var(--and-qrn-reading-nav-shell-border);
    overflow: visible;
}

.and-qrn-reading-nav__shell::before {
    display: none;
}
.and-qrn-reading-nav__track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    min-height: var(--and-qrn-reading-nav-h, 56px);
}
.and-qrn-reading-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 0 2px;
    border: 0;
    background: transparent;
    color: var(--and-qrn-reading-nav-icon);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.and-qrn-reading-nav__item:active {
    transform: scale(0.96);
}
.and-qrn-reading-nav__item.is-active,
.and-qrn-reading-nav__item.is-open {
    color: var(--and-qrn-reading-nav-icon-active);
}
.and-qrn-reading-nav__item:disabled,
.and-qrn-reading-nav__item.is-disabled {
    color: rgba(100, 116, 139, 0.4);
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}
.and-qrn-reading-nav__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 32px;
    border-radius: 10px;
    background: var(--and-qrn-reading-nav-chip-bg);
    border: 1px solid var(--and-qrn-reading-nav-chip-border);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: inherit;
}
.and-qrn-reading-nav__icon svg {
    display: block;
    stroke: currentColor;
    color: inherit;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 1px 2px rgba(15, 23, 42, 0.12));
}
.and-qrn-reading-nav__item.is-active .and-qrn-reading-nav__icon,
.and-qrn-reading-nav__item.is-open .and-qrn-reading-nav__icon {
    background: var(--and-qrn-reading-nav-chip-active-bg);
    border-color: var(--and-qrn-reading-nav-chip-active-border);
}
.and-qrn-reading-nav__label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--and-qrn-reading-nav-label);
}
.and-qrn-reading-nav__item.is-active .and-qrn-reading-nav__label,
.and-qrn-reading-nav__item.is-open .and-qrn-reading-nav__label {
    color: var(--and-qrn-reading-nav-label-active);
}
.and-qrn-reading-nav__item.is-active .and-qrn-reading-nav__icon svg path {
    fill: rgba(255, 90, 0, 0.22);
    stroke: currentColor;
}
.and-qrn-reading-nav__svg {
    grid-area: 1 / 1;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.and-qrn-reading-nav__svg--close {
    opacity: 0;
    transform: scale(0.85) rotate(-90deg);
}
.and-qrn-reading-nav__item.is-open .and-qrn-reading-nav__svg--menu {
    opacity: 0;
    transform: scale(0.85) rotate(90deg);
}
.and-qrn-reading-nav__item.is-open .and-qrn-reading-nav__svg--close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.and-qrn-reading-nav__item:disabled:active,
.and-qrn-reading-nav__item.is-disabled:active {
    transform: none;
}
.and-qrn-juz-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.and-qrn-juz-pick {
    padding: 12px 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    background: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.and-qrn-juz-pick:active {
    background: rgba(255, 90, 0, 0.08);
    border-color: rgba(255, 90, 0, 0.22);
}
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-qrn-reading-nav {
        display: none !important;
    }
}
.and-qrn-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
}
.and-qrn-drawer[hidden] {
    display: none !important;
}
.and-qrn-drawer:not([hidden]) {
    display: block;
    visibility: visible;
}
.and-qrn-drawer.is-open {
    pointer-events: auto;
}
.and-qrn-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.22);
    opacity: 0;
    transition: opacity 0.28s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.and-qrn-drawer.is-open .and-qrn-drawer__backdrop {
    opacity: 1;
}
.and-qrn-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 320px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--and-qrn-drawer-panel-bg);
    border-left: 1px solid var(--and-qrn-drawer-panel-border);
    border-radius: 20px 0 0 20px;
    box-shadow: -4px 0 28px -12px rgba(15, 23, 42, 0.2);
    transform: translate3d(100%, 0, 0);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    isolation: isolate;
}
.and-qrn-drawer.is-open .and-qrn-drawer__panel {
    transform: translate3d(0, 0, 0);
}
.and-qrn-drawer__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: calc(var(--and-safe-top, 0px) + 12px) 12px 12px;
    border-bottom: 1px solid var(--and-qrn-drawer-panel-border);
    background: var(--and-qrn-drawer-head-bg);
}
.and-qrn-drawer__title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--and-qrn-text, #0f172a);
    text-align: center;
}
.and-qrn-drawer__back,
.and-qrn-drawer__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: var(--and-qrn-surface-3, rgba(15, 23, 42, 0.05));
    color: var(--and-qrn-text, #334155);
    cursor: pointer;
    flex-shrink: 0;
}
.and-qrn-drawer__back[hidden] {
    visibility: hidden;
    pointer-events: none;
}
.and-qrn-drawer__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.and-qrn-drawer-menu {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.and-qrn-drawer-section__title {
    margin: 0 0 6px;
    padding: 0 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--and-qrn-meta-color, #64748b);
}
.and-qrn-drawer-section__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.and-qrn-drawer-item--compact {
    padding: 10px 12px;
    gap: 10px;
}
.and-qrn-drawer-item--compact .and-qrn-drawer-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1rem;
}
.and-qrn-drawer-item--compact .and-qrn-drawer-item__label {
    flex: 1;
    min-width: 0;
}
.and-qrn-drawer-item--compact .and-qrn-drawer-item__copy,
.and-qrn-drawer-item--compact .and-qrn-drawer-item__desc {
    display: none;
}
.and-qrn-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--and-qrn-drawer-item-border);
    border-radius: 14px;
    background: var(--and-qrn-drawer-item-bg);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.and-qrn-drawer-item:active {
    transform: scale(0.985);
    background: color-mix(in srgb, var(--and-accent, #ff5a00) 18%, var(--and-qrn-drawer-item-bg, rgba(255, 247, 237, 0.45)));
    border-color: color-mix(in srgb, var(--and-accent, #ff5a00) 30%, var(--and-qrn-drawer-item-border, rgba(255, 90, 0, 0.22)));
}
.and-qrn-drawer-item__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--and-accent, #ff5a00) 16%, var(--and-qrn-surface-3, transparent));
    font-size: 1.1rem;
    flex-shrink: 0;
}
.and-qrn-drawer-item__copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.and-qrn-drawer-item__label {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--and-qrn-text, #0f172a);
}
.and-qrn-drawer-item__desc {
    font-size: 0.78rem;
    color: var(--and-qrn-muted, #64748b);
}
.and-qrn-drawer-item__chev {
    flex-shrink: 0;
    color: #94a3b8;
}
.and-qrn-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.and-qrn-drawer-list__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--and-qrn-drawer-item-border);
    border-radius: 14px;
    background: var(--and-qrn-drawer-item-bg);
    text-align: left;
    cursor: pointer;
}
.and-qrn-drawer-list__item:active {
    background: rgba(255, 247, 237, 0.45);
}
.and-qrn-drawer-list__title {
    font-weight: 600;
    color: #0f172a;
}
.and-qrn-drawer-list__sub {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}
.and-qrn-drawer-last__surat {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}
.and-qrn-drawer-last__meta {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: #64748b;
}
.and-qrn-last-read__btn--block {
    width: 100%;
    text-align: center;
}
.and-qrn-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.and-qrn-settings__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.and-qrn-settings__group-title {
    margin: 0;
    padding: 0 4px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--and-qrn-meta-color, #64748b);
}
.and-qrn-settings__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px;
    border: 1px solid var(--and-qrn-drawer-item-border, rgba(15, 23, 42, 0.08));
    border-radius: 16px;
    background: var(--and-qrn-drawer-item-bg, rgba(255, 255, 255, 0.28));
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    overflow: hidden;
}
.and-qrn-settings__card--legend {
    padding: 12px 14px;
}
.and-qrn-settings__card--fields {
    padding: 12px 14px;
    gap: 12px;
}
.and-qrn-settings__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.and-qrn-settings__toggle + .and-qrn-settings__toggle {
    border-top: 1px solid var(--and-qrn-border, rgba(15, 23, 42, 0.06));
}
.and-qrn-settings__toggle-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 90, 0, 0.1);
    border: 1px solid rgba(255, 90, 0, 0.12);
    font-size: 0.95rem;
    line-height: 1;
}
.and-qrn-settings__toggle-label {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--and-qrn-text, #0f172a);
}
.and-qrn-settings__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.and-qrn-settings__field + .and-qrn-settings__field {
    padding-top: 12px;
    border-top: 1px solid var(--and-qrn-border, rgba(15, 23, 42, 0.06));
}
.and-qrn-settings__field-label {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--and-qrn-text, #0f172a);
}
.and-qrn-settings__seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.and-qrn-settings__seg--3 .and-qrn-settings__size {
    flex: 1 1 0;
    min-width: 0;
}
.and-qrn-settings__seg--4 .and-qrn-settings__size {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 6px;
    font-size: 0.78rem;
}
.and-qrn-settings__row {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.and-qrn-settings__section {
    padding: 14px 0 4px;
}
.and-qrn-settings__heading {
    margin: 0 0 10px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}
.and-qrn-settings__sizes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.and-qrn-settings__size {
    flex: 1;
    min-height: 40px;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--and-qrn-muted, #64748b);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.and-qrn-settings__size.is-active {
    background: var(--and-qrn-surface-2, #fff);
    color: var(--and-accent-dark, #c2410c);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.and-qrn-settings__size:active {
    transform: scale(0.98);
}
body.and-qrn-theme-dark .and-qrn-settings__seg {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 175, 120, 0.1);
}
body.and-qrn-theme-dark .and-qrn-settings__size.is-active {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
body.and-qrn-theme-dark .and-qrn-settings__toggle-icon {
    background: rgba(232, 184, 120, 0.12);
    border-color: rgba(212, 175, 120, 0.18);
}
.and-qrn-jump-form__label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.88rem;
    font-weight: 600;
}
.and-qrn-jump-form__row {
    display: flex;
    gap: 8px;
}
.and-qrn-jump-form__row .and-bf-input {
    flex: 1;
}
@media (prefers-reduced-motion: reduce) {
    .and-qrn-drawer__backdrop,
    .and-qrn-drawer__panel,
    .and-qrn-fab,
    .and-qrn-fab__icon {
        transition: none !important;
    }
}
@keyframes andQrnFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes andQrnAyatPulse {
    from { opacity: 0.72; }
    to { opacity: 1; }
}
@media (min-width: 768px) {
    .and-qrn-fab-wrap {
        right: 24px;
    }
    .and-qrn-mini-player__inner {
        border-radius: 20px;
    }
    .and-qrn-drawer__panel {
        width: min(72vw, 360px);
    }
}

/* ——— Tahfizh ——— */
.and-thz-list-page .and-thz-data-hero {
    margin-bottom: 10px;
}
.and-thz-list-page .and-thz-data-hero .and-data-hero__search {
    margin-top: 2px;
}
.and-thz-list-page .and-thz-hub-menu {
    margin: 0 0 10px;
    padding: 0 2px 2px;
}
.and-thz-list-page .and-thz-kelas-chips {
    margin-bottom: 12px;
    padding: 0 2px;
}
.and-thz-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.and-thz-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 0;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.35);
}
.and-thz-card__avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #e2e8f0, #f8fafc);
    color: #475569;
    font-weight: 800;
    font-size: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
}
.and-thz-card__avatar--photo {
    background: #f1f5f9;
    box-shadow: 0 8px 20px -12px rgba(14, 116, 178, 0.45);
}
.and-thz-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.and-thz-card__body {
    flex: 1;
    min-width: 0;
}
.and-thz-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.and-thz-card__identity {
    min-width: 0;
}
.and-thz-card__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.and-thz-card__sub {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.and-thz-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}
.and-thz-card__meta svg {
    flex-shrink: 0;
    opacity: 0.75;
}
.and-thz-card__range-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.and-thz-card__range-sep {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 700;
}
.and-thz-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.02em;
}
.and-thz-badge__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    font-size: 0.62rem;
}
.and-thz-badge--surat {
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
}
.and-thz-badge--ayat {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.22);
    color: #047857;
}
.and-thz-badge--jenis {
    flex-shrink: 0;
    background: rgba(100, 116, 139, 0.12);
    border: 1px solid rgba(100, 116, 139, 0.2);
    color: #475569;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
}
.and-thz-badge--jenis.is-setoran {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
}
.and-thz-badge--jenis.is-ulang {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.28);
    color: #b45309;
}
.and-thz-badge--jenis.is-murajaah {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.24);
    color: #6d28d9;
}
.and-thz-badge--nilai {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(251, 146, 60, 0.16);
    border: 1px solid rgba(251, 146, 60, 0.38);
    color: #c2410c;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1;
}
.and-thz-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}
.and-thz-card__guru {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.and-thz-card__note-wrap {
    flex-shrink: 0;
    margin: 0;
}
.and-thz-card__note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.and-thz-card__note-toggle::-webkit-details-marker {
    display: none;
}
.and-thz-card__note-caret {
    transition: transform 0.2s ease;
}
.and-thz-card__note-wrap[open] .and-thz-card__note-caret {
    transform: rotate(180deg);
}
.and-thz-card__nilai {
    margin: 0 0 4px;
    font-size: 0.84rem;
    color: #334155;
}
.and-thz-card__nilai-cat {
    color: #64748b;
    font-weight: 600;
}
.and-thz-card__note {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--and-text-muted, #64748b);
    line-height: 1.45;
    text-align: left;
}
.and-thz-empty {
    color: var(--and-text-muted, #64748b);
    padding: 24px 8px;
    text-align: center;
}
@media (min-width: 768px) {
    .and-thz-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}
.and-thz-form__submit {
    width: 100%;
}
.and-thz-form-hint {
    color: var(--and-text-muted, #64748b);
    padding: 6px 4px;
}
.and-thz-form-guru-info {
    margin: 0;
    font-size: 0.9rem;
    color: var(--and-text-muted, #64748b);
}
.and-thz-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 16px;
}
.and-thz-preview__card {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.25);
}
.and-thz-preview__card--awal {
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 8%, #fff);
}
.and-thz-preview__title {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--and-text-muted, #64748b);
}
.and-thz-preview__name {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
}
.and-thz-preview__meta,
.and-thz-preview__range,
.and-thz-preview__ref {
    margin: 0;
    font-size: 0.9rem;
    color: var(--and-text-muted, #64748b);
}
.and-thz-preview__ref {
    margin-top: 4px;
    font-weight: 700;
    color: #334155;
}
.and-thz-preview__arab {
    margin: 12px 0 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 1.95rem;
    line-height: 2.4;
    text-align: right;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: var(--and-font-quran);
}
.and-thz-preview__arab-loading {
    margin: 10px 0 0;
    font-size: 0.86rem;
    color: var(--and-text-muted, #64748b);
}
.and-thz-preview__card--last-ayat {
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 6%, #fff);
}
.and-thz-picker-body {
    max-height: 52vh;
    overflow-y: auto;
}
.and-thz-picker-search {
    margin: 0 16px 10px;
}
.and-thz-surat-pick {
    margin-bottom: 12px;
}
.and-thz-surat-num {
    font-size: 0.82rem;
    font-weight: 700;
}
.and-thz-surat-badge,
.and-thz-ayat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}
.and-thz-surat-badge--chip {
    padding: 5px 11px;
    font-size: 0.68rem;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 14px -8px rgba(37, 99, 235, 0.85);
}
.and-thz-ayat-badge--chip {
    padding: 5px 11px;
    font-size: 0.68rem;
    color: #fff;
    background: linear-gradient(135deg, #ff7a1a 0%, #ff5a00 100%);
    box-shadow: 0 4px 14px -8px rgba(255, 90, 0, 0.85);
}
.and-thz-surat-badge--num {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.9);
}
.and-thz-surat-badge--initial {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.and-thz-surat-badge--head {
    padding: 6px 12px;
    font-size: 0.72rem;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 16px -10px rgba(37, 99, 235, 0.9);
}
.and-thz-ayat-badge--head {
    padding: 6px 12px;
    font-size: 0.72rem;
    color: #fff;
    background: linear-gradient(135deg, #ff7a1a 0%, #ff5a00 100%);
    box-shadow: 0 6px 16px -10px rgba(255, 90, 0, 0.9);
}
.and-thz-ayat-badge--awal {
    background: linear-gradient(135deg, #ff7a1a 0%, #ff5a00 100%);
}
.and-thz-ayat-badge--akhir {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 6px 16px -10px rgba(22, 163, 74, 0.9);
}
.and-thz-label-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}
.and-thz-label-badge--partial {
    color: #fff;
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}
.and-thz-surat-pick-row__labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-surat-pick-row {
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 16px;
    border-color: rgba(37, 99, 235, 0.16);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(255, 255, 255, 0.96) 55%);
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-surat-pick-row.is-selected {
    border-color: rgba(37, 99, 235, 0.55);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(255, 255, 255, 0.98) 60%);
    box-shadow: 0 10px 28px -16px rgba(37, 99, 235, 0.65);
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-surat-pick-row.is-partial {
    border-color: rgba(255, 90, 0, 0.35);
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.08) 0%, rgba(255, 255, 255, 0.96) 55%);
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-surat-pick-row .and-btrx-pick-row__title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}
.and-btrx-pick-row.is-selected {
    border-color: color-mix(in srgb, var(--bs-primary, #2563eb) 55%, transparent);
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 8%, #fff);
}
.and-btrx-santri-selected__sub {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--and-text-muted, #64748b);
}
.and-body--buku-hub.and-body--no-nav .and-barang-form-layout:has(.and-thz-form-shell) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.and-body--buku-hub.and-body--no-nav .and-barang-form-layout .and-thz-form-shell {
    flex: 1;
    min-height: 0;
}
.and-thz-form-shell .and-main--btrx-form {
    gap: 6px;
}
.and-thz-form-header.and-bf-header.and-form-hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 0;
    --and-thz-header-x: 10px;
    padding: 8px var(--and-thz-header-x) 10px;
    border-radius: 18px;
}
.and-thz-form-header__bar {
    gap: 8px;
    min-height: 0;
}
.and-thz-form-header .and-bf-header__title {
    font-size: 1rem;
    line-height: 1.25;
}
.and-thz-header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.and-thz-header-date {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    white-space: nowrap;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.and-thz-form-header .and-thz-steps-card--inline {
    margin: 8px calc(-1 * var(--and-thz-header-x)) 0;
    padding: 10px 0 4px;
    width: calc(100% + (2 * var(--and-thz-header-x)));
    border-radius: 0;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.and-thz-form-header .and-bf-steps {
    width: 100%;
    justify-content: space-between;
    gap: 0;
}
.and-thz-form-header .and-bf-step {
    flex: 1 1 25%;
    min-width: 0;
    gap: 6px;
    padding: 0 1px;
}
.and-thz-form-header .and-bf-steps__track {
    top: 16px;
    height: 2px;
    left: 12.5%;
    right: 12.5%;
    background: rgba(255, 255, 255, 0.2);
}
.and-thz-form-header .and-bf-step__num {
    width: 32px;
    height: 32px;
    font-size: 0.8125rem;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.72);
}
.and-thz-form-header .and-bf-step__label {
    font-size: 0.54rem;
    letter-spacing: 0.05em;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.58);
}
.and-thz-form-header .and-bf-step.is-active .and-bf-step__num {
    background: var(--and-accent);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 90, 0, 0.35);
}
.and-thz-form-header .and-bf-step.is-active .and-bf-step__label {
    color: rgba(255, 255, 255, 0.95);
}
.and-thz-form-header .and-bf-step.is-done .and-bf-step__num {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.and-thz-form-header .and-bf-step.is-done .and-bf-step__label {
    color: rgba(255, 255, 255, 0.72);
}
.and-thz-form-shell .and-main--btrx-form .and-thz-form-header .and-thz-steps-card--inline {
    padding-left: 0;
    padding-right: 0;
}
.and-thz-form-shell .and-main--btrx-form .and-thz-form-header .and-bf-steps {
    width: 100%;
}
.and-thz-form-shell .and-bf-form--wizard {
    gap: 6px;
}
@media (max-width: 767px) {
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-1,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-2,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 {
        gap: 4px;
        padding-top: var(--and-page-inset-top);
    }
    .and-thz-form-shell .and-thz-form-header.and-bf-header.and-form-hero {
        --and-thz-header-x: 8px;
        padding: 6px var(--and-thz-header-x) 8px;
        border-radius: 16px;
    }
    .and-thz-form-shell .and-thz-form-header .and-bf-header__title {
        font-size: 0.9375rem;
        margin: 0;
    }
    .and-thz-form-shell .and-thz-form-header .and-thz-header-date {
        font-size: 0.6rem;
        padding: 3px 6px;
        max-width: 38vw;
    }
    .and-thz-form-shell .and-thz-form-header .and-thz-header-actions {
        gap: 4px;
    }
    .and-thz-form-shell .and-thz-form-header .and-thz-steps-card--inline {
        margin-top: 6px;
        padding-top: 8px;
        padding-bottom: 2px;
    }
    .and-thz-form-shell .and-thz-form-header .and-bf-step__num {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .and-thz-form-shell .and-thz-form-header .and-bf-step__label {
        font-size: 0.5rem;
        letter-spacing: 0.04em;
    }
    .and-thz-form-shell .and-thz-form-header .and-bf-steps__track {
        top: 15px;
        left: 12.5%;
        right: 12.5%;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-form--wizard,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-form--wizard {
        gap: 6px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel[data-panel="3"].is-active,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel[data-panel="4"].is-active {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.28);
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__content,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__content {
        padding: 14px 14px 18px;
        flex: 1;
        min-height: 0;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__head,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__head {
        margin-bottom: 10px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__title,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__title {
        font-size: 1.0625rem;
        line-height: 1.3;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__sub,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__sub {
        margin-top: 4px;
        font-size: 0.8125rem;
        line-height: 1.4;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-step3-head {
        gap: 10px;
        align-items: flex-start;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-lanjutan-list,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-manual-surat-list {
        gap: 12px;
        margin-top: 4px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-lanjutan-card {
        padding: 14px 16px;
        border-radius: 16px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-multi-summary {
        gap: 10px;
        margin-bottom: 10px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-multi-editor-hint {
        margin-bottom: 12px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__foot,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__foot {
        flex-shrink: 0;
        gap: 10px;
        padding: 10px 12px calc(10px + var(--and-safe-bottom, 0px));
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        background: rgba(255, 255, 255, 0.92);
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-thz-step4-setoran__cards {
        gap: 12px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-thz-step4-fields {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-thz-step4-row {
        gap: 14px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-textarea--multiline {
        min-height: 88px;
    }
}
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-1,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-2,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 {
        gap: 6px;
        padding-top: calc(var(--and-page-inset-top) + 2px);
    }
    .and-thz-form-shell .and-thz-form-header.and-bf-header.and-form-hero {
        --and-thz-header-x: 14px;
        padding: 8px var(--and-thz-header-x) 10px;
        border-radius: 20px;
    }
    .and-thz-form-shell .and-thz-form-header .and-bf-header__title {
        font-size: 1.0625rem;
        margin: 0;
    }
    .and-thz-form-shell .and-thz-form-header .and-thz-header-date {
        font-size: 0.7rem;
        padding: 4px 10px;
        max-width: none;
    }
    .and-thz-form-shell .and-thz-form-header .and-thz-steps-card--inline {
        margin-top: 8px;
        padding-top: 10px;
        padding-bottom: 4px;
    }
    .and-thz-form-shell .and-thz-form-header .and-bf-step__num {
        width: 34px;
        height: 34px;
        font-size: 0.875rem;
    }
    .and-thz-form-shell .and-thz-form-header .and-bf-step__label {
        font-size: 0.58rem;
    }
    .and-thz-form-shell .and-thz-form-header .and-bf-steps__track {
        top: 17px;
        left: 12.5%;
        right: 12.5%;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-1 .and-bf-form--wizard,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-form--wizard,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-form--wizard {
        gap: 8px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-1 .and-bf-panel[data-panel="1"].is-active,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel[data-panel="3"].is-active,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel[data-panel="4"].is-active {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-radius: 1.25rem;
        background: rgba(255, 255, 255, 0.84);
        border: 1px solid rgba(255, 255, 255, 0.62);
        box-shadow: 0 16px 40px -28px rgba(15, 23, 42, 0.32);
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-1 .and-bf-panel__content,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__content,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__content {
        padding: 18px 22px 22px;
        flex: 1;
        min-height: 0;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-1 .and-bf-panel__head,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__head,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__head {
        margin-bottom: 12px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-1 .and-bf-panel__title,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__title,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__title {
        font-size: 1.1875rem;
        line-height: 1.35;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__sub,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__sub {
        margin-top: 6px;
        font-size: 0.875rem;
        line-height: 1.45;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-1 .and-btrx-pick-list {
        gap: 10px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-step3-head {
        gap: 14px;
        align-items: flex-start;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-lanjutan-list,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-manual-surat-list {
        gap: 12px;
        margin-top: 6px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-lanjutan-card {
        padding: 16px 18px;
        border-radius: 16px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-multi-summary {
        gap: 12px;
        margin-bottom: 12px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-multi-pick-card {
        padding: 12px 14px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-1 .and-bf-panel__foot--solo,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel__foot,
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-panel__foot {
        flex-shrink: 0;
        gap: 12px;
        padding: 12px 18px 14px;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        background: rgba(255, 255, 255, 0.94);
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-thz-step4-setoran__cards {
        gap: 14px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-thz-step4-fields {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-thz-step4-row {
        gap: 16px;
    }
    .and-thz-form-shell .and-main--btrx-form.and-btrx-step-4 .and-bf-textarea--multiline {
        min-height: 96px;
    }
}
.and-thz-step-empty {
    margin: 16px 4px;
    text-align: center;
    color: var(--and-text-muted, #64748b);
    font-size: 0.92rem;
}
.and-thz-preview--last {
    margin-top: 4px;
}
.and-thz-last-setoran {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 12px;
}
.and-thz-last-setoran__info {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--and-text-muted, #64748b);
    line-height: 1.45;
}
.and-thz-last-setoran__partial {
    margin: -4px 0 0;
    padding: 6px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, #ff5a00 10%, #fff);
    border: 1px solid color-mix(in srgb, #ff5a00 24%, transparent);
    font-size: 0.78rem;
    font-weight: 700;
    color: #c2410c;
    line-height: 1.35;
}
.and-thz-last-setoran__loading {
    margin: 10px 0 0;
    font-size: 0.86rem;
    color: var(--and-text-muted, #64748b);
    text-align: center;
}
.and-thz-verse-card {
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.88) 100%);
    border: 1px solid rgba(148, 163, 184, 0.32);
}
.and-thz-verse-card--last {
    border-color: rgba(37, 99, 235, 0.28);
    background: linear-gradient(160deg, rgba(239, 246, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 10px 28px -18px rgba(37, 99, 235, 0.35);
}
.and-thz-verse-card--awal {
    border-color: rgba(255, 90, 0, 0.38);
    background: linear-gradient(160deg, rgba(255, 237, 213, 0.72) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 10px 28px -18px rgba(255, 90, 0, 0.35);
}
.and-thz-verse-card--akhir {
    border-color: rgba(22, 163, 74, 0.38);
    background: linear-gradient(160deg, rgba(220, 252, 231, 0.72) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 10px 28px -18px rgba(22, 163, 74, 0.35);
}
.and-thz-verse-card--count {
    border-color: rgba(148, 163, 184, 0.32);
    background: linear-gradient(160deg, rgba(248, 250, 252, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.and-thz-verse-card__role {
    display: inline-flex;
    margin: 0 0 8px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.and-thz-verse-card--awal .and-thz-verse-card__role {
    color: #c2410c;
}
.and-thz-verse-card--akhir .and-thz-verse-card__role {
    color: #15803d;
}
.and-thz-verse-card--count .and-thz-verse-card__role {
    color: #475569;
}
.and-thz-verse-card:not(:has(.and-thz-lanjutan-card__arab)) .and-thz-lanjutan-card__head {
    margin-bottom: 0;
}
.and-thz-lanjutan-card__head--solo {
    margin-bottom: 0;
}
.and-thz-ayat-badge--awal {
    background: linear-gradient(135deg, #ff7a1a 0%, #ff5a00 100%);
    box-shadow: 0 4px 14px -8px rgba(255, 90, 0, 0.85);
}
.and-thz-ayat-badge--akhir {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 4px 14px -8px rgba(22, 163, 74, 0.85);
}
.and-thz-ayat-badge--count {
    font-size: 0.82rem;
    padding: 8px 14px;
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    box-shadow: 0 6px 16px -10px rgba(51, 65, 85, 0.75);
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-2 .and-thz-verse-card--last .and-thz-lanjutan-card__arab {
    font-size: 2rem;
    line-height: 2.45;
}
.and-thz-lanjutan-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.and-thz-lanjutan-card {
    display: block;
    width: 100%;
    text-align: inherit;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.88) 100%);
    border: 1px solid rgba(148, 163, 184, 0.32);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.14s ease;
}
.and-thz-lanjutan-card:active {
    transform: scale(0.99);
}
.and-thz-lanjutan-card.is-start {
    border-color: rgba(5, 150, 105, 0.45);
    background: linear-gradient(160deg, rgba(236, 253, 245, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 10px 28px -18px rgba(5, 150, 105, 0.55);
}
.and-thz-lanjutan-card.is-selected {
    border-color: rgba(255, 90, 0, 0.62);
    background: linear-gradient(160deg, rgba(255, 237, 213, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 12px 32px -16px rgba(255, 90, 0, 0.55);
}
.and-thz-lanjutan-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.and-thz-lanjutan-card__surat-name {
    margin: 0;
    flex: 1 1 8rem;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.and-thz-surat-badge--start {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 14px -8px rgba(5, 150, 105, 0.85);
}
.and-thz-surat-badge--selected {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
.and-thz-ayat-badge--start {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 4px 14px -8px rgba(16, 185, 129, 0.85);
}
.and-thz-ayat-badge--selected {
    box-shadow: 0 0 0 2px rgba(255, 90, 0, 0.28);
}
.and-thz-lanjutan-card.is-suggested {
    border-color: rgba(255, 90, 0, 0.55);
    background: linear-gradient(160deg, rgba(255, 237, 213, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.and-thz-ayat-badge--suggested {
    background: linear-gradient(135deg, #ff5a00 0%, #ea580c 100%);
    box-shadow: 0 6px 18px -10px rgba(255, 90, 0, 0.95);
    animation: and-thz-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes and-thz-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
.and-thz-lanjutan-card__badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}
.and-thz-lanjutan-card.is-selected .and-thz-lanjutan-card__badge {
    background: rgba(255, 90, 0, 0.14);
    color: #c2410c;
}
.and-thz-lanjutan-card.is-suggested {
    border-color: rgba(255, 90, 0, 0.45);
    background: rgba(255, 90, 0, 0.08);
}
.and-thz-lanjutan-card.is-suggested .and-thz-lanjutan-card__badge {
    background: #ff5a00;
    color: #fff;
}
.and-thz-lanjutan-card__meta {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--and-text-muted, #64748b);
}
.and-thz-lanjutan-card__arab {
    margin: 0;
    font-size: 1.75rem;
    line-height: 2.3;
    text-align: right;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: var(--and-font-quran);
}
.and-thz-lanjutan-card__latin,
.and-thz-lanjutan-card__id {
    display: none;
}
.and-thz-step4-setoran {
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    border: none;
}
.and-thz-step4-setoran__title {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.and-thz-step4-setoran__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.and-thz-selected-end {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, #ff5a00 8%, #fff);
    border: 1px solid color-mix(in srgb, #ff5a00 28%, transparent);
}
.and-thz-selected-end__label {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #9a3412;
}
.and-thz-step4-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}
.and-thz-step4-fields .and-bf-input[readonly] {
    background: rgba(15, 23, 42, 0.04);
    color: #334155;
    font-weight: 700;
}
@media (max-width: 520px) {
    .and-thz-step4-row {
        grid-template-columns: 1fr;
    }
    .and-thz-preview__arab,
    .and-thz-verse-card--last .and-thz-lanjutan-card__arab {
        font-size: 1.45rem;
    }
    .and-thz-lanjutan-card__arab {
        font-size: 1.3rem;
    }
}

.and-thz-hub-menu {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 4px 12px;
    margin-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.and-thz-hub-menu::-webkit-scrollbar {
    display: none;
}
.and-thz-hub-menu__link {
    flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.75);
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.and-thz-hub-menu__link.is-active {
    border-color: color-mix(in srgb, var(--bs-primary, #2563eb) 50%, transparent);
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 12%, #fff);
    color: #1d4ed8;
}
.and-thz-manual-ayat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(255, 90, 0, 0.05) 100%);
}
.and-thz-manual-ayat-head__main {
    flex: 1;
    min-width: 0;
}
.and-thz-manual-ayat-head__row,
.and-thz-manual-ayat-head__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.and-thz-manual-ayat-head__title {
    margin: 0;
    flex: 1 1 8rem;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.and-thz-manual-surat-list {
    margin-top: 0;
}
/* ── Step 3 scroll layout (tahfizh form + input) ── */
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 [hidden] {
    display: none !important;
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-bf-panel[data-panel="3"].is-active .and-bf-panel__content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-step3-head {
    flex-shrink: 0;
}
.and-thz-step3-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.and-thz-step3-mode {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.and-thz-step3-mode--surat:not([hidden]) > .and-thz-step3-pane:not([hidden]) {
    flex: 1 1 0;
    min-height: 0;
}
.and-thz-step3-mode--multi:not([hidden]) .and-thz-multi-summary,
.and-thz-step3-mode--multi:not([hidden]) .and-thz-multi-editor-hint {
    flex-shrink: 0;
}
.and-thz-step3-mode--multi:not([hidden]) > .and-thz-step3-pane:not([hidden]) {
    flex: 1 1 0;
    min-height: 0;
}
.and-thz-step3-pane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}
.and-thz-step3-pane--ayat {
    grid-template-rows: auto minmax(0, 1fr);
}
.and-thz-step3-body--auto:not([hidden]) {
    min-height: 0;
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-step3-search,
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-step3-search.and-dash-search {
    flex: none !important;
    min-height: 0;
    margin-bottom: 8px;
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-manual-ayat-head {
    margin-bottom: 8px;
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-step3-scroll {
    min-height: 0;
    max-height: none !important;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: 2px;
    padding-bottom: 12px;
}
.and-thz-form-shell .and-main--btrx-form.and-btrx-step-3 .and-thz-step3-body--auto:not([hidden]) > .and-thz-step3-scroll {
    flex: 1 1 0;
    min-height: 0;
}
.and-thz-step4-people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.and-thz-step4-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.22);
    min-width: 0;
}
.and-thz-step4-person__avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    overflow: hidden;
    flex-shrink: 0;
}
.and-thz-step4-person__avatar.and-thz-san-avatar--photo {
    background: #f1f5f9;
}
.and-thz-step4-person--guru .and-thz-step4-person__avatar {
    background: rgba(255, 90, 0, 0.12);
    color: #c2410c;
}
.and-thz-step4-person__copy {
    min-width: 0;
    width: 100%;
}
.and-thz-step4-person__role {
    margin: 0;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.and-thz-step4-person__name {
    margin: 4px 0 0;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    word-break: break-word;
}
.and-thz-step4-person__sub {
    margin: 4px 0 0;
    font-size: 0.72rem;
    line-height: 1.3;
    color: #64748b;
    word-break: break-word;
}

.and-thz-step3-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.and-thz-step3-head__text {
    flex: 1;
    min-width: 0;
}
.and-thz-mode-toggle {
    display: inline-flex;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    border: 1px solid rgba(148, 163, 184, 0.22);
    gap: 2px;
}
.and-thz-mode-toggle__btn {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.and-thz-mode-toggle__btn.is-active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}
.and-thz-multi-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.and-thz-multi-pick-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.72);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.and-thz-multi-pick-card--awal.is-filled,
.and-thz-multi-pick-card--awal.is-editing {
    border-color: #e04e00;
    background: #ff5a00;
}
.and-thz-multi-pick-card--awal.is-filled .and-thz-multi-pick-card__label,
.and-thz-multi-pick-card--awal.is-editing .and-thz-multi-pick-card__label {
    color: rgba(255, 255, 255, 0.85);
}
.and-thz-multi-pick-card--awal.is-filled .and-thz-multi-pick-card__value,
.and-thz-multi-pick-card--awal.is-editing .and-thz-multi-pick-card__value {
    color: #fff;
}
.and-thz-multi-pick-card--awal.is-editing {
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.3);
}
.and-thz-multi-pick-card--akhir.is-filled,
.and-thz-multi-pick-card--akhir.is-editing {
    border-color: #15803d;
    background: #16a34a;
}
.and-thz-multi-pick-card--akhir.is-filled .and-thz-multi-pick-card__label,
.and-thz-multi-pick-card--akhir.is-editing .and-thz-multi-pick-card__label {
    color: rgba(255, 255, 255, 0.85);
}
.and-thz-multi-pick-card--akhir.is-filled .and-thz-multi-pick-card__value,
.and-thz-multi-pick-card--akhir.is-editing .and-thz-multi-pick-card__value {
    color: #fff;
}
.and-thz-multi-pick-card--akhir.is-editing {
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
}
.and-thz-multi-pick-card__label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.and-thz-multi-pick-card__value {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
}
.and-thz-multi-editor-hint {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
}
.and-thz-selected-end__range {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: #64748b;
}
@media (max-width: 420px) {
    .and-thz-mode-toggle__btn {
        padding: 6px 8px;
        font-size: 0.625rem;
    }
}

/* ── Role Management (RBAC) ── */
.and-layout--roles { --roles-gap: 14px; }
.and-roles-shell {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: var(--roles-gap);
    padding: 0 16px 24px;
    align-items: start;
}
.and-roles-glass {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: var(--and-shadow-glass, 0 8px 24px -12px rgba(15, 23, 42, 0.08));
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-radius: 18px;
}
.and-roles-side { padding: 14px; position: sticky; top: 72px; max-height: calc(100vh - 96px); overflow: auto; }
.and-roles-side__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.and-roles-side__head h2 { margin: 0; font-size: 1rem; }
.and-roles-btn-sm { padding: 6px 10px !important; font-size: 0.85rem !important; }
.and-roles-search { margin-bottom: 10px; }
.and-roles-list { display: flex; flex-direction: column; gap: 6px; }
.and-roles-item {
    display: grid; gap: 2px; text-align: left; width: 100%;
    padding: 10px 12px; border-radius: 12px; border: 1px solid transparent;
    background: rgba(248, 250, 252, 0.8); color: inherit; cursor: pointer;
}
.and-roles-item.is-active { border-color: rgba(255, 90, 0, 0.35); background: rgba(255, 90, 0, 0.08); }
.and-roles-item__name { font-weight: 650; font-size: 0.92rem; }
.and-roles-item__slug { font-size: 0.75rem; opacity: 0.65; font-family: ui-monospace, monospace; }
.and-roles-item__badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.and-roles-badge {
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 999px; background: rgba(255, 90, 0, 0.15); color: #c2410c;
}
.and-roles-badge--sys { background: rgba(100, 116, 139, 0.15); color: #475569; }
.and-roles-main { padding: 16px; min-height: 420px; }
.and-roles-main__empty { display: grid; place-items: center; min-height: 280px; opacity: 0.7; }
.and-roles-main__toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.and-roles-main__toolbar h2 { margin: 0; font-size: 1.15rem; }
.and-roles-main__sub { margin: 4px 0 0; font-size: 0.85rem; opacity: 0.7; }
.and-roles-main__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.and-roles-danger { color: #b91c1c !important; }
.and-roles-filters {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center;
}
.and-roles-filters .and-pe-input { min-width: 140px; flex: 1 1 160px; }
.and-roles-super-note {
    margin-bottom: 12px; padding: 10px 12px; border-radius: 12px;
    background: rgba(59, 130, 246, 0.1); color: #1d4ed8; font-size: 0.88rem;
}
.and-roles-mod {
    border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 14px; margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.55); overflow: hidden;
}
.and-roles-mod__toggle {
    width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border: 0; background: transparent; cursor: pointer; text-align: left; color: inherit;
}
.and-roles-mod__chev { transition: transform 0.18s ease; }
.and-roles-mod.is-open .and-roles-mod__chev { transform: rotate(90deg); }
.and-roles-mod__title { font-weight: 700; flex: 1; }
.and-roles-mod__count {
    font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
}
.and-roles-mod__head {
    display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    padding: 0 12px 8px; border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.and-roles-mod.is-open .and-roles-mod__head { display: grid; }
@media (min-width: 900px) {
    .and-roles-mod__head { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.and-roles-row {
    display: grid; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.and-roles-row:last-child { border-bottom: 0; }
.and-roles-row__meta strong { display: block; font-size: 0.9rem; }
.and-roles-row__meta code {
    font-size: 0.72rem; opacity: 0.65; word-break: break-all;
}
.and-roles-row__actions {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
}
@media (min-width: 900px) {
    .and-roles-row {
        grid-template-columns: minmax(140px, 220px) 1fr; align-items: center;
    }
    .and-roles-row__actions { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.and-roles-check {
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 0.62rem; opacity: 0.9; cursor: pointer;
}
.and-roles-check input { width: 16px; height: 16px; accent-color: #ff5a00; }
.and-roles-check--head span { font-weight: 650; }
.and-roles-empty { padding: 18px; text-align: center; opacity: 0.7; font-size: 0.9rem; }
.and-roles-skel {
    height: 44px; border-radius: 12px; margin-bottom: 8px;
    background: linear-gradient(90deg, rgba(148,163,184,0.12), rgba(148,163,184,0.22), rgba(148,163,184,0.12));
    background-size: 200% 100%; animation: andRolesSkel 1.2s ease infinite;
}
@keyframes andRolesSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (max-width: 860px) {
    .and-roles-shell { grid-template-columns: 1fr; }
    .and-roles-side { position: static; max-height: none; }
}

/* Tahfizh Dashboard — home command center skin */
.and-thz-dash-hero.and-home-hero {
    margin-bottom: 16px;
}

.and-thz-dash-top.and-dash-top {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.and-thz-dash-top .and-thz-dash-search {
    flex: 1 1 auto;
    min-width: 0;
}

.and-thz-dash-hero__actions {
    flex-shrink: 0;
}

.and-thz-dash-hero__head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.and-thz-dash-user {
    min-width: 0;
}

.and-thz-hub-menu--hero {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    margin: 0 0 10px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.and-thz-hub-menu--hero::-webkit-scrollbar {
    display: none;
}

.and-thz-hub-menu--hero .and-thz-hub-menu__link {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 247, 237, 0.88);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.and-thz-hub-menu--hero .and-thz-hub-menu__link.is-active {
    background: rgba(255, 90, 0, 0.92);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(255, 90, 0, 0.8);
}

.and-thz-dash-filters-wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    max-height: 160px;
    opacity: 1;
    margin-top: 0;
    transition: max-height 0.28s ease, opacity 0.22s ease, margin 0.22s ease;
}

.and-thz-dash-filters-wrap.is-collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.and-thz-dash-filter-toggle.is-active {
    background: rgba(255, 255, 255, 0.96);
    color: #c2410c;
    border-color: rgba(255, 255, 255, 0.85);
}

.and-thz-dash-filters {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.and-thz-dash-filter {
    width: 100%;
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
    color: #fff7ed;
    font-size: 0.75rem;
    padding: 8px 10px;
}

.and-thz-dash-filter option {
    color: #0f172a;
    background: #fff;
}

.and-stats-grid--thz {
    margin-bottom: var(--and-section-gap, 18px);
}

.and-body--home .and-stats-grid--thz .and-stat-card::after {
    display: none;
}

#andThzDashCharts {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}

#andThzDashCharts .and-panel--chart,
#andThzDashCharts .and-panel--home-feed {
    grid-column: auto;
    width: auto;
}

.and-thz-dash-charts-row,
.and-thz-dash-top-row {
    display: grid;
    gap: var(--and-section-gap, 14px);
    width: 100%;
}

.and-thz-dash-charts-row {
    grid-template-columns: 1fr;
}

.and-thz-dash-top-row {
    grid-template-columns: 1fr;
    display: none;
}

.and-thz-dash--admin .and-thz-dash-top-row {
    display: grid;
}

.and-thz-dash-charts-row--3 {
    grid-template-columns: 1fr;
}

.and-thz-dash-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.and-thz-dash-sort {
    flex-shrink: 0;
    min-width: min(100%, 168px);
    max-width: 200px;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 600;
}

.and-thz-dash--guru .and-stats-grid--thz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.and-thz-dash-chart,
.and-thz-dash-top-panel {
    margin-bottom: 0;
    min-height: 0;
}

.and-thz-dash-chart .and-panel__title {
    font-size: 0.8125rem;
}

.and-thz-dash-chart .and-panel__subtitle {
    font-size: 0.6875rem;
}

.and-thz-dash-charts-row .and-panel--chart {
    min-height: 210px;
}

.and-thz-dash-charts-row .and-chart-bars {
    gap: 4px;
}

.and-thz-dash-charts-row .and-chart-bars__col span {
    font-size: 0.5625rem;
    line-height: 1.15;
}

.and-thz-dash-charts-row .and-chart-bars__track {
    min-height: 72px;
}

@media (max-width: 767px) {
    #andThzDashCharts .and-thz-dash-charts-row--3 {
        display: none;
    }
}

.and-thz-feed__item {
    cursor: default;
}

.and-thz-feed__rank {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #fff;
}

.and-thz-feed__rank--peach { background: linear-gradient(145deg, #fb923c, #f97316); }
.and-thz-feed__rank--sky { background: linear-gradient(145deg, #38bdf8, #0ea5e9); }
.and-thz-feed__rank--mint { background: linear-gradient(145deg, #34d399, #10b981); }
.and-thz-feed__rank--violet { background: linear-gradient(145deg, #a78bfa, #7c3aed); }

.and-thz-feed__count {
    font-size: 0.875rem;
    font-weight: 800;
    color: #ff5a00;
}

.and-thz-table-wrap {
    overflow: auto;
    border-radius: 18px;
    background: var(--and-home-glass-nested, rgba(255, 255, 255, 0.92));
    border: 1px solid var(--and-home-glass-nested-border, rgba(148, 163, 184, 0.18));
}

.and-thz-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.and-thz-table--clean {
    min-width: 0;
}

.and-thz-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 12px 14px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    background: rgba(248, 250, 252, 0.98);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.and-thz-table__row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.and-thz-table__row:hover,
.and-thz-table__row:focus-visible {
    background: rgba(255, 90, 0, 0.06);
    outline: none;
}

.and-thz-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    color: #334155;
    vertical-align: middle;
}

.and-thz-table__person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.and-thz-table__avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(145deg, #dbeafe, #ffedd5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #1d4ed8;
    overflow: hidden;
    flex-shrink: 0;
}

.and-thz-table__avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-thz-table__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.and-thz-table__name {
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-thz-table__meta {
    display: block;
    font-size: 0.6875rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-thz-table__avatar--ok {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #22c55e;
}

.and-thz-table__avatar--warn {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b;
}

.and-thz-table__avatar--muted {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #94a3b8;
}

.and-thz-table__hafalan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.and-thz-table__chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.and-thz-table__chip strong {
    font-size: 0.875rem;
    line-height: 1.1;
    color: #0f172a;
}

.and-thz-table__chip small {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-thz-table__progress-cell {
    min-width: 120px;
}

.and-thz-table__progress-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.and-thz-table__progress {
    display: block;
    flex: 1 1 auto;
    min-width: 72px;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}

.and-thz-table__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #ff5a00);
}

.and-thz-table__pct {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0f172a;
    min-width: 36px;
    text-align: right;
}

.and-thz-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.and-thz-status--ok { background: #dcfce7; color: #166534; }
.and-thz-status--warn { background: #fef3c7; color: #92400e; }
.and-thz-status--muted { background: #f1f5f9; color: #64748b; }

.and-thz-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #fff7ed;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.and-thz-hero-btn--accent {
    background: linear-gradient(145deg, #ff7a1a 0%, #ff5a00 100%);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.and-thz-dash-detail__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.and-thz-dash-hero--detail .and-thz-dash-detail__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.and-thz-dash-detail__main {
    flex: 1 1 auto;
    min-width: 0;
}

.and-thz-detail-hero__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.and-thz-detail-hero__profile--loading .and-thz-detail-user__avatar {
    flex-shrink: 0;
}

.and-thz-detail-user__text {
    min-width: 0;
    flex: 1 1 auto;
}

.and-thz-detail-user__text .and-home-hero__name {
    display: block;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.and-thz-history-panel__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.and-thz-history-panel__title {
    flex: 1 1 auto;
    min-width: 0;
}

.and-thz-history-filter-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.9);
    color: #64748b;
    cursor: pointer;
}

.and-thz-history-filter-toggle.is-active {
    background: #fff7ed;
    color: #c2410c;
    border-color: rgba(251, 146, 60, 0.45);
}

.and-thz-history-filters-wrap {
    overflow: hidden;
    max-height: 80px;
    opacity: 1;
    transition: max-height 0.28s ease, opacity 0.22s ease;
}

.and-thz-history-filters-wrap.is-collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.and-thz-history-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.and-thz-history-filter {
    width: 100%;
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #fff;
    color: #334155;
    font-size: 13px;
    padding: 0 10px;
}

@media (max-width: 639px) {
    .and-thz-history-panel__head {
        align-items: flex-start;
    }

    .and-thz-history-filter-toggle {
        order: 2;
        align-self: flex-start;
    }

    .and-thz-history-filters-wrap {
        order: 3;
        flex: 0 0 100%;
    }

    .and-thz-history-filters {
        padding-bottom: 4px;
    }
}

@media (min-width: 640px) {
    .and-thz-history-panel__head {
        flex-wrap: nowrap;
        align-items: center;
    }

    .and-thz-history-filter-toggle {
        display: none;
    }

    .and-thz-history-filters-wrap,
    .and-thz-history-filters-wrap.is-collapsed {
        flex: 0 0 auto;
        max-height: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible;
    }

    .and-thz-history-filters {
        display: flex;
        flex-direction: row;
        gap: 6px;
        padding-bottom: 0;
    }

    .and-thz-history-filter {
        width: auto;
        min-width: 72px;
        max-width: 92px;
        min-height: 34px;
        font-size: 12px;
        padding: 0 8px;
    }
}

.and-thz-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.and-thz-history-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 14px 14px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    border: 1px solid var(--thz-hist-accent, #059669);
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

.and-thz-history-card::before {
    content: none;
}

.and-thz-history-card--accent-0 {
    --thz-hist-accent: #059669;
    --thz-hist-accent-soft: rgba(5, 150, 105, 0.1);
}

.and-thz-history-card--accent-1 {
    --thz-hist-accent: #d97706;
    --thz-hist-accent-soft: rgba(217, 119, 6, 0.12);
}

.and-thz-history-card--accent-2 {
    --thz-hist-accent: #2563eb;
    --thz-hist-accent-soft: rgba(37, 99, 235, 0.11);
}

.and-thz-history-card--accent-3 {
    --thz-hist-accent: #7c3aed;
    --thz-hist-accent-soft: rgba(124, 58, 237, 0.11);
}

.and-thz-history-card--accent-4 {
    --thz-hist-accent: #e11d48;
    --thz-hist-accent-soft: rgba(225, 29, 72, 0.1);
}

.and-thz-history-card--tap {
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.and-thz-history-card--tap:hover {
    transform: translateY(-1px);
    border-color: var(--thz-hist-accent, #059669);
    box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--thz-hist-accent) 40%, rgba(15, 23, 42, 0.28));
}

.and-thz-history-card--tap:active {
    transform: translateY(0);
}

.and-thz-history-card__surat-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    text-align: right;
    padding-bottom: 8px;
}

.and-thz-history-card__arab {
    margin: 0;
    font-family: var(--and-font-quran);
    font-size: clamp(1.5rem, 5.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.45;
    color: #0f172a;
    text-align: right;
    direction: rtl;
    unicode-bidi: plaintext;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.and-thz-history-card__arab-sep {
    color: #94a3b8;
    font-size: 0.82em;
    font-weight: 600;
    padding: 0 0.2em;
}

.and-thz-history-card__latin-title {
    margin: 0;
    font-size: clamp(1.125rem, 4vw, 1.35rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
    text-align: right;
    direction: rtl;
}

.and-thz-history-card__ayat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 2px 0 0;
}

.and-thz-history-card__ayat-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.and-thz-history-card__ayat-badge {
    min-width: 2rem;
    justify-content: center;
    padding: 5px 11px;
    font-size: 0.78rem;
    font-weight: 900;
    background: var(--thz-hist-accent-soft, rgba(5, 150, 105, 0.1));
    border: 1px solid color-mix(in srgb, var(--thz-hist-accent, #059669) 28%, transparent);
    color: var(--thz-hist-accent, #059669);
}

.and-thz-history-card__ayat-sep {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.and-thz-history-card__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 2px;
    border-top: 1px dashed rgba(148, 163, 184, 0.22);
}

.and-thz-history-card__date-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    background: var(--thz-hist-accent-soft, rgba(5, 150, 105, 0.1));
}

.and-thz-history-card__date-line svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.and-thz-history-card__date-line time {
    font: inherit;
    color: inherit;
}

.and-thz-history-card__guru {
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.35;
    text-align: left;
}

.and-thz-history-card__meta-row + .and-thz-history-card__guru {
    margin-top: 4px;
}

.and-thz-history-card__meta-row + .and-thz-history-card__note,
.and-thz-history-card__guru + .and-thz-history-card__note {
    margin-top: 8px;
}

.and-thz-history-card__guru-label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-right: 4px;
}

.and-thz-history-card__note {
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

@media (min-width: 768px) {
    .and-thz-history-panel .and-thz-history-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .and-thz-history-panel .and-thz-history-list {
        gap: 14px;
    }

    .and-thz-history-card__arab {
        font-size: 1.85rem;
    }
}

.and-thz-quran-sheet .and-kar-sheet__panel {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    overflow: hidden;
    padding-bottom: max(var(--and-safe-bottom, 0px), 16px);
}

.and-thz-quran-sheet .and-kar-sheet__title,
.and-thz-quran-sheet .and-kar-sheet__handle {
    flex-shrink: 0;
}

.and-thz-quran-sheet__sub {
    flex-shrink: 0;
    margin: -4px 0 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748b;
}

.and-thz-quran-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .and-thz-quran-sheet .and-kar-sheet__panel {
        border-radius: 28px 0 0 28px;
    }
}

.and-thz-quran-read-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.and-thz-quran-read-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    box-shadow: 0 8px 20px -16px rgba(15, 23, 42, 0.25);
}

.and-thz-quran-read-card__head {
    margin-bottom: 10px;
}

.and-thz-quran-read-card__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.and-thz-quran-read-card__surat-arab {
    font-family: var(--and-font-quran);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    text-align: right;
}

.and-thz-quran-read-card__meta {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #475569;
}

.and-thz-quran-read-card__meta strong {
    color: #c2410c;
    font-size: 0.9375rem;
}

.and-thz-quran-read-card__arab {
    margin: 0 0 10px;
    font-family: var(--and-font-quran);
    font-size: clamp(1.625rem, 4.8vw, 2.125rem);
    font-weight: 700;
    line-height: 2.15;
    color: #0f172a;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.and-thz-quran-read-card__latin {
    margin: 0 0 8px;
    font-size: 0.875rem;
    font-style: italic;
    color: #64748b;
    line-height: 1.5;
}

.and-thz-quran-read-card__id {
    margin: 0;
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.55;
}

.and-thz-history-feed__range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.and-thz-history-feed__item .and-home-feed__body {
    min-width: 0;
}

.and-thz-history-feed__item .and-home-feed__sub {
    margin-top: 2px;
}

.and-thz-detail-user__avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
}

.and-thz-detail-user__avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.and-thz-detail-user__sub {
    display: block;
    margin-top: 3px;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: rgba(255, 247, 237, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 639px) {
    .and-thz-dash-hero--detail .and-thz-dash-detail__bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .and-thz-dash-hero--detail .and-thz-dash-detail__main {
        width: 100%;
    }

    .and-thz-dash-hero--detail .and-thz-detail-hero__profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .and-thz-dash-hero--detail .and-home-hero__avatar.and-thz-detail-user__avatar {
        width: 80vw;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1;
        margin-inline: auto;
        border-radius: 20px;
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .and-thz-dash-hero--detail .and-thz-detail-user__text {
        width: 100%;
        flex: none;
        align-items: center;
    }

    .and-thz-dash-hero--detail .and-thz-detail-user__text .and-home-hero__eyebrow {
        justify-content: center;
    }

    .and-thz-dash-hero--detail .and-thz-detail-user__text .and-home-hero__name {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        font-size: clamp(1.125rem, 5.2vw, 1.375rem);
    }

    .and-thz-dash-hero--detail .and-thz-detail-user__sub {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        font-size: 0.75rem;
    }

    .and-thz-dash-hero--detail .and-thz-dash-detail__actions {
        width: 100%;
        justify-content: stretch;
        gap: 10px;
    }

    .and-thz-dash-hero--detail .and-thz-dash-detail__actions .and-thz-hero-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .and-main--thz-dash .and-thz-history-list {
        gap: 12px;
    }

    .and-main--thz-dash .and-thz-history-card {
        gap: 10px;
        padding: 14px 14px 14px 16px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--thz-hist-accent, #059669);
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
    }

    .and-main--thz-dash .and-thz-history-card__arab {
        font-size: clamp(1.45rem, 3.2vw, 1.75rem);
    }

    .and-main--thz-dash .and-thz-history-card__guru {
        font-size: 0.8125rem;
    }

    .and-main--thz-dash .and-panel--home-feed .and-panel__head {
        margin-bottom: 4px;
    }
}

.and-thz-history-feed__item {
    align-items: flex-start;
}

.and-thz-history-feed__nilai,
.and-thz-history-feed__note {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #64748b;
}

.and-thz-ucapan-text {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.and-thz-ucapan-hint {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 8px;
}

.and-thz-ucapan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 720px) {
    .and-main--thz-dash .and-panel--home-loans {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        outline: none;
        padding-left: 0;
        padding-right: 0;
    }

    .and-main--thz-dash .and-thz-table-wrap {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .and-thz-table thead {
        display: none;
    }

    .and-thz-table,
    .and-thz-table tbody,
    .and-thz-table tr,
    .and-thz-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .and-thz-table__row {
        position: relative;
        margin-bottom: 12px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 18px;
        overflow: hidden;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.9));
        box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.32);
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    .and-thz-table__row::after {
        content: "";
        position: absolute;
        right: -24px;
        top: -24px;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: var(--thz-row-accent-soft, rgba(5, 150, 105, 0.12));
        opacity: 0.55;
        pointer-events: none;
    }

    .and-thz-table__row--accent-0 {
        --thz-row-accent: #059669;
        --thz-row-accent-soft: rgba(5, 150, 105, 0.12);
    }

    .and-thz-table__row--accent-1 {
        --thz-row-accent: #d97706;
        --thz-row-accent-soft: rgba(217, 119, 6, 0.13);
    }

    .and-thz-table__row--accent-2 {
        --thz-row-accent: #2563eb;
        --thz-row-accent-soft: rgba(37, 99, 235, 0.11);
    }

    .and-thz-table__row--accent-3 {
        --thz-row-accent: #7c3aed;
        --thz-row-accent-soft: rgba(124, 58, 237, 0.11);
    }

    .and-thz-table__row--accent-4 {
        --thz-row-accent: #e11d48;
        --thz-row-accent-soft: rgba(225, 29, 72, 0.1);
    }

    .and-thz-table__row:active {
        transform: scale(0.995);
    }

    .and-thz-table td {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 92px 1fr;
        gap: 8px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.08);
        padding: 10px 14px 10px 16px;
    }

    .and-thz-table td::before {
        content: attr(data-label);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--thz-row-accent, #64748b);
    }

    .and-thz-table td:first-child {
        display: block;
        padding: 14px 16px 12px 18px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.1);
        background: linear-gradient(180deg, var(--thz-row-accent-soft, rgba(5, 150, 105, 0.08)), transparent 72%);
    }

    .and-thz-table td:first-child::before {
        content: none;
    }

    .and-thz-table__row .and-thz-table__avatar {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--thz-row-accent, #059669) 45%, rgba(15, 23, 42, 0.2));
    }

    .and-thz-table__row .and-thz-table__name {
        font-size: 0.9375rem;
    }

    .and-thz-table__row .and-thz-table__chip {
        background: var(--thz-row-accent-soft, rgba(248, 250, 252, 0.95));
        border-color: color-mix(in srgb, var(--thz-row-accent, #64748b) 24%, rgba(148, 163, 184, 0.18));
    }

    .and-thz-table__row .and-thz-table__chip strong {
        color: var(--thz-row-accent, #0f172a);
    }

    .and-thz-table__row .and-thz-table__progress {
        background: color-mix(in srgb, var(--thz-row-accent, #64748b) 14%, rgba(148, 163, 184, 0.2));
    }

    .and-thz-table__row .and-thz-table__progress span {
        background: linear-gradient(90deg, var(--thz-row-accent, #2563eb), color-mix(in srgb, var(--thz-row-accent, #ff5a00) 72%, #ff5a00));
    }

    .and-thz-table__row .and-thz-table__pct {
        min-width: 42px;
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 0.6875rem;
        text-align: center;
        color: var(--thz-row-accent, #0f172a);
        background: var(--thz-row-accent-soft, rgba(248, 250, 252, 0.95));
    }
}

@media (min-width: 640px) {
    .and-thz-dash-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .and-thz-dash-hero--detail .and-thz-detail-hero__profile {
        gap: 16px;
    }

    .and-thz-dash-hero--detail .and-thz-detail-user__avatar {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        flex-shrink: 0;
    }

    .and-thz-dash-hero--detail .and-thz-detail-user__text .and-home-hero__eyebrow {
        margin-bottom: 2px;
    }

    .and-thz-dash-hero--detail .and-thz-detail-user__text .and-home-hero__name {
        font-size: 1.25rem;
    }

    .and-thz-dash-hero--detail .and-thz-detail-user__sub {
        font-size: 0.75rem;
    }

    .and-thz-dash-hero--detail .and-thz-hero-btn {
        flex-shrink: 0;
        min-height: 42px;
    }

    .and-thz-dash-hero--detail .and-thz-dash-detail__actions {
        gap: 10px;
    }

    .and-thz-dash-hero--detail .and-thz-dash-detail__bar {
        gap: 16px;
    }

    .and-body--home .and-main--dashboard.and-main--thz-dash {
        display: flex;
        flex-direction: column;
        gap: var(--and-section-gap);
    }

    .and-body--home .and-main--thz-dash .and-panel--chart,
    .and-body--home .and-main--thz-dash .and-panel--home-feed,
    .and-body--home .and-main--thz-dash .and-panel--home-loans {
        grid-column: auto;
        width: 100%;
    }

    .and-thz-dash-hero__head {
        margin-bottom: 8px;
    }

    .and-thz-dash-filters {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .and-thz-dash-charts-row.and-thz-dash-charts-row--3 {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .and-thz-dash-charts-row.and-thz-dash-charts-row--3 .and-panel--chart {
        min-height: 188px;
    }

    .and-thz-dash-charts-row:not(.and-thz-dash-charts-row--3) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .and-thz-dash-top-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .and-thz-dash-top-panel {
        min-height: 220px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .and-thz-dash-charts-row.and-thz-dash-charts-row--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .and-thz-dash-charts-row.and-thz-dash-charts-row--3 .and-thz-dash-chart--wide {
        grid-column: 1 / -1;
    }

    .and-thz-dash--admin .and-thz-dash-top-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ——— Al-Qur'an Reading V2 — premium baca surat ——— */
.and-qrn-read-header {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 -4px 12px;
    padding: 8px 4px 10px;
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition:
        transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.28s ease,
        padding 0.2s ease;
    will-change: transform, opacity;
}
.and-qrn-read-header.is-scroll-hidden {
    transform: translateY(calc(-100% - 8px));
    opacity: 0;
    pointer-events: none;
}
.and-qrn-read-header.is-compact {
    padding-top: 4px;
    padding-bottom: 6px;
    box-shadow: none;
}
.and-qrn-read-header__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.and-qrn-read-header__back,
.and-qrn-read-header__action {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--and-qrn-read-radius, 16px);
    background: transparent;
    color: var(--and-qrn-bc-text, #6b4e3b);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, transform 0.15s ease, color 0.2s ease;
}
.and-qrn-read-header__back:active,
.and-qrn-read-header__action:active {
    transform: scale(0.94);
    background: var(--and-qrn-bc-btn-bg, rgba(107, 78, 59, 0.08));
}
.and-qrn-read-header__info {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.and-qrn-read-header__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--and-qrn-bc-current, #4a3426);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size 0.2s ease;
}
.and-qrn-read-header__sub {
    margin: 2px 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--and-qrn-meta-color, #9a8b78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.6em;
    opacity: 1;
    transition: opacity 0.2s ease, max-height 0.2s ease, margin 0.2s ease;
}
.and-qrn-read-header.is-compact .and-qrn-read-header__title {
    font-size: 0.92rem;
}
.and-qrn-read-header.is-compact .and-qrn-read-header__sub {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
}
.and-qrn-read-header__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.and-qrn-read-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.and-qrn-surat-hero {
    margin: 0 0 20px;
    padding: 24px 20px 20px;
    border-radius: var(--and-qrn-read-radius, 16px);
    border: 0;
    background: #FFFFFF;
    box-shadow: none !important;
    text-align: center;
    animation: andQrnFadeUp 0.22s ease;
}
.and-qrn-surat-hero__eyebrow {
    margin: 0 0 8px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--and-qrn-meta-color, #9a8b78);
}
.and-qrn-surat-hero__arab {
    margin: 0;
    font-family: var(--and-font-quran);
    font-size: clamp(2rem, 8vw, 2.75rem);
    line-height: 1.35;
    color: var(--and-qrn-arab-color, #2c2416);
    -webkit-font-smoothing: antialiased;
}
.and-qrn-surat-hero__latin {
    margin: 6px 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--and-qrn-text, #2c2416);
}
.and-qrn-surat-hero__arti {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: var(--and-qrn-muted, #7a6b58);
}
.and-qrn-surat-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.and-qrn-surat-hero__pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--and-qrn-read-bg) 60%, var(--and-qrn-surface-3, #e4d9c4));
    border: 1px solid var(--and-qrn-read-border, rgba(107, 78, 59, 0.1));
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--and-qrn-muted, #7a6b58);
}
.and-qrn-surat-hero__pill--mekah {
    color: var(--and-accent-dark, #c2410c);
    border-color: rgba(194, 65, 12, 0.16);
    background: rgba(255, 90, 0, 0.07);
}
.and-qrn-surat-hero__pill--madinah {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.16);
    background: rgba(37, 99, 235, 0.07);
}
.and-qrn-surat-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}
.and-qrn-surat-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--and-qrn-read-border, rgba(15, 23, 42, 0.08));
    border-radius: var(--and-qrn-read-radius, 16px);
    background: var(--and-qrn-read-bg, #fff);
    color: var(--and-qrn-text, #2c2416);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.18s ease, border-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.and-qrn-surat-hero__btn--play {
    padding: 0 20px;
    border-color: color-mix(in srgb, var(--and-accent, #ff5a00) 24%, transparent);
    background: color-mix(in srgb, var(--and-accent, #ff5a00) 6%, #fff);
    color: var(--and-accent-dark, #c2410c);
}
.and-qrn-surat-hero__btn--icon {
    width: 44px;
    padding: 0;
}
.and-qrn-surat-hero__btn.is-active {
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.22);
    background: rgba(225, 29, 72, 0.08);
}
.and-qrn-surat-hero__btn:active {
    transform: scale(0.96);
}
.and-qrn-progress--slim {
    margin: 0 0 18px;
}
.and-qrn-progress--slim .and-qrn-progress__label {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
.and-body--quran-reading .and-qrn-ayat-list {
    gap: 0;
}
.and-body--quran-reading .and-qrn-ayat-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    transition: opacity 0.22s ease;
}
.and-body--quran-reading .and-qrn-ayat-card:last-child {
    border-bottom: 0;
}
.and-body--quran-reading .and-qrn-ayat-card__body {
    display: block;
    width: 100%;
    padding: 18px 0 10px;
}
.and-body--quran-reading .and-qrn-ayat-card__content {
    width: 100%;
    min-width: 0;
}
.and-body--quran-reading .and-qrn-ayat-card__arab-row {
    display: block;
    width: 100%;
    margin: 0;
}
.and-body--quran-reading .and-qrn-ayat-card__arab-text {
    display: block;
    width: 100%;
    min-width: 0;
    text-align: justify;
    text-align-last: right;
    font-family: var(--and-font-quran);
    font-size: var(--and-qrn-arab-size, clamp(1.85rem, 6.2vw, 2.55rem));
    line-height: var(--and-qrn-arab-lh, 2.08);
    color: var(--and-qrn-arab-color, #121212);
    text-shadow: none;
    font-weight: 400;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.and-body--quran-reading .and-qrn-ayat-card__arab-text > .and-qrn-ayat-card__arab,
.and-body--quran-reading .and-qrn-ayat-card__arab-text > .and-qrn-ayat-card__arab--tajweed,
.and-body--quran-reading .and-qrn-ayat-card__arab-row > .and-qrn-ayat-card__arab,
.and-body--quran-reading .and-qrn-ayat-card__arab-row > .and-qrn-ayat-card__arab--tajweed {
    display: inline;
    margin: 0;
    padding: 0;
}
.and-body--quran-reading .and-qrn-ayat-card__arab-row > .and-qrn-ayat-card__arab,
.and-body--quran-reading .and-qrn-ayat-card__arab-row > .and-qrn-ayat-card__arab--tajweed,
.and-body--quran-reading .and-qrn-ayat-card__arab,
.and-body--quran-reading .and-qrn-ayat-card__arab--tajweed {
    text-align: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-shadow: none;
}
.and-body--quran-reading .and-qrn-ayat-card__endno {
    display: inline;
    vertical-align: baseline;
    margin-inline-start: 0.15em;
    padding: 0;
    min-width: unset;
    height: unset;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--and-font-quran);
    font-size: 1em;
    font-weight: 700;
    line-height: inherit;
    letter-spacing: 0;
    color: var(--and-qrn-ayat-no-color, #a67c00);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    white-space: nowrap;
}
.and-body--quran-reading .and-qrn-ayat-card__no {
    display: none;
}
.and-body--quran-reading .and-qrn-ayat-card__latin {
    margin: 12px 0 6px;
    padding: 0;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--and-qrn-latin-color, #7a6b58);
    text-align: left;
}
.and-body--quran-reading .and-qrn-ayat-card__id {
    margin: 0 0 4px;
    padding: 0;
    font-size: var(--and-qrn-trans-size, 0.9rem);
    line-height: var(--and-qrn-trans-lh, 1.65);
    color: var(--and-qrn-trans-color, #8a7964);
    text-align: left;
}
.and-body--quran-reading .and-qrn-ayat-card__ref {
    display: none;
}
.and-qrn-ayat-card__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0 0 12px;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.and-qrn-ayat-action {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--and-qrn-read-radius, 16px);
    background: transparent;
    color: var(--and-qrn-muted, #9a8b78);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, background 0.18s ease, transform 0.15s ease;
}
.and-qrn-ayat-action:active {
    transform: scale(0.92);
    background: var(--and-qrn-bc-btn-bg, rgba(107, 78, 59, 0.08));
}
.and-qrn-ayat-action.is-active {
    color: var(--and-qrn-ayat-no-color, #b45309);
}
.and-qrn-ayat-action--play.is-active {
    color: var(--and-accent-dark, #c2410c);
}
.and-qrn-ayat-action--lastread.is-active {
    color: var(--and-accent-dark, #c2410c);
}
.and-qrn-ayat-card.is-active {
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    box-shadow: none !important;
    border-radius: 0;
    animation: none;
    border-bottom-color: color-mix(in srgb, var(--and-qrn-active-border, rgba(180, 83, 9, 0.35)) 40%, rgba(15, 23, 42, 0.06));
}
.and-qrn-ayat-card.is-active .and-qrn-ayat-card__endno {
    color: var(--and-qrn-ayat-no-color, #a67c00);
    background: none;
    border: none;
    box-shadow: none;
}
.and-qrn-ayat-card.is-active .and-qrn-ayat-card__no {
    background: transparent;
}
@keyframes andQrnAyatFadeIn {
    from { opacity: 0.72; }
    to { opacity: 1; }
}
@keyframes andQrnFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.and-qrn-read-player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--and-bottom-nav-h, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 125;
    padding: 0 10px 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.and-qrn-read-player.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.and-qrn-read-player__progress {
    max-width: 720px;
    margin: 0 auto 6px;
    height: 3px;
    border-radius: 999px;
    background: var(--and-qrn-progress-track, rgba(180, 83, 9, 0.14));
    overflow: hidden;
}
.and-qrn-read-player__progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--and-qrn-ayat-no-color, #b45309);
    transition: width 0.2s linear;
}
.and-qrn-read-player__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 12px;
    border-radius: var(--and-qrn-read-radius, 16px);
    border: 1px solid var(--and-qrn-read-border, rgba(15, 23, 42, 0.08));
    background: var(--and-qrn-read-bg, #fff);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.and-qrn-read-player__meta {
    min-width: 0;
    flex: 1;
}
.and-qrn-read-player__surat {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--and-qrn-text, #2c2416);
}
.and-qrn-read-player__ayat {
    margin: 2px 0 0;
    font-size: 0.74rem;
    color: var(--and-qrn-muted, #9a8b78);
}
.and-qrn-read-player__controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.and-qrn-read-player__btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--and-qrn-read-radius, 16px);
    background: transparent;
    color: var(--and-qrn-text, #2c2416);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.and-qrn-read-player__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.and-qrn-read-player__btn--main {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--and-accent-dark, #c2410c);
    color: #fff;
    box-shadow: none;
}
.and-qrn-read-player__btn--rate {
    width: auto;
    min-width: 40px;
    padding: 0 6px;
    font-variant-numeric: tabular-nums;
}
.and-qrn-read-player__btn--repeat.is-active {
    color: var(--and-accent-dark, #c2410c);
    background: rgba(255, 90, 0, 0.1);
}
body.and-body--qrn-read-player {
    --and-qrn-read-player-h: 88px;
    padding-bottom: calc(var(--and-qrn-read-player-h) + 8px);
}
body.and-body--qrn-read-player .and-qrn-mini-player {
    display: none !important;
}
body.and-body--qrn-read-player.and-body--qrn-reading-nav {
    --and-qrn-read-player-h: 88px;
}
body.and-body--qrn-read-player.and-body--qrn-reading-nav .and-qrn-read-player {
    bottom: calc(var(--and-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
}
.and-qrn-tafsir-sheet__ref,
.and-qrn-note-sheet__ref {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--and-qrn-muted, #64748b);
}
.and-qrn-tafsir-sheet__body {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--and-qrn-text, #334155);
}
.and-qrn-note-sheet__input {
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--and-qrn-border, rgba(15, 23, 42, 0.12));
    background: var(--and-qrn-surface, #fff);
    color: var(--and-qrn-text, #0f172a);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
}
.and-qrn-note-sheet__input:focus {
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1);
}
.and-qrn-note-sheet__save {
    width: 100%;
    min-height: 48px;
    margin-top: 0;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(160deg, #ff8a3d 0%, var(--and-accent, #ff5a00) 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
}
.and-qrn-note-sheet__actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.and-qrn-note-sheet__actions .and-qrn-note-sheet__save {
    flex: 1 1 auto;
}
.and-qrn-note-sheet__delete {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(220, 38, 38, 0.28);
    border-radius: 14px;
    background: rgba(254, 242, 242, 0.92);
    color: #dc2626;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}
.and-qrn-note-sheet__delete:active {
    background: rgba(254, 226, 226, 0.98);
}
.and-qrn-drawer-list__row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.and-qrn-drawer-list__item--grow {
    flex: 1 1 auto;
    min-width: 0;
}
.and-qrn-drawer-list__del {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 14px;
    background: rgba(254, 242, 242, 0.88);
    color: #dc2626;
    cursor: pointer;
    align-self: center;
}
.and-qrn-drawer-list__del:active {
    background: rgba(254, 226, 226, 0.98);
}
body.and-qrn-theme-dark .and-qrn-note-sheet__delete,
body.and-qrn-theme-dark .and-qrn-drawer-list__del {
    background: rgba(127, 29, 29, 0.28);
    border-color: rgba(248, 113, 113, 0.28);
    color: #fca5a5;
}
@media (min-width: 768px) {
    .and-body--quran-reading .and-qrn-read {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .and-body--quran-reading .and-qrn-ayat-card__body {
        padding-top: 22px;
        padding-bottom: 12px;
    }
}

/* ——— Al-Qur'an Reading polish — flat canvas per tema ——— */
body.and-body--quran-surat {
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
}
body.and-body--quran-surat .and-layout--ambient::before,
body.and-body--quran-surat .and-layout--ambient::after,
body.and-body--quran-reading .and-layout--ambient::before,
body.and-body--quran-reading .and-layout--ambient::after {
    display: none !important;
    content: none !important;
}
body.and-body--quran-surat #and-spa-outlet,
body.and-body--quran-surat .and-layout,
body.and-body--quran-surat .and-layout--quran,
body.and-body--quran-surat .and-layout--ambient,
body.and-body--quran-surat .and-main--quran,
.and-body--quran-reading .and-main--quran,
.and-body--quran-reading .and-layout--quran,
.and-body--quran-reading #and-spa-outlet,
.and-body--quran-reading .and-layout,
.and-body--quran-reading .and-layout--ambient {
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    box-shadow: none !important;
}
.and-qrn-read,
.and-qrn-read-body {
    background: var(--and-qrn-read-bg, #FFFFFF);
}
.and-qrn-read-header {
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.and-body--quran-surat #and-spa-topbar .and-top-nav__shell,
body.and-body--quran-reading #and-spa-topbar .and-top-nav__shell {
    box-shadow: none !important;
}
body.and-body--quran-reading .and-qrn-reading-nav__shell {
    box-shadow: none !important;
}
.and-qrn-ayat-search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
body.and-qrn-theme-dark.and-body--quran-surat,
body.and-qrn-theme-dark.and-body--quran-reading {
    background: var(--and-qrn-read-bg) !important;
}
body.and-qrn-theme-dark.and-body--quran-surat #and-spa-outlet,
body.and-qrn-theme-dark.and-body--quran-surat .and-layout,
body.and-qrn-theme-dark.and-body--quran-surat .and-layout--quran,
body.and-qrn-theme-dark.and-body--quran-surat .and-main--quran,
body.and-qrn-theme-dark.and-body--quran-reading .and-main--quran,
body.and-qrn-theme-dark.and-body--quran-reading .and-layout--quran,
body.and-qrn-theme-dark.and-body--quran-reading #and-spa-outlet,
body.and-qrn-theme-dark.and-body--quran-reading .and-layout {
    background: var(--and-qrn-read-bg) !important;
}
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-read,
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-read,
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-read-body {
    background: var(--and-qrn-read-bg);
}
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-read-header,
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-read-header {
    background: var(--and-qrn-read-bg);
    box-shadow: none !important;
}
body.and-body--quran-surat .and-qrn-surat-card,
body.and-body--quran-surat .and-qrn-surat-hero,
body.and-body--quran-surat .and-qrn-nav-card,
body.and-body--quran-surat .and-qrn-read-player,
body.and-body--quran-surat .and-qrn-read-player__inner,
body.and-body--quran-surat .and-qrn-read-header,
body.and-body--quran-surat .and-qrn-bc,
body.and-body--quran-surat .and-qrn-ayat-card,
body.and-body--quran-surat .and-qrn-last-read-panel,
body.and-body--quran-surat .and-qrn-play-btn,
body.and-body--quran-surat .and-qrn-play-btn.is-active,
body.and-body--quran-reading .and-qrn-surat-hero,
body.and-body--quran-reading .and-qrn-nav-card,
body.and-body--quran-reading .and-qrn-read-player,
body.and-body--quran-reading .and-qrn-read-player__inner,
body.and-body--quran-reading .and-qrn-bc,
body.and-body--quran-reading .and-qrn-ayat-card,
body.and-body--quran-reading .and-qrn-ayat-card.is-active {
    box-shadow: none !important;
}
.and-body--quran-reading .and-qrn-nav-card {
    border-radius: var(--and-qrn-read-radius, 16px);
    background: var(--and-qrn-read-surface-solid, var(--and-qrn-read-bg, #FFFFFF)) !important;
    box-shadow: none !important;
    border: 1px solid var(--and-qrn-read-border, rgba(15, 23, 42, 0.08));
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-nav-card {
    background: var(--and-qrn-read-bg) !important;
}
.and-body--quran-reading .and-qrn-nav-card__icon {
    border-radius: var(--and-qrn-read-radius, 16px);
    background: color-mix(in srgb, var(--and-accent, #ff5a00) 6%, #fff);
    box-shadow: none !important;
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card,
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card.is-active {
    background: transparent !important;
    box-shadow: none !important;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}
.and-body--quran-reading .and-qrn-ayat-card.is-active {
    animation: none;
}
body.and-body--quran-surat .and-qrn-surat-card {
    box-shadow: none !important;
}
body.and-qrn-theme-light.and-body--quran-surat .and-qrn-surat-card {
    background: var(--and-qrn-read-surface-solid, #FFFFFF);
}
body.and-qrn-theme-warm.and-body--quran-surat .and-qrn-surat-card,
body.and-qrn-theme-sepia.and-body--quran-surat .and-qrn-surat-card {
    background: var(--and-qrn-surface, #F7F7F5);
}
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-surat-card {
    background: var(--and-qrn-surface-2, #3D3A36);
    box-shadow: none !important;
}
.and-qrn-note-sheet__input {
    border-radius: var(--and-qrn-read-radius, 16px);
}
body.and-body--quran-surat .and-qrn-last-read-panel,
body.and-body--quran-reading .and-qrn-last-read-panel {
    box-shadow: none !important;
}
.and-qrn-note-sheet__save {
    border-radius: var(--and-qrn-read-radius, 16px);
}
.and-qrn-note-sheet__delete {
    border-radius: var(--and-qrn-read-radius, 16px);
}

/* ——— Ayat full-width canvas ——— */
.and-body--quran-reading .and-main--quran,
body.and-body--quran-surat .and-main--quran.and-main--quran-reading {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
}
.and-body--quran-reading .and-qrn-read-body,
.and-body--quran-reading .and-qrn-ayat-list {
    width: 100%;
    max-width: none;
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card {
    border-bottom-color: rgba(212, 175, 120, 0.12);
}

/* ——— Quran surat: flat canvas — theme-aware ——— */
body.and-body--quran-surat {
    --and-elev-1: none;
    --and-elev-2: none;
    --and-bottom-nav-shell-shadow: none;
    --and-qrn-read-shadow: none;
}
body.and-qrn-theme-light.and-body--quran-surat {
    --and-qrn-read-surface: #FFFFFF;
    --and-qrn-read-surface-solid: #FFFFFF;
    --and-qrn-bc-glass: rgba(255, 255, 255, 0.88);
    --and-qrn-bc-solid: #FFFFFF;
    --and-qrn-nav-glass-bg: rgba(255, 255, 255, 0.74);
    --and-qrn-nav-glass-border: rgba(15, 23, 42, 0.1);
    --and-qrn-nav-glass-blur: 18px;
    --and-qrn-nav-glass-fallback: rgba(255, 255, 255, 0.96);
    --and-qrn-nav-chip-bg: rgba(255, 255, 255, 0.88);
    --and-qrn-nav-chip-border: rgba(15, 23, 42, 0.12);
    --and-top-nav-icon: #334155;
    --and-qrn-reading-nav-shell-bg: rgba(255, 255, 255, 0.3);
    --and-qrn-reading-nav-shell-tint-top: rgba(255, 255, 255, 0.34);
    --and-qrn-reading-nav-shell-tint-bottom: rgba(255, 255, 255, 0.22);
    --and-qrn-reading-nav-shell-fallback-bg: rgba(255, 255, 255, 0.92);
    --and-qrn-reading-nav-shell-border: rgba(15, 23, 42, 0.1);
    --and-qrn-reading-nav-chip-bg: rgba(255, 255, 255, 0.26);
    --and-qrn-reading-nav-chip-border: rgba(15, 23, 42, 0.1);
    --and-qrn-reading-nav-icon: #c2410c;
    --and-qrn-reading-nav-icon-active: #9a3412;
    --and-qrn-reading-nav-label: #64748b;
    --and-qrn-reading-nav-label-active: #9a3412;
}
body.and-qrn-theme-warm.and-body--quran-surat,
body.and-qrn-theme-sepia.and-body--quran-surat {
    --and-qrn-read-surface: var(--and-qrn-read-surface-solid);
    --and-qrn-bc-glass: var(--and-qrn-bc-solid);
    --and-qrn-nav-glass-bg: rgba(247, 247, 245, 0.78);
    --and-qrn-nav-glass-border: rgba(26, 26, 26, 0.12);
    --and-qrn-nav-glass-blur: 18px;
    --and-qrn-nav-glass-fallback: rgba(247, 247, 245, 0.96);
    --and-qrn-nav-chip-bg: rgba(255, 255, 255, 0.72);
    --and-qrn-nav-chip-border: rgba(26, 26, 26, 0.1);
    --and-top-nav-icon: #4A4A4A;
    --and-qrn-reading-nav-shell-bg: rgba(255, 252, 245, 0.3);
    --and-qrn-reading-nav-shell-tint-top: rgba(255, 252, 245, 0.34);
    --and-qrn-reading-nav-shell-tint-bottom: rgba(247, 247, 245, 0.22);
    --and-qrn-reading-nav-shell-fallback-bg: rgba(247, 247, 245, 0.92);
    --and-qrn-reading-nav-shell-border: rgba(26, 26, 26, 0.1);
    --and-qrn-reading-nav-chip-bg: rgba(255, 255, 255, 0.26);
    --and-qrn-reading-nav-chip-border: rgba(26, 26, 26, 0.1);
    --and-qrn-reading-nav-icon: #c2410c;
    --and-qrn-reading-nav-icon-active: #9a3412;
    --and-qrn-reading-nav-label: #737373;
    --and-qrn-reading-nav-label-active: #9a3412;
}
body.and-qrn-theme-sepia.and-body--quran-surat {
    --and-qrn-nav-glass-bg: rgba(232, 220, 200, 0.82);
    --and-qrn-nav-glass-fallback: rgba(232, 220, 200, 0.96);
    --and-qrn-reading-nav-shell-bg: rgba(255, 252, 245, 0.3);
    --and-qrn-reading-nav-shell-tint-top: rgba(255, 252, 245, 0.34);
    --and-qrn-reading-nav-shell-tint-bottom: rgba(232, 220, 200, 0.22);
    --and-qrn-reading-nav-shell-fallback-bg: rgba(232, 220, 200, 0.92);
    --and-top-nav-icon: #5D4E3A;
    --and-qrn-reading-nav-label: #6F5F4A;
}
body.and-body--quran-surat #and-spa-app,
body.and-body--quran-surat .and-spa-outlet-wrap {
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    box-shadow: none !important;
}
body.and-body--quran-surat .and-layout--ambient::before,
body.and-body--quran-surat .and-layout--ambient::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    filter: none !important;
    content: none !important;
}
body.and-body--quran-surat .and-top-nav__shell,
body.and-body--quran-surat #and-spa-topbar .and-top-nav__shell,
body.and-body--quran-surat.and-body--quran-reading .and-top-nav__shell,
body.and-body--quran-surat.and-body--quran-reading #and-spa-topbar .and-top-nav__shell {
    background: var(--and-qrn-nav-glass-bg, rgba(255, 255, 255, 0.74)) !important;
    border-bottom: 1px solid var(--and-qrn-nav-glass-border, rgba(15, 23, 42, 0.1)) !important;
    -webkit-backdrop-filter: blur(var(--and-qrn-nav-glass-blur, 18px)) saturate(1.25) !important;
    backdrop-filter: blur(var(--and-qrn-nav-glass-blur, 18px)) saturate(1.25) !important;
    box-shadow: none !important;
    filter: none !important;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-reading-nav__shell,
body.and-body--quran-surat .and-qrn-reading-nav__shell {
    background:
        linear-gradient(
            180deg,
            var(--and-qrn-reading-nav-shell-tint-top) 0%,
            var(--and-qrn-reading-nav-shell-tint-bottom) 100%
        ),
        var(--and-qrn-reading-nav-shell-bg) !important;
    border-top-color: var(--and-qrn-reading-nav-shell-border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.and-body--quran-surat .and-top-nav__shell,
    body.and-body--quran-surat #and-spa-topbar .and-top-nav__shell,
    body.and-body--quran-surat.and-body--quran-reading .and-top-nav__shell,
    body.and-body--quran-surat.and-body--quran-reading #and-spa-topbar .and-top-nav__shell {
        background: var(--and-qrn-nav-glass-fallback, rgba(255, 255, 255, 0.96)) !important;
    }
    body.and-body--quran-surat .and-qrn-reading-nav__shell,
    body.and-body--quran-surat.and-body--quran-reading .and-qrn-reading-nav__shell {
        background: var(--and-qrn-reading-nav-shell-fallback-bg, rgba(255, 255, 255, 0.96)) !important;
    }
}
.and-top-nav__guest-title {
    font-family: var(--and-font-quran);
    font-weight: 700;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px 0 2px;
    font-size: 1.35rem;
    color: var(--and-qrn-text, var(--and-text, #0f172a));
    line-height: 1.2;
    user-select: none;
}
/* Hanya menu utama (bawah Beranda) — bukan submenu Al-Qur'an */
.and-nav-drawer__link.and-nav-drawer__link--arabic-label .and-nav-drawer__link-label {
    font-family: var(--and-font-quran);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    flex: 1 1 auto;
    min-width: 0;
}
.and-nav-drawer__link.and-nav-drawer__link--arabic-label {
    min-height: 44px;
    align-items: center;
}
body.and-body--quran-public-guest .and-top-nav__side--left {
    justify-content: flex-start;
    min-width: 0;
}
body.and-body--quran-public-guest #andTopBurger,
body.and-body--quran-public-guest #andTopNotif,
body.and-body--quran-public-guest #andTopQuickAdd {
    display: none !important;
}
body.and-body--quran-surat .and-top-nav__item {
    color: var(--and-top-nav-icon, var(--and-qrn-text, #334155));
}
body.and-body--quran-surat .and-top-nav__icon--chip,
body.and-body--quran-surat .and-top-nav__icon--fab {
    background: var(--and-qrn-nav-chip-bg, rgba(255, 255, 255, 0.88));
    border-color: var(--and-qrn-nav-chip-border, rgba(15, 23, 42, 0.12));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
body.and-body--quran-surat .and-top-nav__svg {
    color: inherit;
    filter: none;
}
body.and-body--quran-surat .and-qrn-reading-nav__icon {
    background: var(--and-qrn-reading-nav-chip-bg, var(--and-qrn-nav-chip-bg, rgba(255, 255, 255, 0.82)));
    border-color: var(--and-qrn-reading-nav-chip-border, var(--and-qrn-nav-chip-border, rgba(15, 23, 42, 0.1)));
}
body.and-body--quran-surat .and-qrn-reading-nav__label {
    color: var(--and-qrn-reading-nav-label, #64748b);
    font-weight: 600;
}
body.and-body--quran-surat .and-qrn-reading-nav__item.is-active .and-qrn-reading-nav__label,
body.and-body--quran-surat .and-qrn-reading-nav__item.is-open .and-qrn-reading-nav__label {
    color: var(--and-qrn-reading-nav-label-active, #9a3412);
}
body.and-body--quran-surat .and-qrn-reading-nav__item.is-disabled,
body.and-body--quran-surat .and-qrn-reading-nav__item:disabled {
    opacity: 0.42;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-read-header {
    position: sticky;
    top: 0;
    z-index: 50;
    margin: 0 0 12px;
    padding: 8px 0 10px;
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    isolation: isolate;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-read-header.is-compact {
    box-shadow: none !important;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card,
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card.is-active {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--and-qrn-read-border, rgba(0, 0, 0, 0.06)) !important;
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    box-shadow: none !important;
    animation: none !important;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-nav-card {
    background: var(--and-qrn-read-surface-solid, var(--and-qrn-read-bg, #FFFFFF)) !important;
    box-shadow: none !important;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-surat-hero {
    box-shadow: none !important;
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    border: 0 !important;
}
body.and-body--quran-surat .and-qrn-surat-card {
    box-shadow: none !important;
    background: var(--and-qrn-read-surface-solid, var(--and-qrn-read-bg, #FFFFFF)) !important;
}
body.and-qrn-theme-warm.and-body--quran-surat .and-qrn-surat-card,
body.and-qrn-theme-warm.and-body--quran-surat .and-qrn-last-read-panel {
    background: var(--and-qrn-surface, #F7F7F5) !important;
}
body.and-qrn-theme-sepia.and-body--quran-surat .and-qrn-surat-card,
body.and-qrn-theme-sepia.and-body--quran-surat .and-qrn-last-read-panel {
    background: var(--and-qrn-surface-solid, #E0D4C0) !important;
}
body.and-body--quran-surat .and-qrn-surat-card__no {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    font-size: 1rem;
    border-radius: 12px;
}
body.and-body--quran-surat #and-spa-outlet,
body.and-body--quran-surat .and-layout,
body.and-body--quran-surat .and-layout--quran,
body.and-body--quran-surat .and-layout--ambient,
body.and-body--quran-surat .and-main--quran,
body.and-body--quran-surat.and-body--quran-reading .and-qrn-read,
body.and-body--quran-surat.and-body--quran-reading .and-qrn-read-body {
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    box-shadow: none !important;
}
body.and-qrn-theme-dark.and-body--quran-surat {
    --and-qrn-read-surface: var(--and-qrn-surface-2);
    --and-qrn-bc-glass: rgba(46, 44, 41, 0.88);
    --and-qrn-bc-solid: var(--and-qrn-surface-2);
    --and-qrn-nav-glass-bg: rgba(30, 28, 24, 0.8);
    --and-qrn-nav-glass-border: rgba(212, 175, 120, 0.22);
    --and-qrn-nav-glass-blur: 18px;
    --and-qrn-nav-glass-fallback: rgba(30, 28, 24, 0.96);
    --and-qrn-nav-chip-bg: rgba(53, 50, 48, 0.92);
    --and-qrn-nav-chip-border: rgba(212, 175, 120, 0.24);
    --and-top-nav-icon: #F0EBE3;
    --and-qrn-reading-nav-shell-bg: rgba(20, 18, 16, 0.3);
    --and-qrn-reading-nav-shell-tint-top: rgba(30, 28, 24, 0.34);
    --and-qrn-reading-nav-shell-tint-bottom: rgba(20, 18, 16, 0.22);
    --and-qrn-reading-nav-shell-fallback-bg: rgba(30, 28, 24, 0.92);
    --and-qrn-reading-nav-shell-border: rgba(212, 175, 120, 0.22);
    --and-qrn-reading-nav-chip-bg: rgba(40, 36, 32, 0.26);
    --and-qrn-reading-nav-chip-border: rgba(212, 175, 120, 0.18);
    --and-qrn-reading-nav-icon: #E8B878;
    --and-qrn-reading-nav-icon-active: #F5D9A8;
    --and-qrn-reading-nav-label: rgba(240, 235, 227, 0.72);
    --and-qrn-reading-nav-label-active: #F5D9A8;
    background: var(--and-qrn-read-bg) !important;
}
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-read-header,
body.and-qrn-theme-dark.and-body--quran-surat #and-spa-app,
body.and-qrn-theme-dark.and-body--quran-surat .and-spa-outlet-wrap,
body.and-qrn-theme-dark.and-body--quran-surat #and-spa-outlet,
body.and-qrn-theme-dark.and-body--quran-surat .and-main--quran,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-read,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-read-body,
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-surat-hero,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-nav-card {
    background: var(--and-qrn-read-bg) !important;
}

/* ——— Quran surat: layout isolate ——— */
body.and-body--quran-surat .and-layout.and-layout--quran {
    isolation: isolate;
    overflow: clip;
}
body.and-qrn-theme-dark.and-body--quran-surat html:has(body.and-body--quran-surat),
body.and-qrn-theme-dark.and-body--quran-surat,
body.and-qrn-theme-dark.and-body--quran-surat #and-spa-app,
body.and-qrn-theme-dark.and-body--quran-surat .and-spa-outlet-wrap,
body.and-qrn-theme-dark.and-body--quran-surat #and-spa-outlet,
body.and-qrn-theme-dark.and-body--quran-surat .and-layout.and-layout--quran,
body.and-qrn-theme-dark.and-body--quran-surat .and-main--quran,
body.and-qrn-theme-dark.and-body--quran-surat #andQrnList,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-read,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-read-body,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-list,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card.is-active {
    background: var(--and-qrn-read-bg) !important;
}

/* ——— Quran surat baca: typography — semua tema ——— */
body.and-body--quran-surat.and-body--quran-reading {
    --and-qrn-arab-size: clamp(2rem, 6.8vw, 2.75rem);
    --and-qrn-arab-lh: 2.12;
}
body.and-body--quran-surat.and-body--quran-reading.and-qrn-arab-font-sm,
body.and-body--quran-surat.and-body--quran-reading.and-qrn-arab-font-md,
body.and-body--quran-surat.and-body--quran-reading.and-qrn-arab-font-lg,
body.and-body--quran-surat.and-body--quran-reading.and-qrn-arab-font-xl {
    --and-qrn-arab-size: clamp(2rem, 6.8vw, 2.75rem);
    --and-qrn-arab-lh: 2.12;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__arab,
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__arab--tajweed,
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__arab-text {
    font-family: "Amiri Quran", var(--and-font-quran);
    font-size: var(--and-qrn-arab-size);
    line-height: var(--and-qrn-arab-lh);
    color: var(--and-qrn-arab-color);
    text-shadow: none !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__endno {
    display: inline;
    font-size: 1.08em;
    font-weight: 700;
    color: var(--and-qrn-ayat-no-color);
    background: none;
    border: none;
    box-shadow: none;
    margin-inline-start: 0.12em;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__body {
    padding: 22px 0 12px;
}
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card {
    border-bottom-color: var(--and-qrn-read-border, rgba(0, 0, 0, 0.06)) !important;
}
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading {
    --and-qrn-read-bg: #1E1C19;
    --and-qrn-arab-color: #F5F0E6;
    --and-qrn-ayat-no-color: #E8B878;
    --and-qrn-arab-glow: none;
}
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__arab,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__arab--tajweed {
    text-shadow: none !important;
}
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__endno {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--and-qrn-ayat-no-color);
}

/* ==========================================================================
   Quran surat — canvas penuh per tema (matikan blob body)
   ========================================================================== */
body.and-body--quran-surat::before,
body.and-body--quran-surat::after,
body.and-body--quran-surat.and-body--quran-reading::before,
body.and-body--quran-surat.and-body--quran-reading::after,
body.and-body--quran-reading::before,
body.and-body--quran-reading::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    animation: none !important;
    filter: none !important;
    background: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

html:has(body.and-body--quran-surat),
body.and-body.and-body--quran-surat,
body.and-body.and-body--quran-surat.and-body--quran-reading {
    --and-bg-base: var(--and-qrn-read-bg, #FFFFFF);
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    background-image: none !important;
}

body.and-qrn-theme-light.and-body--quran-surat,
body.and-qrn-theme-light.and-body--quran-surat.and-body--quran-reading,
html:has(body.and-qrn-theme-light.and-body--quran-surat) {
    --and-bg-base: #FFFFFF;
    --and-theme-color: #FFFFFF;
    background: #FFFFFF !important;
}

body.and-body--quran-surat #and-spa-app,
body.and-body--quran-surat .and-spa-outlet-wrap,
body.and-body--quran-surat #and-spa-outlet,
body.and-body--quran-surat.and-body--quran-reading #and-spa-app,
body.and-body--quran-surat.and-body--quran-reading .and-spa-outlet-wrap,
body.and-body--quran-surat.and-body--quran-reading #and-spa-outlet {
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    background-image: none !important;
    max-width: 100% !important;
    box-shadow: none !important;
}

body.and-body--quran-surat .and-layout,
body.and-body--quran-surat .and-layout--quran,
body.and-body--quran-surat .and-layout--ambient,
body.and-body--quran-surat.and-body--quran-reading .and-layout,
body.and-body--quran-surat.and-body--quran-reading .and-layout--quran,
body.and-body--quran-surat.and-body--quran-reading .and-layout--ambient,
body.and-body--quran-surat #andQrnList,
body.and-body--quran-surat.and-body--quran-reading .and-qrn-read,
body.and-body--quran-surat.and-body--quran-reading .and-qrn-read-body,
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-list {
    max-width: 100% !important;
    width: 100% !important;
    background: var(--and-qrn-read-bg, #FFFFFF) !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.and-qrn-theme-light.and-body--quran-surat #and-spa-app::before {
    --and-statusbar-tint: #FFFFFF;
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.and-qrn-theme-dark.and-body--quran-surat #and-spa-app::before,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading #and-spa-app::before {
    --and-statusbar-tint: var(--and-qrn-read-bg, #1E1C19);
    background: var(--and-qrn-read-bg, #1E1C19) !important;
}

body.and-qrn-theme-dark.and-body--quran-surat,
body.and-qrn-theme-dark.and-body--quran-surat.and-body--quran-reading,
html:has(body.and-qrn-theme-dark.and-body--quran-surat) {
    --and-bg-base: var(--and-qrn-read-bg, #1E1C19);
    background: var(--and-qrn-read-bg, #1E1C19) !important;
}

body.and-qrn-theme-sepia.and-body--quran-surat,
body.and-qrn-theme-sepia.and-body--quran-surat.and-body--quran-reading,
html:has(body.and-qrn-theme-sepia.and-body--quran-surat) {
    --and-bg-base: var(--and-qrn-read-bg, #E8DCC8);
    background: var(--and-qrn-read-bg, #E8DCC8) !important;
}

body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__arab-text {
    font-family: "Amiri Quran", var(--and-font-quran);
    font-size: var(--and-qrn-arab-size, clamp(2rem, 6.8vw, 2.75rem));
    line-height: var(--and-qrn-arab-lh, 2.12);
    color: var(--and-qrn-arab-color, #121212);
}

body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__endno {
    font-size: 1.12em;
    font-weight: 700;
    line-height: inherit;
}

body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__arab-text .and-qrn-ayat-card__arab,
body.and-body--quran-surat.and-body--quran-reading .and-qrn-ayat-card__arab-text .and-qrn-ayat-card__arab--tajweed {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* ——— Tema dark/sepia: kontras teks & menu Al-Qur'an ——— */
body.and-qrn-theme-dark.and-body--quran-hub .and-barang-chips:not(.and-chip-track) .and-barang-chip {
    background: var(--and-qrn-surface-2, #3D3A36);
    border-color: var(--and-qrn-border, rgba(212, 175, 120, 0.2));
    color: var(--and-qrn-text, #F0EBE3);
}
body.and-qrn-theme-dark.and-body--quran-hub .and-barang-chips:not(.and-chip-track) .and-barang-chip.is-active {
    background: color-mix(in srgb, var(--and-qrn-ayat-no-color, #E8B878) 18%, var(--and-qrn-surface-2, #3D3A36));
    border-color: color-mix(in srgb, var(--and-qrn-ayat-no-color, #E8B878) 45%, transparent);
    color: var(--and-qrn-text, #F5F0E6);
}
body.and-qrn-theme-dark.and-body--quran-hub .and-barang-count {
    color: var(--and-qrn-muted, #A8A29A);
}
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-last-read-card {
    background: var(--and-qrn-surface, #2A2724);
    border-color: var(--and-qrn-border, rgba(212, 175, 120, 0.14));
}
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-last-read-card__label,
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-last-read-card__meta {
    color: var(--and-qrn-muted, #A8A29A);
}
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-last-read-card__surat {
    color: var(--and-qrn-text, #F0EBE3);
}
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-last-read-card__btn {
    border-color: color-mix(in srgb, var(--and-qrn-ayat-no-color, #E8B878) 35%, transparent);
    background: color-mix(in srgb, var(--and-qrn-ayat-no-color, #E8B878) 12%, var(--and-qrn-surface, #2A2724));
    color: var(--and-qrn-ayat-no-color, #E8B878);
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card__latin {
    color: var(--and-qrn-latin-color, #D4CEC4);
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-ayat-card__id {
    color: var(--and-qrn-trans-color, #C8C2B8);
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-read-header__title {
    color: var(--and-qrn-bc-current, #F5F0E6);
}
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-read-header__sub,
body.and-qrn-theme-dark.and-body--quran-reading .and-qrn-read-header__action {
    color: var(--and-qrn-muted, #A8A29A);
}
body.and-qrn-theme-dark .and-qrn-drawer-item__label,
body.and-qrn-theme-dark .and-qrn-drawer-list__title,
body.and-qrn-theme-dark .and-qrn-drawer__title {
    color: var(--and-qrn-text, #F0EBE3);
}
body.and-qrn-theme-dark .and-qrn-drawer-item__desc,
body.and-qrn-theme-dark .and-qrn-drawer-list__sub,
body.and-qrn-theme-dark .and-qrn-theme-picker__hint {
    color: var(--and-qrn-muted, #A8A29A);
}
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-surat-card__latin,
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-surat-card__meta,
body.and-qrn-theme-dark.and-body--quran-surat .and-qrn-surat-card__arab {
    color: var(--and-qrn-text, #F0EBE3);
}
body.and-qrn-theme-sepia.and-body--quran-hub .and-barang-chips:not(.and-chip-track) .and-barang-chip {
    background: var(--and-qrn-surface-2, #E0D4C0);
    border-color: var(--and-qrn-border, rgba(93, 78, 58, 0.16));
    color: var(--and-qrn-text, #3D2B1F);
}

body.and-qrn-theme-dark .and-qrn-drawer__panel,
body.and-qrn-theme-dark .and-qrn-drawer__head,
body.and-qrn-theme-dark .and-qrn-drawer-item,
body.and-qrn-theme-dark .and-qrn-drawer-list__item {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ——— Mobile Al-Qur'an: sembunyikan FAB menu bacaan, bukan burger utama ——— */
@media (max-width: 767px) {
    body.and-body--quran-hub:not(.and-body--quran-reading) .and-qrn-fab-wrap {
        display: none !important;
    }
}

/* ——— Daftar surat: kartu & layout ——— */
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--and-qrn-border, rgba(15, 23, 42, 0.12));
    border-radius: 14px;
    background: var(--and-qrn-surface, var(--and-qrn-read-surface-solid, #fff));
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    min-height: 0;
    overflow: hidden;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__open {
    flex: 1;
    min-width: 0;
    padding: 12px 10px 12px 14px;
    gap: 12px;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__open:active {
    background: var(--and-qrn-active-bg, rgba(37, 99, 235, 0.06));
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
    gap: 0;
    margin: 8px 10px 8px 0;
    padding: 3px;
    border-left: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--and-qrn-surface-3, #E8E8E6) 88%, var(--and-qrn-read-bg, #fff));
    border: 1px solid var(--and-qrn-border, rgba(15, 23, 42, 0.1));
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__actions .and-qrn-icon-btn,
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__actions .and-qrn-play-btn {
    width: 34px;
    height: 34px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__actions .and-qrn-play-btn--surat {
    width: 34px;
    height: 34px;
    border-radius: 999px;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__actions .and-qrn-play-btn {
    color: var(--and-qrn-ayat-no-color, #2563eb);
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__actions .and-qrn-play-btn.is-active {
    background: var(--and-qrn-ayat-no-color, #2563eb);
    color: #fff;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__actions .and-qrn-icon-btn.is-active {
    background: color-mix(in srgb, #ef4444 14%, transparent);
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__no {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--and-qrn-active-bg, color-mix(in srgb, var(--and-qrn-ayat-no-color, #2563eb) 12%, transparent));
    color: var(--and-qrn-ayat-no-color, #2563eb);
    font-size: 0.875rem;
    font-weight: 700;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    grid-template-columns: unset;
    grid-template-rows: unset;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__latin {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--and-qrn-text, #0f172a);
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__meta {
    color: var(--and-qrn-muted, #64748b);
    font-size: 0.78rem;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__arab {
    flex: 0 0 auto;
    margin-inline-start: auto;
    grid-column: unset;
    grid-row: unset;
    font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    color: var(--and-qrn-arab-color, #0f172a);
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__pill--mekah {
    background: color-mix(in srgb, var(--and-qrn-ayat-no-color, #b45309) 12%, transparent);
    color: var(--and-qrn-ayat-no-color, #b45309);
}
.and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__pill--madinah {
    background: color-mix(in srgb, #2563eb 12%, transparent);
    color: #2563eb;
}
body.and-qrn-theme-light.and-body--quran-surat .and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
body.and-qrn-theme-warm.and-body--quran-surat .and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card {
    background: var(--and-qrn-surface, #F7F7F5);
    border-color: rgba(26, 26, 26, 0.14);
}
body.and-qrn-theme-sepia.and-body--quran-surat .and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card {
    background: var(--and-qrn-surface-2, #E0D4C0);
    border-color: rgba(93, 78, 58, 0.18);
}
body.and-qrn-theme-dark.and-body--quran-surat .and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card {
    background: var(--and-qrn-surface-2, #3D3A36);
    border-color: rgba(212, 175, 120, 0.26);
    box-shadow: none;
}
body.and-qrn-theme-dark.and-body--quran-surat .and-main--quran:not(.and-main--quran-reading) .and-qrn-surat-card__actions {
    background: color-mix(in srgb, var(--and-qrn-surface-3, #4A4742) 90%, var(--and-qrn-read-bg));
    border-color: rgba(212, 175, 120, 0.2);
}