/* APPLICATION SHELL + REUSABLE COMPONENTS. Bootstrap vendor CSS loads first. */
@import url(../../../assets/css/wu-foundation.css);

/* ===============================
   WedUploader — Global Scrollbar
   =============================== */

:root {
    --wu-scrollbar-size-x: 8px;
    --wu-scrollbar-size-y: 8px;
    --wu-scrollbar-track: transparent;
    --wu-scrollbar-thumb: var(--wu-neutral-300, #9a8c7c);
    --wu-scrollbar-hover: var(--wu-gold-300, #9b773e);
    --wu-scrollbar-active: var(--wu-gold-500, #805f30);
}

@media (forced-colors: none) {
    * {
        scrollbar-width: thin;
        scrollbar-color:
            var(--wu-scrollbar-thumb)
            var(--wu-scrollbar-track);
    }
    @supports selector(::-webkit-scrollbar) {
        * {
            scrollbar-width: auto;
            scrollbar-color: auto;
        }

        ::-webkit-scrollbar {
            width: var(--wu-scrollbar-size-x);
            height: var(--wu-scrollbar-size-y);
        }

        ::-webkit-scrollbar-track {
            background: var(--wu-scrollbar-track);
            border-radius: 999px;
        }

        ::-webkit-scrollbar-thumb {
            min-width: 36px;
            min-height: 36px;
            border: 2px solid transparent;
            border-radius: 999px;
            background-color: var(--wu-scrollbar-thumb);
            background-clip: padding-box;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: var(--wu-scrollbar-hover);
        }

        ::-webkit-scrollbar-thumb:active {
            background-color: var(--wu-scrollbar-active);
        }

        ::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }
    }
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    font-family: var(--wu-font-sans);
    color: var(--wu-neutral-900);
    background: var(--wu-canvas);
    text-rendering: optimizeLegibility;
}
a {
    cursor: pointer;
}
a:hover {
    text-decoration: none;
}

:where(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(193, 154, 91, 0.42);
    outline-offset: 3px;
}

.wu-font-standard {
    font-family: var(--wu-font-sans) !important;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.wu-text-lg-display {
    font-size: 60px !important;
}

.wu-text-md-standard {
    font-size: 48px !important;
}

.wu-text-sm-standard {
    font-size: 24px !important;
}

.bg-neutral-0 {
    background: var(--wu-neutral-0) !important;
}

.bg-neutral-50 {
    background: var(--wu-neutral-50) !important;
}

.bg-neutral-100 {
    background: var(--wu-neutral-100) !important;
}

.bg-neutral-200 {
    background: var(--wu-neutral-200) !important;
}

.bg-neutral-300 {
    background: var(--wu-neutral-300) !important;
}

.bg-neutral-400 {
    background: var(--wu-neutral-400) !important;
}

.bg-neutral-500 {
    background: var(--wu-neutral-500) !important;
}

.bg-neutral-600 {
    background: var(--wu-neutral-600) !important;
}

.bg-neutral-700 {
    background: var(--wu-neutral-700) !important;
}

.bg-neutral-800 {
    background: var(--wu-neutral-800) !important;
}

.bg-neutral-900 {
    background: var(--wu-neutral-900) !important;
}

.bg-gold-0 {
    background: var(--wu-gold-0) !important;
}

.bg-gold-50 {
    background: var(--wu-gold-50) !important;
}

.bg-gold-100 {
    background: var(--wu-gold-100) !important;
}

.bg-gold-200 {
    background: var(--wu-gold-200) !important;
}

.bg-gold-300 {
    background: var(--wu-gold-300) !important;
}

.bg-gold-400 {
    background: var(--wu-gold-400) !important;
}

.bg-gold-500 {
    background: var(--wu-gold-500) !important;
}

.bg-gold-600 {
    background: var(--wu-gold-600) !important;
}

.bg-gold-700 {
    background: var(--wu-gold-700) !important;
}

.bg-gold-800 {
    background: var(--wu-gold-800) !important;
}

.bg-gold-900 {
    background: var(--wu-gold-900) !important;
}

.bg-bronze-0 {
    background: var(--wu-bronze-0) !important;
}

.bg-bronze-50 {
    background: var(--wu-bronze-50) !important;
}

.bg-bronze-100 {
    background: var(--wu-bronze-100) !important;
}

.bg-bronze-200 {
    background: var(--wu-bronze-200) !important;
}

.bg-bronze-300 {
    background: var(--wu-bronze-300) !important;
}

.bg-bronze-400 {
    background: var(--wu-bronze-400) !important;
}

.bg-bronze-500 {
    background: var(--wu-bronze-500) !important;
}

.bg-bronze-600 {
    background: var(--wu-bronze-600) !important;
}

.bg-bronze-700 {
    background: var(--wu-bronze-700) !important;
}

.bg-bronze-800 {
    background: var(--wu-bronze-800) !important;
}

.bg-bronze-900 {
    background: var(--wu-bronze-900) !important;
}

.bg-warm-50 {
    background: var(--wu-warm-50) !important;
}

.bg-warm-100 {
    background: var(--wu-warm-100) !important;
}

.bg-warm-200 {
    background: var(--wu-warm-200) !important;
}

.bg-warm-300 {
    background: var(--wu-warm-300) !important;
}

.bg-warm-400 {
    background: var(--wu-warm-400) !important;
}

.bg-warm-500 {
    background: var(--wu-warm-500) !important;
}

.bg-warm-600 {
    background: var(--wu-warm-600) !important;
}

.bg-warm-700 {
    background: var(--wu-warm-700) !important;
}

.bg-warm-800 {
    background: var(--wu-warm-800) !important;
}

.bg-warm-900 {
    background: var(--wu-warm-900) !important;
}

.text-primary {
    color: var(--wu-gold-500) !important;
}

.text-gold-100 {
    color: var(--wu-gold-100) !important;
}

.text-gold-200 {
    color: var(--wu-gold-200) !important;
}

.text-gold-300 {
    color: var(--wu-gold-300) !important;
}

.text-gold-400 {
    color: var(--wu-gold-400) !important;
}

.text-gold-500 {
    color: var(--wu-gold-500) !important;
}

.text-gold-600 {
    color: var(--wu-gold-600) !important;
}

.text-gold-700 {
    color: var(--wu-gold-700) !important;
}

.text-gold-800 {
    color: var(--wu-gold-800) !important;
}

.text-gold-900 {
    color: var(--wu-gold-900) !important;
}

.text-neutral-0 {
    color: var(--wu-neutral-0) !important;
}

.text-neutral-50 {
    color: var(--wu-neutral-50) !important;
}

.text-neutral-100 {
    color: var(--wu-neutral-100) !important;
}

.text-neutral-200 {
    color: var(--wu-neutral-200) !important;
}

.text-neutral-300 {
    color: var(--wu-neutral-300) !important;
}

.text-neutral-400 {
    color: var(--wu-neutral-400) !important;
}

.text-neutral-500 {
    color: var(--wu-neutral-500) !important;
}

.text-neutral-600 {
    color: var(--wu-neutral-600) !important;
}

.text-neutral-700 {
    color: var(--wu-neutral-700) !important;
}

.text-neutral-800 {
    color: var(--wu-neutral-800) !important;
}

.text-neutral-900 {
    color: var(--wu-neutral-900) !important;
}

.text-bronze-0 {
    color: var(--wu-bronze-0) !important;
}

.text-bronze-50 {
    color: var(--wu-bronze-50) !important;
}

.text-bronze-100 {
    color: var(--wu-bronze-100) !important;
}

.text-bronze-200 {
    color: var(--wu-bronze-200) !important;
}

.text-bronze-300 {
    color: var(--wu-bronze-300) !important;
}

.text-bronze-400 {
    color: var(--wu-bronze-400) !important;
}

.text-bronze-500 {
    color: var(--wu-bronze-500) !important;
}

.text-bronze-600 {
    color: var(--wu-bronze-600) !important;
}

.text-bronze-700 {
    color: var(--wu-bronze-700) !important;
}

.text-bronze-800 {
    color: var(--wu-bronze-800) !important;
}

.text-bronze-900 {
    color: var(--wu-bronze-900) !important;
}

.text-gold-0 {
    color: var(--wu-gold-0) !important;
}

.text-gold-50 {
    color: var(--wu-gold-50) !important;
}

.text-gold-100 {
    color: var(--wu-gold-100) !important;
}

.text-gold-200 {
    color: var(--wu-gold-200) !important;
}

.text-gold-300 {
    color: var(--wu-gold-300) !important;
}

.text-gold-400 {
    color: var(--wu-gold-400) !important;
}

.text-gold-500 {
    color: var(--wu-gold-500) !important;
}

.text-gold-600 {
    color: var(--wu-gold-600) !important;
}

.text-gold-700 {
    color: var(--wu-gold-700) !important;
}

.text-gold-800 {
    color: var(--wu-gold-800) !important;
}

.text-gold-900 {
    color: var(--wu-gold-900) !important;
}

.text-warning-0 {
    color: var(--wu-warning-0) !important;
}

.text-warning-50 {
    color: var(--wu-warning-50) !important;
}

.text-warning-100 {
    color: var(--wu-warning-100) !important;
}

.text-warning-200 {
    color: var(--wu-warning-200) !important;
}

.text-warning-300 {
    color: var(--wu-warning-300) !important;
}

.text-warning-400 {
    color: var(--wu-warning-400) !important;
}

.text-warning-500 {
    color: var(--wu-warning-500) !important;
}

.text-warning-600 {
    color: var(--wu-warning-600) !important;
}

.text-warning-700 {
    color: var(--wu-warning-700) !important;
}

.text-warning-800 {
    color: var(--wu-warning-800) !important;
}

.text-warning-900 {
    color: var(--wu-warning-900) !important;
}

.text-danger-0 {
    color: var(--wu-danger-0) !important;
}

.text-danger-50 {
    color: var(--wu-danger-50) !important;
}

.text-danger-100 {
    color: var(--wu-danger-100) !important;
}

.text-danger-200 {
    color: var(--wu-danger-200) !important;
}

.text-danger-300 {
    color: var(--wu-danger-300) !important;
}

.text-danger-400 {
    color: var(--wu-danger-400) !important;
}

.text-danger-500 {
    color: var(--wu-danger-500) !important;
}

.text-danger-600 {
    color: var(--wu-danger-600) !important;
}

.text-danger-700 {
    color: var(--wu-danger-700) !important;
}

.text-danger-800 {
    color: var(--wu-danger-800) !important;
}

.text-danger-900 {
    color: var(--wu-danger-900) !important;
}

.text-secondary {
    color: var(--wu-gold-700) !important;
}

.wu-text-balance {
    text-wrap: balance;
}

.wu-container {
    width: min(var(--wu-container), calc(100% - 2rem));
    margin-inline: auto;
}

.wu-reading {
    max-width: var(--wu-container-reading);
}

.wu-reading img{
    width: 350px;
}

.wu-reading .wu-search {
    width: 400px;
}

.wu-section-space {
    padding-block: var(--wu-section-space);
}

.wu-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

div:where(.swal2-container).swal2-center>.swal2-popup {
    border-radius: 12px;
}

div:where(.swal2-container) h2:where(.swal2-title){
    font-family: var(--wu-font-sans);
    color: var(--wu-neutral-900) !important;
    font-size: 24px !important;
    margin-bottom: 0 !important;
}
div:where(.swal2-container) div:where(.swal2-html-container){
    padding-top: .5rem !important;
}

@media (max-width: 767.98px) {
    :root {
        --wu-section-space: 4rem;
    }

    .wu-container {
        width: min(100% - 1.5rem, var(--wu-container));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes wu-skeleton {
    to {
        transform: translateX(100%);
    }
}

.wu-card.wu-feedbacks {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: transparent;
    border: none;
    height: 100%;
}

.wu-card.wu-feedbacks .wu-reading{
    padding: 0 48px;
}

.wu-ornament-surface {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.wu-ornament-surface::before,
.wu-ornament-surface::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.wu-ornament-surface--lens::before {
    width: clamp(13rem, 28vw, 28rem);
    aspect-ratio: 1;
    top: 8%;
    right: max(-8rem, -8vw);
    background-image: url("../../../assets/ornaments/ornament-1.png");
    opacity: 0.44;
}

.wu-ornament-surface--spark::before {
    width: clamp(14rem, 25vw, 24rem);
    aspect-ratio: 1;
    top: -5rem;
    left: max(-7rem, -6vw);
    background-image: url("../../../assets/ornaments/ornament-top-right.webp");
    opacity: 0.42;
}

.wu-ornament-surface--arch::after {
    width: clamp(18rem, 32vw, 32rem);
    aspect-ratio: 1;
    right: max(-10rem, -7vw);
    bottom: -8rem;
    background-image: url("../../../assets/ornaments/ornament-arches-bottom-right.webp");
    opacity: 0.34;
}

@media (max-width: 767.98px) {

    .wu-ornament-surface::before,
    .wu-ornament-surface::after {
        opacity: 0.2;
        transform: scale(0.82);
    }
}

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

    .wu-ornament-surface::before,
    .wu-ornament-surface::after {
        animation: none !important;
    }
}

/* Reusable application components */

:root {
    --wu-white: var(--wu-neutral-0);
    --wu-canvas: var(--wu-neutral-50);
    --wu-surface: var(--wu-neutral-0);
    --wu-soft: var(--wu-bronze-50);
    --wu-soft-2: var(--wu-bronze-100);
    --wu-line: var(--wu-neutral-200);
    --wu-line-strong: var(--wu-neutral-300);
    --wu-text: var(--wu-neutral-900);
    --wu-muted: var(--wu-neutral-500);
    --wu-sidebar: #6b4b26;
    --wu-sidebar-2: var(--wu-bronze-800);
    --wu-gold: var(--wu-gold-500);
    --wu-gold-2: var(--wu-gold-600);
    --wu-bronze: var(--wu-bronze-500);
    --wu-green: var(--wu-success-500);
    --wu-green-soft: var(--wu-success-50);
    --wu-red: var(--wu-danger-500);
    --wu-red-soft: var(--wu-danger-50);
    --wu-blue: var(--wu-info-500);
    --wu-shadow: var(--wu-shadow-md);
    --wu-radius-sm: 9px;
    --wu-radius: 14px;
    --wu-radius-lg: 20px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--wu-text);
    background: var(--wu-canvas);
    font-size: 14px;
}

button,
input,
select,
textarea {
    font: inherit;
}

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

button {
    cursor: pointer;
}

.wu-button {
    --wu-button-height: 38px;
    min-height: var(--wu-button-height);
}
.wu-button-lg {
    --wu-button-height: 50px;
    --wu-button-padding-x: 24px;
    --wu-button-font-size: var(--wu-text-md);
}

.wu-button-md {
    --wu-button-height: 38px;
    --wu-button-padding-x: 18px;
    --wu-button-font-size: var(--wu-text-sm);
}

.wu-button-sm {
    --wu-button-height: 32px;
    --wu-button-padding-x: 10px;
    --wu-button-font-size: var(--wu-text-xs);
}

/* ALERTS: Bootstrap owns the base layout and dismissal behavior.
 * Add d-flex/gap-* to the markup only when an icon/content layout is needed.
 */
.alert {
    --bs-alert-padding-x: var(--wu-space-4);
    --bs-alert-padding-y: var(--wu-space-4);
    --bs-alert-border-radius: var(--wu-radius-md);
    --bs-alert-color: var(--wu-neutral-700);
    --bs-alert-bg: var(--wu-neutral-0);
    --bs-alert-border-color: var(--wu-border-subtle);
    --bs-alert-link-color: var(--wu-neutral-900);

    font-family: var(--wu-font-sans);
    font-size: var(--wu-text-sm);
    line-height: var(--wu-leading-body);
}

.alert-primary {
    --bs-alert-color: var(--wu-gold-700);
    --bs-alert-bg: var(--wu-gold-50);
    --bs-alert-border-color: var(--wu-gold-200);
    --bs-alert-link-color: var(--wu-gold-900);
}

.wu-alert.alert-secondary {
    --bs-alert-color: var(--wu-bronze-700);
    --bs-alert-bg: var(--wu-bronze-50);
    --bs-alert-border-color: var(--wu-bronze-200);
    --bs-alert-link-color: var(--wu-bronze-900);
}

.alert-success {
    --bs-alert-color: var(--wu-success-600);
    --bs-alert-bg: var(--wu-success-50);
    --bs-alert-border-color: var(--wu-success-200);
    --bs-alert-link-color: var(--wu-success-800);
}

.wu-alert.alert-danger {
    --bs-alert-color: var(--wu-danger-600);
    --bs-alert-bg: var(--wu-danger-50);
    --bs-alert-border-color: var(--wu-danger-200);
    --bs-alert-link-color: var(--wu-danger-800);
}

.wu-alert.alert-warning {
    --bs-alert-color: var(--wu-warning-700);
    --bs-alert-bg: var(--wu-warning-50);
    --bs-alert-border-color: var(--wu-warning-200);
    --bs-alert-link-color: var(--wu-warning-900);
}

.wu-alert.alert-info {
    --bs-alert-color: var(--wu-info-700);
    --bs-alert-bg: var(--wu-info-50);
    --bs-alert-border-color: var(--wu-info-200);
    --bs-alert-link-color: var(--wu-info-900);
}

.wu-alert.alert-light {
    --bs-alert-color: var(--wu-neutral-700);
    --bs-alert-bg: var(--wu-neutral-0);
    --bs-alert-border-color: var(--wu-neutral-200);
    --bs-alert-link-color: var(--wu-neutral-900);
}

.wu-alert.alert-dark {
    --bs-alert-color: var(--wu-neutral-0);
    --bs-alert-bg: var(--wu-neutral-900);
    --bs-alert-border-color: var(--wu-neutral-800);
    --bs-alert-link-color: var(--wu-gold-200);
}

.wu-alert .alert-heading {
    color: inherit;
    font-family: inherit;
    font-size: var(--wu-text-sm);
    font-weight: 700;
    line-height: 1.4;
}

.wu-alert .alert-link {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    overflow-wrap: anywhere;
}

.wu-alert > .flex-grow-1 {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Optional shared icon container for help/notification layouts. */
.alert .wu-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--wu-radius-full);
    background-color: var(--bs-alert-border-color);
    color: inherit;
}

/* Keep room for Bootstrap's absolute-positioned close button. */
.wu-alert.alert-dismissible {
    padding-right: calc(var(--bs-alert-padding-x) + 2rem);
}

.wu-alert.alert-dark .btn-close {
    --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* .wu-badge {
    --bs-badge-padding-x: 0.625rem;
    --bs-badge-padding-y: 0.375rem;
    --bs-badge-font-size: var(--wu-text-xs);
    --bs-badge-font-weight: 700;
    --bs-badge-color: var(--wu-neutral-700);
    --bs-badge-border-radius: var(--wu-radius-full);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wu-space-3);
    width: fit-content;
    vertical-align: middle;
    font-family: var(--wu-font-sans);
    background-color: var(--wu-neutral-100);
    border-width: 1px;
    border-style: solid;
} */
.wu-badge.wu-badge--xs{
    --bs-badge-padding-x: 0.425rem;
    --bs-badge-padding-y: 0.1rem;
    --bs-badge-font-size: 10px;
    --bs-badge-font-weight: 400;
}

/* Bootstrap text-bg-* uses !important on color/background-color.
 * Scope these necessary overrides to badges, leaving other helpers intact.
 */
.wu-badge.text-bg-primary {
    color: var(--wu-gold-700) !important;
    background-color: var(--wu-gold-100) !important;
}
.wu-badge.text-bg-primary-fill {
    background-color: var(--wu-gold-500) !important;
    color: var(--wu-neutral-0) !important;
}

.wu-badge.text-bg-secondary {
    color: var(--wu-bronze-700) !important;
    background-color: var(--wu-bronze-100) !important;
}

.wu-badge.text-bg-success {
    color: var(--wu-success-500) !important;
    background-color: var(--wu-success-50) !important;
    border-color: var(--wu-success-200) !important; ;
}

.wu-badge.text-bg-danger {
    color: var(--wu-danger-700) !important;
    background-color: var(--wu-danger-50) !important;
}

.wu-badge.text-bg-warning {
    color: var(--wu-warning-700) !important;
    background-color: var(--wu-warning-50) !important;
}

.wu-badge.text-bg-info {
    color: var(--wu-info-700) !important;
    background-color: var(--wu-info-50) !important;
}

.wu-badge.text-bg-light {
    color: var(--wu-neutral-700) !important;
    background-color: var(--wu-neutral-100) !important;
}

.wu-badge.text-bg-dark {
    color: var(--wu-neutral-0) !important;
    background-color: var(--wu-neutral-900) !important;
}


/* Pagination */
.wu-pagination{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-top: 1px solid var(--wu-line);
    font-size: 11px;
    color: #777;
}
.wu-pagination p{
    font-size: 14px;
}
.wu-pagination .page-link {
    font-size: 14px;
    min-height: 32px;
    min-width: 32px;
    background-color: transparent;
    border: none;
    color: var(--wu-neutral-500);
    border-radius: var(--wu-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wu-pagination .page-link.active {
    background-color: var(--wu-gold-500);
    color: var(--wu-neutral-0);
    font-weight: 700;
}
.page-link:focus {
    box-shadow: 0 0 0 3px var(--wu-form-ring);
}
.wu-pagination .disabled>.page-link, .page-link.disabled {
    color: var(--wu-neutral-400);
    background-color: transparent;
    border: none;
}
.wu-pagination .page-item:last-child .page-link {
    color: var(--wu-neutral-900);
    background-color: transparent;
    border: none;
}



.wu-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.wu-page-title {
    font-size: 31px;
    line-height: 1.12;
    margin: 0 0 5px;
    letter-spacing: -.03em;
    font-weight: 750;
}

.wu-page-copy {
    margin: 0;
    max-width: unset;
    line-height: 1.55;
    color: var(--wu-neutral-500);
    font-size: 14px;
}

.wu-page-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.wu-card {
    background: var(--wu-surface);
    border: 1px solid var(--wu-line);
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(50, 40, 25, .02);
}

.wu-card-head {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 22px;
    border-bottom: 1px solid var(--wu-line);
}

.wu-card-head h2,
.wu-card-head h3 {
    font-size: 17px;
    color: #87612f;
    margin: 0;
    font-weight: 750;
}

.wu-card-body {
    padding: 20px 22px;
}

.wu-count-badge {
    background: #f2eee7;
    color: #8d8477;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 650;
}

.wu-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
}

.tab-pane .wu-toolbar{
    padding: 0 16px 14px 16px;
}

.wu-toolbar-left {
    display: flex;
    gap: 10px;
    width: 70%;
}

.wu-search,
.wu-input,
.wu-textarea {
    border: 1px solid var(--wu-line-strong);
    /* background: #fff; */
    border-radius: 7px;
    padding: 9px 11px;
    color: var(--wu-text);
    outline: none;
}

.wu-select{
    /* min-width: 270px; */
    border: 1px solid var(--wu-line);
    /* background: #fff; */
    border-radius: 10px;
    padding: 9px 11px;
    color: var(--wu-neutral-700);
    outline: none;
    background-color: var(--wu-neutral-0);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M18.632 8.183a.996.996 0 0 0-1.414 0l-4.561 4.565a.996.996 0 0 1-1.414 0L6.682 8.183a.996.996 0 1 0-1.414 1.405l4.57 4.575a2.986 2.986 0 0 0 4.223 0l4.57-4.575a.997.997 0 0 0 0-1.405'%3E%3C/path%3E%3C/svg%3E");
}

.wu-search:focus,
.wu-select:focus,
.wu-input:focus,
.wu-textarea:focus {
    border-color: #bd9657;
    box-shadow: 0 0 0 3px rgba(193, 154, 91, .12);
}

/* .wu-select {
    min-width: 155px;
} */

.wu-label {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .055em;
    color: var(--wu-gold-700);
    margin-bottom: 4px;
    display: block;
    text-transform: uppercase;
}

.wu-label span{
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: normal;
    color: var(--wu-neutral-400);
    margin-left: 2px;
}

.wu-help {
    font-size: 12px;
    line-height: 1.55;
    color: #8b857e;
}

.wu-table-wrap {
    overflow: unset;
}

.wu-table {
    width: 100%;
    border-collapse: collapse;
}

.wu-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--wu-neutral-500);
    font-weight: 500;
    text-align: left;
    background: #fbf8f2;
    padding: 13px 14px;
}

.wu-table th:last-child {
    text-align: center;
    background: var(--wu-gold-100);
}

.wu-table td {
    padding: 11px 14px;
    border-top: 1px solid #eee8df;
    vertical-align: middle;
}
.wu-table td:last-child {
    background: var(--wu-bronze-50);
}

.wu-table th:nth-child(1) {
    width: 300px;
}
.wu-table th:nth-child(2) {
    width: 120px;
}
.wu-table th:nth-child(3) {
    width: 420px;
}
.wu-table th:nth-child(4) {
    width: 250px;
    text-align: center;
}
.wu-table td:nth-child(4) {
    text-align: center;
}

.wu-table tbody tr:hover {
    background: #fffdf9;
}

.wu-action-menu {
    position: relative;
}
.wu-action-popover button,
.wu-action-popover a {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 8px 9px;
    border-radius: 7px;
    display: block;
}

.wu-action-popover button:hover,
.wu-action-popover a:hover {
    background: var(--wu-soft);
}

.wu-action-popover .danger {
    color: var(--wu-red);
    border-top: 1px solid var(--wu-line);
    margin-top: 5px;
    padding-top: 10px;
}


.wu-pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wu-page-btn {
    border: 0;
    background: transparent;
    color: #8b8174;
    padding: 6px 8px;
    border-radius: 6px;
}

.wu-page-btn.is-active {
    background: #c59855;
    color: white;
}

.wu-page-btn:disabled {
    opacity: .45;
}

.wu-empty {
    min-height: 430px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #777;
}

.wu-empty-mark {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #f6efe5;
    display: grid;
    place-items: center;
    margin: auto auto 12px;
    color: #956b36;
    font-size: 26px;
}

.wu-empty strong {
    display: block;
    color: #2f2b27;
    margin-bottom: 6px;
}

.wu-empty p {
    margin: 0 0 15px;
}

/* Bootstrap Modal owns the overlay; WU classes only style its content. */
.wu-modal {
    --bs-modal-width: 560px;
}

.wu-modal .modal-content {
    border-color: var(--wu-neutral-200);
    border-radius: var(--wu-radius-sm);
    background-color: var(--wu-neutral-0);
}

.wu-modal .modal-content>form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.wu-modal .modal-content>form>.modal-body {
    overflow-y: auto;
}

.wu-modal .modal-header,
.wu-modal .modal-footer {
    flex-shrink: 0;
}

.wu-modal .modal-dialog:has(.wu-modal-xl) {
    --bs-modal-width: 1080px;
}

.wu-application .modal-backdrop,
.wu-application .offcanvas-backdrop {
    --bs-backdrop-opacity: .32;
}

.wu-modal-head,
.wu-modal-foot {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wu-modal-head {
    border-bottom: 1px solid var(--wu-line);
}

.wu-modal-foot {
    border-top: 1px solid var(--wu-line);
    justify-content: flex-end;
}

.wu-modal-head h2 {
    margin: 0;
    font-size: 18px;
}

.wu-modal-body {
    padding: 18px;
}

.wu-close {
    border: 0;
    background: transparent;
    font-size: 22px;
    color: #777;
}

/* Bootstrap Offcanvas: no custom transform, visibility, position or z-index. */
.wu-drawer {
    --bs-offcanvas-width: min(400px, 100vw);
    --bs-offcanvas-border-width: 0;
}

.wu-drawer .offcanvas-header {
    min-height: 60px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--wu-neutral-200);
}

.wu-drawer .offcanvas-title {
    margin: 0;
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
}

.wu-drawer .offcanvas-body {
    min-height: 0;
    overscroll-behavior: contain;
}

.wu-drawer-profile {
    text-align: center;
    padding: 24px 20px 17px;
}

.wu-drawer-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e6ded4;
    color: #72552f;
    margin: auto;
    font-weight: 800;
    font-size: 20px;
    border: 3px solid #f6f0e8;
}

.wu-drawer-profile h3 {
    font-size: 20px;
    margin: 11px 0 0;
}

.wu-setting-block {
    padding: 18px;
    border-top: 1px solid var(--wu-line);
}

.wu-setting-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    margin-bottom: 6px;
}

.wu-switch {
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background: #e5e5e5;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.wu-switch:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: .18s;
}

.wu-switch.is-on {
    background: #c69a57;
}

.wu-switch.is-on:before {
    transform: translateX(20px);
}

.wu-add-email {
    display: flex;
    gap: 7px;
    margin-top: 12px;
}

.wu-add-email .wu-input {
    min-width: 0;
    flex: 1;
}

.wu-transfer {
    background: #fffafa;
    border-radius: 10px;
    padding: 12px;
    margin-top: 10px;
}

.wu-grid {
    display: grid;
    gap: 18px;
}

.wu-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wu-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wu-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wu-stat {
    padding: 18px;
}

.wu-stat-label {
    font-size: 11px;
    color: #8b857e;
}

.wu-stat-value {
    font-size: 26px;
    font-weight: 800;
    margin: 5px 0;
}

.wu-stat-note {
    font-size: 11px;
    color: #8a857e;
}

.wu-progress {
    height: 8px;
    background: #ececec;
    border-radius: 999px;
    overflow: hidden;
}

.wu-progress span {
    height: 100%;
    display: block;
    width: 19%;
    background: #27b7d0;
}

.wu-info {
    background: #f7f2e9;
    border: 1px solid #ebddc6;
    border-radius: 10px;
    padding: 14px;
    color: #746855;
    font-size: 12px;
    line-height: 1.6;
}

