/* TECHNICAL CLUB — shared CSS. Original layout retained, lighter surfaces. */

:root {

  color-scheme: light;

  --purple: #8051a1;

  --purple-dark: #53346b;

  --purple-light: #b58ad3;

  --bg: #f7f6fa;

  --panel: #fff;

  --panel2: #f1edf6;

  --text: #282131;

  --sub: #5e536b;

  --muted: #796f84;

  --border: #e3dae9;

  --deep: #140b25;

  --max: 1140px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: "IBM Plex Sans Arabic", Tahoma, "Segoe UI", sans-serif;

  -webkit-font-smoothing: antialiased;

}

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: auto;

  scroll-padding-top: 95px;

}

body {

  margin: 0;

  min-width: 280px;

  background: var(--bg);

  color: var(--text);

}

body,

button,

input,

textarea,

select {

  font-family: inherit;

}

button {

  cursor: pointer;

}

button:disabled {

  cursor: not-allowed;

  opacity: 0.55;

}

a {

  color: inherit;

  text-decoration: none;

}

img,

video {

  max-width: 100%;

  display: block;

}

h1,

h2,

h3,

p {

  margin-top: 0;

}

[hidden] {

  display: none !important;

}

:focus-visible {

  outline: 3px solid #b98add;

  outline-offset: 3px;

}

.shell {

  width: min(var(--max), calc(100% - 42px));

  margin-inline: auto;

}

.skip-link {

  position: fixed;

  inset-block-start: -90px;

  inset-inline-start: 12px;

  z-index: 1000;

  background: white;

  padding: 12px;

}

.skip-link:focus {

  inset-block-start: 8px;

}

.muted {

  color: var(--muted);

  font-size: 12px;

  line-height: 1.9;

}

.eyebrow {

  color: var(--purple);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.015em;

  margin: 0 0 8px;

}

.btn,

.small-btn,

.category-arrow,

.icon-close {

  transition:

    background 0.25s,

    border-color 0.25s,

    transform 0.3s var(--ease),

    box-shadow 0.3s;

}

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 44px;

  padding: 10px 18px;

  border: 1px solid transparent;

  border-radius: 11px;

  font-size: 13px;

  font-weight: 700;

  text-align: center;

}

.btn.primary {

  background: var(--purple);

  color: white;

  border-color: #9d70bd;

}

.btn.primary:hover {

  background: #9563b7;

  box-shadow: 0 7px 18px #8051a12d;

}

.btn.secondary {

  background: #f0eaf5;

  color: var(--purple-dark);

  border-color: #d7c5e4;

}

.btn.secondary:hover {

  background: #e8def1;

}

.btn.danger {

  background: #fff1f2;

  color: #a7354b;

  border-color: #f1c4ca;

}

.btn:hover:not(:disabled),

.small-btn:hover:not(:disabled) {

  transform: translateY(-2px);

}

.back-button {

  display: inline-flex;

  border: 0;

  border-bottom: 1px solid #b99acb;

  background: none;

  padding: 8px 0;

  color: var(--purple-dark);

  margin-bottom: 21px;

  font-size: 13px;

  font-weight: 700;

}

.actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 9px;

  margin-top: 18px;

}

.empty-state {

  grid-column: 1/-1;

  background: var(--panel);

  border: 1px dashed #c9b4d8;

  border-radius: 14px;

  padding: 24px;

  color: var(--sub);

  text-align: center;

  line-height: 2;

  font-size: 13px;

}

.notice {

  padding: 15px;

  border-radius: 12px;

  background: #f9f3e8;

  border: 1px solid #ead6b5;

  font-size: 12px;

  line-height: 2;

  color: #76603d;

}

.toast {

  position: fixed;

  z-index: 1000;

  bottom: 22px;

  left: 50%;

  transform: translateX(-50%);

  max-width: calc(100vw - 28px);

  padding: 12px 17px;

  background: #2d1b3a;

  color: white;

  border-radius: 12px;

  box-shadow: 0 12px 38px #140b2535;

  font-size: 13px;

  text-align: center;

}

.view-enter {

  animation: none;

}

@keyframes enter {

  from {

    opacity: 0;

    transform: translateY(12px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}

/* HEADER: retains the old university/deanship layout */

.header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(20, 11, 37, 0.98);

  border-bottom: 1px solid #513668;

  color: white;

  backdrop-filter: blur(14px);

}

.header-inner {

  display: flex;

  align-items: center;

  gap: 18px;

  justify-content: space-between;

  min-height: 93px;

}

.brand {

  display: flex;

  flex-direction: column;

  flex-shrink: 0;

  gap: 2px;

}

.brand strong {

  font-size: 24px;

  letter-spacing: -0.035em;

}

.brand small {

  font-size: 12px;

  color: #d0bedc;

}

.header-logos {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin-inline-start: auto;

  min-width: 0;

}

.header-logo {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 156px;

  height: 68px;

  background: transparent;

}

.header-logo img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  background: transparent;

}

.header-logos .university-logo {

  width: 210px;

  height: 86px;

}

