/* ============================================================================
 * V15 · Aurora Noir — Layout (app shell)
 * ==========================================================================*/

/* ---- Page container ---- */
.v15-page { padding-bottom: calc(40px + var(--v15-safe-b)); }
.v15-page.no-nav { padding-bottom: calc(28px + var(--v15-safe-b)); }
.v15-wrap { padding: 0 var(--v15-s4); }

/* ---- Top bar (glass, sticky) ---- */
.v15-topbar {
    position: sticky; top: 0;
    z-index: var(--v15-z-topbar);
    display: flex; align-items: center; gap: var(--v15-s3);
    height: 56px;
    padding: 0 var(--v15-s4);
    padding-top: var(--v15-safe-t);
    background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.30) 80%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
}
.v15-topbar.solid {
    background: linear-gradient(180deg, rgba(5,5,7,0.92), rgba(5,5,7,0.78));
    border-bottom: 1px solid var(--v15-line);
}
.v15-topbar .v15-tb-title {
    flex: 1; min-width: 0;
    font-size: var(--v15-fs-lg); font-weight: 800; letter-spacing: -0.2px;
    text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v15-topbar .v15-tb-title.left { text-align: left; }

/* round icon button */
.v15-iconbtn {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--v15-txt);
    background: var(--v15-surface);
    border: 1px solid var(--v15-line);
    position: relative;
    transition: transform var(--v15-t-fast) var(--v15-ease), background var(--v15-t-fast), border-color var(--v15-t-fast);
}
.v15-iconbtn:active { transform: scale(0.9); }
.v15-iconbtn:hover { background: var(--v15-surface-2); border-color: var(--v15-line-2); }
.v15-iconbtn i.layui-icon { font-size: 18px; }
.v15-iconbtn .v15-dot {
    position: absolute; top: 7px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--v15-a3);
    box-shadow: 0 0 0 2px var(--v15-bg), 0 0 8px var(--v15-a3);
}

/* ---- Section heading ---- */
.v15-section { margin-top: var(--v15-s6); }
.v15-sec-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--v15-s4);
    margin-bottom: var(--v15-s3);
}
.v15-sec-head h2 {
    font-size: var(--v15-fs-xl); font-weight: 800; letter-spacing: -0.3px;
    display: flex; align-items: center; gap: var(--v15-s2);
}
.v15-sec-head h2::before {
    content: ''; width: 4px; height: 16px; border-radius: 2px;
    background: var(--v15-aurora);
    box-shadow: var(--v15-glow-a2);
}
.v15-sec-head .v15-more {
    font-size: var(--v15-fs-sm); color: var(--v15-txt-2);
    display: inline-flex; align-items: center; gap: 2px;
    transition: color var(--v15-t-fast);
}
.v15-sec-head .v15-more:hover { color: var(--v15-a1); }
.v15-sec-head .v15-more i.layui-icon { font-size: 12px; }

/* ---- Grid helpers ---- */
.v15-grid { display: grid; gap: var(--v15-s3); }
.v15-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.v15-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.v15-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.v15-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ---- Radial orbit navigation (bottom-LEFT FAB blooms up-right into an arc) - */
.v15-nav {
    position: fixed;
    left: 18px; bottom: calc(18px + var(--v15-safe-b));
    z-index: var(--v15-z-nav);
    width: 60px; height: 60px;
    --bloom: cubic-bezier(0.34, 1.5, 0.5, 1);   /* springy bloom (local only) */
}
@media (min-width: 520px) { .v15-nav { left: calc(50vw - 240px + 18px); } }

/* full-screen scrim with aurora glow emanating from the FAB corner */
.v15-nav-scrim {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(circle at 12% 92%, rgba(var(--v15-a2-rgb),0.22), transparent 42%),
        rgba(0,0,0,0.66);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--v15-t-mid) var(--v15-ease);
}
.v15-nav.open .v15-nav-scrim { opacity: 1; pointer-events: auto; }

/* faint orbit guide ring (revealed on open) */
.v15-nav::before {
    content: ''; position: absolute; left: -100px; bottom: -100px;
    width: 320px; height: 320px; border-radius: 50%;
    border: 1px dashed rgba(var(--v15-a1-rgb),0.22);
    opacity: 0; transform: scale(0.7);
    transition: opacity var(--v15-t-mid) var(--v15-ease), transform var(--v15-t-slow) var(--bloom);
    pointer-events: none;
}
.v15-nav.open::before { opacity: 1; transform: scale(1); }

