:root {
  color-scheme: light;
  --ink: #1F1B16;
  --muted: #6B6357;
  --line: #E6DFD0;
  --paper: #F8F4EC;
  --panel: #FFFEFB;
  --green: #A20018;
  --green-dark: #7A0012;
  --gold: #A37A0F;
  --blue: #A20018;
  --teal: #C9A23C;
  --mist: #C9C2B4;
  --cloud: #F8F4EC;
  --red: #9F3128;
  --shadow: 0 24px 70px rgba(31, 27, 22, 0.12);
  --container: 1240px;
  --brand-grad: linear-gradient(135deg, #7A0012 0%, #A20018 45%, #9F3128 70%, #A37A0F 100%);
}

* {
  box-sizing: border-box;
}

/* TBSA 品牌雙色橫條 — 視覺簽名 */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  z-index: 999;
  background: linear-gradient(to right, #A37A0F 0%, #A37A0F 48%, #A20018 52%, #A20018 100%);
}


html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 86% -5%, rgba(201, 162, 60, 0.25), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--paper) 58%, #FFFFFF 100%);
}

a {
  color: inherit;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background:
    radial-gradient(900px 620px at 12% 12%, rgba(162, 0, 24, 0.16), transparent 62%),
    radial-gradient(760px 520px at 86% 18%, rgba(201, 162, 60, 0.22), transparent 64%),
    #fff;
}

.login-panel {
  width: min(860px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}

.login-panel::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 180px;
  right: -60px;
  top: -34px;
  background: url("/assets/cloud.svg") no-repeat center/contain;
  opacity: 0.12;
  pointer-events: none;
}

.brand-mark {
  width: 64px;
  height: 54px;
  font-size: 15px;
  letter-spacing: 0.04em;
  display: grid;
  place-items: center;
  background: var(--brand-grad);
  color: white;
  font-weight: 800;
  margin-bottom: 22px;
  border-radius: 10px;
}

.login-logo {
  width: auto;
  max-width: min(220px, 62vw);
  max-height: 132px;
  object-fit: contain;
  height: auto;
  margin: 4px 0 20px;
}

.admin-brand {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  margin: 2px 0 22px;
  border: 1px solid rgba(162, 0, 24, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(31, 27, 22, 0.08);
}

.admin-brand span {
  min-width: 46px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-grad);
  color: white;
  font-weight: 900;
  font-size: 15px;
}

.admin-brand strong {
  font-size: 14px;
  line-height: 1;
  color: var(--green-dark);
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(34px, 5.6vw, 68px);
  line-height: 1.08;
  letter-spacing: 0;
  margin-bottom: 18px;
  max-width: 980px;
}

h2 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  margin-bottom: 14px;
}

h3 {
  font-size: 20px;
  line-height: 1.25;
}

.lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--muted);
}

.token-form {
  margin-top: 28px;
}

.token-form label {
  display: block;
  font-weight: 800;
  margin-bottom: 10px;
}

.token-row {
  display: flex;
  gap: 10px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 14px;
  font: inherit;
  background: #fff;
}

input,
select {
  min-height: 48px;
}

textarea {
  min-height: 96px;
  padding-top: 12px;
  resize: vertical;
}

button,
.primary-link,
.secondary-link {
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  padding: 0 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

button,
.primary-link {
  background: var(--green);
  color: #fff;
}

.secondary-link,
.ghost-button {
  background: #F5F0E6;
  color: var(--green-dark);
}

.form-error {
  min-height: 24px;
  margin: 10px 0 0;
  color: var(--red);
  font-weight: 700;
}

.login-note {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 10px clamp(18px, 4vw, 48px);
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(16px);
  overflow: visible;
}

.wordmark {
  text-decoration: none;
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: max-content;
}

.wordmark span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--brand-grad);
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  white-space: nowrap;
}

.wordmark strong {
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--green-dark);
}

nav {
  display: flex;
  flex: 1 1 520px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  align-items: center;
  min-width: 0;
}

nav a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

nav a:hover {
  background: rgba(230, 223, 208, 0.42);
  color: var(--green-dark);
}

