@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-ordinal: initial;
            --tw-slashed-zero: initial;
            --tw-numeric-figure: initial;
            --tw-numeric-spacing: initial;
            --tw-numeric-fraction: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial
        }
    }
}

.collapse {
    visibility: collapse
}

.invisible {
    visibility: hidden
}

.visible {
    visibility: visible
}

.sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

.relative {
    position: relative
}

.static {
    position: static
}

.sticky {
    position: sticky
}

.z-0 {
    z-index: 0
}

.z-1 {
    z-index: 1
}

.z-2 {
    z-index: 2
}

.z-3 {
    z-index: 3
}

.order-0 {
    order: 0
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-first {
    order: -9999
}

.order-last {
    order: 9999
}

.col-1 {
    grid-column: 1
}

.col-2 {
    grid-column: 2
}

.col-3 {
    grid-column: 3
}

.col-4 {
    grid-column: 4
}

.col-5 {
    grid-column: 5
}

.col-6 {
    grid-column: 6
}

.col-7 {
    grid-column: 7
}

.col-8 {
    grid-column: 8
}

.col-9 {
    grid-column: 9
}

.col-10 {
    grid-column: 10
}

.col-11 {
    grid-column: 11
}

.col-12 {
    grid-column: 12
}

.col-auto {
    grid-column: auto
}

.float-end {
    float: inline-end
}

.float-none {
    float: none
}

.float-start {
    float: inline-start
}

.container {
    width: 100%
}

.m-auto {
    margin: auto
}

.mx-auto {
    margin-inline: auto
}

.my-auto {
    margin-block: auto
}

.ms-auto {
    margin-inline-start: auto
}

.me-auto {
    margin-inline-end: auto
}

.mt-auto {
    margin-top: auto
}

.mb-auto {
    margin-bottom: auto
}

.\!hidden {
    display: none !important
}

.block {
    display: block
}

.contents {
    display: contents
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.inline {
    display: inline
}

.inline-block {
    display: inline-block
}

.inline-flex {
    display: inline-flex
}

.inline-grid {
    display: inline-grid
}

.table {
    display: table
}

.table-caption {
    display: table-caption
}

.table-cell {
    display: table-cell
}

.table-row {
    display: table-row
}

.h-auto {
    height: auto
}

.w-auto {
    width: auto
}

.flex-shrink {
    flex-shrink: 1
}

.flex-shrink-0 {
    flex-shrink: 0
}

.flex-shrink-1, .shrink {
    flex-shrink: 1
}

.flex-grow {
    flex-grow: 1
}

.flex-grow-0 {
    flex-grow: 0
}

.flex-grow-1, .grow {
    flex-grow: 1
}

.caption-top {
    caption-side: top
}

.border-collapse {
    border-collapse: collapse
}

.transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
}

.resize {
    resize: both
}

.flex-row {
    flex-direction: row
}

.flex-row-reverse {
    flex-direction: row-reverse
}

.flex-nowrap {
    flex-wrap: nowrap
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse
}

.truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.overflow-auto {
    overflow: auto
}

.overflow-hidden {
    overflow: hidden
}

.overflow-scroll {
    overflow: scroll
}

.overflow-visible {
    overflow: visible
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}

.overflow-x-scroll {
    overflow-x: scroll
}

.overflow-x-visible {
    overflow-x: visible
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-y-hidden {
    overflow-y: hidden
}

.overflow-y-scroll {
    overflow-y: scroll
}

.overflow-y-visible {
    overflow-y: visible
}

.border {
    border-style: var(--tw-border-style);
    border-width: 1px
}

.border-0 {
    border-style: var(--tw-border-style);
    border-width: 0
}

.border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px
}

.border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px
}

.border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px
}

.border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px
}

.border-5 {
    border-style: var(--tw-border-style);
    border-width: 5px
}

.bg-transparent {
    background-color: #0000
}

.text-center {
    text-align: center
}

.text-end {
    text-align: end
}

.text-start {
    text-align: start
}

.align-baseline {
    vertical-align: baseline
}

.align-bottom {
    vertical-align: bottom
}

.align-middle {
    vertical-align: middle
}

.align-text-bottom {
    vertical-align: text-bottom
}

.align-text-top {
    vertical-align: text-top
}

.align-top {
    vertical-align: top
}

.text-nowrap {
    text-wrap: nowrap
}

.text-wrap {
    text-wrap: wrap
}

.break-all {
    word-break: break-all
}

.capitalize {
    text-transform: capitalize
}

.lowercase {
    text-transform: lowercase
}

.uppercase {
    text-transform: uppercase
}

.italic {
    font-style: italic
}

.ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)
}

.line-through {
    text-decoration-line: line-through
}

.underline {
    text-decoration-line: underline
}

.opacity-0 {
    opacity: 0
}

.opacity-25 {
    opacity: .25
}

.opacity-50 {
    opacity: .5
}

.opacity-75 {
    opacity: .75
}

.opacity-100 {
    opacity: 1
}

.shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px
}

.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
}

.\!filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important
}

.filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
}

.backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
}

.transition {
    transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
    transition-timing-function: var(--tw-ease,ease);
    transition-duration: var(--tw-duration,0s)
}

:root, [data-theme=amethyst] {
    --mol-primary: #6252d0;
    --mol-primary-dark: #3b317d;
    --mol-primary-light: #7662fa;
    --mol-primary-muted: #bab0fc;
    --mol-surface: #e4e0ff;
    --mol-bg: #f8f7ff;
    --mol-surface-card: #fff;
    --mol-border: #bab0fc;
    --mol-shadow: 0 2px 12px #6252d026;
    --mol-shadow-hover: 0 6px 24px #6252d04d;
    --mol-text: #1a1730;
    --mol-text-muted: #6b6490;
    --mol-font-en: "Roboto", sans-serif;
    --mol-font-ar: "Noto Kufi Arabic", sans-serif;
    --mol-accent: #f59e0b;
    --mol-accent-dark: #d97706;
    --mol-btn-text: #fff;
    --mol-focus-ring: #7662fa;
    --mol-info: #3b82f6;
    --mol-warning: #f59e0b;
    --mol-error: #ef4444
}

@layer base {
    *, :before, :after {
        box-sizing: border-box
    }

    html {
        scroll-behavior: smooth
    }

    body {
        background-color: var(--mol-bg);
        color: var(--mol-text);
        flex-direction: column;
        min-height: 100vh;
        transition: background-color .25s,color .25s;
        display: flex
    }

        [lang=en] body, body:not([lang=ar]) {
            font-family: var(--mol-font-en)
        }

    [lang=ar] body {
        font-family: var(--mol-font-ar)
    }

    html[lang=en] {
        font-family: var(--mol-font-en)
    }

    html[lang=ar] {
        font-family: var(--mol-font-ar)
    }

    html[lang=en] h1 {
        font-family: Grenze,serif
    }

    :focus-visible {
        outline: 2px solid var(--mol-focus-ring);
        outline-offset: 2px
    }

    a {
        color: var(--mol-primary)
    }

        a:hover {
            color: var(--mol-primary-dark);
            text-decoration: underline
        }
}

