/* LivePortal — "archive workspace" design system.
   Square corners everywhere; hairline 1px borders; no gradients.
   Fonts: Archivo (UI) + JetBrains Mono (data). */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --page-bg: #F1F1EF;
  --header-bg: #E2E2DF;
  --header-border: #C2C0BA;
  --card-bg: #FDFDFC;
  --card-border: #A9A7A1;
  --text: #1A1A18;
  --text-dim: #4E4C46;
  --text-mute: #7A7872;
  --input-bg: #FDFDFC;
  --input-border: #A9A7A1;
  --btn-bg: #F6F6F4;
  --btn-border: #A9A7A1;
  --btn-fg: #232320;
  --sidebar-bg: #E7E7E4;
  --grid-bg: #F6F6F4;
  --row-alt: #EAEAE7;
  --blue: #1C5FA8;
  --blue-d: #14477E;
  --blue-hover: #17518F;
  --blue-tint: #DCE7F4;
  --red: #C4241B;
  --red-text: #A31E16;
  --red-bg: #FBEBEA;
  --red-border: #D8A9A5;
  --heart-off: #9A968E;
  --check-border-off: #9A988F;
  --star-on: #C78A1E;
  --star-off: #55554F;
}

:root[data-theme="dark"] {
  --page-bg: #18191A;
  --header-bg: #202123;
  --header-border: #35362F;
  --card-bg: #1C1D1B;
  --card-border: #3A3C36;
  --text: #EDEBE3;
  --text-dim: #ADAAA1;
  --text-mute: #83817A;
  --input-bg: #202124;
  --input-border: #3E403A;
  --btn-bg: #26282A;
  --btn-border: #42443E;
  --btn-fg: #DCDAD2;
  --sidebar-bg: #1D1E20;
  --grid-bg: #151617;
  --row-alt: #212224;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Archivo, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  overflow: hidden;
}
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; }

a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #101010; }
button { font-family: Archivo, sans-serif; }
input, select { font-family: inherit; }

.mono { font-family: 'JetBrains Mono', monospace; }
.tnum { font-variant-numeric: tabular-nums; }

@keyframes dropIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- shared controls ---------- */
.btn {
  font: 400 11px/1 Archivo, sans-serif;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  padding: 6px 10px; cursor: pointer;
}
.btn-primary {
  font: 500 12px/1 Archivo, sans-serif;
  color: #fff; background: var(--blue);
  border: 1px solid var(--blue-d);
  padding: 9px 13px; cursor: pointer;
}
.btn-primary:hover { background: var(--blue-hover); }
.btn-primary:disabled { color: #A8A6A1; background: #E7E7E4; border-color: #C2C0BA; cursor: default; }
:root[data-theme="dark"] .btn-primary:disabled { color: #83817A; background: #26282A; border-color: #42443E; }

.input {
  font: 400 13px/1 Archivo, sans-serif;
  color: var(--text); background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding: 10px 11px; outline: none; width: 100%;
}
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28,95,168,.15); }

.field-label { font: 400 11px/1 Archivo, sans-serif; color: var(--text-mute); }
.section-label {
  font: 500 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .16em; color: var(--text-mute);
}

.toast {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: #1A1A18; color: #F1F1EF;
  font: 400 12px/1 Archivo, sans-serif;
  padding: 11px 16px; border: 1px solid #3C3C38;
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
  animation: toastIn .22s ease-out; z-index: 60;
  white-space: nowrap;
}

