/* =========================================================
   HUB PAGES V1
   Creator · Sponsors · Monetization · Media Library
   ========================================================= */

.hub-hero{
    position:relative;
    padding:92px 0 72px;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.055);
}

.hub-hero::before{
    content:"";
    position:absolute;
    inset:-20% -10%;
    pointer-events:none;
    background:
        radial-gradient(circle at 12% 24%,rgb(var(--world-accent)/.16),transparent 28%),
        radial-gradient(circle at 86% 18%,rgb(var(--world-accent-2)/.13),transparent 30%);
    filter:blur(38px);
}

.hub-hero-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(380px,.74fr);
    gap:56px;
    align-items:end;
}

.hub-kicker{
    display:flex;
    align-items:center;
    gap:9px;
    color:rgb(var(--world-accent)/.88);
    font:700 .44rem/1 monospace;
    letter-spacing:.1em;
}

.hub-kicker::before{
    content:"";
    width:7px;height:7px;border-radius:50%;
    background:rgb(var(--world-accent));
    box-shadow:0 0 15px rgb(var(--world-accent)/.42);
}

.hub-hero h1{
    margin:18px 0 16px;
    max-width:1000px;
    color:#fff;
    font-size:clamp(3rem,6vw,6.3rem);
    line-height:.9;
    letter-spacing:-.065em;
}

.hub-hero-copy>p{
    max-width:800px;
    margin:0;
    color:var(--ws-muted);
    font-size:.72rem;
    line-height:1.72;
}

.hub-actions{
    margin-top:22px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.hub-actions a,
.hub-actions button{
    min-height:42px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;
    color:rgba(255,255,255,.62);
    background:
        linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    font:700 .4rem/1 monospace;
    letter-spacing:.05em;
}

.hub-actions a:hover,
.hub-actions button:hover{
    color:#fff;
    border-color:rgb(var(--world-accent)/.26);
    background:rgb(var(--world-accent)/.045);
}

.hub-status{
    padding:18px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:28px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--world-accent)/.09),transparent 34%),
        radial-gradient(circle at 100% 100%,rgb(var(--world-accent-2)/.06),transparent 36%),
        linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),
        rgba(8,19,29,.74);
    box-shadow:
        0 24px 70px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter:blur(22px) saturate(165%);
}

.hub-status-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.hub-status-head span{
    color:var(--ws-dim);
    font:700 .36rem/1 monospace;
    letter-spacing:.07em;
}

.hub-status-head i{
    padding:6px 8px;
    border:1px solid rgb(var(--world-accent)/.16);
    border-radius:999px;
    color:rgb(var(--world-accent)/.76);
    background:rgb(var(--world-accent)/.03);
    font:700 .33rem/1 monospace;
    font-style:normal;
    letter-spacing:.06em;
}

.hub-metrics{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}

.hub-metric{
    min-height:96px;
    padding:12px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    background:rgba(255,255,255,.012);
}

.hub-metric strong{
    display:block;
    color:#fff;
    font-size:1.15rem;
    letter-spacing:-.04em;
}

.hub-metric span{
    display:block;
    margin-top:6px;
    color:var(--ws-dim);
    font:600 .36rem/1.35 monospace;
}

.hub-section{
    position:relative;
    padding:78px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.hub-section-head{
    display:grid;
    grid-template-columns:1fr minmax(280px,.64fr);
    gap:42px;
    align-items:end;
    margin-bottom:22px;
}

.hub-section-head span{
    color:rgb(var(--world-accent)/.80);
    font:700 .4rem/1 monospace;
    letter-spacing:.09em;
}

.hub-section-head h2{
    margin:9px 0 0;
    color:#fff;
    font-size:clamp(2rem,3.8vw,3.9rem);
    line-height:.94;
    letter-spacing:-.055em;
}

.hub-section-head p{
    margin:0;
    color:var(--ws-muted);
    font-size:.58rem;
    line-height:1.65;
}

.hub-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.hub-card{
    position:relative;
    min-height:190px;
    padding:15px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.075);
    border-radius:22px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--world-accent)/.065),transparent 38%),
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),
        rgba(255,255,255,.01);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.hub-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    opacity:0;
    background:radial-gradient(circle at 12% 0%,rgb(var(--world-accent)/.09),transparent 42%);
    transition:opacity .2s ease;
}

