:root {
   color-scheme: light;
   --bg: #ffffff;
   --ink: #191f28;
   --muted: #8b95a1;
   --line: #e5e8eb;
   --paper: #f2f4f6;
   --surface: #ffffff;
   --blue: var(--ink);
   --green: #00c471;
   --coral: #fd1d1d;
   --purple: #833ab4;
   --pink: #c13584;
   --yellow: #fcaf45;
   --accent-gradient: linear-gradient(135deg, #833ab4 0%, #c13584 35%, #e1306c 58%, #fd1d1d 76%, #fcaf45 100%);
   --shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   --chip-active-bg: var(--ink);
   --chip-active-fg: var(--bg);
   --button-hover: #fafbfc;
   --icon-button-hover: #ffffff;
   --elevated-hover: #e8ebee;
   --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
   --modal-backdrop: rgba(25, 31, 40, 0.42);
   --chip-remove-bg: rgba(25, 31, 40, 0.08);
   --chip-remove-hover-bg: var(--chip-active-bg);
   --chip-remove-hover-fg: var(--chip-active-fg);
   --chip-remove-active-bg: rgba(255, 255, 255, 0.18);
   --chip-remove-active-hover-bg: var(--chip-active-fg);
   --chip-remove-active-hover-fg: var(--chip-active-bg);
   --action-button-bg: var(--accent-gradient);
   --action-button-fg: #ffffff;
   --action-button-border: transparent;
   --action-button-hover-bg: var(--accent-gradient);
   --card-min: 250px;
   --masonry-gap: 16px;
}

:root[data-theme='dark'] {
   color-scheme: dark;
   --bg: #0f1114;
   --ink: #eef1f4;
   --muted: #9aa3ad;
   --line: #2a313a;
   --paper: #1a1f27;
   --surface: #151a21;
   --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
   --chip-active-bg: var(--ink);
   --chip-active-fg: var(--bg);
   --button-hover: #222832;
   --icon-button-hover: #222832;
   --elevated-hover: #252c36;
   --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
   --modal-backdrop: rgba(0, 0, 0, 0.62);
   --chip-remove-bg: rgba(255, 255, 255, 0.12);
   --chip-remove-hover-bg: var(--chip-active-bg);
   --chip-remove-hover-fg: var(--chip-active-fg);
   --chip-remove-active-bg: rgba(25, 31, 40, 0.12);
   --chip-remove-active-hover-bg: var(--chip-active-fg);
   --chip-remove-active-hover-fg: var(--chip-active-bg);
   --action-button-bg: var(--accent-gradient);
   --action-button-fg: #ffffff;
   --action-button-border: transparent;
   --action-button-hover-bg: var(--accent-gradient);
}

html.is-theme-transitioning,
html.is-theme-transitioning body,
html.is-theme-transitioning body *,
html.is-theme-transitioning body *::before,
html.is-theme-transitioning body *::after {
   transition-property: background-color, border-color, box-shadow, outline-color !important;
   transition-duration: 0.5s !important;
   transition-timing-function: ease-in-out !important;
}

* {
   box-sizing: border-box;
}

html {
   min-height: 100%;
   background: var(--bg);
   color: var(--ink);
   font-family:
      'Pretendard',
      -apple-system,
      BlinkMacSystemFont,
      'Apple SD Gothic Neo',
      'Segoe UI',
      sans-serif;
   -webkit-font-smoothing: antialiased;
}

body {
   margin: 0;
   min-height: 100vh;
   background: var(--bg);
}

html.is-app-loading,
html.is-app-loading body {
   overflow: hidden;
}

.app-loader {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: grid;
   place-items: center;
   background: var(--bg);
   opacity: 1;
   visibility: visible;
   transition:
      opacity 0.18s ease,
      visibility 0.18s ease;
}

.app-loader-spinner {
   width: 44px;
   height: 44px;
   border: 4px solid var(--line);
   border-top-color: var(--blue);
   border-radius: 50%;
   animation: app-loader-spin 0.72s linear infinite;
}

html:not(.is-app-loading) .app-loader {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
   html.is-theme-transitioning,
   html.is-theme-transitioning body,
   html.is-theme-transitioning body *,
   html.is-theme-transitioning body *::before,
   html.is-theme-transitioning body *::after {
      transition-duration: 0.01ms !important;
   }

   .app-loader-spinner {
      animation-duration: 1.4s;
   }
}

button,
input,
select {
   font: inherit;
}

input:focus,
input:focus-visible {
   outline: none;
   box-shadow: none;
}

button,
.file-button,
a {
   -webkit-tap-highlight-color: transparent;
}

.topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 16px clamp(16px, 2.5vw, 24px);
   border-bottom: 1px solid var(--line);
   background: var(--bg);
}

