html { color-scheme: dark; }
.input {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15, 23, 42, .78);
  padding: .78rem .95rem;
  color: rgb(241 245 249);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input:focus { border-color: rgba(96,165,250,.85); box-shadow: 0 0 0 4px rgba(59,130,246,.16); background: rgba(15, 23, 42, .95); }
.input::placeholder { color: rgb(100 116 139); }
.label { display: block; margin-bottom: .35rem; font-size: .875rem; color: rgb(203 213 225); }
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 1rem; padding: .72rem 1rem; font-weight: 800; font-size: .92rem;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary { background: linear-gradient(135deg, rgb(37 99 235), rgb(124 58 237)); color: white; }
.btn-secondary { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgb(226 232 240); }
.btn-danger { border: 1px solid rgba(248,113,113,.25); background: rgba(127,29,29,.55); color: rgb(254 226 226); }
.btn-ghost { background: transparent; color: rgb(203 213 225); }
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover, .btn-ghost:hover { transform: translateY(-1px); opacity: .95; }
.modal { width: min(96vw, 980px); border: 0; padding: 0; background: transparent; color: white; }
.modal::backdrop { background: rgba(2, 6, 23, .74); backdrop-filter: blur(8px); }
.modal-card { border: 1px solid rgba(255,255,255,.12); border-radius: 1.5rem; background: rgba(15, 23, 42, .97); padding: 1.25rem; box-shadow: 0 24px 90px rgba(0,0,0,.45); }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; max-width: 26rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.12); background: rgba(15, 23, 42, .95); padding: .85rem 1rem; box-shadow: 0 24px 80px rgba(0,0,0,.35); color: rgb(226 232 240); }
.card-enter { animation: card-enter .24s ease both; }
@keyframes card-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
mark { border-radius: .3rem; background: rgba(250, 204, 21, .22); color: rgb(254 249 195); padding: 0 .15rem; }


/* PWA / fullscreen finomhangolás */
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); }
body { padding-top: var(--safe-top); padding-right: var(--safe-right); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); }
@media (display-mode: fullscreen), (display-mode: standalone) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(147,197,253,.08);
    z-index: 80;
  }
}
.pwa-offline-badge {
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + var(--safe-bottom));
  z-index: 50;
  border-radius: 999px;
  border: 1px solid rgba(250,204,21,.28);
  background: rgba(113,63,18,.78);
  color: rgb(254 249 195);
  padding: .55rem .8rem;
  font-size: .78rem;
  font-weight: 800;
  box-shadow: 0 20px 70px rgba(0,0,0,.28);
}