.wu-segmented {
    display: flex;
    border: 1px solid var(--wu-line);
    background: #f4f0ea;
    border-radius: 999px;
    padding: 3px;
}

.wu-segmented button {
    flex: 1;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 10px 12px;
    color: #948b7f;
    font-weight: 700;
}

.wu-segmented button.is-active {
    background: #9a8257;
    color: #fff;
}

.wu-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 160;
    background: #272521;
    color: #fff;
    border-radius: 10px;
    padding: 12px 15px;
    box-shadow: var(--wu-shadow-lg);
    display: none;
    max-width: 320px;
}

.wu-toast.is-open {
    display: block;
}

.wu-toast strong {
    display: block;
    margin-bottom: 3px;
}

@media (max-width:1180px) {
    .wu-table th:nth-child(3) {
        width: 720px;
    }
    .wu-table th:nth-child(4),
    .wu-table td:nth-child(4) {
        display: none;
    }
}

@media (max-width:920px) {
    .wu-table-wrap {
        display: none;
    }

    .wu-page-head {
        flex-direction: column;
    }

    .wu-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .wu-page-title .acronym{
        display: none; 
    }
}

@media (max-width:600px) {
    .wu-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .wu-toolbar-left {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .wu-search,
    .wu-select {
        min-width: unset;
        width: 100% !important;
    }

    .wu-toolbar>.wu-btn {
        width: 100%;
    }

    .wu-grid-2,
    .wu-grid-3,
    .wu-grid-4 {
        grid-template-columns: 1fr;
    }
    .wu-card-body {
        padding: 16px;
    }
}

.wu-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}

