/* ==========================================================================
   SEL.OS - Minimalist Blueprint Desktop Style (高中男校・文藝理性質感版)
   Zero Emojis · Clean Vector Line Icons · Mentor Studio ✕ Direct Messaging ✕ Mini Mood Calendar
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&family=Silkscreen:wght@400;700&display=swap');

:root {
  /* Blueprint Grid & Desktop Base */
  --bg-grid-color: #dce5ef;
  --bg-line-color: rgba(148, 169, 194, 0.35);
  --desk-base: #e6eef7;

  /* Window & Surface */
  --win-bg: #f8f7f2;
  --win-sub: #eeeade;
  --border-color: #1e2329;
  --border-light: rgba(30, 35, 41, 0.15);
  --shadow-solid: 4px 4px 0 rgba(30, 35, 41, 0.22);
  --shadow-pop: 6px 6px 0 rgba(30, 35, 41, 0.28);

  /* Typography */
  --text-main: #1b1f24;
  --text-muted: #57606a;
  --text-light: #8c959f;
  --font-mono: 'DM Mono', monospace;
  --font-sans: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-pixel: 'Silkscreen', monospace;

  /* Quadrant Muted Pastel Colors (Aligned with Mini Calendar Palette) */
  --q-red: #bf6459;
  --q-red-border: #a84b3d;
  --q-red-bg: rgba(191, 100, 89, 0.2);

  --q-yellow: #d8a543;
  --q-yellow-border: #be8c28;
  --q-yellow-bg: rgba(216, 165, 67, 0.22);

  --q-blue: #7393bb;
  --q-blue-border: #57779f;
  --q-blue-bg: rgba(115, 147, 187, 0.2);

  --q-green: #6e9d86;
  --q-green-border: #55836c;
  --q-green-bg: rgba(110, 157, 134, 0.22);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--text-main);
  background-color: var(--desk-base);
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* ──────────────────────────────────────────
   1. BLUEPRINT GRID DESKTOP
   ────────────────────────────────────────── */
#desktop-canvas {
  position: absolute;
  inset: 0;
  background-color: var(--desk-base);
  background-image: 
    linear-gradient(var(--bg-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-line-color) 1px, transparent 1px);
  background-size: 20px 20px;
  overflow: hidden;
}

/* ──────────────────────────────────────────
   2. TOP SYSTEM BAR
   ────────────────────────────────────────── */
#system-bar {
  --sys-tile-h: 40px;
  --sys-tile-r: 8px;
  --sys-tile-shadow: 2px 2px 0 rgba(30, 35, 41, 0.14);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--win-bg);
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 2px 0 rgba(30, 35, 41, 0.1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 0 16px;
  z-index: 1000;
  font-size: 13px;
  overflow: visible;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  justify-self: start;
}

.sys-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--sys-tile-h);
  padding: 0 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--sys-tile-r);
  background: var(--border-color);
  color: #a8d5b8;
  font-family: 'Press Start 2P', var(--font-pixel), monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1;
  box-shadow: var(--sys-tile-shadow);
  flex-shrink: 0;
}

.sys-brand-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-badge {
  font-family: var(--font-pixel);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--border-color);
  color: #fff;
  border-radius: 4px;
}

.sys-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: center;
  overflow: visible;
}

.sys-nav-btn,
.sys-tool-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--sys-tile-h);
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--sys-tile-r);
  background: #fff;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sys-tile-shadow);
  transition: background 0.15s ease, transform 0.15s ease;
}

.sys-nav-btn {
  min-width: 124px;
  overflow: visible;
}

.sys-nav-btn svg,
.sys-tool-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sys-nav-btn:hover,
.sys-tool-btn:hover {
  background: var(--win-sub);
  transform: translateY(-1px);
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: var(--win-bg);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.1);
}

.nav-btn:hover {
  background: var(--win-sub);
  transform: translateY(-1px);
}

.nav-btn-highlight {
  background: var(--border-color) !important;
  color: #fff !important;
  border-color: var(--border-color) !important;
  font-weight: 700;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.25);
}

.nav-btn-highlight:hover {
  background: #333a44 !important;
}

.nav-btn-mentor {
  background: #fdf6e2 !important;
  border: 1.5px solid var(--q-yellow-border) !important;
  color: #634b12 !important;
  font-weight: 700;
  position: relative;
}

.nav-btn-mentor:hover {
  background: #faecc5 !important;
}

.student-mailbox-entry.has-unread,
.sys-nav-btn.has-unread {
  background: #fff8e8;
}

.nav-unread-count,
.mentor-unread-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d33c2a;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 1.5px solid #fff;
  box-shadow: 1px 1px 0 rgba(30, 35, 41, 0.25);
  pointer-events: none;
  flex-shrink: 0;
}

.nav-unread-count[hidden],
.mentor-unread-badge[hidden] {
  display: none !important;
}

.sys-status-cluster {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  justify-self: end;
}

#sys-clock {
  display: inline-flex;
  align-items: center;
  height: var(--sys-tile-h);
  padding: 0 10px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--sys-tile-r);
  background: #fff;
  box-shadow: var(--sys-tile-shadow);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.user-status-section {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.identity-chip {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--sys-tile-h);
  min-width: 0;
  max-width: 280px;
  margin: 0;
  padding: 0 8px 0 3px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--sys-tile-r);
  background: #fff;
  color: var(--text-main);
  cursor: pointer;
  box-shadow: var(--sys-tile-shadow);
  font-family: var(--font-sans);
  text-align: left;
  flex: 1 1 auto;
  overflow: hidden;
}

.identity-chip:hover {
  transform: translateY(-1px);
  background: #fffdf6;
}

.identity-chip.role-student {
  background: #eef6ea;
  border-color: var(--q-green-border);
}

.identity-chip.role-student:hover {
  background: #e4f0df;
}

.identity-chip.role-officer {
  background: var(--q-blue-bg);
  border-color: var(--q-blue-border);
}

.identity-chip.role-mentor {
  background: #fdf6e2;
  border-color: var(--q-yellow-border);
}

.identity-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
}

.identity-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.identity-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Four-character Chinese names remain fully visible; longer names may ellipsize. */
.identity-chip.name-fit-four {
  min-width: 132px;
}

.identity-chip.name-fit-four .identity-copy {
  min-width: 4.1em;
}

.identity-chip.name-fit-four .identity-name {
  overflow: visible;
  font-size: 11.5px;
  letter-spacing: -0.02em;
  text-overflow: clip;
}

.identity-chip.name-over-four .identity-name {
  font-size: 11.5px;
  letter-spacing: -0.02em;
}

.identity-meta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-chip.role-student .identity-meta { color: #3f6b54; }
.identity-chip.role-officer .identity-meta { color: #3d5b80; }
.identity-chip.role-mentor .identity-meta { color: #6b5214; }

.identity-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 3px 7px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
}

.identity-chip:hover .identity-edit {
  background: var(--border-color);
  color: #fff;
}

.identity-logout-btn {
  flex-shrink: 0;
  min-width: 0;
  padding: 0 12px;
  color: #9a3c32;
  border-color: #cf8d80;
  background: #fff5f2;
}

.identity-logout-btn:hover {
  background: #fde8e3;
}

.role-pill {
  padding: 2px 7px;
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.role-pill.mentor { background: var(--q-yellow); color: var(--border-color); }
.role-pill.officer { background: var(--q-blue); color: var(--border-color); }
.role-pill.student { background: var(--win-sub); color: var(--text-muted); }

/* ──────────────────────────────────────────
   3. TWO-COLUMN MAIN WORKSPACE & MOBILE TAB BAR
   ────────────────────────────────────────── */
#main-workspace-window {
  position: absolute;
  left: 20px;
  top: 76px;
  right: 20px;
  bottom: 14px;
  background: var(--win-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-solid);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
}

.mobile-main-tab-bar {
  display: none;
  background: var(--win-sub);
  border-bottom: 2px solid var(--border-color);
  padding: 6px 10px;
  gap: 6px;
  flex-shrink: 0;
}

.mobile-tab-btn {
  flex: 1;
  padding: 6px 0;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: var(--win-bg);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.1s;
}

.mobile-tab-btn.active {
  background: var(--border-color);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.2);
}

.two-column-container {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.main-col-bulletin {
  border-right: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fbfaf6;
}

.col-header {
  padding: 10px 16px;
  background: var(--win-sub);
  border-bottom: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.col-title {
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.col-body-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  -webkit-overflow-scrolling: touch;
}

.sec-col-threads {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fdfdfb;
}

/* ──────────────────────────────────────────
   4. CLASS BULLETIN LIST VIEW
   ────────────────────────────────────────── */
.bulletin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.quadrant-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.q-tab {
  padding: 4px 9px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--win-bg);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.q-tab.active, .q-tab:hover {
  background: var(--border-color);
  color: #fff;
}

.bulletin-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulletin-list-row {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
  transition: all 0.12s ease;
  position: relative;
}

.bulletin-list-row:hover {
  transform: translateX(2px) translateY(-1px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: #fffdf7;
}

.bulletin-list-row.pinned {
  border-color: var(--q-yellow-border);
  background: #fffdf5;
}

.bulletin-list-row.audience-for-me {
  border-left: 4px solid #d33c2a;
  background: #fffaf6;
}

/* ──────────────────────────────────────────
   4.5 BULLETIN CALENDAR & WEEK SCHEDULE VIEW
   ────────────────────────────────────────── */
.bulletin-view-toggle-group {
  display: flex;
  background: var(--win-sub);
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  padding: 1px;
  gap: 1px;
}

.mode-toggle-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.mode-toggle-btn.active {
  background: var(--border-color);
  color: #fff;
}

.bulletin-cal-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.b-cal-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.05);
  flex-wrap: wrap;
  gap: 8px;
}

.cal-sub-tab-group {
  display: flex;
  background: var(--win-sub);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.cal-sub-tab {
  padding: 2.5px 8px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}

.cal-sub-tab.active {
  background: #fff;
  color: var(--text-main);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cal-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-nav-arrow {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--border-color);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
}

.cal-nav-arrow:hover {
  background: var(--border-color);
  color: #fff;
}

.cal-current-label {
  font-family: var(--font-pixel);
  font-size: 11.5px;
  font-weight: 700;
  min-width: 140px;
  text-align: center;
}

.cal-today-btn {
  padding: 3px 8px;
  border: 1.5px solid var(--border-color);
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.cal-today-btn:hover {
  background: var(--border-color);
  color: #fff;
}

/* Month Grid */
.bulletin-month-table-container {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.06);
}

.b-month-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--win-sub);
  border-bottom: 1.5px solid var(--border-color);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 0;
}

.bulletin-cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(76px, auto);
}

.b-cal-cell {
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  background: #fff;
  transition: background 0.12s ease;
  min-height: 76px;
  overflow: hidden;
}

.b-cal-cell:nth-child(7n) {
  border-right: none;
}

.b-cal-cell:hover {
  background: #faf8f5;
}

.b-cal-cell.other-month {
  background: #fbfbf9;
  opacity: 0.55;
}

.b-cal-cell.today {
  background: #f4faf6;
}

.b-cal-cell.selected {
  outline: 2px solid var(--border-color);
  outline-offset: -2px;
  background: #fffdf5;
}

