:root {
  --primary: #7a1f2b;
  --primary-dark: #5c1620;
  --bg: #f5f5f7;
  --border: #ddd;
  --text: #222;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--text); }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.topbar { background: var(--primary); color: #fff; }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
.topbar a { color: #fff; text-decoration: none; margin-left: 16px; }
.brand { font-weight: 700; font-size: 18px; margin-left: 0 !important; }
.footer { text-align: center; padding: 20px; color: #888; font-size: 13px; }

.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.alert-error { background: #fdecea; color: #611a15; border: 1px solid #f5c6cb; }
.alert-success { background: #e6f6ea; color: #1e4620; border: 1px solid #c3e6cb; }
.alert-info { background: #e8f0fe; color: #1a3d7c; border: 1px solid #b6d4fe; }

.landing-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; margin-top: 20px; }
@media (max-width: 900px) { .landing-grid { grid-template-columns: 1fr; } }

.carousel { position: relative; overflow: hidden; border-radius: 10px; background: #000; aspect-ratio: 16/9; }
.carousel a {
  position: absolute;
  inset: 0;
  display: none;
  cursor: pointer;
}
.carousel a.active { display: block; }
.carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.carousel-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.55); color: #fff; padding: 10px 14px; font-size: 14px; }
.carousel-dots { text-align: center; margin-top: 10px; }
.carousel-dots span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ccc; margin: 0 4px; cursor: pointer; }
.carousel-dots span.active { background: var(--primary); }

/* ---- Full-screen landing page (breaks out of .container's max-width/padding) ---- */
/* Auto-fit: body becomes a column flexbox (topbar / main / footer), main grows to
   fill whatever space is left under the topbar - no hardcoded pixel guess needed. */
body.landing-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.landing-page .container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
body.landing-page .landing-fullscreen {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.landing-fullscreen {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.landing-grid.fullscreen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 0;
  flex: 1;
  min-height: 500px; /* floor so it never collapses if content is short */
}
@media (max-width: 900px) {
  .landing-grid.fullscreen { grid-template-columns: 1fr; min-height: auto; }
}

.landing-carousel-col { position: relative; }
.landing-grid.fullscreen .carousel {
  border-radius: 0;
  aspect-ratio: unset;
  height: 100%;
  min-height: 320px;
}
@media (max-width: 900px) {
  .landing-grid.fullscreen .carousel { height: 60vh; }
}
.landing-grid.fullscreen .carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin-top: 0;
}
.landing-grid.fullscreen .carousel-dots span { background: rgba(255,255,255,.6); }
.landing-grid.fullscreen .carousel-dots span.active { background: #fff; }

.landing-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 40px;
}
.landing-auth-inner { width: 100%; max-width: 380px; }

.panel { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tabs button { background: none; border: none; padding: 10px 16px; cursor: pointer; font-size: 14px; }
.tabs button.active { border-bottom: 3px solid var(--primary); font-weight: 600; color: var(--primary); }

form label { display: block; margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
form input[type=text], form input[type=email], form input[type=password], form input[type=number],
form input[type=tel], form input[type=date], form select, form textarea, form input[type=file] {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
.btn { display: inline-block; background: var(--primary); color: #fff; border: none; padding: 10px 20px;
  border-radius: 6px; cursor: pointer; font-size: 14px; text-decoration: none; }
.btn:hover { background: var(--primary-dark); }
.btn-secondary { background: #666; }
.btn-outline { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.link { color: var(--primary); text-decoration: none; }
.link:hover { text-decoration: underline; }
.small { font-size: 13px; color: #666; }

table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { border: 1px solid var(--border); padding: 8px 10px; font-size: 14px; text-align: left; }
table.data th { background: #f0f0f2; }

.status-badge { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.status-draft { background: #eee; color: #555; }
.status-pending_payment, .status-under_review { background: #fff3cd; color: #7a5b00; }
.status-paid, .status-submitted { background: #d9edf7; color: #1b5876; }
.status-approved { background: #d4edda; color: #1e4620; }
.status-rejected, .status-resubmit_required { background: #f8d7da; color: #611a15; }