* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #1d1d1f; background: #faf9f6; }
button { font: inherit; cursor: pointer; border: 1px solid #ccc; background: #fff; border-radius: 8px; padding: 6px 12px; }
input, select { font: inherit; }
.link { border: 0; background: none; color: #555; padding: 4px 6px; text-decoration: underline; }
.danger { color: #b3261e; }
.muted { color: #888; }
.small { font-size: 14px; }
.err { color: #b3261e; min-height: 1em; margin: 4px 0; }

.login { max-width: 420px; margin: 18vh auto; text-align: center; padding: 0 20px; }
.login h1 { font-size: 40px; margin: 0 0 8px; }
.login .g_id_signin { display: inline-block; margin-top: 16px; }

.top { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #e6e3dc; background: #fff; position: sticky; top: 0; }
.top select { padding: 6px 8px; border-radius: 8px; border: 1px solid #ccc; max-width: 50vw; }
.spacer { flex: 1; }
.avatar { width: 28px; height: 28px; border-radius: 50%; }

.pad { max-width: 680px; margin: 0 auto; padding: 20px 16px 60px; }
.bucket { background: #fff; border: 1px solid #e6e3dc; border-radius: 14px; padding: 14px 16px 6px; margin-bottom: 18px; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); }
.bucket:not(.private) { border-top: 3px solid #3b6ef5; }
.bucket header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bucket h2 { margin: 0; font-size: 17px; text-transform: capitalize; }
.bucket header .link { text-decoration: none; color: #3b6ef5; padding: 2px 4px; }
.bucket header .link.muted { color: #999; }

.faces { display: flex; }
.face { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.faces .face + .face { margin-left: -8px; }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.add { width: 100%; padding: 10px 12px; border: 1px solid #e0ddd6; border-radius: 10px; background: #faf9f6; }
.add:focus { outline: 2px solid #3b6ef5; border-color: transparent; background: #fff; }
.by { font-size: 12px; color: #888; background: #f1efe9; border-radius: 999px; padding: 1px 8px; text-transform: capitalize; }

.new-bucket { width: 100%; padding: 14px; border: 2px dashed #d6d3cc; border-radius: 14px; background: none; color: #666; }
.new-bucket:hover { border-color: #3b6ef5; color: #3b6ef5; }

.picker { position: fixed; inset: 0; background: rgb(0 0 0 / 30%); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px; z-index: 10; }
.picker[hidden] { display: none; }
.picker-card { background: #fff; border-radius: 14px; padding: 18px; width: 100%; max-width: 420px; box-shadow: 0 10px 40px rgb(0 0 0 / 20%); }
.picker-card h3 { margin: 0 0 12px; font-size: 18px; }
.picker-friends { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; padding: 3px 12px 3px 3px; border-radius: 999px; border: 1px solid #d6d3cc; background: #fff; color: #333; text-transform: capitalize; }
.chip .face { width: 24px; height: 24px; border: 0; font-size: 11px; }
.chip.on { background: #1d1d1f; border-color: #1d1d1f; color: #fff; }
#pickerEmail { width: 100%; padding: 10px 12px; border: 1px solid #d6d3cc; border-radius: 10px; }
.picker-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.primary { background: #1d1d1f; color: #fff; border-color: #1d1d1f; padding: 8px 18px; }

.items { list-style: none; padding: 0; margin: 8px 0; }
.items li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f0eee8; }
.items li:last-child { border-bottom: 0; }
.items input[type=checkbox] { width: 20px; height: 20px; flex: none; }
.items .text { flex: 1; outline: none; word-break: break-word; }
.items li.done .text { text-decoration: line-through; color: #999; }
.x { border: 0; background: none; font-size: 22px; line-height: 1; color: #aaa; padding: 0 6px; }
.x:hover { color: #b3261e; }

.avatar { cursor: pointer; }