body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at center, #115e33 0%, #063019 100%); font-family: system-ui, -apple-system, sans-serif; perspective: 1200px; overflow-x: hidden; }
.tm-3d-scene { width: 100%; max-width: 450px; transform-style: preserve-3d; animation: sceneEntry 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.tm-3d-logo { width: 110px; height: auto; display: block; margin: 0 auto 20px; transform-style: preserve-3d; filter: drop-shadow(0 15px 20px rgba(0,0,0,0.4)); }
.tm-3d-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 32px; padding: 40px; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); transform-style: preserve-3d; box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2); position: relative; }
.tm-3d-card::before { content: ""; position: absolute; inset: 0; border-radius: 32px; padding: 2px; background: linear-gradient(135deg, #d9a62e, transparent, #1f8f45); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.tm-3d-title { color: #ffffff; font-size: 28px; font-weight: 800; margin: 0 0 8px; text-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; transform: translateZ(40px); }
.tm-3d-subtitle { color: #b2c7bc; font-size: 14px; margin: 0 0 30px; text-align: center; transform: translateZ(30px); }
.tm-field-group { margin-bottom: 22px; transform: translateZ(25px); }
.tm-field-group label { display: block; margin-bottom: 9px; color: #e2ede7; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.tm-field-group input, .tm-field-group select { width: 100%; padding: 15px 18px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: #ffffff; font-size: 15px; outline: none; box-sizing: border-box; transition: all 0.3s ease; shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
.tm-field-group input:focus { border-color: #d9a62e; background: rgba(0, 0, 0, 0.4); box-shadow: 0 0 0 4px rgba(217, 166, 46, 0.15); }
.tm-3d-btn { width: 100%; padding: 16px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 700; color: #042311; cursor: pointer; transform: translateZ(45px); box-shadow: 0 10px 25px rgba(0,0,0,0.3); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.tm-errors { background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5; padding: 14px; border-radius: 14px; margin-bottom: 22px; font-size: 14px; transform: translateZ(20px); }
@keyframes sceneEntry { from { opacity: 0; transform: translateY(60px) rotateX(-20deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }

/* Admin unique 3D Profile */
.admin-body .tm-3d-card { animation: adminFloat 6s ease-in-out infinite alternate; }
.admin-body .tm-3d-logo { animation: logoSpin 12s linear infinite; }
.admin-body .tm-3d-btn { background: linear-gradient(135deg, #e5b842 0%, #b8860b 100%); color: #ffffff; }
@keyframes adminFloat { from { transform: rotateY(-6deg) rotateX(4deg) translateZ(0); } to { transform: rotateY(6deg) rotateX(-4deg) translateZ(10px); } }
@keyframes logoSpin { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }

/* Hotel unique 3D Profile */
.hotel-body .tm-3d-card { animation: hotelTilt 5s ease-in-out infinite alternate; }
.hotel-body .tm-3d-btn { background: linear-gradient(135deg, #1f8f45 0%, #115e33 100%); color: #ffffff; }
@keyframes hotelTilt { from { transform: rotateX(-5deg) translateZ(0); } to { transform: rotateX(7deg) translateZ(15px); } }

/* Fleet unique 3D Profile */
.fleet-body .tm-3d-card { animation: fleetThrust 4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.fleet-body .tm-3d-btn { background: #ffffff; color: #063019; }
@keyframes fleetThrust { from { transform: translateZ(-10px) rotateY(-4deg); } to { transform: translateZ(25px) rotateY(4deg); } }

/* Gate unique 3D Profile */
.gate-body .tm-3d-card { animation: gateRoll 7s ease-in-out infinite alternate; }
.gate-body .tm-3d-btn { background: linear-gradient(135deg, #34d399 0%, #059669 100%); color: #ffffff; }
@keyframes gateRoll { from { transform: rotateZ(-3deg) rotateX(-3deg); } to { transform: rotateZ(3deg) rotateX(3deg); } }