/* ═══════════════════════════════════════════
   XIVIVIDE PANEL — Purple/Violet Theme
   ═══════════════════════════════════════════ */

:root {
    --bg-base:      #0a0812;
    --bg-surface:   #12101f;
    --bg-card:      #1a1730;
    --bg-card-2:    #201c3d;
    --bg-hover:     #2a2450;
    --border:       #362f5a;
    --border-light: #4d4480;
    --accent:       #9059ba;
    --accent-2:     #b37bdc;
    --accent-glow:  rgba(144,89,186,0.18);
    --text-primary: #e8e0f5;
    --text-secondary: #b5aad4;
    --text-muted:   #6a5f94;
    --green:        #3dd68c;
    --red:          #f87171;
    --yellow:       #facc15;
    --blue:         #b37bdc;
    --tag-ban:      rgba(248,113,113,0.15);
    --tag-ban-text: #f87171;
    --tag-kick:     rgba(251,191,36,0.15);
    --tag-kick-text:#fbbf24;
    --tag-msg:      rgba(248,113,113,0.12);
    --tag-msg-text: #f87171;
    --tag-move:     rgba(179,123,220,0.15);
    --tag-move-text:#b37bdc;
    --tag-channel:  rgba(52,211,153,0.15);
    --tag-channel-text:#34d399;
    --tag-role:     rgba(179,123,220,0.15);
    --tag-role-text:#c9a3e8;
    --tag-default:  rgba(144,89,186,0.12);
    --tag-default-text: #b37bdc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
}

/* ══════════ AUTH ══════════ */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(144,89,186,0.16) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 100% 100%, rgba(179,123,220,0.10) 0%, transparent 60%),
                var(--bg-base);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 40px 36px;
    background: rgba(26, 23, 48, 0.72);
    border: 1px solid var(--border);
    border-radius: 20px;
    backdrop-filter: blur(24px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(144,89,186,0.1), 0 0 80px rgba(144,89,186,0.08);
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.logo-box {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    box-shadow: 0 8px 24px rgba(144,89,186,0.35);
}

.auth-title {
    font-family: 'Orbitron', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 8px;
}

.auth-sub {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 28px;
    line-height: 1.6;
}

.field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.auth-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    margin-bottom: 16px;
}

.auth-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Поле Discord ID — потолще шрифт под цифры + аккуратный "пульс" на каждое
   нажатие клавиши (не мигание, а мягкое затухающее свечение по краю поля) */
.discord-id-input {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

@keyframes id-input-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(144,89,186,0.45); }
    100% { box-shadow: 0 0 0 8px rgba(144,89,186,0); }
}

.discord-id-input.typing-pulse {
    animation: id-input-pulse 0.5s ease-out;
}

.auth-input::placeholder {
    color: var(--text-muted);
}

.code-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    letter-spacing: 0.5em;
}

.auth-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(144,89,186,0.3);
}

.auth-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(144,89,186,0.4); }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.auth-link-btn {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    cursor: pointer;
    padding: 10px 0 0;
    text-align: center;
    transition: opacity 0.2s;
}
.auth-link-btn:hover { opacity: 0.7; }

.auth-hint {
    margin-top: 16px;
    font-size: 12px;
    color: var(--accent);
    text-align: center;
    line-height: 1.6;
}

.auth-msg {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    display: none;
}
.auth-msg.success { display: block; background: rgba(61,214,140,0.1); color: var(--green); border: 1px solid rgba(61,214,140,0.2); }
.auth-msg.error   { display: block; background: rgba(248,113,113,0.1); color: var(--red);   border: 1px solid rgba(248,113,113,0.2); }
.auth-msg.info    { display: block; background: rgba(144,89,186,0.1); color: var(--accent); border: 1px solid rgba(144,89,186,0.2); }

/* ══════════ PANEL LAYOUT ══════════ */

.panel-layout {
    display: flex;
    min-height: 100vh;
}

/* ══════════ SIDEBAR ══════════ */

.sidebar {
    width: 210px;
    min-width: 210px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}


.brand-name {
    font-family: 'Orbitron', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.brand-sub {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.sidebar-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 14px 16px 4px;
    text-transform: uppercase;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.sidebar-item svg { opacity: 0.6; flex-shrink: 0; }
.sidebar-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-item:hover svg { opacity: 1; }

.sidebar-item.active {
    background: rgba(144,89,186,0.1);
    color: var(--accent);
    border-left: 2px solid var(--accent);
    padding-left: 14px;
}
.sidebar-item.active svg { opacity: 1; }

.sidebar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    margin-left: 1px;
}

.sidebar-active-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-left: 1px;
    box-shadow: 0 0 8px var(--accent);
}

.sidebar-badge {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding: 12px 16px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}


.sidebar-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.sidebar-user-role {
    font-size: 10px;
    color: var(--text-muted);
}

.sidebar-logout {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.sidebar-logout:hover { border-color: var(--red); color: var(--red); }

.sidebar-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ══════════ TOPBAR ══════════ */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    height: 52px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topbar-brand {
    font-family: 'Orbitron', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-2);
    letter-spacing: 0.08em;
}

.topbar-title {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.topbar-center {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: center;
}

.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    width: 200px;
}

.topbar-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    width: 100%;
}

.topbar-search svg { color: var(--text-muted); flex-shrink: 0; }

.topbar-kbd {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

.topbar-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70% { box-shadow: 0 0 0 7px transparent; opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topbar-id-input {
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    width: 140px;
    transition: border-color 0.2s;
}
.topbar-id-input:focus { border-color: var(--accent); }
.topbar-id-input::placeholder { color: var(--text-muted); }

.topbar-icon-btn {
    width: 32px;
    height: 32px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.topbar-icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ══════════ TABS ══════════ */

.tabs-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
}

.tab {
    padding: 11px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.tab:hover { color: var(--text-primary); }

.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 500;
}

/* ══════════ AUDIT SECTION ══════════ */

.audit-section {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.audit-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.audit-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.audit-source {
    font-size: 12px;
    color: var(--text-muted);
}

/* ══════════ AUDIT PANEL ══════════ */

.audit-panel {
    background: rgba(26, 23, 48, 0.5);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.audit-panel-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
}

.audit-panel-title-block {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.audit-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.audit-count {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1px 8px;
}

.audit-panel-sub {
    font-size: 12px;
    color: var(--text-muted);
}

/* ══════════ FILTER BAR ══════════ */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card-2);
    flex-wrap: wrap;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.filter-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
}

.filter-select {
    padding: 7px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
.filter-select:focus { border-color: var(--accent); }

.filter-search {
    flex: 1;
    min-width: 160px;
    padding: 7px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.filter-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(144,89,186,0.25); }
.filter-search::placeholder { color: var(--text-muted); }

.load-audit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
    border-radius: 9px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(144,89,186,0.25);
}
.load-audit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(144,89,186,0.4); filter: brightness(1.08); }
.load-audit-btn:active { transform: translateY(0) scale(0.97); }
.load-audit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.load-audit-btn svg { flex-shrink: 0; }

/* ══════════ AUDIT LIST ══════════ */

.audit-list {
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}



.audit-entry:last-child { border-bottom: none; }
.audit-entry:hover { background: var(--bg-hover); }


.tag-ban       { background: var(--tag-ban);     color: var(--tag-ban-text); }
.tag-kick      { background: var(--tag-kick);    color: var(--tag-kick-text); }
.tag-msg       { background: var(--tag-msg);     color: var(--tag-msg-text); }
.tag-move      { background: var(--tag-move);    color: var(--tag-move-text); }
.tag-channel   { background: var(--tag-channel); color: var(--tag-channel-text); }
.tag-role      { background: var(--tag-role);    color: var(--tag-role-text); }
.tag-default   { background: var(--tag-default); color: var(--tag-default-text); }


.audit-entry-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.audit-entry-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.audit-executor {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.audit-arrow {
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
}

.audit-target {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
}

.audit-badge-bot {
    font-size: 10px;
    padding: 1px 6px;
    background: rgba(144,89,186,0.1);
    color: var(--accent);
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.audit-entry-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.audit-entry-desc b {
    color: var(--text-primary);
    font-weight: 500;
}

.audit-entry-desc .channel-mention {
    color: var(--accent);
}

.audit-entry-reason {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}


.audit-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}


/* ══════════ SCROLLBAR ══════════ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ══════════ RESPONSIVE ══════════ */

@media (max-width: 768px) {
    .sidebar { display: none; }
    .topbar-center { display: none; }
    .audit-section { padding: 12px; }
}
/* ═══ Дополнительные теги для аудита ═══ */

/* ═══ Кликабельные имена ═══ */
.audit-executor-clickable,
.audit-executor-clickable:hover {
    color: var(--accent);
    text-decoration: underline;
}
.audit-target-clickable:hover {
    color: var(--accent-2);
    text-decoration: underline;
}

/* ═══ Мета-чипсы для ролей ═══ */
.audit-meta-chip.add { color: #34d399; border-color: rgba(52,211,153,0.3); }
.audit-meta-chip.remove { color: #f87171; border-color: rgba(248,113,113,0.3); }

/* ═══ Popup ═══ */
.user-popup-close:hover { color: var(--text-primary); }
.user-popup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.popup-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
/* ═══ ФИКС: фиксированная ширина для тегов действий ═══ */

.audit-entry-tag {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    margin-top: 2px;
    min-width: 140px;
    text-align: center;
    max-width: 140px;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* ═══ ФИКС: выравнивание всей строки ═══ */
.audit-entry {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.audit-entry-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    overflow: hidden;
}

.audit-entry-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.audit-entry-time {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: 3px;
    min-width: 80px;
    text-align: right;
}

/* ═══ ФИКС: обрезка длинных имен ═══ */
.audit-executor-clickable,
.audit-executor,

.audit-executor-clickable {
    cursor: pointer;
    transition: color 0.2s;
    max-width: 180px;
}

/* ══════════ MY ACCOUNT SCREEN ══════════ */

.account-loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.account-panel {
    background: rgba(26, 23, 48, 0.5);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px;
    margin: 0 24px 24px;
    backdrop-filter: blur(10px);
}

.account-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.account-avatar-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
}

.account-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--bg-card-2);
}

.account-status-dot {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--bg-card);
}

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

.account-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.account-username {
    font-size: 13px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.account-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.account-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-weight: 600;
}

.account-badge-boost {
    color: #ec4899;
    border-color: rgba(236,72,153,0.4);
    background: rgba(236,72,153,0.1);
}

.account-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.account-detail-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 130px;
    flex-shrink: 0;
    padding-top: 2px;
}