@layer components {
    .auth-logo {
        object-fit: contain;
        width: auto;
        max-width: 160px;
        height: 2.5rem;
        display: block
    }

    .auth-logo-sq {
        object-fit: contain;
        width: 2.5rem;
        height: 2.5rem;
        display: block
    }

    .mol-header-logo {
        object-fit: contain;
        width: auto;
        max-width: 180px;
        height: 2.75rem;
        display: block
    }

    .mol-hero-logo {
        object-fit: contain;
        width: auto;
        max-width: 240px;
        height: 3.5rem
    }

    .tajawob-logo {
        object-fit: contain;
        width: auto;
        max-width: 120px;
        height: 1.875rem
    }

    .auth-card {
        background: var(--mol-surface-card);
        border: 1px solid var(--mol-border);
        box-shadow: var(--mol-shadow);
        border-radius: 1rem;
        padding: 1.25rem 1.5rem;
        transition: box-shadow .2s,transform .2s;
        position: relative
    }

        .auth-card:hover {
            box-shadow: var(--mol-shadow-hover);
            transform: translateY(-1px)
        }

    .btn-primary {
        background-color: var(--mol-primary);
        color: var(--mol-btn-text);
        cursor: pointer;
        text-align: center;
        border: none;
        border-radius: .6rem;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        width: 100%;
        padding: .65rem 1.4rem;
        font-family: inherit;
        font-size: .95rem;
        font-weight: 600;
        transition: background-color .2s,box-shadow .2s,transform .1s;
        display: inline-flex
    }

        .btn-primary:hover {
            background-color: var(--mol-primary-dark);
            box-shadow: var(--mol-shadow-hover);
            transform: translateY(-1px)
        }

        .btn-primary:active {
            transform: translateY(0)
        }

    .btn-ghost {
        color: var(--mol-primary);
        border: 1.5px solid var(--mol-primary);
        cursor: pointer;
        background: 0 0;
        border-radius: .6rem;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: .55rem 1.2rem;
        font-family: inherit;
        font-size: .9rem;
        font-weight: 600;
        transition: background .2s,color .2s;
        display: inline-flex
    }

        .btn-ghost:hover {
            background: var(--mol-primary);
            color: #fff
        }

    .btn-icon {
        cursor: pointer;
        color: var(--mol-text);
        background: 0 0;
        border: none;
        border-radius: .5rem;
        justify-content: center;
        align-items: center;
        padding: .4rem;
        transition: background .15s;
        display: inline-flex
    }

        .btn-icon:hover {
            background: var(--mol-surface)
        }

    .dep-badge {
        color: #92400e;
        cursor: pointer;
        white-space: nowrap;
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 9999px;
        align-items: center;
        gap: .3rem;
        padding: .2rem .55rem;
        font-family: inherit;
        font-size: .72rem;
        font-weight: 700;
        transition: background .15s,box-shadow .15s;
        display: inline-flex
    }

        .dep-badge:hover {
            background: #fde68a;
            box-shadow: 0 2px 8px #0000001f
        }

    .group-sep {
        color: var(--mol-text-muted);
        letter-spacing: .04em;
        text-transform: uppercase;
        align-items: center;
        gap: .75rem;
        margin: .5rem 0;
        font-size: .8rem;
        font-weight: 600;
        display: flex
    }

        .group-sep:before, .group-sep:after {
            content: "";
            background: var(--mol-border);
            flex: 1;
            height: 1px
        }

    .msg-box {
        border: 1px solid #0000;
        border-radius: .75rem;
        align-items: flex-start;
        gap: .75rem;
        padding: .9rem 1.1rem;
        font-size: .9rem;
        line-height: 1.5;
        display: flex
    }

    .msg-box-info {
        color: #1e40af;
        background: #eff6ff;
        border-color: #bfdbfe
    }

    .msg-box-warning {
        color: #92400e;
        background: #fffbeb;
        border-color: #fde68a
    }

    .msg-box-error {
        color: #991b1b;
        background: #fef2f2;
        border-color: #fecaca
    }

    .dialog-backdrop {
        z-index: 9000;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        background: #0000008c;
        justify-content: center;
        align-items: flex-start;
        padding: 1.5rem 1rem;
        display: flex;
        position: fixed;
        inset: 0;
        overflow-y: auto
    }

    .dialog-panel {
        background: var(--mol-surface-card);
        border-radius: 1.25rem;
        width: 100%;
        max-width: 520px;
        padding: 2rem;
        animation: .2s dlg-in;
        position: relative;
        box-shadow: 0 20px 60px #00000059
    }

    @keyframes dlg-in {
        0% {
            opacity: 0;
            transform: scale(.94)translateY(-8px)
        }

        to {
            opacity: 1;
            transform: scale(1)translateY(0)
        }
    }

    .dialog-header {
        margin-bottom: 1.25rem
    }

    .dialog-title {
        color: var(--mol-text);
        margin: 0;
        font-family: inherit;
        font-size: 1.05rem;
        font-weight: 700
    }

    .dialog-body {
        margin-bottom: .5rem
    }

    .dialog-text {
        color: var(--mol-text-muted);
        margin: 0 0 .5rem;
        font-size: .875rem;
        line-height: 1.6
    }

    .dialog-footer {
        border-top: 1px solid var(--mol-border);
        gap: .625rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        display: flex
    }

        .dialog-footer .btn-primary {
            flex: 2
        }

        .dialog-footer .btn-ghost {
            flex: 1
        }

    .otp-code {
        letter-spacing: .3em;
        color: var(--mol-primary);
        text-align: center;
        background: var(--mol-surface);
        font-variant-numeric: tabular-nums;
        border-radius: .75rem;
        margin: 1rem 0;
        padding: 1rem;
        font-size: 2.5rem;
        font-weight: 700
    }

    .mpki-awaiting {
        background: var(--mol-surface);
        color: var(--mol-text-muted);
        border-radius: .6rem;
        align-items: flex-start;
        gap: .625rem;
        padding: .75rem .875rem;
        font-size: .8rem;
        line-height: 1.5;
        display: flex
    }

    .mpki-awaiting-spinner {
        border: 2px solid var(--mol-primary-muted);
        border-top-color: var(--mol-primary);
        border-radius: 50%;
        flex-shrink: 0;
        width: 1.1rem;
        height: 1.1rem;
        margin-top: .1rem;
        animation: .75s linear infinite spin
    }

    .loading-overlay {
        z-index: 9999;
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
        background: #00000073;
        justify-content: center;
        align-items: center;
        display: flex;
        position: fixed;
        inset: 0
    }

        .loading-overlay[hidden] {
            display: none
        }

    .spinner {
        border: 5px solid var(--mol-primary-muted);
        border-top-color: var(--mol-primary);
        border-radius: 50%;
        width: 52px;
        height: 52px;
        animation: .75s linear infinite spin
    }

    @keyframes spin {
        to {
            transform: rotate(360deg)
        }
    }

    .mol-input {
        background: var(--mol-bg);
        width: 100%;
        color: var(--mol-text);
        border: 1.5px solid var(--mol-border);
        text-align: start;
        border-radius: .6rem;
        padding: .6rem .9rem;
        font-family: inherit;
        font-size: .95rem;
        transition: border-color .2s,box-shadow .2s
    }

    [dir=rtl] .mol-input[type=tel], [dir=rtl] .mol-input[type=number] {
        direction: rtl
    }

    .mol-input:focus {
        border-color: var(--mol-primary);
        box-shadow: 0 0 0 3px rgba(var(--mol-primary-rgb,98,82,208), .2);
        outline: none
    }

    .mol-input-error {
        border-color: var(--mol-error)
    }

        .mol-input-error:focus {
            border-color: var(--mol-error);
            box-shadow: 0 0 0 3px #ef444433
        }

    .date-part-group {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .75rem;
        display: flex
    }

        .date-part-group > .floating-field:not(.month-combo) {
            flex: 5rem;
            min-width: 4.5rem
        }

        .date-part-group > .month-combo {
            flex: 2 9rem;
            min-width: 8rem
        }

    .floating-field {
        position: relative
    }

    .floating-input {
        background: var(--mol-bg);
        width: 100%;
        color: var(--mol-text);
        border: 1.5px solid var(--mol-border);
        text-align: start;
        border-radius: .6rem;
        padding: 1.4rem .9rem .45rem;
        font-family: inherit;
        font-size: .95rem;
        transition: border-color .2s,box-shadow .2s
    }

        .floating-input:focus {
            border-color: var(--mol-primary);
            box-shadow: 0 0 0 3px rgba(var(--mol-primary-rgb,98,82,208), .2);
            outline: none
        }

    .floating-label {
        color: var(--mol-text-muted);
        pointer-events: none;
        letter-spacing: .01em;
        top: .4rem;
        background: 0 0;
        font-size: .68rem;
        font-weight: 600;
        position: absolute;
        inset-inline-start: .9rem
    }

    .floating-field.is-invalid .floating-input {
        border-color: var(--mol-error)
    }

        .floating-field.is-invalid .floating-input:focus {
            box-shadow: 0 0 0 3px #ef444433
        }

    .floating-field.is-invalid .floating-label {
        color: var(--mol-error)
    }

    .floating-field.is-valid .floating-input {
        border-color: #16a34a
    }

    .floating-field.is-valid .floating-label {
        color: #16a34a
    }

    .month-combo {
        position: relative
    }

    .month-menu {
        z-index: 30;
        background: var(--mol-surface-card);
        border: 1px solid var(--mol-border);
        max-height: 12rem;
        box-shadow: var(--mol-shadow);
        top: calc(100% + .25rem);
        border-radius: .6rem;
        margin: 0;
        padding: .25rem;
        list-style: none;
        position: absolute;
        inset-inline: 0;
        overflow-y: auto
    }

    .month-option {
        color: var(--mol-text);
        cursor: pointer;
        text-align: start;
        border-radius: .4rem;
        padding: .5rem .7rem;
        font-size: .9rem
    }

        .month-option.is-active {
            background: var(--mol-primary-muted);
            color: var(--mol-primary-dark)
        }

        .month-option[aria-selected=true] {
            font-weight: 700
        }

    .month-empty {
        color: var(--mol-text-muted);
        cursor: default
    }

    .site-header {
        background: var(--mol-surface-card);
        border-bottom: 1px solid var(--mol-border);
        box-shadow: var(--mol-shadow);
        z-index: 100;
        position: sticky;
        top: 0
    }

    .header-logo-link {
        flex-shrink: 0;
        align-items: center;
        text-decoration: none;
        display: flex
    }

    .header-controls {
        flex-shrink: 0;
        align-items: center;
        gap: .2rem;
        display: flex
    }

    .header-divider {
        background: var(--mol-border);
        opacity: .65;
        flex-shrink: 0;
        align-self: center;
        width: 1px;
        height: 1.5rem;
        display: none
    }

    .header-contact {
        flex-shrink: 0;
        align-items: center;
        gap: .75rem;
        display: flex
    }

    .page-main {
        flex-direction: column;
        flex: 1;
        align-items: stretch;
        display: flex
    }

    .signin-col {
        background: var(--mol-bg);
        order: -1;
        width: 100%;
        overflow-y: auto
    }

    .info-col {
        background: linear-gradient(135deg, var(--mol-primary-dark) 0%, var(--mol-primary) 100%);
        color: #fff;
        flex-direction: column;
        flex: 1;
        order: 1;
        justify-content: flex-start;
        min-height: 280px;
        padding: 2rem 1.5rem;
        display: flex
    }

    @media (min-width:768px) {
        .page-main {
            flex-direction: row
        }

        .info-col {
            order: -1;
            padding: 2rem 3.5rem
        }

        .signin-col {
            border-inline-start: 1px solid var(--mol-border);
            order: 1;
            width: 33.3333%
        }
    }

    .header-inner {
        direction: ltr;
        flex-direction: column;
        gap: 0;
        padding: 0;
        display: flex
    }

    .header-tier-brand {
        direction: ltr;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        padding: .6rem 1.5rem;
        width: 100%;
        display: flex
    }

    .header-tier-utils {
        direction: ltr;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        padding: .5rem 1.5rem;
        width: 100%;
        border-top: 1px solid var(--mol-border);
        background: var(--mol-bg);
        display: flex
    }

    .header-title {
        color: var(--mol-primary);
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: -.01em;
        line-height: 1.2
    }

    .header-title-hero {
        display: none
    }

    @media (min-width:768px) {
        .header-inner {
            flex-direction: row;
            align-items: center;
            gap: .75rem;
            padding: .75rem 1.5rem
        }

        .header-tier-brand {
            order: 2;
            width: auto;
            padding: 0;
            margin-inline-start: auto
        }

        .header-tier-utils {
            order: 1;
            width: auto;
            padding: 0;
            border-top: 0;
            background: transparent
        }

        .header-title {
            display: none
        }

        .header-divider {
            display: block
        }

        .header-title-hero {
            display: block
        }
    }

    .info-panel {
        background: linear-gradient(135deg, var(--mol-primary-dark) 0%, var(--mol-primary) 100%);
        color: #fff;
        min-height: 100%
    }

    .signin-panel {
        background: var(--mol-bg);
        overflow-y: auto
    }

    .manual-link {
        color: var(--mol-text-muted);
        align-items: center;
        gap: .3rem;
        margin-top: .35rem;
        font-size: .82rem;
        text-decoration: none;
        transition: color .15s;
        display: inline-flex
    }

        .manual-link:hover {
            color: var(--mol-primary);
            text-decoration: underline
        }

    .social-link {
        background: var(--mol-surface);
        width: 2.2rem;
        height: 2.2rem;
        color: var(--mol-text-muted);
        border-radius: .5rem;
        justify-content: center;
        align-items: center;
        transition: background .2s,color .2s;
        display: inline-flex
    }

        .social-link:hover {
            background: var(--mol-primary);
            color: #fff
        }

    .ms-signin-btn {
        color: #5e5e5e;
        cursor: pointer;
        background: #fff;
        border: 1px solid #8c8c8c;
        border-radius: .25rem;
        justify-content: center;
        align-items: center;
        gap: .75rem;
        width: 100%;
        padding: .6rem 1.2rem;
        font-family: Roboto,sans-serif;
        font-size: .9rem;
        font-weight: 500;
        transition: background .15s,box-shadow .15s;
        display: inline-flex
    }

        .ms-signin-btn:hover {
            background: #f3f3f3;
            box-shadow: 0 2px 8px #0000001f
        }

    .signin-tabs {
        border-bottom: 2px solid var(--mol-border);
        gap: 0;
        display: flex
    }

    .signin-tab {
        cursor: pointer;
        color: var(--mol-text-muted);
        text-align: center;
        background: 0 0;
        border: none;
        border-bottom: 2px solid #0000;
        flex: 1;
        margin-bottom: -2px;
        padding: .6rem .5rem;
        font-family: inherit;
        font-size: .75rem;
        font-weight: 600;
        line-height: 1.3;
        transition: color .15s,border-color .15s,background .15s
    }

        .signin-tab:hover {
            color: var(--mol-primary);
            background: var(--mol-surface)
        }

        .signin-tab-active, .signin-tab[aria-selected=true] {
            color: var(--mol-primary);
            border-bottom-color: var(--mol-primary)
        }

    a.btn-primary, a.btn-ghost {
        text-decoration: none
    }

    .welcome-bar {
        background: var(--mol-surface);
        border-bottom: 1px solid var(--mol-border);
        box-shadow: 0 1px 3px #0000000f
    }

    .welcome-bar-inner {
        justify-content: flex-end;
        align-items: center;
        padding: .6rem 1.5rem;
        display: flex
    }

    .welcome-user {
        align-items: center;
        display: inline-flex;
        position: relative
    }

    .welcome-trigger {
        cursor: pointer;
        color: var(--mol-text);
        background: 0 0;
        border: none;
        border-radius: .625rem;
        align-items: center;
        gap: .55rem;
        padding: .3rem .55rem;
        font-family: inherit;
        font-size: .875rem;
        transition: background .15s;
        display: inline-flex
    }

        .welcome-trigger:hover {
            background: var(--mol-surface)
        }

    .user-avatar {
        background: linear-gradient(135deg, var(--mol-primary-dark), var(--mol-primary));
        color: #fff;
        border-radius: 50%;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: 2.25rem;
        height: 2.25rem;
        display: flex
    }

    .welcome-label {
        color: var(--mol-text-muted);
        line-height: 1.2
    }

        .welcome-label strong {
            color: var(--mol-text);
            font-weight: 600
        }

    .welcome-chevron {
        width: .85rem;
        height: .85rem;
        color: var(--mol-text-muted);
        flex-shrink: 0;
        transition: transform .2s
    }

    .user-menu {
        background: var(--mol-surface-card);
        border: 1px solid var(--mol-border);
        z-index: 200;
        top: calc(100% + .5rem);
        border-radius: .75rem;
        min-width: 14rem;
        position: absolute;
        inset-inline-end: 0;
        overflow: hidden;
        box-shadow: 0 8px 30px #00000026
    }

    .user-menu-item {
        color: var(--mol-text);
        cursor: pointer;
        text-align: start;
        background: 0 0;
        border: none;
        align-items: center;
        gap: .625rem;
        width: 100%;
        padding: .7rem 1rem;
        font-family: inherit;
        font-size: .875rem;
        line-height: 1.3;
        text-decoration: none;
        transition: background .15s,color .15s;
        display: flex
    }

        .user-menu-item:hover {
            background: var(--mol-surface);
            color: var(--mol-primary);
            text-decoration: none
        }

    .user-menu-signout:hover {
        color: var(--mol-error)
    }

    .portal-grid {
        grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
        gap: 1.25rem;
        display: grid
    }

    .portal-card {
        background: var(--mol-surface-card);
        border: 1px solid var(--mol-border);
        box-shadow: var(--mol-shadow);
        border-radius: 1rem;
        flex-direction: column;
        transition: box-shadow .2s,transform .2s,border-color .2s;
        display: flex;
        overflow: hidden
    }

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

    .portal-thumb {
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        height: 9rem;
        display: flex
    }

    .portal-card-body {
        flex-direction: column;
        flex: 1;
        gap: .5rem;
        padding: 1.25rem 1.5rem;
        display: flex
    }

    .portal-card-title {
        color: var(--mol-text);
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3
    }

    .portal-card-desc {
        color: var(--mol-text-muted);
        flex: 1;
        margin: 0;
        font-size: .82rem;
        line-height: 1.6
    }

    .reg-page-main {
        flex-direction: column;
        flex: 1;
        align-items: center;
        padding: 1.25rem 1.5rem 2rem;
        display: flex
    }

    .reg-container {
        width: 100%;
        max-width: 680px
    }

    .reg-card {
        background: var(--mol-surface-card);
        border: 1px solid var(--mol-border);
        box-shadow: var(--mol-shadow);
        border-radius: 1rem;
        padding: 1.25rem
    }

    .reg-card-header {
        border-bottom: 1px solid var(--mol-border);
        margin-bottom: 1rem;
        padding-bottom: .875rem
    }

    .reg-card-title {
        color: var(--mol-text);
        margin: 0 0 .4rem;
        font-family: inherit;
        font-size: 1.1rem;
        font-weight: 700
    }

    .reg-card-desc {
        color: var(--mol-text-muted);
        margin: 0;
        font-size: .875rem;
        line-height: 1.6
    }

    .reg-field {
        margin-bottom: .75rem
    }

    .reg-label {
        color: var(--mol-text-muted);
        letter-spacing: .01em;
        margin-bottom: .35rem;
        font-size: .8rem;
        font-weight: 600;
        display: block
    }

        .reg-label .req {
            color: var(--mol-error);
            margin-inline-start: 2px
        }

    .ro-field {
        background: var(--mol-surface);
        border: 1.5px solid var(--mol-border);
        color: var(--mol-text);
        border-radius: .6rem;
        align-items: center;
        gap: .5rem;
        padding: .6rem .9rem;
        font-size: .95rem;
        line-height: 1.4;
        display: flex
    }

    .ro-verified {
        color: #16a34a;
        flex-shrink: 0
    }

    .ro-sub {
        color: var(--mol-text-muted);
        margin-inline-start: .15rem;
        font-size: .75rem
    }

    .reg-two-col {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: .875rem;
        display: grid
    }

        .reg-two-col.reg-two-col-stacked {
            grid-template-columns: 1fr
        }

    @media (max-width:520px) {
        .reg-two-col {
            grid-template-columns: 1fr
        }
    }

    .reg-divider {
        background: var(--mol-border);
        height: 1px;
        margin: .75rem 0
    }

    .verify-row {
        gap: .5rem;
        display: flex
    }

        .verify-row .mol-input {
            flex: 1;
            min-width: 0
        }

    .btn-send {
        cursor: pointer;
        white-space: nowrap;
        border: 1.5px solid var(--mol-border);
        background: var(--mol-surface-card);
        color: var(--mol-text);
        border-radius: .6rem;
        flex-shrink: 0;
        padding: .6rem .85rem;
        font-family: inherit;
        font-size: .85rem;
        font-weight: 600;
        transition: background .15s,border-color .15s
    }

        .btn-send:hover:not(:disabled) {
            background: var(--mol-surface);
            border-color: var(--mol-primary);
            color: var(--mol-primary)
        }

        .btn-send:disabled {
            opacity: .4;
            cursor: not-allowed
        }

    .req-badge {
        color: #92400e;
        background: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: 9999px;
        align-items: center;
        gap: .35rem;
        margin-top: .5rem;
        padding: .25rem .65rem;
        font-size: .75rem;
        display: inline-flex
    }

    .otp-wrap {
        background: var(--mol-surface);
        border: 1px solid var(--mol-border);
        border-radius: .75rem;
        margin-top: .75rem;
        padding: 1rem
    }

    .otp-label {
        color: var(--mol-text-muted);
        margin-bottom: .625rem;
        font-size: .82rem;
        line-height: 1.5
    }

    .otp-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: .625rem;
        display: flex
    }

    .otp-input {
        letter-spacing: .2em;
        text-align: center;
        max-width: 140px;
        font-size: 1.1rem
    }

    .countdown {
        color: var(--mol-text-muted);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        font-size: .8rem
    }

    .countdown-expired {
        color: var(--mol-error)
    }

    .resend-btn {
        cursor: pointer;
        color: var(--mol-primary);
        background: 0 0;
        border: none;
        padding: 0;
        font-family: inherit;
        font-size: .8rem;
        text-decoration: underline;
        transition: color .15s
    }

        .resend-btn:disabled {
            color: var(--mol-text-muted);
            cursor: not-allowed;
            text-decoration: none
        }

    .field-hint {
        color: var(--mol-text-muted);
        align-items: center;
        gap: .3rem;
        margin-top: .35rem;
        font-size: .78rem;
        display: flex
    }

    .field-error {
        color: var(--mol-error);
        margin-top: .3rem;
        font-size: .78rem;
        line-height: 1.4
    }

    .field-success {
        color: #16a34a;
        margin-top: .3rem;
        font-size: .78rem;
        line-height: 1.4
    }

    .field-warning-banner {
        color: #92400e;
        background: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: .5rem;
        align-items: flex-start;
        gap: .4rem;
        margin-bottom: .5rem;
        padding: .5rem .75rem;
        font-size: .82rem;
        line-height: 1.5;
        display: flex
    }

    .btn-primary:disabled {
        opacity: .4;
        cursor: not-allowed;
        transform: none
    }

    .mol-input-ok {
        border-color: #16a34a
    }

        .mol-input-ok:focus {
            border-color: #16a34a;
            box-shadow: 0 0 0 3px #16a34a2e
        }

    .reg-actions {
        border-top: 1px solid var(--mol-border);
        gap: .75rem;
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        display: flex
    }

        .reg-actions .btn-primary {
            flex: 2
        }

        .reg-actions .btn-ghost {
            flex: 1
        }

    .reg-notif {
        border: 1px solid #0000;
        border-radius: .75rem;
        align-items: flex-start;
        gap: .625rem;
        margin-bottom: .5rem;
        padding: .75rem 1rem;
        font-size: .875rem;
        line-height: 1.5;
        display: flex
    }

    .reg-notif-info {
        color: #1e40af;
        background: #eff6ff;
        border-color: #bfdbfe
    }

    .reg-notif-warning {
        color: #92400e;
        background: #fffbeb;
        border-color: #fde68a
    }

    .reg-notif-error {
        color: #991b1b;
        background: #fef2f2;
        border-color: #fecaca
    }

    .reg-notif-success {
        color: #166534;
        background: #f0fdf4;
        border-color: #bbf7d0
    }

    .reg-notif-dismiss {
        color: inherit;
        cursor: pointer;
        opacity: .65;
        background: 0 0;
        border: none;
        flex-shrink: 0;
        margin-inline-start: auto;
        padding: 0;
        font-family: inherit;
        font-size: 1rem;
        line-height: 1
    }

        .reg-notif-dismiss:hover {
            opacity: 1
        }

    .prof-page-main {
        flex-direction: column;
        flex: 1;
        align-items: center;
        padding: 2rem 1.5rem 3rem;
        display: flex
    }

    .prof-container {
        width: 100%;
        max-width: 760px
    }

    .prof-section {
        background: var(--mol-surface-card);
        border: 1px solid var(--mol-border);
        box-shadow: var(--mol-shadow);
        border-radius: 1rem;
        margin-bottom: 1.5rem;
        overflow: hidden
    }

        .prof-section:last-child {
            margin-bottom: 0
        }

    .prof-section-header {
        border-bottom: 1px solid var(--mol-border);
        background: var(--mol-surface);
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .9rem 1.5rem;
        display: flex
    }

    .prof-section-title {
        color: var(--mol-text);
        margin: 0;
        font-family: inherit;
        font-size: .95rem;
        font-weight: 700
    }

    .prof-section-body {
        padding: 1.5rem
    }

    .prof-field-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem 1.5rem;
        display: grid
    }

    @media (max-width:560px) {
        .prof-field-grid {
            grid-template-columns: 1fr
        }
    }

    .prof-field-full {
        grid-column: 1/-1
    }

    .prof-field {
        flex-direction: column;
        gap: .3rem;
        display: flex
    }

    .prof-label {
        color: var(--mol-text-muted);
        letter-spacing: .01em;
        align-items: center;
        gap: .3rem;
        font-size: .76rem;
        font-weight: 600;
        display: flex
    }

    .prof-value {
        color: var(--mol-text);
        padding: .35rem 0;
        font-size: .95rem;
        font-weight: 600;
        line-height: 1.4
    }

    .prof-value-muted {
        color: var(--mol-text-muted);
        font-weight: 400
    }

    .ver-icon {
        cursor: help;
        flex-shrink: 0;
        align-items: center;
        display: inline-flex;
        position: relative
    }

    .ver-icon-verified {
        color: #16a34a
    }

    .ver-icon-unverified {
        color: var(--mol-warning)
    }

    .prof-contact-row {
        align-items: center;
        gap: .75rem;
        min-width: 0;
        padding: .2rem 0;
        font-size: .95rem;
        display: flex
    }

    .prof-contact-value {
        color: var(--mol-text);
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
        font-weight: 600;
        overflow: hidden
    }

    .prof-update-btn {
        cursor: pointer;
        white-space: nowrap;
        border: 1.5px solid var(--mol-primary);
        color: var(--mol-primary);
        background: 0 0;
        border-radius: .45rem;
        flex-shrink: 0;
        padding: .28rem .7rem;
        font-family: inherit;
        font-size: .8rem;
        font-weight: 600;
        transition: background .15s,color .15s
    }

        .prof-update-btn:hover {
            background: var(--mol-primary);
            color: #fff
        }

    .prof-address-update {
        border-top: 1px solid var(--mol-border);
        justify-content: flex-end;
        margin-top: 1.25rem;
        padding-top: 1.1rem;
        display: flex
    }

    .prof-map {
        background: var(--mol-surface);
        border: 1.5px solid var(--mol-border);
        height: 160px;
        color: var(--mol-text-muted);
        border-radius: .75rem;
        flex-direction: column;
        grid-column: 1/-1;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        margin-top: .75rem;
        font-size: .82rem;
        display: flex
    }

    .prof-coords {
        color: var(--mol-text-muted);
        font-variant-numeric: tabular-nums;
        flex-wrap: wrap;
        grid-column: 1/-1;
        align-items: center;
        gap: .25rem;
        margin-top: .5rem;
        font-size: .78rem;
        display: flex
    }

        .prof-coords strong {
            color: var(--mol-text);
            font-weight: 600
        }

    .prof-coords-sep {
        opacity: .4;
        margin-inline: .3rem
    }

    .addr-map-toggle {
        width: 100%;
        color: var(--mol-primary);
        cursor: pointer;
        text-align: start;
        background: 0 0;
        border: none;
        align-items: center;
        gap: .35rem;
        padding: .4rem 0;
        font-family: inherit;
        font-size: .82rem;
        font-weight: 600;
        transition: opacity .15s;
        display: inline-flex
    }

        .addr-map-toggle:hover {
            opacity: .7
        }

    .addr-map-section {
        border: 1.5px solid var(--mol-border);
        border-radius: .6rem;
        margin-top: .35rem;
        overflow: hidden
    }

    .addr-map-ph {
        background: var(--mol-surface);
        height: 110px;
        color: var(--mol-text-muted);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: .4rem;
        font-size: .78rem;
        display: flex
    }

    .addr-coord-inputs {
        border-top: 1px solid var(--mol-border);
        background: var(--mol-surface-card);
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
        padding: .6rem .75rem;
        display: grid
    }

    .lang-pref-option {
        border: 1.5px solid var(--mol-border);
        cursor: pointer;
        border-radius: .6rem;
        align-items: center;
        gap: .75rem;
        margin-bottom: .625rem;
        padding: .75rem 1rem;
        font-size: .9rem;
        transition: border-color .15s,background .15s;
        display: flex
    }

        .lang-pref-option:last-child {
            margin-bottom: 0
        }

        .lang-pref-option:hover {
            border-color: var(--mol-primary);
            background: var(--mol-surface)
        }

        .lang-pref-option input[type=radio] {
            accent-color: var(--mol-primary);
            width: 1.1rem;
            height: 1.1rem
        }

        .lang-pref-option.lang-selected {
            border-color: var(--mol-primary);
            background: var(--mol-surface)
        }

    .addr-field-grid {
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
        display: grid
    }

    @media (max-width:520px) {
        .addr-field-grid {
            grid-template-columns: 1fr
        }
    }

    .addr-field-full {
        grid-column: 1/-1
    }

    .prof-notif-stack {
        margin-bottom: 1rem
    }

    .prof-back-link {
        color: var(--mol-primary);
        align-items: center;
        gap: .35rem;
        margin-bottom: .875rem;
        padding: .2rem 0;
        font-size: .875rem;
        font-weight: 600;
        text-decoration: none;
        transition: opacity .15s;
        display: inline-flex
    }

        .prof-back-link:hover {
            opacity: .7
        }

    [dir=rtl] .prof-back-icon {
        transform: scaleX(-1)
    }

    .prof-dialog-actions {
        border-top: 1px solid var(--mol-border);
        gap: .625rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        display: flex
    }

        .prof-dialog-actions .btn-primary {
            flex: 2
        }

        .prof-dialog-actions .btn-ghost {
            flex: 1
        }

    .error-main {
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 3rem 1.5rem
    }

    .error-card {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        width: 100%;
        max-width: 36rem;
        display: flex
    }

    .error-icon-wrap {
        justify-content: center;
        align-items: center;
        width: 10rem;
        height: 7rem;
        display: flex;
        position: relative
    }

    .error-code-bg {
        color: var(--mol-primary);
        opacity: .12;
        -webkit-user-select: none;
        user-select: none;
        letter-spacing: -.02em;
        font-size: clamp(4rem,15vw,7rem);
        font-weight: 800;
        line-height: 1;
        position: absolute
    }

    .error-icon {
        z-index: 1;
        flex-shrink: 0;
        width: 5rem;
        height: 5rem;
        position: relative
    }

    .error-title {
        color: var(--mol-text);
        margin: 0;
        font-family: inherit;
        font-size: clamp(1.4rem,4vw,2rem);
        font-weight: 700;
        line-height: 1.2
    }

    .error-body {
        color: var(--mol-text-muted);
        max-width: 34rem;
        margin: 0;
        font-size: 1rem;
        line-height: 1.7
    }

    .error-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: .75rem;
        display: flex
    }

        .error-actions .btn-primary, .error-actions .btn-ghost {
            width: auto;
            min-width: 200px
        }

    .error-contact {
        color: var(--mol-text-muted);
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        font-size: .95rem;
        display: flex
    }

        .error-contact a {
            color: var(--mol-primary);
            font-weight: 700;
            text-decoration: none
        }

            .error-contact a:hover {
                text-decoration: underline
            }
}

