/* style.css - ClassKit Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');

:root {
  --bg-primary: #0a0b10;
  --bg-secondary: rgba(20, 22, 37, 0.6);
  --glass-bg: rgba(25, 27, 47, 0.4);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.03);
  
  --accent-blue: #00f2fe;
  --accent-purple: #9b51e0;
  --accent-pink: #ff007f;
  --accent-green: #00ff87;
  --accent-yellow: #f1c40f;
  
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-active: #ffffff;
  
  --glow-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
  --sidebar-width: 260px;
  --transition-speed: 0.3s;
}

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

body {
  font-family: 'Outfit', 'Noto Sans TC', sans-serif;
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(at 10% 20%, rgba(155, 81, 224, 0.15) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(0, 242, 254, 0.15) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(255, 0, 127, 0.05) 0px, transparent 60%);
  background-attachment: fixed;
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(10, 11, 16, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

/* Navigation Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: rgba(10, 11, 20, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--glass-border);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  padding: 24px 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 24px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 20px;
}

.logo-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: #000;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
  animation: logo-glow 3s infinite alternate;
}

.logo-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(to right, #ffffff, var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

.menu-item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform var(--transition-speed);
}

.menu-item:hover {
  color: var(--text-active);
  background: var(--glass-highlight);
  border-color: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

.menu-item.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15), rgba(155, 81, 224, 0.15));
  border-color: rgba(0, 242, 254, 0.3);
  box-shadow: inset 0 0 10px rgba(0, 242, 254, 0.05);
}

.menu-item.active svg {
  color: var(--accent-blue);
  filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.5));
  transform: scale(1.1);
}

/* Class Selector Dropdown in Sidebar */
.class-selector-wrapper {
  margin-top: auto;
  padding: 12px;
  background: var(--glass-bg);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
}

.class-selector-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.class-select {
  width: 100%;
  padding: 8px 12px;
  background: #111322;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.class-select:focus {
  border-color: var(--accent-blue);
}

/* Main Content Wrapper */
.main-content {
  margin-left: var(--sidebar-width);
  padding: 30px 40px;
  flex-grow: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Header and Dashboard Overview */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.top-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
  background: linear-gradient(to right, #fff, var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-title p {
  color: var(--text-muted);
  font-size: 14px;
}

.quick-stats {
  display: flex;
  gap: 16px;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.stat-pill strong {
  color: var(--accent-blue);
}

/* Tab Panels */
.tab-panel {
  display: none;
  flex-direction: column;
  gap: 24px;
  animation: fade-in 0.4s ease-out forwards;
}

.tab-panel.active {
  display: flex;
}

/* Common Layout Components */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--glass-highlight) 0%, transparent 100%);
  pointer-events: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h2 {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header h2 svg {
  width: 20px;
  height: 20px;
  color: var(--accent-blue);
}

/* Forms & Inputs */
.btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  padding: 10px 20px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #000;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.3);
  font-weight: 700;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #00d2de, #8b41d0);
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.5);
  transform: translateY(-1px);
}

.btn-pink {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
  color: #fff;
  border: none;
  box-shadow: 0 4px 15px rgba(255, 0, 127, 0.3);
}

.btn-pink:hover {
  box-shadow: 0 6px 20px rgba(255, 0, 127, 0.5);
  transform: translateY(-1px);
}

.input-text, .textarea-field {
  width: 100%;
  background: rgba(10, 11, 20, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.input-text:focus, .textarea-field:focus {
  border-color: var(--accent-blue);
}

/* ========================================================
   DASHBOARD / WELCOME TAB
   ======================================================== */
.welcome-banner {
  background: linear-gradient(135deg, rgba(20, 22, 45, 0.8), rgba(10, 11, 20, 0.9));
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.welcome-text h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(to right, #fff, var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-text p {
  color: var(--text-muted);
  font-size: 16px;
  max-width: 500px;
  line-height: 1.6;
}

.welcome-art {
  position: relative;
  width: 200px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glowing-orb {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--accent-blue) 0%, var(--accent-purple) 60%, transparent 100%);
  border-radius: 50%;
  filter: blur(25px);
  opacity: 0.6;
  animation: orb-pulse 4s infinite alternate;
}

.welcome-art svg {
  position: absolute;
  width: 80px;
  height: 80px;
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.8));
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.tool-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tool-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 242, 254, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 242, 254, 0.1);
}

.tool-icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.tool-card:hover .tool-icon-wrapper {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #000;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

.tool-icon-wrapper svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.tool-card h3 {
  font-size: 18px;
  font-weight: 600;
}

.tool-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ========================================================
   1. RANDOM PICKER / LOTTERY TAB
   ======================================================== */
.picker-container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}

.picker-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: linear-gradient(135deg, #1f85de, #766bb4, #1a7cd1, #8063ad);
  background-size: 400% 400%;
  animation: dynamicGradient 15s ease infinite;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25) !important;
  transition: background 0.15s ease;
}

@keyframes dynamicGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.wheel-wrapper {
  position: relative;
  width: 380px;
  height: 380px;
  margin-bottom: 20px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.05) 0%, rgba(155, 81, 224, 0.05) 70%, transparent 100%);
  border-radius: 50%;
  padding: 10px;
  box-sizing: border-box;
}

/* 科技感旋轉裝飾背景外框 */
.wheel-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px dashed rgba(0, 242, 254, 0.3);
  border-radius: 50%;
  animation: rotate-clockwise 20s linear infinite;
  pointer-events: none;
}

.wheel-wrapper::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid transparent;
  border-top-color: var(--accent-blue);
  border-bottom-color: var(--accent-pink);
  border-radius: 50%;
  animation: rotate-counter-clockwise 10s linear infinite;
  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.5));
  pointer-events: none;
}

@keyframes rotate-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotate-counter-clockwise {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.wheel-pointer {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent-pink) 0%, #ff66b2 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  z-index: 10;
  filter: drop-shadow(0 0 10px rgba(255, 0, 127, 0.8));
  animation: pointer-bob 1s ease-in-out infinite alternate;
}

@keyframes pointer-bob {
  from { top: -15px; filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.6)); }
  to { top: -10px; filter: drop-shadow(0 0 15px rgba(255, 0, 127, 0.9)); }
}

#wheel-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 
    0 0 0 6px var(--glass-border),
    0 0 25px rgba(0, 242, 254, 0.25),
    0 15px 35px rgba(0, 0, 0, 0.6);
  transition: transform 0.05s ease-out;
}

.wheel-center-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, #1a1d36 30%, var(--accent-blue) 70%, #05070c 100%);
  border: 3px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  z-index: 8;
  box-shadow: 
    0 0 15px rgba(0, 242, 254, 0.8),
    inset 0 0 8px rgba(255, 255, 255, 0.6);
}

.cards-deck-wrapper {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-height: 380px;
  overflow-y: auto;
  padding: 10px;
}

.student-card {
  width: 120px;
  height: 160px;
  background: transparent;
  cursor: pointer;
  perspective: 1000px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.student-card:hover {
  transform: translateY(-8px) scale(1.03);
  z-index: 5;
}

.card-inner {
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  position: relative;
}

.student-card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

/* 卡牌正面（卡背 - 未翻開狀態，科技晶片風格） */
.card-front {
  background: linear-gradient(135deg, #0f1123 0%, #171b3c 50%, #0f1123 100%);
  border: 2px solid rgba(0, 242, 254, 0.3);
  color: var(--accent-blue);
  box-shadow: 
    inset 0 0 15px rgba(0, 242, 254, 0.2),
    0 4px 10px rgba(0,0,0,0.4);
  background-image: 
    radial-gradient(rgba(0, 242, 254, 0.15) 1px, transparent 0),
    radial-gradient(rgba(155, 81, 224, 0.15) 1px, transparent 0);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  overflow: hidden;
}

/* 卡背裝飾核心寶石 */
.card-front::after {
  content: '';
  width: 32px;
  height: 32px;
  background: radial-gradient(circle, #fff 0%, var(--accent-blue) 60%, rgba(0, 242, 254, 0.2) 100%);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-blue);
  margin-top: 10px;
  animation: pulse-glow 2s infinite alternate;
}

@keyframes pulse-glow {
  from { transform: scale(0.9); filter: brightness(1); }
  to { transform: scale(1.1); filter: brightness(1.3); }
}

.card-front svg {
  width: 38px;
  height: 38px;
  color: var(--accent-blue);
  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6));
}

/* 卡牌背面（翻開後，高科技霓虹卡面） */
.card-back {
  background: linear-gradient(135deg, #111322 0%, #1c1f3d 100%);
  border: 2px solid var(--accent-purple);
  color: #fff;
  transform: rotateY(180deg);
  font-weight: 700;
  box-shadow: 
    inset 0 0 20px rgba(155, 81, 224, 0.3),
    0 8px 20px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-winner-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  margin-top: auto;
  margin-bottom: auto;
  word-break: break-all;
}

.card-winner-attribute {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent-blue);
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.2);
  padding: 2px 4px;
  border-radius: 4px;
  margin-top: auto;
  white-space: nowrap;
}

.flash-picker-wrapper {
  display: none;
  width: 100%;
  height: 300px;
  align-items: center;
  justify-content: center;
}

.flash-box {
  font-size: 72px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  padding: 40px 80px;
  background: rgba(10, 11, 20, 0.75) !important;
  border: 2px solid var(--accent-blue) !important;
  border-radius: 24px;
  min-width: 320px;
  color: var(--accent-blue);
  text-shadow: 0 0 20px rgba(0, 242, 254, 0.7);
  box-shadow: 
    inset 0 0 30px rgba(0, 242, 254, 0.15),
    0 0 15px rgba(0, 242, 254, 0.2);
  position: relative;
  overflow: hidden;
}

/* 科技水平掃描線效果 */
.flash-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* 閃爍跳動時的顏色變化 */
.flash-box.rolling-active {
  animation: flash-glitch-color 0.15s infinite alternate;
}

@keyframes flash-glitch-color {
  0% { border-color: var(--accent-blue); text-shadow: 0 0 15px rgba(0, 242, 254, 0.6); }
  100% { border-color: var(--accent-pink); text-shadow: 0 0 15px rgba(255, 0, 127, 0.6); color: var(--accent-pink); }
}

