/* =========================
   THEME SWITCHER
   ========================= */

.theme-switcher {
    position: fixed;
    top: 0;
    right: 0;
    transform: translate(-8px, 8px);
    z-index: 60;

    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 6px;
    border: 1px solid rgba(59,232,176,0.15);
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 12px rgba(59,232,176,0.08);

    opacity: 0;
    animation: textFade 0.8s ease 1s forwards;
}

.theme-switcher button {
    width: 56px;
    height: 24px;
    padding: 0;

    font-size: 11px;
    letter-spacing: 1px;

    background: transparent;
    border: 1px solid var(--text-soft);
    color: var(--text-soft);

    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-switcher button:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--button-glow);
}

.theme-switcher button.active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(59,232,176,0.06);
    box-shadow: 0 0 10px var(--button-glow);
}

/* =========================
   EYE COMPONENT
   ========================= */

.eye-wrapper {
    position: relative;
    width: var(--eye-width);
    height: var(--eye-height);
    margin: 0 auto 18px;

    opacity: 0;
    transform: scale(0.08);
    transform-origin: center center;
    filter: blur(10px);

    animation: eyeBoot 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
}

.eye-dock {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    pointer-events: none;
    will-change: transform;
}

.eye-dock .eye-wrapper {
    pointer-events: auto;
}

.eye-shape {
    position: absolute;
    inset: 0;

    width: var(--eye-width);
    height: var(--eye-height);

    border: none;
    background: transparent;
    box-shadow: none;
}

.eye-scene {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.eye-fill {
    fill: var(--eye-fill);
    filter:
        drop-shadow(0 0 5px var(--glow-soft-a))
        drop-shadow(0 0 10px var(--glow-soft-b));
}

.lid-top,
.lid-bottom {
    fill: none;
    stroke: var(--eye-stroke);
    stroke-width: 2.2;
    stroke-linecap: round;
    filter:
        drop-shadow(0 0 3px var(--glow-line-a))
        drop-shadow(0 0 8px var(--glow-line-b));
}

.eye-wrapper.focus .lid-top,
.eye-wrapper.focus .lid-bottom {
    filter:
        drop-shadow(0 0 5px var(--glow-focus-a))
        drop-shadow(0 0 12px var(--glow-focus-b));
}

.eye-wrapper.active .lid-top,
.eye-wrapper.active .lid-bottom {
    filter:
        drop-shadow(0 0 7px var(--glow-active-a))
        drop-shadow(0 0 16px var(--glow-active-b));
}

.iris-svg {
    fill: var(--iris-fill);
    filter:
        drop-shadow(0 0 6px var(--iris-glow-a))
        drop-shadow(0 0 12px var(--iris-glow-b));
    transition: r 0.18s ease;
}

.pupil-svg {
    fill: var(--pupil-fill);
    transition: r 0.18s ease;
}

.highlight-svg {
    fill: var(--highlight-fill);
    transition: opacity 0.18s ease, r 0.18s ease;
}

/* RED IRIS STATE */
.eye-wrapper.danger .iris-svg {
    fill: #ff2a3c;
    filter:
        drop-shadow(0 0 8px rgba(255, 42, 60, 0.6))
        drop-shadow(0 0 16px rgba(255, 42, 60, 0.3));
}

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

.btn {
    display: inline-block;
    padding: var(--btn-pad-y) var(--btn-pad-x);

    font-size: var(--button-size);
    text-decoration: none;

    border: 1px solid var(--accent);
    color: var(--accent);

    opacity: 0;
    transition: 0.2s;
    animation: textFade 0.8s ease 1.2s forwards;
}

.btn:hover {
    background: var(--accent);
    color: var(--button-text-hover);
    box-shadow: 0 0 12px var(--button-glow);
    transform: scale(1.05);
}

.btn:active {
    transform: scale(0.96);
}

/* =========================
   TITLE GLITCH
   ========================= */

.glitch {
    position: relative;
    display: inline-block;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0.25;
    pointer-events: none;
}

.glitch::before {
    color: var(--glitch-a);
    transform: translate(-1px, 0);
    animation: glitchA 4s infinite steps(1, end);
}

.glitch::after {
    color: var(--glitch-b);
    transform: translate(1px, 0);
    animation: glitchB 5s infinite steps(1, end);
}

/* =========================
   OVERLAYS
   ========================= */

.flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 90;
    opacity: 0;
    background: var(--flash-color, rgba(0, 255, 200, 0.12));
    mix-blend-mode: screen;
}

