* { box-sizing: border-box; margin: 0; }
/* Ensure the `hidden` attribute always wins over component display rules
   (e.g. .lightbox { display:flex }, .photo-grid { display:grid }). */
[hidden] { display: none !important; }
:root {
  --bg: #0f1115; --card: #1a1d24; --card2: #22262f; --text: #e8eaee;
  --muted: #8b91a0; --accent: #4f8cff; --danger: #e5534b; --ok: #3fb96a;
}
body { background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }

header {
  display: flex; align-items: center; gap: 16px; padding: 14px 22px;
  background: var(--card); border-bottom: 1px solid #2a2e38; position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; font-size: 16px; }
.stats { flex: 1; color: var(--muted); font-size: 13px; }
.stats b { color: var(--text); }
button { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; }
button:hover { filter: brightness(1.1); }
button.ghost { background: var(--card2); color: var(--muted); }
button.danger { background: var(--danger); }

main { max-width: 1280px; margin: 0 auto; padding: 22px; }
.crumb { margin-bottom: 16px; font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.crumb .path { flex: 1; } /* absorbs slack so the workflow picker + buttons group on the right */
.crumb .album-wf { display: flex; align-items: center; gap: 6px; font-size: 12px; flex: none; }
.crumb .album-wf select { background: var(--card2); color: var(--text); border: 1px solid #2a2e38; border-radius: 8px; padding: 4px 8px; font-size: 12px; max-width: 240px; cursor: pointer; }
.crumb .run-all { padding: 4px 12px; font-size: 12px; flex: none; }
.crumb .clean-album { padding: 4px 12px; font-size: 12px; flex: none; }
.crumb .del-album { padding: 4px 12px; font-size: 12px; flex: none; }
.crumb a { color: var(--accent); text-decoration: none; cursor: pointer; }
.crumb b { color: var(--text); }

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.album-card {
  background: var(--card); border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: transform .12s; border: 1px solid #2a2e38;
}
.album-card:hover { transform: translateY(-3px); }
.album-card img, .album-card video { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--card2); }
.album-card .info { padding: 10px 12px; }
.album-card .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-card .sub { color: var(--muted); font-size: 12px; }
.album-card .profile-line { color: #a8b3c7; }
.album-card .fb-link { color: var(--accent); text-decoration: none; font-weight: 700; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.photo-card { position: relative; background: var(--card); border-radius: 10px; overflow: hidden; border: 1px solid #2a2e38; }
.photo-card img, .photo-card video { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; display: block; cursor: pointer; background: var(--card2); }
.photo-card .bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; font-size: 11px; color: var(--muted);
}
.photo-card .del { background: none; color: var(--muted); padding: 2px 6px; font-size: 12px; }
.photo-card .del:hover { color: var(--danger); }
.photo-card .bg { background: none; color: var(--muted); padding: 2px 6px; font-size: 12px; }
.photo-card .bg:hover { color: var(--accent); }
.photo-card .bg:disabled { opacity: .6; cursor: wait; }
.photo-card .bg.running { color: var(--accent); opacity: 1; animation: gen-pulse 1.2s ease-in-out infinite; }
@keyframes gen-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.photo-card .acts { display: flex; align-items: center; gap: 2px; }
.photo-card .toggle { background: none; color: var(--accent); padding: 2px 4px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.photo-card.child-card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.photo-card .child-tag {
  position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6);
  color: var(--accent); font-size: 10px; padding: 2px 7px; border-radius: 8px; pointer-events: none;
}

.empty { text-align: center; padding: 80px 0; color: var(--muted); }
.empty h2 { color: var(--text); margin-bottom: 8px; }

.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.lightbox img, .lightbox video { max-width: 92vw; max-height: 78vh; border-radius: 6px; }
.lb-actions { display: flex; gap: 10px; }
.lb-close { position: absolute; top: 16px; right: 20px; background: var(--card2); font-size: 16px; }
.lb-meta { color: var(--muted); font-size: 12px; text-align: center; }
.lb-meta a { color: var(--accent); }
.lb-del { padding: 8px 16px; font-size: 13px; }
.lb-bg { padding: 8px 16px; font-size: 13px; background: var(--card2); }
.lb-bg:disabled { opacity: .6; cursor: wait; }

/* generate modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 60; display: flex; align-items: center; justify-content: center; }
.modal-card { background: var(--card); border: 1px solid #2a2e38; border-radius: 14px; padding: 24px; width: 380px; max-width: 92vw; }
.modal-card h3 { margin-bottom: 14px; }
.modal-label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.modal-label .req { color: var(--danger); }
.modal-card select, .modal-card input[type=file] {
  width: 100%; background: var(--card2); color: var(--text); border: 1px solid #2a2e38;
  border-radius: 8px; padding: 8px; font-size: 13px;
}
.modal-note { font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#gen-run:disabled { opacity: .6; cursor: wait; }

/* tags */
.lb-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; max-width: 92vw; }
.tag-chip {
  display: inline-flex; align-items: center; background: var(--card2); color: var(--text);
  border: 1px solid #2a2e38; border-radius: 20px; padding: 3px 10px; font-size: 12px; gap: 2px;
}
.tag-chip a { color: var(--muted); cursor: pointer; }
.tag-chip a:hover { color: var(--danger); }
.tag-chip.tag-click { cursor: pointer; }
.tag-chip.tag-click:hover { border-color: var(--accent); color: var(--accent); }
.tag-add {
  background: var(--card2); color: var(--text); border: 1px dashed #3a3e48; border-radius: 20px;
  padding: 3px 10px; font-size: 12px; width: 110px;
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.at-log {
  margin-top: 12px; background: #0c0e12; border: 1px solid #22262f; border-radius: 8px;
  padding: 10px; font: 11px/1.6 ui-monospace, Consolas, monospace; color: #9aa3b5;
  max-height: 260px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}

/* slideshow */
.ss-overlay {
  position: fixed; inset: 0; background: #000; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.ss-overlay img, .ss-overlay video { max-width: 100vw; max-height: 88vh; }
.ss-bar { display: flex; align-items: center; gap: 10px; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(20,22,28,.8); border-radius: 24px; padding: 6px 14px; }
.ss-bar button { background: none; color: var(--text); padding: 4px 8px; font-size: 15px; }
.ss-bar button:hover { color: var(--accent); }
#ss-info { color: var(--muted); font-size: 12px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-filters select, .ss-filters input { background: var(--card2); color: var(--text); border: 1px solid #2a2e38; border-radius: 8px; padding: 8px; font-size: 13px; width: 100%; max-width: 340px; display: block; }
.ss-dates { display: flex; gap: 8px; max-width: 340px; }
.ss-dates input { width: auto; flex: 1; }
.ss-shuffle { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.ss-shuffle input { width: auto; }

/* background jobs panel */
.jobs-panel {
  position: fixed; top: 58px; right: 20px; width: 340px; max-height: 60vh; overflow-y: auto;
  background: var(--card); border: 1px solid #2a2e38; border-radius: 12px; padding: 6px;
  z-index: 40; box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.job-row { display: flex; gap: 10px; padding: 9px 10px; border-bottom: 1px solid #22262f; font-size: 12px; align-items: flex-start; }
.job-row:last-child { border-bottom: none; }
.job-icon { flex: none; }
.job-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.job-sub { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-err { color: var(--danger); word-break: break-word; }
.job-row .del { background: none; color: var(--muted); padding: 0 4px; flex: none; }
.job-row .del:hover { color: var(--danger); }

/* workflows page */
.wf-page { max-width: 760px; }
.wf-import { background: var(--card); border: 1px solid #2a2e38; border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.wf-import h3 { margin-bottom: 8px; }
.wf-help { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.wf-import-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-import-row input[type=file] { flex: 1 1 200px; background: var(--card2); color: var(--muted); border: 1px solid #2a2e38; border-radius: 8px; padding: 7px; font-size: 12px; }
.wf-import-row input[type=text] { flex: 1 1 160px; background: var(--card2); color: var(--text); border: 1px solid #2a2e38; border-radius: 8px; padding: 8px; font-size: 13px; }
.wf-err { color: var(--danger); font-size: 12px; margin-top: 8px; min-height: 14px; }
.wf-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid #2a2e38; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.wf-icon { font-size: 18px; }
.wf-name { font-weight: 600; }
.wf-meta { flex: 1; color: var(--muted); font-size: 12px; }
.wf-row .del { background: none; color: var(--muted); padding: 2px 6px; }
.wf-row .del:hover { color: var(--danger); }

/* backups */
.wf-row .bk-restore { background: var(--card2); color: var(--muted); }
.wf-row .bk-restore:hover { color: #fff; }
a.bk-dl { background: var(--card2); color: var(--muted); text-decoration: none; border-radius: 8px; padding: 6px 10px; font-size: 14px; }
a.bk-dl:hover { color: #fff; }

/* login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: var(--card); border: 1px solid #2a2e38; padding: 36px; border-radius: 14px; width: 320px; text-align: center; }
.login-card .logo { font-size: 40px; }
.login-card h1 { font-size: 18px; margin: 8px 0 2px; }
.login-card .muted { color: var(--muted); margin-bottom: 18px; }
.login-card input {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #2a2e38;
  background: var(--bg); color: var(--text); margin-bottom: 12px; font-size: 14px;
}
.login-card button { width: 100%; padding: 10px; }
.err { color: var(--danger); margin-top: 10px; font-size: 13px; min-height: 18px; }