:root { --paper:#fafaf5; --ink:#193e35; --muted:#809189; --line:#dbe2db; --sage:#edf1eb; --danger:#a33f35; color:var(--ink); background:var(--paper); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; line-height:1.5; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input,textarea { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible { outline:2px solid #819c8a; outline-offset:3px; }
a { color:inherit; text-decoration:none; }
button { border:0; background:transparent; }
svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:middle; }
[hidden] { display:none !important; }
h1,h2,p { margin:0; }
h1 { font-size:24px; line-height:1.3; letter-spacing:-.4px; font-weight:650; }
h2 { font-size:18px; font-weight:600; }
input,textarea { width:100%; min-width:0; color:var(--ink); background:rgba(255,255,255,.45); border:1px solid var(--line); border-radius:6px; min-height:44px; padding:10px 12px; line-height:1.45; }
input::placeholder { color:#8c9992; opacity:1; }
label { display:block; font-size:14px; font-weight:500; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { border-bottom:1px solid var(--line); }
.header-inner { max-width:1280px; height:62px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:32px; }
.brand { font-size:26px; font-weight:750; letter-spacing:-1px; line-height:1; }
.nav-link { align-self:stretch; display:flex; align-items:center; position:relative; font-weight:600; }
.nav-link::after { content:""; position:absolute; height:2px; bottom:0; inset-inline:0; background:var(--ink); }
.account { margin-left:auto; display:flex; align-items:center; gap:24px; font-size:13px; }
.account-name { display:flex; align-items:center; gap:8px; min-width:0; }
.account-name span { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-button { min-height:44px; padding:8px 2px; font-weight:500; display:inline-flex; align-items:center; gap:6px; }
.text-button:hover,.nav-link:hover,.card-title:hover { color:#507765; }
.button { min-height:44px; padding:8px 16px; border:1px solid var(--line); border-radius:6px; font-size:13px; font-weight:600; background:transparent; }
.button:hover { background:var(--sage); }
.primary { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.primary:hover { background:#2a5347; border-color:#2a5347; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px; border-radius:6px; }
.icon-button:hover { background:var(--sage); }
.library { max-width:1280px; padding:24px 24px 32px; margin:auto; }
.page-heading p { margin-top:6px; color:#687e73; font-size:13px; }
.filters { display:flex; gap:12px; align-items:center; padding:20px 0 14px; border-bottom:1px solid var(--line); }
.search-field { width:340px; position:relative; flex-shrink:1; }
.search-field svg { position:absolute; left:12px; top:12px; }
.search-field input { padding-left:40px; }
.date-fields { display:flex; gap:12px; }
.date-fields label { position:relative; width:172px; }
.date-fields label > span { display:block; color:var(--muted); position:absolute; top:-18px; left:2px; font-size:11px; font-weight:400; }
.date-fields input { color:#65796e; font-size:13px; padding:10px; }
.filters > .text-button { padding-left:16px; border-left:1px solid var(--line); margin-left:8px; white-space:nowrap; }
.result-status:not(:empty) { display:flex; justify-content:center; align-items:center; gap:12px; padding:28px 0; color:var(--muted); }
.active-tag { display:flex; align-items:center; gap:6px; padding:8px 0 0; color:#60766a; }
.active-tag .icon-button { min-width:32px; min-height:32px; padding:7px; }
.active-tag svg { width:15px; height:15px; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding-top:16px; }
.panorama-card { min-width:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:rgba(255,255,255,.45); transition:border-color .15s; }
.panorama-card:hover { border-color:#a9bbae; }
.thumbnail { display:block; position:relative; height:118px; background:#edf0e9; overflow:hidden; }
.thumbnail img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .18s; }
.thumbnail.loaded img { opacity:1; }
.thumbnail-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#90a194; font-size:12px; }
.thumbnail-placeholder svg { width:27px; height:27px; }
.thumbnail.loaded .thumbnail-placeholder { display:none; }
.card-content { position:relative; padding:10px 13px 8px; }
.card-title { display:block; max-width:60%; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-meta { max-width:60%; margin-top:3px; display:flex; align-items:center; gap:8px; color:#77867e; font-size:11px; min-height:28px; }
.card-meta time { flex:none; }
.card-tags { display:flex; gap:5px; max-width:100%; overflow:hidden; align-items:center; }
.tag { display:inline-block; background:var(--sage); color:#728176; border-radius:4px; padding:2px 6px; font-size:11px; line-height:1.6; font-weight:400; white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.tag-filter { min-height:28px; padding:0; max-width:100%; overflow:hidden; }
.tag-filter:hover .tag { background:#dce6da; }
.card-actions { position:absolute; right:13px; bottom:11px; display:flex; justify-content:flex-end; gap:14px; min-height:42px; }
.card-actions button { display:inline-flex; gap:5px; align-items:center; padding:8px 0; min-height:44px; font-size:11px; }
.card-actions button:hover { color:#668770; }
.card-actions svg { width:16px; height:16px; }
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px; margin-top:26px; font-size:13px; }
.page-summary { color:#6a7c71; }
.page-buttons { display:flex; gap:8px; align-items:center; }
.page-buttons button { border:1px solid var(--line); border-radius:6px; min-width:40px; min-height:44px; padding:8px; }
.page-buttons button[aria-current=page] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.page-buttons button:hover:not(:disabled):not([aria-current]) { background:var(--sage); }
.page-buttons svg { width:16px; height:16px; }
.page-gap { width:16px; text-align:center; }
.page-state,.empty-state { padding:64px 24px; text-align:center; }
.empty-state { grid-column:1/-1; }
.page-state h1,.empty-state h2 { margin:16px 0 10px; }
.page-state p,.empty-state p { color:var(--muted); margin:0 auto 20px; max-width:520px; }
.state-icon svg { width:42px; height:42px; color:#7e9885; stroke-width:1; }
.auth-page { max-width:420px; margin:40px auto 32px; padding:0 20px; }
.auth-heading { text-align:center; margin-bottom:22px; }
.auth-heading h1 { font-size:24px; }
.auth-heading p { color:var(--muted); margin-top:8px; font-size:13px; }
.lock-icon { margin:0 auto 18px; }
.lock-icon svg { width:36px; height:36px; stroke-width:1.3; }
.auth-form { padding:22px; border:1px solid var(--line); border-radius:8px; }
.auth-form > label,.edit-form > label { margin-bottom:8px; }
.auth-form > label:not(:first-child),.edit-form > label:not(:first-child) { margin-top:22px; }
.input-action { display:flex; border:1px solid var(--line); border-radius:6px; background:rgba(255,255,255,.45); }
.input-action input { border:0; background:none; border-radius:6px; }
.input-action button { flex-shrink:0; min-height:44px; padding:8px 12px; font-size:13px; }
.input-action .password-toggle { padding:8px 10px; }
.input-action .password-toggle svg { width:20px; height:20px; }
.auth-submit { width:100%; margin-top:22px; }
.auth-switch { margin:15px 0 0; text-align:center; color:var(--muted); font-size:13px; }
.auth-switch button { margin-left:5px; color:var(--ink); }
.auth-alternative { display:block; margin:8px auto -6px; font-size:13px; color:#6f8375; }
.form-error { color:var(--danger); font-size:13px; padding-top:12px; line-height:1.6; }
.muted,.field-help { color:var(--muted); }
.field-help { font-size:12px; margin-top:8px; }
.modal-layer { position:fixed; inset:0; z-index:100; background:rgba(20,43,31,.22); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal { width:440px; max-width:100%; max-height:90vh; overflow:auto; border:1px solid var(--line); background:var(--paper); border-radius:12px; padding:24px; box-shadow:0 16px 64px #193e351a; }
.modal header { display:flex; justify-content:space-between; align-items:center; margin:-6px -8px 20px 0; }
.modal h2 { font-size:20px; }
.modal-actions { margin-top:24px; display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.modal-actions .danger { margin-right:auto; }
.danger { color:var(--danger); }
.danger-solid { background:var(--danger); border-color:var(--danger); color:white; }
.share-body { margin-top:20px; }
.share-body label { margin-bottom:8px; }
.share-body input { font-size:12px; }
.toast { pointer-events:none; position:fixed; z-index:200; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); color:var(--paper); background:var(--ink); border-radius:6px; padding:12px 20px; max-width:calc(100% - 32px); width:max-content; font-size:13px; box-shadow:0 4px 20px #193e3510; }
.viewer-page { max-width:1440px; margin:auto; padding:20px 24px 24px; }
.viewer-heading { position:relative; padding-bottom:14px; }
.viewer-heading h1 { font-size:22px; padding-right:140px; }
.viewer-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px; color:var(--muted); font-size:13px; }
.back-link { float:right; min-height:44px; display:flex; align-items:center; gap:4px; font-size:13px; }
.back-link svg { width:16px; height:16px; }
.viewer-stage { position:relative; height:calc(100vh - 200px); height:calc(100dvh - 200px); min-height:360px; max-height:680px; background:#e7ede4; border-radius:8px; overflow:hidden; }
.viewer-stage canvas { width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
.viewer-stage canvas:active { cursor:grabbing; }
.viewer-controls { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); border-radius:9px; padding:6px 10px; background:var(--paper); box-shadow:0 3px 20px #193e3515; }
.viewer-buttons { display:flex; gap:8px; }
.viewer-buttons .icon-button { border:1px solid var(--line); border-radius:50%; }
.viewer-controls p { text-align:center; font-size:11px; color:var(--muted); margin-top:7px; white-space:nowrap; }
.viewer-message { position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); background:var(--paper); border-radius:6px; padding:14px 20px; text-align:center; max-width:80%; }
.viewer-stage:fullscreen,.viewer-stage.immersive { width:100%; height:100%; min-height:0; max-height:none; border-radius:0; }
.viewer-stage.immersive { position:fixed; inset:0; z-index:90; height:100vh; height:100dvh; }
.viewer-stage:fullscreen .viewer-controls,.viewer-stage.immersive .viewer-controls { bottom:calc(20px + env(safe-area-inset-bottom)); }
@media (max-width:1000px) {
  .header-inner { gap:30px; padding-inline:24px; }
  .library { padding:22px 24px; }
  .filters { gap:10px; }
  .search-field { flex:1; width:auto; }
  .date-fields { gap:8px; }
  .date-fields label { width:148px; }
  .filters > .text-button { padding-left:10px; margin-left:0; }
  .gallery { gap:14px; }
  .thumbnail { height:102px; }
  .card-content { padding-inline:10px; }
  .card-title,.card-meta { max-width:100%; }
  .card-meta { gap:5px; }
  .card-actions { position:static; gap:12px; min-height:36px; margin-bottom:-8px; }
}
@media (max-width:720px) {
  .header-inner { height:56px; padding:0 16px; gap:20px; }
  .brand { font-size:24px; }
  .nav-link { display:none; }
  .account { gap:12px; }
  .account-name span { max-width:90px; }
  .account-name svg { width:18px; }
  .account #logout { font-size:12px; }
  .library { padding:18px 16px 24px; }
  h1 { font-size:22px; }
  .page-heading p { font-size:12px; margin-top:4px; }
  .filters { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:14px 0 10px; gap:10px; }
  .search-field { width:100%; grid-column:1; }
  .search-field input { font-size:13px; }
  .date-fields { width:100%; gap:10px; grid-column:1/-1; grid-row:2; }
  .date-fields label { flex:1; width:calc(50% - 6px); }
  .date-fields label > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .filters > .text-button { grid-column:2; grid-row:1; border:0; min-height:44px; padding:4px 0; font-size:12px; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-top:12px; }
  .thumbnail { height:106px; }
  .card-title { font-size:13px; }
  .card-content { padding:9px 10px 0; }
  .card-meta { display:block; font-size:11px; }
  .card-tags { margin-top:5px; }
  .tag-filter { min-height:44px; min-width:44px; }
  .card-actions { gap:7px; justify-content:space-between; margin-bottom:0; }
  .card-actions button { font-size:11px; gap:3px; }
  .card-actions svg { width:14px; height:14px; }
  .tag { font-size:10px; padding:2px 5px; }
  .pagination { gap:12px; margin-top:22px; }
  .page-summary { width:100%; text-align:center; }
  .auth-page { margin-top:28px; padding:0 24px; }
  .auth-form { border:0; padding:4px 0 0; }
  .auth-heading { margin-bottom:22px; }
  .auth-heading h1 { font-size:24px; }
  .auth-heading p { font-size:13px; }
  .auth-form input { font-size:16px; }
  .auth-form > label:not(:first-child) { margin-top:18px; }
  .auth-submit { margin-top:22px; }
  .viewer-page { padding:16px 16px 20px; }
  .viewer-heading { padding:0 0 12px; }
  .viewer-heading h1 { font-size:20px; padding-right:90px; }
  .viewer-heading .back-link { display:flex; font-size:12px; }
  .viewer-meta { font-size:12px; margin-top:8px; gap:9px; }
  .viewer-stage { height:clamp(260px,calc(75vw - 24px),360px); min-height:0; border-radius:8px; }
  .viewer-controls { bottom:10px; }
  .viewer-buttons { gap:6px; }
  .viewer-controls p { font-size:10px; }
  .modal { padding:20px; }
}
@media (max-width:380px) {
  .gallery { grid-template-columns:1fr; }
  .thumbnail { height:165px; }
  .card-title { font-size:15px; }
  .card-meta { display:flex; gap:10px; }
  .card-tags { margin-top:0; }
  .card-actions { justify-content:flex-end; gap:24px; }
  .card-actions button { font-size:12px; }
  .account-name span { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }