:root {
    --bg: #f6f5f2;
    --fg: #22201d;
    --muted: #6b665f;
    --accent: #2f6f4f;
    --border: #ddd8d0;
    --error: #a8322a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 1rem;
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--fg);
}

.card {
    max-width: 40rem;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}

.card--login { max-width: 22rem; margin-top: 15vh; }

h1 { font-size: 1.25rem; margin: 0 0 1rem; }
h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--muted); }

.app-header { display: flex; justify-content: space-between; align-items: baseline; }
.logout { font-size: .875rem; color: var(--muted); }

.group { margin-bottom: 1.5rem; }

.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }

.thumb {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
    background: none;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb::after {
    content: "×";
    position: absolute;
    top: 0; right: 0;
    width: 1.25rem; height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    background: rgba(0,0,0,.6);
    color: #fff;
}

.add-btn, button {
    display: inline-block;
    padding: .625rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}

button.primary {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    padding: .875rem;
    font-weight: 600;
}
button.primary:disabled { background: var(--border); border-color: var(--border); color: var(--muted); cursor: not-allowed; }

input[type="password"] { width: 100%; padding: .625rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; margin: .25rem 0 .75rem; }

.status { color: var(--muted); text-align: center; }
.error { color: var(--error); }

pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .75rem;
    font-size: .9375rem;
}

.actions { display: flex; gap: .5rem; }
.actions button { flex: 1; }

#status details { margin-top: .5rem; font-size: .875rem; color: var(--muted); }

.counter {
    color: var(--muted);
    font-size: .875rem;
    margin: 0 0 .75rem;
}

.group-name {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin: 1.25rem 0 .375rem;
}

.items, .warnings {
    list-style: none;
    margin: 0;
    padding: 0;
}

.items li + li { border-top: 1px solid var(--border); }

.item-row { display: flex; align-items: center; }

.item {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1;
    min-width: 0;
    padding: .75rem .5rem;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.item:active { background: var(--bg); }

.item-label { flex: 1; }

.item-icon {
    flex: 0 0 1.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 1.125rem;
    line-height: 1;
}

.item-edit {
    flex: 0 0 auto;
    padding: .75rem .5rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1;
    cursor: pointer;
}

.item-edit:active { background: var(--bg); }

.item-editing {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5rem;
}

.item-editing-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-amount {
    flex: 1 1 6rem;
    min-width: 0;
    padding: .5rem;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: inherit;
}

.item--removed .item-label {
    text-decoration: line-through;
    color: var(--muted);
}

.warnings li {
    padding: .375rem .5rem;
    font-size: .875rem;
    color: var(--muted);
}

.actions { margin-top: 1.5rem; flex-wrap: wrap; }

.uploader-summary {
    cursor: pointer;
    padding: .75rem .5rem;
    font-weight: 600;
    color: var(--accent);
    list-style: none;
}

.uploader-summary::-webkit-details-marker { display: none; }

#uploader[open] .uploader-summary {
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.modes {
    display: flex;
    gap: 0;
    margin-bottom: .75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.mode {
    flex: 1;
    padding: .875rem .5rem;
    border: 0;
    border-radius: 0;
    background: #fff;
    font: inherit;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.mode--active {
    background: var(--accent);
    color: #fff;
}

.item--bought .item-label {
    text-decoration: line-through;
    color: var(--muted);
}

.item--bought .item-icon { color: var(--accent); }

.add-item {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.add-item input,
.add-item select {
    padding: .75rem .625rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: inherit;
}

.add-item input { width: 100%; }

.add-item-row {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.add-item select { flex: 1; min-width: 0; }