/* ======================================================================
   NAPISTO.SK – MODERN.CSS (ONE FILE, COMPLETE)
   ----------------------------------------------------------------------
   Tento súbor je navrhnutý ako JEDINÝ CSS:
   - nahrádza veľkú časť starého style.css (aby nič "nezmizlo")
   - zároveň modernizuje UI (karty, typografia, spacing, responzivita)
   - kompatibilita so šablónami: a0000..a0105 + np- layout
   - NErozbíja top navigáciu (nav + hamburger), len ju uprace

   Ak máš problém s cache:
   - daj v main.html ?v=... (napr. modern.css?v=2026-03-06)
====================================================================== */

/* ----------------------------------------------------------------------
   0) THEME TOKENS
------------------------------------------------------------------------ */
:root{
  --bg:#f4f2f8;
  --bg2:#efeafc;
  --bg3:#fbf9ff;

  --card:#ffffff;
  --card2:#fcfbff;

  --text:#1f1f24;
  --muted:#6b6b78;

  --line:rgba(20,20,30,.10);
  --line2:rgba(111,71,197,.22);

  --brand:#6f47c5;
  --brand2:#7b57d6;
  --brand3:#8b73ff;

  --ok:#2aa66a;
  --danger:#e24b4b;
  --warn:#e5a000;

  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;

  --shadow:0 10px 30px rgba(20,10,40,.08);
  --shadow2:0 16px 46px rgba(20,10,40,.14);
  --shadow3:0 22px 70px rgba(20,10,40,.18);

  --font:"Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Layout – aby stred nebol úzky */
  --container: min(1560px, calc(100vw - 24px));
  --leftCol: clamp(250px, 18vw, 340px);
  --rightCol: clamp(280px, 22vw, 380px);
  --gap:14px;

  /* stredný panel – max šírka textu vnútri */
  --feedMax: 1060px;

  /* typografia */
  --fs:15px;
  --lh:1.55;
}

/* ----------------------------------------------------------------------
   1) RESET + BASE
------------------------------------------------------------------------ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs);
  line-height:var(--lh);
  color:var(--text);

  background:
    radial-gradient(1200px 650px at 12% 0%, var(--bg2), transparent 60%),
    radial-gradient(1000px 620px at 92% 8%, #f6f1ff, transparent 55%),
    var(--bg);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

::selection{ background: rgba(111,71,197,.16); }

button,input,select,textarea{ font-family:var(--font); }
input,select,textarea{ color:var(--text); }

/* focus – aby bolo prístupné */
:focus{ outline:none; }
:focus-visible{
  box-shadow: 0 0 0 5px rgba(111,71,197,.14);
  border-radius: 12px;
}

/* prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ----------------------------------------------------------------------
   2) HELPERS (desktop/mobile)
------------------------------------------------------------------------ */
.desktop-only{ display:block; }
.mobile-only{ display:none; }

@media (max-width: 900px){
  .desktop-only{ display:none !important; }
  .mobile-only{ display:block !important; }
}

/* ----------------------------------------------------------------------
   3) COOKIE BAR
------------------------------------------------------------------------ */
#cookieNotification{
  display:none;
  position:fixed;
  top:0; left:0; right:0;
  z-index:9999;
  padding:10px 12px;
  background:#f0eef5;
  border-bottom:1px solid var(--line);
  text-align:center;
}

/* ----------------------------------------------------------------------
   4) BUTTONS (unified)
------------------------------------------------------------------------ */
.button,
a.button,
input.button,
button.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(111,71,197,.28);
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  font-weight:900;
  cursor:pointer;

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.button:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  filter: saturate(1.02);
}
.button:active{ transform: translateY(0px); }

.button.is-light{
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
}

/* staré inline buttony s padding:5px – nech nie sú škaredé */
input[type="submit"].button{ min-height:42px; }

/* ----------------------------------------------------------------------
   5) FORMS (unified)
------------------------------------------------------------------------ */
.pass,
.pass.reg,
.pass.kom,
.area{
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:11px 12px;
  font-size:14px;
  outline:none;
}

.pass{
  width: min(760px, 100%);
  height:auto;
}

.pass::placeholder{ color:#9aa0ad; }

.pass:focus,
.pass.reg:focus,
.pass.kom:focus,
.area:focus,
select:focus,
textarea:focus{
  border-color: rgba(111,71,197,.45);
  box-shadow: 0 0 0 5px rgba(111,71,197,.12);
}

.pass.reg{ width:100% !important; margin-bottom:10px; }
.pass.kom{ width:min(560px, 100%) !important; }

.area{
  width:100%;
  min-height:120px;
  resize:vertical;
}
.area.ank{ min-height:70px; }

select{
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:11px 12px;
  font-size:14px;
}

/* ----------------------------------------------------------------------
   6) TOP NAV (zachovať logiku, len jemný polish)
------------------------------------------------------------------------ */
.legacy-top-nav{
  background:#fff;
  height:50px;
  display:flex;
  justify-content:center;
  align-items:end;
  border-bottom:1px solid rgba(111,71,197,.25);
  box-shadow:0 10px 25px rgba(20,10,40,.08);
}

.a0002{
  width:min(1200px, calc(100vw - 24px));
  margin:0 auto;
  position:relative;
  top:5px;
}

.a0003{ float:left; margin-bottom:5px; }
.a0003 img{ width:150px; }

.a0004{ float:right; }

.a0005{
  margin-right:15px;
  color:#606060;
  margin-top:7px;
  display:inline-block;
}
.a0005 a{
  color:#606060;
  text-decoration:none;
  font-weight:700;
}
.a0005 a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* hamburger */
.hamburger, .close-icon{
  display:none;
  cursor:pointer;
  float:right;
  margin-right:35px;
  margin-top:3px;
}
.bar{
  width:25px;
  height:3px;
  background-color:#333;
  margin:6px 0;
  transition:.4s;
  border-radius:8px;
}
.hamburger.active .bar:nth-child(1){ transform: rotate(-45deg) translate(-5px, 6px); }
.hamburger.active .bar:nth-child(2){ opacity:0; }
.hamburger.active .bar:nth-child(3){ transform: rotate(45deg) translate(-6px, -8px); }
.hamburger.active + .close-icon{ display:block; }

/* mobile nav */
@media (max-width: 593px){
  .legacy-top-nav{ height:50px; padding-bottom:5px; }
  .a0002{
    display:block;
    position:relative;
    top:10px;
  }
  .a0003{ margin-left:35px; }
  .a0004{
    display:none;
    position:absolute;
    top:43px;
    left:0;
    width:100%;
    background:#343435;
    z-index:999;
    padding:10px 0;
    border-bottom-left-radius:14px;
    border-bottom-right-radius:14px;
  }
  .a0005{ display:flex; }
  .a0005 a{ color:#d1d1d1; padding:15px; }
  .hamburger, .close-icon{ display:block; }
}

/* ----------------------------------------------------------------------
   7) MODERN LAYOUT (np-)
------------------------------------------------------------------------ */
.np-shell{
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 12px 64px;
}

.np-grid{
  display:grid;
  grid-template-columns: var(--leftCol) minmax(0,1fr) var(--rightCol);
  gap: var(--gap);
  align-items:start;
}

.np-left, .np-right, .np-feed{ min-width:0; }

.np-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.np-panel-h{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-weight:900;
  font-size:16px;
}

.np-panel-b{ padding:14px; }
.np-safe{ padding:10px; }

.np-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border:1px solid var(--line);
  background:#fff;
  color:var(--text);

  padding:10px 14px;
  border-radius:999px;

  cursor:pointer;
  text-decoration:none;
  font-weight:900;
  font-size:14px;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.np-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(20,10,40,.10);
}
.np-btn--brand{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  border-color:transparent;
}

.np-left .np-btn{
  width:100%;
  margin-bottom:10px;
}

@media (min-width: 1100px){
  .np-left .np-panel,
  .np-right .np-panel{
    position: sticky;
    top: 68px;
  }
}

@media (max-width: 1250px){
  .np-grid{ grid-template-columns: var(--leftCol) minmax(0,1fr); }
  .np-right{ display:none; }
}

@media (max-width: 900px){
  :root{ --fs:16px; --feedMax:100%; }
  .np-grid{ grid-template-columns: 1fr; }
  .np-left, .np-right{ display:none; }
  .np-shell{ padding: 10px 10px 58px; }
}

/* ----------------------------------------------------------------------
   8) FEED BASE (stred – odstráň staré width/float/margins)
------------------------------------------------------------------------ */
.np-feed{ min-width:0; }
.np-feed, .np-feed *{ text-align:left; }

.np-feed .np-panel-b{
  width:100%;
  max-width: var(--feedMax);
  margin: 0 auto;
}

/* zruš inline margin-left:60 z reklám */
.np-feed .desktop-only[style*="margin-left"],
.np-feed .desktop-only[style*="margin-top"],
.np-feed .mobile-only[style*="margin-top"]{
  margin-left:0 !important;
  margin-top:14px !important;
  text-align:center !important;
}

/* odstráň prázdny “  height:40px” */
.np-feed [style*="height: 40px"]{ height: 14px !important; }

/* typografia v strede */
.np-feed h1{ font-size:26px; margin: 0 0 10px 0; font-weight:900; }
.np-feed h2{ font-size:22px; margin: 0 0 10px 0; font-weight:900; }
.np-feed h3{ font-size:18px; margin: 0 0 8px 0; font-weight:900; }
.np-feed p{ margin: 0; color: var(--muted); line-height:1.7; }

/* ----------------------------------------------------------------------
   9) HOME “témy” (a0021)
------------------------------------------------------------------------ */
.a0021{
  display:inline-block;
  margin: 8px 8px 0 0;
}
.a0021 a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(111,71,197,.18);
  background: rgba(111,71,197,.10);
  color: var(--text);
  font-weight:900;
  transition: transform .12s ease, background .12s ease;
}
.a0021 a:hover{
  transform: translateY(-1px);
  background: rgba(111,71,197,.16);
}

