/* ═══ TOKENS ═══ */
:root {
  --bg-1: #000000;
  --bg-2: #0a0a0a;
  --bg-3: #121212;
  --card: #0a0a0a;
  --card2: #111111;
  --border: rgba(255,255,255,0.12);
  --border2: rgba(255,255,255,0.06);

  --primary: #ededed;
  --primary-g: #ededed;
  --primary-glow: rgba(255,255,255,0.1);
  --blue-200: #3b82f6;
  --blue-50: rgba(59,130,246,0.05);

  --text-1: #ededed;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --text-4: #52525b;

  --safe:         #10b981;
  --safe-bg:      rgba(16,185,129,0.1);
  --safe-border:  rgba(16,185,129,0.2);
  --moderate:     #f59e0b;
  --moderate-bg:  rgba(245,158,11,0.1);
  --moderate-border: rgba(245,158,11,0.2);
  --dream:        #ef4444;
  --dream-bg:     rgba(239,68,68,0.1);
  --dream-border: rgba(239,68,68,0.2);

  --kcet-theme: #3b82f6;
  --kcet-theme-bg: rgba(59,130,246,0.1);
  --college-theme: #10b981;
  --college-theme-bg: rgba(16,185,129,0.1);

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.5);

  --ease: cubic-bezier(.4,0,.2,1);
  --transition: all .2s var(--ease);
}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{
  font-family:'Inter',-apple-system,sans-serif;
  background: var(--bg-1);
  min-height: 100vh;
  color: var(--text-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 90px;
  overflow-x: hidden;
  max-width: 100vw;
  font-size: 0.95rem; /* readable base text */
}

/* ═══ LAYOUT ═══ */
.container{max-width:680px;margin:0 auto;padding:1.25rem 20px;width:100%;} /* Mobile-first spacing: 20px sides */

/* ═══ TYPOGRAPHY ═══ */
h1{font-size:clamp(1.75rem,6vw,2.5rem);font-weight:700;line-height:1.2;
  letter-spacing:-.04em;color:var(--text-1);margin-bottom:.5rem;word-break:break-word;}
h2{font-size:1.25rem;font-weight:700;color:var(--text-1);letter-spacing:-.02em;margin-bottom:.75rem;}
h3{font-size:1.05rem;font-weight:600;color:var(--text-1);}
p { font-size: 0.95rem; }
.subtitle{font-size:1rem;color:var(--text-2);line-height:1.6;margin-bottom:1.5rem;}
.tagline{display:inline-block;font-size:.75rem;font-weight:600;color:var(--bg-1);
  background:var(--text-1);padding:.2rem .6rem;border-radius:var(--r-full);
  margin-bottom:1rem;}

/* ═══ PAGE HEADER ═══ */
.page-header {
  text-align: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
  background: var(--bg-2);
}
.page-header h1 { margin-bottom: 8px; }
.page-header p { color: var(--text-2); font-size: 0.95rem; max-width: 500px; margin: 0 auto; }
.trust-badge-container { margin-top: 1rem; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-1); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: var(--r-full);
  font-size: 0.75rem; font-weight: 600; color: var(--text-2);
  text-decoration: none; transition: var(--transition);
}
.trust-badge:hover { color: var(--text-1); border-color: rgba(255,255,255,0.3); }

/* ═══ CARDS ═══ */
.info-card,.form-card,.data-card, .qa-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.5rem;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.info-card:hover,.data-card:hover, .qa-card:hover {
  border-color:rgba(255,255,255,0.3);
  box-shadow:var(--shadow-md);
  transform: translateY(-2px);
}
.card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;}
.card-icon{width:40px;height:40px;background:var(--border2);border:1px solid var(--border);
  color:var(--text-1);border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:1.1rem;flex-shrink:0;}
.grid-cards{display:grid;gap:1.25rem;}

