.user-gallery { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--border, #e3e8ed); border-radius: 1.1rem; background: var(--surface, #fff); box-shadow: var(--shadow-soft, 0 10px 30px rgba(23,35,50,.07)); }
.user-gallery__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.user-gallery h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
.user-gallery p { margin: 0; color: var(--muted, #677282); }
.user-gallery__add, .user-gallery__login, .user-gallery__more, .user-gallery__upload button, .user-gallery__comment-form button { border: 1px solid var(--border, #d9e0e7); border-radius: 999px; background: var(--primary, #2b6f62); color: #fff; font-weight: 700; padding: .55rem .9rem; text-decoration: none; cursor: pointer; }
.user-gallery__upload { margin-top: 1rem; display: grid; gap: .75rem; padding: .85rem; border: 1px dashed var(--border, #d9e0e7); border-radius: .9rem; background: rgba(43,111,98,.06); }
.user-gallery__upload[hidden] { display: none; }
.user-gallery__upload label { display: grid; gap: .35rem; font-weight: 700; color: var(--text, #1d2735); }
.user-gallery__upload input { padding: .55rem; border: 1px solid var(--border, #d9e0e7); border-radius: .6rem; background: #fff; }
.user-gallery__form-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.user-gallery__form-actions button:last-child { background: #fff; color: var(--primary, #2b6f62); }
.user-gallery__help, .user-gallery__status, .user-gallery__empty { margin-top: .65rem; font-size: .95rem; }
.user-gallery__grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem; }
.user-gallery-card { border: 1px solid var(--border, #e3e8ed); border-radius: .95rem; overflow: hidden; background: var(--card, #fbf8f3); }
.user-gallery-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.user-gallery-card__body { padding: .65rem; display: grid; gap: .45rem; }
.user-gallery-card__caption { color: var(--text, #1d2735); overflow-wrap: anywhere; }
.user-gallery-card__meta { font-size: .85rem; color: var(--muted, #677282); }
.user-gallery-card__actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.user-gallery-card__actions button { border: 1px solid var(--border, #d9e0e7); border-radius: 999px; background: #fff; color: var(--primary, #2b6f62); padding: .4rem .65rem; font-weight: 700; cursor: pointer; }
.user-gallery-card__actions button.is-liked { background: #ffecef; color: #b4233a; border-color: #ffc7d0; }
.user-gallery-comment { border: 1px solid var(--border, #e3e8ed); border-radius: .85rem; padding: .65rem .75rem; background: rgba(43,111,98,.04); font-size: .9rem; color: var(--text, #1d2735); overflow-wrap: anywhere; }
.user-gallery-comment strong { display: block; margin-bottom: .2rem; color: var(--text, #1d2735); }
.user-gallery__comment-form { display: flex; gap: .4rem; }
.user-gallery__comment-form input { min-width: 0; flex: 1; border: 1px solid var(--border, #d9e0e7); border-radius: .6rem; padding: .45rem; }
.user-gallery__comment-form button:disabled { opacity: .65; cursor: wait; }
.user-gallery__more { margin-top: 1rem; background: #fff; color: var(--primary, #2b6f62); }
body.user-gallery-sheet-open { overflow: hidden; }
.user-gallery-sheet-backdrop { position: fixed; inset: 0; z-index: 1245; background: rgba(18, 29, 40, 0.42); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.user-gallery-sheet-backdrop--open { opacity: 1; pointer-events: auto; }
.user-gallery-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250; box-sizing: border-box; display: flex; flex-direction: column; max-height: min(78vh, calc(var(--user-gallery-viewport-height, 100vh) - 1rem)); padding: .65rem 1rem 0; border-top: 1px solid color-mix(in srgb, var(--text, #1d2735) 12%, transparent); border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; background: var(--app-surface, var(--surface, #fffdfa)); box-shadow: 0 -14px 28px color-mix(in srgb, #000 22%, transparent); transform: translateY(104%); transition: transform .25s ease, bottom .18s ease, height .18s ease, max-height .18s ease; }
.user-gallery-sheet--open { transform: translateY(0); }
body.user-gallery-keyboard-mode .user-gallery-sheet, .user-gallery-sheet.user-gallery-sheet--keyboard { top: max(env(safe-area-inset-top, 0px), .35rem); bottom: auto; height: 58vh; max-height: 58vh; padding-bottom: 0; border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
@supports (height: 100dvh) {
  body.user-gallery-keyboard-mode .user-gallery-sheet, .user-gallery-sheet.user-gallery-sheet--keyboard { height: 58dvh; max-height: 58dvh; }
}
.user-gallery-sheet__handle, .user-gallery-sheet__header, .user-gallery-sheet__photo, .user-gallery-sheet__body, .user-gallery-sheet__footer { flex-shrink: 0; }
.user-gallery-sheet__handle { width: 42px; height: 4px; margin: 0 auto .85rem; border-radius: 999px; background: color-mix(in srgb, var(--text, #1f2e3f) 16%, transparent); flex: 0 0 auto; }
.user-gallery-sheet__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex: 0 0 auto; }
.user-gallery-sheet__title { margin: 0; color: var(--text, #1f2e3f); font-size: 1.05rem; }
.user-gallery-sheet__close { border: 0; background: transparent; color: var(--muted, #667281); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 .1rem; }
.user-gallery-sheet__photo { flex: 0 0 auto; }
body.user-gallery-keyboard-mode .user-gallery-sheet__photo, .user-gallery-sheet.user-gallery-sheet--keyboard .user-gallery-sheet__photo { display: none; }
.user-gallery-sheet__photo-summary { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; padding: .55rem; border: 1px solid var(--border, #e3e8ed); border-radius: .9rem; background: rgba(43,111,98,.05); }
.user-gallery-sheet__photo-summary img { width: 54px; height: 54px; border-radius: .75rem; object-fit: cover; flex: 0 0 auto; }
.user-gallery-sheet__photo-summary p { margin: 0; color: var(--text, #1d2735); font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.user-gallery-sheet__body { flex: 1 1 auto; min-height: 0; margin-top: .85rem; padding-right: .15rem; padding-bottom: .35rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.user-gallery-sheet__footer { flex: 0 0 auto; margin: .75rem -1rem 0; padding: .65rem 1rem calc(var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)) + .75rem); background: var(--app-surface, var(--surface, #fffdfa)); border-top: 1px solid color-mix(in srgb, var(--text, #1d2735) 10%, transparent); }
body.user-gallery-keyboard-mode .user-gallery-sheet__handle, .user-gallery-sheet.user-gallery-sheet--keyboard .user-gallery-sheet__handle, body.user-gallery-keyboard-mode .user-gallery-sheet__header, .user-gallery-sheet.user-gallery-sheet--keyboard .user-gallery-sheet__header { order: 1; }
body.user-gallery-keyboard-mode .user-gallery-sheet__footer, .user-gallery-sheet.user-gallery-sheet--keyboard .user-gallery-sheet__footer { order: 2; margin-top: .65rem; margin-bottom: .65rem; padding-top: .65rem; padding-bottom: .65rem; border-top: 1px solid color-mix(in srgb, var(--text, #1d2735) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text, #1d2735) 10%, transparent); }
body.user-gallery-keyboard-mode .user-gallery-sheet__body, .user-gallery-sheet.user-gallery-sheet--keyboard .user-gallery-sheet__body { order: 3; margin-top: 0; min-height: 0; overflow-y: auto; }
.user-gallery-sheet__status, .user-gallery-sheet__empty { margin: 0; color: var(--muted, #677282); font-size: .95rem; line-height: 1.45; }
.user-gallery-sheet__comments { display: grid; gap: .55rem; }
.user-gallery-sheet__footer .user-gallery-sheet__form { position: static; margin: 0; padding: 0; background: transparent; }
.user-gallery-sheet__form { display: grid; gap: .55rem; }
body.user-gallery-keyboard-mode .user-gallery-sheet__form, .user-gallery-sheet.user-gallery-sheet--keyboard .user-gallery-sheet__form { display: grid; gap: .45rem; }
.user-gallery-sheet__form input { min-height: 48px; padding: .7rem .8rem; border-radius: .85rem; font-size: 16px; }
.user-gallery-sheet__form textarea { width: 100%; box-sizing: border-box; min-height: 54px; max-height: 96px; resize: none; overflow-y: auto; padding: .65rem .8rem; border: 1px solid var(--border, #d9e0e7); border-radius: .85rem; font-size: 16px; line-height: 1.35; font-family: inherit; background: #fff; color: var(--text, #1d2735); }
.user-gallery-sheet__form button { width: 100%; box-sizing: border-box; min-height: 46px; padding: .7rem 1.05rem; border-radius: .85rem; font-size: .98rem; }
.user-gallery-sheet__login { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--border, #d9e0e7); border-radius: 999px; background: var(--primary, #2b6f62); color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
@media (max-width: 560px) {
  .user-gallery { margin-left: -.25rem; margin-right: -.25rem; }
  .user-gallery__grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .user-gallery__comment-form, .user-gallery-sheet__form { display: grid; gap: .55rem; }
  .user-gallery__comment-form input, .user-gallery-sheet__form input, .user-gallery-sheet__form textarea { width: 100%; box-sizing: border-box; font-size: 16px; }
  .user-gallery-sheet { padding-left: .9rem; padding-right: .9rem; }
  .user-gallery-sheet__footer { margin-left: -.9rem; margin-right: -.9rem; padding-left: .9rem; padding-right: .9rem; }
  .user-gallery-sheet__form button { width: 100%; box-sizing: border-box; }
}
.user-gallery-comment__actions { display: flex; align-items: center; justify-content: flex-start; margin-top: .35rem; }
.user-gallery-comment__like { border: 1px solid color-mix(in srgb, var(--text, #1d2735) 12%, transparent); background: color-mix(in srgb, var(--surface, #fffdfa) 92%, var(--primary, #2b6f62) 8%); color: var(--muted, #667281); border-radius: 999px; padding: .25rem .6rem; font-size: .85rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
.user-gallery-comment__like.is-liked { background: rgba(43,111,98,.12); border-color: rgba(43,111,98,.28); color: var(--primary, #2b6f62); }
.user-gallery-report-button { opacity: .74; font-size: .84rem; }
.user-gallery-card__actions .user-gallery-report-button { color: var(--muted, #667281); background: color-mix(in srgb, #fff 92%, var(--muted, #667281) 8%); }
.user-gallery-comment__actions { gap: .4rem; flex-wrap: wrap; }
.user-gallery-comment__report { border: 1px solid color-mix(in srgb, var(--text, #1d2735) 10%, transparent); background: transparent; color: var(--muted, #667281); border-radius: 999px; padding: .25rem .6rem; font-size: .82rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
.user-gallery-report-sheet { position: fixed; left: max(.75rem, env(safe-area-inset-left, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); bottom: calc(var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)) + .75rem); z-index: 1265; max-width: 520px; margin: 0 auto; padding: .95rem; border: 1px solid color-mix(in srgb, var(--text, #1d2735) 12%, transparent); border-radius: 1.1rem; background: var(--app-surface, var(--surface, #fffdfa)); box-shadow: 0 18px 48px rgba(18, 29, 40, .28); transform: translateY(calc(100% + 1.5rem)); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; }
.user-gallery-report-sheet--open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.user-gallery-report-form { display: grid; gap: .75rem; }
.user-gallery-report-form h2 { margin: 0; color: var(--text, #1d2735); font-size: 1.05rem; }
.user-gallery-report-form label { display: grid; gap: .35rem; color: var(--text, #1d2735); font-weight: 700; }
.user-gallery-report-form select, .user-gallery-report-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border, #d9e0e7); border-radius: .85rem; background: #fff; color: var(--text, #1d2735); font: inherit; font-size: 16px; }
.user-gallery-report-form select { min-height: 46px; padding: .6rem .7rem; }
.user-gallery-report-form textarea { min-height: 92px; max-height: min(26vh, 180px); padding: .7rem .8rem; resize: vertical; }
.user-gallery-report-form__actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.user-gallery-report-form__actions button { flex: 1 1 160px; min-height: 44px; border: 1px solid var(--border, #d9e0e7); border-radius: 999px; font-weight: 700; cursor: pointer; }
.user-gallery-report-form__actions button:first-child { background: var(--primary, #2b6f62); color: #fff; }
.user-gallery-report-form__actions button:last-child { background: #fff; color: var(--primary, #2b6f62); }
.user-gallery-report-form__actions button:disabled { opacity: .65; cursor: wait; }
.user-gallery-report-status { min-height: 1.25rem; color: var(--muted, #677282); font-size: .93rem; }
@media (max-width: 560px) {
  .user-gallery-report-sheet { left: 0; right: 0; bottom: 0; max-width: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: calc(var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)) + .95rem); }
}

.badge-chip {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  border: 1px solid rgba(29, 39, 53, .16);
  box-shadow: 0 4px 10px rgba(23, 35, 50, .16);
  background: #f3eadf;
  line-height: 1;
}
.badge-chip--bronze { background: linear-gradient(145deg, #e6b17d, #a96739); color: #22150c; }
.badge-chip--silver { background: linear-gradient(145deg, #f1f5f9, #aeb9c6); color: #172033; }
.badge-chip--gold { background: linear-gradient(145deg, #ffe08a, #d69b1e); color: #2b1c05; }
.badge-chip--diamond {
  background: linear-gradient(145deg, #ffffff 0%, #e0f7ff 42%, #b9e7ff 68%, #f8fdff 100%);
  color: #12304a;
  border-color: rgba(74, 144, 226, .58);
  box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset, 0 6px 16px rgba(59,130,246,.26), 0 0 18px rgba(186,230,253,.55);
}
.badge-chip--platinum {
  background: linear-gradient(145deg, #ffffff 0%, #edf2f7 45%, #cbd5e1 100%);
  color: #172033;
  border-color: rgba(148,163,184,.75);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 6px 15px rgba(71,85,105,.22);
}
.badge-stack { display: inline-flex; align-items: center; isolation: isolate; vertical-align: middle; }
.badge-stack-item { position: relative; margin-left: -.48rem; z-index: 1; }
.badge-stack-item:first-child { margin-left: 0; }
.badge-stack-item--front { z-index: 6; }
.badge-stack__more { margin-left: .28rem; color: var(--muted, #667281); font-size: .78rem; font-weight: 800; }
.badge-stack-button { border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
.badge-stack-button:focus-visible { outline: 2px solid var(--primary, #2b6f62); outline-offset: 3px; border-radius: 999px; }
.user-gallery-card__identity { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; color: var(--muted, #5f6b7a); font-size: .86rem; }
.user-gallery-card__identity-name { font-weight: 700; color: var(--text, #1d2735); }
.user-gallery-card__badges { display: flex; align-items: center; margin-top: .35rem; }
.user-gallery-card__badges,
.user-gallery-card__identity {
  align-items: center;
}
.user-gallery-card .badge-stack-button {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 1;
}
.user-gallery-card .badge-stack {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 1;
}
.user-gallery-card .badge-chip,
.user-gallery-card__badges .badge-chip,
.user-gallery-card__identity .badge-chip {
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  max-width: 1.2rem;
  box-sizing: border-box;
  flex-shrink: 0;
  font-size: .72rem;
  line-height: 1;
  border-width: 1px;
  box-shadow: 0 2px 5px rgba(23, 35, 50, .12);
}
.user-gallery-card .badge-stack-item,
.user-gallery-card__badges .badge-stack-item,
.user-gallery-card__identity .badge-stack-item {
  margin-left: -.25rem;
}
.user-gallery-card .badge-stack-item:first-child,
.user-gallery-card__badges .badge-stack-item:first-child,
.user-gallery-card__identity .badge-stack-item:first-child {
  margin-left: 0;
}
.user-gallery-card .badge-stack__more,
.user-gallery-card__badges .badge-stack__more,
.user-gallery-card__identity .badge-stack__more {
  margin-left: .18rem;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
}
.badge-detail-sheet-backdrop { position: fixed; inset: 0; z-index: 1245; background: rgba(18, 29, 40, .42); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.badge-detail-sheet-backdrop--open { opacity: 1; pointer-events: auto; }
.badge-detail-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250; max-height: min(78vh, 620px); overflow: auto; padding: .7rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem); background: var(--app-surface, #fffdfa); border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; box-shadow: 0 -14px 28px rgba(0,0,0,.22); transform: translateY(104%); transition: transform .25s ease; }
.badge-detail-sheet--open { transform: translateY(0); }
.badge-detail-sheet__handle { width: 42px; height: 4px; border-radius: 999px; background: rgba(31,46,63,.16); margin: 0 auto .85rem; }
.badge-detail-sheet__header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.badge-detail-sheet__title { margin: 0; font-size: 1rem; color: var(--app-text, #1f2e3f); }
.badge-detail-sheet__close { border: 0; background: transparent; color: var(--app-muted, #667281); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0; }
.badge-detail-sheet__body { display: grid; gap: .65rem; margin-top: .8rem; }
.badge-detail-card { display: grid; grid-template-columns: auto 1fr; gap: .75rem; border: 1px solid var(--app-border, #e3e8ed); background: var(--app-surface, #fffdfa); border-radius: .95rem; padding: .78rem; }
.badge-detail-card__title { margin: 0; font-size: .98rem; color: var(--app-text, #1f2e3f); }
.badge-detail-card__meta, .badge-detail-card__how, .badge-detail-card__stats { margin: .25rem 0 0; color: var(--app-muted, #677282); font-size: .86rem; line-height: 1.4; }
.badge-detail-card__how strong { color: var(--app-text, #1d2735); }