.hero {
  min-height: clamp(620px, calc(78vh - 68px), 780px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.5fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px clamp(22px, 4vw, 48px) 42px;
  background:
    radial-gradient(680px 420px at 95% 18%, rgba(201,162,60,0.22), transparent 72%),
    transparent;
}

.hero-brand {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  margin: 4px 0 22px;
  border-radius: 999px;
  color: var(--green-dark);
  background: rgba(230, 223, 208, 0.58);
  border: 1px solid rgba(162, 0, 24, 0.18);
  font-weight: 900;
  letter-spacing: 0.6px;
}

.hero-copy p:not(.eyebrow) {
  max-width: 760px;
  font-size: 20px;
  line-height: 1.7;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-card {
  display: grid;
  gap: 14px;
  align-self: center;
}

.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 16px 36px rgba(31, 27, 22, 0.09);
}

.metric strong {
  display: block;
  font-size: 42px;
  line-height: 1;
  color: var(--blue);
}

.metric span {
  color: var(--muted);
  font-weight: 700;
}

.band,
.course-section,
.agents-section,
.deploy-section,
.screen-section,
.entry-section,
.agentic-section,
.jacky-section,
.dev-env-section,
.identity-section,
.core-section,
.newcomer-section,
.tbsa-section,
.tool-suite-section,
.plan-mode-section,
.aios-section,
.video-course-section {
  padding: 80px clamp(22px, 4vw, 48px);
  max-width: var(--container);
  margin: 0 auto;
}

.band {
  background: #fff;
  border-block: 1px solid var(--line);
  max-width: none;
}

.band > * {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  max-width: 860px;
  margin-bottom: 30px;
  padding-left: 0;
}

.section-head p:not(.eyebrow) {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.principles,
.agents-grid,
.command-panel,
.screen-grid,
.routine-grid,
.entry-grid,
.agentic-definition,
.field-note-grid,
.mastery-lanes,
.dev-env-grid,
.identity-grid,
.core-grid,
.tool-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.principles article,
.agents-grid article,
.command-panel > div,
.course-card,
.deploy-list li,
.screen-card,
.routine-grid article,
.entry-card,
.agentic-definition article,
.agentic-callout,
.agents-upgrade,
.field-note-card,
.field-note-rule,
.mastery-lanes article,
.dev-env-grid article,
.identity-grid article,
.core-grid article,
.dev-env-rule,
.tool-lanes article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 14px 34px rgba(31, 27, 22, 0.07);
}

.identity-section {
  padding-top: 36px;
}

.identity-grid article {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 320px;
  min-width: 0;
}

.identity-grid article:nth-child(1) {
  border-top: 5px solid var(--blue);
}

.identity-grid article:nth-child(2) {
  border-top: 5px solid var(--green);
}

.identity-grid article:nth-child(3) {
  border-top: 5px solid var(--gold);
}

.identity-grid span,
.core-grid span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.identity-grid h3,
.core-grid h3 {
  margin: 0;
  font-size: 24px;
  color: var(--ink);
}

.identity-grid p,
.identity-grid li,
.core-grid p {
  color: var(--muted);
  line-height: 1.65;
}

.identity-grid ul {
  margin: 0;
  padding-left: 18px;
}

.section-link {
  align-self: end;
  max-width: 100%;
  width: fit-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--green-dark);
  background: rgba(230, 223, 208, 0.45);
  border: 1px solid rgba(162, 0, 24, 0.18);
  font-weight: 900;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.section-link.is-active {
  background: var(--green);
  color: #fff;
}

.core-section {
  padding-top: 56px;
}

.core-grid article {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  overflow-wrap: anywhere;
}

.core-grid h3,
.core-grid p,
.core-grid a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.jacky-section {
  background:
    linear-gradient(180deg, #fff 0%, rgba(248, 244, 236, 0.58) 100%);
}

.field-note-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-note-card {
  min-height: 330px;
  border-radius: 12px;
  border-top: 4px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(31, 27, 22, 0.06);
}

.field-note-card span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(163, 122, 15, 0.2);
  color: #7A5A08;
  font-size: 12px;
  font-weight: 900;
}

.field-note-card p,
.field-note-card li,
.field-note-rule p {
  color: var(--muted);
  line-height: 1.65;
}

.field-note-card ul {
  margin: auto 0 0;
  padding-left: 18px;
}

.field-note-rule {
  margin-top: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

.agentic-section {
  background:
    linear-gradient(180deg, rgba(248, 244, 236, 0.78), rgba(255, 255, 255, 0.92));
  max-width: none;
  border-block: 1px solid var(--line);
}

.agentic-section > * {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.agentic-definition {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.agentic-definition article {
  border-radius: 12px;
  padding: 22px;
  box-shadow: none;
}

.agentic-definition strong {
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
}

.agentic-definition p,
.agentic-callout p,
.agents-upgrade li {
  color: var(--muted);
  line-height: 1.65;
}

.agentic-callout {
  margin-top: 18px;
  border-color: rgba(162, 0, 24, 0.26);
  background:
    linear-gradient(135deg, rgba(31, 27, 22, 0.96), rgba(162, 0, 24, 0.92));
  color: #fff;
}

.agentic-callout p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
}

.agentic-callout strong {
  color: #fff;
}

.agents-upgrade {
  margin-top: 18px;
  border-radius: 12px;
}

.agents-upgrade ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 0;
  padding-left: 22px;
}

.tool-suite-section {
  padding-top: 56px;
}

.newcomer-section {
  padding-top: 42px;
}

.newcomer-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.35fr);
  gap: 18px;
  align-items: stretch;
}

.newcomer-brief,
.newcomer-days article,
.newcomer-after div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(31, 27, 22, 0.07);
}

.newcomer-brief {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 5px solid var(--gold);
}

.newcomer-brief span,
.newcomer-days strong {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--cloud);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.newcomer-brief ul {
  margin: 0;
  padding-left: 18px;
}

.newcomer-brief li,
.newcomer-fit p,
.newcomer-days p,
.newcomer-after span {
  color: var(--muted);
  line-height: 1.65;
}

