:root {
    --eac-bg: #081829;
    --eac-bg-2: #0f2942;
    --eac-bg-3: #12365a;
    --eac-line: rgba(56, 189, 248, 0.28);
    --eac-line-soft: rgba(148, 163, 184, 0.18);
    --eac-accent: #0284c7;
    --eac-sky: #7dd3fc;
    --eac-gold: #fbbf24;
    --eac-gold-deep: #b45309;
    --eac-text: #e2e8f0;
    --eac-muted: #9fb2c8;
    --eac-bad: #fca5a5;
    --eac-bad-bg: rgba(127, 29, 29, 0.55);
    --eac-warn-bg: rgba(120, 53, 15, 0.55);
    --eac-info-bg: rgba(3, 105, 161, 0.35);
}

.eac, .eac *, .eac-page, .eac-page * { box-sizing: border-box; }

.eac-page {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 50% 0%, #0c4a6e 0%, #082f49 52%, #041322 100%) fixed;
    color: var(--eac-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.eac-page a { color: inherit; }
.eac-page [hidden], .eac [hidden] { display: none !important; }

.eac-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.eac-skip {
    position: absolute;
    left: 12px;
    top: -64px;
    z-index: 50;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--eac-gold);
    color: #1e293b;
    font-weight: 800;
    text-decoration: none;
}
.eac-skip:focus { top: 8px; }

.eac-top {
    flex: none;
    background: linear-gradient(180deg, var(--eac-bg-2) 0%, var(--eac-bg) 100%);
    border-bottom: 2px solid var(--eac-accent);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
}
.eac-top-in {
    max-width: 1100px;
    min-height: 56px;
    margin: 0 auto;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    flex-wrap: wrap;
}
.eac-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 6px;
    border-radius: 8px;
    border: 1px solid var(--eac-line);
    background: rgba(7, 20, 38, 0.78);
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}
.eac-brand img { width: 30px; height: 30px; object-fit: contain; }
.eac-top-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eac-langs { display: inline-flex; border: 1px solid var(--eac-line); border-radius: 9999px; overflow: hidden; }
.eac-langs a {
    min-width: 44px;
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--eac-muted);
    text-decoration: none;
}
.eac-langs a[aria-current="true"] { background: var(--eac-accent); color: #fff; }
.eac-langs a:hover { color: #fff; }
.eac-back, .eac-btn {
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--eac-gold);
    background: transparent;
    color: var(--eac-gold);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.eac-btn { background: var(--eac-gold); color: #1e293b; }
.eac-back:hover { background: rgba(251, 191, 36, 0.14); }
.eac-btn:hover { background: #fcd34d; }

.eac-page a:focus-visible, .eac-page button:focus-visible, .eac-page input:focus-visible, .eac-page select:focus-visible,
.eac a:focus-visible, .eac button:focus-visible, .eac input:focus-visible, .eac select:focus-visible, .eac-log:focus-visible {
    outline: 3px solid var(--eac-gold);
    outline-offset: 2px;
}

.eac-page-main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.eac-page-main:focus { outline: none; }
.eac-host { flex: 1; min-height: 280px; display: flex; flex-direction: column; }
.eac-host > .eac { flex: 1; min-height: 0; }
.eac-loading, .eac-noscript { margin: 24px 0; text-align: center; color: var(--eac-muted); }

.eac-invite {
    margin: 8vh auto 0;
    max-width: 480px;
    padding: 28px 24px;
    text-align: center;
    border-radius: 14px;
    border: 1px solid var(--eac-line);
    background: linear-gradient(180deg, var(--eac-bg-2), var(--eac-bg));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.eac-invite-title { margin: 0 0 8px; font-size: 1.35rem; color: var(--eac-gold); }
.eac-invite p { margin: 0 0 18px; color: var(--eac-text); }

.eac {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 240px;
    min-width: 0;
    color: var(--eac-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    background: linear-gradient(180deg, rgba(15, 41, 66, 0.96), rgba(8, 24, 41, 0.98));
    border: 1px solid var(--eac-line);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.eac-head {
    flex: none;
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px 0;
    background: rgba(2, 10, 20, 0.45);
    border-bottom: 2px solid var(--eac-accent);
}
.eac-tabs { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.eac-tab {
    flex: none;
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--eac-muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.eac-tab:hover { color: #fff; background: rgba(125, 211, 252, 0.1); }
.eac-tab[aria-selected="true"] { color: #1e293b; background: var(--eac-gold); border-color: var(--eac-gold); }
.eac-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.eac-tool {
    flex: none;
    align-self: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 9999px;
    border: 1px solid var(--eac-line);
    background: transparent;
    color: var(--eac-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.eac-tool:hover { color: #fff; border-color: var(--eac-sky); }

.eac-banner {
    flex: none;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--eac-line-soft);
    background: var(--eac-info-bg);
    color: #e0f2fe;
}
.eac-banner--warn { background: var(--eac-warn-bg); color: #fde68a; }
.eac-banner--bad { background: var(--eac-bad-bg); color: var(--eac-bad); }

.eac-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.eac-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 10px 6px;
    scrollbar-width: thin;
    scrollbar-color: #2b5d86 transparent;
}
.eac-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.eac-empty { margin: 18px 8px; text-align: center; color: var(--eac-muted); }
.eac-more-btn {
    display: block;
    margin: 0 auto 10px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 9999px;
    border: 1px solid var(--eac-line);
    background: rgba(125, 211, 252, 0.08);
    color: var(--eac-sky);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.eac-more-btn:disabled { opacity: 0.6; cursor: progress; }

.eac-msg {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    border-left: 3px solid transparent;
}
.eac-msg:hover, .eac-msg:focus-within { background: rgba(125, 211, 252, 0.07); }
.eac-msg--cont { padding-top: 1px; padding-bottom: 1px; }
.eac-msg--own { border-left-color: var(--eac-gold); background: rgba(251, 191, 36, 0.06); }
.eac-msg--staff { border-left-color: var(--eac-sky); }
.eac-av {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--eac-sky);
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}
.eac-av--staff { border-color: var(--eac-gold); }
.eac-av--ghost { visibility: hidden; border: 0; background: none; }
.eac-body { flex: 1; min-width: 0; padding-right: 30px; }
.eac-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.eac-name { font-weight: 800; color: #f8fafc; overflow-wrap: anywhere; }
.eac-msg--own .eac-name { color: var(--eac-gold); }
.eac-role {
    padding: 0 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--eac-sky);
    color: #082f49;
}
.eac-role--admin { background: var(--eac-gold); color: #451a03; }
.eac-time { font-size: 12px; color: var(--eac-muted); }
.eac-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.eac-dots {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--eac-muted);
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}
.eac-msg:hover .eac-dots, .eac-msg:focus-within .eac-dots, .eac-dots[aria-expanded="true"] { opacity: 1; }
.eac-dots:hover { color: #fff; background: rgba(125, 211, 252, 0.16); }
@media (hover: none) {
    .eac-dots { opacity: 0.75; }
}

.eac-sys {
    margin: 6px auto;
    max-width: 92%;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid var(--eac-line);
    background: rgba(2, 132, 199, 0.14);
    color: #bae6fd;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    overflow-wrap: anywhere;
}
.eac-sys--local { border-color: var(--eac-gold); color: #fde68a; background: rgba(251, 191, 36, 0.08); }
.eac-day { display: flex; justify-content: center; margin: 8px 0 4px; }
.eac-day span {
    padding: 1px 12px;
    border-radius: 9999px;
    background: rgba(2, 10, 20, 0.55);
    color: var(--eac-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.eac-menu {
    position: absolute;
    top: 38px;
    right: 8px;
    z-index: 5;
    width: min(260px, calc(100% - 16px));
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 10px;
    border: 1px solid var(--eac-sky);
    background: #06121f;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}
.eac-menu-item {
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--eac-text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.eac-menu-item:hover { background: rgba(125, 211, 252, 0.14); }
.eac-report { display: flex; flex-direction: column; gap: 8px; padding: 6px; }
.eac-report-label { font-size: 13px; font-weight: 700; color: var(--eac-muted); }
.eac-report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.eac-select, .eac-input {
    min-height: 44px;
    width: 100%;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--eac-line);
    background: #06121f;
    color: var(--eac-text);
    font: inherit;
    font-size: 16px;
}
.eac-input::placeholder { color: #7890a8; }
.eac-input:disabled { opacity: 0.6; cursor: not-allowed; }
.eac-mini {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--eac-line);
    background: rgba(125, 211, 252, 0.08);
    color: var(--eac-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.eac-mini--primary { background: var(--eac-gold); border-color: var(--eac-gold); color: #1e293b; }

.eac-jump {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    min-height: 36px;
    padding: 0 16px;
    border-radius: 9999px;
    border: 1px solid var(--eac-gold);
    background: #06121f;
    color: var(--eac-gold);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.eac-panel {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 6;
    max-height: 100%;
    overflow-y: auto;
    padding: 10px 12px;
    border-bottom: 2px solid var(--eac-sky);
    background: #06121f;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}
.eac-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.eac-panel-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.eac-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.eac-panel-name { font-weight: 700; overflow-wrap: anywhere; }

.eac-error {
    flex: none;
    margin: 0;
    padding: 8px 12px;
    background: var(--eac-bad-bg);
    color: var(--eac-bad);
    font-size: 13px;
    font-weight: 600;
}
.eac-form {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--eac-line);
    background: rgba(2, 10, 20, 0.5);
}
.eac-field { position: relative; flex: 1; min-width: 0; }
.eac-field .eac-input { padding-right: 64px; }
.eac-count {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--eac-muted);
    pointer-events: none;
}
.eac-count--hot { color: var(--eac-bad); }
.eac-send {
    flex: none;
    min-width: 84px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--eac-gold);
    color: #1e293b;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.eac-send:hover:not(:disabled) { background: #fcd34d; }
.eac-send:disabled { background: #475569; color: #cbd5e1; cursor: not-allowed; }

.eac--compact { font-size: 14px; border-radius: 8px; }
.eac--compact .eac-tab { min-height: 36px; padding: 0 10px; }
.eac--compact .eac-log { padding: 6px 6px 4px; }
.eac--compact .eac-av { width: 26px; height: 26px; font-size: 12px; }
.eac--compact .eac-msg { gap: 8px; padding: 4px 6px; }
.eac--compact .eac-form { padding: 6px; }
.eac--compact .eac-input, .eac--compact .eac-select { min-height: 40px; }
.eac--compact .eac-send { min-height: 40px; min-width: 72px; padding: 0 12px; }

@media (max-width: 520px) {
    .eac-top-nav { gap: 6px; }
    .eac-langs a { min-width: 40px; padding: 0 8px; }
    .eac-back { padding: 0 12px; font-size: 13px; }
    .eac-page-main { padding: 8px; }
    .eac-top-in { padding: 6px 10px; }
    .eac-brand span { display: none; }
    .eac-tab { padding: 0 10px; }
    .eac-send { min-width: 68px; padding: 0 12px; }
    .eac-body { padding-right: 34px; }
}
@media (max-width: 340px) {
    .eac-av { display: none; }
    .eac-tab { padding: 0 8px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .eac *, .eac-page * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .eac-tab[aria-selected="true"] { outline: 2px solid Highlight; }
    .eac-send, .eac-btn { border: 1px solid ButtonText; }
}