/* PrintHub – frontend (Printables-inspired) */
.printhub {
  --ph-accent: #fa6831;
  --ph-cols: 4;
  --ph-ratio: 4/3;
  --ph-radius: 12px;
  --ph-border: rgba(0, 0, 0, .1);
  --ph-muted: #6b7280;
  --ph-surface: #fff;
  --ph-bg-soft: #f5f5f7;
  --ph-text: inherit;
  color: var(--ph-text);
}

/* Dark mode for any Bootstrap 5.3 template using data-bs-theme="dark".
   Templates can override the --ph-* variables; a sticky header sets --ph-sticky-offset. */
[data-bs-theme="dark"] .printhub {
  --ph-border: rgba(255, 255, 255, .1);
  --ph-muted: #9b9da6;
  --ph-surface: #1e1f23;
  --ph-bg-soft: #27282d;
  --ph-border-strong: #4a4c54;
}

.printhub *,
.printhub *::before,
.printhub *::after {
  box-sizing: border-box;
}

.ph-muted { color: var(--ph-muted); }

/* ---------- buttons & pills ---------- */
.ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: var(--ph-bg-soft);
  border: 1px solid var(--ph-border);
  border-radius: 999px;
  transition: filter .15s, background .15s;
}

.ph-btn:hover { filter: brightness(.95); }
.ph-btn:disabled { cursor: not-allowed; opacity: .6; }
.ph-btn--primary { color: #fff; background: var(--ph-accent); border-color: var(--ph-accent); }
.ph-btn--block { width: 100%; margin-bottom: .6rem; }
.ph-btn--small { padding: .35rem .8rem; font-size: .85rem; }
.ph-btn.is-liked { color: var(--ph-accent); border-color: var(--ph-accent); }

.ph-pill {
  padding: .4rem .9rem;
  font-size: .9rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--ph-border);
  border-radius: 999px;
}

.ph-pill.is-active {
  color: #fff;
  background: var(--ph-accent);
  border-color: var(--ph-accent);
}

/* ---------- icons (pure CSS masks, no icon font needed) ---------- */
.ph-ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--ph-icon) center / contain no-repeat;
  mask: var(--ph-icon) center / contain no-repeat;
}

.ph-ico--heart { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.2C.3 8.4 2.3 4 6.3 4c2.2 0 3.7 1.2 4.7 2.6C12 5.2 13.5 4 15.7 4c4 0 6 4.4 4.3 7.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }
.ph-ico--download { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.6l3.3-3.3 1.4 1.4L12 16.4l-5.7-5.7 1.4-1.4 3.3 3.3zM4 18h16v2H4z'/%3E%3C/svg%3E"); }
.ph-ico--make { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4 7.2 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-3.2L15 4zm3 4.5A4.5 4.5 0 1 1 7.5 13 4.5 4.5 0 0 1 12 8.5z'/%3E%3C/svg%3E"); }

/* ---------- browse ---------- */
.ph-browse__title { margin-bottom: 1rem; }

.ph-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.ph-search {
  display: flex;
  flex: 1 1 320px;
  gap: .5rem;
  max-width: 560px;
}

.ph-search input {
  flex: 1;
  min-width: 0;
  padding: .6rem 1rem;
  color: inherit;
  background: var(--ph-surface);
  border: 1px solid var(--ph-border);
  border-radius: 999px;
}

.ph-sort { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; max-width: 100%; }

.ph-layout { display: block; }

.ph-layout.has-sidebar {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2rem;
}

.ph-sidebar__title { margin: 0 0 .75rem; font-size: 1rem; }
.ph-catlist { padding: 0; margin: 0; list-style: none; }
.ph-catlist a { display: block; padding: .3rem .6rem; color: inherit; text-decoration: none; border-radius: 8px; }
.ph-catlist a:hover { background: var(--ph-bg-soft); }
.ph-catlist a.is-active { font-weight: 600; color: var(--ph-accent); background: var(--ph-bg-soft); }
.ph-catlist__lvl2 a { padding-left: 1.4rem; }
.ph-catlist__lvl3 a { padding-left: 2.2rem; }

.ph-grid {
  display: grid;
  grid-template-columns: repeat(var(--ph-cols), minmax(0, 1fr));
  gap: 1.25rem;
}

.ph-grid--small { --ph-cols: 5; }

.ph-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--ph-surface);
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius);
  transition: transform .15s, box-shadow .15s;
}