.newcomer-fit {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.newcomer-fit strong {
  color: var(--green-dark);
}

.newcomer-fit p {
  margin: 8px 0 0;
}

.newcomer-days {
  display: grid;
  gap: 12px;
}

.newcomer-days article {
  padding: 22px 24px;
  border-left: 5px solid var(--blue);
}

.newcomer-days article:nth-child(2) {
  border-left-color: var(--gold);
}

.newcomer-days article:nth-child(3) {
  border-left-color: var(--teal);
}

.newcomer-days h3 {
  margin: 12px 0 10px;
}

.newcomer-days p:last-child {
  margin-bottom: 0;
}

.newcomer-after {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.newcomer-after div {
  padding: 18px 20px;
  display: grid;
  gap: 8px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.84);
}

.newcomer-after strong {
  color: var(--green-dark);
}

.newcomer-block {
  margin-top: 34px;
}

.compact-head {
  margin-bottom: 18px;
}

.newcomer-task-grid,
.newcomer-template-grid,
.newcomer-tool-grid,
.newcomer-agent-demo,
.newcomer-standard-grid,
.newcomer-simulation-grid,
.newcomer-build-log {
  display: grid;
  gap: 14px;
}

.newcomer-task-grid,
.newcomer-template-grid,
.newcomer-tool-grid,
.newcomer-simulation-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.newcomer-agent-demo {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.newcomer-standard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.newcomer-task-grid article,
.newcomer-template-grid article,
.newcomer-tool-grid article,
.newcomer-agent-demo article,
.newcomer-standard-grid article,
.newcomer-simulation-grid article,
.newcomer-build-log article,
.newcomer-tool-rule,
.newcomer-pass-rule {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(31, 27, 22, 0.07);
}

.newcomer-task-grid article,
.newcomer-template-grid article,
.newcomer-tool-grid article,
.newcomer-agent-demo article,
.newcomer-standard-grid article,
.newcomer-simulation-grid article,
.newcomer-build-log article {
  padding: 22px 24px;
}

.newcomer-task-grid article:nth-child(1),
.newcomer-template-grid article:nth-child(1),
.newcomer-tool-grid article:nth-child(1),
.newcomer-agent-demo article:nth-child(1),
.newcomer-simulation-grid article:nth-child(1) {
  border-top: 5px solid var(--blue);
}

.newcomer-task-grid article:nth-child(2),
.newcomer-template-grid article:nth-child(2),
.newcomer-tool-grid article:nth-child(2),
.newcomer-agent-demo article:nth-child(2),
.newcomer-simulation-grid article:nth-child(2) {
  border-top: 5px solid var(--gold);
}

.newcomer-task-grid article:nth-child(3),
.newcomer-template-grid article:nth-child(3),
.newcomer-tool-grid article:nth-child(3),
.newcomer-simulation-grid article:nth-child(3) {
  border-top: 5px solid var(--teal);
}

.newcomer-task-grid span,
.newcomer-template-grid span,
.newcomer-tool-grid span,
.newcomer-agent-demo span,
.newcomer-simulation-grid span {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  background: #F5F0E6;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.newcomer-task-grid h3,
.newcomer-template-grid h3,
.newcomer-tool-grid h3,
.newcomer-agent-demo h3,
.newcomer-standard-grid h3,
.newcomer-simulation-grid h3,
.newcomer-build-log h3 {
  margin: 14px 0 10px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.newcomer-task-grid dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.newcomer-task-grid dl div {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.newcomer-task-grid dt {
  color: var(--green-dark);
  font-weight: 900;
}

.newcomer-task-grid dd {
  margin: 0;
  min-width: 0;
}

.newcomer-template-grid ul,
.newcomer-agent-demo ol {
  margin: 12px 0 0;
  padding-left: 20px;
}

.newcomer-task-grid dd,
.newcomer-template-grid li,
.newcomer-tool-grid p,
.newcomer-tool-rule span,
.newcomer-agent-demo p,
.newcomer-agent-demo li,
.newcomer-standard-grid p,
.newcomer-pass-rule span,
.newcomer-simulation-grid p,
.newcomer-simulation-grid li,
.newcomer-build-log p {
  color: var(--muted);
  line-height: 1.65;
}

.newcomer-tool-grid article {
  display: grid;
  align-content: start;
  gap: 10px;
}

.newcomer-tool-grid p {
  margin: 0;
}

.newcomer-tool-grid strong {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--green-dark);
  line-height: 1.45;
}

.newcomer-tool-rule {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 14px;
  padding: 18px 20px;
  background: #fff8e8;
  border-color: rgba(185, 124, 44, 0.28);
}

.newcomer-tool-rule strong {
  color: var(--gold);
}

.agent-compare {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.agent-compare div {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(248, 250, 247, 0.9);
}

.agent-compare strong {
  color: var(--blue);
}

.agent-compare p,
.agent-rule {
  margin: 8px 0 0;
}

.agent-rule {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-weight: 800;
}

.newcomer-standard-grid article {
  display: grid;
  align-content: start;
  gap: 8px;
}

.newcomer-standard-grid strong {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: var(--brand-grad);
  color: #fff;
  font-size: 20px;
}

.newcomer-standard-grid p {
  margin: 0;
}

.newcomer-pass-rule {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 14px;
  padding: 18px 20px;
  background: #F8F2E9;
  border-color: rgba(122, 90, 8, 0.3);
}

.newcomer-pass-rule strong {
  color: var(--green-dark);
}

.newcomer-simulation-grid article {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  gap: 10px;
}

.newcomer-simulation-grid p {
  margin-bottom: 0;
}

.newcomer-simulation-grid ul {
  margin: auto 0 0;
  padding-left: 18px;
}

.newcomer-example-grid,
.newcomer-fix-grid {
  display: grid;
  gap: 14px;
}

.newcomer-example-grid {
  margin-top: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.newcomer-fix-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.newcomer-example-grid article,
.newcomer-fix-grid article {
  min-width: 0;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(31, 27, 22, 0.07);
}

.newcomer-example-grid article:nth-child(1) {
  border-top: 5px solid var(--blue);
}

.newcomer-example-grid article:nth-child(2) {
  border-top: 5px solid var(--gold);
}

.newcomer-example-grid article:nth-child(3) {
  border-top: 5px solid var(--teal);
}

.newcomer-fix-grid article {
  border-top: 5px solid var(--red);
}

.newcomer-example-grid span,
.newcomer-fix-grid span {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  background: #F5F0E6;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.newcomer-fix-grid span {
  background: #fbeeec;
  color: var(--red);
}

.newcomer-example-grid h3,
.newcomer-fix-grid h3 {
  margin: 14px 0 10px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.newcomer-example-grid dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.newcomer-example-grid dl div {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.newcomer-example-grid dt {
  color: var(--green-dark);
  font-weight: 900;
}

.newcomer-example-grid dd {
  margin: 0;
  min-width: 0;
  color: var(--muted);
  line-height: 1.65;
}

.fix-pair {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}

.fix-pair div {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.fix-pair .fix-bad {
  background: #fdf4f2;
  border-color: rgba(176, 71, 47, 0.3);
}

.fix-pair .fix-good {
  background: #F8F2E9;
  border-color: rgba(122, 90, 8, 0.3);
}

.fix-pair .fix-bad strong {
  color: var(--red);
}

.fix-pair .fix-good strong {
  color: var(--green-dark);
}

.fix-pair p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.fix-why {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.65;
}

.prompt-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.prompt-box pre {
  margin: 0;
  min-width: 0;
  padding: 14px 16px;
  background: #f3f7f9;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.copy-prompt {
  width: fit-content;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(31, 27, 22, 0.35);
  border-radius: 9px;
  background: #fff;
  color: var(--green-dark);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.copy-prompt:hover {
  background: var(--cloud);
}

.copy-prompt.is-copied {
  border-color: rgba(122, 90, 8, 0.45);
  background: #F8F2E9;
}

.newcomer-build-log {
  position: relative;
}

.newcomer-build-log article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(31, 27, 22, 0.05);
}

.newcomer-build-log article strong {
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: var(--brand-grad);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}

.newcomer-build-log article.next strong {
  background: var(--gold);
}

.newcomer-build-log h3 {
  margin-top: 0;
}

.newcomer-build-log p {
  margin-bottom: 0;
}

.tbsa-section {
  padding-top: 46px;
}

.tbsa-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.tbsa-summary article {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(31, 27, 22, 0.06);
}

.tbsa-summary strong {
  color: var(--blue);
  font-size: 36px;
  line-height: 1;
}

.tbsa-summary span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.tbsa-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

.tbsa-course-grid article {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(31, 27, 22, 0.07);
}

.tbsa-course-grid article:nth-child(1),
.tbsa-course-grid article:nth-child(2),
.tbsa-course-grid article:nth-child(3),
.tbsa-course-grid article:nth-child(4) {
  border-top: 5px solid var(--blue);
}

.tbsa-course-grid article:nth-child(5),
.tbsa-course-grid article:nth-child(6) {
  border-top: 5px solid var(--gold);
}

.tbsa-course-grid article:nth-child(7),
.tbsa-course-grid article:nth-child(8) {
  border-top: 5px solid var(--teal);
}

.tbsa-course-grid span {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--cloud);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.tbsa-course-grid h3 {
  margin-bottom: 0;
}

.tbsa-course-grid p,
.tbsa-course-grid li {
  color: var(--muted);
  line-height: 1.6;
}

.tbsa-course-grid ul {
  margin: auto 0 0;
  padding-left: 18px;
}

.tool-lanes article {
  min-height: 270px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-lanes article:nth-child(1) {
  border-top: 5px solid var(--blue);
}

.tool-lanes article:nth-child(2) {
  border-top: 5px solid var(--gold);
}

.tool-lanes article:nth-child(3) {
  border-top: 5px solid var(--teal);
}

.tool-lanes span {
  width: fit-content;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--cloud);
  color: var(--green-dark);
  font-weight: 900;
  font-size: 12px;
}

.tool-lanes p {
  color: var(--muted);
  line-height: 1.65;
}

.tool-lanes strong {
  margin-top: auto;
  color: var(--green-dark);
}

.plan-combo {
  margin-top: 16px;
}

.plan-pitfall {
  border-color: var(--green-dark);
}

.plan-mantra {
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--cloud);
  color: var(--green-dark);
  font-weight: 700;
  line-height: 1.65;
}

.entry-section {
  padding-top: 56px;
}

.entry-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.entry-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 12px;
}

.entry-card.primary-entry {
  grid-column: span 2;
  background:
    linear-gradient(135deg, rgba(31, 27, 22, 0.96), rgba(162, 0, 24, 0.94)),
    #1F4A72;
  color: #fff;
  border-color: transparent;
}

.entry-card.codex-entry {
  border-top: 4px solid var(--gold);
}

.entry-card.antigravity-entry {
  border-top: 4px solid var(--teal);
}

.entry-card span {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(230, 223, 208, 0.7);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.entry-card.primary-entry span {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.entry-card h3 {
  margin-bottom: 0;
}

.entry-card p,
.entry-card li {
  color: var(--muted);
  line-height: 1.6;
}

.entry-card.primary-entry p,
.entry-card.primary-entry li {
  color: rgba(255, 255, 255, 0.84);
}

.entry-card ul {
  padding-left: 18px;
  margin: auto 0 0;
}

.mastery-lanes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mastery-lanes article {
  border-radius: 12px;
  box-shadow: none;
}

.mastery-lanes strong {
  color: var(--blue);
  font-size: 13px;
  text-transform: uppercase;
}

.mastery-lanes p {
  color: var(--muted);
  line-height: 1.65;
}

.dev-env-section {
  padding-top: 56px;
}

.dev-env-grid article {
  border-radius: 12px;
  display: grid;
  gap: 12px;
  align-content: start;
  box-shadow: 0 12px 28px rgba(31, 27, 22, 0.06);
}

.dev-env-grid span {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--cloud);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.dev-env-grid p,
.dev-env-rule span {
  color: var(--muted);
  line-height: 1.65;
}

.dev-env-grid code {
  display: block;
  background: #1F1B16;
  color: #e9f2ee;
  padding: 14px;
  border-radius: 6px;
  line-height: 1.65;
  overflow-x: auto;
}

.dev-env-rule {
  margin-top: 18px;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: none;
}

.dev-env-rule strong {
  color: var(--green-dark);
  white-space: nowrap;
}

.principles span,
.agents-grid b {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--brand-grad);
  color: white;
  margin-bottom: 14px;
  border-radius: 10px;
}

.principles p,
.agents-grid p,
.course-card p,
.deploy-list span {
  color: var(--muted);
  line-height: 1.65;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.filter {
  background: #fff;
  color: var(--green-dark);
  border: 1px solid var(--line);
  min-height: 42px;
}

.filter.is-active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.course-card {
  display: grid;
  gap: 18px;
}

.course-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stage-pill {
  background: #e8f1ed;
  color: var(--green-dark);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
}

.course-id {
  color: var(--gold);
  font-weight: 900;
}

.course-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  line-height: 1.7;
}

.detailed-card {
  padding: clamp(22px, 4vw, 36px);
  box-shadow: 0 18px 46px rgba(31, 27, 22, 0.09);
}

.course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: clamp(22px, 4vw, 42px);
}

.course-subtitle {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.65;
}

.why-box {
  background: var(--cloud);
  border-left: 4px solid var(--blue);
  padding: 16px 18px;
  line-height: 1.65;
  margin: 16px 0;
  border-radius: 0 10px 10px 0;
}

.lesson-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lesson;
}

.lesson-list li {
  display: grid;
  grid-template-columns: minmax(170px, 210px) 1fr;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
}

.lesson-list li strong {
  color: var(--green-dark);
}

.lesson-list li span {
  color: var(--muted);
  line-height: 1.55;
}

.course-side {
  display: grid;
  align-content: start;
  gap: 14px;
}

.screen-label {
  font-weight: 900;
  color: var(--blue);
}

.mini-screen,
.mock-window {
  border: 1px solid #b9c7c2;
  border-radius: 16px;
  background: #1F1B16;
  color: #e7f3ee;
  min-height: 180px;
  overflow: hidden;
}

.mini-screen {
  display: grid;
  align-content: start;
}

.window-bar {
  display: flex;
  gap: 6px;
  padding: 10px;
  background: #182C44;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.window-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d86b5d;
}

.window-bar span:nth-child(2) {
  background: #e6b954;
}

.window-bar span:nth-child(3) {
  background: #C9A23C;
}

.mini-screen code,
.terminal-mock code {
  display: block;
  padding: 8px 14px;
  color: #F3EAD3;
}

.tree-line,
.file-row {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.folder::before {
  content: "[DIR] ";
  color: #e6b954;
}

.minus,
.plus {
  margin: 0;
  padding: 10px 14px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.minus {
  color: #ffb2a9;
  background: rgba(165, 73, 63, 0.18);
}

.plus {
  color: #EFD9A0;
  background: rgba(122, 90, 8, 0.22);
}

.flow-node,
.flow-arrow,
.admin-mini span,
.deploy-mini span {
  margin: 10px 14px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  text-align: center;
}

.flow-arrow {
  border: 0;
  color: #e6b954;
  font-weight: 900;
}

.admin-mini,
.deploy-mini {
  display: grid;
  gap: 4px;
  padding-top: 8px;
}

.command-stack {
  display: grid;
  gap: 8px;
}

.command-stack code {
  display: block;
  background: #1F1B16;
  color: #e9f2ee;
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
}

.practice-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.practice-row > div {
  background: #F8FBFC;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}

.practice-row strong {
  color: var(--green-dark);
}

.practice-row p,
.practice-row li {
  color: var(--muted);
  line-height: 1.6;
}

.practice-row ul {
  padding-left: 18px;
}

.screen-section {
  background: #fff;
}

.screen-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.screen-card {
  display: grid;
  gap: 14px;
}

.screen-card .mock-window {
  min-height: 170px;
}

.urlbar {
  margin: 14px;
  padding: 10px;
  border-radius: 999px;
  background: #F5F0E6;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
}

.browser-body {
  margin: 14px;
  min-height: 68px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ink);
  border-radius: 6px;
  font-weight: 900;
}

.routine-grid article strong {
  color: var(--gold);
  font-size: 30px;
}

.output {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--green-dark);
  line-height: 1.6;
}

.command-panel code {
  display: block;
  background: #17211f;
  color: #e9f2ee;
  padding: 14px;
  border-radius: 6px;
  line-height: 1.6;
  overflow-x: auto;
}

.deploy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  counter-reset: deploy;
}

.deploy-list li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 4px;
  align-items: start;
}

.deploy-list li::before {
  counter-increment: deploy;
  content: counter(deploy, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--gold);
  font-size: 28px;
  font-weight: 900;
}

.deploy-list li strong {
  grid-column: 2;
  grid-row: 1;
}

.deploy-list li span {
  grid-column: 2;
  grid-row: 2;
}

[hidden] {
  display: none !important;
}

[data-zone][hidden],
[data-zone-card][hidden],
[data-zone-link][hidden],
[data-zone-button][hidden] {
  display: none !important;
}

.admin-shell {
  min-height: 100vh;
  padding: 56px clamp(22px, 4vw, 48px);
  background:
    radial-gradient(820px 560px at 84% 4%, rgba(201,162,60,0.22), transparent 70%),
    var(--paper);
}

.admin-panel {
  max-width: 1120px;
  margin: 0 auto;
}

.admin-back {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--green-dark);
  font-weight: 800;
  text-decoration: none;
}

.admin-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  margin-top: 18px;
  box-shadow: 0 16px 36px rgba(31, 27, 22, 0.08);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.admin-grid label,
.admin-card label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-tabs {
  display: flex;
  gap: 10px;
  margin: 22px 0 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.admin-tab {
  min-height: 42px;
  background: #fff;
  color: var(--green-dark);
  border: 1px solid var(--line);
}

.admin-tab.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.role-form-grid,
.knowledge-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stacked-field {
  display: grid;
  gap: 8px;
  font-weight: 800;
  margin: 14px 0;
}

.permission-picker,
.role-picker {
  display: grid;
  gap: 10px;
}

.permission-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0 18px;
}

.check-card,
.check-line {
  cursor: pointer;
}

.check-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #F8FBFC;
}

.check-card input,
.check-line input {
  width: auto;
  min-height: auto;
  margin-top: 4px;
}

.check-card span {
  display: grid;
  gap: 4px;
}

.check-card small,
.config-item small {
  color: var(--muted);
  line-height: 1.5;
}

.knowledge-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 18px;
}

.knowledge-role-grid > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #F8FBFC;
}

.knowledge-role-grid strong {
  display: block;
  margin-bottom: 10px;
  color: var(--green-dark);
}

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--muted);
  font-weight: 700;
}

