:root {
  --ink: #09080B;
  --panel: #121014;
  --raised: #1C1820;
  --line-strong: #322B38;
  --paper: #F4EFF4;
  --muted: #9C92A4;
  --pink: #FF2E88;        /* groups / primary */
  --pink-hot: #FF0F77;
  --pink-soft: #FF6FB1;
  --pink-dim: #FF2E8821;
  --violet: #B794F6;      /* tags */
  --violet-dim: #B794F61F;
  --yellow: #FFE14D;      /* library */
  --blue:   #5B8CFF;      /* groups */
  --blue-dim: #5B8CFF1F; 
  --green:  #4DF08C;      /* faces */
  --orange: #FFA03D;      /* export */
  --girl: #FF2E88;        /* was #4DD9F0 */
  --girl-dim: #FF2E8821;  /* was #4DD9F01F */
  --danger: #FF5C5C;
  --disp: "Big Shoulders Display", sans-serif;
  --body: "Archivo", sans-serif;
  --mono: "Space Mono", monospace;
  --thumb-min: 250px;     /* Normal default (== ad width, so in-feed ads never clip); Large=320 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 14px; line-height: 1.5; }
button { font-family: var(--body); cursor: pointer; }
input, select { font-family: var(--body); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 2px; }

/* ---------- header ---------- */
header { position: sticky; top: 0; z-index: 40; background: var(--panel); border-bottom: 1px solid var(--line-strong); }
.sprockets { height: 12px; background: repeating-linear-gradient(90deg, transparent 0 14px, var(--ink) 14px 26px, transparent 26px 40px); background-color: #040305; }
.glowline { height: 2px; background: linear-gradient(90deg, var(--pink-hot), var(--pink-soft) 50%, var(--pink-hot)); box-shadow: 0 0 14px #FF0F7788; }
.hbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 13px; line-height: 1; }
.brand .logo { width: 42px; height: 42px; flex-shrink: 0; filter: drop-shadow(0 0 10px #FF0F7766); }
.brand .words { display: flex; flex-direction: column; }
.brand h1 { font-family: var(--disp); font-weight: 900; font-size: 30px; letter-spacing: .04em; text-transform: uppercase; transform: skewX(-6deg); color: var(--pink); text-shadow: 0 0 18px #FF0F7755; }
.brand h1 em { font-style: normal; color: var(--paper); text-shadow: none; }
.brand small { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: .26em; text-transform: uppercase; margin-top: 4px; }
.hbar .spacer { flex: 1; }
.count { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.count b { color: var(--paper); }
.btn { background: var(--raised); color: var(--paper); border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 14px; font-size: 13px; font-weight: 500; transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--pink); }
.btn.primary { background: var(--pink); color: #220011; border-color: transparent; font-weight: 700; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.btn.primary:hover { background: var(--pink-soft); }
.btn.girl { background: var(--girl); color: #220011; border-color: transparent; font-weight: 700; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.btn.girl:hover { filter: brightness(1.12); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12px; }

/* ---------- layout ---------- */
.layout { display: flex; min-height: calc(100vh - 80px); position: relative; }
aside.sidebar { width: 250px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line-strong); padding: 18px 14px 90px; position: sticky; top: 80px; align-self: flex-start; max-height: calc(100vh - 80px); overflow-y: auto; }
main { flex: 1; padding: 18px 40px 110px; min-width: 0; }

.side-section { margin-bottom: 24px; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.side-head h2 { font-family: var(--disp); font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transform: skewX(-6deg); }
.side-head h2.g { color: var(--blue); }
.side-head h2.t { color: var(--violet); }
.side-head h2.n { color: var(--girl); }
.side-head .hint { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.side-list { display: flex; flex-direction: column; gap: 4px; }
.side-row { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 6px 8px; color: var(--paper); text-align: left; font-size: 13px; transition: background .12s; }
.side-row:hover { background: var(--raised); }
.side-row .dot { width: 8px; height: 8px; flex-shrink: 0; }
.side-row.group .dot { background: var(--blue); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.side-row.unsorted .dot { background: transparent; border: 1.5px dashed var(--blue); }
.side-row.unsorted.gu .dot { border-color: var(--girl); }
.side-row.tag .dot { background: var(--violet); border-radius: 50%; }
.side-row.girl .dot { background: var(--girl); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.side-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-row.unsorted .nm { font-style: italic; color: var(--muted); }
.side-row.unsorted.active .nm { color: var(--paper); }
.side-row .ct { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.side-row .del { visibility: hidden; color: var(--muted); background: none; border: none; font-size: 14px; line-height: 1; padding: 0 2px; }
.side-row:hover .del { visibility: visible; }
.side-row .del:hover { color: var(--danger); }
.side-row.active.group, .side-row.active.unsorted { background: var(--blue-dim); border-color: var(--blue); }
.side-row.active.unsorted.gu { background: var(--girl-dim); border-color: var(--girl); }
.side-row.active.tag { background: var(--violet-dim); border-color: var(--violet); }
.side-row.active.girl { background: var(--girl-dim); border-color: var(--girl); }
.newrow { display: flex; gap: 6px; margin-top: 8px; }
.newrow input { flex: 1; min-width: 0; background: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--paper); padding: 6px 8px; font-size: 13px; }
.newrow input::placeholder { color: #6C6275; }
.sideopts { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 10px; }
.sideopts label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.sideopts input[type=checkbox] { accent-color: var(--pink); }
.none { font-size: 12px; color: #6C6275; font-style: italic; padding: 2px 8px; }
.sbox { position: relative; margin-top: 8px; }
.sbox input { width: 100%; background: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--paper); padding: 6px 8px; font-size: 13px; }
.sbox input::placeholder { color: #6C6275; }
.sugg { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

/* ---------- view tabs ---------- */
.tabs { display: flex; gap: 2px; padding: 0 20px; background: var(--panel); }
.tabs button { background: transparent; border: none; border-bottom: 3px solid transparent; color: var(--muted); font-family: var(--disp); font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: skewX(-6deg); padding: 7px 14px 8px; }
.tabs button:hover { color: var(--paper); }
.tabs button.active { color: var(--yellow); border-bottom-color: var(--yellow); }
.tabs button.active[data-view=girls] { color: var(--pink); border-bottom-color: var(--pink); }
.tabs button.active[data-view=groups] { color: var(--blue); border-bottom-color: var(--blue); }
.tabs button.active[data-view=tags] { color: var(--violet); border-bottom-color: var(--violet); }
.tabs button.active[data-view=faces] { color: var(--green); border-bottom-color: var(--green); }
.tabs button.active[data-view=export] { color: var(--orange); border-bottom-color: var(--orange); }

/* ---------- collection pages (Girls / Groups / Tags tabs) ---------- */
.collgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}
.ccard {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.ccard::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.ccard .cthumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #050406;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}
.ccard .cthumb img, .ccard .cthumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ccard .cempty {
  font-family: var(--disp);
  font-size: 54px;
  font-weight: 800;
  color: var(--line-strong);
}
.ccard .cmeta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px 10px; 
  background: linear-gradient(to top, rgba(9,8,11,0.95) 0%, rgba(9,8,11,0.5) 60%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}
.ccard .cmeta .cn {
  font-family: var(--disp);
  font-size: 26px; 
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase; 
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,0.95);
}
.ccard.girl .cn { color: var(--girl); } 
.ccard.group .cn { color: var(--blue); } 
.ccard.tagc .cn { color: var(--violet); }

.ccard .count-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(9, 8, 11, 0.85);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  z-index: 3;
  pointer-events: none;
}
.ccard .cdel {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #000A;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transition: opacity .12s;
  z-index: 4;
}
.ccard:hover .cdel { opacity: 1; }
.ccard .cdel:hover { color: var(--danger); border-color: var(--danger); }
.ccard.newc { border-style: dashed; background: transparent; }
.ccard.newc .plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--disp);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 2;
  white-space: nowrap;
}.ccard.newc:hover .plus { color: var(--pink); }

/* ---------- Library View Grid Cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min), 1fr));
  gap: 14px;
  align-items: start !important; 
}

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .15s;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important; 
}

/* The properties metadata bar sits natively below the thumbnail boundaries */
.card .meta {
  display: block !important;
  padding: 8px; 
  background: var(--panel);
  
  /* Fixed, unyielding height anchor. No stretching or collapsing allowed. */
  height: 38px !important; 
  flex-grow: 0 !important;   
  flex-shrink: 0 !important; 
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.card .meta .fname {
  display: none !important; 
}

/* Enforced true square 1:1 format container layer */
.card .thumb {
  position: relative !important;
  width: 100% !important;
  background: #050406;
  cursor: pointer;
  border: none !important;
  padding: 0 !important;
  
  /* CRITICAL ASPECT FIX: Changes the container into a strict block element */
  display: block !important;
  overflow: hidden !important;
  flex-shrink: 0 !important; 
}

/* This creates a hard, hardware-locked 1:1 box frame that can never be stretched by video clips */
.card .thumb::before {
  content: "";
  display: block !important;
  padding-top: 100% !important; /* Guarantees a flawless, unmovable square image shape */
}

/* Lock BOTH images and videos absolutely to the 100% dimensions of the square thumb container */
.card .thumb img, 
.card .thumb video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Center-crops media to fill the square without stretching */
  display: block !important;
  vertical-align: top !important; 
}

/* Cinematic name overlays flush to the baseline of the asset thumbnail square */
.card .thumb .cmeta {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 12px 10px !important;
  background: linear-gradient(to top, rgba(9,8,11,0.95) 0%, rgba(9,8,11,0.5) 60%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 2; 
}

.card .thumb .cmeta .cn {
  font-family: var(--disp);
  font-size: 22px; 
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.95);
  color: var(--pink);
}

/* Video badge — absolutely positioned so it overlays the square
   instead of adding a line of height below it */
.badge-video {
  position: absolute;
  top: 8px;
  left: 38px; /* sits next to the select checkbox */
  z-index: 3;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--paper);
  background: rgba(9, 8, 11, .85);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 2px 6px;
  pointer-events: none;
}

/* Floating control buttons absolute top layer layout rules */
.ckbox {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1.5px solid #FFFFFFAA;
  background: #0008;
  color: transparent;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s;
  z-index: 5 !important; 
}
.card:hover .ckbox, .card.selected .ckbox, body.has-selection .ckbox {
  opacity: 1;
}
.card.selected .ckbox {
  background: var(--pink);
  border-color: var(--pink);
  color: #220011;
}

.thumbstar {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1.5px solid #FFFFFFAA;
  background: #0008;
  color: #FFFFFFCC;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s;
  z-index: 5 !important; 
}
.card:hover .thumbstar, .thumbstar.on {
  opacity: 1;
}
.thumbstar:hover {
  border-color: var(--girl);
  color: var(--girl);
}
.thumbstar.on {
  background: var(--girl);
  border-color: var(--girl);
  color: #220011;
}
/* ---------- girl detail head ---------- */
.gpage-head { display: none; align-items: center; gap: 16px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; padding: 14px 16px; position: relative; overflow: hidden; }
.gpage-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--girl), transparent); }
.gpage-back { background: var(--raised); border: 1px solid var(--line-strong); color: var(--paper); width: 38px; height: 38px; border-radius: 50%; font-size: 21px; line-height: 1; flex-shrink: 0; }
.gpage-back:hover { border-color: var(--girl); color: var(--girl); }
.gpage-hero { width: 86px; height: 86px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #050406; border: 1px solid color-mix(in srgb, var(--girl) 35%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--girl) 15%, transparent); }
.gpage-hero img, .gpage-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gpage-hero .cempty { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--disp); font-size: 34px; font-weight: 800; color: var(--line-strong); }
.gpage-hero:hover { border-color: var(--girl); }
.gpage-name { min-width: 0; }
.gpage-name h2 { font-family: var(--disp); font-size: 30px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; transform: skewX(-6deg); color: var(--girl); text-shadow: 0 0 16px color-mix(in srgb, var(--girl) 28%, transparent); }
.gpage-name .sub { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; margin-top: 5px; }
.chip .star { background: none; border: none; color: inherit; opacity: .5; font-size: 12px; line-height: 1; padding: 0; }
.chip .star:hover, .chip .star.on { opacity: 1; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; min-height: 34px; }
.filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.toolbar .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.controls { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.controls select { background: var(--raised); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--paper); padding: 6px 10px; font-size: 12.5px; }
.sizeseg { display: flex; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; }
.sizeseg button { background: var(--raised); color: var(--muted); border: none; padding: 6px 11px; font-size: 12px; font-weight: 600; font-family: var(--mono); }
.sizeseg button + button { border-left: 1px solid var(--line-strong); }
.sizeseg button.active { background: var(--pink); color: #220011; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 500; border: 1px solid; }
.chip.g { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); }
.chip.t { background: var(--violet-dim); border-color: var(--violet); color: var(--violet); }
.chip.n { background: var(--girl-dim); border-color: var(--girl); color: var(--girl); }
.chip button { background: none; border: none; color: inherit; font-size: 13px; line-height: 1; padding: 0; }
.chip button:hover { color: var(--paper); }

/* ---------- grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min), 1fr)); gap: 14px; }
.card:hover { border-color: #5A4F64; }
.card.selected { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 16px #FF0F7744; }
.mchips { display: flex; flex-wrap: wrap; gap: 4px; min-height: auto; }
.mchip { font-size: 10.5px; font-family: var(--mono); padding: 1px 7px; border-radius: 99px; border: 1px solid; }
.mchip.g { color: var(--blue); border-color: #FF2E8866; }
.mchip.t { color: var(--violet); border-color: #B794F666; }

/* Library view girl chip formatting rules */
.mchip.n {
  text-transform: uppercase;
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 11px;
  padding: 2px 9px 1px;
  border-radius: 4px;
  color: var(--girl);
  border-color: #4DD9F066;
  display: none !important; 
}

/* ---------- empty / drop ---------- */
.empty { border: 2px dashed var(--line-strong); border-radius: 10px; padding: 70px 30px; text-align: center; color: var(--muted); }
.empty h3 { font-family: var(--disp); font-size: 26px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); margin-bottom: 8px; transform: skewX(-6deg); }
.empty p { max-width: 460px; margin: 0 auto 18px; }
body.dragging main { outline: 2px dashed var(--pink); outline-offset: -6px; border-radius: 10px; }

/* ---------- bulk bar ---------- */
.bulkbar {
  position: fixed; left: 50%; bottom: 18px;            /* was: top: 104px */
  transform: translateX(-50%) translateY(14px);        /* was: translateY(-14px) */
  opacity: 0; pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  background: var(--raised);
  border: 1px solid var(--pink);
  border-radius: 10px;
  box-shadow: 0 16px 44px #000E, 0 0 34px #FF0F7733;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  z-index: 60; max-width: min(96vw, 1100px);
}
.bulkbar::before {
  content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink-hot), var(--pink-soft), var(--pink-hot), transparent);
}
body.has-selection .bulkbar { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.bulkbar .nsel {
  font-family: var(--disp); font-size: 19px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; transform: skewX(-6deg);
  color: var(--pink); white-space: nowrap;
}
.bulkbar select, .bulkbar input {
  background: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--paper); padding: 10px 12px; font-size: 14px;
}
.bulkbar input { width: 150px; }
.bulkbar input::placeholder { color: #6C6275; }
.bulkbar select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%235B8CFF" stroke-width="1.8" fill="none"/></svg>');
  background-repeat: no-repeat; background-position: right 11px center;
}
.bulkbar select:hover { border-color: var(--blue); }
.bulkbar select.girlsel {
  border-color: #FF2E8866;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%23FF6FB1" stroke-width="1.8" fill="none"/></svg>');
}
.bulkbar select.girlsel:hover { border-color: var(--girl); }
.bulkbar .btn.small { padding: 9px 14px; font-size: 13px; }
.bulkbar .sep { width: 1px; height: 28px; background: var(--line-strong); }

/* ---------- dialogs ---------- */
.dlg-overlay { position: fixed; inset: 0; background: #050406DD; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dlg { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 20px 60px #000E, 0 0 30px #FF0F7722; max-width: 440px; width: 100%; overflow: hidden; }
.dlg .dlg-glow { height: 2px; background: linear-gradient(90deg, var(--pink-hot), var(--pink-soft) 50%, var(--pink-hot)); }
.dlg h3 { font-family: var(--disp); font-size: 19px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transform: skewX(-6deg); color: var(--paper); padding: 16px 18px 0; }
.dlg .dlg-body { padding: 10px 18px 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.dlg .dlg-body input { width: 100%; margin-top: 2px; background: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--paper); padding: 8px 10px; font-size: 14px; }
.dlg .dlg-body input::placeholder { color: #6C6275; }
.dlg .dlg-opts { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 0; }
.dlg .dlg-opts .btn { text-align: left; }
.dlg .dlg-opts .btn:hover { border-color: var(--girl); }
.dlg .dlg-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 18px 18px; }
.dlg .btn.danger { background: var(--danger); color: #2A0606; border-color: transparent; font-weight: 700; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.dlg .btn.danger:hover { filter: brightness(1.12); }

.thumbstar { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 4px; border: 1.5px solid #FFFFFFAA; background: #0008; color: #FFFFFFCC; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; z-index: 2; }
.card:hover .thumbstar, .thumbstar.on { opacity: 1; }
.thumbstar:hover { border-color: var(--girl); color: var(--girl); }
.thumbstar.on { background: var(--girl); border-color: var(--girl); color: #03191E; }

/* ---------- lightbox modal ---------- */
.modal { position: fixed; inset: 0; background: #050406F6; z-index: 100; display: none; }
.modal.open { display: flex; justify-content: center; }
.lb-main { flex: 0 1 1240px; display: flex; flex-direction: column; min-width: 0; position: relative; }
.lb-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.lb-top .fname { font-family: var(--mono); font-size: 13px; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 64px 18px; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: #0009; border: 1px solid var(--line-strong); color: var(--paper); font-size: 22px; width: 44px; height: 44px; border-radius: 50%; z-index: 5; }
.lb-nav:hover { border-color: var(--pink); }
.lb-nav.prev { left: 14px; } .lb-nav.next { right: 14px; }
.lb-side { width: 300px; flex-shrink: 0; background: var(--panel); border-left: 1px solid var(--line-strong); padding: 18px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.lb-side h3 { font-family: var(--disp); font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transform: skewX(-6deg); }
.lb-side h3.g { color: var(--blue); }
.lb-side h3.t { color: var(--violet); }
.lb-side h3.n { color: var(--girl); }
.lb-side .sect { display: flex; flex-direction: column; gap: 8px; }
.lb-side .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-side select, .lb-side input { width: 100%; background: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--paper); padding: 7px 9px; font-size: 13px; }
.lb-side input::placeholder { color: #6C6275; }
.lb-info { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.7; border-bottom: 1px solid var(--line-strong); padding-bottom: 14px; }
.lb-info b { color: var(--paper); font-weight: 400; }
.lb-side .grow { flex: 1; }

@media (max-width: 860px) {
  .modal.open { flex-direction: column; }
  .lb-main { flex: 1; }
  .lb-side { width: 100%; border-left: none; border-top: 1px solid var(--line-strong); max-height: 45vh; }
  .lb-stage { padding: 0 8px 8px; }
}
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  aside.sidebar { width: 100%; position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- export tab ---------- */
.tabs button.active[data-view=export] { color: var(--girl); border-bottom-color: var(--girl); }
.exportpanel { max-width: 620px; }
.exp-card { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.exp-card h3 { font-family: var(--disp); font-size: 22px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; transform: skewX(-6deg); color: var(--orange); }
.exp-blurb { color: var(--muted); font-size: 13px; }
.exp-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.exp-field input { background: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--paper); padding: 8px 10px; font-size: 14px; font-family: var(--body); }
.exp-check { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.exp-check input { accent-color: var(--pink); }
.exp-check code { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.exp-opts { display: flex; flex-direction: column; gap: 8px; }
.exp-opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px 14px; color: var(--paper); transition: border-color .15s; }
.exp-opt:hover { border-color: var(--orange); }
.exp-opt .t { font-family: var(--disp); font-size: 17px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.exp-opt .d { grid-column: 1; color: var(--muted); font-size: 12px; }
.exp-opt .c { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---------- collapsible sidebar ---------- */
.side-toggle {
  position: absolute;
  left: 250px;            /* matches sidebar width */
  top: 0;                 /* anchored to top of .layout — auto-aligns with sidebar */
  z-index: 45;
  width: 18px;
  height: 56px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-left: none;
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transition: left .2s ease, color .15s, border-color .15s;
}
.side-toggle:hover { color: var(--pink); border-color: var(--pink); }
body.sidebar-collapsed .side-toggle { left: 0; }

aside.sidebar { transition: margin-left .2s ease; }
@media (min-width: 761px) {
  body.sidebar-collapsed aside.sidebar { margin-left: -250px; }
}
@media (max-width: 760px) {
  .side-toggle { display: none; }
}

/* sidebar is a Library-only tool — remove it entirely on other tabs */
body.sidebar-hidden aside.sidebar { display: none; }
body.sidebar-hidden .side-toggle { display: none; }


/* ---------- face search ---------- */
.tabs button.active[data-view=faces] { color: var(--girl); border-bottom-color: var(--girl); }
.facepanel { max-width: 1060px; margin-bottom: 18px; display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.face-card { flex: 1 1 480px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.face-card h3 { font-family: var(--disp); font-size: 22px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; transform: skewX(-6deg); color: var(--green); }
.face-blurb { color: var(--muted); font-size: 13px; max-width: 540px; }
.face-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.face-qstrip { display: flex; flex-wrap: wrap; gap: 8px; }
.face-qthumb { position: relative; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid #4DD9F055; background: #050406; }
.face-qthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-qthumb .qx { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 3px; background: #000B; border: 1px solid var(--line-strong); color: var(--muted); font-size: 11px; line-height: 1; }
.face-qthumb .qx:hover { color: var(--danger); border-color: var(--danger); }
.face-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.face-controls select { background: var(--raised); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--paper); padding: 6px 10px; font-size: 12.5px; }
.face-prog { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 6px; }
.face-prog-track { height: 6px; border-radius: 3px; background: var(--raised); border: 1px solid var(--line-strong); overflow: hidden; }
.face-prog-track i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--girl), var(--pink)); transition: width .2s; }
.face-prog-text { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.badge-score { position: absolute; bottom: 8px; right: 8px; z-index: 3; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--green); background: rgba(9,8,11,.85); border: 1px solid #4DD9F055; border-radius: 3px; padding: 2px 6px; pointer-events: none; }
.face-preview-grid { flex: 1 1 300px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-content: start; }
.face-preview-grid .card { max-width: 240px; }
.face-preview-grid .qx { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 4px; border: 1.5px solid #FFFFFFAA; background: #0008; color: #FFFFFFCC; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 5; }
.face-preview-grid .qx:hover { background: var(--danger); border-color: var(--danger); color: #2A0606; }
.face-results-head {
  font-family: var(--disp); font-size: 21px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; transform: skewX(-6deg);
  color: var(--green); text-shadow: 0 0 14px #4DD9F033;
  margin: 26px 0 14px;
}
/* ---------- back to top ---------- */
.totop {
  position: fixed; left: 50%; top: 16px;            /* was 132px — now overlays the header */
  transform: translateX(-50%) translateY(-10px);
  opacity: 0; pointer-events: none;
  transition: transform .15s ease, opacity .15s ease;
  background: var(--raised); border: 2px solid var(--pink);
  border-radius: 99px; padding: 12px 30px;
  color: var(--paper);
  font-family: var(--disp); font-size: 19px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 10px 30px #000D, 0 0 24px #FF0F7744;
  z-index: 55;
}
.totop:hover { background: var(--pink); color: #220011; }
.totop.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* ========================================================================
   onboarding + help
   ======================================================================== */

/* shared color hints used inside copy */
.hl-girl  { color: var(--girl);   font-weight: 700; }
.hl-group { color: var(--blue);   font-weight: 700; }
.hl-tag   { color: var(--violet); font-weight: 700; }

/* ---------- onboarding walkthrough ---------- */
.ob-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: #050406F2;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
.ob-overlay.open { opacity: 1; }

.ob-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 24px 70px #000E, 0 0 44px #FF0F7733;
  width: 100%; max-width: 520px;
  padding: 0 28px 24px;
  overflow: hidden;
  transform: translateY(10px) scale(.985);
  transition: transform .2s ease;
}
.ob-overlay.open .ob-card { transform: none; }
.ob-card .dlg-glow { position: absolute; left: 0; right: 0; top: 0; }

.ob-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 6px; color: var(--muted);
  font-size: 13px; line-height: 1;
}
.ob-x:hover { color: var(--pink); border-color: var(--pink); }

.ob-badge {
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em;
  color: var(--pink); margin-top: 28px;
}
.ob-title {
  font-family: var(--disp); font-weight: 900; font-size: 30px;
  letter-spacing: .03em; text-transform: uppercase; transform: skewX(-6deg);
  color: var(--paper); margin: 6px 0 14px; line-height: 1.05;
}
.ob-blurb { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }

.ob-points { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ob-points li {
  display: grid; grid-template-columns: 132px 1fr; gap: 4px 16px;
  align-items: baseline;
}
.ob-k {
  font-family: var(--disp); font-weight: 800; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; transform: skewX(-6deg);
  color: var(--pink-soft);
}
.ob-v { color: var(--paper); font-size: 13.5px; line-height: 1.5; }
.ob-v b { color: var(--pink-soft); font-weight: 600; }

.ob-dots { display: flex; gap: 7px; justify-content: center; margin: 22px 0 18px; }
.ob-dot {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%; border: none;
  background: var(--line-strong);
  transition: background .15s, transform .15s;
}
.ob-dot:hover { background: var(--muted); }
.ob-dot.on { background: var(--pink); transform: scale(1.25); }

.ob-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line-strong); padding-top: 16px;
}
.ob-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.ob-toggle input { accent-color: var(--pink); }
.ob-nav { display: flex; gap: 8px; margin-left: auto; }

/* ---------- help menu ---------- */
.help-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: #050406EE;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity .2s ease;
}
.help-overlay.open { opacity: 1; }

.help-panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 24px 70px #000E, 0 0 40px #FF0F7722;
  width: 100%; max-width: 860px;
  max-height: min(86vh, 760px);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(10px) scale(.99);
  transition: transform .2s ease;
}
.help-overlay.open .help-panel { transform: none; }

.help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line-strong);
}
.help-head h3 {
  font-family: var(--disp); font-weight: 900; font-size: 24px;
  letter-spacing: .05em; text-transform: uppercase; transform: skewX(-6deg);
  color: var(--pink);
}

.help-cols { display: flex; min-height: 0; flex: 1; }

.help-nav {
  width: 220px; flex-shrink: 0;
  border-right: 1px solid var(--line-strong);
  padding: 14px 12px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.help-navitem {
  text-align: left; width: 100%;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 8px 10px;
  color: var(--paper); font-size: 13px; font-weight: 500;
  transition: background .12s, border-color .12s;
}
.help-navitem:hover { background: var(--raised); border-color: var(--line-strong); }
.help-replay { margin-top: 10px; }

.help-content { flex: 1; overflow-y: auto; padding: 18px 24px 28px; }
.help-section { padding: 14px 0; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 12px; }
.help-section:last-child { border-bottom: none; }
.help-section h4 {
  font-family: var(--disp); font-weight: 800; font-size: 19px;
  letter-spacing: .04em; text-transform: uppercase; transform: skewX(-6deg);
  color: var(--pink-soft); margin-bottom: 10px;
}
.help-section .ob-blurb { margin-bottom: 12px; }

@media (max-width: 680px) {
  .help-cols { flex-direction: column; }
  .help-nav {
    width: 100%; flex-direction: row; flex-wrap: wrap;
    border-right: none; border-bottom: 1px solid var(--line-strong);
    max-height: 120px;
  }
  .help-navitem { width: auto; }
  .ob-points li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- ad slots ---------- */
.adslot { display:flex; justify-content:center; align-items:center; overflow:hidden; }
.adslot ins { max-width:100%; }
.adslot-top { min-height:90px; position:relative; z-index:1;
  padding:12px; background:var(--panel); border-bottom:1px solid var(--line-strong); }
@media (max-width:760px){ .adslot-top{ display:none; } }   /* 728×90 overflows phones */

.adrail { width:180px; flex-shrink:0; padding:18px 10px 0; display:flex; justify-content:flex-start; }
.adrail .adslot-rail { padding:0; background:transparent; border:none; }
@media (max-width:920px){ .adrail{ display:none; } }

/* in-feed sponsored cell — must read clearly as an ad, never as a thumbnail */
.adcard {
  display: flex !important;
  flex-direction: column !important;
  background: var(--panel);
  border: 1px dashed var(--pink) !important;   /* dashed + pink = visibly not a media card */
  padding: 0 !important;
}
/* Square media area: identical 1:1 box to .card .thumb, so the ad's square
   tracks the column width exactly like a thumbnail does. */
.adcard .adslot-infeed {
  position: relative !important;
  width: 100% !important;
  background: #050406;
  display: block !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.adcard .adslot-infeed::before {
  content: "";
  display: block !important;
  padding-top: 100% !important;   /* locks the square 1:1, matching thumbnails */
}
/* Iframe (and any direct ins fallback) fills the square; the 250x250 creative
   is centered inside it by the iframe's own document styles. */
.adcard .adslot-infeed iframe,
.adcard .adslot-infeed ins {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}
/* "Sponsored" label overlaid on the square (like the name overlay on thumbs),
   so it doesn't add height and the card matches a thumbnail card exactly. */
.adcard-label {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 5px 0;
  background: linear-gradient(180deg, rgba(5,4,6,.85), rgba(5,4,6,0));
  pointer-events: none;
}
/* Footer matching .card .meta height so total card height == a thumb card. */
.adcard-foot {
  height: 38px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  background: var(--panel);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* ============================================================
   MOBILE / TOUCH FIXES (phones, e.g. iPhone 16)
   Scoped to small screens + coarse pointers so desktop is untouched.
   ============================================================ */

/* ---- 1. Easier selection on touch ---------------------------
   The checkbox is hover-revealed (opacity:0) and only 22px — unusable
   on touch where there's no hover. Make it always visible and a proper
   ~44px tap target on phones. */
@media (max-width: 760px), (pointer: coarse) {
  .ckbox {
    opacity: 1 !important;
    width: 30px;
    height: 30px;
    font-size: 17px;
    border-width: 2px;
    background: #000A;
  }
  /* widen the effective tap area without changing the visual box */
  .ckbox::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .thumbstar { opacity: 1; width: 30px; height: 30px; font-size: 16px; }
  .badge-video { left: 44px; } /* clear the larger checkbox */
}

/* ---- 2. Lightbox modal on phones ----------------------------
   Add top padding (clears the notch via safe-area), make the whole
   thing scrollable, and give a clear, large close affordance. */
@media (max-width: 860px) {
  .modal.open {
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  }
  .lb-main { flex: 0 0 auto; }
  .lb-stage {
    padding: 0 8px 8px;
    min-height: 50vh;        /* give the media room when page scrolls */
  }
  .lb-side {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--line-strong);
    max-height: none;        /* was 45vh — let it grow, page scrolls */
  }
  /* Sticky top bar with a big, obvious close button */
  .lb-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #0A0A0CF2;
    padding: 12px 14px;
    backdrop-filter: blur(6px);
  }
  #lbClose {
    flex-shrink: 0;
    padding: 12px 16px;
    font-size: 15px;
    min-height: 44px;
  }
  /* Floating fallback close (top-right X) — guarantees an exit even if
     the sticky bar scrolls oddly on iOS */
  .modal.open .lb-main::before {
    /* no-op placeholder; real button is #lbClose above */
  }
  /* side nav arrows overlap thumbnails awkwardly on narrow screens;
     keep them but shrink and pull to edges */
  .lb-nav { width: 40px; height: 40px; font-size: 20px; }
}

/* ---- 3. Tagging / bulk action bar on phones -----------------
   The flex-wrap row with fixed widths + vertical separators looks
   broken on narrow screens. Switch to a clean stacked layout that
   sits above the bottom safe-area. */
@media (max-width: 760px) {
  .bulkbar {
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    transform: translateY(14px);              /* override the X-centering */
    max-width: none;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 70vh;
    overflow-y: auto;
  }
  body.has-selection .bulkbar { transform: translateY(0); }
  /* hide the vertical pipe separators — they don't make sense stacked */
  .bulkbar .sep { display: none; }
  .bulkbar .nsel { text-align: center; font-size: 17px; }
  /* full-width controls, comfortable tap height */
  .bulkbar select,
  .bulkbar input,
  .bulkbar .btn.small {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    font-size: 15px;
  }
  /* put the two “tag” controls and the action buttons in tidy 2-up rows
     so the bar isn't a tall single column */
  .bulkbar input { order: 0; }
}

/* ---- 4. Main content padding on phones ----------------------
   `main` has a fixed 18px/40px gutter that's never reduced for small
   screens — on a ~390px phone that 80px of horizontal padding squeezes
   the Export card (and everything else) and pushes content off-page,
   which reads as "weird gaps". Tighten the gutter on phones. */
@media (max-width: 760px) {
  main { padding: 14px 14px 110px; }
  .exportpanel { max-width: 100%; }
  .exp-card { padding: 16px; }
  /* the count chip in each export option can collide with the title on
     narrow widths — let it wrap under instead of forcing a 2nd column */
  .exp-opt { grid-template-columns: 1fr; }
  .exp-opt .c { grid-column: 1; grid-row: auto; align-self: start; margin-top: 2px; }
  .toolbar { padding-right: 0; }
}

/* ---- 5. Tab bar overflow on phones --------------------------
   The six skewed uppercase tabs don't fit a phone's width, so the last
   one (EXPORT) runs off the right edge. Make the row horizontally
   scrollable rather than letting it overflow the page. Also tighten the
   header gutters so the tabs start closer to the edge. */
@media (max-width: 760px) {
  .hbar { padding: 12px 14px; gap: 10px; }
  /* fade hint on the right so it's obvious the row scrolls to more tabs */
  nav.tabs { position: relative; }
  .tabs {
    padding: 0 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .tabs::-webkit-scrollbar { display: none; }  /* WebKit/Safari */
  .tabs button {
    flex: 0 0 auto;                 /* don't shrink; keep each tab readable */
    white-space: nowrap;
    font-size: 16px;
    padding: 7px 11px 8px;
  }
}