:root{
  --ink:#17202a;
  --muted:#64707d;
  --line:#d9dee5;
  --paper:#ffffff;
  --soft:#f4f6f8;
  --accent:#2f6f5e;
  --danger:#a33a3a;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--soft);line-height:1.5}
.container{width:min(1120px,calc(100% - 32px));margin:auto}
.site-header{background:var(--ink);color:#fff}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:15px 0}
.brand{color:#fff;text-decoration:none;font-size:20px;font-weight:700}
nav{display:flex;gap:16px;flex-wrap:wrap}
nav a{color:#fff;text-decoration:none;font-size:14px}
main{padding:34px 0 60px;min-height:calc(100vh - 135px)}
.site-footer{background:#fff;border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:13px}
.hero{background:var(--paper);border:1px solid var(--line);padding:40px;border-radius:12px}
.hero h1{margin-top:0;font-size:38px;line-height:1.15}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn,button{display:inline-block;border:0;border-radius:7px;padding:10px 16px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;cursor:pointer}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.danger,button.danger{background:var(--danger)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px}
.card h2,.card h3{margin-top:0}
form.panel,.panel{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:24px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
label{display:block;font-weight:700;font-size:13px;margin-bottom:5px}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit}
textarea{min-height:110px;resize:vertical}
.full{grid-column:1/-1}
.flash{padding:12px 14px;margin-bottom:16px;border-radius:7px}
.flash.success{background:#e5f4ea;color:#1f6136}
.flash.error{background:#fae8e8;color:#8c2828}
.flash.info{background:#e9f0fa;color:#264e82}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px}
th{background:#eef1f4}
.badge{display:inline-block;border-radius:999px;padding:3px 9px;font-size:12px;background:#e8edf2}
.badge.active,.badge.approved,.badge.sent{background:#dff2e5;color:#216337}
.badge.blocked,.badge.rejected,.badge.suspended{background:#fae1e1;color:#922e2e}
.badge.pending,.badge.new,.badge.reviewing{background:#fff1cc;color:#795b00}
.muted{color:var(--muted)}
.inline-form{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.inline-form input,.inline-form select{width:auto;min-width:130px}
.admin-nav{background:#24313d}
.kpi{font-size:30px;font-weight:700}
@media(max-width:760px){
  .nav-wrap{align-items:flex-start;flex-direction:column}
  .form-grid{grid-template-columns:1fr}
  .hero{padding:25px}
  .hero h1{font-size:30px}
  table{display:block;overflow-x:auto;white-space:nowrap}
}

.product-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:22px;
  margin-top:24px
}
.product-card{
  position:relative;
  min-width:0;
  min-height:520px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 2px 8px rgba(23,32,42,.05)
}
.product-card-badges{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  pointer-events:none
}
.product-new-badge,
.product-featured-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  box-shadow:0 2px 6px rgba(23,32,42,.12)
}
.product-new-badge{
  background:#57a8c2;
  color:#fff
}
.product-featured-badge{
  margin-left:auto;
  background:#e8edf2;
  color:#24313d
}
.product-cover-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:230px;
  padding:18px;
  background:#fff;
  border-bottom:1px solid var(--line);
  text-decoration:none
}
.product-cover{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block
}
.product-cover-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--line);
  border-radius:8px;
  background:#f7f8fa;
  color:var(--muted);
  font-size:24px;
  font-weight:800
}
.product-card-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  flex:1
}
.product-card-body h2{
  min-height:58px;
  margin:0 0 10px;
  font-size:20px;
  line-height:1.35
}
.product-card-description{
  min-height:66px;
  margin:0 0 14px;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.product-card-meta{
  font-size:14px
}
.product-card-meta p{
  margin:8px 0
}
.product-card-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:9px
}
.product-card-actions .btn{
  width:100%;
  text-align:center
}
.product-detail{
  display:grid;
  grid-template-columns:minmax(260px,420px) 1fr;
  gap:32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px
}
.product-detail-cover{
  width:100%;
  max-height:430px;
  object-fit:contain;
  border-radius:8px;
  background:#f5f6f7
}
.lead{font-size:18px;color:var(--muted)}
.duration-pills{display:flex;flex-wrap:wrap;gap:8px}
.duration-pills span{
  padding:7px 11px;
  border-radius:999px;
  background:#e9f2ef;
  color:#24594d;
  font-size:13px;
  font-weight:700
}
.screenshot-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px
}
.screenshot-gallery img{
  width:100%;
  height:190px;
  object-fit:contain;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff
}
.screenshot-admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-bottom:24px
}
.screenshot-admin-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px
}
.screenshot-admin-item img{
  width:100%;
  height:150px;
  object-fit:contain;
  border-radius:6px;
  margin-bottom:8px;
  background:#fff
}
.product-image-row{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap
}
.product-thumb{
  width:160px;
  height:100px;
  object-fit:contain;
  border-radius:6px;
  border:1px solid var(--line);
  background:#fff
}
.duration-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px
}
.duration-option{
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  align-items:center
}
.duration-option span,
.duration-option input[type=number]{
  grid-column:1/-1
}
.duration-option input[type=number]{
  width:100%
}
.option-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap
}
.option-row label{
  display:flex;
  align-items:center;
  gap:7px
}

@media(max-width:760px){
  .product-card-grid{grid-template-columns:1fr}
  .product-card{min-height:0}
  .product-cover-link{height:210px}
  .product-detail{grid-template-columns:1fr}
}

/* Felugró termékképgaléria */
.product-cover-button,
.screenshot-button{
  position:relative;
  width:100%;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  cursor:zoom-in;
  overflow:hidden
}
.product-cover-button:hover,
.screenshot-button:hover{
  transform:none;
  box-shadow:none
}
.product-cover-button:focus-visible,
.screenshot-button:focus-visible{
  outline:3px solid rgba(44,123,104,.35);
  outline-offset:3px
}
.image-zoom-hint{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(17,24,39,.78);
  color:#fff;
  font-size:12px;
  font-weight:700;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease
}
.product-cover-button:hover .image-zoom-hint,
.product-cover-button:focus-visible .image-zoom-hint,
.screenshot-button:hover .image-zoom-hint,
.screenshot-button:focus-visible .image-zoom-hint{
  opacity:1;
  transform:translateY(0)
}
.screenshot-card{
  margin:0;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff
}
.screenshot-card img{
  width:100%;
  height:210px;
  object-fit:contain;
  display:block;
  background:#fff
}
.screenshot-card figcaption{
  min-height:54px;
  padding:11px 13px;
  border-top:1px solid var(--line);
  color:#465463;
  font-size:14px;
  line-height:1.45
}
body.lightbox-open{
  overflow:hidden
}
.image-lightbox[hidden]{
  display:none
}
.image-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  transition:opacity .16s ease
}
.image-lightbox.is-open{
  opacity:1
}
.image-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,12,18,.88);
  cursor:zoom-out
}
.image-lightbox-panel{
  position:relative;
  z-index:1;
  width:min(1180px,100%);
  height:min(88vh,860px);
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 58px;
  align-items:center;
  gap:12px
}
.image-lightbox-content{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  background:#111820;
  box-shadow:0 22px 80px rgba(0,0,0,.5)
}
.image-lightbox-content img{
  width:100%;
  min-height:0;
  flex:1;
  object-fit:contain;
  display:block
}
.image-lightbox-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  min-height:58px;
  padding:12px 16px;
  background:#fff
}
.image-lightbox-caption{
  color:#263340;
  line-height:1.45;
  white-space:pre-wrap
}
.image-lightbox-counter{
  flex:none;
  color:var(--muted);
  font-weight:700
}
.image-lightbox-close,
.image-lightbox-nav{
  border:0;
  color:#fff;
  background:rgba(255,255,255,.13);
  box-shadow:none
}
.image-lightbox-close:hover,
.image-lightbox-nav:hover{
  background:rgba(255,255,255,.24);
  transform:none;
  box-shadow:none
}
.image-lightbox-close{
  position:absolute;
  top:-8px;
  right:-8px;
  z-index:3;
  width:44px;
  height:44px;
  padding:0;
  border-radius:50%;
  font-size:30px;
  line-height:1
}
.image-lightbox-nav{
  width:52px;
  height:72px;
  padding:0;
  border-radius:10px;
  font-size:46px;
  line-height:1
}

/* Képernyőfotók adminisztrátori sorrendezése */
.admin-page-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap
}
.screenshot-sort-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px
}
.screenshot-sort-item{
  min-width:0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  transition:opacity .12s ease,box-shadow .12s ease
}
.screenshot-sort-item.is-dragging{
  opacity:.45;
  box-shadow:0 12px 30px rgba(17,24,39,.18)
}
.screenshot-sort-toolbar{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px
}
.screenshot-drag-handle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:7px;
  background:#eef2f4;
  color:#586674;
  font-size:20px;
  cursor:grab;
  user-select:none
}
.screenshot-drag-handle:active{
  cursor:grabbing
}
.screenshot-position{
  font-weight:800
}
.screenshot-move-buttons{
  display:flex;
  gap:5px;
  margin-left:auto
}
.screenshot-move-buttons button{
  width:36px;
  height:34px;
  padding:0
}
.screenshot-sort-item > img{
  width:100%;
  height:190px;
  object-fit:contain;
  display:block;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff
}
.screenshot-sort-item label{
  display:block;
  margin-bottom:12px
}
.screenshot-sort-item textarea{
  min-height:86px
}

@media(max-width:760px){
  .image-lightbox{
    padding:10px
  }
  .image-lightbox-panel{
    height:94vh;
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:5px
  }
  .image-lightbox-nav{
    width:40px;
    height:58px;
    font-size:38px
  }
  .image-lightbox-close{
    top:5px;
    right:5px
  }
  .image-lightbox-footer{
    min-height:68px;
    padding:10px 12px
  }
  .screenshot-sort-grid{
    grid-template-columns:1fr
  }
}



.product-owned-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:5px 12px;
  border-radius:999px;
  background:#dff2e8;
  color:#17613f;
  font-size:12px;
  font-weight:800;
  box-shadow:0 2px 6px rgba(23,32,42,.1)
}
.product-disabled-action{
  cursor:default;
  opacity:.76;
  user-select:none
}


.product-coming-soon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:5px 12px;
  border-radius:999px;
  background:#f2d58a;
  color:#614800;
  font-size:12px;
  font-weight:800;
  box-shadow:0 2px 6px rgba(23,32,42,.1)
}
.product-coming-soon-info{
  margin:12px 0;
  padding:11px 13px;
  border:1px solid #ead28e;
  border-radius:9px;
  background:#fff8df;
  color:#604a08;
  font-size:14px;
  line-height:1.45
}