.hub-card:hover::before{opacity:1}

.hub-card>*{position:relative;z-index:1}

.hub-card>span{
    color:rgb(var(--world-accent)/.62);
    font:700 .36rem/1 monospace;
    letter-spacing:.07em;
}

.hub-card h3{
    margin:13px 0 8px;
    color:#fff;
    font-size:.9rem;
}

.hub-card p{
    margin:0;
    color:rgba(239,247,255,.45);
    font-size:.5rem;
    line-height:1.6;
}

.hub-state-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.hub-state{
    min-height:172px;
    padding:14px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:22px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--world-accent)/.07),transparent 38%),
        rgba(255,255,255,.012);
}

.hub-state span{
    color:var(--ws-dim);
    font:700 .34rem/1 monospace;
    letter-spacing:.06em;
}

.hub-state strong{
    display:block;
    margin-top:20px;
    color:#fff;
    font-size:.9rem;
}

.hub-state p{
    margin:8px 0 0;
    color:rgba(239,247,255,.44);
    font-size:.48rem;
    line-height:1.55;
}

.hub-boundary{
    margin-top:12px;
    padding:12px 14px;
    border:1px solid rgba(255,172,104,.13);
    border-radius:18px;
    color:rgba(255,218,180,.60);
    background:rgba(255,172,104,.025);
    font-size:.47rem;
    line-height:1.58;
}

.hub-channel-grid{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.hub-channel-grid a{
    min-height:40px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    color:rgba(255,255,255,.56);
    background:rgba(255,255,255,.014);
    font:700 .38rem/1 monospace;
    letter-spacing:.05em;
}

.hub-channel-grid a:hover{
    color:#fff;
    border-color:rgb(var(--world-accent)/.24);
    background:rgb(var(--world-accent)/.04);
}

@media(max-width:980px){
    .hub-hero-grid,
    .hub-section-head{
        grid-template-columns:1fr;
    }
    .hub-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .hub-state-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .hub-hero{padding:66px 0 54px}
    .hub-hero h1{font-size:clamp(2.7rem,13vw,4.8rem)}
    .hub-grid,
    .hub-state-grid,
    .hub-metrics{
        grid-template-columns:1fr;
    }
    .hub-status{border-radius:22px}
}

/* =========================================================
   V13 — HUB CONTROL PLANE
   Shared nested-system experience across all six hubs.
   ========================================================= */

.hub-hero{
    padding-top:104px;
    isolation:isolate;
}

.hub-hero::after{
    content:"";
    position:absolute;
    inset:10% -4% auto;
    height:62%;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 40%,rgb(var(--world-accent)/.09),transparent 29%),
        radial-gradient(circle at 82% 28%,rgb(var(--world-accent-2)/.075),transparent 31%);
    filter:blur(46px);
}

.hub-hero-grid{
    z-index:2;
    gap:64px;
}

.hub-kicker{
    width:max-content;
    padding:8px 11px;
    border:1px solid rgb(var(--world-accent)/.14);
    border-radius:999px;
    background:rgb(var(--world-accent)/.025);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.hub-hero h1{
    max-width:940px;
    text-wrap:balance;
    background:
        linear-gradient(
            105deg,
            #fff 0%,
            #eefbff 38%,
            rgb(var(--world-accent)/.94) 70%,
            rgb(var(--world-accent-2)/.88) 94%
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hub-status{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--world-accent)/.13),transparent 36%),
        radial-gradient(circle at 100% 100%,rgb(var(--world-accent-2)/.085),transparent 38%),
        linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.014)),
        rgba(8,19,29,.80);
    box-shadow:
        0 34px 110px rgba(0,0,0,.23),
        0 0 46px rgb(var(--world-accent)/.03),
        inset 0 1px 0 rgba(255,255,255,.065);
}

