@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+Thai:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&display=swap");:root{--color-bg:#FAF8F5;--color-bg-elevated:#FFFFFF;--color-bg-subtle:#F2EFEA;--color-fg:#1A1A1A;--color-fg-muted:#5C5650;--color-fg-subtle:#8A847C;--color-border:#E5E0D8;--color-border-strong:#C8C0B5;--color-accent:#C8553D;--color-accent-hover:#B0432F;--color-accent-subtle:#FCEEEA;--color-success:#5C7A5C;--color-success-subtle:#E5EDE5;--color-warning:#B8862D;--color-warning-subtle:#F5ECD8;--color-danger:#A03525;--color-danger-subtle:#F5DDD8;--color-info:#466B85;--color-info-subtle:#DCE5EC;--color-rating-again:#A03525;--color-rating-hard:#B8862D;--color-rating-good:#5C7A5C;--color-rating-easy:#466B85;--color-zone-hard-bg:#F5E9D7;--color-zone-again-bg:#F2D5CC;--color-zone-good-bg:#DCE9DC;--color-zone-easy-bg:#C8E0E5;--color-formula-bg:var(--color-bg-subtle);--color-formula-border:var(--color-border);--font-sans-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;--font-sans-th:"Noto Sans Thai","Sukhumvit Set",system-ui,sans-serif;--font-serif-jp:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;--font-ui:var(--font-sans-jp);--font-card-front:var(--font-serif-jp);--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.75rem;--text-3xl:2.25rem;--text-card:3rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-8:3rem;--space-10:4rem;--shadow-none:none;--shadow-sm:0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 1px 2px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.04);--shadow-lg:0 4px 12px rgba(0,0,0,0.06),0 16px 48px rgba(0,0,0,0.08);--shadow-focus:0 0 0 3px var(--color-accent-subtle);--radius-sm:4px;--radius:8px;--radius-md:12px;--radius-lg:16px;--bp-sm:640px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;--stage-bg:#EAE5DD}[data-theme=dark]{--color-bg:#15120F;--color-bg-elevated:#1F1B16;--color-bg-subtle:#2A2520;--color-fg:#F2EEE6;--color-fg-muted:#A8A095;--color-fg-subtle:#6E6860;--color-border:#332D26;--color-border-strong:#4A4239;--color-accent:#E07358;--color-accent-hover:#EC8B72;--color-accent-subtle:#3A201A;--color-success:#8AB08A;--color-success-subtle:#1F2C1F;--color-warning:#E0B062;--color-warning-subtle:#332810;--color-danger:#D85A48;--color-danger-subtle:#3A1A14;--color-info:#7BA3C2;--color-info-subtle:#1A2630;--color-rating-again:#D85A48;--color-rating-hard:#E0B062;--color-rating-good:#8AB08A;--color-rating-easy:#7BA3C2;--color-zone-again-bg:#3A1A14;--color-zone-hard-bg:#332810;--color-zone-good-bg:#1F2C1F;--color-zone-easy-bg:#1A2630;--shadow-sm:0 1px 2px rgba(0,0,0,0.40);--shadow-md:0 1px 2px rgba(0,0,0,0.40),0 8px 24px rgba(0,0,0,0.30);--shadow-lg:0 4px 12px rgba(0,0,0,0.50),0 16px 48px rgba(0,0,0,0.45);--shadow-focus:0 0 0 3px rgba(224,115,88,0.30);--stage-bg:#0B0907;color-scheme:dark}@media (prefers-color-scheme:dark){[data-theme=auto]{--color-bg:#15120F;--color-bg-elevated:#1F1B16;--color-bg-subtle:#2A2520;--color-fg:#F2EEE6;--color-fg-muted:#A8A095;--color-fg-subtle:#6E6860;--color-border:#332D26;--color-border-strong:#4A4239;--color-accent:#E07358;--color-accent-hover:#EC8B72;--color-accent-subtle:#3A201A;--color-success:#8AB08A;--color-success-subtle:#1F2C1F;--color-warning:#E0B062;--color-warning-subtle:#332810;--color-danger:#D85A48;--color-danger-subtle:#3A1A14;--color-info:#7BA3C2;--color-info-subtle:#1A2630;--color-rating-again:#D85A48;--color-rating-hard:#E0B062;--color-rating-good:#8AB08A;--color-rating-easy:#7BA3C2;--color-zone-again-bg:#3A1A14;--color-zone-hard-bg:#332810;--color-zone-good-bg:#1F2C1F;--color-zone-easy-bg:#1A2630;--shadow-sm:0 1px 2px rgba(0,0,0,0.40);--shadow-md:0 1px 2px rgba(0,0,0,0.40),0 8px 24px rgba(0,0,0,0.30);--shadow-lg:0 4px 12px rgba(0,0,0,0.50),0 16px 48px rgba(0,0,0,0.45);--shadow-focus:0 0 0 3px rgba(224,115,88,0.30);--stage-bg:#0B0907;color-scheme:dark}}*{box-sizing:border-box}body,html{margin:0;padding:0;font-family:var(--font-ui);font-size:16px;color:var(--color-fg);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}:lang(th){font-family:var(--font-sans-th)}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:48px;padding:0 20px;border-radius:var(--radius);font-family:var(--font-ui);font-weight:500;font-size:var(--text-base);transition:background .12s ease,transform 80ms ease,border-color .12s ease;white-space:nowrap;text-decoration:none}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover{background:var(--color-accent-hover)}.btn-primary:active{transform:translateY(1px)}.btn-secondary{background:transparent;color:var(--color-fg);border:1px solid var(--color-border-strong)}.btn-secondary:hover{background:var(--color-bg-subtle)}.btn-ghost{background:transparent;color:var(--color-fg-muted)}.btn-ghost:hover{background:var(--color-bg-subtle)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:#8A2D1F}.btn-danger-text{background:transparent;color:var(--color-danger)}.btn-danger-text:hover{background:var(--color-danger-subtle)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-block{width:100%}.btn-sm{height:36px;padding:0 14px;font-size:var(--text-sm)}.input{width:100%;height:48px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--color-border-strong);background:var(--color-bg-elevated);font-family:var(--font-ui);font-size:var(--text-base);color:var(--color-fg);transition:border-color .12s ease,box-shadow .12s ease}.input:focus{outline:none;border-color:var(--color-accent);box-shadow:var(--shadow-focus)}.input.invalid{border-color:var(--color-danger)}.input::placeholder{color:var(--color-fg-subtle)}textarea.input{height:auto;padding:12px 16px;resize:vertical;min-height:80px;line-height:1.5}.card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px}.pos-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);background:var(--color-accent-subtle);color:var(--color-accent);font-size:var(--text-xs);font-weight:500;letter-spacing:.02em}.jlpt-badge{height:22px;padding:0 8px;border-radius:var(--radius-sm);background:var(--color-bg-subtle);font-weight:500;letter-spacing:.04em}.jlpt-badge,.sync-indicator{display:inline-flex;align-items:center;color:var(--color-fg-muted);font-size:var(--text-xs)}.sync-indicator{gap:6px}.sync-indicator:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-success);opacity:.6}.sync-indicator.syncing:before{background:var(--color-info);animation:pulse 1.4s ease-in-out infinite}.sync-indicator.offline:before{background:var(--color-fg-subtle)}.sync-indicator.error:before{background:var(--color-danger);opacity:1}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--color-bg-elevated);border:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-fg-muted);cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.chip:hover{border-color:var(--color-border-strong)}.chip.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.status-chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500}.status-chip.success{background:var(--color-success-subtle);color:var(--color-success)}.status-chip.warning{background:var(--color-warning-subtle);color:var(--color-warning)}.status-chip.info{background:var(--color-info-subtle);color:var(--color-info)}.status-chip.danger{background:var(--color-danger-subtle);color:var(--color-danger)}.status-chip.neutral{background:var(--color-bg-subtle);color:var(--color-fg-muted)}.mobile-frame{width:390px;height:844px;background:var(--color-bg);position:relative;overflow:hidden;font-family:var(--font-ui)}.status-bar{position:absolute;top:0;left:0;right:0;height:47px;justify-content:space-between;padding:0 24px;font-size:15px;font-weight:600;color:var(--color-fg);z-index:100;background:transparent;pointer-events:none}.status-bar,.status-bar .icons{display:flex;align-items:center}.status-bar .icons{gap:6px}.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;background:var(--color-fg);border-radius:100px;opacity:.85;z-index:100}.app-bar{position:absolute;top:47px;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-5);background:var(--color-bg);z-index:50}.app-bar h1{font-size:var(--text-lg);font-weight:500;margin:0}.main-scroll{position:absolute;top:103px;left:0;right:0;bottom:83px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-5)}.main-scroll.no-tabbar{bottom:34px}.main-scroll.no-appbar{top:47px}.tab-bar{position:absolute;bottom:0;left:0;right:0;height:83px;background:var(--color-bg-elevated);border-top:1px solid var(--color-border);display:flex;align-items:flex-start;padding-top:8px;z-index:50}.tab-item{flex:1 1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--color-fg-subtle);cursor:pointer;padding:4px 0}.tab-item .ico{width:24px;height:24px;display:block}.tab-item.active{color:var(--color-accent)}.section-heading{font-size:var(--text-sm);font-weight:500;color:var(--color-fg-muted);margin:0 0 var(--space-3) 0;letter-spacing:.02em}.hr{height:1px;background:var(--color-border);border:0;margin:0}.skel{background:linear-gradient(90deg,var(--color-bg-subtle) 25%,var(--color-border) 50%,var(--color-bg-subtle) 75%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:6px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.variant-page{min-height:100vh;background:var(--stage-bg);padding:var(--space-8) var(--space-5)}.variant-grid{display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:center;align-items:flex-start}.variant-cell{display:flex;flex-direction:column;gap:var(--space-3)}.variant-label{font-size:var(--text-sm);color:var(--color-fg-muted);text-align:center;font-weight:500}.variant-frame{border-radius:44px;background:#1A1A1A;padding:12px;box-shadow:var(--shadow-lg)}.variant-frame .mobile-frame{border-radius:32px}.page-title{text-align:center;font-size:var(--text-2xl);font-weight:500;margin:0 0 var(--space-2);color:var(--color-fg)}.page-subtitle{text-align:center;font-size:var(--text-sm);color:var(--color-fg-muted);margin:0 0 var(--space-8)}.ic{display:inline-flex;align-items:center;justify-content:center}