:root {
  --bg: #f7f7f8;
  --panel: #ffffff;
  --text: #1d1d22;
  --muted: #6b6b76;
  --border: #e2e2e7;
  --hover: #f0f0f4;
  --accent: #2f6fde;
  --accent-text: #ffffff;
  --danger: #c4314b;
  --ok: #2e8b57;
  --drop: #2f6fde;
  --folder: #d9a520;
  --folder-bg: #fdf8ea;
  --folder-border: #ecdcae;
  --group: #2f6fde;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1b1f;
    --panel: #24242a;
    --text: #ececf1;
    --muted: #9a9aa6;
    --border: #36363f;
    --hover: #2e2e35;
    --accent: #5b8ff0;
    --danger: #ef6a80;
    --ok: #5fc18a;
    --drop: #7aa5f5;
    --folder-bg: #2c2a22;
    --folder-border: #4a4330;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }
code { font-family: ui-monospace, Consolas, monospace; font-size: 0.92em; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); }
[hidden] { display: none !important; }

button, .button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button, .button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
button:hover, .button:hover { background: var(--hover); }
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger { color: var(--danger); }
button.primary.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.link { border: none; background: none; padding: 4px 6px; color: var(--accent); min-height: 0; }
input[type=text], input[type=url], input[type=password], input[type=search], select, textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}
textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; resize: vertical; }
input[type=checkbox] { width: 16px; height: 16px; margin: 0; flex: none; }

/* header */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.top h1 { margin: 0; font-size: 17px; }
.top nav { display: flex; gap: 4px; flex: 1; }
.top nav a { padding: 6px 10px; border-radius: 6px; color: var(--text); text-decoration: none; }
.top nav a.active { background: var(--hover); font-weight: 600; }
.sync-ok { color: var(--ok) !important; }
.sync-error { color: var(--danger) !important; }
.sync-off { color: var(--muted) !important; }