.flash-box.highlight {
  color: #fff !important;
  background: linear-gradient(135deg, #1f0b35 0%, #070913 100%) !important;
  border-color: #fff !important;
  text-shadow: 
    0 0 10px #fff,
    0 0 20px var(--accent-pink),
    0 0 40px var(--accent-purple) !important;
  transform: scale(1.08);
  box-shadow: 
    0 0 30px rgba(255, 0, 127, 0.6),
    inset 0 0 20px rgba(155, 81, 224, 0.5) !important;
  animation: highlight-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards, border-rainbow-glow 3s linear infinite;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

.picker-controls {
  display: flex;
  gap: 16px;
}

.picker-settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-group label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.btn-group-toggle {
  display: flex;
  background: rgba(10, 11, 20, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  padding: 2px;
}

.toggle-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn.active {
  color: #fff;
  background: var(--glass-highlight);
  box-shadow: inset 0 0 5px rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}

.checkbox-label input {
  accent-color: var(--accent-blue);
  width: 16px;
  height: 16px;
}

.winner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 6, 12, 0.9);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.winner-card {
  background: linear-gradient(135deg, rgba(20, 22, 45, 0.95), rgba(10, 11, 20, 0.98));
  border: 2px solid var(--accent-blue);
  box-shadow: 0 0 50px rgba(0, 242, 254, 0.4);
  border-radius: 32px;
  padding: 40px 60px;
  text-align: center;
  animation: zoom-in-glowing 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  max-width: 500px;
  width: 90%;
}

.winner-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 16px;
}

.winner-name {
  font-size: 64px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 242, 254, 0.8), 0 0 40px rgba(155, 81, 224, 0.4);
  margin-bottom: 24px;
}

/* ========================================================
   2. SCOREBOARD TAB
   ======================================================== */
.scoreboard-top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scoreboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.team-card-v2 {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1) inset;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 4px solid transparent;
}

/* 上半部：彩色漸層視覺區 */
.card-visual-top {
  position: relative;
  height: 135px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  color: #ffffff;
  background-size: cover;
  transition: all 0.3s ease;
}

.card-gender-badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.card-action-circle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: transform 0.2s, background-color 0.2s;
  overflow: hidden;
  font-size: 26px;
}

.card-action-circle:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.35);
}

.card-heart-badge {
  position: absolute;
  top: 62px;
  right: 22px;
  background: #ff3366;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.5);
  animation: pulse-heart-icon 1s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse-heart-icon {
  0% { transform: scale(0.95); }
  100% { transform: scale(1.15); }
}

.card-visual-name {
  font-size: 22px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  letter-spacing: 0.5px;
  margin-top: auto;
  text-align: left;
}

.delete-team-btn-v2 {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: rgba(255,255,255,0.7);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.2s;
  opacity: 0;
}

.team-card-v2:hover .delete-team-btn-v2 {
  opacity: 1;
}

.delete-team-btn-v2:hover {
  background: #ff3366;
  color: #fff;
}

/* 下半部：亮色資訊與控制區 */
.card-info-bottom {
  background: #ffffff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #1e293b;
  text-align: left;
}

.card-sub-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
}

.card-group-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 700;
}

.card-score-display {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-score-display.pop {
  transform: scale(1.25);
}

/* 按鈕控制區 */
.score-controls-v2 {
  display: flex;
  gap: 6px;
}

.score-btn-v2 {
  flex: 1;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.score-btn-v2.minus:hover {
  background: #ffedf2;
  border-color: #ffccd9;
  color: #ff3366;
  box-shadow: 0 4px 12px rgba(255, 51, 102, 0.2);
  transform: translateY(-2px);
}

.score-btn-v2.plus-one {
  /* 使用與加分相襯的白底綠字 */
}

.score-btn-v2.plus-one:hover {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
  transform: translateY(-2px);
}

.score-btn-v2.plus-five {
  /* 使用橘黃色字 */
}

.score-btn-v2.plus-five:hover {
  background: #fffbeb;
  border-color: #fde68a;
  color: #d97706;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
  transform: translateY(-2px);
}

/* 卡片 Hover 發光連動 */
.team-card-v2:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 
              0 0 25px var(--student-color, rgba(0, 242, 254, 0.35));
  border-color: var(--student-color, transparent);
}

/* 領先者卡片 */
.team-card-v2.leading {
  border-color: #f59e0b;
  animation: leader-card-pulse 2s infinite alternate ease-in-out;
}

@keyframes leader-card-pulse {
  0% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 
                0 0 12px rgba(245, 158, 11, 0.3);
  }
  100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 
                0 0 25px rgba(245, 158, 11, 0.6);
  }
}

.team-card-v2.leading:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 
              0 0 35px rgba(245, 158, 11, 0.8);
}

/* 自訂獎懲編輯面板 (v2.6) */
#custom-pool-editor {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.textarea-field {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.textarea-field:focus {
  outline: none;
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

.delete-team-btn svg {
  width: 14px;
  height: 14px;
}

.score-floating-text {
  position: absolute;
  font-weight: 800;
  font-size: 24px;
  pointer-events: none;
  animation: float-up-fade 0.8s ease-out forwards;
}

.floating-plus {
  color: var(--accent-green);
  text-shadow: 0 0 8px rgba(0, 255, 135, 0.6);
}

.floating-minus {
  color: var(--accent-pink);
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}

/* ========================================================
   3. GROUP MAKER TAB
   ======================================================== */
.group-setup {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 24px;
}

.group-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
  gap: 16px;
  align-items: flex-end;
}

.group-results-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.group-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 16px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}

.group-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 12px;
}

.group-title {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}

.group-count-badge {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.group-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.member-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  font-size: 13px;
  cursor: grab;
  user-select: none;
  transition: all 0.2s;
}

.member-pill:active {
  cursor: grabbing;
}

.member-pill.dragging {
  opacity: 0.5;
  background: rgba(0, 242, 254, 0.1);
  border-color: var(--accent-blue);
}

/* ========================================================
   4. TIMER & STOPWATCH TAB
   ======================================================== */
.timer-toggle-tabs {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 10px;
}

.timer-main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.circle-timer-wrapper {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.circle-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.03);
  stroke-width: 10;
}

.circle-progress {
  fill: none;
  stroke: url(#timer-gradient);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 754;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.1s linear;
}

.timer-display-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timer-digits {
  font-size: 54px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.timer-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-top: 4px;
}

.timer-presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

.preset-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.preset-btn:hover {
  border-color: var(--accent-blue);
  color: #fff;
}

.timer-controls-row {
  display: flex;
  gap: 16px;
}

.custom-time-input-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  align-items: center;
}

.custom-time-input-row label {
  font-size: 13px;
  color: var(--text-muted);
}

.time-num-input {
  width: 60px;
  background: rgba(10, 11, 20, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  text-align: center;
  font-family: inherit;
  font-weight: 600;
  outline: none;
}

.laps-container {
  width: 100%;
  max-width: 400px;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 24px;
  border-top: 1px solid var(--glass-border);
  padding-top: 16px;
}

.lap-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 13px;
}

.lap-number {
  color: var(--text-muted);
}

.lap-time {
  font-weight: 600;
  font-family: monospace;
}

/* ========================================================
   5. DICE & NUMBERS TAB
   ======================================================== */
.dice-generator-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.dice-arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.dice-tray {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  perspective: 800px;
  min-height: 160px;
  width: 100%;
  margin-bottom: 30px;
}

.dice-3d {
  position: relative;
  width: 70px;
  height: 70px;
  transform-style: preserve-3d;
  transition: transform 1.5s ease-out;
}

.dice-face {
  position: absolute;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0,0,0,0.3);
  backface-visibility: hidden;
}

.dice-dot {
  background-color: #333;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  justify-self: center;
  align-self: center;
}

.face-1 { transform: rotateY(0deg) translateZ(35px); }
.face-2 { transform: rotateY(90deg) translateZ(35px); }
.face-3 { transform: rotateX(90deg) translateZ(35px); }
.face-4 { transform: rotateX(-90deg) translateZ(35px); }
.face-5 { transform: rotateY(-90deg) translateZ(35px); }
.face-6 { transform: rotateY(180deg) translateZ(35px); }

.face-1 .dice-dot { grid-area: 2 / 2; background-color: var(--accent-pink); width: 14px; height: 14px; }
.face-2 .dice-dot:nth-child(1) { grid-area: 1 / 1; }
.face-2 .dice-dot:nth-child(2) { grid-area: 3 / 3; }
.face-3 .dice-dot:nth-child(1) { grid-area: 1 / 1; }
.face-3 .dice-dot:nth-child(2) { grid-area: 2 / 2; }
.face-3 .dice-dot:nth-child(3) { grid-area: 3 / 3; }
.face-4 .dice-dot:nth-child(1) { grid-area: 1 / 1; }
.face-4 .dice-dot:nth-child(2) { grid-area: 1 / 3; }
.face-4 .dice-dot:nth-child(3) { grid-area: 3 / 1; }
.face-4 .dice-dot:nth-child(4) { grid-area: 3 / 3; }
.face-5 .dice-dot:nth-child(1) { grid-area: 1 / 1; }
.face-5 .dice-dot:nth-child(2) { grid-area: 1 / 3; }
.face-5 .dice-dot:nth-child(3) { grid-area: 2 / 2; }
.face-5 .dice-dot:nth-child(4) { grid-area: 3 / 1; }
.face-5 .dice-dot:nth-child(5) { grid-area: 3 / 3; }
.face-6 .dice-dot:nth-child(1) { grid-area: 1 / 1; }
.face-6 .dice-dot:nth-child(2) { grid-area: 1 / 3; }
.face-6 .dice-dot:nth-child(3) { grid-area: 2 / 1; }
.face-6 .dice-dot:nth-child(4) { grid-area: 2 / 3; }
.face-6 .dice-dot:nth-child(5) { grid-area: 3 / 1; }
.face-6 .dice-dot:nth-child(6) { grid-area: 3 / 3; }

.dice-3d.roll-1 { transform: rotateX(720deg) rotateY(720deg); }
.dice-3d.roll-2 { transform: rotateX(720deg) rotateY(810deg); }
.dice-3d.roll-3 { transform: rotateX(810deg) rotateY(720deg); }
.dice-3d.roll-4 { transform: rotateX(990deg) rotateY(720deg); }
.dice-3d.roll-5 { transform: rotateX(720deg) rotateY(630deg); }
.dice-3d.roll-6 { transform: rotateX(720deg) rotateY(900deg); }

