:root {
      --bg: #ffffff;
      --bg-secondary: #f8f8f8;
      --text: #1a1a1a;
      --text-secondary: #666666;
      --text-ghost: #bbbbbb;
      --accent: #1a1a1a;
      --accent-hover: #333333;
      --border: rgba(0,0,0,0.1);
      --shadow: 0 2px 8px rgba(0,0,0,0.06);
      --btn-bg: #ffffff;
      --btn-bg-hover: #f3f3f3;
      --btn-border: rgba(0,0,0,0.12);
      --btn-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.08);
      --btn-shadow-hover: 0 2px 0 rgba(0,0,0,0.06), 0 10px 22px rgba(0,0,0,0.12);
      --btn-ring: 0 0 0 3px rgba(0,0,0,0.08);
      --speed-read-backdrop: rgba(252, 250, 246, 0.86);
      --speed-read-panel-bg: rgba(255, 255, 255, 0.92);
      --speed-read-panel-border: rgba(0, 0, 0, 0.08);
      --speed-read-panel-shadow: 0 30px 80px rgba(0,0,0,0.12);
      --speed-read-line: rgba(0, 0, 0, 0.12);
      --speed-read-orp: #e11d48;
      --font-serif: 'Newsreader', Georgia, serif;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    [data-theme="dark"] {
      --bg: #111111;
      --bg-secondary: #1a1a1a;
      --text: #eeeeee;
      --text-secondary: #999999;
      --text-ghost: #555555;
      --accent: #ffffff;
      --accent-hover: #dddddd;
      --border: rgba(255,255,255,0.1);
      --shadow: 0 2px 8px rgba(0,0,0,0.3);
      --btn-bg: #161616;
      --btn-bg-hover: #1f1f1f;
      --btn-border: rgba(255,255,255,0.12);
      --btn-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.55);
      --btn-shadow-hover: 0 2px 0 rgba(255,255,255,0.06), 0 12px 26px rgba(0,0,0,0.65);
      --btn-ring: 0 0 0 3px rgba(255,255,255,0.12);
      --speed-read-backdrop: rgba(5, 6, 7, 0.78);
      --speed-read-panel-bg: rgba(18, 18, 19, 0.88);
      --speed-read-panel-border: rgba(255, 255, 255, 0.12);
      --speed-read-panel-shadow: 0 40px 110px rgba(0,0,0,0.65);
      --speed-read-line: rgba(255, 255, 255, 0.14);
      --speed-read-orp: #fb7185;
    }

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

    body {
      font-family: var(--font-serif);
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    /* Layout */
    .app { min-height: 100vh; display: flex; }

    /* Sidebar */
    .sidebar {
      width: 280px;
      background: var(--bg-secondary);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      position: fixed;
      height: 100vh;
      left: 0;
      top: 0;
      z-index: 100;
      transform: translateX(-100%);
      transition: transform 0.3s ease, width 0.2s ease, border-color 0.2s ease;
      overflow: hidden;
    }
    .sidebar.open { transform: translateX(0); }
    @media (min-width: 1024px) {
      .sidebar {
        position: sticky;
        transform: translateX(0);
        width: 0;
        border-right: none;
        pointer-events: none;
      }
      .sidebar.open {
        width: 280px;
        border-right: 1px solid var(--border);
        pointer-events: auto;
      }
    }

    .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s;
      z-index: 99;
    }
    .sidebar.open + .sidebar-overlay { opacity: 1; visibility: visible; }
    @media (min-width: 1024px) { .sidebar-overlay { display: none; } }

	    .sidebar-header {
	      padding: 20px;
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      border-bottom: 1px solid var(--border);
	    }
	    .logo {
	      font-family: 'Caveat', cursive;
	      font-weight: 600;
	      font-size: 22px;
	    }
	    .logo em { font-style: italic; font-weight: 500; }
	    .logo-btn {
	      background: none;
	      border: none;
	      padding: 0;
	      color: inherit;
	      cursor: pointer;
	      text-align: left;
	    }
	    .close-btn {
	      background: none;
	      border: none;
	      color: var(--text-secondary);
	      cursor: pointer;
	      font-size: 20px;
	      line-height: 1;
	    }
	    @media (min-width: 1024px) { .close-btn { display: none; } }

	    .sidebar-tools {
	      padding: 12px 16px;
	      border-bottom: 1px solid var(--border);
	    }
	    .sidebar-search {
	      width: 100%;
	      padding: 10px 12px;
	      border-radius: 10px;
	      border: 1px solid var(--border);
	      background: var(--bg);
	      color: var(--text);
	      font-family: var(--font-sans);
	      font-size: 13px;
	      outline: none;
	    }
	    .sidebar-search::placeholder { color: var(--text-ghost); }
	    .sidebar-filters {
	      display: flex;
	      flex-wrap: wrap;
	      gap: 6px;
	      margin-top: 10px;
	    }
	    .filter-chip {
	      padding: 7px 10px;
	      border-radius: 999px;
	      border: 1px solid var(--btn-border);
	      background: var(--btn-bg);
	      color: var(--text-secondary);
	      font-family: var(--font-sans);
	      font-size: 12px;
	      cursor: pointer;
	      white-space: nowrap;
	      box-shadow: 0 1px 0 rgba(0,0,0,0.04);
	      transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
	    }
	    .filter-chip:hover { color: var(--text); border-color: var(--text-secondary); box-shadow: var(--btn-shadow); }
	    .filter-chip.active {
	      background: var(--text);
	      color: var(--bg);
	      border-color: transparent;
	      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
	    }

	    .sidebar-content { flex: 1; overflow-y: auto; padding: 12px; }
    .post-item {
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 4px;
      transition: background 0.15s;
    }
    .post-item:hover { background: var(--border); }
    .post-item.active { background: var(--accent); color: white; }
    .post-item.active .post-date { color: rgba(255,255,255,0.7); }
    .post-title-preview {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .post-date {
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 4px;
    }
    .view-link, .toggle-visibility, .delete-post-btn { color: var(--text-secondary); text-decoration: underline; cursor: pointer; }
    .view-link:hover, .toggle-visibility:hover { color: var(--text); }
    .delete-post-btn:hover { color: #dc2626; }
    .post-item.active .view-link, .post-item.active .toggle-visibility, .post-item.active .delete-post-btn { color: rgba(255,255,255,0.7); }
    .post-item.active .view-link:hover, .post-item.active .toggle-visibility:hover { color: white; }
    .post-item.active .delete-post-btn:hover { color: #fca5a5; }

    .sidebar-footer { padding: 16px; border-top: 1px solid var(--border); }
    .skill-cta {
      margin-top: 12px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--bg);
      box-shadow: var(--shadow);
      display: grid;
      gap: 8px;
    }
    .skill-cta-title {
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 600;
    }
    .skill-cta-sub {
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
    }
    .skill-cta-btn { width: 100%; }
    .new-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
      color: var(--bg);
      border: none;
      border-radius: 999px;
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(0,0,0,0.18);
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    }
    .new-btn:hover { filter: brightness(1.02); box-shadow: 0 14px 26px rgba(0,0,0,0.22); }
    .new-btn:active { transform: translateY(1px); box-shadow: 0 7px 16px rgba(0,0,0,0.18); }

	    /* Main */
	    .main { flex: 1; display: flex; flex-direction: column; }

	    /* Home (notes list) */
	    .home-view {
	      flex: 1;
	      max-width: 1200px;
	      width: 100%;
	      margin: 0 auto;
	      padding: 36px 24px 120px;
	      position: relative;
	      background:
	        radial-gradient(1200px 420px at 20% -10%, rgba(255,191,105,0.18), transparent 60%),
	        radial-gradient(900px 420px at 85% 0%, rgba(127,214,255,0.16), transparent 60%),
	        radial-gradient(700px 320px at 60% 100%, rgba(255,139,160,0.16), transparent 60%);
	    }
	    .home-view::before,
	    .home-view::after {
	      content: '';
	      position: absolute;
	      width: 180px;
	      height: 180px;
	      border-radius: 40px;
	      background: linear-gradient(135deg, rgba(255,203,164,0.35), rgba(255,126,141,0.18));
	      filter: blur(2px);
	      z-index: 0;
	    }
	    .home-view::before { top: 20px; right: 40px; transform: rotate(6deg); }
	    .home-view::after { bottom: 40px; left: 30px; transform: rotate(-8deg); }
	    .home-header {
	      display: flex;
	      align-items: flex-start;
	      justify-content: space-between;
	      gap: 16px;
	      margin-bottom: 22px;
	      position: relative;
	      z-index: 1;
	    }
	    .home-hero {
	      display: flex;
	      align-items: flex-start;
	      justify-content: space-between;
	      gap: 18px;
	      margin-bottom: 16px;
	      position: relative;
	      z-index: 1;
	    }
	    .home-hero-text { max-width: 560px; }
	    .home-greeting {
	      font-family: var(--font-serif);
	      font-size: 28px;
	      font-weight: 600;
	      letter-spacing: -0.02em;
	      margin-bottom: 6px;
	    }
	    .home-hero-sub {
	      font-family: var(--font-sans);
	      font-size: 14px;
	      color: var(--text-secondary);
	    }
	    .home-chatbox {
	      margin: 16px 0 22px;
	      display: flex;
	      gap: 10px;
	      align-items: center;
	      position: relative;
	      z-index: 1;
	    }
	    .home-chat-input {
	      flex: 1;
	      padding: 12px 14px;
	      border-radius: 999px;
	      border: 1px solid var(--border);
	      background: var(--bg);
	      color: var(--text);
	      font-family: var(--font-sans);
	      font-size: 14px;
	      outline: none;
	    }
	    .home-chat-input::placeholder { color: var(--text-ghost); }
	    @media (max-width: 900px) {
	      .home-hero { flex-direction: column; }
	      .home-chatbox { flex-direction: column; align-items: stretch; }
	    }
	    .home-shell {
	      display: grid;
	      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
	      gap: 22px;
	      position: relative;
	      z-index: 1;
	    }
	    .home-left, .home-right { min-width: 0; }
	    @media (max-width: 1024px) {
	      .home-shell { grid-template-columns: 1fr; }
	    }
	    .home-panel {
	      border: 1px solid var(--border);
	      background: rgba(255,255,255,0.7);
	      border-radius: 18px;
	      padding: 16px;
	      box-shadow: var(--shadow);
	      backdrop-filter: blur(2px);
	    }
	    [data-theme="dark"] .home-panel { background: rgba(20,20,20,0.7); }
	    .home-recent {
	      background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
	      border-radius: 16px;
	      padding: 14px;
	      margin-bottom: 14px;
	    }
	    [data-theme="dark"] .home-recent {
	      background: linear-gradient(180deg, rgba(30,30,30,0.85), rgba(20,20,20,0.7));
	    }
	    .home-recent-title {
	      font-family: var(--font-sans);
	      font-size: 12px;
	      font-weight: 700;
	      letter-spacing: 0.02em;
	      text-transform: uppercase;
	    }
	    .home-recent-list {
	      display: grid;
	      gap: 8px;
	      margin-top: 10px;
	    }
	    .home-recent-item {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 12px;
	      padding: 8px 10px;
	      border-radius: 12px;
	      background: var(--bg);
	      border: 1px solid var(--border);
	      cursor: pointer;
	      overflow: hidden;
	      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
	    }
	    .home-recent-item:hover { border-color: var(--text-secondary); box-shadow: var(--shadow); transform: translateY(-1px); }
	    .home-recent-title-text {
	      font-family: var(--font-sans);
	      font-size: 13px;
	      font-weight: 600;
	      min-width: 0;
	      flex: 1 1 auto;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	    }
	    .home-recent-date {
	      font-family: var(--font-sans);
	      font-size: 11px;
	      color: var(--text-secondary);
	      white-space: nowrap;
	    }
	    .home-title {
	      font-family: var(--font-sans);
	      font-size: 26px;
	      font-weight: 700;
	      line-height: 1.25;
	    }
	    .home-subtitle {
	      font-family: var(--font-sans);
	      font-size: 14px;
	      color: var(--text-secondary);
	      margin-top: 6px;
	    }
	    .home-search {
	      width: 100%;
	      padding: 12px 14px;
	      border-radius: 12px;
	      border: 1px solid var(--border);
	      background: var(--bg);
	      color: var(--text);
	      font-family: var(--font-sans);
	      font-size: 14px;
	      outline: none;
	      margin-top: 10px;
	    }
	    .home-search::placeholder { color: var(--text-ghost); }
	    .home-posts {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	      gap: 14px;
	    }
	    .home-post-item {
	      border: 1px solid var(--border);
	      border-radius: 16px;
	      padding: 16px 16px;
	      cursor: pointer;
	      background: var(--bg);
	      transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
	    }
	    .home-post-item:hover { border-color: var(--text-secondary); background: rgba(0,0,0,0.02); transform: translateY(-2px); box-shadow: var(--shadow); }
	    [data-theme="dark"] .home-post-item:hover { background: rgba(255,255,255,0.03); }
	    .home-post-top {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 10px;
	    }
	    .home-post-title {
	      font-family: var(--font-sans);
	      font-size: 15px;
	      font-weight: 600;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	    }
	    .home-post-badge {
	      font-family: var(--font-sans);
	      font-size: 11px;
	      padding: 4px 8px;
	      border-radius: 999px;
	      border: 1px solid var(--border);
	      color: var(--text-secondary);
	      white-space: nowrap;
	    }
	    .home-post-badge.published { color: var(--text); }
	    .home-post-badge.idea { color: #d97706; border-color: #d97706; }
	    .home-post-badge.note { color: #2563eb; border-color: #2563eb; }
	    .activity-chart { margin: 0 0 20px; }
	    .activity-chart-title {
	      font-family: var(--font-sans);
	      font-size: 12px;
	      font-weight: 600;
	      color: var(--text-secondary);
	      text-transform: uppercase;
	      letter-spacing: 0.05em;
	      margin-bottom: 8px;
	    }
	    .activity-grid {
	      display: flex;
	      gap: 2px;
	      overflow-x: auto;
	      padding-bottom: 4px;
	    }
	    .activity-week { display: flex; flex-direction: column; gap: 2px; }
	    .activity-cell {
	      width: 10px;
	      height: 10px;
	      border-radius: 2px;
	      background: var(--border);
	    }
	    .activity-cell[data-level="1"] { background: #9be9a8; }
	    .activity-cell[data-level="2"] { background: #40c463; }
	    .activity-cell[data-level="3"] { background: #30a14e; }
	    .activity-cell[data-level="4"] { background: #216e39; }
	    [data-theme="dark"] .activity-cell[data-level="1"] { background: #0e4429; }
	    [data-theme="dark"] .activity-cell[data-level="2"] { background: #006d32; }
	    [data-theme="dark"] .activity-cell[data-level="3"] { background: #26a641; }
	    [data-theme="dark"] .activity-cell[data-level="4"] { background: #39d353; }
	    .activity-cell:hover { outline: 1px solid var(--text-secondary); }
	    .promote-btn {
	      font-family: var(--font-sans);
	      font-size: 12px;
	      padding: 4px 10px;
	      border-radius: 6px;
	      border: 1px solid var(--border);
	      background: transparent;
	      color: var(--text-secondary);
	      cursor: pointer;
	      transition: all 0.15s;
	      white-space: nowrap;
	    }
	    .promote-btn:hover { color: var(--text); border-color: var(--text); }
	    .delete-post-editor-btn:hover { color: #dc2626 !important; }
	    .home-post-snippet {
	      font-family: var(--font-sans);
	      font-size: 13px;
	      color: var(--text-secondary);
	      margin-top: 8px;
	      overflow: hidden;
	      display: -webkit-box;
	      -webkit-line-clamp: 2;
	      -webkit-box-orient: vertical;
	    }
		    .home-post-meta {
		      font-family: var(--font-sans);
		      font-size: 12px;
		      color: var(--text-secondary);
		      margin-top: 10px;
		    }
		    .tag-chips {
		      display: flex;
		      flex-wrap: wrap;
		      gap: 6px;
		      margin-top: 10px;
		    }
		    .tag-chip {
		      font-family: var(--font-sans);
		      font-size: 11px;
		      padding: 4px 8px;
		      border-radius: 999px;
		      border: 1px solid var(--btn-border);
		      color: var(--text-secondary);
		      background: var(--btn-bg);
		      cursor: pointer;
		      user-select: none;
		      box-shadow: 0 1px 0 rgba(0,0,0,0.04);
		      transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
		    }
		    .tag-chip:hover { color: var(--text); border-color: var(--text-secondary); box-shadow: var(--btn-shadow); }

		    /* Nav */
		    .nav {
	      position: sticky;
	      top: 0;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      z-index: 50;
      padding: 0 20px;
    }
    .nav-inner {
      width: 100%;
      max-width: none;
      margin: 0;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-left, .nav-right { display: flex; align-items: center; gap: 12px; }
    .nav-logo { font-size: 20px; }

    .menu-btn {
      background: none;
      border: none;
      color: var(--text);
      cursor: pointer;
      font-size: 20px;
      padding: 8px;
      border-radius: 50%;
    }
    .menu-btn:hover { background: var(--border); }
    .menu-btn svg { width: 20px; height: 20px; display: block; }

    .save-status {
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text-secondary);
    }

    .btn {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 999px;
      cursor: pointer;
      border: 1px solid var(--btn-border);
      background: var(--btn-bg);
      color: var(--text);
      box-shadow: var(--btn-shadow);
      transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
    }
    .btn:not(.btn-primary):hover { background: var(--btn-bg-hover); box-shadow: var(--btn-shadow-hover); color: var(--text); }
    .btn:active { transform: translateY(1px); box-shadow: none; }
    .btn:focus-visible { outline: none; box-shadow: var(--btn-shadow), var(--btn-ring); }
    .btn-ghost {
      background: transparent;
      color: var(--text-secondary);
      border-color: var(--border);
      box-shadow: none;
    }
    .btn-ghost:hover {
      color: var(--text);
      background: var(--bg-secondary);
      border-color: var(--text-secondary);
      box-shadow: var(--btn-shadow);
    }
    .btn-primary {
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
      color: var(--bg);
      border-color: transparent;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    }
    .btn-primary:hover {
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
      filter: brightness(1.02);
      box-shadow: 0 12px 24px rgba(0,0,0,0.22);
      color: var(--bg);
    }
    .btn-primary:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(0,0,0,0.18); color: var(--bg); }

	    .icon-btn {
	      background: var(--btn-bg);
	      border: 1px solid var(--btn-border);
	      color: var(--text-secondary);
	      cursor: pointer;
	      width: 40px;
	      height: 40px;
	      padding: 0;
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      line-height: 0;
	      overflow: visible;
	      border-radius: 14px;
	      font-size: 18px;
	      box-shadow: var(--btn-shadow);
	      transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
	      position: relative;
	    }
	    .icon-btn:hover { background: var(--btn-bg-hover); color: var(--text); box-shadow: var(--btn-shadow-hover); }
	    .icon-btn:active { transform: translateY(1px); box-shadow: none; }
    .icon-btn.active { background: var(--bg-secondary); color: var(--text); border-color: var(--text-secondary); }
    .icon-btn:disabled { opacity: 0.55; cursor: not-allowed; }
	    .icon-btn svg { width: 20px; height: 20px; display: block; overflow: visible; }

    .icon-tooltip {
      position: fixed;
      padding: 6px 9px;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.12s ease, transform 0.12s ease;
      pointer-events: none;
      z-index: 1200;
      white-space: nowrap;
    }
    [data-theme="dark"] .icon-tooltip {
      background: rgba(22, 22, 22, 0.96);
      border-color: rgba(255,255,255,0.08);
    }

    .settings-popover {
      position: fixed;
      top: 66px;
      right: 20px;
      width: min(260px, calc(100vw - 32px));
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 10px;
      z-index: 220;
      display: none;
    }
    .settings-popover.show { display: block; }
    .settings-title {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding: 6px 8px 8px;
    }
    .settings-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 8px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      cursor: pointer;
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text);
    }
    .settings-toggle:hover { background: var(--bg-secondary); border-color: var(--border); }
    .settings-toggle .toggle-ui {
      width: 36px;
      height: 20px;
      border-radius: 999px;
      background: var(--border);
      position: relative;
      flex: 0 0 auto;
      transition: background 0.15s;
    }
    .settings-toggle .toggle-ui::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--bg);
      top: 2px;
      left: 2px;
      transition: transform 0.15s;
      box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }
    .settings-toggle.active .toggle-ui {
      background: var(--text);
    }
    .settings-toggle.active .toggle-ui::after {
      transform: translateX(16px);
    }
    .settings-divider {
      height: 1px;
      background: var(--border);
      margin: 6px 0;
    }
    .settings-label {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 6px 8px 4px;
      display: block;
    }
    .settings-textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-secondary);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 13px;
      resize: vertical;
      outline: none;
      box-sizing: border-box;
    }
    .settings-textarea:focus {
      border-color: var(--text-secondary);
    }

    /* Command Palette */
    .command-palette {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow);
      width: min(520px, calc(100vw - 32px));
      max-height: 420px;
      overflow: hidden;
      margin-top: -20vh;
    }
    .command-palette-input {
      width: 100%;
      padding: 14px 18px;
      border: none;
      border-bottom: 1px solid var(--border);
      font-size: 15px;
      background: transparent;
      color: var(--text);
      outline: none;
      font-family: var(--font-sans);
      box-sizing: border-box;
    }
    .command-palette-results {
      max-height: 340px;
      overflow-y: auto;
    }
    .command-palette-item {
      padding: 10px 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--text);
    }
    .command-palette-item.active {
      background: var(--bg-secondary);
    }
    .command-palette-item:hover {
      background: var(--bg-secondary);
    }
    .command-palette-item .cp-category {
      font-size: 11px;
      color: var(--text-secondary);
      margin-left: auto;
    }
    .command-palette-item .cp-shortcut {
      font-size: 11px;
      color: var(--text-secondary);
    }

    /* Collections sidebar */
    .sidebar-collections {
      padding: 4px 10px 8px;
    }
    .sidebar-collections-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0;
    }
    .sidebar-collections-title {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
    }
    .sidebar-collections-add {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 16px;
      padding: 0 4px;
      line-height: 1;
    }
    .sidebar-collections-add:hover { color: var(--text); }
    .sidebar-collection-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 6px;
      border-radius: 6px;
      cursor: pointer;
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text);
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }
    .sidebar-collection-item:hover { background: var(--bg-secondary); }
    .sidebar-collection-item.active { background: var(--bg-secondary); font-weight: 600; }
    .sidebar-collection-item .collection-count {
      font-size: 11px;
      color: var(--text-secondary);
      margin-left: auto;
    }
    .sidebar-collection-item .collection-delete {
      display: none;
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 14px;
      padding: 0 2px;
      line-height: 1;
    }
    .sidebar-collection-item:hover .collection-delete { display: inline; }
    .sidebar-collection-item:hover .collection-count { display: none; }
    .collection-new-input {
      width: 100%;
      padding: 5px 6px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 13px;
      outline: none;
      margin-top: 2px;
    }
    .collection-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 4px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text);
      cursor: pointer;
      margin-bottom: 4px;
    }
    .collection-chip:hover { background: var(--border); }
    .collection-chip .chip-x {
      font-size: 14px;
      color: var(--text-secondary);
      cursor: pointer;
    }
    .active-collection-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
    }
    .active-collection-bar .clear-collection {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 14px;
      padding: 0 2px;
    }
    .active-collection-bar .clear-collection:hover { color: var(--text); }

	    /* Typewriter mode */
	    #typewriterGuide {
	      position: fixed;
	      top: 35vh;
	      height: 0;
	      border-top: 1px dashed var(--text-secondary);
	      opacity: 0.25;
	      pointer-events: none;
	      z-index: 60;
	      display: none;
	    }
	    body.typewriter-mode #typewriterGuide { display: block; }

    /* Speed reading mode */
    .speed-reader-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 720;
      pointer-events: none;
      padding: 20px;
    }
    body.speed-read-mode .speed-reader-overlay { display: flex; }
    .speed-reader-backdrop {
      position: absolute;
      inset: 0;
      background: var(--speed-read-backdrop);
      backdrop-filter: blur(10px) saturate(1.08);
      pointer-events: auto;
    }
    .speed-reader-panel {
      position: relative;
      width: min(940px, calc(100vw - 28px));
      border: 1px solid var(--speed-read-panel-border);
      border-radius: 20px;
      box-shadow: var(--speed-read-panel-shadow);
      background:
        radial-gradient(120% 140% at 25% 0%, color-mix(in srgb, var(--speed-read-orp) 14%, transparent), transparent 62%),
        var(--speed-read-panel-bg);
      padding: 20px 22px;
      pointer-events: auto;
    }
    .speed-reader-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      gap: 10px;
    }
    .speed-reader-title {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .speed-reader-close {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      font-size: 21px;
      line-height: 1;
      padding: 0;
    }
    .speed-reader-word {
      min-height: clamp(96px, 19vh, 190px);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-family: var(--font-serif);
      font-weight: 600;
      font-size: clamp(42px, 8vw, 102px);
      line-height: 1.05;
      letter-spacing: 0.01em;
      word-break: break-word;
      position: relative;
      padding: 8px 12px;
      border-radius: 18px;
      background: radial-gradient(120% 170% at 50% 50%, color-mix(in srgb, var(--speed-read-orp) 8%, transparent), transparent 62%);
    }
    .speed-reader-word::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 8px;
      bottom: 8px;
      width: 1px;
      background: var(--speed-read-line);
      pointer-events: none;
    }
    .speed-reader-word .pivot {
      color: var(--speed-read-orp);
      text-shadow: 0 0 16px color-mix(in srgb, var(--speed-read-orp) 34%, transparent);
    }
    .speed-reader-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 14px;
    }
    .speed-reader-controls {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    .speed-reader-controls .btn {
      min-width: 88px;
      height: 36px;
      font-size: 13px;
      padding: 0 14px;
    }
    .speed-reader-speed {
      margin-left: auto;
      min-width: min(340px, 62vw);
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 10px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
    }
    .speed-reader-speed input[type="range"] {
      width: 100%;
      accent-color: var(--speed-read-orp);
      cursor: pointer;
    }
    @media (max-width: 820px) {
      .speed-reader-panel { padding: 16px; border-radius: 16px; }
      .speed-reader-meta { margin-bottom: 10px; }
      .speed-reader-controls { gap: 8px; }
      .speed-reader-speed {
        margin-left: 0;
        min-width: 100%;
        grid-template-columns: 1fr;
        gap: 6px;
      }
    }

		    .user-avatar {
		      width: 32px;
	      height: 32px;
	      background: var(--text);
      color: var(--bg);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .dropdown { position: relative; }
    .dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow);
      min-width: 180px;
      padding: 8px;
      display: none;
      z-index: 200;
    }
    .dropdown-menu.show { display: block; }
    .dropdown-email {
      padding: 10px 12px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border);
      margin-bottom: 8px;
    }
    .dropdown-item {
      padding: 10px 12px;
      font-family: var(--font-sans);
      font-size: 14px;
      border-radius: 6px;
      cursor: pointer;
    }
    .dropdown-item:hover { background: var(--border); }

    /* Editor */
    .editor-container {
      flex: 1;
      max-width: 760px;
      width: 100%;
      margin: 0 auto;
      padding: 40px 20px 100px;
    }

	    .title-input {
	      font-family: var(--font-serif);
	      font-size: 40px;
	      font-weight: 500;
	      line-height: 1.2;
	      border: none;
	      padding: 0;
	      resize: none;
	      overflow: hidden;
	      overflow-wrap: anywhere;
	      background: transparent;
	      color: var(--text);
	      width: 100%;
	      min-height: 48px;
	      margin-bottom: 4px;
	      outline: none;
	    }
    .title-input::placeholder { color: var(--text-ghost); }
	    .subtitle-input {
	      font-family: var(--font-serif);
	      font-size: 22px;
	      font-weight: 400;
	      line-height: 1.3;
	      border: none;
	      padding: 0;
	      resize: none;
	      overflow: hidden;
	      overflow-wrap: anywhere;
	      background: transparent;
	      color: var(--text-secondary);
	      width: 100%;
	      min-height: 29px;
	      margin-bottom: 8px;
	      outline: none;
	    }
	    .subtitle-input::placeholder { color: var(--text-ghost); }

	    /* Formatting toolbar (shows on selection) */
	    .format-bar {
      position: fixed;
      left: 0;
      top: 0;
      display: none;
      gap: 4px;
      padding: 8px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: var(--shadow);
      flex-wrap: wrap;
      z-index: 600;
      user-select: none;
    }
    .format-bar.show { display: flex; }
    .format-bar::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      pointer-events: none;
      box-shadow: var(--shadow);
    }
    .format-bar[data-placement="top"]::after {
      bottom: -6px;
      border-left: none;
      border-top: none;
    }
    .format-bar[data-placement="bottom"]::after {
      top: -6px;
      border-right: none;
      border-bottom: none;
    }
    .format-btn {
      padding: 6px 10px;
      background: none;
      border: none;
      color: var(--text);
      border-radius: 4px;
      cursor: pointer;
      font-family: var(--font-sans);
      font-size: 13px;
    }
	    .format-btn:hover { background: var(--border); }
	    .format-btn.active { background: var(--text); color: var(--bg); }
	    .format-btn svg { width: 16px; height: 16px; display: block; }
	    .format-sep { width: 1px; background: var(--border); margin: 0 4px; }

    /* Editor */
    .editor-wrapper {
      position: relative;
      min-height: 400px;
    }

    .editor {
      width: 100%;
      min-height: 400px;
      padding: 0;
      font-family: var(--font-serif);
      font-size: 21px;
      line-height: 2;
      color: var(--text);
      background: transparent;
      border: none;
      outline: none;
    }
    .editor:empty::before {
      content: attr(data-placeholder);
      color: var(--text-ghost);
      pointer-events: none;
    }
	    .editor h1,
	    .editor h1 * {
	      font-size: 34px !important;
	      line-height: 1.3;
	    }
	    .editor h2,
	    .editor h2 * {
	      font-size: 28px !important;
	      line-height: 1.35;
	    }
	    .editor h3,
	    .editor h3 * {
	      font-size: 22px !important;
	      line-height: 1.4;
	    }
	    .editor p { margin-bottom: 0.6em; }
	    .editor h1 { font-weight: 600; margin: 0.9em 0 0.45em; }
	    .editor h2 { font-weight: 500; margin: 0.8em 0 0.4em; }
	    .editor h3 { font-weight: 500; margin: 0.6em 0 0.3em; }
	    .editor blockquote { border-left: 3px solid var(--text-ghost); padding-left: 16px; margin: 0.5em 0; color: var(--text-secondary); }
	    .editor ul, .editor ol { margin: 0.5em 0; padding-left: 24px; line-height: 1.65; }
	    .editor li { margin-bottom: 0.15em; }
	    .editor li:last-child { margin-bottom: 0; }
	    .editor ul ul, .editor ol ol, .editor ul ol, .editor ol ul { margin: 0.15em 0; }
	    .editor hr { border: none; border-top: 1px solid var(--border, #e0e0e0); margin: 1.5em 0; }
	    .editor a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
	    .editor code {
	      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	      font-size: 0.9em;
	      background: color-mix(in srgb, var(--border) 35%, transparent);
	      padding: 2px 6px;
	      border-radius: 8px;
	    }
	    .editor pre {
	      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	      font-size: 15px;
	      line-height: 1.6;
	      background: var(--bg-secondary);
	      border: 1px solid var(--border);
	      border-radius: 14px;
	      padding: 12px 14px;
	      overflow-x: auto;
	      margin: 0.7em 0;
	      white-space: pre;
	    }
	    .editor pre code {
	      background: transparent;
	      padding: 0;
	      border-radius: 0;
	      font-size: inherit;
	    }
	    .editor figure.wa-figure { margin: 18px 0; text-align: center; }
	    .editor figure.wa-figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 12px; }
	    .editor figure.wa-figure figcaption {
	      margin-top: 10px;
	      font-family: var(--font-sans);
	      font-size: 13px;
	      color: var(--text-secondary);
	      outline: none;
	    }
	    .editor figure.wa-figure figcaption:empty::before { content: attr(data-placeholder); color: var(--text-ghost); }

    /* Floating ghost suggestion */
    .ghost-overlay {
      position: absolute;
      pointer-events: none;
      color: var(--text-ghost);
      font-family: var(--font-serif);
      font-size: 20px;
      line-height: 1.8;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      z-index: 10;
    }
    .ghost-overlay .tab-key {
      display: inline-block;
      background: var(--text-secondary);
      color: var(--bg);
      font-family: var(--font-sans);
      font-size: 10px;
      line-height: 1;
      padding: 2px 5px;
      border-radius: 3px;
      margin-left: 6px;
      vertical-align: baseline;
      position: relative;
      top: -0.12em;
      text-indent: 0;
      white-space: nowrap;
    }
    .ghost-overlay .ghost-text.ghost-cover {
      background: var(--bg);
      box-shadow: 0 0 0 2px var(--bg);
    }

	    /* Spellcheck underlines + hover tooltip (LLM-backed) */
    .spell-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 9;
    }
    .spell-underline {
      position: absolute;
      height: 3px;
      border-radius: 2px;
      background: rgba(220, 38, 38, 0.95);
      opacity: 0.9;
    }
    .spell-underline.grammar {
      background: repeating-linear-gradient(
        -45deg,
        rgba(245, 158, 11, 0.95) 0,
        rgba(245, 158, 11, 0.95) 2px,
        transparent 2px,
        transparent 4px
      );
    }
    .spell-tooltip {
      position: fixed;
      z-index: 2500;
      max-width: min(420px, calc(100vw - 24px));
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      box-shadow: 0 10px 24px rgba(0,0,0,0.12);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 13px;
      line-height: 1.35;
      /* Keep hidden tooltips from blocking clicks/caret placement in the editor. */
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.12s ease, transform 0.12s ease;
    }
    .spell-tooltip.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .spell-tooltip .spell-suggestion {
      font-weight: 600;
    }
    .spell-tooltip .spell-meta {
      color: var(--text-secondary);
      margin-top: 4px;
    }
    .spell-tooltip .spell-repl-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .spell-tooltip .spell-repl {
      border: 1px solid var(--border);
      background: var(--bg-secondary);
      color: var(--text);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-family: var(--font-sans);
      cursor: pointer;
    }
	    .spell-tooltip .spell-repl:hover {
	      background: var(--border);
	    }
	    .spell-tooltip .spell-actions {
	      display: flex;
	      flex-wrap: wrap;
	      gap: 8px;
	      margin-top: 8px;
	    }
	    .spell-tooltip .spell-action {
	      border: 1px solid var(--border);
	      background: transparent;
	      color: var(--text-secondary);
	      border-radius: 999px;
	      padding: 6px 10px;
	      font-size: 12px;
	      font-family: var(--font-sans);
	      cursor: pointer;
	    }
	    .spell-tooltip .spell-action:hover {
	      background: rgba(0,0,0,0.04);
	      color: var(--text);
	    }

	    /* Status bar */
	    .status-bar {
	      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 20px;
      display: flex;
      justify-content: center;
      gap: 20px;
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text-secondary);
      background: linear-gradient(transparent, var(--bg));
      pointer-events: none;
    }
    @media (min-width: 1024px) { .status-bar { left: 280px; } }

    /* Modals */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s;
      padding: 20px;
    }
    .modal-backdrop.show { opacity: 1; visibility: visible; }
    .modal {
      background: var(--bg);
      border-radius: 16px;
      width: 100%;
      max-width: 400px;
      padding: 28px;
    }
    .modal-title {
      font-family: var(--font-sans);
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .modal-subtitle {
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text-secondary);
      margin: -12px 0 16px;
      line-height: 1.4;
    }
    .history-layout { display: flex; gap: 14px; }
    .history-list {
      width: 240px;
      min-width: 240px;
      max-height: 420px;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg-secondary);
      padding: 8px;
    }
    .history-item {
      width: 100%;
      text-align: left;
      border: 1px solid transparent;
      background: transparent;
      border-radius: 10px;
      padding: 10px 10px;
      cursor: pointer;
      font-family: var(--font-sans);
      color: var(--text);
    }
    .history-item:hover { background: rgba(0,0,0,0.04); }
    .history-item.active { border-color: var(--accent); background: rgba(59,130,246,0.10); }
    .history-item-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
    .history-item-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
    .history-preview {
      flex: 1;
      max-height: 420px;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg-secondary);
      padding: 12px;
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text);
      white-space: pre-wrap;
    }
    .history-preview strong { font-weight: 700; }
    .modal-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
    .modal-tab {
      flex: 1;
      padding: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-family: var(--font-sans);
      font-size: 14px;
      cursor: pointer;
    }
    .modal-tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }

    .form-group { margin-bottom: 16px; }
    .form-label {
      display: block;
      font-family: var(--font-sans);
      font-size: 14px;
      margin-bottom: 6px;
    }
    .form-input {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-family: var(--font-sans);
      font-size: 15px;
      color: var(--text);
    }
    .form-input:focus { outline: none; border-color: var(--accent); }
    .form-error { color: #e53935; font-size: 13px; margin-top: 8px; font-family: var(--font-sans); }

    .modal-actions { display: flex; gap: 10px; margin-top: 24px; }
    .modal-actions .btn { flex: 1; padding: 12px; }

    /* Cover image modal */
	    .cover-hint {
	      font-family: var(--font-sans);
	      font-size: 13px;
	      color: var(--text-secondary);
	      margin: -8px 0 14px;
	      line-height: 1.4;
	    }

	    /* API tokens modal */
	    .token-hint {
	      font-family: var(--font-sans);
	      font-size: 13px;
	      color: var(--text-secondary);
	      margin: -8px 0 14px;
	      line-height: 1.45;
	    }
	    .token-create-row {
	      display: flex;
	      gap: 10px;
	      align-items: center;
	      margin-bottom: 14px;
	    }
	    .token-create-row .form-input { flex: 1; }
	    .token-create-row .btn {
	      flex: 0 0 auto;
	      padding: 10px 14px;
	      border-radius: 10px;
	    }
	    .token-reveal {
	      background: var(--bg-secondary);
	      border: 1px solid var(--border);
	      border-radius: 10px;
	      padding: 12px;
	      margin-bottom: 14px;
	    }
	    .token-reveal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
	    .token-value {
	      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	      font-size: 12px;
	      word-break: break-all;
	      color: var(--text);
	    }
	    .token-reveal-note {
	      margin-top: 8px;
	      font-family: var(--font-sans);
	      font-size: 12px;
	      color: var(--text-secondary);
	    }
	    .token-list { max-height: 280px; overflow: auto; padding-right: 4px; }
	    .token-row {
	      display: flex;
	      align-items: flex-start;
	      justify-content: space-between;
	      gap: 12px;
	      padding: 12px;
	      background: var(--bg-secondary);
	      border: 1px solid var(--border);
	      border-radius: 10px;
	      margin-bottom: 10px;
	    }
	    .token-name { font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
	    .token-meta { margin-top: 4px; font-family: var(--font-sans); font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
	    .token-badge {
	      display: inline-flex;
	      align-items: center;
	      font-family: var(--font-sans);
	      font-size: 11px;
	      padding: 3px 8px;
	      border-radius: 999px;
	      border: 1px solid var(--border);
	      color: var(--text-secondary);
	      margin-left: 8px;
	    }
	    .token-badge.revoked { border-color: rgba(229,57,53,0.45); color: #e53935; }
	    .token-actions { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
	    .token-actions .publish-copy { padding: 4px 10px; }

	    /* Profile modal */
	    .profile-row {
	      display: flex;
	      gap: 10px;
	      align-items: center;
	      margin: 12px 0 6px;
	    }
	    .profile-row .form-input { flex: 1; }
	    .profile-row .btn { flex: 0 0 auto; padding: 10px 14px; border-radius: 10px; }
	    .profile-note {
	      font-family: var(--font-sans);
	      font-size: 12px;
	      color: var(--text-secondary);
	      line-height: 1.45;
	    }

	    /* Install skill modal */
	    .install-hint {
	      font-family: var(--font-sans);
	      font-size: 13px;
	      color: var(--text-secondary);
	      margin: -8px 0 14px;
	      line-height: 1.45;
	    }
	    .install-steps { display: grid; gap: 12px; }
	    .install-step {
	      border: 1px solid var(--border);
	      background: var(--bg-secondary);
	      border-radius: 12px;
	      padding: 12px;
	      display: grid;
	      gap: 8px;
	    }
	    .install-step-title {
	      font-family: var(--font-sans);
	      font-size: 13px;
	      font-weight: 600;
	    }
	    .install-step-body {
	      font-family: var(--font-sans);
	      font-size: 12px;
	      color: var(--text-secondary);
	      line-height: 1.45;
	    }
	    .install-command {
	      border: 1px solid var(--border);
	      background: var(--bg);
	      border-radius: 10px;
	      padding: 10px;
	      display: grid;
	      gap: 8px;
	    }
	    .install-command-head {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 10px;
	      font-family: var(--font-sans);
	      font-size: 12px;
	      color: var(--text-secondary);
	    }
	    .install-command pre {
	      margin: 0;
	      padding: 10px;
	      background: var(--bg-secondary);
	      border: 1px solid var(--border);
	      border-radius: 8px;
	      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	      font-size: 12px;
	      color: var(--text);
	      white-space: pre-wrap;
	      word-break: break-word;
	    }
	    .install-note {
	      font-family: var(--font-sans);
	      font-size: 12px;
	      color: var(--text-secondary);
	    }

	    /* AI tools (inline popover) */
	    .ai-popover {
      position: fixed;
      left: 0;
      top: 0;
      width: min(560px, calc(100vw - 24px));
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 14px;
      z-index: 950;
      display: none;
    }
    .ai-popover.show { display: block; }
    .ai-popover::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      pointer-events: none;
    }
    .ai-popover[data-placement="top"]::after {
      bottom: -7px;
      border-left: none;
      border-top: none;
    }
    .ai-popover[data-placement="bottom"]::after {
      top: -7px;
      border-right: none;
      border-bottom: none;
    }
    .ai-prompt-row {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }
    .ai-prompt-input {
      flex: 1;
      min-width: 0;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 13px;
      outline: none;
    }
    .ai-prompt-input::placeholder { color: var(--text-ghost); }
    .ai-popover-actions { display: flex; gap: 10px; margin-top: 12px; }
    .ai-popover-actions .btn { flex: 1; padding: 10px; }

    /* AI chat */
    .chat-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 920;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s;
    }
    .chat-overlay.show { opacity: 1; visibility: visible; }

    .chat-drawer {
      position: fixed;
      top: 66px;
      right: 14px;
      bottom: 14px;
      width: min(420px, calc(100vw - 28px));
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
      z-index: 930;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translateX(120%);
      transition: transform 0.22s ease;
    }
    .chat-drawer.open { transform: translateX(0); }

    .chat-fab {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 65;
      box-shadow: 0 16px 32px rgba(0,0,0,0.18);
    }
    .chat-fab.active {
      background: var(--bg-secondary);
      color: var(--text);
    }
    .chat-fab.loading svg { display: none; }
    .chat-fab.loading::after {
      content: '';
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 2px solid color-mix(in srgb, var(--text-secondary) 38%, transparent);
      border-top-color: var(--accent);
      animation: chatSpinner 0.85s linear infinite;
      display: block;
    }
    
    .cleared {
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
    }
    .commented {
      text-decoration: none;
    }
    .commented,
    .cleared.commented {
      position: static;
    }
    .comment-block {
      position: relative;
      padding-right: 34px;
    }
    .comment-text {
      border-radius: 4px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    .comment-highlight {
      background: rgba(253, 224, 71, 0.6);
      padding: 0 2px;
      border-radius: 4px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    .comment-active .comment-icon {
      background: #fef3c7;
      border-color: #f59e0b;
      color: #b45309;
    }
    [data-theme="dark"] .comment-highlight {
      background: rgba(251, 191, 36, 0.45);
    }
    [data-theme="dark"] .comment-active .comment-icon {
      background: rgba(245, 158, 11, 0.2);
      border-color: #fbbf24;
      color: #fbbf24;
    }
    .comment-icon {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #fef3c7;
      border: 1px solid #f59e0b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #b45309;
      box-shadow: 0 8px 16px rgba(0,0,0,0.12);
      cursor: pointer;
      z-index: 2;
      vertical-align: middle;
    }
    .comment-icon svg {
      width: 13px;
      height: 13px;
    }
    [data-theme="dark"] .comment-icon {
      background: rgba(245, 158, 11, 0.18);
      border-color: #fbbf24;
      color: #fbbf24;
    }

    .comment-thread {
      max-height: 220px;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg-secondary);
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 14px;
    }
    .comment-empty {
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text-secondary);
      text-align: center;
      padding: 12px 0;
    }
    .comment-entry {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 10px;
    }
    .comment-entry-header {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }
    .comment-entry-author {
      font-weight: 600;
      color: var(--text);
    }
    .comment-entry-text {
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text);
      white-space: pre-wrap;
    }

    .comment-context {
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
      border: 1px dashed var(--border);
      border-radius: 10px;
      padding: 8px 10px;
      margin-bottom: 12px;
      background: var(--bg-secondary);
      max-height: 72px;
      overflow: hidden;
    }

    @media (min-width: 900px) {
      #commentModal {
        align-items: flex-start;
        justify-content: flex-end;
        background: transparent;
        padding: 0;
      }
      #commentModal.show { background: transparent; }
      #commentModal .comment-modal {
        position: fixed;
        right: 24px;
        top: 96px;
        width: 340px;
        max-height: calc(100vh - 140px);
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow);
      }
      #commentModal .comment-thread {
        flex: 1;
        max-height: none;
      }
    }
    .cleared-block {
      position: relative;
      border-right: 5px solid #6ee7b7;
      padding-right: 18px;
      margin-right: -18px;
      --good-marker-offset: 2.5px;
    }
    .cleared-block::after {
      content: "✓";
      position: absolute;
      top: 50%;
      right: calc(-11px - var(--good-marker-offset));
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #6ee7b7;
      color: #0f172a;
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 16px rgba(0,0,0,0.18);
    }
    [data-theme="dark"] .cleared-block {
      border-right-color: #34d399;
    }
    [data-theme="dark"] .cleared-block::after {
      background: #34d399;
      color: #0b0f14;
    }
    .clear-progress {
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
    }
    .clear-progress:empty { display: none; }

    .chat-header {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
      border-bottom: 1px solid var(--border);
    }
    .chat-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .chat-header-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
    }
    .chat-title {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: -0.01em;
    }
    .chat-scope {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 12px;
      padding: 6px 10px;
      outline: none;
      cursor: pointer;
      width: 100%;
      min-width: 0;
    }
    .chat-scope:focus { border-color: var(--accent); }
    .chat-model {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 12px;
      padding: 6px 10px;
      outline: none;
      cursor: pointer;
      width: 100%;
      min-width: 0;
    }
    .chat-model:focus { border-color: var(--accent); }
    .chat-clear {
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 999px;
      height: 32px;
    }
    .chat-close {
      width: 34px;
      height: 34px;
      border-radius: 999px;
    }

    .chat-meta {
      padding: 8px 12px;
      font-family: var(--font-sans);
      font-size: 11px;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border);
      background: var(--bg-secondary);
    }
    .chat-meta-debug {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-top: 6px;
      padding-bottom: 6px;
    }
    .chat-meta-debug .chat-edit-actions {
      display: flex;
      gap: 8px;
      flex: 0 0 auto;
    }
    .chat-meta-debug .btn {
      padding: 5px 10px;
      font-size: 11px;
      border-radius: 999px;
      height: 28px;
    }
    .chat-meta-debug .chat-edit-toggle {
      min-width: 86px;
      text-align: center;
    }
    .chat-status {
      padding: 8px 12px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .chat-status.error { color: #c62828; }
    .chat-status.loading::before {
      content: '';
      width: 12px;
      height: 12px;
      border-radius: 999px;
      border: 2px solid color-mix(in srgb, var(--text-secondary) 38%, transparent);
      border-top-color: var(--accent);
      flex: 0 0 auto;
      animation: chatSpinner 0.85s linear infinite;
    }
    .chat-status .btn {
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 999px;
    }
    [data-theme="dark"] .chat-status.error { color: #ff6b6b; }
    @keyframes chatSpinner {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .chat-messages {
      flex: 1;
      overflow: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .chat-messages {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .chat-messages::-webkit-scrollbar { width: 0; height: 0; }
    .chat-msg {
      max-width: 92%;
      padding: 10px 12px;
      border-radius: 14px;
      font-family: var(--font-sans);
      font-size: 13px;
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
      border: 1px solid var(--border);
    }
    .chat-msg.user {
      margin-left: auto;
      background: rgba(59,130,246,0.12);
      border-color: rgba(59,130,246,0.25);
    }
    .chat-msg.assistant {
      margin-right: auto;
      background: var(--bg-secondary);
    }
    .chat-markdown {
      white-space: normal;
    }
    .chat-markdown p {
      margin: 0 0 10px;
    }
    .chat-markdown p:last-child { margin-bottom: 0; }
    .chat-markdown h3,
    .chat-markdown h4,
    .chat-markdown h5 {
      margin: 0 0 10px;
      font-family: var(--font-sans);
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .chat-markdown h3 { font-size: 14px; }
    .chat-markdown h4 { font-size: 13px; }
    .chat-markdown h5 { font-size: 12.5px; }
    .chat-markdown a {
      color: var(--accent);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }
    .chat-markdown code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      background: color-mix(in srgb, var(--border) 42%, transparent);
      padding: 1px 5px;
      border-radius: 7px;
    }
    .chat-markdown pre {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      overflow: auto;
      margin: 10px 0;
    }
    .chat-markdown pre code {
      background: transparent;
      padding: 0;
      border-radius: 0;
      font-size: 12px;
      white-space: pre;
    }
    .chat-markdown blockquote {
      margin: 8px 0;
      padding: 6px 10px;
      border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
      background: color-mix(in srgb, var(--accent) 8%, var(--bg) 92%);
      border-radius: 10px;
      color: var(--text-secondary);
    }
    .chat-markdown ul,
    .chat-markdown ol {
      margin: 6px 0 10px 18px;
      padding: 0;
    }
    .chat-markdown li { margin: 4px 0; }
    .chat-markdown table {
      width: 100%;
      border-collapse: collapse;
      margin: 10px 0;
      font-size: 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }
    .chat-markdown th,
    .chat-markdown td {
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      padding: 7px 8px;
      vertical-align: top;
    }
    .chat-markdown th:last-child,
    .chat-markdown td:last-child { border-right: none; }
    .chat-markdown tr:last-child td { border-bottom: none; }
    .chat-markdown th {
      text-align: left;
      font-weight: 700;
      background: var(--bg-secondary);
    }
    .chat-markdown hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 10px 0;
    }
    .chat-msg-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .chat-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border) 75%);
      background: color-mix(in srgb, var(--accent) 9%, var(--bg) 91%);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      user-select: none;
    }
    .chat-action-btn:hover {
      border-color: color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
      background: color-mix(in srgb, var(--accent) 13%, var(--bg) 87%);
    }
    .chat-action-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .chat-action-btn svg { width: 14px; height: 14px; }
    .chat-msg.streaming::after {
      content: '...';
      display: inline-block;
      width: 0;
      margin-left: 4px;
      overflow: hidden;
      vertical-align: baseline;
      white-space: nowrap;
      animation: chatDots 1.1s steps(4, end) infinite;
    }
    @keyframes chatDots {
      0% { width: 0; }
      25% { width: 0.35em; }
      50% { width: 0.75em; }
      75% { width: 1.15em; }
      100% { width: 0; }
    }
    .chat-msg .chat-time {
      display: block;
      margin-top: 6px;
      font-size: 11px;
      color: var(--text-ghost);
    }
    .chat-loading-row {
      max-width: 92%;
      margin-right: auto;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--bg-secondary);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
    }
    .chat-system-row {
      max-width: 100%;
      margin: 2px 0 0;
      padding: 6px 2px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .chat-system-icon {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border) 52%);
      background: color-mix(in srgb, var(--accent) 18%, var(--bg) 82%);
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .chat-system-icon svg {
      width: 10px;
      height: 10px;
      display: block;
    }
    .chat-action-row {
      width: 100%;
      margin: 2px 0;
      padding: 9px 10px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border) 56%);
      background: color-mix(in srgb, var(--accent) 10%, var(--bg) 90%);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text);
    }
    .chat-action-icon {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border) 42%);
      background: color-mix(in srgb, var(--accent) 18%, var(--bg) 82%);
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .chat-action-icon svg {
      width: 11px;
      height: 11px;
      display: block;
    }
    .chat-loading-spinner {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      border: 2px solid color-mix(in srgb, var(--text-secondary) 38%, transparent);
      border-top-color: var(--accent);
      animation: chatSpinner 0.85s linear infinite;
      flex: 0 0 auto;
    }

    .chat-compose {
      padding: 10px 12px;
      border-top: 1px solid var(--border);
      background: var(--bg);
    }
    .chat-input {
      width: 100%;
      min-height: 44px;
      max-height: 140px;
      resize: none;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 12px;
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text);
      outline: none;
    }
    .chat-input:focus { border-color: var(--accent); }
    .chat-actions {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .chat-actions-left,
    .chat-actions-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .chat-actions .btn { padding: 9px 14px; }
    #chatStopBtn {
      color: #b91c1c;
      border-color: rgba(185, 28, 28, 0.35);
      background: rgba(239, 68, 68, 0.12);
    }
    #chatStopBtn:hover {
      color: #7f1d1d;
      border-color: rgba(185, 28, 28, 0.55);
      background: rgba(239, 68, 68, 0.18);
    }
    [data-theme="dark"] #chatStopBtn {
      color: #fca5a5;
      border-color: rgba(252, 165, 165, 0.36);
      background: rgba(127, 29, 29, 0.35);
    }
    [data-theme="dark"] #chatStopBtn:hover {
      color: #fecaca;
      border-color: rgba(254, 202, 202, 0.48);
      background: rgba(127, 29, 29, 0.48);
    }

    @media (max-width: 720px) {
      .chat-drawer {
        right: 10px;
        left: 10px;
        width: auto;
        bottom: 10px;
      }
      .chat-header-controls {
        grid-template-columns: 1fr;
      }
      .chat-actions {
        flex-direction: column-reverse;
        align-items: stretch;
      }
      .chat-actions-left,
      .chat-actions-right {
        justify-content: flex-end;
      }
    }

    .ai-subtitle {
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--text-secondary);
      margin: -8px 0 14px;
    }
    .ai-selection {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      font-family: var(--font-serif);
      font-size: 14px;
      line-height: 1.5;
      color: var(--text);
      max-height: 120px;
      overflow: auto;
      white-space: pre-wrap;
    }
    .ai-selection.empty {
      font-family: var(--font-sans);
      color: var(--text-secondary);
    }
    .ai-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 14px 0 16px;
    }
    .ai-chip {
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 13px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .ai-chip:hover { background: var(--bg-secondary); }
	    .ai-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
	    .ai-chip:disabled { opacity: 0.6; cursor: not-allowed; }
		    .ai-result {
		      font-family: var(--font-serif);
		      font-size: 15px;
		      line-height: 1.6;
		      min-height: 160px;
		      resize: vertical;
		    }
		    .ai-diff {
		      background: var(--bg-secondary);
		      border: 1px solid var(--border);
		      border-radius: 10px;
		      padding: 10px 12px;
		      font-family: var(--font-serif);
		      font-size: 15px;
		      line-height: 1.7;
		      color: var(--text);
		      max-height: 200px;
		      overflow: auto;
		      white-space: pre-wrap;
		      word-break: break-word;
		    }
		    .ai-diff.empty {
		      font-family: var(--font-sans);
		      font-size: 14px;
		      color: var(--text-secondary);
		    }
		    .ai-ins {
		      background: rgba(34, 197, 94, 0.18);
		      border-radius: 4px;
		      padding: 0 2px;
		    }
	    .ai-ins-multi {
	      display: inline-block;
	      padding: 2px 6px;
	      border-radius: 8px;
	      line-height: 1.45;
	      white-space: pre-wrap;
	    }
		    .ai-del {
		      color: rgba(239, 68, 68, 0.85);
		      text-decoration: line-through;
		      text-decoration-thickness: 2px;
		    }
	    .ai-del-multi {
	      display: inline-block;
	      line-height: 1.45;
	      white-space: pre-wrap;
	    }
		    [data-theme="dark"] .ai-ins { background: rgba(34, 197, 94, 0.28); }

    .ai-pending {
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }
    .ai-pending-block {
      display: block;
      padding: 0;
    }
    [data-theme="dark"] .ai-pending {
      background: transparent;
      box-shadow: none;
    }
    .ai-change {
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
      display: inline;
    }
    .ai-change[data-status="pending"] {
      text-decoration-line: underline;
      text-decoration-style: wavy;
      text-decoration-color: color-mix(in srgb, var(--accent) 62%, transparent);
      text-decoration-thickness: 1.5px;
      text-underline-offset: 2px;
      cursor: pointer;
    }
    .ai-change.ai-change-insert[data-status="pending"] {
      position: relative;
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      border-radius: 4px;
      box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 42%, transparent);
      overflow: visible;
    }
    .ai-change.ai-change-insert[data-status="pending"]::before {
      content: '';
      position: absolute;
      left: -1px;
      top: 0.12em;
      bottom: 0.12em;
      border-left: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
      pointer-events: none;
      z-index: 2;
    }
    .ai-change.ai-change-insert[data-status="pending"]::after {
      content: attr(data-insert-label);
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -128%);
      max-width: min(44ch, 68vw);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 2px 6px;
      border-radius: 999px;
      font-family: var(--font-sans);
      font-size: 10px;
      line-height: 1.2;
      color: color-mix(in srgb, var(--accent) 82%, black 18%);
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
      background: color-mix(in srgb, var(--bg) 86%, var(--accent) 14%);
      pointer-events: none;
      z-index: 3;
    }
    .ai-change.ai-change-insert[data-status="pending"][data-insert-anchor="empty"] {
      display: inline-block;
      width: 0;
      min-width: 0;
      overflow: visible;
      vertical-align: baseline;
    }
    .ai-change.ai-change-insert[data-status="pending"][data-insert-anchor="empty"]::before {
      left: 0;
    }
    .ai-change.ai-change-insert[data-status="pending"][data-insert-anchor="empty"]::after {
      left: 0;
      transform: translate(-8%, -128%);
    }
    .ai-change[data-status="pending"]:hover {
      text-decoration-color: color-mix(in srgb, var(--accent) 80%, transparent);
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      border-radius: 4px;
    }
    .ai-change.resolved {
      border: none;
      background: transparent;
      padding: 0;
      margin: 0;
      text-decoration: none;
      cursor: text;
    }
    .ai-change.resolved:empty {
      display: none;
    }
    .ai-change.nav-focus {
      outline: none;
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      border-radius: 4px;
    }
    .ai-change.keep {
      background: color-mix(in srgb, var(--bg-secondary) 92%, var(--border) 8%);
      border-style: solid;
      opacity: 0.92;
    }
    .editor .ai-change .ai-del,
    .editor .ai-change .ai-ins {
      display: none !important;
    }
    .ai-change-controls {
      display: none;
      gap: 3px;
      margin-left: 4px;
      vertical-align: baseline;
      transform: translateY(-0.18em);
    }
    .ai-change-btn {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-secondary);
      font-family: var(--font-sans);
      font-size: 11px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
    }
    .ai-change-btn:hover { border-color: var(--accent); color: var(--text); }
    .ai-change-btn.active.accept {
      border-color: rgba(34, 197, 94, 0.45);
      color: #166534;
      background: rgba(34, 197, 94, 0.14);
    }
    .ai-change-btn.active.reject {
      border-color: rgba(239, 68, 68, 0.45);
      color: #b91c1c;
      background: rgba(239, 68, 68, 0.12);
    }
    .ai-change-btn.pending {
      border-color: color-mix(in srgb, var(--accent) 46%, var(--border) 54%);
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 14%, var(--bg) 86%);
    }
    .ai-change-btn.bad.pending {
      border-color: color-mix(in srgb, #b45309 55%, var(--border) 45%);
      color: #b45309;
      background: color-mix(in srgb, #f59e0b 12%, var(--bg) 88%);
    }
    .ai-change-keep {
      color: var(--text-secondary);
      text-decoration: none;
    }
    .ai-action-banner {
      position: fixed;
      left: 14px;
      bottom: 14px;
      transform: translateY(8px);
      background: color-mix(in srgb, var(--bg) 95%, var(--accent) 5%);
      color: var(--text-secondary);
      border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent) 14%);
      border-radius: 12px;
      box-shadow: 0 6px 14px rgba(10, 15, 26, 0.08);
      padding: 5px 8px;
      font-family: var(--font-sans);
      font-size: 11px;
      z-index: 90;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity 180ms ease, transform 180ms ease;
      max-width: min(72vw, 430px);
      min-width: 0;
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .ai-action-banner.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      visibility: visible;
    }
    .ai-action-text {
      font-family: var(--font-sans);
      font-size: 11px;
      color: var(--text-secondary);
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ai-action-btn {
      border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent) 14%);
      background: color-mix(in srgb, var(--bg) 97%, var(--accent) 3%);
      color: var(--text-secondary);
      border-radius: 999px;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      font-family: var(--font-sans);
      font-size: 11px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      opacity: 0.82;
    }
    .ai-action-btn:hover {
      border-color: var(--accent);
      color: var(--text);
      opacity: 1;
    }
    .ai-action-btn:disabled {
      opacity: 0.35;
      cursor: default;
      border-color: var(--border);
    }
    .ai-action-close {
      margin-left: auto;
      width: 22px;
      min-width: 22px;
      padding: 0;
    }
    .ai-suggest-tooltip {
      position: fixed;
      z-index: 96;
      max-width: min(90vw, 360px);
      min-width: 180px;
      background: color-mix(in srgb, var(--bg) 96%, var(--accent) 4%);
      color: var(--text);
      border: 1px solid color-mix(in srgb, var(--border) 84%, var(--accent) 16%);
      border-radius: 10px;
      box-shadow: 0 8px 20px rgba(10, 15, 26, 0.14);
      padding: 8px 10px;
      font-family: var(--font-sans);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(4px);
      transition: opacity 140ms ease, transform 140ms ease;
    }
    .ai-suggest-tooltip.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
    .ai-suggest-title {
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .ai-suggest-text {
      font-size: 13px;
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .ai-suggest-actions {
      margin-top: 8px;
      display: flex;
      gap: 6px;
      justify-content: flex-end;
    }
    .ai-suggest-btn {
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      border-radius: 999px;
      height: 24px;
      padding: 0 10px;
      font-family: var(--font-sans);
      font-size: 12px;
      cursor: pointer;
    }
    .ai-suggest-btn:hover { border-color: var(--accent); }
    .ai-suggest-btn.accept {
      border-color: color-mix(in srgb, var(--accent) 56%, var(--border) 44%);
      color: var(--accent);
    }
    .ai-suggest-btn.reject {
      color: var(--text-secondary);
    }
    @media (max-width: 780px) {
      .ai-action-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
      }
    }
		    [data-theme="dark"] .ai-del { color: rgba(248, 113, 113, 0.9); }

		    /* Shortcuts */
		    .shortcut-subtitle {
		      font-family: var(--font-sans);
		      font-size: 13px;
	      color: var(--text-secondary);
	      margin: -8px 0 14px;
	    }
	    .shortcut-list { margin-top: 12px; }
	    #shortcutsModal .modal {
	      max-height: 80vh;
	      display: flex;
	      flex-direction: column;
	    }
	    #shortcutsModal .shortcut-list {
	      max-height: 50vh;
	      overflow: auto;
	      padding-right: 6px;
	    }
	    .shortcut-row {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 14px;
	      padding: 10px 0;
	      border-bottom: 1px solid var(--border);
	    }
	    .shortcut-row:last-child { border-bottom: none; }
	    .shortcut-desc {
	      font-family: var(--font-sans);
	      font-size: 13px;
	      color: var(--text);
	    }
	    .shortcut-keys { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
	    .shortcut-keys kbd {
	      font-family: var(--font-sans);
	      font-size: 12px;
	      background: var(--bg-secondary);
	      border: 1px solid var(--border);
	      padding: 2px 6px;
	      border-radius: 6px;
	      color: var(--text);
	    }
	    .shortcut-plus { color: var(--text-secondary); font-family: var(--font-sans); font-size: 12px; }

	    /* Publish modal */
	    .visibility-options { margin-bottom: 20px; }
	    .visibility-option {
	      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      background: var(--bg-secondary);
      border: 2px solid var(--border);
      border-radius: 10px;
      margin-bottom: 10px;
      cursor: pointer;
    }
    .visibility-option:hover { border-color: var(--text-secondary); }
    .visibility-option.selected { border-color: var(--accent); }
    .visibility-option input { display: none; }
    .visibility-label { font-family: var(--font-sans); font-size: 14px; font-weight: 500; }
    .visibility-desc { font-family: var(--font-sans); font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

	    /* Cover image (editor) */
	    .cover-block {
	      position: relative;
	    }
	    .cover-block.has-cover .title-input {
	      position: absolute;
	      left: 22px;
	      right: 22px;
	      bottom: 18px;
	      z-index: 2;
	      margin: 0;
	      color: #fff;
	      font-size: 44px;
	      text-shadow: 0 10px 28px rgba(0,0,0,0.45);
	    }
	    .cover-block.has-cover .title-input::placeholder {
	      color: rgba(255,255,255,0.78);
	    }
	    .cover-block.has-cover .subtitle-input {
	      display: none;
	    }
	    @media (max-width: 640px) {
	      .cover-block.has-cover .title-input {
	        left: 16px;
	        right: 16px;
	        bottom: 14px;
	        font-size: 32px;
	      }
	    }
	    .cover-preview {
	      position: relative;
	      border-radius: 12px;
	      overflow: hidden;
	      border: 1px solid var(--border);
	      margin-bottom: 12px;
	    }
	    .cover-preview::after {
	      content: '';
	      position: absolute;
	      inset: 0;
	      opacity: 0;
	      transition: opacity 0.2s ease;
	      pointer-events: none;
	      background: linear-gradient(
	        to top,
	        rgba(0,0,0,0.62) 0%,
	        rgba(0,0,0,0.18) 55%,
	        rgba(0,0,0,0.00) 78%
	      );
	    }
	    .cover-block.has-cover .cover-preview::after { opacity: 1; }
	    .cover-preview img {
	      width: 100%;
	      display: block;
	      aspect-ratio: 16 / 9;
	      object-fit: cover;
	      object-position: center top;
	    }
	    .cover-empty {
	      padding: 14px 14px;
	      font-family: var(--font-sans);
	      font-size: 13px;
	      color: var(--text-secondary);
	      background: var(--bg-secondary);
	    }
		    .cover-actions {
		      display: flex;
		      align-items: center;
		      justify-content: space-between;
		      gap: 10px;
		      margin-bottom: 10px;
		    }
		    .cover-action-buttons {
		      display: flex;
		      align-items: center;
		      gap: 8px;
		      flex: 0 0 auto;
		    }
		    .cover-action-buttons .icon-btn {
		      background: var(--bg-secondary);
		      color: var(--text);
		    }
		    .cover-action-buttons .icon-btn:hover {
		      background: var(--bg);
		    }
		    .tags-inline {
		      display: flex;
		      align-items: center;
		      gap: 10px;
		      flex-wrap: wrap;
		      min-height: 34px;
		      flex: 1;
		      min-width: 0;
		    }
		    .tags-chips {
		      display: flex;
		      align-items: center;
		      gap: 6px;
		      flex-wrap: wrap;
		      min-width: 0;
		    }
		    .tags-inline .tag-chip {
		      font-size: 12px;
		      padding: 5px 9px;
		      background: var(--bg-secondary);
		      cursor: default;
		    }
		    .tags-inline .tag-chip:hover { color: var(--text-secondary); border-color: var(--border); }
		    .tags-toggle-btn {
		      height: 34px;
		      display: inline-flex;
		      align-items: center;
		      justify-content: center;
		      gap: 6px;
		      border-radius: 999px;
		      border: 1px solid var(--btn-border);
		      background: var(--btn-bg);
		      color: var(--text-secondary);
		      cursor: pointer;
		      font-family: var(--font-sans);
		      font-size: 12px;
		      line-height: 1;
		      padding: 0 12px;
		      white-space: nowrap;
		      flex: 0 0 auto;
		      box-shadow: var(--btn-shadow);
		      transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
		    }
		    .tags-toggle-btn:hover { color: var(--text); border-color: var(--text-secondary); background: var(--btn-bg-hover); box-shadow: var(--btn-shadow-hover); }
		    .tags-toggle-btn:active { transform: translateY(1px); box-shadow: none; }
		    .tags-toggle-btn.active { background: var(--text); color: var(--bg); border-color: transparent; box-shadow: 0 10px 22px rgba(0,0,0,0.2); }
		    .tags-editor {
		      margin-bottom: 18px;
		      display: none;
		    }
		    .tags-input {
		      width: 100%;
		      max-width: 520px;
		      padding: 9px 12px;
		      border-radius: 10px;
		      border: 1px solid var(--border);
		      background: var(--bg);
		      color: var(--text);
		      font-family: var(--font-sans);
		      font-size: 13px;
		      outline: none;
		    }
		    .tags-input::placeholder { color: var(--text-ghost); }
		    .refs-editor { margin-bottom: 18px; display: none; }
		    .refs-list { list-style: none; padding: 0; margin: 0 0 8px 0; }
		    .refs-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-family: var(--font-sans); font-size: 13px; }
		    .refs-list .ref-num { font-weight: 600; min-width: 24px; color: var(--text-secondary); flex-shrink: 0; }
		    .refs-list .ref-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		    .refs-list .ref-url { font-size: 11px; color: var(--text-secondary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		    .refs-list .ref-remove { cursor: pointer; color: var(--text-secondary); opacity: 0.6; font-size: 16px; padding: 0 4px; background: none; border: none; }
		    .refs-list .ref-remove:hover { opacity: 1; color: #c00; }
		    .refs-add-row { display: flex; gap: 8px; align-items: center; }
		    .refs-add-row input { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 13px; outline: none; }
		    .refs-add-row input:focus { border-color: var(--text-secondary); }
		    .refs-add-row .ref-title-input { flex: 2; }
		    .refs-add-row .ref-url-input { flex: 3; }
		    .refs-add-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text); cursor: pointer; font-family: var(--font-sans); font-size: 12px; white-space: nowrap; }
		    .refs-add-btn:hover { border-color: var(--text-secondary); }
		    .suggested-refs-panel { margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border) 70%); background: color-mix(in srgb, var(--accent) 5%, var(--bg) 95%); font-family: var(--font-sans); }
		    .suggested-refs-panel .sr-header { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
		    .suggested-refs-panel .sr-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
		    .suggested-refs-panel .sr-item:last-child { border-bottom: none; }
		    .suggested-refs-panel .sr-action { font-size: 11px; font-weight: 600; text-transform: uppercase; min-width: 32px; flex-shrink: 0; }
		    .suggested-refs-panel .sr-action.add { color: #16a34a; }
		    .suggested-refs-panel .sr-action.remove { color: #dc2626; }
		    .suggested-refs-panel .sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
		    .suggested-refs-panel .sr-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
		    .suggested-refs-panel .sr-url { font-size: 11px; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
		    .suggested-refs-panel .sr-snippet { font-size: 11px; color: var(--text-secondary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
		    .suggested-refs-panel .sr-url-link { text-decoration: none; border-bottom: 1px dashed transparent; }
		    .suggested-refs-panel .sr-url-link:hover { border-bottom-color: color-mix(in srgb, var(--text-secondary) 45%, transparent); }
		    .suggested-refs-panel .sr-btns { display: flex; gap: 4px; flex-shrink: 0; }
		    .suggested-refs-panel .sr-btn { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
		    .suggested-refs-panel .sr-btn.accept:hover { border-color: rgba(34,197,94,0.45); color: #166534; background: rgba(34,197,94,0.14); }
		    .suggested-refs-panel .sr-btn.reject:hover { border-color: rgba(239,68,68,0.45); color: #b91c1c; background: rgba(239,68,68,0.12); }
		    .cite-autocomplete { position: absolute; z-index: 200; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); max-width: 340px; min-width: 180px; display: none; overflow: hidden; font-family: var(--font-sans); }
		    .cite-autocomplete .cite-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text); }
		    .cite-autocomplete .cite-item:hover, .cite-autocomplete .cite-item.active { background: var(--hover-bg, rgba(128,128,128,0.1)); }
		    .cite-autocomplete .cite-item .cite-id { font-weight: 600; color: var(--text-secondary); min-width: 28px; flex-shrink: 0; }
		    .cite-autocomplete .cite-item .cite-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		    .cite-autocomplete .cite-empty { padding: 10px 12px; font-size: 13px; color: var(--text-secondary); font-style: italic; }
		    .cite-tooltip { position: fixed; z-index: 300; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); padding: 6px 10px; font-family: var(--font-sans); font-size: 12px; max-width: 320px; pointer-events: none; display: none; line-height: 1.4; }
		    .cite-tooltip .cite-tooltip-id { font-weight: 600; color: var(--text-secondary); }
		    .cite-tooltip .cite-tooltip-title { color: var(--text); }
		    .cite-tooltip .cite-tooltip-url { color: var(--text-secondary); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-top: 2px; }
		    .cover-btn {
		      background: var(--btn-bg);
		      border: 1px solid var(--btn-border);
		      color: var(--text-secondary);
	      border-radius: 999px;
	      padding: 8px 12px;
	      font-family: var(--font-sans);
	      font-size: 13px;
	      cursor: pointer;
	      white-space: nowrap;
	      box-shadow: var(--btn-shadow);
	      transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
	    }
	    .cover-btn:hover { color: var(--text); border-color: var(--text-secondary); background: var(--btn-bg-hover); box-shadow: var(--btn-shadow-hover); }
	    .cover-btn:active { transform: translateY(1px); box-shadow: none; }
	    .cover-btn:disabled { opacity: 0.6; cursor: not-allowed; }
		    .publish-url {
		      margin-top: 12px;
		      padding: 10px;
		      background: var(--bg-secondary);
	      border-radius: 6px;
	      font-family: var(--font-sans);
	      font-size: 12px;
	      word-break: break-all;
	    }
	    .publish-url a { color: var(--accent); }
	    .publish-url-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
	    .publish-url-row a { flex: 1; min-width: 0; }
	    .publish-copy {
	      background: var(--btn-bg);
	      border: 1px solid var(--btn-border);
	      color: var(--text-secondary);
	      border-radius: 999px;
	      padding: 4px 10px;
	      font-family: var(--font-sans);
	      font-size: 12px;
	      cursor: pointer;
	      white-space: nowrap;
	      box-shadow: var(--btn-shadow);
	      transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
	    }
	    .publish-copy:hover { color: var(--text); border-color: var(--text-secondary); background: var(--btn-bg-hover); box-shadow: var(--btn-shadow-hover); }
	    .publish-copy:active { transform: translateY(1px); box-shadow: none; }

    /* Toast */
    .toast {
      position: fixed;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--text);
      color: var(--bg);
      padding: 12px 20px;
      border-radius: 8px;
      font-family: var(--font-sans);
      font-size: 14px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      z-index: 2000;
    }
    .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }