/* ═══════════════════════════════════════════════════
   TUDUY TOAN DIEN — ROYAL ACADEMY DESIGN SYSTEM
   Theme: Navy + Gold, Playfair + DM Sans
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  /* ── Palette ── */
  --navy:       #0f1f3d;   /* Deep navy */
  --navy-mid:   #1a3460;   /* Sidebar */
  --navy-light: #1e4080;   /* Hover */
  --gold:       #c8962a;   /* Primary gold */
  --gold-light: #e4b84d;   /* Gold accent */
  --gold-pale:  #fdf4dc;   /* Gold tint bg */
  --gold-border:#e8c96a;   /* Gold border */
  --cream:      #fdfaf4;   /* Page bg */
  --white:      #ffffff;
  --ink:        #1a2340;   /* Body text */
  --ink-mid:    #4a5578;   /* Muted */
  --ink-light:  #8b94ae;   /* Placeholder */
  --border:     #e8eaf0;   /* Default border */
  --surface:    #f4f6fb;   /* Card bg alt */

  /* ── Semantic ── */
  --green:  #1a7a4a;
  --green-bg: #e6f5ee;
  --red:    #c0392b;
  --red-bg: #fdecea;
  --blue:   #1a56a8;
  --blue-bg:#e8f0fb;
  --amber:  #b45309;
  --amber-bg:#fef3c7;

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Spacing & Radius ── */
  --radius:   10px;
  --radius-lg:16px;
  --shadow-sm: 0 1px 4px rgba(15,31,61,.06), 0 0 0 1px rgba(15,31,61,.04);
  --shadow:    0 3px 12px rgba(15,31,61,.10), 0 0 0 1px rgba(15,31,61,.05);
  --shadow-lg: 0 8px 32px rgba(15,31,61,.16), 0 0 0 1px rgba(15,31,61,.06);

  /* ── Transitions ── */
  --t: .18s ease;
}