.flash.active {
    animation: flashAnim 0.4s ease;
}

.glitch-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;

    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 2px,
            transparent 4px
        );
}

.glitch-overlay.active {
    opacity: 1;
    animation: crtGlitch 0.18s steps(2, end) infinite;
}

.glitch-overlay::before {
    content: "";
    position: absolute;
    inset: 0;

    opacity: 0.4;
    mix-blend-mode: screen;

    background:
        linear-gradient(
            90deg,
            rgba(255,0,80,0.05),
            transparent,
            rgba(0,255,255,0.05)
        );
}
/* =========================
   NODE CARDS
   ========================= */

.node-card {
    position: relative;
    padding: 18px 18px 16px;

    border: 1px solid var(--card-border);
    background: var(--card-bg);
    backdrop-filter: blur(4px);

    box-shadow:
        0 0 12px var(--card-glow),
        inset 0 0 18px var(--card-inset-glow);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.node-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-border-hover);
    background: var(--card-bg-hover);
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow:
        0 0 16px var(--card-glow-hover),
        inset 0 0 20px var(--card-inset-glow-hover);
}

.node-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.node-card__status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-soft);
    box-shadow: 0 0 8px currentColor;
    color: var(--text-soft);
}

.node-card__status.is-online,
.node-card__status.is-stable,
.node-card__status.is-active,
.node-card__status.is-dev {
    background: var(--accent);
    color: var(--accent);
}

.node-card__label {
    color: var(--text-soft);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.node-card__title {
    margin: 0 0 10px;
    color: var(--text-main);
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.node-card__text {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.6;
}

.node-card__meta {
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 0.6px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.node-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.node-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.node-card__dot--private {
    background: #ff4d4d;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.8);
}

.node-card--link:hover .node-card__title {
    text-shadow:
        0 0 6px var(--title-glow),
        0 0 12px color-mix(in srgb, var(--accent) 16%, transparent);
}

.node-card--link:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/* =========================
   SECTION GLITCH TITLES
   ========================= */

.section-glitch {
    position: relative;
    display: inline-block;
}

.section-glitch::before,
.section-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.30;
}

.section-glitch::before {
    color: color-mix(in srgb, var(--accent-strong) 75%, white 25%);
    transform: translate(-1px, 0);
    animation: sectionGlitchA 6s infinite steps(1, end);
}

.section-glitch::after {
    color: color-mix(in srgb, var(--accent) 70%, white 10%);
    transform: translate(1px, 0);
    animation: sectionGlitchB 7s infinite steps(1, end);
}

/* =========================
   STATUS PANEL
   ========================= */

.status-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;

    padding: 18px 22px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow:
        0 0 12px var(--card-glow),
        inset 0 0 18px var(--card-inset-glow);
}

.status-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.6fr;
    gap: 28px;
    align-items: start;
}

.status-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;

    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    gap: 12px;
}

.status-label {
    color: var(--text-soft);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: lowercase;
    min-width: 0;
}