.ph-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
}

.ph-card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--ph-ratio);
  overflow: hidden;
  background: var(--ph-media-bg, var(--ph-bg-soft));
}

.ph-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph-card__noimg {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ph-media-text, var(--ph-muted));
}

.ph-badge {
  position: absolute;
  top: .6rem;
  left: .6rem;
  padding: .2rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  background: var(--ph-accent);
  border-radius: 999px;
}

.ph-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .5rem;
  padding: .8rem .9rem;
}

.ph-card__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.ph-card__title a { color: inherit; text-decoration: none; }
.ph-card__title a:hover { color: var(--ph-accent); }

.ph-author {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .875rem;
}

.ph-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: var(--ph-accent);
  border-radius: 50%;
}

.ph-stats {
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: auto 0 0;
  font-size: .85rem;
  color: var(--ph-muted);
  list-style: none;
}

.ph-stats li { display: inline-flex; gap: .3rem; align-items: center; }

.ph-pagination { margin-top: 2rem; }
.ph-empty { padding: 3rem 1rem; color: var(--ph-muted); text-align: center; }

/* ---------- detail ---------- */
.ph-detail__head { margin-bottom: 1.25rem; }
.ph-detail__cat { font-size: .875rem; font-weight: 600; color: var(--ph-accent); text-decoration: none; text-transform: uppercase; letter-spacing: .03em; }
.ph-detail__title { margin: .25rem 0 .5rem; }

.ph-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
}

.ph-gallery__main {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--ph-media-bg, var(--ph-bg-soft));
  border-radius: var(--ph-radius);
}

.ph-gallery__main img { width: 100%; height: 100%; object-fit: contain; }

.ph-gallery__thumbs {
  display: flex;
  gap: .5rem;
  padding: 0;
  margin: .75rem 0 0;
  overflow-x: auto;
  list-style: none;
}

.ph-thumb {
  width: 80px;
  height: 60px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
}

.ph-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph-thumb.is-active { border-color: var(--ph-accent); }

.ph-detail__side { position: sticky; top: calc(var(--ph-sticky-offset, 0px) + 1rem); }

.ph-stats--box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin: .5rem 0 1rem;
}

.ph-stats--box li {
  flex-direction: column;
  padding: .6rem;
  background: var(--ph-bg-soft);
  border-radius: 8px;
}

.ph-stats--box strong { font-size: 1.25rem; color: var(--ph-text); }

.ph-box {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius);
}

.ph-box__title { margin: 0 0 .5rem; font-size: 1rem; }
.ph-box p { margin: 0 0 .5rem; }

.ph-flags { padding: 0; margin: 0; font-size: .85rem; list-style: none; }
.ph-flags li::before { margin-right: .4rem; font-weight: 700; }
.ph-flags .is-yes::before { color: #16a34a; content: "\2713"; }
.ph-flags .is-no::before { color: #dc2626; content: "\2717"; }

.ph-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1rem;
  margin: 0;
  font-size: .9rem;
}

.ph-specs dt { color: var(--ph-muted); font-weight: 400; }
.ph-specs dd { margin: 0; font-weight: 600; text-align: right; }

.ph-tabs {
  position: sticky;
  top: var(--ph-sticky-offset, 0px);
  z-index: 2;
  display: flex;
  gap: 1.5rem;
  padding: .75rem 0;
  margin: 2rem 0 1rem;
  overflow-x: auto;
  background: var(--ph-page-bg, var(--ph-surface));
  border-bottom: 1px solid var(--ph-border);
}

.ph-tabs a { font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; }
.ph-tabs a:hover { color: var(--ph-accent); }

.ph-section { padding: 1rem 0 2rem; scroll-margin-top: calc(var(--ph-sticky-offset, 0px) + 4rem); }
.ph-lead { font-size: 1.1rem; }

.ph-files { padding: 0; margin: 0; list-style: none; }

.ph-files li {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--ph-border);
}

.ph-files__ext {
  flex: none;
  min-width: 3.5rem;
  padding: .25rem .4rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ph-accent);
  text-align: center;
  background: var(--ph-bg-soft);
  border-radius: 6px;
}

