@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap");

/* 课堂宝设计 token — 对标 tnistech.com 色板与字阶 */
:root {
  --ktb-primary: #8b2d9e;
  --ktb-primary-hover: #6b1f7a;
  --ktb-primary-light: #a855c9;
  --ktb-primary-soft: #f3e8f8;
  --ktb-primary-glow: rgba(139, 45, 158, 0.4);
  --ktb-accent: #c084fc;
  --ktb-ink: #1a1a2e;
  --ktb-body: #4b5568;
  --ktb-muted: #6b7280;
  --ktb-line: #e5e7eb;
  --ktb-line-tint: rgba(139, 45, 158, 0.12);
  --ktb-bg: #f8f7fc;
  --ktb-surface: #ffffff;
  --ktb-dark: #0a0a12;
  --ktb-card-dark: #12121e;
  --ktb-danger: #c43c3c;
  --ktb-warning: #c47b12;
  --ktb-success: #16a34a;
  --ktb-ai: #8b2d9e;
  --ktb-ai-soft: #f3e8f8;
  --ktb-paper: #f8f7fc;
  --ktb-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --ktb-shadow-md: 0 8px 32px rgba(139, 45, 158, 0.12);
  --ktb-radius-btn: 12px;
  --ktb-radius-card: 20px;
  --ktb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ktb-dur: 200ms;
  --ktb-font: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ktb-content: 1120px;
  --ktb-plaza: 1200px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ktb-font);
  color: var(--ktb-body);
  background: var(--ktb-bg);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p {
  margin: 0;
}

a {
  color: var(--ktb-primary);
  text-decoration: none;
}

a:hover {
  color: var(--ktb-primary-hover);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.ktb-mark {
  width: 32px;
  height: 32px;
  max-width: none;
  flex: none;
  display: block;
}
.ktb-mark--sm { width: 28px; height: 28px; }
.ktb-mark--lg { width: 48px; height: 48px; }
.ktb-lockup {
  height: 32px;
  width: auto;
  max-width: none;
  flex: none;
  display: block;
}
.ktb-lockup--lg { height: 40px; }
.ktb-lockup--xl { height: 48px; }
.logo-tnis {
  height: 32px;
  width: auto;
  max-width: none;
  border-radius: 6px;
  display: block;
  object-fit: contain;
}

:focus-visible {
  outline: 2px solid var(--ktb-primary);
  outline-offset: 2px;
}

.ktb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--ktb-radius-btn);
  border: 1px solid transparent;
  background: var(--ktb-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--ktb-dur) var(--ktb-ease), border-color var(--ktb-dur) var(--ktb-ease), transform var(--ktb-dur) var(--ktb-ease), opacity var(--ktb-dur) var(--ktb-ease), box-shadow var(--ktb-dur) var(--ktb-ease);
}

.ktb-btn:hover {
  background: var(--ktb-primary-hover);
  color: #fff;
  box-shadow: 0 8px 24px var(--ktb-primary-glow);
}

.ktb-btn:active {
  transform: scale(0.98);
}

.ktb-btn:disabled,
.ktb-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ktb-btn--ghost {
  background: #fff;
  color: var(--ktb-ink);
  border-color: var(--ktb-line);
}

.ktb-btn--ghost:hover {
  background: var(--ktb-bg);
  color: var(--ktb-ink);
  box-shadow: none;
}

.ktb-btn--ghost-dark {
  background: transparent;
  color: #f9fafb;
  border-color: rgba(255, 255, 255, 0.28);
}

.ktb-btn--ghost-dark:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  box-shadow: none;
}

.ktb-btn--soft {
  background: var(--ktb-primary-soft);
  color: var(--ktb-primary);
}

.ktb-btn--soft:hover {
  background: #ead6f3;
  color: var(--ktb-primary-hover);
  box-shadow: none;
}

.ktb-btn--danger {
  background: var(--ktb-danger);
}

.ktb-btn--lg {
  min-height: 48px;
  padding: 0 28px;
  font-size: 16px;
  border-radius: 14px;
}

.ktb-btn--sm {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 8px;
}

.ktb-card {
  background: var(--ktb-surface);
  border: 1px solid var(--ktb-line-tint);
  border-radius: var(--ktb-radius-card);
  box-shadow: var(--ktb-shadow);
}

.ktb-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ktb-primary-soft);
  color: var(--ktb-primary);
  font-size: 12px;
  white-space: nowrap;
}

.ktb-tag--muted {
  background: var(--ktb-bg);
  color: var(--ktb-muted);
}

.ktb-tag--warn {
  background: #fbf3e6;
  color: var(--ktb-warning);
}

.ktb-tag--danger {
  background: #fbeaea;
  color: var(--ktb-danger);
}

.ktb-tag--ok {
  background: #e8f6ee;
  color: var(--ktb-success);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ece6f4;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
}
.avatar svg,
.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.avatar--lg { width: 56px; height: 56px; }
.avatar--xl { width: 72px; height: 72px; }

