/* =========================================================
   TossSpace Modern UI Redesign
   Brand: #223152 + #f8d176
   Goal: simple first, lively second, never cluttered
========================================================= */

:root {
    --brand: #223152;
    --brand-2: #31446e;
    --brand-soft: #eef2f8;
    --accent: #f8d176;
    --accent-strong: #f2c55e;
    --accent-soft: #fff7df;
    --mint: #cfe8df;
    --mint-soft: #eef8f4;
    --lilac: #dcd8f3;
    --lilac-soft: #f3f0fb;
    --coral: #f0b8a8;
    --coral-soft: #fff0eb;
    --ink: #17213a;
    --muted: #6e778b;
    --muted-2: #9ca3b3;
    --line: rgba(34, 49, 82, 0.10);
    --line-strong: rgba(34, 49, 82, 0.16);
    --surface: #ffffff;
    --surface-warm: #fffdf8;
    --page: #f8f7f3;
    --success: #25705c;
    --success-soft: #edf8f3;
    --danger: #a94747;
    --danger-soft: #fff1f0;
    --shadow-soft: 0 18px 50px rgba(34, 49, 82, 0.08);
    --shadow-card: 0 24px 70px rgba(34, 49, 82, 0.11);
    --radius-xxl: 34px;
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 14px;
}

html {
    background: var(--page);
    scroll-behavior: smooth;
}

body.modern-ui {
    overflow-x: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 2%, rgba(248, 209, 118, 0.22), transparent 24rem),
        radial-gradient(circle at 96% 18%, rgba(207, 232, 223, 0.25), transparent 27rem),
        linear-gradient(180deg, #fbfaf7 0%, #f7f6f2 58%, #fbfaf7 100%);
}

body.ui-home-pending #sendView {
    display: none !important;
}

body.menu-open {
    overflow: hidden;
}

.hidden {
    display: none !important;
}

/* ---------- Header ---------- */

.modern-header {
    position: relative;
    z-index: 80;
    width: min(1240px, calc(100% - 42px));
    height: 78px;
    margin: 0 auto;
}

.modern-brand {
    gap: 11px;
}

.brand-mark-shell {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(34, 49, 82, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 22px rgba(34, 49, 82, 0.08);
    backdrop-filter: blur(12px);
}

.brand-logo {
    width: 31px;
    height: 31px;
}

.brand-name {
    color: var(--brand);
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.modern-header-actions {
    gap: 8px;
}

.header-account-button,
.account-user-button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--brand);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    font-size: 12px;
    font-weight: 780;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.header-account-button:hover,
.account-user-button:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
    background: #fff;
}

.menu-trigger {
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--brand);
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition:
        transform 150ms ease,
        background 150ms ease;
}

.menu-trigger:hover {
    transform: translateY(-1px);
    background: #fff;
}

.menu-trigger span {
    width: 16px;
    height: 1.5px;
    display: block;
    border-radius: 999px;
    background: currentColor;
}

.header-badge {
    padding: 5px 8px;
    border: 1px solid rgba(34, 49, 82, 0.08);
    color: var(--brand);
    background: var(--accent-soft);
    font-size: 9px;
    letter-spacing: 0.1em;
}

.site-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(23, 33, 58, 0.16);
    backdrop-filter: blur(5px);
    cursor: default;
}

.site-menu-panel {
    position: absolute;
    top: 66px;
    right: 0;
    z-index: 100;
    width: min(390px, calc(100vw - 28px));
    max-height: calc(100vh - 88px);
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(34, 49, 82, 0.10);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 30px 100px rgba(34, 49, 82, 0.20);
    backdrop-filter: blur(22px);
}

.site-menu-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 3px 14px;
}

.menu-eyebrow {
    margin: 0 0 4px;
    color: #8d7540;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.site-menu-top strong {
    color: var(--brand);
    font-size: 17px;
    letter-spacing: -0.025em;
}

.menu-close-button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--muted);
    background: var(--page);
    font-size: 20px;
    cursor: pointer;
}

.site-menu-products {
    display: grid;
    gap: 7px;
}

.site-menu-product {
    min-height: 67px;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: inherit;
    text-decoration: none;
    background: #fbfaf7;
    transition:
        transform 150ms ease,
        background 150ms ease,
        border-color 150ms ease;
}

.site-menu-product:hover {
    transform: translateX(2px);
    border-color: var(--line);
    background: #fff;
}

.menu-product-dot {
    width: 38px;
    height: 38px;
    display: block;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(34, 49, 82, 0.05);
}

.menu-product-dot.send {
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), transparent 28%),
        var(--accent);
}

.menu-product-dot.room {
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), transparent 28%),
        var(--mint);
}

.menu-product-dot.receive {
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), transparent 28%),
        var(--lilac);
}

.site-menu-product > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.site-menu-product strong {
    color: var(--brand);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.site-menu-product small {
    color: var(--muted);
    font-size: 10px;
}

.menu-arrow {
    color: var(--muted-2);
    font-size: 15px;
}

.site-menu-divider {
    height: 1px;
    margin: 13px 2px;
    background: var(--line);
}

.site-menu-account {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.menu-account-action {
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--brand);
    background: #fff;
    font-size: 10px;
    font-weight: 760;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

a.menu-account-action {
    display: flex;
    align-items: center;
}

.menu-account-action:hover {
    background: var(--accent-soft);
}

.menu-logout {
    color: var(--danger);
}

.site-menu-foot {
    margin-top: 14px;
    padding: 12px 3px 1px;
    display: grid;
    gap: 9px;
    border-top: 1px solid var(--line);
}

.site-menu-foot > span {
    color: var(--muted);
    font-size: 10px;
}

.site-menu-foot > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.site-menu-foot a {
    color: var(--muted);
    font-size: 9px;
    text-decoration: none;
}

/* ---------- Home chooser ---------- */

.home-choice-view {
    position: relative;
    min-height: calc(100vh - 132px);
    width: min(1240px, calc(100% - 42px));
    margin: 0 auto;
    display: grid;
    align-items: center;
    padding: 36px 0 72px;
}

.home-choice-inner {
    position: relative;
    z-index: 3;
    width: 100%;
}

.home-choice-copy {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.home-status-pill {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(34, 49, 82, 0.08);
    border-radius: 999px;
    color: #776339;
    background: rgba(255, 247, 223, 0.76);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.home-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent-strong);
    box-shadow: 0 0 0 5px rgba(248, 209, 118, 0.20);
    animation: statusPulse 2.8s ease-in-out infinite;
}

.home-choice-copy h1 {
    margin: 20px 0 15px;
    color: var(--brand);
    font-size: clamp(52px, 7.8vw, 94px);
    line-height: 0.91;
    letter-spacing: -0.068em;
}

.home-choice-copy p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.55;
}

.product-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.product-choice-card {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    padding: 23px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid rgba(34, 49, 82, 0.09);
    border-radius: 30px;
    color: var(--brand);
    text-align: left;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    isolation: isolate;
    transition:
        transform 220ms cubic-bezier(.2,.75,.25,1),
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.product-choice-card:hover {
    transform: translateY(-7px);
    border-color: rgba(34, 49, 82, 0.16);
    box-shadow: 0 30px 80px rgba(34, 49, 82, 0.14);
}

.product-choice-card:active {
    transform: translateY(-2px) scale(.995);
}

.product-choice-send {
    background:
        linear-gradient(155deg, rgba(248, 209, 118, 0.55), rgba(255,255,255,.94) 46%),
        #fff;
}

.product-choice-room {
    background:
        linear-gradient(155deg, rgba(207, 232, 223, 0.62), rgba(255,255,255,.94) 46%),
        #fff;
}

.product-choice-receive {
    background:
        linear-gradient(155deg, rgba(220, 216, 243, 0.64), rgba(255,255,255,.94) 46%),
        #fff;
}

.choice-number {
    position: relative;
    z-index: 2;
    color: rgba(34, 49, 82, 0.48);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.choice-icon {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    margin: 42px 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(34, 49, 82, 0.08);
    border-radius: 23px;
    background: rgba(255,255,255,.74);
    box-shadow:
        0 14px 30px rgba(34,49,82,.08),
        inset 0 1px 0 rgba(255,255,255,.7);
    backdrop-filter: blur(10px);
    transition:
        transform 220ms cubic-bezier(.2,.75,.25,1);
}

.product-choice-card:hover .choice-icon {
    transform: rotate(-3deg) scale(1.045);
}

.choice-icon svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.choice-content {
    position: relative;
    z-index: 2;
    margin-top: 34px;
    display: grid;
}

.choice-content strong {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.10em;
}

.choice-content > span {
    margin-top: 5px;
    font-size: clamp(23px, 2.5vw, 32px);
    font-weight: 830;
    letter-spacing: -0.045em;
}

.choice-content small {
    margin-top: 8px;
    max-width: 220px;
    color: #687187;
    font-size: 11px;
    line-height: 1.55;
}

.choice-arrow {
    position: absolute;
    top: 19px;
    right: 20px;
    z-index: 2;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(34, 49, 82, 0.08);
    border-radius: 50%;
    background: rgba(255,255,255,.62);
    font-size: 14px;
    transition:
        transform 200ms ease,
        background 200ms ease;
}

.product-choice-card:hover .choice-arrow {
    transform: rotate(8deg) translate(2px, -2px);
    background: #fff;
}

.choice-glow {
    position: absolute;
    right: -90px;
    bottom: -120px;
    z-index: 0;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(4px);
    opacity: .38;
    transition:
        transform 300ms ease;
}

.product-choice-send .choice-glow {
    background: var(--accent);
}

.product-choice-room .choice-glow {
    background: var(--mint);
}

.product-choice-receive .choice-glow {
    background: var(--lilac);
}

.product-choice-card:hover .choice-glow {
    transform: scale(1.12);
}

.home-choice-foot {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px 20px;
    color: var(--muted);
    font-size: 10px;
}

.home-choice-foot span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.home-choice-foot i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6fa18c;
}

.home-ambient {
    --pointer-x: 0px;
    --pointer-y: 0px;
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translate(var(--pointer-x), var(--pointer-y));
    transition: transform 600ms cubic-bezier(.2,.75,.25,1);
}

.ambient-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .55;
}

.ambient-a {
    top: 5%;
    left: -7%;
    width: 230px;
    height: 230px;
    background: rgba(248, 209, 118, 0.24);
    animation: ambientFloatA 10s ease-in-out infinite;
}

.ambient-b {
    top: 32%;
    right: -8%;
    width: 260px;
    height: 260px;
    background: rgba(207, 232, 223, 0.30);
    animation: ambientFloatB 12s ease-in-out infinite;
}

.ambient-c {
    bottom: 0;
    left: 38%;
    width: 190px;
    height: 190px;
    background: rgba(220, 216, 243, 0.28);
    animation: ambientFloatA 14s ease-in-out infinite reverse;
}

.floating-file {
    position: absolute;
    width: 32px;
    height: 42px;
    border: 1px solid rgba(34, 49, 82, 0.08);
    border-radius: 8px;
    background: rgba(255,255,255,.70);
    box-shadow: 0 13px 30px rgba(34,49,82,.08);
    backdrop-filter: blur(8px);
}

.floating-file::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: 13px;
    height: 2px;
    border-radius: 999px;
    background: rgba(34,49,82,.15);
    box-shadow:
        0 6px 0 rgba(34,49,82,.10),
        0 12px 0 rgba(34,49,82,.08);
}

