@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#172936;background:#f6f8f5}*{box-sizing:border-box}body{margin:0;min-height:100vh}header{height:76px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1160px)/2));border-bottom:1px solid #e8eee9;position:sticky;top:0;z-index:5}.brand{text-decoration:none;color:#172936;font:800 27px Outfit,Arial}.brand span{color:#46b27a}.brand .dot{color:#ffb65c}nav{display:flex;gap:25px}nav a{color:#687a77;text-decoration:none;font-size:14px;font-weight:700}nav a:hover,nav a.active{color:#218a59}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:13px;padding:13px 20px;font-weight:700}button:disabled{opacity:.5;cursor:default}.primary{background:#278e60;color:white;box-shadow:0 8px 20px #278e6026}.primary:hover{background:#197c50}.secondary{background:#e7f3e9;color:#206b47}.plain{background:#fff;color:#246b49;border:1px solid #d9e8da}.danger{background:#fff2ee;color:#a64732}main{max-width:1050px;margin:0 auto;padding:45px 22px 90px;min-height:75vh}footer{text-align:center;padding:28px;color:#83928f;font-size:13px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Outfit,Arial}h1{font-size:clamp(34px,5vw,62px);line-height:1.07;letter-spacing:-.04em}h2{font-size:32px;letter-spacing:-.035em}.muted{color:#778987}.eyebrow{color:#278e60;text-transform:uppercase;letter-spacing:.13em;font-weight:800;font-size:12px}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:65px;align-items:center;padding:55px 0 70px}.hero p{font-size:19px;line-height:1.65;color:#657673;max-width:490px}.hero .primary{margin-top:18px}.visual{min-height:340px;background:#d9f2e3;border-radius:35px;display:grid;place-items:center;transform:rotate(3deg);box-shadow:25px 25px #fbe8cb}.sample{text-align:center;background:white;padding:45px 35px;border-radius:24px;box-shadow:0 15px 40px #1e725921;transform:rotate(-3deg);width:80%}.sample strong{font:800 34px Outfit;display:block}.sample small{display:block;color:#8b9d96;margin:13px}.sample b{color:#278e60}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card,.panel{background:white;border:1px solid #edf0ea;border-radius:22px;padding:25px;box-shadow:0 8px 30px #24432c0a}.card strong{display:block;font:700 32px Outfit;color:#1d5f43;margin-top:12px}.section{margin:45px 0}.topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.chip{background:#e7f3e9;color:#277e54;border-radius:40px;padding:8px 14px;font-size:13px;font-weight:700}.study{max-width:650px;margin:auto}.studyhead{display:flex;justify-content:space-between;align-items:center}.bar{height:10px;background:#e7eee7;border-radius:20px;overflow:hidden;margin:20px 0 27px}.bar>i{display:block;height:100%;background:#42b681;border-radius:20px}.wordcard{text-align:center;background:white;border:1px solid #e6eee8;border-radius:28px;padding:40px 30px;box-shadow:0 22px 50px #2a66421a;min-height:325px}.wordcard h1{font-size:clamp(37px,7vw,65px);margin:22px 0 4px;overflow-wrap:anywhere}.ipa{font-size:20px;color:#84958c}.audio{background:#e7f5ea;color:#218354;margin:22px 5px}.meaning{border-top:1px solid #e6eee9;margin-top:15px;padding-top:25px}.meaning strong{font-size:28px;color:#215d40}.example{background:#f7f9f6;padding:18px;border-radius:14px;margin-top:16px;line-height:1.6}.actions{display:flex;gap:12px;margin-top:20px}.actions button{flex:1;padding:18px}.auth{max-width:460px;margin:35px auto}.auth h2{text-align:center}.field{display:block;margin:17px 0;color:#4b615b;font-weight:700;font-size:14px}.field input,.field select,.search{display:block;width:100%;padding:14px;margin-top:8px;border:1px solid #dce5dd;border-radius:12px;background:white;outline-color:#65b98a}.auth .primary{width:100%;margin-top:8px}.auth p{text-align:center;margin-top:20px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.choices{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0 28px}.choice{border:1px solid #dbe8dc;padding:10px 14px;border-radius:30px;cursor:pointer;background:#fff}.choice:has(input:checked){background:#e1f4e7;border-color:#69b78a;color:#1c784c}.choice input{accent-color:#258c5b}.list{display:grid;gap:12px;margin-top:20px}.item{display:flex;justify-content:space-between;align-items:center;gap:18px;background:white;padding:20px;border-radius:16px;border:1px solid #ebeee9}.item b{display:block;font-size:20px}.item small{color:#8a9991}.notice{background:#fff3db;color:#77532d;border-radius:14px;padding:16px;margin:15px 0}.error{color:#b53839;font-weight:700}.success{color:#21875b}.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pricing .card{min-height:250px}.pricing .card.featured{border:2px solid #51ae77}.pricing .card h3{font-size:25px}.pricing .card strong{font-size:35px}.pricing .card p{line-height:1.8}#menu{display:none;background:none}.empty{text-align:center;padding:45px}.small{font-size:13px}@media(max-width:750px){header{height:65px;padding:0 20px}#menu{display:block}nav{display:none;position:absolute;top:65px;left:0;right:0;background:white;box-shadow:0 15px 25px #1112;padding:20px;flex-direction:column;gap:18px}nav.open{display:flex}main{padding:35px 17px 70px}.hero{grid-template-columns:1fr;padding:20px 0;gap:35px}.visual{min-height:260px}.grid,.pricing{grid-template-columns:1fr}.wordcard{padding:32px 19px}.actions button{padding:16px 9px}.item{align-items:flex-start;flex-direction:column}}