.menu-holder {

  position: relative;

  flex: none;

}

.menu-button {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

  width: 44px;

  height: 44px;

  background: #312143;

  border: 1px solid #76538e;

  border-radius: 11px;

}

.menu-button:hover {

  background: #49315f;

}

.menu-button span {

  width: 19px;

  height: 2px;

  border-radius: 2px;

  background: white;

  transition:

    transform 0.3s,

    opacity 0.3s;

}

.menu-button[aria-expanded="true"] span:nth-child(1) {

  transform: translateY(7px) rotate(45deg);

}

.menu-button[aria-expanded="true"] span:nth-child(2) {

  opacity: 0;

}

.menu-button[aria-expanded="true"] span:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg);

}

.site-menu {

  position: absolute;

  top: calc(100% + 11px);

  inset-inline-end: 0;

  width: 220px;

  padding: 7px;

  background: #261635;

  border: 1px solid #806199;

  border-radius: 12px;

  box-shadow: 0 16px 38px #0005;

}

.site-menu a {

  display: block;

  border-radius: 8px;

  padding: 11px;

  font-size: 12px;

}

.site-menu a:hover {

  background: #48305e;

}

/* HERO: keep video masks/blending from the original black-frame fix */

.hero {

  position: relative;

  display: grid;

  place-items: center;

  min-height: clamp(490px, 73svh, 760px);

  overflow: hidden;

  color: #fff;

  background: radial-gradient(

    ellipse 55% 65% at 50% 39%,

    #321b4a 0%,

    #1d112f 60%,

    #140b25 100%

  );

}

.hero-aura {

  position: absolute;

  left: 50%;

  top: 44%;

  transform: translate(-50%, -50%);

  width: min(85vw, 700px);

  aspect-ratio: 1;

  background: radial-gradient(circle, #8051a129, transparent 68%);

  border-radius: 50%;

  pointer-events: none;

}

.hero-content {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 15px 15px 50px;

}

.hero-logo {

  width: clamp(270px, 40vw, 475px);

  aspect-ratio: 1;

  position: relative;

  overflow: visible;

  pointer-events: none;

}

.hero-video,

.hero-logo video {

  width: 100%;

  height: 100%;

  object-fit: contain;

  background: transparent;

  border: 0;

  outline: 0;

  box-shadow: none;

  mix-blend-mode: screen;

  filter: contrast(1.8) brightness(0.96);

  -webkit-mask-image: radial-gradient(

    circle closest-side at center,

    #000 84%,

    transparent 100%

  );

  mask-image: radial-gradient(

    circle closest-side at center,

    #000 84%,

    transparent 100%

  );

  -webkit-mask-repeat: no-repeat;

  mask-repeat: no-repeat;

  pointer-events: none;

}

.hero-content h1 {

  position: relative;

  z-index: 2;

  margin: -38px 0 3px;

  font-size: clamp(33px, 4.7vw, 60px);

  line-height: 1.5;

}

.hero-content h1 span {

  display: block;

  font:

    700 0.67em/1.65 Arial,

    sans-serif;

  letter-spacing: 0.035em;

}

.hero-content p {

  max-width: 500px;

  margin: 8px auto 0;

  color: #d5c8df;

  font-size: clamp(12px, 1.4vw, 15px);

  line-height: 2;

}

.orbital-line {

  height: 2px;

  background: linear-gradient(

    90deg,

    transparent,

    #9064b5,

    #ceabe9,

    #9064b5,

    transparent

  );

}

/* CATEGORIES: old 3-box look, slightly lighter and smaller */

.events-section {

  padding: 60px 0 88px;

}

.section-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 16px;

  border-bottom: 1px solid var(--border);

  padding-bottom: 19px;

  margin-bottom: 23px;

}

.section-heading h2 {

  margin: 0;

  font-size: clamp(24px, 3vw, 35px);

}

.category-wrap {

  display: grid;

  grid-template-columns: minmax(0, 1fr);

  align-items: center;

}

.categories {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(8px, 2vw, 20px);

  min-width: 0;

}

