:root {
    --ocean-deep: #02131f;
    --ocean-dark: #03283a;
    --ocean: #07506a;

    --aqua: #10bad0;
    --aqua-light: #7ff4ff;

    --white: #ffffff;

    --text:
        rgba(255, 255, 255, 0.94);

    --muted:
        rgba(221, 247, 255, 0.68);

    --glass:
        rgba(255, 255, 255, 0.08);

    --glass-strong:
        rgba(255, 255, 255, 0.13);

    --border:
        rgba(255, 255, 255, 0.16);

    --shadow:
        0 30px 90px
        rgba(0, 8, 18, 0.48);
}


* {
    box-sizing: border-box;
}


[hidden] {
    display: none !important;
}


html {
    min-height: 100%;
}


body {
    margin: 0;

    min-height: 100vh;

    color: var(--text);

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(47, 211, 228, 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 25%,
            rgba(54, 138, 255, 0.17),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            #02111c 0%,
            #032a3c 48%,
            #06465d 100%
        );

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

    overflow-x: hidden;
}


body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: -4;

    background:
        repeating-radial-gradient(
            ellipse at 50% -20%,
            rgba(255,255,255,.05) 0,
            rgba(255,255,255,.018) 2px,
            transparent 6px,
            transparent 22px
        );

    opacity: .5;
}


body.modal-open {
    overflow: hidden;
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


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


.water-background {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -3;
}


.light-ray {
    position: absolute;

    width: 34vw;
    height: 140vh;

    top: -30vh;

    filter: blur(22px);

    opacity: .16;

    transform: rotate(18deg);

    background:
        linear-gradient(
            to bottom,
            rgba(151,247,255,.7),
            rgba(31,171,216,.06),
            transparent
        );

    animation:
        rayMove
        16s
        ease-in-out
        infinite
        alternate;
}


.light-ray.one {
    left: 4%;
}


.light-ray.two {
    right: -5%;

    animation-delay: -8s;

    transform: rotate(-17deg);
}


.bubble {
    position: absolute;

    bottom: -100px;

    border-radius: 50%;

    border:
        1px solid
        rgba(211,253,255,.32);

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

    animation:
        bubbleUp
        linear
        infinite;
}


.bubble:nth-child(3) {
    width: 18px;
    height: 18px;

    left: 8%;

    animation-duration: 14s;
}


.bubble:nth-child(4) {
    width: 9px;
    height: 9px;

    left: 28%;

    animation-duration: 10s;
    animation-delay: -4s;
}


.bubble:nth-child(5) {
    width: 24px;
    height: 24px;

    left: 62%;

    animation-duration: 18s;
    animation-delay: -9s;
}


.bubble:nth-child(6) {
    width: 13px;
    height: 13px;

    left: 83%;

    animation-duration: 12s;
    animation-delay: -2s;
}


.bubble:nth-child(7) {
    width: 7px;
    height: 7px;

    left: 46%;

    animation-duration: 9s;
    animation-delay: -6s;
}


.brand {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    font-size: 1.12rem;

    font-weight: 800;

    letter-spacing: -.03em;
}


.brand-logo {
    position: relative;

    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 14px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 30% 18%,
            #bbfbff 0 7%,
            transparent 8%
        ),
        linear-gradient(
            150deg,
            #5ff2ff,
            #159bbb 55%,
            #0b5d9b
        );

    box-shadow:
        0 10px 30px
        rgba(30,217,232,.25),
        inset 0 1px 1px
        rgba(255,255,255,.6);
}


.brand-logo::before,
.brand-logo::after {
    content: "";

    position: absolute;

    left: -12px;

    width: 70px;
    height: 18px;

    border-radius: 50%;

    border:
        3px solid
        rgba(255,255,255,.75);
}


.brand-logo::before {
    bottom: 4px;

    transform: rotate(-8deg);
}


.brand-logo::after {
    bottom: -4px;

    opacity: .55;

    transform: rotate(8deg);
}


.brand-logo span {
    position: relative;

    z-index: 2;

    font-weight: 900;
}


.eyebrow {
    margin-bottom: 10px;

    color: var(--aqua-light);

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .18em;
}


.login-view {
    display: grid;

    min-height: 100vh;

    place-items: center;

    padding: 40px 20px;
}


