/* Controlul Zonelor · servere Diamant */
.cz-page h1 { margin: 6px 0 10px; font: 800 34px/1.1 Cinzel, serif; color: #f2e6c9; }
.cz-page .lead { max-width: 820px; }
.cz-nota { margin: 10px 0 0; font: 500 12.5px/1.6 Inter, sans-serif; color: #7f879a; max-width: 820px; }

/* ceasul saptamanii */
.cz-ceas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cz-etapa { position: relative; padding: 13px 14px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cz-etapa.on { border-color: rgba(245,197,66,.5); background: rgba(245,197,66,.07); }
.cz-etapa b { display: block; font: 700 14px/1.3 Inter, sans-serif; color: #e8ecf6; }
.cz-etapa span { display: block; margin-top: 5px; font: 500 12.5px/1.5 Inter, sans-serif; color: #8d95a8; }
.cz-acum { position: absolute; top: 11px; right: 12px; font: 800 10px/1 Inter, sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: #15110a; font-style: normal;
  background: linear-gradient(#f3d98c, #cfa544); padding: 4px 8px; border-radius: 999px; }

/* filtre */
.cz-filtre { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }

/* zonele */
.cz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(372px, 100%), 1fr)); gap: 14px; }
.cz-card { padding: 15px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08); }
.cz-card header { position: relative; }
.cz-loc { position: absolute; top: 0; right: 0; font: 800 12px/1 Inter, sans-serif; color: #f5c542; }
.cz-card h3 { margin: 0; font: 800 18px/1.2 Cinzel, serif; color: #f2e6c9; }
.cz-titlu { margin: 5px 0 0; font: 500 12px/1.5 Inter, sans-serif; color: #8d95a8; }
.cz-titlu b { color: #cbd3e3; font-weight: 700; }

.cz-bonus { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 13px 0; }
.cz-bonus > div { padding: 10px 11px; border-radius: 12px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.06); }
.cz-bonus > div.mare { border-color: rgba(245,197,66,.3); background: rgba(245,197,66,.06); }
.cz-bonus u { display: block; margin-bottom: 7px; text-decoration: none;
  font: 800 10.5px/1 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #7f879a; }
.cz-bonus > div.mare u { color: #f5c542; }
.cz-b { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 0; }
.cz-b i { font-style: normal; font: 500 12px/1.4 Inter, sans-serif; color: #8d95a8; }
.cz-b b { font: 700 13px/1.4 Inter, sans-serif; color: #e8ecf6; }

.cz-harti { display: grid; gap: 9px; }
.cz-harta { padding: 10px 11px; border-radius: 12px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.055); }
.cz-harta > b { display: block; font: 700 13px/1.3 Inter, sans-serif; color: #e8ecf6; }
.cz-harta > i { display: block; margin-top: 3px; font-style: normal;
  font: 500 11.5px/1.4 Inter, sans-serif; color: #7f879a; }
.cz-mobi { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.cz-mobi u { text-decoration: none; font: 800 10px/1 Inter, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #6b7488; margin-right: 2px; }
.cz-mobi a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  text-decoration: none; font: 600 11.5px/1 Inter, sans-serif; color: #cbd3e3;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.cz-mobi a:hover { border-color: rgba(245,197,66,.45); color: #f2e6c9; }
.cz-mobi a s { text-decoration: none; font-weight: 700; color: #f5c542; font-size: 10.5px; }

/* calculator */
.cz-calc { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: start; }
.cz-bife { display: grid; gap: 8px; }
.cz-bifa { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 13px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cz-bifa:hover { border-color: rgba(245,197,66,.3); }
.cz-bifa.fix { cursor: default; opacity: .85; }
.cz-bifa input { width: 17px; height: 17px; accent-color: #f5c542; }
.cz-bifa span b { display: block; font: 700 13px/1.3 Inter, sans-serif; color: #e8ecf6; }
.cz-bifa span i { display: block; margin-top: 3px; font-style: normal;
  font: 500 11.5px/1.45 Inter, sans-serif; color: #7f879a; }
.cz-bifa em { font-style: normal; font: 800 14px/1 Inter, sans-serif; color: #f5c542; }
.cz-rezultat { padding: 18px; border-radius: 16px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,197,66,.14), transparent 70%), rgba(0,0,0,.3);
  border: 1px solid rgba(245,197,66,.28); }
.cz-mare span { display: block; font: 800 44px/1 Cinzel, serif; color: #f5c542; }
.cz-mare i { display: block; margin-top: 7px; font-style: normal;
  font: 600 12.5px/1.4 Inter, sans-serif; color: #8d95a8; }
.cz-expl { margin: 14px 0 0; font: 500 12px/1.6 Inter, sans-serif; color: #8d95a8; text-align: left; }

/* niveluri + configuratii */
.cz-niv .ob-row.col b { color: #f2e6c9; }
.cz-conf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 13px; }
.cz-conf-card { padding: 14px 15px; border-radius: 15px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cz-conf-card > b { display: block; margin-bottom: 10px; font: 700 14px/1.3 Inter, sans-serif; color: #f2e6c9; }
.cz-trepte { display: grid; gap: 7px; }
.cz-trepte > div { display: grid; grid-template-columns: 74px 1fr; gap: 9px; align-items: baseline;
  padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.25); }
.cz-trepte u { text-decoration: none; font: 800 10.5px/1.3 Inter, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: #f5c542; }
.cz-trepte span { font: 500 12px/1.45 Inter, sans-serif; color: #a9b2c4; }
.cz-conf-card > i { display: block; margin-top: 9px; font-style: normal;
  font: 500 11.5px/1.5 Inter, sans-serif; color: #7f879a; }

@media (max-width: 860px) {
  .cz-ceas { grid-template-columns: 1fr; }
  .cz-calc { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .cz-bonus { grid-template-columns: 1fr; }
  .cz-page h1 { font-size: 27px; }
}

/* .ob-row.col vine din mobs/style.css, pe care pagina asta nu-l incarca */
.cz-page .ob-row.col { flex-direction: column; align-items: flex-start; gap: 4px; padding: 11px 13px; }
.cz-page .ob-row.col b { font: 700 13.5px/1.3 Inter, sans-serif; color: #f2e6c9; }
.cz-page .ob-row.col span { white-space: normal; font: 500 12.5px/1.55 Inter, sans-serif; color: #8d95a8; }
.cz-page .ob-list { display: grid; gap: 7px; }

/* pe ecran mic bara de sus n-are loc de trei butoane - legatura ramane in meniu */
@media (max-width: 860px) { .cz-sec-btn { display: none; } }

/* misiunea saptamanala pe fisa zonei */
.cz-sapt { margin: 0 0 13px; padding: 11px 12px; border-radius: 13px;
  background: rgba(77,163,255,.07); border: 1px solid rgba(77,163,255,.22); }
.cz-sapt > u { display: block; text-decoration: none; margin-bottom: 8px;
  font: 800 10.5px/1 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #7fb8ff; }
.cz-sapt > u s { text-decoration: none; color: #4a5468; margin-left: 5px; }
.cz-pasi { display: grid; gap: 5px; }
.cz-pasi > div { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: baseline; }
.cz-pasi b { font: 800 13px/1.3 Inter, sans-serif; color: #a9dcff; }
.cz-pasi span { font: 500 12px/1.45 Inter, sans-serif; color: #a9b2c4; }
.cz-sapt > i { display: block; margin-top: 8px; font-style: normal;
  font: 500 11.5px/1.5 Inter, sans-serif; color: #7f879a; }

/* lista de misiuni */
.cz-misiuni { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 13px; }
.cz-grup { padding: 14px 15px; border-radius: 15px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cz-grup > header { margin-bottom: 11px; }
.cz-grup > header b { display: block; font: 700 14px/1.3 Inter, sans-serif; color: #f2e6c9; }
.cz-grup > header i { display: block; margin-top: 3px; font-style: normal;
  font: 500 11.5px/1.45 Inter, sans-serif; color: #7f879a; }
.cz-mis { padding: 10px 11px; border-radius: 12px; margin-bottom: 8px;
  background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.055); }
.cz-mis:last-child { margin-bottom: 0; }
.cz-mis-t { display: flex; align-items: baseline; gap: 8px; }
.cz-mis-t b { font: 700 13px/1.3 Inter, sans-serif; color: #e8ecf6; }
.cz-mis-t s { text-decoration: none; font: 800 12px/1 Inter, sans-serif; color: #f5c542; }
.cz-mis p { margin: 5px 0 8px; font: 500 11.5px/1.5 Inter, sans-serif; color: #8d95a8; }
.cz-mis-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cz-mis-r span { padding: 3px 9px; border-radius: 999px; font: 700 11px/1.4 Inter, sans-serif; }
.cz-mis-r .aexp { color: #a9dcff; background: rgba(77,163,255,.14); border: 1px solid rgba(77,163,255,.3); }
.cz-mis-r .ap { color: #f5c542; background: rgba(245,197,66,.13); border: 1px solid rgba(245,197,66,.32); }
.cz-mis-r em { font-style: normal; font: 500 11px/1.4 Inter, sans-serif; color: #6b7488; }

/* calculul de AP */
.cz-ap { display: grid; gap: 14px; }
.cz-ap-mare { padding: 18px; border-radius: 16px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,197,66,.14), transparent 70%), rgba(0,0,0,.3);
  border: 1px solid rgba(245,197,66,.28); }
.cz-ap-mare span { display: block; font: 800 46px/1 Cinzel, serif; color: #f5c542; }
.cz-ap-mare i { display: block; margin-top: 7px; font-style: normal;
  font: 600 12.5px/1.5 Inter, sans-serif; color: #8d95a8; }
.cz-ap-rupt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 9px; }
.cz-ap-rupt > div { padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cz-ap-rupt b { display: block; font: 800 16px/1.2 Inter, sans-serif; color: #e8ecf6; }
.cz-ap-rupt span { display: block; margin-top: 3px; font: 500 11.5px/1.45 Inter, sans-serif; color: #7f879a; }
.cz-membri { display: flex; flex-wrap: wrap; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 13px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cz-membri > span { font: 600 13px/1.3 Inter, sans-serif; color: #cbd3e3; }
.cz-membri input { width: 92px; padding: 8px 11px; border-radius: 10px;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14); color: #f2e6c9;
  font: 700 14px/1 Inter, sans-serif; }
.cz-membri input:focus { outline: none; border-color: rgba(245,197,66,.55); }