@layer utilities {
    .text-mol-primary {
        color: var(--mol-primary)
    }

    .text-mol-muted {
        color: var(--mol-text-muted)
    }

    .bg-mol-surface {
        background-color: var(--mol-surface)
    }

    .bg-mol-card {
        background-color: var(--mol-surface-card)
    }

    .border-mol {
        border-color: var(--mol-border)
    }

    .shadow-mol {
        box-shadow: var(--mol-shadow)
    }

    .shadow-mol-hover {
        box-shadow: var(--mol-shadow-hover)
    }
}

.sync-status-banner {
    border: 1px solid #0000;
    border-radius: .75rem;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: .75rem;
    padding: .875rem 1rem;
    font-size: .875rem;
    line-height: 1.55;
    display: flex
}

.sync-status-inprogress {
    color: #1e40af;
    background: #eff6ff;
    border-color: #bfdbfe
}

.sync-status-error {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca
}

.sync-status-warning {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a
}

.sync-spinner {
    border: 2px solid;
    border-top-color: #0000;
    border-radius: 50%;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: .15rem;
    animation: .7s linear infinite spin
}

#mol-toast-container {
    z-index: 9999;
    pointer-events: none;
    flex-direction: column;
    gap: .45rem;
    width: min(22rem,100vw - 2.5rem);
    display: flex;
    position: fixed;
    top: 1.25rem;
    right: 1.25rem
}