.category-card {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 11px;

  min-width: 0;

  min-height: 122px;

  padding: 14px 7px;

  border: 1px solid #d6c7e1;

  border-radius: 16px;

  background: linear-gradient(140deg, #fff, #f0ebf5);

  color: #5a4669;

  text-align: center;

  transition:

    transform 0.28s var(--ease),

    border-color 0.28s,

    background 0.28s,

    box-shadow 0.28s;

}

.category-card:hover {

  transform: translateY(-3px);

  border-color: var(--purple);

}

.category-card.active {

  color: white;

  background: linear-gradient(135deg, #8051a1, #56366e);

  border-color: #9364b1;

  box-shadow: 0 11px 27px #8051a130;

}

.category-icon {

  display: grid;

  place-items: center;

  width: 36px;

  height: 36px;

  border-radius: 10px;

  background: #8051a121;

  font-size: 21px;

}

.category-card.active .category-icon {

  background: #ffffff23;

}

.category-card strong {

  font-size: clamp(11px, 1.5vw, 17px);

  line-height: 1.6;

  overflow-wrap: anywhere;

}

.category-arrow {

  display: none;

}

.subheading {

  margin: 30px 0 17px;

}

.subheading h3 {

  margin-bottom: 4px;

  font-size: clamp(20px, 2.3vw, 27px);

}

.subheading p {

  color: var(--muted);

  font-size: 12px;

}

/* CARD EXTERIOR: 8:5, always 2 columns */

.cards-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: clamp(10px, 2vw, 19px);

}

.event-card {

  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  background: #fff;

  border: 1px solid #e0d6e6;

  border-radius: 15px;

  box-shadow: 0 7px 22px #30183d09;

  transition:

    transform 0.3s var(--ease),

    border-color 0.3s,

    box-shadow 0.3s;

}

.event-card:hover {

  transform: translateY(-4px);

  border-color: #b594d0;

  box-shadow: 0 13px 25px #3b285218;

}

.card-photo {

  width: 100%;

  aspect-ratio: 8/5;

  display: grid;

  place-items: center;

  overflow: hidden;

  background: #eee7f4;

}

.card-photo img,

.card-photo video {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

}

.placeholder {

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  min-height: 64px;

  background: radial-gradient(circle, #b58ad329, transparent 75%), #eee7f4;

  color: #9264b5;

  font-size: 33px;

}

.card-info {

  display: flex;

  flex-direction: column;

  gap: 8px;

  flex: 1;

  padding: 14px 16px 17px;

}

.card-info h3 {

  margin: 0;

  font-size: clamp(13px, 1.6vw, 19px);

  line-height: 1.65;

  overflow-wrap: anywhere;

}

.card-info p {

  margin: 0;

  color: var(--sub);

  font-size: 12px;

  line-height: 1.85;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

}

.tags {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 6px;

  margin-top: auto;

}

.tags span,

.tag {

  display: inline-flex;

  align-items: center;

  padding: 4px 8px;

  background: #efe8f4;

  border: 1px solid #dccce7;

  border-radius: 7px;

  color: var(--purple-dark);

  font-size: 10px;

  font-weight: 600;

}

.card-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 7px;

}

.small-btn {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  padding: 7px 11px;

  min-height: 35px;

  border: 1px solid #dac9e6;

  background: #f4eef8;

  color: var(--purple-dark);

  border-radius: 9px;

  font-size: 11px;

  font-weight: 700;

}

.small-btn.primary {

  background: var(--purple);

  color: white;

  border-color: var(--purple);

}

/* DETAIL AND AGENDA: 16:9 inner media */

.detail-page {

  padding: 30px 0 75px;

  min-height: 65svh;

}

.detail-heading h1 {

  font-size: clamp(25px, 3.8vw, 43px);

  margin-bottom: 11px;

}

.detail-heading .eyebrow {

  margin-bottom: 9px;

}

.detail-cover,

.challenge-media {

  width: 100%;

  max-width: 970px;

  aspect-ratio: 16/9;

  display: grid;

  place-items: center;

  overflow: hidden;

  background: #efe8f4;

  border: 1px solid #dfd1e8;

  border-radius: 16px;

}

.detail-cover img,

.detail-cover video,

.challenge-media img,

.challenge-media video {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.facts {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

  padding: 18px 0;

  margin: 20px 0;

  border-block: 1px solid var(--border);

}

.facts > div {

  display: flex;

  flex-direction: column;

  gap: 7px;

  min-width: 0;

}

.facts small {

  font-size: 11px;

  color: var(--muted);

}

.facts strong {

  font-size: 12px;

  overflow-wrap: anywhere;

  line-height: 1.9;

}

.detail-text {

  padding: 22px 0;

  border-bottom: 1px solid var(--border);

}

.detail-text h2 {

  font-size: clamp(19px, 2.1vw, 24px);

  margin-bottom: 12px;

}

.detail-text p {

  font-size: 13px;

  color: var(--sub);

  white-space: pre-line;

  line-height: 2.1;

  overflow-wrap: anywhere;

}

.attendance-banner {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin: 22px 0;

  padding: 20px;

  background: linear-gradient(130deg, #f0e5f8, #faf7fc);

  border: 1px solid #d3b9e5;

  border-radius: 15px;

}

.attendance-banner h2 {

  font-size: 18px;

  margin-bottom: 6px;

}

.attendance-banner p {

  color: var(--sub);

  font-size: 12px;

  margin: 0;

}

.challenges-section {

  margin-top: 30px;

}

.agenda-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 13px;

}

.agenda-card {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  min-width: 0;

  text-align: right;

  padding: 18px;

  border: 1px solid #d6c7e3;

  border-radius: 15px;

  background: linear-gradient(145deg, #fff, #f8f5fa);

  color: var(--text);

  transition:

    transform 0.3s var(--ease),

    border-color 0.3s,

    box-shadow 0.3s;

}

.agenda-card:hover:not(:disabled) {

  transform: translateY(-3px);

  border-color: var(--purple);

  box-shadow: 0 10px 23px #8051a11b;

}

.agenda-card.locked {

  color: #81798b;

  background: #f0eef2;

}

.agenda-card .agenda-icon {

  align-self: flex-start;

  font-size: 20px;

  margin-bottom: 15px;

}

.agenda-card strong {

  font-size: 16px;

  margin: 6px 0;

}

.agenda-card .agenda-status {

  font-size: 11px;

  color: #467658;

  margin-top: 12px;

}

.agenda-card.locked .agenda-status {

  color: #81798b;

}

.agenda-detail-head {

  padding: 16px 0 24px;

  border-bottom: 1px solid var(--border);

}

.agenda-detail-head h1 {

  font-size: clamp(25px, 3vw, 38px);

}

.resource-list {

  display: grid;

  grid-template-columns: 1fr;

  gap: 11px;

}

.resource-item {

  padding: 16px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 12px;

  overflow-wrap: anywhere;

}

.resource-item strong {

  display: block;

  margin-bottom: 6px;

}

.resource-item p {

  font-size: 12px;

  color: var(--sub);

  line-height: 2;

  white-space: pre-wrap;

}

.resource-item a {

  display: inline-block;

  margin-top: 6px;

  font-size: 12px;

  color: var(--purple-dark);

  border-bottom: 1px solid #bca2ce;

}

.copy-panel {

  margin: 15px 0;

  padding: 16px;

  background: #f1eaf6;

  border: 1px solid var(--border);

  border-radius: 12px;

}

.copy-panel pre {

  white-space: pre-wrap;

  overflow-wrap: anywhere;

  font-size: 12px;

  line-height: 2;

  font-family: inherit;

}

.competition-panel {

  margin-top: 26px;

  border: 1px solid #e1d5e8;

  background: #fff;

  padding: 20px;

  border-radius: 15px;

}

.competition-panel h2 {

  margin-bottom: 9px;

}

/* PUBLIC ATTENDANCE MODALS */

.club-dialog {

  width: min(95vw, 530px);

  border: 1px solid #d2bde1;

  border-radius: 19px;

  background: #fff;

  color: var(--text);

  padding: 22px;

  box-shadow: 0 24px 80px #150d273f;

}

.club-dialog::backdrop {

  background: #150d27a3;

  backdrop-filter: blur(5px);

}

.dialog-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

}

.dialog-top h2 {

  font-size: 20px;

  margin: 0 0 12px;

}

.icon-close {

  width: 36px;

  height: 36px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: #f4eff7;

  font-size: 24px;

}

.camera-wrap {

  display: grid;

  place-items: center;

  position: relative;

  overflow: hidden;

  background: #120c20;

  border: 1px solid #c0a5d4;

  border-radius: 12px;

  margin: 13px 0;

}

.camera-wrap video {

  width: 100%;

  min-height: 120px;

  max-height: 310px;

  object-fit: contain;

}

.scan-frame {

  position: absolute;

  inset: 15%;

  border: 2px solid #dcbbf5;

  border-radius: 11px;

  pointer-events: none;

}

.form-message {

  color: #9d3f61;

  font-size: 12px;

  line-height: 1.9;

  margin: 0;

}

.stack-form {

  display: flex;

  flex-direction: column;

  gap: 13px;

  width: 100%;

}

.stack-form label,

.field {

  display: flex;

  flex-direction: column;

  gap: 6px;

  font-size: 12px;

  font-weight: 600;

}

.stack-form input,

.stack-form textarea,

.field input:not([type="checkbox"]),

.field textarea,

.field select {

  width: 100%;

  min-height: 43px;

  min-width: 0;

  padding: 10px 12px;

  border: 1px solid #cdbdd9;

  border-radius: 9px;

  background: #fff;

  color: var(--text);

  font-size: 13px;

}

textarea {

  resize: vertical;

}

/* FOOTER */

.footer {

  background: #f0ebf5;

  border-top: 1px solid var(--border);

}

.footer-inner {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 22px;

  flex-wrap: wrap;

  padding-block: 25px;

  min-height: 125px;

}

.footer-identity {

  display: flex;

  flex-direction: column;

  gap: 9px;

}

.footer-logos {

  display: flex;

  align-items: center;

  gap: 16px;

}

.footer-logos img {

  width: 135px;

  height: 54px;

  object-fit: contain;

}

.footer-inner p {

  font-size: 11px;

  color: var(--sub);

  margin: 0;

}

.footer-quiet {

  font-weight: 600;

}

/* ADMIN (preserve sidebar and cards) */

.admin-gate {

  min-height: 100svh;

  display: grid;

  place-items: center;

  padding: 25px;

  background: radial-gradient(ellipse at 50% 30%, #eadff1, #f7f6fa 68%);

}

.login-card {

  width: min(100%, 475px);

  padding: clamp(24px, 4vw, 40px);

  border: 1px solid #d8c4e7;

  border-radius: 22px;

  background: #fff;

  box-shadow: 0 15px 45px #8051a113;

  text-align: center;

}

.login-card h1 {

  font-size: 33px;

  margin: 3px 0 6px;

}

.login-card h2 {

  font-size: 20px;

}

.login-card > p {

  color: var(--sub);

  font-size: 12px;

  line-height: 2;

}

.login-card .stack-form {

  text-align: right;

  margin: 19px 0 9px;

}

.soft-link {

  font-size: 12px;

  color: var(--purple-dark);

}

.admin-layout {

  display: grid;

  grid-template-columns: 238px minmax(0, 1fr);

  min-height: 100svh;

}

.sidebar {

  position: sticky;

  top: 0;

  height: 100svh;

  align-self: start;

  display: flex;

  flex-direction: column;

  padding: 23px 13px;

  background: #170e27;

  border-left: 1px solid #372247;

  color: white;

}

.sidebar-brand {

  display: flex;

  flex-direction: column;

  gap: 3px;

  padding: 0 9px 22px;

  border-bottom: 1px solid #473255;

}

.sidebar-brand strong {

  font-size: 20px;

}

.sidebar-brand small {

  font-size: 11px;

  color: #c6b2d8;

}

.side-nav {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-top: 19px;

}

.side-nav button {

  border: 1px solid transparent;

  border-radius: 10px;

  background: transparent;

  color: #d6c6e3;

  text-align: right;

  padding: 12px 11px;

  font-size: 12px;

  font-weight: 600;

  transition:

    background 0.25s,

    border-color 0.25s,

    transform 0.25s;

}

.side-nav button:hover {

  background: #2b193e;

  transform: translateX(-2px);

}

.side-nav button.active {

  background: #8051a13d;

  border-color: #8c69a6;

  color: white;

}

.sidebar-bottom {

  display: flex;

  flex-direction: column;

  gap: 14px;

  margin-top: auto;

  border-top: 1px solid #483255;

  padding: 18px 8px 0;

}

.sidebar-bottom a {

  font-size: 12px;

  color: #d8c5e6;

}

.sidebar-bottom button {

  background: none;

  color: #ffc4d0;

  border: 1px solid #9b627d;

  border-radius: 9px;

  padding: 11px;

}

.admin-main {

  min-width: 0;

  padding: 28px clamp(17px, 3.2vw, 48px) 70px;

}

.admin-topbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  border-bottom: 1px solid var(--border);

  padding-bottom: 18px;

  margin-bottom: 24px;

}

.admin-topbar h1 {

  margin: 0;

  font-size: 28px;

}

.topbar-actions {

  display: flex;

  align-items: center;

  gap: 10px;

}

.pill {

  display: inline-flex;

  padding: 6px 12px;

  border: 1px solid #dac4e8;

  background: #f0e7f6;

  color: var(--purple-dark);

  border-radius: 50px;

  font-size: 11px;

}

.sidebar-toggle {

  display: none;

}

.intro {

  margin-bottom: 21px;

}

.intro h2 {

  margin-bottom: 7px;

  font-size: 23px;

}

.intro p {

  color: var(--sub);

  font-size: 12px;

  line-height: 2;

}

.page-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 15px;

  margin-bottom: 19px;

}

.stats-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 21px;

}

