/* =========================================================
   YEOPPEO MAIL — iOS GLASS UI
   Responsive desktop / tablet / phone
========================================================= */

:root {
    --bg: #eef4ff;
    --bg-secondary: #f7f9fd;

    --surface: rgba(255, 255, 255, .66);
    --surface-strong: rgba(255, 255, 255, .88);
    --surface-soft: rgba(255, 255, 255, .46);

    --border: rgba(255, 255, 255, .76);
    --border-soft: rgba(85, 105, 135, .12);

    --text: #16181d;
    --text-secondary: #6f7785;
    --text-muted: #979eaa;

    --accent: #0a84ff;
    --accent-2: #4f46e5;
    --accent-soft: rgba(10, 132, 255, .11);

    --danger: #ff453a;
    --success: #30d158;

    --shadow-lg:
        0 30px 70px rgba(40, 62, 95, .16),
        0 2px 8px rgba(30, 55, 90, .06);

    --shadow-md:
        0 12px 35px rgba(40, 62, 95, .12);

    --shadow-sm:
        0 6px 18px rgba(40, 62, 95, .08);

    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;

    --sidebar-width: 270px;
    --topbar-height: 82px;

    --ease:
        cubic-bezier(.2, .75, .25, 1);

    color-scheme: light;
}


html.dark {
    --bg: #090c12;
    --bg-secondary: #0f141d;

    --surface: rgba(25, 31, 42, .66);
    --surface-strong: rgba(24, 29, 39, .92);
    --surface-soft: rgba(32, 39, 53, .54);

    --border: rgba(255, 255, 255, .09);
    --border-soft: rgba(255, 255, 255, .07);

    --text: #f6f7fb;
    --text-secondary: #aab2c0;
    --text-muted: #767f8e;

    --accent: #0a84ff;
    --accent-2: #8b5cf6;
    --accent-soft: rgba(10, 132, 255, .16);

    --shadow-lg:
        0 34px 90px rgba(0, 0, 0, .46),
        0 2px 10px rgba(0, 0, 0, .24);

    --shadow-md:
        0 14px 40px rgba(0, 0, 0, .34);

    --shadow-sm:
        0 8px 20px rgba(0, 0, 0, .24);

    color-scheme: dark;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        Inter,
        Helvetica,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(51, 153, 255, .20),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(146, 96, 255, .17),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            var(--bg),
            var(--bg-secondary)
        );

    color: var(--text);

    overflow-x: hidden;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

svg {
    display: block;
}

::selection {
    background: rgba(10, 132, 255, .2);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;

    background:
        rgba(100, 110, 130, .26);

    background-clip:
        padding-box;
}


/* =========================================================
   BACKGROUND
========================================================= */

.ambient {
    position: fixed;
    z-index: -1;

    border-radius: 999px;

    filter: blur(28px);

    pointer-events: none;

    opacity: .72;
}

.ambient-one {
    top: -180px;
    left: -140px;

    width: 520px;
    height: 520px;

    background:
        radial-gradient(
            circle,
            rgba(0, 122, 255, .38),
            transparent 68%
        );
}

.ambient-two {
    right: -180px;
    top: 80px;

    width: 560px;
    height: 560px;

    background:
        radial-gradient(
            circle,
            rgba(120, 85, 255, .27),
            transparent 70%
        );
}

.ambient-three {
    left: 38%;
    bottom: -250px;

    width: 600px;
    height: 600px;

    background:
        radial-gradient(
            circle,
            rgba(80, 190, 255, .16),
            transparent 70%
        );
}


/* =========================================================
   COMMON GLASS
========================================================= */

.glass {
    background: var(--surface);

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow-lg);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(165%);

    backdrop-filter:
        blur(28px)
        saturate(165%);
}


/* =========================================================
   ICONS
========================================================= */

.icon {
    width: 21px;
    height: 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
}

.icon svg {
    width: 100%;
    height: 100%;

    stroke: currentColor;
    stroke-width: 1.85;

    stroke-linecap: round;
    stroke-linejoin: round;

    fill: none;
}

.row-star svg,
.viewer-actions .active svg {
    fill: currentColor;
}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell {
    width:
        min(
            1600px,
            calc(100% - 28px)
        );

    min-height:
        calc(100vh - 28px);

    min-height:
        calc(100dvh - 28px);

    margin: 14px auto;

    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);

    gap: 14px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    position: relative;

    height:
        calc(100vh - 28px);

    height:
        calc(100dvh - 28px);

    padding: 20px 16px;

    border-radius:
        var(--radius-xl);

    display: flex;
    flex-direction: column;

    overflow: visible;
}

.brand-row {
    min-height: 54px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 7px;
}

.brand-mark {
    width: 44px;
    height: 44px;

    border-radius: 15px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    font-size: 20px;
    font-weight: 800;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #1677ff,
            #7c3aed
        );

    box-shadow:
        0 12px 28px
        rgba(57, 80, 220, .28);
}

.brand-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.brand-copy strong {
    font-size: 16px;
    letter-spacing: -.25px;
}

.brand-copy span {
    font-size: 12px;
    color: var(--text-muted);
}

.compose-primary {
    width: 100%;

    margin: 24px 0 18px;

    padding: 14px 18px;

    border: 0;
    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    font-weight: 700;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #1588ff,
            #4d62ed
        );

    box-shadow:
        0 14px 30px
        rgba(10, 132, 255, .23);

    cursor: pointer;

    transition:
        transform .2s var(--ease),
        box-shadow .2s var(--ease);
}

.compose-primary:hover {
    transform: translateY(-1px);

    box-shadow:
        0 18px 34px
        rgba(10, 132, 255, .29);
}

.compose-primary:active {
    transform: scale(.985);
}

.folder-nav {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.folder-item,
.sidebar-link {
    min-height: 46px;

    padding: 0 13px;

    border: 0;
    border-radius: 15px;

    display: flex;
    align-items: center;

    gap: 12px;

    background: transparent;

    color: var(--text-secondary);

    font-size: 14px;
    font-weight: 590;

    cursor: pointer;

    transition:
        .18s var(--ease);
}

.folder-item:hover,
.sidebar-link:hover {
    color: var(--text);

    background:
        rgba(127, 146, 178, .08);
}

.folder-item.active {
    color: var(--accent);

    background:
        var(--accent-soft);

    font-weight: 700;
}

.folder-label {
    flex: 1;

    text-align: left;
}

.folder-count {
    min-width: 24px;

    padding: 3px 7px;

    border-radius: 999px;

    text-align: center;

    font-size: 11px;
    font-weight: 800;

    color: var(--text-muted);

    background:
        rgba(120, 135, 160, .08);
}

.folder-item.active .folder-count {
    color: var(--accent);

    background:
        rgba(10, 132, 255, .09);
}

.sidebar-spacer {
    flex: 1;
}

.account-card {
    position: relative;

    margin-top: 10px;

    padding: 12px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 19px;

    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        34px;

    align-items: center;

    gap: 10px;

    background:
        var(--surface-soft);
}

.account-avatar,
.profile-pill,
.sender-avatar {
    display: grid;
    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #157ffc,
            #7459ee
        );
}

.account-avatar {
    width: 38px;
    height: 38px;

    border-radius: 13px;

    font-size: 14px;
    font-weight: 800;
}

