:root {
    --bg-navy: #07111f;
    --bg-graphite: #1b2029;
    --line: rgba(255, 255, 255, 0.12);
    --text-main: #edf3ff;
    --text-soft: rgba(237, 243, 255, 0.72);
    --accent-red: #d83a50;
    --accent-blue: #4ea2ff;
    --shadow: 0 24px 80px rgba(1, 8, 21, 0.45);
    --radius-xl: 28px;
    --radius-lg: 22px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    color: var(--text-main);
    font: 500 14px/1.7 "Manrope", sans-serif;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 129, 150, 0.26), transparent 24%),
        radial-gradient(circle at 84% 22%, rgba(88, 137, 255, 0.22), transparent 22%),
        linear-gradient(125deg, #132746 0%, #1d3764 26%, #672744 58%, #1a315a 100%);
    background-size: 140% 140%;
    animation: appGradientShift 18s ease-in-out infinite alternate;
}

.portal-body--login {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 129, 150, 0.4), transparent 26%),
        radial-gradient(circle at 84% 22%, rgba(88, 137, 255, 0.34), transparent 24%),
        linear-gradient(125deg, #16284a 0%, #233f6f 22%, #7a2848 58%, #1e3157 100%);
    background-size: 140% 140%;
    animation: loginGradientShift 14s ease-in-out infinite alternate;
}

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

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

button,
input {
    font: inherit;
}

.portal-body {
    position: relative;
    overflow-x: hidden;
}

.portal-body::after {
    content: "";
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(14, 24, 42, 0.12), rgba(14, 24, 42, 0.4));
    backdrop-filter: blur(0px);
    transition:
        opacity 360ms ease,
        backdrop-filter 360ms ease;
    z-index: 20;
}

.portal-body:not(.portal-body--login) {
    display: grid;
    justify-content: center;
}

.portal-body--login {
    min-height: 100vh;
}

.scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.scene__blur,
.scene__grid,
.scene__thread,
.scene__wave,
.scene__books {
    position: absolute;
}

.scene__blur {
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.84;
    animation: drift 16s ease-in-out infinite alternate;
}

.scene__blur--navy {
    width: 44rem;
    height: 44rem;
    top: -10rem;
    left: -8rem;
    background: radial-gradient(circle, rgba(77, 131, 255, 0.48), transparent 70%);
}

.scene__blur--red {
    width: 38rem;
    height: 38rem;
    top: 18%;
    right: -6rem;
    background: radial-gradient(circle, rgba(255, 92, 120, 0.46), transparent 68%);
    animation-duration: 19s;
}

.scene__blur--smoke {
    width: 46rem;
    height: 46rem;
    bottom: -14rem;
    left: 35%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.09), transparent 68%);
    animation-duration: 22s;
}

.scene__grid {
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: radial-gradient(circle at center, black 15%, transparent 78%);
    opacity: 0.12;
}

.scene__thread {
    top: -12%;
    width: 38rem;
    height: 140%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.scene__thread::before {
    content: "";
    position: absolute;
    inset: 2rem;
    border-radius: inherit;
    border: 1px dashed rgba(255, 255, 255, 0.14);
}

.scene__thread--left {
    left: -21rem;
    transform: rotate(16deg);
    animation: sway-left 18s ease-in-out infinite;
}

.scene__thread--right {
    right: -23rem;
    transform: rotate(-12deg);
    animation: sway-right 21s ease-in-out infinite;
}

.scene__wave {
    left: 10%;
    right: 10%;
    bottom: 4%;
    height: 14rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)),
        linear-gradient(120deg, rgba(255, 109, 137, 0.18), rgba(81, 140, 255, 0.14));
    opacity: 0.5;
    filter: blur(2px);
    transform: perspective(600px) rotateX(68deg);
    animation: appWaveMotion 14s ease-in-out infinite alternate;
}

.scene__books {
    left: -4%;
    right: -4%;
    bottom: -1rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    padding: 0 2rem;
    opacity: 0.28;
}

.scene__books span {
    height: 8rem;
    border-radius: 14px 14px 0 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04)),
        linear-gradient(90deg, rgba(255, 110, 138, 0.28), rgba(82, 142, 255, 0.16) 60%, rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: shelf 12s ease-in-out infinite;
}

.portal-body--login .scene__grid {
    opacity: 0.08;
}

.portal-body--login .scene__blur {
    filter: blur(24px);
    opacity: 0.92;
}

.portal-body--login .scene__blur--navy {
    width: 50rem;
    height: 50rem;
    top: -12rem;
    left: -6rem;
    background: radial-gradient(circle, rgba(74, 126, 255, 0.55), transparent 68%);
}

.portal-body--login .scene__blur--red {
    width: 44rem;
    height: 44rem;
    top: auto;
    bottom: -8rem;
    right: -8rem;
    background: radial-gradient(circle, rgba(255, 92, 120, 0.52), transparent 66%);
}

.portal-body--login .scene__blur--smoke {
    width: 42rem;
    height: 42rem;
    bottom: auto;
    top: 18%;
    left: 34%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
}

.portal-body--login .scene__thread {
    display: none;
}

.portal-body--login .scene__wave {
    left: -12%;
    right: -12%;
    bottom: -4%;
    height: 22rem;
    border: 0;
    border-radius: 42% 58% 0 0 / 38% 48% 0 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.02)),
        linear-gradient(120deg, rgba(255, 109, 137, 0.38), rgba(81, 140, 255, 0.28));
    opacity: 0.72;
    filter: blur(10px);
    transform: translate3d(0, 0, 0);
    animation: waveMotion 11s ease-in-out infinite alternate;
}

.portal-body--login .scene__wave::before,
.portal-body--login .scene__wave::after {
    content: "";
    position: absolute;
    inset: auto -6% -16% -6%;
    height: 100%;
    border-radius: inherit;
    background: inherit;
    opacity: 0.58;
}

.portal-body--login .scene__wave::before {
    animation: waveMotion 14s ease-in-out infinite alternate-reverse;
}

.portal-body--login .scene__wave::after {
    opacity: 0.36;
    animation: waveMotion 17s ease-in-out infinite alternate;
}

.portal-body--login .scene__books {
    left: 6%;
    right: 6%;
    bottom: 5%;
    gap: 1.4rem;
    opacity: 0.2;
}

.portal-body--login .scene__books span {
    border-radius: 18px 18px 6px 6px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06)),
        linear-gradient(90deg, rgba(255, 110, 138, 0.42), rgba(82, 142, 255, 0.28));
}

.scene__books span:nth-child(2) {
    height: 9.5rem;
    animation-delay: -2s;
}

.scene__books span:nth-child(3) {
    height: 7.8rem;
    animation-delay: -4s;
}

.scene__books span:nth-child(4) {
    height: 10.2rem;
    animation-delay: -1s;
}

.scene__books span:nth-child(5) {
    height: 8.6rem;
    animation-delay: -5s;
}

.scene__books span:nth-child(6) {
    height: 9rem;
    animation-delay: -3s;
}

.app-shell,
.login-shell {
    position: relative;
    z-index: 1;
}

.app-shell {
    width: min(1520px, calc(100vw - 48px));
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 0;
    justify-self: center;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
}

.glass-card {
    background: linear-gradient(180deg, rgba(18, 28, 46, 0.76), rgba(8, 14, 27, 0.7));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.site-header,
.site-footer,
.hero-card,
.stat-card,
.table-card,
.login-panel {
    position: relative;
    overflow: hidden;
}

.site-header::before,
.site-footer::before,
.hero-card::before,
.stat-card::before,
.table-card::before,
.login-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 30%, transparent 70%, rgba(216, 58, 80, 0.12));
    opacity: 0.85;
    pointer-events: none;
}

.site-header::before {
    border-radius: inherit;
}

.site-header,
.site-footer {
    background: linear-gradient(180deg, rgba(245, 248, 255, 0.2), rgba(255, 255, 255, 0.11));
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 24px 60px rgba(9, 18, 38, 0.22);
}

.site-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 18px 22px 16px;
    border-radius: 0 0 30px 30px;
    margin-bottom: 0;
    overflow: visible;
    z-index: 20;
    animation: siteHeaderFadeIn 500ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.brand-lockup {
    display: inline-grid;
    align-items: center;
    justify-items: start;
}

.brand-lockup__logo {
    width: auto;
    height: 54px;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 14px 24px rgba(8, 18, 40, 0.18));
}

.brand-lockup strong,
.header-user strong,
.site-footer strong {
    display: block;
    font-family: "Oxanium", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.brand-lockup span,
.header-user span,
.footer-note,
.lede,
.field span,
.checkbox-row,
.stat-card span,
.stat-card small {
    color: var(--text-soft);
}

.site-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.site-header__actions {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 12px;
    min-width: 0;
}

.site-header__menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: var(--text-main);
    background: linear-gradient(180deg, rgba(245, 248, 255, 0.2), rgba(255, 255, 255, 0.1));
    box-shadow: 0 12px 24px rgba(9, 18, 38, 0.18);
    cursor: pointer;
    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.site-header__menu-toggle:hover {
    transform: translateY(-1px);
}

.site-header__menu-toggle-line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.site-header.is-menu-open .site-header__menu-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.site-header.is-menu-open .site-header__menu-toggle-line:nth-child(2) {
    opacity: 0;
}

.site-header.is-menu-open .site-header__menu-toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.site-nav a {
    position: relative;
    z-index: 0;
    isolation: isolate;
    padding: 6px 2px;
    border-radius: 0;
    color: var(--text-soft);
    transition:
        color 300ms ease,
        transform 300ms ease,
        opacity 300ms ease;
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-nav a::before {
    content: "";
    position: absolute;
    inset: -8px -12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(112, 154, 255, 0.08));
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 320ms ease,
        transform 320ms ease;
    z-index: -1;
}

.site-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 109, 137, 0.9), rgba(81, 140, 255, 0.9));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 320ms ease;
}

.site-nav a:hover,
.site-nav a.is-active {
    color: var(--text-main);
    transform: translateY(-1px);
}

.site-nav a:hover::before,
.site-nav a.is-active::before {
    opacity: 1;
    transform: scale(1);
}

.site-nav a:hover::after,
.site-nav a.is-active::after {
    transform: scaleX(1);
}

.ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    flex: 0 0 auto;
    line-height: 1;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.site-footer strong,
.header-user__trigger,
.header-user__logout,
.table-chip,
.mail-inline-button,
.mail-attachment-chip,
.primary-button,
.ghost-button,
.admin-create-button,
.admin-delete-button,
.admin-create-submit,
.record-delete-dialog__button,
.record-preview-drill__back,
.json-test-upload__button,
.classification-json-tool-actions button,
.json-test-submit,
.password-utility-button {
    gap: 10px;
}

.table-chip,
.classification-json-tool-actions button,
.record-delete-dialog__button,
.record-preview-drill__back,
.json-test-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-table-head,
.field > span,
.hero-copy h1,
.login-panel h1,
.stat-card > span,
.classification-json-eyebrow,
.classification-json-group__head span,
.classification-json-list__head span,
.classification-json-field__label,
.json-test-upload__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.management-toast__icon i,
.management-toast__close i,
.admin-dialog__close i,
.record-preview-dialog__close i,
.record-delete-dialog__close i {
    font-size: 0.95rem;
}

.ghost-button,
.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 180ms ease;
}

.ghost-button {
    padding: 10px 16px;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.admin-confirm-actions .ghost-button {
    color: #121720;
    background: linear-gradient(180deg, rgba(246, 241, 233, 0.98), rgba(228, 221, 210, 0.98));
    box-shadow: inset 0 0 0 1px rgba(116, 109, 100, 0.14);
}

.primary-button {
    width: 100%;
    padding: 13px 16px;
    color: white;
    background: linear-gradient(135deg, #da3650, #7b1f38 55%, #20426e);
    box-shadow: 0 12px 30px rgba(216, 58, 80, 0.28);
}

.ghost-button:hover,
.primary-button:hover {
    transform: translateY(-1px);
}

.page-shell {
    width: 100%;
    display: grid;
    gap: 18px;
    padding: 18px 0 24px;
    align-content: start;
    animation: pageShellFadeIn 540ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.site-header,
.page-shell,
.site-footer {
    transition:
        opacity 320ms ease,
        transform 320ms ease,
        filter 320ms ease;
    will-change: opacity, transform, filter;
}

.portal-body.is-routing::after {
    opacity: 1;
    backdrop-filter: blur(10px);
}

.portal-body.is-routing .site-header,
.portal-body.is-routing .page-shell,
.portal-body.is-routing .site-footer {
    opacity: 0;
    transform: translateY(16px) scale(0.992);
    filter: blur(10px);
}

.hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 380px);
    gap: 20px;
    align-items: center;
    min-height: 260px;
    padding: 26px;
    border-radius: var(--radius-xl);
}

.hero-copy h1,
.login-panel h1 {
    margin: 0 0 12px;
    font: 600 clamp(1.6rem, 2vw, 2.25rem) / 1.15 "Oxanium", sans-serif;
    letter-spacing: 0.03em;
}

.eyebrow {
    margin: 0 0 8px;
    color: #ff8a9e;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
}

.lede {
    max-width: 62ch;
    margin: 0;
    font-size: 0.93rem;
}

.hero-orbit {
    position: relative;
    height: 220px;
    display: grid;
    place-items: center;
}

.hero-orbit__ring,
.hero-orbit__core {
    position: absolute;
    border-radius: 50%;
}

.hero-orbit__ring {
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    animation: rotateSlow 18s linear infinite;
}

.hero-orbit__core {
    width: 120px;
    height: 120px;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.5), transparent 26%),
        linear-gradient(135deg, rgba(216, 58, 80, 0.7), rgba(13, 29, 57, 0.86));
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, 0.04),
        0 18px 34px rgba(1, 10, 22, 0.38);
}

.hero-orbit__spine {
    position: absolute;
    width: 26px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-orbit__spine--one {
    height: 150px;
    left: 28%;
    animation: floatY 8s ease-in-out infinite;
}

.hero-orbit__spine--two {
    height: 185px;
    right: 28%;
    background: linear-gradient(180deg, rgba(216, 58, 80, 0.7), rgba(255, 255, 255, 0.02));
    animation: floatY 9s ease-in-out infinite reverse;
}

.hero-orbit__spine--three {
    height: 120px;
    bottom: 12%;
    background: linear-gradient(180deg, rgba(78, 162, 255, 0.7), rgba(255, 255, 255, 0.02));
    animation: floatY 7s ease-in-out infinite;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.stat-card {
    padding: 18px 20px;
    border-radius: var(--radius-lg);
}

.stat-card strong {
    display: block;
    margin: 10px 0 4px;
    font-family: "Oxanium", sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
}

.table-card {
    padding: 20px;
    border-radius: var(--radius-xl);
}

.table-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.table-card__head h2 {
    margin: 0;
    font: 600 1.05rem/1.25 "Oxanium", sans-serif;
}

.table-chip {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-soft);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
}

.monitoring-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 360px);
    min-height: 240px;
    align-items: center;
}

.monitoring-hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.monitoring-geometry {
    position: relative;
    width: min(100%, 320px);
    aspect-ratio: 1.08;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(circle at 50% 50%, rgba(88, 137, 255, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(5, 10, 20, 0.12));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.monitoring-geometry::before,
.monitoring-geometry::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.monitoring-geometry::before {
    inset: 24px;
}

.monitoring-geometry::after {
    inset: 54px;
}

.monitoring-geometry__panel {
    position: absolute;
    top: 50%;
    width: 78px;
    height: 56px;
    border-radius: 18px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(13, 20, 37, 0.22));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 30px rgba(7, 13, 29, 0.2);
}

.monitoring-geometry__panel--mail {
    left: 24px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
}

.monitoring-geometry__panel--mail span {
    display: block;
    width: 42px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 151, 174, 0.96), rgba(123, 181, 255, 0.8));
}

.monitoring-geometry__panel--mail span:nth-child(2) {
    width: 34px;
}

.monitoring-geometry__panel--mail span:nth-child(3) {
    width: 24px;
}

.monitoring-geometry__panel--json {
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #ddeeff;
    font-family: "Oxanium", sans-serif;
    font-size: 1.55rem;
    letter-spacing: 0.06em;
}

.monitoring-geometry__panel--json i,
.monitoring-geometry__panel--json b {
    font-style: normal;
    font-weight: 600;
}

.monitoring-geometry__panel--json i {
    color: #ff92ab;
}

.monitoring-geometry__panel--json b {
    color: #7ebcff;
}

.monitoring-geometry__core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    transform: translate(-50%, -50%);
}

