/* ============================================================
   ปฏิบัติการเพชราวุธ — App theme (navy + gold)
   Built on Bootstrap 5. Server-rendered (CodeIgniter 3).
   ============================================================ */
:root{
  --navy-900:#0b1f3a;
  --navy-800:#10294b;
  --navy-700:#163a66;
  --navy-600:#1d4e89;
  --navy-500:#2563a8;
  --gold-500:#c9a227;
  --gold-400:#d8b13e;
  --gold-300:#e7cd76;
  --ink:#1f2733;
  --muted:#6b7785;
  --line:#e6e9ef;
  --bg:#f4f6fa;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 6px 24px rgba(16,41,75,.08);
  --shadow-lg:0 14px 40px rgba(16,41,75,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Sarabun",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Thai",sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.65;
}
a{color:var(--navy-600);text-decoration:none}
a:hover{color:var(--navy-800)}
h1,h2,h3,h4,h5{font-weight:600;color:var(--navy-900);letter-spacing:.2px}
/* Headings default to navy; force LIGHT on dark surfaces so they don't "sink" into the background */
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4,.bg-navy h5,.bg-navy h6,
.modal-header.bg-navy .modal-title,.modal-header.bg-navy h1,.modal-header.bg-navy h2,.modal-header.bg-navy h3,.modal-header.bg-navy h4,.modal-header.bg-navy h5,
.op-pagehead h1,.op-pagehead h2,.op-pagehead h3,.op-pagehead h4,
.op-mission h1,.op-mission h2,.op-mission h3,
.op-footer h1,.op-footer h2,.op-footer h3,.op-footer h4,.op-footer h5,.op-footer h6{color:#fff}
.badge.bg-navy{color:#fff}

/* ---------- Top bar + Navbar ---------- */
.op-topbar{
  background:var(--navy-900);
  color:#cdd7e6;
  font-size:13px;
}
.op-topbar a{color:#cdd7e6}
.op-topbar a:hover{color:#fff}

.op-navbar{
  background:linear-gradient(90deg,var(--navy-900),var(--navy-700));
  box-shadow:var(--shadow);
}
.op-navbar .navbar-brand{display:flex;align-items:center;gap:.7rem;color:#fff;font-weight:600}
.op-navbar .navbar-brand img{height:46px;width:auto}
.op-navbar .brand-text small{display:block;font-size:11px;color:var(--gold-300);font-weight:400;letter-spacing:.5px}
.op-navbar .navbar-nav .nav-link{
  color:#dfe7f2;font-weight:500;padding:.55rem 1rem;border-radius:8px;transition:.15s;
}
.op-navbar .navbar-nav .nav-link:hover,
.op-navbar .navbar-nav .nav-link:focus{color:#fff;background:rgba(255,255,255,.08)}
.op-navbar .navbar-nav .nav-link.active{color:var(--navy-900);background:var(--gold-400)}
.op-navbar .dropdown-menu{border:0;box-shadow:var(--shadow-lg);border-radius:12px;padding:.4rem}
.op-navbar .dropdown-item{border-radius:8px;padding:.55rem .9rem;font-weight:500}
.op-navbar .dropdown-item:active{background:var(--navy-600)}
.op-navbar .navbar-toggler{border-color:rgba(255,255,255,.4)}
.op-navbar .navbar-toggler-icon{filter:invert(1)}

/* ---------- Hero / page header ---------- */
.op-pagehead{
  background:linear-gradient(120deg,var(--navy-900),var(--navy-700) 60%,var(--navy-600));
  color:#fff;padding:2.4rem 0 2.6rem;position:relative;overflow:hidden;
}
.op-pagehead::after{
  content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.35),transparent 70%);
}
/* หัวเรื่องแบบมีภาพหน้าปก — ส่งภาพเข้ามาทาง --op-cover (ดู guidebook.php)
   ทับด้วยไล่สีกรมท่าเพื่อให้ตัวหนังสือสีขาวยังอ่านออกทุกจอ */
.op-pagehead--cover{
  background-image:linear-gradient(100deg,rgba(11,31,58,.94) 0%,rgba(11,31,58,.82) 42%,rgba(11,31,58,.45) 100%),var(--op-cover);
  background-size:cover;background-position:center right;padding:3.2rem 0 3.4rem;
}
.op-pagehead--cover::after{display:none}
/* ภาพที่จุดสนใจอยู่ช่วงกลางค่อนล่าง (เช่น แถวครูฝึกในภาพพิธีปิดการฝึก) */
.op-pagehead--cover-top{background-position:center 62%}
@media (max-width:767px){
  .op-pagehead--cover{background-image:linear-gradient(100deg,rgba(11,31,58,.95),rgba(11,31,58,.86)),var(--op-cover);padding:2.4rem 0 2.6rem}
}
.op-pagehead h1{color:#fff;margin:0;font-size:1.7rem}
.op-pagehead .crumb{color:var(--gold-300);font-size:.85rem}
.op-pagehead .crumb a{color:#cdd7e6}
.op-pagehead .crumb a:hover{color:#fff}
/* Bootstrap defaults the active crumb to dark grey, which vanishes on the navy
   page head — force a light colour, and lighten the "/" divider too. */
.op-pagehead .breadcrumb-item.active{color:var(--gold-300)}
.op-pagehead .breadcrumb-item+.breadcrumb-item::before{color:#8aa0bd}

/* ---------- Cards ---------- */
.op-card{
  display:block;  /* cards are sometimes <a> (inline by default) — force block so the border wraps the whole card */
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;height:100%;transition:transform .18s,box-shadow .18s;
}
.op-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.op-card .op-card-media{height:160px;background:var(--navy-700);position:relative;overflow:hidden}
.op-card .op-card-media img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* ภาพที่จุดสนใจอยู่กลางค่อนล่าง (เช่น แถวครูฝึกในภาพพิธีปิดการฝึก) */
.op-card .op-card-media img.op-media--mid{object-position:center 62%}

/* person card — show the FULL photo (no crop), portrait-friendly area */
.op-person-media{aspect-ratio:3/4;background:#eef1f6;position:relative;overflow:hidden;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.op-person-media img{width:100%;height:100%;object-fit:contain;display:block}
.op-person-media .op-avatar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:2.8rem;letter-spacing:1px;text-shadow:0 2px 6px rgba(0,0,0,.35);text-transform:uppercase}
.op-card .op-card-media .op-ico{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:3rem;color:#fff;background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
}
.op-card .op-card-body{padding:1.1rem 1.2rem}
.op-card h3{font-size:1.05rem;margin:0 0 .35rem}
.op-card p{color:var(--muted);font-size:.9rem;margin:0}

/* menu tiles on landing — photo background + navy gradient overlay */
.op-tile{
  display:block;border-radius:var(--radius);overflow:hidden;position:relative;
  box-shadow:var(--shadow);min-height:230px;color:#fff;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-600));
  transition:transform .2s,box-shadow .2s;
}
.op-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);color:#fff}
.op-tile .op-tile-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.6;transition:transform .4s,opacity .2s}
.op-tile:hover .op-tile-bg{transform:scale(1.06);opacity:.7}
.op-tile::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(11,31,58,.25) 0%,rgba(11,31,58,.78) 70%,rgba(11,31,58,.95) 100%)}
.op-tile .op-tile-inner{position:relative;z-index:3;padding:1.4rem;display:flex;flex-direction:column;height:100%;min-height:230px}
.op-tile .op-tile-ico{font-size:2.4rem;color:var(--gold-300);margin-bottom:.4rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.op-tile h3{color:#fff;font-size:1.18rem;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.op-tile p{color:#e8eef7;font-size:.85rem;margin:.25rem 0 0;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.op-tile .op-tile-go{margin-top:auto;padding-top:.6rem;color:var(--gold-300);font-weight:600;font-size:.9rem}

/* menu cards — image on top, text below (clear & legible) */
.op-menu-card{
  display:block;height:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative;
  transition:transform .2s,box-shadow .2s;color:inherit;
}
.op-menu-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);color:inherit}
.op-menu-card .op-menu-media{height:150px;position:relative;background:var(--navy-700);z-index:2;overflow:hidden;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.op-menu-card .op-menu-media img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .4s;filter:saturate(.92) contrast(1.02)}
.op-menu-card:hover .op-menu-media img{transform:scale(1.07)}
/* unifying navy tint so the assorted photos read as one cohesive set + blend into the card */
.op-menu-card .op-menu-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,41,75,.30) 0%,rgba(16,41,75,.10) 45%,rgba(16,41,75,.55) 100%);
}
.op-menu-card .op-menu-ico{
  position:absolute;left:1rem;top:126px;width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.45rem;color:#1f2733;
  background:var(--gold-400);box-shadow:0 5px 14px rgba(0,0,0,.3);z-index:10;
}
.op-menu-card .op-menu-body{padding:1.9rem 1.15rem 1.15rem;position:relative;z-index:1}
.op-menu-card h3{font-size:1.08rem;margin:0 0 .1rem;color:var(--navy-900)}
.op-menu-card .op-menu-en{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-500);margin-bottom:.4rem}
.op-menu-card p{color:var(--muted);font-size:.85rem;margin:0 0 .6rem;min-height:2.4em}
.op-menu-card .op-menu-go{color:var(--navy-600);font-weight:600;font-size:.88rem}
.op-menu-card:hover .op-menu-go{color:var(--gold-500)}

/* rich HTML pasted into case fields (e.g. a rubric <table>) — make it responsive */
.op-rich{overflow-x:auto;-webkit-overflow-scrolling:touch}
.op-rich > table,.op-rich table{width:100%!important;border-collapse:collapse;font-size:.92rem;margin:.4rem 0;background:#fff}
.op-rich{color:#3a4656}
.op-rich td,.op-rich th{border:1px solid #cdd6e2;padding:.7rem .9rem;vertical-align:top;word-break:break-word;line-height:1.55;color:#3a4656}
.op-rich b,.op-rich strong{color:#2b3a4d}
.op-rich tr:first-child td,.op-rich tr:first-child th{background:#eef2f8;font-weight:600;color:var(--navy-800);text-align:center;vertical-align:middle;white-space:nowrap}
.op-rich p{margin:0 0 .4rem}
.op-rich p:last-child{margin-bottom:0}
.op-rich img{max-width:100%;height:auto}

/* evaluation form tabs */
.op-eval-tabs{border-bottom:2px solid var(--navy-700);gap:.25rem;flex-wrap:wrap}
.op-eval-tabs .nav-link{color:var(--navy-700);font-weight:500;border:0;border-radius:10px 10px 0 0;padding:.7rem 1.15rem}
.op-eval-tabs .nav-link:hover{background:rgba(29,78,137,.08);color:var(--navy-800)}
.op-eval-tabs .nav-link.active{background:var(--navy-700);color:#fff}

/* evaluation criteria / scoring table */
.op-eval-table{table-layout:fixed;font-size:.92rem;color:#3a4656}
.op-eval-table tbody td{color:#3a4656}
/* bigger, easy-to-tap radio choices */
.op-eval-table td.op-choice{cursor:pointer}
.op-eval-table .form-check{justify-content:center;margin:0;min-height:auto;padding:0}
.op-eval-table .form-check-input{width:1.55rem;height:1.55rem;margin:0;cursor:pointer;float:none}
.op-eval-table td.op-choice span{font-weight:600;font-size:.95rem}
.op-eval-table td.op-choice:hover{background:rgba(201,162,39,.12)}
.op-eval-table > :not(caption) > * > *{vertical-align:top}
.op-eval-table thead th{vertical-align:middle;text-align:center;background:var(--navy-700);color:#fff;border-color:rgba(255,255,255,.22);white-space:normal;font-size:.82rem;line-height:1.3;font-weight:600}
.op-eval-table td,.op-eval-table th{padding:.55rem .6rem;word-wrap:break-word;overflow-wrap:break-word}
.op-eval-table .col-no{width:42px;text-align:center}
.op-eval-table .col-choice{width:120px;text-align:center;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.op-eval-table .col-total{width:90px;text-align:center;white-space:nowrap}
.op-eval-table td img,.op-eval-table td iframe,.op-eval-table td video{max-width:100%;height:auto}

/* ── แบบประเมินบนมือถือ ──────────────────────────────────────────────────
   ตารางให้คะแนนใช้ table-layout:fixed พอจอแคบคอลัมน์ "หัวข้อที่ประเมิน" จะถูกบีบ
   จนอ่านไม่ออก จึงเปลี่ยนเป็นการ์ดเรียงลงมา 1 ข้อ = 1 การ์ด และให้ตัวเลือกคะแนน
   กลายเป็นปุ่มกดเต็มความกว้าง (แตะง่ายกว่าเดิม) ─ จอ ≥768px ยังเป็นตารางเหมือนเดิม */
@media (max-width:767.98px){
  .op-eval-table{table-layout:auto;font-size:1rem;border:0}
  .op-eval-table thead{display:none}                 /* หัวตารางย้ายไปอยู่บนปุ่มแต่ละอันแทน */
  .op-eval-table,.op-eval-table tbody,.op-eval-table tr,.op-eval-table td{display:block;width:auto}
  .op-eval-table tr{
    border:1px solid #d8dfe9;border-radius:10px;background:#fff;
    padding:.6rem .7rem;margin-bottom:.75rem;box-shadow:0 1px 2px rgba(11,31,58,.06)
  }
  .op-eval-table td{border:0;padding:.2rem 0}
  .op-eval-table td.col-no,.op-eval-table .op-cell-blank{display:none}
  /* ชื่อหัวข้อ = หัวการ์ด */
  .op-eval-table tr > td:not(.op-choice):not(.op-cell-total):first-child,
  .op-eval-table tr > td:nth-child(2):not(.op-choice):not(.op-cell-total){
    font-weight:600;color:var(--navy-900);line-height:1.5;padding-bottom:.5rem
  }
  /* ตัวเลือกคะแนน = ปุ่มเต็มแถว มีชื่อคอลัมน์กำกับ */
  .op-eval-table td.op-choice{
    border:1px solid #e2e8f0;border-radius:8px;margin:.3rem 0;padding:.55rem .7rem;
    display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-align:left
  }
  .op-eval-table td.op-choice::before{
    content:attr(data-label);flex:1;font-size:.95rem;color:#3a4656;font-weight:500
  }
  .op-eval-table td.op-choice .form-check{justify-content:flex-end;flex:0 0 auto}
  .op-eval-table td.op-choice span{min-width:2ch;text-align:right}
  .op-eval-table td.op-choice:has(input:checked){border-color:var(--gold-500);background:rgba(201,162,39,.12)}
  /* ช่องคะแนนรวมของข้อนั้น */
  .op-eval-table td.op-cell-total{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;
    border-top:1px dashed #e2e8f0;padding-top:.5rem}
  .op-eval-table td.op-cell-total::before{content:attr(data-label);font-size:.9rem;color:#6b7a90}
  .op-eval-table td.op-cell-total .form-control{width:80px !important}
  /* แถวสรุป "รวมคะแนน" */
  .op-eval-table tr.table-active{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:#f3f6fb}
  .op-eval-table tr.table-active td{padding:0}
  .op-eval-table tr.table-active td[colspan]{flex:1}
}

/* mission section */
.op-mission{background:linear-gradient(120deg,var(--navy-900),var(--navy-700));color:#fff;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow)}
.op-mission::before{content:"";position:absolute;left:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.25),transparent 70%)}
.op-mission .op-mission-label{font-size:clamp(2.4rem,6vw,5rem);font-weight:700;line-height:1;color:rgba(255,255,255,0.75);letter-spacing:1px;white-space:nowrap}
.op-mission .op-mission-body{position:relative;z-index:2}
.op-mission .op-mission-body p{color:#dfe7f2}
.op-mission blockquote{border-left:4px solid var(--gold-500);padding:.4rem 0 .4rem 1rem;margin:1rem 0 0;color:#fff}
.op-mission blockquote cite{color:var(--gold-300)}

/* ---------- Buttons ---------- */
.btn-navy{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn-navy:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn-gold{background:var(--gold-500);border-color:var(--gold-500);color:#1f2733;font-weight:600}
.btn-gold:hover{background:var(--gold-400);border-color:var(--gold-400);color:#1f2733}
.btn-outline-navy{border-color:var(--navy-600);color:var(--navy-700)}
.btn-outline-navy:hover{background:var(--navy-700);color:#fff}

/* ---------- Sections / tables / forms ---------- */
.op-section{padding:2.2rem 0}
.op-section-title{position:relative;margin-bottom:1.4rem;padding-left:.9rem}
.op-section-title::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:5px;border-radius:3px;background:var(--gold-500)}
.op-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem}
.table thead th{background:var(--navy-700);color:#fff;border-color:rgba(255,255,255,.25);font-weight:500;white-space:nowrap}
.table.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:rgba(29,78,137,.04)}
.table td,.table th{vertical-align:middle}
.badge-gold{background:var(--gold-500);color:#1f2733}

/* ── Team / group signature colours (single source of truth) ───────────────
   Use anywhere a team is referenced: <span class="op-team op-team--alpha">ALPHA</span>
   Keep these in sync with the team cards on the About page. */
.op-team{display:inline-block;padding:.18em .6em;border-radius:.4rem;font-weight:700;
  font-size:.82em;line-height:1.35;letter-spacing:.02em;white-space:nowrap;color:#fff}
.op-team--alpha{background:#3f9c4f}
.op-team--bravo{background:#efc220;color:#3a2e00}
.op-team--charlie{background:#e85aa0}
.op-team--delta{background:#33b0c0}
.op-team--echo{background:#d22030}
.op-team--foxtrot{background:#2d2d8a}
/* small colour dot for inline references (e.g. dropdowns, legends) */
.op-team-dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;
  margin-right:.35em;vertical-align:baseline}
.op-team-dot--alpha{background:#3f9c4f}.op-team-dot--bravo{background:#efc220}
.op-team-dot--charlie{background:#e85aa0}.op-team-dot--delta{background:#33b0c0}
.op-team-dot--echo{background:#d22030}.op-team-dot--foxtrot{background:#2d2d8a}
.op-team--staff{background:#1f3a5f}.op-team-dot--staff{background:#1f3a5f}

/* Team switcher tabs (About detail) */
.op-team-tabs .op-team-tab{border:1px solid rgba(29,78,137,.18);color:var(--navy-900);background:#fff;
  font-weight:600;border-radius:.55rem;padding:.42rem .9rem;line-height:1.2}
.op-team-tabs .op-team-tab:hover:not(.active){border-color:var(--navy-500);background:rgba(37,99,168,.08);color:var(--navy-900)}
.op-team-tabs .op-team-tab.active:hover{filter:brightness(.94)}
.op-team-tabs .op-team-tab.active{color:#fff}
.op-team-tabs .op-team-tab.active .op-team-dot{display:none}
.op-team-tab--alpha.active{background:#3f9c4f;border-color:#3f9c4f}
.op-team-tab--bravo.active{background:#efc220;border-color:#efc220;color:#3a2e00}
.op-team-tab--charlie.active{background:#e85aa0;border-color:#e85aa0}
.op-team-tab--delta.active{background:#33b0c0;border-color:#33b0c0}
.op-team-tab--echo.active{background:#d22030;border-color:#d22030}
.op-team-tab--foxtrot.active{background:#2d2d8a;border-color:#2d2d8a}
.op-team-tab--staff.active{background:#1f3a5f;border-color:#1f3a5f}
.form-label{font-weight:500;color:var(--navy-800)}
.form-control:focus,.form-select:focus{border-color:var(--navy-500);box-shadow:0 0 0 .2rem rgba(37,99,168,.15)}

/* ---------- Footer ---------- */
.op-footer{background:var(--navy-900);color:#a9b6c9;padding:2rem 0 1.2rem;margin-top:2.5rem}
.op-footer a{color:#cdd7e6}
.op-footer a:hover{color:#fff}
.op-footer .op-footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:1.2rem;padding-top:1rem;font-size:.85rem;color:#7f8ea3}

/* ---------- utilities ---------- */
.text-gold{color:var(--gold-500)!important}
.bg-navy{background:var(--navy-800)!important}
.shadow-soft{box-shadow:var(--shadow)!important}
.rounded-xl{border-radius:var(--radius)!important}

/* ── Sign-in modal (branded, blurred backdrop) ─────────────────────────── */
/* Keep the backdrop fully opaque (rgba tints it) — backdrop-filter is dropped by
   browsers when the element's own opacity < 1, which is why a half-opacity
   backdrop showed a sharp page behind it. */
.modal-backdrop{background:rgba(9,22,43,.62);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}
.modal-backdrop.show{opacity:1}
.op-auth-card{border:0;border-radius:1rem;overflow:hidden;box-shadow:0 24px 60px rgba(11,31,58,.45)}
.op-auth-head{position:relative;text-align:center;padding:1.9rem 1.5rem 1.5rem;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700) 70%,var(--navy-600));color:#fff}
.op-auth-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300),var(--gold-500))}
.op-auth-logo{width:74px;height:74px;object-fit:contain;margin-bottom:.55rem;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.op-auth-head .op-auth-title{color:#fff;font-weight:700;margin:0;letter-spacing:.3px;font-size:1.15rem}
.op-auth-sub{color:var(--gold-300);font-size:.85rem;margin:.15rem 0 0}
.op-auth-close{position:absolute;top:.85rem;right:.95rem;z-index:3;
  filter:invert(1) grayscale(1) brightness(2);opacity:.85}
.op-auth-close:hover{opacity:1}
.op-auth-body{padding:1.6rem 1.5rem}
.op-auth-body .form-label{font-size:.82rem;font-weight:600;color:var(--navy-800);margin-bottom:.25rem}
.op-auth-body .input-group-text{background:#f1f5fa;border-right:0;color:var(--navy-600)}
.op-auth-body .input-group .form-control{border-left:0;padding-left:.25rem}
.op-auth-body .input-group .form-control:focus{box-shadow:none;border-color:#ced4da}
.op-auth-body .input-group:focus-within{box-shadow:0 0 0 .2rem rgba(37,99,168,.15);border-radius:.45rem}
.op-pwtoggle{cursor:pointer;background:#f1f5fa;border-left:0;color:var(--navy-600)}
.op-pwtoggle:hover{color:var(--navy-800)}
.op-auth-submit{background:linear-gradient(135deg,var(--navy-800),var(--navy-600));border:0;color:#fff;
  font-weight:600;padding:.62rem;border-radius:.55rem;letter-spacing:.3px;transition:filter .15s}
.op-auth-submit:hover{filter:brightness(1.12);color:#fff}
.op-auth-switch{color:var(--navy-600);font-weight:600;text-decoration:none}
.op-auth-switch:hover{color:var(--navy-800);text-decoration:underline}

/* ── About: team tiles (pure-CSS gradient cards + faint icon + CTA) ─────── */
.op-team-tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  min-height:180px;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s}
.op-team-tile:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(11,31,58,.3)}
.op-team-tile__icon{position:absolute;right:-12px;bottom:-18px;font-size:5.6rem;
  color:rgba(255,255,255,.18);z-index:1;line-height:1}
.op-team-tile__body{position:relative;z-index:2;min-height:180px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:1rem 1.05rem;color:#fff}
.op-team-tile__label{font-size:.74rem;font-weight:600;letter-spacing:1.5px;opacity:.9;text-transform:uppercase}
.op-team-tile__name{font-size:1.55rem;font-weight:800;line-height:1;letter-spacing:.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.3)}
.op-team-tile__go{margin-top:.55rem;font-size:.8rem;font-weight:600;opacity:.85;transform:translateY(4px);
  transition:opacity .18s,transform .18s}
.op-team-tile:hover .op-team-tile__go{opacity:1;transform:none}
.op-team-tile--alpha  {background:linear-gradient(150deg,#46a356,#2f7340)}
.op-team-tile--bravo  {background:linear-gradient(150deg,#d9a81e,#a87d10)}
.op-team-tile--charlie{background:linear-gradient(150deg,#e85aa0,#c23b7e)}
.op-team-tile--delta  {background:linear-gradient(150deg,#2ea7b8,#1f7e8c)}
.op-team-tile--echo   {background:linear-gradient(150deg,#d22030,#a3141f)}
.op-team-tile--foxtrot{background:linear-gradient(150deg,#34348f,#1f1f63)}

/* About: feature cards (Guidebook / Staff) — clearer card frame + badge overlay */
.op-feature{border:1.5px solid #b3c0d4;box-shadow:0 10px 28px rgba(16,41,75,.14)}
.op-feature:hover{border-color:var(--gold-500)}
.op-feature .op-card-body{border-top:1px solid #e3e8f0}
.op-feature .op-card-media{height:200px}
.op-feature .op-card-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,31,58,0) 55%,rgba(11,31,58,.4) 100%)}
.op-feature__badge{position:absolute;top:.7rem;left:.7rem;z-index:3;background:var(--gold-500);
  color:#1f2733;font-weight:600;font-size:.8rem;padding:.28rem .65rem;border-radius:.45rem;
  box-shadow:0 2px 8px rgba(0,0,0,.28)}
.op-feature .op-card-body{display:flex;align-items:center;gap:.75rem}
.op-feature__go{margin-left:auto;font-size:1.5rem;color:var(--gold-500);transition:transform .18s}
.op-feature:hover .op-feature__go{transform:translateX(5px)}

/* ── Guidebook file list (PDF icon + file name) ────────────────────────── */
.op-file{display:flex;align-items:center;gap:.9rem;height:100%;background:#fff;border:1px solid #d8dfe9;
  border-radius:12px;padding:.85rem .95rem;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.op-file:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.op-file__icon{flex:0 0 auto;width:56px;height:64px;border-radius:9px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.1rem;color:#fff;background:linear-gradient(135deg,#c0392b,#8e1f14)}
.op-file__icon .bi{font-size:1.7rem;line-height:1}
.op-file__icon span{font-size:.6rem;font-weight:700;letter-spacing:.6px}
.op-file__logo{position:relative;flex:0 0 auto;width:64px;height:64px;border-radius:9px;background:#fff;
  border:1px solid #e3e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.op-file__logo img{max-width:100%;max-height:100%;object-fit:contain}
.op-file__logo-tag{position:absolute;right:-1px;bottom:-1px;background:#c0392b;color:#fff;font-size:.55rem;
  font-weight:700;letter-spacing:.4px;padding:.05rem .25rem;border-radius:6px 0 8px 0}
.op-file__body{min-width:0;flex:1}
.op-file__title{font-size:.95rem;font-weight:600;color:var(--navy-900);line-height:1.35;margin:0 0 .15rem}
.op-file__name{font-size:.78rem;color:#5a6a82;margin:0;word-break:break-all;overflow-wrap:anywhere}
.op-file__meta{font-size:.74rem;color:#8794a8;margin:.1rem 0 0}
.op-file__btn{flex:0 0 auto;white-space:nowrap}
.op-file--missing{opacity:.75;border-style:dashed}
.op-file--missing .op-file__icon{background:linear-gradient(135deg,#9aa5b5,#6c7889)}
@media (max-width:991px){
  .op-navbar .navbar-nav .nav-link{padding:.5rem .8rem}
  .op-pagehead h1{font-size:1.4rem}
}

/* editable CKEditor content (About/Contact) surfaced on the OP front-end — make the
   legacy HTML (tables, images, headings) responsive and on-theme */
.op-richtext{color:#33415a;line-height:1.7;overflow-x:auto}
.op-richtext img{max-width:100%;height:auto;border-radius:8px}
.op-richtext h1,.op-richtext h2,.op-richtext h3,.op-richtext h4,.op-richtext h5{color:var(--navy-900);font-weight:700;margin:.2rem 0 .6rem}
.op-richtext h1{font-size:1.5rem}.op-richtext h2{font-size:1.3rem}.op-richtext h3,.op-richtext h4{font-size:1.1rem}
.op-richtext table{width:100%;border-collapse:collapse;margin:.4rem 0}
.op-richtext td,.op-richtext th{padding:.55rem .65rem;vertical-align:top;border-bottom:1px solid #eef1f6}
.op-richtext a{color:var(--navy-600);font-weight:500}
.op-richtext p{margin-bottom:.6rem}
/* professor card image (About page) — full portrait, on-theme */
.op-prof-img{width:100%;max-width:150px;aspect-ratio:190/240;object-fit:cover;border-radius:10px;border:1px solid #e6eaf1;background:#f4f7fb}