/* ═══════════════════════════════════════════════
   TEACHER TOOL  —  Main Stylesheet
   ═══════════════════════════════════════════════ */

/* ─── VARIABLES ─── */
:root {
  --header-h: 64px;
  --tabbar-h: 78px;

  /* Header */
  --header-bg: #FFFFFF;
  --header-rule: rgba(0, 0, 0, 0.07);

  /* Search */
  --search-bg: #E6E6E6;
  --search-radius: 22px;
  --search-ph: #999999;

  /* Icons */
  --gear-color: #BBBBBB;
  --avatar-dark: #4E4E4E;
  --avatar-light: #D2D2D2;

  /* Tab bar */
  --tabbar-bg: #DFD5C0;

  /* Manila tab */
  --manila: #C9A97C;
  --manila-hover: #D4B48A;
  --manila-active: #DCBF95;
  --manila-shadow: rgba(120, 90, 40, 0.18);

  /* Tape */
  --tape-h: 38px;
  --tape-bg: rgba(238, 218, 148, 0.42);
  --tape-edge: rgba(210, 185, 110, 0.25);
  --tape-glow: rgba(255, 250, 200, 0.40);

  /* Content */
  --content-bg: #F5EFE4;
  --panel-bg: #FAF6EF;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;

  /* Motion */
  --ease-quick: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-med: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── RESET ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--content-bg);
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ═══════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: var(--header-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--header-rule);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  z-index: 200;
}

.header-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-left {
  flex: 1 1 0;
  min-width: 172px;
}

.header-right {
  flex: 1 1 0;
  min-width: 172px;
  justify-content: flex-end;
}

.header-center {
  flex: 0 0 auto;
  width: 500px;
  max-width: 100%;
  justify-content: center;
}

/* ─── Logo ─── */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  outline: none;
  border-radius: 8px;
  padding: 4px 6px;
  transition: background var(--ease-quick);
  user-select: none;
}

.logo:hover {
  background: rgba(0, 0, 0, 0.04);
}

.logo:focus-visible {
  box-shadow: 0 0 0 2px #4A7EC8;
}

.logo-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: #222222;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ─── Search bar ─── */
.search-bar {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background: var(--search-bg);
  border-radius: var(--search-radius);
  transition: box-shadow var(--ease-quick), background var(--ease-quick);
}

.search-bar:focus-within {
  background: #E0E0E0;
  box-shadow: 0 0 0 2.5px rgba(74, 126, 200, 0.30);
}

.search-icon-wrap {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.search-icon {
  width: 17px;
  height: 17px;
}

.search-input {
  width: 100%;
  height: 100%;
  padding: 0 14px 0 44px;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #222222;
  text-align: center;
}

.search-input:focus {
  text-align: left;
}

.search-input::placeholder {
  color: var(--search-ph);
  font-size: 14px;
}

/* Search dropdown */
.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  z-index: 300;
}

.search-dropdown.open {
  display: block;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
  transition: background var(--ease-quick);
}

.search-item:hover,
.search-item.focused {
  background: #F5F0E8;
}

.search-item-icon {
  width: 20px;
  height: 20px;
  opacity: 0.55;
  flex-shrink: 0;
}

.search-item-label {
  flex: 1;
}

.search-item-type {
  font-size: 11px;
  color: #AAAAAA;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ─── Header icon buttons ─── */
.hdr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--ease-quick), transform var(--ease-spring);
  outline: none;
  flex-shrink: 0;
}

.hdr-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.hdr-btn:active {
  transform: scale(0.92);
}

.hdr-btn:focus-visible {
  box-shadow: 0 0 0 2.5px #4A7EC8;
}

.gear-icon {
  width: 22px;
  height: 22px;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#settingsBtn:hover .gear-icon {
  transform: rotate(60deg);
}

.avatar-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════
   TAB BAR
   ═══════════════════════════════════════════════ */
.tabbar-wrap {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: var(--tabbar-h);
  background: var(--tabbar-bg);
  z-index: 100;
  display: flex;
  align-items: stretch;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

.tabbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 100%;
}

/* ─── Individual tab ─── */
.tab {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
  overflow: visible;
}

.tab:hover:not(.active) .tab-fill {
  fill: var(--manila-hover);
}

.tab:focus-visible .tab-fill {
  filter: drop-shadow(0 0 4px #4A7EC8) drop-shadow(0 -2px 5px var(--manila-shadow));
}

.tab.active {
  z-index: 5;
}

.tab.active .tab-fill {
  fill: var(--manila-active);
}

/* ─── Folder tab SVG shape ─── */
.tab-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.tab-fill {
  fill: var(--manila);
  filter: drop-shadow(0 -2px 5px var(--manila-shadow));
  transition: fill var(--ease-quick), filter var(--ease-quick);
}

/* ─── Tape strip ─── */
.tape {
  position: absolute;
  left: 30%;
  right: 30%;
  top: 47%;
  transform: translateY(-50%) rotate(-0.4deg);
  height: var(--tape-h);
  background: var(--tape-bg);
  border-top: 0.75px solid var(--tape-edge);
  border-bottom: 0.75px solid var(--tape-edge);
  pointer-events: none;
  z-index: 0;
  box-shadow:
    inset 0 2px 3px var(--tape-glow),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Very faint grain texture overlay via repeating-gradient */
.tape::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 3px,
      rgba(255, 255, 255, 0.035) 3px,
      rgba(255, 255, 255, 0.035) 4px);
  border-radius: inherit;
}

/* ─── Tab label — sits above tape ─── */
.tab-label {
  position: relative;
  z-index: 1;
  font-family: 'Caveat', cursive;
  font-size: 24px;
  font-weight: 700;
  color: #2A1500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.tab.active .tab-label {
  color: #1A0A00;
}

/* ─── Wider tape for long-label tabs (gives the label breathing room) ─── */
.tab[data-panel="tool-a"] .tape,
.tab[data-panel="tool-b"] .tape,
.tab[data-panel="tool-c"] .tape,
.tab[data-panel="tool-d"] .tape {
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%) rotate(-0.4deg);
}
.tab[data-panel="tool-a"] .tape { width: 184px; }  /* Student Picker   */
.tab[data-panel="tool-b"] .tape { width: 180px; }  /* Seating Arranger */
.tab[data-panel="tool-c"] .tape { width: 188px; }  /* Behavior Chart   */
.tab[data-panel="tool-d"] .tape { width: 168px; }  /* Good Noodles     */

/* ═══════════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════════ */
.content {
  margin-top: calc(var(--header-h) + var(--tabbar-h));
  min-height: calc(100vh - var(--header-h) - var(--tabbar-h));
  background: var(--panel-bg);
  position: relative;
}

/* ─── Panels ─── */
.panel {
  display: none;
  animation: panelIn var(--ease-med) both;
}