.number-generator-tray {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.random-number-box {
  font-size: 84px;
  font-weight: 800;
  text-align: center;
  padding: 20px 50px;
  color: var(--accent-green);
  text-shadow: 0 0 15px rgba(0, 255, 135, 0.4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  min-width: 180px;
  margin-bottom: 30px;
  font-family: monospace;
}

/* ========================================================
   6. SOUNDBOARD TAB
   ======================================================== */
.soundboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.sound-pad {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 20px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.sound-pad::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.05);
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.sound-pad:active::after {
  opacity: 1;
}

.sound-pad:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.sound-pad-icon {
  font-size: 32px;
}

.sound-pad-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.sound-pad.correct { border-color: rgba(0, 255, 135, 0.2); }
.sound-pad.correct:hover { border-color: var(--accent-green); box-shadow: 0 8px 20px rgba(0, 255, 135, 0.15); }
.sound-pad.correct .sound-pad-icon { filter: drop-shadow(0 0 5px rgba(0, 255, 135, 0.4)); }

.sound-pad.wrong { border-color: rgba(255, 0, 127, 0.2); }
.sound-pad.wrong:hover { border-color: var(--accent-pink); box-shadow: 0 8px 20px rgba(255, 0, 127, 0.15); }
.sound-pad.wrong .sound-pad-icon { filter: drop-shadow(0 0 5px rgba(255, 0, 127, 0.4)); }

.sound-pad.applause { border-color: rgba(241, 196, 15, 0.2); }
.sound-pad.applause:hover { border-color: var(--accent-yellow); box-shadow: 0 8px 20px rgba(241, 196, 15, 0.15); }
.sound-pad.applause .sound-pad-icon { filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.4)); }

.sound-pad.drumroll { border-color: rgba(155, 81, 224, 0.2); }
.sound-pad.drumroll:hover { border-color: var(--accent-purple); box-shadow: 0 8px 20px rgba(155, 81, 224, 0.15); }
.sound-pad.drumroll .sound-pad-icon { filter: drop-shadow(0 0 5px rgba(155, 81, 224, 0.4)); }

.sound-pad.coin { border-color: rgba(0, 242, 254, 0.2); }
.sound-pad.coin:hover { border-color: var(--accent-blue); box-shadow: 0 8px 20px rgba(0, 242, 254, 0.15); }
.sound-pad.coin .sound-pad-icon { filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.4)); }

/* ========================================================
   7. ROSTER / SETTINGS TAB
   ======================================================== */
.roster-card {
  height: 100%;
}

.roster-flex-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100% - 60px);
}

.roster-textarea {
  flex-grow: 1;
  min-height: 200px;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
}

#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  pointer-events: none;
  display: none;
}

/* ========================================================
   ANIMATIONS
   ======================================================== */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logo-glow {
  from {
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
  }
  to {
    box-shadow: 0 0 22px rgba(0, 242, 254, 0.6), 0 0 12px rgba(155, 81, 224, 0.4);
  }
}

@keyframes orb-pulse {
  from {
    transform: scale(0.9) rotate(0deg);
    opacity: 0.5;
  }
  to {
    transform: scale(1.1) rotate(360deg);
    opacity: 0.75;
  }
}

@keyframes border-pulse {
  from {
    border-color: var(--glass-border);
  }
  to {
    border-color: rgba(0, 242, 254, 0.4);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.1);
  }
}

@keyframes zoom-in-glowing {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes float-up-fade {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) scale(0.8);
    opacity: 0;
  }
}

/* Responsive Overrides */
@media (max-width: 900px) {
  body {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
    padding: 16px;
  }
  
  .logo-container {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  
  .menu-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .menu-item {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .main-content {
    margin-left: 0;
    padding: 20px;
  }
  
  .grid-2col {
    grid-template-columns: 1fr;
  }
  
  .picker-container {
    grid-template-columns: 1fr;
  }
}

#counters-grid {
  display: grid;
  gap: 24px;
  width: 100%;
  margin-top: 15px;
  transition: all 0.3s ease;
}
#counters-grid.grid-1 {
  grid-template-columns: 1fr;
}
#counters-grid.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
#counters-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
#counters-grid.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ========================================================
   TALLY COUNTER STYLES
   ======================================================== */
.tally-counter-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tally-counter-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.counter-delete-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.counter-delete-btn:hover {
  background: rgba(255, 0, 127, 0.1);
  color: var(--accent-pink);
}

.counter-name-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  width: 80%;
  padding: 4px;
  outline: none;
  transition: all 0.2s;
}

.counter-name-input:focus {
  border-bottom-color: var(--accent-blue);
}

.counter-val {
  font-size: 64px;
  font-weight: 800;
  color: var(--accent-blue);
  text-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
  margin: 10px 0;
  transition: all 0.15s ease;
}

.counter-val.pop {
  transform: scale(1.25);
}

.counter-controls {
  display: flex;
  gap: 12px;
  width: 100%;
}

.counter-btn {
  flex: 1;
  padding: 12px;
  font-size: 20px;
  font-weight: 800;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.counter-btn.minus:hover {
  background: rgba(255, 0, 127, 0.1);
  border-color: var(--accent-pink);
  color: var(--accent-pink);
}

.counter-btn.plus:hover {
  background: rgba(0, 242, 254, 0.1);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.counter-reset-btn {
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.counter-reset-btn:hover {
  border-color: #fff;
  color: #fff;
}

/* ========================================================
   AVATAR SELECTOR MODAL & VISITOR COUNTER STYLES
   ======================================================== */
.visitor-counter-pill {
  animation: visitor-neon 2.5s infinite alternate;
}

/* 限制外部計數器整體大小，使其與旁邊圈起來的強顯數字（如 8、0）大小完全一致 */
.f-counter, .fcnt-root {
  font-size: 11px !important; /* 藉由控制基底 font-size 控制其 em 比例的黑框與發光字體大小 */
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
}
.fcnt-digit {
  border-radius: 4px !important; /* 稍微縮小圓角以符合小尺寸比例 */
}

@keyframes visitor-neon {
  0% {
    box-shadow: 0 0 5px rgba(0, 242, 254, 0.2), inset 0 0 5px rgba(0, 242, 254, 0.1);
    border-color: rgba(0, 242, 254, 0.4);
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.5), inset 0 0 8px rgba(0, 242, 254, 0.2);
    border-color: rgba(0, 242, 254, 0.8);
  }
}

.avatar-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 6, 12, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-modal.show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.avatar-modal-content {
  width: 90%;
  max-width: 460px;
  background: rgba(20, 22, 38, 0.85);
  border: 1px solid rgba(0, 242, 254, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 242, 254, 0.15);
  animation: modal-scale-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modal-scale-up {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

.avatar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.avatar-modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #fff, var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.avatar-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.avatar-modal-close:hover {
  color: var(--accent-pink);
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 14px;
  max-height: 200px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(10, 11, 20, 0.4);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.emoji-picker-item {
  font-size: 26px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.emoji-picker-item:hover {
  background: rgba(0, 242, 254, 0.15);
  border-color: var(--accent-blue);
  transform: scale(1.1) translateY(-2px);
}

.emoji-picker-item.active {
  background: rgba(0, 242, 254, 0.25);
  border-color: var(--accent-blue);
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.4);
}

.team-card.leading .team-icon img {
  border-color: var(--accent-yellow) !important;
  box-shadow: 0 0 15px rgba(241, 196, 15, 0.6);
}

.team-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.team-card:hover .team-icon img {
  transform: scale(1.08);
}


/* ========================================================
   NEW FEATURES & PRIVACY SHIELD STYLES
   ======================================================== */

/* Global lock button in sidebar */
#global-privacy-lock {
  transition: all 0.3s ease;
}
#global-privacy-lock.locked {
  background: rgba(255, 0, 127, 0.1);
  border: 1px solid rgba(255, 0, 127, 0.3);
  color: var(--accent-pink);
}
#global-privacy-lock.locked:hover {
  background: rgba(255, 0, 127, 0.2);
}
#global-privacy-lock.unlocked {
  background: rgba(0, 255, 135, 0.1);
  border: 1px solid rgba(0, 255, 135, 0.3);
  color: var(--accent-green);
}
#global-privacy-lock.unlocked:hover {
  background: rgba(0, 255, 135, 0.2);
}

/* Privacy Lock Screen */
.privacy-lock-screen {
  max-width: 420px;
  margin: 60px auto;
  text-align: center;
  border-color: rgba(255, 255, 255, 0.1);
  padding: 35px 24px;
}

.lock-shield-icon {
  font-size: 54px;
  display: block;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.3));
}

.lock-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.lock-header p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Dots indicator for unlock */
.dots-indicator {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}

.dots-indicator .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--glass-border);
  transition: all 0.2s ease;
}

.dots-indicator .dot.active {
  background: var(--accent-blue);
  box-shadow: 0 0 10px var(--accent-blue);
  transform: scale(1.15);
}

/* Keypad Grid for ATM style pin entry */
.keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 260px;
  margin: 15px auto 0;
}

.key-btn {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.key-btn:hover {
  background: var(--glass-highlight);
  border-color: rgba(0, 242, 254, 0.4);
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.1);
  transform: translateY(-2px);
}

.key-btn.action-key {
  font-size: 15px;
}

.key-btn.text-red {
  color: var(--accent-pink);
  border-color: rgba(255, 0, 127, 0.2);
}
.key-btn.text-red:hover {
  background: rgba(255, 0, 127, 0.1);
}

.key-btn.text-green {
  color: var(--accent-green);
  border-color: rgba(0, 255, 135, 0.2);
}
.key-btn.text-green:hover {
  background: rgba(0, 255, 135, 0.1);
}

.pwd-input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pwd-box {
  text-align: center;
  font-size: 18px;
  letter-spacing: 4px;
}

.pwd-error-msg {
  font-size: 12px;
  color: var(--accent-pink);
  font-weight: 600;
  text-align: center;
}

/* Shake effect for wrong password */
.shake-effect {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* --- Links cards & grid styles --- */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
}
.link-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-blue);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.link-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.link-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s;
}
.link-card-title:hover {
  color: var(--accent-blue);
}

.link-badge {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(0, 242, 254, 0.1);
  color: var(--accent-blue);
  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
}

.link-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  flex-grow: 1;
}

.link-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--glass-border);
  padding-top: 10px;
  margin-top: 4px;
}

.link-visit-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-blue);
  text-decoration: none;
}

.link-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.link-delete-btn:hover {
  color: var(--accent-pink);
}

/* --- Notepad convenience notes styles --- */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.note-card {
  border-radius: 16px;
  padding: 20px;
  min-height: 180px;
  color: #0c101b;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(var(--rotation, 0deg));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.04);
}
.note-card:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

.note-content {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  word-break: break-word;
}

.note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(0,0,0,0.45);
  border-top: 1px dashed rgba(0,0,0,0.08);
  padding-top: 8px;
  margin-top: 10px;
}

.note-delete {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: rgba(0,0,0,0.4);
}
.note-delete:hover {
  color: var(--accent-pink);
}

.note-yellow { background-color: #fef08a; }
.note-blue { background-color: #bfdbfe; }
.note-green { background-color: #bbf7d0; }
.note-pink { background-color: #fbcfe8; }

.note-add-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  flex-grow: 1;
  max-width: 600px;
  flex-wrap: wrap;
}

#note-input {
  flex-grow: 1;
  border: none;
  background: transparent;
  border-bottom: 2px solid var(--glass-border);
  color: #fff;
  outline: none;
  padding: 6px;
  font-size: 14px;
}
#note-input:focus {
  border-bottom-color: var(--accent-blue);
}

.note-color-select {
  display: flex;
  gap: 6px;
}

.note-color-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.note-color-btn.active {
  border-color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 5px #fff;
}

/* --- Drawing Whiteboard styles --- */
.whiteboard-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 65vh;
  min-height: 480px;
}

.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 11, 20, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px 16px;
  flex-wrap: wrap;
  gap: 8px;
}

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

.tool-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.board-tool-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-tool-btn:hover {
  background: var(--glass-highlight);
}
.board-tool-btn.active {
  background: var(--accent-blue);
  color: #000;
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.color-dot.active {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 5px #fff;
}

#custom-color-picker {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
}
#custom-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}
#custom-color-picker::-webkit-color-swatch {
  border-radius: 50%;
  border: 1px solid var(--glass-border);
}

.board-toolbar input[type="range"] {
  accent-color: var(--accent-blue);
  width: 80px;
}

#brush-size-display {
  font-size: 11px;
  color: var(--text-muted);
  width: 35px;
}

.tool-group-right {
  display: flex;
  gap: 8px;
}

.canvas-wrapper {
  flex-grow: 1;
  background: #0a0b10;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

#whiteboard-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none !important; /* 停用大觸控螢幕的預設滾動手勢，防止畫筆卡頓與停頓 */
}

/* Modals styles (Public links dialog) */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5,6,12,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal-backdrop.active {
  display: flex;
  opacity: 1;
}

.modal {
  background: rgba(20,22,38,0.95);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}
.modal-backdrop.active .modal {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--glass-border);
}
.modal-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
}
.modal-close:hover {
  color: #fff;
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.form-group input, .form-group textarea {
  width: 100%;
  background: rgba(10,11,20,0.7);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--accent-blue);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.required {
  color: var(--accent-pink);
}

/* ========================================================
   9. SUB-TABS NAVIGATION (子分頁樣式)
   ======================================================== */
.sub-tabs-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 12px;
}

.sub-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.sub-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.sub-tab-btn.active {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

/* ========================================================
   10. COUNSELING RECORDS TAB (輔導紀錄樣式)
   ======================================================== */
.counsel-list-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 15px;
}

.counsel-card {
  border-left: 4px solid var(--accent-blue) !important;
  padding: 20px;
  transition: all 0.3s ease;
}

.counsel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  border-color: rgba(255, 255, 255, 0.15);
}

.counsel-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.counsel-card-header .student-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.counsel-card-header .student-info h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.student-class-tag {
  background: rgba(0, 242, 254, 0.1);
  color: var(--accent-blue);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.counsel-card-header .meta-info {
  font-size: 12px;
  color: var(--text-muted);
}

.counsel-card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.counsel-type-badge {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
}

.recorder-tag {
  color: var(--accent-yellow);
  font-size: 11px;
  margin-left: 5px;
  align-self: center;
}

.counsel-card-content .content-section {
  font-size: 14px;
  line-height: 1.6;
}

.counsel-card-content strong {
  color: var(--text-muted);
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}

.counsel-card-content p {
  color: var(--text-main);
  white-space: pre-wrap;
  margin: 0;
}

.counsel-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.06);
  align-items: center;
}

/* 雙欄表單 */
.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .form-row-2col {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.input-select, .input-date {
  width: 100%;
  background: rgba(10,11,20,0.7);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  color-scheme: dark; /* 強制日期控制項使用深色模式 */
}

/* 確保日曆 picker 圖示在深色背景下為清晰的白色小按鈕樣式 */
.input-date::-webkit-calendar-picker-indicator {
  background-color: #ffffff !important;
  border-radius: 4px;
  padding: 4px;
  filter: invert(0) !important;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.input-date::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: #e5e5e5 !important;
}

.input-select:focus, .input-date:focus {
  border-color: var(--accent-blue);
}

.input-select option {
  background: #111322;
  color: #fff;
}

/* 核取方塊群組 */
.counsel-checkbox-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.15);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
}

/* 下拉匯出選單 */
.export-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.export-dropdown-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #191b2d;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.4);
  z-index: 100;
  display: none;
  min-width: 180px;
  padding: 5px 0;
  margin-bottom: 5px;
}

.export-dropdown-menu.active {
  display: block;
}

.dropdown-item {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 15px;
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
  display: block;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* ========================================================
   11. ATTENDANCE SYSTEM TAB (線上點名表樣式)
   ======================================================== */
.roll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.attendance-group-card {
  border-top: 3px solid var(--accent-blue) !important;
  padding: 16px;
  height: 100%;
}

.attendance-group-card .group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 8px;
}

.attendance-group-card .group-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.attendance-group-card .group-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attendance-student-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}

.attendance-student-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.student-name-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.status-pills-group {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.2);
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}

.att-status-pill {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 10px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s ease;
  white-space: nowrap;
}

