/* =========================================================
   fAIt klub — "beton & szappan"
   Paletta: beton szürke, fénymásolt papír, szappan-rózsaszín
   ========================================================= */

:root{
  --ink:      #0c0e0f;
  --beton:    #15181a;
  --beton-2:  #1d2124;
  --vonal:    #2b3033;
  --papir:    #dcd8cf;
  --fust:     #8b918e;
  --szappan:  #e3a3a8;
  --szappan-h:#f0bcc0;
  --ver:      #9b2020;

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body:    'Spectral', Georgia, serif;
  --mono:    'Courier Prime', 'Courier New', monospace;

  --w: 1080px;
  --r: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--papir);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}

/* Fénymásolt papír szemcse az egész oldalon */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:var(--szappan); text-decoration:none; }
a:hover{ color:var(--szappan-h); text-decoration:underline; text-underline-offset:3px; }

img{ max-width:100%; height:auto; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.05;
  text-transform:uppercase;
  margin:0 0 .5em;
}

hr{ border:0; border-top:1px solid var(--vonal); margin:2rem 0; }

::selection{ background:var(--szappan); color:var(--ink); }

:focus-visible{ outline:2px solid var(--szappan); outline-offset:2px; }

.wrap{ width:100%; max-width:var(--w); margin:0 auto; padding:0 20px; }
.narrow{ max-width:720px; }

/* ---------- Címke / eyebrow ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--fust);
  margin:0 0 14px;
}
.eyebrow b{ color:var(--szappan); font-weight:400; }

/* ---------- Szappan logó (signature) ---------- */
.soap{
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#f2c4c8 0%,var(--szappan) 45%,#c98187 100%);
  color:#5a2b30;
  font-family:var(--display);
  text-transform:uppercase;
  border-radius:5px/8px;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 6px rgba(90,43,48,.4), 0 3px 12px rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  transform:rotate(-1.5deg);
}
.soap-sm{ padding:7px 13px 6px; font-size:17px; letter-spacing:.04em; }
.soap-lg{ padding:20px 34px 17px; font-size:44px; letter-spacing:.03em; }
.soap .ai{ color:#7d1f26; }

/* ---------- Fejléc ---------- */
.top{
  border-bottom:1px solid var(--vonal);
  background:rgba(12,14,15,.92);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:50;
}
.top-in{ display:flex; align-items:center; gap:26px; height:66px; }
.top nav{ display:flex; gap:22px; margin-left:auto; align-items:center; }
.top nav a{
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fust);
}
.top nav a:hover{ color:var(--papir); text-decoration:none; }
.top nav a.on{ color:var(--papir); border-bottom:2px solid var(--szappan); padding-bottom:3px; }
.top nav a .dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--szappan); margin-left:5px; vertical-align:middle;
}
.burger{ display:none; margin-left:auto; background:none; border:0; color:var(--papir); font-size:24px; cursor:pointer; }

/* ---------- Nyitóoldal ---------- */
.hero{ padding:90px 0 70px; border-bottom:1px solid var(--vonal); position:relative; }
.hero h1{
  font-size:clamp(56px,12vw,140px);
  line-height:.86;
  margin:0 0 22px;
  letter-spacing:-.01em;
}
.hero h1 .ai{ color:var(--szappan); }
.hero .lead{
  font-size:20px; max-width:560px; color:var(--papir);
  border-left:2px solid var(--szappan); padding-left:18px;
}
.hero .lead b{ color:var(--szappan-h); font-weight:400; }

/* ---------- Szabályok (signature blokk) ---------- */
.rules{ padding:70px 0; }
.rules ol{ list-style:none; margin:0; padding:0; counter-reset:r; }
.rules li{
  counter-increment:r;
  display:grid; grid-template-columns:88px 1fr; gap:20px;
  padding:18px 0; border-top:1px solid var(--vonal);
  align-items:baseline;
}
.rules li::before{
  content:counter(r,decimal-leading-zero);
  font-family:var(--display); font-size:34px; color:var(--vonal);
  line-height:1;
}
.rules li.hot::before{ color:var(--szappan); }
.rules li p{ margin:0; font-size:18px; }
.rules li small{ display:block; font-family:var(--mono); font-size:12.5px; color:var(--fust); margin-top:6px; letter-spacing:.04em; }

/* ---------- Doboz / kártya ---------- */
.card{
  background:var(--beton);
  border:1px solid var(--vonal);
  border-radius:var(--r);
  padding:26px;
}
.card + .card{ margin-top:16px; }

.panel{ padding:44px 0; }
.panel h2{ font-size:30px; margin-bottom:6px; }
.panel .sub{ font-family:var(--mono); font-size:13px; color:var(--fust); margin:0 0 26px; letter-spacing:.06em; }

