:root{
  --bg:#0b0b0d; --panel:#141114; --panel2:#1c1619; --line:#3a1218;
  --red:#b3001b; --red2:#e01a2e; --gold:#c9a45c; --text:#dcd6d0; --muted:#8d8580;
}
*{box-sizing:border-box}
body{
  margin:0; font:14px/1.6 'Inter',Verdana,sans-serif; color:var(--text);
  background:var(--bg) radial-gradient(ellipse at top, #2a0a10 0%, var(--bg) 60%) no-repeat;
  min-height:100vh;
}
a{color:var(--red2); text-decoration:none; font-weight:600}
a:hover{color:var(--gold)}

/* HEADER */
.mk-header{max-width:1180px; margin:0 auto; padding:24px 16px 12px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.mk-brand{display:flex; align-items:center; gap:18px; color:var(--text)}
.mk-logo{width:120px; height:120px; will-change:transform; filter:drop-shadow(0 0 2px #fff3) drop-shadow(0 0 14px rgba(224,26,46,.75)); transition:filter .4s}
.mk-brand:hover .mk-logo{filter:drop-shadow(0 0 2px #fff5) drop-shadow(0 0 24px rgba(255,30,50,1))}
.mk-title{font-family:'Zen Antique',serif; font-size:44px; letter-spacing:2px; color:#fff; text-shadow:0 0 18px rgba(179,0,27,.8); line-height:1}
.mk-title small{display:block; font-family:'Inter'; font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-top:8px}
.mk-status{background:var(--panel); border:1px solid var(--line); padding:8px 14px; border-radius:4px}
.mk-status .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px}
.mk-status.on .dot{background:#2ecc71; box-shadow:0 0 8px #2ecc71}
.mk-status.off .dot{background:var(--red2); box-shadow:0 0 8px var(--red2)}

/* NAV */
.mk-nav{max-width:1180px; margin:0 auto; padding:0 16px; position:relative; z-index:20}
.mk-menu{list-style:none; margin:0; padding:0; display:flex; background:linear-gradient(#1a0d10,#0f0a0b); border:1px solid var(--line); border-top:2px solid var(--red); border-radius:4px}
.mk-cat{position:relative}
.mk-cat-name{display:block; padding:14px 22px; font-family:'Zen Antique',serif; font-size:16px; color:#eee; cursor:pointer; letter-spacing:1px}
.mk-cat:hover .mk-cat-name{color:var(--gold); background:#22090e}
.mk-sub{list-style:none; margin:0; padding:6px 0; position:absolute; left:0; top:100%; min-width:210px; background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--red); display:none; box-shadow:0 10px 30px #000a}
.mk-cat:hover .mk-sub{display:block}
.mk-sub a{display:block; padding:8px 18px; color:var(--text); font-weight:400}
.mk-sub a:hover{background:#22090e; color:var(--gold)}
#mk-burger,.mk-burger{display:none}

/* LAYOUT */
.mk-wrap{max-width:1180px; margin:18px auto; padding:0 16px; display:grid; grid-template-columns:1fr 280px; gap:18px}
.mk-breadcrumb{color:var(--muted); font-size:12px; margin-bottom:8px}
.mk-scroll{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:20px; position:relative}
.mk-scroll::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--red),transparent)}
.mk-box{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:14px 16px; margin-bottom:16px}
.mk-box h3{margin:-14px -16px 12px; padding:10px 16px; font-family:'Zen Antique',serif; font-weight:400; font-size:17px; color:#fff; background:linear-gradient(90deg,#3a0610,transparent); border-bottom:1px solid var(--line)}
.mk-box p{margin:4px 0}
.mk-login input{width:100%; margin-bottom:8px; padding:9px 10px; background:#0d0a0b; border:1px solid var(--line); color:var(--text); border-radius:3px}
.mk-login input:focus{outline:none; border-color:var(--red)}
.mk-btn{display:block; width:100%; text-align:center; padding:9px; margin-bottom:8px; background:var(--red); color:#fff!important; border:0; border-radius:3px; font-weight:700; cursor:pointer; font-family:inherit}
.mk-btn:hover{background:var(--red2)}
.mk-btn.ghost{background:transparent; border:1px solid var(--red)}
.mk-btn.discord{background:#5865F2}
.mk-small{font-size:12px; font-weight:400; color:var(--muted)}
.mk-on{color:#2ecc71} .mk-off{color:var(--red2)}
.mk-top{margin:0 0 8px; padding-left:20px}
.mk-top li{display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px dashed #2a1a1d}
.mk-top span{color:var(--gold)}
.mk-footer{text-align:center; color:var(--muted); font-size:12px; padding:20px; border-top:1px solid var(--line); margin-top:20px}

/* NADPISANIE STARYCH TABEL I BOXÓW MYAAC */
.Content,.TableContainer{font-size:13px; color:var(--text)}
.TableContainer,.TableContentContainer,.TableContainer .Table1,.TableContainer .Table2,.TableContainer .Table3,.TableContainer .Table4,.TableContainer .Table5{border-color:var(--line)!important; background-color:var(--panel2)!important}
.TableContainer .Odd{background-color:#1a1417!important}
.TableContainer .Even{background-color:#211a1d!important}
.TableContainer .CaptionContainer,.TableContainer .CaptionContainer .CaptionInnerContainer{background:linear-gradient(90deg,#5a0b14,#2a0a10)!important}
.TableContainer .Table2 .InnerTableContainer td,.TableContainer .Table3 .TableContentAndRightShadow td{border-color:#2a1a1d!important}
.SmallBox .Message,.SmallBox .ErrorMessage{background-color:var(--panel2)!important; color:var(--text)}
.Content input[type=text],.Content input[type=password],.Content input[type=email],.Content select,.Content textarea{background:#0d0a0b; color:var(--text); border:1px solid var(--line); padding:5px}
.Content td{color:var(--text)}
.Content #News .NewsHeadline,.mk-news-head{background:linear-gradient(90deg,#3a0610,#140c0e); border-left:3px solid var(--red); padding:10px 14px; border-radius:3px; margin-bottom:10px; display:flex; align-items:center; gap:10px}
.mk-news-head .date{color:var(--gold); font-size:12px}
.mk-news-head .title{font-family:'Zen Antique',serif; font-size:19px; color:#fff}
.mk-news-head .author{margin-left:auto; font-size:12px; color:var(--muted)}
hr{border:0; border-top:1px solid var(--line)}

/* === WYŁĄCZENIE STARYCH RAMEK TIBII === */
.CaptionEdgeLeftTop,.CaptionEdgeRightTop,.CaptionEdgeLeftBottom,.CaptionEdgeRightBottom,
.CaptionBorderTop,.CaptionBorderBottom,.CaptionVerticalLeft,.CaptionVerticalRight,
.TableShadowContainerRightTop,.TableShadowRightTop,.TableBottomShadow,.TableShadowContainer,
.BoxFrameHorizontal,.BoxFrameVerticalLeft,.BoxFrameVerticalRight,
.BoxFrameEdgeLeftTop,.BoxFrameEdgeRightTop,.BoxFrameEdgeLeftBottom,.BoxFrameEdgeRightBottom{
  display:none!important;
}
.TableContentAndRightShadow{background:none!important; margin:0!important}
.TableContainer .Table3 .InnerTableContainer,
.TableContainer .Table5 .InnerTableContainer{margin:0!important}

/* === NOWE TABELE === */
.TableContainer{border:1px solid var(--line)!important; border-radius:4px; overflow:hidden; margin-bottom:16px; font-size:13px}
.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer{background:linear-gradient(90deg,#5a0b14,#1a0d10)!important; padding:8px 12px!important}
.TableContainer .CaptionContainer .Text{font-family:'Zen Antique',serif; font-size:16px; font-weight:400; color:#fff; padding:0}
.TableContainer .Table1,.TableContainer .Table2,.TableContainer .Table3,
.TableContainer .Table4,.TableContainer .Table5,.TableContentContainer{
  border:0!important; background:var(--panel2)!important; margin:0!important
}
.TableContainer td{border:0!important; border-bottom:1px solid #2a1a1d!important; padding:7px 10px!important; color:var(--text)}
.TableContainer tr:last-child td{border-bottom:0!important}
.TableContainer .Odd{background:#1a1417!important}
.TableContainer .Even{background:#211a1d!important}
.TableContainer .LabelV,.TableContainer .LabelH{color:var(--gold); font-weight:600}

/* komunikaty / błędy */
.SmallBox{font-size:13px; margin-bottom:14px}
.SmallBox .Message,.SmallBox .ErrorMessage{background:var(--panel2)!important; border:1px solid var(--line); border-left:3px solid var(--red); border-radius:4px; padding:12px 14px!important}
.SmallBox .ErrorMessage{color:#ff6b7a!important}
.SmallBox .AttentionSign{display:none}

/* pola formularzy */
.Content input[type=text],.Content input[type=password],.Content input[type=email],
.Content select,.Content textarea{background:#0d0a0b!important; color:var(--text)!important; border:1px solid var(--line)!important; border-radius:3px; padding:6px 8px}
.Content input:focus,.Content select:focus,.Content textarea:focus{outline:none; border-color:var(--red)!important}

/* === TYPOGRAFIA: Roboto + Nunito === */
:root{
  --font-head:'Roboto',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
}
body,.Content,.TableContainer,.TableContainer td,
input,select,textarea,button,.btn{
  font-family:var(--font-body)!important;
  font-size:14px;
  line-height:1.55;
}
h1,h2,h3,h4,h5,h6,.mk-title,.mk-box h3,.mk-nav a,
.TableContainer .CaptionContainer .Text,.LabelV,.LabelH,
.NewsHeadline,.NewsHeadlineText{
  font-family:var(--font-head)!important;
}
.mk-title{font-weight:900; letter-spacing:1px}
.mk-title small{font-family:var(--font-body)!important; font-weight:700; letter-spacing:4px}
h1,h2,h3,.mk-box h3,.TableContainer .CaptionContainer .Text{font-weight:700; letter-spacing:.3px}
.mk-nav a{font-weight:500; text-transform:uppercase; letter-spacing:1.2px; font-size:13px}
.TableContainer td{font-size:13.5px}
b,strong{font-weight:800}

/* === NAGŁÓWKI TABEL / MYAAC-TABLE === */
.LabelH,.LabelH td,.TableContainer .LabelH td{background:#2a1418!important; color:var(--gold)!important; font-family:var(--font-head,'Roboto'),sans-serif; font-weight:700; border-bottom:1px solid var(--red)!important}
.LabelH a{color:#ff5a6a!important; text-decoration:none}
.Content table[cellspacing="1"]{border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.Content table tr[bgcolor] td.white,.Content td.white{color:#fff!important}
.myaac-table td{border-bottom:1px solid #2a1a1d; padding:6px 10px}
.myaac-table tr:hover td{background:rgba(224,26,46,.06)}

/* === MENU W ACCOUNT MANAGEMENT === */
#account-manage div#one{width:190px}
#account-manage div#two{margin-left:190px; padding-left:20px}
.vertical-menu{background:var(--panel2); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.vertical-menu a{background:transparent!important; color:var(--text)!important; padding:10px 14px!important; border-left:3px solid transparent; border-bottom:1px solid #2a1a1d; font-weight:600; transition:.2s}
.vertical-menu a:last-child{border-bottom:0}
.vertical-menu a:hover{background:rgba(224,26,46,.12)!important; border-left-color:var(--red); color:#fff!important}
@media(max-width:700px){#account-manage div#one{width:100%; float:none; margin-bottom:15px} #account-manage div#two{margin-left:0; padding-left:0}}

/* === PRZYCISKI SYSTEMOWE (zamiast białych) === */
.Content input[type=submit],.Content input[type=button],.Content button:not(.btn-close){
  background:linear-gradient(180deg,#b3001b,#6d0010); color:#fff; border:1px solid #e01a2e;
  border-radius:3px; padding:6px 16px; font-weight:700; cursor:pointer; transition:.2s}
.Content input[type=submit]:hover,.Content input[type=button]:hover{filter:brightness(1.2); box-shadow:0 0 10px rgba(224,26,46,.5)}

/* === WYBÓR POSTACI Z TWARZĄ === */
.mk-voc-label{display:block; margin:6px 0 12px; color:var(--gold)}
.mk-vocs{display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:10px}
.mk-voc{position:relative; cursor:pointer; background:#0d0a0b; border:2px solid var(--line); border-radius:6px; padding:6px; text-align:center; transition:.2s; margin:0}
.mk-voc input{position:absolute; opacity:0; pointer-events:none}
.mk-voc img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; filter:grayscale(.7) brightness(.75); transition:.25s}
.mk-voc span{display:block; margin-top:6px; font-weight:700; font-size:13px; color:var(--text)}
.mk-voc:hover{border-color:#7a1520; transform:translateY(-2px)}
.mk-voc:hover img{filter:none}
.mk-voc:has(input:checked){border-color:var(--red); box-shadow:0 0 14px rgba(224,26,46,.6)}
.mk-voc:has(input:checked) img{filter:none}
.mk-voc:has(input:checked) span{color:#fff}

/* === FORMULARZE W STYLU BOOTSTRAP (ciemne) === */
.Content input[type=text],.Content input[type=password],.Content input[type=email],
.Content input[type=number],.Content input:not([type]),.Content select,.Content textarea,
.Content .form-control,.Content .form-select{
  display:block; width:100%; max-width:420px;
  background:#0d0a0b!important; color:#f1e7e9!important;
  border:1px solid #3a2328!important; border-radius:6px!important;
  padding:8px 12px!important; font-family:var(--font-body)!important; font-size:14px;
  transition:border-color .2s, box-shadow .2s; box-shadow:none;
}
.Content input::placeholder,.Content textarea::placeholder{color:#7d6a6e}
.Content input:focus,.Content select:focus,.Content textarea:focus,
.Content .form-control:focus,.Content .form-select:focus{
  outline:0; border-color:var(--red)!important; box-shadow:0 0 0 .2rem rgba(224,26,46,.25)!important;
}
.Content select,.Content .form-select{appearance:auto}
.Content .input-group{max-width:420px; flex-wrap:nowrap}
.Content .input-group .form-control{max-width:none; border-top-left-radius:0!important; border-bottom-left-radius:0!important}
.Content .input-group-text{background:#2a1418; color:var(--gold); border:1px solid #3a2328; border-right:0}

/* radio + checkbox */
.Content input[type=radio],.Content input[type=checkbox]{accent-color:var(--red); width:16px; height:16px; vertical-align:middle; margin-right:6px; cursor:pointer}
.Content .form-check-input{background-color:#0d0a0b; border-color:#3a2328}
.Content .form-check-input:checked{background-color:var(--red); border-color:var(--red)}

/* stare ikonki ok/nok zamiast nich czerwony tekst błędu */
.mk-indicator,#account_indicator,#email_indicator,#password_indicator,#password_confirm_indicator{display:none!important}
.mk-error,.FormFieldError,#character_error{color:#ff5a6a!important; font-size:12px; margin-top:5px; display:block}
.mk-field{max-width:420px}

/* ================================================================
   MANGEKYO TABLES – jeden styl dla wszystkich tabel z danymi
   ================================================================ */
:root{
  --tb-bg:#141012; --tb-alt:#191316; --tb-hover:#24161a;
  --tb-head:#2a1418; --tb-line:#2e1d21;
}

/* --- kontener tabeli --- */
.Content :is(table.dataTable,table.TableContent,table.myaac-table,table:has(>thead),table:has(>tbody>tr>th),table:has(>tbody>tr[bgcolor]),table:has(>tbody>tr[style*="background"])){
  width:100%!important; border-collapse:separate!important; border-spacing:0!important;
  background:var(--tb-bg)!important; border:1px solid var(--tb-line)!important;
  border-radius:6px; overflow:hidden; margin:0 0 16px!important; color:var(--text);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* --- wiersze (nadpisuje bgcolor / inline style / DataTables #fff) --- */
.Content :is(table.dataTable,table.TableContent,table.myaac-table,table:has(>thead),table:has(>tbody>tr>th),table:has(>tbody>tr[bgcolor]),table:has(>tbody>tr[style*="background"]))>tbody>tr{
  background:var(--tb-bg)!important; transition:background .15s;
}
.Content :is(table.dataTable,table.TableContent,table.myaac-table,table:has(>thead),table:has(>tbody>tr>th),table:has(>tbody>tr[bgcolor]),table:has(>tbody>tr[style*="background"]))>tbody>tr:nth-child(even){
  background:var(--tb-alt)!important;
}
.Content :is(table.dataTable,table.TableContent,table.myaac-table,table:has(>thead),table:has(>tbody>tr>th),table:has(>tbody>tr[bgcolor]),table:has(>tbody>tr[style*="background"]))>tbody>tr:hover{
  background:var(--tb-hover)!important;
}

/* --- komórki --- */
.Content :is(table.dataTable,table.TableContent,table.myaac-table,table:has(>thead),table:has(>tbody>tr>th),table:has(>tbody>tr[bgcolor]),table:has(>tbody>tr[style*="background"]))>tbody>tr>td{
  background:transparent!important; color:var(--text)!important;
  padding:9px 12px!important; border:0!important; border-bottom:1px solid var(--tb-line)!important;
  vertical-align:middle;
}
.Content :is(table.dataTable,table.TableContent,table.myaac-table,table:has(>thead),table:has(>tbody>tr>th),table:has(>tbody>tr[bgcolor]),table:has(>tbody>tr[style*="background"]))>tbody>tr:last-child>td{
  border-bottom:0!important;
}
/* etykiety w tabelach pionowych (Account Name:, Email Address: ...) */
.Content table td.LabelV,
.Content table tr>td[style*="width: 90px"]:first-child,
.Content table tr>td[style*="width: 80px"]:first-child{
  white-space:nowrap; width:1%!important; padding-right:24px!important;
  color:#a8979b!important; font-weight:600;
}

/* --- nagłówki --- */
.Content :is(table.dataTable,table.TableContent,table.myaac-table,table:has(>thead),table:has(>tbody>tr>th),table:has(>tbody>tr[bgcolor]),table:has(>tbody>tr[style*="background"])) :is(th, tr.LabelH>td, tr.white>td){
  background-color:var(--tb-head)!important; color:var(--gold)!important;
  font-family:var(--font-head,'Roboto'),sans-serif; font-weight:700;
  font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  padding:11px 12px!important; text-align:left; white-space:nowrap;
  border:0!important; border-bottom:2px solid var(--red)!important;
}

/* --- legacy "tibijskie" cienie i ramki – wyłączone --- */
.TableShadowContainerRightTop,.TableShadowContainer{display:none!important}
.TableContentAndRightShadow{background:none!important; padding:0!important}
.TableContentContainer{border:0!important}

/* ================= DATATABLES (Monsters, Spells, Wiki...) ================= */
.dataTables_wrapper{color:#9b8b8f; margin-top:10px}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{margin-bottom:14px; color:#9b8b8f!important}
.dataTables_wrapper .dataTables_info{color:#7d6a6e!important; padding-top:12px!important}
.Content .dataTables_wrapper .dataTables_length select,
.Content .dataTables_wrapper .dataTables_filter input{
  display:inline-block!important; width:auto!important; min-width:70px; margin:0 6px!important;
  padding:5px 10px!important;
}
.Content .dataTables_wrapper .dataTables_filter input{min-width:220px}

/* sortowanie – ikonki Font Awesome zamiast szarych PNG */
table.dataTable thead :is(.sorting,.sorting_asc,.sorting_desc){
  background-image:none!important; position:relative; padding-right:28px!important; cursor:pointer;
}
table.dataTable thead :is(.sorting,.sorting_asc,.sorting_desc)::after{
  font-family:"Font Awesome 6 Pro","Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:11px; opacity:.35; content:"\f0dc";
}
table.dataTable thead .sorting_asc::after{content:"\f0de"; opacity:1; color:var(--red)}
table.dataTable thead .sorting_desc::after{content:"\f0dd"; opacity:1; color:var(--red)}

/* paginacja */
.dataTables_wrapper .dataTables_paginate{padding-top:10px!important}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:var(--text)!important; background:var(--tb-bg)!important;
  border:1px solid var(--tb-line)!important; border-radius:4px!important;
  padding:5px 12px!important; margin-left:4px!important; box-shadow:none!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--tb-head)!important; border-color:var(--red)!important; color:#fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:linear-gradient(180deg,#b3001b,#6d0010)!important;
  border-color:var(--red)!important; color:#fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  opacity:.35; background:transparent!important; border-color:transparent!important; color:var(--text)!important;
}
.dataTables_wrapper .dataTables_paginate .ellipsis{color:#7d6a6e}
table.dataTable.no-footer{border-bottom:1px solid var(--tb-line)!important}

/* nagłówki sekcji (Account Management itp.) */
.Content h2{font-size:22px; margin:22px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--tb-line)}

/* === FIX: treść nie może rozpychać layoutu === */
.mk-header,.mk-nav,.mk-wrap{box-sizing:border-box}
.mk-wrap{grid-template-columns:minmax(0,1fr) 280px!important}
.mk-main,.mk-scroll,#ContentHelper{min-width:0!important; max-width:100%}
.mk-scroll{overflow-x:auto}

/* Account Management – systemowy CSS */
#account-manage{width:auto!important; padding:0!important; box-sizing:border-box; display:flex; gap:20px; align-items:flex-start}
#account-manage div#one{float:none!important; flex:0 0 180px; width:180px!important}
#account-manage div#two{margin-left:0!important; padding-left:0!important; flex:1 1 auto; min-width:0}
#account-manage table{max-width:100%}
#account-manage td{word-break:break-word}

@media (max-width:768px){
  #account-manage{flex-direction:column}
  #account-manage div#one{width:100%!important; flex-basis:auto}
}

.mk-hs-voc {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	filter: drop-shadow(0 0 4px rgba(200, 20, 40, .5));
}

.mk-voc { position: relative; }
.mk-role {
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: 4px; padding: 2px 8px; border-radius: 999px;
	font: 700 .68rem/1.4 'Roboto', sans-serif; font-style: normal; letter-spacing: .06em;
	border: 1px solid currentColor; background: rgba(0,0,0,.45);
}
.mk-role-dps     { color: #ff4d5e; }
.mk-role-support { color: #4ade80; }
.mk-role-tank    { color: #60a5fa; }

.mk-role-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.mk-role-filter button {
	padding: 4px 12px; border-radius: 999px; cursor: pointer;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.15);
	color: #dcd6d0; font: 600 .8rem 'Roboto', sans-serif; transition: .15s;
}
.mk-role-filter button:hover { border-color: currentColor; }
.mk-role-filter button.active { background: rgba(200,20,40,.25); border-color: #c81428; color: #fff; }
.mk-role-filter button.mk-role-dps     { color: #ff4d5e; }
.mk-role-filter button.mk-role-support { color: #4ade80; }
.mk-role-filter button.mk-role-tank    { color: #60a5fa; }
.mk-role-filter button[class*="mk-role-"].active { color: #fff; }

/* lista postaci w Account Management */
.mk-chars { width: 100%; }
.mk-chars th, .mk-chars td { vertical-align: middle; }
.mk-chars .nw { white-space: nowrap; width: 1%; }
.mk-chars .mk-edit {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .2rem .6rem; border-radius: 6px;
	border: 1px solid rgba(220, 38, 38, .5);
	color: #ef4444; text-decoration: none; font-size: .85rem;
	transition: background .15s, color .15s;
}
.mk-chars .mk-edit:hover { background: #dc2626; color: #fff; }

/* =========================================================
   MOBILE / TABLET: panel boczny pod treścią + burger menu
   ========================================================= */
@media (max-width: 991.98px) {
	html, body { overflow-x: hidden; }

	/* układ: jedna kolumna, treść na górze, panel pod spodem */
	.mk-wrap {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1rem !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 .75rem !important;
		box-sizing: border-box;
	}
	.mk-main, .mk-side {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		margin: 0 !important;
	}
	.mk-main { order: 1; }
	.mk-side { order: 2; }

	/* treść nie rozpycha strony */
	.mk-scroll, #ContentHelper { width: 100% !important; min-width: 0 !important; overflow-wrap: anywhere; }
	.mk-scroll img { max-width: 100%; height: auto; }
	.mk-scroll table {
		display: block;
		width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.mk-scroll td[style*="width: 17px"],
	.mk-scroll td[style*="width: 18px"],
	.mk-scroll td[width="5%"] { display: none; }

	/* header */
	.mk-header { flex-wrap: wrap; gap: .5rem; padding: .75rem !important; }
	.mk-title { font-size: 26px !important; }
	.mk-logo { width: 64px !important; height: 64px !important; }
	.mk-breadcrumb { font-size: .85rem; margin-bottom: .5rem; }

	/* burger menu (z Twojego starego bloku) */
	.mk-burger { display: block; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--red); cursor: pointer; font-weight: 700; }
	.mk-menu { display: none; flex-direction: column; }
	#mk-burger:checked ~ .mk-menu { display: flex; }
	.mk-sub { position: static; display: block; border: 0; box-shadow: none; padding-left: 12px; }
}

/* telefony: mniejsze odstępy */
@media (max-width: 575.98px) {
	.mk-box, .mk-scroll { padding: .75rem !important; }
	.mk-box h3 { font-size: 1.1rem; }
	.mk-title { font-size: 20px !important; }
	.mk-logo { width: 52px !important; height: 52px !important; }
}