:root {
    --background: #070b14;
    --background-secondary: #0d1322;
    --glass:
        rgba(18, 24, 39, 0.58);
    --glass-strong:
        rgba(19, 26, 43, 0.82);
    --glass-border:
        rgba(255, 255, 255, 0.1);
    --text: #f7f9ff;
    --text-muted: #9ca9bf;
    --primary: #6d7cff;
    --primary-hover: #8290ff;
    --secondary: #21c8f6;
    --success: #46d39a;
    --danger: #ff6b7a;
    --shadow:
        0 24px 80px
        rgba(0, 0, 0, 0.42);
    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 26px;
}
/* =========================================================
   Global foundation
   ========================================================= */
* {
    box-sizing: border-box;
}
html {
    min-height: 100%;
}
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(79, 96, 255, 0.21),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(33, 200, 246, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 55% 95%,
            rgba(124, 58, 237, 0.16),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            var(--background),
            var(--background-secondary)
        );
    background-attachment: fixed;
    overflow-x: hidden;
}
body.modal-open {
    overflow: hidden;
}
/* =========================================================
   Ambient background
   ========================================================= */
.background-orb {
    position: fixed;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.25;
    pointer-events: none;
    animation:
        float-orb
        14s
        ease-in-out
        infinite;
}
.background-orb.one {
    top: -130px;
    left: -110px;
    background: #5366ff;
}
.background-orb.two {
    right: -140px;
    bottom: -140px;
    background: #00c8ff;
    animation-delay: -6s;
}
@keyframes float-orb {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
    50% {
        transform:
            translate3d(35px, 24px, 0)
            scale(1.08);
    }
}
/* =========================================================
   Navigation
   ========================================================= */
.navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 76px;
    padding: 0 6vw;
    background:
        rgba(7, 11, 20, 0.58);
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}
.logo-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border:
        1px solid
        rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(109, 124, 255, 0.8),
            rgba(33, 200, 246, 0.55)
        );
    box-shadow:
        0 8px 24px
        rgba(75, 92, 255, 0.28);
}
.menu {
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu a {
    padding: 10px 14px;
    color: var(--text-muted);
    border-radius: 10px;
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        color 160ms ease,
        background 160ms ease;
}
.menu a:hover {
    color: var(--text);
    background:
        rgba(255, 255, 255, 0.07);
}
/* =========================================================
   Shared glass surfaces
   ========================================================= */
.glass-card,
.panel {
    background:
        linear-gradient(
            145deg,
            rgba(23, 30, 48, 0.72),
            rgba(13, 18, 31, 0.58)
        );
    border:
        1px solid
        var(--glass-border);
    border-radius:
        var(--radius-large);
    box-shadow:
        var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
/* =========================================================
   Buttons
   ========================================================= */
.button,
button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 12px 22px;
    color: white;
    border:
        1px solid
        rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #5867e8
        );
    box-shadow:
        0 12px 30px
        rgba(86, 102, 232, 0.28);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease,
        opacity 160ms ease;
}
.button:hover,
button:hover {
    transform:
        translateY(-2px);
    background:
        linear-gradient(
            135deg,
            var(--primary-hover),
            #6675ed
        );
    box-shadow:
        0 16px 38px
        rgba(86, 102, 232, 0.36);
}
.button:active,
button:active {
    transform:
        translateY(0);
}
.button:disabled,
button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
    box-shadow: none;
}
.button.full-width {
    width: 100%;
}
.button.secondary {
    background:
        rgba(255, 255, 255, 0.055);
    box-shadow: none;
}
.button.secondary:hover {
    background:
        rgba(255, 255, 255, 0.095);
    box-shadow: none;
}
/* =========================================================
   Forms
   ========================================================= */
.form-row {
    display: flex;
    gap: 10px;
}
input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 12px 14px;
    color: var(--text);
    border:
        1px solid
        rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    outline: none;
    background:
        rgba(4, 8, 16, 0.5);
    font: inherit;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}
input::placeholder {
    color: #647087;
}
input:focus {
    border-color:
        rgba(109, 124, 255, 0.72);
    background:
        rgba(5, 9, 18, 0.72);
    box-shadow:
        0 0 0 4px
        rgba(109, 124, 255, 0.12);
}
input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
progress {
    width: 80%;
    height: 18px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    accent-color: var(--primary);
}
/* =========================================================
   Homepage
   ========================================================= */
/* =========================================================
   Project Nuvio homepage
   ========================================================= */

.nuvio-home {
    background:
        radial-gradient(
            circle at 16% 10%,
            rgba(88, 103, 255, 0.2),
            transparent 31%
        ),
        radial-gradient(
            circle at 84% 24%,
            rgba(38, 198, 232, 0.12),
            transparent 29%
        ),
        radial-gradient(
            circle at 50% 74%,
            rgba(121, 64, 230, 0.1),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #070b14,
            #0b1220
        );
}


body.product-modal-open {
    overflow: hidden;
}


.nuvio-main {
    width:
        min(
            1240px,
            calc(100% - 38px)
        );

    margin: 0 auto;
    padding: 70px 0 70px;
}


/* Hero */

.nuvio-hero {
    position: relative;
    isolation: isolate;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(390px, 0.95fr);

    align-items: center;
    gap: 62px;

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

    padding: 56px 0 90px;
}


.nuvio-hero-glow {
    position: absolute;
    z-index: -1;

    top: 12%;
    left: 8%;

    width: 520px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(103, 119, 255, 0.19),
            transparent 67%
        );

    filter: blur(44px);

    pointer-events: none;
}


.nuvio-hero-content {
    max-width: 700px;
}


.nuvio-hero h1 {
    margin: 0;

    font-size:
        clamp(
            4rem,
            8.2vw,
            7.3rem
        );

    line-height: 0.92;
    letter-spacing: -0.073em;
}


.nuvio-hero h1 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ffffff,
            #afb8ff 47%,
            #5bdcf3
        );

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


.nuvio-hero-description {
    max-width: 670px;

    margin: 30px 0 0;

    color: #9ba8bd;

    font-size:
        clamp(
            1.04rem,
            1.8vw,
            1.24rem
        );

    line-height: 1.75;
}


.nuvio-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 31px;
}


.nuvio-hero-note {
    margin-top: 23px;

    color: #6f7c92;

    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* Hero flow illustration */

.nuvio-flow-visual {
    position: relative;
    isolation: isolate;

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

    min-height: 470px;

    perspective: 1200px;
}


.nuvio-flow-visual::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(92, 111, 255, 0.2),
            rgba(35, 190, 233, 0.08) 42%,
            transparent 70%
        );

    filter: blur(15px);
}


.flow-device {
    position: relative;

    display: grid;
    place-items: center;

    width: 145px;
    height: 280px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 40, 65, 0.92),
            rgba(8, 13, 25, 0.88)
        );

    box-shadow:
        0 36px 80px
        rgba(0, 0, 0, 0.44),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(18px);
}


.flow-device-left {
    transform:
        rotateY(11deg)
        rotateZ(-4deg)
        translateX(12px);
}


.flow-device-right {
    transform:
        rotateY(-11deg)
        rotateZ(4deg)
        translateX(-12px);
}


.flow-device-camera {
    position: absolute;
    top: 13px;

    width: 42px;
    height: 7px;

    border-radius: 999px;

    background:
        rgba(2, 5, 12, 0.82);
}


.flow-file {
    display: grid;
    place-items: center;

    width: 72px;
    height: 88px;

    color: #e1e5ff;

    border:
        1px solid
        rgba(149, 163, 255, 0.2);

    border-radius:
        12px 21px 12px 12px;

    background:
        linear-gradient(
            145deg,
            rgba(108, 123, 255, 0.32),
            rgba(42, 195, 229, 0.09)
        );

    box-shadow:
        0 20px 34px
        rgba(0, 0, 0, 0.22);

    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}


.flow-received {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;

    color: #a4afc2;
}


.flow-check {
    display: grid;
    place-items: center;

    width: 62px;
    height: 62px;

    color: #74dfb3;

    border:
        1px solid
        rgba(87, 213, 163, 0.18);

    border-radius: 20px;

    background:
        rgba(60, 192, 143, 0.09);

    font-size: 1.4rem;
}


