/* B-System DAM — minimalist black/white with a green accent, lots of whitespace. */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f7;
  --bg-sink: #fafafa;
  --ink: #121212;
  --ink-2: #3f3f46;
  --muted: #8a8a92;          /* grey 'last changed' text */
  --line: #ececef;
  --accent: #18a558;         /* B-System green */
  --accent-soft: #e8f6ee;
  --accent-ink: #0f7a40;
  --danger: #d4452f;
  /* Brand theming — overridden at runtime from the owner's settings (see applyBranding). */
  --brand: #0a2139;          /* main brand colour: sidebar + folder thumbnails */
  --brand-fg: #ffffff;       /* readable text on the brand colour */
  --brand-fg-muted: rgba(220,230,245,.72);
  --brand-hover: rgba(255,255,255,.08);
  --brand-hover-2: rgba(255,255,255,.14);
  --brand2: #0a2139;         /* secondary colour: download buttons */
  --brand2-fg: #ffffff;
  --shadow: 0 1px 2px rgba(17,17,17,.04), 0 6px 24px rgba(17,17,17,.06);
  --shadow-lg: 0 10px 40px rgba(17,17,17,.16);
  --radius: 10px;
  --header-h: 60px;
  --sidebar-w: 276px;
  /* Myriad if installed (Adobe), else Source Sans 3 — an open-source Myriad-alike — then system. */
  --font: "Myriad Pro", "Myriad", "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Typography — overridden at runtime from the owner's Design settings (see applyFonts). */
  --font-head: var(--font);  /* headings */
  --font-body: var(--font);  /* body text */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Safety net so a single wide element can never let the whole page be dragged sideways on a
   phone. `clip` rather than `hidden` on purpose: `hidden` turns the element into a scroll
   container, which breaks the sticky header. Anything that genuinely needs to scroll sideways
   (the partners table) does so inside its own container, so nothing becomes unreachable. */
html, body { overflow-x: clip; }
body { overscroll-behavior-x: none; }   /* also kills the horizontal rubber-band bounce */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-sink);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .hero-text { font-family: var(--font-head); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.boot { padding: 80px; text-align: center; color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 8px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 550;
  transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap;
}
.btn:hover { background: var(--bg-soft); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #2c2c2c; border-color: #2c2c2c; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { filter: brightness(.96); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--bg-soft); }
.btn.sm { padding: 5px 10px; font-size: 13.5px; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: #fdecea; }
.btn .ic { width: 15px; height: 15px; display: inline-block; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  display: flex; align-items: center; gap: 18px; padding: 0 22px;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--ink);
  color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 18.5px;
}
.brand .word { font-weight: 700; letter-spacing: -.2px; font-size: 17.5px; }
.brand .sub {
  font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase;
  letter-spacing: .8px; border-left: 1px solid var(--line); padding-left: 11px; margin-left: 3px;
}

/* ---------- global search ---------- */
.search-wrap { position: relative; flex: 1; max-width: 560px; margin: 0 auto; }
.search-box {
  display: flex; align-items: center; gap: 9px; background: var(--bg-soft);
  border: 1px solid transparent; border-radius: 10px; padding: 0 12px; height: 40px;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.search-box:focus-within { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.search-box .ic { color: var(--muted); flex-shrink: 0; }
.search-box input {
  border: 0; background: transparent; outline: none; width: 100%; font-size: 15.5px; color: var(--ink);
}
.search-box .clear { color: var(--muted); border: 0; background: none; padding: 4px; display: none; }
.search-box.has-text .clear { display: inline-flex; }

.search-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  overflow: hidden; max-height: min(70vh, 520px); z-index: 50;
  display: flex; flex-direction: column;   /* head + scrollable list + always-visible footer */
}
.search-pop .sp-head {
  flex: none; padding: 9px 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between;
}
.sp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }   /* only the results scroll */
.sp-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.sp-row:hover, .sp-row.active { background: var(--bg-soft); }
.sp-thumb {
  width: 42px; height: 42px; border-radius: 7px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; background: var(--bg-soft); border: 1px solid var(--line);
}
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-main { min-width: 0; flex: 1; }
.sp-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-sub { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-snip { font-size: 13.5px; color: var(--ink-2); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sp-foot { flex: none; padding: 10px 14px; text-align: center; font-size: 14.5px; color: var(--accent-ink);
  cursor: pointer; border-top: 1px solid var(--line); background: #fff; }
.sp-foot:hover { background: var(--accent-soft); }
.sp-empty { padding: 26px; text-align: center; color: var(--muted); }
mark { background: #fff3b0; color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---------- user menu ---------- */
.usermenu { position: relative; flex-shrink: 0; }
.avatar {
  display: flex; align-items: center; gap: 9px; border: 1px solid var(--line);
  background: #fff; border-radius: 9px; padding: 5px 10px 5px 6px; font-size: 14.5px; font-weight: 550;
}
.avatar:hover { background: var(--bg-soft); }
.avatar .dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 13.5px; font-weight: 700;
}
.avatar .role { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 50;
}
.menu .mi { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 8px; font-size: 14.5px; }
.menu .mi:hover { background: var(--bg-soft); }
.menu .mi.muted { color: var(--muted); font-size: 13.5px; pointer-events: none; }
.menu .mi-n { margin-left: auto; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
/* account-menu usage-limit widget (disk-usage style) */
.menu:has(.usage-box) { min-width: 246px; }
.usage-box { padding: 8px 11px 10px; }
.usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.usage-label { font-weight: 600; font-size: 13px; color: var(--ink); }
.usage-max { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.usage-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.usage-bar .usage-fill { height: 100%; background: #18a558; border-radius: 999px; transition: width .25s ease; }
.usage-bar.over .usage-fill { background: var(--danger); }
.usage-stat { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ---------- layout: full-height sidebar + footer in the right-hand column ---------- */
.layout { display: flex; align-items: stretch; min-height: calc(100vh - var(--header-h)); }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; border-right: 1px solid var(--line);
  background: #fff; padding: 18px 12px; overflow-y: auto;
}
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 10px; position: relative; }
.side-h span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--ink-2); font-weight: 500; position: relative; min-width: 0;
}
.nav-item:hover { background: var(--bg-soft); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.nav-item .ic { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item .count { margin-left: auto; font-size: 12.5px; color: var(--muted); font-weight: 600; flex-shrink: 0; padding-left: 6px; }
.nav-item.active .count { color: var(--accent-ink); }
.folder-row { display: flex; align-items: center; position: relative; }
/* owner actions overlay the right edge on hover — absolutely positioned so revealing
   them never reflows the name/count (that layout shift was the hover flicker) */
.folder-row .row-actions {
  position: absolute; right: 4px; top: 3px; bottom: 3px; margin: 0;
  display: flex; align-items: center; gap: 1px; padding-left: 22px; border-radius: 6px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, visibility .12s ease;
}
.folder-row:hover .row-actions { opacity: 1; visibility: visible; pointer-events: auto; }
/* opaque panel = the hovered-row colour, with a soft left fade, so it cleanly
   covers the count/name behind it without a visible seam */
.sidebar .folder-row .row-actions {
  background: linear-gradient(var(--brand-hover), var(--brand-hover)), var(--brand);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20px);
  mask-image: linear-gradient(to right, transparent, #000 20px);
}
.icon-btn { border: 0; background: none; color: var(--muted); padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.icon-btn:hover { background: #fff; color: var(--ink); }
.tree-children { margin-left: 14px; border-left: 1px solid var(--line); padding-left: 4px; }
.tree-children.collapsed { display: none; }
.tree-toggle { flex-shrink: 0; width: 20px; height: 20px; display: grid; place-items: center; background: transparent; border: 0; padding: 0; border-radius: 5px; color: inherit; cursor: pointer; opacity: .75; }
.tree-toggle .ic { width: 15px; height: 15px; transition: transform .15s ease; }
.tree-toggle:not(.open) .ic { transform: rotate(-90deg); }
.tree-toggle:hover { opacity: 1; }
.tree-spacer { flex-shrink: 0; width: 20px; }
.sidebar .tree-toggle { color: var(--brand-fg-muted); }
.sidebar .tree-toggle:hover { background: var(--brand-hover); }

.main { flex: 1; min-width: 0; padding: 26px 30px 60px; max-width: 1320px; }

/* ---------- page heading ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 24.5px; margin: 0 0 2px; letter-spacing: -.4px; }
.page-head .crumbs { font-size: 14.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.page-head .crumbs a:hover { color: var(--ink); }
/* wrap: three header buttons ("Download all (ZIP)", "Subfolder", "New asset") are wider than a
   phone, and .btn is white-space:nowrap, so without this they pushed the page sideways */
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------- stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
}
.stat .v { font-size: 27.5px; font-weight: 700; letter-spacing: -.5px; }
.stat .k { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* ---------- section ---------- */
.section-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.section-h h2 { font-size: 16.5px; margin: 0; letter-spacing: -.2px; }
.section-h a { font-size: 14.5px; color: var(--accent-ink); }
/* start-page asset tabs (Recent / Popular / Featured) */
.section-h.dash-tabbar { justify-content: flex-start; }
.dtab { border: 0; background: none; padding: 2px 0; margin-right: 20px; font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color .1s; }
.dtab:hover { color: var(--ink); }
.dtab.on { color: var(--ink); border-bottom-color: var(--ink); }
.btn.feat-btn.on { color: #b8860b; border-color: #e6cd82; background: #fdf7e6; }
.btn.feat-btn.on .ic { fill: currentColor; }
/* The assets side is capped to exactly three folder-width cards (3 × 210px + 2 × 16px gap =
   662px) and the activity ticker takes all the remaining space (min 300px so its header stays
   readable at laptop widths), so there is no empty gap between the cards and the ticker. */
.dash-cols { display: grid; grid-template-columns: minmax(0, 662px) minmax(300px, 1fr); gap: 26px; align-items: start; }
/* ---------- asset grid + cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
/* The home page fills its (capped) assets column with three equal cards, so they land at the
   folder-browse card width instead of stretching wider. (Folder-browse grids keep the auto-fill.) */
.dash-cols .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Collapse the home layout to one column early enough that the narrow two-column band never
   squeezes the assets side below two cards. Below this the home grid also drops back to the
   responsive auto-fill so it never forces three cramped columns on a phone. This media query
   sits AFTER the rules above so, at equal specificity, it wins at these widths. */
@media (max-width: 1060px) {
  /* minmax(0, …), not a bare 1fr: a bare 1fr means minmax(auto, 1fr), whose auto minimum is the
     content's min-content. The activity feed's single-line (nowrap) rows are wide, so the track
     refused to shrink and pushed the page wider than a phone viewport — which zoomed the whole
     page out and made the hero look like it only filled ~75%. */
  .dash-cols { grid-template-columns: minmax(0, 1fr); }
  .dash-cols .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
/* Grid items default to min-width:auto, which would let the feed overflow its track even with a
   minmax(0, …) track. Allowing them to shrink is what lets the nowrap rows ellipsize instead. */
.dash-cols > * { min-width: 0; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .14s, transform .14s, border-color .14s;
  position: relative;
}
.card:hover { box-shadow: var(--shadow); border-color: #ddd; }
.card .preview {
  aspect-ratio: 4 / 3; background: var(--bg-soft); display: grid; place-items: center;
  position: relative; overflow: hidden; cursor: pointer;
}
/* soft shimmer placeholder while the thumbnail loads, then the image fades in */
.card .preview::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  background-size: 200% 100%; animation: thumb-shimmer 1.3s ease-in-out infinite; opacity: 0; transition: opacity .25s;
}
.card .preview:has(img:not(.loaded))::before { opacity: 1; }
@keyframes thumb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* absolutely filled, not just width/height:100% — .preview is a grid whose row is auto-sized, so
   a portrait thumbnail (a PDF first page) made the row taller than the 4:3 box and the image
   overflowed instead of being cropped, showing the top slice of the page with the card's tinted
   background above it. inset:0 pins the image to the box so object-fit can actually crop. */
.card .preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity .4s ease; }
.card .preview img.loaded { opacity: 1; }
/* A PDF thumbnail is a rendered first page: anchor the crop to the top so the title block is
   what shows, rather than centring on whichever body text happens to sit mid-page. */
.k-pdf .preview img, .sp-thumb.k-pdf img, .rr-thumb.k-pdf img { object-position: top; }
.card .preview .filetype {
  font-size: 23.5px; font-weight: 800; letter-spacing: .5px; opacity: .92;
}
.card .preview .glyph { font-size: 31.5px; }
.badge {
  position: absolute; top: 9px; left: 9px; z-index: 2; font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 5px; background: #fff; box-shadow: var(--shadow); text-transform: uppercase;
}
.card .meta { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.card .meta .name { font-weight: 600; font-size: 15px; line-height: 1.35; min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta .changed { font-size: 13px; color: var(--muted); }
.card .meta .sz { font-size: 13px; color: var(--muted); }
.card .actions {
  display: flex; gap: 6px; padding: 0 12px 12px; margin-top: auto;
}
.card .actions .btn { flex: 1; justify-content: center; }
.card .kebab {
  position: absolute; top: 8px; right: 8px; z-index: 3; background: rgba(255,255,255,.92);
  border: 1px solid var(--line); border-radius: 7px; width: 28px; height: 28px; display: none;
  place-items: center; color: var(--ink-2);
}
.card:hover .kebab { display: grid; }
.card .kebab:hover { background: #fff; }
/* bulk-select mode (owner: pick assets in a folder and delete them together) */
.btn.sm.ffsel.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.bulk-bar[hidden], .btn[hidden] { display: none; }   /* the [hidden] attr must win over the display rules below */
.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 9px 14px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 10px; position: sticky; top: 8px; z-index: 20; }
.bulk-bar .bulk-count { font-weight: 650; color: var(--accent-ink); }
.bulk-bar .bulk-acts { display: flex; gap: 8px; }
#assetArea.selecting .card, #assetArea.selecting .result-row { cursor: pointer; }
#assetArea.selecting .card a, #assetArea.selecting .card button, #assetArea.selecting .result-row a, #assetArea.selecting .result-row button { pointer-events: none; }
#assetArea.selecting .card::after {
  content: ''; position: absolute; top: 10px; left: 10px; z-index: 5; width: 22px; height: 22px; border-radius: 6px;
  background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow);
}
#assetArea.selecting .result-row::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 2px solid var(--line); }
#assetArea.selecting .card.sel::after, #assetArea.selecting .result-row.sel::before {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/13px no-repeat; border-color: var(--accent);
}
#assetArea.selecting .card.sel { outline: 2px solid var(--accent); outline-offset: 2px; }
#assetArea.selecting .result-row.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
/* folder chooser for bulk "Move to…" */
.pf-list { max-height: 55vh; overflow-y: auto; padding: 4px 0; }
.pf-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; padding: 12px 12px 4px; }
.pf-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: 8px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.pf-row:hover:not(:disabled) { background: var(--accent-soft); }
.pf-row:disabled { cursor: default; opacity: .55; }
.pf-row .ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.pf-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row em { font-style: normal; font-size: 12px; color: var(--muted); }

/* kind tints for the preview area + badges */
.k-image .preview { background: #eef4ff; color: #2563eb; }
.k-pdf .preview { background: #fdeeec; color: #d4452f; }
.k-video .preview { background: #f3eefe; color: #7c3aed; }
.k-audio .preview { background: #fdecf5; color: #db2777; }
.k-doc .preview { background: #eef4ff; color: #2563eb; }
.k-sheet .preview { background: #e9f7ef; color: #0f9d58; }
.k-slide .preview { background: #fff1e6; color: #ea580c; }
.k-archive .preview, .k-other .preview { background: #f1f1f3; color: #6b7280; }
.k-text .preview { background: #eef1f6; color: #475569; }
.badge.b-image { color: #2563eb; } .badge.b-pdf { color: #d4452f; }
.badge.b-video { color: #7c3aed; } .badge.b-audio { color: #db2777; }
.badge.b-doc { color: #2563eb; } .badge.b-sheet { color: #0f9d58; }
.badge.b-slide { color: #ea580c; } .badge.b-archive, .badge.b-other { color: #6b7280; }
.badge.b-text { color: #475569; }

/* ---------- activity feed ---------- */
.feed { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feed .fi { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); align-items: center; transition: background .12s; }
.feed .fi:hover { background: var(--bg-soft); }
.feed .fi:last-child { border-bottom: 0; }
.fi .ficon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--bg-soft); font-size: 11.5px; font-weight: 700; overflow: hidden;
}
/* activity rows carry real thumbnails, so they use the 4:3 of a card preview (same height) */
.fi .ficon-thumb { width: auto; aspect-ratio: 4 / 3; }
.fi .ficon-thumb .kglyph, .fi .ficon-thumb .ic { width: 19px; height: 19px; color: var(--muted); }
.fi .ficon img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.fi .ftext { min-width: 0; flex: 1; }
/* line 1 uses an asset card title's type (.card .meta .name): 15px / 600 — not bold */
.fi .ftext .l1 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi .ftext .l1 b { font-weight: 600; }
.fi .ftext .l2 { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi .ftext .l2 .ftype { display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .2px; color: var(--muted); }
.fi .verb {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 1px 6px; border-radius: 4px; margin-right: 2px;
}
.verb.upload { background: var(--accent-soft); color: var(--accent-ink); }
.verb.replace { background: #fff3d6; color: #9a6b00; }
.verb.delete { background: #fdecea; color: var(--danger); }
.verb.folder_create { background: #eef4ff; color: #2563eb; }
.verb.partner_invite { background: #f3eefe; color: #7c3aed; }

/* ---------- empty / dropzone ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--muted); border: 1px dashed var(--line);
  border-radius: var(--radius); background: #fff; }
.empty .big { font-size: 16.5px; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }
/* owner file-drop target: a prominent dashed zone with a drop icon */
.drop-empty { border: 2.5px dashed #b9b9c4; transition: border-color .15s ease, background .15s ease; }
.drop-empty.drop-locked { opacity: .5; pointer-events: none; }   /* while an upload is in progress */
.drop-empty .drop-ic { display: block; width: 46px; height: 46px; margin: 0 auto 14px; color: var(--muted); stroke-width: 1.6; }
.dropzone.drag:not(:has(.drop-empty)) { outline: 2px dashed var(--accent); outline-offset: -6px; background: var(--accent-soft); }
.dropzone.drag .drop-empty { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.drag .drop-empty .drop-ic { color: var(--accent-ink); }
/* "drop more" box shown below an existing grid so the owner can drop into the current folder */
.drop-more { margin-top: 22px; }
.drop-more .drop-empty { padding: 34px 20px; }
.drop-more .drop-empty .drop-ic { width: 38px; height: 38px; margin-bottom: 10px; }

/* ---------- partners ---------- */
/* an 8-column table cannot fit a phone; it scrolls inside its own box so the PAGE never does */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll .table { min-width: 720px; }
.table { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.table th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.pill { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
.pill.active { background: var(--accent-soft); color: var(--accent-ink); }
.pill.invited { background: #fff3d6; color: #9a6b00; }
.copy-link { display: flex; gap: 6px; align-items: center; }
.copy-link code { background: var(--bg-soft); padding: 4px 8px; border-radius: 6px; font-size: 13px;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- modals ---------- */
.overlay { position: fixed; inset: 0; background: rgba(15,15,17,.55); z-index: 100;
  display: grid; place-items: center; padding: 24px; backdrop-filter: blur(2px); }
.modal { background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); width: 100%; max-width: 440px;
  overflow: hidden; animation: pop .14s ease; }
@keyframes pop { from { transform: translateY(6px) scale(.99); opacity: 0; } }
.modal .m-head { padding: 18px 20px 4px; }
.modal .m-head h3 { margin: 0; font-size: 18.5px; }
.modal .m-head p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.modal .m-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.modal .m-foot { padding: 14px 20px; display: flex; gap: 9px; justify-content: flex-end; border-top: 1px solid var(--line); }
.sched-now, .sched-btn { justify-content: center; }
.sched-sep { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 2px 0; }
.sched-sep::before, .sched-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sched-when { font-weight: 600; }
.sched-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sched-item { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); }
.sched-ic { display: inline-flex; color: var(--accent-ink); }
.sched-ic svg { width: 18px; height: 18px; }
.sched-txt { flex: 1; font-size: 14px; }
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--ink-2); font-weight: 550; }
.field input, .field textarea {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 15.5px; font-family: inherit;
  outline: none; background: #fff;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 40px; }
.pw-eye { position: absolute; top: 0; bottom: 0; right: 4px; margin: auto 0; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 7px; }
.pw-eye:hover { color: var(--ink); background: rgba(0,0,0,.05); }
.pw-eye svg { width: 18px; height: 18px; }
.field textarea { resize: vertical; min-height: 76px; }
.pw-hints { list-style: none; margin: 7px 2px 14px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pw-hints li { font-size: 12.5px; color: #9ca3af; display: flex; align-items: center; gap: 7px; transition: color .15s; }
.pw-hints li::before { content: "○"; font-size: 10px; line-height: 1; }
.pw-hints li.ok { color: #18a558; }
.pw-hints li.ok::before { content: "✓"; font-weight: 700; font-size: 11px; }
.pw-rule-opt { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14.5px; cursor: pointer; }
.pw-rule-opt input { width: 16px; height: 16px; flex: none; }
.gdpr-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.gdpr-text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  line-height: 1.55; white-space: pre-wrap; resize: vertical; color: var(--ink); background: var(--bg-soft); }
.form-error { color: var(--danger); font-size: 14px; }

/* lightbox / preview */
.lightbox { max-width: min(1080px, 96vw); width: auto; display: flex; flex-direction: column; max-height: 92vh; }
.lb-stage { background: #16161a; display: grid; place-items: center; min-height: 280px; max-height: 70vh; overflow: auto; position: relative; }
.lb-stage img { max-width: 100%; max-height: 70vh; display: block; }
.lb-stage video, .lb-stage iframe { width: min(960px, 92vw); height: 68vh; border: 0; background: #fff; }
.lb-stage .noprev { color: #cfcfd6; text-align: center; padding: 60px; }
.lb-stage .noprev .filetype { font-size: 47.5px; font-weight: 800; margin-bottom: 10px; }
.lb-info { padding: 16px 20px; display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.lb-info .ti { font-size: 17.5px; font-weight: 650; }
.lb-info .meta { color: var(--muted); font-size: 14px; margin-top: 3px; }
.lb-info .desc { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); max-width: 620px; }
.lb-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.lb-close { position: absolute; top: 12px; right: 12px; z-index: 5; background: rgba(255,255,255,.16);
  color: #fff; border: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.lb-close:hover { background: rgba(255,255,255,.3); }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(1200px 480px at 50% -10%, #f0f7f3, transparent), var(--bg-sink); }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); padding: 30px 28px; }
.login-card .brand { justify-content: center; margin-bottom: 6px; }
.login-card h1 { font-size: 20.5px; text-align: center; margin: 14px 0 4px; }
.login-card p.s { text-align: center; color: var(--muted); margin: 0 0 20px; font-size: 14.5px; }
.login-card .field { margin-bottom: 12px; }
/* start-page header bar (logo left, language dropdown right) */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.auth-bar .brand-logo { height: 30px; width: auto; display: block; }
.auth-page .login-wrap { flex: 1; min-height: 0; }
.auth-h { font-size: 20.5px; text-align: center; margin: 0 0 4px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -4px 0 12px; }
.stay-signed { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.stay-signed input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.field-hint { color: var(--muted); font-size: 12.5px; font-weight: 400; margin-top: 4px; display: block; }
.invalid-link { text-align: center; }
.invalid-link .x { font-size: 31.5px; }

/* toast */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14.5px;
  box-shadow: var(--shadow-lg); animation: pop .14s ease; display: flex; align-items: center; gap: 9px; }
.toast.ok .d { color: var(--accent); }
.toast .d { font-weight: 700; }
.toast-link { color: #fff; font-weight: 650; text-decoration: underline; text-underline-offset: 2px;
  margin-left: 2px; white-space: nowrap; cursor: pointer; }
.toast-link:hover { color: var(--accent); }

/* background upload progress — fixed so browsing to another folder does not hide it */
.upload-chip { position: fixed; bottom: 22px; left: 22px; z-index: 200; display: grid; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px;
  font-size: 14.5px; color: var(--ink); box-shadow: var(--shadow-lg); animation: pop .14s ease; }
/* progress and cancel share ONE grid cell: the chip sizes to the wider of the two and never
   resizes on hover, so revealing the cancel action cannot flicker or shift the layout */
.upload-chip > * { grid-area: 1 / 1; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.upload-chip .up-main { transition: opacity .12s; }
.upload-chip .up-cancel { justify-content: center; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s; background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--danger); cursor: pointer; }
.upload-chip:hover .up-main { opacity: 0; }
.upload-chip:hover .up-cancel { opacity: 1; visibility: visible; pointer-events: auto; }
.upload-chip .up-cancel .ic { width: 14px; height: 14px; }

.hint { background: #fff8e6; border: 1px solid #f3e2b3; color: #8a6d1a; padding: 10px 14px;
  border-radius: 10px; font-size: 14.5px; display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }
.spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--ink);
  border-radius: 50%; animation: rot .7s linear infinite; display: inline-block; }
@keyframes rot { to { transform: rotate(360deg); } }
.uploading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 14px 0; }

/* ======================================================================
   Round-2/3 additions: logo, dark sidebar groups, detail page, hero,
   language chips, sort, multi-folder chips, YouTube.
   ====================================================================== */

/* ---------- brand logo ---------- */
.brand-logo { height: 30px; width: auto; display: block; }
.login-logo { height: 30px; width: auto; display: block; margin: 0 auto 6px; }

/* ---------- dark sidebar ---------- */
.sidebar { background: var(--brand); border-right: 0; color: var(--brand-fg); }
.side-group { margin-top: 14px; }
.sidebar .side-h { padding: 4px 8px 8px; }
.sidebar .side-h span { color: var(--brand-fg-muted); }
.sidebar .nav-item { color: var(--brand-fg); font-weight: 500; }
.sidebar .nav-item:hover { background: var(--brand-hover); color: var(--brand-fg); }
.sidebar .nav-item.active { background: var(--brand-hover-2); color: var(--brand-fg); font-weight: 650; }
.sidebar .nav-item .count { color: var(--brand-fg-muted); }
.sidebar .nav-item.active .count { color: var(--brand-fg); }
.sidebar .nav-item .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .icon-btn { color: var(--brand-fg-muted); }
.sidebar .icon-btn:hover { background: var(--brand-hover-2); color: var(--brand-fg); }
.sidebar .tree-children { border-left-color: var(--brand-hover-2); }
.side-empty { padding: 6px 10px; color: var(--brand-fg-muted); font-size: 13.5px; }
.side-title { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.sidebar .side-h .secret-badge { color: #d9b450; display: inline-flex; align-items: center; }
.secret-badge .ic { width: 13px; height: 13px; }
/* absolutely positioned so revealing the section actions never changes the header
   height (that vertical shift pushed the folder list down = the hover flicker) */
.side-hactions {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 0; padding-left: 16px; border-radius: 6px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, visibility .12s ease;
}
.side-group:hover .side-hactions { opacity: 1; visibility: visible; pointer-events: auto; }
.sidebar .side-hactions {
  background: var(--brand);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px);
  mask-image: linear-gradient(to right, transparent, #000 16px);
}
.side-addsection { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  margin-top: 18px; padding: 9px; border: 1px dashed var(--brand-hover-2); border-radius: 8px;
  background: transparent; color: var(--brand-fg-muted); font-size: 13px; font-weight: 550; }
.side-addsection:hover { background: var(--brand-hover); color: var(--brand-fg); }
.side-addsection .ic { width: 15px; height: 15px; }

/* drag-and-drop move targets */
.drop-hover { outline: 2px dashed var(--accent) !important; outline-offset: -2px; border-radius: 10px; }
.sidebar .folder-row.drop-hover { border-radius: 8px; }
.sidebar .folder-row.drop-hover .nav-item { background: rgba(24,165,88,.30); color: #fff; }
.card.dragging { opacity: .4; }
.card[draggable="true"] .preview { cursor: pointer; }
.card[draggable="true"] { cursor: grab; }

/* ---------- language chip + card metarow ---------- */
.langchip { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 650;
  color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 6px; white-space: nowrap; vertical-align: middle; }
.metarow { display: flex; align-items: center; gap: 8px; }
.metarow .sz { font-size: 13px; color: var(--muted); }

/* ---------- YouTube cards ---------- */
.k-youtube .preview { background: #000; }
.badge.b-youtube { color: #d4452f; }
/* z-index 2 clears the thumbnail (.card .preview img is z-index 1), or a loaded
   image paints over the play overlay and hides it. See .badge / .kebab / .card-lock. */
.playbadge { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.playbadge::before { content: ""; grid-area: 1 / 1; width: 52px; height: 52px; aspect-ratio: 1;
  background: rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.playbadge::after { content: ""; grid-area: 1 / 1; align-self: center; justify-self: center;
  width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #1b1b1b; margin-left: 4px; }

/* ---------- toolbar + sort ---------- */
/* wrap: count + Select + view toggle + sort do not fit a phone on one line, and the sort
   select was running off the right edge */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.result-count { font-size: 14.5px; color: var(--muted); font-weight: 550; }
.sortctl { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14.5px; }
.sortctl select { border: 1px solid var(--line); border-radius: 9px; padding: 7px 28px 7px 10px; font-size: 14.5px;
  font-family: inherit; background: #fff; color: var(--ink); outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a92' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.sortctl select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sortctl .ic { width: 16px; height: 16px; }

/* ---------- folder description ---------- */
.folder-desc { margin: -6px 0 20px; color: var(--ink-2); font-size: 15.5px; max-width: 780px; line-height: 1.6; white-space: pre-wrap; }
.folder-desc a { color: var(--accent-ink); text-decoration: underline; }
.link-btn { border: 0; background: none; color: var(--accent-ink); font-size: 14.5px; font-weight: 600;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.link-btn:hover { text-decoration: underline; }
.link-btn .ic { width: 14px; height: 14px; }
.add-desc { margin: -4px 0 20px; }
.folder-card { cursor: pointer; }
.folder-card .preview.k-folder { background: var(--bg-soft); color: var(--muted); }

/* ---------- hero (homepage mood image) ---------- */
.hero { position: relative; border-radius: 16px; overflow: hidden; min-height: 210px; margin-bottom: 26px;
  background-size: cover; background-position: center; display: flex; align-items: flex-end; box-shadow: var(--shadow); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,33,57,0) 35%, rgba(10,33,57,.72)); }
.hero-text { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: 31.5px; line-height: 1.15;
  letter-spacing: -.6px; padding: 28px 30px; text-shadow: 0 2px 16px rgba(0,0,0,.45); max-width: 82%; }
.hero-text.dark { color: var(--ink); text-shadow: none; }
.hero-sub { font-family: var(--font); font-weight: 400; font-size: 16px; letter-spacing: 0; line-height: 1.35; margin-top: 9px; opacity: .92; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero-text.dark .hero-sub { color: var(--ink-2); opacity: 1; text-shadow: none; }
.hero-prev .hero-sub { font-size: 12.5px; margin-top: 5px; }
.hero-plain { background: var(--bg-soft); min-height: auto; box-shadow: none; }
.hero-edit { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(255,255,255,.94); }
.hero-empty { min-height: 130px; border: 1px dashed var(--line); background: var(--bg-soft); display: flex;
  align-items: center; gap: 16px; padding: 22px 28px; cursor: pointer; color: var(--muted); }
.hero-empty:hover { background: #f0f0f2; }
.hero-empty .big-ic { width: 32px; height: 32px; color: var(--muted); flex-shrink: 0; }
.he-1 { font-weight: 650; color: var(--ink-2); font-size: 16.5px; }
.he-2 { font-size: 14.5px; }
.hero-prev { position: relative; height: 150px; border-radius: 12px; overflow: hidden; display: flex;
  align-items: flex-end; margin-bottom: 4px; background: var(--brand); background-size: cover; background-position: center; }
.hero-prev .hero-text { font-size: 20.5px; padding: 14px 16px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- asset detail page ---------- */
.detail { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.detail-main { min-width: 0; }
.stage { background: #0e0e12; border: 1px solid var(--line); border-radius: 14px; display: grid;
  place-items: center; min-height: 440px; max-height: 76vh; overflow: hidden; position: relative; }
.stage img { max-width: 100%; max-height: calc(76vh - 4px); display: block; }
.stage video { width: 100%; max-width: 100%; max-height: calc(76vh - 4px); aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.stage iframe { width: 100%; height: 74vh; border: 0; background: #fff; }
.stage-image, .stage-pdf { background: #f1f1f3; }
/* phone PDF preview: the rendered first page, tappable to open the real file */
.pdf-page { display: block; position: relative; width: 100%; background: #fff; }
.pdf-page img { width: 100%; height: auto; display: block; }
.pdf-open { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: rgba(17,17,17,.82); color: #fff; padding: 9px 15px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-lg); }
.pdf-open .ic { width: 16px; height: 16px; }
.stage-youtube { background: #000; width: 100%; }
.stage-youtube iframe { aspect-ratio: 16 / 9; height: auto; }
.stage-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.stage:not(.stage-loading) .stage-loader { display: none; }
.stage-spin { width: 28px; height: 28px; border: 3px solid rgba(120,120,130,.28); border-top-color: #5b6270; border-radius: 50%; animation: rot .7s linear infinite; }
.stage-video .stage-spin, .stage-youtube .stage-spin { border-color: rgba(255,255,255,.32); border-top-color: #fff; }
.stage .noprev { color: #cfcfd6; text-align: center; padding: 60px; }
.stage .noprev .filetype { font-size: 47.5px; font-weight: 800; margin-bottom: 10px; }

.detail-side { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  position: sticky; top: calc(var(--header-h) + 18px); }
.d-title { font-size: 19.5px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 14px; line-height: 1.3; }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.d-actions .btn { flex: 1 1 auto; justify-content: center; }
/* Copy link + save share one row slot, so the square heart always sits directly beside
   Copy link instead of wrapping onto its own line. */
.d-share { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; }
.d-share .btn { flex: 1 1 auto; justify-content: center; }
/* square icon-only "save" button: aspect-ratio keeps it square against whatever height the
   row settles on, flex:0 0 auto stops it growing like its siblings */
.d-actions .btn.fav-btn { flex: 0 0 auto; width: auto; aspect-ratio: 1; padding: 0; color: var(--muted); }
.fav-btn .ic { width: 19px; height: 19px; transition: fill .12s, color .12s; }
.d-actions .btn.fav-btn:hover { color: var(--ink-2); }
/* must out-specify the `.d-actions .btn.fav-btn` base rule above, or the saved state stays grey */
.d-actions .btn.fav-btn.on, .d-actions .btn.fav-btn.on:hover {
  color: #e0245e; border-color: #f3c2ce; background: #fdf2f5;
}
.fav-btn.on .ic { fill: currentColor; }            /* same path, filled once saved */
.d-meta { margin: 0; }
.d-meta > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line); align-items: center; }
.d-meta dt { color: var(--muted); font-size: 14px; }
.d-meta dd { margin: 0; font-size: 14.5px; font-weight: 550; text-align: right; }
.d-meta .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; font-size: 13px; word-break: break-all; }
.d-block { margin-top: 16px; }
.d-lbl { font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; margin-bottom: 9px; }
.d-desc { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.fchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.zip-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.zip-list li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 10px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.zip-list li:last-child { border-bottom: 0; }
.zip-list .zl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zip-list .zl-size { color: var(--muted); flex-shrink: 0; }
.fchip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 550; }
.fchip:has(.fchip-x) { padding-right: 5px; }   /* tighter only when the remove × is shown */
.fchip .fc-ic { width: 14px; height: 14px; color: var(--muted); }
.fchip-x { border: 0; background: none; color: var(--muted); padding: 2px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; }
.fchip-x:hover { color: var(--danger); background: #fdecea; }
.fchip-x .ic { width: 13px; height: 13px; }
select.add-folder { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 14.5px;
  font-family: inherit; background: #fff; outline: none; width: 100%; }
select.lang-select { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 14.5px; font-family: inherit; background: #fff; outline: none; }
select.add-folder:focus, select.lang-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.hint.info { background: #eef4ff; border-color: #cfe0ff; color: #1f4e8a; }
.hint.danger { background: #fdecea; border-color: #f5c6c0; color: #a1231a; }
.hint.danger .ic { width: 16px; height: 16px; flex-shrink: 0; }
.hint.onboard { justify-content: space-between; align-items: flex-start; }
.hint.onboard .ob-body { flex: 1; }
.ob-x { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  padding: 0; border: 0; background: transparent; color: currentColor; opacity: .55; cursor: pointer; border-radius: 6px; }
.ob-x:hover { opacity: 1; background: rgba(0,0,0,.07); }
.ob-x .ic { width: 15px; height: 15px; }

/* ---------- hamburger + mobile nav ---------- */
.hamburger { display: none; border: 1px solid var(--line); background: #fff; color: var(--ink);
  width: 38px; height: 38px; border-radius: 9px; place-items: center; flex-shrink: 0; }
.hamburger:hover { background: var(--bg-soft); }
.avatar .aname { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-backdrop { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(10,33,57,.45); z-index: 55; }

/* ---------- login: guest divider ---------- */
.login-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; margin: 14px 0; }
.login-or::before, .login-or::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* ---------- live-search sub line (now carries the language chip) ---------- */
.sp-sub { display: flex; align-items: center; gap: 6px; }
.sp-sub > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- search results page ---------- */
.results { display: flex; flex-direction: column; gap: 10px; }
.result-row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; transition: box-shadow .14s, border-color .14s; }
.result-row:hover { box-shadow: var(--shadow); border-color: #ddd; }
/* list view: 4:3 like a card preview, same height as before */
.rr-thumb { width: 72px; height: 54px; border-radius: 9px; flex-shrink: 0; overflow: hidden; display: grid;
  place-items: center; background: var(--bg-soft); border: 1px solid var(--line); }
.rr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rr-thumb .tl { font-size: 12.5px; font-weight: 700; }
.rr-main { flex: 1; min-width: 0; }
.rr-title { font-weight: 650; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-title mark, .sp-title mark, .rr-snip mark, .sp-snip mark { background: #fff3b0; }
.rr-sub { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); margin-top: 2px; }
.rr-sub > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-snip { font-size: 14px; color: var(--ink-2); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-act { flex-shrink: 0; }

@media (max-width: 760px) {
  .hamburger { display: grid; }
  .sidebar { position: fixed; top: var(--header-h); left: 0; width: 280px; height: calc(100vh - var(--header-h));
    transform: translateX(-100%); transition: transform .22s ease; z-index: 60; display: block; }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  body.nav-open .nav-backdrop { display: block; }
  .main { padding: 18px 16px 48px; }
  .detail { grid-template-columns: 1fr; }
  .detail-side { position: static; }
  .hero-text { font-size: 22.5px; }
  .search-wrap { max-width: none; }
  .rr-act { display: none; }
}
@media (max-width: 920px) {
  .detail { grid-template-columns: 1fr; }
  .detail-side { position: static; }
}

/* ---------- folder reorder (sidebar drag) ---------- */
.sidebar .folder-row[draggable="true"] { cursor: grab; }
.sidebar .folder-row.dragging-folder { opacity: .4; }
.sidebar .folder-row.insert-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.sidebar .folder-row.insert-after { box-shadow: inset 0 -2px 0 0 var(--accent); }
.sidebar .side-title[draggable="true"] { cursor: grab; }
.sidebar .side-group.dragging-section { opacity: .5; }
.sidebar .side-group.insert-before { box-shadow: inset 0 3px 0 0 var(--accent); }
.sidebar .side-group.insert-after { box-shadow: inset 0 -3px 0 0 var(--accent); }

/* ---------- login credit ---------- */
.login-credit { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.login-credit a { color: var(--accent-ink); font-weight: 600; }
.login-credit a:hover { text-decoration: underline; }

/* ---------- site footer ---------- */
.site-footer { background: #fff; margin-top: 250px; border-top: 1px solid var(--line); }   /* grey hr at footer start */
.foot-top { color: var(--ink-2); display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 30px; flex-wrap: wrap; }
.foot-left { font-size: 15.5px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; color: var(--muted); }
.foot-left a { color: var(--ink); }
.foot-left a:hover { text-decoration: underline; }
.foot-left .sep { opacity: .3; }
/* the links keep their own spacing, so the group can move to its own line on a phone */
.foot-links { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.foot-right { display: flex; align-items: center; gap: 12px; }
.foot-right .follow { font-size: 15.5px; color: var(--muted); }
.soc { color: var(--ink-2); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; }
.soc:hover { background: var(--bg-soft); color: var(--ink); }
.foot-credit { padding: 6px 20px 28px; text-align: center; font-size: 13.5px; color: var(--muted); }
.foot-credit a { color: var(--accent-ink); font-weight: 600; }
.foot-credit a:hover { text-decoration: underline; }

/* Phone header: .brand and .usermenu are flex-shrink:0, so the logo plus the signed-in name made
   the header wider than the viewport. That overflow is what scaled the whole page down, so the
   hero looked like it only filled ~75%. Trim the chrome and drop the name (the initials stay). */
@media (max-width: 600px) {
  .header { padding: 0 14px; gap: 12px; }
  .brand-logo { height: 24px; }
  .avatar .aname { display: none; }
  .avatar { padding: 5px 6px; }

  /* The search box is only ~92px once the header's other items have taken their space, which
     left the results list 92px wide and the input itself about 4px. Two fixes:
     1. the results are position:fixed, so they span the screen instead of inheriting the width
        of the box they hang from; */
  .search-pop { position: fixed; left: 10px; right: 10px; top: calc(var(--header-h) + 6px); }

  /* The 440px floor is sized for a desktop stage: on a phone a 16:9 video is only ~200px tall
     inside a 358px-wide stage, so it was padded with ~240px of dead black, centred top and
     bottom. Let the stage hug whatever the asset actually is; the floor stays only while the
     preview is still loading, so the spinner has somewhere to sit. */
  .stage { min-height: 0; }
  .stage.stage-loading { min-height: 200px; }
  .stage .noprev { padding: 36px 20px; }   /* 60px all round is a lot of a 358px-wide stage */
  /* 2. tapping search hands it the whole header row, so there is somewhere to actually type.
        The class is cleared by navigate(), by a tap outside and by Escape — never on blur,
        because blur fires while the results are still open. */
  body.search-open .header > *:not(.search-wrap) { display: none; }
  body.search-open .search-wrap { max-width: none; }
}

/* Phone footer: three centred rows — copyright, links, follow-us — then the credit line, instead
   of one wrapping run that broke mid-separator. The desktop row layout is untouched. */
@media (max-width: 600px) {
  .site-footer { margin-top: 90px; }            /* 250px left a huge empty gap on a phone */
  .foot-top { flex-direction: column; align-items: center; gap: 15px; padding: 22px 18px 14px; text-align: center; }
  .foot-left { flex-direction: column; gap: 10px; width: 100%; justify-content: center; }
  .foot-left .foot-sep { display: none; }       /* the copyright/links divider is the line break now */
  .foot-links { justify-content: center; }
  .foot-right { width: 100%; justify-content: center; }
  .foot-credit { padding: 4px 18px 26px; }
}

/* ---------- download button (B-System blue) + locked states ---------- */
.btn.dl { background: var(--brand2); border-color: var(--brand2); color: var(--brand2-fg);
  transition: filter .12s ease, background .12s, border-color .12s, box-shadow .12s; }
.btn.dl:hover { filter: brightness(1.18); }
.btn.locked-btn { background: var(--bg-soft); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.btn.locked-btn:hover { background: var(--bg-soft); }
.lockchip { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 650;
  color: #8a6d1a; background: #fff3d6; border: 1px solid #f3e2b3; border-radius: 6px; padding: 1px 6px 1px 5px; white-space: nowrap; }
.lockchip .ic { width: 12px; height: 12px; }
.locked-stage { display: flex; flex-direction: column; align-items: center; }
.locked-stage .lock-ic { width: 52px; height: 52px; color: #cfd2dd; margin-bottom: 10px; }
.locked-stage .ls-1 { font-size: 19.5px; font-weight: 700; color: #e9eaf0; }
.locked-stage .ls-2 { font-size: 14.5px; color: #aab0c0; margin-top: 5px; }

/* ---------- login credit (now outside the card, centered below it) ---------- */
.login-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-credit { margin-top: 48px; text-align: center; font-size: 13.5px; color: var(--muted); }
.login-credit a { color: var(--accent-ink); font-weight: 600; }
.login-credit a:hover { text-decoration: underline; }

/* locked detail stage: show the uploaded thumbnail/placeholder with a lock note */
.stage-locked { background: #f4f4f6; }
.stage-locked .noprev { color: var(--ink-2); }
.stage-locked img { max-width: 100%; max-height: 60vh; border-radius: 8px; box-shadow: var(--shadow); display: block; }
.stage-locked .kglyph { width: 60px; height: 60px; color: var(--muted); }
.stage-locked .lockmsg { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.stage-locked .lockmsg .ic { width: 15px; height: 15px; }
.stage-locked .lockmsg .lk { color: var(--accent-ink); font-weight: 700; text-decoration: underline; cursor: pointer; }
.stage-locked .lockmsg .lk:hover { color: var(--ink); }

/* POOL credit link */
.foot-credit a.pool-link, .login-credit a.pool-link { color: #2563eb; font-weight: 500; }
.pool-link b { font-weight: 800; }
.pool-link:hover { text-decoration: underline; }

/* ---------- locked label overlaid on the card image (top-left) ---------- */
.card-lock { position: absolute; top: 9px; left: 9px; z-index: 3; display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700; color: #fff; background: rgba(17,17,17,.74); border-radius: 6px;
  padding: 2px 7px 2px 6px; box-shadow: var(--shadow); }
.card-lock .ic { width: 12px; height: 12px; }
/* on a card the lock chip sits top-RIGHT, so the type badge keeps its top-left corner
   (the detail-page stage keeps the top-left placement of the base rule above). */
.card .card-lock { left: auto; right: 9px; }

/* ---------- placeholder glyphs for non-previewable assets ---------- */
.card .preview .kglyph { width: 52px; height: 52px; opacity: .9; }
.noprev .kglyph { width: 60px; height: 60px; color: #cfd2dd; margin-bottom: 12px; }
.np-label { font-size: 17.5px; font-weight: 700; color: #e9eaf0; }
.np-sub { font-size: 14.5px; color: #aab0c0; margin-top: 4px; }

/* detail no-preview stage: tinted with the same colour + icon as the overview card */
.stage-glyph { color: #6b7280; }
.stage-glyph .noprev { color: inherit; }   /* let the icon inherit the kind colour */
.stage-glyph.k-doc { background: #eef4ff; color: #2563eb; }
.stage-glyph.k-sheet { background: #e9f7ef; color: #0f9d58; }
.stage-glyph.k-slide { background: #fff1e6; color: #ea580c; }
.stage-glyph.k-audio { background: #fdecf5; color: #db2777; }
.stage-glyph.k-archive, .stage-glyph.k-other { background: #f1f1f3; color: #6b7280; }
.stage-glyph.k-text { background: #eef1f6; color: #475569; }
.stage-glyph .kglyph { color: currentColor; opacity: .92; }
.stage-glyph .np-label { color: var(--ink); }
.stage-glyph .np-sub { color: var(--muted); }

/* wide media detail (PDF/video/YouTube): full-width stage, info laid out below */
.detail-wide { display: block; }
.detail-wide .detail-main { margin-bottom: 18px; }
.detail-wide .stage { max-height: 82vh; }
.detail-wide .stage iframe, .detail-wide .stage video { height: 80vh; }
.detail-wide .detail-side { position: static; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px 26px; align-items: start; }
.detail-wide .d-title { grid-column: 1 / -1; }
.detail-wide .d-actions { grid-column: 1 / -1; }
.detail-wide .d-meta, .detail-wide .d-block { margin-top: 0; }

/* plain-text asset: editor (owner) + read-only view */
.stage-text { display: block; overflow: hidden; background: #fff; position: relative; min-height: 0; }
.stage-text .text-edit { box-sizing: border-box; width: 100%; min-height: 31vh; display: block; border: 0; outline: none;
  resize: vertical; padding: 22px 24px; font-family: var(--font); font-size: 15.5px; line-height: 1.7; color: var(--ink); background: #fff; }
.stage-text .text-view { box-sizing: border-box; width: 100%; margin: 0; min-height: 31vh; padding: 22px 24px; white-space: pre-wrap;
  word-wrap: break-word; font-family: var(--font); font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.text-copy { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s; }
.text-copy:hover { color: var(--ink); border-color: var(--border-strong); background: var(--bg-soft); }
.text-copy .ic { width: 16px; height: 16px; }
/* inline-editable asset title (owner): looks like the h1, click to edit, pen on hover */
.page-head:has(.title-wrap) > div:first-child { flex: 1 1 auto; min-width: 0; }   /* let the title use the full width */
.title-wrap { position: relative; display: block; }
.title-edit { box-sizing: border-box; width: 100%; display: block; resize: none; overflow: hidden;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  font-family: var(--font-head); font-size: 24.5px; font-weight: 700; letter-spacing: -.4px; color: var(--ink); line-height: 1.2;
  padding: 2px 34px 2px 7px; margin-left: -7px; }
.title-edit:hover { border-color: var(--line); }
.title-edit:focus { border-color: var(--accent); outline: none; background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.title-pen { position: absolute; right: 8px; top: 9px; width: 17px; height: 17px;
  color: var(--muted); opacity: 0; pointer-events: none; transition: opacity .12s; }
.title-wrap:hover .title-pen { opacity: .7; }
.title-edit:focus + .title-pen { opacity: 0; }
/* inline-editable description (owner) */
.d-desc-edit { box-sizing: border-box; width: 100%; resize: vertical; min-height: 60px; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
  background: #fff; outline: none; }
.d-desc-edit:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.save-status { min-height: 20px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.save-status.ok { color: #0f9d58; }
.save-status.err { color: var(--danger); }

/* "+ New asset" tabbed dialog */
.na-tabs { margin-bottom: 16px; }
.na-drop { cursor: default; }
.na-drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.na-drop.drag .drop-ic { color: var(--accent-ink); }
.na-drop .link-btn { margin-top: 4px; }
.na-foot { display: flex; justify-content: flex-end; margin-top: 4px; }

/* homepage: total-assets count next to the Activity heading (.section-h is already flex) */
.dash-count { color: var(--muted); font-size: 13.5px; font-weight: 400; white-space: nowrap; }

/* SMTP settings grid */
.smtp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 12px; }
.smtp-grid .field input { width: 100%; box-sizing: border-box; }
.smtp-tls { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 560px) { .smtp-grid { grid-template-columns: 1fr; } }

/* download usage limit control */
.dl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl-row input[type=range] { flex: 1 1 200px; min-width: 160px; max-width: 340px; accent-color: var(--accent); }
.dl-mb { font-weight: 600; min-width: 78px; color: var(--ink-2); }
.dl-period { max-width: 150px; }

/* search thumbnails: tint + coloured icon by kind (consistent with cards/detail) */
.sp-thumb.k-image, .sp-thumb.k-doc { background: #eef4ff; color: #2563eb; }
.sp-thumb.k-pdf { background: #fdeeec; color: #d4452f; }
.sp-thumb.k-video, .sp-thumb.k-youtube { background: #f3eefe; color: #7c3aed; }
.sp-thumb.k-audio { background: #fdecf5; color: #db2777; }
.sp-thumb.k-sheet { background: #e9f7ef; color: #0f9d58; }
.sp-thumb.k-slide { background: #fff1e6; color: #ea580c; }
.sp-thumb.k-archive, .sp-thumb.k-other { background: #f1f1f3; color: #6b7280; }
.sp-thumb.k-text { background: #eef1f6; color: #475569; }
.sp-thumb .kglyph { width: 22px; height: 22px; }
.rr-thumb .kglyph { width: 26px; height: 26px; }

/* folder cards: blue thumbnail (sidebar colour) + larger white folder icon */
.folder-card .preview.k-folder { background: var(--brand); color: var(--brand-fg); }
.folder-card .preview .glyph { width: 50px; height: 50px; }

/* search results: list / grid view toggle */
.toolbar .tb-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.viewtoggle .vt { border: 0; background: none; padding: 7px 9px; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.viewtoggle .vt + .vt { border-left: 1px solid var(--line); }
.viewtoggle .vt:hover { background: var(--bg-soft); }
.viewtoggle .vt.on { background: var(--ink); color: #fff; }
.viewtoggle .vt .ic { width: 16px; height: 16px; }

/* video thumbnail picker */
.modal.frame-modal { max-width: 640px; }
.frame-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.frame-grid .fr { border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: #0e0e12; aspect-ratio: 16/9; display: block; padding: 0; }
.frame-grid .fr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-grid .fr:hover { border-color: var(--accent); }
.frame-grid .fr.busy { opacity: .5; }
.modal.crop-modal { max-width: 640px; }
.cropper { position: relative; overflow: hidden; margin: 0 auto; max-width: 100%; background: var(--bg-soft); border-radius: 8px; line-height: 0; touch-action: none; }
.crop-img { max-width: 100%; max-height: 56vh; display: block; user-select: none; -webkit-user-drag: none; }
.crop-box { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.35); cursor: move; }
.crop-handle { position: absolute; right: -9px; bottom: -9px; width: 17px; height: 17px; background: #fff; border: 2px solid var(--accent); border-radius: 50%; cursor: nwse-resize; }

/* dashboard "why register" info note (guests) */
.info-note { display: flex; gap: 12px; align-items: flex-start; background: #eef4ff; border: 1px solid #cfe0ff;
  color: #1f4e8a; border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; font-size: 15.5px; }
.info-note .info-ic { color: #2f6fb0; flex-shrink: 0; margin-top: 1px; }
.info-note .info-ic .ic { width: 20px; height: 20px; }
.info-note b { color: #163d6b; }
.info-note a { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }
.info-note a:hover { text-decoration: underline; }

/* notify partners page */
.nt-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 16px; flex-wrap: wrap; }
.nt-all { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; color: var(--ink-2); font-weight: 550; cursor: pointer; }
.nt-actions { display: flex; gap: 9px; align-items: center; }
.ua-published { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 550; color: var(--ink-2); }
.ua-published .ic { color: #16a34a; }
.ua-dirty { display: none; align-items: center; gap: 12px; }
.ua-dirty-text { font-size: 14.5px; color: var(--ink-2); font-weight: 550; }
#uaActions.is-dirty .ua-published { display: none; }
#uaActions.is-dirty .ua-dirty { display: inline-flex; }
.nt-table td, .nt-table th { vertical-align: middle; }
.nt-table .nt-cbcell { width: 42px; text-align: center; }
.nt-cb { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.nt-lab { font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
.nt-nolink { color: var(--muted); font-size: 13.5px; }
.nt-folder, .nt-when { color: var(--muted); font-size: 14.5px; }
.nt-table tbody tr.nt-pick { cursor: pointer; }
.nt-table tbody tr.nt-pick:hover { background: var(--bg-soft); }
.nt-table tbody tr.is-checked, .nt-table tbody tr.is-checked.nt-pick:hover { background: var(--accent-soft); }
.nt-table tr.is-sent { opacity: .55; background: var(--bg-soft); cursor: default; }
.nt-table tr.is-sent .nt-cb { cursor: not-allowed; }
.sent-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sent-tag .ic { width: 14px; height: 14px; color: var(--accent-ink); }
.nt-table .verb { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px; }
.verb.move { background: #eef4ff; color: #2563eb; }

/* email preview modal */
.modal.email-modal { max-width: 680px; }
.email-modal .rec-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.rec-lbl { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-top: 5px; }
.rec-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rec { font-size: 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.email-frame { width: 100%; height: 52vh; border: 1px solid var(--line); border-radius: 10px; background: #f6f6f7; }

/* disabled-looking button (non-clickable, but keeps its hover tooltip) */
.btn.is-disabled { opacity: .55; cursor: not-allowed; background: var(--bg-soft); color: var(--muted); }
.btn.is-disabled:hover { background: var(--bg-soft); }

/* analytics dashboard */
.an-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.an-stat { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.an-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; }
.an-ic .ic { width: 20px; height: 20px; }
.an-v { font-size: 25.5px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.an-k { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.an-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; }
.an-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.an-h h2 { font-size: 16.5px; margin: 0; }
.an-legend { display: flex; gap: 14px; font-size: 13.5px; color: var(--muted); }
.an-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.an-legend .lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.an-legend .lg.v::before { background: var(--accent); }
.an-legend .lg.d::before { background: #2563eb; }
.an-chart { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 8px; }
.an-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; cursor: default; }
.an-stack { flex: 1; width: 100%; max-width: 30px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.an-seg { width: 100%; border-radius: 3px; }
.an-seg.v { background: var(--accent); }
.an-seg.d { background: #2563eb; }
.an-bar:hover .an-seg { filter: brightness(.92); }
.an-bx { font-size: 11.5px; color: var(--muted); }
/* three top-lists (downloaded / viewed / saved) — auto-fit so they flow 3 → 2 → 1 by width
   instead of being pinned to a column count that only suits one screen size */
.an-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-bottom: 8px; }
.an-cols .an-panel { margin-bottom: 0; }
/* per-partner usage table */
.an-utable { width: 100%; border-collapse: collapse; margin: 4px 0 -4px; }
.an-utable th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 600; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.an-utable td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.an-utable tr:last-child td { border-bottom: 0; }
.an-utable .num { text-align: right; white-space: nowrap; }
.ut-name { font-weight: 600; color: var(--ink); }
.ut-mail { font-size: 12.5px; color: var(--muted); }
.ut-bytes { display: inline-flex; align-items: center; gap: 9px; justify-content: flex-end; }
.ut-bar { display: inline-block; width: 68px; height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.ut-bar > span { display: block; height: 100%; background: #18a558; border-radius: 3px; }
.an-top { display: flex; flex-direction: column; }
.an-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-radius: 8px; border-bottom: 1px solid var(--line); }
.an-row:last-child { border-bottom: 0; }
.an-row:hover { background: var(--bg-soft); }
.an-rank { width: 20px; text-align: center; font-weight: 700; color: var(--muted); font-size: 14.5px; flex-shrink: 0; }
.an-badge { font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; flex-shrink: 0; }
.an-title { flex: 1; min-width: 0; font-weight: 550; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-count { font-size: 14px; font-weight: 650; color: var(--accent-ink); white-space: nowrap; flex-shrink: 0; }
.verb.ev-view { background: var(--accent-soft); color: var(--accent-ink); }
.verb.ev-download { background: #eef4ff; color: #2563eb; }
.verb.ev-zip { background: #fff3d6; color: #9a6b00; }
.an-by { color: var(--muted); font-size: 13.5px; }
.an-link { font-weight: 600; }
.an-link:hover { color: var(--accent-ink); }
.an-filters { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 18px; }
.an-fgroup { display: flex; align-items: center; gap: 10px; }
.an-flabel { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.an-seg-group { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; padding: 2px; gap: 2px; }
.an-fbtn { border: 0; background: transparent; color: var(--ink-2); font-size: 14.5px; font-weight: 550; padding: 5px 12px; border-radius: 7px; transition: background .12s, color .12s; }
.an-fbtn:hover { color: var(--ink); }
.an-fbtn.on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

@media (max-width: 820px) {
  .an-stats { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0, …), not a bare 1fr: 1fr means minmax(auto, 1fr) and that auto floor is the
     content's min-content, which a nowrap .an-title made wider than the phone. Same grid
     blowout as .dash-cols had. */
  .an-cols { grid-template-columns: minmax(0, 1fr); }
}
.an-cols > * { min-width: 0; }   /* grid items default to min-width:auto and would overflow too */

/* language switcher */
.langmenu { position: relative; flex-shrink: 0; }
.langbtn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: #fff;
  border-radius: 9px; padding: 7px 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .3px; }
.langbtn:hover { background: var(--bg-soft); color: var(--ink); }
.langbtn .chev-sm { width: 13px; height: 13px; color: var(--muted); }
#langMenu .menu { min-width: 170px; }
.lang-list .mi { gap: 8px; }
.lang-list .mi b { min-width: 22px; }
.lang-list .mi.on, .lang-list .mi.on .lang-full { color: var(--accent-ink); }
.lang-full { color: var(--muted); font-size: 13px; }

/* settings page */
.settings-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); max-width: 720px; }
.settings-card + .settings-card { margin-top: 16px; }   /* space between boxed sections in a tab */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-info { min-width: 0; }
.set-label { font-weight: 600; font-size: 15px; }
.set-desc { font-size: 13px; color: var(--muted); margin-top: 3px; max-width: 470px; }
.set-select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 38px 8px 12px; font-size: 14px; background-color: #fff; color: var(--ink); flex-shrink: 0; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8a92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: #cdd3da; border-radius: 999px; transition: background .15s; }
.switch .slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch.sw-sm { width: 38px; height: 22px; }
.switch.sw-sm .slider::before { height: 16px; width: 16px; }
.switch.sw-sm input:checked + .slider::before { transform: translateX(16px); }
.lang-checks { display: flex; flex-wrap: wrap; gap: 9px 18px; justify-content: flex-end; max-width: 380px; }
.lang-check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.lang-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* modal checkbox field (e.g. invite-partner owner role) */
.check-field { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; }
.check-field > input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.check-field span { display: flex; flex-direction: column; gap: 2px; }
.check-field small { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.check-field.disabled { cursor: default; opacity: .55; }
.check-field.disabled > input { cursor: default; }
.yt-help { margin-top: 10px; font-size: 13px; }
.yt-help summary { cursor: pointer; color: var(--accent); font-weight: 500; width: fit-content; list-style: revert; }
.yt-help-body { margin-top: 8px; color: var(--muted); line-height: 1.55; }
.yt-help-body a { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--accent); font-weight: 500; text-decoration: none; }
.yt-help-body a:hover { text-decoration: underline; }

/* owner badge in the partners list */
.owner-pill { background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.owner-pill .pill-ic { width: 12px; height: 12px; }

/* locked assets: a brighter thumbnail sets them apart from open downloads */
.card.is-locked .preview { filter: brightness(1.12); background: #fff; }

/* branding & footer settings */
.set-h2 { font-size: 16px; margin: 26px 0 12px; letter-spacing: -.2px; }
.settings-card + .set-h2 { margin-top: 28px; }
.color-input { width: 52px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; flex-shrink: 0; }
.set-text { border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 14px; color: var(--ink); background: #fff; width: 100%; }
.set-text:focus { outline: none; border-color: var(--ink-2); }
.logo-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.logo-prev { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 80px; padding: 0 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; }
.logo-prev img { max-height: 26px; max-width: 130px; width: auto; }
.set-block { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.set-block:last-of-type { border-bottom: 0; }
.set-block > .set-label { margin-bottom: 10px; }
.foot-link-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.foot-link-row .fl-label { max-width: 160px; }
.foot-link-row .rm-link { flex-shrink: 0; color: var(--muted); }
.foot-link-row .rm-link:hover { color: var(--danger); background: #fdecea; }
.foot-socials { display: flex; flex-direction: column; gap: 8px; }
.soc-row { display: flex; align-items: center; gap: 10px; border-radius: 8px; }
.soc-row.dragging { opacity: .5; }
.soc-drag { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; color: var(--muted); cursor: grab; }
.soc-drag:active { cursor: grabbing; }
.soc-ic { width: 20px; height: 20px; color: var(--ink-2); display: inline-flex; flex-shrink: 0; }
.soc-name { width: 78px; font-size: 13.5px; color: var(--ink-2); flex-shrink: 0; }
.set-foot { padding: 16px 20px; display: flex; justify-content: flex-end; }

/* font pickers + live preview (Design settings) */
.set-select.font-sel { min-width: 210px; }
.font-preview { margin: 0 20px 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-sink); }
.font-preview .fp-h { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 6px; color: var(--ink); }
.font-preview .fp-b { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.font-preview .fp-lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }

/* asset page: tabbed "related" section (recently viewed / same folder / similar) */
.asset-tabs { margin-top: 36px; }
.tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.tab { border: 0; background: none; padding: 10px 14px; font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.tab-n { font-size: 11.5px; font-weight: 700; background: var(--bg-soft); color: var(--ink-2); border-radius: 20px; padding: 1px 7px; }
.tab-more { display: flex; justify-content: center; margin-top: 20px; }
.tab-actions { margin-top: 16px; }
.tab-empty { color: var(--muted); font-size: 14.5px; padding: 6px 0 2px; }

/* similar-assets picker (owner) */
.sim-modal .m-body { display: flex; flex-direction: column; }
.sim-search { margin-bottom: 10px; }
.sim-results { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.sim-results:empty { display: none; }
.sim-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.sim-row:last-child { border-bottom: 0; }
.sim-row:hover { background: var(--bg-soft); }
.sim-row .sp-thumb { width: 38px; height: 38px; border-radius: 6px; flex-shrink: 0; }
.sim-row-main { flex: 1; min-width: 0; }
.sim-row-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-row-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-add { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; display: inline-flex; }
.sim-row.picked { background: var(--accent-soft); }
.sim-row.picked .sim-add { color: var(--accent-ink); }
.sim-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13.5px; }
.sim-sel-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 16px 0 8px; }
.sim-selected { display: flex; flex-wrap: wrap; gap: 6px; }

/* favicon preview stays square */
.fav-prev img { max-width: 28px; max-height: 28px; }

/* meta description char counter + email subject rows */
.char-count { font-size: 12px; color: var(--muted); text-align: right; margin-top: 4px; }
.subj-row { margin-bottom: 10px; }
.subj-lbl { display: block; font-size: 13px; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }