:root{
  --paper:#eef2f3; --surface:#ffffff; --ink:#16232b; --muted:#68797f;
  --line:#d9e1e4; --line-strong:#c3ced3; --accent:#0d6152; --accent-soft:#e3efeb;
  --danger:#a03127;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}

.bar{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding:1rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--line);
}
.mark{color:var(--accent); font-size:1.1rem; line-height:1}
.bar h1{font-size:1.05rem}
.bar-note{margin-left:auto; color:var(--muted); font-size:.82rem}

.wrap{
  max-width:1080px; margin:0 auto; padding:1.25rem;
  display:grid; gap:1.25rem; grid-template-columns:250px 1fr; align-items:start;
}
@media (max-width:820px){ .wrap{grid-template-columns:1fr} }

/* ---------------------------------------------------------- kis naptár */
.mini{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:.85rem}
.mini-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.7rem}
.mini-head strong{font-size:.9rem; font-variant-numeric:tabular-nums}
.ico{
  width:28px; height:28px; border:1px solid var(--line); background:var(--surface);
  border-radius:3px; color:var(--ink); font-size:1rem; line-height:1; cursor:pointer;
}
.ico:hover{border-color:var(--line-strong); background:var(--paper)}
.dow,.mini-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.dow span{
  text-align:center; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding-bottom:.3rem;
}
.day{
  position:relative; aspect-ratio:1; border:0; background:transparent; border-radius:3px;
  font-family:var(--mono); font-size:.78rem; color:var(--ink); cursor:pointer;
}
.day.out{color:#b9c4c9; cursor:default}
.day.none{color:#9fadb3; cursor:default}
.day.has{background:var(--accent-soft); color:var(--accent); font-weight:600}
.day.has:hover{outline:1px solid var(--accent)}
.day.today{box-shadow:inset 0 0 0 1px var(--line-strong)}
.day.sel{background:var(--accent); color:#fff}
.legend{display:flex; align-items:center; gap:.4rem; margin:.75rem 0 0; font-size:.72rem; color:var(--muted)}
.dot{width:9px; height:9px; border-radius:2px; background:var(--accent-soft); display:inline-block}

/* --------------------------------------------------------- nagy naptár */
.big{background:var(--surface); border:1px solid var(--line); border-radius:4px}
.big-head{
  display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem;
  border-bottom:1px solid var(--line);
}
.big-head>div{flex:1; text-align:center}
.big-head h2{font-size:.98rem; font-variant-numeric:tabular-nums}
.sub{margin:.15rem 0 0; color:var(--muted); font-size:.78rem}

.week{display:grid; grid-template-columns:repeat(7,1fr)}
.col{border-left:1px solid var(--line); padding:.7rem .5rem 1rem; min-height:230px}
.col:first-child{border-left:0}
.col.sel{background:#f7fbfa}
.col.past{background:#fafbfb}
.col h4{
  margin:0 0 .55rem; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600; text-align:center;
}
.col h4 b{display:block; font-family:var(--mono); font-size:1rem; letter-spacing:0; color:var(--ink); font-weight:600}
.col.today h4 b{color:var(--accent)}

.slot{
  display:block; width:100%; margin:0 0 4px; padding:.4rem .3rem;
  border:1px solid var(--line); border-left:2px solid var(--accent); background:var(--surface);
  border-radius:2px; cursor:pointer; text-align:center;
  font-family:var(--mono); font-size:.82rem; color:var(--ink); font-variant-numeric:tabular-nums;
}
.slot:hover{background:var(--accent-soft); border-color:var(--accent)}
.slot small{display:block; font-family:var(--sans); font-size:.62rem; color:var(--muted)}
.slot small.last{color:#8a5a12}
.seats{margin:-.6rem 0 1rem; font-size:.8rem; color:var(--muted)}
.empty{text-align:center; color:#b3bfc4; font-size:.72rem; padding-top:.4rem}

@media (max-width:820px){
  .week{grid-template-columns:1fr}
  .col{border-left:0; border-top:1px solid var(--line); min-height:0; padding:.6rem .8rem}
  .col:first-child{border-top:0}
  .col h4{text-align:left}
  .col h4 b{display:inline; margin-left:.4rem}
  .slot{text-align:left; padding:.5rem .6rem}
  .slot small{display:inline; margin-left:.5rem}
}

/* -------------------------------------------------------------- ablak */
.modal{position:fixed; inset:0; background:rgba(22,35,43,.45); display:grid; place-items:center; padding:1rem; z-index:20}
.sheet{background:var(--surface); border-radius:5px; padding:1.25rem; width:min(420px,100%); box-shadow:0 12px 40px rgba(0,0,0,.2)}
.sheet h3{font-size:1rem; margin-bottom:.4rem}
.when{font-family:var(--mono); font-size:.9rem; color:var(--accent); margin:0 0 1rem}
.field{margin-bottom:.7rem}
.field label{display:block; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem}
.opt{text-transform:none; letter-spacing:0; font-size:.7rem; color:#a3b0b5}
input,textarea{
  width:100%; padding:.5rem .6rem; border:1px solid var(--line-strong); border-radius:3px;
  font:inherit; color:var(--ink); background:var(--surface); resize:vertical;
}
input:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.actions{display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem}
.btn{
  padding:.5rem .9rem; border:1px solid var(--accent); background:var(--accent); color:#fff;
  border-radius:3px; font:inherit; cursor:pointer;
}
.btn:hover{background:#0a4f43}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--paper)}
.error{color:var(--danger); font-size:.8rem; margin:.3rem 0 0}
.code-label{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:.8rem 0 .1rem}
.code{font-family:var(--mono); font-size:1.5rem; letter-spacing:.12em; margin:0; color:var(--accent)}

button:focus-visible, .day:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:no-preference){ .slot{transition:background .12s ease, border-color .12s ease} }

/* ---------------------------------------------------------------------------
   A hidden attribútum felülírása.
   A böngésző alapértelmezése (display:none) gyengébb, mint bármelyik itteni
   szabály, ezért a display:grid-et használó elemek (.modal, .login, .wrap)
   a hidden attribútum ellenére is látszanának. Ez a sor teszi helyre.
--------------------------------------------------------------------------- */
[hidden] { display: none !important; }