/* 狀態色彩與啟動樣式 */
.att-status-pill.att-status-ontime:hover { color: #00ff87; }
.att-status-pill.att-status-ontime.active { background: rgba(0, 255, 135, 0.15); color: #00ff87; box-shadow: 0 0 5px rgba(0, 255, 135, 0.2); }

.att-status-pill.att-status-late:hover { color: #f1c40f; }
.att-status-pill.att-status-late.active { background: rgba(241, 196, 15, 0.15); color: #f1c40f; box-shadow: 0 0 5px rgba(241, 196, 15, 0.2); }

.att-status-pill.att-status-sick:hover { color: #00f2fe; }
.att-status-pill.att-status-sick.active { background: rgba(0, 242, 254, 0.15); color: #00f2fe; box-shadow: 0 0 5px rgba(0, 242, 254, 0.2); }

.att-status-pill.att-status-personal:hover { color: #3498db; }
.att-status-pill.att-status-personal.active { background: rgba(52, 152, 219, 0.15); color: #3498db; box-shadow: 0 0 5px rgba(52, 152, 219, 0.2); }

.att-status-pill.att-status-activity:hover { color: #9b59b6; }
.att-status-pill.att-status-activity.active { background: rgba(155, 89, 182, 0.15); color: #9b59b6; box-shadow: 0 0 5px rgba(155, 89, 182, 0.2); }

.att-status-pill.att-status-absent:hover { color: #ff007f; }
.att-status-pill.att-status-absent.active { background: rgba(255, 0, 127, 0.15); color: #ff007f; box-shadow: 0 0 5px rgba(255, 0, 127, 0.2); }

.att-status-pill.att-status-other:hover { color: #95a5a6; }
.att-status-pill.att-status-other.active { background: rgba(149, 165, 166, 0.15); color: #95a5a6; }

/* 彙整統計表格樣式 */
.attendance-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}

.attendance-summary-table th, .attendance-summary-table td {
  border: 1px solid var(--glass-border);
  padding: 10px 12px;
  text-align: left;
}

.attendance-summary-table th {
  background: rgba(255,255,255,0.02);
  color: #fff;
  font-weight: 600;
}

.attendance-summary-table tr:hover {
  background: rgba(255,255,255,0.01);
}

.attendance-summary-table .stat-col {
  text-align: center;
  width: 45px;
}

/* v5.11：八人點名響應式網格與深淺色雙主題 */
.attendance-group-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 1200px) {
  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

.attendance-student-card {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.attendance-student-row {
  align-items: flex-start;
  flex-wrap: wrap;
}

.status-pills-group {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.att-status-pill {
  flex: 0 0 auto;
}

.attendance-behaviors-grid {
  min-width: 0;
}

.behavior-column {
  min-width: 0;
}

.theme-toggle-button {
  min-height: 44px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(147, 197, 253, 0.25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(28, 36, 58, 0.92), rgba(22, 23, 42, 0.88));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #e8edf5;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-toggle-button:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 242, 254, 0.52);
}

.theme-toggle-button:focus-visible {
  outline: 3px solid rgba(0, 242, 254, 0.3);
  outline-offset: 2px;
}

html[data-theme="light"] {
  --bg-primary: #ded8ca;
  --bg-secondary: rgba(229, 224, 212, 0.92);
  --glass-bg: rgba(242, 237, 226, 0.86);
  --glass-border: rgba(74, 82, 72, 0.24);
  --glass-highlight: rgba(255, 252, 244, 0.54);
  --text-main: #2f3934;
  --text-muted: #667068;
  --text-active: #202824;
  --accent-blue: #4f7468;
  --accent-purple: #687086;
  --accent-pink: #a7664b;
  --accent-green: #5f7b5d;
  --accent-yellow: #a67f3f;
}

html[data-theme="light"] body {
  color: var(--text-main);
  background-color: #ded8ca;
  background-image:
    radial-gradient(at 12% 12%, rgba(95, 123, 93, 0.18), transparent 44%),
    radial-gradient(at 90% 82%, rgba(167, 102, 75, 0.16), transparent 48%),
    linear-gradient(145deg, rgba(232, 226, 213, 0.72), rgba(210, 216, 203, 0.58));
}

html[data-theme="light"] .sidebar {
  background: rgba(207, 214, 200, 0.96);
  box-shadow: 10px 0 34px rgba(66, 61, 52, 0.14);
}

html[data-theme="light"] .logo-text,
html[data-theme="light"] .top-title h1,
html[data-theme="light"] .welcome-text h2 {
  background: linear-gradient(90deg, #2f3934, #677267);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .menu-item,
html[data-theme="light"] .nav-section-label,
html[data-theme="light"] .logo-version {
  color: #5b665f;
}

html[data-theme="light"] .menu-item:hover,
html[data-theme="light"] .menu-item.active {
  color: #25302b;
  background: linear-gradient(135deg, rgba(79, 116, 104, 0.20), rgba(167, 102, 75, 0.15));
}

html[data-theme="light"] .glass-card,
html[data-theme="light"] .welcome-banner,
html[data-theme="light"] .attendance-header-card,
html[data-theme="light"] .attendance-group-card,
html[data-theme="light"] .attendance-student-card,
html[data-theme="light"] .modal {
  color: #2f3934;
  border-color: rgba(74, 82, 72, 0.22) !important;
  background: rgba(242, 237, 226, 0.94) !important;
  box-shadow: 0 14px 34px rgba(66, 61, 52, 0.16), inset 0 1px 0 rgba(255, 253, 247, 0.82);
}

html[data-theme="light"] .card-header h2,
html[data-theme="light"] .glass-card h3,
html[data-theme="light"] .attendance-group-card h3,
html[data-theme="light"] .student-name-label,
html[data-theme="light"] label {
  color: #2f3934 !important;
}

html[data-theme="light"] .input-text,
html[data-theme="light"] .textarea-field,
html[data-theme="light"] .input-select,
html[data-theme="light"] .input-date,
html[data-theme="light"] .class-select,
html[data-theme="light"] .select-field,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color: #2f3934 !important;
  border-color: rgba(74, 82, 72, 0.24) !important;
  background: rgba(226, 221, 209, 0.96) !important;
}

html[data-theme="light"] .attendance-summary-table th,
html[data-theme="light"] .attendance-summary-table td,
html[data-theme="light"] table th,
html[data-theme="light"] table td {
  color: #354139;
  border-color: rgba(74, 82, 72, 0.18) !important;
}

html[data-theme="light"] .attendance-summary-table th,
html[data-theme="light"] table th {
  background: #cfd8ca !important;
}

html[data-theme="light"] .attendance-summary-table tbody tr:nth-child(even),
html[data-theme="light"] table tbody tr:nth-child(even) {
  background: rgba(220, 214, 201, 0.68);
}

html[data-theme="light"] .status-pills-group,
html[data-theme="light"] .visitor-counter-value {
  background: rgba(207, 216, 202, 0.88);
}

html[data-theme="light"] .behavior-column.positive {
  background: rgba(95, 123, 93, 0.12);
}

html[data-theme="light"] .behavior-column.negative {
  background: rgba(167, 102, 75, 0.10);
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .sub-tab-btn,
html[data-theme="light"] .att-behavior-pill {
  color: #46524b;
  background: rgba(220, 215, 203, 0.94);
  border-color: rgba(74, 82, 72, 0.22);
}

html[data-theme="light"] .theme-toggle-button,
html[data-theme="light"] .visitor-counter-pill {
  color: #354139;
  border-color: rgba(74, 82, 72, 0.22);
  background: rgba(235, 230, 219, 0.94);
  box-shadow: 0 9px 24px rgba(66, 61, 52, 0.14);
}

html[data-theme="light"] .visitor-counter-label,
html[data-theme="light"] .visitor-counter-unit {
  color: #5b665f;
}

/* v4.10：暖色主題的閱讀對比加強 */
html[data-theme="light"] {
  --text-main: #243129;
  --text-muted: #46564b;
  --text-active: #172019;
}

html[data-theme="light"] .menu-item,
html[data-theme="light"] .nav-section-label,
html[data-theme="light"] .logo-version,
html[data-theme="light"] .visitor-counter-label,
html[data-theme="light"] .visitor-counter-unit,
html[data-theme="light"] .tool-card p,
html[data-theme="light"] .top-title p {
  color: #46564b;
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .sub-tab-btn,
html[data-theme="light"] .att-behavior-pill {
  color: #34443a;
}

html[data-theme="light"] .attendance-summary-table th,
html[data-theme="light"] .attendance-summary-table td,
html[data-theme="light"] table th,
html[data-theme="light"] table td,
html[data-theme="light"] .theme-toggle-button,
html[data-theme="light"] .visitor-counter-pill {
  color: #2c3a31;
}

@media (max-width: 1360px) and (min-width: 900px) {
  .attendance-group-card .group-body {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .theme-toggle-label {
    display: none;
  }

  .theme-toggle-button {
    width: 44px;
    padding: 7px;
  }
}

/* v5.11 最終優先序：避免舊版欄寬規則覆蓋自適應網格 */
@media (min-width: 1361px) {
  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 1360px) and (min-width: 768px) {
  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 767px) {
  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* v5.12：八位學生一眼可視緊湊模式 */
@media (min-width: 1200px) {
  #tab-attendance {
    gap: 10px !important;
  }

  #tab-attendance .attendance-header-card {
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
  }

  .attendance-group-card {
    padding: 10px 12px !important;
  }

  .attendance-group-card .group-header {
    margin-bottom: 7px !important;
    padding-bottom: 6px !important;
  }

  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .attendance-student-card {
    padding: 8px !important;
    margin-bottom: 0 !important;
    gap: 5px !important;
    border-radius: 9px !important;
  }

  .attendance-student-row {
    padding: 2px 4px !important;
    gap: 4px !important;
  }

  .student-name-label {
    font-size: 13px !important;
    line-height: 22px !important;
  }

  .status-pills-group {
    gap: 1px !important;
    padding: 1px !important;
  }

  .att-status-pill {
    min-height: 20px !important;
    font-size: 9px !important;
    padding: 3px 4px !important;
    line-height: 1.1 !important;
  }

  .attendance-behaviors-grid {
    gap: 5px !important;
    margin-top: 2px !important;
  }

  .behavior-column {
    padding: 6px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }

  .behavior-column-title {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .behavior-pills-flow {
    gap: 3px !important;
    align-content: flex-start;
  }

  .att-behavior-pill {
    min-height: 21px !important;
    padding: 3px 7px !important;
    margin: 0 !important;
    gap: 2px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .att-behavior-pill-wrapper {
    margin: 0 !important;
  }

  .att-behavior-minus-btn {
    width: 18px !important;
    height: 21px !important;
  }

  .att-behavior-custom-add-btn,
  .att-punish-custom-add-btn {
    min-height: 21px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
}

/* v5.10：品牌版本置中與課次固定雙列 */
.logo-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.logo-version {
  width: 100%;
  text-align: center;
}

.lesson-session-cell {
  vertical-align: middle;
  line-height: 1.35;
}

.lesson-session-date {
  display: block;
  white-space: nowrap;
  color: #f3f6fb;
}

.lesson-session-period {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.92em;
  white-space: nowrap;
}

/* v5.9：整站視覺收尾與網站使用計數器 */
.quick-stats {
  opacity: 1;
}

.visitor-counter-pill {
  min-height: 44px;
  padding: 5px 7px 5px 6px;
  gap: 7px;
  border-radius: 14px;
  border: 1px solid rgba(88, 224, 255, 0.28);
  background: linear-gradient(135deg, rgba(20, 30, 50, 0.92), rgba(20, 20, 38, 0.88));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: none;
}

.visitor-counter-icon {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.22), rgba(155, 81, 224, 0.24));
  color: #bdf8ff;
  filter: drop-shadow(0 0 7px rgba(0, 242, 254, 0.26));
}

.visitor-counter-label {
  color: #c6ceda;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.visitor-counter-value {
  min-width: 66px;
  min-height: 30px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 242, 254, 0.22);
  border-radius: 9px;
  background: rgba(4, 10, 20, 0.72);
  box-shadow: inset 0 0 12px rgba(0, 242, 254, 0.07);
  color: #8ef7ff;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.visitor-counter-value .f-counter,
.visitor-counter-value img {
  display: block;
  max-height: 20px;
}

.visitor-counter-value:focus-visible {
  outline: 3px solid rgba(0, 242, 254, 0.34);
  outline-offset: 2px;
}

.visitor-counter-unit {
  padding-right: 3px;
  color: #8c98aa;
  font-size: 11px;
}

.modal-backdrop {
  background: rgba(4, 6, 15, 0.70);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.modal {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(27, 30, 50, 0.97), rgba(12, 15, 29, 0.97));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sub-tab-btn.active {
  color: #071018;
  border-color: rgba(0, 242, 254, 0.56);
  background: linear-gradient(135deg, #70f4fb, #b996f5);
  box-shadow: 0 7px 20px rgba(0, 242, 254, 0.16);
}

::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 10, 20, 0.82);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(103, 218, 240, 0.48), rgba(147, 100, 210, 0.42));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(103, 218, 240, 0.72), rgba(147, 100, 210, 0.66));
}

@media (max-width: 760px) {
  .top-bar {
    align-items: flex-start;
    gap: 14px;
  }

  .visitor-counter-label {
    display: none;
  }
}

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

/* 點名與教學日誌：課堂掃讀用表格系統 */
.attendance-table-wrapper {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(5, 8, 18, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.attendance-summary-table {
  margin-top: 0;
  font-size: 14px;
}

.attendance-summary-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 14px;
  background: rgba(27, 30, 49, 0.98);
  color: #f8fafc;
  letter-spacing: 0.02em;
  box-shadow: inset 0 -1px 0 rgba(0, 242, 254, 0.16);
}

.attendance-summary-table tbody td {
  padding: 13px 14px;
  line-height: 1.55;
}

.attendance-summary-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

.attendance-summary-table tbody tr:hover {
  background: rgba(0, 242, 254, 0.08);
}

.lesson-log-student {
  min-width: 170px;
  white-space: nowrap;
  color: #ffffff;
}

@media (max-width: 760px) {
  .attendance-summary-table { font-size: 13px; }
  .attendance-summary-table thead th,
  .attendance-summary-table tbody td { padding: 11px 12px; }
}

/* ========================================================
   12. PRINT SECTION AND MEDIA PRINT (列印專用樣式)
   ======================================================== */
#print-section {
  display: none;
}

@media print {
  /* 隱藏網頁上所有原有元素 */
  body * {
    display: none !important;
  }
  
  /* 僅顯示列印專用容器 */
  #print-section, #print-section * {
    display: block !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  
  #print-section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  #print-section table {
    display: table !important;
    border-collapse: collapse !important;
    width: 100% !important;
    border: 2px solid #000000 !important;
  }
  
  #print-section tr {
    display: table-row !important;
  }
  
  #print-section th, #print-section td {
    display: table-cell !important;
    border: 1px solid #000000 !important;
    padding: 8px 10px !important;
    text-align: left !important;
    background: transparent !important;
    color: #000000 !important;
  }
  
  #print-section th {
    background-color: #f2f2f2 !important;
    font-weight: bold !important;
    text-align: center !important;
  }
  
  #print-section td {
    text-align: center !important;
  }
  
  #print-section td:first-child, #print-section td:nth-child(2) {
    text-align: left !important;
  }
}

/* ========================================================
   v2.4 QR Code Generator & Student Behavior Logs Styles
   ======================================================== */

/* 1. Scoreboard Sub-Tabs */
.sub-tab-btn {
  transition: all var(--transition-speed);
}
.sub-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
.sub-tab-btn.active {
  box-shadow: 0 0 12px rgba(155, 81, 224, 0.4);
}

/* 2. Scoreboard Card Button "表現" */
.student-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.btn-behavior-log {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.btn-behavior-log:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
  transform: translateY(-1px);
}

/* 3. Behavior Timeline Styles */
.behavior-timeline {
  position: relative;
  padding-left: 24px;
  margin: 15px 0;
  border-left: 2px solid rgba(255, 255, 255, 0.05);
}
.behavior-log-item {
  position: relative;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.behavior-log-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
}
.behavior-log-item::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  border: 2px solid var(--bg-primary);
  z-index: 2;
}
.behavior-log-item.positive::before {
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
}
.behavior-log-item.negative::before {
  background: var(--accent-pink);
  box-shadow: 0 0 8px var(--accent-pink);
}
.behavior-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.behavior-log-student {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.behavior-log-tag {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 600;
}
.behavior-log-tag.pos {
  background: rgba(0, 255, 135, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(0, 255, 135, 0.3);
}
.behavior-log-tag.neg {
  background: rgba(255, 0, 127, 0.15);
  color: var(--accent-pink);
  border: 1px solid rgba(255, 0, 127, 0.3);
}
.behavior-log-time {
  font-size: 12px;
  color: var(--text-muted);
}
.behavior-log-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.15);
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 6px;
}
.behavior-log-notes {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}
.behavior-log-delete {
  background: transparent;
  border: none;
  color: var(--accent-pink);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.behavior-log-delete:hover {
  opacity: 1;
  background: rgba(255, 0, 127, 0.1);
}

/* 4. QR Code Generator Specific Styles */
#qrcode-canvas-container canvas, #qrcode-large-display canvas {
  max-width: 100%;
  height: auto !important;
  display: block;
}
#qrcode-canvas-container img, #qrcode-large-display img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Color input and HEX code alignment */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: 2px solid var(--glass-border);
  border-radius: 6px;
}

/* Modal Form Styles */
.form-group .btn-group-toggle .toggle-btn.btn-green {
  border-color: rgba(0, 255, 135, 0.2) !important;
}
.form-group .btn-group-toggle .toggle-btn.btn-green.active {
  background: rgba(0, 255, 135, 0.2) !important;
  color: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
}
.form-group .btn-group-toggle .toggle-btn.btn-pink {
  border-color: rgba(255, 0, 127, 0.2) !important;
}
.form-group .btn-group-toggle .toggle-btn.btn-pink.active {
  background: rgba(255, 0, 127, 0.2) !important;
  color: var(--accent-pink) !important;
  border-color: var(--accent-pink) !important;
}

/* @media print modifications for QR Code */
@media print {
  body.print-qrcode-only {
    background: white !important;
    color: black !important;
  }
  body.print-qrcode-only .sidebar,
  body.print-qrcode-only main,
  body.print-qrcode-only .modal-backdrop:not(#modal-view-qrcode-large) {
    display: none !important;
  }
  body.print-qrcode-only #modal-view-qrcode-large {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.print-qrcode-only #modal-view-qrcode-large .modal {
    box-shadow: none !important;
    border: none !important;
    background: white !important;
    color: black !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.print-qrcode-only #modal-view-qrcode-large .modal-header,
  body.print-qrcode-only #modal-view-qrcode-large .modal-footer {
    display: none !important;
  }
  body.print-qrcode-only #qrcode-large-display {
    padding: 0 !important;
    background: white !important;
  }
  body.print-qrcode-only #qrcode-large-display canvas,
  body.print-qrcode-only #qrcode-large-display img {
    width: 120mm !important; /* 標準列印大小 */
    height: 120mm !important;
    margin: 0 auto !important;
  }
  body.print-qrcode-only #qrcode-large-text {
    color: black !important;
    font-size: 20pt !important;
    margin-top: 10mm !important;
  }
}



/* ========================================================
   線上點名表現藥丸與卡片樣式 (v2.5)
   ======================================================== */
.att-behavior-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    margin: 2px;
}

.att-behavior-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: scale(1.05);
}

.att-behavior-pill.active {
    background: linear-gradient(135deg, var(--accent-purple) 0%, #b86bfa 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 12px rgba(155, 81, 224, 0.4);
    font-weight: 600;
}

.att-behavior-pill.active:hover {
    background: linear-gradient(135deg, #a83ce6 0%, #c48bfb 100%);
    box-shadow: 0 0 16px rgba(155, 81, 224, 0.6);
    transform: scale(1.05);
}

.attendance-student-card {
    background: rgba(255, 255, 255, 0.01);
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s ease;
}

.attendance-student-card:hover {
    border-color: rgba(255, 255, 255, 0.08);
}

/* 調整週彙整表格的表現列寬與對齊 */
.attendance-summary-table th.stat-col, 
.attendance-summary-table td.stat-col {
    width: 38px;
    text-align: center;
    font-size: 12px;
}

/* 下拉式選單美化與聚焦發光 (v2.7) */
.select-field {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.select-field:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

/* 隨手記便貼分類標籤 Badge */
.note-tag-badge {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.7);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    letter-spacing: 0.5px;
}

/* ========================================================
   資源連結庫與個人工作區排版工具列樣式 (v2.7.2)
   ======================================================== */
.toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px;
    padding: 0 12px;
    height: 38px;
    width: 280px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.search-box:focus-within {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

.search-box .search-icon {
    font-size: 14px;
    color: var(--text-muted);
    margin-right: 8px;
}

.search-box input {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 14px;
    outline: none;
    width: 100%;
    padding: 0;
}

.search-box input::placeholder {
    color: var(--text-muted) !important;
}

/* 分類選單容器的外觀微調 */
.filter-tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========================================================
   學生點數兌換系統與按鈕樣式 (v2.9.4)
   ======================================================== */
.score-btn-v2.redeem-btn {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}

.score-btn-v2.redeem-btn:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #7c3aed;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
  transform: translateY(-2px);
}

/* ========================================================
   INTEGRATION: MATH GAME PLATFORM SPECIFIC STYLES
   ======================================================== */
.game-card .tool-icon-wrapper {
  transition: transform 0.3s ease;
}
.game-card:hover .tool-icon-wrapper {
  transform: scale(1.15) rotate(5deg);
}
.tab-panel#tab-gamesetup label {
  user-select: none;
}

/* 遊戲大廳設定畫面雙欄緊湊化 (防溢出) */
#tab-gamesetup .glass-card {
  padding: 16px 24px !important;
  max-width: 850px !important;
  margin: 0 auto !important;
}
#game-setup-form-integrated {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 12px 24px !important;
}
#game-setup-form-integrated > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* 用 order 屬性重新排列，使表單在雙欄下完美對稱且省空間 */
#game-setup-form-integrated > div:nth-child(1) { order: 1; } /* 1. 遊戲模式 */
#game-setup-form-integrated > #setup-student-selection-integrated { order: 2; } /* 2. 作答學生 */
#game-setup-form-integrated > div:nth-child(3) { order: 3; } /* 3. 題目來源 */
#game-setup-form-integrated > div:nth-child(6) { order: 4; } /* 6. 難度設定 */

#game-setup-form-integrated > div:nth-child(7) { 
  order: 5; 
  grid-column: 1 / -1; 
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
} /* 7. 題數與時限並排 */

#game-setup-form-integrated > #div-dynamic-only-settings-integrated { 
  order: 6; 
  grid-column: 1 / -1; 
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 16px !important;
  padding: 12px !important;
  border-radius: 8px !important;
} /* 4 & 5. 數字與運算類型並排且跨雙欄 */