.account-detail-value {
    font-size: 13px;
    color: var(--text-secondary);
}

.account-roles-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.account-no-roles {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}

.sidebar-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f87171, #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}
.user-popup-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 4px 10px;
    min-height: 28px;

    background: rgb(43,45,49);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;

    color: #dbdee1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    transition: background .15s ease;
}

.user-popup-role-chip:hover {
    background: rgb(53,55,60);
}

/* ══════════ SCRIPTS TAB ══════════ */

.scripts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.script-card {
    background: rgba(26, 23, 48, 0.55);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.script-card:hover {
    border-color: var(--border-light);
    box-shadow: 0 8px 28px rgba(144,89,186,0.15);
}

.script-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.script-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.script-status-dot.pulse {
    animation: pulse-ring 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.script-card-title-block {
    flex: 1;
    min-width: 0;
}

.script-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.script-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.script-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.script-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.script-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.script-btn {
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    transition: opacity 0.2s, transform 0.15s, border-color 0.2s, box-shadow 0.15s;
}
.script-btn:hover { opacity: 0.9; transform: translateY(-1px); border-color: var(--border-light); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.script-btn:active { transform: translateY(0) scale(0.97); }
.script-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

.script-btn-start   { border-color: rgba(61,214,140,0.4); color: var(--green); }
.script-btn-restart { border-color: rgba(251,191,36,0.4); color: var(--yellow); }
.script-btn-stop    { border-color: rgba(248,113,113,0.4); color: var(--red); }
.script-btn-console  { border-color: var(--border-light); color: var(--text-secondary); }



.script-btn-files  { border-color: rgba(144,89,186,0.4); color: #b37bdc; }
.script-btn-access { border-color: rgba(144,89,186,0.4); color: #b37bdc; }
.script-btn-delete { border-color: rgba(248,113,113,0.4); color: var(--red); }

/* ══════════ SCRIPTS TOOLBAR / CREATE FORM ══════════ */

.scripts-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.scripts-create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border);
}

.script-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.script-field label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.script-field-checkbox {
    justify-content: flex-end;
}
.script-field-checkbox label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-transform: none;
    color: var(--text-secondary);
}

.scripts-create-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
}

/* ══════════ FILE MANAGER (per-script, admin only) ══════════ */

.script-files {
    margin-top: 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.script-files-loading {
    padding: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.files-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.files-breadcrumb {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.files-crumb {
    cursor: pointer;
    color: #b37bdc;
}
.files-crumb:hover { text-decoration: underline; }
.files-crumb-sep { color: var(--text-muted); }

.files-toolbar-actions {
    display: flex;
    gap: 8px;
}

.files-upload-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.files-list {
    max-height: 460px;
    overflow-y: auto;
    overflow-x: visible;
}

.files-list-head {
    display: grid;
    grid-template-columns: 34px 1fr 110px 170px 34px 34px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card-2);
    z-index: 1;
}
.files-list-head-check {
    display: flex;
}

.file-row {
    display: grid;
    grid-template-columns: 34px 1fr 110px 170px 34px 34px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: var(--bg-hover); }

.file-row-check, .files-list-head-check input {
    cursor: pointer;
    accent-color: var(--accent, #9059ba);
}

.file-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b37bdc;
    cursor: pointer;
    overflow: hidden;
    min-width: 0;
}
.file-row-name-icon {
    flex: 0 0 auto;
    display: inline-flex;
    font-size: 15px;
}
.file-row-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-row[data-is-dir="0"] .file-row-name { color: var(--text-primary); }
.file-row-name:hover { text-decoration: underline; color: #b37bdc; }

.file-row-size, .file-row-date {
    color: var(--text-secondary);
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-row-menu-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

.file-row-download-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    justify-self: center;
}
.file-row-download-btn:hover { color: #b37bdc; background: var(--bg-card); }

.file-row-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
}
.file-row-menu-btn:hover { color: var(--text-primary); background: var(--bg-card); }

.file-row-menu {
    /* Позиция (top/left/position:fixed) выставляется из JS при открытии —
       так меню не обрезается overflow:auto контейнера списка файлов и
       всегда рисуется поверх остального содержимого. */
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 168px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    padding: 4px;
    z-index: 10050;
    display: none;
}
.file-row-menu.open { display: block; }

.file-row-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    color: var(--text-primary);
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.file-row-menu-item:hover { background: var(--bg-hover); }
.file-row-menu-item.danger { color: var(--red); }
.file-row-menu-item.danger:hover { background: rgba(248,113,113,0.12); }
.file-row-menu-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 2px;
}

.files-selection-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card-2);
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}


.file-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.file-editor-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 12.5px;
    padding: 6px 10px;
    cursor: pointer;
}
.file-editor-tool-btn:hover { color: var(--text-primary); border-color: var(--border-light); }
.file-editor-tool-btn.active { color: #b37bdc; border-color: rgba(144,89,186,0.5); background: rgba(144,89,186,0.1); }

.file-editor-toolbar-info {
    font-size: 12px;
    color: var(--text-muted);
}

.file-editor-searchbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
}

