/* =========================
   HAPPY PENS CORE — COLLECTION
========================= */

.hpc-collection-button,
.hpc-collection-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:34px;
  min-height:34px;
  max-height:34px;

  padding:0 14px;
  margin:0;

  background:transparent;
  border:1.5px solid #B08A52;
  border-radius:4px;

  color:#B08A52 !important;

  font-family:DM Sans,sans-serif;
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none !important;

  cursor:pointer;
  white-space:nowrap;
}

.hpc-collection-button:hover,
.hpc-collection-login:hover{
  background:#B08A52;
  border-color:#B08A52;
  color:#FDFBF8 !important;
}

.hpc-collection-button{
  gap:10px;
}


.hpc-collection-button.active{
    background:#F6F2EA;
    border-color:#3F7A4D;
    color:#3F7A4D !important;
}

.hpc-collection-button.active::before{
    content:"▣";
    color:#3F7A4D;
    font-size:20px;
}

.hpc-collection-button.active:hover{
    background:#3F7A4D;
    border-color:#3F7A4D;
    color:#FDFBF8 !important;
}

.hpc-collection-button.active:hover::before{
    color:#FDFBF8;
}

/* =========================
   HPC MY COLLECTION GRID
========================= */

.hpc-collection-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.hpc-collection-card{
  display:flex;
  flex-direction:column;
  height:100%;

  background:#FDFBF8;
  border:1px solid rgba(176,138,82,.28);
  border-radius:8px;
  overflow:hidden;

  transition:transform .2s ease, box-shadow .2s ease;
}

.hpc-collection-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.08);
}

.hpc-collection-image{
  position:relative;
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#F3F0EB;
}

.hpc-collection-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hpc-collection-open-icon{
  position:absolute;
  top:10px;
  right:10px;

  width:28px;
  height:28px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:rgba(253,251,248,.88);
  border:1px solid rgba(176,138,82,.55);
  border-radius:50%;

  color:#8E6D36;
  font-size:15px;
  line-height:1;

  opacity:0;
  transform:translateY(-3px);
  transition:all .2s ease;
}

.hpc-collection-image:hover .hpc-collection-open-icon{
  opacity:1;
  transform:translateY(0);
}

.hpc-collection-body{
  display:flex;
  flex-direction:column;
  flex-grow:1;
  padding:12px 14px 14px;
}

.hpc-collection-body h3{
  margin:0 0 6px;
  font-size:15px;
  line-height:1.25;
}

.hpc-collection-body h3 a{
  color:#171411;
  text-decoration:none;
}

.hpc-collection-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
  color:#9A713F;
  font-size:13px;
}

.hpc-collection-meta span + span:before{
  content:"•";
  margin-right:6px;
  color:#AFA49A;
}

