:root{
  --navy:#152A4A; --navy-deep:#0D1B33; --gold:#A9832B; --gold-soft:#D9C27E;
  --paper:#FBF7EE; --slate:#EEF1F6; --slate-line:#DDE3ED; --ink:#1E2430;
  --ink-soft:#5A6376; --maroon:#7A1F2B; --green:#2F6A4F; --amber:#9A6B14;
  --radius:10px; --shadow: 0 1px 2px rgba(21,42,74,.06), 0 8px 24px rgba(21,42,74,.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--slate); color:var(--ink); font-family:'Inter',sans-serif; min-height:100vh; display:flex; flex-direction:column;}
::selection{background:var(--gold-soft);}
a{color:inherit;}

/* ---------- Top Nav ---------- */
.topbar{background:var(--navy); color:#fff; padding:14px 22px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:50; box-shadow:0 2px 10px rgba(0,0,0,.15);}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; text-decoration:none; color:#fff;}
.brand .seal-mini{width:34px; height:34px; flex:none;}
.brand-text{line-height:1.15; min-width:0;}
.brand-text .name{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:16.5px; letter-spacing:.3px; white-space:nowrap;}
.brand-text .sub{font-size:10px; color:var(--gold-soft); text-transform:uppercase; letter-spacing:.09em;}
.nav-toggle{display:flex; background:rgba(255,255,255,.08); border-radius:999px; padding:3px; gap:2px;}
.nav-toggle a{border:none; background:transparent; color:rgba(255,255,255,.75); font-weight:600; font-size:13px;
  padding:8px 16px; border-radius:999px; cursor:pointer; transition:.15s; text-decoration:none;}
.nav-toggle a.active{background:var(--gold); color:var(--navy-deep);}

/* ---------- Student shell ---------- */
.student-shell{max-width:980px; margin:0 auto; padding:36px 20px 70px;}
.letterhead-card{background:var(--navy); background-image:radial-gradient(circle at 85% -10%, rgba(169,131,43,.35), transparent 55%);
  color:#fff; border-radius:var(--radius); padding:30px 32px; display:flex; align-items:center; gap:22px;
  margin-bottom:24px; box-shadow:var(--shadow);}
.letterhead-card .seal-big{width:74px; height:74px; flex:none;}
.letterhead-card .lh-text{flex:1; text-align:center;}
.letterhead-card .naac-logo{width:64px; height:64px; flex:none; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; padding:4px;}
.letterhead-card h1{font-family:'Cormorant Garamond',serif; font-size:27px; margin:0 0 4px; letter-spacing:.3px;}
.letterhead-card p{margin:2px 0; font-size:12.5px; color:rgba(255,255,255,.78);}
.letterhead-card .aff{color:var(--gold-soft); font-style:italic;}

.panel{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 30px; margin-bottom:22px;}
.panel h2{font-family:'Cormorant Garamond',serif; font-size:22px; margin:0 0 4px; color:var(--navy);}
.panel .hint{color:var(--ink-soft); font-size:13px; margin:0 0 20px;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1/-1;}
label{font-size:12.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.02em;}
label .req{color:var(--maroon);}
input, select, textarea{font-family:'Inter',sans-serif; font-size:14px; padding:10px 12px; border:1.5px solid var(--slate-line);
  border-radius:8px; background:#fcfdff; color:var(--ink); outline:none; transition:.15s; width:100%;}
input:focus, select:focus, textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(169,131,43,.15);}
textarea{resize:vertical; min-height:56px;}

.btn{font-family:'Inter',sans-serif; font-weight:700; font-size:14px; padding:12px 22px; border-radius:8px; border:none;
  cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:8px; text-decoration:none;}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-deep);}
