/* Unified photoshare page styles */
:root{
  /* light pink themed palette for photoshare */
  --bg: linear-gradient(180deg, #fff1f6 0%, #ffe6ee 45%, #ffe0ea 100%); /* 浅粉色渐变 */
  --page-bg: rgba(255,255,255,0.9); /* 明亮半透明画布 */
  --card: rgba(255,255,255,0.98); /* card surface over light bg */
  --card-contrast: rgba(0,0,0,0.06);
  --accent: #d44b3a; /* warm accent */
  --accent-2: #f08b6b; /* secondary accent */
  --accent-dark: #b93a2b;
  --accent-gold-red: #f07a4f; /* gold-red for section headings */
  --pagination-light: #ff9b95; /* light red for pagination */
  --muted: #9aa3b2; /* lighter muted on dark */
  --text: #e6eef7; /* light text for dark bg */
  --radius:14px;
  --glass-shadow: 0 12px 40px rgba(2,6,12,0.6); /* fuller shadow for depth */
  --soft-shadow: 0 6px 22px rgba(2,6,12,0.45);
  --elevate-shadow: 0 20px 60px rgba(2,6,12,0.65);
  --transition: 260ms cubic-bezier(.2,.9,.2,1);
}
.clouds-bg{position:fixed; inset:0; z-index:-1; pointer-events:none; background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 60px, transparent 120px), radial-gradient(circle at 80% 60%, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 80px, transparent 160px); opacity:0.9}
.body, body{font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text); margin:0; padding:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}

/* modern hyperlink underline: subtle border-bottom that appears on hover for a professional look */
a{color:inherit; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; transition: border-color var(--transition), color var(--transition)}
a:hover{border-bottom-color:var(--accent-gold-red)}
a:focus{outline:3px solid rgba(185,58,43,0.12); outline-offset:3px}
/* Header: three logical rows — 1) logo + title 2) subtitle 3) quick links */
.ps-header{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-bottom:1px solid rgba(255,255,255,0.03); padding:8px 12px; backdrop-filter: blur(4px)}
.ps-header .title{font-size:24px; font-weight:700; margin:0; letter-spacing:-0.4px; padding-right:6px; line-height:1}
/* modern gradient brand text */
.ps-header .title{
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-transform: none;
}

/* header rows layout to allow 3-line stacking on small screens */
.ps-header .header-inner{display:block; width:100%}
.ps-header .header-row{display:flex; align-items:center; justify-content:space-between; width:100%; padding:6px 0}
.ps-header .header-row-1{justify-content:flex-start; gap:12px}
.ps-header .header-row-2{justify-content:center}
.ps-header .header-row-2 .ps-hero-sub{width:100%; text-align:center}
.ps-header .header-row-3{justify-content:flex-end; gap:12px}
.ps-container{max-width:1200px; margin:8px auto; padding:12px; background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 100%); border-radius:calc(var(--radius) - 4px)}

/* floating decorative background element to give 'sky' feeling without changing content flow */
.ps-sky-decor{position:absolute; left:0; right:0; height:160px; top:0; pointer-events:none; z-index:0; background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.6));}
.ps-header .ps-hero-btn{float:right; margin-top:-4px; background:linear-gradient(90deg,var(--accent), var(--accent-2)); color:#fff; padding:8px 14px; border-radius:10px; text-decoration:none; font-weight:700; font-size:14px; letter-spacing:0.1px; box-shadow:0 10px 28px rgba(255,107,107,0.14); border:none; transition:transform var(--transition), box-shadow var(--transition)}
.ps-header .ps-hero-btn:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(255,107,107,0.18)}
.ps-header .ps-hero-btn:focus{outline:3px solid rgba(255,107,107,0.12); outline-offset:3px}

/* quick text links in header */
.ps-quick-links{display:inline-flex; gap:12px; margin-left:12px; align-items:center}
.ps-quick-link{color:var(--accent-dark); text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:700; background:transparent; border:1px solid rgba(10,20,40,0.04); font-size:14px}
.ps-quick-link:hover{background:linear-gradient(90deg, rgba(255,107,107,0.06), rgba(255,184,107,0.04)); border-color:rgba(10,20,40,0.06)}
.ps-quick-link:focus{outline:2px solid rgba(255,107,107,0.08); outline-offset:2px}

.ps-quick-link.ps-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent; box-shadow:0 12px 30px rgba(255,107,107,0.14); padding:10px 16px; font-size:15px; border-radius:12px}
.ps-quick-link.ps-primary:hover{transform:translateY(-3px)}
.ps-quick-link.ps-primary:active{transform:translateY(0)}
.ps-quick-link.ps-primary:focus{outline:3px solid rgba(255,107,107,0.12); outline-offset:3px}
.ps-quick-link:active{transform:translateY(1px)}

.ps-hero-sub{color:var(--muted); margin-top:6px; font-weight:500}

/* Make section headings more visible (user reported they are hard to see) */
.ps-container section h2{font-size:20px; margin:12px 0; color:var(--accent-gold-red); display:flex; align-items:center; gap:10px; font-weight:800}
.ps-container section h2:before{content:''; display:inline-block; width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow:0 6px 18px rgba(255,107,107,0.12)}

/* make activity meta text slightly brighter for readability */
.ps-activity-desc{color:#cbd5e1; margin-bottom:8px}

.ps-card h2, .ps-card h3 {
  font-size: 20px;
  margin: 12px 0;
  color: var(--accent-gold-red);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.ps-card h2:before, .ps-card h3:before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 18px rgba(255,107,107,0.12);
}

@media (max-width:1024px){
  .ps-container{padding:12px}
}

@media (max-width:640px){
  /* Mobile: stack logical rows vertically and left-align for easier tap targets */
  .ps-quick-links{display:block; margin-top:8px}
  .ps-header .ps-hero-btn{float:none; display:inline-block}
  .ps-header{padding:14px}
  .ps-header .header-inner{display:flex; flex-direction:column; align-items:flex-start}
  .ps-header .header-row{width:100%; justify-content:space-between}
  .ps-header .header-row-2{justify-content:flex-start; margin-top:6px}
  .ps-header .header-row-3{margin-top:8px}
}
.ps-card{background:var(--page-bg); border-radius:8px; padding:12px; box-shadow:0 6px 16px rgba(31,41,55,0.05); border:1px solid var(--card-contrast); transition:box-shadow var(--transition), transform var(--transition); color:var(--text)}

/* Distinct container backgrounds to make sections easy to distinguish */
.ps-list{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:14px; border-radius:12px; border:1px solid var(--card-contrast); margin-bottom:12px}
.ps-admin .ps-card{background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-left:6px solid rgba(99,179,237,0.12)}
.ps-activity-preview{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:10px}

/* Section headings styling for clarity */
/* .ps-container section h2{font-size:18px; margin:12px 0; color:var(--text); display:flex; align-items:center; gap:10px} */
/* .ps-container section h2:before{content:''; display:inline-block; width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow:0 6px 18px rgba(255,107,107,0.12)} */
.ps-form-row{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.ps-form-row input[type=text], .ps-form-row input[type=file], .ps-form-row input[type=number], .ps-form-row textarea{flex:1; padding:10px 12px; border:1px solid rgba(255,255,255,0.06); border-radius:8px; background:rgba(255,255,255,0.02); color:var(--text)}

/* Make title input longer and occupy full row */
.ps-form-row input#title{flex:0 0 100%; width:100%; max-width:100%; font-size:16px; padding:12px 14px}
.ps-editor-wrap{width:100%}
.ps-editor-toolbar{display:flex; gap:8px; margin-bottom:8px}
.ps-editor-btn{background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--text)}
.ps-editor{min-height:120px; padding:12px; border:1px solid rgba(255,255,255,0.06); border-radius:8px; background:rgba(255,255,255,0.02); outline:none; color:var(--text)}
.ps-editor[placeholder]:empty:before{content:attr(placeholder); color:#9aa3b2}
.ps-form-row textarea{min-height:80px}
.ps-btn{background:linear-gradient(90deg,var(--accent), var(--accent-2)); color:#081018; padding:10px 16px; border-radius:10px; border:none; cursor:pointer; box-shadow:0 12px 36px rgba(255,122,107,0.08)}
.ps-btn.ps-cancel{background:transparent; color:var(--muted); padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04)}
.ps-btn.ps-danger{background:linear-gradient(90deg,#ff6b6b,#ff9671); color:#081018; padding:8px 12px; border-radius:8px}
.ps-btn.ps-toggle{background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04); padding:8px 10px; border-radius:8px}
.ps-btn.ps-toggle:hover{background:rgba(255,255,255,0.02)}

/* Modal styles for photo edit */
.ps-modal{position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center}
.ps-modal-backdrop{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.5))}
.ps-modal-dialog{position:relative; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-radius:10px; box-shadow:var(--elevate-shadow); width:880px; max-width:96%; padding:18px; z-index:10001; border:1px solid rgba(255,255,255,0.02)}
.ps-modal-dialog h3{margin:0 0 12px 0}
.ps-modal-dialog .ps-form-row{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.ps-modal-dialog .ps-form-row label{flex:0 0 110px; color:var(--muted)}
.ps-modal-dialog .ps-form-row input[type=text], .ps-modal-dialog .ps-form-row input[type=number], .ps-modal-dialog .ps-form-row select{flex:1; padding:8px 10px; border:1px solid #d1d7e0; border-radius:6px}
.ps-modal-dialog #photoIdDisplay, .ps-modal-dialog #photoUploaderId, .ps-modal-dialog #photoUploadedAt{flex:1; padding:8px 10px; background:#f7f9fb; border-radius:6px}
.ps-modal-dialog .ps-form-row input[type=file]{flex:1}
.ps-muted{color:var(--muted); font-size:13px}
.ps-list{margin-top:18px}
.ps-list li{padding:10px 0; border-bottom:1px dashed rgba(255,255,255,0.03)}
.ps-cover-preview img{max-width:280px; max-height:160px; border-radius:6px}
.ps-photos{display:flex; flex-wrap:wrap; gap:10px}
.ps-photos img{max-width:240px; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,0.45); transition:transform var(--transition), box-shadow var(--transition); cursor:pointer}
.ps-photos img:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 28px 80px rgba(0,0,0,0.6)}

/* Activity view styles */
.ps-activity-cover{
  width:100%;
  /* let image determine height so it is fully visible (contain) */
  height:auto;
  overflow:hidden;
  border-radius:0; /* flush look when used at top */
  background:#f3f4f6;
  display:block;
}
.ps-activity-cover-img{
  width:100%;
  height:auto; /* preserve aspect ratio and show full image */
  object-fit:contain; /* ensure entire image is visible */
  object-position:center top;
  display:block;
}
.ps-activity-meta{margin-top:12px}
.ps-activity-title{font-size:22px; margin:8px 0}
.ps-activity-desc{color:var(--muted); margin-bottom:8px}
.ps-activity-stats{color:var(--muted); margin-bottom:8px}
.ps-activity-actions{display:flex; gap:8px; margin-bottom:12px}

/* Make the activity action links/buttons visually identical and aligned */
.ps-activity-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.ps-activity-actions .ps-quick-link, .ps-activity-actions button.ps-quick-link, .ps-activity-actions a.ps-quick-link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none; cursor:pointer;
  border:1px solid rgba(10,20,40,0.06); background:linear-gradient(90deg, rgba(255,255,255,0.7), rgba(250,250,255,0.8)); color:var(--text);
  box-shadow:0 8px 20px rgba(10,20,40,0.06); transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.ps-activity-actions .ps-quick-link:hover, .ps-activity-actions button.ps-quick-link:hover{ transform:translateY(-4px); box-shadow:0 18px 46px rgba(10,20,40,0.12); }
.ps-activity-actions button.ps-quick-link{ border:none; }
.ps-activity-actions .ps-primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border:0; box-shadow:0 12px 36px rgba(255,107,107,0.18) }
.ps-activity-actions .ps-primary:hover{ box-shadow:0 18px 46px rgba(255,107,107,0.22); transform:translateY(-4px)}

