/* Base wrapper/card */
.ccg-hodl-wrap { width: 100%; }
.ccg-hodl-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
}

/* Fields row: ALL on one line (desktop) with even spacing */
.ccg-row-top{
  display: grid;
  grid-template-columns: 3fr 1.35fr 1.35fr 70px 1.8fr; /* coin | date | coin amount | OR | investment */
  column-gap: 22px; /* even spacing */
  row-gap: 0;
  align-items: end;
}

.ccg-field { min-width: 0; }
.ccg-field label { display: block; margin-bottom: 6px; font-size: 13px; }
.ccg-field input { width: 100%; box-sizing: border-box; }

/* Coin search */
.ccg-field-coin input[type="search"] { width: 100%; }

/* OR column */
.ccg-field-or{
  display:flex;
  align-items:end;
  justify-content:center;
}
.ccg-or{
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 6px;
  font-weight: 600;
  opacity: .7;
  white-space: nowrap;
}

/* Button row centered under fields */
.ccg-row-btn{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}
.ccg-row-btn .ccg-btn{
  min-width: 240px;
  max-width: 100%;
}

/* Button */
.ccg-btn{
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 600;
}

/* Status */
.ccg-status{
  margin-top: 12px;
  font-size: 13px;
}
.ccg-status.ccg-error{
  color: #b42318;
}

/* Results grid */
.ccg-results{ margin-top: 14px; }
.ccg-result-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ccg-result{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px;
}
.ccg-k{ font-size: 12px; opacity: .75; margin-bottom: 6px; }
.ccg-v{ font-size: 16px; font-weight: 700; }

/* Chart */
.ccg-chart-wrap{
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
}
.ccg-chart-title{
  font-weight: 700;
  margin-bottom: 10px;
}
.ccg-chart-box{
  position: relative;
  height: 320px;
  max-height: 320px;
  overflow: hidden;
}
.ccg-growth-chart{
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.ccg-chart-note{
  margin-top: 8px;
  font-size: 12px;
  opacity: .75;
}

.ccg-footnote{
  margin-top: 12px;
  font-size: 12px;
  opacity: .75;
}

/* Tablet: keep clean and even */
@media (max-width: 1100px){
  .ccg-row-top{
    grid-template-columns: 1fr 1fr;
    row-gap: 14px;
    column-gap: 18px;
  }
  .ccg-field-coin{ grid-column: 1 / 3; }
  .ccg-field-date{ grid-column: 1 / 2; }
  .ccg-field-coinamt{ grid-column: 2 / 3; }
  .ccg-field-or{ display:none; }
  .ccg-field-invest{ grid-column: 1 / 3; }
  .ccg-row-btn .ccg-btn{ min-width: 260px; }
  .ccg-result-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: stack fields + full-width button */
@media (max-width: 640px){
  .ccg-row-top{
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .ccg-field-coin,
  .ccg-field-date,
  .ccg-field-coinamt,
  .ccg-field-invest{
    grid-column: 1 / 2;
  }
  .ccg-row-btn .ccg-btn{ width: 100%; min-width: 0; }
  .ccg-result-grid{ grid-template-columns: 1fr; }
}