/* ==============================================================
   ScreenshotFiles application UI
   Brand source: /brand/README-BRANDGUIDE.md
   Calm, premium and minimal with one restrained warm Glow accent.
   ============================================================== */

/* -- DESIGN TOKENS -- */
:root {
  --bg: var(--sf-canvas);
  --surface: var(--sf-white);
  --surface2: var(--sf-paper);
  --surface3: #dedbd5;
  --border: rgba(19, 20, 23, 0.1);
  --border2: rgba(19, 20, 23, 0.18);
  --border3: rgba(19, 20, 23, 0.32);

  /* Text */
  --text: var(--sf-ink);
  --text-soft: #34363b;
  --muted: var(--sf-steel);
  --faint: #7b7e84;

  /* Brand and status */
  --accent: var(--sf-glow);
  --accent-hover: var(--sf-glow-hover);
  --accent-down: #df8127;
  --accent-ink: var(--sf-ink);
  --accent-glow: var(--sf-glow-soft);
  --green: #34d885;
  --green-ink: #06130c;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --blue: var(--sf-steel);
  --orange: var(--sf-glow);

  /* Typography */
  --font-ui: var(--sf-font-body);
  --font-display: var(--sf-font-display);
  --font-mono: 'Cascadia Code', 'SF Mono', 'Fira Code', Consolas, monospace;

  /* Shape and depth */
  --r-sm: 8px;
  --r-md: var(--sf-radius-button);
  --r-lg: 16px;
  --r-xl: var(--sf-radius-card);
  --shadow-sm: 0 2px 8px rgba(19, 20, 23, 0.06);
  --shadow-md: 0 10px 30px rgba(19, 20, 23, 0.1);
  --shadow-lg: var(--sf-shadow-soft);
  --ring: 0 0 0 2px var(--sf-canvas), 0 0 0 4px var(--sf-glow);

  /* Motion */
  --t-fast: 140ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-med: 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; }

body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  background:
    radial-gradient(700px 360px at 92% -8%, rgba(247, 167, 83, 0.13), transparent 68%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Consistent visible focus for keyboard navigation */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -- HEADER -- */
header {
  min-height: 68px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  background: rgba(244, 243, 240, 0.98);
  z-index: 100;
  user-select: none;
}

.hdr-brand { display: flex; align-items: center; min-width: 0; }
.brand-home { display: flex; align-items: center; color: inherit; text-decoration: none; }

.wordmark {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.09em;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Brand icon drawn in CSS */
.wordmark-icon {
  width: 20px;
  height: 14px;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--accent-glow);
}
.wordmark-icon::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.count-badge {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 1px 7px;
  border-radius: 999px;
  display: none;
  line-height: 1.6;
}

.header-mid {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.search-wrap { position: relative; }
#searchInput {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 12px 7px 30px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text);
  width: 210px;
  transition: width var(--t-med), border-color var(--t-fast), background var(--t-fast);
  outline: none;
}
#searchInput:hover { border-color: var(--border2); }
#searchInput:focus {
  border-color: var(--border3);
  background: var(--surface3);
  width: 280px;
  box-shadow: none;
}
#searchInput:focus-visible { box-shadow: var(--ring); }
#searchInput::placeholder { color: var(--faint); }
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  line-height: 1;
}
.search-icon svg { display: block; }

#folderLabel {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
#folderLabel .folder-name { color: var(--green); }

.header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  user-select: none;
}

.free-indicator {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  line-height: 1.2;
}
.free-indicator .bar {
  width: 42px;
  height: 4px;
  background: var(--border2);
  border-radius: 999px;
  overflow: hidden;
}
.free-indicator .bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--t-med), background var(--t-med);
  width: 0%;
}
.free-indicator .bar-fill.warn { background: var(--orange); }
.free-indicator .bar-fill.full { background: var(--danger); }

/* -- BUTTONS -- */
button {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: var(--r-md);
  padding: 7px 14px;
  line-height: 1.4;
  transition: background var(--t-fast), border-color var(--t-fast),
    color var(--t-fast), opacity var(--t-fast), transform var(--t-fast),
    box-shadow var(--t-fast);
  white-space: nowrap;
  user-select: none;
}
button:active { transform: translateY(1px); }

.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(247, 167, 83, 0.2), 0 2px 10px rgba(247, 167, 83, 0.08);
}
.btn-accent:hover { background: var(--accent-hover); }
.btn-accent:active { background: var(--accent-down); }
.btn-accent:disabled { opacity: 0.5; cursor: default; transform: none; }

.btn-green { background: var(--green); color: var(--green-ink); font-weight: 700; }
.btn-green:hover { background: #45e695; }

.btn-ghost {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border2);
}
.btn-ghost:hover { border-color: var(--border3); color: var(--text); background: var(--surface2); }
.btn-ghost:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.btn-soft-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.25);
}
.btn-soft-danger:hover { background: var(--danger-soft); border-color: rgba(248, 113, 113, 0.45); }
.btn-soft-danger:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.btn-upgrade {
  background: linear-gradient(135deg, rgba(247, 167, 83, 0.1), rgba(247, 167, 83, 0.02));
  border: 1px solid rgba(247, 167, 83, 0.35);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}
.btn-upgrade:hover {
  background: rgba(247, 167, 83, 0.14);
  border-color: rgba(247, 167, 83, 0.6);
  box-shadow: 0 0 16px var(--accent-glow);
}
.btn-upgrade[hidden] { display: none !important; }

.btn-account {
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
}
.btn-account:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.header-menu-wrap { position: relative; }
.header-menu-trigger { min-width: 72px; }
.header-menu-trigger span { color: var(--accent); margin-left: 4px; }
.header-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: 224px;
  padding: 7px;
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  background: var(--sf-white);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  z-index: 180;
}
.header-menu[hidden] { display: none; }
.header-menu button {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-soft);
  text-align: left;
}
.header-menu button:hover { background: var(--surface3); color: var(--text); }
.header-menu button:disabled { color: var(--faint); cursor: default; }
.menu-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  padding: 10px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11.5px;
}

.pro-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 2px 6px;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  line-height: 1.5;
}

/* -- BANNERS -- */
#folderBanner {
  margin: 14px 24px 0;
  background: linear-gradient(135deg, rgba(52, 216, 133, 0.07), rgba(52, 216, 133, 0.02));
  border: 1px solid rgba(52, 216, 133, 0.22);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#folderBanner.hidden { display: none; }
.banner-text { font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.banner-text strong { color: var(--green); }
.banner-text small { color: var(--muted); font-size: 12px; display: block; }
.banner-btn { flex-shrink: 0; }

#apiWarning {
  margin: 14px 24px 0;
  background: rgba(255, 184, 77, 0.06);
  border: 1px solid rgba(255, 184, 77, 0.25);
  border-radius: var(--r-lg);
  padding: 11px 15px;
  font-size: 13px;
  color: var(--orange);
  display: none;
}

.account-nudge {
  margin: 14px 24px 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(247, 167, 83, 0.32);
  border-radius: var(--r-lg);
  background: linear-gradient(110deg, rgba(247, 167, 83, 0.1), rgba(247, 167, 83, 0.02));
}
.account-nudge[hidden] { display: none; }
.account-nudge > div { flex: 1; min-width: 180px; }
.account-nudge strong { display: block; color: var(--accent); font-size: 13px; margin-bottom: 2px; }
.account-nudge span { color: var(--text-soft); font-size: 12.5px; }
.nudge-dismiss { background: transparent; color: var(--muted); padding-inline: 8px; }

/* -- TAGS BAR -- */
#tagsBar {
  padding: 10px 24px;
  display: none;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
#tagsBar.visible { display: flex; }
.tags-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.tag-filter {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: all var(--t-fast);
}
.tag-filter:hover { border-color: var(--border3); color: var(--text); background: var(--surface2); }
.tag-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

/* -- DROPZONE -- */
#dropzone {
  margin: 14px 24px;
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  text-align: center;
  transition: border-color var(--t-med), background var(--t-med), box-shadow var(--t-med);
  background: var(--surface);
  outline: none;
  cursor: pointer;
  user-select: none;
}
#dropzone:hover { border-color: var(--border3); }
#dropzone.active {
  border-color: var(--accent);
  background: rgba(247, 167, 83, 0.04);
  box-shadow: inset 0 0 60px rgba(247, 167, 83, 0.04);
}

#dropzone.compact {
  min-height: 0;
  margin: 10px auto;
  padding: 14px 18px;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(19, 20, 23, 0.05);
}

#dropzone.compact::after { display: none; }

#dropzone.compact .dz-icon-wrap {
  width: 38px;
  height: 38px;
  background-size: auto 31px;
  border-radius: 11px;
  box-shadow: 0 8px 20px rgba(19, 20, 23, 0.16);
}
#dropzone.ready { border-color: rgba(52, 216, 133, 0.4); }
#dropzone:focus-visible { box-shadow: var(--ring); }

.dz-icon-wrap {
  width: 44px;
  height: 32px;
  border: 2px solid var(--border3);
  border-radius: var(--r-sm);
  margin: 0 auto 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-med);
}
.dz-icon-wrap::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border3);
  transition: background var(--t-med);
}
#dropzone.active .dz-icon-wrap { border-color: var(--accent); }
#dropzone.active .dz-icon-wrap::before { background: var(--accent); }

.dz-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--text); letter-spacing: -0.01em; }
/* The heading above now describes the product rather than naming the action,
   so this line is the primary instruction on the first screen and is sized
   like one. */
.dz-hint { font-size: 15px; color: var(--text-soft); line-height: 2; }

.kbd {
  display: inline-block;
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 0 6px;
  color: var(--accent);
  line-height: 1.7;
}
.kbd-small { font-size: 10px; padding: 0 5px; line-height: 1.7; }

.dz-folder-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--green);
  background: rgba(52, 216, 133, 0.08);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(52, 216, 133, 0.25);
}

.dz-quick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.dz-quick:hover { border-color: var(--border3); color: var(--text); }
.dz-quick-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border3);
  flex-shrink: 0;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.dz-quick.active { border-color: rgba(247, 167, 83, 0.5); color: var(--accent); background: rgba(247, 167, 83, 0.06); }
.dz-quick.active .dz-quick-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