.flow-route {
    position: relative;

    display: grid;
    place-items: center;

    width: 180px;
    height: 180px;
}


.flow-route::before,
.flow-route::after {
    content: "";

    position: absolute;

    width: 210px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(114, 130, 255, 0.8),
            rgba(61, 204, 229, 0.8),
            transparent
        );

    box-shadow:
        0 0 18px
        rgba(83, 174, 244, 0.4);
}


.flow-route::before {
    transform: rotate(7deg);
}


.flow-route::after {
    transform: rotate(-7deg);
}


.flow-core {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 82px;
    height: 82px;

    color: white;

    border:
        1px solid
        rgba(255, 255, 255, 0.17);

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(104, 120, 255, 0.95),
            rgba(38, 193, 224, 0.68)
        );

    box-shadow:
        0 0 55px
        rgba(85, 113, 255, 0.42);

    font-size: 1.45rem;
    font-weight: 850;
}


.flow-particle {
    position: absolute;
    z-index: 3;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #c9d0ff;

    box-shadow:
        0 0 15px
        rgba(132, 151, 255, 0.9);

    animation:
        nuvio-flow-particle
        3.2s
        ease-in-out
        infinite;
}


.particle-one {
    animation-delay: 0s;
}


.particle-two {
    animation-delay: -1.05s;
}


.particle-three {
    animation-delay: -2.1s;
}


@keyframes nuvio-flow-particle {
    0% {
        opacity: 0;

        transform:
            translateX(-92px)
            translateY(8px)
            scale(0.5);
    }

    20% {
        opacity: 1;
    }

    50% {
        transform:
            translateX(0)
            translateY(-3px)
            scale(1.15);
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translateX(92px)
            translateY(8px)
            scale(0.5);
    }
}


/* Product introduction */

.nuvio-product-intro {
    max-width: 790px;

    margin: 40px auto 48px;

    text-align: center;

    scroll-margin-top: 110px;
}


.nuvio-section-label {
    color: #8f9cb2;

    font-size: 0.73rem;
    font-weight: 780;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.nuvio-product-intro h2,
.nuvio-principles h2,
.chooser-heading h2 {
    margin: 12px 0 13px;

    font-size:
        clamp(
            2.2rem,
            5vw,
            4rem
        );

    line-height: 1.02;
    letter-spacing: -0.055em;
}


.nuvio-product-intro p {
    max-width: 680px;

    margin: 0 auto;

    color: #929fb3;

    font-size: 1rem;
    line-height: 1.7;
}


/* Product cards */

.nuvio-product-stack {
    display: grid;
    gap: 24px;
}


.nuvio-product-card {
    position: relative;
    isolation: isolate;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    align-items: stretch;

    min-height: 470px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.095);

    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            rgba(22, 29, 47, 0.77),
            rgba(9, 14, 26, 0.68)
        );

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.35);

    cursor: pointer;

    outline: none;

    transition:
        transform 300ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),
        border-color 300ms ease,
        box-shadow 300ms ease;
}


.nuvio-product-card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    opacity: 0.85;

    pointer-events: none;
}


.product-warp::before {
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(103, 87, 255, 0.18),
            transparent 36%
        );
}


.product-share::before {
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(29, 195, 221, 0.15),
            transparent 36%
        );
}


.product-vault::before {
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(62, 202, 159, 0.13),
            transparent 36%
        );
}


.nuvio-product-card:hover,
.nuvio-product-card:focus-visible {
    transform:
        translateY(-7px);

    border-color:
        rgba(135, 149, 255, 0.22);

    box-shadow:
        0 42px 110px
        rgba(0, 0, 0, 0.45);
}


.nuvio-product-card:focus-visible {
    box-shadow:
        0 0 0 4px
        rgba(109, 124, 255, 0.13),
        0 42px 110px
        rgba(0, 0, 0, 0.45);
}


.product-card-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 52px;
}


.product-card-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


.product-name {
    color: #cbd2ff;

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.product-status {
    padding: 5px 8px;

    color: #8794aa;

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.035);

    font-size: 0.66rem;
    font-weight: 720;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.product-status.product-available {
    color: #78deb5;

    border-color:
        rgba(92, 218, 168, 0.16);

    background:
        rgba(68, 196, 145, 0.07);
}


.product-card-copy h3 {
    max-width: 570px;

    margin: 24px 0 18px;

    font-size:
        clamp(
            2rem,
            4vw,
            3.3rem
        );

    line-height: 1.04;
    letter-spacing: -0.055em;
}


.product-card-copy > p {
    max-width: 590px;

    margin: 0;

    color: #94a0b4;

    font-size: 0.98rem;
    line-height: 1.72;
}


.product-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 27px;
}


.product-capabilities span {
    padding: 8px 10px;

    color: #9ba7bc;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.035);

    font-size: 0.73rem;
    font-weight: 650;
}


.product-learn-button {
    margin-top: auto;
    padding:
        34px 0 0;

    min-height: auto;

    color: #dce2f0;

    border: 0;

    background: transparent;

    box-shadow: none;
}


.product-learn-button:hover {
    color: white;

    background: transparent;
    box-shadow: none;

    transform:
        translateX(4px);
}


/* Product visual area */

.product-card-visual {
    position: relative;
    isolation: isolate;

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

    min-width: 0;

    padding: 46px;

    overflow: hidden;
}


.product-card-visual::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(95, 111, 255, 0.16),
            transparent 68%
        );

    filter: blur(13px);
}


/* Warp visual */

.warp-visual {
    display: grid;

    grid-template-columns:
        1fr 0.7fr 1fr;

    align-items: center;

    gap: 0;
}


.warp-screen {
    position: relative;

    min-width: 150px;
    height: 230px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 38, 61, 0.95),
            rgba(7, 12, 24, 0.93)
        );

    box-shadow:
        0 28px 60px
        rgba(0, 0, 0, 0.4);
}


.warp-screen-sender {
    transform:
        rotateY(8deg)
        rotateZ(-3deg);
}


.warp-screen-receiver {
    transform:
        rotateY(-8deg)
        rotateZ(3deg);
}


.visual-screen-header {
    display: flex;
    gap: 5px;

    padding: 12px 13px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);
}


.visual-screen-header span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.17);
}


.warp-file-object,
.warp-arrival {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    margin: auto;
}


.warp-file-object {
    width: 62px;
    height: 76px;

    color: #dfe4ff;

    border:
        1px solid
        rgba(144, 156, 255, 0.18);

    border-radius:
        10px 18px 10px 10px;

    background:
        rgba(108, 123, 255, 0.16);

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}


.warp-arrival span {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    color: #68deb0;

    border:
        1px solid
        rgba(84, 215, 163, 0.15);

    border-radius: 19px;

    background:
        rgba(70, 202, 150, 0.08);

    font-size: 1.3rem;
}


.warp-tunnel {
    position: relative;

    display: grid;
    place-items: center;

    min-width: 120px;
    height: 180px;
}


.warp-line {
    position: absolute;

    width: 150px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #7f83ff,
            #40cce4,
            transparent
        );

    box-shadow:
        0 0 13px
        rgba(92, 133, 255, 0.6);
}


.line-one {
    transform: rotate(0deg);
}


.line-two {
    transform: rotate(11deg);
}


.line-three {
    transform: rotate(-11deg);
}


.warp-ring {
    position: absolute;

    border:
        1px solid
        rgba(117, 131, 255, 0.25);

    border-radius: 50%;
}


.ring-one {
    width: 34px;
    height: 90px;
}


.ring-two {
    width: 57px;
    height: 124px;
}


.ring-three {
    width: 85px;
    height: 155px;
}


/* Share visual */

.share-product-visual {
    flex-direction: column;
    gap: 20px;
}