.account-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.account-copy strong {
    overflow: hidden;

    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-copy span {
    overflow: hidden;

    color: var(--text-muted);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu {
    position: absolute;

    right: 4px;
    bottom: calc(100% + 10px);

    width: 210px;

    padding: 8px;

    border-radius: 17px;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(8px)
        scale(.97);

    transform-origin:
        right bottom;

    transition:
        .18s var(--ease);

    z-index: 40;
}

.account-menu.open {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

.account-menu button,
.account-menu a {
    width: 100%;

    padding: 11px;

    border: 0;
    border-radius: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: transparent;

    font-size: 13px;

    cursor: pointer;
}

.account-menu button:hover,
.account-menu a:hover {
    background:
        rgba(120, 135, 160, .1);
}


/* =========================================================
   BUTTONS
========================================================= */

.icon-button,
.toolbar-button,
.row-star,
.attach-button,
.compose-formatbar button {
    border: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--text-secondary);

    background: transparent;

    cursor: pointer;

    transition:
        .18s var(--ease);
}

.icon-button {
    width: 42px;
    height: 42px;

    border-radius: 14px;
}

.icon-button.small {
    width: 34px;
    height: 34px;
}

.icon-button:hover,
.toolbar-button:hover {
    color: var(--text);

    background:
        rgba(120, 135, 160, .1);
}

.icon-button:active,
.toolbar-button:active {
    transform: scale(.94);
}

.icon-button.danger:hover,
.toolbar-button.danger:hover {
    color: var(--danger);

    background:
        rgba(255, 69, 58, .08);
}

.soft-button {
    padding: 9px 15px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 13px;

    color: var(--text);

    background:
        var(--surface-soft);

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.soft-button.primary {
    color: #fff;

    border-color: transparent;

    background:
        linear-gradient(
            145deg,
            #1485ff,
            #5064ef
        );
}


/* =========================================================
   MAIN PANEL
========================================================= */

.main-panel {
    min-width: 0;

    height:
        calc(100vh - 28px);

    height:
        calc(100dvh - 28px);

    border-radius:
        var(--radius-xl);

    overflow: hidden;

    display: flex;
    flex-direction: column;
}

.topbar {
    min-height:
        var(--topbar-height);

    padding:
        14px
        20px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.topbar-left {
    min-width: 0;

    flex: 1;

    display: flex;
    align-items: center;

    gap: 10px;
}

.search-box {
    position: relative;

    width:
        min(
            690px,
            100%
        );

    height: 48px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 18px;

    display: flex;
    align-items: center;

    background:
        rgba(126, 145, 177, .08);

    transition:
        .2s var(--ease);
}

.search-box:focus-within {
    border-color:
        rgba(10, 132, 255, .22);

    background:
        var(--surface-soft);

    box-shadow:
        0 0 0 4px
        rgba(10, 132, 255, .07);
}

.search-icon {
    margin-left: 15px;

    color: var(--text-muted);
}

.search-box input {
    min-width: 0;

    flex: 1;

    height: 100%;

    padding: 0 12px;

    border: 0;

    outline: 0;

    color: var(--text);

    background: transparent;

    font-size: 14px;
}

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

.search-clear {
    width: 34px;
    height: 34px;

    margin-right: 7px;

    padding: 7px;

    border: 0;
    border-radius: 11px;

    display: none;

    color: var(--text-muted);

    background: transparent;

    cursor: pointer;
}

.search-clear.show {
    display: block;
}

.topbar-actions {
    display: flex;
    align-items: center;

    gap: 4px;
}

.profile-pill {
    width: 42px;
    height: 42px;

    margin-left: 4px;

    border: 0;
    border-radius: 50%;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(50, 80, 210, .18);
}


/* =========================================================
   TOOLBAR
========================================================= */

.mail-toolbar {
    min-height: 58px;

    padding:
        8px
        21px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.mail-toolbar-left,
.mail-toolbar-right {
    display: flex;
    align-items: center;

    gap: 5px;
}

.toolbar-button {
    width: 38px;
    height: 38px;

    border-radius: 12px;
}

.folder-title {
    font-size: 13px;
    font-weight: 750;
}

.toolbar-status {
    min-width: 72px;

    color: var(--text-muted);

    font-size: 12px;

    text-align: right;
}


/* =========================================================
   CHECKBOX
========================================================= */

.check-wrap {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    cursor: pointer;
}

.check-wrap input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.check-wrap span {
    width: 18px;
    height: 18px;

    border:
        1.5px solid
        rgba(110, 120, 140, .34);

    border-radius: 6px;

    display: block;

    background:
        var(--surface-soft);

    transition:
        .16s var(--ease);
}

.check-wrap input:checked + span {
    border-color: var(--accent);

    background:
        var(--accent);

    box-shadow:
        inset 0 0 0 3px
        var(--surface-strong);
}


/* =========================================================
   MAIL AREA
========================================================= */

.mail-area {
    min-height: 0;

    flex: 1;

    overflow: hidden;
}

.mail-list {
    height: 100%;

    padding: 8px 10px 16px;

    overflow-y: auto;

    transition:
        opacity .18s ease;
}

.mail-list.is-loading {
    opacity: .68;
}

.mail-row {
    position: relative;

    min-height: 84px;

    padding:
        11px
        15px
        11px
        7px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: grid;

    grid-template-columns:
        34px
        34px
        40px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    cursor: pointer;

    outline: 0;

    transition:
        background .16s ease,
        transform .16s var(--ease),
        box-shadow .16s ease,
        border-color .16s ease;
}

.mail-row:hover {
    margin:
        0
        1px;

    border-color: transparent;
    border-radius: 17px;

    background:
        rgba(126, 145, 177, .07);

    transform:
        translateY(-1px);
}

.mail-row.selected {
    border-color: transparent;
    border-radius: 17px;

    background:
        var(--accent-soft);
}

.mail-row.unread {
    background:
        rgba(255, 255, 255, .24);
}

html.dark .mail-row.unread {
    background:
        rgba(255, 255, 255, .025);
}

.mail-row.unread::before {
    content: "";

    position: absolute;

    left: 0;

    width: 4px;
    height: 34px;

    border-radius: 999px;

    background:
        var(--accent);
}

.row-star {
    width: 34px;
    height: 34px;

    padding: 8px;

    border-radius: 11px;
}

.row-star:hover {
    color: #ffb800;

    background:
        rgba(255, 184, 0, .08);
}

.row-star.active {
    color: #ffb800;
}

.sender-avatar.tiny {
    width: 36px;
    height: 36px;

    border-radius: 12px;

    font-size: 11px;
    font-weight: 850;
}

.mail-row-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.mail-row-top {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.mail-row-top strong {
    overflow: hidden;

    font-size: 13.5px;
    font-weight: 620;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-row.unread .mail-row-top strong {
    font-weight: 800;
}

.mail-row-top time {
    flex: 0 0 auto;

    color: var(--text-muted);

    font-size: 11px;
}

.mail-row-subject {
    overflow: hidden;

    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-row.unread .mail-row-subject {
    font-weight: 700;
}

.mail-row-bottom {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    color: var(--text-muted);

    font-size: 11px;
}

.mail-row-bottom > span:first-child {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-badge {
    display: inline-flex;
    align-items: center;

    gap: 3px;

    flex: 0 0 auto;

    color: var(--text-secondary);
}

.attachment-badge svg {
    width: 14px;
    height: 14px;

    stroke: currentColor;
    fill: none;
}


/* =========================================================
   EMPTY / LOADING
========================================================= */

.empty-state {
    min-height:
        calc(100% - 30px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    text-align: center;
}

.empty-icon {
    width: 70px;
    height: 70px;

    margin-bottom: 8px;

    border-radius: 24px;

    display: grid;
    place-items: center;

    color: var(--accent);

    background:
        var(--accent-soft);
}

.empty-icon svg {
    width: 30px;
    height: 30px;

    stroke: currentColor;
    fill: none;
}

.empty-state strong {
    font-size: 17px;
}

.empty-state span {
    color: var(--text-muted);

    font-size: 13px;
}

.loading-list {
    padding: 10px 6px;
}

.skeleton {
    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background:
        rgba(128, 140, 160, .10);
}

.skeleton::after {
    content: "";

    position: absolute;
    inset: 0;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.38),
            transparent
        );

    animation:
        shimmer
        1.3s
        infinite;
}

.mail-skeleton {
    height: 72px;

    margin-bottom: 8px;
}

.body-line {
    height: 18px;

    margin-bottom: 10px;
}

.body-line.short {
    width: 60%;
}

.body-block {
    height: 230px;

    margin-top: 25px;
}

@keyframes shimmer {
    100% {
        transform:
            translateX(100%);
    }
}

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

.spinning .icon {
    animation:
        spin
        .7s
        linear
        infinite;
}


/* =========================================================
   MODAL LAYER
========================================================= */

.modal-layer {
    position: fixed;
    inset: 0;

    z-index: 100;

    padding:
        clamp(
            10px,
            3vw,
            40px
        );

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(16, 22, 32, .34);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.modal-layer.open {
    opacity: 1;
    visibility: visible;
}

body.modal-open {
    overflow: hidden;
}


/* =========================================================
   MESSAGE VIEWER
========================================================= */

.mail-viewer {
    width:
        min(
            1060px,
            100%
        );

    height:
        min(
            860px,
            calc(100vh - 60px)
        );

    height:
        min(
            860px,
            calc(100dvh - 60px)
        );

    border-radius:
        28px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    opacity: 0;

    transform:
        translateY(18px)
        scale(.975);

    transition:
        .25s var(--ease);
}

.modal-layer.open .mail-viewer,
.modal-layer.open .compose-window,
.modal-layer.open .settings-window {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.viewer-toolbar {
    min-height: 62px;

    padding:
        9px
        14px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.viewer-actions {
    display: flex;
    align-items: center;

    gap: 3px;
}

.viewer-actions .active {
    color: #ffb800;
}

.viewer-scroll {
    min-height: 0;

    flex: 1;

    padding:
        22px
        30px
        32px;

    overflow-y: auto;
}

.viewer-subject {
    margin:
        4px
        0
        23px;

    font-size:
        clamp(
            22px,
            2.2vw,
            31px
        );

    line-height: 1.18;

    letter-spacing: -.7px;
}

.sender-row {
    display: grid;

    grid-template-columns:
        46px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 13px;
}

.sender-avatar {
    width: 46px;
    height: 46px;

    border-radius: 16px;

    font-size: 13px;
    font-weight: 850;
}

.sender-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.sender-name-line {
    min-width: 0;

    display: flex;
    align-items: baseline;

    gap: 6px;
}

.sender-name-line strong {
    overflow: hidden;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sender-name-line span {
    overflow: hidden;

    color: var(--text-muted);

    font-size: 11px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipient-line {
    color: var(--text-muted);

    font-size: 11px;
}

.viewer-time {
    color: var(--text-muted);

    font-size: 11px;

    white-space: nowrap;
}

.message-body {
    min-height: 280px;

    margin-top: 28px;

    padding:
        4px
        2px;

    color: var(--text);

    font-size: 14px;
    line-height: 1.65;

    overflow-wrap: anywhere;
}

.message-body img {
    max-width: 100%;

    border-radius: 12px;
}

.message-body a {
    color: var(--accent);

    text-decoration: underline;
}

.message-body table {
    max-width: 100%;
}

.message-body iframe {
    max-width: 100%;
}

.plain-body {
    white-space: normal;
}

.viewer-loading {
    padding-top: 20px;
}


/* =========================================================
   ATTACHMENTS
========================================================= */

.attachments-section {
    margin-top: 28px;

    padding-top: 20px;

    border-top:
        1px solid
        var(--border-soft);
}

.attachments-section.hidden {
    display: none;
}

.attachments-title {
    margin-bottom: 12px;

    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.attachments-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 10px;
}

.attachment-card {
    min-width: 0;

    padding: 12px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 17px;

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        32px;

    align-items: center;

    gap: 10px;

    background:
        var(--surface-soft);

    transition:
        .17s var(--ease);
}

.attachment-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(10, 132, 255, .17);

    box-shadow:
        var(--shadow-sm);
}

.attachment-file-icon {
    width: 40px;
    height: 40px;

    border-radius: 13px;

    display: grid;
    place-items: center;

    color: var(--accent);

    background:
        var(--accent-soft);
}

.attachment-file-icon svg,
.attachment-download svg {
    width: 20px;
    height: 20px;

    stroke: currentColor;
    fill: none;
}

.attachment-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.attachment-info strong {
    overflow: hidden;

    font-size: 12.5px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-info span {
    overflow: hidden;

    color: var(--text-muted);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-download {
    color: var(--text-muted);

    display: grid;
    place-items: center;
}


/* =========================================================
   COMPOSE
========================================================= */

.compose-layer {
    align-items: flex-end;
    justify-content: flex-end;
}

.compose-window {
    width:
        min(
            720px,
            calc(100vw - 40px)
        );

    max-height:
        min(
            810px,
            calc(100vh - 54px)
        );

    max-height:
        min(
            810px,
            calc(100dvh - 54px)
        );

    margin:
        0
        18px
        4px
        0;

    border-radius:
        27px;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(20px)
        scale(.975);

    transition:
        .25s var(--ease);
}

.compose-header {
    min-height: 67px;

    padding:
        10px
        17px
        10px
        20px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.compose-header > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.compose-header strong {
    font-size: 14px;
}

.compose-header span {
    color: var(--text-muted);

    font-size: 10px;
}

.compose-field {
    min-height: 50px;

    padding:
        0
        18px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 7px;
}

.compose-field > span {
    color: var(--text-muted);

    font-size: 12px;
}

.compose-field input {
    min-width: 0;
    width: 100%;

    border: 0;
    outline: 0;

    color: var(--text);

    background: transparent;

    font-size: 13px;
}

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

.text-button {
    padding:
        6px
        8px;

    border: 0;
    border-radius: 9px;

    color: var(--accent);

    background: transparent;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.compose-extra-fields {
    display: none;
}

.compose-extra-fields.show {
    display: block;
}

.compose-editor-wrap {
    min-height: 330px;

    display: flex;
    flex-direction: column;
}

.compose-formatbar {
    min-height: 44px;

    padding:
        6px
        14px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;

    gap: 4px;
}

.compose-formatbar button {
    width: 34px;
    height: 31px;

    border-radius: 10px;

    font-size: 13px;
}

.compose-formatbar button:hover {
    background:
        rgba(120, 135, 160, .10);
}

.compose-editor {
    min-height: 290px;
    max-height: 430px;

    padding:
        18px
        20px;

    outline: 0;

    font-size: 14px;
    line-height: 1.65;

    overflow-y: auto;
}

.compose-editor:empty::before {
    content:
        attr(
            data-placeholder
        );

    color:
        var(--text-muted);

    pointer-events: none;
}

.compose-attachments {
    padding:
        0
        16px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.compose-file-chip {
    max-width: 100%;

    padding:
        7px
        10px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 12px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    background:
        var(--surface-soft);

    font-size: 11px;
}

.compose-file-chip svg {
    width: 15px;
    height: 15px;

    stroke: currentColor;
    fill: none;
}

.compose-file-chip span {
    max-width: 250px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-file-chip small {
    color: var(--text-muted);
}

.compose-footer {
    min-height: 70px;

    padding:
        10px
        16px;

    border-top:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.compose-footer-left {
    display: flex;
    align-items: center;

    gap: 8px;
}

.send-button {
    height: 43px;

    padding:
        0
        17px;

    border: 0;
    border-radius: 14px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #1689ff,
            #4f62ef
        );

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(10, 132, 255, .22);
}

.send-button:disabled {
    opacity: .65;

    cursor: wait;
}

.send-button.loading .icon {
    animation:
        spin
        .8s
        linear
        infinite;
}

.attach-button {
    width: 43px;
    height: 43px;

    border-radius: 14px;

    color: var(--text-secondary);

    background:
        rgba(120, 135, 160, .08);
}

.attach-button:hover {
    color: var(--accent);

    background:
        var(--accent-soft);
}


/* =========================================================
   SETTINGS
========================================================= */

.settings-window {
    width:
        min(
            540px,
            100%
        );

    max-height:
        calc(100vh - 40px);

    max-height:
        calc(100dvh - 40px);

    border-radius:
        27px;

    overflow-y: auto;

    opacity: 0;

    transform:
        translateY(18px)
        scale(.975);

    transition:
        .25s var(--ease);
}

.settings-header {
    min-height: 70px;

    padding:
        11px
        16px
        11px
        21px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-header > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.settings-header strong {
    font-size: 16px;
}

.settings-header span {
    color: var(--text-muted);

    font-size: 11px;
}

.settings-content {
    padding: 16px;
}

.settings-card {
    min-height: 72px;

    margin-bottom: 9px;

    padding: 12px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 18px;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 11px;

    background:
        var(--surface-soft);
}

.settings-icon {
    width: 42px;
    height: 42px;

    border-radius: 14px;

    display: grid;
    place-items: center;

    color: var(--accent);

    background:
        var(--accent-soft);
}

.settings-card > div:nth-child(2) {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.settings-card strong {
    overflow: hidden;

    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-label {
    color: var(--text-muted);

    font-size: 10px;
}

.password-form {
    margin-top: 18px;

    padding-top: 16px;

    border-top:
        1px solid
        var(--border-soft);

    display: flex;
    flex-direction: column;

    gap: 11px;
}

.password-form h3 {
    margin:
        0
        0
        4px;

    font-size: 14px;
}

.password-form label {
    display: flex;
    flex-direction: column;

    gap: 6px;

    color: var(--text-secondary);

    font-size: 11px;
}

.password-form input {
    height: 44px;

    padding:
        0
        13px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 13px;

    outline: 0;

    color: var(--text);

    background:
        var(--surface-soft);
}

.password-form input:focus {
    border-color:
        rgba(10, 132, 255, .26);

    box-shadow:
        0 0 0 4px
        rgba(10, 132, 255, .07);
}

.switch {
    position: relative;

    width: 47px;
    height: 28px;

    display: inline-block;
}

.switch input {
    opacity: 0;
}

.switch span {
    position: absolute;
    inset: 0;

    border-radius: 999px;

    background:
        rgba(120, 135, 160, .24);

    cursor: pointer;

    transition:
        .18s ease;
}

.switch span::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .18);

    transition:
        .2s var(--ease);
}

.switch input:checked + span {
    background:
        var(--accent);
}

.switch input:checked + span::after {
    transform:
        translateX(19px);
}


/* =========================================================
   TOAST
========================================================= */

.toast-stack {
    position: fixed;

    top:
        calc(
            18px +
            env(safe-area-inset-top)
        );

    left: 50%;

    z-index: 300;

    display: flex;
    flex-direction: column;

    gap: 8px;

    transform:
        translateX(-50%);

    pointer-events: none;
}

.toast {
    max-width:
        min(
            90vw,
            520px
        );

    padding:
        11px
        16px;

    border:
        1px solid
        var(--border);

    border-radius: 15px;

    color: var(--text);

    background:
        var(--surface-strong);

    box-shadow:
        var(--shadow-md);

    -webkit-backdrop-filter:
        blur(24px);

    backdrop-filter:
        blur(24px);

    font-size: 12px;
    font-weight: 650;

    opacity: 0;

    transform:
        translateY(-10px)
        scale(.97);

    transition:
        .2s var(--ease);
}

.toast.show {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.toast.error {
    color: #fff;

    background:
        rgba(220, 50, 48, .90);
}

.toast.success {
    color: #fff;

    background:
        rgba(38, 170, 82, .90);
}


/* =========================================================
   MOBILE NAV
========================================================= */

.mobile-bottom-nav {
    display: none;
}

.screen-overlay {
    position: fixed;
    inset: 0;

    z-index: 79;

    background:
        rgba(10, 16, 25, .28);

    -webkit-backdrop-filter:
        blur(6px);

    backdrop-filter:
        blur(6px);

    opacity: 0;
    visibility: hidden;

    transition:
        .2s ease;
}

.screen-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   VISIBILITY HELPERS
========================================================= */

.mobile-only,
.desktop-hidden {
    display: none;
}

.error-card {
    padding: 16px;

    border:
        1px solid
        rgba(255, 69, 58, .12);

    border-radius: 14px;

    color: var(--danger);

    background:
        rgba(255, 69, 58, .07);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    :root {
        --sidebar-width: 220px;
    }

    .app-shell {
        width:
            calc(100% - 18px);

        min-height:
            calc(100vh - 18px);

        min-height:
            calc(100dvh - 18px);

        margin:
            9px
            auto;

        gap: 9px;
    }

    .sidebar,
    .main-panel {
        height:
            calc(100vh - 18px);

        height:
            calc(100dvh - 18px);
    }

    .brand-copy span {
        display: none;
    }

    .sender-name-line span {
        max-width: 220px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    :root {
        --radius-xl: 24px;
        --radius-lg: 20px;
        --topbar-height: 70px;
    }

    body {
        padding-bottom:
            calc(
                82px +
                env(safe-area-inset-bottom)
            );
    }

    .app-shell {
        width: 100%;

        min-height: 100vh;
        min-height: 100dvh;

        margin: 0;

        display: block;
    }

    .main-panel {
        width: 100%;

        height:
            calc(
                100vh -
                76px -
                env(safe-area-inset-bottom)
            );

        height:
            calc(
                100dvh -
                76px -
                env(safe-area-inset-bottom)
            );

        border: 0;
        border-radius: 0;

        background:
            rgba(255, 255, 255, .38);

        box-shadow: none;

        -webkit-backdrop-filter:
            blur(20px);

        backdrop-filter:
            blur(20px);
    }

    html.dark .main-panel {
        background:
            rgba(15, 20, 29, .50);
    }

    .sidebar {
        position: fixed;

        top:
            max(
                10px,
                env(safe-area-inset-top)
            );

        bottom:
            calc(
                88px +
                env(safe-area-inset-bottom)
            );

        left: 10px;

        z-index: 80;

        width:
            min(
                84vw,
                310px
            );

        height: auto;

        border-radius: 28px;

        opacity: 0;
        visibility: hidden;

        transform:
            translateX(-105%);

        transition:
            .25s var(--ease);
    }

    .sidebar.open {
        opacity: 1;
        visibility: visible;

        transform:
            translateX(0);
    }

    .mobile-only,
    .desktop-hidden {
        display: inline-flex;
    }

    .brand-row {
        padding: 0;
    }

    .brand-row .mobile-only {
        margin-right: 2px;
    }

    .brand-copy span {
        display: block;
    }

    .topbar {
        min-height:
            var(--topbar-height);

        padding:
            calc(
                9px +
                env(safe-area-inset-top)
            )
            11px
            9px;

        gap: 8px;
    }

    .topbar-actions {
        gap: 1px;
    }

    .topbar-actions .icon-button:first-child {
        display: none;
    }

    .profile-pill {
        width: 38px;
        height: 38px;
    }

    .search-box {
        height: 44px;

        border-radius: 16px;
    }

    .search-icon {
        margin-left: 12px;
    }

    .mail-toolbar {
        min-height: 50px;

        padding:
            6px
            10px;
    }

    .mail-toolbar-right {
        min-width: 0;
    }

    .folder-title {
        display: none;
    }

    .toolbar-status {
        min-width: auto;
    }

    .mail-list {
        padding:
            4px
            7px
            14px;
    }

    .mail-row {
        min-height: 79px;

        padding:
            10px
            8px
            10px
            3px;

        grid-template-columns:
            30px
            34px
            minmax(0, 1fr);

        gap: 7px;
    }

    .mail-row .row-checkbox {
        display: none;
    }

    .mail-row:hover {
        transform: none;
    }

    .sender-avatar.tiny {
        width: 34px;
        height: 34px;

        border-radius: 11px;
    }

    .mail-row-top strong {
        font-size: 13px;
    }

    .mail-row-subject {
        font-size: 12.5px;
    }

    .mail-row-bottom {
        font-size: 10px;
    }

    .mobile-bottom-nav {
        position: fixed;

        left: 10px;
        right: 10px;

        bottom:
            calc(
                8px +
                env(safe-area-inset-bottom)
            );

        z-index: 60;

        height: 68px;

        padding:
            7px
            8px;

        border-radius: 23px;

        display: grid;

        grid-template-columns:
            1fr
            1fr
            68px
            1fr
            1fr;

        align-items: center;

        gap: 2px;
    }

    .mobile-nav-item {
        height: 54px;

        border: 0;
        border-radius: 16px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 4px;

        color: var(--text-muted);

        background: transparent;

        font-size: 9px;
        font-weight: 700;

        cursor: pointer;
    }

    .mobile-nav-item .icon {
        width: 20px;
        height: 20px;
    }

    .mobile-nav-item.active {
        color: var(--accent);

        background:
            var(--accent-soft);
    }

    .mobile-compose {
        width: 58px;
        height: 58px;

        margin: auto;

        border: 0;
        border-radius: 20px;

        display: grid;
        place-items: center;

        color: #fff;

        background:
            linear-gradient(
                145deg,
                #1388ff,
                #5e59ea
            );

        box-shadow:
            0 12px 28px
            rgba(10, 132, 255, .28);

        transform:
            translateY(-13px);

        cursor: pointer;
    }

    .mobile-compose .icon {
        width: 24px;
        height: 24px;
    }

    .modal-layer {
        padding: 0;

        align-items: stretch;
        justify-content: stretch;

        background:
            rgba(10, 16, 25, .25);
    }

    .mail-viewer,
    .compose-window,
    .settings-window {
        width: 100%;
        height: 100%;
        max-height: none;

        margin: 0;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .mail-viewer,
    .compose-window,
    .settings-window {
        background:
            var(--surface-strong);
    }

    .viewer-toolbar,
    .compose-header,
    .settings-header {
        padding-top:
            calc(
                9px +
                env(safe-area-inset-top)
            );
    }

    .viewer-scroll {
        padding:
            16px
            17px
            calc(
                26px +
                env(safe-area-inset-bottom)
            );
    }

    .viewer-subject {
        margin-top: 8px;

        font-size: 24px;
    }

    .sender-row {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        align-items: start;
    }

    .sender-avatar {
        width: 42px;
        height: 42px;

        border-radius: 14px;
    }

    .viewer-time {
        grid-column:
            2;

        margin-top: -3px;
    }

    .sender-name-line {
        display: block;
    }

    .sender-name-line strong,
    .sender-name-line span {
        display: block;

        max-width: 100%;
    }

    .message-body {
        margin-top: 23px;

        font-size: 14px;
    }

    .attachments-grid {
        grid-template-columns: 1fr;
    }

    .compose-layer {
        align-items: stretch;
        justify-content: stretch;
    }

    .compose-editor-wrap {
        min-height: 0;

        flex: 1;
    }

    .compose-window {
        display: flex;
        flex-direction: column;
    }

    .compose-window form {
        min-height: 0;

        flex: 1;

        display: flex;
        flex-direction: column;
    }

    .compose-editor {
        min-height: 220px;
        max-height: none;

        flex: 1;
    }

    .compose-field {
        padding:
            0
            14px;

        grid-template-columns:
            49px
            minmax(0, 1fr)
            auto;
    }

    .compose-footer {
        padding-bottom:
            calc(
                10px +
                env(safe-area-inset-bottom)
            );
    }

    .settings-content {
        padding-bottom:
            calc(
                26px +
                env(safe-area-inset-bottom)
            );
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .topbar {
        padding-left: 8px;
        padding-right: 8px;
    }

    .profile-pill {
        display: none;
    }

    .mail-toolbar-left {
        gap: 1px;
    }

    .viewer-actions {
        gap: 0;
    }

    .viewer-toolbar .icon-button {
        width: 39px;
        height: 39px;
    }

    .compose-field > span {
        font-size: 11px;
    }

    .attachments-grid {
        gap: 8px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}
/* =========================================================
   LOGIN — iOS GLASS
========================================================= */

.login-page {
    min-height: 100vh;
    min-height: 100dvh;

    display: grid;
    place-items: center;

    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));

    overflow-x: hidden;
}

.login-shell {
    width:
        min(
            1180px,
            100%
        );

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(390px, .72fr);

    gap: 18px;
}

.login-showcase,
.login-card {
    border-radius: 34px;
}

.login-showcase {
    position: relative;

    min-height: 670px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.login-showcase::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -260px;
    bottom: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(10, 132, 255, .22),
            transparent 70%
        );

    pointer-events: none;
}

.login-brand {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 12px;
}

.login-brand-mark {
    width: 48px;
    height: 48px;

    border-radius: 17px;

    display: grid;
    place-items: center;

    color: #fff;

    font-size: 20px;
    font-weight: 850;

    background:
        linear-gradient(
            145deg,
            #0a84ff,
            #7c3aed
        );

    box-shadow:
        0 15px 30px
        rgba(48, 74, 220, .27);
}

.login-brand > div:last-child,
.login-mobile-brand > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.login-brand strong,
.login-mobile-brand strong {
    font-size: 15px;

    letter-spacing: -.2px;
}

.login-brand span,
.login-mobile-brand span {
    color: var(--text-muted);

    font-size: 10px;
}

.login-showcase-copy {
    position: relative;
    z-index: 2;

    margin-top: 72px;
}

.login-kicker,
.login-card-eyebrow,
.admin-kicker,
.admin-section-kicker {
    color: var(--accent);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .14em;
}

.login-showcase-copy h1 {
    max-width: 700px;

    margin:
        12px
        0
        18px;

    font-size:
        clamp(
            42px,
            5.2vw,
            72px
        );

    line-height: .99;

    letter-spacing: -3px;
}

.login-showcase-copy h1 span {
    display: inline-block;

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #0a84ff,
            #7c3aed
        );

    -webkit-background-clip: text;
    background-clip: text;
}

.login-showcase-copy p {
    max-width: 560px;

    margin: 0;

    color: var(--text-secondary);

    font-size: 15px;
    line-height: 1.7;
}

.login-preview {
    position: relative;
    z-index: 2;

    width:
        min(
            640px,
            94%
        );

    margin:
        42px
        0
        0
        auto;

    padding: 14px;

    border:
        1px solid
        var(--border);

    border-radius: 26px;

    background:
        var(--surface-soft);

    box-shadow:
        var(--shadow-md);

    transform:
        rotate(-2.5deg);
}

.login-preview-top {
    display: flex;

    gap: 6px;

    padding:
        2px
        3px
        12px;
}

.login-preview-top span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        rgba(130, 140, 160, .28);
}

.login-preview-search {
    height: 42px;

    padding:
        0
        13px;

    border-radius: 14px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--text-muted);

    background:
        rgba(125, 145, 180, .08);

    font-size: 11px;
}

.login-preview-search svg {
    width: 17px;
    height: 17px;

    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.login-preview-mail {
    min-height: 64px;

    padding:
        10px
        9px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: grid;

    grid-template-columns:
        37px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 10px;
}

.login-preview-mail.active {
    margin-top: 8px;

    border-bottom: 0;
    border-radius: 16px;

    background:
        var(--accent-soft);
}

.preview-avatar {
    width: 37px;
    height: 37px;

    border-radius: 12px;

    display: grid;
    place-items: center;

    color: #fff;

    font-size: 12px;
    font-weight: 800;

    background:
        linear-gradient(
            145deg,
            #0a84ff,
            #4e5fe8
        );
}

.preview-avatar.alt {
    background:
        linear-gradient(
            145deg,
            #8b5cf6,
            #ec4899
        );
}

.login-preview-mail > div:nth-child(2) {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.login-preview-mail strong {
    font-size: 11px;
}

.login-preview-mail span,
.login-preview-mail small {
    color: var(--text-muted);

    font-size: 9px;
}

.login-preview-mail small {
    white-space: nowrap;
}

.login-security-note {
    position: relative;
    z-index: 2;

    margin-top: auto;

    padding-top: 26px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--text-muted);

    font-size: 10px;
}

.login-security-note svg {
    width: 17px;
    height: 17px;

    stroke: var(--success);
    stroke-width: 1.8;
    fill: none;
}

.login-card {
    min-height: 670px;

    padding:
        48px
        42px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-mobile-brand {
    display: none;
}

.login-card-head {
    margin-bottom: 32px;
}

.login-card-head h2 {
    margin:
        8px
        0
        8px;

    font-size: 34px;

    letter-spacing: -1.2px;
}

.login-card-head p {
    margin: 0;

    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.6;
}

.login-form {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.ios-field {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.ios-field > span {
    padding-left: 3px;

    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 700;
}

.ios-input-wrap {
    height: 54px;

    padding:
        0
        7px
        0
        13px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 18px;

    display: grid;

    grid-template-columns:
        30px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    background:
        var(--surface-soft);

    transition:
        .18s var(--ease);
}

.ios-input-wrap:focus-within {
    border-color:
        rgba(10, 132, 255, .28);

    box-shadow:
        0 0 0 4px
        rgba(10, 132, 255, .07);

    background:
        var(--surface-strong);
}

.ios-input-icon {
    color: var(--text-muted);
}

.ios-input-icon svg,
.password-toggle svg,
.login-submit svg,
.login-error svg,
.login-theme-toggle svg {
    width: 19px;
    height: 19px;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.ios-input-wrap input {
    min-width: 0;
    width: 100%;
    height: 100%;

    border: 0;
    outline: 0;

    color: var(--text);

    background: transparent;

    font-size: 13px;
}

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

.password-toggle {
    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 13px;

    display: grid;
    place-items: center;

    color: var(--text-muted);

    background: transparent;

    cursor: pointer;
}

.password-toggle:hover {
    color: var(--accent);

    background:
        var(--accent-soft);
}

.password-toggle .eye-closed {
    display: none;
}

.password-toggle.showing .eye-open {
    display: none;
}

.password-toggle.showing .eye-closed {
    display: block;
}

.login-error {
    padding:
        11px
        13px;

    border:
        1px solid
        rgba(255, 69, 58, .13);

    border-radius: 15px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #d83a32;

    background:
        rgba(255, 69, 58, .07);

    font-size: 11px;
    line-height: 1.45;
}

.login-error svg {
    flex: 0 0 auto;
}

.login-submit {
    height: 54px;

    margin-top: 2px;

    padding:
        0
        19px;

    border: 0;
    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #0a84ff,
            #5660ec
        );

    box-shadow:
        0 14px 30px
        rgba(10, 132, 255, .25);

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        .18s var(--ease);
}

.login-submit:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 18px 35px
        rgba(10, 132, 255, .31);
}

.login-submit:active {
    transform:
        scale(.985);
}

.login-submit:disabled {
    opacity: .55;

    cursor: not-allowed;
}

.login-foot {
    margin-top: 28px;

    padding-top: 20px;

    border-top:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--text-muted);

    font-size: 10px;
}

.login-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 0 4px
        rgba(48, 209, 88, .10);
}

.login-theme-toggle {
    width: 34px;
    height: 34px;

    margin-left: auto;

    border: 0;
    border-radius: 12px;

    display: grid;
    place-items: center;

    color: var(--text-muted);

    background:
        rgba(125, 145, 180, .08);

    cursor: pointer;
}


/* =========================================================
   ADMIN — iOS GLASS
========================================================= */

.admin-page {
    min-height: 100vh;
    min-height: 100dvh;

    padding:
        14px
        max(14px, env(safe-area-inset-right))
        max(28px, env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
}

.admin-topbar {
    position: sticky;
    top: 14px;
    z-index: 50;

    width:
        min(
            1500px,
            100%
        );

    min-height: 72px;

    margin: 0 auto;

    padding:
        10px
        14px;

    border-radius: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.admin-brand {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}

.admin-brand-mark {
    width: 44px;
    height: 44px;

    border-radius: 15px;

    display: grid;
    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #0a84ff,
            #7c3aed
        );

    box-shadow:
        0 12px 25px
        rgba(60, 72, 210, .24);

    font-size: 17px;
    font-weight: 850;
}

.admin-brand-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.admin-brand-copy strong {
    overflow: hidden;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-brand-copy span {
    color: var(--text-muted);

    font-size: 9px;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-head-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}

.admin-nav-link,
.admin-theme-button,
.admin-logout {
    min-height: 40px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: var(--text-secondary);

    background:
        var(--surface-soft);

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.admin-nav-link {
    padding:
        0
        13px;
}

.admin-theme-button,
.admin-logout {
    width: 40px;

    padding: 0;
}

.admin-nav-link:hover,
.admin-theme-button:hover,
.admin-logout:hover {
    color: var(--accent);

    border-color:
        rgba(10, 132, 255, .16);

    background:
        var(--accent-soft);
}

.admin-nav-link svg,
.admin-theme-button svg,
.admin-logout svg,
.admin-stat-icon svg,
.admin-create-button svg,
.admin-search-wrap svg,
.admin-modal-icon svg,
.admin-modal-close svg {
    width: 18px;
    height: 18px;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.admin-profile {
    min-width: 0;

    padding:
        0
        5px
        0
        7px;

    display: flex;
    align-items: center;

    gap: 8px;
}

.admin-profile-avatar {
    width: 35px;
    height: 35px;

    border-radius: 12px;

    display: grid;
    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #1585ff,
            #7954ef
        );

    font-size: 11px;
    font-weight: 850;
}

.admin-profile-copy {
    max-width: 130px;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.admin-profile-copy strong {
    overflow: hidden;

    font-size: 11px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-profile-copy span {
    color: var(--text-muted);

    font-size: 9px;
}

.admin-wrap {
    width:
        min(
            1500px,
            100%
        );

    margin:
        16px
        auto
        0;

    display: flex;
    flex-direction: column;

    gap: 14px;
}

.admin-hero {
    min-height: 230px;

    padding:
        clamp(
            24px,
            4vw,
            48px
        );

    border-radius: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    overflow: hidden;
}

.admin-hero-copy {
    position: relative;
    z-index: 2;

    max-width: 760px;
}

.admin-hero h1 {
    margin:
        8px
        0
        10px;

    font-size:
        clamp(
            32px,
            4vw,
            54px
        );

    letter-spacing: -2px;
}

.admin-hero p {
    max-width: 640px;

    margin: 0;

    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.65;
}

.admin-domain-chip {
    width: fit-content;

    margin-top: 19px;

    padding:
        7px
        10px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 999px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--text-secondary);

    background:
        var(--surface-soft);

    font-size: 10px;
}

.admin-domain-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 0 4px
        rgba(48, 209, 88, .10);
}

.admin-create-button {
    min-width: 150px;

    height: 54px;

    padding:
        0
        18px;

    border: 0;
    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #0a84ff,
            #5962ec
        );

    box-shadow:
        0 15px 32px
        rgba(10, 132, 255, .24);

    font-weight: 800;

    cursor: pointer;

    transition:
        .18s var(--ease);
}

.admin-create-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 20px 38px
        rgba(10, 132, 255, .29);
}

.admin-create-icon {
    width: 25px;
    height: 25px;

    border-radius: 9px;

    display: grid;
    place-items: center;

    background:
        rgba(255, 255, 255, .16);
}

.admin-create-icon svg {
    width: 15px;
    height: 15px;
}

.stat-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.admin-stat-card {
    min-height: 116px;

    padding: 17px;

    border-radius: 23px;

    display: flex;
    align-items: center;

    gap: 13px;
}

.admin-stat-card > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.admin-stat-card span {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 650;
}

.admin-stat-card strong {
    font-size: 28px;

    letter-spacing: -1px;
}

.admin-stat-icon {
    width: 44px;
    height: 44px;

    border-radius: 15px;

    display: grid;
    place-items: center;
}

.admin-stat-icon.blue {
    color: #0a84ff;

    background:
        rgba(10, 132, 255, .10);
}

.admin-stat-icon.green {
    color: #28b758;

    background:
        rgba(48, 209, 88, .11);
}

.admin-stat-icon.violet {
    color: #8454ef;

    background:
        rgba(132, 84, 239, .11);
}

.admin-stat-icon.orange {
    color: #ff8a20;

    background:
        rgba(255, 138, 32, .11);
}

.admin-panel {
    padding: 22px;

    border-radius: 28px;
}

.admin-panel-head {
    margin-bottom: 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

.admin-panel-head > div:first-child {
    min-width: 0;
}

.admin-panel-head h2 {
    margin:
        5px
        0
        5px;

    font-size: 20px;

    letter-spacing: -.5px;
}

.admin-panel-head p {
    max-width: 710px;

    margin: 0;

    color: var(--text-muted);

    font-size: 10.5px;
    line-height: 1.55;
}

.admin-search-wrap {
    width:
        min(
            330px,
            100%
        );

    height: 44px;

    padding:
        0
        12px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 15px;

    display: flex;
    align-items: center;

    gap: 8px;

    background:
        var(--surface-soft);

    color: var(--text-muted);

    transition:
        .18s var(--ease);
}

.admin-search-wrap:focus-within {
    border-color:
        rgba(10, 132, 255, .24);

    box-shadow:
        0 0 0 4px
        rgba(10, 132, 255, .06);

    color: var(--accent);
}

.admin-search-wrap svg {
    flex: 0 0 auto;
}

.admin-search {
    min-width: 0;
    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    color: var(--text);

    background: transparent;

    font-size: 11px;
}

.admin-search::placeholder {
    color: var(--text-muted);
}

.table-wrap {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid
        var(--border-soft);

    border-radius: 19px;

    background:
        var(--surface-soft);
}

.admin-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 980px;
}

.admin-table th,
.admin-table td {
    padding:
        13px
        14px;

    border-bottom:
        1px solid
        var(--border-soft);

    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: var(--text-muted);

    background:
        rgba(125, 145, 180, .045);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .05em;

    text-transform: uppercase;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr {
    transition:
        .15s ease;
}

.admin-table tbody tr:hover {
    background:
        rgba(125, 145, 180, .055);
}

.admin-table td {
    font-size: 11px;
}

.admin-table td:first-child strong {
    display: block;

    margin-bottom: 3px;

    font-size: 11.5px;
}

.admin-table td:first-child small {
    display: block;

    color: var(--text-muted);

    font-size: 9px;
}

.admin-table code {
    padding:
        5px
        8px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 9px;

    color: var(--text-secondary);

    background:
        rgba(125, 145, 180, .055);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 9.5px;
}

.pill {
    padding:
        5px
        8px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 999px;

    display: inline-flex;

    color: var(--text-secondary);

    background:
        rgba(125, 145, 180, .065);

    font-size: 9px;
    font-weight: 750;

    text-transform: capitalize;
}

.pill.ok {
    color: #239d4d;

    border-color:
        rgba(48, 209, 88, .13);

    background:
        rgba(48, 209, 88, .08);
}

.pill.bad {
    color: #d63e36;

    border-color:
        rgba(255, 69, 58, .13);

    background:
        rgba(255, 69, 58, .08);
}

.row-actions {
    white-space: nowrap;
}

.row-actions button {
    margin:
        2px
        2px;

    padding:
        7px
        9px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 10px;

    color: var(--text-secondary);

    background:
        rgba(125, 145, 180, .055);

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;

    transition:
        .15s ease;
}

.row-actions button:hover {
    color: var(--accent);

    border-color:
        rgba(10, 132, 255, .16);

    background:
        var(--accent-soft);
}

.row-actions .danger-text:hover {
    color: var(--danger);

    border-color:
        rgba(255, 69, 58, .13);

    background:
        rgba(255, 69, 58, .07);
}

.empty-admin {
    padding: 30px !important;

    color: var(--text-muted);

    text-align: center !important;

    font-size: 11px;
}

.admin-live-chip {
    padding:
        7px
        10px;

    border:
        1px solid
        rgba(48, 209, 88, .12);

    border-radius: 999px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #239d4d;

    background:
        rgba(48, 209, 88, .07);

    font-size: 9px;
    font-weight: 800;
}

.admin-live-chip span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #30d158;

    box-shadow:
        0 0 0 4px
        rgba(48, 209, 88, .10);
}

.audit-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.audit-row {
    padding:
        13px
        14px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 16px;

    background:
        var(--surface-soft);
}

.audit-row > div {
    color: var(--text-secondary);

    font-size: 10px;
}

.audit-row > div strong {
    color: var(--text);

    font-size: 10.5px;
}

.audit-row p {
    margin:
        5px
        0;

    color: var(--text-secondary);

    font-size: 10px;
    line-height: 1.45;
}

.audit-row small {
    color: var(--text-muted);

    font-size: 9px;
}


/* =========================================================
   ADMIN MODALS
========================================================= */

dialog.modal {
    width:
        min(
            650px,
            calc(100% - 28px)
        );

    max-height:
        calc(100vh - 40px);

    max-height:
        calc(100dvh - 40px);

    padding: 0;

    border:
        1px solid
        var(--border);

    border-radius: 28px;

    color: var(--text);

    background:
        var(--surface-strong);

    box-shadow:
        var(--shadow-lg);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(165%);

    backdrop-filter:
        blur(28px)
        saturate(165%);

    overflow: auto;
}

dialog.modal::backdrop {
    background:
        rgba(10, 16, 26, .35);

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);
}

dialog.modal form {
    padding: 22px;
}

dialog.small-modal {
    width:
        min(
            470px,
            calc(100% - 28px)
        );
}

.modal-head {
    padding-bottom: 17px;

    border-bottom:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
}

.admin-modal-title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}

.admin-modal-title h2 {
    margin:
        0
        0
        4px;

    font-size: 18px;
}

.admin-modal-title p {
    margin: 0;

    color: var(--text-muted);

    font-size: 10px;
    line-height: 1.45;
}

.admin-modal-icon {
    width: 42px;
    height: 42px;

    border-radius: 14px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: var(--accent);

    background:
        var(--accent-soft);
}

.admin-modal-icon.warning {
    color: #ff8a20;

    background:
        rgba(255, 138, 32, .10);
}

.admin-modal-close {
    width: 39px;
    height: 39px;

    padding: 0;

    border: 0;
    border-radius: 13px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: var(--text-muted);

    background:
        rgba(125, 145, 180, .07);

    cursor: pointer;
}

.admin-modal-close:hover {
    color: var(--danger);

    background:
        rgba(255, 69, 58, .07);
}

.form-grid {
    padding-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 15px;
}

.admin-form-full {
    grid-column:
        1 / -1;
}

.admin-form-field {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 700;
}

.admin-form-field small {
    color: var(--text-muted);

    font-size: 9px;
    font-weight: 500;
    line-height: 1.45;
}

.plain-input,
.domain-input {
    width: 100%;
    min-height: 46px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 14px;

    color: var(--text);

    background:
        var(--surface-soft);

    transition:
        .18s ease;
}

.plain-input {
    padding:
        0
        12px;

    outline: 0;

    font-size: 11px;
}

select.plain-input {
    cursor: pointer;
}

.plain-input:focus,
.domain-input:focus-within {
    border-color:
        rgba(10, 132, 255, .25);

    box-shadow:
        0 0 0 4px
        rgba(10, 132, 255, .06);
}

.domain-input {
    min-width: 0;

    display: flex;
    align-items: stretch;

    overflow: hidden;
}

.domain-input input {
    min-width: 0;

    flex: 1;

    padding:
        0
        12px;

    border: 0;
    outline: 0;

    color: var(--text);

    background: transparent;

    font-size: 11px;
}

.domain-input > span {
    padding:
        0
        11px;

    border-left:
        1px solid
        var(--border-soft);

    display: flex;
    align-items: center;

    color: var(--text-muted);

    background:
        rgba(125, 145, 180, .055);

    font-size: 9px;
    font-weight: 600;
}

.check-label {
    position: relative;

    min-height: 34px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--text-secondary);

    font-size: 10px;

    cursor: pointer;
}

.check-label input {
    position: absolute;

    opacity: 0;
}

.admin-checkbox-ui {
    width: 19px;
    height: 19px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 6px;

    display: inline-block;

    flex: 0 0 auto;

    background:
        var(--surface-soft);

    transition:
        .15s ease;
}

.check-label input:checked + .admin-checkbox-ui {
    border-color: var(--accent);

    background:
        var(--accent);

    box-shadow:
        inset 0 0 0 4px
        var(--surface-strong);
}

.form-error {
    min-height: 0;

    margin-top: 12px;

    color: var(--danger);

    font-size: 10px;
}

.form-error:empty {
    display: none;
}

.modal-actions {
    margin-top: 18px;

    padding-top: 17px;

    border-top:
        1px solid
        var(--border-soft);

    display: flex;
    justify-content: flex-end;

    gap: 8px;
}

.modal-actions button {
    min-height: 43px;

    padding:
        0
        15px;

    border-radius: 13px;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.modal-actions .secondary {
    border:
        1px solid
        var(--border-soft);

    color: var(--text-secondary);

    background:
        var(--surface-soft);
}

.modal-actions .primary {
    border: 0;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #0a84ff,
            #5861ec
        );

    box-shadow:
        0 10px 22px
        rgba(10, 132, 255, .18);
}

.reset-content {
    padding-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 14px;
}

.admin-toast {
    position: fixed;

    left: 50%;
    bottom:
        calc(
            20px +
            env(safe-area-inset-bottom)
        );

    top: auto;

    z-index: 200;

    max-width:
        min(
            90vw,
            420px
        );

    padding:
        11px
        16px;

    border:
        1px solid
        var(--border);

    border-radius: 15px;

    color: var(--text);

    background:
        var(--surface-strong);

    box-shadow:
        var(--shadow-md);

    -webkit-backdrop-filter:
        blur(22px);

    backdrop-filter:
        blur(22px);

    font-size: 10px;
    font-weight: 700;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(
            -50%,
            10px
        );

    transition:
        .18s var(--ease);
}

.admin-toast.show {
    opacity: 1;
    visibility: visible;

    transform:
        translate(
            -50%,
            0
        );
}


/* =========================================================
   ADMIN RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

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

    .admin-profile-copy {
        display: none;
    }

}

@media (max-width: 760px) {

    .login-page {
        padding: 0;
    }

    .login-shell {
        min-height: 100vh;
        min-height: 100dvh;

        display: block;
    }

    .login-showcase {
        display: none;
    }

    .login-card {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;

        padding:
            calc(
                34px +
                env(safe-area-inset-top)
            )
            22px
            calc(
                26px +
                env(safe-area-inset-bottom)
            );

        border: 0;
        border-radius: 0;

        box-shadow: none;

        background:
            rgba(255, 255, 255, .48);
    }

    html.dark .login-card {
        background:
            rgba(15, 20, 29, .58);
    }

    .login-mobile-brand {
        margin-bottom: auto;

        display: flex;
        align-items: center;

        gap: 11px;
    }

    .login-card-head {
        margin-top: 54px;
    }

    .login-card-head h2 {
        font-size: 32px;
    }

    .login-foot {
        margin-top: auto;
    }

    .admin-page {
        padding:
            8px
            8px
            calc(
                24px +
                env(safe-area-inset-bottom)
            );
    }

    .admin-topbar {
        top: 8px;

        min-height: 64px;

        padding:
            8px
            9px;

        border-radius: 21px;
    }

    .admin-brand-copy span,
    .admin-nav-link span,
    .admin-profile {
        display: none;
    }

    .admin-nav-link {
        width: 40px;

        padding: 0;
    }

    .admin-wrap {
        margin-top: 10px;

        gap: 10px;
    }

    .admin-hero {
        min-height: 0;

        padding: 24px 20px;

        border-radius: 24px;

        display: block;
    }

    .admin-hero h1 {
        font-size: 38px;

        letter-spacing: -1.5px;
    }

    .admin-create-button {
        width: 100%;

        margin-top: 22px;
    }

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

        gap: 8px;
    }

    .admin-stat-card {
        min-height: 101px;

        padding: 13px;

        border-radius: 20px;

        display: block;
    }

    .admin-stat-icon {
        width: 35px;
        height: 35px;

        margin-bottom: 10px;

        border-radius: 12px;
    }

    .admin-stat-card strong {
        font-size: 23px;
    }

    .admin-panel {
        padding: 16px;

        border-radius: 24px;
    }

    .admin-panel-head {
        display: block;
    }

    .admin-search-wrap {
        width: 100%;

        margin-top: 14px;
    }

    .table-wrap {
        overflow: visible;

        border: 0;

        background: transparent;
    }

    .admin-table {
        min-width: 0;

        display: block;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table tbody {
        display: flex;
        flex-direction: column;

        gap: 9px;
    }

    .admin-table tr {
        padding: 13px;

        border:
            1px solid
            var(--border-soft);

        border-radius: 18px;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 10px;

        background:
            var(--surface-soft);
    }

    .admin-table td {
        min-width: 0;

        padding: 0;

        border: 0;

        display: block;

        font-size: 10px;
    }

    .admin-table td::before {
        display: block;

        margin-bottom: 3px;

        color: var(--text-muted);

        font-size: 8px;
        font-weight: 800;

        letter-spacing: .06em;

        text-transform: uppercase;
    }

    .admin-table td:nth-child(1)::before {
        content: "Akun";
    }

    .admin-table td:nth-child(2)::before {
        content: "Mailbox";
    }

    .admin-table td:nth-child(3)::before {
        content: "Role";
    }

    .admin-table td:nth-child(4)::before {
        content: "Status";
    }

    .admin-table td:nth-child(5)::before {
        content: "Login terakhir";
    }

    .admin-table td:nth-child(6)::before {
        content: "Aksi";
    }

    .admin-table td:first-child,
    .admin-table td:nth-child(2),
    .admin-table .row-actions {
        grid-column:
            1 / -1;
    }

    .admin-table code {
        display: block;

        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .row-actions {
        white-space: normal;
    }

    .row-actions button {
        margin:
            3px
            2px
            0
            0;
    }

    .empty-admin {
        grid-column:
            1 / -1 !important;
    }

    dialog.modal,
    dialog.small-modal {
        width: 100%;
        max-width: none;
        height: auto;
        max-height:
            calc(
                100dvh -
                18px
            );

        margin:
            auto
            9px
            9px;

        border-radius: 26px;
    }

    dialog.modal form {
        padding:
            18px;
    }

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

    .admin-form-full {
        grid-column: auto;
    }

}

@media (max-width: 430px) {

    .login-card {
        padding-left: 17px;
        padding-right: 17px;
    }

    .login-card-head h2 {
        font-size: 29px;
    }

    .stat-grid {
        gap: 7px;
    }

    .admin-stat-card {
        min-height: 95px;
    }

    .admin-panel-head p {
        font-size: 9.5px;
    }

    .admin-table tr {
        grid-template-columns: 1fr;
    }

    .admin-table td,
    .admin-table td:first-child,
    .admin-table td:nth-child(2),
    .admin-table .row-actions {
        grid-column: auto;
    }

}