@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");:root{--color-background:#000000;--color-background-elevated:rgb(20,20,20);--color-surface:rgba(255,255,255,0.05);--color-surface-hover:rgba(255,255,255,0.08);--color-border:rgba(255,255,255,0.1);--color-text-primary:#ffffff;--color-text-secondary:#888888;--color-text-muted:#555555;--color-text-sentence:rgb(177,177,177);--color-accent:#ff9500;--color-accent-hover:#e68600;--color-success:#34c759;--color-error:#ff453a;--color-warning:#ff9f0a;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--font-primary:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;--radius-sm:0.5rem;--radius-md:0.75rem;--radius-lg:1rem;--radius-xl:1.25rem;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,0.3);--shadow-md:0 4px 6px rgba(0,0,0,0.4);--shadow-lg:0 10px 15px rgba(0,0,0,0.5);--transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:350ms ease;--transition-spring:250ms cubic-bezier(0.4,0,0.2,1)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{color-scheme:dark}body,html{height:100%}body{font-family:var(--font-primary);background-color:var(--color-background);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01" on,"ss02" on}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit;color:inherit}button:disabled{cursor:not-allowed;opacity:.5}ol,ul{list-style:none}img{max-width:100%;height:auto}input,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);width:100%;outline:none;transition:border-color var(--transition-fast)}input:focus,textarea:focus{border-color:var(--color-accent)}input::placeholder,textarea::placeholder{color:var(--color-text-muted)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-text-muted);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-container{min-height:100vh;display:flex;flex-direction:column}.page-container{flex:1 1;display:flex;flex-direction:column;padding:0 24px;max-width:768px;margin:0 auto;width:100%}@media (max-width:640px){.page-container{padding:0 16px}}@media (min-width:768px){.page-container{padding:0 32px}}.header{display:flex;justify-content:space-between;align-items:center;padding:max(20px,env(safe-area-inset-top)) 0 20px}.header-left,.header-right{display:flex;align-items:center;gap:var(--spacing-md)}.footer-toolbar{justify-content:space-between;padding:20px 0 max(20px,env(safe-area-inset-bottom));margin-top:auto}.footer-toolbar,.icon-btn{display:flex;align-items:center}.icon-btn{justify-content:center;width:44px;height:44px;border-radius:var(--radius-full);color:var(--color-text-secondary);transition:all var(--transition-fast)}.icon-btn:hover{color:var(--color-text-primary);background-color:var(--color-surface)}.icon-btn svg{width:20px;height:20px}.usage-counter{display:flex;align-items:baseline}.usage-counter-current{font-size:24px;font-weight:500;color:var(--color-text-primary)}.usage-counter-limit{font-size:24px;font-weight:500;color:var(--color-text-secondary)}.category-flow{display:flex;flex-wrap:wrap;gap:16px 20px;align-content:flex-start}.category-item{font-size:22px;font-weight:500;color:var(--color-text-primary);cursor:pointer;transition:opacity var(--transition-fast);display:flex;align-items:center;gap:6px}.category-item:hover{opacity:.7}.category-new-dot{width:8px;height:8px;background-color:var(--color-accent);border-radius:var(--radius-full)}.filter-toggle{display:flex;align-items:center;gap:12px}.filter-btn{font-size:14px;font-weight:500;color:var(--color-text-secondary);transition:color var(--transition-fast)}.filter-btn:hover{color:var(--color-text-primary)}.filter-btn.active{color:var(--color-accent)}.filter-btn.active-white{color:var(--color-text-primary)}.filter-divider{width:1px;height:14px;background-color:rgba(255,255,255,.3)}.sentence-list{display:flex;flex-direction:column}.sentence-row{padding:12px 0;cursor:pointer}.sentence-english{font-size:18px;font-weight:400;color:var(--color-text-sentence);line-height:1.5;display:flex;align-items:center;gap:8px}.sentence-romaji{font-weight:600}.sentence-japanese,.sentence-romaji{font-size:18px;color:var(--color-text-primary);line-height:1.5;margin-top:8px}.sentence-japanese{font-weight:400}.sentence-new-dot{width:8px;height:8px;background-color:var(--color-accent);border-radius:var(--radius-full);flex-shrink:0}.btn-primary{display:flex;align-items:center;justify-content:center;width:100%;padding:16px;background-color:var(--color-text-primary);color:var(--color-background);font-size:17px;font-weight:600;border-radius:var(--radius-lg);transition:all var(--transition-fast)}.btn-primary:hover:not(:disabled){opacity:.9}.btn-primary:disabled{background-color:rgba(255,255,255,.3);color:var(--color-text-secondary)}.btn-secondary{display:flex;align-items:center;justify-content:center;width:100%;padding:16px;background-color:var(--color-surface);color:var(--color-text-primary);font-size:17px;font-weight:500;border-radius:var(--radius-lg);border:1px solid var(--color-border);transition:all var(--transition-fast)}.btn-secondary:hover:not(:disabled){background-color:var(--color-surface-hover)}.btn-text{font-size:15px;font-weight:500;color:var(--color-text-secondary);padding:8px 12px;transition:color var(--transition-fast)}.btn-text:hover{color:var(--color-text-primary)}.btn-accent{display:flex;align-items:center;justify-content:center;padding:16px;background-color:var(--color-accent);color:var(--color-background);font-size:17px;font-weight:600;border-radius:var(--radius-lg);transition:all var(--transition-fast)}.btn-accent:hover:not(:disabled){background-color:var(--color-accent-hover)}.card{background-color:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-border);padding:16px}.card-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}.card-row:not(:last-child){border-bottom:1px solid var(--color-border)}.modal-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:100}.modal-sheet{background-color:var(--color-background-elevated);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:12px 24px 16px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto}@media (min-width:640px){.modal-backdrop{align-items:center}.modal-sheet{border-radius:var(--radius-xl);margin:24px}}.modal-handle{width:36px;height:5px;background-color:rgba(255,255,255,.3);border-radius:var(--radius-full);margin:0 auto 24px}.modal-title{font-size:20px;font-weight:700;text-align:center;margin-bottom:20px}.empty-state{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--spacing-2xl)}.empty-state-title{font-size:20px;font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.empty-state-subtitle{font-size:14px}.empty-state-subtitle,.loading{color:var(--color-text-secondary)}.loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2xl)}.highlight-verb{color:#90CAF9}.highlight-noun{color:#FFCC80}.highlight-particle{color:#CE93D8}.highlight-question{color:#F48FB1}.highlight-time{color:#FFAB91}.highlight-adjective{color:#A5D6A7}.highlight-negation{color:#EF9A9A}.highlight-measure-word{color:#FFE082}.highlight-aspect{color:#80CBC4}.highlight-article{color:#F8BBD9}.highlight-verb-ending{color:#81D4FA}.search-field{display:flex;align-items:center;gap:12px;padding:12px 16px;background-color:var(--color-surface);border-radius:var(--radius-md)}.search-field input{flex:1 1;background:none;border:none;padding:0;font-size:18px}.search-field input:focus{border:none}.settings-row{display:flex;align-items:center;gap:16px;padding:16px 20px}.settings-row-icon{width:24px;display:flex;align-items:center;justify-content:center;color:var(--color-text-primary)}.settings-row-title{flex:1 1;font-size:17px}.settings-row-chevron{color:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.animate-fade-in{animation:fadeIn var(--transition-normal) ease-out}.animate-slide-up{animation:slideUp var(--transition-normal) ease-out}@supports (padding:max(0px)){.safe-area-top{padding-top:max(20px,env(safe-area-inset-top))}.safe-area-bottom{padding-bottom:max(20px,env(safe-area-inset-bottom))}}