/* ---------- topbar (dashboard/settings) ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}
.topbar .wordmark { font: 700 13px/1 Archivo, sans-serif; color: var(--text); }
.topbar .spacer { flex: 1; }
.topbar .email { font: 400 11px/1 'JetBrains Mono', monospace; color: var(--text-mute); }

.subbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}
.subbar .title { font: 600 14px/1 Archivo, sans-serif; color: var(--text); }

.page-scroll { flex: 1; overflow: auto; padding: 26px 32px 40px; background: var(--page-bg); position: relative; }

/* ---------- login ---------- */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.login-card {
  width: 340px; max-width: 88vw;
  background: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
}
.login-card .card-title {
  padding: 9px 12px; background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  font: 700 13px/1 Archivo, sans-serif; color: var(--text);
}
.login-card .card-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.login-card .sub { font: 400 13px/1.5 Archivo, sans-serif; color: var(--text-dim); }
.login-card .fields { display: flex; flex-direction: column; gap: 10px; }
.login-card .field { display: flex; flex-direction: column; gap: 5px; }
.login-card .btn-primary { font: 500 13px/1 Archivo, sans-serif; padding: 12px; }
.login-card .foot { font: 400 11px/1.5 Archivo, sans-serif; color: var(--text-mute); text-align: center; }
.login-card .error { font: 400 11px/1.4 Archivo, sans-serif; color: var(--red-text); min-height: 14px; }

/* ---------- dashboard ---------- */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-head .h { font: 600 15px/1 Archivo, sans-serif; color: var(--text); }
.dash-create { display: flex; gap: 8px; flex: 1; min-width: 240px; max-width: 420px; }
.dash-create .input { flex: 1; min-width: 0; padding: 10px 12px; }
.dash-create button { font: 500 12px/1 Archivo, sans-serif; padding: 10px 16px; white-space: nowrap; cursor: pointer; }

.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; margin-top: 22px; }
.gal-card {
  border: 1px solid var(--card-border); background: var(--card-bg);
  display: flex; flex-direction: column; position: relative;
  transition: box-shadow .15s ease;
}
.gal-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.gal-thumbs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 16/9;
  background: #C2C0BA; cursor: pointer; overflow: hidden;
}
:root[data-theme="dark"] .gal-thumbs { background: #35362F; }
.gal-thumbs .cell { background: var(--row-alt); overflow: hidden; }
.gal-thumbs .cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumbs .chip-new {
  position: absolute; top: 8px; left: 8px;
  font: 700 9px/1 'JetBrains Mono', monospace; letter-spacing: .08em;
  color: #fff; background: var(--blue); padding: 4px 6px;
}
.gal-thumbs .chip-count {
  position: absolute; bottom: 8px; right: 8px;
  font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: .04em;
  color: #fff; background: rgba(20,20,18,.6); padding: 4px 6px;
}
.gal-menu-btn {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  border-radius: 999px; background: rgba(20,20,18,.55); border: none;
  color: #fff; font: 700 13px/1 Archivo, sans-serif; cursor: pointer; z-index: 3;
}
.gal-menu-btn:hover { background: rgba(20,20,18,.8); }
.gal-menu {
  position: absolute; top: 36px; right: 8px; width: 130px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: 0 8px 20px rgba(0,0,0,.22); z-index: 5;
  display: flex; flex-direction: column;
}
.gal-menu button {
  text-align: left; font: 400 12px/1 Archivo, sans-serif; color: var(--text);
  background: none; border: none; border-bottom: 1px solid var(--header-border);
  padding: 9px 12px; cursor: pointer;
}
.gal-menu button:hover { background: var(--header-bg); }
.gal-menu button:last-child { border-bottom: none; }
.gal-menu button.danger { color: #A31E16; }
.gal-menu button.danger:hover { background: #FBEBEA; }
.gal-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.gal-body .name { font: 600 14px/1.2 Archivo, sans-serif; color: var(--text); cursor: pointer; text-decoration: none; }
.gal-body .name-input {
  font: 600 14px/1.2 Archivo, sans-serif; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--blue); padding: 5px 6px; outline: none;
}
.gal-body .last { font: 400 11px/1 'JetBrains Mono', monospace; color: var(--text-mute); }
.gal-body .row { display: flex; gap: 6px; padding-top: 4px; }
.gal-body .row .btn { flex: 1; padding: 7px 9px; }
.menu-backdrop { position: fixed; inset: 0; z-index: 4; }

/* ---------- settings ---------- */
.settings-col { max-width: 620px; display: flex; flex-direction: column; gap: 20px; }
.panel { border: 1px solid var(--card-border); background: var(--card-bg); }
.panel-head { padding: 10px 14px; border-bottom: 1px solid var(--header-border); background: var(--header-bg); }
.panel-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; }
.panel-row .t { font: 500 13px/1.3 Archivo, sans-serif; color: var(--text); }
.panel-row .d { font: 400 11px/1.4 Archivo, sans-serif; color: var(--text-mute); }
.panel-row .col { display: flex; flex-direction: column; gap: 3px; }
.shortcut-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--header-border);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-row .k { width: 120px; flex-shrink: 0; font: 500 11px/1 'JetBrains Mono', monospace; color: var(--text); }
.shortcut-row .d { font: 400 12px/1.3 Archivo, sans-serif; color: var(--text-dim); }