/* ----------------------------------------------------------------------
   10) BLOG HERO (top-front / theme-box / animated-text)
------------------------------------------------------------------------ */
.top-front{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
@media (min-width: 980px){
  .top-front{
    grid-template-columns: 1fr 320px;
    align-items:start;
  }
}

.a0009b{
  margin: 10px 0 6px 0 !important;
  font-size: 26px;
  color:#2b2d31;
  font-weight:900;
  text-align:left;
}

.theme-box{
  width:100% !important;
  height:240px !important;
  border-radius: var(--radius-lg);
  overflow:hidden;
  position:relative;
  margin:0 !important;
  box-shadow: var(--shadow);
}
.theme-box img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* text do stredu */
.animated-text{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform: translate(-50%,-50%) !important;
  width:min(92%, 720px) !important;
  color:#fff !important;
  font-weight:900 !important;
  text-align:center !important;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.line{
  text-transform: uppercase;
  letter-spacing:.6px;
  line-height: 1.35;
}

/* animácia – nech nie je agresívna */
@keyframes nap_anim{
  0%{ transform: translateY(0); }
  25%{ transform: translateY(-22px); }
  50%{ transform: translateY(-44px); }
  75%{ transform: translateY(-22px); }
  100%{ transform: translateY(0); }
}
.line:first-child{
  animation: nap_anim 14s infinite;
}

/* mobile hero */
@media (max-width: 900px){
  .theme-box{ height:160px !important; border-radius:22px; }
  .animated-text{ width:92% !important; font-size: 13px; }
}

/* ----------------------------------------------------------------------
   11) DARK TOOLBAR (a0011) – tabs + search
------------------------------------------------------------------------ */
.a0011{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  background:#303032;
  width:100% !important;
  height:auto !important;
  padding:16px;
  margin:14px 0 !important;

  border-radius:22px;
  box-shadow: var(--shadow);
}

.post-ctg{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin-top: 10px;
}

.a0012b{
  cursor:pointer;
  color:#e5e6ea;
  font-weight:900;
}
.a0012b:hover{ text-decoration:underline; text-underline-offset:3px; }

/* search v toolbar – modern biely input */
.a0011 .pass{
  width:min(560px, 100%) !important;
  border-radius:999px !important;
  padding:12px 14px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.12) !important;
  color:#fff !important;
  text-align:center;
  box-shadow:none !important;
}
.a0011 .pass::placeholder{ color: rgba(255,255,255,.65); }

/* ----------------------------------------------------------------------
   12) STATUS / POST CARD (a0011c)
------------------------------------------------------------------------ */
.a0011b{ margin-top:0 !important; } /* zruš staré margin-top:100 */

.a0011c{
  width:100% !important;
  margin: 0 0 14px 0 !important;
  padding:14px !important;
  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}

.a0011d{
  font-weight:900;
  margin-bottom:8px;
  font-size:18px;
  color: var(--brand);
}
.a0011e{ color: var(--text); }
.a0011f{
  margin-top:10px;
  color:#717886;
  font-weight:800;
  cursor:pointer;
}
.a0011f:hover{ text-decoration:underline; text-underline-offset:3px; }

/* obrázky v statusoch */
.a0011e img{
  max-width: 520px;
  width:100%;
  border-radius: 16px;
  margin-top:10px;
  object-fit:cover;
}

/* ----------------------------------------------------------------------
   13) COMMENTS (a0023 + avatar)
------------------------------------------------------------------------ */
.a0023{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  background: #f0eef6;
  border-radius: 16px;
}

.a0024{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin: 10px 0;
}

.a0026{
  width:46px;
  height:46px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
}
.a0026 img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.a0027{
  min-height:46px;
  display:flex;
  align-items:center;
  font-size:15px;
}

.a0028{
  margin-left: 58px;
  font-size: 13px;
  color: var(--muted);
  cursor:pointer;
}
.a0028 b:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ----------------------------------------------------------------------
   14) GENERIC LISTS -> CARDS
   (veľa tvojich šablón vkladá itemy ako priame deti v #a0011b/#a0022b...)
------------------------------------------------------------------------ */
#a0011b, #a0022b, #a0022b2, #a0050, #a0050b{
  width:100% !important;
  max-width:100% !important;
}