.stat-card {

  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: 17px;

  border: 1px solid var(--border);

  background: #fff;

  border-radius: 13px;

}

.stat-card span {

  color: var(--sub);

  font-size: 12px;

}

.stat-card strong {

  color: var(--purple-dark);

  font-size: 25px;

}

.admin-card {

  padding: clamp(16px, 2.4vw, 24px);

  margin-bottom: 18px;

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 16px;

}

.admin-card h2 {

  font-size: 21px;

}

.admin-event-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

}

.admin-event-card {

  border: 1px solid var(--border);

  background: #fff;

  border-radius: 14px;

  overflow: hidden;

  text-align: right;

  padding: 0;

  color: var(--text);

  transition:

    transform 0.25s,

    border-color 0.25s;

}

.admin-event-card:hover {

  transform: translateY(-3px);

  border-color: var(--purple);

}

.admin-event-info {

  display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 14px;

}

.admin-event-info strong {

  font-size: 15px;

}

.admin-event-info span {

  font-size: 12px;

  color: var(--sub);

}

.admin-challenges,

.admin-list,

.attendance-records {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.admin-challenge-row,

.admin-list-row,

.attendance-person {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

  padding: 13px;

  border: 1px solid var(--border);

  background: #faf8fc;

  border-radius: 11px;

}

.admin-list-row strong {

  font-size: 13px;

}

.admin-list-row small {

  display: block;

  font-size: 11px;

  color: var(--sub);

}

.row-actions {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

}

.form-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 15px;

}