.hpc-collection-view-pen{
  margin-top:auto;
  color:#8E6D36;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

.hpc-collection-view-pen:hover{
  color:#171411;
}

.hpc-collection-empty{
  padding:28px;
  border:1px dotted #B08A52;
  background:#FDFBF8;
  text-align:center;
  color:#2A241F;
}

@media(max-width:1200px){
  .hpc-collection-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:768px){
  .hpc-collection-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:480px){
  .hpc-collection-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   HPC COLLECTION CARD ACTIONS
========================= */

.hpc-collection-card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
}

.hpc-collection-card-actions .hpc-collection-view-pen{
  margin-top:0;
}

.hpc-collection-remove{
  color:#B3472E;
  font-size:13px;
  font-weight:600;
  text-decoration:none !important;
}

.hpc-collection-remove:hover{
  color:#171411;
}

/* =========================
   HPC MOST COLLECTED PENS
========================= */

.hpc-mcp-page {
    background: transparent;
    padding: 0;
}

.hpc-mcp-top-one {
    width: 100%;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    background: #fffaf3;
    border: 1px solid rgba(169,120,40,.22);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.hpc-mcp-top-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.hpc-mcp-top-image img,
.hpc-mcp-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hpc-mcp-ribbon,
.hpc-mcp-small-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(180deg, #c49a45, #9b6e21);
    color: #fff;
    font-family: Georgia, serif;
    text-align: center;
    border-radius: 0 0 3px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hpc-mcp-ribbon {
    width: 54px;
    height: 54px;
    font-size: 32px;
}

.hpc-mcp-small-ribbon {
    width: 42px;
    height: 42px;
    font-size: 22px;
}

.hpc-mcp-top-info {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hpc-mcp-label {
    color: #9b6e21;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: 11px;
    margin-bottom: 16px;
}

.hpc-mcp-top-info h2 {
    font-size: 25px;
    line-height: 1.18;
    margin: 0 0 8px;
    color: #111;
}

.hpc-mcp-top-info p,
.hpc-mcp-card-body p {
    color: #62594c;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.45;
}

.hpc-mcp-top-info p {
    margin-bottom: auto;
}

.hpc-mcp-count {
    font-size: 15px;
    margin: 22px 0 18px;
    color: #333;
}

.hpc-mcp-count strong,
.hpc-mcp-small-count strong {
    font-size: 1.35em;
    color: #111;
}

.hpc-mcp-icon {
    color: #9b6e21;
    font-size: 1.7em;
    line-height: .8;
    display: inline-block;
    vertical-align: 0;
}

.hpc-mcp-link {
    display: block;
    color: #9b6e21;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    border-top: 1px solid rgba(169,120,40,.18);
    padding-top: 14px;
}

.hpc-mcp-grid {
    width: 100%;
    margin: 0 0 18px;
    display: grid;
    gap: 16px;
}

.hpc-mcp-grid-top {
    grid-template-columns: repeat(4, 1fr);
}

.hpc-mcp-grid-rest {
    grid-template-columns: repeat(5, 1fr);
}

.hpc-mcp-card {
    background: #fffaf3;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,.035);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hpc-mcp-card-image {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
}

.hpc-mcp-card-body {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hpc-mcp-card-body h3 {
    margin: 0 0 7px;
    font-size: 16px;
    line-height: 1.25;
}

.hpc-mcp-card-body h3 a {
    color: #111;
    text-decoration: none;
}

.hpc-mcp-small-count {
    color: #333;
    margin: auto 0 14px;
    font-size: 13px;
}

.hpc-mcp-grid-rest .hpc-mcp-card-body {
    padding: 12px 12px 14px;
}

.hpc-mcp-grid-rest .hpc-mcp-card-body h3 {
    font-size: 14px;
    line-height: 1.22;
}

.hpc-mcp-grid-rest .hpc-mcp-card-body p {
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.hpc-mcp-grid-rest .hpc-mcp-small-count {
    font-size: 11px;
    margin: auto 0 10px;
}

.hpc-mcp-grid-rest .hpc-mcp-small-count strong {
    font-size: 1.22em;
}

.hpc-mcp-grid-rest .hpc-mcp-link {
    font-size: 10px;
    padding-top: 10px;
}

.hpc-mcp-grid-rest .hpc-mcp-small-ribbon {
    width: 34px;
    height: 34px;
    font-size: 18px;
}

.hpc-mcp-locked {
    text-align: center;
    margin-top: 24px;
}

.hpc-mcp-locked a {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 13px 34px;
    border-radius: 7px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 12px;
    font-weight: 700;
}

.hpc-mcp-locked p {
    color: #6b5738;
    margin-top: 12px;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .hpc-mcp-top-one {
        grid-template-columns: 1fr;
    }

    .hpc-mcp-grid-top,
    .hpc-mcp-grid-rest {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .hpc-mcp-grid-top,
    .hpc-mcp-grid-rest {
        grid-template-columns: 1fr;
    }

    .hpc-mcp-top-info {
        padding: 22px;
    }
}

.hpc-mcp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    vertical-align: -3px;
}

.hpc-mcp-icon svg {
    width: 26px;
    height: 26px;
    fill: #b08a3c;
}

.hpc-mcp-grid-rest .hpc-mcp-icon svg {
    width: 18px;
    height: 18px;
}

/* SPACING — Most Collected */
.hpc-mcp-icon {
    margin-right: 8px;
}

.hpc-mcp-count strong,
.hpc-mcp-small-count strong {
    margin-right: 8px;
}

/* =========================
   HPC COLLECTION GROUPS
========================= */

.hpc-collection-groups{
  background:#FDFBF8;
  border:1px solid rgba(176,138,82,.28);
  border-radius:10px;
  overflow:hidden;
}

.hpc-collection-groups-title{
  padding:12px 16px;
  background:#fffaf3;
  border-bottom:1px solid rgba(176,138,82,.22);

  color:#171411;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.hpc-collection-groups-list{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:8px;
}

.hpc-collection-group-item{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:10px 10px;

  border-radius:6px;

  color:#5E5A55;
  font-size:14px;
  text-decoration:none !important;

  transition:.18s ease;
}

.hpc-collection-group-item:hover{
  background:rgba(176,138,82,.10);
  color:#171411;
}

.hpc-collection-group-item.active{
  background:#B08A52;
  color:#FDFBF8 !important;
}

.hpc-collection-group-create{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid rgba(176,138,82,.18);
}

.hpc-collection-group-input{
  flex:1;
  min-width:0;

  height:34px;
  padding:0 10px;

  background:#FAF8F5;
  border:1px solid rgba(176,138,82,.32);
  border-radius:4px;

  color:#171411;
  font-size:13px;
}

.hpc-collection-group-input:focus{
  outline:none;
  border-color:#B08A52;
}

.hpc-collection-group-button{
  height:34px;
  padding:0 12px;

  background:transparent;
  border:1.5px solid #B08A52;
  border-radius:4px;

  color:#B08A52;

  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;

  cursor:pointer;
}

.hpc-collection-group-button:hover{
  background:#B08A52;
  color:#FDFBF8;
}

/* Group header above grid */

.hpc-collection-group-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  margin:0 0 18px;
  padding:14px 16px;

  background:#FDFBF8;
  border:1px solid rgba(176,138,82,.28);
  border-radius:8px;
}

.hpc-collection-group-header h2{
  margin:0;
  color:#171411;
  font-size:20px;
  line-height:1.2;
}

.hpc-collection-group-delete-current{
  height:34px;
  padding:0 14px;

  background:transparent;
  border:1.5px solid #B3472E;
  border-radius:4px;

  color:#B3472E;

  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;

  cursor:pointer;
}

.hpc-collection-group-delete-current:hover{
  background:#B3472E;
  color:#FDFBF8;
}

/* Groups dropdown inside cards */

.hpc-collection-group-checks{
  margin:8px 0 12px;
  position:relative;
  
}

.hpc-collection-group-toggle{
  width:100%;
  height:32px;

  background:#FAF8F5;
  border:1px solid rgba(176,138,82,.32);
  border-radius:4px;

  color:#8E6D36;
  font-size:13px;
  font-weight:600;

  cursor:pointer;
}

.hpc-collection-group-toggle:hover{
  border-color:#B08A52;
}

.hpc-collection-group-list{
  display:none;
  margin-top:8px;
  padding:8px;

  background:#FDFBF8;
  border:1px solid rgba(176,138,82,.24);
  border-radius:6px;
}

.hpc-collection-group-checks.open .hpc-collection-group-list{
  display:block;
}

.hpc-collection-group-check{
  display:flex;
  align-items:center;
  gap:8px;

  padding:6px 4px;

  color:#5E5A55;
  font-size:13px;
}

.hpc-collection-group-check input{
  accent-color:#B08A52;
}

@media(max-width:700px){
  .hpc-collection-group-create{
    flex-direction:column;
  }

  .hpc-collection-group-button{
    width:100%;
  }

  .hpc-collection-group-header{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* =========================
   HPC COLLECTION STATS
========================= */

.hpc-collection-stats{
  background:#FDFBF8;
  border:1px solid rgba(176,138,82,.28);
  border-radius:10px;
  overflow:hidden;
}

.hpc-collection-stats-title{
  padding:14px 16px;
  background:#fffaf3;
  border-bottom:1px solid rgba(176,138,82,.22);

  color:#171411;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.hpc-collection-stat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 14px;
  border-bottom:1px solid rgba(176,138,82,.12);

  color:#5E5A55;
  font-size:14px;
}

.hpc-collection-stat-row:last-child{
  border-bottom:0;
}

.hpc-collection-stat-row strong{
  color:#171411;
  font-size:16px;
}

/* =========================
   HPC COLLECTION GROUPS DROPDOWN
========================= */

.hpc-collection-groups-title{
  cursor:pointer;
  position:relative;
  padding-right:42px;
}

.hpc-collection-groups-title::after{
  content:"▾";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:#B08A52;
  font-size:14px;
}

.hpc-collection-groups.open .hpc-collection-groups-title::after{
  content:"▴";
}

.hpc-collection-groups .hpc-collection-groups-list,
.hpc-collection-groups .hpc-collection-group-create{
  display:none;
}

.hpc-collection-groups.open .hpc-collection-groups-list{
  display:flex;
}

.hpc-collection-groups.open .hpc-collection-group-create{
  display:flex;
}

/* =========================
   HPC COLLECTION CARD ALIGNMENT
========================= */

.hpc-collection-body{
  min-height:220px;
}

.hpc-collection-fields{
  margin-top:auto;
  margin-bottom:0px;
}

.hpc-collection-input{
  width:100%;
  height:32px;
  min-height:32px;
  max-height:32px;

  padding:0 9px;

  background:#FAF8F5;
  border:1px solid rgba(176,138,82,.35);
  border-radius:4px;

  color:#171411;
  font-size:13px;
  line-height:32px;
}

.hpc-collection-input:focus{
  outline:none;
  border-color:#B08A52;
}


.hpc-collection-group-toggle{
  height:32px;
  min-height:32px;
  max-height:32px;
}

.hpc-collection-card-actions{
  margin-top:0;
}

/* =========================
   HPC COLLECTION STATS DROPDOWN
========================= */

.hpc-collection-stats-title{
  cursor:pointer;
  position:relative;
  padding-right:42px;
}

.hpc-collection-stats-title::after{
  content:"▾";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:#B08A52;
  font-size:14px;
}

.hpc-collection-stats.open .hpc-collection-stats-title::after{
  content:"▴";
}

.hpc-collection-stats .hpc-collection-stat-row{
  display:none;
}

.hpc-collection-stats.open .hpc-collection-stat-row{
  display:flex;
}

/* =========================
   HPC CABINET COLLECTION STATS CARDS
========================= */

.hpc-cabinet-stats-cards{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:14px;
}

.hpc-cabinet-stat-card{
  padding:0;
  text-align:left;

  background:transparent;
  border:none;
  border-radius:0;

  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-direction:row-reverse;
}

.hpc-cabinet-stat-card span{
  color:#171411;
  font-family:Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1;
}

.hpc-cabinet-stat-card small{
  margin-top:0;

  color:#171411;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}

/* =========================
   HPC CABINET COLLECTION MONEY STATS
========================= */

.hpc-collection-money-stats{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:15px;
  margin:0;

  background:transparent;
  border:none;
  border-radius:0;
}

.hpc-collection-money-stat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:0;
  border:none;
}

.hpc-collection-money-stat-row span{
  color:#171411;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.hpc-collection-money-stat-row strong{
  color:#171411;
  font-family:Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1;
}

.hpc-collection-money-gain.positive strong{
  color:#3F7A4D;
}

.hpc-collection-money-gain.negative strong{
  color:#9A4A3A;
}

/* =========================
   HPC COLLECTION STATS TOGGLE
========================= */

.hpc-collection-stats-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:22px;
  height:22px;
  padding:0;
  margin:0;

  background:transparent;
  border:none;

  color:#171411;
  font-size:16px;
  line-height:1;
  opacity:.72;

  cursor:pointer;
  transition:opacity .18s ease;
}

.hpc-collection-stats-toggle:hover{
  opacity:1;
}

/* =========================
   HPC COLLECTION GROUPS MODE
========================= */

.hpc-collection-groups-mode{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding-bottom:0;
}

/* =========================
   HPC CABINET COUNT CARD
========================= */

.hpc-cabinet-count-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding-bottom:0;
}

.hpc-cabinet-inline-count{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
}

.hpc-cabinet-big-number{
  color:#171411;
  font-family:"Libre Baskerville",serif;
  font-size:52px;
  font-weight:300;
  line-height:1;
}

.hpc-cabinet-count-label{
  color:#171411;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hpc-cabinet-count-text,
.hpc-collection-groups-text{
  margin:0;
  color:#171411;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* =========================
   HPC CABINET ACTION LINK
========================= */

.hpc-cabinet-action-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  width:auto;
  min-height:28px;
  padding:7px 12px;

  background:transparent;
  border:none;
  border-radius:4px;

  color:#B08A52 !important;

  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none !important;

  transition:
    background .18s ease,
    color .18s ease;
}

.hpc-cabinet-action-link:hover{
  background:#B08A52;
  color:#FDFBF8 !important;
}

.hpc-cabinet-action-arrow{
  font-size:12px;
  line-height:1;
}

.hpc-cabinet-count-link,
.hpc-collection-groups-link{
  align-self:flex-start;
  margin-top:18px;
}


/* =========================
   HPC CABINET COUNT CARD HEIGHT FIX
========================= */

.hpc-cabinet-count-card,
.hpc-collection-groups-mode,
.hpc-collection-money-stats{
  min-height:122px;
}

/* =========================
   HPC COLLECTION GROUP MONEY STATS
========================= */

.hpc-collection-group-item-stats{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.hpc-collection-group-name{
  font-weight:700;
}

.hpc-collection-group-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;

  color:inherit;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  opacity:.82;
}

.hpc-collection-group-stats span{
  white-space:nowrap;
}

.hpc-collection-group-gain.positive{
  color:#3F7A4D;
}

.hpc-collection-group-gain.negative{
  color:#9A4A3A;
}

.hpc-collection-group-item.active .hpc-collection-group-gain,
.hpc-collection-group-item.active .hpc-collection-group-stats{
  color:#FDFBF8;
  opacity:.95;
}

/* =========================
   HPC COLLECTION GROUP RENAME
========================= */

.hpc-collection-group-row{
  position:relative;
}

.hpc-collection-group-rename-open{
  position:absolute;
  top:8px;
  right:8px;

  width:24px;
  height:24px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:transparent;
  border:none;

  color:#B08A52;
  font-size:13px;
  line-height:1;

  cursor:pointer;
  opacity:.65;
}

.hpc-collection-group-rename-open:hover{
  opacity:1;
  color:#171411;
}

.hpc-collection-group-rename-box{
  display:none;
  gap:8px;

  padding:8px;
  background:#fffaf3;
  border-top:1px solid rgba(176,138,82,.16);
}

.hpc-collection-group-row.rename-open .hpc-collection-group-rename-box{
  display:flex;
}

.hpc-collection-group-rename-input{
  flex:1;
  min-width:0;

  height:30px;
  padding:0 9px;

  background:#FAF8F5;
  border:1px solid rgba(176,138,82,.32);
  border-radius:4px;

  color:#171411;
  font-size:13px;
}

.hpc-collection-group-rename-input:focus{
  outline:none;
  border-color:#B08A52;
}

.hpc-collection-group-rename-save{
  height:30px;
  padding:0 10px;

  background:transparent;
  border:1px solid #B08A52;
  border-radius:4px;

  color:#B08A52;

  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;

  cursor:pointer;
}

.hpc-collection-group-rename-save:hover{
  background:#B08A52;
  color:#FDFBF8;
}

/* =========================
   HPC COLLECTION GROUP STATS TOGGLE
========================= */

.hpc-collection-group-stats-open{
  position:absolute;
  top:8px;
  right:36px;

  width:24px;
  height:24px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:transparent;
  border:none;

  color:#B08A52;
  font-size:13px;
  font-weight:700;
  line-height:1;

  cursor:pointer;
  opacity:.65;
}

.hpc-collection-group-stats-open:hover{
  opacity:1;
  color:#171411;
}

.hpc-collection-group-stats-box{
  display:none;

  padding:8px;
  background:#fffaf3;
  border-top:1px solid rgba(176,138,82,.16);
}

.hpc-collection-group-row.stats-open .hpc-collection-group-stats-box{
  display:block;
}

.hpc-collection-group-row.stats-open .hpc-collection-group-stats-open{
  opacity:1;
  color:#171411;
}

.hpc-collection-group-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;

  color:#5E5A55;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1.3;
}

.hpc-collection-group-stats span{
  white-space:nowrap;
}

.hpc-collection-group-gain.positive{
  color:#3F7A4D;
}

.hpc-collection-group-gain.negative{
  color:#9A4A3A;
}

/* =========================
   HPC CURRENT GROUP HEADER ACTIONS
========================= */

.hpc-collection-group-header{
  flex-direction:column;
  align-items:stretch;
}

.hpc-collection-group-header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
}

.hpc-collection-group-header-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

/* override sidebar absolute buttons inside header */
.hpc-collection-group-header-actions .hpc-collection-group-stats-open,
.hpc-collection-group-header-actions .hpc-collection-group-rename-open,
.hpc-collection-group-header-actions .hpc-collection-group-delete-current{
  position:static;

  width:28px;
  height:28px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0;
  margin:0;

  background:transparent;
  border:1px solid currentColor;
  border-radius:4px;

  font-family:Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1;

  cursor:pointer;
  opacity:.85;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.hpc-collection-group-header-actions .hpc-collection-group-stats-open{
  color:#3F7A4D;
}

.hpc-collection-group-header-actions .hpc-collection-group-rename-open{
  color:#171411;
}

.hpc-collection-group-header-actions .hpc-collection-group-delete-current{
  color:#B3472E;
  font-size:18px;
}

.hpc-collection-group-header-actions .hpc-collection-group-stats-open:hover{
  opacity:1;
  background:#3F7A4D;
  color:#FDFBF8;
}

.hpc-collection-group-header-actions .hpc-collection-group-rename-open:hover{
  opacity:1;
  background:#171411;
  color:#FDFBF8;
}

.hpc-collection-group-header-actions .hpc-collection-group-delete-current:hover{
  opacity:1;
  color:#FDFBF8;
  background:#B3472E;
}

.hpc-collection-group-header .hpc-collection-group-stats-box,
.hpc-collection-group-header .hpc-collection-group-rename-box{
  margin-top:10px;
  border-top:1px solid rgba(176,138,82,.16);
}

/* =========================
   HPC SIDEBAR GROUPS — CLEAN LAYOUT
========================= */

.hpc-collection-groups .hpc-collection-group-row{
  position:relative;
}

.hpc-collection-groups .hpc-collection-group-item{
  width:100%;
  box-sizing:border-box;
  padding-right:38px;
}

.hpc-collection-groups .hpc-collection-group-name{
  display:block;
  max-width:100%;

  overflow:visible;
  text-overflow:clip;
  white-space:normal;

  line-height:1.25;
  padding-right:4px;
}

.hpc-collection-groups .hpc-collection-group-stats-open{
  position:absolute;
  top:8px;
  right:8px;

  width:26px;
  height:26px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0;
  margin:0;

  background:transparent;
  border:0px solid #3F7A4D;
  border-radius:4px;

  color:#3F7A4D;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1;

  cursor:pointer;
  opacity:.85;
}

.hpc-collection-groups .hpc-collection-group-stats-open:hover{
  opacity:1;
  background:#3F7A4D;
  color:#FDFBF8;
}

/* sidebar stats — compact */
.hpc-collection-groups .hpc-collection-group-stats{
  font-size:11px;
  gap:6px 10px;
}

/* header stats — larger */
.hpc-collection-group-header .hpc-collection-group-stats{
  font-size:13px;
  gap:8px 14px;
}

.hpc-collection-group-header .hpc-collection-group-stats span{
  font-weight:700;
}

/* =========================
   HPC COLLECTION BADGES
========================= */

.hpc-collection-badge{
  position:absolute;
  top:6px;
  left:6px;
  z-index:3;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:24px;
  padding:0 9px;

  background:#171411;
  border:1px solid rgba(253,251,248,.72);
  border-radius:4px;

  color:#FDFBF8;
  font-size:10px;
  font-family:Arial,sans-serif;
  font-weight:700;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;

  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* =========================
   HPC COLLECTION BADGE COLOURS
========================= */

.hpc-collection-badge-new{
  background:#2563EB; /* blue */
}

.hpc-collection-badge-mint{
  background:#16A34A; /* green */
}

.hpc-collection-badge-near_mint{
  background:#14B8A6; /* teal */
}

.hpc-collection-badge-very_good{
  background:#7C3AED; /* purple */
}

.hpc-collection-badge-good{
  background:#B08A52; /* archive gold */
}

.hpc-collection-badge-used{
  background:#F97316; /* orange */
}

.hpc-collection-badge-worn{
  background:#DB2777; /* magenta */
}

.hpc-collection-badge-poor{
  background:#DC2626; /* red */
}

.hpc-collection-badge-needs_repair{
  background:#111827; /* near black */
}

/* =========================
   HPC COLLECTION CARD DATA ROWS
========================= */

.hpc-collection-data-body .hpc-collection-rank-row,
.hpc-collection-data-body .hpc-collection-badge-row,
.hpc-collection-data-body .hpc-collection-money-row{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.hpc-collection-data-body .hpc-collection-rank-row label,
.hpc-collection-data-body .hpc-collection-badge-row label,
.hpc-collection-data-body .hpc-collection-money-row label{
  color:#8A6A3F;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.hpc-collection-data-body .hpc-personal-top-rank-select,
.hpc-collection-data-body .hpc-collection-badge-select,
.hpc-collection-data-body .hpc-collection-money-input{
  box-sizing:border-box;
  display:block;

  height:32px;
  min-height:32px;
  max-height:32px;

  margin:0;
  padding:0 8px;

  background:#FAF8F5;
  border:1px solid rgba(176,138,82,.32);
  border-radius:6px;

  color:#171411;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:400;
  line-height:normal;
}

.hpc-collection-data-body .hpc-personal-top-rank-select,
.hpc-collection-data-body .hpc-collection-money-input{
  width:90px;
  min-width:90px;
  max-width:90px;
}

.hpc-collection-data-body .hpc-collection-badge-select{
  width:90px;
  min-width:90px;
  max-width:90px;
}

.hpc-collection-data-body .hpc-collection-money-input{
  text-align:right;
}

.hpc-collection-data-body .hpc-collection-gain-row{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(176,138,82,.16);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.hpc-collection-data-body .hpc-collection-gain-row span{
  color:#7A7066;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hpc-collection-data-body .hpc-collection-gain-row strong{
  color:#171411;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1;
}

.hpc-collection-data-body .hpc-collection-gain-row.positive strong{
  color:#3F7A4D;
}

.hpc-collection-data-body .hpc-collection-gain-row.negative strong{
  color:#9A4A3A;
}

/* =========================
   HPC BADGE NAMES EDITOR
========================= */

.hpc-badge-names-open{
  width:24px;
  height:24px;
  padding:0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:transparent;
  border:1px solid #171411;
  border-radius:4px;

  color:#171411;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1;

  cursor:pointer;
}

.hpc-badge-names-open:hover{
  background:#171411;
  color:#FDFBF8;
}

.hpc-badge-names-popup{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;

  align-items:center;
  justify-content:center;

  background:rgba(23,20,17,.42);
  padding:20px;
}

.hpc-badge-names-popup.open{
  display:flex;
}

.hpc-badge-names-popup-panel{
  position:relative;
  width:100%;
  max-width:420px;
  padding:22px;

  background:#FDFBF8;
  border:1px solid rgba(176,138,82,.38);
  border-radius:10px;

  box-shadow:0 24px 60px rgba(0,0,0,.18);
}

.hpc-badge-names-popup-panel h3{
  margin:0 0 16px;
  color:#171411;
  font-size:18px;
  line-height:1.2;
}

.hpc-badge-names-popup-close{
  position:absolute;
  top:12px;
  right:12px;

  width:28px;
  height:28px;
  padding:0;

  background:transparent;
  border:1px solid #B3472E;
  border-radius:4px;

  color:#B3472E;
  font-size:18px;
  line-height:1;

  cursor:pointer;
}

.hpc-badge-names-popup-close:hover{
  background:#B3472E;
  color:#FDFBF8;
}

.hpc-badge-names-popup-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hpc-badge-name-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hpc-badge-name-row label{
  min-width:95px;

  color:#8A6A3F;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hpc-badge-name-input{
  flex:1;
  min-width:0;
  height:32px;
  padding:0 9px;

  background:#fffaf3;
  border:1px solid rgba(176,138,82,.32);
  border-radius:6px;

  color:#171411;
  font-family:Arial,sans-serif;
  font-size:13px;
  line-height:32px;
}

.hpc-badge-name-input:focus{
  outline:none;
  border-color:#B08A52;
}

.hpc-badge-names-popup-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}

.hpc-badge-names-save{
  height:32px;
  padding:0 14px;

  background:transparent;
  border:1px solid #B08A52;
  border-radius:4px;

  color:#B08A52;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;

  cursor:pointer;
}

.hpc-badge-names-save:hover{
  background:#B08A52;
  color:#FDFBF8;
}

.hpc-badge-name-row::after{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;

  border-radius:4px;
  border:1px solid rgba(23,20,17,.12);
}

.hpc-badge-name-row:has([data-badge-key="new"])::after{ background:#2563EB; }
.hpc-badge-name-row:has([data-badge-key="mint"])::after{ background:#16A34A; }
.hpc-badge-name-row:has([data-badge-key="near_mint"])::after{ background:#14B8A6; }
.hpc-badge-name-row:has([data-badge-key="very_good"])::after{ background:#7C3AED; }
.hpc-badge-name-row:has([data-badge-key="good"])::after{ background:#B08A52; }
.hpc-badge-name-row:has([data-badge-key="used"])::after{ background:#F97316; }
.hpc-badge-name-row:has([data-badge-key="worn"])::after{ background:#DB2777; }
.hpc-badge-name-row:has([data-badge-key="poor"])::after{ background:#DC2626; }
.hpc-badge-name-row:has([data-badge-key="needs_repair"])::after{ background:#111827; }

/* =========================
   HPC COLLECTION — MANUAL ENTRY FORM
========================= */

.hpc-manual-entry-form{
  margin:0 0 22px;
  padding:18px;

  background:#FDFBF8;
  border:1px solid rgba(176,138,82,.28);
  border-radius:10px;
}

.hpc-manual-entry-form h3{
  margin:0 0 8px;

  color:#171411;
  font-family:"Libre Baskerville",serif;
  font-size:20px;
  font-weight:400;
  line-height:1.25;
}

.hpc-manual-entry-form p{
  margin:0 0 16px;

  color:#5E5A55;
  font-family:Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
}

.hpc-manual-entry-fields{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-bottom:14px;
}

.hpc-manual-entry-field label{
  display:block;
  margin:0 0 6px;

  color:#8A6A3F;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.hpc-manual-create-field{
  box-sizing:border-box;
  width:100%;
  height:34px;
  min-height:34px;
  max-height:34px;

  padding:0 10px;

  background:#FAF8F5;
  border:1px solid rgba(176,138,82,.35);
  border-radius:4px;

  color:#171411;
  font-family:Arial,sans-serif;
  font-size:13px;
  line-height:34px;
}

.hpc-manual-create-field:focus{
  outline:none;
  border-color:#B08A52;
}

.hpc-manual-entry-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hpc-manual-create-button{
  height:34px;
  min-height:34px;
  padding:0 14px;

  background:transparent;
  border:1.5px solid #B08A52;
  border-radius:4px;

  color:#B08A52;

  font-family:DM Sans,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;

  cursor:pointer;
}

.hpc-manual-create-button:hover{
  background:#B08A52;
  color:#FDFBF8;
}

.hpc-manual-create-message{
  color:#5E5A55;
  font-family:Arial,sans-serif;
  font-size:13px;
  line-height:1.35;
}

@media(max-width:900px){
  .hpc-manual-entry-fields{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:560px){
  .hpc-manual-entry-fields{
    grid-template-columns:1fr;
  }

  .hpc-manual-entry-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .hpc-manual-create-button{
    width:100%;
  }
}

/* =========================
   HPC COLLECTION — MANUAL ENTRY DROPDOWN UX
========================= */

.hpc-manual-entry-form{
  padding:0;
  overflow:hidden;
}

.hpc-manual-entry-toggle{
  width:100%;
  min-height:46px;
  padding:0 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  background:#fffaf3;
  border:0;
  border-bottom:1px solid rgba(176,138,82,.22);

  color:#171411;
  font-family:Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;

  cursor:pointer;
}

.hpc-manual-entry-toggle strong{
  color:#B08A52;
  font-size:14px;
  line-height:1;
}

.hpc-manual-entry-form:not(.open) .hpc-manual-entry-panel{
  display:none;
}

.hpc-manual-entry-form.open .hpc-manual-entry-toggle strong{
  transform:rotate(180deg);
}

.hpc-manual-entry-panel{
  padding:16px 18px 18px;
}

.hpc-manual-entry-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.hpc-manual-entry-top-row p{
  margin:0;
  max-width:680px;
}

.hpc-manual-entry-fields{
  margin-bottom:10px;
}

.hpc-manual-create-message{
  min-height:18px;
  margin-top:8px;
}

@media(max-width:700px){
  .hpc-manual-entry-top-row{
    align-items:stretch;
    flex-direction:column;
  }

  .hpc-manual-entry-top-row .hpc-manual-create-button{
    width:100%;
  }
}

/* =========================
   HPC MANUAL ENTRY — PHOTO ACTIONS
========================= */

.hpc-collection-item-manual .hpc-collection-image{
  position:relative;
}

.hpc-manual-photo-actions{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  z-index:5;

  display:flex;
  justify-content:center;
  gap:6px;
}

.hpc-manual-photo-actions button{
  min-height:26px;
  padding:0 9px;

  background:rgba(253,251,248,.92);
  border:1px solid rgba(176,138,82,.65);
  border-radius:4px;

  color:#8E6D36;
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;

  cursor:pointer;
}

.hpc-manual-photo-actions button:hover{
  background:#B08A52;
  color:#FDFBF8;
}

/* =========================
   HPC COLLECTION CARD TOP SPACING FIX
========================= */

.hpc-collection-card-top{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:72px;
}

.hpc-collection-fields{
  margin-top:12px;
}

.hpc-collection-card-top .hpc-collection-meta{
  margin-top:auto;
  margin-bottom:0;
}

.hpc-collection-item-manual .hpc-manual-edit-panel{
  margin-top:auto;
  margin-bottom:0;
}