.floating-file-a {
    top: 21%;
    left: 3%;
    transform: rotate(-10deg);
    animation: fileFloat 6.2s ease-in-out infinite;
}

.floating-file-b {
    top: 11%;
    right: 5%;
    transform: rotate(8deg);
    animation: fileFloat 7.4s ease-in-out infinite reverse;
}

.floating-file-c {
    bottom: 10%;
    right: 13%;
    transform: rotate(-5deg) scale(.82);
    animation: fileFloat 8.2s ease-in-out infinite;
}

/* ---------- Product screens ---------- */

body.route-home-choices .site-footer {
    margin-top: 0;
}

.page-shell,
.room-shell,
.receive-shell {
    width: min(1120px, calc(100% - 42px));
}

body.route-send-active .page-shell,
body.route-room .room-shell,
body.route-receive .receive-shell {
    margin-top: 42px;
    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(26px, 5vw, 74px);
}

.product-hero,
.room-create-hero.product-hero,
.receive-create-hero.product-hero {
    max-width: none;
    margin: 28px 0 0;
    text-align: left;
}

.product-hero .eyebrow {
    color: #8a7240;
    font-size: 10px;
}

.product-hero h1,
.room-create-hero.product-hero h1,
.receive-create-hero.product-hero h1 {
    margin: 11px 0 11px;
    color: var(--brand);
    font-size: clamp(42px, 5vw, 64px);
    line-height: .96;
    letter-spacing: -0.058em;
}

.product-hero p,
.room-create-hero.product-hero p,
.receive-create-hero.product-hero p {
    max-width: 360px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.back-to-choices {
    width: max-content;
    margin: 0 0 28px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.62);
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
}

.back-to-choices:hover {
    transform: translateX(-2px);
    color: var(--brand);
    background: #fff;
}

.send-card,
.room-create-card,
.receive-create-card,
.room-live-card,
.receive-live-card,
.receiver-card {
    border: 1px solid rgba(34,49,82,.09);
    border-radius: 28px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 22px 64px rgba(34,49,82,.10);
    backdrop-filter: blur(18px);
}

body.route-send-active .send-card,
body.route-room .room-create-card,
body.route-receive .receive-create-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(20px, 3vw, 30px);
}

.card-heading {
    align-items: center;
    margin-bottom: 18px;
}

.card-heading h2 {
    color: var(--brand);
    font-size: clamp(22px, 2.5vw, 28px);
}

.limit-note,
.room-policy-note,
.account-policy-note,
.receive-auth-note {
    color: var(--muted);
}

.room-policy-note,
.account-policy-note,
.receive-auth-note {
    border: 0;
    border-radius: 11px;
    background: #f7f5ee;
    box-shadow: none;
    font-size: 10px;
    line-height: 1.5;
}

.drop-zone {
    min-height: 220px;
    border: 1.5px dashed rgba(34,49,82,.20);
    border-radius: 21px;
    color: var(--brand);
    background:
        radial-gradient(circle at 50% 0%, rgba(248,209,118,.15), transparent 42%),
        #fbfaf7;
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color: rgba(34,49,82,.42);
    background:
        radial-gradient(circle at 50% 0%, rgba(248,209,118,.26), transparent 48%),
        #fffdf8;
}

.drop-icon {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(34,49,82,.08);
    border-radius: 17px;
    color: var(--brand);
    background: var(--accent);
    box-shadow: 0 12px 28px rgba(201,159,61,.18);
}

.drop-icon svg {
    stroke: var(--brand);
}

.compact-room-drop .drop-icon {
    color: var(--brand);
}

.drop-title {
    color: var(--brand);
    font-size: 17px;
}

.drop-subtitle {
    font-size: 11px;
}

.primary-button {
    min-height: 46px;
    border-radius: 13px;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 10px 24px rgba(34,49,82,.14);
    font-weight: 790;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        opacity 150ms ease;
}

.primary-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(34,49,82,.19);
}

.secondary-button {
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--brand);
    background: #fff;
}

.danger-button {
    border-radius: 12px;
}

select,
input,
textarea,
.share-link-input {
    border-radius: 12px !important;
}

.file-item,
.receiver-file-item,
.receive-submission-card,
.receive-owner-file {
    border-color: var(--line);
    border-radius: 13px;
    background: #fbfaf7;
}

.file-icon {
    color: var(--brand);
    background: var(--accent-soft);
}

.progress-fill {
    background: linear-gradient(90deg, var(--accent-strong), var(--brand));
}

.quiet-details {
    grid-column: 2;
    width: 100%;
    margin-top: 4px;
    padding: 0 2px;
}

.quiet-details summary {
    width: max-content;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.quiet-details summary::-webkit-details-marker {
    display: none;
}

.quiet-details summary::after {
    content: " +";
}

.quiet-details[open] summary::after {
    content: " −";
}

.quiet-details .how-it-works {
    margin-top: 12px;
}

/* ---------- Live pages / receiver ---------- */

body.route-room-live .room-shell,
body.route-receive-live .receive-shell,
body.route-receiver .receiver-shell {
    width: min(920px, calc(100% - 42px));
    margin-top: 36px;
}

.room-live-heading h1,
.receive-live-heading h1,
.receiver-heading h1 {
    color: var(--brand);
}

.receiver-meta-item,
.room-share-strip,
.room-upload-box,
.room-files-section,
.receive-upload-box,
.receive-owner-panel {
    border-color: var(--line);
    border-radius: 17px;
    background: #fbfaf7;
}

.expiry-badge {
    border: 1px solid rgba(34,49,82,.08);
    color: var(--brand);
    background: var(--accent-soft);
}

/* ---------- Modals ---------- */

.modal-backdrop {
    backdrop-filter: blur(8px);
    background: rgba(23, 33, 58, 0.22);
}

.auth-modal,
.transfers-modal,
.usage-modal,
.room-qr-modal {
    border-color: var(--line);
    border-radius: 24px;
    box-shadow: 0 28px 90px rgba(34,49,82,.22);
}

/* ---------- Admin / trust ---------- */

.ops-storage-card,
.ops-panel,
.ops-card,
.trust-page {
    border-color: var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
}

.trust-hero h1,
.ops-heading h1 {
    color: var(--brand);
}

/* ---------- Footer ---------- */

.site-footer {
    width: min(1240px, calc(100% - 42px));
    margin: 50px auto 20px;
    padding: 18px 0;
    border-top: 1px solid rgba(34,49,82,.08);
    color: var(--muted);
}

.site-footer-links a {
    color: var(--muted);
}

/* ---------- Motion ---------- */

@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(248, 209, 118, 0.20);
    }
    50% {
        transform: scale(.86);
        box-shadow: 0 0 0 8px rgba(248, 209, 118, 0.07);
    }
}

@keyframes ambientFloatA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(18px, -12px, 0) scale(1.05); }
}

@keyframes ambientFloatB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-20px, 16px, 0) scale(.96); }
}

@keyframes fileFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -12px; }
}

/* ---------- Tablet ---------- */