.share-upload-card,
.share-recipient-card {
    position: relative;

    width:
        min(
            440px,
            100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    background:
        linear-gradient(
            145deg,
            rgba(31, 39, 62, 0.85),
            rgba(8, 13, 25, 0.82)
        );

    box-shadow:
        0 24px 55px
        rgba(0, 0, 0, 0.3);

    backdrop-filter: blur(18px);
}


.share-upload-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 30px;
    border-radius: 22px;
    text-align: center;
    transform:
        translateX(-28px)
        rotate(-2deg);
}
.share-upload-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    color: #bfc8ff;
    border-radius: 17px;
    background:
        rgba(106, 122, 255, 0.14);
    font-size: 1.3rem;
}
.share-upload-card small,
.share-recipient-card small {
    margin-top: 5px;
    color: #7e8a9f;
}
.share-link-bridge {
    display: flex;
    align-items: center;
    width: 210px;
}
.share-link-node {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #72cfe4;
    box-shadow:
        0 0 17px
        rgba(78, 197, 224, 0.7);
}
.share-link-line {
    flex: 1;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #72cfe4,
            #8888ff
        );
}
.share-recipient-card {
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 22px;
    border-radius: 19px;
    transform:
        translateX(30px)
        rotate(2deg);
}
.share-recipient-avatar {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    color: #dce2ee;
    border-radius: 14px;
    background:
        rgba(41, 198, 220, 0.1);
    font-weight: 800;
}
.share-recipient-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}
.share-download-symbol {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #7bdcb8;
    border-radius: 13px;
    background:
        rgba(73, 203, 155, 0.08);
}
/* Vault visual */
.vault-product-visual {
    flex-direction: column;
}
.vault-visual-window {
    width:
        min(
            490px,
            100%
        );
    overflow: hidden;
    border:
        1px solid
        rgba(255, 255, 255, 0.11);
    border-radius: 23px;
    background:
        linear-gradient(
            145deg,
            rgba(28, 36, 57, 0.92),
            rgba(7, 12, 23, 0.91)
        );
    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.4);
    transform:
        perspective(900px)
        rotateY(-5deg)
        rotateX(2deg);
}
.vault-visual-toolbar {
    display: flex;
    gap: 7px;
    padding: 12px 15px;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);
    color: #77849a;
    font-size: 0.66rem;
}
.vault-visual-toolbar span {
    padding: 6px 8px;
    border-radius: 7px;
}
.vault-visual-toolbar
.vault-toolbar-active {
    color: #dfe3ff;
    background:
        rgba(108, 123, 255, 0.13);
}
.vault-visual-files {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 13px;
    padding: 28px;
}
.vault-mini-file {
    display: grid;
    place-items: center;
    height: 120px;
    color: #dce3f2;
    border:
        1px solid
        rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(106, 121, 255, 0.13),
            rgba(28, 179, 209, 0.045)
        );
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}
.vault-visual-key {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin:
        -18px 18px 0 0;
    padding: 13px 17px;
    color: #dce2ff;
    border:
        1px solid
        rgba(128, 142, 255, 0.16);
    border-radius: 13px;
    background:
        rgba(12, 18, 33, 0.94);
    box-shadow:
        0 17px 34px
        rgba(0, 0, 0, 0.32);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    transform:
        rotate(2deg);
}
.vault-visual-key small {
    color: #77849a;
    font-size: 0.57rem;
    letter-spacing: 0.12em;
}
.vault-visual-key strong {
    letter-spacing: 0.13em;
}
/* Principles */
.nuvio-principles {
    padding: 120px 0 90px;
    text-align: center;
}
.nuvio-principles h2 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.principle-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 42px;
    text-align: left;
}
.principle-item {
    padding: 27px;
    border:
        1px solid
        rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background:
        rgba(16, 23, 38, 0.48);
    backdrop-filter: blur(14px);
}
.principle-item > span {
    color: #69778e;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size: 0.71rem;
}
.principle-item strong {
    display: block;
    margin-top: 28px;
    font-size: 1rem;
}
.principle-item p {
    margin: 9px 0 0;
    color: #8491a6;
    font-size: 0.85rem;
    line-height: 1.62;
}
/* Product chooser */
.nuvio-chooser {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.72fr)
        minmax(0, 1.28fr);
    align-items: center;
    gap: 50px;
    padding: 40px;
}
.chooser-heading h2 {
    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );
}
.chooser-list {
    display: grid;
}
.chooser-row {
    display: grid;
    grid-template-columns:
        1fr auto auto;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 68px;
    padding: 14px 5px;
    color: #cbd3e3;
    border: 0;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}
.chooser-row:last-child {
    border-bottom: 0;
}
.chooser-row:hover {
    color: white;
    background: transparent;
    box-shadow: none;
    transform:
        translateX(5px);
}
.chooser-question {
    color: #8794a9;
    font-size: 0.84rem;
    font-weight: 500;
}
.chooser-row strong {
    color: #dce2f0;
    font-size: 0.87rem;
}
.chooser-arrow {
    color: #8795ff;
}
/* Product detail modal */
.product-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background:
        rgba(2, 5, 12, 0.78);
    backdrop-filter:
        blur(18px)
        saturate(115%);
    -webkit-backdrop-filter:
        blur(18px)
        saturate(115%);
    opacity: 0;
    transition:
        opacity 350ms ease;
}
.product-modal-backdrop[hidden] {
    display: none;
}
.product-modal-backdrop.visible {
    opacity: 1;
}
.product-modal {
    position: relative;
    width:
        min(
            1120px,
            100%
        );
    max-height:
        calc(100vh - 48px);
    padding: 0;
    overflow-y: auto;
    opacity: 0;
    transform:
        translateY(24px)
        scale(0.96);
    transition:
        opacity 400ms ease,
        transform 470ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );
}
.product-modal-backdrop.visible
.product-modal {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
}
.product-modal-close {
    position: absolute;
    top: 19px;
    right: 19px;
    z-index: 5;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    color: #aab4c7;
    border:
        1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background:
        rgba(255, 255, 255, 0.05);
    box-shadow: none;
    font-size: 1.35rem;
}
.product-modal-close:hover {
    color: white;
    background:
        rgba(255, 255, 255, 0.1);
    box-shadow: none;
}
.product-modal-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 0.85fr);
    align-items: stretch;
    min-height: 620px;
}
.product-modal-copy {
    padding: 65px 60px;
}
.product-modal-eyebrow {
    color: #929fb5;
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.product-modal-copy h2 {
    margin: 13px 0 9px;
    font-size:
        clamp(
            3rem,
            6vw,
            5rem
        );
    line-height: 0.95;
    letter-spacing: -0.065em;
}
.product-modal-lead {
    margin:
        0 0
        30px !important;
    color: #cbd3e2 !important;
    font-size: 1.13rem !important;
}
.product-modal-copy > p {
    max-width: 650px;
    margin: 0 0 17px;
    color: #909db1;
    line-height: 1.72;
}
.product-modal-features {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 30px 0;
}
.product-modal-features span {
    padding: 12px;
    color: #aeb8ca;
    border:
        1px solid
        rgba(255, 255, 255, 0.075);
    border-radius: 11px;
    background:
        rgba(4, 8, 16, 0.29);

    font-size: 0.78rem;
}
.product-modal-art {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    overflow: hidden;
    border-left:
        1px solid
        rgba(255, 255, 255, 0.06);
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(93, 110, 255, 0.16),
            transparent 63%
        ),
        rgba(4, 8, 16, 0.2);
}
/* Modal warp artwork */
.modal-warp-art {
    gap: 5px;
}
.modal-warp-device {
    display: grid;
    place-items: center;
    width: 112px;
    height: 210px;
    color: #bec8d9;
    border:
        1px solid
        rgba(255, 255, 255, 0.12);
    border-radius: 23px;
    background:
        linear-gradient(
            145deg,
            rgba(31, 40, 64, 0.94),
            rgba(7, 12, 23, 0.93)
        );
    box-shadow:
        0 30px 55px
        rgba(0, 0, 0, 0.38);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}