.config-list {
  display: grid;
  gap: 12px;
}

.config-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}

.config-item strong,
.config-item span,
.config-item small {
  display: block;
}

.config-item span {
  margin-top: 4px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
}

.config-item p {
  margin: 10px 0;
  color: var(--muted);
  line-height: 1.65;
}

.knowledge-item small + small {
  margin-top: 4px;
}

.config-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-item.role-editing {
  grid-template-columns: 1fr;
}

.role-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.secondary-small,
.danger-small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}

.danger-small {
  background: #f4e7e4;
  color: var(--red);
}

.danger-small:disabled {
  opacity: 0.5;
  cursor: default;
}

.success-card {
  border-color: rgba(122, 90, 8, 0.35);
  background: #F8F2E9;
}

.copy-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.copy-row code {
  display: block;
  overflow-x: auto;
  background: #17211f;
  color: #e9f2ee;
  padding: 14px;
  border-radius: 6px;
}

.token-list {
  display: grid;
  gap: 12px;
}

.token-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(260px, 2fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.token-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

.token-item dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.token-item dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.token-item dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.muted {
  color: var(--muted);
}

@media (max-width: 1120px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
  }

  nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: flex-start;
  }

  .ghost-button {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 860px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    position: static;
  }

  nav {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    overflow: visible;
    gap: 8px;
  }

  nav a {
    min-height: 34px;
    padding: 0 10px;
    background: rgba(248, 244, 236, 0.72);
    color: var(--green-dark);
    font-size: 13px;
  }

  .wordmark {
    min-width: 0;
  }

  .wordmark strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ghost-button {
    min-height: 42px;
    padding: 0 14px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 42px;
    padding-bottom: 44px;
  }

  .hero-copy p:not(.eyebrow) {
    font-size: 18px;
  }

  .principles,
  .agents-grid,
  .command-panel,
  .course-grid,
  .screen-grid,
  .entry-grid,
  .agentic-definition,
  .agents-upgrade ol,
  .field-note-grid,
  .mastery-lanes,
  .dev-env-grid,
  .identity-grid,
  .core-grid,
  .newcomer-layout,
  .newcomer-after,
  .newcomer-task-grid,
  .newcomer-template-grid,
  .newcomer-tool-grid,
  .newcomer-agent-demo,
  .newcomer-standard-grid,
  .newcomer-simulation-grid,
  .newcomer-example-grid,
  .newcomer-fix-grid,
  .tbsa-summary,
  .tbsa-course-grid,
  .tool-lanes,
  .routine-grid,
  .course-layout,
  .practice-row {
    grid-template-columns: 1fr;
  }

  .entry-card.primary-entry {
    grid-column: auto;
  }

  .lesson-list li {
    grid-template-columns: 1fr;
  }

  .token-row {
    flex-direction: column;
  }

  .deploy-list li {
    grid-template-columns: 1fr;
  }

  .deploy-list li::before,
  .deploy-list li strong,
  .deploy-list li span {
    grid-column: 1;
    grid-row: auto;
  }

  .dev-env-rule {
    display: grid;
  }

  .admin-grid,
  .role-form-grid,
  .knowledge-form-grid,
  .permission-picker,
  .knowledge-role-grid,
  .config-item,
  .token-item,
  .token-item dl,
  .copy-row {
    grid-template-columns: 1fr;
  }

  .newcomer-pass-rule {
    grid-template-columns: 1fr;
  }

  .newcomer-tool-rule {
    grid-template-columns: 1fr;
  }

  .newcomer-build-log article {
    grid-template-columns: 1fr;
  }

  .newcomer-build-log article strong {
    width: fit-content;
    min-width: 58px;
  }
}

@media (max-width: 520px) {
  .login-panel,
  .detailed-card,
  .admin-card {
    padding: 20px;
    border-radius: 14px;
  }

  .newcomer-task-grid article,
  .newcomer-template-grid article,
  .newcomer-tool-grid article,
  .newcomer-agent-demo article,
  .newcomer-standard-grid article,
  .newcomer-simulation-grid article,
  .newcomer-example-grid article,
  .newcomer-fix-grid article,
  .newcomer-build-log article {
    padding: 20px;
  }

  .newcomer-task-grid dl div,
  .newcomer-example-grid dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .wordmark {
    min-width: 0;
  }

  h1 {
    font-size: clamp(30px, 10vw, 42px);
  }

  .hero-copy p:not(.eyebrow),
  .section-head p:not(.eyebrow) {
    font-size: 16px;
  }

  .stage-pill,
  .course-id {
    font-size: 12px;
  }

  .course-top {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===== 影片課程專區 ===== */
.video-course-section { padding-block: 40px 64px; }
.vc-meta {
  display: inline-block; margin-bottom: 22px; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--green-dark); font-size: 13px; font-weight: 700; background: var(--cloud);
}
.vc-loading, .vc-empty { color: var(--muted); padding: 28px 0; }
.vc-level { margin-bottom: 40px; }
.vc-level-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.vc-level-id {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 14px; color: #fff; font-weight: 800; font-size: 17px;
  background: var(--brand-grad); box-shadow: 0 8px 20px rgba(162,0,24,.3);
}
.vc-level-head h3 { margin: 0; font-size: 20px; }
.vc-level-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.vc-level-theme {
  margin-left: auto; flex: none; padding: 4px 12px; border-radius: 999px;
  background: #F5F0E6; color: var(--green-dark); font-weight: 700; font-size: 13px;
}
.vc-lessons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px;
}
.vc-lesson {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(31,27,22,.07); transition: transform .15s ease, box-shadow .15s ease;
}
.vc-lesson:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.vc-player { aspect-ratio: 16 / 9; background: #1F1B16; }
.vc-player video { width: 100%; height: 100%; display: block; object-fit: cover; }
.vc-play {
  width: 100%; height: 100%; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1F4A72, #35405a);
  transition: background .15s ease;
}
.vc-play:hover { background: linear-gradient(135deg, #25567f, #3d4a68); }
.vc-play-icon {
  width: 62px; height: 62px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: #1F4A72; font-size: 20px; padding-left: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.vc-novideo {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: rgba(255,255,255,.6); font-size: 13px;
  background: linear-gradient(135deg, #1F4A72, #35405a);
}
.vc-lesson.is-pending .vc-player { opacity: .85; }
.vc-info { padding: 14px 16px 18px; }
.vc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vc-id { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--blue); }
.vc-dur {
  margin-left: auto; font-size: 12px; color: var(--muted);
  background: var(--cloud); padding: 1px 8px; border-radius: 999px;
}
.vc-info h4 { margin: 0 0 6px; font-size: 16px; }
/* 貼在播放器正下方的全寬備援列，跟影片視覺上是一體、不是埋在資訊區文字堆裡 */
.vc-fallback {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; background: var(--cloud); border-bottom: 1px solid var(--mist);
}
.vc-fallback-tag { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.vc-fallback-link {
  font-size: 12.5px; font-weight: 800; color: #fff;
  background: var(--blue); padding: 5px 14px;
  border-radius: 999px; text-decoration: none; letter-spacing: .02em;
  transition: background .15s ease, transform .15s ease;
}
.vc-fallback-link:hover { background: #163a5c; transform: translateY(-1px); }
/* 影片沒上傳（is-pending）時，備援教材是唯一內容，加深底色讓它更醒目 */
.vc-lesson.is-pending .vc-fallback { background: #E2ECF1; }
.vc-hook { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--green-dark); }
.vc-summary { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.vc-practice {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--cloud); border: 1px solid var(--mist);
}
.vc-practice-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: #b98a16; background: #f6eedf; padding: 2px 9px; border-radius: 999px; margin-bottom: 8px;
}
.vc-skill { padding-top: 6px; }
.vc-skill + .vc-skill { margin-top: 10px; border-top: 1px dashed var(--mist); padding-top: 10px; }
.vc-skill-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-skill-head strong { font-size: 14px; color: var(--green-dark); }
.vc-skill-head code {
  font-size: 12px; background: #221D16; color: #F3EAD3; padding: 1px 7px; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.vc-skill-cat { font-size: 11px; color: var(--blue); background: #fff; border: 1px solid var(--mist); padding: 1px 7px; border-radius: 999px; }
.vc-skill-purpose { margin: 6px 0 4px; font-size: 12.5px; color: var(--ink); line-height: 1.55; }
.vc-skill-line { margin: 3px 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.vc-skill-line b { color: var(--green-dark); }
@media (max-width: 560px) {
  .vc-level-head { flex-wrap: wrap; }
  .vc-level-theme { margin-left: 0; }
}

/* ===== AI 作業系統概念區 ===== */
.aios-section { padding-block: 40px 64px; }
.aios-block { margin-top: 34px; }
.aios-h {
  font-size: 16px; margin: 0 0 16px; color: var(--green-dark);
  padding-left: 12px; border-left: 4px solid var(--teal);
}
.aios-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px;
}
.aios-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.aios-compare {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px;
}
.aios-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 18px 16px; box-shadow: 0 10px 28px rgba(31, 27, 22, .06);
}
.aios-card h4 { margin: 8px 0 6px; font-size: 17px; }
.aios-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.aios-tag {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--blue); background: var(--cloud); padding: 2px 10px; border-radius: 999px;
}
.aios-card.is-old { border-top: 4px solid var(--line); }
.aios-card.is-old .aios-tag { color: var(--muted); background: #eef0f3; }
.aios-card.is-new { border-top: 4px solid var(--teal); }
.aios-card.is-barrier { border-top: 4px solid var(--gold); }
.aios-card.is-barrier .aios-tag { color: #b98a16; background: #f6eedf; }
.aios-note { margin: 12px 0 0; font-size: 13px; color: var(--green-dark); font-weight: 600; }
.aios-flow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 22px; border-radius: 16px; background: var(--cloud); border: 1px solid var(--mist);
}
.aios-step {
  padding: 10px 18px; border-radius: 12px; font-weight: 700; color: #fff;
  background: var(--brand-grad); box-shadow: 0 8px 20px rgba(162, 0, 24, .28);
}
.aios-arrow { color: var(--blue); font-weight: 800; font-size: 18px; }
.aios-pitch {
  margin-top: 34px; padding: 26px 28px; border-radius: 18px; color: #fff;
  background: var(--brand-grad); box-shadow: var(--shadow);
}
.aios-pitch p { margin: 0; font-size: 16px; line-height: 1.7; }
.aios-pitch strong { color: var(--gold); }
.aios-pitch-sub { margin-top: 10px !important; font-size: 14px !important; color: rgba(255,255,255,.85) !important; }

.aios-layers { display: grid; gap: 8px; }
.aios-layer {
  display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 16px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: 12px; padding: 13px 16px;
}
.aios-layer p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.aios-layer-tag { font-weight: 800; font-size: 14px; color: var(--green-dark); }
.aios-layer.is-l1 { border-left-color: var(--gold); }
.aios-layer.is-l2 { border-left-color: var(--teal); }
.aios-layer.is-l3 { border-left-color: var(--blue); }
.aios-layer.is-l4 { border-left-color: var(--line); }

.aios-code {
  margin: 12px 0 0; padding: 16px 18px; border-radius: 12px; overflow-x: auto;
  background: #221D16; color: #F3EAD3; font-size: 13px; line-height: 1.75;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.aios-code code { font-family: inherit; }

.aios-list { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: aios; display: grid; gap: 12px; }
.aios-list li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: start;
}
.aios-list li::before {
  counter-increment: aios; content: counter(aios);
  grid-column: 1; grid-row: 1 / span 2;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 14px;
}
.aios-list li strong { grid-column: 2; grid-row: 1; }
.aios-list li span { grid-column: 2; grid-row: 2; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.aios-list li code, .aios-layer code {
  background: #eef0f3; padding: 1px 6px; border-radius: 5px; font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (max-width: 560px) {
  .aios-flow { flex-direction: column; align-items: stretch; }
  .aios-arrow { transform: rotate(90deg); text-align: center; }
  .aios-layer { grid-template-columns: 1fr; gap: 4px; }
}

/* Admin 監控儀表板 */
.monitor-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.monitor-table th, .monitor-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.monitor-table th { color: var(--muted, #9aa); font-weight: 600; }
.token-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ── 自助申請體驗碼 ── */
.apply-block { margin-top: 18px; }
.apply-toggle {
  width: 100%;
  padding: 12px 16px;
  background: var(--cloud);
  color: var(--green-dark);
  border: 1px dashed var(--green);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.apply-toggle:hover { background: #F3ECDD; }
.apply-form { margin-top: 12px; display: grid; gap: 10px; }
.apply-form[hidden], .apply-success[hidden] { display: none; }
.apply-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.apply-form input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  background: var(--panel);
}
.apply-form input:focus { outline: 2px solid var(--green); border-color: var(--green); }
.apply-form button[type="submit"] {
  padding: 12px 16px;
  background: var(--brand-grad);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.apply-form button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.apply-success {
  margin-top: 14px;
  padding: 16px;
  background: var(--cloud);
  border: 1px solid var(--gold);
  border-radius: 12px;
  display: grid;
  gap: 8px;
}
.apply-success code {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--green-dark);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  word-break: break-all;
  user-select: all;
}
.apply-success p { margin: 0; font-size: 13px; color: var(--muted); }

/* ── 課程頁最近更新公告 ── */
.course-changelog {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--cloud);
  border: 1px solid var(--gold);
  border-radius: 12px;
  display: grid;
  gap: 8px;
}
.course-changelog .cc-title { color: var(--green-dark); font-size: 14px; }
.course-changelog .cc-item { display: flex; gap: 10px; font-size: 13px; align-items: baseline; }
.course-changelog .cc-date { color: var(--gold); font-weight: 700; white-space: nowrap; }
.course-changelog .cc-text { color: var(--muted); }
.course-changelog .cc-text b { color: var(--ink); }