:root {
    --bg-color: #e3f2fd;
    --text-color: #000;
    --card-bg: #fff;
    --btn-bg: #007BFF;
    --btn-color: #fff;
    --loader-border: #007BFF;
}
.dark {
    --bg-color: #121212;
    --text-color: #fff;
    --card-bg: #1e1e1e;
    --btn-bg: #bb86fc;
    --btn-color: #000;
    --loader-border: #bb86fc;
}
body { font-family: Arial, sans-serif; text-align: center; background-color: var(--bg-color); color: var(--text-color); padding: 20px; transition: background-color 0.3s, color 0.3s; }
.container { max-width: 500px; background: var(--card-bg); padding: 20px; border-radius: 10px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); margin: auto; }
input { width: 90%; padding: 10px; margin: 5px 0; border: 2px solid #007BFF; border-radius: 5px; font-size: 16px; }
button { padding: 10px 20px; margin: 10px; cursor: pointer; background-color: var(--btn-bg); color: var(--btn-color); border: none; border-radius: 5px; font-size: 18px; }
button:hover { background-color: #0056b3; }
#card { display: none; background: var(--card-bg); padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); margin-top: 20px; }
#card h2 { font-size: 22px; color: var(--btn-bg); }
#card h3, #card p { margin: 10px 0; padding: 10px; border-radius: 5px; background: #f1f8ff; border-left: 5px solid var(--btn-bg); text-align: left; }
/* Dark mode: card detail text visibility */
.dark #card h3,
.dark #card p {
    background: var(--card-bg);
    color: var(--text-color);
    border-left-color: var(--btn-bg);
}
#qrcode { margin-top: 20px; }
.loader { display: none; border: 4px solid #f3f3f3; border-top: 4px solid var(--loader-border); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
footer { margin-top: 20px; font-size: 14px; color: #444; font-weight: bold; }