/* =========================================================
   VAERO ENGINE — SHARED COMPONENT SYSTEM
   Premium Engine Surfaces / Responsive Interaction Layer

   Home UI authority:
   engine-home.css
========================================================= */


/* =========================================================
   COMPONENT TOKENS
========================================================= */

:root{

    --component-radius-xs:10px;
    --component-radius-sm:14px;
    --component-radius-md:18px;
    --component-radius-lg:22px;
    --component-radius-xl:28px;

    --component-surface:
        rgba(255,255,255,.032);

    --component-surface-hover:
        rgba(255,255,255,.052);

    --component-surface-strong:
        rgba(255,255,255,.067);

    --component-border:
        rgba(255,255,255,.075);

    --component-border-hover:
        rgba(230,199,141,.22);

    --component-gold:
        var(--gold-soft);

    --component-gold-glow:
        rgba(214,177,103,.11);

    --component-blue-glow:
        rgba(72,151,217,.11);

    --component-shadow:
        0 18px 50px rgba(0,0,0,.14);

    --component-shadow-hover:
        0 22px 58px rgba(0,0,0,.19);

    --component-inner-highlight:
        inset 0 1px 0 rgba(255,255,255,.035);

    --component-focus:
        0 0 0 3px rgba(230,199,141,.09);

}


/* =========================================================
   SHARED BUTTONS
========================================================= */

.primary-btn,
.secondary-btn{
    position:relative;

    min-width:0;
    min-height:40px;

    padding:0 16px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    border-radius:999px;

    font:inherit;
    font-size:11px;
    font-weight:700;
    line-height:1;

    letter-spacing:.01em;

    white-space:nowrap;

    -webkit-tap-highlight-color:transparent;

    cursor:pointer;

    user-select:none;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        opacity var(--transition);
}

.primary-btn{
    border:
        1px solid
        rgba(243,225,184,.39);

    background:
        linear-gradient(
            115deg,
            #b98943 0%,
            #e5c987 46%,
            #f2dda5 58%,
            #b9873f 100%
        );

    color:#08111c;

    text-shadow:
        0 1px 0
        rgba(255,255,255,.22);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.42),
        inset 0 -1px 0
        rgba(70,42,7,.11),
        0 9px 24px
        rgba(199,157,76,.12);
}

.secondary-btn{
    border:
        1px solid
        var(--component-border);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.038),
            rgba(255,255,255,.018)
        );

    color:rgba(247,248,251,.88);

    box-shadow:
        var(--component-inner-highlight);
}

.primary-btn:hover{
    transform:
        translateY(-1px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.48),
        inset 0 -1px 0
        rgba(70,42,7,.12),
        0 13px 30px
        rgba(199,157,76,.18);
}

.secondary-btn:hover{
    transform:
        translateY(-1px);

    border-color:
        rgba(230,199,141,.19);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.027)
        );

    color:#fff;

    box-shadow:
        var(--component-inner-highlight),
        0 10px 28px
        rgba(0,0,0,.1);
}

.primary-btn:active,
.secondary-btn:active{
    transform:
        translateY(0)
        scale(.985);
}

.primary-btn:focus-visible,
.secondary-btn:focus-visible{
    outline:none;

    box-shadow:
        var(--component-focus);
}

.primary-btn:disabled,
.secondary-btn:disabled{
    opacity:.38;

    cursor:not-allowed;

    pointer-events:none;

    transform:none;

    box-shadow:none;
}


/* =========================================================
   GENERIC CARD / GRID
========================================================= */

.card{
    position:relative;

    min-width:0;

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

    border-radius:
        var(--component-radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.037),
            rgba(255,255,255,.011)
        );

    box-shadow:
        var(--component-inner-highlight);

    isolation:isolate;
}

.card::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    border-radius:inherit;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.022),
            transparent 26%,
            transparent 74%,
            rgba(255,255,255,.008)
        );
}

.grid{
    display:grid;

    min-width:0;
    min-height:0;

    gap:10px;
}

.grid-2{
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
}


/* =========================================================
   COMMON ENGINE PAGE
========================================================= */

.engine-page{
    width:100%;
    max-width:1180px;
    height:100%;

    min-width:0;
    min-height:0;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    color:var(--text);
}


/* =========================================================
   PAGE HEADER
========================================================= */

.engine-page-header{
    flex:0 0 auto;

    min-width:0;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:16px;
}

.engine-page-header > div{
    min-width:0;
    max-width:680px;
}

.engine-page-header h1{
    max-width:100%;

    margin:5px 0 0;

    overflow:hidden;

    color:#f7f8fa;

    font-size:
        clamp(
            28px,
            3vw,
            37px
        );

    font-weight:470;

    line-height:1.02;

    letter-spacing:-.038em;

    text-overflow:ellipsis;
}

.engine-page-header p{
    max-width:590px;

    margin:8px 0 0;

    color:
        rgba(222,226,232,.53);

    font-size:11px;

    line-height:1.5;
}


/* =========================================================
   PAGE EMPTY / ERROR
========================================================= */

.engine-page-empty,
.engine-error-state{
    flex:1 1 auto;

    min-height:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    padding:
        clamp(
            18px,
            3vw,
            34px
        );
}

.engine-page-empty-icon{
    width:46px;
    height:46px;

    margin-bottom:13px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,199,141,.12);

    border-radius:15px;

    background:
        rgba(230,199,141,.035);

    color:var(--gold-soft);

    font-size:23px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}

.engine-page-empty h2,
.engine-error-state h1{
    margin:0;

    color:#f3f4f6;

    font-size:23px;
    font-weight:500;

    letter-spacing:-.025em;
}

.engine-page-empty p,
.engine-error-state p{
    max-width:520px;

    margin:8px 0 17px;

    color:var(--muted);

    font-size:11px;
    line-height:1.55;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.engine-back-btn{
    flex:0 0 auto;

    width:max-content;

    margin:0 0 11px;
    padding:4px 0;

    display:inline-flex;
    align-items:center;

    gap:5px;

    border:0;

    background:transparent;

    color:
        rgba(245,241,233,.52);

    font:inherit;

    font-size:10px;
    font-weight:650;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        color var(--transition),
        opacity var(--transition),
        transform var(--transition);
}

.engine-back-btn:hover{
    color:var(--gold-soft);

    transform:
        translateX(-1px);
}

.engine-back-btn:focus-visible{
    outline:none;

    color:var(--gold-soft);
}


/* =========================================================
   WORLDS
========================================================= */

.worlds-page{
    display:grid;

    grid-template-rows:
        auto
        minmax(0,1fr);

    gap:0;
}

.worlds-grid{
    min-height:0;

    display:grid;

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

    grid-auto-rows:
        minmax(104px,1fr);

    gap:10px;

    overflow:auto;

    overscroll-behavior:contain;

    scrollbar-width:none;
}

.worlds-grid::-webkit-scrollbar{
    display:none;
}

.world-card{
    position:relative;

    min-width:0;
    min-height:96px;

    padding:15px 16px;

    display:flex;
    align-items:center;

    gap:14px;

    overflow:hidden;

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

    border-radius:
        var(--component-radius-md);

    background:
        radial-gradient(
            circle at 7% 46%,
            rgba(64,145,215,.095),
            transparent 31%
        ),
        radial-gradient(
            circle at 94% 0%,
            rgba(218,181,112,.035),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.038),
            rgba(255,255,255,.009)
        );

    color:var(--text);

    text-align:left;

    box-shadow:
        var(--component-inner-highlight);

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.world-card::after{
    content:"";

    position:absolute;

    width:92px;
    height:92px;

    top:-60px;
    right:-50px;

    border-radius:50%;

    background:
        rgba(230,199,141,.035);

    filter:blur(1px);

    pointer-events:none;

    transition:
        transform var(--transition),
        opacity var(--transition);

    opacity:.6;
}

.world-card:hover{
    transform:
        translateY(-2px);

    border-color:
        var(--component-border-hover);

    background:
        radial-gradient(
            circle at 7% 46%,
            rgba(64,145,215,.13),
            transparent 33%
        ),
        radial-gradient(
            circle at 94% 0%,
            rgba(218,181,112,.055),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.049),
            rgba(255,255,255,.014)
        );

    box-shadow:
        var(--component-inner-highlight),
        var(--component-shadow);
}

