@font-face {
    font-family: 'LocalFont';
    src: url('../../fonts/text-regular.woff2') format('woff2'),
         url('../../fonts/text-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'LocalFont';
    src: url('../../fonts/text-medium.woff2') format('woff2'),
         url('../../fonts/text-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'LocalFont';
    src: url('../../fonts/text-bold.woff2') format('woff2'),
         url('../../fonts/text-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

:root,
body.panel-mode-awake {
    --atomic-bg: #0B0E14;
    --atomic-text: #E2E8F0;
    --glass-surface: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);

    --accent-main: #00FF66;
    --accent-main-soft: #00FF66;
    --accent-main-muted: #004411;
    --accent-main-rgb: 0, 255, 102;
    --accent-neon: #9D00FF;
    --accent-neon-soft: #B84DFF;
    --accent-neon-rgb: 157, 0, 255;

    --atomic-cyan: var(--accent-main);
    --atomic-green: var(--accent-main);
    --atomic-violet: var(--accent-neon);
}

body.panel-mode-sleep {
    --accent-main: #9D00FF;
    --accent-main-soft: #B84DFF;
    --accent-main-muted: #4E0080;
    --accent-main-rgb: 157, 0, 255;
}

body {
    background-color: var(--atomic-bg);
    color: var(--atomic-text);
    font-family: 'LocalFont', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}
h1, h2, h3, .brand {
    font-family: 'LocalFont', system-ui, -apple-system, sans-serif;
    font-weight: 700;
}

.glow-cyan { text-shadow: 0 0 8px var(--atomic-cyan); }
.glow-green { box-shadow: 0 0 8px var(--atomic-green); }
.glow-red { box-shadow: 0 0 8px rgba(239, 68, 68, 0.75); }
.glow-text-green {
    color: var(--accent-main);
    text-shadow: 0 0 5px rgba(var(--accent-main-rgb), 0.5);
}
.glow-text-red { color: #ef4444; text-shadow: 0 0 5px rgba(239,68,68,0.55); }
.glow-text-purple {
    color: var(--accent-neon-soft);
    text-shadow: 0 0 5px rgba(var(--accent-neon-rgb), 0.55), 0 0 14px rgba(var(--accent-neon-rgb), 0.35);
}
.glow-purple { box-shadow: 0 0 8px rgba(var(--accent-neon-rgb), 0.75); }
.glow-neon-purple {
    color: var(--accent-neon-soft);
    text-shadow:
      0 0 8px var(--accent-neon),
      0 0 16px var(--accent-neon),
      0 0 30px #7A00CC,
      0 0 60px rgba(var(--accent-neon-rgb), 0.6);
    position: relative;
    z-index: 1;
}

canvas#particles {
    filter: contrast(1.2) brightness(1.1);
}

.glow-border { box-shadow: 0 0 12px rgba(var(--accent-main-rgb), 0.15); }
.glow-text { color: var(--atomic-cyan); text-shadow: 0 0 5px rgba(var(--accent-main-rgb), 0.5); }

.glass {
    background: var(--glass-surface);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}
.glass-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.nav-item { transition: all 0.2s ease; color: #94a3b8; }
.nav-item .ph { color: #64748b; transition: color 0.2s ease; }
.nav-item:hover {
    background: rgba(var(--accent-main-rgb), 0.08);
    color: var(--accent-main-soft);
    box-shadow: inset 0 0 10px rgba(var(--accent-main-rgb), 0.1);
}
.nav-item:hover .ph { color: var(--accent-main-soft); }
.nav-item.active {
    border-left: 2px solid var(--accent-main);
    color: var(--accent-main-soft);
    background: rgba(var(--accent-main-rgb), 0.08);
}
.nav-item.active .ph { color: var(--accent-main); }

.panel-user-avatar {
    border: 1px solid rgba(var(--accent-main-rgb), 0.5);
    background: rgba(var(--accent-main-rgb), 0.12);
}
.panel-user-name {
    color: var(--accent-main-soft);
    text-shadow: 0 0 5px rgba(var(--accent-main-rgb), 0.45);
}

aside.glass {
    border-right: 1px solid rgba(var(--accent-main-rgb), 0.08);
}

body.panel-mode-sleep aside.glass {
    border-right-color: rgba(var(--accent-neon-rgb), 0.12);
}

#visitor-filter-bar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    visibility: visible !important;
    opacity: 1 !important;
}

.visitor-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

.visitor-filter-btn:hover {
    color: var(--accent-main-soft);
    border-color: rgba(var(--accent-main-rgb), 0.35);
}

.visitor-filter-btn.is-active {
    border-color: rgba(var(--accent-main-rgb), 0.6);
    background: rgba(var(--accent-main-rgb), 0.18);
    color: var(--accent-main-soft);
    box-shadow: 0 0 12px rgba(var(--accent-main-rgb), 0.15);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--atomic-bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

.ping { animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

#particles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
}

.text-red-400 { color: rgb(248 113 113); }

.atomic-logo {
    width: 54px;
    height: 54px;
    margin-right: 12px;
    flex-shrink: 0;
    color: var(--atomic-green);
    filter: drop-shadow(0 0 8px var(--atomic-green));
}
.panel-brand-text {
    color: var(--atomic-green);
    text-shadow: 0 0 5px rgba(var(--accent-main-rgb), 0.5);
}

body.panel-mode-sleep .glass-card {
    border-color: rgba(var(--accent-main-rgb), 0.15);
}

.visitor-card-glow-active {
    background-color: rgba(var(--accent-main-rgb), 0.05);
}

.login-accent-glow {
    background-color: rgba(var(--accent-main-rgb), 0.1);
}

body.panel-mode-sleep [class*="text-cyan-"] { color: var(--accent-main-soft) !important; }
body.panel-mode-sleep [class*="border-cyan-"] { border-color: rgba(var(--accent-main-rgb), 0.5) !important; }
body.panel-mode-sleep [class*="border-t-cyan-"] { border-top-color: var(--accent-main) !important; }
body.panel-mode-sleep [class*="bg-cyan-"] { background-color: rgba(var(--accent-main-rgb), 0.12) !important; }
body.panel-mode-sleep [class*="hover:bg-cyan-"]:hover { background-color: rgba(var(--accent-main-rgb), 0.2) !important; }
body.panel-mode-sleep [class*="hover:border-cyan-"]:hover { border-color: rgba(var(--accent-main-rgb), 0.5) !important; }
body.panel-mode-sleep [class*="hover:text-cyan-"]:hover { color: var(--accent-main-soft) !important; }
body.panel-mode-sleep [class*="focus:border-cyan-"]:focus { border-color: var(--accent-main) !important; }
body.panel-mode-sleep [class*="text-green-"] { color: var(--accent-main-soft) !important; }
body.panel-mode-sleep [class*="border-green-"] { border-color: rgba(var(--accent-main-rgb), 0.5) !important; }
body.panel-mode-sleep [class*="bg-green-"] { background-color: rgba(var(--accent-main-rgb), 0.12) !important; }
body.panel-mode-sleep [class*="hover:border-green-"]:hover { border-color: rgba(var(--accent-main-rgb), 0.5) !important; }
body.panel-mode-sleep [class*="hover:bg-green-"]:hover { background-color: rgba(var(--accent-main-rgb), 0.12) !important; }
body.panel-mode-sleep .border-l-cyan-500 { border-left-color: var(--accent-main) !important; }

body.panel-mode-sleep .panel-brand-text {
    color: var(--accent-neon-soft);
    text-shadow: 0 0 8px rgba(var(--accent-neon-rgb), 0.55);
}

body.panel-mode-sleep .panel-main-title {
    color: #f3e8ff;
}

.visitor-card-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.visitor-card-toggle:hover .visitor-card-chevron {
    color: var(--accent-main-soft);
}

.visitor-card-chevron {
    margin-left: auto;
    color: #64748b;
    font-size: 1rem;
    transition: color 0.2s, transform 0.2s;
}

.visitor-card.is-expanded .visitor-card-chevron {
    transform: rotate(180deg);
}

.visitor-card-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.visitor-card-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.visitor-card-details.hidden {
    display: none;
}

.visitor-card-header-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-family: inherit;
}

.visitor-card-header-row .header-sep {
    color: #374151;
}

.visitor-card-page {
    color: var(--accent-main-soft);
    font-weight: 500;
}

body.panel-mode-sleep .atomic-logo {
    color: #C77DFF;
    filter:
        drop-shadow(0 0 10px #9D00FF)
        drop-shadow(0 0 22px #9D00FF)
        drop-shadow(0 0 40px rgba(157, 0, 255, 0.95))
        drop-shadow(0 0 64px rgba(157, 0, 255, 0.55));
}

.theme-accent-icon { color: var(--accent-main); }
.theme-accent-text { color: var(--accent-main); }

.visitor-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.65rem;
}

.visitor-action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 88px;
    padding: 0.75rem 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
    font-family: inherit;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.visitor-action-tile i {
    font-size: 1.65rem;
    line-height: 1;
    color: #64748b;
    transition: color 0.2s;
}

.visitor-action-tile:hover {
    border-color: rgba(var(--accent-main-rgb), 0.45);
    background: rgba(var(--accent-main-rgb), 0.08);
    color: var(--accent-main-soft);
}

.visitor-action-tile:hover i {
    color: var(--accent-main-soft);
}

.visitor-action-tile--active {
    border-color: var(--accent-main);
    background: rgba(var(--accent-main-rgb), 0.12);
    color: var(--accent-main-soft);
    animation: visitor-action-pulse 1.15s ease-in-out infinite;
}

.visitor-action-tile--active i {
    color: var(--accent-main);
}

.visitor-action-tile--loading {
    cursor: default;
    pointer-events: none;
}

.visitor-action-tile--loading:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
}

.visitor-action-tile--loading:hover i {
    color: #64748b;
}

.visitor-action-tile--retry:hover {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.08);
    color: #fcd34d;
}

.visitor-action-tile--delete:hover {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
}

@keyframes visitor-action-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(var(--accent-main-rgb), 0.35);
    }
    50% {
        box-shadow: 0 0 22px rgba(var(--accent-main-rgb), 0.9), 0 0 36px rgba(var(--accent-main-rgb), 0.45);
    }
}

.visitor-action-tile--restart:hover {
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(56, 189, 248, 0.08);
    color: #7dd3fc;
}

.visitor-action-tile--restart:hover i {
    color: #38bdf8;
}

/* ——— Responsive admin panel ——— */

.panel-page-title {
    font-size: clamp(1.35rem, 4vw, 1.875rem);
    line-height: 1.2;
}

.panel-stat-value {
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    line-height: 1.1;
}

.panel-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.panel-stat-icon i {
    font-size: 1.35rem;
}

.panel-top-bar {
    min-height: 3.5rem;
    height: auto;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.panel-mode-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.panel-mode-btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.65rem;
}

.panel-sound-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.panel-sound-btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.6rem;
    white-space: nowrap;
}

