/* Vazhi வழி — Main Stylesheet
   Edit this file to change colours, typography, layout
   Brand token reference:
     --brand: #D4580A  (saffron — primary)
     --accent: #0A7B72 (teal — secondary)
     --bg: #FAF8F3     (warm cream background)
     --text: #1C1A14   (deep charcoal)
*/

.hidden{display:none!important}


:root {
  /* Vazhi brand palette — warm saffron + deep teal + cream */
  --bg: #FAF8F3;
  --surface: #FFFFFF;
  --surface2: #F2EFE8;
  --surface3: #E8E4DA;
  --border: #E0DBD0;
  --border2: #C9C3B5;

  /* Text */
  --text: #1C1A14;
  --text2: #4A4640;
  --text3: #948E84;

  /* Brand — Vazhi Saffron */
  --brand: #D4580A;
  --brand-dk: #A83E00;
  --brand-bg: #FFF3E8;
  --brand-border: #F2C4A0;

  /* Accent — Teal */
  --accent: #0A7B72;
  --accent-dk: #065750;
  --accent-bg: #E6F7F6;
  --accent-border: #9FD9D5;

  /* Supporting */
  --blue: #1A4DD6;
  --blue-bg: #EBF0FF;
  --green: #0D6640;
  --green-bg: #E8F8EF;
  --amber: #855100;
  --amber-bg: #FFF5E0;
  --purple: #581F9E;
  --purple-bg: #F2EBFF;
  --coral: #BC2D12;
  --coral-bg: #FFEDE8;
  --teal: #0A686F;
  --teal-bg: #E5FAFB;
  --rose: #9B1B5A;
  --rose-bg: #FFEBF3;

  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.05);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-tamil: 'Noto Sans Tamil', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;min-height:100vh}

/* ── VAZHI HEADER ── */
.site-header{
  background:linear-gradient(135deg,#1A1F4D 0%,#2C3580 100%);
  position:sticky;top:0;z-index:200;
  border-bottom:none;
}
.header-inner{
  max-width:1320px;margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:center;gap:1.5rem;height:62px;
}

/* Logo mark */
.logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#F07020,#D4580A);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-tamil);font-size:14px;font-weight:700;
  color:#fff;letter-spacing:0;
  box-shadow:0 2px 8px rgba(212,88,10,0.5);
  flex-shrink:0;
}
.logo-text-wrap{display:flex;flex-direction:column;line-height:1}
.logo-en{
  font-family:var(--font-display);font-size:20px;font-weight:700;
  color:#fff;letter-spacing:-0.3px;
}
.logo-ta{
  font-family:var(--font-tamil);font-size:11px;font-weight:600;
  color:#FFD9A8;letter-spacing:0.02em;margin-top:1px;
}

/* Nav tabs */
.tab-nav{display:flex;gap:2px;flex:1;justify-content:center}
.tab-btn{
  padding:6px 16px;font-size:12px;font-family:var(--font-body);
  font-weight:600;border:1px solid transparent;border-radius:20px;
  cursor:pointer;background:transparent;color:rgba(255,255,255,.75);
  transition:all 0.15s;white-space:nowrap;letter-spacing:0.01em;
}
.tab-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.tab-btn.active{
  background:var(--brand);color:#fff;
  border-color:var(--brand);
  box-shadow:0 2px 8px rgba(212,88,10,0.4);
}

/* Home back-link (explore.html → index.html) */
.hback{color:rgba(255,255,255,.65);font-size:.78rem;font-weight:600;text-decoration:none;padding:5px 11px;border-radius:999px;white-space:nowrap;flex-shrink:0;transition:background .15s,color .15s;display:flex;align-items:center;gap:4px}
.hback:hover{background:rgba(255,255,255,.12);color:#fff}

/* Header right */
.hdr-right{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.hdr-stats{display:flex;gap:1rem;font-size:11px;color:rgba(255,255,255,0.45)}
.hdr-stats b{color:rgba(255,255,255,0.75);font-weight:600}
.hdr-badge{
  font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;
  background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.15);letter-spacing:0.04em;
  text-transform:uppercase;
}

/* ── VAZHI HERO ── */
.hero{
  background:
    radial-gradient(circle at 78% 45%,rgba(150,170,255,0.13) 0%,transparent 38%),
    radial-gradient(circle at 88% 10%,rgba(200,215,255,0.08) 0%,transparent 22%),
    linear-gradient(135deg,#1A1F4D 0%,#2C3580 100%);
  border-bottom:none;
  padding:0 1.5rem;
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:'வழி';
  font-family:var(--font-tamil);font-size:220px;font-weight:700;
  color:rgba(255,255,255,0.05);
  position:absolute;right:-20px;top:-40px;
  line-height:1;pointer-events:none;user-select:none;
  letter-spacing:-5px;
}
.hero::after{
  content:'';
  position:absolute;bottom:0;left:0;width:100%;height:72px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0,72 L0,56 Q720,0 1440,56 L1440,72 Z' fill='%23FAF8F3'/></svg>") no-repeat;
  background-size:100% 100%;
  pointer-events:none;z-index:2;
}
.hero-inner{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:2rem;
  align-items:center;padding:2.2rem 0 4.5rem;
}
.hero-left{}
.hero-tagline-small{
  font-size:11px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--brand);
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.hero-tagline-small::before{content:'';display:block;width:24px;height:1.5px;background:var(--brand);}
.hero-h1{
  font-family:var(--font-display);
  font-size:36px;font-weight:600;
  color:#FFFFFF;
  letter-spacing:-0.8px;line-height:1.15;
  margin-bottom:8px;
}
.hero-h1 em{font-style:italic;color:rgba(255,255,255,0.6);}
.hero-tamil{
  font-family:var(--font-tamil);font-size:15px;font-weight:400;
  color:rgba(255,255,255,0.4);margin-bottom:18px;letter-spacing:0.02em;
}
.hero-desc{
  font-size:14px;color:rgba(255,255,255,0.55);
  max-width:520px;line-height:1.7;margin-bottom:1.5rem;
}
.hero-chapters{display:flex;gap:8px;flex-wrap:wrap}
.chapter-pill{
  font-size:11px;font-weight:600;padding:5px 12px;
  border-radius:20px;border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.05);
  display:flex;align-items:center;gap:5px;
}
.chapter-pill.active-chapter{
  background:rgba(212,88,10,0.2);border-color:rgba(212,88,10,0.4);
  color:rgba(255,200,160,0.9);
}
.hero-right{text-align:right}
.hero-stat-block{display:flex;flex-direction:column;gap:8px}
.hstat{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r);padding:10px 16px;text-align:center;
  min-width:100px;
}
.hstat-n{
  font-family:var(--font-display);font-size:28px;font-weight:700;
  color:#FFFFFF;letter-spacing:-0.5px;line-height:1;
}
.hstat-l{font-size:10px;color:rgba(255,255,255,0.4);font-weight:500;text-transform:uppercase;letter-spacing:0.07em;margin-top:3px;}

/* ── FILTER BAR (below hero, on white) ── */
/* Hidden by default — shown only when Explore tab is active via JS class toggle */
#filter-section{display:none}
#filter-section.filter-active{display:block}
.filter-section{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:1.25rem 1.5rem;
}
.filter-inner{max-width:1320px;margin:0 auto;}
.filter-bar{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end}
.fg label{
  display:block;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.07em;
  color:var(--text3);margin-bottom:5px;
}
.fg select,.fg input{
  width:100%;padding:9px 34px 9px 12px;font-size:13px;
  font-family:var(--font-body);font-weight:400;
  border:1.5px solid var(--border2);border-radius:var(--r);
  background:var(--surface);color:var(--text);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238F8B82' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
  transition:border-color 0.15s;
}
.fg input{background-image:none;padding-right:12px}
.fg select:focus,.fg input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,88,10,0.12)}
.btn-reset{
  padding:9px 18px;font-size:13px;font-family:var(--font-body);
  font-weight:500;border:1.5px solid var(--border2);border-radius:var(--r);
  background:var(--surface);color:var(--text2);cursor:pointer;
  transition:all 0.15s;white-space:nowrap;
}
.btn-reset:hover{background:var(--surface2)}
.active-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:26px}
.chip{
  background:var(--brand-bg);color:var(--brand-dk);
  border:1px solid var(--brand-border);border-radius:20px;
  padding:3px 10px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;
}
.chip button{background:none;border:none;color:var(--brand-dk);cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.55}
.chip button:hover{opacity:1}

/* ── MAIN ── */
.main{max-width:1320px;margin:0 auto;padding:1.5rem 1.5rem 4rem}

/* ── TABS CONTENT ── */
.tab-content{display:none}
.tab-content.active{display:block}

/* ── RESULTS BAR ── */
.results-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.results-count{font-size:13px;color:var(--text3)}
.results-count b{color:var(--text);font-weight:600}
.view-tog{display:flex;gap:3px}
.vtbtn{
  padding:5px 11px;font-size:11px;font-weight:600;
  border:1.5px solid var(--border2);border-radius:6px;
  background:var(--surface);cursor:pointer;color:var(--text3);
  font-family:var(--font-body);
}
.vtbtn.on{background:var(--text);color:#fff;border-color:var(--text)}

/* ── STREAM SECTIONS ── */
.stream-sec{margin-bottom:2.2rem}
.stream-hdr{
  display:flex;align-items:center;gap:10px;
  margin-bottom:1rem;padding-bottom:9px;
  border-bottom:2px solid var(--border);
}
.stream-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.stream-title{font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:-0.2px}
.stream-n{margin-left:auto;font-size:11px;color:var(--text3);background:var(--surface2);padding:2px 9px;border-radius:20px;border:1px solid var(--border)}

/* ── CARDS ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:11px}
.cards.list{grid-template-columns:1fr}
.card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-lg);padding:15px 17px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  gap:9px;transition:border-color 0.15s,box-shadow 0.15s;
  position:relative;overflow:hidden;
}
.card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.card.trending-card{border-color:rgba(212,88,10,0.3)}
.trending-stripe{
  position:absolute;top:0;right:0;
  background:var(--brand);color:#fff;
  font-size:9px;font-weight:700;padding:3px 10px;
  border-bottom-left-radius:8px;letter-spacing:0.05em;text-transform:uppercase;
}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card-name{font-family:var(--font-body);font-size:14px;font-weight:700;line-height:1.3;color:var(--text);letter-spacing:-0.1px}
.cbadge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;letter-spacing:0.03em;text-transform:uppercase}
.divider{border:none;border-top:1px solid var(--border);margin:1px 0}
.crow{display:flex;gap:6px;font-size:12px;align-items:flex-start}
.clbl{font-weight:700;color:var(--text3);text-transform:uppercase;font-size:9px;letter-spacing:0.06em;min-width:54px;padding-top:2px;flex-shrink:0}
.cval{color:var(--text2);line-height:1.5;flex:1}
.cval strong{color:var(--text);font-weight:600}
.meta-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.salary-tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--green-bg);color:var(--green)}
.market-tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:0.03em;text-transform:uppercase}
.mkt-high{background:#E8F8EF;color:#0A5234}
.mkt-growing{background:var(--brand-bg);color:var(--brand-dk)}
.mkt-stable{background:#F2EBFF;color:#451880}
.mkt-niche{background:#FFF5E0;color:#6B3F00}
.subj-pills{display:flex;flex-wrap:wrap;gap:4px}
.spill{font-size:9px;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid var(--border);color:var(--text3);background:var(--bg);letter-spacing:0.02em;text-transform:uppercase}
.spill.match{background:var(--brand-bg);border-color:var(--brand-border);color:var(--brand-dk)}

/* ── NO RESULTS ── */
.no-res{text-align:center;padding:4rem 1rem;color:var(--text3)}
.no-res h3{font-size:18px;color:var(--text2);margin-bottom:6px}

/* ── INTEREST FINDER (TAB 2) ── */
.if-wrap{max-width:960px;margin:0 auto}
.if-step{display:none}
.if-step.on{display:block}
.if-h2{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-0.4px;margin-bottom:6px;color:var(--text)}
.if-sub{font-size:14px;color:var(--text2);margin-bottom:1rem;line-height:1.6}

/* Subject Picker — IGCSE / IB / any board */
#subj-picker-wrap{margin-bottom:0.75rem}
.subj-picker-toggle{background:none;border:1.5px dashed var(--border2);border-radius:var(--r);padding:8px 14px;font-size:13px;color:var(--accent);cursor:pointer;font-family:var(--font-body);font-weight:500;transition:all 0.15s;width:100%;text-align:left}
.subj-picker-toggle:hover{border-color:var(--accent);background:var(--accent-bg)}
#subj-picker{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-top:8px}
.subj-picker-hint{font-size:13px;color:var(--text2);margin:0 0 14px;line-height:1.5}
.subj-cat-group{margin-bottom:14px}
.subj-cat-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);margin-bottom:6px}
.subj-chips{display:flex;flex-wrap:wrap;gap:6px}
.subj-chip{border:1.5px solid var(--border2);border-radius:20px;padding:5px 13px;font-size:12px;font-weight:500;font-family:var(--font-body);background:var(--surface);color:var(--text2);cursor:pointer;transition:all 0.13s;user-select:none}
.subj-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.subj-chip.selected{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-dk);font-weight:600}
#subj-derived{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;padding:10px 14px;background:var(--accent-bg);border:1.5px solid var(--accent-border);border-radius:var(--r);font-size:13px;font-weight:600;color:var(--accent-dk)}
.subj-derived-btn{padding:7px 16px;font-size:13px}
.subj-or-divider{font-size:12px;color:var(--text3);text-align:center;margin:14px 0 10px;letter-spacing:0.03em}

.subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:8px;margin-bottom:1.25rem}
.scard{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px 15px;cursor:pointer;background:var(--surface);transition:all 0.15s;user-select:none}
.scard:hover{border-color:var(--brand);background:var(--brand-bg);transform:translateY(-2px);box-shadow:0 4px 14px rgba(212,88,10,0.13)}
.scard.sel{border:2px solid var(--brand);background:var(--brand-bg)}
.scard.sel .sc-name{color:var(--brand-dk)}
.sc-ico{font-size:24px;margin-bottom:7px}
.sc-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.sc-sub{font-size:11px;color:var(--text3);line-height:1.4}
.ia-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:8px;margin-bottom:1.2rem}
.iacard{border:1.5px solid var(--border);border-radius:var(--r);padding:12px 14px;cursor:pointer;background:var(--surface);transition:all 0.15s;user-select:none}
.iacard:hover{border-color:var(--border2)}
.iacard.sel{border:2px solid var(--brand);background:var(--brand-bg)}
.iacard.sel .ia-name{color:var(--brand-dk)}
.ia-ico{font-size:18px;margin-bottom:5px}
.ia-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px}
.ia-desc{font-size:10px;color:var(--text3);line-height:1.35}
.nav-row{display:flex;align-items:center;gap:10px;margin-top:1rem}
.btn-primary{
  padding:10px 24px;font-size:14px;font-weight:700;
  font-family:var(--font-body);border:none;border-radius:var(--r);
  background:var(--brand);color:#fff;cursor:pointer;
  transition:opacity 0.15s;box-shadow:0 2px 8px rgba(212,88,10,0.3);
}
.btn-primary:hover{opacity:0.88}
.btn-back{padding:8px 16px;font-size:13px;font-weight:500;font-family:var(--font-body);border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text2);cursor:pointer}
.sel-info{font-size:12px;color:var(--text3)}
.ir-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.2rem}
.ir-tag{background:var(--brand-bg);color:var(--brand-dk);border:1px solid var(--brand-border);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700}
.ir-section{margin-bottom:2rem}
.ir-sec-hdr{font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;padding-bottom:6px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;gap:8px}
.insight-box{border-left:3px solid var(--brand);padding:8px 13px;margin-bottom:10px;font-size:12px;color:var(--text2);line-height:1.6;border-radius:0 4px 4px 0;background:var(--surface)}

/* ── MARKET TAB ── */
.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:2rem}
.mcard{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-sm)}
.mcard-hdr{font-family:var(--font-body);font-size:14px;font-weight:700;margin-bottom:12px;color:var(--text);display:flex;align-items:center;gap:8px}
.mcard-hdr span{font-size:18px}
.trend-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.trend-item:last-child{border-bottom:none}
.trend-rank{font-size:11px;font-weight:800;color:var(--text3);min-width:22px}
.trend-name{font-size:13px;font-weight:600;flex:1;color:var(--text)}
.trend-badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:0.04em}
.sal-item{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.sal-item:last-child{border-bottom:none}
.sal-field{font-size:12px;font-weight:600;width:130px;flex-shrink:0;color:var(--text2)}
.sal-bar-wrap{flex:1;background:var(--surface2);border-radius:20px;height:8px;overflow:hidden}
.sal-bar{height:100%;border-radius:20px;background:var(--brand);transition:width 0.6s ease}
.sal-val{font-size:11px;font-weight:700;color:var(--text);min-width:65px;text-align:right}
.opp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.opp-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-sm)}
.opp-field{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.opp-reason{font-size:11px;color:var(--text2);line-height:1.5;margin-bottom:8px}
.opp-meter{display:flex;align-items:center;gap:8px}
.opp-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}
.opp-dots{display:flex;gap:3px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--border)}
.dot.filled{background:var(--brand)}
.sec-heading{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-0.3px;margin-bottom:1rem;color:var(--text)}

