@layer components {
/* ========================================
   FavsHub 主题变量定义（第三阶段 CSS 现代化）
   主色 #10B981，暗色背景 #0B1120
   变量名与 promptpro-bundle.css 对齐，全站统一
   ======================================== */
/* :root 变量已由 tokens.css 统一管理（light-dark() 驱动），此处不再重复声明 */


/*!
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: var(--border);
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: var(--text-tertiary);
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: var(--text-tertiary);
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934200)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: var(--text-inverse);
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: var(--text-inverse);
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.flex {
  display: flex;
}

.h-screen {
  height: 100vh;
}

.w-1\/4 {
  width: 25%;
}

.w-3\/4 {
  width: 75%;
}

.w-64 {
  width: 16rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.cursor-pointer {
  cursor: pointer;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.625rem;
}

.border-r {
  border-right-width: 1px;
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.p-4 {
  padding: 1rem 1.5rem 0rem 1.5rem; 
}

.p-2 {
  padding: 0.5rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-0 {
  padding-left: 0px;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

/* Hide scrollbar for Chrome, Safari and Opera */
aside::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
aside {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Additional styles for sidebar toggle */
#sidebar-container {
  position: relative;
  transition: margin-left 0.3s;
  height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--sidebar-bg);
}

#sidebar-container.collapsed {
  margin-left: -16rem; /* Adjust this value to match the width of your sidebar */
}

#toggle-sidebar {
  position: fixed;
  bottom: 2rem;
  left: 14.75rem;
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: left 0.3s;
  z-index: 1000;
  height: 36px;
  width: 36px;
  color: var(--text-secondary);
  font-weight: bold;
}

#toggle-sidebar:hover {
  background-color: var(--surface-hover); /* Add hover effect */
  color: var(--text-primary);
}

#sidebar-container.collapsed #toggle-sidebar {
  left: 2rem;
}


body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0; /* 确�?�没??��?�认外边�?*/
  height: 100vh; /* Ensure body height spans the full viewport height */
  -webkit-font-smoothing: antialiased;
}

html {
  height: 100vh; /* Ensure html height spans the full viewport height */
}



/* 旧 gradient-background 规则已迁移至 themes.css（theme-bg-* 命名） */

#confirm-dialog,
#edit-dialog,
#edit-category-dialog {
  display: none;
  position: fixed;
  z-index: 1002;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--overlay);
  padding-top: 60px;
}

#confirm-dialog .modal-content,
#edit-dialog .modal-content,
#edit-category-dialog .modal-content {
  background-color: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 2rem;
  width: 80%;
  max-width: 360px;
  border-radius: 10px;
}

#confirm-dialog h2,
#edit-dialog h2,
#edit-category-dialog h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

#confirm-dialog p,
#edit-dialog p,
#edit-category-dialog p {
  margin-bottom: 20px;
  color: var(--text-primary);
}

#confirm-dialog .buttons,
#edit-dialog .form-buttons,
#edit-category-dialog .form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2rem;
}

#confirm-dialog button,
#edit-dialog button,
#edit-category-dialog button {
  padding: 0.5rem 2rem;
  border-radius: 8px;
  cursor: pointer;
}

#cancel-delete-button,
.cancel-button,
.cancel-category-button {
  background-color: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

#confirm-delete-button,
#edit-dialog button[type="submit"],
#edit-category-dialog button[type="submit"] {
  background-color: var(--primary);
  color: white;
}

#cancel-delete-button:hover,
.cancel-button:hover,
.cancel-category-button:hover {
  background-color: var(--surface-hover);
}

#confirm-delete-button:hover,
#edit-dialog button[type="submit"]:hover,
#edit-category-dialog button[type="submit"]:hover {
  background-color: var(--primary-hover);
}

#confirm-delete-button:active,
#edit-dialog button[type="submit"]:active,
#edit-category-dialog button[type="submit"]:active {
  transform: scale(0.98);
}

.close-button,
.close-category-button {
  color: var(--text-tertiary);
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  transition: color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.close-button:hover,
.close-button:focus,
.close-category-button:hover,
.close-category-button:focus {
  color: var(--text-primary);
  text-decoration: none;
}

.close-button:focus-visible,
.close-category-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.close-button:active,
.close-category-button:active {
  transform: scale(0.96);
}

#edit-dialog input[type="text"],
#edit-dialog input[type="url"],
#edit-dialog select,
#edit-category-dialog input[type="text"] {
  width: calc(100%);
  padding: 10px 12px;
  margin-top: 5px;
  border-radius: 8px;
  background-color: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#edit-dialog select {
  display: none;
}

#edit-dialog input[type="text"]:focus,
#edit-dialog input[type="url"]:focus,
#edit-dialog select:focus,
#edit-category-dialog input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-medium);
  background-color: var(--surface-raised);
}

#edit-dialog .edit-category-select {
  position: relative;
  width: 100%;
  margin-top: 5px;
}

#edit-dialog .edit-category-select-trigger {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  background: var(--surface-sunken);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}

#edit-dialog .edit-category-select-trigger:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}

#edit-dialog .edit-category-select-trigger.open {
  border-color: var(--primary);
  background: var(--surface-raised);
  box-shadow: 0 0 0 4px var(--primary-medium);
}

#edit-dialog .edit-category-select-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#edit-dialog .edit-category-select-text.placeholder {
  color: var(--text-secondary);
}

#edit-dialog .edit-category-select-arrow {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  transform: rotate(180deg);
}

#edit-dialog .edit-category-select-arrow svg {
  width: 18px;
  height: 18px;
}

#edit-dialog .edit-category-select-trigger.open .edit-category-select-arrow {
  transform: rotate(0deg);
}

#edit-dialog .edit-category-select-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 1005;
}

#edit-dialog .edit-category-select-dropdown.open {
  display: block;
}

#edit-dialog .edit-category-select-dropdown::-webkit-scrollbar {
  width: 6px;
}

#edit-dialog .edit-category-select-dropdown::-webkit-scrollbar-thumb {
  background: var(--overlay);
  border-radius: 999px;
}

#edit-dialog .edit-category-select-option {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-align: left;
  transition: all 0.15s ease;
}

#edit-dialog .edit-category-select-option:hover {
  background: var(--primary-light);
  color: var(--primary);
}

#edit-dialog .edit-category-select-option.selected {
  background: var(--primary-medium);
  color: var(--primary);
  font-weight: 600;
}

#edit-dialog .edit-category-select-option.selected::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 6px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z'/%3E%3C/svg%3E") no-repeat center / contain;
}

#edit-dialog .edit-category-select-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#edit-dialog label,
#edit-category-dialog label {
  display: block;
  margin: 16px 0 6px 0;
  font-weight: 600;
}

aside {
  height: 100%; /* Ensure the sidebar height spans the full container height */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align content to the start for tree structure */
  width: 16%; /* Adjusted width */
  background-color: var(--sidebar-bg);
  transition: width 0.3s; /* Smooth transition for width */
  overflow: auto; /* Allow scrolling for overflow content */
}

aside.collapsed {
  width: 0; /* Collapse the sidebar */
}

aside ul {
  list-style-type: none; /* Remove bullets */
  padding: 0;
  width: 100%; /* Ensure full width for centering items */
}

aside ul li {
  font-size: 0.875rem; /* Use rem units for font size */
  font-weight: 600; /* Ensure the font weight matches the right-side cards */
  color: var(--text-primary); /* Set the default font color to match the right-side cards */
  line-height: 1.25; /* Improve readability and reduce line height */
  padding: 0.25rem 1rem 0.25rem 1.5rem; /* Reduce padding for less vertical spacing, add padding to the left */
  display: flex; /* Align items in a row */
  align-items: center; /* Vertically center items */
  justify-content: flex-start; /* Align items to the left */
  cursor: pointer; /* Add cursor pointer */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  position: relative;

}

aside ul li ul {
  padding-left: 1.5rem; /* Indentation for sub-levels */
  display: none; /* Initially hide sub-levels */
}

aside ul li.open > ul {
  display: block; /* Show sub-levels when parent is open */
}

aside ul li:hover {
  background-color: var(--surface-hover); /* Add hover effect */
}

aside ul li.bg-gray-200 {
  background-color: var(--surface-hover); /* Selected state background */
}

aside ul li.bg-emerald-500 {
  background-color: var(--primary);
  color: var(--text-inverse);
}

aside ul li.bg-emerald-500 span {
  color: var(--text-inverse);
  overflow: hidden;
}

.folder-item {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

/* 确�?�图????��定�?�置 */
.folder-item .material-icons {
  flex-shrink: 0;
}

/* 确�?�右侧箭头图????��定在?���?*/
.folder-item .material-icons.ml-auto {
  position: absolute;
  right: 8px;
}

span.material-icons.ml-auto {
  position: absolute;
  right: 0.5rem;
  font-size: 16px;
}
.material-icons {
  font-family: 'Material Icons';
  font-size: 1.125rem; /* Match the font size of the text using rem */
  vertical-align: middle; /* Align icons vertically in the middle */
  margin-right: 0.5rem; /* Use rem units for margin */
  font-weight: 400;
}

/* Custom width for aside */
.custom-width {
  width: 20rem; /* Increased width for better folder name display */
}

#sidebar-container.collapsed {
  margin-left: -20rem;
}

#toggle-sidebar {
  left: 18.75rem;
}

aside.custom-width {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 1rem 1rem 1rem 1rem;
}

.sidebar-shell {
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
}

.sidebar-top,
.sidebar-folders-panel,
.sidebar-quick-panel,
aside .settings-icon {
  border: 1px solid var(--border);
  background: var(--surface-raised);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.sidebar-top {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 0 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sidebar-brand-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.35rem 0.2rem 0.2rem;
  text-decoration: none;
}

.sidebar-brand-logo {
  width: 42px;
  height: 42px;
  padding: 8px;
  border-radius: 12px;
  background: var(--primary-light);
  box-shadow: inset 0 1px 0 light-dark(rgba(255,255,255,0.55), rgba(255,255,255,0.08));
}

.sidebar-brand-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 2px;
  min-width: 0;
}

.sidebar-brand-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.sidebar-brand-subtitle {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sidebar-hub-nav {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.22rem;
  width: 100%;
  min-width: 0;
  border-radius: 14px;
  background: var(--surface-hover);
  box-shadow: inset 0 1px 0 light-dark(rgba(255,255,255,0.45), rgba(255,255,255,0.05));
}

.sidebar-hub-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 36px;
  /* min-width:0 是关键：flex item 默认 min-width:auto，无法收缩到内容宽度以下，
     会导致「提示词管理」这类长标签撑破导航（溢出右边界）且各项不等宽 */
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 0.45rem;
  border-radius: 12px;
  color: var(--text-tertiary);
  text-decoration: none;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-hub-label {
  /* 侧栏固定 20rem，3 项均分后单格约 90px，长标签改为折行显示完整文字（不截断） */
  min-width: 0;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.sidebar-hub-link:hover {
  color: var(--text-secondary);
}

.sidebar-hub-link.active {
  color: var(--text-primary);
  background: var(--surface-raised);
  box-shadow: 0 6px 18px var(--border), inset 0 1px 0 var(--surface-raised);
}

.sidebar-hub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
}

.sidebar-hub-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.1;
}

.sidebar-section-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sidebar-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-theme-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.sidebar-theme-btn:hover {
  background: var(--primary-medium);
  color: var(--primary);
}

.sidebar-folders-panel {
  padding: 0.85rem 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#categories-list {
  padding-right: 0.15rem;
  padding-bottom: 4.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

#categories-list li {
  width: 100%;
  box-sizing: border-box;
}

#categories-list::-webkit-scrollbar {
  width: 6px;
}

#categories-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}

#categories-list::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-bottom {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: 0.25rem;
  z-index: 2;
}

.sidebar-toolbar {
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  flex-wrap: nowrap;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
}

.sidebar-toolbar::-webkit-scrollbar {
  display: none;
}

.sidebar-toolbar-icon,
.sidebar-theme-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--surface-hover);
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-toolbar-icon {
  background: var(--primary-light);
  color: var(--text-primary);
}

.sidebar-toolbar-icon:hover {
  color: var(--primary);
  background: var(--primary-medium);
}

.sidebar-toolbar-icon svg,
.sidebar-theme-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* 侧边栏面板操作按钮（标签筛选等） */
.sidebar-panel-action-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
}
.sidebar-panel-action-btn:hover {
  background: var(--primary-medium);
  color: var(--primary);
}

/* Main content area */
main {
  padding: 0rem 0rem 2rem 0rem; /* Adjust the padding value as needed */
  transition: margin-left 0.3s; /* Smooth transition for margin */
  flex-grow: 1; /* Allow main content to grow and fill available space */
}

/* Card styles — sidebar bookmark cards only */
aside .card,
.sidebar-folders-panel .card,
.bookmarks-container .card {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  border-radius: 8px;
  padding: 0.75rem;
  overflow: hidden;
  transition: background-color 0.3s;
  height: 48px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  backface-visibility: hidden;

  @media (max-width: 640px) {
    /* �??��?��??????边�??*/
    padding: 0.75rem;
    
    /* �??��???题�?��?�大�? */
    .card-title {
      font-size: 12px;
      line-height: 1.2;
    }
    
    /* �??��?��?��字�?�大�? */
    .card-link {
      font-size: 10px;
    }
  }
}
aside .card:hover,
.sidebar-folders-panel .card:hover,
.bookmarks-container .card:hover {
  background-color: var(--surface-hover);
  cursor: pointer;
}

aside .card-content,
.sidebar-folders-panel .card-content,
.bookmarks-container .card-content {
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 100px;
}

aside .card-title,
.sidebar-folders-panel .card-title,
.bookmarks-container .card-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 0rem;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  max-height: 2.6em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.favicon {
  flex-shrink: 0;
}
aside .card-title:hover,
.sidebar-folders-panel .card-title:hover,
.bookmarks-container .card-title:hover {
  color: var(--text-primary);
}
aside .card-link,
.sidebar-folders-panel .card-link,
.bookmarks-container .card-link {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

aside .card-link:hover,
.sidebar-folders-panel .card-link:hover,
.bookmarks-container .card-link:hover {
  color: var(--accent-blue);
  text-decoration: none;
}

.bookmark-folder.card {
  background: var(--surface-sunken);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  backface-visibility: hidden;
}

.bookmark-folder.card:hover {
  background-color: var(--surface-hover);
  cursor: pointer;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
/* Bookmark placeholder styles */
.bookmark-placeholder {
  width: 100%;
  height: 40px;
  background-color: var(--surface-hover);
  border-radius: 8px;
  margin-bottom: 8px;
  animation: pulse 1.5s infinite ease-in-out;
}


/* Flex container for wrapping cards */
#bookmarks-list {
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  width: 100%;
  padding: 0 0 1rem 0;

  /* 默认桌面�?�? */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  max-width: 1200px;
  /* 滚动?��???滚动?��?���?- ??��?�JS添�??.scrolling�?*/
  &.scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(148,163,184,0.3); /* 滚动?��?���?*/
  }
  
  /* ??��?�时???滚动?��?���?*/
  &.scrolling:hover::-webkit-scrollbar-thumb {
    background-color: rgba(148,163,184,0.4); /* ??��?�时稍微??�显�?�?*/
  }
  
  &.scrolling:hover::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148,163,184,0.5); /* ??��?�在滚动?��上时?��??��??*/
  }
  
  /* ??�色模�?��????? */
  
  
  
  /* 平板�?�? */
  @media (max-width: 1024px) {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.875rem;
    padding: 0 16px;
  }
  
  /* ??�机�?�? */
  @media (max-width: 640px) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    padding: 0 12px;
  }
}


#current-time {
      font-size: 14px;
      margin: 0.5rem auto;
      color: var(--text-secondary);
}
    

    /* Search bar styles */
.search-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-items: center;
  width: 100%;
  max-width: 640px;
  margin: 1rem 0 2.5rem 0;
  padding: 0 16px;
  
  @media (max-width: 640px) {
    padding: 0 12px;
  }
}

.search-form {
  background-color: var(--surface-raised);
  border-radius: 14px;
  padding: 14px 20px 14px 10px;
  position: relative;
  width: 580px;
  transition: box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 180ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}

.search-form:focus-within {
  box-shadow: var(--shadow-md);
}

.search-form.focused-with-suggestions {
  border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow-md);
}

.search-input {
  width: 100%;
  font-size: 14px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: -4px;
}
.search-suggestions-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--surface-raised);
  border: none;
  border-radius: 0 0 14px 14px;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  overflow: visible;
  display: none;
}

.search-form.focused-with-suggestions > .search-suggestions-wrapper {
  box-shadow: var(--shadow-md);
}

.search-suggestions {
  max-height: 390px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: 14px;
}

.search-suggestions::-webkit-scrollbar {
  display: none;
}

.search-suggestions li {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 4px 12px;
  border-radius: 10px;
  color: var(--text-primary);
  transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-suggestions li:last-child {
  margin-bottom: 48px;
}
.search-suggestions li:hover,
.search-suggestions li.keyboard-selected {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.search-suggestions li:active {
  background-color: var(--surface-active);
}

/* 结果项图标：固定 20px 视口，防止 API 返回的大图/无固有尺寸图撑爆面板 */
.search-suggestions .suggestion-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.search-suggestions .suggestion-icon img.favicon {
  width: 20px;
  height: 20px;
  max-width: none;
  object-fit: contain;
  border-radius: 3px;
  display: block;
  margin-right: 0;
}

/* 提示词条目：主题令牌高亮（color-mix 随 --warning 自动适配亮暗主题） */
.search-suggestions li[data-type="prompt"] {
  background: color-mix(in srgb, var(--warning) 6%, transparent);
  border-left: 3px solid var(--warning);
}

.search-suggestions li[data-type="prompt"]:hover,
.search-suggestions li[data-type="prompt"].keyboard-selected {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.search-suggestions li[data-type="prompt"] .suggestion-type {
  color: var(--warning);
  font-weight: 600;
}

#tabs-container {
  position: relative;
  padding: 8px 10px 8px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  z-index: 5;
  background-color: var(--surface-raised);
  scrollbar-width: none;
  -ms-overflow-style: none;
}



/* 修改 search-tips ?���? */
.search-tips {
  font-size: 12px;
  margin-right: 8px;

}

/* 修改??�浮?????? */
#tabs-container:hover .search-tips {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tab {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 14px;
  color: var(--text-secondary);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  background-color: var(--surface-sunken);
  border: 1px solid transparent;
  transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1), border-color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tab:hover {
  background-color: var(--surface-hover);
}

.tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tab:active {
  background-color: var(--surface-active);
}

.tab.active {
  background-color: var(--primary-light);
  color: var(--primary);
  border-color: var(--border);
}

.tab-icon {
  height: 16px;
  margin-right: 6px;
}

.search-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.search-button .material-icons {
  color: var(--text-secondary);
  font-size: 24px;
}

footer {

  text-align: center;
  padding: 1rem;
  margin-top: auto; /* Push footer to the bottom */
}

footer.bg-white.text-center.p-4.border-t.border-gray-200.mt-4 {
  padding-bottom: 0;
  color: var(--text-secondary);
  padding-top: 5rem;
}
p.text-sm {
    color: var(--text-secondary);
}
img.w-6.h-6.mr-2 {
  width: 18px;
  margin-right: 8px;
}

.rounded-lg img.w-6.h-6.mr-2 {
  width: 14px;
  margin-left: 0.5rem;
}
.custom-context-menu {
  display: none;
  position: fixed; /* Change from absolute to fixed to ensure it's positioned relative to the viewport */
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  padding: 10px;
  border-radius: 5px;
  width: 260px;
  max-height: 80vh; /* Add max height */
  overflow-y: auto; /* Add scrolling if needed */
}

/* Add smooth scrolling for the context menu */
.custom-context-menu::-webkit-scrollbar {
  width: 6px;
}

.custom-context-menu::-webkit-scrollbar-thumb {
  background-color: var(--surface-active);
  border-radius: 6px;
}

.custom-context-menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary);
}

/* 右键菜单条目 — 唯一统一定义（合并原 1896/2179/2711 四处重复） */
.custom-context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-context-menu-item:hover {
  background-color: var(--surface-hover);
}

.custom-context-menu-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.custom-context-menu-item:active {
  background-color: var(--surface-active);
}

.custom-context-menu-item > i,
.custom-context-menu-item .material-icons {
  color: var(--text-secondary);
}

