/* styles.css */

/* Default light mode styles */
body {
    background-color: #FEFEFE;
    color: #464646;
}

/* Dark mode styles */
body.dark-mode {
    background-color: #464646;
    color: #FEFEFE;
}

header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #ccc;
}

button {
    background-color: #464646;
    border-color: #FFFF00;
    color: #FEFEFE;
    border-radius: 20px;
    cursor: pointer;
    }

button:hover {
    background-color: #FEFEFE;
    color: #464646;
}
button-logoff {
    background-color: #ffffff;
    border-color: #ff0000;
    color: #FEFEFE;
    border-radius: 50%;
    cursor: pointer;
    }

button-logoff:hover {
    background-color: #FEFEFE;
    color: #ff0000;
}
body.dark-mode .tg-help-modal-box {
    background: #23272e;
    color: #f4f4f4;
}

body.dark-mode .tg-container {
    background: #23272e;
    color: #f4f4f4;
    box-shadow: 0 2px 12px #0007;
}

body.dark-mode .goal-example {
    background: #a16207;
    color: #fefce8;
    border: 1px solid #facc15;
}

body.dark-mode .tip {
    background: #064e3b;
    color: #bbf7d0;
    border-left: 4px solid #22c55e;
}

a {
    color: #1d4ed8;
    text-decoration: underline;
    cursor: pointer;
}

body.dark-mode a {
    color: #60a5fa;
}