/* DeutschUM supplied Stitch screens — shared public and panel presentation layer. */

body.stitch-screens,
body.panel-body,
body.classroom-body {
  --du-bg: #f7f6f2;
  --du-ink: #101828;
  --du-muted: #667085;
  --du-line: #e4e7ec;
  --du-red: #c91610;
  --du-red-dark: #a90e09;
  --du-red-soft: #fdecea;
  --du-blue-soft: #f0f3ff;
  --du-dark: #15171c;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--du-ink);
}

body.stitch-screens { overflow-x: hidden; background: var(--du-bg); }
.stitch-screens main { padding-top: 0 !important; }
.stitch-screens h1,
.stitch-screens h2,
.stitch-screens h3,
.panel-body h1,
.panel-body h2,
.panel-body h3 { font-family: Manrope, Inter, sans-serif; letter-spacing: -.035em; }

.stitch-screens .wrap { width: min(1280px, calc(100% - 64px)); max-width: 1280px; margin-inline: auto; }

/* Shared header mirrors the supplied public screen system. */
.stitch-screens .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 80px !important;
  border-bottom: 1px solid var(--du-line);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 9px rgba(16, 24, 40, .035);
  backdrop-filter: blur(18px);
}

.stitch-screens .site-header .nav-wrap { display: flex; height: 80px !important; align-items: center; gap: 28px; }
.stitch-screens .site-header .brand { flex: 0 0 auto; color: #000; font-family: Manrope, sans-serif; font-size: clamp(25px, 2.2vw, 33px); font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.stitch-screens .site-header .brand-mark { display: none; }
.stitch-screens .site-nav { display: flex; flex: 1 1 auto; height: 80px; align-items: stretch; justify-content: center; gap: 5px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.stitch-screens .site-nav a { display: inline-flex; align-items: center; padding: 0 11px; border: 0; border-radius: 0; color: var(--du-ink); background: transparent; font-size: 13px; font-weight: 600; text-decoration: none; }
.stitch-screens .site-nav a:hover,
.stitch-screens .site-nav a.active { color: var(--du-red); background: var(--du-red-soft); }
.stitch-screens .nav-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; }
.stitch-screens .nav-actions .btn-ghost { padding: 10px 0; color: var(--du-ink); font-size: 14px; font-weight: 700; }
.stitch-screens .nav-actions .btn { min-height: 44px; padding: 11px 20px; border: 1px solid #000; border-radius: 8px; background: #000; color: #fff; box-shadow: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.stitch-screens .menu-btn { display: none; }

/* Public screen hero and reusable surface system. */
.stitch-screens .screen-main {
  height: auto !important;
  min-height: 70vh;
  padding: 0 !important;
  border-radius: 0 !important;
  background: var(--du-bg);
}
.screen-hero {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  padding: 104px 0 84px;
  border-bottom: 1px solid var(--du-line);
}
.screen-hero::after { content: ""; position: absolute; inset: auto -90px -160px auto; width: 420px; height: 420px; border-radius: 50%; background: rgba(201, 22, 16, .09); filter: blur(70px); }
.screen-hero .wrap { position: relative; z-index: 1; }
.screen-hero span { display: inline-flex; margin-bottom: 20px; padding: 7px 11px; border: 1px solid #333943; border-radius: 999px; background: var(--du-dark); color: #fff; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.screen-hero h1 { max-width: 900px; margin: 0; font-size: clamp(47px, 5vw, 76px); font-weight: 800; line-height: 1.04; }
.screen-hero p { max-width: 760px; margin: 25px 0 0; color: var(--du-muted); font-size: 18px; line-height: 1.7; }
.screen-section { padding: 92px 0; }
.screen-section + .screen-section { border-top: 1px solid var(--du-line); }
.screen-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.screen-toolbar h2 { margin: 0 0 8px; font-size: 33px; }
.screen-toolbar p { margin: 0; color: var(--du-muted); }
.screen-toolbar > a { padding: 11px 17px; border: 1px solid var(--du-line); border-radius: 9px; background: #fff; color: var(--du-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.screen-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.screen-card-grid > article,
.screen-bento > article,
.contact-cards > article,
.teacher-profile-layout > article,
.teacher-profile-layout > aside > article,
.class-detail-layout > article,
.class-detail-layout > aside,
.result-layout > article,
.reset-card,
.policy-layout > article,
.policy-layout > aside {
  border: 1px solid var(--du-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .055);
}
.screen-card-grid > article,
.screen-bento > article { padding: 28px; }
.screen-card-grid > article:hover,
.screen-bento > article:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(16, 24, 40, .1); }
.screen-card-grid > article,
.screen-bento > article { transition: transform .24s ease, box-shadow .24s ease; }
.screen-card-grid article > span,
.screen-bento article > span,
.contact-cards article > span,
.teacher-profile-main > span,
.teacher-profile-layout aside article > span,
.class-detail-main > span,
.class-detail-layout aside > span,
.reset-card > span { color: var(--du-red); font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.screen-card-grid h2,
.screen-card-grid h3,
.screen-bento h2,
.screen-bento h3 { margin: 18px 0 10px; }
.screen-card-grid p,
.screen-bento p { color: var(--du-muted); line-height: 1.65; }
.screen-dark-card { border-color: #363a43 !important; background-color: var(--du-dark) !important; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 20px 20px; color: #fff !important; }
.screen-dark-card p { color: #b9c0ca !important; }
.screen-dark-card > span { color: #f97066 !important; }
.screen-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(220px, auto); gap: 22px; }
.screen-bento .wide { grid-column: span 2; }
.screen-bento .tint { background: var(--du-blue-soft); }
.screen-empty { grid-column: 1 / -1; max-width: 760px; margin: 0 auto; padding: 50px !important; text-align: center; }
.screen-empty h2 { margin: 15px 0; font-size: 32px; }
.screen-empty p { margin: 0 auto 25px; color: var(--du-muted); line-height: 1.65; }
.narrow-screen { max-width: 760px !important; }

/* Public catalog and detail screens. */
.class-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screen-class-card { position: relative; min-height: 370px; }
.screen-class-card header { display: flex; align-items: center; justify-content: space-between; }
.screen-class-card header span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: var(--du-red-soft); color: var(--du-red); font-family: "JetBrains Mono", monospace; font-weight: 700; }
.screen-class-card header small { padding: 6px 9px; border-radius: 999px; background: var(--du-blue-soft); color: var(--du-muted); font-size: 11px; font-weight: 700; }
.screen-class-card h2 { margin: 25px 0 8px; font-size: 27px; }
.screen-class-card > p { margin: 0; color: var(--du-muted); }
.screen-class-card > div { display: grid; grid-template-columns: repeat(3, 1fr); margin: 30px 0; border-top: 1px solid var(--du-line); border-bottom: 1px solid var(--du-line); }
.screen-class-card > div span { display: grid; gap: 5px; padding: 17px 10px; border-right: 1px solid var(--du-line); color: var(--du-muted); font-size: 11px; }
.screen-class-card > div span:last-child { border-right: 0; }
.screen-class-card > div b { color: var(--du-ink); font-size: 13px; }
.screen-class-card .btn { width: 100%; }

.teacher-profile-layout,
.class-detail-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr); gap: 24px; }
.teacher-profile-main,
.class-detail-main { padding: 42px; }
.teacher-profile-main .avatar,
.class-detail-layout aside .avatar { display: grid; width: 86px; height: 86px; margin-bottom: 25px; place-items: center; border-radius: 22px; background: var(--du-red); color: #fff; font-family: Manrope, sans-serif; font-size: 27px; font-weight: 800; }
.teacher-profile-main h2,
.class-detail-main h2 { margin: 15px 0 12px; font-size: 42px; }
.teacher-profile-main > p,
.class-detail-main > p { max-width: 760px; color: var(--du-muted); font-size: 17px; line-height: 1.7; }
.profile-metrics,
.class-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; border-top: 1px solid var(--du-line); border-bottom: 1px solid var(--du-line); }
.profile-metrics span,
.class-meta-grid span { display: grid; gap: 6px; padding: 20px; border-right: 1px solid var(--du-line); color: var(--du-muted); font-size: 11px; }
.profile-metrics span:last-child,
.class-meta-grid span:nth-child(3n) { border-right: 0; }
.profile-metrics b,
.class-meta-grid b { color: var(--du-ink); font-size: 18px; }
.teacher-profile-layout > aside { display: grid; gap: 18px; }
.teacher-profile-layout > aside > article,
.class-detail-layout > aside { padding: 27px; }
.teacher-profile-layout aside p,
.class-detail-layout aside p { color: var(--du-muted); line-height: 1.6; }
.teacher-schedule { display: grid; gap: 12px; }
.teacher-schedule > a { display: grid; grid-template-columns: 42px 1fr; gap: 2px 12px; padding: 14px; border: 1px solid var(--du-line); border-radius: 13px; color: var(--du-ink); text-decoration: none; }
.teacher-schedule > a span { grid-row: 1 / 3; display: grid; place-items: center; border-radius: 9px; background: var(--du-red-soft); color: var(--du-red); font-family: "JetBrains Mono", monospace; font-weight: 700; }
.teacher-schedule > a small { color: var(--du-muted); }
.class-detail-main .ht-btn { margin-top: 28px; }
.class-detail-layout aside h3 { margin: 8px 0; font-size: 24px; }
.class-meta-grid { grid-template-columns: repeat(4, 1fr); }

/* About, contact, career, help and editorial screens. */
.contact-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
.contact-layout > .screen-dark-card { display: flex; min-height: 520px; flex-direction: column; justify-content: end; padding: 40px; border-radius: 24px; }
.contact-layout > .screen-dark-card h2 { margin: 18px 0; font-size: 42px; line-height: 1.12; }
.contact-layout > .screen-dark-card .ht-btn { align-self: flex-start; margin-top: 18px; }
.contact-cards { display: grid; gap: 18px; }
.contact-cards > article { padding: 27px; }
.contact-cards h3 { margin: 13px 0 7px; font-size: 21px; }
.contact-cards p { color: var(--du-muted); }
.contact-cards a { color: var(--du-red); font-weight: 700; text-decoration: none; }
.career-bento .screen-dark-card { min-height: 400px; }
.career-bento .ht-btn { margin-top: 20px; }
.help-search { margin-bottom: 30px; padding: 25px; border: 1px solid var(--du-line); border-radius: 18px; background: #fff; }
.help-search label { display: block; margin-bottom: 9px; color: var(--du-muted); font-size: 12px; font-weight: 700; }
.help-search input { width: 100%; min-height: 58px; border: 1px solid var(--du-line); border-radius: 12px; background: var(--du-blue-soft); padding: 0 18px; font: inherit; }
.help-grid { grid-template-columns: repeat(4, 1fr); }
.screen-faq { display: grid; gap: 12px; margin-top: 35px; }
.screen-faq details { border: 1px solid var(--du-line); border-radius: 15px; background: #fff; padding: 20px 22px; }
.screen-faq summary { cursor: pointer; font-family: Manrope, sans-serif; font-size: 18px; font-weight: 700; }
.screen-faq p { color: var(--du-muted); line-height: 1.65; }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.blog-grid .featured { grid-row: span 2; min-height: 520px; display: flex; flex-direction: column; justify-content: end; }
.blog-grid .featured h2 { font-size: 34px; }

/* Mobile app reference. */
.mobile-showcase { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 80px; }
.mobile-showcase > article > span { color: var(--du-red); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.mobile-showcase > article h2 { margin: 20px 0; font-size: clamp(43px, 5vw, 68px); line-height: 1.05; }
.mobile-showcase > article p { color: var(--du-muted); font-size: 17px; line-height: 1.7; }
.mobile-showcase > article > div { display: flex; gap: 12px; margin-top: 30px; }
.phone-frame { position: relative; max-width: 340px; min-height: 620px; margin: 0 auto; padding: 62px 24px 25px; border: 10px solid #15171c; border-radius: 48px; background: #fff; box-shadow: 0 34px 65px rgba(16, 24, 40, .2); }
.phone-speaker { position: absolute; top: 19px; left: 50%; width: 88px; height: 20px; border-radius: 999px; background: #15171c; transform: translateX(-50%); }
.phone-frame > strong { display: block; font: 800 27px Manrope, sans-serif; }
.phone-frame > span { display: block; margin: 7px 0 28px; color: var(--du-muted); }
.phone-frame > article { display: grid; gap: 6px; margin-bottom: 14px; padding: 20px; border: 1px solid var(--du-line); border-radius: 17px; background: var(--du-blue-soft); }
.phone-frame > article:nth-of-type(2) { background: var(--du-red-soft); }
.phone-frame small { color: var(--du-muted); }

/* Reset, policy, result and 404. */
.reset-card { padding: 46px; text-align: center; }
.reset-card h2 { margin: 17px 0 10px; font-size: 38px; }
.reset-card p { margin: 0 auto 28px; color: var(--du-muted); line-height: 1.65; }
.reset-card > a:last-child { display: block; margin-top: 22px; color: var(--du-muted); font-weight: 700; text-decoration: none; }
.policy-layout { display: grid; grid-template-columns: 280px 1fr; align-items: start; gap: 24px; }
.policy-layout > aside { position: sticky; top: 105px; display: grid; gap: 8px; padding: 23px; }
.policy-layout > aside span { margin-bottom: 8px; color: var(--du-muted); font: 700 10px "JetBrains Mono", monospace; letter-spacing: .1em; }
.policy-layout > aside a { padding: 12px; border-radius: 9px; color: var(--du-ink); font-weight: 650; text-decoration: none; }
.policy-layout > aside a:hover { background: var(--du-red-soft); color: var(--du-red); }
.policy-layout > article { padding: 42px; }
.policy-state { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: var(--du-red-soft); color: var(--du-red); font: 700 10px "JetBrains Mono", monospace; }
.policy-state.ready { background: #ecfdf3; color: #027a48; }
.policy-layout > article h2 { margin: 20px 0; font-size: 41px; }
.policy-layout > article > p { color: var(--du-muted); font-size: 17px; line-height: 1.75; }
.policy-block { margin-top: 22px; padding: 23px; border-left: 3px solid var(--du-red); background: #fafafa; }
.policy-block h3 { margin: 0 0 8px; }
.policy-block p { margin: 0; color: var(--du-muted); line-height: 1.65; }
.result-layout { display: grid; grid-template-columns: 1.5fr .75fr .75fr; gap: 22px; }
.result-layout > article { padding: 30px; }
.result-score { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.result-score > strong { color: var(--du-red); font: 800 110px/1 Manrope, sans-serif; }
.result-score > small { color: var(--du-muted); }
.result-score h2 { margin: 20px 0 6px; }
.result-layout > article:not(.result-score) > span { color: var(--du-muted); font: 700 10px "JetBrains Mono", monospace; }
.result-layout > article:not(.result-score) > b { display: block; margin-top: 20px; font: 800 48px Manrope, sans-serif; }
.result-layout .wide { grid-column: 2 / 4; }
.not-found-screen { display: grid; min-height: 700px; place-items: center; padding: 80px 20px; text-align: center; }
.not-found-screen section { max-width: 720px; }
.not-found-screen section > span { color: var(--du-red); font: 700 11px "JetBrains Mono", monospace; letter-spacing: .15em; }
.not-found-screen section > strong { display: block; margin: 15px 0 -25px; color: rgba(201, 22, 16, .09); font: 800 clamp(150px, 25vw, 290px)/.9 Manrope, sans-serif; }
.not-found-screen h1 { position: relative; margin: 0; font-size: 52px; }
.not-found-screen p { color: var(--du-muted); font-size: 17px; }
.not-found-screen section > div { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }

/* Existing public teacher, cafe, exam, price and checkout markup. */
.stitch-screens .subhero { position: relative; min-height: 360px; padding: 95px 0 74px; border-bottom: 1px solid var(--du-line); background-color: var(--du-bg); background-image: linear-gradient(rgba(16,24,40,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(16,24,40,.04) 1px, transparent 1px); background-size: 40px 40px; }
.stitch-screens .subhero span { color: var(--du-red); font: 700 11px "JetBrains Mono", monospace; letter-spacing: .12em; }
.stitch-screens .subhero h1 { max-width: 900px; margin: 16px 0 12px; font-size: clamp(48px, 5vw, 74px); line-height: 1.05; }
.stitch-screens .subhero p { max-width: 760px; color: var(--du-muted); font-size: 17px; line-height: 1.7; }
.stitch-screens .section { padding: 88px 0; }
.stitch-screens .section-head h2 { font-size: 34px; }
.stitch-screens .section-head p { color: var(--du-muted); }
.stitch-screens .teacher-grid,
.stitch-screens .room-grid,
.stitch-screens .feature-grid,
.stitch-screens .pricing-grid { gap: 22px; }
.stitch-screens .teacher-card,
.stitch-screens .room-card,
.stitch-screens .feature-card,
.stitch-screens .price-card,
.stitch-screens .checkout-grid > .card { border: 1px solid var(--du-line); border-radius: 22px; background: #fff; box-shadow: 0 12px 28px rgba(16,24,40,.055); }
.stitch-screens .teacher-card,
.stitch-screens .room-card,
.stitch-screens .feature-card,
.stitch-screens .price-card { padding: 29px; }
.stitch-screens .teacher-card .avatar { display: grid; width: 72px; height: 72px; place-items: center; border-radius: 19px; background: var(--du-red); color: #fff; font: 800 22px Manrope, sans-serif; }
.stitch-screens .teacher-card h3,
.stitch-screens .room-card h3,
.stitch-screens .feature-card h3,
.stitch-screens .price-card h3 { margin-top: 22px; font-size: 24px; }
.stitch-screens .teacher-card p,
.stitch-screens .room-card p,
.stitch-screens .feature-card p,
.stitch-screens .price-card p { color: var(--du-muted); line-height: 1.6; }
.stitch-screens .price-card:nth-child(2) { border-color: var(--du-red); box-shadow: 0 16px 35px rgba(201,22,16,.12); }
.stitch-screens .price-card small { color: var(--du-red); font-family: "JetBrains Mono", monospace; font-weight: 700; }
.stitch-screens .price-card p b { color: var(--du-ink); font: 800 37px Manrope, sans-serif; }
.stitch-screens .checkout-grid { gap: 22px; }
.stitch-screens .checkout-grid > .card { padding: 30px; }

/* Supplied registration/auth direction. */
.stitch-screens.screen-auth { background: #f7f6f2; }
.stitch-screens.screen-auth .auth-page { width: min(1280px, calc(100% - 64px)); min-height: 760px; margin: 42px auto 70px; overflow: hidden; border: 1px solid var(--du-line); border-radius: 26px; background: #fff; box-shadow: 0 20px 45px rgba(16,24,40,.1); }
.stitch-screens.screen-auth .auth-brand { background-color: var(--du-dark); background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(145deg, rgba(201,22,16,.18), transparent 50%); background-size: 22px 22px, 100% 100%; }
.stitch-screens.screen-auth .auth-brand h1 { font-size: clamp(39px, 4vw, 59px); line-height: 1.06; }
.stitch-screens.screen-auth .auth-form { background: #fff; }
.stitch-screens.screen-auth .form-shell { border: 1px solid var(--du-line); border-radius: 20px; box-shadow: 0 15px 32px rgba(16,24,40,.07); }
.stitch-screens.screen-auth input,
.stitch-screens.screen-auth select { min-height: 52px; border-color: var(--du-line); border-radius: 11px; background: #fff; }

/* Every student/teacher/admin inner panel shares the supplied bento language. */
body.panel-body { overflow: hidden; background: #f6f7fb; }
.panel-body .panel-app { background-color: #f6f7fb; background-image: linear-gradient(rgba(16,24,40,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(16,24,40,.025) 1px, transparent 1px); background-size: 48px 48px; }
.panel-body .panel-top { border-bottom: 1px solid var(--du-line); background: rgba(255,255,255,.96); backdrop-filter: blur(15px); }
.panel-body .panel-top .brand { color: #000; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.045em; }
.panel-body .panel-top .brand-mark { display: none; }
.panel-body .side { border-right: 1px solid var(--du-line); background: rgba(255,255,255,.97); }
.panel-body .side .ni { min-height: 48px; margin: 2px 12px; padding: 0 14px; border: 0; border-radius: 12px; color: var(--du-muted); background: transparent; font-weight: 650; }
.panel-body .side .ni:hover { color: var(--du-ink); background: #f2f4f7; }
.panel-body .side .ni.on { color: #fff; background: var(--du-red); box-shadow: 0 10px 22px rgba(201,22,16,.22); }
.panel-body .side .ng { margin: 24px 25px 8px; color: #98a2b3; font: 700 10px "JetBrains Mono", monospace; letter-spacing: .12em; }
.panel-body .page:not(.stitch-dashboard) { max-width: 1420px; margin: 0 auto; padding: 42px 44px 70px; }
.panel-body .page-head { margin-bottom: 30px; padding-left: 20px; border-left: 3px solid var(--du-red); }
.panel-body .page-head h1 { margin: 0; font-size: clamp(36px, 3.5vw, 52px); line-height: 1.05; }
.panel-body .page-head p { margin: 9px 0 0; color: var(--du-muted); font-size: 15px; }
.panel-body .card,
.panel-body .stat-card,
.panel-body .new-class-form > article { border: 1px solid var(--du-line); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 10px 25px rgba(16,24,40,.055); }
.panel-body .card { padding: 25px; }
.panel-body .card h3 { margin-top: 0; font-size: 21px; }
.panel-body .grid-2 { gap: 22px; }
.panel-body .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.panel-body .stat-card { min-height: 126px; padding: 22px; }
.panel-body .stat-card > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: var(--du-red-soft); color: var(--du-red); }
.panel-body .stat-card b { font: 800 29px Manrope, sans-serif; }
.panel-body .stat-card small { color: var(--du-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.panel-body .toolbar { padding: 12px; border: 1px solid var(--du-line); border-radius: 13px; background: #f8fafc; }
.panel-body input,
.panel-body select,
.panel-body textarea { border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; font: inherit; }
.panel-body input,
.panel-body select { min-height: 46px; }
.panel-body input:focus,
.panel-body select:focus,
.panel-body textarea:focus { border-color: var(--du-red); box-shadow: 0 0 0 4px rgba(201,22,16,.1); outline: 0; }
.panel-body table { border-collapse: separate; border-spacing: 0; }
.panel-body thead th { padding: 13px 15px; border-bottom: 1px solid var(--du-line); background: #f8fafc; color: #667085; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.panel-body tbody td { padding: 15px; border-bottom: 1px solid #eef0f3; }
.panel-body tbody tr:hover td { background: #fcfcfd; }
.panel-body .btn.btn-red { border-color: var(--du-red); background: var(--du-red); box-shadow: 0 9px 18px rgba(201,22,16,.18); }
.panel-body .btn.btn-red:hover { background: var(--du-red-dark); }
.panel-body .soft { border: 1px solid var(--du-line); border-radius: 9px; background: #fff; }
.panel-body .status-list p { border-bottom: 1px solid var(--du-line); }
.panel-body .page[id*="earn"],
.panel-body .page[id*="stats"],
.panel-body .page[id*="performance"] { background-image: radial-gradient(rgba(201,22,16,.055) 1px, transparent 1px); background-size: 20px 20px; }
.panel-body #p-materials .grid-2 > .card:first-child,
.panel-body #p-homework .grid-2 > .card:first-child,
.panel-body #p-newclass .new-class-form > article:first-child { border-top: 3px solid var(--du-red); }
.panel-body #p-credits .provider-switch { margin-bottom: 22px; padding: 13px; border: 1px solid var(--du-line); border-radius: 13px; background: #fff; }
.panel-body #p-support .grid-2 > article:first-child,
.panel-body #p-account .grid-2 > article:first-child,
.panel-body #p-profile .grid-2 > article:first-child { background-image: linear-gradient(145deg, rgba(253,236,234,.7), transparent 45%); }
.panel-body .profile-head .avatar { background: var(--du-red); color: #fff; }
.panel-body .empty { color: var(--du-muted); }
.panel-body .message-feed { display: grid; gap: 14px; }
.panel-body .message-item { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }
.panel-body .message-item .message-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: var(--du-red-soft); color: var(--du-red); font-size: 20px; }
.panel-body .message-item .card-head { margin-bottom: 6px; }
.panel-body .message-item h3 { margin: 0; font-size: 17px; }
.panel-body .message-item p { margin: 0 0 9px; color: var(--du-muted); line-height: 1.65; }
.panel-body .message-item small { color: #98a2b3; font-family: "JetBrains Mono", monospace; }

/* Live classroom screens use the supplied dark professional studio treatment. */
body.classroom-body { background: #0d1016; }
.classroom-body .classroom-shell,
.classroom-body .live-shell { background: #0d1016; }
.classroom-body .classroom-top,
.classroom-body .live-topbar { border-bottom: 1px solid #303641; background: #151921; color: #fff; }
.classroom-body .classroom-main,
.classroom-body .live-stage { background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; }
.classroom-body .classroom-side,
.classroom-body .live-sidebar { border-left: 1px solid #303641; background: #171b23; color: #fff; }

.stitch-screens .footer { padding: 64px 0 24px; border-top: 1px solid var(--du-line); background: var(--du-bg); }
.stitch-screens .footer-grid { gap: 58px; }
.stitch-screens .footer .brand { color: #000; font: 800 28px Manrope, sans-serif; letter-spacing: -.045em; }
.stitch-screens .footer .brand-mark { display: none; }
.stitch-screens .footer p,
.stitch-screens .footer a,
.stitch-screens .footer-bottom { color: var(--du-muted); }

@media (max-width: 1120px) {
  .stitch-screens .wrap { width: min(100% - 40px, 1040px); }
  .stitch-screens .site-nav { gap: 0; }
  .stitch-screens .site-nav a { padding-inline: 7px; font-size: 12px; }
  .stitch-screens .nav-actions .btn-ghost { display: none; }
  .screen-card-grid,
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-profile-layout,
  .class-detail-layout { grid-template-columns: 1.35fr .8fr; }
  .panel-body .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .stitch-screens .site-nav,
  .stitch-screens .nav-actions .btn-ghost { display: none; }
  .stitch-screens .nav-actions { margin-left: auto; }
  .stitch-screens .menu-btn { display: flex; order: 3; }
  .stitch-screens .site-nav.open { position: absolute; top: 80px; left: 20px; right: 20px; display: grid; height: auto; padding: 12px; border: 1px solid var(--du-line); border-radius: 15px; background: #fff; box-shadow: 0 18px 35px rgba(16,24,40,.15); }
  .stitch-screens .site-nav.open a { min-height: 46px; border-radius: 9px; }
  .screen-bento,
  .contact-layout,
  .mobile-showcase,
  .teacher-profile-layout,
  .class-detail-layout,
  .policy-layout { grid-template-columns: 1fr; }
  .screen-bento .wide { grid-column: auto; }
  .screen-bento .screen-dark-card { min-height: 360px; }
  .policy-layout > aside { position: static; }
  .result-layout { grid-template-columns: 1fr 1fr; }
  .result-score { grid-column: span 2; grid-row: auto; }
  .result-layout .wide { grid-column: span 2; }
  .stitch-screens.screen-auth .auth-page { width: calc(100% - 40px); }
  .panel-body .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .stitch-screens .wrap { width: calc(100% - 30px); }
  .stitch-screens .site-header,
  .stitch-screens .site-header .nav-wrap { height: 72px !important; }
  .stitch-screens .site-header .nav-wrap { gap: 8px; }
  .stitch-screens .site-header .brand { max-width: none; overflow: visible; font-size: 22px !important; white-space: nowrap; }
  .stitch-screens .site-header .brand > span:last-child { max-width: none !important; overflow: visible; text-overflow: clip; }
  .stitch-screens.screen-auth .auth-brand .brand > span:last-child { max-width: none !important; overflow: visible; text-overflow: clip; }
  .stitch-screens .nav-actions .btn { min-height: 42px; padding: 10px 13px; font-size: 11px; }
  .stitch-screens .menu-btn { width: 42px; height: 42px; }
  .stitch-screens .site-nav.open { top: 72px; }
  .screen-hero { min-height: 330px; padding: 68px 0 58px; }
  .screen-hero h1 { font-size: clamp(39px, 12vw, 51px); }
  .screen-hero p { font-size: 15px; }
  .screen-section { padding: 62px 0; }
  .screen-toolbar { align-items: start; flex-direction: column; }
  .screen-card-grid,
  .class-catalog-grid,
  .help-grid,
  .blog-grid,
  .result-layout { grid-template-columns: 1fr; }
  .blog-grid .featured { grid-row: auto; min-height: 380px; }
  .screen-card-grid > article,
  .screen-bento > article { padding: 23px; }
  .screen-class-card > div,
  .profile-metrics,
  .class-meta-grid { grid-template-columns: 1fr 1fr; }
  .screen-class-card > div span:nth-child(2n),
  .profile-metrics span:nth-child(2n),
  .class-meta-grid span:nth-child(2n) { border-right: 0; }
  .teacher-profile-main,
  .class-detail-main { padding: 27px; }
  .teacher-profile-main h2,
  .class-detail-main h2 { font-size: 34px; }
  .contact-layout > .screen-dark-card { min-height: 430px; padding: 28px; }
  .contact-layout > .screen-dark-card h2 { font-size: 34px; }
  .mobile-showcase { gap: 50px; }
  .mobile-showcase > article h2 { font-size: 42px; }
  .mobile-showcase > article > div { align-items: stretch; flex-direction: column; }
  .phone-frame { min-height: 570px; }
  .policy-layout > article { padding: 27px; }
  .policy-layout > article h2 { font-size: 34px; }
  .result-score { grid-column: auto; }
  .result-layout .wide { grid-column: auto; }
  .not-found-screen { min-height: 620px; }
  .not-found-screen h1 { font-size: 40px; }
  .not-found-screen section > div { align-items: stretch; flex-direction: column; }
  .not-found-screen .ht-btn { width: 100%; }
  .stitch-screens .subhero { min-height: 330px; padding: 68px 0 58px; }
  .stitch-screens .subhero h1 { font-size: 42px; }
  .stitch-screens.screen-auth .auth-page { width: calc(100% - 24px); margin: 20px auto 45px; border-radius: 20px; }
  .panel-body .page:not(.stitch-dashboard) { padding: 26px 16px 55px; }
  .panel-body .page-head { margin-bottom: 22px; }
  .panel-body .page-head h1 { font-size: 36px; }
  .panel-body .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .panel-body .stat-card { min-height: 110px; padding: 15px; }
  .panel-body .stat-card b { font-size: 23px; }
  .panel-body .card { padding: 18px; }
  .panel-body .grid-2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .stitch-screens *,
  .panel-body * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}