.panel.active {
  display: block;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════
   WELCOME SCREEN
   ═══════════════════════════════════════════════ */
.welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - var(--tabbar-h));
  padding: 40px 24px;
}

.welcome-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 580px;
}

.welcome-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.welcome-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 700;
  color: #222222;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.welcome-sub {
  font-size: 18px;
  color: #888888;
  line-height: 1.5;
}

.welcome-search-section {
  width: 100%;
  position: relative;
  margin-top: 52px;
  transition: margin-top 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-search-section.search-active {
  margin-top: 18px;
}

.welcome-search-section .search-bar {
  height: 48px;
  border-radius: 28px;
}

.welcome-search-section .search-input {
  font-size: 15px;
}

/* ═══════════════════════════════════════════════
   PLACEHOLDER PANEL  (for future tools)
   ═══════════════════════════════════════════════ */
.placeholder-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - var(--tabbar-h));
  padding: 40px 24px;
  gap: 12px;
}

.placeholder-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: #333333;
}

.placeholder-sub {
  font-size: 14px;
  color: #999999;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════
   SPINNER  (reusable)
   ═══════════════════════════════════════════════ */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(200, 170, 120, 0.35);
  border-top-color: #C8A87C;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ─── Spinner size variants ─── */
.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-lg {
  width: 52px;
  height: 52px;
  border-width: 4px;
}

/* ═══════════════════════════════════════════════
   STUDENT PICKER
   ═══════════════════════════════════════════════ */
.picker-wrap {
  display: flex;
  height: calc(100vh - var(--header-h) - var(--tabbar-h));
  overflow: hidden;
  background: var(--panel-bg);
}

.picker-wheel-col {
  flex: 0 0 750px;
  min-height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 8px 12px;
  background: #EDE6D5;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

#spinCanvas {
  width: 750px;
  height: 750px;
  cursor: pointer;
  display: block;
  user-select: none;
  -webkit-user-select: none;
}

.picker-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 20px 20px;
  gap: 14px;
  min-width: 0;
}

.remove-btn {
  flex-shrink: 0;
  width: 100%;
  padding: 14px 20px;
  background: #B83232;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  letter-spacing: 0.03em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 160ms, box-shadow 200ms;
}

.remove-btn:hover {
  background: #D63B3B;
  box-shadow: 0 0 0 3px rgba(214, 59, 59, 0.22), 0 0 22px rgba(214, 59, 59, 0.38);
}

.remove-btn:active {
  background: #9A2828;
}

.remove-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(214, 59, 59, 0.45), 0 0 28px rgba(214, 59, 59, 0.5);
}

.names-box-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#namesInput {
  flex: 1;
  resize: none;
  background: #E6E6E6;
  border: none;
  border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: #2A2A2A;
  outline: none;
  transition: background 150ms, box-shadow 150ms;
}

#namesInput:focus {
  background: #E0E0E0;
  box-shadow: 0 0 0 2.5px rgba(74, 126, 200, 0.28);
}

#namesInput::placeholder {
  color: #AAAAAA;
}

.result-overlay {
  position: absolute;
  inset: 0;
  background: rgba(252, 248, 241, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  z-index: 10;
  cursor: pointer;
  gap: 14px;
  animation: overlayIn 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.result-overlay.hidden {
  display: none;
}

@keyframes overlayIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.result-name {
  font-family: var(--font-serif);
  font-size: clamp(38px, 6vw, 80px);
  font-weight: 700;
  color: #1A1A1A;
  text-align: center;
  line-height: 1.1;
  word-break: break-word;
  padding: 0 24px;
}

.result-dismiss {
  font-family: var(--font-sans);
  font-size: 12px;
  color: #BBBBBB;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  pointer-events: none;
}

.selected-wrap {
  flex-shrink: 0;
  max-height: 190px;
  overflow-y: auto;
}

.selected-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.selected-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 7px;
  font-size: 13.5px;
  color: #555555;
}

.sel-num {
  font-size: 11px;
  font-weight: 700;
  color: #BBBBBB;
  min-width: 18px;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════
   SCROLLBAR  (WebKit)
   ═══════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ═══════════════════════════════════════════════
   SETTINGS PANEL
   ═══════════════════════════════════════════════ */
.sp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.sp-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.sp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 100vw;
  background: #FFFFFF;
  z-index: 500;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.16);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sp-panel.open { transform: translateX(0); }

.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.sp-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: #1A1A1A;
}

.sp-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  font-size: 15px;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 130ms;
}
.sp-close:hover { background: rgba(0, 0, 0, 0.12); }

.sp-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

.sp-section { margin-bottom: 24px; }

.sp-section-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  color: #AAAAAA;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.sp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}

.sp-row-label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: #1A1A1A;
  display: block;
}

.sp-row-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  color: #999999;
  display: block;
  margin-top: 2px;
}

