body{margin:0;font:16px/1.5 system-ui;background:linear-gradient(180deg,#FFB6C1,#ADD8E6)}
.site-header{padding:12px;background:#fff;border-bottom:1px solid #ddd;text-align:center;font-weight:bold}
.viewer-wrap{position:relative}

/* stil comun */
.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:1px solid #aaa;background:#fff9;
  font-size:20px;cursor:pointer;z-index:5
}
/* Center everything in hero sections */
.hero {
  text-align: center;
  padding: 3rem 1rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Titles atractive */
.hero h1 {
  font-family: 'Pacifico', cursive;
  font-size: 2.5rem;
  color: #222;
  margin-bottom: 1rem;
  letter-spacing: 1px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* Paragraphs */
.hero p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #444;
}

/* Center footer text as well */
.site-footer {
  text-align: center;
  padding: 2rem 1rem;
  background: #111;
  color: #eee;
  font-family: 'Roboto', sans-serif;
}
.site-footer a {
  color: #90cdf4;
  text-decoration: none;
}
/* potrivire pe id pentru ambele secțiuni */
[id^="prev-"]{left:12px}
[id^="next-"]{right:12px}

/* opțional: hover/focus pentru vizibilitate */
.nav-btn:hover{background:#fff}
.nav-btn:focus{outline:2px solid #000}
.viewer-section{max-width:1100px;margin:20px auto;padding:16px}
.viewer-wrap{position:relative;border-radius:12px;overflow:hidden;border:1px solid #ddd;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,0.1)}
.viewer-canvas{width:100%;height:clamp(420px,60vh,700px);background:#ffd5e3}

.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:1px solid #aaa;background:#fff9;
  font-size:20px;cursor:pointer
}
#prev{left:12px}#next{right:12px}
.counter{position:absolute;right:12px;top:12px;background:#fff9;padding:.3rem .6rem;border-radius:.4rem;font-weight:bold}

.controls{margin-top:12px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.controls label{font-size:.9rem;background:#fff;padding:6px 10px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.05)}

.status{margin-top:10px;font-size:.9rem;color:#333}
.site-footer{text-align:center;padding:16px;background:#fff;border-top:1px solid #ddd;margin-top:30px}