/* TennisHub proportions: compact cards, quiet surfaces, readable metadata. */
.phone { border: 1px solid #cdd0c5; box-shadow: 0 20px 60px #21362310; border-radius: 36px; }
.mobile-content { padding: 8px 17px 24px; }
.miniheader { height: 46px; padding: 0 18px; gap: 8px; }
.wordmark { font-size: 22px; letter-spacing: -1.1px; }
.v3-role-pill { display:flex; align-items:center; gap:3px; padding:5px 8px; border-radius:9px; background:#e4e9db; color:#35563b; font-size:10px; margin-left:auto; white-space:nowrap; }
.v3-role-pill svg { width:11px; height:11px; }
.mini-actions { margin-left:0; }
.v3-home-heading { display:flex; align-items:center; justify-content:space-between; margin:8px 0 15px; }
.v3-home-heading>div { display:flex; align-items:center; gap:15px; }
.v3-home-heading h1 { font-size:25px; letter-spacing:-.8px; }
.v3-home-heading button { display:flex; align-items:center; gap:3px; color:#6a7462; font-size:12px; padding:0; }
.v3-home-heading svg { width:15px; height:15px; }
.n-title { margin:8px 0 16px; }
.n-title h1,.mobile-content .page-title h1 { font-size:25px; font-weight:700; letter-spacing:-.6px; }
.n-title>span { font-size:11px; }
.n-search { border:1px solid #e1e2d9; padding:11px 13px; border-radius:12px; margin-bottom:10px; }
.n-search input { font-size:13px; }
.n-tabs { gap:21px; margin-bottom:13px; }
.n-tabs>button { font-size:15px; padding:8px 0 11px; }
.n-quick { gap:8px; margin:5px 0 15px; background:#fff; padding:14px 7px; border-radius:14px; }
.n-quick button { font-size:12px; gap:7px; }
.n-quick button>span { width:34px; height:30px; background:transparent; box-shadow:none; border-radius:0; }
.n-quick svg { width:23px; height:23px; }
.l-home-plan { border-radius:12px; padding:13px 14px; margin:0 0 17px; background:#e5ecd9; gap:11px; min-height:0; }
.l-home-plan>span { width:31px; height:31px; background:transparent; }
.l-home-plan h3,.l-home-plan b { font-size:13px; }
.l-home-plan p { font-size:11px; margin-top:4px; }
.n-section { margin:20px 0 11px; }
.n-section h2 { font-size:16px; }
.n-section .btn { font-size:12px; }
.n-video-grid { gap:11px; }
.n-video-card { border-radius:14px; padding:0 0 12px; box-shadow:0 1px 2px #1a1d1907; border:1px solid #e7e8df; }
.n-video-card>div:first-child { height:auto; aspect-ratio:1.47; }
.n-video-card .n-photo { width:100%; height:100%; position:absolute; }
.n-video-card h3 { font-size:14px; font-weight:650; line-height:1.4; margin:10px 11px 6px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:39px; }
.n-video-card>p { margin:0 11px; font-size:11px; color:#777b70; }
.n-video-card>div:last-child { margin:10px 11px 0; }
.n-video-card b { font-size:14px; }
.n-video-card>div:last-child>span { font-size:10px; }
.n-photo-label { font-size:9px; padding:3px 6px; }
.n-play { height:25px; width:25px; right:8px; bottom:8px; }
.n-org-card { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; margin-bottom:10px; border:1px solid #e4e5dc; }
.n-org-card>.n-photo { width:76px; height:79px; border-radius:10px; flex-shrink:0; }
.n-org-copy { padding:0; flex:1; min-width:0; }
.n-org-copy h3 { font-size:14px; line-height:1.5; }
.n-org-copy p { font-size:11px; margin:6px 0; }
.n-org-copy .chip { font-size:9px; }
.n-course { padding:12px 13px 10px; border-radius:15px; margin:0 0 10px; box-shadow:0 1px 2px #1a1d1907,0 6px 16px -14px #1a1d1940; border:0; }
.n-course-head h3 { font-size:15px; font-weight:700; }
.n-course-head>strong { font-size:14px; }
.n-course-head small { font-size:10px; }
.n-course-body { margin-top:9px; gap:10px; }
.n-course-body>.n-photo { width:57px; height:57px; border-radius:11px; }
.n-course-time { gap:7px; flex-wrap:nowrap; }
.n-course-time b { font-size:17px; font-weight:600; }
.n-course-time span { font-size:12px; }
.n-course-body p { font-size:11px; margin:4px 0 6px; }
.n-course-body .chip { font-size:10px; padding:3px 6px; border-radius:6px; }
.n-course-foot { margin-top:9px; padding-top:8px; font-size:11px; }
.n-course-foot>b { font-size:11px; }
.n-course-foot .avatar { width:21px; height:21px; font-size:10px; }
.n-date-scroll { margin:12px 0; gap:7px; }
.n-date-scroll>button { min-width:45px; border:1px solid #e0e2d7; border-radius:11px; padding:9px 0; gap:5px; }
.n-date-scroll span { font-size:10px; }
.n-date-scroll b { font-size:17px; }
.n-lesson-modes { background:#e4e8dc; padding:4px; gap:4px; border-radius:12px; margin-bottom:11px; }
.n-lesson-modes .btn { font-size:12px; padding:8px 12px; border-radius:9px; background:transparent; color:#66725c; }
.n-lesson-modes .primary { background:#fff; color:#1e5c36; box-shadow:0 1px 3px #102a1710; }
.n-filter-row .n-tabs>button { font-size:11px; padding:6px 9px; }
.n-post { padding:13px; border-radius:14px; margin-bottom:11px; }
.n-post header b { font-size:13px; }
.n-post header span { font-size:11px; }
.n-post header button { font-size:11px; }
.n-post h3 { font-size:15px; }
.n-post p { font-size:13px; line-height:1.6; }
.n-post-open>.n-photo { height:170px; border-radius:10px; }
.n-post footer button { font-size:12px; }
.n-good { border-radius:14px; border:1px solid #e7e8df; }
.n-good-art { height:140px; }
.n-good h3 { font-size:14px; }
.n-good p { font-size:11px; }
.n-shop-banner { padding:17px; border-radius:14px; }
.n-shop-banner h2 { font-size:20px; margin:8px 0; }
.n-role-entry { background:#e4eadb; color:#1e5c36; padding:14px; border-radius:14px; margin-bottom:14px; }
.n-role-entry>div>span,.n-role-entry>span { color:#5f7353; font-size:11px; }
.n-role-entry b { margin-top:4px; }
.n-menu-card { border-radius:14px; padding:3px 14px; }
.n-menu { padding:15px 0; font-size:14px; }
.n-mine-grid { border-radius:14px; padding:18px 6px; }
.n-mine-grid button { font-size:11px; }
.l-plan,.l-practice-record,.l-library-card,.n-mini-row { border-radius:14px; box-shadow:none; }
.v3-teacher-preview { display:block; margin-top:18px; color:#1e5c36; font-size:13px; font-weight:650; }
.t-context { display:flex; justify-content:space-between; align-items:center; margin:8px 0 16px; font-size:12px; color:#617256; }
.t-context button { padding:0; display:flex; align-items:center; gap:4px; font-size:11px; }
.t-context svg { width:12px; height:12px; }
.t-greeting { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 18px; }
.t-greeting h1 { font-size:26px; letter-spacing:-.5px; font-weight:700; }
.t-greeting p { color:#777b70; font-size:12px; margin-top:8px; }
.t-monogram { flex-shrink:0; width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:#dce7cd; color:#1e5c36; font-size:21px; }
.t-work-shortcuts { display:flex; gap:8px; margin-bottom:14px; }
.t-work-shortcuts .btn { flex:1; padding:11px 5px; background:#fff; border-radius:11px; font-size:12px; }
.t-overview { background:white; border-radius:14px; padding:16px 13px; display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.t-overview>div { min-width:58px; display:flex; flex-direction:column; gap:6px; }
.t-overview strong { font-size:26px; line-height:1; font-weight:650; color:#1e5c36; }
.t-overview span { font-size:11px; color:#777b70; }
.t-overview>button { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-left:auto; padding:0 0 0 14px; border-left:1px solid #e9ece1; }
.t-overview>button>svg { width:23px; height:23px; color:#1e5c36; }
.t-overview>button span { display:flex; align-items:center; gap:3px; }
.t-overview>button span svg { width:11px; height:11px; }
.t-list-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:17px 0 11px; }
.t-list-heading h2 { font-size:16px; font-weight:700; }
.t-list-heading>span { color:#848b79; font-size:11px; }
.t-list-heading .btn { font-size:11px; padding:8px 11px; }
.t-dates { margin:0 0 12px; }
.t-class { background:#fff; border-radius:15px; padding:12px 13px 10px; margin-bottom:11px; box-shadow:0 1px 2px #1a1d1908; }
.t-class-top { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.t-class-top>span:first-child { color:#1e5c36; font-size:13px; font-weight:650; }
.t-class-top i { font-style:normal; padding:0 3px; font-weight:400; color:#a2a797; }
.t-class .chip { font-size:10px; padding:3px 6px; border-radius:6px; }
.t-class-main { display:flex; gap:11px; align-items:center; margin-top:13px; }
.t-class-main>.n-photo { width:58px; height:58px; border-radius:10px; flex:0 0 58px; }
.t-class-main>div:last-child { min-width:0; flex:1; }
.t-class h3 { font-size:15px; line-height:1.45; font-weight:650; }
.t-class-main p { font-size:11px; color:#777b70; margin:4px 0 6px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.t-meta { display:flex; gap:5px; }
.t-class footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ecece4; margin-top:11px; padding-top:9px; gap:7px; }
.t-class footer>span { font-size:10px; color:#777b70; }
.t-class footer .btn { font-size:11px; padding:7px 11px; border-radius:8px; }
.t-empty { padding:24px 18px; background:#fff; border:1px dashed #d9dfce; border-radius:14px; text-align:center; color:#7a8571; font-size:13px; line-height:1.7; margin:12px 0; }
.t-empty svg { width:25px; height:25px; color:#a2b493; margin-bottom:10px; }
.t-teaching-intro { display:flex; align-items:center; gap:12px; background:#e3ead8; border-radius:13px; padding:16px; }
.t-teaching-intro>svg { width:27px; height:27px; flex-shrink:0; color:#1e5c36; }
.t-teaching-intro b { font-size:14px; }
.t-teaching-intro p { font-size:11px; margin-top:6px; color:#738266; }
.t-task { background:#fff; border-radius:14px; padding:15px; margin:12px 0; }
.t-task h3 { font-size:15px; line-height:1.5; }
.t-task p { font-size:12px; line-height:1.6; color:#77806d; margin:7px 0; }
.t-task header { display:flex; gap:10px; align-items:center; }
.t-task header>div { flex:1; }
.t-task header .chip { font-size:10px; }
.t-task footer { display:flex; justify-content:flex-end; gap:8px; }
.t-task footer .btn { font-size:12px; }
.t-task-label { font-size:10px; background:#f0f3e9; padding:4px 7px; border-radius:5px; display:inline-block; margin-bottom:9px; color:#607847; }
.t-task-text { padding:12px 0; border-top:1px solid #eeeee7; font-size:13px; line-height:1.7; white-space:pre-wrap; }
.t-task>.btn { font-size:12px; padding:5px 0; }
.t-income { background:#1e5c36; color:#fff; border-radius:15px; padding:23px; }
.t-income>span { color:#c9d9bf; font-size:12px; }
.t-income h2 { font-size:34px; margin:17px 0 12px; font-weight:650; }
.t-income p { font-size:11px; color:#c9d9bf; }
.t-income-row { background:white; border-radius:12px; padding:15px; margin:10px 0; display:flex; align-items:center; gap:10px; }
.t-income-row>div { flex:1; }
.t-income-row h3 { font-size:14px; }
.t-income-row p { color:#7d8771; margin-top:7px; font-size:11px; }
.t-income-row>b { color:#1e5c36; font-size:16px; }
.t-back { display:flex; gap:5px; align-items:center; padding:8px 0 15px; font-size:12px; color:#657858; }
.t-back svg { transform:rotate(180deg); width:12px; height:12px; }
.t-attendance-title { padding:17px; background:#e3ead8; border-radius:14px; margin-bottom:18px; }
.t-attendance-title>span { font-size:12px; color:#617450; }
.t-attendance-title h1 { font-size:22px; margin:10px 0; }
.t-attendance-title p { font-size:12px; color:#6d7c5e; }
.t-attendee { background:#fff; border-radius:14px; padding:14px; margin-bottom:11px; }
.t-attendee-head { display:flex; align-items:center; gap:11px; }
.t-attendee-head>div { flex:1; }
.t-attendee h3 { font-size:15px; }
.t-attendee p { font-size:11px; color:#7b856f; margin-top:6px; }
.t-attendee footer { display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:11px; border-top:1px solid #ecece4; gap:6px; }
.t-attendee footer>span { font-size:11px; color:#7c8571; }
.t-attendee .btn { font-size:11px; padding:8px 11px; }
.t-greeting+.n-menu-card .btn { text-align:left; justify-content:flex-start; background:transparent; border-bottom:1px solid #ecece4; border-radius:0; font-size:14px; padding:16px 0; }
.mobile-content button:focus-visible,.bottomnav a:focus-visible { outline:2px solid #1e5c36; outline-offset:3px; }
@media(max-width:650px) { .phone{border:0;border-radius:0}.mobile-content{padding:8px 16px 24px}.miniheader{padding:0 16px}.wordmark{font-size:21px}.n-course-time b{font-size:16px}.n-course-time span{font-size:12px}.n-course-head h3{font-size:15px}.n-video-card>div:first-child{height:auto}.n-course-body>.n-photo{width:55px;height:55px}.n-title h1{font-size:25px}.n-org-copy h3{font-size:14px} }
/* A locally stored four-scene image sheet, cropped independently for each card. */
.v3-art { display:block; position:relative; overflow:hidden; background-image:url('/assets/dance-editorial-v3.png'); background-size:auto 200%; background-repeat:no-repeat; background-color:#daceb9; }
.v3-art.art-0 { background-position:left top; }
.v3-art.art-1 { background-position:right top; }
.v3-art.art-2 { background-position:left bottom; }
.v3-art.art-3 { background-position:right bottom; }
.v3-art>small { position:absolute; bottom:5px; right:5px; padding:2px 4px; border-radius:4px; color:#fff; background:#1b231c66; font-size:8px; font-weight:400; letter-spacing:0; }
.n-video-card>div:first-child>.v3-art { position:absolute; inset:0; }
.l-player>.v3-art { width:100%; height:220px; }
.t-class-main>.v3-art { display:block; }
/* Seven equal columns remain visible at every phone width. */
.week-picker { margin:12px 0 15px; }
.week-toolbar,.week-toolbar>div { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.week-toolbar { margin-bottom:9px; }
.week-toolbar>div>span { font-size:12px; color:#596b4e; font-weight:550; white-space:nowrap; }
.week-toolbar button { min-width:30px; min-height:32px; padding:0 5px; font-size:23px; color:#68785b; }
.week-toolbar .week-all { min-height:32px; font-size:11px; padding:0 7px; border-radius:8px; }
.week-all.active { color:#1e5c36; background:#e3ead8; }
.n-date-scroll.week-seven { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; overflow:visible; margin:0; }
.n-date-scroll.week-seven>button { width:100%; min-width:0; height:65px; padding:8px 0 5px; gap:5px; border-radius:10px; justify-content:center; box-sizing:border-box; }
.week-seven>button>span { font-size:11px; line-height:1; }
.week-seven>button>b { font-size:19px; line-height:1.15; }
.week-seven>button>i { width:3px; height:3px; border-radius:50%; background:transparent; }
.week-seven>button>i.has-course { background:#83986c; }
.week-seven>button.active>i.has-course { background:#d6e8b8; }
@media(max-width:360px) { .n-date-scroll.week-seven { gap:4px; }.n-date-scroll.week-seven>button { height:60px;border-radius:9px; }.week-toolbar>div>span { font-size:11px; } }