.monitoring-geometry__ring,
.monitoring-geometry__pulse {
    position: absolute;
    inset: 0;
    border-radius: 28px;
}

.monitoring-geometry__ring {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(255, 139, 164, 0.12), rgba(113, 180, 255, 0.1));
    animation: monitoringRotateFrame 18s linear infinite;
}

.monitoring-geometry__ring--inner {
    inset: 16px;
    border-radius: 18px;
    animation-duration: 10s;
    animation-direction: reverse;
}

.monitoring-geometry__pulse {
    inset: 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ff8aa2, #79b5ff);
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, 0.03),
        0 16px 28px rgba(8, 14, 28, 0.28);
    animation: monitoringCorePulse 3.1s ease-in-out infinite;
}

.monitoring-geometry__beam {
    position: absolute;
    top: 50%;
    width: 72px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 149, 170, 0.9), rgba(117, 182, 255, 0.95));
    opacity: 0.78;
    transform: translateY(-50%);
}

.monitoring-geometry__beam--left {
    left: 86px;
}

.monitoring-geometry__beam--right {
    right: 86px;
}

.monitoring-geometry__packet {
    position: absolute;
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(135deg, #fff0f4, #8ec0ff);
    box-shadow: 0 6px 14px rgba(7, 13, 28, 0.28);
}

.monitoring-geometry__packet--left {
    left: 94px;
    animation: monitoringPacketLeft 2.4s ease-in-out infinite;
}

.monitoring-geometry__packet--right {
    right: 94px;
    animation: monitoringPacketRight 2.4s ease-in-out infinite;
}


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

.monitoring-stat-card {
    min-height: 138px;
    background: linear-gradient(180deg, rgba(18, 28, 46, 0.82), rgba(10, 16, 29, 0.82));
}

.monitoring-grid {
    display: grid;
    gap: 18px;
    align-items: start;
}

.monitoring-grid--top {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
}

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

.monitoring-card {
    min-height: auto;
}

.monitoring-card--wide {
    min-height: 340px;
}

.monitoring-line-chart {
    display: grid;
    gap: 14px;
}

.monitoring-line-chart__legend {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-size: 0.82rem;
}

.monitoring-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
}

.monitoring-dot--rose {
    background: #ff8098;
}

.monitoring-dot--blue {
    background: #77b7ff;
}

.monitoring-line-chart svg {
    width: 100%;
    height: 240px;
    overflow: visible;
}

.monitoring-line-chart__grid {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

.monitoring-line-chart__area {
    fill: rgba(255, 122, 150, 0.18);
}

.monitoring-line-chart__line {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.monitoring-line-chart__line--rose {
    stroke: #f88aa2;
    filter: drop-shadow(0 8px 20px rgba(248, 138, 162, 0.22));
}

.monitoring-line-chart__line--blue {
    stroke: #7ebcff;
    filter: drop-shadow(0 8px 20px rgba(126, 188, 255, 0.22));
}

.monitoring-line-chart__point {
    stroke: rgba(8, 14, 27, 0.84);
    stroke-width: 3;
}

.monitoring-line-chart__point--rose {
    fill: #f88aa2;
}

.monitoring-line-chart__point--blue {
    fill: #7ebcff;
}

.monitoring-line-chart__labels {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
    color: var(--text-soft);
    font-size: 0.75rem;
}

.monitoring-line-chart__labels span {
    text-align: center;
}

.monitoring-donut-card {
    display: grid;
    align-items: center;
    justify-items: center;
    gap: 20px;
    min-height: 320px;
}

.monitoring-donut {
    --donut-fill: conic-gradient(#74d7a4 0 100%);
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--donut-fill);
    box-shadow: 0 24px 42px rgba(2, 10, 23, 0.28);
}

.monitoring-donut::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(10, 18, 33, 0.95), rgba(8, 13, 25, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.monitoring-donut__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    text-align: center;
}

.monitoring-donut__inner strong {
    display: block;
    font-family: "Oxanium", sans-serif;
    font-size: 2rem;
}

.monitoring-donut__inner span {
    color: var(--text-soft);
    font-size: 0.82rem;
}

.monitoring-status-list {
    width: 100%;
    display: grid;
    gap: 10px;
}

.monitoring-status-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.monitoring-status-list__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-soft);
}

.monitoring-status-list__label i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.monitoring-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    min-height: 260px;
}

.monitoring-bars__item {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.monitoring-bars__value,
.monitoring-bars__item small {
    color: var(--text-soft);
}

.monitoring-bars__value {
    font-size: 0.78rem;
}

.monitoring-bars__track {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
    height: 168px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.monitoring-bars__fill {
    width: 100%;
    border-radius: 16px 16px 10px 10px;
    background: linear-gradient(180deg, rgba(255, 186, 203, 0.94), rgba(90, 161, 255, 0.34));
    box-shadow: 0 14px 24px rgba(7, 14, 27, 0.28);
    animation: monitoringBarLift 6.5s ease-in-out infinite;
}

.monitoring-bars__item:nth-child(2n) .monitoring-bars__fill {
    animation-delay: -1.5s;
}

.monitoring-ranking,
.monitoring-stage-list {
    display: grid;
    gap: 12px;
}

.monitoring-ranking__row,
.monitoring-stage-list__row {
    display: grid;
    gap: 10px;
}

.monitoring-ranking__copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.monitoring-ranking__copy strong,
.monitoring-stage-list__meta strong {
    font-size: 0.88rem;
}

.monitoring-ranking__copy span,
.monitoring-stage-list__meta span,
.monitoring-ranking__row em {
    color: var(--text-soft);
    font-size: 0.8rem;
}

.monitoring-ranking__bar,
.monitoring-stage-list__track {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.monitoring-ranking__bar span,
.monitoring-stage-list__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
}

.monitoring-ranking__bar span {
    background: linear-gradient(90deg, #ff8da7, #6aaeff);
}

.monitoring-stage-list__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.monitoring-stage-list__fill--rose {
    background: linear-gradient(90deg, #ff859d, #f45f7f);
}

.monitoring-stage-list__fill--blue {
    background: linear-gradient(90deg, #7ebcff, #5498ef);
}

.monitoring-stage-list__fill--mint {
    background: linear-gradient(90deg, #78ddb0, #4fbb8b);
}

.monitoring-stage-list__fill--gold {
    background: linear-gradient(90deg, #f4d284, #efb45c);
}


.table-wrap {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

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

.data-table th,
.data-table td {
    padding: 13px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.data-table th {
    color: #f7bec6;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background: rgba(255, 255, 255, 0.04);
}

.data-table td {
    color: var(--text-soft);
    font-size: 0.87rem;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

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

.site-footer {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 22px;
    margin-top: 0;
    padding: 18px 22px 20px;
    border-radius: 30px 30px 0 0;
    align-self: end;
}

.footer-logos {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    min-width: 0;
}

.footer-logos img {
    max-height: 38px;
    width: auto;
    object-fit: contain;
}

.site-footer strong {
    justify-self: end;
    white-space: nowrap;
}

.admin-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(59, 68, 102, 0.94), rgba(46, 54, 86, 0.96));
    box-shadow: 0 22px 48px rgba(7, 13, 29, 0.22);
}

.user-admin-page {
    display: grid;
    gap: 72px;
    padding-top: 52px;
}

.admin-create-strip {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.admin-create-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 72px;
    padding: 20px 24px;
    border: 0;
    border-radius: 22px;
    color: #f8fbff;
    background: linear-gradient(125deg, #b5446e 0%, #7b4cb8 24%, #c34d70 52%, #6c46ab 78%, #a83f69 100%);
    background-size: 230% 230%;
    box-shadow: 0 18px 34px rgba(33, 28, 35, 0.2);
    cursor: pointer;
    font: 700 1rem/1 "Oxanium", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease, background-position 320ms ease;
    animation: createButtonDrift 12s ease-in-out infinite alternate;
}


.admin-create-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 14%, rgba(255, 255, 255, 0.24) 42%, rgba(255, 255, 255, 0.06) 58%, transparent 82%);
    transform: translateX(-120%);
    transition: transform 0.85s ease;
}

.admin-create-button:hover {
    transform: translateY(-2px) scale(1.003);
    box-shadow: 0 24px 42px rgba(33, 28, 35, 0.24);
    filter: brightness(1.04) saturate(1.04);
    background-position: 100% 50%;
}

.admin-create-button:hover::before {
    transform: translateX(120%);
}

.management-toast {
    position: fixed;
    top: 28px;
    left: 50%;
    z-index: 80;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    width: min(560px, calc(100vw - 32px));
    padding: 16px 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 245, 231, 0.68);
    background:
        linear-gradient(130deg, rgba(255, 255, 255, 0.26), transparent 46%),
        linear-gradient(180deg, #f3efe8, #e9e4db);
    box-shadow:
        0 24px 40px rgba(17, 23, 47, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.22) inset;
    transform: translateX(-50%);
    animation: toastFloatIn 260ms ease;
}

.management-toast p {
    margin: 0;
    color: #182236;
    font-weight: 700;
}

.management-toast__icon,
.management-toast__close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.management-toast__icon {
    color: white;
    font-weight: 800;
}

.management-toast--success .management-toast__icon {
    background: linear-gradient(135deg, #53bb7b, #2c9154);
}

.management-toast--error .management-toast__icon {
    background: linear-gradient(135deg, #d4637a, #b74f6e);
}

.management-toast--success {
    border-color: rgba(152, 204, 162, 0.8);
}

.management-toast--error {
    border-color: rgba(214, 140, 158, 0.8);
}

.management-toast__close {
    border: 0;
    color: #43506d;
    background: rgba(67, 80, 109, 0.08);
    cursor: pointer;
}

.user-admin-list {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.admin-table-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(239, 233, 246, 0.92);
    background:
        linear-gradient(145deg, #f4eff8 0%, #eee8f5 38%, #e7e3f3 100%);
    box-shadow:
        0 24px 48px rgba(21, 25, 43, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

.admin-table-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(187, 158, 234, 0.2), transparent 26%),
        radial-gradient(circle at 86% 20%, rgba(224, 156, 191, 0.2), transparent 24%),
        radial-gradient(circle at 50% 102%, rgba(143, 177, 243, 0.16), transparent 28%),
        linear-gradient(125deg, rgba(255, 255, 255, 0.22), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.1));
    opacity: 0.96;
}

.admin-table-wrap::after {
    content: "";
    position: absolute;
    right: -140px;
    top: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06) 42%, transparent 72%);
    filter: blur(10px);
    opacity: 0.72;
    pointer-events: none;
}

.admin-list-toolbar,
.admin-management-table {
    position: relative;
    z-index: 1;
}

.admin-list-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 18px 18px 16px;
}

.admin-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: min(340px, 100%);
    padding: 12px 16px;
    border-radius: 18px;
    border: 1px solid rgba(119, 123, 134, 0.18);
    background: linear-gradient(180deg, rgba(249, 245, 251, 0.98), rgba(240, 235, 246, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 10px 22px rgba(60, 48, 55, 0.06);
}

.admin-search svg {
    width: 18px;
    height: 18px;
    fill: #585d6f;
    flex: 0 0 auto;
}

.admin-search input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #232937;
    outline: none;
}

.admin-search input::placeholder {
    color: #797d8b;
}

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

.admin-management-table th,
.admin-management-table td {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(96, 100, 110, 0.12);
}

.admin-management-table th {
    color: rgba(97, 86, 113, 0.84);
    font-size: 0.77rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
}

.admin-management-table td {
    color: #272b36;
    font-size: 0.95rem;
}

.admin-management-table tbody tr {
    transition: background 180ms ease;
}

.admin-management-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.12);
}

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

.admin-management-table td:last-child,
.admin-management-table th:last-child {
    width: 1%;
    white-space: nowrap;
}

.admin-delete-button {
    min-width: 108px;
    padding: 12px 18px;
    border: 0;
    border-radius: 16px;
    color: #fff3f6;
    background: linear-gradient(135deg, #8f3e5d, #b04862);
    box-shadow: 0 14px 28px rgba(44, 18, 42, 0.18);
    cursor: pointer;
    transition: transform 180ms ease, opacity 180ms ease;
}

.admin-delete-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.admin-delete-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.admin-empty-state {
    text-align: center;
    color: #636978 !important;
}

.admin-dialog {
    width: min(620px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    background: transparent;
}

.admin-dialog::backdrop {
    background: rgba(23, 29, 51, 0.18);
}

.admin-dialog--create[open]::backdrop {
    animation: adminDialogBackdropIn 620ms ease-out;
}

.admin-dialog__backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(19, 24, 40, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.admin-dialog__panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 20px;
    padding: 30px;
    border-radius: 30px;
    border: 1px solid rgba(236, 240, 248, 0.34);
    background: linear-gradient(180deg, rgba(204, 210, 221, 0.97), rgba(191, 198, 212, 0.96));
    box-shadow: 0 26px 60px rgba(8, 16, 36, 0.2);
}

.admin-dialog--create[open] .admin-dialog__panel {
    transform-origin: top center;
    animation: adminDialogPanelIn 760ms cubic-bezier(0.16, 0.9, 0.2, 1);
}

.admin-dialog__panel--compact {
    width: min(540px, calc(100vw - 32px));
    padding: 34px 32px;
    background: linear-gradient(180deg, #dbd5cb, #cfc7bb);
    border-color: rgba(241, 235, 224, 0.72);
}

.admin-dialog__copy {
    margin: 0;
    color: #313746;
    font-size: 1rem;
    text-align: left;
}

.admin-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-dialog__head h2 {
    width: 100%;
    margin: 0;
    text-align: center;
    color: #151d30;
    font: 700 1.45rem/1.1 "Oxanium", sans-serif;
}

.admin-dialog__head--compact {
    align-items: center;
    gap: 12px;
}

.admin-dialog__head--compact .admin-dialog__copy {
    flex: 1;
}

.admin-dialog__close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    color: #5e6d89;
    background: rgba(94, 109, 137, 0.1);
    cursor: pointer;
}

.admin-popup-form {
    display: grid;
    gap: 16px;
}

.admin-popup-form input {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid rgba(124, 135, 159, 0.42);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(226, 232, 241, 0.98), rgba(214, 221, 233, 0.98));
    color: #1c2437;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-popup-form input::placeholder {
    color: #687694;
}

.admin-popup-form input:focus {
    border-color: rgba(92, 146, 121, 0.62);
    box-shadow: 0 0 0 5px rgba(83, 187, 123, 0.12);
}

.password-field-row {
    position: relative;
}

.password-field-row input {
    padding-right: 208px;
}

.password-field-actions {
    position: absolute;
    top: 50%;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translateY(-50%);
}

.password-utility-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    color: #f4f7ff;
    background: linear-gradient(135deg, #76829f, #857897);
    cursor: pointer;
    font-weight: 700;
    transition: transform 180ms ease, filter 180ms ease;
}

.password-utility-button[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    width: 240px;
    padding: 10px 12px;
    border-radius: 14px;
    color: #f6f8ff;
    background: linear-gradient(135deg, rgba(56, 63, 93, 0.96), rgba(82, 76, 111, 0.96));
    box-shadow: 0 14px 26px rgba(25, 24, 41, 0.22);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    transform: translate(-50%, 8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    z-index: 4;
}

.password-utility-button[data-tooltip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    width: 12px;
    height: 12px;
    background: rgba(69, 69, 99, 0.98);
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
    z-index: 3;
}

.password-utility-button[data-tooltip]:hover::after,
.password-utility-button[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

.password-utility-button[data-tooltip]:hover::after {
    transform: translate(-50%, 0);
}

.password-utility-button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.password-utility-button--icon {
    width: 44px;
    height: 44px;
    padding: 0;
}

.password-utility-button--icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.password-utility-button--icon .ui-icon,
.password-utility-button--icon i {
    width: 18px;
    height: 18px;
    font-size: 0.95rem;
}

.admin-create-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 17px 18px;
    border: 0;
    border-radius: 18px;
    color: #f6fff8;
    background: linear-gradient(135deg, #76c78d, #56b575 48%, #3b905b 100%);
    box-shadow: 0 16px 30px rgba(47, 130, 78, 0.22);
    font: 700 0.98rem/1 "Oxanium", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.admin-create-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.34) 50%, transparent 78%);
    transform: translateX(-130%);
    transition: transform 0.7s ease;
}

.admin-create-submit:hover {
    filter: brightness(1.05) saturate(1.03);
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(47, 130, 78, 0.3);
}

.admin-create-submit:hover::before {
    transform: translateX(130%);
}

.admin-confirm-form,
.admin-confirm-actions {
    display: grid;
    gap: 12px;
}

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

.admin-delete-button--confirm {
    width: 100%;
}

.header-user {
    position: relative;
    justify-self: end;
}

.header-user__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    color: var(--text-main);
    background: linear-gradient(135deg, #7d5f84, #98637a 58%, #7c5c8d);
    box-shadow: 0 12px 24px rgba(29, 17, 48, 0.2);
    cursor: pointer;
}

.header-user__trigger::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.76);
    border-bottom: 2px solid rgba(255, 255, 255, 0.76);
    transform: rotate(45deg) translateY(-1px);
    transition: transform 180ms ease;
}

.header-user__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 168px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    z-index: 40;
}

.header-user--dropdown:hover .header-user__menu,
.header-user--dropdown:focus-within .header-user__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-user--dropdown:hover .header-user__trigger::after,
.header-user--dropdown:focus-within .header-user__trigger::after {
    transform: rotate(225deg) translateY(-1px);
}

.header-user__logout {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 16px;
    color: var(--text-main);
    background: linear-gradient(135deg, #5d4f73, #74536f 58%, #5d4f73);
    box-shadow: 0 14px 28px rgba(26, 16, 43, 0.24);
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
}

.header-user__logout:hover {
    background: linear-gradient(135deg, #6b5984, #845d7c 58%, #6b5984);
    transform: translateY(-1px);
}

.portal-body:not(.portal-body--login) .scene__wave,
.portal-body:not(.portal-body--login) .scene__books {
    display: none;
}

.login-panel {
    width: min(1240px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 480px);
    gap: 28px;
    align-items: center;
    padding: 28px;
    min-height: min(760px, calc(100vh - 64px));
    border-radius: 40px;
    background: linear-gradient(145deg, rgba(250, 252, 255, 0.22), rgba(177, 205, 255, 0.08) 36%, rgba(13, 20, 38, 0.24) 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 30px 90px rgba(10, 19, 40, 0.28);
}

.login-panel__visual,
.login-panel__form-side,
.login-panel__logo-stage,
.login-form {
    display: grid;
}

.login-panel__logo {
    width: min(100%, 520px);
    height: auto;
    filter: drop-shadow(0 24px 50px rgba(6, 17, 42, 0.2));
}

.login-panel__visual {
    align-self: stretch;
}

.login-panel__logo-stage {
    position: relative;
    place-items: center;
    min-height: 100%;
    padding: 48px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.14) 26%, transparent 52%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(242, 247, 255, 0.4) 42%, rgba(255, 255, 255, 0.16));
    border: 1px solid rgba(255, 255, 255, 0.54);
    overflow: hidden;
}

.login-panel__logo-stage::before,
.login-panel__logo-stage::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(86, 145, 255, 0.22), rgba(255, 93, 126, 0.24));
}

.login-panel__logo-stage::before {
    width: 21rem;
    height: 21rem;
    top: -8rem;
    left: -6rem;
    animation: drift 10s ease-in-out infinite alternate;
}

.login-panel__logo-stage::after {
    width: 18rem;
    height: 18rem;
    right: -6rem;
    bottom: -7rem;
    animation: drift 13s ease-in-out infinite alternate-reverse;
}

.login-panel__form-side {
    gap: 18px;
    align-content: center;
    padding: 38px 34px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(245, 248, 255, 0.24), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.login-panel__form-side h1 {
    margin: 0;
    font: 700 clamp(2rem, 3vw, 2.8rem) / 1 "Oxanium", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-form {
    gap: 18px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.field {
    display: grid;
    gap: 8px;
}

.field input {
    width: 100%;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.18);
    color: var(--text-main);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.field input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 5px rgba(110, 152, 255, 0.18);
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
}

.checkbox-row input {
    accent-color: var(--accent-red);
}

.form-alert {
    padding: 14px 16px;
    border-radius: 18px;
    margin-bottom: 16px;
    background: rgba(216, 58, 80, 0.12);
    border: 1px solid rgba(216, 58, 80, 0.24);
    color: #ffd6dd;
}

.primary-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.primary-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.42) 48%, transparent 72%);
    transform: translateX(-130%);
    transition: transform 0.7s ease;
    z-index: -1;
}