@media (max-width: 900px) {
    .product-choice-grid {
        gap: 11px;
    }

    .product-choice-card {
        min-height: 300px;
        padding: 19px;
    }

    .choice-icon {
        width: 66px;
        height: 66px;
        margin-top: 34px;
    }

    .choice-icon svg {
        width: 36px;
        height: 36px;
    }

    body.route-send-active .page-shell,
    body.route-room .room-shell,
    body.route-receive .receive-shell {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-hero,
    .room-create-hero.product-hero,
    .receive-create-hero.product-hero {
        margin-top: 0;
    }

    .product-hero h1,
    .room-create-hero.product-hero h1,
    .receive-create-hero.product-hero h1 {
        font-size: clamp(40px, 8vw, 58px);
    }

    .quiet-details {
        grid-column: 1;
    }
}

/* ---------- Phone ---------- */

@media (max-width: 680px) {
    .modern-header {
        width: min(100% - 22px, 1240px);
        height: 66px;
    }

    .brand-mark-shell {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .brand-logo {
        width: 28px;
        height: 28px;
    }

    .brand-name {
        font-size: 18px;
    }

    .header-badge {
        display: none;
    }

    .account-user-button {
        max-width: 106px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-account-button,
    .account-user-button {
        min-height: 36px;
        padding: 0 10px;
        font-size: 10px;
    }

    .menu-trigger {
        width: 37px;
        height: 37px;
    }

    .site-menu-panel {
        position: fixed;
        top: auto;
        right: 11px;
        bottom: 11px;
        left: 11px;
        width: auto;
        max-height: calc(100vh - 22px);
        border-radius: 25px;
    }

    .site-menu-account {
        grid-template-columns: 1fr;
    }

    .home-choice-view {
        width: min(100% - 22px, 1240px);
        min-height: calc(100vh - 102px);
        padding: 28px 0 48px;
    }

    .home-choice-copy {
        margin-bottom: 28px;
        text-align: left;
    }

    .home-status-pill {
        margin: 0;
    }

    .home-choice-copy h1 {
        margin-top: 17px;
        font-size: clamp(48px, 16vw, 70px);
        line-height: .91;
    }

    .home-choice-copy p {
        max-width: 330px;
        font-size: 13px;
    }

    .product-choice-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .product-choice-card {
        min-height: 150px;
        padding: 17px;
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr) 34px;
        grid-template-rows: auto 1fr;
        column-gap: 14px;
        border-radius: 23px;
    }

    .choice-number {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    .choice-icon {
        grid-column: 1;
        grid-row: 2;
        width: 58px;
        height: 58px;
        margin: 11px 0 0;
        border-radius: 18px;
    }

    .choice-icon svg {
        width: 32px;
        height: 32px;
    }

    .choice-content {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        margin: 0;
    }

    .choice-content > span {
        font-size: 24px;
    }

    .choice-content small {
        max-width: 230px;
        margin-top: 5px;
        font-size: 10px;
    }

    .choice-arrow {
        position: static;
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        width: 32px;
        height: 32px;
    }

    .choice-glow {
        width: 190px;
        height: 190px;
        right: -80px;
        bottom: -105px;
    }

    .home-choice-foot {
        justify-content: flex-start;
        gap: 8px 14px;
        font-size: 9px;
    }

    .floating-file {
        opacity: .46;
        transform: scale(.78);
    }

    .ambient-shape {
        opacity: .38;
    }

    .page-shell,
    .room-shell,
    .receive-shell,
    body.route-room-live .room-shell,
    body.route-receive-live .receive-shell,
    body.route-receiver .receiver-shell {
        width: min(100% - 22px, 1120px);
    }

    body.route-send-active .page-shell,
    body.route-room .room-shell,
    body.route-receive .receive-shell {
        margin-top: 22px;
        gap: 14px;
    }

    .back-to-choices {
        margin-bottom: 18px;
    }

    .product-hero h1,
    .room-create-hero.product-hero h1,
    .receive-create-hero.product-hero h1 {
        margin-top: 8px;
        font-size: 43px;
    }

    .product-hero p,
    .room-create-hero.product-hero p,
    .receive-create-hero.product-hero p {
        max-width: 100%;
        font-size: 11px;
    }

    .send-card,
    .room-create-card,
    .receive-create-card,
    .room-live-card,
    .receive-live-card,
    .receiver-card {
        border-radius: 22px;
    }

    body.route-send-active .send-card,
    body.route-room .room-create-card,
    body.route-receive .receive-create-card {
        padding: 18px;
    }

    .card-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .limit-note {
        white-space: normal;
        font-size: 10px;
    }

    .drop-zone {
        min-height: 180px;
        padding: 24px 18px;
        border-radius: 18px;
    }

    .drop-title {
        font-size: 16px;
    }

    .send-options,
    .room-create-options {
        align-items: stretch;
        flex-direction: column;
    }

    .privacy-note,
    .room-policy-note {
        width: 100%;
    }

    .share-link-row,
    .complete-actions,
    .upload-actions,
    .room-share-actions {
        grid-template-columns: 1fr !important;
        flex-direction: column;
    }

    .share-link-row .primary-button,
    .complete-actions .secondary-button,
    .upload-actions button,
    .room-share-actions button {
        width: 100%;
    }

    .site-footer {
        width: min(100% - 22px, 1240px);
    }
}

/* ---------- Accessibility ---------- */

.product-choice-card:focus-visible,
.menu-trigger:focus-visible,
.menu-close-button:focus-visible,
.back-to-choices:focus-visible,
.site-menu-product:focus-visible,
.menu-account-action:focus-visible {
    outline: 3px solid rgba(248, 209, 118, 0.72);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* =========================================================
   TossSpace Immersive Glass UI — V2
   WeTransfer-inspired principle:
   background is a visual stage, controls float above it.
   No ad box is introduced; future campaign media can live
   in .immersive-backdrop-media behind the interface.
========================================================= */

:root {
    --glass-bg: rgba(255, 255, 255, 0.58);
    --glass-bg-strong: rgba(255, 255, 255, 0.74);
    --glass-bg-soft: rgba(255, 255, 255, 0.38);
    --glass-border: rgba(255, 255, 255, 0.66);
    --glass-line: rgba(34, 49, 82, 0.09);
    --glass-shadow:
        0 26px 70px rgba(34, 49, 82, 0.10),
        0 2px 8px rgba(34, 49, 82, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --glass-shadow-hover:
        0 36px 90px rgba(34, 49, 82, 0.15),
        0 6px 18px rgba(34, 49, 82, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --send-rgb: 248, 209, 118;
    --room-rgb: 173, 226, 211;
    --receive-rgb: 204, 195, 239;
    --ease-spring: cubic-bezier(.18, .82, .22, 1);
    --ease-soft: cubic-bezier(.2, .75, .25, 1);
}

html {
    background: #f6f4ee;
}

body.modern-ui {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: transparent;
}

/* ---------- Immersive visual stage ---------- */

.immersive-backdrop {
    position: fixed;
    inset: 0;
    z-index: -20;
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            #fbf8ef 0%,
            #f6f8f5 46%,
            #f7f4fc 100%
        );
}

.immersive-backdrop-media {
    position: absolute;
    inset: -4%;
    opacity: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.04);
    transition:
        opacity 650ms var(--ease-soft),
        transform 6s ease;
}

.immersive-backdrop.has-media .immersive-backdrop-media {
    opacity: 1;
    transform: scale(1);
}

.immersive-backdrop-mesh {
    position: absolute;
    inset: -22%;
    opacity: 0.95;
    filter: blur(2px) saturate(108%);
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(var(--send-rgb), .55) 0 9%,
            rgba(var(--send-rgb), .18) 17%,
            transparent 31%
        ),
        radial-gradient(
            circle at 84% 25%,
            rgba(var(--room-rgb), .44) 0 8%,
            rgba(var(--room-rgb), .16) 17%,
            transparent 33%
        ),
        radial-gradient(
            circle at 62% 82%,
            rgba(var(--receive-rgb), .42) 0 8%,
            rgba(var(--receive-rgb), .14) 17%,
            transparent 31%
        ),
        radial-gradient(
            circle at 22% 82%,
            rgba(255, 255, 255, .9) 0 8%,
            transparent 28%
        );
    animation:
        backdropDrift 18s ease-in-out infinite alternate;
    transform:
        translate3d(
            var(--backdrop-x, 0px),
            var(--backdrop-y, 0px),
            0
        )
        rotate(var(--backdrop-rotate, 0deg));
    transition: transform 950ms var(--ease-soft);
}

body.route-send-active .immersive-backdrop-mesh {
    --route-hue: 0deg;
    background:
        radial-gradient(circle at 22% 32%, rgba(var(--send-rgb), .58), transparent 27%),
        radial-gradient(circle at 84% 70%, rgba(255, 255, 255, .84), transparent 30%),
        radial-gradient(circle at 72% 15%, rgba(var(--room-rgb), .19), transparent 29%),
        linear-gradient(120deg, #fbf7ec, #f8f8f5 56%, #f9f5ef);
}

body.route-room .immersive-backdrop-mesh,
body.route-room-live .immersive-backdrop-mesh {
    background:
        radial-gradient(circle at 16% 36%, rgba(var(--room-rgb), .54), transparent 28%),
        radial-gradient(circle at 78% 18%, rgba(var(--send-rgb), .18), transparent 28%),
        radial-gradient(circle at 76% 78%, rgba(255, 255, 255, .82), transparent 29%),
        linear-gradient(120deg, #f2f9f6, #faf9f3 56%, #f4f7f5);
}

body.route-receive .immersive-backdrop-mesh,
body.route-receive-live .immersive-backdrop-mesh {
    background:
        radial-gradient(circle at 18% 28%, rgba(var(--receive-rgb), .52), transparent 29%),
        radial-gradient(circle at 82% 72%, rgba(var(--send-rgb), .17), transparent 27%),
        radial-gradient(circle at 76% 14%, rgba(255, 255, 255, .86), transparent 31%),
        linear-gradient(120deg, #f8f5fc, #faf8f3 52%, #f3f6fb);
}

.immersive-backdrop-grain {
    position: absolute;
    inset: 0;
    opacity: .10;
    mix-blend-mode: multiply;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}

.immersive-backdrop-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            transparent 28%,
            transparent 72%,
            rgba(246,244,238,.38)
        );
}

.immersive-backdrop.has-media .immersive-backdrop-mesh {
    opacity: .34;
}

.immersive-backdrop.has-media .immersive-backdrop-vignette {
    background:
        linear-gradient(
            180deg,
            rgba(14, 22, 38, .08),
            rgba(255,255,255,.03) 30%,
            rgba(14, 22, 38, .12)
        );
}

.immersive-backdrop-credit {
    position: fixed;
    left: 24px;
    bottom: 22px;
    z-index: 3;
    max-width: min(330px, calc(100vw - 48px));
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    color: #fff;
    background: rgba(18, 28, 48, .42);
    box-shadow: 0 12px 34px rgba(13, 20, 35, .16);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    font-size: 10px;
    pointer-events: auto;
}

.immersive-backdrop-credit span {
    opacity: .72;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}

.immersive-backdrop-credit strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Glass system ---------- */

.modern-header {
    position: sticky;
    top: 10px;
    z-index: 80;
    width: min(1240px, calc(100% - 28px));
    height: 66px;
    margin: 10px auto 0;
    padding: 0 13px 0 10px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 20px;
    background: rgba(255,255,255,.46);
    box-shadow:
        0 14px 40px rgba(34,49,82,.075),
        inset 0 1px 0 rgba(255,255,255,.76);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    transition:
        background 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}

body.is-scrolled .modern-header {
    background: rgba(255,255,255,.68);
    box-shadow:
        0 18px 46px rgba(34,49,82,.11),
        inset 0 1px 0 rgba(255,255,255,.82);
}

.brand-mark-shell,
.header-account-button,
.account-user-button,
.menu-trigger,
.site-menu-panel,
.back-to-choices,
.send-card,
.room-create-card,
.receive-create-card,
.receiver-card,
.room-live-card,
.receive-live-card,
.modal-card,
.auth-modal,
.usage-modal,
.ops-storage-card,
.ops-panel,
.trust-page,
.receive-upload-box,
.receive-owner-panel,
.room-upload-box,
.room-files-section,
.room-share-strip {
    border-color: var(--glass-border) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.47)
        ) !important;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
}

.header-account-button,
.account-user-button,
.menu-trigger,
.back-to-choices {
    background: rgba(255,255,255,.52) !important;
}

.site-menu-panel {
    top: 74px;
    right: 0;
    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.89),
            rgba(248,248,247,.72)
        ) !important;
    box-shadow:
        0 32px 100px rgba(28,39,65,.20),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.site-menu-backdrop {
    background: rgba(21, 30, 51, .12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---------- Home: less solid, more immersive ---------- */

.home-choice-view {
    min-height: calc(100svh - 86px);
    padding-top: 30px;
}

.home-ambient {
    opacity: .48;
}

.home-choice-inner {
    position: relative;
    z-index: 2;
}

.home-status-pill {
    border: 1px solid rgba(255,255,255,.72);
    background: rgba(255,255,255,.52);
    box-shadow:
        0 12px 28px rgba(34,49,82,.06),
        inset 0 1px 0 rgba(255,255,255,.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.home-choice-copy h1 {
    text-shadow: 0 10px 40px rgba(34,49,82,.06);
}

.product-choice-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.72);
    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.68),
            rgba(255,255,255,.36)
        );
    box-shadow:
        0 24px 70px rgba(34,49,82,.09),
        inset 0 1px 0 rgba(255,255,255,.90);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    transform:
        perspective(900px)
        rotateX(var(--tilt-y, 0deg))
        rotateY(var(--tilt-x, 0deg))
        translateY(var(--card-y, 0px));
    transform-style: preserve-3d;
    transition:
        transform 260ms var(--ease-spring),
        box-shadow 260ms ease,
        border-color 260ms ease;
}

.product-choice-card::before {
    content: "";
    position: absolute;
    inset: -45%;
    z-index: -2;
    opacity: .85;
    transform: translate3d(var(--glow-x, 0px), var(--glow-y, 0px), 0);
    transition: transform 260ms ease;
    pointer-events: none;
}

.product-choice-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .34;
    background:
        linear-gradient(
            115deg,
            transparent 18%,
            rgba(255,255,255,.72) 42%,
            transparent 62%
        );
    transform: translateX(-125%);
    transition: transform 700ms var(--ease-soft);
    pointer-events: none;
}

