:root{--green:#167c70;--deep:#16463f;--cream:#f6f8f2;--muted:#657771;--line:#e1e9e0;--orange:#e69c42;--shadow:0 8px 30px #1d56420a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--deep);background:var(--cream);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;border-radius:15px;min-height:48px;padding:12px 18px;font-weight:650}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #d99830;outline-offset:3px}input,select{width:100%;padding:14px;border:1px solid #c7d6cf;border-radius:12px;background:white;font-size:17px;color:var(--deep)}input:focus{outline:2px solid var(--green);outline-offset:2px}label{display:block;margin:14px 0;font-weight:600}label input,label select{margin-top:8px}.topbar{max-width:720px;margin:auto;padding:20px 22px;display:flex;align-items:center;justify-content:space-between}.topbar a{color:var(--deep);text-decoration:none;display:flex;align-items:center;gap:12px;font-size:19px;font-weight:800}.brand-icon{background:#dfeddf;border-radius:16px;padding:11px;font-size:24px}.topbar small{display:block;font-size:11px;letter-spacing:1px;font-weight:400;color:var(--muted);margin-top:4px}.icon-btn{background:white;padding:10px 14px}main{max-width:680px;margin:auto;padding:8px 22px 110px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--green);font-weight:700}.hero{padding:25px 0 16px}h1{font-size:32px;line-height:1.3;margin:12px 0}h2{font-size:23px;margin:6px 0 14px}h3{font-size:18px;margin:0 0 10px}p{line-height:1.75;color:var(--muted);margin:10px 0}.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;margin:16px 0;box-shadow:var(--shadow)}.island{height:180px;position:relative;overflow:hidden;background:#e9f2e3;border-radius:22px}.island svg{width:100%;height:100%}.island-label{position:absolute;left:18px;top:15px;font-size:12px;color:#477858}.primary{background:var(--green);color:white}.secondary{background:#edf3ee;color:var(--deep)}.ghost{background:transparent;color:var(--muted)}.danger{background:#fff0ec;color:#ac4131}.wide{width:100%;margin-top:14px}.row{display:flex;gap:12px;align-items:center}.row>*{flex:1}.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:12px;margin:22px 0}.stats strong{display:block;font-size:28px}.stats span{font-size:12px;color:var(--muted)}.pill{display:inline-block;background:#edf4eb;color:#497358;border-radius:20px;font-size:12px;padding:6px 11px}.note{font-size:13px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.word-list{display:flex;flex-direction:column;gap:9px}.word-row{display:flex;gap:14px;align-items:center;padding:14px;background:white;border:1px solid var(--line);border-radius:15px}.word-row>div{flex:1;min-width:0}.word-row b{font-size:18px}.word-row small{display:block;color:var(--muted);margin-top:5px;font-size:12px}.word-row .icon-btn{background:#f0f5ed;padding:10px}.progress{height:7px;background:#e3ece3;border-radius:9px;overflow:hidden;margin:14px 0 24px}.progress div{height:100%;background:var(--green);transition:width .3s}.learning{text-align:center;padding:22px 0}.art{height:160px;display:flex;justify-content:center;align-items:center;margin-bottom:14px}.art svg{width:240px;height:160px}.target{font-size:38px;font-weight:800;margin:12px 0;letter-spacing:1px}.meaning{font-size:26px;font-weight:700;color:var(--deep)}.sentence{font-size:16px;color:var(--muted)}.listen{background:#eaf3e9;color:var(--green)}.answer-input{font-size:26px;text-align:center;letter-spacing:2px;margin:16px 0}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.choices button{background:white;color:var(--deep);border:1px solid #d5e1d7;min-height:65px;line-height:1.5}.feedback{border-radius:15px;text-align:left;padding:17px;background:#eef7ec;margin:18px 0;line-height:1.7}.feedback.wrong{background:#fff3df}.feedback strong{color:var(--deep)}.hint{padding:14px;background:#fff4db;border-radius:12px;font-size:17px;letter-spacing:2px;margin:14px 0}.reward{font-size:68px;margin:20px}.badges{display:flex;flex-wrap:wrap;gap:8px}.hidden{display:none!important}#nav{position:fixed;bottom:0;left:0;right:0;background:#fffffff2;border-top:1px solid var(--line);backdrop-filter:blur(10px);display:flex;justify-content:center;padding:8px 12px max(8px,env(safe-area-inset-bottom));z-index:10}#nav button{background:transparent;color:#8b9892;display:flex;flex-direction:column;align-items:center;gap:5px;width:min(33%,210px);font-size:19px;padding:8px}#nav span{font-size:12px}#nav .active{color:var(--green);background:#eff5eb}#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);background:#173d35;color:white;padding:13px 20px;border-radius:14px;max-width:90vw;width:max-content;z-index:30;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}dialog{border:1px solid var(--line);border-radius:22px;padding:25px;max-width:430px;width:90vw}dialog::backdrop{background:#15362b88}.error{color:#ae4133}.report{display:grid;grid-template-columns:1fr 1fr;gap:12px}.report div{padding:17px;border-radius:14px;background:#f3f6ef}.report strong{display:block;font-size:26px;margin-bottom:5px}.report span{font-size:12px;color:var(--muted)}.empty{text-align:center;padding:25px}.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.tag-row button{font-size:13px;min-height:38px;padding:8px 12px}.tag-row .selected{background:var(--green);color:white}.backup-note{background:#fff5dd;padding:13px;border-radius:12px}footer{font-size:12px;color:var(--muted);text-align:center;padding:18px}.spell-help{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.spell-help span{padding:9px;background:#f0f4ed;border-radius:7px;font-size:22px}details{margin:16px 0}summary{cursor:pointer;padding:10px 0;font-weight:600}li{color:var(--muted);line-height:1.8}.skill{font-size:12px;display:block;color:var(--muted);margin-top:6px}@media(max-width:360px){main{padding-left:15px;padding-right:15px}.topbar{padding:16px}h1{font-size:28px}.card{padding:18px}.choices{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}body.practice #nav{display:none}body.practice main{padding-bottom:30px}

.offline-card{background:#fffaf0;border-color:#eadbb6}.offline-card.ready{background:#f1f8ee;border-color:#cbdcc3}.offline-card details{font-size:13px}.offline-card summary{font-size:14px}.offline-card h3{margin:0}

/* Photo import and local picture gallery */
.photo-picker{padding:16px;border:2px dashed #a6c7ba;border-radius:16px;background:#f3f8f2}.photo-picker input{padding:8px 0;width:100%}.photo-import textarea{width:100%;padding:12px;border:1px solid #b7cbbf;border-radius:12px;font:inherit;resize:vertical}.import-status{padding:12px;background:#edf5ec;border-radius:12px;color:#275e49;font-size:14px}.import-row{padding:14px;margin:14px 0;border:1px solid #dae5d8;border-radius:16px}.include-row{display:flex;align-items:center;gap:10px}.include-row input[type=checkbox]{width:22px;height:22px;margin:0}.import-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.import-preview{max-width:200px;margin:8px auto}.import-preview svg,.gallery-image svg{width:100%;display:block}.gallery-row{display:grid;grid-template-columns:95px 1fr;gap:14px;border-top:1px solid #e0e8db;padding:16px 0}.gallery-row label{font-size:13px}.photo-import details{margin-top:16px}.photo-import button.wide{margin-top:12px}.photo-import input:disabled{opacity:.6}.art .pending-picture{padding:30px 10px}.pending-picture{text-align:center;font-size:14px;color:#64756c;padding:14px;background:#f0f4ed;border-radius:12px}.pending-picture small{display:block;margin-top:6px}@media(max-width:430px){.import-fields{grid-template-columns:1fr}.gallery-row{grid-template-columns:75px 1fr}}