.ph-files__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* File list with picture per file (Thingiverse style) */
.ph-files__all { margin: 0 0 1rem; }
.ph-files__all .ph-muted { color: inherit; opacity: .85; font-size: .85em; }
.ph-files--cards li { gap: 1.25rem; padding: 1rem 0; }
.ph-files__pic {
  flex: none;
  display: grid;
  place-items: center;
  width: 160px;
  height: 120px;
  overflow: hidden;
  border-radius: .5rem;
  background: var(--ph-media-bg, #e9e9ec);
  color: var(--ph-media-text, #555);
}
.ph-files__pic img { width: 100%; height: 100%; object-fit: cover; }
.ph-files__pic .ph-files__ext { font-size: 1.1rem; background: none; border: 0; }
.ph-files__body { flex: 1; min-width: 0; display: grid; gap: .5rem; }
.ph-files__body .ph-files__name { flex: none; font-weight: 700; }
.ph-files__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin: 0; }
.ph-files__meta div { display: grid; }
.ph-files__meta dt { font-size: .8rem; opacity: .7; }
.ph-files__meta dd { margin: 0; }
.ph-files__actions { flex: none; display: flex; gap: .5rem; align-items: center; }
@media (max-width: 640px) {
  .ph-files--cards li { flex-wrap: wrap; }
  .ph-files__pic { width: 100%; height: 160px; }
  .ph-files__body { flex-basis: 100%; }
}

.ph-comment { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--ph-border); }
.ph-comment__meta { margin-bottom: .25rem; font-size: .9rem; }

.ph-comment-form { display: grid; gap: .5rem; margin-top: 1rem; }

.ph-comment-form textarea {
  width: 100%;
  padding: .75rem;
  color: inherit;
  background: var(--ph-surface);
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius);
}

.ph-comment-form .ph-btn { justify-self: start; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ph-grid { --ph-cols: 3; }
  .ph-grid--small { --ph-cols: 4; }
}

@media (max-width: 860px) {
  .ph-layout.has-sidebar,
  .ph-detail__grid { grid-template-columns: minmax(0, 1fr); }
  .ph-detail__side { position: static; }
  .ph-grid { --ph-cols: 2; }
  .ph-grid--small { --ph-cols: 3; }
}