.b-cal-cell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
}

.b-cal-cell-header .day-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
}

.b-cal-cell-header .today-tag {
  background: #2a7a4c;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}

.b-cal-cell-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.b-event-chip {
  font-size: 10px;
  padding: 1.5px 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border: 1px solid transparent;
}

.b-event-chip.publish {
  background: #eef4fc;
  color: #2b5c8f;
  border-color: #bad3f0;
}

.b-event-chip.deadline {
  background: #fdf0ee;
  color: #c0392b;
  border-color: #f7c3bc;
  font-weight: 700;
}

.b-event-chip.poll {
  background: #f3eefc;
  color: #6b4aa0;
  border-color: #d7c8f0;
  font-weight: 700;
}

.b-event-chip .chip-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b-event-more {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-light);
  text-align: right;
  padding-right: 2px;
}

/* Agenda Panel */
.b-cal-agenda-panel {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agenda-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 6px;
}

.agenda-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agenda-item-card {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #faf8f5;
  cursor: pointer;
  transition: all 0.12s ease;
  gap: 8px;
}

.agenda-item-card:hover {
  background: #fff;
  border-color: var(--border-color);
  transform: translateX(2px);
}

.agenda-item-card.deadline {
  border-left: 3px solid #c0392b;
}

.agenda-item-card.publish {
  border-left: 3px solid #2b5c8f;
}

.agenda-item-card.poll {
  border-left: 3px solid #6b4aa0;
}

.agenda-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}

.agenda-type-badge.publish {
  background: #eef4fc;
  color: #2b5c8f;
}

.agenda-type-badge.deadline {
  background: #fdf0ee;
  color: #c0392b;
}

.agenda-type-badge.poll {
  background: #f3eefc;
  color: #6b4aa0;
}

/* Week Schedule View */
.bulletin-cal-week-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b-week-day-card {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.05);
  display: flex;
  flex-direction: column;
}

.b-week-day-card.today {
  border-color: #2a7a4c;
}

.b-week-day-header {
  background: var(--win-sub);
  padding: 7px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}

.b-week-day-card.today .b-week-day-header {
  background: #eef7f2;
}

.b-week-day-header .header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.b-week-day-header .weekday-name {
  font-weight: 800;
  font-size: 12.5px;
}

.b-week-day-header .date-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.b-week-day-header .event-count-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
}

.b-week-day-body {
  padding: 8px 12px;
}

.week-empty-text {
  font-size: 11.5px;
  color: var(--text-light);
  font-style: italic;
}

.week-events-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.week-event-card {
  background: #faf8f5;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.week-event-card:hover {
  background: #fff;
  border-color: var(--border-color);
  transform: translateX(2px);
}

.week-event-card.deadline {
  border-left: 3px solid #c0392b;
}

.week-event-card.publish {
  border-left: 3px solid #2b5c8f;
}

.week-event-card.poll {
  border-left: 3px solid #6b4aa0;
}

.row-left-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.row-title-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-right-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 11px;
}

.deadline-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--win-sub);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.deadline-pill.urgent {
  background: #fde8e4;
  border-color: var(--q-red-border);
  color: #a82e1d;
  font-weight: 700;
}

.user-read-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  font-weight: 700;
  white-space: nowrap;
}

.user-read-badge.done {
  background: var(--q-green);
  color: #fff;
  border-color: var(--q-green-border);
}

.user-read-badge.pending {
  background: var(--win-sub);
  color: var(--text-muted);
}

.user-read-badge.neutral {
  color: var(--text-light);
  background: #f5f5f2;
  border-color: var(--border-light);
}

.bulletin-tag {
  padding: 2px 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--win-sub);
  white-space: nowrap;
}

.bulletin-audience-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.bulletin-audience-pill.all {
  color: #2b5c8f;
  background: #eef4fc;
  border-color: #bad3f0;
}

.bulletin-audience-pill.custom {
  color: #6b4aa0;
  background: #f3eefc;
  border-color: #d7c8f0;
}

.bulletin-audience-pill.mine {
  color: #fff;
  background: #d33c2a;
  border-color: #a82e1d;
}

/* ──────────────────────────────────────────
   5. BULLETIN DETAIL MODAL
   ────────────────────────────────────────── */
#modal-bulletin-detail .modal-card {
  max-width: 680px;
  max-height: min(840px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#bulletin-detail-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bulletin-detail-body {
  flex: 1;
  min-height: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.detail-header-block {
  border-bottom: 1.5px dashed var(--border-light);
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
}

.detail-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

.detail-content-box {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-main);
  white-space: pre-wrap;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
}

.bulletin-target-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px;
  border: 1px dashed #c9b6e8;
  border-radius: 7px;
  background: #fbf8ff;
}

.bulletin-target-chip {
  padding: 2px 7px;
  border-radius: 999px;
  background: #f3eefc;
  border: 1px solid #d7c8f0;
  color: #5f418f;
  font-size: 10.5px;
  font-weight: 700;
}

.bulletin-non-target-note {
  padding: 9px 11px;
  border: 1px dashed var(--border-light);
  border-radius: 7px;
  background: #f7f7f4;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.poll-list-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b4aa0;
  background: #f3eefc;
  border: 1px solid #d7c8f0;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

.poll-list-badge.closed {
  color: var(--text-muted);
  background: var(--win-sub);
  border-color: var(--border-light);
}

.bulletin-poll-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px dashed var(--border-color);
  border-radius: 8px;
  background: #faf8ff;
}

.bulletin-poll-fields[hidden] {
  display: none !important;
}

#bulletin-poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bulletin-poll-option-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bulletin-poll-option-row input {
  flex: 1;
  width: auto;
  min-width: 0;
}

.poll-option-remove {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  font-size: 12px;
  color: var(--q-red-border);
}

.bulletin-poll-section {
  border: 1.5px solid #c9b6e8;
  border-radius: 8px;
  background: #fbf8ff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bulletin-poll-section.is-closed {
  background: #f7f5f2;
  border-color: var(--border-light);
}

.poll-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 12.5px;
}

.poll-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll-option-btn {
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
}

.poll-option-btn:hover:not(:disabled) {
  background: #f4eefc;
  transform: translateY(-1px);
}

.poll-option-btn.selected {
  border-color: #6b4aa0;
  box-shadow: 2px 2px 0 rgba(107, 74, 160, 0.2);
  background: #f3eefc;
}

.poll-option-btn.is-disabled,
.poll-option-btn:disabled {
  cursor: default;
  transform: none;
}

.poll-option-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.poll-option-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.poll-option-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.poll-bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--win-sub);
  overflow: hidden;
}

.poll-bar-fill {
  height: 100%;
  background: #6b4aa0;
  border-radius: 999px;
  min-width: 0;
}

.poll-voter-names {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.poll-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.student-response-section {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fffdf5;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.response-prompt-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.response-buttons-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.resp-action-btn {
  padding: 8px 4px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.1s;
}

.resp-action-btn:hover {
  background: var(--win-sub);
  transform: translateY(-1px);
}

.resp-action-btn.active {
  background: var(--border-color);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.25);
}

.roster-tracking-section {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roster-tab-header {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 6px;
}

.roster-tab-btn {
  padding: 3px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--win-sub);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.roster-tab-btn.active {
  background: var(--border-color);
  color: #fff;
}

.roster-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.roster-list-table th, .roster-list-table td {
  border: 1px solid var(--border-light);
  padding: 6px 8px;
  text-align: left;
}

.roster-list-table th {
  background: var(--win-sub);
  font-family: var(--font-mono);
  font-size: 11px;
}

.unread-badge-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fde8e4;
  color: #a82e1d;
  border: 1px solid var(--q-red-border);
}

/* ──────────────────────────────────────────
   6. THREADS MOOD HUB CARDS
   ────────────────────────────────────────── */
.threads-feed-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thread-card {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
  display: flex;
  gap: 10px;
  position: relative;
}

.thread-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30px;
  flex-shrink: 0;
}

.avatar-badge {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border-color);
  border-radius: 50%;
  background: var(--win-sub);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thread-line {
  flex: 1;
  width: 2px;
  background: var(--border-light);
  margin-top: 6px;
  border-radius: 1px;
}

.thread-content-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.thread-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

.author-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.author-name {
  font-size: 12.5px;
  font-weight: 700;
}

.author-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-light);
}

.thread-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
}

.thread-pill-tag.q-red { background: var(--q-red-bg); border-color: var(--q-red-border); }
.thread-pill-tag.q-yellow { background: var(--q-yellow-bg); border-color: var(--q-yellow-border); }
.thread-pill-tag.q-blue { background: var(--q-blue-bg); border-color: var(--q-blue-border); }
.thread-pill-tag.q-green { background: var(--q-green-bg); border-color: var(--q-green-border); }

.thread-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-main);
  word-break: break-word;
}

.threads-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px solid var(--border-light);
}

.thread-act-btn {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 5px;
  border-radius: 4px;
  transition: all 0.1s;
}

.thread-act-btn svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

.thread-act-btn:hover {
  background: var(--win-sub);
  color: var(--text-main);
}

.thread-act-btn.active svg {
  fill: var(--border-color);
  stroke: var(--border-color);
}

.thread-act-btn.like-btn.active svg {
  fill: #d33c2a;
  stroke: #d33c2a;
}

.thread-act-btn.like-btn.active {
  color: #d33c2a;
}

.thread-act-btn.bookmark-btn.active svg {
  fill: var(--q-yellow-border);
  stroke: var(--q-yellow-border);
}

.thread-act-btn.bookmark-btn.active {
  color: var(--q-yellow-border);
}

.thread-moderation-btn {
  color: #9a3c32;
  margin-left: auto;
}

.thread-replies-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 5px;
  padding-left: 8px;
  border-left: 2px solid var(--border-light);
}

.reply-item {
  display: flex;
  gap: 5px;
  font-size: 11.5px;
}

.reply-author {
  font-weight: 700;
  white-space: nowrap;
}

.reply-content {
  color: var(--text-main);
  flex: 1;
}