.ps-activity-actions button.ps-share-link,
.ps-activity-actions .ps-share-link{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #b93a2b !important;
  background:linear-gradient(90deg, #b93a2b, #d44b3a) !important;
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,0.12);
  box-shadow:0 12px 28px rgba(185,58,43,0.24) !important;
}

.ps-activity-actions button.ps-share-link:hover,
.ps-activity-actions .ps-share-link:hover{
  background:linear-gradient(90deg, #a93426, #c94234) !important;
  color:#ffffff !important;
  box-shadow:0 18px 38px rgba(185,58,43,0.28) !important;
}

/* Override possible inline styles on share button to keep consistent appearance */
.ps-activity-actions button.ps-quick-link[style]{ background:linear-gradient(90deg, rgba(255,255,255,0.9), rgba(250,250,255,0.95)) !important; border:1px solid rgba(10,20,40,0.06) !important; color:var(--text) !important; }

/* Upload page specific */
.ps-activity-preview{border:1px solid #e6e9ef; padding:12px; border-radius:8px; background:#fff}
.ps-upload-notes{font-size:13px}
#selectedFilesList ul{margin:6px 0; padding-left:18px}
#selectedFilesList li{margin:4px 0}
#uploadStatus{min-height:18px}

/* Row containers for activity view */
.ps-row{width:100%; box-sizing:border-box; padding:10px 0}
.ps-row > *{max-width:100%;}
.ps-row-cover{padding:0}
.ps-row-title{padding-top:12px;padding-bottom:6px}
.ps-row-desc{padding-bottom:8px}
.ps-row-stats{padding-bottom:8px}
.ps-row-actions{padding-bottom:8px}
.ps-row-gallery{padding-top:6px}

.ps-gallery{margin-top:8px}
.ps-grid{display:grid; gap:10px; grid-template-columns:repeat(4, 1fr)}
.ps-grid-item{display:block; overflow:hidden; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--card-contrast); transition:transform var(--transition), box-shadow var(--transition)}
.ps-grid-item:hover{transform:translateY(-6px); box-shadow:var(--elevate-shadow)}
.ps-grid-item img{width:100%; height:140px; object-fit:cover; display:block}
.ps-loading{padding:10px; text-align:center; color:var(--muted)}

/* Responsive: mobile 3 columns */
@media (max-width:640px){
  /* make container fill screen on mobile */
  .ps-container{max-width:100%; margin:0; padding:12px}
  .ps-list, .ps-admin .ps-card { border-radius:8px; padding:12px }
  /* mobile: single column layout for grid */
  .ps-grid{grid-template-columns:repeat(1, 1fr)}
  .ps-grid-item img{height:auto}
  /* header stacks into three rows on mobile */
  .ps-header .header-inner{flex-direction:column; align-items:flex-start}
  .ps-header .header-row{width:100%; justify-content:space-between}
  .ps-header .header-row-2{margin-top:6px}
  .ps-header .header-row-3{margin-top:8px}
}

/* Two-column layout for activity lists (desktop), mobile falls back to one column */
.ps-two-col{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px}
@media (max-width:640px){
  .ps-two-col{grid-template-columns:repeat(1,1fr)}
  .ps-grid-item img{height:auto}
}

/* Pagination controls */
.ps-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;color:var(--pagination-light)}
.ps-pagination button{background:transparent;border:1px solid rgba(255,155,149,0.08);color:var(--pagination-light);padding:6px 10px;border-radius:8px;cursor:pointer}
.ps-pagination button:disabled{opacity:0.45;cursor:default}
.ps-pagination .page-indicator{font-weight:700;color:var(--pagination-light)}

