/* GMComenta Pro 2.1.4 */
.gmcp { font-family: var(--gmcp-font, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif); }
.gmcp a { color: var(--gmcp-color,#146EF5); text-decoration: none; }
.gmcp a:hover { text-decoration: underline; }

.gmcp-grid { display: grid; gap: var(--gmcp-gap, 16px); }
@media (min-width: 480px) {
  .gmcp-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
  .gmcp-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
  .gmcp-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
  .gmcp-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
  .gmcp-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
}
.gmcp-card { background: #fff; border-radius: 16px; padding: 16px; transition: transform .2s ease, box-shadow .2s ease; border: 1px solid rgba(0,0,0,.06); }
.gmcp-card.elevated { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.gmcp-card.outlined { border: 1px solid rgba(0,0,0,.12); }
.gmcp-card.flat { border-color: transparent; }
.gmcp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.10); }

.gmcp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gmcp-avatar { width: var(--gmcp-avatar, 40px); height: var(--gmcp-avatar, 40px); border-radius: 999px; object-fit: cover; background: #eee; }
.gmcp-name { font-weight: 600; }
.gmcp-time { opacity: .7; font-size: 12px; }

.gmcp-stars { display: inline-flex; gap: 2px; }
.gmcp-stars i {
  display: inline-block; width: var(--gmcp-star, 16px); height: var(--gmcp-star, 16px);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.401 8.164L12 18.896l-7.335 3.865 1.401-8.164L.132 9.21l8.2-1.192z\"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.401 8.164L12 18.896l-7.335 3.865 1.401-8.164L.132 9.21l8.2-1.192z\"/></svg>') center/contain no-repeat;
  background: #FFD54F;
}
.gmcp-text { margin-top: 8px; line-height: 1.55; }

/* Carousel */
.gmcp-carousel { position: relative; }
.gmcp-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--gmcp-slide, clamp(280px, 85vw, 360px));
  gap: var(--gmcp-gap, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.gmcp-slide { scroll-snap-align: start; }
.gmcp-nav { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.gmcp-btn { border: 1px solid rgba(0,0,0,.12); background: white; border-radius: 999px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
.gmcp-btn:hover { border-color: var(--gmcp-color,#146EF5); }

/* Histogram */
.gmcp-hist { margin: 12px 0 20px; font-size: 13px; }
.gmcp-hist-row { display: grid; grid-template-columns: 28px 1fr 44px; align-items: center; gap: 8px; margin: 4px 0; }
.gmcp-bar { height: 8px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; }
.gmcp-bar > span { display: block; height: 100%; background: var(--gmcp-color,#146EF5); width: 0%; }

.wrap.gmcp-wrap .form-table th { width: 260px; }
.gmcp-error { padding: 12px 14px; border-radius: 12px; background: #FFF6F6; border: 1px solid #FDD; }


/* Equal height + no shadow */
.gmcp-equal .gmcp-card { height: 100%; }
.gmcp-no-shadow .gmcp-card { box-shadow: none !important; }
.gmcp-no-shadow .gmcp-card:hover { box-shadow: none !important; transform: none; }


/* Hide scrollbar utility */
.gmcp-hide-scrollbar .gmcp-track { scrollbar-width: none; }
.gmcp-hide-scrollbar .gmcp-track::-webkit-scrollbar { display: none; }

/* Nav positioning */
.gmcp-carousel { position: relative; padding-bottom: 8px; }
.gmcp-nav { position: absolute; left: 0; right: 0; display: flex; gap: 8px; }
.gmcp-nav-top { top: -44px; }
.gmcp-nav-bottom { bottom: 0; }
.gmcp-align-left { justify-content: flex-start; }
.gmcp-align-center { justify-content: center; }
.gmcp-align-right { justify-content: flex-end; }
.gmcp-carousel.gmcp-nav-top-pad { padding-top: 44px; }

/* Equal strict will set min-heights via JS */