*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #252525;--bg-hover: #2a2a2a;--text-primary: #ffffff;--text-secondary: #a0a0a0;--text-muted: #666666;--accent: #e85a71;--accent-hover: #f06b82;--border: #333333;--border-light: #444444;--success: #4caf50;--error: #f44336;--shadow: rgba(0, 0, 0, .3)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5;overflow:hidden}.app{display:flex;flex-direction:column;height:100dvh;max-height:100dvh}.app-header{background-color:var(--bg-secondary);padding:max(12px,env(safe-area-inset-top)) 24px 12px;border-bottom:1px solid var(--border);flex-shrink:0}.app-header h1{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.app-main{display:flex;flex:1;overflow:hidden}.app-footer{background-color:var(--bg-secondary);padding:8px 24px;border-top:1px solid var(--border);flex-shrink:0}.app-footer p{font-size:.75rem;color:var(--text-muted);text-align:center}.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{width:100%;height:100%;object-fit:cover;border-radius:8px}.status-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#000000b3}.status-message{padding:16px 24px;background-color:var(--bg-tertiary);border-radius:8px;font-size:.9rem;color:var(--text-secondary)}.fps-counter{position:absolute;top:12px;left:12px;padding:4px 8px;background-color:#0009;border-radius:4px;font-size:.75rem;font-family:monospace;color:var(--success)}.controls-section{width:320px;background-color:var(--bg-secondary);border-left:1px solid var(--border);overflow-y:auto;flex-shrink:0}.makeup-controls{padding:20px;display:flex;flex-direction:column;gap:20px}.preset-selector{display:flex;flex-direction:column;gap:10px}.preset-label{font-size:.8rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.preset-buttons{display:flex;gap:8px;flex-wrap:wrap}.preset-button{flex:1;min-width:70px;padding:8px 12px;background-color:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all .15s ease}.preset-button:hover{background-color:var(--bg-hover);border-color:var(--border-light)}.preset-button.selected{background-color:var(--accent);border-color:var(--accent)}.controls-tabs{display:flex;gap:4px;background-color:var(--bg-tertiary);padding:4px;border-radius:8px}.tab-button{flex:1;padding:10px 12px;background-color:transparent;border:none;border-radius:6px;color:var(--text-secondary);font-size:.9rem;font-weight:500;cursor:pointer;transition:background-color .15s ease,color .15s ease,opacity .15s ease;-webkit-transform:translateZ(0);transform:translateZ(0)}.tab-button:hover{color:var(--text-primary);background-color:var(--bg-hover)}.tab-button.active{background-color:var(--bg-secondary);color:var(--text-primary)}.tab-dot{display:inline-block;width:6px;height:6px;background-color:var(--success);border-radius:50%;margin-left:6px;vertical-align:middle}.tab-button.disabled{opacity:.6}.controls-panel{display:flex;flex-direction:column;gap:16px;padding:16px;background-color:var(--bg-tertiary);border-radius:8px}.control-row{display:flex;flex-direction:column;gap:8px}.toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem}.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:.8rem;font-weight:500;color:var(--text-secondary)}.color-swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:300px}.color-swatch{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s ease}.color-swatch:hover{transform:scale(1.1)}.color-swatch.selected{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--bg-tertiary)}.color-input-wrapper{display:flex;align-items:center;gap:10px}.color-input{width:40px;height:32px;padding:0;border:none;border-radius:6px;cursor:pointer;background-color:transparent}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:1px solid var(--border);border-radius:6px}.color-value{font-family:monospace;font-size:.85rem;color:var(--text-secondary);text-transform:uppercase}.slider-label{font-size:.85rem;color:var(--text-secondary)}.intensity-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--bg-secondary);border-radius:999px;outline:none;cursor:pointer;padding:16px 0}.intensity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform .15s ease}.intensity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.intensity-slider::-moz-range-thumb{width:28px;height:28px;background:var(--accent);border:none;border-radius:50%;cursor:pointer}.intensity-slider:disabled{opacity:.5;cursor:not-allowed}.intensity-slider:disabled::-webkit-slider-thumb{cursor:not-allowed}.action-buttons{display:flex;gap:10px;margin-top:8px}.action-button{flex:1;padding:12px 16px;background-color:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .15s ease}.action-button:hover{background-color:var(--bg-hover);border-color:var(--border-light)}.action-button.primary{background-color:var(--accent);border-color:var(--accent)}.action-button.primary:hover{background-color:var(--accent-hover);border-color:var(--accent-hover)}@media(min-width:769px)and (max-width:1024px){.controls-section{width:280px}.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:cover;border-radius:0}.controls-section{width:100%;border-left:none;border-top:1px solid var(--border);overflow-y:auto;flex:1}.makeup-controls{padding:16px;padding-bottom:calc(150px + env(safe-area-inset-bottom))}.action-buttons{position:fixed;bottom:0;left:0;right:0;padding:12px 16px max(12px,env(safe-area-inset-bottom));background-color:var(--bg-secondary);border-top:1px solid var(--border);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}.debug-mask-canvas{width:80px!important;height:60px!important}.debug-mask-label{font-size:8px}}.controls-section::-webkit-scrollbar{width:8px}.controls-section::-webkit-scrollbar-track{background:var(--bg-secondary)}.controls-section::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.controls-section::-webkit-scrollbar-thumb:hover{background:var(--border-light)}.mode-tabs{display:flex;gap:4px;background-color:var(--bg-tertiary);padding:4px;border-radius:8px;margin-bottom:16px}.mode-tab{flex:1;padding:8px 12px;background-color:transparent;border:none;border-radius:6px;color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease}.mode-tab:hover{color:var(--text-primary);background-color:var(--bg-hover)}.mode-tab.active{background-color:var(--accent);color:var(--text-primary)}.product-selector{display:flex;flex-direction:column;gap:16px}.product-label{display:block;font-size:.8rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.product-dropdown,.finish-select{width:100%;padding:10px 32px 10px 12px;-webkit-appearance:none;appearance:none;background-color:var(--bg-secondary);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:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:.85rem;cursor:pointer;outline:none;transition:border-color .15s ease}.product-dropdown:hover,.product-dropdown:focus,.finish-select:hover,.finish-select:focus{border-color:var(--border-light)}.product-dropdown option,.finish-select option{background-color:var(--bg-secondary);color:var(--text-primary)}.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:var(--bg-tertiary);border-radius:3px}.shade-items::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.shade-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .15s ease;text-align:left}.shade-item:hover{background-color:var(--bg-hover);border-color:var(--border-light)}.shade-item.selected{background-color:var(--bg-hover);border-color:var(--accent)}.shade-color{width:24px;height:24px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}.shade-name{flex:1;font-size:.85rem;color:var(--text-primary)}.shade-badge{padding:2px 6px;background-color:var(--accent);border-radius:4px;font-size:.7rem;font-weight:600;color:#fff;text-transform:uppercase}.shade-info{display:flex;gap:16px;padding:10px 12px;background-color:var(--bg-secondary);border-radius:6px}.shade-info-row{display:flex;flex-direction:column;gap:2px}.shade-info-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase}.shade-info-value{font-size:.85rem;color:var(--text-primary);text-transform:capitalize}.current-color-display{display:flex;align-items:center;gap:10px;padding:8px 12px;background-color:var(--bg-secondary);border-radius:6px}.current-color-swatch{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.1)}.current-color-hex{font-family:monospace;font-size:.85rem;color:var(--text-secondary)}.finish-select:disabled{opacity:.5;cursor:not-allowed}.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:monospace}.debug-mask-canvas{border:2px solid var(--accent);border-radius:6px;display:block}