.login-card {
    width:
        min(
            100%,
            470px
        );

    padding: 38px;

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

    border-radius: 32px;

    background:
        rgba(3,32,45,.72);

    backdrop-filter:
        blur(30px);

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

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


.login-copy {
    margin:
        46px
        0
        32px;
}


.login-copy h1 {
    margin: 0 0 12px;

    font-size:
        clamp(
            2rem,
            7vw,
            3rem
        );

    letter-spacing: -.055em;
}


.login-copy p {
    margin: 0;

    color: var(--muted);

    line-height: 1.65;
}


.field {
    display: block;

    margin-bottom: 18px;
}


.field span {
    display: block;

    margin-bottom: 8px;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size: .86rem;

    font-weight: 600;
}


.field input,
.search-box input {
    width: 100%;

    border:
        1px solid
        rgba(255,255,255,.15);

    outline: none;

    color: white;

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

    transition:
        border .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.field input {
    height: 54px;

    padding: 0 16px;

    border-radius: 16px;
}


.field input:focus,
.search-box input:focus {
    border-color:
        rgba(127,244,255,.7);

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

    box-shadow:
        0 0 0 4px
        rgba(16,186,208,.10);
}


.primary-button,
.secondary-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 0;

    min-height: 48px;

    border-radius: 15px;

    font-weight: 750;

    transition:
        transform .2s ease,
        opacity .2s ease,
        box-shadow .2s ease;
}


.primary-button {
    color: #01222e;

    background:
        linear-gradient(
            135deg,
            #c4fbff,
            #63eaf5
        );

    box-shadow:
        0 12px 34px
        rgba(64,227,239,.22);
}


.login-card
.primary-button {
    width: 100%;

    margin-top: 8px;
}


.primary-button:hover,
.secondary-button:hover {
    transform:
        translateY(-2px);
}


.primary-button:disabled {
    opacity: .6;

    cursor: wait;
}


.secondary-button {
    padding: 0 18px;

    color: white;

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

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


.form-error {
    margin:
        8px
        0
        12px;

    padding: 12px 14px;

    border:
        1px solid
        rgba(255,100,100,.2);

    border-radius: 13px;

    color:
        #ffd9d9;

    background:
        rgba(255,73,73,.08);

    font-size: .88rem;
}


.login-footer {
    margin-top: 24px;

    color:
        rgba(221,247,255,.48);

    font-size: .78rem;

    line-height: 1.55;

    text-align: center;
}


.topbar {
    position: sticky;

    top: 0;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    min-height: 84px;

    padding:
        14px
        clamp(
            20px,
            4vw,
            54px
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(2,22,34,.65);

    backdrop-filter:
        blur(28px);

    -webkit-backdrop-filter:
        blur(28px);
}


.topbar-actions {
    display: flex;

    align-items: center;

    gap: 14px;
}


.subscription-pill {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 40px;

    padding: 0 14px;

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

    border-radius: 999px;

    color: var(--muted);

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

    font-size: .82rem;

    font-weight: 650;
}


.subscription-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

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


.subscription-pill.active {
    color:
        #c9fcff;
}


.subscription-pill.active
.subscription-dot {
    background:
        #6cf3d3;

    box-shadow:
        0 0 15px
        rgba(108,243,211,.7);
}


.user-menu {
    position: relative;
}


.user-button {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 6px 10px 6px 6px;

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

    border-radius: 16px;

    color: white;

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


.user-avatar {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 12px;

    color: #01242d;

    background:
        linear-gradient(
            135deg,
            #c5fbff,
            #54dbe8
        );

    font-weight: 900;
}


.user-info {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-width: 110px;
}


.user-info strong {
    max-width: 160px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: .84rem;
}


.user-info span {
    max-width: 160px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color:
        rgba(255,255,255,.5);

    font-size: .7rem;
}


.user-dropdown {
    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    width: 160px;

    padding: 7px;

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

    border-radius: 14px;

    background:
        rgba(2,27,40,.95);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.35);

    backdrop-filter:
        blur(24px);
}


.user-dropdown button {
    width: 100%;

    padding: 11px;

    border: 0;

    border-radius: 10px;

    color: white;

    background:
        transparent;

    text-align: left;
}


.user-dropdown button:hover {
    background:
        rgba(255,255,255,.08);
}


.dashboard {
    width:
        min(
            calc(100% - 40px),
            1500px
        );

    margin:
        0 auto;

    padding:
        64px 0 100px;
}


.dashboard-head {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 36px;
}


.dashboard-head h1 {
    margin: 0;

    font-size:
        clamp(
            2.5rem,
            6vw,
            4.8rem
        );

    letter-spacing: -.065em;
}


.dashboard-head p {
    margin:
        12px 0 0;

    color: var(--muted);
}


.stats {
    display: flex;

    gap: 12px;
}


.stat-card {
    min-width: 130px;

    padding:
        16px 18px;

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

    border-radius: 18px;

    background:
        var(--glass);

    backdrop-filter:
        blur(20px);
}


.stat-card span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: .76rem;
}


.stat-card strong {
    font-size: 1.35rem;
}


.toolbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 28px;
}


.search-box {
    position: relative;

    width:
        min(
            100%,
            420px
        );
}


.search-box span {
    position: absolute;

    left: 15px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        rgba(255,255,255,.42);

    font-size: 1.3rem;

    pointer-events: none;
}


.search-box input {
    height: 50px;

    padding:
        0
        16px
        0
        44px;

    border-radius: 15px;
}


.project-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                250px,
                1fr
            )
        );

    gap: 22px;
}


.project-card {
    overflow: hidden;

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

    border-radius: 24px;

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

    box-shadow:
        0 20px 45px
        rgba(0,10,20,.18);

    transition:
        transform .25s ease,
        border .25s ease,
        box-shadow .25s ease;
}


.project-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(127,244,255,.35);

    box-shadow:
        0 28px 58px
        rgba(0,8,18,.32);
}


.project-open {
    display: block;

    width: 100%;

    padding: 0;

    border: 0;

    color: inherit;

    background: transparent;

    text-align: left;
}


.project-image {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background:
        rgba(0,12,20,.45);
}


.project-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.project-card:hover
.project-image img {
    transform:
        scale(1.035);
}


.project-overlay {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    opacity: 0;

    color: white;

    background:
        rgba(1,20,30,.48);

    backdrop-filter:
        blur(3px);

    font-size: .85rem;

    font-weight: 750;

    transition:
        opacity .25s ease;
}


.project-card:hover
.project-overlay {
    opacity: 1;
}


.image-placeholder,
.generation-placeholder {
    display: grid;

    place-items: center;

    width: 100%;
    height: 100%;

    color:
        rgba(127,244,255,.55);

    background:
        linear-gradient(
            135deg,
            rgba(18,131,154,.14),
            rgba(42,108,184,.12)
        );

    font-size: 2rem;
}


.project-body {
    padding: 17px 18px 18px;
}


.project-title-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}


.project-title-row h3 {
    margin: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 1rem;
}


.version-badge {
    display: grid;

    flex: 0 0 auto;

    min-width: 27px;
    height: 27px;

    place-items: center;

    padding: 0 7px;

    border-radius: 999px;

    color:
        #bffaff;

    background:
        rgba(16,186,208,.12);

    font-size: .7rem;

    font-weight: 800;
}