/* Compact drop zone after the first screenshot */
#dropzone.compact {
  padding: 10px 18px;
  margin: 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border-radius: var(--r-lg);
}
#dropzone.compact .dz-icon-wrap { margin: 0; flex-shrink: 0; width: 30px; height: 22px; }
#dropzone.compact .dz-icon-wrap::before { width: 7px; height: 7px; }
#dropzone.compact .dz-title { display: none; }
#dropzone.compact .dz-hint {
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dropzone.compact .dz-folder-status { margin-top: 0; font-size: 11.5px; padding: 2px 10px; }
#dropzone.compact .dz-quick { margin-top: 0; margin-left: auto; flex-shrink: 0; }

/* -- GRID -- */
#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  padding: 10px 24px 32px;
}

.thumb {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast),
    opacity var(--t-med), box-shadow var(--t-fast);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.thumb:hover {
  border-color: var(--border3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.thumb.saved { border-color: rgba(52, 216, 133, 0.35); }
.thumb.hidden-thumb { display: none; }

.thumb-img-wrap { position: relative; }
.thumb img {
  width: 100%;
  display: block;
  height: 150px;
  object-fit: contain;
  background:
    repeating-conic-gradient(var(--surface2) 0% 25%, var(--surface) 0% 50%) 0 0 / 16px 16px;
  cursor: zoom-in;
}

.thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 13, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.thumb:hover .thumb-overlay, .thumb:focus-within .thumb-overlay { opacity: 1; }

.ov-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(13, 19, 33, 0.92);
  color: var(--text-soft);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  position: relative;
}
.ov-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.ov-btn.share-btn:hover { border-color: var(--blue); color: var(--blue); }

.pro-pip {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 11px;
  height: 11px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pro-pip svg { display: block; }

.anno-pip {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  background: rgba(13, 19, 33, 0.92);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.anno-pip.visible { display: flex; }
.anno-pip svg { display: block; }

.quick-pip {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  background: rgba(13, 19, 33, 0.92);
  border: 1px solid rgba(247, 167, 83, 0.6);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: none;
  pointer-events: none;
  z-index: 2;
}
.quick-pip.visible { display: block; }

.ocr-match-label {
  display: none;
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: var(--r-sm);
  background: rgba(13, 19, 33, 0.92);
  border: 1px solid rgba(247, 167, 83, 0.4);
  color: var(--accent);
  pointer-events: none;
  z-index: 2;
}
.thumb.ocr-match .ocr-match-label { display: block; }

.thumb-meta { padding: 8px 10px 9px; }
.thumb-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  min-height: 0;
}
.thumb-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text-soft);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  user-select: none;
}
.thumb-tag:hover { color: var(--danger); border-color: rgba(248, 113, 113, 0.4); }
.add-tag-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px dashed var(--border2);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: all var(--t-fast);
}
.add-tag-btn:hover { border-color: var(--accent); color: var(--accent); }

.thumb-footer { display: flex; align-items: center; gap: 6px; }
.saved-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  display: none;
}
.thumb.saved .saved-dot { display: block; }
.thumb-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.icon-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--border3); color: var(--text); background: var(--surface2); }
.icon-btn.dl:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn.del:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.icon-btn svg { display: block; }

/* -- TOAST -- */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--r-md);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-ui);
  z-index: 9999;
  box-shadow: var(--shadow-lg);
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.ok { background: var(--green); color: var(--green-ink); }
#toast.err { background: var(--danger); color: #1a0505; }
#toast.info { background: var(--surface3); color: var(--text); border: 1px solid var(--border2); }

/* -- LIGHTBOX -- */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 10, 0.96);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#lightbox.open { display: flex; }
#lightbox img {
  max-width: 94vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}
#lightboxImg.picking { cursor: crosshair; }

.lb-toolbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 5;
  background: rgba(13, 19, 33, 0.9);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lb-color-result { display: flex; gap: 7px; align-items: center; }
.lb-color-result[hidden] { display: none; }
.lb-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-block;
}
.lb-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
}
.lb-code:hover { border-color: var(--accent); color: var(--accent); }
#lbLoupe {
  position: fixed;
  z-index: 6;
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  pointer-events: none;
  background: #000;
  box-shadow: var(--shadow-lg);
}

/* -- MODAL BASE -- */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-backdrop.open { display: flex; }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  padding: 26px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  user-select: text;
  box-shadow: var(--shadow-lg);
  animation: modalIn var(--t-med) both;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.modal-close:hover { border-color: var(--border3); color: var(--text); background: var(--surface2); }
.modal-close svg { display: block; }

.modal-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 34px;
}

.modal-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.6;
}

.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* -- SHARE MODAL -- */
#shareBox { width: 420px; }

.share-opts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.share-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}
.share-opt input { flex: 1; max-width: 220px; }
.share-create { width: 100%; margin-bottom: 14px; padding: 10px; }

.link-row { display: flex; gap: 8px; margin-bottom: 14px; }
.link-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-soft);
  outline: none;
  cursor: text;
  transition: border-color var(--t-fast);
}
.link-input:focus { border-color: var(--border3); box-shadow: none; }
.link-input:focus-visible { box-shadow: var(--ring); }
.link-input::placeholder { color: var(--faint); }

.share-send { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.share-send[hidden] { display: none; }
.share-send-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.share-protection-state {
  padding: 10px 12px;
  border: 1px solid rgba(52, 216, 133, 0.24);
  border-radius: var(--r-md);
  background: rgba(52, 216, 133, 0.06);
  color: var(--text-soft);
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.share-protection-state[hidden] { display: none; }
.share-protection-state label { color: var(--danger); white-space: nowrap; }

/* -- PAYWALL -- */
#paywallBox { width: 440px; }

.pro-mark-large {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 4px 10px;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  margin-bottom: 16px;
  display: block;
  width: fit-content;
  box-shadow: 0 0 24px var(--accent-glow);
}

.paywall-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.paywall-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }

.perk-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.perk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 13px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast);
}
.perk:hover { border-color: var(--border2); }
.perk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
  box-shadow: 0 0 8px var(--accent-glow);
}
.perk-body { font-size: 13px; line-height: 1.5; }
.perk-body strong { display: block; margin-bottom: 1px; font-weight: 700; color: var(--text); }
.perk-body span { color: var(--muted); font-size: 12.5px; }

.pricing-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.price-main {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.price-period { font-size: 13px; color: var(--muted); }
.price-note { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }

.paywall-cta { width: 100%; padding: 13px; font-size: 14.5px; border-radius: var(--r-md); margin-bottom: 8px; }
.paywall-alt { width: 100%; padding: 11px; font-size: 13px; border-radius: var(--r-md); margin-bottom: 8px; }
.paywall-alt[hidden] { display: none; }
.paywall-skip {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-ui);
  width: 100%;
  text-align: center;
  padding: 6px;
}
.paywall-skip:hover { color: var(--text); }

/* Account */
#accountBox { width: 540px; }
.account-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 14px;
  padding: 4px 9px;
  border: 1px solid rgba(247, 167, 83, 0.28);
  border-radius: 999px;
  background: rgba(247, 167, 83, 0.07);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.account-benefits { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.account-benefits li { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); }
.account-benefits strong, .account-benefits span { display: block; }
.account-benefits strong { margin-bottom: 4px; color: var(--text); font-size: 13px; }
.account-benefits span { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.account-form label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.account-email-row { display: flex; gap: 8px; }
.account-email-row .link-input { font-size: 14px; }
.account-email-row .btn-accent { min-height: 44px; }
.account-privacy { font-size: 11.5px; line-height: 1.5; color: var(--faint); margin: 8px 0 0; }
.form-error { color: var(--danger); font-size: 12.5px; margin: 8px 0 0; }
.account-sent { padding: 16px; border: 1px solid rgba(52, 216, 133, 0.26); background: rgba(52, 216, 133, 0.07); border-radius: var(--r-lg); }
.account-sent strong, .account-sent span { display: block; }
.account-sent strong { color: var(--green); margin-bottom: 4px; }
.account-sent span { color: var(--text-soft); font-size: 13px; }

/* The security code, shown so it can be compared against the one in the email.
   Monospaced with wide tracking because it is read character by character across
   two screens. It is never typed back in, so it is not an input. */
.account-code { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.account-code .account-code-label {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.account-code .account-code-value {
  display: block;
  margin: 2px 0 4px;
  color: var(--text);
  font: 600 24px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}
.account-code .account-code-hint { color: var(--text-soft); font-size: 11px; }
.account-waiting { margin-top: 10px; color: var(--text-soft); font-size: 12px; }
.dev-verify { display: inline-block; text-decoration: none; margin-top: 12px; }
.account-retry { margin-top: 12px; }
.account-plan-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.account-plan-row strong { color: var(--text); }
.account-actions { margin-top: 18px; }
.search-empty[hidden] { display: none; }
/* The server caps how many text matches it scans for. This says so, quietly:
   it is information about the result set, not a warning about a failure. */
.search-truncated {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.search-truncated[hidden] { display: none; }

/* -- TAG MODAL -- */
#tagBox { width: 300px; user-select: none; }
#tagBox h3, #renameBox h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
#tagInput {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  outline: none;
  margin-bottom: 10px;
  user-select: text;
  transition: border-color var(--t-fast);
}
#tagInput:focus { border-color: var(--accent); box-shadow: none; }
#tagInput:focus-visible { box-shadow: var(--ring); }
.tag-sugs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.tag-sug {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text-soft);
  cursor: pointer;
  transition: all var(--t-fast);
}
.tag-sug:hover { border-color: var(--accent); color: var(--accent); }
.tag-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* -- CONFIRM MODAL -- */
#confirmBox { width: 330px; }
.confirm-msg { font-size: 13px; color: var(--muted); margin: 8px 0 18px; line-height: 1.6; }

/* -- OCR MODAL -- */
#ocrBox { width: 480px; }
.ocr-text {
  width: 100%;
  height: 220px;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  resize: vertical;
  outline: none;
  margin-bottom: 14px;
}
.ocr-text:focus { border-color: var(--border3); box-shadow: none; }
.ocr-text:focus-visible { box-shadow: var(--ring); }

/* -- BEAUTIFY MODAL -- */
#beautifyBox { width: 580px; max-width: 94vw; }
.bf-preview-wrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 12px;
  max-height: 330px;
  overflow: hidden;
}
#beautifyCanvas { max-width: 100%; max-height: 300px; border-radius: var(--r-sm); }
.bf-controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.bf-row { display: flex; align-items: center; gap: 14px; }
.bf-label { font-size: 13px; font-weight: 500; color: var(--text-soft); width: 92px; flex-shrink: 0; }
.bf-row input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; }
.bf-row input[type="checkbox"] { accent-color: var(--accent); width: 17px; height: 17px; cursor: pointer; }
.bf-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.bf-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.bf-swatch:hover { transform: scale(1.08); }
.bf-swatch.active { border-color: var(--accent); }