.custom-context-menu-divider {
  height: 1px;
  background: var(--surface-active);
  margin: 4px 0;
}

.undo-notification {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: var(--text-primary);
  color: var(--surface);
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.undo-notification .notification-text {
  flex-grow: 1;
}

.undo-notification .undo-button {
  background: none;
  border: none;
  color: var(--success);
  margin-left: 10px;
  cursor: pointer;
  font-weight: bold;
}

.undo-notification .undo-button:hover {
  text-decoration: underline;
}

.undo-notification .countdown {
  margin-left: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.toast {
  display: none;
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 10000;
  text-align: center;
  font-size: 13px;
  max-width: 80%;
  box-shadow: 0 4px 6px var(--overlay);
}

.toast.show {
  display: block;
  animation: fadeIn 0.3s, fadeOut 0.3s 1.2s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.sortable-ghost {
  opacity: 0.5;
  background: color-mix(in srgb, var(--accent-blue) 20%, transparent);
  transition: none !important;
}

.sortable-chosen {
  background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
  transition: none !important;
}

.sortable-drag {
  opacity: 0.8;
  transition: none !important;
}

#categories-list li.sortable-ghost,
#categories-list li.sortable-chosen,
#categories-list li.sortable-drag {
  transition: none !important;
}

.folder-bookmarks-grid .bookmark-card.sortable-ghost,
.folder-bookmarks-grid .bookmark-card.sortable-chosen,
.folder-bookmarks-grid .bookmark-card.sortable-drag {
  transition: none !important;
}

.drag-handle {
  cursor: move;
  /* 添�?��?��?�样�? */
}

@keyframes updateFlash {
  0% {
    background-color: var(--primary-medium);
  }

  100% {
    background-color: transparent;
  }
}
.flex.justify-between.items-center.mb-4 {
  margin: 0 auto;
}

/* �??�� welcome-message ?���? */
#welcome-message {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.links-icons {
  background: var(--surface-raised);
  z-index: 2;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  width: 40px;
  padding: 6px 0;
  
  /* 移除这个?��式�????�U��??�们?��?��??��?? JavaScript ?��??�显�?/??��?? */
  /*
  &:empty,
  &:not(:has(a:not([style*="display: none"]))) {
    display: none;
  }
  */
}

.links-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s, transform 0.3s ease;
  border-radius: 8px;
  margin: 2px auto;  /* ??��?�边�? */
  padding: 6px 0;    /* ??��?��??边�??*/
  width: 28px;       /* ??��?�宽�? */
  height: 28px;      /* ??��?��?�度 */
  .icon-svg {
    width: 18px;
    height: 18px;
  }
}

.links-icons a:hover {
  color: var(--primary);
  background: var(--surface-hover);
}

.links-icons a:active {
  transform: scale(1.1);
}

.welcome-search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2.25rem auto 1.25rem;
}

.search-icon-container {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-icon-container:hover {
  background-color: var(--surface-hover);
}

.search-icon-container:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.search-icon-container:active {
  background-color: var(--surface-active);
}

.search-engine-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: opacity 0.2s ease-in-out;
}

.search-input {
  padding-left: 60px;
}

/* .folder-name 为多个组件共用的名称行：禁止块级占位（height/margin 会把
   侧栏树的图标、名称、计数撑得不在一条线上）；加载骨架由 :empty::before 自带尺寸 */
.folder-name {
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  display: flex;
  margin: 0;
  color: var(--text-secondary);
  min-width: 0;
}
.folder-name:empty::before {
  content: '';
  display: inline-block;
  width: 140px;
  height: 32px;
  background-color: var(--surface-hover);
  border-radius: 6px;
  animation: pulse 1.5s infinite ease-in-out;
}
.bookmarks-container {
  opacity: 0; /* ??��?��?��?�度设�??0 */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  background: var(--surface-raised);
  padding: 1rem 2rem 2rem 2rem;
  width: 90%;
  max-width: 1200px;
  margin: 2.5rem auto 2.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  will-change: opacity, transform;
  display: flex;
  flex-direction: column;
  position: relative;

  /* 平板尺寸 */
  @media (max-width: 1024px) {
    width: 95%;
    padding: 1rem;
  }

  /* 手机尺寸 */
  @media (max-width: 640px) {
    width: 100%;
    padding: 0.75rem;
    margin-top: 1.5rem;
  }
}

/* 加载完成：由 BookmarkGrid.vue 的 :class="{ loaded: !isLoading }" 切换，否则容器恒为 opacity:0 */
.bookmarks-container.loaded {
  opacity: 1;
  transform: translateY(0);
}

.bookmarks-container.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ???src/output.css 中添???*/

/* 侧边??��?��?��?��????? */
@media (max-width: 1024px) {
  /* ?��?��??��?�侧边�?��?��?�论??��?��?�状???�?�?*/
  aside.custom-width {
    display: none !important; /* 使用 !important 确�?��????��?��?�状???*/
  }
  
  /* ??��?�侧边�?��???��??��??*/
  #toggle-sidebar {
    display: none !important;
  }
  
  /* 确�?�主???容区??��?�满宽度，�?�论侧边??�状???�?�?*/
  main.flex-1,
  .main-content {
    width: 100% !important;
    margin-left: 0 !important;
    transition: none !important; /* �??���?渡�????? */
  }

  /* ??�置侧边??�容?��?��???*/
  #sidebar-container {
    width: 0 !important;
    flex-shrink: 0 !important;
    overflow: hidden;
    margin-left: 0 !important;
    transition: none !important;
  }

}

  /* �??��主�??容区??��????��?��?��??�? */
  @media (min-width: 769px) {
    main.flex-1 {
      margin-left: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
  /* �??��主�??容区??��????��?��?��??�? */
  @media (min-width: 640px) {
    main.flex-1 {
      margin-left: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
  @media (min-width: 480px) {
    main.flex-1 {
      margin-left: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
  @media (min-width: 320px) {
    main.flex-1 {
      margin-left: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

/* Quick links ??��?��?��?????*/
@media (max-width: 840px) {
  .quick-links-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .quick-link-item-container {
    /* 保�???????�宽度�?��?????许换行显�? */
    min-width: 80px;
    margin: 4px;
  }
}

@media (max-width: 480px) {
  .quick-links-container {
    gap: 4px;
  }

  .quick-link-item-container {
    /* ?��?��小�??屏�?��?��?�微缩�?�尺�?*/
    width: 70px;
    min-width: 70px;
    margin: 2px;
  }

  .quick-link-item {
    width: 50px;
    height: 50px;
  }

  .quick-link-item-container span {
    font-size: 11px;
  }
}
@media (max-width: 368px) {
  .quick-links-container {
    gap: 4px;
  }

  .quick-link-item-container {
    /* ?��?��小�??屏�?��?��?�微缩�?�尺�?*/
    width: 50px;
    min-width: 50px;
    margin: 2px;
  }

  .quick-link-item {
    width: 50px;
    height: 50px;
  }

}
    @media (max-width: 368px) {
      #welcome-message {
        font-size: 20px;
      }
    }

/* Search form ??��?��?��?????*/
@media (max-width: 768px) {
  /* ??��?�主题�???��??�钮 */
  .theme-toggle {
    display: none !important;
  }
  .links-icons{
    display: none !important;
  }
  .settings-icon{
    display: none !important;
  }
  /* 已�?��????��?��?��?�查询�??�?*/
  .flex.justify-between.items-center.mb-4 {
    width: 95%;
    justify-content: center; /* �?中对�? */
  }
  
  .search-container {
    width: 100%;
  }
  
  .search-form {
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 14.5px 20px 14.5px 10px;
  }

  .search-input {
  
    max-height: none; /* ???许�??容�?�长 */
    overflow-y: hidden; /* ??��?�状?????��?��?�动?�� */
    resize: none; /* �??��??�动�??��大�?? */
  }

  .search-input:focus {
    overflow-y: hidden; /* ???许�?�动 */
    height: auto; /* ???许自?��增长 */
  }

  .home-shell .search-input::placeholder {
    color: transparent !important;
    opacity: 0 !important;
  }
}

/* ?��小�?��?��??额�?��?��??*/
@media (max-width: 480px) {
  .search-form {
    padding: 14.5px 20px 14.5px 10px;
  }
  
  .search-input {
    font-size: 13px; /* ?��小�??字�?�大�?*/
  }
}

/* ?��??��?��?�示?���?*/
.feature-tips {
  position: fixed;
  top: 24px;  /* ?��为顶??��?��?? */
  right: 24px;
  background: var(--surface-raised);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  max-width: 480px;
  z-index: 1000;
  animation: tipFadeIn 0.3s ease-out;
}

.feature-tips .tip-content {
  display: flex;
  padding: 12px;
  align-items: flex-start;
  gap: 8px;
}

.feature-tips .tip-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}

.feature-tips .feature-tips-title {
  font-weight: bold;
  color: var(--primary);
  margin-bottom: 4px;
}
.feature-description {
  white-space: normal;
  line-height: 1.5;
  padding: 1rem 0;
}

.feature-description br {
  display: block;
  margin: 8px 0;
}

.feature-tips .tip-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-tips .tip-close:hover {
  color: var(--text-primary);
}
.feature-tips .tip-content svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  /* info ?��???颜色 */
}

.feature-tips .tip-close svg {
  width: 18px;
  height: 18px;
}

/* 修改?��?��?????? */
@keyframes tipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);  /* ?��为�?��?��?��?? */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tipFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);  /* ?��为�?��?��?�出 */
  }
}

/* �??��移动端�?��?��?��??�? */
@media (max-width: 768px) {
  .feature-tips {
    top: 16px;
    right: 16px;
    left: 16px;  /* ?��移动端左?��??�边�?*/
    max-width: none;  /* 移动端�?�满宽度??�去边�??*/
  }
}

/* 添�?��?�钮?��殊样�? */
.add-engine {
  color: var(--text-tertiary);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.add-engine:hover {
  background-color: var(--success-soft);
  border-color: var(--primary);
}

.add-icon {
  font-size: 24px;
  margin-bottom: 4px;
}


/* ??�索引�?�对话�???���??���? */
.modal {
  display: none;
  position: fixed;
  z-index: 1002;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--overlay);
  /* 移除 padding-top */
  padding: 0;
  /* ?��止�?�景滚动 */
  overflow: hidden;
}

.modal .modal-content {
  background-color: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border);
  /* 修改定�?��??尺�??*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  max-height: 90vh; /* ???大�?�度为�??窗�?�度???0% */
  border-radius: 12px;
  padding: 2rem;
  /* ?��保�?�overflow设置 */
  overflow-y: auto;
}



