:root {
  --pb-page-bg: #f1f3f5;
  --pb-link-min-height: 48px;
  --pb-text: #22323e;
  --pb-muted: #536875;
  --pb-line: #dae2e8;
  --pb-surface: #fff;
  --pb-soft: #f2f5f7;
  --pb-accent: #b52e45;
  --pb-accent-hover: #942439;
  --pb-accent-text: #a4263c;
  --pb-accent-soft: #faebee;
  --pb-accent-line: #e8bac4;
  --pb-focus: #2268aa;
  --pb-green: #2e6f5f;
  --pb-green-soft: #eaf2f0;
}
:root.io-black-mode, :root[data-theme="dark"] {
  --pb-page-bg: #191f2a;
  --pb-text: #edf1f8;
  --pb-muted: #b3c1cf;
  --pb-line: #3d495a;
  --pb-surface: #242d3b;
  --pb-soft: #2b3646;
  --pb-accent: #a83b51;
  --pb-accent-hover: #8d3043;
  --pb-accent-text: #ff9eb0;
  --pb-accent-soft: #492c3c;
  --pb-accent-line: #754557;
  --pb-focus: #9ec8fb;
  --pb-green: #a2dbc7;
  --pb-green-soft: #293d3e;
}
:root[data-theme="dark"] .pb-personal { color-scheme: dark; }
.pb {
  color: var(--pb-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  line-height: 1.5;
}
.pb *, .pb *::before, .pb *::after { box-sizing: border-box; }
.pb [hidden], .pb[hidden] { display: none !important; }
.pb :where(a) { color: inherit; text-decoration: none; }
.pb :focus-visible, #home-main :is(.pb-site-actions, .pb-leaf-tools) > :focus-visible,
#home-main .pb-leaf-grip:focus-visible {
  outline: 2px solid var(--pb-focus);
  outline-offset: 2px;
}
.pb button, .pb input, .pb select { font: inherit; }
.pb :where(h1, h2, h3, p, dl, dd) { margin: 0; }
.pb-ui {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pb-symbols { position: absolute; }
.pb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.pb-button {
  min-height: 38px;
  padding: 7px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--pb-line);
  border-radius: 8px;
  background: var(--pb-surface);
  color: var(--pb-text);
  font-size: 14px !important;
  font-weight: 620 !important;
  line-height: 1.35;
  cursor: pointer;
  white-space: nowrap;
}
.pb-button .pb-ui { width: 17px; height: 17px; }
.pb-button:hover { background: var(--pb-soft); color: var(--pb-text); }
.pb-button:disabled, .pb-transfer:disabled { opacity: .52; cursor: default; }
.pb-plain { background: transparent; border-color: transparent; }
.pb .pb-primary { background: var(--pb-accent); border-color: transparent; color: #fff; }
.pb .pb-primary:not(:disabled):hover { background: var(--pb-accent-hover); color: #fff; }
.pb-count { color: var(--pb-muted); font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-empty, .pb-muted { color: var(--pb-muted); font-size: 14px; }
.pb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 0; margin: 0; list-style: none; }
.pb-item {
  min-width: 0;
  position: relative;
  border: 1px solid var(--pb-line);
  border-radius: 10px;
  background: var(--pb-surface);
}
.pb-item:hover, .pb-item:focus-within { border-color: var(--pb-accent-line); }
.pb-item:has(.pb-card-menu[data-open]) { z-index: 2; }
.pb-link {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 10px;
  min-height: var(--pb-link-min-height);
  border-radius: inherit;
  text-decoration: none !important;
}
.pb-link:hover { color: var(--pb-accent-text); }
.pb-icon {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--pb-soft);
  color: var(--pb-muted);
  font-size: 15px;
  font-weight: 720;
  line-height: 1;
  overflow: hidden;
}
.pb-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 3px;
  background: var(--pb-surface);
  object-fit: contain;
  opacity: 0;
}
.pb-icon img[data-ready] { opacity: 1; }
.pb-words { display: grid; min-width: 0; }
.pb-name, .pb-domain { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-name { font-size: 14px; line-height: 18px; font-weight: 600; }
.pb-domain { color: var(--pb-muted); font-size: 11px; line-height: 15px; }

.home .pb-home { color: inherit; font-family: inherit; margin-block-end: 20px; }
.pb-home-heading { display: flex; align-items: center; gap: 4px; }
.pb-home-heading .tab-title { display: inline-flex; align-items: center; min-width: 0; white-space: normal; }
.pb-home-heading .tab-title svg { flex: none; }
:is(.pb-home, .pb-collection) .pb-item { box-shadow: inset 0 0 22px var(--pb-soft); }
.pb-home .pb-empty { display: flex; align-items: center; min-height: calc(var(--pb-link-min-height) + 2px); margin-block: 0; }
.pb-home .pb-home-tabs { flex: 0 1 auto; min-width: 0; max-width: 100%; scrollbar-width: none; }
.pb-home-heading .tab-to-more { min-width: 0; }
@media (min-width: 768px) {
  .pb-home-heading .tab-title { flex: 0 0 auto; }
}
@media (max-width: 767px) {
  .pb-home-heading { flex-wrap: wrap; justify-content: space-between; }
  .pb-home .pb-home-tabs { order: 1; flex-basis: 100%; }
}
@media (min-width: 720px) {
  .pb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .pb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
#home-main article.pb-quick-site { position: relative; --pb-action-space: 34px; }
#home-main article.pb-quick-site > .pb-site-actions {
  position: absolute;
  inset: 0 4px 0 auto;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 28px;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 2;
}
#home-main .pb-site-actions > :is(.pb-catalog-save, .togo) {
  position: static !important;
  transform: none !important;
  display: grid !important;
  place-items: center;
  width: 28px !important;
  height: 28px !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pb-muted) !important;
  cursor: pointer;
  line-height: 1;
  opacity: 1 !important;
  pointer-events: auto;
  transition: background-color .12s, color .12s;
}
#home-main .pb-site-actions > :is(.pb-catalog-save, .togo) svg { width: 18px; height: 18px; display: block; }
#home-main .pb-site-actions > :is(.pb-catalog-save, .togo):hover { background: var(--pb-soft); color: var(--pb-accent-text) !important; }
#home-main .pb-site-actions > .pb-catalog-save[aria-pressed="true"] { color: var(--pb-accent-text) !important; }
#home-main .pb-catalog-save[aria-pressed="true"] svg { fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  #home-main article.pb-quick-site > .pb-site-actions > :is(.pb-catalog-save, .togo) {
    opacity: 0 !important;
    pointer-events: none;
  }
  #home-main article.pb-quick-site:is(:hover, :has(:focus-visible)) > .sites-body {
    padding-inline-end: var(--pb-action-space) !important;
  }
  #home-main article.pb-quick-site:is(:hover, :has(:focus-visible)) > .pb-site-actions > :is(.pb-catalog-save, .togo) {
    opacity: 1 !important;
    pointer-events: auto;
  }
}
@media (hover: none), (pointer: coarse), (pointer: none) {
  #home-main article.pb-quick-site > .sites-body { padding-inline-end: var(--pb-action-space) !important; }
}
@media (max-width: 767px) {
  #home-main article.pb-quick-site { --pb-action-space: 29px; }
  #home-main article.pb-quick-site > .pb-site-actions { inset-inline-end: 1px; width: 29px; }
  #home-main .pb-site-actions > .pb-catalog-save { width: 29px !important; height: 40px !important; }
  #home-main article.pb-quick-site .pb-site-actions > .togo { display: none !important; }
}