.btn-gold{background:var(--gold); color:var(--navy-deep);}
.btn-gold:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent; color:var(--navy); border:1.5px solid var(--slate-line);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-danger{background:#fff0f1; color:var(--maroon); border:1.5px solid #f3d4d8;}
.btn-danger:hover{background:#fde3e5;}
.btn-sm{padding:7px 12px; font-size:12.5px; border-radius:6px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}

.track-row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;}
.track-row .field{flex:1; min-width:220px;}

.receipt{text-align:center; padding:10px 10px 6px;}
.receipt .seal-big{width:64px; height:64px; margin-bottom:10px;}
.receipt h2{font-size:20px; margin-bottom:4px;}
.app-no-badge{display:inline-block; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:22px;
  letter-spacing:.06em; color:var(--navy); background:var(--slate); border:1.5px dashed var(--gold); border-radius:8px;
  padding:12px 22px; margin:14px 0 10px;}
.status-pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:4px 10px; border-radius:999px;}
.status-pending{background:#FDF3DC; color:var(--amber);}
.status-verified{background:#E4F2EB; color:var(--green);}
.status-dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.alert{padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:16px;}
.alert-error{background:#fff0f1; color:var(--maroon); border:1.5px solid #f3d4d8;}
.alert-ok{background:#E4F2EB; color:var(--green); border:1.5px solid #c7e6d6;}

/* ---------- Admin shell ---------- */
.admin-shell{max-width:1180px; margin:0 auto; padding:26px 20px 70px;}
.admin-lock{max-width:380px; margin:70px auto; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:32px 30px; text-align:center;}
.admin-lock .seal-big{width:56px; height:56px; margin:0 auto 12px;}
.admin-lock h2{font-family:'Cormorant Garamond',serif; margin:0 0 6px; color:var(--navy);}
.admin-lock p{color:var(--ink-soft); font-size:13px; margin:0 0 18px;}

.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
.stat-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; border-left:4px solid var(--gold);}
.stat-card .num{font-family:'Inter',sans-serif; font-size:30px; font-weight:800; color:var(--navy); font-variant-numeric:lining-nums tabular-nums;}
.stat-card .lbl{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}

.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap;}
.toolbar input[type=search]{flex:1; min-width:200px;}
.verify-delete-row{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;}
.verify-delete-row form{margin:0;}
.verify-delete-row form:first-child{flex:1 1 200px; max-width:320px;}
.verify-delete-row form:last-child{flex:0 0 auto;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{text-align:left; background:var(--navy); color:rgba(255,255,255,.9); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; padding:11px 14px; font-weight:700;}
tbody td{padding:11px 14px; border-bottom:1px solid var(--slate-line); vertical-align:middle;}
tbody tr:hover{background:#FAFAFD;}
tbody tr:last-child td{border-bottom:none;}
.row-appno{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}
.empty-state{padding:50px 20px; text-align:center; color:var(--ink-soft);}
.empty-state .seal-big{width:44px; height:44px; opacity:.5; margin-bottom:10px;}

.logo-upload-row{display:flex; align-items:center; gap:12px;}
.logo-preview{width:60px; height:60px; flex:none; border:1.5px dashed var(--slate-line); border-radius:8px;
  display:flex; align-items:center; justify-content:center; background:var(--slate); overflow:hidden;}
.logo-preview img{width:100%; height:100%; object-fit:contain;}
.logo-upload-row input[type=file]{font-size:12px; padding:6px;}

.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin-bottom:18px;}
.detail-grid .k{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:2px;}
.detail-grid .v{font-size:14px; font-weight:600; color:var(--ink);}
.divider{height:1px; background:var(--slate-line); margin:16px 0;}
.cert-choice{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}

/* ---------- Certificate ---------- */
.cert-doc{background:#FFFFFF; font-family:'EB Garamond', serif; color:#111; padding:14mm 16mm; border:1px solid #d8cfae;
  width:210mm; max-width:100%; min-height:297mm; margin:0 auto; box-sizing:border-box;}
.cert-head{display:flex; align-items:center; gap:22px; padding-bottom:10px;}
.cert-head .seal-big{width:86px; height:86px; flex:none;}
.cert-head .naac-logo{width:74px; height:74px; flex:none; display:flex; align-items:center; justify-content:center;}
.cert-head-text{flex:1; text-align:center;}
.cert-head-text h1{font-size:32px; color:#0F1E42; margin:0 0 5px; letter-spacing:.6px; font-weight:800; text-transform:uppercase;}
.cert-head-text .aff{font-style:italic; font-weight:600; font-size:15px; color:#26314f; margin:0 0 3px;}
.cert-head-text .rec{font-size:14px; font-weight:600; color:#1B2A55; margin:0;}
.cert-rule{height:5px; background:#0F1E42; margin:10px 0 3px; border-radius:1px;}
.cert-rule-thin{height:1.5px; background:#A9832B; margin:0 0 8px;}
.cert-contact{text-align:center; font-size:13px; font-weight:600; color:#222; padding-bottom:11px; border-bottom:3px solid #0F1E42; letter-spacing:.01em;}
.cert-contact a{color:#0F1E42; font-weight:700;}
.cert-refline{display:flex; justify-content:space-between; font-size:14px; font-weight:700; color:#1B2A55; margin-top:14px;}
.cert-title{text-align:center; text-decoration:underline; font-weight:800; font-size:19.5px; margin:16px 0 20px; letter-spacing:.04em; color:#0F1E42;}
.cert-para{font-size:17.5px; line-height:2; text-align:justify; margin-bottom:6px;}
.cert-para b{font-weight:700;}
.cert-sub{text-align:center; font-weight:700; text-decoration:underline; font-size:16.5px; margin:26px 0 12px;}
.cert-meta{display:grid; grid-template-columns:230px 16px 1fr; font-size:16px; row-gap:8px; margin-bottom:14px;}
.cert-meta .lb{font-weight:700;}
.cert-meta.compact{font-size:14px; row-gap:5px; margin-bottom:10px;}
.fee-table, .bank-table{width:100%; border-collapse:collapse; margin-bottom:18px; font-size:16px;}
.fee-table th{background:#0F1E42; color:#fff; padding:9px 12px; text-align:left; font-size:14.5px;}
.fee-table td{padding:9px 12px; border:1px solid #c9c1a4;}
.fee-table .total-row td{background:#EDE7D2; font-weight:700;}
.fee-table td:last-child, .fee-table th:last-child{text-align:right;}
.fee-table.compact, .bank-table.compact{font-size:13px; margin-bottom:12px;}
.fee-table.compact th, .fee-table.compact td{padding:5px 10px; font-size:13px;}
.bank-table.compact td{padding:5px 10px;}
.bank-title{background:#0F1E42; color:#fff; text-align:center; padding:8px; font-weight:700; font-size:15px;}
.bank-table td{padding:9px 12px; border:1px solid #c9c1a4;}
.bank-table td:first-child{font-weight:700; width:200px; background:#F5F1E2; color:#0F1E42;}
.bank-table td:last-child{color:#7A1F2B; font-weight:700; letter-spacing:.02em;}
.cert-foot{display:flex; justify-content:space-between; align-items:flex-end; margin-top:36px;}
.cert-foot .left p{margin:2px 0; font-size:15px;}
.cert-foot .right{text-align:center; font-size:15px;}
.sign-line{border-top:1.5px solid #333; width:190px; margin-bottom:6px;}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; background:#F6F3EA; border-top:1px solid #e6ddc0; max-width:900px; margin:0 auto;}

@media print{
  @page{ size: A4; margin: 0; }
  body *{visibility:hidden;}
  #cert-print-area, #cert-print-area *{visibility:visible;}
  #cert-print-area{position:absolute; top:0; left:0; width:210mm; margin:0; padding:0; border:none;}
  .modal-actions, .topbar{display:none !important;}
}

.site-footer{margin-top:auto; padding:18px 22px; background:var(--navy-deep); color:rgba(255,255,255,.75); border-top:3px solid var(--gold);}
.site-footer-inner{max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px;}
.site-footer-dev a{color:var(--gold-soft); font-weight:600; text-decoration:none;}
.site-footer-dev a:hover{color:var(--gold); text-decoration:underline;}
@media print{ .site-footer{display:none !important;} }

.pw-field{position:relative;}
.pw-field input{width:100%; padding-right:42px; box-sizing:border-box;}
.pw-toggle{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:4px; line-height:0; color:var(--ink-soft,#667);}
.pw-toggle:hover{color:var(--ink,#223);}
.pw-toggle svg{width:19px; height:19px; display:block;}
/* ==========================================================================
   Responsive / Mobile (education-friendly: larger tap targets, no horizontal
   scroll, table collapses to cards on phones)
   ========================================================================== */
@media (max-width: 780px){
  .student-shell, .admin-shell{ padding:18px 12px 50px; }
  .letterhead-card{ flex-direction:column; text-align:center; padding:22px 18px; gap:12px; }
  .letterhead-card .lh-text{ order:2; }
  .letterhead-card h1{ font-size:21px; }
  .letterhead-card .naac-logo{ order:3; }

  .panel{ padding:20px 16px; }
  .panel h2{ font-size:19px; }

  .form-grid{ grid-template-columns:1fr; gap:14px; }
  input, select, textarea, .btn{ font-size:16px; } /* 16px prevents iOS auto-zoom on focus */
  .form-actions{ flex-direction:column-reverse; }
  .form-actions .btn{ width:100%; justify-content:center; }

  .track-row{ flex-direction:column; align-items:stretch; }
  .track-row .field{ min-width:0; }

  .stat-row{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat-card{ padding:12px 14px; }
  .stat-card .num{ font-size:24px; }

  .detail-grid{ grid-template-columns:1fr; }
  .cert-meta{ grid-template-columns:150px 12px 1fr; font-size:14px; }
}

@media (max-width: 780px){
  /* Universal safety net: even before the card-view breakpoint kicks in,
     a table must never force the page to scroll sideways. */
  .table-card{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media (max-width: 600px){
  /* Top nav: never overlap the logo. Stack under the brand and WRAP onto as
     many lines as needed (no horizontal scroll — every tab stays visible
     and tappable without a sideways swipe, which is friendlier for
     first-time / less tech-savvy users). */
  .topbar{ flex-wrap:wrap; padding:10px 14px; gap:8px; height:auto; }
  .brand{ width:100%; flex-wrap:wrap; }
  .brand-text{ max-width:100%; }
  .brand-text .name{ white-space:normal; font-size:14.5px; overflow-wrap:break-word; }
  .nav-toggle{
    width:100%; flex-wrap:wrap; overflow-x:visible;
    justify-content:center; border-radius:12px; padding:6px;
  }
  .nav-toggle a{ padding:8px 12px; font-size:12.5px; white-space:nowrap; }

  .site-footer-inner{ flex-direction:column; text-align:center; gap:4px; }

  /* Applications table -> stacked cards */
  .table-card{ overflow-x:visible; } /* card layout below needs no horizontal scroll */
  .table-card table, .table-card thead, .table-card tbody, .table-card th, .table-card td, .table-card tr{
    display:block;
  }
  .table-card thead{ display:none; }
  .table-card tbody tr{
    border-bottom:8px solid var(--slate); padding:12px 14px; position:relative;
  }
  .table-card tbody td{
    border:none; padding:6px 0 6px 42%; position:relative; min-height:20px; font-size:13.5px;
  }
  .table-card tbody td[data-label]::before{
    content:attr(data-label); position:absolute; left:0; top:6px; width:38%;
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
  }
  /* View / Delete: side by side, equal width, not stacked */
  .table-card tbody td:last-child{
    padding-left:0; display:flex; gap:8px; flex-wrap:nowrap; margin-top:8px;
  }
  .table-card tbody td:last-child::before{ content:none; }
  .table-card tbody td:last-child .btn{ flex:1 1 0; justify-content:center; padding:9px 8px; font-size:13px; }
  .table-card tbody td:last-child form{ flex:1 1 0; display:flex; }

  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar input[type=search]{ min-width:0; }

  .app-no-badge{ font-size:17px; padding:10px 14px; }

  /* Certificate: shrink to fit phone width for on-screen preview (print rules untouched) */
  .cert-doc{ padding:10mm 8mm; font-size:13px; }
  .cert-head{ flex-direction:column; text-align:center; gap:10px; }
  .cert-head-text h1{ font-size:20px; }
  .cert-para{ font-size:14.5px; line-height:1.7; }
  .cert-meta{ grid-template-columns:1fr; row-gap:4px; }
  .cert-meta .lb{ margin-top:6px; }
  .fee-table, .bank-table{ font-size:12.5px; }
  .cert-foot{ flex-direction:column; gap:18px; align-items:stretch; text-align:center; }
}

/* ---- Fixes found after live-server render/audit ---- */
@media (max-width: 600px){
  /* receipt page action buttons: stack full-width instead of squeezing side by side */
  .receipt-actions{ display:flex; flex-direction:column; gap:10px; }
  .receipt-actions .btn{ width:100%; justify-content:center; }

  /* track-status "Check Status" button: match full-width stacked field above it */
  .track-row .btn{ width:100%; justify-content:center; }

  /* bank-table label column: fixed 200px is too wide on a ~320-375px phone; let it size to content */
  .bank-table td:first-child{ width:auto; white-space:nowrap; }

  /* safety net: long unbroken text (addresses, bank names, account numbers) scrolls
     inside its own box instead of stretching the whole page horizontally */
  .cert-doc, .bank-table, .fee-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cert-para, .cert-contact, td, .v{ overflow-wrap:anywhere; word-break:break-word; }
}