.modal-warp-device.left {
    transform:
        rotate(-5deg);
}
.modal-warp-device.right {
    transform:
        rotate(5deg);
}
.modal-warp-energy {
    position: relative;
    display: grid;
    place-items: center;
    width: 145px;
    height: 180px;
}
.modal-warp-energy::before,
.modal-warp-energy::after,
.modal-warp-energy span {
    content: "";
    position: absolute;
    width: 150px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            #7f88ff,
            #3bcade,
            transparent
        );
    box-shadow:
        0 0 18px
        rgba(92, 139, 255, 0.6);
}
.modal-warp-energy::before {
    transform:
        rotate(13deg);
}
.modal-warp-energy::after {
    transform:
        rotate(-13deg);
}
/* Modal share artwork */
.modal-share-art {
    flex-direction: column;
    gap: 21px;
}
.modal-share-file,
.modal-share-person {
    display: grid;
    place-items: center;
    color: #dbe2f0;
    border:
        1px solid
        rgba(255, 255, 255, 0.11);
    background:
        linear-gradient(
            145deg,
            rgba(31, 40, 64, 0.92),
            rgba(7, 12, 23, 0.91)
        );
    box-shadow:
        0 25px 50px
        rgba(0, 0, 0, 0.34);
}
.modal-share-file {
    width: 155px;
    height: 180px;
    border-radius:
        20px 35px 20px 20px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    transform:
        rotate(-4deg);
}
.modal-share-link {
    display: grid;
    place-items: center;
    width: 210px;
    height: 45px;
    color: #aeb7ff;
    border:
        1px solid
        rgba(124, 138, 255, 0.15);
    border-radius: 999px;
    background:
        rgba(106, 121, 255, 0.09);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}
.modal-share-person {
    width: 170px;
    height: 100px;
    border-radius: 24px;
    color: #72dcb3;
    font-size: 1.5rem;
    transform:
        rotate(4deg);
}
/* Modal vault artwork */
.modal-vault-art {
    flex-direction: column;
}
.modal-vault-door {
    display: grid;
    place-items: center;
    width: 270px;
    height: 330px;
    border:
        1px solid
        rgba(255, 255, 255, 0.13);
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(35, 44, 67, 0.95),
            rgba(8, 13, 24, 0.94)
        );
    box-shadow:
        0 40px 80px
        rgba(0, 0, 0, 0.45),
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);
}
.modal-vault-lock {
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    color: white;
    border:
        1px solid
        rgba(255, 255, 255, 0.14);
    border-radius: 29px;
    background:
        linear-gradient(
            145deg,
            rgba(103, 118, 255, 0.9),
            rgba(46, 197, 211, 0.56)
        );
    box-shadow:
        0 0 42px
        rgba(91, 118, 255, 0.34);
    font-size: 1.5rem;
    font-weight: 850;
}
.modal-vault-key {
    margin-top: -22px;
    padding: 14px 18px;
    color: #dce3ff;
    border:
        1px solid
        rgba(127, 141, 255, 0.17);
    border-radius: 13px;
    background:
        rgba(9, 15, 28, 0.97);
    box-shadow:
        0 18px 35px
        rgba(0, 0, 0, 0.35);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size: 0.87rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}
.vault-modal-actions {
    display: grid;
    gap: 12px;
}
.vault-modal-open-form {
    display: grid;
    grid-template-columns:
        1fr auto;
    gap: 9px;
}
/* Footer */
.nuvio-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    width:
        min(
            1240px,
            calc(100% - 38px)
        );
    padding-top: 45px;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
    text-align: left;
}
.nuvio-footer > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.nuvio-footer strong {
    color: #dce2ee;
}
.nuvio-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.nuvio-footer-links button {
    min-height: auto;
    padding: 8px 10px;
    color: #7d899e;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.78rem;
}
.nuvio-footer-links button:hover {
    color: #cdd4e0;
    background:
        rgba(255, 255, 255, 0.04);
    box-shadow: none;
}
.nuvio-footer-links a,
.nuvio-footer-links button {
    min-height: auto;
    padding: 7px 10px;

    color: #7e8a9f;

    border: 0;
    border-radius: 8px;

    background: transparent;
    box-shadow: none;

    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 160ms ease,
        background 160ms ease;
}

.nuvio-footer-links a:hover,
.nuvio-footer-links button:hover {
    color: #cbd3e1;

    background:
        rgba(255, 255, 255, 0.04);

    box-shadow: none;
    transform: none;
}
/* Nuvio responsive */
@media (max-width: 1040px) {
    .nuvio-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .nuvio-hero-content {
        max-width: 850px;
        text-align: center;
    }
    .nuvio-hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    .nuvio-hero-actions {
        justify-content: center;
    }
    .nuvio-flow-visual {
        min-height: 390px;
    }
    .nuvio-product-card {
        grid-template-columns: 1fr;
    }
    .product-card-visual {
        min-height: 390px;
    }
    .product-modal-layout {
        grid-template-columns: 1fr;
    }
    .product-modal-art {
        min-height: 380px;
        border-top:
            1px solid
            rgba(255, 255, 255, 0.06);
        border-left: 0;
    }
}
@media (max-width: 820px) {
    .nuvio-main {
        padding-top: 34px;
    }
    .nuvio-hero {
        gap: 25px;
        padding-top: 35px;
    }
    .nuvio-flow-visual {
        transform:
            scale(0.88);
    }
    .product-card-copy {
        padding: 38px 30px;
    }
    .product-card-visual {
        padding: 30px;
    }
    .principle-grid {
        grid-template-columns: 1fr;
    }
    .nuvio-chooser {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .nuvio-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 620px) {
    .nuvio-main {
        width:
            min(
                100% - 20px,
                1240px
            );
    }
    .nuvio-hero h1 {
        font-size:
            clamp(
                3.2rem,
                16vw,
                5.1rem
            );
    }
    .nuvio-hero-actions {
        flex-direction: column;
    }
    .nuvio-hero-actions .button {
        width: 100%;
    }
    .nuvio-flow-visual {
        min-height: 310px;
        transform:
            scale(0.67);
    }
    .nuvio-product-card {
        min-height: auto;
        border-radius: 23px;
    }
    .product-card-copy {
        padding: 30px 23px;
    }
    .product-card-copy h3 {
        font-size: 2rem;
    }
    .product-card-visual {
        min-height: 320px;
        padding: 20px;
    }
    .warp-visual {
        transform:
            scale(0.72);
    }
    .share-product-visual,
    .vault-product-visual {
        transform:
            scale(0.83);
    }
    .nuvio-principles {
        padding:
            80px 0
            60px;
    }
    .nuvio-chooser {
        padding: 26px 21px;
    }
    .chooser-row {
        grid-template-columns:
            1fr auto;
    }
    .chooser-question {
        grid-column:
            1 / -1;
    }
    .product-modal-backdrop {
        padding: 10px;
    }
    .product-modal {
        max-height:
            calc(100vh - 20px);
        border-radius: 21px;
    }
    .product-modal-copy {
        padding:
            62px 24px
            30px;
    }
    .product-modal-copy h2 {
        font-size: 3.2rem;
    }
    .product-modal-features {
        grid-template-columns: 1fr;
    }
    .product-modal-art {
        min-height: 310px;
        transform-origin: center;
    }
    .modal-warp-art {
        transform:
            scale(0.75);
    }
    .modal-share-art,
    .modal-vault-art {
        transform:
            scale(0.84);
    }
    .vault-modal-open-form {
        grid-template-columns: 1fr;
    }
    .vault-modal-open-form button {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .flow-particle {
        animation: none;
    }
    .nuvio-product-card,
    .product-modal-backdrop,
    .product-modal {
        transition-duration: 1ms;
    }
}
/* =========================================================
   General footer and legacy panels
   ========================================================= */
.site-footer {
    width:
        min(
            1160px,
            calc(100% - 36px)
        );
    margin: 0 auto;
    padding: 34px 0 42px;
    color: #657289;
    text-align: center;
    font-size: 0.83rem;
}
.panel {
    width:
        min(
            720px,
            calc(100% - 34px)
        );
    margin: 64px auto;
    padding: 38px;
    text-align: center;
}
.panel h1 {
    margin-top: 0;
    letter-spacing: -0.04em;
}
.panel hr {
    height: 1px;
    margin: 28px 0;
    border: 0;
    background:
        rgba(255, 255, 255, 0.08);
}
.vault-key {
    margin: 20px;
    font-size:
        clamp(1.65rem, 6vw, 2.2rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    overflow-wrap: anywhere;
}
.share-box {
    padding: 14px;
    color: #cbd4e8;
    border:
        1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background:
        rgba(3, 7, 14, 0.48);
    overflow-wrap: anywhere;
}
.file-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 12px 0;
    padding: 16px;
    text-align: left;
    border:
        1px solid
        rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background:
        rgba(4, 8, 16, 0.38);
}
.file-card a {
    color: #92a2ff;
    text-decoration: none;
}
.file-card a:hover {
    color: #c8ceff;
}
/* =========================================================
   Owner vault explorer
   ========================================================= */
.vault-workspace {
    width:
        min(
            1320px,
            calc(100% - 34px)
        );
    margin: 0 auto;
    padding: 42px 0 24px;
}
.vault-explorer {
    min-height: 700px;
    overflow: hidden;
    border-radius: 24px;
    transition:
        filter 350ms ease,
        opacity 350ms ease;
}
.vault-explorer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 28px 30px 22px;
}
.vault-label,
.modal-eyebrow {
    margin-bottom: 7px;
    color: #8e9bb3;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.vault-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.vault-title-row h1 {
    margin: 0;
    font-size: 2rem;
    letter-spacing: -0.05em;
}
.vault-key-compact {
    padding: 8px 12px;
    color: #d6dcff;
    border:
        1px solid
        rgba(137, 151, 255, 0.16);
    border-radius: 10px;
    background:
        rgba(109, 124, 255, 0.09);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size: 0.94rem;
    font-weight: 750;
    letter-spacing: 0.1em;
}
.vault-summary {
    display: flex;
    justify-content: flex-end;
    gap: 34px;
}
.summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}
.summary-label {
    color: #7f8ca3;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.summary-item strong {
    color: #dce3f3;
    font-size: 0.9rem;
}
.vault-storage-strip {
    padding: 0 30px 22px;
}
.storage-track {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background:
        rgba(255, 255, 255, 0.065);
}
.storage-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #6978ff,
            #34c5e8,
            #48d49b
        );
    box-shadow:
        0 0 18px
        rgba(77, 195, 226, 0.35);
    transition:
        width 500ms ease;
}
.storage-strip-text {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 9px;
    color: #7f8ba1;
    font-size: 0.78rem;
}
/* =========================================================
   Explorer toolbar
   ========================================================= */
