*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a24;--bg-hover: rgba(255, 255, 255, .08);--text-primary: #f0f0f5;--text-secondary: #9a9ab0;--text-muted: #5a5a70;--accent: #e85a71;--accent-hover: #f06b82;--accent-glow: rgba(232, 90, 113, .35);--border: rgba(255, 255, 255, .08);--border-light: rgba(255, 255, 255, .14);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 16px rgba(0, 0, 0, .25);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .3);--success: #4caf50;--error: #f44336;--glass-bg: rgba(255, 255, 255, .06);--glass-bg-hover: rgba(255, 255, 255, .1);--glass-blur: blur(20px);--glass-border: 1px solid rgba(255, 255, 255, .1);--glass-radius: 16px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-size-xs: .7rem;--font-size-sm: .8rem;--font-size-base: .875rem;--font-size-md: .9rem;--font-size-lg: 1rem;--font-size-xl: 1.125rem;--font-size-2xl: 1.25rem;--ease-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}.app.light-theme{--bg-primary: #f0f0f5;--bg-secondary: #ffffff;--bg-tertiary: #f5f5fa;--bg-hover: rgba(0, 0, 0, .04);--text-primary: #1a1a2e;--text-secondary: #4a4a60;--text-muted: #7a7a90;--accent: #e85a71;--accent-hover: #d64d63;--accent-glow: rgba(232, 90, 113, .25);--border: rgba(0, 0, 0, .08);--border-light: rgba(0, 0, 0, .14);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);--shadow-md: 0 4px 16px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .1);--glass-bg: rgba(255, 255, 255, .85);--glass-bg-hover: rgba(255, 255, 255, .95);--glass-border: 1px solid rgba(0, 0, 0, .06)}.app.light-theme .video-canvas-container{background-color:#d0d0dd}.app.light-theme .tab-color-swatch{border-color:#0000001f}.app.light-theme .shade-color,.app.light-theme .current-color-swatch{border-color:#00000014}.app.light-theme .product-dropdown,.app.light-theme .finish-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")}.app.light-theme .intensity-slider{background:#00000014}.app.light-theme .toggle-slider{background:#00000026}.app.light-theme .toggle-switch input:checked+.toggle-slider{background:var(--accent)}.app.light-theme .tab-button.active{background:#fff;border-color:#00000014}.app.light-theme .action-button{background:#ffffffe6}.app.light-theme .action-button.active{background:var(--text-primary);color:#fff}@media(max-width:768px){.app.light-theme .action-buttons,.app.light-theme .action-grid{box-shadow:0 -4px 20px #00000014}}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5;overflow:hidden;transition:background-color .3s var(--ease-out),color .3s var(--ease-out);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:flex;flex-direction:column;height:100dvh;max-height:100dvh;color:var(--text-primary)}.app-header{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);padding:max(12px,env(safe-area-inset-top)) 24px 12px;border-bottom:var(--glass-border);flex-shrink:0;transition:background .3s var(--ease-out),border-color .3s var(--ease-out)}.app-header h1{font-size:var(--font-size-2xl);font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.app-main{display:flex;flex:1;overflow:hidden}.app-footer{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);padding:8px 24px;border-top:var(--glass-border);flex-shrink:0;transition:background .3s var(--ease-out),border-color .3s var(--ease-out)}.app-footer p{font-size:var(--font-size-xs);color:var(--text-muted);text-align:center;letter-spacing:.02em}.video-section{flex:1;display:flex;align-items:center;justify-content:center;background-color:var(--bg-primary);padding:16px;overflow:hidden}.video-canvas-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#000;border-radius:12px;overflow:hidden}.video-canvas-container.lamp-on:after{content:"";position:absolute;inset:-60px;border-radius:112px;border:100px solid #ffffff;pointer-events:none;z-index:10;box-shadow:inset 0 0 80px 20px #fff9}.video-canvas{width:100%;height:100%;object-fit:contain;border-radius:8px}.status-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#00000080;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.status-message{padding:16px 24px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:var(--glass-radius);font-size:var(--font-size-md);color:var(--text-secondary);box-shadow:var(--shadow-md)}.fps-counter{position:absolute;top:12px;left:12px;padding:4px 8px;background:#00000080;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:6px;font-size:var(--font-size-xs);font-family:Inter,monospace;color:var(--success);letter-spacing:.02em}.controls-section{width:340px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-left:var(--glass-border);overflow-y:auto;flex-shrink:0;transition:background .3s var(--ease-out),border-color .3s var(--ease-out)}.makeup-controls{padding:20px;display:flex;flex-direction:column;gap:20px}.preset-selector{display:flex;flex-direction:column;gap:10px}.preset-label{font-size:var(--font-size-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.preset-buttons{display:flex;gap:8px;flex-wrap:wrap}.preset-button{flex:1;min-width:70px;padding:8px 12px;background:var(--glass-bg);border:var(--glass-border);border-radius:10px;color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all .2s var(--ease-out)}.preset-button:hover{background:var(--glass-bg-hover);border-color:var(--border-light);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.preset-button.selected{background:var(--accent);border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow)}.controls-tabs{display:flex;flex-direction:column;gap:4px;background:var(--glass-bg);border:var(--glass-border);padding:6px;border-radius:var(--glass-radius);transition:background .3s var(--ease-out)}.tab-button{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:transparent;border:1px solid transparent;border-radius:12px;color:var(--text-secondary);font-family:var(--font-family);font-size:var(--font-size-md);font-weight:500;cursor:pointer;transition:all .2s var(--ease-out);-webkit-transform:translateZ(0);transform:translateZ(0)}.tab-button:hover{color:var(--text-primary);background:var(--bg-hover)}.tab-button.active{background:var(--glass-bg-hover);border-color:var(--border-light);color:var(--text-primary);box-shadow:var(--shadow-sm)}.tab-label{display:flex;align-items:center;gap:8px}.tab-dot{display:inline-block;width:6px;height:6px;background-color:var(--success);border-radius:50%;box-shadow:0 0 6px #4caf5080}.tab-meta{display:flex;align-items:center;gap:8px}.tab-color-swatch{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.15);box-shadow:0 0 4px #0003}.tab-intensity{font-size:var(--font-size-sm);color:var(--text-secondary);min-width:32px;text-align:right;font-variant-numeric:tabular-nums}.tab-button.disabled{opacity:.5}.controls-panel{display:flex;flex-direction:column;gap:16px;padding:16px;background:var(--glass-bg);border:var(--glass-border);border-radius:var(--glass-radius);transition:background .3s var(--ease-out)}.control-row{display:flex;flex-direction:column;gap:8px}.toggle-label{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--font-size-md);font-weight:500;user-select:none}.toggle-switch{position:relative;display:inline-flex;align-items:center;width:44px;height:24px;flex-shrink:0}.toggle-switch input[type=checkbox]{position:absolute;width:44px;height:24px;opacity:0;cursor:pointer;margin:0;z-index:1}.toggle-slider{position:absolute;inset:0;background:#ffffff1f;border-radius:12px;transition:all .25s var(--ease-out);pointer-events:none}.toggle-slider:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--text-primary);border-radius:50%;transition:all .25s var(--ease-spring);box-shadow:0 1px 3px #0000004d}.toggle-switch input:checked+.toggle-slider{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.toggle-switch input:checked+.toggle-slider:after{transform:translate(20px);background:#fff}.toggle-switch input:focus-visible+.toggle-slider{outline:2px solid var(--accent);outline-offset:2px}.toggle-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.color-picker{display:flex;flex-direction:column;gap:10px}.color-picker-label{font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);letter-spacing:.02em}.color-swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;max-width:300px}.foundation-palette{display:flex;flex-direction:column;gap:6px}.foundation-row-label{font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:500;letter-spacing:.04em}.color-swatch{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s var(--ease-spring)}.color-swatch:hover{transform:scale(1.15);box-shadow:0 0 8px #0000004d}.color-swatch.selected{border-color:#fff;box-shadow:0 0 0 1.5px #000c;transform:scale(1.05)}.color-input-wrapper{display:flex;align-items:center;gap:10px}.color-input-wrapper.selected .color-input{outline:2px solid #ffffff;outline-offset:1px;box-shadow:0 0 0 3.5px #000c}.color-input{width:40px;height:32px;padding:0;border:none;border-radius:8px;cursor:pointer;background-color:transparent}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:1px solid var(--border-light);border-radius:8px}.color-value{font-family:Inter,monospace;font-size:var(--font-size-base);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.slider-label{font-size:var(--font-size-base);color:var(--text-secondary);font-weight:500;font-variant-numeric:tabular-nums}.intensity-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:999px;outline:none;cursor:pointer;padding:16px 0;transition:background .2s var(--ease-out)}.intensity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-glow);transition:all .2s var(--ease-spring)}.intensity-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 16px var(--accent-glow),0 0 4px #e85a7180}.intensity-slider::-moz-range-thumb{width:20px;height:20px;background:var(--accent);border:none;border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-glow)}.intensity-slider::-moz-range-track{height:6px;background:#ffffff1a;border-radius:999px;border:none}.intensity-slider:disabled{opacity:.4;cursor:not-allowed}.intensity-slider:disabled::-webkit-slider-thumb{cursor:not-allowed;box-shadow:none}.action-buttons{display:flex;gap:10px;margin-top:8px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.action-button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;background:var(--glass-bg);border:var(--glass-border);border-radius:12px;color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-md);font-weight:500;cursor:pointer;transition:all .2s var(--ease-out)}.action-button:hover{background:var(--glass-bg-hover);border-color:var(--border-light);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.action-button:active{transform:translateY(0)}.action-button.active{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-primary)}.action-button.primary{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.action-button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 0 20px var(--accent-glow);transform:translateY(-1px)}.action-button-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}.action-button-icon svg{width:16px;height:16px}.mode-tabs{display:flex;gap:4px;background:var(--glass-bg);padding:4px;border-radius:12px;margin-bottom:16px;border:var(--glass-border)}.mode-tab{flex:1;padding:8px 12px;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--text-secondary);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all .2s var(--ease-out)}.mode-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.mode-tab.active{background:var(--accent);color:#fff;box-shadow:0 0 10px var(--accent-glow)}.product-selector{display:flex;flex-direction:column;gap:16px}.product-label{display:block;font-size:var(--font-size-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.product-dropdown,.finish-select{width:100%;padding:10px 32px 10px 12px;-webkit-appearance:none;appearance:none;background-color:var(--glass-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;border:var(--glass-border);border-radius:10px;color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-base);cursor:pointer;outline:none;transition:all .2s var(--ease-out)}.product-dropdown:hover,.product-dropdown:focus,.finish-select:hover,.finish-select:focus{border-color:var(--border-light);background-color:var(--glass-bg-hover)}.product-dropdown option,.finish-select option{background-color:var(--bg-secondary);color:var(--text-primary)}.finish-select:disabled{opacity:.4;cursor:not-allowed}.shade-items{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto;padding-right:4px}.shade-items::-webkit-scrollbar{width:6px}.shade-items::-webkit-scrollbar-track{background:transparent;border-radius:3px}.shade-items::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.shade-items::-webkit-scrollbar-thumb:hover{background:#fff3}.shade-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--glass-bg);border:var(--glass-border);border-radius:10px;cursor:pointer;transition:all .2s var(--ease-out);text-align:left}.shade-item:hover{background:var(--glass-bg-hover);border-color:var(--border-light);transform:translate(2px)}.shade-item.selected{background:var(--glass-bg-hover);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.shade-color{width:24px;height:24px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 4px #0003}.shade-name{flex:1;font-size:var(--font-size-base);color:var(--text-primary);font-weight:500}.shade-badge{padding:2px 8px;background:var(--accent);border-radius:6px;font-size:var(--font-size-xs);font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.04em}.shade-info{display:flex;gap:16px;padding:10px 12px;background:var(--glass-bg);border:var(--glass-border);border-radius:10px}.shade-info-row{display:flex;flex-direction:column;gap:2px}.shade-info-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.shade-info-value{font-size:var(--font-size-base);color:var(--text-primary);text-transform:capitalize;font-weight:500}.current-color-display{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--glass-bg);border:var(--glass-border);border-radius:10px}.current-color-swatch{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 4px #0003}.current-color-hex{font-family:Inter,monospace;font-size:var(--font-size-base);color:var(--text-secondary);letter-spacing:.04em}.debug-mask-container{position:absolute;bottom:12px;right:12px;display:flex;flex-direction:column;align-items:center}.debug-mask-label{font-size:10px;color:var(--accent);margin-bottom:4px;text-align:center;font-family:Inter,monospace;letter-spacing:.04em}.debug-mask-canvas{border:2px solid var(--accent);border-radius:8px;display:block;box-shadow:0 0 8px var(--accent-glow)}.lamp-on .debug-mask-container{bottom:54px;right:54px}.controls-section::-webkit-scrollbar{width:6px}.controls-section::-webkit-scrollbar-track{background:transparent}.controls-section::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.controls-section::-webkit-scrollbar-thumb:hover{background:#ffffff2e}@media(min-width:769px)and (max-width:1024px){.controls-section{width:300px}.makeup-controls{padding:14px;gap:14px}}@media(max-width:768px){.app-main{flex-direction:column}.video-section{flex:none;height:45vh;min-height:280px;padding:0}.video-canvas-container{border-radius:0}.video-canvas{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:0}.controls-section{width:100%;border-left:none;border-top:var(--glass-border);overflow-y:auto;flex:1;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg-primary)}.makeup-controls{padding:16px;padding-bottom:calc(150px + env(safe-area-inset-bottom))}.action-buttons,.action-grid{position:fixed;bottom:0;left:0;right:0;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:var(--bg-primary);border-top:var(--glass-border);box-shadow:0 -4px 20px #0006;margin-top:0;z-index:100}.shade-items{max-height:none!important;overflow-y:visible!important;overflow-x:visible!important}.debug-mask-container{bottom:8px;right:8px}.lamp-on .debug-mask-container{bottom:50px;right:50px}.debug-mask-canvas{width:80px!important;height:60px!important}.debug-mask-label{font-size:8px}}