/* darhmedia.hu (Tivadar, 2026-11-03): sötét, egyszerű, a Play betűvel */
@font-face { font-family: Play; src: url(fonts/Play-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Play; src: url(fonts/Play-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
:root {
  --bg: #12161d; --bg2: #1a1f27; --panel: #1e232b; --line: #2c333d;
  --txt: #e7ecf3; --dim: #93a0b0; --gold: #ebcf9c; --bronze: #a37c4a; --acc: #f2c14e;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--txt); font: 16px/1.6 Play, system-ui, sans-serif;
  background-image: radial-gradient(900px 500px at 50% -120px, rgba(163,124,74,.18), transparent 70%);
}
a { color: var(--gold); }
main, .top, .foot { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

.top { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); text-decoration: none; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.brand img { display: block; }
.top nav { display: flex; gap: 18px; margin-left: auto; }
.top nav a, .lang { color: var(--dim); text-decoration: none; font-size: 15px; }
.top nav a:hover, .lang:hover { color: var(--txt); }
.lang { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }

.hero { text-align: center; padding: 64px 0 40px; }
.hero .logo { width: 200px; height: 200px; display: block; margin: 0 auto 6px; filter: drop-shadow(0 18px 36px rgba(0,0,0,.55)); }
.hero h1 {
  margin: 0; font-size: clamp(40px, 8vw, 72px); letter-spacing: .14em; padding-left: .14em; text-transform: uppercase;
  background: linear-gradient(#ebcf9c, #a37c4a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin: 10px 0 0; color: var(--dim); font-size: 19px; }

section { padding: 28px 0; }
h2 { color: var(--gold); font-size: 22px; letter-spacing: .06em; margin: 0 0 14px; }
h2::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 6px; background: var(--bronze); }
h3 { margin: 0 0 6px; font-size: 21px; }
.sub { color: var(--dim); margin: -6px 0 16px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.card p { margin: 0 0 12px; color: #cfd6e0; }
.app { display: flex; gap: 22px; align-items: flex-start; }
.app-icon { flex: none; border-radius: 26px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.meta { color: var(--dim) !important; font-size: 14px; }
.soon { color: var(--acc); }
.label { color: var(--dim) !important; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 8px !important; }

.csv { display: grid; grid-template-columns: 1fr minmax(0, 380px); gap: 24px; align-items: start; }
.shot { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; text-decoration: none;
  color: var(--txt); background: var(--bg2); border: 1px solid var(--line);
}
.btn:hover { border-color: var(--gold); }
.btn span { display: flex; flex-direction: column; line-height: 1.2; }
.btn b { font-size: 15px; }
.btn small { color: var(--dim); font-size: 12px; }
.btn.ghost { background: transparent; }
.link { color: var(--dim); font-size: 14px; }
.ic { width: 20px; height: 20px; flex: none; }
.ic.sm { width: 14px; height: 14px; opacity: .6; }

.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.site {
  display: flex; flex-direction: column; text-decoration: none; color: var(--txt); background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .15s, border-color .15s;
}
.site:hover { transform: translateY(-2px); border-color: var(--gold); }
.site-img { display: block; aspect-ratio: 16 / 10; background: var(--bg2); overflow: hidden; }
/* füstös üveg (2026-11-03): sötétített, kissé elmosott kép, rajta üvegfény;
   rámutatva kitisztul */
.site-img { position: relative; }
.site-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  filter: grayscale(.45) brightness(.62) contrast(1.05) blur(.8px); transform: scale(1.02);
  transition: filter .35s, transform .35s;
}
.site-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .35s;
  background:
    linear-gradient(125deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 28%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(18,22,29,.10) 0%, rgba(18,22,29,.55) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(163,124,74,.10), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -30px 40px rgba(0,0,0,.25);
}
.site:hover .site-img img, .site:focus-visible .site-img img { filter: none; transform: scale(1); }
.site:hover .site-img::after, .site:focus-visible .site-img::after { opacity: .25; }
.ph {
  display: grid; place-items: center; width: 100%; height: 100%; font-size: 54px; font-weight: 700; color: rgba(235,207,156,.5);
  background: linear-gradient(135deg, #232a35, #171c23);
}
.site-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; font-size: 15px; }

.foot { text-align: center; padding-top: 32px; padding-bottom: 40px; margin-top: 24px; border-top: 1px solid var(--line); }
.foot h2::after { margin-left: auto; margin-right: auto; }
.social { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 4px 0 18px; }
.social a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; text-decoration: none;
  color: var(--txt); background: var(--bg2); border: 1px solid var(--line);
}
.social a:hover { border-color: var(--gold); color: var(--gold); }
.foot p { color: var(--dim); font-size: 14px; margin: 0; }

/* mobilon hamburger-menü (2026-11-04) */
.burger { display: none; }
@media (max-width: 860px) {
  .top { flex-wrap: wrap; height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; gap: 8px 12px; }
  .lang { margin-left: auto; }
  .burger {
    order: 3; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 38px;
    padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer;
  }
  .burger span { display: block; height: 2px; border-radius: 1px; background: var(--txt); transition: transform .2s, opacity .2s; }
  .top.open .burger { border-color: var(--bronze); }
  .top.open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .top.open .burger span:nth-child(2) { opacity: 0; }
  .top.open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .top nav { order: 4; display: none; width: 100%; margin: 0; flex-direction: column; gap: 2px; padding: 4px 0 8px; border-top: 1px solid var(--line); }
  .top.open nav { display: flex; }
  .top nav a { padding: 11px 6px; font-size: 16px; }
}
@media (max-width: 640px) {
  main, .top, .foot { padding: 0 16px; }
  .top { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 8px; gap: 8px 14px; }
  .hero { padding: 36px 0 24px; }
  .app { flex-direction: column; }
  .csv { grid-template-columns: 1fr; }
  .app-icon { width: 88px; height: 88px; border-radius: 20px; }
  .hero .logo { width: 150px; height: 150px; }
  .brand img { width: 28px; height: 28px; }
  .sites { grid-template-columns: 1fr 1fr; gap: 10px; }
  .site-name { font-size: 12.5px; padding: 8px 10px; word-break: break-all; }
  .foot { padding-top: 24px; padding-bottom: 32px; }
}

/* ---------------------------------------------------------- blog (2026-11-04) */
.blog { padding-top: 36px; max-width: 760px; margin: 0 auto; }
.blog h1 { color: var(--gold); font-size: clamp(30px, 5vw, 40px); margin: 0 0 6px; letter-spacing: .04em; }
.blog .sub { margin-top: 0; }
.posts { display: grid; gap: 16px; margin-top: 22px; }
.post-item { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.post-item h2 { margin: 2px 0 8px; font-size: 22px; letter-spacing: 0; }
.post-item h2::after { display: none; }
.post-item h2 a { color: var(--txt); text-decoration: none; }
.post-item h2 a:hover { color: var(--gold); }
.post-item .intro { color: #cfd6e0; }
.post-item .intro p { margin: 0 0 8px; }
.post-item .intro img { display: none; }
.more { font-size: 15px; text-decoration: none; }
.meta { color: var(--dim); font-size: 14px; margin: 0; }
.tag { display: inline-block; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 8px; flex-wrap: wrap; }
.pager a, .pager b { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; color: var(--txt); }
.pager a:hover { border-color: var(--gold); color: var(--gold); }
.pager b { border-color: var(--gold); color: var(--gold); }
.pager .nums { display: flex; gap: 6px; flex-wrap: wrap; }
.post h1 { line-height: 1.2; margin-bottom: 8px; }
.crumb { margin: 0 0 14px; font-size: 15px; }
.crumb a { text-decoration: none; color: var(--dim); }
.crumb a:hover { color: var(--gold); }
.crumb.end { margin-top: 30px; }
.lead { font-size: 19px; color: var(--txt); border-left: 3px solid var(--bronze); padding: 2px 0 2px 16px; margin: 18px 0 22px; }
.lead p { margin: 0 0 8px; }
.content { color: #cfd6e0; font-size: 17px; line-height: 1.75; }
.content h2 { font-size: 24px; margin: 30px 0 10px; letter-spacing: 0; }
.content h2::after { display: none; }
.content h3 { font-size: 19px; margin: 24px 0 8px; color: var(--gold); }
.content img, .lead img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; margin: 18px auto; }
.content blockquote { margin: 18px 0; padding: 8px 18px; border-left: 3px solid var(--gold); background: var(--bg2); border-radius: 0 10px 10px 0; color: var(--txt); }
.content ul, .content ol { padding-left: 24px; }
#blog-latest .posts.mini { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.post-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--txt); }
.post-card:hover { border-color: var(--gold); }
.post-card time { color: var(--dim); font-size: 13px; }
.post-card span { color: #cfd6e0; font-size: 14px; }
#blog-latest .all { margin: 12px 0 0; }
#blog-latest .all a { text-decoration: none; }

/* ---------------------------------------------------------- admin (2026-11-04) */
.adm-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.adm-top small { color: var(--dim); font-weight: 400; letter-spacing: .08em; }
.adm-nav { display: flex; gap: 14px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.adm-nav a { color: var(--dim); text-decoration: none; font-size: 15px; }
.adm-nav a:hover { color: var(--gold); }
.adm-nav form { margin: 0; }
.adm-nav button, .btn.danger { font: inherit; font-size: 14px; color: var(--txt); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.adm-main { max-width: 1100px; margin: 0 auto; padding: 24px; }
.adm-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.adm-card.narrow { max-width: 440px; margin: 40px auto; }
.adm-card h1 { color: var(--gold); font-size: 26px; margin: 0 0 14px; }
.adm-card label { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; color: var(--dim); font-size: 14px; }
.adm input, .adm select { font: inherit; color: var(--txt); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.adm input:focus, .adm select:focus, .ed-area:focus { outline: 2px solid var(--bronze); outline-offset: 0; }
.btn.primary { background: var(--bronze); border-color: var(--bronze); color: #fff; font: inherit; cursor: pointer; }
.btn.primary:hover { background: #b88d55; }
.btn.danger { border-color: #7a3030; color: #ff9b8a; }
.adm-err { color: #ff9b8a; background: rgba(255,90,70,.08); border: 1px solid rgba(255,90,70,.3); padding: 8px 12px; border-radius: 10px; }
.adm-ok { color: #9be39b; background: rgba(90,200,90,.08); border: 1px solid rgba(90,200,90,.3); padding: 8px 12px; border-radius: 10px; }
.mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: .1em; color: var(--gold); text-align: center; }
.qr { width: 220px; margin: 8px auto; background: #fff; border-radius: 12px; overflow: hidden; }
.qr svg { display: block; width: 100%; height: auto; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row.between { justify-content: space-between; align-items: center; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.row .grow { flex: 1 1 260px; }
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th, .adm-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.adm-table th { color: var(--dim); font-weight: 400; font-size: 14px; }
.adm-table a { color: var(--txt); text-decoration: none; }
.adm-table a:hover { color: var(--gold); }
.nowrap { white-space: nowrap; color: var(--dim); }
.st { font-size: 13px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); }
.st.pub { color: #9be39b; border-color: rgba(90,200,90,.4); }
.st.plan { color: var(--acc); border-color: rgba(242,193,78,.4); }
.st.draft { color: var(--dim); }
.en-tag { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.fld { margin: 6px 0 16px; }
.lbl { display: block; color: var(--dim); font-size: 14px; margin-bottom: 6px; }
.ed { border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); overflow: hidden; }
.ed-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: #171c24; position: sticky; top: 0; }
.ed-bar button { font: inherit; font-size: 14px; min-width: 34px; height: 32px; padding: 0 8px; color: var(--txt); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.ed-bar button:hover { border-color: var(--line); background: var(--panel); }
.ed-area { min-height: 280px; padding: 14px 16px; color: #cfd6e0; line-height: 1.7; }
.ed.small .ed-area { min-height: 90px; }
.ed-area h2 { font-size: 22px; margin: 16px 0 8px; } .ed-area h2::after { display: none; }
.ed-area h3 { font-size: 18px; color: var(--gold); margin: 14px 0 6px; }
.ed-area img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 10px auto; }
/* szöveg igazítása (a szerkesztőben és az oldalon is) */
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ed-area blockquote { border-left: 3px solid var(--gold); margin: 10px 0; padding: 4px 14px; background: var(--panel); }
.ed-area p { margin: 0 0 10px; }
details.en { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
details.en summary { cursor: pointer; color: var(--gold); margin-bottom: 12px; }
.adm-del { margin: 14px 0 0; text-align: right; }
body.uploading { cursor: progress; }
@media (max-width: 640px) {
  .adm-top, .adm-main { padding-left: 16px; padding-right: 16px; }
  .adm-card { padding: 16px; }
}

/* admin: beállítások (2026-11-04) */
.adm-card.settings { margin-top: 18px; }
.adm-card.settings h2 { font-size: 20px; margin: 0 0 12px; }
.adm-card label.check { flex-direction: row; align-items: flex-start; gap: 12px; color: var(--txt); font-size: 15px; }
.adm-card label.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--bronze); }
.adm-card label.check small { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }
a.em .em-t { unicode-bidi: plaintext; }

/* ---------------------------------------------------------- 2026-11-04: oldalak, hibaoldal, kód, képek */
#nav-pages { display: contents; }
.foot-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 0 0 12px; }
.foot-links:empty { display: none; }
.foot-links a { color: var(--dim); text-decoration: none; font-size: 14px; }
.foot-links a:hover { color: var(--gold); }
.err { text-align: center; padding-top: 60px; padding-bottom: 40px; }
.err-code { font-size: clamp(64px, 14vw, 120px); font-weight: 700; line-height: 1; margin: 0; letter-spacing: .06em;
  background: linear-gradient(#ebcf9c, #a37c4a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.err .btns { justify-content: center; margin-top: 18px; }
.page h1 { margin-bottom: 18px; }
.page .page-upd { margin-top: 32px; font-size: 13px; }
/* kódblokk */
.content pre, .ed-area pre { background: #0d1117; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-x: auto;
  font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #d8dee8; margin: 18px 0; }
.content pre code { font: inherit; background: none; padding: 0; }
.content :not(pre) > code { font: .9em ui-monospace, Menlo, monospace; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }
.ed-area pre { cursor: pointer; white-space: pre; }
.ed-area pre::before { content: "kód · kattints a szerkesztéshez"; display: block; font: 11px Play, sans-serif; color: var(--dim); margin-bottom: 6px; }
/* képek: méret és igazítás (a szerkesztőből), mobilon teljes szélesség */
.content img.w-25, .ed-area img.w-25 { width: 25%; }
.content img.w-50, .ed-area img.w-50 { width: 50%; }
.content img.w-75, .ed-area img.w-75 { width: 75%; }
.content img.al-l, .ed-area img.al-l { float: left; margin: 6px 20px 12px 0; }
.content img.al-r, .ed-area img.al-r { float: right; margin: 6px 0 12px 20px; }
.content::after, .ed-area::after { content: ""; display: block; clear: both; }
.ed-area img.sel { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) {
  .content img.w-25, .content img.w-50, .content img.w-75 { width: 100%; }
  .content img.al-l, .content img.al-r { float: none; margin: 18px auto; }
}
/* a szerkesztő kép-eszköztára és a kód párbeszéd */
.ed { position: relative; }
.img-bar { position: absolute; z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: #0d1117;
  border: 1px solid var(--bronze); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: calc(100% - 12px); }
.img-bar button { font: inherit; font-size: 13px; min-width: 32px; height: 30px; padding: 0 7px; color: var(--txt); background: transparent;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
.img-bar button:hover { border-color: var(--line); background: var(--panel); }
.img-bar button.on { border-color: var(--gold); color: var(--gold); }
.code-dlg { width: min(760px, 94vw); border: 1px solid var(--bronze); border-radius: 16px; background: var(--panel); color: var(--txt); padding: 20px; }
.code-dlg::backdrop { background: rgba(6,8,12,.7); }
.code-dlg h2 { margin: 0 0 12px; font-size: 20px; color: var(--gold); }
.code-dlg h2::after { display: none; }
.code-dlg label { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; color: var(--dim); font-size: 14px; }
.code-dlg textarea { font: 14px/1.5 ui-monospace, Menlo, monospace; color: #d8dee8; background: #0d1117; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; resize: vertical; tab-size: 4; }
.code-dlg select { font: inherit; color: var(--txt); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.code-dlg .btn[hidden] { display: none; }

/* ------------------------------------------------------------ admin: statisztika */
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg a, .seg b { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; text-decoration: none; color: var(--dim); font-weight: 400; }
.seg b { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.seg a:hover { color: var(--txt); border-color: var(--bronze); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 18px; }
.kpis div { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.kpis b { display: block; font-size: 28px; color: var(--gold); line-height: 1.2; }
.kpis span { color: var(--dim); font-size: 14px; }
.st-wrap { overflow-x: auto; }
.st-chart { display: block; width: 100%; min-width: 600px; height: auto; }
.st-chart .grid { stroke: var(--line); stroke-width: 1; }
.st-chart .ax { fill: var(--dim); font-size: 11px; font-family: Play, system-ui, sans-serif; }
.st-chart .bar { fill: var(--bronze); opacity: .75; }
.st-chart g:hover .bar { opacity: 1; fill: var(--gold); }
.st-chart .hit { fill: transparent; }
.st-chart .line { fill: none; stroke: var(--txt); stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.st-chart .dot { fill: var(--bg); stroke: var(--txt); stroke-width: 2; pointer-events: none; }
.st-legend { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 13px; margin: 6px 0 0; }
.lg-bar, .lg-line { display: inline-block; width: 14px; height: 10px; background: var(--bronze); border-radius: 2px; margin-left: 8px; }
.lg-bar { margin-left: 0; }
.lg-line { height: 2px; background: var(--txt); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.st-grid .adm-card { margin: 0; }
.st-top h2 { font-size: 18px; }
.st-top ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-top li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 14px; }
.st-top .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-top li b { color: var(--gold); font-weight: 400; }
.st-top .tb { grid-column: 1 / -1; width: 100%; height: 4px; display: block; }
.st-top .tb rect { fill: var(--bronze); }
.st-note { margin: 16px 0 0; font-size: 13px; }
@media (max-width: 640px) { .kpis b { font-size: 22px; } .kpis { gap: 8px; } .kpis div { padding: 10px; } }

/* ------------------------------------------------------------ blog: megosztás, admin: olvasottság */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.share-t { color: var(--dim); font-size: 14px; margin-right: 4px; }
.share a, .share button {
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  color: var(--txt); background: var(--bg2); border: 1px solid var(--line); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.share a:hover, .share a:focus-visible { background: var(--b, var(--bronze)); border-color: var(--b, var(--bronze)); color: #fff; }
.share button:hover, .share button:focus-visible { border-color: var(--gold); color: var(--gold); }
.share svg { width: 17px; height: 17px; grid-area: 1 / 1; }
.share [hidden] { display: none; }
.sh-facebook { --b: #0866FF; } .sh-x { --b: #000; } .sh-whatsapp { --b: #25D366; } .sh-telegram { --b: #26A5E4; } .sh-reddit { --b: #FF4500; } .sh-mail { --b: #8a95a5; }
.sh-copy svg + svg { opacity: 0; }
.sh-copy.done { border-color: var(--gold); color: var(--gold); }
.sh-copy.done svg:first-child { opacity: 0; }
.sh-copy.done svg + svg { opacity: 1; }
.sh-msg { color: var(--gold); font-size: 13px; min-width: 1px; }
@media (max-width: 480px) {
  .share { gap: 6px; }
  .share-t { flex-basis: 100%; margin: 0 0 2px; }
  .share a, .share button { width: 36px; height: 36px; }
}
.adm-table .num { text-align: right; white-space: nowrap; }
.adm-table td.num { color: var(--gold); }
@media (max-width: 640px) { .post-tbl th:nth-child(3), .post-tbl td:nth-child(3) { display: none; } .adm-table th, .adm-table td { padding: 10px 5px; } }
.adm-table td.dt { color: var(--dim); font-size: 14px; white-space: nowrap; }
@media (max-width: 1000px) { .post-tbl th:nth-child(4), .post-tbl td:nth-child(4), .page-tbl th:nth-child(5), .page-tbl td:nth-child(5) { display: none; } }
@media (max-width: 640px) { .post-tbl th:nth-child(5), .post-tbl td:nth-child(5) { display: none; } }
.st-errs { margin-top: 16px; }
.st-errs h2 { font-size: 18px; }
.tbl-wrap { overflow-x: auto; }
.st-errs .path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; }
.st-errs .kind { font-size: 14px; }
.st-errs td.who { cursor: help; max-width: 260px; }
.st-errs .ua { display: block; color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Menlo, Consolas, monospace; }
/* az admin mezői egyforma magasak; a lenyíló saját nyíllal (a Safari máskülönben kisebbre rajzolja) */
.adm input:not([type=checkbox]):not([type=radio]), .adm select { box-sizing: border-box; height: 44px; }
.adm select { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2393a0b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center; }

/* ------------------------------------------------------------ admin: helyesírás */
::highlight(dm-spell) { text-decoration: underline wavy #ff5c5c; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-skip-ink: none; background-color: rgba(255, 92, 92, .12); }
.sp-menu { position: fixed; z-index: 60; min-width: 190px; max-width: 280px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.sp-menu button { font: inherit; font-size: 15px; text-align: left; color: var(--txt); background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.sp-menu button:hover, .sp-menu button:focus-visible { background: var(--bg2); color: var(--gold); }
.sp-menu .sp-sug { font-weight: 700; }
.sp-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.sp-note { color: var(--dim); font-size: 14px; padding: 7px 10px; }
.st-more { margin: 12px 0 0; font-size: 14px; }
.st-more a { color: var(--gold); text-decoration: none; }
.st-more a:hover { text-decoration: underline; }
.st-pager { margin: 14px 0 4px; }
.st-errs td.del { width: 1%; padding-left: 0; padding-right: 0; }
.st-errs .x { width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--dim); font-size: 18px; line-height: 1; cursor: pointer; }
.st-errs .x:hover, .st-errs .x:focus-visible { color: #ff7b7b; border-color: rgba(255,92,92,.45); }
.st-errfoot { margin-top: 12px; align-items: flex-end; gap: 12px; }
.st-errfoot .st-note { flex: 1 1 320px; margin: 0; }
.st-reset { margin-top: 24px; border-color: rgba(255,92,92,.3); }
.st-reset h2 { font-size: 18px; }
.st-full .rank { color: var(--dim); width: 1%; }
.st-full .barcell { width: 30%; min-width: 120px; }
.st-full .tb { width: 100%; height: 6px; display: block; }
.st-full .tb rect { fill: var(--bronze); }

/* ------------------------------------------------------------ admin: ikonok, tooltip, megerősítés, profil (2026-11-05) */
.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.ic-sprite { display: none; }
.btn .ic { width: 17px; height: 17px; margin-right: -2px; }
.adm-top { gap: 12px 18px; }
.adm-nav { gap: 4px; margin-left: auto; }
.adm-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; }
.adm-nav a:hover { background: var(--bg2); }
.adm-nav a.on { color: var(--gold); background: var(--bg2); }
.adm-user { display: flex; align-items: center; gap: 6px; }
.adm-user form { margin: 0; }
.adm-me { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; color: var(--dim); background: var(--bg2); border: 1px solid var(--line); text-decoration: none; }
.adm-me img { width: 100%; height: 100%; object-fit: cover; }
.adm-me:hover, .adm-me.on { border-color: var(--gold); color: var(--gold); }
.icb { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--dim); background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font: inherit; }
.icb:hover, .icb:focus-visible { color: var(--gold); border-color: var(--line); background: var(--bg2); }
.adm-nav button.icb { padding: 0; }
@media (max-width: 760px) { .adm-nav a span { display: none; } .adm-nav a { padding: 8px; } }
/* szerkesztő eszköztár */
.ed-bar { align-items: center; }
.ed-bar button { display: inline-grid; place-items: center; min-width: 34px; padding: 0 7px; color: var(--dim); }
.ed-bar button:hover { color: var(--txt); }
.ed-bar button.on { color: var(--gold); border-color: rgba(235,207,156,.35); background: rgba(235,207,156,.08); }
.ed-bar .sep { width: 1px; height: 20px; margin: 0 4px; background: var(--line); }
.img-bar button { display: inline-grid; place-items: center; }
.img-bar .ic { width: 17px; height: 17px; }
/* tooltip */
.tip { position: fixed; z-index: 100; max-width: min(340px, 90vw); padding: 7px 10px; border-radius: 9px; background: #0b0f15; color: var(--txt); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.4; box-shadow: 0 8px 22px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; word-break: break-word; }
.tip.show { opacity: 1; transform: none; }
.tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: #0b0f15;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.tip.below::after { bottom: auto; top: -5px; transform: rotate(225deg); }
[data-tip][tabindex] { cursor: help; }
/* megerősítő ablak */
.ask-dlg { width: min(440px, 92vw); border: 1px solid var(--bronze); border-radius: 16px; background: var(--panel); color: var(--txt); padding: 22px; }
.ask-dlg.danger { border-color: #7a3030; }
.ask-dlg::backdrop { background: rgba(6,8,12,.72); }
.ask-dlg h2 { margin: 0 0 8px; font-size: 20px; color: var(--gold); }
.ask-dlg.danger h2 { color: #ff9b8a; }
.ask-dlg h2::after { display: none; }
.ask-dlg p { margin: 0 0 14px; color: #cfd6e0; }
.ask-dlg input { width: 100%; box-sizing: border-box; height: 44px; font: inherit; color: var(--txt); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; }
.ask-dlg .row { gap: 8px; }
/* kereső a listák fölött */
.adm-search { position: relative; margin: 4px 0 10px; max-width: 420px; }
.adm-search .ic { position: absolute; left: 12px; top: 13px; color: var(--dim); pointer-events: none; }
.adm .adm-search input { width: 100%; padding-left: 40px; }
.adm-table .num span[tabindex] { border-bottom: 1px dotted rgba(235,207,156,.4); }
@media (max-width: 640px) { .page-tbl th:nth-child(2), .page-tbl td:nth-child(2), .page-tbl th:nth-child(4), .page-tbl td:nth-child(4), .page-tbl th:nth-child(6), .page-tbl td:nth-child(6) { display: none; } }
/* profil */
.prof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 16px; align-items: start; }
.prof-grid .adm-card { margin: 0; }
.prof-grid h1, .prof-grid h2 { display: flex; align-items: center; gap: 10px; }
.prof-grid h2 { font-size: 20px; margin: 0 0 12px; color: var(--gold); }
.prof-grid h2::after { display: none; }
.prof-grid h1 .ic, .prof-grid h2 .ic { width: 22px; height: 22px; color: var(--bronze); }
.prof-grid textarea { font: inherit; color: var(--txt); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; resize: vertical; }
.av-row { display: flex; gap: 16px; align-items: center; margin: 0 0 12px; }
.av-big { display: grid; place-items: center; width: 96px; height: 96px; flex: none; border-radius: 50%; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); color: var(--dim); }
.av-big img { width: 100%; height: 100%; object-fit: cover; }
.av-big .ic { width: 44px; height: 44px; }
.adm input[type=file] { height: auto; padding: 8px; }
.st.bad { color: #ff9b8a; border-color: rgba(255,90,70,.4); }
.ipc { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--dim); }
.link .ic { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
.dl { display: inline-flex; align-items: center; gap: 6px; }
.pager a { display: inline-flex; align-items: center; gap: 4px; }
.pager .ic { width: 16px; height: 16px; }

/* ------------------------------------------------------------ blog: szerző (2026-11-05) */
.byline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.byline .author { display: inline-flex; align-items: center; gap: 8px; color: var(--txt); }
.av { border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--bg2); }
.author-box { display: flex; gap: 16px; align-items: flex-start; margin: 30px 0 0; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.author-box .av { flex: none; }
.author-box p { margin: 0; }
.ab-t { color: var(--dim); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.ab-n { color: var(--gold); font-size: 18px; font-weight: 700; margin: 2px 0 6px !important; }
.ab-b { color: #cfd6e0; font-size: 15px; line-height: 1.6; }
.author-box + .share { margin-top: 20px; }
.adm input[type=file]::file-selector-button { font: inherit; font-size: 14px; color: var(--txt); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin-right: 10px; cursor: pointer; }
.adm input[type=file]::file-selector-button:hover { border-color: var(--gold); color: var(--gold); }
.log-tbl .st { white-space: nowrap; }
.av-row > div { flex: 1; min-width: 0; }
.adm input[type=file] { width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 480px) { .av-big { width: 72px; height: 72px; } .av-row { gap: 12px; } }
/* statisztika: oldalválasztó (2026-11-05) */
.st-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-head h1 { margin: 0; }
.st-site { margin: 0; }
.adm .st-site select { height: 38px; font-size: 14px; }

/* ------------------------------------------------------------ blog: szerző a listákban, képnagyítás, videó, betűszín (2026-11-05) */
.byline .av { width: 22px; height: 22px; }
.byline.big .av { width: 28px; height: 28px; }
.post-card .byline { font-size: 12.5px; }
.post-card .byline .author { color: #cfd6e0; }
.content a.zoom { cursor: zoom-in; }
.content a.zoom img { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(6,8,12,.92); cursor: zoom-out; animation: lb-in .15s ease-out; }
.lb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); cursor: default; }
.lb-x { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(18,22,29,.85); color: var(--txt); font: 30px/1 Play, system-ui, sans-serif; cursor: pointer; }
.lb-x:hover, .lb-x:focus-visible { border-color: var(--gold); color: var(--gold); }
html.lb-open { overflow: hidden; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
/* YouTube: előbb a kép és a lejátszás gomb, kattintásra a videó */
figure.yt { position: relative; margin: 18px auto; aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; }
figure.yt.w-25 { width: 25%; } figure.yt.w-50 { width: 50%; } figure.yt.w-75 { width: 75%; }
figure.yt.al-l { float: left; margin: 6px 20px 12px 0; } figure.yt.al-r { float: right; margin: 6px 0 12px 20px; }
figure.yt img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
figure.yt .yt-play { position: absolute; inset: 0; display: block; }
figure.yt .yt-btn { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; background: rgba(18,22,29,.85); border: 1px solid rgba(255,255,255,.25); transition: background .15s; }
figure.yt .yt-btn::after { content: ""; position: absolute; left: 28px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
figure.yt .yt-play:hover .yt-btn, figure.yt .yt-play:focus-visible .yt-btn { background: #c4302b; border-color: #c4302b; }
figure.yt .yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { figure.yt.w-25, figure.yt.w-50, figure.yt.w-75 { width: 100%; } figure.yt.al-l, figure.yt.al-r { float: none; margin: 18px auto; } }
/* betűszín (a szerkesztő palettája) */
.c-gold { color: #ebcf9c; } .c-bronze { color: #d19a5b; } .c-green { color: #5fd08a; } .c-blue { color: #4ab8e8; } .c-red { color: #ff7a6a; } .c-purple { color: #b48aff; }
/* admin: avatar választás, betűszín, videó és átméretezés a szerkesztőben (2026-11-05) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.adm-card label.av-pick { position: relative; display: grid; place-items: center; margin: 0; cursor: pointer; overflow: visible; }
.av-pick img { border-radius: 50%; }
.av-pick:hover, .av-pick:focus-within { border-color: var(--gold); }
.av-cam { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bronze); color: #fff; border: 2px solid var(--panel); }
.av-big .av-cam .ic { width: 16px; height: 16px; }
.av-side { display: flex; align-items: center; gap: 8px; }
.av-hint { margin: 0; font-size: 13px; }
.icb.danger-ic:hover, .icb.danger-ic:focus-visible { color: #ff7b7b; border-color: rgba(255,92,92,.45); }
.color-pop { position: absolute; z-index: 6; display: flex; gap: 6px; padding: 8px; background: #0d1117; border: 1px solid var(--bronze); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.color-pop .sw { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); background: var(--sw); cursor: pointer; display: grid; place-items: center; color: var(--dim); }
.color-pop .sw:hover, .color-pop .sw:focus-visible { border-color: #fff; }
.color-pop .sw.clr { background: transparent; border-color: var(--line); }
.color-pop .sw.clr .ic { width: 15px; height: 15px; }
.ed-area figure.yt { cursor: pointer; }
.ed-area figure.yt.sel { outline: 3px solid var(--gold); outline-offset: 2px; }
.ed-area figure.yt .yt-btn { pointer-events: none; }
.ed-area figure.yt img { pointer-events: none; }
.ed-area figure.yt .yt-btn, .content figure.yt .yt-btn { position: absolute; }
.rs-handle { position: absolute; z-index: 6; width: 18px; height: 18px; border-radius: 5px; background: var(--gold); border: 2px solid #0d1117; cursor: nwse-resize; touch-action: none; }
.rs-handle[data-pct]::after { content: attr(data-pct); position: absolute; left: 22px; top: -4px; padding: 2px 6px; border-radius: 6px; background: #0d1117; color: var(--gold); font-size: 12px; white-space: nowrap; }

/* ---------- képtár (2026-11-05) ---------- */
.media-box { position: relative; }
.m-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 15px; }
.m-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); text-decoration: none; padding: 2px 4px; border-radius: 6px; }
.m-crumbs a:last-child { color: var(--txt); font-weight: 700; }
.m-crumbs a:hover { background: var(--bg2); }
.m-sep { color: var(--dim); }
.m-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.adm-card label.m-search, .media-box label.m-search { display: block; flex: 1 1 260px; margin: 0; max-width: 420px; }
.m-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-card label.btn.m-up, .media-box label.btn.m-up { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; color: inherit; font-size: inherit; cursor: pointer; }
.m-up:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.m-msg, .m-status { margin: 0 0 12px; }
.m-status { color: var(--gold); font-size: 14px; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 0 0 14px; }
.m-folders { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.m-folder { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; color: var(--txt); text-decoration: none; }
.m-folder .ic { grid-row: span 2; width: 26px; height: 26px; color: var(--gold); }
.m-folder:hover, .m-folder:focus-visible { border-color: var(--bronze); }
.m-fname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-tile { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: left; color: var(--txt); font: inherit; }
.m-tile.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.m-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #0d1015 repeating-conic-gradient(#151a21 0 25%, #0d1015 0 50%) 0 0 / 16px 16px; overflow: hidden; }
.m-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-cap { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.m-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); font-size: 12px; }
.m-meta .ic { width: 13px; height: 13px; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.m-row .icb { width: 30px; height: 30px; }
.m-use { white-space: nowrap; font-size: 12px; color: #9be39b; background: rgba(90,200,90,.08); border: 1px solid rgba(90,200,90,.3); border-radius: 999px; padding: 1px 8px; }
.m-use.none { color: var(--dim); background: transparent; border-color: var(--line); }
.adm-card label.m-chk, .m-chk { position: absolute; top: 6px; left: 6px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; background: rgba(13,16,21,.75); border-radius: 8px; cursor: pointer; }
.m-chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.m-pick { cursor: pointer; }
.m-pick:hover, .m-pick:focus-visible { border-color: var(--gold); outline: none; }
.m-bulk { position: sticky; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--bronze); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.m-bulk[hidden] { display: none; }
.m-count { color: var(--gold); margin-right: auto; }
.adm-card label.m-to { margin: 0; }
.m-to select { min-width: 180px; }
.m-empty { margin: 8px 0 14px; }
.m-drop { display: none; position: absolute; inset: 0; z-index: 3; margin: 0; place-items: center; background: rgba(18,22,29,.88); border: 2px dashed var(--gold); border-radius: 12px; color: var(--gold); font-size: 18px; pointer-events: none; }
.media-box.drop .m-drop { display: grid; }
.media-box.busy { cursor: progress; }
.media-box.busy .m-up { opacity: .5; pointer-events: none; }
.media-dlg { width: min(980px, 96vw); max-height: 90vh; border: 1px solid var(--bronze); border-radius: 16px; background: var(--panel); color: var(--txt); padding: 18px 20px 20px; }
.media-dlg::backdrop { background: rgba(6,8,12,.72); }
.m-dlg-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.m-dlg-head h2 { margin: 0; font-size: 20px; color: var(--gold); }
.media-dlg .m-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 640px) {
  .m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .media-dlg .m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-dlg { padding: 14px; }
  .m-tools { flex-direction: column; align-items: stretch; }
  .adm-card label.m-search, .media-box label.m-search { max-width: none; flex: 0 0 auto; }
  .m-bulk { bottom: 6px; }
  .m-use { font-size: 11px; padding: 1px 6px; }
  .m-to select { min-width: 0; width: 100%; }
  .adm-card label.m-to { flex: 1 1 100%; }
}

/* ---------- fájlok, letöltések (2026-11-06) ---------- */
.f-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.f-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; color: var(--txt); font: inherit; text-align: left; }
.f-row.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.adm-card label.f-chk, .f-chk { position: static; flex: none; width: 28px; height: 28px; background: transparent; }
.f-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #0d1015; color: var(--gold); }
.f-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.f-name { color: var(--txt); font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.f-name:hover { color: var(--gold); }
.f-dl { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--gold); text-decoration: none; font-weight: 700; font-size: 14px; padding: 4px 8px; border-radius: 8px; }
.f-dl:hover { background: #0d1015; }
.f-dl small { color: var(--dim); font-weight: 400; }
.f-dl .ic { width: 16px; height: 16px; }
.f-acts { flex: none; display: flex; align-items: center; gap: 2px; }
.f-acts .icb { width: 32px; height: 32px; }
.adm-card label.f-rep, label.icb.f-rep { display: inline-grid; flex-direction: row; margin: 0; cursor: pointer; }
.f-pick { width: 100%; cursor: pointer; }
.f-pick:hover, .f-pick:focus-visible { border-color: var(--gold); outline: none; }
.f-chart { margin: 0 0 14px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; }
.f-chart h2 { margin: 0; font-size: 17px; color: var(--gold); }
.f-chart h2 small { color: var(--dim); font-weight: 400; font-size: 13px; }
.f-chart .sub { margin: 4px 0 8px; font-size: 13px; }
.ed-area a.dl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--bronze); color: var(--txt); text-decoration: none; }
.ed-area a.dl::before { content: "⤓"; color: var(--gold); }
.dl-btn { margin: 4px 0; }
@media (max-width: 640px) {
  .f-row { flex-wrap: wrap; }
  .f-main { flex-basis: calc(100% - 90px); }
  .f-dl { margin-left: 38px; }
  .f-acts { margin-left: auto; }
}

/* ---------- szekciók (2026-11-06) ---------- */
.sec-intro { color: var(--dim); margin: -6px 0 16px; }
.sec-intro p { margin: 0 0 8px; color: var(--dim); }
.sec-intro p:last-child { margin-bottom: 0; }
.app .btns:last-child { margin-bottom: 0; }
.site-meta { display: block; padding: 0 12px 10px; color: var(--dim); font-size: 13px; }
.sec-embed { margin: 24px 0; }
.sec-embed h2 { margin-top: 0; }
/* szekciók az adminban (2026-11-06) */
form.inl { display: inline-block; margin: 0; }
.icb-ph { display: inline-block; width: 36px; height: 36px; vertical-align: middle; }
.sec-ord { width: 90px; }
.sec-tbl td { vertical-align: middle; }
.sec-tbl small.dim, small.dim { color: var(--dim); font-weight: 400; }
.dim-row td { opacity: .55; }
.icb.tog { color: var(--dim); }
.icb.tog.on { color: var(--gold); border-color: var(--line); background: var(--bg2); }
.sec-thumb { width: 84px; }
.sec-thumb img { width: 72px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.h-link { font-size: 14px; font-weight: 400; color: var(--dim); margin-left: 8px; }
.img-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.img-prev { max-width: 200px; max-height: 120px; border-radius: 8px; border: 1px solid var(--line); background: #0d1015; }
.btn-tbl-wrap { overflow-x: auto; margin: 6px 0 10px; }
.btn-tbl { min-width: 760px; }
.btn-tbl td { padding: 4px; }
.btn-tbl input, .btn-tbl select { width: 100%; min-width: 0; }
.btn-tbl .btn-url { display: flex; gap: 4px; align-items: center; min-width: 220px; }
.btn-tbl .btn-url input { flex: 1 1 auto; }
.sec-choose { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.sec-choose .btn { justify-content: flex-start; font: inherit; cursor: pointer; }
.ed-area figure.sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 12px 14px; border: 1px dashed var(--bronze); border-radius: 12px; background: var(--bg2); cursor: default; }
.sec-ph { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 700; }
.sec-x { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--dim); cursor: pointer; }
.sec-x:hover { color: #ff7b7b; border-color: rgba(255,92,92,.45); }
/* az admin menüje (2026-11-06: 8 pont): közepes szélességen csak ikonok, a mostani a nevével */
@media (max-width: 1260px) { .adm-nav a span { display: none; } .adm-nav a.on span { display: inline; } .adm-nav a { padding: 8px 9px; } }

/* Zenelejátszó (2026-11-07): borító, lejátszás gomb, cím, idő, hangerő, hullámforma */
figure.track { --tr-done: var(--gold); --tr-todo: rgba(147,160,176,.38); --tr-hover: rgba(235,207,156,.5);
  display: flex; gap: 16px; align-items: stretch; margin: 22px 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--panel); }
figure.track.playing { border-color: rgba(235,207,156,.45); }
.tr-cover { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--bg2); border: 1px solid var(--line); }
.tr-note { display: grid; place-items: center; color: var(--bronze); }
.tr-note svg { width: 38px; height: 38px; }
.tr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.tr-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tr-play { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: #1a1408; background: linear-gradient(180deg, #f3dcae, var(--gold) 55%, #c9a66b); box-shadow: 0 2px 10px rgba(235,207,156,.18); transition: transform .12s, box-shadow .12s; }
.tr-play:hover { transform: scale(1.06); box-shadow: 0 3px 16px rgba(235,207,156,.32); }
.tr-play:focus-visible, .tr-wave:focus-visible, .tr-mute:focus-visible, .tr-vr:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tr-play svg { width: 20px; height: 20px; }
.tr-play .tr-i-play { margin-left: 2px; }
.tr-play .tr-i-pause, figure.track.playing .tr-play .tr-i-play { display: none; }
figure.track.playing .tr-play .tr-i-pause { display: block; }
.tr-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tr-title { color: var(--txt); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-artist { color: var(--dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-time { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-vol { display: flex; align-items: center; gap: 6px; }
.tr-mute { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--dim); cursor: pointer; }
.tr-mute:hover { color: var(--gold); background: var(--bg2); }
.tr-mute svg { width: 18px; height: 18px; }
.tr-vol .tr-mx, .tr-vol.muted .tr-w1, .tr-vol.muted .tr-w2, .tr-vol.low .tr-w2 { display: none; }
.tr-vol.muted .tr-mx { display: inline; }
.tr-vr { -webkit-appearance: none; appearance: none; width: 78px; height: 4px; margin: 0; border-radius: 4px; background: var(--line); accent-color: var(--gold); cursor: pointer; }
.tr-vr::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 0; }
.tr-vr::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 0; }
.tr-vr::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold); }
.tr-wave { position: relative; height: 46px; cursor: pointer; touch-action: none; border-radius: 6px; }
.tr-wave canvas { display: block; width: 100%; height: 100%; }
.tr-audio { width: 100%; }
figure.track.js .tr-audio { display: none; }
figure.track:not(.js) .tr-time { display: none; }
@media (pointer: coarse) { .tr-vol { display: none !important; } }
@media (max-width: 560px) {
  figure.track { gap: 12px; padding: 12px; }
  .tr-cover { flex-basis: 56px; width: 56px; height: 56px; align-self: flex-start; }
  .tr-vol { display: none !important; }
  .tr-wave { height: 40px; }
}
.post-item .intro figure.track img.tr-cover { display: block; }
/* a szerkesztőben a zene egy címke, mint a szekció */
.ed-area figure.track { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 12px 14px; border: 1px dashed var(--bronze); border-radius: 12px; background: var(--bg2); cursor: default; }
/* zenék az adminban (2026-11-07) */
.tr-drop { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--dim); }
.tr-drop.over { border-color: var(--gold); color: var(--gold); background: rgba(235,207,156,.05); }
.tr-tbl td.tr-th { width: 52px; padding-right: 0; }
.tr-tbl .tr-th img, .tr-tbl .tr-th span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--bg2); border: 1px solid var(--line); color: var(--bronze); }
.tr-tbl td.del { width: 1%; }
@media (max-width: 900px) { .tr-tbl th:nth-child(5), .tr-tbl td:nth-child(5), .tr-tbl th:nth-child(6), .tr-tbl td:nth-child(6) { display: none; } }
@media (max-width: 640px) { .tr-tbl th:nth-child(4), .tr-tbl td:nth-child(4), .tr-tbl th:nth-child(1), .tr-tbl td:nth-child(1) { display: none; } }
.tr-prev figure.track { margin: 4px 0 18px; }
.tr-file { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.tr-file-btns { align-items: center; flex-wrap: wrap; }
.tr-used { margin: 4px 0 0; padding-left: 20px; }
.tr-dlg .tr-q { width: 100%; margin-top: 4px; }
.tr-choose { max-height: 46vh; overflow: auto; }
.tr-choose .btn { display: flex; align-items: center; gap: 8px; }
.tr-choose .btn span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-choose .btn small { color: var(--dim); }
.ed-area figure.track .sec-ph { overflow: hidden; }
/* az admin fejléce (2026-11-07): felül balra a logó, jobbra a profil, alatta a menü */
.adm-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 18px; padding-bottom: 0; border-bottom: 1px solid var(--line); }
.adm-top .adm-user { grid-column: 2; grid-row: 1; justify-self: end; }
.adm-top .adm-nav { grid-column: 1 / -1; grid-row: 2; margin: 0 -11px; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.adm-top .adm-nav::-webkit-scrollbar { display: none; }
.adm-top .adm-nav a { flex: 0 0 auto; }
.adm-top .adm-nav a span { display: inline; }
@media (max-width: 1020px) { .adm-top .adm-nav a span { display: none; } .adm-top .adm-nav a.on span { display: inline; } .adm-top .adm-nav a { padding: 8px 10px; } }
@media (max-width: 520px) { .adm-top .adm-nav a.on span { display: none; } .adm-top .adm-nav { justify-content: space-between; } }
figure.track input.tr-vr.tr-vr { height: 4px; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: var(--line); box-shadow: none; outline-offset: 4px; }
.adm-card label.btn, .ask-dlg label.btn { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; color: var(--txt); font-size: 15px; cursor: pointer; }
.adm-card label.btn.primary { color: #fff; }