:root {
  --orange: #e6701f;
  --orange-dark: #b84f0f;
  --orange-soft: #fff1e5;
  --orange-pale: #fff8f2;
  --ink: #222831;
  --muted: #667085;
  --line: #e9e4df;
  --paper: #fffaf5;
  --white: #fff;
  --shadow: 0 24px 70px rgba(34, 40, 49, .10);
  --shadow-soft: 0 12px 32px rgba(34, 40, 49, .08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 5% 0%, rgba(230,112,31,.14), transparent 30rem),
    linear-gradient(180deg, #fffaf5, #fff 40%, #fffaf5);
  line-height: 1.6;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#app > main { flex: 1 0 auto; }
#app > .site-footer { flex-shrink: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1rem, 5vw, 4.5rem);
  background: rgba(255,250,245,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(233,228,223,.8);
}
.brand, .site-header nav, .admin-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.brand {
  min-width: 0;
  font-weight: 900;
  letter-spacing: -.02em;
}
.brand-mark, .login-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 10px 25px rgba(230,112,31,.18);
}
.brand-mark { width: 2.7rem; height: 2.7rem; }
.login-mark { width: 4.2rem; height: 4.2rem; }
.brand-icon, .avatar-symbol {
  display: block;
}
.brand-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-header nav a,
.nav-button {
  color: var(--muted);
  font-size: .92rem;
  font-weight: 750;
}
.site-header nav a:hover,
.nav-button:hover { color: var(--orange-dark); }
.nav-button {
  border: 0;
  padding: .35rem 0;
  background: transparent;
}
.admin-header .brand { color: var(--ink); }

.hero {
  padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 6vw, 5rem);
  min-height: calc(100vh - 72px);
}
.hero-home {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(300px,.75fr);
  align-items: center;
  gap: 5rem;
}
.eyebrow {
  margin: 0 0 .7rem;
  color: var(--orange-dark);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero h1, .page-hero h1, .tutor-hero h1, .admin-page h1, .admin-login h1 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(3.2rem, 8vw, 6.8rem);
  line-height: .93;
  letter-spacing: -.06em;
}
.hero h1 span { color: var(--orange); }
.hero-text {
  max-width: 45rem;
  color: #505865;
  font-size: clamp(1.05rem,2vw,1.25rem);
  margin: 1.4rem 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-top: 1.5rem;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3.1rem;
  padding: .85rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.primary {
  color: white;
  background: linear-gradient(135deg,var(--orange),#ff9844);
  box-shadow: 0 14px 28px rgba(230,112,31,.22);
}
.secondary {
  background: white;
  border-color: var(--line);
}
.text-link { color: var(--orange-dark); font-weight: 850; }

.hero-art { position: relative; min-height: 480px; }
.orb {
  position: absolute;
  inset: 7% 8%;
  border-radius: 42% 58% 56% 44%;
  background: radial-gradient(circle at 35% 25%,#ffd4b1,#f7a96e 42%,#e6701f);
  opacity: .9;
  transform: rotate(-9deg);
  box-shadow: 0 35px 80px rgba(230,112,31,.2);
}
.floating-card {
  position: absolute;
  width: min(270px,65%);
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 25px 60px rgba(34,40,49,.15);
  backdrop-filter: blur(14px);
}
.floating-card span { color: var(--orange); font-weight: 900; font-size: .7rem; }
.floating-card strong, .floating-card small { display: block; }
.floating-card small { color: var(--muted); margin-top: .2rem; }
.card-one { top: 12%; left: 2%; }
.card-two { top: 43%; right: 0; }
.card-three { bottom: 10%; left: 14%; }

.section {
  padding: clamp(4rem,8vw,7rem) clamp(1rem,6vw,5rem);
}
.courses-section { background: rgba(255,255,255,.7); }
.section-heading { max-width: 50rem; margin-bottom: 2rem; }
.section-heading h2 {
  margin: 0;
  font-size: clamp(2rem,5vw,3.8rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.section-heading.split {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  max-width: none;
}
.search-wrap {
  display: flex;
  align-items: center;
  width: min(380px,100%);
  padding: .2rem .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}
.search-wrap span { font-size: 1.4rem; color: var(--muted); }
.search-wrap input { border: 0; box-shadow: none !important; padding: .75rem; background: transparent; }

.course-grid, .tutor-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1rem;
}
.course-card, .tutor-card, .steps article, .admin-card, .booking-panel, .content-block, .contact-panel {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.course-card {
  min-height: 260px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.course-card:hover, .tutor-card:hover {
  transform: translateY(-4px);
  border-color: #f0c6a6;
  box-shadow: 0 28px 70px rgba(34,40,49,.13);
}
.course-code {
  display: inline-flex;
  width: max-content;
  padding: .3rem .55rem;
  border-radius: 8px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-size: .78rem;
  font-weight: 900;
}
.course-code.large { font-size: .95rem; }
.course-card h3 { margin: .9rem 0 .9rem; font-size: 1.45rem; line-height: 1.15; }
.course-tutors { margin-top: auto; display: grid; gap: .35rem; }
.mini-label {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}
.tutor-names { font-size: .92rem; font-weight: 750; }
.no-tutors { color: var(--muted); font-size: .9rem; }
.card-foot {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.arrow { color: var(--orange); font-size: 1.3rem; }

.how-section { background: #222831; color: white; }
.how-section .eyebrow { color: #ffad70; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.steps article {
  padding: 1.5rem;
  background: #292f38;
  border-color: #3b424c;
  box-shadow: none;
}
.steps span { color: #ffad70; font-weight: 900; }
.steps h3 { font-size: 1.3rem; }
.steps p { color: #b8bec7; }

.page-hero { padding: clamp(4rem,8vw,7rem) clamp(1rem,6vw,5rem) 2rem; }
.back-link { display: inline-block; margin-bottom: 2rem; color: var(--orange-dark); font-weight: 850; }
.page-hero h1 { max-width: 15ch; font-size: clamp(2.8rem,7vw,5.8rem); }
.page-hero > div > p { color: var(--muted); max-width: 50rem; }

.tutor-card {
  position: relative;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  min-width: 0;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.avatar, .profile-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-weight: 900;
  flex: none;
}
.avatar { width: 72px; height: 72px; border-radius: 14px; }
.avatar img, .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-symbol { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.tutor-card-body { min-width: 0; }
.tutor-card h3 { margin: .1rem 0; font-size: 1.15rem; }
.tutor-card p { margin: .3rem 0 .7rem; font-size: .9rem; color: var(--muted); }
.new-badge {
  display: inline-flex;
  padding: .2rem .45rem;
  border-radius: 999px;
  background: #222831;
  color: white;
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.tutor-hero {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(2rem,6vw,5rem);
  align-items: center;
  padding: clamp(4rem,8vw,7rem) clamp(1rem,6vw,5rem) 3rem;
}
.profile-avatar {
  width: 240px;
  height: 300px;
  border-radius: 24px;
}
.profile-avatar .avatar-symbol { width: 110px; height: 110px; stroke-width: 1.5; }
.eyebrow-row { display: flex; gap: .7rem; align-items: center; }
.tutor-hero h1 { font-size: clamp(3rem,7vw,6rem); max-width: 12ch; }
.profile-section {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(300px,.65fr);
  gap: 1rem;
  align-items: start;
}
.profile-main { display: grid; gap: 1rem; }
.content-block { padding: 1.5rem; }
.content-block h2 { font-size: clamp(1.7rem,4vw,2.8rem); line-height: 1.05; }
.content-block p { color: var(--muted); }
.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-list a, .pill-list span, .tag {
  padding: .4rem .65rem;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-weight: 800;
  font-size: .85rem;
}
.schedule-list { display: grid; gap: .25rem; }
.schedule-row {
  display: grid;
  grid-template-columns: minmax(120px,1fr) minmax(140px,1fr) minmax(120px,auto);
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.schedule-row:last-child { border-bottom: 0; }
.schedule-row > div strong, .schedule-row > div span { display: block; }
.schedule-row span { color: var(--muted); font-size: .88rem; }
.schedule-action-wrap { display: flex; justify-content: flex-end; min-width: 0; }
.schedule-action { min-height: 2.45rem; padding: .55rem .8rem; white-space: nowrap; }

.booking-panel, .contact-panel { padding: 1.5rem; }
.booking-panel { position: sticky; top: 6rem; }
.booking-panel h2, .contact-panel h2 { font-size: 2rem; line-height: 1.05; margin: .2rem 0; }
.muted { color: var(--muted); }
.form-row { display: grid; gap: .45rem; margin-bottom: 1rem; }
.form-row label, .admin-card label { font-weight: 800; }
.form-row label span, .admin-card label span { color: var(--muted); font-size: .75rem; font-weight: 600; }
input, select, textarea {
  width: 100%;
  padding: .85rem .9rem;
  border: 1px solid #d9dde5;
  border-radius: 11px;
  background: white;
  color: var(--ink);
  outline: 0;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(230,112,31,.13);
}
textarea { resize: vertical; }
.submit-button { width: 100%; }
.form-message { min-height: 1.4rem; color: var(--orange-dark); font-weight: 750; }
.success-box {
  padding: 1.2rem;
  border-radius: 14px;
  background: var(--orange-soft);
  border: 1px solid #f2cfb2;
}
.success-box h3 { font-size: 1.5rem; margin: .2rem 0; }
.success-box dl { display: grid; grid-template-columns: 100px 1fr; gap: .4rem; margin: 1rem 0; }
.success-box dt { color: var(--muted); font-weight: 700; }
.success-box dd { margin: 0; font-weight: 700; }

.contact-panel { position: sticky; top: 6rem; grid-column: 2; }
.contact-panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.icon-button {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; background: white;
  color: var(--muted); font-size: 1.4rem;
}
.contact-details { display: grid; gap: .65rem; margin-top: 1rem; }
.contact-item {
  display: grid; gap: .15rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--orange-pale);
}
.contact-item span { color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.contact-item strong { overflow-wrap: anywhere; }

.page-state {
  min-height: 60vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  text-align: center;
  padding: 3rem;
}
.spinner {
  width: 34px; height: 34px; border: 3px solid #eee;
  border-top-color: var(--orange); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state {
  text-align: center;
  padding: 3rem;
  border: 1px dashed #ddd5ce;
  border-radius: 16px;
  color: var(--muted);
  grid-column: 1 / -1;
}
.empty-icon {
  margin: auto; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; background: var(--orange-soft); color: var(--orange);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.5rem clamp(1rem,6vw,5rem);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--muted);
}
.footer-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.footer-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden; }
.footer-mark .brand-icon { width: 100%; height: 100%; }

.admin-page {
  padding: clamp(3rem,6vw,5rem) clamp(1rem,5vw,4.5rem);
}
.admin-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 2rem;
}
.admin-heading h1 { max-width: none; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.stat-card {
  position: relative;
  min-height: 190px;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-soft);
}
.stat-card::after {
  content: "";
  position: absolute;
  width: 140px; height: 140px;
  right: -65px; bottom: -75px;
  border-radius: 50%;
  background: var(--orange-soft);
}
.stat-card.stat-primary {
  color: white;
  background: #222831;
  border-color: #222831;
}
.stat-card.stat-primary::after { background: rgba(255,255,255,.08); }
.stat-icon {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  margin-bottom: 1.4rem; border-radius: 11px;
  color: var(--orange-dark); background: var(--orange-soft);
  font-weight: 900;
}
.stat-primary .stat-icon { color: #ffad70; background: rgba(255,255,255,.09); }
.stat-card > span { display: block; font-size: clamp(2.3rem,4vw,3.6rem); font-weight: 900; line-height: .95; letter-spacing: -.05em; }
.stat-card p { margin: .6rem 0 .15rem; font-weight: 850; }
.stat-card small { color: var(--muted); }
.stat-primary small { color: #b8bec7; }

.admin-overview-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1rem;
}
.admin-feature-card, .admin-note-card { min-height: 260px; padding: 1.7rem; }
.admin-feature-card h2 { max-width: 12ch; font-size: clamp(2rem,4vw,3.4rem); line-height: 1; letter-spacing: -.04em; margin: .25rem 0 1rem; }
.admin-feature-card p:not(.eyebrow), .admin-note-card p:not(.eyebrow) { color: var(--muted); }
.admin-note-card { display: flex; gap: 1rem; align-items: flex-start; }
.admin-note-card h3 { margin: .15rem 0 .4rem; font-size: 1.3rem; }
.admin-note-icon { display: grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 12px; color: var(--orange-dark); background: var(--orange-soft); }

.admin-card { padding: 1.3rem; margin-bottom: 1rem; }
.admin-card-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 1rem; }
.admin-card-heading h2 { margin: 0; font-size: 1.7rem; }
.admin-list { display: grid; }
.admin-list-row {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.admin-list-row:last-child { border-bottom: 0; }
.admin-list-row strong, .admin-list-row span { display: block; }
.admin-list-row > div:last-child { display: flex; align-items: center; gap: .6rem; }
.admin-list-row > div:first-child span { color: var(--muted); font-size: .86rem; }

.status {
  display: inline-flex !important; width: max-content; padding: .25rem .55rem;
  border-radius: 999px; font-size: .7rem !important; font-weight: 900;
}
.status.active { background: #e9f7ed; color: #27723d; }
.status.inactive { background: #f4f4f4; color: #73777e; }

.admin-table { overflow: auto; }
.table-head, .table-row {
  min-width: 760px;
  display: grid;
  grid-template-columns: 1.3fr 1fr .8fr .9fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}
.table-head { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.table-row > div span:not(.tag), .table-row > div strong { display: block; }
.table-row > div span:not(.tag) { color: var(--muted); font-size: .85rem; }
.row-actions, .course-row-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row-actions a, .row-actions button, .small-action {
  border: 0; background: transparent; color: var(--orange-dark); font-weight: 800; font-size: .82rem;
}
.danger { color: #a23b32 !important; }
.inline-add {
  display: grid;
  grid-template-columns: .7fr 1.2fr auto;
  gap: .7rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .5rem;
}
.editor-form { max-width: 960px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid.three { grid-template-columns: repeat(3,1fr); }
.checkbox-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .6rem; }
.check {
  display: flex; gap: .65rem; align-items: center; padding: .75rem;
  border: 1px solid var(--line); border-radius: 10px; background: white;
}
.check input, .switch-row input { width: auto; }
.switch-row { display: flex !important; gap: .6rem; align-items: center; }
.editor-label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .7rem; }
.button.small { min-height: 2.4rem; padding: .5rem .75rem; font-size: .8rem; }
.session-editor {
  position: relative;
  padding: 1rem;
  margin-bottom: .7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffaf5;
}
.session-index { font-weight: 900; margin-bottom: .6rem; }
.remove-session {
  position: absolute; top: .7rem; right: .7rem;
  border: 0; background: transparent; color: #a23b32; font-weight: 800;
}
.admin-login {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: 3rem 1rem;
}
.admin-login-card {
  width: min(440px,100%);
  padding: 2.2rem;
  border-radius: 22px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.admin-login-card .login-mark { margin-bottom: 1.4rem; }
.admin-login-card h1 { font-size: clamp(2.7rem,8vw,4.2rem); max-width: none; }
.admin-login-card > p:not(.eyebrow) { color: var(--muted); }
.admin-login-card form { margin-top: 1.5rem; }
.admin-login-card label { display: grid; gap: .5rem; font-weight: 850; }
.admin-login-card button { width: 100%; margin-top: .6rem; }

@media (max-width: 1100px) {
  .course-grid, .tutor-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-home, .profile-section, .tutor-hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 420px; }
  .booking-panel, .contact-panel { position: static; grid-column: auto; }
  .profile-avatar { width: min(240px,100%); height: 280px; }
  .section-heading.split { align-items: stretch; flex-direction: column; }
  .search-wrap { width: 100%; }
}
@media (max-width: 620px) {
  .site-header { align-items: flex-start; }
  .site-header nav { gap: .8rem; }
  .admin-nav { flex-wrap: wrap; justify-content: flex-end; }
  .hero { padding-top: 3.5rem; }
  .hero h1, .admin-heading h1 { font-size: 3.1rem; }
  .hero-art { min-height: 360px; }
  .floating-card { width: 72%; }
  .course-grid, .tutor-grid, .steps, .stats-grid, .form-grid, .form-grid.three, .checkbox-grid { grid-template-columns: 1fr; }
  .schedule-row { grid-template-columns: 1fr; gap: .55rem; }
  .schedule-action-wrap { justify-content: flex-start; }
  .inline-add { grid-template-columns: 1fr; }
  .admin-heading { align-items: flex-start; flex-direction: column; }
  .admin-heading .button { width: 100%; }
  .admin-list-row { align-items: flex-start; flex-direction: column; }
  .admin-list-row > div:last-child { align-items: flex-start; flex-wrap: wrap; }
  .course-row-actions { justify-content: flex-start; }
  .site-footer { flex-direction: column; align-items: flex-start; }
  .hero-actions .button { width: 100%; }
  .tutor-hero .hero-actions { align-items: stretch; }
}

/* =========================
   Admin security / branding
========================= */
.admin-login {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: 7rem 1rem 4rem;
}

.admin-login-brand {
  position: absolute;
  top: 1.25rem;
  left: clamp(1rem, 5vw, 4.5rem);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.02em;
}

.admin-login-brand .brand-mark {
  width: 2.7rem;
  height: 2.7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(230,112,31,.16);
}

/* Keep the supplied circular logo perfectly proportional at every size. */
.brand-mark,
.footer-mark,
.login-mark {
  aspect-ratio: 1 / 1;
}

.brand-mark .brand-icon,
.footer-mark .brand-icon,
.admin-login-brand .brand-icon {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.admin-login-card {
  position: relative;
  width: min(460px,100%);
  padding: 2.25rem;
  text-align: left;
}

.security-visual {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  margin: 0 auto 1.35rem;
  border: 1px solid rgba(230,112,31,.18);
  border-radius: 30px;
  background: linear-gradient(145deg, #fff8f2, #fff);
  overflow: hidden;
}

.security-visual svg {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
}

.security-glow {
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--orange-soft);
  filter: blur(1px);
}

.security-shield {
  fill: var(--orange);
  opacity: .95;
}

.security-lock {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.security-visual rect.security-lock {
  fill: #fff;
  stroke: none;
}

.security-visual circle {
  fill: var(--orange);
}

.back-to-site {
  display: block;
  width: max-content;
  margin: 1.2rem auto 0;
  color: var(--orange-dark);
  font-weight: 800;
  font-size: .9rem;
}

.back-to-site:hover { text-decoration: underline; }

/* Admin pages intentionally use the logo only in the top-left header. */
.admin-header .brand-mark {
  width: 2.7rem;
  height: 2.7rem;
  aspect-ratio: 1 / 1;
}

@media (max-width: 600px) {
  .admin-login {
    min-height: 74vh;
    padding-top: 6.5rem;
  }

  .admin-login-brand {
    top: 1rem;
    left: 1rem;
  }

  .admin-login-card { padding: 1.6rem; }
}


/* =========================================================
   Mobile responsive improvements
   ========================================================= */

/* Prevent long text, controls, and grids from creating horizontal overflow. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

@media (max-width: 900px) {
  .site-header {
    padding: .85rem 1.25rem;
  }

  .hero-home {
    gap: 2.5rem;
  }

  .hero-art {
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .tutor-hero {
    gap: 2rem;
  }

  .profile-avatar {
    margin-inline: auto;
  }

  .profile-section {
    width: 100%;
  }

  .booking-panel,
  .contact-panel {
    width: 100%;
  }

  .admin-page {
    padding-inline: 1.25rem;
  }

  .admin-overview-grid {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  /* Header */
  .site-header {
    padding: .75rem 1rem;
    gap: .75rem;
  }

  .brand {
    gap: .55rem;
    font-size: .95rem;
  }

  .brand-mark {
    width: 2.35rem;
    height: 2.35rem;
  }

  .site-header nav {
    gap: .65rem;
  }

  .site-header nav a,
  .nav-button {
    font-size: .8rem;
  }

  .admin-nav {
    width: 100%;
    gap: .45rem .8rem;
  }

  /* General page spacing */
  .hero,
  .section,
  .page-hero,
  .tutor-hero,
  .admin-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
    min-height: auto;
  }

  .section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .page-hero {
    padding-top: 3rem;
  }

  /* Typography */
  .hero h1,
  .admin-heading h1 {
    font-size: clamp(2.55rem, 13vw, 3.4rem);
    line-height: .95;
  }

  .page-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.4rem);
  }

  .tutor-hero h1 {
    font-size: clamp(2.5rem, 12vw, 3.7rem);
  }

  .hero-text {
    font-size: 1rem;
    line-height: 1.55;
  }

  .section-heading h2 {
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }

  /* Buttons */
  .hero-actions {
    width: 100%;
  }

  .hero-actions .button,
  .admin-heading .button {
    width: 100%;
  }

  .button {
    min-height: 3rem;
  }

  /* Hero artwork */
  .hero-art {
    min-height: 330px;
    width: 100%;
  }

  .orb {
    inset: 8% 4%;
  }

  .floating-card {
    width: min(235px, 72%);
    padding: .85rem .95rem;
    font-size: .9rem;
  }

  .card-one {
    top: 8%;
    left: 0;
  }

  .card-two {
    top: 42%;
    right: 0;
  }

  .card-three {
    bottom: 7%;
    left: 8%;
  }

  /* Search */
  .search-wrap {
    width: 100%;
  }

  /* Cards */
  .course-card {
    min-height: 220px;
    padding: 1.2rem;
  }

  .course-card h3 {
    font-size: 1.3rem;
  }

  .tutor-card {
    padding: .9rem;
    gap: .8rem;
  }

  .avatar {
    width: 58px;
    height: 58px;
    border-radius: 12px;
  }

  .avatar-symbol {
    width: 34px;
    height: 34px;
  }

  .tutor-card h3 {
    font-size: 1.05rem;
  }

  .tutor-card p {
    font-size: .84rem;
    overflow-wrap: anywhere;
  }

  .card-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Tutor profile */
  .tutor-hero {
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .profile-avatar {
    width: min(100%, 220px);
    height: 260px;
  }

  .profile-avatar .avatar-symbol {
    width: 90px;
    height: 90px;
  }

  .eyebrow-row {
    flex-wrap: wrap;
  }

  .content-block,
  .booking-panel,
  .contact-panel {
    padding: 1.15rem;
  }

  .booking-panel h2,
  .contact-panel h2 {
    font-size: 1.7rem;
  }

  /* Schedule */
  .schedule-row {
    padding: .9rem 0;
  }

  .schedule-action {
    width: 100%;
  }

  .schedule-action-wrap {
    width: 100%;
  }

  /* Forms */
  .form-row {
    margin-bottom: .85rem;
  }

  input,
  select,
  textarea {
    font-size: 16px; /* prevents iOS Safari auto-zoom */
    min-height: 46px;
  }

  textarea {
    min-height: 110px;
  }

  .success-box dl {
    grid-template-columns: 1fr;
    gap: .15rem;
  }

  .success-box dd {
    margin-bottom: .55rem;
    overflow-wrap: anywhere;
  }

  /* Admin */
  .admin-page {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .admin-heading {
    margin-bottom: 1.35rem;
  }

  .stats-grid {
    gap: .75rem;
  }

  .stat-card {
    min-height: 145px;
    padding: 1.1rem;
  }

  .stat-icon {
    margin-bottom: .9rem;
  }

  .stat-card > span {
    font-size: 2.5rem;
  }

  .admin-feature-card,
  .admin-note-card {
    min-height: auto;
    padding: 1.25rem;
  }

  .admin-feature-card h2 {
    font-size: 2.15rem;
  }

  .admin-note-card {
    flex-direction: column;
  }

  .admin-card {
    padding: 1rem;
  }

  .admin-card-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .7rem;
  }

  .admin-card-heading h2 {
    font-size: 1.45rem;
  }

  .admin-list-row {
    padding: .9rem 0;
  }

  /* Keep tables usable on phones: horizontal scroll instead of crushing columns. */
  .admin-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-head,
  .table-row {
    min-width: 720px;
  }

  .inline-add {
    gap: .6rem;
  }

  .editor-form {
    width: 100%;
  }

  .session-editor {
    padding: .9rem;
    padding-top: 1.1rem;
  }

  .session-editor .form-grid {
    gap: .7rem;
  }

  .remove-session {
    top: .55rem;
    right: .55rem;
  }

  /* Login */
  .admin-login {
    min-height: calc(100vh - 70px);
    padding: 6rem .9rem 2.5rem;
  }

  .admin-login-brand {
    top: .8rem;
    left: 1rem;
    font-size: .9rem;
  }

  .admin-login-brand .brand-mark {
    width: 2.35rem;
    height: 2.35rem;
  }

  .admin-login-card {
    width: 100%;
    padding: 1.35rem;
    border-radius: 18px;
  }

  .security-visual {
    width: 92px;
    height: 92px;
    border-radius: 24px;
  }

  .security-visual svg {
    width: 60px;
    height: 60px;
  }

  .admin-login-card h1 {
    font-size: clamp(2.35rem, 12vw, 3.2rem);
  }

  /* Footer */
  .site-footer {
    padding: 1.25rem 1rem;
    gap: .8rem;
  }

  .footer-brand {
    font-size: .9rem;
  }
}

@media (max-width: 380px) {
  .site-header {
    padding-inline: .75rem;
  }

  .brand {
    font-size: .85rem;
  }

  .brand-mark {
    width: 2.1rem;
    height: 2.1rem;
  }

  .site-header nav {
    gap: .45rem;
  }

  .site-header nav a,
  .nav-button {
    font-size: .75rem;
  }

  .hero,
  .section,
  .page-hero,
  .tutor-hero,
  .admin-page {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .hero h1,
  .admin-heading h1,
  .page-hero h1,
  .tutor-hero h1 {
    font-size: 2.45rem;
  }

  .floating-card {
    width: 76%;
    font-size: .82rem;
  }

  .profile-avatar {
    height: 230px;
  }

  .admin-login-card {
    padding: 1.15rem;
  }
}

/* =========================================================
   Final mobile layout fixes
   ========================================================= */
@media (max-width: 620px) {
  /* Keep the public navigation inside narrow phone widths. */
  .site-header {
    flex-wrap: wrap;
    align-items: center;
  }

  .site-header nav {
    margin-left: auto;
  }

  /* The desktop hero artwork uses absolute cards. On phones they are
     intentionally stacked so cards can never overlap or clip each other. */
  .hero-art {
    min-height: 0;
    height: auto;
    padding: 1rem 0 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
  }

  .hero-art .orb {
    inset: 7% 7% 8%;
    z-index: 0;
  }

  .hero-art .floating-card {
    position: relative;
    inset: auto !important;
    width: calc(100% - 1rem);
    max-width: 290px;
    min-height: 0;
    padding: .95rem 1rem;
    z-index: 1;
  }

  .hero-art .card-one {
    align-self: flex-start;
  }

  .hero-art .card-two {
    align-self: flex-end;
  }

  .hero-art .card-three {
    align-self: flex-start;
    margin-left: .8rem;
  }

  .hero-art .floating-card small {
    line-height: 1.4;
  }

  /* Give the mobile hero enough breathing room without creating a giant
     empty viewport-sized section. */
  .hero-home {
    gap: 1.25rem;
  }

  .hero-actions {
    margin-top: 1.25rem;
  }
}

@media (max-width: 380px) {
  .site-header nav {
    gap: .4rem;
  }

  .site-header nav a,
  .nav-button {
    font-size: .72rem;
  }

  .hero-art .floating-card {
    width: calc(100% - .5rem);
    padding: .85rem .9rem;
  }

  .hero-art .card-three {
    margin-left: .4rem;
  }
}


/* =========================================================
   Search, meeting access, and alignment refinements
   ========================================================= */

/* Filtering uses a class instead of the HTML hidden attribute so the
   card/table layout cannot re-appear because of display rules. */
.search-hidden {
  display: none !important;
}

.search-empty {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px dashed #ddd5ce;
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  color: var(--muted);
  font-weight: 750;
  text-align: center;
}

.admin-search-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.admin-search {
  width: min(440px, 100%);
}

/* Course/tutor tags never split their text in the middle. */
.tag {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Keep the public schedule's access column stable whether it contains a
   Zoom button, a Meeting ID, or nothing. */
.schedule-row {
  grid-template-columns: minmax(150px, 1fr) minmax(160px, 1fr) minmax(185px, 210px);
}

.schedule-action-wrap {
  width: 100%;
}

.schedule-action-wrap > .schedule-action {
  width: 100%;
}

.meeting-id-display {
  width: 100%;
  min-height: 2.45rem;
  padding: .55rem .8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .05rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.meeting-id-display span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.meeting-id-display strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .86rem;
  line-height: 1.25;
  letter-spacing: .01em;
}

.meeting-id-display.compact {
  width: auto;
  min-width: 180px;
}

.session-editor {
  padding: 1.15rem;
}

.session-basics-grid {
  align-items: start;
}

.online-access-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: .05rem;
}

.online-access-fields .form-row {
  margin-bottom: .2rem;
}

.session-access-note {
  margin-top: .15rem;
  padding: .75rem .85rem;
  border-radius: 10px;
  background: rgba(230,112,31,.06);
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 900px) {
  .schedule-row {
    grid-template-columns: minmax(130px, 1fr) minmax(140px, 1fr) minmax(170px, 200px);
  }

  .admin-search-row {
    justify-content: stretch;
  }

  .admin-search {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .schedule-row {
    grid-template-columns: 1fr;
  }

  .schedule-action-wrap {
    justify-content: stretch;
  }

  .schedule-action-wrap > .schedule-action,
  .meeting-id-display {
    width: 100%;
  }

  .meeting-id-display.compact {
    min-width: 0;
    width: 100%;
  }

  .online-access-fields {
    grid-template-columns: 1fr;
  }

  .session-editor {
    padding: 1rem;
  }
}