/* -- NAMING + RENAME MODALS -- */
#nameTplBox { width: 400px; }
#renameBox { width: 360px; }
#renameBox .link-input, #nameTplBox .link-input { width: 100%; margin-bottom: 8px; color: var(--text); }
#nameTplBox .share-opt { display: block; margin-bottom: 10px; }
#nameTplBox .share-opt span { display: block; margin-bottom: 5px; font-size: 12.5px; }
#nameTplBox .share-opt input { max-width: none; }
#tplPreview { min-height: 18px; word-break: break-all; margin-bottom: 6px; }

/* -- INTEGRATIONS MODAL -- */
#integrBox { width: 440px; }
#integrBox .share-opt { display: block; margin-bottom: 14px; }
#integrBox .share-opt span { display: block; margin-bottom: 5px; font-size: 12.5px; }
#integrBox .share-opt input { max-width: none; width: 100%; }

/* -- ANNOTATE MODAL -- */
#annotateModal {
  display: none;
  position: fixed;
  inset: 0;
  background: #05080f;
  z-index: 3000;
  flex-direction: column;
}
#annotateModal.open { display: flex; }

.annotate-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  flex-shrink: 0;
  flex-wrap: wrap;
  user-select: none;
}
.wordmark-sm { font-size: 11.5px; }

.tool-sep { width: 1px; height: 20px; background: var(--border2); margin: 0 3px; flex-shrink: 0; }
.tool-group { display: flex; gap: 4px; flex-wrap: wrap; }

.tool-btn {
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: var(--font-ui);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tool-btn:hover { border-color: var(--border2); color: var(--text); background: var(--surface2); }
.tool-btn.active { background: var(--surface3); border-color: var(--border3); color: var(--text); }
.tool-btn svg { display: block; }

.color-pick {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding: 2px;
  background: none;
  overflow: hidden;
}
.size-select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 8px;
  border-radius: var(--r-md);
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.size-select:hover { border-color: var(--border3); }

.annotate-canvas-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05080f;
  position: relative;
}
#annotateCanvas { cursor: crosshair; display: block; max-width: 100%; max-height: 100%; }
#annotateCanvas.text-mode { cursor: text; }

.anno-text-input {
  position: absolute;
  background: rgba(0, 0, 0, 0.72);
  border: 1px dashed var(--accent);
  color: var(--accent);
  font-family: var(--font-ui);
  outline: none;
  resize: none;
  min-width: 90px;
  padding: 4px 6px;
  line-height: 1.4;
  border-radius: var(--r-sm);
  z-index: 10;
}
.anno-text-input:focus-visible { box-shadow: var(--ring); }

.annotate-actions { margin-left: auto; display: flex; gap: 6px; }

/* -- EMPTY STATE -- */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 20px;
  gap: 12px;
  color: var(--muted);
}
.empty-icon {
  width: 58px;
  height: 42px;
  border: 2px solid var(--border3);
  border-radius: var(--r-md);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.empty-icon::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--border3);
}
.empty-icon::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 13px;
  width: 12px;
  height: 6px;
  border-radius: 3px 3px 0 0;
  border: 2px solid var(--border3);
  border-bottom: none;
  background: var(--bg);
}
.empty-title { font-size: 15px; font-weight: 700; color: var(--text-soft); }
.empty-hint { font-size: 13.5px; color: var(--muted); text-align: center; line-height: 1.9; }

/* -- PASTE CHIP -- */
.paste-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface2);
  white-space: nowrap;
  user-select: none;
}
.paste-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pastePulse 2.5s ease-in-out infinite;
}
@keyframes pastePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* -- FOOTER -- */
footer {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  user-select: none;
}
.footer-left { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.footer-right { display: flex; gap: 18px; }
/* The trader identity. Dutch law requires it to be permanently available on
   the site, so it sits in the footer of every page. Its own row, because it is
   a sentence and the links are not. */
.footer-entity { flex-basis: 100%; font-size: 12px; line-height: 1.5; color: var(--faint); }
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-link:hover { color: var(--text); }

/* -- RESPONSIVE -- */
@media (max-width: 720px) {
  header { padding: 10px 16px; }
  #folderBanner, #apiWarning, .account-nudge { margin-left: 16px; margin-right: 16px; }
  #dropzone { margin: 12px 16px; padding: 28px 20px; }
  #dropzone.compact { margin: 10px 16px; }
  #grid { padding: 10px 16px 28px; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  #tagsBar { padding: 10px 16px; }
  footer { padding: 14px 16px; }
  .free-indicator, #folderLabel { display: none !important; }
  #searchInput { width: 140px; font-size: 16px; }
  #searchInput:focus { width: 170px; }
  .modal-box { padding: 20px; }
  #paywallBox { max-height: calc(100vh - 24px); }
  .paywall-sub { margin-bottom: 12px; }
  .perk-list { margin-bottom: 14px; }
  .perk { padding: 8px 10px; }
  .account-nudge { align-items: flex-start; flex-wrap: wrap; }
  /* 16px mobile inputs prevent automatic zoom on iOS. */
  .link-input, #tagInput, .ocr-text { font-size: 16px; }
}
@media (max-width: 440px) {
  header { gap: 8px; flex-wrap: wrap; }
  .header-mid { display: block; order: 3; flex-basis: 100%; }
  .search-wrap, #searchInput, #searchInput:focus { width: 100%; }
  .btn-account, .btn-upgrade { padding: 6px 9px; }
  .header-actions { margin-left: auto; }
  .header-menu { position: fixed; top: 58px; right: 12px; width: min(260px, calc(100vw - 24px)); }
  .account-benefits { grid-template-columns: 1fr; }
  .account-email-row { flex-direction: column; }
  .account-email-row .btn-accent { width: 100%; }
  .share-protection-state { flex-direction: column; }
}

/* Touch: overlay actions remain visible with 40px minimum targets */
@media (hover: none) {
  .thumb-overlay {
    opacity: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(4, 7, 13, 0.72) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
    pointer-events: none;
  }
  .thumb-overlay .ov-btn { pointer-events: auto; width: 40px; height: 40px; }
  .icon-btn { width: 32px; height: 32px; }
}

/* Library workspace */
.library-bar {
  margin: 4px 24px 0;
  padding: 18px 0 12px;
  border-bottom: 1px solid var(--border);
}
.library-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.library-title-row h2 {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.library-count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}
.library-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.library-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  max-width: 460px;
  min-width: 220px;
  color: var(--muted);
}
.library-search > svg {
  position: absolute;
  left: 12px;
  z-index: 1;
  pointer-events: none;
}
.library-search #searchInput,
.library-search #searchInput:focus {
  width: 100%;
  min-height: 42px;
  padding: 9px 44px 9px 34px;
  background: var(--surface);
  border-color: var(--border2);
}
.library-search > kbd {
  position: absolute;
  right: 10px;
  padding: 1px 6px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  color: var(--faint);
  background: var(--surface2);
  font-family: var(--font-mono);
  font-size: 10px;
}
.library-control,
.sort-control {
  min-height: 42px;
  border: 1px solid var(--border2);
  border-radius: 5px;
  background: transparent;
  color: var(--text-soft);
}
.library-control {
  padding: 9px 12px;
}
.library-control:hover,
.library-control.active,
.library-control[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(247, 167, 83, 0.05);
}
.sort-control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  color: var(--muted);
  font-size: 12px;
}
.sort-control select {
  min-height: 40px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  padding: 0 28px 0 10px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
}
.shortcuts-open kbd {
  margin-left: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
}
.library-bar #tagsBar {
  padding: 10px 0 0;
  border: 0;
}
.tag-filter,
.thumb-tag,
.add-tag-btn,
.tag-sug,
.account-eyebrow,
.dz-folder-status,
.dz-quick,
.paste-chip,
.count-badge {
  border-radius: 4px;
}

.selection-bar {
  position: sticky;
  top: 61px;
  z-index: 80;
  margin: 10px 24px 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(247, 167, 83, 0.34);
  border-radius: 6px;
  background: #111827;
  box-shadow: var(--shadow-md);
}
.selection-bar[hidden] { display: none; }
.selection-bar strong { color: var(--accent); font-size: 12px; }
.selection-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.selection-actions button { min-height: 38px; }