.project-meta {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-top: 9px;

    color:
        rgba(221,247,255,.55);

    font-size: .72rem;
}


.state-card {
    display: grid;

    place-items: center;

    min-height: 320px;

    padding: 40px;

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

    border-radius: 28px;

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

    text-align: center;
}


.state-card h2 {
    margin:
        20px 0 8px;
}


.state-card p {
    max-width: 440px;

    margin: 0;

    color: var(--muted);

    line-height: 1.6;
}


.spinner {
    width: 34px;
    height: 34px;

    border:
        3px solid
        rgba(255,255,255,.12);

    border-top-color:
        var(--aqua-light);

    border-radius: 50%;

    animation:
        spin .8s linear infinite;
}


.empty-icon {
    color:
        var(--aqua-light);

    font-size: 2.6rem;
}


.modal {
    position: fixed;

    inset: 0;

    z-index: 100;
}


.modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0,8,15,.75);

    backdrop-filter:
        blur(14px);
}


.modal-panel {
    position: absolute;

    inset:
        28px
        28px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius: 30px;

    background:
        rgba(3,26,38,.96);

    box-shadow:
        0 45px 120px
        rgba(0,0,0,.55);
}


.modal-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        24px
        28px;

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


.modal-header h2 {
    margin: 0;

    font-size: 1.6rem;

    letter-spacing: -.03em;
}


.icon-button {
    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

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

    border-radius: 14px;

    color: white;

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

    font-size: 1.65rem;
}


.project-viewer {
    display: grid;

    flex: 1;

    min-height: 0;

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


.viewer-main {
    display: grid;

    min-height: 0;

    place-items: center;

    padding: 30px;

    overflow: auto;

    background:
        radial-gradient(
            circle at center,
            rgba(16,186,208,.08),
            transparent 55%
        ),
        rgba(0,10,18,.35);
}


.viewer-main img {
    display: block;

    max-width: 100%;
    max-height:
        calc(
            100vh -
            170px
        );

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 28px 75px
        rgba(0,0,0,.38);
}


.viewer-sidebar {
    display: flex;

    flex-direction: column;

    gap: 26px;

    padding: 24px;

    overflow-y: auto;

    border-left:
        1px solid
        rgba(255,255,255,.08);

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


.viewer-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}


.viewer-actions
.primary-button,
.viewer-actions
.secondary-button {
    width: 100%;
}


.viewer-meta {
    display: grid;

    gap: 10px;
}


.viewer-meta > div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    padding:
        12px 0;

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


.viewer-meta span {
    color: var(--muted);

    font-size: .76rem;
}


.viewer-meta strong {
    max-width: 190px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: .78rem;
}


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

    font-size: .78rem;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.generation-list {
    display: grid;

    gap: 9px;
}


.generation-item {
    display: grid;

    grid-template-columns:
        58px 1fr;

    align-items: center;

    gap: 11px;

    width: 100%;

    padding: 8px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 14px;

    color: white;

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

    text-align: left;
}


.generation-item.active {
    border-color:
        rgba(127,244,255,.48);

    background:
        rgba(16,186,208,.1);
}


.generation-item img,
.generation-placeholder {
    width: 58px;
    height: 58px;

    border-radius: 9px;

    object-fit: cover;
}


.generation-item strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: .78rem;
}


.generation-item span {
    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.46);

    font-size: .67rem;
}


.generation-empty,
.mini-loading {
    padding: 18px;

    border:
        1px dashed
        rgba(255,255,255,.12);

    border-radius: 14px;

    color: var(--muted);

    text-align: center;

    font-size: .78rem;
}


.load-more-wrap {
    display: flex;

    justify-content: center;

    margin-top: 30px;
}


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


@keyframes bubbleUp {

    from {
        transform:
            translateY(0)
            scale(.8);

        opacity: 0;
    }

    15% {
        opacity: .55;
    }

    to {
        transform:
            translateY(-120vh)
            scale(1.2);

        opacity: 0;
    }
}


@keyframes rayMove {

    from {
        transform:
            translateX(-5%)
            rotate(18deg);
    }

    to {
        transform:
            translateX(8%)
            rotate(21deg);
    }
}


@media
(max-width: 900px) {

    .subscription-pill {
        display: none;
    }


    .project-viewer {
        grid-template-columns:
            1fr;
    }


    .viewer-sidebar {
        border-left: 0;

        border-top:
            1px solid
            rgba(255,255,255,.08);
    }


    .modal-panel {
        inset: 12px;
    }

}


@media
(max-width: 680px) {

    .topbar {
        min-height: 72px;

        padding:
            10px
            14px;
    }


    .brand > span:last-child {
        display: none;
    }


    .user-info {
        display: none;
    }


    .dashboard {
        width:
            min(
                calc(100% - 24px),
                1500px
            );

        padding:
            38px 0 70px;
    }


    .dashboard-head {
        display: block;
    }


    .stats {
        margin-top: 24px;
    }


    .stat-card {
        flex: 1;

        min-width: 0;
    }


    .toolbar {
        align-items: stretch;
    }


    .search-box {
        flex: 1;
    }


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

        gap: 12px;
    }


    .project-card {
        border-radius: 18px;
    }


    .project-body {
        padding: 12px;
    }


    .project-meta {
        display: block;
    }


    .project-meta span {
        display: block;

        margin-top: 3px;
    }


    .modal-panel {
        inset: 0;

        border: 0;

        border-radius: 0;
    }


    .modal-header {
        padding: 15px;
    }


    .viewer-main {
        padding: 14px;
    }


    .viewer-sidebar {
        padding: 16px;
    }


    .login-card {
        padding: 28px 22px;

        border-radius: 26px;
    }

}


@media
(max-width: 390px) {

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

}


