:root{
  --bg1:#899097;
  --bg2:#899097;
  --surface:#e6e6e6;
  --surface-2:rgba(255,255,255,.65);
  --text:#111;
  --text-invert:#fff;
  --divider_top:#4c5c68;
  --divider_bottom:#4c5c68;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:12px;
  --gutter:20px;
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================
   Base / reset
   ========================= */
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  width:100%;
  margin:0;
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  color:#444;
  background:linear-gradient(to bottom,var(--bg1),var(--bg2));
  background-repeat: no-repeat;
  background-attachment: fixed;
}
img{max-width:100%;display:block;}

h1,h2,h3{margin:0;}
h1{color:var(--text-invert);font-size:clamp(18px,2.1vw,32px);font-weight:800;}
h2{color:#000;font-weight:800;font-size:clamp(26px,2.6vw,44px);}
h3{color:#423e3e;font-size:clamp(18px,1.8vw,26px);}

p{
  margin:0;
  white-space:normal;
}

/* =========================
   Main content container
   ========================= */
.content{
  width:min(1600px,100%);
  margin:0 auto;
  background:var(--surface);
  box-shadow:0 0 15px rgba(0,0,0,.3);
}

.inner-content{
  display:flex;
  align-items:flex-start;
  gap:24px;
  justify-content: center;
  padding: 0 var(--gutter) 40px var(--gutter);
}

/* =========================
   Top & bottom bars - LIQUID GLASS WITH BRAND COLOR
   ========================= */
.banner-divider-top{
  position:sticky;
  top:0;
  z-index:9999;
  min-height:120px;
  padding:22px var(--gutter);
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  
  /* TINTED GLASS - color mixed with transparency */
  background: color-mix(in srgb, var(--divider_top) 50%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Glass overlay using ::after */
.banner-divider-top::after{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px) saturate(150%);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index:0;
}

/* Shine effect on top */
.banner-divider-top::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
  z-index:1;
}

/* Content sits above glass */
.banner-divider-top > * {
  position:relative;
  z-index:2;
}

/* Bottom divider - SAME structure */
.banner-divider-bottom{
  position:relative;
  bottom:0;
  z-index:9999;
  height:40px;
  
  /* TINTED GLASS - color mixed with transparency */
  background: color-mix(in srgb, var(--divider_bottom) 50%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Glass overlay for bottom */
.banner-divider-bottom::after{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px) saturate(150%);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 -4px 30px rgba(0, 0, 0, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5);
  z-index:0;
}

/* Shine effect for bottom */
.banner-divider-bottom::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  background: linear-gradient(
    0deg,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
  z-index:1;
}

/* Button in the top bar (Create Post) */
/* .createpost-btn{
  border-radius:10px;
  border:1px solid rgba(0,0,0,.25);
  background:solid rgba(255,255,255,.8);
  padding:12px 30px;
  font-size:18px;
  transition: transform 0.15s ease, box-shadow 160ms ease, filter 160ms ease;
  cursor:pointer;
  white-space:nowrap;
}
.createpost-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
  filter: brightness(1.05);
  background: #fff;
}

.createpost-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  filter: brightness(0.98);
} */

/* =========================
   Home page campus buttons
   ========================= */

/* .button-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:24px 0;
  justify-items:stretch;
}

.btn{
  width:100%;
  height:170px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  overflow:hidden;
  position:relative;

  background-size:1150px 500px;
  background-position:center -60px;
  background-repeat:no-repeat;

  color:#fff;
  font-size:clamp(18px,1.8vw,30px);
  font-weight:800;
  text-shadow:2px 2px 4px #000;
  box-shadow:inset 0 0 150px rgba(0,0,0,.5);
  transition: transform .35s ease, box-shadow 160ms ease, filter 160ms ease, background-position .35s ease;
}

.btn span,
.college-btn span {
  transform: none !important;
  transition: none;
}

.btn:hover span,
.college-btn:hover span {
  transform: none !important;
}

.btn:hover,
.college-btn:hover {
  transform: translateY(-7px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

.btn:active,
.college-btn:active {
  transform: translateY(0px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
} */

.hidden{display:none;}
.page{padding:20px;}

/* =========================
   Dropdown
   ========================= */
.dropdown{position:relative;display:inline-block;}
.dropbtn{padding:12px 16px;cursor:pointer;}
.dropdown-content{
  position:absolute;
  top:100%;
  left:0;
  min-width:180px;
  background:#fff;
  box-shadow:0 8px 16px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  border-radius:10px;
  overflow:hidden;
}
.dropdown:hover .dropdown-content{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.dropdown-content a{
  display:block;
  padding:10px 14px;
  text-decoration:none;
  color:#000;
}
.dropdown-content a:hover{background:#eee;}

/* =========================
   News page layout
   ========================= */
.left-column{
  flex:1 1 auto;
  min-width:0;
  max-width: 900px;
}

#news-container{
  max-width:900px;
  margin:40px auto;
}

/* =========================
   Post Card Load Animation
   ========================= */
.news-card{
  height:160px;
  margin-bottom:20px;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  background-size:110%;
  background-position:center;
  box-shadow:inset 0 0 150px rgba(0,0,0,.5);
  transition: background-size 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Animation properties */
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  animation: cardLoadIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Staggered animation delays for first 10 cards */
.news-card:nth-child(1) { animation-delay: 0.05s; }
.news-card:nth-child(2) { animation-delay: 0.1s; }
.news-card:nth-child(3) { animation-delay: 0.15s; }
.news-card:nth-child(4) { animation-delay: 0.2s; }
.news-card:nth-child(5) { animation-delay: 0.25s; }
.news-card:nth-child(6) { animation-delay: 0.3s; }
.news-card:nth-child(7) { animation-delay: 0.35s; }
.news-card:nth-child(8) { animation-delay: 0.4s; }
.news-card:nth-child(9) { animation-delay: 0.45s; }
.news-card:nth-child(10) { animation-delay: 0.5s; }

@keyframes cardLoadIn {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.news-card:hover{
  background-size: 100%;
}

.news-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}

.news-title{
  color:#fff;
  font-size:clamp(18px,2.1vw,32px);
  font-weight:800;
  text-shadow:2px 2px 4px #000;
  text-align:center;
  line-height:1.2;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-card:hover .news-title {
  transform: scale(1.07);
}

/* =========================
   Calendar (right side)
   ========================= */
.calendar-area{
  flex:0 0 450px;
  width:450px;
  margin-top:40px;
}

.calendar-card {
  border-radius: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--divider_bottom) 40%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.calendar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
  z-index: 1;
}


.calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.calendar-rows{display:flex;flex-direction:column;gap:10px;}

/* .calendar-row {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
  z-index: 2;
} */

.calendar-row input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  color: #333;
  font-size: 14px;
  transition: all 0.2s ease;
}

.calendar-row input:focus {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.8);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

/* Readonly inputs - more transparent */
/* .calendar-row input[readonly] {
  background: rgb(255, 255, 255);
  cursor: default;
  color: #444;
} */

.calendar-row input[data-field="date"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  color: #333;
  font-size: 14px;
}

.calendar-row .remove{
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 100, 100, 0.7);
  backdrop-filter: blur(5px);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Add button - glass effect with original gray/white color */
.calendar-add {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px) saturate(150%);
  color: #333;
  font-weight: 100;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.calendar-add:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  filter: brightness(1.05);
}

.calendar-add:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  filter: brightness(0.98);
}


/* =========================
   AUTO-EXPANDING INPUTS (for calendar)
   ========================= */

/* Wrapper for auto-expanding inputs */
.grow-wrap {
  display: grid;
  position: relative;
  width: 100%;
}

/* The hidden pseudo-element that mirrors input content */
.grow-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  visibility: hidden;
  
  /* Match input styling EXACTLY */
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  min-height: 40px;
  box-sizing: border-box;
}

/* The actual input/textarea */
.grow-wrap input,
.grow-wrap textarea {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  color: #333;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
  min-height: 40px;
  box-sizing: border-box;
  
  /* Critical for soft wrapping */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  
  /* Modern browser enhancement */
  field-sizing: content;
  
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Specific for textarea to remove default styling */
.grow-wrap textarea {
  margin: 0;
}

/* Specific for input to allow text wrapping */
.grow-wrap input {
  /* Inputs don't wrap by default, so we need to force it */
  word-wrap: break-word;
  text-overflow: clip;
}

.grow-wrap input:focus,
.grow-wrap textarea:focus {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.8);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

/* Readonly state styling */
.grow-wrap input[readonly],
.grow-wrap textarea[readonly] {
  background: rgb(255, 255, 255);
  cursor: default;
}

/* Calendar row adjustments */
.calendar-row .grow-wrap {
  width: 100%;
  min-width: 0;
}

/* Calendar row layout - updated for auto-expanding inputs */
.calendar-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 36px;
  gap: 8px;
  align-items: start;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
  z-index: 2;
}

/* Date column specific */
.calendar-row .grow-wrap:first-child input {
  font-weight: 500;
}

.calendar-row .grow-wrap:first-child textarea {
  font-weight: 700; /* Bold */
}

/* =========================
   Post page
   ========================= */
#post{
  width:min(980px,100%);
  margin:40px auto;
  padding:0 20px 40px 20px;
}