@media (max-width: 350px) {
  #home-main article.pb-quick-site > .sites-body { padding-inline-start: 4px !important; }
  #home-main article.pb-quick-site .item-header { margin-inline-end: 2px !important; }
}

#home-main .pb-leaf-tools {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-inline-start: 8px;
}
#home-main .pb-leaf-tools .tab-more { position: static; margin-inline-start: 0 !important; }
#home-main .pb-leaf-tools .pb-button {
  min-height: 30px;
  padding: 3px 7px;
  border-color: transparent;
  background: transparent;
  color: var(--pb-muted);
  font-size: 12px !important;
}
#home-main .pb-leaf-tools .pb-button:hover { background: var(--pb-soft); color: var(--pb-text); }
#home-main .pb-leaf-tools [aria-pressed="true"] { background: var(--pb-accent-soft); color: var(--pb-accent-text); }
#home-main :is(.pb-leaf-tools button[hidden], .pb-leaf-grip) { display: none; }
#home-main [data-pb-leaf] > article { position: relative; }
@media (hover: hover) and (pointer: fine) {
  #home-main [data-pb-leaf] > .pb-quick-site > .sites-body { cursor: grab; user-select: none; }
}
#home-main [data-pb-leaf-edit] > article > .pb-site-actions { display: none !important; }
#home-main [data-pb-leaf-edit] > article:has(> .pb-leaf-grip) > .sites-body {
  padding-inline-end: var(--pb-action-space, 34px) !important;
}
#home-main [data-pb-leaf-edit] > article > .pb-leaf-grip {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-end: 2px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  min-height: 40px;
  padding: 0;
  border-color: transparent;
  background: var(--pb-soft);
  color: var(--pb-muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
#home-main [data-pb-leaf][data-drag-active] :is(.sites-body, .pb-leaf-grip) { cursor: grabbing; }
@media (max-width: 767px) {
  #home-main .pb-leaf-tools:not(.pb-home-tools) { position: absolute; top: 0; inset-inline-end: 0; }
  #home-main .pb-home-tools { margin-inline-start: auto; }
  #home-main .pb-home-tools .pb-button { min-height: 44px; }
}

body.pb-personal {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--body-bg-color, var(--pb-page-bg));
}
.pb-personal-main {
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  width: 100%;
}
.pb-personal > .main-header, .pb-personal > .main-footer { flex: none; }
.pb-page {
  max-width: var(--home-max-width, 1600px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 15px;
  align-items: start;
  margin: 0 auto;
  padding: 0 10px 48px;
}
.home .static-banner[data-personal-landscape] {
  background-image: var(--pb-hero-image);
  background-color: #dce2df;
  background-position: center !important;
}
.home .static-banner[data-personal-landscape]::before { background: none; }
@media (max-width: 767px) {
  .home .static-banner[data-personal-landscape] { background-image: var(--pb-hero-mobile); }
}
.pb-search { width: 100%; min-height: 0; }
.id-banner .pb-search {
  padding-inline: 18px;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .32), transparent 78%);
}
.pb-search .search-group { list-style: none; }
.pb-search .search-group li { padding: 0; opacity: 1; }
.pb-side-column {
  display: grid;
  min-width: 0;
  gap: 12px;
}
@media (min-width: 768px) {
  .pb-page { grid-template-columns: var(--main-aside-width, 200px) minmax(0, 1fr); }
  .pb-page .pb-workspace { grid-column: 2; }
  /* The sidebar starts above the content while staying inside main at the footer. */
  .pb-side-rail {
    position: absolute;
    z-index: 2;
    inset-block: 0 10px;
    inset-inline-start: max(10px, calc((100% - var(--home-max-width, 1600px)) / 2 + 10px));
    inline-size: var(--main-aside-width, 200px);
    pointer-events: none;
  }
  .pb-side-column {
    position: sticky;
    inset-block-start: var(--main-nav-hight, 80px);
    max-block-size: calc(100vh - var(--main-nav-hight, 80px) - 10px);
    max-block-size: calc(100dvh - var(--main-nav-hight, 80px) - 10px);
    align-content: start;
    overflow-y: auto;
    scrollbar-width: thin;
    pointer-events: auto;
  }
}
.pb-sidebar {
  padding: 9px;
  border: 1px solid var(--pb-line);
  border-radius: 12px;
  background: var(--main-bg-color, var(--pb-surface));
}
.pb-clock-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.pb-clock-toggle:focus-visible { outline: 2px solid var(--pb-focus); outline-offset: 2px; }
.pb-clock-caret { color: var(--pb-muted); font-size: 12px; line-height: 1; }
@media (max-width: 479px) {
  .pb-clock-caret { display: none; }
}
.pb-sidebar-label { margin: 5px 8px 9px !important; color: var(--pb-muted); font-size: 13px; font-weight: 720; }
.pb-nav-main, .pb-nav-tools { display: grid; gap: 3px; }
.pb-nav-tools { border-top: 1px solid var(--pb-line); margin-top: 8px; padding-top: 7px; }
.pb-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pb-text);
  font-size: 14px !important;
  text-align: start;
  text-decoration: none !important;
  cursor: pointer;
}
.pb-nav-item .pb-ui, .pb-nav-tools .pb-nav-item { color: var(--pb-muted); }
.pb .pb-nav-tools [data-action="copy"] { white-space: nowrap; }
.pb-nav-item:hover { background: var(--pb-soft); }
.pb-nav-item[aria-current] { background: var(--pb-accent-soft); color: var(--pb-accent-text); font-weight: 700; }
.pb-nav-item[aria-current] .pb-ui { color: inherit; }
.pb-category-nav {
  display: grid;
  gap: 3px;
  max-height: min(38vh, 320px);
  overflow: auto;
  padding: 2px;
}
.pb-category-nav .pb-nav-item { gap: 5px; }
.pb-category-nav .pb-nav-item > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-category-nav .pb-nav-item > span:last-child {
  margin-inline-start: auto;
  color: var(--pb-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pb-workspace {
  min-width: 0;
  border-radius: 12px;
  background: var(--main-bg-color, var(--pb-surface));
}
.pb-hero {
  min-height: 54px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 12px 12px 6px;
}
.pb-title-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-inline-size: 0; }
.pb-hero h1 { font-size: clamp(19px, 1.8vw, 24px); font-weight: 760; letter-spacing: -.025em; line-height: 1.2; }
.pb-hero:has(.pb-toolbar:not([hidden])) h1 { font-size: 20px; font-weight: 680; overflow-wrap: anywhere; }
.pb-hero .pb-count { font-size: 12px; }
.pb-collection-top { margin-block-end: 10px; }
.pb-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 100%; margin-inline-start: auto; }
.pb-toolbar > button { min-height: 36px; max-width: 100%; padding-inline: 9px; font-size: 13px !important; }
.pb-toolbar > button[aria-pressed="true"] {
  color: var(--pb-accent-text);
  background: var(--pb-accent-soft);
  border-color: var(--pb-accent-line);
}
.pb-category-tabs.slider-tab {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}
.pb-category-tabs .pb-category-tab {
  display: inline-block;
  flex: none;
  max-width: min(14em, 72vw);
  border: 0;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.pb-category-tab:focus-visible { outline-offset: -2px; }
.pb-category-tabs .pb-category-tab[data-category-drop] { background: var(--pb-accent-soft); color: var(--pb-accent-text); }
.pb-filter { position: relative; margin: 0; }
.pb-filter .search-key { display: block; width: 100%; }
.pb-filter:has([data-action="clear-filter"]:not([hidden])) .search-key { padding-inline-end: 108px; }
.pb-filter .search-key::-webkit-search-cancel-button { display: none; }
.pb-filter .search-tools {
  position: absolute;
  inset-block: 0;
  inset-inline: auto 0;
  display: flex;
  align-items: center;
}
.pb-filter [data-action="clear-filter"] {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--hero-placeholder);
  font-size: 19px !important;
}
.pb-filter .search-submit-btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -4px;
}
.pb input::placeholder { color: var(--pb-muted); }
.pb-hero { scroll-margin-top: calc(var(--main-nav-hight, 70px) + 16px); }
:is(.pb-collection, .pb-backup) { padding: 6px 12px 12px; }
.pb-page .pb-link { padding-inline-end: 30px; }
@media (max-width: 920px) {
  .pb-page .pb-link { padding-inline: 7px 25px; gap: 5px; }
}
.pb-zero { text-align: center; padding: 42px 10px; }
.pb-zero .pb-actions { justify-content: center; margin-top: 13px; }
.pb-order-note { color: var(--pb-muted); font-size: 13px; margin: -4px 0 10px !important; }
.pb-batch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-block-end: 12px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--pb-line);
  border-radius: 10px;
  background: var(--pb-soft);
  font-size: 13px;
}
.pb-select-all { display: flex; align-items: center; min-height: 44px; gap: 7px; margin: 0; cursor: pointer; }
.pb-batch [data-selected-count] { color: var(--pb-muted); }
.pb-batch .pb-actions { margin-inline-start: auto; flex-wrap: wrap; }
.pb-batch .pb-button { min-height: 44px; }
.pb-page [data-selecting] .pb-link { padding-inline-end: 44px; cursor: pointer; }
.pb-select-bookmark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  transform: translateY(-50%);
  cursor: pointer;
}
.pb-select-all input, .pb-select-bookmark input { width: 18px; height: 18px; accent-color: var(--pb-accent); cursor: pointer; }
.pb-item[data-selected] { border-color: var(--pb-accent-line); background: var(--pb-accent-soft); }
.pb-card-menu { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; }
.pb-item:has(> .pb-handle) .pb-card-menu { inset-block-start: 0; }
.pb-item:has(> .pb-handle) .pb-more { min-height: 24px; }
.pb-card-menu .pb-more {
  min-width: 24px;
  min-height: 28px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--pb-muted);
}
.pb-card-menu .pb-more:hover, .pb-card-menu[data-open] .pb-more { background: var(--pb-soft); color: var(--pb-text); }
.pb-menu-items {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 112px;
  padding: 4px;
  border: 1px solid var(--pb-line);
  border-radius: 8px;
  background: var(--pb-surface);
  box-shadow: 0 8px 22px #15263728;
}
.pb-menu-items .pb-button { min-height: 35px; justify-content: start; }
.pb-menu-items .pb-delete { color: var(--pb-accent-text); }
.pb-handle {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 3px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--pb-muted);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.pb-handle .pb-ui { width: 16px; height: 16px; }
.pb-handle:hover { background: var(--pb-soft); }
.pb-handle:active { cursor: grabbing; }
.pb-collection:has([data-category-drag]) .pb-collection-top {
  position: sticky;
  z-index: 4;
  top: calc(var(--main-nav-hight, 80px) + 5px);
  border-radius: 9px;
  background: var(--main-bg-color, var(--pb-surface));
  box-shadow: 0 3px 10px #1427371f;
}
.pb-personal-main [data-category-drop] {
  color: var(--pb-accent-text);
  background: var(--pb-accent-soft);
  outline: 2px solid var(--pb-focus);
  outline-offset: -2px;
}
.pb-grid[data-draggable] { user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .pb-grid[data-draggable] .pb-link { cursor: grab; }
}
.pb-grid[data-drag-active], .pb-grid[data-drag-active] :is(.pb-link, .pb-handle) { cursor: grabbing; }
:is(.pb-item, #home-main [data-pb-leaf] > article)[data-dragging] { opacity: .53; }
:is(.pb-item, #home-main [data-pb-leaf] > article)[data-drop]::after {
  content: "";
  position: absolute;
  inset-block: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--pb-focus);
  pointer-events: none;
}
:is(.pb-item, #home-main [data-pb-leaf] > article)[data-drop="before"]::after { inset-inline-start: -5px; }
:is(.pb-item, #home-main [data-pb-leaf] > article)[data-drop="after"]::after { inset-inline-end: -5px; }
.pb-drag-preview {
  position: fixed;
  z-index: 2000;
  inset: 0 auto auto 0;
  max-width: min(220px, 68vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid var(--pb-focus);
  border-radius: 7px;
  background: var(--pb-surface);
  box-shadow: 0 4px 12px #16243b28;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

.pb-backup { display: grid; gap: 12px; }
.pb-backup > div { margin-block-start: 0; }
.pb-backup-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pb-transfer {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 76px;
  padding: 11px 14px;
  border: 1px solid var(--pb-line);
  border-radius: 10px;
  background: var(--pb-surface);
  box-shadow: inset 0 0 22px var(--pb-soft);
  color: var(--pb-text);
  text-align: start;
  cursor: pointer;
}
.pb-transfer:not(:disabled):hover { border-color: var(--pb-accent-line); }
.pb-transfer-icon { display: grid; place-items: center; flex: 0 0 39px; height: 39px; border-radius: 8px; color: var(--pb-green); background: var(--pb-green-soft); }
.pb-transfer-import .pb-transfer-icon { color: var(--pb-accent-text); background: var(--pb-accent-soft); }
.pb-transfer-label { display: grid; gap: 2px; }
.pb-transfer-label strong { font-size: 15px; font-weight: 650; }
.pb-transfer-label > span { color: var(--pb-muted); font-size: 13px; text-wrap: balance; }
.pb-preview, .pb-persistence, .pb-snapshot, .pb-backup-message { border: 1px solid var(--pb-line); border-radius: 10px; background: var(--pb-surface); }
.pb-preview { padding: 12px; scroll-margin-top: calc(var(--main-nav-hight, 70px) + 16px); }
.pb-preview[data-file-over] { border-color: var(--pb-accent-text); background: var(--pb-accent-soft); }
.pb-preview-placeholder {
  padding: 16px 12px;
  border: 1px dashed var(--pb-line);
  border-radius: 8px;
  background: var(--pb-soft);
  color: var(--pb-muted);
  font-size: 14px;
  text-align: center;
}
.pb-preview h2 { margin-bottom: 10px; font-size: 15px; font-weight: 650; line-height: 1.3; }
.pb-hero h1:focus, .pb-preview h2:focus { outline: none; }
.pb-import-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 7px;
  background: var(--pb-soft);
  font-size: 14px;
}
.pb-import-file strong { overflow-wrap: anywhere; }
.pb-import-file > span, .pb-import-file .pb-ui { color: var(--pb-muted); }
.pb-import-file > span { font-size: 12px; overflow-wrap: anywhere; }
.pb-import-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block: 13px !important; }
.pb-import-stats > div {
  min-width: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
  align-items: baseline;
  gap: 7px;
  padding: 6px 10px;
  border-inline-start: 3px solid var(--pb-line);
  border-radius: 5px;
  background: var(--pb-soft);
  color: var(--pb-muted);
}
.pb-import-stats dt { font-size: 12px; }
.pb-import-stats dd { font-size: 23px; line-height: 1.3; font-weight: 730; font-variant-numeric: tabular-nums; }
.pb-import-stats > div:first-child { border-color: var(--pb-green); }
.pb-import-stats > div:first-child dd { color: var(--pb-green); }
.pb-import-stats > div[data-has-invalid] { border-color: var(--pb-accent-text); }
.pb-import-stats > div[data-has-invalid] dd { color: var(--pb-accent-text); }
.pb-preview-preferences { margin-block: 8px; }
.pb-import-options { min-width: 0; border: 0; margin: 0; padding: 0; }
.pb-import-options label { display: flex; align-items: start; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--pb-line); cursor: pointer; }
.pb-import-options input { width: 16px; height: 16px; flex: none; margin: 4px 0 0; accent-color: var(--pb-accent); }
.pb-import-options strong { font-size: 14px; }
.pb-import-options small { display: block; margin-top: 2px; font-size: 13px; color: var(--pb-muted); }
.pb-import-options small[data-over-capacity] { color: var(--pb-accent-text); }
.pb-preview-actions { justify-content: end; margin-top: 14px; }
.pb-snapshot, .pb-persistence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14px; }
.pb-persistence { min-width: 0; }
.pb-persistence-heading { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 0; }
.pb-persistence .pb-ui { color: var(--pb-green); }
.pb-snapshot button { margin-inline-start: auto; }
.pb-persistence [data-action="persist"] { min-height: 36px; max-width: 100%; white-space: normal; }
.pb-persistence-state, .pb-persistence-note { color: var(--pb-muted); font-size: 13px; }
.pb-persistence-note { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
.pb-persistence-note:empty { display: none; }
.pb-persistence [data-protected] { color: var(--pb-green); font-weight: 700; }
.pb-privacy { display: flex; align-items: start; gap: 8px; color: var(--pb-muted); font-size: 13px; }
.pb-privacy .pb-ui { width: 16px; height: 16px; margin-top: 2px; }
.pb-backup-message { padding: 8px 12px; color: var(--pb-muted); font-size: 14px; }
.pb-backup-message[data-error] { color: var(--pb-accent-text); border-color: var(--pb-accent-line); }

@media (max-width: 767px) {
  .pb-page { gap: 12px; }
  .pb-personal .header-tools .site-theme-toggle { justify-content: center; gap: 0; }
  .pb-personal .header-tools .site-theme-toggle > span { display: none; }
  .pb-category-sidebar, .pb-sidebar-label { display: none; }
  .pb-category-tabs.slider-tab { width: 100%; }
  .pb-nav-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-nav-tools { margin-top: 5px; padding-top: 5px; }
  .pb-nav-item { min-height: 38px; justify-content: center; }
  .pb-personal .pb-nav-item[data-action="copy"] { padding-inline: 6px; gap: 6px; }
}
@media (max-width: 590px) {
  .pb-toolbar { width: 100%; flex-wrap: nowrap; justify-content: flex-start; margin-inline-start: 0; }
  .pb-toolbar > button { flex: 0 1 auto; min-width: 0; min-height: 40px; padding-inline: 6px; white-space: normal; overflow-wrap: anywhere; }
  .pb-toolbar [data-action="add"] .pb-ui { display: none; }
  .pb-backup, .pb-backup-actions { gap: 8px; }
  .pb-backup-actions { grid-template-columns: 1fr; }
  .pb-transfer { min-height: 72px; gap: 7px; padding: 8px; }
  .pb-transfer-icon { flex-basis: 29px; height: 29px; }
  .pb-transfer-label strong { font-size: 14px; }
  .pb-transfer-label > span { font-size: 12px; }
  .pb-import-file { grid-template-columns: auto minmax(0, 1fr); gap: 4px 7px; }
  .pb-import-file > span { grid-column: 2; }
  .pb-import-stats { gap: 5px; }
  .pb-import-stats > div { padding-inline: 5px; gap: 4px; }
  .pb-import-stats dd { font-size: 18px; }
}
@media (max-width: 355px) {
  .pb-transfer-icon { flex-basis: 23px; height: 26px; }
}

.pb-status {
  position: fixed;
  z-index: 999;
  inset-inline-end: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  max-width: min(480px, calc(100% - 32px));
  padding: 9px 13px;
  border: 1px solid var(--pb-line);
  border-radius: 9px;
  color: var(--pb-text);
  background: var(--pb-surface);
  box-shadow: 0 6px 24px #16243b24;
  font-size: 14px;
}
.pb-status .pb-button { margin-inline-start: 4px; }
.pb-dialog {
  box-sizing: border-box;
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
  width: 530px;
  padding: 0;
  margin: auto;
  border: 1px solid var(--pb-line);
  border-radius: 12px;
  color: var(--pb-text);
  background: var(--pb-surface);
  box-shadow: 0 18px 60px #13203d45;
}
.pb-dialog::backdrop { background: #16223880; }
.pb-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--pb-line); }
.pb-dialog-header h2 { font-size: 20px; font-weight: 730; }
.pb-dialog-header .pb-button { font-size: 21px !important; }
.pb-form { display: grid; gap: 12px; padding: 16px 18px 18px; font-size: 14px; }
.pb-form label { display: grid; gap: 5px; margin: 0; }
.pb-form small { color: var(--pb-muted); }
.pb-form input:not([type="file"]), .pb-form select, .pb-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--pb-line);
  border-radius: 7px;
  background: var(--pb-surface);
  color: var(--pb-text);
}
.pb-form textarea { font: inherit; resize: vertical; }
.pb-form .pb-plain { justify-self: start; }
.pb-form-actions { justify-content: end; }
.pb-message { color: var(--pb-accent-text); overflow-wrap: anywhere; }
.pb-message:empty { display: none; }
.pb-directory { display: grid; gap: 7px; padding: 10px; border-radius: 8px; background: var(--pb-soft); }
.pb-results { display: grid; gap: 4px; }
.pb-option { justify-content: start; white-space: normal; text-align: left; }
.pb-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pb-dialog [data-move-title] { overflow-wrap: anywhere; }