.switch { width: 44px; height: 24px; flex-shrink: 0; border-radius: 999px; background: #C2C0BA; position: relative; cursor: pointer; }
.switch.on { background: var(--blue-d); }
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 999px; background: #F1F1EF;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s ease;
}
.switch.on .knob { left: 22px; background: var(--blue); }

/* ---------- camera connections modal ---------- */
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(16,16,15,.45);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.conn-modal {
  width: 990px; max-width: calc(100vw - 48px);
  background: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: 0 18px 44px rgba(0,0,0,.3);
  display: flex; flex-direction: column; max-height: calc(100vh - 60px);
}
.conn-modal .m-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: var(--header-bg); border-bottom: 1px solid var(--header-border);
}
.conn-modal .m-head .t { font: 700 13px/1 Archivo, sans-serif; color: var(--text); }
.conn-modal .m-head .x {
  font: 400 13px/1 Archivo, sans-serif; color: var(--text-dim);
  background: none; border: 1px solid var(--btn-border);
  width: 26px; height: 26px; cursor: pointer;
}
.conn-modal .m-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.conn-explain {
  border: 1px solid var(--header-border); background: var(--header-bg);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 7px;
}
.conn-explain .steps { font: 400 12px/1.7 Archivo, sans-serif; color: var(--text-dim); }
.conn-explain .steps .m { font: 500 11px/1 'JetBrains Mono', monospace; color: var(--text); }
.conn-table { border: 1px solid var(--card-border); background: var(--card-bg); }
.conn-cols { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.2fr 1fr 78px 74px 30px; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--header-border); }
.conn-cols.head {
  padding: 8px 12px; background: var(--header-bg);
  font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .14em; color: var(--text-mute);
}
.conn-cols .label { font: 500 12px/1.3 Archivo, sans-serif; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-cred { display: flex; align-items: center; gap: 6px; min-width: 0; }
.conn-cred .v { flex: 1; font: 400 11px/1 'JetBrains Mono', monospace; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-cred .btn { font-size: 10px; padding: 4px 6px; flex-shrink: 0; }
.conn-edit {
  width: 100%; min-width: 0;
  font: 400 12px/1.2 Archivo, sans-serif; color: var(--text);
  background: transparent; border: 1px solid transparent;
  padding: 5px 6px; outline: none;
}
.conn-edit.mono { font: 400 11px/1.2 'JetBrains Mono', monospace; }
.conn-edit:hover { border-color: var(--btn-border); }
.conn-edit:focus { border-color: var(--blue); background: var(--input-bg); box-shadow: 0 0 0 3px rgba(28,95,168,.15); }
.conn-edit::placeholder { color: var(--text-mute); }
.conn-select {
  font: 400 12px/1.2 Archivo, sans-serif; color: var(--btn-fg);
  background: var(--btn-bg); border: 1px solid var(--btn-border);
  padding: 6px 7px; outline: none; cursor: pointer; width: 100%;
}
.conn-status { display: flex; align-items: center; gap: 6px; }
.conn-status .dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.conn-status .dot.on { background: var(--red); animation: blip 1.1s steps(1,end) infinite; }
.conn-status .dot.off { background: #B0AEA8; }
.conn-status .s { font: 400 11px/1 Archivo, sans-serif; }
.conn-del {
  font: 400 12px/1 Archivo, sans-serif; color: var(--text-mute);
  background: none; border: 1px solid var(--btn-border);
  width: 24px; height: 24px; cursor: pointer;
}
.conn-del:hover { background: #FBEBEA; color: #A31E16; border-color: #D8A9A5; }

/* ---------- workspace ---------- */
.ws-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  flex-wrap: wrap; row-gap: 8px;
}
.ws-toolbar .g-name { font: 600 14px/1 Archivo, sans-serif; color: var(--text); white-space: nowrap; }
.ws-toolbar .g-meta { font: 400 11px/1 'JetBrains Mono', monospace; color: var(--text-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-toolbar .spacer { flex: 1; }
.ws-toolbar .sort-label { font: 400 10px/1 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--text-mute); }
.ws-toolbar select {
  font: 400 11px/1.2 Archivo, sans-serif; color: var(--btn-fg);
  background: var(--btn-bg); border: 1px solid var(--btn-border);
  padding: 6px 7px; outline: none; cursor: pointer;
}
.ws-toolbar select:focus { border-color: var(--blue); }
.ws-toolbar .vdiv { width: 1px; height: 20px; background: var(--header-border); }
.seg { display: flex; }
.seg button {
  font: 400 11px/1 Archivo, sans-serif; min-width: 30px; height: 27px;
  margin-left: -1px; cursor: pointer;
  border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg);
}
.seg button.on { border-color: var(--blue-d); background: var(--blue); color: #fff; position: relative; }
.tglbtn { font: 400 11px/1 Archivo, sans-serif; padding: 6px 10px; cursor: pointer; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); white-space: nowrap; }
.tglbtn.on { border-color: var(--blue-d); background: var(--blue); color: #fff; }
.ws-toolbar .favbtn { font: 400 12px/1 Archivo, sans-serif; padding: 6px 11px; cursor: pointer; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); white-space: nowrap; }
.ws-toolbar .favbtn.on { background: var(--red-bg); color: var(--red-text); border-color: var(--red-border); }
.ws-toolbar .dl { font: 400 12px/1 Archivo, sans-serif; padding: 6px 11px; cursor: pointer; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); white-space: nowrap; }
.ws-toolbar .dl-sel { font: 500 12px/1 Archivo, sans-serif; padding: 6px 11px; cursor: pointer; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text-mute); white-space: nowrap; }
.ws-toolbar .dl-sel.on { color: #fff; background: var(--blue); border-color: var(--blue-d); }

.ws-main { flex: 1; display: flex; min-height: 0; position: relative; }
.ws-backdrop { position: absolute; inset: 0; background: rgba(16,16,15,.4); z-index: 29; }

.sidebar {
  width: 218px; flex-shrink: 0; background: var(--sidebar-bg);
  border-right: 1px solid var(--header-border);
  display: flex; flex-direction: column; overflow: auto;
}
.sidebar.drawer { position: absolute; top: 0; bottom: 0; left: 0; z-index: 30; box-shadow: 4px 0 18px rgba(0,0,0,.22); }
.sidebar .tabs { display: flex; border-bottom: 1px solid var(--header-border); flex-shrink: 0; }
.sidebar .tabs button {
  flex: 1; font: 400 11px/1 Archivo, sans-serif; padding: 10px;
  cursor: pointer; border: none; background: transparent; color: var(--text-mute);
}
.sidebar .tabs button.on { font-weight: 600; background: var(--grid-bg); color: var(--text); }
.sidebar .tabs button + button { border-left: 1px solid var(--header-border); }
.sidebar .tabs .collapse {
  flex: 0 0 30px; font: 400 12px/1 Archivo, sans-serif; color: var(--text-dim);
  border-left: 1px solid var(--header-border);
}
.sidebar .tabs .close { flex: 0 0 34px; font: 400 12px/1 Archivo, sans-serif; color: var(--text-dim); border-left: 1px solid var(--header-border); }
.sidebar .pane { padding: 14px 0; display: flex; flex-direction: column; gap: 16px; }
.sidebar .group { display: flex; flex-direction: column; gap: 2px; }
.sidebar .group .glabel { font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: .14em; color: var(--text-mute); padding: 0 12px 7px; }
.f-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; }
.f-row .box {
  width: 13px; height: 13px; border: 1px solid var(--check-border-off);
  background: var(--input-bg); display: flex; align-items: center; justify-content: center;
  font: 700 9px/1 Archivo, sans-serif; color: #fff; flex-shrink: 0;
}
.f-row .box.on { background: var(--blue); border-color: var(--blue-d); }
.f-row .dot13 { width: 13px; height: 13px; border-radius: 999px; border: 1px solid var(--check-border-off); background: var(--input-bg); flex-shrink: 0; }
.f-row .dot13.on { background: var(--blue); border-color: var(--blue-d); }
.f-row .l { flex: 1; font: 400 12px/1.2 Archivo, sans-serif; color: var(--text); }
.f-row .n { font: 400 11px/1 'JetBrains Mono', monospace; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.tree-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
.tree-row .l { flex: 1; font: 400 12px/1.2 Archivo, sans-serif; color: #2E2C28; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .tree-row .l { color: #ADAAA1; }
.tree-row .chip { font: 700 9px/1 'JetBrains Mono', monospace; letter-spacing: .06em; color: #fff; background: var(--blue); padding: 3px 5px; flex-shrink: 0; }
.tree-row .n { font: 400 11px/1 'JetBrains Mono', monospace; color: #8A8880; font-variant-numeric: tabular-nums; }
.tree-row.cur { background: var(--blue); }
.tree-row.cur .l { color: #fff; }
.tree-row.cur .n { color: rgba(255,255,255,.8); }
.tree-row.cur .chip { background: #fff; color: var(--blue-d); }

.rail {
  width: 26px; flex-shrink: 0; background: var(--sidebar-bg);
  border-right: 1px solid var(--header-border);
  display: flex; flex-direction: column; align-items: center; padding-top: 8px;
}
.rail button { font: 400 12px/1 Archivo, sans-serif; color: var(--text-dim); background: transparent; border: none; cursor: pointer; padding: 6px 0; width: 100%; }

.ws-grid {
  flex: 1; overflow: auto; padding: 12px;
  display: grid; gap: 10px; align-content: start;
  background: var(--grid-bg); min-width: 0;
}
.ws-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; text-align: center; }
.ws-empty .t { font: 500 13px/1.4 Archivo, sans-serif; color: #6E6C66; }
.ws-empty button { font: 400 12px/1 Archivo, sans-serif; color: var(--blue-d); background: var(--blue-tint); border: 1px solid var(--blue); padding: 8px 12px; cursor: pointer; }

/* min-width: 0 lets tiles shrink to their grid column — otherwise long
   filenames force columns wide and the whole grid scrolls sideways. */
.tile { display: flex; flex-direction: column; cursor: pointer; padding: 4px; background: var(--card-bg); border: 1px solid var(--card-border); min-width: 0; }
.tile:hover { box-shadow: 0 3px 10px rgba(0,0,0,.16); }
.tile.dropin { animation: dropIn .55s cubic-bezier(.2,.85,.2,1); }
.tile .ph { position: relative; aspect-ratio: 3/2; background: var(--row-alt); overflow: hidden; }
/* contain, not cover: verticals show the full frame (letterboxed) — a culling
   tool must never hide part of the image. */
.tile .ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tag-new {
  position: absolute; top: 0; left: 0;
  font: 700 9px/1 'JetBrains Mono', monospace; letter-spacing: .1em;
  background: var(--red); color: #fff; padding: 3px 4px; z-index: 2;
  /* Fades itself out; delay set inline per-tile. No re-render, no flash. */
  animation: fadeTag .6s ease forwards;
  animation-delay: 4s;
}
@keyframes fadeTag { to { opacity: 0; visibility: hidden; } }
.tag-edited {
  position: absolute; top: 0; left: 0;
  font: 700 9px/1 'JetBrains Mono', monospace; letter-spacing: .1em;
  background: var(--blue); color: #fff; padding: 3px 4px; z-index: 2;
}
.tile .check {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: 1px solid var(--check-border-off); background: rgba(255,255,255,.88);
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 Archivo, sans-serif; color: #fff; cursor: pointer; z-index: 2;
}
.tile .check:hover { border-color: var(--blue); }
.tile .check.on { background: var(--blue); border-color: var(--blue-d); }
.tile .mini {
  position: absolute; width: 22px; height: 22px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
  font: 400 12px/1 Archivo, sans-serif; color: #4E4C46; cursor: pointer; z-index: 2;
}
.tile .mini.dl { bottom: 4px; left: 4px; }
.tile .mini.dl:hover { background: #fff; }
.tile .mini.dl.on { background: #3E9B62; border-color: #2F7A4D; color: #fff; }
.tile .mini.dl.on:hover { background: #358554; }
.tile .mini.heart { bottom: 4px; right: 4px; color: var(--heart-off); }
.tile .mini.heart.on { color: var(--red); }
.tile .cap1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 2px 1px; }
.tile .cap1 .f { flex: 1; min-width: 0; font: 400 10px/1 'JetBrains Mono', monospace; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .cap1 .t { font: 400 9px/1 'JetBrains Mono', monospace; color: var(--text-mute); flex-shrink: 0; }
.tile .cap2 { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 2px; }
.tile .cap2 .s { font: 400 10px/1 Archivo, sans-serif; color: var(--text-mute); }
.tile .cap2 .z { font: 400 9px/1 'JetBrains Mono', monospace; color: var(--text-mute); }

.ws-status {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 6px;
  padding: 6px 14px; background: var(--header-bg);
  border-top: 1px solid var(--header-border);
  font: 400 11px/1 'JetBrains Mono', monospace; color: var(--text-dim);
}
.ws-status .vdiv { width: 1px; height: 14px; background: #C2C0BA; }
:root[data-theme="dark"] .ws-status .vdiv { background: #42443E; }
.ws-status .spacer { flex: 1; }
.ws-status .dl-sel-sm { font: 400 11px/1 Archivo, sans-serif; color: var(--blue-d); background: var(--blue-tint); border: 1px solid var(--blue); padding: 4px 8px; cursor: pointer; }
.ws-status .clear { font: 400 11px/1 Archivo, sans-serif; color: var(--text-dim); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; }
.ws-status .del-sel-sm { font: 400 11px/1 Archivo, sans-serif; color: #A31E16; background: #FBEBEA; border: 1px solid #D8A9A5; padding: 4px 8px; cursor: pointer; }
.ws-status .del-sel-sm:hover { background: #F5D9D6; }

.tag-suspect {
  position: absolute; top: 0; left: 0;
  font: 700 9px/1 'JetBrains Mono', monospace; letter-spacing: .1em;
  background: #C78A1E; color: #fff; padding: 3px 4px; z-index: 2;
}

/* ---------- lightbox ---------- */
.lightbox { position: absolute; inset: 0; background: rgba(16,16,15,.94); display: flex; flex-direction: column; z-index: 40; }
.lb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; row-gap: 6px; padding: 10px 16px; border-bottom: 1px solid #33332F;
}
.lb-head .id { font: 400 11px/1 'JetBrains Mono', monospace; letter-spacing: .08em; color: #C8C6C1; white-space: nowrap; }
.lb-head .right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-head .meta { font: 400 10px/1 'JetBrains Mono', monospace; color: #8A8880; letter-spacing: .06em; }
.lb-stars { display: flex; gap: 2px; margin: 0 6px; }
.lb-stars span { font: 400 16px/1 Archivo, sans-serif; color: var(--star-off); cursor: pointer; }
.lb-stars span.on { color: var(--star-on); }
.lb-fav { font: 400 11px/1 Archivo, sans-serif; color: #C8C6C1; background: transparent; border: 1px solid #4A4A46; padding: 7px 11px; cursor: pointer; }
.lb-fav.on { color: #E86A62; background: #FBEBEA; border-color: #A85450; }
.lb-dl { font: 500 11px/1 Archivo, sans-serif; color: #1A1A18; background: #E6E4DC; border: 1px solid #E6E4DC; padding: 7px 11px; cursor: pointer; }
.lb-dl:hover { background: #fff; }
.lb-x { font: 400 14px/1 Archivo, sans-serif; color: #C8C6C1; background: none; border: 1px solid #4A4A46; width: 30px; height: 30px; cursor: pointer; }
.lb-x:hover { background: #33332F; }
.lb-body { flex: 1; display: flex; align-items: center; padding: 20px; gap: 16px; min-height: 0; }
.lb-nav { font: 400 20px/1 Archivo, sans-serif; color: #C8C6C1; background: #232322; border: 1px solid #3C3C38; width: 40px; height: 70px; cursor: pointer; flex-shrink: 0; }
.lb-nav:hover { background: #2E2E2C; }
.lb-img { flex: 1; height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.lb-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-film { display: flex; gap: 4px; padding: 10px 16px; border-top: 1px solid #33332F; overflow: hidden; justify-content: center; }
.lb-film .fr { width: 68px; height: 45px; flex-shrink: 0; cursor: pointer; outline: 1px solid rgba(0,0,0,.4); outline-offset: -1px; opacity: .55; background: #2A2A28; overflow: hidden; }
.lb-film .fr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-film .fr.cur { outline: 2px solid #E6E4DC; opacity: 1; }

/* ---------- client gallery ---------- */
.client-page { background: #F1F1EF; color: #1A1A18; }
.preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; background: #DCE7F4; border-bottom: 1px solid #A9C2DE;
}
.preview-bar .t { font: 500 11px/1 Archivo, sans-serif; color: #0F3E70; }
.preview-bar .spacer { flex: 1; }
.preview-bar button { font: 400 11px/1 Archivo, sans-serif; color: #0F3E70; background: #fff; border: 1px solid #1C5FA8; padding: 5px 9px; cursor: pointer; }
.client-head {
  padding: 22px 32px; border-bottom: 1px solid #C2C0BA;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.client-head .col { display: flex; flex-direction: column; gap: 6px; }
.client-head h1 { font: 700 22px/1.1 Archivo, sans-serif; color: #1A1A18; }
.client-head .meta { font: 400 12px/1 'JetBrains Mono', monospace; color: #6E6C66; font-variant-numeric: tabular-nums; }
.client-head .spacer { flex: 1; }
.client-head .fav-toggle { font: 400 13px/1 Archivo, sans-serif; color: #1A1A18; background: transparent; border: 1px solid #A9A7A1; padding: 10px 14px; cursor: pointer; }
.client-head .fav-toggle.on { color: #A31E16; background: #FBEBEA; border-color: #D8A9A5; }
.client-head .dl-all { font: 400 13px/1 Archivo, sans-serif; color: #232320; background: #F6F6F4; border: 1px solid #A9A7A1; padding: 10px 14px; cursor: pointer; }
.client-head .dl-all:hover { background: #fff; }
.client-head .dl-favs { font: 500 13px/1 Archivo, sans-serif; color: #fff; background: #1C5FA8; border: 1px solid #14477E; padding: 10px 14px; cursor: pointer; }
.client-head .dl-favs:hover { background: #17518F; }
.client-scroll { flex: 1; overflow: auto; padding: 24px 32px 40px; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.client-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; text-align: center; }
.client-empty .t { font: 500 13px/1.4 Archivo, sans-serif; color: #6E6C66; }
.ctile { position: relative; aspect-ratio: 3/2; background: #E4E4E1; cursor: pointer; overflow: hidden; min-width: 0; }
.ctile:hover { filter: brightness(1.05); }
.ctile.dropin { animation: dropIn .55s cubic-bezier(.2,.85,.2,1); }
.ctile img { width: 100%; height: 100%; object-fit: contain; display: block; background: #1A1A18; }
.ctile .tag-new { padding: 4px 5px; }
.ctile .mini {
  position: absolute; width: 32px; height: 32px;
  background: rgba(255,255,255,.92); border: none;
  display: flex; align-items: center; justify-content: center;
  font: 400 15px/1 Archivo, sans-serif; color: #4E4C46; cursor: pointer; z-index: 2;
}
.ctile .mini.dl { bottom: 8px; left: 8px; }
.ctile .mini.dl.on { background: #3E9B62; color: #fff; }
.ctile .mini.heart { bottom: 8px; right: 8px; color: rgba(20,20,18,.28); }
.ctile .mini.heart.on { color: #C4241B; }

/* client lightbox */
.clb-head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #33332F; }
.clb-head .id { font: 400 11px/1 'JetBrains Mono', monospace; letter-spacing: .08em; color: #C8C6C1; margin-right: auto; }
.clb-fav { font: 400 12px/1 Archivo, sans-serif; color: #4E4C46; background: transparent; border: 1px solid #A9A7A1; padding: 8px 12px; cursor: pointer; color: #C8C6C1; border-color: #4A4A46; }
.clb-fav.on { color: #A31E16; background: #FBEBEA; border-color: #D8A9A5; }
.clb-dl { font: 500 12px/1 Archivo, sans-serif; color: #1A1A18; background: #E6E4DC; border: 1px solid #E6E4DC; padding: 8px 12px; cursor: pointer; }
.clb-dl:hover { background: #fff; }
.clb-x { font: 400 14px/1 Archivo, sans-serif; color: #C8C6C1; background: none; border: 1px solid #4A4A46; width: 32px; height: 32px; cursor: pointer; }
.clb-x:hover { background: #33332F; }
.clb-body { flex: 1; display: flex; align-items: center; padding: 24px; gap: 18px; min-height: 0; }
.clb-nav { font: 400 22px/1 Archivo, sans-serif; color: #C8C6C1; background: #232322; border: 1px solid #3C3C38; width: 44px; height: 76px; cursor: pointer; flex-shrink: 0; }
.clb-nav:hover { background: #2E2E2C; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .page-scroll { padding: 18px 14px 32px; }
  .client-head { padding: 16px 14px; }
  .client-scroll { padding: 14px 14px 32px; }
  .client-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .client-head .fav-toggle, .client-head .dl-all, .client-head .dl-favs { flex: 1 1 100%; min-height: 44px; }
  .lb-nav, .clb-nav { display: none; }
  .gal-grid { grid-template-columns: 1fr; }

  /* Topbar must never push controls off-screen. */
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .topbar .email { display: none; }
  .subbar { flex-wrap: wrap; row-gap: 8px; }

  /* Finger-sized touch targets on tiles. */
  .tile .check { width: 36px; height: 36px; font-size: 18px; }
  .tile .mini { width: 36px; height: 36px; }
  .tile .mini svg, .tile .check svg { transform: scale(1.25); }
  .ctile .mini { width: 44px; height: 44px; }

  /* Mobile toolbar: structured grid instead of ragged wrapping.
     Row 1: back + title · Row 2: meta · Then buttons two-up, equal width. */
  .ws-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; align-items: center; }
  .ws-toolbar .spacer, .ws-toolbar .vdiv { display: none; }
  .ws-toolbar > .btn:first-child { grid-column: 1; justify-self: start; }
  .ws-toolbar .g-name { grid-column: 2; font-size: 16px; text-align: right; overflow: hidden; text-overflow: ellipsis; }
  .ws-toolbar .g-meta { grid-column: 1 / -1; white-space: normal; }
  .ws-toolbar .btn, .ws-toolbar .tglbtn, .ws-toolbar .favbtn, .ws-toolbar .dl, .ws-toolbar .dl-sel {
    width: 100%; padding: 12px 8px; text-align: center; justify-content: center; min-height: 44px;
  }
  .ws-toolbar > .btn:first-child { width: auto; padding: 10px 14px; }
}