/* =========================================================
   SKETCHYOUAI ACCOUNT — REAL BRAND + LIVE WATER
   ========================================================= */

html {
    background: #01111e !important;
}

body {
    position: relative !important;

    background: #01111e !important;

    isolation: isolate;
}


/* REAL APP BACKGROUND */

.account-water-video {
    position: fixed;

    inset: 0;

    z-index: -20;

    width: 100vw;
    height: 100vh;

    object-fit: cover;
    object-position: center center;

    pointer-events: none;

    user-select: none;

    transform: scale(1.02);

    filter:
        brightness(.58)
        saturate(1.10)
        contrast(1.08);
}


.account-water-overlay {
    position: fixed;

    inset: 0;

    z-index: -19;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 25% 15%,
            rgba(22, 152, 212, .08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(0, 8, 28, .24) 0%,
            rgba(0, 15, 38, .30) 48%,
            rgba(0, 7, 24, .45) 100%
        );
}


/* Disable old fake background */

body::before {
    display: none !important;
}

.water-background {
    display: none !important;
}


/* =========================================================
   REAL LOGO
   ========================================================= */

.account-real-logo {
    display: block !important;

    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    max-width: 52px !important;

    min-height: 52px !important;
    max-height: 52px !important;

    object-fit: cover !important;

    border-radius: 16px !important;

    box-shadow:
        0 12px 32px
        rgba(42, 207, 244, .25),
        0 0 0 1px
        rgba(255,255,255,.12);
}


.brand {
    display: inline-flex !important;

    align-items: center !important;

    gap: 12px !important;
}


/* =========================================================
   LOGIN CARD — iOS LIQUID GLASS
   ========================================================= */

.login-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.115),
            rgba(255,255,255,.035)
        ) !important;

    border:
        1px solid
        rgba(145, 225, 255, .16) !important;

    backdrop-filter:
        blur(28px)
        saturate(1.14) !important;

    -webkit-backdrop-filter:
        blur(28px)
        saturate(1.14) !important;

    box-shadow:
        0 38px 100px
        rgba(0, 6, 22, .46),
        inset 0 1px 0
        rgba(255,255,255,.10) !important;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    background:
        rgba(1, 16, 34, .56) !important;

    backdrop-filter:
        blur(28px)
        saturate(1.15) !important;

    -webkit-backdrop-filter:
        blur(28px)
        saturate(1.15) !important;

    border-bottom:
        1px solid
        rgba(150, 225, 255, .10) !important;
}


/* =========================================================
   ACCOUNT GLASS COMPONENTS
   ========================================================= */

.project-card,
.subscription-pill,
.user-button,
.user-dropdown,
.modal-card,
.empty-state,
.stat-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.035)
        ) !important;

    border-color:
        rgba(145,225,255,.13) !important;

    backdrop-filter:
        blur(24px)
        saturate(1.12) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(1.12) !important;
}


/* Inputs */

.field input {
    background:
        rgba(2, 20, 42, .48) !important;

    border-color:
        rgba(140, 224, 255, .14) !important;

    color: white !important;

    backdrop-filter:
        blur(16px) !important;
}

.field input:focus {
    border-color:
        rgba(93, 231, 255, .65) !important;

    box-shadow:
        0 0 0 4px
        rgba(74, 217, 247, .10) !important;
}


/* Mobile */

@media (max-width: 650px) {

    .account-real-logo {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        max-width: 46px !important;

        min-height: 46px !important;
        max-height: 46px !important;
    }

    .account-water-video {
        transform: scale(1.07);

        filter:
            brightness(.54)
            saturate(1.08)
            contrast(1.06);
    }

}


/* Accessibility */

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

    .account-water-video {
        display: none !important;
    }

    body {
        background:
            linear-gradient(
                180deg,
                #031c35,
                #011325
            ) !important;
    }

}



/* =========================================================
   SKETCHYOUAI CLOUD — FINAL DESKTOP DASHBOARD
   ========================================================= */


/* TOP BAR */

.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;

    min-height: 76px !important;

    padding:
        10px
        max(28px, calc((100vw - 1480px) / 2)) !important;

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

    background:
        rgba(1, 13, 32, .63) !important;

    border-bottom:
        1px solid
        rgba(126, 226, 255, .11) !important;

    backdrop-filter:
        blur(30px)
        saturate(1.2) !important;

    -webkit-backdrop-filter:
        blur(30px)
        saturate(1.2) !important;
}


.topbar .account-real-logo {
    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    max-width: 48px !important;

    min-height: 48px !important;
    max-height: 48px !important;

    border-radius: 14px !important;
}


.topbar .brand {
    font-size: 1.05rem !important;
    font-weight: 800 !important;

    gap: 11px !important;
}


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

    gap: 12px !important;
}


.subscription-pill {
    min-height: 44px !important;

    padding:
        0 16px !important;

    border-radius: 15px !important;

    background:
        rgba(255,255,255,.07) !important;

    border:
        1px solid
        rgba(145,225,255,.12) !important;
}


.user-button {
    min-height: 48px !important;

    padding:
        5px
        9px !important;

    border-radius: 16px !important;
}


.user-avatar {
    width: 38px !important;
    height: 38px !important;

    border-radius: 12px !important;
}



/* =========================================================
   MAIN DASHBOARD
   ========================================================= */

.dashboard {
    width:
        min(
            calc(100% - 48px),
            1480px
        ) !important;

    margin:
        0
        auto !important;

    padding:
        62px
        0
        100px !important;
}



/* =========================================================
   DASHBOARD HEADER
   ========================================================= */

.dashboard-head {
    display: grid !important;

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

    align-items: end !important;

    gap: 50px !important;

    margin-bottom: 30px !important;
}


