:root {
  --cloud-night: #07121f;
  --cloud-indigo: #111b35;
  --cloud-stone: #244451;
  --cloud-moon: #eee5ce;
  --cloud-gold: #ad8b55;
  --cloud-paper: #eeeae1;
  --cloud-card: rgba(255,255,255,.68);
  --cloud-ink: #19201f;
  --cloud-muted: #6f7672;
  --cloud-line: rgba(33,47,45,.13);
  --brand: #1d5b55;
  --brand-dark: #164b47;
  --brand-soft: #e2ece7;
  --ink: var(--cloud-ink);
  --muted: var(--cloud-muted);
  --line: var(--cloud-line);
  --soft: rgba(228,229,222,.62);
  --card: #f8f5ee;
  --shadow: 0 24px 70px rgba(5,12,19,.15);
}

body.app-page {
  min-height: 100vh;
  color: var(--cloud-ink);
  background:
    radial-gradient(circle at 76% 145px,rgba(55,88,98,.25),transparent 250px),
    linear-gradient(to bottom,var(--cloud-night),var(--cloud-indigo) 330px,var(--cloud-paper) 331px);
  background-attachment: fixed;
}

.app-page .topbar {
  color: #e9e5d8;
  border-bottom-color: rgba(255,255,255,.08);
  background: rgba(7,18,31,.88);
  box-shadow: none;
  backdrop-filter: blur(16px);
}
.app-page .topbar .brand,
.app-page .topbar .topnav a,
.app-page .topbar .text-button { color: inherit; }
.app-page .topbar .brand small,
.app-page .topbar .user-copy small { color: rgba(235,231,217,.48); }
.app-page .topbar .brand-mark {
  color: #15202e;
  background: linear-gradient(145deg,#d8c493,#9b7948);
}
.app-page .topbar .topnav a:hover,
.app-page .topbar .topnav a.active {
  color: #f3ead4;
  background: rgba(255,255,255,.08);
}
.app-page .topbar .avatar { color: #d8c491; background: rgba(255,255,255,.08); }

.app-page .app-shell {
  position: relative;
  width: min(1180px,calc(100% - 40px));
  padding-top: 0;
}
.app-page .app-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 18px;
  right: 4%;
  width: 210px;
  aspect-ratio: 1;
  border: 1px solid rgba(224,204,157,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(224,204,157,.018),0 0 70px rgba(205,190,150,.035);
  background: radial-gradient(circle,rgba(229,218,188,.035),transparent 64%);
  pointer-events: none;
}
.app-page .page-heading {
  min-height: 245px;
  margin: 0;
  padding: 42px 10px 58px;
  color: var(--cloud-moon);
}
.app-page .page-heading > div { max-width: 680px; }
.app-page .page-heading .eyebrow {
  color: #bca06a;
  font-size: 9px;
  letter-spacing: .18em;
}
.app-page .page-heading h1 {
  margin: 8px 0 8px;
  color: #f1ead9;
  font-size: clamp(34px,5vw,56px);
  font-weight: 700;
  letter-spacing: -.05em;
}
.app-page .page-heading p {
  color: rgba(237,232,217,.52);
  font-size: 13px;
  line-height: 1.75;
}
.app-page .page-heading > .btn-secondary {
  color: #f0e5ca;
  border-color: rgba(225,209,170,.34);
  background: rgba(255,255,255,.08);
}

.app-page .content-panel,
.app-page .admin-panel,
.app-page .metric-grid article,
.app-page .billing-summary,
.app-page .ticket-list-card,
.app-page .ticket-summary-card,
.app-page .announcement-history-card,
.app-page .ticket-filter {
  color: var(--cloud-ink);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 18px;
  background: var(--cloud-card);
  box-shadow: 0 14px 42px rgba(15,24,29,.055);
  backdrop-filter: blur(12px);
}
.app-page .content-panel,
.app-page .admin-panel { padding: 23px; }
.app-page .panel-title h2 { color: var(--cloud-ink); }
.app-page .panel-title p { color: var(--cloud-muted); }
.app-page .eyebrow { color: #8d7142; }
.app-page .btn { border-radius: 10px; box-shadow: none; }
.app-page .btn-primary { color: #fff; background: var(--brand); }
.app-page .btn-primary:hover { background: var(--brand-dark); }
.app-page .btn-secondary { color: #3f4b48; border-color: var(--cloud-line); background: rgba(255,255,255,.62); }
.app-page input,
.app-page select,
.app-page textarea {
  color: var(--cloud-ink);
  border-color: rgba(45,62,59,.17);
  border-radius: 10px;
  background: rgba(255,255,255,.74);
}
.app-page input:focus,
.app-page select:focus,
.app-page textarea:focus {
  border-color: #778f83;
  box-shadow: 0 0 0 3px rgba(61,100,91,.1);
}
.app-page .status-pill { color: #315f55; background: #dfeae4; }
.app-page .status-pill.pending { color: #806333; background: #eee3ca; }
.app-page .status-pill.fail,
.app-page .status-pill.off { color: #8c4f48; background: #f0ded8; }
.app-page table th { color: #777f7a; }
.app-page table th,
.app-page table td { border-bottom-color: rgba(35,52,49,.09); }
.app-page .loading-state,
.app-page .empty-state { border-color: rgba(45,62,59,.16); background: rgba(255,255,255,.32); }

/* Billing */
.billing-page .billing-summary {
  margin-top: -35px;
  padding: 25px;
  border-color: rgba(198,179,132,.28);
  background: rgba(249,245,234,.94);
}
.billing-page .billing-summary.active { border-color: rgba(72,116,102,.28); background: rgba(240,246,240,.94); }
.billing-page .billing-summary-values span { border-color: var(--cloud-line); background: rgba(229,229,220,.6); }
.billing-page .billing-summary-values strong,
.billing-page .plan-price b { color: #785f35; }
.billing-page .billing-order-layout { margin-top: 22px; }
.billing-page .plan-card,
.billing-page .payment-method {
  border: 1px solid var(--cloud-line);
  border-radius: 14px;
  background: rgba(255,255,255,.48);
}
.billing-page .plan-card.selected,
.billing-page .payment-method.selected {
  border-color: #8d7b53;
  background: #f4efe2;
  box-shadow: inset 0 0 0 1px rgba(141,123,83,.35);
}

/* Tickets and announcements */
.ticket-page .ticket-summary-card { margin-top: -34px; background: rgba(249,246,238,.94); }
.ticket-page .ticket-create-panel,
.ticket-page .ticket-filter { margin-top: -34px; }
.ticket-page .ticket-list-section { margin-top: 25px; }
.ticket-page .ticket-list-card { background: rgba(255,255,255,.58); }
.ticket-page .ticket-list-card:hover { border-color: rgba(130,111,70,.35); background: rgba(255,255,255,.76); }
.ticket-page .ticket-message,
.ticket-page .ticket-message.admin-message { background: rgba(225,228,220,.55); }
.ticket-page .ticket-message.admin-message { border-left-color: #8c774b; background: #eee8d9; }
.announcement-page .announcement-history-list,
.announcement-page .announcement-history-empty { margin-top: -34px; }
.announcement-page .announcement-history-card.latest { border-color: rgba(152,127,75,.33); }
.announcement-page .announcement-current-label { color: #836b3e; }

/* Admin */
.admin-page .metric-grid { position: relative; margin-top: -35px; }
.admin-page .metric-grid article { min-height: 118px; padding: 18px; background: rgba(249,246,238,.94); }
.admin-page .metric-grid strong { color: #315d54; }
.admin-page .admin-tabs {
  position: sticky;
  top: 72px;
  z-index: 8;
  border-color: rgba(42,57,54,.12);
  background: rgba(238,234,225,.92);
  backdrop-filter: blur(15px);
}
.admin-page .admin-tabs button.active { color: #fff; background: #1d514c; }
.admin-page .school-card,
.admin-page .log-entry { border-color: var(--cloud-line); background: rgba(255,255,255,.38); }
.admin-page .modal { color: var(--cloud-ink); background: #f4f0e7; }

/* School login tool */
.app-page .jwsession-tool-panel { margin-top: -34px; }
.app-page .jwsession-login-card,
.app-page .jwsession-result-card {
  border-color: var(--cloud-line);
  border-radius: 16px;
  background: rgba(255,255,255,.45);
}

/* Authentication and error pages */
body.auth-page {
  min-height: 100vh;
  color: var(--cloud-moon);
  background:
    radial-gradient(circle at 72% 28%,rgba(63,98,107,.3),transparent 27%),
    linear-gradient(145deg,#07121f,#111a31 68%,#132633);
}
body.auth-page::before,
body.auth-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
body.auth-page::before {
  top: 12%;
  right: 9%;
  width: min(480px,55vw);
  aspect-ratio: 1;
  border: 1px solid rgba(224,204,157,.13);
  box-shadow: 0 0 0 45px rgba(224,204,157,.018),0 0 90px rgba(205,190,150,.04);
}
body.auth-page::after {
  left: 7%;
  bottom: 9%;
  width: 240px;
  height: 100px;
  opacity: .16;
  background: radial-gradient(ellipse at center,rgba(60,95,101,.75),transparent 68%);
  filter: blur(18px);
}
.auth-page .auth-layout { position: relative; z-index: 1; background: transparent; }
.auth-page .auth-brand { color: #f0e9d8; }
.auth-page .auth-brand small { color: rgba(237,232,217,.48); }
.auth-page .auth-brand .brand-mark { color: #15202e; background: linear-gradient(145deg,#d8c493,#9b7948); }
.auth-page .auth-card {
  color: var(--cloud-ink);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  background: rgba(246,242,232,.94);
  box-shadow: 0 28px 85px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.auth-page .auth-copy .eyebrow { color: #8c7142; }
.auth-page .auth-copy p { color: var(--cloud-muted); }
.auth-page .auth-note { color: rgba(237,232,217,.5); }
.auth-page .btn-primary { color: #fff; background: #1d514c; }
.auth-page input { border-color: rgba(45,62,59,.18); background: rgba(255,255,255,.75); }
.auth-page .error-code { color: #a18550; }

/* The school-login iframe is part of the same workspace, without the topbar. */
body.embedded-login {
  color: var(--cloud-ink);
  background: var(--cloud-paper);
}
.embedded-login .jwsession-shell { width: 100%; padding: 12px; }
.embedded-login .page-heading { display: none; }
.embedded-login .jwsession-tool-panel {
  padding: 15px;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  box-shadow: none;
}
.embedded-login .jwsession-login-card,
.embedded-login .jwsession-result-card {
  border-color: var(--cloud-line);
  border-radius: 14px;
  background: rgba(255,255,255,.4);
}
.embedded-login .eyebrow { color: #8d7142; }
.embedded-login input,
.embedded-login select,
.embedded-login textarea { border-color: rgba(45,62,59,.17); background: rgba(255,255,255,.76); }
.embedded-login .btn-primary { color: #fff; background: #1d514c; }
.embedded-login .btn-secondary { color: #3f4b48; border-color: var(--cloud-line); background: rgba(255,255,255,.65); }
.embedded-login .jwsession-status { border-color: rgba(45,62,59,.14); background: rgba(228,229,222,.58); }

.app-page .announcement-dialog::backdrop { background: rgba(3,9,15,.68); backdrop-filter: blur(4px); }
.app-page .announcement-card { border-color: rgba(255,255,255,.6); background: #f4f0e7; }
.app-page .announcement-badge { background: #1d514c; }

@media (max-width: 760px) {
  body.app-page { background: linear-gradient(to bottom,var(--cloud-night),var(--cloud-indigo) 280px,var(--cloud-paper) 281px); background-attachment: scroll; }
  .app-page .topbar { background: rgba(7,18,31,.95); }
  .app-page .mobile-bottom-nav {
    color: #d9d8cf;
    border-top-color: rgba(255,255,255,.08);
    background: rgba(7,18,31,.95);
    box-shadow: none;
    backdrop-filter: blur(15px);
  }
  .app-page .mobile-bottom-nav a,
  .app-page .mobile-bottom-nav button { color: rgba(232,231,220,.5); }
  .app-page .mobile-bottom-nav [aria-current="page"],
  .app-page .mobile-bottom-nav .active { color: #d8c18b; background: rgba(218,198,151,.08); }
  .app-page .app-shell { width: calc(100% - 20px); padding-bottom: 88px; }
  .app-page .app-shell::before { top: 25px; right: -55px; width: 170px; }
  .app-page .page-heading { min-height: 205px; padding: 28px 5px 48px; align-items: flex-start; }
  .app-page .page-heading h1 { font-size: 35px; }
  .app-page .page-heading p { max-width: 320px; font-size: 11px; }
  .app-page .page-heading > .btn { min-height: 38px; padding: 7px 11px; font-size: 11px; }
  .app-page .content-panel,
  .app-page .admin-panel { padding: 16px; border-radius: 15px; }
  .billing-page .billing-summary,
  .ticket-page .ticket-summary-card,
  .ticket-page .ticket-create-panel,
  .ticket-page .ticket-filter,
  .announcement-page .announcement-history-list,
  .announcement-page .announcement-history-empty,
  .app-page .jwsession-tool-panel { margin-top: -26px; }
  .admin-page .metric-grid { margin-top: -27px; }
  .admin-page .admin-tabs { top: 64px; }
  .app-page .panel-title { align-items: flex-start; }
  .app-page .panel-title h2 { font-size: 19px; }
  .auth-page .auth-card { border-radius: 17px; }
  body.auth-page::before { top: 10%; right: -25%; width: 90vw; }
}

@media (prefers-reduced-motion: reduce) {
  .app-page *, .auth-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}