/* ── EXAMS TAB ── */
.exam-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.2rem;align-items:center}
.exam-filter-bar label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);margin-right:2px}
.exam-filter-bar select,.exam-filter-bar input{padding:7px 30px 7px 11px;font-size:13px;font-family:var(--font-body);border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238F8B82' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.exam-filter-bar input{background-image:none;padding-right:11px;min-width:200px}
.exam-filter-bar select:focus,.exam-filter-bar input:focus{outline:none;border-color:var(--brand)}
.exam-filter-bar .btn-reset{padding:7px 14px;font-size:12px;font-family:var(--font-body);font-weight:500;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text2);cursor:pointer}
.exam-filter-bar .btn-reset:hover{background:var(--surface2)}
.exam-stats-bar{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.4rem}
.estat{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:10px 16px;font-size:13px;display:flex;flex-direction:column;gap:2px;min-width:110px}
.estat-n{font-size:20px;font-weight:800;font-family:var(--font-display);letter-spacing:-0.5px}
.estat-l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3)}
.exam-group{margin-bottom:2rem}
.exam-group-hdr{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:2px solid var(--border);margin-bottom:10px}
.exam-group-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.exam-group-title{font-family:var(--font-body);font-size:15px;font-weight:700}
.exam-group-n{margin-left:auto;font-size:11px;color:var(--text3);background:var(--surface2);padding:2px 9px;border-radius:20px;border:1px solid var(--border)}
.exam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.exam-grid.list{grid-template-columns:1fr}
.ecard{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-sm);transition:border-color 0.15s,box-shadow 0.15s;display:flex;flex-direction:column;gap:8px}
.ecard:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.ecard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ecard-name{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--text);line-height:1.3;letter-spacing:-0.1px}
.ecard-full{font-size:11px;color:var(--text3);margin-top:1px;line-height:1.35}
.elvl{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;text-transform:uppercase;letter-spacing:0.04em}
.elvl-nat{background:#EBF0FF;color:#0F3098;border:1px solid #BDD0FF}
.elvl-state{background:#E8F8EF;color:#0A5234;border:1px solid #9FE0BC}
.elvl-pvt{background:#FFF5E0;color:#6B3F00;border:1px solid #F5C97A}
.elvl-inst{background:#F2EBFF;color:#451880;border:1px solid #CAABF0}
.elvl-prof{background:var(--brand-bg);color:var(--brand-dk);border:1px solid var(--brand-border)}
.ecard-row{display:flex;gap:6px;font-size:11px;align-items:flex-start}
.ecard-lbl{font-weight:700;color:var(--text3);text-transform:uppercase;font-size:9px;letter-spacing:0.06em;min-width:52px;padding-top:2px;flex-shrink:0}
.ecard-val{color:var(--text2);line-height:1.5;flex:1}
.ecard-val strong{color:var(--text);font-weight:600}
.ecard-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.epill{font-size:9px;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid var(--border);color:var(--text3);background:var(--bg);text-transform:uppercase;letter-spacing:0.02em}
.epill.nat{background:#EBF0FF;color:#0F3098;border-color:#BDD0FF}
.ecard-important{background:var(--brand-bg);border-radius:6px;padding:5px 9px;font-size:10px;color:var(--brand-dk);font-weight:500;line-height:1.4}
.inst-section{border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-top:2px}
.inst-hdr{display:flex;align-items:center;gap:6px;padding:8px 11px;background:var(--surface2);cursor:pointer;user-select:none;transition:background 0.15s}
.inst-hdr:hover{background:var(--surface3)}
.inst-hdr-label{font-size:11px;font-weight:700;color:var(--text2);flex:1}
.inst-hdr-count{font-size:10px;color:var(--text3);background:var(--surface);border:1px solid var(--border);padding:1px 7px;border-radius:20px}
.inst-toggle{font-size:10px;color:var(--text3);transition:transform 0.2s}
.inst-list{padding:6px 8px;display:none}
.inst-row{padding:5px 4px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.inst-row:last-child{border-bottom:none}
.inst-name{font-size:12px;font-weight:600;color:var(--text)}
.inst-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inst-city{font-size:10px;color:var(--text3)}
.inst-tier{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:0.03em}
.inst-more{margin-top:2px}
.inst-show-more{width:100%;margin-top:5px;padding:5px;font-size:11px;font-weight:600;font-family:var(--font-body);border:1px dashed var(--border2);border-radius:6px;background:transparent;color:var(--brand);cursor:pointer}
.inst-show-more:hover{background:var(--brand-bg)}
.inst-seats{font-size:10px;color:var(--text3);padding:6px 11px;background:var(--surface2);border-top:1px solid var(--border)}
.exam-note{font-size:12px;color:var(--text3);margin-top:1.5rem;padding:10px 14px;border-left:3px solid var(--brand);border-radius:0 6px 6px 0;background:var(--surface);line-height:1.6}

/* ── COLLEGES TAB ── */
.col-page-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.col-page-title{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-0.4px;color:var(--text)}
.col-page-sub{font-size:13px;color:var(--text3);margin-top:3px}
.col-page-note{font-size:11px;color:var(--amber);background:var(--amber-bg);padding:6px 12px;border-radius:var(--r);border:1px solid #F5C97A;max-width:320px;line-height:1.5}
.col-filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:1.1rem}
.col-fg{display:flex;flex-direction:column;gap:4px}
.col-fg label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3)}
.col-fg select{padding:8px 30px 8px 11px;font-size:12px;font-family:var(--font-body);border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238F8B82' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.col-fg select:focus{outline:none;border-color:var(--brand)}
.col-search{padding:8px 12px;font-size:12px;font-family:var(--font-body);border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text);min-width:220px;align-self:flex-end}
.col-search:focus{outline:none;border-color:var(--brand)}
.col-stats-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.2rem}
.col-stat{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:8px 14px;display:flex;flex-direction:column;gap:1px}
.col-stat-n{font-size:18px;font-weight:800;font-family:var(--font-display);letter-spacing:-0.5px}
.col-stat-l{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3)}
.col-district-sec{margin-bottom:2rem}
.col-district-hdr{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:2px solid var(--border);margin-bottom:10px}
.col-district-name{font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--text)}
.col-district-n{margin-left:auto;font-size:11px;color:var(--text3);background:var(--surface2);padding:2px 9px;border-radius:20px;border:1px solid var(--border)}
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.col-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color 0.15s,box-shadow 0.15s}
.col-card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.col-card-hdr{padding:13px 15px 11px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:5px}
.col-card-toprow{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.col-card-name{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--text);line-height:1.3;letter-spacing:-0.1px}
.col-type-badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;text-transform:uppercase;letter-spacing:0.04em}
.ct-central{background:#EBF0FF;color:#0F3098;border:1px solid #BDD0FF}
.ct-state{background:#E8F8EF;color:#0A5234;border:1px solid #9FE0BC}
.ct-aided{background:var(--accent-bg);color:var(--accent-dk);border:1px solid var(--accent-border)}
.ct-deemed{background:#F2EBFF;color:#451880;border:1px solid #CAABF0}
.ct-private{background:#FFF5E0;color:#6B3F00;border:1px solid #F5C97A}
.col-card-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.col-meta-tag{font-size:10px;color:var(--text3);display:flex;align-items:center;gap:3px}
.col-meta-tag strong{color:var(--text2);font-weight:600}
.col-naac{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.naac-app{background:var(--brand-bg);color:var(--brand-dk);border:1px solid var(--brand-border)}
.naac-ap{background:#E8F8EF;color:#0A5234;border:1px solid #9FE0BC}
.naac-other{background:#F5F3EE;color:#524E45;border:1px solid #DDD9D0}
.col-special-note{font-size:11px;color:#7A4F00;background:#FFF7E6;border:1px solid #F5C97A;border-radius:6px;padding:5px 9px;line-height:1.5;margin-top:3px}
.col-programs-hdr{display:flex;align-items:center;gap:6px;padding:8px 13px;background:var(--surface2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;transition:background 0.15s}
.col-programs-hdr:hover{background:var(--surface3)}
.col-prg-label{font-size:10px;font-weight:700;color:var(--text2);flex:1;text-transform:uppercase;letter-spacing:0.05em}
.col-prg-count{font-size:10px;color:var(--text3);background:var(--surface);border:1px solid var(--border);padding:1px 7px;border-radius:20px}
.col-prg-tog{font-size:10px;color:var(--text3)}
.col-programs-list{display:none;padding:6px 0}
.col-stream-grp{padding:4px 13px 6px}
.col-stream-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.col-stream-lbl::after{content:'';flex:1;height:1px;background:var(--border)}
.col-prog-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--border)}
.col-prog-row:last-child{border-bottom:none}
.col-prog-name{font-size:12px;font-weight:500;color:var(--text);flex:1;line-height:1.35}
.col-prog-exam{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.ce-tnea{background:#EBF0FF;color:#0F3098}
.ce-jee{background:#F2EBFF;color:#451880}
.ce-cuet{background:#E8F8EF;color:#0A5234}
.ce-neet{background:#FFEDE8;color:#8F2009}
.ce-nata{background:#FFF5E0;color:#6B3F00}
.ce-clat{background:#EDEBE5;color:#18160F}
.ce-own{background:var(--brand-bg);color:var(--brand-dk)}
.ce-merit{background:#F5F3EE;color:#524E45}
.ce-icar{background:var(--accent-bg);color:var(--accent-dk)}
.ce-nchm{background:#FFF5E0;color:#6B3F00}
.col-no-res{text-align:center;padding:3rem 1rem;color:var(--text3)}
.col-no-res h3{font-size:16px;color:var(--text2);margin-bottom:6px}
.col-website-link{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--brand);text-decoration:none;margin-top:4px}
.col-website-link:hover{text-decoration:underline}
.ecard-college-btn{display:block;width:100%;margin-top:10px;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;text-align:center;transition:background 0.15s}
.ecard-college-btn:hover{background:var(--accent-bg)}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.card{animation:fadeUp 0.25s ease both}

/* ── FOOTER ── */
.site-footer{
  background:linear-gradient(135deg,#1A1F4D 0%,#2C3580 100%);
  color:#C5CBFF;
  text-align:center;padding:2rem 1.5rem;
  font-size:12px;border-top:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;
  border-radius:28px 28px 0 0;
}
.footer-feedback-link{color:#C5CBFF;text-decoration:none;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:5px 14px;transition:all 0.15s}
.footer-feedback-link:hover{color:#fff;border-color:rgba(255,255,255,0.5)}
.site-footer .footer-logo{
  font-family:var(--font-display);font-size:18px;font-weight:700;
  color:#fff;margin-bottom:4px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.site-footer .footer-logo span{
  font-family:var(--font-tamil);font-size:14px;
  color:rgba(197,203,255,0.6);
}
.site-footer .footer-tagline{
  font-size:11px;color:rgba(197,203,255,0.55);
  margin-bottom:10px;
}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .filter-bar{grid-template-columns:1fr 1fr}
  .hdr-stats{display:none}
  .hero-inner{grid-template-columns:1fr}
  .hero-right{display:none}
  .hero-h1{font-size:26px}
  .hero::before{font-size:120px}
}
@media(max-width:600px){
  .filter-bar{grid-template-columns:1fr}
  /* Header: let the logo + account button stay put and make the tab strip
     scroll horizontally inside itself instead of pushing the page wider. */
  .header-inner{gap:0.75rem}
  .tab-nav{
    gap:4px;justify-content:flex-start;
    min-width:0;                 /* allow the flex item to shrink below content width */
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    /* fade the right edge as a "more tabs →" affordance */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    padding-bottom:2px;
  }
  /* keep the last tab reachable past the fade */
  .tab-nav::after{content:"";flex:0 0 14px}
  .tab-btn{padding:5px 12px;font-size:12px;scroll-snap-align:start}
  .hero{padding:0 1rem}
  .hero-h1{font-size:22px}
  .main{padding:1rem 1rem 3rem}
  .hero::before{display:none}
}
/* thin, visible scrollbar so students know the nav scrolls */
@media(max-width:600px){
  .tab-nav::-webkit-scrollbar{height:3px}
  .tab-nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
  .tab-nav::-webkit-scrollbar-track{background:transparent}
}
@media(max-width:480px){
  .header-inner{padding:0 1rem}
  .filter-section{padding:1rem}
  .cards{grid-template-columns:1fr}
}
.hero p{font-size:14px;color:var(--text2);margin-bottom:1.25rem;max-width:580px}

/* ── FILTER BAR ── */
.filter-bar{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end}
.fg label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);margin-bottom:5px}
.fg select,.fg input{width:100%;padding:9px 34px 9px 12px;font-size:13px;font-family:'Outfit',sans-serif;font-weight:400;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238F8B82' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;transition:border-color 0.15s}
.fg input{background-image:none;padding-right:12px}
.fg select:focus,.fg input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,77,214,0.12)}
.btn-reset{padding:9px 18px;font-size:13px;font-family:'Outfit',sans-serif;font-weight:500;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text2);cursor:pointer;transition:all 0.15s;white-space:nowrap}
.btn-reset:hover{background:var(--surface2)}
.active-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:26px}
.chip{background:var(--accent-bg);color:var(--accent-dk);border:1px solid #BDD0FF;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.chip button{background:none;border:none;color:var(--accent-dk);cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.55}
.chip button:hover{opacity:1}

/* ── MAIN ── */
.main{max-width:1320px;margin:0 auto;padding:1.5rem 1.5rem 4rem}

/* ── TABS CONTENT ── */
.tab-content{display:none}
.tab-content.active{display:block}

/* ── RESULTS BAR ── */
.results-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.results-count{font-size:13px;color:var(--text3)}
.results-count b{color:var(--text);font-weight:600}
.view-tog{display:flex;gap:3px}
.vtbtn{padding:5px 11px;font-size:11px;font-weight:600;border:1.5px solid var(--border2);border-radius:6px;background:var(--surface);cursor:pointer;color:var(--text3);font-family:'Outfit',sans-serif}
.vtbtn.on{background:var(--text);color:#fff;border-color:var(--text)}

/* ── STREAM SECTIONS ── */
.stream-sec{margin-bottom:2.2rem}
.stream-hdr{display:flex;align-items:center;gap:10px;margin-bottom:1rem;padding-bottom:9px;border-bottom:2px solid var(--border)}
.stream-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.stream-title{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;letter-spacing:-0.2px}
.stream-n{margin-left:auto;font-size:11px;color:var(--text3);background:var(--surface2);padding:2px 9px;border-radius:20px;border:1px solid var(--border)}

/* ── CARDS ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:11px}
.cards.list{grid-template-columns:1fr}

.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:15px 17px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:9px;transition:border-color 0.15s,box-shadow 0.15s;position:relative;overflow:hidden}
.card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.card.trending-card{border-color:#BDD0FF}
.trending-stripe{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-size:9px;font-weight:700;padding:3px 10px;border-bottom-left-radius:8px;letter-spacing:0.05em;text-transform:uppercase}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card-name{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;line-height:1.3;color:var(--text);letter-spacing:-0.1px}
.cbadge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;letter-spacing:0.03em;text-transform:uppercase}

.divider{border:none;border-top:1px solid var(--border);margin:1px 0}

.crow{display:flex;gap:6px;font-size:12px;align-items:flex-start}
.clbl{font-weight:700;color:var(--text3);text-transform:uppercase;font-size:9px;letter-spacing:0.06em;min-width:54px;padding-top:2px;flex-shrink:0}
.cval{color:var(--text2);line-height:1.5;flex:1}
.cval strong{color:var(--text);font-weight:600}

/* market + salary row */
.meta-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.salary-tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--green-bg);color:var(--green)}
.market-tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:0.03em;text-transform:uppercase}
.mkt-high{background:#E8F8EF;color:#0A5234}
.mkt-growing{background:#EBF0FF;color:#0F3098}
.mkt-stable{background:#F2EBFF;color:#451880}
.mkt-niche{background:#FFF5E0;color:#6B3F00}

.subj-pills{display:flex;flex-wrap:wrap;gap:4px}
.spill{font-size:9px;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid var(--border);color:var(--text3);background:var(--bg);letter-spacing:0.02em;text-transform:uppercase}
.spill.match{background:var(--accent-bg);border-color:#BDD0FF;color:var(--accent-dk)}
.single-degree-label{font-size:10px;color:var(--text3);font-style:italic;padding:2px 0}
.branches-wrap{display:flex;flex-direction:column;gap:6px}
.branches-toggle{background:none;border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:10px;font-weight:600;color:var(--text3);cursor:pointer;text-align:left;width:fit-content;transition:all 0.15s}
.branches-toggle:hover{border-color:var(--accent);color:var(--accent)}
.branches-toggle.open{border-color:var(--accent);color:var(--accent)}
.branches-toggle.open::first-letter{content:'▾'}
.branches-list{display:none;flex-wrap:wrap;gap:5px}
.branches-list.open{display:flex}
.branch-tag{font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--accent-bg);color:var(--accent-dk);border:1px solid var(--accent-border);letter-spacing:0.01em}

/* ── NO RESULTS ── */
.no-res{text-align:center;padding:4rem 1rem;color:var(--text3)}
.no-res h3{font-size:18px;color:var(--text2);margin-bottom:6px}

/* ── INTEREST FINDER (TAB 2) ── */
.if-wrap{max-width:960px;margin:0 auto}
.if-step{display:none}
.if-step.on{display:block}

.if-h2{font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;letter-spacing:-0.4px;margin-bottom:6px}
.if-sub{font-size:14px;color:var(--text2);margin-bottom:1rem;line-height:1.6}

/* subject selector */
.subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:8px;margin-bottom:1.25rem}
.scard{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px 15px;cursor:pointer;background:var(--surface);transition:all 0.15s;user-select:none}
.scard:hover{border-color:var(--brand);background:var(--brand-bg);transform:translateY(-2px);box-shadow:0 4px 14px rgba(212,88,10,0.13)}
.scard.sel{border:2px solid var(--accent);background:var(--accent-bg)}
.scard.sel .sc-name{color:var(--accent-dk)}
.sc-ico{font-size:24px;margin-bottom:7px}
.sc-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.sc-sub{font-size:11px;color:var(--text3);line-height:1.4}

/* interest area grid */
.ia-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:8px;margin-bottom:1.2rem}
.iacard{border:1.5px solid var(--border);border-radius:var(--r);padding:12px 14px;cursor:pointer;background:var(--surface);transition:all 0.15s;user-select:none}
.iacard:hover{border-color:var(--border2)}
.iacard.sel{border:2px solid var(--accent);background:var(--accent-bg)}
.iacard.sel .ia-name{color:var(--accent-dk)}
.ia-ico{font-size:18px;margin-bottom:5px}
.ia-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px}
.ia-desc{font-size:10px;color:var(--text3);line-height:1.35}


.nav-row{display:flex;align-items:center;gap:10px;margin-top:1rem}
.btn-primary{padding:10px 24px;font-size:14px;font-weight:700;font-family:'Outfit',sans-serif;border:none;border-radius:var(--r);background:var(--text);color:#fff;cursor:pointer;transition:opacity 0.15s}
.btn-primary:hover{opacity:0.85}
.btn-back{padding:8px 16px;font-size:13px;font-weight:500;font-family:'Outfit',sans-serif;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text2);cursor:pointer}
.sel-info{font-size:12px;color:var(--text3)}

/* interest results */
.ir-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.2rem}
.ir-tag{background:var(--accent-bg);color:var(--accent-dk);border:1px solid #BDD0FF;border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700}

.ir-section{margin-bottom:2rem}
.ir-sec-hdr{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;padding-bottom:6px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;gap:8px}
.insight-box{border-left:3px solid var(--border2);padding:8px 13px;margin-bottom:10px;font-size:12px;color:var(--text2);line-height:1.6;border-radius:0 4px 4px 0;background:var(--surface)}
.ir-explore-cta{background:var(--accent-bg);border:1.5px solid var(--accent-border);border-radius:var(--r-lg);padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:12px}
.ir-explore-cta p{font-size:13px;color:var(--text2);line-height:1.6;margin:0}
.ir-explore-btn{align-self:flex-start;background:var(--accent);color:#fff;border:none;border-radius:var(--r);padding:9px 20px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity 0.15s}
.ir-explore-btn:hover{opacity:0.88}

/* ── MARKET TAB ── */
.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:2rem}
.mcard{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-sm)}
.mcard-hdr{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;margin-bottom:12px;color:var(--text);display:flex;align-items:center;gap:8px}
.mcard-hdr span{font-size:18px}

.trend-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.trend-item:last-child{border-bottom:none}
.trend-rank{font-size:11px;font-weight:800;color:var(--text3);min-width:22px}
.trend-name{font-size:13px;font-weight:600;flex:1;color:var(--text)}
.trend-badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:0.04em}

.sal-item{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.sal-item:last-child{border-bottom:none}
.sal-field{font-size:12px;font-weight:600;width:130px;flex-shrink:0;color:var(--text2)}
.sal-bar-wrap{flex:1;background:var(--surface2);border-radius:20px;height:8px;overflow:hidden}
.sal-bar{height:100%;border-radius:20px;background:var(--accent);transition:width 0.6s ease}
.sal-val{font-size:11px;font-weight:700;color:var(--text);min-width:65px;text-align:right}

.opp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.opp-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-sm)}
.opp-field{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.opp-reason{font-size:11px;color:var(--text2);line-height:1.5;margin-bottom:8px}
.opp-meter{display:flex;align-items:center;gap:8px}
.opp-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}
.opp-dots{display:flex;gap:3px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--border)}
.dot.filled{background:var(--accent)}

/* ── SECTION HEADERS (Market) ── */
.sec-heading{font-family:'Outfit',sans-serif;font-size:17px;font-weight:800;letter-spacing:-0.3px;margin-bottom:1rem;color:var(--text)}

/* ── RESPONSIVE ── */
@media(max-width:900px){.filter-bar{grid-template-columns:1fr 1fr}.hdr-stats{display:none}}
@media(max-width:600px){.filter-bar{grid-template-columns:1fr}.tab-nav{gap:2px}.tab-btn{padding:5px 12px;font-size:12px}.hero h1{font-size:20px}.main{padding:1rem 1rem 3rem}}
@media(max-width:480px){.header-inner{padding:0 1rem}.hero{padding:1.25rem 1rem}.cards{grid-template-columns:1fr}}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.card{animation:fadeUp 0.25s ease both}

/* ── COLLEGES TAB ── */
.col-page-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.col-page-title{font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;letter-spacing:-0.4px;color:var(--text)}
.col-page-sub{font-size:13px;color:var(--text3);margin-top:3px}
.col-page-note{font-size:11px;color:var(--amber);background:var(--amber-bg);padding:6px 12px;border-radius:var(--r);border:1px solid #F5C97A;max-width:320px;line-height:1.5}

.col-filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:1.1rem}
.col-fg{display:flex;flex-direction:column;gap:4px}
.col-fg label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3)}
.col-fg select{padding:8px 30px 8px 11px;font-size:12px;font-family:'Outfit',sans-serif;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238F8B82' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.col-fg select:focus{outline:none;border-color:var(--accent)}
.col-search{padding:8px 12px;font-size:12px;font-family:'Outfit',sans-serif;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text);min-width:220px;align-self:flex-end}
.col-search:focus{outline:none;border-color:var(--accent)}

.col-stats-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.2rem}
.col-stat{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:8px 14px;display:flex;flex-direction:column;gap:1px}
.col-stat-n{font-size:18px;font-weight:800;font-family:'Outfit',sans-serif;letter-spacing:-0.5px}
.col-stat-l{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3)}

/* District section */
.col-district-sec{margin-bottom:2rem}
.col-district-hdr{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:2px solid var(--border);margin-bottom:10px}
.col-district-name{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--text)}
.col-district-n{margin-left:auto;font-size:11px;color:var(--text3);background:var(--surface2);padding:2px 9px;border-radius:20px;border:1px solid var(--border)}

/* College cards grid */
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}

/* Individual college card */
.col-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color 0.15s,box-shadow 0.15s}
.col-card:hover{border-color:var(--border2);box-shadow:var(--shadow)}

.col-card-hdr{padding:13px 15px 11px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:5px}
.col-card-toprow{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.col-card-name{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--text);line-height:1.3;letter-spacing:-0.1px}
.col-type-badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;text-transform:uppercase;letter-spacing:0.04em}
.ct-central{background:#EBF0FF;color:#0F3098;border:1px solid #BDD0FF}
.ct-state{background:#E8F8EF;color:#0A5234;border:1px solid #9FE0BC}
.ct-aided{background:#E5FAFB;color:#07515A;border:1px solid #8EE8EF}
.ct-deemed{background:#F2EBFF;color:#451880;border:1px solid #CAABF0}
.ct-private{background:#FFF5E0;color:#6B3F00;border:1px solid #F5C97A}

.col-card-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.col-meta-tag{font-size:10px;color:var(--text3);display:flex;align-items:center;gap:3px}
.col-meta-tag strong{color:var(--text2);font-weight:600}
.col-naac{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.naac-app{background:#EBF0FF;color:#0F3098;border:1px solid #BDD0FF}
.naac-ap{background:#E8F8EF;color:#0A5234;border:1px solid #9FE0BC}
.naac-other{background:#F5F3EE;color:#524E45;border:1px solid #DDD9D0}
.col-special-note{font-size:11px;color:#7A4F00;background:#FFF7E6;border:1px solid #F5C97A;border-radius:6px;padding:5px 9px;line-height:1.5;margin-top:3px}

/* Programs section inside card */
.col-programs-hdr{display:flex;align-items:center;gap:6px;padding:8px 13px;background:var(--surface2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;transition:background 0.15s}
.col-programs-hdr:hover{background:var(--surface3)}
.col-prg-label{font-size:10px;font-weight:700;color:var(--text2);flex:1;text-transform:uppercase;letter-spacing:0.05em}
.col-prg-count{font-size:10px;color:var(--text3);background:var(--surface);border:1px solid var(--border);padding:1px 7px;border-radius:20px}
.col-prg-tog{font-size:10px;color:var(--text3)}

.col-programs-list{display:none;padding:6px 0}

/* Program stream group inside card */
.col-stream-grp{padding:4px 13px 6px}
.col-stream-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.col-stream-lbl::after{content:'';flex:1;height:1px;background:var(--border)}

.col-prog-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--border)}
.col-prog-row:last-child{border-bottom:none}
.col-prog-name{font-size:12px;font-weight:500;color:var(--text);flex:1;line-height:1.35}
.col-prog-exam{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.ce-tnea{background:#EBF0FF;color:#0F3098}
.ce-jee{background:#F2EBFF;color:#451880}
.ce-cuet{background:#E8F8EF;color:#0A5234}
.ce-neet{background:#FFEDE8;color:#8F2009}
.ce-nata{background:#FFF5E0;color:#6B3F00}
.ce-clat{background:#EDEBE5;color:#18160F}
.ce-own{background:#FFEBF3;color:#7A1247}
.ce-merit{background:#F5F3EE;color:#524E45}
.ce-icar{background:#E5FAFB;color:#07515A}
.ce-nchm{background:#FFF5E0;color:#6B3F00}
.ce-gate{background:#EBF0FF;color:#0F3098}
.ce-cat{background:#FFF5E0;color:#6B3F00}
.ce-jam{background:#E8F8EF;color:#0A5234}
.ce-net{background:#F2EBFF;color:#451880}
.ce-cuetpg{background:#FFEDE8;color:#8F2009}
.ce-neetpg{background:#E8F8EF;color:#07515A}

.col-no-res{text-align:center;padding:3rem 1rem;color:var(--text3)}
.col-no-res h3{font-size:16px;color:var(--text2);margin-bottom:6px}
.col-website-link{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--accent);text-decoration:none;margin-top:4px}
.col-website-link:hover{text-decoration:underline}

/* ── EXAMS TAB ── */
.exam-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.2rem;align-items:center}
.exam-filter-bar label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);margin-right:2px}
.exam-filter-bar select,.exam-filter-bar input{padding:7px 30px 7px 11px;font-size:13px;font-family:'Outfit',sans-serif;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238F8B82' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.exam-filter-bar input{background-image:none;padding-right:11px;min-width:200px}
.exam-filter-bar select:focus,.exam-filter-bar input:focus{outline:none;border-color:var(--accent)}
.exam-filter-bar .btn-reset{padding:7px 14px;font-size:12px;font-family:'Outfit',sans-serif;font-weight:500;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text2);cursor:pointer}
.exam-filter-bar .btn-reset:hover{background:var(--surface2)}

.exam-stats-bar{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.4rem}
.estat{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:10px 16px;font-size:13px;display:flex;flex-direction:column;gap:2px;min-width:110px}
.estat-n{font-size:20px;font-weight:800;font-family:'Outfit',sans-serif;letter-spacing:-0.5px}
.estat-l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3)}

.exam-group{margin-bottom:2rem}
.exam-group-hdr{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:2px solid var(--border);margin-bottom:10px}
.exam-group-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.exam-group-title{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700}
.exam-group-n{margin-left:auto;font-size:11px;color:var(--text3);background:var(--surface2);padding:2px 9px;border-radius:20px;border:1px solid var(--border)}

.exam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.exam-grid.list{grid-template-columns:1fr}

.ecard{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-sm);transition:border-color 0.15s,box-shadow 0.15s;display:flex;flex-direction:column;gap:8px}
.ecard:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.ecard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ecard-name{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--text);line-height:1.3;letter-spacing:-0.1px}
.ecard-full{font-size:11px;color:var(--text3);margin-top:1px;line-height:1.35}
.elvl{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;text-transform:uppercase;letter-spacing:0.04em}
.elvl-nat{background:#EBF0FF;color:#0F3098;border:1px solid #BDD0FF}
.elvl-state{background:#E8F8EF;color:#0A5234;border:1px solid #9FE0BC}
.elvl-pvt{background:#FFF5E0;color:#6B3F00;border:1px solid #F5C97A}
.elvl-inst{background:#F2EBFF;color:#451880;border:1px solid #CAABF0}
.elvl-prof{background:#FFEDE8;color:#8F2009;border:1px solid #F5AD9A}

.ecard-row{display:flex;gap:6px;font-size:11px;align-items:flex-start}
.ecard-lbl{font-weight:700;color:var(--text3);text-transform:uppercase;font-size:9px;letter-spacing:0.06em;min-width:52px;padding-top:2px;flex-shrink:0}
.ecard-val{color:var(--text2);line-height:1.5;flex:1}
.ecard-val strong{color:var(--text);font-weight:600}

.ecard-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.epill{font-size:9px;font-weight:600;padding:2px 7px;border-radius:20px;border:1px solid var(--border);color:var(--text3);background:var(--bg);text-transform:uppercase;letter-spacing:0.02em}
.epill.nat{background:#EBF0FF;color:#0F3098;border-color:#BDD0FF}
.epill.state{background:#E8F8EF;color:#0A5234;border-color:#9FE0BC}
.epill.pvt{background:#FFF5E0;color:#6B3F00;border-color:#F5C97A}

.ecard-important{background:var(--amber-bg);border-radius:6px;padding:5px 9px;font-size:10px;color:var(--amber);font-weight:500;line-height:1.4}
.ecard-explainer{background:var(--accent-bg);border-left:3px solid var(--accent);border-radius:6px;padding:8px 11px;margin-bottom:6px;font-size:11.5px;color:var(--text);font-weight:500;line-height:1.5}
.ecard-explainer strong{color:var(--accent-dk)}

.exam-note{font-size:12px;color:var(--text3);margin-top:1.5rem;padding:10px 14px;border-left:3px solid var(--border2);border-radius:0 6px 6px 0;background:var(--surface);line-height:1.6}

/* Exam UG/PG mode toggle */
.exam-mode-tabs{display:flex;gap:6px;margin-bottom:12px}
.exam-mode-btn{padding:7px 18px;font-size:13px;font-weight:600;font-family:inherit;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text3);cursor:pointer;transition:all 0.15s}
.exam-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.exam-mode-btn:not(.active):hover{border-color:var(--accent);color:var(--accent)}

/* PG exam paper/topic pills */
.pg-papers{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.pg-paper-row{display:flex;align-items:flex-start;gap:6px}
.pg-paper-code{font-size:10px;font-weight:700;color:var(--accent-dk);background:var(--accent-bg);border:1px solid var(--accent-border);padding:2px 7px;border-radius:20px;flex-shrink:0;margin-top:1px;white-space:nowrap}
.pg-topic-pills{display:flex;flex-wrap:wrap;gap:3px;flex:1}
.pg-topic-pill{font-size:10px;padding:2px 7px;border-radius:20px;background:var(--surface2);border:1px solid var(--border);color:var(--text3)}

/* ── INSTITUTE SECTION inside exam card ── */
.inst-section{border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-top:2px}
.inst-hdr{display:flex;align-items:center;gap:6px;padding:8px 11px;background:var(--surface2);cursor:pointer;user-select:none;transition:background 0.15s}
.inst-hdr:hover{background:var(--surface3)}
.inst-hdr-label{font-size:11px;font-weight:700;color:var(--text2);flex:1}
.inst-hdr-count{font-size:10px;color:var(--text3);background:var(--surface);border:1px solid var(--border);padding:1px 7px;border-radius:20px}
.inst-toggle{font-size:10px;color:var(--text3);transition:transform 0.2s}
.inst-list{padding:6px 8px;display:none}
.inst-row{padding:5px 4px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.inst-row:last-child{border-bottom:none}
.inst-name{font-size:12px;font-weight:600;color:var(--text)}
.inst-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inst-city{font-size:10px;color:var(--text3)}
.inst-tier{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:0.03em}
.inst-more{margin-top:2px}
.inst-show-more{width:100%;margin-top:5px;padding:5px;font-size:11px;font-weight:600;font-family:'Outfit',sans-serif;border:1px dashed var(--border2);border-radius:6px;background:transparent;color:var(--accent);cursor:pointer}
.inst-show-more:hover{background:var(--accent-bg)}
.inst-seats{font-size:10px;color:var(--text3);padding:6px 11px;background:var(--surface2);border-top:1px solid var(--border)}

/* ── JOSAA PREDICTOR TAB ── */
.j-page-hdr{padding:1.5rem 0 1rem}
.j-page-title{font-size:1.35rem;font-weight:700;color:var(--text);margin-bottom:4px}
.j-page-sub{font-size:13px;color:var(--text3);max-width:640px;line-height:1.6}

.j-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:1.5rem;box-shadow:var(--shadow-sm)}
.j-field{display:flex;flex-direction:column;gap:4px;min-width:140px}
.j-field label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em}
.j-field select,.j-field input{font-size:13px;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:inherit}
.j-field select:focus,.j-field input:focus{outline:none;border-color:var(--accent)}
.j-opt{font-weight:400;text-transform:none;letter-spacing:0;font-size:10px;color:var(--text3)}
.j-btn{padding:9px 22px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;font-family:inherit;border:none;border-radius:var(--r);cursor:pointer;align-self:flex-end;transition:background 0.15s}
.j-btn:hover{background:var(--accent-dk)}

.j-summary{font-size:13px;color:var(--text2);margin-bottom:1rem;padding:8px 12px;background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:var(--r)}
.j-err{font-size:13px;color:var(--coral);padding:10px 14px;background:var(--coral-bg);border-radius:var(--r)}

.j-bucket{border:1.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:1rem;overflow:hidden}
.j-bucket-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:700;color:var(--text);cursor:pointer;user-select:none;list-style:none;background:var(--surface2)}
.j-bucket-hdr::-webkit-details-marker{display:none}
.j-bucket-count{font-size:11px;font-weight:600;padding:2px 10px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--text3)}
.j-bucket-safe   .j-bucket-hdr{background:#E8F8EF}
.j-bucket-good   .j-bucket-hdr{background:#EBF0FF}
.j-bucket-reach  .j-bucket-hdr{background:#FFF5E0}

.j-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;padding:14px}

.j-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:13px 14px;display:flex;flex-direction:column;gap:6px;transition:box-shadow 0.15s}
.j-card:hover{box-shadow:var(--shadow)}
.j-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.j-inst{font-size:13px;font-weight:700;color:var(--text);line-height:1.3;flex:1}
.j-itype{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:0.04em;background:var(--accent-bg);color:var(--accent-dk);border:1px solid var(--accent-border);flex-shrink:0}
.j-prog{font-size:12px;color:var(--text2);line-height:1.4}
.j-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11px}
.j-rank-range{color:var(--text3)}
.j-rank-range b{color:var(--text);font-weight:700}
.j-trend{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px}
.j-trend-harder{background:#FFEDE8;color:#8F2009}
.j-trend-easier{background:#E8F8EF;color:#0A5234}
.j-trend-stable{background:var(--surface2);color:var(--text3)}
.j-spark-row{display:flex;align-items:center;gap:8px}
.j-spark-label{font-size:9px;color:var(--text3);white-space:nowrap}
.j-spark-svg{display:block;opacity:0.7}
.j-state{font-size:10px;color:var(--text3)}

.j-note{font-size:12px;color:var(--text3);margin-top:1rem;padding:10px 14px;border-left:3px solid var(--border2);border-radius:0 6px 6px 0;background:var(--surface);line-height:1.6}

/* Counselling system pill selector */
.cp-system-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.25rem}
.cp-sys-btn{display:flex;flex-direction:column;align-items:flex-start;padding:8px 18px;font-family:inherit;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);cursor:pointer;transition:all 0.15s;color:var(--text)}
.cp-sys-btn:hover{border-color:var(--accent)}
.cp-sys-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.cp-sys-btn span{display:block;font-size:13px;font-weight:700}
.cp-sys-sub{font-size:10px!important;font-weight:400!important;opacity:0.75}
.cp-sys-btn.active .cp-sys-sub{opacity:0.85}

/* Coming-soon placeholder panels (TNEA, TNGASA, future systems) */
.cp-coming-wrap{max-width:600px;margin:2rem auto;text-align:center;padding:2.5rem 2rem;background:var(--surface);border:1.5px solid var(--border);border-radius:16px}
.cp-coming-ico{font-size:2.5rem;margin-bottom:12px}
.cp-coming-title{font-size:1.15rem;font-weight:800;color:var(--text);margin-bottom:10px}
.cp-coming-desc{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:20px}
.cp-coming-what{text-align:left;background:var(--bg2);border-radius:10px;padding:14px 18px;margin-bottom:16px}
.cp-coming-what-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);margin-bottom:8px}
.cp-coming-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.cp-coming-list li{font-size:13px;color:var(--text2);line-height:1.5}
.cp-coming-note{font-size:12px;color:var(--text3)}
.cp-coming-link{color:var(--accent);text-decoration:none;font-weight:600}
.cp-coming-link:hover{text-decoration:underline}

/* Mode toggle */
.j-mode-tabs{display:flex;gap:6px;margin-bottom:12px}
.j-mode-btn{padding:7px 18px;font-size:13px;font-weight:600;font-family:inherit;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text3);cursor:pointer;transition:all 0.15s}
.j-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.j-mode-btn:not(.active):hover{border-color:var(--accent);color:var(--accent)}

/* Range explorer — institute groups */
.j-inst-group{border:1.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:1rem;overflow:hidden}
.j-inst-group-hdr{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:var(--surface2);border-bottom:1px solid var(--border);gap:10px}
.j-inst-group-name{font-size:14px;font-weight:700;color:var(--text);flex:1}
.j-inst-group-meta{display:flex;align-items:center;gap:6px;flex-shrink:0}
.j-state-pill{font-size:10px;color:var(--text3);background:var(--surface);border:1px solid var(--border);padding:2px 8px;border-radius:20px}
.j-prog-list{padding:10px 12px;display:flex;flex-direction:column;gap:12px}

/* Range explorer — program block */
.j-range-prog{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.j-range-prog-name{font-size:12px;font-weight:600;color:var(--text2);padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--border)}
.j-range-table{width:100%;border-collapse:collapse;font-size:12px}
.j-range-table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--text3);padding:6px 10px;text-align:left;background:var(--surface2);border-bottom:1px solid var(--border)}
.j-range-table td{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}
.j-range-table tbody tr:last-child td{border-bottom:none}
.j-range-table tbody tr:hover td{background:var(--surface2)}
.j-rt-quota{color:var(--text3);font-size:11px}
.j-rt-num{text-align:right;font-variant-numeric:tabular-nums}
.j-rt-yr{color:var(--text3);font-size:11px;text-align:right}
.j-rt-in-range td{background:#E8F8EF!important;color:var(--green)}
.j-rt-in-range b{color:var(--green);font-weight:700}

/* ── AFTER UG TAB ── */
.aug-page-hdr{padding:1.5rem 0 1rem}
.aug-page-title{font-size:1.35rem;font-weight:700;color:var(--text);margin-bottom:4px}
.aug-page-sub{font-size:13px;color:var(--text3);max-width:640px;line-height:1.6}

.aug-filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:1rem}
.aug-fg{display:flex;flex-direction:column;gap:4px}
.aug-fg label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em}
.aug-fg select{font-size:13px;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:inherit;min-width:180px}
.aug-fg select:focus{outline:none;border-color:var(--accent)}
.aug-search{font-size:13px;padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:inherit;min-width:240px;align-self:flex-end}
.aug-search:focus{outline:none;border-color:var(--accent)}

.aug-stats-bar{font-size:13px;color:var(--text3);margin-bottom:1rem}
.aug-stats-bar b{color:var(--text)}

.aug-section{margin-bottom:2rem}
.aug-sec-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--border)}
.aug-sec-ico{font-size:18px}
.aug-sec-title{font-size:16px;font-weight:700;color:var(--text);flex:1}
.aug-sec-count{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--surface2);border:1px solid var(--border);color:var(--text3)}

.aug-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}

.aug-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:9px;transition:box-shadow 0.15s}
.aug-card:hover{box-shadow:var(--shadow)}
.aug-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.aug-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.35;flex:1}
.aug-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid;white-space:nowrap;flex-shrink:0}
.aug-field{font-size:12px;color:var(--text3);line-height:1.4}

.aug-row{display:flex;align-items:flex-start;gap:8px;font-size:12px}
.aug-lbl{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em;min-width:58px;padding-top:3px;flex-shrink:0}
.aug-val{color:var(--text2);line-height:1.5;flex:1}
.aug-pills{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.aug-exam-pill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--brand-bg);color:var(--brand-dk);border:1px solid var(--brand-border)}
.aug-ug-pill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--accent-bg);color:var(--accent-dk);border:1px solid var(--accent-border)}

.aug-exam-note{font-size:11px;color:var(--text3);line-height:1.5;padding:6px 10px;background:var(--surface2);border-radius:var(--r);border-left:3px solid var(--border2)}
.aug-note{font-size:11px;color:var(--amber);line-height:1.5;padding:6px 10px;background:var(--amber-bg);border-radius:var(--r)}

.aug-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:2px;padding-top:8px;border-top:1px solid var(--border)}
.aug-salary{font-size:13px;font-weight:700;color:var(--text)}
.aug-market{font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px}
.aug-mkt-high{background:#E8F8EF;color:#0A5234}
.aug-mkt-growing{background:#EBF0FF;color:#0F3098}
.aug-mkt-stable{background:var(--surface2);color:var(--text3)}
.aug-mkt-niche{background:var(--amber-bg);color:var(--amber)}

.aug-disclaimer{font-size:12px;color:var(--text3);margin-top:1.5rem;padding:10px 14px;border-left:3px solid var(--border2);border-radius:0 6px 6px 0;background:var(--surface);line-height:1.6}

/* ── HOME TAB ── */
#tab-home{padding:0}
.home-hero{text-align:center;padding:3rem 1.5rem 2.5rem;background:var(--bg);border-bottom:1.5px solid var(--border)}
.home-logo-img{width:100%;max-width:480px;height:auto;display:block;margin:0 auto}
.home-body{max-width:900px;margin:0 auto;padding:2.5rem 1.5rem 5rem}
.home-mission{background:var(--surface);border:1.5px solid var(--border);border-left:4px solid var(--brand);border-radius:var(--r-lg);padding:1.5rem 1.75rem;margin-bottom:2.5rem}
.home-mission-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--brand);margin-bottom:0.75rem}
.home-mission-text{font-size:14px;color:var(--text2);line-height:1.8}
.home-mission-text p+p{margin-top:0.9rem}
.home-guide{margin-bottom:2.5rem}
.home-guide-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:1rem}
.home-guide-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.home-guide-cards{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.home-guide-cards{grid-template-columns:1fr}}
.home-path-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;text-align:left;cursor:pointer;transition:all 0.18s;font-family:inherit;width:100%;display:flex;flex-direction:column;gap:8px}
.home-path-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.home-path-ico{font-size:2rem;line-height:1}
.home-path-label{font-size:15px;font-weight:700;color:var(--text)}
.home-path-desc{font-size:13px;color:var(--text3);line-height:1.55;flex:1}
.home-path-cta{font-size:13px;font-weight:600;color:var(--accent)}
.home-stats-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:2rem}
.home-stat-item{flex:1;min-width:110px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:1rem 1.25rem;text-align:center}
.home-stat-n{font-size:1.9rem;font-weight:700;color:var(--brand);line-height:1}
.home-stat-l{font-size:10px;color:var(--text3);margin-top:4px;text-transform:uppercase;letter-spacing:0.07em}
.home-disclaimer{font-size:12px;color:var(--text3);padding:10px 14px;border-left:3px solid var(--border2);border-radius:0 6px 6px 0;background:var(--surface);line-height:1.6}


/* ═══════════════════════════════════════
   CAREER GUIDE TAB
═══════════════════════════════════════ */
.cg-hero{text-align:center;padding:36px 16px 24px;max-width:700px;margin:0 auto}
.cg-hero-title{font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:8px}
.cg-hero-sub{color:var(--text2);font-size:14px;line-height:1.6;margin-bottom:20px}
.cg-search-row{display:flex;gap:8px;width:100%;max-width:560px;margin:0 auto 16px}
.cg-input{flex:1;padding:12px 16px;border:2px solid var(--border);border-radius:12px;font-size:15px;font-family:inherit;background:var(--surface);color:var(--text)}
.cg-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-bg)}
.cg-btn{padding:12px 22px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:opacity 0.15s}
.cg-btn:hover{opacity:0.88}
.cg-btn-alt{background:transparent;color:var(--accent);border:1.5px solid var(--accent);margin-left:10px}
.cg-btn-alt:hover{background:var(--accent);color:#fff;opacity:1}
.cg-cuet-hint{margin-top:14px;background:var(--accent-bg);border-radius:10px;padding:10px 13px;font-size:13px;line-height:1.5;color:var(--text)}
.cg-cuet-hint strong{color:var(--accent-dk)}
.cg-link-inline{background:none;border:none;padding:0;color:var(--accent);font-weight:700;font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap}
.cg-link-inline:hover{text-decoration:underline}
.cg-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 8px}
.cg-chip{padding:7px 15px;background:var(--surface);border:1.5px solid var(--border);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;color:var(--text2)}
.cg-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}

