:root { --bg-color: #f4f7f6; --card-bg: #ffffff; --text-color: #333333; --input-border: #cccccc; }
body { background-color: var(--bg-color); color: var(--text-color); font-family: sans-serif; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; transition: 0.3s; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1000px; width: 100%; }
.box { background-color: var(--card-bg); padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; transition: 0.3s; }
input, select, textarea { padding: 10px; font-size: 16px; border: 1px solid var(--input-border); border-radius: 6px; background: rgba(0,0,0,0.03); color: inherit; margin: 5px; }
button { padding: 10px 15px; font-size: 16px; cursor: pointer; margin: 4px; border: none; border-radius: 6px; color: white; font-weight: bold; }
.btn-calc { background-color: #4a5568; min-width: 40px; }
.todo-list, .link-list { text-align: left; list-style: none; padding: 0; margin-top: 15px; }
.todo-item, .link-item { display: flex; justify-content: space-between; align-items: center; padding: 5px; border-bottom: 1px solid var(--input-border); }
.completed { text-decoration: line-through; opacity: 0.5; }
#timer-display { font-size: 36px; font-weight: bold; margin: 10px 0; }
#welcome-msg { font-size: 24px; font-weight: bold; margin-bottom: 20px; }
.link-item a { color: #58a6ff; text-decoration: none; font-weight: bold; }