/* ─── Toggle switch ─── */
.sp-toggle {
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #CCCCCC;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background 200ms;
}
.sp-toggle.on { background: #1E88E5; }

.sp-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.sp-toggle.on .sp-thumb { transform: translateX(20px); }

/* ═══════════════════════════════════════════════
   LARGE TEXT
   ═══════════════════════════════════════════════ */
body.large-text .tab-label          { font-size: 28px; }
body.large-text .welcome-sub        { font-size: 21px; }
body.large-text .search-input,
body.large-text .search-input::placeholder { font-size: 16px; }
body.large-text #namesInput         { font-size: 17px; line-height: 1.9; }
body.large-text .remove-btn         { font-size: 17px; }
body.large-text .selected-list li   { font-size: 15.5px; }
body.large-text .bc-card-name       { font-size: 21px; }
body.large-text .bc-zone-label      { font-size: 24px; }
body.large-text .gn-name            { font-size: 27px; }
body.large-text .gn-counter         { font-size: 23px; }
body.large-text .sa-btn             { font-size: 14.5px; }
body.large-text .palette-item > span { font-size: 12px; }
body.large-text .sp-row-label       { font-size: 17px; }
body.large-text .sp-row-sub         { font-size: 13.5px; }

/* ═══════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════ */
body.dark {
  /* ─── Core palette overrides ─── */
  --header-bg:     #0B1220;
  --header-rule:   rgba(255, 255, 255, 0.06);
  --search-bg:     #162030;
  --search-ph:     #486080;
  --tabbar-bg:     #060C18;
  --manila:        #162540;
  --manila-hover:  #1C2F50;
  --manila-active: #213860;
  --manila-shadow: rgba(0, 0, 0, 0.8);
  --tape-bg:       rgba(55, 100, 190, 0.22);
  --tape-edge:     rgba(55, 100, 190, 0.14);
  --tape-glow:     rgba(70, 115, 210, 0.14);
  --content-bg:    #080E1C;
  --panel-bg:      #0B1220;
  color: #D8E8F8;
}

/* ─── Header ─── */
body.dark .logo-text                       { color: #D8E8F8; }
body.dark .gear-icon circle,
body.dark .gear-icon path                  { stroke: #4A6888; }
body.dark .hdr-btn:hover                   { background: rgba(255, 255, 255, 0.08); }

/* ─── Search ─── */
body.dark .search-bar:focus-within        { background: #1A2840; box-shadow: 0 0 0 2.5px rgba(74,126,200,0.35); }
body.dark .search-input                   { color: #D8E8F8; }
body.dark .search-dropdown                { background: #111E30; box-shadow: 0 8px 32px rgba(0,0,0,0.55); }
body.dark .search-item                    { color: #B8CDE8; }
body.dark .search-item:hover,
body.dark .search-item.focused            { background: #182840; }

/* ─── Tab labels ─── */
body.dark .tab-label                      { color: #B8CCEE; }
body.dark .tab.active .tab-label          { color: #D8EAFF; }

/* ─── Welcome ─── */
body.dark .welcome-title                  { color: #D8E8F8; }
body.dark .welcome-sub                    { color: #486080; }

/* ─── Student picker ─── */
body.dark .picker-wrap                    { background: #0B1220; }
body.dark .picker-wheel-col               { background: #0D1828; border-color: rgba(255,255,255,0.05); }
body.dark #namesInput                     { background: #162030; color: #D8E8F8; }
body.dark #namesInput:focus               { background: #1C2840; box-shadow: 0 0 0 2.5px rgba(74,126,200,0.3); }
body.dark #namesInput::placeholder        { color: #486080; }
body.dark .result-overlay                 { background: rgba(11,18,32,0.97); }
body.dark .result-name                    { color: #D8E8F8; }
body.dark .result-dismiss                 { color: #486080; }
body.dark .selected-list li               { background: rgba(255,255,255,0.05); color: #B8CDE8; }
body.dark .sel-num                        { color: #486080; }

/* ─── Seating arranger ─── */
body.dark .seating-toolbar                { background: #0D1828; border-color: rgba(255,255,255,0.05); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
body.dark .palette-item                   { background: #162030; border-color: rgba(255,255,255,0.09); }
body.dark .palette-item:hover             { background: #1C2A40; box-shadow: 0 3px 10px rgba(0,0,0,0.4); }
body.dark .palette-item > span            { color: #6888AA; }
body.dark .palette-label                  { color: #486080; }
body.dark .sa-btn                         { background: #162030; color: #B8CDE8; border-color: rgba(255,255,255,0.10); }
body.dark .sa-btn:hover                   { background: #1C2840; }
body.dark .sa-btn.sa-danger               { background: rgba(180,20,20,0.18); color: #FF8888; border-color: rgba(255,80,80,0.18); }
body.dark .sa-btn.sa-danger:hover         { background: rgba(180,20,20,0.28); }
body.dark .classroom                      { background: #111C2E; }
body.dark .room-hint                      { color: rgba(255,255,255,0.10); }
body.dark .seat-el.sel                    { outline-color: #4A88D8; }
body.dark .sel-band                       { border-color: #4A88D8; background: rgba(74,136,216,0.10); }

/* seating modal */
body.dark .sm-overlay                     { background: rgba(0,0,0,0.60); }
body.dark .sm-box                         { background: #0F1A2C; box-shadow: 0 24px 64px rgba(0,0,0,0.70); }
body.dark .sm-head,
body.dark .sm-foot                        { border-color: rgba(255,255,255,0.07); }
body.dark .sm-title                       { color: #D8E8F8; }
body.dark .sm-close                       { background: rgba(255,255,255,0.08); color: #8AAAC8; }
body.dark .sm-close:hover                 { background: rgba(255,255,255,0.14); }
body.dark .sf > label                     { color: #486080; }
body.dark .face-lbl                       { color: #2E4560; }
body.dark .si                             { background: #162030; border-color: rgba(255,255,255,0.10); color: #D8E8F8; }
body.dark .si:focus                       { background: #1C2840; border-color: #4A88D8; box-shadow: 0 0 0 3px rgba(74,136,216,0.20); }
body.dark .sm-btn.sm-ok                   { background: #1E5EA8; }
body.dark .sm-btn.sm-ok:hover             { background: #1850A0; }
body.dark .sm-btn.sm-sec                  { background: rgba(255,255,255,0.08); color: #B8CDE8; }
body.dark .sm-btn.sm-sec:hover            { background: rgba(255,255,255,0.14); }
body.dark .sm-btn.sm-del                  { background: rgba(180,20,20,0.20); color: #FF8888; }
body.dark .sm-btn.sm-del:hover            { background: rgba(180,20,20,0.32); }

/* ─── Behavior chart ─── */
body.dark .bc-zone[data-zone="green"]     { background: #081C10; }
body.dark .bc-zone[data-zone="yellow"]    { background: #181400; }
body.dark .bc-zone[data-zone="red"]       { background: #180808; }
body.dark .bc-zone-head                   { border-color: rgba(255,255,255,0.06); }
body.dark .bc-card                        { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.07); }
body.dark .bc-card:hover                  { background: rgba(255,255,255,0.09); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
body.dark .bc-card-name                   { color: #D8E8F8; }
body.dark .bc-ghost                       { background: rgba(15,25,45,0.96); border-color: rgba(255,255,255,0.12); }
body.dark .bc-ghost-count                 { color: #D8E8F8; }
body.dark .bc-sel-band                    { border-color: #4A88D8; background: rgba(74,136,216,0.10); }
body.dark .bc-names-section               { background: #0B1220; border-color: rgba(255,255,255,0.05); }
body.dark .bc-names-title                 { color: #D8E8F8; }
body.dark .bc-names-sub                   { color: #486080; }
body.dark .bc-names-input                 { background: #162030; color: #D8E8F8; }
body.dark .bc-names-input:focus           { background: #1C2840; box-shadow: 0 0 0 2.5px rgba(74,126,200,0.30); }
body.dark .bc-names-input::placeholder    { color: #486080; }

/* ─── Placeholder panels ─── */
body.dark .placeholder-title              { color: #B8CDE8; }
body.dark .placeholder-sub                { color: #2E4560; }
body.dark .spinner                        { border-color: rgba(255,255,255,0.08); border-top-color: #4A6888; }

/* ─── Settings panel in dark mode ─── */
body.dark .sp-panel                       { background: #0F1A2C; }
body.dark .sp-head                        { border-color: rgba(255,255,255,0.07); }
body.dark .sp-title                       { color: #D8E8F8; }
body.dark .sp-close                       { background: rgba(255,255,255,0.08); color: #8AAAC8; }
body.dark .sp-close:hover                 { background: rgba(255,255,255,0.14); }
body.dark .sp-section-label               { color: #2E4560; }
body.dark .sp-row-label                   { color: #D8E8F8; }
body.dark .sp-row-sub                     { color: #2E4560; }

/* ─── Scrollbars ─── */
body.dark ::-webkit-scrollbar-thumb       { background: rgba(255,255,255,0.10); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ═══════════════════════════════════════════════
   SEATING ARRANGER
   ═══════════════════════════════════════════════ */
.seating-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h) - var(--tabbar-h));
  overflow: hidden;
}

/* ─── Toolbar ─── */
.seating-toolbar {
  flex-shrink: 0;
  background: #EDE6D5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 16px;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  z-index: 10;
  position: relative;
}

.palette-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.palette-label {
  font-family: var(--font-serif);
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.palette-items {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 10px 6px;
  background: #F5EFE4;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  cursor: grab;
  transition: background 120ms, transform 120ms, box-shadow 120ms;
  user-select: none;
  -webkit-user-select: none;
}

.palette-item:hover {
  background: #FFFFFF;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13);
  transform: translateY(-2px);
}

.palette-item:active {
  cursor: grabbing;
  transform: scale(0.97);
}

.palette-item > span {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: #555;
  font-weight: 500;
  white-space: nowrap;
}

.palette-item svg {
  pointer-events: none;
  display: block;
}

/* ─── Toolbar action buttons ─── */
.seating-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.sa-btn {
  padding: 8px 14px;
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  background: #F5EFE4;
  color: #333;
  cursor: pointer;
  transition: background 120ms, box-shadow 120ms, transform 100ms;
}

.sa-btn:hover {
  background: #EDE6D5;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10);
}

.sa-btn:active {
  transform: scale(0.96);
}

.sa-btn.sa-danger {
  background: #FFEBEE;
  color: #C62828;
  border-color: rgba(198, 40, 40, 0.20);
}

.sa-btn.sa-danger:hover {
  background: #FFCDD2;
}

/* ─── "Count:" box — how many copies one palette drag creates ─── */
.sa-countwrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sa-count-label {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: #707783;
  white-space: nowrap;
}

.si.sa-count {
  width: 52px;
  padding: 7px 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

body.dark .sa-count-label { color: #5A779A; }

/* ×N badge on the drag ghost when Count > 1 */
.seat-ghost .ghost-mult {
  position: absolute;
  top: -12px;
  right: -12px;
  background: #005ea4;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ─── Classroom canvas ─── */
.classroom {
  flex: 1;
  position: relative;
  background: #FFFFFF;
  overflow: hidden;
  cursor: default;
}

/* ─── Empty state hint ─── */
.room-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 16px;
  color: rgba(0, 0, 0, 0.14);
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.01em;
}

/* ─── Placed seat/table elements ─── */
.seat-el {
  position: absolute;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}

.seat-el:hover {
  filter: brightness(0.96);
}

.seat-el.sel {
  outline: 2.5px dashed #1E88E5;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Rubber-band selection rect ─── */
.sel-band {
  position: absolute;
  border: 1.5px dashed #1E88E5;
  background: rgba(30, 136, 229, 0.07);
  border-radius: 2px;
  pointer-events: none;
  z-index: 20;
}

.sel-band.hidden {
  display: none;
}

/* ─── Ghost element while dragging from palette ─── */
.seat-ghost {
  position: fixed;
  opacity: 0.55;
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}

/* ─── Modal overlay ─── */
.sm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: smFade 130ms ease;
}

@keyframes smFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sm-box {
  background: #FFFFFF;
  border-radius: 14px;
  width: 390px;
  max-width: 94vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  animation: smUp 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes smUp {
  from { transform: translateY(24px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.sm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
}

.sm-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: #1A1A1A;
}

.sm-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
  line-height: 1;
}

.sm-close:hover {
  background: rgba(0, 0, 0, 0.12);
}

.sm-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── Form fields ─── */
.sf {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sf.compact {
  gap: 3px;
}

.sf > label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  color: #AAAAAA;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.face-lbl {
  font-size: 10px;
  text-transform: none;
  color: #CCCCCC;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 4px;
}

.si {
  padding: 9px 12px;
  border: 1.5px solid #E0E0E0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #1A1A1A;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
  background: #FAFAFA;
}

.si:focus {
  border-color: #1E88E5;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
  background: #FFFFFF;
}

.si.si-sm {
  width: 68px;
}

/* Table name + count side-by-side row */
.sm-table-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sm-tname-input {
  flex: 1;
}

/* Remove number-input spinner arrows */
.sm-no-spin::-webkit-inner-spin-button,
.sm-no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sm-no-spin {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ─── Color swatches ─── */
.cswrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cswatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 110ms, box-shadow 110ms;
}

.cswatch:hover {
  transform: scale(1.18);
}

.cswatch.active {
  transform: scale(1.22);
  box-shadow: 0 0 0 3px #1E88E5;
}

/* ─── Modal footer ─── */
.sm-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
}

.sm-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 120ms, box-shadow 120ms, transform 100ms;
}

.sm-btn:active {
  transform: scale(0.96);
}

.sm-btn.sm-ok {
  background: #1E88E5;
  color: #FFFFFF;
  margin-left: auto;
}

.sm-btn.sm-ok:hover {
  background: #1565C0;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.38);
}

.sm-btn.sm-sec {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}

.sm-btn.sm-sec:hover {
  background: rgba(0, 0, 0, 0.11);
}

.sm-btn.sm-del {
  background: #FFEBEE;
  color: #C62828;
}

.sm-btn.sm-del:hover {
  background: #FFCDD2;
}

/* ═══════════════════════════════════════════════
   BEHAVIOR CHART
   ═══════════════════════════════════════════════ */
.bc-wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h) - var(--tabbar-h));
}

/* ─── Three-zone chart row ─── */
.bc-chart {
  display: flex;
  height: calc(100vh - var(--header-h) - var(--tabbar-h));
  flex-shrink: 0;
}

.bc-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 3px solid rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
  transition: filter 120ms;
}

.bc-zone:last-child {
  border-right: none;
}

.bc-zone.bc-drop-target {
  filter: brightness(0.90);
  outline: 4px dashed rgba(0, 0, 0, 0.22);
  outline-offset: -4px;
}

/* ─── Zone header ─── */
.bc-zone-head {
  flex-shrink: 0;
  padding: 20px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.07);
}

.bc-head-face {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.bc-zone-label {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
}

/* ─── Cards area (scrollable) ─── */
.bc-cards-area {
  flex: 1;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 14px;
  padding: 16px;
}

/* ─── Student cards ─── */
.bc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.68);
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  min-width: 110px;
  transition: transform 130ms, box-shadow 130ms, background 130ms;
  backdrop-filter: blur(4px);
}

.bc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13);
  background: rgba(255, 255, 255, 0.88);
}

.bc-card:active {
  cursor: grabbing;
}

.bc-card.sel {
  outline: 3px dashed #1E88E5;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.90);
}

.bc-card-face {
  line-height: 0;
  flex-shrink: 0;
}

.bc-card-name {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  text-align: center;
  word-break: break-word;
  max-width: 130px;
  line-height: 1.2;
}

/* ─── Rubber-band selection ─── */
.bc-sel-band {
  position: absolute;
  border: 1.5px dashed #1E88E5;
  background: rgba(30, 136, 229, 0.07);
  border-radius: 2px;
  pointer-events: none;
  z-index: 20;
}

.bc-sel-band.hidden {
  display: none;
}

/* ─── Drag ghost ─── */
.bc-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 18px 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  min-width: 90px;
}

.bc-ghost-count {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 800;
  color: #333;
  line-height: 1;
}

/* ─── Animations ─── */
@keyframes bcBounce {
  0%,  100% { transform: translateY(0)    scale(1);    }
  25%        { transform: translateY(-12px) scale(1.08); }
  55%        { transform: translateY(-6px)  scale(1.04); }
  80%        { transform: translateY(-2px)  scale(1.01); }
}

@keyframes bcShake {
  0%,  100% { transform: translateX(0)   rotate(0deg);  }
  15%        { transform: translateX(-6px) rotate(-5deg); }
  30%        { transform: translateX(6px)  rotate(5deg);  }
  45%        { transform: translateX(-5px) rotate(-3deg); }
  60%        { transform: translateX(5px)  rotate(3deg);  }
  75%        { transform: translateX(-2px) rotate(-1deg); }
  90%        { transform: translateX(2px)  rotate(1deg);  }
}

.bc-bounce { animation: bcBounce 1.3s ease-in-out infinite; }
.bc-shake  { animation: bcShake  1.5s ease-in-out infinite; }

/* ─── Names section (scroll to reveal) ─── */
.bc-names-section {
  background: var(--panel-bg);
  border-top: 3px solid rgba(0, 0, 0, 0.07);
  padding: 36px 24px 52px;
}

.bc-names-inner {
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bc-names-hdr {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bc-names-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: #222;
}

.bc-names-sub {
  font-size: 14px;
  color: #999;
  line-height: 1.5;
}

.bc-names-input {
  height: 220px;
  resize: vertical;
  background: #E6E6E6;
  border: none;
  border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.75;
  color: #2A2A2A;
  outline: none;
  transition: background 150ms, box-shadow 150ms;
}

.bc-names-input:focus {
  background: #E0E0E0;
  box-shadow: 0 0 0 2.5px rgba(74, 126, 200, 0.28);
}

.bc-names-input::placeholder {
  color: #AAAAAA;
}

/* ─── Face animations ───
   Green: mouth pops in once, then eye sparkles twinkle forever.
   Red:   head on fire; students start bare-faced and grow angry
          eyebrows a couple of seconds later. The "Needs Work"
          header face has no fire and only gets eyebrows when the
          whole class is in red (.bc-allred, toggled by JS). */
.bc-card-face svg,
.bc-head-face svg { overflow: visible; }

.bcf-mouth {
  transform-box: fill-box;
  transform-origin: center;
  animation: bcfSmilePop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes bcfSmilePop {
  from { transform: scale(0.1); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Eyes only sparkle when the WHOLE class is in green
   (.bc-allgreen is toggled on the chart by JS) */
.bcf-eye {
  transform-box: fill-box;
  transform-origin: center;
}
.bc-allgreen .bcf-eye { animation: bcfEyeSparkle 1.8s ease-in-out infinite; }
.bc-allgreen .bcf-eye.e2 { animation-delay: 0.4s; }

@keyframes bcfEyeSparkle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

.bcf-spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.bc-allgreen .bcf-spark { animation: bcfTwinkle 1.8s ease-in-out infinite; }
.bc-allgreen .bcf-spark.s2 { animation-delay: 0.6s; }
.bc-allgreen .bcf-spark.s3 { animation-delay: 1.1s; }

@keyframes bcfTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1)   rotate(90deg); }
}

/* Real fire (transparent gif) sitting on top of red heads —
   student cards AND the big "Needs Work" header face */
.bc-card-face,
.bc-head-face { position: relative; }

.bcf-fire-gif {
  position: absolute;
  left: 50%;
  bottom: 76%;
  transform: translateX(-50%);
  width: 92%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Students in "Needs Work": no eyebrows at first, they arrive later
   (--brow-delay is set per card by JS so re-renders keep the timing)
   and once a face is "browed" the eyebrows stay put */
.bc-card-face .bcf-brows {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: bcfBrowsIn 450ms ease-out both;
  animation-delay: var(--brow-delay, 2.2s);
}

.bc-card-face.bcf-browed .bcf-brows {
  opacity: 1;
  animation: none;
}

@keyframes bcfBrowsIn {
  from { opacity: 0; transform: translateY(-18%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header "Needs Work" face: never on fire, brows only when ALL are red */
.bc-head-face .bcf-brows { opacity: 0; }

.bc-head-face.bc-allred .bcf-brows {
  opacity: 1;
  animation: bcfBrowsIn 450ms ease-out both;
}

/* ═══════════════════════════════════════════════
   GOOD NOODLES
   ═══════════════════════════════════════════════ */
.gn-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h) - var(--tabbar-h));
  background: #1C4220;
  overflow: hidden;
}

/* ─── Chalkboard header ─── */
.gn-header {
  flex-shrink: 0;
  background: #122B16;
  padding: 12px 32px 10px;
  text-align: center;
  border-top:    5px solid #8B6914;
  border-bottom: 5px solid #8B6914;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,220,80,0.08);
  position: relative;
  overflow: hidden;
}


.gn-hstars {
  font-size: 12px;
  color: #FFD700;
  letter-spacing: 7px;
  opacity: 0.50;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.4;
}

.gn-title {
  font-family: 'Fredoka', var(--font-sans);
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 700;
  color: #FFEE45;
  letter-spacing: 0.14em;
  text-shadow:
    3px  3px 0 #7A5C00,
    6px  6px 0 rgba(0,0,0,0.25),
    0 0 50px rgba(255,225,0,0.30);
  line-height: 1.05;
  margin: 6px 0;
  position: relative;
}

/* ─── Scrollable board — native scrollbar ─── */
.gn-board {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 32px;
}

/* ─── Student rows ─── */
.gn-row {
  display: flex;
  align-items: center;
  padding: 9px 48px 9px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  gap: 16px;
  min-height: 58px;
  position: relative;
  transition: background 110ms;
}

.gn-row:hover {
  background: rgba(255,255,255,0.03);
}

.gn-row:hover .gn-rm-btn {
  opacity: 1;
}

/* ─── Rank counter ─── */
.gn-counter {
  flex-shrink: 0;
  width: 36px;
  text-align: right;
  font-family: 'Fredoka', var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,215,0,0.55);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  user-select: none;
}

/* ─── Name cell ─── */
.gn-name-cell {
  flex-shrink: 0;
  width: 190px;
}

.gn-name {
  font-family: 'Fredoka', var(--font-sans);
  font-size: 23px;
  font-weight: 600;
  color: rgba(255,255,255,0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: default;
  letter-spacing: 0.01em;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.gn-name-input {
  font-family: 'Fredoka', var(--font-sans);
  font-size: 23px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.10);
  border: 2px solid rgba(255,220,0,0.55);
  border-radius: 6px;
  padding: 3px 10px;
  outline: none;
  width: 196px;
  letter-spacing: 0.01em;
}

.gn-name-input::placeholder {
  color: rgba(255,255,255,0.28);
}

.gn-name-input:focus {
  border-color: rgba(255,220,0,0.85);
  box-shadow: 0 0 0 3px rgba(255,200,0,0.18);
}

/* ─── Stars cell ─── */
.gn-stars-cell {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  min-height: 36px;
}

/* Gold earned star */
.gn-star-gold {
  font-size: 30px;
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255,205,0,0.75), 0 1px 0 rgba(0,0,0,0.35);
  line-height: 1;
  display: inline-block;
  animation: gnPop 240ms cubic-bezier(0.34, 1.7, 0.64, 1) both;
}

@keyframes gnPop {
  from { transform: scale(0.15) rotate(-50deg); opacity: 0; }
  to   { transform: scale(1)    rotate(0deg);   opacity: 1; }
}

/* Grey clickable star */
.gn-star-grey {
  font-size: 30px;
  color: rgba(255,255,255,0.17);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  display: inline-block;
  font-family: inherit;
  transition: color 150ms, transform 120ms, text-shadow 150ms;
}

.gn-star-grey:hover {
  color: rgba(255,225,0,0.70);
  transform: scale(1.40);
  text-shadow: 0 0 14px rgba(255,200,0,0.65);
}

.gn-star-grey:active {
  transform: scale(0.85);
}

/* MAX badge */
.gn-max-badge {
  font-family: 'Fredoka', var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: #FFD700;
  background: rgba(255,215,0,0.12);
  border: 2px solid rgba(255,215,0,0.28);
  border-radius: 7px;
  padding: 2px 10px;
  letter-spacing: 0.09em;
  text-shadow: 0 0 12px rgba(255,200,0,0.5);
  margin-left: 4px;
}

/* ─── Star count box ─── */
.gn-count-box {
  flex-shrink: 0;
  min-width: 50px;
  padding: 4px 10px;
  background: #FFD700;
  color: #1B5E20;
  font-family: 'Fredoka', var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  border-radius: 9px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border: 2px solid rgba(0, 0, 0, 0.10);
  transition: background 120ms, transform 110ms, box-shadow 120ms;
  line-height: 1.3;
}

.gn-count-box:hover {
  background: #FFEA00;
  transform: scale(1.07);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
}

.gn-count-input {
  width: 44px;
  font-family: 'Fredoka', var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  color: #1B5E20;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  padding: 0;
  /* remove number spinners */
  -moz-appearance: textfield;
  appearance: textfield;
}

.gn-count-input::-webkit-inner-spin-button,
.gn-count-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ─── Remove button (appears on row hover) ─── */
.gn-rm-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,70,70,0.18);
  border: 1.5px solid rgba(255,90,90,0.30);
  color: rgba(255,130,130,0.9);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 130ms, background 130ms;
  line-height: 1;
}

.gn-rm-btn:hover {
  background: rgba(255,70,70,0.32);
}


/* ─── Add student button ─── */
.gn-add-wrap {
  display: flex;
  justify-content: center;
  padding: 22px 0 14px;
}

.gn-add-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255,215,0,0.11);
  border: 3px solid rgba(255,215,0,0.28);
  color: rgba(255,215,0,0.85);
  font-size: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 140ms,
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 140ms;
  font-family: inherit;
  line-height: 1;
}

.gn-add-btn:hover {
  background: rgba(255,215,0,0.22);
  box-shadow: 0 0 28px rgba(255,200,0,0.28);
  transform: scale(1.14) rotate(90deg);
}

.gn-add-btn:active {
  transform: scale(0.94);
}

/* ═══════════════════════════════════════════════
   CLASS PICKER  (reusable "Load Class" dropdown)
   ═══════════════════════════════════════════════ */
.tool-classbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.tool-classbar-label {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: #999999;
}

.ttcp {
  position: relative;
  display: inline-flex;
}

.ttcp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 9px;
  background: #FFFFFF;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  color: #3A3A3A;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, box-shadow 120ms, border-color 120ms;
}

.ttcp-btn:hover {
  background: #FAF6EF;
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.ttcp-btn:active {
  transform: scale(0.97);
}

.ttcp-caret {
  opacity: 0.6;
  transition: transform 160ms;
}

.ttcp.open .ttcp-caret {
  transform: rotate(180deg);
}

/* Menu is appended to <body> (fixed) so a tool panel can't clip it */
.ttcp-menu {
  position: fixed;
  z-index: 600;
  background: #FFFFFF;
  border-radius: 11px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: ttcpIn 140ms ease;
}

@keyframes ttcpIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ttcp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: none;
  border-radius: 7px;
  background: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: #2A2A2A;
  text-align: left;
  cursor: pointer;
  transition: background 110ms;
}

.ttcp-item:hover:not(:disabled) {
  background: #F5F0E8;
}

.ttcp-item:disabled {
  opacity: 0.45;
  cursor: default;
}

.ttcp-item-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ttcp-item-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #999999;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 2px 8px;
  min-width: 22px;
  text-align: center;
}

.ttcp-empty {
  padding: 10px 11px 4px;
  font-size: 12.5px;
  color: #999999;
}

.ttcp-link {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 8px 11px;
  border: none;
  border-radius: 7px;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #1E88E5;
  text-align: left;
  cursor: pointer;
}

.ttcp-link:hover {
  background: rgba(30, 136, 229, 0.10);
}

/* On-dark variant (Good Noodles chalkboard) — wins over dark-mode rule via 3 classes */
.ttcp.ttcp--ondark .ttcp-btn {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 215, 0, 0.38);
  color: #FFE9A8;
}

.ttcp.ttcp--ondark .ttcp-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 215, 0, 0.60);
  box-shadow: 0 0 16px rgba(255, 200, 0, 0.18);
}

/* Good Noodles header mount */
.gn-classbar {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 3;
}

/* Seating toolbar mount */
.sa-classmount {
  display: inline-flex;
}

/* ═══════════════════════════════════════════════
   PROFILE TAB
   ═══════════════════════════════════════════════ */
.pf-wrap {
  min-height: calc(100vh - var(--header-h) - var(--tabbar-h));
  padding: 32px 24px 72px;
}

.pf-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pf-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  padding: 34px 40px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - var(--header-h) - var(--tabbar-h) - 104px);
}

.pf-h {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  color: #222222;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.pf-count {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: #AAAAAA;
}

.pf-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: #999999;
  line-height: 1.55;
}

.pf-note strong {
  color: #666666;
  font-weight: 600;
}

/* ─── Classes ─── */
.pf-classes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pf-add {
  flex-shrink: 0;
  padding: 13px 26px;
  border: none;
  border-radius: 11px;
  background: #1E88E5;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms, box-shadow 130ms, transform 90ms;
}

.pf-add:hover:not(:disabled) {
  background: #1565C0;
  box-shadow: 0 2px 10px rgba(30, 136, 229, 0.32);
}

.pf-add:active:not(:disabled) {
  transform: scale(0.97);
}

.pf-add:disabled {
  background: #CFC8BA;
  cursor: not-allowed;
}

.pf-classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.pf-empty {
  margin-top: 20px;
  padding: 28px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: #999999;
  background: #FAF7F1;
  border: 1.5px dashed rgba(0, 0, 0, 0.14);
  border-radius: 12px;
}

.pf-cls {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  background: #FAF7F1;
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
}

.pf-cls-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-cls-name {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1.5px solid #E0E0E0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: #1A1A1A;
  background: #FFFFFF;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}

.pf-cls-name:focus {
  border-color: #1E88E5;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
}

.pf-cls-del {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  color: #999999;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
}

.pf-cls-del:hover {
  background: #FFEBEE;
  color: #C62828;
}

.pf-cls-names {
  min-height: 128px;
  resize: vertical;
  padding: 10px 12px;
  border: 1.5px solid #E0E0E0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: #2A2A2A;
  background: #FFFFFF;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}

.pf-cls-names:focus {
  border-color: #1E88E5;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
}

.pf-cls-foot {
  display: flex;
  justify-content: flex-end;
}

.pf-cls-num {
  font-size: 11.5px;
  font-weight: 600;
  color: #AAAAAA;
}

/* ═══════════════════════════════════════════════
   DARK MODE  — Profile + class picker
   ═══════════════════════════════════════════════ */
body.dark .tool-classbar-label            { color: #5A779A; }

body.dark .ttcp-btn                       { background: #162030; border-color: rgba(255,255,255,0.12); color: #B8CDE8; }
body.dark .ttcp-btn:hover                 { background: #1C2840; border-color: rgba(255,255,255,0.22); }
body.dark .ttcp-menu                      { background: #111E30; box-shadow: 0 12px 36px rgba(0,0,0,0.55); }
body.dark .ttcp-item                      { color: #D8E8F8; }
body.dark .ttcp-item:hover:not(:disabled) { background: #182840; }
body.dark .ttcp-item-count                { background: rgba(255,255,255,0.08); color: #7A9AC0; }
body.dark .ttcp-empty                     { color: #5A779A; }

body.dark .pf-card                        { background: #0F1A2C; border-color: rgba(255,255,255,0.07); box-shadow: 0 2px 16px rgba(0,0,0,0.40); }
body.dark .pf-h                           { color: #D8E8F8; }
body.dark .pf-count                       { color: #486080; }
body.dark .pf-note                        { color: #5A779A; }
body.dark .pf-note strong                 { color: #8AAAC8; }
body.dark .pf-empty                       { background: #0B1220; border-color: rgba(255,255,255,0.10); color: #5A779A; }
body.dark .pf-cls                         { background: #0D1828; border-color: rgba(255,255,255,0.08); }
body.dark .pf-cls-name,
body.dark .pf-cls-names                   { background: #162030; border-color: rgba(255,255,255,0.10); color: #D8E8F8; }
body.dark .pf-cls-name:focus,
body.dark .pf-cls-names:focus             { background: #1C2840; border-color: #4A88D8; box-shadow: 0 0 0 3px rgba(74,136,216,0.20); }
body.dark .pf-cls-del                     { background: rgba(255,255,255,0.06); color: #8AAAC8; }
body.dark .pf-cls-del:hover               { background: rgba(180,20,20,0.22); color: #FF8888; }
body.dark .pf-cls-num                     { color: #486080; }
body.dark .pf-add:disabled                { background: #1A2840; color: #3A4A60; }

/* ═══════════════════════════════════════════════
   TIMER / STOPWATCH  (Casio-style LCD)
   ═══════════════════════════════════════════════ */
.tm-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-height: calc(100vh - var(--header-h) - var(--tabbar-h));
  padding: 40px 20px 56px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, 0.05), transparent 60%);
}

/* ── Watch case ── */
.tm-watch {
  position: relative;
  width: min(94vw, 560px);
  aspect-ratio: 1.5 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 34px;
  background: linear-gradient(157deg, #34343A 0%, #18181B 55%, #0B0B0D 100%);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.10),
    inset 0 -5px 12px rgba(0, 0, 0, 0.65);
}

/* ── Display wrapper (holds the screen + the depleting frame) ── */
.tm-display {
  position: relative;
  width: 74%;
  aspect-ratio: 1.9 / 1;
}

/* ── Depleting frame: a rounded rectangle flush with the screen,
      drawn clockwise from the top centre ── */
.tm-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
/* NOTE: no `vector-effect: non-scaling-stroke` here. Combined with the
   path's `pathLength="100"` + `stroke-dasharray`, Chromium measures the
   dash in user units but draws it in scaled screen pixels, which truncates
   the ring to ~60% of the loop. Letting the stroke scale with the viewBox
   keeps the dash math correct so the frame closes all the way round. */
.tm-frame-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 3;
}
.tm-frame-prog {
  fill: none;
  stroke: #F3F3F0;
  stroke-width: 3.4;
  stroke-linecap: round;
  transition: stroke 450ms ease;
}
.tm-watch.tm-danger .tm-frame-prog { stroke: #FF3B30; }

/* ── LCD screen ── */
.tm-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  padding: 12px 18px 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #20241B;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 36%),
    linear-gradient(160deg, #B7C0A6 0%, #A7B196 60%, #9EAA8C 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.28),
    inset 0 0 0 2px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.10);
}
.tm-screen.tm-alarm { animation: tmFlash 0.62s steps(1) infinite; }
@keyframes tmFlash {
  0%, 100% { background:
      linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 36%),
      linear-gradient(160deg, #B7C0A6 0%, #A7B196 60%, #9EAA8C 100%); }
  50%      { background:
      linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0) 36%),
      linear-gradient(160deg, #D8B6A6 0%, #CBA38F 60%, #C0967F 100%); }
}

/* top row: badge + live clock */
.tm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.tm-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 6px;
  border: 1.5px solid rgba(32, 36, 27, 0.5);
  border-radius: 4px;
  color: rgba(32, 36, 27, 0.85);
}
.tm-now {
  font-family: 'DSEG7-Classic', 'Courier New', monospace;
  font-size: clamp(13px, 3.3vw, 18px);
  letter-spacing: 0.5px;
  color: rgba(32, 36, 27, 0.82);
}

/* middle: countdown + ghost + marquee */
.tm-mid {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-ghost,
.tm-main {
  font-family: 'DSEG7-Classic', 'Courier New', monospace;
  font-size: clamp(30px, 9vw, 60px);
  line-height: 1;
  letter-spacing: 1px;
  transform: translateX(10px) skewX(-6deg);  /* indent right + slight rightward tilt */
}
.tm-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(32, 36, 27, 0.085);   /* faint "all segments on" backplate */
  pointer-events: none;
}
.tm-main {
  position: relative;
  z-index: 1;
  color: #1C2016;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* marquee shown only when the alarm fires — JS steps it one letter at a time */
.tm-marquee {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: 'DSEG14-Classic', 'Courier New', monospace;
  font-size: clamp(22px, 6.4vw, 40px);
  letter-spacing: 2px;
  color: #1C2016;
  white-space: pre;     /* keep the spaces so cells line up as glyphs change */
}
.tm-screen.tm-alarm .tm-main,
.tm-screen.tm-alarm .tm-ghost { visibility: hidden; }
.tm-screen.tm-alarm .tm-marquee { display: flex; }

/* ── Control panel ── */
.tm-panel {
  width: min(92vw, 470px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.tm-setrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px 24px;
  flex-wrap: wrap;
}
.tm-setfields {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.tm-setfields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #AAAAAA;
}
.tm-num {
  width: 74px;
  padding: 9px 10px;
  border: 1.5px solid #E0E0E0;
  border-radius: 9px;
  background: #FAFAFA;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: #1A1A1A;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.tm-num:focus {
  border-color: #1E88E5;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
}
.tm-colon {
  font-size: 22px;
  font-weight: 700;
  color: #BBB;
  padding-bottom: 6px;
}
.tm-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-chip {
  padding: 8px 13px;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  background: #F5EFE4;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: background 120ms, box-shadow 120ms, transform 90ms;
}
.tm-chip:hover { background: #FFFFFF; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10); }
.tm-chip:active { transform: scale(0.95); }

.tm-buttons { display: flex; gap: 12px; }
.tm-btn {
  min-width: 116px;
  padding: 13px 26px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.07);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: background 130ms, box-shadow 130ms, transform 90ms;
}
.tm-btn:hover { background: rgba(0, 0, 0, 0.12); }
.tm-btn:active { transform: scale(0.97); }
.tm-primary {
  background: #1E88E5;
  color: #FFFFFF;
}
.tm-primary:hover { background: #1565C0; box-shadow: 0 2px 10px rgba(30, 136, 229, 0.34); }
.tm-primary.tm-running { background: #E0A020; }
.tm-primary.tm-running:hover { background: #C98A12; box-shadow: 0 2px 10px rgba(224, 160, 32, 0.34); }

/* ── Dark mode (the watch itself stays the same physical object) ── */
body.dark .tm-wrap { background: radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, 0.35), transparent 62%); }
body.dark .tm-setfields label { color: #486080; }
body.dark .tm-num { background: #162030; border-color: rgba(255, 255, 255, 0.10); color: #D8E8F8; }
body.dark .tm-num:focus { background: #1C2840; border-color: #4A88D8; box-shadow: 0 0 0 3px rgba(74, 136, 216, 0.20); }
body.dark .tm-colon { color: #3A4A60; }
body.dark .tm-chip { background: #162030; border-color: rgba(255, 255, 255, 0.10); color: #B8CDE8; }
body.dark .tm-chip:hover { background: #1C2840; }
body.dark .tm-btn { background: rgba(255, 255, 255, 0.08); color: #B8CDE8; }
body.dark .tm-btn:hover { background: rgba(255, 255, 255, 0.14); }
body.dark .tm-primary { background: #1E5EA8; color: #FFFFFF; }
body.dark .tm-primary:hover { background: #1850A0; }

/* ── Large-text tweaks ── */
body.large-text .tm-btn { font-size: 16.5px; }
body.large-text .tm-chip { font-size: 14px; }

/* ═══════════════════════════════════════════════
   LANGUAGE SELECTOR
   ═══════════════════════════════════════════════ */
.kofi-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fcbf47;
  color: #323842;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.kofi-btn:hover { filter: brightness(0.95); }
.kofi-cup { width: 18px; height: 18px; }

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-text {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.3px;
  color: var(--text, #323842);
  white-space: nowrap;
}

.home-ad {
  width: 100%;
  max-width: 728px;
  margin: 24px auto 0;
  min-height: 90px;
}

/* ═══════════════════════════════════════════════
   SEO CONTENT (per-page crawlable text)
   ═══════════════════════════════════════════════ */
.tool-seo {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  color: var(--text, #323842);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
}
.tool-seo h1 {
  font-size: 30px;
  margin: 0 0 16px;
}
.tool-seo h2 {
  font-size: 21px;
  margin: 28px 0 10px;
}
.tool-seo p { margin: 0 0 14px; }
.tool-seo ul,
.tool-seo ol { margin: 0 0 14px; padding-left: 22px; }
.tool-seo li { margin: 4px 0; }
.tool-seo a { color: #4a7ec8; }

.seo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.seo-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--header-rule, #e3e3e3);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg, #fff);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.seo-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.seo-card h2 { margin: 0 0 8px; font-size: 18px; }
.seo-card p { margin: 0; font-size: 14px; opacity: 0.85; }

.lang-wrap { position: relative; display: inline-flex; }
.globe-icon { width: 22px; height: 22px; }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 156px;
  background: #FFFFFF;
  border-radius: 11px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 300;
  animation: ttcpIn 140ms ease;
}
.lang-wrap.open .lang-menu { display: flex; }

.lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: none;
  border-radius: 7px;
  background: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: #2A2A2A;
  text-align: left;
  cursor: pointer;
  transition: background 110ms;
}
.lang-item:hover { background: #F5F0E8; }
.lang-item.active { color: #1E88E5; }
.lang-item.active::after { content: '✓'; font-size: 12px; font-weight: 700; }

body.dark .globe-icon circle,
body.dark .globe-icon path { stroke: #4A6888; }
body.dark .lang-menu { background: #111E30; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55); }
body.dark .lang-item { color: #D8E8F8; }
body.dark .lang-item:hover { background: #182840; }
body.dark .lang-item.active { color: #4A9EE8; }