/*
PHASE 56
PREMIUM MOBILE FIRST DESIGN SYSTEM FIX
Europe/Athens
*/

:root{
    --bg:#050506;
    --surface:#111214;
    --surface2:#17181b;
    --surface3:#202126;
    --line:#2d2f36;
    --text:#f6f6f4;
    --muted:#a8abb3;
    --soft:#d7d8dc;
    --gold:#f0cf7a;
    --gold2:#5b471a;
    --green:#173b24;
    --greenText:#9fe7b0;
    --red:#581818;
    --redText:#ffb8b8;
    --blue:#17345b;
    --shadow:0 18px 60px rgba(0,0,0,.42);
    --radius:24px;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    background:var(--bg);
}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at top right,rgba(240,207,122,.12),transparent 34%),
        radial-gradient(circle at top left,rgba(55,90,150,.10),transparent 30%),
        var(--bg);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:1.5;
}

a{
    color:inherit;
}

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

input,
select,
textarea{
    width:100%;
    min-height:54px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#1b1c20;
    color:var(--text);
    padding:16px 17px;
    font-size:16px;
    outline:none;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(240,207,122,.12);
}

button,
.button,
.primaryAction,
.elPrimaryButton,
.elSelectButton,
.runtimeButton,
.actionButton,
.openLink{
    min-height:56px;
    border:0;
    border-radius:18px;
    background:linear-gradient(180deg,#233b29,#17331d);
    color:#fff;
    padding:16px 18px;
    font-size:17px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:0 12px 34px rgba(0,0,0,.28);
}

button.secondary,
.runtimeButton,
.elSelectButton{
    background:linear-gradient(180deg,#2b2c31,#1d1e22);
}

button.danger,
.rejectButton{
    background:linear-gradient(180deg,#6a1e1e,#451717);
}

.hero,
.premiumHero,
.elMobileHero{
    padding:28px 18px 26px !important;
    background:
        linear-gradient(180deg,rgba(20,21,24,.96),rgba(8,8,9,.96)) !important;
    border-bottom:1px solid var(--line) !important;
    text-align:left !important;
}

.heroTitle,
.premiumHero h1,
.elMobileHero h1{
    margin:0 0 10px !important;
    max-width:760px;
    font-size:clamp(30px,8vw,48px) !important;
    line-height:1.04 !important;
    letter-spacing:-1.2px !important;
    font-weight:900 !important;
    color:var(--text) !important;
}

.heroSub,
.premiumHero p,
.elMobileHero p{
    margin:0 !important;
    max-width:660px;
    color:var(--muted) !important;
    font-size:15px !important;
    line-height:1.65 !important;
}

.heroTopLine{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.heroBadge,
.elEyebrow,
.focusLabel{
    color:var(--gold) !important;
    font-size:11px !important;
    line-height:1.2;
    letter-spacing:1.4px;
    font-weight:800;
    text-transform:uppercase;
}

.heroRole{
    flex:0 0 auto;
    background:#1b1c20;
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 11px;
    color:var(--soft);
    font-size:11px;
    font-weight:700;
}

.container,
.premiumContainer,
.elMobileContainer{
    width:100%;
    max-width:960px;
    margin:0 auto;
    padding:16px !important;
}

.panel,
.focusCard,
.elCard,
.runtimePanel,
.schoolCard,
.eventCard,
.invitationCard,
.submissionCard,
.card,
.modeCard,
.seedCard,
.rankingCard,
.operationCard,
.eventRuntimeCard{
    background:linear-gradient(180deg,var(--surface2),var(--surface)) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius) !important;
    padding:20px !important;
    margin-bottom:16px !important;
    box-shadow:var(--shadow);
}

.panelTitle,
.focusCardHeader h2,
.sectionHeader h2,
.elSectionHeader h2{
    margin:0 0 16px !important;
    font-size:clamp(24px,6vw,34px) !important;
    line-height:1.12 !important;
    letter-spacing:-.6px;
    font-weight:900;
}

.focusCardHeader,
.elSectionHeader{
    display:flex;
    gap:14px;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:18px;
}

.focusIcon,
.elSectionHeader > span{
    width:48px;
    height:48px;
    border-radius:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#2a2b30,#1c1d21);
    color:var(--gold);
    font-size:22px;
    font-weight:900;
    flex:0 0 auto;
}

.premiumForm,
.elForm,
.formStack,
.actionGrid{
    display:grid;
    gap:14px;
}

.twoCols,
.formGrid,
.wizardGrid,
.inlineForm,
.metrics,
.metricGrid,
.moduleGrid,
.operationsGrid,
.eventGrid,
.invitationGrid,
.submissionGrid,
.rankingGrid,
.schoolGrid,
.coachGrid,
.guideGrid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}

.eventRuntimeTop,
.elEventTop,
.activeEventCard,
.sessionBox{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:stretch;
}

.runtimeTitle,
.eventName,
.schoolName,
.athleteName,
.coachName,
.activeEventName,
.moduleTitle,
.operationTitle{
    font-size:clamp(22px,6vw,30px) !important;
    line-height:1.15 !important;
    font-weight:900;
    margin-bottom:8px;
}

.runtimeMeta,
.runtimeDate,
.eventMeta,
.schoolName,
.eventName,
.categoryName,
.birthYear,
.moduleText,
.operationText,
.activeEventMeta,
.city,
instructor,
.members,
.eventCity,
.eventDate,
.registrationWindow{
    color:var(--muted) !important;
}

.runtimeStatus,
.eventStatus,
.status,
.badge,
.membership,
.qualification,
.modeValue,
.seedStatus,
.syncBadge,
.liveBadge,
.activeTag,
.elActiveNotice{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:8px 11px;
    background:rgba(240,207,122,.14) !important;
    color:var(--gold) !important;
    border:1px solid rgba(240,207,122,.25);
    font-size:12px;
    font-weight:800;
    overflow-wrap:anywhere;
}

.approved,
.pass,
.ready,
.valid,
.active,
.qualified_for_national_finals{
    background:rgba(23,59,36,.8) !important;
    color:var(--greenText) !important;
    border-color:rgba(159,231,176,.22) !important;
}

.rejected,
.fail,
.blocked,
.critical{
    background:rgba(88,24,24,.85) !important;
    color:var(--redText) !important;
    border-color:rgba(255,184,184,.22) !important;
}

.inviteUrl,
.urlBox,
.reason,
.demoAccounts,
.portalStep,
.elPrincipleList div{
    background:#0d0e10 !important;
    border:1px solid var(--line) !important;
    border-radius:18px !important;
    padding:15px !important;
    color:var(--soft) !important;
    line-height:1.6;
    overflow-wrap:anywhere;
}

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:780px;
    background:#101113;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
}

td,
th{
    border-bottom:1px solid var(--line);
    padding:13px;
    text-align:left;
    color:var(--soft);
}

th{
    color:var(--text);
    background:#17181b;
}

ul{
    padding-left:20px;
    line-height:1.85;
    color:var(--soft);
}

.quote{
    text-align:center;
    font-size:clamp(22px,6vw,30px);
    color:var(--soft);
}

.logoutLink,
.switchEventButton{
    display:inline-flex;
    min-height:52px;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    padding:14px 16px;
    text-decoration:none;
    background:#2a2111;
    color:var(--gold);
    font-weight:800;
}

.loginPage{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}

.loginCard{
    width:100%;
    max-width:440px;
    background:linear-gradient(180deg,var(--surface2),var(--surface));
    border:1px solid var(--line);
    border-radius:28px;
    padding:24px;
    box-shadow:var(--shadow);
}

.loginTitle{
    font-size:36px;
    line-height:1.05;
    font-weight:900;
    margin-bottom:10px;
}

.loginSub{
    color:var(--muted);
    margin-bottom:20px;
}

.loginForm{
    display:grid;
    gap:14px;
}

@media(min-width:720px){
    .container,
    .premiumContainer,
    .elMobileContainer{
        padding:24px !important;
    }

    .twoCols,
    .metrics,
    .metricGrid,
    .moduleGrid,
    .operationsGrid,
    .eventGrid,
    .invitationGrid,
    .submissionGrid,
    .rankingGrid,
    .schoolGrid,
    .coachGrid,
    .guideGrid{
        grid-template-columns:repeat(2,1fr);
    }

    .formGrid,
    .wizardGrid,
    .inlineForm{
        grid-template-columns:repeat(3,1fr);
    }

    .eventRuntimeTop,
    .elEventTop,
    .activeEventCard,
    .sessionBox{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }

    .hero,
    .premiumHero,
    .elMobileHero{
        padding:38px 28px 34px !important;
    }
}

@media(min-width:1040px){
    .moduleGrid,
    .operationsGrid,
    .eventGrid,
    .invitationGrid,
    .submissionGrid,
    .rankingGrid{
        grid-template-columns:repeat(3,1fr);
    }
}


/* PHASE 57 MOBILE NAV ORGANIZER DASHBOARD */

.appShellBody{
    padding-bottom:92px;
    background:
        radial-gradient(circle at top right,rgba(240,207,122,.11),transparent 33%),
        #050506;
}

.appTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:22px 18px 16px;
}

.appEyebrow{
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    margin-bottom:8px;
}

.appTop h1{
    margin:0;
    font-size:34px;
    line-height:1.02;
    letter-spacing:-1px;
}

.appProfile{
    background:#1a1b1f;
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 13px;
    color:var(--soft);
    text-decoration:none;
    font-size:13px;
    font-weight:800;
}

.appMain{
    width:100%;
    max-width:960px;
    margin:0 auto;
    padding:0 16px 20px;
}

.activeEventPanel{
    background:linear-gradient(180deg,#191a1e,#101113);
    border:1px solid var(--line);
    border-radius:30px;
    padding:22px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
}

.activeEventMiniLabel{
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.4px;
    margin-bottom:12px;
}

.activeEventBigName{
    font-size:32px;
    line-height:1.08;
    font-weight:900;
    margin-bottom:10px;
}

.activeEventDetails{
    color:var(--muted);
    line-height:1.6;
    margin-bottom:18px;
}

.eventActionRow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.eventActionRow a{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#202126;
    border:1px solid var(--line);
    border-radius:17px;
    color:#fff;
    text-decoration:none;
    font-weight:900;
}

.statusStrip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:18px;
}

.statusStrip div{
    background:#141518;
    border:1px solid var(--line);
    border-radius:20px;
    padding:14px 10px;
    text-align:center;
}

.statusStrip strong{
    display:block;
    font-size:20px;
    margin-bottom:3px;
}

.statusStrip span{
    color:var(--muted);
    font-size:12px;
}

.organizerTiles{
    display:grid;
    gap:14px;
    margin-bottom:20px;
}

.organizerTile{
    display:flex;
    gap:16px;
    align-items:center;
    background:linear-gradient(180deg,#18191d,#111216);
    border:1px solid var(--line);
    border-radius:26px;
    padding:18px;
    text-decoration:none;
    color:#fff;
    box-shadow:0 14px 46px rgba(0,0,0,.25);
}

.primaryTile{
    border-color:rgba(240,207,122,.34);
}

.mutedTile{
    opacity:.72;
}

.tileIcon{
    width:54px;
    height:54px;
    flex:0 0 auto;
    border-radius:19px;
    background:#222329;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
}

.organizerTile h2{
    margin:0 0 6px;
    font-size:23px;
    line-height:1.1;
}

.organizerTile p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
}

.todayFlow{
    background:#111216;
    border:1px solid var(--line);
    border-radius:26px;
    padding:18px;
    margin-bottom:20px;
}

.sectionTitleSmall{
    color:var(--gold);
    font-size:12px;
    font-weight:900;
    letter-spacing:1.3px;
    margin-bottom:16px;
}

.flowList{
    display:grid;
    gap:12px;
}

.flowItem{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:#18191d;
    border:1px solid #2a2c33;
    border-radius:20px;
    padding:15px;
}

.flowItem span{
    width:34px;
    height:34px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#2a2b30;
    color:#fff;
    font-weight:900;
}

.flowItem.done span{
    background:var(--green);
    color:var(--greenText);
}

.flowItem.active{
    border-color:rgba(240,207,122,.32);
}

.flowItem.active span{
    background:#5b471a;
    color:var(--gold);
}

.flowItem strong{
    display:block;
    margin-bottom:4px;
}

.flowItem p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
}

.bottomNav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:50;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    background:rgba(17,18,20,.92);
    backdrop-filter:blur(18px);
    border:1px solid var(--line);
    border-radius:24px;
    padding:8px;
    box-shadow:0 16px 50px rgba(0,0,0,.45);
}

.bottomNav a{
    min-height:58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:var(--muted);
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    border-radius:17px;
}

.bottomNav a span{
    font-size:19px;
    line-height:1;
}

.bottomNav a.active{
    background:#24251f;
    color:var(--gold);
}