#game-setup-form-integrated > #div-unit-readonly-status-integrated { 
  order: 7; 
  grid-column: 1 / -1; 
}

#game-setup-form-integrated > div:last-child { 
  order: 8; 
  grid-column: 1 / -1; 
  flex-direction: row !important;
  margin-top: 8px !important;
} /* 按鈕跨雙欄 */
.tab-panel#tab-mathadmin .sub-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.tab-panel#tab-mathadmin .sub-tab-btn.active {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15), rgba(155, 81, 224, 0.15));
  border-color: var(--accent-blue);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

/* --- 說明書面板與 Tab 按鈕樣式 (v3.3) --- */
.guide-tab-btn:hover:not(.active) {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================================
   v3.8 DESIGN SYSTEM & UX REFINE (設計系統與一致性優化)
   ======================================================== */
:root {
  /* 標準字級 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;
  
  /* 步進間距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

/* 統一按鈕高度與 Sizing Class */
.btn-sm {
  padding: 4px 10px !important;
  font-size: var(--font-size-xs) !important;
  height: 28px !important;
  line-height: 20px !important;
}
.btn-lg {
  padding: 12px 24px !important;
  font-size: var(--font-size-md) !important;
  height: 46px !important;
  line-height: 22px !important;
}

/* 點名卡片之點擊區域優化 */
.attendance-student-row {
  cursor: pointer;
  transition: background 0.2s, padding-left 0.2s;
  padding: 4px 8px;
  border-radius: 6px;
}
.attendance-student-row:hover {
  background: rgba(255, 255, 255, 0.03);
  padding-left: 12px;
}

/* 個人計分板得分微互動動畫 */
@keyframes scorePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); color: #00f2fe !important; text-shadow: 0 0 12px rgba(0, 242, 254, 0.7); }
  100% { transform: scale(1); }
}
.score-change-pop {
  display: inline-block;
  animation: scorePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 魔法道具大解密之詳細卡片 Hover 特效 */
.guide-item-card {
  transition: all 0.25s ease-in-out !important;
}
.guide-item-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 242, 254, 0.4) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.15) !important;
}

/* 表格 Hover 發光樣式 */
.beauty-tr {
  transition: all 0.2s ease !important;
}
.beauty-tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ========================================================
   v3.8 ADDITIONS (遊戲大廳、轉盤對齊、計名雙欄、碼表大面板)
   ======================================================== */

/* 1. 遊戲大廳卡片並排緊湊化 */
.game-card {
  padding: 14px 18px !important;
  gap: 8px !important;
  border-radius: 16px !important;
}
.game-card .game-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}
.game-card .tool-icon-wrapper {
  font-size: 2.2rem !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 10px !important;
}
.game-card h3 {
  margin: 0 !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.game-card p {
  margin: 0 !important;
  font-size: var(--font-size-xs) !important;
  color: var(--text-muted) !important;
  line-height: 1.45 !important;
}

/* 2. 轉盤卡片高度對齊鎖定 */
.picker-container {
  grid-template-columns: 1.2fr 0.8fr !important;
  align-items: stretch !important;
  min-height: 520px !important;
}
.picker-container .glass-card {
  height: 100% !important;
}

/* 3. 線上點名表現按鈕雙欄面板 */
.attendance-behaviors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}
.behavior-column {
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.behavior-column.positive {
  background: rgba(46, 204, 113, 0.03);
  border: 1px solid rgba(46, 204, 113, 0.12);
}
.behavior-column.negative {
  background: rgba(231, 76, 60, 0.03);
  border: 1px solid rgba(231, 76, 60, 0.12);
}
.behavior-column-title {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.behavior-column-title.pos { color: var(--accent-green); }
.behavior-column-title.neg { color: var(--accent-pink); }
.behavior-pills-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* 4. 碼表分圈專屬大面板 */
#stopwatch-laps-wrapper {
  max-height: unset !important;
  overflow-y: visible !important;
}
#laps-list-container-v3 {
  max-height: unset !important;
}
.lap-row {
  transition: background-color 0.2s ease;
}
.lap-row:hover {
  background-color: rgba(255,255,255,0.06) !important;
}