/* Screenshot cards */
.thumb { border-radius: 8px; }
.thumb.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.thumb:focus-visible { box-shadow: var(--ring); }
.thumb-select,
.thumb-favorite {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: 5px;
  background: rgba(19, 20, 23, 0.94);
  color: var(--text-soft);
}
.thumb-select { left: 8px; top: 8px; display: none; }
.selection-mode .thumb-select { display: flex; }
.thumb-select[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.thumb-favorite { right: 8px; top: 8px; opacity: 0; }
.thumb:hover .thumb-favorite,
.thumb:focus-within .thumb-favorite,
.thumb-favorite.active { opacity: 1; }
.thumb-favorite.active { color: var(--accent); }
.thumb-overlay {
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 5px;
  padding: 44px 8px 8px;
  background: linear-gradient(180deg, rgba(4, 7, 13, 0.03) 25%, rgba(4, 7, 13, 0.9) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.thumb-overlay .ov-btn {
  pointer-events: auto;
  width: auto;
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10.5px;
}
.thumb-overlay .pro-pip {
  position: static;
  width: auto;
  height: auto;
  margin-left: 4px;
  padding: 1px 3px;
  border: 0;
  border-radius: 2px;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 7px;
  line-height: 1.3;
}
.anno-pip {
  top: auto;
  left: 8px;
  bottom: 8px;
  width: auto;
  height: auto;
  padding: 3px 6px;
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
}
.selection-mode .thumb-overlay { display: none; }
.selection-mode .thumb-img-wrap { cursor: pointer; }
.thumb-footer .icon-btn {
  width: auto;
  min-width: 28px;
  padding: 0 5px;
  font-size: 9px;
  border-radius: 3px;
}

/* Privacy editor and share controls */
.privacy-tool-group {
  padding: 4px;
  border: 1px solid rgba(247, 167, 83, 0.28);
  border-radius: 5px;
  background: rgba(247, 167, 83, 0.04);
}
.privacy-local-note {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.share-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border2);
  border-radius: 5px;
  cursor: pointer;
}
.share-check input { margin-top: 3px; accent-color: var(--accent); }
.share-check strong,
.share-check small { display: block; }
.share-check strong { margin-bottom: 2px; color: var(--text); font-size: 12.5px; }
.share-check small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.share-metric {
  margin: 12px 0 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
.share-copy-actions { display: flex; gap: 7px; margin-top: 8px; }
.turnstile-mount { margin-top: 12px; min-height: 65px; }
.turnstile-mount[hidden] { display: none; }

/* Keyboard guide */
.shortcuts-box { width: 540px; }
.shortcut-grid { margin-top: 14px; }
.shortcut-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 12.5px;
}
.shortcut-grid kbd {
  padding: 3px 6px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: var(--surface2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
}
.shortcut-section-title {
  margin-top: 22px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Device-specific screenshot and clipboard guide */
.device-setup-box { width: 520px; }
.setup-steps {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
}
.setup-steps li { padding-left: 4px; }
.setup-steps li::marker {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
}
.setup-note {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface2);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}
.device-setup-actions { margin-top: 18px; }
.device-setup-actions .btn-accent {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--r-md);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
}
.device-setup-actions [hidden] { display: none; }

@media (max-width: 820px) {
  .library-bar { margin-inline: 16px; }
  .library-search { max-width: none; flex-basis: 100%; }
  .selection-bar { margin-inline: 16px; top: 58px; align-items: flex-start; flex-direction: column; }
  .selection-actions { width: 100%; }
  .selection-actions button { flex: 1 1 auto; }
  .privacy-local-note { display: none; }
  .annotate-header { overflow-x: auto; }
}

@media (max-width: 520px) {
  header {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .hdr-brand { flex: 0 0 auto; }
  .wordmark { font-size: 10.5px; letter-spacing: 0.08em; }
  .header-mid { display: none; }
  .header-actions { width: auto; margin-left: auto; gap: 4px; }
  .header-actions button { padding: 6px 7px; font-size: 11px; }
  .header-menu-trigger { min-width: 0; }
  #proBtn span[data-i18n="pro_manage"] { display: none; }
  #folderBanner {
    align-items: stretch;
    flex-direction: column;
  }
  #folderBanner .banner-btn { width: 100%; }
  .library-control,
  .sort-control { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .shortcuts-open { display: none; }
  .thumb-favorite { opacity: 1; }
  .share-copy-actions { flex-direction: column; }
  .share-copy-actions button { width: 100%; }
  .shortcuts-box { width: calc(100vw - 24px); }
  .thumb-overlay [data-action="ocr"],
  .thumb-overlay [data-action="beautify"] { display: none; }
  body:not(.is-pro) .thumb-overlay [data-action="share"] { display: none; }
}

/* ==============================================================
   Capture, account and mobile workspace
   ============================================================== */
.mobile-upload-copy,
.dz-mobile-hint,
.dz-camera-action,
.mobile-card-action { display: none; }

.dz-import-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.dz-import-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}
.dz-import-actions svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.dz-import-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#dropzone.compact .dz-import-actions { margin: 0 0 0 auto; }
#dropzone.compact .dz-import-actions button { min-height: 38px; padding-block: 6px; }
#dropzone.compact .dz-quick { margin-left: 0; }

.cloud-status-notice {
  width: calc(100% - 48px);
  max-width: var(--sf-content-width);
  margin: 12px auto 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(247, 167, 83, .34);
  border-radius: 14px;
  background: rgba(247, 167, 83, .07);
}
.cloud-status-notice[hidden] { display: none; }
.cloud-status-notice > div { min-width: 0; flex: 1; }
.cloud-status-notice strong,
.cloud-status-notice span { display: block; }
.cloud-status-notice strong { font-size: 13px; color: var(--text); }
.cloud-status-notice > div > span { margin-top: 2px; font-size: 12px; color: var(--muted); }
.cloud-status-icon {
  width: 32px; height: 32px; display: block; flex: 0 0 auto;
  color: var(--accent);
}
.cloud-status-icon svg { display: block; width: 100%; height: 100%; }
.cloud-status-icon rect { fill: currentColor; }
.cloud-status-icon path { fill: none; stroke: var(--accent-ink); stroke-width: 2.1; stroke-linecap: round; }
.cloud-status-icon circle { fill: var(--accent-ink); }

.menu-account-group { padding-top: 13px; }
.header-menu .menu-account-item { min-height: 64px; }
.menu-avatar,
.account-avatar-large {
  display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 600;
  border: 1px solid rgba(247, 167, 83, .45);
}
.menu-avatar { width: 36px; height: 36px; border-radius: 11px; }
.menu-avatar img,
.account-avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.menu-plan-chip {
  margin-left: auto; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border2);
  color: var(--muted); font: 600 8px/1 var(--font-mono); letter-spacing: .08em;
}
.menu-plan-chip.pro { color: var(--accent); border-color: rgba(247, 167, 83, .42); }

.account-profile-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  margin: 16px 0 10px; padding: 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface2);
}
.account-avatar-large { width: 54px; height: 54px; border-radius: 16px; font-size: 18px; }
.account-profile-copy strong,
.account-profile-copy span { display: block; }
.account-profile-copy strong { font-size: 13px; color: var(--text); }
.account-profile-copy span { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.account-profile-actions { display: flex; gap: 6px; }
.account-profile-actions button { min-height: 40px; }
/* The global button rule sets white-space: nowrap, and this is a button. The
   line under the heading is long enough that it then stayed on one line and
   pushed the whole account panel wider than a phone screen, so the page
   scrolled sideways. Undoing it here, and letting the middle column shrink,
   is what .edit-save-option already does for the same reason. */
.account-pro-hint {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px; text-align: left; border: 1px solid rgba(247, 167, 83, .26);
  border-radius: 13px; background: rgba(247, 167, 83, .055); color: var(--text); cursor: pointer;
  white-space: normal;
}
.account-pro-hint > span { min-width: 0; }
.account-pro-hint strong,
.account-pro-hint small { display: block; overflow-wrap: anywhere; }
.account-pro-hint strong { font-size: 12.5px; }
.account-pro-hint small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.account-pro-hint:hover { border-color: var(--accent); }

.edit-save-box { width: min(600px, calc(100vw - 24px)); }
.edit-save-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.edit-save-option {
  min-width: 0; min-height: 118px; padding: 14px; text-align: left; white-space: normal; overflow-wrap: anywhere; border-radius: 13px;
  border: 1px solid var(--border2); background: var(--surface2); color: var(--text); cursor: pointer;
}
.edit-save-option strong,
.edit-save-option span { display: block; }
.edit-save-option strong { font-size: 13px; }
.edit-save-option span { margin-top: 7px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.edit-save-option:hover,
.edit-save-option.featured { border-color: rgba(247, 167, 83, .52); }
.edit-save-option.featured { background: rgba(247, 167, 83, .07); }

.thumb.local-only { border-color: rgba(247, 167, 83, .5); }
.thumb.local-only .thumb-img-wrap::after {
  content: 'LOCAL ONLY'; position: absolute; top: 8px; left: 8px; z-index: 4;
  padding: 4px 7px; border-radius: 6px; background: var(--accent); color: var(--accent-ink);
  font: 700 8px/1 var(--font-mono); letter-spacing: .08em;
}
.thumb-local-note { color: var(--accent); font: 600 9px/1.3 var(--font-mono); white-space: nowrap; }
.thumb-source {
  display: flex; align-items: center; gap: 5px; min-width: 0; margin-bottom: 6px;
  color: var(--faint); font-size: 10.5px;
}
.thumb-source svg { width: 11px; height: 11px; flex: 0 0 auto; }
.thumb-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mobile-actions-backdrop { align-items: flex-end; padding: 0; }
.mobile-actions-sheet { width: 100%; max-width: none; border-radius: 20px 20px 0 0; padding: 24px 16px max(20px, env(safe-area-inset-bottom)); }
.mobile-sheet-handle { width: 42px; height: 4px; border-radius: 999px; margin: -12px auto 18px; background: var(--border3); }
.mobile-actions-title { padding-right: 42px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mobile-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.mobile-action-button {
  min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--border2); border-radius: 12px; background: var(--surface2); color: var(--text);
  text-align: left; cursor: pointer; font: 600 12px/1.3 var(--font-ui);
}
.mobile-action-button svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.mobile-action-button.danger svg { color: var(--danger); }
.mobile-action-button[disabled] { opacity: .45; cursor: default; }

@media (max-width: 760px) {
  .app-header { position: sticky; top: 0; z-index: 80; padding: 10px 14px; }
  .header-actions > #accountBtn,
  .header-actions > #proBtn,
  .header-actions > #upgradeBtn,
  .header-actions > .free-indicator { display: none !important; }
  .brand-lockup-name { font-size: 17px; }
  .brand-lockup-tagline { font-size: 8px; }
  .brand-lockup-symbol { width: 40px; height: 37px; }
  .header-menu-trigger { min-width: 48px; min-height: 44px; }
  .header-menu-trigger > span { display: none; }
  .header-menu { top: 64px; right: 10px; width: min(330px, calc(100vw - 20px)); max-height: calc(100dvh - 74px); }
  .menu-shortcut { display: none; }

  #folderBanner,
  #apiWarning { display: none !important; }
  .cloud-status-notice,
  .account-nudge { width: calc(100% - 24px); margin-inline: auto; }
  .cloud-status-notice { align-items: flex-start; flex-wrap: wrap; }
  .cloud-status-notice .btn-accent { width: 100%; min-height: 44px; }

  #dropzone,
  #dropzone.compact {
    width: calc(100% - 24px); margin: 12px auto; padding: 22px 16px 16px;
    display: block; text-align: center; border-style: solid; border-radius: 18px;
  }
  #dropzone.compact .dz-icon-wrap { width: 42px; height: 36px; margin: 0 auto 12px; }
  #dropzone.compact .dz-title { display: block; }
  .desktop-upload-copy,
  .dz-hint { display: none !important; }
  .mobile-upload-copy,
  .dz-mobile-hint { display: inline; }
  .dz-title { font-size: 20px; margin-bottom: 7px; }
  .dz-mobile-hint { display: block; max-width: 330px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.5; }
  .dz-import-actions,
  #dropzone.compact .dz-import-actions { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0 0; gap: 8px; }
  .dz-import-actions button,
  #dropzone.compact .dz-import-actions button { min-height: 48px; padding: 10px 12px; width: 100%; }
  .dz-camera-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .dz-quick,
  #dropzone.compact .dz-quick { width: 100%; min-height: 44px; margin: 9px 0 0; justify-content: center; border-radius: 11px; }

  .library-bar { margin: 0 12px; padding-top: 14px; }
  .library-title-row { justify-content: space-between; }
  .library-controls { gap: 7px; }
  .library-search { order: -1; flex: 1 0 100%; min-height: 46px; }
  .library-search input,
  #searchInput,
  #searchInput:focus { width: 100%; }
  .library-control,
  .sort-control { min-height: 44px; }
  #grid { grid-template-columns: 1fr; padding: 12px 12px 28px; gap: 12px; }
  .thumb { border-radius: 14px; }
  .thumb:hover { transform: none; }
  .thumb img { height: min(58vw, 310px); }
  .thumb-overlay {
    position: static; opacity: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
    padding: 8px; background: var(--surface2); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .thumb-overlay .ov-btn { display: none !important; }
  .thumb:not(.local-only) .thumb-overlay [data-action="annotate"],
  .thumb:not(.local-only) .thumb-overlay [data-action="share"],
  .thumb-overlay [data-action="mobilemore"],
  .thumb.local-only .thumb-overlay [data-action="retrysync"],
  .thumb.local-only .thumb-overlay [data-action="download"] {
    display: flex !important; width: 100%; height: 44px; min-height: 44px; border-radius: 10px; gap: 6px;
  }
  .thumb-overlay [data-action="mobilemore"] { display: flex; }
  .thumb-footer .ren,
  .thumb-footer .dl,
  .thumb-footer .del { display: none; }
  .thumb-meta { padding: 10px 11px 12px; }
  .thumb-name { font-size: 12px; }
  .thumb-favorite { width: 44px; height: 44px; opacity: 1; }
  .thumb-select { width: 44px; height: 44px; }

  .account-profile-card { grid-template-columns: auto 1fr; }
  .account-profile-actions { grid-column: 1 / -1; }
  .account-profile-actions button { flex: 1; min-height: 44px; }
  .edit-save-options { grid-template-columns: 1fr; }
  .edit-save-option { min-height: 76px; }
  .modal-backdrop { padding: 12px; }
  .mobile-actions-backdrop { padding: 0; }
}

@media (max-width: 380px) {
  .brand-lockup-copy { display: none; }
  .dz-import-actions,
  #dropzone.compact .dz-import-actions { grid-template-columns: 1fr; }
  .mobile-action-grid { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .thumb-overlay .ov-btn { min-height: 44px; }
}

/* -- BRANDKIT 1.0 APPLICATION LAYER -- */
.app-header .brand-home:focus-visible {
  border-radius: var(--sf-radius-button);
}

.header-menu {
  background: var(--sf-white);
  border-color: var(--border2);
  box-shadow: var(--sf-shadow-soft);
}

.header-menu button:hover {
  background: var(--sf-canvas);
}

button {
  border-radius: var(--sf-radius-button);
  font-weight: 600;
}

.btn-accent {
  box-shadow: 0 7px 20px rgba(247, 167, 83, 0.18);
}

.btn-accent:hover {
  box-shadow: 0 9px 24px rgba(247, 167, 83, 0.24);
  transform: translateY(-1px);
}

.btn-green,
.btn-account {
  background: var(--sf-ink);
  border-color: var(--sf-ink);
  color: var(--sf-white);
}

.btn-green:hover,
.btn-account:hover {
  background: #2a2c30;
  border-color: #2a2c30;
  color: var(--sf-white);
}

.btn-upgrade {
  background: var(--sf-white);
  border-color: rgba(247, 167, 83, 0.6);
  color: var(--sf-ink);
}

.btn-upgrade:hover {
  background: #fff8ef;
  border-color: var(--sf-glow);
  box-shadow: 0 10px 28px rgba(247, 167, 83, 0.18);
}

.pro-badge,
.pro-pip,
.pro-mark-large {
  background: var(--sf-glow);
  color: var(--sf-ink);
}

#folderBanner,
#apiWarning,
.account-nudge,
#dropzone,
.library-bar,
.selection-bar,
#grid {
  width: calc(100% - 48px);
  max-width: var(--sf-content-width);
  margin-left: auto;
  margin-right: auto;
}

#folderBanner {
  background: var(--sf-white);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.banner-text strong { color: var(--sf-ink); }

.account-nudge {
  border-color: rgba(247, 167, 83, 0.42);
  background: #fff8ef;
}

.account-nudge strong { color: var(--sf-ink); }

#dropzone {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 50px 32px;
  background: var(--sf-white);
  border: 1.5px dashed rgba(19, 20, 23, 0.24);
  box-shadow: 0 12px 38px rgba(19, 20, 23, 0.06);
}

#dropzone::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -120px;
  bottom: -150px;
  border-radius: 50%;
  background: rgba(247, 167, 83, 0.16);
  pointer-events: none;
}

#dropzone:hover {
  border-color: rgba(19, 20, 23, 0.42);
  box-shadow: 0 18px 55px rgba(19, 20, 23, 0.09);
}

#dropzone.active {
  border-color: var(--sf-glow);
  background: #fffaf4;
  box-shadow: 0 18px 55px rgba(247, 167, 83, 0.16);
}

.dz-icon-wrap {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 16px;
  /* Height only, width auto. The symbol image is trimmed hard to the mark and
     is taller than it is wide, so naming both axes would stretch it. */
  background: var(--sf-ink) url("/static/brand/symbol-mark-176-v6.png") center / auto 44px no-repeat;
  box-shadow: 0 14px 32px rgba(19, 20, 23, 0.2);
}

.dz-icon-wrap::before { display: none; }

.dz-title,
.library-title-row h2,
.modal-title,
.paywall-title,
.empty-title {
  font-family: var(--sf-font-display);
  font-weight: 600;
  color: var(--sf-ink);
  letter-spacing: -0.03em;
}

.dz-title {
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1.1;
}

.library-title-row h2 { font-size: 24px; }

.kbd,
.library-search kbd,
.shortcuts-open kbd {
  background: var(--sf-paper);
  border-color: rgba(19, 20, 23, 0.15);
  color: var(--sf-ink);
  box-shadow: 0 1px 0 rgba(19, 20, 23, 0.18);
}

.dz-quick {
  min-height: 40px;
  padding-inline: 14px;
  background: var(--sf-canvas);
  color: var(--sf-steel);
}

.dz-quick:hover {
  background: var(--sf-paper);
  color: var(--sf-ink);
}

.dz-quick.active {
  border-color: var(--sf-glow);
  color: var(--sf-ink);
  background: #fff3e4;
}

.dz-quick.active .dz-quick-dot {
  background: var(--sf-glow);
  box-shadow: 0 0 0 4px rgba(247, 167, 83, 0.18);
}

.dz-quick .pro-pip {
  margin-left: 4px;
  font-size: 8px;
}

.is-pro .dz-quick .pro-pip,
.is-pro .thumb-overlay .pro-pip {
  display: none;
}

body:not(.is-pro) .dz-quick {
  border-style: solid;
}

.library-bar {
  background: transparent;
}

.library-search,
.sort-control,
.library-control {
  background: var(--sf-white);
  border-color: var(--border);
  border-radius: var(--sf-radius-button);
}

.selection-bar {
  background: var(--sf-white);
  border-color: rgba(247, 167, 83, 0.48);
  border-radius: 16px;
}

.selection-bar strong { color: var(--sf-ink); }

.thumb {
  overflow: hidden;
  background: var(--sf-white);
  border-color: var(--border);
  border-radius: var(--sf-radius-card);
  box-shadow: 0 5px 20px rgba(19, 20, 23, 0.05);
}

.thumb:hover {
  border-color: rgba(19, 20, 23, 0.2);
  box-shadow: var(--sf-shadow-soft);
  transform: translateY(-3px);
}

.thumb-overlay {
  background: linear-gradient(180deg, transparent 12%, rgba(19, 20, 23, 0.9) 100%);
}

.thumb-overlay .ov-btn {
  background: var(--sf-white);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--sf-ink);
}

.thumb-overlay .ov-btn:hover {
  background: var(--sf-glow);
  border-color: var(--sf-glow);
}

.thumb-select,
.thumb-favorite {
  border-radius: 10px;
  color: var(--sf-white);
}

.modal-backdrop {
  background: rgba(19, 20, 23, 0.58);
}

.modal-box {
  background: var(--sf-white);
  border-color: var(--border);
  border-radius: var(--sf-radius-card);
  box-shadow: 0 26px 80px rgba(19, 20, 23, 0.22);
}

.modal-close,
.tool-btn,
.link-input,
#tagInput,
.ocr-text,
.account-form input,
.pw-form input,
select {
  background-color: var(--sf-canvas);
  border-color: var(--border2);
  color: var(--sf-ink);
}

.paywall-title { font-size: 24px; }
.perk { background: var(--sf-canvas); border-color: var(--border); }
.perk-dot { background: var(--sf-glow); }

#annotateModal {
  background: var(--sf-ink);
  color: var(--sf-white);
}

.annotate-header {
  min-height: 76px;
  padding: 12px 18px;
  gap: 10px;
  background: #121317;
  border-color: rgba(255, 255, 255, 0.12);
}

.editor-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  flex: 0 0 auto;
  color: #d4d5d8;
  white-space: nowrap;
}

.editor-brand-symbol {
  width: 49px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .34));
}