.wu-help-card {
    padding: 18px;
}

.wu-help-card h3,
.wu-summary-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: #87612f;
}

.wu-help-card p,
.wu-summary-card p {
    margin: 0;
    color: #7b746b;
    line-height: 1.55;
}

.wu-help-card-actions,
.wu-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.wu-summary-card {
    padding: 18px;
    background: linear-gradient(180deg, #fff, #fbf8f2);
}

.wu-summary-mini {
    font-size: 11px;
    color: #948879;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.wu-summary-value {
    font-size: 28px;
    font-weight: 800;
    margin-top: 6px;
    color: #61431f;
}

.wu-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f5efe4;
    color: #8c6d46;
    font-size: 12px;
    font-weight: 700;
}



.wu-studio-grid {
    display: grid;
    grid-template-columns: minmax(280px, .95fr) minmax(220px, .75fr);
    gap: 18px;
}

.wu-field-stack {
    display: grid;
    gap: 14px;
}

.wu-studio-panel {
    border: 1px solid var(--wu-line);
    border-radius: 14px;
    padding: 16px;
    background: #fff;
}

.wu-studio-panel h3 {
    margin: 0 0 4px;
    font-size: 16px;
    color: #79582f;
}

.wu-studio-panel p {
    margin: 0;
    color: #80796f;
    line-height: 1.5;
}

