/* ============================================================
       Second Brain — Journal edition
       Editorial / serif-forward · warm paper · terracotta accent
       Light + dark via html[data-theme]. Variable names kept
       backward-compatible so inline styles keep resolving.
       ============================================================ */

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

      :root {
        /* surfaces */
        --bg: #ffffff;
        --bg-card: #fcfbf7;
        --bg-tag: #ece8dd;
        --bg-secondary: #fcfbf7;
        --bg-confirm: rgba(253, 84, 10, 0.1);
        --bg-tag-confirmed: #fd540a;
        --surface-2: #f2efec;
        --surface-3: #e8e3df;

        /* ink */
        --text-primary: #161616;
        --text-secondary: #68635f;
        --text-tertiary: #96908b;
        --text-tag: #68635f;
        --text-tag-confirmed: #161616;

        /* lines */
        --border: rgba(22, 22, 22, 0.09);
        --border-card: rgba(22, 22, 22, 0.075);
        --border-input: rgba(22, 22, 22, 0.11);
        --line-soft: rgba(22, 22, 22, 0.06);

        /* accent — brand orange */
        --accent: #fd540a;
        --accent-press: #a83200;
        --accent-soft: rgba(253, 84, 10, 0.09);
        --accent-ink: #c43d00;
        --good: #18794e;
        --danger: #b42318;
        --danger-soft: rgba(180, 35, 24, 0.08);
        --on-accent: #161616;

        /* type */
        --font-serif: 'Lora', Georgia, serif;
        --font-sans: 'Geist', 'Inter', system-ui, sans-serif;

        /* radii */
        --radius-card: 14px;
        --radius-pill: 999px;
        --radius-tag: 999px;
        --radius-bubble: 18px;

        /* elevation */
        --shadow-card: 0 1px 2px rgba(22, 22, 22, 0.05), 0 4px 14px rgba(22, 22, 22, 0.06);
        --shadow-float: 0 2px 6px rgba(22, 22, 22, 0.07), 0 14px 34px rgba(22, 22, 22, 0.12);
        --shadow-sheet: 0 -10px 44px rgba(22, 22, 22, 0.16);

        /* brand mark (S-ribbon), used to replace the brain glyph in identity spots */
        --sb-mark: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAtNTMuMzUgMjcwLjI3IDI3MC4yNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZDU0MGE7fS5jbHMtMntmaWxsOiNmZDZmMTI7fTwvc3R5bGU+PC9kZWZzPjxnPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTS4wNCwxMDUuODNjLS4wMi40MS0uMDQuODQtLjA0LDEuMjZsLjAyLTEuMjZoLjAyWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI2OC43NCwxNjMuNThsLTIxNS44Ny0zLjI0Yy0yOS4xNi0uNDMtNTIuNTYtMjQuMTYtNTIuODctNTMuMjJ2LS4wMmw5NS4wMywxLjQyLDE0Mi45NSw1LjY5YzUuODcsMi43MiwxMS4xMyw2LjUxLDE1LjU4LDExLjE1LDkuNiw5Ljg1LDE1LjQsMjMuMzcsMTUuMTcsMzguMjFaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjcwLjI2LDU3LjVsLTExOS4yNS0xLjc5LTExNC41MS00LjUxQzE1Ljg1LDQzLjQ1LDEuMjYsMjMuMzksMS42MSwwbDIxNS44MSwzLjI0YzE0Ljg0LjIzLDI4LjE3LDYuNDEsMzcuNzIsMTYuMyw5LjUsOS43OSwxNS4yOSwyMy4yNSwxNS4xMywzNy45NloiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0yNzAuMjYsNTcuNXYuMjVjLS4yOSwxNC43LTYuNDcsMjcuOTctMTYuMjQsMzcuNDctNS40LDUuMjMtMTEuOTMsOS4zNi0xOS4xMSwxMS45M2gtLjA2bC04Ny44Ljg5aC0uMzFsLTUxLjU5LjQ5aC0uMTJMMCwxMDcuMTF2LS4wMmMwLS40MS4wMi0uODQuMDQtMS4yNi44Ny0yMi40NCwxNS41Mi00MS4zNiwzNS42NC00OC40OGwxMjUuMjEtMS4yNi05Ljg3LS4zOSwxMTkuMjUsMS43OVoiLz48L2c+PC9zdmc+Cg==');

        /* motion */
        --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
        --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
      }

      html[data-theme='dark'] {
        --bg: #161616;
        --bg-card: #221f17;
        --bg-tag: #2c2820;
        --bg-secondary: #221f17;
        --bg-confirm: rgba(253, 111, 18, 0.15);
        --bg-tag-confirmed: #fd6f12;
        --surface-2: #2c2820;
        --surface-3: #38332a;

        --text-primary: #f2efec;
        --text-secondary: #c9c5c1;
        --text-tertiary: #8a857f;
        --text-tag: #c9c5c1;
        --text-tag-confirmed: #161616;

        --border: rgba(255, 255, 255, 0.085);
        --border-card: rgba(255, 255, 255, 0.075);
        --border-input: rgba(255, 255, 255, 0.11);
        --line-soft: rgba(255, 255, 255, 0.055);

        --accent: #fd6f12;
        --accent-press: #ff8a3d;
        --accent-soft: rgba(253, 111, 18, 0.16);
        --accent-ink: #ffab6e;
        --good: #7bae8a;
        --danger: #d9806b;
        --danger-soft: rgba(217, 128, 107, 0.14);
        --on-accent: #161616;

        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.32), 0 6px 18px rgba(0, 0, 0, 0.28);
        --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.4), 0 16px 36px rgba(0, 0, 0, 0.5);
        --shadow-sheet: 0 -10px 44px rgba(0, 0, 0, 0.55);
      }

      html,
      body {
        height: 100%;
        background: var(--bg);
        font-family: var(--font-sans);
        color: var(--text-primary);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow: hidden;
      }

      body {
        transition: background 0.45s var(--ease);
      }

      i.ti {
        line-height: 1;
      }

      ::selection {
        background: var(--accent-soft);
      }

      #app {
        display: flex;
        flex-direction: column;
        height: 100svh;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        background: var(--bg);
        position: relative;
      }

      #sidebar {
        display: none;
      }

      #main-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
      }

      /* ============ AUTH ============ */
      #auth-overlay {
        position: fixed;
        inset: 0;
        background: var(--bg);
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        animation: fade-in 0.5s var(--ease);
      }

      @keyframes fade-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .auth-card {
        width: 100%;
        max-width: 400px;
        padding: 40px 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #auth-overlay .brain-logo {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        position: relative;
      }

      #auth-overlay .brain-logo i {
        font-size: 33px;
      }

      #auth-overlay .brain-logo::after {
        content: '';
        position: absolute;
        inset: -7px;
        border-radius: 50%;
        border: 1px solid var(--accent-soft);
      }

      #auth-overlay h1 {
        font-family: var(--font-serif);
        font-size: 29px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 9px;
        letter-spacing: -0.015em;
      }

      #auth-overlay p {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 34px;
        text-align: center;
        line-height: 1.6;
        max-width: 300px;
      }

      #auth-overlay .field-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 11px;
        margin-bottom: 14px;
      }

      #auth-overlay input {
        width: 100%;
        padding: 14px 16px;
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 15px;
        color: var(--text-primary);
        outline: none;
        transition:
          border-color 0.18s,
          box-shadow 0.18s;
      }

      #auth-overlay input::placeholder {
        color: var(--text-tertiary);
      }

      #auth-overlay input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
      }

      #auth-connect {
        width: 100%;
        padding: 15px;
        background: var(--accent);
        color: var(--on-accent);
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition:
          background 0.18s,
          transform 0.12s var(--ease);
      }

      #auth-connect:hover {
        background: var(--accent-press);
      }

      #auth-connect:active {
        transform: scale(0.985);
      }

      #auth-error {
        font-size: 13px;
        color: var(--danger);
        text-align: center;
        margin-top: 10px;
        min-height: 18px;
      }

      /* ============ TOP BAR ============ */
      #topbar {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 14px 18px 12px;
        background: var(--bg);
        flex-shrink: 0;
        position: relative;
        z-index: 10;
      }

      .brain-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .brain-avatar i {
        font-size: 20px;
      }

      /* identity spots render the brand mark instead of the icon-font glyph */
      .brain-avatar i.ti-brain,
      #auth-overlay .brain-logo i.ti-brain {
        font-size: 0;
        width: 62%;
        height: 62%;
        background-color: var(--accent);
        mask: var(--sb-mark) center / contain no-repeat;
        -webkit-mask: var(--sb-mark) center / contain no-repeat;
      }
      .brain-avatar i.ti-brain::before,
      #auth-overlay .brain-logo i.ti-brain::before {
        content: none;
      }

      .topbar-info {
        flex: 1;
        min-width: 0;
      }

      .topbar-name {
        font-family: var(--font-serif);
        font-size: 18px;
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.15;
        letter-spacing: -0.01em;
      }

      .topbar-status {
        font-size: 11.5px;
        color: var(--text-secondary);
        line-height: 1.3;
        margin-top: 1px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .topbar-status::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--good);
        flex-shrink: 0;
      }

      .topbar-menu {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .topbar-menu i {
        font-size: 22px;
      }

      .topbar-menu:hover {
        background: var(--surface-2);
        color: var(--text-primary);
      }

      /* ============ SCREENS ============ */
      #screens {
        flex: 1;
        overflow: hidden;
        position: relative;
      }

      .screen {
        display: none;
        flex-direction: column;
        height: 100%;
        position: absolute;
        inset: 0;
      }

      .screen.active {
        display: flex;
        animation: screen-in 0.34s var(--ease);
      }

      @keyframes screen-in {
        from {
          transform: translateY(8px);
        }
        to {
          transform: none;
        }
      }

      #recall-messages,
      #remember-messages {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px 18px 8px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
      }

      /* ============ BOTTOM NAV ============ */
      #navbar {
        display: flex;
        border-top: 0.5px solid var(--border);
        background: var(--bg);
        flex-shrink: 0;
        padding: 9px 8px calc(16px + env(safe-area-inset-bottom));
      }

      .nav-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px 0;
        color: var(--text-tertiary);
        transition: color 0.2s var(--ease);
      }

      .nav-tab i {
        font-size: 22px;
        transition: transform 0.32s var(--ease-spring);
      }

      .nav-tab span {
        font-family: var(--font-serif);
        font-size: 11.5px;
        letter-spacing: 0.005em;
      }

      .nav-tab.active {
        color: var(--accent);
      }

      .nav-tab.active i {
        transform: translateY(-1px);
      }

      .nav-tab:active i {
        transform: scale(0.84);
      }

      /* ============ CHAT BUBBLES ============ */
      .bubble-row {
        display: flex;
        animation: bubble-in 0.36s var(--ease) both;
      }

      .bubble-row.user {
        justify-content: flex-end;
      }

      .bubble-row.brain {
        justify-content: flex-start;
      }

      @keyframes bubble-in {
        from {
          transform: translateY(9px);
        }
        to {
          transform: none;
        }
      }

      .bubble {
        max-width: 84%;
        padding: 11px 15px;
        border-radius: var(--radius-bubble);
        font-size: 14px;
        line-height: 1.5;
        word-wrap: break-word;
      }

      .bubble.user {
        background: var(--text-primary);
        color: var(--bg);
        border-bottom-right-radius: 6px;
      }

      .bubble.user .hashtag {
        color: color-mix(in srgb, var(--bg) 68%, var(--accent));
      }

      .bubble.brain {
        background: var(--bg-card);
        color: var(--text-primary);
        border: 0.5px solid var(--border-card);
        border-bottom-left-radius: 6px;
        box-shadow: var(--shadow-card);
      }

      /* Journal serif voice — AI answers + welcome lines */
      .bubble.brain.answer,
      .bubble.brain.voice {
        font-family: var(--font-serif);
        font-size: 16.5px;
        line-height: 1.6;
        letter-spacing: -0.003em;
        padding: 14px 17px;
        max-width: 90%;
      }

      .bubble.brain.answer strong,
      .bubble.brain.voice strong {
        color: var(--accent-ink);
        font-weight: 600;
      }

      .bubble.brain.answer em {
        color: var(--accent-ink);
      }

      .hashtag {
        color: var(--accent);
        font-weight: 500;
      }

      .bubble-time {
        font-size: 11px;
        color: var(--text-tertiary);
        padding: 0 6px;
        margin-top: 4px;
        text-align: right;
      }

      .bubble-row.user > div {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        max-width: 84%;
      }

      /* loading dots */
      .loading-dots {
        display: flex;
        gap: 6px;
        padding: 16px 2px;
        background: transparent;
        border: none;
        border-radius: 0;
        width: fit-content;
        box-shadow: none;
      }

      .loading-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--text-tertiary);
        animation: bounce 1.3s infinite ease-in-out;
      }

      .loading-dots span:nth-child(2) {
        animation-delay: 0.16s;
      }
      .loading-dots span:nth-child(3) {
        animation-delay: 0.32s;
      }

      @keyframes bounce {
        0%,
        80%,
        100% {
          transform: scale(0.7);
          opacity: 0.4;
        }
        40% {
          transform: scale(1);
          opacity: 1;
        }
      }

      .brain-cards-wrapper {
        display: flex;
        flex-direction: column;
        gap: 9px;
      }

      #recall-welcome {
        gap: 10px;
      }

      /* ============================================================
       JOURNAL EDITORIAL — Recall reads as prose, Remember as writing
       ============================================================ */
      #recall-messages,
      #remember-messages {
        gap: 0;
        padding: 20px 20px 10px;
      }

      /* opening hero (welcome / remember intro) */
      .recall-hero {
        padding: 6px 0 2px;
        animation: bubble-in 0.4s var(--ease) both;
      }

      .recall-hero .eyebrow {
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent-ink);
        margin-bottom: 13px;
      }

      .recall-hero .hero-line {
        font-family: var(--font-serif);
        font-size: 23px;
        line-height: 1.42;
        letter-spacing: -0.012em;
        color: var(--text-primary);
        max-width: 22em;
      }

      .recall-hero .hero-line .hashtag {
        color: var(--accent-ink);
      }

      /* a recall exchange: uppercase question label + large serif answer */
      .ex-q {
        display: flex;
        gap: 8px;
        align-items: baseline;
        flex-wrap: wrap;
        font-size: 11px;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--accent-ink);
        padding: 24px 0 13px;
        border-top: 0.5px solid var(--line-soft);
        animation: bubble-in 0.36s var(--ease) both;
      }

      #recall-messages > .ex-q:first-child {
        border-top: none;
        padding-top: 6px;
      }

      .ex-q .q-dash {
        opacity: 0.5;
      }

      .ex-q .q-text {
        color: var(--text-secondary);
        letter-spacing: 0.03em;
        font-weight: 500;
      }

      .ex-a {
        font-family: var(--font-serif);
        font-size: 19px;
        line-height: 1.58;
        letter-spacing: -0.004em;
        color: var(--text-primary);
        animation: bubble-in 0.36s var(--ease) both;
      }

      .ex-a strong {
        color: var(--accent-ink);
        font-weight: 600;
      }
      .ex-a em {
        color: var(--accent-ink);
        font-style: italic;
      }

      .ex-a > *:first-child {
        margin-top: 0;
      }
      .ex-a > *:last-child {
        margin-bottom: 0;
      }
      .ex-a p {
        margin: 0 0 0.7em;
      }
      .ex-a p:last-child {
        margin-bottom: 0;
      }

      .ex-a h3,
      .ex-a h4 {
        font-family: var(--font-serif);
        font-weight: 600;
        color: var(--text-primary);
        letter-spacing: -0.01em;
        line-height: 1.3;
        margin: 1.1em 0 0.45em;
      }
      .ex-a h3 {
        font-size: 0.92em;
      }
      .ex-a h4 {
        font-size: 0.66em;
        font-weight: 600;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--accent-ink);
        font-family: var(--font-sans);
      }

      .ex-a ul,
      .ex-a ol {
        margin: 0.55em 0 0.8em;
        padding: 0;
        list-style: none;
        counter-reset: exli;
      }
      .ex-a li {
        position: relative;
        padding-left: 1.3em;
        margin-bottom: 0.42em;
        line-height: 1.5;
      }
      .ex-a li:last-child {
        margin-bottom: 0;
      }
      .ex-a ul > li::before {
        content: '';
        position: absolute;
        left: 0.15em;
        top: 0.62em;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
      }
      .ex-a ol > li {
        counter-increment: exli;
      }
      .ex-a ol > li::before {
        content: counter(exli);
        position: absolute;
        left: 0;
        top: 0.04em;
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 0.82em;
        color: var(--accent-ink);
        font-variant-numeric: tabular-nums;
      }
      .ex-a code {
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 0.82em;
        background: var(--surface-2);
        padding: 0.1em 0.4em;
        border-radius: 5px;
      }

      /* system note (no result / error) */
      .recall-sys {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 18px;
        line-height: 1.55;
        color: var(--text-secondary);
        padding: 24px 0 0;
        border-top: 0.5px solid var(--line-soft);
        animation: bubble-in 0.36s var(--ease) both;
      }

      /* sources, sitting under an answer */
      .ex-a + .sources-toggle,
      .sources-toggle {
        margin-top: 16px;
      }

      /* ---- Remember: editorial capture notes ---- */
      .capture-note {
        position: relative;
        font-family: var(--font-serif);
        font-size: 18px;
        line-height: 1.5;
        color: var(--text-primary);
        padding: 22px 0 4px 16px;
        border-top: 0.5px solid var(--line-soft);
        animation: bubble-in 0.36s var(--ease) both;
      }

      .capture-note::before {
        content: '';
        position: absolute;
        left: 0;
        top: 24px;
        bottom: 11px;
        width: 2px;
        background: var(--accent);
        border-radius: 2px;
      }

      .capture-note .hashtag {
        font-family: var(--font-sans);
        font-size: 13.5px;
        vertical-align: 1px;
      }

      .sys-note {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 13px;
        color: var(--text-tertiary);
        padding: 8px 0 4px 16px;
        animation: bubble-in 0.36s var(--ease) both;
      }

      #remember-messages .confirm-block {
        margin: 8px 0 4px 16px;
      }

      /* ---- underline "writing" inputs for both composers ---- */
      #screen-recall .input-inner,
      #screen-remember .input-inner {
        background: transparent;
        border: none;
        border-bottom: 1.5px solid var(--accent);
        border-radius: 0;
        padding: 4px 2px 9px;
        margin: 0 4px;
        box-shadow: none;
        align-items: flex-end;
        gap: 10px;
      }

      #screen-recall .input-inner:focus-within,
      #screen-remember .input-inner:focus-within {
        box-shadow: none;
        border-bottom-color: var(--accent-press);
      }

      #screen-recall .input-field,
      #screen-remember .input-field {
        font-family: var(--font-serif);
        font-size: 16.5px;
        padding: 6px 0;
      }

      #screen-recall .input-field::placeholder,
      #screen-remember .input-field::placeholder {
        font-style: italic;
        color: var(--text-tertiary);
      }

      #screen-recall .send-btn,
      #screen-remember .send-btn {
        background: transparent;
        width: auto;
        height: auto;
        padding: 4px;
      }

      #screen-recall .send-btn:hover,
      #screen-remember .send-btn:hover {
        background: transparent;
        transform: translateY(-1px);
      }

      #screen-recall .send-btn i,
      #screen-remember .send-btn i {
        font-size: 23px;
        color: var(--accent);
      }

      #screen-recall .send-btn:disabled,
      #screen-remember .send-btn:disabled {
        opacity: 0.4;
      }

      /* sources toggle */
      .sources-toggle {
        display: flex;
        flex-direction: column;
        gap: 9px;
        animation: bubble-in 0.36s var(--ease) both;
      }

      .sources-toggle > button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        align-self: flex-start;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-family: var(--font-sans);
        font-size: 12px;
        padding: 3px 2px;
        transition: color 0.15s;
      }

      .sources-toggle > button i {
        font-size: 15px;
        color: var(--accent);
      }

      .sources-toggle > button:hover {
        color: var(--text-primary);
      }

      /* ============ MEMORY CARD (recall sources) ============ */
      .memory-card {
        background: var(--bg-card);
        border: 0.5px solid var(--border-card);
        border-radius: var(--radius-card);
        padding: 12px 14px;
        box-shadow: var(--shadow-card);
        transition:
          transform 0.25s var(--ease),
          box-shadow 0.25s var(--ease),
          opacity 0.3s;
        animation: card-in 0.42s var(--ease) both;
      }

      @keyframes card-in {
        from {
          transform: translateY(8px);
        }
        to {
          transform: none;
        }
      }

      .memory-card:hover {
        box-shadow: var(--shadow-float);
      }

      .memory-card.card--rolled-up {
        opacity: 0.65;
      }

      .memory-card.card--synthesized {
        border-left: 3px solid var(--accent);
      }

      .tag-chip.tag-chip--synthesized {
        background: var(--accent);
        color: var(--on-accent);
        font-weight: 500;
      }

      .vec-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        padding: 3px 8px;
        border-radius: var(--radius-tag);
        white-space: nowrap;
      }
      .vec-chip--on {
        background: var(--accent-soft);
        color: var(--accent-ink);
      }
      .vec-chip--pending {
        background: var(--surface-2);
        color: var(--text-tag);
      }
      .vec-chip--off {
        background: color-mix(in srgb, var(--danger) 15%, transparent);
        color: var(--danger);
        font-weight: 500;
      }

      .match-line {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 9px;
      }

      .match-pct {
        font-size: 10.5px;
        color: var(--accent-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
      }

      .match-bar-bg {
        flex: 1;
        height: 3px;
        background: var(--surface-2);
        border-radius: 2px;
        overflow: hidden;
      }

      .match-bar-fill {
        height: 100%;
        background: var(--accent);
        border-radius: 2px;
        transform-origin: left;
        animation: bar-grow 0.65s var(--ease) both;
      }

      @keyframes bar-grow {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }

      .card-content {
        font-size: 14px;
        color: var(--text-primary);
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 11px;
      }

      .card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
      }

      .tag-chip {
        background: var(--surface-2);
        color: var(--text-tag);
        font-size: 11px;
        padding: 3px 10px;
        border-radius: var(--radius-tag);
        white-space: nowrap;
        font-family: var(--font-sans);
      }

      .card-tags .tag-chip:first-child {
        background: var(--accent-soft);
        color: var(--accent-ink);
      }

      .card-actions {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
      }

      .card-action-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 11px;
        font-family: var(--font-sans);
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 5px 7px;
        border-radius: 8px;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .card-action-btn:hover {
        background: var(--surface-2);
        color: var(--text-primary);
      }

      .card-action-btn i {
        font-size: 14px;
      }

      /* ============ RECENT — numbered editorial list ============ */
      #recent-list {
        flex: 1;
        overflow-y: auto;
        padding: 14px 18px 8px;
        counter-reset: memo;
        -webkit-overflow-scrolling: touch;
      }

      .date-group {
        margin-bottom: 22px;
      }

      .date-label {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        font-size: 15px;
        color: var(--text-secondary);
        margin: 0 2px 6px;
        letter-spacing: 0;
      }

      #recent-list .recent-cards {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      /* recent rows: strip the card chrome, become editorial entries */
      #recent-list .memory-card {
        background: transparent;
        border: none;
        border-top: 0.5px solid var(--line-soft);
        border-radius: 0;
        box-shadow: none;
        padding: 14px 2px 14px 34px;
        position: relative;
        counter-increment: memo;
      }

      #recent-list .memory-card:first-child {
        border-top: none;
      }

      #recent-list .memory-card::before {
        content: counter(memo, decimal-leading-zero);
        position: absolute;
        left: 2px;
        top: 15px;
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 13px;
        color: var(--accent-ink);
        font-variant-numeric: tabular-nums;
      }

      #recent-list .memory-card:hover {
        box-shadow: none;
      }

      #recent-list .card-content {
        font-size: 14.5px;
        line-height: 1.5;
      }

      #recent-list .card-footer {
        margin-top: 8px;
      }

      #recent-list .card-action-btn {
        padding: 4px 6px;
        font-size: 10.5px;
        color: var(--text-tertiary);
      }

      #recent-list .card-action-btn:hover {
        color: var(--text-primary);
      }

      /* ============ FILTER BAR ============ */
      .filter-bar {
        padding: 8px 18px 10px;
        flex-shrink: 0;
        background: var(--bg);
      }

      .filter-inner {
        display: flex;
        align-items: center;
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        border-radius: var(--radius-pill);
        padding: 7px 8px 7px 14px;
        gap: 8px;
        box-shadow: var(--shadow-card);
      }

      .filter-field {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-sans);
        font-size: 13px;
        color: var(--text-secondary);
        min-width: 0;
      }

      .filter-field::placeholder {
        color: var(--text-tertiary);
      }

      select.filter-field {
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
      }

      select.filter-field option {
        color: #161616;
        background: #fcfbf7;
      }

      .refresh-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--surface-2);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--text-secondary);
        transition:
          background 0.15s,
          color 0.15s;
      }

      .refresh-btn i {
        font-size: 15px;
      }

      .refresh-btn:hover {
        background: var(--surface-3);
        color: var(--text-primary);
      }

      .refresh-btn.spinning i {
        animation: spin 0.7s linear infinite;
      }

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

      /* ============ SUGGESTIONS ============ */
      .suggestions-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 6px 18px 6px;
        flex-shrink: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .suggestions-row::-webkit-scrollbar {
        display: none;
      }

      .suggestion-pill {
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        color: var(--text-secondary);
        font-size: 12.5px;
        padding: 7px 14px;
        border-radius: var(--radius-pill);
        white-space: nowrap;
        cursor: pointer;
        font-family: var(--font-sans);
        flex-shrink: 0;
        transition:
          background 0.15s,
          color 0.15s,
          border-color 0.15s;
      }

      .suggestion-pill:hover {
        background: var(--accent-soft);
        border-color: transparent;
        color: var(--accent-ink);
      }

      /* ============ INPUT BAR ============ */
      .input-bar {
        padding: 8px 18px calc(12px + env(safe-area-inset-bottom));
        flex-shrink: 0;
        background: var(--bg);
      }

      .input-inner {
        display: flex;
        align-items: flex-end;
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        border-radius: 24px;
        padding: 6px 6px 6px 16px;
        gap: 8px;
        box-shadow: var(--shadow-card);
        transition:
          border-color 0.18s,
          box-shadow 0.18s;
      }

      .input-inner:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
      }

      .input-field {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-sans);
        font-size: 14.5px;
        color: var(--text-primary);
        resize: none;
        line-height: 1.45;
        padding: 7px 0;
        max-height: 80px;
        overflow-y: auto;
      }

      .input-field::placeholder {
        color: var(--text-tertiary);
      }

      .send-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--accent);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition:
          background 0.18s,
          transform 0.14s var(--ease-spring);
      }

      .send-btn:hover {
        background: var(--accent-press);
      }

      .send-btn:active {
        transform: scale(0.88);
      }

      .send-btn i {
        font-size: 18px;
        color: var(--on-accent);
      }

      .send-btn:disabled {
        opacity: 0.45;
        cursor: default;
      }

      .input-hint {
        font-size: 11.5px;
        color: var(--text-tertiary);
        padding: 0 4px 8px;
      }

      .input-hint .hint-tags {
        color: var(--accent-ink);
        font-weight: 500;
      }

      /* ============ CONFIRM BLOCK (remember) ============ */
      .confirm-block {
        background: var(--bg-confirm);
        border-radius: var(--radius-card);
        padding: 11px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-self: flex-start;
        max-width: 84%;
        animation: bubble-in 0.36s var(--ease) both;
      }

      .confirm-line {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        color: var(--accent-ink);
        font-weight: 500;
      }

      .confirm-line i {
        font-size: 16px;
        color: var(--accent);
      }

      .confirm-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .confirm-tag {
        background: var(--bg-tag-confirmed);
        color: var(--text-tag-confirmed);
        font-size: 11px;
        padding: 3px 10px;
        border-radius: var(--radius-tag);
        font-family: var(--font-sans);
      }

      /* ============ EMPTY STATE ============ */
      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 56px 32px;
        gap: 10px;
        color: var(--text-tertiary);
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 15px;
        line-height: 1.5;
        text-align: center;
        height: 100%;
      }

      .empty-state i {
        font-size: 34px;
        margin-bottom: 4px;
        font-style: normal;
        color: var(--text-tertiary);
      }

      .first-run-steps {
        margin: 14px 0 0;
        padding-left: 20px;
        text-align: left;
        font-family: var(--font-sans);
        font-style: normal;
        font-size: 14px;
        line-height: 1.65;
        color: var(--text-secondary);
        max-width: 460px;
      }

      .first-run-steps li {
        margin-bottom: 8px;
      }

      /* ============ BOTTOM SHEETS ============ */
      #confirm-dialog,
      #append-sheet,
      #edit-sheet,
      #menu-sheet,
      #integrations-sheet,
      #view-sheet {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(20, 18, 13, 0.42);
        align-items: flex-end;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.28s var(--ease);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
      }

      #confirm-dialog.open,
      #append-sheet.open,
      #edit-sheet.open,
      #menu-sheet.open,
      #integrations-sheet.open,
      #view-sheet.open {
        display: flex;
        opacity: 1;
      }

      .confirm-sheet,
      .append-inner,
      .edit-inner,
      .menu-inner,
      .view-inner {
        background: var(--bg);
        border-radius: 24px 24px 0 0;
        width: 100%;
        max-width: 440px;
        box-shadow: var(--shadow-sheet);
        transform: translateY(100%);
        transition: transform 0.34s var(--ease);
      }

      .open .confirm-sheet,
      .open .append-inner,
      .open .edit-inner,
      .open .menu-inner,
      .open .view-inner {
        transform: translateY(0);
      }

      .confirm-sheet {
        padding: 26px 24px calc(34px + env(safe-area-inset-bottom));
      }
      .append-inner {
        padding: 24px 22px calc(34px + env(safe-area-inset-bottom));
      }
      .edit-inner {
        padding: 24px 22px calc(34px + env(safe-area-inset-bottom));
      }
      .menu-inner {
        padding: 24px 22px calc(34px + env(safe-area-inset-bottom));
        max-height: 80vh;
        overflow-y: auto;
      }

      .view-inner {
        padding: 22px 22px calc(34px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        max-height: 90vh;
      }

      .confirm-sheet h3,
      .append-inner h3,
      .edit-inner h3,
      .menu-inner h3,
      .view-header h3 {
        font-family: var(--font-serif);
        font-size: 21px;
        font-weight: 500;
        margin-bottom: 9px;
        letter-spacing: -0.01em;
        color: var(--text-primary);
      }

      .confirm-sheet p {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 22px;
        line-height: 1.55;
      }

      .view-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
        flex-shrink: 0;
      }

      .btn-close-icon {
        background: var(--surface-2);
        border: none;
        color: var(--text-secondary);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
      }

      .btn-close-icon i {
        font-size: 18px;
      }
      .btn-close-icon:hover {
        background: var(--surface-3);
      }

      .view-content {
        font-family: var(--font-serif);
        font-size: 17px;
        color: var(--text-primary);
        line-height: 1.62;
        overflow-y: auto;
        margin-bottom: 18px;
        white-space: pre-wrap;
      }

      .view-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 22px;
        flex-shrink: 0;
      }

      .view-actions {
        display: flex;
        gap: 8px;
        margin-top: auto;
        flex-shrink: 0;
      }

      .btn-view-append,
      .btn-view-edit,
      .btn-view-forget {
        flex: 1;
        padding: 13px;
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--surface-2);
        color: var(--text-primary);
        transition:
          background 0.15s,
          color 0.15s;
      }

      .btn-view-append i,
      .btn-view-edit i,
      .btn-view-forget i {
        font-size: 16px;
      }

      .btn-view-append:hover,
      .btn-view-edit:hover {
        background: var(--surface-3);
      }

      .btn-view-forget {
        color: var(--danger);
      }
      .btn-view-forget:hover {
        background: var(--danger);
        color: #fff;
      }

      .confirm-actions,
      .append-actions {
        display: flex;
        gap: 10px;
      }

      .btn-cancel,
      .btn-append-cancel {
        flex: 1;
        padding: 14px;
        background: var(--surface-2);
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 14.5px;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        transition: background 0.15s;
      }

      .btn-cancel:hover,
      .btn-append-cancel:hover {
        background: var(--surface-3);
      }

      .btn-delete {
        flex: 1;
        padding: 14px;
        background: var(--danger);
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 14.5px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        transition: opacity 0.15s;
      }

      .btn-delete:hover {
        opacity: 0.92;
      }

      .btn-append-save {
        flex: 1;
        padding: 14px;
        background: var(--accent);
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--on-accent);
        cursor: pointer;
        transition: background 0.15s;
      }

      .btn-append-save:hover {
        background: var(--accent-press);
      }

      .btn-append-save:disabled {
        opacity: 0.55;
        cursor: default;
      }

      .append-context {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 13.5px;
        color: var(--text-secondary);
        margin-bottom: 16px;
        line-height: 1.5;
        padding: 12px 14px;
        background: var(--bg-card);
        border: 0.5px solid var(--border-card);
        border-radius: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .append-input-wrap {
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        border-radius: 13px;
        padding: 13px 15px;
        margin-bottom: 14px;
        transition:
          border-color 0.18s,
          box-shadow 0.18s;
      }

      .append-input-wrap:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
      }

      .append-input-wrap textarea {
        width: 100%;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-sans);
        font-size: 14.5px;
        color: var(--text-primary);
        resize: none;
        line-height: 1.5;
        min-height: 60px;
      }

      .append-input-wrap textarea::placeholder {
        color: var(--text-tertiary);
      }

      .edit-existing-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
      }

      .edit-hint {
        font-size: 12px;
        color: var(--text-tertiary);
        margin-bottom: 14px;
      }

      .edit-hint span {
        color: var(--accent-ink);
      }

      /* ============ MENU SHEET ============ */
      .menu-inner h3 {
        margin-bottom: 18px;
      }

      .theme-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0 16px;
        margin-bottom: 4px;
      }

      .theme-row-label {
        font-size: 14px;
        color: var(--text-secondary);
      }

      .theme-toggle {
        display: flex;
        gap: 3px;
        background: var(--surface-2);
        border-radius: var(--radius-pill);
        padding: 3px;
      }

      .theme-toggle button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 7px 13px;
        border-radius: var(--radius-pill);
        font-family: var(--font-sans);
        font-size: 12.5px;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 5px;
        transition:
          background 0.18s,
          color 0.18s;
      }

      .theme-toggle button i {
        font-size: 16px;
      }

      .theme-toggle button.active {
        background: var(--bg-card);
        color: var(--accent-ink);
        box-shadow: var(--shadow-card);
      }

      .menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 0;
        border-top: 0.5px solid var(--border);
        cursor: pointer;
        color: var(--text-primary);
        font-size: 15px;
        background: none;
        border-left: none;
        border-right: none;
        border-bottom: none;
        width: 100%;
        font-family: var(--font-sans);
        text-align: left;
        transition: color 0.15s;
      }

      .menu-item:hover {
        color: var(--text-secondary);
      }

      .menu-item i {
        font-size: 20px;
        color: var(--text-secondary);
      }

      .menu-item.danger {
        color: var(--danger);
      }
      .menu-item.danger i {
        color: var(--danger);
      }

      .about-credits {
        margin: 18px 0 14px;
        padding: 14px 16px;
        background: var(--bg-card);
        border: 0.5px solid var(--border-card);
        border-radius: var(--radius-card);
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.5;
      }

      .about-credits-label {
        font-family: var(--font-serif);
        font-size: 15px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 10px;
      }

      .about-credits-kicker {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 500;
        color: var(--text-tertiary);
        margin: 0 0 6px;
      }

      .about-credits-line {
        margin: 0 0 12px;
      }

      .about-credits-list {
        margin: 0;
        padding-left: 18px;
      }

      .about-credits-list li {
        margin-bottom: 4px;
      }

      .about-credits a {
        color: var(--accent-ink);
        text-decoration: none;
      }

      .about-credits a:hover {
        text-decoration: underline;
      }

      .stats-panel {
        padding: 2px 0 10px;
        margin-bottom: 4px;
      }

      .stats-kpi-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
      }

      .stats-kpi-card {
        background: var(--bg-card);
        border: 0.5px solid var(--border-card);
        border-radius: var(--radius-card);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .stats-kpi-value {
        font-family: var(--font-serif);
        font-size: 26px;
        font-weight: 500;
        color: var(--accent-ink);
        font-variant-numeric: tabular-nums;
        line-height: 1.05;
      }

      .stats-kpi-label {
        font-size: 11px;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 500;
      }

      .stats-top-tags {
        background: var(--bg-card);
        border: 0.5px solid var(--border-card);
        border-radius: var(--radius-card);
        padding: 14px;
      }

      .stats-top-tags-label {
        font-size: 11px;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 500;
        margin-bottom: 9px;
      }

      .stats-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .digest-section {
        margin-bottom: 6px;
      }

      .digest-section-label {
        font-size: 11px;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 500;
        margin-bottom: 9px;
      }

      .digest-candidate-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 0.5px solid var(--line-soft);
      }

      .digest-candidate-row:last-of-type {
        border-bottom: none;
      }

      .digest-candidate-label {
        font-size: 13px;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .digest-candidate-count {
        font-size: 11px;
        color: var(--text-tertiary);
      }

      .digest-btn {
        font-size: 12px;
        font-weight: 500;
        color: var(--accent);
        background: var(--accent-soft);
        border: none;
        border-radius: var(--radius-pill);
        padding: 5px 12px;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.15s;
      }

      .digest-btn:hover {
        background: rgba(253, 84, 10, 0.14);
      }

      .digest-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .digest-btn--loading i {
        animation: spin 0.7s linear infinite;
        display: inline-block;
      }

      .digest-note {
        font-size: 12px;
        color: var(--text-tertiary);
        line-height: 1.5;
        margin-bottom: 10px;
      }

      .digest-note a {
        color: var(--accent);
        text-decoration: none;
        border-bottom: 1px solid var(--accent-soft);
      }

      .digest-note a:hover {
        border-bottom-color: var(--accent);
      }

      .integration-row {
        padding: 16px 0;
      }

      .integration-row + .integration-row {
        border-top: 0.5px solid var(--border-input);
      }

      .integration-category-row {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        padding: 15px 4px;
        background: transparent;
        border: none;
        border-bottom: 0.5px solid var(--border-input);
        font-family: inherit;
        font-size: 14px;
        color: var(--text-primary);
        cursor: pointer;
        text-align: left;
      }
      .integration-category-row:last-child {
        border-bottom: none;
      }
      .integration-category-row:hover {
        background: rgba(128, 128, 128, 0.08);
      }
      .integration-category-row > i.ti {
        color: var(--accent);
        font-size: 18px;
      }
      .integration-category-name {
        font-weight: 500;
      }
      .integration-category-summary {
        margin-left: auto;
        font-size: 12px;
        color: var(--text-tertiary);
      }
      .integration-category-chevron {
        color: var(--text-tertiary) !important;
        font-size: 16px !important;
      }

      .integration-head {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 6px;
      }

      .integration-head i {
        color: var(--accent);
        font-size: 15px;
      }

      .integration-state {
        margin-left: auto;
        font-size: 11px;
        color: var(--text-tertiary);
      }

      .integration-state.connected {
        color: var(--good);
      }

      .integration-connect-row {
        display: flex;
        gap: 8px;
        margin-bottom: 6px;
      }

      .integration-connect-col {
        flex-direction: column;
        align-items: stretch;
      }

      .integration-connect-row input {
        flex: 1;
        min-width: 0;
        padding: 8px 10px;
        background: transparent;
        border: 0.5px solid var(--border-input);
        border-radius: 9px;
        font-size: 13px;
        font-family: inherit;
        color: var(--text-primary);
        outline: none;
      }

      .integration-connect-row input:focus {
        border-color: var(--accent);
      }

      .integration-actions {
        display: flex;
        gap: 8px;
      }

      .digest-btn.danger {
        color: var(--danger);
        background: rgba(179, 38, 30, 0.08);
      }

      .integration-error {
        font-size: 12px;
        color: var(--danger);
        margin-bottom: 6px;
      }

      .digest-result {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 6px;
        line-height: 1.5;
        padding: 8px 10px;
        background: var(--accent-soft);
        border-radius: 8px;
      }

      .digest-result-meta {
        margin-top: 6px;
        font-size: 11px;
        color: var(--good);
        font-weight: 500;
      }

      /* ============ DESKTOP SIDEBAR ============ */
      #sidebar {
        width: 248px;
        flex-shrink: 0;
        flex-direction: column;
        background: var(--bg);
        border-right: 0.5px solid var(--border);
        padding: 20px 12px 22px;
      }

      .sb-logo {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 6px 10px 26px;
      }

      .sb-brand-name {
        font-family: var(--font-serif);
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
      }

      .sb-brand-status {
        font-size: 11.5px;
        color: var(--text-secondary);
        margin-top: 1px;
      }

      .sb-nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }

      .sb-tab {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 11px;
        border-radius: 10px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 14.5px;
        font-family: var(--font-serif);
        width: 100%;
        text-align: left;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .sb-tab i {
        font-size: 19px;
        flex-shrink: 0;
      }

      .sb-tab:hover {
        background: var(--surface-2);
        color: var(--text-primary);
      }

      .sb-tab.active {
        background: var(--accent-soft);
        color: var(--accent-ink);
      }

      .sb-footer {
        padding-top: 12px;
        border-top: 0.5px solid var(--border);
      }

      .sb-footer-btn {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 11px;
        border-radius: 10px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 14.5px;
        font-family: var(--font-sans);
        width: 100%;
        text-align: left;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .sb-footer-btn:hover {
        background: var(--surface-2);
        color: var(--text-primary);
      }

      .sb-footer-btn i {
        font-size: 19px;
      }

      /* ============ DESKTOP ============ */
      @media (min-width: 768px) {
        html,
        body {
          height: 100%;
          overflow: auto;
        }

        body {
          background: var(--surface-3);
        }

        #auth-overlay {
          position: fixed;
          inset: 0;
          max-width: none;
          background: color-mix(in srgb, var(--bg) 88%, transparent);
          backdrop-filter: blur(8px);
          align-items: center;
          justify-content: center;
          padding: 0;
        }

        .auth-card {
          background: var(--bg);
          border-radius: 22px;
          padding: 44px 38px;
          width: 420px;
          box-shadow: var(--shadow-float);
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        #app {
          flex-direction: row;
          height: 100vh;
          max-width: 100%;
          width: 100%;
          border-radius: 0;
          overflow: hidden;
        }

        #sidebar {
          display: flex;
        }
        #topbar {
          display: none;
        }
        #navbar {
          display: none;
        }

        #main-panel {
          margin: 0 auto;
          border-left: 0.5px solid var(--border);
          border-right: 0.5px solid var(--border);
        }

        #confirm-dialog,
        #append-sheet,
        #edit-sheet,
        #menu-sheet,
        #integrations-sheet,
        #view-sheet {
          align-items: center;
          justify-content: center;
        }

        .confirm-sheet,
        .append-inner,
        .edit-inner,
        .menu-inner,
        .view-inner {
          border-radius: 18px;
          max-width: 420px;
          transform: translateY(16px) scale(0.98);
          /* Bottom-sheet shadow points upward; on centered modals it reads as a
             flat dark bar under the panel. Use the floating elevation instead. */
          box-shadow: var(--shadow-float);
          border: 0.5px solid var(--border-card);
        }

        .open .confirm-sheet,
        .open .append-inner,
        .open .edit-inner,
        .open .menu-inner,
        .open .view-inner {
          transform: none;
        }
      }

      ::-webkit-scrollbar {
        width: 0;
      }

      /* forget animation */
      @keyframes explode-out {
        0% {
          transform: scale(1);
          opacity: 1;
          filter: brightness(1) blur(0);
        }
        20% {
          transform: scale(1.04) translateY(-2px);
          opacity: 1;
          filter: brightness(1.4) blur(1px);
        }
        100% {
          transform: scale(0.6) translateY(20px);
          opacity: 0;
          filter: brightness(2.2) blur(8px);
        }
      }

      .explode-out {
        animation: explode-out 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
        pointer-events: none;
      }

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

      /* Download-the-app CTA (sidebar footer).
         A solid pill rather than another nav row like Settings — it is the one
         thing here aimed at someone who has not installed the app yet.
         .sb-footer-btn was written for <button>, so as an <a> it also needs the
         underline removed. */
      #sb-download-app {
        --dl-bg: #1f2532;
        --dl-fg: #ffffff;
        box-sizing: border-box;
        justify-content: center;
        gap: 9px;
        margin-bottom: 10px;
        padding: 11px 14px;
        border: none;
        border-radius: var(--radius-pill);
        background: var(--dl-bg);
        color: var(--dl-fg);
        font-weight: 650;
        /* "Download for Windows" is the longest label and wraps to two lines in
           a narrow sidebar, which reads as broken rather than tight. */
        white-space: nowrap;
        font-size: 14px;
        text-decoration: none;
        box-shadow: 0 1px 2px rgba(22, 22, 22, 0.14);
        transition:
          background 0.15s,
          box-shadow 0.15s,
          transform 0.08s;
      }

      /* Inverted in dark mode: the light-mode fill is nearly --bg there, so the
         button would disappear into the sidebar. */
      html[data-theme='dark'] #sb-download-app {
        --dl-bg: var(--text-primary);
        --dl-fg: #161616;
        box-shadow: none;
      }

      #sb-download-app i {
        color: inherit;
        font-size: 17px;
      }

      #sb-download-app:hover {
        background: #2a3444;
        color: var(--dl-fg);
        box-shadow: 0 2px 6px rgba(22, 22, 22, 0.18);
      }

      html[data-theme='dark'] #sb-download-app:hover {
        background: #ffffff;
      }

      /* A press that visibly depresses is most of what makes a link feel like a
         button. */
      #sb-download-app:active {
        transform: translateY(1px);
        box-shadow: 0 1px 1px rgba(22, 22, 22, 0.16);
      }