.reply-input-row {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.reply-input-row input {
  flex: 1;
  padding: 5px 8px;
  border: 1.5px solid var(--border-color);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  outline: none;
}

.reply-input-row button {
  padding: 5px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 5px;
  background: var(--border-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ──────────────────────────────────────────
   7. DEDICATED POPUP: PERSONAL SEL JOURNAL & FULL CALENDAR
   ────────────────────────────────────────── */
#win-mood-meter {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, calc(100vw - 28px));
  height: min(700px, calc(100vh - 40px));
  background: var(--win-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 8px 8px 0 rgba(30, 35, 41, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5000;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#win-mood-meter.minimized {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -45%) scale(0.95);
}

/* ──────────────────────────────────────────
   7.5 DEDICATED POPUP: CLASS FINANCE LEDGER
   ────────────────────────────────────────── */
#win-finance {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(940px, calc(100vw - 28px));
  height: min(760px, calc(100vh - 40px));
  background: var(--win-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 8px 8px 0 rgba(30, 35, 41, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5000;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#win-finance.minimized {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -45%) scale(0.95);
}

.finance-entry {
  background: #eef5fb !important;
  border-color: #7198b8 !important;
  color: #294f70 !important;
  font-weight: 700;
  position: relative;
}

.finance-entry:hover {
  background: #deebf6 !important;
}

.finance-window-body {
  background: #f7f8f7;
}

.finance-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
}

.finance-intro-card,
.finance-manager-panel,
.finance-ledger-card {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.06);
}

.finance-intro-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f3f8fc;
}

.finance-intro-card h2,
.finance-section-heading h3 {
  margin: 2px 0 0;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.finance-intro-card p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 11.5px;
}

.finance-eyebrow {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.finance-summary-card {
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 7px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.05);
}

.finance-summary-card span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.finance-summary-card strong {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--text-main);
}

.finance-summary-card.income { border-top: 4px solid #5d9b73; }
.finance-summary-card.expense { border-top: 4px solid #c66e60; }
.finance-summary-card.balance { border-top: 4px solid #5c86b0; }
.finance-summary-card.count { border-top: 4px solid #9b8451; }

.finance-manager-panel,
.finance-ledger-card {
  padding: 14px 16px;
}

.finance-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.finance-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.finance-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.finance-form-field > label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
}

.finance-form-wide { grid-column: span 2; }
.finance-form-grid input,
.finance-form-grid select,
.finance-form-grid textarea,
.finance-payment-form-grid input,
.finance-payment-form-grid select,
.finance-payment-form-grid textarea,
.finance-payment-toolbar select,
.finance-filter-row input,
.finance-filter-row select {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 5px;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-main);
}

.finance-form-grid textarea,
.finance-payment-form-grid textarea { height: 78px; min-height: 78px; resize: vertical; line-height: 1.45; }

.finance-form-grid input:focus,
.finance-form-grid select:focus,
.finance-form-grid textarea:focus,
.finance-payment-form-grid input:focus,
.finance-payment-form-grid select:focus,
.finance-payment-form-grid textarea:focus,
.finance-payment-toolbar select:focus,
.finance-filter-row input:focus,
.finance-filter-row select:focus {
  outline: 2px solid rgba(92, 134, 176, .28);
  outline-offset: 1px;
}

.finance-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 10.5px;
}

.finance-payment-panel {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 14px;
  background: #fbfaf6;
}

.finance-payment-hint {
  margin: -2px 0 12px;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.55;
}

.finance-payment-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.finance-payment-plan-select {
  flex: 1;
  max-width: 430px;
}

.finance-fee-actions,
.finance-fee-save-actions > div {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.finance-payment-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.finance-payment-form-grid .finance-form-wide { grid-column: span 2; }

.finance-payment-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 8px;
  color: var(--text-muted);
  font-size: 10.5px;
}

.finance-payment-summary-row strong {
  color: var(--text-main);
  font-size: 12px;
}

.finance-fee-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px;
}

.finance-fee-student {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.finance-fee-student:hover { border-color: #9db1c3; }
.finance-fee-student.is-paid { border-color: #7aa98b; background: #f0f8f1; }
.finance-fee-student input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #4f8d69; }
.finance-fee-student-name { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.finance-fee-student-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.finance-fee-student-name small { color: var(--text-muted); font-size: 9.5px; }
.finance-fee-checkmark { margin-left: auto; color: var(--text-light); font-size: 15px; }
.finance-fee-student.is-paid .finance-fee-checkmark { color: #39734f; font-weight: 800; }
.finance-fee-save-actions { margin-top: 12px; align-items: flex-end; }

.finance-filter-row {
  display: flex;
  gap: 6px;
  min-width: 250px;
}

.finance-ledger-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.finance-entry-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-left: 4px solid #c66e60;
  border-radius: 6px;
  background: #fff;
}

.finance-entry-card.income { border-left-color: #5d9b73; }
.finance-entry-main { min-width: 0; flex: 1; }
.finance-entry-topline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-muted); }
.finance-type-tag { padding: 1px 5px; border-radius: 4px; font-weight: 800; }
.finance-type-tag.income { background: #e5f3e9; color: #39734f; }
.finance-type-tag.expense { background: #fbe9e6; color: #a34c41; }
.finance-entry-category { padding: 1px 5px; border: 1px solid var(--border-light); border-radius: 4px; }
.finance-entry-main h4 { margin: 5px 0 2px; font-size: 13px; }
.finance-entry-main p { margin: 0; color: var(--text-muted); font-size: 11px; white-space: pre-wrap; }
.finance-entry-meta { margin-top: 5px; color: var(--text-light); font-size: 9.5px; }
.finance-entry-side { display: flex; align-items: flex-end; flex-direction: column; gap: 6px; white-space: nowrap; }
.finance-entry-side > strong { font-family: var(--font-mono); font-size: 17px; }
.finance-entry-card.income .finance-entry-side > strong { color: #39734f; }
.finance-entry-card.expense .finance-entry-side > strong { color: #a34c41; }
.finance-entry-actions { display: flex; gap: 4px; }
.finance-entry-actions .nav-btn { font-size: 10px; padding: 2px 6px; }
.finance-delete-btn { color: #a34c41; }
.finance-empty-state { padding: 30px 12px; color: var(--text-muted); text-align: center; font-size: 12px; }

.window-header {
  height: 40px;
  background: var(--win-sub);
  border-bottom: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex-shrink: 0;
}

.window-title-area {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 11.5px;
  letter-spacing: 0.05em;
}

.window-controls {
  display: flex;
  gap: 4px;
}

.win-ctl-btn {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--border-color);
  border-radius: 4px;
  background: var(--win-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.win-ctl-btn:hover {
  background: var(--border-color);
  color: #fff;
}

.journal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #f1ede1;
  border-bottom: 1.5px solid var(--border-color);
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}

.journal-tab-group {
  display: flex;
  gap: 6px;
  width: 100%;
}

.journal-tab-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: var(--win-bg);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}

.journal-tab-btn.active {
  background: var(--border-color);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.2);
}

.window-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Studio Layout in Mood Window */
.studio-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

.coord-plane-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.coord-canvas-box {
  width: 250px;
  height: 250px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  position: relative;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
  box-shadow: 3px 3px 0 rgba(30, 35, 41, 0.15);
  overflow: visible;
}

.quadrant-bg-layer {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: none;
  z-index: 1;
}

.q-bg-cell {
  transition: opacity 0.2s;
  opacity: 0.85;
}

.q-bg-cell.top-left { background: var(--q-red-bg); border-right: 1.5px dashed var(--border-color); border-bottom: 1.5px dashed var(--border-color); }
.q-bg-cell.top-right { background: var(--q-yellow-bg); border-bottom: 1.5px dashed var(--border-color); }
.q-bg-cell.bottom-left { background: var(--q-blue-bg); border-right: 1.5px dashed var(--border-color); }
.q-bg-cell.bottom-right { background: var(--q-green-bg); }

.axis-center-x {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-color);
  pointer-events: none;
  z-index: 2;
}

.axis-center-y {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
  pointer-events: none;
  z-index: 2;
}

.corner-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0.85;
  z-index: 3;
}

.corner-label.tl { top: 4px; left: 4px; color: #6e2a1d; }
.corner-label.tr { top: 4px; right: 4px; color: #634b12; }
.corner-label.bl { bottom: 4px; left: 4px; color: #1e3b66; }
.corner-label.br { bottom: 4px; right: 4px; color: #224d31; }

.pinned-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(30, 35, 41, 0.25);
  transition: all 0.08s ease;
  z-index: 10;
}

.floating-lens-card {
  position: absolute;
  background: #fff;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 9px;
  box-shadow: 3px 3px 0 rgba(30, 35, 41, 0.3);
  pointer-events: none;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 5px;
}

.coord-instructions {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

.reflection-studio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pinned-emotion-hero {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.1);
  transition: all 0.15s;
}

.pinned-emotion-hero.q-red { background: var(--q-red-bg); border-color: var(--q-red-border); }
.pinned-emotion-hero.q-yellow { background: var(--q-yellow-bg); border-color: var(--q-yellow-border); }
.pinned-emotion-hero.q-blue { background: var(--q-blue-bg); border-color: var(--q-blue-border); }
.pinned-emotion-hero.q-green { background: var(--q-green-bg); border-color: var(--q-green-border); }

.hero-title-zh {
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-coords-desc {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.85;
}

.prompt-box {
  background: #fff;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.prompt-text {
  color: var(--text-main);
  line-height: 1.45;
  flex: 1;
}

.prompt-switch-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.prompt-switch-btn:hover {
  background: var(--win-sub);
  color: var(--text-main);
}

.deep-note-textarea {
  width: 100%;
  min-height: 100px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

.deep-note-textarea:focus {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(30, 35, 41, 0.08);
}

.studio-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.privacy-toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

.privacy-toggle-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--border-color);
  cursor: pointer;
}

.privacy-toggle-row.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.privacy-toggle-row.is-disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.thread-mute-banner {
  background: #fff5f2;
  border: 1.5px solid #cf8d80;
  color: #9a3c32;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.btn-primary-action {
  padding: 8px 18px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background: var(--border-color);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.25);
  transition: all 0.1s;
}

.btn-primary-action:hover {
  background: #2d343f;
  transform: translateY(-1px);
}

.btn-primary-action:active {
  transform: translateY(2px);
  box-shadow: none;
}

button.is-busy,
.btn-primary-action.is-busy,
.nav-btn.is-busy,
.poll-option-btn.is-busy,
.resp-action-btn.is-busy {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
  filter: grayscale(0.2);
  transform: none !important;
}

.btn-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: btnSpin 0.55s linear infinite;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* Full Calendar Layout */
.full-calendar-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  height: 100%;
}

.calendar-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cal-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.1);
}

.cal-month-title {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
}

.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--win-sub);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.cal-nav-btn:hover {
  background: var(--border-color);
  color: #fff;
}

.weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 2px;
}

.weekday-col.weekend {
  color: #a84b3d;
}

.full-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.full-cal-cell {
  min-height: 50px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  padding: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.1s ease;
  position: relative;
}

.full-cal-cell:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--border-color);
}

.full-cal-cell.not-current {
  background: #f1ede1;
  opacity: 0.55;
}

.full-cal-cell.today {
  border: 2px solid var(--border-color);
  background: #fffdf5;
}

.full-cal-cell.selected {
  border: 2px solid var(--border-color) !important;
  background: #eef4fc !important;
  box-shadow: 3px 3px 0 var(--border-color) !important;
  transform: translateY(-2px);
}

.cal-day-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-today-tag {
  font-size: 8.5px;
  padding: 0 3px;
  background: var(--border-color);
  color: #fff;
  border-radius: 2px;
}

.cal-logs-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5px;
  margin-top: 2px;
}

.cal-log-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}

.cal-log-dot.q-red { background: var(--q-red); }
.cal-log-dot.q-yellow { background: var(--q-yellow); }
.cal-log-dot.q-blue { background: var(--q-blue); }
.cal-log-dot.q-green { background: var(--q-green); }