.editor-brand-copy { display: flex; flex-direction: column; justify-content: center; gap: 4px; line-height: 1; }
.editor-brand-copy strong { color: #fff; font: 800 18px/.94 var(--sf-font-display); letter-spacing: -.035em; }
.editor-brand-copy small { color: #a9abb1; font: 700 8px/1 var(--sf-font-body); letter-spacing: .12em; text-transform: uppercase; }
.editor-brand-copy b { color: var(--sf-glow); }
.editor-brand-mode { display: inline-flex; align-items: center; gap: 9px; color: #d7d8dc; font: 650 13px/1 var(--sf-font-body); }
.editor-brand-mode i { color: var(--sf-glow); font-style: normal; }

.annotate-header .tool-btn { min-height: 44px; padding: 9px 12px; border-radius: 9px; font-size: 13px; }
.annotate-header .tool-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.annotate-header #toolCrop svg { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.annotate-header .color-pick { width: 44px; height: 44px; }
.annotate-header .size-select { min-height: 44px; padding: 8px 10px; font-size: 13px; }
.annotate-header .color-pick:disabled,
.annotate-header .size-select:disabled { opacity: .34; cursor: not-allowed; }
.annotate-header .btn-ghost,
.annotate-header .btn-accent { min-height: 44px; }
.annotate-header .tool-group,
.annotate-header .color-pick,
.annotate-header .size-select,
.annotate-header .annotate-actions { flex: 0 0 auto; }

.annotate-header .tool-btn,
.annotate-header .btn-ghost {
  background: #202125;
  border-color: rgba(255, 255, 255, 0.14);
  color: #e8e6e2;
}

.annotate-header .tool-btn.active,
.annotate-header .tool-btn:hover {
  background: var(--sf-glow);
  border-color: var(--sf-glow);
  color: var(--sf-ink);
}

.annotate-header .privacy-local-note { color: #b4b5b9; }

.crop-controls {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(247, 167, 83, .32);
  border-radius: 11px;
  background: rgba(247, 167, 83, .055);
}
.crop-controls[hidden] { display: none; }
.crop-ratio-label { padding-left: 6px; color: #aeb0b6; font: 650 10px/1 var(--sf-font-body); letter-spacing: .06em; text-transform: uppercase; }
.annotate-header .crop-reset { color: #c4c5ca; }
.annotate-header .crop-apply { border-color: var(--sf-glow); color: var(--sf-ink); background: var(--sf-glow); font-weight: 750; }
.annotate-header .crop-apply:hover,
.annotate-header .crop-apply:focus-visible { border-color: #ffc27f; background: #ffc27f; color: var(--sf-ink); }

.annotate-canvas-wrap {
  padding: 30px;
  background-color: #1a1b1f;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.028) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.028) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.028) 75%);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}

#annotateCanvas {
  max-width: 100%;
  max-height: 100%;
  outline: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .82), 0 20px 60px rgba(0, 0, 0, .42);
}
#annotateCanvas.crop-mode { cursor: default; }

.crop-overlay { position: absolute; z-index: 8; overflow: hidden; touch-action: none; cursor: crosshair; }
.crop-overlay[hidden] { display: none; }
.crop-selection {
  position: absolute;
  z-index: 2;
  min-width: 8px;
  min-height: 8px;
  border: 2px solid #fff;
  outline: 1px solid rgba(0, 0, 0, .88);
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(2, 3, 5, .62);
  cursor: move;
}
.crop-selection:focus-visible { outline: 3px solid var(--sf-glow); outline-offset: 3px; }
.crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.48) 33.33%, transparent 33.6%, transparent 66.4%, rgba(255,255,255,.48) 66.66%, transparent 66.9%),
    linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.48) 33.33%, transparent 33.6%, transparent 66.4%, rgba(255,255,255,.48) 66.66%, transparent 66.9%);
}
.crop-size {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  color: #fff;
  background: rgba(8, 9, 12, .82);
  font: 700 10px/1 var(--font-mono);
  pointer-events: none;
}
.crop-handle { position: absolute; z-index: 3; width: 12px; height: 12px; border: 2px solid #101114; border-radius: 2px; background: #fff; }
.crop-handle::after { content: ""; position: absolute; inset: -9px; }
.crop-handle.nw { left: -7px; top: -7px; cursor: nwse-resize; }
.crop-handle.n { left: 50%; top: -7px; transform: translateX(-50%); cursor: ns-resize; }
.crop-handle.ne { right: -7px; top: -7px; cursor: nesw-resize; }
.crop-handle.e { right: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crop-handle.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.crop-handle.s { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
.crop-handle.sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.crop-handle.w { left: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crop-overlay.is-ratio-locked .crop-handle.n,
.crop-overlay.is-ratio-locked .crop-handle.e,
.crop-overlay.is-ratio-locked .crop-handle.s,
.crop-overlay.is-ratio-locked .crop-handle.w { display: none; }
#undoBtn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 1500px) {
  .annotate-header .privacy-local-note { display: none; }
}

footer {
  width: 100%;
  max-width: var(--sf-content-width);
  margin: auto auto 0;
  border-color: var(--border);
}

.footer-left,
.footer-link { color: var(--sf-steel); }
.footer-link:hover { color: var(--sf-ink); }

@media (max-width: 720px) {
  #folderBanner,
  #apiWarning,
  .account-nudge,
  #dropzone,
  .library-bar,
  .selection-bar,
  #grid {
    width: calc(100% - 32px);
  }

  #dropzone {
    min-height: 220px;
    padding: 38px 20px;
  }
}

/* Final adaptive layer: keep the mobile workspace authoritative even when
   brand and theme layers above change shared desktop components. */
@media (max-width: 760px) {
  .app-header {
    min-height: 62px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  }
  .header-actions > #accountBtn,
  .header-actions > #proBtn,
  .header-actions > #upgradeBtn,
  .header-actions > .free-indicator { display: none !important; }
  .header-menu-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }
  .header-menu-trigger > span,
  .header-menu-chevron { display: none; }
  .header-menu {
    top: calc(62px + env(safe-area-inset-top));
    right: 10px;
    width: min(340px, calc(100vw - 20px));
    max-height: calc(100dvh - 74px - env(safe-area-inset-top));
  }
  .header-menu button { min-height: 50px; }
  .menu-shortcut { display: none; }

  #folderBanner,
  #apiWarning { display: none !important; }
  .cloud-status-notice,
  .account-nudge {
    width: calc(100% - 24px);
    margin-inline: auto;
  }
  .cloud-status-notice {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .cloud-status-notice .btn-accent {
    width: 100%;
    min-height: 44px;
  }

  #dropzone,
  #dropzone.compact {
    display: block;
    width: calc(100% - 24px);
    min-height: 0;
    margin: 12px auto;
    padding: 20px 14px 14px;
    border-style: solid;
    border-radius: 18px;
    text-align: center;
  }
  #dropzone::after { width: 150px; height: 150px; right: -90px; bottom: -105px; }
  #dropzone .dz-icon-wrap,
  #dropzone.compact .dz-icon-wrap {
    width: 42px;
    height: 38px;
    margin: 0 auto 11px;
    background-size: auto 33px;
    border-radius: 12px;
  }
  #dropzone .dz-title,
  #dropzone.compact .dz-title {
    display: block;
    margin: 0 0 6px;
    font-size: 21px;
  }
  .desktop-upload-copy,
  .dz-hint { display: none !important; }
  .mobile-upload-copy { display: inline; }
  .dz-mobile-hint {
    display: block;
    max-width: 330px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
  }
  .dz-import-actions,
  #dropzone.compact .dz-import-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin: 14px 0 0;
  }
  .dz-import-actions button,
  #dropzone.compact .dz-import-actions button {
    width: 100%;
    min-height: 48px;
    padding: 10px;
  }
  .dz-camera-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
  .dz-quick,
  #dropzone.compact .dz-quick {
    width: 100%;
    min-height: 44px;
    margin: 8px 0 0;
    justify-content: center;
    border-radius: 11px;
  }

  .library-bar {
    width: calc(100% - 24px);
    margin: 0 auto;
    padding-top: 14px;
  }
  .library-controls { gap: 7px; }
  .library-search { order: -1; flex: 1 0 100%; min-height: 46px; }
  .library-search input,
  #searchInput,
  #searchInput:focus { width: 100%; }
  .library-control,
  .sort-control { min-height: 44px; }
  .shortcuts-open { display: none; }
  #grid,
  .compact-grid #grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 12px 28px;
    gap: 12px;
  }
  .thumb { border-radius: 15px; }
  .thumb:hover { transform: none; }
  .thumb img,
  .compact-grid .thumb img { height: min(58vw, 310px); }
  .thumb-overlay {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
    opacity: 1;
    background: var(--surface2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .thumb-overlay .ov-btn { display: none !important; }
  .thumb:not(.local-only):not(.cloud-pending) .thumb-overlay [data-action="annotate"],
  .thumb:not(.local-only):not(.cloud-pending) .thumb-overlay [data-action="share"],
  .thumb:not(.local-only):not(.cloud-pending) .thumb-overlay [data-action="mobilemore"],
  .thumb.local-only .thumb-overlay [data-action="retrysync"],
  .thumb.local-only .thumb-overlay [data-action="download"],
  .thumb.cloud-pending .thumb-overlay [data-action="download"] {
    display: flex !important;
    width: 100%;
    height: 44px;
    min-height: 44px;
    border-radius: 10px;
  }
  .thumb-footer .ren,
  .thumb-footer .dl,
  .thumb-footer .del { display: none; }
  .thumb-favorite,
  .thumb-select { width: 44px; height: 44px; opacity: 1; }

  .modal-backdrop { padding: 12px; }
  .mobile-actions-backdrop { padding: 0; }
  .account-profile-card { grid-template-columns: auto minmax(0, 1fr); }
  .account-profile-actions { grid-column: 1 / -1; }
  .account-profile-actions button { flex: 1; min-height: 44px; }
  .edit-save-options { grid-template-columns: 1fr; }
  .edit-save-option { min-height: 76px; }
}

@media (max-width: 380px) {
  .brand-lockup-name { font-size: 15px; }
  .brand-lockup-tagline { font-size: 7px; letter-spacing: .07em; }
  .brand-lockup-symbol { width: 37px; height: 34px; }
  .dz-import-actions,
  #dropzone.compact .dz-import-actions,
  .mobile-action-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  header { min-height: 62px; }
  .editor-brand-symbol { width: 42px; height: 40px; }
  .editor-brand-copy { display: none; }
  .annotate-canvas-wrap { padding: 18px; }
}

/* -- THEME AND SETTINGS LAYER -----------------------------------------
   Dark is the product default. Light remains a complete, saved option.
   These semantic tokens intentionally sit after the brand application
   layer so every existing surface participates in theme changes. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08090b;
  --surface: #111216;
  --surface2: #18191d;
  --surface3: #222329;
  --border: rgba(255, 255, 255, 0.08);
  --border2: rgba(255, 255, 255, 0.14);
  --border3: rgba(255, 255, 255, 0.28);
  --text: #f7f6f2;
  --text-soft: #deddd8;
  --muted: #a5a7ad;
  --faint: #767980;
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 14px 38px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.58);
  --ring: 0 0 0 2px #08090b, 0 0 0 4px var(--sf-glow);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: var(--sf-canvas);
  --surface: var(--sf-white);
  --surface2: var(--sf-paper);
  --surface3: #dedbd5;
  --border: rgba(19, 20, 23, 0.1);
  --border2: rgba(19, 20, 23, 0.18);
  --border3: rgba(19, 20, 23, 0.32);
  --text: var(--sf-ink);
  --text-soft: #34363b;
  --muted: var(--sf-steel);
  --faint: #7b7e84;
  --shadow-sm: 0 2px 8px rgba(19, 20, 23, 0.06);
  --shadow-md: 0 10px 30px rgba(19, 20, 23, 0.1);
  --shadow-lg: var(--sf-shadow-soft);
  --ring: 0 0 0 2px var(--sf-canvas), 0 0 0 4px var(--sf-glow);
}

body {
  background:
    radial-gradient(760px 360px at 86% -12%, rgba(247, 167, 83, 0.12), transparent 68%),
    var(--bg);
  transition: background-color var(--t-med), color var(--t-med);
}

html[data-theme="light"] body {
  background:
    radial-gradient(700px 360px at 92% -8%, rgba(247, 167, 83, 0.13), transparent 68%),
    var(--bg);
}

.app-header {
  min-height: 72px;
  padding-inline: 28px;
  background: rgba(11, 12, 15, 0.98);
  border-color: var(--border);
}

html[data-theme="light"] .app-header { background: rgba(244, 243, 240, 0.98); }

.brand-home { min-height: 48px; gap: 11px; }
.brand-logo-main { object-position: left center; }

.header-menu {
  width: 318px;
  max-height: min(720px, calc(100vh - 92px));
  padding: 9px;
  background: var(--surface);
  border-color: var(--border2);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.header-menu-trigger {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
}
.header-menu-trigger > span { margin: 0; color: inherit; }
.header-menu-icon { color: var(--muted); }
.header-menu-chevron {
  color: var(--sf-glow);
  transition: transform var(--t-fast);
}
.header-menu-trigger[aria-expanded="true"] .header-menu-chevron { transform: rotate(180deg); }

.menu-group { padding: 4px 0 7px; }
.menu-group + .menu-group { border-top: 1px solid var(--border); }
.menu-group[hidden] { display: none; }
.menu-section-label {
  padding: 8px 10px 5px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.header-menu button {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
}
.header-menu button[hidden] { display: none; }
.header-menu button:hover { background: var(--surface3); color: var(--text); }
.header-menu button:disabled {
  opacity: 0.42;
  color: var(--muted);
}
.menu-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface2);
  color: var(--muted);
}
.menu-icon svg { width: 18px; height: 18px; }
.header-menu button:hover .menu-icon {
  border-color: rgba(247, 167, 83, 0.32);
  color: var(--sf-glow);
}
.menu-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.menu-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
}
.menu-copy small {
  overflow: hidden;
  color: var(--faint);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-dev-group { padding-top: 5px; }
.menu-dev-item {
  border: 1px solid rgba(247, 167, 83, 0.22);
  background: rgba(247, 167, 83, 0.06) !important;
}
.menu-dev-item:hover { border-color: rgba(247, 167, 83, 0.42); }
.menu-dev-item .menu-icon { color: var(--sf-glow); }
.menu-dev-state {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--surface3);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.menu-dev-state.pro {
  background: var(--sf-glow);
  color: var(--sf-ink);
}
.menu-shortcut {
  margin-top: 0;
  padding: 11px 10px 7px;
  color: var(--faint);
}

.free-indicator,
.library-search,
.sort-control,
.library-control {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-soft);
}

.btn-account,
.btn-green {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.btn-account:hover,
.btn-green:hover {
  background: var(--sf-glow);
  border-color: var(--sf-glow);
  color: var(--sf-ink);
}

.btn-upgrade {
  background: var(--surface);
  border-color: rgba(247, 167, 83, 0.56);
  color: var(--text);
}
.btn-upgrade:hover { background: var(--surface2); }

#folderBanner,
.account-nudge,
#dropzone,
.selection-bar,
.thumb,
.modal-box {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

#folderBanner { box-shadow: var(--shadow-sm); }
.banner-text strong,
.account-nudge strong,
.selection-bar strong,
.dz-title,
.library-title-row h2,
.modal-title,
.paywall-title,
.empty-title { color: var(--text); }

.account-nudge {
  background: color-mix(in srgb, var(--surface) 90%, var(--sf-glow) 10%);
  border-color: rgba(247, 167, 83, 0.34);
}

#dropzone {
  border-color: var(--border2);
  box-shadow: 0 14px 46px rgba(0, 0, 0, 0.2);
}
#dropzone:hover {
  border-color: var(--border3);
  box-shadow: 0 20px 62px rgba(0, 0, 0, 0.3);
}
#dropzone.active {
  border-color: var(--sf-glow);
  background: color-mix(in srgb, var(--surface) 92%, var(--sf-glow) 8%);
}

/* The compact paste row and library share exactly the same centered rail. */
#dropzone.compact {
  width: calc(100% - 48px);
  max-width: var(--sf-content-width);
  margin: 12px auto;
}