.file-editor-search-input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12.5px;
    padding: 6px 8px;
    outline: none;
    min-width: 140px;
    flex: 1 1 160px;
}
.file-editor-search-input:focus { border-color: var(--accent); }

.file-editor-tool-btn-sm {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 5px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.file-editor-tool-btn-sm:hover { color: var(--text-primary); border-color: var(--border-light); }
.file-editor-tool-btn-sm.active { color: #b37bdc; border-color: rgba(144,89,186,0.5); background: rgba(144,89,186,0.1); }

.file-editor-search-count {
    font-size: 11.5px;
    color: var(--text-muted);
    min-width: 40px;
    text-align: center;
}

.file-editor-searchbar-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 0 2px;
}

.file-editor-body-wrap {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card-2);
}

.file-editor-gutter {
    flex: 0 0 auto;
    padding: 10px 10px 10px 12px;
    background: #08090d;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 20px;
    white-space: pre;
    text-align: right;
    overflow: hidden;
    user-select: none;
    border-right: 1px solid var(--border);
}

.file-editor-textarea {
    width: 100%;
    background: var(--bg-card-2);
    border: none;
    border-radius: 0;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 20px;
    padding: 10px 12px;
    resize: none;
    outline: none;
    white-space: pre;
    overflow: auto;
}

