*{box-sizing:border-box;margin:0;padding:0}body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}:root{--primary: #334155;--primary-dark: #1e293b;--primary-light: #475569;--secondary: #3b82f6;--danger: #ef4444;--warning: #f59e0b;--success: #10b981;--info: #06b6d4;--gray-50: #faf8f4;--gray-100: #f5f3ef;--gray-200: #e8e6e2;--gray-300: #d1cfc9;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--bg-primary: #fdfbf7;--bg-secondary: #f9f7f3;--bg-tertiary: #f5f3ef;--text-primary: #0f172a;--text-secondary: #475569;--text-tertiary: #64748b;--border-color: #e8e6e2;--border-color-hover: #d1cfc9;--success-light: #d1fae5;--info-light: #dbeafe;--warning-light: #fef3c7;--danger-light: #fee2e2;--safe-area-inset-top: env(safe-area-inset-top, 0px);--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);--safe-area-inset-left: env(safe-area-inset-left, 0px);--safe-area-inset-right: env(safe-area-inset-right, 0px)}.dark-mode{--primary: #a78bfa;--primary-dark: #8b5cf6;--primary-light: #c4b5fd;--secondary: #60a5fa;--danger: #f87171;--warning: #fbbf24;--success: #34d399;--info: #22d3ee;--gray-50: #0d1117;--gray-100: #161b22;--gray-200: #21262d;--gray-300: #30363d;--gray-400: #484f58;--gray-500: #6e7681;--gray-600: #8b949e;--gray-700: #c9d1d9;--gray-800: #e6edf3;--gray-900: #f0f6fc;--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .5);--shadow: 0 2px 8px 0 rgb(0 0 0 / .4), 0 1px 3px -1px rgb(0 0 0 / .3);--shadow-md: 0 4px 12px -1px rgb(0 0 0 / .4), 0 2px 6px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 20px -3px rgb(0 0 0 / .5), 0 4px 8px -4px rgb(0 0 0 / .4);--shadow-xl: 0 20px 30px -5px rgb(0 0 0 / .6), 0 8px 12px -6px rgb(0 0 0 / .4);--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--text-primary: #e6edf3;--text-secondary: #c9d1d9;--text-tertiary: #8b949e;--border-color: #30363d;--border-color-hover: #484f58;--success-light: #1a3a2e;--info-light: #1a2b3a;--warning-light: #3a3020;--danger-light: #3a1e1e}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.6;transition:background-color .3s ease,color .3s ease}.dark-mode body{background:linear-gradient(180deg,#0d1117,#161b22);background-attachment:fixed}#root{min-height:100vh}.safe-top{padding-top:max(1rem,env(safe-area-inset-top))}.dark-mode{color-scheme:dark}.dark-mode ::selection{background-color:#8b5cf666;color:var(--text-primary)}.dark-mode ::-webkit-scrollbar{width:10px;height:10px}.dark-mode ::-webkit-scrollbar-track{background:var(--bg-secondary)}.dark-mode ::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:5px}.dark-mode ::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}.dark-mode *:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}@media (min-width: 768px){.container{padding:0 2rem}}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border-radius:.75rem;border:none;cursor:pointer;transition:all .15s ease-in-out;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-sm)}.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border:1px solid transparent}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 100%);border-color:var(--primary-light)}.dark-mode .btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);box-shadow:0 0 20px #8b5cf64d}.dark-mode .btn-primary:hover{background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 100%);box-shadow:0 0 30px #8b5cf666}.btn-secondary{background-color:var(--bg-primary);color:var(--text-primary);border:2px solid var(--border-color)}.btn-secondary:hover{background-color:var(--bg-tertiary);border-color:var(--border-color-hover)}.dark-mode .btn-secondary{background-color:var(--bg-secondary);border-color:var(--border-color)}.dark-mode .btn-secondary:hover{background-color:var(--bg-tertiary);border-color:var(--border-color-hover)}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.btn-danger:hover{background:linear-gradient(135deg,#dc2626,#ef4444)}.btn-sm{padding:.5rem 1rem;font-size:.875rem;border-radius:.5rem}.input{width:100%;padding:.875rem 1rem;font-size:1rem;border:2px solid var(--border-color);border-radius:.75rem;background-color:var(--bg-primary);color:var(--text-primary);transition:all .2s}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #8b5cf633}.dark-mode .input{background-color:var(--bg-secondary);border-color:var(--border-color)}.dark-mode .input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #8b5cf633;background-color:var(--bg-tertiary)}.input:hover{border-color:var(--border-color-hover)}.card{background-color:var(--bg-primary);border-radius:1rem;padding:1.5rem;box-shadow:var(--shadow-md);border:1px solid var(--border-color);transition:all .2s ease}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.dark-mode .card{background-color:var(--bg-secondary);border-color:var(--border-color);box-shadow:var(--shadow-md)}.dark-mode .card:hover{background-color:var(--bg-tertiary);box-shadow:var(--shadow-lg);border-color:var(--border-color-hover)}.spinner{border:3px solid var(--gray-200);border-top:3px solid var(--primary);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.dark-mode .spinner{border:3px solid var(--gray-300);border-top:3px solid var(--primary);box-shadow:0 0 20px #8b5cf64d}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}@media (max-width: 640px){h1{font-size:1.25rem!important}h2{font-size:1.125rem!important}.btn-sm{padding:.375rem .75rem;font-size:.8rem}}@media (hover: none) and (pointer: coarse){.btn{min-height:44px;min-width:44px}.input{font-size:16px}}@keyframes slideUp{0%{transform:translate(-50%,100px);opacity:0}to{transform:translate(-50%);opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.bg-primary{background-color:var(--bg-primary)}.bg-secondary{background-color:var(--bg-secondary)}.bg-tertiary{background-color:var(--bg-tertiary)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.border-default{border-color:var(--border-color)}.modal-backdrop{background-color:#00000080}.dark-mode .modal-backdrop{background-color:#000000b3}.hover-bg:hover{background-color:var(--bg-tertiary);transition:background-color .15s ease}.dark-mode .hover-bg:hover{background-color:var(--bg-tertiary)}.info-box{background-color:var(--gray-100);border-radius:.5rem;padding:1rem}.dark-mode .info-box{background-color:var(--bg-tertiary);border:1px solid var(--border-color)}.code-box{background-color:var(--gray-100);border:1px solid var(--border-color);border-radius:.5rem;padding:.75rem 1rem;font-family:Courier New,monospace;font-size:.875rem;word-break:break-all}.dark-mode .code-box{background-color:var(--bg-tertiary);border-color:var(--border-color);color:var(--text-primary)}.divider{height:1px;background-color:var(--border-color);margin:1rem 0}.dark-mode .divider{background-color:var(--border-color);opacity:.5}input[type=checkbox]{accent-color:var(--primary)}*{transition:background-color .2s ease,border-color .2s ease,color .2s ease}.spinner,[style*=animation],.pulse{transition:none!important}