:root {
    --primary-gradient: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --text-color: #f0f0f0;

    --sidebar-bg: #ffffff;
    /* Gradien lembut futuristik */
    --accent-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --text-main: #4a4a4a;
    --text-accent: #6a11cb;
    /* Efek Glassmorphism untuk Submenu */
    --submenu-bg: rgba(255, 255, 255, 0.85);
    --shadow: 0 10px 40px rgba(0,0,0,0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*body {font-size: 13px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0;background: #f3f3f3;color: #333;transition: background 0.3s, color 0.3s;}*/
body{font-size: 13px; font-family: 'Inter', 'Segoe UI', sans-serif;  margin: 0;background: #f3f3f3;color: #333;transition: background 0.3s, color 0.3s;}
body.dark-mode {background: #1f1f1f;color: #eee;}
.container {max-width: 300px;margin: 60px auto;padding: 20px;transition: all 0.3s;}
/*.login-container {background: white;padding: 30px;border-radius: 10px;box-shadow: 0 0 12px rgba(0,0,0,0.18);transition: all 0.3s;}*/
/*body.dark-mode .login-container {background: #2a2a2a;box-shadow: 0 0 12px rgba(0,0,0,0.5);}*/
.form-group {margin-bottom: 18px;}
.input-container {position: relative;margin-top:5px;}
.input-icon {position: absolute;top: 50%;left: 10px;width: 20px;transform: translateY(-50%);opacity: 0.6;}
input {font-size: 13px; width: 100%;padding: 10px 10px 10px 35px;border-radius: 6px;border: 1px solid #ccc;box-sizing: border-box;transition: border-color 0.2s, box-shadow 0.2s, background 0.3s, color 0.3s;}
input:focus {border-color: #007bff;box-shadow: 0 0 4px rgba(0,123,255,0.35);outline: none;}
body.dark-mode input {background: #333;color: white;border-color: #666;}
.custom-btn {width: 100%;padding: 11px;background: #0275d8;border: none;color: white;border-radius: 6px;font-size: 13px;cursor: pointer;transition: background 0.2s;}
.custom-btn:hover {background: #025aa5;}
#switchAccount {background: none;border: none;color: #007bff;cursor: pointer;text-decoration: underline;margin-bottom: 15px;font-size: 13px;}
#switchAccount:hover {color: #0056b3;}
/* Banner */
.banner {background-color: #f0ad4e;color: white;padding: 5px;text-align: center;position: fixed;bottom: 0;width: 100%;height: 25px;opacity: 1;transition: all 0.5s;}
.banner.hide {opacity: 0;bottom: -50px;}
/* Typewriter */
#typewriter {margin-bottom: 20px;font-size: 13px;min-height: 60px;}
@media (max-width: 480px) {
.login-container {margin: 10px;padding: 20px;}
input {font-size: 13px;}
}

.input-select {
    width: 100%;
    padding: 8px 10px 8px 35px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    appearance: none;
    background-color: #fff;
}


.erp-footer{
    text-align:center;
    padding:5px;
    font-size:12px;
    color:var(--text-muted);
    background:var(--glass-bg);
    border-top:1px solid var(--glass-border);
    backdrop-filter:blur(10px);
    position:sticky;
    bottom:0;
}

#btnGantiSandi{
   text-decoration: none; font-size: 13px; opacity: 0.8;
}