nav a.on { font-weight: 600; text-decoration: underline; }
nav b { background: #c33; color: #fff; border-radius: 9px; padding: 0 6px; font-size: .75rem; margin-left: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.card { display: grid; grid-template-columns: 96px 1fr; gap: .6rem; padding: .6rem; border: 1px solid color-mix(in srgb, CanvasText 15%, transparent); border-radius: 8px; }
.card.sel { outline: 2px solid #58a; }
.card img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.card .meta { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.card .actions { grid-column: 1 / -1; display: flex; gap: .4rem; }
.suggest { font-size: .85rem; } .suggest.personal { color: #d9a; } .suggest.rejected { color: #c33; }
.badge { background: color-mix(in srgb, CanvasText 12%, transparent); border-radius: 4px; padding: 0 .35rem; font-size: .75rem; margin-left: .3rem; }
button { font: inherit; padding: .3rem .6rem; border-radius: 6px; border: 1px solid color-mix(in srgb, CanvasText 25%, transparent); background: color-mix(in srgb, CanvasText 6%, transparent); color: inherit; cursor: pointer; }
button.danger { border-color: #c33; color: #c33; }
.toolbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0; }
.toolbar .sep { width: 1px; height: 1.4rem; background: color-mix(in srgb, CanvasText 20%, transparent); }
.hint { font-size: .8rem; opacity: .7; } kbd { border: 1px solid currentColor; border-radius: 3px; padding: 0 .25rem; font-size: .75rem; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.cell.sel { outline: 3px solid #58a; outline-offset: -3px; }
.cell.cur { box-shadow: inset 0 0 0 2px #fc3; }
.cell.dim img { opacity: .6; }
.cell.family { border-bottom: 3px solid #5a5; } .cell.personal { border-bottom: 3px solid #d9a; }
.tags { position: absolute; left: 2px; bottom: 2px; display: flex; flex-wrap: wrap; gap: 2px; }
.tags i { font-style: normal; font-size: .65rem; background: #0009; color: #fff; padding: 0 3px; border-radius: 3px; }
.tags i.c { background: #a60c; } .tags i.b { background: #36ac; } .tags i.n { background: #a4ac; } .tags i.h { background: #c80c; } .tags i.s { background: #0006; }
.dismiss { position: absolute; right: 2px; top: 2px; font-size: .7rem; padding: 0 .3rem; }
.pair { display: flex; align-items: center; gap: .6rem; padding: .5rem; border: 1px dashed color-mix(in srgb, CanvasText 30%, transparent); border-radius: 8px; margin: .5rem 0; }
.pair img { height: 140px; cursor: pointer; border-radius: 4px; } .pair img:hover { outline: 3px solid #58a; }
.autocat h2 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; margin: 1rem 0 .4rem; }
.autocat h2 small { opacity: .6; }
.mini { width: 36px; height: 36px; object-fit: cover; border-radius: 3px; margin-right: 2px; vertical-align: middle; }
table.places { border-collapse: collapse; } table.places td, table.places th { padding: .3rem .6rem; text-align: left; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: #333; color: #fff; padding: .5rem 1rem; border-radius: 8px; }
main h2 { font-size: 1rem; margin: 1rem 0 .4rem; } main h2 small { opacity: .6; margin-left: .4rem; }
.cluster { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; padding: .5rem; border: 1px solid color-mix(in srgb, CanvasText 15%, transparent); border-radius: 8px; margin-bottom: .5rem; }
.faces { display: flex; flex-wrap: wrap; gap: 4px; }
.faces img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; cursor: pointer; }
.who { display: flex; gap: .4rem; align-items: center; }
.story { margin: .5rem 0 1rem; display: flex; gap: .5rem; align-items: flex-start; }
.story textarea { flex: 1; font: inherit; padding: .5rem; }