.primary-button:hover::before {
    transform: translateX(130%);
}

.primary-button:hover {
    box-shadow: 0 18px 38px rgba(216, 58, 80, 0.34);
}

.mail-ops-page,
.json-test-page {
    display: grid;
    gap: 18px;
}

.mail-ops-page {
    width: 100%;
    justify-items: stretch;
    padding-top: 72px;
}

.mail-home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, 320px);
    align-items: center;
    gap: 26px;
    width: 100%;
    padding: 24px 28px;
    border-radius: 32px;
    border: 1px solid rgba(236, 229, 244, 0.56);
    background:
        radial-gradient(circle at 14% 18%, rgba(196, 182, 255, 0.16), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(235, 141, 170, 0.12), transparent 24%),
        linear-gradient(145deg, rgba(244, 240, 248, 0.97), rgba(236, 229, 242, 0.97) 48%, rgba(242, 231, 240, 0.97));
    box-shadow:
        0 24px 56px rgba(11, 17, 34, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    overflow: hidden;
}

.mail-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 34%, transparent 72%, rgba(215, 104, 140, 0.1));
    pointer-events: none;
}

.mail-home-hero__copy,
.mail-home-hero__visual {
    position: relative;
    z-index: 1;
}

.mail-home-hero__eyebrow {
    margin: 0 0 8px;
    color: #b05a77;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mail-home-hero__title {
    margin: 0 0 10px;
    color: #1f2740;
    font: 700 clamp(1.45rem, 2vw, 2.05rem) / 1.08 "Oxanium", sans-serif;
    letter-spacing: 0.03em;
}

.mail-home-hero__text {
    max-width: 58ch;
    margin: 0;
    color: #5a637b;
    font-size: 0.93rem;
    line-height: 1.68;
}

.mail-home-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.mail-home-hero__stat {
    flex: 0 1 auto;
    min-width: 118px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(181, 170, 204, 0.28);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(244, 239, 248, 0.94));
    box-shadow: 0 12px 24px rgba(58, 48, 78, 0.06);
}

.mail-home-hero__stat span {
    display: block;
    margin-bottom: 6px;
    color: #786c8f;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mail-home-hero__stat strong {
    display: block;
    color: #25314b;
    font-size: 1.12rem;
    line-height: 1.2;
}

.mail-home-hero--json-list .mail-home-stack {
    background:
        radial-gradient(circle at 22% 18%, rgba(246, 248, 250, 0.34), transparent 28%),
        radial-gradient(circle at 78% 78%, rgba(224, 229, 236, 0.22), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(234, 238, 243, 0.26));
}

.mail-ops-page--json-list .mail-home-hero {
    border-color: rgba(205, 210, 220, 0.58);
    background:
        radial-gradient(circle at 14% 18%, rgba(248, 249, 250, 0.22), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(228, 232, 238, 0.18), transparent 24%),
        linear-gradient(145deg, rgba(247, 248, 250, 0.99), rgba(239, 241, 245, 0.99) 48%, rgba(244, 246, 248, 0.98));
}

.mail-ops-page--json-list .mail-home-hero__stat {
    position: relative;
    overflow: hidden;
    border-color: rgba(197, 184, 229, 0.42);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 240, 255, 0.98));
    box-shadow: 0 14px 28px rgba(77, 63, 116, 0.09);
}

.mail-ops-page--json-list .mail-home-hero__stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 18%, rgba(190, 168, 255, 0.18), transparent 38%);
    pointer-events: none;
}

.mail-ops-page--json-list .mail-home-hero__stat span {
    color: #8b79b3;
}

.mail-ops-page--json-list .mail-home-hero__stat strong {
    color: #47366f;
}

.mail-ops-page--json-list .mail-home-hero__stat:nth-child(2) {
    border-color: rgba(187, 176, 236, 0.44);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 234, 255, 0.99));
}

.mail-ops-page--json-list .mail-home-hero__stat:nth-child(2)::before {
    background: radial-gradient(circle at 76% 22%, rgba(168, 147, 246, 0.22), transparent 42%);
}

.mail-ops-page--json-list .mail-home-hero__stat:nth-child(3) {
    border-color: rgba(202, 178, 234, 0.44);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 239, 255, 0.98));
}

.mail-ops-page--json-list .mail-home-hero__stat:nth-child(3)::before {
    background: radial-gradient(circle at 70% 20%, rgba(198, 154, 255, 0.2), transparent 40%);
}

.mail-ops-page--json-list [data-records-mount] {
    padding-inline: clamp(14px, 1.8vw, 24px);
}

.mail-ops-page--json-list .mail-records-shell,
.mail-ops-page--json-list .mail-records-card {
    border-color: rgba(201, 207, 217, 0.58);
    background:
        radial-gradient(circle at 14% 18%, rgba(249, 250, 251, 0.22), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(228, 232, 238, 0.18), transparent 24%),
        linear-gradient(145deg, rgba(245, 247, 249, 0.99), rgba(236, 239, 243, 0.99) 48%, rgba(242, 244, 247, 0.98));
    box-shadow:
        0 24px 56px rgba(31, 38, 49, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.mail-ops-page--json-list .mail-records-card {
    box-sizing: border-box;
    padding-inline: clamp(18px, 2vw, 28px);
}

.mail-ops-page--json-list .mail-records-shell::before {
    background: radial-gradient(circle, rgba(234, 237, 242, 0.2), transparent 68%);
}

.mail-ops-page--json-list .mail-records-shell::after {
    background: radial-gradient(circle, rgba(222, 227, 233, 0.18), transparent 72%);
}

.mail-ops-page--json-list .mail-search-field,
.mail-ops-page--json-list .mail-per-page select,
.mail-ops-page--json-list .mail-json-kv,
.mail-ops-page--json-list .mail-attachment-chip {
    border-color: rgba(198, 204, 214, 0.34);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 243, 246, 0.98));
    box-shadow: 0 12px 24px rgba(42, 49, 61, 0.07);
}

.mail-ops-page--json-list .mail-json-pill {
    background: linear-gradient(135deg, rgba(230, 234, 240, 0.95), rgba(245, 247, 249, 0.98));
    color: #384152;
}

.mail-home-hero--json-list .mail-home-hero__visual {
    min-height: 242px;
}

.mail-json-hero-art {
    position: relative;
    width: min(100%, 302px);
    aspect-ratio: 1.06;
    border-radius: 34px;
    border: 1px solid rgba(194, 202, 232, 0.5);
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 179, 205, 0.38), transparent 28%),
        radial-gradient(circle at 84% 22%, rgba(143, 213, 255, 0.34), transparent 24%),
        radial-gradient(circle at 72% 78%, rgba(255, 221, 139, 0.24), transparent 28%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.56), rgba(244, 248, 255, 0.34) 52%, rgba(242, 236, 255, 0.3));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.56),
        0 22px 44px rgba(27, 34, 50, 0.1);
    overflow: hidden;
    isolation: isolate;
}

.mail-json-hero-art::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 26px;
    border: 1px solid rgba(228, 233, 248, 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.mail-json-hero-art::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 78px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 177, 212, 0.26) 0%, rgba(135, 213, 255, 0.2) 42%, rgba(255, 226, 157, 0.08) 66%, rgba(255, 255, 255, 0) 78%);
    filter: blur(12px);
    opacity: 0.9;
    animation: mailJsonAuraShift 9.4s ease-in-out infinite;
    pointer-events: none;
}

.mail-json-hero-art__halo {
    position: absolute;
    top: 20px;
    right: 18px;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.56) 0%, rgba(176, 223, 255, 0.26) 34%, rgba(255, 190, 214, 0.18) 56%, rgba(255, 255, 255, 0) 76%);
    filter: blur(14px);
    opacity: 0.92;
    animation: mailJsonHaloPulse 8.8s ease-in-out infinite;
}

.mail-json-hero-art__quote {
    position: absolute;
    z-index: 0;
    color: rgba(255, 255, 255, 0.84);
    font: 700 4.4rem / 0.74 "Oxanium", sans-serif;
    text-shadow:
        0 12px 24px rgba(76, 92, 138, 0.2),
        0 0 18px rgba(255, 255, 255, 0.38);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
    animation: mailJsonQuoteDrift 7.4s ease-in-out infinite;
}

.mail-json-hero-art__quote--open {
    top: 22px;
    left: 24px;
    background: linear-gradient(180deg, rgba(255, 196, 216, 0.96), rgba(138, 211, 255, 0.86));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mail-json-hero-art__quote--close {
    right: 34px;
    bottom: 88px;
    font-size: 3.6rem;
    background: linear-gradient(180deg, rgba(255, 221, 153, 0.98), rgba(196, 170, 255, 0.84));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation-name: mailJsonQuoteDriftFlip;
    animation-delay: 0.8s;
}

.mail-json-hero-art__mail-token {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 14px 26px rgba(42, 48, 67, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: mailJsonMailFloat 6.8s ease-in-out infinite;
}

.mail-json-hero-art__mail-token--1 {
    top: 30px;
    right: 26px;
    width: 42px;
    height: 42px;
    background: linear-gradient(145deg, rgba(255, 236, 244, 0.92), rgba(255, 214, 160, 0.7));
}

.mail-json-hero-art__mail-token--2 {
    bottom: 90px;
    left: 20px;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(232, 248, 255, 0.92), rgba(187, 225, 255, 0.72));
    animation-delay: 0.9s;
}

.mail-json-hero-art__mail-token--3 {
    right: 26px;
    bottom: 126px;
    width: 34px;
    height: 34px;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(244, 235, 255, 0.92), rgba(233, 205, 255, 0.7));
    animation-delay: 1.6s;
}

.mail-json-hero-art__mail-icon {
    position: relative;
    width: 18px;
    height: 13px;
    border: 1.5px solid rgba(74, 88, 125, 0.68);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.74);
}

.mail-json-hero-art__mail-icon::before,
.mail-json-hero-art__mail-icon::after {
    content: "";
    position: absolute;
    top: 1px;
    width: 9px;
    height: 1.5px;
    border-radius: 999px;
    background: rgba(74, 88, 125, 0.62);
    transform-origin: center;
}

.mail-json-hero-art__mail-icon::before {
    left: 0;
    transform: translateX(1px) translateY(4px) rotate(33deg);
}

.mail-json-hero-art__mail-icon::after {
    right: 0;
    transform: translateX(-1px) translateY(4px) rotate(-33deg);
}

.mail-json-hero-art__bubble {
    position: absolute;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.64);
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.42) 24%, rgba(255, 255, 255, 0.1) 42%),
        linear-gradient(180deg, rgba(255, 236, 247, 0.58), rgba(224, 242, 255, 0.28) 58%, rgba(255, 233, 173, 0.16));
    box-shadow:
        inset 8px 10px 14px rgba(255, 255, 255, 0.72),
        inset -10px -12px 16px rgba(141, 175, 255, 0.12),
        0 12px 22px rgba(45, 52, 68, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mail-json-hero-art__bubble::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 42%;
    height: 42%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
    opacity: 0.82;
}

.mail-json-hero-art__bubble--1 {
    top: 54px;
    left: 42px;
    width: 18px;
    height: 18px;
    animation: mailJsonBubbleFloat 5.8s ease-in-out infinite;
}

.mail-json-hero-art__bubble--2 {
    top: 76px;
    right: 72px;
    width: 13px;
    height: 13px;
    animation: mailJsonBubbleFloatAlt 6.2s ease-in-out infinite 0.8s;
}

.mail-json-hero-art__bubble--3 {
    right: 46px;
    bottom: 102px;
    width: 28px;
    height: 28px;
    animation: mailJsonBubbleFloat 7s ease-in-out infinite 1.2s;
}

.mail-json-hero-art__bubble--4 {
    left: 58px;
    bottom: 134px;
    width: 11px;
    height: 11px;
    animation: mailJsonBubbleFloatAlt 5.4s ease-in-out infinite 0.4s;
}

.mail-json-hero-art__panel {
    position: absolute;
    inset: 38px 36px 72px;
    z-index: 1;
    display: grid;
    gap: 12px;
    padding: 18px 16px 16px;
    border-radius: 26px;
    border: 1px solid rgba(235, 240, 251, 0.56);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 248, 255, 0.44));
    box-shadow:
        0 18px 32px rgba(31, 37, 48, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: mailJsonPanelDrift 7.6s ease-in-out infinite;
}

.mail-json-hero-art__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 183, 211, 0.18), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(145, 215, 255, 0.18), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.mail-json-hero-art__panel-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mail-json-hero-art__dots {
    display: flex;
    gap: 6px;
}

.mail-json-hero-art__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(61, 72, 96, 0.18);
}

