:root{--ink:#203c37;--green:#174e44;--mint:#e7f1e9;--paper:#f7f7f0;--white:#fff;--muted:#65766f;--line:#dce3d9;--orange:#e8b381;--red:#aa3837;--radius:20px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 "Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:0;border-radius:12px;min-height:46px;padding:11px 17px;color:var(--ink);background:#edf2eb;font-weight:650}button:hover{filter:brightness(.97)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dca56c;outline-offset:3px}button:disabled{opacity:.45;cursor:default}a{color:var(--green)}h1,h2,h3,p{margin:0}h1{font-size:34px;line-height:1.4;letter-spacing:.02em}h2{font-size:23px}h3{font-size:18px}.small,small{font-size:12px;color:var(--muted)}.vi{font-size:13px;color:var(--muted);font-weight:450}.shell{max-width:1440px;margin:auto;display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);padding:32px 22px;display:flex;flex-direction:column;gap:30px}.brand{display:flex;gap:10px;align-items:center;font-weight:750;font-size:18px;line-height:1.4}.brand-icon{display:grid;place-items:center;background:var(--green);color:#fff;border-radius:13px;width:43px;height:43px;font-size:22px;flex-shrink:0}.brand small{font-size:10px;letter-spacing:.07em}.nav{display:flex;flex-direction:column;gap:7px}.nav button{display:flex;align-items:center;gap:12px;background:transparent;text-align:left;padding:11px 12px;font-size:14px}.nav button.active{background:var(--mint);color:var(--green)}.nav svg{width:21px;height:21px;flex-shrink:0}.side-note{margin-top:auto;color:var(--muted);font-size:11px;border-top:1px solid var(--line);padding-top:16px}.main{padding:0 42px 40px;min-width:0}.topbar{min-height:88px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.crumb{font-size:12px;color:var(--muted)}.user{display:flex;align-items:center;gap:9px;max-width:60%}.avatar{width:32px;height:32px;background:#d6e8dc;color:var(--green);border-radius:50%;display:grid;place-items:center;font-weight:bold;flex-shrink:0}.username{overflow-wrap:anywhere;font-size:13px}.user button{background:transparent;padding:5px;min-height:40px}.content{padding-top:30px}.eyebrow{font-size:11px;color:#4b7567;font-weight:700;letter-spacing:.14em;margin-bottom:9px}.hero{display:grid;grid-template-columns:1.15fr 1fr;background:var(--mint);border:1px solid #dce8d9;border-radius:26px;overflow:hidden;position:relative;min-height:280px}.hero-copy{padding:32px;z-index:1}.hero h1{font-size:36px;margin-bottom:12px}.hero p{font-size:14px;color:#527065}.hero .actions{margin-top:23px}.hero-art{position:relative;min-height:260px;background:radial-gradient(ellipse,#d4e5d5,transparent 70%)}.hero-art img{position:absolute;object-fit:contain;mix-blend-mode:multiply}.hero-art .a{width:65%;height:65%;right:4%;top:7%;transform:rotate(-7deg)}.hero-art .b{width:55%;height:40%;bottom:1%;left:5%;transform:rotate(-13deg)}.hero-art .c{width:30%;height:45%;bottom:6%;right:3%;transform:rotate(9deg)}.art-label{position:absolute;top:24px;left:18px;color:#568474;font-size:11px;letter-spacing:.16em}.primary{background:var(--green);color:#fff}.outline{background:transparent;border:1px solid #bbcfc0}.white{background:#fff}.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:22px 0 28px}.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px 20px;display:flex;align-items:center;gap:14px}.stat .stat-icon{background:#f2f4ec;border-radius:12px;padding:10px;display:flex}.stat svg{width:22px;height:22px}.stat strong{font-size:26px;line-height:1.3}.stat small{margin-left:5px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:27px 0 14px}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.menu-card{background:white;border:1px solid var(--line);border-radius:18px;min-height:167px;padding:22px;text-align:left;position:relative;display:flex;flex-direction:column;align-items:start;gap:7px}.menu-card .icon{height:42px;width:42px;background:#e8f1e9;border-radius:12px;padding:9px;margin-bottom:6px;display:flex}.menu-card:nth-child(2n) .icon{background:#f9eddd}.menu-card svg{width:24px;height:24px}.menu-card .arrow{position:absolute;top:20px;right:20px;color:#85968c}.menu-card strong{font-size:17px}.menu-card .vi{font-size:12px}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;margin:18px 0}.tip{font-size:13px;color:var(--muted);background:#eff2e9;border-radius:12px;padding:14px 17px;margin-top:18px}.title-row{display:flex;align-items:start;justify-content:space-between;gap:14px;margin-bottom:22px}.title-row h1{font-size:28px}.filters{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.filters input{flex:1;min-width:180px}.filters select{flex:0 1 210px}input,select{min-height:46px;border:1px solid #cbd7cd;border-radius:11px;background:white;color:var(--ink);padding:10px 13px;max-width:100%}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.word-card{background:#fff;border:1px solid var(--line);border-radius:19px;overflow:hidden;min-width:0}.word-card img{display:block;width:100%;height:170px;object-fit:contain;background:#fff;padding:12px}.word-body{padding:17px}.word-body h2{font-size:24px;overflow-wrap:anywhere}.word-body .reading{font-size:14px;color:var(--muted);margin:3px 0 8px}.word-body .translation{font-size:16px;font-weight:600;color:var(--green);margin-bottom:10px}.word-body .note{font-size:13px;white-space:pre-line;overflow-wrap:anywhere}.word-body details{margin-top:10px;font-size:12px;white-space:pre-line;overflow-wrap:anywhere}.word-body summary{cursor:pointer;color:var(--green);font-weight:bold}.word-actions{display:flex;gap:6px;margin-top:15px;flex-wrap:wrap}.word-actions button{font-size:12px;padding:8px 10px}.selected{background:var(--green);color:#fff}.badge{font-size:11px;border-radius:7px;background:var(--mint);padding:4px 7px;display:inline-block}.single{max-width:590px;margin:auto}.single .word-card img{height:250px}.pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin:22px 0}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.lesson-card{background:white;border:1px solid var(--line);border-radius:18px;padding:20px}.lesson-n{font-size:12px;color:var(--green);letter-spacing:.07em;margin-bottom:8px}.lesson-card h3{min-height:55px}.lesson-card .vi{min-height:48px;margin:5px 0}.progress{height:6px;background:#e7ebe3;border-radius:6px;overflow:hidden;margin:16px 0}.progress span{display:block;height:100%;background:#4c8872}.lesson-card .actions button{flex:1;font-size:12px;padding:9px 10px}.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}.field label{font-weight:650}.quiz{max-width:730px;margin:auto}.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.quiz-question{text-align:center;margin:24px 0;font-size:28px;font-weight:700;overflow-wrap:anywhere}.quiz-image{display:block;width:100%;height:220px;object-fit:contain;background:white}.choices{display:grid;gap:11px}.choice{display:flex;align-items:center;gap:14px;text-align:left;border:1px solid #ced9cd;background:white;padding:14px;min-height:60px}.choice .num{background:#edf2eb;border-radius:9px;width:31px;height:31px;display:grid;place-items:center;flex-shrink:0}.choice.correct{border:2px solid #4d8b64;background:#eef8ed}.choice.wrong{border:2px solid #bc665a;background:#fcf0ea}.feedback{border-radius:14px;padding:18px;background:var(--mint);margin-top:18px;overflow-wrap:anywhere}.feedback.bad{background:#faede6}.feedback h3{margin-bottom:9px}.history-item{background:white;border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:14px}.history-item .rate{font-size:24px;color:var(--green);font-weight:700}.history-item .actions{flex-shrink:0}.report-wrap{max-width:430px;margin:auto}.report{background:white;border:1px solid #cbd9cb;border-radius:23px;overflow:hidden}.report-head{background:var(--green);color:white;padding:19px 24px;display:flex;gap:12px;align-items:center}.report-head .vi{color:#c7dfd2}.report-body{padding:20px 24px}.report .name{font-size:26px;font-weight:750;overflow-wrap:anywhere;margin:5px 0 14px}.report .content-label{font-size:18px;font-weight:700;overflow-wrap:anywhere}.report-date{display:flex;justify-content:space-between;gap:10px;font-size:15px;margin:16px 0;border-top:1px solid var(--line);padding-top:14px}.score{display:flex;align-items:center;justify-content:space-between;margin:16px 0;background:var(--mint);border-radius:15px;padding:17px}.score strong{font-size:38px;line-height:1.1;color:var(--green)}.score small{font-size:14px}.report-counts{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:8px;margin-bottom:17px}.report-counts strong{display:block;font-size:21px}.complete{font-size:13px;text-align:center;border:1px solid #cadcca;padding:9px;border-radius:9px;color:var(--green)}.record-id{font-size:9px;overflow-wrap:anywhere;color:var(--muted);margin-top:10px}.report-foot{background:#f4f5ec;padding:13px 20px;font-size:12px;text-align:center}.report-foot .vi{font-size:11px;margin-top:4px}.report-actions{margin:16px 0;justify-content:center}.onboarding{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 80% 0%,#dceadc,transparent 50%),var(--paper)}.welcome{max-width:520px;width:100%;background:white;border:1px solid var(--line);padding:36px;border-radius:26px}.welcome h1{margin:25px 0 9px;font-size:28px}.welcome .field{margin-top:27px}.welcome .primary{width:100%}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}td,th{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:#f2f4ee}td a{overflow-wrap:anywhere}.error{color:var(--red)}.empty{text-align:center;padding:50px 25px;color:var(--muted)}.bottomnav{display:none}svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon-big{width:43px;height:43px}.badges{display:flex;gap:7px;flex-wrap:wrap}.source-copy{font-size:13px}.source-copy p{margin:9px 0}.danger-note{margin-top:12px;background:#fff1de;padding:12px;border-radius:10px;font-size:12px}.review-list .word-card img{height:150px}#toast{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);background:#203c37;color:white;border-radius:12px;padding:12px 20px;z-index:100;max-width:90%;display:none;font-size:13px}.invisible{display:none}.block{display:block;width:100%}.offline{font-size:11px;color:#9f5d22}.source-filter{margin:15px 0}.radio-row{display:flex;gap:10px;flex-wrap:wrap}.radio-row button{flex:1}.storage-warning{background:#ffdfd6;color:#89372d;padding:12px;border-radius:12px;margin:10px 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1200px){.content{max-width:1120px;margin:auto}.main{padding-left:48px;padding-right:48px}}@media(max-width:1050px){.shell{grid-template-columns:200px 1fr}.main{padding:0 25px 35px}.sidebar{padding:25px 16px}.hero h1{font-size:30px}.cards-grid,.lesson-grid,.menu-grid{grid-template-columns:repeat(2,1fr)}.stat{padding:14px;gap:9px}.stat .stat-icon{display:none}.hero-copy{padding:25px}}@media(max-width:700px){body{font-size:14px}.shell{display:block}.sidebar{display:none}.main{padding:0 16px 95px}.topbar{min-height:70px}.crumb{font-size:11px;max-width:40%}.content{padding-top:21px}.title-row h1{font-size:24px}.user{max-width:58%}.username{font-size:12px}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:24px 21px 18px}.hero h1{font-size:30px}.hero-art{height:160px;min-height:160px}.hero-art .a{width:45%;height:85%;right:9%;top:0}.hero-art .b{width:46%;height:65%;left:6%;bottom:0}.hero-art .c{width:24%;height:60%;right:0;bottom:0}.art-label{top:9px;left:23px}.stats{gap:8px;margin:16px 0 24px}.stat{display:block;padding:12px 10px}.stat strong{font-size:24px}.stat .vi{font-size:10px}.stat small{font-size:10px}.menu-grid{gap:10px}.menu-card{padding:17px 14px;min-height:154px}.menu-card strong{font-size:15px}.menu-card .vi{font-size:11px}.menu-card .arrow{right:13px}.panel{padding:18px}.cards-grid{grid-template-columns:1fr 1fr;gap:10px}.word-card img{height:140px;padding:8px}.word-body{padding:13px}.word-body h2{font-size:20px}.word-body .translation{font-size:14px}.word-actions{gap:5px}.word-actions button{font-size:11px;padding:7px 8px;min-height:42px}.word-body .note{font-size:12px}.single .word-card img{height:230px}.single .word-body{padding:20px}.single .word-body h2{font-size:29px}.lesson-grid{grid-template-columns:1fr 1fr;gap:10px}.lesson-card{padding:16px 12px}.lesson-card h3{font-size:16px;min-height:51px}.lesson-card .vi{font-size:11px;min-height:52px}.lesson-card .actions{gap:6px}.lesson-card .actions button{padding:7px 6px;font-size:11px}.setting-grid{grid-template-columns:1fr;gap:0}.history-item{flex-wrap:wrap}.history-item .actions{width:100%;justify-content:space-between}.report-body{padding:17px 20px}.report-head{padding:15px 20px}.report .name{font-size:24px}.report-date{font-size:14px}.score{padding:15px;margin:13px 0}.score strong{font-size:36px}.report-counts{margin-bottom:13px}.report-foot{padding:11px 15px}.bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.98);border-top:1px solid var(--line);padding:7px 4px max(8px,env(safe-area-inset-bottom));z-index:50;justify-content:space-around}.bottomnav button{padding:4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;background:transparent;border-radius:9px}.bottomnav button.active{color:var(--green);background:var(--mint)}.bottomnav svg{width:20px;height:20px}.welcome{padding:26px}.filters{gap:8px}.filters input{min-width:100%;width:100%}.filters select{flex:1;min-width:130px}.quiz-question{font-size:25px}.quiz-image{height:190px}.feedback{padding:15px}.single .pagination{margin:15px 0}.section-head h2{font-size:21px}}@media(max-width:350px){.cards-grid,.lesson-grid{grid-template-columns:1fr}.hero h1{font-size:26px}.menu-card strong{font-size:13px}.report-date{flex-direction:column}.report .name{font-size:21px}}
@media print{.sidebar,.topbar,.bottomnav,.report-actions,.tip,.title-row{display:none!important}.main,.content{padding:0}.report-wrap{width:400px}.report{break-inside:avoid}}
@media(max-width:700px){.main:has(.report-wrap) .topbar{min-height:58px}.main:has(.report-wrap) .content{padding-top:12px}.report-head{padding:12px 18px}.report-head h2{font-size:20px}.report-head .vi{font-size:11px}.report-head .icon-big{width:30px;height:30px}.report-body{padding:13px 18px}.report-body>.small{font-size:10px}.report .name{font-size:22px;line-height:1.35;margin:3px 0 10px}.report .content-label{font-size:16px;line-height:1.4}.report-date{font-size:13px;margin:10px 0;padding-top:10px}.score{padding:11px 14px;margin:10px 0}.score strong{font-size:32px}.report-counts{margin-bottom:10px}.report-counts .small{font-size:10px}.report-counts strong{font-size:18px}.complete{font-size:11px;padding:6px}.record-id{font-size:8px;margin-top:7px}.report-foot{font-size:10px;padding:9px 12px}.report-foot .vi{font-size:10px}.report-actions button{font-size:12px}.report .badge{font-size:10px}}
.language-switch{display:flex;gap:4px;background:#e8eee6;padding:3px;border-radius:11px;flex-shrink:0}.language-switch button{font-size:12px;min-height:34px;padding:6px 11px;white-space:nowrap;background:transparent}.language-switch .selected{background:var(--green);color:white}.header-tools{display:flex;gap:18px;align-items:center}.header-tools .user{max-width:200px}.brand{font-size:17px}.brand small{font-size:12px;letter-spacing:0;line-height:1.5}.hero-art .hero-scene{position:static;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:10px}.new-materials{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.material-button{background:#fff;border:1px solid var(--line);text-align:left;padding:18px;display:flex;flex-direction:column;gap:9px}.material-button small{color:var(--muted)}.word-body .badge{font-size:10px;line-height:1.4;margin-bottom:8px;max-width:100%}.check-question{padding:13px 0;border-bottom:1px solid var(--line)}.check-question summary{cursor:pointer}.check-question p{margin:10px 0;color:var(--green)}.lesson-card h3{min-height:42px}.word-card img{height:185px}.word-body h2{font-size:22px}.single .word-body h2{font-size:26px}.word-body{overflow-wrap:anywhere}.report-head h2{line-height:1.4}.report-wrap .report-foot{font-size:13px}.topbar .crumb{max-width:36%}
@media(max-width:700px){.topbar{flex-wrap:wrap;padding:10px 0;gap:8px}.header-tools{gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:64%}.header-tools .user{max-width:190px}.language-switch button{font-size:11px;padding:5px 9px}.topbar .crumb{font-size:10px;line-height:1.5;max-width:35%}.header-tools .username{max-width:112px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar{width:25px;height:25px;font-size:11px}.user button{min-height:30px;padding:2px}.new-materials{grid-template-columns:1fr}.material-button{padding:15px}.hero-art{height:205px;min-height:205px}.hero-art .hero-scene{width:100%;height:100%;padding:8px}.word-card img{height:150px}.menu-card{min-height:133px}.menu-card strong{line-height:1.5}.single .word-card img{height:250px}.report-wrap .report-foot{font-size:11px}.report-head h2{font-size:20px}.main:has(.report-wrap) .header-tools .user{display:none}.main:has(.report-wrap) .topbar{min-height:55px}.word-body h2{font-size:19px}.word-body .badge{font-size:9px}.report .content-label{font-size:15px}.report-wrap .panel{padding:16px}}