/* Activity page: make content flush to top of viewport */
.ps-activity-page{margin-top:0 !important; padding-top:0 !important}
/* when using ps-activity-page alongside ps-container, remove outer spacing so cover can touch the viewport top */
.ps-activity-page.ps-container{margin:0 auto !important; padding:0 !important; max-width:100%}
.ps-activity-page .ps-card{border-radius:0; box-shadow:none; padding:0}

/* Lightbox styles */
.ps-lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.9); z-index:9999}
.ps-lightbox-inner{position:relative; display:flex; align-items:center; justify-content:center; max-width:98%; max-height:98%}
.ps-lightbox-img{max-width:100%; max-height:90vh; border-radius:6px}
.ps-lightbox-hd{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.5); color:#fff; padding:8px 12px; border-radius:6px; text-decoration:none}
.ps-lightbox-prev, .ps-lightbox-next{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.4); color:#fff; border:none; font-size:34px; width:56px; height:56px; border-radius:56px; cursor:pointer}
.ps-lightbox-prev{left:18px}
.ps-lightbox-next{right:18px}
.ps-lightbox-close{position:absolute; top:18px; right:18px; background:rgba(0,0,0,0.4); color:#fff; border:none; font-size:18px; width:44px; height:44px; border-radius:44px; cursor:pointer}

/* Profile page: use dark text on light cards and make form controls clearly visible */
.ps-profile-container{
  --text:#1f2937;
  --muted:#6b7280;
  --card-contrast:rgba(15,23,42,0.08);
  width:100%;
  max-width:1024px;
  margin:8px auto;
}

.ps-profile-container .ps-card{
  color:var(--text);
  background:rgba(255,255,255,0.96);
  border:1px solid var(--card-contrast);
  box-shadow:0 12px 32px rgba(15,23,42,0.06);
}

.ps-profile-container .ps-muted,
.ps-profile-container .ps-hero-sub,
.ps-profile-container #myActivitiesList li > div > div:last-child{
  color:var(--muted) !important;
}

