:root{--bg-color:#080808;--panel-bg:#121212;--card-bg:#1e1e1e;--text-color:#fff;--accent-color:#448aff;--accent-hover:#2979ff;--input-bg:#2a2a2a;--border-color:#333;--label-color:#aaa}.theme-light{--bg-color:#f5f5f5;--panel-bg:#fff;--card-bg:#f0f0f0;--text-color:#121212;--accent-color:#2962ff;--accent-hover:#0039cb;--input-bg:#e0e0e0;--border-color:#ccc;--label-color:#666}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);height:100dvh;font-family:Inter,-apple-system,sans-serif;transition:background-color .3s,color .3s;overflow:hidden}#root{height:100%;display:flex}.app-container{width:100%;height:100%;display:flex}.controls-panel{background-color:var(--panel-bg);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;gap:12px;width:340px;padding:16px;transition:background-color .3s,border-color .3s;display:flex;overflow-y:auto}.controls-panel h1{color:var(--accent-color);letter-spacing:-.8px;text-transform:uppercase;margin-bottom:8px;font-size:1.3rem;font-weight:800}.tabs{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;margin-bottom:8px;padding:4px;display:flex}.tabs button{color:var(--label-color);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:10px 4px;font-size:.75rem;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1)}.tabs button.active{background-color:var(--accent-color);color:#fff;box-shadow:0 4px 12px #0003}.tab-content{flex-direction:column;gap:12px;display:flex}.control-group{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:16px;grid-template-columns:repeat(2,1fr);align-items:start;gap:8px;padding:16px;transition:background-color .3s,border-color .3s;display:grid}.control-group label{text-transform:uppercase;letter-spacing:1px;color:var(--label-color);grid-column:span 2;margin-bottom:4px;font-size:.7rem;font-weight:800}.control-group select,.control-group .toggle-group,.control-group .regenerate-button{grid-column:span 2}.expandable-control{display:contents}.expandable-control.full-width .slider-popover{grid-column:span 2}.expand-button{background-color:var(--input-bg);border:1px solid var(--border-color);color:var(--text-color);text-align:left;cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;gap:4px;min-height:58px;padding:12px;font-size:.75rem;transition:all .2s;display:flex}.expand-button:hover{background-color:var(--accent-color);color:#fff;border-color:var(--accent-color)}.expand-button.active{border-color:var(--accent-color);background-color:var(--accent-color);color:#fff}.prop-name{opacity:.8;font-weight:600}.prop-value{font-size:.9rem;font-weight:800}.expand-button.active .prop-value,.expand-button:hover .prop-value{color:#fff}.theme-dark .expand-button:not(.active):not(:hover) .prop-value,.theme-light .expand-button:not(.active):not(:hover) .prop-value{color:var(--accent-color)}.slider-popover{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;margin-top:8px;padding:16px;animation:.2s ease-out slideDown}@keyframes slideDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}select{background-color:var(--input-bg);border:1px solid var(--border-color);width:100%;color:var(--text-color);border-radius:10px;padding:12px;font-size:.85rem;font-weight:600}.toggle-group{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:10px;gap:4px;padding:4px;display:flex}.toggle-group button{color:var(--label-color);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:10px;font-size:.75rem;font-weight:700}.toggle-group button.active{background-color:var(--accent-color);color:#fff}.regenerate-button{background-color:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:12px;margin-top:8px;padding:16px;font-size:.9rem;font-weight:800;transition:transform .1s}.regenerate-button:active{transform:scale(.98)}.step-buttons{gap:8px;margin-top:12px;display:flex}.step-buttons button{background-color:var(--card-bg);border:1px solid var(--border-color);height:44px;color:var(--text-color);border-radius:8px;flex:1;font-size:1.3rem;font-weight:700}.preview-area{background-color:var(--bg-color);flex:1;justify-content:center;align-items:center;padding:32px;transition:background-color .3s;display:flex;overflow:hidden}.canvas-container{flex-direction:column;align-items:center;gap:16px;max-width:100%;max-height:100%;display:flex}.wallpaper-canvas{object-fit:contain;border-radius:4px;max-width:100%;max-height:80dvh;box-shadow:0 30px 80px #00000080}.export-button{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:1px;background-color:#00c853;border:none;border-radius:14px;padding:14px 40px;font-weight:800;box-shadow:0 8px 24px #00c8534d}.react-colorful{width:100%!important;height:160px!important}@media (width<=768px){.app-container{flex-direction:column}.controls-panel{border-right:none;border-top:1px solid var(--border-color);order:2;width:100%;height:45%;padding:12px}.preview-area{order:1;width:100%;height:55%;padding:16px}.wallpaper-canvas{max-height:40dvh}}