/* ===== PhotoShare - Responsive Stylesheet ===== */
:root {
  --c-bg:       #f5f7fa;
  --c-surface:  #ffffff;
  --c-border:   #e2e6ea;
  --c-text:     #1a1a2e;
  --c-text2:    #64748b;
  --c-primary:  #4a90d9;
  --c-primary-h:#3b7cc9;
  --c-accent:   #22c55e;
  --c-accent-h: #16a34a;
  --c-danger:   #ef4444;
  --c-danger-h: #dc2626;
  --radius:     10px;
  --shadow:     0 2px 12px rgba(0,0,0,.06);
  --max-w:      1100px;
  --font:       'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1rem; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- Header ---------- */
.site-header { background: var(--c-text); color: #fff; padding: .75rem 0; }
.header-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logo { color: #fff; text-decoration: none; font-size: 1.4rem; font-weight: 700; white-space: nowrap; }
.tagline { color: rgba(255,255,255,.65); font-size: .82rem; }
.header-nav { margin-left: auto; }
.header-link { color: rgba(255,255,255,.85); text-decoration: none; font-size: .88rem; padding: .35rem .75rem; border-radius: 6px; transition: background .15s, color .15s; }
.header-link:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-text); color: rgba(255,255,255,.6); text-align: center; padding: 1rem 0; margin-top: auto; font-size: .8rem; }

/* ---------- Ad Spaces ---------- */
.ad-space { text-align: center; padding: .5rem 0; }
.ad-placeholder { background: var(--c-border); color: var(--c-text2); padding: .6rem; border-radius: 6px; font-size: .75rem; min-height: 50px; display: flex; align-items: center; justify-content: center; }
.ad-sidebar { margin-top: 1.5rem; }
@media(min-width:900px) {
  .main-content { display: flex; gap: 1.5rem; }
  .main-content > .card,
  .main-content > section { flex: 1; min-width: 0; }
  .ad-sidebar { flex: 0 0 300px; }
}

/* ---------- Card ---------- */
.card { background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.5rem; }
.card h1 { font-size: 1.35rem; margin-bottom: .75rem; }
.card-narrow { max-width: 480px; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-weight: 500; text-align: center; border: none; border-radius: 6px; cursor: pointer; padding: .6rem 1.2rem; font-size: .9rem; text-decoration: none; transition: background .2s, opacity .2s; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-h); }
.btn-accent { background: var(--c-accent); color: #fff; }
.btn-accent:hover { background: var(--c-accent-h); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: var(--c-danger-h); }
.btn-outline { background: transparent; border: 1.5px solid var(--c-primary); color: var(--c-primary); }
.btn-outline:hover { background: var(--c-primary); color: #fff; }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: .4rem .8rem; font-size: .82rem; }
.link-btn { background: none; border: none; color: var(--c-primary); cursor: pointer; text-decoration: underline; font-size: inherit; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: .15rem .3rem; border-radius: 4px; text-decoration: none; color: var(--c-text2); }
.icon-btn:hover { background: var(--c-bg); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 500; margin-bottom: .25rem; font-size: .88rem; }
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-control { width: 100%; padding: .55rem .75rem; border: 1.5px solid var(--c-border); border-radius: 6px; font-size: .92rem; font-family: var(--font); }
.form-group input:focus, .form-group select:focus, .form-control:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(74,144,217,.15); }
.form-group--check label { display: flex; align-items: center; gap: .4rem; font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1.25rem; }

.options { margin-top: 1rem; }
.options summary { cursor: pointer; font-weight: 500; color: var(--c-primary); user-select: none; }

/* ---------- Dropzone ---------- */
.dropzone { border: 2px dashed var(--c-border); border-radius: var(--radius); text-align: center; padding: 2.5rem 1rem; cursor: pointer; transition: border-color .2s, background .2s; }
.dropzone:hover, .dropzone.dragover { border-color: var(--c-primary); background: rgba(74,144,217,.04); }
.dropzone-icon { color: var(--c-text2); margin-bottom: .5rem; }
.dropzone-text { font-size: 1rem; font-weight: 500; }
.dropzone-sub { color: var(--c-text2); font-size: .88rem; margin-top: .3rem; }
.dropzone-note { color: var(--c-text2); font-size: .78rem; margin-top: .5rem; }

/* ---------- File List ---------- */
.file-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; max-height: 300px; overflow-y: auto; }
.file-item { display: flex; align-items: center; gap: .75rem; background: var(--c-bg); border-radius: 6px; padding: .4rem .6rem; }
.file-preview { width: 48px; height: 48px; border-radius: 4px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--c-border); }
.file-preview img { width: 100%; height: 100%; object-fit: cover; }
.file-icon { font-size: 1.5rem; }
.file-info { flex: 1; min-width: 0; }
.file-name { display: block; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: .75rem; color: var(--c-text2); }
.file-remove { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--c-danger); padding: .2rem .4rem; }
.file-count { margin-top: .5rem; font-size: .85rem; color: var(--c-text2); }

