/* ==========================================
   SANDBOX PORTAL — TALENT HUNTER AESTHETIC
   ========================================== */

:root{
  --app-bg:#ffffff;
  --surface:#ffffff;
  --sidebar-bg:#f8fafc;
  --line:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;
  --hover:#eef2ff;
  --active:#e0e7ff;
  --primary:#1d4ed8;
  --primary-hover:#1e40af;
  --primary-light:#eff6ff;
  --primary-10:rgba(29,78,216,.06);
  --primary-20:rgba(29,78,216,.12);
  --shadow:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -2px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--app-bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ── App Shell ── */
.app-shell{
  height:100vh;
  display:flex;
  overflow:hidden;
}

/* ── Sidebar ── */
.sidebar{
  width:260px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  height:100vh;
  flex-shrink:0;
}

.sidebar-top{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--line);
}

.workspace{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
}

.workspace-logo{
  max-width:160px;
  width:100%;
  height:auto;
  display:block;
}

/* ── Nav ── */
.nav{
  padding:8px;
  overflow:auto;
  flex:1;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:6px;
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  transition:all .15s;
  margin-bottom:1px;
}

.nav-icon{
  width:18px;
  display:inline-flex;
  justify-content:center;
  color:var(--muted);
  flex-shrink:0;
}

.nav-label{
  flex:1;
  color:var(--text);
}

.nav-pill{
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  background:#fff;
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:10px;
}

.nav-pill.is-ai{
  color:var(--primary);
  background:var(--primary-light);
  border-color:var(--primary-20);
  font-weight:700;
}

.nav-item:hover{
  background:rgba(0,0,0,.03);
  color:var(--text);
}

.nav-item.is-active{
  color:var(--primary);
  background:rgba(29,78,216,.08);
}

.nav-item.is-active .nav-icon,
.nav-item.is-active .nav-label{
  color:var(--primary);
}

.nav-item.is-disabled{
  opacity:0.35;
  cursor:not-allowed;
  pointer-events:none;
}

.sidebar-bottom{
  margin-top:auto;
  padding:8px;
  border-top:1px solid var(--line);
}

/* ── Main ── */
.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

/* ── Topbar ── */
.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  flex-shrink:0;
}

.topbar-search{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:980px;
  min-width:0;
}

.search-field{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 12px;
  min-width:0;
  transition:border-color .15s;
}

.search-field:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(29,78,216,.08);
}

.search-icon{
  color:var(--muted);
  font-size:14px;
  flex-shrink:0;
}

.search-input{
  border:0;
  outline:none;
  width:100%;
  font-size:13px;
  color:var(--text);
  background:transparent;
  min-width:0;
  font-family:inherit;
}

.search-input::placeholder{ color:var(--muted); }

.count-input{
  width:56px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px;
  font-size:13px;
  background:#fff;
  color:var(--text);
  text-align:center;
  font-family:inherit;
}

.count-input:focus{
  outline:none;
  border-color:var(--primary);
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.client-logo{
  width:32px;
  height:32px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid var(--line);
}

.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  transition:background .2s;
  flex-shrink:0;
}

.status-dot.is-loading{
  background:#3b82f6;
  animation:pulse 1s ease-in-out infinite;
}

.status-dot.is-error{ background:#ef4444; }

@keyframes pulse{
  0%,100%{ opacity:1 }
  50%{ opacity:.4 }
}

/* ── Match Topbar ── */
.topbar-match{
  height:auto;
  min-height:56px;
  padding:10px 18px;
  align-items:flex-start;
}

.match-topbar-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex:1;
  min-width:0;
}

.match-topbar-textarea{
  flex:1;
  min-height:44px;
  max-height:100px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 12px;
  font-size:13px;
  font-family:inherit;
  color:var(--text);
  background:#fff;
  resize:vertical;
  line-height:1.5;
  transition:border-color .15s;
}

.match-topbar-textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(29,78,216,.08);
}

.match-topbar-textarea::placeholder{ color:var(--muted); }

.match-topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  padding-top:2px;
}

.match-progress-inline{
  display:none;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--primary);
  font-weight:600;
}

.match-progress-inline.active{ display:flex; }

.match-progress-spinner{
  width:14px;
  height:14px;
  border:2px solid var(--primary-20);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .8s linear infinite;
  flex-shrink:0;
}

@keyframes spin{ to{ transform:rotate(360deg) } }

/* ── Buttons — Hunter style ── */
.btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:8px 14px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  font-size:13px;
  font-family:inherit;
  white-space:nowrap;
  transition:all .15s;
}

.btn:hover{ background:var(--hover); }