.ps-profile-container .ps-form-row input[type=text],
.ps-profile-container .ps-form-row input[type=file],
.ps-profile-container .ps-form-row input[type=number],
.ps-profile-container .ps-form-row textarea,
.ps-profile-container .ps-editor{
  background:#ffffff;
  border:1px solid #d7dee8;
  color:var(--text);
  box-shadow:inset 0 1px 2px rgba(15,23,42,0.04);
}

.ps-profile-container .ps-card:has(form) .ps-form-row input[type=file],
.ps-profile-container .ps-card:has(form) .ps-form-row input[type=text],
.ps-profile-container .ps-card:has(form) .ps-form-row input[type=number]{
  width:auto;
}

.ps-profile-container .ps-form-row input::placeholder,
.ps-profile-container .ps-form-row textarea::placeholder,
.ps-profile-container .ps-editor[placeholder]:empty:before{
  color:#94a3b8;
}

.ps-profile-container .ps-editor-btn{
  background:#fff7f2;
  border:1px solid #f1c8bb;
  color:#7c2d12;
}

.ps-profile-container .ps-editor-btn:hover{
  background:#ffe8de;
}

.ps-profile-container .ps-form-row input[type=file]{
  flex:0 0 220px;
  min-width:220px;
  padding:8px 10px;
  color:#64748b;
  overflow:hidden;
}

.ps-profile-container #coverUrl{
  flex:1 1 auto;
  min-width:0;
}

.ps-profile-container .ps-form-row input[type=file]::file-selector-button{
  margin-right:12px;
  padding:10px 16px;
  border:none;
  border-radius:10px;
  background:linear-gradient(90deg,var(--accent), var(--accent-2));
  color:#ffffff;
  font-weight:700;
  cursor:pointer;
}

.ps-profile-container .ps-form-row input[type=file]::-webkit-file-upload-button{
  margin-right:12px;
  padding:10px 16px;
  border:none;
  border-radius:10px;
  background:linear-gradient(90deg,var(--accent), var(--accent-2));
  color:#ffffff;
  font-weight:700;
  cursor:pointer;
}

.ps-profile-container .ps-form-row input[type=file]:disabled,
.ps-profile-container .ps-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

.ps-profile-container .ps-form-row input[type=file]:disabled::file-selector-button,
.ps-profile-container .ps-form-row input[type=file]:disabled::-webkit-file-upload-button,
.ps-profile-container .ps-btn:disabled{
  background:#cbd5e1;
  color:#64748b;
  box-shadow:none;
}

.ps-profile-container #myActivitiesList{
  list-style:none;
  margin:0;
  padding:0;
}

.ps-profile-container #myActivitiesList li{
  padding:14px 0;
  border-bottom:1px solid #edf2f7;
}

.ps-profile-container #myActivitiesList li:last-child{
  border-bottom:none;
}

@media (max-width:1024px){
  .ps-profile-container{
    max-width:100%;
  }
}

@media (max-width:640px){
  .ps-profile-container{
    max-width:100%;
    margin:0;
    padding:12px;
  }

  .ps-profile-container .ps-form-row{
    flex-direction:column;
    align-items:stretch;
  }

  .ps-profile-container .ps-form-row input[type=file]{
    flex:1 1 auto;
    min-width:100%;
  }

  .ps-profile-container .ps-editor-toolbar{
    flex-wrap:wrap;
  }

  .ps-profile-container #myActivitiesList li{
    gap:12px;
  }
}

/* thumbnail tweaks */
.ps-thumb{border-radius:6px; box-shadow:0 1px 3px rgba(10,20,40,0.06);}

/* Lightbox / overlay */
.ps-lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.75); z-index:9999}
.ps-lightbox-img{max-width:95%; max-height:95%; border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,0.6); cursor:zoom-out}

@media (max-width:640px){.ps-container{padding:12px} .ps-header .title{font-size:22px}} 

/* Auth pages styling: reference site login layout (centered card, prominent title, clean inputs)
   Targets pages containing login/register/reset forms by styling .ps-card that contains form elements. */