/* ---------- Progress ---------- */
.progress-section { margin: 1rem 0; }
.progress-bar-wrap { background: var(--c-bg); border-radius: 50px; height: 12px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); border-radius: 50px; transition: width .3s; }
.progress-text { text-align: center; margin-top: .3rem; font-size: .82rem; color: var(--c-text2); }

/* ---------- Result ---------- */
.result-card { border-left: 4px solid var(--c-accent); }
.result-card h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.share-url-group { display: flex; gap: .5rem; margin-top: .75rem; }
.share-url-input { flex: 1; padding: .55rem .75rem; border: 1.5px solid var(--c-border); border-radius: 6px; font-size: .88rem; background: var(--c-bg); }

/* ---------- Gallery ---------- */
.share-card { max-width: 100%; }
.share-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.share-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.meta { color: var(--c-text2); font-size: .85rem; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.gallery-item { background: var(--c-surface); overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.07); transition: transform .15s, box-shadow .15s; }
.gallery-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.thumb-link { display: block; text-decoration: none; }
.thumb-container { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #111; display: flex; align-items: center; justify-content: center; position: relative; }
.thumb-container img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.gallery-item:hover .thumb-container img { transform: scale(1.04); }
.video-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; color: rgba(255,255,255,.85); text-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; }

/* ---------- ZIP File Icon ---------- */
.zip-icon-container { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; }
.zip-icon-container .zip-icon-svg { width: 56px; height: 56px; opacity: .9; }
.zip-icon-container .zip-icon-label { color: rgba(255,255,255,.7); font-size: .75rem; font-weight: 500; text-align: center; padding: 0 .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; }
.photo-viewer .zip-icon-detail { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; gap: 1rem; }
.photo-viewer .zip-icon-detail .zip-icon-svg { width: 96px; height: 96px; opacity: .9; }
.photo-viewer .zip-icon-detail .zip-detail-name { color: rgba(255,255,255,.85); font-size: 1.1rem; font-weight: 500; }
.photo-viewer .zip-icon-detail .zip-detail-size { color: rgba(255,255,255,.55); font-size: .9rem; }
.photo-viewer .zip-icon-detail .btn { margin-top: .5rem; }

/* ---------- Photo Detail ---------- */
.photo-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.photo-nav-actions { display: flex; gap: .5rem; }
.photo-viewer { text-align: center; margin-bottom: 1rem; background: #111; overflow: hidden; }
.photo-full { max-width: 100%; max-height: 75vh; object-fit: contain; }
.preview-notice { text-align: center; font-size: .82rem; color: var(--c-text2); margin: .4rem 0 .8rem; }
.photo-title { font-size: 1.15rem; margin-bottom: .5rem; }
.photo-meta { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .85rem; color: var(--c-text2); }

/* ---------- Photo Pager ---------- */
.photo-pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid var(--c-border); }
.photo-pager .btn { margin: 0; }
.photo-pager .disabled { opacity: .4; pointer-events: none; }

/* ---------- EXIF ---------- */
.exif-section { margin-top: 1rem; }
.exif-section summary { cursor: pointer; font-weight: 500; color: var(--c-primary); }
.exif-content { margin-top: .75rem; }
.exif-row { display: flex; padding: .35rem 0; border-bottom: 1px solid var(--c-bg); font-size: .88rem; }
.exif-label { font-weight: 500; width: 10rem; flex-shrink: 0; }
.exif-value { color: var(--c-text2); word-break: break-all; }
.exif-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.exif-table th, .exif-table td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--c-bg); }
.exif-section-head { background: var(--c-bg); font-weight: 600; }
.exif-key { font-weight: 500; white-space: nowrap; width: 12rem; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.lightbox-img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 4px; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; z-index: 1001; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 1.6rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* ---------- Alerts ---------- */
.alert { padding: .6rem .9rem; border-radius: 6px; font-size: .88rem; margin-bottom: .75rem; }
.alert-danger { background: #fef2f2; color: var(--c-danger); border: 1px solid #fecaca; }
.text-danger { color: var(--c-danger); }
.text-success { color: var(--c-accent); }
.text-primary { color: var(--c-primary); }
.delete-form .delete-result { margin-top: .5rem; font-size: .85rem; }
.new-link-desc { font-size: .85rem; color: var(--c-text2); line-height: 1.7; margin-bottom: .75rem; }
.sub-section { border-top: 1px solid var(--c-border); padding-top: 1rem; }
.sub-section summary { cursor: pointer; font-weight: 500; user-select: none; }

/* ---------- Filter Bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; padding: .75rem; margin-bottom: 1rem; background: var(--c-bg); border-radius: 8px; }
.filter-group { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.filter-label { font-size: .82rem; font-weight: 500; color: var(--c-text2); margin-right: .15rem; }
.filter-btn { background: var(--c-surface); border: 1.5px solid var(--c-border); color: var(--c-text2); padding: .25rem .6rem; border-radius: 5px; font-size: .78rem; cursor: pointer; transition: all .15s; font-family: var(--font); }
.filter-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.filter-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.filter-btn.filter-pick.active { background: var(--c-accent); border-color: var(--c-accent); }
.filter-btn.filter-reject.active { background: var(--c-danger); border-color: var(--c-danger); }
.filter-check { display: flex; align-items: center; gap: .3rem; font-size: .82rem; cursor: pointer; }
.filter-check input { cursor: pointer; }
.selected-count { font-size: .78rem; color: var(--c-primary); font-weight: 500; }

/* ---------- Bulk Action Bar ---------- */
.bulk-bar { background: var(--c-primary); color: #fff; padding: .6rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.bulk-bar form { display: flex; align-items: center; gap: .75rem; }
.bulk-info { font-size: .85rem; font-weight: 500; }

/* ---------- Gallery Item - Marking ---------- */
.gallery-item { position: relative; }
.item-checkbox-wrap { position: absolute; top: .4rem; left: .4rem; z-index: 10; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.85); border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.gallery-item:hover .item-checkbox-wrap,
.item-checkbox-wrap:has(input:checked) { opacity: 1; }
.item-checkbox { cursor: pointer; width: 16px; height: 16px; accent-color: var(--c-primary); }

/* Pick/Reject Overlay (top-right of thumbnail) */
.pick-overlay { position: absolute; top: .35rem; right: .4rem; z-index: 8; display: flex; gap: .2rem; }
.pick-btn { width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; font-size: .85rem; display: flex; align-items: center; justify-content: center; transition: all .15s; opacity: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.gallery-item:hover .pick-btn { opacity: .85; }
.pick-btn.active { opacity: 1 !important; }
.pick-yes { background: rgba(255,255,255,.9); color: var(--c-text2); }
.pick-yes:hover { background: var(--c-accent); color: #fff; }
.pick-yes.active { background: var(--c-accent); color: #fff; }
.pick-no { background: rgba(255,255,255,.9); color: var(--c-text2); }
.pick-no:hover { background: var(--c-danger); color: #fff; }
.pick-no.active { background: var(--c-danger); color: #fff; }

/* Star rating in gallery footer */
.gallery-item-footer { padding: .35rem .6rem; display: flex; justify-content: space-between; align-items: center; gap: .3rem; position: relative; z-index: 5; }
.star-rating { display: flex; gap: .1rem; }
.star-rating .star { font-size: .95rem; color: var(--c-border); cursor: pointer; transition: color .1s; user-select: none; line-height: 1; }
.star-rating .star:hover,
.star-rating .star.hover { color: #fbbf24; }
.star-rating .star.filled { color: #fbbf24; }
.item-actions { display: flex; gap: .15rem; flex-shrink: 0; }

/* Pick status visual indicators on items */
.gallery-item[data-pick="picked"] { box-shadow: 0 0 0 2.5px var(--c-accent), 0 1px 6px rgba(0,0,0,.07); }
.gallery-item[data-pick="rejected"] { opacity: .5; }
.gallery-item[data-pick="rejected"]:hover { opacity: .8; }
.gallery-item.filtered-out { display: none; }

/* Color label borders on gallery items */
.gallery-item[data-color="red"]    { box-shadow: 0 0 0 3px #ef4444, 0 1px 6px rgba(0,0,0,.07); }
.gallery-item[data-color="yellow"] { box-shadow: 0 0 0 3px #eab308, 0 1px 6px rgba(0,0,0,.07); }
.gallery-item[data-color="green"]  { box-shadow: 0 0 0 3px #22c55e, 0 1px 6px rgba(0,0,0,.07); }
.gallery-item[data-color="blue"]   { box-shadow: 0 0 0 3px #3b82f6, 0 1px 6px rgba(0,0,0,.07); }
.gallery-item[data-color="purple"] { box-shadow: 0 0 0 3px #a855f7, 0 1px 6px rgba(0,0,0,.07); }
/* Combined: picked + color — color takes priority for border */
.gallery-item[data-pick="picked"][data-color="red"]    { box-shadow: 0 0 0 3px #ef4444, 0 1px 6px rgba(0,0,0,.07); }
.gallery-item[data-pick="picked"][data-color="yellow"] { box-shadow: 0 0 0 3px #eab308, 0 1px 6px rgba(0,0,0,.07); }
.gallery-item[data-pick="picked"][data-color="green"]  { box-shadow: 0 0 0 3px #22c55e, 0 1px 6px rgba(0,0,0,.07); }
.gallery-item[data-pick="picked"][data-color="blue"]   { box-shadow: 0 0 0 3px #3b82f6, 0 1px 6px rgba(0,0,0,.07); }
.gallery-item[data-pick="picked"][data-color="purple"] { box-shadow: 0 0 0 3px #a855f7, 0 1px 6px rgba(0,0,0,.07); }

/* ---------- Photo Detail Rating ---------- */
.photo-rating { margin-bottom: 1rem; }
.photo-rating-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; padding: .75rem; background: var(--c-bg); border-radius: 8px; }
.photo-pick-buttons { display: flex; gap: .5rem; }
.pick-btn-lg { padding: .45rem 1rem; border-radius: 6px; border: 1.5px solid var(--c-border); background: var(--c-surface); cursor: pointer; font-size: .88rem; font-family: var(--font); transition: all .15s; display: flex; align-items: center; gap: .3rem; }
.pick-btn-lg:hover { border-color: var(--c-primary); }
.pick-btn-lg.pick-yes.active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.pick-btn-lg.pick-no.active { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.photo-star-rating { display: flex; gap: .25rem; }

/* ---------- Color Labels (Photo Detail) ---------- */
.photo-color-labels { display: flex; align-items: center; gap: .5rem; justify-content: center; padding: .5rem 0; flex-wrap: wrap; }
.color-label-title { font-size: .85rem; color: var(--c-text2); margin-right: .25rem; }
.color-label-btn { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; transition: all .15s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.color-label-btn:hover { transform: scale(1.15); }
.color-label-btn.active { border-color: var(--c-text); box-shadow: 0 0 0 2px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.1); transform: scale(1.1); }
.color-label-btn.color-red    { background: #ef4444; }
.color-label-btn.color-yellow { background: #eab308; }
.color-label-btn.color-green  { background: #22c55e; }
.color-label-btn.color-blue   { background: #3b82f6; }
.color-label-btn.color-purple { background: #a855f7; }

/* ---------- About Page ---------- */
.about-page { line-height: 1.8; }
.about-page h1 { font-size: 1.5rem; margin-bottom: .5rem; }
.about-lead { font-size: 1rem; color: var(--c-text2); margin-bottom: 2rem; }
.about-section { margin-bottom: 2.5rem; }
.about-section h2 { font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: .4rem; border-bottom: 2px solid var(--c-border); }

/* Steps */
.about-steps { display: flex; flex-direction: column; gap: 1.25rem; }
.about-step { display: flex; gap: 1rem; align-items: flex-start; }
.step-number { flex-shrink: 0; width: 2.5rem; height: 2.5rem; background: var(--c-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.step-content h3 { font-size: 1rem; margin-bottom: .2rem; }
.step-content p { color: var(--c-text2); font-size: .9rem; }

/* Formats */
.about-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; }
.format-group { background: var(--c-bg); border-radius: 8px; padding: 1rem 1.25rem; }
.format-group h3 { font-size: .95rem; margin-bottom: .5rem; }
.format-group ul { list-style: none; padding: 0; }
.format-group ul li { font-size: .88rem; color: var(--c-text2); padding: .15rem 0; }
.format-group ul li::before { content: "\2022"; color: var(--c-primary); margin-right: .5rem; }
.format-note { font-size: .8rem; color: var(--c-text2); margin-top: .5rem; }

/* Features */
.about-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.feature-item { background: var(--c-bg); border-radius: 8px; padding: 1rem 1.25rem; }
.feature-item h3 { font-size: .95rem; margin-bottom: .3rem; }
.feature-item p { font-size: .88rem; color: var(--c-text2); }

/* Table */
.about-table { width: 100%; border-collapse: collapse; font-size: .9rem; }

/* ===== Admin Panel ===== */
.admin-panel { max-width: 1200px; }
.admin-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.admin-header h1 { margin-bottom: 0; }
.admin-actions { display: flex; gap: .5rem; align-items: center; }

.admin-summary { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: 1rem; background: var(--c-bg); border-radius: var(--radius); }
.summary-item { text-align: center; min-width: 80px; }
.summary-num { display: block; font-size: 1.5rem; font-weight: 700; color: var(--c-primary); }
.summary-label { font-size: .78rem; color: var(--c-text2); }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-table th, .admin-table td { padding: .55rem .65rem; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: middle; }
.admin-table thead th { background: var(--c-bg); font-weight: 600; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.admin-table tbody tr:hover { background: rgba(74,144,217,.04); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--c-text2); }
.text-danger { color: var(--c-danger); }
.text-nowrap { white-space: nowrap; }

.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--c-primary); }

.album-name-cell a { color: var(--c-primary); text-decoration: none; font-weight: 500; }
.album-name-cell a:hover { text-decoration: underline; }

.badge { display: inline-block; font-size: .7rem; padding: .1rem .4rem; border-radius: 4px; vertical-align: middle; margin-left: .3rem; }
.badge-lock { background: var(--c-bg); color: var(--c-text2); }
.badge-expired { background: var(--c-danger); color: #fff; }

.remaining { font-size: .75rem; color: var(--c-text2); }
.row-expired { opacity: .55; }

/* Storage bar */
.storage-bar { margin-bottom: 1.25rem; }
.storage-label { font-size: .82rem; color: var(--c-text2); margin-bottom: .35rem; }
.storage-track { position: relative; height: 10px; background: var(--c-bg); border-radius: 50px; overflow: visible; }
.storage-fill { height: 100%; background: var(--c-accent); border-radius: 50px; transition: width .3s; }
.storage-fill.over-threshold { background: var(--c-danger); }
.storage-threshold { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--c-danger); border-radius: 1px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-box { background: var(--c-surface); border-radius: var(--radius); padding: 1.5rem; max-width: 420px; width: 90%; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.modal-box h3 { margin-bottom: .75rem; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; }

/* Error log table */
.admin-table-logs .log-message { max-width: 500px; word-break: break-word; }
.log-level { display: inline-block; padding: .1rem .4rem; border-radius: 3px; font-size: .72rem; font-weight: 600; }
.log-level-error { background: #fde8e8; color: var(--c-danger); }
.log-level-warning { background: #fef3c7; color: #d97706; }
.log-level-info { background: #dbeafe; color: var(--c-primary); }
.log-context { margin-top: .35rem; }
.log-context summary { font-size: .78rem; color: var(--c-primary); cursor: pointer; }
.log-context pre { font-size: .75rem; background: var(--c-bg); padding: .5rem; border-radius: 4px; overflow-x: auto; margin-top: .3rem; white-space: pre-wrap; word-break: break-all; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.25rem; }
.page-info { font-size: .85rem; color: var(--c-text2); }

/* Alert */
.alert { padding: .6rem .85rem; border-radius: 6px; margin-bottom: 1rem; font-size: .88rem; }
.alert-danger { background: #fde8e8; color: var(--c-danger); }

@media (max-width: 768px) {
  .admin-table { font-size: .78rem; }
  .admin-table th, .admin-table td { padding: .4rem .35rem; }
  .admin-summary { gap: 1rem; }
  .summary-num { font-size: 1.2rem; }
}
.about-table th, .about-table td { padding: .6rem 1rem; text-align: left; border-bottom: 1px solid var(--c-border); }
.about-table th { background: var(--c-bg); font-weight: 500; width: 45%; }

/* CTA */
.about-cta { text-align: center; padding-top: 1rem; }
.btn-lg { font-size: 1.05rem; padding: .75rem 2rem; }
.star-lg { font-size: 1.6rem; color: var(--c-border); cursor: pointer; transition: color .15s; user-select: none; line-height: 1; }
.star-lg:hover, .star-lg.hover { color: #fbbf24; }
.star-lg.filled { color: #fbbf24; }

/* ---------- Responsive ---------- */
.main-content { padding-top: 1.5rem; padding-bottom: 1.5rem; }

@media(max-width:768px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .share-header { flex-direction: column; }
  .photo-nav { flex-direction: column; align-items: stretch; }
  .photo-nav-actions { justify-content: flex-end; }
  .exif-row { flex-direction: column; }
  .exif-label { width: auto; }
  .ad-sidebar { display: none; }
  .filter-bar { gap: .35rem .5rem; padding: .5rem; }
  .item-checkbox-wrap { opacity: 1; }
  .gallery-item .pick-btn { opacity: .85; }
}

@media(max-width:480px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dropzone { padding: 1.5rem .75rem; }
  .card { padding: 1rem; }
  .share-url-group { flex-direction: column; }
}

/* Print-friendly */
@media print {
  .ad-space, .site-header, .site-footer, .lightbox { display: none !important; }
}