/* ??�索引�?�容?��?��式�???�� */
.search-engines-container {
  /* 移除之�?�可??��?�在???外边�? */
  margin: 0;
  /* 添�?��????�间�? */
  padding-right: 16px;
}

/* 确�?��?�闭??�钮始�???���? */
.modal .close-button {
  position: sticky;
  top: -30px;
  right: 0;
  float: right;
  margin: -1rem -1rem 1rem 1rem;
  background-color: var(--surface-raised);
  padding: 8px;
  z-index: 1;
}

/* ??�索引�?��?�表?���? */
.search-engines-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.search-engine-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 16px;
}
.search-engine-category {
  margin-bottom: 32px;
}
.category-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.search-engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.search-engine-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  background-color: var(--surface-sunken);
  cursor: pointer; /* 添�?��?��?????????���? */
}

.search-engine-item:hover {
  background-color: var(--surface-hover); /* 稍微�???��????��????��?��?�景???*/
}

.search-engine-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-engine-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.search-engine-name {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
}
/* ?��定�?��?�索引�?�样�?*/
.custom-engine-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 20px;
}

.custom-engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 16px; /* 添�?��?��?�间�? */
}

.custom-input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
  width: 100%;
}

.custom-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-medium);
}

.custom-button {
  padding: 8px 16px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-button:hover {
  background-color: var(--primary);
}

/* ?��定�?��?�索引�?�图????���?*/
.search-engine-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  background-color: var(--surface-raised);
  padding: 2px;
}

.search-engine-icon[src$="default-engine-logo.svg"] {
  opacity: 0.6;
  padding: 3px;
  background-color: var(--surface-hover);
}

/* 添�?�图?????�载?��?�� */
@keyframes iconLoading {
  0% { opacity: 0.3; }
  50% { opacity: 0.7; }
  100% { opacity: 0.3; }
}

.search-engine-icon.loading {
  animation: iconLoading 1.5s infinite;
}

/* ?��?????�载?��?��?���? */
.icon-loading-spinner {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.custom-input.loading {
  padding-right: 40px; /* 为�?�载?��?????�出空�??*/
}

@keyframes spin {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

/* 修改 custom-engine-form ?��式以?��????��对�?��??*/
.custom-engine-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 12px;
  background-color: var(--surface-sunken);
  padding: 16px;
  border-radius: 8px;
}

/* 修改输�?��??容器?���?*/
.input-container {
  position: relative;
  width: 100%;
}

/* ?��定�?��?��?��???���? */
.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 12px;
}

/* ??��?��?��?��?��?��??�?保�????��?��?? */
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;  /* ?���? 0 ?��??��?��?��?��?��?��?? */
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;  /* 确�?��?��?��???��???上�???��以接?��??�击 */
}

/* ?��定�?��?��?��???��式�????�在??��?��?��?��??�?*/
.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  background-color: var(--surface-raised);
  pointer-events: none;
  z-index: 1;
  transition: all 0.2s ease;
}

/* 复�?��????�中?��???*/
.custom-checkbox input:checked + .checkmark {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* 复�?��????�中?��???对勾 */
.custom-checkbox input:checked + .checkmark:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}



/* �??��?��???*/
.custom-checkbox input:disabled ~ .checkmark {
  background-color: var(--surface-sunken);
  border-color: var(--border);
  cursor: not-allowed;
}

.search-engine-update-tip,
.settings-update-tip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.search-engine-update-tip.tip-fade-out,
.settings-update-tip.tip-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 滚动???示器?���?*/
.scroll-indicator {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--surface-raised);
  box-shadow: 0 2px 8px var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

.scroll-indicator svg {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.bookmarks-container:hover .scroll-indicator {
  opacity: 0.6;
  pointer-events: auto;
}

.bookmarks-container:hover .scroll-indicator:hover {
  opacity: 0.9;
  background-color: var(--surface-raised);
}

/* 当书签�?�表�?于�?�动?��????��，让???示器?��??�显 */
.bookmarks-list.scrolling ~ .scroll-indicator,
.bookmarks-container:hover .bookmarks-list.scrolling ~ .scroll-indicator {
  opacity: 0.8;
}

/* ??�色模�?��????? */


/* 滚动???示器?��???*/
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

.scroll-indicator.animate {
  animation: bounce 2s infinite;
}

body,
main {
  opacity: 1;
  transition: opacity 0.3s ease-out;
  background-color: transparent !important;
}

/* 确�?�主容器?????�景?��式?��式�?��??�?*/
main.flex-1 {
  background-color: transparent !important;
  z-index: 1;
}

/* 侧边???logo ??��??题样�?*/
#sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    margin: 1rem auto 3rem 0.5rem;
    gap: 0.5rem; /* �??�� logo ??��??字�?�间????���? */
}

#logo-image {
    width: 40px;
    height: 40px;
}
#logo-title {
    font-size: 26px;
    /* �??��字�?�大�? */
    font-weight: bold;
    color: var(--text-primary);
    /* �??��???字�?�色 */
}
/* ??��?��????��???���?*/
/* ... */

.folder-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}

.breadcrumb-item {
  cursor: pointer;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
  background-color: var(--surface-sunken);
}

.breadcrumb-item:hover {
  background-color: var(--surface-hover);
  color: var(--primary);
}

.breadcrumb-separator {
  margin: 0 5px;
  color: var(--text-tertiary);
}

.breadcrumb-item:last-child {
  color: var(--text-secondary);
  font-weight: bold;
  cursor: default;
  background-color: var(--surface-raised);

}

.breadcrumb-item:last-child:hover {
  background-color: transparent;
}

#categories-list li {
  user-select: none;
}

#categories-list li.sortable-ghost {
  opacity: 0.5;
  background-color: var(--surface-hover);
}

#categories-list li.sortable-chosen {
  background-color: var(--surface-active);
}

/* 暗色模式 - 渐变背景透明 */






/* 确保aside在容器内完全填充高度 */



/* 暗色模式 - 图标区域 */









/* 暗色模式 - 图标区域 */







/* === Category Tabs (搜索建议分类切换) === */
.category-tabs {
  display: none;
  padding: 6px 12px 2px;
  border-bottom: 1px solid var(--divider);
  gap: 4px;
}
.category-tabs.visible {
  display: flex;
}
.category-tab {
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: none;
  outline: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.category-tab:hover {
  background: var(--surface-hover);
}
.category-tab.active {
  background: var(--accent-blue);
  color: var(--text-inverse);
}
.category-tab .tab-count {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}
}

/* Bookmark icon from API */
.suggestion-icon .favicon-from-api {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 2px;
}
/* 暗色模式 - 图标区域 */



































.welcome-guide {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.welcome-content {
  background: var(--surface-raised);
  border-radius: 8px;
  padding: 24px;
  max-width: 600px;
  width: 90%;
}

.welcome-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0;
}

.folder-selector {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-raised);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 12px var(--overlay);
}

.quick-tips {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface-raised);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px var(--overlay);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

body, main {
    transition: none;
}

main {
    min-height: 100vh;
    position: relative;
}

.page-loading {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.page-loaded {
    opacity: 1;
}

.settings-background-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.settings-bg-option {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  background-size: 200% 200%;
  background-position: center;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}

.settings-bg-option.active {
  border-color: var(--primary);
}


/* Material Icons 字�?�声??? */


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;  /* 统�???��???大�?? */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 暗色模式 - 移除html上的背景渐变，保留body背景 */

/* 暗色模式 - 确保 body 背景（高优先级覆盖） */

/* 当�?��??纸时，移?��??�色??�景 */

/* 暗色模式下main元素背景色 - 防止滚动时出现白条 */

/* 暗色模式下确保滚动容器背景色正确 */

/* ??��?�模式�?��??�?纸容?��?���? */

/* ??��?�模式�?��????�景颜色??�项?���? */





::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 12px;
  border: none;
  transition: background-color 0.2s;
  min-height: 60px;  /* 设置滚动?��滑�?��?????小�?��??*/
  max-height: 120px; /* 设置滚动?��滑�?��?????大�?��??*/
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.8);
}

/* Firefox ??��??滚动?��?���?*/
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

/* ??�色模�?��?��??滚动?��?���?*/




/* 主�?�设置区????���? */
.theme-setting-section {
    margin-bottom: 20px;
}

/* 主�?��?�择下�?��?��?�样�? */
.theme-select {
    width: 140px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--surface-raised);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none; /* 移除默认???下�?�箭�?*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center; /* �??��箭头位置 */
    background-size: 16px; /* �??��箭头大�?? */
}

.theme-select:hover {
    border-color: var(--primary);
}

.theme-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-medium);
}

/* ??�色模�?��?��??箭头颜色 */

/* ??�色模�?��????? */



/* 修改默认???件夹????��?��????���?*/
.default-folders-tabs {
  position: fixed;
  top: 40%;  /* ????���?�? */
  transform: translateY(-50%);  /* ????���?中�?�移 */
  left: 16rem;  /* 与侧边�?�宽度对�? */
  padding: 8px 2px;  /* �??��???边�??*/
  display: none; /* 默认??��?? */
  flex-direction: column;  /* ?��为�???���?�? */
  justify-content: center;
  z-index: 10;
  transition: left 0.3s ease;  /* 修改�?渡�????? */
  background: var(--surface-raised);  /* 添�?��?��?��?��?�景 */
  border-radius: 0 12px 12px 0;  /* ?��侧�??�? */
  box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.06),
    0 2px 4px -2px rgb(0 0 0 / 0.06);  /* 添�?�阴�? */
}

/* ?��示�??*/
.default-folders-tabs.show {
  display: flex;
}

/* 当侧边�?�收起时�??��位�??*/
body .default-folders-tabs.sidebar-collapsed {
  left: 0;
  border-radius: 0px 12px 12px 0px;
    /* ?��侧�??�? */
}
/* 当侧边�?�收起时�??��位�??*/
body .default-folders-tabs.sidebar-expanded {
  display: none;
  /* ?��侧�??�? */
}