.btn.primary{
  border-color:rgba(29,78,216,.25);
  background:rgba(29,78,216,.10);
  color:var(--primary);
}

.btn.primary:hover{
  background:rgba(29,78,216,.16);
}

.btn.ghost{
  background:#f1f5f9;
  color:#475569;
  border-color:#e2e8f0;
}

.btn.ghost:hover{ background:#e2e8f0; }

.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ── Content & Grid ── */
.content{
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.content-head{ display:none; }

.page{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  flex:1;
  overflow:hidden;
}

/* ── Panels — Hunter style ── */
.panel{
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
  overflow:hidden;
}

.panel:last-child{ border-right:none; }

.panel-head{
  padding:0 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-shrink:0;
  height:48px;
  background:var(--surface);
}

.panel-title{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}

.panel-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.section-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  margin-bottom:8px;
}

/* ── Results Cards — Hunter style ── */
.results{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  overflow-y:auto;
}

.results::-webkit-scrollbar{ width:5px }
.results::-webkit-scrollbar-track{ background:transparent }
.results::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:3px }
.results::-webkit-scrollbar-thumb:hover{ background:#94a3b8 }

.card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:14px 16px;
  cursor:pointer;
  transition:all .15s;
}

.card:hover{
  border-color:#c7d2fe;
  box-shadow:0 2px 8px rgba(29,78,216,.06);
}

