/* =========================================================
   Darknestia — warstwa interfejsu (ładowana PO tibia.css)
   Zasada: jedna stylistyka. Ciemne, spokojne panele; złoto
   wyłącznie jako akcent treści. Zero poświat i gradientów-neonów.
   ========================================================= */
:root{
  --bg:#0e1015; --panel:#161922; --panel-2:#1c202a; --panel-3:#232734;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.11);
  --ink:#d7d3c9; --ink-dim:#8e93a0; --ink-bright:#efeade;
  --gold:#c2a04a; --gold-dim:#9c8340;
  --r:10px; --shadow:0 2px 10px rgba(0,0,0,.45);
}

/* ---------- 1. zdejmujemy drewno i rzeźbione rogi ---------- */
.left_box, .right_box, .center_box{
  background:var(--panel) !important;
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); margin-bottom:16px !important; overflow:hidden;
}
.corner_lt,.corner_rt,.corner_rb,.corner_lb,
.border_bottom{ display:none !important; }

/* pasek tytułu: płaski, z cienką linią pod spodem */
.left_box .title, .right_box .title, .center_box .title{
  background:var(--panel-2) !important; height:auto !important;
  min-height:42px; padding:11px 16px !important;
  border-bottom:1px solid var(--line-2) !important;
  display:flex; align-items:center; justify-content:center;
}
/* grawerowane napisy tytułów zostają — to charakter, nie ozdobnik */
.left_box .title span, .right_box .title span, .center_box .title span{
  filter:saturate(.75) brightness(.95);
}
.left_box .title img, .right_box .title img, .center_box .title img{
  opacity:.65; margin-right:8px;
}

/* ---------- 2. wnętrza paneli ---------- */
.left_box .content, .right_box .content{
  background:transparent !important; width:auto !important;
  margin:0 !important; padding:6px !important;
}
.center_box .content_bg{
  background:var(--panel) !important; background-image:none !important;
  width:auto !important; margin:0 !important; color:var(--ink);
}
.center_box .content_bg .content{ padding:20px 22px !important; }

/* ---------- 3. menu boczne ---------- */
.left_box ul, .right_box ul{ margin:0; padding:0; list-style:none; }
.left_box ul li a, .right_box ul li a{
  display:block; padding:9px 12px !important; border-radius:6px;
  color:var(--ink) !important; font-size:13.5px; text-decoration:none;
  background:transparent !important; border:0 !important;
  transition:background .12s, color .12s;
}
.left_box ul li a:hover, .right_box ul li a:hover{
  background:rgba(255,255,255,.05) !important; color:var(--ink-bright) !important;
}
.left_box ul li a:after, .right_box ul li a:after{ display:none !important; }