/* 优�?? tabs-container ?���? */
.tabs-container {
  display: flex;
  flex-direction: column;  /* ?��为�???���?�? */
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
}

/* 暗色模式 - 图标区域 */

/* 暗色模式 - 图标区域 */




/* ???件夹??�称??�示?���??���? */
.folder-tab::after {
  content: attr(data-name);
  position: absolute;
  left: 100%;  /* ?��为显示在?���?*/
  top: 50%;  /* ????���?�? */
  transform: translateY(-50%);  /* ????���?中�?�移 */
  padding: 4px 8px;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  margin-left: 8px;  /* 添�?�左边�??*/
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  background-color: rgba(0, 0, 0, 0.8);
}

/* ??��?��?��??�?�??�� */
@media (max-width: 1024px) {
  .default-folders-tabs {
    display: none !important;  /* ?��小�?��?��?��?��??*/
  }
}

/* ??�色模�?��????? */



/* 添�?��?�面???素设置区??��???���?*/
.interface-elements-settings {
  margin-top: 1rem;
  max-height: 520px; /* 设置???大�?��??*/
  overflow-y: auto; /* 添�?��?��?��?�动???*/
  padding-right: 12px; /* 为�?�动?���???�空?�� */
}

/* ?��定�?��?�动?��?���? */
.interface-elements-settings::-webkit-scrollbar {
  width: 8px;
}

.interface-elements-settings::-webkit-scrollbar-track {
  background: var(--overlay);
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-weight: 500;
}

.settings-tab-button:hover {
  background-color: var(--surface-sunken);
  color: var(--primary);
}

.settings-tab-button.active {
  background-color: var(--primary);
  color: var(--text-inverse);
  font-weight: 500;
}

/* 暗色模式 - 图标区域 */






/* ??��?��?�设�?- ?��小�?��?��?��???��??��?��?��?��?? */
@media (max-width: 768px) {
  .settings-sidebar .settings-layout {
    flex-direction: column;
  }
  
  .settings-sidebar-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  
  .settings-sidebar .settings-content {
    padding-left: 0;
  }
  
}



#container-width-settings {
  background: var(--surface-sunken);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
#floating-width-settings {
  margin-bottom: 24px;
  padding: 16px;
  background-color: var(--surface-sunken);
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--overlay);
}

/* ?��增书签卡???高度设置?���? */
#card-height-settings {
  margin-bottom: 24px;
  padding: 16px;
  background-color: var(--surface-sunken);
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--overlay);
}


/* ??�色模�?��????? */
.settings-tab-content p {
  font-size: 14px;
  margin-bottom: 1rem;
}

/* 赞�?�页?��?���? */
.donate-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.donate-options {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}

.donate-option {
  flex: 1;
  min-width: 200px;
  background-color: var(--surface-sunken);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-items: center;
}

.donate-option-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-align: center;
}

.donate-qrcode-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-items: center;
}

.donate-qrcode {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.donate-qrcode-text {
  margin-top: 10px;
  text-align: center;
  color: var(--text-secondary);
}

.donate-list-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.donate-list-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--surface-hover);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s ease;
  justify-content: center;
  min-width: 140px;
  font-size: 14px;
}

.donate-list-button:hover {
  background-color: var(--surface-hover);
  color: var(--primary);
  transform: none;
}



/* 保�?��????��??donate-list-link?��式用于�?�容???*/
.donate-list-link {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1005; /* 确�?�链?��???z-index高�?�侧边�??*/
}

.donate-list-link:hover {
  text-decoration: underline;
  color: var(--primary-hover);
}



.donate-paypal-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.donate-paypal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #0070ba;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s;
}

.donate-paypal-button:hover {
  background-color: #005ea6;
}

.donate-thank-you {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  margin-top: 16px;
}

/* ??�色模�?��????? */





/* 优�?��?��?��?��??活状???????��?�� */
.folder-tab:hover {
  transform: scale(1.2);
  background-color: var(--text-tertiary);
}

/* ??�强�?活状???????��示�????? */
.folder-tab.active {
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  transform: scale(1.2);
  box-shadow: 0 0 0 2px var(--primary-medium); /* 添�?��?��?��????? */
}

/* ??��?�时?????�示?���? */
.folder-tab:hover::after {
  opacity: 1;
}

/* ????��?��???临时??�示?���? */
.folder-tab.active.switching::after {
  opacity: 1;
  background-color: var(--primary);
  animation: fadeOutAfterDelay 1.5s ease forwards;
}

/* �??��淡出?��?��?��?��比�?? */
@keyframes fadeOutAfterDelay {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* 移除之�?��????��?�样�?*/
.folder-tab.active::after {
  opacity: 0;
}

/* ????��?��????��?��?????? */
.folder-tab.switching {
  animation: pulse 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1.2); }
}

/* 快捷?��设置?���?*/
.shortcuts-settings-container {
  margin-top: 1.5rem;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shortcut-item:hover {
  background-color: var(--surface-sunken);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--surface-hover);
}

.shortcut-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.5rem;
}

.shortcut-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.shortcut-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--text-secondary);
}

.shortcut-value-label {
  color: var(--text-tertiary);
  font-size: 12px;
}

.shortcut-value-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.shortcut-arrow {
  color: var(--text-tertiary);
  font-size: 20px;
  transition: transform 0.2s ease;
}

.shortcut-item:hover .shortcut-arrow {
  transform: translateX(2px);
  color: var(--primary);
}

/* ??�色模�?��????? */






/* �?应�??纸样�? */
.folder-group {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--surface-raised);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px -2px rgba(16, 24, 40, 0.05);
  transition: box-shadow 0.2s ease;
}

.folder-group:hover {
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 8px 20px -4px rgba(16, 24, 40, 0.08);
}

.folder-group-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.folder-group-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.folder-bookmarks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--bookmark-width, 210px), 1fr));
  gap: 1rem;
  justify-items: center;
}

/* ??�色模�?��????? */



/* 确�?��??bookmarks-list �?folder-group ????��?????? */
#bookmarks-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

#bookmarks-list .folder-group {
  width: 100%;
  max-width: none;
}

/* 保�??书签?��???????��??�样�?*/
.bookmark-card {
  width: 100%;
  max-width: 210px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: grab;
}

.bookmark-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.bookmark-card:active {
  cursor: grabbing;
}

aside .card,
.sidebar-folders-panel .card,
.bookmarks-container .card {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
  min-height: 56px;
  width: 100%;
}

aside .card:hover,
.sidebar-folders-panel .card:hover,
.bookmarks-container .card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}

body.is-sorting-bookmarks .bookmark-card,
body.is-sorting-bookmarks .bookmark-card:active {
  cursor: grabbing;
}

body.is-sorting-bookmarks .bookmark-card:hover,
body.is-sorting-bookmarks .card:hover {
  transform: none !important;
  box-shadow: none !important;
  background-color: inherit !important;
}

.favicon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}

.card-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-description {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.proxy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: var(--primary);
  vertical-align: middle;
  margin-left: 2px;
  flex-shrink: 0;
}

/* ??�色模�?��????? */

/* 分类差异以标题下划线与 hover 阴影的 --group-accent 呈现，不再用左侧边条 */

/* 子�??�??���?*/
.folder-subgroup {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--sidebar-bg);
  border-radius: 12px;
}

.subgroup-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

/* ??�色模�?��????? */


/* ?��???件夹???题样�? */
.root-folder-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 2rem 0 1rem 0;
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--border);
}


/* 分组卡片：毛玻璃底 + 分类强调色阴影，hover 浮动（对齐 FavsHub 扩展原版交互） */
.folder-group.flat-layout {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  border-radius: 16px;
  box-shadow:
    0 4px 6px -1px rgba(16, 24, 40, 0.06),
    0 2px 4px -2px rgba(16, 24, 40, 0.06),
    0 4px 16px -6px color-mix(in srgb, var(--group-accent, var(--primary)) 14%, transparent);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.folder-group.flat-layout:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(16, 24, 40, 0.1),
    0 4px 6px -2px rgba(16, 24, 40, 0.05),
    0 6px 20px -4px color-mix(in srgb, var(--group-accent, var(--primary)) 24%, transparent);
}
.folder-group.flat-layout .folder-group-title::after {
  background: var(--group-accent, var(--primary));
}


/* ??��?�顶??��?�钮 - ?��形�?�度???示器?���?*/
#back-to-top {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 1; /* ?��对�?�容?��???z-index */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s, box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 12px;
  min-width: 50px;
  min-height: 50px;
  max-width: 50px;
  max-height: 50px;
  padding: 0;
  margin: 32px; /* 使用margin?��定�?��?��?�是绝对定�??*/
  pointer-events: auto;
  overflow: visible;
  background: transparent;
  border: none;
  position: static; /* 使用??��??定�?��?�由容器?��??��?��??*/
  /* ???对可??��??flex容器??��?�换影�?��??额�?�样�? */
  -webkit-transform: translateZ(0); /* ?��?��硬件??��??*/
  -webkit-backface-visibility: hidden; /* ?��止渲??�问�? */
  -webkit-perspective: 1000; /* ?��止渲??�问�? */
  will-change: transform;
  /* 确�?��?�在任�?��?�换容器???被影??? */
  transform-style: flat;
  /* 确�?��????�U?��?��??不�?�被??��??素影???*/
  isolation: isolate;
}

/* ??��?�顶??��?�钮容器 - ?��定在?��下�?? */
#back-to-top-container {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 999999;
  pointer-events: none;
  width: auto;
  height: auto;
}

/* ?��形�?�度?��??��??*/
#back-to-top::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid var(--border);
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 1; /* ??�景�?*/
}

/* ?��形�?�度?��??�景�??��?????��??�? */
#back-to-top::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid var(--primary);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
  box-sizing: border-box;
  transform: rotate(0deg);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 2; /* ??�景�?*/
}

/* ?��示状???*/
#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ??��?�状???*/
#back-to-top:not(.show) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
}

/* ??��?��????? */
#back-to-top:hover {
  transform: translateY(0) scale(1.1);
  box-shadow: var(--shadow-lg);
}

#back-to-top:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

#back-to-top:active {
  transform: translateY(0) scale(0.98);
}

/* ??�色模�?? */