.wu-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wu-input-wrap {
    display: grid;
    gap: 6px;
}

.wu-input-group {
    display: flex;
    border: 1px solid var(--wu-line-strong);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.wu-input-group span {
    padding: 11px 12px;
    background: #f3f0ea;
    border-right: 1px solid var(--wu-line);
    color: #80766b;
    white-space: nowrap;
}

.wu-input-group input {
    border: 0;
    flex: 1;
    padding: 11px 12px;
    min-width: 0;
    outline: none;
}

.wu-qr-card {
    display: grid;
    gap: 14px;
    align-content: start;
}

.wu-qr-box {
    aspect-ratio: 1/1;
    border: 1px solid var(--wu-line);
    border-radius: 16px;
    background: linear-gradient(90deg, #000 10px, transparent 10px) 0 0/34px 34px,
        linear-gradient(#000 10px, transparent 10px) 0 0/34px 34px,
        linear-gradient(135deg, #fff, #fafafa);
    position: relative;
    overflow: hidden;
}

.wu-qr-note {
    font-size: 12px;
    color: #7d756b;
    line-height: 1.6;
}

.wu-side-note {
    padding: 14px;
    border: 1px solid #ebddc6;
    border-radius: 12px;
    background: #fbf7f0;
    color: #776b5c;
    font-size: 12px;
    line-height: 1.65;
}



.wu-drawer-body {
    padding: 18px;
    display: grid;
    gap: 18px;
}

.wu-section-label {
    font-size: 12px;
    font-weight: 700;
    color: #886536;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.wu-tab-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wu-tab-pill {
    border: 1px solid var(--wu-line);
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    color: #7b6543;
}

.wu-tab-pill.is-active {
    background: #6d4d27;
    border-color: #6d4d27;
    color: #fff;
}

.wu-tab-panel {
    display: none;
}

.wu-tab-panel.is-open {
    display: block;
}

.wu-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--wu-line);
    background: #fff;
    display: grid;
    place-items: center;
    color: #7c756b;
}

.wu-upgrade {
    padding: 18px;
    border: 1px dashed #d7be93;
    border-radius: 14px;
    background: #fcfaf5;
    display: grid;
    gap: 12px;
}

.wu-upgrade strong {
    font-size: 18px;
    color: #74532e;
}

.wu-feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #f6efe5;
    border-radius: 999px;
    padding: 7px 11px;
    color: #8b683a;
    font-weight: 700;
    font-size: 12px;
}

.wu-guide-layer {
    position: fixed;
    inset: 0;
    background: rgba(26, 20, 14, .58);
    z-index: 260;
    display: none;
}

.wu-guide-layer.is-open {
    display: block;
}

.wu-tour-focus {
    position: absolute;
    border: 2px solid #fff;
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .02), 0 14px 40px rgba(0, 0, 0, .28);
    pointer-events: none;
}

.wu-tour-card {
    position: absolute;
    width: min(340px, calc(100vw - 32px));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .35);
    padding: 18px;
    display: grid;
    gap: 12px;
}

.wu-tour-step {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9d7a41;
    font-weight: 800;
}

.wu-tour-card h3 {
    margin: 0;
    font-size: 20px;
}

.wu-tour-card p {
    margin: 0;
    color: #6f6960;
    line-height: 1.6;
}

.wu-tour-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.wu-accordion {
    display: grid;
    gap: 12px;
}

