/* ============================================================
   v50 -- ZOOM TEMPLATE SYSTEM
   ============================================================ */
.tpl-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; }
.tpl-tab {
  padding:8px 16px; border-radius:10px; font-size:0.74rem; font-weight:700;
  cursor:pointer; border:1px solid rgba(168,85,247,0.15); background:transparent;
  color:var(--white-dim); transition:all 0.2s; font-family:'Satoshi',sans-serif;
  white-space:nowrap;
}
.tpl-tab:hover { border-color:rgba(168,85,247,0.35); color:var(--white); }
.tpl-tab-active { background:linear-gradient(135deg,#7c3aed,#a855f7) !important; color:#fff !important; border-color:transparent !important; }
.tpl-tab-content { display:none; }
.tpl-tab-content.tpl-visible { display:block; }

/* Filter Pills */
.tpl-filter-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.tpl-pill {
  padding:6px 14px; border-radius:20px; font-size:0.7rem; font-weight:700;
  cursor:pointer; border:1px solid rgba(168,85,247,0.12); background:rgba(168,85,247,0.04);
  color:var(--white-dim); transition:all 0.2s; font-family:'Satoshi',sans-serif;
  white-space:nowrap; user-select:none;
}
.tpl-pill:hover { border-color:rgba(168,85,247,0.3); color:var(--white); background:rgba(168,85,247,0.08); }
.tpl-pill-active { background:linear-gradient(135deg,#7c3aed,#a855f7) !important; color:#fff !important; border-color:transparent !important; }

/* Search */
.tpl-search-wrap { position:relative; flex:1; max-width:280px; }
.tpl-search {
  width:100%; padding:7px 14px 7px 34px; border-radius:10px; border:1px solid rgba(168,85,247,0.15);
  background:rgba(168,85,247,0.04); color:var(--white); font-size:0.78rem;
  font-family:'Satoshi',sans-serif; outline:none; transition:border-color 0.2s;
}
.tpl-search:focus { border-color:rgba(168,85,247,0.4); }
.tpl-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:0.8rem; color:var(--text-muted); pointer-events:none; }

/* Gallery Grid */
.tpl-gallery {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px; margin-bottom:24px;
}
.tpl-card {
  background:var(--black-card); border:1px solid rgba(168,85,247,0.1);
  border-radius:14px; overflow:hidden; cursor:pointer; transition:all 0.25s;
  position:relative;
}
.tpl-card:hover { border-color:rgba(168,85,247,0.35); transform:translateY(-3px); box-shadow:0 8px 32px rgba(168,85,247,0.1); }
.tpl-card-thumb {
  width:100%; aspect-ratio:1/1; background:#0d0f14; display:flex;
  align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.tpl-card-thumb img { width:100%; height:100%; object-fit:cover; }
.tpl-card-thumb-placeholder {
  font-size:2.5rem; opacity:0.3;
}
.tpl-card-info { padding:12px 14px; }
.tpl-card-name { font-size:0.78rem; font-weight:700; color:var(--white); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpl-card-meta { font-size:0.65rem; color:var(--text-muted); display:flex; gap:8px; align-items:center; }
.tpl-card-badge {
  position:absolute; top:8px; right:8px; font-size:0.58rem; font-weight:800;
  padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:0.05em;
  background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; z-index:2;
}
.tpl-card-fav {
  position:absolute; top:8px; left:8px; font-size:1rem; cursor:pointer;
  z-index:2; opacity:0.4; transition:all 0.2s; filter:grayscale(1);
}
.tpl-card-fav:hover, .tpl-card-fav.tpl-fav-on { opacity:1; filter:grayscale(0); }
.tpl-card-dims { font-size:0.6rem; color:var(--text-muted); background:rgba(255,255,255,0.05); padding:2px 6px; border-radius:4px; }

/* Format Filter */
.tpl-format-bar { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px; }
.tpl-fmt-pill {
  padding:4px 10px; border-radius:8px; font-size:0.62rem; font-weight:600;
  cursor:pointer; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02);
  color:var(--white-dim); transition:all 0.2s; font-family:'Satoshi',sans-serif;
}
.tpl-fmt-pill:hover { border-color:rgba(168,85,247,0.25); color:var(--white); }
.tpl-fmt-pill-active { background:rgba(168,85,247,0.15) !important; color:#a855f7 !important; border-color:rgba(168,85,247,0.3) !important; }

/* Editor Layout */
.tpl-editor-wrap {
  display:grid; grid-template-columns:1fr 340px; gap:24px; min-height:500px;
}
@media (max-width:900px) { .tpl-editor-wrap { grid-template-columns:1fr; } }
.tpl-preview-panel {
  background:#0a0c14; border:1px solid rgba(168,85,247,0.1); border-radius:16px;
  padding:20px; display:flex; align-items:center; justify-content:center;
  overflow:auto; position:relative; min-height:400px;
}
.tpl-preview-container { position:relative; box-shadow:0 4px 40px rgba(0,0,0,0.5); }
.tpl-edit-panel {
  background:rgba(20,28,52,0.55); border:1px solid rgba(168,85,247,0.1);
  border-radius:16px; padding:20px; overflow-y:auto; max-height:80vh;
}
.tpl-edit-title { font-size:0.68rem; color:#a855f7; text-transform:uppercase; letter-spacing:0.12em; font-weight:700; margin-bottom:14px; }
.tpl-field-group { margin-bottom:14px; }
.tpl-field-label { font-size:0.68rem; color:var(--white-dim); margin-bottom:5px; font-weight:600; }
.tpl-field-input {
  width:100%; padding:8px 12px; border-radius:8px; border:1px solid rgba(168,85,247,0.12);
  background:rgba(0,0,0,0.3); color:var(--white); font-size:0.78rem;
  font-family:'Satoshi',sans-serif; outline:none; transition:border-color 0.2s;
}
.tpl-field-input:focus { border-color:rgba(168,85,247,0.4); }
.tpl-field-textarea { min-height:60px; resize:vertical; }
.tpl-field-file { display:none; }
.tpl-field-file-btn {
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px;
  border:1px dashed rgba(168,85,247,0.25); background:rgba(168,85,247,0.04);
  color:var(--white-dim); font-size:0.72rem; cursor:pointer; transition:all 0.2s;
}
.tpl-field-file-btn:hover { border-color:rgba(168,85,247,0.4); color:var(--white); }
.tpl-photo-preview { width:100%; max-height:120px; object-fit:cover; border-radius:8px; margin-top:6px; display:none; }

/* Export Bar */
.tpl-export-bar {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; padding-top:16px;
  border-top:1px solid rgba(168,85,247,0.1);
}
.tpl-export-btn {
  padding:9px 18px; border-radius:10px; font-size:0.74rem; font-weight:700;
  cursor:pointer; border:1px solid rgba(168,85,247,0.2); background:rgba(168,85,247,0.06);
  color:var(--white); transition:all 0.2s; font-family:'Satoshi',sans-serif;
}
.tpl-export-btn:hover { background:rgba(168,85,247,0.15); border-color:rgba(168,85,247,0.4); }
.tpl-export-btn-primary {
  background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
  color:#fff !important; border-color:transparent !important;
}
.tpl-export-btn-primary:hover { opacity:0.9; }

/* Agent Profile */
.tpl-profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px) { .tpl-profile-grid { grid-template-columns:1fr; } }
.tpl-profile-full { grid-column:span 2; }
@media (max-width:700px) { .tpl-profile-full { grid-column:span 1; } }
.tpl-headshot-wrap {
  width:120px; height:120px; border-radius:50%; overflow:hidden;
  border:3px solid rgba(168,85,247,0.3); margin:0 auto 16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:#0d0f14;
  position:relative; transition:border-color 0.2s;
}
.tpl-headshot-wrap:hover { border-color:rgba(168,85,247,0.6); }
.tpl-headshot-wrap img { width:100%; height:100%; object-fit:cover; }
.tpl-headshot-placeholder { font-size:2.5rem; opacity:0.3; }
.tpl-headshot-overlay {
  position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.7);
  font-size:0.6rem; color:#fff; text-align:center; padding:4px; opacity:0;
  transition:opacity 0.2s;
}
.tpl-headshot-wrap:hover .tpl-headshot-overlay { opacity:1; }

/* PLP Builder */
.tpl-plp-pieces { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; margin-bottom:20px; }
.tpl-plp-piece {
  background:var(--black-card); border:1px solid rgba(168,85,247,0.1);
  border-radius:12px; padding:14px; cursor:pointer; transition:all 0.2s;
  position:relative; user-select:none;
}
.tpl-plp-piece:hover { border-color:rgba(168,85,247,0.3); }
.tpl-plp-piece.tpl-plp-selected { border-color:rgba(168,85,247,0.5); background:rgba(168,85,247,0.06); }
.tpl-plp-piece-check {
  position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(168,85,247,0.2); display:flex; align-items:center;
  justify-content:center; font-size:0.65rem; transition:all 0.2s;
}
.tpl-plp-selected .tpl-plp-piece-check { background:#7c3aed; border-color:#7c3aed; color:#fff; }
.tpl-plp-piece-icon { font-size:1.5rem; margin-bottom:8px; }
.tpl-plp-piece-name { font-size:0.76rem; font-weight:700; color:var(--white); }
.tpl-plp-piece-desc { font-size:0.65rem; color:var(--text-muted); margin-top:4px; }

/* My Templates */
.tpl-saved-empty { text-align:center; padding:60px 24px; color:var(--text-muted); }

/* Loading */
.tpl-loading { text-align:center; padding:60px; color:var(--white-dim); }
.tpl-loading-spinner { display:inline-block; width:32px; height:32px; border:3px solid rgba(168,85,247,0.15); border-top-color:#a855f7; border-radius:50%; animation:tplSpin 0.8s linear infinite; margin-bottom:12px; }
@keyframes tplSpin { to { transform:rotate(360deg); } }

/* Back button in editor */
.tpl-back-btn {
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:8px;
  border:1px solid rgba(168,85,247,0.15); background:transparent; color:var(--white-dim);
  font-size:0.72rem; font-weight:600; cursor:pointer; transition:all 0.2s; margin-bottom:16px;
}
.tpl-back-btn:hover { border-color:rgba(168,85,247,0.35); color:var(--white); }

/* Status messages */
.tpl-status {
  padding:10px 16px; border-radius:10px; font-size:0.76rem; font-weight:600;
  margin-bottom:14px; display:none;
}
.tpl-status-success { display:block; background:rgba(52,211,153,0.08); border:1px solid rgba(52,211,153,0.2); color:#34D399; }
.tpl-status-error { display:block; background:rgba(248,113,113,0.08); border:1px solid rgba(248,113,113,0.2); color:#F87171; }