.brand {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
}

.brand-mark {
   width: 36px;
   height: 36px;
   flex: 0 0 auto;
   border-radius: 10px;
   background-color: transparent;
   background-image: url('./extension/icons/icon128.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
}

.brand-mark.has-profile {
   border-radius: 50%;
   background-color: var(--paper);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.kicker,
.eyebrow {
   margin: 0 0 2px;
   color: var(--muted);
   font-size: 12px;
   font-weight: 600;
}

h1,
h2,
h3,
p {
   margin-top: 0;
}

h1 {
   margin-bottom: 0;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -0.02em;
}

.top-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   /* flex-wrap: wrap; */
}

.icon-button {
   display: inline-grid;
   place-items: center;
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: var(--surface);
   color: var(--ink);
   cursor: pointer;
   text-decoration: none;
   box-shadow: inset 0 0 0 1px var(--line);
   transition:
      background 0.15s ease,
      color 0.15s ease;
}

.icon-button svg {
   width: 18px;
   height: 18px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.icon-button:hover {
   background: var(--icon-button-hover);
   color: var(--ink);
}

.external-button {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 40px;
   padding: 0 12px;
   border-radius: 10px;
   background: var(--surface);
   color: var(--ink);
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: -0.01em;
   box-shadow: inset 0 0 0 1px var(--line);
   transition:
      background 0.15s ease,
      color 0.15s ease;
}

.external-button:hover {
   background: var(--icon-button-hover);
}

.external-button:disabled {
   opacity: 0.55;
   cursor: wait;
}

.external-button-icon {
   width: 14px;
   height: 14px;
   flex: 0 0 auto;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.theme-toggle {
   position: relative;
}

.theme-toggle .theme-icon {
   width: 18px;
   height: 18px;
}

.theme-toggle .theme-icon-moon {
   display: none;
}

:root[data-theme='dark'] .theme-toggle .theme-icon-sun {
   display: none;
}

:root[data-theme='dark'] .theme-toggle .theme-icon-moon {
   display: block;
}

.theme-toggle .theme-icon-moon path {
   fill: currentColor;
   stroke: currentColor;
   stroke-width: 1.4;
   stroke-linejoin: round;
   stroke-linecap: round;
}

#fileInput {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

button,
.file-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 40px;
   padding: 0 16px;
   border: none;
   border-radius: 10px;
   background: var(--surface);
   color: var(--ink);
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   box-shadow: inset 0 0 0 1px var(--line);
}

button:hover,
.file-button:hover {
   background: var(--button-hover);
}

button:disabled {
   cursor: not-allowed;
   opacity: 0.4;
}

main {
   width: 100%;
   max-width: none;
   margin: 0;
   padding: 16px clamp(16px, 2.5vw, 24px);
}

.drop-zone {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
   gap: 24px;
   align-items: stretch;
   min-height: 220px;
   padding: clamp(22px, 4vw, 42px);
   border: 1px dashed var(--line);
   border-radius: 16px;
   background: var(--surface);
   box-shadow: var(--shadow);
}

.drop-zone.is-dragging {
   border-color: var(--blue);
   box-shadow: 0 0 0 3px rgba(225, 48, 108, 0.16);
}

.drop-copy {
   display: flex;
   min-width: 0;
   flex-direction: column;
   justify-content: center;
}

.drop-copy h2 {
   margin-bottom: 12px;
   font-size: clamp(28px, 5vw, 48px);
   line-height: 1.15;
   letter-spacing: -0.03em;
}

.drop-copy p:not(.eyebrow) {
   max-width: 620px;
   margin-bottom: 0;
   color: var(--muted);
   font-size: 15px;
   line-height: 1.6;
}

.status-line {
   width: fit-content;
   max-width: 100%;
   margin-top: 16px;
   padding: 10px 14px;
   border-radius: 10px;
   background: rgba(225, 48, 108, 0.09);
   color: var(--blue);
   font-size: 14px;
   font-weight: 600;
   overflow-wrap: anywhere;
}

.status-line.is-error {
   background: rgba(240, 68, 82, 0.08);
   color: var(--coral);
}

.status-line.is-success {
   background: rgba(0, 196, 113, 0.08);
   color: var(--green);
}

.method-panel {
   display: flex;
   align-items: center;
   min-width: 0;
   border-left: 3px solid var(--blue);
   background: var(--paper);
   border-radius: 0 12px 12px 0;
}

.method-panel ol {
   display: grid;
   gap: 8px;
   margin: 0;
   padding: 18px 18px 18px 36px;
   color: var(--ink);
   font-size: 14px;
   font-weight: 500;
}

.toolbar {
   position: sticky;
   top: 0;
   z-index: 20;
   width: 100%;
   margin-bottom: 16px;
   /* margin-left: -16px clamp(-16px, -2.5vw, -24px); */
   margin-top: -16px;
   padding-block: 10px;
   /* padding-inline: 16px clamp(16px, 2.5vw, 24px); */
   border-bottom: 1px solid var(--line);
   background: var(--bg);
}

.toolbar-row {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
}

.folder-bar-wrap {
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-width: 0;
   flex: 1;
}

.folder-bar {
   display: flex;
   align-items: center;
   gap: 6px;
   min-width: 0;
}

.folder-scroll-shell {
   position: relative;
   min-width: 0;
   flex: 1;
}

.folder-scroll-shell::before,
.folder-scroll-shell::after {
   position: absolute;
   z-index: 2;
   top: 0;
   bottom: 0;
   width: 30px;
   opacity: 0;
   pointer-events: none;
   content: '';
   transition: opacity 0.15s ease;
}

.folder-scroll-shell::before {
   left: 0;
   background: linear-gradient(90deg, var(--bg) 12%, transparent 100%);
}

.folder-scroll-shell::after {
   right: 0;
   background: linear-gradient(270deg, var(--bg) 12%, transparent 100%);
}

.folder-scroll-shell.has-left-overflow::before,
.folder-scroll-shell.has-right-overflow::after {
   opacity: 1;
}

.folder-scroll {
   display: flex;
   align-items: center;
   gap: 6px;
   min-width: 0;
   overflow-x: auto;
   cursor: grab;
   scrollbar-width: none;
   touch-action: pan-x pan-y;
}

.folder-scroll.is-dragging {
   cursor: grabbing;
   user-select: none;
}

.folder-scroll::-webkit-scrollbar {
   display: none;
}

.folder-scroll > .folder-chip,
.folder-chip-list {
   flex: 0 0 auto;
}

.folder-bar > .folder-chip {
   position: relative;
   z-index: 3;
   flex: 0 0 auto;
}

.folder-chip-list {
   display: flex;
   align-items: center;
   gap: 6px;
}

.folder-chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   width: auto;
   flex: 0 0 auto;
   min-height: 36px;
   padding: 0 12px;
   border: none;
   border-radius: 12px;
   background: var(--paper);
   color: var(--ink);
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
   box-shadow: none;
   transition:
      background 0.15s ease,
      color 0.15s ease;
}

.folder-chip:hover,
.folder-chip.is-active {
   background: var(--chip-active-bg);
   color: var(--chip-active-fg);
}

.folder-chip-add {
   border: 1px solid #191f28;
   background: #ffffff;
   color: #191f28;
}

.folder-chip-add:hover {
   background: #f2f4f6;
   color: #191f28;
   filter: none;
}

:root[data-theme='dark'] .folder-chip-add {
   border-color: #ffffff;
   background: #191f28;
   color: #ffffff;
}

:root[data-theme='dark'] .folder-chip-add:hover {
   background: #252c36;
   color: #ffffff;
}

.folder-chip-count {
   opacity: 0.72;
   font-size: 12px;
   font-weight: 500;
}

.folder-chip-remove {
   display: grid;
   place-items: center;
   width: 18px;
   height: 18px;
   min-height: 0;
   min-width: 0;
   margin-left: 2px;
   padding: 0;
   border: none;
   border-radius: 12px;
   background: var(--chip-remove-active-bg);
   color: inherit;
   cursor: pointer;
   font-size: 14px;
   line-height: 1;
   box-shadow: none;
   transition:
      background 0.15s ease,
      color 0.15s ease;
}

.folder-chip:not(.is-active) .folder-chip-remove {
   background: var(--chip-remove-bg);
}

.folder-chip-remove:hover {
   background: var(--chip-remove-active-hover-bg);
   color: var(--chip-remove-active-hover-fg);
}

.folder-chip:not(.is-active) .folder-chip-remove:hover {
   background: var(--chip-remove-hover-bg);
   color: var(--chip-remove-hover-fg);
}

.folder-chip:hover .folder-chip-remove {
   background: var(--chip-remove-active-bg);
   color: var(--chip-active-fg);
}

.folder-chip:hover .folder-chip-remove:hover {
   background: var(--chip-remove-active-hover-bg);
   color: var(--chip-remove-active-hover-fg);
}

.item-count {
   display: flex;
   align-items: center;
   gap: 6px;
   margin: 0;
   flex-shrink: 0;
   white-space: nowrap;
}

.item-count strong,
.item-count span {
   font-size: 14px;
   font-weight: 600;
   line-height: 1;
}

.item-count span {
   color: var(--muted);
}

.search-wrap {
   position: relative;
   flex: 0 0 300px;
   width: 300px;
   max-width: 300px;
   min-width: 0;
}

.search-wrap svg {
   position: absolute;
   top: 50%;
   left: 14px;
   width: 18px;
   height: 18px;
   fill: none;
   stroke: var(--muted);
   stroke-width: 2;
   transform: translateY(-50%);
}

.toolbar input {
   width: 100%;
   min-height: 44px;
   padding: 0 14px 0 40px;
   border: none;
   border-radius: 10px;
   background: var(--paper);
   color: var(--ink);
   font-size: 14px;
   font-weight: 500;
}

.toolbar input:focus {
   outline: none;
   box-shadow: none;
}

[hidden] {
   display: none !important;
}

.empty-state {
   display: grid;
   min-height: 240px;
   place-items: center;
   border-radius: 16px;
   background: var(--surface);
   box-shadow: var(--shadow);
   text-align: center;
}

.empty-state h2 {
   margin-bottom: 0;
   font-size: 22px;
   font-weight: 700;
}

.empty-onboarding {
   width: min(760px, 100%);
   margin: 0 auto;
   padding: 34px 24px;
   text-align: center;
}

.empty-onboarding h2 {
   margin: 8px 0 12px;
   font-size: clamp(26px, 3vw, 42px);
}

.empty-state .empty-onboarding-copy {
   max-width: 650px;
   margin: 0 auto;
   color: var(--muted);
   font-size: 16px;
   line-height: 1.7;
}

.empty-onboarding-steps {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
   margin: 28px 0 24px;
   padding: 0;
   list-style: none;
   text-align: left;
}

.empty-onboarding-steps li {
   display: grid;
   grid-template-columns: 34px 1fr;
   gap: 3px 10px;
   padding: 16px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: var(--paper);
}

.empty-onboarding-steps span {
   grid-row: 1 / 3;
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   border-radius: 10px;
   background: var(--ink);
   color: var(--bg);
   font-weight: 800;
}

.empty-onboarding-steps strong {
   align-self: end;
   color: var(--ink);
   font-size: 14px;
}

.empty-onboarding-steps small {
   color: var(--muted);
   font-size: 12px;
   line-height: 1.45;
}

.empty-onboarding-actions {
   display: flex;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap;
}

.empty-onboarding-actions button,
.secondary-link-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 46px;
   padding: 0 18px;
   border-radius: 12px;
   font-size: 14px;
   font-weight: 800;
   text-decoration: none;
}

.empty-onboarding-actions button {
   border: 1px solid var(--action-button-border);
   background: var(--action-button-bg);
   color: var(--action-button-fg);
   box-shadow: none;
}

.empty-onboarding-actions button:hover:not(:disabled) {
   background: var(--action-button-hover-bg);
   filter: brightness(1.06);
}

.secondary-link-button {
   border: 1px solid var(--line);
   background: var(--paper);
   color: var(--ink);
}

.cards {
   display: flex;
   align-items: flex-start;
   gap: var(--masonry-gap);
}

.masonry-column {
   flex: 1 1 0;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: var(--masonry-gap);
}

.saved-card {
   position: relative;
   display: block;
   width: 100%;
   min-width: 0;
   overflow: hidden;
   border-radius: 16px;
   background: var(--surface);
   box-shadow: var(--shadow);
   transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
}

.saved-card:hover {
   cursor: pointer;
}

.saved-card:hover,
.saved-card:focus-within,
.saved-card.is-expanded {
   transform: translateY(-2px);
   box-shadow: var(--card-hover-shadow);
}

.card-media {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   background: var(--paper);
}

.card-media img,
.fallback-thumb {
   display: block;
   width: 100%;
   max-width: 100%;
}

.card-media img {
   opacity: 1;
   object-fit: cover;
   transition:
      opacity 0.2s ease,
      transform 0.25s ease;
}

.saved-card:hover .card-media.has-image img,
.saved-card:focus-within .card-media.has-image img,
.saved-card.is-expanded .card-media.has-image img {
   transform: scale(1.02);
}

.card-media.has-image .fallback-thumb {
   display: none;
}

.fallback-thumb {
   display: grid;
   min-height: 200px;
   place-items: center;
}

.card-media-button {
   position: absolute;
   top: 10px;
   z-index: 4;
   display: grid;
   place-items: center;
   width: 36px;
   height: 36px;
   min-width: 36px;
   min-height: 36px;
   max-width: 36px;
   max-height: 36px;
   padding: 0;
   border: none;
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.42);
   color: #fff;
   cursor: pointer;
   opacity: 0;
   text-decoration: none;
   box-shadow: none;
   font-size: 0;
   transition:
      opacity 0.2s ease,
      background 0.15s ease,
      color 0.15s ease;
}

.card-media-button svg {
   width: 18px;
   height: 18px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.favorite-button {
   left: 10px;
   border-radius: 50%;
}

.card-link {
   right: 10px;
}

.favorite-button svg {
   width: 20px;
   height: 20px;
   transform: scale(0.92);
   stroke-width: 1.6;
   stroke-linejoin: round;
   stroke-linecap: round;
}

.favorite-button.is-active {
   color: rgb(255 194 21);
}

.favorite-button.is-active svg {
   fill: currentColor;
   stroke: currentColor;
}

.favorite-button.is-active:hover {
   color: rgb(255 194 21);
}

.favorite-button.is-active,
.saved-card:hover .card-media-button,
.saved-card:focus-within .card-media-button,
.saved-card.is-expanded .card-media-button {
   opacity: 1;
}

.card-media-button:hover {
   background: var(--surface);
   color: var(--ink);
}

.folder-modal {
   width: min(92vw, 360px);
   padding: 0;
   border: none;
   border-radius: 16px;
   background: transparent;
   box-shadow: none;
}

.folder-modal::backdrop {
   background: var(--modal-backdrop);
}

.folder-modal-panel {
   display: grid;
   gap: 14px;
   padding: 20px;
   border-radius: 16px;
   background: var(--surface);
   box-shadow: var(--shadow);
}

.folder-modal-panel h2 {
   margin: 0;
   font-size: 18px;
   font-weight: 700;
}

.folder-delete-name {
   margin: 0;
   color: var(--ink);
   font-size: 16px;
   font-weight: 750;
   overflow-wrap: anywhere;
}

.folder-modal-description {
   margin: -4px 0 2px;
   color: var(--muted);
   font-size: 13px;
   line-height: 1.55;
}

.folder-sync-warning {
   margin: -2px 0 0;
   padding: 11px 12px;
   border: 1px solid rgba(255, 184, 0, 0.35);
   border-radius: 10px;
   background: rgba(255, 184, 0, 0.1);
   color: var(--ink);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.5;
}

/* .folder-sync-warning::before {
   margin-right: 6px;
   color: var(--yellow);
   content: '!';
   font-weight: 900;
} */

.folder-modal-panel input {
   width: 100%;
   min-height: 44px;
   padding: 0 14px;
   border: none;
   border-radius: 10px;
   background: var(--paper);
   color: var(--ink);
   font-size: 14px;
   font-weight: 500;
}

.folder-modal-panel input:focus {
   outline: none;
   box-shadow: none;
}

.folder-modal-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
}

.folder-modal-actions button.secondary,
button.secondary.full-width {
   background: var(--surface);
   box-shadow: inset 0 0 0 1px var(--line);
}

button.full-width {
   width: 100%;
}

button.danger {
   background: var(--coral);
   color: #fff;
   box-shadow: none;
}

button.danger:hover:not(:disabled) {
   background: var(--coral);
   filter: brightness(1.06);
}

.folder-picker-list {
   display: grid;
   gap: 8px;
   max-height: 280px;
   overflow-y: auto;
}

.folder-picker-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   width: 100%;
   min-height: 44px;
   padding: 0 12px;
   border: none;
   border-radius: 10px;
   background: var(--paper);
   color: var(--ink);
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   text-align: left;
   box-shadow: none;
}

.folder-picker-item:hover {
   background: var(--elevated-hover);
}

.folder-picker-item.is-selected {
   background: var(--chip-active-bg);
   color: var(--chip-active-fg);
}

.folder-picker-name {
   flex: 1;
   min-width: 0;
}

.folder-picker-mark {
   flex: 0 0 auto;
   width: 18px;
   text-align: center;
   font-size: 14px;
   font-weight: 700;
   opacity: 0;
}

.folder-picker-item.is-selected .folder-picker-mark {
   opacity: 1;
}

.folder-picker-item.is-selected .folder-picker-mark::before {
   content: '✓';
}

.empty-state p:not(.eyebrow) {
   margin: 10px 0 0;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.5;
}

.card-body {
   position: absolute;
   inset: 0;
   z-index: 3;
   display: grid;
   align-content: end;
   gap: 10px;
   padding: 14px;
   border-radius: 16px;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.72) 100%);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   opacity: 0;
   transform: translateY(6px);
   pointer-events: none;
   transition:
      opacity 0.22s ease,
      transform 0.22s ease;
}

.saved-card:hover .card-body,
.saved-card:focus-within .card-body,
.saved-card.is-expanded .card-body {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

.card-main h3 {
   margin: 0;
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow-wrap: anywhere;
}

.shortcode {
   display: none;
}

.card-meta {
   display: none;
}

.card-edit {
   display: grid;
   gap: 8px;
}

.card-edit input {
   width: 100%;
   min-height: 40px;
   min-width: 0;
   padding: 0 12px;
   border: none;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.12);
   color: #fff;
   font-size: 13px;
   font-weight: 500;
}

.card-edit input::placeholder {
   color: rgba(255, 255, 255, 0.5);
}

.card-edit input:focus {
   outline: none;
   box-shadow: none;
   background: rgba(255, 255, 255, 0.18);
}

.unsave-button {
   width: 100%;
   min-height: 36px;
   padding: 0 12px;
   border: none;
   border-radius: 10px;
   background: rgba(240, 68, 82, 0.18);
   color: #fff;
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   box-shadow: none;
}

.unsave-button:hover:not(:disabled) {
   background: rgba(240, 68, 82, 0.32);
}

.unsave-button:disabled {
   cursor: not-allowed;
   opacity: 0.45;
}

.site-footer {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 14px;
   justify-content: center;
   padding: 28px 16px 40px;
   color: var(--muted);
   font-size: 13px;
}

.site-footer a {
   color: inherit;
   font-weight: 700;
}

@media (max-width: 860px) {
   .brand h1 {
      font-size: 18px;
   }
   .topbar {
      align-items: stretch;
      /* flex-direction: column; */
   }

   .top-actions {
      justify-content: flex-start;
      gap: 4px;
   }

   .drop-zone {
      grid-template-columns: 1fr;
   }

   .toolbar-row {
      flex-wrap: wrap;
   }

   .folder-bar {
      width: 100%;
      flex: 1 1 100%;
   }

   .search-wrap {
      flex: 1 1 100%;
      width: 100%;
      min-width: 100%;
      max-width: 300px;
   }

   .empty-onboarding-steps {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 540px) {
   .drop-copy h2 {
      font-size: 32px;
   }

   button,
   .file-button {
      width: 100%;
   }
}