.dz-icon-wrap {
  background-color: #0b0c0f;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
}

.kbd,
.library-search kbd,
.shortcuts-open kbd,
.shortcut-grid kbd {
  background: var(--surface3);
  border-color: var(--border2);
  color: var(--text);
  box-shadow: 0 1px 0 var(--border2);
}

.dz-quick {
  background: var(--surface2);
  color: var(--muted);
  border-color: var(--border2);
}
.dz-quick:hover { background: var(--surface3); color: var(--text); }
.dz-quick.active {
  background: rgba(247, 167, 83, 0.12);
  color: var(--text);
}

.library-search #searchInput,
.library-search #searchInput:focus,
.sort-control select,
.modal-close,
.tool-btn,
.link-input,
#tagInput,
.ocr-text,
.account-form input,
.pw-form input,
select {
  background-color: var(--surface2);
  border-color: var(--border2);
  color: var(--text);
}

.selection-bar { box-shadow: var(--shadow-md); }
.thumb { box-shadow: var(--shadow-sm); }
.thumb:hover {
  border-color: var(--border2);
  box-shadow: var(--shadow-md);
}

.modal-backdrop { background: rgba(0, 0, 0, 0.72); }
.modal-box { box-shadow: var(--shadow-lg); }
.perk,
.account-benefits li,
.setup-note { background: var(--surface2); border-color: var(--border); }

footer { border-color: var(--border); }
.footer-left,
.footer-link { color: var(--muted); }
.footer-link:hover { color: var(--text); }

/* Settings */
.settings-box { width: 680px; padding: 30px; }
.settings-title { font-size: 28px; line-height: 1.15; }
.settings-section {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(260px, 1.28fr);
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.settings-section-copy h3 {
  margin: 0 0 5px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: -0.02em;
}
.settings-section-copy p,
.settings-billing-note {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}
.theme-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
  border: 0;
}
.theme-picker label { position: relative; cursor: pointer; }
.theme-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.theme-picker label > span {
  display: flex;
  min-height: 84px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  background: var(--surface2);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.theme-picker label:first-child > span {
  background: #090a0d;
  color: #f7f6f2;
}
.theme-picker label:last-child > span {
  background: #f7f6f2;
  color: #131417;
}
.theme-picker strong,
.theme-picker small { display: block; }
.theme-picker strong { font-size: 13px; }
.theme-picker small { margin-top: 2px; opacity: 0.68; font-size: 10.5px; }
.theme-picker input:checked + span {
  border-color: var(--sf-glow);
  box-shadow: inset 0 0 0 1px var(--sf-glow);
}
.theme-picker input:focus-visible + span { box-shadow: var(--ring); }

.settings-switches { display: grid; gap: 4px; }
.settings-switch {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.settings-switch:hover { background: var(--surface2); }
.settings-switch span,
.settings-switch strong,
.settings-switch small { display: block; }
.settings-switch strong { color: var(--text); font-size: 12.5px; }
.settings-switch small { margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.settings-switch input {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--surface3);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.settings-switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--t-fast), background var(--t-fast);
}
.settings-switch input:checked {
  border-color: var(--sf-glow);
  background: rgba(247, 167, 83, 0.18);
}
.settings-switch input:checked::after {
  background: var(--sf-glow);
  transform: translateX(20px);
}
.settings-switch input:focus-visible { box-shadow: var(--ring); }

.settings-device { align-items: center; }
.settings-device .btn-ghost { min-height: 44px; justify-self: start; }
.settings-pwa { align-items: center; }
.pwa-install-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  background: var(--surface2);
}
.pwa-install-status {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}
.pwa-install-status > span:last-child,
.pwa-install-status strong,
.pwa-install-status small { display: block; }
.pwa-install-status > span:last-child { min-width: 0; }
.pwa-install-status strong { color: var(--text); font-size: 12.5px; line-height: 1.3; }
.pwa-install-status small { margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.pwa-status-mark {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: var(--surface3);
}
.pwa-status-mark::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid var(--muted);
  border-top-color: transparent;
  border-radius: 50%;
  animation: pwa-status-spin 800ms linear infinite;
}
.pwa-status-mark.ready,
.pwa-status-mark.installed { border-color: rgba(247, 167, 83, 0.45); background: rgba(247, 167, 83, 0.1); }
.pwa-status-mark.ready::before,
.pwa-status-mark.installed::before {
  inset: 9px 8px 10px 11px;
  border: 0;
  border-right: 2px solid var(--sf-glow);
  border-bottom: 2px solid var(--sf-glow);
  border-radius: 0;
  animation: none;
  transform: rotate(45deg);
}
.pwa-status-mark.limited::before {
  content: "i";
  inset: 0;
  border: 0;
  color: var(--muted);
  font: 700 14px/32px var(--font-mono);
  text-align: center;
  animation: none;
}
.pwa-install-panel .btn-accent { width: 100%; min-height: 44px; }
@keyframes pwa-status-spin { to { transform: rotate(360deg); } }

