/* MAPLE_ORIGINAL_TEMPLATE_MOBILE_V8: presentation only. */
html[data-maple-template="original-v8"] {
  --template-orange: #f05a14;
  --template-orange-light: #ff7a1a;
  --template-orange-dark: #a6380b;
  --template-button-text: #351b0c;
  --template-field-label: #923708;
  --template-field-value: #195365;
}
html[data-maple-template="original-v8"][data-maple-ambient^="hero-"] {
  --template-field-label: #ffd0a1;
  --template-field-value: #9fe1eb;
}
/* Override the later multicolour action overlay without changing theme selection. */
html[data-maple-template="original-v8"][data-maple-ambient] body :is(.app-shell,.modal) :is(
  #rechargeBtn,#myBtn,#searchBtn,#contactBtn,#bilateralBtn,#channelBtn,#favoriteBtn,
  #giftBtn,#reportBtn,#reportListBtn,#sixModeBtn,#singleModeBtn,.card-detail-btn,
  .gift-confirm-btn,.main-action,[data-action="gifts"],[data-action="giftHistory"],
  [data-action="report"],[data-action="reports"]
) {
  color: var(--template-button-text) !important;
  background: linear-gradient(180deg,var(--template-orange-light),var(--template-orange)) !important;
  border: 1px solid #c9430a !important;
  border-radius: 14px;
  font-weight: 800;
  min-height: 44px;
  padding: 10px 12px;
  line-height: 1.4;
  white-space: normal;
  box-shadow: 0 4px 12px #c9430a20;
  text-shadow: none;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell :is(
  .group-btn,.project-item,.quick-tags button
),
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell #singleModeBtn,
html[data-maple-template="original-v8"][data-maple-ambient] body .modal #favoriteBtn {
  background: #fff6ee !important;
  color: #923708 !important;
  border: 1px solid #d88962 !important;
  border-radius: 14px;
  min-height: 44px;
  white-space: normal;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell :is(
  .project-item.active,.quick-tags button.active,.flip-switch button.active
) {
  background: linear-gradient(180deg,#c9430a,#a6380b) !important;
  color: #fff !important;
  border-color: #a6380b !important;
  outline: 2px solid var(--ui-border,#d88962);
  outline-offset: 2px;
  box-shadow: 0 3px 10px #a6380b24;
}
html[data-maple-template="original-v8"][data-maple-ambient] body :is(
  #reportListBtn,#rechargeBtn,#myBtn,#searchBtn,.main-action
) :is(div,strong,small,b,span) {
  color: var(--template-button-text) !important;
  background: transparent !important;
  opacity: 1;
}
html[data-maple-template="original-v8"][data-maple-ambient] body #teacherModal .detail-sheet
  #reportListBtn :is(div,strong,small,b,span) {
  color: var(--template-button-text) !important;
  background: transparent !important;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell
  :is(.project-item,.quick-tags button) :is(span,b,strong) { color: #923708 !important; }
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell
  :is(.project-item.active,.quick-tags button.active) :is(span,b,strong) { color: #fff !important; }
/* V9: project selection uses the same orange and dark lettering as the current buttons. */
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell
  :is(.project-item.active,.quick-tags button.active) {
  background: linear-gradient(180deg,var(--template-orange-light),var(--template-orange)) !important;
  color: var(--template-button-text) !important;
  border-color: #a6380b !important;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell
  :is(.project-item.active,.quick-tags button.active) :is(span,b,strong) {
  color: var(--template-button-text) !important;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .flip-switch {
  flex-wrap: wrap;
  gap: 8px;
  border-radius: 18px;
}
html[data-maple-template="original-v8"][data-maple-ambient] body :is(.app-shell,.modal)
  .teacher-field-label { color: var(--template-field-label) !important; font-weight: 750; }
html[data-maple-template="original-v8"][data-maple-ambient] body :is(.app-shell,.modal)
  .teacher-field-value { color: var(--template-field-value) !important; overflow-wrap: anywhere; }
html[data-maple-template="original-v8"][data-maple-ambient] body .modal .detail-section-label {
  color: var(--template-field-label) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
  padding: 0;
  margin: 16px 0 8px;
}
/* The original six card backgrounds remain legible inside light and dark themes. */
html[data-maple-template="original-v8"] .teacher-card {
  --card-start: #d8caff; --card-end: #7655bb; --card-panel: #f6efff;
  --card-ink: #382542; --card-muted: #604971; --card-label: #714c87;
}
html[data-maple-template="original-v8"] .teacher-card.volcano {
  --card-start: #ffc088; --card-end: #e75b17; --card-panel: #fff2e5;
  --card-ink: #492b19; --card-muted: #72503b; --card-label: #98421c;
}
html[data-maple-template="original-v8"] .teacher-card.stargray {
  --card-start: #d7e2dc; --card-end: #6e8375; --card-panel: #eef5f0;
  --card-ink: #253a2f; --card-muted: #4a6454; --card-label: #416450;
}
html[data-maple-template="original-v8"] .teacher-card.sprinkleblue {
  --card-start: #cbe9ff; --card-end: #559bd5; --card-panel: #eaf6ff;
  --card-ink: #203c56; --card-muted: #48657e; --card-label: #306389;
}
html[data-maple-template="original-v8"] .teacher-card.springgreen {
  --card-start: #e2f3ae; --card-end: #7d9f3f; --card-panel: #f3f8e6;
  --card-ink: #344021; --card-muted: #586744; --card-label: #536928;
}
html[data-maple-template="original-v8"] .teacher-card.rouge {
  --card-start: #ffcbd5; --card-end: #bf425d; --card-panel: #fff0f3;
  --card-ink: #472632; --card-muted: #764955; --card-label: #9a3855;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .teacher-card .card-front {
  background: linear-gradient(145deg,var(--card-start),var(--card-end)) !important;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .teacher-card
  :is(.teacher-info,.card-back) {
  background: var(--card-panel) !important;
  color: var(--card-ink) !important;
  border-color: var(--card-start) !important;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .teacher-card
  :is(.teacher-info,.card-back) :is(h3,h4,b,strong) { color: var(--card-ink) !important; }
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .teacher-card
  :is(.teacher-info,.card-back) :is(p,small) { color: var(--card-muted) !important; }
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .teacher-card
  .teacher-field-label { color: var(--card-label) !important; }
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .teacher-card
  .teacher-field-value { color: #195365 !important; }
html[data-maple-template="original-v8"][data-maple-ambient] body :is(.teacher-tags,.detail-tags) span {
  color: #76300f !important;
  background: #fff1e6 !important;
  border: 1px solid #dfb294 !important;
  border-radius: 999px;
  font-weight: 650;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .teacher-card .teacher-tags span {
  color: var(--card-label) !important;
  background: #ffffff !important;
  border-color: var(--card-start) !important;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .teacher-card .photo-placeholder {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg,#ffffff2e,#37231929) !important;
  color: var(--card-ink) !important;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .teacher-card .maple-save {
  color: #a6380b !important;
  background: #fffdfa !important;
  border: 1px solid #d88962 !important;
  width: 38px; height: 38px; border-radius: 50%;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .teacher-card .maple-template-flip-hint-v8 {
  position: absolute;
  right: 8px; bottom: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 36px; max-width: calc(100% - 16px);
  padding: 7px 10px;
  background: #332820eb !important;
  color: #fff !important;
  border: 1px solid #ffffff80 !important;
  border-radius: 999px;
  box-shadow: 0 2px 8px #0003;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  white-space: normal; text-shadow: none;
  cursor: pointer;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .card-back {
  overflow-y: auto; overscroll-behavior: contain;
  justify-content: flex-start; padding: 14px;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .card-back p {
  flex: none; margin: 4px 0; font-size: 13px; line-height: 1.5;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .app-shell .card-back .card-detail-btn {
  flex: none; margin-top: 8px;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .maple-availability-dot-v8 {
  display: inline-block !important;
  width: 8px; height: 8px; min-width: 8px;
  margin-right: 5px; padding: 0 !important;
  vertical-align: 1px;
  background: #15803d !important;
  border: 0 !important; border-radius: 50% !important;
}
/* V9 rating tracks have their own surface, unaffected by global input theme colours. */
html[data-maple-template="original-v8"] {
  --maple-score-rest-v9: #b6a18f;
  --maple-score-edge-v9: #79583f;
}
html[data-maple-template="original-v8"][data-maple-ambient^="hero-"] {
  --maple-score-rest-v9: #a39bb0;
  --maple-score-edge-v9: #dec6ae;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .modal .report-score-item {
  grid-template-columns: minmax(72px,.65fr) minmax(60px,1fr) 64px;
  gap: 8px; align-items: center;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .modal
  .report-score-item>span:not(.maple-score-value-v9) { color: var(--ui-text) !important; }
html[data-maple-template="original-v8"][data-maple-ambient] body .modal
  .report-score-item input[type="range"] {
  appearance: none !important; -webkit-appearance: none !important;
  width: 100% !important; min-width: 0 !important;
  height: 44px !important; min-height: 44px !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none;
  cursor: pointer; touch-action: pan-y;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .modal
  .report-score-item input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border: 1px solid var(--maple-score-edge-v9); border-radius: 999px;
  background: linear-gradient(90deg,#c9430a 0%,#c9430a var(--maple-score-progress,77.78%),var(--maple-score-rest-v9) var(--maple-score-progress,77.78%),var(--maple-score-rest-v9) 100%);
}
html[data-maple-template="original-v8"][data-maple-ambient] body .modal
  .report-score-item input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; margin-top: -9px;
  background: #f05a14; border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px #923708,0 2px 6px #0003;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .modal
  .report-score-item input[type="range"]::-moz-range-track {
  height: 8px; border: 1px solid var(--maple-score-edge-v9); border-radius: 999px;
  background: linear-gradient(90deg,#c9430a 0%,#c9430a var(--maple-score-progress,77.78%),var(--maple-score-rest-v9) var(--maple-score-progress,77.78%),var(--maple-score-rest-v9) 100%);
}
html[data-maple-template="original-v8"][data-maple-ambient] body .modal
  .report-score-item input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; background: #f05a14; border: 3px solid #fff;
  border-radius: 50%; box-shadow: 0 0 0 1px #923708;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .modal .maple-score-value-v9 {
  display: inline-flex; gap: 2px; align-items: center; justify-content: center;
  white-space: nowrap; color: var(--ui-text) !important;
  background: var(--ui-field) !important; font-size: 13px; font-weight: 700;
  border: 1px solid var(--ui-border); border-radius: 10px; min-height: 34px;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .modal .maple-score-value-v9 b {
  display: inline !important; min-width: 0; height: auto; padding: 0;
  background: transparent !important; color: var(--ui-text) !important;
}
html[data-maple-template="original-v8"][data-maple-ambient] body .modal .maple-score-hint-v9 {
  color: var(--ui-muted) !important; font-size: 12px; line-height: 1.6; margin: 0 0 4px;
}
/* Mobile operation cells: use the full cell width, instead of an overflowing row. */
html[data-maple-admin-mobile="v8"] .maple-admin-actions-v8 {
  display: flex; flex-wrap: wrap; gap: 6px;
}
@media (max-width: 800px) {
  html[data-maple-admin-mobile="v8"] :is(.admin-shell>main,#adminContent,.panel,.table-wrap,
    #adminContent table,#adminContent tbody,#adminContent tr,#adminContent td,
    .maple-admin-actions-v8,.maple-admin-actions-v8>* ) {
    box-sizing: border-box; min-width: 0; max-width: 100%;
  }
  html[data-maple-admin-mobile="v8"] #adminContent table { min-width: 0 !important; }
  html[data-maple-admin-mobile="v8"] #adminContent table td.maple-admin-actions-cell-v8 {
    display: grid !important;
    grid-template-columns: minmax(0,1fr);
    gap: 7px;
    width: 100%;
  }
  html[data-maple-admin-mobile="v8"] #adminContent .maple-admin-actions-v8 {
    display: grid !important;
    width: 100%; min-width: 0;
    grid-template-columns: repeat(var(--admin-action-columns,3),minmax(0,1fr));
    gap: 8px 6px;
  }
  html[data-maple-admin-mobile="v8"] #adminContent .maple-admin-actions-v8 :is(button,a) {
    display: flex !important; align-items: center; justify-content: center;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    min-height: 44px !important; height: auto !important;
    margin: 0 !important; padding: 9px 4px !important;
    font-size: 13px !important; line-height: 1.45;
    white-space: normal !important; overflow-wrap: anywhere;
    text-align: center; text-decoration: none;
  }
}

/* HEART_ICON_BOX_FIX_V1 */
html[data-maple-template="original-v8"] body .app-shell .teacher-card .maple-save,
html[data-maple-ambient] body .app-shell .teacher-card .maple-save {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  appearance: none;
  -webkit-appearance: none;
}

/* PURE_HEART_ONLY_V1 */
html body .app-shell .teacher-card button.maple-save {
  all: unset !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 20 !important;

  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-shadow: none !important;
  filter: none !important;

  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer !important;

  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .app-shell .teacher-card button.maple-save::before,
html body .app-shell .teacher-card button.maple-save::after {
  content: none !important;
  display: none !important;
}


/* CARD_CLICK_FLIP_SCROLL_FIX_V1 */

/* 卡片区域允许整页自然上下滚动 */
html[data-maple-template="original-v8"] body .app-shell .teacher-card {
  touch-action: pan-y;
}

/* 背面不再形成自己的纵向滚动区域 */
html[data-maple-template="original-v8"][data-maple-ambient]
body .app-shell .teacher-card .card-back {
  overflow: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: auto !important;
  justify-content: flex-start !important;
  padding: 14px 14px 68px !important;
}

/* 查看详情固定在翻转卡片底部 */
html[data-maple-template="original-v8"][data-maple-ambient]
body .app-shell .teacher-card .card-back .card-detail-btn {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  top: auto !important;
  width: calc(100% - 28px) !important;
  min-height: 44px !important;
  margin: 0 !important;
  z-index: 10 !important;
}