/* =========================================================
   CREATOR HUB V1
   Approval-first content distribution experience.
   ========================================================= */

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

.creator-head{
    display:grid;
    grid-template-columns:1fr minmax(300px,.65fr);
    gap:42px;
    align-items:end;
    margin-bottom:18px;
}

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

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

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

.creator-boundary{
    margin-bottom:12px;
    padding:11px 13px;
    border:1px solid rgba(255,172,104,.13);
    border-radius:18px;
    color:rgba(255,218,180,.60);
    background:rgba(255,172,104,.025);
    font:650 .4rem/1.55 monospace;
}

.creator-layout{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:10px;
}

.creator-panel{
    padding:16px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:26px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--world-accent)/.055),transparent 36%),
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),
        rgba(8,19,29,.66);
    box-shadow:
        0 22px 62px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.045);
}

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

.creator-panel-head span{
    color:rgb(var(--world-accent)/.74);
    font:700 .38rem/1 monospace;
    letter-spacing:.075em;
}

.creator-panel-head i{
    padding:6px 8px;
    border:1px solid rgb(var(--world-accent)/.14);
    border-radius:999px;
    color:rgb(var(--world-accent)/.68);
    background:rgb(var(--world-accent)/.025);
    font:700 .32rem/1 monospace;
    font-style:normal;
    letter-spacing:.05em;
}

.creator-format-list{
    margin-top:12px;
    display:grid;
    gap:7px;
}

.creator-format{
    width:100%;
    min-height:88px;
    padding:12px 13px;
    display:grid;
    grid-template-columns:36px minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    border:1px solid rgba(255,255,255,.065);
    border-radius:19px;
    color:inherit;
    background:rgba(255,255,255,.01);
    text-align:left;
    cursor:pointer;
    transition:
        transform .18s var(--ws-ease),
        border-color .18s ease,
        background .18s ease;
}

.creator-format:hover,
.creator-format.is-active{
    transform:translateX(2px);
    border-color:rgb(var(--world-accent)/.22);
    background:
        radial-gradient(circle at 0 50%,rgb(var(--world-accent)/.075),transparent 28%),
        rgba(255,255,255,.014);
}

.creator-format-index{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.07);
    border-radius:13px;
    color:rgb(var(--world-accent)/.72);
    background:rgba(255,255,255,.012);
    font:750 .35rem/1 monospace;
}

.creator-format-copy strong{
    display:block;
    color:#fff;
    font-size:.58rem;
}

.creator-format-copy small{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.30);
    font-size:.41rem;
    line-height:1.4;
}

.creator-format-arrow{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.065);
    border-radius:50%;
    color:rgba(255,255,255,.34);
    font-style:normal;
}

.creator-inspector{
    min-height:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.creator-selected{
    padding:18px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:22px;
    background:
        radial-gradient(circle at 0 0,rgba(255,114,183,.08),transparent 35%),
        radial-gradient(circle at 100% 100%,rgba(91,234,255,.055),transparent 36%),
        rgba(255,255,255,.01);
}

.creator-selected>span{
    color:rgba(255,114,183,.72);
    font:700 .36rem/1 monospace;
    letter-spacing:.07em;
}

.creator-selected h3{
    margin:10px 0 7px;
    color:#fff;
    font-size:1.28rem;
    letter-spacing:-.04em;
}

.creator-selected p{
    margin:0;
    color:var(--ws-muted);
    font-size:.52rem;
    line-height:1.62;
}

.creator-selected-meta{
    margin-top:13px;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.creator-selected-meta span{
    padding:6px 8px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:999px;
    color:rgba(255,255,255,.38);
    background:rgba(255,255,255,.012);
    font:650 .33rem/1 monospace;
}

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

.creator-channel{
    --channel-accent:91 234 255;
    min-height:128px;
    padding:12px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.065);
    border-radius:19px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),
        rgba(255,255,255,.008);
    opacity:.42;
    transition:
        opacity .18s ease,
        border-color .18s ease,
        transform .18s var(--ws-ease),
        background .18s ease;
}

.creator-channel.is-target{
    opacity:1;
    border-color:rgb(var(--channel-accent)/.24);
    background:
        radial-gradient(circle at 0 0,rgb(var(--channel-accent)/.10),transparent 42%),
        rgba(255,255,255,.012);
}

.creator-channel.is-master{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgb(var(--channel-accent)/.04);
}

.creator-channel span{
    color:rgb(var(--channel-accent)/.72);
    font:700 .33rem/1 monospace;
    letter-spacing:.055em;
}

.creator-channel strong{
    display:block;
    margin-top:18px;
    color:#fff;
    font-size:.72rem;
}

.creator-channel small{
    display:block;
    margin-top:6px;
    color:rgba(255,255,255,.30);
    font-size:.39rem;
    line-height:1.4;
}

.creator-channel.is-target:hover{
    transform:translateY(-2px);
}

.creator-approval{
    margin-top:10px;
    padding:16px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:26px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--world-accent)/.05),transparent 35%),
        rgba(8,19,29,.58);
}

.creator-approval-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:end;
    margin-bottom:12px;
}

.creator-approval-head span{
    color:rgb(var(--world-accent)/.72);
    font:700 .38rem/1 monospace;
    letter-spacing:.075em;
}

.creator-approval-head p{
    margin:0;
    max-width:620px;
    color:rgba(255,255,255,.30);
    font-size:.42rem;
    line-height:1.45;
    text-align:right;
}

.creator-approval-flow{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;
}

.creator-step{
    position:relative;
    min-height:168px;
    padding:12px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:19px;
    background:rgba(255,255,255,.009);
}

.creator-step:not(:last-child)::after{
    content:"→";
    position:absolute;
    z-index:3;
    right:-10px;
    top:50%;
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
    color:rgb(var(--world-accent)/.52);
    background:#09151f;
    font-size:.43rem;
}

.creator-step b{
    color:rgb(var(--world-accent)/.58);
    font:750 .34rem/1 monospace;
}

.creator-step strong{
    display:block;
    margin-top:20px;
    color:#fff;
    font-size:.63rem;
}

.creator-step p{
    margin:7px 0 0;
    color:rgba(255,255,255,.32);
    font-size:.4rem;
    line-height:1.48;
}

.creator-step.is-owner{
    border-color:rgba(184,255,104,.16);
    background:
        radial-gradient(circle at 0 0,rgba(184,255,104,.06),transparent 40%),
        rgba(255,255,255,.009);
}

.creator-rule-grid{
    margin-top:10px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}

.creator-rule{
    min-height:88px;
    padding:11px;
    border:1px solid rgba(255,172,104,.10);
    border-radius:17px;
    color:rgba(255,214,175,.50);
    background:rgba(255,172,104,.018);
    font-size:.42rem;
    line-height:1.5;
}

@media(max-width:1050px){
    .creator-layout{grid-template-columns:1fr}
    .creator-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .creator-approval-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:700px){
    .creator-head{grid-template-columns:1fr}
    .creator-channel-grid,
    .creator-rule-grid{grid-template-columns:1fr}
    .creator-approval-flow{grid-template-columns:1fr}
    .creator-step::after{display:none!important}
    .creator-panel,
    .creator-approval{border-radius:21px}
}

/* V13 — CREATOR CONTROL SURFACE */
.creator-panel,.creator-inspector,.creator-approval{border-radius:30px!important}
.creator-format,.creator-channel,.creator-rule,.creator-step{
  position:relative;overflow:hidden;border-radius:22px!important;isolation:isolate;
  transition:transform .2s var(--ws-ease),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.creator-format::after,.creator-channel::after,.creator-rule::after,.creator-step::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgb(var(--world-accent)/.13),transparent 62%);
  transition:opacity .2s ease;
}
.creator-format:hover::after,.creator-channel:hover::after,.creator-rule:hover::after,.creator-step:hover::after{opacity:1}
.creator-format:hover,.creator-channel:hover{transform:translateY(-2px);border-color:rgb(var(--world-accent)/.22);box-shadow:0 18px 46px rgba(0,0,0,.12)}
.creator-format>*,.creator-channel>*,.creator-rule>*,.creator-step>*{position:relative;z-index:1}
.creator-format.is-active{border-color:rgb(var(--world-accent)/.34)!important;box-shadow:0 0 0 1px rgb(var(--world-accent)/.055),0 18px 52px rgba(0,0,0,.14)!important}
.creator-selected{border-radius:24px!important}
.creator-approval-flow{gap:8px!important}

/* =========================================================
   CREATOR CONTROL V2
   Access tiers · 90/10 strategy · safety gate · capture layer
   ========================================================= */

.creator-strategy,
.creator-access,
.creator-gate,
.creator-capture{
    margin-top:12px;
    padding:18px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.075);
    border-radius:30px;
    background:
        radial-gradient(circle at 0 0,rgba(255,114,183,.055),transparent 34%),
        radial-gradient(circle at 100% 100%,rgba(91,234,255,.045),transparent 36%),
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.007)),
        rgba(8,19,29,.64);
    box-shadow:
        0 24px 68px rgba(0,0,0,.13),
        inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(20px) saturate(160%);
}