.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.password-wrap{position:relative}.field .password-wrap input{padding-right:70px}.password-toggle{position:absolute;right:4px;top:4px;bottom:4px;background:transparent;color:#277e54;padding:8px 12px}.checkline{display:flex;align-items:center;gap:8px;margin:20px 0;font-size:14px}.form-message{font-size:14px;line-height:1.6;margin-top:14px}.device-text{overflow-wrap:anywhere;max-width:650px}.account-grid h3{font-size:23px}.account-grid input[readonly]{background:#f5f7f4;color:#687a77}@media(max-width:750px){.account-grid{grid-template-columns:1fr}}

.actions.wrap{flex-wrap:wrap}.actions.wrap button{white-space:normal}#finish-study{display:block;margin:1rem auto}#message:empty{display:none}

/* Admin tables stay scrollable on narrow screens. */
.admin-tabs,.admin-counts,.admin-pager{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:18px 0}.admin-tabs a{padding:10px 16px;border-radius:10px;background:#edf3ef;color:#285b43;text-decoration:none}.admin-tabs a.selected{background:#278e60;color:white}.admin-counts span{padding:8px 12px;background:#eff5f1;border-radius:8px}.admin-pager{justify-content:space-between}.admin-filters{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.admin-filters input{flex:1;min-width:160px}.admin-filters select{max-width:230px}.table-scroll{overflow-x:auto}.admin-table{width:100%;border-collapse:collapse;font-size:14px}.admin-table th,.admin-table td{text-align:left;padding:14px 10px;border-bottom:1px solid #e2e9e5;vertical-align:top;overflow-wrap:anywhere}.admin-table th{white-space:nowrap;background:#f4f7f5}.admin-table button{white-space:nowrap}.field textarea{width:100%;font:inherit;padding:12px;border:1px solid #d4ded7;border-radius:10px}fieldset{border:1px solid #d4ded7;border-radius:10px;padding:12px;margin:16px 0}.admin-filters input,.admin-filters select{padding:10px;border:1px solid #d4ded7;border-radius:8px;font:inherit}#delete-user-box .notice{border:1px solid #d7a5a5}.admin-table small{color:#607268}@media(max-width:700px){.admin-table{min-width:620px}.admin-filters>*{flex:1 1 100%}.admin-filters select{max-width:none}}

/* Admin: bulk actions and plan editing */
.admin-bulk{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0;padding:12px;border-radius:12px;background:#edf3ef}.admin-bulk select,.admin-bulk input{max-width:220px}.admin-bulk input[type=number]{width:210px}#member-box:empty,#bulk-box:empty,#plan-box:empty{display:none}

.payment-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}.payment-qr{width:100%;max-width:330px;display:block;margin:auto}.payment-layout p{overflow-wrap:anywhere}.pricing .card.current-plan{background:#f4f7f4}.pricing .card.current-plan button:disabled{opacity:.65}@media(max-width:700px){.payment-layout{grid-template-columns:1fr}}

/* Compact study card and keep the answer controls reachable on phones. */
.study{overflow-anchor:none}
.study .wordcard{min-height:0;padding:26px 28px}
.study .wordcard h1{margin:0 0 12px}
.study .ipa{overflow-wrap:anywhere}
.study .wordcard .audio{margin:17px 5px 0}
.study .meaning{padding-top:12px;margin-top:14px}
.study .example{padding:13px;margin-top:12px}
.study .example .audio{margin-top:10px}
.study .actions:has(#show[hidden]){display:none}
@media(max-width:750px){
 main:has(.study){padding-top:18px;padding-bottom:calc(115px + env(safe-area-inset-bottom))}
 .study .bar{margin:12px 0 17px}
 .study .wordcard{padding:21px 16px;border-radius:22px;box-shadow:0 12px 28px #2a664217}
 .study .wordcard h1{font-size:clamp(34px,10vw,50px);margin-bottom:8px}
 .study .ipa{font-size:17px}
 .study .wordcard .audio{padding:10px 16px;margin-top:14px}
 .study .meaning{padding-top:10px;margin-top:12px}
 .study .meaning strong{font-size:23px}
 .study .example{padding:11px;line-height:1.4}
 .study .example .audio{margin-top:8px}
 .study #buttons{position:fixed;left:50%;bottom:0;z-index:8;transform:translateX(-50%);width:min(100%,650px);margin:0;padding:10px max(17px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(17px,env(safe-area-inset-right));background:#f6f8f5f5;box-shadow:0 -8px 24px #24432c17}
.study #buttons button{padding:14px 8px}
}
.google-divider{display:flex;align-items:center;gap:12px;margin:19px 0 14px;color:#83928f;font-size:13px}
.google-divider:before,.google-divider:after{content:"";height:1px;flex:1;background:#dce5dd}
.google-button{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;background:#fff;border:1px solid #d6e0d9;color:#234337;box-shadow:none}
.google-button:hover:not(:disabled){background:#f6f8f5}
.google-account{padding:14px 0;margin:16px 0;border-top:1px solid #e6eee9;border-bottom:1px solid #e6eee9}
.google-account p{margin:0 0 9px}
.google-account p:last-child{margin:9px 0 0}

/* Pricing: current membership status and purchase actions. */
.pricing .plan-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:36px;margin-bottom:18px}
.pricing .plan-heading h3{margin:0}
.plan-current{display:inline-flex;background:#e0f2e6;color:#206b47;border-radius:30px;padding:7px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.pricing button.plan-inactive{background:#eef0ef;color:#6c7873;box-shadow:none}
.pricing button.plan-outline{background:#fff;color:#277e54;border:1px solid #9ac6ab;box-shadow:none}
.pricing button:disabled,.pricing .card.current-plan button:disabled{opacity:1;cursor:not-allowed}
.pricing .plan-note{font-size:13px;line-height:1.5;margin:12px 0 0}

/* Mobile learning dashboard and bottom navigation. */
.mobile-nav{display:none}
.mobile-nav[hidden]{display:none!important}
.dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.dashboard-heading h2{margin:8px 0 0;overflow-wrap:anywhere}
.dashboard-heading .chip{flex-shrink:0}
.today-card{margin-bottom:18px;padding:26px}
.today-card h3{font-size:18px;margin:0}
.today-count{font-size:14px;font-weight:700;color:#376354;text-align:right}
.today-card .bar{margin:20px 0 16px;height:9px}
.today-card p{line-height:1.6;margin-bottom:20px}
.dashboard-action{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:13px;text-decoration:none;font-weight:700}
.dashboard-action svg{width:20px;height:20px}
.dashboard-action:focus-visible,.mobile-nav a:focus-visible,.stat-link:focus-visible{outline:3px solid #278e60;outline-offset:3px}
.review-card{margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.review-summary{display:flex;align-items:flex-start;gap:14px}
.dashboard-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;background:#e7f3e9;color:#206b47;border-radius:13px}
.review-card h3{font-size:18px;margin:0 0 6px}
.review-card p{font-size:14px;line-height:1.5;margin:0}
.review-card .dashboard-action{flex-shrink:0}
.dashboard-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stat-link{text-decoration:none;color:inherit;min-width:0}
.stat-link>span{display:flex;align-items:center;gap:8px;font-size:14px}
.stat-link svg{width:20px;height:20px;color:#278e60;flex-shrink:0}
.stat-link small{color:#647b70;display:block;margin-top:8px;font-size:12px}
.dashboard-text-link{color:#206b47;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.progress-link{margin-top:12px}
.account-shortcuts{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.account-shortcuts a{background:#e7f3e9;color:#206b47;border-radius:12px;padding:12px 15px;min-height:44px;text-decoration:none;font-size:14px;font-weight:700}
@media(max-width:750px){
 body.has-mobile-nav main{padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}
 body.has-mobile-nav footer{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
 .mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;left:0;right:0;bottom:0;top:auto;background:#fff;border-top:1px solid #dce8df;padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 20px #24432c0a;z-index:20}
 .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;color:#60756b;text-decoration:none;border-radius:12px;font-size:11px;font-weight:700;line-height:1.3}
 .mobile-nav a.active{color:#176e44;background:#e7f3e9}
 .mobile-nav svg{width:23px;height:23px}
 .dashboard-heading{align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:20px}
 .dashboard-heading h2{font-size:27px;line-height:1.2}
 .dashboard-heading .chip{font-size:12px;padding:7px 11px}
 .today-card{padding:20px;margin-bottom:14px}
 .today-card .topline{align-items:flex-start;flex-wrap:wrap;gap:8px}
 .today-card h3{font-size:17px;line-height:1.4}
 .today-count{text-align:left;font-size:13px}
 .today-card .bar{margin:16px 0 14px}
 .today-card p{font-size:15px;line-height:1.6;margin-bottom:16px}
 .today-card .dashboard-action{width:100%;font-size:16px}
 .review-card{display:block;padding:20px;margin-bottom:14px}
 .review-card h3{font-size:17px;line-height:1.4}
 .review-card .dashboard-action{width:100%;margin-top:16px;min-height:48px}
 .review-card .dashboard-text-link{margin-top:10px}
 .dashboard-stats{gap:12px}
 .dashboard-stats .card{padding:18px 14px;border-radius:18px}
 .dashboard-stats .card strong{font-size:30px}
 .stat-link>span{gap:6px;font-size:13px}
 .account-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .account-shortcuts a{display:flex;align-items:center;font-size:13px}
}

/* Four learning plans; VIP is the final card. */
@media(min-width:1001px){.pricing{grid-template-columns:repeat(4,minmax(0,1fr))}.pricing .card{padding:22px 18px}.pricing .card strong{font-size:32px}}
@media(min-width:751px) and (max-width:1000px){.pricing{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep study answers above the mobile navigation, including iPhone safe area. */
@media(max-width:750px){
 body.has-mobile-nav .study #buttons{
  bottom:calc(66px + env(safe-area-inset-bottom,0px));
  z-index:21;
  padding-bottom:10px;
 }
 body.has-mobile-nav main:has(.study){
  padding-bottom:calc(170px + env(safe-area-inset-bottom,0px));
 }
 .study #buttons button{min-height:48px}
}

/* Place session ending above the word card; shortcuts are desktop-only. */
.study-toolbar{display:flex;justify-content:flex-end;margin:-10px 0 16px}
.study .study-toolbar #finish-study,.study .study-toolbar #pause-review{display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:44px;padding:10px 14px;font-size:13px;box-shadow:none}
@media(max-width:750px){
 .study-toolbar{margin:-5px 0 12px}
 .study .study-shortcuts{display:none}
}

.study .study-toolbar.review-toolbar{margin:12px 0 16px}