body {margin: 0;font-family: Arial, sans-serif;background: #f4f4f4;color: #000;display: flex;flex-direction: column;min-height: 100vh;}
body.locked {overflow:hidden;position:inherit;width:100%;}
button {color: white;padding: 10px;border: none;border-radius: 4px;cursor: pointer;transition: background 0.2s;box-shadow: 0 0 8px 1px #0000005e, #333333 0px 0px 5px inset;text-shadow: -1px 0 #818181, 0 1px #818181, 1px 0 #818181, 0 -1px #818181;}
.header {background: #008b00;color: white;padding: 20px;text-align: center;}
.header h1 {margin: 0;font-size: 24px;}
        .header a {color: #00FF00;text-decoration: none;}
        .main {visibility:hidden;flex: 1;display: flex;flex-direction: column;align-items: center;padding: 20px;}
        .return-container {display:none;width: 100%;max-width: 400px;background: white;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);padding: 20px;text-align: center;position: relative;z-index: 1;overflow: visible;pointer-events: auto;}
        .return-container button{background: #d58105;}
        .return-container button:hover {background: #ffa700;color:black;}
        .demo-container {width: 100%;max-width: 400px;background: white;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);padding: 20px;text-align: center;position: relative;z-index: 1;overflow: visible;pointer-events: auto;}
        .welcome-header {color: #008b00;}
        .no-data-list {list-style-type: none;padding-left: 0;}
        .contact-form {width: 100%;max-width: 400px;margin-top: 20px;background: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);z-index: 1;}
        .contact-form input, .contact-form textarea {width: 95%;padding: 10px;margin: 10px 0;border: 1px solid #ccc;border-radius: 4px;}
        .contact-form input[disabled] {background-color: #E2E2E2;}
        .contact-form button {background: #008b00;}
        .contact-form button:hover {background: #00FF00;color:black;}
        .contact-form button:disabled, button[disabled] {border: 1px solid #999999;background-color: #cccccc;color: #666666;box-shadow: 0 0 8px 1px #0000005e, #333333 0px 0px 5px inset;cursor: not-allowed;}
        .contact-form textarea[disabled] {background-color: #E2E2E2;}
        .footer {background: #008b00;color: white;text-align: center;padding: 10px;font-size: 14px;}
        .footer a {color: #00FF00;text-decoration: none;}
        @media (orientation: landscape) {.main {flex-direction: row;justify-content: center;gap: 20px;}}
        .popup {display: none;position: fixed;width: 100%;height: 100%;z-index: 2;}
        .popup-inner{background-color: #ddd;border: 1px solid #616161;border-radius: 10px;box-shadow: 0 0 35px rgba(0, 0, 0, 1), #333333 0px 0px 5px inset;padding-bottom: 5px;height: fit-content;width: fit-content; margin:auto;text-align: center;overflow: hidden;}
        .popup-header {font-size: 27px;font-weight: 600;padding: 10px;text-shadow: -1px 0 #757575, 0 1px #757575, 1px 0 #757575, 0 -1px #757575, 2px 2px 5px #00000070;}
        .popup-form-holder {margin: 20px;}
        .popup-input {width:-webkit-fill-available;text-align: center;font-size: 25px;border-radius: 500px;font-weight: 600;padding: 7px;}
        .central-outer {display: table;position: absolute;top: 0;left: 0;height: 100%;width: 100%;}
        .central-middle {display: table-cell;vertical-align: middle;}
        .popup-zoom-in {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity: 1.0;-webkit-opacity: 1.0;-khtml-opacity: 1.0;opacity: 1.0;animation: popup-zoom-in 0.5s both}
        @keyframes popup-zoom-in{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0;-webkit-opacity: 0;-khtml-opacity: 0;opacity: 0;-moz-transform: scale3d(.3,.3,.3) translate3d(0,-650px,0);-moz-animation-timing-function: cubic-bezier(.55,.055,.675,.19);-webkit-transform: scale3d(.3,.3,.3) translate3d(0,-650px,0);-webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);transform: scale3d(.3,.3,.3) translate3d(0,-650px,0);animation-timing-function: cubic-bezier(.55,.055,.675,.19);}100%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity: 1.0;-webkit-opacity: 1.0;-khtml-opacity: 1.0;opacity: 1.0;-moz-transform: scale3d(1,1,1) translate3d(0,0,0);-moz-animation-timing-function: cubic-bezier(.175,.885,.32,1);-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);-webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);transform: scale3d(1,1,1) translate3d(0,0,0);animation-timing-function: cubic-bezier(.175,.885,.32,1);}}
        .popup-zoom-out {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0;-webkit-opacity: 0;-khtml-opacity: 0;opacity: 0;animation: popup-zoom-out 1s both}
        @keyframes popup-zoom-out {0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity: 1.0;-webkit-opacity: 1.0;-khtml-opacity: 1.0;opacity: 1.0;-moz-transform: scale3d(.9,.9,.9) translate3d(0,60px,0);-moz-animation-timing-function: cubic-bezier(.175,.885,.32,1);-webkit-transform: scale3d(.9,.9,.9) translate3d(0,60px,0);-webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);transform: scale3d(.9,.9,.9) translate3d(0,60px,0);animation-timing-function: cubic-bezier(.175,.885,.32,1);}50%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0;-webkit-opacity: 0;-khtml-opacity: 0;opacity: 0;}100%{-moz-transform: scale3d(.3,.3,.3) translate3d(0,-650px,0);-moz-animation-timing-function: cubic-bezier(.55,.055,.675,.19);-webkit-transform: scale3d(.3,.3,.3) translate3d(0,-650px,0);-webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);transform: scale3d(.3,.3,.3) translate3d(0,-650px,0);animation-timing-function: cubic-bezier(.55,.055,.675,.19);}}
        .swipe-area {width: 200px;height: 80px;background: #808080;color: white;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 4px;border: 2px solid #404040;margin: 20px auto;position: relative;z-index: 1000;user-select: none;pointer-events: none;touch-action: none;transition: background 0.2s, border-color 0.2s;}
        .swipe-area.active {transform: scale(0.95);}
        .swipe-area.unlocked {background: #00FF00;border-color: #008b00;}
        .swipe-area.locked {background: #FF0000;border-color: #8B0000;}
        .padlock {width: 40px;height: 40px;position: relative;margin-bottom: 10px;}
        .padlock-body {width: 40px;height: 25px;background: #404040;border-radius: 4px;position: absolute;bottom: -15px;}
        .padlock-shackle {width: 18px;height: 30px;border: 8px solid #404040;border-bottom: none;border-radius: 12px 12px 0 0;position: absolute;left: 3px;top: 0px;transition: transform 0.2s, left 0.2s;}
        .padlock-shackle.open {left: -23px;}
        .position-text {font-size: 14px;font-weight: bold;color: #FFFFFF;margin-top: 5px;}
        .image-container {position: relative;width: 300px;height: 300px;overflow: hidden;}
        .face {position: absolute;display:none;width: 300px;height: 300px;background-image: url('../images/man-face2.png');background-size: cover;background-position: center;scale: 1.5;top: -1px;left: 7px;}
        .face.active {display:block;transform: translateY(10px) translateX(-10px);animation: ani .8s linear 1;animation-delay: .25s;}
        @keyframes ani {0%{ transform: scale(2) translateY(-11px) translateX(10px);}100%{transform: scale(1) translateY(10px) translateX(-10px);}}
        .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(ellipse 60% 90% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.6) 50%); /* Elliptical cutout */z-index: 10;}
        .overlay.verified {background: #00ff0066;}
        .flash {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #FFFFFF;opacity: 0;z-index: 20;animation: flash .3s linear 1;animation-delay: 1.2s;}
        @keyframes flash {0% { opacity: 0; }50% { opacity: 1; }100% { opacity: 0;}}
        .scanline {position: absolute;width: 50px;height: 10px;background: #00FF0080;top: 14px;left: 50%;transform: translateX(-50%);z-index: 15;clip-path: ellipse(50% 50% at 50% 50%);animation: scanline .75s linear 4;animation-direction: alternate;}
        @keyframes scanline {0%{top: 10px;width: 50px;}25%{top: 68.75px;width: 155px;}50%{top: 137.5px;width: 190px;}75%{top: 216.25px;width: 155px;}100%{top: 275px;width: 50px;}}
        .position-text2 {height: 30px;font-size: 23px;font-weight: bold;color: #000000;margin-top: 5px;text-align: center;}
        .blur-content {filter: contrast(0.8) blur(8px) grayscale(0.2);-webkit-filter: contrast(0.8) blur(8px) grayscale(0.2);overflow: hidden;}