/* Seasonal system palettes */
html[data-mindup-theme="spring"] {
  --navy:#3f365f;--navy-mid:#695382;--navy-light:#8e6ba0;
  --gold:#d27b9c;--gold-light:#f0abc4;--gold-pale:#fff0f6;--gold-border:#efbfd0;
  --cream:#fff7f2;--surface:#fff1f5;--border:#f2dce4;
  --season-page-bg:linear-gradient(145deg,#fff8f2 0%,#fff0f6 52%,#f5f7ff 100%);
  --season-hero-bg:radial-gradient(circle at top right,rgba(255,255,255,.28),transparent 34%),linear-gradient(135deg,#59456f 0%,#9e6f96 56%,#e495ad 100%);
  --season-background-image:url("season-spring.png");
  --season-background-overlay:linear-gradient(135deg,rgba(255,250,247,.76),rgba(255,239,246,.68));
}
html[data-mindup-theme="summer"] {
  --navy:#075b52;--navy-mid:#0d7668;--navy-light:#15967e;
  --gold:#e7a51d;--gold-light:#f7cd4b;--gold-pale:#fff8d7;--gold-border:#efd46c;
  --cream:#f4ffec;--surface:#ecfbe6;--border:#d4ebc9;
  --season-page-bg:linear-gradient(145deg,#f9ffe8 0%,#efffd9 46%,#dcf8e8 100%);
  --season-hero-bg:radial-gradient(circle at top right,rgba(255,248,174,.42),transparent 32%),linear-gradient(135deg,#08766a 0%,#18a37d 55%,#e5b32f 100%);
  --season-background-image:url("season-summer.png");
  --season-background-overlay:linear-gradient(135deg,rgba(250,255,238,.72),rgba(230,255,236,.64));
}
html[data-mindup-theme="autumn"] {
  --navy:#64331e;--navy-mid:#884421;--navy-light:#aa5726;
  --gold:#c66a21;--gold-light:#eba446;--gold-pale:#fff0d7;--gold-border:#e7b46c;
  --cream:#fff8ed;--surface:#fdf0de;--border:#ecd5b8;
  --season-page-bg:linear-gradient(145deg,#fff9ed 0%,#fcebd6 50%,#f7dac2 100%);
  --season-hero-bg:radial-gradient(circle at top right,rgba(255,224,154,.3),transparent 32%),linear-gradient(135deg,#70351d 0%,#a84f25 56%,#d78832 100%);
  --season-background-image:url("season-autumn.png");
  --season-background-overlay:linear-gradient(135deg,rgba(255,249,238,.74),rgba(255,232,209,.66));
}
html[data-mindup-theme="winter"] {
  --navy:#173c67;--navy-mid:#23598a;--navy-light:#3479ad;
  --gold:#73a9d1;--gold-light:#b9e2f5;--gold-pale:#ebf8ff;--gold-border:#acd6eb;
  --cream:#f2faff;--surface:#eaf5fb;--border:#d2e7f2;
  --season-page-bg:linear-gradient(145deg,#f8fdff 0%,#eaf7ff 50%,#e1effb 100%);
  --season-hero-bg:radial-gradient(circle at top right,rgba(255,255,255,.46),transparent 32%),linear-gradient(135deg,#214e7a 0%,#397daf 56%,#8bc8e5 100%);
  --season-background-image:url("season-winter.png");
  --season-background-overlay:linear-gradient(135deg,rgba(250,254,255,.74),rgba(229,244,255,.66));
}
html[data-mindup-theme="mindup"] {
  --navy:#10284c;--navy-mid:#173f70;--navy-light:#225a98;
  --gold:#ed8618;--gold-light:#f6b53b;--gold-pale:#fff3d6;--gold-border:#f0bd62;
  --cream:#fffaf0;--surface:#f4f7fb;--border:#dce4ee;
  --season-page-bg:linear-gradient(145deg,#fffaf0 0%,#f4f8ff 52%,#e9f1fb 100%);
  --season-hero-bg:radial-gradient(circle at 84% 18%,rgba(255,193,69,.54),transparent 19%),radial-gradient(circle at 71% 72%,rgba(255,255,255,.18),transparent 25%),linear-gradient(135deg,#10284c 0%,#174779 58%,#ed8618 145%);
}
html[data-mindup-theme="spring"],
html[data-mindup-theme="summer"],
html[data-mindup-theme="autumn"],
html[data-mindup-theme="winter"],
html[data-mindup-theme="mindup"] {
  background:var(--season-page-bg);
}
html[data-mindup-theme="spring"] body,
html[data-mindup-theme="summer"] body,
html[data-mindup-theme="autumn"] body,
html[data-mindup-theme="winter"] body,
html[data-mindup-theme="mindup"] body {
  position:relative;
  isolation:isolate;
  background:transparent !important;
}
html[data-mindup-theme="spring"] body::before,
html[data-mindup-theme="summer"] body::before,
html[data-mindup-theme="autumn"] body::before,
html[data-mindup-theme="winter"] body::before {
  content:"";
  position:fixed;
  inset:-18px;
  z-index:-1;
  pointer-events:none;
  background:var(--season-background-overlay),var(--season-background-image) center/cover no-repeat;
  filter:blur(7px) saturate(.88);
  transform:scale(1.035);
}
html[data-mindup-theme="spring"] .page-hero,
html[data-mindup-theme="summer"] .page-hero,
html[data-mindup-theme="autumn"] .page-hero,
html[data-mindup-theme="winter"] .page-hero,
html[data-mindup-theme="spring"] .hero,
html[data-mindup-theme="summer"] .hero,
html[data-mindup-theme="autumn"] .hero,
html[data-mindup-theme="winter"] .hero,
html[data-mindup-theme="spring"] .ops-hero,
html[data-mindup-theme="summer"] .ops-hero,
html[data-mindup-theme="autumn"] .ops-hero,
html[data-mindup-theme="winter"] .ops-hero,
html[data-mindup-theme="mindup"] .page-hero,
html[data-mindup-theme="mindup"] .hero,
html[data-mindup-theme="mindup"] .ops-hero {
  background:var(--season-hero-bg) !important;
}
html[data-mindup-theme="mindup"] body::before {
  content:"";
  position:fixed;
  inset:-22px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 19%,rgba(246,181,59,.2) 0 4px,transparent 5px),
    radial-gradient(circle at 82% 26%,rgba(23,63,112,.16) 0 5px,transparent 6px),
    radial-gradient(circle at 69% 78%,rgba(237,134,24,.14) 0 4px,transparent 5px),
    radial-gradient(ellipse at 50% 45%,rgba(16,40,76,.2),rgba(16,40,76,.1) 34%,transparent 64%),
    radial-gradient(ellipse at 76% 18%,rgba(23,63,112,.14),transparent 38%),
    linear-gradient(118deg,transparent 0 23%,rgba(23,63,112,.07) 23.2% 23.45%,transparent 23.7% 100%),
    linear-gradient(52deg,transparent 0 67%,rgba(237,134,24,.08) 67.2% 67.45%,transparent 67.7% 100%),
    linear-gradient(145deg,rgba(255,250,240,.9),rgba(244,248,255,.84) 52%,rgba(233,241,251,.88));
  background-size:auto,auto,auto,auto,auto,250px 250px,310px 310px,auto;
  background-position:center,center,center,center,center,center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat;
  filter:blur(8px) saturate(.96);
  transform:scale(1.025);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }
html { font-size: 14px; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8d0e0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0aabe; }

/* ── Typography scale ── */
h1, h2, h3 { font-family: var(--font-display); color: var(--navy); line-height: 1.25; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p  { color: var(--ink-mid); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border: none; border-radius: var(--radius);
  font-family: var(--font-body); font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: var(--t); white-space: nowrap;
  text-decoration: none; line-height: 1;
}
.btn-primary {
  background: var(--navy); color: var(--gold-light);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
.btn-primary:hover { background: var(--navy-light); color: #fff; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--navy); box-shadow: 0 2px 8px rgba(200,150,42,.3);
}
.btn-gold:hover { filter: brightness(1.06); }

.btn-outline {
  background: var(--white); color: var(--navy);
  border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--gold-border); background: var(--gold-pale); }

.btn-ghost {
  background: transparent; color: var(--ink-mid);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--surface); color: var(--navy); }

.btn-danger {
  background: var(--red-bg); color: var(--red);
  border: 1px solid #f5c6c2;
}
.btn-danger:hover { background: var(--red); color: #fff; }

.btn-sm { padding: 5px 12px; font-size: .8rem; }
.btn-lg { padding: 11px 24px; font-size: 1rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px) scale(.98); }

/* ── Cards ── */
.card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.card-gold-accent {
  border-top: 3px solid var(--gold);
}
.card-body { padding: 20px; }

/* ── Form controls ── */
input, select, textarea {
  font-family: var(--font-body); font-size: .875rem;
  color: var(--ink); background: var(--white);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; width: 100%; transition: var(--t);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,150,42,.12);
}
input::placeholder { color: var(--ink-light); }
label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--ink-mid); margin-bottom: 5px; letter-spacing: .02em;
  text-transform: uppercase;
}

/* ── Table ── */
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table thead tr { background: var(--navy); }
.table thead th {
  padding: 11px 14px; color: var(--gold-light);
  font-weight: 600; text-align: left; white-space: nowrap;
  font-family: var(--font-display); font-size: .85rem;
  border: none;
}
.table thead th.center, .table td.center { text-align: center; }
.table thead th.right,  .table td.right  { text-align: right; }
.table tbody tr {
  border-bottom: 1px solid var(--surface);
  transition: background var(--t);
}
.table tbody tr:hover { background: var(--gold-pale); }
.table tbody td { padding: 10px 14px; vertical-align: middle; }
.table tbody tr:last-child { border-bottom: none; }

/* ── Badges / Pills ── */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: .75rem; font-weight: 600;
}
.badge-gold   { background: var(--gold-pale); color: var(--gold); border: 1px solid var(--gold-border); }
.badge-green  { background: var(--green-bg);  color: var(--green); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue); }
.badge-amber  { background: var(--amber-bg);  color: var(--amber); }
.badge-navy   { background: var(--navy); color: var(--gold-light); }

/* ── Page layout ── */
.page-wrap { padding: 24px; max-width: 1400px; margin: 0 auto; }
.page-header { display: flex; align-items: center; justify-content: space-between;
               flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.page-title  { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); }
.page-sub    { font-size: .8rem; color: var(--ink-light); margin-top: 2px; }

/* ── Shared page surfaces ── */
.page-shell { max-width: 1400px; margin: 0 auto; }
.page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 24px 26px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(135deg, rgba(15,31,61,.98) 0%, rgba(31,65,128,.95) 55%, rgba(200,150,42,.86) 100%);
  border: 1px solid rgba(35,56,92,.08);
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
  color: #fff;
}
.page-hero-copy { flex: 1 1 520px; min-width: min(100%, 320px); }
.page-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.95rem;
  color: #fff;
}
.page-hero-subtitle {
  margin: 8px 0 0;
  max-width: 780px;
  color: rgba(255,255,255,.84);
  line-height: 1.72;
  font-size: .92rem;
}
.page-hero-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-kpi {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}
.hero-kpi-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
}
.hero-kpi-value {
  display: block;
  margin-top: 6px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
}
.surface-toolbar,
.surface-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,31,61,.08);
  box-shadow: 0 14px 30px rgba(15,31,61,.06);
}
.surface-toolbar {
  border-radius: 22px;
  padding: 14px 16px;
}
.surface-card {
  border-radius: 22px;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.section-head h3,
.section-head h4 {
  margin: 0;
  color: var(--navy);
}
.section-copy {
  font-size: .82rem;
  color: var(--ink-light);
  line-height: 1.6;
}
.table-shell {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,31,61,.08);
  box-shadow: 0 14px 30px rgba(15,31,61,.06);
  border-radius: 22px;
  overflow: hidden;
}
.table-shell-scroll { overflow-x: auto; }
.empty-state {
  text-align: center;
  padding: 44px 22px;
  color: var(--ink-light);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-radius: 20px;
  border: 1px dashed rgba(15,31,61,.14);
}
.empty-state strong {
  display: block;
  color: var(--navy);
  font-size: .95rem;
  margin-bottom: 6px;
}
.empty-state p,
.empty-state .empty-copy {
  margin: 0;
  color: var(--ink-light);
  font-size: .84rem;
  line-height: 1.7;
}
.sheet-modal-card {
  border-radius: 24px;
  overflow: auto;
}
.sheet-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.sheet-modal-footer .btn,
.sheet-modal-footer button {
  min-height: 42px;
}

