/* Home header, region picker and search layout only. */
html body .app-shell .hero-card .local-preview{display:none!important}
html body .app-shell .hero-card{padding:12px 14px!important}
html body .app-shell .hero-card .brand-block h1{font-size:23px!important;line-height:1.2;margin:0;color:#30263e!important}
html body .app-shell .hero-card .brand-block p{font-size:11px!important;margin:5px 0 0!important}
html body .app-shell .hero-card .top-bar{gap:8px!important;align-items:center}
html body .app-shell .hero-card .top-actions{gap:6px!important}
html body .app-shell .hero-card .top-actions button{min-height:36px!important;padding:6px 10px!important;font-size:12px!important;border-radius:10px!important;background:#433653!important;border:1px solid #433653!important;color:#fff!important;box-shadow:none!important}
html body .app-shell .hero-card .top-actions button *{color:inherit!important}
html body .app-shell .home-region-compact,
html body .app-shell .home-search-compact{padding:10px 12px!important;margin-top:8px!important;border-radius:14px!important}
html body .app-shell :is(.home-region-compact,.home-search-compact) .section-title{gap:6px!important;min-width:0}
html body .app-shell :is(.home-region-compact,.home-search-compact) .section-title>span{font-size:15px!important}
html body .app-shell :is(.home-region-compact,.home-search-compact) .section-title b{font-size:13px!important;line-height:1.3}
html body .app-shell .home-region-compact .section-title>div{flex-direction:row!important;align-items:center;gap:8px!important;min-width:0;flex:1}
html body .app-shell .home-region-compact #selectedRegionText{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html body .app-shell .home-region-compact .region-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;margin-top:8px!important}
html body .app-shell .home-region-compact .region-grid select{appearance:none!important;-webkit-appearance:none!important;box-sizing:border-box!important;display:block!important;min-width:0!important;width:100%!important;max-width:100%!important;height:36px!important;min-height:36px!important;padding:0 18px 0 7px!important;font-size:12px!important;font-weight:650!important;border:1px solid #ded6eb!important;border-radius:9px!important;color:#433653!important;background-color:#f4f1fa!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23173a31' stroke-width='1.5'/%3E%3C/svg%3E")!important;background-position:right 5px center!important;background-repeat:no-repeat!important;white-space:nowrap!important;text-overflow:ellipsis;box-shadow:none!important;cursor:pointer}
html body .app-shell .home-region-compact .region-grid select:focus-visible{outline:2px solid #7954bf!important;outline-offset:2px!important}
html body .app-shell .home-region-compact .region-grid select:disabled{opacity:.55;cursor:default}
html body .app-shell .home-search-compact .section-title{display:none!important}
html body .app-shell .home-search-compact .search-line{height:36px!important;min-height:36px!important;margin:0!important;border:1px solid #ded6eb!important;border-radius:9px!important;background:#fff!important}
html body .app-shell .home-search-compact .search-line input{padding:0 9px!important;font-size:13px!important;min-width:0!important;color:#433653!important}
html body .app-shell .home-search-compact .search-line button{width:58px!important;flex:0 0 58px!important;min-height:34px!important;padding:0 8px!important;border:0!important;border-radius:0!important;font-size:13px!important;background:#7954bf!important;color:#fff!important;box-shadow:none!important}
@media(max-width:350px){html body .app-shell .hero-card .brand-block h1{font-size:20px!important}html body .app-shell .hero-card .top-actions button{padding:6px 7px!important}html body .app-shell .home-region-compact .region-grid select{font-size:11px!important}}

/* Unified purple button palette. Extra selector weight overrides the legacy orange overlays. */
html:root:root:root:root:root body button:is(button,#searchBtn){
  --home-button-bg:#7954bf;--home-button-ink:#fff;--home-button-border:#7954bf;
  background:var(--home-button-bg)!important;
  color:var(--home-button-ink)!important;
  border-color:var(--home-button-border)!important;
  box-shadow:none!important;text-shadow:none!important;
}
html:root:root:root:root:root body button:is(button,#searchBtn) :is(span,b,strong,small,div){color:inherit!important;background-color:transparent!important}
html:root:root:root:root:root body :is(a.group-btn,a.main-action,a.actions-primary,a.top-btn){background:#7954bf!important;color:#fff!important;border-color:#7954bf!important;box-shadow:none!important}
html:root:root:root:root:root body button:is(button,#searchBtn):is(.my-btn,.group-btn,.close-btn,.media-arrow,.media-thumb,#favoriteBtn,#singleModeBtn){--home-button-bg:#433653;--home-button-border:#433653}
html:root:root:root:root:root body button:is(button,#searchBtn):is(.project-item,.quick-tag){--home-button-bg:#f4f1fa;--home-button-ink:#433653;--home-button-border:#ded6eb}
html:root:root:root:root:root body button:is(button,#searchBtn):is(.active,[aria-pressed="true"],[aria-selected="true"]){--home-button-bg:#6442a4;--home-button-ink:#fff;--home-button-border:#6442a4;outline:2px solid #b6a0df!important;outline-offset:1px!important}
html:root:root:root:root:root body button:is(button,#searchBtn):disabled{opacity:.45!important;cursor:not-allowed!important}
html:root:root:root:root:root body button:is(button,#searchBtn):focus-visible{outline:3px solid #b6a0df!important;outline-offset:3px!important}
@media(hover:hover){html:root:root:root:root:root body button:is(button,#searchBtn):hover:not(:disabled){filter:brightness(.92)}}

html:root:root:root:root:root body #teacherModal #reportListBtn :is(span,b,strong,small,div){color:inherit!important;background-color:transparent!important}

/* Detail utility buttons remain neutral; only the press state is accented. */
html:root:root:root:root:root body :is(.modal,.app-shell) button:is(#reportListBtn,#contactBtn,#bilateralBtn,#channelBtn,#favoriteBtn){
 --home-button-bg:#f5f3f8;--home-button-ink:#443d50;--home-button-border:#ded9e7;
 background:var(--home-button-bg)!important;color:var(--home-button-ink)!important;border:1px solid var(--home-button-border)!important;outline:none!important;
}
html:root:root:root:root:root body :is(.modal,.app-shell) button:is(#reportListBtn,#contactBtn,#bilateralBtn,#channelBtn,#favoriteBtn):active:not(:disabled){
 --home-button-bg:#7954bf;--home-button-ink:#fff;--home-button-border:#7954bf;
}
html:root:root:root:root:root body :is(.modal,.app-shell) button:is(#reportListBtn,#contactBtn,#bilateralBtn,#channelBtn,#favoriteBtn):focus-visible{outline:3px solid #b6a0df!important;outline-offset:3px!important}

/* Utility and amount choices follow the project chip states. */
html:root:root:root:root:root body :is(.app-shell,.modal) button:is(
 #rechargeBtn,#myBtn,#joinGroupBtn,#regionAdminBtn,#favoriteBtn,.maple-save,
 .maple-template-flip-hint-v8,[data-action="recharge"],.balance-options button,
 .amount-grid button,.vip-grid button
){
 --home-button-bg:#f4f1fa;--home-button-ink:#433653;--home-button-border:#ded6eb;
 background:var(--home-button-bg)!important;color:var(--home-button-ink)!important;
 border:1px solid var(--home-button-border)!important;outline:none!important;
}
html:root:root:root:root:root body :is(.app-shell,.modal) button:is(
 #rechargeBtn,#myBtn,#joinGroupBtn,#regionAdminBtn,#favoriteBtn,.maple-save,
 .maple-template-flip-hint-v8,[data-action="recharge"],.balance-options button,
 .amount-grid button,.vip-grid button
):is(.active,[aria-pressed="true"],[aria-selected="true"]){
 --home-button-bg:#6442a4;--home-button-ink:#fff;--home-button-border:#6442a4;
}
html:root:root:root:root:root body :is(.app-shell,.modal) button:is(
 #rechargeBtn,#myBtn,#joinGroupBtn,#regionAdminBtn,#favoriteBtn,.maple-save,
 .maple-template-flip-hint-v8,[data-action="recharge"],.balance-options button,
 .amount-grid button,.vip-grid button
):active:not(:disabled){
 --home-button-bg:#7954bf;--home-button-ink:#fff;--home-button-border:#7954bf;
}
html:root:root:root:root:root body :is(.app-shell,.modal) button:is(
 #rechargeBtn,#myBtn,#joinGroupBtn,#regionAdminBtn,#favoriteBtn,.maple-save,
 .maple-template-flip-hint-v8,[data-action="recharge"],.balance-options button,
 .amount-grid button,.vip-grid button
):focus-visible{outline:3px solid #b6a0df!important;outline-offset:3px!important}

/* Single-card mode is fixed; hide the obsolete mode toolbar. */
html body .app-shell .flip-switch,html body #sixModeBtn,html body #singleModeBtn{display:none!important}

/* Photo backgrounds only: the existing title, note and buttons remain live DOM. */
html body .app-shell .local-group-card.home-community-carousel{
 position:relative!important;isolation:isolate;display:grid!important;
 grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:1fr auto!important;
 align-items:end!important;gap:8px!important;min-height:145px!important;
 padding:18px 16px 14px!important;overflow:hidden!important;border-radius:16px!important;
 background:#f5e7ee!important;box-sizing:border-box;
}
html body .app-shell .home-carousel-media,html body .app-shell .home-carousel-shade{position:absolute;inset:0;pointer-events:none;z-index:-3}
html body .app-shell .home-carousel-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .8s ease}
html body .app-shell .home-carousel-media img.is-current{opacity:1}
html body .app-shell .home-carousel-shade{z-index:-2;background:linear-gradient(90deg,rgba(255,249,253,.95),rgba(255,249,253,.72) 38%,rgba(255,249,253,.06) 76%)}
html body .app-shell .home-community-carousel .group-info{position:relative;z-index:1;grid-column:1;grid-row:1;gap:8px!important;max-width:72%;pointer-events:none}
html body .app-shell .home-community-carousel .group-info h3{color:#433653!important;margin:0 0 4px!important;overflow-wrap:anywhere}
html body .app-shell .home-community-carousel .group-info p{color:#665275!important;margin:0!important;overflow-wrap:anywhere}
html body .app-shell .home-community-carousel .tg-round{display:none!important}
html body .app-shell .home-community-carousel #joinGroupBtn{position:relative;z-index:1;grid-column:1;grid-row:2;justify-self:start;max-width:100%;min-height:34px!important;padding:6px 12px!important;font-size:12px!important}
html body .app-shell .home-community-carousel #regionAdminBtn{position:relative;z-index:1;grid-column:1;grid-row:3;justify-self:start;min-height:30px!important;padding:5px 10px!important;font-size:12px!important}
html:root:root:root:root:root body .app-shell button.home-carousel-link:is(button,#searchBtn){
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;z-index:0;
 padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
 background:transparent!important;color:transparent!important;box-shadow:none!important;filter:none!important;opacity:1!important;
}
html:root:root:root:root:root body .app-shell button.home-carousel-link:is(button,#searchBtn):focus-visible{outline:3px solid #7954bf!important;outline-offset:-4px!important}
html body .app-shell .home-carousel-controls{position:relative;z-index:2;grid-column:2;grid-row:2;align-self:end;display:flex;align-items:center;gap:5px}
html:root:root:root:root:root body .app-shell button.home-carousel-control:is(button,#searchBtn){
 width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;
 padding:0!important;border-radius:50%!important;border:1px solid #ded6eb!important;
 background:#ffffffd9!important;color:#7954bf!important;font:20px/1 sans-serif!important;box-shadow:none!important;
}
html:root:root:root:root:root body .app-shell button.home-carousel-control:is(button,#searchBtn):active{background:#7954bf!important;color:#fff!important}
html body .app-shell .home-carousel-count{font-size:10px;color:#433653;background:#ffffffd9;border-radius:10px;padding:3px 5px;white-space:nowrap}
@media(min-width:700px){html body .app-shell .local-group-card.home-community-carousel{min-height:195px!important}}
@media(prefers-reduced-motion:reduce){html body .app-shell .home-carousel-media img{transition:none!important}}

/* The header artwork carries the masthead; its original h1 stays accessible. */
html body .app-shell .hero-card.home-brand-carousel{
 position:relative!important;isolation:isolate;aspect-ratio:3/1;min-height:120px;
 padding:0!important;overflow:hidden!important;border-radius:16px!important;
 background:#f0e5f8!important;
}
html body .app-shell .home-brand-carousel .top-bar{position:absolute;z-index:2;top:8px;right:10px;margin:0!important;gap:0!important}
html body .app-shell .home-brand-carousel .brand-block{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
html body .app-shell .home-brand-carousel .home-carousel-controls{position:absolute;bottom:8px;right:10px}
html body .app-shell .home-brand-carousel .top-actions button{min-height:30px!important;padding:4px 9px!important;font-size:11px!important;background:#f4f1fae8!important}
html body .app-shell .home-brand-carousel .top-actions button:active:not(:disabled){background:#7954bf!important;color:#fff!important}
html body .app-shell .home-carousel-media img{transition:none}
@media(max-width:350px){html body .app-shell .hero-card.home-brand-carousel{min-height:108px}}

/* Preserve the full brand artwork on narrow screens. */
html body .app-shell .hero-card.home-brand-carousel{min-height:0!important;height:auto!important;aspect-ratio:3/1}

/* V7: compact image-backed filters, with live text and existing selectors. */
html:root:root:root:root:root body .app-shell .home-region-compact{
 background:linear-gradient(90deg,#fff9,#ffffff38),url('assets/home-filters/city-lavender.png') center/cover no-repeat!important;
 color:#433653!important;border-color:#e7dff0!important;
}
html:root:root:root:root:root body .app-shell #projectSection{
 background:linear-gradient(90deg,#ffffff9c,#ffffff2e),url('assets/home-filters/silk-blush.png') center/cover no-repeat!important;
 color:#433653!important;border-color:#e7dff0!important;padding:10px 12px!important;margin-top:8px!important;
}
html:root:root:root:root:root body .app-shell :is(.home-region-compact,#projectSection) .section-title{color:#433653!important;gap:6px!important}
html:root:root:root:root:root body .app-shell #projectSection .section-title b{font-size:13px!important}
html:root:root:root:root:root body .app-shell #projectSection .section-title>span{font-size:15px!important}
html:root:root:root:root:root body .app-shell #projectSection .section-title small{display:none!important}
html:root:root:root:root:root body .app-shell #projectSection .project-row{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto!important;margin-top:8px!important;padding:3px!important}
html:root:root:root:root:root body .app-shell #projectSection .project-item{flex:0 0 auto!important;min-height:36px!important;height:36px!important;min-width:0!important;padding:6px 10px!important;border-radius:9px!important;white-space:nowrap!important;display:inline-flex!important;align-items:center;justify-content:center;gap:4px!important;font-size:12px!important}
html:root:root:root:root:root body .app-shell #projectSection .project-item :is(b,span){font-size:12px!important;line-height:1.2!important;margin:0!important}

/* V7: stronger than the legacy all:unset heart reset and colour overlays. */
html:root:root:root:root:root body :is(#myModal,#actionsModal,#teacherModal,.modal,.app-shell) button:is(
 #myBtn,#joinGroupBtn,#regionAdminBtn,#favoriteBtn,.maple-save,.modal button
):not(.home-carousel-link):not(.home-carousel-control){
 --home-button-bg:#f4f1fa;--home-button-ink:#433653;--home-button-border:#ded6eb;
 background:var(--home-button-bg)!important;color:var(--home-button-ink)!important;
 border:1px solid var(--home-button-border)!important;box-shadow:none!important;text-shadow:none!important;
}
html:root:root:root:root:root body :is(#myModal,#actionsModal,#teacherModal,.modal,.app-shell) button:is(
 #myBtn,#joinGroupBtn,#regionAdminBtn,#favoriteBtn,.maple-save,.modal button
):not(.home-carousel-link):not(.home-carousel-control) :is(b,span,strong,small,div){color:inherit!important;background-color:transparent!important}
html:root:root:root:root:root body :is(#myModal,#actionsModal,#teacherModal,.modal,.app-shell) button:is(
 #myBtn,#joinGroupBtn,#regionAdminBtn,#favoriteBtn,.maple-save,.modal button
):not(.home-carousel-link):not(.home-carousel-control):is(.active,[aria-pressed="true"],[aria-selected="true"]){
 --home-button-bg:#7954bf;--home-button-ink:#fff;--home-button-border:#7954bf;
}
html:root:root:root:root:root body :is(#myModal,#actionsModal,#teacherModal,.modal,.app-shell) button:is(
 #myBtn,#joinGroupBtn,#regionAdminBtn,#favoriteBtn,.maple-save,.modal button
):not(.home-carousel-link):not(.home-carousel-control):active:not(:disabled){
 --home-button-bg:#7954bf;--home-button-ink:#fff;--home-button-border:#7954bf;
}
html:root:root:root:root:root body .app-shell .teacher-card button.maple-save{
 display:flex!important;align-items:center!important;justify-content:center!important;
 width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:50%!important;
 font-size:20px!important;line-height:1!important;
}
/* Do not imply a user selection before they interact; form defaults are untouched. */
html:root:root:root:root:root body :is(#actionsModal,#reportModal,#giftModal,.modal) :is(.gift-grid,.report-type-buttons):not([data-home-touched="true"]) button{
 --home-button-bg:#f4f1fa!important;--home-button-ink:#433653!important;--home-button-border:#ded6eb!important;
 background:#f4f1fa!important;color:#433653!important;border-color:#ded6eb!important;outline:none!important;
}
html:root:root:root:root:root body :is(#actionsModal,#reportModal,#giftModal,.modal) :is(.gift-grid,.report-type-buttons):not([data-home-touched="true"]) button:focus-visible{outline:3px solid #b6a0df!important;outline-offset:3px!important}
/* Uniform front photo slots; intrinsic image size cannot change card geometry. */
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card{height:410px!important;min-width:0!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .card-front{
 display:grid!important;grid-template-rows:minmax(0,1fr) 118px!important;min-height:0!important;padding:0!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .photo-placeholder{
 position:relative!important;display:block!important;min-height:0!important;min-width:0!important;
 width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .photo-placeholder>img{
 position:absolute!important;inset:0!important;display:block!important;box-sizing:border-box!important;
 width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;max-width:none!important;
 object-fit:cover!important;object-position:center!important;border-radius:0!important;margin:0!important;padding:0!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info{min-height:0!important;max-height:118px!important;overflow:hidden!important;box-sizing:border-box!important;padding:10px!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info h3{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-tags{max-height:38px!important;overflow:hidden!important}
@media(max-width:680px){html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card{height:350px!important}}

html:root:root:root:root:root body .app-shell .home-region-compact #selectedRegionText{color:#7d6b8f!important}

/* V8: edge-to-edge card photo; details sit over the bottom of the image. */
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .card-front{
 display:block!important;position:absolute!important;inset:0!important;grid-template-rows:none!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .photo-placeholder{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info{
 position:absolute!important;left:0!important;right:0!important;bottom:0!important;z-index:3!important;
 min-height:0!important;height:auto!important;max-height:145px!important;padding:32px 10px 10px!important;
 background:linear-gradient(180deg,transparent,rgba(20,14,31,.64) 35%,rgba(20,14,31,.9))!important;
 border:0!important;box-shadow:none!important;backdrop-filter:none!important;
 color:#fff!important;pointer-events:none;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info :is(h3,h4,p,b,strong,small){color:#fff!important;text-shadow:0 1px 4px #0009!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info .teacher-tags{max-height:40px!important;margin-top:4px!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info .teacher-tags span{
 background:#ffffff24!important;color:#fff!important;border-color:#ffffff50!important;font-size:11px!important;text-shadow:none!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .maple-template-flip-hint-v8{
 top:8px!important;left:8px!important;right:auto!important;bottom:auto!important;max-width:calc(100% - 58px)!important;
 padding:5px 7px!important;min-height:32px!important;font-size:11px!important;z-index:4!important;
}

/* V9: no favourite control on the card; keep the original bottom-right flip hint. */
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .maple-save{display:none!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .maple-template-flip-hint-v8{
 top:auto!important;left:auto!important;right:8px!important;bottom:8px!important;
 max-width:calc(100% - 16px)!important;min-height:36px!important;padding:7px 10px!important;font-size:12px!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info{
 padding-bottom:54px!important;max-height:185px!important;
}

/* V10: front-face controls must never intercept back-face detail clicks. */
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .maple-template-flip-hint-v8{
 visibility:hidden!important;pointer-events:none!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .card-front{pointer-events:none!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card:not(.flipped) .card-back{pointer-events:none!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .card-back{pointer-events:auto!important}
/* V11: compact corner flip control. */
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .maple-template-flip-hint-v8{
 top:auto!important;left:auto!important;right:6px!important;bottom:6px!important;
 width:auto!important;max-width:66px!important;height:28px!important;min-height:28px!important;
 padding:4px 8px!important;font-size:0!important;line-height:1!important;border-radius:7px!important;gap:0!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .maple-template-flip-hint-v8::after{
 content:"↻ 翻转"!important;display:inline!important;font-size:11px!important;line-height:1!important;color:inherit!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info{padding-bottom:40px!important;max-height:171px!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .maple-template-flip-hint-v8{visibility:hidden!important;pointer-events:none!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .card-front{pointer-events:none!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card:not(.flipped) .card-back{pointer-events:none!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .card-back{pointer-events:auto!important}

/*FLIP_FACE_V12_START*/
/* V11: compact corner flip control. */
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .maple-template-flip-hint-v8{
 top:auto!important;left:auto!important;right:6px!important;bottom:6px!important;
 width:auto!important;max-width:66px!important;height:28px!important;min-height:28px!important;
 padding:4px 8px!important;font-size:0!important;line-height:1!important;border-radius:7px!important;gap:0!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .maple-template-flip-hint-v8::after{
 content:"↻ 翻转"!important;display:inline!important;font-size:11px!important;line-height:1!important;color:inherit!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info{padding-bottom:40px!important;max-height:171px!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .maple-template-flip-hint-v8{visibility:hidden!important;pointer-events:none!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .card-front{pointer-events:none!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card:not(.flipped) .card-back{pointer-events:none!important}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .card-back{pointer-events:auto!important}

html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .card-front,
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .card-front *{
 visibility:hidden!important;pointer-events:none!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card:not(.flipped) .card-front{
 visibility:visible!important;pointer-events:auto!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card:not(.flipped) .card-back{
 visibility:hidden!important;pointer-events:none!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card.flipped .card-back{
 visibility:visible!important;pointer-events:auto!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card :is(.card-front,.card-back){
 backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;
}

/* Name, tags and popularity occupy separate natural-flow rows. */
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info{
 display:flex!important;flex-direction:column!important;gap:5px!important;
 height:auto!important;min-height:0!important;max-height:none!important;
 padding:32px 10px 40px!important;overflow:visible!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info>h3{
 position:static!important;float:none!important;margin:0!important;line-height:1.3!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info>.teacher-tags{
 position:static!important;float:none!important;display:flex!important;flex-wrap:wrap!important;
 align-items:center!important;gap:4px!important;min-height:0!important;height:auto!important;
 max-height:none!important;overflow:visible!important;margin:0!important;line-height:1.35!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info>.teacher-tags>span{
 position:static!important;float:none!important;display:inline-block!important;
 max-width:100%!important;box-sizing:border-box!important;padding:3px 6px!important;
 height:auto!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .teacher-info>p{
 position:static!important;float:none!important;display:block!important;flex:none!important;
 margin:0!important;line-height:1.4!important;white-space:normal!important;clear:both!important;
}

/* Match the outer six-grid cards to the rounded front/back faces. */
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card{
 border-radius:18px!important;background:transparent!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card>.card-inner{
 border-radius:inherit!important;
}
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .card-front,
html:root:root:root:root:root body .app-shell #teacherGrid .teacher-card .card-back{
 border-radius:inherit!important;overflow:hidden!important;
}
/*FLIP_FACE_V12_END*/