:root {
    --text-color: #343a40;
    --background-color: #f8f9fa;
    --background-color-input: #ffffff;
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --border-color: #dee2e6;
}
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #f8f9fa;
        --background-color: #212529;
        --background-color-input: #121212;
        --primary-color: #007bff;
        --secondary-color: #6c757d;
        --border-color: #343a40;
    }
}
body {font-size: 16px;font-family: sans-serif;line-height: 1.6;width: 100%;max-width: 600px;margin: auto;padding: 20px;color: var(--text-color);background-color: var(--background-color);box-sizing: border-box;}
.btn {cursor: pointer;}
.icon {width: 20px;height: 20px;}

#loginBox {display: flex;flex-direction: column;gap: 10px;width: 20rem;margin: auto;}
#loginBox p {margin-top: 0;}
#loginBox input {width: 100%;padding: 10px;color: var(--text-color);border: 1px solid var(--border-color);border-radius: 5px;box-sizing: border-box;background-color: var(--background-color-input);}
#loginBox button { padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--primary-color); color: var(--text-color); cursor: pointer; }
#loginBox button:hover { background-color: var(--secondary-color); }

.nav {display: flex;justify-content: flex-end;gap: 10px;margin-bottom: 20px;}
.nav button { padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--primary-color); color: var(--text-color); cursor: pointer; }
.nav button:hover { background-color: var(--secondary-color); }

#recordPanel form { display: flex;margin-bottom: 10px; }
#recordPanel textarea { flex-grow: 1;padding: 10px;color: var(--text-color);background-color: var(--background-color-input);border: 1px solid var(--border-color); border-radius: 5px; }
#recordPanel button { padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--primary-color); color: var(--text-color); cursor: pointer; }
#recordPanel button:hover { background-color: var(--secondary-color); }

.recordsHead {display: flex;align-items: center;border-bottom: 2px solid var(--border-color);}
.recordsHead h2 {font-size: 1.25rem;margin-right: auto;}
.recordsHead .nav{margin-bottom: 0;}

.record { border-bottom: 1px solid var(--border-color); padding: 15px 0; }
.recordMeta { display: flex; align-items: center; }
.recordMeta time { font-size: 0.9em; color: var(--secondary-color); margin-right: auto; }
.record p { margin: 10px 0; }
.reflection { display: flex; color: #888; font-size: 0.9em; align-items: center; }