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); } }

/* Premium Fleet Authenticator */
.fleet-body .tm-authenticator-field {
    position: relative;
}

.fleet-body .tm-authenticator-field label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fleet-body .tm-authenticator-field label::before {
    content: "🔐";
    font-size: 15px;
}

.fleet-body .tm-authenticator-help {
    color: #9fc5ad;
    font-size: 12px;
    margin: -2px 0 10px;
    line-height: 1.5;
}

.fleet-body #id_authenticator_code {
    text-align: center;
    letter-spacing: 8px;
    font-size: 22px;
    font-weight: 700;
    font-family: "SFMono-Regular", Consolas, monospace;
    padding: 16px 18px;
}

.fleet-body #id_authenticator_code::placeholder {
    letter-spacing: 8px;
    opacity: 0.35;
}

.fleet-body #id_authenticator_code:focus {
    border-color: #d9a62e;
    box-shadow:
        0 0 0 4px rgba(217, 166, 46, 0.12),
        0 0 25px rgba(217, 166, 46, 0.12);
}

.fleet-body .tm-3d-btn {
    margin-top: 6px;
    letter-spacing: 0.3px;
}


/* =========================================================
   TRAVELMEAL PREMIUM FLEET AUTHENTICATOR
   ========================================================= */

.tm-auth-setup-card {
    text-align: left;
}

.tm-security-badge {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(217, 166, 46, 0.14);
    border: 1px solid rgba(217, 166, 46, 0.35);
    font-size: 27px;
    box-shadow:
        0 12px 30px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.12);
}

.tm-auth-setup-status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    margin: 0 0 24px;
    border-radius: 14px;
    background: rgba(31,143,69,0.12);
    border: 1px solid rgba(31,143,69,0.25);
    color: #c7ead5;
    font-size: 13px;
    font-weight: 700;
}

.tm-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #54d98a;
    box-shadow: 0 0 12px rgba(84,217,138,0.75);
}

.tm-auth-vehicle-card {
    margin-bottom: 22px;
    padding: 17px;
    border-radius: 17px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.09);
    text-align: center;
}

.tm-auth-vehicle-card span {
    display: block;
    color: #9fc5ad;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    margin-bottom: 5px;
}

.tm-auth-vehicle-card strong {
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 1px;
}

.tm-auth-instructions {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.tm-auth-step {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.tm-auth-step-number {
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #d9a62e,
        #9c7418
    );
    color: #102512;
    font-size: 13px;
    font-weight: 900;
}

.tm-auth-step strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 4px;
}

.tm-auth-step p {
    margin: 0;
    color: #a9c0b2;
    font-size: 12px;
    line-height: 1.55;
}

.tm-auth-manual-key {
    padding: 18px;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(217,166,46,0.13),
            rgba(0,0,0,0.24)
        );
    border: 1px solid rgba(217,166,46,0.30);
}

.tm-auth-manual-title {
    color: #d9a62e;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.tm-auth-secret {
    overflow-wrap: anywhere;
    padding: 13px;
    border-radius: 12px;
    background: rgba(0,0,0,0.30);
    color: #ffffff;
    font-family: monospace;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-align: center;
    user-select: all;
}

.tm-auth-secret-help {
    margin-top: 9px;
    color: #9fc5ad;
    font-size: 11px;
    line-height: 1.5;
}

.tm-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #789b87;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.tm-auth-divider::before,
.tm-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.10);
}

.tm-auth-qr-wrapper {
    margin-top: 12px;
    padding: 13px;
    width: fit-content;
    border-radius: 17px;
    background: #ffffff;
    box-shadow:
        0 18px 35px rgba(0,0,0,0.30);
}

.tm-auth-qr {
    display: block;
    width: 190px;
    height: 190px;
    max-width: 100%;
}

.tm-auth-continue {
    display: block;
    margin-top: 27px;
    text-decoration: none;
    text-align: center;
    background: linear-gradient(
        135deg,
        #e5b842,
        #b8860b
    );
    color: #082112;
}

.tm-auth-warning {
    margin-top: 18px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.18);
    color: #d8c28b;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.tm-auth-logout {
    display: block;
    margin-top: 18px;
    color: #8ead9a;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}

.tm-auth-logout:hover {
    color: #ffffff;
}

@media (max-width: 520px) {

    body {
        padding: 14px;
    }

    .tm-3d-card {
        padding: 27px 21px;
    }

    .tm-auth-qr {
        width: 165px;
        height: 165px;
    }

    .tm-auth-secret {
        font-size: 13px;
        letter-spacing: 1px;
    }
}