#a0011b > *,
#a0022b > *,
#a0022b2 > *,
#a0050 > *,
#a0050b > *{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
  margin: 0 0 14px 0;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
}
#a0011b > *:hover,
#a0022b > *:hover,
#a0022b2 > *:hover,
#a0050 > *:hover,
#a0050b > *:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
}

/* ----------------------------------------------------------------------
   15) FORUM/BLOG WRAPPERS (a0041/a0043/a0044) – fix float/šírky
------------------------------------------------------------------------ */
.a0041{
  width:100%;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap:14px;
  align-items:start;
}

/* staré ad stĺpce (a0042) schovaj – už máš modern layout */
.a0042{ display:none !important; }

/* main */
.a0043{
  float:none !important;
  width:100% !important;
  margin:0 !important;
  text-align:left !important;
}

/* sidebar */
.a0044{
  float:none !important;
  width:100% !important;
  margin:0 !important;

  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  color: var(--text);
}

/* na tablete/mobil: sidebar pod obsah */
@media (max-width: 1100px){
  .a0041{ grid-template-columns: 1fr; }
  .a0044{ margin-top:14px !important; }
}

/* ----------------------------------------------------------------------
   16) FORUM/BLOG LIST ITEMS (kritické!)
   Tvoje item šablóny často vracajú <a> alebo divy bez tried.
   Preto robíme “bezpečný” card štýl na priame deti .a0043.
------------------------------------------------------------------------ */
.a0043 > a,
.a0043 > div{
  display:block;
  width:100%;
}

/* priame linky v .a0043 ako cards (ale NIE všetky vnorené linky) */
.a0043 > a{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
  margin: 0 0 14px 0;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  color: var(--text);
}
.a0043 > a:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
}

/* ak je item v .a0050 alebo .a0050b ako link */
.a0050 a,
.a0050b a{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
  margin: 0 0 14px 0;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.a0050 a:hover,
.a0050b a:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
}

/* typografia link itemov (keď je title/preview len text) */
.a0043 a{ text-decoration:none; }
.a0043 a u{ text-decoration:none; } /* lebo niekde máš <u> */
.a0043 a:hover{ text-decoration:none; }

/* ----------------------------------------------------------------------
   17) FORUM ITEM (a0051*) – keď šablóna používa tieto triedy
------------------------------------------------------------------------ */
.a0051{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
  margin: 0 0 14px 0;
  box-shadow: var(--shadow);
  color:var(--text);
  text-align:left;
}

.a0052{
  font-weight:900;
  font-size:18px;
  margin: 0 0 8px 0;
  color:#2b2d31;
}

.a0053{
  color: var(--muted);
  font-size:15px;
  line-height:1.65;
  margin-bottom:12px;
}

.a0054, .a0054b{
  color:#717886;
  font-weight:800;
  font-size:13px;
}

/* ----------------------------------------------------------------------
   18) AUTHOR STRIP (a0060) – zmenši avatar + modern layout
------------------------------------------------------------------------ */
.a0060{
  display:flex !important;
  gap:12px;
  align-items:center;
  float:none !important;
  width:100% !important;
  border-bottom:1px solid rgba(20,20,30,.08);
  padding:12px 0;
  margin: 10px 0 12px 0;
}

.a0061{
  width:46px;
  height:46px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
}
.a0061 img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.a0062 b a{
  font-weight:900;
  color:#2b2d31;
}
.a0062 b a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.a0063b{
  margin-left:auto;
  color: var(--muted);
  font-weight:800;
  font-size:13px;
}

