@tailwind base;@tailwind components;@tailwind utilities;@layer base{:root{--background: 0 0% 100%;--foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--primary: 262.1 83.3% 57.8%;--primary-foreground: 210 40% 98%;--secondary: 210 40% 96.1%;--secondary-foreground: 222.2 47.4% 11.2%;--muted: 210 40% 96.1%;--muted-foreground: 215.4 16.3% 46.9%;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 210 40% 98%;--border: 214.3 31.8% 91.4%;--input: 214.3 31.8% 91.4%;--ring: 262.1 83.3% 57.8%;--radius: .5rem}.dark{--background: 222.2 84% 4.9%;--foreground: 210 40% 98%;--card: 222.2 84% 4.9%;--card-foreground: 210 40% 98%;--popover: 222.2 84% 4.9%;--popover-foreground: 210 40% 98%;--primary: 210 40% 98%;--primary-foreground: 222.2 47.4% 11.2%;--secondary: 217.2 32.6% 17.5%;--secondary-foreground: 210 40% 98%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 215 20.2% 65.1%;--accent: 217.2 32.6% 17.5%;--accent-foreground: 210 40% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 210 40% 98%;--border: 217.2 32.6% 17.5%;--input: 217.2 32.6% 17.5%;--ring: 262.1 83.3% 57.8%}}@layer base{*{@apply border-border;}body{@apply bg-background text-foreground;}}@layer components{.app-title{@apply text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent;}.section-title{@apply text-lg font-semibold text-gray-900 mb-3;}.section-subtitle{@apply text-sm text-gray-600 mb-6;}.modern-card{@apply bg-white/80 backdrop-blur-sm border border-white/20 shadow-xl rounded-2xl p-6 transition-all duration-200 hover:shadow-2xl;}.glass-card{@apply bg-white/70 backdrop-blur-md border border-white/20 shadow-2xl rounded-2xl p-6 transition-all duration-200;}.elevated-card{@apply bg-white shadow-2xl border-0 rounded-2xl p-6 transition-all duration-200;}.btn-primary{@apply bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium px-6 py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2;}.btn-secondary{@apply bg-white border-2 border-gray-300 text-gray-700 font-medium px-6 py-3 rounded-xl hover:bg-gray-50 transition-all duration-200 flex items-center justify-center gap-2;}.btn-outline{@apply border-2 border-purple-300 text-purple-700 font-medium px-6 py-3 rounded-xl hover:bg-purple-50 transition-all duration-200 flex items-center justify-center gap-2;}.btn-ghost{@apply text-gray-700 font-medium px-6 py-3 rounded-xl hover:bg-gray-100 transition-all duration-200 flex items-center justify-center gap-2;}.input-enhanced{@apply w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 text-sm;}.input-filled{@apply w-full px-4 py-3 border-0 bg-gray-100 rounded-xl focus:bg-white focus:ring-2 focus:ring-purple-500 transition-all duration-200 text-sm;}.input-error{@apply border-red-300 focus:border-red-500 focus:ring-red-500;}.input-success{@apply border-green-300 focus:border-green-500 focus:ring-green-500;}.container-modern{@apply max-w-6xl mx-auto px-4 py-8;}.grid-responsive{@apply grid grid-cols-1 md:grid-cols-2 gap-6;}.grid-mobile-stack{@apply flex flex-col lg:grid lg:grid-cols-2 lg:gap-8;}.status-success{@apply bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl text-sm;}.status-error{@apply bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm;}.status-warning{@apply bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-xl text-sm;}.status-info{@apply bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded-xl text-sm;}.loading-spinner{@apply animate-spin w-5 h-5 border-2 border-gray-300 border-t-purple-600 rounded-full;}.loading-pulse{@apply animate-pulse bg-gray-200 rounded;}.header-modern{@apply sticky top-0 z-40 bg-white/90 backdrop-blur-lg border-b border-white/20;}.header-content{@apply max-w-6xl mx-auto px-4 py-4 flex items-center justify-between;}.logo-container{@apply flex items-center gap-3;}.logo-icon{@apply h-10 w-10 rounded-xl bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white;}.bg-pattern-dots{background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e2e8f0' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.bg-modern{@apply min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 relative;}.mobile-actions{@apply lg:hidden fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur border-t border-gray-200 p-4 z-50;}.mobile-button-group{@apply flex gap-3;}.hover-lift{@apply transition-transform duration-200 hover:-translate-y-1;}.hover-glow{@apply transition-shadow duration-200 hover:shadow-2xl;}.focus-ring{@apply focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;}}@layer utilities{.animate-fade-in{animation:fadeIn .5s ease-in-out}.animate-slide-up{animation:slideUp .3s ease-out}.animate-scale-in{animation:scaleIn .2s ease-out}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.fixed-bottom-actions{@apply mobile-actions;}.fixed-bottom-actions .grid{@apply mobile-button-group;}.fixed-bottom-actions button{@apply flex-1;}.slider-thumb::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:#8b5cf6;border-radius:50%;border:2px solid white;box-shadow:0 2px 4px #0000001a;cursor:pointer}.slider-thumb::-webkit-slider-thumb:hover{background:#a855f7;box-shadow:0 4px 8px #8b5cf64d}.slider-thumb::-moz-range-thumb{width:20px;height:20px;background:#8b5cf6;border-radius:50%;border:2px solid white;box-shadow:0 2px 4px #0000001a;cursor:pointer}.slider-thumb::-moz-range-thumb:hover{background:#a855f7;box-shadow:0 4px 8px #8b5cf64d}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;cursor:pointer}input[type=color]::-webkit-color-swatch{border:none;border-radius:.75rem;padding:0}input[type=color]::-webkit-color-swatch-wrapper{border:none;border-radius:.75rem;padding:0}input[type=color]::-moz-color-swatch{border:none;border-radius:.75rem}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #8B5CF6;outline-offset:2px}.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.gradient-text{background:linear-gradient(135deg,#8b5cf6,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@media (max-width: 768px){.touch-friendly{min-height:44px;min-width:44px}}.viewport-container{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.preview-wrapper{transform-origin:center center;will-change:transform;display:inline-block}.preview-wrapper img{max-width:none;height:auto}.glass{background:#ffffff40;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)}*{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b880}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}