.incoming-share-notice {
  display: flex;
  width: calc(100% - 48px);
  max-width: var(--sf-content-width);
  min-height: 68px;
  align-items: center;
  gap: 13px;
  margin: 14px auto 0;
  padding: 11px 12px 11px 14px;
  border: 1px solid rgba(247, 167, 83, 0.4);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 90%, var(--sf-glow) 10%);
  box-shadow: var(--shadow-md);
}
.incoming-share-notice[hidden] { display: none; }
.incoming-share-mark {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--sf-glow);
  color: var(--sf-ink);
}
.incoming-share-mark svg { width: 21px; height: 21px; }
.incoming-share-notice > div { min-width: 0; flex: 1; }
.incoming-share-notice strong,
.incoming-share-notice span { display: block; }
.incoming-share-notice strong { color: var(--text); font-size: 13px; line-height: 1.35; }
.incoming-share-notice > div > span { margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.incoming-share-notice .btn-ghost { min-height: 44px; flex: 0 0 auto; }
.settings-account { display: block; }
.settings-account-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.settings-plan-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.settings-plan-badge.pro {
  border-color: rgba(247, 167, 83, 0.5);
  background: rgba(247, 167, 83, 0.12);
  color: var(--sf-glow);
}
.settings-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-account-actions button { min-height: 42px; }
.settings-signout { margin-left: auto; }
.settings-billing-note { margin-top: 12px; }
.settings-billing-note[hidden] { display: none; }

.settings-local-vault { align-items: start; }
.local-vault-controls { display: grid; gap: 12px; min-width: 0; }
.local-vault-meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface2);
}
.local-vault-meter span:first-child,
.local-vault-meter strong,
.local-vault-meter small { display: block; }
.local-vault-meter strong { color: var(--text); font-size: 13px; }
.local-vault-meter small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.local-persistence-state {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.local-persistence-state.safe { border-color: rgba(52, 216, 133, .38); color: #5fe19a; }
.local-persistence-state.warning { border-color: rgba(247, 167, 83, .45); color: var(--accent); }
.local-vault-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.local-vault-actions button { min-height: 42px; }
.local-vault-warning {
  margin: 0;
  padding: 11px 12px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  background: rgba(247, 167, 83, .07);
  font-size: 11px;
  line-height: 1.55;
}

.import-box { width: min(760px, calc(100vw - 32px)); }
.import-progress { margin: 18px 0; color: var(--muted); font-size: 12px; }
.import-progress > div {
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface2);
}
.import-progress > div span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 160ms ease; }
.import-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 20px 0 12px; }
.import-summary article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface2);
}
.import-summary span,
.import-summary strong,
.import-summary small { display: block; }
.import-summary span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.import-summary strong { margin-top: 10px; color: var(--text); font-family: var(--font-display); font-size: 24px; line-height: 1; }
.import-summary small { min-height: 2.8em; margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.import-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  cursor: pointer;
}
.import-choice span,
.import-choice strong,
.import-choice small { display: block; }
.import-choice strong { color: var(--text); font-size: 13px; }
.import-choice small { max-width: 54ch; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.import-choice input { width: 20px; height: 20px; accent-color: var(--accent); }
.import-breakdown {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(247, 167, 83, .07);
  font-size: 12px;
  line-height: 1.55;
}
.import-actions { align-items: center; }
.import-actions .btn-accent { min-width: 240px; }
.local-delete-box { width: min(470px, calc(100vw - 32px)); }

.thumb-sync-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.thumb-sync-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.thumb-sync-state.waiting::before { background: var(--accent); }
.thumb-sync-state.synced::before { background: #3ddc84; }
.thumb-sync-state.failed::before { background: #ff6b6b; }

@media (max-width: 720px) {
  .dz-folder-import { display: none; }
  .import-summary { grid-template-columns: 1fr 1fr; }
  .import-actions { flex-direction: column-reverse; }
  .import-actions button { width: 100%; min-width: 0; }
  .local-vault-actions { display: grid; grid-template-columns: 1fr; }
  .local-vault-actions button { width: 100%; }
}

.compact-grid #grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.compact-grid .thumb img { height: 126px; }
.settings-hide-folder-help #folderBanner { display: none !important; }
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

@media (max-width: 900px) {
  .brand-logo-main { width: 222px; }
  .app-header { padding-inline: 18px; }
}

@media (max-width: 720px) {
  .app-header { padding-inline: 16px; }
  #dropzone.compact {
    width: calc(100% - 32px);
    margin: 10px auto;
  }
  .settings-box { padding: 24px 20px; }
  .settings-section { grid-template-columns: 1fr; gap: 14px; }
  .settings-device .btn-ghost { width: 100%; }
  .pwa-install-panel { width: 100%; }
}

@media (max-width: 520px) {
  .settings-title { font-size: 24px; }
  .theme-picker { grid-template-columns: 1fr; }
  .theme-picker label > span { min-height: 70px; }
  .settings-account-actions { flex-direction: column; }
  .settings-account-actions button { width: 100%; }
  .settings-signout { margin-left: 0; }
  .header-menu {
    top: 64px;
    width: min(318px, calc(100vw - 24px));
    max-height: calc(100vh - 76px);
  }
}

/* Mobile authority fixes live last so desktop brand refinements cannot
   accidentally turn the phone workspace back into the desktop layout. */
@media (max-width: 760px) {
  .app-header { min-height: 62px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
  .brand-lockup-copy { display: flex; }
  .header-actions > #accountBtn,
  .header-actions > #proBtn,
  .header-actions > #upgradeBtn,
  .header-actions > .free-indicator { display: none !important; }
  .header-menu-trigger { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .header-menu-trigger > span,
  .header-menu-chevron { display: none; }
  .header-menu { top: calc(62px + env(safe-area-inset-top)); right: 10px; width: min(340px, calc(100vw - 20px)); max-height: calc(100dvh - 74px - env(safe-area-inset-top)); }
  .header-menu button { min-height: 50px; }
  .menu-shortcut,
  #folderBanner,
  #apiWarning { display: none !important; }

  .cloud-status-notice,
  .incoming-share-notice,
  .account-nudge { width: calc(100% - 24px); margin-inline: auto; }
  .cloud-status-notice { align-items: flex-start; flex-wrap: wrap; }
  .cloud-status-notice .btn-accent { width: 100%; min-height: 44px; }
  .incoming-share-notice { align-items: flex-start; flex-wrap: wrap; }
  .incoming-share-notice > div { padding-top: 2px; }
  .incoming-share-notice .btn-ghost { width: 100%; }

  #dropzone,
  #dropzone.compact {
    display: block;
    width: calc(100% - 24px);
    min-height: 0;
    margin: 12px auto;
    padding: 20px 14px 14px;
    border-style: solid;
    border-radius: 18px;
    text-align: center;
  }
  #dropzone .dz-icon-wrap,
  #dropzone.compact .dz-icon-wrap { width: 42px; height: 38px; margin: 0 auto 11px; background-size: auto 33px; border-radius: 12px; }
  #dropzone .dz-title,
  #dropzone.compact .dz-title { display: block; margin: 0 0 6px; font-size: 21px; }
  .desktop-upload-copy,
  .dz-hint { display: none !important; }
  .mobile-upload-copy { display: inline; }
  .dz-mobile-hint { display: block; max-width: 330px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.45; }
  .dz-import-actions,
  #dropzone.compact .dz-import-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 14px 0 0; }
  .dz-import-actions button,
  #dropzone.compact .dz-import-actions button { width: 100%; min-height: 48px; padding: 10px; }
  .dz-camera-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
  .dz-quick,
  #dropzone.compact .dz-quick { width: 100%; min-height: 44px; margin: 8px 0 0; justify-content: center; border-radius: 11px; }

  .library-bar { width: calc(100% - 24px); margin: 0 auto; padding-top: 14px; }
  .library-search { order: -1; flex: 1 0 100%; min-height: 46px; }
  .library-control,
  .sort-control { min-height: 44px; }
  .shortcuts-open { display: none; }
  #grid,
  .compact-grid #grid { width: 100%; grid-template-columns: minmax(0, 1fr); padding: 12px 12px 28px; gap: 12px; }
  .thumb:hover { transform: none; }
  .thumb img,
  .compact-grid .thumb img { height: min(58vw, 310px); }
  .thumb-overlay { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 8px; opacity: 1; background: var(--surface2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .thumb-overlay .ov-btn { display: none !important; }
  .thumb:not(.local-only):not(.cloud-pending) .thumb-overlay [data-action="annotate"],
  .thumb:not(.local-only):not(.cloud-pending) .thumb-overlay [data-action="download"],
  .thumb:not(.local-only):not(.cloud-pending) .thumb-overlay [data-action="mobilemore"],
  .thumb.local-only .thumb-overlay [data-action="retrysync"],
  .thumb.local-only .thumb-overlay [data-action="download"],
  .thumb.cloud-pending .thumb-overlay [data-action="download"] { display: flex !important; width: 100%; height: 44px; min-height: 44px; border-radius: 10px; }
  .thumb:not(.local-only):not(.cloud-pending) .thumb-overlay [data-action="share"] { display: none !important; }
  .thumb-footer .ren,
  .thumb-footer .dl,
  .thumb-footer .del { display: none; }
  .thumb-favorite,
  .thumb-select { width: 44px; height: 44px; opacity: 1; }
  .modal-backdrop { padding: 12px; }
  .mobile-actions-backdrop { padding: 0; }
}

@media (max-width: 380px) {
  .brand-lockup-copy { display: flex; }
  .brand-lockup-tagline { display: none; }
  .dz-import-actions,
  #dropzone.compact .dz-import-actions,
  .mobile-action-grid { grid-template-columns: 1fr; }
}

/* Use the available viewport for the screenshot workspace. The small outer
   gutters keep controls comfortable without limiting wide displays. */
#folderBanner,
#apiWarning,
.account-nudge,
.cloud-status-notice,
.incoming-share-notice,
#dropzone,
#dropzone.compact,
.library-bar,
.selection-bar,
#grid {
  max-width: none;
}

footer {
  width: 100%;
  max-width: none;
}

/* Keep selection beside the share or retention control instead of beneath it. */
.thumb.sf-shot .thumb-select {
  z-index: 7;
  left: 59px;
  top: 15px;
}

@media (max-width: 760px) {
  .thumb.sf-shot .thumb-select {
    left: 63px;
    top: 11px;
  }
}