/* Path card */
.cg-path{max-width:860px;margin:24px auto 40px;border:1.5px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.cg-path-hdr{padding:20px 24px;display:flex;align-items:flex-start;gap:16px}
.cg-path-ico{font-size:2.2rem;line-height:1;flex-shrink:0;margin-top:2px}
.cg-path-title{font-size:1.2rem;font-weight:800}
.cg-path-summary{font-size:13px;color:var(--text2);margin-top:5px;line-height:1.6}

.cg-step{padding:18px 24px;border-top:1px solid var(--border)}
.cg-step-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);margin-bottom:12px}

.cg-subj-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.cg-subj-pill{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;background:var(--accent-bg);color:var(--accent-dk);border:1px solid var(--accent-border)}
.cg-tip{font-size:12px;color:var(--text3);font-style:italic;line-height:1.5}

/* Exam cards in Step 2 */
.cg-exam-list{display:flex;flex-direction:column;gap:10px}
.cg-exam-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 16px}
.cg-exam-name{font-size:14px;font-weight:800;color:var(--text);margin-bottom:2px}
.cg-exam-full{font-size:12px;color:var(--text2);margin-bottom:8px}
.cg-exam-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px}
.cg-exam-body{color:var(--text3)}
.cg-exam-freq{color:var(--text2);font-weight:600}
.cg-exam-link{color:var(--accent);text-decoration:none;font-weight:600}
.cg-exam-link:hover{text-decoration:underline}
.cg-exam-note{font-size:11.5px;color:var(--text2);margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-style:italic;line-height:1.5}