.explorer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 66px;
    padding: 10px 18px;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.065);
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.075);
    background:
        rgba(4, 8, 16, 0.23);
}
.toolbar-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}
.toolbar-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    color: #cbd3e4;
    border:
        1px solid
        transparent;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
}
.toolbar-button:hover {
    color: white;
    border-color:
        rgba(255, 255, 255, 0.08);
    background:
        rgba(255, 255, 255, 0.065);
    box-shadow: none;
    transform:
        translateY(-1px);
}
.toolbar-button.primary-tool {
    color: white;
    border-color:
        rgba(125, 140, 255, 0.18);
    background:
        rgba(109, 124, 255, 0.17);
}
.toolbar-button.danger-tool:not(:disabled) {
    color: #ff9eaa;
}
.toolbar-button:disabled {
    color: #596579;
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.tool-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 1rem;
}
.toolbar-separator {
    width: 1px;
    height: 28px;
    margin: 0 5px;
    background:
        rgba(255, 255, 255, 0.09);
}
/* =========================================================
   Upload drawer
   ========================================================= */
.upload-drawer {
    margin: 16px 20px 0;
    padding: 16px 18px;
    border:
        1px solid
        rgba(109, 124, 255, 0.17);
    border-radius: 13px;
    background:
        rgba(60, 72, 156, 0.09);
}
.upload-drawer[hidden] {
    display: none;
}
.upload-drawer-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}
.upload-detail {
    margin-top: 4px;
    color: #8794aa;
    font-size: 0.8rem;
}
.upload-close,
.modal-close {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    color: #aeb8cb;
    border: 0;
    border-radius: 9px;
    background:
        rgba(255, 255, 255, 0.055);
    box-shadow: none;
    font-size: 1.3rem;
}
.upload-close:hover,
.modal-close:hover {
    background:
        rgba(255, 255, 255, 0.1);
    box-shadow: none;
}
.upload-drawer progress {
    width: 100%;
}
/* =========================================================
   File grid
   ========================================================= */
.file-explorer {
    min-height: 470px;
    padding: 26px;
    background:
        linear-gradient(
            180deg,
            rgba(3, 7, 14, 0.13),
            rgba(3, 7, 14, 0.24)
        );
}
.file-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(132px, 1fr)
        );
    gap: 14px;
}
.explorer-file {
    position: relative;
    min-width: 0;
    min-height: 166px;
    padding: 16px 12px 13px;
    border:
        1px solid
        transparent;
    border-radius: 14px;
    background: transparent;
    outline: none;
    cursor: default;
    user-select: none;
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}
.explorer-file:hover {
    transform:
        translateY(-2px);
    border-color:
        rgba(255, 255, 255, 0.075);
    background:
        rgba(255, 255, 255, 0.035);
}
.explorer-file:focus-visible {
    border-color:
        rgba(109, 124, 255, 0.65);
    box-shadow:
        0 0 0 3px
        rgba(109, 124, 255, 0.12);
}
.explorer-file.selected {
    border-color:
        rgba(109, 124, 255, 0.58);
    background:
        linear-gradient(
            145deg,
            rgba(109, 124, 255, 0.15),
            rgba(33, 200, 246, 0.06)
        );
    box-shadow:
        0 0 0 3px
        rgba(109, 124, 255, 0.08);
}
.file-selection-mark {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: white;
    border:
        1px solid
        rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    background:
        rgba(7, 12, 23, 0.72);
    font-size: 0.68rem;
    opacity: 0;
    transform:
        scale(0.8);
    transition:
        opacity 150ms ease,
        transform 150ms ease,
        background 150ms ease;
}
.explorer-file:hover
.file-selection-mark {
    opacity: 0.5;
}
.explorer-file.selected
.file-selection-mark {
    opacity: 1;
    transform:
        scale(1);
    background: #6877ef;
}
.file-icon-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 66px;
    height: 78px;
    margin: 5px auto 13px;
    color: #dbe1ff;
    border:
        1px solid
        rgba(151, 163, 255, 0.14);
    border-radius:
        10px 16px 10px 10px;
    background:
        linear-gradient(
            145deg,
            rgba(109, 124, 255, 0.22),
            rgba(33, 200, 246, 0.075)
        );
    box-shadow:
        0 13px 25px
        rgba(0, 0, 0, 0.17);
}
.file-icon-fold {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-bottom-left-radius: 7px;
    background:
        rgba(186, 196, 255, 0.19);
    clip-path:
        polygon(
            0 0,
            100% 100%,
            0 100%
        );
}
.file-extension {
    max-width: 54px;
    overflow: hidden;
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-card-details {
    text-align: center;
}
.file-card-name {
    overflow: hidden;
    color: #e6eaf3;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    color: #738097;
    font-size: 0.7rem;
}
/* =========================================================
   Empty state and status bar
   ========================================================= */
.explorer-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 390px;
    color: #8591a7;
    text-align: center;
}
.empty-cloud-icon {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin-bottom: 18px;
    color: #a9b4ff;
    border:
        1px solid
        rgba(130, 145, 255, 0.14);
    border-radius: 25px;
    background:
        rgba(109, 124, 255, 0.09);
    font-size: 2rem;
}
.explorer-empty-state h2 {
    margin: 0 0 7px;
    color: #d9deea;
    font-size: 1.2rem;
}
.explorer-empty-state p {
    margin: 0 0 20px;
    font-size: 0.88rem;
}
.explorer-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 46px;
    padding: 9px 20px;
    color: #7c899f;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.065);
    background:
        rgba(3, 7, 14, 0.3);
    font-size: 0.76rem;
}
.status-primary {
    min-width: 0;
    overflow: hidden;
    color: #adb7ca;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-secondary {
    text-align: right;
}
/* =========================================================
   Modal system
   ========================================================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        rgba(1, 4, 10, 0.66);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.modal-backdrop[hidden] {
    display: none;
}
.modal-card {
    width:
        min(
            600px,
            100%
        );
    max-height:
        min(
            760px,
            calc(100vh - 40px)
        );
    padding: 26px;
    overflow-y: auto;
}
.settings-modal-card {
    width:
        min(
            720px,
            100%
        );
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}
.modal-header h2 {
    margin: 0;
    font-size: 1.55rem;
    letter-spacing: -0.04em;
}
.modal-description {
    margin: 14px 0 23px;
    color: #8f9bb0;
    font-size: 0.9rem;
    line-height: 1.6;
}
.modal-field-label {
    display: block;
    margin-bottom: 8px;
    color: #aeb8ca;
    font-size: 0.78rem;
    font-weight: 700;
}
/* =========================================================
   Share modal
   ========================================================= */