.world-card:hover::after{
    transform:
        scale(1.12);

    opacity:1;
}

.world-card:focus-visible{
    outline:none;

    border-color:
        rgba(230,199,141,.28);

    box-shadow:
        var(--component-focus);
}

.world-card-orbit{
    position:relative;

    width:60px;
    height:60px;

    flex:0 0 60px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(105,176,234,.16);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(55,128,188,.025),
            transparent 66%
        );

    box-shadow:
        inset 0 0 26px
        rgba(45,122,184,.025);
}

.world-card-orbit::before{
    content:"";

    position:absolute;

    inset:8px;

    border:
        1px solid
        rgba(230,190,125,.18);

    border-radius:50%;

    transform:
        rotate(-17deg);
}

.world-card-orbit::after{
    content:"";

    position:absolute;

    width:4px;
    height:4px;

    top:7px;
    right:15px;

    border-radius:50%;

    background:
        rgba(230,199,141,.78);

    box-shadow:
        0 0 9px
        rgba(230,199,141,.32);
}

.world-card-orbit span{
    width:27px;
    height:27px;

    border:
        1px solid
        rgba(189,221,255,.38);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 33% 26%,
            #397baa 0%,
            #1d527b 24%,
            #0a2135 54%,
            #04101a 74%
        );

    box-shadow:
        0 0 18px
        rgba(89,164,224,.19),
        inset -7px -7px 12px
        rgba(0,0,0,.42);
}

.world-card-content{
    min-width:0;

    flex:1;

    display:flex;
    flex-direction:column;
}

.world-card-content small{
    margin-bottom:5px;

    color:
        rgba(230,199,141,.78);

    font-size:7px;
    font-weight:780;

    letter-spacing:.145em;

    text-transform:uppercase;
}

.world-card-content strong{
    max-width:100%;

    overflow:hidden;

    color:#f2f4f6;

    font-size:15px;
    font-weight:560;

    letter-spacing:-.015em;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.world-card-content > span{
    max-width:100%;

    margin-top:5px;

    overflow:hidden;

    color:var(--muted);

    font-size:9px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.world-card-arrow{
    flex:0 0 auto;

    margin-left:auto;

    color:
        rgba(230,199,141,.62);

    font-size:15px;

    transition:
        transform var(--transition),
        color var(--transition);
}

.world-card:hover .world-card-arrow{
    transform:
        translateX(2px);

    color:var(--gold-soft);
}


/* =========================================================
   CREATE WORLD
========================================================= */

.create-page{
    display:grid;

    grid-template-rows:
        auto
        minmax(0,1fr);

    gap:0;
}

.create-layout{
    min-height:0;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(270px,34%);

    gap:12px;

    overflow:hidden;
}

.create-world-form,
.entity-create-form{
    min-width:0;
    min-height:0;

    padding:20px;

    overflow:auto;

    overscroll-behavior:contain;

    scrollbar-width:none;
}

.create-world-form::-webkit-scrollbar,
.entity-create-form::-webkit-scrollbar{
    display:none;
}

.engine-field{
    display:flex;
    flex-direction:column;

    gap:7px;

    margin-top:12px;
}

.engine-field:first-of-type{
    margin-top:0;
}

.engine-field > span{
    color:
        rgba(245,241,233,.63);

    font-size:9px;
    font-weight:680;

    letter-spacing:.015em;
}

.engine-field input,
.engine-field textarea,
.engine-field select{
    width:100%;
    max-width:100%;

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

    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.031),
            rgba(255,255,255,.019)
        );

    color:var(--text);

    font:inherit;

    outline:none;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.015);

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.engine-field input{
    height:43px;
    min-height:43px;

    padding:0 13px;
}

.engine-field textarea{
    height:84px;
    min-height:84px;

    padding:11px 13px;

    line-height:1.45;

    resize:none;
}

.engine-field select{
    height:43px;

    padding:0 12px;

    appearance:none;
}

.engine-field input::placeholder,
.engine-field textarea::placeholder{
    color:
        rgba(218,222,229,.29);
}

.engine-field input:hover,
.engine-field textarea:hover,
.engine-field select:hover{
    border-color:
        rgba(255,255,255,.105);

    background:
        rgba(255,255,255,.035);
}

.engine-field input:focus,
.engine-field textarea:focus,
.engine-field select:focus{
    border-color:
        rgba(230,199,141,.3);

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

    box-shadow:
        var(--component-focus),
        inset 0 1px 0
        rgba(255,255,255,.02);
}

.create-submit{
    width:100%;

    margin-top:14px;
}

.create-preview{
    position:relative;

    min-width:0;
    min-height:0;

    padding:20px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    text-align:center;
}

.create-preview::before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    left:50%;
    top:48%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(61,144,209,.095),
            transparent 68%
        );

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

    pointer-events:none;
}

.create-preview > *{
    position:relative;

    z-index:1;
}

.create-preview-orbit{
    position:relative;

    width:98px;
    height:98px;

    margin:0 auto 15px;

    flex:0 0 98px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,190,125,.14);

    border-radius:50%;

    box-shadow:
        0 0 34px
        rgba(85,163,234,.05);
}

.create-preview-orbit::before{
    content:"";

    position:absolute;

    inset:13px;

    border:
        1px solid
        rgba(105,176,234,.16);

    border-radius:50%;
}

.create-preview-orbit::after{
    content:"";

    position:absolute;

    width:5px;
    height:5px;

    left:16px;
    top:22px;

    border-radius:50%;

    background:
        rgba(230,199,141,.7);

    box-shadow:
        0 0 10px
        rgba(230,199,141,.26);
}

.create-preview-orbit span{
    width:43px;
    height:43px;

    border:
        1px solid
        rgba(200,225,250,.4);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 32% 25%,
            #3a7bac,
            #19466c 28%,
            #0b2134 57%,
            #06131e 75%
        );

    box-shadow:
        0 0 24px
        rgba(89,164,224,.2),
        inset -9px -9px 16px
        rgba(0,0,0,.45);
}

.create-preview h2{
    margin:0;

    color:#f2f4f6;

    font-size:19px;
    font-weight:510;

    letter-spacing:-.02em;
}

.create-preview p{
    max-width:300px;

    margin:8px 0 0;

    color:var(--muted);

    font-size:9px;
    line-height:1.5;
}

.create-preview small{
    margin-top:13px;

    color:
        rgba(230,199,141,.75);

    font-size:8px;
}


/* =========================================================
   WORLD PAGE
========================================================= */

.world-page{
    display:grid;

    grid-template-rows:
        auto
        minmax(154px,.92fr)
        minmax(112px,1fr);

    gap:10px;
}

.world-page > .engine-back-btn{
    margin-bottom:0;
}

.world-hero{
    position:relative;

    min-width:0;
    min-height:0;

    margin:0;
    padding:20px 22px;

    overflow:hidden;

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

    border-radius:
        var(--component-radius-lg);

    background:
        radial-gradient(
            circle at 89% 71%,
            rgba(49,126,190,.16),
            transparent 36%
        ),
        radial-gradient(
            circle at 12% 0%,
            rgba(230,199,141,.035),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.008)
        );

    box-shadow:
        var(--component-inner-highlight);
}

.world-hero::before{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(4,10,17,.08),
            transparent 60%
        );
}

.world-hero-copy{
    position:relative;

    z-index:2;

    max-width:610px;
}

.world-badge{
    display:inline-flex;
    align-items:center;

    min-height:22px;

    padding:0 9px;

    border:
        1px solid
        rgba(230,215,176,.14);

    border-radius:999px;

    background:
        rgba(230,215,176,.043);

    color:
        rgba(234,206,152,.88);

    font-size:7px;
    font-weight:800;

    letter-spacing:.15em;
}

.world-title{
    max-width:72%;

    margin:9px 0 0;

    overflow:hidden;

    color:#f7f8fa;

    font-size:
        clamp(
            27px,
            3vw,
            36px
        );

    font-weight:465;

    line-height:1;

    letter-spacing:-.04em;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.world-description{
    max-width:500px;

    margin:8px 0 0;

    display:-webkit-box;

    overflow:hidden;

    color:
        rgba(218,223,230,.5);

    font-size:9px;
    line-height:1.45;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.world-stats{
    width:min(420px,64%);

    margin-top:14px;

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:7px;
}

.world-stat{
    min-width:0;

    padding:9px 10px;

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

    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.026),
            rgba(255,255,255,.014)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.015);
}

.world-stat strong{
    display:block;

    overflow:hidden;

    color:#f1f3f5;

    font-size:13px;
    font-weight:650;

    text-overflow:ellipsis;
}

.world-stat span{
    display:block;

    margin-top:3px;

    overflow:hidden;

    color:var(--muted);

    font-size:7px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.world-hero-planet{
    position:absolute;

    right:-54px;
    bottom:-102px;

    width:258px;
    height:258px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 29% 20%,
            rgba(176,219,255,.88),
            rgba(55,128,187,.9) 9%,
            rgba(24,73,111,.98) 26%,
            rgba(7,31,51,.99) 47%,
            #02080e 72%
        );

    box-shadow:
        -17px -14px 48px
        rgba(93,178,255,.19),
        -4px -5px 17px
        rgba(230,199,141,.055),
        inset -48px -48px 66px
        rgba(0,0,0,.65);

    pointer-events:none;
}

.world-hero-planet::before{
    content:"";

    position:absolute;

    inset:-14px 21px 67px -18px;

    border:
        1px solid
        rgba(188,219,246,.11);

    border-radius:50%;

    transform:
        rotate(-18deg);

    opacity:.75;
}


/* =========================================================
   WORLD ENTITIES AREA
========================================================= */

.world-entities{
    min-height:0;

    display:grid;

    grid-template-rows:
        auto
        minmax(0,1fr);

    overflow:hidden;
}

.world-section-heading{
    flex:0 0 auto;

    margin-bottom:8px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:12px;
}

.world-section-heading .engine-section-label{
    margin-bottom:3px;
}

.world-section-heading h2{
    margin:0;

    color:#eef0f3;

    font-size:18px;
    font-weight:510;

    letter-spacing:-.018em;
}

.world-entity-grid{
    min-height:0;

    display:grid;

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

    grid-auto-rows:
        minmax(66px,1fr);

    gap:7px;

    overflow:auto;

    overscroll-behavior:contain;

    scrollbar-width:none;
}

.world-entity-grid::-webkit-scrollbar{
    display:none;
}

.world-entity-btn{
    min-width:0;
    min-height:62px;

    padding:10px 12px;

    display:flex;
    align-items:center;

    gap:10px;

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

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.032),
            rgba(255,255,255,.009)
        );

    color:var(--text);

    text-align:left;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.018);

    cursor:pointer;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.world-entity-btn:hover{
    transform:
        translateY(-1px);

    border-color:
        rgba(230,199,141,.18);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.047),
            rgba(255,255,255,.015)
        );

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.1);
}

.world-entity-btn:focus-visible{
    outline:none;

    box-shadow:
        var(--component-focus);
}

.world-entity-symbol{
    width:36px;
    height:36px;

    flex:0 0 36px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,199,141,.14);

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            rgba(230,199,141,.055),
            rgba(88,157,215,.025)
        );

    color:var(--gold-soft);

    font-size:12px;
    font-weight:750;
}

.world-entity-content{
    min-width:0;

    flex:1;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.world-entity-type{
    max-width:100%;

    overflow:hidden;

    color:
        rgba(201,206,214,.44);

    font-size:7px;

    letter-spacing:.1em;

    text-overflow:ellipsis;
    text-transform:uppercase;
    white-space:nowrap;
}

.world-entity-name{
    max-width:100%;

    margin-top:3px;

    overflow:hidden;

    color:#eef1f4;

    font-size:11px;
    font-weight:650;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.world-entity-arrow{
    flex:0 0 auto;

    color:
        rgba(230,199,141,.43);

    font-size:13px;

    transition:
        transform var(--transition),
        opacity var(--transition);

    opacity:.65;
}

.world-entity-btn:hover .world-entity-arrow{
    transform:
        translateX(2px);

    opacity:1;
}

.world-empty{
    min-height:0;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:16px;

    text-align:center;
}

.world-empty > span{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,199,141,.11);

    border-radius:14px;

    background:
        rgba(230,199,141,.03);

    color:var(--gold-soft);

    font-size:20px;
}

.world-empty h3{
    margin:9px 0 0;

    color:#eff1f4;

    font-size:16px;
    font-weight:520;
}

.world-empty p{
    max-width:320px;

    margin:6px 0 12px;

    color:var(--muted);

    font-size:9px;

    line-height:1.45;
}


/* =========================================================
   ENTITY CREATE
========================================================= */

.entity-create-page{
    display:grid;

    grid-template-rows:
        auto
        auto
        minmax(0,1fr);

    gap:0;
}

.entity-create-page > .engine-back-btn{
    margin-bottom:8px;
}

.entity-type-grid{
    min-height:0;

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    grid-template-rows:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:8px;

    overflow:auto;

    scrollbar-width:none;
}

.entity-type-grid::-webkit-scrollbar{
    display:none;
}

.entity-type-card{
    position:relative;

    min-width:0;
    min-height:74px;

    padding:11px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:7px;

    overflow:hidden;

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

    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.032),
            rgba(255,255,255,.009)
        );

    color:var(--text);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.018);

    cursor:pointer;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.entity-type-card::before{
    content:"";

    position:absolute;

    width:56px;
    height:56px;

    top:-36px;
    right:-32px;

    border-radius:50%;

    background:
        rgba(230,199,141,.04);

    pointer-events:none;
}

.entity-type-card:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(230,199,141,.2);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.047),
            rgba(255,255,255,.014)
        );

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.1);
}

.entity-type-card:focus-visible{
    outline:none;

    box-shadow:
        var(--component-focus);
}

.entity-type-card > span{
    color:
        rgba(232,202,144,.88);

    font-size:23px;

    line-height:1;
}

.entity-type-card strong{
    max-width:100%;

    overflow:hidden;

    color:#eef0f3;

    font-size:10px;
    font-weight:650;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.entity-create-form{
    width:100%;
    max-width:700px;

    align-self:start;
}

.entity-create-actions{
    margin-top:13px;

    display:flex;
    justify-content:flex-end;

    gap:8px;
}


/* =========================================================
   ENTITY PAGE
========================================================= */

.entity-page{
    display:grid;

    grid-template-rows:
        auto
        auto
        minmax(0,1fr);

    gap:9px;
}

.entity-page > .engine-back-btn{
    margin-bottom:0;
}

.entity-header{
    position:relative;

    min-height:0;

    padding:16px 18px;

    display:flex;
    align-items:center;

    gap:14px;

    overflow:hidden;
}

.entity-header::after{
    content:"";

    position:absolute;

    width:130px;
    height:130px;

    right:-68px;
    top:-68px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(64,142,205,.055),
            transparent 68%
        );

    pointer-events:none;
}

.entity-header-symbol{
    position:relative;

    z-index:1;

    width:54px;
    height:54px;

    flex:0 0 54px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,199,141,.16);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(230,199,141,.074),
            rgba(89,164,224,.036)
        );

    color:
        rgba(235,205,146,.9);

    font-size:18px;
    font-weight:750;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}

.entity-header > div{
    position:relative;

    z-index:1;

    min-width:0;
}

.entity-header h1{
    max-width:100%;

    margin:3px 0 0;

    overflow:hidden;

    color:#f4f5f7;

    font-size:26px;
    font-weight:490;

    letter-spacing:-.032em;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.entity-header p{
    max-width:650px;

    margin:5px 0 0;

    overflow:hidden;

    color:
        rgba(215,220,227,.49);

    font-size:9px;
    line-height:1.45;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.entity-app-grid{
    min-height:0;

    margin:0;

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    grid-auto-rows:
        minmax(86px,1fr);

    gap:8px;

    overflow:auto;

    overscroll-behavior:contain;

    scrollbar-width:none;
}

.entity-app-grid::-webkit-scrollbar{
    display:none;
}

.entity-app-link{
    position:relative;

    min-width:0;
    min-height:82px;

    padding:14px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    overflow:hidden;

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

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.032),
            rgba(255,255,255,.009)
        );

    color:var(--text);

    text-align:left;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.017);

    cursor:pointer;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.entity-app-link::after{
    content:"";

    position:absolute;

    width:70px;
    height:70px;

    top:-45px;
    right:-40px;

    border-radius:50%;

    background:
        rgba(230,199,141,.026);

    pointer-events:none;
}

.entity-app-link:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(230,199,141,.19);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.048),
            rgba(255,255,255,.014)
        );

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.105);
}

.entity-app-link:focus-visible{
    outline:none;

    box-shadow:
        var(--component-focus);
}

.entity-app-link > span{
    margin-bottom:9px;

    color:
        rgba(234,203,143,.86);

    font-size:20px;

    line-height:1;
}

.entity-app-link strong{
    max-width:100%;

    overflow:hidden;

    color:#eef0f3;

    font-size:12px;
    font-weight:650;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.entity-app-link small{
    max-width:100%;

    margin-top:5px;

    display:-webkit-box;

    overflow:hidden;

    color:
        rgba(205,211,219,.44);

    font-size:8px;
    line-height:1.38;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}


/* =========================================================
   UI KIT — SHARED APP HEADER
========================================================= */

.ui-app-header{
    flex:0 0 auto;

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:9px;
}

.ui-app-back{
    width:max-content;
}

.ui-app-header-card{
    min-width:0;

    padding:16px 18px !important;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:16px;
}

.ui-app-header-copy{
    min-width:0;
}

.ui-app-header-copy h2{
    margin:4px 0 0;

    overflow:hidden;

    color:#f4f5f7;

    font-size:23px;
    font-weight:500;

    letter-spacing:-.03em;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.ui-app-header-icon{
    width:46px;
    height:46px;

    flex:0 0 46px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,199,141,.12);

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(230,199,141,.055),
            rgba(79,151,211,.025)
        );

    color:var(--gold-soft);

    font-size:19px;
}


/* =========================================================
   UI KIT — INFO / IDENTITY / STATS
========================================================= */

.ui-info-card,
.ui-identity-card,
.ui-stats-card,
.ui-empty-state,
.ui-brain-confirmation{
    padding:16px !important;
}

.ui-info-card p,
.ui-card-copy{
    margin:7px 0 0;

    color:var(--muted);

    font-size:10px;
    line-height:1.5;
}

.ui-identity-id{
    margin:6px 0 0;

    overflow:hidden;

    color:#f3f5f7;

    font-size:18px;
    font-weight:550;

    letter-spacing:-.025em;

    text-overflow:ellipsis;
}

.ui-status-text{
    margin-top:13px;

    font-size:9px;
    font-weight:700;
}

.ui-status-text.is-success{
    color:var(--green);
}

.ui-status-text.is-pending{
    color:
        var(
            --warning,
            #d6a84c
        );
}

.ui-stats-card h3{
    margin:5px 0 0;

    overflow:hidden;

    color:#f3f5f7;

    font-size:21px;
    font-weight:560;

    letter-spacing:-.025em;

    text-overflow:ellipsis;
}


/* =========================================================
   UI KIT — LAUNCHER
========================================================= */

.ui-launcher-card{
    min-width:0;
    min-height:92px;

    padding:13px !important;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    border:
        1px solid
        var(--component-border) !important;

    color:var(--text);

    text-align:left;

    cursor:pointer;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.ui-launcher-card:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(230,199,141,.18) !important;

    background:
        rgba(255,255,255,.046) !important;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.1);
}

.ui-launcher-card:disabled{
    opacity:.4;

    pointer-events:none;
}

.ui-launcher-icon{
    margin-bottom:8px;

    color:var(--gold-soft);

    font-size:19px;
}

.ui-launcher-title{
    max-width:100%;

    overflow:hidden;

    color:#eff1f4;

    font-size:11px;
    font-weight:650;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.ui-launcher-subtitle{
    max-width:100%;

    margin-top:4px;

    overflow:hidden;

    color:var(--muted);

    font-size:8px;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   UI KIT — APPLICATION CARD
========================================================= */

.ui-application-card{
    min-width:0;

    padding:15px !important;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    overflow:hidden;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.ui-application-card:hover{
    border-color:
        rgba(230,199,141,.14) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.042),
            rgba(255,255,255,.012)
        ) !important;
}

.ui-application-card.has-update{
    border-color:
        rgba(214,168,76,.16) !important;
}

.ui-application-main{
    min-width:0;

    flex:1;

    display:flex;
    align-items:center;

    gap:12px;
}

.ui-application-icon{
    width:46px;
    height:46px;

    flex:0 0 46px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,199,141,.11);

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(230,199,141,.055),
            rgba(66,142,204,.025)
        );

    color:var(--gold-soft);

    font-size:18px;
}

.ui-application-copy{
    min-width:0;

    flex:1;
}

.ui-application-title-row{
    min-width:0;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:6px;
}

.ui-application-title-row h3{
    max-width:100%;

    margin:0;

    overflow:hidden;

    color:#f1f3f5;

    font-size:12px;
    font-weight:650;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.ui-application-copy > p{
    max-width:600px;

    margin:5px 0 0;

    display:-webkit-box;

    overflow:hidden;

    color:var(--muted);

    font-size:8px;

    line-height:1.4;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.ui-application-meta{
    margin-top:6px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:5px 10px;

    color:
        rgba(201,207,215,.39);

    font-size:7px;
}

.ui-application-actions{
    flex:0 0 auto;

    display:flex;
    align-items:center;

    gap:10px;
}

.ui-application-action{
    min-width:76px;
}


/* =========================================================
   UI KIT — BADGES
========================================================= */

.ui-status-badge{
    min-height:20px;

    padding:0 7px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

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

    border-radius:999px;

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

    color:
        rgba(236,239,242,.68);

    font-size:7px;
    font-weight:720;

    line-height:1;

    white-space:nowrap;
}

.ui-status-badge.is-success{
    border-color:
        rgba(87,185,129,.15);

    background:
        rgba(87,185,129,.055);

    color:
        var(
            --green,
            #6fc993
        );
}

.ui-status-badge.is-warning,
.ui-status-badge.is-pending{
    border-color:
        rgba(214,168,76,.16);

    background:
        rgba(214,168,76,.055);

    color:
        var(
            --warning,
            #d6a84c
        );
}

.ui-status-badge.is-danger{
    border-color:
        rgba(211,95,95,.16);

    background:
        rgba(211,95,95,.055);

    color:
        var(
            --danger,
            #d35f5f
        );
}

.ui-status-badge.is-info{
    border-color:
        rgba(124,167,216,.15);

    background:
        rgba(124,167,216,.05);

    color:
        var(
            --info,
            #7ca7d8
        );
}

.ui-status-badge.is-trusted{
    border-color:
        rgba(230,199,141,.17);

    background:
        rgba(230,199,141,.05);

    color:var(--gold-soft);
}


/* =========================================================
   UI KIT — PRICING
========================================================= */

.ui-price-label{
    color:
        rgba(236,239,242,.64);

    font-size:9px;
    font-weight:650;

    white-space:nowrap;
}


/* =========================================================
   UI KIT — PERMISSIONS
========================================================= */

.ui-permission-list{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:6px;
}

.ui-permission-chip{
    min-height:22px;

    padding:0 8px;

    display:inline-flex;
    align-items:center;

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

    border-radius:999px;

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

    color:
        rgba(230,234,239,.61);

    font-size:7px;
}

.ui-permission-empty{
    color:var(--muted);

    font-size:9px;
}

.ui-permission-row{
    min-width:0;

    padding:10px 0;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

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

.ui-permission-row:last-child{
    border-bottom:0;
}

.ui-permission-row-copy{
    min-width:0;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:7px;
}

.ui-permission-row-copy strong{
    max-width:100%;

    overflow:hidden;

    color:#eef1f4;

    font-size:10px;
    font-weight:620;

    text-overflow:ellipsis;
}


/* =========================================================
   UI KIT — INFO ROW
========================================================= */

.ui-info-row{
    min-width:0;

    padding:9px 0;

    display:grid;

    grid-template-columns:
        minmax(100px,28%)
        minmax(0,1fr);

    gap:12px;

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

.ui-info-row:last-child{
    border-bottom:0;
}

.ui-info-row b{
    color:
        rgba(238,241,244,.66);

    font-size:9px;
    font-weight:650;
}

.ui-info-row p{
    min-width:0;

    margin:0;

    overflow:hidden;

    color:var(--muted);

    font-size:9px;

    text-overflow:ellipsis;
}


/* =========================================================
   UI KIT — EMPTY STATE
========================================================= */

.ui-empty-state{
    min-height:180px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}

.ui-empty-icon{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,199,141,.11);

    border-radius:15px;

    background:
        rgba(230,199,141,.032);

    color:var(--gold-soft);

    font-size:20px;
}

.ui-empty-state h3{
    margin:11px 0 0;

    color:#eef1f4;

    font-size:16px;
    font-weight:540;
}

.ui-empty-state p{
    max-width:420px;

    margin:6px 0 13px;

    color:var(--muted);

    font-size:9px;
    line-height:1.5;
}


/* =========================================================
   BRAIN TRIGGER
========================================================= */

.ui-brain-trigger{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,199,141,.17);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(230,199,141,.12),
            rgba(255,255,255,.028) 55%,
            rgba(255,255,255,.014)
        );

    color:var(--gold-soft);

    font:inherit;

    font-size:16px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.045),
        0 10px 30px
        rgba(0,0,0,.16);

    cursor:pointer;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.ui-brain-trigger:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(230,199,141,.28);

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(230,199,141,.17),
            rgba(255,255,255,.038) 55%,
            rgba(255,255,255,.018)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.055),
        0 14px 34px
        rgba(0,0,0,.2);
}

.ui-brain-trigger:active{
    transform:
        scale(.96);
}

.ui-brain-trigger:focus-visible{
    outline:none;

    box-shadow:
        var(--component-focus);
}


/* =========================================================
   BRAIN CONFIRMATION
========================================================= */

