*{box-sizing:border-box;margin:0;padding:0}.theme-light,:root{--bg:#f6f6f6;--surface:#fff;--text:#1a1a1a;--text-secondary:#666;--text-muted:#999;--text-disabled:#ccc;--border:#e4e4e4;--card-bg:#fff;--tile-bg:#fff;--tile-border:#e4e4e4;--nav-bg:#fff;--nav-border:#ddd;--nav-icon:#666;--nav-icon-active:#ff8c42;--input-bg:#fff;--input-border:#e4e4e4;--input-border-hover:#b5b5b5;--input-border-disabled:#e4e4e4;--input-placeholder:#999;--accent:#ff8c42;--accent-orange:#ff8c42;--accent-orange-dark:#e67a35;--accent-orange-shadow:rgba(255,140,66,.3);--accent-orange-bg-light:rgba(255,140,66,.05);--accent-gold-1:#c8a951;--accent-gold-2:#d4b969;--accent-gold-3:#e7cf8b;--shadow-sm:rgba(0,0,0,.08);--shadow-md:rgba(0,0,0,.12);--shadow-lg:rgba(0,0,0,.16);--bottom-nav-height:72px;--devtools-height:56px;--btn-primary-bg:linear-gradient(90deg,#d67525,#a85b1a);--btn-primary-hover:linear-gradient(90deg,#bf651f,#8e4e17);--btn-primary-text:#fff;--text-on-gradient:#1a1a1a;--error-red:#f44336;--error-red-hover-bg:rgba(244,67,54,.1);--success-green:#4caf50;--warning-orange:#ff9800;--player-overlay-bg:linear-gradient(135deg,rgba(26,26,26,.9),rgba(42,42,42,.85));--player-text:#fff;--player-text-muted:hsla(0,0%,100%,.7);--player-border:hsla(0,0%,100%,.1);--player-card-bg:hsla(0,0%,100%,.05);--player-button-bg:hsla(0,0%,100%,.1);--player-button-hover:hsla(0,0%,100%,.2);--player-input-border:hsla(0,0%,100%,.3);--player-input-border-hover:hsla(0,0%,100%,.5);--player-placeholder:hsla(0,0%,100%,.6);--devtools-bg:linear-gradient(135deg,#1c1c1c,#2a2a2a);--devtools-text:#fff;--devtools-text-gold:#e7cf8b;--devtools-border:#ff8c42;--devtools-button-bg:#ff8c42;--devtools-button-text:#fff;--devtools-button-inactive:transparent;--devtools-button-hover:hsla(44,66%,73%,.1);--devtools-select-bg:#2a2a2a;--devtools-version-text:hsla(0,0%,100%,.6);--devtools-version-border:hsla(0,0%,100%,.2)}.theme-dark{--bg:#111;--surface:#1a1a1a;--text:#fff;--text-secondary:#b0b0b0;--text-muted:#bbb;--text-disabled:#666;--border:#2a2a2a;--card-bg:#1a1a1a;--tile-bg:#181818;--tile-border:#333;--nav-bg:#111;--nav-border:#333;--nav-icon:#ccc;--nav-icon-active:#f77c32;--input-bg:#1a1a1a;--input-border:#2a2a2a;--input-border-hover:#666;--input-border-disabled:#2a2a2a;--input-placeholder:#666;--accent:#f77c32;--accent-orange:#f77c32;--accent-orange-dark:#e06a25;--accent-orange-shadow:rgba(247,124,50,.3);--accent-orange-bg-light:rgba(247,124,50,.05);--accent-gold-1:#a7924f;--accent-gold-2:#b8a463;--accent-gold-3:#c9b97c;--shadow-sm:rgba(0,0,0,.2);--shadow-md:rgba(0,0,0,.3);--shadow-lg:rgba(0,0,0,.4);--bottom-nav-height:72px;--devtools-height:56px;--btn-primary-bg:linear-gradient(90deg,#e67a35,#bf651f);--btn-primary-hover:linear-gradient(90deg,#d67525,#a85b1a);--btn-primary-text:#fff;--text-on-gradient:#1a1a1a;--error-red:#ef5350;--error-red-hover-bg:rgba(239,83,80,.1);--success-green:#66bb6a;--warning-orange:#ffa726;--player-overlay-bg:linear-gradient(135deg,rgba(26,26,26,.9),rgba(42,42,42,.85));--player-text:#fff;--player-text-muted:hsla(0,0%,100%,.7);--player-border:hsla(0,0%,100%,.1);--player-card-bg:hsla(0,0%,100%,.05);--player-button-bg:hsla(0,0%,100%,.1);--player-button-hover:hsla(0,0%,100%,.2);--player-input-border:hsla(0,0%,100%,.3);--player-input-border-hover:hsla(0,0%,100%,.5);--player-placeholder:hsla(0,0%,100%,.6);--devtools-bg:linear-gradient(135deg,#1c1c1c,#2a2a2a);--devtools-text:#fff;--devtools-text-gold:#e7cf8b;--devtools-border:#ff8c42;--devtools-button-bg:#ff8c42;--devtools-button-text:#fff;--devtools-button-inactive:transparent;--devtools-button-hover:hsla(44,66%,73%,.1);--devtools-select-bg:#2a2a2a;--devtools-version-text:hsla(0,0%,100%,.6);--devtools-version-border:hsla(0,0%,100%,.2)}body,html{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:var(--text);transition:background-color .2s ease,color .2s ease}.device-frame{position:relative;margin:0 auto;background:#1a1a1a;border-radius:32px;box-shadow:0 0 0 8px #2a2a2a,0 20px 60px rgba(0,0,0,.3)}.device-frame:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#1a1a1a;border-radius:0 0 16px 16px;z-index:100;pointer-events:none}.device-screen{position:relative;background:var(--surface)}.device-screen::-webkit-scrollbar{width:6px}.device-screen::-webkit-scrollbar-track{background:var(--border)}.device-screen::-webkit-scrollbar-thumb{background:var(--accent-gold-1);border-radius:3px}.device-screen::-webkit-scrollbar-thumb:hover{background:var(--accent-gold-2)}.desktop-mode{max-width:1024px;margin:40px auto;padding:0 24px}.gradient-orange-gold{background:linear-gradient(90deg,#ff8c42,#c89a2f)}.gradient-gold-amber{background:linear-gradient(135deg,#c8a951,#d4b969 50%,#e7cf8b)}.gradient-dark-overlay{background:linear-gradient(135deg,rgba(26,26,26,.9),rgba(42,42,42,.85))}.chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:8px;font-size:.75rem;font-weight:500;background:linear-gradient(135deg,#c8a951,#d4b969 50%,#e7cf8b);color:#1a1a1a;white-space:nowrap}.chip-small{padding:2px 8px;font-size:.625rem}.card{background:var(--card-bg);border-radius:14px;box-shadow:0 2px 8px var(--shadow-sm);transition:all .15s ease}.card:hover{box-shadow:0 4px 16px var(--shadow-md)}.card-gradient{background:linear-gradient(90deg,#ff8c42,#c89a2f);color:#1a1a1a}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;min-height:48px;border-radius:10px;font-size:1rem;font-weight:600;border:none;cursor:pointer;transition:all .15s ease;background:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn:hover{background:var(--btn-primary-hover);box-shadow:0 4px 12px rgba(0,0,0,.15)}.btn:active{transform:scale(.98)}.btn:focus-visible{outline:3px solid var(--accent-orange);outline-offset:2px}.btn-secondary{background:linear-gradient(135deg,#c8a951,#d4b969 50%,#e7cf8b);color:#1a1a1a}.btn-outline{background:transparent;border:2px solid #ff8c42;color:#ff8c42}.btn-outline:hover{background:#ff8c42;color:#fff}.input{width:100%;padding:12px 16px;border-radius:8px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);font-size:1rem;transition:all .15s ease}.input:focus{outline:none;border-color:var(--accent-orange);box-shadow:0 0 0 3px rgba(255,140,66,.1)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .2s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp .2s ease}.text-gradient{background:linear-gradient(90deg,#ff8c42,#c89a2f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.shadow-sm{box-shadow:0 1px 4px var(--shadow-sm)}.shadow-md{box-shadow:0 2px 8px var(--shadow-md)}.shadow-lg{box-shadow:0 4px 16px var(--shadow-lg)}