.mail-json-hero-art__dot:nth-child(1) {
    background: linear-gradient(135deg, rgba(255, 156, 193, 0.96), rgba(255, 214, 159, 0.94));
}

.mail-json-hero-art__dot:nth-child(2) {
    background: linear-gradient(135deg, rgba(133, 213, 255, 0.98), rgba(177, 241, 255, 0.94));
}

.mail-json-hero-art__dot:nth-child(3) {
    background: linear-gradient(135deg, rgba(190, 166, 255, 0.98), rgba(255, 188, 229, 0.94));
}

.mail-json-hero-art__panel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(230, 194, 255, 0.52);
    color: #7f57c7;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(255, 241, 249, 0.92), rgba(233, 238, 255, 0.84));
    box-shadow: 0 8px 14px rgba(54, 63, 85, 0.08);
}

.mail-json-hero-art__lane {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.42);
}

.mail-json-hero-art__lane--wide {
    background: linear-gradient(135deg, rgba(255, 237, 246, 0.84), rgba(230, 243, 255, 0.82));
    box-shadow: 0 12px 20px rgba(31, 39, 51, 0.1);
    animation: mailJsonLanePulse 4.2s ease-in-out infinite;
}

.mail-json-hero-art__lane--soft {
    background: linear-gradient(135deg, rgba(255, 247, 224, 0.84), rgba(233, 246, 255, 0.76));
}

.mail-json-hero-art__line {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 174, 207, 0.38), rgba(151, 208, 255, 0.42) 58%, rgba(255, 219, 141, 0.32));
}

.mail-json-hero-art__line--strong,
.mail-json-hero-art__line--wide {
    width: 100%;
}

.mail-json-hero-art__line--mid {
    width: 74%;
}

.mail-json-hero-art__line--short {
    width: 44px;
}

.mail-json-hero-art__chip {
    width: 38px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 175, 204, 0.94), rgba(137, 211, 255, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.mail-json-hero-art__chip--soft {
    background: linear-gradient(135deg, rgba(255, 223, 141, 0.98), rgba(255, 173, 208, 0.88));
}

.mail-json-hero-art__nodes {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
}

.mail-json-hero-art__node {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 165, 197, 0.98), rgba(255, 228, 155, 0.98));
    box-shadow: 0 8px 14px rgba(37, 44, 56, 0.08);
    animation: mailJsonNodePulse 4.8s ease-in-out infinite;
}

.mail-json-hero-art__node:nth-child(2) {
    background: linear-gradient(135deg, rgba(139, 215, 255, 0.98), rgba(188, 243, 255, 0.96));
}

.mail-json-hero-art__node:nth-child(3) {
    background: linear-gradient(135deg, rgba(194, 168, 255, 0.98), rgba(255, 191, 228, 0.96));
}

.mail-json-hero-art__node:nth-child(4) {
    background: linear-gradient(135deg, rgba(255, 214, 143, 0.98), rgba(255, 173, 202, 0.96));
}

.mail-json-hero-art__node:nth-child(2) {
    animation-delay: 0.5s;
}

.mail-json-hero-art__node:nth-child(3) {
    animation-delay: 1s;
}

.mail-json-hero-art__node:nth-child(4) {
    animation-delay: 1.5s;
}

.mail-json-hero-art__wave {
    position: absolute;
    left: -18%;
    width: 136%;
    border-radius: 46% 54% 0 0 / 100% 100% 0 0;
    transform-origin: center bottom;
}

.mail-json-hero-art__wave--back {
    bottom: -44px;
    height: 118px;
    background: linear-gradient(90deg, rgba(150, 189, 255, 0.28), rgba(199, 170, 255, 0.5) 52%, rgba(255, 181, 216, 0.42));
    animation: mailJsonWaveBack 8.8s ease-in-out infinite;
}

.mail-json-hero-art__wave--mid {
    bottom: -34px;
    height: 98px;
    background: linear-gradient(90deg, rgba(158, 240, 221, 0.36), rgba(141, 205, 255, 0.58) 48%, rgba(255, 218, 135, 0.52));
    animation: mailJsonWaveMid 6.6s ease-in-out infinite;
}

.mail-json-hero-art__wave--front {
    bottom: -28px;
    height: 84px;
    background: linear-gradient(90deg, rgba(255, 182, 205, 0.92), rgba(141, 214, 255, 0.9) 52%, rgba(255, 226, 143, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    animation: mailJsonWaveFront 5.4s ease-in-out infinite;
}

.mail-home-hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mail-home-stack {
    position: relative;
    width: min(100%, 286px);
    aspect-ratio: 1.08;
    border-radius: 30px;
    border: 1px solid rgba(202, 194, 220, 0.46);
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 194, 213, 0.2), transparent 28%),
        radial-gradient(circle at 78% 78%, rgba(147, 183, 255, 0.18), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(240, 234, 245, 0.18));
    overflow: hidden;
}

.mail-home-stack::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 26px;
    border: 1px dashed rgba(178, 166, 204, 0.26);
}

.mail-home-stack__sheet {
    position: absolute;
    left: 50%;
    width: 188px;
    border-radius: 24px;
    border: 1px solid rgba(205, 195, 225, 0.56);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(238, 232, 246, 0.56));
    box-shadow: 0 16px 28px rgba(22, 29, 47, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateX(-50%);
}

.mail-home-stack__sheet--back {
    top: 52px;
    height: 168px;
    transform: translateX(-50%) rotate(-8deg);
    opacity: 0.64;
    animation: mailHomeSheetBack 8s ease-in-out infinite;
}

.mail-home-stack__sheet--mid {
    top: 40px;
    height: 176px;
    transform: translateX(-50%) rotate(6deg);
    opacity: 0.78;
    animation: mailHomeSheetMid 9s ease-in-out infinite;
}

.mail-home-stack__sheet--front {
    top: 28px;
    height: 188px;
    padding: 18px 16px;
    animation: mailHomeSheetFront 7.2s ease-in-out infinite;
}

.mail-home-stack__header {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.mail-home-stack__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(223, 111, 144, 0.86), rgba(149, 181, 255, 0.9));
}

.mail-home-stack__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.42);
}

.mail-home-stack__row--active {
    background: linear-gradient(135deg, rgba(255, 241, 246, 0.86), rgba(233, 240, 255, 0.88));
    box-shadow: 0 10px 18px rgba(26, 33, 52, 0.08);
    animation: mailHomeRowGlow 3.2s ease-in-out infinite;
}

.mail-home-stack__line {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(214, 102, 136, 0.2), rgba(124, 165, 255, 0.28));
}

.mail-home-stack__line--wide {
    width: 100%;
}

.mail-home-stack__line--mid {
    width: 78%;
}

.mail-home-stack__line--short {
    width: 44px;
}

.mail-home-stack__pill {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(227, 108, 145, 0.92), rgba(150, 186, 255, 0.92));
}

.mail-home-stack__pill--soft {
    background: linear-gradient(135deg, rgba(255, 221, 170, 0.98), rgba(250, 191, 116, 0.94));
}

.mail-home-stack__badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(210, 199, 230, 0.6);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 18px rgba(19, 26, 43, 0.08);
}

.mail-home-stack__badge--new {
    top: 38px;
    right: 26px;
    color: #bc5d7e;
    animation: mailHomeBadgeFloat 4.8s ease-in-out infinite;
}

.mail-home-stack__badge--json {
    bottom: 34px;
    left: 30px;
    color: #5b7fc7;
    animation: mailHomeBadgeFloat 5.6s ease-in-out infinite reverse;
}

.mail-home-stack__scanner {
    position: absolute;
    left: 44px;
    right: 44px;
    top: 72px;
    height: 74px;
    border-radius: 22px;
    border: 1px solid rgba(208, 196, 228, 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: mailHomeScannerMove 5.4s ease-in-out infinite;
}

.portal-body:has(.mail-ops-page) .app-shell {
    width: min(1520px, calc(100vw - clamp(16px, 4vw, 48px)));
    margin: 0 auto;
}

.portal-body:has(.mail-ops-page) .page-shell {
    justify-items: stretch;
}

.portal-body:has(.mail-ops-page) .site-header,
.portal-body:has(.mail-ops-page) .site-footer,
.portal-body:has(.mail-ops-page) .mail-ops-page,
.portal-body:has(.mail-ops-page) .mail-records-shell,
.portal-body:has(.mail-ops-page) .mail-records-card {
    width: 100%;
    max-width: 100%;
}

.portal-body:has(.mail-ops-page) [data-records-mount],
.portal-body:has(.mail-ops-page) .mail-home-hero,
.portal-body:has(.mail-ops-page) .mail-records-shell,
.portal-body:has(.mail-ops-page) .mail-records-card {
    min-width: 0;
    justify-self: stretch;
}

.portal-body:has(.mail-ops-page) .mail-records-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.portal-body:has(.mail-ops-page) .mail-records-table th,
.portal-body:has(.mail-ops-page) .mail-records-table td {
    padding: 20px 18px;
    vertical-align: top;
}

.portal-body:has(.mail-ops-page) .mail-records-table td:nth-child(1) {
    width: auto;
}

.portal-body:has(.mail-ops-page) .mail-records-table td:nth-child(2) {
    width: auto;
}

.portal-body:has(.mail-ops-page) .mail-records-table td:nth-child(3) {
    width: auto;
    white-space: normal;
}

.portal-body:has(.mail-ops-page) .mail-records-table td:nth-child(4) {
    width: auto;
    white-space: normal;
}

.portal-body:has(.mail-ops-page) .mail-records-table td:nth-child(5) {
    width: auto;
    white-space: nowrap;
}

.portal-body:has(.mail-ops-page) .mail-records-table td:nth-child(6) {
    width: auto;
    white-space: nowrap;
}

.portal-body:has(.mail-ops-page) .mail-inline-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.portal-body:has(.mail-ops-page) .mail-records-table .mail-inline-button {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    height: 34px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.84rem;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    justify-content: center;
}

.portal-body:has(.mail-ops-page) .mail-records-table .mail-status {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    height: 34px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.84rem;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.portal-body:has(.mail-ops-page) .mail-attachment-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.portal-body:has(.mail-ops-page) .mail-attachment-chip {
    max-width: 100%;
    padding: 7px 9px;
    font-size: 0.9rem;
}

.portal-body:has(.mail-ops-page) .mail-status {
    padding: 8px 12px;
    font-size: 0.92rem;
}

.mail-records-shell,
.json-test-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(236, 229, 244, 0.56);
    background:
        radial-gradient(circle at 14% 18%, rgba(196, 182, 255, 0.22), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(235, 141, 170, 0.16), transparent 24%),
        linear-gradient(145deg, rgba(244, 240, 248, 0.97), rgba(236, 229, 242, 0.97) 48%, rgba(242, 231, 240, 0.97));
    box-shadow:
        0 24px 56px rgba(11, 17, 34, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.mail-records-shell::before,
.mail-records-shell::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
}

.mail-records-shell::before {
    top: -84px;
    right: -48px;
    width: 300px;
    height: 220px;
    border-radius: 44% 56% 52% 48%;
    background: radial-gradient(circle, rgba(204, 176, 255, 0.18), transparent 68%);
    filter: blur(4px);
}

.mail-records-shell::after {
    left: -70px;
    bottom: -94px;
    width: 360px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 165, 191, 0.14), transparent 72%);
}

.mail-records-card {
    width: 100%;
    overflow-x: auto;
}

.mail-records-table {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
}

.mail-records-shell {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

.mail-records-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 30px 32px 28px;
}

.mail-per-page {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
    color: #5f5675;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mail-per-page select {
    min-width: 86px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(143, 130, 171, 0.16);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(244, 238, 247, 0.92));
    color: #2b3146;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 0 8px 14px rgba(58, 48, 78, 0.05);
    outline: none;
}

.mail-search-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: min(320px, 100%);
    margin-left: auto;
    padding: 0 14px 0 42px;
    min-height: 40px;
    border-radius: 16px;
    border: 1px solid rgba(143, 130, 171, 0.18);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 238, 247, 0.92));
    box-shadow: 0 10px 16px rgba(58, 48, 78, 0.05);
}

.mail-search-field__icon {
    position: absolute;
    left: 14px;
    width: 14px;
    height: 14px;
    color: rgba(119, 102, 149, 0.72);
}

.mail-search-field__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mail-search-field__icon .ui-icon {
    width: 100%;
    height: 100%;
    font-size: 0.9rem;
}

.admin-search .ui-icon {
    width: 18px;
    height: 18px;
    font-size: 0.95rem;
}

.mail-search-field input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #2b3146;
    font-size: 0.82rem;
    font-weight: 700;
    outline: none;
}

.mail-search-field:focus-within {
    border-color: rgba(138, 108, 170, 0.26);
    box-shadow: 0 14px 24px rgba(58, 48, 78, 0.08);
}

.mail-search-field input::placeholder {
    color: rgba(93, 85, 118, 0.62);
}

.mail-records-table th,
.mail-records-table td {
    padding: 22px 22px;
    text-align: left;
    border-bottom: 1px solid rgba(125, 117, 150, 0.12);
}

.mail-records-table th {
    color: rgba(92, 85, 117, 0.86);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
}

.mail-records-table td {
    color: #2a3145;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    font-size: 0.92rem;
    line-height: 1.55;
}

.mail-records-table tbody tr {
    transition: transform 180ms ease, background-color 180ms ease;
}

.mail-records-table tbody tr:hover td {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 245, 250, 0.1));
}

.mail-records-table td:nth-child(1) {
    min-width: 220px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mail-records-table td:nth-child(2) {
    min-width: 300px;
}

.mail-records-table td:nth-child(5),
.mail-records-table td:nth-child(6) {
    white-space: nowrap;
}

.mail-records-table td:nth-child(4) {
    min-width: 220px;
}

.mail-records-table td:nth-child(3) {
    min-width: 160px;
}

.mail-records-table tr:last-child td {
    border-bottom: 0;
}

.mail-records-empty {
    text-align: center;
    color: #6d7383;
}

.mail-records-muted {
    color: #7c829a;
}

.mail-records-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.mail-records-footer:empty {
    display: none;
}

.mail-records-footer {
    gap: 8px;
    flex-wrap: wrap;
}

.mail-records-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid rgba(151, 136, 178, 0.18);
    background: rgba(255, 255, 255, 0.74);
    color: #4e4662;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(58, 48, 78, 0.05);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    cursor: pointer;
}

.mail-records-page:hover {
    transform: translateY(-1px);
    box-shadow: 0 15px 28px rgba(58, 48, 78, 0.08);
    filter: brightness(1.02);
}

.mail-records-page--active {
    color: #fffdfd;
    border-color: transparent;
    background: linear-gradient(135deg, #8d5b9d 0%, #a64d7a 58%, #6b67ac 100%);
    box-shadow: 0 16px 28px rgba(105, 79, 136, 0.18);
    cursor: default;
}

.mail-records-page--disabled {
    color: rgba(92, 84, 116, 0.48);
    background: rgba(255, 255, 255, 0.46);
    box-shadow: none;
    cursor: default;
}

.mail-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.mail-record-summary {
    display: grid;
    justify-items: start;
    gap: 10px;
}

.mail-json-cell {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.mail-json-cell__primary {
    color: #24304a;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mail-json-cell__secondary {
    color: #64718c;
    font-size: 0.82rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.mail-json-cell--request {
    gap: 12px;
}

.mail-json-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mail-json-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(129, 108, 165, 0.14), rgba(201, 130, 158, 0.16));
    color: #35405a;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.mail-json-kv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.mail-json-kv {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(182, 171, 204, 0.28);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(245, 240, 248, 0.92));
}

.mail-json-kv--compact {
    width: fit-content;
    max-width: 100%;
    min-width: 152px;
    justify-self: start;
}

.mail-json-kv span {
    color: #85789b;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mail-json-kv strong {
    color: #2a3145;
    font-size: 0.85rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.mail-records-table--json-list {
    min-width: 1260px;
}

.mail-records-table--json-list td:nth-child(1) {
    min-width: 230px;
}

.mail-records-table--json-list td:nth-child(2) {
    min-width: 220px;
}

.mail-records-table--json-list td:nth-child(3) {
    min-width: 250px;
}

.mail-records-table--json-list td:nth-child(4) {
    min-width: 280px;
}

.mail-records-table--json-list td:nth-child(5) {
    min-width: 170px;
}

.mail-records-table--json-list td:nth-child(6) {
    min-width: 220px;
    white-space: normal;
}

.mail-records-table--json-list td:nth-child(7) {
    min-width: 126px;
    white-space: nowrap;
}

.mail-records-table--json-list th:nth-child(7),
.mail-records-table--json-list td:nth-child(7) {
    padding-right: 42px;
}

.mail-inline-button {
    /*display: inline-flex;*/
    align-items: center;
    justify-content: center;
    /*min-width: 94px;*/
    /*min-height: 44px;*/
    /*padding: 10px 18px;*/
    border: 1px solid transparent;
    border-radius: 999px;
    color: #f9fbff;
    font-weight: 700;
    text-decoration: none;
    background-size: 180% 180%;
    box-shadow: 0 14px 28px rgba(61, 48, 83, 0.12);
    cursor: pointer;
    transition:
        transform 180ms ease,
        filter 180ms ease,
        box-shadow 180ms ease,
        background-position 220ms ease;
    overflow: hidden;
}

.mail-inline-button--primary {
    background-image: linear-gradient(135deg, #87599c 0%, #9a547c 48%, #5e6ab0 100%);
}

.mail-inline-button--soft {
    color: #333a51;
    border-color: rgba(175, 164, 196, 0.32);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 238, 247, 0.98));
}

.mail-inline-button--danger {
    color: #fff7fa;
    background-image: linear-gradient(135deg, #b94e6d 0%, #8e486e 58%, #764a8d 100%);
}

.mail-inline-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    background-position: 100% 50%;
    box-shadow: 0 18px 30px rgba(61, 48, 83, 0.16);
}

.mail-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mail-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 230px;
    padding: 9px 12px;
    border-radius: 16px;
    border: 1px solid rgba(182, 171, 204, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(245, 240, 248, 0.94));
    box-shadow: 0 12px 24px rgba(52, 45, 70, 0.08);
    color: #31384d;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.mail-attachment-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(52, 45, 70, 0.12);
    filter: brightness(1.02);
}

