:root {
--bg: #f8fafc;
--panel: rgba(255, 255, 255, 0.9);
--border: #e2e8f0;
--text: #1e293b;
--text-muted: #64748b;
--accent: #3b82f6;
--accent-hover: #2563eb;
--success: #10b981;
--danger: #ef4444;
--shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
}

[data-theme="dark"] {
--bg: #0f1115;
--panel: rgba(26, 31, 38, 0.9);
--border: #2d3748;
--text: #e2e8f0;
--text-muted: #94a3b8;
}

body {
background: var(--bg);
color: var(--text);
}

.floating-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}

.floating-icon {
position: absolute;
font-size: 20px;
animation: float 15s linear infinite;
opacity: 0.3;
}

@keyframes float {
0% {
  transform: translateY(100vh) rotate(0deg);
  opacity: 0;
}
10% {
  opacity: 0.3;
}
90% {
  opacity: 0.3;
}
100% {
  transform: translateY(-100px) rotate(360deg);
  opacity: 0;
}
}

.header-controls {
display: flex;
gap: 12px;
align-items: center;
}

.btn {
background: var(--accent);
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
font-size: 14px;
transition: all 0.2s ease;
}

.btn:hover {
background: var(--accent-hover);
transform: translateY(-1px);
}

.btn.secondary {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
}

.btn.secondary:hover {
background: var(--border);
}

.btn.success { background: var(--success); }
.btn.danger { background: var(--danger); }

.input-section {
display: flex;
gap: 20px;
margin-bottom: 24px;
align-items: flex-start;
}

.input-wrap { flex: 1; }

#userText {
width: 100%;
font-size: 18px;
padding: 16px;
border-radius: 12px;
background: var(--panel);
color: var(--text);
border: 2px solid var(--border);
outline: none;
transition: all 0.2s ease;
}

#userText:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.info-panel {
width: 280px;
background: rgba(59, 130, 246, 0.05);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
}

.info-panel h4 {
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 600;
}

.info-panel p {
margin: 0;
font-size: 13px;
color: var(--text-muted);
line-height: 1.4;
}

.active-badge {
background: var(--accent);
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
margin-top: 8px;
display: inline-block;
}

.tabs {
display: flex;
gap: 4px;
margin-bottom: 20px;
background: rgba(59, 130, 246, 0.05);
padding: 4px;
border-radius: 12px;
border: 1px solid var(--border);
}

.tab {
padding: 12px 16px;
border-radius: 8px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
border: none;
font-weight: 500;
font-size: 14px;
transition: all 0.2s ease;
flex: 1;
text-align: center;
}

.tab.active {
background: var(--panel);
color: var(--accent);
box-shadow: var(--shadow);
}

.tab-panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
min-height: 400px;
}

.panel-section {
display: none;
}

.panel-section.active {
display: block;
}

.grid {
display: grid;
gap: 12px;
}

.colors-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.gradients-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.animations-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.backgrounds-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.accents-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.swatch {
height: 60px;
border-radius: 12px;
border: 2px solid transparent;
display: flex;
align-items: flex-end;
padding: 8px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--shadow);
}

.swatch:hover {
transform: translateY(-2px);
}

.swatch.selected {
border-color: var(--accent);
transform: translateY(-2px) scale(1.02);
}

