@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root { --ink:#17211e; --ink-2:#25332e; --muted:#71807a; --line:#dce3dc; --paper:#f4f6f1; --white:#fff; --lime:#c7f36b; --mint:#dff6aa; --soft:#eaf0e8; --yellow:#f3ca57; --red:#e98e7f; --shadow:0 15px 40px rgba(37,51,46,.07); }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); font-family:'DM Sans','Noto Sans SC',sans-serif; font-size:14px; background:var(--paper); }
button, input, textarea, select { font:inherit; }
button { border:0; cursor:pointer; color:inherit; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:236px; flex:0 0 236px; background:var(--ink); color:#eaf1e9; padding:28px 16px 20px; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:11px; padding:0 12px 48px; }
.brand strong { display:block; font-size:22px; letter-spacing:-1px; line-height:1; }.brand strong span { color:var(--lime); }.brand small { display:block; color:#87958e; font-size:10px; margin-top:6px; }
.brand-mark { width:28px; height:34px; display:flex; gap:3px; align-items:flex-end; }.brand-mark span { display:block; width:7px; border-radius:5px 5px 2px 2px; background:var(--lime); transform:skew(-13deg); }.brand-mark span:nth-child(1){height:16px;opacity:.65}.brand-mark span:nth-child(2){height:26px}.brand-mark span:nth-child(3){height:34px;opacity:.82}
.main-nav { display:flex; flex-direction:column; gap:5px; }.nav-item { display:flex; align-items:center; gap:13px; padding:13px 13px; background:transparent; border-radius:10px; color:#97a59f; text-align:left; transition:.2s; }.nav-item:hover,.nav-item.active { background:#2a3933; color:#fff; }.nav-item.active { box-shadow:inset 3px 0 var(--lime); }.nav-item em { margin-left:auto; font-style:normal; font-size:10px; color:#77877f; }.nav-item.active em { color:var(--lime); }.nav-icon { font-size:19px; width:18px; text-align:center; line-height:1; }.new-dot { color:var(--lime)!important; font-size:22px!important; line-height:5px; }
.sidebar-bottom { margin-top:auto; }.streak-card { background:#2b3a34; border:1px solid #3b4c44; border-radius:12px; display:flex; align-items:center; gap:10px; padding:13px 12px; margin:0 2px 25px; }.streak-flame { color:var(--lime); font-size:22px; }.streak-card strong,.streak-card span { display:block; }.streak-card strong { font-size:13px; }.streak-card span { color:#91a099; font-size:10px; margin-top:3px; }.streak-arrow { margin-left:auto; color:var(--lime)!important; font-size:16px!important; }.profile { display:flex; align-items:center; padding:0 8px; gap:10px; }.avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:var(--ink); font-weight:700; }.profile strong,.profile span { display:block; }.profile strong { font-size:13px; }.profile span { color:#899890; font-size:10px; margin-top:2px; }.more-button { background:transparent; color:#84938b; padding:5px; margin-left:auto; letter-spacing:2px; }
.main-content { flex:1; min-width:0; }.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 48px; border-bottom:1px solid var(--line); }.breadcrumb { color:#a0aba5; font-size:12px; }.breadcrumb b { color:#c0c9c2; padding:0 9px; font-weight:400; }.breadcrumb strong { color:var(--ink); font-weight:600; }.topbar-actions { display:flex; gap:18px; align-items:center; }.icon-button { position:relative; background:transparent; font-size:22px; color:#708078; }.icon-button i { width:5px; height:5px; background:#ec7f69; border-radius:50%; position:absolute; top:1px; right:0; }.avatar-small { border:2px solid var(--white); outline:1px solid var(--line); }.mobile-menu { display:none; }
.view-container { max-width:1280px; padding:42px 48px 70px; margin:auto; }.view { display:none; animation:fade .25s ease; }.view.active { display:block; } @keyframes fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.welcome-row,.page-heading,.section-heading,.card-topline,.today-main,.chart-heading,.calendar-top,.log-title,.dialog-top { display:flex; justify-content:space-between; align-items:flex-start; }.welcome-row { margin-bottom:31px; }.kicker,.eyebrow { color:#84928b; text-transform:uppercase; letter-spacing:1.5px; font-size:10px; font-weight:700; margin:0 0 10px; }.kicker { color:#8a9892; }.light { color:#afc0b1; }.welcome-row h1,.page-heading h1 { font-size:32px; letter-spacing:-1.4px; margin:0; line-height:1.15; font-weight:700; }.welcome-row h1 em { color:#8eb72a; font-style:normal; }.intro { color:var(--muted); margin:10px 0 0; line-height:1.7; }.outline-button,.secondary-button { background:transparent; border:1px solid #bdc8bf; padding:11px 16px; border-radius:8px; font-size:12px; font-weight:600; }.outline-button:hover,.secondary-button:hover { border-color:var(--ink); }.primary-button { background:var(--lime); color:var(--ink); border-radius:8px; padding:12px 18px; font-weight:700; font-size:12px; transition:.2s; }.primary-button:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(132,166,47,.22); }.text-button { background:transparent; color:var(--ink); font-weight:700; font-size:12px; padding:0; }.text-button span { color:#86a92d; margin-left:8px; font-size:17px; }.text-button.muted { color:#76837d; font-weight:500; }.panel-dark { background:var(--ink); color:#fff; border-radius:12px; }.panel-light { background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.hero-grid { display:grid; grid-template-columns:1.65fr 1fr; gap:18px; }.today-card,.focus-card { min-height:272px; padding:25px 26px; }.status-pill { color:var(--lime); border:1px solid #58684d; padding:5px 9px; border-radius:15px; font-size:10px; }.today-main { align-items:center; margin-top:35px; }.today-main h2 { font-size:25px; letter-spacing:-.8px; margin:0 0 9px; }.today-main p { color:#a7b8ac; margin:0; font-size:12px; }.progress-ring { width:82px; height:82px; border-radius:50%; background:conic-gradient(var(--lime) 0 65%, #405048 65% 100%); display:grid; place-items:center; position:relative; }.progress-ring:after { content:''; position:absolute; inset:7px; border-radius:50%; background:var(--ink); }.progress-ring span { z-index:1; font-size:20px; font-weight:700; }.progress-ring small { font-size:11px; margin-left:2px; }.today-meta { color:#91a299; border-top:1px solid #34443c; margin-top:25px; padding-top:14px; display:flex; gap:8px; font-size:10px; }.start-training { margin-top:17px; padding:10px 14px; }.start-training span { margin-left:25px; font-size:17px; }.week-mark { color:#8a9991; font-size:10px; }.focus-card { color:var(--ink); }.focus-visual { height:113px; background:#f1f6ed; border-radius:9px; margin:17px 0 13px; position:relative; overflow:hidden; padding:21px; display:flex; align-items:center; }.focus-visual > span { position:relative; z-index:1; font-size:18px; line-height:1.4; }.focus-visual strong { font-size:27px; }.court-lines { position:absolute; right:11px; top:-23px; bottom:-23px; width:120px; transform:skew(-21deg); border-left:1px solid #d2dfce; border-right:1px solid #d2dfce; }.court-lines i { position:absolute; left:20px; right:20px; top:50%; border-top:1px solid #d2dfce; }.court-lines i:nth-child(2){top:24%}.court-lines i:nth-child(3){top:76%}.focus-card p { color:#738179; font-size:11px; line-height:1.6; margin:0 0 10px; }.section-heading { align-items:flex-end; margin:38px 0 17px; }.section-heading.compact { margin-top:36px; }.section-heading h2 { margin:0; font-size:18px; letter-spacing:-.5px; }.drill-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.drill-card { min-height:126px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px; display:flex; gap:14px; position:relative; }.drill-card.current { border-color:#b8d870; box-shadow:0 0 0 2px rgba(199,243,107,.28); }.drill-number { font-size:12px; color:#9aa8a1; }.drill-card.done .drill-number { color:#94ad4b; }.drill-copy { min-width:0; }.drill-copy span { color:#8d9993; text-transform:uppercase; letter-spacing:.8px; font-size:9px; }.drill-copy h3 { margin:8px 0 7px; font-size:13px; }.drill-copy p { color:#829089; margin:0; font-size:11px; line-height:1.5; }.check,.lock { margin-left:auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; }.check { background:var(--mint); color:#6f922d; }.lock { color:#a9b3ac; border:1px solid var(--line); }.round-play { width:33px; height:33px; background:var(--lime); border-radius:50%; margin-left:auto; align-self:center; font-size:11px; padding-left:3px; }.stats-grid { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:12px; }.stat-card { background:#fff; border:1px solid var(--line); border-radius:10px; min-height:155px; padding:18px; position:relative; overflow:hidden; }.stat-card > span { color:#7d8b84; font-size:11px; }.stat-card strong { font-size:29px; display:block; margin-top:11px; letter-spacing:-1px; }.stat-card strong small { font-size:12px; color:#8a9890; letter-spacing:0; font-weight:500; }.stat-change { font-size:11px; margin-top:10px; }.stat-change.up,.up { color:#7eaa31; }.stat-change.neutral,.neutral { color:#bd9651; }.stat-change i,.kpi-card p i { color:#a0aaa4; font-style:normal; margin-left:5px; font-size:10px; }.mini-bars { position:absolute; bottom:17px; right:18px; height:40px; width:92px; display:flex; gap:5px; align-items:flex-end; }.mini-bars i { flex:1; background:#dce8c8; border-radius:3px 3px 0 0; }.mini-bars i.today { background:#9fc64d; }.week-dots { position:absolute; left:18px; right:18px; bottom:21px; display:flex; gap:7px; }.week-dots i { flex:1; height:6px; background:#e2e9e1; border-radius:4px; }.week-dots i.filled { background:#a8ce55; }.quote-card { background:#ecf5dd; border-color:#e0ebca; }.quote-card p { font-size:16px; line-height:1.55; max-width:260px; margin:20px 0 8px; letter-spacing:-.3px; }.quote-card small { color:#879a76; font-size:10px; }
.page-heading { align-items:flex-end; margin-bottom:33px; }.page-heading h1 { font-size:34px; }.page-heading .primary-button,.page-heading .outline-button { margin-bottom:5px; }.plan-summary { padding:25px 28px; display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; }.plan-summary h2 { margin:0; font-size:21px; }.plan-summary p { color:var(--muted); margin:7px 0 0; font-size:12px; }.plan-progress { width:260px; }.plan-progress > div:first-child { display:flex; justify-content:space-between; align-items:end; margin-bottom:11px; }.plan-progress strong { font-size:25px; }.plan-progress span { color:var(--muted); font-size:10px; }.progress-line,.skill-bar { height:7px; border-radius:7px; background:#e4ebe1; overflow:hidden; }.progress-line i,.skill-bar i { display:block; height:100%; background:#a8d04e; border-radius:inherit; }.week-list { display:flex; flex-direction:column; gap:9px; }.week-row { display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 22px; }.week-row.current { border-color:#b8d870; background:#fbfdf8; }.week-row.locked { opacity:.56; }.week-number { width:42px; color:#9ca9a2; font-size:14px; font-weight:700; }.week-row.current .week-number { color:#8baa39; }.week-copy { flex:1; }.week-copy span { color:#87958e; font-size:10px; text-transform:uppercase; letter-spacing:.8px; }.week-copy h3 { font-size:14px; margin:5px 0 3px; }.week-copy p { color:#8a9891; font-size:11px; margin:0; }.week-score { color:#96a39b; font-size:11px; }.week-score b { margin-left:8px; color:#87ac35; }.locked .week-score b { color:#aab5ad; }
.session-layout { display:grid; grid-template-columns:290px 1fr; gap:18px; }.session-calendar { padding:22px; height:max-content; }.calendar-top { align-items:center; font-size:13px; padding-bottom:20px; }.calendar-top span { color:#9da9a2; }.calendar-week,.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; gap:5px; }.calendar-week { color:#a0aba5; font-size:10px; margin-bottom:10px; }.calendar-days button { background:transparent; height:31px; border-radius:50%; font-size:11px; }.calendar-days button.active { background:var(--lime); font-weight:700; }.calendar-days button.done { color:#82a833; position:relative; }.calendar-days button.done:after { content:''; width:4px; height:4px; background:#9cc04e; border-radius:50%; position:absolute; bottom:1px; left:calc(50% - 2px); }.calendar-days button.muted { color:#c1c9c3; }.session-feed { display:flex; flex-direction:column; gap:10px; }.log-card { display:flex; align-items:flex-start; gap:20px; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:10px; }.log-date { display:flex; align-items:center; gap:8px; min-width:77px; border-right:1px solid var(--line); padding-right:14px; }.log-date strong { font-size:25px; }.log-date span { color:#94a098; font-size:10px; line-height:1.4; }.log-main { flex:1; }.log-title { align-items:center; }.log-title h3 { font-size:14px; margin:0; }.tag { font-size:9px; padding:4px 7px; border-radius:10px; }.tag.green { background:#e8f4cf; color:#7c9e35; }.tag.yellow { background:#fff2cf; color:#ae8b36; }.log-main p { color:#7e8c85; font-size:11px; line-height:1.6; margin:8px 0 13px; }.log-meta { display:flex; gap:15px; color:#9ba6a0; font-size:10px; }
.review-layout { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; }.video-stage { min-height:370px; padding:18px; display:flex; flex-direction:column; position:relative; overflow:hidden; }.video-placeholder { flex:1; border:1px dashed #52675b; border-radius:8px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; color:#9daf9f; }.video-placeholder .play-orb { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; padding-left:3px; color:var(--ink); background:var(--lime); margin-bottom:4px; }.video-placeholder strong { color:#e4eee3; font-size:14px; }.video-placeholder span { font-size:11px; }.secondary-button { border-color:#64776a; color:#dce8dc; margin-top:9px; }.video-stage video { width:100%; height:280px; object-fit:contain; background:#101614; border-radius:8px; }.video-caption { display:flex; justify-content:space-between; font-size:10px; color:#9caf9e; padding:14px 2px 0; }.review-notes { padding:22px; }.note-count { color:#8c9b92; font-size:10px; }.note-list { margin-top:20px; }.note-item { display:flex; width:100%; text-align:left; gap:12px; padding:13px 0; border-top:1px solid #edf0ec; background:transparent; }.note-item > span { color:#94ad4a; font-size:11px; font-weight:700; padding-top:1px; }.note-item strong { font-size:12px; }.note-item p { color:#829088; font-size:11px; line-height:1.5; margin:5px 0 0; }.note-item:not(.active) > span { color:#a2ada6; }.add-note { width:100%; margin-top:17px; padding:12px; border:1px dashed #b7c4b9; border-radius:7px; color:#7a8981; background:transparent; font-size:11px; }.review-history { margin-top:37px; }.history-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.history-card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; }.thumb { height:105px; border-radius:6px; display:grid; place-items:center; color:#fff; position:relative; margin-bottom:11px; overflow:hidden; }.thumb:before { content:''; position:absolute; width:120%; height:40%; border:1px solid rgba(255,255,255,.3); transform:rotate(-24deg); }.thumb-one { background:#66857b; }.thumb-two { background:#9b9570; }.thumb span { z-index:1; background:var(--lime); color:var(--ink); width:29px; height:29px; border-radius:50%; display:grid; place-items:center; padding-left:2px; font-size:10px; }.thumb small { position:absolute; right:7px; bottom:6px; z-index:1; font-size:9px; }.history-card strong,.history-card > span { display:block; }.history-card strong { font-size:11px; }.history-card > span { color:#8c9992; font-size:10px; margin-top:5px; }.empty-history { border-style:dashed; display:grid; place-items:center; min-height:142px; background:transparent; }.empty-history div { text-align:center; color:#93a098; }.empty-history div span { display:block; font-size:25px; margin-bottom:10px; }.empty-history strong { color:#839189; }
.period-select { background:#fff; border:1px solid #c4cec6; border-radius:7px; padding:10px 12px; font-size:11px; }.progress-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.kpi-card { padding:20px; background:#fff; border:1px solid var(--line); border-radius:10px; }.kpi-card > span { color:#84928b; font-size:11px; }.kpi-card strong { display:block; font-size:29px; margin-top:13px; }.kpi-card strong small { color:#89968f; font-size:11px; font-weight:500; }.kpi-card p { font-size:10px; margin:9px 0 0; }.charts-grid { display:grid; grid-template-columns:1.65fr 1fr; gap:18px; margin-top:18px; }.chart-card,.skill-card { padding:23px; min-height:325px; }.chart-heading { align-items:center; }.chart-heading h2 { font-size:17px; margin:0; }.chart-badge { color:#83a835; background:#eff7dc; border-radius:12px; padding:5px 8px; font-size:10px; }.chart-area { flex:1; position:relative; height:230px; margin-left:28px; }.line-chart { display:flex; margin-top:24px; }.chart-y { width:20px; display:flex; flex-direction:column; justify-content:space-between; height:190px; color:#a3ada7; font-size:9px; padding-bottom:18px; }.grid-lines { position:absolute; inset:0 0 20px; display:flex; flex-direction:column; justify-content:space-between; }.grid-lines i { border-top:1px dashed #e5ebe5; }.chart-area svg { position:absolute; inset:0 0 20px; width:100%; height:190px; overflow:visible; }.chart-fill { fill:#e8f4cc; }.chart-line { fill:none; stroke:#94bd40; stroke-width:3; }.chart-area circle { fill:#94bd40; stroke:#fff; stroke-width:3; }.chart-x { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; color:#9aa69f; font-size:9px; }.skill-card { position:relative; }.skill-card h2 { font-size:18px; margin:22px 0 29px; }.light-badge { color:#d2e8a4; background:#384a38; }.skill-row { margin-bottom:22px; }.skill-row > div:first-child { display:flex; justify-content:space-between; margin-bottom:8px; }.skill-row strong { font-size:11px; }.skill-row span { color:#9bac9f; font-size:10px; }.skill-bar { background:#3b4c42; }.skill-bar i { background:var(--lime); }.light-text { color:var(--lime); position:absolute; bottom:25px; left:23px; }.light-text span { color:#fff; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--ink); color:#fff; padding:12px 16px; border-radius:8px; font-size:12px; opacity:0; pointer-events:none; transition:.25s; z-index:20; }.toast.show { opacity:1; transform:translate(-50%,0); }.log-dialog { border:0; border-radius:12px; padding:0; max-width:430px; width:calc(100% - 32px); box-shadow:0 20px 70px rgba(23,33,30,.25); color:var(--ink); }.log-dialog::backdrop { background:rgba(23,33,30,.48); }.log-dialog form { padding:26px; }.dialog-top { margin-bottom:24px; }.dialog-top h2 { margin:0; font-size:21px; }.close-dialog { background:transparent; font-size:24px; color:#8b9790; }.log-dialog label { display:block; color:#74827a; font-size:11px; margin:14px 0; }.log-dialog input,.log-dialog textarea { display:block; width:100%; margin-top:7px; border:1px solid #d4ddd4; border-radius:7px; padding:11px; color:var(--ink); background:#fafcf9; outline-color:#aed35b; }.log-dialog textarea { resize:vertical; }.dialog-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.dialog-grid small { color:#9aa59f; }.log-dialog .primary-button { width:100%; margin-top:10px; }
@media (max-width: 980px) { .sidebar { width:205px; flex-basis:205px; }.topbar { padding:0 28px; }.view-container { padding:34px 28px 60px; }.hero-grid,.charts-grid { grid-template-columns:1fr; }.focus-card { min-height:240px; }.drill-grid { grid-template-columns:1fr; }.stats-grid { grid-template-columns:1fr 1fr; }.quote-card { grid-column:span 2; }.session-layout,.review-layout { grid-template-columns:1fr; }.session-calendar { display:none; } }
@media (max-width: 680px) { .app-shell { display:block; }.sidebar { position:fixed; z-index:10; left:-250px; top:0; bottom:0; transition:.25s; box-shadow:20px 0 40px rgba(0,0,0,.18); }.sidebar.open { left:0; }.topbar { height:65px; padding:0 18px; }.mobile-menu { display:block; background:transparent; font-size:20px; margin-right:13px; }.breadcrumb { margin-right:auto; }.topbar-actions { gap:10px; }.topbar-actions .icon-button { display:none; }.view-container { padding:28px 18px 48px; }.welcome-row,.page-heading { display:block; }.welcome-row h1,.page-heading h1 { font-size:28px; }.welcome-row .outline-button,.page-heading .primary-button,.page-heading .outline-button,.period-select { margin-top:22px; }.hero-grid { gap:12px; }.today-card,.focus-card { padding:21px; }.today-main h2 { font-size:21px; }.progress-ring { width:70px; height:70px; }.section-heading { margin-top:31px; }.section-heading .text-button { display:none; }.drill-grid,.stats-grid,.progress-kpis,.history-grid { grid-template-columns:1fr; }.quote-card { grid-column:auto; }.plan-summary { display:block; }.plan-progress { width:auto; margin-top:24px; }.week-row { gap:10px; padding:14px; }.week-number { width:28px; }.week-copy h3 { font-size:13px; }.week-score { font-size:10px; }.log-card { gap:12px; padding:16px 13px; }.log-date { min-width:62px; padding-right:8px; }.log-date strong { font-size:21px; }.log-meta { flex-wrap:wrap; gap:5px 10px; }.video-stage { min-height:320px; }.chart-card,.skill-card { padding:18px; }.chart-x span { font-size:8px; }.page-heading .intro { max-width:300px; } }