[dir=rtl] #mol-toast-container {
    left: 1.25rem;
    right: auto
}

.mol-toast {
    background: var(--mol-surface-card);
    pointer-events: all;
    color: var(--mol-text);
    opacity: 0;
    word-break: break-word;
    border-inline-start: 3px solid #0000;
    border-radius: .6rem;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem 1rem;
    font-family: inherit;
    font-size: .84rem;
    line-height: 1.45;
    transition: opacity .22s,transform .22s;
    display: flex;
    transform: translate(1.5rem);
    box-shadow: 0 4px 20px #00000021,0 1px 4px #0000000f
}

.mol-toast-in {
    opacity: 1;
    transform: translate(0)
}

.mol-toast-out {
    opacity: 0;
    transition: opacity .18s,transform .18s;
    transform: translate(1.5rem)
}

[dir=rtl] .mol-toast, [dir=rtl] .mol-toast-out {
    transform: translate(-1.5rem)
}

.mol-toast-success {
    border-inline-start-color: #16a34a
}

.mol-toast-error {
    border-inline-start-color: var(--mol-error,#dc2626)
}

.mol-toast-warning {
    border-inline-start-color: var(--mol-accent)
}

.mol-toast-info {
    border-inline-start-color: var(--mol-primary)
}

.mol-toast-icon {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .15rem
}

.mol-toast-success .mol-toast-icon {
    color: #16a34a
}

.mol-toast-error .mol-toast-icon {
    color: var(--mol-error,#dc2626)
}

.mol-toast-warning .mol-toast-icon {
    color: var(--mol-accent)
}

.mol-toast-info .mol-toast-icon {
    color: var(--mol-primary)
}

.mol-toast-msg {
    flex: 1
}

.mol-toast-close {
    cursor: pointer;
    color: var(--mol-text-muted);
    margin-inline-start: .15rem;
    background: 0 0;
    border: none;
    border-radius: .25rem;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-top: .05rem;
    padding: .15rem;
    font-family: inherit;
    transition: color .12s,background .12s;
    display: flex
}

    .mol-toast-close:hover {
        color: var(--mol-text);
        background: var(--mol-surface)
    }

@media (max-width:480px) {
    #mol-toast-container {
        width: auto;
        top: .75rem;
        left: .75rem;
        right: .75rem
    }

    [dir=rtl] #mol-toast-container {
        left: .75rem;
        right: .75rem
    }
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}