/* ============================================================
   APPEARANCE – Match with "Measurements" visual language
   Namespace: tp-app-*
============================================================ */

/* Card shell */
.tp-app-card{
  background: linear-gradient(180deg,#0b0b0d 0%, #121214 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  color:#fff;
  box-shadow:0 0 16px rgba(0,0,0,.45);
  overflow:hidden;
}

/* Header */
.tp-app-header{
  background: linear-gradient(180deg,#1a1a1d 0%, #101012 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:12px 18px;
}
.tp-app-title{
  margin:0; display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.05rem;
}
.tp-app-title i{ color:#D90404; font-size:1.2rem; }

/* NEW: subtitle under the title (same style as others) */
.tp-app-subtitle{
  font-size:.9rem;
  opacity:.8;
  margin-top:2px;
}

/* Body */
.tp-app-body{ padding:14px 18px 18px; }

/* List like Measurements */
.tp-app-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }

.tp-app-row{
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg,#151517 0%, #121214 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:14px 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Left cluster (icon + label) */
.tp-app-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.tp-app-ic{
  width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  background: radial-gradient(140% 140% at 30% 20%, #D90404, #730707);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.tp-app-ic i{ font-size:16px; color:#fff; line-height:0; }
.tp-app-label{
  color:#d6d6d6; font-weight:600; font-size:.95rem; letter-spacing:.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Right value */
.tp-app-right{ display:flex; align-items:center; gap:6px; }
.tp-app-value{ font-weight:800; font-size:1rem; letter-spacing:.15px; color:#fff; }
.tp-app-placeholder{ color:#9fa0a3; font-style:italic; font-weight:600; }

/* Hover micro interactions */
.tp-app-row:hover{ border-color: rgba(217,4,4,.25); box-shadow: inset 0 0 0 1px rgba(217,4,4,.1); }
.tp-app-row:hover .tp-app-ic{ filter: brightness(1.05); }