/* Course grid in Step 3 — reuse existing .card styles, just wrap in grid */
.cg-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}

/* Careers row in Step 5 */
.cg-careers-row{display:flex;flex-wrap:wrap;gap:8px}
.cg-career-tag{font-size:12px;padding:6px 13px;background:var(--bg2);border-radius:20px;border:1px solid var(--border);font-weight:600;color:var(--text2)}

/* No match */
.cg-no-match{text-align:center;padding:48px 16px;color:var(--text2);max-width:600px;margin:0 auto}
.cg-no-match h3{font-size:1.05rem;font-weight:700;margin-bottom:6px;color:var(--text)}

/* Mobile tweaks */
@media(max-width:600px){
  .cg-search-row{flex-direction:column}
  .cg-btn{width:100%}
  .cg-btn-alt{margin-left:0}
  .cg-path-hdr{flex-direction:column;gap:10px}
  .cg-course-grid{grid-template-columns:1fr}
  .cg-step{padding:16px 16px}
}

/* Career Guide — Autocomplete Suggestions */
.cg-search-wrap{position:relative;max-width:560px;margin:0 auto 16px}
.cg-search-row{display:flex;gap:8px;width:100%}
.cg-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:var(--shadow);z-index:100;overflow:hidden;max-height:320px;overflow-y:auto}
.cg-suggest-item{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;transition:background 0.1s;font-size:14px;color:var(--text)}
.cg-suggest-item:hover,.cg-suggest-item.active{background:var(--bg2)}
.cg-suggest-ico{font-size:1.2rem;flex-shrink:0;width:24px;text-align:center}
.cg-suggest-title strong{color:var(--accent)}