.product-choice-card:hover {
    --card-y: -9px;
    border-color: rgba(255,255,255,.95);
    box-shadow: var(--glass-shadow-hover);
}

.product-choice-card:hover::after {
    transform: translateX(125%);
}

.product-choice-send::before {
    background:
        radial-gradient(circle at 48% 50%, rgba(var(--send-rgb), .68), transparent 30%),
        radial-gradient(circle at 70% 35%, rgba(var(--send-rgb), .26), transparent 20%);
}

.product-choice-room::before {
    background:
        radial-gradient(circle at 48% 50%, rgba(var(--room-rgb), .66), transparent 30%),
        radial-gradient(circle at 72% 65%, rgba(var(--room-rgb), .24), transparent 20%);
}

.product-choice-receive::before {
    background:
        radial-gradient(circle at 48% 50%, rgba(var(--receive-rgb), .64), transparent 30%),
        radial-gradient(circle at 68% 32%, rgba(var(--receive-rgb), .25), transparent 20%);
}

.choice-icon {
    border: 1px solid rgba(255,255,255,.84);
    background: rgba(255,255,255,.62);
    box-shadow:
        0 16px 40px rgba(34,49,82,.08),
        inset 0 1px 0 rgba(255,255,255,.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateZ(28px);
}

.choice-arrow {
    border-color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateZ(24px);
}

.choice-content,
.choice-number {
    transform: translateZ(18px);
}

.home-choice-foot {
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---------- Product workspaces ---------- */

.page-shell,
.room-create-shell,
.receive-create-shell {
    position: relative;
    z-index: 2;
}

body.route-send-active .page-shell,
.room-create-shell,
.receive-create-shell {
    align-items: start;
}

.product-hero,
.room-create-hero.product-hero,
.receive-create-hero.product-hero {
    position: sticky;
    top: 110px;
    padding-top: 20px;
}

.product-hero::after,
.room-create-hero.product-hero::after,
.receive-create-hero.product-hero::after {
    content: "";
    position: absolute;
    left: -18px;
    top: 92px;
    width: 82px;
    height: 82px;
    z-index: -1;
    border-radius: 32% 68% 62% 38% / 42% 32% 68% 58%;
    filter: blur(1px);
    opacity: .45;
    animation: heroBlobMorph 7s ease-in-out infinite alternate;
}

.product-hero-send::after {
    background: rgba(var(--send-rgb), .60);
}

.room-create-hero.product-hero::after {
    background: rgba(var(--room-rgb), .58);
}

.receive-create-hero.product-hero::after {
    background: rgba(var(--receive-rgb), .56);
}

.send-card,
.room-create-card,
.receive-create-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px !important;
    box-shadow: var(--glass-shadow);
}

.send-card::before,
.room-create-card::before,
.receive-create-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .58;
    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.26),
            transparent 38%
        );
}

.drop-zone,
.compact-room-drop {
    position: relative;
    overflow: hidden;
    border: 1px dashed rgba(34,49,82,.20);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.46),
            rgba(255,255,255,.20)
        ) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 220ms var(--ease-spring),
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

.drop-zone::before,
.compact-room-drop::before {
    content: "";
    position: absolute;
    inset: -70% -20%;
    opacity: 0;
    background:
        linear-gradient(
            110deg,
            transparent 32%,
            rgba(255,255,255,.72) 48%,
            transparent 64%
        );
    transform: translateX(-35%) rotate(6deg);
    transition: opacity 180ms ease;
    pointer-events: none;
}

.drop-zone:hover,
.drop-zone.dragging,
.compact-room-drop:hover,
.compact-room-drop.dragging {
    transform: translateY(-3px);
    border-color: rgba(34,49,82,.36);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.62),
            rgba(255,255,255,.30)
        ) !important;
    box-shadow:
        0 20px 54px rgba(34,49,82,.08),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.drop-zone:hover::before,
.drop-zone.dragging::before,
.compact-room-drop:hover::before,
.compact-room-drop.dragging::before {
    opacity: .9;
    animation: dropScan 1.8s linear infinite;
}

.drop-icon {
    position: relative;
    overflow: visible;
    background:
        linear-gradient(
            145deg,
            rgba(var(--send-rgb), .95),
            rgba(var(--send-rgb), .68)
        );
    box-shadow:
        0 16px 40px rgba(204, 160, 55, .22),
        inset 0 1px 0 rgba(255,255,255,.62);
}

.drop-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(var(--send-rgb), .36);
    border-radius: inherit;
    animation: iconPulse 2.5s ease-out infinite;
}

/* ---------- Inputs feel like glass controls ---------- */

select,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
.share-link-input {
    border: 1px solid rgba(255,255,255,.72) !important;
    background: rgba(255,255,255,.52) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        0 7px 20px rgba(34,49,82,.035);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

select:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
.share-link-input:focus {
    border-color: rgba(34,49,82,.25) !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow:
        0 0 0 5px rgba(248,209,118,.16),
        0 16px 34px rgba(34,49,82,.06);
    transform: translateY(-1px);
}

/* ---------- Buttons ---------- */

.primary-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    background:
        linear-gradient(
            110deg,
            #223152 0%,
            #2e426d 50%,
            #223152 100%
        );
    background-size: 220% 100%;
    box-shadow:
        0 14px 32px rgba(34,49,82,.20),
        inset 0 1px 0 rgba(255,255,255,.14);
    transition:
        transform 200ms var(--ease-spring),
        box-shadow 200ms ease,
        background-position 500ms ease;
}