.swatch .label {
color: white;
font-weight: 600;
font-size: 12px;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.grad-btn {
height: 60px;
border-radius: 12px;
border: 2px solid transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--shadow);
color: white;
font-weight: 600;
font-size: 13px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.grad-btn:hover {
transform: translateY(-2px);
}

.grad-btn.selected {
border-color: var(--accent);
transform: translateY(-2px) scale(1.02);
}

.anim-btn {
height: 60px;
border-radius: 12px;
background: var(--panel);
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 500;
color: var(--text);
transition: all 0.2s ease;
padding: 8px;
text-align: center;
}

.anim-btn:hover {
border-color: var(--accent);
transform: translateY(-2px);
}

.anim-btn.selected {
background: var(--accent);
color: white;
border-color: var(--accent);
}

.bg-btn {
height: 120px;
border-radius: 12px;
border: 2px solid var(--border);
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.2s ease;
}

.bg-btn:hover {
border-color: var(--accent);
transform: translateY(-2px);
}

.bg-btn.selected {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.bg-btn .bg-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
color: white;
padding: 8px;
font-size: 12px;
font-weight: 500;
}

.accent-btn {
height: 50px;
border-radius: 12px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 12px;
color: white;
}

.accent-btn:hover {
transform: translateY(-2px);
}

.accent-btn.selected {
border-color: white;
box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}

.upload-section {
background: rgba(59, 130, 246, 0.05);
border: 2px dashed var(--border);
border-radius: 12px;
padding: 24px;
text-align: center;
margin-bottom: 24px;
}

.upload-area {
border: 2px dashed var(--border);
border-radius: 8px;
padding: 20px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 12px;
}

.upload-area:hover {
border-color: var(--accent);
background: rgba(59, 130, 246, 0.05);
}

.preview {
margin-top: 24px;
padding: 40px;
border-radius: 12px;
background: transparent;
border: 1px solid var(--border);
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.generated-text {
font-size: 1.75rem;
font-weight: 800;
line-height: 1.1;
text-align: center;
color: var(--text);
transition: all 0.3s ease;
position: relative;
z-index: 2;
}

.action-buttons {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
}

/* Colors */
.color-red { color: #ef4444; }
.color-blue { color: #3b82f6; }
.color-green { color: #10b981; }
.color-yellow { color: #f59e0b; }
.color-orange { color: #f97316; }
.color-purple { color: #8b5cf6; }
.color-pink { color: #ec4899; }
.color-cyan { color: #06b6d4; }
.color-teal { color: #14b8a6; }
.color-lime { color: #84cc16; }
.color-indigo { color: #6366f1; }
.color-brown { color: #a3663c; }
.color-gray { color: #6b7280; }
.color-black { color: #1f2937; }
.color-white { color: #f9fafb; }
.color-magenta { color: #d946ef; }
.color-violet { color: #7c3aed; }
.color-gold { color: #fbbf24; }
.color-silver { color: #9ca3af; }
.color-maroon { color: #991b1b; }

/* Gradients */
.gradient-1 { background: linear-gradient(45deg, #ef4444, #3b82f6); }
.gradient-2 { background: linear-gradient(45deg, #10b981, #f59e0b); }
.gradient-3 { background: linear-gradient(90deg, #f97316, #8b5cf6); }
.gradient-4 { background: linear-gradient(120deg, #06b6d4, #3b82f6); }
.gradient-5 { background: linear-gradient(30deg, #84cc16, #6366f1); }
.gradient-6 { background: linear-gradient(60deg, #d946ef, #7c3aed); }
.gradient-7 { background: linear-gradient(45deg, #fbbf24, #9ca3af); }
.gradient-8 { background: linear-gradient(90deg, #991b1b, #ef4444); }
.gradient-9 { background: linear-gradient(45deg, #ec4899, #06b6d4); }
.gradient-10 { background: linear-gradient(75deg, #3b82f6, #f59e0b); }

.use-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 200%;
animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}

/* Text Effects */
.anim-glow {
text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
animation: glowPulse 2s ease-in-out infinite alternate;
}

@keyframes glowPulse {
from { filter: brightness(1); }
to { filter: brightness(1.3); }
}

.anim-sparkle {
position: relative;
}

.anim-sparkle::before {
content: '✨';
position: absolute;
left: -30px;
top: -20px;
animation: sparkle1 2s infinite;
font-size: 0.4em;
}

.anim-sparkle::after {
content: '✨';
position: absolute;
right: -30px;
top: -15px;
animation: sparkle2 2.5s infinite;
font-size: 0.3em;
}

@keyframes sparkle1 {
0%, 100% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
}

@keyframes sparkle2 {
0%, 100% { opacity: 0; transform: scale(0); }
60% { opacity: 1; transform: scale(1); }
}

.anim-hearts {
position: relative;
}

.anim-hearts::before {
content: '💖';
position: absolute;
left: -25px;
top: -10px;
animation: hearts1 3s infinite;
font-size: 0.4em;
}

.anim-hearts::after {
content: '💕';
position: absolute;
right: -25px;
top: -5px;
animation: hearts2 3.5s infinite;
font-size: 0.3em;
}

@keyframes hearts1 {
0%, 100% { opacity: 0; transform: translateY(10px) scale(0); }
50% { opacity: 1; transform: translateY(-10px) scale(1); }
}

@keyframes hearts2 {
0%, 100% { opacity: 0; transform: translateY(10px) scale(0); }
60% { opacity: 1; transform: translateY(-10px) scale(1); }
}

.anim-lightning {
position: relative;
text-shadow: 0 0 5px #fbbf24;
animation: lightningFlash 1.5s infinite;
}

.anim-lightning::before {
content: '⚡';
position: absolute;
left: -35px;
top: -15px;
color: #fbbf24;
animation: lightning1 2s infinite;
font-size: 0.5em;
}

@keyframes lightningFlash {
0%, 90%, 100% { filter: brightness(1); }
95% { filter: brightness(1.5); }
}

@keyframes lightning1 {
0%, 100% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
}

.anim-neon {
color: #06b6d4;
text-shadow: 
  0 0 5px #06b6d4,
  0 0 10px #06b6d4,
  0 0 15px #06b6d4;
animation: neonFlicker 2s infinite alternate;
}

@keyframes neonFlicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}

.anim-fire {
color: #f97316;
text-shadow: 0 0 10px #f97316, 0 0 20px #ef4444;
animation: fireFlicker 0.5s infinite alternate;
}

@keyframes fireFlicker {
0% { filter: brightness(1) hue-rotate(0deg); }
100% { filter: brightness(1.3) hue-rotate(10deg); }
}

.anim-rainbow {
background: linear-gradient(45deg, #ef4444, #f97316, #f59e0b, #84cc16, #06b6d4, #3b82f6, #8b5cf6, #ec4899);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 400%;
animation: rainbowShift 3s ease-in-out infinite;
}

@keyframes rainbowShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}

.anim-crystal {
color: #06b6d4;
text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
animation: crystalline 2s ease-in-out infinite;
}

@keyframes crystalline {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2); }
}

.anim-magic {
text-shadow: 0 0 8px #8b5cf6;
animation: magicShimmer 2s ease-in-out infinite;
}

@keyframes magicShimmer {
0%, 100% { filter: hue-rotate(0deg) brightness(1); }
50% { filter: hue-rotate(30deg) brightness(1.2); }
}

.anim-gradient-text {
background: linear-gradient(45deg, #ef4444, #3b82f6, #10b981, #f59e0b);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 300% 300%;
animation: gradientMove 4s ease-in-out infinite;
}

@keyframes gradientMove {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}

/* Background Effects for BODY */
body.bg-matrix {
background: radial-gradient(ellipse at center, #1a2332 0%, #0f1419 100%);
}

body.bg-hearts {
background: radial-gradient(ellipse at center, #fce7f3 0%, #fdf2f8 100%);
}

body.bg-stars {
background: radial-gradient(ellipse at center, #312e81 0%, #1e1b4b 100%);
}

body.bg-ocean {
background: radial-gradient(ellipse at center, #0369a1 0%, #0c4a6e 100%);
}

body.bg-forest {
background: radial-gradient(ellipse at center, #166534 0%, #14532d 100%);
}

body.bg-sunset {
background: radial-gradient(ellipse at center, #facc15 0%, #ea580c 50%, #dc2626 100%);
}

body.bg-galaxy {
background: radial-gradient(ellipse at center, #a855f7 0%, #7c3aed 50%, #581c87 100%);
}

body.bg-neon {
background: radial-gradient(ellipse at center, #ec4899 0%, #6366f1 50%, #1f2937 100%);
}

body.bg-roblox {
background: radial-gradient(ellipse at center, #0078D4 0%, #00A2FF 100%);
}

body.bg-gaming {
background: radial-gradient(ellipse at center, #16213e 0%, #1a1a2e 100%);
}

body.bg-rainbow {
background: conic-gradient(from 0deg, #ef4444, #f97316, #f59e0b, #84cc16, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444);
}

/* Accent colors */
.accent-blue { background: #3b82f6; }
.accent-purple { background: #8b5cf6; }
.accent-pink { background: #ec4899; }
.accent-green { background: #10b981; }
.accent-orange { background: #f97316; }
.accent-red { background: #ef4444; }
.accent-cyan { background: #06b6d4; }
.accent-yellow { background: #f59e0b; }

/* Responsive */
@media (max-width: 768px) {
.input-section { flex-direction: column; }
.info-panel { width: 100%; }
.generated-text { font-size: 32px; }
.tabs { flex-wrap: wrap; }
.tab { flex: none; min-width: 120px; }
}