/* ══════════ PER-SCRIPT ACCESS PANEL (admin only) ══════════ */

.script-access {
    margin-top: 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.script-access .scripts-admin-form {
    background: transparent;
}

/* ══════════ SCRIPTS ADMIN PANEL ══════════ */

.scripts-admin-panel {
    background: rgba(26, 23, 48, 0.5);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}





/* ═══ SETTINGS TAB INSIDE DETAIL PANEL ═══ */
.script-settings-container {
    padding: 16px 0;
}



.script-settings-field label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.script-settings-field input[type="text"] {
    padding: 8px 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
}
.script-settings-field input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(144,89,186,0.25);
}


/* ═══ DETAIL TABS FIX ═══ */
.script-detail-tab:hover { color: var(--text-primary); }
.script-detail-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
/* ═══════════════════════════════════════════
   Перенесено сюда из script.js (раньше вставлялось в <head> через JS
   в рантайме — теперь это обычный CSS, часть основного стиля).
   ═══════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } } 
.spin { animation: spin 0.8s linear infinite; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes msgFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes entrySlideIn {
    0% { opacity: 0; transform: translateX(-40px) scale(0.95); }
    60% { opacity: 1; transform: translateX(5px) scale(1.01); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes entryGlow {
    0% { box-shadow: 0 0 0 0 rgba(144,89,186,0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(144,89,186,0.1); }
    100% { box-shadow: 0 0 0 0 rgba(144,89,186,0); }
}

@keyframes newBadgePulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes popupFadeIn {
    from { opacity: 0; transform: scale(0.9) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes popupFadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9) translateY(-10px); }
}

@keyframes toastSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastSlideDown {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

.audit-entry-new {
    animation: entrySlideIn 0.5s ease-out, entryGlow 1s ease-out;
}

.audit-new-badge {
    font-size: 10px;
    padding: 1px 8px;
    background: rgba(144,89,186,0.2);
    color: var(--accent);
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    animation: newBadgePulse 2s infinite;
    margin-left: 6px;
}

.role-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 2px;
    object-fit: contain;
    background: var(--bg-card-2);
    display: inline-block;
}

.role-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12),
        0 0 3px rgba(0,0,0,.35);
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    border: 1px solid rgba(255,255,255,0.1);
}

.role-emoji {
    font-size: 14px;
    vertical-align: middle;
    margin-right: 2px;
}

.audit-meta-chip {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.user-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.user-popup-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 40px 28px;
    max-width: 380px;
    width: 90%;
    position: relative;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

.user-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
}
.user-popup-close:hover { color: var(--text-primary); }

.user-popup-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 14px;
    border: 2px solid var(--border);
    background: var(--bg-card-2);
}
.user-popup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-popup-name {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.user-popup-id {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.user-popup-tag {
    font-size: 12px;
    text-align: center;
    margin-bottom: 16px;
}

.user-popup-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.popup-action-btn {
    padding: 6px 14px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.popup-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.user-popup-stats {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.popup-toast {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
}

.audit-executor-clickable,
.audit-target-clickable {
    cursor: pointer;
    transition: color 0.2s;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
.audit-executor-clickable:hover {
    color: var(--accent);
    text-decoration: underline;
}
.audit-target-clickable:hover {
    color: var(--accent-2);
    text-decoration: underline;
}

.tag-unban {
    background: rgba(52,211,153,0.15);
    color: #34d399;
}
.tag-perms {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
}
.tag-invite {
    background: rgba(96,165,250,0.15);
    color: #60a5fa;
}
.tag-member {
    background: rgba(179,123,220,0.15);
    color: #c9a3e8;
}
.tag-timeout {
    background: rgba(251,146,60,0.15);
    color: #fb923c;
}

.audit-meta-chip.add { color: #34d399; border-color: rgba(52,211,153,0.3); }
.audit-meta-chip.remove { color: #f87171; border-color: rgba(248,113,113,0.3); }

.audit-note {
    padding: 8px 20px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border);
}

/* ═══ SCRIPTS DETAIL PANEL (полноценная "вкладка" управления скриптом) ═══ */
.script-detail-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    animation: slideIn 0.25s ease-out;
}