.view { max-width: 1100px; margin: 0 auto; padding: 12px 16px 80px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar input { flex: 1 1 320px; }
.toolbar-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
#summary { margin: 8px 2px; font-size: 12px; }

/* layout: sidebar + main */
/* The sidebar sits against the window's left edge; its width is set by
   dragging its right edge (--sidebar-w, set from JS). */
.layout { display: grid; grid-template-columns: var(--sidebar-w, 250px) minmax(0, 1fr); }
body:not(.view-tabs) .layout, body.sidebar-closed .layout { grid-template-columns: minmax(0, 1fr); }
body:not(.view-tabs) .sidebar, body:not(.view-tabs) .drawer-toggle, body.sidebar-closed .sidebar { display: none; }
.view { max-width: none; margin: 0; }
#view-tabs { width: 100%; max-width: 1200px; margin: 0 auto; }
#view-import, #view-settings { width: 100%; max-width: 900px; margin: 0 auto; }
.sidebar {
  position: sticky;
  top: 49px;
  align-self: start;
  height: calc(100vh - 49px);
  height: calc(100dvh - 49px);
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.sidebar-content { display: flex; flex-direction: column; height: 100%; padding: 10px 6px 10px 10px; }
.sidebar-resizer { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.sidebar-resizer:hover, body.resizing .sidebar-resizer { background: color-mix(in srgb, var(--accent) 35%, transparent); }
body.resizing { cursor: col-resize; user-select: none; }
.side-list { flex: 1; overflow: auto; min-height: 0; }
.side-footer { border-top: 1px solid var(--border); padding-top: 6px; }
.side-footer .check { margin: 6px 6px 0; color: var(--muted); }
.side-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.side-item:hover { background: var(--hover); }
.side-item.active { background: var(--hover); font-weight: 600; }
.side-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .count { flex: none; color: var(--muted); font-size: 12px; }
.side-item .twisty, .twisty-space { flex: none; width: 18px; min-height: 18px; }
.side-item.home { font-weight: 600; }
.side-item.drop-into { background: color-mix(in srgb, var(--drop) 22%, transparent); }
.icon-trash { background: var(--muted); clip-path: polygon(10% 15%, 90% 15%, 80% 100%, 20% 100%); }
.drawer-backdrop { display: none; }
.drawer-toggle { display: inline-flex; border: none; background: none; font-size: 18px; padding: 2px 6px; min-height: 30px; }

/* breadcrumbs */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 10px 0 0; font-size: 15px; }
.crumbs .crumb.current { font-weight: 600; padding: 4px 6px; }
.crumbs .sep { color: var(--muted); }
.crumbs .empty-trash { margin-left: auto; }

/* tree: each top-level folder or group is its own section */
.vspacer { overflow-anchor: none; }.search-hit > section { margin-bottom: 10px; }
.show-all { display: flex; margin: 6px 10px 8px 4px; min-height: 30px; color: var(--accent); }
.tree > section, .tree > .row, .pinned-section > section, .search-hit > section { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.tree > section > .row, .pinned-section > section > .row, .search-hit > section > .row { border-top-color: transparent; }
.search-path { margin: 14px 2px 4px; font-size: 12px; color: var(--muted); }
.children { padding-left: 22px; }
/* Groups inside groups, at any depth: their own bordered box. */
.children > section.node { border: 1px solid var(--border); border-radius: 6px; margin: 6px 8px 6px 0; padding: 4px 0; }
.children > section.node > .row { border-top-color: transparent; }
/* folders: tinted sections that open on click */
.tree section.folder-card { background: var(--folder-bg); border-color: var(--folder-border); }
.folder-card > .row { cursor: pointer; min-height: 48px; }
.folder-card > .row:hover { background: color-mix(in srgb, var(--folder) 16%, transparent); }
.folder-card .title { font-size: 15px; }
.folder-card .chevron { color: var(--muted); font-size: 18px; padding: 0 4px; }
.title.untitled { color: var(--muted); font-weight: 500; }
.pin { flex: none; font-size: 12px; }

/* pinned section: the section is tinted, its items keep their own look */
.pinned-section { padding: 8px; margin-bottom: 4px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pinned-section > section:last-child { margin-bottom: 0; }
.pinned-section .section-label { margin: 0 4px 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.pinned-sep { border: none; border-top: 1px solid var(--border); margin: 14px 4px 14px; }
.badge { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge-lock { background: color-mix(in srgb, var(--folder) 22%, transparent); color: var(--text); }

/* move dialog */
.dest-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dest-row { display: flex; align-items: center; gap: 2px; }
.dest-row .dest { flex: 1; min-width: 0; }
.dest-row .twisty, .dest-row .twisty-space { flex: none; width: 22px; }
.dest-tools input[type=search] { flex: 1 1 220px; }
.dest .dest-label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.dest .dest-label.untitled { color: var(--muted); }
.dest .dest-when { flex: none; color: var(--muted); font-size: 12px; }
.dest .dest-lock { flex: none; font-size: 12px; }
.when { white-space: nowrap; }
section.flash > .row { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 30%, transparent); } }
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 2px 8px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.row:hover { background: var(--hover); }
.row.container { font-weight: 600; border-top-color: var(--border); }
.tree > .node:first-child > .row { border-top-color: transparent; }
.row .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.tab .title { color: var(--text); text-decoration: none; }
.row.tab .title:hover { text-decoration: underline; }
/* Group and folder headers: the name wraps, and the counts and date move to
   a second line when they don't fit beside it. */
.row .head { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 2px 0; }
.row .head .title { white-space: normal; overflow-wrap: anywhere; }
.row .head .meta { margin-left: auto; }
.row .meta, .row .host { flex: none; color: var(--muted); font-weight: 400; font-size: 12px; }
.row .host { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.row .actions { flex: none; display: flex; gap: 4px; }
.row .actions button { min-height: 26px; padding: 1px 8px; font-size: 12px; font-weight: 400; }
/* Tab rows: compact; the site name runs to the right edge and gives way to
   the action buttons on hover. */
.row.tab { position: relative; min-height: 28px; padding-top: 0; padding-bottom: 0; }
.row.tab .actions { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); visibility: hidden; }
.row.tab .actions button { min-height: 22px; background: var(--panel); }
.row.tab:hover .actions, .row.tab:focus-within .actions { visibility: visible; }
.row.tab:hover .host, .row.tab:focus-within .host { visibility: hidden; }
@media (hover: none) {
  .row.tab .actions { position: static; transform: none; visibility: visible; }
  .row.tab .host { display: none; }
}
.twisty { border: none; background: none; min-height: 24px; width: 22px; padding: 0; justify-content: center; color: var(--muted); }
.icon { flex: none; width: 14px; height: 12px; border-radius: 2px; }
.icon-folder { background: var(--folder); clip-path: polygon(0 15%, 40% 15%, 50% 0, 100% 0, 100% 100%, 0 100%); }
.icon-group { background: var(--group); border-radius: 3px; }
.virtual .icon-group { background: var(--danger); }
.favicon { flex: none; width: 16px; height: 16px; border-radius: 3px; }
.favicon.blank { background: var(--border); }
/* Drag and drop: the dragged item is lifted out and a dashed placeholder
   marks where it will land; folders (whose contents aren't shown) highlight. */
.drag-hidden { display: none !important; }
.row.drop-into { background: color-mix(in srgb, var(--drop) 18%, transparent); }
.drop-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 14px;
  border: 2px dashed var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 14%, transparent) 0 8px, color-mix(in srgb, var(--accent) 7%, transparent) 8px 16px);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  box-sizing: border-box;
}
.drop-placeholder::before { content: "↳ Move here"; flex: none; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 11px; }
.drop-placeholder .ph-note { flex: none; color: var(--accent); font-weight: 600; }
.drop-placeholder.new-group::before { content: "＋ New group"; }
.drop-placeholder.new-group.pinned::before { content: "＋ New pinned group"; }
.drop-placeholder .ph-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }
.drop-placeholder.for-tab { margin: 6px 10px 6px 4px; }
.drop-placeholder.for-container { min-height: 48px; margin: 6px 4px 14px; }
.children > .drop-placeholder.for-container { margin: 8px 10px 8px 4px; }
/* While dragging, the group under the pointer gets room at the end of its
   contents to drop into. */
