.avatarka-picker{--_avatarka-bg: var(--avatarka-bg, #ffffff);--_avatarka-accent: var(--avatarka-accent, #6366f1);--_avatarka-text: var(--avatarka-text, #1f2937);--_avatarka-text-secondary: var(--avatarka-text-secondary, #6b7280);--_avatarka-border: var(--avatarka-border, #e5e7eb);--_avatarka-input-bg: var(--avatarka-input-bg, #ffffff);--_avatarka-btn-bg: var(--avatarka-btn-bg, #f3f4f6);--_avatarka-shadow: var(--avatarka-shadow, rgba(0, 0, 0, .1));--_avatarka-grid-width: var(--avatarka-grid-width, 5);display:flex;flex-direction:column;gap:20px;background:var(--_avatarka-bg);border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:var(--_avatarka-text);box-sizing:border-box}.avatarka-picker *,.avatarka-picker *:before,.avatarka-picker *:after{box-sizing:border-box}.avatarka-tabs{display:flex;background:var(--_avatarka-btn-bg);border-radius:8px;padding:4px}.avatarka-tab{flex:1;padding:10px 16px;border:none;border-radius:6px;background:transparent;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;color:var(--_avatarka-text-secondary);font-family:inherit}.avatarka-tab:hover{color:var(--_avatarka-text)}.avatarka-tab.active{background:var(--_avatarka-bg);color:var(--_avatarka-accent);box-shadow:0 1px 3px var(--_avatarka-shadow)}.avatarka-theme-dropdown{width:100%;height:40px;padding:0 12px;border:1px solid var(--_avatarka-border);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;background:var(--_avatarka-input-bg);color:var(--_avatarka-text);transition:border-color .2s;font-family:inherit}.avatarka-theme-dropdown:focus{outline:none;border-color:var(--_avatarka-accent)}.avatarka-editor{display:flex;flex-direction:column;align-items:center;gap:16px}.avatarka-preview{width:180px;height:180px;overflow:hidden}.avatarka-preview svg{width:100%;height:100%}.avatarka-controls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px;width:100%}.avatarka-control-group{margin-bottom:0}.avatarka-control-group label{display:block;font-size:12px;font-weight:500;color:var(--_avatarka-text-secondary);margin-bottom:4px}.avatarka-control-group input[type=color]{width:100%;height:32px;padding:3px;border:1px solid var(--_avatarka-border);border-radius:6px;cursor:pointer;background:var(--_avatarka-input-bg)}.avatarka-control-group input[type=range]{width:100%;height:8px;cursor:pointer;accent-color:var(--_avatarka-accent)}.avatarka-control-group select{width:100%;height:32px;padding:0 8px;border:1px solid var(--_avatarka-border);border-radius:6px;font-size:13px;cursor:pointer;background:var(--_avatarka-input-bg);color:var(--_avatarka-text);font-family:inherit}.avatarka-control-group select:focus{outline:none;border-color:var(--_avatarka-accent);box-shadow:0 0 0 3px #6366f126}.avatarka-btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit}.avatarka-btn-primary{background:var(--_avatarka-accent);color:#fff}.avatarka-btn-primary:hover{filter:brightness(.9)}.avatarka-gallery{display:flex;flex-direction:column;align-items:center;gap:16px}.avatarka-gallery .avatarka-gallery-grid{width:100%}.avatarka-gallery-grid{display:grid;grid-template-columns:repeat(var(--_avatarka-grid-width, 5),1fr);gap:8px}.avatarka-gallery-item{aspect-ratio:1;overflow:hidden;cursor:pointer;transition:transform .2s}.avatarka-gallery-item:hover{transform:scale(1.05)}.avatarka-gallery-item svg{width:100%;height:100%}@media(max-width:480px){.avatarka-preview{width:150px;height:150px}.avatarka-controls-grid{grid-template-columns:1fr}.avatarka-gallery-grid{grid-template-columns:repeat(min(var(--_avatarka-grid-width, 5),4),1fr);gap:6px}}.avatarka-picker--compact{gap:12px}.avatarka-picker--compact .avatarka-tabs{padding:2px}.avatarka-picker--compact .avatarka-tab{padding:6px 12px;font-size:13px}.avatarka-picker--compact .avatarka-editor{flex-direction:row;align-items:flex-start;gap:12px;flex-wrap:wrap}.avatarka-picker--compact .avatarka-editor-left{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.avatarka-picker--compact .avatarka-editor-right{display:flex;flex-direction:column;gap:8px;flex:1;min-width:200px}.avatarka-picker--compact .avatarka-preview{width:120px;height:120px}.avatarka-picker--compact .avatarka-theme-dropdown{height:32px;font-size:13px}.avatarka-picker--compact .avatarka-controls-grid{gap:8px 12px}.avatarka-picker--compact .avatarka-control-group label{font-size:11px;margin-bottom:2px}.avatarka-picker--compact .avatarka-control-group input[type=color]{height:26px}.avatarka-picker--compact .avatarka-control-group input[type=range]{height:6px}.avatarka-picker--compact .avatarka-control-group select{height:26px;font-size:12px}.avatarka-picker--compact .avatarka-btn{padding:8px 16px;font-size:13px}.avatarka-picker--compact .avatarka-gallery{gap:12px}.avatarka-picker--compact .avatarka-gallery-grid{gap:6px}*{box-sizing:border-box;margin:0;padding:0}:root{--bg-gradient-start: #667eea;--bg-gradient-end: #764ba2;--card-bg: white;--text-primary: #1f2937;--text-secondary: #6b7280;--text-heading: #374151;--border-color: #e5e7eb;--input-bg: white;--preview-bg: #f9fafb;--btn-secondary-bg: #f3f4f6;--btn-secondary-hover: #e5e7eb;--accent-color: #6366f1;--accent-hover: #4f46e5;--shadow-color: rgba(0, 0, 0, .15);--shadow-light: rgba(0, 0, 0, .1)}[data-theme=dark]{--bg-gradient-start: #1e1b4b;--bg-gradient-end: #312e81;--card-bg: #1f2937;--text-primary: #f3f4f6;--text-secondary: #9ca3af;--text-heading: #e5e7eb;--border-color: #374151;--input-bg: #374151;--preview-bg: #111827;--btn-secondary-bg: #374151;--btn-secondary-hover: #4b5563;--accent-color: #818cf8;--accent-hover: #6366f1;--shadow-color: rgba(0, 0, 0, .4);--shadow-light: rgba(0, 0, 0, .3)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,var(--bg-gradient-start) 0%,var(--bg-gradient-end) 100%);min-height:100vh;color:var(--text-primary);transition:background .3s ease}.app{max-width:600px;margin:0 auto;padding:40px 20px}.header{text-align:center;margin-bottom:40px;color:#fff}.header h1{font-size:3rem;font-weight:700;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,.2)}.header p{font-size:1.2rem;opacity:.9}.header-top{display:flex;justify-content:space-between;align-items:center}.header-title{text-align:center;flex:1}.color-mode-switcher,.layout-switcher{width:112px}.color-mode-switcher{display:flex;gap:4px;background:#fff3;border-radius:8px;padding:4px}.color-mode-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:transparent;color:#ffffffb3;cursor:pointer;transition:all .2s}.color-mode-btn:hover{background:#ffffff26;color:#fff}.color-mode-btn.active{background:#ffffff4d;color:#fff}.layout-switcher{display:flex;gap:4px;background:#fff3;border-radius:8px;padding:4px}.layout-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:transparent;color:#ffffffb3;cursor:pointer;transition:all .2s}.layout-btn:hover{background:#ffffff26;color:#fff}.layout-btn.active{background:#ffffff4d;color:#fff}.main-card{background:var(--card-bg);border-radius:16px;box-shadow:0 20px 40px var(--shadow-color);padding:24px;transition:background .3s ease,box-shadow .3s ease}.avatarka-picker{--avatarka-bg: var(--card-bg);--avatarka-accent: var(--accent-color);--avatarka-text: var(--text-primary);--avatarka-text-secondary: var(--text-secondary);--avatarka-border: var(--border-color);--avatarka-input-bg: var(--input-bg);--avatarka-btn-bg: var(--btn-secondary-bg);--avatarka-shadow: var(--shadow-light)}.save-buttons{display:flex;gap:12px;margin-top:20px;justify-content:center}.save-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--border-color);border-radius:8px;background:var(--btn-secondary-bg);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.save-btn:hover{background:var(--btn-secondary-hover);border-color:var(--accent-color)}.save-btn svg{flex-shrink:0}@media(max-width:480px){.header h1{font-size:2rem}.main-card{padding:16px}.save-buttons{flex-direction:column}.save-btn{justify-content:center}}