.share-link-row {
    display: grid;
    grid-template-columns:
        1fr auto;
    gap: 10px;
}
.share-link-row
.share-box {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 46px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-modal-grid {
    display: grid;
    grid-template-columns:
        0.8fr 1.2fr;
    gap: 17px;
    margin-top: 22px;
}
.qr-placeholder,
.share-information {
    padding: 18px;
    border:
        1px solid
        rgba(255, 255, 255, 0.075);
    border-radius: 14px;
    background:
        rgba(4, 8, 16, 0.35);
}
.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.qr-placeholder-box {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    margin-bottom: 13px;
    color: #aab4ff;
    border:
        1px dashed
        rgba(153, 165, 255, 0.3);
    border-radius: 13px;
    background:
        rgba(109, 124, 255, 0.07);
    font-weight: 800;
    letter-spacing: 0.08em;
}
.qr-placeholder small {
    margin-top: 5px;
    color: #718096;
    line-height: 1.45;
}
.share-information {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.information-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 11px 0;
    color: #8895a9;
    font-size: 0.82rem;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}
.information-row:last-child {
    border-bottom: 0;
}
.information-row strong {
    color: #dce1ec;
}
/* =========================================================
   Settings modal
   ========================================================= */
.settings-section {
    margin-top: 18px;
    padding: 20px;
    border:
        1px solid
        rgba(255, 255, 255, 0.075);
    border-radius: 15px;
    background:
        rgba(4, 8, 16, 0.31);
}
.settings-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}
.settings-section-heading h3 {
    margin: 0 0 5px;
    font-size: 1rem;
}
.settings-section-heading p {
    margin: 0;
    color: #7c899e;
    font-size: 0.8rem;
}
.coming-soon-badge {
    padding: 5px 8px;
    color: #a7b0c4;
    border:
        1px solid
        rgba(255, 255, 255, 0.075);
    border-radius: 999px;
    background:
        rgba(255, 255, 255, 0.035);
    font-size: 0.66rem;
    font-weight: 750;
    white-space: nowrap;
}
.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.settings-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-row small {
    color: #7f8ca1;
}
.settings-option-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.settings-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
    border:
        1px solid
        rgba(255, 255, 255, 0.065);
    border-radius: 11px;
    opacity: 0.55;
}
.settings-option input {
    width: auto;
    min-height: auto;
    margin-top: 3px;
}
.settings-option span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.settings-option small {
    color: #7d899c;
}
.notification-options {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    color: #8793a8;
    font-size: 0.82rem;
}
.notification-options label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.notification-options input {
    width: auto;
    min-height: auto;
}
/* =========================================================
   Delete confirmation modal
   ========================================================= */
.delete-modal-card {
    width:
        min(
            500px,
            100%
        );
}
.delete-file-list {
    display: grid;
    gap: 8px;
    max-height: 210px;
    margin:
        8px 0
        24px;
    padding-right: 4px;
    overflow-y: auto;
}
.delete-file-item {
    padding: 11px 13px;
    overflow: hidden;
    color: #d8deeb;
    border:
        1px solid
        rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background:
        rgba(4, 8, 16, 0.35);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.delete-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.delete-confirm-button {
    background:
        linear-gradient(
            135deg,
            #e05265,
            #be3f53
        );
    box-shadow:
        0 12px 30px
        rgba(224, 82, 101, 0.22);
}
.delete-confirm-button:hover {
    background:
        linear-gradient(
            135deg,
            #ef6576,
            #cf4c61
        );
    box-shadow:
        0 16px 38px
        rgba(224, 82, 101, 0.3);
}
/* =========================================================
   Vault reveal and materialization
   ========================================================= */
.vault-reveal-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.vault-reveal-glass {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width:
        min(
            440px,
            calc(100% - 34px)
        );
    min-height: 220px;
    padding: 34px;
    overflow: hidden;
    border:
        1px solid
        rgba(255, 255, 255, 0.13);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(23, 30, 48, 0.78),
            rgba(9, 14, 27, 0.66)
        );
    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, 0.5),
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    text-align: center;
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
    transition:
        opacity 900ms ease,
        transform 1000ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),
        background 900ms ease,
        border-color 900ms ease,
        box-shadow 900ms ease;
}
/*
    The reflection is intentionally constrained to the exact
    dimensions and inherited radius of the glass card.
*/
.vault-reveal-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            120deg,
            transparent 24%,
            rgba(255, 255, 255, 0.045) 49%,
            transparent 74%
        );
    transform:
        translateX(-100%);
    animation:
        reveal-glass-light
        4.8s
        ease-in-out
        forwards;
    pointer-events: none;
}
@keyframes reveal-glass-light {
    0% {
        transform:
            translateX(-100%);
        opacity: 0;
    }
    22% {
        opacity: 1;
    }
    76% {
        opacity: 0.5;
    }
    100% {
        transform:
            translateX(100%);
        opacity: 0;
    }
}
.vault-reveal-stage {
    position: absolute;
    z-index: 1;
    width:
        calc(100% - 54px);
    opacity: 0;
    visibility: hidden;
    transform:
        translateY(10px);
    transition:
        opacity 480ms ease,
        transform 650ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),
        visibility 0s linear 600ms;
}
.vault-reveal-stage.active {
    opacity: 1;
    visibility: visible;
    transform:
        translateY(0);
    transition-delay: 0s;
}
.vault-reveal-label {
    margin-bottom: 12px;
    color: #919eb5;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.vault-reveal-message {
    color: #f4f7ff;
    font-size:
        clamp(1.35rem, 4vw, 1.9rem);
    font-weight: 650;
    letter-spacing: -0.04em;
}
.vault-reveal-key {
    color: #f7f8ff;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size:
        clamp(2rem, 8vw, 3.6rem);
    font-weight: 820;
    letter-spacing: 0.16em;
    text-shadow:
        0 0 28px
        rgba(121, 137, 255, 0.18);
}
.vault-reveal-loading-key {
    margin-bottom: 13px;
    color: #aeb8ff;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size: 0.84rem;
    font-weight: 750;
    letter-spacing: 0.13em;
}
.vault-loading-number {
    margin-top: 18px;
    color: #9aa6bd;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size: 0.82rem;
    font-weight: 700;
}
body.vault-reveal-active
.navbar,
body.vault-reveal-active
.vault-workspace,
body.vault-reveal-active
.site-footer {
    filter:
        blur(25px)
        saturate(78%);
    transform:
        scale(1.018);
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
    transition:
        filter 1900ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        transform 1900ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        opacity 1750ms ease;
}
body.vault-reveal-create
.vault-key-compact {
    opacity: 0;
    transition:
        opacity 700ms ease;
}
body.vault-reveal-active.reveal-key-ready
.navbar,
body.vault-reveal-active.reveal-key-ready
.vault-workspace,
body.vault-reveal-active.reveal-key-ready
.site-footer {
    filter:
        blur(20px)
        saturate(84%);
    transform:
        scale(1.014);
    opacity: 0.24;
}
body.vault-reveal-active.reveal-loading
.navbar,
body.vault-reveal-active.reveal-loading
.vault-workspace,
body.vault-reveal-active.reveal-loading
.site-footer {
    filter:
        blur(7px)
        saturate(96%);
    transform:
        scale(1.004);
    opacity: 0.76;
    transition:
        filter 2300ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        transform 2300ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        opacity 2100ms ease;
}
body.vault-reveal-finishing
.navbar,
body.vault-reveal-finishing
.vault-workspace,
body.vault-reveal-finishing
.site-footer {
    filter:
        blur(0)
        saturate(100%);
    transform:
        scale(1);
    opacity: 1;
    transition:
        filter 1050ms ease,
        transform 1050ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),
        opacity 900ms ease;
}
body.vault-reveal-finishing
.vault-key-compact {
    opacity: 1;
}
.vault-reveal-overlay.leaving
.vault-reveal-glass {
    opacity: 0;
    transform:
        translateY(-7px)
        scale(0.975);
    background:
        rgba(10, 15, 27, 0);
    border-color:
        rgba(255, 255, 255, 0);
    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0);
}
body.vault-reveal-load
.navbar,
body.vault-reveal-load
.vault-workspace,
body.vault-reveal-load
.site-footer {
    filter:
        blur(13px)
        saturate(90%);
    transform:
        scale(1.008);
    opacity: 0.42;
}
/* =========================================================
   Terms overlay and terms document
   ========================================================= */