.primary-button::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -36%;
    width: 32%;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );
    transform: skewX(-18deg);
    transition: left 520ms var(--ease-soft);
}

.primary-button:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.002);
    box-shadow:
        0 18px 40px rgba(34,49,82,.25),
        inset 0 1px 0 rgba(255,255,255,.18);
    background-position: 100% 0;
}

.primary-button:hover:not(:disabled)::after {
    left: 112%;
}

.secondary-button,
.danger-button,
.text-button {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ---------- File cards ---------- */

.file-item,
.receiver-file-item,
.receive-submission-card,
.receive-owner-file {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,.58) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.58),
            rgba(255,255,255,.31)
        ) !important;
    box-shadow:
        0 10px 28px rgba(34,49,82,.045),
        inset 0 1px 0 rgba(255,255,255,.72);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: fileItemIn 420ms var(--ease-spring) both;
}

/* =========================================================
   Transfer animation — replaces the feel of an ordinary bar
========================================================= */

.upload-panel {
    --transfer-progress: 0;
    position: relative;
    overflow: hidden;
    padding: 18px !important;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 22px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.68),
            rgba(255,255,255,.34)
        ) !important;
    box-shadow:
        0 18px 54px rgba(34,49,82,.09),
        inset 0 1px 0 rgba(255,255,255,.82);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.upload-panel::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    top: -110px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(var(--send-rgb), .24),
            transparent 68%
        );
    animation: uploadAmbientPulse 3.2s ease-in-out infinite;
    pointer-events: none;
}

.transfer-motion {
    position: relative;
    min-height: 116px;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.transfer-orb {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            from -90deg,
            var(--brand) calc(var(--transfer-progress) * 1%),
            rgba(255,255,255,.44) 0
        );
    box-shadow:
        0 18px 42px rgba(34,49,82,.14),
        inset 0 0 0 1px rgba(255,255,255,.70);
    animation: orbBreathe 2.8s ease-in-out infinite;
}

.transfer-orb::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.94), rgba(255,255,255,.63) 48%, rgba(250,248,242,.54));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -12px 26px rgba(34,49,82,.035);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.transfer-orb-percent {
    position: relative;
    z-index: 3;
    color: var(--brand);
    font-size: 22px;
    font-weight: 880;
    letter-spacing: -0.05em;
}

.transfer-orbit {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(34,49,82,.13);
    animation: orbitSpin 4.2s linear infinite;
}

.transfer-packet {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(255,255,255,.72);
    border-radius: 3px;
    background: var(--accent);
    box-shadow: 0 4px 12px rgba(34,49,82,.12);
}

.transfer-packet:nth-child(1) {
    transform: translate(-50%, -50%) translateY(-60px);
}

.transfer-packet:nth-child(2) {
    transform: translate(-50%, -50%) rotate(120deg) translateY(-60px);
}

.transfer-packet:nth-child(3) {
    transform: translate(-50%, -50%) rotate(240deg) translateY(-60px);
}

.transfer-copy {
    min-width: 0;
}

.transfer-kicker {
    margin-bottom: 5px;
    color: #8a7543;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
}

.transfer-copy strong {
    display: block;
    color: var(--brand);
    font-size: 18px;
    letter-spacing: -0.03em;
}

.transfer-copy span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.transfer-stream {
    position: relative;
    height: 18px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.64);
    border-radius: 999px;
    background: rgba(255,255,255,.35);
    box-shadow: inset 0 1px 4px rgba(34,49,82,.035);
}

.transfer-stream-fill {
    position: absolute;
    inset: 2px auto 2px 2px;
    width: calc(var(--transfer-progress) * 1%);
    overflow: hidden;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #f3c959,
            #ffd980 26%,
            #7fb9aa 58%,
            #566b9c 82%,
            #223152
        );
    box-shadow: 0 0 22px rgba(248,209,118,.32);
    transition: width 420ms var(--ease-soft);
}

.transfer-stream-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 70px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.68),
            transparent
        );
    animation: streamShimmer 1.25s linear infinite;
}

.transfer-stream-particles {
    position: absolute;
    inset: 0;
}

.transfer-stream-particles i {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(34,49,82,.40);
    opacity: .46;
    animation: dataPacket 2.2s linear infinite;
}

.transfer-stream-particles i:nth-child(1) { animation-delay: 0s; }
.transfer-stream-particles i:nth-child(2) { animation-delay: .38s; }
.transfer-stream-particles i:nth-child(3) { animation-delay: .76s; }
.transfer-stream-particles i:nth-child(4) { animation-delay: 1.14s; }
.transfer-stream-particles i:nth-child(5) { animation-delay: 1.52s; }

.upload-panel .progress-head {
    display: none;
}

.upload-panel .progress-track {
    height: 4px;
    margin-top: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(34,49,82,.07);
}

.upload-panel .progress-fill {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            rgba(var(--send-rgb), .92),
            #7185b7,
            var(--brand)
        );
    transition: width 300ms var(--ease-soft);
}

.upload-panel.is-paused .transfer-orbit,
.upload-panel.is-paused .transfer-stream-particles i,
.upload-panel.is-paused .transfer-stream-fill::after {
    animation-play-state: paused;
}

.upload-panel.is-complete .transfer-orb {
    background:
        conic-gradient(
            from -90deg,
            #2a7962 100%,
            #2a7962 0
        );
    animation: completePop 520ms var(--ease-spring) both;
}

.upload-panel.is-complete .transfer-orbit {
    animation: none;
    opacity: 0;
}

.upload-panel.is-complete .transfer-stream-fill {
    background:
        linear-gradient(
            90deg,
            #7ac8ad,
            #2a7962
        );
}

.transfer-confetti {
    position: absolute;
    z-index: 5;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    pointer-events: none;
    animation: transferConfetti 900ms ease-out forwards;
}

/* ---------- Modals / overlays ---------- */

.modal-backdrop {
    background: rgba(26, 35, 57, .15);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.modal-card,
.auth-modal,
.usage-modal {
    border-radius: 28px !important;
}

/* ---------- Route entrance ---------- */

body.route-room .room-create-shell,
body.route-receive .receive-create-shell,
body.route-room-live .room-shell,
body.route-receive-live .receive-shell,
body.route-receiver .receiver-shell,
body.route-admin .ops-shell,
body.route-trust .trust-shell {
    animation: routeReveal 540ms var(--ease-spring) both;
}

/* ---------- Motion keyframes ---------- */

@keyframes backdropDrift {
    0% {
        transform:
            translate3d(-1.4%, -1%, 0)
            scale(1.01)
            rotate(-1deg);
    }
    100% {
        transform:
            translate3d(1.6%, 1.2%, 0)
            scale(1.045)
            rotate(1.2deg);
    }
}

@keyframes heroBlobMorph {
    0% {
        transform: translate3d(0,0,0) rotate(0deg) scale(1);
        border-radius: 32% 68% 62% 38% / 42% 32% 68% 58%;
    }
    100% {
        transform: translate3d(12px,-8px,0) rotate(18deg) scale(1.08);
        border-radius: 66% 34% 41% 59% / 37% 66% 34% 63%;
    }
}

@keyframes dropScan {
    from {
        transform: translateX(-45%) rotate(6deg);
    }
    to {
        transform: translateX(45%) rotate(6deg);
    }
}

@keyframes iconPulse {
    0%, 45% {
        opacity: .62;
        transform: scale(.82);
    }
    75%, 100% {
        opacity: 0;
        transform: scale(1.32);
    }
}

@keyframes fileItemIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.988);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes orbBreathe {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 18px 42px rgba(34,49,82,.14),
            inset 0 0 0 1px rgba(255,255,255,.70);
    }
    50% {
        transform: scale(1.025);
        box-shadow:
            0 22px 48px rgba(34,49,82,.18),
            0 0 0 8px rgba(248,209,118,.06),
            inset 0 0 0 1px rgba(255,255,255,.78);
    }
}

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

@keyframes streamShimmer {
    from {
        transform: translateX(-90px);
    }
    to {
        transform: translateX(520px);
    }
}

@keyframes dataPacket {
    0% {
        left: -4%;
        opacity: 0;
        transform: translateY(-50%) scale(.7);
    }
    10% {
        opacity: .45;
    }
    88% {
        opacity: .45;
    }
    100% {
        left: 102%;
        opacity: 0;
        transform: translateY(-50%) scale(1);
    }
}

@keyframes uploadAmbientPulse {
    0%, 100% {
        opacity: .55;
        transform: scale(.9);
    }
    50% {
        opacity: .95;
        transform: scale(1.12);
    }
}

@keyframes completePop {
    0% {
        transform: scale(.9);
    }
    55% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes transferConfetti {
    0% {
        opacity: 1;
        transform:
            translate3d(0,0,0)
            rotate(0deg)
            scale(1);
    }
    100% {
        opacity: 0;
        transform:
            translate3d(
                var(--confetti-x),
                var(--confetti-y),
                0
            )
            rotate(var(--confetti-r))
            scale(.72);
    }
}

@keyframes routeReveal {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.993);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .modern-header {
        top: 8px;
        width: calc(100% - 20px);
        margin-top: 8px;
        border-radius: 18px;
    }

    .product-hero,
    .room-create-hero.product-hero,
    .receive-create-hero.product-hero {
        position: relative;
        top: auto;
    }

    .product-choice-card {
        transform: none !important;
    }
}