.wu-accordion-item {
    border: 1px solid var(--wu-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.wu-accordion-trigger {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

.wu-accordion-body {
    display: none;
    padding: 0 18px 18px;
    color: #7d756c;
    line-height: 1.65;
}

.wu-accordion-item.is-open .wu-accordion-body {
    display: block;
}

.wu-callout {
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff8ee, #fbf5ea);
    border: 1px solid #ecd8b6;
}

.wu-callout h3 {
    margin: 0 0 5px;
    color: #805f31;
}

.wu-callout p {
    margin: 0;
    color: #746c64;
    line-height: 1.6;
}

.wu-list-check {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.wu-list-check span {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #6e665d;
}

.wu-list-check span:before {
    content: "✓";
    color: #b58c50;
    font-weight: 800;
}

.wu-card-body.compact {
    padding: 16px 18px;
}

@media (max-width:1180px) {

    .wu-summary-strip,
    .wu-studio-grid {
        grid-template-columns: 1fr;
    }


}

@media (max-width:920px) {
    .wu-summary-strip {
        grid-template-columns: 1fr;
    }

    .wu-form-row {
        grid-template-columns: 1fr;
    }

    .wu-tour-card {
        width: min(300px, calc(100vw - 24px));
    }
}

.wu-accordion--line {
    gap: 0;
    border-top: 1px solid var(--wu-line);
}

.wu-accordion--line .wu-accordion-item {
    border: 0;
    border-bottom: 1px solid var(--wu-line);
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.wu-accordion--line .wu-accordion-trigger {
    padding: 18px 2px;
    background: transparent;
    font-size: 14px;
    align-items: center;
}

.wu-accordion--line .wu-accordion-trigger span {
    font-size: 20px;
    font-weight: 400;
    color: #9a743e;
    line-height: 1;
}

.wu-accordion--line .wu-accordion-body {
    padding: 0 38px 20px 2px;
    color: var(--wu-muted);
    line-height: 1.7;
}

.wu-accordion--line .wu-accordion-trigger:hover {
    color: #7d5c2f;
}

.wu-accordion--line .wu-accordion-trigger:focus-visible {
    outline: 2px solid rgba(193, 154, 91, .45);
    outline-offset: 4px;
    border-radius: 4px;
}

.wu-guide-layer {
    background: transparent;
    pointer-events: auto;
    overflow: hidden;
}

.wu-tour-focus {
    position: fixed;
    border: 1px solid rgba(255, 255, 255, .98);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
    box-shadow: 0 0 0 9999px rgba(22, 16, 10, .64), 0 0 0 5px rgba(193, 154, 91, .18), 0 18px 44px rgba(0, 0, 0, .28);
    pointer-events: none;
    transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease, border-radius .22s ease;
}

.wu-tour-card {
    position: fixed;
    z-index: 2;
    border: 1px solid rgba(221, 207, 187, .75);
    transition: top .22s ease, left .22s ease;
    max-height: calc(100vh - 24px);
    overflow: auto;
}

.wu-tour-actions {
    align-items: center;
}

.wu-tour-nav-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wu-tour-skip {
    border-color: transparent;
    background: transparent;
    color: #7b736a;
}

.wu-tour-skip:hover {
    background: var(--wu-soft);
}

body.wu-tour-open {
    overscroll-behavior: none;
}

.wu-tour-card:before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background: #fff;
    border-left: 1px solid rgba(221, 207, 187, .75);
    border-top: 1px solid rgba(221, 207, 187, .75);
    transform: rotate(45deg);
    top: -5px;
    left: 30px;
}

.wu-tour-card[data-placement="top"]:before {
    top: auto;
    bottom: -5px;
    transform: rotate(225deg);
}

.wu-tour-card[data-placement="center"]:before {
    display: none;
}

@media (max-width:920px) {
    .wu-tour-focus {
        transition: none;
    }

    .wu-tour-card {
        transition: none;
    }
}

@media (max-width:600px) {
    .wu-tour-card {
        width: calc(100vw - 24px);
        max-height: min(46vh, 420px);
    }

    .wu-tour-actions {
        position: sticky;
        bottom: -18px;
        background: #fff;
        padding-top: 10px;
        padding-bottom: 2px;
    }
}

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

    .wu-tour-focus,
    .wu-tour-card {
        transition: none !important;
    }
}

/* =====================================================================
   APPLICATION SHELL — edit here. No feature layout belongs in this section.
   Bootstrap breakpoints: mobile <768, tablet 768–1199, desktop >=1200.
   ===================================================================== */

:root {
    --wu-sidebar-w: 236px;
    --wu-sidebar-rail-w: 76px;
    --wu-sidebar-bg: #806036;
    --wu-sidebar-active-bg: #a47d45;
    --wu-shell-canvas: #faf7f2;
    --wu-shell-topbar-h: 68px;
    --wu-shell-gutter: 28px;
    --wu-nav-icon-size: 18px;
    --wu-menu-line-width: 20px;
    --wu-menu-line-height: 2px;
    --wu-menu-line-gap: 4px;
    --wu-menu-line-radius: 2px;
}

.wu-application {
    margin: 0;
    background: var(--wu-shell-canvas);
}

.wu-app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.wu-main {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.wu-sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 var(--wu-sidebar-w);
    width: var(--wu-sidebar-w);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--wu-gold-700);
    color: var(--wu-neutral-0);
    z-index: 9999;
    border-radius: 0 10px 10px 0;
}

.wu-sidebar-head {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 94px;
    padding: 18px 26px;
}

.wu-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.wu-brand-full {
    width: 174px;
    max-width: 100%;
    height: auto;
}

.wu-brand-mark {
    display: none;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.wu-sidebar-scroll {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 10px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--wu-gold-800) transparent;
}

.wu-sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.wu-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #bc9b66;
    border-radius: 4px;
}

.wu-create {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 99px;
    border: 0;
    background: #f5ecdd;
    color: #a47d45;
    font-weight: 650;
    text-decoration: none;
}

.wu-create:hover {
    background: #fff7e9;
    color: #806036;
}

.wu-nav-group {
    border-top: 1px solid #ffffff36;
    margin-top: 22px;
    padding-top: 22px;
}

.wu-nav-title {
    margin: 0 0 12px;
    color: #d3c3ad;
    font: 600 11px/1.4 Inter, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wu-sidebar .nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wu-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    min-height: 38px;
    margin: 2px 0;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
}

.wu-nav-link:hover,
.wu-nav-link:focus-visible {
    color: #fff;
    background: #ffffff16;
}

.wu-nav-link.is-active {
    background: var(--wu-gold-600);
    color: #fff;
}

.wu-nav-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.wu-nav-link .wu-nav-text {
    flex: 1 1 0;
}

.wu-nav-icon {
    display: inline-flex;
    flex: 0 0 var(--wu-nav-icon-size);
    width: var(--wu-nav-icon-size);
    height: var(--wu-nav-icon-size);
    align-items: center;
    justify-content: center;
    color: #dec08a;
}

.wu-nav-icon svg,
.wu-nav-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wu-create .wu-nav-icon {
    color: currentColor;
}

.wu-nav-link .wu-nav-pill {
    flex-shrink: 0;
    margin-left: auto;
}

.wu-nav-pill {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    line-height: 1.35;
    border-radius: 99px;
    font-weight: 500;
    white-space: nowrap;
}

.wu-nav-pill.success {
    background: var(--wu-success-100);
    color: var(--wu-success-500);
}

.wu-nav-pill.danger {
    background: var(--wu-danger-100);
    color: var(--wu-danger-500);
}

.wu-nav-pill.warning {
    background: var(--wu-warning-100);
    color: var(--wu-warning-500);
}

.wu-nav-pill.info {
    background: var(--wu-info-200);
    color: var(--wu-info-500);
}

.wu-sidebar-account {
    margin-top: 22px;
    padding: 12px 10px;
    border-radius: 9px;
    background: #604828;
}

.wu-sidebar-account-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    color: #d9cdbd;
}

.wu-sidebar-storage {
    margin: 10px 0 7px;
    font-size: 13px;
}

.wu-mini-progress {
    height: 5px;
    border-radius: 1px;
    background: var(--wu-neutral-100);
    overflow: hidden;
}

.wu-mini-progress span {
    display: block;
    width: 19%;
    height: 100%;
    background: var(--wu-success-400);
}

.wu-storage-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    color: var(--wu-gold-400);
    font-size: 11px;
}

.wu-sidebar-toggle {
    display: none;
    flex: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: #ffffff14;
    border: 1px solid #ffffff45;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    line-height: 1;
}

.wu-sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    border: 0;
    background: #21170e66;
}

.wu-sidebar-scrim[hidden] {
    display: none;
}

body.wu-sidebar-active {
    overflow: hidden;
}

.wu-topbar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    height: var(--wu-shell-topbar-h);
    min-height: var(--wu-shell-topbar-h);
    padding: 0 var(--wu-shell-gutter);
    background: #fff;
    /* border-radius: 0 0 14px 14px; */
    position: sticky;
    top: 0;
    z-index: 55;
}

.wu-top-left,
.wu-top-right {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.wu-top-right {
    flex-shrink: 0;
}

.wu-mobile-menu {
    display: none;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #806036;
    background: #f5efe5;
    border: 0;
    border-radius: 50%;
}

.wu-hamburger {
    display: flex;
    flex-direction: column;
}

.wu-hamburger>span {
    display: block;
    width: var(--wu-menu-line-width);
    height: var(--wu-menu-line-height);
    background: currentColor;
}

.wu-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #958c80;
    font-size: 12px;
    white-space: nowrap;
}

.wu-breadcrumb>span {
    flex: 0 0 auto;
}

.wu-breadcrumb strong {
    color: #b58b4d;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wu-breadcrumb-home {
    display: inline-flex;
    color: #c19a5b;
}

.wu-breadcrumb-home svg {
    width: 16px;
    height: 16px;
}

.wu-clock {
    font-size: 12px;
    color: var(--wu-neutral-500);
    white-space: nowrap;
}

.wu-profile-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 4px 9px 4px 4px;
    border: 1px solid #eee8df;
    background: #fff;
    border-radius: 99px;
    color: #273042;
    font-size: 13px;
}

.wu-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #604828;
    font-size: 13px;
}

.wu-profile-menu {
    display: none;
    position: absolute;
    top: calc(100% - 3px);
    right: var(--wu-shell-gutter);
    width: 220px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--wu-line);
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--wu-shadow);
    overflow: hidden;
}

.wu-profile-menu.is-open {
    display: block;
}

.wu-profile-welcome {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid var(--wu-neutral-300);
    font-size: 14px;
}

.wu-profile-welcome strong {
    display: block;
    margin-top: 3px;
}

.wu-profile-item {
    display: flex;
    gap: 9px;
    padding: 12px 14px;
    align-items: center;
}

.wu-profile-item:hover {
    background: var(--wu-soft);
}

.wu-profile-item.is-danger {
    color: #bf3b39;
    border-top: 1px solid var(--wu-line);
}

.wu-page {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    padding: 28px var(--wu-shell-gutter) 32px;
}
.wu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0;
    padding: 18px var(--wu-shell-gutter);
    min-height: 64px;
    background: #fff;
    font-size: 12px;
    color: #918a80;
}

.wu-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin-left: auto;
    min-width: 0;
}

