.layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 8px 20px 40px;
}
.nav-cols {
  display: flex;
  gap: 8px;
  align-items: start;
  position: sticky;
  top: 12px;
}
.nav-col {
  width: max-content;
  min-width: 148px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(10, 16, 32, 0.42));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.folder {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}
.folder::after {
  content: "|";
  order: 3;
  width: 0.7em;
  color: var(--muted);
  font-weight: 500;
  text-align: center;
  opacity: 0.55;
}
.folder.has-kids::after {
  content: "\203A";
  opacity: 1;
}
.folder:hover { background: rgba(255,255,255,0.06); }
.folder-name-tooltip {
  position: fixed;
  z-index: 50;
  max-width: calc(100vw - 24px);
  padding: 7px 10px;
  border: 1px solid var(--tooltip-border, #a5e6ff);
  border-radius: 9px;
  background: linear-gradient(135deg, var(--tooltip-start, #1677be), var(--tooltip-end, #6d3bb8));
  color: var(--tooltip-text, #fff);
  box-shadow: 0 10px 24px var(--tooltip-shadow, rgba(35, 144, 255, 0.28)), inset 0 1px 0 rgba(255,255,255,0.3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  pointer-events: none;
  white-space: nowrap;
}
.folder.on {
  background: linear-gradient(90deg, hsla(var(--h), 80%, 64%, 0.22), rgba(255,255,255,0.04));
  box-shadow: inset 0 0 0 1px hsla(var(--h), 80%, 64%, 0.35), 0 0 18px hsla(var(--h), 80%, 64%, 0.12);
}
.folder b {
  flex: 0 0 var(--folder-name-width, 2.8em);
  width: var(--folder-name-width, 2.8em);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-style: normal;
  font-weight: 500;
  text-align: justify;
  text-align-last: justify;
}
.folder b .folder-name { display: block; width: max-content; }
.folder b.is-overflow .folder-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.folder:hover b.is-overflow .folder-name,
.folder:focus-visible b.is-overflow .folder-name {
  width: max-content;
  text-overflow: clip;
  animation: folder-name-pan 3.6s ease-in-out infinite alternate;
}
@keyframes folder-name-pan {
  0%, 20% { transform: translateX(0); }
  80%, 100% { transform: translateX(calc(-1 * var(--folder-overflow))); }
}
.folder em { font-style: normal; font-weight: 500; }
.folder > span {
  order: 4;
  min-width: 28px;
  text-align: center;
  color: var(--muted);
  background: transparent;
  border-radius: 999px;
  font-size: 12px;
  padding: 1px 7px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--h), 80%, 64%);
  box-shadow: 0 0 10px hsl(var(--h), 80%, 64%);
  flex: 0 0 auto;
}
main { min-width: 0; padding-top: 0; }
.section {
  margin: 0 8px 28px;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.section + .section { margin-top: 28px; }
.section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.section h2 span { color: var(--muted); font-size: 13px; font-weight: 500; }
.section h2 .section-parent { margin-right: -4px; font-size: inherit; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--bookmark-card-min, 210px), 1fr));
  gap: var(--bookmark-grid-gap, 12px);
}
.card {
  position: relative;
  display: flex;
  min-width: 0;
  gap: var(--bookmark-card-gap, 12px);
  align-items: flex-start;
  min-height: var(--bookmark-card-height, 88px);
  padding: var(--bookmark-card-padding, 14px);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(12, 18, 34, 0.48));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.14);
  overflow: hidden;
  animation: rise 0.42s ease backwards;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* The text column, not the trailing glow layer, must be allowed to shrink so titles can ellipsize. */
