/* LEGENDS Mix Panel - /admin */

/* ------------------------------------------------------------ login (doua coloane) */
body.bare { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth { display: grid; grid-template-columns: 1fr 1.1fr; width: 100%; max-width: 940px; border-radius: 20px; overflow: hidden;
    background: rgba(14,15,22,.82); border: 1px solid rgba(255,45,85,.3); box-shadow: 0 0 0 1px rgba(255,45,85,.08), 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,45,85,.12);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.auth-side { padding: 38px 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
    background: radial-gradient(120% 80% at 0% 0%, rgba(255,45,85,.22), transparent 60%), rgba(10,10,15,.6); border-right: 1px solid var(--line); }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .auth-mark { width: 52px; height: 52px; filter: drop-shadow(0 0 14px rgba(255,45,85,.6)); }
.auth-brand b { display: block; font-family: var(--head); font-weight: 400; font-size: 26px; letter-spacing: .06em; }
.auth-brand small { display: block; color: var(--red); font-family: var(--head); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.auth-brand.sm { display: none; }
.auth-side h2 { font-family: var(--head); font-weight: 400; font-size: 28px; line-height: 1.1; margin: 24px 0 10px; }
.auth-side h2 b { font-weight: 400; color: var(--red); text-shadow: 0 0 18px rgba(255,45,85,.6); }
.auth-side p { color: #c4cad5; margin: 0 0 18px; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; }
.auth-points li > .svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 9px; color: var(--red); background: var(--red-soft); border: 1px solid rgba(255,45,85,.35); }
.auth-points span { font-weight: 700; line-height: 1.2; }
.auth-points small { display: block; color: var(--muted); font-weight: 600; font-size: 14px; }
.auth-side-foot { color: var(--muted); font-size: 13px; }
.auth-main { padding: 40px 38px; display: flex; align-items: center; }
.auth-card { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.auth-kicker { display: inline-flex; align-items: center; gap: 7px; font-family: var(--head); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #ff6d86; }
.auth-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.auth-head h1 { font-family: var(--head); font-weight: 400; font-size: 30px; margin: 6px 0 4px; }
.auth-head p { margin: 0; color: var(--muted); }
.auth-label { display: block; font-family: var(--head); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #aeb5c2; margin-bottom: 6px; }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > .svg { position: absolute; left: 13px; width: 18px; color: var(--muted); pointer-events: none; }
.auth-input input { width: 100%; padding: 13px 44px 13px 42px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: var(--text); font: inherit; font-size: 17px; outline: none; transition: border-color .2s, box-shadow .2s; }
.auth-input input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,45,85,.18), 0 0 18px rgba(255,45,85,.25); }
.auth-input input:focus ~ .svg, .auth-input:focus-within > .svg { color: var(--red); }
.auth-eye { position: absolute; right: 8px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 7px; }
.auth-eye:hover, .auth-eye[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.06); }
.auth-caps, .auth-err { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 9px; font-weight: 600; font-size: 15px; background: rgba(255,200,61,.1); color: #ffd978; border: 1px solid rgba(255,200,61,.35); }
.auth-err { background: rgba(255,90,108,.1); color: #ff9aa6; border-color: rgba(255,90,108,.4); }
.auth-err.warn { background: rgba(255,200,61,.1); color: #ffd978; border-color: rgba(255,200,61,.35); }
.auth-caps .svg, .auth-err .svg { width: 18px; flex: none; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border: 0; border-radius: 11px; cursor: pointer; color: #fff;
    font-family: var(--head); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(135deg, #ff3d62, #c3001f);
    box-shadow: 0 8px 26px rgba(255,45,85,.4), 0 0 0 1px rgba(255,255,255,.08) inset; transition: transform .15s, box-shadow .2s; }
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(255,45,85,.55); }
.auth-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.auth-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; }
.auth-back:hover { color: #fff; }
.auth .lang-sw { margin: 0; }
@media (max-width: 760px) {
    .auth { grid-template-columns: 1fr; }
    .auth-side { display: none; }
    .auth-brand.sm { display: flex; }
    .auth-main { padding: 28px 22px; }
}

/* ------------------------------------------------------------ cadrul panoului */
body.admin { display: block; }
.adm { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.adm-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 18px 14px; background: rgba(8,9,13,.88); border-right: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 40; }
.adm-logo { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid var(--line); }
.adm-logo .logo-mark { width: 36px; height: 36px; }
.adm-logo b { display: block; font-family: var(--head); font-weight: 400; font-size: 18px; letter-spacing: .06em; }
.adm-logo small { display: block; color: var(--red); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; font-weight: 700; }
.adm-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }
.adm-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: #b9c0cd; font-weight: 700; transition: background .15s, color .15s; position: relative; }
.adm-nav a:hover { background: rgba(255,255,255,.04); color: #fff; }
.adm-nav a.on { background: linear-gradient(90deg, rgba(255,45,85,.2), rgba(255,45,85,.04)); color: #fff; }
.adm-nav a.on::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); box-shadow: 0 0 10px var(--red); }
.adm-nav a.on .svg { color: var(--red); }
.adm-side-foot { border-top: 1px solid var(--line); padding-top: 12px; }
.adm-public { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; padding: 6px 10px; }
.adm-public:hover { color: #fff; }
.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 24px; background: rgba(7,8,12,.78); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.adm-title { margin: 0; font-family: var(--head); font-weight: 400; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; flex: 1; }
.adm-burger { display: none; background: none; border: 1px solid var(--line-2); color: var(--text); border-radius: 9px; padding: 7px; cursor: pointer; }
.adm-srv { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border: 1px solid var(--line-2); border-radius: 11px; background: rgba(255,255,255,.03); }
.adm-srv select { background: transparent; color: var(--text); border: 0; font: 700 15px var(--body); outline: none; padding: 4px 4px; cursor: pointer; max-width: 220px; }
.adm-srv option { background: #12141c; }
.adm-user { display: flex; align-items: center; gap: 10px; }
.adm-user .lang-sw { margin: 0; }
.adm-me { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 10px; }
.adm-me:hover { background: rgba(255,255,255,.04); }
.adm-me b { display: block; line-height: 1.1; } .adm-me small { display: block; color: var(--muted); font-size: 12px; line-height: 1.1; }
.adm-content { padding: 22px 24px 50px; max-width: 1400px; width: 100%; }
.adm-h2 { font-family: var(--head); font-weight: 400; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 24px 0 12px; }
.adm-split { grid-template-columns: 1.55fr 1fr; align-items: start; margin-top: 0; }
.panel.narrow { max-width: 480px; }

/* ------------------------------------------------------------ status live */
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.live-card { padding: 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; transition: border-color .3s; }
.live-card.is-on { border-color: rgba(61,220,132,.3); box-shadow: 0 0 24px rgba(61,220,132,.06); }
.live-card header { display: flex; align-items: center; gap: 12px; }
.live-card header > div { flex: 1; min-width: 0; }
.live-card header b { display: block; font-size: 18px; } .live-card header small { color: var(--muted); }
.lc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lc-stats span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 9px; background: rgba(0,0,0,.25); border: 1px solid var(--line); min-width: 0; }
.lc-stats small { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.lc-stats b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-roster summary { cursor: pointer; color: #cfd5df; font-weight: 700; }
.lc-roster summary em { font-style: normal; color: var(--red); }
.lc-roster ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.lc-roster li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.lc-roster li span { font-size: 11px; font-weight: 800; width: 30px; text-align: center; border-radius: 5px; padding: 1px 0; }
.lc-roster li b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lc-roster li em { font-style: normal; color: var(--muted); font-size: 13px; }
.lc-roster .tm-ct span { background: rgba(56,178,255,.15); color: var(--ct); } .lc-roster .tm-t span { background: rgba(255,159,45,.15); color: var(--t); } .lc-roster .tm-spec span { background: rgba(255,255,255,.08); color: var(--muted); }
.live-card footer { margin-top: auto; }
.matches.m2 { grid-template-columns: repeat(2, 1fr); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 8px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.feed li span { flex: 1; color: #c4cad5; }
.feed li em { font-style: normal; color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ------------------------------------------------------------ formulare + tabele */
.adm-form { display: flex; flex-direction: column; gap: 12px; }
.adm-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 15px; }
.adm-form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.adm-form input:not([type=checkbox]), .adm-form select { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: var(--text); font: inherit; outline: none; }
.adm-form input:focus, .adm-form select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,45,85,.15); }
.adm-form select option { background: #12141c; }
.adm-form .btn { align-self: flex-start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.srv-pick { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px 10px; display: grid; gap: 6px; }
.srv-pick legend { padding: 0 6px; font-weight: 700; font-size: 15px; }
.srv-pick[disabled] { opacity: .45; }
.nowrap { white-space: nowrap; }
.inline-form .btn span { display: none; }
.admin-tbl .inline-form .btn span { display: inline; }
@media (max-width: 1250px) { .admin-tbl .inline-form .btn span { display: none; } }
tr.is-dead td { opacity: .5; }
.sm-mono.mini { width: 26px; height: 26px; font-size: 10px; display: inline-grid; vertical-align: middle; }
.role { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; border: 1px solid; }
.role-owner { color: var(--gold); border-color: rgba(255,200,61,.45); background: rgba(255,200,61,.1); }
.role-admin { color: #ff8aa0; border-color: rgba(255,45,85,.45); background: rgba(255,45,85,.1); }
.role-mod { color: var(--ct); border-color: rgba(56,178,255,.45); background: rgba(56,178,255,.1); }
.role-help { margin: 14px 0 0; padding-left: 18px; }
.tabs.sm { margin: 0; } .tabs.sm a { padding: 4px 11px; font-size: 14px; }
.howto { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px dashed var(--line-2); }
.howto pre { margin: 8px 0 0; font-size: 13px; color: #ffb3be; white-space: pre-wrap; }

/* chat */
.chatlog { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.chatlog li { display: flex; align-items: baseline; gap: 10px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.04); }
.chatlog li:hover { background: rgba(255,255,255,.025); }
.chatlog time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
.chatlog b { flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatlog .tm-ct b { color: var(--ct); } .chatlog .tm-t b { color: var(--t); } .chatlog .tm-spec b { color: #aab3c2; }
.chatlog .msg { flex: 1; overflow-wrap: anywhere; color: #e2e6ee; }
.chatlog .tag { font-size: 11px; padding: 0 6px; }
.chat-ban { opacity: 0; color: var(--bad); transition: opacity .15s; }
.chatlog li:hover .chat-ban { opacity: 1; }
.chat-day { justify-content: center; color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: .1em; border: 0 !important; padding-top: 14px !important; }

/* toast + fereastra de confirmare */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 12px 16px; border-radius: 12px; background: #151821; border: 1px solid var(--line-2); box-shadow: 0 14px 40px rgba(0,0,0,.5); font-weight: 600;
    animation: toastin .35s cubic-bezier(.2,1.2,.4,1) both; }
.toast .svg { flex: none; }
.toast-good { border-color: rgba(61,220,132,.45); } .toast-good .svg { color: var(--good); }
.toast-bad { border-color: rgba(255,90,108,.5); } .toast-bad .svg { color: var(--bad); }
.toast.out { animation: toastout .3s ease both; }
@keyframes toastin { from { opacity: 0; transform: translateY(20px) scale(.96); } }
@keyframes toastout { to { opacity: 0; transform: translateX(30px); } }
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(3,3,6,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 20px; }
.modal[hidden] { display: none; }
.modal-card { width: 100%; max-width: 400px; padding: 24px; border-radius: 16px; text-align: center; background: #12141c; border: 1px solid rgba(255,45,85,.4); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(255,45,85,.15); animation: toastin .3s both; }
.modal-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,90,108,.14); color: var(--bad); margin-bottom: 8px; }
.modal-icon .svg { width: 26px; height: 26px; }
.modal-card h3 { margin: 4px 0 6px; font-family: var(--head); font-weight: 400; font-size: 20px; }
.modal-card p { color: #c4cad5; margin: 0 0 18px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }

@media (max-width: 1000px) {
    .adm { grid-template-columns: 1fr; }
    .adm-side { position: fixed; left: 0; top: 0; width: 250px; transform: translateX(-100%); transition: transform .25s; }
    .adm-side.open { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.6); }
    .adm-burger { display: inline-flex; }
    .adm-split { grid-template-columns: 1fr; }
    .adm-top { padding: 10px 14px; flex-wrap: wrap; }
    .adm-content { padding: 16px 12px 40px; }
    .adm-me span { display: none; }
    .lc-stats { grid-template-columns: repeat(2, 1fr); }
}
.auth-caps[hidden], .lc-roster[hidden] { display: none; }
.live-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.lc-stats { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
body.admin .fx-floor { opacity: .45; }
@media (max-width: 480px) { .live-grid { grid-template-columns: 1fr; } }