/* dropdown lang */
.dropdown-menu {
  --bs-dropdown-zindex: 1000;
    max-width: calc(100vw - 28px);
    max-height: min(420px, calc(100dvh - 90px));
    overflow-y: auto;
    /* padding: 8px; */
    border: 1px solid var(--wu-neutral-200, #e9e2d8);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(35, 27, 18, .18);
}

.dropdown-menu .dropdown-item {
    padding: 8px 24px;
    cursor: pointer;
}

.dropdown-item.focus, .dropdown-item:focus,
.dropdown-item.hover, .dropdown-item:hover {
    background-color: var(--wu-gold-50);
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--wu-neutral-900);
    text-decoration: none;
    background-color: var(--wu-gold-100);
}

.wu-action-menu .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}

.wu-locale {
    position: relative;
    flex: 0 0 auto;
}

.wu-locale-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 78px;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid var(--wu-neutral-300);
    border-radius: 999px;
    background: transparent;
    font-family: var(--wu-font-sans);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.wu-locale-trigger:hover,
.wu-locale-trigger[aria-expanded="true"] {
    background: var(--wu-locale-hover);
    border-color: currentColor;
}

.wu-locale-trigger:focus-visible,
.wu-locale-option:focus-visible {
    outline: 2px solid var(--wu-gold-500);
    outline-offset: 3px;
}

.wu-locale-flag {
    font-size: 20px;
    line-height: 1;
}