.ps-card > form, .ps-card form{display:block}
.ps-card:has(form){max-width:560px; margin:28px auto; padding:28px 26px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.98)); box-shadow:0 20px 60px rgba(2,6,12,0.12); color:#0b1220}
.ps-card:has(form) .title, .ps-card:has(form) h1{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto; font-size:26px; font-weight:700; color:var(--accent-dark); margin:0 0 6px}
.ps-card:has(form) .ps-hero-sub{color:var(--muted); font-size:13px; margin-bottom:12px}

/* form inputs */
.ps-card:has(form) input[type=text], .ps-card:has(form) input[type=password], .ps-card:has(form) input, .ps-card:has(form) textarea{
  width:100%; box-sizing:border-box; padding:12px 14px; border-radius:10px; border:1px solid rgba(10,20,40,0.06); background:rgba(250,250,252,0.98); color:#0b1220; margin-bottom:10px; font-size:15px
}
.ps-card:has(form) input::placeholder, .ps-card:has(form) textarea::placeholder{color:#9aa3b2}

/* primary button for auth */
.ps-card:has(form) .ps-btn.ps-primary{
  display:inline-block; /* 不强制占满整行以免破坏排版 */
  min-width:140px; max-width:340px; padding:10px 16px; font-size:15px; border-radius:10px; box-shadow:0 12px 36px rgba(240,123,107,0.12);
}

/* helper links under buttons */
.ps-card:has(form) .ps-quick-link{padding:8px 10px; font-size:14px}

/* smaller screens: make auth card full width with safe padding */
@media (max-width:640px){
  .ps-card:has(form){margin:18px 12px; padding:18px}
  .ps-card:has(form) .ps-header{padding:10px 0}
  .ps-card:has(form) .title{font-size:20px}
  /* 移动端仍使用全宽按钮以便于触控 */
  .ps-card:has(form) .ps-btn.ps-primary{display:block; width:100%; font-size:15px}
}

/* If browser doesn't support :has(), provide fallback targeting known form IDs */
.ps-card#loginForm, .ps-card#psRegisterForm, .ps-card#forgotWrap, .ps-card#resetWrap{max-width:560px; margin:28px auto}

/* Fallback for browsers not supporting :has(): target direct form wrapper elements */
.my-created-container form{width:100%; margin:0; padding:12px}

/* Login page mobile layout adjustments */
.ps-login-page .ps-login-nav{
  width:100%;
}

.ps-login-page .ps-login-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.ps-login-page .ps-login-links{
  margin-left:auto;
  color:#0f4c81;
  font-weight:700;
  white-space:nowrap;
}

.ps-login-page .ps-login-links a{
  color:#0f4c81;
}

@media (max-width:640px){
  .ps-login-page{
    padding:12px 10px;
  }

  .ps-login-page .ps-login-nav{
    display:flex !important;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:8px !important;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .ps-login-page .ps-login-nav::-webkit-scrollbar{
    display:none;
  }

  .ps-login-page .ps-login-nav .ps-quick-link{
    flex:0 0 auto;
    white-space:nowrap;
    padding:8px 10px;
    font-size:14px;
  }

  .ps-login-page .ps-login-actions{
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
  }

  .ps-login-page .ps-card:has(form) .ps-login-actions .ps-btn.ps-primary,
  .ps-login-page .ps-login-actions .ps-btn.ps-primary{
    display:inline-flex;
    width:auto;
    min-width:96px;
    max-width:96px;
    justify-content:center;
    flex:0 0 96px;
    margin:0;
  }

  .ps-login-page .ps-login-links{
    flex:1 1 auto;
    min-width:0;
    font-size:13px;
    line-height:1.6;
    text-align:right;
    white-space:nowrap;
  }
}

/* Register page mobile layout adjustments */
.ps-register-page .ps-register-nav{
  width:100%;
}

.ps-register-page .ps-register-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}

.ps-register-page .ps-register-login-link{
  color:#0f4c81;
  font-weight:700;
  white-space:nowrap;
}

@media (max-width:640px){
  .ps-register-page{
    padding:12px 10px;
  }

  .ps-register-page .ps-register-nav{
    display:flex !important;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:8px !important;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .ps-register-page .ps-register-nav::-webkit-scrollbar{
    display:none;
  }

  .ps-register-page .ps-register-nav .ps-quick-link{
    flex:0 0 auto;
    white-space:nowrap;
    padding:8px 10px;
    font-size:14px;
  }

  .ps-register-page .ps-register-actions{
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    gap:10px;
  }

  .ps-register-page .ps-register-login-link{
    flex:1 1 auto;
    min-width:0;
    font-size:13px;
    line-height:1.5;
    padding:0;
    border:none;
    background:transparent;
    text-align:left;
  }

  .ps-register-page .ps-card:has(form) .ps-register-actions .ps-btn.ps-primary,
  .ps-register-page .ps-register-actions .ps-btn.ps-primary{
    display:inline-flex;
    width:auto;
    min-width:112px;
    max-width:112px;
    justify-content:center;
    flex:0 0 112px;
    margin:0;
  }
}

.ps-my-activity-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.ps-my-activity-main{
  min-width:0;
}

.ps-my-activity-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.ps-my-activity-title{
  font-weight:700;
  color:#1f2937;
}

.ps-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.ps-status-public{
  background:#e7f7ee;
  color:#157347;
}

.ps-status-hidden{
  background:#fff1e7;
  color:#b54708;
}

.ps-my-activity-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ps-public-request{
  background:linear-gradient(90deg, #fff3c4, #ffd86b);
  color:#7a4100;
  border:1px solid rgba(185, 108, 0, 0.18);
  box-shadow:0 14px 28px rgba(255, 184, 0, 0.18);
  font-weight:800;
}

.ps-public-request:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(255, 184, 0, 0.24);
}

.ps-message-page{
  --text:#1f2937;
  --muted:#6b7280;
  --card-contrast:rgba(15,23,42,0.08);
  width:100%;
  max-width:1080px;
  margin:8px auto;
}

.ps-message-page .ps-card{
  background:rgba(255,255,255,0.96);
  border:1px solid var(--card-contrast);
  color:var(--text);
  box-shadow:0 12px 32px rgba(15,23,42,0.06);
}

.ps-message-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.ps-message-empty{
  padding:18px;
  border-radius:14px;
  background:#fff7f2;
  color:#6b7280;
}

.ps-message-item{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,0.08);
  background:linear-gradient(180deg,#ffffff,#fff9f6);
}

.ps-message-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.ps-message-title{
  margin:0;
  font-size:17px;
  font-weight:700;
  color:#1f2937;
}

.ps-message-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:#fce7e1;
  color:#b93a2b;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.ps-message-meta{
  font-size:13px;
  color:#64748b;
  line-height:1.7;
}

.ps-message-content{
  margin-top:10px;
  color:#334155;
  line-height:1.8;
  white-space:pre-wrap;
  word-break:break-word;
}

.ps-message-form-grid{
  display:grid;
  gap:12px;
}

.ps-message-page input[type=text],
.ps-message-page textarea,
.ps-message-page input[readonly],
.ps-message-page select:disabled{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #d7dee8;
  background:#ffffff;
  color:#1f2937;
}

.ps-message-page textarea{
  min-height:140px;
  resize:vertical;
}

.ps-message-page .ps-readonly-note{
  color:#64748b;
  font-size:13px;
}

@media (max-width:640px){
  .ps-my-activity-item{
    flex-direction:column;
    align-items:stretch;
  }

  .ps-my-activity-actions{
    justify-content:flex-start;
  }

  .ps-message-page{
    max-width:100%;
    margin:0;
    padding:12px;
  }

  .ps-message-list{
    grid-template-columns:1fr;
  }
}

/* Manage page: readable dark text on light panels and reliable upload layout */
.ps-manage-container{
  --text:#1f2937;
  --muted:#6b7280;
  --card-contrast:rgba(15,23,42,0.08);
  width:100%;
  max-width:1200px;
  margin:8px auto;
}

.ps-manage-container,
.ps-manage-container .ps-card,
.ps-manage-container .ps-list,
.ps-manage-container .ps-admin,
.ps-manage-container .ps-admin h2,
.ps-manage-container .ps-list h2,
.ps-manage-container .ps-form-row,
.ps-manage-container .ps-muted,
.ps-manage-container table,
.ps-manage-container th,
.ps-manage-container td,
.ps-manage-container label,
.ps-manage-container select,
.ps-manage-container option,
.ps-manage-container #list,
.ps-manage-container #photosTableWrap,
.ps-manage-container #activitiesTableWrap{
  color:var(--text);
}