.creator-strategy::before,
.creator-access::before,
.creator-gate::before,
.creator-capture::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
        linear-gradient(180deg,rgba(255,255,255,.025),transparent 24%),
        radial-gradient(circle at 50% -40%,rgba(255,255,255,.035),transparent 44%);
}

.creator-strategy > *,
.creator-access > *,
.creator-gate > *,
.creator-capture > *{
    position:relative;
    z-index:1;
}

.creator-strategy-head,
.creator-access-head,
.creator-gate-head,
.creator-capture-head{
    display:flex;
    justify-content:space-between;
    gap:22px;
    align-items:end;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.creator-strategy-copy>span,
.creator-access-head span,
.creator-gate-head span,
.creator-capture-head span{
    color:rgba(255,114,183,.72);
    font:700 .38rem/1 monospace;
    letter-spacing:.085em;
}

.creator-strategy-copy h3,
.creator-access-head h3,
.creator-gate-head h3,
.creator-capture-head h3{
    margin:9px 0 0;
    color:#fff;
    font-size:clamp(1.25rem,2.4vw,2.35rem);
    line-height:.96;
    letter-spacing:-.045em;
}

.creator-strategy-copy p,
.creator-access-head>p,
.creator-gate-head>p{
    max-width:560px;
    margin:0;
    color:rgba(255,255,255,.32);
    font-size:.43rem;
    line-height:1.55;
}

.creator-strategy-state,
.creator-capture-head>i{
    flex:0 0 auto;
    padding:8px 10px;
    border:1px solid rgba(255,172,104,.16);
    border-radius:999px;
    color:rgba(255,210,168,.72);
    background:rgba(255,172,104,.025);
    font:700 .34rem/1 monospace;
    font-style:normal;
    letter-spacing:.06em;
}

/* 90 / 10 planned split */
.creator-split{
    margin-top:14px;
    display:grid;
    grid-template-columns:9fr 1fr;
    gap:8px;
}

.creator-split-card{
    --split-accent:255 114 183;
    min-height:230px;
    padding:18px;
    position:relative;
    overflow:hidden;
    border:1px solid rgb(var(--split-accent)/.16);
    border-radius:24px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--split-accent)/.12),transparent 38%),
        linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),
        rgba(11,24,35,.72);
    isolation:isolate;
}

.creator-split-card.is-public{
    --split-accent:91 234 255;
    min-width:150px;
}

.creator-split-card::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:calc(var(--split,0) * 1%);
    max-height:100%;
    opacity:.055;
    background:
        linear-gradient(180deg,transparent,rgb(var(--split-accent)));
    pointer-events:none;
}

.creator-split-card span{
    color:rgb(var(--split-accent)/.74);
    font:700 .37rem/1 monospace;
    letter-spacing:.075em;
}

.creator-split-card strong{
    display:block;
    margin-top:28px;
    color:#fff;
    font-size:clamp(3rem,6vw,6rem);
    line-height:.8;
    letter-spacing:-.07em;
}

.creator-split-card p{
    max-width:620px;
    margin:23px 0 0;
    color:rgba(255,255,255,.37);
    font-size:.46rem;
    line-height:1.6;
}

.creator-dependency{
    margin-top:8px;
    min-height:82px;
    padding:13px 15px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:15px;
    align-items:center;
    border:1px solid rgba(184,255,104,.11);
    border-radius:20px;
    color:inherit;
    background:
        radial-gradient(circle at 0 50%,rgba(184,255,104,.055),transparent 28%),
        rgba(255,255,255,.009);
    transition:
        transform .2s var(--ws-ease),
        border-color .2s ease,
        background .2s ease;
}

.creator-dependency:hover{
    transform:translateY(-2px);
    border-color:rgba(184,255,104,.22);
    background:
        radial-gradient(circle at 0 50%,rgba(184,255,104,.085),transparent 32%),
        rgba(255,255,255,.012);
}

.creator-dependency>span{
    color:rgba(184,255,104,.65);
    font:700 .35rem/1 monospace;
    letter-spacing:.07em;
}

.creator-dependency>strong{
    color:#fff;
    font-size:.61rem;
}

.creator-dependency>small{
    max-width:420px;
    color:rgba(255,255,255,.30);
    font-size:.39rem;
    line-height:1.45;
    text-align:right;
}

/* Access tiers */
.creator-tier-grid{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;
}