@media (max-width: 480px) {
  .ph-sort { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ph-pill { flex: none; }
  .ph-grid { gap: .75rem; }
  .ph-grid--small { --ph-cols: 2; }
}

/* Phones: models one below the other, full width (0.9.1) */
@media (max-width: 600px) {
  .ph-grid,
  .ph-grid--small,
  .ph-grid--collections { --ph-cols: 1; }
  .ph-grid { gap: 1rem; }
}

/* ---------- ratings (0.4.0) ---------- */
.ph-stars {
  position: relative;
  display: inline-block;
  width: max-content;
  align-self: flex-start;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 2px;
  vertical-align: -1px;
}

.ph-stars::before { color: var(--ph-border-strong, #c8c9ce); content: "\2605\2605\2605\2605\2605"; }

.ph-stars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  white-space: nowrap;
}

.ph-stars__fill::before { color: var(--ph-star, #ffb400); content: "\2605\2605\2605\2605\2605"; }

.ph-star { color: var(--ph-star, #ffb400); }
.ph-stats__rating { font-weight: 600; color: inherit; }

.ph-rating-box {
  display: flex;
  gap: .75rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.ph-rating-box:hover { border-color: var(--ph-accent); }
.ph-rating-box > span:last-child { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.ph-rating-box__avg { font-size: 2rem; font-weight: 800; line-height: 1; }

.ph-ratings {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.ph-ratings__big { font-size: 3rem; font-weight: 800; line-height: 1; }
.ph-ratings__summary .ph-stars { margin: .4rem 0; font-size: 1.25rem; }

.ph-dist { padding: 0; margin: 1rem 0 0; list-style: none; }

.ph-dist li {
  display: grid;
  grid-template-columns: 2.4rem 1fr 3rem;
  gap: .5rem;
  align-items: center;
  margin-bottom: .3rem;
  font-size: .85rem;
}

.ph-dist__bar { height: .5rem; overflow: hidden; background: var(--ph-bg-soft); border-radius: 999px; }
.ph-dist__bar > span { display: block; height: 100%; background: var(--ph-star, #ffb400); border-radius: 999px; }
.ph-dist__pct { color: var(--ph-muted); text-align: right; }

.ph-ratings__form {
  padding: 1.25rem;
  background: var(--ph-surface);
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius);
}

.ph-own-rating {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-bottom: .75rem;
}

.ph-inline-form { display: inline; margin: 0; }

.ph-linkbtn {
  padding: 0;
  font: inherit;
  font-size: .85rem;
  color: var(--ph-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}

.ph-linkbtn:hover { color: var(--ph-accent); }

.ph-badge-inline {
  padding: .1rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ph-muted);
  background: var(--ph-bg-soft);
  border-radius: 999px;
}

.ph-rate > summary { margin-bottom: .75rem; font-weight: 600; cursor: pointer; }
.ph-rate__form { display: grid; gap: .6rem; }
.ph-label { font-weight: 600; }
.ph-small { margin: 0; font-size: .8rem; }

.ph-rate__form textarea {
  width: 100%;
  padding: .75rem;
  color: inherit;
  background: var(--ph-page-bg, var(--ph-surface));
  border: 1px solid var(--ph-border);
  border-radius: 8px;
}

.ph-rate__form .ph-btn { justify-self: start; }

/* star input: radios in order 5..1, shown 1..5 thanks to row-reverse */
.ph-star-input { padding: 0; margin: 0; border: 0; }
.ph-star-input legend { float: none; margin-bottom: .25rem; font-size: 1rem; font-weight: 600; }

.ph-star-input__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: .15rem;
}

.ph-star-input__stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ph-star-input__stars label {
  font-size: 2rem;
  line-height: 1;
  color: var(--ph-border-strong, #c8c9ce);
  cursor: pointer;
  transition: color .1s, transform .1s;
}

.ph-star-input__stars input:checked ~ label,
.ph-star-input__stars label:hover,
.ph-star-input__stars label:hover ~ label { color: var(--ph-star, #ffb400); }

.ph-star-input__stars label:hover { transform: scale(1.12); }

.ph-star-input__stars input:focus-visible + label {
  outline: 2px solid var(--ph-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.ph-privacy { font-size: .85rem; }
.ph-privacy__info { margin: 0 0 .4rem; color: var(--ph-muted); }
.ph-check { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.ph-check input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--ph-accent); }
.ph-privacy a { color: var(--ph-accent); }

.ph-reviews { padding: 0; margin: 0; list-style: none; }
.ph-review { display: flex; gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--ph-border); }
.ph-review__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .3rem; font-size: .9rem; }
.ph-review__body { overflow-wrap: anywhere; }

.ph-comment-form .ph-privacy { margin-top: .25rem; }

@media (max-width: 860px) {
  .ph-ratings { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- 0.5.0: 3D viewer ---------- */
.ph-gallery__main { position: relative; }

.ph-viewer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ph-media-bg, var(--ph-bg-soft));
}

.ph-viewer[hidden] { display: none; }
.ph-viewer__canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.ph-viewer__canvas:active { cursor: grabbing; }
.ph-viewer__canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--ph-accent); }

.ph-viewer__status {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: .5rem 1rem;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.ph-viewer__status[hidden], .ph-viewer__status:empty { display: none; }

.ph-viewer__hint {
  position: absolute;
  bottom: .6rem;
  left: .8rem;
  margin: 0;
  font-size: .75rem;
  color: #4a4c54;
}

.ph-viewer__tools { position: absolute; top: .6rem; right: .6rem; display: flex; gap: .4rem; }
.ph-viewer__tools .ph-btn,
.ph-viewer__open { color: #1d1e22; background: rgba(255, 255, 255, .9); border-color: rgba(0, 0, 0, .1); }

.ph-viewer__open {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
}

.ph-viewer__open[hidden] { display: none; }

/* ---------- 0.7.0: slider with 3D files, PDF below "Files" ---------- */
.ph-thumb { position: relative; flex: none; background: var(--ph-media-bg, var(--ph-bg-soft)); }
.ph-thumb--3d { display: grid; place-items: center; }
.ph-thumb__badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 0 .35rem;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: var(--ph-accent);
  border-radius: 4px;
}

/* ---------- shared bits ---------- */
.ph-author__link { color: inherit; font-weight: 600; text-decoration: none; }
.ph-author__link:hover { color: var(--ph-accent); }
.ph-edit { margin-left: auto; }
.ph-notice { padding: .6rem 1rem; margin: 0 0 .75rem; background: color-mix(in srgb, var(--ph-accent) 15%, transparent); border-left: 3px solid var(--ph-accent); border-radius: 6px; }
.ph-badge--muted { color: #fff; background: #6b6e78; }
.ph-card.is-unpublished .ph-card__media img { opacity: .55; }
.ph-card__tools { display: flex; gap: .5rem; align-items: center; margin-top: .25rem; }
.ph-card--make, .ph-card--collection { color: inherit; text-decoration: none; }
.ph-card--make .ph-card__body, .ph-card--collection .ph-card__body { display: flex; flex-direction: column; gap: .2rem; }
.ph-grid--collections { --ph-cols: 4; }
.ph-danger { margin-top: 2rem; }
.ph-danger .ph-linkbtn { color: #d9534f; }

/* ---------- upload form ---------- */
.ph-upload h1 { margin-bottom: .25rem; }

.ph-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

.ph-form__side { position: sticky; top: calc(var(--ph-sticky-offset, 0px) + 1rem); }
.ph-form .ph-box { padding: 1.25rem; background: var(--ph-surface); }
.ph-form .control-group { margin-bottom: 1rem; }
.ph-form .control-label label { font-weight: 600; }
.ph-form__actions { display: grid; gap: .5rem; margin-top: 1rem; }
.ph-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.ph-drop {
  display: grid;
  gap: .35rem;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--ph-border);
  border-radius: var(--ph-radius);
  transition: border-color .15s, background .15s;
}

.ph-drop:hover, .ph-drop:focus-within { background: var(--ph-bg-soft); border-color: var(--ph-accent); }
.ph-drop__title { font-weight: 700; }
.ph-drop input[type=file] { justify-self: center; max-width: 100%; }
.ph-drop__list { font-size: .85rem; overflow-wrap: anywhere; }

.ph-filelist, .ph-imagelist { padding: 0; margin: 0 0 1rem; list-style: none; }
.ph-filelist li { display: flex; gap: .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--ph-border); }
.ph-imagelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.ph-imagelist li { position: relative; display: grid; gap: .3rem; }
.ph-imagelist img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; background: var(--ph-media-bg, var(--ph-bg-soft)); }
.ph-imagelist .ph-badge-inline { position: absolute; top: .3rem; left: .3rem; }
.ph-check--remove { font-size: .85rem; color: var(--ph-muted); }

/* ---------- makes / collections boxes ---------- */
.ph-make-form { margin-top: 1.25rem; padding: 1.25rem; background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); }
.ph-make-form input[type=text], .ph-make-form textarea, .ph-make-form select { width: 100%; }

.ph-collect > summary { font-weight: 600; cursor: pointer; }
.ph-collect__in { padding: 0; margin: .75rem 0; list-style: none; }
.ph-collect__in li { display: flex; justify-content: space-between; align-items: center; padding: .25rem 0; }
.ph-collect__in form { margin: 0; }
.ph-collect__form { display: grid; gap: .4rem; margin-top: .75rem; }
.ph-collect__form .ph-btn { justify-self: start; }

/* ---------- profile ---------- */
.ph-profile__head { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.ph-profile__who h1 { margin: 0; }
.ph-profile__who p { margin: .2rem 0 0; }
.ph-profile__head .ph-btn { margin-left: auto; }
.ph-avatar--xl { width: 5rem; height: 5rem; font-size: 2.2rem; }

.ph-profile__stats {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}

.ph-profile__stats li {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--ph-muted);
  background: var(--ph-surface);
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius);
}

.ph-profile__stats strong { font-size: 1.4rem; color: var(--ph-text); }

.ph-collection__head { margin-bottom: 1.5rem; }
.ph-collection__head h1 { margin: .2rem 0; }

@media (max-width: 860px) {
  .ph-form__grid { grid-template-columns: minmax(0, 1fr); }
  .ph-form__side { position: static; }
}