/* ---------- 4. typografia treści ---------- */
.center_box .content, .center_box .content td, .center_box .content th,
.center_box .content p, .center_box .content div, .center_box .content span{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.65; color:var(--ink);
}
.center_box .content b, .center_box .content strong{ color:var(--ink-bright); font-weight:600; }
.center_box .content a{ color:var(--gold); text-decoration:none; }
.center_box .content a:hover{ color:#d9b95e; text-decoration:underline; }
.center_box .content h1,.center_box .content h2,.center_box .content h3{
  font-family:Georgia,"Times New Roman",serif; font-weight:600;
  color:var(--ink-bright); letter-spacing:.3px; margin:2px 0 16px;
}

/* ---------- 5. tabele ---------- */
.center_box .content table{
  width:100% !important; border-collapse:separate !important; border-spacing:0 !important;
  margin:8px 0 20px; background:transparent !important;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.center_box .content table tr[bgcolor]{ background:transparent !important; }
.center_box .content table td, .center_box .content table th{
  padding:11px 14px !important; border:0 !important;
  border-bottom:1px solid var(--line) !important; background:transparent !important;
  text-align:left; vertical-align:middle; font-variant-numeric:tabular-nums;
}
.center_box .content table td.white, .center_box .content table th,
.center_box .content .myaac-table > thead > tr > td{
  background:var(--panel-3) !important; color:var(--ink-dim) !important;
  font-size:11.5px !important; text-transform:uppercase; letter-spacing:1px;
  font-weight:600; white-space:nowrap;
}
.center_box .content .myaac-table > tbody > tr:nth-child(odd){ background:transparent !important; }
.center_box .content .myaac-table > tbody > tr:nth-child(even),
.center_box .content table tr:nth-child(even):not(:has(td.white)) td{
  background:rgba(255,255,255,.02) !important;
}
.center_box .content .myaac-table > tbody > tr:hover,
.center_box .content table tr:hover:not(:has(td.white)) td{
  background:rgba(194,160,74,.06) !important;
}
.center_box .content table tr:last-child td{ border-bottom:0 !important; }
.center_box .content{ overflow-x:auto; }

/* ---------- 6. formularze ---------- */
.center_box .content select, .center_box .content input[type=text],
.center_box .content input[type=password], .center_box .content input[type=number],
.center_box .content textarea,
.left_box input[type=text], .left_box input[type=password], .left_box .inputtext{
  background:var(--bg) !important; color:var(--ink) !important;
  border:1px solid var(--line-2) !important; border-radius:6px !important;
  padding:8px 11px !important; font-size:13.5px; outline:none;
  transition:border-color .15s;
}
.center_box .content :is(select,input,textarea):focus,
.left_box :is(input,select):focus{
  border-color:var(--gold-dim) !important; box-shadow:none !important;
}
.center_box .content input[type=submit], .center_box .content button,
.left_box .loginbtn, .left_box .createbtn{
  background:var(--panel-3) !important; color:var(--ink-bright) !important;
  border:1px solid var(--line-2) !important; border-radius:6px !important;
  padding:9px 16px !important; font-weight:500 !important; cursor:pointer;
  text-shadow:none !important;
}
.center_box .content input[type=submit]:hover, .center_box .content button:hover,
.left_box .loginbtn:hover, .left_box .createbtn:hover{
  background:#2b3040 !important; border-color:var(--gold-dim) !important;
}

/* ---------- 7. filtry jako pasek ---------- */
.center_box .content .right_box, .center_box .content .left_box{
  float:none !important; width:auto !important; margin:0 0 16px !important;
  background:var(--panel-2) !important; border:1px solid var(--line);
  border-radius:8px; box-shadow:none !important; padding:10px 14px !important;
}
.center_box .content :is(.right_box,.left_box) ul{
  display:flex; flex-wrap:wrap; gap:6px 8px;
}
.center_box .content :is(.right_box,.left_box) li a{
  display:inline-block; padding:5px 12px !important; border-radius:999px;
  background:rgba(255,255,255,.04) !important; border:1px solid var(--line) !important;
  font-size:13px;
}
.center_box .content :is(.right_box,.left_box) li a:hover{
  background:rgba(194,160,74,.12) !important; border-color:var(--gold-dim) !important;
}

/* ---------- 8. drobiazgi ---------- */
.warning, .center_box .content .warning{
  background:rgba(194,160,74,.08); border:1px solid rgba(194,160,74,.24);
  border-radius:6px; padding:10px 14px; color:#cbae5e; margin-bottom:16px;
}
.center_box .content hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }
.center_box .content img{ max-width:100%; height:auto; }
.top-bar{ background:transparent !important; }
.top-bar a{ color:var(--gold) !important; font-weight:500; }
.footer_cnt{ color:var(--ink-dim); }

/* ---------- 9. wąskie ekrany ---------- */
@media (max-width:1200px){
  .container_main,.dn-banner{ width:100% !important; }
  .container_left,.container_right,.container_mid{
    width:100% !important; float:none !important; margin:0 auto 14px !important;
  }
}

/* ---------- 10. przyciski logowania: byly sprite'ami PNG ---------- */
.loginbtn, .createbtn, .inputbtn{
  background-image:none !important; background:var(--panel-3) !important;
  width:auto !important; height:auto !important;
  padding:8px 16px !important; margin:0 6px 0 0 !important;
  border:1px solid var(--line-2) !important; border-radius:6px !important;
  color:var(--ink-bright) !important; font-size:13px !important; font-weight:500;
  line-height:1.2 !important; text-align:center; text-decoration:none !important;
  text-indent:0 !important; display:inline-block; cursor:pointer;
}
.createbtn{ color:var(--gold) !important; }
.loginbtn:hover, .createbtn:hover, .inputbtn:hover{
  background:#2b3040 !important; border-color:var(--gold-dim) !important;
}

/* ---------- 11. tytuly paneli: rowne wysrodkowanie ---------- */
.left_box .title, .right_box .title, .center_box .title{ gap:9px; }
.left_box .title span, .right_box .title span, .center_box .title span{
  background-position:center !important; flex:0 0 auto;
}

/* ---------- 12. MyAAC uklada niektore strony na ZAGNIEZDZONYCH tabelach.
   Tabela zawierajaca inna tabele to szkielet, nie dane — nie moze dostac
   ramki, tla ani paddingu karty, bo rozpycha panel. ---------- */
.center_box .content table:has(table){
  border:0 !important; border-radius:0 !important; overflow:visible !important;
  margin:0 !important; table-layout:auto !important;
}
.center_box .content table:has(table) > tbody > tr > td{
  border-bottom:0 !important; background:transparent !important;
  padding:0 0 0 14px !important; vertical-align:top !important;
}
.center_box .content table:has(table) > tbody > tr > td:first-child{ padding-left:0 !important; }
.center_box .content table:has(table) > tbody > tr:hover > td{ background:transparent !important; }
/* wewnetrzna tabelka filtrow: waska karta, nie rozciagana na 100% */
.center_box .content table:has(table) table{ margin:0 0 12px !important; min-width:150px; }

/* =========================================================
   13. KONTO: manage / create character / zmiana hasla itd.
   MyAAC wstrzykuje tu wlasny <style> i INLINE style na <tr>,
   wiec kazda regula musi byc jawnie mocniejsza.
   ========================================================= */
#account-manage{ width:100% !important; padding:0 !important; }
#account-manage div#one, #account-manage div#two{ width:100% !important; }

/* pasek akcji konta (byly kremowe kafle z czarnym tekstem) */
.vertical-menu{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.vertical-menu a{
  background-color:var(--panel-3) !important; color:var(--ink) !important;
  border:1px solid var(--line-2) !important; border-radius:6px !important;
  padding:9px 14px !important; font-size:13.5px !important;
  display:inline-flex !important; align-items:center; text-decoration:none !important;
}
.vertical-menu a:hover{
  background-color:#2b3040 !important; color:var(--ink-bright) !important;
  border-color:var(--gold-dim) !important;
}

/* wiersze z inline background-color (#F1E0C6 / #D4C0A1) */
.center_box .content tr[style*="background-color"]{ background:transparent !important; }
.center_box .content tr[style*="F1E0C6"] > td{ background:transparent !important; }
.center_box .content tr[style*="D4C0A1"] > td{ background:rgba(255,255,255,.025) !important; }

/* tabele etykieta/wartosc — lewa kolumna jako opis */
.center_box .content table:not(:has(table)) > tbody > tr > td:first-child{
  color:var(--ink-dim); white-space:nowrap;
}

/* naglowki sekcji na stronach konta */
.center_box .content h2{
  font-family:Georgia,"Times New Roman",serif; font-size:17px; font-weight:600;
  color:var(--ink-bright); letter-spacing:.3px;
  margin:22px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.center_box .content h2:first-child{ margin-top:0; }

/* pola wyboru i etykiety formularzy */
.center_box .content input[type=radio],
.center_box .content input[type=checkbox]{
  accent-color:var(--gold); width:15px; height:15px; margin-right:7px;
  vertical-align:middle; cursor:pointer;
}
.center_box .content label{ cursor:pointer; margin-right:16px; }
.center_box .content form{ margin:0 0 6px; }

/* tabela informacji serwerowych */
.sinfotable{ width:100% !important; border-collapse:separate !important; border-spacing:0 !important; }
.sinfotable td{ padding:9px 12px !important; border-bottom:1px solid var(--line) !important; }

/* przyciski akcji na stronach konta */
.inputbtn{ margin:0 6px 6px 0 !important; }
.center_box .content center{ text-align:left !important; }

/* =========================================================
   14. Komponent "TableContainer" (styl tibia.com) — uzywany m.in.
   przy tworzeniu postaci. Skladal sie z kremowych tel i kilkunastu
   dekoracyjnych GIF-ow (ramki, cienie, rogi). Splaszczamy do karty.
   ========================================================= */
.TableContainer, .Table1, .Table2, .Table3, .Table4, .TableContent,
.InnerTableContainer, .TableContentContainer, .TableContentAndRightShadow{
  background:transparent !important; background-image:none !important;
  border:0 !important; box-shadow:none !important; color:var(--ink) !important;
}
.TableContainer{
  border:1px solid var(--line) !important; border-radius:8px !important;
  overflow:hidden; margin:0 0 18px !important; background:var(--panel) !important;
}
/* naglowek karty */
.TableContainer .CaptionContainer{
  background:var(--panel-3) !important; background-image:none !important;
  height:auto !important; border-bottom:1px solid var(--line-2) !important;
}
.CaptionContainer .CaptionInnerContainer{ background:transparent !important; height:auto !important; }
.CaptionContainer .Text{
  background:transparent !important; color:var(--ink-bright) !important;
  font-family:Georgia,serif !important; font-size:14px !important; font-weight:600;
  letter-spacing:.4px; padding:10px 14px !important; height:auto !important;
  text-shadow:none !important; border:0 !important;
}
/* dekoracje: rogi, ramki, cienie — do wyrzucenia */
.CaptionEdgeLeftTop,.CaptionEdgeRightTop,.CaptionEdgeLeftBottom,.CaptionEdgeRightBottom,
.CaptionBorderTop,.CaptionBorderBottom,.CaptionVerticalLeft,.CaptionVerticalRight,
[class^="TableShadow"],[class*=" TableShadow"]{ display:none !important; }

/* wiersze */
.TableContainer .Odd, .TableContainer .Even,
.Table3 td, .TableContent td{
  background:transparent !important; background-image:none !important;
  color:var(--ink) !important; border:0 !important; padding:11px 14px !important;
}
.TableContainer .Even{ background:rgba(255,255,255,.025) !important; }
.TableContainer .LabelH, .TableContainer .LabelV{
  background:var(--panel-2) !important; color:var(--ink-dim) !important;
  font-size:11.5px !important; text-transform:uppercase; letter-spacing:1px;
  font-weight:600; padding:10px 14px !important; border:0 !important;
}
.TableContainer a{ color:var(--gold) !important; }
.TableContainer input[type=text]{ min-width:220px; }

/* pola <input> BEZ atrybutu type (domyslnie text) — np. nazwa postaci */
.center_box .content input:not([type]),
.TableContainer input:not([type]){
  background:var(--bg) !important; color:var(--ink) !important;
  border:1px solid var(--line-2) !important; border-radius:6px !important;
  padding:8px 11px !important; font-size:13.5px !important; outline:none;
}
.center_box .content input:not([type]):focus,
.TableContainer input:not([type]):focus{ border-color:var(--gold-dim) !important; }

/* pola logowania w panelu bocznym (blok ma klase right_box, nie left_box) */
.inputtext, input.inputtext{
  background:var(--bg) !important; background-image:none !important;
  color:var(--ink) !important; border:1px solid var(--line-2) !important;
  border-radius:6px !important; padding:8px 11px !important;
  width:100% !important; box-sizing:border-box; font-size:13px !important;
}
.inputtext:focus{ border-color:var(--gold-dim) !important; outline:none; }
.right_box .content center, .left_box .content center{ text-align:center; }

/* =========================================================
   15. DataTables (strona Spells laduje tools/css/datatables.min.css
   z wlasnym jasnym motywem). Klasy dokladane przez JS, wiec nie widac
   ich w zrodle strony — tylko na renderze.
   ========================================================= */
.dataTables_wrapper, .dt-container,
.dataTables_wrapper *, .dt-container *{ color:var(--ink); }
table.dataTable{
  background:transparent !important; border-collapse:separate !important;
  border:1px solid var(--line) !important; border-radius:8px; overflow:hidden;
}
table.dataTable thead th, table.dataTable thead td,
table.dataTable tfoot th, table.dataTable tfoot td{
  background:var(--panel-3) !important; color:var(--ink-dim) !important;
  border-bottom:1px solid var(--line-2) !important; border-top:0 !important;
  font-size:11.5px !important; text-transform:uppercase; letter-spacing:1px;
}
table.dataTable tbody tr, table.dataTable tbody tr.odd, table.dataTable tbody tr.even,
table.dataTable > tbody > tr:nth-child(odd) > *, table.dataTable > tbody > tr:nth-child(even) > *{
  background:transparent !important; box-shadow:none !important; color:var(--ink) !important;
}
table.dataTable > tbody > tr:nth-child(even) > td{ background:rgba(255,255,255,.02) !important; }
table.dataTable tbody tr:hover > td{ background:rgba(194,160,74,.06) !important; }
table.dataTable tbody td{ border-bottom:1px solid var(--line) !important; padding:10px 12px !important; }

/* pole szukania, wybor liczby wierszy, licznik, stronicowanie */
.dataTables_filter input, .dataTables_length select,
.dt-search input, .dt-length select{
  background:var(--bg) !important; color:var(--ink) !important;
  border:1px solid var(--line-2) !important; border-radius:6px !important;
  padding:6px 10px !important;
}
.dataTables_info, .dt-info{ color:var(--ink-dim) !important; }
.dataTables_paginate .paginate_button, .dt-paging-button{
  background:var(--panel-2) !important; background-image:none !important;
  color:var(--ink) !important; border:1px solid var(--line) !important;
  border-radius:6px !important; margin:0 3px !important; padding:5px 11px !important;
}
.dataTables_paginate .paginate_button.current, .dt-paging-button.current{
  background:var(--panel-3) !important; border-color:var(--gold-dim) !important;
  color:var(--ink-bright) !important;
}
.dataTables_paginate .paginate_button:hover, .dt-paging-button:hover{
  background:#2b3040 !important; border-color:var(--gold-dim) !important; color:var(--ink-bright) !important;
}
.dataTables_paginate .paginate_button.disabled, .dt-paging-button.disabled{ opacity:.4; }

/* zakladki (Spells) */
.ts_Spells > label, .tab-label{
  display:inline-block; padding:8px 14px; margin:0 4px 10px 0;
  background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
  color:var(--ink); cursor:pointer; font-size:13px;
}
.ts_Spells > label:hover{ background:#2b3040; border-color:var(--gold-dim); }
.tab-panel{ padding-top:6px; }

/* =========================================================
   16. WYKONCZENIE — glebia, przyciski, tabele, rytm typograficzny.
   Ta sekcja jest OSTATNIA, wiec wygrywa z wczesniejszymi regulami.
   Glebia = swiatlo od gory + cien pod spodem, NIE poswiata.
   ========================================================= */

/* ---- panele: gradient + wewnetrzne rozjasnienie u gory + cien ---- */
.left_box, .right_box, .center_box, .TableContainer{
  background:linear-gradient(180deg,#1b1f29 0%,#15181f 100%) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  border-radius:10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 1px 2px rgba(0,0,0,.35),
    0 8px 22px -8px rgba(0,0,0,.75) !important;
}

/* ---- pasek tytulu: wlasny gradient + zlota wloskowata linia ---- */
.left_box .title, .right_box .title, .center_box .title,
.TableContainer .CaptionContainer{
  background:linear-gradient(180deg,#2a3141 0%,#1e2430 100%) !important;
  border-bottom:1px solid rgba(194,160,74,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
  padding:12px 16px !important;
}
.center_box .title{ justify-content:center !important; }
.left_box .title, .right_box .title{ justify-content:center !important; }

/* ---- przyciski: wypukle, z reakcja na klik ---- */
.center_box .content input[type=submit], .center_box .content button,
.loginbtn, .createbtn, .inputbtn, .vertical-menu a,
.center_box .content input[type=button]{
  background:linear-gradient(180deg,#333b4d 0%,#242b39 100%) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:7px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.4) !important;
  color:#e6e1d5 !important; font-weight:500 !important;
  padding:9px 16px !important; letter-spacing:.2px;
  transition:background .13s, transform .06s, border-color .13s;
}
.center_box .content input[type=submit]:hover, .center_box .content button:hover,
.loginbtn:hover, .createbtn:hover, .inputbtn:hover, .vertical-menu a:hover{
  background:linear-gradient(180deg,#3c465b 0%,#2b3342 100%) !important;
  border-color:rgba(194,160,74,.5) !important; color:#fff6e2 !important;
}
.center_box .content input[type=submit]:active, .center_box .content button:active,
.loginbtn:active, .createbtn:active, .inputbtn:active, .vertical-menu a:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45) !important;
}
/* przycisk glowny (zloty akcent) */
.createbtn{
  background:linear-gradient(180deg,#6b5a2a 0%,#4a3d1c 100%) !important;
  border-color:rgba(194,160,74,.55) !important; color:#f3e3b4 !important;
}
.createbtn:hover{ background:linear-gradient(180deg,#7d6a33 0%,#584922 100%) !important; }

/* ---- tabele: naglowek z gradientem, wiersze z rytmem ---- */
.center_box .content table:not(:has(table)),
table.dataTable, .center_box .content .myaac-table{
  border:1px solid rgba(255,255,255,.08) !important; border-radius:9px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px -4px rgba(0,0,0,.6) !important;
}
.center_box .content table td.white, .center_box .content table th,
.center_box .content .myaac-table > thead > tr > td,
table.dataTable thead th, table.dataTable thead td,
.TableContainer .LabelH, .TableContainer .LabelV{
  background:linear-gradient(180deg,#2b3241 0%,#232936 100%) !important;
  border-bottom:1px solid rgba(194,160,74,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  padding:11px 14px !important;
}
/* wiersz pod kursorem: delikatna zlota krawedz z lewej */
.center_box .content .myaac-table > tbody > tr:hover > td:first-child,
table.dataTable tbody tr:hover > td:first-child{
  box-shadow:inset 3px 0 0 rgba(194,160,74,.55);
}

/* ---- RYTM I WYROWNANIE TEKSTU ---- */
.center_box .content{ padding:22px 26px !important; }
.center_box .content > *:first-child{ margin-top:0 !important; }
.center_box .content p{ margin:0 0 12px; max-width:70ch; text-align:left; }
.center_box .content br + br{ display:none; }
/* nic nie ma byc centrowane "przypadkiem" */
.center_box .content center{ text-align:left !important; display:block; }
.center_box .content center > input[type=submit],
.center_box .content center > a.inputbtn{ margin-top:4px; }
/* naglowki sekcji: zlota kreska pod spodem, staly odstep */
.center_box .content h2, .center_box .content h3{
  margin:26px 0 12px !important; padding-bottom:9px !important;
  border-bottom:1px solid rgba(194,160,74,.2) !important;
  color:#e8e0cd !important; font-size:16.5px !important;
}
.center_box .content h2:first-child, .center_box .content h3:first-child{ margin-top:2px !important; }
/* kolumny: opis do lewej, liczby do prawej */
.center_box .content table td:first-child{ text-align:left; }
.center_box .content table td.num, .center_box .content table td[align=right]{
  text-align:right !important; font-variant-numeric:tabular-nums;
}
/* etykiety formularzy w jednej linii bazowej */
.center_box .content label, .center_box .content input, .center_box .content select{
  vertical-align:middle;
}
.center_box .content input[type=radio] + label,
.center_box .content input[type=checkbox] + label{ margin-left:2px; }

/* menu boczne: staly rytm i subtelna linia miedzy pozycjami */
.left_box ul li + li a, .right_box ul li + li a{
  border-top:1px solid rgba(255,255,255,.045) !important; border-radius:0 !important;
}
.left_box ul li:first-child a, .right_box ul li:first-child a{ border-radius:6px 6px 0 0 !important; }
.left_box ul li:last-child a, .right_box ul li:last-child a{ border-radius:0 0 6px 6px !important; }
.left_box ul li a:hover, .right_box ul li a:hover{
  box-shadow:inset 3px 0 0 rgba(194,160,74,.5) !important;
}

/* ---- 17. jedna os tekstu: wszystko do lewej, wyjatkiem sa paski tytulow paneli ---- */
.center_box .content h1, .center_box .content h2, .center_box .content h3,
.center_box .content h4, .center_box .content p, .center_box .content div,
.center_box .content td, .center_box .content li{
  text-align:left;
}
.center_box .content [align=center], .center_box .content [style*="text-align: center"],
.center_box .content [style*="text-align:center"]{ text-align:left !important; }
/* kolumny liczbowe i wskazniki zostaja po prawej / na srodku tam gdzie maja sens */
.center_box .content td[align=right]{ text-align:right !important; }
.center_box .content .Odd td:last-child, .center_box .content .Even td:last-child{ text-align:left; }
/* nota/ostrzezenie ma odstep od naglowka */
.center_box .content .warning + h2, .center_box .content .warning + h3{ margin-top:18px !important; }

/* ---- 18. pasek statusu POD banerem (byl przypiety do gory ekranu) ---- */
.top-bar{
  position:static !important; top:auto !important; left:auto !important;
  width:1170px !important; margin:10px auto 0 !important;
  height:auto !important; line-height:1.5 !important;
  padding:10px 16px !important; text-align:center !important;
  background:var(--panel) !important; border:1px solid var(--line) !important;
  border-radius:10px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px -6px rgba(0,0,0,.7) !important;
  font-size:14px !important; text-shadow:none !important; color:var(--ink) !important;
}
.top-bar a{ color:var(--gold) !important; font-weight:600; text-decoration:none; }
.top-bar a:hover{ color:#d9b95e !important; }
@media (max-width:1200px){ .top-bar{ width:100% !important; } }

/* ---- 19. pasek "Darknestia is ONLINE..." schowany na zyczenie (17.08).
   Zostawiony w kodzie — zeby przywrocic, wystarczy usunac te regule. ---- */
.top-bar{ display:none !important; }

/* przycisk zalozenia konta szerszy, bo napis dluzszy */
.createbtn{ white-space:nowrap; }

/* ---- 20. podswietlenie TYLKO na elementach klikalnych.
   Wiersz tabeli nie jest przyciskiem — hover na nim mylil. ---- */
.center_box .content table tr:hover td,
.center_box .content table tr:hover > td:first-child,
.center_box .content .myaac-table > tbody > tr:hover,
.center_box .content .myaac-table > tbody > tr:hover > td,
.center_box .content .myaac-table > tbody > tr:hover > td:first-child,
table.dataTable tbody tr:hover > td,
table.dataTable tbody tr:hover > td:first-child,
.TableContainer tr:hover > td{
  background:inherit !important;
  box-shadow:none !important;
}
/* zebra ma zostac widoczna mimo powyzszego */
.center_box .content .myaac-table > tbody > tr:nth-child(even):hover > td,
.center_box .content table tr:nth-child(even):hover td,
table.dataTable > tbody > tr:nth-child(even):hover > td{
  background:rgba(255,255,255,.02) !important;
}
.center_box .content .myaac-table > tbody > tr:nth-child(odd):hover > td,
.center_box .content table tr:nth-child(odd):hover td,
table.dataTable > tbody > tr:nth-child(odd):hover > td{
  background:transparent !important;
}

/* ---- 21. UKLAD: szersza kolumna srodkowa, koniec poziomych pasków.
   Motyw stal na floatach ze sztywnym srodkiem 608 px — stad przewijanie
   w bok przy tabelach. Przechodzimy na flex: boki staly, srodek reszta. ---- */
.dn-banner{ width:min(1560px, 96vw) !important; }
.container_main{
  width:min(1560px, 96vw) !important; margin:10px auto 0 !important;
  display:flex !important; align-items:flex-start; gap:16px;
}
.container_left, .container_right{
  width:236px !important; flex:0 0 236px; float:none !important; margin:0 !important;
}
.container_mid{
  flex:1 1 auto; width:auto !important; min-width:0; float:none !important; margin:0 !important;
}
/* wnetrza przestaja narzucac sztywna szerokosc */
.center_box, .center_box .content_bg, .center_box .content_bg .content{
  width:auto !important; margin-left:0 !important; margin-right:0 !important;
}
.left_box .content, .right_box .content{ width:auto !important; }
/* strona nigdy nie przewija sie w poziomie */
html, body{ overflow-x:hidden; }

@media (max-width:1100px){
  .container_main{ flex-direction:column; }
  .container_left, .container_right{ width:100% !important; flex:1 1 auto; }
}

/* ---- 21b. stopka jest CZWARTYM dzieckiem .container_main — bez tego
   wskakiwala obok kolumn jako kolejna kolumna ---- */
.container_main{ flex-wrap:wrap !important; }
.footer_cnt{
  flex:1 0 100% !important; width:100% !important; order:99;
  margin-top:14px; text-align:center;
}
.container_mid{ flex:1 1 0 !important; min-width:0 !important; }

/* ---- 21c. KOREKTA: 96vw bylo stanowczo za duzo. Wracamy do proporcji
   bliskich oryginalowi (1170) — tylko tyle szerzej, zeby tabele sie miescily.
   Baner zostaje w tej samej szerokosci co tresc. ---- */
.dn-banner, .container_main{ width:1280px !important; max-width:96vw !important; }
.container_left, .container_right{ width:230px !important; flex:0 0 230px !important; }

/* ---- 21d. baner (logo + tlo zamku) wraca do pierwotnej szerokosci 1170;
   kolumny zostaja szersze, bo to one potrzebowaly miejsca na tabele ---- */
.dn-banner{ width:1170px !important; max-width:96vw !important; }