:root {
    --global-ink: #e9f0ff;
    --global-line: #4e618f;
    --global-bg: #050a19;
    --global-panel: #121f3b;
    --global-accent: #63b2ff;
    --global-sub: #a2b8df;
    --global-focus: #ff8f00;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--global-ink);
    background: var(--global-bg);
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    position: relative;
}

.cockpit-body {
    background: radial-gradient(circle at 80% -20%, #2f4f77 0%, #14253f 45%, #050a19 100%);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.95) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 42% 14%, rgba(255, 255, 255, 0.75) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.85) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 62% 58%, rgba(255, 255, 255, 0.7) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 24% 74%, rgba(255, 255, 255, 0.8) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 90% 76%, rgba(255, 255, 255, 0.65) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 10% 52%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 55% 84%, rgba(255, 255, 255, 0.6) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 70% 8%, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 33% 66%, rgba(255, 255, 255, 0.45) 0 1.5px, transparent 1.5px);
    background-size: 160px 160px, 180px 180px, 170px 170px, 200px 200px, 190px 190px, 220px 220px, 150px 150px, 210px 210px, 175px 175px, 230px 230px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transform-origin: 50% 46%;
    animation: star-warp 5.4s linear infinite;
    will-change: transform, opacity;
}

body::before {
    animation-delay: 0s;
}

body::after {
    animation-delay: -2.7s;
}

a {
    color: inherit;
    text-decoration: none;
}

.cockpit-content-wrapper,
.main-sidebar,
.main-header {
    position: relative;
    z-index: 1;
}

.cockpit-content-wrapper {
    background: linear-gradient(180deg, rgba(6, 11, 23, 0.94), rgba(7, 14, 28, 0.97));
    overflow: hidden;
    border-left: 1px solid rgba(103, 146, 204, 0.18);
}

.cockpit-content-wrapper::before,
.cockpit-content-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.75) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 34% 44%, rgba(255, 255, 255, 0.58) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 73% 22%, rgba(255, 255, 255, 0.62) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 86% 66%, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 22% 78%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 48% 70%, rgba(255, 255, 255, 0.48) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 12% 58%, rgba(255, 255, 255, 0.42) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 64% 40%, rgba(255, 255, 255, 0.38) 0 1.5px, transparent 1.5px);
    background-size: 150px 150px, 170px 170px, 160px 160px, 190px 190px, 180px 180px, 210px 210px, 140px 140px, 200px 200px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transform-origin: 50% 46%;
    animation: star-warp-soft 4.8s linear infinite;
    will-change: transform, opacity;
}

.cockpit-content-wrapper::before {
    animation-delay: 0s;
}

.cockpit-content-wrapper::after {
    animation-delay: -2.4s;
}

.cockpit-content-wrapper > * {
    position: relative;
    z-index: 1;
}

.cockpit-navbar {
    background: linear-gradient(90deg, rgba(11, 19, 37, 0.92), rgba(15, 27, 51, 0.96));
    border-bottom: 1px solid rgba(118, 153, 208, 0.4);
    backdrop-filter: blur(8px);
}

.cockpit-navbar .nav-link,
.cockpit-navbar .cockpit-lang-label,
.cockpit-navbar .cockpit-title {
    color: #d5e6ff;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cockpit-navbar .nav-link.is-current {
    color: #9ad3ff;
}

.cockpit-status {
    color: #84ffae;
    font-size: 12px;
}

.cockpit-sidebar {
    background: linear-gradient(180deg, #0d162a 0%, #0a1325 60%, #07111f 100%);
    border-right: 1px solid rgba(123, 158, 211, 0.24);
}

.cockpit-brand {
    border-bottom: 1px solid rgba(124, 155, 206, 0.26);
    background: rgba(16, 28, 49, 0.85);
}

.cockpit-sidebar .nav-sidebar .nav-link {
    color: #cad9f7;
    border-radius: 8px;
    margin: 2px 8px;
}

.cockpit-sidebar .nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(64, 121, 187, 0.62), rgba(84, 164, 216, 0.55));
    color: #f1f7ff;
    box-shadow: inset 0 0 0 1px rgba(168, 213, 255, 0.4);
}

.cockpit-footer {
    background: rgba(7, 14, 28, 0.94);
    border-top: 1px solid rgba(113, 152, 208, 0.24);
    color: #b6c8e6;
}

.card,
.panel,
.control-panel,
table {
    backdrop-filter: blur(2px);
}

.shell-loading #app-shell {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.shell-ready #app-shell {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
}

.boot-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    color: #fff;
    display: grid;
    place-items: center;
    padding: 24px;
}

.shell-ready .boot-splash {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.boot-splash-inner {
    width: min(620px, 92vw);
}

.boot-title {
    margin: 0;
    font-size: clamp(34px, 8vw, 86px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-family: "Arial Black", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    text-transform: none;
}

.boot-progress {
    margin-top: 22px;
    height: 14px;
    border: 1px solid #fff;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
}

.boot-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #fff, #b4d4ff);
    transition: width 0.12s ease;
}

.boot-progress-text {
    margin: 10px 2px 0;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #e6eeff;
    font-weight: 700;
}

@keyframes star-warp {
    0% {
        transform: scale(0.58);
        opacity: 0;
    }

    12% {
        opacity: 0.95;
    }

    100% {
        transform: scale(2.35);
        opacity: 0;
    }
}

@keyframes star-warp-soft {
    0% {
        transform: scale(0.62);
        opacity: 0;
    }

    15% {
        opacity: 0.8;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    .cockpit-content-wrapper::before,
    .cockpit-content-wrapper::after {
        animation: none;
        opacity: 0.55;
        transform: none;
    }
}

:focus-visible {
    outline: 3px solid var(--global-focus);
    outline-offset: 2px;
    border-radius: 8px;
}