/* ========================================================
   v4.0 ADDITIONS (快捷並排、點名 4 欄、按鈕加大與限高滾動)
   ======================================================== */

/* 1. 主控台快速啟動工具圖示與名稱並排 */
.tool-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}
.tool-card-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.tool-card {
  gap: 12px !important; /* 縮減 gap，使版面更緊湊 */
}

/* 2. 點名表大螢幕一排 4 個，共顯示 8 個學生 */
@media (min-width: 1200px) {
  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 767px) {
  .attendance-group-card .group-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}
/* 3. 二分以上加分按鈕動態縮小 (防止撐高、確保一眼可視) */
.att-behavior-pill.mega {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 0 6px rgba(184, 107, 250, 0.4) !important;
  border: 1px solid rgba(184, 107, 250, 0.6) !important;
}
.att-behavior-pill.mega:hover {
  transform: scale(0.96) !important; /* 縮小回饋 */
}

/* 4. 編輯組別名單與存摺表頭防止折行與變二列 */
#delete-class-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 10px 14px !important;
}
.roster-flex-layout select {
  min-width: 140px !important;
}
.modal table th {
  white-space: nowrap !important;
  padding: 12px 14px !important;
}

/* 介面第二、三輪：功能導覽與頁首資訊層級 */
.nav-section-label {
  margin: 18px 12px 5px;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  list-style: none;
}

.top-bar {
  min-height: 90px;
  margin-bottom: 28px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(28, 31, 52, 0.68), rgba(11, 15, 28, 0.42));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.top-title {
  padding-left: 14px;
  border-left: 3px solid var(--accent-blue);
}

.top-title h1 {
  font-size: 32px;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.top-title p {
  line-height: 1.5;
}

.quick-stats {
  opacity: 0.78;
}

.quick-stats:hover {
  opacity: 1;
}

@media (max-width: 760px) {
  .top-bar { padding: 16px; }
  .top-title h1 { font-size: 26px; }
}

/* 介面第 4、5 輪：操作層級與表單一致性 */
.btn {
  min-height: 40px;
  border-radius: 10px;
  letter-spacing: 0.01em;
}

.btn.btn-sm {
  min-height: 28px;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.13);
  color: #e5e7eb;
  box-shadow: none;
}

.btn-danger {
  --button-accent: #ff5c7a;
  background: rgba(255, 92, 122, 0.10);
  border: 1px solid rgba(255, 92, 122, 0.48);
  color: #ff8da3;
  box-shadow: none;
}

.btn-danger:hover {
  background: rgba(255, 92, 122, 0.20);
  border-color: var(--button-accent);
  color: #ffffff;
}

.btn:focus-visible {
  outline: 3px solid rgba(0, 242, 254, 0.34);
  outline-offset: 2px;
}

.input-text,
.textarea-field,
.input-select,
.input-date,
.class-select {
  min-height: 42px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.13);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.input-text:focus,
.textarea-field:focus,
.input-select:focus,
.input-date:focus,
.class-select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.13);
  background: rgba(10, 11, 20, 0.82);
}

label {
  line-height: 1.45;
}

/* 介面第 6、7 輪：內容表面、閱讀對比與響應式密度 */
:root {
  --space-card: 22px;
  --space-section: 24px;
  --text-muted: #b6bdc9;
}

.tab-panel {
  gap: var(--space-section);
}

.glass-card {
  padding: var(--space-card);
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.10);
  background: linear-gradient(145deg, rgba(29, 32, 53, 0.56), rgba(16, 19, 34, 0.48));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.card-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.card-header h2,
.glass-card h3 {
  color: #f8fafc;
  line-height: 1.35;
}

.top-title p,
.tool-card p {
  line-height: 1.65;
}

.grid-2col,
.grid-3col {
  gap: 20px;
}

