:root{--text-color: #ffffff;--glass-border: rgba(255, 255, 255, .1);--primary-purple: #4a0e4e}body{margin:0;font-family:Inter,sans-serif;background:#000;color:var(--text-color);height:100vh;overflow:hidden}#app{position:relative;height:100vh}.glass-nav{position:fixed;top:0;left:0;width:100%;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;z-index:100;box-sizing:border-box}.logo{font-weight:700;font-size:1.2rem;letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,.5)}.nav-links a{color:#fff;text-decoration:none;margin-left:20px}.btn-primary{background:#ffffff26;padding:.6rem 1.8rem;border-radius:30px;border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:all .3s ease;font-weight:500;text-decoration:none}.btn-primary:hover,.btn-primary.active{background:#fff;color:#000}.btn-secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);padding:.5rem 2rem;border-radius:20px;cursor:pointer;transition:all .3s}.btn-secondary:hover{background:#fff;color:#000}.btn-danger{background:#dc3545cc;color:#fff;border:none;padding:1rem;border-radius:10px;cursor:pointer;font-weight:700;margin-top:1rem}.btn-danger:hover{background:#dc3545}.main-screen{position:relative;height:100vh;width:100%;display:flex;justify-content:center;align-items:center}.bg-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.bg-img{width:100%;height:100%;object-fit:cover;filter:brightness(.5)}.bg-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#2e003e33,#0009)}.content-wrapper{position:relative;z-index:10;text-align:center;margin-top:40px}.section-title{font-size:2rem;margin-bottom:2rem;text-transform:uppercase;letter-spacing:2px}.barbers-grid{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}.barber-card{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;border-radius:20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:transform .3s ease}.barber-card:hover{transform:translateY(-10px);background:#ffffff1a}.barber-img-wrapper{width:150px;height:150px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.3)}.barber-img-wrapper img{width:100%;height:100%;object-fit:cover}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:1000;opacity:1;transition:opacity .3s}.modal.hidden{opacity:0;pointer-events:none}.modal-content{background:#1a1a1a;padding:2rem;border-radius:20px;width:90%;max-width:450px;position:relative;border:1px solid var(--glass-border);text-align:center;max-height:90vh;overflow-y:auto}.close-modal{position:absolute;top:1rem;right:1.5rem;font-size:2rem;cursor:pointer;color:#fff;z-index:10}.tabs{display:flex;gap:10px;margin-bottom:20px}.tab-btn{flex:1;text-align:center}form{display:flex;flex-direction:column;gap:1rem}input,select{padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:#ffffff0d;color:#fff;font-family:inherit;width:100%;box-sizing:border-box}input:focus,select:focus{outline:none;border-color:#fff;background:#ffffff1a}select option{background:#1a1a1a}.date-time-group{display:flex;gap:10px}.hint-text{font-size:.8rem;color:#bbb;margin-top:-10px;text-align:left}.pin-wrapper{background:#ffffff0d;padding:10px;border-radius:10px;margin-top:5px}.pin-wrapper label{font-size:.8rem;display:block;margin-bottom:5px;color:#ddd}.pin-input{letter-spacing:5px;text-align:center;font-weight:700;font-size:1.2rem}.full-width{width:100%;margin-top:10px}.hidden{display:none!important}#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.fixed-footer{position:fixed;bottom:0;left:0;width:100%;height:30px;background:#000;z-index:99}@media (max-width: 768px){body{overflow-y:auto;height:auto;min-height:100vh}#app,.main-screen{height:auto;min-height:100vh;overflow:visible}.glass-nav{padding:1rem}.logo{font-size:1rem}.btn-primary{padding:.5rem 1rem;font-size:.9rem}.content-wrapper{margin-top:80px;padding-bottom:60px}.date-time-group{flex-direction:column;gap:10px}.modal-content{width:95%;padding:1.5rem;margin-top:20px;margin-bottom:20px}.barber-img-wrapper{width:120px;height:120px}.section-title{font-size:1.5rem}}