.day-timeline-panel {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.day-timeline-header {
  border-bottom: 1.5px dashed var(--border-light);
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.day-timeline-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.day-logs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.day-log-item {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--win-bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.day-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

.journal-stream-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journal-card {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.journal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.journal-card-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-word;
}

.journal-card-prompt {
  font-size: 11.5px;
  color: var(--text-muted);
  border-left: 2px solid var(--border-color);
  padding-left: 6px;
}

.journal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--border-light);
  padding-top: 8px;
  font-size: 11.5px;
}

/* ──────────────────────────────────────────
   8. ENLARGED MENTOR STUDIO & DIRECT MESSAGING
   ────────────────────────────────────────── */
#win-mentor {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1080px, calc(100vw - 32px));
  height: min(780px, calc(100vh - 40px));
  background: var(--win-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 8px 8px 0 rgba(30, 35, 41, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5000;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#win-mentor.minimized {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -45%) scale(0.95);
}

.mentor-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #fdf6e2;
  border-bottom: 1.5px solid var(--border-color);
  gap: 6px;
  flex-shrink: 0;
  overflow-x: auto;
}

.mentor-tab-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: var(--win-bg);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.1s;
  white-space: nowrap;
  position: relative;
}

.mentor-tab-btn.active {
  background: var(--border-color);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.2);
}

.mentor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mentor-stat-box {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
}

.mentor-admin-box {
  background: linear-gradient(135deg, #fffef9 0%, #f7fbfc 100%);
}

.mentor-admin-import-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(180px, 0.8fr);
  gap: 12px;
  align-items: stretch;
}

.mentor-admin-textarea {
  display: block;
  width: 100%;
  min-height: 118px;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 7px;
  background: #fff;
  color: var(--text-main);
  font: 11.5px/1.55 var(--font-mono);
  resize: vertical;
  box-sizing: border-box;
}

.mentor-admin-textarea:focus {
  outline: none;
  border-color: var(--q-blue-border);
  box-shadow: 0 0 0 2px rgba(94, 143, 190, 0.14);
}

.mentor-admin-import-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.mentor-admin-import-actions input[type="file"] {
  width: 100%;
  font-size: 11px;
}

.mentor-admin-security-note {
  padding: 7px 8px;
  border: 1px dashed var(--border-light);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.5;
  background: rgba(255,255,255,0.72);
}

.mentor-admin-result {
  max-height: 190px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid #b8d9c1;
  border-radius: 6px;
  background: #f1fbf3;
  color: #275d36;
  font-size: 11px;
  line-height: 1.55;
}

.mentor-admin-reset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

.mentor-admin-reset-row > div:first-child {
  flex: 1 1 360px;
}

.mentor-admin-check-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
}

.mentor-admin-check-label input { accent-color: #b86f54; }

.danger-btn {
  color: #9a3c32 !important;
  border-color: #cf8d80 !important;
  background: #fff5f2 !important;
}

.mentor-admin-credential-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 10.5px;
}

.mentor-admin-credential-table th,
.mentor-admin-credential-table td {
  padding: 4px 6px;
  border: 1px solid #cfe3d2;
  text-align: left;
  white-space: nowrap;
}

.mentor-admin-credential-table th { background: #e4f4e7; }

.stat-header {
  font-family: var(--font-pixel);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.weather-bar-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.weather-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}

.weather-bar-track {
  flex: 1;
  height: 10px;
  background: var(--win-sub);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  overflow: hidden;
}

.weather-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.weather-bar-fill.red { background: var(--q-red); }
.weather-bar-fill.yellow { background: var(--q-yellow); }
.weather-bar-fill.blue { background: var(--q-blue); }
.weather-bar-fill.green { background: var(--q-green); }

.watchlist-item {
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fffbf9;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

/* ──────────────────────────────────────────
   DIRECT MESSAGING & INBOX CHAT SYSTEM
   ────────────────────────────────────────── */
.mentor-inbox-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  height: 100%;
  min-height: 520px;
}

.threads-list-pane {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pane-header-title {
  padding: 10px 12px;
  background: var(--win-sub);
  border-bottom: 1.5px solid var(--border-color);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.threads-items-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.thread-item-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.1s;
}

.thread-item-row:hover {
  background: #fffdf5;
}

.thread-item-row.active {
  background: #f4edd9 !important;
  border-left: 4px solid var(--q-yellow-border);
}

.thread-item-row.has-unread {
  background: #fff9f0;
}

.thread-user-name {
  font-size: 12.5px;
  font-weight: 700;
}

.thread-last-msg {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
  margin-top: 2px;
}

.chat-conversation-pane {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.chat-thread-header {
  padding: 10px 14px;
  background: var(--win-sub);
  border-bottom: 1.5px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #faf9f5;
  -webkit-overflow-scrolling: touch;
}

.chat-bubble-row {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.chat-bubble-row.from-mentor {
  align-self: flex-start;
}

.chat-bubble-row.from-student {
  align-self: flex-end;
}

.chat-bubble {
  padding: 9px 13px;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  font-size: 13px;
  line-height: 1.6;
  position: relative;
  word-break: break-word;
}

.chat-bubble.from-mentor {
  background: #fef7e0;
  border-color: var(--q-yellow-border);
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
}

.chat-bubble.from-student {
  background: #fff;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
}

.chat-meta-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-light);
  margin-top: 3px;
}

.chat-bubble-row.from-student .chat-meta-time {
  text-align: right;
}

.chat-input-toolbar {
  padding: 10px 14px;
  background: var(--win-bg);
  border-top: 1.5px solid var(--border-color);
  display: flex;
  gap: 8px;
}

.chat-input-toolbar textarea {
  flex: 1;
  height: 48px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  resize: none;
  outline: none;
  box-sizing: border-box;
}

.broadcast-studio-box {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
}

/* Radio & Checkbox Label Group */
.radio-group-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 6px 0;
}

.radio-option-label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 500;
  white-space: nowrap !important;
  user-select: none;
}

.student-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: var(--win-bg);
  max-height: 140px;
  overflow-y: auto;
}

.student-chip-checkbox {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.1s;
}

.student-chip-checkbox:hover {
  background: #fffdf5;
}

/* ──────────────────────────────────────────
   ROSTER TABLE & SPECIFIC OFFICER BADGES
   ────────────────────────────────────────── */
.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.roster-table th, .roster-table td {
  border: 1.5px solid var(--border-light);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

.roster-table th {
  background: var(--win-sub);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
}

.roster-table tbody tr:hover {
  background: #fffdf7;
}

.officer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1.5px solid var(--q-blue-border);
  background: var(--q-blue-bg);
  color: #1e3b66;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.mute-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1.5px solid #cf8d80;
  background: #fff5f2;
  color: #9a3c32;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.roster-role-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.officer-quick-tag {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--win-bg);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
}

.officer-quick-tag:hover {
  background: var(--border-color);
  color: #fff;
}

/* ──────────────────────────────────────────
   STUDENT COMPREHENSIVE PROFILE & MINI MOOD CALENDAR
   ────────────────────────────────────────── */
#modal-student-profile .modal-card {
  max-width: 680px;
  max-height: min(780px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#student-profile-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.student-profile-body {
  flex: 1;
  min-height: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.profile-hero-card {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
}

.student-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
}

.info-item-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.info-item-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 700;
}

.info-item-val {
  color: var(--text-main);
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}

/* ── MINI MOOD COLOR CALENDAR (迷你精緻版) ── */
.mini-mood-cal-card {
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: #fcfbf8;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.08);
}

.mini-cal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
}

.mini-cal-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mini-cal-nav-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
}

.mini-cal-nav-btn:hover {
  background: var(--border-color);
  color: #fff;
}

.mini-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 2px;
}

.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mini-cal-cell {
  aspect-ratio: 1;
  max-height: 38px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}

.mini-cal-cell:hover {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  z-index: 5;
}

