/* Shared responsive layout. Load after the base and community styles. */
:root {
  color-scheme: light;
  --muted: #626975;
  --line: #e3e1da;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { min-height: 44px; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .6; }
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
  outline: 3px solid #3751ad;
  outline-offset: 3px;
}
input, select, textarea { min-width: 0; max-width: 100%; font-size: 16px; }
input::placeholder, textarea::placeholder { color: #757980; opacity: 1; }
img { max-width: 100%; }
.app, .section, #page, .toolbar, .cards, .card, .wish-item { min-width: 0; }
.app {
  width: 100%; max-width: 1140px;
  padding: calc(14px + var(--safe-top)) max(14px, var(--safe-left)) calc(104px + var(--safe)) max(14px, var(--safe-right));
}
.top {
  display: flex; align-items: center; justify-content: space-between;
  height: auto; min-height: 46px; gap: 10px; margin-bottom: 24px;
}
.brand { min-width: 0; flex: 0 1 auto; font-size: 18px; gap: 8px; white-space: nowrap; }
.brand .ball { flex: 0 0 32px; width: 32px; height: 32px; }
.brand .ball:after { left: 9px; top: 8px; }
.account {
  display: inline-flex; align-items: center;
  min-width: 0; max-width: 45%; padding: 9px 11px; min-height: 44px;
  border-radius: 14px; font-size: 11px;
}
.account .dot { flex: 0 0 8px; }
#accountLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heading { font-size: clamp(26px, 5.5vw, 34px); line-height: 1.15; overflow-wrap: anywhere; }
.sub { color: var(--muted); }
.section > .sub { max-width: 760px; }
.sectiontop { align-items: center; flex-wrap: wrap; gap: 8px; }
.sectiontop h2 { font-size: 18px; min-width: 0; }
.sectiontop .sub { font-size: 12px; }
.price-note { font-size: 11px !important; line-height: 1.6; }
.price-note a { color: #3751ad; }
.community-card, .community-form, .community-row { min-width: 0; }
.community-card { width: 100%; max-width: 720px; padding: 21px; }
.community-card p, .community-card h2, .community-card .sub { overflow-wrap: anywhere; }
.community-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.community-form input, .community-form select, .community-form textarea { font-size: 16px; min-height: 46px; }
.community-form textarea { min-height: 96px; }
.community-form label { line-height: 1.5; }
.hero-action, .outline-button, .save, .loadmore, .quick-add-button, .privacy-toggle {
  min-height: 44px; line-height: 1.35; font-size: 12px;
}
.hero-action, .save { font-size: 13px; }
.favorite-star { min-height: 44px; width: 44px; height: 44px; flex: 0 0 44px; }
.link { padding: 10px 4px; }
.hero { padding: 21px; min-width: 0; }
.hero-copy, .progressbox { min-width: 0; }
.hero h2 { line-height: 1.2; }
.hero p { font-size: 13px; line-height: 1.6; max-width: 460px; }
.progressbox { width: min(100%, 260px); }
.progresshead, .progressfoot { font-size: 11px; }
.stats { gap: 8px; }
.stat { min-width: 0; padding: 14px 10px; }
.statlabel { color: var(--muted); font-size: 11px; line-height: 1.35; }
.statnum { font-size: clamp(20px, 4vw, 25px); overflow-wrap: anywhere; }
.statnum small { display: inline-block; font-size: 11px; color: var(--muted); }
.set-grid { grid-template-columns: minmax(0, 1fr); }
.set-card { min-width: 0; }
.set-card h3 { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.set-card p, .set-count { color: var(--muted); font-size: 12px; }
.set-symbol { flex-shrink: 0; }
.toolbar { width: 100%; gap: 8px; margin: 18px 0 14px; align-items: stretch; }
.toolbar > * { min-width: 0; max-width: 100%; }
.toolbar .search { flex: 1 1 100%; min-width: 0; }
.search input, input.search { font-size: 16px; min-height: 46px; padding: 12px 13px; }
.toolbar .select { flex: 1 1 130px; min-width: 0; width: 0; padding: 11px; font-size: 14px; }
.toolbar .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 12px; }
.toolbar .chip input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.segmented { gap: 8px; scrollbar-width: thin; max-width: 100%; }
.chip { min-height: 44px; font-size: 12px; padding: 10px 14px; }
.catalog-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 18px; }
.catalog-shortcuts button { flex: 1; }
.cards, .community-friend-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.card { padding: 8px; border-radius: 16px; }
.card .art, .community-friend-cards .art { height: auto; aspect-ratio: 0.72; min-width: 0; }
.card .card-image { padding: 2px; }
.cardname { font-size: 12px; line-height: 1.45; margin: 9px 2px 4px; }
.cardmeta { font-size: 10px; color: #636973; line-height: 1.4; }
.cardmeta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.badge { font-size: 9px; color: #292b35; }
.tile-price { font-size: 11px; color: #2d694f; }
.empty { font-size: 14px; line-height: 1.6; grid-column: 1/-1; overflow-wrap: anywhere; }
.quick-add-head { flex-wrap: wrap; }
.quick-add-head > div { min-width: 0; flex: 1; }
.quick-add p { font-size: 12px; line-height: 1.6; }
.quick-result { min-width: 0; padding: 10px; }
.quick-result-info strong { font-size: 12px; }
.quick-result-info small { font-size: 11px; }
.quick-result .quick-add-button { padding: 10px 11px; }
.recent-list { grid-template-columns: minmax(0, 1fr); }
.recent-row { min-height: 77px; padding: 10px 12px; }
.recent-info strong { font-size: 13px; }
.recent-info small, .recent-time { color: var(--muted); font-size: 11px; }
.collection-wrap { min-width: 0; }
.collection-row { min-width: 0; gap: 12px; }
.collection-row .info { min-width: 0; }
.collection-row strong { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.collection-row small { font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.set-price { font-size: 11px !important; color: #6c5c22 !important; }
.privacy-actions { gap: 8px; }
.privacy-actions > * { min-width: 0; }
.privacy-panel p { line-height: 1.6; }
.privacy-toggle { max-width: 100%; }
.wish-item .card { height: auto; }
.wish-tools { padding: 8px 4px; }
.wish-tools label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; font-size: 11px; }
.wish-tools input { width: 100%; max-width: 130px; min-height: 44px; font-size: 16px; }
.wish-tools small, .wish-tools .wish-alert { font-size: 11px; line-height: 1.5; }
.wishlist-remove { min-height: 44px; font-size: 12px; margin: 0; padding: 9px 4px; }
.modalbg { padding: 16px; }
.modal {
  min-width: 0; width: min(500px, 100%); padding: 22px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.modalhead { min-width: 0; gap: 12px; }
.modalhead h3 { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; font-size: 20px; }
.close { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; }
.modal .art { height: min(38vh, 330px); height: min(38dvh, 330px); }
.modal p { font-size: 13px; line-height: 1.55; }
.card-extras { display: grid; gap: 13px; }
.card-extras label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 700; }
.card-extras input, .card-extras select { width: 100%; padding: 12px; min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 16px; }
.counter { gap: 13px; }
.counter button { width: 44px; height: 44px; min-height: 44px; }
.countrow { gap: 12px; }
.countrow label { font-size: 13px; line-height: 1.4; }
.price-main { font-size: 24px; }
.price-details { font-size: 12px; line-height: 1.5; }
.toast {
  max-width: calc(100% - 28px); text-align: center;
  bottom: calc(88px + var(--safe)); font-size: 13px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.copyright { width: 100%; padding: 0; margin: 30px auto 0; font-size: 11px; line-height: 1.6; }
.copyright span { overflow-wrap: anywhere; }
.bottomnav {
  display: flex; justify-content: center; align-items: stretch; gap: 2px;
  left: 0; right: 0; bottom: 0; width: auto; max-width: none;
  padding: 6px max(6px, var(--safe-right)) calc(7px + var(--safe)) max(6px, var(--safe-left));
  border-top: 1px solid #deded8; background: #fff; overflow: visible;
}
.bottomnav button {
  flex: 1 1 0; min-width: 44px; min-height: 56px; padding: 7px 2px;
  gap: 4px; font-size: 11px; line-height: 1.2; border-radius: 12px;
  color: #626975; transition: background-color .12s, color .12s;
}
.bottomnav button b { font-size: 21px; line-height: 1.1; }
.bottomnav button.active { background: #fff2c8; color: #3b331c; }
.admin-user, .admin-table { min-width: 0; max-width: 100%; }
.admin-user summary { min-height: 44px; line-height: 1.5; overflow-wrap: anywhere; }
.admin-user pre { max-width: 100%; overflow-wrap: anywhere; }
.admin-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table th, .admin-table td { font-size: 12px; line-height: 1.5; }
.community-card-count > span, .community-privacy-note { font-size: 12px; }
.community-member-info span, .community-kicker, .community-stats span,
.community-trade-item small, .community-exchange-head > div > span,
.community-trade-side-title, .community-field > span { color: #666b74; }
.community-compose-foot p { color: #6f5b27; font-size: 12px; }
.community-inbox-head, .community-welcome, .community-friend-hero,
.community-compose-head, .community-selection-preview { min-width: 0; }
.community-welcome > div { flex: 1; }
.community-welcome > div > div { min-width: 0; }
.community-welcome h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.community-welcome > button { flex: 0 0 auto; }
.community-selection-preview > div { min-width: 0; }
.community-trade-summary span { white-space: normal; line-height: 1.4; }
.app-update-notice {
  display: flex; align-items: center; gap: 12px; position: fixed;
  top: calc(12px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  width: calc(100% - 28px); max-width: 520px; z-index: 55;
  padding: 11px 14px; border-radius: 16px; background: #292b35; color: white;
  border: 1px solid #424550; box-shadow: 0 8px 26px #14151a24;
  font-size: 13px; line-height: 1.45;
}
.app-update-notice > span { flex: 1; min-width: 0; }
.app-update-notice > button {
  flex: 0 0 auto; border: 0; padding: 11px 14px; min-height: 44px;
  border-radius: 11px; background: var(--yellow); color: #292b35;
  font-size: 12px; font-weight: 800;
}

@media (max-width: 539px) {
  .collection-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 10px;
    padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  }
  .collection-wrap .collection-row { grid-column: 1/-1; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .collection-wrap .favorite-star { grid-column: 2; grid-row: 2; }
  .collection-wrap .privacy-toggle { grid-column: 1; grid-row: 2; justify-self: start; min-width: 96px; padding: 10px 14px; }
  .modalbg { padding: 0; align-items: end; }
  .modal {
    width: 100%; border-radius: 23px 23px 0 0;
    padding: 19px max(16px, var(--safe-right)) calc(20px + var(--safe)) max(16px, var(--safe-left));
    max-height: calc(100vh - var(--safe-top) - 12px);
    max-height: calc(100dvh - var(--safe-top) - 12px);
  }
  .modal .art { height: min(36vh, 280px); height: min(36dvh, 280px); }
  .community-card { padding: 18px; }
  .community-detail-toolbar { grid-template-columns: minmax(0, 1fr); }
  .community-set-field { grid-column: auto; }
  .community-trade-summary { gap: 6px; }
  .community-trade-summary span { padding: 10px 6px; font-size: 10px; }
}

@media (min-width: 540px) {
  .app { padding-left: max(22px, var(--safe-left)); padding-right: max(22px, var(--safe-right)); }
  .brand { font-size: 20px; gap: 10px; }
  .account { max-width: 50%; font-size: 12px; }
  .stats { gap: 13px; }
  .stat { padding: 17px; }
  .set-grid, .recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards, .community-friend-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
  .toolbar .search { flex: 1 1 280px; }
  .toolbar .select { flex: 0 1 210px; width: auto; }
  .hero { padding: 26px; }
  .hero p { max-width: 460px; }
  .collection-wrap { align-items: center; }
  .collection-wrap .privacy-toggle { min-width: 78px; }
}

@media (min-width: 768px) {
  .app { padding: calc(23px + var(--safe-top)) max(28px, var(--safe-right)) calc(122px + var(--safe)) max(28px, var(--safe-left)); }
  .top { min-height: 54px; margin-bottom: 30px; }
  .hero { grid-template-columns: minmax(0, 1fr) auto; gap: 28px; }
  .hero h2 { font-size: 26px; }
  .progressbox { width: 210px; }
  .cards, .community-friend-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .card { padding: 9px; }
  .cardname { font-size: 13px; }
  .cardmeta { font-size: 11px; }
  .bottomnav {
    left: 50%; right: auto; width: calc(100% - 48px); max-width: 780px;
    transform: translateX(-50%); bottom: max(12px, var(--safe));
    padding: 8px; border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 5px 20px #2925190b; gap: 5px;
  }
  .bottomnav button { min-height: 58px; font-size: 12px; }
  .toast { bottom: calc(108px + var(--safe)); }
  .community-detail-toolbar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .community-set-field { grid-column: auto; }
  .community-card-count { margin-top: 22px; }
}

@media (min-width: 1100px) {
  .app { max-width: 1340px; padding: 24px 30px 40px 210px; }
  .top { margin-bottom: 28px; }
  .cards, .community-friend-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
  .set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bottomnav {
    left: max(24px, calc((100vw - 1340px)/2 + 24px)); top: 106px; right: auto; bottom: auto;
    width: 158px; max-width: none; transform: none;
    flex-direction: column; align-items: stretch; padding: 10px;
    border-radius: 18px; gap: 5px; box-shadow: 0 3px 16px #29251906;
  }
  .bottomnav::before { content: 'LA TUA RACCOLTA'; padding: 9px 9px 13px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .7px; }
  .bottomnav button {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start;
    min-height: 48px; gap: 12px; padding: 12px; font-size: 13px; text-align: left;
  }
  .bottomnav button b { width: 22px; text-align: center; font-size: 21px; }
  .toast { bottom: 24px; }
  .copyright { margin-top: 40px; }
}

@media (min-width: 1360px) {
  .cards, .community-friend-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
  .app { padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); }
  .brand { font-size: 17px; gap: 7px; }
  .account { padding: 8px; font-size: 10px; max-width: 44%; }
  .bottomnav button { font-size: 10px; }
  .stat { padding: 12px 8px; }
  .statnum { font-size: 19px; }
  .statlabel { font-size: 10px; }
  .cards, .community-friend-cards { gap: 9px; }
  .community-stats > div { padding: 13px 9px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .app { padding-top: max(10px, var(--safe-top)); }
  .top { margin-bottom: 16px; }
  .modalbg { padding: 10px; align-items: center; }
  .modal { border-radius: 18px; max-height: calc(100dvh - 20px); padding: 17px; }
  .modal .art { height: 45dvh; }
  .bottomnav button { min-height: 48px; padding-top: 5px; padding-bottom: 5px; }
}

@media (hover: hover) and (pointer: fine) {
  .bottomnav button:not(.active):hover, .outline-button:hover { background: #f4f2eb; }
  .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px #29251912; }
}
@media (hover: none) {
  .card:hover, .set-card:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) {
  .bottomnav button.active, .community-section-switch button.active { border: 2px solid ButtonText; }
  .card, .community-state, .community-member, .community-exchange-card { border-color: CanvasText; }
}
/* Constrain native select text in WebKit without widening the form's scroll area. */
.community-form select { overflow: hidden; text-overflow: ellipsis; }

.collection-shortcuts { display:flex; gap:8px; margin:16px 0; flex-wrap:wrap; }
.collection-shortcuts button { flex:1; min-width:90px; }
.community-welcome-actions { display:flex; gap:8px; flex-wrap:wrap; }
.community-card-compare { display:grid; gap:8px; margin:8px 1px 1px; }
.community-card-compare > span { font-size:11px; color:var(--muted); }
.community-card-compare button { width:100%; padding:9px 5px; font-size:11px; }