#app{min-height:100vh;background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%)}*{margin:0;padding:0;box-sizing:border-box}:root{--color-black: #000000;--color-dark: #0a0a0a;--color-gray-900: #1a1a1a;--color-gray-800: #2a2a2a;--color-gray-700: #3a3a3a;--color-gray-600: #4a4a4a;--color-gray-500: #6a6a6a;--color-gray-400: #9a9a9a;--color-gray-300: #cacaca;--color-gray-200: #e0e0e0;--color-gray-100: #f5f5f5;--color-white: #ffffff;--color-primary: #ff3366;--color-secondary: #00d4ff;--color-accent: #ffd700;--color-success: #00ff88;--color-warning: #ffaa00;--color-error: #ff4444;--color-info: #3399ff;--gradient-primary: linear-gradient(135deg, #ff3366 0%, #ff0066 100%);--gradient-secondary: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);--gradient-accent: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);--gradient-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(255, 51, 102, .3);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--gradient-bg);color:var(--color-white);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-gray-900)}::-webkit-scrollbar-thumb{background:var(--color-gray-600);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-size:14px;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .3s ease;text-decoration:none}.btn-primary{background:var(--gradient-primary);color:var(--color-white);box-shadow:var(--shadow-md)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--color-gray-800);color:var(--color-white);border:1px solid var(--color-gray-600)}.btn-secondary:hover{background:var(--color-gray-700);border-color:var(--color-primary)}.btn-ghost{background:transparent;color:var(--color-white);border:1px solid var(--color-gray-600)}.btn-ghost:hover{background:var(--color-gray-800);border-color:var(--color-primary)}.input{width:100%;padding:12px 16px;background:var(--color-gray-900);border:1px solid var(--color-gray-700);border-radius:var(--radius-md);color:var(--color-white);font-size:14px;transition:all .3s ease}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #ff33661a}.input::placeholder{color:var(--color-gray-500)}.card{background:var(--color-gray-900);border:1px solid var(--color-gray-800);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md);transition:all .3s ease}.card:hover{border-color:var(--color-gray-700);box-shadow:var(--shadow-lg)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease-out}.container{max-width:1200px;margin:0 auto;padding:0 20px}.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (max-width: 1024px){.container{padding:0 16px}.card{padding:20px}.btn{padding:10px 20px;font-size:13px}}@media (max-width: 768px){.container{padding:0 12px}.card{padding:16px;border-radius:var(--radius-md)}.btn{padding:12px 20px;font-size:14px;min-height:44px;touch-action:manipulation}.input{padding:14px 16px;font-size:16px;min-height:44px}table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.form-group{margin-bottom:16px}.grid{grid-template-columns:1fr!important;gap:16px!important}.flex{flex-direction:column}.flex-row{flex-direction:column;gap:12px}}@media (max-width: 480px){.container{padding:0 10px}.card{padding:12px}.btn{padding:12px 16px;width:100%;margin-bottom:8px}.btn:last-child{margin-bottom:0}h1{font-size:24px}h2{font-size:20px}h3{font-size:18px}}@media (max-width: 768px) and (orientation: landscape){.header{padding:12px 0}.main{padding:20px 0}}@media (hover: none) and (pointer: coarse){.btn:hover,.card:hover{transform:none}.btn{min-height:44px;min-width:44px}a{min-height:44px;display:inline-flex;align-items:center}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.card{border-width:.5px}}