.hub-status::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
        linear-gradient(180deg,rgba(255,255,255,.038),transparent 22%),
        radial-gradient(circle at 70% -20%,rgba(255,255,255,.04),transparent 42%);
}

.hub-status > *{
    position:relative;
    z-index:1;
}

.hub-metric{
    border-radius:20px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}

.hub-section{
    position:relative;
    overflow:hidden;
}

.hub-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.60;
    background:
        radial-gradient(circle at 6% 20%,rgb(var(--world-accent)/.025),transparent 24%),
        radial-gradient(circle at 94% 78%,rgb(var(--world-accent-2)/.018),transparent 26%);
}

.hub-section > .ws-shell{
    position:relative;
    z-index:1;
}

.hub-card,
.hub-state{
    isolation:isolate;
    border-radius:26px;
    transition:
        transform .22s var(--ws-ease),
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.hub-card::after,
.hub-state::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:0;
    border-radius:inherit;
    background:
        radial-gradient(
            260px circle at var(--mx,50%) var(--my,50%),
            rgb(var(--world-accent)/.13),
            transparent 62%
        );
    transition:opacity .20s ease;
}

.hub-card:hover::after,
.hub-card:focus-within::after,
.hub-state:hover::after,
.hub-state:focus-within::after{
    opacity:1;
}

.hub-card:hover,
.hub-state:hover{
    transform:translateY(-3px);
    border-color:rgb(var(--world-accent)/.20);
    box-shadow:
        0 22px 58px rgba(0,0,0,.14),
        0 0 28px rgb(var(--world-accent)/.035),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.hub-card > *,
.hub-state > *{
    position:relative;
    z-index:1;
}

.hub-card-index{
    position:absolute;
    right:13px;
    top:12px;
    z-index:2;
    color:rgb(var(--world-accent)/.42);
    font:750 .34rem/1 monospace;
    letter-spacing:.08em;
}

.hub-runtime-strip{
    margin:0 0 12px;
    padding:9px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:9px;
    align-items:center;
    border:1px solid rgba(255,255,255,.065);
    border-radius:22px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.007)),
        rgba(7,18,28,.48);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.hub-runtime-path{
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
    color:rgba(255,255,255,.32);
    font:650 .38rem/1.4 monospace;
    letter-spacing:.05em;
}

.hub-runtime-path strong{
    color:rgb(var(--world-accent)/.76);
}

.hub-runtime-state{
    min-height:36px;
    padding:0 10px;
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid rgb(var(--world-accent)/.13);
    border-radius:999px;
    color:rgb(var(--world-accent)/.68);
    background:rgb(var(--world-accent)/.025);
    font:700 .35rem/1 monospace;
    letter-spacing:.055em;
}

.hub-runtime-state::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgb(var(--world-accent));
    box-shadow:0 0 12px rgb(var(--world-accent)/.34);
}

.hub-scroll-progress{
    position:fixed;
    z-index:98900;
    left:0;
    top:0;
    width:100%;
    height:3px;
    transform:scaleX(0);
    transform-origin:0 50%;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgb(var(--world-accent)),
            rgb(var(--world-accent-2)),
            #ff72b7
        );
    box-shadow:0 0 14px rgb(var(--world-accent)/.28);
}

.hub-channel-grid a{
    border-radius:999px;
    transition:
        transform .20s var(--ws-ease),
        border-color .20s ease,
        background .20s ease;
}

.hub-channel-grid a:hover{
    transform:translateY(-2px);
}

.hub-boundary{
    border-radius:22px;
}

@media(max-width:980px){
    .hub-hero{
        padding-top:76px;
    }

    .hub-runtime-strip{
        grid-template-columns:1fr;
    }

    .hub-runtime-state{
        width:max-content;
    }
}

@media(max-width:600px){
    .hub-status{
        border-radius:24px;
    }

    .hub-card,
    .hub-state{
        border-radius:21px;
    }

    .hub-runtime-strip{
        border-radius:18px;
    }
}

@media(prefers-reduced-motion:reduce){
    .hub-card,
    .hub-state,
    .hub-channel-grid a{
        transition:none!important;
    }
}