/* Career Guide — Stream fallback card */
.cg-fallback{display:flex;align-items:flex-start;gap:20px;max-width:700px;margin:32px auto;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:28px 28px;box-shadow:var(--shadow-sm)}
.cg-fallback-ico{font-size:2.8rem;line-height:1;flex-shrink:0}
.cg-fallback-title{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:8px}
.cg-fallback-sub{font-size:13px;color:var(--text2);line-height:1.6}
@media(max-width:500px){.cg-fallback{flex-direction:column;gap:12px}}

/* ── Career Guide: category browse ── */
.cg-browse-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);text-align:center;margin:28px 0 12px}
.cg-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-width:860px;margin:0 auto 32px;padding:0 8px}
.cg-cat-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;cursor:pointer;transition:all 0.15s;text-align:center;font-family:inherit}
.cg-cat-tile:hover{border-color:var(--accent);background:var(--accent-bg);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cg-cat-ico{font-size:1.8rem;line-height:1}
.cg-cat-label{font-size:12px;font-weight:700;color:var(--text);line-height:1.3}
.cg-cat-count{font-size:11px;color:var(--text3);font-weight:600}
/* Category results panel */
.cg-cat-results{max-width:860px;margin:0 auto 32px;padding:0 8px}
.cg-cat-results-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cg-cat-results-ico{font-size:1.5rem}
.cg-cat-results-name{font-size:1rem;font-weight:800;color:var(--text)}
.cg-cat-results-count{font-size:12px;color:var(--text3);font-weight:600;background:var(--bg2);border-radius:20px;padding:3px 10px}
.cg-cat-clear{margin-left:auto;background:none;border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--text3);cursor:pointer;font-family:inherit;transition:all 0.15s}
.cg-cat-clear:hover{border-color:var(--text2);color:var(--text)}
.cg-cat-list{display:flex;flex-wrap:wrap;gap:10px}
.cg-cat-career-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);transition:all 0.15s}
.cg-cat-career-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.cg-cat-career-ico{font-size:1.1rem}
/* Day in life */
.cg-step-day{background:var(--bg2)}
.cg-day-list{display:flex;flex-direction:column;gap:6px}
.cg-day-item{font-size:13px;color:var(--text2);line-height:1.5;padding:8px 12px;background:var(--surface);border-radius:8px;border-left:3px solid var(--accent-border)}
@media(max-width:500px){.cg-browse-grid{grid-template-columns:repeat(2,1fr)}.cg-cat-tile{padding:14px 8px}}

/* Cross-reference links */
.card-exam-link{color:var(--accent);text-decoration:none;font-weight:600;font-size:12px}
.card-exam-link:hover{text-decoration:underline}
.aug-exam-link{text-decoration:none;cursor:pointer}
.aug-exam-link:hover{opacity:0.82;text-decoration:underline}
.cg-tab-jump{margin-top:10px}
.cg-tab-link{background:none;border:1.5px solid var(--accent);color:var(--accent);border-radius:20px;padding:6px 16px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.15s}
.cg-tab-link:hover{background:var(--accent);color:#fff}

/* ── Monthly salary sub-label ── */
.sal-monthly{font-size:11px;color:var(--text3);font-style:italic;font-weight:400}

/* ── Scholarships section on Home tab ── */
.home-scholarships{margin-top:28px;border:1.5px solid var(--border);border-radius:16px;overflow:hidden}
.home-sch-toggle{width:100%;background:var(--bg2);border:none;text-align:left;padding:16px 20px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;color:var(--text);font-family:inherit;gap:8px}
.home-sch-toggle:hover{background:var(--border)}
.sch-arrow{font-size:13px;color:var(--text3);transition:transform 0.2s;flex-shrink:0}
.sch-panel{padding:20px}
.sch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.sch-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:16px 18px}
.sch-card-alt{border-color:var(--accent-border);background:var(--accent-bg)}
.sch-ico{font-size:1.5rem;margin-bottom:6px}
.sch-title{font-size:14px;font-weight:700;margin-bottom:8px;color:var(--text)}
.sch-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.sch-list li{font-size:13px;color:var(--text2);line-height:1.5}
.sch-list strong{color:var(--text)}
@media(max-width:600px){.sch-grid{grid-template-columns:1fr}.sch-panel{padding:14px}}