/* trigger FAB */
.v15-nav-fab {
    position: absolute; left: 0; bottom: 0;
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--v15-aurora); color: #050507;
    box-shadow: 0 10px 30px rgba(var(--v15-a2-rgb),0.5), inset 0 1px 0 rgba(255,255,255,0.35);
    transition: transform var(--v15-t-mid) var(--bloom), box-shadow var(--v15-t-mid);
    z-index: 3;
}
.v15-nav-fab:active { transform: scale(0.9); }
.v15-nav-fab i.layui-icon { font-size: 26px; color: #050507; transition: transform var(--v15-t-mid) var(--bloom); }
.v15-nav.open .v15-nav-fab { transform: scale(1.06); box-shadow: 0 14px 44px rgba(var(--v15-a2-rgb),0.75); }
.v15-nav.open .v15-nav-fab i.layui-icon { transform: rotate(135deg); }
/* idle pulse ring (closed) */
.v15-nav-fab::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 1px solid rgba(var(--v15-a1-rgb),0.55);
    animation: v15-pulse 2.6s ease-in-out infinite; pointer-events: none;
}
.v15-nav.open .v15-nav-fab::after { animation: none; opacity: 0; }
/* burst ring on open */
.v15-nav-fab::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(var(--v15-a1-rgb),0.5); pointer-events: none;
}
.v15-nav.open .v15-nav-fab::before { animation: v15-burst 0.6s var(--v15-ease) forwards; }

/* orbiting items — Cyber Ice (cool holographic sweep cyan→violet; no warm/candy hues).
 * local-only vars; global aurora theme untouched. */
.v15-nav-item.i1 { --acr: 37,224,245;  --ac: #25E0F5; }   /* icy cyan      */
.v15-nav-item.i2 { --acr: 54,182,255;  --ac: #36B6FF; }   /* sky blue      */
.v15-nav-item.i3 { --acr: 79,131,255;  --ac: #4F83FF; }   /* electric blue */
.v15-nav-item.i4 { --acr: 138,123,255; --ac: #8A7BFF; }   /* indigo        */
.v15-nav-item.i5 { --acr: 181,123,255; --ac: #B57BFF; }   /* violet        */
.v15-nav-item {
    position: absolute; left: 0; bottom: 0;
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    --acr: var(--v15-a1-rgb); --ac: var(--v15-a1);
    color: var(--ac);
    background: radial-gradient(125% 130% at 50% 16%, rgba(var(--acr),0.9), rgba(var(--acr),0.30) 48%, rgba(7,12,24,0.97) 80%);
    border: 1px solid rgba(var(--acr),0.7);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 24px rgba(var(--acr),0.55),
                inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -10px 18px rgba(0,0,0,0.45);
    transform: translate(0,0) scale(0.2) rotate(-40deg); opacity: 0;
    pointer-events: none;
    transition: transform 0.46s var(--bloom), opacity 0.26s var(--v15-ease),
                border-color var(--v15-t-fast), background var(--v15-t-fast), box-shadow var(--v15-t-fast);
}
.v15-nav-item i.layui-icon { font-size: 18px; color: #fff; filter: drop-shadow(0 0 7px rgba(var(--acr),0.9)); transition: transform var(--v15-t-fast) var(--v15-ease); }
.v15-nav-item:hover {
    border-color: rgba(var(--acr),1);
    background: radial-gradient(125% 130% at 50% 16%, rgba(var(--acr),1), rgba(var(--acr),0.45) 48%, rgba(7,12,24,0.9) 80%);
    box-shadow: 0 0 0 1px rgba(var(--acr),0.8), 0 14px 38px rgba(var(--acr),0.65), 0 0 30px rgba(var(--acr),0.6);
}
.v15-nav-item:hover i.layui-icon { transform: scale(1.18); }
.v15-nav-item.active { background: var(--v15-aurora); color: #050507; border-color: rgba(255,255,255,0.4); box-shadow: 0 8px 28px rgba(var(--v15-a2-rgb),0.6), 0 0 24px rgba(var(--v15-a1-rgb),0.45); }
.v15-nav-item.active i.layui-icon { color: #050507; filter: none; }
.v15-nav-item.active:hover i.layui-icon { color: #050507; }
/* label tucked inside each item (no collision) */
.v15-nav-item .lb {
    font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: 0.1px;
    color: var(--ac); max-width: 54px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 0 0 6px rgba(var(--acr),0.55);
    opacity: 0; transition: opacity var(--v15-t-fast) var(--v15-ease);
}
.v15-nav.open .v15-nav-item .lb { opacity: 1; transition-delay: 0.30s; }
.v15-nav-item.active .lb { color: #050507; text-shadow: none; }

.v15-nav.open .v15-nav-item { opacity: 1; pointer-events: auto; }
/* arc positions (quarter circle, up → right), staggered springy bloom */
.v15-nav.open .v15-nav-item.i1 { transform: translate(0,-176px)    scale(1) rotate(0); transition-delay: 0.05s; }
.v15-nav.open .v15-nav-item.i2 { transform: translate(67px,-163px)  scale(1) rotate(0); transition-delay: 0.10s; }
.v15-nav.open .v15-nav-item.i3 { transform: translate(124px,-124px) scale(1) rotate(0); transition-delay: 0.15s; }
.v15-nav.open .v15-nav-item.i4 { transform: translate(163px,-67px)  scale(1) rotate(0); transition-delay: 0.20s; }
.v15-nav.open .v15-nav-item.i5 { transform: translate(176px,0)      scale(1) rotate(0); transition-delay: 0.25s; }