/* SVG?��????���? - ??��?�顶??�箭头图??? */
#back-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 2.5;
  pointer-events: none;
  position: absolute; /* 绝对定�?? */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* �?中�?��?? */
  z-index: 3; /* ?��???�?，�?��?�百???比�?????*/
  transition: all 0.2s ease;
  display: block; /* 默认?��示图???，由JavaScript?��??? */
  margin: 0; /* ??�置?��??��??margin影�?? */
  padding: 0; /* ??�置?��??��??padding影�?? */
}

/* ??�色模�?��?��??SVG?��??? */

/* 滚动?��???比�???��?���?- ?��示在????��中�??*/
#scroll-percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; /* 增大字�?�大�? */
  font-weight: 700;
  line-height: 1;
  z-index: 4; /* ?��???比�???��?��???顶�?? */
  pointer-events: none;
  text-shadow: none;
  background: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  display: none; /* 默认??��?��?��?��?�JS?��??�显�? */
  opacity: 1;
  visibility: visible;
  min-width: auto; /* 确�?��?�继?��??��?�宽度设�?*/
  min-height: auto; /* 确�?��?�继?��??��?��?�度设�??*/
}

/* ??�色模�?��?��???��???比�?????*/

/* 确�?�显示状???????��???比�???��?���?，�??�??��???�??�� */
#back-to-top.show #scroll-percent {
  display: none; /* 默认?????��?�百???比�???��?��??��?��??，除??�JavaScript??�确?��示�??*/
}

/* 当�?�钮?��示�?��??�??��示百???比�??*/
#back-to-top.show.show-percent #scroll-percent {
  display: block;
}

#back-to-top.show.show-percent svg {
  display: none;
}

/* 当�?�钮?��示�?��??�??��示图????�� */
#back-to-top.show.show-icon svg {
  display: block;
}

#back-to-top.show.show-icon #scroll-percent {
  display: none;
}

/* 确�?��?��?�状???????��???比�???��不可�? */
#back-to-top:not(.show) #scroll-percent {
  display: none;
}

#back-to-top:not(.show) svg {
  display: none;
}

/* ?��?��滚动?��???比动???�??��进度?�� */
/* 这个类�????��?�JavaScript?��???添�?��?�显示�?��?��?�动进度 */
.progress-0::after { transform: rotate(0deg); }
.progress-5::after { transform: rotate(18deg); } /* 5% of 360 = 18deg */
.progress-10::after { transform: rotate(36deg); } /* 10% of 360 = 36deg */
.progress-15::after { transform: rotate(54deg); } /* 15% of 360 = 54deg */
.progress-20::after { transform: rotate(72deg); } /* 20% of 360 = 72deg */
.progress-25::after { transform: rotate(90deg); } /* 25% of 360 = 90deg */
.progress-30::after { transform: rotate(108deg); } /* 30% of 360 = 108deg */
.progress-35::after { transform: rotate(126deg); } /* 35% of 360 = 126deg */
.progress-40::after { transform: rotate(144deg); } /* 40% of 360 = 144deg */
.progress-45::after { transform: rotate(162deg); } /* 45% of 360 = 162deg */
.progress-50::after { transform: rotate(180deg); } /* 50% of 360 = 180deg */
.progress-55::after { transform: rotate(198deg); } /* 55% of 360 = 198deg */
.progress-60::after { transform: rotate(216deg); } /* 60% of 360 = 216deg */
.progress-65::after { transform: rotate(234deg); } /* 65% of 360 = 234deg */
.progress-70::after { transform: rotate(252deg); } /* 70% of 360 = 252deg */
.progress-75::after { transform: rotate(270deg); } /* 75% of 360 = 270deg */
.progress-80::after { transform: rotate(288deg); } /* 80% of 360 = 288deg */
.progress-85::after { transform: rotate(306deg); } /* 85% of 360 = 306deg */
.progress-90::after { transform: rotate(324deg); } /* 90% of 360 = 324deg */
.progress-95::after { transform: rotate(342deg); } /* 95% of 360 = 342deg */
.progress-100::after { transform: rotate(360deg); } /* 100% of 360 = 360deg */

/* ==========================================
   PromptPro ??�示词管???系�???���?   ========================================== */

/* PromptPro 侧边??��?��??- 与�??件夹项�????��?????*/
#promptpro-entry {
  margin-bottom: 8px;
  width: 100%;
}

.promptpro-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

/* �??��模�?��?�浮颜色与�??件夹�????*/
.promptpro-item:hover {
  background-color: var(--surface-hover);
}

/* ??�色模�?��????? */

/* ??��?��?�设�?*/
@media (max-width: 768px) {
  .promptpro-icon {
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
  }
}
/* ???�? Side Panel ????��定样�?*/
@media (max-width: 480px) {
  /* �??��侧边??�宽�?*/
  #sidebar-container {
    width: 100%;
  }

  /* �??��??�索�?�?�? */
  .search-container {
    width: 100%;
  }



  /* �??�� placeholder ?��式�?�防止影??��?��??*/
  .search-input::placeholder {
    line-height: 21px; /* 确�?? placeholder ????��不�?�导?��额�?��?�度 */
    white-space: nowrap; /* ?���? placeholder ?���? */
    text-overflow: ellipsis; /* �??��??��???��示�???��???*/
    overflow: hidden;
  }

  /* �??��书签?��???�?�? */
  .bookmarks-container {
    grid-template-columns: 1fr;
  }

  /* ??��?��??些次�????�?*/
  .theme-toggle,
  #toggle-sidebar {
    display: none !important;
  }
}

/* Side Panel ?��定�???��式类 */
.is-sidepanel {
  width: 100%;
  max-width: 100%;
}

.side-panel-content {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--surface-raised);
    z-index: 1000;
    overflow: hidden;
}

.side-panel-iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
}

/* 当在侧边??�模式时?��示�??�? */
.is-sidepanel .side-panel-content {
    display: block;
}

/* ???�? Side Panel 中�?? iframe ?���? */
.quick-link-iframe {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: var(--surface-raised);
}

/* �??�� Side Panel 中�??主容?��?���?*/
.is-sidepanel main {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.side-panel-iframe-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: var(--surface-raised);
  display: none;
}

/* ??�载???示器?���?*/
.loading-indicator {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1001;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--overlay);
  border-radius: 50%;
  border-top-color: var(--accent-blue);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 为�?�色主�?�设置�?��?��????�载???示器?���?*/

/* ?���?位置??�项 - ?��以�??这�?�类添�?��?�loading-indicator???純U?�来?��??��?�置 */

/* 1. 页面中�?? (????????��?��?�载) */
.loading-indicator.center {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

/* 2. 顶�?�中�? (类似进度?��位�?? */
.loading-indicator.top-center {
  top: 15px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* 3. 底�?�右�? (不妨碍�??读�??导航) */
.loading-indicator.bottom-right {
  top: auto;
  bottom: 15px;
  right: 15px;
}

/* 4. 导航??��?? (??????侧边??��?��?�确导航?��?????? */
.loading-indicator.nav-adjacent {
  top: 55px;
  right: 15px;
}

/* 返�?��?�钮?���? */
.back-to-links {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1002;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px var(--overlay);
}

.back-to-links:hover {
  background: var(--surface-hover);
}

/* 侧边??�模式�?��???��式�?????- 增强??�择?��优�??�? */
body.is-sidepanel footer,
.is-sidepanel footer,
body[class*="is-sidepanel"] footer,
#sidebar-container.is-sidepanel ~ footer,
footer[data-sidepanel-hidden="true"] {
  display: none !important; /* 确�?�页??�在侧边??�模式�?��?��??*/
  visibility: hidden !important; /* ??��?��?�险 */
  height: 0 !important; /* 确�?��?��?�用空�??*/
  overflow: hidden !important; /* ?��止�??容溢?�� */
  opacity: 0 !important; /* 确�?��?�可�?*/
  pointer-events: none !important; /* �??��交�?? */
}

/* 强�?��?��?�页??��??�? */
body.force-hide-footer footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ??��?�侧边�?�样式�?��??不�??*/
body.is-sidepanel .default-folders-tabs {
  bottom: 20px !important; /* �??��默认???件夹????��?��??��?��??*/
}

body.is-sidepanel main {
  padding: 1rem !important;
  height: 100vh;
  overflow-y: auto;
}

/* 侧边??�模式�?��??容器�????*/
#sidebar-container.is-sidepanel {
  height: 100vh;
  overflow: hidden;
}

/* 侧边??�模式�?��??书签容器�????*/
body.is-sidepanel .bookmarks-container {
  margin-bottom: 60px; /* 为�?��?�导?��??�出空�??*/
  width: 100% !important; /* 确�?�在侧边??�模式�?�宽度为100% */
  max-width: 100% !important; /* ?��止�?��?�样式�????? */
}

/* 确�?�侧边�?�模式�?��??主容?���??��100%宽度 */
body.is-sidepanel main {
  padding: 1rem !important;
  height: 100vh;
  overflow-y: auto;
  width: 100% !important;
}

/* 确�?�侧边�?�模式�?��??书签??�表�????00%宽度 */
body.is-sidepanel #bookmarks-list {
  width: 100% !important;
  max-width: 100% !important;
}

/* 侧边??�模式�?��??default-folders-tabs ?���? */
body.is-sidepanel .default-folders-tabs {
  position: fixed !important;
  bottom: 20px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 确�?�在侧边??�模式�?��?? tabs-container ?��式正�? */
body.is-sidepanel .tabs-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: var(--surface-raised) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px var(--overlay) !important;
}

/* ??�色模�?��????? */

/* 确�?�在侧边??�模式�?��????�示????���?确显�? */
body.is-sidepanel .folder-tab::after {
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-bottom: 8px !important;
}

/* �??��书签容器底�?�边��H?�为 default-folders-tabs ??�出空间 */
body.is-sidepanel .bookmarks-container {
  margin-bottom: 80px !important;
}

/* 导航??�样式�?��??*/
.side-panel-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background-color: rgba(248, 249, 250, 0.95);
  border-bottom: 1px solid var(--border);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  box-shadow: 0 1px 2px var(--overlay);
  transition: transform 0.3s ease;
}

.side-panel-nav .nav-controls {
  display: flex;
  align-items: center;
}

.side-panel-nav button {
  background: none;
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 2px;
  color: var(--text-secondary);
}

.side-panel-nav button:hover {
  background-color: var(--surface-sunken);
}

.side-panel-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.side-panel-nav button .material-icons {
  font-size: 16px;
}

.side-panel-nav .url-container {
  flex: 1;
  margin: 0 5px;
}

.side-panel-nav .url-input {
  width: 100%;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  background-color: var(--surface-raised);
}

/* 紧�?�模�? */
.side-panel-nav.compact-mode {
  transform: translateY(-28px);
}

.side-panel-nav.compact-mode:hover,
.side-panel-nav:has(.url-input:focus) {
  transform: translateY(0);
}

.toggle-compact-btn {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 12px;
  background-color: rgba(248, 249, 250, 0.95);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px var(--overlay);
  z-index: 1000;
}

.toggle-compact-btn .material-icons {
  font-size: 16px;
  line-height: 12px;
}

/* 当导?��??��??于紧??�模式时，�???��iframe位置 */
body.nav-compact-mode .side-panel-iframe {
  margin-top: 4px;
}

/* 暗色模式 - 侧边栏导航样式 */





/* 优�?�侧边�?�导?��?��式�?�确保�?��?�挡网�?��??�?*/
.sidepanel-nav-bar {
  height: 32px !important;
  background-color: light-dark(rgba(248,249,250,0.95), var(--surface-raised)) !important;
  box-shadow: 0 1px 2px var(--overlay) !important;
  backdrop-filter: blur(5px); /* 添�?�模糊�????��?�强?��读�??*/
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* 紧�?�模式样�? */
.sidepanel-nav-bar.compact-mode {
  transform: translateY(-28px) !important;
}

.sidepanel-nav-bar.compact-mode:hover {
  transform: translateY(0) !important;
}

/* 当导?��??��??于紧??�模式时，�???��页面???容�?�置 */
body.nav-compact-mode {
  margin-top: 4px !important;
} 
/* Unified Navbar Styles */

.unified-navbar {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 var(--surface-hover);
    height: 52px;
}

.unified-navbar .nav-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.unified-navbar .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.unified-navbar .navbar-logo {
    width: 28px;
    height: 28px;
}

.unified-navbar .nav-menu {
    display: flex;
    gap: 2px;
    background: var(--surface-hover);
    padding: 3px;
    border-radius: 9px;
}

.unified-navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.unified-navbar .nav-link:hover {
    color: var(--text-primary);
}

.unified-navbar .nav-link.active {
    background: var(--primary);
    color: white;
}

.unified-navbar .nav-link i {
    font-size: 16px;
}

.unified-navbar .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.unified-navbar .nav-search {
    position: relative;
    display: flex;
    align-items: center;
}

.unified-navbar .nav-search i {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
}

.unified-navbar .nav-search input {
    padding: 7px 12px 7px 36px;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 260px;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
    background: var(--surface-raised);
}

.unified-navbar .nav-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-medium);
}

.unified-navbar .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--primary);
    color: white;
}

.unified-navbar .btn-primary:hover {
    background: var(--primary);
}

.unified-navbar .btn-primary i {
    font-size: 16px;
}

.unified-navbar .nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.unified-navbar .nav-icon-btn:hover {
    background: var(--border);
    color: var(--text-primary);
}

/* Sidebar Hub Layout */












aside .settings-update-tip {
  right: auto;
  left: 0;
  bottom: calc(100% + 10px);
  width: 100%;
  max-width: 260px;
}

aside .settings-update-tip .tip-arrow {
  right: auto;
  left: 22px;
  bottom: -6px;
  box-shadow: 3px 3px 3px var(--surface-hover);
}









/* Prompt Card Info Layout Styles */

.prompt-info-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.prompt-tags-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.prompt-folder-tag {
    background: var(--primary-medium);
    color: var(--primary);
    border: 1px solid var(--primary-medium);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.prompt-folder-tag i {
    font-size: 12px;
}

.prompt-version-pill {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    font-family: monospace;
}

/* Dark mode support */


/* Prompt Card Footer Layout Styles */

.prompt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-tertiary);
    flex-wrap: wrap;
    gap: 6px;
}

.prompt-footer-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-separator {
    margin: 0 2px;
    color: var(--text-tertiary);
}

.prompt-folder-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-secondary);
    background: transparent;
    padding: 0;
    border: none;
    font-size: 11px;
}

.prompt-folder-tag i {
    font-size: 12px;
    color: var(--primary);
}

.prompt-version {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-family: monospace;
    font-weight: 600;
    margin-left: auto;
}





/* Prompt Card Optimized Styles */

/* Card Container */
.prompt-card {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 3px var(--surface-sunken);
}

.prompt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--border);
    border-color: var(--overlay);
}

/* Header */
.prompt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    min-height: 24px;
}

.prompt-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    letter-spacing: -0.01em;
    /* Truncate long titles */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Actions */
.prompt-actions {
    display: flex;
    gap: 4px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s;
}

.prompt-card:hover .prompt-actions {
    opacity: 1; /* Show on hover */
}

.prompt-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.prompt-btn:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
}

.prompt-btn.fav-btn.active {
    color: var(--warning);
    opacity: 1;
}

.prompt-btn.fav-btn:hover {
    background: var(--warning-soft);
}

/* Description */
.prompt-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Max 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags */
.prompt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    border-radius: 99px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.tag:hover {
    background: var(--surface-hover);
}

.tag i {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Meta Footer */
.prompt-meta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    margin-top: auto; /* Pushes footer to bottom if card height varies */
}

.meta-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meta-item {
    font-size: 11px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.folder-item i {
    font-size: 13px;
}

.date-item i {
    font-size: 12px;
}

.meta-right {
    display: flex;
    align-items: center;
}

.version-badge {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--accent-blue);
    background: var(--info-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Dark Mode Support */














/* 设置界面值显示 */

/* 设置界面预览文本 */

/* 设置界面按钮 */




/* 设置界面上传标签 */


/* 设置界面开关样式 */



/* 设置界面背景颜色选项 */



/* 设置界面描述文本 */

/* 设置界面副标题 */

/* 设置界面分隔线 */

/* 关于页面链接 */






/* 捐赠二维码 */



/* 快捷键设置 */





/* =========================================
   全局强制暗色模式基础样式 (最高优先级)
   ========================================= */







/* ================================================================
   Merged from Vue component <style> blocks
   ================================================================ */

/* ---- from: layouts/default.vue (global) ---- */
.app-shell { min-height: 100vh; }
.client-only-guest { display: none !important; }
.client-only-user  { display: inline-flex; }
.client-only-admin { display: none !important; }
html[data-guest="true"] .client-only-guest { display: inline-flex !important; }
html[data-guest="true"] .client-only-user  { display: none !important; }
html[data-admin="true"] .client-only-admin { display: inline-flex !important; }

/* ---- from: components/search/SearchBar.vue (global, Teleport to body) ---- */
.engine-dialog-overlay {
  display: flex;
  position: fixed;
  z-index: 100001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay);
  justify-content: center;
  align-items: center;
}
.engine-dialog-content {
  position: relative;
  background: var(--surface-raised);
  border-radius: 12px;
  padding: 2rem;
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.engine-dialog-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-tertiary);
  z-index: 1;
  line-height: 1;
  background: transparent;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 120ms cubic-bezier(0.22, 1, 0.36, 1), background-color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.engine-dialog-close:hover { color: var(--text-primary); background: var(--surface-hover); }
.engine-dialog-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.engine-dialog-close:active { transform: scale(0.96); }
.engine-dialog-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text-primary);
}
.engine-dialog-body { padding-right: 4px; }
.engine-dialog-category { margin-bottom: 24px; }
.engine-dialog-category-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.engine-dialog-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.engine-dialog-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: center;
  position: relative;
}
.engine-dialog-item:hover { background: var(--surface-hover); }
.engine-dialog-item.selected { background: var(--primary-light); }
.engine-dialog-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.engine-dialog-item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.engine-dialog-item-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.engine-dialog-item-name {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-all;
}
@media (max-width: 480px) {
  .engine-dialog-grid { grid-template-columns: repeat(3, 1fr); }
  .engine-dialog-content { padding: 1.25rem; width: 95%; }
}

/* ---- from: components/sidebar/Sidebar.vue (global, Teleport to body) ---- */
.folder-context-menu {
  position: fixed;
  z-index: 10000;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 4px 0;
  min-width: 160px;
  font-size: 13px;
}
.folder-context-item {
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  transition: background 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.folder-context-item:hover {
  background: var(--surface-sunken);
}
.folder-context-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.folder-context-item:active {
  background: var(--surface-active);
}
.folder-context-item.danger {
  color: var(--danger);
}
.folder-context-item.danger:hover {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.folder-context-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
/* dark mode: folder-context-menu */

/* ---- from: pages/index.vue (scoped) ---- */
.home-shell {
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}
.home-shell > main {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.home-shell .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 1024px) {
  .home-shell > main {
    margin-left: 0 !important;
  }
}
@media (max-width: 768px) {
  .home-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .home-shell .bookmark-card .favicon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .home-shell .bookmark-card .card-icon-text {
    width: 24px;
    height: 24px;
    font-size: 14px;
    flex-shrink: 0;
  }
}

/* ---- from: components/bookmark/BookmarkCard.vue (scoped) ---- */
.bookmark-card { position: relative; }
.card-favicon-img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  object-fit: contain;
  flex-shrink: 0;
}
.card-icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 6px;
  font-size: 14px;
  flex-shrink: 0;
}