.honor-signed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff7d6, #fde68a);
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(212, 160, 23, .28);
}
.honor-signed svg { flex: none; display: block; }
.honor-signed b { font-weight: 600; }

.agent-crumb { margin: 0 0 6px; font-size: 12px; color: var(--ktb-muted); }
.agent-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 14px;
}
.agent-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--ktb-ink);
  line-height: 1.3;
}
.agent-fav {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px 0 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(139, 45, 158, .07);
  color: var(--ktb-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  flex: none;
  transition: background var(--ktb-dur) var(--ktb-ease), color var(--ktb-dur) var(--ktb-ease), box-shadow var(--ktb-dur) var(--ktb-ease);
}
.agent-fav svg { display: block; flex: none; }
.agent-fav path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.agent-fav:hover { background: var(--ktb-primary-soft); }
.agent-fav:focus-visible {
  outline: 2px solid var(--ktb-primary);
  outline-offset: 2px;
}
.agent-fav.is-on {
  background: linear-gradient(180deg, #fff8e4, #f6d56b);
  color: #7a4b12;
  box-shadow: inset 0 0 0 1px rgba(180, 130, 20, .38);
}
.agent-fav.is-on path { fill: currentColor; stroke: currentColor; }
.agent-author {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
}
.agent-author-name {
  margin: 2px 0 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.agent-author .user-sign { margin: 0; font-size: 13px; }
.agent-k {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ktb-muted);
  margin: 0 0 4px;
}
.agent-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--ktb-line-tint);
  border-radius: 16px;
}
.agent-facts b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ktb-ink);
}
.agent-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ktb-line-tint);
}
.agent-block .tags { margin: 0; }
.agent-blurb { margin: 0; color: var(--ktb-body); line-height: 1.65; }
.agent-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 4px;
}
.agent-stats > div {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--ktb-line-tint);
  border-radius: 12px;
}
.agent-stats b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ktb-ink);
}
.agent-stats span { font-size: 11px; color: var(--ktb-muted); }