.mail-attachment-chip__type {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(136, 95, 167, 0.16), rgba(205, 112, 146, 0.16));
    color: #7a506f;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.mail-attachment-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    background-size: 180% 180%;
    will-change: transform, box-shadow, background-position;
}

.mail-status--processing {
    color: #8a5b1d;
    background: linear-gradient(135deg, rgba(255, 244, 221, 0.95), rgba(255, 236, 204, 0.98));
    box-shadow: 0 10px 22px rgba(214, 169, 92, 0.12);
    animation: statusProcessingDrift 3.4s ease-in-out infinite;
}

.mail-status--running {
    color: #355d8c;
    background: linear-gradient(120deg, rgba(229, 241, 255, 0.98), rgba(205, 227, 252, 0.98), rgba(234, 245, 255, 0.98));
    box-shadow: 0 10px 22px rgba(103, 145, 201, 0.14);
    animation: statusRunningFlow 2.8s ease-in-out infinite;
}

.mail-status--ready {
    color: #1e5f46;
    background: linear-gradient(135deg, rgba(183, 232, 203, 0.7), rgba(213, 241, 222, 0.84));
    box-shadow: 0 10px 24px rgba(85, 180, 126, 0.16);
    animation: statusReadyBloom 2.6s ease-in-out infinite;
}

.mail-status--failed {
    color: #8f304b;
    background: linear-gradient(135deg, rgba(255, 228, 236, 0.94), rgba(248, 214, 224, 0.92));
    box-shadow: 0 10px 22px rgba(184, 88, 120, 0.12);
}

.mail-status__brand {
    position: relative;
    display: inline-flex;
    width: 14px;
    height: 14px;
    animation: processingBrandSpin 2.8s linear infinite;
}

.mail-status__brand span {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(181, 121, 41, 0.95), rgba(255, 199, 105, 0.98));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.mail-status__brand span:nth-child(1) {
    top: 0;
    left: 4px;
    width: 6px;
    height: 6px;
}

.mail-status__brand span:nth-child(2) {
    right: 0;
    bottom: 1px;
    width: 6px;
    height: 6px;
}

.mail-status__brand span:nth-child(3) {
    left: 0;
    bottom: 1px;
    width: 6px;
    height: 6px;
}

.mail-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(57, 64, 90, 0.22);
    border-top-color: rgba(57, 64, 90, 0.9);
    border-radius: 50%;
    animation: rotateSlow 0.8s linear infinite, spinnerPulse 1.1s ease-in-out infinite;
}

.mail-status__icon {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
}

.mail-status__icon--ready {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, #f6fff9 0 18%, #83d3a3 32%, #36a16b 100%);
    box-shadow:
        0 0 0 4px rgba(113, 208, 153, 0.16),
        0 0 18px rgba(113, 208, 153, 0.34);
    animation: readyPulse 1.8s ease-in-out infinite;
}

[hidden] {
    display: none !important;
}

.record-preview-dialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 12px;
    border: 0;
    background: transparent;
}

.record-preview-dialog[open] {
    display: grid;
    align-items: stretch;
    justify-items: stretch;
}

.record-preview-dialog::backdrop {
    background: rgba(21, 27, 47, 0.2);
}

.record-preview-dialog__backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(19, 24, 40, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.record-preview-dialog__panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 22px;
    width: min(100%, 1680px);
    min-height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    margin: 0 auto;
    padding: 28px;
    border-radius: 32px;
    border: 1px solid rgba(235, 228, 244, 0.62);
    background: linear-gradient(145deg, rgba(241, 237, 248, 0.98), rgba(227, 224, 240, 0.98));
    box-shadow: 0 28px 60px rgba(12, 19, 36, 0.18);
    overflow: hidden;
}

.record-preview-dialog__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 12% 14%, rgba(193, 176, 255, 0.16), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(227, 158, 184, 0.14), transparent 24%);
    pointer-events: none;
}

.record-preview-dialog__panel > * {
    position: relative;
    z-index: 1;
}

.record-preview-dialog__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.record-preview-dialog__close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    color: #54627c;
    background: rgba(84, 98, 124, 0.1);
    cursor: pointer;
}

.record-preview-dialog__layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(420px, 1.22fr);
    gap: 20px;
    height: 100%;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
    transition: grid-template-columns 220ms ease;
}

.record-preview-dialog__layout--focus-email {
    grid-template-columns: minmax(0, 1fr);
}

.record-preview-dialog__layout--focus-json {
    grid-template-columns: minmax(0, 1fr);
}

.record-preview-dialog__layout--focus-email .record-preview-card[data-preview-panel="json"],
.record-preview-dialog__layout--focus-json .record-preview-card[data-preview-panel="email"] {
    display: none;
}

.record-preview-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    gap: 18px;
    padding: 24px;
    border-radius: 26px;
    border: 1px solid rgba(218, 210, 232, 0.72);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(247, 243, 251, 0.74)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        0 18px 40px rgba(31, 34, 62, 0.08);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.record-preview-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 14% 14%, rgba(198, 182, 255, 0.16), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(238, 165, 192, 0.14), transparent 24%);
    pointer-events: none;
}

.record-preview-card[data-preview-panel="email"] {
    border-color: rgba(223, 213, 198, 0.82);
    background:
        linear-gradient(145deg, rgba(255, 252, 246, 0.96), rgba(248, 242, 232, 0.94)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.56),
        0 18px 40px rgba(56, 44, 30, 0.08);
}

.record-preview-card[data-preview-panel="email"]::before {
    background:
        radial-gradient(circle at 16% 16%, rgba(236, 205, 152, 0.22), transparent 26%),
        radial-gradient(circle at 84% 18%, rgba(214, 176, 160, 0.16), transparent 24%);
}

.record-preview-card > * {
    position: relative;
    z-index: 1;
}

.record-preview-card__topbar,
.record-preview-card__head,
.record-preview-card__controls,
.record-preview-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.record-preview-card__topbar,
.record-preview-card__head {
    position: relative;
    z-index: 8;
}

.record-preview-card__toolbar {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.record-preview-card__head {
    justify-content: space-between;
}

.record-preview-card__topbar--json {
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(209, 199, 226, 0.56);
    z-index: 14;
}

.record-preview-card__head--json {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
}

.record-preview-card__controls--json {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.record-preview-card__context {
    display: grid;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    align-content: start;
}

.record-preview-card__head h3 {
    margin: 0;
    color: #1f2740;
    font: 700 1.08rem/1.2 "Oxanium", sans-serif;
}

.record-preview-card__eyebrow {
    margin: 0;
    color: #8d789f;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.record-preview-card__controls {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.record-preview-card__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.record-preview-card__editing-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(205, 170, 116, 0.36);
    background: linear-gradient(135deg, rgba(255, 247, 228, 0.96), rgba(255, 238, 207, 0.94));
    color: #8a5c1f;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.record-preview-card__editing-hint {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    color: #8a5c1f;
    font: 800 0.78rem/1 "Oxanium", sans-serif;
    cursor: help;
}

.record-preview-card__button--editing {
    box-shadow:
        0 0 0 4px rgba(157, 112, 182, 0.14),
        0 18px 34px rgba(82, 60, 112, 0.16);
}

.record-preview-card__menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 12;
}

.record-preview-card__menu-toggle {
    width: 40px;
    height: 40px;
    display: inline-grid;
    gap: 4px;
    place-content: center;
    border: 1px solid rgba(202, 192, 222, 0.74);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 239, 248, 0.98));
    box-shadow: 0 12px 24px rgba(44, 38, 60, 0.08);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.record-preview-card__menu-toggle:hover,
.record-preview-card__menu-toggle.is-open {
    transform: translateY(-1px);
    border-color: rgba(157, 112, 182, 0.46);
    box-shadow: 0 16px 28px rgba(44, 38, 60, 0.12);
}

.record-preview-card__menu-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: #5f5674;
}

.record-preview-card__menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    pointer-events: auto;
    min-width: 196px;
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(214, 205, 228, 0.74);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 240, 250, 0.98));
    box-shadow: 0 18px 36px rgba(39, 34, 58, 0.14);
}

.record-preview-card__menu-panel .record-preview-card__button {
    width: 100%;
    justify-content: flex-start;
    max-width: none;
}

.record-preview-card--json {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    overflow: visible;
}

.record-preview-structured {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: auto;
    padding: 10px 6px 8px 2px;
    box-sizing: border-box;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.record-preview-structured__root {
    display: grid;
    gap: 16px;
}

.record-preview-structured-shell {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(248, 244, 252, 0.94), rgba(239, 232, 247, 0.98));
}

.record-preview-structured__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(173, 162, 196, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #4e4563;
    font: 700 0.76rem/1 "Manrope", sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.record-preview-structured__action:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 12px 20px rgba(45, 39, 63, 0.08);
}

