body.guide-google-classroom {
  --max: 1240px;
  --classroom-green: #188038;
  --classroom-green-dark: #116b31;
  --classroom-green-soft: #e9f7ee;
  --google-blue: #1a73e8;
  --google-yellow: #f9ab00;
  --google-purple: #7c4dbe;
}

body.guide-google-classroom .wrap {
  padding-top: 28px;
  padding-bottom: 58px;
}

body.guide-google-classroom .brand img {
  width: min(360px, 100%);
}

body.guide-google-classroom .hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.84)),
    radial-gradient(circle at 88% 20%, rgba(24,128,56,.15), transparent 29%),
    radial-gradient(circle at 78% 88%, rgba(26,115,232,.10), transparent 29%),
    radial-gradient(circle at 52% 100%, rgba(249,171,0,.10), transparent 28%);
}

body.guide-google-classroom .hero::before {
  content: "";
  position: absolute;
  inset: -145px auto auto -110px;
  width: 325px;
  height: 325px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(24,128,56,.10), transparent 69%);
  pointer-events: none;
}

body.guide-google-classroom .hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  align-items: center;
}

body.guide-google-classroom h1 {
  max-width: 13ch;
  font-size: clamp(2.55rem, 4.85vw, 4.8rem);
}

body.guide-google-classroom .lead {
  max-width: 66ch;
}

.classroom-hero-card {
  min-height: 370px;
  padding: 24px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 27px;
  background:
    radial-gradient(circle at 20% 18%, rgba(24,128,56,.10), transparent 29%),
    radial-gradient(circle at 84% 82%, rgba(26,115,232,.09), transparent 30%),
    linear-gradient(155deg, #fff, #f7faf8);
  box-shadow: var(--shadow-soft);
}

.classroom-hero-card > p {
  max-width: 38ch;
  margin: 19px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .94rem;
}

.classroom-board {
  width: min(100%, 350px);
  border: 1px solid #d8e7dc;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15,23,42,.10);
  overflow: hidden;
}

.board-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--classroom-green-dark), var(--classroom-green));
}

.board-head strong,
.board-head small {
  display: block;
  color: #fff;
}

.board-head small {
  margin-top: 2px;
  color: rgba(255,255,255,.74);
}

.board-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
}

.board-avatar .icon {
  width: 25px;
  height: 25px;
}

.board-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.board-flow div {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fbfcfe;
}

.board-flow span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  margin-bottom: 7px;
  border-radius: 10px;
  background: var(--classroom-green);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
}

.board-flow strong,
.board-flow small {
  display: block;
}

.board-flow small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.3;
}

.capability-grid .card {
  min-height: 188px;
}

.interface-overview {
  margin-top: 20px;
}

.interface-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.interface-map article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.map-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
}

.map-icon.blue { color: #1d4ed8; background: #eef5ff; }
.map-icon.green { color: #0f766e; background: #ebfff7; }
.map-icon.purple { color: #7c3aed; background: #f5f0ff; }
.map-icon.orange { color: #b45309; background: #fff3e8; }

.interface-map h3 {
  margin: 1px 0 5px;
  font-size: 1.04rem;
}

.interface-map p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

body.guide-google-classroom .quick-start {
  margin-top: 24px;
}

body.guide-google-classroom .todo {
  grid-template-columns: 26px minmax(0, 1fr) auto;
}

body.guide-google-classroom .version-note {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 16px;
  border: 1px solid #d6e7da;
  border-radius: 18px;
  background: linear-gradient(135deg, #f2fbf5, #fff);
}

body.guide-google-classroom .version-note > .icon {
  width: 22px;
  height: 22px;
  margin: 2px auto 0;
  color: var(--classroom-green);
}

body.guide-google-classroom .version-note p {
  margin: 0;
  color: #40594a;
  font-size: .92rem;
}

body.guide-google-classroom .panel {
  scroll-margin-top: 130px;
}

body.guide-google-classroom .panel-head h2 {
  max-width: none;
}

.class-example,
.challenge-card {
  border-radius: 22px;
  padding: 20px;
}

.class-example {
  border: 1px solid #cde7d7;
  background: linear-gradient(145deg, #f1fff7, #fff);
}

.class-example h3 {
  margin: 8px 0;
}

.class-example p {
  margin: 0;
  color: #456157;
}

.example-label {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #dff7e8;
  color: #17633a;
  font-size: .76rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.challenge-card {
  border: 1px solid #ffdaa9;
  background: linear-gradient(145deg, #fff7ed, #fff);
}

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

.challenge-top span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8a4a10;
  font-weight: 850;
}

.challenge-top strong {
  font-size: .92rem;
}

.challenge-card ol {
  margin: 14px 0 0;
  padding-left: 1.2rem;
  color: #6b4b29;
}

.challenge-card li + li {
  margin-top: 7px;
}

.course-name-card {
  padding: 21px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--classroom-green-dark), var(--classroom-green));
  box-shadow: 0 14px 30px rgba(24,128,56,.18);
}

.course-name-card span,
.course-name-card strong,
.course-name-card small {
  display: block;
}

.course-name-card span {
  color: rgba(255,255,255,.68);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
  font-weight: 800;
}

.course-name-card strong {
  margin-top: 7px;
  color: #fff;
  font-size: 1.28rem;
}

.course-name-card small {
  margin-top: 5px;
  color: rgba(255,255,255,.76);
}

.invite-grid,
.assignment-grid,
.communication-grid {
  display: grid;
  gap: 12px;
}

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

.invite-grid article,
.assignment-grid article,
.communication-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.invite-grid article > .icon {
  width: 23px;
  height: 23px;
  color: var(--classroom-green);
}

.invite-grid h3,
.assignment-grid h3,
.communication-grid h3 {
  margin: 8px 0 4px;
  font-size: 1rem;
}

.invite-grid p,
.assignment-grid p,
.communication-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.structure-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.structure-options article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fff;
}

.structure-options span {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #166534;
  background: #ebfff7;
  font-size: .73rem;
  font-weight: 850;
}

.structure-options h3 {
  margin: 9px 0 5px;
  font-size: 1.04rem;
}

.structure-options p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

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

.assignment-icon,
.comm-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.assignment-icon.blue,
.comm-icon.blue { color: #1d4ed8; background: #eef5ff; }
.assignment-icon.green,
.comm-icon.green { color: #0f766e; background: #ebfff7; }
.assignment-icon.purple,
.comm-icon.purple { color: #7c3aed; background: #f5f0ff; }
.assignment-icon.orange,
.comm-icon.orange { color: #b45309; background: #fff3e8; }

.copy-warning {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 17px;
  border: 1px solid #f2d4a3;
  border-radius: 19px;
  background: linear-gradient(135deg, #fff9ed, #fff);
}

.copy-warning > .icon {
  width: 23px;
  height: 23px;
  margin: 2px auto 0;
  color: #b45309;
}

.copy-warning strong {
  display: block;
  color: #7c4b0b;
}

.copy-warning p {
  margin: 5px 0 0;
  color: #765c35;
  font-size: .92rem;
}

.status-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.status-flow article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.status-flow span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--classroom-green-dark);
  background: var(--classroom-green-soft);
  font-size: .78rem;
  font-weight: 850;
}

.status-flow p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.grading-flow,
.end-flow {
  display: grid;
  gap: 10px;
}

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

.grading-flow article,
.end-flow article {
  padding: 15px 12px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.grading-flow span,
.end-flow span {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  margin: 0 auto 8px;
  border-radius: 11px;
  color: #fff;
  background: var(--classroom-green);
  font-weight: 900;
}

.grading-flow strong,
.grading-flow small,
.end-flow h3 {
  display: block;
}

.grading-flow small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.3;
}

.export-card {
  padding: 18px;
  border: 1px solid #d8e4f5;
  border-radius: 20px;
  background: linear-gradient(135deg, #f4f8ff, #fff);
}

.export-card > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.export-card > div .icon {
  color: var(--google-blue);
}

.export-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .92rem;
}

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

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

.end-flow h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.end-flow p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-list details + details {
  margin-top: 0;
}

body.guide-google-classroom .footer {
  margin-top: 24px;
}

@media (max-width: 1080px) {
  .interface-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grading-flow,
  .end-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.guide-google-classroom .hero-grid {
    grid-template-columns: 1fr;
  }

  .classroom-hero-card {
    min-height: 330px;
  }

  .invite-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body.guide-google-classroom .wrap {
    padding-top: 16px;
    padding-bottom: 44px;
  }

  body.guide-google-classroom .topbar,
  body.guide-google-classroom .hero-grid {
    padding-left: 20px;
    padding-right: 20px;
  }

  body.guide-google-classroom h1 {
    font-size: clamp(2.3rem, 11.5vw, 3.5rem);
  }

  .classroom-hero-card {
    min-height: 300px;
    padding: 17px;
  }

  .board-flow,
  .interface-map,
  .structure-options,
  .assignment-grid,
  .status-flow,
  .grading-flow,
  .communication-grid,
  .end-flow {
    grid-template-columns: 1fr;
  }

  body.guide-google-classroom .todo {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  body.guide-google-classroom .todo .tag {
    grid-column: 2;
    justify-self: start;
  }
}

@media print {
  body.guide-google-classroom .panel {
    display: block !important;
  }

  .classroom-hero-card {
    min-height: 280px;
  }
}