@media (max-width: 760px) {
  .main-content {
    padding: 18px 14px;
  }

  .grid-2col,
  .grid-3col {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .glass-card {
    padding: 16px;
    border-radius: 14px;
  }

  .tab-panel {
    gap: 16px;
  }
}

/* v5.11 發布層級：學生卡片永遠維持在可視範圍 */
@media (min-width: 1361px) {
  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 1360px) and (min-width: 768px) {
  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 767px) {
  .attendance-group-card .group-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* v5.12 發布層級：桌面 8 人固定 4 欄 2 列並縮短卡片高度 */
@media (min-width: 1200px) {
  #tab-attendance { gap: 10px !important; }
  #tab-attendance .attendance-header-card { padding: 10px 14px !important; margin-bottom: 10px !important; gap: 8px !important; }
  .attendance-group-card { padding: 10px 12px !important; }
  .attendance-group-card .group-header { margin-bottom: 7px !important; padding-bottom: 6px !important; }
  .attendance-group-card .group-body { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  .attendance-student-card { padding: 8px !important; margin-bottom: 0 !important; gap: 5px !important; border-radius: 9px !important; }
  .attendance-student-row { padding: 2px 4px !important; gap: 4px !important; }
  .student-name-label { font-size: 13px !important; line-height: 22px !important; }
  .status-pills-group { gap: 1px !important; padding: 1px !important; }
  .att-status-pill { min-height: 20px !important; font-size: 9px !important; padding: 3px 4px !important; line-height: 1.1 !important; }
  .attendance-behaviors-grid { gap: 5px !important; margin-top: 2px !important; }
  .behavior-column { padding: 6px !important; gap: 4px !important; border-radius: 8px !important; }
  .behavior-column-title { font-size: 10px !important; line-height: 1.2 !important; }
  .behavior-pills-flow { gap: 3px !important; align-content: flex-start; }
  .att-behavior-pill { min-height: 21px !important; padding: 3px 7px !important; margin: 0 !important; gap: 2px !important; font-size: 10px !important; line-height: 1.1 !important; }
  .att-behavior-pill-wrapper { margin: 0 !important; }
  .att-behavior-minus-btn { width: 18px !important; height: 21px !important; }
  .att-behavior-custom-add-btn,
  .att-punish-custom-add-btn { min-height: 21px !important; padding: 3px 7px !important; font-size: 10px !important; line-height: 1.1 !important; }
}

/* 學習遊戲管理：教師遊戲數據指揮中心 */
.game-management-shell{display:grid;gap:18px}.game-management-hero,.game-panel,.game-kpi-card{background:linear-gradient(145deg,rgba(24,27,48,.94),rgba(10,13,27,.96));border:1px solid rgba(118,139,255,.2);box-shadow:0 18px 50px rgba(0,0,0,.24)}.game-management-hero{padding:26px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;position:relative}.game-management-hero:after{content:"";position:absolute;inset:auto -80px -110px auto;width:280px;height:220px;background:radial-gradient(circle,rgba(0,242,254,.2),transparent 68%)}.game-management-eyebrow{font-size:11px;letter-spacing:2px;color:var(--accent-blue);font-weight:800}.game-management-hero h2{font-size:28px;margin:7px 0 5px;color:#fff}.game-management-hero p,.game-panel-title p{color:var(--text-muted);margin:0}.game-management-live{white-space:nowrap;border:1px solid rgba(0,255,135,.3);background:rgba(0,255,135,.07);color:var(--accent-green);padding:9px 13px;border-radius:999px;font-size:12px;font-weight:700;z-index:1}.game-management-live span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 10px var(--accent-green);margin-right:6px}.game-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.game-kpi-card{border-radius:18px;padding:18px;position:relative;overflow:hidden}.game-kpi-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--kpi-color)}.game-kpi-card.cyan{--kpi-color:#00f2fe}.game-kpi-card.purple{--kpi-color:#a855f7}.game-kpi-card.green{--kpi-color:#00ff87}.game-kpi-card.amber{--kpi-color:#fbbf24}.game-kpi-card span,.game-kpi-card small{display:block;color:var(--text-muted);font-size:12px}.game-kpi-card strong{display:block;color:var(--kpi-color);font-size:31px;margin:9px 0 4px;text-shadow:0 0 22px color-mix(in srgb,var(--kpi-color) 36%,transparent)}.game-ranking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.game-panel{border-radius:20px;padding:20px}.game-panel-title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:17px}.game-panel-title h3{margin:0;color:#fff;font-size:17px}.game-panel-title>span{color:var(--text-muted);font-size:11px}.ranking-list{display:grid;gap:14px}.ranking-row{display:flex;align-items:center;gap:12px}.ranking-number{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:rgba(0,242,254,.08);color:var(--accent-blue);font-weight:900}.ranking-main{flex:1;min-width:0}.ranking-main>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:12px}.ranking-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-main span{color:var(--text-muted)}.ranking-track{height:6px;background:rgba(255,255,255,.06);border-radius:999px;margin-top:7px;overflow:hidden}.ranking-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple));box-shadow:0 0 12px rgba(0,242,254,.45)}.pending-badge{color:#071019!important;background:var(--accent-green);border-radius:999px;padding:7px 11px;font-weight:900}.game-table-wrap{overflow:auto}.game-review-table{width:100%;border-collapse:collapse;min-width:760px}.game-review-table th{text-align:left;color:var(--text-muted);font-size:11px;letter-spacing:.5px;padding:10px;border-bottom:1px solid rgba(255,255,255,.08)}.game-review-table td{padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.055);font-size:13px}.game-review-table td small{display:block;color:var(--text-muted);margin-top:4px}.rate-value{color:var(--accent-blue);font-size:17px}.point-input{display:flex;align-items:center;gap:6px}.point-input input{width:62px;padding:8px;border-radius:8px;border:1px solid rgba(0,242,254,.3);background:rgba(0,0,0,.25);color:#fff;font-weight:800}.review-actions{display:flex;gap:7px}.review-actions .btn{padding:7px 10px;font-size:11px;white-space:nowrap}.award-status{display:inline-block;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}.award-status.approved{color:var(--accent-green);background:rgba(0,255,135,.1);border:1px solid rgba(0,255,135,.25)}.award-status.rejected{color:var(--text-muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}.game-empty{text-align:center!important;padding:25px!important;color:var(--text-muted)}
@media(max-width:900px){.game-kpi-grid{grid-template-columns:repeat(2,1fr)}.game-ranking-grid{grid-template-columns:1fr}.game-management-hero{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.game-kpi-grid{grid-template-columns:1fr}.game-management-hero,.game-panel{padding:16px}}

/* v4.11：全站淺色主題最終可讀性覆蓋（必須置於所有元件規則之後） */
html[data-theme="light"] {
  --light-text-strong: #17231b;
  --light-text-body: #26372d;
  --light-text-muted: #3d4c42;
  --light-surface: #f5f1e7;
  --light-surface-soft: #ebe6da;
  --light-border: rgba(49, 65, 55, 0.28);
  --text-main: var(--light-text-body);
  --text-muted: var(--light-text-muted);
  --text-active: var(--light-text-strong);
}

html[data-theme="light"] body,
html[data-theme="light"] .main-content,
html[data-theme="light"] .tab-panel { color: var(--light-text-body); }

html[data-theme="light"] .top-bar {
  color: var(--light-text-strong) !important;
  border-color: var(--light-border) !important;
  background: linear-gradient(110deg, rgba(245,241,231,.98), rgba(226,231,219,.96)) !important;
  box-shadow: 0 10px 28px rgba(54, 64, 56, .13) !important;
}
html[data-theme="light"] .top-title h1,
html[data-theme="light"] .top-title h2,
html[data-theme="light"] .top-title p {
  color: var(--light-text-strong) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
html[data-theme="light"] .top-title p { color: var(--light-text-muted) !important; }
html[data-theme="light"] .quick-stats { color: var(--light-text-body) !important; opacity: 1 !important; }

html[data-theme="light"] .glass-card,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .link-card,
html[data-theme="light"] .attendance-group-card,
html[data-theme="light"] .attendance-student-card,
html[data-theme="light"] .student-card,
html[data-theme="light"] .modal-content {
  color: var(--light-text-body) !important;
  background: rgba(245, 241, 231, .97) !important;
  border-color: var(--light-border) !important;
  box-shadow: 0 10px 26px rgba(54, 64, 56, .12) !important;
}

html[data-theme="light"] .tool-card-header h3,
html[data-theme="light"] .link-card-title,
html[data-theme="light"] .card-header h2,
html[data-theme="light"] .glass-card h2,
html[data-theme="light"] .glass-card h3,
html[data-theme="light"] .student-name-label,
html[data-theme="light"] .attendance-student-card h3,
html[data-theme="light"] .attendance-group-card h3 {
  color: var(--light-text-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
html[data-theme="light"] .tool-card p,
html[data-theme="light"] .link-desc,
html[data-theme="light"] .glass-card p,
html[data-theme="light"] .helper-text,
html[data-theme="light"] small { color: var(--light-text-muted) !important; opacity: 1 !important; }

html[data-theme="light"] .btn-group-toggle {
  background: #d8d7d0 !important;
  border: 1px solid var(--light-border) !important;
}
html[data-theme="light"] .toggle-btn {
  color: #405247 !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}
html[data-theme="light"] .toggle-btn:hover { color: var(--light-text-strong) !important; background: rgba(255,255,255,.46) !important; }
html[data-theme="light"] .toggle-btn.active {
  color: var(--light-text-strong) !important;
  background: #f8f5ed !important;
  box-shadow: 0 2px 8px rgba(43, 57, 48, .16) !important;
}
html[data-theme="light"] .toggle-btn:disabled { color: #6f7972 !important; opacity: .72 !important; }

html[data-theme="light"] .status-pills-group { background: #dde4d9 !important; border-color: rgba(49,65,55,.16) !important; }
html[data-theme="light"] .status-pill,
html[data-theme="light"] .att-behavior-pill {
  color: #3c4d42 !important;
  background: rgba(229, 227, 217, .96) !important;
  border-color: rgba(49,65,55,.23) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .status-pill.active,
html[data-theme="light"] .att-behavior-pill.active { color: #17251c !important; font-weight: 800 !important; }
html[data-theme="light"] .behavior-column.positive { background: rgba(95,123,93,.10) !important; }
html[data-theme="light"] .behavior-column.negative { background: rgba(167,102,75,.09) !important; }

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .search-box {
  color: var(--light-text-strong) !important;
  background: #e8e4da !important;
  border-color: var(--light-border) !important;
  opacity: 1 !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #657269 !important; opacity: 1 !important; }
html[data-theme="light"] select option {
  color: #17231b !important;
  background: #fffdf7 !important;
}
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .sub-tab-btn,
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-pink):not(.btn-danger) {
  color: #2d4034 !important;
  background: #e7e3d8 !important;
  border-color: var(--light-border) !important;
  opacity: 1 !important;
}

html[data-theme="light"] table th { color: #23352a !important; background: #d9e0d5 !important; }
html[data-theme="light"] table td { color: #26372d !important; }
html[data-theme="light"] .link-actions,
html[data-theme="light"] .toolbar { color: var(--light-text-body) !important; }
html[data-theme="light"] .link-badge[data-category-badge="true"] {
  color: var(--badge-light-text) !important;
  background: var(--badge-light-bg) !important;
  border: 1px solid color-mix(in srgb, var(--badge-light-text) 28%, transparent) !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .game-management-hero,
html[data-theme="light"] .game-panel,
html[data-theme="light"] .game-kpi-card {
  color: var(--light-text-body) !important;
  background: linear-gradient(145deg, #f5f1e7, #e8e6dc) !important;
  border-color: var(--light-border) !important;
  box-shadow: 0 12px 30px rgba(54,64,56,.12) !important;
}
html[data-theme="light"] .game-management-hero h2,
html[data-theme="light"] .game-panel-title h3,
html[data-theme="light"] .ranking-main strong { color: var(--light-text-strong) !important; }
html[data-theme="light"] .game-management-hero p,
html[data-theme="light"] .game-panel-title p,
html[data-theme="light"] .game-panel-title > span,
html[data-theme="light"] .ranking-main span { color: var(--light-text-muted) !important; }
html[data-theme="light"] .game-review-table td,
html[data-theme="light"] .game-review-table th { border-color: rgba(49,65,55,.16) !important; }
html[data-theme="light"] .point-input input { color: var(--light-text-strong) !important; background: #fffdf7 !important; }

/* 瀏覽器逐頁稽核補強：計分板、點名、遊戲與資源庫 */
html[data-theme="light"] .redeem-btn-v3 { color: #715600 !important; border-color: #9a7b19 !important; background: #f5edc9 !important; text-shadow: none !important; }
html[data-theme="light"] .game-history-btn { color: #155f67 !important; border-color: #39818a !important; background: #d9ecea !important; text-shadow: none !important; }
html[data-theme="light"] .score-btn-v3 { text-shadow: none !important; opacity: 1 !important; }
html[data-theme="light"] .score-btn-v3.plus-one { color: #155f67 !important; border-color: #39818a !important; background: #d9ecea !important; }
html[data-theme="light"] .score-btn-v3.plus-five { color: #633c8a !important; border-color: #8560a7 !important; background: #eadff0 !important; }
html[data-theme="light"] .visitor-counter-value { color: #234a40 !important; background: #d1dacf !important; text-shadow: none !important; }

html[data-theme="light"] .att-status-pill { color: #3d4e43 !important; opacity: 1 !important; text-shadow: none !important; }
html[data-theme="light"] .att-status-pill.active { color: #174d35 !important; font-weight: 900 !important; background: #cde5d4 !important; }
html[data-theme="light"] .att-behavior-custom-add-btn,
html[data-theme="light"] .att-punish-custom-add-btn { color: #3d4e43 !important; background: #e4e1d7 !important; border-color: #87938b !important; opacity: 1 !important; }

html[data-theme="light"] .game-card h3 { color: var(--light-text-strong) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
html[data-theme="light"] .link-visit-btn { color: #315d52 !important; text-shadow: none !important; opacity: 1 !important; font-weight: 800 !important; }

/* v4.12：閱讀清晰優先，完整覆蓋題庫、資源、個人工作區與學生練工房 */
html[data-theme="light"] #tab-mathadmin,
html[data-theme="light"] #tab-linkhub,
html[data-theme="light"] #tab-private,
html[data-theme="light"] #tab-practicelab {
  color: var(--light-text-body) !important;
}

html[data-theme="light"] #tab-mathadmin h1,
html[data-theme="light"] #tab-mathadmin h2,
html[data-theme="light"] #tab-mathadmin h3,
html[data-theme="light"] #tab-linkhub h1,
html[data-theme="light"] #tab-linkhub h2,
html[data-theme="light"] #tab-linkhub h3,
html[data-theme="light"] #tab-private h1,
html[data-theme="light"] #tab-private h2,
html[data-theme="light"] #tab-private h3,
html[data-theme="light"] #tab-practicelab h1,
html[data-theme="light"] #tab-practicelab h2,
html[data-theme="light"] #tab-practicelab h3 {
  color: var(--light-text-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html[data-theme="light"] #tab-mathadmin p,
html[data-theme="light"] #tab-mathadmin label,
html[data-theme="light"] #tab-mathadmin td,
html[data-theme="light"] #tab-linkhub .link-desc,
html[data-theme="light"] #tab-private .link-desc,
html[data-theme="light"] #tab-practicelab .link-desc {
  color: var(--light-text-body) !important;
  opacity: 1 !important;
}

html[data-theme="light"] #tab-linkhub .link-card-title,
html[data-theme="light"] #tab-private .link-card-title,
html[data-theme="light"] #tab-practicelab .link-card-title {
  color: var(--light-text-strong) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

html[data-theme="light"] #tab-linkhub .link-actions,
html[data-theme="light"] #tab-private .link-actions,
html[data-theme="light"] #tab-practicelab .link-actions,
html[data-theme="light"] #tab-mathadmin .sub-tab-btn {
  color: var(--light-text-body) !important;
  opacity: 1 !important;
}

html[data-theme="light"] #tab-mathadmin table,
html[data-theme="light"] #tab-mathadmin .glass-card,
html[data-theme="light"] #tab-linkhub .link-card,
html[data-theme="light"] #tab-private .link-card,
html[data-theme="light"] #tab-practicelab .link-card {
  border-color: rgba(38, 55, 45, .32) !important;
}

html[data-theme="light"] #tab-mathgames h3 {
  color: #173e35 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}