.script-detail-header {
    margin-bottom: 16px;
}

.script-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 0 0 14px 0;
    transition: color 0.2s;
}
.script-detail-back:hover { color: var(--accent); }

.script-detail-title-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.script-detail-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.script-detail-status-dot.pulse {
    animation: pulse-ring 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.script-detail-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.script-detail-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 0 8px;
}
.script-detail-close:hover { color: var(--text-primary); }

.script-detail-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.script-detail-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.script-detail-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.script-detail-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.script-detail-tab:hover { color: var(--text-primary); }
.script-detail-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.script-detail-panel-content {
    display: none;
}
.script-detail-panel-content.active {
    display: block;
}

.script-detail-files-container {
    position: relative;
}

.script-detail-files-container .files-toolbar {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.script-detail-files-container .files-list {
    max-height: 460px;
    overflow-y: auto;
}

.files-dropzone-overlay {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 24, 0.88);
    border: 2px dashed #9059ba;
    border-radius: 12px;
    pointer-events: none;
}
.files-dropzone-overlay-inner {
    font-size: 14px;
    font-weight: 600;
    color: #b37bdc;
    padding: 14px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.file-row.drag-target {
    background: rgba(144,89,186,0.16);
    outline: 1px dashed #9059ba;
    outline-offset: -1px;
}

.script-btn-detail {
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.script-card-actions .script-btn {
    padding: 4px 8px;
    font-size: 14px;
}

.script-card .script-card-actions {
    gap: 4px;
}

.script-btn-settings {
    border-color: rgba(144,89,186,0.4);
    color: #b37bdc;
}

.console-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.script-console {
    margin-top: 12px;
    max-height: 300px;
    overflow-y: auto;
    background: #08090d;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #c3c6d4;
    user-select: text;
}

.console-line {
    white-space: pre-wrap;
    word-break: break-all;
}
.console-line-out {
    color: #c3c6d4;
}
.console-line-err {
    color: #f87171;
}
.console-line-sys {
    color: #9059ba;
    font-style: italic;
}

/* ═══ Лог действий над скриптом ═══ */
.script-action-logs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 460px;
    overflow-y: auto;
}

.action-log-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.action-log-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.action-log-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: rgba(148,150,163,0.12);
    color: var(--text-secondary);
}
.action-log-icon-start { background: rgba(74,222,128,0.14); color: #4ade80; }
.action-log-icon-stop { background: rgba(248,113,113,0.14); color: #f87171; }
.action-log-icon-restart { background: rgba(144,89,186,0.14); color: #b37bdc; }
.action-log-icon-rename { background: rgba(240,180,41,0.14); color: #f0b429; }
.action-log-icon-file_edit { background: rgba(240,180,41,0.14); color: #f0b429; }
.action-log-icon-settings_change { background: rgba(148,150,163,0.14); color: var(--text-secondary); }

.action-log-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.action-log-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

.action-log-actor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #b37bdc;
    font-weight: 600;
    cursor: pointer;
}
.action-log-actor:hover { text-decoration: underline; }
.action-log-actor-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(144,89,186,0.18);
    font-size: 10px;
    flex: 0 0 auto;
}
.action-log-actor-avatar-img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(144,89,186,0.18);
    flex: 0 0 auto;
}
.action-log-actor-plain {
    color: var(--text-secondary);
    font-weight: 600;
    cursor: default;
}

.member-info-content {
    position: relative;
    width: min(380px, 92vw);
    padding-top: 40px;
}
.member-info-content .script-settings-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.action-log-action-label {
    color: var(--text-secondary);
    font-size: 12.5px;
}
.action-log-action-start { color: #4ade80; }
.action-log-action-stop { color: #f87171; }
.action-log-action-restart { color: #b37bdc; }
.action-log-action-rename, .action-log-action-file_edit { color: #f0b429; }

.action-log-details {
    font-size: 12px;
    color: var(--text-muted);
}

.action-log-time {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    padding-top: 2px;
}

.scripts-admin-form {
    display: flex;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card-2);
    flex-direction: column;
}

.scripts-admin-users {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
}

.scripts-admin-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-direction: column;
}

.scripts-admin-user-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.scripts-admin-user-date {
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
}

.access-perms-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.access-perms-picker label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.access-perms-picker input[type="checkbox"] {
    accent-color: var(--accent, #9059ba);
    cursor: pointer;
}

.access-perm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.access-perm-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(144,89,186,0.14);
    color: #b37bdc;
    border: 1px solid rgba(144,89,186,0.3);
    white-space: nowrap;
}
.access-perm-badge-empty {
    background: rgba(148,150,163,0.12);
    color: var(--text-muted);
    border-color: var(--border);
}

.access-perms-editor {
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.access-perms-editor-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.files-upload-btn, .files-upload-archive-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.audit-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ═══ SETTINGS MODAL ═══ */
.script-settings-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 8, 18, 0.75);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.script-settings-content {
    background: rgba(26, 23, 48, 0.75);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 28px 32px;
    max-width: 500px;
    width: 95%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 60px rgba(144,89,186,0.1);
}

.script-rename-content h3 {
    margin: 0 0 16px;
}
.script-rename-content #rename-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
}
.script-rename-actions {
    display: flex;
    gap: 10px;
}

/* Редактор файлов открывается почти на весь экран — маленькое окошко
   неудобно для правки кода. Оверрайдим размеры базовой .script-settings-content. */
.file-editor-content {
    width: 1200px;
    max-width: 96vw;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px 24px;
}
.file-editor-content .script-settings-header {
    flex: 0 0 auto;
}
.file-editor-content .script-settings-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.file-editor-content .file-editor-toolbar,
.file-editor-content .file-editor-searchbar {
    flex: 0 0 auto;
}
.file-editor-content .file-editor-body-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}
.file-editor-content .file-editor-body-wrap .file-editor-textarea {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}
.file-editor-content .script-settings-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.file-editor-dirty-flag {
    font-size: 12px;
    color: #f0b429;
    margin-right: auto;
}

/* ═══ Просмотр картинок в панели ═══ */
.file-preview-content {
    width: min(900px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.file-preview-body {
    flex: 1 1 auto;
    min-height: 200px;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    border-radius: 8px;
    background-image:
        linear-gradient(45deg, #2a2c35 25%, transparent 25%),
        linear-gradient(-45deg, #2a2c35 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2a2c35 75%),
        linear-gradient(-45deg, transparent 75%, #2a2c35 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #1b1c22;
}
.file-preview-img {
    max-width: 100%;
    max-height: 68vh;
    object-fit: contain;
    border-radius: 4px;
}

.script-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.script-settings-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.script-settings-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 0 8px;
}
.script-settings-close:hover { color: var(--text-primary); }

.script-settings-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.script-settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.script-settings-field label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.script-settings-field input[type="text"] {
    padding: 8px 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
}
.script-settings-field input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(144,89,186,0.25);
}

.script-settings-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

#scripts-create-form .scripts-create-grid {
    grid-template-columns: 1fr;
}

/* ═══ Мониторинг сервера ═══ */
.monitor-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.monitor-card {
    background: rgba(26, 23, 48, 0.55);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    backdrop-filter: blur(10px);
}
.monitor-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.monitor-card-label {
    font-size: 12.5px;
    color: var(--text-secondary);
}
.monitor-card-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.monitor-card-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 8px;
}
.monitor-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-card-2);
    overflow: hidden;
}
.monitor-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.monitor-charts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.monitor-chart-block {
    background: rgba(26, 23, 48, 0.55);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 18px 8px;
    backdrop-filter: blur(10px);
}
.monitor-chart-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.monitor-chart-title-sub {
    color: var(--text-muted);
    font-size: 11.5px;
    margin-left: 6px;
}
.monitor-chart-svg {
    width: 100%;
    height: 64px;
    display: block;
}
.monitor-chart-wrap {
    position: relative;
    cursor: crosshair;
}
.monitor-chart-cursor-line {
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.7;
}
.monitor-chart-tooltip {
    position: absolute;
    top: 4px;
    pointer-events: none;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11.5px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 2;
}
.monitor-tooltip-value {
    font-weight: 700;
    color: var(--text-primary);
}
.monitor-tooltip-time {
    color: var(--text-muted);
    font-size: 10.5px;
}