.panel-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 14, 20, 0.92);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.35rem 0.25rem;
    border-radius: 0.5rem;
    color: #64748b;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

.panel-mobile-nav-item i {
    font-size: 1.25rem;
    line-height: 1;
}

.panel-mobile-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-mobile-nav-item.is-active,
.panel-mobile-nav-item:hover {
    color: var(--accent-main-soft);
    background: rgba(var(--accent-main-rgb), 0.08);
}

.panel-mobile-nav-settings {
    display: flex;
    flex: 1;
    min-width: 0;
}

main.panel-main {
    min-width: 0;
}

.panel-scroll {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
    .panel-scroll {
        padding: 1rem 0.875rem calc(4.75rem + env(safe-area-inset-bottom, 0px));
    }

    main .glass-card {
        padding: 1rem !important;
    }

    .panel-stat-card .panel-stat-value {
        margin-top: 0.35rem;
    }

    .visitor-action-grid {
        grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
        gap: 0.45rem;
    }

    .visitor-action-tile {
        min-height: 4.25rem;
        padding: 0.45rem 0.3rem;
        border-radius: 0.65rem;
        font-size: 0.6rem;
        gap: 0.3rem;
    }

    .visitor-action-tile i {
        font-size: 1.2rem;
    }

    .visitor-card-header-row {
        font-size: 0.625rem;
        gap: 0.25rem;
    }

    .visitor-card-header-row .ml-1 {
        margin-left: 0.15rem !important;
    }

    .visitor-card-header-row .px-2 {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }

    .visitor-card .font-mono.text-sm.grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    #login-overlay .glass-card {
        padding: 1.25rem !important;
        margin: 0.75rem;
        max-width: calc(100vw - 1.5rem);
    }

    .panel-top-bar .flex.items-center.text-sm {
        margin-right: 0.5rem !important;
        padding-right: 0.5rem !important;
        border-right: none !important;
    }
}

@media (max-width: 380px) {
    .visitor-action-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .panel-mode-group {
        width: 100%;
        justify-content: flex-end;
    }
}
