.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:var(--color-primary);color:#fff;padding:var(--spacing-xl);text-align:center}.app-header h1{margin:0;font-size:2.5rem}.tagline{margin-top:var(--spacing-sm);opacity:.9;font-size:1.1rem}.app-main{flex:1;padding:var(--spacing-xl);max-width:800px;margin:0 auto;width:100%}.status-card,.info-card{background-color:var(--color-bg);border:1px solid var(--color-bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:0 2px 4px #0000000d}.status-card h2,.info-card h2{margin-bottom:var(--spacing-md)}.status{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.1rem}.status-indicator{font-size:1.5rem;line-height:1}.status-loading .status-indicator{color:#f59e0b;animation:pulse 1.5s infinite}.status-connected .status-indicator{color:var(--color-success)}.status-error .status-indicator{color:var(--color-error)}.status-details{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);font-size:.9rem}.status-details p{margin-bottom:var(--spacing-xs)}.status-details p:last-child{margin-bottom:0}.hint{color:var(--color-text-secondary);margin-top:var(--spacing-sm)}.info-card ul{list-style:none;padding:0;margin:var(--spacing-md) 0}.info-card li{padding:var(--spacing-xs) 0}.app-footer{padding:var(--spacing-lg);text-align:center;color:var(--color-text-secondary);border-top:1px solid var(--color-bg-secondary)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (prefers-color-scheme: dark){.status-card,.info-card{border-color:#333;box-shadow:0 2px 4px #0003}}@media (max-width: 600px){.app-header h1{font-size:1.8rem}.app-main{padding:var(--spacing-md)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #ffffff;--color-bg-secondary: #f5f5f5;--color-text: #1a1a1a;--color-text-secondary: #666666;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-success: #22c55e;--color-error: #ef4444;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}@media (prefers-color-scheme: dark){:root{--color-bg: #1a1a1a;--color-bg-secondary: #2a2a2a;--color-text: #f5f5f5;--color-text-secondary: #a0a0a0}}html{font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--color-text);background-color:var(--color-bg)}body{min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}code{font-family:var(--font-mono);background-color:var(--color-bg-secondary);padding:.1em .3em;border-radius:var(--radius-sm);font-size:.9em}pre{font-family:var(--font-mono);background-color:var(--color-bg-secondary);padding:var(--spacing-md);border-radius:var(--radius-md);overflow-x:auto}button{font-family:inherit;font-size:inherit;cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-md);background-color:var(--color-primary);color:#fff;transition:background-color .2s}button:hover{background-color:var(--color-primary-hover)}button:disabled{opacity:.5;cursor:not-allowed}