.grow-medals-hd { margin: 10px 0 6px; font-size: 14px; font-weight: 600; color: var(--ktb-ink); }
.grow-medals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.ktb-medal {
  margin: 0;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.ktb-medal__stamp {
  width: 36px;
  height: 36px;
  display: block;
  transform: scale(.92);
  transform-origin: center;
}
.ktb-medal__petals { fill: #c5c8d2; }
.ktb-medal__face { fill: #eceef3; }
.ktb-medal__ring {
  fill: none;
  stroke: #b7bbc6;
  stroke-width: 1.7;
}
.ktb-medal__shine {
  fill: none;
  stroke: transparent;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.ktb-medal__icon { color: #8b909c; }
.ktb-medal__icon path,
.ktb-medal__icon rect,
.ktb-medal__icon circle { fill: currentColor; }
.ktb-medal__icon path[fill="none"] { fill: none; }
.ktb-medal__icon path.ktb-medal-hi { fill: #dfe1e8; }
.ktb-medal figcaption {
  margin: 0;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--ktb-muted);
}
.ktb-medal.is-on .ktb-medal__stamp {
  transform: none;
  filter: drop-shadow(0 1px 4px rgba(212, 160, 23, .32));
}
.ktb-medal.is-on .ktb-medal__petals { fill: #d4a017; }
.ktb-medal.is-on .ktb-medal__face { fill: #f5c542; }
.ktb-medal.is-on .ktb-medal__ring { stroke: #fff6c8; }
.ktb-medal.is-on .ktb-medal__shine { stroke: #fff; }
.ktb-medal.is-on .ktb-medal__icon { color: #6b1f7a; }
.ktb-medal.is-on .ktb-medal__icon path.ktb-medal-hi { fill: #fff6c8; }
.ktb-medal.is-on figcaption {
  color: var(--ktb-ink);
  font-weight: 600;
}

.user-sign {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ktb-primary);
  font-weight: 600;
}
.user-sign::before { content: "「"; font-weight: 500; opacity: .7; }
.user-sign::after { content: "」"; font-weight: 500; opacity: .7; }
.user-sign--empty {
  color: var(--ktb-muted);
  font-weight: 400;
}
.user-sign--empty::before,
.user-sign--empty::after { content: none; }
.sign-ex { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sign-ex button {
  border: 1px solid var(--ktb-line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ktb-body);
  cursor: pointer;
}
.sign-ex button:hover {
  border-color: var(--ktb-primary);
  color: var(--ktb-primary);
  background: var(--ktb-primary-soft);
}

.avatar-edit { display: grid; gap: 12px; }
.avatar-edit-now { display: flex; align-items: center; gap: 12px; }
.avatar-edit-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-up { display: inline-flex; align-items: center; cursor: pointer; }
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.avatar-pick {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--ktb-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  color: var(--ktb-ink);
  font-size: 12px;
}
.avatar-pick svg { width: 48px; height: 48px; border-radius: 50%; }
.avatar-pick.is-on {
  border-color: var(--ktb-primary);
  background: var(--ktb-primary-soft);
  box-shadow: 0 0 0 2px rgba(139, 45, 158, .12);
}

.ktb-ai-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--ktb-ai-soft);
  color: var(--ktb-primary);
  font-size: 12px;
  border-radius: 10px;
}

.ktb-ai-bar::before {
  content: "AI";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  background: var(--ktb-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ktb-disclaimer {
  font-size: 12px;
  color: var(--ktb-muted);
}

.ktb-demo-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 16px;
  background: #12121e;
  border-bottom: 1px solid rgba(192, 132, 252, 0.2);
  color: #c4b5fd;
  font-size: 12px;
  overflow-x: auto;
}

.ktb-demo-bar strong {
  color: #f9fafb;
}

.ktb-demo-bar a {
  color: #e9d5ff;
}

.ktb-demo-bar select {
  height: 28px;
  border: 1px solid rgba(192, 132, 252, 0.35);
  border-radius: 8px;
  background: #0a0a12;
  color: #e9d5ff;
  padding: 0 8px;
}

.ktb-demo-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #c4b5fd;
}
.ktb-demo-opt input { accent-color: #c084fc; }

.ktb-demo {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
}
.ktb-demo-fab {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #12121e;
  color: #f3e8f8;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(18, 18, 30, .35);
}
.ktb-demo-fab:hover { background: #1f1230; }
.ktb-demo-fab[aria-expanded="true"] { background: #8b2d9e; color: #fff; }
.ktb-demo-pop {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 260px;
  background: #12121e;
  color: #c4b5fd;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(18, 18, 30, .4);
  padding: 14px;
  font-size: 12px;
}
.ktb-demo-pop[hidden] { display: none !important; }
.ktb-demo-kicker {
  margin: 0 0 4px;
  color: #f9fafb;
  font-weight: 700;
  font-size: 13px;
}
.ktb-demo-hint { margin: 0 0 12px; color: #a78bfa; line-height: 1.45; }
.ktb-demo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  color: #e9d5ff;
}
.ktb-demo-field select {
  height: 32px;
  border: 1px solid rgba(192, 132, 252, 0.35);
  border-radius: 10px;
  background: #0a0a12;
  color: #e9d5ff;
  padding: 0 8px;
}
.ktb-demo .ktb-demo-opt { display: flex; margin: 0 0 12px; }
.ktb-demo-links { display: grid; gap: 4px; }
.ktb-demo-links a {
  color: #e9d5ff;
  padding: 6px 8px;
  border-radius: 8px;
}
.ktb-demo-links a:hover { background: rgba(139, 45, 158, .28); }

.ktb-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ktb-muted);
}

.ktb-empty h3 {
  color: var(--ktb-ink);
  font-size: 16px;
  margin-bottom: 8px;
}

.ktb-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 18, 0.55);
}

.ktb-modal.is-open {
  display: flex;
}

.ktb-modal__panel {
  width: min(480px, calc(100% - 32px));
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--ktb-shadow-md);
}

.ktb-modal__panel h3 {
  font-size: 16px;
  color: var(--ktb-ink);
  margin-bottom: 8px;
}

.ktb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.ktb-field label {
  font-size: 13px;
  color: var(--ktb-ink);
}

.ktb-input,
.ktb-select,
.ktb-textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--ktb-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ktb-ink);
  font-size: 14px;
}

.ktb-textarea {
  min-height: 88px;
  resize: vertical;
}

.ktb-watermark {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 5;
}

.ktb-watermark span {
  position: absolute;
  left: -10%;
  top: 40%;
  width: 140%;
  transform: rotate(-22deg);
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: rgba(139, 45, 158, 0.22);
  white-space: nowrap;
}

.ktb-watermark--light span {
  color: rgba(26, 26, 46, 0.08);
  font-size: 28px;
  letter-spacing: 0.18em;
}

.ktb-phone-frame {
  width: 375px;
  height: 812px;
  margin: 24px auto;
  background: #0a0a12;
  border-radius: 36px;
  padding: 12px;
  box-shadow: var(--ktb-shadow-md);
}

.ktb-phone-frame__screen {
  height: 100%;
  background: var(--ktb-bg);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}

.ktb-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(12px);
  background: var(--ktb-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity var(--ktb-dur) var(--ktb-ease), transform var(--ktb-dur) var(--ktb-ease);
}

.ktb-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 420px) {
  .ktb-phone-frame {
    width: 100%;
    height: auto;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: 0;
  }

  .ktb-phone-frame__screen {
    border-radius: 0;
    min-height: 100vh;
  }
}