/* layout.css — 糖果泡泡 UI · Candy Pop Design
   Category: layout
   Blocks: 39
*/

/* ═══ 登录页 ═══ */
#login-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(160deg, #F6F7F9 0%, #FFFFFF 40%, #EEF2FF 70%, #F6F7F9 100%); }

.login-container { background: white; border-radius: var(--radius-xl); padding: 44px 40px; box-shadow: var(--shadow-xl), 0 0 0 1px rgba(226,232,240,.7); width: 390px; position: relative; overflow: hidden; }
.login-container::before { content:''; position:absolute; top:-1px;left:18%;right:18%;height:4px; background:linear-gradient(90deg, transparent, var(--brand-400), var(--gold-400), var(--teal-400), var(--sky-400), transparent); border-radius:0 0 3px 3px; }

.login-logo { text-align: center; margin-bottom: 32px; }

.login-logo h1 { font-size: 23px; color: var(--text-primary); margin-top: 14px; font-weight: 700; letter-spacing: -0.02em; }

.login-form { display: flex; flex-direction: column; gap: 16px; }
/* 登录错误提示条：此前 JS 里引用的 #lp-error 元素在页面中并不存在，
   登录失败时提示无处显示、控制台还抛 TypeError（Cannot set properties of null）。此处补齐。 */
.lp-error { display: none; align-items: flex-start; gap: 7px; padding: 10px 13px; border-radius: var(--radius-md); background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; font-size: 13px; line-height: 1.5; word-break: break-word; }
.lp-error.show { display: flex; }
.lp-error::before { content: '⚠'; flex-shrink: 0; line-height: 1.5; }

.login-input { padding: 14px 18px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: 14px; background: #F9FAFB; transition: all .2s var(--ease-out); font-family: var(--font-sans); }
.login-input:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(226,232,240,.85); background: white; }

.login-btn { height: 50px; width: 100%; background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 55%, var(--brand-600) 100%); color: #FFFFFF; border: none; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; cursor: pointer; transition: all .25s var(--ease-out); box-shadow: 0 4px 20px rgba(79,70,229,.4); letter-spacing: .02em; position: relative; overflow: hidden; }
.login-btn::after { content:''; position:absolute; top:0;left:0;right:0;height:45%; background:linear-gradient(180deg,rgba(255,255,255,.30),transparent); border-radius:var(--radius-md) var(--radius-md) 0 0; }
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(79,70,229,.5); }
.login-btn:active { transform: scale(.97)!important; }

/* ═══ 班级选择页 ═══ */
#class-select-page { display: none; flex-direction: column; min-height: 100vh; background: linear-gradient(180deg, #F6F7F9 0%, #FFFFFF 45%, #EEF2FF 100%); }

.class-select-header { padding: 32px; text-align: center; }

.class-select-header h1 { font-size: 23px; color: var(--text-primary); margin-bottom: 8px; font-weight: 700; }

.class-select-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 28px; }

.class-select-icon { font-size: 56px; margin-bottom: 16px; filter: drop-shadow(0 4px 8px rgba(79,70,229,.18)); }

.create-first-class-btn { background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 55%, var(--brand-600) 100%); color: #FFFFFF; border: none; padding: 14px 40px; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px rgba(79,70,229,.4); transition: all .25s var(--ease-out); position: relative; overflow: hidden; }
.create-first-class-btn::after { content:''; position:absolute; top:0;left:0;right:0;height:42%; background:linear-gradient(180deg,rgba(255,255,255,.28),transparent); border-radius:var(--radius-full) var(--radius-full) 0 0; }
.create-first-class-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(79,70,229,.5); }
.create-first-class-btn:active { transform: scale(.97)!important; }

.class-list { flex: 1; padding: 20px 24px 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 980px; margin: 0 auto; width: 100%; align-content: start; }

.class-card { background: white; border-radius: var(--radius-lg); width: 100%; display: flex; flex-direction: column; cursor: pointer; box-shadow: var(--shadow-sm); border: 1.5px solid rgba(226,232,240,.7); transition: all .25s var(--ease-out); position: relative; overflow: hidden; }
.class-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--brand-300); }

