.button,.icon-button,.chip { border:0; min-height:var(--target); display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); border-radius:var(--radius-pill); white-space:nowrap; font-size:var(--text-sm); font-weight:500; }
.button { padding:var(--s3) var(--s6); background:var(--accent); color:var(--accent-ink); }
.button.secondary { background:var(--surface-soft); color:var(--ink); }
.button.quiet { background:transparent; color:var(--muted); }
.icon-button { width:var(--target); background:var(--surface); border:1px solid var(--line); }
.chip { background:var(--surface); color:var(--muted); padding:var(--s2) var(--s5); border:1px solid transparent; }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.chip .count { font-size:var(--text-xs); }
.theme-control,.view-tabs { display:inline-flex; align-items:center; padding:var(--s1); background:var(--surface-soft); border-radius:var(--radius-pill); gap:var(--s1); }
.theme-control button { background:transparent; border:0; width:var(--target); min-height:var(--target); display:grid; place-items:center; border-radius:var(--radius-pill); }
.theme-control button[aria-pressed="true"],.view-tabs button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:0 2px 8px var(--shadow-color); }
.view-tabs button { border:0; border-radius:var(--radius-pill); background:transparent; color:var(--muted); min-height:var(--target); padding:var(--s2) var(--s5); display:flex; align-items:center; gap:var(--s2); font-size:var(--text-sm); white-space:nowrap; }
.search-box { flex:1; display:flex; align-items:center; gap:var(--s3); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-pill); padding:var(--s1) var(--s4); min-height:56px; }
.search-box:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.search-box>svg { color:var(--muted); }
.search-box input { width:100%; min-width:0; border:0; outline:none; background:transparent; color:var(--ink); font-size:var(--text-base); min-height:var(--target); }
.search-box input::placeholder { color:var(--muted); opacity:.8; }
.search-box input:focus-visible { outline:none; }
.search-box .icon-button { border:0; background:transparent; }
.length-filters { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); }
.length-chip { padding:var(--s2) var(--s4); background:transparent; border-color:var(--line); }
.length-chip[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:600; }
.search-box input::-webkit-search-cancel-button { display:none; }
.portrait-card { min-width:0; position:relative; }
.portrait-media { position:relative; }
.favorite-star { position:absolute; z-index:1; left:var(--s2); top:var(--s2); width:var(--target); height:var(--target); display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); color:var(--ink); box-shadow:0 2px 8px var(--shadow-color); }
.favorite-star svg { width:24px; height:24px; stroke-width:1.8; }
.favorite-star[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.favorite-star[aria-pressed="true"] .star { fill:currentColor; }
.portrait-open { border:0; display:block; width:100%; padding:var(--s1); background:var(--surface-soft); border-radius:var(--radius-card); position:relative; overflow:hidden; }
.portrait-open picture { display:block; overflow:hidden; border-radius:calc(var(--radius-card) - var(--s1)); background:var(--surface-soft); aspect-ratio:1; }
.portrait-open img { width:100%; height:100%; object-fit:contain; }
.card-title { font-size:var(--text-sm); font-weight:500; line-height:1.6; padding-top:var(--s3); text-wrap:pretty; overflow-wrap:anywhere; }
.card-meta { margin-top:var(--s1); font-size:var(--text-xs); color:var(--muted); }
.image-error { position:absolute; inset:var(--s4); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--s2); background:var(--surface-soft); color:var(--ink); font-size:var(--text-sm); border-radius:var(--radius-sm); }
.empty-state { text-align:center; padding:var(--s16) var(--s6); grid-column:1/-1; }
.empty-state>svg { width:40px; height:40px; color:var(--muted); margin:0 auto var(--s4); }
.empty-state h3 { font-size:var(--text-lg); font-weight:500; }
.empty-state p { color:var(--muted); font-size:var(--text-sm); margin:var(--s2) 0 var(--s6); }
.toast { position:fixed; left:50%; bottom:calc(var(--s6) + env(safe-area-inset-bottom)); transform:translateX(-50%); border-radius:var(--radius-pill); background:var(--ink); color:var(--bg); padding:var(--s3) var(--s5); z-index:5; max-width:calc(100% - var(--s8)); font-size:var(--text-sm); box-shadow:var(--shadow); pointer-events:none; }
.showcase { max-width:960px; margin:auto; padding:var(--s8); }
.showcase section { margin:var(--s8) 0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }
.showcase h2 { width:100%; font-size:var(--text-lg); }
@media(hover:hover) { .icon-button:hover,.favorite-star:hover,.button.secondary:hover { background:var(--accent-soft); color:var(--accent); } .portrait-open:hover { transform:translateY(-2px); } .chip:not([aria-pressed="true"]):hover { background:var(--accent-soft); color:var(--accent); } }