.ps-manage-container .ps-card,
.ps-manage-container .ps-list,
.ps-manage-container .ps-admin .ps-card{
  background:rgba(255,255,255,0.96);
  border:1px solid var(--card-contrast);
  box-shadow:0 12px 32px rgba(15,23,42,0.06);
}

.ps-manage-container .ps-list,
.ps-manage-container .ps-admin{
  margin-top:18px;
}

.ps-manage-filter-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.ps-manage-filter-bar input[type=search],
.ps-manage-filter-bar select{
  min-height:44px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #d7dee8;
  background:#ffffff;
  color:#1f2937;
  box-shadow:inset 0 1px 2px rgba(15,23,42,0.04);
}

.ps-manage-filter-bar input[type=search]{
  flex:1 1 360px;
  min-width:260px;
}

.ps-manage-filter-bar select{
  flex:0 0 180px;
}

.ps-manage-container .ps-muted,
.ps-manage-container .ps-hero-sub,
.ps-manage-container #list li,
.ps-manage-container table thead tr,
.ps-manage-container table td:nth-child(5),
.ps-manage-container table td:nth-child(6),
.ps-manage-container table td:nth-child(7),
.ps-manage-container table td:nth-child(8){
  color:var(--muted) !important;
}

.ps-manage-container a{
  color:#0f4c81;
}

