*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{min-width:320px;min-height:100vh;font-family:system-ui,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}#root{width:100%;height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#b8b8b8;min-height:100vh;overscroll-behavior:none}.app{display:flex;flex-direction:column;min-height:100vh}.app.loading{align-items:center;justify-content:center}.loading-msg{font-size:1.4rem;color:#666}.loading-msg.error{color:#f44336}.sentence-bar{background:#fff;border-bottom:2px solid #ddd;display:flex;align-items:center;padding:4px 10px;gap:6px;min-height:48px;flex-shrink:0}.header{background:#111;color:#fff;display:flex;align-items:center;justify-content:center;padding:6px 16px;min-height:44px;position:relative;flex-shrink:0}.folder-title-group{display:flex;align-items:center;gap:8px}.folder-title-group .btn-img{width:28px;height:28px;flex:none;filter:invert(1) brightness(2)}.folder-title{font-size:1.4rem;font-weight:700}.nav-btn{position:absolute;background:transparent;border:none;color:#fff;font-size:1.1rem;cursor:pointer;padding:8px 12px;font-weight:600}.nav-back{left:8px}.footer{background:#111;display:flex;align-items:center;justify-content:center;padding:8px;flex-shrink:0}.footer{position:relative}.home-btn{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}.photo-toggle{position:absolute;right:12px;background:transparent;border:1px solid #555;border-radius:6px;cursor:pointer;padding:4px 8px;font-size:1.1rem;color:#888;line-height:1}.photo-toggle.active{border-color:#4caf50;background:#1b3d1b}.photo-img{object-fit:cover;border-radius:8px}.sentence-words{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:36px;cursor:pointer}.sentence-placeholder{color:#aaa;font-size:.95rem;font-style:italic}.sentence-word{background:#e3f2fd;border:1px solid #90caf9;border-radius:6px;padding:4px 10px;font-size:1rem;font-weight:600;color:#1565c0}.sentence-actions{display:flex;gap:6px;flex-shrink:0}.sentence-btn{border:none;border-radius:8px;width:44px;height:44px;font-size:1.1rem;cursor:pointer;font-weight:700}.sentence-btn:disabled{opacity:.3;cursor:default}.clear-btn{background:#222;color:#fff}.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:10px;padding:10px;background:#b8b8b8}.vocab-btn{border:3px solid;border-radius:18px;padding:6px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;height:100%;transition:transform .1s;gap:2px;overflow:hidden}.vocab-btn:active{transform:scale(.95)}.folder-wrapper{display:flex;flex-direction:column;cursor:pointer;min-height:0}.folder-tab{width:35%;height:20px;background:#fff;border:3px solid #333;border-bottom:none;border-radius:12px 12px 0 0;flex-shrink:0;margin-bottom:-3px;position:relative;z-index:1}.is-folder{background:#fff;border-color:#333;border-radius:0 14px 14px;flex:1;position:relative}.btn-img{flex:1;min-height:0;width:100%;object-fit:contain}.btn-img-placeholder{flex:1;min-height:0;width:100%}.btn-label{font-size:clamp(.65rem,2.5vw,1.4rem);font-weight:700;text-align:center;color:#222;line-height:1.1;flex-shrink:0}