@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

:root {
  --primary-base: #144130;
  --bg-base: #f9f9f9;
  --primary-accent: #dabb8a;
  --container-fill: #ffffff;
  --action-accent: #1d5c45;
  --muted-text: #5f6b65;
  --danger-color: #b22222;
  --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Open Sans', sans-serif; background: var(--bg-base); color: #333; line-height: 1.6; }
h1, h2, h3, h4 { font-family: 'Arvo', serif; color: var(--primary-base); }

.container { max-width: 800px; margin: 0 auto; padding: 20px; }
.card { background: var(--container-fill); padding: 24px; border-radius: var(--radius); box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 20px; }

input, textarea, button { width: 100%; padding: 12px; margin-top: 8px; border-radius: 4px; border: 1px solid #ccc; font-family: inherit; }
button { background: var(--action-accent); color: #fff; border: none; cursor: pointer; font-weight: 600; transition: background 0.2s; }
button:hover { background: var(--primary-base); }
button.danger { background: var(--danger-color); }

.pwd-wrapper { position: relative; }
.pwd-toggle { position: absolute; right: 10px; top: 18px; cursor: pointer; color: var(--muted-text); background: none; width: auto; padding: 0; border: none;}

.slot-row { border-bottom: 1px solid #eee; padding: 15px 0; display: flex; flex-direction: column; }
@media (min-width: 600px) { .slot-row { flex-direction: row; justify-content: space-between; align-items: center; } }

/* Modal */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); padding: 20px; align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-content { background: var(--container-fill); padding: 24px; border-radius: var(--radius); width: 100%; max-width: 400px; }