.ui-brain-confirmation{
    border-color:
        rgba(214,168,76,.15) !important;

    background:
        linear-gradient(
            145deg,
            rgba(214,168,76,.045),
            rgba(255,255,255,.012)
        ) !important;
}

.ui-brain-confirmation-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:12px;
}

.ui-brain-confirmation-head h3{
    margin:4px 0 0;

    color:#f0f2f4;

    font-size:14px;
    font-weight:560;
}

.ui-brain-confirmation-action{
    margin-top:10px;

    padding:8px 10px;

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

    border-radius:10px;

    background:
        rgba(0,0,0,.11);

    color:
        rgba(238,241,244,.67);

    font-size:8px;

    overflow-wrap:anywhere;
}

.ui-brain-confirmation-expiry{
    margin-top:8px;

    color:
        rgba(214,168,76,.68);

    font-size:7px;
}

.ui-brain-confirmation-buttons{
    margin-top:12px;

    display:flex;
    justify-content:flex-end;

    gap:7px;
}


/* =========================================================
   BRAIN MESSAGE
========================================================= */

.ui-brain-message{
    max-width:min(82%,580px);

    padding:9px 11px;

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

    border-radius:13px;

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

    color:
        rgba(240,242,245,.78);

    font-size:9px;

    line-height:1.5;
}

.ui-brain-message.is-user{
    margin-left:auto;

    border-color:
        rgba(230,199,141,.12);

    background:
        rgba(230,199,141,.045);
}

.ui-brain-message.is-brain{
    margin-right:auto;
}

.ui-brain-message.is-system{
    max-width:100%;

    margin-inline:auto;

    padding:5px 8px;

    border-color:transparent;

    background:transparent;

    color:var(--muted);

    font-size:7px;
}

.ui-brain-message-meta{
    margin-top:5px;

    color:
        rgba(207,213,221,.36);

    font-size:7px;
}


/* =========================================================
   INTERACTION CONSISTENCY
========================================================= */

button,
input,
textarea,
select{
    font-family:inherit;
}

button{
    -webkit-tap-highlight-color:transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:none;
}

::selection{
    background:
        rgba(230,199,141,.22);

    color:#fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

    .engine-page{
        max-width:100%;
    }


    .engine-page-header{
        margin-bottom:13px;
    }


    .engine-page-header h1{
        font-size:30px;
    }


    .world-card-orbit{
        width:54px;
        height:54px;

        flex-basis:54px;
    }


    .create-layout{
        grid-template-columns:
            minmax(0,1fr)
            minmax(220px,32%);
    }


    .world-title{
        font-size:28px;
    }


    .world-hero-planet{
        right:-64px;
    }


    .entity-app-grid{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width:600px){

    .primary-btn,
    .secondary-btn{
        min-height:36px;

        padding:0 12px;

        font-size:9px;
    }


    .grid-2{
        grid-template-columns:1fr;
    }


    .engine-page-header{
        align-items:flex-start;

        gap:10px;

        margin-bottom:10px;
    }


    .engine-page-header h1{
        margin-top:3px;

        font-size:23px;

        letter-spacing:-.034em;
    }


    .engine-page-header p{
        max-width:330px;

        margin-top:5px;

        display:-webkit-box;

        overflow:hidden;

        font-size:8px;
        line-height:1.4;

        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }


    .engine-page-header > .primary-btn{
        flex:0 0 auto;

        min-height:34px;

        padding-inline:11px;

        font-size:8px;
    }


    .engine-back-btn{
        min-height:26px;

        margin-bottom:7px;

        font-size:8px;
    }


    /* WORLDS */

    .worlds-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        grid-auto-rows:
            minmax(82px,1fr);

        gap:6px;
    }


    .world-card{
        min-height:78px;

        padding:10px;

        gap:8px;

        border-radius:13px;
    }


    .world-card-orbit{
        width:40px;
        height:40px;

        flex-basis:40px;
    }


    .world-card-orbit::before{
        inset:5px;
    }


    .world-card-orbit::after{
        width:3px;
        height:3px;

        top:5px;
        right:10px;
    }


    .world-card-orbit span{
        width:18px;
        height:18px;
    }


    .world-card-content small{
        margin-bottom:2px;

        font-size:5px;
    }


    .world-card-content strong{
        font-size:10px;
    }


    .world-card-content > span{
        margin-top:3px;

        font-size:6px;
    }


    .world-card-arrow{
        display:none;
    }


    /* CREATE */

    .create-layout{
        grid-template-columns:
            minmax(0,1fr)
            116px;

        gap:6px;
    }


    .create-world-form,
    .entity-create-form{
        padding:12px;
    }


    .engine-field{
        gap:5px;

        margin-top:8px;
    }


    .engine-field > span{
        font-size:7px;
    }


    .engine-field input,
    .engine-field select{
        height:36px;
        min-height:36px;

        padding-inline:10px;

        border-radius:9px;

        font-size:10px;
    }


    .engine-field textarea{
        height:62px;
        min-height:62px;

        padding:8px 10px;

        border-radius:9px;

        font-size:10px;

        line-height:1.35;
    }


    .create-submit{
        margin-top:9px;
    }


    .create-preview{
        padding:9px;

        border-radius:13px;
    }


    .create-preview .engine-section-label{
        font-size:5px;
    }


    .create-preview-orbit{
        width:58px;
        height:58px;

        flex-basis:58px;

        margin-bottom:7px;
    }


    .create-preview-orbit::before{
        inset:8px;
    }


    .create-preview-orbit::after{
        width:3px;
        height:3px;

        left:9px;
        top:13px;
    }


    .create-preview-orbit span{
        width:25px;
        height:25px;
    }


    .create-preview h2{
        font-size:11px;
    }


    .create-preview p{
        margin-top:4px;

        font-size:6px;

        line-height:1.35;
    }


    .create-preview small{
        margin-top:6px;

        font-size:6px;
    }


    /* WORLD */

    .world-page{
        grid-template-rows:
            auto
            minmax(122px,.9fr)
            minmax(102px,1fr);

        gap:6px;
    }


    .world-hero{
        padding:13px;

        border-radius:15px;
    }


    .world-badge{
        min-height:18px;

        padding-inline:6px;

        font-size:5px;
    }


    .world-title{
        max-width:66%;

        margin-top:6px;

        font-size:20px;
    }


    .world-description{
        max-width:61%;

        margin-top:5px;

        font-size:6px;
        line-height:1.35;
    }


    .world-stats{
        width:61%;

        margin-top:8px;

        gap:4px;
    }


    .world-stat{
        padding:5px 6px;

        border-radius:8px;
    }


    .world-stat strong{
        font-size:9px;
    }


    .world-stat span{
        font-size:5px;
    }


    .world-hero-planet{
        right:-49px;
        bottom:-57px;

        width:158px;
        height:158px;
    }


    .world-section-heading{
        margin-bottom:5px;
    }


    .world-section-heading h2{
        font-size:12px;
    }


    .world-section-heading .secondary-btn{
        min-height:30px;

        font-size:7px;
    }


    .world-entity-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        grid-auto-rows:
            minmax(50px,1fr);

        gap:5px;
    }


    .world-entity-btn{
        min-height:48px;

        padding:7px;

        gap:6px;

        border-radius:10px;
    }


    .world-entity-symbol{
        width:28px;
        height:28px;

        flex-basis:28px;

        border-radius:8px;

        font-size:9px;
    }


    .world-entity-type{
        font-size:5px;
    }


    .world-entity-name{
        margin-top:2px;

        font-size:8px;
    }


    .world-entity-arrow{
        display:none;
    }


    /* ENTITY CREATE */

    .entity-type-grid{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

        grid-template-rows:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:5px;
    }


    .entity-type-card{
        min-height:58px;

        padding:6px;

        gap:4px;

        border-radius:10px;
    }


    .entity-type-card > span{
        font-size:16px;
    }


    .entity-type-card strong{
        font-size:7px;
    }


    .entity-create-form{
        max-width:none;
    }


    .entity-create-actions{
        margin-top:9px;

        gap:5px;
    }


    /* ENTITY */

    .entity-page{
        gap:6px;
    }


    .entity-header{
        padding:10px 11px;

        gap:9px;

        border-radius:12px;
    }


    .entity-header-symbol{
        width:39px;
        height:39px;

        flex-basis:39px;

        border-radius:11px;

        font-size:13px;
    }


    .entity-header h1{
        font-size:17px;
    }


    .entity-header p{
        margin-top:3px;

        font-size:6px;
    }


    .entity-app-grid{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

        grid-auto-rows:
            minmax(60px,1fr);

        gap:5px;
    }


    .entity-app-link{
        min-height:58px;

        align-items:center;

        padding:8px 4px;

        border-radius:11px;

        text-align:center;
    }


    .entity-app-link > span{
        margin-bottom:5px;

        font-size:16px;
    }


    .entity-app-link strong{
        font-size:7px;
    }


    .entity-app-link small{
        display:none;
    }


    /* UI KIT */

    .ui-app-header{
        gap:6px;
    }


    .ui-app-header-card{
        padding:10px 11px !important;

        border-radius:12px !important;
    }


    .ui-app-header-copy h2{
        font-size:16px;
    }


    .ui-app-header-icon{
        width:36px;
        height:36px;

        flex-basis:36px;

        border-radius:10px;

        font-size:14px;
    }


    .ui-application-card{
        padding:10px !important;

        gap:8px;
    }


    .ui-application-main{
        gap:8px;
    }


    .ui-application-icon{
        width:36px;
        height:36px;

        flex-basis:36px;

        border-radius:10px;

        font-size:14px;
    }


    .ui-application-title-row{
        gap:4px;
    }


    .ui-application-title-row h3{
        font-size:9px;
    }


    .ui-application-copy > p{
        margin-top:3px;

        font-size:6px;

        -webkit-line-clamp:1;
    }


    .ui-application-meta{
        margin-top:4px;

        font-size:5px;
    }


    .ui-application-actions{
        gap:5px;
    }


    .ui-application-action{
        min-width:58px;

        min-height:30px;

        padding-inline:8px;

        font-size:7px;
    }


    .ui-price-label{
        font-size:6px;
    }


    .ui-status-badge{
        min-height:17px;

        padding-inline:5px;

        font-size:5px;
    }


    .ui-permission-row{
        padding:7px 0;

        gap:7px;
    }


    .ui-info-row{
        grid-template-columns:
            minmax(70px,30%)
            minmax(0,1fr);

        gap:8px;

        padding:7px 0;
    }


    .ui-info-row b,
    .ui-info-row p{
        font-size:7px;
    }


    .ui-empty-state{
        min-height:130px;

        padding:12px !important;
    }


    .ui-empty-icon{
        width:36px;
        height:36px;

        border-radius:11px;

        font-size:16px;
    }


    .ui-empty-state h3{
        margin-top:8px;

        font-size:12px;
    }


    .ui-empty-state p{
        margin:4px 0 9px;

        font-size:7px;
    }


    .ui-brain-trigger{
        width:40px;
        height:40px;

        font-size:14px;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width:390px){

    .engine-page-header h1{
        font-size:21px;
    }


    .create-layout{
        grid-template-columns:
            minmax(0,1fr)
            98px;
    }


    .world-card-orbit{
        width:36px;
        height:36px;

        flex-basis:36px;
    }


    .world-card-content strong{
        font-size:9px;
    }


    .entity-type-card > span{
        font-size:14px;
    }


    .ui-application-icon{
        width:32px;
        height:32px;

        flex-basis:32px;
    }

}