.field.full {

  grid-column: 1/-1;

}

.field small {

  font-size: 11px;

  color: var(--muted);

}

.checkbox-line {

  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 10px;

  padding: 11px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: #faf7fc;

}

.checkbox-line input {

  accent-color: var(--purple);

}

.tools-stack {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.tool-row {

  display: grid;

  grid-template-columns: 1fr 1fr auto;

  gap: 10px;

  align-items: end;

}

.qr-panel {

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.print-qr {

  align-self: center;

  width: min(100%, 400px);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  padding: 22px;

  background: white;

  border: 4px solid #8051a1;

  color: #29193b;

  text-align: center;

  border-radius: 18px;

}

.print-qr h2 {

  font-size: 16px;

  margin: 0;

}

.qr-box {

  display: grid;

  place-items: center;

  min-height: 230px;

  padding: 12px;

  background: white;

}

.qr-box img,

.qr-box canvas {

  max-width: 100%;

}

.qr-panel input {

  width: 100%;

  min-height: 43px;

  padding: 10px;

  border: 1px solid var(--border);

  border-radius: 9px;

}

/* MOBILE: smaller cards, 2 columns, stable logos. */

@media (max-width: 780px) {

  .shell {

    width: calc(100% - 30px);

  }

  .header-inner {

    display: grid;

    grid-template-columns: minmax(82px, 1fr) auto 40px;

    align-items: center;

    gap: 5px;

    min-height: 72px;

  }

  .brand strong {

    font-size: 17px;

  }

  .brand small {

    font-size: 10px;

  }

  .header-logos {

    grid-column: 2;

    margin: 0;

    gap: 4px;

  }

  .header-logos .university-logo {

    width: 80px;

    height: 42px;

  }

  .header-logos .deanship-logo {

    width: 73px;

    height: 42px;

  }

  .menu-holder {

    grid-column: 3;

  }

  .menu-button {

    width: 40px;

    height: 40px;

  }

  .hero {

    min-height: clamp(475px, 70svh, 680px);

  }

  .hero-logo {

    width: min(88vw, 405px);

    overflow: hidden;

  }

  .hero-video,

  .hero-logo video {

    position: absolute;

    inset: 0;

    filter: none;

    mix-blend-mode: screen;

    -webkit-mask-image: radial-gradient(

      circle closest-side,

      #000 0 67%,

      transparent 90%

    );

    mask-image: radial-gradient(

      circle closest-side,

      #000 0 67%,

      transparent 90%

    );

  }

  .hero-content h1 {

    margin-top: -34px;

  }

  .events-section {

    padding: 37px 0 65px;

  }

  .category-card {

    min-height: 91px;

    gap: 5px;

    padding: 10px 4px;

    border-radius: 11px;

  }

  .category-icon {

    width: 27px;

    height: 27px;

    font-size: 16px;

  }

  .category-card strong {

    font-size: 11px;

  }

  .cards-grid {

    gap: 9px;

  }

  .card-info {

    padding: 10px;

    gap: 6px;

  }

  .card-info h3 {

    font-size: 12px;

  }

  .card-info p {

    font-size: 10px;

  }

  .tags span,

  .tag {

    font-size: 9px;

    padding: 3px 5px;

  }

  .small-btn {

    font-size: 10px;

    min-height: 32px;

    padding: 6px 8px;

  }

  .detail-page {

    padding: 22px 0 60px;

  }

  .facts {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .agenda-card {

    padding: 12px;

  }

  .agenda-card strong {

    font-size: 13px;

  }

  .footer-inner {

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

  }

  .admin-layout {

    grid-template-columns: minmax(0, 1fr);

  }

  .sidebar {

    position: fixed;

    z-index: 300;

    top: 0;

    right: 0;

    width: min(83vw, 300px);

    transform: translateX(105%);

    box-shadow: -18px 0 40px #0003;

    transition: transform 0.3s var(--ease);

  }

  .sidebar.open {

    transform: translateX(0);

  }

  .sidebar-toggle {

    display: inline-flex;

  }

  .admin-main {

    padding: 19px 16px 60px;

  }

  .admin-topbar h1 {

    font-size: 23px;

  }

  .stats-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .form-grid {

    grid-template-columns: 1fr;

  }

  .field.full {

    grid-column: auto;

  }

}

@media (max-width: 400px) {

  .shell {

    width: calc(100% - 22px);

  }

  .header-inner {

    grid-template-columns: minmax(72px, 1fr) auto 36px;

    gap: 3px;

  }

  .brand strong {

    font-size: 14px;

  }

  .brand small {

    font-size: 9px;

  }

  .header-logos .university-logo {

    width: 62px;

    height: 36px;

  }

  .header-logos .deanship-logo {

    width: 54px;

    height: 36px;

  }

  .menu-button {

    width: 36px;

    height: 36px;

  }

  .category-card strong {

    font-size: 10px;

  }

  .cards-grid {

    gap: 7px;

  }

  .card-info {

    padding: 8px;

  }

  .card-info h3 {

    font-size: 11px;

  }

  .card-actions {

    flex-direction: column;

  }

  .card-actions .small-btn {

    width: 100%;

  }

  .agenda-grid {

    gap: 8px;

  }

  .agenda-card {

    padding: 10px;

  }

  .agenda-card strong {

    font-size: 12px;

  }

  .tool-row {

    grid-template-columns: 1fr;

  }

}

@media print {

  body {

    background: white !important;

  }

  .sidebar,

  .admin-topbar,

  .actions,

  .back-button {

    display: none !important;

  }

  .admin-layout {

    display: block;

  }

  .admin-card {

    border: 0;

  }

  .print-qr {

    break-inside: avoid;

  }

}



/* تحسينات محددة مع إبقاء هيكل الموقع الأصلي */

.categories {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}

.category-wrap {

  display: block;

}

.hero-video,

.hero-logo video {

  border: 0 !important;

  outline: 0 !important;

  box-shadow: none !important;

  background: transparent !important;

  mix-blend-mode: screen;

  -webkit-mask-image: none !important;

  mask-image: none !important;

  filter: none !important;

}

.hero-logo {

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

}

.event-card,

.admin-card,

.category-card {

  box-shadow: 0 8px 26px #48225c12;

}

.admin-card {

  background: linear-gradient(160deg, #fff, #fcfaff);

}

.admin-list-row {

  align-items: center;

}

@media (max-width: 680px) {

  .categories {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

  }

  .category-card {

    min-height: 89px;

  }

  .cards-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



/* Details use an independent stationary panel; never scroll the underlying page. */

#detail-page:not([hidden]) {

  position: fixed;

  z-index: 90;

  top: 93px;

  bottom: 0;

  left: 0;

  right: 0;

  width: 100%;

  max-width: none;

  overflow-y: auto;

  overscroll-behavior: contain;

  background: var(--bg);

  padding: 25px max(21px, calc((100vw - var(--max)) / 2)) 65px;

}

#detail-page:not([hidden]) #detail-content {

  max-width: var(--max);

  margin-inline: auto;

}

#login-message.is-loading {

  color: var(--purple);

}

/* Deletion confirmation is a styled in-page dialog, not a browser confirm(). */

.member-confirm-dialog {

  border: 1px solid #dec9eb;

  padding: 0;

  border-radius: 18px;

  width: min(94vw, 440px);

  max-height: 90vh;

  color: var(--text);

  background: #fff;

  box-shadow: 0 22px 70px #1f103b40;

}

.member-confirm-dialog::backdrop {

  background: #140b2599;

}

.member-confirm-content {

  padding: 25px;

}

.member-confirm-content h2 {

  margin-bottom: 12px;

  font-size: 19px;

}

.member-confirm-content p {

  color: var(--sub);

  font-size: 13px;

  line-height: 2;

  overflow-wrap: anywhere;

}

.member-confirm-actions {

  display: flex;

  justify-content: flex-start;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 20px;

}

@media (max-width: 780px) {

  #detail-page:not([hidden]) {

    top: 72px;

    padding: 20px 15px 55px;

  }

}

/* Requested targeted improvements: avoid accidental horizontal movement and double-tap zoom. */
html, body { max-width:100%; overflow-x:clip; }
button, a, summary, [role="link"], [role="tab"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: 16px; }
.hero-logo, .hero-video, .hero-logo video {
  border:0 !important; outline:0 !important; box-shadow:none !important;
  background: transparent !important;
}
.hero-video, .hero-logo video {
  mix-blend-mode: screen !important;
  -webkit-mask-image: radial-gradient(circle closest-side at center, #000 67%, transparent 96%) !important;
  mask-image: radial-gradient(circle closest-side at center, #000 67%, transparent 96%) !important;
}
/* Three main categories first; added categories flow to a new row. */
.categories { grid-template-columns: repeat(3,minmax(0,1fr)); }
.event-card { cursor:pointer; }
.event-card:focus-visible {outline:3px solid var(--purple);outline-offset:3px;}
.category-admin-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 26px; }
.category-admin-card {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:145px;background:#fff;border:1px solid #d8c9e5;border-radius:16px;padding:18px;color:var(--text);text-align:center;transition:transform .22s,border-color .22s;}
.category-admin-card:hover {transform:translateY(-2px);border-color:var(--purple);}
.category-admin-card strong{font-size:15px;line-height:1.7;}
.category-admin-number{font-size:27px;font-weight:700;color:var(--purple-dark);font-variant-numeric:tabular-nums;}
.category-admin-card small{font-size:11px;color:var(--sub);}
.attendance-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.attendance-person-card{margin:0;min-width:0;}
.attendance-person-card h3{font-size:17px;margin-bottom:4px;}
.attendance-person-card small{display:block;color:var(--sub);font-size:11px;}
.attendance-markers{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:15px 0;}
.attendance-markers>strong{font-size:12px;margin-inline-end:4px;}
.attendance-marker{display:inline-flex;align-items:center;justify-content:center;min-width:41px;min-height:39px;gap:3px;border-radius:9px;border:1px solid;font-size:13px;font-weight:700;}
.attendance-marker.attended{background:#e5f6eb;color:#23653e;border-color:#91c9a5;}
.attendance-marker.missed{background:#fff0f1;color:#a83a48;border-color:#e3a5b0;}
.attendance-dates{display:grid;gap:5px;}
.count-chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;border-radius:10px;border:1px solid #d8c9e5;background:#f4eef8;color:#5d4771;font-size:12px;font-weight:600;cursor:default;user-select:none;}
.submission-record.winner,.public-submission.winner{border-color:#d6b365;background:linear-gradient(145deg,#fffaf0,#fff);}
.submission-summary{white-space:pre-wrap;line-height:2;overflow-wrap:anywhere;padding:14px;background:var(--panel2);border-radius:12px;}
.public-submissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px;}
.public-submission{min-width:0;border:1px solid var(--border);background:#faf8fc;border-radius:14px;padding:16px;overflow-wrap:anywhere;}
.public-submission h3{font-size:16px;margin:0;}
.public-submission p{font-size:13px;white-space:pre-wrap;line-height:2;}
.winner-label{display:inline-block;font-size:11px;font-weight:700;padding:5px 9px;background:#f5e2aa;color:#705009;border-radius:8px;}
.submission-entry{margin-top:18px;padding-top:12px;border-top:1px solid var(--border);}
.submission-entry summary{display:inline-flex;list-style:none;cursor:pointer;}
.submission-entry summary::-webkit-details-marker{display:none;}
.public-submission-form{margin-top:17px;max-width:650px;}
.public-submission a{color:var(--purple-dark);}
@media(max-width:780px){.category-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.attendance-people,.public-submissions{grid-template-columns:1fr;} .category-admin-card{min-height:115px;padding:12px;}.category-admin-card strong{font-size:12px;}}
@media(max-width:400px){.category-admin-grid{gap:8px;}.count-chip{font-size:10px;padding:7px;}}

/* Scoped refinements for requested content cards, tool links and member permissions. */
.content-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}
.resource-item.content-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 4px 17px #48225c0c;
}
.content-card-heading { display: flex; gap: 12px; align-items: flex-start; }
.content-card-heading > div { min-width: 0; flex: 1; }
.content-card-heading strong { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.content-card-heading .tag { margin-top: 7px; }
.content-number {
  flex: 0 0 32px; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px; font-size: 13px; font-weight: 700;
  background: #eee4f6; color: var(--purple-dark);
}
.content-card > p { margin: 0; white-space: pre-wrap; line-height: 1.9; overflow-wrap: anywhere; }
.content-tools { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.content-tools .tool-button { border-color: var(--purple); background: var(--purple); color: white; }
.tools-editor { display: grid; gap: 10px; width: 100%; }
.tool-editor-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) auto;
  gap: 9px; align-items: end; padding: 12px; background: #faf8fc;
  border: 1px solid var(--border); border-radius: 11px;
}
.footer-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-club-link {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 8px 13px; border: 1px solid #cbb1dc;
  border-radius: 9px; color: var(--purple-dark);
  font-size: 12px; font-weight: 700; background: #fff;
}
.footer-club-link:hover { background: #e8def1; }
.remember-check { cursor: pointer; }
@media (max-width: 680px) {
  .content-card-list { grid-template-columns: 1fr; }
  .tool-editor-row { grid-template-columns: 1fr; }
  .resource-item.content-card { padding: 14px; }
}

/* Only the new login preference needs native checkbox sizing. */
.stack-form label.remember-check { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; }
.stack-form label.remember-check input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; padding: 0; accent-color: var(--purple); }


/* =========================================
   1. Login: username and password LTR
   ========================================= */

#login-form input[name="username"],
#login-form input[name="password"],
#member-form input[name="username"],
#member-form input[name="password"] {
  direction: ltr;
  text-align: left;
}

/* =========================================
   2. Password visibility button
   ========================================= */

.password-field {
  display: block;
  position: relative;
  width: 100%;
  direction: ltr;
}

.password-field > input {
  width: 100%;
  padding-right: 49px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);

  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;
  padding: 0;

  background: transparent;
  color: #6d5980;
  border: 0;
  border-radius: 8px;

  cursor: pointer;
}

.password-toggle:hover {
  background: #f0eaf5;
}

.password-toggle .eye-strike {
  display: none;
}

.password-toggle.revealed .eye-strike {
  display: block;
}

/* =========================================
   3. Return to main website
   ========================================= */

.sidebar-bottom .dashboard-home-link {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 10px;

  background: #312143;
  color: #e9d8f7;

  border: 1px solid #76538e;
  border-radius: 9px;

  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.sidebar-bottom .dashboard-home-link:hover {
  background: #49315f;
}

/* =========================================
   4. Mobile footer and header logos
   ========================================= */

@media (max-width: 780px) {

  /* Header logos: slightly larger */

  .header-logos .university-logo {
    width: 90px;
    height: 48px;
  }

  .header-logos .deanship-logo {
    width: 82px;
    height: 48px;
  }

  /* Footer layout */

  .footer-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-block: 25px;
  }

  .footer-identity {
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 100%;
  }

  .footer-logos {
    justify-content: center;
    gap: 12px;
  }

  .footer-logos img {
    width: min(40vw, 135px);
    height: 54px;
    object-fit: contain;
  }

  .footer-connect {
    align-items: center;
    text-align: center;
    gap: 7px;
  }

  .footer-inner p {
    text-align: center;
  }
}

/* Smaller phones */

@media (max-width: 400px) {

  .header-logos .university-logo {
    width: 70px;
    height: 39px;
  }

  .header-logos .deanship-logo {
    width: 64px;
    height: 39px;
  }
}