@media (max-width: 720px) {
    .home-choice-view {
        min-height: auto;
        padding-top: 24px;
    }

    .home-choice-copy h1 {
        font-size: clamp(48px, 14vw, 68px);
        line-height: .93;
    }

    .product-choice-card {
        border-radius: 25px;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.72),
                rgba(255,255,255,.40)
            );
    }

    .home-choice-foot {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        border-radius: 16px;
        scrollbar-width: none;
    }

    .home-choice-foot::-webkit-scrollbar {
        display: none;
    }

    .transfer-motion {
        grid-template-columns: 88px minmax(0, 1fr);
        min-height: 94px;
        gap: 12px;
    }

    .transfer-orb {
        width: 82px;
        height: 82px;
    }

    .transfer-orbit {
        inset: -6px;
    }

    .transfer-packet:nth-child(1) {
        transform: translate(-50%, -50%) translateY(-48px);
    }

    .transfer-packet:nth-child(2) {
        transform: translate(-50%, -50%) rotate(120deg) translateY(-48px);
    }

    .transfer-packet:nth-child(3) {
        transform: translate(-50%, -50%) rotate(240deg) translateY(-48px);
    }

    .transfer-orb-percent {
        font-size: 18px;
    }

    .transfer-copy strong {
        font-size: 16px;
    }

    .immersive-backdrop-credit {
        left: 14px;
        bottom: 14px;
    }
}

@media (max-width: 520px) {
    .modern-header {
        height: 60px;
        padding-right: 9px;
    }

    .brand-mark-shell {
        width: 38px;
        height: 38px;
    }

    .brand-logo {
        width: 28px;
        height: 28px;
    }

    .brand-name {
        font-size: 18px;
    }

    .header-account-button,
    .account-user-button {
        min-height: 36px;
        padding-inline: 10px;
    }

    .menu-trigger {
        width: 38px;
        height: 38px;
    }

    .send-card,
    .room-create-card,
    .receive-create-card {
        border-radius: 24px !important;
    }

    .upload-panel {
        padding: 14px !important;
    }

    .transfer-motion {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .transfer-orb {
        margin: 0 auto;
    }

    .transfer-copy span {
        max-width: 280px;
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .immersive-backdrop-mesh,
    .product-hero::after,
    .room-create-hero.product-hero::after,
    .receive-create-hero.product-hero::after,
    .drop-icon::after,
    .file-item,
    .receiver-file-item,
    .receive-submission-card,
    .receive-owner-file,
    .transfer-orb,
    .transfer-orbit,
    .transfer-stream-fill::after,
    .transfer-stream-particles i,
    body.route-room .room-create-shell,
    body.route-receive .receive-create-shell,
    body.route-room-live .room-shell,
    body.route-receive-live .receive-shell,
    body.route-receiver .receiver-shell,
    body.route-admin .ops-shell,
    body.route-trust .trust-shell {
        animation: none !important;
    }

    .product-choice-card,
    .transfer-stream-fill {
        transition-duration: 0ms !important;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modern-header,
    .product-choice-card,
    .send-card,
    .room-create-card,
    .receive-create-card,
    .site-menu-panel,
    .upload-panel,
    .modal-card,
    .auth-modal,
    .usage-modal {
        background: rgba(255,255,255,.94) !important;
    }
}


/* =========================================================
   TossSpace UI Fix Pack — menu / logo / icons / upload
========================================================= */

/* 1) The menu shade belongs behind the header, not on top of it. */
.site-menu-backdrop {
    z-index: 70 !important;
}

.modern-header {
    z-index: 90 !important;
}

.site-menu-panel {
    position: fixed !important;
    z-index: 110 !important;
    top: 88px !important;
    right: max(14px, calc((100vw - 1240px) / 2)) !important;
    bottom: auto !important;
    left: auto !important;
    width: min(390px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 104px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

body.menu-open {
    overflow: hidden;
}

/* 2) Logo is now the actual Logo.png, with no white/glass tile around it. */
.modern-brand {
    gap: 10px !important;
}

.modern-brand .brand-logo {
    width: 40px !important;
    height: 40px !important;
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: 1 !important;
    filter:
        drop-shadow(0 5px 10px rgba(34, 49, 82, .10));
}

.brand-mark-shell {
    display: none !important;
}

/* 3) Font Awesome is the visible icon system for redesigned UI controls. */
.menu-trigger {
    gap: 0 !important;
    font-size: 17px;
}

.menu-trigger span {
    display: none !important;
}

.menu-trigger i,
.menu-close-button i,
.choice-arrow i,
.back-to-choices i {
    line-height: 1;
}

.menu-close-button {
    border: 1px solid rgba(255,255,255,.64);
    background: rgba(255,255,255,.50) !important;
    font-size: 15px !important;
}

.menu-product-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.74);
    border-radius: 12px;
    color: var(--brand);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 8px 20px rgba(34,49,82,.05);
}

.menu-product-icon.send {
    background: rgba(var(--send-rgb), .52);
}

.menu-product-icon.room {
    background: rgba(var(--room-rgb), .54);
}

.menu-product-icon.receive {
    background: rgba(var(--receive-rgb), .54);
}

.menu-product-icon i {
    font-size: 15px;
}

.menu-product-dot {
    display: none !important;
}

.choice-icon i {
    color: var(--brand);
    font-size: 31px;
    line-height: 1;
}

.choice-icon svg {
    display: none !important;
}

.choice-arrow i {
    font-size: 12px;
}

.drop-icon i {
    position: relative;
    z-index: 2;
    font-size: 21px;
}

.complete-icon i {
    font-size: .92em;
}

/* 4) File rows must remain physically stable while progress text updates. */
.file-item,
.receiver-file-item,
.receive-submission-card,
.receive-owner-file {
    animation: none !important;
}

/*
   The new animated transfer stream is the ONLY overall progress visual.
   Existing hidden progress DOM remains available to app.js for state updates.
*/
.upload-panel > .progress-track {
    display: none !important;
}

/* Do not animate fileList children just because app.js re-renders them. */
.file-list > * {
    transform: none;
}

/* 5) Phone menu uses the entire usable viewport instead of a short panel. */
@media (max-width: 720px) {
    .modern-brand .brand-logo {
        width: 36px !important;
        height: 36px !important;
    }

    .site-menu-panel {
        top: 78px !important;
        right: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        padding: 14px !important;
        display: flex;
        flex-direction: column;
        overflow-y: auto !important;
        border-radius: 24px !important;
    }

    .site-menu-top {
        padding: 2px 2px 10px;
    }

    .site-menu-products {
        gap: 6px;
    }

    .site-menu-product {
        min-height: 58px;
        padding: 8px 9px;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 9px;
    }

    .menu-product-icon {
        width: 36px;
        height: 36px;
    }

    /*
       Two columns keeps signed-in account tools visible without making
       the sheet artificially tall. Very narrow devices can still fall back.
    */
    .site-menu-account {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px;
    }

    .menu-account-action {
        min-height: 40px;
        padding: 8px 9px;
        font-size: 10px;
    }

    .site-menu-divider {
        margin: 9px 2px;
    }

    .site-menu-foot {
        margin-top: auto;
        padding-top: 11px;
    }
}

@media (max-width: 360px) {
    .site-menu-account {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   TossSpace Visual Polish — Stability + Detail Pass
========================================================= */

/* ---------- Global crispness ---------- */

body.modern-ui {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

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

button,
a {
    touch-action: manipulation;
}

:focus-visible {
    outline: 3px solid rgba(248, 209, 118, .62);
    outline-offset: 3px;
}

/* Make glass feel richer without washing out text. */
.modern-header {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.68),
            rgba(255,255,255,.47)
        ) !important;
    border-color: rgba(255,255,255,.84) !important;
}

body.is-scrolled .modern-header {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.80),
            rgba(255,255,255,.60)
        ) !important;
}

.brand-name,
.home-choice-copy h1,
.product-hero h1,
.card-heading h2,
.room-create-card h2,
.receive-create-card h2 {
    text-wrap: balance;
}

/* ---------- Home card polish ---------- */

.product-choice-card {
    cursor: pointer;
}

.product-choice-card:active {
    --card-y: -2px;
    transform:
        perspective(900px)
        rotateX(0)
        rotateY(0)
        translateY(-2px)
        scale(.992);
}

.choice-number {
    padding: 4px 7px;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 999px;
    background: rgba(255,255,255,.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.choice-content h2 {
    letter-spacing: -.045em;
}

/* ---------- Menu polish ---------- */

.menu-trigger i {
    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

body.menu-open .menu-trigger {
    background: rgba(255,255,255,.76) !important;
    box-shadow:
        0 10px 28px rgba(34,49,82,.09),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.site-menu-product {
    position: relative;
    overflow: hidden;
    transition:
        transform 180ms var(--ease-spring),
        border-color 180ms ease,
        background 180ms ease;
}

.site-menu-product::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(
            115deg,
            transparent 22%,
            rgba(255,255,255,.56) 48%,
            transparent 72%
        );
    transform: translateX(-100%);
    transition:
        opacity 180ms ease,
        transform 520ms var(--ease-soft);
}

.site-menu-product:hover {
    transform: translateX(3px);
    border-color: rgba(255,255,255,.88);
}

.site-menu-product:hover::after {
    opacity: .65;
    transform: translateX(100%);
}

/* ---------- AUTH: mobile stability fix ---------- */

/*
   Why it moved:
   1) app.js auto-focused Email after 30 ms, which can open the mobile keyboard.
   2) the backdrop vertically centered the card, so viewport-height changes
      caused the card to re-center.

   This pass:
   - app.js only auto-focuses on fine-pointer desktop.
   - auth card is top-anchored on mobile.
   - its own content scrolls.
   - background motion freezes while auth is open.
*/

body.auth-dialog-open .immersive-backdrop-mesh {
    animation-play-state: paused !important;
}

body.auth-dialog-open .home-ambient,
body.auth-dialog-open .ambient-shape,
body.auth-dialog-open .floating-file {
    animation-play-state: paused !important;
}

#authModal {
    overscroll-behavior: contain;
}

#authModal .account-modal {
    position: relative;
    isolation: isolate;
    width: min(100%, 430px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.89),
            rgba(255,255,255,.70)
        ) !important;
    box-shadow:
        0 30px 100px rgba(26,37,62,.20),
        0 4px 18px rgba(26,37,62,.07),
        inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(30px) saturate(145%);
    -webkit-backdrop-filter: blur(30px) saturate(145%);
}

#authModal .account-modal::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -86px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(248,209,118,.24),
            transparent 70%
        );
    pointer-events: none;
}