/* =========================================================
   SHORT HEIGHT
========================================================= */

@media (max-height:720px){

    .engine-page-header{
        margin-bottom:8px;
    }


    .engine-page-header h1{
        font-size:24px;
    }


    .engine-page-header p{
        margin-top:3px;

        font-size:8px;

        line-height:1.35;
    }


    .world-card{
        padding-top:9px;
        padding-bottom:9px;
    }


    .world-hero{
        padding-top:11px;
        padding-bottom:11px;
    }


    .world-description{
        line-height:1.3;
    }


    .entity-app-link{
        padding-top:9px;
        padding-bottom:9px;
    }


    .ui-app-header-card{
        padding-top:11px !important;
        padding-bottom:11px !important;
    }

}


/* =========================================================
   VERY SHORT HEIGHT
========================================================= */

@media (max-height:620px){

    .engine-page-header{
        margin-bottom:6px;
    }


    .engine-page-header h1{
        font-size:21px;
    }


    .engine-page-header p{
        display:none;
    }


    .world-page{
        grid-template-rows:
            auto
            minmax(108px,.84fr)
            minmax(90px,1fr);
    }


    .world-stats{
        margin-top:6px;
    }


    .entity-header{
        padding-top:8px;
        padding-bottom:8px;
    }

}


/* =========================================================
   POINTER / TOUCH
========================================================= */

@media (hover:none){

    .world-card:hover,
    .world-entity-btn:hover,
    .entity-type-card:hover,
    .entity-app-link:hover,
    .ui-launcher-card:hover,
    .ui-brain-trigger:hover,
    .primary-btn:hover,
    .secondary-btn:hover{

        transform:none;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;

        transition-duration:.01ms !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;
    }

}

 /* =========================================================
   VAERO — FINAL MOBILE PAGE GEOMETRY
========================================================= */

@media (max-width:600px){

    /* =====================================================
       WORLDS
    ===================================================== */

    .worlds-page{
        min-height:0;

        grid-template-rows:
            auto
            minmax(0,1fr);
    }


    .worlds-grid{
        grid-template-columns:1fr;

        grid-auto-rows:auto;

        align-content:start;

        gap:8px;

        padding-bottom:
            calc(
                78px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        overflow-x:hidden;
        overflow-y:auto;
    }


    .world-card{
        width:100%;
        height:auto;

        min-height:92px;

        padding:
            13px
            14px;

        gap:11px;

        border-radius:16px;
    }


    .world-card-orbit{
        width:48px;
        height:48px;

        flex-basis:48px;
    }


    .world-card-orbit span{
        width:22px;
        height:22px;
    }


    .world-card-content small{
        font-size:6px;
    }


    .world-card-content strong{
        font-size:14px;
    }


    .world-card-content > span{
        margin-top:4px;

        font-size:8px;
    }


    /* =====================================================
       CREATE WORLD
    ===================================================== */

    .create-page{
        min-height:0;

        grid-template-rows:
            auto
            minmax(0,1fr);
    }


    .create-layout{
        display:grid;

        grid-template-columns:1fr;

        grid-template-rows:
            auto
            auto;

        align-content:start;

        gap:10px;

        min-height:0;

        padding-bottom:
            calc(
                82px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        overflow-x:hidden;
        overflow-y:auto;

        overscroll-behavior-y:contain;

        -webkit-overflow-scrolling:touch;
    }


    .create-world-form{
        width:100%;

        min-height:auto;

        padding:
            15px;

        overflow:visible;

        border-radius:18px;
    }


    .create-preview{
        width:100%;
        height:auto;

        min-height:170px;

        padding:
            18px;

        border-radius:18px;
    }


    .create-preview-orbit{
        width:72px;
        height:72px;

        flex-basis:72px;

        margin-bottom:11px;
    }


    .create-preview-orbit::before{
        inset:10px;
    }


    .create-preview-orbit span{
        width:32px;
        height:32px;
    }


    .create-preview h2{
        font-size:17px;
    }


    .create-preview p{
        max-width:280px;

        margin-top:6px;

        font-size:9px;

        line-height:1.45;
    }


    .create-preview small{
        margin-top:9px;

        font-size:7px;
    }


    /* =====================================================
       MOBILE FORM
    ===================================================== */

    .engine-field{
        margin-top:11px;

        gap:6px;
    }


    .engine-field > span{
        font-size:8px;
    }


    .engine-field input,
    .engine-field select{
        height:44px;
        min-height:44px;

        padding-inline:12px;

        border-radius:12px;

        font-size:16px;
    }


    .engine-field textarea{
        height:88px;
        min-height:88px;

        padding:
            11px
            12px;

        border-radius:12px;

        font-size:16px;

        line-height:1.4;
    }


    .create-submit{
        min-height:44px;

        margin-top:13px;

        font-size:10px;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width:390px){

    .world-card{
        min-height:86px;

        padding:
            11px
            12px;
    }


    .create-world-form{
        padding:13px;
    }


    .create-preview{
        min-height:150px;

        padding:15px;
    }

}

/* =========================================================
   VAERO CREATE STUDIO
========================================================= */

.create-studio{
    display:flex;
    flex-direction:column;

    gap:18px;

    min-width:0;
}


.create-intent-head{
    display:flex;
    flex-direction:column;

    gap:7px;
}


.create-intent-head p{
    max-width:560px;

    margin:0;

    color:
        rgba(226,231,238,.5);

    font-size:11px;

    line-height:1.5;
}


.create-intent-grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:8px;

    min-width:0;
}


.create-intent-card{
    position:relative;

    display:grid;

    grid-template-columns:
        36px
        minmax(0,1fr);

    align-items:center;

    gap:10px;

    min-width:0;
    min-height:76px;

    padding:
        11px
        12px;

    overflow:hidden;

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

    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    cursor:pointer;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}


.create-intent-card input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;

    pointer-events:none;
}


.create-intent-icon{
    display:grid;
    place-items:center;

    width:36px;
    height:36px;

    border:
        1px solid
        rgba(215,171,99,.12);

    border-radius:11px;

    background:
        rgba(215,171,99,.04);

    color:
        rgba(237,197,116,.86);

    font-size:16px;
}


.create-intent-copy{
    display:flex;
    flex-direction:column;

    gap:4px;

    min-width:0;
}


.create-intent-copy strong{
    color:
        rgba(248,245,239,.93);

    font-size:12px;
    font-weight:640;

    line-height:1.15;
}


.create-intent-copy small{
    display:-webkit-box;

    overflow:hidden;

    color:
        rgba(226,231,238,.46);

    font-size:9px;

    line-height:1.35;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


.create-intent-check{
    position:absolute;

    top:7px;
    right:8px;

    display:grid;
    place-items:center;

    width:17px;
    height:17px;

    border-radius:50%;

    background:
        rgba(215,171,99,.12);

    color:
        rgba(237,197,116,.92);

    font-size:8px;
    font-weight:800;

    opacity:0;

    transform:
        scale(.75);

    transition:
        opacity 150ms ease,
        transform 150ms ease;
}


.create-intent-card:has(input:checked){
    border-color:
        rgba(215,171,99,.3);

    background:
        linear-gradient(
            145deg,
            rgba(215,171,99,.09),
            rgba(215,171,99,.025)
        );
}


.create-intent-card:has(input:checked)
.create-intent-check{
    opacity:1;

    transform:
        scale(1);
}


.create-intent-card:has(input:checked)
.create-intent-icon{
    border-color:
        rgba(215,171,99,.25);

    background:
        rgba(215,171,99,.09);

    color:
        #edc574;
}


.create-studio-fields{
    display:flex;
    flex-direction:column;

    min-width:0;

    padding-top:2px;
}


@media (hover:hover){

    .create-intent-card:hover{
        border-color:
            rgba(255,255,255,.11);

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

        transform:
            translateY(-1px);
    }

}


/* =========================================================
   CREATE STUDIO — MOBILE
========================================================= */

@media (max-width:600px){

    .create-studio{
        gap:14px;
    }


    .create-intent-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:7px;
    }


    .create-intent-card{
        grid-template-columns:
            32px
            minmax(0,1fr);

        min-height:70px;

        gap:8px;

        padding:
            9px
            10px;

        border-radius:13px;
    }


    .create-intent-icon{
        width:32px;
        height:32px;

        border-radius:10px;

        font-size:14px;
    }


    .create-intent-copy strong{
        font-size:11px;
    }


    .create-intent-copy small{
        font-size:9px;

        -webkit-line-clamp:2;
    }


    .create-intent-head p{
        font-size:10px;
    }

}


/* =========================================================
   CREATE STUDIO — SMALL PHONE
========================================================= */

@media (max-width:390px){

    .create-intent-card{
        min-height:66px;

        padding:
            8px
            9px;
    }


    .create-intent-copy small{
        -webkit-line-clamp:1;
    }

}

.engine-active-kind{
    display:inline-flex;
    align-items:center;

    min-height:22px;
    margin-bottom:8px;
    padding:0 9px;

    border:
        1px solid
        rgba(230,199,141,.13);

    border-radius:999px;

    background:
        rgba(230,199,141,.04);

    color:
        rgba(234,204,148,.82);

    font-size:7px;
    font-weight:750;

    letter-spacing:.12em;
    text-transform:uppercase;
}