/* 官网中的 App 界面示意，依据现有 Flutter 页面布局绘制。
 * 对照：study_page.dart、index_page.dart、home_page.dart、
 * column_detail_page.dart 与 live_course_page.dart。
 * 示例内容仅用于产品展示，不表示真实用户、课程或实时数据。
 */
.app-icon-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.app-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.phone-frame {
  background: #252625;
  border-color: #252625;
}
.phone-screen.native-app {
  --app-orange: #e37f00;
  --app-red: #e02e24;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 552px;
  min-height: 0;
  padding: 12px 0 0;
  background: #fff;
  color: #1f1f1f;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.native-status {
  display: flex;
  justify-content: space-between;
  padding: 0 21px;
  margin-bottom: 24px;
  font-size: 9px;
}
.native-status > span { font-size: 8px; }
.native-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 15px;
  min-height: 30px;
  margin-bottom: 11px;
}
.native-header > strong {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 650;
}
.native-header > span { display: flex; gap: 11px; }
.native-header .app-icon { width: 17px; height: 17px; }
.native-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 11px; }
.native-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, #f0a335, #e37f00);
  color: #fff;
  border-radius: 9px;
  padding: 17px 13px;
  min-height: 110px;
}
.native-banner > small {
  font-size: 7px;
  letter-spacing: 1px;
  opacity: .85;
}
.native-banner > strong {
  display: block;
  font-size: 18px;
  line-height: 1.55;
  margin-top: 7px;
  position: relative;
  z-index: 1;
}
.native-banner > .app-icon {
  position: absolute;
  width: 91px;
  height: 91px;
  right: -12px;
  bottom: -12px;
  opacity: .16;
  transform: rotate(-10deg);
}
.native-section { color: #666; font-size: 10px; margin: 16px 0 9px; }
.native-entry {
  border: 1px solid #eee;
  border-radius: 9px;
  padding: 11px 10px;
  margin-bottom: 9px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.native-entry-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.native-entry-icon .app-icon { width: 19px; height: 19px; }
.native-entry-icon.is-live { background: #fdebeb; color: var(--app-red); }
.native-entry-icon.is-column { background: #fdf1e3; color: var(--app-orange); }
.native-entry > div { min-width: 0; }
.native-entry strong, .native-featured strong { display: block; font-size: 11px; font-weight: 600; }
.native-entry small, .native-featured small { display: block; color: #999; font-size: 8px; margin-top: 3px; }
.native-entry > .app-icon { margin-left: auto; width: 12px; height: 12px; color: #ccc; }
.native-featured {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  min-height: 53px;
}
.native-content-cover {
  background: #fdf1e3;
  color: #e6a558;
  width: 70px;
  height: 53px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.native-content-cover .app-icon { width: 28px; height: 28px; }
.native-bottom {
  display: flex;
  justify-content: space-around;
  background: #fff;
  box-shadow: 0 -2px 9px #00000008;
  border-top: 1px solid #f4f4f4;
  padding: 9px 2px 8px;
  color: #999;
}
.native-bottom > span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.native-bottom .app-icon { width: 18px; height: 18px; }
.native-bottom small { font-size: 7px; line-height: 1.2; }
.native-bottom .is-selected { color: #e37f00; }
.native-home-indicator { background: #fff; height: 15px; flex-shrink: 0; position: relative; }
.native-home-indicator:after {
  content: "";
  position: absolute;
  height: 3px;
  width: 78px;
  background: #242424;
  border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5px;
}
.native-detail-stage {
  --app-orange: #e37f00;
  height: 420px;
  padding-bottom: 30px;
}
.native-detail-card {
  width: min(94%, 365px);
  background: #fff;
  border: 1px solid #e4e5dc;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 8px 14px 28px #43503210;
  transform: rotate(-3deg);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1f1f1f;
}
.native-detail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 39px;
  padding: 8px 15px;
  border-bottom: 1px solid #f3f3f3;
}
.native-detail-top > strong { font-size: 12px; font-weight: 650; }
.native-detail-top > span { font-size: 20px; line-height: 1; display: flex; gap: 13px; }
.native-detail-top .app-icon { width: 16px; height: 16px; }
.native-video {
  position: relative;
  overflow: hidden;
  min-height: 137px;
  padding: 31px 18px 23px;
  background: #2b3a4a;
  color: #fff;
}
.native-live-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  background: #e02e24;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 6px;
  letter-spacing: 1px;
}
.native-video > small { font-size: 7px; color: #b6c5cf; }
.native-video > strong { font-size: 20px; font-weight: 550; line-height: 1.55; display: block; margin-top: 3px; }
.native-video > .app-icon { position: absolute; right: 23px; top: 40px; width: 66px; height: 66px; color: #617987; opacity: .55; }
.native-video-label { display: block; font-size: 6px; position: absolute; right: 12px; bottom: 7px; color: #b6c5cf; }
.native-detail-body { padding: 12px 15px; }
.native-lecturer { display: flex; gap: 8px; align-items: center; }
.native-lecturer img { border-radius: 50%; }
.native-lecturer strong { display: block; font-size: 9px; }
.native-lecturer small { display: block; font-size: 7px; color: #999; }
.native-lecturer > span { font-size: 7px; color: #e37f00; background: #fdf1e3; padding: 2px 6px; margin-left: auto; border-radius: 3px; }
.native-subheading { color: #e37f00; font-size: 10px; font-weight: 600; margin: 12px 0 8px; display: flex; align-items: center; gap: 5px; }
.native-subheading > small { font-size: 7px; font-weight: 400; margin-left: auto; }
.native-comment { padding: 8px 10px; background: #f3f2f7; border-radius: 5px; }
.native-comment > span { font-size: 7px; color: #999; }
.native-comment > p { font-size: 8px; color: #333; line-height: 1.8; }
.native-comment-input { font-size: 7px; background: #f5f5f5; color: #999; padding: 5px 5px 5px 9px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.native-comment-input > span { background: #e37f00; border-radius: 3px; color: white; padding: 3px 9px; }
.native-stage-caption { font-size: 9px; color: #8a9280; position: absolute; bottom: -3px; letter-spacing: 1px; }
.native-column-cover { display: flex; align-items: center; gap: 15px; background: linear-gradient(120deg,#1b3a4b,#0c1c26); padding: 25px 21px; color: #fff; }
.native-column-cover > .app-icon { width: 42px; height: 42px; color: #a0b5bf; }
.native-column-cover small { font-size: 7px; color: #b6c5cf; }
.native-column-cover strong { display: block; font-size: 18px; font-weight: 550; margin-top: 4px; }
.native-progress { position: relative; background: #fdf6ec; border-radius: 6px; padding: 9px 12px; }
.native-progress > span { color: #999; font-size: 7px; }
.native-progress > strong { color: #e37f00; display: block; font-size: 11px; margin-top: 3px; }
.native-progress > .app-icon { color: #e37f00; position: absolute; right: 14px; top: 17px; width: 24px; height: 24px; }
.native-chapter { display: flex; gap: 10px; align-items: center; background: #fafafa; border-radius: 5px; padding: 9px 10px; margin-top: 7px; }
.native-chapter > b { font-size: 14px; color: #e37f00; }
.native-chapter strong { font-size: 9px; display: block; font-weight: 550; }
.native-chapter small { font-size: 6px; color: #999; display: block; margin-top: 2px; }
.native-chapter > span { font-size: 6px; margin-left: auto; color: #e37f00; background: #fdf1e3; padding: 3px 6px; border-radius: 3px; }
.native-message-card { transform: rotate(3deg); }
.native-message-card .native-detail-top { min-height: 43px; padding-inline: 16px; }
.native-message-row { display: flex; gap: 11px; align-items: center; padding: 13px 16px; position: relative; }
.native-message-row:after { content: ""; position: absolute; bottom: 0; left: 59px; right: 0; height: 1px; background: #f2f2f2; }
.native-message-row > img { border-radius: 7px; }
.native-message-row strong { display: block; font-size: 11px; font-weight: 550; }
.native-message-row small { display: block; font-size: 8px; color: #999; margin-top: 2px; }
.native-message-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: #fff; flex-shrink: 0; }
.native-message-icon .app-icon { width: 19px; height: 19px; }
.is-service { background: #2b3a67; }
.is-notice { background: #f7931e; }
.is-transfer { background: #3eb86a; }
.native-message-card .native-bottom { padding-top: 10px; padding-bottom: 10px; margin-top: 14px; }
.native-message-card .native-bottom .app-icon { width: 17px; height: 17px; }
.native-message-card .native-bottom small { font-size: 6px; }

@media (min-width: 1440px) {
  .phone-screen.native-app { height: 570px; }
  .native-banner { min-height: 118px; }
  .native-entry { padding-block: 13px; }
}
@media (max-width: 800px) {
  .native-detail-stage { height: 400px; }
  .native-detail-card { width: 100%; }
  .native-detail-body { padding: 10px 12px; }
  .native-detail-top { min-height: 34px; }
  .native-detail-top > strong { font-size: 11px; }
  .native-video { min-height: 125px; }
  .native-video > strong { font-size: 18px; }
  .native-video > .app-icon { width: 50px; right: 14px; }
  .native-column-cover { padding: 22px 14px; gap: 10px; }
  .native-column-cover strong { font-size: 15px; }
  .native-column-cover > .app-icon { width: 32px; height: 32px; }
  .native-message-row { padding-block: 11px; }
}
@media (max-width: 600px) {
  .phone-frame { transform: rotate(3deg) scale(.88); }
  .native-detail-stage { height: 420px; margin-top: 4px; }
  .native-detail-card { width: 94%; max-width: 365px; }
  .native-video { min-height: 140px; padding-top: 35px; }
  .native-video > strong { font-size: 21px; }
  .native-video > .app-icon { width: 65px; right: 20px; }
  .native-column-cover { padding: 25px 18px; gap: 15px; }
  .native-column-cover strong { font-size: 17px; }
  .native-column-cover > .app-icon { width: 40px; height: 40px; }
  .native-detail-body { padding: 13px 15px; }
  .native-message-row { padding-block: 14px; }
  .native-stage-caption { bottom: 0; }
  .hero-visual { height: 575px; }
}