/* ----------------------------------------------------------------------
   19) SIDEBAR LISTS (a0067, a0068, a0091)
------------------------------------------------------------------------ */
.a0066{
  font-weight:900;
  font-size:16px;
  margin: 8px 0 10px 0;
  color:#2b2d31;
}

.a0067{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.a0067 a,
.a0068,
.a0091{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(111,71,197,.18);
  background: rgba(111,71,197,.10);
  font-weight:900;
  color: var(--text);
}

.a0067 a:hover,
.a0068:hover,
.a0091:hover{
  background: rgba(111,71,197,.16);
}

/* ----------------------------------------------------------------------
   20) PAGINATION
------------------------------------------------------------------------ */
#pagination{
  margin-top: 12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#pagination a{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  color:var(--text);
}
#pagination a.active{
  background: rgba(111,71,197,.14);
  border-color: rgba(111,71,197,.28);
}

/* ----------------------------------------------------------------------
   21) USERS – oprava veľkých profiloviek (container/card)
------------------------------------------------------------------------ */
.container, .slide-container, .card-wrapper{
  width:100%;
  max-width:100%;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  margin: 0 0 14px 0;

  display:flex;
  gap:14px;
  align-items:center;
}

.card .image-box{
  width:72px;
  height:72px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
}
.card .image-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card .profile-details{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.card .profile-details img{
  width:40px;
  height:40px;
  border-radius:50%;
}

/* fallback: ak users_item je len img bez .card */
.a0070b img{
  max-width:90px !important;
  height:auto !important;
}

/* ----------------------------------------------------------------------
   22) PROFILE (a0081)
------------------------------------------------------------------------ */
.a0081{
  width:160px;
  height:160px;
  border-radius:50%;
  overflow:hidden;
  margin: 0 auto 12px auto;
}
.a0081 img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ----------------------------------------------------------------------
   23) LOGIN / REGISTRATION FORM (a0031)
------------------------------------------------------------------------ */
.a0031{
  width:min(520px, 100%) !important;
  height:auto !important;
  margin: 18px auto !important;

  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow2) !important;

  padding: 18px 16px !important;
}

.a0032{
  font-weight:900;
  font-size:18px;
  margin-bottom: 12px;
  color:#2b2d31;
  text-align:center;
}

.a0033c{
  margin-top: 10px !important;
  display:block !important;
}

.a0031 table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}

.a0031 td.error{
  color: var(--danger);
  font-weight:900;
  font-size:13px;
}

.a0031 input[type="submit"].button{
  width:100% !important;
  padding:12px 14px !important;
  font-size:15px !important;
}

/* ----------------------------------------------------------------------
   24) “POPUP OVERLAY” (a0033*) -> INLINE PANEL
   (aby ti nič nevyskakovalo cez stránku)
------------------------------------------------------------------------ */
.a0033{
  position: static !important;
  top:auto !important; left:auto !important;
  width:auto !important; height:auto !important;
  background: transparent !important;
}

/* tieto sa zobrazuju JS-om podľa modulov – zostáva logika */
.a0033b{ display:none; }
.a0033d{ display:none; }
.a0033d2{ display:none; }

.a0036{
  width:min(860px, 100%) !important;
  height:auto !important;

  margin: 14px auto !important;
  padding: 14px !important;

  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow3) !important;

  position:relative !important;
}

/* close X */
.a0035{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  margin:0 !important;
  cursor:pointer;
}
.a0035 img{ width:18px !important; }

/* ----------------------------------------------------------------------
   25) ADS
------------------------------------------------------------------------ */
.adsbygoogle{
  border-radius:14px;
  overflow:hidden;
}

/* ----------------------------------------------------------------------
   26) MOBILE FIXES
------------------------------------------------------------------------ */
@media (max-width: 900px){
  /* skry amp-ad (často robí prázdny pás) */
  amp-ad{ display:none !important; }

  .a0031{ width:100% !important; margin: 14px auto !important; }
  .a0036{ width:100% !important; }

  .a0060{ flex-wrap:wrap; }
  .a0063b{ width:100%; margin-left:0; }

  .a0011e img{ max-width:100%; }

  /* forum/blog wrapper stack */
  .a0041{ grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   27) SMALL MOBILE (extra)
------------------------------------------------------------------------ */
@media (max-width: 520px){
  body{ font-size:16px; }
  .np-panel-h{ font-size:16px; }
  .np-panel-b{ padding:12px; }
  .a0011{ padding:14px; border-radius:18px; }
  .a0011 .pass{ padding:12px 12px !important; }
  .button{ width:100%; }
}

/* ======================================================================
   END OF FILE
====================================================================== */