.dashboard-head h1 {
    margin:
        8px
        0
        10px !important;

    font-size:
        clamp(
            3.3rem,
            5vw,
            5.1rem
        ) !important;

    line-height: .94 !important;

    letter-spacing: -.065em !important;
}


.dashboard-head p {
    margin: 0 !important;

    font-size: 1rem !important;

    color:
        rgba(221,247,255,.68) !important;
}



/* =========================================================
   STATS
   ========================================================= */

.stats {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(120px, 1fr)) !important;

    gap: 12px !important;

    margin: 0 !important;
}


.stat-card {
    min-width: 130px !important;

    padding:
        17px
        20px !important;

    border-radius: 19px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.035)
        ) !important;

    border:
        1px solid
        rgba(127,224,255,.13) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08),
        0 14px 40px
        rgba(0,6,25,.18) !important;
}


.stat-card span {
    display: block !important;

    margin-bottom: 5px !important;

    font-size: .72rem !important;

    color:
        rgba(211,240,250,.61) !important;
}


.stat-card strong {
    font-size: 1.65rem !important;

    line-height: 1 !important;

    color: white !important;
}



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

.toolbar {
    display: grid !important;

    grid-template-columns:
        minmax(320px, 640px)
        auto !important;

    align-items: center !important;

    gap: 16px !important;

    margin:
        0
        0
        30px !important;
}


.search-box {
    width: 100% !important;

    min-height: 52px !important;

    border:
        1px solid
        rgba(139,224,255,.13) !important;

    border-radius: 17px !important;

    background:
        rgba(5,25,50,.45) !important;

    backdrop-filter:
        blur(20px) !important;

    -webkit-backdrop-filter:
        blur(20px) !important;
}


.search-box input {
    min-height: 50px !important;

    font-size: .93rem !important;

    color: white !important;
}


.toolbar .secondary-button {
    min-height: 52px !important;

    padding:
        0
        21px !important;

    border-radius: 17px !important;
}



/* =========================================================
   PROJECT GRID — 4 DESKTOP COLUMNS
   ========================================================= */

.project-grid {
    display: grid !important;

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

    gap:
        24px
        20px !important;
}



/* =========================================================
   PROJECT CARD
   ========================================================= */

.project-card {
    position: relative !important;

    overflow: hidden !important;

    min-width: 0 !important;

    border-radius: 25px !important;

    border:
        1px solid
        rgba(143,224,255,.12) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.035)
        ) !important;

    box-shadow:
        0 20px 55px
        rgba(0,7,28,.22),
        inset 0 1px 0
        rgba(255,255,255,.08) !important;

    backdrop-filter:
        blur(24px)
        saturate(1.12) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(1.12) !important;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease !important;
}


.project-card:hover {
    transform:
        translateY(-7px) !important;

    border-color:
        rgba(91,231,255,.34) !important;

    box-shadow:
        0 30px 75px
        rgba(0,7,28,.34),
        0 0 38px
        rgba(27,190,239,.07) !important;
}


/*
 Keep the cover large and consistent.
 Works whether project image is square or portrait.
*/

.project-cover {
    position: relative !important;

    width: 100% !important;

    aspect-ratio:
        1 / 1 !important;

    overflow: hidden !important;

    background:
        rgba(0,10,28,.45) !important;
}


.project-cover img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    transition:
        transform .35s ease !important;
}


.project-card:hover
.project-cover img {
    transform:
        scale(1.025) !important;
}



/* Text */

.project-body {
    padding:
        16px
        17px
        17px !important;
}


.project-title {
    margin:
        0
        0
        9px !important;

    font-size: 1.02rem !important;
    font-weight: 800 !important;

    line-height: 1.25 !important;

    color: white !important;
}


.project-meta {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;

    color:
        rgba(211,240,250,.58) !important;

    font-size: .72rem !important;
}



/* =========================================================
   STATE / LOAD MORE
   ========================================================= */

.state-card {
    border-radius: 28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        ) !important;

    border:
        1px solid
        rgba(140,224,255,.11) !important;

    backdrop-filter:
        blur(25px) !important;
}


.load-more-wrap {
    margin-top: 38px !important;
}



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

@media (max-width: 1250px) {

    .dashboard {
        width:
            min(
                calc(100% - 40px),
                1180px
            ) !important;
    }


    .project-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

}


@media (max-width: 900px) {

    .dashboard-head {
        grid-template-columns:
            1fr !important;

        gap: 24px !important;
    }


    .stats {
        max-width: 360px !important;
    }


    .toolbar {
        grid-template-columns:
            1fr
            auto !important;
    }


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

}


@media (max-width: 620px) {

    .dashboard {
        width:
            calc(100% - 24px) !important;

        padding:
            38px
            0
            70px !important;
    }


    .dashboard-head h1 {
        font-size:
            clamp(
                2.8rem,
                14vw,
                4rem
            ) !important;
    }


    .stats {
        width: 100% !important;
        max-width: none !important;
    }


    .toolbar {
        grid-template-columns:
            1fr !important;
    }


    .toolbar .secondary-button {
        width: 100% !important;
    }


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

        gap: 12px !important;
    }


    .project-card {
        border-radius: 19px !important;
    }


    .project-body {
        padding:
            12px !important;
    }

}


@media (max-width: 390px) {

    .project-grid {
        grid-template-columns:
            1fr !important;
    }

}


/* =========================================================
   DASHBOARD HEADER — COMPACT FINAL LAYOUT
   ========================================================= */

.dashboard-head {
    margin-bottom: 18px !important;
}

.dashboard-head > div:first-child {
    max-width: 720px !important;
}

.stats {
    align-self: end !important;
}


/* toolbar fills the width below heading */

.toolbar {
    grid-template-columns:
        minmax(420px, 1fr)
        auto !important;

    width: 100% !important;

    margin-bottom: 28px !important;
}

