/* Minimal image archive — based on H:\taste-skill-main (taste + minimalist skills).
   White space and the screenshots carry the page, not decorative UI. */
:root { color-scheme:light; --ink:#272825; --muted:#858783; --line:#ebebe8; --canvas:#ffffff; --soft:#f7f7f5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font:14px/1.55 "PingFang SC","SF Pro Display","Microsoft YaHei","Noto Sans SC",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.4;cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid #5e6a5c;outline-offset:3px; }
a { color:inherit;text-decoration:none; }
.wrap { width:min(1160px,100% - 64px); margin-inline:auto; }
.hidden { display:none!important; }

.site-header { border-bottom:1px solid var(--line); }
.header-inner { min-height:64px; display:flex;align-items:center;justify-content:space-between;gap:20px; }
.wordmark { font-size:19px;font-weight:720;letter-spacing:-.5px;white-space:nowrap; }
.header-actions { display:flex;align-items:center;gap:25px; }
.text-button { color:#595c57;border:0;padding:7px 0;background:none;font-size:13px; }
.text-button:hover,.link-button:hover,.create-category:hover { color:var(--ink);text-decoration:underline; }
.identity-button { font-size:13px;background:var(--soft);border:1px solid #e9e9e6;color:#373a36;border-radius:5px;padding:7px 12px; }
.identity-button:hover { background:#eeefeb; }

.page-head { padding:32px 0 24px; }
.page-head h1 { font-size:30px;font-weight:720;letter-spacing:-.9px;line-height:1.25;margin:0;display:flex;align-items:baseline;gap:11px; }
.page-head h1 span { font:500 15px/1.2 "SF Mono",Consolas,monospace;letter-spacing:0;color:#8a8d88; }
.page-head p { font-size:13px;color:var(--muted);margin:11px 0 0; }
.tools { display:flex;align-items:center;gap:11px;margin-bottom:14px; }
.tools input,.tools select { height:42px;background:#fff;border:1px solid #e6e6e3;border-radius:5px;color:#444841;font-size:13px;outline:0; }
.tools input:focus,.tools select:focus { border-color:#9aa69a; }
.tools input { min-width:120px;flex:1;padding:0 14px; }
.tools input::placeholder { color:#a4a6a0; }
.tools select { padding:0 10px;max-width:160px; }
.filter-section { display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding-bottom:14px; }
.category-chips { display:flex;flex:1;align-items:center;gap:24px;overflow-x:auto;scrollbar-width:none;white-space:nowrap; }
.category-chips::-webkit-scrollbar { display:none; }
.chip { background:none;border:0;border-bottom:2px solid transparent;padding:8px 0 9px;font-size:13px;color:#838680;white-space:nowrap; }
.chip:hover { color:var(--ink); }
.chip.active { border-bottom-color:#373b36;color:var(--ink);font-weight:650; }
.create-category { background:none;border:0;color:#626861;font-size:12px;padding:8px 0;white-space:nowrap; }
.result-count { color:#969a94;font-size:12px;margin:17px 0 17px; }

.gallery { columns:3;column-gap:20px; }
.quote-card { break-inside:avoid;display:block;min-width:0;margin:0 0 22px; }
.card-photo { display:block;width:100%;height:auto;position:relative;overflow:hidden;background:var(--soft);border:1px solid #eeefeb;border-radius:5px;padding:0;text-align:center; }
.card-photo img { display:block;width:100%;height:auto;max-width:100%; }
.card-photo img[hidden] { display:none; }
.card-photo:hover { border-color:#bfc5ba; }
.image-error { display:block;font-size:12px;color:#8b6156;padding:24px 12px; }
.quote-meta { padding:8px 2px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#898d87; }
.quote-category { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#575b55; }
.quote-category.unclassified { color:#939791; }
.quote-source { font:11px/1.5 Consolas,monospace;color:#b0b3ad;flex-shrink:0; }
.empty { border-top:1px solid var(--line);text-align:center;padding:55px 16px; }
.empty p { color:#81847f;margin:0 0 17px; }
.pagination { display:flex;align-items:center;justify-content:center;gap:17px;padding:36px 0 68px; }
.pagination button,.plain-button { border:1px solid #e6e6e3;background:#fff;color:#444840;border-radius:5px;font-size:13px;padding:9px 13px; }
.pagination button:hover:not(:disabled),.plain-button:hover { background:#f8f8f6;border-color:#c5c7c2; }
.pagination span { color:#979a95;font:12px Consolas,monospace; }
.skeleton { display:block;height:200px;border-radius:5px;background:var(--soft);break-inside:avoid;margin-bottom:20px; }
.skeleton:nth-child(3n) { height:245px; }
.skeleton:nth-child(3n + 1) { height:160px; }
.site-footer { border-top:1px solid var(--line);margin-top:20px; }
.footer-inner { display:flex;justify-content:space-between;gap:15px;padding:25px 0 32px;font-size:12px;color:#a1a39f; }
.footer-inner span:first-child { color:#6a6d67; }

dialog { background:#fff;color:var(--ink);border:1px solid #e7e8e5;border-radius:9px;padding:0;max-height:92dvh;box-shadow:0 15px 65px #1b201b1c; }
dialog::backdrop { background:#2227229c; }
.dialog-header { display:flex;align-items:center;justify-content:space-between;min-height:55px;border-bottom:1px solid var(--line);padding:10px 20px;gap:12px; }
.dialog-header>span { font-size:13px;font-weight:620;color:#636862;overflow-wrap:anywhere; }
.close-button { background:transparent;border:0;color:#8c908a;font-size:26px;padding:0 3px;line-height:1; }
.close-button:hover { color:#292e29; }
.detail-dialog { width:min(1060px,100% - 24px); }
.detail-body { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr); }
.detail-image { padding:20px;background:#f8f8f6;display:flex;align-items:center;justify-content:center;min-height:340px; }
.detail-image img { display:block;max-width:100%;max-height:75dvh;object-fit:contain; }
.detail-panel { padding:29px 26px 22px;display:flex;flex-direction:column;min-width:0; }
.detail-source { color:#9da09b;font:11px Consolas,monospace; }
.detail-panel h2 { font-size:16px;line-height:1.5;overflow-wrap:anywhere;font-weight:630;letter-spacing:-.1px;margin:12px 0 8px; }
.detail-votes { font-size:12px;color:#898d87;margin:0; }
.small-label { font-size:12px;color:#8d918b;margin:33px 0 8px; }
.detail-category { font-size:19px;font-weight:660; }
.breakdown { display:grid;gap:10px;margin:19px 0 0; }
.vote-entry { display:grid;grid-template-columns:80px 1fr 20px;align-items:center;gap:10px;font-size:12px;color:#838883; }
.vote-entry small { text-align:right; }
.vote-bar { height:4px;background:#f0f0ed; }
.vote-bar span { height:100%;display:block;background:#7c897e; }
.breakdown p { font-size:12px;color:#a0a39c;margin:0; }
.detail-actions { display:flex;gap:9px;margin-top:auto;padding-top:30px; }
.primary-button { background:#333833;color:#fff;border:1px solid #333833;border-radius:5px;padding:10px 15px;font-size:13px;font-weight:570; }
.primary-button:hover { background:#484f48; }
.detail-actions button { flex:1; }
.detail-bottom { display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:22px;padding-top:14px;gap:9px; }
.link-button { background:none;color:#888d87;border:0;font-size:12px;padding:3px 0; }
.form-dialog { width:min(445px,100% - 30px); }
.dialog-content { padding:24px 24px 26px; }
.dialog-content h2 { font-size:19px;font-weight:660;margin:0 0 9px;line-height:1.4; }
.dialog-content p { color:#81857e;font-size:13px;margin:0 0 22px;line-height:1.8; }
.dialog-content p b { color:#444a43; }
.dialog-content label { display:block;color:#555b53;font-size:12px;margin-bottom:7px; }
.dialog-content input,.dialog-content select,.dialog-content textarea { width:100%;border:1px solid #dfe2dc;border-radius:5px;padding:11px 12px;font-size:13px;background:#fff;color:#30342e; }
.dialog-content textarea { resize:vertical; }
.error { font-size:12px;color:#a84e43;min-height:21px;padding-top:8px; }
.submit-button { display:block;width:100%;margin-top:13px; }
.toast { visibility:hidden;opacity:0;position:fixed;bottom:24px;left:50%;transform:translate(-50%,10px);z-index:10;white-space:normal;text-align:center;max-width:calc(100% - 30px);background:#373c36;color:#fff;padding:10px 18px;border-radius:6px;font-size:12px;transition:opacity .2s,transform .2s; }
.toast.show { visibility:visible;opacity:1;transform:translate(-50%,0); }

@media(max-width:1000px) {
  .gallery { columns:2;column-gap:16px; }
}
@media(max-width:640px) {
  .wrap { width:calc(100% - 32px); }
  .header-inner { min-height:58px; }
  .wordmark { font-size:17px; }
  .header-actions { gap:15px; }
  .identity-button,.text-button { font-size:12px; }
  .page-head { padding:32px 0 25px; }
  .page-head h1 { font-size:25px; }
  .page-head p { font-size:12px;line-height:1.8;max-width:330px; }
  .tools { flex-wrap:wrap;gap:8px; }
  .tools input { flex-basis:100%; }
  .tools select { flex:1;min-width:0;max-width:none; }
  .category-chips { gap:18px; }
  .chip { font-size:12px; }
  .gallery { columns:2;column-gap:10px; }
  .quote-card { margin-bottom:17px; }
  .quote-meta { font-size:11px;padding-top:6px; }
  .quote-source { font-size:10px; }
  .detail-body { grid-template-columns:1fr; }
  .detail-image { min-height:160px;padding:12px; }
  .detail-image img { max-height:50dvh; }
  .detail-panel { padding:21px 20px; }
  .small-label { margin-top:20px; }
  .detail-actions { padding-top:19px; }
  .footer-inner { flex-wrap:wrap; }
}
@media(max-width:365px) {
  .wordmark { font-size:16px; }
  .header-actions { gap:11px; }
  .gallery { column-gap:8px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;transition:none!important; }
}