.post-banner,
#post img{
  width:100%;
  height:clamp(220px,32vw,460px);
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  margin:0 auto 18px auto;
}

#post h1,#post h2{
  margin:0 0 8px 0;
}

.post-date{
  display:block;
  font-size:19px;
  margin:0 0 10px 0;
  color:rgba(0,0,0,.65);
}

#postModalContent p,
#postModalContent div,
#postModalContent span,
#postModalContent br {
  font-size: 20px;
  line-height: 1.7;
}

#post button,
#PostModalContent button{
  margin-top:14px;
  margin-right:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.8);
  transition: transform 0.15s ease, box-shadow 150ms ease, filter 160s ease;
  cursor:pointer;
}
#post button:hover,
#PostModalContent button:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  filter: brightness(1.05);
  background: #fff;
}

#post button:active,
#PostModalContent button:active{
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  filter: brightness(0.98);
}

/* =========================
   Legacy prototype
   ========================= */
.academic-calendar{
  width:500px;
  height:auto;
  background:#c9aeae;
  border-radius:10px;
  position:absolute;
  display:flex;
  flex-direction:column;
}
.row{padding:12px;border-bottom:1px solid #000;}
.row:last-child{border-bottom:none;}

/* =========================
   News Toolbar (Year Filter)
   ========================= */
.news-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-direction: column;
  margin: 90px 20px 0 0;
  width: 120px;
  flex-shrink: 0;
}

.year-filter-label{
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

#yearFilter{
  width: 120px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.85);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, filter 0.2s ease;
}

#yearFilter:hover{
  background: rgba(220,220,220,0.95);
  filter: brightness(0.98);
}

#yearFilter:focus{
  outline: none;
}

/* =========================
   Search
   ========================= */
.news-search{
  max-width: 900px;
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 12px
}

.search-label{
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

#searchInput{
  width: 960px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.85);
  font-size: 16px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#searchInput:hover{
  background: rgba(220,220,220,0.95);
}

#searchInput:focus{
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.12);
}

/* =========================
   Pagination
   ========================= */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 24px 0 10px 0;
  flex-wrap: wrap;
}

.pagination button {
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.8);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.pagination button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  filter: brightness(1.05);
  background: #fff;
}

.pagination button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  filter: brightness(0.98);
}

.pagination button.active {
  background: #c5c3c6;
  font-weight: 700;
}

.pagination button:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* =========================
   Post Modal - WITH CONTAINED SCROLLBAR
   ========================= */
#postModalContent,
#postModalContent p,
#postModalContent div,
.post-loaded,
.post-loaded p,
.post-loaded div {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.post-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  overflow: hidden;
}

.post-modal.show {
  display: block;
}

.post-modal.hidden {
  display: none;
}

.post-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* CONTAINED SCROLLBAR FIX */
.post-modal-panel {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) scale(0.92);
  width: min(1000px, calc(100vw - 40px));
  background: #d9d9d9;
  border-radius: 14px;
  padding: 60px 24px 24px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
  opacity: 0;
  animation: postModalIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  
  scrollbar-width: 10px;
  scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.05);
}

.post-modal-panel::-webkit-scrollbar {
  width: 10px;
  background: rgba(0,0,0,0.05);
  border-radius: 0 14px 14px 0;
}

.post-modal-panel::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
  border-radius: 0 14px 14px 0;
  margin: 4px 4px 4px 0;
}

.post-modal-panel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 5px;
  border: 2px solid rgba(0,0,0,0.05);
  background-clip: padding-box;
  min-height: 40px;
}

.post-modal-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.5);
}

.post-modal-panel::-webkit-scrollbar-corner {
  background: transparent;
}

.post-modal.closing .post-modal-panel {
  animation: postModalOut 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.post-modal.closing .post-modal-backdrop {
  animation: modalBackdropOut 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.post-modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.8);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease;
  z-index: 2;
}

.post-modal-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  filter: brightness(1.05);
  background: #fff;
}

.post-modal-close:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  filter: brightness(0.98);
}

