:root{--surface-base: #ffffff;--surface-raised: #fafafa;--surface-active: #f4f4f5;--border-subtle: #e4e4e7;--border-default: #d4d4d8;--border-strong: #a1a1aa;--fg-primary: #18181b;--fg-secondary: #52525b;--fg-tertiary: #71717a;--fg-muted: #a1a1aa;--accent: #8b5cf6;--accent-hover: #7c3aed;--accent-muted: #ddd6fe;--success: #10b981;--success-muted: #d1fae5;--warning: #f59e0b;--warning-muted: #fef3c7;--error: #ef4444;--error-muted: #fee2e2;--info: #3b82f6;--info-muted: #dbeafe;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0,0,0,.05);--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background-color:var(--surface-base);color:var(--fg-primary);line-height:1.5}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--surface-base)}.offline-banner{background:linear-gradient(135deg,var(--warning) 0%,#d97706 100%);color:#fff;text-align:center;padding:var(--space-3) var(--space-4);font-weight:500;font-size:.875rem;position:sticky;top:0;z-index:100}.header{background:var(--surface-base);border-bottom:1px solid var(--border-subtle);padding:var(--space-4) var(--space-5);display:flex;justify-content:space-between;align-items:center}.logo-container{display:flex;align-items:center;gap:var(--space-3)}.logo{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--accent);padding:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}.logo img{width:100%;height:100%;object-fit:contain}.logo-container h1{font-size:1rem;font-weight:600;letter-spacing:-.02em;color:var(--fg-primary)}.status{display:flex;align-items:center;gap:var(--space-2);font-size:.8125rem;font-weight:500;color:var(--fg-secondary)}.status-indicator{width:20px;height:20px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.status-indicator.online{background-color:var(--success-muted);color:var(--success)}.status-indicator.offline{background-color:var(--error-muted);color:var(--error)}.status-indicator svg{width:12px;height:12px}.status-text{display:none}@media (min-width: 400px){.status-text{display:inline}}.main{flex:1;padding:var(--space-5);max-width:540px;margin:0 auto;width:100%;padding-bottom:calc(80px + var(--space-6))}.screen-content{animation:fadeSlideIn .25s ease-out}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4);transition:border-color .2s ease,box-shadow .2s ease}.card:hover{border-color:var(--border-default)}.card h2{color:var(--fg-primary);font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle)}.card p,.card li{color:var(--fg-secondary);font-size:.9375rem;line-height:1.6}.card ul{padding-left:var(--space-5)}.card li{margin-bottom:var(--space-2)}.card ol{padding-left:var(--space-5)}.card ol li{margin-bottom:var(--space-2)}.card li::marker{color:var(--fg-muted)}.install-btn{background:var(--accent);color:#fff;border:none;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-height:44px;display:inline-flex;align-items:center;gap:var(--space-2)}.install-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.install-btn:active{transform:translateY(0)}.install-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.installed-message{display:flex;align-items:center;gap:var(--space-2);color:var(--success);font-size:.9375rem;font-weight:500;padding:var(--space-3) 0}.installed-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--success-muted);border-radius:var(--radius-full)}.footer{background:var(--surface-raised);padding:var(--space-4) var(--space-5);text-align:center;color:var(--fg-tertiary);font-size:.8125rem;border-top:1px solid var(--border-subtle)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface-base);border-top:1px solid var(--border-subtle);display:flex;justify-content:space-around;padding:var(--space-2) var(--space-3);padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom));z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffeb}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:none;padding:var(--space-2) var(--space-4);min-height:48px;min-width:64px;cursor:pointer;color:var(--fg-tertiary);transition:all .15s ease;border-radius:var(--radius-md);position:relative}.nav-item:hover{color:var(--fg-secondary);background:var(--surface-active)}.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.nav-item.active{color:var(--accent)}.nav-item.active:before{content:"";position:absolute;top:2px;left:50%;transform:translate(-50%);width:20px;height:3px;background:var(--accent);border-radius:var(--radius-full)}.nav-icon{width:22px;height:22px}.nav-icon svg{width:100%;height:100%}.nav-label{font-size:.6875rem;font-weight:500;letter-spacing:.01em}@media (display-mode: standalone){.header{padding-top:calc(var(--space-4) + env(safe-area-inset-top))}.main{padding-bottom:calc(80px + var(--space-6) + env(safe-area-inset-bottom))}}.settings-section{margin-bottom:var(--space-5)}.settings-section:last-child{margin-bottom:0}.language-label{display:block;margin-bottom:var(--space-2);font-weight:500;font-size:.875rem;color:var(--fg-secondary)}.language-select{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-base);font-size:.9375rem;color:var(--fg-primary);cursor:pointer;width:100%;transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.language-select:hover{border-color:var(--border-strong)}.language-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}