*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0f0f1a;--color-surface: #1a1a2e;--color-surface-raised: #252540;--color-border: #333355;--color-text: #e8e8f0;--color-text-muted: #9090b0;--color-primary: #7c6fff;--color-primary-hover: #9b8fff;--color-success: #4caf82;--color-warning: #f0a020;--color-error: #e05050;--color-info: #5090d0;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--touch-target: 48px;--nav-height: 56px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}html,body{height:100%;background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:var(--font-size-md);line-height:1.5;-webkit-font-smoothing:antialiased}#root{height:100%;display:flex;flex-direction:column}h1{font-size:var(--font-size-2xl);font-weight:700}h2{font-size:var(--font-size-xl);font-weight:600}h3{font-size:var(--font-size-lg);font-weight:600}a{color:var(--color-primary);text-decoration:none}a:hover{color:var(--color-primary-hover)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.text-info{color:var(--color-info)}.app-shell{display:flex;flex-direction:column;height:100%;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}.app-content{flex:1;overflow-y:auto;padding:var(--spacing-md);padding-bottom:calc(var(--nav-height) + var(--spacing-md) + var(--safe-bottom))}.app-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-height);padding-bottom:var(--safe-bottom);background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-around;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:var(--touch-target);min-height:var(--touch-target);justify-content:center;color:var(--color-text-muted);font-size:var(--font-size-sm);cursor:pointer;border-radius:var(--radius-sm);transition:color .15s;text-decoration:none;background:none;border:none}.nav-item.active{color:var(--color-primary)}.nav-item:hover{color:var(--color-text)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md)}.card+.card{margin-top:var(--spacing-md)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);min-height:var(--touch-target);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:500;cursor:pointer;border:none;transition:opacity .15s,background .15s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-secondary{background:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-border)}.btn-danger{background:var(--color-error);color:#fff}.btn-full{width:100%}.status-banner{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);margin-bottom:var(--spacing-md)}.status-banner.warning{background:#f0a0201f;border:1px solid var(--color-warning);color:var(--color-warning)}.status-banner.error{background:#e050501f;border:1px solid var(--color-error);color:var(--color-error)}.status-banner.success{background:#4caf821f;border:1px solid var(--color-success);color:var(--color-success)}.status-banner.info{background:#5090d01f;border:1px solid var(--color-info);color:var(--color-info)}.progress-bar{width:100%;height:8px;background:var(--color-surface-raised);border-radius:var(--radius-sm);overflow:hidden}.progress-fill{height:100%;background:var(--color-primary);border-radius:var(--radius-sm);transition:width .2s}.field{display:flex;flex-direction:column;gap:var(--spacing-xs)}.field label{font-size:var(--font-size-sm);color:var(--color-text-muted)}.divider{height:1px;background:var(--color-border);margin:var(--spacing-md) 0}.page-header{margin-bottom:var(--spacing-lg)}.page-header h2{margin-bottom:var(--spacing-xs)}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:600}.badge-success{background:#4caf8233;color:var(--color-success)}.badge-warning{background:#f0a02033;color:var(--color-warning)}.badge-error{background:#e0505033;color:var(--color-error)}.badge-muted{background:var(--color-surface-raised);color:var(--color-text-muted)}.mono{font-family:Fira Code,JetBrains Mono,Courier New,monospace;font-size:.85em}.emulator-viewport{width:100%;aspect-ratio:10 / 9;background:#000;border-radius:var(--radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;overscroll-behavior:contain}.emulator-canvas{image-rendering:pixelated;max-width:100%;max-height:100%}.play-screen{overscroll-behavior:contain}