.paint-page { padding-top: 0; }
.paint-page .top { position: sticky; top: 0; }
.library { max-width: var(--wide); margin: 0 auto; padding: clamp(24px, 5vh, 56px) var(--gutter) 64px; }
.library-head { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.library-head h1 { font-size: var(--step-2); margin-bottom: .5rem; }
.library-head .kicker { margin-bottom: .6rem; }
.library-head .small { max-width: 34rem; }
.library-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.paint-page .button { border-color: var(--line); color: var(--ink); background: transparent; cursor: pointer; }
.paint-page .button:hover { background: var(--accent-soft); }
.paint-page .button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.paint-page .button.primary:hover { background: var(--accent-hover); }
.paint-page .button.small { padding: .45rem .8rem; font-size: .85rem; }
.notice { padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); margin-bottom: 24px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.card { display: grid; gap: 10px; }
.card-pic { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line-2); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-pic .blank { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font: 400 .9rem var(--serif); }
.card-pic:hover { border-color: var(--accent); }
.card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-title { font: 400 1.05rem/1.3 var(--serif); color: var(--ink); }
.card-detail { font-size: .85rem; color: var(--muted); }
.card-menu { position: relative; }
.card-menu summary { list-style: none; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.card-menu summary::-webkit-details-marker { display: none; }
.card-menu summary:hover { background: var(--accent-soft); color: var(--ink); }
.card-menu ul { position: absolute; right: 0; top: 32px; z-index: 5; min-width: 180px; margin: 0; padding: 6px; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px -16px rgba(0,0,0,.4); }
.card-menu li button { width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; font: inherit; color: var(--ink); border-radius: 5px; cursor: pointer; }
.card-menu li button:hover { background: var(--accent-soft); }
.card-menu li button.danger { color: #a3261a; }
.empty { color: var(--muted); padding: 40px 0; text-align: center; font-family: var(--serif); font-size: var(--step-1); }
.ipad-line { margin-top: 56px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; background: var(--paper-2); }
.ipad-line h2 { font-size: var(--step-1); margin-bottom: .4rem; }
.ipad-line p { color: var(--muted); max-width: 44rem; }
dialog { border: 1px solid var(--line); border-radius: 12px; padding: 28px; background: var(--paper); color: var(--ink); width: min(420px, 92vw); }
dialog::backdrop { background: rgba(27,26,23,.35); }
dialog h2 { font-size: var(--step-1); margin-bottom: 1rem; }
dialog label { display: grid; gap: 6px; margin-bottom: 14px; font-size: .9rem; color: var(--muted); }
dialog input, dialog select { font: inherit; color: var(--ink); padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.dialog-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }