:root{--theme-h:210;--theme-main:hsl(var(--theme-h),70%,52%);--theme-light:hsl(var(--theme-h),70%,94%);--theme-mid:hsl(var(--theme-h),60%,82%);--theme-dark:hsl(var(--theme-h),60%,30%);}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:system-ui,sans-serif;background:#f7f6f3;color:#1a1a1a;min-height:100vh;transition:background 0.5s;}
.screen{max-width:480px;margin:0 auto;padding:1rem;min-height:100vh;}
.app-header{display:flex;align-items:center;gap:10px;margin-bottom:1rem;padding:10px 14px;background:var(--theme-main);border-radius:14px;}
.app-header-title{flex:1;}
.app-header-title h1{font-size:16px;font-weight:700;color:#fff;}
.app-header-title p{font-size:11px;color:rgba(255,255,255,0.8);margin-top:1px;}
.parent-btn{padding:6px 12px;font-size:12px;font-weight:600;border:2px solid rgba(255,255,255,0.6);border-radius:20px;background:rgba(255,255,255,0.15);color:#fff;cursor:pointer;}
.mode-tabs{display:flex;gap:6px;margin-bottom:1rem;}
.tab-btn{flex:1;padding:11px 6px;font-size:13px;font-weight:600;border:none;border-radius:10px;background:#fff;color:#888;cursor:pointer;transition:all 0.2s;}
.tab-btn.active{background:var(--theme-main);color:#fff;}
.card{background:#fff;border-radius:16px;padding:1.25rem;margin-bottom:1rem;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.flash-card{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;}
.word-en{font-size:38px;font-weight:700;color:#1a1a1a;text-align:center;line-height:1.2;}
.word-kana{font-size:16px;color:#aaa;text-align:center;}
.word-ja{font-size:24px;color:var(--theme-dark);text-align:center;font-weight:600;line-height:1.4;}
.word-example{font-size:13px;color:#bbb;text-align:center;font-style:italic;margin-top:4px;}
.lv-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:8px;}
.big-btn{width:100%;padding:16px;font-size:17px;font-weight:700;border:none;border-radius:14px;background:var(--theme-main);color:#fff;cursor:pointer;margin-bottom:10px;transition:transform 0.1s,opacity 0.1s;}
.big-btn:active{transform:scale(0.97);opacity:0.9;}
.big-btn.secondary{background:#f1efe8;color:#555;}
.big-btn.outline{background:#fff;color:var(--theme-main);border:2px solid var(--theme-main);}
.nav-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.nav-btn{padding:14px;font-size:16px;font-weight:600;border:none;border-radius:12px;background:#f1efe8;color:#555;cursor:pointer;}
.speak-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;font-size:15px;font-weight:600;border:2px solid var(--theme-mid);border-radius:24px;background:var(--theme-light);color:var(--theme-dark);cursor:pointer;}
@keyframes speakPulse{0%{opacity:1}100%{opacity:0.5}}
.speak-btn.speaking{animation:speakPulse 0.5s ease infinite alternate;}
.progress-wrap{margin-bottom:12px;}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:#aaa;margin-bottom:4px;}
.progress-bar{height:8px;background:#eee;border-radius:4px;overflow:hidden;}
.progress-fill{height:100%;background:var(--theme-main);border-radius:4px;transition:width 0.4s;}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.option-btn{padding:18px 8px;font-size:16px;font-weight:600;border:2px solid #eee;border-radius:14px;background:#fff;color:#1a1a1a;cursor:pointer;text-align:center;line-height:1.3;}
.option-btn.correct{background:#eaf3de;border-color:#639922;color:#3b6d11;animation:correctPop 0.35s ease;}
.option-btn.wrong{background:#fcebeb;border-color:#e24b4a;color:#a32d2d;animation:wrongShake 0.35s ease;}
@keyframes correctPop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes wrongShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.stats-row{display:flex;gap:8px;margin-bottom:12px;}
.stat-card{flex:1;background:var(--theme-light);border-radius:10px;padding:10px;text-align:center;}
.stat-num{font-size:24px;font-weight:700;color:var(--theme-dark);}
.stat-label{font-size:11px;color:#888;margin-top:2px;}
.quiz-wrap{position:relative;}
.correct-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10;border-radius:16px;}
@keyframes bannerAnim{0%{opacity:0;transform:scale(0.4)}35%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.95) translateY(-10px)}}
.correct-banner{font-size:40px;animation:bannerAnim 0.95s ease forwards;}
@keyframes confettiFall{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.level-card{display:flex;align-items:center;gap:14px;cursor:pointer;}
.level-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex-shrink:0;}
.level-info h3{font-size:17px;font-weight:700;}
.level-info p{font-size:12px;color:#888;margin-top:2px;}
.result-wrap{text-align:center;padding:1rem 0;}
.result-emoji{font-size:56px;margin-bottom:12px;}
.result-score{font-size:32px;font-weight:700;color:var(--theme-dark);}
.result-msg{font-size:15px;color:#666;margin-top:8px;}
.search-input{width:100%;padding:14px 16px;font-size:15px;border:2px solid #eee;border-radius:12px;background:#fff;color:#1a1a1a;margin-bottom:12px;outline:none;}
.search-input:focus{border-color:var(--theme-main);}
.browse-item{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,0.05);}
.browse-en{font-size:17px;font-weight:600;}
.browse-kana{font-size:11px;color:#bbb;}
.browse-ja{font-size:14px;color:#666;margin-top:2px;}
.filter-row{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.filter-pill{padding:7px 16px;font-size:13px;font-weight:600;border:2px solid #eee;border-radius:20px;background:#fff;color:#888;cursor:pointer;}
.filter-pill.active{background:var(--theme-main);color:#fff;border-color:var(--theme-main);}
.hidden{visibility:hidden;}
.pin-screen{display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;}
.pin-title{font-size:20px;font-weight:700;margin-bottom:6px;}
.pin-sub{font-size:14px;color:#888;margin-bottom:2rem;}
.pin-dots{display:flex;gap:14px;margin-bottom:2rem;}
.pin-dot{width:18px;height:18px;border-radius:50%;border:2px solid #ccc;background:#fff;transition:all 0.15s;}
.pin-dot.filled{background:var(--theme-main);border-color:var(--theme-main);}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:300px;}
.pin-key{padding:20px;font-size:22px;font-weight:700;border:none;border-radius:14px;background:#fff;color:#1a1a1a;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:transform 0.1s;}
.pin-key:active{transform:scale(0.94);background:var(--theme-light);}
.pin-key.del{background:#f1efe8;color:#888;font-size:18px;}
.pin-error{color:#e24b4a;font-size:14px;font-weight:600;margin-top:12px;animation:wrongShake 0.35s ease;}
.parent-section{margin-bottom:1.5rem;}
.parent-section h2{font-size:13px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px;}
.source-item{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,0.05);cursor:pointer;}
.source-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;}
.source-item-name{flex:1;font-size:15px;font-weight:600;}
.source-item-count{font-size:12px;color:#bbb;}
.source-item.active-source{border:2px solid var(--theme-main);}
.drop-zone{border:2px dashed #ccc;border-radius:16px;padding:2.5rem 1.5rem;text-align:center;cursor:pointer;transition:all 0.2s;background:#fafaf8;margin-bottom:1rem;}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--theme-main);background:var(--theme-light);}
.drop-icon{font-size:36px;margin-bottom:10px;}
.drop-zone p{font-size:15px;color:#555;}
.drop-zone small{font-size:12px;color:#aaa;margin-top:4px;display:block;}
.extract-opt{border:2px solid #eee;border-radius:12px;padding:14px;margin-bottom:10px;cursor:pointer;transition:all 0.15s;}
.extract-opt.selected{border-color:var(--theme-main);background:var(--theme-light);}
.extract-opt h3{font-size:14px;font-weight:700;margin-bottom:3px;}
.extract-opt p{font-size:12px;color:#888;}
.error-box{background:#fcebeb;border:1.5px solid #e24b4a;border-radius:10px;padding:12px;font-size:13px;color:#a32d2d;margin-top:10px;}
.info-box{background:var(--theme-light);border:1.5px solid var(--theme-mid);border-radius:10px;padding:12px;font-size:13px;color:var(--theme-dark);margin-bottom:12px;line-height:1.7;}
.loading-wrap{text-align:center;padding:3rem 1rem;}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.spinner{display:inline-block;font-size:32px;animation:spin 1s linear infinite;margin-bottom:12px;}
.pin-change-row{display:flex;align-items:center;justify-content:space-between;padding:14px;background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,0.05);}
.empty-state{text-align:center;padding:3rem 1rem;}
.empty-icon{font-size:52px;margin-bottom:16px;}
.empty-title{font-size:18px;font-weight:700;margin-bottom:8px;}
.empty-sub{font-size:14px;color:#888;line-height:1.6;margin-bottom:24px;}
.col-spec{background:#f7f6f3;border-radius:10px;padding:12px 14px;font-size:12px;color:#555;line-height:1.8;margin-bottom:12px;}
.col-spec table{width:100%;border-collapse:collapse;}
.col-spec td{padding:4px 8px;vertical-align:top;}
.col-spec td:first-child{font-weight:700;color:var(--theme-dark);white-space:nowrap;width:80px;}
@keyframes themeEnter{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
.theme-enter{animation:themeEnter 0.4s ease;}