.search-box {
    max-width: 760px !important;
}

.toolbar .secondary-button {
    justify-self: end !important;
}


/* slightly stronger project hover */

.project-card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    opacity: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5,18,40,.05),
            rgba(3,13,30,.34)
        );

    transition: opacity .25s ease;
}

.project-card:hover::after {
    opacity: 1;
}


/* keep actual project content above overlay */

.project-card > * {
    position: relative;
    z-index: 2;
}


/* Don't over-blur the preview on hover */

.project-card:hover .project-cover img {
    filter: none !important;
    transform: scale(1.018) !important;
}


/* Cleaner open-project label */

.project-card .project-hover,
.project-card .open-project-overlay {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}


/* =========================================================
   PROJECT VIEWER — FINAL LAYOUT
   ========================================================= */

.modal-backdrop {
    background:
        rgba(0, 6, 18, .78) !important;

    backdrop-filter:
        blur(18px)
        saturate(1.08) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(1.08) !important;
}


.modal-panel {
    inset: 18px !important;

    border-radius: 26px !important;

    border:
        1px solid
        rgba(126, 225, 255, .13) !important;

    background:
        rgba(1, 16, 31, .91) !important;

    backdrop-filter:
        blur(30px)
        saturate(1.10) !important;

    -webkit-backdrop-filter:
        blur(30px)
        saturate(1.10) !important;

    box-shadow:
        0 50px 140px
        rgba(0, 0, 0, .58) !important;
}


/* Header */

.modal-header {
    min-height: 68px !important;

    padding:
        12px
        18px !important;

    background:
        rgba(1, 17, 33, .54) !important;

    border-bottom:
        1px solid
        rgba(140, 225, 255, .08) !important;
}


.modal-header .eyebrow {
    margin-bottom: 3px !important;

    font-size: .65rem !important;
}


.modal-header h2 {
    font-size: 1.35rem !important;
    line-height: 1.1 !important;
}


.modal-header .icon-button {
    width: 42px !important;
    height: 42px !important;

    border-radius: 13px !important;

    background:
        rgba(255,255,255,.055) !important;
}


/* Main split */

.project-viewer {
    grid-template-columns:
        minmax(0, 1fr)
        300px !important;
}


/* Image area */

.viewer-main {
    position: relative !important;

    padding:
        18px
        22px
        22px !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(18, 167, 212, .08),
            transparent 48%
        ),
        rgba(0, 8, 18, .22) !important;
}


.viewer-main img {
    width: auto !important;
    height: auto !important;

    max-width:
        min(
            100%,
            1050px
        ) !important;

    max-height:
        calc(
            100vh - 130px
        ) !important;

    object-fit: contain !important;

    border-radius: 14px !important;

    box-shadow:
        0 32px 95px
        rgba(0,0,0,.48) !important;
}


/* Sidebar */

.viewer-sidebar {
    gap: 20px !important;

    padding:
        18px !important;

    border-left:
        1px solid
        rgba(139, 225, 255, .09) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        ) !important;

    backdrop-filter:
        blur(24px) !important;

    -webkit-backdrop-filter:
        blur(24px) !important;
}


/* Download / Print */

.viewer-actions {
    grid-template-columns:
        1fr 1fr !important;

    gap: 9px !important;
}


.viewer-actions .primary-button,
.viewer-actions .secondary-button {
    min-height: 46px !important;

    padding:
        0 12px !important;

    border-radius: 14px !important;

    font-size: .82rem !important;
}


.viewer-actions .primary-button {
    box-shadow:
        0 12px 30px
        rgba(53, 220, 244, .18) !important;
}


/* Metadata */

.viewer-meta {
    gap: 0 !important;

    padding:
        2px
        0 !important;
}


.viewer-meta > div {
    min-height: 46px !important;

    padding:
        10px
        0 !important;
}


.viewer-meta span {
    font-size: .68rem !important;
}


.viewer-meta strong {
    max-width: 150px !important;

    font-size: .75rem !important;
}


/* Versions heading */

.sidebar-title {
    margin:
        2px
        0
        10px !important;

    color:
        rgba(207, 247, 255, .78) !important;

    font-size: .68rem !important;

    letter-spacing: .11em !important;
}


/* Version list */

.generation-list {
    gap: 8px !important;
}


.generation-item {
    grid-template-columns:
        66px
        minmax(0, 1fr) !important;

    gap: 10px !important;

    min-height: 78px !important;

    padding: 7px !important;

    border-radius: 15px !important;

    background:
        rgba(255,255,255,.035) !important;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease !important;
}


.generation-item:hover {
    transform:
        translateX(-2px) !important;

    border-color:
        rgba(116, 231, 255, .25) !important;

    background:
        rgba(255,255,255,.055) !important;
}