.creator-tier{
    --tier-accent:91 234 255;
    min-height:205px;
    padding:13px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.065);
    border-radius:22px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--tier-accent)/.065),transparent 42%),
        rgba(255,255,255,.008);
}

.creator-tier-member{--tier-accent:108 141 255}
.creator-tier-supporter{--tier-accent:255 114 183}
.creator-tier-customer{--tier-accent:173 140 255}
.creator-tier-owner{--tier-accent:255 172 104}

.creator-tier b{
    color:rgb(var(--tier-accent)/.60);
    font:750 .34rem/1 monospace;
}

.creator-tier>span{
    display:block;
    margin-top:14px;
    color:rgb(var(--tier-accent)/.70);
    font:700 .31rem/1.3 monospace;
    letter-spacing:.05em;
}

.creator-tier strong{
    display:block;
    margin-top:18px;
    color:#fff;
    font-size:.68rem;
    line-height:1.25;
}

.creator-tier p{
    margin:8px 0 0;
    color:rgba(255,255,255,.31);
    font-size:.4rem;
    line-height:1.5;
}

.creator-tier-owner{
    border-color:rgba(255,172,104,.14);
    background:
        radial-gradient(circle at 0 0,rgba(255,172,104,.09),transparent 42%),
        rgba(255,255,255,.008);
}

/* Safety gate */
.creator-gate-flow{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:7px;
}

.creator-gate-step{
    min-height:188px;
    padding:12px;
    position:relative;
    border:1px solid rgba(255,255,255,.06);
    border-radius:21px;
    background:rgba(255,255,255,.008);
}

.creator-gate-step:not(:last-child)::after{
    content:"→";
    position:absolute;
    z-index:3;
    right:-10px;
    top:50%;
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
    color:rgba(91,234,255,.48);
    background:#09151f;
    font-size:.42rem;
}

.creator-gate-step b{
    color:rgba(91,234,255,.56);
    font:750 .34rem/1 monospace;
}

.creator-gate-step strong{
    display:block;
    margin-top:23px;
    color:#fff;
    font-size:.57rem;
}

.creator-gate-step p{
    margin:8px 0 0;
    color:rgba(255,255,255,.30);
    font-size:.38rem;
    line-height:1.48;
}

.creator-gate-step.is-owner{
    border-color:rgba(184,255,104,.18);
    background:
        radial-gradient(circle at 0 0,rgba(184,255,104,.075),transparent 42%),
        rgba(255,255,255,.008);
}

.creator-gate-step.is-owner strong{
    color:rgba(210,255,162,.95);
}

/* Abstract capture input layer */
.creator-source-grid{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}

.creator-source{
    min-height:96px;
    padding:13px;
    display:flex;
    gap:12px;
    align-items:center;
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;
    background:
        radial-gradient(circle at 0 50%,rgba(91,234,255,.045),transparent 32%),
        rgba(255,255,255,.008);
}

.creator-source b{
    width:34px;
    height:34px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:1px solid rgba(91,234,255,.12);
    border-radius:50%;
    color:rgba(91,234,255,.65);
    background:rgba(91,234,255,.02);
    font:750 .32rem/1 monospace;
}

.creator-source strong{
    color:rgba(255,255,255,.72);
    font-size:.5rem;
    text-transform:uppercase;
    letter-spacing:.035em;
}

.creator-capture-boundary{
    margin-top:8px;
    padding:11px 13px;
    border:1px solid rgba(255,172,104,.11);
    border-radius:17px;
    color:rgba(255,216,177,.52);
    background:rgba(255,172,104,.018);
    font:650 .37rem/1.55 monospace;
}

@media(max-width:1100px){
    .creator-tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .creator-gate-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(max-width:760px){
    .creator-strategy-head,
    .creator-access-head,
    .creator-gate-head,
    .creator-capture-head{
        display:block;
    }

    .creator-strategy-state,
    .creator-capture-head>i{
        display:inline-flex;
        margin-top:10px;
    }

    .creator-split{
        grid-template-columns:1fr;
    }

    .creator-split-card.is-public{
        min-width:0;
    }

    .creator-dependency{
        grid-template-columns:1fr;
    }

    .creator-dependency>small{
        text-align:left;
    }

    .creator-tier-grid,
    .creator-gate-flow,
    .creator-source-grid{
        grid-template-columns:1fr;
    }

    .creator-gate-step::after{
        display:none!important;
    }

    .creator-strategy,
    .creator-access,
    .creator-gate,
    .creator-capture{
        border-radius:23px;
        padding:14px;
    }
}