.mini-cal-cell.blank {
  background: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.mini-cal-cell.empty {
  background: #ebe7de;
  color: #7d776a;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.mini-cal-cell.q-red {
  background: #bf6459;
  color: #fff;
  border: 1px solid #a84b3d;
}

.mini-cal-cell.q-yellow {
  background: #d8a543;
  color: #fff;
  border: 1px solid #be8c28;
}

.mini-cal-cell.q-blue {
  background: #7393bb;
  color: #fff;
  border: 1px solid #57779f;
}

.mini-cal-cell.q-green {
  background: #6e9d86;
  color: #fff;
  border: 1px solid #55836c;
}

/* Multi-color Split Layer (若該天有多次打卡，以多色塊分割表示) */
.mini-cal-cell.multi {
  border: 1px solid var(--border-color);
}

.split-color-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.color-slice {
  flex: 1;
  height: 100%;
}

.color-slice.q-red { background: #bf6459; }
.color-slice.q-yellow { background: #d8a543; }
.color-slice.q-blue { background: #7393bb; }
.color-slice.q-green { background: #6e9d86; }

.day-num-overlay {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.mini-cal-legend-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  padding-top: 2px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.legend-square {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}

.legend-square.red { background: #bf6459; }
.legend-square.yellow { background: #d8a543; }
.legend-square.blue { background: #7393bb; }
.legend-square.green { background: #6e9d86; }

.mini-cal-day-detail-box {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
}

/* Counseling Records Box & Form */
.counseling-records-box {
  border: 1.5px solid var(--q-yellow-border);
  border-radius: 8px;
  background: #fffdf5;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.counseling-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.counseling-record-card {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 1px 1px 0 rgba(30, 35, 41, 0.08);
}

.counseling-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

.counseling-cat-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--win-sub);
}

.counseling-cat-pill.academic { background: #eaf1fb; border-color: var(--q-blue-border); color: #1e3b66; }
.counseling-cat-pill.mood { background: #fde8e4; border-color: var(--q-red-border); color: #a82e1d; }
.counseling-cat-pill.career { background: #fdf6e2; border-color: var(--q-yellow-border); color: #634b12; }
.counseling-add-form {
  border-top: 1.5px dashed var(--border-light);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.counseling-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.counseling-meta-row input[type="datetime-local"],
.counseling-meta-row select {
  padding: 6px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  background: #fff;
}

.counseling-textarea {
  width: 100%;
  min-height: 90px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

.counseling-textarea:focus {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(30, 35, 41, 0.1);
}

/* ──────────────────────────────────────────
   CLASS MOOD DYNAMICS OVER TIME (全班歷時心情趨勢追蹤)
   ────────────────────────────────────────── */
.climate-trend-box {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 1px 1px 0 rgba(30, 35, 41, 0.06);
}

/* 1. Spectrum Stacked Bar Mode */
.spectrum-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 4px 4px;
  min-height: 160px;
  -webkit-overflow-scrolling: touch;
}

.spectrum-day-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 32px;
}

.spectrum-bar-track {
  width: 100%;
  max-width: 34px;
  height: 120px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  background: #ebe7de;
  position: relative;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.spectrum-bar-track:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

.spec-slice {
  width: 100%;
  transition: height 0.2s ease;
}

.spec-slice.q-red { background: #bf6459; }
.spec-slice.q-yellow { background: #d8a543; }
.spec-slice.q-blue { background: #7393bb; }
.spec-slice.q-green { background: #6e9d86; }

.spectrum-day-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
}

/* 2. SVG Line Chart Mode */
.climate-chart-svg-wrap {
  width: 100%;
  height: 190px;
  position: relative;
}

/* 3. Heatmap Matrix Mode */
.climate-matrix-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}

.climate-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.climate-matrix-table th, .climate-matrix-table td {
  border: 1px solid var(--border-light);
  padding: 6px 8px;
  text-align: center;
}

.climate-matrix-table th {
  background: var(--win-sub);
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
}

.matrix-cell-box {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.matrix-cell-box.empty {
  background: #ebe7de;
  color: #7d776a;
}

.matrix-cell-box.q-red { background: #bf6459; }
.matrix-cell-box.q-yellow { background: #d8a543; }
.matrix-cell-box.q-blue { background: #7393bb; }
.matrix-cell-box.q-green { background: #6e9d86; }

/* ──────────────────────────────────────────
   8.5 STORAGE & QUOTA DASHBOARD
   ────────────────────────────────────────── */
.storage-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.storage-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.storage-kpi-card {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.06);
  position: relative;
  overflow: hidden;
}

.storage-kpi-card.highlight {
  border-color: #2a7a4c;
  background: #fbfdfc;
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.kpi-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.kpi-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 4px;
}

.kpi-tag.free {
  background: #eef7f2;
  color: #2a7a4c;
  border: 1px solid #b8e0c8;
}

.kpi-tag.success {
  background: #eef7f2;
  color: #2a7a4c;
  border: 1px solid #b8e0c8;
}

.kpi-tag.cost-zero {
  background: #fdf5e6;
  color: #b56c00;
  border: 1px solid #f4d092;
}

.kpi-main-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  font-family: var(--font-mono);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.kpi-main-val .unit {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-light);
}

.storage-progress-bar-track {
  width: 100%;
  height: 6px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.storage-progress-bar-fill {
  height: 100%;
  background: #2a7a4c;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.kpi-stats-row {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi-sub-desc {
  font-size: 11px;
  color: var(--text-light);
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed var(--border-light);
  padding-top: 5px;
  margin-top: 2px;
}

.storage-env-specs-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────
   9. MODALS & FORMS
   ────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 35, 41, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* Password recovery must remain reachable while the authentication gate is open. */
#modal-forgot-password {
  z-index: 99995;
}

.modal-card {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  background: var(--win-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#modal-profile .modal-card,
#modal-new-assignment .modal-card {
  max-width: 580px;
  max-height: min(680px, calc(100vh - 40px));
}

.modal-body {
  flex: 1;
  min-height: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#modal-new-bulletin .modal-card {
  max-width: 680px;
  max-height: min(860px, calc(100vh - 32px));
}

#modal-new-bulletin .modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#modal-new-bulletin .modal-body > * {
  flex-shrink: 0;
}

#modal-new-bulletin .modal-body::after {
  content: '';
  display: block;
  height: 8px;
  flex-shrink: 0;
}

.bulletin-audience-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.bulletin-audience-mode-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

.bulletin-audience-mode-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bulletin-audience-mode-option.selected,
.bulletin-audience-mode-option:has(input:checked) {
  color: #fff;
  background: var(--border-color);
}

.bulletin-custom-audience {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
  padding: 10px;
  border: 1.5px dashed var(--border-color);
  border-radius: 8px;
  background: #faf8ff;
}

.bulletin-custom-audience[hidden] {
  display: none !important;
}

.bulletin-audience-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bulletin-audience-tools input[type="search"] {
  flex: 1;
  min-width: 0;
}

.bulletin-audience-tools .nav-btn {
  flex-shrink: 0;
  padding: 5px 9px;
  font-size: 10.5px;
  font-weight: 700;
}

.bulletin-audience-summary {
  color: #5f418f;
  font-size: 11px;
  font-weight: 700;
}

.bulletin-audience-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  max-height: 180px;
  padding-right: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bulletin-audience-person {
  display: grid;
  grid-template-columns: auto 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
}

.bulletin-audience-person.selected {
  border-color: #6b4aa0;
  background: #f3eefc;
  box-shadow: inset 3px 0 0 #6b4aa0;
}

.bulletin-audience-person input {
  margin: 0;
}

.bulletin-audience-seat {
  font-family: var(--font-mono);
  font-weight: 800;
  text-align: center;
}

.bulletin-audience-person-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulletin-audience-person-name small {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulletin-audience-empty {
  grid-column: 1 / -1;
  padding: 16px 8px;
  color: var(--text-muted);
  text-align: center;
  font-size: 11px;
}

.bulletin-audience-privacy-note {
  color: #8a5a16;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.45;
}

#bulletin-content-input {
  width: 100%;
  min-height: 220px;
  max-height: 45vh;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 7px;
  background: #fff;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.65;
  resize: vertical;
  outline: none;
}

#bulletin-content-input:focus {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(30, 35, 41, 0.08);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.form-group input:not([type="checkbox"]):not([type="radio"]), 
.form-group select {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  background: #fff;
  outline: none;
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
  width: auto;
  cursor: pointer;
  accent-color: var(--border-color);
}

.profile-password-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  background: var(--win-sub);
}

.profile-password-title {
  font-size: 12.5px;
  font-weight: 800;
}

.profile-password-help,
.profile-password-toggle {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.profile-password-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.profile-password-feedback {
  padding: 8px 10px;
  border: 1px solid #b87333;
  border-radius: 6px;
  background: #fff6df;
  color: #71420f;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
}

.profile-password-feedback.is-error {
  border-color: #b84040;
  background: #fff0f0;
  color: #852929;
}

.profile-password-feedback.is-success {
  border-color: #3d8a62;
  background: #eefaf3;
  color: #256142;
}

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}

.toast-item {
  padding: 8px 14px;
  background: var(--border-color);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  animation: toastIn 0.2s ease both;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────
   BULLETIN DISCUSSION & OPINIONS SECTION
   ────────────────────────────────────────── */
.bulletin-discussion-section {
  background: #faf8f5;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.discussion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 8px;
}

.bulletin-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

.bulletin-comment-item {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bulletin-comment-item .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.bulletin-comment-item .comment-content {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-main);
  word-break: break-word;
}

.bulletin-comment-input-box {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.comment-text-input {
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
  outline: none;
  font-family: var(--font-sans);
}

.comment-text-input:focus {
  border-color: var(--q-blue-border);
}

/* ──────────────────────────────────────────
   IMAGE ATTACHMENTS & LIGHTBOX
   ────────────────────────────────────────── */
.image-preview-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1.5px dashed var(--border-color);
  border-radius: 6px;
  background: #fff;
  margin-bottom: 6px;
}

.image-preview-thumb {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 4px;
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.image-preview-thumb:hover {
  transform: scale(1.04);
}

.image-remove-btn {
  background: #fde8e4;
  border: 1px solid var(--q-red-border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #a82e1d;
  cursor: pointer;
}

.post-attached-image {
  max-width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 6px;
  border: 1.5px solid var(--border-color);
  margin-top: 8px;
  cursor: pointer;
  background: #fff;
  box-shadow: 1px 1px 0 rgba(30, 35, 41, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.post-attached-image:hover {
  transform: scale(1.01);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.bulletin-detail-image {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  margin-top: 8px;
  cursor: pointer;
  background: #fff;
  box-shadow: var(--shadow-subtle);
  transition: transform 0.15s ease;
}

.bulletin-detail-image:hover {
  transform: scale(1.008);
}

.chat-attached-image {
  max-width: 180px;
  max-height: 140px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 6px;
  cursor: pointer;
  border: 1px solid rgba(30, 35, 41, 0.2);
  display: block;
}

.lightbox-content-box {
  max-width: min(92vw, 860px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.lightbox-top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}

.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  background: #111;
}

/* ──────────────────────────────────────────
   5.5 MOOD CHECK-IN ASSIGNMENTS DASHBOARD
   ────────────────────────────────────────── */
.assignments-dashboard-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.assignments-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.06);
  flex-wrap: wrap;
  gap: 8px;
}

.assignments-split-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  flex: 1;
  min-height: 480px;
  overflow: hidden;
}

.assignments-list-col {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.06);
}

.col-sub-header {
  padding: 8px 12px;
  background: var(--win-sub);
  border-bottom: 1.5px solid var(--border-color);
  font-family: var(--font-pixel);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.assignments-cards-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assignment-item-card {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  background: var(--win-bg);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.assignment-item-card:hover {
  background: #fffdf5;
  transform: translateX(2px);
  box-shadow: 2px 2px 0 var(--border-color);
}

.assignment-item-card.active {
  background: #fff;
  border-color: var(--border-color);
  box-shadow: 3px 3px 0 var(--border-color);
  border-left: 5px solid #2a7a4c;
}

.assignment-card-title {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--text-main);
  line-height: 1.35;
}

.assignment-card-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.assignment-prog-bar-track {
  flex: 1;
  height: 6px;
  background: #ebe7de;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.assignment-prog-bar-fill {
  height: 100%;
  background: #2a7a4c;
  transition: width 0.3s ease;
}

.assignments-detail-col {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.06);
}

.assignment-detail-scroll {
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.assignment-detail-header-card {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  background: #faf8f5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assignment-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.assignment-kpi-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.assignment-kpi-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.assignment-kpi-lbl {
  font-size: 10.5px;
  color: var(--text-muted);
}

.assignment-roster-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.submission-record-row {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 0.12s ease;
}

.submission-record-row:hover {
  border-color: var(--border-color);
  background: #faf8f5;
}

.unsubmitted-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.unsubmitted-student-pill {
  border: 1px solid #f7c3bc;
  background: #fdf0ee;
  color: #c0392b;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Student Pending Assignment Banner */
.student-assignment-banner {
  background: #fffdf2;
  border: 1.5px solid var(--q-yellow-border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.06);
  animation: pulseLight 2s infinite ease-in-out;
}

@keyframes pulseLight {
  0%, 100% { border-color: var(--q-yellow-border); }
  50% { border-color: #be8c28; box-shadow: 0 0 6px rgba(216, 165, 67, 0.35); }
}

.student-chips-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.student-check-chip {
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: #fff;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.student-check-chip.selected {
  background: var(--border-color);
  color: #fff;
  border-color: var(--border-color);
}

/* ──────────────────────────────────────────
   5.6 SUBMIT MOOD ASSIGNMENT MODAL
   ────────────────────────────────────────── */
#modal-assignment-checkin .modal-card {
  max-width: 620px;
  max-height: min(720px, calc(100vh - 30px));
}

.assignment-task-banner-card {
  border: 1.5px solid var(--q-yellow-border);
  background: #fffdf5;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.assign-coord-picker-wrapper {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  align-items: start;
  background: var(--win-sub);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
}

.assign-coord-canvas-box {
  width: 190px;
  height: 190px;
  position: relative;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: crosshair;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.1);
  margin: 0 auto;
}

.assign-emotion-quick-select {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.assign-emotion-chips-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
}

.assign-emotion-chip-btn {
  padding: 2.5px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--win-bg);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.assign-emotion-chip-btn:hover {
  background: #f0ede6;
  border-color: var(--border-color);
}

.assign-emotion-chip-btn.selected {
  background: var(--border-color);
  color: #fff;
  border-color: var(--border-color);
  font-weight: 700;
}

/* Switch to a two-row header before the identity area can collide with nav. */
@media (max-width: 1280px) {
  #system-bar {
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand status"
      "nav nav";
    row-gap: 8px;
    column-gap: 8px;
    padding: 8px 12px 10px;
  }

  .brand-section { grid-area: brand; }
  .sys-status-cluster { grid-area: status; }
  .sys-nav {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .sys-nav-btn {
    min-width: 0;
    width: 100%;
  }

  .sys-brand-sub {
    display: none;
  }

  #main-workspace-window {
    top: 112px;
  }
}

/* ==========================================================================
   10. MOBILE RESPONSIVE OPTIMIZATION
   ========================================================================== */
@media (max-width: 768px) {
  .modal-backdrop {
    padding: 12px;
  }

  .mentor-admin-import-grid {
    grid-template-columns: 1fr;
  }

  .mentor-admin-reset-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .mentor-admin-reset-row .nav-btn {
    width: 100%;
  }

  #system-bar {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand status"
      "nav nav";
    row-gap: 8px;
    column-gap: 8px;
    padding: 8px 10px 10px;
  }

  .brand-section { grid-area: brand; }
  .sys-status-cluster { grid-area: status; }
  .sys-nav {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .sys-nav-btn {
    min-width: 0;
    width: 100%;
    height: 48px;
    padding: 4px 4px;
    font-size: 10.5px;
    gap: 2px;
    flex-direction: column;
  }

  .identity-chip {
    width: min(280px, 100%);
    max-width: 168px;
    padding: 0 6px 0 3px;
    gap: 6px;
  }

  .identity-avatar {
    width: 26px;
    height: 26px;
  }

  .identity-name {
    font-size: 12px;
  }

  .identity-chip.name-fit-four .identity-name,
  .identity-chip.name-over-four .identity-name {
    font-size: 11px;
  }

  .identity-edit-label {
    display: none;
  }

  .identity-edit {
    padding: 3px 5px;
  }

  .sys-brand-sub,
  #sys-clock {
    display: none;
  }

  .nav-btn {
    padding: 4px 8px;
    font-size: 11.5px;
  }

  #main-workspace-window {
    left: 0;
    right: 0;
    top: 120px;
    bottom: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    box-shadow: none;
  }

  .mobile-main-tab-bar {
    display: flex;
  }

  .two-column-container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 46px);
    overflow: hidden;
  }

  .main-col-bulletin {
    border-right: none;
    border-bottom: none;
    height: 100%;
    flex: 1;
  }

  .sec-col-threads {
    border-right: none;
    height: 100%;
    flex: 1;
  }

  .main-col-bulletin.mobile-hidden,
  .sec-col-threads.mobile-hidden {
    display: none !important;
  }

  .col-header {
    padding: 8px 12px;
  }

  .col-body-scroll {
    padding: 10px 12px;
  }

  .bulletin-list-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
  }

  .row-left-main {
    width: 100%;
  }

  .row-title-text {
    white-space: normal;
    font-size: 13px;
    line-height: 1.35;
  }

  .row-right-meta {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    border-top: 1px dashed var(--border-light);
    padding-top: 5px;
    margin-top: 2px;
  }

  #win-mood-meter, #win-mentor, #win-finance {
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .finance-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .finance-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-form-wide { grid-column: span 2; }
  .finance-filter-row { min-width: 0; flex: 1; }
  .finance-payment-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-fee-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-payment-toolbar { align-items: stretch; flex-direction: column; }
  .finance-payment-plan-select { max-width: none; }
  .finance-fee-actions { justify-content: flex-end; }

  .mentor-inbox-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .window-header {
    height: 44px;
    padding: 0 14px;
  }

  .win-ctl-btn {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .studio-layout, .full-calendar-layout, .mentor-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .student-info-grid {
    grid-template-columns: 1fr;
  }

  .counseling-form-inputs-row {
    grid-template-columns: 1fr;
  }

  .coord-canvas-box {
    width: min(260px, 85vw);
    height: min(260px, 85vw);
  }

  .form-group input:not([type="checkbox"]):not([type="radio"]), 
  .form-group select, 
  .note-textarea, 
  .reply-input-row input, 
  .chat-input-toolbar textarea {
    font-size: 16px !important;
  }

  #bulletin-content-input {
    min-height: 180px;
    max-height: 36vh;
  }

  .bulletin-audience-directory {
    grid-template-columns: 1fr;
    max-height: 210px;
  }

  .bulletin-audience-tools {
    flex-wrap: wrap;
  }

  .bulletin-audience-tools input[type="search"] {
    flex-basis: 100%;
  }

  .modal-card {
    max-height: calc(100vh - 24px) !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ──────────────────────────────────────────
   11. SPACE BRANDING & RETRO LOGIN SCREEN
   ────────────────────────────────────────── */
.brand-badge-retro {
  font-family: 'Press Start 2P', 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 3px 8px;
  background: var(--border-color);
  color: #a8d5b8;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  display: inline-block;
}

.space-login-screen {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: var(--desk-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.space-login-canvas {
  width: 100%;
  max-width: 680px;
  position: relative;
  margin: auto;
}

.space-crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.04) 50%);
  background-size: 100% 4px;
  z-index: 10;
  border-radius: 12px;
}

.space-login-window {
  background: var(--win-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 8px 8px 0 rgba(30, 35, 41, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.space-login-header {
  padding: 10px 14px;
  background: var(--win-sub);
  border-bottom: 2px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.space-term-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.space-header-lights {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sys-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}
.sys-dot.red { background: #e06c75; }
.sys-dot.yellow { background: #e5c07b; }
.sys-dot.green { background: #98c379; }
.sys-dot.green.blink {
  animation: dotBlink 1.2s infinite ease-in-out;
}
@keyframes dotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
}

.space-login-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.space-branding-hero {
  text-align: center;
  padding: 6px 0 12px;
  border-bottom: 1.5px dashed var(--border-light);
}

.space-retro-title {
  font-family: 'Press Start 2P', 'Silkscreen', monospace;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--text-main);
  text-shadow: 3px 3px 0 rgba(30, 35, 41, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.space-pixel-symbol {
  color: #3b6e53;
  animation: pulseSymbol 2s infinite ease-in-out;
}
@keyframes pulseSymbol {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.space-retro-subtitle {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 2px;
}

.space-retro-desc {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.05em;
}

.space-auth-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1.5px solid var(--border-color);
  padding-bottom: 8px;
}

.space-auth-tab {
  padding: 6px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: var(--win-bg);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.space-auth-tab:hover {
  background: #eeeade;
}

.space-auth-tab.active {
  background: var(--border-color);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.2);
}

.space-auth-panel {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

.space-auth-panel.active {
  display: block;
  width: 100%;
}

.space-auth-panel form {
  width: 100%;
  box-sizing: border-box;
}

.space-auth-panel .form-group {
  width: 100%;
  box-sizing: border-box;
}

.space-auth-panel input {
  width: 100%;
  box-sizing: border-box;
}

.space-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.space-identity-card {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(30, 35, 41, 0.1);
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.space-identity-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(30, 35, 41, 0.2);
  border-color: var(--border-color);
}

.space-identity-card.mentor {
  border-left: 5px solid #d8a543;
  background: #fffdf8;
}

.space-identity-card.officer {
  border-left: 5px solid #bf6459;
  background: #fdfaf9;
}

.space-identity-card.student {
  border-left: 5px solid #6e9d86;
  background: #f8fbf9;
}

.space-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.space-card-role {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
.space-card-role.mentor { background: #fbf2db; color: #8a6414; }
.space-card-role.officer { background: #faeae8; color: #a13d31; }
.space-card-role.student { background: #eaf4ee; color: #2d734e; }

.space-card-seat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.space-card-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.space-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
  min-height: 30px;
}

.space-card-enter {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-main);
  text-align: right;
}

.space-term-status-strip {
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.term-blink-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a7a4c;
  animation: dotBlink 1s infinite;
}

/* ──────────────────────────────────────────
   12. SPACE BOOTLOADER PROGRESS ANIMATION SCREEN
   ────────────────────────────────────────── */
.space-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0d1117;
  color: #a8d5b8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--font-mono);
}

.space-boot-terminal {
  width: 100%;
  max-width: 640px;
  background: #151b23;
  border: 2px solid #2d3846;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8), 6px 6px 0 rgba(0, 0, 0, 0.4);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.boot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2d3846;
  padding-bottom: 8px;
}

.boot-banner-ascii pre {
  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1.1;
  color: #61afef;
  text-shadow: 0 0 8px rgba(97, 175, 239, 0.4);
  overflow-x: auto;
}

.boot-console-logs {
  background: #0b0e14;
  border: 1px solid #232d3a;
  border-radius: 6px;
  padding: 10px 12px;
  height: 120px;
  overflow-y: auto;
  font-size: 11.5px;
  line-height: 1.5;
  color: #98c379;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
}

.boot-progress-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.boot-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #e5c07b;
}

.boot-progress-track {
  width: 100%;
  height: 14px;
  background: #0b0e14;
  border: 1.5px solid #2d3846;
  border-radius: 4px;
  overflow: hidden;
  padding: 1px;
}

.boot-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b6e53, #98c379);
  box-shadow: 0 0 10px rgba(152, 195, 121, 0.6);
  border-radius: 2px;
  transition: width 0.2s linear;
}

.boot-footer-tips {
  font-size: 10px;
  color: #5c6370;
  text-align: center;
  border-top: 1px solid #232d3a;
  padding-top: 6px;
}

@media (max-width: 600px) {
  .finance-form-grid,
  .finance-payment-form-grid { grid-template-columns: 1fr; }
  .finance-form-wide,
  .finance-payment-form-grid .finance-form-wide { grid-column: auto; }
  .finance-fee-checklist { grid-template-columns: 1fr; max-height: 230px; }
  .finance-payment-summary-row { align-items: flex-start; flex-direction: column; }
  .finance-form-actions.finance-fee-save-actions { align-items: stretch; flex-direction: column; }
  .finance-fee-save-actions > div { justify-content: flex-end; }
  .space-quick-grid {
    grid-template-columns: 1fr;
  }
  .space-retro-title {
    font-size: 24px;
  }
  .boot-banner-ascii {
    display: none;
  }
}

/* ──────────────────────────────────────────
   13. SIMULATE STUDENT PERSPECTIVE MODAL
   ────────────────────────────────────────── */
.sim-student-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sim-student-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1.5px solid var(--border-light);
  border-radius: 6px;
  background: var(--win-bg);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sim-student-card:hover {
  background: #fff;
  border-color: var(--border-color);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(30, 35, 41, 0.15);
}

.mentor-preview-btn {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1.5px solid #735d24;
  border-radius: 6px;
  background: #fff8dc;
  color: #4f411d;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.mentor-preview-btn:hover {
  background: #fff;
  box-shadow: 2px 2px 0 rgba(30, 35, 41, 0.18);
}

#modal-student-preview {
  z-index: 10020;
}

#modal-student-preview .student-preview-modal-card {
  max-width: min(1040px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 40px));
}

.student-preview-modal-body {
  gap: 12px;
}

.student-preview-safety-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1.5px solid #b88d2a;
  border-radius: 7px;
  background: #fff8dc;
  color: #51431f;
  font-size: 11.5px;
  line-height: 1.5;
}

.student-preview-safety-banner strong {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: #51431f;
  color: #fff;
  font-size: 10.5px;
}

.student-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--border-light);
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
}

.student-preview-toolbar label {
  font-weight: 800;
}

.student-preview-toolbar select {
  min-width: 220px;
  padding: 5px 8px;
  border: 1.5px solid var(--border-color);
  border-radius: 5px;
  background: var(--win-bg);
  font: inherit;
}

.student-preview-scope {
  margin-left: auto;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.student-preview-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 0 0 auto;
}

.student-preview-tab {
  padding: 5px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: var(--win-bg);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.student-preview-tab.active {
  background: var(--border-color);
  color: #fff;
}

.student-preview-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  border: 2px solid var(--border-color);
  border-radius: 9px;
  background: #f7f4ed;
}

.student-preview-profile-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 7px;
  background: #fff;
}

.student-preview-profile-bar > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-preview-profile-bar strong {
  font-size: 14px;
}

.student-preview-profile-bar span {
  color: var(--text-muted);
  font-size: 11px;
}

.student-preview-lock {
  text-align: right;
  color: #2f6449 !important;
  font-weight: 700;
}

.student-preview-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.student-preview-summary-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px;
  border: 1.5px solid var(--border-light);
  border-radius: 7px;
  background: #fff;
}

.student-preview-summary-grid strong {
  font-family: var(--font-mono);
  font-size: 18px;
}

.student-preview-summary-grid span {
  color: var(--text-muted);
  font-size: 10.5px;
}

.student-preview-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.student-preview-section-title {
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 800;
}

.student-preview-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.student-preview-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px;
  border: 1.5px solid var(--border-light);
  border-radius: 7px;
  background: #fff;
  color: var(--text-main);
  font-size: 12px;
  line-height: 1.5;
}

.student-preview-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.student-preview-item-head span,
.student-preview-item small {
  color: var(--text-muted);
  font-size: 10.5px;
}

.student-preview-item-head .preview-status-done {
  color: #2d734e;
  font-weight: 800;
}

.student-preview-item-head .preview-status-pending {
  color: #9b5b20;
  font-weight: 800;
}

.student-preview-message-list .preview-from-mentor {
  margin-right: 12%;
  border-left-color: #b88d2a;
}

.student-preview-message-list .preview-from-student {
  margin-left: 12%;
  border-right-color: #7393bb;
}

.student-preview-empty {
  padding: 24px 14px;
  border: 1.5px dashed var(--border-light);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .student-preview-safety-banner,
  .student-preview-toolbar,
  .student-preview-profile-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .student-preview-toolbar select {
    width: 100%;
    min-width: 0;
  }

  .student-preview-scope {
    margin-left: 0;
  }

  .student-preview-summary-grid,
  .student-preview-columns {
    grid-template-columns: 1fr;
  }

  .student-preview-lock {
    text-align: left;
  }
}

/* ──────────────────────────────────────────
   Mood Garden — greenhouse, collection and mentor controls
   ────────────────────────────────────────── */
.garden-subnav {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px dashed var(--border-light);
}

.garden-subnav button {
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  padding: 5px 14px;
  font: 700 12px var(--font-sans);
  cursor: pointer;
}

.garden-subnav button.active { background: var(--border-color); color: #fff; }
.garden-subnav > span { margin-left: auto; color: var(--text-muted); font-size: 11px; }

.garden-greenhouse-card {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(330px, 1.1fr);
  min-height: 430px;
  overflow: hidden;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: #f8f6ee;
  box-shadow: var(--shadow-solid);
}

.garden-sky {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  overflow: hidden;
  background: linear-gradient(180deg, #344b72 0%, #6f8fa6 55%, #d0c9a8 56%, #b79b70 100%);
}

.garden-sky::after {
  content: '';
  position: absolute;
  inset: 56% 0 auto;
  height: 2px;
  background: rgba(255,255,255,.35);
}

.garden-star { position: absolute; width: 3px; height: 3px; background: #f9efc9; box-shadow: 0 0 7px #f9efc9; }
.garden-star.s1 { top: 17%; left: 20%; }.garden-star.s2 { top: 28%; right: 17%; }.garden-star.s3 { top: 11%; right: 38%; }

.garden-status-card { padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; }
.garden-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.garden-status-head strong { display: block; font-size: 18px; line-height: 1.45; }
.garden-status-head small { display: block; margin-top: 4px; color: var(--text-muted); font-family: var(--font-mono); }
.garden-status-card > p { margin: 18px 0 16px; color: var(--text-muted); font-size: 12.5px; line-height: 1.8; }
.garden-mystery-label { flex: 0 0 auto; padding: 4px 8px; border: 1px dashed var(--text-muted); border-radius: 5px; color: var(--text-muted); font: 700 10.5px var(--font-mono); }

.garden-progress-row, .garden-extra-growth { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.garden-progress-dot { width: 29px; height: 29px; display: grid; place-items: center; border: 1.5px solid #7b8791; border-radius: 50%; background: #fff; color: #7b8791; font: 700 10px var(--font-mono); }
.garden-progress-dot.done { background: #73977c; border-color: #4e745a; color: #fff; box-shadow: inset 0 0 0 3px rgba(255,255,255,.28); }
.garden-progress-dot.special { border-style: dashed; border-color: #b28e39; }
.garden-progress-dot.special.done { background: #b28e39; }
.garden-extra-growth { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--border-light); }
.garden-extra-growth > span:first-child { margin-right: 3px; color: #8e6c20; font-size: 10.5px; font-weight: 700; }

.garden-daily-note { margin-top: 20px; padding: 10px 12px; border: 1px solid #d5c79e; border-radius: 6px; background: #fffaf0; color: #765e27; font-size: 11.5px; }
.garden-daily-note.done { border-color: #bad0bf; background: #eef7f0; color: #376348; }
.garden-principle-note { margin-top: 12px; color: var(--text-muted); text-align: center; font-size: 11px; line-height: 1.7; }

.garden-primary-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  padding: 9px 18px;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  background: #e8c85e;
  color: #25231d;
  box-shadow: 3px 3px 0 rgba(30,35,41,.22);
  font: 800 12.5px var(--font-sans);
  cursor: pointer;
}
.garden-primary-btn:disabled { opacity: .5; cursor: wait; }

.garden-empty { padding: 55px 20px; border: 1.5px dashed var(--border-light); border-radius: 8px; color: var(--text-muted); text-align: center; }

.garden-mentor-test-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid #d3bd77;
  border-radius: 7px;
  background: #fff9e8;
  color: #624f20;
  font-size: 11px;
}
.garden-mentor-test-banner strong { flex: 0 0 auto; font-size: 11.5px; }
.garden-mentor-test-banner span { line-height: 1.55; }

/* Data-driven plant art. Species share this structure and vary by form/colors. */
.garden-art { position: relative; width: 180px; height: 230px; flex: 0 0 auto; }
.garden-pot { position: absolute; z-index: 6; left: 50%; bottom: 8px; width: 92px; height: 62px; transform: translateX(-50%); background: #ad684d; border: 5px solid #593e37; border-radius: 4px 4px 23px 23px; box-shadow: inset 0 9px 0 #ca8260; }
.garden-soil { position: absolute; z-index: 7; left: 50%; bottom: 64px; width: 84px; height: 12px; transform: translateX(-50%); border: 4px solid #593e37; border-radius: 50%; background: #49362f; }
.garden-stem { position: absolute; z-index: 3; left: calc(50% - 5px); bottom: 70px; width: 10px; height: 94px; background: #4f865c; border: 3px solid #31563d; border-radius: 7px; transform-origin: bottom; }
.garden-leaf { position: absolute; z-index: 4; bottom: 100px; width: 43px; height: 22px; background: #6ca16f; border: 3px solid #31563d; }
.garden-leaf.leaf-left { left: 48px; border-radius: 80% 10% 80% 10%; transform: rotate(18deg); }
.garden-leaf.leaf-right { right: 48px; bottom: 125px; border-radius: 10% 80% 10% 80%; transform: rotate(-18deg); }
.garden-bud, .garden-flower { position: absolute; z-index: 5; left: 50%; top: 31px; width: 78px; height: 78px; transform: translateX(-50%); }
.garden-bud { width: 44px; height: 54px; top: 47px; border: 4px solid #31563d; border-radius: 55% 55% 46% 46%; background: #739d78; }
.garden-bud span { position: absolute; inset: 7px; border-radius: inherit; background: #91b489; }
.garden-spark { display: none; position: absolute; z-index: 8; width: 5px; height: 5px; border-radius: 50%; background: #f5dc89; box-shadow: 0 0 9px #f5dc89; }
.garden-spark.spark-a { top: 50px; left: 35px; }.garden-spark.spark-b { top: 80px; right: 28px; }

.mystery-stage.seed .garden-stem, .mystery-stage.seed .garden-leaf, .mystery-stage.seed .garden-bud { display: none; }
.mystery-stage.seed .garden-soil::after { content: ''; position: absolute; left: 34px; top: -8px; width: 13px; height: 9px; border: 3px solid #654a37; border-radius: 70% 40%; background: #8b674b; transform: rotate(-13deg); }
.mystery-stage.sprout .garden-stem { height: 42px; }.mystery-stage.sprout .garden-bud { display: none; }.mystery-stage.sprout .leaf-right { display: none; }.mystery-stage.sprout .leaf-left { bottom: 92px; left: 57px; transform: scale(.75) rotate(18deg); }
.mystery-stage.leafy .garden-stem { height: 77px; }.mystery-stage.leafy .garden-bud { display: none; }
.mystery-stage.bud .garden-spark { display: block; animation: gardenTwinkle 2.1s ease-in-out infinite; }
.mystery-stage.bud .spark-b { animation-delay: .8s; }
.mystery-stage.just-watered .garden-stem { animation: gardenGrowPop .7s ease-out; }

.garden-flower i { position: absolute; left: 28px; top: 0; width: 24px; height: 42px; border: 3px solid color-mix(in srgb, var(--plant-primary), #30343b 35%); border-radius: 70% 70% 48% 48%; background: var(--plant-primary); transform-origin: 12px 39px; }
.garden-flower i:nth-child(2) { transform: rotate(60deg); }.garden-flower i:nth-child(3) { transform: rotate(120deg); }.garden-flower i:nth-child(4) { transform: rotate(180deg); }.garden-flower i:nth-child(5) { transform: rotate(240deg); }.garden-flower i:nth-child(6) { transform: rotate(300deg); }
.garden-flower b { position: absolute; z-index: 2; left: 25px; top: 25px; width: 29px; height: 29px; border: 3px solid #594d38; border-radius: 50%; background: var(--plant-accent); }

.form-tulip .garden-flower, .form-poppy .garden-flower { top: 42px; height: 58px; border: 4px solid #633f42; border-radius: 12px 12px 48% 48%; background: var(--plant-primary); clip-path: polygon(0 0,25% 18%,50% 0,75% 18%,100% 0,92% 70%,72% 100%,28% 100%,8% 70%); }
.form-tulip .garden-flower i, .form-tulip .garden-flower b, .form-poppy .garden-flower i, .form-poppy .garden-flower b { display: none; }
.form-poppy .garden-flower { border-color: #4c3538; border-radius: 50%; clip-path: none; box-shadow: inset 0 0 0 25px var(--plant-primary); }
.form-poppy .garden-flower::after { content:''; position:absolute; left:29px; top:25px; width:19px; height:19px; border-radius:50%; background:var(--plant-accent); }
.form-sunflower .garden-flower b { width: 34px; height: 34px; left: 22px; top: 22px; background: var(--plant-accent); box-shadow: inset 0 0 0 5px rgba(255,255,255,.12); }
.form-pansy .garden-flower i:nth-child(odd) { background: var(--plant-accent); }
.form-ruffle .garden-flower { filter: drop-shadow(0 3px 0 rgba(80,55,38,.25)); }
.form-clover .garden-flower i { width: 34px; height: 34px; left: 22px; top: 17px; border-radius: 50% 50% 50% 8%; background: var(--plant-primary); transform-origin: 17px 22px; }
.form-clover .garden-flower i:nth-child(n+5), .form-clover .garden-flower b { display: none; }
.form-clover .garden-flower i:nth-child(2) { transform: rotate(90deg); }.form-clover .garden-flower i:nth-child(3) { transform: rotate(180deg); }.form-clover .garden-flower i:nth-child(4) { transform: rotate(270deg); }
.form-spike .garden-flower, .form-bells .garden-flower { top: 24px; }
.form-spike .garden-flower i, .form-bells .garden-flower i { width: 21px; height: 21px; border-radius: 50%; transform: none; }
.form-spike .garden-flower i:nth-child(1) { left:28px;top:0}.form-spike .garden-flower i:nth-child(2){left:15px;top:18px}.form-spike .garden-flower i:nth-child(3){left:41px;top:18px}.form-spike .garden-flower i:nth-child(4){left:20px;top:39px}.form-spike .garden-flower i:nth-child(5){left:37px;top:39px}.form-spike .garden-flower i:nth-child(6){left:28px;top:58px}
.form-spike .garden-flower b, .form-bells .garden-flower b { display:none; }
.form-bells .garden-flower i { background: var(--plant-primary); border-radius: 50% 50% 45% 45%; }.form-bells .garden-flower i:nth-child(1){left:7px;top:27px}.form-bells .garden-flower i:nth-child(2){left:29px;top:43px}.form-bells .garden-flower i:nth-child(3){left:51px;top:24px}.form-bells .garden-flower i:nth-child(n+4){display:none}
.form-cluster .garden-flower i { width: 31px; height: 31px; border-radius: 50%; transform:none; }.form-cluster .garden-flower i:nth-child(1){left:24px;top:0}.form-cluster .garden-flower i:nth-child(2){left:5px;top:18px}.form-cluster .garden-flower i:nth-child(3){left:44px;top:18px}.form-cluster .garden-flower i:nth-child(4){left:13px;top:43px}.form-cluster .garden-flower i:nth-child(5){left:36px;top:43px}.form-cluster .garden-flower i:nth-child(6){left:25px;top:22px}.form-cluster .garden-flower b{display:none}
.form-cactus .garden-stem { width: 42px; left: calc(50% - 21px); height: 105px; border-radius: 46% 46% 12px 12px; background: var(--plant-primary); }.form-cactus .garden-leaf { width: 22px; height: 50px; background:var(--plant-primary); }.form-cactus .garden-flower { transform:translateX(-50%) scale(.68); top:25px; }
.form-rose .garden-flower { top: 33px; border: 4px solid #304b79; border-radius: 50%; background: var(--plant-primary); box-shadow: inset 0 0 0 12px var(--plant-accent), inset 0 0 0 24px var(--plant-primary); }.form-rose .garden-flower i,.form-rose .garden-flower b{display:none}.form-rose .garden-flower::after{content:'◎';display:grid;place-items:center;height:100%;color:#315b9b;font-size:36px}
.form-mushroom .garden-stem { width: 28px; left:calc(50% - 14px); height:75px; background:var(--plant-accent); border-color:#487879; }.form-mushroom .garden-leaf{display:none}.form-mushroom .garden-flower{top:54px;height:50px;border:4px solid #386579;border-radius:70px 70px 14px 14px;background:var(--plant-primary);box-shadow:0 0 18px var(--plant-accent)}.form-mushroom .garden-flower i,.form-mushroom .garden-flower b{display:none}
.form-moon .garden-flower { top: 33px; border: 4px solid #8c96a6; border-radius: 55% 50%; background: var(--plant-primary); box-shadow: inset -18px -4px 0 var(--plant-accent), 0 0 18px rgba(245,232,172,.7); }.form-moon .garden-flower i,.form-moon .garden-flower b{display:none}
.garden-gold-aura { display:none; position:absolute; z-index:1; left:50%; top:15px; width:112px; height:112px; transform:translateX(-50%); border:2px solid rgba(228,184,67,.35); border-radius:50%; box-shadow:0 0 18px rgba(228,184,67,.45); }
.garden-art.rarity-gold .garden-gold-aura { display:block; animation:gardenGoldBreath 2.7s ease-in-out infinite; }

.garden-shelf-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:14px; }
.garden-shelf-head strong { display:block; font-size:15px; }.garden-shelf-head span { display:block; margin-top:3px; color:var(--text-muted); font-size:11px; }.garden-shelf-head b { color:#7a5b1d; font:700 13px var(--font-mono); }
.garden-shelf-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.garden-shelf-slot { min-height:200px; padding:10px 8px; overflow:hidden; border:1.5px solid var(--border-color); border-radius:8px; background:#fff; text-align:center; }
button.garden-shelf-slot { color:var(--text-main); font-family:var(--font-sans); cursor:pointer; }
.garden-shelf-slot.locked { display:flex; flex-direction:column; align-items:center; justify-content:center; border-style:dashed; color:var(--text-light); background:rgba(255,255,255,.45); }
.garden-locked-plant { display:grid; place-items:center; width:62px; height:82px; margin-bottom:11px; border-radius:50% 50% 13px 13px; background:#d8dde0; color:#fff; font:700 22px var(--font-pixel); }
.garden-shelf-slot > strong { display:block; margin-top:2px; font-size:12px; }.garden-shelf-slot > small { display:block; margin-top:5px; color:var(--text-muted); font:10px var(--font-mono); }
.garden-art.shelf-size { margin:0 auto -104px; transform:scale(.48); transform-origin:top center; }

.garden-nameplate { display:inline-flex; align-items:center; justify-content:center; padding:2px 7px; border:1px solid currentColor; border-radius:4px; font:800 9.5px var(--font-mono); letter-spacing:.08em; }
.garden-nameplate.bronze { color:#8c5435; background:#f2dfd1; }.garden-nameplate.silver { color:#5e7385; background:#e8eef2; }.garden-nameplate.gold { color:#8b6917; background:#f8edbd; box-shadow:0 0 0 rgba(221,177,54,0); animation:gardenGoldBreath 2.7s ease-in-out infinite; }

.garden-reveal-modal { max-width:430px; }
.garden-reveal-body { display:flex; flex-direction:column; align-items:center; padding:22px 26px 26px; text-align:center; background:linear-gradient(180deg,#f9f6e9,#fff); }
.garden-reveal-eyebrow { color:var(--text-muted); font:700 10px var(--font-mono); letter-spacing:.16em; }
#garden-modal-art { height:238px; }.garden-art.reveal-size { transform:scale(.96); transform-origin:top center; }
.garden-reveal-title-row { display:flex; align-items:center; justify-content:center; gap:9px; }.garden-reveal-title-row h2 { font-size:20px; }
.garden-reveal-body blockquote { width:100%; margin:15px 0 10px; padding:13px 15px; border-left:3px solid #d2b65c; background:#fffaf0; color:#574b2f; font-size:13px; line-height:1.8; text-align:left; }
.garden-reveal-body > p { color:var(--text-muted); font-size:10.5px; }

.garden-mentor-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-bottom:14px; }
.garden-mentor-card { border:1.5px solid var(--border-color); border-radius:8px; background:#fff; padding:15px; box-shadow:2px 2px 0 rgba(30,35,41,.12); }
.garden-mentor-heading { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; padding-bottom:10px; border-bottom:1px dashed var(--border-light); }
.garden-mentor-heading strong { display:block; font-size:13.5px; }.garden-mentor-heading span { display:block; margin-top:2px; color:var(--text-muted); font-size:10.5px; }.garden-mentor-heading > b { white-space:nowrap; font:700 12px var(--font-mono); }
#garden-weight-total.invalid { color:#b43c32; }
.garden-weight-list { display:grid; gap:8px; margin-top:12px; }.garden-weight-row { display:grid; grid-template-columns:62px 1fr 80px 15px; align-items:center; gap:8px; font-size:11.5px; }.garden-weight-row input { width:100%; padding:5px 7px; border:1.5px solid var(--border-color); border-radius:4px; font:700 12px var(--font-mono); }
.garden-mentor-caution { margin-top:10px; color:var(--text-muted); font-size:10.5px; line-height:1.6; }
.garden-mentor-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }.garden-mentor-kpis div { padding:13px 8px; border:1px solid var(--border-light); border-radius:6px; background:#f8f7f2; text-align:center; }.garden-mentor-kpis b { display:block; font:700 20px var(--font-mono); }.garden-mentor-kpis span { font-size:10px; color:var(--text-muted); }
.garden-mentor-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }.garden-mentor-species { display:flex; align-items:center; min-height:128px; overflow:hidden; border:1px solid var(--border-light); border-radius:7px; background:#fafafa; }.garden-mentor-species > div:last-child { flex:1; padding:9px 10px 9px 0; }.garden-mentor-species strong { margin-right:7px; font-size:12px; }.garden-mentor-species p { margin-top:7px; color:var(--text-muted); font-size:10.5px; line-height:1.55; }
.garden-art.mentor-size { width:86px; height:122px; margin-right:-43px; transform:scale(.42); transform-origin:left center; }

@keyframes gardenGrowPop { 0%{transform:scaleY(.92)} 55%{transform:scaleY(1.08)} 100%{transform:scaleY(1)} }
@keyframes gardenTwinkle { 0%,100%{opacity:.25;transform:scale(.75)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes gardenGoldBreath { 0%,100%{box-shadow:0 0 3px rgba(221,177,54,.25);opacity:.7} 50%{box-shadow:0 0 18px rgba(221,177,54,.72);opacity:1} }

@media (prefers-reduced-motion: reduce) {
  .garden-art *, .garden-nameplate.gold { animation:none !important; }
}

@media (max-width: 760px) {
  .garden-subnav { flex-wrap:wrap; }.garden-subnav > span { width:100%; margin-left:0; }
  .garden-greenhouse-card { grid-template-columns:1fr; }.garden-sky { min-height:320px; }.garden-status-card { padding:23px 18px; }
  .garden-shelf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .garden-mentor-layout, .garden-mentor-catalog { grid-template-columns:1fr; }
  .garden-mentor-test-banner { align-items:flex-start; flex-direction:column; gap:3px; }
  .garden-mentor-kpis { grid-template-columns:repeat(3,1fr); }
}