/* ---------- Gombok ---------- */
.btn{
  display:inline-block; cursor:pointer;
  font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  padding:13px 24px; border-radius:var(--r);
  border:1px solid var(--szappan); background:var(--szappan); color:#40181c;
  transition:transform .08s ease, box-shadow .12s ease;
}
.btn:hover{ background:var(--szappan-h); color:#40181c; text-decoration:none; transform:translate(-1px,-1px); box-shadow:2px 2px 0 rgba(227,163,168,.35); }
.btn:active{ transform:translate(0,0); box-shadow:none; }
.btn-ghost{ background:transparent; color:var(--papir); border-color:var(--vonal); }
.btn-ghost:hover{ background:var(--beton-2); color:var(--papir); border-color:var(--fust); box-shadow:none; }
.btn-sm{ padding:8px 14px; font-size:12px; }
.btn-danger{ background:transparent; border-color:var(--ver); color:#d98080; }
.btn-danger:hover{ background:var(--ver); color:#fff; box-shadow:none; }

/* ---------- Űrlapok ---------- */
label{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--fust); margin:0 0 7px; }
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%; padding:12px 14px;
  background:var(--ink); color:var(--papir);
  border:1px solid var(--vonal); border-radius:var(--r);
  font-family:var(--mono); font-size:15px;
}
textarea{ line-height:1.6; resize:vertical; min-height:120px; }
input:focus,textarea:focus,select:focus{ border-color:var(--szappan); outline:none; }
.field{ margin-bottom:18px; }
.hint{ font-family:var(--mono); font-size:12px; color:var(--fust); margin-top:6px; }
.check{ display:flex; gap:10px; align-items:flex-start; font-family:var(--mono); font-size:13px; color:var(--papir); text-transform:none; letter-spacing:0; }
.check input{ margin-top:3px; }

.auth-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; padding:56px 0; }

/* ---------- Üzenetsáv ---------- */
.flash{
  font-family:var(--mono); font-size:13.5px;
  padding:13px 16px; border-radius:var(--r); margin:20px 0;
  border-left:3px solid var(--szappan); background:var(--beton-2);
}
.flash.err{ border-left-color:var(--ver); color:#e7a5a5; }
.flash.ok{ border-left-color:#5f8f5f; }

/* ---------- Cikklista ---------- */
.posts{ display:grid; gap:0; }
.post-row{
  display:grid; grid-template-columns:130px 1fr; gap:26px;
  padding:26px 0; border-top:1px solid var(--vonal);
}
.post-row:last-child{ border-bottom:1px solid var(--vonal); }
.post-meta{ font-family:var(--mono); font-size:12px; color:var(--fust); letter-spacing:.05em; }
.post-meta .tag{ color:var(--szappan); display:block; margin-bottom:4px; }
.post-row h3{ font-size:26px; margin:0 0 8px; }
.post-row h3 a{ color:var(--papir); }
.post-row h3 a:hover{ color:var(--szappan); text-decoration:none; }
.post-row p{ margin:0; color:#b3b0a9; font-size:16px; }
.post-foot{ font-family:var(--mono); font-size:12px; color:var(--fust); margin-top:10px; letter-spacing:.05em; }
.chip{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--vonal); border-radius:var(--r); padding:3px 8px; color:var(--fust); margin-right:6px;
}
.chip.draft{ border-color:var(--ver); color:#d98080; }

/* ---------- Cikk ---------- */
.article-head{ padding:56px 0 26px; border-bottom:1px solid var(--vonal); }
.article-head h1{ font-size:clamp(34px,6vw,58px); margin-bottom:16px; }
.byline{ font-family:var(--mono); font-size:13px; color:var(--fust); letter-spacing:.06em; }
.byline b{ color:var(--szappan); font-weight:400; }
.prose{ padding:34px 0; font-size:18.5px; }
.prose p{ margin:0 0 1.15em; }
.prose h2{ font-size:28px; margin:1.6em 0 .5em; }
.prose h3{ font-size:21px; margin:1.5em 0 .4em; }
.prose ul,.prose ol{ margin:0 0 1.2em; padding-left:1.3em; }
.prose li{ margin-bottom:.4em; }
.prose blockquote{
  margin:1.5em 0; padding:4px 0 4px 20px;
  border-left:2px solid var(--szappan); color:#c4c0b8; font-style:italic;
}
.prose code{ font-family:var(--mono); font-size:.88em; background:var(--beton-2); padding:2px 5px; border-radius:var(--r); }
.prose pre{ background:var(--beton); border:1px solid var(--vonal); border-radius:var(--r); padding:16px; overflow-x:auto; }
.prose pre code{ background:none; padding:0; }

/* ---------- Hozzászólások ---------- */
.comment{ display:grid; grid-template-columns:44px 1fr; gap:14px; padding:18px 0; border-top:1px solid var(--vonal); }
.comment p{ margin:6px 0 0; }
.avatar{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--beton-2); border:1px solid var(--vonal);
  font-family:var(--mono); font-size:14px; color:var(--szappan); letter-spacing:.04em;
}

/* ---------- Chat ---------- */
.chat-shell{ display:grid; grid-template-columns:1fr 240px; gap:24px; padding:26px 0 40px; }
.chat-box{
  display:flex; flex-direction:column;
  height:calc(100vh - 220px); min-height:420px;
  background:var(--beton); border:1px solid var(--vonal); border-radius:var(--r);
}
.chat-log{ flex:1; overflow-y:auto; padding:18px; }
.chat-log::-webkit-scrollbar{ width:8px; }
.chat-log::-webkit-scrollbar-thumb{ background:var(--vonal); }
.msg{ padding:7px 0; font-family:var(--mono); font-size:14.5px; line-height:1.6; word-wrap:break-word; }
.msg .who{ color:var(--szappan); }
.msg .at{ color:#5d6462; font-size:12px; margin-left:6px; }
.msg .txt{ color:var(--papir); }
.msg.mine .who{ color:var(--papir); }
.msg a{ word-break:break-all; }
.chat-day{
  text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fust); margin:18px 0 8px;
}
.chat-form{ display:flex; gap:10px; padding:14px; border-top:1px solid var(--vonal); }
.chat-form textarea{ min-height:44px; height:44px; padding:11px 14px; font-size:14.5px; }
.who-list h4{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--fust); margin:0 0 12px; }
.who-list ul{ list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:13.5px; }
.who-list li{ padding:5px 0; color:var(--fust); }
.who-list li.online{ color:var(--papir); }
.who-list li.online::before{ content:"●"; color:#6fa06f; font-size:9px; margin-right:8px; vertical-align:middle; }
.who-list li.off::before{ content:"○"; font-size:9px; margin-right:8px; vertical-align:middle; }

/* ---------- Táblázat (admin) ---------- */
table.tbl{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13.5px; }
table.tbl th{
  text-align:left; font-weight:400; color:var(--fust);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:10px 12px; border-bottom:1px solid var(--vonal);
}
table.tbl td{ padding:11px 12px; border-bottom:1px solid var(--vonal); vertical-align:middle; }
table.tbl tr:hover td{ background:var(--beton); }
code.inv{ background:var(--beton-2); color:var(--szappan); padding:3px 8px; border-radius:var(--r); letter-spacing:.1em; }

/* ---------- Statisztika sáv ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--vonal); border:1px solid var(--vonal); margin:26px 0; }
.stats div{ background:var(--ink); padding:18px; }
.stats b{ display:block; font-family:var(--display); font-size:32px; color:var(--papir); line-height:1; }
.stats span{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fust); }

/* ---------- Lábléc ---------- */
.foot{ border-top:1px solid var(--vonal); padding:34px 0 46px; margin-top:50px; }
.foot-in{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; font-family:var(--mono); font-size:12px; color:var(--fust); letter-spacing:.06em; }
.foot-in .right{ margin-left:auto; }

/* ---------- Segéd ---------- */
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.spread{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.mt{ margin-top:26px; } .mb{ margin-bottom:26px; }
.muted{ color:var(--fust); }
.mono{ font-family:var(--mono); font-size:13.5px; }
.center{ text-align:center; }
.empty{
  border:1px dashed var(--vonal); border-radius:var(--r);
  padding:46px 26px; text-align:center; font-family:var(--mono); font-size:14px; color:var(--fust);
}

/* ---------- Mobil ---------- */
@media (max-width:860px){
  .auth-grid{ grid-template-columns:1fr; gap:26px; }
  .chat-shell{ grid-template-columns:1fr; }
  .chat-box{ height:calc(100vh - 260px); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .post-row{ grid-template-columns:1fr; gap:10px; }
  .burger{ display:block; }
  .top nav{
    display:none; position:absolute; top:66px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--ink); border-bottom:1px solid var(--vonal); padding:8px 20px 16px;
  }
  .top nav.open{ display:flex; }
  .top nav a{ padding:12px 0; width:100%; border-bottom:1px solid var(--vonal); }
  .top nav a.on{ border-bottom:1px solid var(--szappan); }
  .rules li{ grid-template-columns:56px 1fr; gap:14px; }
  .rules li::before{ font-size:24px; }
  .hero{ padding:56px 0 44px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}