:root{--primary: #2563eb;--primary-dark: #1e40af;--secondary: #10b981;--background: #f9fafb;--surface: #ffffff;--text: #111827;--text-secondary: #6b7280;--border: #e5e7eb;--error: #ef4444;--accent: #dbeafe;--shadow: 0 1px 3px 0 rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-secondary: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--border-radius: 8px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background);color:var(--text);line-height:1.5;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");z-index:9999;transition:opacity .3s}:root[data-noise=true] body:before{opacity:1}#root{min-height:100vh}button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit}button:disabled{opacity:.5;cursor:not-allowed}input,textarea,select{font-family:var(--font-primary);font-size:inherit;border:2px solid var(--border);border-radius:var(--border-radius);padding:8px 12px;background:var(--surface);color:var(--text)}:root[data-button-style=flat] input,:root[data-button-style=flat] textarea,:root[data-button-style=flat] select{border-radius:2px}input:focus,textarea:focus,select:focus{outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}.container{max-width:768px;margin:0 auto;padding:16px}.card{background:var(--surface);border-radius:var(--border-radius);padding:16px;box-shadow:var(--shadow);border:2px solid transparent;transition:transform .2s,box-shadow .2s}:root[data-button-style=flat] .card{border-color:var(--border)}:root[data-button-style=rounded] .card{border-color:var(--border)}.btn{padding:12px 24px;border-radius:var(--border-radius);font-weight:500;font-family:var(--font-primary);transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;position:relative}:root[data-button-style=flat] .btn{border-radius:2px;box-shadow:3px 3px #0000001a}:root[data-button-style=flat] .btn:active:not(:disabled){box-shadow:1px 1px #0000001a;transform:translate(2px,2px)}:root[data-button-style=rounded] .btn{border-radius:16px;box-shadow:0 4px #0000001a}:root[data-button-style=rounded] .btn:active:not(:disabled){box-shadow:0 2px #0000001a;transform:translateY(2px)}:root[data-button-style=retro] .btn{border-radius:0;border:2px solid;border-color:var(--surface) var(--border) var(--border) var(--surface);box-shadow:inset -1px -1px #00000080,inset 1px 1px #ffffff80}:root[data-button-style=retro] .btn:active:not(:disabled){border-color:var(--border) var(--surface) var(--surface) var(--border);box-shadow:inset 1px 1px #00000080,inset -1px -1px #ffffff80}:root[data-button-style=retro] .card{border-radius:0;border:2px solid;border-color:var(--surface) var(--border) var(--border) var(--surface)}:root[data-button-style=medieval] .btn{border-radius:4px;border:3px solid var(--accent);background:linear-gradient(180deg,var(--primary) 0%,var(--primary-dark) 100%);box-shadow:0 2px 8px #0009,inset 0 1px #ffd7004d;text-shadow:1px 1px 2px rgba(0,0,0,.8)}:root[data-button-style=medieval] .btn:hover:not(:disabled){box-shadow:0 4px 12px #000000b3,inset 0 2px #ffd70066;transform:translateY(-2px)}:root[data-button-style=medieval] .btn:active:not(:disabled){box-shadow:0 1px 4px #000c,inset 0 1px #00000080;transform:translateY(1px)}:root[data-button-style=medieval] .card{border:2px solid var(--accent);background:linear-gradient(135deg,var(--surface) 0%,rgba(0,0,0,.2) 100%);box-shadow:0 2px 8px #0009,inset 0 1px #ffd70033}.btn-primary{background-color:var(--primary);color:#fff;border-color:var(--primary-dark)}.btn-primary:hover:not(:disabled){background-color:var(--primary-dark);transform:translateY(-1px)}:root[data-button-style=flat] .btn-primary:hover:not(:disabled){transform:none}.btn-secondary{background-color:var(--surface);color:var(--text);border-color:var(--border)}.btn-secondary:hover:not(:disabled){background-color:var(--accent)}.progress-bar{width:100%;height:8px;background-color:var(--border);border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;background-color:var(--primary);transition:width .3s ease}@media (max-width: 640px){.container{padding:12px}}