body.is-dragging section.drag-over > .children { padding-bottom: 16px; }
.empty { padding: 40px 20px; text-align: center; }

/* cards (import/settings) */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.card h2 { margin: 0 0 8px; font-size: 16px; }
.card h3 { margin: 0 0 6px; font-size: 14px; }
.card.inner { background: var(--bg); margin: 10px 0 0; }
details.card summary { cursor: pointer; font-weight: 600; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.field { display: block; margin: 8px 0; }
.field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.check { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.check select { width: auto; padding: 3px 6px; }
.selectable { user-select: all; }
ol { padding-left: 20px; }
li { margin: 3px 0; }

/* menu, dialog, toast */
.menu {
  position: absolute;
  z-index: 20;
  min-width: 190px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.menu button { display: flex; width: 100%; border: none; background: none; text-align: left; justify-content: flex-start; }
.menu button:hover { background: var(--hover); }
.menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
dialog {
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
}
dialog:has(.wide) { width: min(820px, calc(100vw - 24px)); }
dialog::backdrop { background: rgb(0 0 0 / 0.4); }
.dialog-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; max-height: calc(100vh - 42px); max-height: calc(100dvh - 42px); }
.dialog-body h2 { margin: 0; font-size: 16px; }
.dialog-body > :nth-child(2) { overflow: auto; min-height: 0; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.fields label { display: block; margin-bottom: 8px; }
.fields span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.dest-list { display: flex; flex-direction: column; margin-top: 8px; max-height: 50vh; overflow: auto; }
.dest { border: none; background: none; justify-content: flex-start; gap: 8px; border-radius: 4px; min-height: 34px; }
.dest:disabled { opacity: 0.55; }
.cleanup-options { display: flex; flex-wrap: wrap; column-gap: 18px; }
.cleanup-list h3 { font-size: 13px; margin: 12px 0 4px; }
.cleanup-row { display: flex; gap: 10px; align-items: flex-start; padding: 5px 2px; border-bottom: 1px solid var(--border); }
.cleanup-row input { margin-top: 2px; }
.cleanup-text { display: flex; flex-direction: column; min-width: 0; }
.cleanup-title { font-weight: 600; overflow-wrap: anywhere; }
.cleanup-url, .cleanup-path { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border-radius: 8px;
  background: #2b2b31;
  color: #fff;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
}
.toast .link { color: #9cc0ff; font-weight: 600; }

/* open.html: helper for links that can't be opened automatically */
body.helper { display: flex; justify-content: center; padding: 40px 16px; }
.helper-card { width: min(640px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; }
.helper-card h1 { margin: 0 0 6px; font-size: 20px; }
.helper-title { margin: 0 0 10px; font-weight: 600; overflow-wrap: anywhere; }
.helper-url { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); overflow-wrap: anywhere; }
.helper-card kbd { padding: 0 4px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
body.is-mobile .desktop-step, body.is-desktop .mobile-step { display: none; }

/* popup */
body.popup { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-width: 240px; }
body.popup button { justify-content: center; min-height: 38px; }
body.popup hr { width: 100%; border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.compact-only { display: none !important; }

/* sidebar becomes a slide-out drawer on narrow screens */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  /* On narrow screens the sidebar is a drawer; the desktop "closed" state and width don't apply. */
  body.view-tabs.sidebar-closed .sidebar { display: block; }
  .sidebar-resizer { display: none; }
  .sidebar {
    position: fixed;
    z-index: 15;
    top: 0;
    left: 0;
    /* 100vh on Android includes the area under the address bar; dvh is the
       part actually visible. */
    height: 100vh;
    height: 100dvh;
    width: min(300px, 85vw);
    background: var(--panel);
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    box-shadow: 4px 0 20px rgb(0 0 0 / 0.25);
  }
  body.drawer-open .sidebar { transform: none; }
  body.drawer-open .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 14; background: rgb(0 0 0 / 0.35); }
}

@media (max-width: 640px) {
  .wide-only { display: none !important; }
  .compact-only { display: inline-flex !important; }
  .top { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
  .top nav { order: 3; flex-basis: 100%; }
  .view { padding: 10px 10px 80px; }
  .toolbar-buttons button { min-height: 30px; padding: 2px 8px; font-size: 13px; }
  .children { padding-left: 10px; }
  .row { padding: 3px 4px; gap: 6px; min-height: 42px; }
  .row.tab .host { display: none; }
  .row .actions button { min-height: 34px; min-width: 34px; justify-content: center; }
  .row.tab { min-height: 38px; }
  .row.tab .actions { position: static; transform: none; visibility: visible; }
}

/* Firefox tab group colors (approximately Firefox's own). */
.tg-grey { --tg: #8a8a96; }
.tg-blue { --tg: #4a8cf7; }
.tg-purple { --tg: #a868f3; }
.tg-cyan { --tg: #1fb5c9; }
.tg-green { --tg: #3fae5c; }
.tg-yellow { --tg: #e3b000; }
.tg-orange { --tg: #f2802b; }
.tg-red { --tg: #e5484d; }
.tg-pink { --tg: #ec5fa6; }
button.badge-tg { min-height: 0; border: 1px solid var(--tg); background: color-mix(in srgb, var(--tg) 22%, transparent); color: var(--text); cursor: pointer; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--tg); }
.swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--panel) inset; }
.helper .choices { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 14px 0; }
.helper .choice-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.helper .choice-row select { width: auto; }
.danger-text { color: var(--danger); }

/* Firefox container label on a saved tab (container colors, approximately). */
.ctr { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; border-left: 3px solid var(--ctr, #8a8a96); border-radius: 2px; font-size: 11px; color: var(--muted); }
.ctr-blue { --ctr: #37adff; }
.ctr-turquoise, .ctr-cyan { --ctr: #00c79a; }
.ctr-green { --ctr: #51cd00; }
.ctr-yellow { --ctr: #ffcb00; }
.ctr-orange { --ctr: #ff9f00; }
.ctr-red { --ctr: #ff613d; }
.ctr-pink { --ctr: #ff4bda; }
.ctr-purple { --ctr: #af51f5; }
.ctr-violet { --ctr: #9d62e2; }
.ctr-toolbar, .ctr-gray { --ctr: #8a8a96; }

/* Sidebar tree: tighter rows; children indented in a box whose left border
   is the indent guide, brighter along the branch holding the current folder. */
.sidebar-content { font-size: 13px; }
.side-item { min-height: 24px; padding: 1px 6px; gap: 5px; }
.side-item .count { font-size: 11px; }
.side-children { margin-left: 14px; padding-left: 2px; border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.side-children.on-path { border-left-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.side-item.holds-active { background: color-mix(in srgb, var(--hover) 55%, transparent); }
.tg-dot { flex: none; width: 9px; height: 9px; margin: 0 2px; border-radius: 50%; background: var(--tg); }
.side-toggle { flex: none; min-height: 0; padding: 0 4px; border: none; background: none; color: var(--muted); font-size: 15px; line-height: 1; }
.side-toggle:hover { color: var(--text); }
@media (max-width: 900px) {
  /* Touch: keep rows easy to tap. */
  .side-item { min-height: 32px; }
}

/* Folder and group names in the list. */
.row.container .head .title { font-size: 15px; }
.folder-card .head .title { font-size: 16px; }