/* ── Section divider ── */
.divider {
  height: 1px; background: linear-gradient(90deg, var(--gold-border) 0%, transparent 100%);
  margin: 20px 0;
}

/* ── Toolbar ── */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Popup / Modal ── */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(10,20,40,.55);
  backdrop-filter: blur(3px); display: flex;
  align-items: center; justify-content: center; z-index: 1000;
}
.popup-overlay.hidden, .popup-overlay[style*="none"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.popup-card {
  background: var(--white); border-radius: var(--radius-lg);
  width: min(95vw, 1100px); max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--gold);
}
.popup-header {
  display: flex; align-items: center; padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.popup-header h3 { font-family: var(--font-display); font-size: 1.1rem; flex: 1; color: var(--navy); }
.popup-close {
  background: var(--surface); border: none; border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; font-size: 16px;
  color: var(--ink-mid); display: flex; align-items: center; justify-content: center;
  transition: var(--t);
}
.popup-close:hover { background: var(--red-bg); color: var(--red); }

/* ── Status colors for attendance/payment ── */
.status-present { background: var(--green-bg); color: var(--green); }
.status-absent  { background: var(--red-bg);   color: var(--red); }
.status-makeup  { background: var(--amber-bg);  color: var(--amber); }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--navy); color: var(--gold-light);
  padding: 12px 20px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); font-size: .875rem; font-weight: 500;
  transform: translateY(8px); opacity: 0;
  transition: all .25s ease; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── Loading skeleton ── */