.terms-modal-card {
    display: flex;
    flex-direction: column;
    width:
        min(
            760px,
            92vw
        );
    max-height:
        min(
            82vh,
            780px
        );
    overflow: hidden;
}
.terms-scroll {
    height:
        min(
            480px,
            48vh
        );
    max-height: 48vh;
    margin: 18px 0 24px;
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #9aa7bb;
    border:
        1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background:
        rgba(3, 7, 14, 0.42);
    font-size: 0.86rem;
    line-height: 1.7;
    scroll-behavior: smooth;
}
.terms-scroll:focus-visible {
    outline:
        2px solid
        rgba(109, 124, 255, 0.55);
    outline-offset: 3px;
}
.terms-scroll h2 {
    margin:
        26px 0
        9px;
    color: #e2e7f0;
    font-size: 1rem;
}
.terms-scroll h2:first-child {
    margin-top: 0;
}
.terms-scroll p {
    margin: 0 0 18px;
}
.terms-scroll p:last-child {
    margin-bottom: 0;
}
.terms-scroll strong {
    color: #dce3ef;
}
.terms-scroll-hint {
    margin:
        -12px 0
        18px;
    color: #77859b;
    font-size: 0.76rem;
    text-align: center;
    transition:
        color 180ms ease;
}
.terms-scroll-hint.complete {
    color: #65d8aa;
}
.terms-checkbox,
.terms-acceptance {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 15px;
    color: #c7cfdd;
    border:
        1px solid
        rgba(255, 255, 255, 0.075);
    border-radius: 12px;
    background:
        rgba(4, 8, 16, 0.32);
    font-size: 0.9rem;
    cursor: default;
}
.terms-checkbox input,
.terms-acceptance input {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    min-height: auto;
    margin: 0;
    padding: 0;
    accent-color: var(--primary);
}
.terms-checkbox:has(
    input:disabled
),
.terms-acceptance:has(
    input:disabled
) {
    opacity: 0.48;
}
.vault-locked {
    pointer-events: none;
    user-select: none;
    filter:
        blur(2px);
    opacity: 0.55;
}
.terms-modal-leaving {
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 420ms ease;
}
/*
    Standalone terms-page styles are retained in case the
    old template is still temporarily reachable.
*/
.terms-page {
    width:
        min(
            780px,
            calc(100% - 34px)
        );
    margin: 0 auto;
    padding: 48px 0 28px;
}
.terms-card {
    padding: 30px;
}
.terms-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}
.terms-header h1 {
    margin: 5px 0 0;
    font-size:
        clamp(1.8rem, 5vw, 2.6rem);
    letter-spacing: -0.05em;
}
.terms-version-badge {
    padding: 7px 10px;
    color: #aab4c8;
    border:
        1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background:
        rgba(255, 255, 255, 0.04);
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}
.terms-alert {
    margin-bottom: 18px;
    padding: 16px;
    color: #adb8ca;
    border:
        1px solid
        rgba(109, 124, 255, 0.16);
    border-radius: 13px;
    background:
        rgba(65, 77, 159, 0.09);
}
.terms-alert strong,
.terms-alert span {
    display: block;
}
.terms-alert strong {
    margin-bottom: 5px;
    color: #e5e9f4;
}
.terms-alert span {
    font-size: 0.84rem;
    line-height: 1.55;
}
.error-alert {
    border-color:
        rgba(255, 107, 122, 0.2);
    background:
        rgba(162, 54, 70, 0.1);
}
.terms-existing-form {
    display: grid;
    grid-template-columns:
        1fr auto;
    gap: 9px;
    margin-top: 14px;
}
.terms-document-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
    padding-top: 17px;
    color: #7f8da3;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);
    font-size: 0.75rem;
}
.terms-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
/* =========================================================
   Shared vault landing page
   ========================================================= */
.shared-page {
    min-height: 100vh;
}
.shared-main {
    width:
        min(
            1180px,
            calc(100% - 34px)
        );
    margin: 0 auto;
    padding: 58px 0 28px;
}
.shared-heading {
    max-width: 700px;
    margin:
        0 auto
        32px;
    text-align: center;
}
.shared-eyebrow,
.promotion-eyebrow,
.shared-explorer-label {
    color: #93a0b6;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.shared-heading h1 {
    margin: 10px 0 12px;
    font-size:
        clamp(2rem, 6vw, 3.7rem);
    letter-spacing: -0.055em;
}
.shared-heading p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.65;
}
.shared-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 760px);
    justify-content: center;
    align-items: start;
    gap: 0;
    transition:
        grid-template-columns 850ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),
        gap 850ms ease;
}
.shared-layout.promotion-visible {
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.75fr);
    gap: 22px;
}
.shared-explorer {
    min-width: 0;
    align-self: start;
    overflow: hidden;
    border-radius: 24px;
}
.shared-explorer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 26px 28px 21px;
}
.shared-explorer-header h2 {
    margin: 6px 0 0;
    font-size: 1.55rem;
    letter-spacing: -0.04em;
}
.shared-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.shared-summary strong {
    font-size: 1.45rem;
}
.shared-summary span {
    color: #8290a7;
    font-size: 0.75rem;
}
.shared-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding: 10px 18px;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.065);
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.075);
    background:
        rgba(4, 8, 16, 0.24);
}
.shared-file-area {
    min-height: 390px;
    padding: 24px;
    background:
        linear-gradient(
            180deg,
            rgba(3, 7, 14, 0.12),
            rgba(3, 7, 14, 0.24)
        );
}
.shared-file-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(132px, 1fr)
        );
    gap: 14px;
}
.shared-file-card {
    position: relative;
    min-width: 0;
    min-height: 160px;
    padding: 15px 12px;
    border:
        1px solid
        transparent;
    border-radius: 14px;
    background: transparent;
    outline: none;
    cursor: default;
    user-select: none;
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}
.shared-file-card:hover {
    transform:
        translateY(-2px);
    border-color:
        rgba(255, 255, 255, 0.075);
    background:
        rgba(255, 255, 255, 0.035);
}
.shared-file-card.selected {
    border-color:
        rgba(109, 124, 255, 0.58);
    background:
        linear-gradient(
            145deg,
            rgba(109, 124, 255, 0.15),
            rgba(33, 200, 246, 0.06)
        );
    box-shadow:
        0 0 0 3px
        rgba(109, 124, 255, 0.08);
}
.shared-selection-mark {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: white;
    border:
        1px solid
        rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    background: #6877ef;
    font-size: 0.68rem;
    opacity: 0;
    transform:
        scale(0.8);
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}
.shared-file-card.selected
.shared-selection-mark {
    opacity: 1;
    transform:
        scale(1);
}
.shared-file-name {
    overflow: hidden;
    color: #e6eaf3;
    font-size: 0.82rem;
    font-weight: 650;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shared-file-size {
    margin-top: 5px;
    color: #748197;
    font-size: 0.71rem;
    text-align: center;
}
.shared-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    min-height: 46px;
    padding: 9px 20px;
    color: #7d899e;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.065);
    background:
        rgba(3, 7, 14, 0.3);
    font-size: 0.76rem;
}
#sharedStatusPrimary {
    min-width: 0;
    overflow: hidden;
    color: #adb7ca;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#sharedStatusSecondary {
    text-align: right;
}
.shared-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 340px;
    color: #8390a5;
    text-align: center;
}
.shared-empty-state h2 {
    margin: 0 0 8px;
    color: #dbe0ea;
}
.shared-empty-state p {
    margin: 0;
}
.shared-promotion {
    display: none;
    min-width: 0;
    align-self: start;
    padding: 34px;
    overflow: hidden;
}
.shared-layout.promotion-visible
.shared-promotion {
    display: block;
    animation:
        shared-promotion-arrive
        750ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        both;
}
@keyframes shared-promotion-arrive {
    from {
        opacity: 0;
        transform:
            translateX(30px)
            scale(0.975);
    }
    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}
