@font-face { font-family: 'Bold'; src: url("assets/fonts/Purista-Bold.ttf"); }
@font-face { font-family: 'BoldItalic'; src: url("assets/fonts/Purista-BoldItalic.ttf"); font-style: italic; }
@font-face { font-family: 'Medium'; src: url("assets/fonts/Purista-Medium.ttf"); }
@font-face { font-family: 'SemiBold'; src: url("assets/fonts/Purista-SemiBold.ttf"); }
@font-face { font-family: Oxanium-Regular; src: url("assets/fonts/Oxanium-Regular.ttf"); }
@font-face { font-family: Oxanium-Medium; src: url("assets/fonts/Oxanium-Medium.ttf"); }

:root {
    --theme-accent: #F000F0;
    --theme-surface: rgba(14, 0, 20, .55);
    --theme-neutral-border: rgba(255, 255, 255, .2);
    --theme-white-surface: radial-gradient(102.38% 100.31% at 50% 50%, rgba(255, 255, 255, .075) 0, rgba(255, 255, 255, 0) 100%);
    --hover-surface: radial-gradient(102.38% 100.31% at 50% 50%, rgba(240, 0, 240, .08) 0, rgba(240, 0, 240, 0) 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-drag: none; }

html, body { width: 100%; height: 100%; }

body {
    font-family: Oxanium-Regular, sans-serif;
    color: #fff;
    background:
        radial-gradient(55% 65% at 0% 100%, rgba(240, 0, 240, .55) 0%, rgba(240, 0, 240, 0) 100%),
        radial-gradient(55% 65% at 100% 0%, rgba(240, 0, 240, .55) 0%, rgba(240, 0, 240, 0) 100%),
        radial-gradient(45% 50% at 100% 100%, rgba(170, 0, 200, .45) 0%, rgba(170, 0, 200, 0) 100%),
        radial-gradient(45% 50% at 0% 0%, rgba(170, 0, 200, .4) 0%, rgba(170, 0, 200, 0) 100%),
        linear-gradient(135deg, #3a0040 0%, #230028 50%, #3a0040 100%);
    background-attachment: fixed;
    overflow: hidden;
}

button, input { font: inherit; color: inherit; background: none; border: none; outline: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.flex { display: flex; }
.clmn { display: flex; flex-direction: column; }
.alcn, .jlcn { display: flex; align-items: center; }
.jlcn { justify-content: center; }
.space { display: flex; justify-content: space-between; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(240, 0, 240, .35); border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: rgba(240, 0, 240, .35) transparent; }

.menu {
    padding: 16px;
    border-radius: 16px;
    background:
        radial-gradient(55.27% 70.71% at 0% 100%, rgba(240, 0, 240, .35) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(55.27% 70.71% at 100% 0%, rgba(240, 0, 240, .35) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(70% 50% at 100% 100%, rgba(240, 0, 240, .22) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(70% 50% at 0% 0%, rgba(240, 0, 240, .18) 0%, rgba(0, 0, 0, 0) 100%),
        var(--theme-surface);
    background-clip: padding-box;
    border-style: solid;
    border-width: 12px;
    border-image-source: url('assets/images/frak_border.png');
    border-image-slice: 140;
    border-image-width: 12px;
    border-image-outset: 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 40px rgba(20, 0, 30, .45);
    animation: scaleUp .2s ease-out;
}

.layout {
    display: flex;
    gap: 15px;
    height: 100vh;
    padding: 15px;
}

.main_menu { width: 330px; flex-shrink: 0; gap: 10px; min-height: 0; }
.players_menu { flex: 1; min-width: 0; min-height: 0; }

.menu_head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}

.ml_admin_icon {
    width: 45px;
    height: 53px;
    flex-shrink: 0;
    background-image: url('assets/images/frak_icon.png');
    background-size: 100% 100%;
    filter: drop-shadow(0 7px 24px rgba(240, 0, 240, .35));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ml_admin_titles { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }

.ml_admin_titles span:first-child {
    font-size: 31.3px;
    font-family: 'Bold';
    letter-spacing: -1.25px;
    color: #fff;
    text-shadow: 0 0 37px rgba(255, 255, 255, .35);
    white-space: nowrap;
}

.ml_admin_titles span:last-child {
    height: 22.5px;
    line-height: 22.5px;
    padding: 0 5.8px;
    background-image: url('assets/images/frak_name_box.png');
    background-size: 100% 100%;
    border-radius: 3px;
    font-size: 15.6px;
    font-family: 'SemiBold';
    letter-spacing: -.63px;
    color: rgba(0, 0, 0, .65);
    width: fit-content;
    white-space: nowrap;
    margin-right: auto;
    margin-top: -10px;
    box-shadow: 0 0 31px rgba(240, 0, 240, .35);
}

.close_menu, .menu_toggle {
    display: none;
    width: 35px;
    height: 35px;
    margin-left: auto;
    background: var(--theme-white-surface);
    border: 2px solid var(--theme-neutral-border);
    border-radius: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    flex-shrink: 0;
}
.menu_toggle { margin-left: 0; margin-right: 12px; }

.user_box {
    gap: 12px;
    padding: 10px;
    background: radial-gradient(102.38% 100.31% at 50% 50%, rgba(255, 255, 255, .055) 0, rgba(255, 255, 255, 0) 100%);
    border: 2px solid var(--theme-neutral-border);
    border-radius: 6px;
}

.player_avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(240, 0, 240, .2);
    background: rgba(240, 0, 240, .08);
    flex-shrink: 0;
}
.player_avatar img { width: 100%; height: 100%; object-fit: cover; }
.player_avatar i { font-size: 16px; color: rgba(240, 0, 240, .8); }

.player_name { min-width: 0; flex: 1; }
.player_name span:first-child { font-family: 'Bold'; font-weight: 600; font-size: 12px; color: rgba(255, 255, 255, .5); }
.player_name span:last-child {
    font-family: 'Bold'; font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, .9);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.offline_button {
    padding: 9px 13px;
    background: var(--theme-white-surface);
    border: 2px solid var(--theme-neutral-border);
    border-radius: 6px;
    font-family: 'Bold';
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    transition: all .2s ease;
}
.offline_button:hover { background: radial-gradient(102.38% 100.31% at 50% 50%, rgba(240, 0, 240, .1) 0, rgba(240, 0, 240, 0) 100%); border-color: rgba(240, 0, 240, .3); transform: translateY(2px); }
.offline_button:active { opacity: .75; }

.search_bar {
    gap: 10px;
    height: 35px;
    padding: 0 15px;
    background: radial-gradient(102.38% 100.31% at 50% 50%, rgba(255, 255, 255, .065) 0, rgba(255, 255, 255, 0) 100%);
    border: 2px solid var(--theme-neutral-border);
    border-radius: 6px;
    transition: border-color .2s ease, background .2s ease;
}
.search_bar:focus-within { border-color: rgba(240, 0, 240, .3); background: var(--hover-surface); }
.search_bar i { font-size: 14px; color: rgba(255, 255, 255, .5); }
.search_bar input {
    flex: 1;
    min-width: 0;
    font-family: 'Bold';
    padding-top: 2px;
    font-weight: 700;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}
.search_bar input::placeholder { color: rgba(255, 255, 255, .4); }

.menu_cats { gap: 6px; overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; margin-right: -4px; }
#categories { gap: 6px; }

.drop_head {
    width: 100%;
    height: 25px;
    margin-top: 8px;
    background: var(--theme-white-surface);
    border-bottom: 1px solid var(--theme-neutral-border);
    font-family: 'Bold';
    font-weight: 800;
    font-size: 12px;
    color: #fff;
    padding-left: 10px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .2s ease;
}
.drop_head:hover { background: radial-gradient(102.38% 100.31% at 50% 50%, rgba(240, 0, 240, .14) 0, rgba(240, 0, 240, .04) 100%); }
.group_chevron { font-size: 10px; color: rgba(255, 255, 255, .6); transition: transform .2s ease; }
.drop_head.collapsed .group_chevron { transform: rotate(-90deg); }

.menu_cat {
    width: 100%;
    min-height: 44px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 0 12px;
    border-radius: 4px;
    font-family: 'Bold';
    font-weight: 600;
    font-size: 13.4px;
    color: rgba(255, 255, 255, .8);
    transition: all .2s ease;
    text-align: left;
}
.menu_cat:hover:not(.selected) {
    transform: translateY(2px);
    background: radial-gradient(93.04% 70.91% at 49.39% 50.11%, rgba(240, 0, 240, .1) 0%, rgba(240, 0, 240, .15) 100%);
    border-color: rgba(240, 0, 240, .25);
}
.menu_cat.selected {
    background: radial-gradient(93.04% 70.91% at 49.39% 50.11%, rgba(240, 0, 240, .22) 0%, rgba(240, 0, 240, .3) 100%);
    border-color: rgba(240, 0, 240, .5);
    box-shadow: 0 0 32px rgba(240, 0, 240, .35);
    color: #fff;
}
.menu_cat.no_logs .cat_left span { opacity: .45; }
.cat_left { gap: 13px; min-width: 0; }
.cat_left span { line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat_left i { font-size: 15px; width: 16px; text-align: center; color: rgba(255, 255, 255, .7); }
.menu_cat.selected .cat_left i { color: var(--theme-accent); }
.cat_count { font-family: 'Bold'; font-size: 12px; color: rgba(255, 255, 255, .5); padding-left: 8px; }
.menu_cat.selected .cat_count { color: #fff; }

.players_head {
    width: 100%;
    min-height: 60px;
    flex-shrink: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--theme-neutral-border);
    font-family: 'Bold';
    gap: 12px;
    flex-wrap: wrap;
}
.head_left { min-width: 0; }
.players_title { font-size: 16px; color: rgba(255, 255, 255, .9); min-width: 0; }
.players_title span:first-child { text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.players_title span:last-child { font-size: 14px; color: rgba(255, 255, 255, .6); }
.players_search_filter { gap: 10px; flex-wrap: wrap; }
.players_search_filter .search_bar { width: 330px; max-width: 100%; }

.live_toggle {
    gap: 10px;
    height: 35px;
    padding: 0 13px;
    background: radial-gradient(102.38% 100.31% at 50% 50%, rgba(255, 255, 255, .065) 0, rgba(255, 255, 255, 0) 100%);
    border: 2px solid var(--theme-neutral-border);
    border-radius: 6px;
    font-family: 'Bold';
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    transition: all .2s ease;
}
.live_toggle:hover { background: var(--hover-surface); border-color: rgba(240, 0, 240, .2); }

.option_checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    transition: all .2s ease;
}
.option_checkbox i { font-size: 11px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
.option_checkbox.active { background: #F000F0; border-color: rgba(240, 0, 240, .8); box-shadow: 0 0 24px rgba(240, 0, 240, .45); }
.option_checkbox.active i { opacity: 1; transform: scale(1); }

.logs_wrap { gap: 10px; margin-top: 10px; overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }

.log_item {
    width: 100%;
    flex-shrink: 0;
    background: radial-gradient(102.38% 100.31% at 50% 50%, rgba(255, 255, 255, .055) 0, rgba(255, 255, 255, 0) 100%);
    border: 2px solid var(--theme-neutral-border);
    padding: 15px;
    border-radius: 6px;
    transition: background .2s ease, border-color .2s ease;
    overflow-wrap: anywhere;
}
.log_item:hover { background: var(--hover-surface); border-color: rgba(240, 0, 240, .2); }
.log_item.fresh { animation: fresh 1.8s ease-out; }
@keyframes fresh { from { border-color: rgba(240, 0, 240, .9); box-shadow: 0 0 32px rgba(240, 0, 240, .45); } }

.log_header {
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--theme-neutral-border);
    flex-wrap: wrap;
}
.log_badge {
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    background-image: url('assets/images/frak_name_box.png');
    background-color: #f000f0;
    background-size: 100% 100%;
    border-radius: 3px;
    font-size: 11.5px;
    font-family: 'Bold';
    color: rgba(0, 0, 0, .7);
    white-space: nowrap;
    box-shadow: 0 0 20px rgba(240, 0, 240, .3);
    text-transform: uppercase;
}
.log_title { font-family: 'Bold'; font-weight: 800; font-size: 16px; color: rgba(255, 255, 255, .9); min-width: 0; }
.log_time {
    margin-left: auto;
    gap: 7px;
    font-family: 'Bold';
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.log_time i { font-size: 11px; }

.log_body {
    padding-top: 10px;
    font-family: 'Medium';
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
    user-select: text;
}
.log_body b { font-family: 'Bold'; font-weight: 700; color: rgba(255, 255, 255, .95); }
.log_body pre {
    margin: 6px 0;
    padding: 10px 15px;
    background: var(--theme-white-surface);
    border: 2px solid var(--theme-neutral-border);
    border-radius: 6px;
    white-space: pre-wrap;
    font: 12.5px/1.5 Oxanium-Medium, Consolas, monospace;
    color: rgba(255, 255, 255, .85);
}
.log_body code {
    padding: 1px 6px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    font: 12.5px Oxanium-Medium, Consolas, monospace;
}
.mention {
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(240, 0, 240, .15);
    color: #ff9cff;
    font-family: 'Bold';
}
.thumb { display: block; max-width: 340px; max-height: 210px; margin-top: 8px; border-radius: 6px; border: 2px solid var(--theme-neutral-border); }

.log_body *::selection, .log_body::selection { background: rgba(240, 0, 240, .45); color: #fff; }

.menu_empty { flex: 1; font-family: 'Bold'; font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, .4); }

.save_button {
    gap: 10px;
    height: 36px;
    width: 100%;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--theme-accent);
    font-family: 'Bold';
    font-weight: 800;
    font-size: 12px;
    letter-spacing: -.02em;
    color: rgba(0, 0, 0, .75);
    transition: all .2s ease;
    box-shadow: 0 0 24px rgba(240, 0, 240, .35);
}
.save_button i, .save_button span { color: rgba(0, 0, 0, .75); font-size: 12px; line-height: 1; }
.save_button:hover { transform: translateY(2px); }
.save_button:active { opacity: .75; }
.more_button { width: 260px; margin: 12px auto 0; }

.info_value {
    padding: 15px;
    background: var(--theme-white-surface);
    border: 2px solid var(--theme-neutral-border);
    border-radius: 6px;
    font-family: 'Bold';
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
}

.error_box {
    gap: 8px;
    padding: 12px 15px;
    background: rgba(255, 68, 68, .15);
    border: 2px solid rgba(255, 68, 68, .3);
    border-radius: 6px;
    color: #f44;
    font-family: 'Bold';
    font-weight: 600;
    font-size: 14px;
}

.login_body { min-height: 100vh; padding: 16px; overflow: auto; }
.login_menu { width: 440px; max-width: 100%; gap: 14px; }

@keyframes scaleUp {
    0% { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
    .layout { padding: 8px; }
    .main_menu {
        position: fixed;
        z-index: 30;
        top: 8px;
        bottom: 8px;
        left: 8px;
        width: min(330px, calc(100vw - 16px));
        transform: translateX(calc(-100% - 20px));
        transition: transform .2s ease;
        animation: none;
    }
    body.menu_open .main_menu { transform: none; }
    .close_menu, .menu_toggle { display: flex; }
    .players_search_filter { width: 100%; }
    .players_search_filter .search_bar { flex: 1; width: auto; }
    .ml_admin_titles span:first-child { font-size: 21px; }
    .log_time { margin-left: 0; width: 100%; }
    .thumb { max-width: 100%; }
    .menu { border-width: 10px; border-image-width: 10px; padding: 12px; }
}