.card:focus{
  outline:none;
  border-color:var(--primary);
  background:rgba(29,78,216,.02);
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.card-title{
  font-weight:700;
  font-size:14px;
  color:var(--text);
  margin-bottom:2px;
}

.card-position{
  font-size:13px;
  color:var(--text);
  font-weight:500;
  margin-top:2px;
}

.card-meta{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

.card-summary{
  font-size:12px;
  color:var(--muted);
  font-style:italic;
  line-height:1.4;
  margin-top:8px;
}

.card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:8px;
}

.tag-badge{
  display:inline-flex;
  align-items:center;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#475569;
  font-size:10px;
  font-weight:500;
  padding:2px 7px;
  border-radius:10px;
}

.card-id{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:10px;
}

/* ── Stars & Scores ── */
.star{ color:#e5e7eb; font-size:14px }
.star.filled{ color:#f59e0b }

.score-high{ color:#fff; background:#16a34a }
.score-mid{ color:#fff; background:#2563eb }
.score-low{ color:#fff; background:#ca8a04 }
.score-none{ color:#fff; background:#dc2626 }

.match-count-breakdown{
  display:flex;
  gap:6px;
  align-items:center;
}

.match-count-star{
  font-size:11px;
  font-weight:600;
  padding:2px 6px;
  border-radius:4px;
}

.match-count-star.star-5{ color:#15803d; background:#dcfce7 }
.match-count-star.star-4{ color:#1d4ed8; background:#dbeafe }
.match-count-star.star-3{ color:#a16207; background:#fef9c3 }
.match-count-star.star-2{ color:#dc2626; background:#fee2e2 }

/* ── Detail Panel — Hunter style ── */
.detail{
  padding:14px;
  flex:1;
  overflow-y:auto;
}

.detail::-webkit-scrollbar{ width:5px }
.detail::-webkit-scrollbar-track{ background:transparent }
.detail::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:3px }
.detail::-webkit-scrollbar-thumb:hover{ background:#94a3b8 }

.detail.empty{
  color:var(--muted);
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}

.detail-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:12px;
}

.detail-title{
  font-size:18px;
  font-weight:800;
  color:var(--text);
}

.detail-sub{
  font-size:14px;
  color:var(--muted);
  margin-top:2px;
  font-weight:500;
}

.detail-sub a{
  color:var(--primary);
  text-decoration:none;
}

.detail-sub a:hover{ text-decoration:underline }

.detail-body{
  font-size:13px;
  line-height:1.6;
}

.detail-body .section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  margin-bottom:10px;
}

.detail-body .section .section-title{
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}

.detail-body .pre{
  white-space:pre-wrap;
  word-break:break-word;
}

.detail-body strong{ color:var(--text) }

.detail-body a{
  color:var(--primary);
  text-decoration:none;
}

.detail-body a:hover{ text-decoration:underline }

.contact-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:13px;
}

.contact-line svg{
  width:14px;
  height:14px;
  color:var(--muted);
  flex-shrink:0;
}

.contact-line a{
  color:var(--primary);
  text-decoration:none;
}

.contact-line a:hover{ text-decoration:underline }

.btn-download{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  background:linear-gradient(135deg,#0a66c2,#004182);
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 2px 4px rgba(10,102,194,.3);
  font-family:inherit;
}

.btn-download:hover{
  background:linear-gradient(135deg,#004182,#00315f);
  box-shadow:0 4px 8px rgba(10,102,194,.4);
  transform:translateY(-1px);
}

/* Standalone sections (match detail: skills, experience, education) */
.detail > .section,
.detail > .match-analysis-section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  margin-bottom:10px;
}

.detail > .section > .section-title{
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}

.detail h3,.detail h4{
  margin:12px 0 8px;
}

/* ── Match Analysis ── */
.match-analyzing{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:40px;
  color:var(--muted);
  font-size:13px;
}

.match-analyzing-spinner{
  width:24px;
  height:24px;
  border:3px solid var(--primary-20);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

/* AI Analysis comment card */
.match-analysis-comment{
  font-size:13px;
  line-height:1.7;
  color:var(--text);
  margin-bottom:12px;
  padding:16px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:10px;
  border-left:3px solid var(--primary);
}

/* Tech/Seniority badges */
.match-badge{
  font-size:11px;
  font-weight:700;
  padding:5px 12px;
  border-radius:8px;
  background:#f8fafc;
  border:1px solid var(--line);
  letter-spacing:.2px;
}

/* Analysis sections — Hunter card style */
.match-analysis-section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  margin-bottom:10px;
}

.match-analysis-section-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:6px;
}

/* Strengths */
.match-strength{
  font-size:13px;
  color:#15803d;
  padding:6px 10px;
  line-height:1.5;
  background:#f0fdf4;
  border-radius:6px;
  margin-bottom:4px;
  border-left:2px solid #22c55e;
}

/* Weaknesses */
.match-weakness{
  font-size:13px;
  color:#b91c1c;
  padding:6px 10px;
  line-height:1.5;
  background:#fef2f2;
  border-radius:6px;
  margin-bottom:4px;
  border-left:2px solid #ef4444;
}

/* Cultural fit */
.match-cultural{
  font-size:13px;
  color:#475569;
  line-height:1.6;
  padding:10px 12px;
  background:#f8fafc;
  border-radius:8px;
  border:1px solid #e2e8f0;
}

/* ── Language Selector ── */
.lang-select{
  appearance:none;
  -webkit-appearance:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  cursor:pointer;
  min-width:48px;
  text-align:center;
  font-family:inherit;
  letter-spacing:.5px;
}

.lang-select:focus{
  outline:none;
  border-color:var(--primary);
}

/* ── Pagination ── */
.pagination{
  display:flex;
  align-items:center;
  gap:6px;
}

.pagination-btn{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-size:12px;
  border-radius:4px;
  cursor:pointer;
  transition:all .15s;
}

.pagination-btn:hover:not(:disabled){
  border-color:var(--primary);
  color:var(--primary);
}

.pagination-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.pagination-info{
  font-size:12px;
  color:var(--muted);
  min-width:40px;
  text-align:center;
}

/* ── Account Page ── */
.account-container{
  padding:32px 24px;
  max-width:560px;
  overflow-y:auto;
  height:100%;
}

.account-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.account-company-logo{
  width:48px;
  height:48px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--line);
}

.account-company-name{
  font-size:18px;
  font-weight:800;
  color:var(--text);
}

.account-company-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

.account-section{
  margin-bottom:20px;
}

.account-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:4px 0;
}

.account-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
}

.account-row:last-child{ border-bottom:none }

.account-label{
  font-size:13px;
  color:var(--muted);
  flex-shrink:0;
  width:140px;
}

.account-value{
  font-size:13px;
  color:var(--text);
  text-align:right;
  flex:1;
}

.account-value a{
  color:var(--primary);
  text-decoration:none;
}

.account-value a:hover{ text-decoration:underline }

.plan-badge{
  display:inline-block;
  background:rgba(29,78,216,.08);
  color:var(--primary);
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:6px;
}

/* ── API Key ── */
.api-key-section{ padding:16px }

.api-key-label{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:10px;
}

.api-key-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
}

.api-key-value{
  flex:1;
  font-family:'SF Mono',Monaco,'Cascadia Code',monospace;
  font-size:13px;
  color:var(--text);
  word-break:break-all;
  background:transparent;
}

.api-key-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.api-key-btn{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  border-radius:6px;
  cursor:pointer;
  color:var(--muted);
  transition:all .15s;
}

.api-key-btn:hover{
  background:var(--hover);
  color:var(--primary);
}

.api-key-btn.copied{
  background:var(--primary-light);
  color:var(--primary);
}

.api-key-note{
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

/* ── Documentation ── */
.docs-container{
  padding:32px 24px;
  max-width:800px;
  line-height:1.6;
  overflow-y:auto;
  height:100%;
}

.docs-header{
  margin-bottom:28px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.docs-header h1{
  font-size:22px;
  font-weight:800;
  color:var(--text);
  margin:0 0 6px;
  letter-spacing:-.3px;
}

.docs-meta{
  font-size:13px;
  color:var(--muted);
}

.docs-meta code{
  background:#f1f5f9;
  padding:2px 6px;
  border-radius:4px;
  font-size:12px;
}

.docs-section{
  margin-bottom:28px;
}

.docs-section h2{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  margin:0 0 10px;
}

.docs-section p{
  font-size:13px;
  color:var(--text);
  margin:0 0 10px;
}

.docs-features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:14px;
}

.docs-feature{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
}

.docs-feature strong{
  display:block;
  font-size:13px;
  color:var(--text);
  margin-bottom:4px;
}

.docs-feature span{
  font-size:12px;
  color:var(--muted);
}

.docs-code{
  background:#1e293b;
  color:#e2e8f0;
  padding:14px;
  border-radius:8px;
  font-family:'SF Mono',Monaco,monospace;
  font-size:12px;
  overflow-x:auto;
  white-space:pre;
  margin:10px 0;
}

.docs-endpoint{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:10px;
  overflow:hidden;
}

.docs-endpoint-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:#f8fafc;
  border-bottom:1px solid var(--line);
}

.docs-endpoint-body{
  padding:14px;
  font-size:13px;
}

.docs-endpoint-body p{ margin:0 0 10px }

.docs-endpoint-desc{
  font-size:12px;
  color:var(--muted);
  margin-left:auto;
}

.docs-method{
  font-size:10px;
  font-weight:700;
  padding:3px 8px;
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.docs-method.get{ background:#dcfce7; color:#15803d }
.docs-method.post{ background:#dbeafe; color:#1d4ed8 }

.docs-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.docs-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}

.docs-table td:first-child{ width:80px }

.docs-table code{
  background:#f1f5f9;
  padding:2px 6px;
  border-radius:4px;
  font-size:12px;
}

/* ── Limit Reached ── */
.limit-reached{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
  min-height:300px;
}

.limit-icon{
  color:var(--muted);
  margin-bottom:16px;
}

.limit-title{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  margin-bottom:8px;
}

.limit-message{
  font-size:14px;
  color:var(--muted);
  max-width:280px;
  line-height:1.5;
  margin-bottom:16px;
}

.limit-contact{
  font-size:13px;
  color:var(--muted);
}

.limit-contact a{
  color:var(--primary);
  text-decoration:none;
}

.limit-contact a:hover{ text-decoration:underline }

/* ── Error ── */
.error{
  color:#dc2626;
  font-size:13px;
  padding:10px;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:8px;
}

/* ── Responsive ── */
@media (max-width:1100px){
  .grid{ grid-template-columns:1fr; height:auto }
  .panel{ max-height:50vh; border-right:none; border-bottom:1px solid var(--line) }
  .panel:last-child{ border-bottom:none }
}

@media (max-width:880px){
  .sidebar{ display:none }
  .topbar,.topbar-match{
    height:auto;
    padding:10px 14px;
    gap:10px;
    align-items:flex-start;
  }
  .topbar-search{
    max-width:none;
    flex-wrap:wrap;
  }
  .match-topbar-row{ flex-direction:column }
  .grid{ grid-template-columns:1fr; height:auto }
  .panel{ max-height:60vh; border-right:none; border-bottom:1px solid var(--line) }
  .panel:last-child{ border-bottom:none }
}


/* ── Credits Page ── */
.credits-page-wrapper{
  height:100%;
  overflow-y:auto;
}

.cr-page{
  padding:24px;
  max-width:780px;
}

.cr-top{
  padding:0 0 20px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}

.cr-top-label{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.3px;
}

.cr-top-number{
  font-size:32px;
  font-weight:800;
  color:var(--primary);
  line-height:1.2;
  margin-top:2px;
}

.cr-section{
  margin-bottom:20px;
}

.cr-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}

.cr-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.cr-table thead{
  background:#f8fafc;
}

.cr-table th{
  text-align:left;
  padding:8px 14px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.3px;
  border-bottom:1px solid var(--line);
}

.cr-table td{
  padding:8px 14px;
  border-bottom:1px solid var(--line);
  color:var(--text);
}

.cr-table tbody tr:last-child td{
  border-bottom:none;
}

.cr-table tbody tr:hover{
  background:#fafbfc;
}

.cr-desc{
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cr-badge{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  padding:2px 7px;
  border-radius:4px;
  background:#f1f5f9;
  color:#475569;
  white-space:nowrap;
}