#authModal:not(.hidden) .account-modal {
    animation:
        authModalEnter 240ms var(--ease-spring) both;
}

.account-modal-brand {
    padding-right: 48px;
}

.account-modal-brand img {
    width: 48px;
    height: 48px;
    filter:
        drop-shadow(0 8px 16px rgba(34,49,82,.10));
}

.account-modal-brand h2 {
    font-size: 27px;
    letter-spacing: -.045em;
}

#authModal .modal-close {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.75);
    color: var(--brand);
    background: rgba(255,255,255,.52);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 16px;
    transition:
        transform 170ms var(--ease-spring),
        background 170ms ease;
}

#authModal .modal-close:hover {
    transform: rotate(5deg) scale(1.04);
    background: rgba(255,255,255,.82);
}

/* Provider buttons become quieter, more premium. */
.auth-provider-stack {
    gap: 9px;
}

.auth-provider-button {
    min-height: 48px;
    border-color: rgba(34,49,82,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 8px 22px rgba(34,49,82,.035);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 180ms var(--ease-spring),
        box-shadow 180ms ease,
        background 180ms ease;
}

.auth-provider-button:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.74) !important;
    box-shadow:
        0 14px 30px rgba(34,49,82,.075),
        inset 0 1px 0 rgba(255,255,255,.96);
}

.auth-provider-button.email-code {
    border-color: rgba(224,177,60,.24) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,248,224,.74),
            rgba(255,255,255,.52)
        ) !important;
}

.auth-provider-mark {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 9px !important;
    font-size: 13px;
}

.google-mark {
    color: #223152 !important;
    background: rgba(248,209,118,.68) !important;
}

.apple-mark {
    color: #ffffff !important;
    background: #223152 !important;
}

.email-mark {
    color: #223152 !important;
    background: rgba(248,209,118,.68) !important;
}

.auth-divider {
    margin-block: 17px 14px;
}

.auth-divider span {
    padding-inline: 10px;
    color: #8b93a3;
    background: transparent;
    font-size: 9px;
    letter-spacing: .055em;
}

.auth-tabs {
    padding: 4px !important;
    border: 1px solid rgba(255,255,255,.64);
    background: rgba(248,245,235,.66) !important;
    box-shadow:
        inset 0 1px 3px rgba(34,49,82,.025);
}

.auth-tab {
    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.auth-tab.active {
    background: rgba(255,255,255,.88) !important;
    box-shadow:
        0 5px 16px rgba(34,49,82,.065),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.auth-form label > span {
    color: var(--brand);
    font-size: 11px;
    letter-spacing: -.01em;
}

.auth-form input {
    min-height: 50px;
    border-radius: 13px !important;
    font-size: 14px;
}

.auth-form input:hover {
    background: rgba(255,255,255,.64) !important;
}

.auth-form .primary-button {
    min-height: 48px;
    border-radius: 13px;
}

.auth-back-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.account-modal-note {
    max-width: 330px;
    margin-inline: auto;
}

/* ---------- Form / button polish ---------- */

.primary-button:disabled {
    position: relative;
    overflow: hidden;
    opacity: .72;
}

.primary-button:disabled::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            100deg,
            transparent 28%,
            rgba(255,255,255,.22) 48%,
            transparent 68%
        );
    animation:
        disabledButtonShimmer 1.4s linear infinite;
}

.form-error {
    border-radius: 11px;
}

/* ---------- Upload visual polish ---------- */

.transfer-orb {
    will-change: transform;
}

.transfer-stream {
    border-color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.42);
}

.transfer-stream-fill {
    min-width: 3px;
}

.upload-panel.is-complete .transfer-copy strong {
    color: #2a7962;
}

.upload-panel.is-complete .transfer-kicker {
    color: #4d7d6f;
}

/* ---------- Scrollbars ---------- */

.site-menu-panel,
.account-modal,
.transfers-modal,
.usage-modal {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(34,49,82,.20)
        transparent;
}

.site-menu-panel::-webkit-scrollbar,
.account-modal::-webkit-scrollbar,
.transfers-modal::-webkit-scrollbar,
.usage-modal::-webkit-scrollbar {
    width: 5px;
}

.site-menu-panel::-webkit-scrollbar-thumb,
.account-modal::-webkit-scrollbar-thumb,
.transfers-modal::-webkit-scrollbar-thumb,
.usage-modal::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(34,49,82,.18);
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
    /*
       Top anchoring is the key stability fix. The dialog no longer constantly
       re-centers when the mobile browser chrome or keyboard changes the
       visual viewport height.
    */
    #authModal.modal-backdrop {
        height: 100dvh;
        min-height: 100dvh;
        padding:
            max(14px, env(safe-area-inset-top))
            12px
            max(14px, env(safe-area-inset-bottom));
        display: flex;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
    }

    #authModal .account-modal {
        width: min(100%, 430px);
        max-height:
            calc(
                100dvh
                - max(28px, env(safe-area-inset-top))
                - max(18px, env(safe-area-inset-bottom))
            );
        margin: 0;
        padding: 20px !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        transform: none;
    }

    #authModal:not(.hidden) .account-modal {
        animation:
            authModalEnterMobile 220ms var(--ease-spring) both;
    }

    .account-modal-brand img {
        width: 44px;
        height: 44px;
    }

    .account-modal-brand h2 {
        font-size: 25px;
    }

    /*
       16px prevents mobile Safari from zooming the viewport when a field gets
       focus, another common source of perceived modal movement.
    */
    .auth-form input,
    .auth-form select,
    .auth-form textarea {
        font-size: 16px !important;
    }

    .auth-provider-button {
        min-height: 47px;
    }

    .site-menu-panel {
        border-color: rgba(255,255,255,.84) !important;
        background:
            linear-gradient(
                155deg,
                rgba(255,255,255,.91),
                rgba(250,249,246,.76)
            ) !important;
    }

    .product-choice-card:active {
        transform: scale(.988) !important;
    }
}

@media (max-width: 420px) {
    #authModal .account-modal {
        padding: 18px !important;
        border-radius: 24px !important;
    }

    .account-modal-brand {
        gap: 10px;
        padding-right: 42px;
    }

    .account-modal-brand img {
        width: 42px;
        height: 42px;
    }

    .auth-provider-button {
        padding-inline: 12px;
    }
}

/* ---------- One-shot motion only; nothing continuously floats ---------- */

@keyframes authModalEnter {
    from {
        opacity: 0;
        transform: translateY(9px);
        filter: blur(3px);
    }

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

@keyframes authModalEnterMobile {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes disabledButtonShimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    #authModal:not(.hidden) .account-modal,
    .primary-button:disabled::before {
        animation: none !important;
    }
}


/* =========================================================
   TossSpace Visual Polish — Round 2
   Stable dialogs + header alignment + usage dashboard polish
========================================================= */

/* ---------- Header: fix signed-in name vertical alignment ---------- */

.modern-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.modern-header-actions {
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.header-account-button,
.account-user-button {
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    padding-top: 1px !important;
}

.account-user-button {
    position: relative;
    top: 0 !important;
    margin: 0 !important;
}

.menu-trigger {
    align-self: center !important;
}

/* ---------- All long mobile dialogs use a stable visual frame ---------- */

body.stable-dialog-open .immersive-backdrop-mesh,
body.stable-dialog-open .home-ambient,
body.stable-dialog-open .ambient-shape,
body.stable-dialog-open .floating-file {
    animation-play-state: paused !important;
}

/*
   AUTH:
   The previous pass top-anchored it at ~14px, which was stable but visually
   too high. This uses a fixed comfortable inset based on the SMALL viewport
   height so browser chrome changes do not keep moving it.
*/
@media (max-width: 720px) {
    #authModal.modal-backdrop {
        height: 100svh !important;
        min-height: 100svh !important;
        padding:
            clamp(58px, 8svh, 82px)
            12px
            max(18px, env(safe-area-inset-bottom)) !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    #authModal .account-modal {
        max-height:
            calc(
                100svh
                - clamp(58px, 8svh, 82px)
                - max(18px, env(safe-area-inset-bottom))
            ) !important;
        margin: 0 !important;
        overflow-y: auto !important;
        transform: none !important;
        scrollbar-gutter: auto !important;
    }

    /*
       No vertical translate on phone. Entrance is opacity + tiny scale only,
       so it does not look as if the dialog itself is floating.
    */
    #authModal:not(.hidden) .account-modal {
        animation:
            stableDialogEnterMobile
            190ms
            var(--ease-spring)
            both !important;
    }
}

