:root { color-scheme: dark; font-family: system-ui, "Microsoft YaHei", sans-serif; --page: #15161a; --surface: #202228; --border: #363941; --text: #e9eaf0; --muted: #afb3c0; --control: #2b2e36; --button: #303542; --button-hover: #3b4252; --control-border: #505462; --button-border: #5a6072; --viewer: #111; --shadow: #0004; background: var(--page); color: var(--text); }
:root[data-theme="light"] { color-scheme: light; --page: #f4f6fa; --surface: #ffffff; --border: #d5dbe6; --text: #1d2533; --muted: #5c6879; --control: #ffffff; --button: #edf1f7; --button-hover: #dfe7f2; --control-border: #aeb9c9; --button-border: #9cabbf; --viewer: #e8ebf0; --shadow: #23304a1c; }
* { box-sizing: border-box; }
body { margin: 0; }
.toolbar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; align-items: end; padding: 18px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
h1 { margin: 0; font-size: 1.35rem; } .toolbar p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
label { display: grid; gap: 5px; font-size: .82rem; color: var(--muted); } input, select, button { font: inherit; } input, select { min-height: 34px; padding: 5px 8px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--control); color: inherit; }
input { min-width: 220px; }.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; padding: 22px; }
.card { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 3px 14px var(--shadow); }.viewer { position: relative; display: grid; place-items: center; min-height: 360px; background: var(--viewer); }.viewer img { display: block; width: 100%; max-height: 720px; object-fit: contain; }.empty-preview { color: var(--muted); }.viewer button { position: absolute; top: 50%; z-index: 1; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff80; border-radius: 50%; background: #111b; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transform: translateY(-50%); }.viewer button:hover:not(:disabled) { background: #000e; }.viewer .previous { left: 12px; }.viewer .next { right: 12px; }.viewer button:disabled { cursor: default; opacity: .4; }
.details { padding: 12px; }.details h2 { margin: 0 0 8px; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }.details p { margin: 7px 0; color: var(--muted); font-size: .83rem; }.path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.actions { display: flex; gap: 8px; margin-top: 12px; }.actions button, .theme-toggle { padding: 7px; border: 1px solid var(--button-border); border-radius: 6px; background: var(--button); color: inherit; cursor: pointer; }.actions button { flex: 1; }.actions button:hover, .theme-toggle:hover { background: var(--button-hover); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 8px 22px 30px; }.pagination button { padding: 8px 14px; border: 1px solid var(--button-border); border-radius: 6px; background: var(--button); color: inherit; cursor: pointer; }.pagination button:disabled { cursor: default; opacity: .45; }
@media (max-width: 600px) { .toolbar { padding: 14px; }.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }.viewer { min-height: 0; height: 250px; overflow: hidden; touch-action: pan-y; }.viewer img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; }.viewer button { display: none; }.details { padding: 9px; }.details h2 { font-size: .86rem; }.details p { font-size: .72rem; }.actions { flex-direction: column; gap: 6px; margin-top: 8px; }.actions button { padding: 8px 6px; }.path { display: none; } }