.loading-text { color: var(--ink-light); font-size: .875rem; padding: 20px; text-align: center; }
.loading-text::after {
  content: "";
  display: inline-block;
  width: 1.4em;
  text-align: left;
  animation: loadingDots 1.25s steps(4, end) infinite;
}

/* ── Class tag ── */
.class-tag {
  display: inline-block; background: var(--blue-bg); color: var(--blue);
  padding: 2px 10px; border-radius: 12px; font-size: .75rem; font-weight: 600;
}

/* ── Attendance pill buttons ── */
.att-btn {
  border: none; border-radius: 6px; padding: 4px 10px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.12); transition: var(--t);
}
.att-btn:hover { opacity: .82; transform: scale(1.04); }
.att-btn.present { background: var(--green); color: #fff; }
.att-btn.absent  { background: var(--red);   color: #fff; }
.att-btn.makeup  { background: var(--amber);  color: #fff; }

/* ── Responsive ── */
/* -- Motion layer -- */
@keyframes pageArrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroDrift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes loadingDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}
@keyframes petalFall {
  0% {
    transform: translate3d(0, -12vh, 0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: var(--petal-opacity); }
  88% { opacity: var(--petal-opacity); }
  100% {
    transform: translate3d(var(--petal-drift), 112vh, 0) rotate(var(--petal-turn));
    opacity: 0;
  }
}
@keyframes leafFall {
  0% {
    transform: translate3d(0, -14vh, 0) rotate(0deg);
    opacity: 0;
  }
  12% { opacity: .58; }
  88% { opacity: .58; }
  100% {
    transform: translate3d(var(--leaf-drift), 114vh, 0) rotate(var(--leaf-turn));
    opacity: 0;
  }
}
@keyframes ribbonGlide {
  0% {
    transform: translate3d(-26vw, 0, 0) rotate(-7deg) scale(var(--ribbon-scale));
    opacity: 0;
  }
  14% { opacity: .26; }
  78% { opacity: .26; }
  100% {
    transform: translate3d(126vw, -9vh, 0) rotate(7deg) scale(var(--ribbon-scale));
    opacity: 0;
  }
}

.mindup-petal-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  --ambient-petal-a: rgba(255,255,255,.9);
  --ambient-petal-b: rgba(244,164,183,.82);
  --ambient-petal-c: rgba(228,184,77,.7);
  --ambient-leaf-a: rgba(255,235,157,.92);
  --ambient-leaf-b: rgba(220,158,46,.82);
  --ambient-leaf-c: rgba(154,96,21,.72);
  --ambient-ribbon-a: rgba(227,164,65,.32);
  --ambient-ribbon-b: rgba(236,123,145,.38);
}
.mindup-petal-layer[data-theme="summer"] { --ambient-petal-a:rgba(254,249,195,.94);--ambient-petal-b:rgba(250,204,21,.76);--ambient-petal-c:rgba(74,222,128,.68);--ambient-leaf-a:rgba(187,247,208,.92);--ambient-leaf-b:rgba(34,197,94,.8);--ambient-leaf-c:rgba(21,128,61,.72);--ambient-ribbon-a:rgba(250,204,21,.34);--ambient-ribbon-b:rgba(74,222,128,.34); }
.mindup-petal-layer[data-theme="autumn"] { --ambient-petal-a:rgba(254,215,170,.92);--ambient-petal-b:rgba(251,146,60,.82);--ambient-petal-c:rgba(185,28,28,.64);--ambient-leaf-a:rgba(253,230,138,.92);--ambient-leaf-b:rgba(234,88,12,.82);--ambient-leaf-c:rgba(146,64,14,.72);--ambient-ribbon-a:rgba(245,158,11,.34);--ambient-ribbon-b:rgba(234,88,12,.3); }
.mindup-petal-layer[data-theme="winter"] { --ambient-petal-a:rgba(255,255,255,.98);--ambient-petal-b:rgba(224,242,254,.9);--ambient-petal-c:rgba(147,197,253,.64);--ambient-ribbon-a:rgba(186,230,253,.34);--ambient-ribbon-b:rgba(224,242,254,.4); }
.mindup-petal-layer[data-theme="mindup"] { --ambient-petal-a:rgba(255,244,198,.96);--ambient-petal-b:rgba(246,181,59,.84);--ambient-petal-c:rgba(237,134,24,.72);--ambient-leaf-a:rgba(212,228,248,.9);--ambient-leaf-b:rgba(76,132,190,.7);--ambient-leaf-c:rgba(23,63,112,.7);--ambient-ribbon-a:rgba(246,181,59,.28);--ambient-ribbon-b:rgba(23,63,112,.3); }
.mindup-petal {
  position: absolute;
  top: -20px;
  left: var(--petal-left);
  width: var(--petal-size);
  height: calc(var(--petal-size) * .72);
  border-radius: 80% 20% 76% 24%;
  background: linear-gradient(135deg, var(--ambient-petal-a), var(--ambient-petal-b) 52%, var(--ambient-petal-c));
  box-shadow: 0 2px 5px rgba(149,72,92,.12);
  opacity: 0;
  animation: petalFall var(--petal-duration) linear var(--petal-delay) infinite;
  will-change: transform;
}
.mindup-leaf {
  position: absolute;
  top: -24px;
  left: var(--leaf-left);
  width: var(--leaf-size);
  height: calc(var(--leaf-size) * .58);
  border-radius: 95% 8% 95% 8%;
  background: linear-gradient(135deg, var(--ambient-leaf-a), var(--ambient-leaf-b) 60%, var(--ambient-leaf-c));
  box-shadow: 0 2px 5px rgba(130,84,20,.14);
  opacity: 0;
  animation: leafFall var(--leaf-duration) linear var(--leaf-delay) infinite;
  will-change: transform;
}
.mindup-ribbon {
  position: absolute;
  top: var(--ribbon-top);
  left: 0;
  width: 110px;
  height: 8px;
  border-radius: 90% 12% 90% 12%;
  background: linear-gradient(90deg, transparent, var(--ambient-ribbon-a), var(--ambient-ribbon-b), transparent);
  filter: blur(.35px);
  opacity: 0;
  animation: ribbonGlide var(--ribbon-duration) ease-in-out var(--ribbon-delay) infinite;
  will-change: transform;
}
.mindup-petal-layer[data-theme="winter"] .mindup-petal { border-radius: 50%; }
.mindup-petal-layer[data-theme="spring"] .mindup-petal { box-shadow:0 2px 7px rgba(210,123,156,.26); }
.mindup-petal-layer[data-theme="summer"] .mindup-petal { border-radius:50%;box-shadow:0 0 12px rgba(250,204,21,.46); }
.mindup-petal-layer[data-theme="summer"] .mindup-leaf { border-radius:95% 8% 95% 8%; }
.mindup-petal-layer[data-theme="autumn"] .mindup-petal { border-radius:95% 8% 95% 8%; }
.mindup-petal-layer[data-theme="autumn"] .mindup-leaf { box-shadow:0 3px 8px rgba(146,64,14,.24); }
.mindup-petal-layer[data-theme="winter"] .mindup-petal { border:1px solid rgba(147,197,253,.62);box-shadow:0 0 10px rgba(186,230,253,.72); }
.mindup-petal-layer[data-theme="mindup"] .mindup-petal { border-radius:50%;box-shadow:0 0 13px rgba(237,134,24,.46); }
.mindup-petal-layer[data-theme="mindup"] .mindup-leaf { border-radius:50%;box-shadow:0 0 12px rgba(23,63,112,.28); }
.mindup-petal-layer[data-theme="mindup"] .mindup-ribbon { height:3px;border-radius:8px;filter:blur(.15px); }
.mindup-effect-settings {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  font-family: var(--font-body);
}
.mindup-effect-settings.hidden { display: none; }
.mindup-effect-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid rgba(15,31,61,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 24px rgba(15,31,61,.16);
  cursor: pointer;
  font-size: 1rem;
}
.mindup-effect-panel {
  display: none;
  width: min(280px, calc(100vw - 32px));
  margin-bottom: 8px;
  padding: 14px;
  border: 1px solid rgba(15,31,61,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 36px rgba(15,31,61,.16);
  backdrop-filter: blur(10px);
}
.mindup-effect-settings.open .mindup-effect-panel { display: block; }
.mindup-effect-panel-title { color: var(--navy); font-weight: 800; font-size: .88rem; }
.mindup-effect-panel-copy { margin-top: 4px; color: var(--ink-mid); font-size: .76rem; }
.mindup-effect-toggle { display: flex; align-items: center; gap: 9px; margin-top: 12px; cursor: pointer; text-transform: none; }
.mindup-effect-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.mindup-effect-toggle span { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #cbd5e1; flex: 0 0 auto; transition: .18s; }
.mindup-effect-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .18s; }
.mindup-effect-toggle input:checked + span { background: var(--navy); }
.mindup-effect-toggle input:checked + span::after { transform: translateX(16px); }
.mindup-effect-toggle b { color: var(--ink-mid); font-size: .76rem; text-transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .page-wrap,
  .page-shell,
  body > .page {
    animation: pageArrive .42s cubic-bezier(.2,.7,.2,1) both;
  }
  .page-hero,
  .hero-card {
    background-size: 180% 180%;
    animation: heroDrift 14s ease-in-out infinite;
  }
  .btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15,31,61,.12);
  }
  .card,
  .surface-card,
  .surface-toolbar,
  .table-shell,
  .hero-kpi,
  .overview-card,
  .feed-header,
  .course-card,
  .screen-panel,
  .box {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .card:hover,
  .surface-card:hover,
  .surface-toolbar:hover,
  .table-shell:hover,
  .hero-kpi:hover,
  .overview-card:hover,
  .feed-header:hover,
  .course-card:hover,
  .screen-panel:hover,
  .box:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15,31,61,.10);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 640px) {
  .page-wrap { padding: 14px; }
  h1 { font-size: 1.35rem; }
  .page-hero {
    padding: 18px 18px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
  }
  .page-hero-title { font-size: 1.55rem; }
  .page-hero-subtitle { font-size: .86rem; line-height: 1.62; }
  .page-hero-actions { width: 100%; }
  .hero-kpi { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .surface-toolbar,
  .surface-card,
  .table-shell,
  .empty-state,
  .sheet-modal-card { border-radius: 20px; }
  .sheet-modal-footer {
    position: sticky;
    bottom: -18px;
    margin: 18px -16px -18px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  .sheet-modal-footer .btn,
  .sheet-modal-footer button {
    width: 100%;
  }
}