.nav-transition { transition: transform .35s ease, background .25s ease, box-shadow .25s ease, padding .2s ease; }
.nav-hidden    { transform: translateY(-100%); }
.nav-solid     { backdrop-filter: saturate(180%) blur(10px); background: rgba(2,6,23,.75); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-shadow    { box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.nav-compact   { padding-top: .6rem !important; padding-bottom: .6rem !important; }
.nl-gradient { background-image: linear-gradient(90deg, var(--brand-start), var(--bg-deep)); }
:root{
    --brand-start:#ff5f6d;
    --brand-mid:#ff9966;
    --brand-end:#ffc371;
    --bg-deep:#0f172a; /* slate-900-ish */
    --ink:#1f2937;
}

body {
    background-color: var(--bg-deep);
    background-image:
    radial-gradient(circle at 20% 20%, rgba(255,153,102,.25) 0%, rgba(15,23,42,0) 60%),
    radial-gradient(circle at 80% 30%, rgba(255,95,109,.18) 0%, rgba(15,23,42,0) 60%),
    radial-gradient(circle at 50% 80%, rgba(255,195,113,.15) 0%, rgba(15,23,42,0) 60%);
    background-size: cover;
    background-repeat: no-repeat;
    color-scheme: dark;
}

.brand-gradient{
    background:linear-gradient(90deg,var(--brand-start),var(--brand-mid),var(--brand-end));
}

.text-gradient{
    background:linear-gradient(90deg,var(--brand-start),var(--brand-end));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.glass-card{
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-radius:1rem;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
    0 30px 80px -10px rgba(0,0,0,.9),
    0 0 30px rgba(255,153,102,.4),
    0 0 80px rgba(255,195,113,.25);
}

.mini-pill{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.15);
    border-radius:9999px;
    box-shadow:0 10px 30px rgba(0,0,0,.7);
}

.glow-frame{
    position:relative;
    border-radius:1rem;
    padding:2px;
    background:conic-gradient(from 0deg,
    rgba(255,95,109,.8),
    rgba(255,195,113,.8),
    rgba(255,153,102,.8),
    rgba(255,95,109,.8));
    box-shadow:
    0 30px 80px -10px rgba(0,0,0,.9),
    0 0 30px rgba(255,153,102,.4),
    0 0 80px rgba(255,195,113,.25);
    animation:spinBorder 6s linear infinite;
    background-size:200% 200%;
}
@keyframes spinBorder {
    0%{filter:hue-rotate(0deg);}
    100%{filter:hue-rotate(360deg);}
}

.glow-inner{
    border-radius:0.9rem;
    background-color:#0f172a;
    background-image:radial-gradient(circle at 50% 0%,rgba(255,255,255,.07) 0%,rgba(15,23,42,0) 70%);
    min-height:14rem;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem;
    color:#e2e8f0;
}