.card > div:not(.ico) { min-width: 0; flex: 1; }
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 28%, hsla(var(--h), 90%, 72%, 0.16) 50%, transparent 72%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: hsl(var(--h), 80%, 68%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), 0 0 28px hsla(var(--h), 80%, 64%, 0.28);
}
.card:hover::before { transform: translateX(120%); }
html[data-fx="on"] .card {
  transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
html[data-fx="on"] .card:is(:hover, :focus-visible) {
  transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
}
.card.is-tilting {
  transition-duration: 0.08s;
}
.card-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), hsla(var(--h), 90%, 74%, 0.16), transparent 62%);
  transition: opacity 0.3s ease;
}
.card:is(:hover, :focus-visible) .card-glow { opacity: 1; }
html[data-fx="off"] .card-glow { display: none; }
.ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle, hsla(var(--h), 90%, 74%, 0.5), hsla(var(--h), 90%, 74%, 0) 65%);
  animation: ripple-out 0.55s ease-out both;
}
@keyframes ripple-out {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(11); opacity: 0; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
/* Only a newly opened view rises in; searching, pinning or showing more keeps cards still. */
:is(#main, #pinnedGrid)[data-enter="off"] .card { animation: none; }
.grid .card:nth-child(2), .grid .bookmark-item:nth-child(2) > .card { animation-delay: 0.03s; }
.grid .card:nth-child(3), .grid .bookmark-item:nth-child(3) > .card { animation-delay: 0.06s; }
.grid .card:nth-child(4), .grid .bookmark-item:nth-child(4) > .card { animation-delay: 0.09s; }
.grid .card:nth-child(5), .grid .bookmark-item:nth-child(5) > .card { animation-delay: 0.12s; }
.grid .card:nth-child(6), .grid .bookmark-item:nth-child(6) > .card { animation-delay: 0.15s; }
.more {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.more:hover { color: var(--text); }
button.card {
  width: 100%;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.ico {
  position: relative;
  width: var(--bookmark-card-icon, 40px);
  height: var(--bookmark-card-icon, 40px);
  flex: 0 0 var(--bookmark-card-icon, 40px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(160deg, hsl(var(--h), 72%, 46%), hsl(var(--h), 58%, 20%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 0 16px hsla(var(--h), 80%, 60%, 0.18);
}
.ico span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: hsl(var(--h), 90%, 82%);
}
.ico img {
  position: absolute;
  inset: 0;
  width: var(--bookmark-card-icon-image, 24px);
  height: var(--bookmark-card-icon-image, 24px);
  margin: auto;
  object-fit: contain;
  padding: 0;
  background: transparent;
  transition: transform 0.22s ease, filter 0.22s ease;
}
/* Keep the letter visible while an icon is loading or being retried. */
img[data-fallback]:not([data-loaded]) { visibility: hidden; }
html[data-icon="logo"] .ico {
  background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.07));
}
html[data-icon="logo"] .ico img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.32));
}
html[data-icon="logo"] .card:hover .ico img {
  transform: scale(1.12);
}
/* One line keeps every card's domain and tags at the same height; the full title is the tooltip. */
.card h3 {
  margin: 0 0 4px;
  font-size: var(--bookmark-card-title, 14px);
  font-weight: 650;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card-peek { display: flex; gap: 5px; margin-top: 9px; }
.card-peek img {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px var(--stroke);
  object-fit: contain;
}
.section-parent { color: var(--muted); font-weight: 500; }
.card p { margin: 0; overflow: hidden; color: var(--muted); font-size: var(--bookmark-card-host, 12px); white-space: nowrap; text-overflow: ellipsis; }
.meta { margin-top: var(--bookmark-card-meta-margin, 8px); display: flex; gap: var(--bookmark-card-meta-gap, 6px); flex-wrap: wrap; }
.tag {
  font-size: var(--bookmark-card-tag, 11px);
  color: var(--muted);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 1px var(--bookmark-card-tag-padding, 7px);
}
.empty { color: var(--muted); padding: 60px 12px; text-align: center; }

/* The smallest density becomes a true speed-dial grid, so short cards do not
   carry a large unused text column beside the icon. */
html[data-card-density="60"]:is([data-layout="classic"], [data-layout="compact"], [data-layout="tabs"], [data-layout="tree"], [data-layout="accordion"]) .card {
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-height: 94px;
  padding: 10px 6px;
  text-align: center;
}
html[data-card-density="60"]:is([data-layout="classic"], [data-layout="compact"], [data-layout="tabs"], [data-layout="tree"], [data-layout="accordion"]) .card > div:not(.ico) { width: 100%; }
html[data-card-density="60"]:is([data-layout="classic"], [data-layout="compact"], [data-layout="tabs"], [data-layout="tree"], [data-layout="accordion"]) .card h3 { margin: 0; font-size: var(--bookmark-card-title, 11px); }
html[data-card-density="60"]:is([data-layout="classic"], [data-layout="compact"], [data-layout="tabs"], [data-layout="tree"], [data-layout="accordion"]) .card p,
html[data-card-density="60"]:is([data-layout="classic"], [data-layout="compact"], [data-layout="tabs"], [data-layout="tree"], [data-layout="accordion"]) .card .meta,
html[data-card-density="60"]:is([data-layout="classic"], [data-layout="compact"], [data-layout="tabs"], [data-layout="tree"], [data-layout="accordion"]) .card-peek { display: none; }