/* Color-coded themes */
.theme-kcet .card-icon { background: var(--kcet-theme-bg); border-color: rgba(59,130,246,0.2); color: var(--kcet-theme); }
.theme-college .card-icon { background: var(--college-theme-bg); border-color: rgba(16,185,129,0.2); color: var(--college-theme); }
.theme-kcet .btn-cta { background: var(--kcet-theme); color: #fff; border:none; }
.theme-kcet .btn-cta:hover { background: #2563eb; }
.theme-college .btn-cta { background: var(--college-theme); color: #fff; border:none; }
.theme-college .btn-cta:hover { background: #059669; }

/* ═══ FORMS ═══ */
.input-group{display:flex;flex-direction:column;margin-bottom:1.25rem;}
.input-group label{font-size:.85rem;font-weight:600;color:var(--text-2);
  margin-bottom:.5rem;}
.input-group input,.input-group select{
  padding:.85rem 1rem;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:1rem;font-family:inherit;
  background:var(--bg-1);
  color:var(--text-1);
  transition:var(--transition);
  width:100%;
}
.input-group input::placeholder{color:var(--text-4); font-size:0.95rem;}
.input-group input:focus,.input-group select:focus{
  outline:none;border-color:var(--blue-200);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}
.input-group select option{background:var(--bg-1);color:var(--text-1);}
.input-group input.error{border-color:var(--dream);background:var(--dream-bg);}

/* ═══ BUTTONS ═══ */
.btn-primary, .btn-cta {
  display:inline-block;width:100%;
  padding:.85rem 1rem;
  background:var(--text-1);
  color:var(--bg-1);border:none;
  border-radius:var(--r-md);
  font-weight:600;font-size:1rem;font-family:inherit;
  cursor:pointer;
  transition:var(--transition);
  text-align:center;
  text-decoration:none;
}
.btn-primary:hover{background:#d4d4d8;}
.btn-primary:active{transform:scale(.98);}
.btn-primary:disabled, .btn-cta.loading {opacity:.7;cursor:wait;transform:none;}

.btn-outline{
  display:inline-block;width:100%;
  padding:.85rem 1rem;
  background:transparent;
  color:var(--text-1);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-weight:600;font-size:1rem;font-family:inherit;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:var(--transition);
}
.btn-outline:hover{background:var(--bg-2);border-color:rgba(255,255,255,0.3);}

/* ═══ RESULT CARDS ═══ */
.result-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1.25rem;
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;
  box-shadow:var(--shadow-sm);
  animation:fade-in .4s ease both;
  transition:var(--transition);
  margin-bottom:.75rem;
}
.result-card:hover{border-color:rgba(255,255,255,0.3); transform: translateY(-1px);}
.result-card.best{
  border: 1.5px solid var(--blue-200);
  background: linear-gradient(145deg, rgba(59,130,246,0.05), var(--bg-2));
}
@keyframes fade-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.college-info{flex:1;min-width:0;}
.college-info h3{font-size:1.05rem;font-weight:600;color:var(--text-1);line-height:1.4;margin-bottom:6px;}
.college-info .meta{font-size:.85rem;color:var(--text-2);}
.college-info .meta span{margin-right:10px;}

.best-label{display:inline-block;font-size:.7rem;font-weight:700;
  color:var(--blue-200);background:var(--blue-50); border: 1px solid rgba(59,130,246,0.2);
  padding:4px 8px;border-radius:var(--r-md);margin-bottom:8px;letter-spacing:.02em;}

/* ═══ EMPTY STATES ═══ */
.no-results{text-align:center;padding:3rem 1.5rem;color:var(--text-2);
  font-weight:500;background:var(--bg-2);border-radius:var(--r-md);
  border:1px dashed rgba(255,255,255,0.2);line-height:1.6;}
.no-results .icon { font-size: 2rem; margin-bottom: 1rem; display:block; }
.no-results small{font-size:.85rem;font-weight:400;color:var(--text-3); display:block; margin-top:0.5rem;}

/* ═══ BOTTOM NAV ═══ */
.bottom-nav-container{position:fixed;bottom:0;left:0;width:100%;
  display:flex;justify-content:center;z-index:300;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
}
.bottom-nav{
  display:flex;align-items:center;justify-content:space-around;
  width:100%;max-width:500px;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;color:var(--text-3);font-size:.75rem;font-weight:600;
  min-height: 48px; /* Target size */
  transition:var(--transition);
  position: relative;
}
.nav-icon{font-size:1.25rem;margin-bottom:2px;}
.nav-item:hover{color:var(--text-1);}
.nav-item.active{color:var(--text-1);}
.nav-item.active::after {
  content: "";
  position: absolute;
  top: -0.5rem;
  width: 30px;
  height: 3px;
  background: var(--text-1);
  border-radius: 0 0 4px 4px;
}

/* ═══ FOOTER ═══ */
footer{background:var(--bg-2);color:var(--text-3);padding:2rem 1.5rem;
  margin-top:3rem;font-size:.85rem;border-top:1px solid var(--border); text-align:center;}
footer a{color:var(--text-2);text-decoration:none;transition:var(--transition); font-weight:500;}
footer a:hover{color:var(--text-1);}
.footer-links { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }

/* ═══ LOADING ═══ */
@keyframes spin{to{transform:rotate(360deg);}}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.2);
  border-top-color:#fff;border-radius:50%;
  animation:spin .8s linear infinite;display:inline-block;vertical-align:middle;margin-right:8px;}

/* Utils */
.badge{
  display:inline-flex;flex-direction:column;align-items:center;
  padding:6px 10px;border-radius:var(--r-sm);
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  white-space:nowrap;flex-shrink:0;gap:2px;
}
.safe    {background:var(--safe-bg);    color:var(--safe);    border:1px solid var(--safe-border);}
.moderate{background:var(--moderate-bg);color:var(--moderate);border:1px solid var(--moderate-border);}
.dream   {background:var(--dream-bg);   color:var(--dream);   border:1px solid var(--dream-border);}