/* components.css — page-level components using snow token system */

.page-top { padding-top: 70px; }

/* Dropzone */
.dropzone {
  border: 2px dashed var(--ice-deep);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  background: var(--ice);
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--gold);
  background: var(--gold-light);
}
.dropzone-icon  { font-size: 36px; margin-bottom: 10px; }
.dropzone-text  { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.dropzone-hint  { font-size: 12px; color: var(--text-muted); }

/* Alert */
.alert {
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #15803d; }
.alert-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.alert-warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.alert-info    { background: var(--ice); border: 1px solid var(--ice-deep); color: var(--text-dark); }

/* Img preview box */
.img-preview-box {
  width: 160px; height: 120px;
  border: 2px dashed var(--ice-deep);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; font-size: 12px; color: var(--text-muted);
  cursor: pointer; transition: border-color 0.2s;
  overflow: hidden; position: relative;
  background: var(--ice);
}
.img-preview-box:hover { border-color: var(--gold); }
.img-preview-box img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.preview-icon  { font-size: 24px; }
.preview-label { font-size: 11px; text-align: center; line-height: 1.3; }

/* Lightbox */
.lightbox-overlay { position:fixed;inset:0;background:rgba(7,18,41,0.96);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px); }
.lightbox-overlay.open { display:flex; }
.lightbox-overlay img { max-width:90vw;max-height:90vh;border-radius:var(--radius-sm);object-fit:contain;box-shadow:var(--shadow-lg); }
.lightbox-close { position:absolute;top:20px;right:26px;color:#fff;font-size:32px;cursor:pointer;background:none;border:none;line-height:1;opacity:.7; }
.lightbox-close:hover { opacity:1; }

/* Prose */
.prose p        { margin-bottom:1.1em; line-height:1.85; color:var(--text-muted); }
.prose h2,.prose h3 { color:var(--text-dark); margin:1.5em 0 .5em; }
.prose ul       { margin:1em 0 1em 1.4em; }
.prose li       { margin-bottom:.4em; color:var(--text-muted); }
.prose strong   { color:var(--text-dark); }