:root {
    --bg: #f7f8fb;
    --card: #fff;
    --accent: #0366d6;
    --muted: #666;
    --radius: 8px;
    font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: #111;
    padding: 24px
}

header {
    max-width: 900px;
    margin: 0 auto 18px
}

main {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 18px
}

#add form {
    display: grid;
    gap: 8px;
    background: var(--card);
    padding: 12px;
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)
}

#add input,
#add textarea {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px
}

#add button {
    padding: 8px 12px;
    border: 0;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    cursor: pointer
}

#add button#clearAll {
    background: #888
}

#list {
    min-width: 300px;
}

#items {
    display: block
}

.card {
    background: var(--card);
    padding: 12px;
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 10px
}

.card h3 {
    margin: 0 0 6px;
    font-size: 1.05rem
}

.card .meta {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 8px
}

.card .notes {
    white-space: pre-wrap;
    margin: 8px 0 0
}

.tags span {
    display: inline-block;
    background: #eef6ff;
    color: var(--accent);
    margin-right: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.85rem
}

.card .remove {
    background: #eee;
    border: 1px solid #ddd;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 8px
}

.empty {
    color: var(--muted)
}

/* responsive */
@media(min-width:900px) {
    main {
        grid-template-columns: 1fr 1fr;
        align-items: start
    }

    #list {
        min-width: 360px
    }
}

/* print */
@media print {
    body {
        padding: 0
    }

    footer,
    header {
        display: none
    }

    main {
        grid-template-columns: 1fr
    }
}

/* while locked: hide all body children except the lock panel */
body:not(.unlocked)>*:not(#lock) {
    display: none !important;
}

#lock {
    z-index: 99999;
}