/* WEBADMIN 2026-11-08: browser layer over adminmj.css (the in-game F7 panel, copied 1:1 - do not edit that copy, re-copy it).
   Same tokens: #111 stage, #151515 side / cards, #1b1b1b inputs, one pink accent #ea1856, Manrope, 6 px radii, no gradients / glow. */
@font-face { font-family: "MJ Manrope"; src: url("fonts/Manrope-Variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #111111; color: #fff; }
body { font-family: "MJ Manrope", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.amj.wa { position: fixed; inset: 0; --mj-font: "MJ Manrope"; }
.wa-boot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--mj-font); color: var(--t3); }
.wa a { color: #fff; }
.wa .amj-main { bottom: 24px; }
.wa .amj-th.wa-g, .wa .amj-trow.wa-g { column-gap: 12px; }

/* login */
.wa-login { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: #111111; }
.wa-lcard { width: 420px; max-width: 100%; padding: 32px 30px 28px; border-radius: 6px; background: var(--card); border: 1px solid var(--card-l); }
.wa-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.wa-logo i { width: 44px; height: 44px; border-radius: 6px; background: var(--a); display: flex; align-items: center; justify-content: center; font: 800 22px/1 var(--mj-font); font-style: normal; }
.wa-logo b { display: block; font: 800 22px/1 var(--mj-font); text-transform: uppercase; }
.wa-logo small { display: block; margin-top: 6px; font: 600 13px/1 var(--mj-font); color: var(--t3); }
.wa-lcard label { display: block; margin: 14px 0 8px; font: 700 12px/1 var(--mj-font); color: var(--t3); text-transform: uppercase; letter-spacing: .03em; }
.wa-lcard .amj-b { margin-top: 20px; }
.wa-err { min-height: 18px; margin-top: 12px; font: 600 13px/1.4 var(--mj-font); color: #ff6b5e; }
.wa-hint { margin-top: 18px; padding-top: 14px; border-top: 1px solid #1f1f1f; font: 600 12px/1.5 var(--mj-font); color: var(--t3); }

.wa .amj-pl-l > .amj-search { flex: none; }
.wa-form .amj-row > .amj-b, .wa .amj-card .amj-row > .amj-b.sq { flex: none; min-width: 120px; }
.wa-form .amj-row > .amj-b.sq { min-width: 44px; }
.wa-form .amj-ch { display: block; }
.wa-form .amj-ch b { display: block; }
.wa-form .amj-ch small { display: block; margin-top: 6px; line-height: 1.35; }

/* generic grids for the web tables */
.wa-pl-g { grid-template-columns: 64px minmax(0, 1fr) 46px 86px; column-gap: 10px; }
.wa-led-g { grid-template-columns: 110px minmax(0, 1fr) 110px 110px 120px minmax(0, 1fr); }
.wa-pun-g { grid-template-columns: 110px 90px 170px minmax(0, 1fr) 170px 110px; }
.wa-hist-g { grid-template-columns: 110px 90px 170px minmax(0, 1fr) 170px 90px; }
.wa-act-g { grid-template-columns: 110px 70px 90px 150px minmax(0, 1fr) 130px 100px; }
.wa-ban-g { grid-template-columns: 110px 150px minmax(0, 1fr) 150px 130px 110px; }
.wa-aud-g { grid-template-columns: 110px 60px 150px 160px minmax(0, 1fr) 70px; }
.wa-chat-g { grid-template-columns: 110px 70px 170px minmax(0, 1fr); }
.wa-adm-g { grid-template-columns: 52px 180px 170px minmax(0, 1fr) 90px 130px; }
.wa-fac-g { grid-template-columns: minmax(0, 1fr) 120px 90px 130px; }
.wa-mem-g { grid-template-columns: 70px minmax(0, 1fr) 150px minmax(0, 1fr) 120px; }
.wa-top-g { grid-template-columns: 40px minmax(0, 1fr) 150px 130px 130px; }
.wa-flow-g { grid-template-columns: minmax(0, 1fr) 140px 140px 80px; }
.wa-anm-g { grid-template-columns: 110px 140px 180px minmax(0, 1fr); }
.wa-ses-g { grid-template-columns: 150px 140px 140px minmax(0, 1fr) 110px; }
.wa-perm-g { grid-template-columns: minmax(0, 1fr) 70px 110px; }
.wa-rep-g { grid-template-columns: 60px 70px minmax(0, 1fr) 100px; }
.wa-srv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wa-srv .amj-card + .amj-card { margin-top: 0; }
.wa-srv .amj-ch b { display: flex; align-items: center; gap: 10px; }
.wa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t4); flex: none; display: inline-block; }
.wa-dot.is-ok { background: var(--ok); }
.wa-dot.is-bad { background: var(--red); }
.wa-dot.is-warn { background: var(--warn); }
.wa-tiles6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wa-scroll { max-height: 560px; overflow-y: auto; }
.wa-tabs-in { margin: 0 0 13px; }
.wa-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.wa-form .amj-card + .amj-card { margin-top: 0; }
.wa-form .amj-chips { margin-bottom: 10px; }
.wa-confirm.acc, .wa-confirm.red { outline: 1px solid #fff; }
.wa-mono { font-variant-numeric: tabular-nums; font-family: "MJ Manrope", monospace; letter-spacing: .02em; }
.wa-secret { padding: 12px 14px; border-radius: 6px; background: #1b1b1b; font: 800 16px/1.4 var(--mj-font); letter-spacing: .12em; word-break: break-all; user-select: all; }
.wa-small { font: 600 12px/1.4 var(--mj-font); color: var(--t3); }
.wa-res-ok { color: #58af5d; }
.wa-res-bad { color: #ff6b5e; }
.wa-ph-acts { display: flex; gap: 8px; margin-left: 12px; }
.wa-sel-row { cursor: pointer; }
.wa-sel-row:hover { background: #1b1b1b; }
.wa-sel-row.is-on { background: #262626; box-shadow: inset 3px 0 0 var(--a); }
.wa-pager { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.wa-pager span { flex: 1; text-align: center; font: 600 12px/1 var(--mj-font); color: var(--t3); }
.wa-events { margin-top: 12px; }
.wa-events .amj-tr4 { grid-template-columns: 110px 90px minmax(0, 1fr); }
.wa-kvs { columns: 2; column-gap: 26px; }
.wa-kvs .amj-kv { break-inside: avoid; }

/* toasts (same flat language as the game's HUD toasts) */
.wa-toasts { position: fixed; right: 30px; bottom: 30px; z-index: 100; display: flex; flex-direction: column; gap: 8px; width: 380px; max-width: calc(100vw - 32px); pointer-events: none; }
.wa-toast { padding: 14px 16px; border-radius: 6px; background: #1e1e1e; border: 1px solid #2a2a2a; box-shadow: inset 3px 0 0 var(--t4); font: 600 13px/1.4 "MJ Manrope", sans-serif; color: #e8e8e8; animation: amj-in .16s ease-out; }
.wa-toast b { display: block; margin-bottom: 3px; font-weight: 800; color: #fff; }
.wa-toast.is-ok { box-shadow: inset 3px 0 0 #45a543; }
.wa-toast.is-bad { box-shadow: inset 3px 0 0 #e5332a; }
.wa-toast.is-acc { box-shadow: inset 3px 0 0 #ea1856; }

/* narrower screens: side 240 px, then a top strip on phones */
@media (max-width: 1280px) {
	.wa .amj-side { width: 250px; padding: 16px; }
	.wa .amj-top, .wa .amj-main { left: 272px; right: 20px; }
	.wa .amj-pl { grid-template-columns: 400px minmax(0, 1fr); }
	.wa .amj-tiles, .wa-tiles6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wa-srv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.amj.wa { position: static; min-height: 100%; }
	.wa .amj-side { position: static; width: auto; padding: 12px 16px; flex-direction: row; flex-wrap: wrap; gap: 6px; overflow: visible; }
	.wa .amj-me { width: 100%; margin: 0 0 6px; }
	.wa .amj-sec { width: auto; height: 38px; }
	.wa .amj-sec .amj-send, .wa .amj-subs, .wa .amj-foot { display: none; }
	.wa .amj-top { position: static; height: auto; padding: 14px 16px 0; flex-wrap: wrap; }
	.wa .amj-main { position: static; padding: 14px 16px 24px; overflow: visible; }
	.wa .amj-main:has(.amj-pl) { overflow: visible; }
	.wa .amj-pl, .wa .amj-2c, .wa-form, .wa-srv { grid-template-columns: minmax(0, 1fr); }
	.wa .amj-pl-l { max-height: 60vh; }
	.wa .amj-tiles, .wa-tiles6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wa .amj-trow, .wa .amj-th { overflow-x: auto; }
	.wa-kvs { columns: 1; }
	.wa-pl-g { grid-template-columns: 40px minmax(0, 1fr) 28px 74px; }
	.wa-toasts { right: 16px; bottom: 16px; }
}
.amj-ava { overflow: hidden; }
.wa-ava-img { display: block; width: 100%; height: 100%; object-fit: cover; }