/* ═══════════════════════════════════════════════════════════════════════════
   yon-content — main content shell (header ↔ footer)
   Palette: footer green var(--h-green) + header purple var(--h-blue) + slate var(--h-bg-page)
   ═══════════════════════════════════════════════════════════════════════════ */

.yon-content{
    --yc-bg:var(--h-bg-page);
    --yc-surface:var(--h-bg-card);
    --yc-border:var(--h-border);
    --yc-text:var(--h-text);
    --yc-muted:var(--h-text-muted);
    --yc-green:var(--h-green);
    --yc-green-2:var(--h-green-dark);
    --yc-purple:var(--h-blue);
    --yc-purple-2:var(--h-blue-dark);
    --yc-accent:var(--h-green);
    --yc-accent-2:var(--h-green-dark);
    --yc-container:var(--h-container);
    position:relative;
    isolation:isolate;
    flex:1 0 auto;
    min-height:40vh;
    color:var(--yc-text);
    background:var(--yc-bg);
}

.yon-content--header{
    --yc-accent:var(--yc-purple);
    --yc-accent-2:var(--yc-purple-2);
}
.yon-content--dual{
    --yc-accent:var(--yc-green);
    --yc-accent-2:var(--yc-green-2);
}
.yon-content--footer{
    --yc-accent:var(--yc-green);
    --yc-accent-2:var(--yc-green-2);
}

.yon-content--pad-compact{padding-block:0}
.yon-content--pad-normal{padding-block:0}
.yon-content--pad-relaxed{padding-block:8px 0}

/* Ambient mesh */
.yon-content--ambient::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.9;
}
.yon-content--mesh-soft.yon-content--ambient::before{
    background:
        radial-gradient(ellipse 70% 40% at 12% 0%, rgba(17,211,119,.08), transparent 55%),
        radial-gradient(ellipse 55% 35% at 92% 8%, rgba(61,90,254,.07), transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 100%, rgba(17,211,119,.05), transparent 55%);
}
.yon-content--mesh-vivid.yon-content--ambient::before{
    background:
        radial-gradient(ellipse 80% 45% at 8% -5%, rgba(17,211,119,.14), transparent 55%),
        radial-gradient(ellipse 65% 40% at 95% 0%, rgba(61,90,254,.14), transparent 50%),
        radial-gradient(ellipse 60% 35% at 50% 105%, rgba(17,211,119,.10), transparent 55%);
}
.yon-content--mesh-none.yon-content--ambient::before,
.yon-content:not(.yon-content--ambient)::before{display:none}

.yon-content--header.yon-content--mesh-soft.yon-content--ambient::before{
    background:
        radial-gradient(ellipse 70% 40% at 12% 0%, rgba(61,90,254,.10), transparent 55%),
        radial-gradient(ellipse 55% 35% at 92% 8%, rgba(14,165,233,.07), transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 100%, rgba(61,90,254,.06), transparent 55%);
}

/* Header / footer blend edges */
.yon-content--blend-top::after{
    content:"";
    position:absolute;
    left:0;right:0;top:0;height:48px;
    pointer-events:none;z-index:0;
    background:linear-gradient(180deg, rgba(11,14,20,.55), transparent);
}
.yon-content--blend-bottom{
    box-shadow:inset 0 -1px 0 var(--yc-border);
}

.yon-content > *:not(.yon-btt){position:relative;z-index:1}
.yon-content .yon-btt{z-index:55}

/* Flash alerts inside content */
.yon-content .yon-alert{
    border-radius:12px;
    padding:12px 16px;
    font-size:13.5px;
    font-weight:650;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.yon-content .yon-alert--success{
    border:1px solid rgba(17,211,119,.28);
    background:rgba(17,211,119,.12);
    color:#86efac;
}
.yon-content .yon-alert--error{
    border:1px solid rgba(239,68,68,.28);
    background:rgba(239,68,68,.12);
    color:#fca5a5;
}
.yon-content--alert-solid .yon-alert--success{
    background:linear-gradient(135deg, rgba(17,211,119,.22), rgba(22,163,74,.14));
}
.yon-content--alert-solid .yon-alert--error{
    background:linear-gradient(135deg, rgba(239,68,68,.22), rgba(220,38,38,.14));
}

.yon-content__flash{
    max-width:var(--yc-container);
    margin:0 auto;
    padding:12px clamp(16px,3vw,28px) 0;
}

/* Back to top */
.yon-btt{
    position:fixed;
    right:18px;
    bottom:88px;
    z-index:55;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(17,211,119,.28);
    background:rgba(18,24,38,.92);
    color:#f1f5f9;
    font-size:12.5px;
    font-weight:750;
    cursor:pointer;
    box-shadow:0 10px 28px -12px rgba(0,0,0,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .2s, transform .2s, border-color .15s, background .15s;
}
.yon-btt.is-on{opacity:1;pointer-events:auto;transform:translateY(0)}
.yon-btt:hover{
    border-color:rgba(17,211,119,.45);
    background:rgba(17,211,119,.16);
    color:#86efac;
}
.yon-content--header .yon-btt{
    border-color:rgba(61,90,254,.28);
}
.yon-content--header .yon-btt:hover{
    border-color:rgba(61,90,254,.45);
    background:rgba(61,90,254,.16);
    color:#c4b5fd;
}
.yon-content--dual .yon-btt:hover{
    border-color:rgba(61,90,254,.4);
    background:linear-gradient(135deg, rgba(17,211,119,.14), rgba(61,90,254,.14));
}
@media (min-width:768px){
    .yon-btt{bottom:28px;right:24px}
}

/* Light theme */
html[data-theme="light"] .yon-content{
    --yc-bg:#f3f5f8;
    --yc-surface:#ffffff;
    --yc-border:rgba(15,23,42,.08);
    --yc-text:#0f172a;
    --yc-muted:#64748b;
    background:var(--yc-bg);
    color:var(--yc-text);
}
html[data-theme="light"] .yon-content--mesh-soft.yon-content--ambient::before{
    background:
        radial-gradient(ellipse 70% 40% at 12% 0%, rgba(17,211,119,.06), transparent 55%),
        radial-gradient(ellipse 55% 35% at 92% 8%, rgba(61,90,254,.05), transparent 50%);
}
html[data-theme="light"] .yon-content--blend-top::after{
    background:linear-gradient(180deg, rgba(241,245,249,.7), transparent);
}
html[data-theme="light"] .yon-btt{
    background:rgba(255,255,255,.92);
    color:#0f172a;
    border-color:rgba(15,23,42,.12);
}
html[data-theme="light"] .yon-content .yon-alert--success{color:#047857}
html[data-theme="light"] .yon-content .yon-alert--error{color:#b91c1c}