.generation-item.active {
    border-color:
        rgba(96, 231, 255, .48) !important;

    background:
        linear-gradient(
            135deg,
            rgba(21, 181, 219, .13),
            rgba(255,255,255,.035)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(102, 230, 255, .04) !important;
}


.generation-item img,
.generation-placeholder {
    width: 66px !important;
    height: 66px !important;

    border-radius: 11px !important;

    object-fit: cover !important;
}


.generation-item strong {
    font-size: .76rem !important;
}


.generation-item span {
    font-size: .64rem !important;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1600px) {

    .project-viewer {
        grid-template-columns:
            minmax(0, 1fr)
            320px !important;
    }

    .viewer-main img {
        max-height:
            calc(
                100vh - 120px
            ) !important;
    }

}


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

@media (max-width: 1000px) {

    .project-viewer {
        grid-template-columns:
            minmax(0, 1fr)
            280px !important;
    }

}


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

@media (max-width: 760px) {

    .modal-panel {
        inset: 0 !important;

        border-radius: 0 !important;
        border: 0 !important;
    }


    .project-viewer {
        grid-template-columns:
            1fr !important;

        overflow-y: auto !important;
    }


    .viewer-main {
        min-height: 55vh !important;

        padding:
            14px !important;
    }


    .viewer-main img {
        max-height:
            62vh !important;
    }


    .viewer-sidebar {
        border-left: 0 !important;

        border-top:
            1px solid
            rgba(139,225,255,.09) !important;
    }

}


/* =========================================================
   PROJECT MODAL — LIVE WATER BACKGROUND
   ========================================================= */

.modal-backdrop {
    background:
        rgba(0, 6, 18, .52) !important;

    backdrop-filter:
        blur(10px)
        saturate(1.06) !important;

    -webkit-backdrop-filter:
        blur(10px)
        saturate(1.06) !important;
}

.modal-panel {
    background:
        linear-gradient(
            145deg,
            rgba(2, 17, 36, .78),
            rgba(2, 11, 28, .62)
        ) !important;

    backdrop-filter:
        blur(26px)
        saturate(1.12) !important;

    -webkit-backdrop-filter:
        blur(26px)
        saturate(1.12) !important;
}

.viewer-main {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(13, 197, 236, .08),
            transparent 48%
        ),
        rgba(0, 8, 22, .18) !important;
}

.viewer-sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(2, 20, 43, .58),
            rgba(2, 14, 32, .42)
        ) !important;
}

.modal-header {
    background:
        rgba(1, 17, 35, .44) !important;
}


/* =========================================================
   PROJECT VIEWER — SHOW REAL LIVE BACKGROUND
   ========================================================= */

/* Не затемняем и не размываем общий water video */
.modal-backdrop {
    background: rgba(0, 5, 18, .08) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* Само большое окно делаем почти прозрачным */
.modal-panel {
    background:
        rgba(0, 10, 27, .20) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* Центральная область */
.viewer-main {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(14, 183, 224, .045),
            transparent 55%
        ),
        rgba(0, 8, 24, .12) !important;
}


/* Header — стекло */
.modal-header {
    background:
        rgba(1, 14, 35, .58) !important;

    backdrop-filter:
        blur(22px)
        saturate(1.15) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(1.15) !important;
}


/* Правая панель — стекло */
.viewer-sidebar {
    background:
        linear-gradient(
            160deg,
            rgba(3, 24, 48, .62),
            rgba(1, 14, 34, .48)
        ) !important;

    backdrop-filter:
        blur(26px)
        saturate(1.14) !important;

    -webkit-backdrop-filter:
        blur(26px)
        saturate(1.14) !important;
}


/* Изображение чуть сильнее отделяем от живого фона */
.viewer-main img {
    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .58),
        0 0 0 1px
        rgba(255,255,255,.06) !important;
}


/* =========================================================
   PROJECT VIEWER — OWN LIVE WATER BACKGROUND
   ========================================================= */

.modal-backdrop {
    background:
        rgba(0, 5, 18, .62) !important;

    backdrop-filter:
        blur(12px) !important;

    -webkit-backdrop-filter:
        blur(12px) !important;
}


/* Modal itself becomes the clipping container */

.modal-panel {
    position: absolute !important;

    isolation: isolate !important;

    background:
        #011325 !important;

    overflow: hidden !important;
}


/* Separate copy of the SketchYouAI water animation */

.modal-water-video {
    position: absolute;

    z-index: -3;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    pointer-events: none;

    transform:
        scale(1.025);

    filter:
        brightness(.52)
        saturate(1.08)
        contrast(1.08);
}


/* Readability layer */

.modal-water-overlay {
    position: absolute;

    z-index: -2;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 42% 40%,
            rgba(16, 176, 220, .06),
            transparent 44%
        ),
        linear-gradient(
            180deg,
            rgba(0, 8, 27, .28),
            rgba(0, 11, 31, .40)
        );
}


/* UI stays above video */

.modal-header,
.project-viewer {
    position: relative !important;

    z-index: 2 !important;
}


/* Main artwork area — nearly transparent */

.viewer-main {
    background:
        rgba(0, 8, 22, .08) !important;
}


/* Glass header */

.modal-header {
    background:
        rgba(1, 15, 34, .52) !important;

    backdrop-filter:
        blur(22px)
        saturate(1.15) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(1.15) !important;
}


/* Glass sidebar */

.viewer-sidebar {
    background:
        linear-gradient(
            165deg,
            rgba(2, 22, 45, .66),
            rgba(1, 12, 31, .50)
        ) !important;

    backdrop-filter:
        blur(28px)
        saturate(1.12) !important;

    -webkit-backdrop-filter:
        blur(28px)
        saturate(1.12) !important;
}


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

    .modal-water-video {
        display: none !important;
    }

    .modal-panel {
        background:
            linear-gradient(
                160deg,
                #021a31,
                #011123
            ) !important;
    }
}


/* =========================================================
   MODAL LAYERS FIX
   ========================================================= */

.modal-panel {
    isolation: isolate !important;
}

/* Water is always at the bottom */
.modal-water-video {
    z-index: 0 !important;
}

.modal-water-overlay {
    z-index: 1 !important;
}

/* Entire modal UI above water */
.modal-header {
    position: relative !important;
    z-index: 10 !important;
}

.project-viewer {
    position: relative !important;
    z-index: 10 !important;
}

.viewer-main {
    position: relative !important;
    z-index: 11 !important;
}

.viewer-sidebar {
    position: relative !important;
    z-index: 12 !important;
}

/* Artwork itself */
.viewer-main img {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================================
   PROJECT MANAGEMENT
   ========================================================= */

.project-management {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;

    padding-top: 2px;
}

.project-manage-button {
    min-height: 42px;

    padding:
        0
        12px;

    border:
        1px solid
        rgba(135, 225, 255, .13);

    border-radius: 13px;

    color:
        rgba(240, 252, 255, .92);

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

    font-size: .72rem;
    font-weight: 750;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.project-manage-button:hover {
    transform:
        translateY(-1px);

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

    border-color:
        rgba(118,231,255,.26);
}

.project-manage-button.danger {
    color:
        rgba(255, 167, 173, .94);

    border-color:
        rgba(255, 92, 105, .16);

    background:
        rgba(255, 53, 72, .055);
}

.project-manage-button.danger:hover {
    border-color:
        rgba(255, 92, 105, .34);

    background:
        rgba(255, 53, 72, .10);
}

.project-manage-button:disabled {
    opacity: .45;

    cursor: default;

    transform: none;
}


/* ORIGINAL VERSION */

.generation-item.original-item {
    border-style:
        dashed;
}

.generation-item.original-item strong {
    color:
        #bff8ff;
}


@media (max-width: 760px) {

    .project-management {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   PROJECT PDF PANEL
   ========================================================= */

.pdf-panel {
    padding: 16px;

    border:
        1px solid
        rgba(124, 229, 255, .15);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        );

    backdrop-filter:
        blur(20px)
        saturate(1.1);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(1.1);
}


.pdf-panel-head {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 14px;

    margin-bottom: 14px;
}


.pdf-panel-head > div {
    min-width: 0;
}


.pdf-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #7ff4ff;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .11em;
}


.pdf-panel-head strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: white;

    font-size: .95rem;
}


.pdf-page-count {
    flex: 0 0 auto;

    padding:
        7px
        10px;

    border-radius:
        999px;

    color:
        rgba(220,248,255,.82);

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

    font-size:
        .7rem;

    font-weight:
        700;
}


.pdf-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;
}


.pdf-actions .primary-button,
.pdf-actions .secondary-button {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 44px;
}


/* =========================================================
   BOOK VIEW TABS
   ========================================================= */

.book-view-tabs {
    display: flex;

    gap: 8px;

    width: fit-content;

    margin:
        0
        0
        14px
        0;

    padding: 5px;

    border:
        1px solid
        rgba(116, 222, 255, .14);

    border-radius: 14px;

    background:
        rgba(4, 14, 28, .52);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.book-view-tab {
    border: 0;

    border-radius: 10px;

    padding:
        9px
        18px;

    color:
        rgba(220, 244, 255, .62);

    background:
        transparent;

    cursor: pointer;

    font: inherit;

    font-size: .82rem;

    font-weight: 700;

    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}


.book-view-tab:hover {
    color: white;
}


.book-view-tab.active {
    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(0, 190, 255, .30),
            rgba(82, 80, 255, .24)
        );

    box-shadow:
        0 0 22px
        rgba(0, 190, 255, .12);
}


.viewer-pane {
    width: 100%;
    height: 100%;
}


.book-viewer-pane {
    min-height: 70vh;

    overflow: hidden;

    border-radius: 18px;

    background:
        rgba(2, 8, 16, .78);
}


.pdf-viewer-frame {
    display: block;

    width: 100%;

    height: 72vh;

    min-height: 620px;

    border: 0;

    background: #111;
}


@media (max-width: 900px) {

    .pdf-viewer-frame {
        height: 68vh;
        min-height: 500px;
    }
}

/* FIX: restore centered project image */

#imageViewerPane {
    width: 100%;
    height: 100%;

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

#viewerImage {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 78vh;

    margin: auto;

    object-fit: contain;
}


/* =========================================================
   BOOK PDF PREVIEW
   ========================================================= */

.book-viewer-pane {
    background:
        rgba(2, 8, 18, .54);

    overflow-y: auto;

    overflow-x: hidden;

    padding:
        28px
        22px;

    border-radius: 18px;
}


.pdf-pages {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 28px;
}


.pdf-page-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    max-width: 100%;

    padding:
        10px;

    border-radius: 16px;

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

    box-shadow:
        0 18px 55px
        rgba(0,0,0,.34);
}


.pdf-page-label {
    width: 100%;

    padding:
        2px
        4px
        9px;

    color:
        rgba(210,240,255,.55);

    font-size:
        .7rem;

    font-weight:
        700;
}


.pdf-page-canvas {
    display: block;

    max-width: 100%;

    height: auto;

    background: white;

    border-radius: 8px;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.30);
}


.pdf-preview-loading,
.pdf-preview-error {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 320px;

    width: 100%;

    color:
        rgba(220,245,255,.65);

    font-size: .85rem;
}


.pdf-preview-error {
    color:
        rgba(255,130,140,.9);
}


/* =========================================================
   BOOK PAGE NAVIGATION
   ========================================================= */

.pdf-book-navigation {
    position: sticky;
    top: 10px;
    z-index: 20;

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

    width: fit-content;

    gap: 10px;

    margin:
        0
        auto
        18px;

    padding: 6px;

    border:
        1px solid
        rgba(110, 225, 255, .16);

    border-radius: 14px;

    background:
        rgba(3, 13, 28, .86);

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .28);
}


.pdf-nav-button {
    min-width: 102px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(130, 230, 255, .12);

    border-radius: 10px;

    color:
        rgba(235, 250, 255, .90);

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

    font: inherit;

    font-size: .72rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        .18s ease;
}


.pdf-nav-button:hover:not(:disabled) {
    color: white;

    background:
        rgba(40, 200, 255, .16);

    border-color:
        rgba(100, 225, 255, .25);
}


.pdf-nav-button:disabled {
    opacity: .32;
    cursor: default;
}


.pdf-page-indicator {
    min-width: 62px;

    text-align: center;

    color:
        #86efff;

    font-size: .75rem;

    font-weight: 800;

    letter-spacing: .03em;
}