/* ==========================================================
LITHE WORKSPACE
PART 1
FOUNDATION
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --black:#050505;
    --black-soft:#0B0B0B;

    --gold:#C7A84A;
    --gold-light:#E3C971;

    --white:#F4F4F4;
    --text:#B7B7B7;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--black);

    color:var(--white);

    font-family:"Poppins",sans-serif;

    overflow-x:hidden;

}

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(circle at 50% 30%,
rgba(199,168,74,.14),
transparent 45%),

radial-gradient(circle at 80% 80%,
rgba(199,168,74,.06),
transparent 40%),

radial-gradient(circle at 20% 80%,
rgba(255,255,255,.02),
transparent 60%);

z-index:-2;

}

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

opacity:.03;

background-image:
radial-gradient(circle,#ffffff 1px,transparent 1px);

background-size:32px 32px;

z-index:-1;

}

/* ==========================================================
LITHE WORKSPACE
PART 2
NAVIGATION + HERO
========================================================== */

.workspace-nav{

    width:90%;
    max-width:1450px;

    height:90px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

}

.workspace-logo{

    font-family:"Cormorant Garamond",serif;

    font-size:42px;

    letter-spacing:14px;

    color:var(--gold);

    transition:.35s;

}

.workspace-logo:hover{

    letter-spacing:20px;

}

.back-home{

    text-decoration:none;

    color:white;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    transition:.35s;

}

.back-home:hover{

    color:var(--gold);

}

.workspace-nav-right{

display:flex;

align-items:center;

gap:28px;

}

.user-status{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:var(--gold);

white-space:nowrap;

}

.user-status a{

color:var(--gold);

text-decoration:none;

transition:.3s ease;

}

.user-status a:hover{

letter-spacing:3px;

}

.logout-link{

font-family:'Poppins',sans-serif;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

color:#b8b8b8;

text-decoration:none;

transition:.35s ease;

}

.logout-link:hover{

color:#d4af37;

letter-spacing:3px;

}

/* ==========================
HERO
========================== */

.workspace-hero{

    max-width:1200px;

    margin:auto;

    padding:120px 8% 80px;

    text-align:center;

}

.workspace-eyebrow{

    color:var(--gold);

    font-size:13px;

    letter-spacing:8px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.workspace-hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:96px;

    line-height:.9;

    margin-bottom:25px;

}

.workspace-subtitle{

    max-width:760px;

    margin:auto;

    font-size:22px;

    line-height:1.9;

    color:var(--text);

}

/* ==========================================================
LITHE WORKSPACE
PART 3
WORKSPACE CARD
========================================================== */

.workspace-card{

    max-width:900px;

    margin:80px auto;

    padding:60px;

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

    border:1px solid rgba(199,168,74,.15);

    backdrop-filter:blur(20px);

    box-shadow:
    0 30px 80px rgba(0,0,0,.45);

    transition:.45s;

}

.workspace-card:hover{

    transform:translateY(-8px);

    border-color:rgba(199,168,74,.35);

    box-shadow:
    0 40px 90px rgba(0,0,0,.55),
    0 0 35px rgba(199,168,74,.08);

}

.upload-zone{

padding:80px 40px;

border:1px solid rgba(199,168,74,.18);

text-align:center;

cursor:pointer;

transition:.5s ease;

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

backdrop-filter:blur(12px);

}

.upload-zone:hover{

border-color:rgba(199,168,74,.55);

background:rgba(199,168,74,.04);

transform:translateY(-6px);

box-shadow:
0 25px 60px rgba(0,0,0,.35);

}

.upload-icon{

    font-size:70px;

    color:var(--gold);

    margin-bottom:20px;

}

.upload-zone h2{

    font-family:"Cormorant Garamond",serif;

    font-size:52px;

    margin-bottom:15px;

}

.upload-zone p{

    font-size:18px;

    margin-bottom:25px;

}

.upload-formats{

    font-size:12px;

    letter-spacing:6px;

    text-transform:uppercase;

    color:#8c8c8c;

    margin-top:20px;

}

.image-preview{

    display:none;

    text-align:center;

    margin-top:50px;

}

.image-preview img{

    width:320px;

    max-width:100%;

    border-radius:18px;

    border:1px solid rgba(199,168,74,.2);

    box-shadow:
    0 25px 60px rgba(0,0,0,.45);

}

.preview-info{

    margin-top:25px;

}

.preview-info h3{

    font-family:"Cormorant Garamond",serif;

    font-size:34px;

    margin-bottom:10px;

}

.craft-button{

    display:block;

    margin:60px auto 0;

    padding:20px 60px;

    background:transparent;

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

    color:white;

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.35s;

}

.craft-button:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-4px);

    box-shadow:
    0 0 30px rgba(199,168,74,.30);

}

/* ==========================================================
LITHE WORKSPACE
PART 4
STATUS + RESULTS
========================================================== */

.status-panel{

    max-width:900px;

    margin:70px auto;

}

.status-header{

    text-align:center;

    margin-bottom:20px;

}

.status-header h2{

    font-family:"Cormorant Garamond",serif;

    font-size:54px;

}

.status-box{

padding:40px;

text-align:center;

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

border:1px solid rgba(199,168,74,.12);

font-size:18px;

color:var(--text);

line-height:2;

letter-spacing:.8px;

min-height:210px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

transition:

all .45s ease;

}

.status-box.updating{

border-color:rgba(199,168,74,.35);

box-shadow:
0 0 30px rgba(199,168,74,.12);

transform:scale(1.01);

}

.results-panel{

    max-width:1450px;

    margin:140px auto;

    padding:0 8%;

}

.results-header{

    text-align:center;

    margin-bottom:70px;

}

.results-header p{

    color:var(--gold);

    font-size:13px;

    letter-spacing:8px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.results-header h2{

    font-family:"Cormorant Garamond",serif;

    font-size:72px;

    margin-bottom:28px;

}

.copy-all-button{

    padding:18px 42px;

    background:transparent;

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

    color:white;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:13px;

    cursor:pointer;

    transition:.35s;

}

.copy-all-button:hover,
.copy-all-button:active{

    background:var(--gold);

    color:#111;

    transform:translateY(-3px);

    box-shadow:
    0 0 30px rgba(199,168,74,.25);

}

.results-grid{

    display:grid;

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

    gap:35px;

}

.result-item{

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

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

    padding:32px;

    backdrop-filter:blur(18px);

    transition:
    .35s,
    opacity .55s,
    transform .55s;

}

.result-item:hover{

    transform:translateY(-8px);

    border-color:rgba(199,168,74,.35);

    box-shadow:
    0 25px 60px rgba(0,0,0,.35);

}

.result-item label{

    display:block;

    margin-bottom:16px;

    color:var(--gold);

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

}

.result-item textarea{

    width:100%;

    height:170px;

    resize:none;

    padding:18px;

    background:#090909;

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

    border-radius:10px;

    outline:none;

    color:white;

    font-family:"Poppins",sans-serif;

    font-size:14px;

    line-height:1.8;

}

.result-item textarea:focus{

    border-color:rgba(199,168,74,.35);

}

.result-item button{

    margin-top:18px;

    padding:12px 30px;

    background:transparent;

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

    color:white;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:12px;

    cursor:pointer;

    transition:.35s;

}

.result-item button:hover{

    background:var(--gold);

    color:#111;

}

/* ==========================================================
LITHE WORKSPACE
PART 5
LUXURY REVEAL • FOOTER • RESPONSIVE
========================================================== */

.result-item{

    opacity:0;

    transform:translateY(20px);

}

.result-item.show{

opacity:1;

transform:translateY(0);

animation:litheReveal .65s cubic-bezier(.22,.61,.36,1);

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

}

@keyframes litheReveal{

0%{

opacity:0;

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

filter:blur(6px);

}

60%{

opacity:1;

transform:
translateY(-4px)
scale(1.01);

filter:blur(0);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

filter:blur(0);

}

}

.workspace-footer{

    margin-top:140px;

    padding:80px 0;

    text-align:center;

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

}

.workspace-footer p{

    letter-spacing:3px;

    color:#9B9B9B;

}

@media(max-width:1000px){

    .results-grid{

        grid-template-columns:1fr;

    }

    .workspace-hero h1{

        font-size:68px;

    }

    .results-header h2{

        font-size:54px;

    }

}

/* ==========================================================
MOBILE-ONLY FIXES
(Desktop above is untouched. Everything below only applies
at 768px and narrower.)
========================================================== */

@media(max-width:768px){

    .workspace-nav{

        height:auto;

        padding:30px 0;

        flex-direction:column;

        gap:25px;

    }

    .workspace-logo{

        font-size:32px;

        letter-spacing:8px;

    }

    .workspace-nav-right{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

        max-width:100%;

    }

    .user-status{

        font-size:11px;

        letter-spacing:1px;

    }

    .workspace-hero{

        padding:90px 25px;

    }

    .workspace-hero h1{

        font-size:48px;

    }

    .workspace-subtitle{

        font-size:18px;

    }

    .workspace-card{

        padding:30px;

    }

    .upload-zone{

        padding:55px 20px;

    }

    .upload-zone h2{

        font-size:38px;

    }

    .results-header h2{

        font-size:42px;

    }

    .results-description{

        font-size:16px;

        padding:0 10px;

    }

    .copy-all-button{

        width:100%;

        max-width:420px;

    }

    /* ---------- Craft Status mobile fix ---------- */

    .status-panel{

        padding:0 20px;

    }

    .status-box{

        padding:30px 20px;

        font-size:15px;

        line-height:1.8;

        min-height:auto;

        word-break:break-word;

        overflow-wrap:anywhere;

    }

    .status-box a.copy-all-button{

        width:100%;

        max-width:320px;

        text-align:center;

        box-sizing:border-box;

    }

}

#downloadPdfButton{

    display:block;

    width:340px;

    margin:18px auto 0;

    letter-spacing:5px;

    line-height:1.8;

    padding:20px 40px;

}

#newListingButton{

    margin-top:22px;

    margin-bottom:50px;

}

/* =====================================
   CURSOR GLOW
===================================== */

.cursor-glow{

position:fixed;

left:0;
top:0;

width:520px;
height:520px;

border-radius:50%;

pointer-events:none;

background:
radial-gradient(circle,
rgba(199,168,74,.14) 0%,
rgba(199,168,74,.07) 28%,
rgba(199,168,74,.025) 55%,
transparent 80%);

filter:blur(75px);

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

z-index:-2;

opacity:.9;

transition:
left .05s linear,
top .05s linear;

mix-blend-mode:screen;

}

/* =====================================
LUXURY GOLD PARTICLES
===================================== */

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background-image:

radial-gradient(circle,
rgba(199,168,74,.22) 1px,
transparent 1px);

background-size:95px 95px;

animation:litheParticles 28s linear infinite;

opacity:.55;

z-index:-3;

}

@keyframes litheParticles{

0%{

transform:
translateY(0px);

}

100%{

transform:
translateY(-95px);

}

}

/* ==========================================================
PAGE FADE TRANSITION
========================================================== */

body{

    opacity:0;

    transition:opacity .6s ease;

}

body.loaded{

    opacity:1;

}