/* 带主题色的班级卡片（顶部色块 + 白色文字） */
.class-card.themed { border: none; --class-theme: #6366f1; }
.class-card.themed .class-card-header { background: linear-gradient(135deg, var(--class-theme) 0%, var(--class-theme) 100%); color: #fff; }
.class-card.themed .class-card-name { color: #fff; }
.class-card.themed .class-card-icon { background: rgba(255,255,255,.24); box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.class-card.themed .class-card-body { background: #fff; }
.class-card.themed .class-card-actions { background: #fff; }
.class-card.themed:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

.class-card.new-class { border: 1.5px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; font-weight: 500; padding: 18px; min-height: 128px; }
.class-card.new-class:hover { border-color: var(--brand-400); color: var(--brand-500); }

/* 班级主题颜色选择面板（色块 + 名字，两列列表） */
.class-color-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 10px; }
.class-color-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
.class-color-option { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; transition: all .15s var(--ease-out); }
.class-color-option:hover { background: rgba(99,102,241,.07); }
.class-color-option.selected { background: rgba(99,102,241,.10); }
.class-color-option.selected .class-color-name { color: var(--brand-600); font-weight: 600; }
.class-color-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all .2s var(--ease-out); box-shadow: 0 1px 4px rgba(0,0,0,.12); flex-shrink: 0; position: relative; }
.class-color-option:hover .class-color-swatch { transform: scale(1.1); box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.class-color-swatch.selected { border-color: #fff; outline: 2.5px solid var(--brand-500); outline-offset: 1px; }
.class-color-swatch.selected::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.class-color-name { font-size: 13px; color: var(--text-primary); user-select: none; }

.class-card-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; background: linear-gradient(135deg, var(--brand-200) 0%, var(--gold-200) 100%); color: var(--text-primary); }
.class-card-name { font-size: 14px; font-weight: 700; }
.class-card-icon { width: 26px; height: 26px; border-radius: var(--radius-md); background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 1px 6px rgba(0,0,0,.08); }

.class-card-body { display: flex; padding: 13px 13px; gap: 10px; background: #fff; }
.class-stat { flex: 1; text-align: center; }
.class-stat-value { font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.class-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.class-card-actions { display: flex; gap: 6px; padding: 0 12px 12px; background: #fff; }
.class-card-btn { flex: 1; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border); background: #fff; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.class-card-btn:hover { background: var(--bg-body); border-color: var(--brand-300); color: var(--brand-600); }
.class-card-btn.primary { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; border: none; box-shadow: 0 3px 10px rgba(79,70,229,.25); }
.class-card-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(79,70,229,.35); }
.class-card-btn.danger { color: #DC2626; border-color: #FECACA; }
.class-card-btn.danger:hover { background: #FEF2F2; border-color: #FCA5A5; color: #B91C1C; }

/* ═══ 主应用容器 ═══ */
#main-app { display: none; flex-direction: column; min-height: 100vh; background: var(--bg-body); position: relative; overflow-x: hidden; }

/* ── 背景浮动光晕（糖果泡泡氛围） ── */
#main-app::before, #main-app::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .38;
  pointer-events: none;
  z-index: 0;
}
#main-app::before {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(91,126,247,.16) 0%, transparent 70%);
  top: -120px; right: -80px;
  animation: orbFloat1 22s ease-in-out infinite alternate;
}
#main-app::after {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(79,70,229,.12) 0%, transparent 70%);
  bottom: -100px; left: -60px;
  animation: orbFloat2 28s ease-in-out infinite alternate-reverse;
}
@keyframes orbFloat1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-35px, 25px) scale(1.08); }
  100% { transform: translate(20px, -12px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -18px) scale(1.1); }
  100% { transform: translate(-25px, 28px) scale(0.92); }
}

/* ═══ 顶部导航栏 ═══ */
.nav-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

.nav-logo { height: 36px; display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--text-primary); flex-shrink: 0; white-space: nowrap; letter-spacing: -0.01em; }

.class-switch { height: 30px; padding: 0 13px; background: rgba(255,255,255,.7); border-radius: var(--radius-full); cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-primary); border: 1.5px solid rgba(226,232,240,.9); transition: all .2s var(--ease-out); flex-shrink: 0; white-space: nowrap; backdrop-filter: blur(8px); }
.class-switch:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-600); }

.main-nav { display: flex; gap: 3px; align-items: center; justify-content: center; flex-wrap: wrap; background: transparent; padding: 0; border-radius: 0; border: none; box-shadow: none; backdrop-filter: none; margin: 0 auto; }

.nav-item { padding: 7px 15px; border-radius: var(--radius-md); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all .22s var(--ease-out); white-space: nowrap; text-align: center; line-height: 1.4; flex-shrink: 0; border: none; background: transparent; }
.nav-item:hover { background: var(--brand-50); color: var(--brand-500); transform: translateY(-1px); }
.nav-item.active { background: linear-gradient(135deg, var(--brand-400), var(--brand-500)); color: #FFFFFF !important; font-weight: 600 !important; box-shadow: 0 3px 12px rgba(79,70,229,.4), inset 0 1px 0 rgba(255,255,255,.2); transform: translateY(-1px); }

.nav-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }

.nav-right button { padding: 6px 14px; background: rgba(255,255,255,.7); border: 1.5px solid rgba(226,232,240,.85); border-radius: var(--radius-full); cursor: pointer; font-size: 12px; color: var(--text-secondary); transition: all .2s var(--ease-out); white-space: nowrap; flex-shrink: 0; font-weight: 500; backdrop-filter: blur(8px); }
.nav-right button:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-500); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(79,70,229,.16); }

/* ====== 用户下拉菜单 ====== */
.user-dropdown { position: relative; }

.user-btn { display: flex; align-items: center; gap: 6px; padding: 5px 13px; background: rgba(255,255,255,.7); border: 1.5px solid rgba(226,232,240,.85); border-radius: var(--radius-full); cursor: pointer; font-size: 12px; color: var(--text-primary); transition: all .2s var(--ease-out); white-space: nowrap; font-weight: 500; backdrop-filter: blur(8px); }
.user-btn:hover { background: var(--brand-50); border-color: var(--brand-300); box-shadow: 0 2px 8px rgba(79,70,229,.16); }
.user-avatar { font-size: 15px; line-height: 1; }
.user-name { font-weight: 600; color: var(--text-primary); font-size: 12px; }
.user-arrow { font-size: 10px; color: var(--text-muted); margin-left: 2px; transition: transform .2s var(--ease-out); }
.user-dropdown.open .user-arrow { transform: rotate(180deg); }

.user-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 165px; background: rgba(255,255,255,.92); border: 1.5px solid rgba(226,232,240,.8); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 200; display: none; backdrop-filter: blur(16px); }
.user-dropdown.open .user-menu { display: block; }

.user-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); cursor: pointer; font-size: 13px; color: var(--text-primary); transition: all .15s var(--ease-out); }
.user-menu-item:hover { background: var(--brand-50); color: var(--brand-500); }
.user-menu-item--danger { color: var(--negative); }
.user-menu-item--danger:hover { background: var(--negative-bg); }
.user-menu-item .umi-icon { font-size: 15px; line-height: 1; }
.user-menu-divider { height: 1px; background: var(--border); margin: 4px 8px; }

.main-content { flex: 1; padding: 24px 28px; background: transparent; position: relative; z-index: 1; }