body{font-family:Roboto,sans-serif;margin:0;padding:0;background:linear-gradient(to bottom,#1e1e2f,#121212);color:#e0e0e0;display:flex;flex-direction:column;min-height:100vh}.app-header{background-color:#282a36;color:#f8f8f2;text-align:center;padding:30px 20px;box-shadow:0 4px 8px #00000080}.app-header h1{margin:0;font-size:2.5rem}.app-header p{margin:5px 0 0;font-size:1rem;opacity:.8}.accordion-button{background:#ffffff1a;color:#50fa7b;border:1px solid rgba(255,255,255,.2);padding:10px 15px;font-size:1rem;cursor:pointer;border-radius:5px;transition:background .3s ease,transform .2s ease;margin:16px}.accordion-button:hover{background:#fff3;transform:scale(1.05)}.app-instructions{max-height:0;overflow:hidden;transition:max-height .5s ease,opacity .5s ease;opacity:0;background:#ffffff08;border:1px solid rgba(255,255,255,.1);padding:0 20px;margin:20px auto;border-radius:8px;color:#b0b0b0;font-size:.9rem;box-shadow:0 2px 4px #0000004d;max-width:800px}.app-instructions.open{max-height:300px;padding:15px 20px;opacity:1;overflow-y:auto}.app-instructions table{width:100%;border-collapse:collapse;margin:10px 0}.app-instructions th,.app-instructions td{text-align:left;padding:8px;border:1px solid rgba(255,255,255,.1)}.app-instructions th{color:#50fa7b;font-size:.95rem}.app-instructions td{font-size:.85rem;color:#e0e0e0}.app-instructions code{background:#000c;padding:2px 5px;border-radius:3px;color:#50fa7b;font-family:Courier New,Courier,monospace;font-size:.85rem}.app{display:flex;flex-direction:column;justify-content:space-between;min-height:100vh}.component-showcase{padding:40px 20px}.component-group{margin-bottom:40px}.component-group h2{font-size:1.8rem;margin-bottom:20px;color:#f8f8f2}.component-card{display:flex;gap:15px;flex-wrap:wrap;background:#23232e;padding:20px;border-radius:10px;box-shadow:0 4px 8px #00000080;justify-content:center;align-items:center}.app-footer{background-color:#121212;color:#e0e0e0;text-align:center;padding:20px;margin-top:auto;font-size:.9rem}.technologies-used{background:#ffffff1a;color:#e0e0e0;padding:10px;border-radius:8px;font-size:.85rem;max-width:600px;margin:10px auto 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease;font-weight:500;text-transform:uppercase}.button.small{font-size:.8rem;padding:8px 16px}.button.medium{font-size:1rem;padding:10px 20px}.button.large{font-size:1.2rem;padding:12px 24px}.button.primary{background-color:#50fa7b;color:#282a36;box-shadow:0 4px 8px #50fa7b4d}.button.primary:hover{background-color:#3be362;transform:scale(1.05)}.button.secondary{background-color:#8be9fd;color:#282a36;box-shadow:0 4px 8px #8be9fd4d}.button.secondary:hover{background-color:#67d8f3;transform:scale(1.05)}.button.danger{background-color:#f55;color:#f8f8f2;box-shadow:0 4px 8px #ff55554d}.button.danger:hover{background-color:#ff2e2e;transform:scale(1.05)}.button.gradient{background:linear-gradient(45deg,#ff6ec4,#7873f5);color:#fff;box-shadow:0 4px 8px #7873f54d}.button.gradient:hover{transform:scale(1.05);background:linear-gradient(45deg,#7873f5,#ff6ec4)}.button.outline{background:transparent;color:#e0e0e0;border:2px solid #e0e0e0;box-shadow:none}.button.outline:hover{background-color:#333}.button.disabled{background-color:#444;color:#888;cursor:not-allowed;box-shadow:none}.button.disabled:hover{transform:none}.button.full-width{width:100%;max-width:800px}.button-icon{display:inline-flex;align-items:center;justify-content:center}.download-button{background:#4caf50;color:#f8f8f2;padding:10px 20px;margin-top:10px;border:none;border-radius:5px;cursor:pointer;font-size:1rem;transition:background .3s ease}.download-button:hover{background:#45a049}