:root{--primary-color:#00d4ff;--secondary-color:#ff006e;--accent-color:#8338ec;--bg-dark:#0a0a0a;--bg-medium:#1a1a1a;--bg-light:#2a2a2a;--text-primary:#ffffff;--text-secondary:#b0b0b0;--border-color:#333333;--success-color:#00ff88;--error-color:#ff3366;--glow-intensity:0 0 20px;} *{margin:0;padding:0;box-sizing:border-box;} body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg-dark);color:var(--text-primary);min-height:100vh;background-image:radial-gradient(circle at 20% 50%,rgba(0,212,255,0.1)0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(131,56,236,0.1)0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(255,0,110,0.1)0%,transparent 50%);background-attachment:fixed;overflow-x:hidden;}::-webkit-scrollbar{width:8px;height:8px;}::-webkit-scrollbar-track{background:var(--bg-medium);}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:4px;transition:all 0.3s ease;}::-webkit-scrollbar-thumb:hover{background:var(--secondary-color);box-shadow:var(--glow-intensity)var(--primary-color);} .main-container{background:white;border-radius:20px;padding:40px;box-shadow:0 20px 40px rgba(0,0,0,0.1);text-align:center;max-width:400px;width:100%;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;} .main-container h1{color:#333;margin-bottom:10px;font-size:28px;} .main-container p{color:#666;margin-bottom:30px;font-size:16px;} .show-dialog-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:15px 40px;border-radius:30px;font-size:18px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(102,126,234,0.4);} .show-dialog-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,0.6);} .show-dialog-btn:active{transform:translateY(0);} .overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,1);align-items:center;justify-content:center;z-index:1000;animation:fadeIn 0.3s ease;} @keyframes fadeIn{from{opacity:0;} to{opacity:1;} } .auth-dialog{background:white;border-radius:20px;padding:30px;width:90%;max-width:400px;animation:slideUp 0.3s ease;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);} @keyframes slideUp{from{transform:translateY(50px);opacity:0;} to{transform:translateY(0);opacity:1;} } .dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;} .dialog-header h2{color:#333;font-size:24px;} .close-btn{background:none;border:none;font-size:28px;color:#999;cursor:pointer;transition:color 0.3s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;} .close-btn:hover{color:#666;background:#f5f5f5;} .password-display{background:#f5f5f5;border-radius:10px;padding:20px;margin-bottom:20px;min-height:60px;display:flex;align-items:center;justify-content:center;gap:10px;} .password-dot{width:15px;height:15px;background:#667eea;border-radius:50%;animation:popIn 0.2s ease;} @keyframes popIn{from{transform:scale(0);} to{transform:scale(1);} } .password-placeholder{color:#ccc;font-size:14px;} .keyboard-tabs{display:flex;margin-bottom:15px;background:#f0f0f0;border-radius:10px;padding:5px;} .tab-btn{flex:1;padding:10px;border:none;background:transparent;color:#666;font-size:16px;font-weight:800;cursor:pointer;border-radius:8px;transition:all 0.3s ease;} .tab-btn:nth-child(1){color:#4285F4;} .tab-btn:nth-child(1).active{background:white;color:#4285F4;box-shadow:0 2px 5px rgba(66,133,244,0.3);} .tab-btn:nth-child(2){color:#34A853;} .tab-btn:nth-child(2).active{background:white;color:#34A853;box-shadow:0 2px 5px rgba(52,168,83,0.3);} .tab-btn:nth-child(3){color:#FBBC05;} .tab-btn:nth-child(3).active{background:white;color:#FBBC05;box-shadow:0 2px 5px rgba(251,188,5,0.3);} .virtual-keyboard{display:none;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px;max-height:40vh;overflow-y:auto;padding-right:5px;box-sizing:border-box;} .virtual-keyboard.active{display:grid;} .virtual-keyboard.letters{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));} .virtual-keyboard.symbols{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));} .key-btn{background:#e6e6e6;border:none;border-radius:10px;padding:15px;font-size:14px;color:#000;cursor:pointer;transition:all 0.2s ease;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;} .key-btn:hover{background:#e0e0e0;transform:scale(0.98);} .key-btn:active{background:#d0d0d0;transform:scale(0.95);} .key-btn.zero{grid-column:span 2;} .key-btn.delete{background:#ff6b6b;color:white;} .key-btn.delete:hover{background:#ff5252;} .key-btn.delete:active{background:#ff4444;} .key-btn.close{background:#80d766;color:white;} .key-btn.close:hover{background:#888;} .key-btn.close:active{background:#777;} .keyboard-actions{display:flex;gap:10px;} .clear-btn,.submit-btn{flex:1;padding:12px;border:none;border-radius:10px;font-size:16px;cursor:pointer;transition:all 0.3s ease;} .clear-btn{background:#4989cf;color:#ffffff;} .clear-btn:hover{transform:translateY(-2px);background:#d0d0d0;} .submit-btn{background:linear-gradient(135deg,#d57999 0%,#9b356a 100%);color:white;} .submit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(102,126,234,0.4);} .submit-btn:active{transform:translateY(0);} .message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:20px 40px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.2);display:none;z-index:2000;animation:messagePop 0.3s ease;} @keyframes messagePop{from{transform:translate(-50%,-50%)scale(0.8);opacity:0;} to{transform:translate(-50%,-50%)scale(1);opacity:1;} } .message.success{color:#4caf50;border:2px solid #4caf50;} .message.error{color:#f44336;border:2px solid #f44336;} .container{max-width:1400px;margin:0 auto;padding:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;background:rgba(26,26,26,0.8);backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 8px 32px rgba(0,0,0,0.4);margin-bottom:30px;position:relative;overflow:hidden;} .container::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color),var(--accent-color));border-radius:20px;opacity:0.5;z-index:2;animation:borderRotate 4s linear infinite;} @keyframes borderRotate{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } .custom-button{background-color:var(--primary-color);color:var(--bg-dark);border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:bold;transition:all 0.3s ease;transform:translate(10px,0px);} .custom-button:hover{box-shadow:var(--glow-intensity)var(--primary-color);} .readBtn{background:linear-gradient(135deg,#00d4ff,#0099cc);} .maintainBtn{background:linear-gradient(135deg,#ff006e,#cc0055);} .button-print{background:linear-gradient(135deg,#8338ec,#6620cc);} .button-refresh{background:linear-gradient(135deg,#00ff88,#00cc66);} .clock{background:rgba(0,0,0,0.6);padding:15px 25px;border-radius:15px;border:1px solid rgba(0,212,255,0.3);box-shadow:inset 0 0 20px rgba(0,212,255,0.1);font-family:'Courier New',monospace;position:relative;overflow:hidden;} .clock::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(0,212,255,0.1),transparent);animation:clockGlow 3s ease-in-out infinite;} @keyframes clockGlow{0%,100%{transform:translate(-50%,-50%)rotate(0deg);} 50%{transform:translate(-50%,-50%)rotate(180deg);} } .time{font-size:24px;font-weight:bold;color:var(--primary-color);text-shadow:0 0 10px var(--primary-color);position:relative;z-index:2;} .text-between{text-align:center;margin:30px 0;font-size:20px;font-weight:300;letter-spacing:2px;position:relative;padding:20px;z-index:1;} .text-between::before,.text-between::after{content:'';position:absolute;top:50%;width:100px;height:1px;background:linear-gradient(90deg,transparent,var(--primary-color),transparent);} .text-between::before{left:calc(50% - 150px);} .text-between::after{right:calc(50% - 150px);} .highlight-text{color:var(--primary-color);font-weight:600;text-shadow:0 0 10px var(--primary-color);animation:pulse 2s ease-in-out infinite;} @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.7;} } #dataTable{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;background:rgba(26,26,26,0.8);border-radius:15px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.5);} #dataTable thead{background:linear-gradient(135deg,var(--bg-medium),var(--bg-light));position:sticky;top:0;z-index:2;} #dataTable th{padding:18px 15px;text-align:left;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--primary-color);border-bottom:2px solid var(--border-color);position:relative;} #dataTable th::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--primary-color),transparent);transform:scaleX(0);transition:transform 0.3s ease;} #dataTable th:hover::after{transform:scaleX(1);} #dataTable td{padding:15px;border-bottom:1px solid rgba(255,255,255,0.05);transition:all 0.3s ease;} #dataTable tbody tr{transition:all 0.3s ease;position:relative;} #dataTable tbody tr::before{position:absolute;left:0;top:0;width:3px;height:100%;background:var(--primary-color);transform:scaleY(0);transition:transform 0.3s ease;} #dataTable tbody tr:hover{background:rgba(0,212,255,0.05);transform:translateX(5px);} #dataTable tbody tr:hover::before{transform:scaleY(1);} #dataTable tbody tr:nth-child(even){background:rgba(255,255,255,0.02);} @media print{.no-print{display:none !important;} body{background:white !important;color:black !important;} .container,.clock,#back-to-top,#auth-dialog{display:none !important;} #dataTable{box-shadow:none;border-radius:0;} #dataTable th,#dataTable td{border:1px solid #ccc;} .add-button{display:none !important;} } .refresh-message{position:fixed;top:0;left:0;width:100%;background-color:#009c9f;color:white;text-align:center;padding:10px 0;box-shadow:0 2px 5px rgba(0,0,0,0.2);z-index:2;font-size:18px;font-weight:bold;display:none;} .add-button,.submit-button{padding:7px 16px;text-align:center;cursor:pointer;outline:none;color:#fff;border:none;border-radius:5px;transition:all 0.3s ease;} .add-button{background-color:#4CAF50;font-size:18px;} .submit-button{background-color:#008CBA;font-size:17px;transform:translate(0px,0px);} .add-button:hover,.submit-button:hover{background-color:#3e8e41;box-shadow:var(--glow-intensity)var(--primary-color);} .add-button:active,.submit-button:active{background-color:#3e8e41;box-shadow:0 2px #666;} .status-message{position:fixed;top:50%;right:50%;padding:10px;border-radius:5px;color:#fff;z-index:2;} .status-message.success{background-color:#4CAF50;} .status-message.error{background-color:#F44336;} .submit-button:disabled{background-color:#ccc;cursor:not-allowed;} .copyright{text-align:center;padding:10px;background-color:#333;color:#f8f8f8;} @media (max-width:768px){.container{flex-direction:column;padding:15px;} .custom-button{width:100%;} .clock{width:100%;text-align:center;} #dataTable{font-size:12px;} #dataTable th,#dataTable td{padding:10px 5px;} .text-between::before,.text-between::after{width:50px;} .text-between::before{left:calc(50% - 100px);} .text-between::after{right:calc(50% - 100px);} }