/* ---- from: components/bookmark/BookmarkGrid.vue (scoped) ---- */
.bookmark-placeholder {
  max-width: var(--bookmark-width, 210px);
  height: 56px;
  background: var(--surface-hover);
  border-radius: 12px;
  animation: placeholder-pulse 1.5s ease-in-out infinite;
}
@keyframes placeholder-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.bookmarks-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-tertiary);
}
.add-first-btn {
  margin-top: 12px;
  padding: 10px 20px;
  background: var(--primary);
  color: var(--text-inverse);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.add-bookmark-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--bookmark-width, 210px);
  min-height: 56px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.add-bookmark-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.add-bookmark-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.add-bookmark-card:active {
  transform: scale(0.98);
}
.add-icon { font-size: 24px; color: var(--text-tertiary); line-height: 1; }
.add-text { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.sortable-ghost { opacity: 0.4; }

/* ---- from: components/bookmark/BookmarkContextMenu.vue (scoped) ---- */
.context-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.custom-context-menu-item {
  gap: 8px;
}
.custom-context-menu-item .material-icons {
  margin-right: 8px;
  font-size: 18px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
}
.custom-context-menu-item--danger { color: var(--danger); }
.custom-context-menu-item--danger .material-icons,
.custom-context-menu-item--danger > i { color: var(--danger); }
.qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-modal {
  background: var(--surface-raised);
  border-radius: 12px;
  max-width: 320px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.qr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.qr-title { font-size: 14px; font-weight: 600; }
.qr-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-tertiary); transition: color 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.qr-close:hover { color: var(--text-primary); }
.qr-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.qr-close:active { transform: scale(0.96); }
.qr-body { padding: 20px 18px; }
.qr-image { display: block; margin: 0 auto; width: 200px; height: 200px; }
.qr-link { font-size: 11px; color: var(--text-tertiary); word-break: break-all; margin-top: 12px; text-align: center; }
.qr-loading { min-height: 200px; display: flex; align-items: center; justify-content: center; }
.qr-modal--confirm { max-width: 360px; }
.qr-body--center { text-align: center; }
.qr-confirm-text { margin: 8px 0 16px; color: var(--text-secondary); }
.qr-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.qr-btn-cancel { padding: 6px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raised); cursor: pointer; font-size: 13px; transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.qr-btn-cancel:hover { background: var(--surface-hover); }
.qr-btn-cancel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.qr-btn-cancel:active { transform: scale(0.98); }
.qr-btn-danger { padding: 6px 16px; border: none; border-radius: 6px; background: var(--danger); color: var(--text-inverse); cursor: pointer; font-size: 13px; transition: filter 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.qr-btn-danger:hover { filter: brightness(0.9); }
.qr-btn-danger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.qr-btn-danger:active { transform: scale(0.98); }
/* dark mode: qr-modal */

/* ---- from: components/search/SearchBar.vue (scoped) ---- */
.search-container {
  flex: unset !important;
  margin: 1rem auto 2.5rem auto !important;
}
.dropdown-indicator { font-size: 10px; color: var(--text-tertiary); margin-left: 2px; }
.search-container .suggestion-url {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestion-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-dash {
  color: var(--text-tertiary);
  margin: 0 4px;
  flex-shrink: 0;
}
.suggestion-type {
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--surface-hover);
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-left: 4px;
}
.category-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}
.category-tab {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1), color 120ms cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
}
.category-tab:hover {
  background: var(--surface-hover);
}
.category-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.category-tab:active {
  transform: scale(0.98);
}
.category-tab.active {
  background: var(--primary);
  color: var(--text-inverse);
}
/* keyboard-selected 底色与主定义处（.search-suggestions li:hover 并列的 var(--surface-hover)）保持一致，
   此处不再用 light-dark() 硬编码覆盖，避免主题切换不跟随 */

/* ---- from: components/search/SearchEngineDropdown.vue (scoped) ---- */
/* 主体布局规则曾在 bundle 合并中丢失（原 main-bundle.css 2849-2960），此处补全并现代化 */
/* 搜索框切换按钮右下角的小箭头：悬浮于图标上（原版规则，误删后箭头变占流元素把按钮撑高） */
.dropdown-indicator {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-secondary);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
}

.search-icon-container:hover .dropdown-indicator {
  opacity: 1;
}

.search-engine-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  background: var(--surface-raised);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--overlay);
  padding: 16px;
  z-index: 1000;
  width: 580px;
  margin-top: 8px;
}
.search-engine-options-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.search-engine-option {
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.search-engine-option:hover {
  background-color: var(--surface-hover);
}
.search-engine-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.search-engine-option:active {
  background-color: var(--surface-active);
}
.search-engine-option.selected {
  background-color: var(--primary-medium);
}
.search-engine-option.selected .search-engine-option-label {
  color: var(--primary);
  font-weight: 600;
}
.search-engine-option-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-items: center;
  gap: 6px;
}
.search-engine-option-icon {
  height: 18px;
  margin-bottom: 4px;
  object-fit: contain;
}
.search-engine-option-label {
  font-size: 12px;
  color: var(--text-primary);
}
@media (max-width: 480px) {
  .search-engine-dropdown {
    width: calc(80vw - 30px);
    left: 16px;
    right: 16px;
  }
  .search-engine-options-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- from: components/search/SearchSuggestions.vue (scoped) ---- */
.suggestions-dropdown .suggestion-url {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
}

/* ---- from: components/sidebar/Sidebar.vue (scoped) ---- */
#sidebar-container {
  transition: margin-left 0.3s ease;
}
.add-folder span {
  color: var(--text-tertiary);
  font-size: 12px;
}
.item-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-hover);
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
  margin-right: 4px;
}
.bg-emerald-500 .item-count {
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--text-inverse) 20%, transparent);
}
.folder-arrow {
  flex-shrink: 0;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-tertiary);
  width: 20px;
  text-align: center;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.folder-arrow:hover {
  color: var(--primary);
}

/* ---- from: components/mobile/MobileBottomNav.vue (scoped) ---- */
.mobile-search-sheet-body .search-container {
  width: 100%;
}
.mobile-search-sheet-body .search-form {
  margin: 0;
  width: 100% !important;
  max-width: 100% !important;
}


/* ---- from: components/common/IconPicker.vue (scoped) ---- */
.icon-picker-wrapper { display: flex; flex-direction: column; gap: 8px; }
.icon-picker-preview { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.icon-picker-clear { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-tertiary); }
.icon-picker-search { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; }
.icon-picker-search:focus { border-color: var(--primary); }
.icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 4px; max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.icon-picker-option { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1.5px solid transparent; cursor: pointer; font-size: 16px; color: var(--text-secondary); background: transparent; transition: border-color 120ms cubic-bezier(0.22, 1, 0.36, 1), color 120ms cubic-bezier(0.22, 1, 0.36, 1), background-color 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.icon-picker-option:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.icon-picker-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.icon-picker-option:active { transform: scale(0.96); }
.icon-picker-option.active { border-color: var(--primary); background: var(--primary-medium); color: var(--primary); }

/* ---- from: pages/login.vue (scoped) ---- */
/* 现代化：中性 surface 底 + 主题色仅作强调点缀（按钮/焦点环/激活态），对齐 Linear/Vercel */
.login-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--surface); color: var(--text-primary); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-container { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 14px; padding: 32px; width: 400px; max-width: 100%; box-shadow: var(--shadow-md); }
.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo img { width: 48px; height: 48px; }
.login-logo h1 { font-size: 22px; margin-top: 8px; color: var(--text-primary); }
.login-logo p { color: var(--text-tertiary); font-size: 13px; margin-top: 4px; }
.login-page .tab-nav { display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.login-page .tab-nav button { flex: 1; padding: 10px; border: none; background: none; font-size: 14px; cursor: pointer; color: var(--text-tertiary); border-radius: 6px 6px 0 0; transition: color 180ms cubic-bezier(0.22,1,0.36,1), background-color 120ms cubic-bezier(0.22,1,0.36,1), border-color 180ms cubic-bezier(0.22,1,0.36,1); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.login-page .tab-nav button:hover:not(.active) { color: var(--text-primary); background: var(--surface-hover); }
.login-page .tab-nav button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.login-page .tab-nav button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.login-page .form-group { margin-bottom: 16px; }
.login-page .form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.login-page .form-group input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; background: var(--surface-raised); color: var(--text-primary); transition: border-color 180ms cubic-bezier(0.22,1,0.36,1); outline: none; }
.login-page .form-group input:focus-visible { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; }
.login-page .submit-btn { width: 100%; padding: 12px; background: var(--primary); color: var(--text-inverse); border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 180ms cubic-bezier(0.22,1,0.36,1), transform 120ms cubic-bezier(0.22,1,0.36,1); margin-top: 8px; }
.login-page .submit-btn:hover:not(:disabled) { background: var(--primary-hover); }
.login-page .submit-btn:active:not(:disabled) { transform: scale(0.98); }
.login-page .submit-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.login-page .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-page .error-msg { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: 13px; text-align: left; margin-bottom: 12px; padding: 8px 12px; background: var(--danger-soft); border-left: 3px solid var(--danger); border-radius: 6px; animation: login-error-in 240ms cubic-bezier(0.22,1,0.36,1); }
.login-page .error-msg::before { content: '!'; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: var(--text-inverse); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
@keyframes login-error-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Login page dark mode */

/* ==========================================
   Merged from: index-sidebar-fix.css
   ==========================================
/* Fix for Sidebar Folder Color in index.html */

#categories-list .folder-item {
    color: var(--text-primary);
    font-weight: bold;
}

#categories-list .folder-item:hover {
    color: var(--text-primary);
    background: var(--surface-selected);
}

#categories-list .folder-item i {
    color: inherit;
}

/* 选中态覆盖：确保选中时文字和图标反色 */
#categories-list .folder-item.bg-emerald-500 {
    color: var(--text-inverse);
}
#categories-list .folder-item.bg-emerald-500 span {
    color: var(--text-inverse);
}
#categories-list .folder-item.bg-emerald-500:hover {
    color: var(--text-inverse);
    background: var(--primary);
}

/* 侧边栏列表项统一间距（覆盖 FolderTreeItem 移除 margin-bottom 后的空隙） */
#categories-list > * + * {
    margin-top: 2px;
}

/* bg-emerald-500 基础样式由 main-bundle.css @layer components 定义 */

/* ── 精选集模块共享页头（collections/index 与 collections/[id] 双份 scoped 合并于此） ── */
.collections-header {
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.collections-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.collections-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.collections-header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.collections-header-logo:hover { opacity: 0.7; }
.collections-header-logo:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}
.collections-header-logo-img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.collections-header-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.collections-header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.collections-header-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1),
              color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.collections-header-link svg {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}
.collections-header-link:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.collections-header-link:hover svg { opacity: 1; }
.collections-header-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.collections-header-link:active { background: var(--surface-active); }
.collections-header-link.active {
  color: var(--primary);
  background: var(--primary-light);
}
.collections-header-link.active svg { opacity: 1; }

/* 旧 gradient-background 规则已全部迁移至 themes.css（theme-bg-* 命名）
   themes.css 不在 @layer 内，优先级高于 @layer 内的规则，
   且通过 html[data-theme="..."].theme-bg-xxx 选择器自动匹配明暗模式。 */