.wu-locale-chevron {
    width: 7px;
    height: 7px;
    margin: -3px 1px 0 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.wu-locale-trigger[aria-expanded="true"] .wu-locale-chevron {
    margin-top: 3px;
    transform: rotate(225deg);
}

/* Menu selalu terang agar pilihan mudah dibaca pada semua warna header */
.wu-locale-menu {
    min-width: 218px;
    max-width: calc(100vw - 28px);
    max-height: min(420px, calc(100dvh - 90px));
    overflow-y: auto;
    margin-top: 10px !important;
    padding: 8px;
    border: 1px solid var(--wu-neutral-200, #e9e2d8);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(35, 27, 18, .18);
}

.wu-locale-option {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border-radius: 10px;
    color: var(--wu-neutral-900, #29241f);
    font-size: 14px;
    text-align: left;
}

.wu-locale-option>span:first-child {
    font-size: 19px;
    line-height: 1;
}

.wu-locale-option:hover,
.wu-locale-option:focus,
.wu-locale-option[aria-pressed="true"] {
    background: var(--wu-gold-50, #f7f0e5);
    color: var(--wu-bronze-800, #705840);
}

.wu-locale-check {
    opacity: 0;
    color: var(--wu-gold-600, #a77e50);
    font-weight: 800;
}

.wu-locale-option[aria-pressed="true"] .wu-locale-check {
    opacity: 1;
}

.wu-footer-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.wu-footer-copyright {
    font-size: 14px;
    color: var(--wu-neutral-500);
}

.wu-footer-links a {
    color: var(--wu-neutral-900);
    white-space: nowrap;
    font-size: 14px;
}

.wu-footer-legal {
    display: none;
    position: relative;
    color: #59524a;
}

.wu-footer-legal summary {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    font-size: 14px;
}

.wu-footer-legal summary::-webkit-details-marker {
    display: none;
}

.wu-footer-legal nav {
    display: grid;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    width: 170px;
    padding: 6px;
    border: 1px solid var(--wu-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--wu-shadow);
    z-index: 60;
}

.wu-footer-legal a {
    display: block;
    padding: 10px;
    border-radius: 4px;
}

.wu-footer-legal a:hover {
    background: var(--wu-soft);
}

.wu-footer-language {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #273042;
}

.wu-language-select {
    min-width: 0;
    max-width: 150px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 6px 2px;
    font: inherit;
    cursor: pointer;
}

.wu-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    padding: 12px 18px;
    background: #fff;
    color: #604828;
    border-radius: 8px;
    transform: translateY(-150%);
    z-index: 1000;
}

.wu-skip-link:focus {
    transform: none;
}

.wu-sidebar :focus-visible,
.wu-topbar :focus-visible,
.wu-footer :focus-visible {
    outline: 2px solid #c19a5b;
    outline-offset: 3px;
}

.wu-sidebar :focus-visible {
    outline-color: #fff4dc;
}

/* Existing portrait file is absent from the supplied archive: keep visible initials. */

.wu-drawer-avatar {
    font-size: 20px;
    background: #e6ded4;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .wu-app {
        padding-left: var(--wu-sidebar-rail-w);
    }

    .wu-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--wu-sidebar-rail-w);
    }

    .wu-sidebar:not(.is-open) .wu-sidebar-head {
        min-height: 82px;
        padding: 18px;
    }

    .wu-sidebar:not(.is-open) .wu-brand-full {
        display: none;
    }

    .wu-sidebar:not(.is-open) .wu-brand-mark {
        display: block;
    }

    .wu-sidebar:not(.is-open) .wu-sidebar-scroll {
        padding: 0 10px 20px;
    }

    .wu-sidebar:not(.is-open) .wu-nav-text,
    .wu-sidebar:not(.is-open) .wu-nav-title,
    .wu-sidebar:not(.is-open) .wu-nav-pill,
    .wu-sidebar:not(.is-open) .wu-sidebar-account {
        display: none;
    }

    .wu-sidebar:not(.is-open) .wu-nav-link {
        justify-content: center;
        min-height: 44px;
        padding: 10px 0;
    }

    .wu-sidebar:not(.is-open) .wu-create {
        width: 38px;
        height: 38px;
        margin-inline: auto;
        padding: 0;
    }

    .wu-sidebar:not(.is-open) .wu-nav-group {
        margin-top: 20px;
        padding-top: 18px;
    }
}

@media (max-width: 1199.98px) {
    :root {
        --wu-shell-gutter: 20px;
    }

    .wu-mobile-menu {
        display: inline-flex;
    }

    .wu-clock {
        display: none;
    }

    .wu-sidebar.is-open {
        width: min(300px, calc(100vw - 48px));
        box-shadow: var(--wu-shadow);
    }

    .wu-sidebar.is-open .wu-sidebar-head {
        justify-content: space-between;
        gap: 12px;
        padding: 16px 14px;
    }

    .wu-sidebar.is-open .wu-brand {
        width: 174px;
    }

    .wu-sidebar.is-open .wu-nav-link {
        min-height: 44px;
    }

    .wu-sidebar.is-open .wu-sidebar-toggle {
        display: inline-flex;
    }

    .wu-sidebar-scrim.is-open {
        display: block;
    }

    .wu-footer-links {
        display: none;
    }

    .wu-footer-legal {
        display: block;
    }

    .wu-footer-actions {
        gap: 16px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --wu-shell-gutter: 18px;
        --wu-shell-topbar-h: 64px;
    }

    .wu-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(300px, calc(100vw - 48px));
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .2s ease, visibility .2s;
    }

    .wu-sidebar.is-open {
        transform: none;
        visibility: visible;
    }

    .wu-topbar {
        gap: 10px;
    }

    .wu-top-left {
        gap: 10px;
        flex: 1 1 0;
    }

    .wu-breadcrumb {
        gap: 7px;
    }

    .wu-breadcrumb span:not(.wu-breadcrumb-home) {
        display: none;
    }

    .wu-breadcrumb strong::before {
        content: "›";
        margin-right: 8px;
        color: #958c80;
    }

    .wu-profile-trigger {
        padding: 4px;
        border: 0;
    }

    .wu-profile-trigger> :not(.wu-avatar) {
        display: none;
    }

    .wu-page {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .wu-page-title {
        font-size: 23px;
    }

    /* .wu-page-copy {
        font-size: 12px;
    } */

    .wu-footer {
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 16px;
    }

    .wu-locale-menu{
        min-width: 140px;
    }

    .dropdown-menu .dropdown-item.wu-locale-option {
        padding: 8px;
    }

    .wu-locale-trigger {
        padding: 4px 8px;
        font-size: 14px;
    }

    .wu-footer-actions {
        order: 0;
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .wu-footer-copyright {
        order: 1;
        width: 100%;
        text-align: center;
        font-size: 14px;
    }

    .wu-footer-language {
        border-color: var(--wu-line);
        padding-inline: 6px;
    }
    
}

@media (prefers-reduced-motion: reduce) {
    .wu-sidebar {
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Allow reusable email inputs to shrink inside narrow settings cards. */

.wu-add-email {
    min-width: 0;
}

.wu-add-email .wu-input {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
}

.wu-add-email .wu-btn {
    flex-shrink: 0;
}

.wu-language-flag {
    display: block;
    width: 16px;
    height: 10px;
    object-fit: cover;
    border: 1px solid #e8e3da;
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: no-preference) {
    .wu-application .wu-sidebar {
        transition:
            width 320ms cubic-bezier(.22, 1, .36, 1),
            transform 320ms cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear 320ms;
    }

    .wu-application .wu-sidebar.is-open {
        transition-delay: 0s;
    }
}

/* Account drawer presentation. All colors reuse foundation tokens. */
.wu-settings-drawer .offcanvas-body {
    padding: 0 16px 24px;
}

.wu-settings-drawer .wu-drawer-profile {
    padding: 14px 0 26px;
    border-bottom: 1px solid var(--wu-neutral-200);
}

.wu-settings-drawer .wu-drawer-avatar {
    width: 80px;
    height: 80px;
    border: 0;
    font-size: 20px;
}

.wu-settings-drawer .wu-drawer-profile h3 {
    margin: 8px 0 0;
    font-size: 20px;
    line-height: 32px;
    font-weight: 700;
}

.wu-settings-sections {
    margin-top: 16px;
    border-radius: 12px;
    background: var(--wu-neutral-50);
    overflow: hidden;
}

.wu-settings-sections .wu-setting-block {
    padding: 24px;
    border-top: 1px solid var(--wu-neutral-300);
}

.wu-settings-sections .wu-setting-block:first-child {
    border-top: 0;
}

.wu-settings-sections .wu-setting-title {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.wu-settings-sections .wu-help {
    color: var(--wu-neutral-500);
    font-size: 12px;
    line-height: 20px;
}

.wu-settings-sections .wu-input {
    margin-top: 12px;
    min-height: 38px;
    border-radius: 6px;
}

.wu-setting-notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wu-setting-notification>label {
    font-size: 16px;
    font-weight: 600;
}

.wu-setting-notification .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.wu-setting-notification .form-check-input {
    float: none;
    margin: 0;
    width: 40px;
    height: 20px;
    cursor: pointer;
}

.wu-setting-notification .form-check-label {
    font-size: 14px;
    white-space: nowrap;
}

.wu-settings-drawer .form-check-input:checked {
    background-color: var(--wu-gold-500);
    border-color: var(--wu-gold-500);
}

.wu-settings-drawer .form-check-input:focus {
    border-color: var(--wu-gold-500);
    box-shadow: 0 0 0 .2rem var(--wu-gold-100);
}

.wu-settings-add {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.wu-settings-add .wu-button {
    padding-inline: 0;
    font-size: 14px;
    color: var(--wu-gold-600);
}

.wu-settings-transfer {
    width: 100%;
    margin-top: 12px;
    min-height: 40px;
}

.wu-settings-sections .wu-setting-block:last-child {
    padding-bottom: 46px;
}

.wu-drive-drawer .offcanvas-body,
.wu-wedsigns-drawer .offcanvas-body {
    padding: 26px 24px 32px;
}

.wu-wedsigns-drawer .offcanvas-body .wu-card {
    padding: 0;
}

.wu-drive-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 600;
}

.wu-drive-connected {
    border-radius: var(--wu-radius-full);
    padding: 5px 16px;
    background: var(--wu-success-100);
    color: var(--wu-success-500);
    font-size: 14px;
    font-weight: 400;
}

.wu-drive-copy {
    margin: 0 0 24px;
    font-size: 12px;
    line-height: 20px;
    color: var(--wu-neutral-500);
}

.wu-drive-copy a {
    color: var(--wu-gold-500);
    font-weight: 600;
}

.wu-drive-storage-card {
    position: relative;
    padding: 12px;
    border: 1px solid var(--wu-neutral-200);
    border-radius: 12px;
    background: var(--wu-neutral-50);
}

.wu-drive-storage-card small {
    display: block;
    color: var(--wu-neutral-500);
    font-size: 12px;
    line-height: 20px;
}

.wu-drive-storage-card strong {
    display: block;
    font-size: 26px;
    line-height: 34px;
    font-weight: 800;
    color: var(--wu-neutral-800);
}

.wu-drive-storage-card p {
    margin: 4px 90px 6px 0;
    color: var(--wu-neutral-700);
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
}

.wu-drive-logo {
    position: absolute;
    top: 24px;
    right: 12px;
    width: 76px;
    height: 68px;
}

.wu-drive-meter {
    height: 6px;
    margin-right: 90px;
    background: var(--wu-neutral-200);
}

.wu-drive-meter .progress-bar {
    background: var(--wu-success-400);
}

.wu-drive-storage-card>span {
    display: block;
    margin-top: 14px;
    color: var(--wu-neutral-500);
    font-size: 12px;
    line-height: 16px;
}

.wu-drive-note {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--wu-warning-300);
    border-radius: 12px;
    background: var(--wu-warning-50);
    color: var(--wu-neutral-500);
    font-size: 14px;
    line-height: 22px;
}

.wu-drive-check {
    width: 100%;
}

.wu-logout-modal {
    --bs-modal-width: 420px;
}

.wu-logout-modal .modal-body {
    padding: 28px;
}

.wu-logout-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: var(--wu-radius-full);
    background: var(--wu-danger-50);
}

.wu-logout-modal h2 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.4;
}

.wu-logout-modal p {
    margin: 0;
    color: var(--wu-neutral-600);
    font-size: 14px;
}

.wu-logout-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.wu-logout-actions>.wu-button {
    flex: 1;
}

@media (max-width: 500px) {
    .wu-settings-sections .wu-setting-block {
        padding: 12px;
    }

    .wu-setting-notification {
        flex-wrap: wrap;
    }

    .wu-drive-drawer .offcanvas-body {
        padding-inline: 16px;
    }
}

.wu-application .offcanvas-backdrop.show {
    opacity: .32;
}

.wu-drawer {
    --bs-offcanvas-bg: var(--wu-neutral-0);
}

.wu-drive-logo {
    object-fit: contain;
}

.wu-settings-drawer .wu-drawer-profile {
    padding-bottom: 24px;
}

.wu-settings-sections .wu-setting-notification {
    padding-block: 22px;
}

.wu-settings-sections .wu-input {
    width: 100%;
    height: 38px;
    padding: 8px 14px;
    line-height: 20px;
}

.wu-settings-add .wu-button {
    min-height: 36px;
    padding-block: 4px;
}

.wu-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border: 1px solid var(--wu-line);
    border-radius: 10px;
    background: #fff;
    outline: 0;
    width: 75%;
}

.wu-search:focus-within {
    border-color: var(--wu-gold-500);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(189, 148, 87, .16);
}

.wu-search>input[type="search"],
.wu-search>input[type="search"]:focus {
    flex: 1;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.wu-search>input::placeholder{
    color: var(--wu-neutral-400);
}

/* Existing Appearance Studio keeps its original wider layout. */
.wu-drawer.wu-drawer--wide {
    --bs-offcanvas-width: min(980px, 100vw);
}

@media (max-width: 1180px) {
    .wu-drawer.wu-drawer--wide {
        --bs-offcanvas-width: min(720px, 100vw);
    }
    .wu-search, .wu-reading .wu-search {
        width: 100%;
        min-height: 48px;
    }
}

@media (max-width: 600px) {
    .wu-drawer.wu-drawer--wide {
        --bs-offcanvas-width: 80%;
    }
    .wu-drawer {
        --bs-offcanvas-width: min(320px, 100vw);
    }
    .wu-drive-logo{
        width: 48px;
        height: auto;
    }
}