.promotion-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    color: #c4ccff;
    border:
        1px solid
        rgba(148, 162, 255, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(109, 124, 255, 0.18),
            rgba(33, 200, 246, 0.08)
        );
    font-size: 1.3rem;
}
.shared-promotion h2 {
    margin: 10px 0 15px;
    font-size:
        clamp(1.45rem, 3vw, 2.1rem);
    line-height: 1.12;
    letter-spacing: -0.045em;
}
.shared-promotion p {
    margin: 0 0 13px;
    color: #929fb4;
    font-size: 0.91rem;
    line-height: 1.65;
}
.promotion-button {
    margin-top: 14px;
}
/* =========================================================
   Network conflict page
   ========================================================= */
.conflict-page {
    width:
        min(
            680px,
            calc(100% - 34px)
        );
    margin: 0 auto;
    padding: 72px 0 28px;
}
.conflict-card {
    padding: 38px;
    text-align: center;
}
.conflict-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin:
        0 auto
        22px;
    color: #c5cdff;
    border:
        1px solid
        rgba(145, 159, 255, 0.17);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(109, 124, 255, 0.2),
            rgba(33, 200, 246, 0.08)
        );
    font-size: 1.5rem;
}
.conflict-card h1 {
    max-width: 520px;
    margin:
        10px auto
        15px;
    font-size:
        clamp(1.8rem, 5vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}
.conflict-card > p {
    max-width: 540px;
    margin:
        0 auto
        28px;
    color: var(--text-muted);
    line-height: 1.65;
}
.conflict-open-section,
.conflict-new-section {
    padding: 22px;
    border:
        1px solid
        rgba(255, 255, 255, 0.075);
    border-radius: 15px;
    background:
        rgba(4, 8, 16, 0.32);
}
.conflict-open-section h2,
.conflict-new-section h2 {
    margin: 0 0 8px;
    font-size: 1rem;
}
.conflict-new-section p {
    margin: 0 0 17px;
    color: #8693a8;
    font-size: 0.84rem;
    line-height: 1.55;
}
.conflict-open-form {
    display: grid;
    grid-template-columns:
        1fr auto;
    gap: 10px;
    margin-top: 16px;
}
.conflict-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    color: #68758b;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.conflict-divider::before,
.conflict-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background:
        rgba(255, 255, 255, 0.07);
}
.conflict-back-link {
    display: inline-block;
    margin-top: 24px;
    color: #8794aa;
    font-size: 0.83rem;
    text-decoration: none;
}
.conflict-back-link:hover {
    color: #c7cfde;
}
/* =========================================================
   Responsive layout
   ========================================================= */
@media (max-width: 860px) {
    .vault-explorer-header {
        flex-direction: column;
    }
    .vault-summary {
        width: 100%;
        justify-content: space-between;
    }
    .summary-item {
        align-items: flex-start;
        text-align: left;
    }
    .explorer-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .toolbar-vault-actions {
        width: 100%;
        padding-top: 8px;
        border-top:
            1px solid
            rgba(255, 255, 255, 0.065);
    }
    .share-modal-grid {
        grid-template-columns: 1fr;
    }
    .settings-option-grid {
        grid-template-columns: 1fr;
    }
    .shared-layout,
    .shared-layout.promotion-visible {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .shared-promotion {
        display: none;
    }
    .shared-layout.promotion-visible
    .shared-promotion {
        display: block;
    }
}
@media (max-width: 820px) {
    .navbar {
        padding: 0 18px;
    }
    .menu a:first-child {
        display: none;
    }
    .home-main {
        padding-top: 54px;
    }
    .hero {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .hero-copy {
        text-align: center;
    }
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .navbar {
        min-height: 66px;
    }
    .logo-text {
        display: none;
    }
    .home-main {
        width:
            min(
                100% - 24px,
                1160px
            );
    }
    .hero h1 {
        font-size: 3.25rem;
    }
    .action-card,
    .panel {
        padding: 24px;
    }
    .form-row {
        flex-direction: column;
    }
    .file-card {
        align-items: flex-start;
        flex-direction: column;
    }
    .file-card > div:last-child {
        width: 100%;
    }
    .vault-workspace {
        width:
            min(
                100% - 18px,
                1320px
            );
        padding-top: 18px;
    }
    .vault-explorer-header,
    .vault-storage-strip {
        padding-left: 18px;
        padding-right: 18px;
    }
    .vault-summary {
        flex-direction: column;
        gap: 14px;
    }
    .storage-strip-text {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .toolbar-group {
        width: 100%;
    }
    .toolbar-button {
        flex: 1;
    }
    .toolbar-separator {
        display: none;
    }
    .file-explorer {
        padding: 14px;
    }
    .file-grid,
    .shared-file-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
    .explorer-status-bar,
    .shared-status-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
    .status-secondary,
    #sharedStatusSecondary {
        text-align: left;
    }
    .share-link-row {
        grid-template-columns: 1fr;
    }
    .settings-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .vault-reveal-glass {
        min-height: 200px;
        padding: 28px 20px;
        border-radius: 20px;
    }
    .vault-reveal-stage {
        width:
            calc(100% - 34px);
    }
    .vault-reveal-key {
        letter-spacing: 0.1em;
    }
    .terms-modal-card {
        width: 100%;
        max-height:
            calc(100vh - 24px);
    }
    .terms-scroll {
        height: 48vh;
        max-height: 48vh;
        padding: 17px;
    }
    .terms-page {
        width:
            min(
                100% - 18px,
                780px
            );
        padding-top: 20px;
    }
    .terms-card {
        padding: 21px;
    }
    .terms-header {
        flex-direction: column;
    }
    .terms-existing-form {
        grid-template-columns: 1fr;
    }
    .terms-actions {
        flex-direction: column-reverse;
    }
    .terms-actions .button,
    .terms-actions button,
    .terms-existing-form button {
        width: 100%;
    }
    .delete-modal-actions {
        flex-direction: column-reverse;
    }
    .delete-modal-actions button {
        width: 100%;
    }
    .shared-main {
        width:
            min(
                100% - 18px,
                1180px
            );
        padding-top: 28px;
    }
    .shared-heading {
        margin-bottom: 22px;
    }
    .shared-explorer-header {
        padding: 21px 18px;
    }
    .shared-toolbar {
        flex-direction: column;
    }
    .shared-toolbar
    .toolbar-button {
        width: 100%;
    }
    .shared-file-area {
        padding: 14px;
    }
    .shared-promotion {
        padding: 26px;
    }
    .conflict-page {
        width:
            min(
                100% - 18px,
                680px
            );
        padding-top: 28px;
    }
    .conflict-card {
        padding: 25px;
    }
    .conflict-open-form {
        grid-template-columns: 1fr;
    }
    .conflict-open-form button {
        width: 100%;
    }
}
/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .background-orb,
    .vault-reveal-glass::before,
    .shared-layout.promotion-visible
    .shared-promotion {
        animation: none;
    }
    .vault-reveal-glass,
    .vault-reveal-stage,
    body.vault-reveal-active
    .navbar,
    body.vault-reveal-active
    .vault-workspace,
    body.vault-reveal-active
    .site-footer {
        transition-duration: 1ms;
    }
}