.record-preview-structured__action--primary {
    border-color: transparent;
    color: #fafcff;
    background: linear-gradient(135deg, #87599c 0%, #9a547c 48%, #5e6ab0 100%);
}

.record-preview-structured-drill {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    box-sizing: border-box;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(245, 239, 250, 0.92), rgba(232, 224, 243, 0.98));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.record-preview-drill {
    display: grid;
    gap: 16px;
    width: 100%;
    min-height: 100%;
    padding: 18px;
    box-sizing: border-box;
    border-radius: 24px;
    border: 1px solid rgba(203, 191, 224, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 18px 36px rgba(45, 39, 64, 0.14);
}

.record-preview-drill--depth-1 {
    background: linear-gradient(180deg, rgba(247, 242, 251, 0.98), rgba(236, 229, 246, 0.99));
}

.record-preview-drill--depth-2 {
    background: linear-gradient(180deg, rgba(241, 233, 248, 0.98), rgba(228, 219, 241, 0.99));
    border-color: rgba(188, 171, 215, 0.96);
}

.record-preview-drill--depth-3 {
    background: linear-gradient(180deg, rgba(234, 224, 246, 0.99), rgba(220, 209, 236, 0.99));
    border-color: rgba(179, 161, 209, 0.98);
}

.record-preview-drill--depth-4 {
    background: linear-gradient(180deg, rgba(227, 216, 242, 0.99), rgba(212, 199, 231, 0.99));
    border-color: rgba(172, 153, 203, 0.99);
}

.record-preview-drill__head,
.record-preview-drill__nav,
.record-preview-drill__actions,
.record-preview-drill__toolbar,
.record-preview-nav-card__head,
.record-preview-nav-card__meta,
.record-preview-nav-card__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.record-preview-drill__head,
.record-preview-nav-card__head {
    justify-content: space-between;
}

.record-preview-drill__head,
.record-preview-drill__toolbar {
    flex-wrap: wrap;
}

.record-preview-drill__actions,
.record-preview-nav-card__meta {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.record-preview-drill__copy,
.record-preview-nav-card__copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.record-preview-drill__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(177, 164, 201, 0.44);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #4f4763;
    font: 700 0.78rem/1 "Manrope", sans-serif;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.record-preview-drill__back:hover {
    transform: translateY(-1px);
    border-color: rgba(144, 111, 170, 0.48);
    box-shadow: 0 12px 22px rgba(46, 39, 63, 0.1);
}

.record-preview-drill__path {
    margin: 0;
    color: #7d7394;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.35;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    text-transform: none;
}

.record-preview-drill__path::-webkit-scrollbar {
    display: none;
}

.record-preview-nav-card__eyebrow {
    margin: 0;
    color: #857997;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.record-preview-drill__title,
.record-preview-nav-card__title {
    margin: 0;
    color: #1f2740;
    font: 700 1rem/1.24 "Oxanium", sans-serif;
    overflow-wrap: anywhere;
}

.record-preview-nav-card__summary {
    margin: 0;
    color: #5a516f;
    font-size: 0.88rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.record-preview-drill__stack,
.record-preview-drill__branches,
.record-preview-drill__values {
    display: grid;
    gap: 12px;
}

.record-preview-drill__empty {
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed rgba(177, 164, 201, 0.54);
    color: #6f6484;
    font-size: 0.88rem;
    line-height: 1.6;
    background: rgba(255, 255, 255, 0.5);
}

.record-preview-nav-card {
    display: grid;
    gap: 8px;
}

.record-preview-nav-card__trigger {
    width: 100%;
    display: grid;
    gap: 10px;
    padding: 18px 20px;
    border: 1px solid rgba(182, 164, 210, 0.9);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(238, 229, 247, 0.97), rgba(225, 214, 238, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 14px 30px rgba(45, 39, 63, 0.1);
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.record-preview-nav-card__trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(139, 104, 171, 0.54);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        0 18px 34px rgba(45, 39, 63, 0.14);
}

.record-preview-drill--depth-2 .record-preview-nav-card__trigger {
    background: linear-gradient(180deg, rgba(234, 224, 245, 0.98), rgba(220, 207, 237, 0.99));
    border-color: rgba(176, 157, 205, 0.94);
}

.record-preview-drill--depth-3 .record-preview-nav-card__trigger,
.record-preview-drill--depth-4 .record-preview-nav-card__trigger {
    background: linear-gradient(180deg, rgba(228, 216, 242, 0.99), rgba(211, 197, 230, 0.99));
    border-color: rgba(170, 149, 200, 0.96);
}

.record-preview-nav-card__meta {
    justify-content: flex-end;
    align-items: center;
}

.record-preview-nav-card__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(186, 171, 211, 0.42);
    background: rgba(255, 255, 255, 0.7);
    color: #5d536f;
    font: 700 0.7rem/1 "Manrope", sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.record-preview-nav-card__arrow {
    color: #6e5f87;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1;
}

.record-preview-nav-card__actions {
    display: flex;
    justify-content: flex-end;
}

.record-preview-code-preview {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(202, 192, 222, 0.62);
    background: rgba(21, 24, 36, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.record-preview-code-preview__line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: calc(var(--preview-indent, 0) * 18px);
    font: 700 0.82rem/1.5 "Oxanium", sans-serif;
}

.record-preview-code-preview__brace {
    color: #4db2ff;
}

.record-preview-code-preview__key {
    color: #7cee8b;
}

.record-preview-code-preview__separator {
    color: rgba(255, 255, 255, 0.68);
}

.record-preview-code-preview__value {
    color: #ffd84d;
}

.record-preview-section,
.record-preview-array,
.record-preview-list,
.record-preview-accordion__body {
    display: grid;
    gap: 14px;
}

.record-preview-section,
.record-preview-array,
.record-preview-list {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(214, 205, 228, 0.66);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(243, 238, 249, 0.62));
}

.record-preview-section .record-preview-section,
.record-preview-section .record-preview-array,
.record-preview-section .record-preview-list,
.record-preview-section .record-preview-accordion,
.record-preview-array .record-preview-section,
.record-preview-array .record-preview-array,
.record-preview-array .record-preview-list,
.record-preview-array .record-preview-accordion,
.record-preview-list .record-preview-section,
.record-preview-list .record-preview-array,
.record-preview-list .record-preview-list,
.record-preview-list .record-preview-accordion,
.record-preview-accordion .record-preview-section,
.record-preview-accordion .record-preview-array,
.record-preview-accordion .record-preview-list,
.record-preview-accordion .record-preview-accordion {
    background: linear-gradient(180deg, rgba(236, 228, 246, 0.94), rgba(224, 215, 237, 0.98));
    border-color: rgba(190, 177, 215, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.record-preview-section .record-preview-accordion .record-preview-section,
.record-preview-section .record-preview-accordion .record-preview-array,
.record-preview-section .record-preview-accordion .record-preview-list,
.record-preview-section .record-preview-accordion .record-preview-accordion,
.record-preview-array .record-preview-accordion .record-preview-section,
.record-preview-array .record-preview-accordion .record-preview-array,
.record-preview-array .record-preview-accordion .record-preview-list,
.record-preview-array .record-preview-accordion .record-preview-accordion,
.record-preview-accordion .record-preview-accordion .record-preview-section,
.record-preview-accordion .record-preview-accordion .record-preview-array,
.record-preview-accordion .record-preview-accordion .record-preview-list,
.record-preview-accordion .record-preview-accordion .record-preview-accordion {
    background: linear-gradient(180deg, rgba(226, 217, 239, 0.98), rgba(211, 201, 230, 1));
    border-color: rgba(176, 161, 202, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.record-preview-section__head,
.record-preview-array__head,
.record-preview-list__head,
.record-preview-accordion__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.record-preview-section__head h4,
.record-preview-array__head h4,
.record-preview-list__head h4,
.record-preview-accordion__summary strong {
    margin: 0;
    color: #202941;
    font: 700 0.98rem/1.24 "Oxanium", sans-serif;
}

.record-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.record-preview-field {
    display: grid;
    gap: 8px;
}

.record-preview-field__label {
    color: #7d7391;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.record-preview-field__control {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid rgba(205, 196, 222, 0.84);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: #263149;
    font: 600 0.92rem/1.5 "Manrope", sans-serif;
    resize: vertical;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.record-preview-field__control:focus {
    border-color: rgba(143, 104, 171, 0.54);
    box-shadow: 0 0 0 4px rgba(157, 112, 182, 0.12);
}

.record-preview-field__control:disabled {
    background: rgba(247, 244, 250, 0.82);
    color: #334058;
    cursor: default;
}

.record-preview-array__body,
.record-preview-list__items {
    display: grid;
    gap: 12px;
}

.record-preview-accordion {
    border: 1px solid rgba(205, 196, 222, 0.78);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(242, 236, 249, 0.92), rgba(231, 223, 242, 0.96));
    overflow: hidden;
}

.record-preview-accordion[open] {
    box-shadow: 0 12px 24px rgba(42, 38, 60, 0.08);
}

.record-preview-accordion__summary {
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.record-preview-accordion__summary::-webkit-details-marker {
    display: none;
}

.record-preview-accordion__summary::after {
    content: "+";
    margin-left: auto;
    color: #7d6f96;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.record-preview-accordion[open] .record-preview-accordion__summary::after {
    content: "−";
}

.record-preview-accordion__controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.record-preview-accordion__body {
    padding: 0 18px 18px;
}

.record-preview-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.record-preview-card__button {
    min-width: 0;
    min-height: 40px;
    padding-inline: 16px;
}

.record-preview-card--json {
    grid-template-rows: auto auto auto minmax(0, 1fr);
}

.record-preview-card__details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.record-preview-detail {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(214, 205, 228, 0.58);
}

.record-preview-detail span {
    color: #877d9c;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.record-preview-detail strong {
    color: #2a3145;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.record-preview-dialog__content,
.record-preview-dialog__json-editor {
    width: 100%;
    margin: 0;
    border: 1px solid rgba(209, 201, 224, 0.8);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.56);
    color: #20273a;
    font: 500 0.92rem/1.75 "Manrope", sans-serif;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.record-preview-dialog__content {
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: auto;
    padding: 20px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.record-preview-dialog__content--email {
    min-height: 0;
}

.record-preview-email-shell {
    position: relative;
    min-height: 0;
}

.record-preview-email-copy {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 2;
}

.record-preview-email-copy[disabled] {
    opacity: 0.48;
    cursor: not-allowed;
}

.record-preview-email-shell .record-preview-dialog__content--email {
    padding-top: 58px;
}

.record-preview-dialog__json-editor {
    min-height: 0;
    height: 100%;
    max-height: none;
    padding: 20px;
    resize: vertical;
    overflow: auto;
    outline: none;
}

.record-preview-dialog__json-editor--editing {
    border-color: rgba(141, 103, 168, 0.54);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 0 0 4px rgba(157, 112, 182, 0.12);
}

.record-preview-dialog__processing {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(224, 196, 142, 0.46);
    background: linear-gradient(135deg, rgba(255, 247, 229, 0.94), rgba(255, 238, 209, 0.92));
    color: #7b5721;
}

.record-preview-dialog__processing strong {
    display: block;
    margin-bottom: 4px;
    color: #6d4a18;
}

.record-preview-dialog__processing p {
    margin: 0;
    color: #8d6830;
    line-height: 1.65;
}

.record-preview-dialog__processing-mark {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 214, 126, 0.96), rgba(238, 177, 84, 0.92));
    box-shadow: 0 14px 28px rgba(192, 140, 46, 0.18);
    animation: processingBrandFloat 2.8s ease-in-out infinite;
}

.record-preview-dialog__processing-mark span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
}

.record-preview-dialog__processing-mark span:nth-child(1) {
    top: 9px;
    left: 17px;
}

.record-preview-dialog__processing-mark span:nth-child(2) {
    right: 8px;
    bottom: 10px;
}

.record-preview-dialog__processing-mark span:nth-child(3) {
    left: 8px;
    bottom: 10px;
}

.record-delete-dialog {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    background: transparent;
}

.record-delete-dialog::backdrop {
    background: rgba(15, 18, 34, 0.18);
}

.record-delete-dialog__backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(15, 18, 34, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.record-delete-dialog__panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(235, 228, 244, 0.62);
    background: linear-gradient(145deg, rgba(242, 237, 246, 0.98), rgba(232, 226, 239, 0.98));
    box-shadow: 0 28px 60px rgba(12, 19, 36, 0.18);
}

.record-delete-dialog__panel > * {
    position: relative;
    z-index: 1;
}

.record-delete-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.record-delete-dialog__head strong {
    color: #1f2740;
    font: 700 1.1rem/1 "Oxanium", sans-serif;
}

.record-delete-dialog__close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    color: #54627c;
    background: rgba(84, 98, 124, 0.1);
    cursor: pointer;
}

.record-delete-dialog__text {
    margin: 0;
    color: #40475d;
    font-size: 0.96rem;
    line-height: 1.8;
}

.record-delete-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.record-delete-dialog__button {
    min-width: 112px;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.record-delete-dialog__button:hover,
.record-delete-dialog__close:hover {
    transform: translateY(-1px);
}

.record-delete-dialog__button--soft {
    color: #20283d;
    border-color: rgba(170, 162, 190, 0.32);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 238, 247, 0.98));
}

.record-delete-dialog__button--danger {
    color: #fff7fa;
    background: linear-gradient(135deg, #b94e6d 0%, #8e486e 58%, #764a8d 100%);
    box-shadow: 0 14px 28px rgba(88, 49, 79, 0.16);
}

.record-delete-dialog__button--primary {
    color: #fffafc;
    background: linear-gradient(135deg, #87599c 0%, #9a547c 48%, #5e6ab0 100%);
    box-shadow: 0 14px 28px rgba(72, 55, 104, 0.16);
}

.json-test-card {
    width: min(1120px, 100%);
    padding: 28px;
}

@keyframes statusGlow {
    0%,
    100% {
        box-shadow: inset 0 0 0 1px rgba(112, 197, 146, 0.04);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(168, 222, 187, 0.12);
        transform: translateY(-1px);
    }
}

@keyframes readyPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 4px rgba(113, 208, 153, 0.16),
            0 0 18px rgba(113, 208, 153, 0.34);
    }
    50% {
        transform: scale(1.12);
        box-shadow:
            0 0 0 7px rgba(113, 208, 153, 0.1),
            0 0 24px rgba(113, 208, 153, 0.28);
    }
}

@keyframes spinnerPulse {
    0%,
    100% {
        opacity: 0.72;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes processingFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    35% {
        transform: translateY(-1px) translateX(1px);
    }
    70% {
        transform: translateY(1px) translateX(-1px);
    }
}

@keyframes statusProcessingDrift {
    0%,
    100% {
        transform: translateY(0) scale(1);
        background-position: 0% 50%;
        box-shadow: 0 10px 22px rgba(214, 169, 92, 0.12);
    }
    50% {
        transform: translateY(-1px) scale(1.03);
        background-position: 100% 50%;
        box-shadow: 0 14px 28px rgba(214, 169, 92, 0.2);
    }
}

@keyframes statusRunningFlow {
    0%,
    100% {
        transform: translateX(0);
        background-position: 0% 50%;
        box-shadow: 0 10px 22px rgba(103, 145, 201, 0.14);
    }
    35% {
        transform: translateX(1px) translateY(-1px);
        background-position: 70% 50%;
        box-shadow: 0 13px 26px rgba(103, 145, 201, 0.2);
    }
    70% {
        transform: translateX(-1px) translateY(1px);
        background-position: 100% 50%;
        box-shadow: 0 11px 24px rgba(103, 145, 201, 0.18);
    }
}

@keyframes statusReadyBloom {
    0%,
    100% {
        transform: translateY(0) scale(1);
        background-position: 0% 50%;
        box-shadow: 0 10px 24px rgba(85, 180, 126, 0.16);
    }
    45% {
        transform: translateY(-2px) scale(1.04);
        background-position: 100% 50%;
        box-shadow: 0 14px 30px rgba(85, 180, 126, 0.24);
    }
    70% {
        transform: translateY(-1px) scale(1.02);
        box-shadow: 0 12px 27px rgba(85, 180, 126, 0.2);
    }
}

@keyframes processingBrandSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes processingBrandFloat {
    0%,
    100% {
        transform: translateY(0);
        box-shadow: 0 14px 28px rgba(192, 140, 46, 0.18);
    }
    50% {
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(192, 140, 46, 0.24);
    }
}

@keyframes monitoringBarLift {
    0%,
    100% {
        transform: translateY(0);
        filter: brightness(1);
    }
    50% {
        transform: translateY(-5px);
        filter: brightness(1.08);
    }
}

@keyframes monitoringRotateFrame {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes monitoringCorePulse {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.08) rotate(45deg);
        filter: brightness(1.08);
    }
}

@keyframes monitoringPacketLeft {
    0% {
        transform: translateX(0) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: translateX(74px) rotate(180deg);
        opacity: 0.3;
    }
}

@keyframes monitoringPacketRight {
    0% {
        transform: translateX(0) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: translateX(-74px) rotate(-180deg);
        opacity: 0.3;
    }
}

@keyframes adminDialogBackdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes adminDialogPanelIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.992);
        filter: blur(3px);
    }

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

@keyframes mailHomeSheetBack {
    0%,
    100% {
        transform: translateX(-50%) rotate(-8deg) translateY(0);
    }
    50% {
        transform: translateX(-50%) rotate(-10deg) translateY(-4px);
    }
}

@keyframes mailHomeSheetMid {
    0%,
    100% {
        transform: translateX(-50%) rotate(6deg) translateY(0);
    }
    50% {
        transform: translateX(-50%) rotate(8deg) translateY(5px);
    }
}

@keyframes mailHomeSheetFront {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
        box-shadow: 0 16px 28px rgba(22, 29, 47, 0.08);
    }
    50% {
        transform: translateX(-50%) translateY(-5px);
        box-shadow: 0 22px 34px rgba(22, 29, 47, 0.12);
    }
}

@keyframes mailHomeRowGlow {
    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.015);
        filter: brightness(1.03);
    }
}

@keyframes mailHomeBadgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes mailHomeScannerMove {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(34px);
        opacity: 0.9;
    }
}

@keyframes mailJsonHaloPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.84;
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes mailJsonAuraShift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.82;
    }
    50% {
        transform: translate3d(-6px, 6px, 0) scale(1.08);
        opacity: 1;
    }
}

@keyframes mailJsonQuoteDrift {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-5px) rotate(-3deg);
    }
}

@keyframes mailJsonQuoteDriftFlip {
    0%,
    100% {
        transform: translateY(0) rotate(180deg);
    }
    50% {
        transform: translateY(-5px) rotate(183deg);
    }
}

@keyframes mailJsonMailFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, -7px, 0) rotate(-4deg);
    }
}

@keyframes mailJsonPanelDrift {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        box-shadow:
            0 16px 30px rgba(31, 37, 48, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }
    50% {
        transform: translateY(-4px) rotate(0.4deg);
        box-shadow:
            0 22px 38px rgba(31, 37, 48, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }
}

@keyframes mailJsonLanePulse {
    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.015);
        filter: brightness(1.03);
    }
}

@keyframes mailJsonNodePulse {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.72;
    }
    50% {
        transform: translateY(-3px) scale(1.08);
        opacity: 1;
    }
}

@keyframes mailJsonBubbleFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.74;
    }
    50% {
        transform: translate3d(6px, -12px, 0) scale(1.04);
        opacity: 1;
    }
}

@keyframes mailJsonBubbleFloatAlt {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.68;
    }
    50% {
        transform: translate3d(-8px, -14px, 0) scale(0.96);
        opacity: 0.94;
    }
}

@keyframes mailJsonWaveBack {
    0%,
    100% {
        transform: translateX(0) translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateX(-12px) translateY(4px) rotate(1deg);
    }
}

@keyframes mailJsonWaveMid {
    0%,
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    50% {
        transform: translateX(10px) translateY(3px) rotate(-1deg);
    }
}

@keyframes mailJsonWaveFront {
    0%,
    100% {
        transform: translateX(0) translateY(0) rotate(1deg);
    }
    50% {
        transform: translateX(-8px) translateY(2px) rotate(-1deg);
    }
}

.json-test-card__alert {
    margin-bottom: 18px;
}

.json-test-page {
    width: min(1120px, 100%);
    justify-self: center;
    padding-top: 88px;
}

@media (max-width: 1420px) {
    .portal-body:has(.mail-ops-page) .app-shell {
        width: min(100vw - 40px, 1520px);
    }

    .portal-body:has(.mail-ops-page) .mail-records-table {
        table-layout: auto;
        min-width: 1080px;
    }
}

.json-test-form {
    display: grid;
    gap: 20px;
}

.json-test-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.json-test-form input,
.json-test-form textarea {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid rgba(122, 129, 160, 0.24);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(250, 248, 253, 0.94), rgba(237, 234, 247, 0.96));
    color: #1e2538;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.json-test-form textarea {
    min-height: 360px;
    resize: vertical;
}

.json-test-form input::placeholder,
.json-test-form textarea::placeholder {
    color: #6f7690;
}

.json-test-form input:focus,
.json-test-form textarea:focus {
    border-color: rgba(99, 124, 198, 0.42);
    box-shadow: 0 0 0 5px rgba(99, 124, 198, 0.12);
}

