:root{--timing-ease:cubic-bezier(.4, 0, .2, 1);--timing-bounce:cubic-bezier(.68, -.55, .265, 1.55);--timing-smooth:cubic-bezier(.25, .46, .45, .94)}[data-theme=light]{--bg-primary:#f0f4f8;--bg-gradient-1:#667eea;--bg-gradient-2:#764ba2;--bg-gradient-3:#f093fb;--glass-bg:#ffffffb3;--glass-border:#ffffff4d;--glass-shadow:#1f268726;--text-primary:#1a202c;--text-secondary:#4a5568;--text-muted:#718096;--accent-primary:#667eea;--accent-hover:#5a67d8;--accent-light:#667eea1a;--success:#48bb78;--error:#f56565;--info:#4299e1}[data-theme=dark]{--bg-primary:#0f1419;--bg-gradient-1:#2d3748;--bg-gradient-2:#4a5568;--bg-gradient-3:#667eea;--glass-bg:#1a202cb3;--glass-border:#ffffff1a;--glass-shadow:#0000004d;--text-primary:#f7fafc;--text-secondary:#e2e8f0;--text-muted:#a0aec0;--accent-primary:#667eea;--accent-hover:#7c3aed;--accent-light:#667eea33;--success:#48bb78;--error:#fc8181;--info:#63b3ed}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s var(--timing-ease), color .3s var(--timing-ease);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code,pre,.format-value{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace}.app{flex-direction:column;min-height:100vh;display:flex;position:relative;overflow-x:hidden}.background-gradient{z-index:-1;background:linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);opacity:.1;animation:15s infinite gradientShift;position:fixed;inset:0}@keyframes gradientShift{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.1)rotate(5deg)}}.header{animation:slideDown .6s var(--timing-ease);padding:2rem 1rem 1rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.header-content{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;display:flex}.title{background:linear-gradient(135deg, var(--accent-primary), var(--bg-gradient-3));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;align-items:center;gap:.75rem;font-size:2.5rem;font-weight:700;display:flex}.title-icon{filter:drop-shadow(0 2px 4px #0000001a);font-size:2rem}.theme-toggle{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:none;border:1px solid var(--glass-border);cursor:pointer;width:50px;height:50px;transition:all .3s var(--timing-bounce);box-shadow:0 4px 6px var(--glass-shadow);border-radius:50%;font-size:1.5rem}.theme-toggle:hover{box-shadow:0 6px 12px var(--glass-shadow);transform:scale(1.1)rotate(15deg)}.theme-toggle:active{transform:scale(.95)}.main{flex:1;padding:2rem 1rem}.container{flex-direction:column;gap:2rem;max-width:1200px;margin:0 auto;display:flex}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);box-shadow:0 8px 32px var(--glass-shadow);transition:all .3s var(--timing-ease);border-radius:20px;padding:2rem}.glass-card:hover{box-shadow:0 12px 40px var(--glass-shadow);transform:translateY(-2px)}.uuid-main-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);box-shadow:0 12px 40px var(--glass-shadow);animation:fadeInUp .6s var(--timing-ease);border-radius:24px;padding:2.5rem;animation-delay:.1s;animation-fill-mode:both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.uuid-display{text-align:center;margin-bottom:2rem}.uuid-value{color:var(--accent-primary);letter-spacing:.02em;background:var(--accent-light);animation:fadeIn .5s var(--timing-ease);word-break:break-all;border-radius:12px;padding:1.5rem;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,monospace;font-size:1.75rem;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.control-group{align-items:center;gap:.5rem;display:flex}.control-label{color:var(--text-secondary);font-size:.9rem;font-weight:500}.version-select{border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-primary);cursor:pointer;transition:all .2s var(--timing-ease);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:.75rem 1rem;font-size:.95rem;font-weight:500}.version-select:hover:not(:disabled){border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-light)}.version-select:disabled{opacity:.5;cursor:not-allowed}.generate-button{background:linear-gradient(135deg, var(--accent-primary), var(--accent-hover));color:#fff;cursor:pointer;transition:all .3s var(--timing-ease);border:none;border-radius:12px;align-items:center;gap:.5rem;padding:.75rem 2rem;font-size:1rem;font-weight:600;display:flex;box-shadow:0 4px 12px #667eea4d}.generate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.generate-button:active:not(:disabled){transform:translateY(0)}.generate-button:disabled{opacity:.5;cursor:not-allowed}.generate-button svg{animation:2s linear infinite rotate}.generate-button:hover:not(:disabled) svg{animation:.6s linear infinite rotate}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lock-button{border:1px solid var(--glass-border);background:var(--glass-bg);cursor:pointer;transition:all .3s var(--timing-bounce);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:.75rem 1.25rem;font-size:1.25rem}.lock-button:hover{box-shadow:0 4px 12px var(--glass-shadow);transform:scale(1.1)}.lock-button.locked{background:var(--accent-light);border-color:var(--accent-primary)}.auto-generate{background:var(--accent-light);border-radius:12px;justify-content:center;align-items:center;gap:.75rem;padding:1rem;display:flex}.auto-generate-label{cursor:pointer;color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.95rem;display:flex}.auto-generate-label input[type=checkbox]{cursor:pointer;width:18px;height:18px}.auto-interval-input{border:1px solid var(--glass-border);background:var(--glass-bg);width:60px;color:var(--text-primary);text-align:center;border-radius:8px;padding:.5rem;font-weight:600}.auto-interval-input:disabled{opacity:.5;cursor:not-allowed}.formats-grid{animation:fadeInUp .6s var(--timing-ease);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;animation-delay:.2s;animation-fill-mode:both;display:grid}.format-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);transition:all .3s var(--timing-ease);box-shadow:0 4px 12px var(--glass-shadow);border-radius:16px;padding:1.5rem}.format-card:hover{box-shadow:0 8px 24px var(--glass-shadow);border-color:var(--accent-primary);transform:translateY(-4px)}.format-card-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.format-label{color:var(--text-primary);margin-bottom:.25rem;font-size:1.1rem;font-weight:600}.format-description{color:var(--text-muted);margin:0;font-size:.85rem}.copy-button{border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-secondary);cursor:pointer;transition:all .2s var(--timing-ease);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem;display:flex}.copy-button:hover{background:var(--accent-light);color:var(--accent-primary);border-color:var(--accent-primary);transform:scale(1.05)}.copy-button.copying{background:var(--success);color:#fff;border-color:var(--success);animation:pulse .3s var(--timing-ease)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.format-value{color:var(--text-secondary);word-break:break-all;background:var(--accent-light);border-left:3px solid var(--accent-primary);border-radius:8px;padding:1rem;font-size:.9rem;line-height:1.6}.validation-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);box-shadow:0 8px 24px var(--glass-shadow);animation:fadeInUp .6s var(--timing-ease);border-radius:20px;padding:2rem;animation-delay:.3s;animation-fill-mode:both}.validation-panel h3{color:var(--text-primary);margin-bottom:.5rem;font-size:1.5rem}.validation-description{color:var(--text-muted);margin-bottom:1.5rem}.validation-input-group{gap:1rem;margin-bottom:1rem;display:flex}.validation-input{border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-primary);transition:all .2s var(--timing-ease);border-radius:12px;flex:1;padding:.875rem 1.25rem;font-family:SF Mono,Monaco,monospace;font-size:.95rem}.validation-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-light);outline:none}.validate-button{background:var(--accent-primary);color:#fff;cursor:pointer;transition:all .2s var(--timing-ease);white-space:nowrap;border:none;border-radius:12px;padding:.875rem 1.75rem;font-weight:600}.validate-button:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.validation-error{border-left:3px solid var(--error);color:var(--error);animation:shake .4s var(--timing-ease);background:#f565651a;border-radius:8px;padding:.875rem 1.25rem;font-weight:500}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.validation-success{border-left:3px solid var(--success);color:var(--success);animation:slideInRight .3s var(--timing-ease);background:#48bb781a;border-radius:8px;padding:.875rem 1.25rem;font-weight:500}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.info-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);box-shadow:0 8px 24px var(--glass-shadow);animation:fadeInUp .6s var(--timing-ease);border-radius:20px;padding:2rem;animation-delay:.4s;animation-fill-mode:both}.info-panel h3{color:var(--text-primary);margin-bottom:1rem;font-size:1.5rem}.info-panel h4{color:var(--text-primary);margin-top:1.5rem;margin-bottom:.75rem;font-size:1.1rem}.info-panel p{color:var(--text-secondary);margin-bottom:1rem;line-height:1.7}.info-panel ul{margin-bottom:1rem;margin-left:1.5rem}.info-panel li{color:var(--text-secondary);margin-bottom:.5rem;line-height:1.8}.keyboard-shortcuts{background:var(--accent-light);border-radius:12px;margin-top:2rem;padding:1.5rem}.keyboard-shortcuts h4{margin-top:0}.keyboard-shortcuts kbd{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:0 2px 4px var(--glass-shadow);border-radius:6px;margin:0 .25rem;padding:.25rem .75rem;font-family:monospace;font-size:.9rem;font-weight:600;display:inline-block}.toast-container{z-index:1000;flex-direction:column;gap:1rem;display:flex;position:fixed;bottom:2rem;right:2rem}.toast{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);box-shadow:0 8px 24px var(--glass-shadow);color:var(--text-primary);cursor:pointer;animation:slideInUp .3s var(--timing-bounce);border-radius:12px;min-width:200px;max-width:400px;padding:1rem 1.5rem;font-weight:500}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toast-success{border-left:4px solid var(--success)}.toast-error{border-left:4px solid var(--error)}.toast-info{border-left:4px solid var(--info)}.toast:hover{box-shadow:0 12px 32px var(--glass-shadow);transform:translateY(-2px)}.footer{text-align:center;color:var(--text-muted);padding:2rem 1rem;font-size:.9rem}.footer-link{color:var(--accent-primary);transition:color .2s var(--timing-ease);font-weight:500;text-decoration:none}.footer-link:hover{color:var(--accent-hover);text-decoration:underline}@media (width<=768px){.title{font-size:1.75rem}.header{padding:1.5rem 1rem .5rem}.uuid-main-card{padding:1.5rem}.uuid-value{padding:1rem;font-size:1.25rem}.controls{flex-direction:column;width:100%}.control-group,.generate-button,.lock-button{justify-content:center;width:100%}.formats-grid{grid-template-columns:1fr}.validation-input-group{flex-direction:column}.validate-button{width:100%}.toast-container{bottom:1rem;left:1rem;right:1rem}.toast{min-width:auto}}@media (width<=480px){.title,.title-icon{font-size:1.5rem}.theme-toggle{width:40px;height:40px;font-size:1.25rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:4px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}::selection{background:var(--accent-primary);color:#fff}