.status-value {
    color: var(--text-main);
    font-size: 14px;

    min-width: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* статусы */

.status-value.is-online,
.status-value.is-mounted,
.status-value.is-stable {
    color: var(--accent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
}

.status-value.is-warning {
    color: color-mix(in srgb, var(--accent-strong) 75%, #ffcc66 25%);
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent-strong) 35%, transparent);
}

.status-value.is-error,
.status-value.is-offline {
    color: color-mix(in srgb, #ff6b7a 75%, var(--accent) 25%);
    text-shadow: 0 0 6px color-mix(in srgb, #ff6b7a 35%, transparent);
}

.log-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 18px 24px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow:
        0 0 12px var(--card-glow),
        inset 0 0 18px var(--card-inset-glow);
}

.log-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.log-panel__title {
    color: var(--text-main);
    font-size: 16px;
    letter-spacing: 1.2px;
    text-transform: lowercase;
}

.log-stream {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.log-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 6px 0 7px;
    border-bottom: 1px solid rgba(0,255,156,0.08);
    opacity: 1;
    transform: translateY(0);
}

.log-entry:last-child {
    border-bottom: none;
}

.log-entry__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.log-entry__path-row {
    display: flex;
    min-width: 0;
    padding-left: 2px;
}

.log-entry__time {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0;
    color: var(--text-main);
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.92;
}
.log-chip {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 1px 5px;
    box-sizing: border-box;
    border: 1px solid rgba(0,255,156,0.14);
    border-radius: 3px;
    background: rgba(0,255,156,0.03);
    color: var(--text-main);
    font-size: 12.5px;
    line-height: 1;
}


.log-chip--type,
.log-chip--status {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.log-chip--ip,
.log-chip--method {
    white-space: nowrap;
    color: rgba(120, 255, 220, 0.9);
}

.log-chip--path {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    color: rgba(120, 255, 220, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: flex-start;
}

.log-entry.is-entering {
    animation: logEntryIn 0.26s ease;
}

.log-entry--info .log-chip--type,
.log-entry--info .log-chip--status {
    color: #00ff9c;
}

.log-entry--warn .log-chip--type,
.log-entry--warn .log-chip--status {
    color: #ffd166;
}

.log-entry--error .log-chip--type,
.log-entry--error .log-chip--status {
    color: #ff4d4d;
}
/* =========================
   NODE PAGE PANEL
   ========================= */

.node-page__panel {
    max-width: 760px;
    padding: 18px 22px;

    border: 1px solid var(--card-border);
    background: var(--card-bg);

    box-shadow:
        0 0 12px var(--card-glow),
        inset 0 0 18px var(--card-inset-glow);
}

.node-page__row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    align-items: start;

    padding: 10px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}

.node-page__row:last-child {
    border-bottom: none;
}

.node-page__label {
    color: var(--text-soft);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: lowercase;
}

.node-page__value {
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.6;
    min-width: 0;
}

.node-page__actions {
    margin-top: 22px;
}

/* =========================
   NODE BADGE SECTION
   ========================= */
.node-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 0.6rem;
}

.node-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(230, 235, 240, 0.88);
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    box-shadow:
        0 0 6px var(--card-glow),
        inset 0 0 8px var(--card-inset-glow);
}

.node-badge--neutral {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(230, 235, 240, 0.88);
}

.node-badge--accent {
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: color-mix(in srgb, var(--accent) 78%, white 22%);
}

.node-badge--ok,
.node-badge--fresh {
    border-color: rgba(0, 255, 156, 0.28);
    background: rgba(0, 255, 156, 0.1);
    color: rgba(180, 255, 225, 0.95);
}

.node-badge--recent,
.node-badge--warn {
    border-color: rgba(255, 196, 92, 0.3);
    background: rgba(255, 196, 92, 0.1);
    color: rgba(255, 222, 163, 0.95);
}

.node-badge--danger {
    border-color: rgba(255, 108, 108, 0.3);
    background: rgba(255, 108, 108, 0.1);
    color: rgba(255, 198, 198, 0.95);
}
/*================================
            Logout button
==================================*/
.section-heading--with-chip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.section-heading__main {
    min-width: 0;
    flex: 1 1 auto;
}

.section-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.35rem 0.8rem;

    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-soft);

    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;

    box-shadow:
        0 0 10px var(--card-glow),
        inset 0 0 12px var(--card-inset-glow);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.section-chip:hover {
    transform: translateY(-1px);
    border-color: var(--card-border-hover);
    background: var(--card-bg-hover);
    color: var(--text-main);
    box-shadow:
        0 0 14px var(--card-glow-hover),
        inset 0 0 16px var(--card-inset-glow-hover);
}

.section-chip:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

.section-chip--logout[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .section-heading--with-chip {
        flex-direction: column;
        align-items: flex-start;
    }
}

.node-card__label--private {
    opacity: 0;
    transform: translateY(-3px);
    animation: privateFadeIn 0.35s ease forwards;
    animation-delay: 0.1s;
}