* { box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; margin: 0; background: #f7f7f8; color: #1a1a1a; }
.screen { padding: 16px; max-width: 700px; margin: 0 auto; }
input, button { font-size: 16px; padding: 10px; border-radius: 6px; border: 1px solid #ccc; }
button { cursor: pointer; background: #1a1a1a; color: white; border: none; }
button.tab { background: transparent; color: #1a1a1a; border: none; padding: 10px 12px; font-weight: 500; }
button.tab.active { border-bottom: 2px solid #1a1a1a; }
#tabs { display: flex; gap: 4px; border-bottom: 1px solid #ddd; padding: 8px 16px; align-items: center; flex-wrap: wrap; }
#logout-button { margin-left: auto; background: transparent; color: #666; }
.card { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin-bottom: 10px; cursor: pointer; }
.card-header { display: flex; justify-content: space-between; align-items: baseline; }
.tag { font-size: 0.75em; text-transform: uppercase; color: #666; background: #eee; padding: 2px 6px; border-radius: 4px; }
.actions { display: flex; gap: 8px; margin-top: 10px; }
.actions button { flex: 1; background: #eee; color: #1a1a1a; font-size: 0.9em; padding: 8px; }
.error-banner { background: #fee; color: #a00; padding: 10px; border-radius: 6px; margin-bottom: 10px; }