/* ═══════════════════════════════════════════
   Preference List Builder — Styles
   Same theme as CET landing (red brand, Lexend/Inter)
   ═══════════════════════════════════════════ */
:root {
  --brand: #dc2626; --brand-d: #991b1b; --brand-soft: #fef2f2; --brand-ring: rgba(220,38,38,0.15);
  --ink: #0f172a; --ink2: #475569; --muted: #94a3b8; --bg: #f8fafc; --card: #ffffff; --stroke: #e2e8f0;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1); --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1);
  --green: #16a34a; --green-bg: #f0fdf4; --orange: #d97706; --orange-bg: #fff7ed;
  --purple: #7c3aed; --purple-bg: #f5f3ff; --gold: #b8860b; --gold-bg: #fef9e7;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;width:100%;position:relative}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);padding-top:64px;line-height:1.6}

/* ─── LAYOUT ─── */
.pb-wrap{max-width:960px;margin:0 auto;padding:40px 24px 100px}
.pb-hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-d) 100%);border-radius:28px;padding:48px 40px;margin-bottom:40px;color:#fff;box-shadow:0 20px 40px var(--brand-ring);position:relative;overflow:hidden}
.pb-hero::after{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,0.08)}
.pb-hero h1{font-family:'Lexend',sans-serif;font-size:clamp(1.75rem,4vw,2.25rem);font-weight:800;margin-bottom:8px;position:relative}
.pb-hero p{font-size:15px;opacity:0.85;max-width:540px;position:relative}
.pb-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid var(--brand-ring);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

/* ─── STEPPER ─── */
.stepper{display:flex;align-items:center;margin-bottom:36px;overflow-x:auto;padding-bottom:4px}
.step-item{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0}
.step-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;border:2px solid var(--stroke);color:var(--muted);background:var(--card);transition:all 0.3s}
.step-item.active .step-circle{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring)}
.step-item.done .step-circle{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.step-text{font-size:13px;font-weight:700;color:var(--muted);transition:color 0.3s}
.step-item.active .step-text{color:var(--ink)}
.step-item.done .step-text{color:var(--ink2)}
.step-line{flex:1;height:2px;background:var(--stroke);margin:0 12px;min-width:20px}
.step-line.done{background:var(--brand)}

/* ─── PANELS ─── */
.panel{display:none;animation:fadeUp 0.4s ease}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.panel-card{background:var(--card);border:1px solid var(--stroke);border-radius:24px;padding:36px;box-shadow:var(--shadow-lg)}
.panel-title{font-family:'Lexend',sans-serif;font-weight:800;font-size:22px;margin-bottom:8px}
.panel-desc{color:var(--muted);font-size:14px;margin-bottom:28px}

/* ─── FORM ─── */
.fg{margin-bottom:22px}
.fg-label{display:block;font-weight:700;font-size:12px;color:var(--ink2);margin-bottom:7px;text-transform:uppercase;letter-spacing:1px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg-input,.fg-select{width:100%;padding:13px 16px;border:2px solid var(--stroke);border-radius:14px;font-family:inherit;font-size:14px;font-weight:500;outline:none;transition:all 0.2s;background:var(--bg);color:var(--ink)}
.fg-input:focus,.fg-select:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px var(--brand-ring)}
.fg-hint{font-size:11px;color:var(--muted);margin-top:4px}
.fg-optional{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;margin-left:6px;background:var(--bg);padding:2px 8px;border-radius:100px}

/* ─── BUTTONS ─── */
.pb-btn{padding:14px 28px;border:none;border-radius:16px;font-family:'Lexend',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:all 0.25s;display:inline-flex;align-items:center;gap:8px}
.pb-btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;box-shadow:0 8px 20px var(--brand-ring)}
.pb-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--brand-ring)}
.pb-btn-ghost{background:transparent;color:var(--muted);border:2px solid var(--stroke)}
.pb-btn-ghost:hover{border-color:var(--ink2);color:var(--ink)}
.pb-btn-success{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;box-shadow:0 8px 20px var(--brand-ring)}
.pb-btn-success:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--brand-ring)}
.pb-actions{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:12px}
@media (max-width: 640px) {
  .pb-actions { flex-direction: column; align-items: stretch; }
  .pb-actions .pb-btn { justify-content: center; width: 100%; }
}

