v0.1.13 - UI redesign - Extension now shows annotations, highlights, and more, on-site. - Various bug fixes

.github/workflows/docker-publish.yml

···
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   workflow_dispatch:
 
 env:

.github/workflows/release-extension.yml

···
 on:
   push:
     tags:
-      - 'v*'
+      - "v*"
 
 jobs:
   release:
···
         run: |
           VERSION=${GITHUB_REF_NAME#v}
           echo "Updating manifests to version $VERSION"
-          
+
           cd extension
           for manifest in manifest.json manifest.chrome.json manifest.firefox.json; do
             if [ -f "$manifest" ]; then
···
           cp manifest.chrome.json manifest.json
           zip -r ../margin-extension-chrome.zip . -x "*.DS_Store" -x "*.git*" -x "manifest.*.json"
           cd ..
-          
+
       - name: Build Extension (Firefox)
         run: |
           cd extension

README.md

···
 # Margin
 
-*Write in the margins of the web*
+_Write in the margins of the web_
 
 A web comments layer built on [AT Protocol](https://atproto.com) that lets you annotate any URL on the internet.
 

backend/cmd/server/main.go

···
 	r.Get("/{handle}/highlight/{rkey}", ogHandler.HandleAnnotationPage)
 	r.Get("/{handle}/bookmark/{rkey}", ogHandler.HandleAnnotationPage)
 
+	r.Get("/api/tags/trending", handler.HandleGetTrendingTags)
+
 	r.Get("/collection/{uri}", ogHandler.HandleCollectionPage)
 	r.Get("/{handle}/collection/{rkey}", ogHandler.HandleCollectionPage)
 

backend/internal/api/tags.go

···
+package api
+
+import (
+	"encoding/json"
+	"net/http"
+	"strconv"
+)
+
+func (h *Handler) HandleGetTrendingTags(w http.ResponseWriter, r *http.Request) {
+	limit := 10
+	if l := r.URL.Query().Get("limit"); l != "" {
+		if val, err := strconv.Atoi(l); err == nil && val > 0 && val <= 50 {
+			limit = val
+		}
+	}
+
+	tags, err := h.db.GetTrendingTags(limit)
+	if err != nil {
+		http.Error(w, `{"error": "Failed to fetch trending tags: `+err.Error()+`"}`, http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(tags)
+}

backend/internal/db/tags.go

···
+package db
+
+type TrendingTag struct {
+	Tag   string `json:"tag"`
+	Count int    `json:"count"`
+}
+
+func (db *DB) GetTrendingTags(limit int) ([]TrendingTag, error) {
+	query := `
+		SELECT 
+			json_each.value as tag, 
+			COUNT(*) as count
+		FROM annotations, json_each(annotations.tags_json)
+		WHERE tags_json IS NOT NULL 
+			AND tags_json != '' 
+			AND tags_json != '[]'
+		GROUP BY tag
+		ORDER BY count DESC
+		LIMIT ?
+	`
+
+	rows, err := db.Query(db.Rebind(query), limit)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var tags []TrendingTag
+	for rows.Next() {
+		var t TrendingTag
+		if err := rows.Scan(&t.Tag, &t.Count); err != nil {
+			return nil, err
+		}
+		tags = append(tags, t)
+	}
+
+	if err = rows.Err(); err != nil {
+		return nil, err
+	}
+
+	if tags == nil {
+		return []TrendingTag{}, nil
+	}
+
+	return tags, nil
+}

extension/background/service-worker.js

···
       }
 
       case "GET_ANNOTATIONS": {
+        const stored = await chrome.storage.local.get(["apiUrl"]);
+        const currentApiUrl = stored.apiUrl
+          ? stored.apiUrl.replace(/\/$/, "")
+          : API_BASE;
+
         const pageUrl = request.data.url;
         const res = await fetch(
-          `${API_BASE}/api/targets?source=${encodeURIComponent(pageUrl)}`,
+          `${currentApiUrl}/api/targets?source=${encodeURIComponent(pageUrl)}`,
         );
         const data = await res.json();
 
···
           return;
         }
         const { url, selector } = request.data;
-
         let composeUrl = `${WEB_BASE}/new?url=${encodeURIComponent(url)}`;
         if (selector) {
           composeUrl += `&selector=${encodeURIComponent(JSON.stringify(selector))}`;
···
         chrome.tabs.create({ url: composeUrl });
         break;
       }
+
+      case "OPEN_APP_URL": {
+        if (!WEB_BASE) {
+          chrome.runtime.openOptionsPage();
+          return;
+        }
+        const path = request.data.path;
+        const safePath = path.startsWith("/") ? path : `/${path}`;
+        chrome.tabs.create({ url: `${WEB_BASE}${safePath}` });
+        break;
+      }
+
+      case "OPEN_SIDE_PANEL":
+        if (sender.tab && sender.tab.windowId) {
+          chrome.sidePanel
+            .open({ windowId: sender.tab.windowId })
+            .catch((err) => console.error("Failed to open side panel", err));
+        }
+        break;
 
       case "CREATE_BOOKMARK": {
         if (!API_BASE) {

extension/content/content.js

···
 (() => {
-  function buildTextQuoteSelector(selection) {
-    const exact = selection.toString().trim();
-    if (!exact) return null;
+  let sidebarHost = null;
+  let sidebarShadow = null;
+  let popoverEl = null;
 
-    const range = selection.getRangeAt(0);
-    const contextLength = 32;
+  let activeItems = [];
+
+  let hoveredItems = [];
+  let tooltipEl = null;
+  let hideTimer = null;
 
-    let prefix = "";
-    try {
-      const preRange = document.createRange();
-      preRange.selectNodeContents(document.body);
-      preRange.setEnd(range.startContainer, range.startOffset);
-      const preText = preRange.toString();
-      prefix = preText.slice(-contextLength).trim();
-    } catch (e) {
-      console.warn("Could not get prefix:", e);
+  const OVERLAY_STYLES = `
+    :host { all: initial; }
+    .margin-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+    .margin-badge {
+      position: absolute;
+      background: #6366f1;
+      color: white;
+      padding: 4px 10px;
+      border-radius: 99px;
+      font-size: 11px;
+      font-weight: 600;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      cursor: pointer;
+      pointer-events: auto;
+      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transform: translateY(-120%);
+      white-space: nowrap;
+      transition: transform 0.15s, background-color 0.15s;
+      z-index: 2147483647;
+    }
+    .margin-badge:hover {
+      transform: translateY(-125%) scale(1.05);
+      background: #4f46e5;
+      z-index: 2147483647;
+    }
+    .margin-badge-avatar {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: rgba(255,255,255,0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 9px;
+      object-fit: cover;
+    }
+    .margin-badge-stack {
+      display: flex;
+      align-items: center;
+    }
+    .margin-badge-stack .margin-badge-avatar {
+      margin-left: -6px;
+      border: 1px solid #6366f1;
+    }
+    .margin-badge-stack .margin-badge-avatar:first-child {
+      margin-left: 0;
+    }
+    .margin-badge-stem {
+      position: absolute;
+      left: 14px;
+      bottom: -6px;
+      width: 2px;
+      height: 6px;
+      background: #6366f1;
+      border-radius: 2px;
     }
 
-    let suffix = "";
-    try {
-      const postRange = document.createRange();
-      postRange.selectNodeContents(document.body);
-      postRange.setStart(range.endContainer, range.endOffset);
-      const postText = postRange.toString();
-      suffix = postText.slice(0, contextLength).trim();
-    } catch (e) {
-      console.warn("Could not get suffix:", e);
+    .margin-popover {
+      position: absolute;
+      width: 320px;
+      background: #09090b;
+      border: 1px solid #27272a;
+      border-radius: 12px;
+      padding: 0;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+      display: flex;
+      flex-direction: column;
+      pointer-events: auto;
+      z-index: 2147483647;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      color: #e4e4e7;
+      opacity: 0;
+      transform: scale(0.95);
+      animation: popover-in 0.15s forwards;
+      max-height: 480px;
+      overflow: hidden;
+    }
+    @keyframes popover-in { to { opacity: 1; transform: scale(1); } }
+    .popover-header {
+      padding: 12px 16px;
+      border-bottom: 1px solid #27272a;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #0f0f12;
+      border-radius: 12px 12px 0 0;
+      font-weight: 600;
+      font-size: 13px;
+    }
+    .popover-scroll-area {
+      overflow-y: auto;
+      max-height: 400px;
+    }
+    .popover-item-block {
+      border-bottom: 1px solid #27272a;
+      margin-bottom: 0;
+      animation: fade-in 0.2s;
+    }
+    .popover-item-block:last-child {
+      border-bottom: none;
+    }
+    .popover-item-header {
+      padding: 12px 16px 4px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .popover-avatar {
+      width: 24px; height: 24px; border-radius: 50%; background: #27272a;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 10px; color: #a1a1aa;
+    }
+    .popover-handle { font-size: 12px; font-weight: 600; color: #e4e4e7; }
+    .popover-close { background: none; border: none; color: #71717a; cursor: pointer; padding: 4px; }
+    .popover-close:hover { color: #e4e4e7; }
+    .popover-content { padding: 4px 16px 12px; font-size: 13px; line-height: 1.5; color: #e4e4e7; }
+    .popover-quote {
+      margin-top: 8px; padding: 6px 10px; background: #18181b;
+      border-left: 2px solid #6366f1; border-radius: 4px;
+      font-size: 11px; color: #a1a1aa; font-style: italic;
+    }
+    .popover-actions {
+      padding: 8px 16px;
+      display: flex; justify-content: flex-end; gap: 8px;
     }
+    .btn-action {
+      background: none; border: 1px solid #27272a; border-radius: 4px;
+      padding: 4px 8px; color: #a1a1aa; font-size: 11px; cursor: pointer;
+    }
+    .btn-action:hover { background: #27272a; color: #e4e4e7; }
+  `;
 
-    return {
-      type: "TextQuoteSelector",
-      exact: exact,
-      prefix: prefix || undefined,
-      suffix: suffix || undefined,
-    };
-  }
+  class DOMTextMatcher {
+    constructor() {
+      this.textNodes = [];
+      this.corpus = "";
+      this.indices = [];
+      this.buildMap();
+    }
 
-  function findAndScrollToText(selector) {
-    if (!selector || !selector.exact) return false;
+    buildMap() {
+      const walker = document.createTreeWalker(
+        document.body,
+        NodeFilter.SHOW_TEXT,
+        {
+          acceptNode: (node) => {
+            if (!node.parentNode) return NodeFilter.FILTER_REJECT;
+            const tag = node.parentNode.tagName;
+            if (
+              ["SCRIPT", "STYLE", "NOSCRIPT", "TEXTAREA", "INPUT"].includes(tag)
+            )
+              return NodeFilter.FILTER_REJECT;
+            if (node.textContent.trim().length === 0)
+              return NodeFilter.FILTER_SKIP;
 
-    const searchText = selector.exact.trim();
-    const normalizedSearch = searchText.replace(/\s+/g, " ");
+            if (node.parentNode.offsetParent === null)
+              return NodeFilter.FILTER_REJECT;
 
-    const treeWalker = document.createTreeWalker(
-      document.body,
-      NodeFilter.SHOW_TEXT,
-      null,
-      false,
-    );
+            return NodeFilter.FILTER_ACCEPT;
+          },
+        },
+      );
 
-    let currentNode;
-    while ((currentNode = treeWalker.nextNode())) {
-      const nodeText = currentNode.textContent;
-      const normalizedNode = nodeText.replace(/\s+/g, " ");
-
-      let index = nodeText.indexOf(searchText);
-
-      if (index === -1) {
-        const normIndex = normalizedNode.indexOf(normalizedSearch);
-        if (normIndex !== -1) {
-          index = nodeText.indexOf(searchText.substring(0, 20));
-          if (index === -1) index = 0;
-        }
+      let currentNode;
+      let index = 0;
+      while ((currentNode = walker.nextNode())) {
+        const text = currentNode.textContent;
+        this.textNodes.push(currentNode);
+        this.corpus += text;
+        this.indices.push({
+          start: index,
+          node: currentNode,
+          length: text.length,
+        });
+        index += text.length;
       }
+    }
 
-      if (index !== -1 && nodeText.trim().length > 0) {
-        try {
-          const range = document.createRange();
-          const endIndex = Math.min(index + searchText.length, nodeText.length);
-          range.setStart(currentNode, index);
-          range.setEnd(currentNode, endIndex);
+    findRange(searchText) {
+      if (!searchText) return null;
 
-          if (typeof CSS !== "undefined" && CSS.highlights) {
-            const highlight = new Highlight(range);
-            CSS.highlights.set("margin-scroll-highlight", highlight);
+      let matchIndex = this.corpus.indexOf(searchText);
 
-            setTimeout(() => {
-              CSS.highlights.delete("margin-scroll-highlight");
-            }, 3000);
-          }
+      if (matchIndex === -1) {
+        const cleaned = searchText.replace(/\s+/g, " ");
+        return null;
+      }
 
-          const rect = range.getBoundingClientRect();
-          window.scrollTo({
-            top: window.scrollY + rect.top - window.innerHeight / 3,
-            behavior: "smooth",
-          });
+      const start = this.mapIndexToPoint(matchIndex);
+      const end = this.mapIndexToPoint(matchIndex + searchText.length);
 
-          window.scrollTo({
-            top: window.scrollY + rect.top - window.innerHeight / 3,
-            behavior: "smooth",
-          });
-
-          return true;
-        } catch (e) {
-          console.warn("Could not create range:", e);
-        }
+      if (start && end) {
+        const range = document.createRange();
+        range.setStart(start.node, start.offset);
+        range.setEnd(end.node, end.offset);
+        return range;
       }
+      return null;
     }
 
-    if (window.find) {
-      window.getSelection()?.removeAllRanges();
-      const found = window.find(searchText, false, false, true, false);
-      if (found) {
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-          const range = selection.getRangeAt(0);
-          const rect = range.getBoundingClientRect();
-          window.scrollTo({
-            top: window.scrollY + rect.top - window.innerHeight / 3,
-            behavior: "smooth",
-          });
+    mapIndexToPoint(corpusIndex) {
+      for (const info of this.indices) {
+        if (
+          corpusIndex >= info.start &&
+          corpusIndex < info.start + info.length
+        ) {
+          return { node: info.node, offset: corpusIndex - info.start };
+        }
+      }
+      if (this.indices.length > 0) {
+        const last = this.indices[this.indices.length - 1];
+        if (corpusIndex === last.start + last.length) {
+          return { node: last.node, offset: last.length };
         }
-        return true;
       }
+      return null;
     }
-
-    return false;
   }
 
-  function renderPageHighlights(highlights) {
-    if (!highlights || !Array.isArray(highlights) || !CSS.highlights) return;
+  function initOverlay() {
+    sidebarHost = document.createElement("div");
+    sidebarHost.id = "margin-overlay-host";
+    const getScrollHeight = () => {
+      const bodyH = document.body?.scrollHeight || 0;
+      const docH = document.documentElement?.scrollHeight || 0;
+      return Math.max(bodyH, docH);
+    };
 
-    const ranges = [];
+    sidebarHost.style.cssText = `
+        position: absolute; top: 0; left: 0; width: 100%; 
+        height: ${getScrollHeight()}px; 
+        pointer-events: none; z-index: 2147483647;
+    `;
+    document.body?.appendChild(sidebarHost) ||
+      document.documentElement.appendChild(sidebarHost);
 
-    highlights.forEach((item) => {
-      const selector = item.target?.selector;
-      if (!selector?.exact) return;
+    sidebarShadow = sidebarHost.attachShadow({ mode: "open" });
+    const styleEl = document.createElement("style");
+    styleEl.textContent = OVERLAY_STYLES;
+    sidebarShadow.appendChild(styleEl);
 
-      const searchText = selector.exact;
-      const treeWalker = document.createTreeWalker(
-        document.body,
-        NodeFilter.SHOW_TEXT,
-        null,
-        false,
-      );
+    const container = document.createElement("div");
+    container.className = "margin-overlay";
+    container.id = "margin-overlay-container";
+    sidebarShadow.appendChild(container);
+
+    createTooltip(container);
+
+    const observer = new ResizeObserver(() => {
+      sidebarHost.style.height = `${getScrollHeight()}px`;
+    });
+    if (document.body) observer.observe(document.body);
+    if (document.documentElement) observer.observe(document.documentElement);
+
+    fetchAnnotations();
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("click", handleDocumentClick);
+  }
 
-      let currentNode;
-      while ((currentNode = treeWalker.nextNode())) {
-        const nodeText = currentNode.textContent;
-        const index = nodeText.indexOf(searchText);
+  function createTooltip(container) {
+    tooltipEl = document.createElement("div");
+    tooltipEl.className = "margin-badge";
+    tooltipEl.style.opacity = "0";
+    tooltipEl.style.transition = "opacity 0.1s, transform 0.1s";
+    tooltipEl.style.pointerEvents = "auto";
 
-        if (index !== -1) {
-          try {
-            const range = document.createRange();
-            range.setStart(currentNode, index);
-            range.setEnd(currentNode, index + searchText.length);
-            ranges.push(range);
-          } catch (e) {
-            console.warn("Could not create range for highlight:", e);
+    tooltipEl.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (hoveredItems.length > 0) {
+        const firstItem = hoveredItems[0];
+        const rect = activeItems
+          .find((x) => x.item === firstItem)
+          ?.range.getBoundingClientRect();
+        if (rect) {
+          const top = rect.top + window.scrollY;
+          const left = rect.left + window.scrollX;
+          showPopover(hoveredItems, top, left);
+        }
+      }
+    });
+    container.appendChild(tooltipEl);
+  }
+
+  function handleMouseMove(e) {
+    const x = e.clientX;
+    const y = e.clientY;
+
+    let foundItems = [];
+
+    for (const { range, item } of activeItems) {
+      const rects = range.getClientRects();
+      for (const rect of rects) {
+        const padding = 5;
+        if (
+          x >= rect.left - padding &&
+          x <= rect.right + padding &&
+          y >= rect.top - padding &&
+          y <= rect.bottom + padding
+        ) {
+          if (!foundItems.includes(item)) {
+            foundItems.push(item);
           }
           break;
         }
       }
-    });
+    }
 
-    if (ranges.length > 0) {
-      const highlight = new Highlight(...ranges);
-      CSS.highlights.set("margin-page-highlights", highlight);
+    let isOverTooltip = false;
+    if (tooltipEl && tooltipEl.style.opacity === "1") {
+      const rect = tooltipEl.getBoundingClientRect();
+      if (
+        x >= rect.left &&
+        x <= rect.right &&
+        y >= rect.top &&
+        y <= rect.bottom
+      ) {
+        isOverTooltip = true;
+      }
     }
-  }
 
-  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-    if (request.type === "GET_SELECTOR_FOR_ANNOTATE_INLINE") {
-      const selection = window.getSelection();
-      if (!selection || selection.toString().trim().length === 0) {
-        sendResponse({ selector: null });
-        return true;
+    if (foundItems.length > 0 || isOverTooltip) {
+      if (hideTimer) {
+        clearTimeout(hideTimer);
+        hideTimer = null;
       }
+      if (foundItems.length > 0) {
+        const currentIds = hoveredItems
+          .map((i) => i.id || i.cid)
+          .sort()
+          .join(",");
+        const newIds = foundItems
+          .map((i) => i.id || i.cid)
+          .sort()
+          .join(",");
 
-      const selector = buildTextQuoteSelector(selection);
-      sendResponse({ selector: selector });
-      return true;
+        if (currentIds !== newIds) {
+          hoveredItems = foundItems;
+          updateTooltip();
+        }
+      }
+    } else {
+      if (!hideTimer && hoveredItems.length > 0) {
+        hideTimer = setTimeout(() => {
+          hoveredItems = [];
+          updateTooltip();
+          hideTimer = null;
+        }, 300);
+      }
     }
+  }
 
-    if (request.type === "GET_SELECTOR_FOR_ANNOTATE") {
-      const selection = window.getSelection();
-      if (!selection || selection.toString().trim().length === 0) {
-        return;
-      }
+  function updateTooltip() {
+    if (!tooltipEl) return;
 
-      const selector = buildTextQuoteSelector(selection);
-      if (selector) {
-        chrome.runtime.sendMessage({
-          type: "OPEN_COMPOSE",
-          data: {
-            url: window.location.href,
-            selector: selector,
-          },
-        });
-      }
+    if (hoveredItems.length === 0) {
+      tooltipEl.style.opacity = "0";
+      tooltipEl.style.transform = "translateY(-105%) scale(0.9)";
+      tooltipEl.style.pointerEvents = "none";
+      return;
     }
 
-    if (request.type === "GET_SELECTOR_FOR_HIGHLIGHT") {
-      const selection = window.getSelection();
-      if (!selection || selection.toString().trim().length === 0) {
-        sendResponse({ success: false, error: "No text selected" });
-        return true;
+    tooltipEl.style.pointerEvents = "auto";
+
+    const authorsMap = new Map();
+    hoveredItems.forEach((item) => {
+      const author = item.author || item.creator || {};
+      const id = author.did || author.handle;
+      if (id && !authorsMap.has(id)) {
+        authorsMap.set(id, author);
       }
+    });
 
-      const selector = buildTextQuoteSelector(selection);
-      if (selector) {
-        chrome.runtime
-          .sendMessage({
-            type: "CREATE_HIGHLIGHT",
-            data: {
-              url: window.location.href,
-              title: document.title,
-              selector: selector,
-            },
-          })
-          .then((response) => {
-            if (response?.success) {
-              showNotification("Text highlighted!", "success");
+    const uniqueAuthors = Array.from(authorsMap.values());
+    let contentHtml = "";
 
-              if (CSS.highlights) {
-                try {
-                  const range = selection.getRangeAt(0);
-                  const highlight = new Highlight(range);
-                  CSS.highlights.set("margin-highlight-preview", highlight);
-                } catch (e) {
-                  console.warn("Could not visually highlight:", e);
-                }
-              }
+    if (uniqueAuthors.length === 1) {
+      const author = uniqueAuthors[0] || {};
+      const handle = author.handle || "User";
+      const avatar = author.avatar;
+      const count = hoveredItems.length;
 
-              window.getSelection().removeAllRanges();
-            } else {
-              showNotification(
-                "Failed to highlight: " + (response?.error || "Unknown error"),
-                "error",
-              );
-            }
-            sendResponse(response);
-          })
-          .catch((err) => {
-            console.error("Highlight error:", err);
-            showNotification("Error creating highlight", "error");
-            sendResponse({ success: false, error: err.message });
-          });
-        return true;
+      let avatarHtml = `<div class="margin-badge-avatar">${handle[0]?.toUpperCase() || "U"}</div>`;
+      if (avatar) {
+        avatarHtml = `<img src="${avatar}" class="margin-badge-avatar">`;
       }
-      sendResponse({ success: false, error: "Could not build selector" });
-      return true;
+
+      contentHtml = `${avatarHtml}<span>${handle}${count > 1 ? ` (${count})` : ""}</span>`;
+    } else {
+      let stackHtml = `<div class="margin-badge-stack">`;
+      const displayAuthors = uniqueAuthors.slice(0, 3);
+      displayAuthors.forEach((author) => {
+        const handle = author.handle || "U";
+        const avatar = author.avatar;
+        if (avatar) {
+          stackHtml += `<img src="${avatar}" class="margin-badge-avatar">`;
+        } else {
+          stackHtml += `<div class="margin-badge-avatar">${handle[0]?.toUpperCase() || "U"}</div>`;
+        }
+      });
+      stackHtml += `</div>`;
+
+      contentHtml = `${stackHtml}<span>${uniqueAuthors.length} people</span>`;
     }
 
-    if (request.type === "SCROLL_TO_TEXT") {
-      const found = findAndScrollToText(request.selector);
-      if (!found) {
-        showNotification("Could not find text on page", "error");
+    tooltipEl.innerHTML = `
+          ${contentHtml}
+          <div class="margin-badge-stem"></div>
+      `;
+
+    const firstItem = hoveredItems[0];
+    const match = activeItems.find((x) => x.item === firstItem);
+    if (match) {
+      const rects = match.range.getClientRects();
+      if (rects && rects.length > 0) {
+        const rect = rects[0];
+        const top = rect.top + window.scrollY;
+        const left = rect.left + window.scrollX;
+
+        tooltipEl.style.top = `${top - 36}px`;
+        tooltipEl.style.left = `${left}px`;
+        tooltipEl.style.opacity = "1";
+        tooltipEl.style.transform = "translateY(0) scale(1)";
       }
     }
+  }
 
-    if (request.type === "RENDER_HIGHLIGHTS") {
-      renderPageHighlights(request.highlights);
+  function handleDocumentClick(e) {
+    if (hoveredItems.length > 0) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const item = hoveredItems[0];
+      const match = activeItems.find((x) => x.item === item);
+      if (match) {
+        const rects = match.range.getClientRects();
+        if (rects.length > 0) {
+          const rect = rects[0];
+          const top = rect.top + window.scrollY;
+          const left = rect.left + window.scrollX;
+          showPopover(hoveredItems, top, left);
+        }
+      }
     }
+  }
 
-    return true;
-  });
+  function refreshPositions() {}
 
-  function showNotification(message, type = "info") {
-    const existing = document.querySelector(".margin-notification");
-    if (existing) existing.remove();
+  function renderBadges(annotations) {
+    if (!sidebarShadow) return;
 
-    const notification = document.createElement("div");
-    notification.className = "margin-notification";
-    notification.textContent = message;
+    const itemsToRender = annotations || [];
+    activeItems = [];
+    const rangesByColor = {};
+
+    const matcher = new DOMTextMatcher();
 
-    const bgColor =
-      type === "success" ? "#10b981" : type === "error" ? "#ef4444" : "#6366f1";
-    notification.style.cssText = `
-            position: fixed;
-            bottom: 24px;
-            right: 24px;
-            padding: 12px 20px;
-            background: ${bgColor};
-            color: white;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-            font-size: 14px;
-            font-weight: 500;
-            border-radius: 8px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-            z-index: 999999;
-            animation: margin-slide-in 0.2s ease;
-        `;
+    itemsToRender.forEach((item) => {
+      const selector = item.target?.selector || item.selector;
+      if (!selector?.exact) return;
+
+      const range = matcher.findRange(selector.exact);
+      if (range) {
+        activeItems.push({ range, item });
 
-    document.body.appendChild(notification);
+        const color = item.color || "#c084fc";
+        if (!rangesByColor[color]) rangesByColor[color] = [];
+        rangesByColor[color].push(range);
+      }
+    });
 
-    setTimeout(() => {
-      notification.style.animation = "margin-slide-out 0.2s ease forwards";
-      setTimeout(() => notification.remove(), 200);
-    }, 3000);
+    if (CSS.highlights) {
+      CSS.highlights.clear();
+      for (const [color, ranges] of Object.entries(rangesByColor)) {
+        const highlight = new Highlight(...ranges);
+        const safeColor = color.replace(/[^a-zA-Z0-9]/g, "");
+        const name = `margin-hl-${safeColor}`;
+        CSS.highlights.set(name, highlight);
+        injectHighlightStyle(name, color);
+      }
+    }
   }
 
-  const style = document.createElement("style");
-  style.textContent = `
-        @keyframes margin-slide-in {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
+  const injectedStyles = new Set();
+  function injectHighlightStyle(name, color) {
+    if (injectedStyles.has(name)) return;
+    const style = document.createElement("style");
+    style.textContent = `
+        ::highlight(${name}) {
+            background-color: ${color}66;
+            color: inherit;
+            cursor: pointer;
         }
-        @keyframes margin-slide-out {
-            from { opacity: 1; transform: translateY(0); }
-            to { opacity: 0; transform: translateY(10px); }
+      `;
+    document.head.appendChild(style);
+    injectedStyles.add(name);
+  }
+
+  function showPopover(items, top, left) {
+    if (popoverEl) popoverEl.remove();
+    const container = sidebarShadow.getElementById("margin-overlay-container");
+    popoverEl = document.createElement("div");
+    popoverEl.className = "margin-popover";
+
+    const popWidth = 320;
+    const screenWidth = window.innerWidth;
+    let finalLeft = left;
+    if (left + popWidth > screenWidth) finalLeft = screenWidth - popWidth - 20;
+
+    popoverEl.style.top = `${top + 20}px`;
+    popoverEl.style.left = `${finalLeft}px`;
+
+    const title =
+      items.length > 1 ? `${items.length} Annotations` : "Annotation";
+
+    let contentHtml = items
+      .map((item) => {
+        const author = item.author || item.creator || {};
+        const handle = author.handle || "User";
+        const avatar = author.avatar;
+        const text = item.body?.value || item.text || "";
+        const quote =
+          item.target?.selector?.exact || item.selector?.exact || "";
+        const id = item.id || item.uri;
+
+        let avatarHtml = `<div class="popover-avatar">${handle[0]?.toUpperCase() || "U"}</div>`;
+        if (avatar) {
+          avatarHtml = `<img src="${avatar}" class="popover-avatar" style="object-fit: cover;">`;
         }
-        ::highlight(margin-highlight-preview) {
-            background-color: rgba(168, 85, 247, 0.3);
-            color: inherit;
+
+        const isHighlight = item.type === "Highlight";
+
+        let bodyHtml = "";
+        if (isHighlight) {
+          bodyHtml = `<div class="popover-text" style="font-style: italic; color: #a1a1aa;">"${quote}"</div>`;
+        } else {
+          bodyHtml = `<div class="popover-text">${text}</div>`;
+          if (quote) {
+            bodyHtml += `<div class="popover-quote">"${quote}"</div>`;
+          }
         }
-        ::highlight(margin-scroll-highlight) {
-            background-color: rgba(99, 102, 241, 0.4);
-            color: inherit;
+
+        return `
+        <div class="popover-item-block">
+            <div class="popover-item-header">
+                <div class="popover-author">
+                    ${avatarHtml}
+                    <span class="popover-handle">@${handle}</span>
+                </div>
+            </div>
+            <div class="popover-content">
+                ${bodyHtml}
+            </div>
+            <div class="popover-actions">
+                ${!isHighlight ? `<button class="btn-action btn-reply" data-id="${id}">Reply</button>` : ""}
+                <button class="btn-action btn-share" data-id="${id}" data-text="${text}" data-quote="${quote}">Share</button>
+            </div>
+        </div>
+        `;
+      })
+      .join("");
+
+    popoverEl.innerHTML = `
+        <div class="popover-header">
+           <span>${title}</span>
+           <button class="popover-close">✕</button>
+        </div>
+        <div class="popover-scroll-area">
+            ${contentHtml}
+        </div>
+      `;
+
+    popoverEl.querySelector(".popover-close").addEventListener("click", () => {
+      popoverEl.remove();
+      popoverEl = null;
+    });
+
+    const replyBtns = popoverEl.querySelectorAll(".btn-reply");
+    replyBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const id = btn.getAttribute("data-id");
+        if (id) {
+          chrome.runtime.sendMessage({
+            type: "OPEN_APP_URL",
+            data: { path: `/annotation/${encodeURIComponent(id)}` },
+          });
         }
-        ::highlight(margin-page-highlights) {
-            background-color: rgba(252, 211, 77, 0.3);
-            color: inherit;
+      });
+    });
+
+    const shareBtns = popoverEl.querySelectorAll(".btn-share");
+    shareBtns.forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        const id = btn.getAttribute("data-id");
+        const text = btn.getAttribute("data-text");
+        const quote = btn.getAttribute("data-quote");
+        const u = `https://margin.at/annotation/${encodeURIComponent(id)}`;
+        const shareText = `${text ? text + "\n" : ""}${quote ? `"${quote}"\n` : ""}${u}`;
+
+        try {
+          await navigator.clipboard.writeText(shareText);
+          const originalText = btn.innerText;
+          btn.innerText = "Copied!";
+          setTimeout(() => (btn.innerText = originalText), 2000);
+        } catch (e) {
+          console.error("Failed to copy", e);
         }
-    `;
-  document.head.appendChild(style);
+      });
+    });
+
+    container.appendChild(popoverEl);
+
+    setTimeout(() => {
+      document.addEventListener("click", closePopoverOutside);
+    }, 0);
+  }
+
+  function closePopoverOutside(e) {
+    if (popoverEl) {
+      popoverEl.remove();
+      popoverEl = null;
+      document.removeEventListener("click", closePopoverOutside);
+    }
+  }
+
+  function fetchAnnotations() {
+    if (typeof chrome !== "undefined" && chrome.runtime) {
+      chrome.runtime.sendMessage(
+        {
+          type: "GET_ANNOTATIONS",
+          data: { url: window.location.href },
+        },
+        (res) => {
+          if (res && res.success) {
+            renderBadges(res.data);
+          }
+        },
+      );
+    }
+  }
+
+  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.type === "GET_SELECTOR_FOR_ANNOTATE_INLINE") {
+      const sel = window.getSelection();
+      if (!sel || !sel.toString()) {
+        sendResponse({ selector: null });
+        return true;
+      }
+      const exact = sel.toString().trim();
+      sendResponse({ selector: { type: "TextQuoteSelector", exact } });
+      return true;
+    }
+
+    if (request.type === "SCROLL_TO_TEXT") {
+      const selector = request.selector;
+      if (selector?.exact) {
+        const matcher = new DOMTextMatcher();
+        const range = matcher.findRange(selector.exact);
+        if (range) {
+          const rect = range.getBoundingClientRect();
+          window.scrollTo({
+            top: window.scrollY + rect.top - window.innerHeight / 3,
+            behavior: "smooth",
+          });
+          const highlight = new Highlight(range);
+          CSS.highlights.set("margin-scroll-flash", highlight);
+          injectHighlightStyle("margin-scroll-flash", "#8b5cf6");
+          setTimeout(() => CSS.highlights.delete("margin-scroll-flash"), 2000);
+        }
+      }
+    }
+    return true;
+  });
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initOverlay);
+  } else {
+    initOverlay();
+  }
 })();

extension/icons/site.webmanifest

···
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "Margin",
+  "short_name": "Margin",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

extension/popup/popup.css

···
 :root {
-  --bg-primary: #0c0a14;
-  --bg-secondary: #14111f;
-  --bg-tertiary: #1a1528;
-  --bg-card: #14111f;
-  --bg-hover: #1e1932;
-
-  --text-primary: #f4f0ff;
-  --text-secondary: #a89ec8;
-  --text-tertiary: #6b5f8a;
-
-  --accent: #a855f7;
-  --accent-hover: #c084fc;
-  --accent-subtle: rgba(168, 85, 247, 0.15);
+  --bg-primary: #09090b;
+  --bg-secondary: #0f0f12;
+  --bg-tertiary: #18181b;
+  --bg-card: #09090b;
+  --bg-elevated: #18181b;
+  --bg-hover: #27272a;
 
-  --border: #2d2640;
-  --border-hover: #3d3560;
+  --text-primary: #e4e4e7;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+  --border: #27272a;
+  --border-hover: #3f3f46;
 
-  --success: #22c55e;
-  --danger: #ef4444;
+  --accent: #6366f1;
+  --accent-hover: #4f46e5;
+  --accent-subtle: rgba(99, 102, 241, 0.1);
+  --accent-text: #818cf8;
+  --success: #10b981;
+  --error: #ef4444;
   --warning: #f59e0b;
 
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 16px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 * {

extension/popup/popup.js

···
       const res = await sendMessage({ type: "CHECK_SESSION" });
 
       if (res.success && res.data?.authenticated) {
-        if (els.userHandle) els.userHandle.textContent = "@" + res.data.handle;
+        if (els.userHandle) {
+          const handle = res.data.handle || res.data.email || "User";
+          els.userHandle.textContent = "@" + handle;
+        }
         els.userInfo.style.display = "flex";
         currentUserDid = res.data.did;
         showView("main");

extension/sidepanel/sidepanel.css

···
 :root {
-  --bg-primary: #0c0a14;
-  --bg-secondary: #110e1c;
-  --bg-tertiary: #1a1528;
-  --bg-card: #14111f;
-  --bg-hover: #1e1932;
-  --bg-elevated: #1a1528;
+  --bg-primary: #09090b;
+  --bg-secondary: #0f0f12;
+  --bg-tertiary: #18181b;
+  --bg-card: #09090b;
+  --bg-hover: #18181b;
+  --bg-elevated: #18181b;
 
-  --text-primary: #f4f0ff;
-  --text-secondary: #a89ec8;
-  --text-tertiary: #6b5f8a;
+  --text-primary: #e4e4e7;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
 
-  --accent: #a855f7;
-  --accent-hover: #c084fc;
-  --accent-subtle: rgba(168, 85, 247, 0.15);
+  --accent: #6366f1;
+  --accent-hover: #4f46e5;
+  --accent-subtle: rgba(99, 102, 241, 0.1);
+  --accent-text: #818cf8;
 
-  --border: #2d2640;
-  --border-hover: #3d3560;
+  --border: #27272a;
+  --border-hover: #3f3f46;
 
-  --success: #22c55e;
+  --success: #10b981;
   --error: #ef4444;
   --warning: #f59e0b;
 
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 16px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
   --radius-full: 9999px;
 
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: var(--bg-primary);
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-primary);
+}
+
+.user-handle {
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--bg-tertiary);
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+}
+
+.current-page-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border);
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-primary);
+  padding: 4px;
+  gap: 4px;
+  margin: 0;
+}
+
+.tab-btn {
+  flex: 1;
+  padding: 10px 8px;
+  background: transparent;
+  border: none;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: all 0.15s;
+}
+
+.tab-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.tab-btn.active {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+  box-shadow: none;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-primary);
+}
+
+.create-form {
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-primary);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border);
+}
+
+.annotation-item {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  background: var(--bg-primary);
+  transition: border-color 0.15s;
+}
+
+.annotation-item:hover {
+  border-color: var(--border-hover);
+  background: var(--bg-hover);
+}
+
+.sidebar-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 5px;
+  border: 2px solid var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
 }
 
 * {

lexicons/at/margin/annotation.json

···
       "key": "tid",
       "record": {
         "type": "object",
-        "required": [
-          "target",
-          "createdAt"
-        ],
+        "required": ["target", "createdAt"],
         "properties": {
           "motivation": {
             "type": "string",
···
     "target": {
       "type": "object",
       "description": "W3C SpecificResource - the target with optional selector",
-      "required": [
-        "source"
-      ],
+      "required": ["source"],
       "properties": {
         "source": {
           "type": "string",
···
     "textQuoteSelector": {
       "type": "object",
       "description": "W3C TextQuoteSelector - select text by quoting it with context",
-      "required": [
-        "exact"
-      ],
+      "required": ["exact"],
       "properties": {
         "type": {
           "type": "string",
···
     "textPositionSelector": {
       "type": "object",
       "description": "W3C TextPositionSelector - select by character offsets",
-      "required": [
-        "start",
-        "end"
-      ],
+      "required": ["start", "end"],
       "properties": {
         "type": {
           "type": "string",
···
     "cssSelector": {
       "type": "object",
       "description": "W3C CssSelector - select DOM elements by CSS selector",
-      "required": [
-        "value"
-      ],
+      "required": ["value"],
       "properties": {
         "type": {
           "type": "string",
···
     "xpathSelector": {
       "type": "object",
       "description": "W3C XPathSelector - select by XPath expression",
-      "required": [
-        "value"
-      ],
+      "required": ["value"],
       "properties": {
         "type": {
           "type": "string",
···
     "fragmentSelector": {
       "type": "object",
       "description": "W3C FragmentSelector - select by URI fragment",
-      "required": [
-        "value"
-      ],
+      "required": ["value"],
       "properties": {
         "type": {
           "type": "string",
···
     "rangeSelector": {
       "type": "object",
       "description": "W3C RangeSelector - select range between two selectors",
-      "required": [
-        "startSelector",
-        "endSelector"
-      ],
+      "required": ["startSelector", "endSelector"],
       "properties": {
         "type": {
           "type": "string",
···
       }
     }
   }
-}
+}

lexicons/at/margin/bookmark.json

···
 {
-    "lexicon": 1,
-    "id": "at.margin.bookmark",
-    "description": "A bookmark record - save URL for later",
-    "defs": {
-        "main": {
-            "type": "record",
-            "description": "A bookmarked URL (motivation: bookmarking)",
-            "key": "tid",
-            "record": {
-                "type": "object",
-                "required": [
-                    "source",
-                    "createdAt"
-                ],
-                "properties": {
-                    "source": {
-                        "type": "string",
-                        "format": "uri",
-                        "description": "The bookmarked URL"
-                    },
-                    "sourceHash": {
-                        "type": "string",
-                        "description": "SHA256 hash of normalized URL for indexing"
-                    },
-                    "title": {
-                        "type": "string",
-                        "maxLength": 500,
-                        "description": "Page title"
-                    },
-                    "description": {
-                        "type": "string",
-                        "maxLength": 1000,
-                        "maxGraphemes": 300,
-                        "description": "Optional description/note"
-                    },
-                    "tags": {
-                        "type": "array",
-                        "description": "Tags for categorization",
-                        "items": {
-                            "type": "string",
-                            "maxLength": 64,
-                            "maxGraphemes": 32
-                        },
-                        "maxLength": 10
-                    },
-                    "createdAt": {
-                        "type": "string",
-                        "format": "datetime"
-                    }
-                }
-            }
+  "lexicon": 1,
+  "id": "at.margin.bookmark",
+  "description": "A bookmark record - save URL for later",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "A bookmarked URL (motivation: bookmarking)",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["source", "createdAt"],
+        "properties": {
+          "source": {
+            "type": "string",
+            "format": "uri",
+            "description": "The bookmarked URL"
+          },
+          "sourceHash": {
+            "type": "string",
+            "description": "SHA256 hash of normalized URL for indexing"
+          },
+          "title": {
+            "type": "string",
+            "maxLength": 500,
+            "description": "Page title"
+          },
+          "description": {
+            "type": "string",
+            "maxLength": 1000,
+            "maxGraphemes": 300,
+            "description": "Optional description/note"
+          },
+          "tags": {
+            "type": "array",
+            "description": "Tags for categorization",
+            "items": {
+              "type": "string",
+              "maxLength": 64,
+              "maxGraphemes": 32
+            },
+            "maxLength": 10
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
         }
+      }
     }
-}
+  }
+}

lexicons/at/margin/collection.json

···
 {
-    "lexicon": 1,
-    "id": "at.margin.collection",
-    "description": "A collection of annotations (like a folder or notebook)",
-    "defs": {
-        "main": {
-            "type": "record",
-            "description": "A named collection for organizing annotations",
-            "key": "tid",
-            "record": {
-                "type": "object",
-                "required": [
-                    "name",
-                    "createdAt"
-                ],
-                "properties": {
-                    "name": {
-                        "type": "string",
-                        "maxLength": 100,
-                        "maxGraphemes": 50,
-                        "description": "Collection name"
-                    },
-                    "description": {
-                        "type": "string",
-                        "maxLength": 500,
-                        "maxGraphemes": 150,
-                        "description": "Collection description"
-                    },
-                    "icon": {
-                        "type": "string",
-                        "maxLength": 10,
-                        "maxGraphemes": 2,
-                        "description": "Emoji icon for the collection"
-                    },
-                    "createdAt": {
-                        "type": "string",
-                        "format": "datetime"
-                    }
-                }
-            }
+  "lexicon": 1,
+  "id": "at.margin.collection",
+  "description": "A collection of annotations (like a folder or notebook)",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "A named collection for organizing annotations",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["name", "createdAt"],
+        "properties": {
+          "name": {
+            "type": "string",
+            "maxLength": 100,
+            "maxGraphemes": 50,
+            "description": "Collection name"
+          },
+          "description": {
+            "type": "string",
+            "maxLength": 500,
+            "maxGraphemes": 150,
+            "description": "Collection description"
+          },
+          "icon": {
+            "type": "string",
+            "maxLength": 10,
+            "maxGraphemes": 2,
+            "description": "Emoji icon for the collection"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
         }
+      }
     }
-}
+  }
+}

lexicons/at/margin/collectionItem.json

···
 {
-    "lexicon": 1,
-    "id": "at.margin.collectionItem",
-    "description": "An item in a collection (links annotation to collection)",
-    "defs": {
-        "main": {
-            "type": "record",
-            "description": "Associates an annotation with a collection",
-            "key": "tid",
-            "record": {
-                "type": "object",
-                "required": [
-                    "collection",
-                    "annotation",
-                    "createdAt"
-                ],
-                "properties": {
-                    "collection": {
-                        "type": "string",
-                        "format": "at-uri",
-                        "description": "AT URI of the collection"
-                    },
-                    "annotation": {
-                        "type": "string",
-                        "format": "at-uri",
-                        "description": "AT URI of the annotation, highlight, or bookmark"
-                    },
-                    "position": {
-                        "type": "integer",
-                        "minimum": 0,
-                        "description": "Sort order within the collection"
-                    },
-                    "createdAt": {
-                        "type": "string",
-                        "format": "datetime"
-                    }
-                }
-            }
+  "lexicon": 1,
+  "id": "at.margin.collectionItem",
+  "description": "An item in a collection (links annotation to collection)",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "Associates an annotation with a collection",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["collection", "annotation", "createdAt"],
+        "properties": {
+          "collection": {
+            "type": "string",
+            "format": "at-uri",
+            "description": "AT URI of the collection"
+          },
+          "annotation": {
+            "type": "string",
+            "format": "at-uri",
+            "description": "AT URI of the annotation, highlight, or bookmark"
+          },
+          "position": {
+            "type": "integer",
+            "minimum": 0,
+            "description": "Sort order within the collection"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
         }
+      }
     }
-}
+  }
+}

lexicons/at/margin/highlight.json

···
 {
-    "lexicon": 1,
-    "id": "at.margin.highlight",
-    "description": "A lightweight highlight record - annotation without body text",
-    "defs": {
-        "main": {
-            "type": "record",
-            "description": "A highlight on a web page (motivation: highlighting)",
-            "key": "tid",
-            "record": {
-                "type": "object",
-                "required": [
-                    "target",
-                    "createdAt"
-                ],
-                "properties": {
-                    "target": {
-                        "type": "ref",
-                        "ref": "at.margin.annotation#target",
-                        "description": "The resource and segment being highlighted"
-                    },
-                    "color": {
-                        "type": "string",
-                        "description": "Highlight color (hex or named)",
-                        "maxLength": 20
-                    },
-                    "tags": {
-                        "type": "array",
-                        "description": "Tags for categorization",
-                        "items": {
-                            "type": "string",
-                            "maxLength": 64,
-                            "maxGraphemes": 32
-                        },
-                        "maxLength": 10
-                    },
-                    "createdAt": {
-                        "type": "string",
-                        "format": "datetime"
-                    }
-                }
-            }
+  "lexicon": 1,
+  "id": "at.margin.highlight",
+  "description": "A lightweight highlight record - annotation without body text",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "A highlight on a web page (motivation: highlighting)",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["target", "createdAt"],
+        "properties": {
+          "target": {
+            "type": "ref",
+            "ref": "at.margin.annotation#target",
+            "description": "The resource and segment being highlighted"
+          },
+          "color": {
+            "type": "string",
+            "description": "Highlight color (hex or named)",
+            "maxLength": 20
+          },
+          "tags": {
+            "type": "array",
+            "description": "Tags for categorization",
+            "items": {
+              "type": "string",
+              "maxLength": 64,
+              "maxGraphemes": 32
+            },
+            "maxLength": 10
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
         }
+      }
     }
-}
+  }
+}

lexicons/at/margin/like.json

···
 {
-    "lexicon": 1,
-    "id": "at.margin.like",
-    "defs": {
-        "main": {
-            "type": "record",
-            "description": "A like on an annotation or reply",
-            "key": "tid",
-            "record": {
-                "type": "object",
-                "required": [
-                    "subject",
-                    "createdAt"
-                ],
-                "properties": {
-                    "subject": {
-                        "type": "ref",
-                        "ref": "#subjectRef",
-                        "description": "Reference to the annotation or reply being liked"
-                    },
-                    "createdAt": {
-                        "type": "string",
-                        "format": "datetime"
-                    }
-                }
-            }
+  "lexicon": 1,
+  "id": "at.margin.like",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "A like on an annotation or reply",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["subject", "createdAt"],
+        "properties": {
+          "subject": {
+            "type": "ref",
+            "ref": "#subjectRef",
+            "description": "Reference to the annotation or reply being liked"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      }
+    },
+    "subjectRef": {
+      "type": "object",
+      "required": ["uri", "cid"],
+      "properties": {
+        "uri": {
+          "type": "string",
+          "format": "at-uri"
         },
-        "subjectRef": {
-            "type": "object",
-            "required": [
-                "uri",
-                "cid"
-            ],
-            "properties": {
-                "uri": {
-                    "type": "string",
-                    "format": "at-uri"
-                },
-                "cid": {
-                    "type": "string",
-                    "format": "cid"
-                }
-            }
+        "cid": {
+          "type": "string",
+          "format": "cid"
         }
+      }
     }
-}
+  }
+}

lexicons/at/margin/reply.json

···
 {
-    "lexicon": 1,
-    "id": "at.margin.reply",
-    "revision": 2,
-    "description": "A reply to an annotation or another reply",
-    "defs": {
-        "main": {
-            "type": "record",
-            "description": "A reply to an annotation (motivation: replying)",
-            "key": "tid",
-            "record": {
-                "type": "object",
-                "required": [
-                    "parent",
-                    "root",
-                    "text",
-                    "createdAt"
-                ],
-                "properties": {
-                    "parent": {
-                        "type": "ref",
-                        "ref": "#replyRef",
-                        "description": "Reference to the parent annotation or reply"
-                    },
-                    "root": {
-                        "type": "ref",
-                        "ref": "#replyRef",
-                        "description": "Reference to the root annotation of the thread"
-                    },
-                    "text": {
-                        "type": "string",
-                        "maxLength": 10000,
-                        "maxGraphemes": 3000,
-                        "description": "Reply text content"
-                    },
-                    "format": {
-                        "type": "string",
-                        "description": "MIME type of the text content",
-                        "default": "text/plain"
-                    },
-                    "createdAt": {
-                        "type": "string",
-                        "format": "datetime"
-                    }
-                }
-            }
+  "lexicon": 1,
+  "id": "at.margin.reply",
+  "revision": 2,
+  "description": "A reply to an annotation or another reply",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "A reply to an annotation (motivation: replying)",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["parent", "root", "text", "createdAt"],
+        "properties": {
+          "parent": {
+            "type": "ref",
+            "ref": "#replyRef",
+            "description": "Reference to the parent annotation or reply"
+          },
+          "root": {
+            "type": "ref",
+            "ref": "#replyRef",
+            "description": "Reference to the root annotation of the thread"
+          },
+          "text": {
+            "type": "string",
+            "maxLength": 10000,
+            "maxGraphemes": 3000,
+            "description": "Reply text content"
+          },
+          "format": {
+            "type": "string",
+            "description": "MIME type of the text content",
+            "default": "text/plain"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      }
+    },
+    "replyRef": {
+      "type": "object",
+      "description": "Strong reference to an annotation or reply",
+      "required": ["uri", "cid"],
+      "properties": {
+        "uri": {
+          "type": "string",
+          "format": "at-uri"
         },
-        "replyRef": {
-            "type": "object",
-            "description": "Strong reference to an annotation or reply",
-            "required": [
-                "uri",
-                "cid"
-            ],
-            "properties": {
-                "uri": {
-                    "type": "string",
-                    "format": "at-uri"
-                },
-                "cid": {
-                    "type": "string",
-                    "format": "cid"
-                }
-            }
+        "cid": {
+          "type": "string",
+          "format": "cid"
         }
+      }
     }
-}
+  }
+}

web/src/App.jsx

···
 import { Routes, Route } from "react-router-dom";
 import { AuthProvider } from "./context/AuthContext";
-import Navbar from "./components/Navbar";
+import Sidebar from "./components/Sidebar";
+import RightSidebar from "./components/RightSidebar";
+import MobileNav from "./components/MobileNav";
 import Feed from "./pages/Feed";
 import Url from "./pages/Url";
 import Profile from "./pages/Profile";
···
 import CollectionDetail from "./pages/CollectionDetail";
 import Privacy from "./pages/Privacy";
 
+import Terms from "./pages/Terms";
+
 function AppContent() {
   return (
-    <div className="app">
-      <Navbar />
-      <main className="main-content">
-        <Routes>
-          <Route path="/" element={<Feed />} />
-          <Route path="/url" element={<Url />} />
-          <Route path="/new" element={<New />} />
-          <Route path="/bookmarks" element={<Bookmarks />} />
-          <Route path="/highlights" element={<Highlights />} />
-          <Route path="/notifications" element={<Notifications />} />
-          <Route path="/profile/:handle" element={<Profile />} />
-          <Route path="/login" element={<Login />} />
-          {}
-          <Route path="/at/:did/:rkey" element={<AnnotationDetail />} />
-          {}
-          <Route path="/annotation/:uri" element={<AnnotationDetail />} />
-          <Route path="/collections" element={<Collections />} />
-          <Route path="/collections/:rkey" element={<CollectionDetail />} />
-          <Route
-            path="/:handle/collection/:rkey"
-            element={<CollectionDetail />}
-          />
-
-          <Route
-            path="/:handle/annotation/:rkey"
-            element={<AnnotationDetail />}
-          />
-          <Route
-            path="/:handle/highlight/:rkey"
-            element={<AnnotationDetail />}
-          />
-          <Route
-            path="/:handle/bookmark/:rkey"
-            element={<AnnotationDetail />}
-          />
-
-          <Route path="/collection/*" element={<CollectionDetail />} />
-          <Route path="/privacy" element={<Privacy />} />
-        </Routes>
-      </main>
+    <div className="layout">
+      <Sidebar />
+      <div className="main-layout">
+        <main className="main-content-wrapper">
+          <Routes>
+            <Route path="/" element={<Feed />} />
+            <Route path="/url" element={<Url />} />
+            <Route path="/new" element={<New />} />
+            <Route path="/bookmarks" element={<Bookmarks />} />
+            <Route path="/highlights" element={<Highlights />} />
+            <Route path="/notifications" element={<Notifications />} />
+            <Route path="/profile/:handle" element={<Profile />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/at/:did/:rkey" element={<AnnotationDetail />} />
+            <Route path="/annotation/:uri" element={<AnnotationDetail />} />
+            <Route path="/collections" element={<Collections />} />
+            <Route path="/collections/:rkey" element={<CollectionDetail />} />
+            <Route
+              path="/:handle/collection/:rkey"
+              element={<CollectionDetail />}
+            />
+            <Route
+              path="/:handle/annotation/:rkey"
+              element={<AnnotationDetail />}
+            />
+            <Route
+              path="/:handle/highlight/:rkey"
+              element={<AnnotationDetail />}
+            />
+            <Route
+              path="/:handle/bookmark/:rkey"
+              element={<AnnotationDetail />}
+            />
+            <Route path="/collection/*" element={<CollectionDetail />} />
+            <Route path="/privacy" element={<Privacy />} />
+            <Route path="/terms" element={<Terms />} />
+          </Routes>
+        </main>
+      </div>
+      <RightSidebar />
+      <MobileNav />
     </div>
   );
 }

web/src/api/client.js

···
     body: JSON.stringify({ handle, invite_code: inviteCode }),
   });
 }
+export async function getTrendingTags(limit = 10) {
+  return request(`${API_BASE}/tags/trending?limit=${limit}`);
+}

web/src/assets/tangled.svg

···
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="24.122343"
+   height="23.274094"
+   viewBox="0 0 24.122343 23.274094"
+   sodipodi:docname="tangled_dolly_face_only.svg"
+   inkscape:export-filename="tangled_logotype_black_on_trans.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       inkscape:menu-tooltip="Fades hue progressively to white"
+       inkscape:menu="Color"
+       inkscape:label="Hue to White"
+       id="filter24"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1 "
+         type="matrix"
+         result="r"
+         in="SourceGraphic"
+         id="feColorMatrix17" />
+      <feColorMatrix
+         values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 "
+         type="matrix"
+         result="g"
+         in="SourceGraphic"
+         id="feColorMatrix18" />
+      <feColorMatrix
+         values="0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1 "
+         type="matrix"
+         result="b"
+         in="SourceGraphic"
+         id="feColorMatrix19" />
+      <feBlend
+         result="minrg"
+         in="r"
+         mode="darken"
+         in2="g"
+         id="feBlend19" />
+      <feBlend
+         result="p"
+         in="minrg"
+         mode="darken"
+         in2="b"
+         id="feBlend20" />
+      <feBlend
+         result="maxrg"
+         in="r"
+         mode="lighten"
+         in2="g"
+         id="feBlend21" />
+      <feBlend
+         result="q"
+         in="maxrg"
+         mode="lighten"
+         in2="b"
+         id="feBlend22" />
+      <feComponentTransfer
+         result="q2"
+         in="q"
+         id="feComponentTransfer22">
+        <feFuncR
+           slope="0"
+           type="linear"
+           id="feFuncR22" />
+      </feComponentTransfer>
+      <feBlend
+         result="pq"
+         in="p"
+         mode="lighten"
+         in2="q2"
+         id="feBlend23" />
+      <feColorMatrix
+         values="-1 1 0 0 0 -1 1 0 0 0 -1 1 0 0 0 0 0 0 0 1 "
+         type="matrix"
+         result="qminp"
+         in="pq"
+         id="feColorMatrix23" />
+      <feComposite
+         k3="1"
+         operator="arithmetic"
+         result="qminpc"
+         in="qminp"
+         in2="qminp"
+         id="feComposite23"
+         k1="0"
+         k2="0"
+         k4="0" />
+      <feBlend
+         result="result2"
+         in2="SourceGraphic"
+         mode="screen"
+         id="feBlend24" />
+      <feComposite
+         operator="in"
+         in="result2"
+         in2="SourceGraphic"
+         result="result1"
+         id="feComposite24" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d5d5d5"
+     inkscape:zoom="7.0916564"
+     inkscape:cx="38.84847"
+     inkscape:cy="31.515909"
+     inkscape:window-width="1920"
+     inkscape:window-height="1080"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g1">
+    <inkscape:page
+       x="0"
+       y="0"
+       width="24.122343"
+       height="23.274094"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g1"
+     transform="translate(-0.4388285,-0.8629527)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.111183;filter:url(#filter24)"
+       d="m 16.348974,24.09935 -0.06485,-0.03766 -0.202005,-0.0106 -0.202008,-0.01048 -0.275736,-0.02601 -0.275734,-0.02602 v -0.02649 -0.02648 l -0.204577,-0.04019 -0.204578,-0.04019 -0.167616,-0.08035 -0.167617,-0.08035 -0.0014,-0.04137 -0.0014,-0.04137 -0.266473,-0.143735 -0.266475,-0.143735 -0.276098,-0.20335 -0.2761,-0.203347 -0.262064,-0.251949 -0.262064,-0.25195 -0.22095,-0.284628 -0.220948,-0.284629 -0.170253,-0.284631 -0.170252,-0.284628 -0.01341,-0.0144 -0.0134,-0.0144 -0.141982,0.161297 -0.14198,0.1613 -0.22313,0.21426 -0.223132,0.214264 -0.186025,0.146053 -0.186023,0.14605 -0.252501,0.163342 -0.252502,0.163342 -0.249014,0.115348 -0.249013,0.115336 0.0053,0.03241 0.0053,0.03241 -0.1716725,0.04599 -0.171669,0.046 -0.3379966,0.101058 -0.3379972,0.101058 -0.1778925,0.04506 -0.1778935,0.04508 -0.3913655,0.02601 -0.3913643,0.02603 -0.3557868,-0.03514 -0.3557863,-0.03514 -0.037426,-0.03029 -0.037427,-0.03029 -0.076924,0.02011 -0.076924,0.02011 -0.050508,-0.05051 -0.050405,-0.05056 L 6.6604532,23.110188 6.451745,23.063961 6.1546135,22.960559 5.8574835,22.857156 5.5319879,22.694039 5.2064938,22.530922 4.8793922,22.302961 4.5522905,22.075005 4.247598,21.786585 3.9429055,21.49817 3.7185335,21.208777 3.4941628,20.919385 3.3669822,20.705914 3.239803,20.492443 3.1335213,20.278969 3.0272397,20.065499 2.9015252,19.7275 2.7758105,19.389504 2.6925225,18.998139 2.6092345,18.606774 2.6096814,17.91299 2.6101284,17.219208 2.6744634,16.90029 2.7387984,16.581374 2.8474286,16.242088 2.9560588,15.9028 3.1137374,15.583492 3.2714148,15.264182 3.3415068,15.150766 3.4115988,15.03735 3.3127798,14.96945 3.2139618,14.90157 3.0360685,14.800239 2.8581753,14.698908 2.5913347,14.503228 2.3244955,14.307547 2.0621238,14.055599 1.7997507,13.803651 1.6111953,13.56878 1.4226411,13.333906 1.2632237,13.087474 1.1038089,12.841042 0.97442,12.575195 0.8450307,12.30935 0.724603,11.971351 0.6041766,11.633356 0.52150365,11.241991 0.4388285,10.850626 0.44091592,10.156842 0.44300333,9.4630594 0.54235911,9.0369608 0.6417149,8.6108622 0.7741173,8.2694368 0.9065196,7.9280115 1.0736303,7.6214262 1.2407515,7.3148397 1.45931,7.0191718 1.6778685,6.7235039 1.9300326,6.4611321 2.1821966,6.1987592 2.4134579,6.0137228 2.6447193,5.8286865 2.8759792,5.6776409 3.1072406,5.526594 3.4282004,5.3713977 3.7491603,5.2162016 3.9263009,5.1508695 4.1034416,5.0855373 4.2813348,4.7481598 4.4592292,4.4107823 4.6718,4.108422 4.8843733,3.8060618 5.198353,3.4805372 5.5123313,3.155014 5.7685095,2.9596425 6.0246877,2.7642722 6.329187,2.5851365 6.6336863,2.406002 6.9497657,2.2751596 7.2658453,2.1443184 7.4756394,2.0772947 7.6854348,2.01027 8.0825241,1.931086 8.4796139,1.851902 l 0.5870477,0.00291 0.5870469,0.00291 0.4447315,0.092455 0.444734,0.092455 0.302419,0.1105495 0.302417,0.1105495 0.329929,0.1646046 0.32993,0.1646033 0.239329,-0.2316919 0.239329,-0.2316919 0.160103,-0.1256767 0.160105,-0.1256767 0.160102,-0.1021909 0.160105,-0.1021899 0.142315,-0.082328 0.142314,-0.082328 0.231262,-0.1090091 0.231259,-0.1090091 0.26684,-0.098743 0.266839,-0.098743 0.320208,-0.073514 0.320209,-0.073527 0.355787,-0.041833 0.355785,-0.041834 0.426942,0.023827 0.426945,0.023828 0.355785,0.071179 0.355788,0.0711791 0.284627,0.09267 0.284629,0.09267 0.28514,0.1310267 0.28514,0.1310255 0.238179,0.1446969 0.238174,0.1446979 0.259413,0.1955332 0.259413,0.1955319 0.290757,0.296774 0.290758,0.2967753 0.151736,0.1941581 0.151734,0.1941594 0.135326,0.2149951 0.135327,0.2149952 0.154755,0.3202073 0.154758,0.3202085 0.09409,0.2677358 0.09409,0.267737 0.06948,0.3319087 0.06948,0.3319099 0.01111,0.00808 0.01111,0.00808 0.444734,0.2173653 0.444734,0.2173665 0.309499,0.2161102 0.309497,0.2161101 0.309694,0.2930023 0.309694,0.2930037 0.18752,0.2348726 0.187524,0.2348727 0.166516,0.2574092 0.166519,0.2574108 0.15273,0.3260252 0.152734,0.3260262 0.08972,0.2668403 0.08971,0.2668391 0.08295,0.3913655 0.08295,0.3913652 -6.21e-4,0.6582049 -6.21e-4,0.658204 -0.06362,0.315725 -0.06362,0.315725 -0.09046,0.289112 -0.09046,0.289112 -0.122759,0.281358 -0.12276,0.281356 -0.146626,0.252323 -0.146629,0.252322 -0.190443,0.258668 -0.190448,0.258671 -0.254911,0.268356 -0.254911,0.268355 -0.286872,0.223127 -0.286874,0.223127 -0.320203,0.187693 -0.320209,0.187693 -0.04347,0.03519 -0.04347,0.03521 0.0564,0.12989 0.0564,0.129892 0.08728,0.213472 0.08728,0.213471 0.189755,0.729363 0.189753,0.729362 0.0652,0.302417 0.0652,0.302419 -0.0018,0.675994 -0.0018,0.675995 -0.0801,0.373573 -0.08009,0.373577 -0.09,0.266839 -0.09,0.26684 -0.190389,0.391364 -0.19039,0.391366 -0.223169,0.320207 -0.223167,0.320209 -0.303585,0.315294 -0.303584,0.315291 -0.284631,0.220665 -0.284629,0.220663 -0.220128,0.132359 -0.220127,0.132358 -0.242395,0.106698 -0.242394,0.106699 -0.08895,0.04734 -0.08895,0.04733 -0.249052,0.07247 -0.24905,0.07247 -0.322042,0.0574 -0.322044,0.0574 -0.282794,-0.003 -0.282795,-0.003 -0.07115,-0.0031 -0.07115,-0.0031 -0.177894,-0.0033 -0.177893,-0.0033 -0.124528,0.02555 -0.124528,0.02555 z m -4.470079,-5.349839 0.214838,-0.01739 0.206601,-0.06782 0.206602,-0.06782 0.244389,-0.117874 0.244393,-0.11786 0.274473,-0.206822 0.27447,-0.20682 0.229308,-0.257201 0.229306,-0.2572 0.219161,-0.28463 0.219159,-0.284629 0.188541,-0.284628 0.188543,-0.28463 0.214594,-0.373574 0.214593,-0.373577 0.133861,-0.312006 0.133865,-0.312007 0.02861,-0.01769 0.02861,-0.01769 0.197275,0.26212 0.197278,0.262119 0.163613,0.150814 0.163614,0.150814 0.201914,0.09276 0.201914,0.09276 0.302417,0.01421 0.302418,0.01421 0.213472,-0.08025 0.213471,-0.08025 0.200606,-0.204641 0.200606,-0.204642 0.09242,-0.278887 0.09241,-0.278888 0.05765,-0.302418 0.05764,-0.302416 L 18.41327,13.768114 18.39502,13.34117 18.31849,12.915185 18.24196,12.4892 18.15595,12.168033 18.06994,11.846867 17.928869,11.444534 17.787801,11.042201 17.621278,10.73296 17.454757,10.423723 17.337388,10.263619 17.220021,10.103516 17.095645,9.9837986 16.971268,9.8640816 16.990048,9.6813736 17.008828,9.4986654 16.947568,9.249616 16.886308,9.0005655 16.752419,8.7159355 16.618521,8.4313217 16.435707,8.2294676 16.252892,8.0276114 16.079629,7.9004245 15.906366,7.773238 l -0.20429,0.1230127 -0.204289,0.1230121 -0.26702,0.059413 -0.267022,0.059413 -0.205761,-0.021508 -0.205766,-0.021508 -0.23495,-0.08844 -0.234953,-0.08844 -0.118429,-0.090334 -0.118428,-0.090333 h -0.03944 -0.03944 L 13.711268,7.8540732 13.655958,7.9706205 13.497227,8.1520709 13.338499,8.3335203 13.168394,8.4419112 12.998289,8.550301 12.777045,8.624223 12.5558,8.698155 H 12.275611 11.995429 L 11.799973,8.6309015 11.604513,8.5636472 11.491311,8.5051061 11.37811,8.446565 11.138172,8.2254579 10.898231,8.0043497 l -0.09565,-0.084618 -0.09565,-0.084613 -0.218822,0.198024 -0.218822,0.1980231 -0.165392,0.078387 -0.1653925,0.078387 -0.177894,0.047948 -0.177892,0.047948 L 9.3635263,8.4842631 9.144328,8.4846889 8.9195029,8.4147138 8.6946778,8.3447386 8.5931214,8.4414036 8.491565,8.5380686 8.3707618,8.7019598 8.2499597,8.8658478 8.0802403,8.9290726 7.9105231,8.9922974 7.7952769,9.0780061 7.6800299,9.1637148 7.5706169,9.2778257 7.4612038,9.3919481 7.1059768,9.9205267 6.7507497,10.449105 l -0.2159851,0.449834 -0.2159839,0.449834 -0.2216572,0.462522 -0.2216559,0.462523 -0.1459343,0.337996 -0.1459342,0.337998 -0.055483,0.220042 -0.055483,0.220041 -0.015885,0.206903 -0.015872,0.206901 0.034307,0.242939 0.034307,0.24294 0.096281,0.196632 0.096281,0.196634 0.143607,0.125222 0.1436071,0.125222 0.1873143,0.08737 0.1873141,0.08737 0.2752084,0.002 0.2752084,0.002 0.2312297,-0.09773 0.231231,-0.09772 0.1067615,-0.07603 0.1067614,-0.07603 0.3679062,-0.29377 0.3679065,-0.293771 0.026804,0.01656 0.026804,0.01656 0.023626,0.466819 0.023626,0.466815 0.088326,0.513195 0.088326,0.513193 0.08897,0.364413 0.08897,0.364411 0.1315362,0.302418 0.1315352,0.302418 0.1051964,0.160105 0.1051954,0.160103 0.1104741,0.11877 0.1104731,0.118769 0.2846284,0.205644 0.2846305,0.205642 0.144448,0.07312 0.144448,0.07312 0.214787,0.05566 0.214787,0.05566 0.245601,0.03075 0.245602,0.03075 0.204577,-0.0125 0.204578,-0.0125 z m 0.686342,-3.497495 -0.11281,-0.06077 -0.106155,-0.134033 -0.106155,-0.134031 -0.04406,-0.18371 -0.04406,-0.183707 0.02417,-0.553937 0.02417,-0.553936 0.03513,-0.426945 0.03513,-0.426942 0.07225,-0.373576 0.07225,-0.373575 0.05417,-0.211338 0.05417,-0.211339 0.0674,-0.132112 0.0674,-0.132112 0.132437,-0.10916 0.132437,-0.109161 0.187436,-0.04195 0.187438,-0.04195 0.170366,0.06469 0.170364,0.06469 0.114312,0.124073 0.114313,0.124086 0.04139,0.18495 0.04139,0.184951 -0.111218,0.459845 -0.111219,0.459844 -0.03383,0.26584 -0.03382,0.265841 -0.03986,0.818307 -0.03986,0.818309 -0.0378,0.15162 -0.03779,0.151621 -0.11089,0.110562 -0.110891,0.110561 -0.114489,0.04913 -0.114489,0.04913 -0.187932,-0.0016 -0.187929,-0.0016 z m -2.8087655,-0.358124 -0.146445,-0.06848 -0.088025,-0.119502 -0.088024,-0.119502 -0.038581,-0.106736 -0.038581,-0.106736 -0.02237,-0.134956 -0.02239,-0.134957 -0.031955,-0.46988 -0.031955,-0.469881 0.036203,-0.444733 0.036203,-0.444731 0.048862,-0.215257 0.048862,-0.215255 0.076082,-0.203349 0.076081,-0.203348 0.0936,-0.111244 0.0936,-0.111245 0.143787,-0.06531 0.1437865,-0.06532 h 0.142315 0.142314 l 0.142314,0.06588 0.142316,0.06588 0.093,0.102325 0.093,0.102325 0.04042,0.120942 0.04042,0.120942 v 0.152479 0.152477 l -0.03347,0.08804 -0.03347,0.08805 -0.05693,0.275653 -0.05693,0.275651 2.11e-4,0.430246 2.12e-4,0.430243 0.04294,0.392646 0.04295,0.392647 -0.09189,0.200702 -0.09189,0.200702 -0.148688,0.0984 -0.148687,0.0984 -0.20136,0.01212 -0.2013595,0.01212 z"
+       id="path4" />
+  </g>
+</svg>

web/src/components/AnnotationSkeleton.jsx

···
+import React from "react";
+
+export default function AnnotationSkeleton() {
+  return (
+    <div className="skeleton-card">
+      <div className="skeleton-header">
+        <div className="skeleton skeleton-avatar" />
+        <div className="skeleton-meta">
+          <div className="skeleton skeleton-name" />
+          <div className="skeleton skeleton-handle" />
+        </div>
+      </div>
+
+      <div className="skeleton-content">
+        <div className="skeleton skeleton-source" />
+        <div className="skeleton skeleton-highlight" />
+        <div className="skeleton skeleton-text-1" />
+        <div className="skeleton skeleton-text-2" />
+      </div>
+
+      <div className="skeleton-actions">
+        <div className="skeleton skeleton-action" />
+        <div className="skeleton skeleton-action" />
+        <div className="skeleton skeleton-action" />
+      </div>
+    </div>
+  );
+}

web/src/components/MobileNav.jsx

···
+import { Link, useLocation } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+import { Home, Search, Folder, User, PenSquare } from "lucide-react";
+
+export default function MobileNav() {
+  const { user, isAuthenticated } = useAuth();
+  const location = useLocation();
+
+  const isActive = (path) => {
+    if (path === "/") return location.pathname === "/";
+    return location.pathname.startsWith(path);
+  };
+
+  return (
+    <nav className="mobile-nav">
+      <div className="mobile-nav-inner">
+        <Link
+          to="/"
+          className={`mobile-nav-item ${isActive("/") ? "active" : ""}`}
+        >
+          <Home />
+          <span>Home</span>
+        </Link>
+
+        <Link
+          to="/url"
+          className={`mobile-nav-item ${isActive("/url") ? "active" : ""}`}
+        >
+          <Search />
+          <span>Browse</span>
+        </Link>
+
+        {isAuthenticated ? (
+          <Link to="/new" className="mobile-nav-item mobile-nav-new">
+            <PenSquare />
+          </Link>
+        ) : (
+          <Link to="/login" className="mobile-nav-item mobile-nav-new">
+            <User />
+          </Link>
+        )}
+
+        <Link
+          to="/collections"
+          className={`mobile-nav-item ${isActive("/collections") ? "active" : ""}`}
+        >
+          <Folder />
+          <span>Library</span>
+        </Link>
+
+        <Link
+          to={isAuthenticated && user?.did ? `/profile/${user.did}` : "/login"}
+          className={`mobile-nav-item ${isActive("/profile") ? "active" : ""}`}
+        >
+          <User />
+          <span>Profile</span>
+        </Link>
+      </div>
+    </nav>
+  );
+}

web/src/components/Navbar.jsx

···
-import { useState, useRef, useEffect } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { Folder } from "lucide-react";
-import { useAuth } from "../context/AuthContext";
-import {
-  PenIcon,
-  BookmarkIcon,
-  HighlightIcon,
-  SearchIcon,
-  LogoutIcon,
-  BellIcon,
-} from "./Icons";
-import { getUnreadNotificationCount } from "../api/client";
-import { SiFirefox, SiGooglechrome } from "react-icons/si";
-import { FaEdge } from "react-icons/fa";
-
-import logo from "../assets/logo.svg";
-
-const isFirefox =
-  typeof navigator !== "undefined" && /Firefox/i.test(navigator.userAgent);
-const isEdge =
-  typeof navigator !== "undefined" && /Edg/i.test(navigator.userAgent);
-const isChrome =
-  typeof navigator !== "undefined" &&
-  /Chrome/i.test(navigator.userAgent) &&
-  !isEdge;
-
-export default function Navbar() {
-  const { user, isAuthenticated, logout, loading } = useAuth();
-  const location = useLocation();
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [unreadCount, setUnreadCount] = useState(0);
-  const menuRef = useRef(null);
-
-  const isActive = (path) => location.pathname === path;
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      getUnreadNotificationCount()
-        .then((data) => setUnreadCount(data.count || 0))
-        .catch(() => {});
-      const interval = setInterval(() => {
-        getUnreadNotificationCount()
-          .then((data) => setUnreadCount(data.count || 0))
-          .catch(() => {});
-      }, 60000);
-      return () => clearInterval(interval);
-    }
-  }, [isAuthenticated]);
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)) {
-        setMenuOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const getInitials = () => {
-    if (user?.displayName) {
-      return user.displayName.substring(0, 2).toUpperCase();
-    }
-    if (user?.handle) {
-      return user.handle.substring(0, 2).toUpperCase();
-    }
-    return "U";
-  };
-
-  return (
-    <nav className="navbar">
-      <div className="navbar-inner">
-        {}
-        <Link to="/" className="navbar-brand">
-          <img src={logo} alt="Margin Logo" className="navbar-logo-img" />
-          <span className="navbar-title">Margin</span>
-        </Link>
-
-        {}
-        <div className="navbar-center">
-          <Link
-            to="/"
-            className={`navbar-link ${isActive("/") ? "active" : ""}`}
-          >
-            Feed
-          </Link>
-          <Link
-            to="/url"
-            className={`navbar-link ${isActive("/url") ? "active" : ""}`}
-          >
-            <SearchIcon size={16} />
-            Browse
-          </Link>
-          {isFirefox ? (
-            <a
-              href="https://addons.mozilla.org/en-US/firefox/addon/margin/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="navbar-link navbar-extension-link"
-            >
-              <SiFirefox size={16} />
-              Get Extension
-            </a>
-          ) : isEdge ? (
-            <a
-              href="https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="navbar-link navbar-extension-link"
-            >
-              <FaEdge size={16} />
-              Get Extension
-            </a>
-          ) : isChrome ? (
-            <a
-              href="https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="navbar-link navbar-extension-link"
-            >
-              <SiGooglechrome size={16} />
-              Get Extension
-            </a>
-          ) : (
-            <a
-              href="https://addons.mozilla.org/en-US/firefox/addon/margin/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="navbar-link navbar-extension-link"
-            >
-              <SiFirefox size={16} />
-              Get Extension
-            </a>
-          )}
-        </div>
-
-        {}
-        <div className="navbar-right">
-          {!loading &&
-            (isAuthenticated ? (
-              <>
-                <Link
-                  to="/highlights"
-                  className={`navbar-icon-link ${isActive("/highlights") ? "active" : ""}`}
-                  title="Highlights"
-                >
-                  <HighlightIcon size={20} />
-                </Link>
-                <Link
-                  to="/bookmarks"
-                  className={`navbar-icon-link ${isActive("/bookmarks") ? "active" : ""}`}
-                  title="Bookmarks"
-                >
-                  <BookmarkIcon size={20} />
-                </Link>
-                <Link
-                  to="/collections"
-                  className={`navbar-icon-link ${isActive("/collections") ? "active" : ""}`}
-                  title="Collections"
-                >
-                  <Folder size={20} />
-                </Link>
-                <Link
-                  to="/notifications"
-                  className={`navbar-icon-link notification-link ${isActive("/notifications") ? "active" : ""}`}
-                  title="Notifications"
-                  onClick={() => setUnreadCount(0)}
-                >
-                  <BellIcon size={20} />
-                  {unreadCount > 0 && (
-                    <span className="notification-badge">{unreadCount}</span>
-                  )}
-                </Link>
-                <Link
-                  to="/new"
-                  className="navbar-new-btn"
-                  title="New Annotation"
-                >
-                  <PenIcon size={16} />
-                  <span>New</span>
-                </Link>
-
-                {}
-                <div className="navbar-user-menu" ref={menuRef}>
-                  <button
-                    className="navbar-avatar-btn"
-                    onClick={() => setMenuOpen(!menuOpen)}
-                    title={user?.handle}
-                  >
-                    {user?.avatar ? (
-                      <img
-                        src={user.avatar}
-                        alt={user.displayName}
-                        className="navbar-avatar-img"
-                      />
-                    ) : (
-                      <span className="navbar-avatar-text">
-                        {getInitials()}
-                      </span>
-                    )}
-                  </button>
-
-                  {menuOpen && (
-                    <div className="navbar-dropdown">
-                      <div className="navbar-dropdown-header">
-                        <span className="navbar-dropdown-name">
-                          {user?.displayName}
-                        </span>
-                        <span className="navbar-dropdown-handle">
-                          @{user?.handle}
-                        </span>
-                      </div>
-                      <div className="navbar-dropdown-divider" />
-                      <Link
-                        to={`/profile/${user?.did}`}
-                        className="navbar-dropdown-item"
-                        onClick={() => setMenuOpen(false)}
-                      >
-                        View Profile
-                      </Link>
-                      <button
-                        onClick={() => {
-                          logout();
-                          setMenuOpen(false);
-                        }}
-                        className="navbar-dropdown-item navbar-dropdown-logout"
-                      >
-                        <LogoutIcon size={16} />
-                        Sign Out
-                      </button>
-                    </div>
-                  )}
-                </div>
-              </>
-            ) : (
-              <Link to="/login" className="navbar-signin">
-                Sign In
-              </Link>
-            ))}
-        </div>
-      </div>
-    </nav>
-  );
-}

web/src/components/RightSidebar.jsx

···
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { Download, ExternalLink } from "lucide-react";
+import { SiFirefox, SiGooglechrome, SiGithub, SiBluesky } from "react-icons/si";
+import { FaEdge } from "react-icons/fa";
+import { useAuth } from "../context/AuthContext";
+import { getTrendingTags } from "../api/client";
+import tangledIcon from "../assets/tangled.svg";
+
+const isFirefox =
+  typeof navigator !== "undefined" && /Firefox/i.test(navigator.userAgent);
+const isEdge =
+  typeof navigator !== "undefined" && /Edg/i.test(navigator.userAgent);
+const isChrome =
+  typeof navigator !== "undefined" &&
+  /Chrome/i.test(navigator.userAgent) &&
+  !isEdge;
+
+function getExtensionInfo() {
+  if (isFirefox) {
+    return {
+      url: "https://addons.mozilla.org/en-US/firefox/addon/margin/",
+      icon: SiFirefox,
+      name: "Firefox",
+    };
+  }
+  if (isEdge) {
+    return {
+      url: "https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn",
+      icon: FaEdge,
+      name: "Edge",
+    };
+  }
+  return {
+    url: "https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa/",
+    icon: SiGooglechrome,
+    name: "Chrome",
+  };
+}
+
+export default function RightSidebar() {
+  const { isAuthenticated } = useAuth();
+  const ext = getExtensionInfo();
+  const ExtIcon = ext.icon;
+  const [trendingTags, setTrendingTags] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getTrendingTags()
+      .then((tags) => setTrendingTags(tags))
+      .catch((err) => console.error("Failed to fetch trending tags:", err))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <aside className="right-sidebar">
+      <div className="right-section">
+        <h3 className="right-section-title">Get the Extension</h3>
+        <p className="right-section-desc">
+          Annotate, highlight, and bookmark any webpage
+        </p>
+        <a
+          href={ext.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="right-extension-btn"
+        >
+          <ExtIcon size={18} />
+          Install for {ext.name}
+          <ExternalLink size={14} />
+        </a>
+      </div>
+
+      {isAuthenticated ? (
+        <div className="right-section">
+          <h3 className="right-section-title">Trending Tags</h3>
+          <div className="right-links">
+            {loading ? (
+              <span className="right-section-desc">Loading...</span>
+            ) : trendingTags.length > 0 ? (
+              trendingTags.map(({ tag, count }) => (
+                <Link
+                  key={tag}
+                  to={`/?tag=${encodeURIComponent(tag)}`}
+                  className="right-link"
+                >
+                  <span>#{tag}</span>
+                  <span style={{ fontSize: "0.75rem", opacity: 0.6 }}>
+                    {count}
+                  </span>
+                </Link>
+              ))
+            ) : (
+              <span className="right-section-desc">No trending tags yet</span>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="right-section">
+          <h3 className="right-section-title">Explore</h3>
+          <nav className="right-links">
+            <Link to="/url" className="right-link">
+              Browse by URL
+            </Link>
+            <Link to="/highlights" className="right-link">
+              Public Highlights
+            </Link>
+          </nav>
+        </div>
+      )}
+
+      <div className="right-section">
+        <h3 className="right-section-title">Resources</h3>
+        <nav className="right-links">
+          <a
+            href="https://github.com/margin-at/margin"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="right-link"
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <SiGithub size={16} />
+              GitHub
+            </div>
+            <ExternalLink size={12} />
+          </a>
+          <a
+            href="https://tangled.net"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="right-link"
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <div className="tangled-icon" />
+              Tangled
+            </div>
+            <ExternalLink size={12} />
+          </a>
+          <a
+            href="https://bsky.app/profile/margin.at"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="right-link"
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <SiBluesky size={16} />
+              Bluesky
+            </div>
+            <ExternalLink size={12} />
+          </a>
+        </nav>
+      </div>
+
+      <div className="right-footer">
+        <Link to="/privacy">Privacy</Link>
+        <span>·</span>
+        <Link to="/terms">Terms</Link>
+      </div>
+    </aside>
+  );
+}

web/src/components/Sidebar.jsx

···
+import { useState, useRef, useEffect } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+import {
+  Home,
+  Search,
+  Folder,
+  Bell,
+  PenSquare,
+  User,
+  LogOut,
+  MoreHorizontal,
+  Highlighter,
+  Bookmark,
+} from "lucide-react";
+import { getUnreadNotificationCount } from "../api/client";
+import logo from "../assets/logo.svg";
+
+export default function Sidebar() {
+  const { user, isAuthenticated, logout, loading } = useAuth();
+  const location = useLocation();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const menuRef = useRef(null);
+
+  const isActive = (path) => {
+    if (path === "/") return location.pathname === "/";
+    return location.pathname.startsWith(path);
+  };
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      getUnreadNotificationCount()
+        .then((data) => setUnreadCount(data.count || 0))
+        .catch(() => {});
+      const interval = setInterval(() => {
+        getUnreadNotificationCount()
+          .then((data) => setUnreadCount(data.count || 0))
+          .catch(() => {});
+      }, 60000);
+      return () => clearInterval(interval);
+    }
+  }, [isAuthenticated]);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const getInitials = () => {
+    if (user?.displayName) {
+      return user.displayName.substring(0, 2).toUpperCase();
+    }
+    if (user?.handle) {
+      return user.handle.substring(0, 2).toUpperCase();
+    }
+    return "U";
+  };
+
+  return (
+    <aside className="sidebar">
+      <Link to="/" className="sidebar-header">
+        <img src={logo} alt="Margin" className="sidebar-logo" />
+        <span className="sidebar-brand">Margin</span>
+      </Link>
+
+      <nav className="sidebar-nav">
+        <Link
+          to="/"
+          className={`sidebar-link ${isActive("/") ? "active" : ""}`}
+        >
+          <Home size={20} />
+          <span>Home</span>
+        </Link>
+        <Link
+          to="/url"
+          className={`sidebar-link ${isActive("/url") ? "active" : ""}`}
+        >
+          <Search size={20} />
+          <span>Browse</span>
+        </Link>
+
+        {isAuthenticated && (
+          <>
+            <div className="sidebar-section-title">Library</div>
+            <Link
+              to="/highlights"
+              className={`sidebar-link ${isActive("/highlights") ? "active" : ""}`}
+            >
+              <Highlighter size={20} />
+              <span>Highlights</span>
+            </Link>
+            <Link
+              to="/bookmarks"
+              className={`sidebar-link ${isActive("/bookmarks") ? "active" : ""}`}
+            >
+              <Bookmark size={20} />
+              <span>Bookmarks</span>
+            </Link>
+            <Link
+              to="/collections"
+              className={`sidebar-link ${isActive("/collections") ? "active" : ""}`}
+            >
+              <Folder size={20} />
+              <span>Collections</span>
+            </Link>
+            <Link
+              to="/notifications"
+              className={`sidebar-link ${isActive("/notifications") ? "active" : ""}`}
+              onClick={() => setUnreadCount(0)}
+            >
+              <Bell size={20} />
+              <span>Notifications</span>
+              {unreadCount > 0 && (
+                <span className="notification-badge">{unreadCount}</span>
+              )}
+            </Link>
+          </>
+        )}
+      </nav>
+
+      {isAuthenticated && (
+        <Link to="/new" className="sidebar-new-btn">
+          <PenSquare size={18} />
+          <span>New</span>
+        </Link>
+      )}
+
+      <div className="sidebar-footer" ref={menuRef}>
+        {!loading &&
+          (isAuthenticated ? (
+            <>
+              <div
+                className="sidebar-user"
+                onClick={() => setMenuOpen(!menuOpen)}
+              >
+                <div className="sidebar-avatar">
+                  {user?.avatar ? (
+                    <img src={user.avatar} alt={user.displayName} />
+                  ) : (
+                    <span>{getInitials()}</span>
+                  )}
+                </div>
+                <div className="sidebar-user-info">
+                  <div className="sidebar-user-name">
+                    {user?.displayName || user?.handle}
+                  </div>
+                  <div className="sidebar-user-handle">@{user?.handle}</div>
+                </div>
+                <MoreHorizontal size={18} className="sidebar-user-menu" />
+              </div>
+
+              {menuOpen && (
+                <div className="sidebar-dropdown">
+                  <Link
+                    to={`/profile/${user?.did}`}
+                    className="sidebar-dropdown-item"
+                    onClick={() => setMenuOpen(false)}
+                  >
+                    <User size={16} />
+                    View Profile
+                  </Link>
+                  <button
+                    onClick={() => {
+                      logout();
+                      setMenuOpen(false);
+                    }}
+                    className="sidebar-dropdown-item danger"
+                  >
+                    <LogOut size={16} />
+                    Sign Out
+                  </button>
+                </div>
+              )}
+            </>
+          ) : (
+            <Link to="/login" className="sidebar-new-btn" style={{ margin: 0 }}>
+              Sign In
+            </Link>
+          ))}
+      </div>
+    </aside>
+  );
+}

web/src/css/annotations.css

···
+.annotation-detail-page {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 24px 16px;
+  min-height: 100vh;
+}
+
+.annotation-detail-header {
+  margin-bottom: 24px;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-tertiary);
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: color 0.15s;
+}
+
+.back-link:hover {
+  color: var(--text-primary);
+}
+
+.replies-section {
+  margin-top: 32px;
+  border-top: 1px solid var(--border);
+  padding-top: 24px;
+}
+
+.replies-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 20px;
+}
+
+.annotation-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--border);
+  transition: background 0.15s ease;
+}
+
+.annotation-card:last-child {
+  border-bottom: none;
+}
+
+.annotation-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.annotation-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+
+.annotation-avatar {
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  border-radius: 50%;
+  background: var(--bg-tertiary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  overflow: hidden;
+}
+
+.annotation-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.annotation-meta {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1.3;
+}
+
+.annotation-avatar-link {
+  text-decoration: none;
+  border-radius: 50%;
+}
+
+.annotation-author-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.annotation-author {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+}
+
+.annotation-handle {
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+  text-decoration: none;
+}
+
+.annotation-handle:hover {
+  color: var(--text-secondary);
+}
+
+.annotation-time {
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+}
+
+.annotation-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-left: 46px;
+}
+
+.annotation-source {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+  text-decoration: none;
+  transition: color 0.15s ease;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.annotation-source:hover {
+  color: var(--text-secondary);
+  text-decoration: underline;
+}
+
+.annotation-source-title {
+  color: var(--text-tertiary);
+  opacity: 0.7;
+}
+
+.annotation-highlight {
+  display: block;
+  position: relative;
+  padding-left: 12px;
+  margin: 4px 0;
+  text-decoration: none;
+  border-left: 2px solid var(--border);
+  transition: all 0.15s ease;
+}
+
+.annotation-highlight:hover {
+  border-left-color: var(--text-secondary);
+}
+
+.annotation-highlight mark {
+  background: transparent;
+  color: var(--text-primary);
+  font-style: italic;
+  font-size: 1rem;
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: var(--font-serif, var(--font-sans));
+  display: inline;
+}
+
+.annotation-text {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+}
+
+.annotation-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.annotation-tag {
+  font-size: 0.8rem;
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+  opacity: 0.9;
+  transition: opacity 0.15s;
+}
+
+.annotation-tag:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.annotation-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+  padding-left: 46px;
+}
+
+.annotation-actions-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.annotation-action {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-tertiary);
+  font-size: 0.8rem;
+  font-weight: 500;
+  padding: 6px;
+  margin-left: -6px;
+  border-radius: var(--radius-sm);
+  transition: all 0.15s ease;
+  background: transparent;
+  cursor: pointer;
+  border: none;
+}
+
+.annotation-action:hover {
+  color: var(--text-secondary);
+  background: var(--bg-tertiary);
+}
+
+.annotation-action.liked {
+  color: #ef4444;
+}
+
+.annotation-action.liked svg {
+  fill: #ef4444;
+}
+
+.annotation-action.active {
+  color: var(--accent);
+}
+
+.action-icon-only {
+  padding: 6px;
+}
+
+.annotation-header-right {
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.annotation-card:hover .annotation-header-right {
+  opacity: 1;
+}
+
+.inline-replies {
+  margin-top: 12px;
+  padding-left: 46px;
+}
+
+@media (max-width: 600px) {
+  .annotation-content,
+  .annotation-actions,
+  .inline-replies {
+    padding-left: 0;
+  }
+
+  .annotation-header-right {
+    opacity: 1;
+  }
+}
+
+.replies-list-threaded {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.reply-card-threaded {
+  position: relative;
+  padding-left: 0;
+  transition: background 0.15s;
+}
+
+.reply-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.reply-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--bg-tertiary);
+  overflow: hidden;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reply-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.reply-avatar span {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.reply-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.reply-author {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.reply-handle {
+  font-size: 0.8rem;
+  color: var(--text-tertiary);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.reply-time {
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.reply-dot {
+  color: var(--text-tertiary);
+  font-size: 0.7rem;
+}
+
+.reply-text {
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: var(--text-primary);
+  margin: 0;
+  padding-left: 38px;
+}
+
+.reply-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.reply-card-threaded:hover .reply-actions {
+  opacity: 1;
+}
+
+.reply-action-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reply-action-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.reply-action-delete:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.reply-form {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  background: var(--bg-secondary);
+  margin-bottom: 24px;
+}
+
+.replying-to-banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--bg-tertiary);
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 12px;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.cancel-reply {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  font-size: 1.2rem;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.cancel-reply:hover {
+  color: var(--text-primary);
+}
+
+.reply-input {
+  width: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 0.95rem;
+  resize: vertical;
+  min-height: 80px;
+  transition: border-color 0.15s;
+  display: block;
+  box-sizing: border-box;
+}
+
+.reply-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.reply-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}

web/src/css/base.css

···
+:root {
+  --bg-primary: #09090b;
+  --bg-secondary: #0f0f12;
+  --bg-tertiary: #18181b;
+  --bg-card: #09090b;
+  --bg-elevated: #18181b;
+  --text-primary: #e4e4e7;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+  --border: #27272a;
+  --border-hover: #3f3f46;
+  --accent: #6366f1;
+  --accent-hover: #4f46e5;
+  --accent-subtle: rgba(99, 102, 241, 0.1);
+  --accent-text: #818cf8;
+  --success: #10b981;
+  --error: #ef4444;
+  --warning: #f59e0b;
+  --info: #3b82f6;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --font-sans:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono:
+    "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, monospace;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.025em;
+  color: var(--text-primary);
+}
+
+p {
+  color: var(--text-secondary);
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--text-primary);
+}
+
+::selection {
+  background: var(--accent-subtle);
+  color: var(--accent-text);
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.text-muted {
+  color: var(--text-secondary);
+}
+
+.text-faint {
+  color: var(--text-tertiary);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 5px;
+  border: 2px solid var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}

web/src/css/buttons.css

···
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 20px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  transition: all 0.15s ease;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-hover);
+}
+
+.btn-ghost {
+  color: var(--text-secondary);
+  padding: 8px 12px;
+}
+
+.btn-ghost:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.btn-bluesky {
+  background: #0085ff;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  transition:
+    background 0.2s,
+    transform 0.2s;
+}
+
+.btn-bluesky:hover {
+  background: #0070dd;
+  transform: translateY(-1px);
+}
+
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 0.85rem;
+}
+
+.btn-text {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.btn-text:hover {
+  color: var(--text-primary);
+}
+
+.btn-block {
+  width: 100%;
+  text-align: left;
+  padding: 8px 12px;
+  color: var(--text-secondary);
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  margin-top: 8px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-block:hover {
+  background: var(--border);
+  color: var(--text-primary);
+}
+
+.btn-icon-danger {
+  padding: 8px;
+  background: var(--error);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  box-shadow: var(--shadow-md);
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-icon-danger:hover {
+  background: #dc2626;
+  transform: scale(1.05);
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.action-buttons-end {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}

web/src/css/collections.css

···
+.collections-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.collection-row {
+  display: flex;
+  align-items: center;
+  background: var(--bg-card);
+  transition: background 0.15s ease;
+}
+
+.collection-row:not(:last-child) {
+  border-bottom: 1px solid var(--border);
+}
+
+.collection-row:hover {
+  background: var(--bg-secondary);
+}
+
+.collection-row-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  text-decoration: none;
+  min-width: 0;
+}
+
+.collection-row-icon {
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(
+    135deg,
+    rgba(79, 70, 229, 0.1),
+    rgba(168, 85, 247, 0.15)
+  );
+  color: var(--accent);
+  border-radius: var(--radius-md);
+  transition: all 0.2s ease;
+}
+
+.collection-row:hover .collection-row-icon {
+  background: linear-gradient(
+    135deg,
+    rgba(79, 70, 229, 0.15),
+    rgba(168, 85, 247, 0.2)
+  );
+  transform: scale(1.05);
+}
+
+.collection-row-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.collection-row-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 2px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.collection-row:hover .collection-row-name {
+  color: var(--accent);
+}
+
+.collection-row-desc {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.collection-row-arrow {
+  color: var(--text-tertiary);
+  opacity: 0;
+  transition: all 0.2s ease;
+}
+
+.collection-row:hover .collection-row-arrow {
+  opacity: 1;
+  color: var(--accent);
+  transform: translateX(2px);
+}
+
+.collection-row-edit {
+  padding: 10px;
+  margin-right: 12px;
+  color: var(--text-tertiary);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.15s ease;
+}
+
+.collection-row:hover .collection-row-edit {
+  opacity: 1;
+}
+
+.collection-row-edit:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.collection-detail-header {
+  display: flex;
+  gap: 20px;
+  padding: 24px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  margin-bottom: 32px;
+  position: relative;
+}
+
+.collection-detail-icon {
+  width: 56px;
+  height: 56px;
+  min-width: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(
+    135deg,
+    rgba(79, 70, 229, 0.1),
+    rgba(168, 85, 247, 0.1)
+  );
+  color: var(--accent);
+  border-radius: var(--radius-md);
+}
+
+.collection-detail-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.collection-detail-visibility {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--accent);
+  text-transform: capitalize;
+  margin-bottom: 8px;
+}
+
+.collection-detail-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+  line-height: 1.3;
+}
+
+.collection-detail-desc {
+  color: var(--text-secondary);
+  font-size: 1rem;
+  line-height: 1.5;
+  margin-bottom: 12px;
+  max-width: 600px;
+}
+
+.collection-detail-stats {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+}
+
+.collection-detail-actions {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.collection-detail-actions .share-menu-container {
+  display: flex;
+  align-items: center;
+}
+
+.collection-detail-actions .annotation-action {
+  padding: 10px;
+  color: var(--text-tertiary);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.collection-detail-actions .annotation-action:hover {
+  color: var(--accent);
+  background: var(--bg-tertiary);
+}
+
+.collection-detail-edit,
+.collection-detail-delete {
+  padding: 10px;
+  color: var(--text-tertiary);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.collection-detail-edit:hover {
+  color: var(--accent);
+  background: var(--bg-tertiary);
+}
+
+.collection-detail-delete:hover {
+  color: var(--error);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.collection-item-wrapper {
+  position: relative;
+}
+
+.collection-item-remove {
+  position: absolute;
+  top: 12px;
+  left: -40px;
+  z-index: 10;
+  padding: 8px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.15s ease;
+}
+
+.collection-item-wrapper:hover .collection-item-remove {
+  opacity: 1;
+}
+
+.collection-item-remove:hover {
+  color: var(--error);
+  border-color: var(--error);
+  background: rgba(239, 68, 68, 0.05);
+}
+
+.collection-list-item {
+  width: 100%;
+  text-align: left;
+  padding: 12px 16px;
+  border-radius: var(--radius-md);
+  background: var(--bg-primary);
+  border: 1px solid transparent;
+  color: var(--text-primary);
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.collection-list-item:hover {
+  background: var(--bg-hover);
+  border-color: var(--border);
+}
+
+.collection-list-item:hover .collection-list-item-icon {
+  opacity: 1;
+}
+
+.collection-list-item:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.item-delete-overlay {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.card:hover .item-delete-overlay,
+div:hover > .item-delete-overlay {
+  opacity: 1;
+}

web/src/css/feed.css

···
+.feed {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.feed-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.feed-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.feed-filters {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 24px;
+  padding: 4px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-lg);
+  width: fit-content;
+}
+
+.filter-tab {
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.filter-tab:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.filter-tab.active {
+  color: var(--text-primary);
+  background: var(--bg-card);
+  box-shadow: var(--shadow-sm);
+}
+
+.page-header {
+  margin-bottom: 32px;
+}
+
+.page-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.page-description {
+  color: var(--text-secondary);
+  font-size: 1.1rem;
+}
+
+.url-input-wrapper {
+  margin-bottom: 24px;
+}
+
+.url-input-container {
+  display: flex;
+  gap: 12px;
+}
+
+.url-input {
+  width: 100%;
+  padding: 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 1.1rem;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.url-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 4px var(--accent-subtle);
+  background: var(--bg-primary);
+}
+
+.url-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.url-results-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  text-decoration: none;
+  margin-bottom: 24px;
+  transition: color 0.15s;
+}
+
+.back-link:hover {
+  color: var(--accent);
+}
+
+.new-page {
+  max-width: 600px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+@media (max-width: 640px) {
+  .main-content {
+    padding: 16px 12px;
+  }
+
+  .page-title {
+    font-size: 1.5rem;
+  }
+}

web/src/css/layout.css

···
+.layout {
+  display: flex;
+  min-height: 100vh;
+  background: var(--bg-primary);
+}
+
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 240px;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  z-index: 50;
+  padding-bottom: 20px;
+}
+
+.sidebar-header {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  margin-bottom: 12px;
+  text-decoration: none;
+  color: var(--text-primary);
+}
+
+.sidebar-logo {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+  margin-right: 12px;
+}
+
+.sidebar-brand {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+
+.sidebar-nav {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 12px;
+  overflow-y: auto;
+}
+
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.15s ease;
+}
+
+.sidebar-link:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.sidebar-link.active {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.sidebar-link svg {
+  width: 18px;
+  height: 18px;
+  color: var(--text-tertiary);
+  transition: color 0.15s ease;
+}
+
+.sidebar-link:hover svg,
+.sidebar-link.active svg {
+  color: var(--text-primary);
+}
+
+.sidebar-section-title {
+  padding: 24px 12px 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.notification-badge {
+  background: var(--accent);
+  color: white;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0 6px;
+  height: 18px;
+  border-radius: 99px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+}
+
+.sidebar-new-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 12px 16px;
+  padding: 10px 16px;
+  background: var(--text-primary);
+  color: var(--bg-primary);
+  border-radius: var(--radius-md);
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.15s;
+  justify-content: center;
+}
+
+.sidebar-new-btn:hover {
+  opacity: 0.9;
+}
+
+.sidebar-footer {
+  padding: 0 12px;
+  margin-top: auto;
+}
+
+.sidebar-user {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.sidebar-user:hover,
+.sidebar-user.active {
+  background: var(--bg-tertiary);
+}
+
+.sidebar-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--bg-tertiary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  font-weight: 500;
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 1px solid var(--border);
+}
+
+.sidebar-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.sidebar-user-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-user-name {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.sidebar-user-handle {
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+}
+
+.sidebar-dropdown {
+  position: absolute;
+  bottom: 74px;
+  left: 12px;
+  width: 216px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: 4px;
+  z-index: 1000;
+  overflow: hidden;
+  animation: scaleIn 0.1s ease-out;
+  transform-origin: bottom center;
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.sidebar-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: all 0.15s;
+  border: none;
+}
+
+.sidebar-dropdown-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.sidebar-dropdown-item.danger:hover {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--error);
+}
+
+.main-layout {
+  flex: 1;
+  margin-left: 240px;
+  margin-right: 280px;
+  min-height: 100vh;
+}
+
+.main-content-wrapper {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 40px 24px;
+}
+
+.right-sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 280px;
+  background: var(--bg-primary);
+  border-left: 1px solid var(--border);
+  padding: 32px 24px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.right-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.right-section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.right-section-desc {
+  font-size: 0.85rem;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+.right-extension-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.15s ease;
+  width: fit-content;
+}
+
+.right-extension-btn:hover {
+  border-color: var(--text-tertiary);
+  background: var(--bg-tertiary);
+}
+
+.right-links {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.right-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 0;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  transition: color 0.15s;
+  text-decoration: none;
+}
+
+.right-link:hover {
+  color: var(--text-primary);
+}
+
+.right-link svg {
+  width: 16px;
+  height: 16px;
+  color: var(--text-tertiary);
+  transition: all 0.15s;
+}
+
+.right-link:hover svg {
+  color: var(--text-secondary);
+}
+
+.tangled-icon {
+  width: 16px;
+  height: 16px;
+  background-color: var(--text-tertiary);
+  -webkit-mask: url("../assets/tangled.svg") no-repeat center / contain;
+  mask: url("../assets/tangled.svg") no-repeat center / contain;
+  transition: background-color 0.15s;
+}
+
+.right-link:hover .tangled-icon {
+  background-color: var(--text-secondary);
+}
+
+.right-footer {
+  margin-top: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+}
+
+.right-footer a {
+  color: var(--text-tertiary);
+}
+
+.right-footer a:hover {
+  color: var(--text-secondary);
+}
+
+.mobile-nav {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(9, 9, 11, 0.9);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-top: 1px solid var(--border);
+  padding: 8px 16px;
+  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
+  z-index: 100;
+}
+
+.mobile-nav-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mobile-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: var(--text-tertiary);
+  text-decoration: none;
+  font-size: 0.65rem;
+  font-weight: 500;
+  width: 60px;
+  transition: color 0.15s;
+}
+
+.mobile-nav-item.active {
+  color: var(--text-primary);
+}
+
+.mobile-nav-item svg {
+  width: 24px;
+  height: 24px;
+}
+
+.mobile-nav-new {
+  width: 48px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  background: var(--text-primary);
+  color: var(--bg-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-nav-new svg {
+  width: 20px;
+  height: 20px;
+}
+
+@media (max-width: 1200px) {
+  .right-sidebar {
+    display: none;
+  }
+
+  .main-layout {
+    margin-right: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    display: none;
+  }
+
+  .main-layout {
+    margin-left: 0;
+    padding-bottom: 80px;
+  }
+
+  .main-content-wrapper {
+    padding: 20px 16px;
+  }
+
+  .mobile-nav {
+    display: block;
+  }
+}

web/src/css/login.css

···
+.login-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 70vh;
+  padding: 60px 20px;
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.login-at-logo {
+  font-size: 5rem;
+  font-weight: 800;
+  color: var(--accent);
+  margin-bottom: 24px;
+  line-height: 1;
+}
+
+.login-logo-img {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 24px;
+  object-fit: contain;
+}
+
+.login-heading {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 32px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+  line-height: 1.4;
+}
+
+.login-help-btn {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  transition: color 0.15s;
+  flex-shrink: 0;
+}
+
+.login-help-btn:hover {
+  color: var(--accent);
+}
+
+.login-help-text {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px 20px;
+  margin-bottom: 24px;
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  text-align: center;
+}
+
+.login-help-text code {
+  background: var(--bg-tertiary);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.login-input-wrapper {
+  position: relative;
+}
+
+.login-input {
+  width: 100%;
+  padding: 14px 16px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 1rem;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+.login-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+}
+
+.login-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.login-suggestions {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  z-index: 100;
+}
+
+.login-suggestion {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 16px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.login-suggestion:hover,
+.login-suggestion.selected {
+  background: var(--bg-elevated);
+}
+
+.login-suggestion-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, var(--accent), #a855f7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+}
+
+.login-suggestion-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.login-suggestion-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.login-suggestion-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.login-suggestion-handle {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.login-error {
+  padding: 12px 16px;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: var(--radius-md);
+  color: #ef4444;
+  font-size: 0.875rem;
+}
+
+.login-legal {
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+  line-height: 1.5;
+  margin-top: 16px;
+}
+
+.login-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.login-brand-icon {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, var(--accent), #a855f7);
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: white;
+}
+
+.login-brand-name {
+  font-size: 1.75rem;
+  font-weight: 700;
+}
+
+.login-avatar {
+  width: 72px;
+  height: 72px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, var(--accent), #a855f7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: white;
+  overflow: hidden;
+}
+
+.login-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.login-avatar-large {
+  width: 100px;
+  height: 100px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, var(--accent), #a855f7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  font-weight: 700;
+  font-size: 2rem;
+  color: white;
+  overflow: hidden;
+}
+
+.login-avatar-large img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.login-welcome {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.login-welcome-name {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+
+.login-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.login-btn {
+  width: 100%;
+  padding: 14px 24px;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.login-submit {
+  padding: 18px 32px;
+  font-size: 1.1rem;
+  font-weight: 600;
+}

web/src/css/modals.css

···
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  z-index: 50;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.modal-container {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  width: 100%;
+  max-width: 28rem;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-lg);
+  animation: zoomIn 0.2s ease-out;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.modal-close-btn {
+  padding: 8px;
+  color: var(--text-tertiary);
+  border-radius: var(--radius-md);
+  transition: color 0.15s;
+}
+
+.modal-close-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.modal-form {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.icon-picker-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.icon-picker-tab {
+  flex: 1;
+  padding: 8px 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.icon-picker-tab:hover {
+  background: var(--bg-tertiary);
+}
+
+.icon-picker-tab.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.emoji-picker-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.emoji-custom-input input {
+  width: 100%;
+}
+
+.emoji-picker,
+.icon-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  max-height: 120px;
+  overflow-y: auto;
+  padding: 8px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+}
+
+.emoji-option,
+.icon-option {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  background: transparent;
+  border: 2px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  color: var(--text-secondary);
+}
+
+.emoji-option:hover,
+.icon-option:hover {
+  background: var(--bg-tertiary);
+  transform: scale(1.1);
+  color: var(--text-primary);
+}
+
+.emoji-option.selected,
+.icon-option.selected {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 8px;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.form-group {
+  margin-bottom: 0;
+}
+
+.form-label {
+  display: block;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  transition: all 0.15s;
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-subtle);
+}
+
+.form-textarea {
+  resize: none;
+}
+
+.input {
+  width: 100%;
+  padding: 12px 14px;
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  outline: none;
+  transition: all 0.15s ease;
+}
+
+.input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-subtle);
+}
+
+.input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.color-input-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--bg-tertiary);
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  width: fit-content;
+}
+
+.color-input-wrapper {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  border: 2px solid var(--border);
+  cursor: pointer;
+  transition: transform 0.1s;
+}
+
+.color-input-wrapper:hover {
+  transform: scale(1.1);
+  border-color: var(--accent);
+}
+
+.color-input-wrapper input[type="color"] {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+}

web/src/css/notifications.css

···
+.notifications-page {
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.notifications-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.notification-item {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  text-decoration: none;
+  color: inherit;
+}
+
+.notification-item:hover {
+  background: var(--bg-hover);
+}
+
+.notification-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.notification-icon[data-type="like"] {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.notification-icon[data-type="reply"] {
+  color: #3b82f6;
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.notification-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.notification-text {
+  font-size: 0.95rem;
+  margin-bottom: 4px;
+  line-height: 1.4;
+  color: var(--text-primary);
+}
+
+.notification-text strong {
+  font-weight: 600;
+}
+
+.notification-time {
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+}

web/src/css/profile.css

···
+.profile-header {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    margin-bottom: 32px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid var(--border);
+}
+
+.profile-avatar {
+    width: 80px;
+    height: 80px;
+    min-width: 80px;
+    border-radius: 50%;
+    background: var(--bg-tertiary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 2rem;
+    color: var(--text-secondary);
+    overflow: hidden;
+    border: 1px solid var(--border);
+}
+
+.profile-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.profile-avatar-link {
+    text-decoration: none;
+}
+
+.profile-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.profile-name {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    line-height: 1.2;
+}
+
+.profile-handle-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 4px;
+    flex-wrap: wrap;
+}
+
+.profile-handle-link {
+    color: var(--text-tertiary);
+    text-decoration: none;
+    font-size: 1rem;
+    transition: color 0.15s;
+}
+
+.profile-handle-link:hover {
+    color: var(--text-secondary);
+}
+
+.profile-bluesky-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: #3b82f6;
+    text-decoration: none;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: var(--radius-sm);
+    background: rgba(59, 130, 246, 0.1);
+    transition: all 0.15s ease;
+}
+
+.profile-bluesky-link:hover {
+    background: rgba(59, 130, 246, 0.15);
+}
+
+.profile-stats {
+    display: flex;
+    gap: 24px;
+    margin-top: 12px;
+}
+
+.profile-stat {
+    color: var(--text-tertiary);
+    font-size: 0.9rem;
+}
+
+.profile-stat strong {
+    color: var(--text-primary);
+    font-weight: 600;
+}
+
+.profile-tabs {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 24px;
+    border-bottom: 1px solid var(--border);
+}
+
+.profile-tab {
+    padding: 12px 0;
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: var(--text-tertiary);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    position: relative;
+}
+
+.profile-tab:hover {
+    color: var(--text-primary);
+}
+
+.profile-tab.active {
+    color: var(--text-primary);
+}
+
+.profile-tab.active::after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--text-primary);
+}
+
+.profile-badge-wrapper {
+    display: inline-flex;
+    align-items: center;
+}
+
+.profile-badge-clickable {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    margin-left: 8px;
+}
+
+.badge-info-popover {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 16px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+    font-size: 0.85rem;
+    white-space: nowrap;
+    z-index: 100;
+    min-width: 200px;
+}
+
+.badge-info-title {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+}
+
+.verifier-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    transition: background 0.15s ease;
+}
+
+.verifier-link:hover {
+    background: var(--bg-hover);
+}
+
+.verifier-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.verifier-name {
+    color: var(--text-primary);
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
+.profile-suspended {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    text-align: center;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    margin-top: 20px;
+    border: 1px solid var(--border);
+}
+
+.suspended-icon {
+    font-size: 40px;
+    margin-bottom: 16px;
+    color: var(--text-tertiary);
+}
+
+.profile-suspended h2 {
+    color: var(--text-primary);
+    margin-bottom: 8px;
+    font-size: 1.25rem;
+}
+
+@media (max-width: 640px) {
+    .profile-header {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .profile-info {
+        align-items: center;
+    }
+
+    .profile-handle-row {
+        justify-content: center;
+    }
+
+    .profile-stats {
+        justify-content: center;
+    }
+
+    .profile-tabs {
+        justify-content: center;
+        gap: 16px;
+    }
+}

web/src/css/skeleton.css

···
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-tertiary) 25%,
+    var(--bg-secondary) 50%,
+    var(--bg-tertiary) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--radius-sm);
+}
+
+.skeleton-card {
+  padding: 24px 0;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.skeleton-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.skeleton-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+}
+
+.skeleton-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.skeleton-name {
+  width: 120px;
+  height: 14px;
+}
+
+.skeleton-handle {
+  width: 80px;
+  height: 12px;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-left: 48px;
+}
+
+.skeleton-source {
+  width: 180px;
+  height: 24px;
+  border-radius: var(--radius-full);
+}
+
+.skeleton-highlight {
+  width: 100%;
+  height: 60px;
+  border-left: 2px solid var(--border);
+}
+
+.skeleton-text-1 {
+  width: 90%;
+  height: 14px;
+}
+
+.skeleton-text-2 {
+  width: 60%;
+  height: 14px;
+}
+
+.skeleton-actions {
+  display: flex;
+  gap: 24px;
+  padding-left: 48px;
+  margin-top: 4px;
+}
+
+.skeleton-action {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+}
+
+@media (max-width: 600px) {
+  .skeleton-content,
+  .skeleton-actions {
+    padding-left: 0;
+  }
+}

web/src/css/utilities.css

···
+.legal-content {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.legal-content h1 {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  color: var(--text-primary);
+}
+
+.legal-content h2 {
+  font-size: 1.4rem;
+  margin-top: 32px;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+}
+
+.legal-content h3 {
+  font-size: 1.1rem;
+  margin-top: 20px;
+  margin-bottom: 8px;
+  color: var(--text-primary);
+}
+
+.legal-content p {
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin-bottom: 12px;
+}
+
+.legal-content ul {
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin-left: 24px;
+  margin-bottom: 12px;
+}
+
+.legal-content li {
+  margin-bottom: 6px;
+}
+
+.legal-content a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.legal-content a:hover {
+  text-decoration: underline;
+}
+
+.legal-content section {
+  margin-bottom: 24px;
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+.text-error {
+  color: var(--error);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.gap-3 {
+  gap: 12px;
+}
+
+.mt-3 {
+  margin-top: 12px;
+}
+
+.mb-6 {
+  margin-bottom: 24px;
+}
+
+.composer {
+  margin-bottom: 24px;
+}
+
+.composer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.composer-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.composer-input {
+  width: 100%;
+  min-height: 120px;
+  padding: 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 1rem;
+  resize: vertical;
+  transition: all 0.15s ease;
+}
+
+.composer-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-subtle);
+}
+
+.composer-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.composer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.composer-count {
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+}
+
+.composer-count.warning {
+  color: var(--warning);
+}
+
+.composer-count.error {
+  color: var(--error);
+}
+
+.composer-char-count.warning {
+  color: var(--warning);
+}
+
+.composer-char-count.error {
+  color: var(--error);
+}
+
+.composer-add-quote {
+  width: 100%;
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  background: var(--bg-tertiary);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.composer-add-quote:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-subtle);
+}
+
+.composer-quote-input-wrapper {
+  margin-bottom: 12px;
+}
+
+.composer-quote-input {
+  width: 100%;
+  padding: 12px 16px;
+  background: linear-gradient(
+    135deg,
+    rgba(79, 70, 229, 0.05),
+    rgba(168, 85, 247, 0.05)
+  );
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  font-style: italic;
+  resize: vertical;
+  font-family: inherit;
+  transition: all 0.15s ease;
+}
+
+.composer-quote-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.composer-quote-input::placeholder {
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+.composer-quote-remove-btn {
+  margin-top: 8px;
+  padding: 6px 12px;
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+.composer-quote-remove-btn:hover {
+  color: var(--error);
+}
+
+.composer-error {
+  margin-top: 12px;
+  padding: 12px;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: var(--radius-md);
+  color: var(--error);
+  font-size: 0.9rem;
+}
+
+.composer-url {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
+.composer-quote {
+  position: relative;
+  padding: 12px 16px;
+  padding-right: 36px;
+  background: var(--bg-secondary);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  margin-bottom: 16px;
+  font-style: italic;
+  color: var(--text-secondary);
+}
+
+.composer-quote-remove {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.composer-quote-remove:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.composer-tags {
+  flex: 1;
+}
+
+.composer-meta-row {
+  display: flex;
+  gap: 12px;
+  margin-top: 12px;
+  align-items: flex-start;
+}
+
+.composer-labels-wrapper {
+  position: relative;
+}
+
+.composer-labels-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--text-tertiary);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+.composer-labels-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+  border-color: var(--text-tertiary);
+}
+
+.composer-labels-btn.active {
+  color: var(--accent);
+  background: var(--accent-subtle);
+  border-color: var(--accent);
+}
+
+.composer-labels-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: var(--error);
+  color: white;
+  font-size: 0.7rem;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  border: 2px solid var(--bg-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.composer-labels-picker {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 12px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 8px 0;
+  min-width: 200px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+  z-index: 50;
+  animation: scaleIn 0.2s ease-out forwards;
+  transform-origin: bottom right;
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.picker-header {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 4px;
+  padding: 4px 12px 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.picker-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.picker-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.picker-checkbox-wrapper {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.picker-checkbox-wrapper input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.picker-checkbox-custom {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--text-tertiary);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  transition: all 0.2s ease;
+  color: white;
+}
+
+.picker-item:hover .picker-checkbox-custom {
+  border-color: var(--text-secondary);
+}
+
+.picker-checkbox-wrapper input:checked + .picker-checkbox-custom {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.composer-tags-input {
+  width: 100%;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  transition: all 0.15s ease;
+}
+
+.composer-tags-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-subtle);
+}
+
+.composer-tags-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.history-panel {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.history-title {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.history-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.history-item {
+  position: relative;
+  padding-left: 1rem;
+  border-left: 2px solid var(--border);
+}
+
+.history-date {
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+  margin-bottom: 0.25rem;
+}
+
+.history-content {
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+}
+
+.history-close-btn {
+  color: var(--text-tertiary);
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.history-close-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.history-status {
+  text-align: center;
+  color: var(--text-tertiary);
+  font-style: italic;
+  padding: 1rem;
+}
+
+.share-menu-container {
+  position: relative;
+}
+
+.share-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 180px;
+  padding: 8px 0;
+  z-index: 100;
+  animation: fadeInUp 0.15s ease;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.share-menu-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.share-menu-label {
+  padding: 4px 12px 8px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-tertiary);
+}
+
+.share-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.1s ease;
+}
+
+.share-menu-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.share-menu-icon {
+  font-size: 1.1rem;
+  width: 24px;
+  text-align: center;
+}
+
+.share-menu-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 6px 0;
+}
+
+.bookmark-card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.bookmark-preview {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.bookmark-preview:hover {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.bookmark-preview::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: var(--accent);
+  opacity: 0.7;
+}
+
+.bookmark-preview-content {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bookmark-preview-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.bookmark-preview-site {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.bookmark-preview-title {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--text-primary);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.bookmark-preview-desc {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.bookmark-preview-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+  padding: 0 4px;
+  transition: all 0.2s ease;
+}
+
+.bookmark-preview:hover .bookmark-preview-arrow {
+  color: var(--accent);
+  transform: translateX(2px);
+}
+
+.bookmark-description {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.bookmark-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 12px;
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+}
+
+.bookmark-time {
+  color: var(--text-tertiary);
+}

web/src/index.css

···
-:root {
-  --bg-primary: #0c0a14;
-  --bg-secondary: #110e1c;
-  --bg-tertiary: #1a1528;
-  --bg-card: #14111f;
-  --bg-hover: #1e1932;
-  --bg-elevated: #1a1528;
-
-  --text-primary: #f4f0ff;
-  --text-secondary: #a89ec8;
-  --text-tertiary: #6b5f8a;
-
-  --accent: #a855f7;
-  --accent-hover: #c084fc;
-  --accent-subtle: rgba(168, 85, 247, 0.15);
-
-  --border: #2d2640;
-  --border-hover: #3d3560;
-
-  --success: #22c55e;
-  --error: #ef4444;
-  --warning: #f59e0b;
-
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 16px;
-  --radius-full: 9999px;
-
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 40px rgba(168, 85, 247, 0.1);
-  --shadow-glow: 0 0 20px rgba(168, 85, 247, 0.3);
-
-  --font-sans:
-    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 16px;
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  line-height: 1.6;
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  color: var(--accent);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-a:hover {
-  color: var(--accent-hover);
-}
-
-button {
-  font-family: inherit;
-  cursor: pointer;
-  border: none;
-  background: none;
-}
-
-input,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-.app {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.main-content {
-  flex: 1;
-  max-width: 680px;
-  width: 100%;
-  margin: 0 auto;
-  padding: 24px 16px;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 10px 20px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  border-radius: var(--radius-md);
-  transition: all 0.15s ease;
-}
-
-.btn-primary {
-  background: var(--accent);
-  color: white;
-}
-
-.btn-primary:hover {
-  background: var(--accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.btn-secondary {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-  border: 1px solid var(--border);
-}
-
-.btn-secondary:hover {
-  background: var(--bg-hover);
-  border-color: var(--border-hover);
-}
-
-.btn-ghost {
-  color: var(--text-secondary);
-  padding: 8px 12px;
-}
-
-.btn-ghost:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 24px;
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.card:hover {
-  border-color: var(--border-hover);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
-}
-
-.annotation-card {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.annotation-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
-}
-
-.annotation-header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-  min-width: 0;
-}
-
-.annotation-avatar {
-  width: 40px;
-  height: 40px;
-  min-width: 40px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 0.95rem;
-  color: white;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.annotation-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.annotation-meta {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  line-height: 1.3;
-}
-
-.annotation-avatar-link {
-  text-decoration: none;
-  border-radius: var(--radius-full);
-  transition: transform 0.15s ease;
-}
-
-.annotation-avatar-link:hover {
-  transform: scale(1.05);
-}
-
-.annotation-author-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.annotation-author {
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: 0.95rem;
-}
-
-.annotation-handle {
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  gap: 3px;
-}
-
-.annotation-handle:hover {
-  color: var(--accent);
-}
-
-.annotation-time {
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-}
-
-.annotation-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.annotation-source {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-  text-decoration: none;
-  padding: 4px 10px;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-full);
-  width: fit-content;
-  transition: all 0.15s ease;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.annotation-source:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-
-.annotation-source-title {
-  color: var(--text-secondary);
-  opacity: 0.8;
-}
-
-.annotation-highlight {
-  display: block;
-  position: relative;
-  padding: 16px 20px;
-  background: linear-gradient(
-    135deg,
-    rgba(79, 70, 229, 0.03),
-    rgba(168, 85, 247, 0.03)
-  );
-  border-left: 3px solid var(--accent);
-  border-radius: 4px var(--radius-md) var(--radius-md) 4px;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  margin: 4px 0;
-}
-
-.annotation-highlight:hover {
-  background: linear-gradient(
-    135deg,
-    rgba(79, 70, 229, 0.08),
-    rgba(168, 85, 247, 0.08)
-  );
-  transform: translateX(2px);
-}
-
-.annotation-highlight mark {
-  background: transparent;
-  color: var(--text-primary);
-  font-style: italic;
-  font-size: 1.05rem;
-  line-height: 1.6;
-  font-weight: 400;
-  display: inline;
-}
-
-.annotation-text {
-  font-size: 1rem;
-  line-height: 1.65;
-  color: var(--text-primary);
-  white-space: pre-wrap;
-}
-
-.annotation-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 16px;
-  margin-top: 8px;
-  border-top: 1px solid rgba(255, 255, 255, 0.03);
-}
-
-.annotation-actions-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.annotation-action {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--text-tertiary);
-  font-size: 0.85rem;
-  font-weight: 500;
-  padding: 6px 10px;
-  border-radius: var(--radius-md);
-  transition: all 0.2s ease;
-  background: transparent;
-  cursor: pointer;
-}
-
-.annotation-action:hover {
-  color: var(--text-secondary);
-  background: var(--bg-elevated);
-}
-
-.annotation-action.liked {
-  color: #ef4444;
-  background: rgba(239, 68, 68, 0.05);
-}
-
-.annotation-action.liked:hover {
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.annotation-action.active {
-  color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-.action-icon-only {
-  padding: 8px;
-}
-
-.annotation-delete {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 8px;
-  font-size: 1rem;
-  color: var(--text-tertiary);
-  transition: all 0.2s ease;
-  border-radius: var(--radius-md);
-  opacity: 0.6;
-}
-
-.annotation-delete:hover {
-  color: var(--error);
-  background: rgba(239, 68, 68, 0.1);
-  opacity: 1;
-}
-
-.annotation-delete:disabled {
-  cursor: not-allowed;
-  opacity: 0.3;
-}
-
-.share-menu-container {
-  position: relative;
-}
-
-.share-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 8px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-width: 180px;
-  padding: 8px 0;
-  z-index: 100;
-  animation: fadeInUp 0.15s ease;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.share-menu-section {
-  display: flex;
-  flex-direction: column;
-}
-
-.share-menu-label {
-  padding: 4px 12px 8px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-tertiary);
-}
-
-.share-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  background: none;
-  border: none;
-  width: 100%;
-  text-align: left;
-  font-size: 0.9rem;
-  color: var(--text-primary);
-  cursor: pointer;
-  transition: all 0.1s ease;
-}
-
-.share-menu-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.share-menu-icon {
-  font-size: 1.1rem;
-  width: 24px;
-  text-align: center;
-}
-
-.share-menu-divider {
-  height: 1px;
-  background: var(--border);
-  margin: 6px 0;
-}
-
-.feed {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.feed-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.feed-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.page-header {
-  margin-bottom: 32px;
-}
-
-.page-title {
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-}
-
-.page-description {
-  color: var(--text-secondary);
-  font-size: 1.1rem;
-}
-
-.url-input-wrapper {
-  margin-bottom: 32px;
-}
-
-.url-input-container {
-  display: flex;
-  gap: 12px;
-}
-
-.url-input {
-  flex: 1;
-  padding: 14px 18px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: 1rem;
-  transition: all 0.15s ease;
-}
-
-.url-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-subtle);
-}
-
-.url-input::placeholder {
-  color: var(--text-tertiary);
-}
-
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: var(--text-secondary);
-}
-
-.empty-state-icon {
-  font-size: 3rem;
-  margin-bottom: 16px;
-  opacity: 0.5;
-}
-
-.empty-state-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 8px;
-}
-
-.empty-state-text {
-  font-size: 1rem;
-  max-width: 400px;
-  margin: 0 auto;
-}
-
-.feed-filters {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 24px;
-  padding: 4px;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-lg);
-  width: fit-content;
-}
-
-.login-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 70vh;
-  padding: 60px 20px;
-  width: 100%;
-  max-width: 500px;
-  margin: 0 auto;
-}
-
-.login-at-logo {
-  font-size: 5rem;
-  font-weight: 800;
-  color: var(--accent);
-  margin-bottom: 24px;
-  line-height: 1;
-}
-
-.login-heading {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 32px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  text-align: center;
-  line-height: 1.4;
-}
-
-.login-help-btn {
-  background: none;
-  border: none;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  transition: color 0.15s;
-  flex-shrink: 0;
-}
-
-.login-help-btn:hover {
-  color: var(--accent);
-}
-
-.login-help-text {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 16px 20px;
-  margin-bottom: 24px;
-  font-size: 0.95rem;
-  color: var(--text-secondary);
-  line-height: 1.6;
-  text-align: center;
-}
-
-.login-help-text code {
-  background: var(--bg-tertiary);
-  padding: 2px 8px;
-  border-radius: var(--radius-sm);
-  font-size: 0.9rem;
-}
-
-.login-form {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  width: 100%;
-}
-
-.login-input-wrapper {
-  position: relative;
-}
-
-.login-input {
-  width: 100%;
-  padding: 18px 20px;
-  background: var(--bg-elevated);
-  border: 2px solid var(--border);
-  border-radius: var(--radius-lg);
-  color: var(--text-primary);
-  font-size: 1.1rem;
-  transition:
-    border-color 0.15s,
-    box-shadow 0.15s;
-}
-
-.login-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
-}
-
-.login-input::placeholder {
-  color: var(--text-tertiary);
-}
-
-.login-suggestions {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  right: 0;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  overflow: hidden;
-  z-index: 100;
-}
-
-.login-suggestion {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  width: 100%;
-  padding: 14px 18px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  color: var(--text-primary);
-  transition: background 0.1s;
-}
-
-.login-suggestion:hover,
-.login-suggestion.selected {
-  background: var(--bg-elevated);
-}
-
-.login-suggestion-avatar {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: white;
-}
-
-.login-suggestion-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.login-suggestion-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.login-suggestion-name {
-  font-weight: 600;
-  font-size: 1rem;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.login-suggestion-handle {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.login-error {
-  padding: 12px 16px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: var(--radius-md);
-  color: #ef4444;
-  font-size: 0.9rem;
-  text-align: center;
-}
-
-.login-submit {
-  padding: 18px 32px;
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.login-avatar-large {
-  width: 100px;
-  height: 100px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 20px;
-  font-weight: 700;
-  font-size: 2rem;
-  color: white;
-  overflow: hidden;
-}
-
-.login-avatar-large img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.login-welcome {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 32px;
-  text-align: center;
-}
-
-.login-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-}
-
-.login-avatar {
-  width: 72px;
-  height: 72px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 16px;
-  font-weight: 700;
-  font-size: 1.5rem;
-  color: white;
-  overflow: hidden;
-}
-
-.login-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.login-welcome-name {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-bottom: 24px;
-}
-
-.login-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.btn-bluesky {
-  background: #0085ff;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  transition:
-    background 0.2s,
-    transform 0.2s;
-}
-
-.btn-bluesky:hover {
-  background: #0070dd;
-  transform: translateY(-1px);
-}
-
-.login-btn {
-  width: 100%;
-  padding: 14px 24px;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.login-brand {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  margin-bottom: 24px;
-}
-
-.login-brand-icon {
-  width: 48px;
-  height: 48px;
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  border-radius: var(--radius-lg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.75rem;
-  font-weight: 800;
-  color: white;
-}
-
-.login-brand-name {
-  font-size: 1.75rem;
-  font-weight: 700;
-}
-
-.login-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.login-input-wrapper {
-  position: relative;
-}
-
-.login-input {
-  width: 100%;
-  padding: 14px 16px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: 1rem;
-  transition:
-    border-color 0.15s,
-    box-shadow 0.15s;
-}
-
-.login-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
-}
-
-.login-input::placeholder {
-  color: var(--text-tertiary);
-}
-
-.login-suggestions {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  overflow: hidden;
-  z-index: 100;
-}
-
-.login-suggestion {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 12px 16px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.1s;
-}
-
-.login-suggestion:hover,
-.login-suggestion.selected {
-  background: var(--bg-elevated);
-}
-
-.login-suggestion-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: white;
-}
-
-.login-suggestion-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.login-suggestion-info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.login-suggestion-name {
-  font-weight: 600;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.login-suggestion-handle {
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.login-error {
-  padding: 12px 16px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: var(--radius-md);
-  color: #ef4444;
-  font-size: 0.875rem;
-}
-
-.login-legal {
-  font-size: 0.75rem;
-  color: var(--text-tertiary);
-  line-height: 1.5;
-  margin-top: 16px;
-}
-
-.profile-header {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 32px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--border);
-}
-
-.profile-avatar {
-  width: 80px;
-  height: 80px;
-  min-width: 80px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 2rem;
-  color: white;
-  overflow: hidden;
-}
-
-.profile-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.profile-avatar-link {
-  text-decoration: none;
-}
-
-.profile-info {
-  flex: 1;
-}
-
-.profile-name {
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.profile-handle-link {
-  color: var(--text-secondary);
-  text-decoration: none;
-}
-
-.profile-handle-link:hover {
-  color: var(--accent);
-  text-decoration: underline;
-}
-
-.profile-bluesky-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: #0085ff;
-  text-decoration: none;
-  font-size: 0.95rem;
-  padding: 4px 10px;
-  border-radius: var(--radius-md);
-  background: rgba(0, 133, 255, 0.1);
-  transition: all 0.15s ease;
-}
-
-.profile-bluesky-link:hover {
-  background: rgba(0, 133, 255, 0.2);
-  color: #0070dd;
-}
-
-.profile-stats {
-  display: flex;
-  gap: 24px;
-  margin-top: 8px;
-}
-
-.profile-stat {
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-}
-
-.profile-stat strong {
-  color: var(--text-primary);
-}
-
-.profile-tabs {
-  display: flex;
-  gap: 0;
-  margin-bottom: 24px;
-  border-bottom: 1px solid var(--border);
-}
-
-.profile-tab {
-  padding: 12px 20px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  margin-bottom: -1px;
-}
-
-.profile-tab:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.profile-tab.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-}
-
-.bookmark-description {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  margin: 0;
-  line-height: 1.5;
-}
-
-.bookmark-meta {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 12px;
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-}
-
-.bookmark-time {
-  color: var(--text-tertiary);
-}
-
-.composer {
-  margin-bottom: 24px;
-}
-
-.composer-textarea {
-  width: 100%;
-  min-height: 120px;
-  padding: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: 1rem;
-  resize: vertical;
-  transition: all 0.15s ease;
-}
-
-.composer-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-subtle);
-}
-
-.composer-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 12px;
-}
-
-.composer-char-count {
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-}
-
-.composer-char-count.warning {
-  color: var(--warning);
-}
-
-.composer-char-count.error {
-  color: var(--error);
-}
-
-.composer-add-quote {
-  width: 100%;
-  padding: 12px 16px;
-  margin-bottom: 12px;
-  background: var(--bg-tertiary);
-  border: 1px dashed var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.composer-add-quote:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-.composer-quote-input-wrapper {
-  margin-bottom: 12px;
-}
-
-.composer-quote-input {
-  width: 100%;
-  padding: 12px 16px;
-  background: linear-gradient(
-    135deg,
-    rgba(79, 70, 229, 0.05),
-    rgba(168, 85, 247, 0.05)
-  );
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--accent);
-  border-radius: 0 var(--radius-md) var(--radius-md) 0;
-  color: var(--text-primary);
-  font-size: 0.95rem;
-  font-style: italic;
-  resize: vertical;
-  font-family: inherit;
-  transition: all 0.15s ease;
-}
-
-.composer-quote-input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.composer-quote-input::placeholder {
-  color: var(--text-tertiary);
-  font-style: italic;
-}
-
-.composer-quote-remove-btn {
-  margin-top: 8px;
-  padding: 6px 12px;
-  background: none;
-  border: none;
-  color: var(--text-tertiary);
-  font-size: 0.85rem;
-  cursor: pointer;
-}
-
-.composer-quote-remove-btn:hover {
-  color: var(--error);
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--bg-tertiary) 25%,
-    var(--bg-hover) 50%,
-    var(--bg-tertiary) 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-  border-radius: var(--radius-sm);
-}
-
-.skeleton-text {
-  height: 1em;
-  margin-bottom: 8px;
-}
-
-.skeleton-text:last-child {
-  width: 60%;
-}
-
-@media (max-width: 640px) {
-  .main-content {
-    padding: 16px 12px;
-  }
-
-  .navbar-inner {
-    padding: 0 16px;
-  }
-
-  .page-title {
-    font-size: 1.5rem;
-  }
-
-  .url-input-container {
-    flex-direction: column;
-  }
-
-  .profile-header {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .profile-stats {
-    justify-content: center;
-  }
-}
-
-.main {
-  flex: 1;
-  width: 100%;
-}
-
-.page-container {
-  max-width: 680px;
-  margin: 0 auto;
-  padding: 24px 16px;
-}
-
-.navbar-logo {
-  width: 32px;
-  height: 32px;
-  background: linear-gradient(135deg, var(--accent), #8b5cf6);
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 1rem;
-  color: white;
-}
-
-.navbar-user {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.navbar-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 0.85rem;
-  color: white;
-  text-decoration: none;
-}
-
-.btn-sm {
-  padding: 6px 12px;
-  font-size: 0.85rem;
-}
-
-.composer-url {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  word-break: break-all;
-}
-
-.composer-quote {
-  position: relative;
-  padding: 12px 16px;
-  padding-right: 36px;
-  background: var(--bg-secondary);
-  border-left: 3px solid var(--accent);
-  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
-  margin-bottom: 16px;
-  font-style: italic;
-  color: var(--text-secondary);
-}
-
-.composer-quote-remove {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  border-radius: var(--radius-full);
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  font-size: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.composer-quote-remove:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.composer-input {
-  width: 100%;
-  min-height: 120px;
-  padding: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: 1rem;
-  resize: vertical;
-  transition: all 0.15s ease;
-}
-
-.composer-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-subtle);
-}
-
-.composer-input::placeholder {
-  color: var(--text-tertiary);
-}
-
-.composer-tags {
-  margin-top: 12px;
-}
-
-.composer-tags-input {
-  width: 100%;
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: 0.95rem;
-  transition: all 0.15s ease;
-}
-
-.composer-tags-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-subtle);
-}
-
-.composer-tags-input::placeholder {
-  color: var(--text-tertiary);
-}
-
-.composer-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 12px;
-}
-
-.composer-count {
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-}
-
-.composer-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.composer-error {
-  margin-top: 12px;
-  padding: 12px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: var(--radius-md);
-  color: var(--error);
-  font-size: 0.9rem;
-}
-
-.annotation-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 12px;
-  margin-bottom: 8px;
-}
-
-.annotation-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 10px;
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  font-size: 0.8rem;
-  font-weight: 500;
-  border-radius: var(--radius-full);
-  transition: all 0.15s ease;
-  border: 1px solid transparent;
-  text-decoration: none;
-}
-
-.annotation-tag:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  border-color: var(--border);
-  transform: translateY(-1px);
-}
-
-.url-input-wrapper {
-  margin-bottom: 24px;
-}
-
-.url-input {
-  width: 100%;
-  padding: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: 1.1rem;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.url-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 4px var(--accent-subtle);
-  background: var(--bg-primary);
-}
-
-.url-input::placeholder {
-  color: var(--text-tertiary);
-}
-
-.annotation-detail-page {
-  max-width: 680px;
-  margin: 0 auto;
-  padding: 24px 16px;
-}
-
-.annotation-detail-header {
-  margin-bottom: 24px;
-}
-
-.back-link {
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 0.9rem;
-}
-
-.back-link:hover {
-  color: var(--accent);
-}
-
-.replies-section {
-  margin-top: 32px;
-}
-
-.replies-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: var(--text-primary);
-}
-
-.reply-form {
-  margin-bottom: 24px;
-}
-
-.reply-input {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  font-size: 0.95rem;
-  resize: vertical;
-  margin-bottom: 12px;
-  font-family: inherit;
-}
-
-.reply-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-subtle);
-}
-
-.replies-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.reply-card {
-  padding: 16px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border);
-}
-
-.reply-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.reply-avatar-link {
-  text-decoration: none;
-}
-
-.reply-avatar {
-  width: 36px;
-  height: 36px;
-  min-width: 36px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 0.85rem;
-  color: white;
-  overflow: hidden;
-}
-
-.reply-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.reply-meta {
-  flex: 1;
-  min-width: 0;
-}
-
-.reply-author {
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.reply-handle {
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-  text-decoration: none;
-  margin-left: 6px;
-}
-
-.reply-handle:hover {
-  color: var(--accent);
-  text-decoration: underline;
-}
-
-.reply-time {
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-  white-space: nowrap;
-}
-
-.reply-text {
-  color: var(--text-primary);
-  line-height: 1.5;
-  margin: 0;
-}
-
-.replies-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.replies-title svg {
-  color: var(--accent);
-}
-
-.replies-list-threaded {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.reply-card-threaded {
-  padding: 16px;
-  transition: background 0.15s ease;
-}
-
-.reply-card-threaded .reply-header {
-  margin-bottom: 8px;
-}
-
-.reply-card-threaded .reply-meta {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.reply-dot {
-  color: var(--text-tertiary);
-  font-size: 0.75rem;
-}
-
-.reply-actions {
-  display: flex;
-  gap: 4px;
-  margin-left: auto;
-}
-
-.reply-action-btn {
-  background: none;
-  border: none;
-  padding: 4px 8px;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.reply-action-btn:hover {
-  color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-.reply-action-delete:hover {
-  color: var(--error);
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.replying-to-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  margin-bottom: 12px;
-  background: var(--accent-subtle);
-  border-radius: var(--radius-sm);
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-}
-
-.cancel-reply {
-  background: none;
-  border: none;
-  font-size: 1.2rem;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  padding: 0 4px;
-  line-height: 1;
-}
-
-.cancel-reply:hover {
-  color: var(--text-primary);
-}
-
-.reply-form.card {
-  padding: 16px;
-  margin-bottom: 16px;
-}
-
-.reply-form-actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.inline-replies {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.main-reply-composer {
-  margin-top: 16px;
-  background: var(--bg-secondary);
-  padding: 12px;
-  border-radius: var(--radius-md);
-}
-
-.reply-input {
-  width: 100%;
-  min-height: 80px;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-card);
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 0.95rem;
-  resize: vertical;
-  display: block;
-}
-
-.reply-input:focus {
-  border-color: var(--accent);
-  outline: none;
-}
-
-.reply-input.small {
-  min-height: 60px;
-  font-size: 0.9rem;
-  margin-bottom: 8px;
-}
-
-.composer-actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.btn-block {
-  width: 100%;
-  text-align: left;
-  padding: 8px 12px;
-  color: var(--text-secondary);
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-md);
-  margin-top: 8px;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-block:hover {
-  background: var(--border);
-  color: var(--text-primary);
-}
-
-.annotation-action.active {
-  color: var(--accent);
-}
-
-.new-page {
-  max-width: 600px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  margin: 60px auto;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.navbar {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  background: rgba(12, 10, 20, 0.95);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--border);
-}
-
-.navbar-inner {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 12px 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-}
-
-.navbar-brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  text-decoration: none;
-  flex-shrink: 0;
-}
-
-.navbar-logo {
-  width: 32px;
-  height: 32px;
-  background: linear-gradient(135deg, var(--accent), #8b5cf6);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 1rem;
-  color: white;
-}
-
-.navbar-title {
-  font-weight: 700;
-  font-size: 1.25rem;
-  color: var(--text-primary);
-}
-
-.navbar-center {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--bg-tertiary);
-  padding: 4px;
-  border-radius: var(--radius-lg);
-}
-
-.navbar-link {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  text-decoration: none;
-  border-radius: var(--radius-md);
-  transition: all 0.15s ease;
-}
-
-.navbar-link:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-
-.navbar-link.active {
-  color: var(--text-primary);
-  background: var(--bg-card);
-  box-shadow: var(--shadow-sm);
-}
-
-.navbar-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-shrink: 0;
-}
-
-.navbar-icon-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  color: var(--text-tertiary);
-  border-radius: var(--radius-md);
-  transition: all 0.15s ease;
-}
-
-.navbar-icon-link:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.navbar-icon-link.active {
-  color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-.navbar-new-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  background: linear-gradient(135deg, var(--accent), #8b5cf6);
-  color: white;
-  font-size: 0.85rem;
-  font-weight: 600;
-  text-decoration: none;
-  border-radius: var(--radius-full);
-  transition: all 0.2s ease;
-}
-
-.navbar-new-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
-  color: white;
-}
-
-.navbar-user-section {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.navbar-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 0.75rem;
-  color: white;
-  text-decoration: none;
-  transition: transform 0.15s ease;
-}
-
-.navbar-avatar:hover {
-  transform: scale(1.05);
-}
-
-.navbar-logout {
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  color: var(--text-tertiary);
-  font-size: 1.25rem;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.navbar-logout:hover {
-  color: var(--error);
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.navbar-signin {
-  padding: 8px 16px;
-  background: var(--accent);
-  color: white;
-  font-size: 0.9rem;
-  font-weight: 500;
-  text-decoration: none;
-  border-radius: var(--radius-full);
-  transition: all 0.15s ease;
-}
-
-.navbar-signin:hover {
-  background: var(--accent-hover);
-  color: white;
-}
-
-.navbar-user-menu {
-  position: relative;
-}
-
-.navbar-avatar-btn {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  border: none;
-  cursor: pointer;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition:
-    transform 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.navbar-avatar-btn:hover {
-  transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
-}
-
-.navbar-avatar-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.navbar-avatar-text {
-  font-weight: 600;
-  font-size: 0.75rem;
-  color: white;
-}
-
-.navbar-dropdown {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  min-width: 200px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  overflow: hidden;
-  z-index: 1001;
-  animation: dropdownFade 0.15s ease;
-}
-
-@keyframes dropdownFade {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.navbar-dropdown-header {
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-}
-
-.navbar-dropdown-name {
-  display: block;
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: 0.9rem;
-}
-
-.navbar-dropdown-handle {
-  display: block;
-  color: var(--text-tertiary);
-  font-size: 0.8rem;
-  margin-top: 2px;
-}
-
-.navbar-dropdown-divider {
-  height: 1px;
-  background: var(--border);
-}
-
-.navbar-dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 0.9rem;
-  color: var(--text-primary);
-  text-decoration: none;
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition: background 0.15s ease;
-  text-align: left;
-}
-
-.navbar-dropdown-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.navbar-dropdown-logout {
-  color: var(--error);
-  border-top: 1px solid var(--border);
-}
-
-.navbar-dropdown-logout:hover {
-  background: rgba(239, 68, 68, 0.1);
-}
-
-@media (max-width: 768px) {
-  .navbar-inner {
-    padding: 10px 16px;
-  }
-
-  .navbar-title {
-    display: none;
-  }
-
-  .navbar-center {
-    display: none;
-  }
-
-  .navbar-new-btn span {
-    display: none;
-  }
-
-  .navbar-new-btn {
-    width: 36px;
-    height: 36px;
-    padding: 0;
-    justify-content: center;
-  }
-}
-
-.collections-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-
-.collection-row {
-  display: flex;
-  align-items: center;
-  background: var(--bg-card);
-  transition: background 0.15s ease;
-}
-
-.collection-row:not(:last-child) {
-  border-bottom: 1px solid var(--border);
-}
-
-.collection-row:hover {
-  background: var(--bg-secondary);
-}
-
-.collection-row-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px 20px;
-  text-decoration: none;
-  min-width: 0;
-}
-
-.collection-row-icon {
-  width: 44px;
-  height: 44px;
-  min-width: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(
-    135deg,
-    rgba(79, 70, 229, 0.1),
-    rgba(168, 85, 247, 0.15)
-  );
-  color: var(--accent);
-  border-radius: var(--radius-md);
-  transition: all 0.2s ease;
-}
-
-.collection-row:hover .collection-row-icon {
-  background: linear-gradient(
-    135deg,
-    rgba(79, 70, 229, 0.15),
-    rgba(168, 85, 247, 0.2)
-  );
-  transform: scale(1.05);
-}
-
-.collection-row-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.collection-row-name {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 2px 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.collection-row:hover .collection-row-name {
-  color: var(--accent);
-}
-
-.collection-row-desc {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.collection-row-arrow {
-  color: var(--text-tertiary);
-  opacity: 0;
-  transition: all 0.2s ease;
-}
-
-.collection-row:hover .collection-row-arrow {
-  opacity: 1;
-  color: var(--accent);
-  transform: translateX(2px);
-}
-
-.collection-row-edit {
-  padding: 10px;
-  margin-right: 12px;
-  color: var(--text-tertiary);
-  background: none;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.15s ease;
-}
-
-.collection-row:hover .collection-row-edit {
-  opacity: 1;
-}
-
-.collection-row-edit:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--text-tertiary);
-  font-size: 0.9rem;
-  font-weight: 500;
-  text-decoration: none;
-  margin-bottom: 24px;
-  transition: color 0.15s ease;
-}
-
-.back-link:hover {
-  color: var(--accent);
-}
-
-.collection-detail-header {
-  display: flex;
-  gap: 20px;
-  padding: 24px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  margin-bottom: 32px;
-  position: relative;
-}
-
-.collection-detail-icon {
-  width: 56px;
-  height: 56px;
-  min-width: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(
-    135deg,
-    rgba(79, 70, 229, 0.1),
-    rgba(168, 85, 247, 0.1)
-  );
-  color: var(--accent);
-  border-radius: var(--radius-md);
-}
-
-.collection-detail-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.collection-detail-visibility {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--accent);
-  text-transform: capitalize;
-  margin-bottom: 8px;
-}
-
-.collection-detail-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 8px;
-  line-height: 1.3;
-}
-
-.collection-detail-desc {
-  color: var(--text-secondary);
-  font-size: 1rem;
-  line-height: 1.5;
-  margin-bottom: 12px;
-  max-width: 600px;
-}
-
-.collection-detail-stats {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-}
-
-.collection-detail-actions {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.collection-detail-actions .share-menu-container {
-  display: flex;
-  align-items: center;
-}
-
-.collection-detail-actions .annotation-action {
-  padding: 10px;
-  color: var(--text-tertiary);
-  background: none;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.collection-detail-actions .annotation-action:hover {
-  color: var(--accent);
-  background: var(--bg-tertiary);
-}
-
-.collection-detail-edit,
-.collection-detail-delete {
-  padding: 10px;
-  color: var(--text-tertiary);
-  background: none;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.collection-detail-edit:hover {
-  color: var(--accent);
-  background: var(--bg-tertiary);
-}
-
-.collection-detail-delete:hover {
-  color: var(--error);
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.collection-item-wrapper {
-  position: relative;
-}
-
-.collection-item-remove {
-  position: absolute;
-  top: 12px;
-  left: -40px;
-  z-index: 10;
-  padding: 8px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-tertiary);
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.15s ease;
-}
-
-.collection-item-wrapper:hover .collection-item-remove {
-  opacity: 1;
-}
-
-.collection-item-remove:hover {
-  color: var(--error);
-  border-color: var(--error);
-  background: rgba(239, 68, 68, 0.05);
-}
-
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  z-index: 50;
-  animation: fadeIn 0.2s ease-out;
-}
-
-.modal-container {
-  background: var(--bg-secondary);
-  border-radius: var(--radius-lg);
-  width: 100%;
-  max-width: 28rem;
-  border: 1px solid var(--border);
-  box-shadow: var(--shadow-lg);
-  animation: zoomIn 0.2s ease-out;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.modal-close-btn {
-  padding: 8px;
-  color: var(--text-tertiary);
-  border-radius: var(--radius-md);
-  transition: color 0.15s;
-}
-
-.modal-close-btn:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-
-.modal-form {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.icon-picker-tabs {
-  display: flex;
-  gap: 4px;
-  margin-bottom: 12px;
-}
-
-.icon-picker-tab {
-  flex: 1;
-  padding: 8px 12px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.icon-picker-tab:hover {
-  background: var(--bg-tertiary);
-}
-
-.icon-picker-tab.active {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: white;
-}
-
-.emoji-picker-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.emoji-custom-input input {
-  width: 100%;
-}
-
-.emoji-picker,
-.icon-picker {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  max-height: 120px;
-  overflow-y: auto;
-  padding: 8px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-}
-
-.emoji-option,
-.icon-option {
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2rem;
-  background: transparent;
-  border: 2px solid transparent;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  color: var(--text-secondary);
-}
-
-.emoji-option:hover,
-.icon-option:hover {
-  background: var(--bg-tertiary);
-  transform: scale(1.1);
-  color: var(--text-primary);
-}
-
-.emoji-option.selected,
-.icon-option.selected {
-  border-color: var(--accent);
-  background: var(--accent-subtle);
-  color: var(--accent);
-}
-
-.form-group {
-  margin-bottom: 0;
-}
-
-.form-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 4px;
-}
-
-.form-input,
-.form-textarea,
-.form-select {
-  width: 100%;
-  padding: 8px 12px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  transition: all 0.15s;
-}
-
-.form-input:focus,
-.form-textarea:focus,
-.form-select:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-subtle);
-}
-
-.form-textarea {
-  resize: none;
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding-top: 8px;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes zoomIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.annotation-detail-page {
-  max-width: 680px;
-  margin: 0 auto;
-  padding: 24px 16px;
-}
-
-.annotation-detail-header {
-  margin-bottom: 24px;
-}
-
-.back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  transition: color 0.15s;
-}
-
-.back-link:hover {
-  color: var(--text-primary);
-}
-
-.text-secondary {
-  color: var(--text-secondary);
-}
-
-.text-error {
-  color: var(--error);
-}
-
-.text-center {
-  text-align: center;
-}
-
-.flex {
-  display: flex;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.gap-2 {
-  gap: 8px;
-}
-
-.gap-3 {
-  gap: 12px;
-}
-
-.mt-3 {
-  margin-top: 12px;
-}
-
-.mb-6 {
-  margin-bottom: 24px;
-}
-
-.btn-text {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: color 0.15s;
-}
-
-.btn-text:hover {
-  color: var(--text-primary);
-}
-
-.btn-sm {
-  padding: 6px 12px;
-  font-size: 0.85rem;
-}
-
-.annotation-edit-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 6px 8px;
-  color: var(--text-tertiary);
-  border-radius: var(--radius-sm);
-  transition: all 0.15s ease;
-}
-
-.annotation-edit-btn:hover {
-  color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-.spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.spinner-sm {
-  width: 16px;
-  height: 16px;
-  border-width: 2px;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.collection-list-item {
-  width: 100%;
-  text-align: left;
-  padding: 12px 16px;
-  border-radius: var(--radius-md);
-  background: var(--bg-primary);
-  border: 1px solid transparent;
-  color: var(--text-primary);
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-}
-
-.collection-list-item:hover {
-  background: var(--bg-hover);
-  border-color: var(--border);
-}
-
-.collection-list-item:hover .collection-list-item-icon {
-  opacity: 1;
-}
-
-.collection-list-item:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.item-delete-overlay {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 10;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.card:hover .item-delete-overlay,
-div:hover > .item-delete-overlay {
-  opacity: 1;
-}
-
-.btn-icon-danger {
-  padding: 8px;
-  background: var(--error);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  box-shadow: var(--shadow-md);
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-icon-danger:hover {
-  background: #dc2626;
-  transform: scale(1.05);
-}
-
-.action-buttons {
-  display: flex;
-  gap: 8px;
-}
-
-.action-buttons-end {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.filter-tab {
-  padding: 8px 16px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.filter-tab:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-
-.filter-tab.active {
-  color: var(--text-primary);
-  background: var(--bg-card);
-  box-shadow: var(--shadow-sm);
-}
-
-.inline-reply {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
-}
-
-.inline-reply:last-child {
-  border-bottom: none;
-}
-
-.inline-reply-avatar {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--accent), #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 0.7rem;
-  color: white;
-  overflow: hidden;
-}
-
-.inline-reply-avatar img,
-.inline-reply-avatar-placeholder {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.inline-reply-avatar-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 0.7rem;
-  color: white;
-}
-
-.inline-reply-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.inline-reply-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.inline-reply-author {
-  font-weight: 600;
-  font-size: 0.85rem;
-  color: var(--text-primary);
-}
-
-.inline-reply-handle {
-  color: var(--text-tertiary);
-  font-size: 0.8rem;
-  text-decoration: none;
-}
-
-.inline-reply-time {
-  color: var(--text-tertiary);
-  font-size: 0.75rem;
-  margin-left: auto;
-}
-
-.inline-reply-text {
-  font-size: 0.9rem;
-  color: var(--text-primary);
-  line-height: 1.5;
-}
-
-.inline-reply-action {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-  background: none;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.inline-reply-action:hover {
-  color: var(--text-secondary);
-  background: var(--bg-hover);
-}
-
-.inline-reply-composer {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 12px 16px;
-}
-
-.history-panel {
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 1rem;
-  margin-bottom: 1rem;
-  font-size: 0.9rem;
-  animation: fadeIn 0.2s ease-out;
-}
-
-.history-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.history-title {
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.history-list {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.history-item {
-  position: relative;
-  padding-left: 1rem;
-  border-left: 2px solid var(--border);
-}
-
-.history-date {
-  font-size: 0.75rem;
-  color: var(--text-tertiary);
-  margin-bottom: 0.25rem;
-}
-
-.history-content {
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-}
-
-.history-close-btn {
-  color: var(--text-tertiary);
-  padding: 4px;
-  border-radius: var(--radius-sm);
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.history-close-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.history-status {
-  text-align: center;
-  color: var(--text-tertiary);
-  font-style: italic;
-  padding: 1rem;
-}
-
-.form-label {
-  display: block;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-}
-
-.color-input-container {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background: var(--bg-tertiary);
-  padding: 8px 12px;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border);
-  width: fit-content;
-}
-
-.color-input-wrapper {
-  position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-full);
-  overflow: hidden;
-  border: 2px solid var(--border);
-  cursor: pointer;
-  transition: transform 0.1s;
-}
-
-.color-input-wrapper:hover {
-  transform: scale(1.1);
-  border-color: var(--accent);
-}
-
-.color-input-wrapper input[type="color"] {
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  padding: 0;
-  margin: 0;
-  border: none;
-  cursor: pointer;
-  opacity: 0;
-}
-
-.bookmark-card {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.bookmark-preview {
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.bookmark-preview:hover {
-  border-color: var(--accent);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-.bookmark-preview::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  background: var(--accent);
-  opacity: 0.7;
-}
-
-.bookmark-preview-content {
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.bookmark-preview-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.bookmark-preview-site {
-  font-size: 0.75rem;
-  color: var(--accent);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.bookmark-preview-title {
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  line-height: 1.4;
-}
-
-.bookmark-preview-desc {
-  font-size: 0.95rem;
-  color: var(--text-secondary);
-  line-height: 1.6;
-}
-
-.bookmark-preview-arrow {
-  display: none;
-}
-
-.bookmark-preview:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--accent-subtle);
-  transform: translateY(-1px);
-}
-
-.bookmark-preview-content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.bookmark-preview-site {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--accent);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.bookmark-preview-title {
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--text-primary);
-  margin: 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.bookmark-preview-desc {
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  line-height: 1.5;
-  margin: 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.bookmark-preview-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-tertiary);
-  padding: 0 4px;
-  transition: all 0.2s ease;
-}
-
-.bookmark-preview:hover .bookmark-preview-arrow {
-  color: var(--accent);
-  transform: translateX(2px);
-}
-
-.navbar-logo-img {
-  width: 24px;
-  height: 24px;
-  object-fit: contain;
-}
-
-.login-logo-img {
-  width: 80px;
-  height: 80px;
-  margin-bottom: 24px;
-  object-fit: contain;
-}
-
-.legal-content {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.legal-content h1 {
-  font-size: 2rem;
-  margin-bottom: 8px;
-  color: var(--text-primary);
-}
-
-.legal-content h2 {
-  font-size: 1.4rem;
-  margin-top: 32px;
-  margin-bottom: 12px;
-  color: var(--text-primary);
-}
-
-.legal-content h3 {
-  font-size: 1.1rem;
-  margin-top: 20px;
-  margin-bottom: 8px;
-  color: var(--text-primary);
-}
-
-.legal-content p {
-  color: var(--text-secondary);
-  line-height: 1.7;
-  margin-bottom: 12px;
-}
-
-.legal-content ul {
-  color: var(--text-secondary);
-  line-height: 1.7;
-  margin-left: 24px;
-  margin-bottom: 12px;
-}
-
-.legal-content li {
-  margin-bottom: 6px;
-}
-
-.legal-content a {
-  color: var(--accent);
-  text-decoration: none;
-}
-
-.legal-content a:hover {
-  text-decoration: underline;
-}
-
-.legal-content section {
-  margin-bottom: 24px;
-}
-
-.input {
-  width: 100%;
-  padding: 12px 14px;
-  font-size: 0.95rem;
-  color: var(--text-primary);
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  outline: none;
-  transition: all 0.15s ease;
-}
-
-.input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-subtle);
-}
-
-.input::placeholder {
-  color: var(--text-tertiary);
-}
-
-.notifications-page {
-  max-width: 680px;
-  margin: 0 auto;
-}
-
-.notifications-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.notification-item {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-  text-decoration: none;
-  color: inherit;
-}
-
-.notification-item:hover {
-  background: var(--bg-hover);
-}
-
-.notification-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  flex-shrink: 0;
-}
-
-.notification-icon[data-type="like"] {
-  color: #ef4444;
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.notification-icon[data-type="reply"] {
-  color: #3b82f6;
-  background: rgba(59, 130, 246, 0.1);
-}
-
-.notification-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.notification-text {
-  font-size: 0.95rem;
-  margin-bottom: 4px;
-  line-height: 1.4;
-  color: var(--text-primary);
-}
-
-.notification-text strong {
-  font-weight: 600;
-}
-
-.notification-time {
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-}
-
-.notification-link {
-  position: relative;
-}
-
-.notification-badge {
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  background: var(--error);
-  color: white;
-  font-size: 0.7rem;
-  font-weight: 700;
-  min-width: 16px;
-  height: 16px;
-  border-radius: var(--radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 4px;
-  border: 2px solid var(--bg-primary);
-}
+@import "./css/layout.css";
+@import "./css/base.css";
+@import "./css/buttons.css";
+@import "./css/buttons.css";
+@import "./css/feed.css";
+@import "./css/profile.css";
+@import "./css/login.css";
+@import "./css/annotations.css";
+@import "./css/collections.css";
+@import "./css/modals.css";
+@import "./css/notifications.css";
+@import "./css/skeleton.css";
+@import "./css/utilities.css";

web/src/pages/Feed.jsx

···
 import AnnotationCard, { HighlightCard } from "../components/AnnotationCard";
 import BookmarkCard from "../components/BookmarkCard";
 import CollectionItemCard from "../components/CollectionItemCard";
+import AnnotationSkeleton from "../components/AnnotationSkeleton";
 import { getAnnotationFeed, deleteHighlight } from "../api/client";
 import { AlertIcon, InboxIcon } from "../components/Icons";
 import { useAuth } from "../context/AuthContext";
···
         </button>
       </div>
 
-      {loading && (
+      {loading ? (
         <div className="feed">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="card">
-              <div
-                className="skeleton skeleton-text"
-                style={{ width: "40%" }}
-              />
-              <div className="skeleton skeleton-text" />
-              <div className="skeleton skeleton-text" />
-              <div
-                className="skeleton skeleton-text"
-                style={{ width: "60%" }}
-              />
-            </div>
+          {[1, 2, 3, 4, 5].map((i) => (
+            <AnnotationSkeleton key={i} />
           ))}
         </div>
-      )}
-
-      {error && (
-        <div className="empty-state">
-          <div className="empty-state-icon">
-            <AlertIcon size={32} />
-          </div>
-          <h3 className="empty-state-title">Something went wrong</h3>
-          <p className="empty-state-text">{error}</p>
-        </div>
-      )}
+      ) : (
+        <>
+          {error && (
+            <div className="empty-state">
+              <div className="empty-state-icon">
+                <AlertIcon size={32} />
+              </div>
+              <h3 className="empty-state-title">Something went wrong</h3>
+              <p className="empty-state-text">{error}</p>
+            </div>
+          )}
 
-      {!loading && !error && filteredAnnotations.length === 0 && (
-        <div className="empty-state">
-          <div className="empty-state-icon">
-            <InboxIcon size={32} />
-          </div>
-          <h3 className="empty-state-title">No items yet</h3>
-          <p className="empty-state-text">
-            {filter === "all"
-              ? "Be the first to annotate something!"
-              : `No ${filter} items found.`}
-          </p>
-        </div>
-      )}
+          {!error && filteredAnnotations.length === 0 && (
+            <div className="empty-state">
+              <div className="empty-state-icon">
+                <InboxIcon size={32} />
+              </div>
+              <h3 className="empty-state-title">No items yet</h3>
+              <p className="empty-state-text">
+                {filter === "all"
+                  ? "Be the first to annotate something!"
+                  : `No ${filter} items found.`}
+              </p>
+            </div>
+          )}
 
-      {!loading && !error && filteredAnnotations.length > 0 && (
-        <div className="feed">
-          {filteredAnnotations.map((item) => {
-            if (item.type === "CollectionItem") {
-              return <CollectionItemCard key={item.id} item={item} />;
-            }
-            if (
-              item.type === "Highlight" ||
-              item.motivation === "highlighting"
-            ) {
-              return (
-                <HighlightCard
-                  key={item.id}
-                  highlight={item}
-                  onDelete={async (uri) => {
-                    const rkey = uri.split("/").pop();
-                    await deleteHighlight(rkey);
-                    setAnnotations((prev) =>
-                      prev.filter((a) => a.id !== item.id),
-                    );
-                  }}
-                  onAddToCollection={() =>
-                    setCollectionModalState({
-                      isOpen: true,
-                      uri: item.uri || item.id,
-                    })
-                  }
-                />
-              );
-            }
-            if (item.type === "Bookmark" || item.motivation === "bookmarking") {
-              return (
-                <BookmarkCard
-                  key={item.id}
-                  bookmark={item}
-                  onAddToCollection={() =>
-                    setCollectionModalState({
-                      isOpen: true,
-                      uri: item.uri || item.id,
-                    })
-                  }
-                />
-              );
-            }
-            return (
-              <AnnotationCard
-                key={item.id}
-                annotation={item}
-                onAddToCollection={() =>
-                  setCollectionModalState({
-                    isOpen: true,
-                    uri: item.uri || item.id,
-                  })
+          {!error && filteredAnnotations.length > 0 && (
+            <div className="feed">
+              {filteredAnnotations.map((item) => {
+                if (item.type === "CollectionItem") {
+                  return <CollectionItemCard key={item.id} item={item} />;
                 }
-              />
-            );
-          })}
-        </div>
+                if (
+                  item.type === "Highlight" ||
+                  item.motivation === "highlighting"
+                ) {
+                  return (
+                    <HighlightCard
+                      key={item.id}
+                      highlight={item}
+                      onDelete={async (uri) => {
+                        const rkey = uri.split("/").pop();
+                        await deleteHighlight(rkey);
+                        setAnnotations((prev) =>
+                          prev.filter((a) => a.id !== item.id),
+                        );
+                      }}
+                      onAddToCollection={() =>
+                        setCollectionModalState({
+                          isOpen: true,
+                          uri: item.uri || item.id,
+                        })
+                      }
+                    />
+                  );
+                }
+                if (
+                  item.type === "Bookmark" ||
+                  item.motivation === "bookmarking"
+                ) {
+                  return (
+                    <BookmarkCard
+                      key={item.id}
+                      bookmark={item}
+                      onAddToCollection={() =>
+                        setCollectionModalState({
+                          isOpen: true,
+                          uri: item.uri || item.id,
+                        })
+                      }
+                    />
+                  );
+                }
+                return (
+                  <AnnotationCard
+                    key={item.id}
+                    annotation={item}
+                    onAddToCollection={() =>
+                      setCollectionModalState({
+                        isOpen: true,
+                        uri: item.uri || item.id,
+                      })
+                    }
+                  />
+                );
+              })}
+            </div>
+          )}
+        </>
       )}
 
       {collectionModalState.isOpen && (

web/src/pages/Terms.jsx

···
+import { ArrowLeft } from "lucide-react";
+import { Link } from "react-router-dom";
+
+export default function Terms() {
+  return (
+    <div className="feed-page">
+      <Link to="/" className="back-link">
+        <ArrowLeft size={18} />
+        <span>Home</span>
+      </Link>
+
+      <div className="legal-content">
+        <h1>Terms of Service</h1>
+        <p className="text-secondary">Last updated: January 17, 2026</p>
+
+        <section>
+          <h2>Overview</h2>
+          <p>
+            Margin is an open-source project. By using our service, you agree to
+            these terms ("Terms"). If you do not agree to these Terms, please do
+            not use the Service.
+          </p>
+        </section>
+
+        <section>
+          <h2>Open Source</h2>
+          <p>
+            Margin is open source software. The code is available publicly and
+            is provided "as is", without warranty of any kind, express or
+            implied.
+          </p>
+        </section>
+
+        <section>
+          <h2>User Conduct</h2>
+          <p>
+            You are responsible for your use of the Service and for any content
+            you provide, including compliance with applicable laws, rules, and
+            regulations.
+          </p>
+          <p>
+            We reserve the right to remove any content that violates these
+            terms, including but not limited to:
+          </p>
+          <ul>
+            <li>Illegal content</li>
+            <li>Harassment or hate speech</li>
+            <li>Spam or malicious content</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>Decentralized Nature</h2>
+          <p>
+            Margin interacts with the AT Protocol network. We do not control the
+            network itself or the data stored on your Personal Data Server
+            (PDS). Please refer to the terms of your PDS provider for data
+            storage policies.
+          </p>
+        </section>
+
+        <section>
+          <h2>Disclaimer</h2>
+          <p>
+            THE SERVICE IS PROVIDED "AS IS" AND "AS AVAILABLE". WE DISCLAIM ALL
+            CONDITIONS, REPRESENTATIONS AND WARRANTIES NOT EXPRESSLY SET OUT IN
+            THESE TERMS.
+          </p>
+        </section>
+
+        <section>
+          <h2>Contact</h2>
+          <p>
+            For questions about these Terms, please contact us at{" "}
+            <a href="mailto:[e-mail]">[e-mail]</a>
+          </p>
+        </section>
+      </div>
+    </div>
+  );
+}