﻿* {
      box-sizing: border-box;
    }
    html,
    body {
      margin: 0;
      min-height: 100%;
      height: 100%;
      background: #000;
      color: #e8e8ef;
      font-family: "JetBrains Mono", ui-monospace, monospace;
    }
    .cosmos {
      position: fixed;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(ellipse 140% 90% at 50% 130%, var(--cosmos-glow) 0%, transparent 58%),
        radial-gradient(ellipse 100% 70% at 10% 15%, var(--cosmos-glow-2) 0%, transparent 52%),
        radial-gradient(ellipse 80% 55% at 92% 28%, var(--cosmos-glow-3) 0%, transparent 48%),
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(30, 60, 120, 0.12) 0%, transparent 42%),
        linear-gradient(180deg, #000 0%, #010108 38%, #00030a 72%, #000 100%);
    }
    .cosmos::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(1px 1px at 8% 12%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 22% 38%, rgba(255, 255, 255, 0.22), transparent),
        radial-gradient(1px 1px at 34% 72%, rgba(255, 255, 255, 0.32), transparent),
        radial-gradient(1px 1px at 48% 18%, rgba(255, 255, 255, 0.18), transparent),
        radial-gradient(1px 1px at 61% 55%, rgba(255, 255, 255, 0.28), transparent),
        radial-gradient(1px 1px at 76% 22%, rgba(200, 220, 255, 0.45), transparent),
        radial-gradient(1px 1px at 88% 68%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 15% 88%, rgba(255, 255, 255, 0.26), transparent),
        radial-gradient(1.5px 1.5px at 55% 8%, rgba(180, 210, 255, 0.5), transparent),
        radial-gradient(1px 1px at 3% 48%, rgba(255, 255, 255, 0.16), transparent),
        radial-gradient(1px 1px at 95% 42%, rgba(255, 255, 255, 0.24), transparent),
        radial-gradient(1px 1px at 42% 92%, rgba(255, 255, 255, 0.2), transparent);
      background-size: 100% 100%;
      opacity: 0.9;
    }
    .cosmos::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 45% 25% at 70% 75%, var(--cosmos-dust) 0%, transparent 100%),
        radial-gradient(ellipse 35% 20% at 25% 60%, rgba(100, 60, 160, 0.05) 0%, transparent 100%);
      pointer-events: none;
    }
    html[data-cosmos-custom-bg="1"]:not([data-theme="galaxy"]):not([data-theme="classic"]) .cosmos::before {
      opacity: 0.22;
    }
    html[data-cosmos-custom-bg="1"]:not([data-theme="galaxy"]):not([data-theme="classic"]) .cosmos::after {
      opacity: 0.28;
    }
    .stage {
      position: relative;
      z-index: 1;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem 1.25rem;
      gap: 1.75rem;
    }
    .mark {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      letter-spacing: 0.04em;
    }
    .mark-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
      height: auto;
      padding: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      color: var(--accent-soft);
    }
    .mark-icon svg {
      width: 1.55rem;
      height: 1.55rem;
      stroke-width: 2;
    }
    .mark-title {
      font-size: clamp(1.25rem, 3vw, 1.5rem);
      font-weight: 600;
      color: #9cdcfe;
    }
    .mark-sub {
      font-size: 0.75rem;
      color: rgba(156, 220, 254, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.2em;
    }
    .search-vpn-row {
      width: min(36.75rem, 100%);
      display: flex;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.32rem;
      margin-left: -0.85rem;
    }
    #idk {
      width: auto;
      max-width: none;
      flex: 1 1 0;
      min-width: 0;
    }
    .field {
      position: relative;
    }
    .field-icon {
      position: absolute;
      left: 0.9rem;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(156, 220, 254, 0.45);
      pointer-events: none;
      z-index: 2;
    }
    .field-icon svg {
      width: 1.15rem;
      height: 1.15rem;
    }
    #url {
      width: 100%;
      padding: 0.82rem 0.95rem 0.82rem 2.45rem;
      border-radius: 0.5rem;
      border: 2px solid rgba(var(--accent-rgb), 0.65);
      background: rgba(6, 8, 14, 0.88);
      color: #d4d4d4;
      font: inherit;
      font-size: 0.95rem;
      outline: none;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5) inset,
        0 0 28px rgba(var(--accent-rgb), 0.18);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    #url::placeholder {
      color: rgba(156, 220, 254, 0.35);
    }
    #url:focus {
      border-color: var(--accent-soft);
      box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.35) inset,
        0 0 36px rgba(var(--accent-rgb), 0.35);
    }
    .field:focus-within .field-icon {
      color: rgba(156, 220, 254, 0.75);
    }
    .proxy-loading {
      position: fixed;
      inset: 0;
      z-index: 34;
      display: grid;
      place-items: center;
      pointer-events: none;
      contain: layout paint style;
    }
    .proxy-loading[hidden] {
      display: none !important;
    }
    .proxy-loading-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 95% 62% at 50% 120%, rgba(var(--accent-rgb), 0.24), transparent 66%),
        radial-gradient(ellipse 70% 42% at 74% 18%, rgba(var(--accent-rgb), 0.16), transparent 72%),
        rgba(1, 2, 8, 0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      animation: proxy-loading-bg-in 0.22s ease-out;
      will-change: opacity;
    }
    .proxy-loading-panel {
      position: relative;
      width: min(24rem, calc(100vw - 2.2rem));
      padding: 0.9rem 1rem 0.95rem;
      border-radius: 0.7rem;
      border: 1px solid rgba(var(--accent-rgb), 0.52);
      background: linear-gradient(
        165deg,
        rgba(18, 22, 38, 0.97) 0%,
        rgba(8, 10, 18, 0.98) 48%,
        rgba(5, 7, 14, 0.98) 100%
      );
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 16px 56px rgba(0, 0, 0, 0.6),
        0 0 56px rgba(var(--accent-rgb), 0.2);
      text-align: center;
      animation: proxy-loading-panel-in 0.22s ease-out;
      will-change: transform, opacity;
      transform: translateZ(0);
    }
    .proxy-loading-title {
      margin: 0;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(214, 232, 255, 0.94);
    }
    .proxy-loading-progress {
      position: relative;
      margin-top: 0.62rem;
      height: 0.24rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.11);
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    .proxy-loading-progress-bar {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 38%;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        rgba(var(--accent-rgb), 0.28) 0%,
        rgba(var(--accent-rgb), 0.95) 55%,
        rgba(var(--accent-rgb), 0.28) 100%
      );
      animation: proxy-loading-progress-move 1.05s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
      will-change: transform;
      transform: translate3d(-120%, 0, 0);
    }
    @keyframes proxy-loading-progress-move {
      0% {
        transform: translate3d(-120%, 0, 0);
      }
      100% {
        transform: translate3d(320%, 0, 0);
      }
    }
    @keyframes proxy-loading-panel-in {
      from {
        transform: translateY(5px) scale(0.98);
        opacity: 0;
      }
      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }
    @keyframes proxy-loading-bg-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .proxy-loading-bg,
      .proxy-loading-panel,
      .proxy-loading-progress-bar {
        animation: none !important;
      }
      .proxy-loading-progress-bar {
        width: 100%;
        transform: translate3d(0, 0, 0);
        opacity: 0.8;
      }
    }
    .url-suggestions {
      display: none;
      list-style: none;
      margin: 0.35rem 0 0;
      padding: 0.3rem 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      z-index: 12;
      border-radius: 0.45rem;
      border: 1px solid rgba(var(--accent-rgb), 0.42);
      background: rgba(10, 12, 22, 0.97);
      box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
      max-height: 14rem;
      overflow-y: auto;
    }
    .url-suggestions.is-open {
      display: block;
    }
    .url-suggestions li {
      margin: 0;
      padding: 0;
    }
    .url-suggestion-item {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0.55rem 0.85rem;
      border: none;
      background: transparent;
      color: #d8dde8;
      font: inherit;
      font-size: 0.82rem;
      text-align: left;
      cursor: pointer;
      transition: background 0.1s ease, color 0.1s ease;
    }
    .url-suggestion-item:hover,
    .url-suggestion-item:focus-visible {
      background: rgba(var(--accent-rgb), 0.18);
      color: #fff;
      outline: none;
    }
    #iframe {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      z-index: 20;
      background: #000;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    #iframe.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      bottom: 0;
    }
    #iframe.is-open.iframe-has-chrome {
      bottom: calc(3.55rem + env(safe-area-inset-bottom, 0px));
    }
    .iframe-chrome {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 25;
      padding: 0.45rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
      background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.12) 0%, transparent 42%),
        linear-gradient(165deg, rgba(18, 22, 38, 0.97) 0%, rgba(8, 10, 18, 0.98) 100%);
      border-top: 1px solid rgba(var(--accent-rgb), 0.38);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow:
        0 -10px 36px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    }
    .iframe-chrome[hidden] {
      display: none !important;
    }
    .iframe-chrome-inner {
      display: grid;
      grid-template-columns: 1fr minmax(12rem, 32rem) 1fr;
      align-items: center;
      gap: 0.5rem 0.65rem;
      width: 100%;
      max-width: 56rem;
      margin: 0 auto;
    }
    .iframe-chrome-nav {
      grid-column: 1;
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .iframe-chrome-search-wrap {
      grid-column: 2;
      width: 100%;
      min-width: 0;
    }
    .iframe-chrome-actions {
      grid-column: 3;
      justify-self: start;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .iframe-icon-btn {
      flex: 0 0 auto;
      width: 2.4rem;
      height: 2.4rem;
      margin: 0;
      padding: 0;
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(var(--accent-rgb), 0.42);
      border-radius: 0.5rem;
      background: linear-gradient(165deg, rgba(32, 38, 58, 0.95) 0%, rgba(14, 16, 28, 0.98) 100%);
      color: rgba(210, 220, 250, 0.95);
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
      transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    }
    .iframe-home-btn {
      border-color: rgba(var(--accent-rgb), 0.55);
      background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.35) 0%, rgba(var(--accent-rgb), 0.12) 100%);
      color: #fff;
    }
    .iframe-home-btn:hover {
      border-color: rgba(var(--accent-rgb), 0.75);
      background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.5) 0%, rgba(var(--accent-rgb), 0.22) 100%);
      color: #fff;
    }
    .iframe-icon-btn:hover {
      border-color: rgba(var(--accent-rgb), 0.62);
      background: linear-gradient(165deg, rgba(var(--accent-rgb), 0.28) 0%, rgba(18, 20, 34, 0.95) 100%);
      color: #fff;
    }
    .iframe-icon-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
    }
    .iframe-chrome-lucide {
      width: 1.1rem;
      height: 1.1rem;
    }
    .iframe-nav-form {
      position: relative;
      margin: 0;
      padding: 0.35rem 0.4rem;
      border-radius: 0.55rem;
      border: 1px solid rgba(var(--accent-rgb), 0.5);
      background: linear-gradient(
        155deg,
        rgba(var(--accent-rgb), 0.22) 0%,
        rgba(12, 14, 24, 0.96) 38%,
        rgba(6, 8, 16, 0.98) 100%
      );
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45) inset,
        0 0 24px rgba(var(--accent-rgb), 0.2);
    }
    .iframe-nav-field-icon {
      position: absolute;
      left: 0.95rem;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(156, 220, 254, 0.55);
      pointer-events: none;
      z-index: 1;
    }
    .iframe-nav-field-icon svg {
      width: 1.05rem;
      height: 1.05rem;
      stroke-width: 2;
    }
    .iframe-nav-form:focus-within {
      border-color: rgba(var(--accent-rgb), 0.75);
      box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.25) inset,
        0 0 32px rgba(var(--accent-rgb), 0.28);
    }
    .iframe-nav-form:focus-within .iframe-nav-field-icon {
      color: rgba(156, 220, 254, 0.85);
    }
    .iframe-nav-form .iframe-nav-url {
      width: 100%;
      margin: 0;
      padding: 0.55rem 0.75rem 0.55rem 2.45rem;
      border-radius: 0.4rem;
      border: 2px solid rgba(var(--accent-rgb), 0.45);
      background: rgba(4, 6, 14, 0.88);
      color: #e4e8f2;
      font: inherit;
      font-size: 0.84rem;
      outline: none;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .iframe-nav-form .iframe-nav-url::placeholder {
      color: rgba(156, 220, 254, 0.38);
    }
    .iframe-nav-form .iframe-nav-url:focus {
      border-color: var(--accent-soft);
      box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.3) inset,
        0 0 22px rgba(var(--accent-rgb), 0.25);
    }
    @media (max-width: 34rem) {
      .iframe-chrome-inner {
        grid-template-columns: 1fr;
        justify-items: stretch;
      }
      .iframe-chrome-nav {
        grid-column: 1;
        justify-self: center;
      }
      .iframe-chrome-search-wrap {
        grid-column: 1;
      }
      .iframe-chrome-actions {
        grid-column: 1;
        justify-self: center;
      }
    }
    .stage-nav {
      margin-top: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .stage-nav a,
    .stage-nav-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      color: rgba(156, 220, 254, 0.45);
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .stage-nav a:hover,
    .stage-nav-link:hover {
      color: var(--accent-soft);
    }
    .stage-nav .sep {
      color: rgba(156, 220, 254, 0.2);
      font-weight: 400;
      user-select: none;
    }
    .stage-nav-proxy {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin: 0;
      padding: 0.15rem 0;
      border: none;
      background: none;
      font: inherit;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      color: rgba(156, 220, 254, 0.45);
      cursor: pointer;
      transition: color 0.15s ease;
    }
    .stage-nav-proxy:hover {
      color: var(--accent-soft);
    }
    .stage-nav-proxy-ico {
      width: 0.9rem;
      height: 0.9rem;
      stroke-width: 2.1;
    }
    .bookmark-bar {
      width: min(42rem, 100%);
      margin-top: 0.95rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      justify-content: center;
    }
    .vpn-route-picker {
      position: relative;
      flex: 0 0 auto;
      width: auto;
      min-width: 5.65rem;
      margin-top: 0;
      margin-right: -0.85rem;
      display: inline-flex;
      align-items: stretch;
      border-radius: 0.54rem;
      border: 1px solid rgba(var(--accent-rgb), 0.34);
      background: rgba(8, 10, 18, 0.62);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.22);
    }
    .vpn-route-picker:hover {
      border-color: rgba(var(--accent-rgb), 0.52);
    }
    .vpn-route-picker.is-open {
      border-color: rgba(var(--accent-rgb), 0.72);
      box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.22);
    }
    .vpn-route-trigger {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      width: 100%;
      min-height: 0;
      margin: 0;
      padding: 0.4rem 0.52rem;
      border: none;
      border-radius: inherit;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
      outline: none;
    }
    .vpn-route-trigger::after {
      content: "";
      grid-column: 3;
      justify-self: end;
      align-self: center;
      width: 0;
      height: 0;
      border-left: 0.28rem solid transparent;
      border-right: 0.28rem solid transparent;
      border-top: 0.36rem solid rgba(166, 186, 220, 0.75);
      transition: transform 0.15s ease;
    }
    .vpn-route-picker.is-open .vpn-route-trigger::after {
      transform: rotate(180deg);
    }
    .vpn-route-trigger:focus-visible {
      box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.45);
    }
    .vpn-route-flag-main {
      grid-column: 2;
      justify-self: center;
      display: block;
      width: 1.42rem;
      height: 0.96rem;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
      pointer-events: none;
    }
    .vpn-route-list {
      position: absolute;
      top: calc(100% + 0.28rem);
      left: 0;
      right: 0;
      min-width: 13.25rem;
      margin: 0;
      padding: 0.38rem;
      list-style: none;
      border-radius: 0.48rem;
      border: 1px solid rgba(var(--accent-rgb), 0.42);
      background: rgba(10, 12, 22, 0.98);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 12px 36px rgba(0, 0, 0, 0.45);
      z-index: 40;
      max-height: 14rem;
      overflow-y: auto;
    }
    .vpn-route-list[hidden] {
      display: none !important;
    }
    .vpn-route-item {
      margin: 0;
      padding: 0;
    }
    .vpn-route-option {
      display: flex;
      align-items: center;
      gap: 0.58rem;
      width: 100%;
      margin: 0;
      padding: 0.52rem 0.55rem;
      border: none;
      border-radius: 0.44rem;
      background: transparent;
      color: rgba(210, 225, 245, 0.94);
      font: inherit;
      font-size: 0.78rem;
      text-align: left;
      cursor: pointer;
      transition: background 0.1s ease, color 0.1s ease;
    }
    .vpn-route-option:hover {
      background: rgba(var(--accent-rgb), 0.14);
      color: #fff;
    }
    .vpn-route-option.is-selected {
      background: rgba(var(--accent-rgb), 0.2);
      color: #fff;
    }
    .vpn-route-option-flag {
      width: 1.36rem;
      height: 0.93rem;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
      flex-shrink: 0;
    }
    .vpn-route-option-label {
      flex: 1 1 auto;
      min-width: 0;
    }
    .vpn-route-flag {
      display: block;
      width: 1rem;
      height: 0.72rem;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
      pointer-events: none;
    }
    @media (max-width: 860px) {
      .search-vpn-row {
        width: min(42rem, 100%);
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
      }
      #idk {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
      }
      .vpn-route-picker {
        justify-content: center;
        margin-right: 0;
      }
    }
    .bookmark {
      margin: 0;
      width: 5.1rem;
      height: 5.1rem;
      aspect-ratio: 1;
      padding: 0.4rem 0.32rem 0.36rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.28rem;
      border-radius: 0.65rem;
      border: 1px solid rgba(var(--accent-rgb), 0.42);
      background: linear-gradient(
        165deg,
        rgba(36, 42, 64, 1) 0%,
        rgba(20, 24, 42, 1) 45%,
        rgba(14, 16, 28, 1) 100%
      );
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
    }
    .bookmark:hover {
      border-color: rgba(var(--accent-rgb), 0.72);
      background: linear-gradient(
        165deg,
        rgba(var(--accent-rgb), 0.55) 0%,
        rgba(var(--accent-rgb), 0.28) 50%,
        rgba(18, 22, 38, 1) 100%
      );
      transform: translateY(-1px);
    }
    .bookmark:focus-visible {
      outline: 2px solid rgba(var(--accent-rgb), 0.55);
      outline-offset: 2px;
    }
    .bookmark-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 2.05rem;
      height: 2.05rem;
    }
    .bookmark-img {
      width: 1.85rem;
      height: 1.85rem;
      object-fit: contain;
      display: block;
      pointer-events: none;
    }
    .bookmark .bookmark-lucide,
    .bookmark svg {
      width: 1.85rem;
      height: 1.85rem;
      stroke: rgba(220, 232, 255, 0.92);
      color: rgba(220, 232, 255, 0.92);
    }
    .bookmark:hover svg {
      stroke: #fff;
      color: #fff;
    }
    .bookmark-label {
      display: -webkit-box;
      width: 100%;
      max-width: 100%;
      font-size: 0.57rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      line-height: 1.15;
      text-align: center;
      color: rgba(188, 202, 228, 0.88);
      pointer-events: none;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
    }
    .bookmark:hover .bookmark-label {
      color: rgba(244, 248, 255, 0.96);
    }
    .bookmark-user {
      display: contents;
    }
    .bookmark.bookmark-add {
      border: 1px dashed rgba(var(--accent-rgb), 0.58);
      background: transparent;
      box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.1);
    }
    .bookmark.bookmark-add .bookmark-lucide,
    .bookmark.bookmark-add svg {
      width: 1.7rem;
      height: 1.7rem;
      stroke: rgba(156, 220, 254, 0.7);
      color: rgba(156, 220, 254, 0.7);
      stroke-width: 1.35;
    }
    .bookmark.bookmark-add:hover,
    .bookmark.bookmark-add:focus-visible {
      border: 1px dashed rgba(var(--accent-rgb), 0.9);
      background: rgba(var(--accent-rgb), 0.06);
      box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22);
    }
    .bookmark.bookmark-add:hover {
      transform: translateY(-1px);
    }
    .bookmark.bookmark-add:hover svg,
    .bookmark.bookmark-add:focus-visible svg {
      stroke: rgba(200, 230, 255, 0.95);
      color: rgba(200, 230, 255, 0.95);
    }
    .bookmark-add .bookmark-label {
      color: rgba(156, 220, 254, 0.72);
      font-weight: 500;
    }
    .bookmark.bookmark-add:hover .bookmark-label,
    .bookmark.bookmark-add:focus-visible .bookmark-label {
      color: rgba(200, 230, 255, 0.92);
    }
    .bookmark-add-dialog {
      margin: auto;
      padding: 0;
      max-width: min(22rem, calc(100vw - 2rem));
      border: none;
      border-radius: 0.65rem;
      background: linear-gradient(165deg, rgba(22, 26, 44, 0.98) 0%, rgba(10, 12, 22, 0.99) 100%);
      color: #e8e8ef;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
    }
    .bookmark-add-dialog::backdrop {
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(4px);
    }
    .bookmark-add-form {
      padding: 1.15rem 1.2rem 1.2rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .bookmark-add-form-title {
      margin: 0;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #9cdcfe;
    }
    .bookmark-add-label {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      font-size: 0.68rem;
      font-weight: 500;
      color: rgba(156, 220, 254, 0.55);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .bookmark-add-label input {
      font: inherit;
      font-size: 0.85rem;
      text-transform: none;
      letter-spacing: normal;
      padding: 0.55rem 0.65rem;
      border-radius: 0.4rem;
      border: 1px solid rgba(var(--accent-rgb), 0.45);
      background: rgba(6, 8, 14, 0.9);
      color: #d4d4d4;
      outline: none;
    }
    .bookmark-add-label input:focus {
      border-color: var(--accent-soft);
    }
    .bookmark-add-form-actions {
      display: flex;
      gap: 0.5rem;
      justify-content: flex-end;
      margin-top: 0.35rem;
    }
    .bookmark-add-btn {
      font: inherit;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.45rem 0.85rem;
      border-radius: 0.35rem;
      cursor: pointer;
      border: 1px solid rgba(var(--accent-rgb), 0.4);
      background: rgba(8, 10, 18, 0.8);
      color: rgba(200, 210, 230, 0.95);
    }
    .bookmark-add-btn.primary {
      border-color: rgba(var(--accent-rgb), 0.65);
      background: linear-gradient(180deg, var(--accent) 0%, rgba(var(--accent-rgb), 0.82) 100%);
      color: #0a0c12;
    }
    .bookmark-add-btn:hover {
      filter: brightness(1.06);
    }

    @keyframes rosin-neon-orbit {
      to {
        transform: rotate(1turn);
      }
    }

    @keyframes rosin-neon-trace {
      to {
        offset-distance: 100%;
      }
    }

    html[data-theme="neon"] .bookmark.bookmark-add {
      position: relative;
      isolation: isolate;
      border: none;
      background: transparent;
      box-shadow: none;
    }

    html[data-theme="neon"] .bookmark.bookmark-add::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      z-index: 0;
      border: 1.5px solid rgba(120, 255, 248, 0.28);
      box-shadow:
        inset 0 0 8px rgba(0, 245, 232, 0.12),
        0 0 10px rgba(255, 0, 200, 0.18);
      pointer-events: none;
    }

    html[data-theme="neon"] .bookmark.bookmark-add::after {
      content: "";
      position: absolute;
      width: 0.95rem;
      height: 0.14rem;
      z-index: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, #00f5e8 0%, #ff00c8 100%);
      box-shadow:
        0 0 5px rgba(0, 245, 232, 0.9),
        0 0 10px rgba(255, 0, 200, 0.65),
        0 0 16px rgba(0, 245, 232, 0.35);
      offset-path: inset(1.5px round 0.65rem);
      offset-distance: 0%;
      offset-rotate: auto;
      animation: rosin-neon-trace 1.9s linear infinite;
      pointer-events: none;
    }

    html[data-theme="neon"] .bookmark.bookmark-add .bookmark-icon,
    html[data-theme="neon"] .bookmark.bookmark-add .bookmark-label {
      position: relative;
      z-index: 1;
    }

    html[data-theme="neon"] .bookmark.bookmark-add:hover,
    html[data-theme="neon"] .bookmark.bookmark-add:focus-visible {
      border: none;
      background: transparent;
      box-shadow: none;
    }

    html[data-theme="neon"] .bookmark.bookmark-add:hover::before,
    html[data-theme="neon"] .bookmark.bookmark-add:focus-visible::before {
      border-color: rgba(170, 255, 250, 0.45);
      box-shadow:
        inset 0 0 10px rgba(0, 245, 232, 0.16),
        0 0 14px rgba(255, 0, 200, 0.24);
    }

    html[data-theme="neon"] .bookmark.bookmark-add .bookmark-lucide,
    html[data-theme="neon"] .bookmark.bookmark-add svg {
      stroke: rgba(120, 255, 248, 0.92);
      color: rgba(120, 255, 248, 0.92);
      filter: drop-shadow(0 0 5px rgba(0, 245, 232, 0.55));
    }

    html[data-theme="neon"] .bookmark.bookmark-add .bookmark-label {
      color: rgba(255, 140, 220, 0.88);
      text-shadow: 0 0 8px rgba(255, 0, 200, 0.35);
    }

    html[data-theme="neon"] .bookmark.bookmark-add:hover .bookmark-label,
    html[data-theme="neon"] .bookmark.bookmark-add:focus-visible .bookmark-label {
      color: rgba(255, 200, 240, 0.95);
    }

    html[data-theme="neon"] .bookmark-add-dialog {
      position: relative;
      isolation: isolate;
      overflow: visible;
      border: none;
      background: transparent;
      box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.65),
        0 0 36px rgba(255, 0, 200, 0.14),
        0 0 48px rgba(0, 245, 232, 0.08);
    }

    html[data-theme="neon"] .bookmark-add-dialog::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 0.72rem;
      z-index: 0;
      background: conic-gradient(
        from 0deg,
        #ff00c8,
        #00f5e8,
        #b94dff,
        #00f5e8,
        #ff00c8
      );
      animation: rosin-neon-orbit 3.2s linear infinite;
      pointer-events: none;
    }

    html[data-theme="neon"] .bookmark-add-dialog::after {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: 0.58rem;
      z-index: 0;
      background: linear-gradient(165deg, rgba(24, 8, 40, 0.98) 0%, rgba(8, 4, 18, 0.99) 100%);
      box-shadow: inset 0 0 20px rgba(0, 245, 232, 0.06);
      pointer-events: none;
    }

    html[data-theme="neon"] .bookmark-add-dialog .bookmark-add-form {
      position: relative;
      z-index: 1;
    }

    html[data-theme="neon"] .bookmark-add-form-title {
      color: rgba(140, 255, 248, 0.95);
      text-shadow: 0 0 12px rgba(0, 245, 232, 0.35);
    }

    html[data-theme="neon"] .bookmark-add-label {
      color: rgba(255, 160, 220, 0.62);
    }

    html[data-theme="neon"] .bookmark-add-label input {
      border-color: rgba(0, 245, 232, 0.35);
      box-shadow: 0 0 0 1px rgba(255, 0, 200, 0.06);
    }

    html[data-theme="neon"] .bookmark-add-label input:focus {
      border-color: rgba(255, 100, 210, 0.55);
      box-shadow: 0 0 12px rgba(0, 245, 232, 0.2);
    }