.json-test-upload {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 22px 22px 20px;
    border-radius: 24px;
    border: 1px dashed rgba(146, 138, 184, 0.38);
    background:
        radial-gradient(circle at 88% 18%, rgba(229, 150, 181, 0.12), transparent 24%),
        radial-gradient(circle at 12% 78%, rgba(133, 159, 255, 0.12), transparent 28%),
        linear-gradient(145deg, rgba(248, 245, 252, 0.92), rgba(236, 232, 245, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 18px 32px rgba(45, 37, 67, 0.1);
    cursor: pointer;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.json-test-upload::after {
    content: "";
    position: absolute;
    inset: -40% auto auto -18%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 66%);
    animation: uploadGlow 7s ease-in-out infinite;
    pointer-events: none;
}

.json-test-upload:hover {
    transform: translateY(-2px);
    border-color: rgba(152, 142, 196, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 22px 36px rgba(45, 37, 67, 0.14);
}

.json-test-upload__title,
.json-test-upload__meta,
.json-test-upload__button,
.json-test-upload__list {
    position: relative;
    z-index: 1;
}

.json-test-upload__title {
    color: #26304a;
    font: 700 1rem/1 "Oxanium", sans-serif;
    letter-spacing: 0.04em;
}

.json-test-upload__meta {
    color: #6a7088;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.json-test-upload__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    color: #f9fbff;
    font-weight: 700;
    background: linear-gradient(135deg, #87599c 0%, #9a547c 48%, #5e6ab0 100%);
    box-shadow: 0 14px 28px rgba(61, 48, 83, 0.14);
}

.json-test-upload__list {
    color: #434b61;
    font-size: 0.92rem;
    line-height: 1.7;
}

.json-test-submit {
    width: 100%;
    padding: 18px 20px;
    border: 0;
    border-radius: 22px;
    color: #f9fbff;
    background: linear-gradient(135deg, #d55d7f, #8b53aa 58%, #5064b4);
    box-shadow: 0 18px 34px rgba(43, 39, 62, 0.18);
    font: 700 1rem/1 "Oxanium", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.json-test-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 22px 38px rgba(43, 39, 62, 0.22);
}

@keyframes uploadGlow {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.52;
    }
    50% {
        transform: translate3d(26px, 12px, 0) scale(1.08);
        opacity: 0.82;
    }
}

@keyframes drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(18px, -24px, 0) scale(1.08);
    }
}

@keyframes loginGradientShift {
    0% {
        background-position: 0% 30%;
    }

    100% {
        background-position: 100% 70%;
    }
}

@keyframes appGradientShift {
    0% {
        background-position: 0% 25%;
    }

    100% {
        background-position: 100% 75%;
    }
}

@keyframes appWaveMotion {
    0% {
        transform: perspective(600px) rotateX(68deg) translate3d(-2%, 0, 0);
    }

    100% {
        transform: perspective(600px) rotateX(68deg) translate3d(2%, -10px, 0);
    }
}

@keyframes waveMotion {
    0% {
        transform: translate3d(-3%, 0, 0);
    }

    100% {
        transform: translate3d(3%, -24px, 0);
    }
}

@keyframes createButtonDrift {
    0% {
        background-position: 0% 35%;
    }

    100% {
        background-position: 100% 65%;
    }
}

@keyframes toastFloatIn {
    from {
        opacity: 0;
        transform: translate(-50%, -12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes sway-left {
    0%,
    100% {
        transform: rotate(16deg) translateY(0);
    }

    50% {
        transform: rotate(20deg) translateY(18px);
    }
}

@keyframes sway-right {
    0%,
    100% {
        transform: rotate(-12deg) translateY(0);
    }

    50% {
        transform: rotate(-18deg) translateY(20px);
    }
}

@keyframes shelf {
    0%,
    100% {
        transform: scaleY(1) translateY(0);
    }

    50% {
        transform: scaleY(1.06) translateY(-10px);
    }
}

@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes floatY {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes siteHeaderFadeIn {
    from {
        opacity: 0;
        transform: translateY(-16px);
        filter: blur(8px);
    }

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

@keyframes pageShellFadeIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.995);
        filter: blur(10px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .portal-body::after,
    .site-header,
    .page-shell,
    .site-footer,
    .site-nav a,
    .site-nav a::before,
    .site-nav a::after,
    .mail-json-hero-art::before,
    .mail-json-hero-art::after,
    .mail-json-hero-art__halo,
    .mail-json-hero-art__quote,
    .mail-json-hero-art__mail-token,
    .mail-json-hero-art__bubble,
    .mail-json-hero-art__panel,
    .mail-json-hero-art__lane--wide,
    .mail-json-hero-art__node,
    .mail-json-hero-art__wave {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 1080px) {
    .site-header,
    .site-footer,
    .hero-card,
    .login-panel {
        grid-template-columns: 1fr;
    }

    .mail-home-hero {
        grid-template-columns: 1fr;
    }

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

    .monitoring-grid--top,
    .monitoring-grid--bottom {
        grid-template-columns: 1fr;
    }

    .monitoring-hero {
        grid-template-columns: 1fr;
    }

    .site-nav {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .site-header {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .header-user {
        justify-self: start;
    }

    .site-footer {
        grid-template-columns: 1fr;
        justify-items: start;
        row-gap: 14px;
    }

    .login-panel {
        width: min(860px, 100%);
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .login-panel__logo-stage {
        min-height: 280px;
    }
}

@media (max-width: 820px) {
    .app-shell {
        width: min(100vw - 16px, 100%);
    }

    .mail-home-hero {
        padding: 18px;
        gap: 18px;
    }

    .stats-grid,
    .monitoring-stats-grid {
        grid-template-columns: 1fr;
    }

    .site-header,
    .hero-card,
    .table-card,
    .login-panel,
    .site-footer {
        padding: 16px;
    }

    .login-panel__logo-stage,
    .login-panel__form-side {
        padding: 24px;
    }

    .table-wrap {
        overflow-x: auto;
    }

    .monitoring-bars {
        grid-template-columns: repeat(7, minmax(52px, 1fr));
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .monitoring-line-chart__labels {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .monitoring-line-chart__labels span:nth-child(n + 6) {
        display: none;
    }

    .footer-logos {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .site-footer strong {
        justify-self: start;
    }

    .admin-management-table,
    .admin-management-table thead,
    .admin-management-table tbody,
    .admin-management-table tr,
    .admin-management-table th,
    .admin-management-table td {
        display: block;
    }

    .admin-management-table thead {
        display: none;
    }

    .admin-management-table tr {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

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

    .admin-management-table td {
        padding: 8px 0;
        border: 0;
    }

    .admin-management-table td:last-child {
        padding-top: 14px;
    }

    .admin-confirm-actions {
        grid-template-columns: 1fr;
    }
}

/* Responsive polish for all Blade pages in resources/views/pages. */
html {
    overflow-x: hidden;
}

.portal-body:not(.portal-body--login),
.app-shell {
    min-height: 100dvh;
}

.app-shell {
    width: min(1520px, calc(100vw - clamp(16px, 4vw, 48px)));
}

.page-shell,
.page-shell > *,
.mail-ops-page,
.json-test-page,
.user-admin-page,
.hero-card,
.table-card,
.stat-card,
.mail-records-shell,
.mail-records-card,
.admin-table-wrap,
.json-test-card {
    min-width: 0;
    max-width: 100%;
}

.site-footer {
    margin-top: auto;
}

.site-header {
    min-width: 0;
}

.site-nav {
    min-width: 0;
    flex-wrap: wrap;
}

.header-user__trigger strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-records-card,
.admin-table-wrap,
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.mail-records-table {
    min-width: 1120px;
    table-layout: auto;
}

.admin-management-table {
    min-width: 680px;
}

.data-table {
    min-width: 760px;
}

.mail-records-table td:nth-child(1),
.mail-records-table td:nth-child(2),
.mail-records-table td:nth-child(4),
.admin-management-table td:nth-child(1),
.admin-management-table td:nth-child(2) {
    overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
    .portal-body:has(.mail-ops-page) .app-shell {
        width: min(1520px, calc(100vw - 32px));
    }

    .mail-ops-page {
        padding-top: 48px;
    }

    .user-admin-page {
        gap: 48px;
        padding-top: 40px;
    }

    .json-test-page {
        padding-top: 64px;
    }
}

@media (max-width: 1080px) {
    .app-shell,
    .portal-body:has(.mail-ops-page) .app-shell {
        width: min(100vw - 24px, 100%);
    }

    .site-header {
        gap: 16px;
    }

    .site-header.site-header--menu-ready {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        justify-items: stretch;
    }

    .site-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 12px 16px;
    }

    .site-header.site-header--menu-ready .site-nav {
        position: absolute;
        top: calc(100% + 12px);
        left: 18px;
        right: 18px;
        width: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        padding: 16px;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(18, 28, 46, 0.94), rgba(8, 14, 27, 0.92));
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 24px 60px rgba(9, 18, 38, 0.22);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition:
            opacity 220ms ease,
            transform 220ms ease,
            visibility 220ms ease;
        z-index: 30;
    }

    .site-header.site-header--menu-ready.is-menu-open .site-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-header.site-header--menu-ready .site-nav a {
        display: inline-flex;
        align-items: center;
        width: 100%;
        padding: 10px 4px;
    }

    .header-user {
        justify-self: start;
        max-width: 100%;
    }

    .site-header.site-header--menu-ready .site-header__actions {
        justify-self: end;
        gap: 10px;
        max-width: min(100%, 48vw);
    }

    .site-header.site-header--menu-ready .site-header__menu-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }

    .site-header.site-header--menu-ready .header-user {
        justify-self: end;
    }

    .header-user__trigger {
        max-width: min(100%, 260px);
    }

    .site-header.site-header--menu-ready .header-user__trigger {
        max-width: min(100%, 220px);
    }

    .mail-home-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 24px;
    }

    .mail-home-hero__visual {
        min-height: 240px;
    }

    .mail-home-stack {
        width: min(100%, 280px);
    }

    .mail-records-toolbar {
        align-items: stretch;
        padding: 24px;
    }

    .record-preview-dialog__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        height: auto;
        align-content: start;
        overflow: visible;
    }

    .record-preview-dialog__layout--focus-email,
    .record-preview-dialog__layout--focus-json {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: 100%;
        overflow: hidden;
    }

    .record-preview-dialog__layout--focus-email .record-preview-card,
    .record-preview-dialog__layout--focus-json .record-preview-card {
        height: 100%;
    }

    .record-preview-dialog {
        padding: 10px;
    }

    .record-preview-dialog__panel {
        min-height: calc(100dvh - 20px);
        max-height: calc(100dvh - 20px);
        padding: 24px;
        overflow: auto;
    }

    .record-preview-card {
        height: auto;
        max-height: none;
    }

    .record-preview-dialog__content--email {
        min-height: 220px;
        max-height: min(40dvh, 360px);
    }

    .record-preview-card--json .record-preview-structured-shell {
        min-height: 320px;
        max-height: min(52dvh, 520px);
    }

    .record-preview-card__topbar--json,
    .record-preview-card__head--json,
    .record-preview-card__controls--json {
        align-items: flex-start;
        flex-direction: column;
    }

    .record-preview-card__topbar--json,
    .record-preview-card__context {
        width: 100%;
    }

    .record-preview-card__actions {
        justify-content: flex-start;
    }

    .record-preview-card__toolbar {
        width: 100%;
    }

    .record-preview-card__controls--json {
        width: 100%;
        justify-content: flex-start;
    }

    .record-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mail-per-page,
    .mail-search-field {
        width: 100%;
        margin-left: 0;
    }

    .monitoring-grid--top,
    .monitoring-grid--bottom {
        grid-template-columns: minmax(0, 1fr);
    }

    .monitoring-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .json-test-form__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .password-field-row input {
        padding-right: 20px;
    }

    .password-field-actions {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        margin-top: 10px;
        transform: none;
    }

    .admin-table-wrap {
        overflow-x: auto;
    }
}

@media (max-width: 820px) {
    .page-shell {
        gap: 14px;
        padding-block: 14px 20px;
    }

    .site-header,
    .site-footer,
    .hero-card,
    .table-card,
    .login-panel {
        padding: 16px;
    }

    .site-nav a {
        font-size: 0.78rem;
    }

    .mail-ops-page,
    .json-test-page,
    .user-admin-page {
        padding-top: 20px;
    }

    .mail-home-hero,
    .mail-records-shell,
    .json-test-card {
        border-radius: 24px;
    }

    .mail-records-table {
        min-width: 1040px;
    }

    .mail-records-footer {
        justify-content: flex-start;
        overflow-x: auto;
        padding-inline: 16px;
    }

    .table-card__head {
        display: grid;
        justify-items: start;
    }

    .monitoring-bars {
        grid-template-columns: repeat(7, minmax(52px, 1fr));
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .monitoring-ranking__copy,
    .monitoring-stage-list__meta {
        display: grid;
        gap: 4px;
    }

    .json-test-card,
    .admin-dialog__panel,
    .record-preview-dialog__panel,
    .record-delete-dialog__panel {
        padding: 22px;
        border-radius: 24px;
    }

    .record-preview-dialog {
        padding: 8px;
    }

    .record-preview-dialog__panel {
        min-height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .record-preview-card {
        padding: 20px;
    }

    .record-preview-card__details {
        grid-template-columns: minmax(0, 1fr);
    }

    .record-preview-section,
    .record-preview-array,
    .record-preview-list {
        padding: 16px;
    }

    .admin-management-table,
    .admin-management-table thead,
    .admin-management-table tbody,
    .admin-management-table tr,
    .admin-management-table th,
    .admin-management-table td {
        display: revert;
    }

    .admin-management-table {
        display: table;
        width: 100%;
    }

    .admin-management-table thead {
        display: table-header-group;
    }

    .admin-management-table tbody {
        display: table-row-group;
    }

    .admin-management-table tr {
        display: table-row;
        padding: 0;
        border-bottom: 0;
    }

    .admin-management-table th,
    .admin-management-table td {
        display: table-cell;
        padding: 16px 18px;
        border-bottom: 1px solid rgba(96, 100, 110, 0.12);
        white-space: nowrap;
    }

    .admin-delete-button {
        width: auto;
    }
}

@media (max-width: 560px) {
    .app-shell,
    .portal-body:has(.mail-ops-page) .app-shell {
        width: 100%;
        padding-inline: 10px;
    }

    .brand-lockup__logo {
        height: 38px;
    }

    .site-header.site-header--menu-ready .site-header__actions {
        gap: 8px;
        max-width: calc(100% - 44px);
    }

    .site-header.site-header--menu-ready .site-header__menu-toggle {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .site-header.site-header--menu-ready .site-nav {
        left: 10px;
        right: 10px;
        padding: 14px;
    }

    .site-nav {
        gap: 8px 12px;
    }

    .site-nav a {
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }

    .header-user__trigger {
        max-width: 180px;
        padding-inline: 12px;
    }

    .mail-home-hero {
        padding: 18px;
    }

    .mail-home-hero__title {
        font-size: clamp(1.32rem, 7vw, 1.72rem);
        line-height: 1.12;
    }

    .mail-home-hero__visual {
        min-height: 190px;
    }

    .mail-home-stack {
        width: min(100%, 220px);
    }

    .mail-home-hero--json-list .mail-home-hero__visual {
        min-height: 204px;
    }

    .mail-json-hero-art {
        width: min(100%, 236px);
        border-radius: 28px;
    }

    .mail-json-hero-art::before {
        inset: 12px;
        border-radius: 22px;
    }

    .mail-json-hero-art__quote {
        font-size: 3.5rem;
    }

    .mail-json-hero-art__quote--open {
        top: 18px;
        left: 18px;
    }

    .mail-json-hero-art__quote--close {
        right: 22px;
        bottom: 80px;
        font-size: 2.95rem;
    }

    .mail-json-hero-art__panel {
        inset: 26px 24px 60px;
        padding: 15px 13px 14px;
        border-radius: 22px;
        gap: 10px;
    }

    .mail-json-hero-art__mail-token--1 {
        top: 24px;
        right: 18px;
        width: 36px;
        height: 36px;
    }

    .mail-json-hero-art__mail-token--2 {
        left: 16px;
        bottom: 84px;
        width: 32px;
        height: 32px;
    }

    .mail-json-hero-art__mail-token--3 {
        right: 18px;
        bottom: 114px;
        width: 30px;
        height: 30px;
    }

    .mail-json-hero-art__mail-icon {
        width: 15px;
        height: 11px;
    }

    .mail-json-hero-art__wave--back {
        height: 98px;
    }

    .mail-json-hero-art__wave--mid {
        height: 82px;
    }

    .mail-json-hero-art__wave--front {
        height: 70px;
    }

    .mail-home-stack__sheet {
        width: 150px;
    }

    .mail-home-stack__sheet--back {
        top: 42px;
        height: 142px;
    }

    .mail-home-stack__sheet--mid {
        top: 34px;
        height: 150px;
    }

    .mail-home-stack__sheet--front {
        top: 24px;
        height: 158px;
        padding: 14px 12px;
    }

    .mail-home-stack__row {
        margin-bottom: 8px;
        padding: 8px 9px;
    }

    .mail-home-stack__scanner {
        left: 34px;
        right: 34px;
        top: 58px;
    }

    .mail-records-toolbar,
    .json-test-card,
    .admin-dialog__panel,
    .record-preview-dialog__panel,
    .record-delete-dialog__panel {
        padding: 18px;
    }

    .record-preview-dialog {
        padding: 0;
    }

    .record-preview-dialog__panel {
        width: 100%;
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border-inline: 0;
        overflow: auto;
    }

    .record-preview-dialog__head {
        gap: 12px;
    }

    .record-preview-dialog__meta {
        line-height: 1.6;
    }

    .record-preview-card__actions {
        width: 100%;
    }

    .record-preview-card__topbar--json,
    .record-preview-card__controls--json {
        width: 100%;
    }

    .record-preview-card__button {
        width: 100%;
    }

    .record-preview-card__toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .record-preview-drill,
    .record-preview-nav-card__trigger {
        padding: 16px;
        border-radius: 20px;
    }

    .record-preview-drill__nav,
    .record-preview-drill__actions,
    .record-preview-nav-card__head,
    .record-preview-nav-card__footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .record-preview-drill__actions,
    .record-preview-nav-card__meta {
        justify-content: flex-start;
    }

    .record-preview-drill__back,
    .record-preview-drill__actions .record-preview-card__button,
    .record-preview-nav-card__actions .record-preview-structured__action {
        width: 100%;
    }

    .record-preview-section__head,
    .record-preview-array__head,
    .record-preview-list__head,
    .record-preview-accordion__summary,
    .record-preview-list__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .record-preview-accordion__summary::after {
        justify-self: end;
    }

    .record-preview-card__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .record-preview-card__context {
        width: 100%;
    }

    .record-preview-card__controls,
    .record-preview-card__actions {
        width: 100%;
    }

    .record-preview-dialog__content--email,
    .record-preview-dialog__json-editor {
        min-height: 0;
        height: 100%;
    }

    .json-test-form input,
    .json-test-form textarea,
    .admin-popup-form input,
    .field input {
        padding: 15px 16px;
        border-radius: 18px;
    }

    .json-test-form textarea {
        min-height: 280px;
    }

    .password-field-actions,
    .admin-confirm-actions,
    .record-delete-dialog__actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .record-delete-dialog__button,
    .admin-confirm-actions .ghost-button,
    .admin-delete-button--confirm {
        width: 100%;
    }

    .monitoring-geometry {
        max-width: 240px;
    }

    .monitoring-donut {
        width: 176px;
        height: 176px;
    }

    .footer-logos img {
        max-height: 28px;
        max-width: min(150px, 46%);
    }
}

.classification-json-page {
    width: min(1180px, 100%);
    justify-self: center;
    display: grid;
    gap: 18px;
    padding-top: 64px;
}

.classification-json-hero,
.classification-json-actions,
.classification-json-viewer {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(236, 229, 244, 0.56);
    background:
        radial-gradient(circle at 14% 18%, rgba(196, 182, 255, 0.2), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(235, 141, 170, 0.16), transparent 24%),
        linear-gradient(145deg, rgba(244, 240, 248, 0.97), rgba(236, 229, 242, 0.97) 48%, rgba(242, 231, 240, 0.97));
    box-shadow:
        0 24px 56px rgba(11, 17, 34, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.classification-json-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 24px;
    align-items: center;
    padding: 28px;
    border-radius: 32px;
}

.classification-json-hero__copy h1 {
    margin: 0 0 12px;
    color: #1f2740;
    font: 700 clamp(1.55rem, 2vw, 2.18rem) / 1.1 "Oxanium", sans-serif;
    letter-spacing: 0.03em;
}

.classification-json-hero__copy p:last-child {
    max-width: 58ch;
    margin: 0;
    color: #59627b;
}

.classification-json-eyebrow {
    margin: 0 0 8px;
    color: #b05a77;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.classification-json-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.classification-json-summary__item {
    min-height: 104px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(202, 194, 220, 0.36);
}

.classification-json-summary__item span {
    color: #646b82;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.classification-json-summary__item strong {
    color: #20283f;
    font: 700 1.75rem/1 "Oxanium", sans-serif;
}

.classification-json-actions {
    display: flex;
    justify-content: center;
    padding: 20px;
    border-radius: 28px;
}

.classification-json-button {
    min-width: 210px;
    min-height: 54px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    color: #f9fbff;
    background: linear-gradient(135deg, #87599c 0%, #9a547c 48%, #5e6ab0 100%);
    box-shadow: 0 18px 34px rgba(61, 48, 83, 0.18);
    font: 700 0.96rem/1 "Oxanium", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.classification-json-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 22px 38px rgba(61, 48, 83, 0.22);
}

.classification-json-viewer {
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 32px;
}

.classification-json-viewer[hidden] {
    display: none;
}

.classification-json-alert {
    padding: 16px 18px;
    border-radius: 20px;
    color: #8f304b;
    background: rgba(214, 115, 145, 0.16);
    border: 1px solid rgba(214, 115, 145, 0.24);
}

.classification-json-group,
.classification-json-list {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(184, 172, 205, 0.32);
    background: rgba(255, 255, 255, 0.34);
}

.classification-json-group--depth-0 {
    background: rgba(255, 255, 255, 0.46);
}

.classification-json-group--depth-1,
.classification-json-list--depth-1 {
    background: rgba(255, 255, 255, 0.38);
}

.classification-json-group--depth-2,
.classification-json-list--depth-2 {
    background: rgba(255, 255, 255, 0.3);
}

.classification-json-group__head,
.classification-json-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.classification-json-group__head span,
.classification-json-list__head span {
    color: #20283f;
    font: 700 1rem/1.2 "Oxanium", sans-serif;
    letter-spacing: 0.04em;
}

.classification-json-group__head small,
.classification-json-list__head small,
.classification-json-index {
    color: #765779;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.classification-json-group__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.classification-json-list__items {
    display: grid;
    gap: 12px;
}

.classification-json-list__item {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.38);
    border: 1px solid rgba(190, 178, 210, 0.22);
}

.classification-json-index {
    justify-self: start;
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 28px;
    border-radius: 999px;
    background: rgba(135, 89, 156, 0.12);
}

.classification-json-field {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 82px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(190, 178, 210, 0.22);
}

.classification-json-field__label {
    color: #68708a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.classification-json-field__value {
    color: #1f2740;
    font-size: 0.95rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.classification-json-field__value.is-empty,
.classification-json-empty {
    color: #8b819b;
    font-style: italic;
    font-weight: 700;
}

.classification-json-empty {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.36);
}

@media (max-width: 1080px) {
    .classification-json-page {
        padding-top: 40px;
    }

    .classification-json-hero {
        grid-template-columns: 1fr;
    }
}

.classification-json-page--document {
    width: min(1280px, 100%);
    padding-top: 42px;
}

.classification-json-document {
    display: grid;
    gap: 18px;
    padding: 26px;
    border-radius: 30px;
    border: 1px solid rgba(236, 229, 244, 0.62);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at 90% 12%, rgba(225, 147, 180, 0.16), transparent 26%),
        linear-gradient(145deg, rgba(249, 246, 252, 0.98), rgba(235, 230, 244, 0.98));
    box-shadow: 0 28px 64px rgba(8, 14, 30, 0.18);
}

.classification-json-document__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 4px 4px 18px;
    border-bottom: 1px solid rgba(151, 136, 178, 0.18);
}

.classification-json-document__head h1 {
    margin: 0;
    color: #1f2740;
    font: 700 clamp(1.3rem, 2vw, 1.9rem) / 1.1 "Oxanium", sans-serif;
    letter-spacing: 0.03em;
}

.classification-json-document__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.classification-json-document__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 8px 11px;
    border-radius: 999px;
    color: #5f5872;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(166, 151, 190, 0.18);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.classification-json-document__meta strong {
    color: #20283f;
}

.classification-json-tools {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.46);
    border: 1px solid rgba(166, 151, 190, 0.18);
}

.classification-json-search {
    display: grid;
    gap: 8px;
}

.classification-json-search span {
    color: #6a617a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.classification-json-search input {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(143, 130, 171, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    color: #20283f;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.classification-json-search input:focus {
    border-color: rgba(135, 89, 156, 0.36);
    box-shadow: 0 0 0 5px rgba(135, 89, 156, 0.1);
}

.classification-json-tool-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.classification-json-tool-actions button {
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(151, 136, 178, 0.18);
    border-radius: 16px;
    color: #3f3753;
    background: rgba(255, 255, 255, 0.68);
    font-weight: 800;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.classification-json-tool-actions button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(58, 48, 78, 0.08);
}

.classification-json-tree {
    display: grid;
    gap: 14px;
}

.classification-json-document .classification-json-group,
.classification-json-document .classification-json-list {
    border-color: rgba(162, 146, 188, 0.22);
    background: rgba(255, 255, 255, 0.44);
}

.classification-json-document .classification-json-group__head,
.classification-json-document .classification-json-list__head {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(151, 136, 178, 0.12);
    cursor: pointer;
    list-style: none;
}

.classification-json-document .classification-json-group__head::-webkit-details-marker,
.classification-json-document .classification-json-list__head::-webkit-details-marker {
    display: none;
}

.classification-json-document .classification-json-group__head::before,
.classification-json-document .classification-json-list__head::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 10px;
    color: #fbf8ff;
    background: linear-gradient(135deg, #87599c, #5e6ab0);
    font: 800 1rem/1 "Oxanium", sans-serif;
}

.classification-json-document details[open] > .classification-json-group__head::before,
.classification-json-document details[open] > .classification-json-list__head::before {
    content: "-";
}

.classification-json-group__head span,
.classification-json-list__head span {
    display: inline-flex;
    align-items: center;
}

.classification-json-document .classification-json-field {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 245, 252, 0.72));
}

.classification-json-field[hidden] {
    display: none;
}

.classification-json-field:has(.classification-json-field__value.is-empty) {
    background: rgba(255, 255, 255, 0.42);
    border-style: dashed;
}

.classification-json-field__value:not(.is-empty) {
    font-weight: 800;
}

.classification-json-field__value.is-empty {
    opacity: 0.72;
}

@media (max-width: 820px) {
    .classification-json-page--document {
        padding-top: 18px;
    }

    .classification-json-document {
        padding: 18px;
        border-radius: 24px;
    }

    .classification-json-document__head {
        display: grid;
    }

    .classification-json-document__meta {
        justify-content: flex-start;
    }

    .classification-json-tools {
        grid-template-columns: 1fr;
    }

    .classification-json-tool-actions {
        justify-content: stretch;
    }

    .classification-json-tool-actions button {
        flex: 1;
    }
}

@media (max-width: 820px) {
    .classification-json-page {
        padding-top: 20px;
    }

    .classification-json-hero,
    .classification-json-viewer {
        padding: 18px;
        border-radius: 24px;
    }

    .classification-json-summary {
        grid-template-columns: 1fr;
    }

    .classification-json-group__body {
        grid-template-columns: 1fr;
    }
}

/* Final responsive hardening aligned with Tailwind-style breakpoints. */
:where(
    .page-shell > *,
    .mail-ops-page,
    .json-test-page,
    .user-admin-page,
    .classification-json-page,
    .hero-card,
    .table-card,
    .stat-card,
    .mail-home-hero,
    .mail-records-shell,
    .mail-records-card,
    .json-test-card,
    .admin-card,
    .admin-table-wrap,
    .login-panel,
    .classification-json-document,
    .classification-json-hero,
    .classification-json-actions,
    .classification-json-viewer,
    .record-preview-dialog__panel,
    .record-preview-card,
    .record-delete-dialog__panel
) {
    min-width: 0;
    max-width: 100%;
}

:where(
    .site-header,
    .site-header__actions,
    .site-nav,
    .header-user,
    .header-user__trigger,
    .header-user__menu,
    .footer-logos,
    .monitoring-card,
    .monitoring-status-list__row,
    .monitoring-status-list__label,
    .monitoring-ranking__copy,
    .monitoring-stage-list__meta,
    .classification-json-document__head,
    .classification-json-document__head > div,
    .classification-json-document__meta,
    .classification-json-group__head,
    .classification-json-list__head,
    .classification-json-group__head span,
    .classification-json-list__head span,
    .classification-json-tool-actions,
    .record-preview-card__head,
    .record-preview-card__controls,
    .record-preview-card__toolbar,
    .record-preview-card__actions,
    .record-preview-card__editing-state,
    .record-preview-dialog__processing,
    .record-delete-dialog__actions
) {
    min-width: 0;
}

.header-user__trigger {
    max-width: 100%;
    overflow: hidden;
}

.mail-home-hero__title,
.hero-copy h1,
.classification-json-document__head h1,
.monitoring-ranking__copy strong,
.monitoring-ranking__copy span,
.monitoring-stage-list__meta span,
.monitoring-stage-list__meta strong,
.monitoring-status-list__label,
.classification-json-document__meta span,
.classification-json-group__head span,
.classification-json-list__head span,
.json-test-upload__list,
.record-preview-card__head h3,
.record-preview-detail strong {
    overflow-wrap: anywhere;
}

.classification-json-document__meta span {
    white-space: normal;
}

.classification-json-tool-actions button {
    flex: 1 1 180px;
}

.mail-records-card,
.admin-table-wrap,
.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
}

.mail-records-table,
.admin-management-table,
.data-table {
    width: max-content;
    min-width: 100%;
}

.mail-records-table th,
.mail-records-table td,
.admin-management-table th,
.admin-management-table td,
.data-table th,
.data-table td {
    max-width: 100%;
    vertical-align: top;
}

.mail-records-table td:nth-child(1),
.mail-records-table td:nth-child(2),
.mail-records-table td:nth-child(4),
.admin-management-table td:nth-child(1),
.admin-management-table td:nth-child(2),
.data-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.data-table td {
    white-space: normal;
}

.monitoring-status-list__label i {
    flex-shrink: 0;
}

.record-preview-card__menu-panel {
    max-width: min(280px, calc(100vw - 48px));
}

@media (max-width: 1280px) {
    .mail-records-table {
        min-width: 1040px;
    }

    .mail-records-table th,
    .mail-records-table td {
        padding: 20px 18px;
    }
}

@media (max-width: 1024px) {
    .mail-home-hero,
    .classification-json-document,
    .record-preview-dialog__panel {
        padding: 22px;
    }

    .mail-records-toolbar,
    .admin-list-toolbar,
    .classification-json-tools {
        padding: 20px;
    }

    .mail-records-table {
        min-width: 980px;
    }

    .admin-management-table {
        min-width: 620px;
    }

    .data-table {
        min-width: 700px;
    }

    .monitoring-status-list__row,
    .monitoring-ranking__copy,
    .monitoring-stage-list__meta,
    .classification-json-group__head,
    .classification-json-list__head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .record-preview-dialog__processing {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .mail-home-hero,
    .mail-records-shell,
    .json-test-card,
    .admin-table-wrap,
    .classification-json-document {
        border-radius: 24px;
    }

    .mail-records-toolbar,
    .admin-list-toolbar {
        padding: 18px;
    }

    .mail-per-page,
    .mail-search-field,
    .admin-search {
        width: 100%;
        margin-left: 0;
    }

    .mail-records-table {
        min-width: 920px;
    }

    .mail-records-table--json-list {
        min-width: 1160px;
    }

    .admin-management-table {
        min-width: 600px;
    }

    .data-table {
        min-width: 640px;
    }

    .mail-records-table th,
    .mail-records-table td,
    .admin-management-table th,
    .admin-management-table td,
    .data-table th,
    .data-table td {
        padding: 16px 14px;
    }

    .mail-records-table td:nth-child(1) {
        min-width: 200px;
    }

    .mail-records-table td:nth-child(2) {
        min-width: 260px;
    }

    .mail-records-table td:nth-child(3) {
        min-width: 150px;
    }

    .mail-records-table td:nth-child(4) {
        min-width: 190px;
    }

    .mail-json-kv-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .monitoring-status-list__row,
    .monitoring-ranking__copy,
    .monitoring-stage-list__meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .classification-json-tool-actions button,
    .record-delete-dialog__button,
    .record-preview-card__button {
        width: 100%;
    }

    .record-preview-card__editing-state {
        width: 100%;
        min-height: auto;
        justify-content: center;
        white-space: normal;
    }

    .record-delete-dialog__actions {
        flex-direction: column;
    }

    .password-field-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 540px) {
    .mail-home-hero__stat {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
}

@media (max-width: 400px) {
    .mail-home-hero__stat {
        flex-basis: 100%;
    }
}

@media (max-width: 640px) {
    .login-shell {
        padding: 16px;
    }

    .site-header.site-header--menu-ready .site-header__actions {
        max-width: calc(100% - 44px);
    }

    .header-user__trigger {
        max-width: min(100%, 170px);
        padding-inline: 12px;
    }

    .mail-home-hero,
    .table-card,
    .classification-json-document,
    .json-test-card,
    .record-preview-dialog__panel,
    .record-delete-dialog__panel {
        padding: 16px;
    }

    .mail-records-table {
        min-width: 860px;
    }

    .admin-management-table {
        min-width: 560px;
    }

    .data-table {
        min-width: 620px;
    }

    .classification-json-group,
    .classification-json-list,
    .classification-json-field {
        padding: 14px;
        border-radius: 20px;
    }

    .classification-json-group__head,
    .classification-json-list__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .classification-json-button,
    .record-preview-card__button {
        width: 100%;
    }

    .classification-json-document__head h1 {
        font-size: clamp(1.18rem, 6vw, 1.5rem);
    }
}