.ps-manage-container .ps-form-row input[type=text],
.ps-manage-container .ps-form-row input[type=file],
.ps-manage-container .ps-form-row input[type=number],
.ps-manage-container .ps-form-row textarea,
.ps-manage-container .ps-form-row select,
.ps-manage-container .ps-editor{
  background:#ffffff;
  border:1px solid #d7dee8;
  color:var(--text);
  box-shadow:inset 0 1px 2px rgba(15,23,42,0.04);
}

.ps-manage-container .ps-card:has(form) .ps-form-row input[type=file],
.ps-manage-container .ps-card:has(form) .ps-form-row input[type=text],
.ps-manage-container .ps-card:has(form) .ps-form-row input[type=number],
.ps-manage-container .ps-card:has(form) .ps-form-row select{
  width:auto;
}

.ps-manage-container .ps-form-row input::placeholder,
.ps-manage-container .ps-form-row textarea::placeholder,
.ps-manage-container .ps-editor[placeholder]:empty:before{
  color:#94a3b8;
}

.ps-manage-container .ps-editor-btn{
  background:#fff7f2;
  border:1px solid #f1c8bb;
  color:#7c2d12;
}

.ps-manage-container .ps-editor-btn:hover{
  background:#ffe8de;
}

.ps-manage-container .ps-form-row input[type=file]{
  flex:0 0 220px;
  min-width:220px;
  padding:8px 10px;
  color:#64748b;
  overflow:hidden;
}

.ps-manage-container #coverUrl{
  flex:1 1 auto;
  min-width:0;
}

.ps-manage-container .ps-form-row input[type=file]::file-selector-button,
.ps-manage-container .ps-form-row input[type=file]::-webkit-file-upload-button{
  margin-right:12px;
  padding:10px 16px;
  border:none;
  border-radius:10px;
  background:linear-gradient(90deg,var(--accent), var(--accent-2));
  color:#ffffff;
  font-weight:700;
  cursor:pointer;
}

.ps-manage-container #list{
  list-style:none;
  margin:0;
  padding:0;
}

.ps-manage-container #list li{
  padding:12px 0;
  border-bottom:1px solid #edf2f7;
}

.ps-manage-container #list li:last-child{
  border-bottom:none;
}

.ps-manage-container table thead th{
  color:#475569 !important;
  font-weight:700;
}

.ps-manage-container table tbody td{
  color:#1f2937;
}

@media (max-width:1024px){
  .ps-manage-container{
    max-width:100%;
  }
}

@media (max-width:640px){
  .ps-manage-container{
    max-width:100%;
    margin:0;
    padding:12px;
  }

  .ps-manage-filter-bar{
    align-items:stretch;
  }

  .ps-manage-filter-bar input[type=search],
  .ps-manage-filter-bar select,
  .ps-manage-filter-bar .ps-btn{
    width:100%;
    min-width:0;
    flex:1 1 100%;
  }

  .ps-manage-container .ps-form-row{
    flex-direction:column;
    align-items:stretch;
  }

  .ps-manage-container .ps-form-row input[type=file]{
    flex:1 1 auto;
    min-width:100%;
  }

  .ps-manage-container .ps-editor-toolbar,
  .ps-manage-container .header-row-3 > div{
    flex-wrap:wrap;
  }
}