/* My Snaps: a floating header card, compact file-type pills and one tidy tools row */
.app-top { height: auto; min-height: 66px; margin: 0; padding: 9px 22px 9px 18px; gap: 16px; background: var(--surface); border: 0; border-bottom: 1px solid var(--border); border-radius: 0 0 20px 20px; box-shadow: 0 8px 22px -16px rgba(35, 52, 76, .35); backdrop-filter: none; top: 0; }
.app-top .brand img { width: 40px; height: 40px; }
.app-top .app-name b { font-size: 21px; }
.hd-sep { flex: none; width: 1px; height: 30px; background: var(--border); }
.hd-title { flex: none; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.app-top .app-search { flex: 1; max-width: 520px; margin: 0 auto 0 8px; }
.app-top .app-search input { height: 42px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.app-top .app-search input:focus { background: var(--bg); border-color: var(--primary); }
.app-top .new-wrap { margin-left: auto; }
.app-new { border-radius: 999px; padding: 0 16px 0 14px; }
.bell-wrap { position: relative; flex: none; }
.hd-bell { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.hd-bell:hover { background: var(--surface-2); }
.hd-bell:focus-visible { outline: none; box-shadow: var(--ring); }
.bell-dot { position: absolute; right: 8px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: #ef4452; border: 2px solid var(--surface); }
.bell-dot[hidden] { display: none; }
.menu.bellm { width: 320px; padding: 8px; border-radius: 16px; }
.bn-h { margin: 0; padding: 8px 10px 6px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
.bn-i { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.bn-i + .bn-i { margin-top: 2px; }
.bn-i i { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--primary); }
.bn-i.warn i { background: #f59e0b; } .bn-i.bad i { background: #ef4452; }
.bn-i b { display: block; font-size: 14px; }
.bn-i a { color: var(--primary); font-weight: 700; }
.bn-i.none { color: var(--muted); }
.app-top .avatar { width: 42px; height: 42px; }

/* main: no banner; the pills row sits straight under the header */
.app-main { padding-top: 18px; }
.app-bar.plain { display: none; }
.app-bar { min-height: 0; padding: 0; margin-bottom: 12px; }
.app-bar h1 { font-size: 24px; }
.lib-hero { display: none; }
.lib-row { margin: 0 0 18px; padding: 10px 12px; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--sh1); }
.lib-types { gap: 8px; }
.lt { padding: 5px 12px 5px 5px; gap: 8px; border-radius: 12px; font-size: 14px; box-shadow: none; }
.lt:hover { box-shadow: var(--sh1); }
.lt-i { width: 28px; height: 28px; border-radius: 8px; }
.lt-i svg { width: 17px; height: 17px; }
.lt b { min-width: 22px; padding: 0 7px; font-size: 12px; line-height: 20px; }
.lt.on { background: linear-gradient(135deg, #1bb0e8, #0a7ca6); }
.lib-tools2 { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-tools2 .lib-view { padding: 3px; gap: 2px; border: 0; background: none; box-shadow: none; }
.lib-view button { padding: 7px 9px; border-radius: 10px; }
.lib-view button.on, .lib-view button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent); }
.lib-view button:not(.on):hover { background: var(--surface-2); }
.hd-vsep { width: 1px; height: 24px; background: var(--border); }
.lib-tools2 .app-sort select { height: 38px; padding: 0 12px; border-radius: 12px; box-shadow: var(--sh1); }
@media (max-width: 900px) {
  .app-top { margin: 0; padding: 8px 10px; gap: 10px; }
  .hd-sep, .hd-title { display: none; }
  .app-top .app-search { margin-left: 0; }
  .lib-row { padding: 8px; }
}
@media (max-width: 640px) { .app-top .app-name { display: none; } .app-top .app-search kbd { display: none; } .lib-tools2 { width: 100%; justify-content: space-between; } }

/* button colours: dark text on the bright cyan fills (like the site's own buttons), white text only on the deep teal */
.side-foot .side-upgrade { color: var(--on-primary); }
.side-foot .side-upgrade svg { color: var(--on-primary); }
.app-new, .app-new svg { color: var(--on-primary); }
.lt.on { background: linear-gradient(135deg, #0b8fb5, #07698c); color: #fff; }
.lib-view button.on, .lib-view button[aria-pressed="true"] { color: #00688c; }
.rc-grant { color: #00688c; }
.rc-go { color: var(--on-primary); }
.nm-ic, .rc-ic { color: #00688c; }
@media (prefers-color-scheme: dark) {
  .rc-grant, .nm-ic, .rc-ic, .lib-view button.on, .lib-view button[aria-pressed="true"] { color: #7fdcff; }
}

/* dark mode: the cards and the card menu follow the theme (their white background hid the light titles) */
@media (prefers-color-scheme: dark) {
  .my-grid .my-item, .tl-grid .my-item { background: var(--surface); border-color: var(--border); box-shadow: 0 5px 17px rgba(0, 0, 0, .35); }
  .my-item .kmenu { background: var(--surface); border-color: var(--border); }
  .app-name i { color: var(--text); }
}

/* the same cyan primary button in the manage panel, the move dialog and the copy-link button */
.mg-copy, .vs-btn.primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 10px 22px -10px rgba(0, 192, 248, .7); }
.mg-copy:hover, .vs-btn.primary:hover { background: var(--primary-2); color: var(--on-primary); }
.mg-act .rd { background: var(--primary); color: var(--on-primary); }
#my-move .mrow.on { background: var(--primary); color: var(--on-primary); }

/* the primary button, the same everywhere: deep cyan with white text */
.btn.primary,
.app-new,
.rc-go,
.side-foot .side-upgrade,
.vs-btn.primary,
.mg-copy,
.pf-btn:not(.ghost):not(.light):not(.ghostw):not(.danger),
.mg-act .rd,
.pu-ic { background: linear-gradient(135deg, #00AEEA, #0086C0); color: #fff; text-shadow: 0 1px 2px rgba(0, 50, 90, .4); border-color: transparent; box-shadow: 0 10px 22px -10px rgba(0, 134, 192, .75); }
.btn.primary:hover,
.app-new:hover,
.rc-go:hover,
.side-foot .side-upgrade:hover,
.vs-btn.primary:hover,
.mg-copy:hover,
.pf-btn:not(.ghost):not(.light):not(.ghostw):not(.danger):hover,
.mg-act .rd:hover,
.pu-ic:hover { background: linear-gradient(135deg, #0099D6, #0074AE); color: #fff; }
.btn.primary svg,
.app-new svg,
.rc-go svg,
.side-foot .side-upgrade svg,
.vs-btn.primary svg,
.mg-copy svg,
.pf-btn:not(.ghost):not(.light):not(.ghostw):not(.danger) svg,
.mg-act .rd svg,
.pu-ic svg { color: #fff; }
#my-move .mrow.on { background: #0086C0; color: #fff; }
.lt.on { background: linear-gradient(135deg, #00AEEA, #0086C0); }
.rc-go .rc-gd { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }

.rc-note b { color: #00688c; background: color-mix(in srgb, #00AEEA 18%, transparent); }
@media (prefers-color-scheme: dark) { .rc-note b { color: #7fdcff; } }

/* tighter: less space under the header and at the sides */
.app-main { padding: 10px 24px 64px; }
.lib-row { margin-bottom: 14px; }

/* no gap: the filter bar sits directly under the header and runs from the sidebar to the right edge */
.app-main { padding-top: 0; }
.lib-row { margin: 0 -24px 16px; padding: 10px 24px; border-radius: 0; border-width: 0 0 1px 0; box-shadow: none; }
.app-bar:not(.plain) { margin-top: 14px; }

.app-top { border-radius: 0; }