@media(min-width:760px){
    .organizerTiles{
        grid-template-columns:repeat(2,1fr);
    }

    .bottomNav{
        left:50%;
        right:auto;
        width:520px;
        transform:translateX(-50%);
    }
}

@media(min-width:1040px){
    .organizerTiles{
        grid-template-columns:repeat(3,1fr);
    }
}


/* PHASE 58 ORGANIZER LIVE STATUS GUI */

.phase58Body{
    background:
        radial-gradient(circle at top right,rgba(240,207,122,.13),transparent 32%),
        radial-gradient(circle at top left,rgba(23,52,91,.20),transparent 32%),
        var(--bg);
}

.phase58Top{
    padding:24px 18px 14px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}

.phase58Top h1{
    margin:0 0 8px;
    font-size:35px;
    line-height:1.02;
    letter-spacing:-1px;
}

.phase58Top p{
    margin:0;
    color:var(--muted);
    line-height:1.55;
    font-size:15px;
}

.phase58Main{
    padding-top:0;
}

.commandHeroCard{
    background:
        linear-gradient(180deg,rgba(27,28,32,.98),rgba(12,13,15,.98));
    border:1px solid var(--line);
    border-radius:32px;
    padding:22px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
}

.commandHeroTop{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    margin-bottom:22px;
}

.commandEventName{
    font-size:33px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.8px;
    margin-bottom:9px;
}

.commandEventMeta{
    color:var(--muted);
    line-height:1.55;
}

.healthPill{
    width:54px;
    height:54px;
    border-radius:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    flex:0 0 auto;
}

.goodHealth{
    background:rgba(23,59,36,.92);
    color:var(--greenText);
}

.progressBlock{
    background:#101113;
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    margin-bottom:16px;
}

.progressTop{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:var(--soft);
    margin-bottom:12px;
}

.progressTop strong{
    color:var(--gold);
}

.progressTrack{
    height:11px;
    background:#25262b;
    border-radius:999px;
    overflow:hidden;
}

.progressFill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#5b471a,#f0cf7a);
}

.nextActionBox{
    background:
        linear-gradient(180deg,rgba(91,71,26,.28),rgba(18,18,18,.9));
    border:1px solid rgba(240,207,122,.24);
    border-radius:24px;
    padding:18px;
}

.nextActionLabel{
    color:var(--gold);
    font-size:11px;
    letter-spacing:1.3px;
    font-weight:900;
    margin-bottom:10px;
}

.nextActionTitle{
    font-size:25px;
    line-height:1.15;
    font-weight:900;
    margin-bottom:8px;
}

.nextActionBox p{
    margin:0 0 16px;
    color:var(--soft);
    line-height:1.55;
}

.nextActionBox a{
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--green);
    color:#fff;
    border-radius:18px;
    text-decoration:none;
    font-weight:900;
}

.liveStatusGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-bottom:16px;
}

