@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #0f0f14;--color-surface: #1a1a24;--color-surface-elevated: #242432;--color-border: #2a2a3a;--color-text: #f5f5f7;--color-text-muted: #8e8e9a;--color-accent: #c4956a;--color-accent-hover: #d4a57a;--color-wood-dark: #5d4037;--color-wood-light: #a1887f;--color-success: #4ade80;--color-error: #f87171;--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 2px 8px rgba(0,0,0,.3);--shadow-md: 0 4px 16px rgba(0,0,0,.4);--shadow-lg: 0 8px 32px rgba(0,0,0,.5);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;min-height:100dvh;line-height:1.5;overflow-x:hidden}#root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.app{flex:1;display:flex;flex-direction:column;max-width:1400px;margin:0 auto;width:100%;padding:var(--spacing-md)}.header{text-align:center;padding:var(--spacing-lg) 0;margin-bottom:var(--spacing-md)}.header__logo{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.header__icon{width:40px;height:40px}.header__title{font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,var(--color-accent),var(--color-wood-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header__subtitle{font-size:.9rem;color:var(--color-text-muted);font-weight:300}.main-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-lg)}.preview-area{flex:1;background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}.preview-area--empty{background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-elevated) 100%)}.preview-placeholder{text-align:center;padding:var(--spacing-xl);color:var(--color-text-muted)}.preview-placeholder__icon{font-size:4rem;margin-bottom:var(--spacing-md);opacity:.5}.preview-placeholder__text{font-size:1rem;max-width:280px}.preview-canvas{width:100%;height:100%;object-fit:contain;display:block}.controls{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);padding:var(--spacing-lg)}.controls__section{margin-bottom:var(--spacing-lg)}.controls__section:last-child{margin-bottom:0}.controls__label{font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--spacing-sm);display:block}.btn-group{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:none;outline:none;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg,var(--color-accent),var(--color-wood-dark));color:#fff;box-shadow:var(--shadow-sm)}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg,var(--color-accent-hover),var(--color-wood-light));transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn--secondary{background:var(--color-surface-elevated);color:var(--color-text);border:1px solid var(--color-border)}.btn--secondary:hover:not(:disabled){background:var(--color-border);border-color:var(--color-accent)}.btn--icon{width:44px;height:44px;padding:0;border-radius:var(--radius-md)}.btn__icon{width:20px;height:20px}.texture-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:var(--spacing-sm)}.texture-item{aspect-ratio:1;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;overflow:hidden;transition:all var(--transition-fast);background:var(--color-surface-elevated)}.texture-item:hover{border-color:var(--color-border);transform:scale(1.02)}.texture-item--active{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent)}.texture-item__img{width:100%;height:100%;object-fit:cover}.texture-item__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--color-text-muted);text-align:center;padding:var(--spacing-xs)}.slider-container{display:flex;align-items:center;gap:var(--spacing-md)}.slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--color-surface-elevated);outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-accent);cursor:pointer;transition:transform var(--transition-fast)}.slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-accent);cursor:pointer;border:none}.slider-value{font-size:.9rem;color:var(--color-text-muted);min-width:3ch;text-align:right}.status{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-size:.85rem;display:flex;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-md)}.status--loading{background:#c4956a1a;color:var(--color-accent)}.status--success{background:#4ade801a;color:var(--color-success)}.status--error{background:#f871711a;color:var(--color-error)}.status__spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md)}.modal{background:var(--color-surface);border-radius:var(--radius-lg);max-width:600px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border)}.modal__title{font-size:1.1rem;font-weight:600}.modal__close{width:32px;height:32px;border-radius:var(--radius-sm);background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all var(--transition-fast)}.modal__close:hover{background:var(--color-surface-elevated);color:var(--color-text)}.modal__body{padding:var(--spacing-lg);flex:1;overflow:auto}.camera-preview{width:100%;border-radius:var(--radius-md);background:#000}.modal__footer{padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border);display:flex;justify-content:center;gap:var(--spacing-sm)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loading-overlay{position:absolute;inset:0;background:#0f0f14e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);z-index:10}.loading-overlay__spinner{width:48px;height:48px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}.loading-overlay__text{color:var(--color-text-muted);font-size:.9rem;text-align:center;max-width:200px}@media (min-width: 768px){.app{padding:var(--spacing-xl)}.header__title{font-size:2rem}.main-content{flex-direction:row;gap:var(--spacing-xl)}.preview-area{flex:2;min-height:500px}.controls{flex:0 0 320px}.texture-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px){.preview-area{min-height:600px}.controls{flex:0 0 380px}.texture-grid{grid-template-columns:repeat(4,1fr)}}@media (hover: none){.btn:active:not(:disabled){transform:scale(.98)}.texture-item:active{transform:scale(.95)}}@supports (padding-bottom: env(safe-area-inset-bottom)){.app{padding-bottom:calc(var(--spacing-md) + env(safe-area-inset-bottom))}}