/* 📚 Instructaj – stiluri specifice paginii (completează kitul global) */

:root{ --instructaj-maxw: 980px; }

.container{ max-width: var(--instructaj-maxw); margin:16px auto; padding:0 16px; }
.toolbar{ display:flex; gap:10px; justify-content:flex-end; }
.btn{ border:none; cursor:pointer; font-weight:800; letter-spacing:.2px; padding:10px 14px; border-radius:12px; }
.btn-primary{ color:#fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow-md); }
.btn-primary:active{ transform: translateY(1px); }
.btn-ghost{ text-decoration:none; color:#fff; background:#2c3e50; transition: background .2s; box-shadow: var(--shadow-md); }
.btn-ghost:hover{ background:#34495e; }

.wrap{ min-height:calc(100dvh - 140px); padding:16px; display:grid; place-items:center; }
.sheet{ width:100%; max-width: var(--instructaj-maxw); }

.doc-header{
  display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius: var(--r-in);
  background: linear-gradient(180deg, rgba(59,130,246,.06), rgba(59,130,246,.03));
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); margin-bottom:22px;
}
.badge{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background: var(--card); border:1px solid var(--glass-border) }
.title{ margin:0; font-weight:900; letter-spacing:.2px; line-height:1.15; font-size: clamp(20px, 2.4vw, 28px) }
.subtitle{ margin:2px 0 0; color: var(--muted); font-weight:600; font-size: 14px }

section{ padding:16px 0 8px }
section + section{ border-top:1px dashed var(--glass-border) }
h2{ margin:0 0 10px; font-size: clamp(18px,2.1vw,22px); display:flex; align-items:center; gap:8px; font-weight:900 }
h2 .dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.15) }
p{ margin:6px 0 }

ul.clean{ list-style:none; margin:0; padding:0 }
ul.clean li{ position:relative; padding:1px 0 1px 22px; margin:1px 0 }
ul.clean li::before{
  content:""; width:6px; height:6px; border-radius:50%; position:absolute; left:8px; top:0.9em; transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, #fff, #fff 40%, transparent 41%), linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 1.5px rgba(59,130,246,.15);
}
ul.clean ul.clean{ margin-top:2px; margin-left:12px }

.media{ margin-top:12px; max-width:100%; border-radius:10px; display:block }

.doc-footer{ margin-top:18px; color: var(--muted); font-size:13px; text-align:center }

@media print{
  .toolbar{ display:none !important; }
  .wrap{ padding:0 }
  .sheet{ box-shadow:none; border:1px solid #ddd; border-radius:0; max-width:none }
  .doc-header{ background:#fff; border-color:#ddd }
  h2 .dot{ box-shadow:none }
}