.liveStatusCard{
    background:#141518;
    border:1px solid var(--line);
    border-radius:24px;
    padding:17px;
    min-height:116px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.liveNumber{
    font-size:38px;
    line-height:1;
    font-weight:900;
}

.liveLabel{
    color:var(--muted);
    font-size:13px;
    line-height:1.35;
}

.alertClear{
    border-color:rgba(159,231,176,.20);
}

.priorityPanel{
    background:#111216;
    border:1px solid var(--line);
    border-radius:28px;
    padding:18px;
    margin-bottom:16px;
    box-shadow:0 12px 40px rgba(0,0,0,.20);
}

.priorityList{
    display:grid;
    gap:12px;
}

.priorityItem{
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:13px;
    align-items:center;
    background:#18191d;
    border:1px solid #2a2c33;
    border-radius:22px;
    padding:14px;
    color:#fff;
    text-decoration:none;
}

.priorityItem.highPriority{
    border-color:rgba(240,207,122,.30);
    background:linear-gradient(180deg,#1d1b15,#151515);
}

.priorityItem span{
    width:42px;
    height:42px;
    border-radius:16px;
    background:#2a2b30;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.highPriority span{
    background:#5b471a;
    color:var(--gold);
}

.priorityItem strong{
    display:block;
    margin-bottom:5px;
}

.priorityItem p{
    margin:0;
    color:var(--muted);
    line-height:1.4;
    font-size:13px;
}

.priorityItem em{
    font-style:normal;
    color:var(--gold);
    font-size:12px;
    font-weight:900;
}

.phase58Operations{
    margin-top:0;
}

.phase58Operations .operationCard{
    text-decoration:none;
}

.emergencyStrip{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    background:#101113;
    border:1px solid var(--line);
    border-radius:26px;
    padding:18px;
    margin-bottom:24px;
}

.emergencyStrip strong{
    display:block;
    font-size:19px;
    margin-bottom:5px;
}

.emergencyStrip p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

.emergencyStrip button{
    min-width:90px;
    min-height:48px;
    border:1px solid rgba(159,231,176,.20);
    background:rgba(23,59,36,.75);
    color:var(--greenText);
    box-shadow:none;
}

@media(min-width:760px){
    .liveStatusGrid{
        grid-template-columns:repeat(4,1fr);
    }

    .commandHeroCard{
        padding:28px;
    }

    .phase58Top{
        max-width:960px;
        margin:0 auto;
        padding:32px 24px 18px;
    }
}

@media(max-width:520px){
    .priorityItem{
        grid-template-columns:38px 1fr;
    }

    .priorityItem em{
        grid-column:2;
    }

    .emergencyStrip{
        flex-direction:column;
        align-items:stretch;
    }
}


/* PHASE 59 FEDERATION RUNTIME GUI */

.runtimeBody{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at top right,rgba(240,207,122,.14),transparent 28%),
        radial-gradient(circle at bottom left,rgba(31,64,112,.18),transparent 34%),
        #050506;
    color:#fff;
    overflow-x:hidden;
}

.runtimeAmbientGlow{
    position:fixed;
    top:-140px;
    right:-100px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(240,207,122,.06);
    filter:blur(70px);
    pointer-events:none;
}

.runtimeHeader{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:22px 18px 16px;
    backdrop-filter:blur(18px);
    background:rgba(5,5,6,.72);
    border-bottom:1px solid rgba(255,255,255,.04);
}

.runtimeSystemLabel{
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    margin-bottom:10px;
}

.runtimeHeader h1{
    margin:0 0 10px;
    font-size:42px;
    line-height:1;
    letter-spacing:-1.8px;
}

.runtimeCurrentEvent{
    color:var(--muted);
    font-size:15px;
}

.runtimeHeaderRight{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-end;
}

.runtimeClock{
    min-width:78px;
    text-align:center;
    padding:10px 14px;
    border-radius:18px;
    background:#17181b;
    border:1px solid var(--line);
    font-size:20px;
    font-weight:900;
}

.runtimeLogout{
    color:var(--soft);
    text-decoration:none;
    font-size:13px;
    font-weight:800;
}

.runtimeMain{
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:18px 16px 120px;
}

.heroRuntimeCard{
    background:linear-gradient(180deg,#18191d,#0e0f12);
    border:1px solid rgba(240,207,122,.14);
    border-radius:34px;
    padding:24px;
    box-shadow:0 24px 90px rgba(0,0,0,.35);
    margin-bottom:18px;
}

.heroRuntimeTop{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    margin-bottom:22px;
}

.runtimePill{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(240,207,122,.12);
    border:1px solid rgba(240,207,122,.20);
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.2px;
    margin-bottom:16px;
}

.heroRuntimeTitle{
    font-size:36px;
    line-height:1.04;
    letter-spacing:-1.2px;
    font-weight:900;
    margin-bottom:12px;
    max-width:620px;
}

.heroRuntimeText{
    max-width:620px;
    color:var(--muted);
    line-height:1.65;
}

.heroRuntimeHealth{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.runtimeHealthCircle{
    width:96px;
    height:96px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#233b29,#17331d);
    color:#fff;
    font-size:24px;
    font-weight:900;
    box-shadow:0 14px 44px rgba(0,0,0,.34);
}

.runtimeHealthLabel{
    color:var(--muted);
    font-size:13px;
}

.runtimeProgressArea{
    background:#111216;
    border:1px solid var(--line);
    border-radius:24px;
    padding:16px;
}

.runtimeProgressHeader{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.runtimeProgressTrack{
    height:12px;
    border-radius:999px;
    background:#25262b;
    overflow:hidden;
}

.runtimeProgressFill{
    width:78%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#5b471a,#f0cf7a);
}

.runtimeMetricsGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-bottom:18px;
}

.runtimeMetricCard{
    background:#131417;
    border:1px solid var(--line);
    border-radius:26px;
    padding:20px;
}

.runtimeMetricValue{
    font-size:42px;
    line-height:1;
    font-weight:900;
    margin-bottom:10px;
}

.runtimeMetricLabel{
    color:var(--muted);
}

.runtimePrimaryActions{
    display:grid;
    gap:16px;
    margin-bottom:18px;
}

.runtimeBigAction{
    display:flex;
    gap:18px;
    align-items:center;
    padding:22px;
    border-radius:30px;
    text-decoration:none;
    color:#fff;
    border:1px solid var(--line);
    box-shadow:0 18px 70px rgba(0,0,0,.25);
}

.actionSchools{
    background:linear-gradient(180deg,#1c1d15,#111216);
}

.actionSetup{
    background:linear-gradient(180deg,#181d24,#101216);
}

.runtimeBigActionIcon{
    width:68px;
    height:68px;
    flex:0 0 auto;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#23252b;
    font-size:34px;
}

.runtimeBigActionTitle{
    font-size:30px;
    line-height:1.05;
    font-weight:900;
    margin-bottom:8px;
}

.runtimeBigActionText{
    color:var(--muted);
    line-height:1.55;
}

.runtimeOperationalGrid{
    display:grid;
    gap:18px;
}

.runtimeOperationalCard{
    background:#111216;
    border:1px solid var(--line);
    border-radius:30px;
    padding:22px;
}

.runtimeOperationalHeader{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:18px;
}

.runtimeMiniLabel{
    color:var(--gold);
    font-size:11px;
    letter-spacing:1.4px;
    font-weight:900;
    margin-bottom:10px;
}

.runtimeOperationalHeader h2{
    margin:0;
    font-size:30px;
    line-height:1.05;
}

.runtimeStatusGreen{
    min-height:38px;
    display:flex;
    align-items:center;
    padding:0 14px;
    border-radius:999px;
    background:rgba(23,59,36,.72);
    color:var(--greenText);
    font-size:12px;
    font-weight:900;
}

.runtimeTimeline{
    display:grid;
    gap:14px;
}

.runtimeTimelineItem{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:#18191d;
    border:1px solid #2a2c33;
    border-radius:22px;
    padding:15px;
}

.runtimeTimelineItem span{
    width:42px;
    height:42px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#292a2f;
    font-weight:900;
    flex:0 0 auto;
}

.runtimeTimelineItem.done span{
    background:#17331d;
    color:var(--greenText);
}

.runtimeTimelineItem.active{
    border-color:rgba(240,207,122,.22);
}

.runtimeTimelineItem.active span{
    background:#5b471a;
    color:var(--gold);
}

.runtimeTimelineItem strong{
    display:block;
    margin-bottom:5px;
}

.runtimeTimelineItem p{
    margin:0;
    color:var(--muted);
    line-height:1.45;
}

.runtimeQuickGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.runtimeQuickGrid a{
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#18191d;
    border:1px solid var(--line);
    border-radius:20px;
    color:#fff;
    text-decoration:none;
    font-weight:900;
}

.runtimeBottomNav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:50;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    background:rgba(12,13,15,.90);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.06);
    border-radius:26px;
    padding:8px;
    box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.runtimeBottomNav a{
    min-height:60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:18px;
    text-decoration:none;
    color:var(--muted);
    font-size:11px;
    font-weight:900;
}

.runtimeBottomNav a span{
    font-size:20px;
}

.runtimeBottomNav a.active{
    background:#202126;
    color:var(--gold);
}

@media(min-width:760px){

    .runtimeHeader{
        padding:28px 24px 18px;
    }

    .runtimeMain{
        padding:24px 24px 140px;
    }

    .runtimeMetricsGrid{
        grid-template-columns:repeat(4,1fr);
    }

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

    .runtimeOperationalGrid{
        grid-template-columns:1.3fr .9fr;
    }

    .runtimeBottomNav{
        width:560px;
        left:50%;
        right:auto;
        transform:translateX(-50%);
    }
}

@media(max-width:640px){

    .runtimeHeader{
        flex-direction:column;
    }

    .heroRuntimeTop{
        flex-direction:column;
    }

    .heroRuntimeHealth{
        align-items:flex-start;
    }

    .heroRuntimeTitle{
        font-size:32px;
    }

    .runtimeBigAction{
        flex-direction:column;
        align-items:flex-start;
    }

    .runtimeOperationalHeader{
        flex-direction:column;
    }
}


/* PHASE 60 CINEMATIC RUNTIME GUI */

.cineBody{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    background:
        linear-gradient(180deg,#060708,#050506);
    color:#fff;
    position:relative;
}

.cineBackgroundGrid{
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:34px 34px;
    opacity:.22;
    pointer-events:none;
}

.cineGlowOne,
.cineGlowTwo{
    position:fixed;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
}

.cineGlowOne{
    width:320px;
    height:320px;
    top:-80px;
    right:-60px;
    background:rgba(240,207,122,.10);
}

.cineGlowTwo{
    width:280px;
    height:280px;
    bottom:-80px;
    left:-80px;
    background:rgba(39,84,160,.12);
}

.cineHeader{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:24px 18px 18px;
    backdrop-filter:blur(18px);
    background:rgba(5,5,6,.72);
    border-bottom:1px solid rgba(255,255,255,.04);
}

.cineMiniLabel{
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    margin-bottom:10px;
}

.cineHeader h1{
    margin:0 0 10px;
    font-size:48px;
    line-height:.96;
    letter-spacing:-2px;
}

.cineEventName{
    color:var(--muted);
    font-size:15px;
}

.cineHeaderStatus{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:flex-end;
}

.cineRuntimePulse{
    display:flex;
    align-items:center;
    gap:8px;
    color:#9fe7b0;
    font-size:12px;
    font-weight:900;
}

.cineRuntimePulse span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#63ff91;
    box-shadow:0 0 12px #63ff91;
    animation:pulseRuntime 1.5s infinite;
}

@keyframes pulseRuntime{
    0%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.35);opacity:.6;}
    100%{transform:scale(1);opacity:1;}
}

.cineClock{
    background:#15161a;
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px 16px;
    font-size:22px;
    font-weight:900;
}

.cineMain{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:18px 16px 120px;
}

.cineHero{
    position:relative;
    overflow:hidden;
    display:grid;
    gap:26px;
    background:
        linear-gradient(180deg,rgba(25,26,30,.94),rgba(10,11,13,.96));
    border:1px solid rgba(240,207,122,.12);
    border-radius:38px;
    padding:26px;
    margin-bottom:18px;
    box-shadow:0 24px 90px rgba(0,0,0,.40);
}

.cineHeroPill{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(240,207,122,.12);
    border:1px solid rgba(240,207,122,.18);
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.4px;
    margin-bottom:18px;
}

.cineHeroTitle{
    max-width:720px;
    font-size:44px;
    line-height:1.02;
    letter-spacing:-1.8px;
    font-weight:900;
    margin-bottom:14px;
}

.cineHeroText{
    max-width:680px;
    color:var(--muted);
    line-height:1.7;
    font-size:16px;
    margin-bottom:20px;
}

.cineHeroActions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.cineHeroActions a{
    min-height:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border-radius:20px;
    text-decoration:none;
    font-weight:900;
    background:linear-gradient(180deg,#233b29,#17331d);
    color:#fff;
}

.cineHeroActions .secondaryHeroAction{
    background:#1c1d22;
    border:1px solid var(--line);
}

.cineRadarArea{
    position:relative;
    width:240px;
    height:240px;
    margin:auto;
}

.cineRadarCore{
    position:absolute;
    inset:50%;
    width:20px;
    height:20px;
    margin-left:-10px;
    margin-top:-10px;
    border-radius:50%;
    background:#f0cf7a;
    box-shadow:0 0 24px rgba(240,207,122,.8);
}

.cineRadarRing{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px solid rgba(240,207,122,.14);
}

.ring1{inset:20px;}
.ring2{inset:50px;}
.ring3{inset:80px;}

.cineRadarDot{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#63ff91;
    box-shadow:0 0 12px #63ff91;
}

.dot1{top:50px;right:40px;}
.dot2{bottom:70px;left:50px;}
.dot3{bottom:40px;right:90px;}

.cineQuickStats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-bottom:18px;
}

.cineStatCard{
    background:rgba(17,18,22,.92);
    border:1px solid var(--line);
    border-radius:28px;
    padding:20px;
    backdrop-filter:blur(10px);
}

.cineStatCard strong{
    display:block;
    font-size:42px;
    line-height:1;
    margin-bottom:10px;
}

.cineStatCard span{
    color:var(--muted);
}

.cineRuntimeSections{
    display:grid;
    gap:18px;
    margin-bottom:18px;
}

.cineGlassCard{
    background:rgba(17,18,22,.76);
    border:1px solid rgba(255,255,255,.06);
    border-radius:32px;
    padding:22px;
    backdrop-filter:blur(18px);
}

.cineSectionLabel{
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.4px;
    margin-bottom:14px;
}

.cineGlassCard h2{
    margin:0 0 12px;
    font-size:34px;
    line-height:1.05;
    letter-spacing:-1px;
}

.cineGlassCard p{
    margin:0 0 20px;
    color:var(--muted);
    line-height:1.65;
}

.cineProgressWrap{
    background:#0f1012;
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
}

.cineProgressTop{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.cineProgressBar{
    height:12px;
    border-radius:999px;
    background:#25262b;
    overflow:hidden;
}

.cineProgressFill{
    width:72%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#5b471a,#f0cf7a);
}

.cineTimeline{
    display:grid;
    gap:14px;
}

.cineTimelineItem{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:#17181b;
    border:1px solid #2c2d33;
    border-radius:22px;
    padding:15px;
}

.cineTimelineItem span{
    width:42px;
    height:42px;
    border-radius:15px;
    background:#282930;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.cineTimelineItem.active{
    border-color:rgba(240,207,122,.22);
}

.cineTimelineItem.active span{
    background:#5b471a;
    color:var(--gold);
}

.cineTimelineItem strong{
    display:block;
    margin-bottom:6px;
}

.cineTimelineItem p{
    margin:0;
    color:var(--muted);
    line-height:1.45;
}

.cineOperationsGrid{
    display:grid;
    gap:16px;
}

.cineOperationCard{
    background:
        linear-gradient(180deg,rgba(23,24,27,.96),rgba(11,12,14,.96));
    border:1px solid rgba(255,255,255,.05);
    border-radius:30px;
    padding:22px;
    text-decoration:none;
    color:#fff;
    box-shadow:0 16px 60px rgba(0,0,0,.28);
}

.cineOperationIcon{
    width:64px;
    height:64px;
    border-radius:22px;
    background:#23242a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:18px;
}

.cineOperationTitle{
    font-size:30px;
    line-height:1.05;
    font-weight:900;
    margin-bottom:10px;
}

.cineOperationText{
    color:var(--muted);
    line-height:1.55;
}

.cineBottomNav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:60;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px;
    border-radius:28px;
    background:rgba(10,10,12,.88);
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
    box-shadow:0 18px 60px rgba(0,0,0,.48);
}

.cineBottomNav a{
    min-height:60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:18px;
    color:var(--muted);
    text-decoration:none;
    font-size:11px;
    font-weight:900;
}

.cineBottomNav a span{
    font-size:20px;
}

.cineBottomNav a.active{
    background:#202126;
    color:var(--gold);
}

@media(min-width:820px){

    .cineMain{
        padding:24px 24px 140px;
    }

    .cineHero{
        grid-template-columns:1.2fr .8fr;
        align-items:center;
    }

    .cineQuickStats{
        grid-template-columns:repeat(4,1fr);
    }

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

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

    .cineBottomNav{
        width:560px;
        left:50%;
        right:auto;
        transform:translateX(-50%);
    }
}

@media(max-width:640px){

    .cineHeader{
        flex-direction:column;
    }

    .cineHeader h1{
        font-size:40px;
    }

    .cineHeroTitle{
        font-size:36px;
    }

    .cineRadarArea{
        width:190px;
        height:190px;
    }
}


/* PHASE 61 HOLOGRAPHIC RUNTIME GUI */

.holoBody{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    background:
        radial-gradient(circle at top right,rgba(95,161,255,.12),transparent 30%),
        radial-gradient(circle at bottom left,rgba(240,207,122,.08),transparent 32%),
        #040506;
    color:#fff;
    position:relative;
}

.holoNoise{
    position:fixed;
    inset:0;
    opacity:.03;
    background-image:
        radial-gradient(#fff 1px, transparent 1px);
    background-size:18px 18px;
    pointer-events:none;
}

.holoLines{
    position:fixed;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:100% 34px;
    pointer-events:none;
}

.holoHeader{
    position:sticky;
    top:0;
    z-index:40;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:24px 18px 18px;
    backdrop-filter:blur(18px);
    background:rgba(4,5,6,.72);
    border-bottom:1px solid rgba(255,255,255,.05);
}

.holoLabel{
    color:#7ec7ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.6px;
    margin-bottom:10px;
}

.holoHeader h1{
    margin:0 0 10px;
    font-size:54px;
    line-height:.94;
    letter-spacing:-2.5px;
}

.holoEvent{
    color:var(--muted);
    font-size:15px;
}

.holoHeaderRight{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
}

.holoStatus{
    display:flex;
    align-items:center;
    gap:8px;
    color:#8cf3a3;
    font-size:12px;
    font-weight:900;
}

.holoStatus span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#63ff91;
    box-shadow:0 0 12px #63ff91;
}

.holoTime{
    background:#121317;
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px 16px;
    font-size:22px;
    font-weight:900;
}

.holoMain{
    width:100%;
    max-width:1140px;
    margin:0 auto;
    padding:18px 16px 120px;
}

.holoHero{
    display:grid;
    gap:26px;
    align-items:center;
    background:rgba(15,16,20,.82);
    border:1px solid rgba(126,199,255,.10);
    border-radius:38px;
    padding:28px;
    backdrop-filter:blur(18px);
    margin-bottom:18px;
    box-shadow:0 26px 90px rgba(0,0,0,.42);
}

.holoChip{
    display:inline-flex;
    min-height:36px;
    align-items:center;
    padding:0 14px;
    border-radius:999px;
    background:rgba(126,199,255,.10);
    border:1px solid rgba(126,199,255,.18);
    color:#7ec7ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    margin-bottom:18px;
}

.holoHeroTitle{
    max-width:740px;
    font-size:48px;
    line-height:.98;
    letter-spacing:-2px;
    font-weight:900;
    margin-bottom:16px;
}

.holoHeroText{
    max-width:700px;
    color:var(--muted);
    line-height:1.7;
    font-size:16px;
    margin-bottom:20px;
}

.holoActions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.holoActions a{
    min-height:58px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 24px;
    border-radius:22px;
    text-decoration:none;
    font-weight:900;
    background:linear-gradient(180deg,#24517c,#16334e);
    color:#fff;
}

.secondaryHoloAction{
    background:#181a1f !important;
    border:1px solid var(--line);
}

.holoVisual{
    position:relative;
    width:260px;
    height:260px;
    margin:auto;
}

.holoSphere{
    position:absolute;
    inset:50%;
    width:74px;
    height:74px;
    margin-left:-37px;
    margin-top:-37px;
    border-radius:50%;
    background:
        radial-gradient(circle at 30% 30%,#9bd9ff,#2a5b8e);
    box-shadow:0 0 40px rgba(126,199,255,.45);
}

.orbit{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px solid rgba(126,199,255,.12);
}

.orbit1{inset:10px;}
.orbit2{inset:45px;}
.orbit3{inset:80px;}

.holoNode{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#7ec7ff;
    box-shadow:0 0 12px rgba(126,199,255,.8);
}

.node1{top:30px;right:50px;}
.node2{top:110px;left:20px;}
.node3{bottom:40px;right:70px;}
.node4{bottom:60px;left:80px;}

.holoMetrics{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-bottom:18px;
}

.holoMetricCard{
    background:rgba(17,18,22,.84);
    border:1px solid rgba(255,255,255,.05);
    border-radius:28px;
    padding:20px;
    backdrop-filter:blur(12px);
}

.holoMetricCard strong{
    display:block;
    font-size:44px;
    line-height:1;
    margin-bottom:10px;
}

.holoMetricCard span{
    color:var(--muted);
}

.holoCenterGrid{
    display:grid;
    gap:18px;
    margin-bottom:18px;
}

.holoGlassCard{
    background:rgba(16,17,21,.84);
    border:1px solid rgba(255,255,255,.06);
    border-radius:32px;
    padding:24px;
    backdrop-filter:blur(18px);
}

.holoMiniTitle{
    color:#7ec7ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    margin-bottom:14px;
}

.holoGlassCard h2{
    margin:0 0 12px;
    font-size:36px;
    line-height:1.02;
    letter-spacing:-1.2px;
}

.holoGlassCard p{
    margin:0 0 18px;
    color:var(--muted);
    line-height:1.65;
}

.holoActionRow a{
    min-height:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    border-radius:20px;
    background:#1f4a72;
    color:#fff;
    text-decoration:none;
    font-weight:900;
}

.holoStatusList{
    display:grid;
    gap:14px;
}

.holoStatusItem{
    display:flex;
    align-items:center;
    gap:12px;
    background:#17181d;
    border:1px solid #2b2c32;
    border-radius:18px;
    padding:15px;
}

.holoStatusItem span{
    width:10px;
    height:10px;
    border-radius:50%;
}

.holoStatusItem .good{
    background:#63ff91;
    box-shadow:0 0 12px #63ff91;
}

.holoStatusItem .warn{
    background:#f0cf7a;
    box-shadow:0 0 12px rgba(240,207,122,.8);
}

.holoModuleGrid{
    display:grid;
    gap:16px;
}

.holoModuleCard{
    background:rgba(17,18,22,.88);
    border:1px solid rgba(255,255,255,.06);
    border-radius:32px;
    padding:22px;
    text-decoration:none;
    color:#fff;
    backdrop-filter:blur(18px);
    box-shadow:0 18px 60px rgba(0,0,0,.30);
}

.holoModuleIcon{
    width:66px;
    height:66px;
    border-radius:24px;
    background:#1d1f26;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:18px;
}

.holoModuleTitle{
    font-size:32px;
    line-height:1;
    font-weight:900;
    margin-bottom:10px;
}

.holoModuleText{
    color:var(--muted);
    line-height:1.55;
}

.holoBottomNav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:60;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px;
    border-radius:28px;
    background:rgba(10,10,12,.88);
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
}

.holoBottomNav a{
    min-height:60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:18px;
    text-decoration:none;
    color:var(--muted);
    font-size:11px;
    font-weight:900;
}

.holoBottomNav a span{
    font-size:20px;
}

.holoBottomNav a.active{
    background:#1f2731;
    color:#7ec7ff;
}

@media(min-width:860px){

    .holoMain{
        padding:24px 24px 140px;
    }

    .holoHero{
        grid-template-columns:1.15fr .85fr;
    }

    .holoMetrics{
        grid-template-columns:repeat(4,1fr);
    }

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

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

    .holoBottomNav{
        width:580px;
        left:50%;
        right:auto;
        transform:translateX(-50%);
    }
}

@media(max-width:640px){

    .holoHeader{
        flex-direction:column;
    }

    .holoHeader h1{
        font-size:44px;
    }

    .holoHeroTitle{
        font-size:38px;
    }

    .holoVisual{
        width:210px;
        height:210px;
    }
}


/* PHASE 62 SMART OPERATIONAL GUI */

.smartBody{
    margin:0;
    min-height:100vh;
    padding-bottom:96px;
    background:
        radial-gradient(circle at top right,rgba(240,207,122,.12),transparent 30%),
        radial-gradient(circle at bottom left,rgba(70,130,220,.10),transparent 34%),
        #050506;
    color:#fff;
}

.smartTop{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    padding:22px 18px 16px;
    background:rgba(5,5,6,.78);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.05);
}

.smartEyebrow,
.smartMini{
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    margin-bottom:9px;
}

.smartTop h1{
    margin:0 0 8px;
    font-size:38px;
    line-height:1;
    letter-spacing:-1.4px;
}

.smartTop p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

.smartLogout{
    color:var(--soft);
    text-decoration:none;
    border:1px solid var(--line);
    background:#141518;
    padding:10px 13px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
}

.smartMain{
    width:100%;
    max-width:980px;
    margin:0 auto;
    padding:16px;
}

.smartDecisionCard{
    background:linear-gradient(180deg,#1b1c20,#101113);
    border:1px solid rgba(240,207,122,.20);
    border-radius:32px;
    padding:22px;
    box-shadow:0 22px 80px rgba(0,0,0,.34);
    margin-bottom:16px;
}

.smartDecisionHeader{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    margin-bottom:14px;
}

.smartDecisionCard h2{
    margin:0;
    font-size:34px;
    line-height:1.04;
    letter-spacing:-1px;
}

.smartDecisionCard p{
    color:var(--soft);
    line-height:1.65;
    margin:0 0 18px;
}

.smartPriority{
    background:#5b471a;
    color:var(--gold);
    border-radius:999px;
    padding:9px 12px;
    font-size:11px;
    font-weight:900;
}

.smartActionRow{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.smartPrimary,
.smartSecondary{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    color:#fff;
    text-decoration:none;
    font-weight:900;
}

.smartPrimary{
    background:linear-gradient(180deg,#233b29,#17331d);
}

.smartSecondary{
    background:#202126;
    border:1px solid var(--line);
}

.smartStateCards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:16px;
}

.smartStateCard{
    background:#141518;
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px 12px;
    text-align:center;
}

.smartStateValue{
    font-size:30px;
    font-weight:900;
    line-height:1;
    margin-bottom:8px;
}

.smartStateLabel{
    color:var(--muted);
    font-size:12px;
    line-height:1.35;
}

.smartFlowPanel,
.smartAlertPanel{
    background:#111216;
    border:1px solid var(--line);
    border-radius:28px;
    padding:18px;
    margin-bottom:16px;
    box-shadow:0 14px 46px rgba(0,0,0,.22);
}

.smartPanelTitle{
    font-size:26px;
    font-weight:900;
    margin-bottom:16px;
}

.smartFlowList{
    display:grid;
    gap:12px;
}

.smartFlowItem{
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:13px;
    align-items:center;
    background:#18191d;
    border:1px solid #2b2d34;
    border-radius:22px;
    padding:14px;
}

.smartFlowIndex{
    width:42px;
    height:42px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2a2b30;
    font-weight:900;
}

.smartFlowItem.done .smartFlowIndex{
    background:#17331d;
    color:var(--greenText);
}

.smartFlowItem.active{
    border-color:rgba(240,207,122,.28);
}

.smartFlowItem.active .smartFlowIndex{
    background:#5b471a;
    color:var(--gold);
}

.smartFlowItem.locked{
    opacity:.55;
}

.smartFlowItem strong{
    display:block;
    margin-bottom:4px;
}

.smartFlowItem p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
}

.smartFlowState{
    color:var(--muted);
    font-size:10px;
    font-weight:900;
}

.smartCommandGrid{
    display:grid;
    gap:14px;
    margin-bottom:16px;
}

.smartCommandCard{
    display:flex;
    gap:16px;
    align-items:center;
    background:#141518;
    border:1px solid var(--line);
    border-radius:26px;
    padding:18px;
    color:#fff;
    text-decoration:none;
}

.smartCommandCard.highlighted{
    border-color:rgba(240,207,122,.28);
    background:linear-gradient(180deg,#1a1914,#121316);
}

.smartCommandIcon{
    width:58px;
    height:58px;
    border-radius:21px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#222329;
    font-size:28px;
    flex:0 0 auto;
}

.smartCommandCard h3{
    margin:0 0 6px;
    font-size:24px;
}

.smartCommandCard p{
    margin:0;
    color:var(--muted);
    line-height:1.45;
    font-size:14px;
}

.smartAlertPanel{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
}

.smartAlertPanel h2{
    margin:0 0 8px;
    font-size:26px;
}

.smartAlertPanel p{
    margin:0;
    color:var(--muted);
    line-height:1.5;
}

.smartOkBadge{
    width:58px;
    height:58px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#17331d;
    color:var(--greenText);
    font-weight:900;
    flex:0 0 auto;
}

.smartBottomNav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:60;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px;
    background:rgba(12,13,15,.92);
    border:1px solid rgba(255,255,255,.06);
    border-radius:28px;
    backdrop-filter:blur(18px);
}

.smartBottomNav a{
    min-height:60px;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:var(--muted);
    text-decoration:none;
    font-size:11px;
    font-weight:900;
}

.smartBottomNav a span{
    font-size:20px;
}

.smartBottomNav a.active{
    background:#202126;
    color:var(--gold);
}

@media(min-width:760px){
    .smartMain{
        padding:24px;
    }

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

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

    .smartBottomNav{
        width:560px;
        left:50%;
        right:auto;
        transform:translateX(-50%);
    }
}

@media(max-width:620px){
    .smartTop{
        flex-direction:column;
    }

    .smartFlowItem{
        grid-template-columns:42px 1fr;
    }

    .smartFlowState{
        grid-column:2;
    }

    .smartAlertPanel{
        flex-direction:column;
        align-items:flex-start;
    }

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


/* PHASE 63 ONE SCREEN ORGANIZER GUI */

.oneScreenBody{
    margin:0;
    min-height:100vh;
    padding-bottom:94px;
    background:
        radial-gradient(circle at top right,rgba(240,207,122,.10),transparent 28%),
        #050506;
    color:#fff;
}

.oneScreenHeader{
    position:sticky;
    top:0;
    z-index:40;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    padding:18px 16px 14px;
    background:rgba(5,5,6,.86);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.05);
}

.oneScreenLabel{
    color:var(--gold);
    font-size:11px;
    letter-spacing:1.4px;
    font-weight:900;
    margin-bottom:8px;
}

.oneScreenEvent h1{
    margin:0 0 7px;
    font-size:29px;
    line-height:1.05;
    letter-spacing:-.9px;
}

.oneScreenEvent p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.oneScreenLogout{
    flex:0 0 auto;
    color:var(--soft);
    text-decoration:none;
    background:#17181c;
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 12px;
    font-size:12px;
    font-weight:900;
}

.oneScreenMain{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:14px;
}

.decisionPanel{
    background:
        linear-gradient(180deg,rgba(32,30,22,.98),rgba(14,15,17,.98));
    border:1px solid rgba(240,207,122,.24);
    border-radius:30px;
    padding:20px;
    margin-bottom:14px;
    box-shadow:0 18px 60px rgba(0,0,0,.33);
}

.decisionTop{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
    margin-bottom:14px;
}

.decisionTop h2{
    margin:0;
    font-size:31px;
    line-height:1.04;
    letter-spacing:-.9px;
}

.decisionBadge{
    background:#5b471a;
    color:var(--gold);
    border-radius:999px;
    padding:9px 11px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.decisionPanel p{
    margin:0 0 18px;
    color:var(--soft);
    line-height:1.65;
}

.decisionButton{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:linear-gradient(180deg,#233b29,#17331d);
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:900;
}

.compactStatus{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:14px;
}

.compactItem{
    background:#141518;
    border:1px solid var(--line);
    border-radius:22px;
    padding:14px 10px;
    text-align:center;
}

.compactItem strong{
    display:block;
    font-size:24px;
    line-height:1;
    margin-bottom:7px;
}

.compactItem span{
    color:var(--muted);
    font-size:11px;
    line-height:1.25;
}

.stepMap{
    background:#111216;
    border:1px solid var(--line);
    border-radius:28px;
    padding:16px;
    margin-bottom:14px;
}

.stepMapTitle,
.drawerTitle{
    color:var(--gold);
    font-size:12px;
    letter-spacing:1.3px;
    font-weight:900;
    margin-bottom:14px;
}

.stepRow{
    display:flex;
    gap:13px;
    align-items:flex-start;
    background:#18191d;
    border:1px solid #2b2d34;
    border-radius:21px;
    padding:14px;
    color:#fff;
    text-decoration:none;
    margin-bottom:10px;
}

.stepRow:last-child{
    margin-bottom:0;
}

.stepRow span{
    width:38px;
    height:38px;
    border-radius:14px;
    background:#292a30;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    flex:0 0 auto;
}

.stepRow.done span{
    background:#17331d;
    color:var(--greenText);
}

.stepRow.current{
    border-color:rgba(240,207,122,.28);
    background:linear-gradient(180deg,#1c1a14,#15161a);
}

.stepRow.current span{
    background:#5b471a;
    color:var(--gold);
}

.stepRow.locked{
    opacity:.55;
}

.stepRow strong{
    display:block;
    margin-bottom:4px;
}

.stepRow p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
}

.quickDrawer{
    background:#111216;
    border:1px solid var(--line);
    border-radius:28px;
    padding:16px;
    margin-bottom:16px;
}

.drawerGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.drawerGrid a{
    min-height:82px;
    border-radius:20px;
    background:#18191d;
    border:1px solid #2b2d34;
    color:#fff;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-weight:900;
}

.drawerGrid span{
    font-size:24px;
}

.oneBottomNav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:60;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px;
    background:rgba(12,13,15,.92);
    border:1px solid rgba(255,255,255,.06);
    border-radius:28px;
    backdrop-filter:blur(18px);
}

.oneBottomNav a{
    min-height:58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:18px;
    color:var(--muted);
    text-decoration:none;
    font-size:11px;
    font-weight:900;
}

.oneBottomNav a span{
    font-size:20px;
}

.oneBottomNav a.active{
    background:#202126;
    color:var(--gold);
}

@media(min-width:760px){
    .oneScreenMain{
        padding:22px;
    }

    .drawerGrid{
        grid-template-columns:repeat(4,1fr);
    }

    .oneBottomNav{
        width:560px;
        left:50%;
        right:auto;
        transform:translateX(-50%);
    }
}

@media(max-width:480px){
    .decisionTop{
        flex-direction:column;
    }

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