/* ── Scholarships Tab ── */
.sch-tab-hdr{padding:20px 0 12px}
.sch-tab-title{font-size:21px;font-weight:700;color:var(--text);margin-bottom:6px}
.sch-tab-sub{font-size:14px;color:var(--text2);max-width:640px}
.sch-lvl-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%}
.sch-lvl-btn{padding:5px 13px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--text2);font-family:inherit;transition:all 0.15s}
.sch-lvl-btn.active,.sch-lvl-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.sch-t-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:2rem}
.sch-t-card{background:var(--surface);border:1.5px solid var(--border);border-left:4px solid;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:7px}
.sch-t-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sch-t-level{font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px;background:var(--bg2);color:var(--text3)}
.sch-t-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;border:1.5px solid}
.sch-t-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.4}
.sch-t-body{font-size:12px;color:var(--text3)}
.sch-t-for{font-size:13px;color:var(--text2);line-height:1.4}
.sch-t-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.sch-t-tag{font-size:11px;background:var(--bg2);color:var(--text2);padding:3px 8px;border-radius:8px;white-space:nowrap}
.sch-t-comm{background:#F3EBFF;color:#6B21A8;font-weight:600}
.sch-t-dl-soon{background:#FFF5E0;color:#6B3F00}
.sch-t-dl-past{color:var(--text3);text-decoration:line-through}
.sch-t-note{font-size:12px;background:#FFF5E0;color:#6B3F00;border:1px solid #F5C97A;border-radius:8px;padding:6px 10px;line-height:1.4}
.sch-t-link{font-size:12px;color:var(--accent);text-decoration:none;margin-top:2px;align-self:flex-start}
.sch-t-link:hover{text-decoration:underline}
.sch-disclaimer{font-size:12px;color:var(--text3);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.sch-view-all-wrap{padding:8px 20px 12px;text-align:right}
.sch-view-all-btn{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;padding:0}
.sch-view-all-btn:hover{text-decoration:underline}
@media(max-width:600px){.sch-t-grid{grid-template-columns:1fr}}

/* ── Glossary floating action button + modal ── */
.glossary-fab{position:fixed;bottom:24px;right:24px;background:var(--accent);color:#fff;border:none;border-radius:24px;padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;z-index:900;box-shadow:0 4px 16px rgba(0,0,0,0.18);transition:opacity 0.2s}
.glossary-fab:hover{opacity:0.88}
.glossary-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:2000;align-items:center;justify-content:center}
.glossary-modal.open{display:flex}
.glossary-box{background:var(--surface);border-radius:16px;width:min(640px,96vw);max-height:82vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.2)}
.glossary-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1.5px solid var(--border)}
.glossary-hdr-title{font-size:16px;font-weight:800;color:var(--text)}
.glossary-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text3);padding:2px 8px;border-radius:6px}
.glossary-close:hover{background:var(--bg2)}
.glossary-search{padding:12px 22px;border-bottom:1px solid var(--border)}
.glossary-search input{width:100%;padding:9px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;background:var(--bg2);color:var(--text)}
.glossary-search input:focus{outline:none;border-color:var(--accent)}
.glossary-list{flex:1;overflow-y:auto;padding:8px 0}
.glossary-row{padding:12px 22px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:90px 1fr;gap:10px 16px}
.glossary-row:last-child{border-bottom:none}
.glossary-term{font-size:14px;font-weight:800;color:var(--accent)}
.glossary-full{font-size:13px;font-weight:600;color:var(--text)}
.glossary-tamil{font-size:12px;color:var(--text3);font-family:'Noto Sans Tamil',sans-serif;margin-top:2px;grid-column:2}
.glossary-desc{font-size:12px;color:var(--text2);line-height:1.5;margin-top:3px;grid-column:2}
.glossary-empty{padding:32px;text-align:center;color:var(--text3);font-size:14px}
@media(max-width:500px){.glossary-row{grid-template-columns:70px 1fr}.glossary-fab{bottom:16px;right:16px;padding:9px 14px;font-size:12px}}

/* ── Home feedback invite ── */
.home-feedback{margin-top:28px;display:flex;align-items:center;gap:16px;background:var(--bg2);border:1.5px solid var(--border);border-radius:16px;padding:18px 22px;flex-wrap:wrap}
.home-feedback-ico{font-size:2rem;flex-shrink:0}
.home-feedback-body{flex:1;min-width:180px}
.home-feedback-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
.home-feedback-sub{font-size:13px;color:var(--text2);line-height:1.5}
.home-feedback-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;border-radius:24px;padding:10px 20px;font-size:13px;font-weight:700;white-space:nowrap;transition:opacity 0.15s;flex-shrink:0}
.home-feedback-btn:hover{opacity:0.85}
@media(max-width:500px){.home-feedback{flex-direction:column;align-items:flex-start}.home-feedback-btn{width:100%;text-align:center}}

/* ── Home Announcements Section ── */
.home-ann{margin-bottom:28px}
.home-ann-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.home-ann-title{font-size:17px;font-weight:700;color:var(--text)}
.home-ann-updated{font-size:11px;color:var(--text3);font-weight:600}

/* Filter pills */
.home-ann-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ann-filter-btn{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--text2);font-family:inherit;transition:all 0.15s}
.ann-filter-btn.active,.ann-filter-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}

/* List containers */
.home-ann-list,.home-ann-past{display:flex;flex-direction:column;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}

/* Each row */
.ann-row{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);transition:background 0.1s}
.ann-row:last-child{border-bottom:none}
.ann-row:hover{background:var(--bg2)}
.ann-past-row{opacity:0.52}
.ann-priority-high{border-left:3px solid #D93025}

/* Category pills */
.ann-cat{flex-shrink:0;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-top:2px;white-space:nowrap}
.ann-cat-exam        {background:#FEF0F0;color:#B91C1C}
.ann-cat-result      {background:#E8F8EF;color:#0A5234}
.ann-cat-counselling {background:#EBF0FF;color:#1D3B9A}
.ann-cat-application {background:#FFF8E0;color:#7C4A00}
.ann-cat-admission   {background:#E8F4FF;color:#0A4A8A}
.ann-cat-news        {background:var(--bg2);color:var(--text3)}

/* Row body */
.ann-body{flex:1;min-width:0}
.ann-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.4}
.ann-desc{font-size:12px;color:var(--text2);line-height:1.45}
.ann-link{color:var(--accent);text-decoration:none;font-weight:600;font-size:11px}
.ann-link:hover{text-decoration:underline}

/* Date badge */
.ann-date{flex-shrink:0;padding-top:2px}
.ann-date-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.ann-badge-soon    {background:#FEF0F0;color:#B91C1C}
.ann-badge-near    {background:#FFF8E0;color:#7C4A00}
.ann-badge-ongoing {background:#E8F8EF;color:#0A5234}
.ann-badge-future  {background:var(--bg2);color:var(--text3)}
.ann-badge-past    {background:var(--bg2);color:var(--text3);text-decoration:line-through}

/* Tentative tag — shown inline after the title */
.ann-tentative-tag{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;background:#FFF8E0;color:#7C4A00;border:1px solid #F0D070;vertical-align:middle;position:relative;top:-1px}

/* Empty state */
.ann-empty{padding:20px 16px;text-align:center;color:var(--text3);font-size:13px}

/* Past toggle */
.home-ann-past-toggle{margin-top:8px;text-align:center}
.home-ann-past-toggle button{background:none;border:none;color:var(--text3);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:6px}
.home-ann-past-toggle button:hover{color:var(--accent);background:var(--bg2)}
.home-ann-past{margin-top:8px}

/* Disclaimer */
.home-ann-note{font-size:11px;color:var(--text3);margin-top:8px;font-style:italic}

@media(max-width:500px){
  .ann-row{gap:8px;padding:11px 12px}
  .ann-cat{font-size:9px;padding:2px 8px}
  .home-ann-filters{gap:6px}
  .ann-filter-btn{font-size:11px;padding:4px 10px}
}

/* ── COURSES SUB-NAV (outside .main, shown when Courses & Exams active) ── */
#courses-subnav{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 1.5rem 0}
#courses-subnav .exam-mode-tabs{max-width:1320px;margin:0 auto;margin-bottom:0}

/* ── AFTER UG — sub-mode panel note ── */
.aug-mode-tabs{padding:12px 1.5rem 0;background:var(--surface);border-bottom:1px solid var(--border);margin-bottom:0}
.aug-panel-note{font-size:13px;color:var(--text2);padding:14px 16px;border-left:3px solid var(--accent-border,var(--border2));background:var(--bg2);border-radius:0 6px 6px 0;margin:14px 0 4px;line-height:1.6}

/* PG colleges stats bar in After UG tab */
.col-stats-bar{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 6px}


/* ══════════════════════════════════════════════════════════════════════════════
   PSYCHOMETRIC TEST — Know Yourself Tab
   Holland RIASEC model: intro → question flow → results
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ── */
.psycho-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
}
.psycho-test-wrap   { padding-top: 1rem; }
.psycho-results-wrap { padding-top: 1rem; }

/* ── Language toggle bar ── */
.psy-lang-bar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.psy-lang-btn {
  font-size: 12px; font-family: var(--font-body);
  padding: 5px 14px; border-radius: 20px; cursor: pointer;
  background: var(--surface2); color: var(--text2);
  border: 1px solid var(--border); transition: all 0.15s;
}
.psy-lang-btn:hover { background: var(--brand-bg); color: var(--brand); border-color: var(--brand-border); }

/* ── Intro card ── */
.psycho-intro-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow);
  text-align: center;
}
.psycho-intro-icon { font-size: 3rem; margin-bottom: 1rem; }
.psycho-intro-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--text); margin-bottom: 0.75rem; line-height: 1.2;
}
.psycho-intro-sub {
  font-size: 14px; color: var(--text2); line-height: 1.7;
  max-width: 520px; margin: 0 auto 1.75rem;
}

/* Stat pills */
.psycho-intro-stats {
  display: flex; justify-content: center; gap: 1.5rem;
  margin-bottom: 1.75rem; flex-wrap: wrap;
}
.psy-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.psy-stat-n {
  font-size: 1.75rem; font-weight: 700;
  font-family: var(--font-display); color: var(--brand);
}
.psy-stat-l { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }

/* Step list */
.psycho-intro-steps {
  display: flex; flex-direction: column; gap: 0.75rem;
  text-align: left; margin-bottom: 2rem;
  background: var(--surface2); border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
}
.psy-step { display: flex; align-items: flex-start; gap: 0.75rem; }
.psy-step-ico { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.psy-step strong { font-size: 14px; color: var(--text); display: block; margin-bottom: 2px; }
.psy-step p { font-size: 13px; color: var(--text2); margin: 0; }

/* Grade selector */
.psy-grade-select { margin-bottom: 1.5rem; }
.psy-grade-label  { font-size: 14px; font-weight: 600; color: var(--text1); margin-bottom: 0.6rem; }
.psy-grade-btns   { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.psy-grade-btn {
  padding: 9px 18px; border: 2px solid var(--border);
  border-radius: 10px; cursor: pointer; font-size: 14px;
  font-weight: 500; font-family: var(--font-body);
  background: var(--surface2); color: var(--text2);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.psy-grade-btn:hover { border-color: var(--brand); color: var(--brand); }
.psy-grade-btn.selected {
  border-color: var(--brand); background: var(--brand);
  color: #fff; font-weight: 600;
}

/* Name input */
.psy-name-row   { margin-bottom: 1.2rem; text-align: left; }
.psy-name-label { font-size: 13px; color: var(--text2); display: block; margin-bottom: 6px; }
.psy-name-input {
  width: 100%; max-width: 360px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  display: block;
  margin: 0 auto;
}
.psy-name-input:focus { border-color: var(--brand); }

/* Start button */
.psy-start-btn {
  display: inline-block; padding: 14px 36px;
  background: var(--brand); color: #fff;
  border: none; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 600; font-family: var(--font-body);
  box-shadow: 0 4px 16px rgba(212,88,10,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-bottom: 1rem;
}
.psy-start-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,88,10,0.45); }
.psy-start-btn:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; opacity: 0.6; }
.psycho-intro-note { font-size: 12px; color: var(--text3); }

/* ── Progress bar ── */
.psy-progress-wrap {
  display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem;
}
.psy-progress-track {
  flex: 1; height: 6px; background: var(--surface3);
  border-radius: 99px; overflow: hidden;
}
.psy-progress-fill {
  height: 100%; background: var(--brand);
  border-radius: 99px; transition: width 0.3s ease;
}
.psy-progress-pct { font-size: 12px; color: var(--text3); font-weight: 600; min-width: 32px; text-align: right; }

/* ── Question card ── */
.psy-question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
.psy-section-label {
  font-size: 11px; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 1.25rem; font-weight: 600;
}
.psy-q-prompt { font-size: 13px; color: var(--text2); margin-bottom: 0.5rem; }
.psy-q-sub    { font-size: 12px; color: var(--text3); margin-bottom: 1rem; font-style: italic; }
.psy-q-text {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  font-weight: 600; color: var(--text);
  line-height: 1.5; margin-bottom: 1.75rem;
}

/* ── Likert buttons ── */
.psy-likert {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.psy-likert-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 12px 4px;
  background: var(--surface2); border: 2px solid var(--border);
  border-radius: 10px; cursor: pointer;
  transition: all 0.15s; font-family: var(--font-body);
}
.psy-likert-btn:hover { background: var(--brand-bg); border-color: var(--brand-border); }
.psy-likert-btn.selected {
  background: var(--brand); border-color: var(--brand);
}
.psy-likert-btn.selected .psy-likert-num,
.psy-likert-btn.selected .psy-likert-label { color: #fff; }
.psy-likert-num   { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.psy-likert-label { font-size: 10px; color: var(--text2); text-align: center; line-height: 1.3; }

/* ── Work-style options ── */
.psy-workstyle-opts { display: flex; flex-direction: column; gap: 12px; margin-top: 1rem; }
.psy-ws-btn {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; text-align: left; font-family: var(--font-body);
  transition: all 0.15s; width: 100%;
}
.psy-ws-btn:hover { background: var(--brand-bg); border-color: var(--brand-border); }
.psy-ws-label {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.psy-ws-text { font-size: 14px; color: var(--text); font-weight: 500; line-height: 1.5; }
.psy-ws-or   { text-align: center; font-size: 12px; color: var(--text3); font-style: italic; }

/* Back button */
.psy-back-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); font-size: 13px; font-family: var(--font-body);
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
}
.psy-back-btn:hover { background: var(--surface2); }

/* ── Results hero ── */
.psy-results-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
  text-align: center;
}
.psy-results-code-badges { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 1rem; }
.psy-code-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: 99px;
  color: #fff; font-size: 15px; font-weight: 700;
}
.psy-code-plus { font-size: 1.2rem; color: var(--text3); font-weight: 300; }
.psy-results-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  color: var(--text); margin-bottom: 0.4rem;
}
.psy-results-holland-sub { font-size: 12px; color: var(--text3); margin-bottom: 1rem; }
.psy-results-desc { font-size: 14px; color: var(--text2); line-height: 1.7; max-width: 560px; margin: 0 auto; }

/* ── RIASEC bars section ── */
.psy-bars-section,
.psy-careers-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.psy-sec-heading {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 1rem; letter-spacing: -0.01em;
}
.psy-bars { display: flex; flex-direction: column; gap: 10px; }
.psy-bar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--surface2);
}
.psy-bar-row.psy-bar-top {
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
}
.psy-bar-meta { display: flex; align-items: center; gap: 6px; min-width: 130px; }
.psy-bar-icon  { font-size: 1rem; }
.psy-bar-code  { font-weight: 800; font-size: 13px; min-width: 18px; }
.psy-bar-name  { font-size: 12px; color: var(--text2); }
.psy-bar-track {
  flex: 1; height: 8px; background: var(--surface3);
  border-radius: 99px; overflow: hidden;
}
.psy-bar-fill  { height: 100%; border-radius: 99px; width: 0%; }
.psy-bar-pct   { font-size: 12px; font-weight: 700; color: var(--text2); min-width: 38px; text-align: right; }

/* ── Career result cards ── */
.psy-careers-sub { font-size: 13px; color: var(--text2); margin-bottom: 1rem; line-height: 1.5; }
.psy-career-grid { display: flex; flex-direction: column; gap: 8px; }
.psy-career-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
  border-top: 3px solid var(--border);
}
.psy-career-card:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.psy-cc-ico    { font-size: 1.5rem; flex-shrink: 0; }
.psy-cc-body   { flex: 1; }
.psy-cc-title  { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.psy-cc-roles  { font-size: 12px; color: var(--text2); }
.psy-cc-arrow  { font-size: 16px; color: var(--text3); flex-shrink: 0; }

/* ── Stream recommendation (early grade) ── */
.psy-stream-section  { margin-bottom: 1.5rem; }
.psy-stream-card {
  background: var(--surface2); border-radius: 14px;
  padding: 16px; margin-bottom: 0.75rem;
}
.psy-stream-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 8px;
  color: #fff; font-size: 14px; font-weight: 700;
  margin-bottom: 0.6rem;
}
.psy-stream-subjects { font-size: 13px; color: var(--text2); margin-bottom: 0.4rem; }
.psy-stream-leads    { font-size: 13px; color: var(--text1); font-weight: 600; margin-bottom: 0.5rem; }
.psy-stream-tip      { font-size: 13px; color: var(--text2); line-height: 1.5; }
.psy-stream-alt      { font-size: 13px; color: var(--text2); margin-top: 0.4rem; line-height: 1.5; }