@keyframes postModalIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.92) translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

@keyframes postModalOut {
  0% {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.92) translateY(0px);
  }
}

@keyframes modalBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.modal-open {
  position: fixed;
  width: 100%;
}

/* loading state inside modal */
.post-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  gap: 14px;
}

.post-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(0,0,0,0.15);
  border-top: 4px solid rgba(0,0,0,0.65);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.post-loading-text {
  font-size: 16px;
  color: rgba(0,0,0,0.7);
}

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

@keyframes postCardPopIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.post-loading,
.post-loaded {
  animation: postCardPopIn 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94)	;
  transform-origin: center center;
}

.post-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 14px;
}

.post-loading.fade-out {
  animation: postLoadingOut 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94)	 forwards;
}

@keyframes postLoadingOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}

/* =========================
   Home Page - Colleges Grid
   ========================= */
.college-container,
.colleges,
#collegesContainer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 24px;
  justify-content: center;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1100px){
  .calendar-area{flex:0 0 440px;width:440px;}
  #news-container{max-width:100%;}
}

@media (max-width: 900px){
  .inner-content{
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }
  
  .news-toolbar{
    width: 100%;
    max-width: 400px;
    margin: 20px 0 10px 0;
    align-items: center;
  }
  
  .left-column{
    width: 100%;
    max-width: 600px;
  }
  
  #news-container{
    margin: 24px auto;
    width: 100%;
  }
  
  .calendar-area{
    width: 100%;
    max-width: 400px;
    flex: 1 1 auto;
    margin-top: 20px;
  }
  
  .news-search{
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 16px 0;
  }

  #searchInput{
    width: 100%;
    max-width: 100%;
  }
  
  #yearFilter{
    width: 100%;
    max-width: 160px;
  }

  .college-container,
  .colleges,
  #collegesContainer {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
}

@media (max-width: 520px){
  .banner-divider-top{min-height:auto;padding:16px;align-items:flex-start;}
  h1{font-size:22px;line-height:1.15;}
  .createpost-btn{padding:10px 12px;font-size:14px;}
  .news-card{height:140px;}
  .btn{height:150px;}
}



.confirm-modal{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
}

.confirm-panel{
  width: min(420px, 90%);
  background: #4b5964;
  border-radius: 36px;
  padding: 32px 28px;
  text-align: center;

  animation: confirmPop 0.28s ease-out;
}

@keyframes confirmPop{
  0%{
    opacity: 0;
    transform: scale(0.92);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}


.confirm-text{
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.confirm-buttons{
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.confirm-buttons button{
  border: 0;
  cursor: pointer;
  padding: 12px 34px;
  border-radius: 999px;
  background: #7c848c;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.confirm-buttons button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  filter: brightness(1.05);
}

.confirm-buttons button:active{
  transform: translateY(0);
}

.hidden{
  display: none;
}

/* THE CHEAT: All images inside post content, but NOT the overlay */
#post img:not(#fullImage) {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 10px auto !important;
}



.calendar-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.calendar-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top: 3px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.calendar-loading-text {
  font-size: 14px;
  color: rgba(0,0,0,0.7);
}

/* Calendar remove button - only for admins */
.remove-calendar {
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.25);
  background: rgba(255,100,100,0.8);
  color: #fff;
  font-weight: bold;
  transition: all 0.2s ease;
}

.remove-calendar:hover {
  background: rgba(255,80,80,1);
  transform: scale(1.05);
}

/* Non-admin calendar inputs - LIGHTER readonly styling */
/* .calendar-row input[readonly] {
  background: rgba(255,255,255,0.6);
  cursor: default;
  border: 1px solid rgba(0,0,0,0.1);
  color: #444;
} */

/* .calendar-row input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,0.9);
  transition: all 0.2s ease;
}

.calendar-row input:focus {
  background: #fff;
  border-color: rgba(0,0,0,0.4);
  outline: none;
} */

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


/* =========================
   MOBILE FIXES
   ========================= */

@media (max-width: 768px) {
  .banner-divider-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    gap: 12px;
  }

  #collegeName {
    font-size: 16px;
    line-height: 1.3;
  }

  .admin-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .createpost-btn, .logout-btn {
    padding: 10px 16px;
    font-size: 14px;
    flex: 1;
    min-width: 100px;
    max-width: 140px;
  }

  /* Toolbar layout - stack filters */
  .news-toolbar {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 20px 0 10px 0;
    gap: 16px;
  }

  .filter-group {
    max-width: 280px;
    min-width: 280px;
    width: 280px;
  }
  
  .select-display {
    width: 280px;
    max-width: 280px;
    min-width: 280px;
  }
  
  .select-hidden {
    width: 280px;
  }

  /* Label above dropdown (like Sort by Year) */
  .year-filter-label {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    margin-bottom: 4px;
  }

  /* Dropdowns full width */
  #yearFilter, #courseFilter {
    width: 100%;
    max-width: 300px;
    padding: 12px 16px;
    font-size: 16px; /* Prevent iOS zoom */
  }

  /* Search section */
  .news-search {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 300px;
    margin: 16px auto;
  }

  .search-label {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
  }

  #searchInput {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px; /* Prevent iOS zoom */
  }

  /* News cards */
  .news-card {
    height: 140px;
    margin-bottom: 16px;
  }

  .news-title {
    font-size: 18px;
  }

  /* Inner content - single column */
  .inner-content {
    flex-direction: column;
    align-items: center;
    padding: 0 16px 30px 16px;
  }

  .left-column {
    width: 100%;
    max-width: 100%;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  #collegeName {
    font-size: 14px;
  }

  .createpost-btn, .logout-btn {
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* Desktop - center the college name */
#collegeName {
  text-align: center;
  justify-self: start;

  opacity: 0;
  transform: translateX(-20px);
  animation: slideInName 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.3s;
}

@keyframes slideInName {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.filter-group {
  position: relative;
  width: 100%;
  max-width: 280px;
}

/* Hover effect on container */
.filter-group:hover .select-display {
  background: rgba(220,220,220,0.95);
  filter: brightness(0.98);
}

/* Visible display */
.select-display {
  padding: 10px 35px 10px 14px;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 10px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, filter 0.2s ease;
}

.select-display:hover {
  background: rgba(220,220,220,0.95);
  filter: brightness(0.98);
}

.select-display::after {
  content: '>';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #000000;
  pointer-events: none;
}


.select-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 14px;
}


.select-hidden option {
  opacity: 1;
  font-size: 14px;
  color: #000000;
}


.admin-only {
  display: none !important;
}
.admin-only.visible {
  display: flex !important;
}
/* .logout-btn {
  background: rgba(255, 100, 100, 0.9) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.25);
  margin-left: 10px;
}
.logout-btn:hover {
  background: rgba(255, 80, 80, 1) !important;
}
.admin-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-self: end;
} */






/* =========================
   LIQUID GLASS ADMIN BUTTONS
   ========================= */

.admin-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-self: end;
  position: relative;
  z-index: 2;
}

/* Base liquid glass button style */
.admin-actions .createpost-btn,
.admin-actions .logout-btn {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
  
  /* TINTED GLASS - matches divider style */
  background: color-mix(in srgb, var(--divider_bottom) 40%, transparent);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Shine effect on buttons */
.admin-actions .createpost-btn::before,
.admin-actions .logout-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 12px 12px 0 0;
}

/* Button text above shine */
.admin-actions .createpost-btn span,
.admin-actions .logout-btn span {
  position: relative;
  z-index: 1;
}

/* Hover effects */
.admin-actions .createpost-btn:hover,
.admin-actions .logout-btn:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--divider_bottom) 60%, transparent);
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  filter: brightness(1.1);
}

/* Active/press effect */
.admin-actions .createpost-btn:active,
.admin-actions .logout-btn:active {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(0.98);
}

/* Logout button - slightly different tint (red-ish) */
.admin-actions .logout-btn {
  background: color-mix(in srgb, rgba(255, 100, 100, 0.9) 50%, transparent);
  border-color: rgba(255, 150, 150, 0.4);
}

.admin-actions .logout-btn:hover {
  background: color-mix(in srgb, rgba(255, 30, 30, 0.8) 60%, transparent);
}

/* Admin Login button (when not logged in) */
#adminLoginBtn {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
  
  background: color-mix(in srgb, var(--divider_bottom) 40%, transparent);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

#adminLoginBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 12px 12px 0 0;
}

#adminLoginBtn:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--divider_bottom) 60%, transparent);
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  filter: brightness(1.1);
}

#adminLoginBtn:active {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(0.98);
}

/* Register button */
#registerLoginBtn {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
  
  background: color-mix(in srgb, rgba(81, 207, 102, 0.6) 50%, transparent);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  border-color: rgba(150, 255, 150, 0.4);
}

#registerLoginBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 12px 12px 0 0;
}

#registerLoginBtn:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, rgba(81, 207, 102, 0.8) 60%, transparent);
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  filter: brightness(1.1);
}

#registerLoginBtn:active {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(0.98);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .admin-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }
  
  .admin-actions .createpost-btn,
  .admin-actions .logout-btn,
  #adminLoginBtn,
  #registerLoginBtn {
    padding: 10px 16px;
    font-size: 14px;
    flex: 1;
    min-width: 100px;
    max-width: 140px;
  }
}







    /* Toast Notification Styles */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  z-index: 100003;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.toast-container.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast {
  background: color-mix(in srgb, #4b5964 80%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 16px 28px;
  border-radius: 50px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  min-width: 220px;
  justify-content: center;
}

.toast-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: toastSpin 0.8s linear infinite;
  flex-shrink: 0;
}

.toast.success {
  background: color-mix(in srgb, #51cf66 80%, transparent);
}

.toast.success .toast-spinner {
  display: none;
}

.toast.success::before {
  content: ":)";
  font-size: 20px;
  font-weight: bold;
}

.toast.error {
  background: color-mix(in srgb, #ff6b6b 80%, transparent);
}

.toast.error .toast-spinner {
  display: none;
}

.toast.error::before {
  content: ":(";
  font-size: 18px;
  font-weight: bold;
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.toast.deleting .toast-text,
.toast.loading .toast-text {
  animation: pulse 1.5s ease-in-out infinite;
}

.banner-logo:hover {
  transform: scale(1.05) rotate(-2deg);
}

/* .banner-logo:hover {
  animation: bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(1.04);
}

@keyframes bounce {
  0% {
    transform: scale(1.00);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.04);
  }
} */



/* =========================
   ANIMATED CAMPUS GRADIENT BACKGROUNDS
   ========================= */

/* Base animated background setup */
body.animated-campus-bg {
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Campus-specific gradient colors */
body.campus-prmsuIba {
  background: linear-gradient(-45deg, #ffbb29, #4f30fc, #ff6b6b, #4facfe, #ffd829, #667eea);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

body.campus-prmsuBotolan {
  background: linear-gradient(-45deg, #aa4646, #942525, #f093fb, #f5576c, #764ba2, #667eea);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

body.campus-prmsuCaste {
  background: linear-gradient(-45deg, #bd2d2d, #6e1b1b, #D2B48C, #f093fb, #f5576c, #4facfe);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

body.campus-macsatIba {
  background: linear-gradient(-45deg, #165f14, #0e3f12, #169c33, #57ff48, #00f2fe, #4facfe);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

body.campus-ccGapo {
  background: linear-gradient(-45deg, #5973c7, #dddb4b, #7797ff, #f2ff7e, #f093fb, #4facfe);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

body.campus-ccCruz {
  background: linear-gradient(-45deg, #4062d1, #c3c5a0, #6580d8, #dcdfc1, #f093fb, #4facfe);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

body.campus-prmsuMan {
  background: linear-gradient(-45deg, #979797, #524a4a, #797979, #555555, #667eea, #764ba2);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

body.campus-prmsuCruz {
  background: linear-gradient(-45deg, #4f30fc, #ffbb29, #667eea, #764ba2, #f093fb, #4facfe);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

body.campus-gcGapo {
  background: linear-gradient(-45deg, #0fac31, #ddce00, #0c530a, #ddce00, #57ff48, #00f2fe);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

body.campus-lyceumBotolan {
  background: linear-gradient(-45deg, #165f14, #0e3f12, #169c33, #57ff48, #00f2fe, #4facfe);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}

/* Override the static background when animated class is present */
body.campus-prmsuIba .bg-image,
body.campus-prmsuBotolan .bg-image,
body.campus-prmsuCaste .bg-image,
body.campus-macsatIba .bg-image,
body.campus-ccGapo .bg-image,
body.campus-ccCruz .bg-image,
body.campus-prmsuMan .bg-image,
body.campus-prmsuCruz .bg-image,
body.campus-gcGapo .bg-image,
body.campus-lyceumBotolan .bg-image {
  display: none;
}


.delete-btn {
  background: rgba(255, 100, 100, 0.85) !important;
  color: #fff !important;
  border-color: rgba(255, 150, 150, 0.5) !important;
  font-weight: 600;
}

.delete-btn:hover {
  background: rgba(255, 80, 80, 0.95) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 100, 100, 0.25);
}

.delete-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}