/* ---------- Usage modal stability ---------- */

/*
   The old usage modal was vertically centered.
   While "Calculating current usage…" was replaced by the much taller loaded
   content, the browser re-centered the panel, producing the visible drift.
   It is now top-anchored inside a fixed 100svh frame.
*/
@media (max-width: 720px) {
    #usageModal.modal-backdrop {
        height: 100svh !important;
        min-height: 100svh !important;
        padding:
            clamp(34px, 5svh, 54px)
            12px
            max(14px, env(safe-area-inset-bottom)) !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow: hidden !important;
        overscroll-behavior: contain;
    }

    #usageModal .usage-modal {
        width: min(100%, 440px) !important;
        max-height:
            calc(
                100svh
                - clamp(34px, 5svh, 54px)
                - max(14px, env(safe-area-inset-bottom))
            ) !important;
        margin: 0 !important;
        padding: 20px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: auto !important;
        transform: none !important;
    }

    #usageModal:not(.hidden) .usage-modal {
        animation:
            stableDialogEnterMobile
            190ms
            var(--ease-spring)
            both !important;
    }
}

/* ---------- Usage dashboard: more modern, less stacked-white-card ---------- */

#usageModal .usage-modal {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 30px !important;
    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.88),
            rgba(250,249,247,.66)
        ) !important;
    box-shadow:
        0 34px 110px rgba(26,37,62,.20),
        0 5px 20px rgba(26,37,62,.06),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
    backdrop-filter: blur(32px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(150%) !important;
}

#usageModal .usage-modal::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    right: -110px;
    top: -130px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(173,226,211,.24),
            transparent 68%
        );
    pointer-events: none;
}

#usageModal .usage-modal::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    left: -120px;
    bottom: -120px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(204,195,239,.20),
            transparent 70%
        );
    pointer-events: none;
}

#usageModal .modal-heading {
    position: sticky;
    top: -20px;
    z-index: 5;
    margin: -20px -20px 16px;
    padding: 20px 20px 13px;
    border-bottom: 1px solid rgba(255,255,255,.55);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.86),
            rgba(255,255,255,.70)
        );
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

#usageModal .modal-heading h2 {
    margin-top: 4px;
    letter-spacing: -.045em;
}

#usageModal .modal-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 50%;
    color: var(--brand);
    background: rgba(255,255,255,.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 170ms var(--ease-spring),
        background 170ms ease;
}

#usageModal .modal-close:hover {
    transform: rotate(5deg) scale(1.04);
    background: rgba(255,255,255,.82) !important;
}

.usage-plan-hero {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,.72) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(
            135deg,
            rgba(248,209,118,.28),
            rgba(255,255,255,.64) 46%,
            rgba(173,226,211,.16)
        ) !important;
    box-shadow:
        0 16px 42px rgba(34,49,82,.06),
        inset 0 1px 0 rgba(255,255,255,.88);
}

.usage-plan-hero::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -45px;
    bottom: -62px;
    border-radius: 50%;
    background: rgba(255,255,255,.30);
    pointer-events: none;
}

.usage-plan-badge {
    border: 1px solid rgba(255,255,255,.62);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.62);
}

.usage-expiry-chip {
    border-color: rgba(34,49,82,.08) !important;
    background: rgba(255,255,255,.40) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.usage-meters {
    gap: 12px;
}

.usage-meter-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,.70) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.68),
            rgba(255,255,255,.40)
        ) !important;
    box-shadow:
        0 14px 34px rgba(34,49,82,.055),
        inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.usage-meter-track {
    height: 8px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.62);
    background: rgba(231,228,216,.72) !important;
    box-shadow: inset 0 1px 3px rgba(34,49,82,.04);
}

.usage-meter-fill {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            #223152 0%,
            #566b9c 55%,
            #f0c75f 100%
        ) !important;
    box-shadow:
        0 0 16px rgba(86,107,156,.20);
    transition:
        width 650ms var(--ease-soft) !important;
}

.usage-meter-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 55px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.34),
            transparent
        );
    animation:
        usageMeterGlint
        2.8s
        ease-in-out
        infinite;
}

.usage-breakdown {
    margin-top: 22px !important;
}

.usage-section-heading {
    align-items: center !important;
}

.usage-section-heading .secondary-button {
    border-color: rgba(255,255,255,.72) !important;
    background: rgba(255,255,255,.50) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88);
}

.usage-breakdown-grid article {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,.70) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.68),
            rgba(255,255,255,.38)
        ) !important;
    box-shadow:
        0 10px 28px rgba(34,49,82,.045),
        inset 0 1px 0 rgba(255,255,255,.82);
}

.usage-breakdown-grid article:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            rgba(248,209,118,.22),
            rgba(255,255,255,.46)
        ) !important;
}

.usage-breakdown-grid article:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            rgba(173,226,211,.22),
            rgba(255,255,255,.46)
        ) !important;
}

.usage-breakdown-grid article:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            rgba(204,195,239,.23),
            rgba(255,255,255,.46)
        ) !important;
}

.usage-product-tag {
    letter-spacing: .10em;
}

.usage-plan-card {
    border-color: rgba(255,255,255,.70) !important;
    border-radius: 18px !important;
    background:
        rgba(255,255,255,.46) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82);
}

.usage-plan-card.featured {
    background:
        linear-gradient(
            145deg,
            rgba(248,209,118,.15),
            rgba(255,255,255,.54)
        ) !important;
}

.usage-billing-note {
    border: 1px solid rgba(255,255,255,.54);
    background: rgba(255,255,255,.32) !important;
}

/* ---------- Phone usage composition ---------- */

@media (max-width: 720px) {
    .modern-header-actions {
        gap: 6px !important;
    }

    .header-account-button,
    .account-user-button {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 11px !important;
        font-size: 10px !important;
    }

    #usageModal .usage-modal {
        border-radius: 26px !important;
    }

    .usage-plan-hero {
        padding: 18px !important;
        gap: 15px !important;
    }

    .usage-plan-hero h3 {
        font-size: 23px !important;
    }

    .usage-expiry-chip {
        padding: 12px 13px !important;
    }

    .usage-meter-card {
        padding: 15px !important;
    }

    .usage-section-heading {
        gap: 10px !important;
    }

    .usage-section-heading .secondary-button {
        width: auto !important;
        min-width: 96px;
    }

    .usage-breakdown-grid {
        gap: 8px !important;
    }
}

@media (max-width: 430px) {
    .usage-section-heading {
        align-items: flex-start !important;
    }

    .usage-section-heading .secondary-button {
        width: 100% !important;
    }
}

/* ---------- Stable entrance: no vertical "floating" ---------- */

@keyframes stableDialogEnterMobile {
    from {
        opacity: 0;
        transform: scale(.986);
        filter: blur(2px);
    }

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

@keyframes usageMeterGlint {
    0%, 62% {
        transform: translateX(-80px);
        opacity: 0;
    }

    70% {
        opacity: .42;
    }

    100% {
        transform: translateX(520px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #usageModal:not(.hidden) .usage-modal,
    .usage-meter-fill::after {
        animation: none !important;
    }
}


/* =========================================================
   TossSpace Visibility Safeguard
   Keep JS-driven .hidden state authoritative.
========================================================= */

/*
   Visual-polish rules later in this stylesheet use display:inline-flex
   !important for header buttons. Without this final rule, a signed-in
   Sign in button can still render even though app.js added class="hidden".
*/
.hidden {
    display: none !important;
}


/* =========================================================
   TossSpace Usage Modal Phone Fix
   1) .hidden must beat phone modal display:flex !important
   2) hide the changing scrollbar thumb while keeping touch scroll
========================================================= */

/*
   On phone we previously had:
   #usageModal.modal-backdrop { display:flex !important; }

   This selector is MORE specific than:
   .hidden { display:none !important; }

   Therefore app.js correctly added "hidden" on Close, but CSS still rendered
   the modal. These ID+class selectors are equally specific and appear later,
   so hidden state is authoritative again.
*/
#usageModal.hidden,
#authModal.hidden {
    display: none !important;
}

/*
   Keep the intended flex layout only while the dialogs are actually open.
*/
@media (max-width: 720px) {
    #usageModal.modal-backdrop:not(.hidden),
    #authModal.modal-backdrop:not(.hidden) {
        display: flex !important;
    }

    /*
       The vertical grey line at the right side was the internal usage-panel
       scrollbar thumb. Its size changes while "Calculating..." is replaced
       by the full usage dashboard, which looks like a bar stretching and
       shrinking. Touch scrolling remains enabled; only the scrollbar chrome
       is hidden.
    */
    #usageModal .usage-modal {
        overflow-y: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none;
    }

    #usageModal .usage-modal::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }
}


/* =========================================================
   TossSpace Account History Action Alignment Fix
========================================================= */

/*
   "Open" / "Open inbox" are <a> elements while Copy link / Show QR are
   <button> elements. Their browser default line boxes differ, so the anchor
   text can look slightly too high even when the outer heights match.

   Normalize BOTH element types to the same flex box and text line height.
*/
.account-transfer-actions button,
.account-transfer-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px;
    line-height: 1 !important;
    vertical-align: middle !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
}

.account-transfer-actions a {
    text-decoration: none;
}