/* ── Focus subjects ── */
.psy-focus-section { margin-bottom: 1.5rem; }
.psy-focus-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.6rem; }
.psy-focus-tag {
  padding: 6px 14px; background: var(--surface3);
  border-radius: 20px; font-size: 13px;
  font-weight: 600; color: var(--text1);
}

/* ── Forward link ── */
.psy-forward-link {
  text-align: center; font-size: 13px;
  color: var(--brand); cursor: pointer;
  margin-bottom: 1rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.psy-forward-link:hover { opacity: 0.8; }

/* ── CTA buttons ── */
.psy-results-cta {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 1.25rem;
}
.psy-cta-primary {
  padding: 13px 28px; background: var(--brand); color: #fff;
  border: none; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 600; font-family: var(--font-body);
  box-shadow: 0 4px 14px rgba(212,88,10,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.psy-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(212,88,10,0.4); }
.psy-cta-secondary {
  padding: 13px 22px; background: var(--surface);
  color: var(--text2); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; font-size: 14px;
  font-family: var(--font-body); transition: all 0.15s;
}
.psy-cta-secondary:hover { background: var(--surface2); }
.psy-cta-report {
  padding: 13px 26px;
  background: var(--surface);
  color: var(--brand-dk);
  border: 2px solid var(--brand);
  border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 700;
  font-family: var(--font-body);
  transition: all 0.15s;
  letter-spacing: 0.2px;
}
.psy-cta-report:hover { background: var(--brand-bg); }

/* ── Disclaimer ── */
.psy-disclaimer {
  font-size: 12px; color: var(--text3); line-height: 1.6;
  text-align: center; max-width: 560px; margin: 0 auto;
}

/* ── Progress dots ── */
.psy-progress-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 1.5rem; padding: 0 1rem;
}
.psy-dot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 56px;
}
.psy-dot-ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text3);
  transition: all 0.2s;
}
.psy-dot.active .psy-dot-ring {
  border-color: var(--brand); background: var(--brand);
  color: #fff; box-shadow: 0 0 0 4px rgba(212,88,10,0.15);
}
.psy-dot.done .psy-dot-ring {
  border-color: var(--brand); background: var(--brand-bg);
  color: var(--brand);
}
.psy-dot-label { font-size: 10px; color: var(--text3); font-weight: 500; text-align: center; }
.psy-dot.active .psy-dot-label { color: var(--brand); font-weight: 700; }
.psy-dot.done .psy-dot-label   { color: var(--brand); }
.psy-dot-line {
  flex: 1; height: 2px; background: var(--border);
  margin-bottom: 14px; max-width: 40px;
}

/* ── Interest choice card ── */
.psy-choice-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.psy-choice-prompt { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; }
.psy-choice-btns   { display: flex; flex-direction: column; gap: 10px; margin-top: 1rem; }
.psy-choice-btn {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; text-align: left; transition: all 0.15s;
  font-family: var(--font-body);
}
.psy-choice-btn:hover { border-color: var(--brand); background: var(--brand-bg); }
.psy-choice-btn:active { transform: scale(0.98); }
.psy-choice-label {
  min-width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.psy-choice-text { font-size: 14px; color: var(--text); font-weight: 500; line-height: 1.5; }
.psy-choice-or   { text-align: center; font-size: 12px; color: var(--text3); font-style: italic; }
.psy-ta          { display: block; font-size: 1em; font-weight: 600; line-height: 1.4; }
.psy-en-sub      { display: block; font-size: 0.78em; color: var(--text3); margin-top: 3px; font-weight: 400; }
.psy-skip-row    { text-align: center; margin-top: 1.2rem; }
.psy-skip-btn    { background: none; border: none; color: var(--text3); font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 4px 8px; font-family: var(--font-body); }
.psy-skip-btn:hover { color: var(--text2); }

/* ── Follow-up card ── */
.psy-followup-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.psy-fu-options { display: flex; flex-direction: column; gap: 8px; margin-top: 1rem; }
.psy-fu-option {
  padding: 13px 16px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: 10px;
  cursor: pointer; text-align: left; font-size: 14px;
  color: var(--text); font-weight: 500; line-height: 1.5;
  font-family: var(--font-body); transition: all 0.15s;
}
.psy-fu-option:hover  { border-color: var(--brand); background: var(--brand-bg); color: var(--brand); }
.psy-fu-option:active { transform: scale(0.98); }

/* ── Skills card ── */
.psy-skill-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.psy-skill-activity {
  font-size: 15px; font-weight: 600; color: var(--text);
  margin-bottom: 1.25rem; line-height: 1.5;
  padding: 12px 14px; background: var(--surface2);
  border-radius: 10px; border-left: 3px solid var(--brand);
}
.psy-skill-anchors { display: flex; flex-direction: column; gap: 7px; }
.psy-anchor-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: 10px;
  cursor: pointer; text-align: left; font-family: var(--font-body);
  transition: all 0.15s;
}
.psy-anchor-btn:hover { border-color: var(--brand); background: var(--brand-bg); }
.psy-anchor-btn:active { transform: scale(0.98); }
.psy-anchor-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--text3); flex-shrink: 0;
}
.psy-anchor-text { font-size: 13px; color: var(--text); line-height: 1.4; }

/* ── Transition screen ── */
.psy-transition-screen {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.5rem 1.5rem;
  box-shadow: var(--shadow-sm); text-align: center;
}
.psy-transition-icon  { font-size: 2.5rem; margin-bottom: 0.75rem; }
.psy-transition-title {
  font-size: 1.25rem; font-weight: 800; color: var(--text);
  margin-bottom: 0.75rem;
}
.psy-transition-sub {
  font-size: 14px; color: var(--text2); line-height: 1.65;
  max-width: 420px; margin: 0 auto 1.5rem;
}
.psy-transition-btn {
  padding: 12px 30px; background: var(--brand); color: #fff;
  border: none; border-radius: 10px; cursor: pointer;
  font-size: 15px; font-weight: 600; font-family: var(--font-body);
  box-shadow: 0 4px 14px rgba(212,88,10,0.3); transition: all 0.15s;
}
.psy-transition-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(212,88,10,0.4); }

/* ── Subtype refinement ── */
.psy-subtype-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
}
.psy-subtype-heading { font-size: 12px; color: var(--text3); font-weight: 600; }
.psy-subtype-chip {
  padding: 4px 12px; background: var(--brand-bg); color: var(--brand);
  border-radius: 20px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--brand-border);
}

/* ── Skills aptitude bars (results) ── */
.psy-skills-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.25rem;
}
.psy-skill-bars { display: flex; flex-direction: column; gap: 8px; }
.psy-skill-bar-row {
  display: flex; align-items: center; gap: 8px;
}
.psy-skill-bar-label { font-size: 11px; color: var(--text2); font-weight: 600; min-width: 78px; }
.psy-skill-bar-track {
  flex: 1; height: 7px; background: var(--surface3);
  border-radius: 99px; overflow: hidden;
}
.psy-skill-bar-fill  { height: 100%; border-radius: 99px; width: 0%; }
.psy-skill-bar-pct   { font-size: 11px; font-weight: 700; color: var(--text3); min-width: 32px; text-align: right; }

/* ── Mobile tweaks ── */
@media (max-width: 480px) {
  .psycho-intro-card { padding: 1.75rem 1.25rem; }
  .psy-question-card { padding: 1.5rem 1.25rem; }
  .psy-likert { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .psy-likert-btn { padding: 10px 2px; }
  .psy-likert-label { font-size: 9px; }
  .psy-bar-meta { min-width: 100px; }
  .psy-bar-name { display: none; }
  .psy-results-cta { flex-direction: column; }
  .psy-cta-primary, .psy-cta-secondary, .psy-cta-report { width: 100%; text-align: center; }
  .psy-choice-card, .psy-followup-card, .psy-skill-card { padding: 1.5rem 1.25rem; }
  .psy-dot-line { max-width: 20px; }
  .psy-skill-bar-label { min-width: 62px; font-size: 10px; }
}