/* ─── BRANCH SELECTION ─── */
.branch-cats{display:flex;flex-direction:column;gap:20px}
.branch-cat{border:1px solid var(--stroke);border-radius:18px;overflow:hidden;background:var(--card)}
.branch-cat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--bg);cursor:pointer;border-bottom:1px solid var(--stroke);transition:background 0.2s}
.branch-cat-head:hover{background:#eef2ff}
.branch-cat-name{font-weight:800;font-size:14px;display:flex;align-items:center;gap:10px}
.branch-cat-name svg{color:var(--muted);flex-shrink:0}
.branch-cat-count{font-size:11px;color:var(--muted);font-weight:600;background:var(--bg);padding:2px 10px;border-radius:100px;border:1px solid var(--stroke)}
.branch-cat-toggle{font-size:12px;font-weight:700;color:var(--brand);cursor:pointer;background:var(--brand-soft);padding:5px 14px;border-radius:100px;border:none;font-family:inherit;transition:0.2s}
.branch-cat-toggle:hover{background:var(--brand);color:#fff}
.branch-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px;padding:12px 16px}
.branch-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;cursor:pointer;transition:all 0.15s;font-size:13px;font-weight:600;color:var(--ink2);border:1.5px solid transparent}
.branch-opt:hover{background:var(--bg);border-color:var(--stroke)}
.branch-opt.selected{background:var(--brand-soft);border-color:var(--brand-ring);color:var(--brand)}
.branch-chk{width:18px;height:18px;border-radius:5px;border:2px solid var(--stroke);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;font-size:10px}
.branch-opt.selected .branch-chk{background:var(--brand);border-color:var(--brand);color:#fff}
.branch-select-all{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--brand-soft);border-bottom:1px solid var(--brand-ring);cursor:pointer;transition:0.2s;font-weight:700;font-size:13px;color:var(--brand)}
.branch-select-all:hover{background:#fde2e2}
.branch-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.bchip{background:var(--brand-soft);color:var(--brand);padding:5px 12px;border-radius:100px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;border:1px solid var(--brand-ring)}
.bchip-x{cursor:pointer;opacity:0.6;font-size:14px}.bchip-x:hover{opacity:1}

/* ─── COLLEGE CARDS ─── */
.college-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px;margin-top:20px}
.col-card{background:var(--card);border:2px solid var(--stroke);border-radius:18px;padding:18px;cursor:pointer;transition:all 0.25s;position:relative}
.col-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.col-card.selected{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.col-card.aspirational{border-color:var(--orange);background:var(--orange-bg)}
.col-card.aspirational::before{content:'ASPIRATIONAL';position:absolute;top:8px;right:10px;font-size:9px;font-weight:800;color:var(--orange);background:rgba(217,119,6,0.1);padding:2px 8px;border-radius:100px;letter-spacing:0.5px}
.col-name{font-weight:700;font-size:13px;line-height:1.4;margin-bottom:8px;padding-right:80px}
.col-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.col-tag{font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--bg);color:var(--muted);border:1px solid var(--stroke)}
.col-tag.gov{background:#eff6ff;color:#2563eb;border-color:rgba(37,99,235,0.2)}
.col-tag.auto{background:#fff7ed;color:#ea580c;border-color:rgba(234,88,12,0.2)}
.col-tag.minority{background:var(--gold-bg);color:var(--gold);border-color:rgba(184,134,11,0.2)}
.col-tag.branch-tag{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-ring)}
.col-tag.intake{background:#f1f5f9;color:#475569;border-color:#cbd5e1}
.col-pct{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800}
.col-pct small{font-size:11px;color:var(--muted);font-weight:600;margin-left:auto}
.col-chk{position:absolute;top:18px;right:18px;width:22px;height:22px;border-radius:50%;border:2px solid var(--stroke);display:flex;align-items:center;justify-content:center;font-size:11px;transition:all 0.15s}
.col-card.selected .col-chk{background:var(--brand);border-color:var(--brand);color:#fff}
.col-card.aspirational .col-chk{border-color:var(--orange)}
.col-card.aspirational.selected .col-chk{background:var(--orange);border-color:var(--orange);color:#fff}

/* ─── FILTER BAR ─── */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filter-chip{padding:7px 16px;border-radius:100px;font-size:12px;font-weight:700;border:1.5px solid var(--stroke);background:var(--card);color:var(--muted);cursor:pointer;transition:0.2s}
.filter-chip:hover{border-color:var(--ink2)}
.filter-chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.results-count{font-size:13px;color:var(--muted);margin-bottom:12px;font-weight:600}

/* ─── MULTI-REGION CHIP SELECTOR ─── */
.region-chips-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
.region-chip{padding:8px 16px;border-radius:100px;font-size:12px;font-weight:700;border:1.5px solid var(--stroke);background:var(--card);color:var(--ink2);cursor:pointer;transition:all 0.25s;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.region-chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
.region-chip.selected{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border-color:var(--brand);box-shadow:0 4px 12px var(--brand-ring)}
.region-chip.selected:hover{background:linear-gradient(135deg,var(--brand-d),#7f1d1d);box-shadow:0 6px 16px var(--brand-ring)}

/* ─── PREFERENCE LIST (Step 4) ─── */
.pref-container{display:flex;flex-direction:column;gap:24px;align-items:stretch}
.pref-list-wrap{background:var(--card);border:1px solid var(--stroke);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.pref-list-head{padding:16px 20px;border-bottom:1px solid var(--stroke);background:var(--bg);display:flex;justify-content:space-between;align-items:center}
.pref-list-head h3{font-family:'Lexend',sans-serif;font-weight:800;font-size:16px}
.pref-list{list-style:none;min-height:60px}

.pref-item {
  display: table-row !important;
  cursor: grab;
  transition: background-color 0.15s ease;
}
.pref-item.is-fixed {
  cursor: default;
}
.pref-item:active {
  cursor: grabbing;
}
.pref-item.dragging {
  opacity: 0.5;
  background-color: var(--brand-soft) !important;
}
.pref-item.drag-over td {
  border-top: 2.5px solid var(--brand) !important;
}
.pref-item td {
  border-bottom: 1px solid var(--stroke);
  border-right: 1px solid var(--stroke);
  padding: 10px 14px;
}
.pref-item td:last-child {
  border-right: none;
}
.pref-item.asp-item td {
  background-color: rgba(249, 115, 22, 0.03) !important;
}
.pref-item.is-fixed td {
  background-color: rgba(220, 38, 38, 0.03) !important;
}
.pref-item:hover td {
  background-color: var(--brand-soft) !important;
}

.pref-grip {
  color: var(--muted);
}
.pref-num {
  font-weight: 800;
  color: var(--brand);
}
.pref-name {
  font-weight: 600;
  color: var(--ink);
}

/* ─── SUGGESTIONS PANEL ─── */
.sugg-panel{background:var(--card);border:1px solid var(--stroke);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.sugg-head{padding:14px 18px;border-bottom:1px solid var(--stroke);background:var(--bg);font-family:'Lexend',sans-serif;font-weight:800;font-size:14px}
#suggList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 18px;
}
.sugg-item {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}
.sugg-item:hover {
  transform: translateY(-2px);
  border-color: var(--brand-ring);
  box-shadow: var(--shadow);
}
.sugg-info {
  flex: 1;
  min-width: 0;
}
.sugg-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.sugg-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.sugg-add {
  background: var(--brand-soft);
  border: 1px solid var(--brand-ring);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
  transition: 0.2s;
  font-family: inherit;
  flex-shrink: 0;
}
.sugg-add:hover {
  background: var(--brand);
  color: #fff;
}

/* ─── EXPORT ─── */
.export-section{margin-top:24px;padding:24px;background:var(--card);border:1px solid var(--stroke);border-radius:20px;text-align:center;box-shadow:var(--shadow)}
.export-section h3{font-family:'Lexend',sans-serif;font-weight:800;margin-bottom:8px}
.export-section p{color:var(--muted);font-size:13px;margin-bottom:20px}
.export-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ─── SIDEBAR TAB ─── */
.sidebar-tab{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--stroke);padding-bottom:8px}
.sidebar-tab-btn{padding:8px 14px;border-radius:10px 10px 0 0;border:none;background:transparent;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;transition:0.2s;border-bottom:2px solid transparent}
.sidebar-tab-btn.active{color:var(--brand);border-bottom-color:var(--brand);background:var(--brand-soft)}
.sidebar-content{display:none}.sidebar-content.active{display:block}

/* ─── TOAST ─── */
.pb-toast{position:fixed;bottom:24px;right:24px;z-index:9999;background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:14px 20px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;border-left:4px solid var(--brand);animation:slideIn 0.3s ease;font-size:13px;font-weight:600;max-width:400px}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* ─── LOADER ─── */
.pb-loader{display:flex;align-items:center;gap:10px;justify-content:center;padding:40px;color:var(--muted);font-size:13px;font-weight:600}
.pb-spinner{width:20px;height:20px;border:3px solid var(--stroke);border-top-color:var(--brand);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── EMPTY STATE ─── */
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state svg{margin-bottom:16px;opacity:0.4}
.empty-state h3{font-family:'Lexend',sans-serif;font-weight:800;color:var(--ink);margin-bottom:8px}
.empty-state p{font-size:13px}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  .pb-wrap{padding:20px 16px 80px}
  .pb-hero{padding:32px 24px;border-radius:20px}
  .panel-card{padding:24px 18px;border-radius:18px}
  .fg-row{grid-template-columns:1fr}
  .branch-list{grid-template-columns:1fr}
  .pref-container{grid-template-columns:1fr}
  .college-grid{grid-template-columns:1fr}
  .stepper{gap:0}
  .step-text{display:none}
  .pb-actions{flex-direction:column}
  .pb-actions .pb-btn{width:100%}
}
/* ─── EDIT STATUS & MODAL ─── */
.edit-status { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; border: 1.5px solid var(--stroke); background: var(--bg); margin-bottom: 24px; animation: slideIn 0.4s ease; transition: opacity 0.3s ease; }
.edit-status-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.edit-status-text { flex: 1; }
.edit-status-text strong { display: block; font-family: 'Lexend', sans-serif; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.edit-status-text span { font-size: 12px; color: var(--muted); line-height: 1.4; }

.edit-status.ok { border-color: rgba(22, 163, 74, 0.2); background: #f0fdf4; }
.edit-status.ok .edit-status-icon { background: #dcfce7; color: var(--green); }
.edit-status.warning { border-color: rgba(217, 119, 6, 0.2); background: #fffbeb; }
.edit-status.warning .edit-status-icon { background: #fef3c7; color: var(--orange); }
.edit-status.critical { border-color: rgba(220, 38, 38, 0.2); background: #fef2f2; }
.edit-status.critical .edit-status-icon { background: #fee2e2; color: var(--brand); }
.edit-status.locked { border-color: rgba(15, 23, 42, 0.1); background: #f8fafc; }
.edit-status.locked .edit-status-icon { background: #e2e8f0; color: var(--ink); }
.edit-status.info { border-color: rgba(37, 99, 235, 0.2); background: #eff6ff; }
.edit-status.info .edit-status-icon { background: #dbeafe; color: #2563eb; }

.pb-btn-edit { background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 12px; font-size: 12px; }
.pb-btn-edit:hover { background: #000; transform: translateY(-1px); }
.pb-btn-report { background: var(--brand-soft); color: var(--brand); padding: 8px 16px; border-radius: 12px; font-size: 12px; border: 1.5px solid var(--brand-ring); }
.pb-btn-report:hover { background: var(--brand); color: #fff; }

.save-profile-wrap { display: flex; align-items: center; gap: 12px; margin-top: -10px; margin-bottom: 24px; padding: 12px; background: var(--brand-soft); border-radius: 16px; border: 1px dashed var(--brand-ring); }
.pb-btn-save { background: var(--brand); color: #fff; padding: 10px 20px; font-size: 13px; box-shadow: 0 4px 12px var(--brand-ring); transition: 0.2s; }
.pb-btn-save:hover { background: var(--brand-d); transform: scale(1.02); }
.save-hint { font-size: 11px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }

.pb-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(8px); }
.pb-modal.show { display: flex; animation: fadeIn 0.3s ease; }
.pb-modal-card { background: var(--card); width: 100%; max-width: 500px; border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.pb-modal-head { padding: 20px 24px; border-bottom: 1px solid var(--stroke); display: flex; justify-content: space-between; align-items: center; }
.pb-modal-head h3 { font-family: 'Lexend', sans-serif; font-size: 18px; font-weight: 800; }
.pb-modal-close { background: none; border: none; font-size: 24px; color: var(--muted); cursor: pointer; }
.pb-modal-body { padding: 24px; }
.pb-modal-body p { font-size: 14px; color: var(--ink2); margin-bottom: 20px; line-height: 1.5; }
.pb-modal-foot { padding: 16px 24px; background: var(--bg); border-top: 1px solid var(--stroke); display: flex; justify-content: flex-end; gap: 12px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; max-width: 800px; margin: 0 auto; }
.dashboard-hero-card { padding: 40px; text-align: center; }

@media (max-width: 1024px) {
  .pb-wrap { padding: 20px 16px 80px; }
  .panel-card { padding: 24px 16px; }
  .pb-hero { padding: 32px 24px; border-radius: 20px; }
}

@media (max-width: 640px) {
  .pb-actions { flex-direction: column; align-items: stretch; }
  .pb-actions .pb-btn { justify-content: center; width: 100%; }
  .dashboard-hero-card { padding: 24px 16px; }
}

@media (max-width: 480px) {
  .fg-row { grid-template-columns: 1fr; }
  .pb-hero h1 { font-size: 20px; }
  .pb-hero p { font-size: 13px; }
  .col-name { font-size: 12px; padding-right: 40px; }
  .col-pct { font-size: 13px; }
  .col-pct small { font-size: 10px; }
  .col-chk { width: 18px; height: 18px; top: 12px; right: 12px; }
}


/* ─── TEMPLATE LIBRARY STYLES ─── */
.pb-btn-template {
  background: linear-gradient(135deg, var(--brand), var(--brand-d));
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px var(--brand-ring);
  transition: all 0.2s ease;
}
.pb-btn-template:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--brand-ring);
  filter: brightness(1.1);
}
.pb-btn-template:active {
  transform: translateY(0);
}

.tpl-lib-header {
  margin-bottom: 20px;
  background: #ffffff;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

.tpl-filter-bar {
  background: #ffffff;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.tpl-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tpl-fchip {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: var(--bg);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tpl-fchip:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

.tpl-fchip.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 2px 6px var(--brand-ring);
}

.tpl-filter-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tpl-results-count {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 16px;
}

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.tpl-card {
  background: #ffffff;
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.tpl-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow-lg), 0 8px 24px var(--brand-ring);
}

.tpl-desc {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpl-tag {
  background: var(--brand-soft);
  color: var(--brand);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid var(--brand-ring);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Admin Template Manager List Items */
.tpl-mgmt-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}
.tpl-mgmt-item:hover {
  border-color: var(--gold);
  background: #fffbeb;
}

.tpl-mgmt-info {
  min-width: 0;
  flex: 1;
  padding-right: 16px;
}
.tpl-mgmt-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.tpl-mgmt-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 8px;
}

/* ─── CATEGORIZED HORIZONTAL SCROLL & PREMIUM CARDS ─── */
.tpl-row-scroll {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}
.tpl-row-scroll::-webkit-scrollbar {
  display: none; /* Hide scrollbars for a clean mobile-like feel */
}

.tpl-card-v2 {
  background: #ffffff;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  text-align: left;
  width: 100%;
}

.tpl-card-v2:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--brand-ring);
}

.tpl-card-banner {
  height: 135px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.tpl-card-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
}

/* Glassmorphic decorative circle behind the text */
.tpl-card-banner::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 75%;
  height: 90%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.tpl-banner-tag {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tpl-banner-accent {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 8px;
  font-weight: 800;
  opacity: 0.75;
  letter-spacing: 1px;
  z-index: 3;
  text-transform: uppercase;
}

.tpl-banner-title {
  font-family: 'Lexend', sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  margin-top: auto;
  z-index: 3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.tpl-banner-avatar {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 95%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply; /* Composite the white background of the image with the gradient */
  filter: drop-shadow(-2px 4px 6px rgba(0, 0, 0, 0.15));
}

.tpl-show-all-btn {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  background: var(--brand);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px var(--brand-ring);
}

.tpl-show-all-btn:hover {
  background: var(--brand-d);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px var(--brand-ring);
}

@media(max-width: 640px) {
  .tpl-row-scroll .tpl-card-v2 {
    width: 240px !important;
    min-width: 240px !important;
  }
  .tpl-card-banner {
    height: 135px;
  }
}

/* ─── EXCEL TABLE VIEW FOR STEP 3 ─── */
#collegeGrid {
  display: block !important;
}
.excel-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  margin-top: 20px;
  background: var(--card);
}
.excel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.excel-table th, .excel-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--stroke);
  border-right: 1px solid var(--stroke);
}
.excel-table th:last-child, .excel-table td:last-child {
  border-right: none;
}
.excel-table th {
  background-color: var(--bg);
  color: var(--ink);
  font-weight: 700;
  user-select: none;
  font-family: 'Lexend', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.excel-table tbody tr {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.excel-table tbody tr:hover td {
  background-color: var(--brand-soft) !important;
}
.excel-table tbody tr.selected td {
  background-color: rgba(220, 38, 38, 0.03);
}
.excel-table tbody tr.selected.aspirational td {
  background-color: rgba(249, 115, 22, 0.03);
}
.excel-table tbody tr.aspirational td:first-child {
  border-left: 4px solid var(--orange);
}
.excel-th-select, .excel-td-select {
  width: 45px;
  text-align: center;
  padding: 8px !important;
}
.excel-th-select input, .excel-td-select input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}
.excel-td-name {
  font-weight: 600;
  color: var(--ink);
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.excel-td-pct {
  color: var(--brand);
  font-weight: 700;
}
.col-tag.asp-tag {
  background: #fff7ed;
  color: var(--orange);
  border-color: rgba(234, 88, 12, 0.2);
}
.col-tag.reach-tag {
  background: #f0fdf4;
  color: var(--green);
  border-color: rgba(22, 163, 74, 0.2);
}

/* ─── EXAM SELECTOR RADIO BUTTONS ─── */
.exam-radio-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 2px solid var(--stroke);
  background: var(--card);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--ink2);
  user-select: none;
}
.exam-radio-label:hover {
  border-color: var(--brand-ring);
  background: var(--bg);
}
.exam-radio-label input {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}
.exam-radio-label:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: 0 4px 12px var(--brand-ring);
}

/* ─── LOCKED RESULTS PAYWALL STYLES ─── */
.locked-row {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.lock-paywall-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(135deg, #ffffff 0%, #fffcfc 100%);
  border: 1px dashed var(--brand-ring);
  border-radius: 20px;
  margin-top: 24px;
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.05);
}

.lock-icon-container {
  width: 64px;
  height: 64px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 16px rgba(220, 38, 38, 0.1);
}

.lock-paywall-card h3 {
  font-family: 'Lexend', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}

.lock-paywall-card p {
  font-size: 14px;
  color: var(--muted);
  max-width: 500px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.lock-paywall-card .unlock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: var(--brand);
  color: #fff !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  border-radius: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px var(--brand-ring);
  font-family: 'Lexend', sans-serif;
}

.lock-paywall-card .unlock-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--brand-ring);
  background: #b91c1c;
}