/* Bond Board — Desk, Nav, Board Scene, Overlays, Hero, Partner Cards, Circle, Reflection, Priority Inbox */
    @keyframes ambientBreathe {
      0%, 100% { opacity:1; }
      50% { opacity:0.7; }
    }
    @keyframes swingOpen {
      0% { transform:rotateX(0deg) scale(1); opacity:1; }
      40% { transform:rotateX(25deg) scale(1.05); opacity:1; }
      100% { transform:rotateX(0deg) scale(1.15); opacity:0; }
    }
    @keyframes swingReturn {
      0% { transform:rotateX(15deg) scale(1.08); opacity:0; }
      60% { opacity:1; }
      100% { transform:rotateX(0deg) scale(1); opacity:1; }
    }
    .board-card.swing-opening {
      animation:swingOpen 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      z-index:200;
      pointer-events:none;
    }
    .board-card.swing-return {
      animation:swingReturn 0.4s ease-out forwards;
    }

    /* Flip card system */
    .flip-card { perspective:800px; }
    .flip-card .pin { z-index:10; }
    .flip-card-inner {
      position:relative; width:100%;
      min-height:100%;
      transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-style:preserve-3d;
    }
    .flip-card.flipped .flip-card-inner { transform:rotateX(-180deg); }
    .flip-front {
      backface-visibility:hidden;
      display:flex; flex-direction:column;
      overflow:hidden;
    }
    .flip-back {
      position:absolute; inset:0; backface-visibility:hidden;
      display:flex; flex-direction:column;
      overflow:hidden;
      transform:rotateX(180deg);
      background-image:url('../textures/paper-fiber.png');
      background-color:#f0ece6;
      background-blend-mode:multiply;
      background-size:512px 512px;
      padding:clamp(10px, 2vw, 20px);
      justify-content:flex-start;
      border-radius:6px;
    }
    .flip-back-title {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(0.85rem, 1.2vw, 1rem);
      font-weight:700; color:#333;
      text-transform:uppercase; letter-spacing:0.12em;
      margin-bottom:8px; text-align:center;
    }
    .flip-back-members {
      flex:1; overflow-y:auto;
      display:flex; flex-direction:column; gap:6px;
    }
    .flip-member {
      display:flex; align-items:center; gap:8px;
      padding:6px 8px; border-radius:8px;
      background:rgba(0,0,0,0.04);
    }
    .flip-member-initial {
      width:28px; height:28px; border-radius:50%;
      background:linear-gradient(135deg, #528285, #3d6b70);
      color:#fff; font-family:'Space Grotesk',sans-serif;
      font-size:0.7rem; font-weight:700;
      display:flex; align-items:center; justify-content:center;
    }
    .flip-member-name {
      font-family:'Cormorant Garamond',serif;
      font-size:0.85rem; color:#333; font-weight:600;
    }
    .flip-back-add-btn {
      margin-top:8px; padding:8px 16px;
      background:linear-gradient(135deg, #528285, #3d6b70);
      color:#fff; border:none; border-radius:8px;
      font-family:'Space Grotesk',sans-serif;
      font-size:0.78rem; font-weight:600;
      cursor:pointer; transition:all 0.2s;
      letter-spacing:0.04em;
    }
    .flip-back-add-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(82,130,133,0.3); }
    .flip-back-empty {
      flex:1; display:flex; align-items:center; justify-content:center;
      font-family:'Cormorant Garamond',serif;
      font-style:italic; color:#888; font-size:0.85rem;
      text-align:center; padding:12px;
    }
    /* ═══════════════════════════════════════════
       DESK & ATMOSPHERE
       ═══════════════════════════════════════════ */
    .bond-desk-surface {
      position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(ellipse at 50% 15%, rgba(180,140,80,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(140,100,50,0.025) 0%, transparent 40%);
    }
    /* Cork surface shown only on homepage */
    #sectionHome {
      position:relative;
    }

    /* Old pin styles hidden — pins are baked into board-scene.jpg */
    .corner-pins, .gold-pin { display:none; }
    .pushpin, .pushpin.red, .pushpin.gold, .pushpin.blue, .pushpin.green, .pushpin.white {
      position:absolute; top:-10px; width:22px; height:22px; border-radius:50%; z-index:5;
      background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #808078 0%, #686862 25%, #585854 45%, #4a4a46 65%, #3e3e3a 85%, #343430 100%);
      border:1px solid rgba(30,30,25,0.5);
      box-shadow:
        0 1px 2px rgba(0,0,0,0.4),
        0 3px 6px rgba(0,0,0,0.3),
        inset 0 -5px 7px rgba(0,0,0,0.5),
        inset 0 2px 3px rgba(255,255,255,0.12);
      transition:transform 0.15s; cursor:pointer;
    }
    .pushpin:hover { transform:scale(1.1); }
    .pushpin::before, .pushpin::after { display:none; }
    .partner-card:nth-child(odd) .pushpin { left:50%; transform:translateX(-50%); }
    .partner-card:nth-child(even) .pushpin { left:50%; transform:translateX(-50%); right:auto; }
    .partner-card:nth-child(3n) .pushpin { left:50%; transform:translateX(-50%); }
    .partner-card:nth-child(4n+1) .pushpin { left:50%; transform:translateX(-50%); right:auto; }
    .bond-candle {
      position:fixed; pointer-events:none; z-index:0;
      border-radius:50%;
      background:radial-gradient(ellipse, rgba(180,140,80,0.04) 0%, rgba(140,100,50,0.015) 40%, transparent 70%);
      animation:candleFlicker 6s ease-in-out infinite;
    }
    .bond-candle.left { top:10%; left:-5%; width:300px; height:300px; animation-delay:0s; }
    .bond-candle.right { top:40%; right:-8%; width:250px; height:250px; animation-delay:1.5s; }
    .bond-candle.center { top:5%; left:30%; width:400px; height:250px; animation-delay:0.8s; opacity:0.3; }
    .emotional-atmosphere { position:fixed; inset:0; pointer-events:none; z-index:-1; transition:background 2s ease; }

    /* ═══════════════════════════════════════════
       TOP NAV
       ═══════════════════════════════════════════ */
    .bond-top-nav {
      position:sticky; top:0; z-index:100;
      display:flex; align-items:center; justify-content:space-between;
      padding:0.8rem 1.5rem;
      background:rgba(52,56,58,0.97);
      backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.06);
      box-shadow:0 4px 24px rgba(0,0,0,0.3);
      transition:background 0.5s;
    }
    body.cork-mode .bond-top-nav {
      background:rgba(52,56,58,0.97);
      border-bottom-color:rgba(255,255,255,0.06);
      box-shadow:0 4px 20px rgba(0,0,0,0.35);
    }
    .nav-left { display:flex; align-items:center; gap:1.5rem; }
    .back-btn {
      background:rgba(120,180,190,0.08); color:rgba(200,220,225,0.85); border:none;
      padding:0.6rem 1.2rem; border-radius:50px; cursor:pointer;
      font-weight:600; font-size:0.8rem; font-family:inherit;
      transition:all 0.3s; text-decoration:none; display:inline-block;
    }
    .back-btn:hover { background:rgba(120,180,190,0.15); color:rgba(230,240,245,1); }
    .nav-right { display:flex; gap:0.8rem; align-items:center; }
    .nav-icon-btn {
      background:rgba(120,180,190,0.08); color:rgba(200,220,225,0.7); border:none;
      width:40px; height:40px; border-radius:50%; cursor:pointer;
      transition:all 0.3s; display:flex; align-items:center; justify-content:center;
    }
    .nav-icon-btn:hover { background:rgba(120,180,190,0.15); color:rgba(230,240,245,1); }

    /* Back to Board button */
    .board-back-btn {
      background:none; border:none; cursor:pointer;
      font-family:'Cormorant Garamond',serif; font-size:0.85rem;
      color:rgba(80,60,30,0.7); padding:8px 4px;
      transition:color 0.15s;
    }
    .board-back-btn:hover { color:rgba(80,60,30,1); }

    .section-back-btn {
      background:none; border:none; cursor:pointer;
      font-family:'Cormorant Garamond',serif; font-size:0.85rem; font-weight:500;
      color:rgba(220,195,150,0.65); padding:6px 4px;
      transition:color 0.2s; white-space:nowrap;
    }
    .section-back-btn:hover { color:rgba(240,220,170,1); }
    .section-nav-icons {
      display:flex; align-items:center; gap:6px;
    }
    .section-nav-btn {
      background:rgba(220,195,150,0.08); color:rgba(220,195,150,0.6);
      border:none; width:34px; height:34px; border-radius:50%;
      cursor:pointer; transition:all 0.2s;
      display:flex; align-items:center; justify-content:center;
    }
    .section-nav-btn:hover {
      background:rgba(220,195,150,0.15); color:rgba(240,225,190,1);
    }

    /* ═══════════════════════════════════════════
       BOTTOM NAV (hidden)
       ═══════════════════════════════════════════ */
    .bond-bottom-nav {
      position:fixed; bottom:0; left:0; right:0; z-index:100;
      display:flex; justify-content:space-around; align-items:center; height:64px;
      background:rgba(52,56,58,0.97);
      backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.06);
      box-shadow:0 -4px 24px rgba(0,0,0,0.3);
      transition:background 0.5s;
    }
    body.cork-mode .bond-bottom-nav {
      background:rgba(52,56,58,0.97);
      border-top-color:rgba(255,255,255,0.06);
      box-shadow:0 -4px 20px rgba(0,0,0,0.35);
    }
    .bond-nav-btn {
      background:none; border:none; color:var(--bond-muted);
      font-family:inherit; font-size:0.7rem; font-weight:500;
      display:flex; flex-direction:column; align-items:center; gap:4px;
      cursor:pointer; padding:8px 20px; transition:all 0.3s; position:relative;
    }
    .bond-nav-btn::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--bond-gold); border-radius:0 0 2px 2px; transition:width 0.3s; }
    .bond-nav-btn.active { color:var(--bond-gold); }
    .bond-nav-btn.active::before { width:24px; }
    .bond-nav-btn svg { width:22px; height:22px; }
    #notifBadge {
      position:absolute; top:-4px; right:2px;
      min-width:24px; height:24px; border-radius:50%;
      background:radial-gradient(circle at 40% 35%, #c0392b 0%, #8b1a1a 60%, #5a0f0f 100%);
      color:rgba(255,235,200,0.95); font-size:0.7rem; font-weight:700;
      display:none; align-items:center; justify-content:center;
      padding:0 5px;
      box-shadow:0 2px 8px rgba(192,57,43,0.5), 0 0 12px rgba(192,57,43,0.3);
      animation:notifPulse 2s ease-in-out infinite;
      font-family:'Space Grotesk',sans-serif;
    }
    @keyframes notifPulse {
      0%,100% { box-shadow:0 2px 8px rgba(192,57,43,0.5), 0 0 12px rgba(192,57,43,0.3); transform:scale(1); }
      50% { box-shadow:0 2px 12px rgba(192,57,43,0.7), 0 0 20px rgba(251,191,36,0.3); transform:scale(1.1); }
    }
    .letter-toast {
      position:fixed; top:16px; left:50%; transform:translateX(-50%);
      z-index:200; display:flex; align-items:center; gap:10px;
      padding:12px 20px; border-radius:4px;
      box-shadow:0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
      animation:toastSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
      max-width:400px; font-family:'Cormorant Garamond',serif;
      font-size:0.9rem; cursor:pointer;
    }
    .letter-toast-seal { font-size:1.2rem; }
    .letter-toast-action {
      margin-left:auto; padding:4px 12px; border-radius:12px;
      border:1px solid currentColor; opacity:0.6; background:none;
      color:inherit; font-family:'Cormorant Garamond',serif;
      font-size:0.8rem; cursor:pointer; transition:opacity 0.2s;
    }
    .letter-toast-action:hover { opacity:1; }
    .letter-toast.toast-leaving { animation:toastSlideOut 0.3s ease-in forwards; }
    @keyframes toastSlideIn {
      from { transform:translateX(-50%) translateY(-100%); opacity:0; }
      to { transform:translateX(-50%) translateY(0); opacity:1; }
    }
    @keyframes toastSlideOut {
      to { transform:translateX(-50%) translateY(-100%); opacity:0; }
    }

    .bond-section { display:none; padding:0 16px; max-width:640px; margin:0 auto; animation:fadeSlideUp 0.4s ease-out; }
    .bond-section.active { display:block; }
    #sectionHome.bond-section {
      padding:0; max-width:100%; margin:0 auto;
      position:relative;
    }

    /* === BOARD SCENE — composable CSS wall + real cards === */
    .board-scene {
      position:relative; width:100%; max-width:100%;
      min-height:100vh;
      display:flex; flex-direction:column;
      line-height:normal; padding:0; overflow:hidden;
      background-image:url('../textures/fabric-herringbone.png');
      background-color:#528285;
      background-blend-mode:multiply;
      background-size:512px 512px;
      box-shadow:inset 0 0 80px rgba(0,0,0,0.35), inset 0 0 160px rgba(0,0,0,0.15);
    }

    .board-scene::before {
      content:'';
      position:absolute; inset:0; z-index:1;
      pointer-events:none;
      background:
        radial-gradient(ellipse at 50% 15%,
          rgba(200,240,245,0.14) 0%,
          rgba(180,230,235,0.07) 30%,
          transparent 65%),
        radial-gradient(ellipse at 50% 100%,
          rgba(0,0,0,0.25) 0%,
          transparent 50%);
      animation:ambientBreathe 25s ease-in-out infinite;
    }

    /* Grid: 4 columns top, pocket-calendar-pocket bottom */
    .board-grid {
      position:relative; z-index:2; flex:1;
      display:grid;
      perspective:1200px;
      grid-template-columns:1fr 1fr 1fr 1fr;
      grid-template-rows:1fr 1fr;
      gap:clamp(16px, 2.5vw, 30px);
      padding:clamp(30px, 5vw, 60px) clamp(24px, 4vw, 55px);
    }

    /* === PAPER CARDS === */
    .board-card {
      position:relative; overflow:visible; cursor:pointer;
      background-image:url('../textures/paper-fiber.png');
      background-color:#f0ece6;
      background-blend-mode:multiply;
      background-size:512px 512px;
      border:none; border-radius:2px;
      box-shadow:
        0 2px 4px rgba(0,0,0,0.22),
        0 6px 16px rgba(0,0,0,0.16),
        0 14px 35px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.5);
      transform-origin:top center;
      transition:transform 0.3s ease, box-shadow 0.3s ease;
      display:flex; flex-direction:column;
      text-align:center;
      padding:clamp(18px, 2vw, 28px) clamp(14px, 1.8vw, 22px);
      aspect-ratio:auto;
    }
    .board-card:hover {
      transform:translateY(-8px) rotateX(2deg) scale(1.01);
      box-shadow:
        0 8px 16px rgba(0,0,0,0.25),
        0 20px 40px rgba(0,0,0,0.18),
        0 30px 60px rgba(0,0,0,0.10);
    }
    .board-card::after {
      content:'';
      position:absolute; bottom:-3px; left:8%; right:8%;
      height:6px;
      background:radial-gradient(ellipse, rgba(0,0,0,0.08) 0%, transparent 70%);
      z-index:-1;
      pointer-events:none;
    }

    /* Corner pushpins — 2 per card */
    .pin {
      position:absolute; z-index:6; width:22px; height:22px; border-radius:50%;
      background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 18%, transparent 35%),
        radial-gradient(circle at 50% 50%, #787874 0%, #65655f 18%, #555550 35%, #484844 52%, #3c3c38 72%, #32322e 100%);
      border:1px solid rgba(30,30,25,0.5);
      box-shadow:
        0 1px 2px rgba(0,0,0,0.4),
        0 3px 6px rgba(0,0,0,0.3),
        0 5px 10px rgba(0,0,0,0.15),
        inset 0 -5px 7px rgba(0,0,0,0.5),
        inset 0 2px 3px rgba(255,255,255,0.12);
      pointer-events:none;
    }
    .pin::before {
      content:'';
      position:absolute;
      top:-3px; left:-3px; right:-3px; bottom:-3px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(0,0,0,0.15) 30%, transparent 70%);
      z-index:-1;
      pointer-events:none;
    }
    .pin::after {
      content:'';
      position:absolute; top:100%; left:50%; transform:translateX(-50%);
      width:8px; height:8px;
      background:radial-gradient(circle, rgba(0,0,0,0.5) 0%, transparent 70%);
      border-radius:50%;
    }
    .pin-tl { top:7px; left:7px; }
    .pin-tr { top:7px; right:7px; }

    /* Grid placement */
    .cell-a { grid-column:1; grid-row:1; }
    .cell-b { grid-column:2; grid-row:1; }
    .cell-c { grid-column:3; grid-row:1; }
    .cell-d { grid-column:4; grid-row:1; }
    .cell-f { grid-column:1; grid-row:2; }
    .cell-g { grid-column:2 / span 2; grid-row:2; }
    .cell-h { grid-column:4; grid-row:2; }

    /* Card A — Logo */
    .card-body-logo {
      display:flex; flex-direction:column; align-items:center;
      justify-content:center; height:100%; gap:4px;
    }
    .board-logo-img {
      width:clamp(60px, 9vw, 130px); height:auto; display:block;
      mix-blend-mode:multiply; filter:saturate(0.9) contrast(1.05);
    }
    .board-logo-text {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(0.85rem, 1.4vw, 1.6rem);
      font-weight:700; color:#1a6b7a;
      letter-spacing:0.14em; text-transform:uppercase;
      text-shadow:0 1px 1px rgba(255,255,255,0.5);
      margin-top:8px;
    }
    .board-logo-tagline {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(0.78rem, 1.2vw, 1.15rem);
      font-weight:600; font-style:italic;
      text-align:center; line-height:1.55;
      letter-spacing:0.02em; margin-top:16px;
      color:#1e293b;
      text-shadow:0 1px 0 rgba(255,255,255,0.7);
    }
    .board-logo-tagline .accent { color:#0e8a9f; }

    /* Card B — Letter lines */
    .letter-lines {
      flex:1; display:flex; flex-direction:column;
      justify-content:space-evenly; width:100%;
      min-height:60px;
    }
    .letter-line { border-bottom:1px solid rgba(0,0,0,0.07); }

    /* Overlay titles & CTAs shared across cards */
    .board-card .overlay-title {
      font-family:'Space Grotesk',sans-serif;
      font-size:clamp(0.55rem, 0.85vw, 0.72rem);
      text-transform:uppercase; letter-spacing:0.14em;
      color:rgba(80,70,55,0.6); text-align:center;
      margin-bottom:8px; font-weight:600;
    }
    .board-card .overlay-cta {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(0.75rem, 1.1vw, 1rem);
      color:#0e8a9f; text-align:center; cursor:pointer;
      font-style:italic; margin-top:auto; padding-top:6px;
    }

    /* Card G — Calendar (wider, bottom row) */
    .cell-g { align-items:stretch; }

    /* === LEATHER POCKETS (pure CSS) === */
    .board-pocket {
      position:relative; cursor:pointer;
      display:flex; flex-direction:column;
      align-items:stretch; justify-content:flex-end;
      min-height:clamp(140px, 18vw, 260px);
      transition:transform 0.25s ease;
    }
    .board-pocket:hover { transform:scale(1.02); }
    .pocket-paper,
    .pocket-paper-back { transition:transform 0.3s ease; }
    .board-pocket:hover .pocket-paper {
      transform:rotate(-0.5deg) translateY(-6px);
    }
    .board-pocket:hover .pocket-paper-back {
      transform:rotate(0.8deg) translateY(-8px);
    }

    .pocket-paper {
      position:absolute; z-index:4;
      top:clamp(-14px, -2vw, -24px);
      left:10%; right:12%;
      height:clamp(18px, 2.5vw, 32px);
      background-image:url('../textures/paper-fiber.png');
      background-color:#f0ece6;
      background-blend-mode:multiply;
      background-size:512px 512px;
      border-radius:2px 2px 0 0;
      box-shadow:0 -2px 6px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.1);
      transform:rotate(-0.5deg);
    }
    .pocket-paper-back {
      position:absolute; z-index:4;
      top:clamp(-20px, -2.8vw, -34px);
      left:14%; right:8%;
      height:clamp(24px, 3.2vw, 42px);
      background-image:url('../textures/paper-fiber.png');
      background-color:#ebe7e0;
      background-blend-mode:multiply;
      background-size:512px 512px;
      border-radius:2px 2px 0 0;
      box-shadow:0 -1px 4px rgba(0,0,0,0.06);
      transform:rotate(0.8deg);
    }

    .pocket-leather {
      position:relative; z-index:3; flex:1;
      min-height:clamp(100px, 14vw, 200px);
      background-image:url('../textures/leather-grain.png');
      background-color:#6c6762;
      background-blend-mode:multiply;
      background-size:512px 512px;
      border-radius:6px 6px 0 0;
      border-left:1px solid rgba(120,115,110,0.3);
      border-right:1px solid rgba(60,55,50,0.4);
      box-shadow:
        inset 0 6px 14px rgba(0,0,0,0.5),
        inset 0 -4px 12px rgba(0,0,0,0.2),
        inset 3px 0 8px rgba(0,0,0,0.12),
        inset -3px 0 8px rgba(0,0,0,0.12),
        0 -3px 8px rgba(0,0,0,0.15),
        0 8px 24px rgba(0,0,0,0.45),
        0 12px 40px rgba(0,0,0,0.15);
      overflow:hidden;
    }

    .pocket-leather::before {
      content:'';
      position:absolute; top:clamp(16px, 2.2vw, 28px);
      left:6%; right:6%;
      height:clamp(10px, 1.2vw, 16px);
      border:none;
      background:
        repeating-linear-gradient(90deg,
          rgba(170,165,155,0.45) 0px, rgba(170,165,155,0.45) 6px,
          transparent 6px, transparent 12px)
        0 0 / auto 1.5px no-repeat,
        repeating-linear-gradient(90deg,
          rgba(160,155,145,0.4) 0px, rgba(160,155,145,0.4) 6px,
          transparent 6px, transparent 12px)
        0 100% / auto 1.5px no-repeat,
        repeating-linear-gradient(90deg,
          rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 6px,
          transparent 6px, transparent 12px)
        0 2px / auto 1px no-repeat;
    }

    .pocket-leather::after {
      content:'';
      position:absolute; top:0; left:0; right:0;
      height:clamp(10px, 1.4vw, 16px);
      background:
        linear-gradient(180deg,
          rgba(110,105,100,0.7) 0%,
          rgba(85,80,75,0.5) 40%,
          rgba(50,47,44,0.6) 70%,
          transparent 100%);
      border-bottom:1px solid rgba(0,0,0,0.15);
      border-radius:6px 6px 0 0;
    }

    .pocket-label {
      position:absolute; bottom:clamp(10px, 1.5vw, 18px);
      left:0; right:0; text-align:center;
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(0.7rem, 1vw, 0.85rem);
      font-weight:600;
      letter-spacing:0.18em; text-transform:uppercase;
      color:rgba(200,220,222,0.9);
      text-shadow:0 1px 3px rgba(0,0,0,0.5);
      pointer-events:none;
    }

    /* ── Card C: Circle list — show ONLY names, strip all app UI ── */
    .board-circle-list {
      max-height:60%; overflow:hidden;
    }
    .board-circle-list .partner-card {
      all:unset !important;
      display:block !important; padding:3px 0 !important;
      border-bottom:1px solid rgba(0,0,0,0.04) !important;
      cursor:pointer !important;
    }
    .board-circle-list .partner-card .partner-card-inner {
      all:unset !important; display:block !important;
    }
    .board-circle-list .partner-card .partner-card-top {
      all:unset !important; display:block !important;
    }
    .board-circle-list .partner-card .partner-card-name {
      font-family:'Cormorant Garamond',serif !important;
      font-size:0.95rem !important; color:#444 !important;
      font-weight:400 !important;
    }
    .board-circle-list .partner-card .partner-card-initial,
    .board-circle-list .partner-card .partner-card-warmth,
    .board-circle-list .partner-card .partner-streak-dots,
    .board-circle-list .partner-card .partner-card-peek,
    .board-circle-list .partner-card .partner-card-preview,
    .board-circle-list .partner-card .partner-card-presence,
    .board-circle-list .partner-card .circle-card-actions,
    .board-circle-list .partner-card .circle-card-event,
    .board-circle-list .partner-card .partner-card-remove,
    .board-circle-list .partner-card .partner-card-wax,
    .board-circle-list .partner-card .pushpin,
    .board-circle-list .partner-card::before,
    .board-circle-list .partner-card::after {
      display:none !important;
    }
    .board-circle-invite { margin-top:6px; }
    .board-circle-invite .your-circle-card,
    .board-circle-invite .your-circle-empty {
      all:unset !important; display:block !important;
    }
    .board-circle-invite .your-circle-empty-text,
    .board-circle-invite .your-circle-header,
    .board-circle-invite .your-circle-title,
    .board-circle-invite .your-circle-count {
      display:none !important;
    }
    .board-circle-invite .your-circle-empty-btn,
    .board-circle-invite .your-circle-count-btn {
      all:unset !important;
      font-family:'Cormorant Garamond',serif !important;
      font-size:0.9rem !important; color:#0e8a9f !important;
      cursor:pointer !important; font-style:italic !important;
    }

    /* ── Card D: Reflection — strip container chrome, keep text only ── */
    .board-reflection-content { font-size:0.8rem; }
    .board-reflection-content .reflection-ritual {
      all:unset !important; display:block !important;
    }
    .board-reflection-content .reflection-ritual::before,
    .board-reflection-content .reflection-ritual::after {
      display:none !important;
    }
    .board-reflection-content .reflection-ritual-label {
      display:none !important;
    }
    .board-reflection-content .reflection-ritual-prompt {
      font-family:'Cormorant Garamond',serif !important;
      font-size:1rem !important; color:#444 !important;
      font-style:italic !important; line-height:1.5 !important;
      text-align:center !important; margin:0 !important; padding:0 !important;
    }
    .board-reflection-content .reflection-refresh-btn {
      all:unset !important;
      font-family:'Cormorant Garamond',serif !important;
      font-size:0.8rem !important; color:#999 !important;
      cursor:pointer !important; text-decoration:underline !important;
      display:block !important; text-align:center !important;
      margin-top:8px !important;
    }
    .board-reflection-content .reflection-ritual-action {
      margin-top:6px !important; text-align:center !important;
    }
    .board-reflection-content .reflection-ritual-link {
      all:unset !important;
      font-family:'Cormorant Garamond',serif !important;
      font-size:0.9rem !important; color:#0e8a9f !important;
      cursor:pointer !important; font-style:italic !important;
      display:inline-block !important;
      border:1px solid rgba(14,138,159,0.2) !important;
      padding:4px 10px !important; border-radius:2px !important;
    }
    .board-reflection-content .reflection-recipient-picker,
    .board-reflection-content [onclick*="toggleHomeReflectionPicker"] {
      display:none !important;
    }

    /* === CALENDAR (inside card) === */
    .calendar-month {
      font-family:'Space Grotesk',sans-serif; font-size:0.95rem;
      text-transform:uppercase; letter-spacing:0.2em; font-weight:700;
      color:#333; text-align:center; margin-bottom:8px;
      width:100%;
    }
    .calendar-grid, .calendar-dates {
      display:grid; grid-template-columns:repeat(7, 1fr); gap:0;
      width:100%; max-width:100%;
    }
    .cal-day-hdr {
      font-family:'Space Grotesk',sans-serif; font-size:0.6rem;
      text-transform:uppercase; letter-spacing:0.04em;
      color:#888; text-align:center; padding:4px 0; font-weight:600;
      border-bottom:1px solid rgba(0,0,0,0.08);
    }
    .cal-date {
      font-family:'Space Grotesk',sans-serif; font-size:0.75rem;
      color:#444; text-align:center; padding:6px 2px;
    }
    .cal-date.today { color:#0e8a9f; font-weight:700; }
    .cal-date.empty { color:transparent; }
    .cal-date.has-event { position:relative; }
    .cal-date.has-event::after {
      content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
      width:4px; height:4px; border-radius:50%; background:#0e8a9f;
    }

    /* === RESPONSIVE BOARD === */
    @media (max-width:900px) {
      .board-grid {
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto auto;
      }
      .cell-a { grid-column:1; grid-row:1; }
      .cell-b { grid-column:2; grid-row:1; }
      .cell-c { grid-column:1; grid-row:2; }
      .cell-d { grid-column:2; grid-row:2; }
      .cell-f { grid-column:1; grid-row:3; }
      .cell-g { grid-column:2; grid-row:3; }
      .cell-h { display:none; }
      .board-pocket { min-height:clamp(120px, 22vw, 220px); }
    }
    @media (max-width:520px) {
      .board-grid {
        grid-template-columns:1fr;
        gap:clamp(12px, 3vw, 20px);
        padding:clamp(20px, 4vw, 36px) clamp(16px, 3vw, 28px);
      }
      .cell-a,.cell-b,.cell-c,.cell-d,.cell-f,.cell-g {
        grid-column:1;
      }
      .cell-a { grid-row:1; }
      .cell-b { grid-row:2; }
      .cell-c { grid-row:3; }
      .cell-d { grid-row:4; }
      .cell-g { grid-row:5; }
      .cell-f { grid-row:6; }
      .board-card { padding:clamp(14px, 3vw, 20px) clamp(12px, 2.5vw, 18px); }
      .board-pocket { min-height:clamp(100px, 28vw, 180px); }
      .pin { width:16px; height:16px; }
      .pin-tl { top:5px; left:5px; }
      .pin-tr { top:5px; right:5px; }
    }

    /* ═══════════════════════════════════════════
       HERO SECTION
       ═══════════════════════════════════════════ */
    .bond-hero {
      position:relative; z-index:1;
      display:flex; flex-direction:row; align-items:center; justify-content:center;
      gap:14px; margin:10px auto 0; max-width:680px; padding:0 12px;
    }

    /* Logo card — realistic paper, pinned */
    .bond-hero-logo-card {
      position:relative; flex-shrink:0;
      padding:14px; border-radius:2px 3px 4px 2px; overflow:visible;
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(175deg, #f0e6d4 0%, #e8dcc8 40%, #e0d4be 70%, #d8ccb4 100%);
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.2),
        6px 10px 28px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -1px 0 rgba(0,0,0,0.05);
      transform:rotate(-0.5deg); transform-origin:top center;
      border:none;
    }
    .bond-hero-logo-card::before {
      content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
      width:22px; height:22px; border-radius:50%; z-index:6;
      border:1px solid rgba(120,90,30,0.3);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #d4b86a 0%, #c4a44e 25%, #b08e3a 45%, #9a7a2e 65%, #806520 85%, #664e18 100%);
      box-shadow:
        0 2px 3px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15),
        inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.35);
    }
    .bond-hero-logo-card::after {
      content:''; position:absolute; bottom:0; left:5%; right:5%; height:16px;
      background:radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, transparent 70%);
      pointer-events:none; transform:translateY(10px);
    }
    .bond-hero img {
      width:210px; height:210px; object-fit:contain; border-radius:4px;
      opacity:1; display:block;
      position:relative; z-index:2; transition:all 0.4s;
    }
    .bond-hero img:hover { opacity:0.95; }

    /* Tagline card — realistic paper, pinned */
    .bond-hero-tagline-card {
      position:relative;
      padding:14px; border-radius:2px 3px 4px 2px;
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(175deg, #f0e6d4 0%, #e8dcc8 40%, #e0d4be 70%, #d8ccb4 100%);
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.2),
        6px 10px 28px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -1px 0 rgba(0,0,0,0.05);
      transform:rotate(0.7deg); transform-origin:top center;
      border:none;
    }
    .bond-hero-tagline-card::before {
      content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
      width:22px; height:22px; border-radius:50%; z-index:6;
      border:1px solid rgba(120,90,30,0.3);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #d4b86a 0%, #c4a44e 25%, #b08e3a 45%, #9a7a2e 65%, #806520 85%, #664e18 100%);
      box-shadow:
        0 2px 3px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15),
        inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.35);
    }
    .bond-hero-tagline-card::after {
      content:''; position:absolute; bottom:0; left:8%; right:8%; height:14px;
      background:radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, transparent 70%);
      pointer-events:none; transform:translateY(8px);
    }
    .bond-hero-tagline-inner {
      background:#ddd4c2; border-radius:3px; padding:20px 30px 16px;
      text-align:center;
    }
    .bond-hero-tagline {
      font-family:'Cormorant Garamond',serif; font-size:2.3rem; font-weight:600;
      color:#1e293b; line-height:1.35; white-space:nowrap;
    }
    .bond-hero-tagline span {
      color:#109eb7; -webkit-text-fill-color:unset;
      background:none; font-weight:800;
    }
    .bond-hero-date {
      font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:600;
      color:#0e8a9f; letter-spacing:0.04em; margin-top:0.4rem; text-align:center;
    }

    /* Mobile: stack vertically */
    @media (max-width:600px) {
      .bond-hero { flex-direction:column; gap:10px; max-width:320px; }
      .bond-hero img { width:170px; height:170px; }
      .bond-hero-tagline { font-size:1.6rem; white-space:normal; text-align:center; }
      .bond-hero-tagline-card { padding:14px 22px 12px; }
    }
    .bond-hero-orbits { display:none; }
    .bond-hero-orbits .orbit { position:absolute; border-radius:50%; }


    /* ═══════════════════════════════════════════
       TODAY HOME VIEW — THE DESK
       ═══════════════════════════════════════════ */
    .today-header { display:none; }
    .today-date { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:300; color:rgba(255,248,235,0.45); letter-spacing:0.02em; }
    .today-tagline { display:none; }

    /* Weekly stamps */
    .weekly-pulse-label { text-align:center; color:rgba(180,160,140,0.55); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; padding:14px 0 6px; font-family:'Cormorant Garamond',serif; }
    .weekly-pulse { display:flex; justify-content:center; gap:10px; padding:4px 0 14px; }
    .pulse-day { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; padding:3px; border-radius:6px; transition:all 0.2s; border:none; background:none; }
    .pulse-day:hover { transform:translateY(-2px); }
    .pulse-day:active { transform:scale(1.1); }
    .pulse-stamp {
      width:30px; height:24px; border-radius:3px; transition:all 0.3s; pointer-events:none;
      position:relative; display:flex; align-items:center; justify-content:center;
    }
    .pulse-stamp.both {
      background:#f5f0e8; box-shadow:0 2px 8px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
      border:1px solid rgba(200,180,155,0.3);
    }
    .pulse-stamp.both::after { content:''; position:absolute; top:4px; left:5px; right:5px; height:1px; background:rgba(120,80,40,0.15); box-shadow:0 5px 0 rgba(120,80,40,0.1), 0 10px 0 rgba(120,80,40,0.08); }
    .pulse-stamp.one {
      background:rgba(220,200,175,0.4); box-shadow:0 1px 4px rgba(0,0,0,0.15);
      border:1px dashed rgba(200,180,155,0.25);
    }
    .pulse-stamp.none {
      background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.08);
    }
    .pulse-stamp.today { border-color:var(--bond-gold); box-shadow:0 0 10px rgba(212,165,116,0.2), 0 2px 8px rgba(0,0,0,0.25); }
    .pulse-day-label { font-size:0.75rem; color:rgba(180,160,140,0.5); font-family:'Cormorant Garamond',serif; letter-spacing:0.03em; }

    /* Circle partner card — pinned note on corkboard */
    .partner-card {
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #f0e6d4 0%, #e8dcc8 40%, #e0d4be 100%);
      border:none; border-radius:2px 3px 4px 2px;
      padding:0; margin:6px 0; cursor:pointer;
      transition:all 0.3s ease; position:relative; overflow:visible;
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.18),
        6px 10px 25px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -1px 0 rgba(0,0,0,0.05);
      color:rgba(50,35,20,0.85); width:100%; max-width:100%; box-sizing:border-box;
      transform-origin:top center;
    }
    .partner-card:first-child { transform:rotate(1.2deg); }
    .partner-card:nth-child(2) { transform:rotate(-1.2deg); }
    .partner-card:nth-child(odd):not(:first-child) { transform:rotate(1.8deg); }
    .partner-card:nth-child(even):not(:nth-child(2)) { transform:rotate(-1.2deg); }
    .partner-card::before { display:none; }
    .partner-card::after {
      content:''; position:absolute; bottom:0; right:0; width:28px; height:28px;
      background:linear-gradient(315deg, #d4c8b0 0%, #d4c8b0 45%, transparent 50%);
      pointer-events:none;
      box-shadow:-2px -2px 4px rgba(0,0,0,0.08), inset 1px 1px 2px rgba(255,255,255,0.4);
      border-radius:0 0 4px 0;
    }
    .partner-card:hover {
      box-shadow:
        2px 4px 6px rgba(0,0,0,0.25),
        5px 8px 18px rgba(0,0,0,0.2),
        8px 14px 35px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.7);
      transform:translateY(-4px) rotate(0deg);
    }
    .partner-card.has-activity { }
    .partner-card.has-unread { }
    .pc-unread-badge { display:none !important; }

    .partner-card-inner { padding:26px 24px 12px; position:relative; z-index:1; }
    .partner-card-top { display:flex; justify-content:space-between; align-items:flex-start; }
    .partner-card-name { color:rgba(60,45,30,0.9); font-weight:600; font-size:1.3rem; font-family:'Cormorant Garamond',serif; letter-spacing:0.01em; }
    .partner-card-streak { color:rgba(120,100,70,0.6); font-size:0.78rem; font-weight:500; display:flex; align-items:center; gap:4px; }
    .partner-card-preview { color:rgba(100,80,50,0.6); font-size:0.85rem; margin-top:8px; line-height:1.5; }
    .partner-card-initial {
      width:44px; height:44px; border-radius:50%; flex-shrink:0;
      background:rgba(140,100,50,0.08); border:1.5px solid rgba(140,100,50,0.15);
      display:flex; align-items:center; justify-content:center;
      font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:400;
      color:rgba(100,70,30,0.7); letter-spacing:-0.02em;
      position:relative;
    }
    .partner-card-initial::before { display:none; }
    .partner-card.warmth-active .partner-card-initial { border-color:rgba(180,140,60,0.4); background:rgba(180,140,60,0.1); }
    .partner-card.warmth-growing .partner-card-initial { border-color:rgba(160,120,60,0.25); }
    .partner-card.warmth-quiet .partner-card-initial { border-color:rgba(140,100,50,0.1); }
    /* 7-day streak dots */
    .partner-streak-dots {
      display:flex; gap:3px; align-items:center; margin-top:5px;
    }
    .streak-dot {
      width:5px; height:5px; border-radius:50%; transition:all 0.3s;
    }
    .streak-dot.filled {
      background:rgba(140,100,40,0.5);
    }
    .streak-dot.empty {
      background:rgba(140,100,40,0.1); border:1px solid rgba(140,100,40,0.15);
    }
    .streak-dot.today {
      border:1px solid rgba(140,100,40,0.3);
    }
    /* ═══════════════════════════════════════════
       INBOX — Activity Feed
       ═══════════════════════════════════════════ */
    .inbox-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:16px 20px 12px; position:relative;
      background:rgba(18,12,6,0.6);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(160,120,60,0.1);
    }
    .inbox-header-left { display:flex; align-items:center; gap:8px; }
    .inbox-header-center {
      display:flex; flex-direction:column; align-items:center;
      position:absolute; left:50%; transform:translateX(-50%);
    }
    .inbox-title {
      font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:500;
      color:rgba(240,225,190,0.9); letter-spacing:0.06em;
      text-shadow:0 2px 6px rgba(0,0,0,0.6), 0 0 20px rgba(180,140,60,0.1);
    }
    .inbox-subtitle {
      font-family:'Cormorant Garamond',serif; font-size:0.75rem; font-style:italic;
      color:rgba(200,170,120,0.4); margin-top:1px;
    }

    /* Received / Sent pill toggle */
    .letters-toggle {
      display:flex; justify-content:center; gap:6px; margin:12px 0 18px;
    }
    .letters-pill {
      padding:9px 28px; border-radius:22px; cursor:pointer; transition:all 0.25s;
      font-family:'Cormorant Garamond',serif; font-size:0.95rem; font-weight:500;
      border:1px solid rgba(251,191,36,0.2); background:rgba(255,255,255,0.03); color:rgba(255,248,235,0.5);
    }
    .letters-pill:hover { background:rgba(251,191,36,0.06); color:rgba(255,248,235,0.7); }
    .letters-pill.active {
      background:rgba(251,191,36,0.15); color:#fbbf24;
      border-color:rgba(251,191,36,0.35); box-shadow:0 0 16px rgba(251,191,36,0.12);
      font-weight:600;
    }

    .inbox-feed { display:flex; flex-direction:column; gap:14px; padding:4px 0 24px; }
    .inbox-empty { text-align:center; padding:3rem 1.5rem; }
    .inbox-empty-icon { margin-bottom:16px; }
    .inbox-empty-title { font-family:'Cormorant Garamond',serif; font-size:1.15rem; color:rgba(245,240,232,0.7); margin-bottom:6px; }
    .inbox-empty-desc { font-family:'Cormorant Garamond',serif; font-size:0.85rem; color:rgba(245,240,232,0.35); font-style:italic; line-height:1.5; }

    /* Stationery-rendered letter cards */
    .inbox-card {
      position:relative; border-radius:6px; overflow:hidden; cursor:pointer;
      transition:all 0.35s ease; padding:0;
      box-shadow:0 3px 15px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2);
      opacity:0; transform:translateY(18px); animation:letterDealIn 0.5s ease-out forwards;
    }
    .inbox-card:hover { transform:translateY(-3px) rotate(-0.3deg); box-shadow:0 8px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,168,76,0.15); }
    .inbox-card.unread {
      box-shadow:0 3px 15px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2), 0 0 0 1px rgba(201,168,76,0.3);
    }
    .inbox-card.unread::after {
      content:''; position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;
      box-shadow:inset 0 0 20px rgba(251,191,36,0.06);
      border-radius:6px;
    }
    @keyframes letterDealIn {
      0% { opacity:0; transform:translateY(24px) rotate(0.8deg); }
      100% { opacity:1; transform:translateY(0) rotate(0deg); }
    }

    .inbox-card-paper {
      padding:20px 24px 14px; position:relative; min-height:90px;
    }
    .inbox-card-paper::before {
      content:''; position:absolute; top:0; left:0; right:0; height:40%;
      background:linear-gradient(180deg, rgba(255,252,248,0.25) 0%, transparent 100%);
      pointer-events:none;
    }
    .inbox-card-meta {
      display:flex; align-items:center; gap:10px; margin-bottom:10px;
    }
    .inbox-card-avatar { display:none; }
    .inbox-card-sender {
      font-family:'Cormorant Garamond',serif; font-size:0.92rem; font-weight:600;
      color:rgba(60,45,30,0.85); flex:1;
    }
    .inbox-card-sender.unread { font-weight:700; }
    .inbox-card-time {
      font-family:'Space Grotesk',sans-serif; font-size:0.6rem; color:rgba(60,45,30,0.4);
      flex-shrink:0;
    }
    .inbox-card-unread-dot {
      width:10px; height:10px; border-radius:50%; background:var(--bond-gold);
      flex-shrink:0;
      box-shadow:0 0 8px rgba(251,191,36,0.5), 0 0 16px rgba(251,191,36,0.25);
      animation:unreadGlow 2s ease-in-out infinite;
    }
    @keyframes unreadGlow {
      0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 8px rgba(251,191,36,0.5), 0 0 16px rgba(251,191,36,0.25); }
      50% { opacity:0.7; transform:scale(0.85); box-shadow:0 0 4px rgba(251,191,36,0.3), 0 0 8px rgba(251,191,36,0.15); }
    }
    .inbox-card-text {
      line-height:1.65; margin:0; overflow:hidden;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    }
    .inbox-card-type {
      display:inline-flex; align-items:center; gap:4px; margin-top:10px;
      font-family:'Space Grotesk',sans-serif; font-size:0.6rem; text-transform:uppercase;
      letter-spacing:0.08em; color:rgba(60,45,30,0.4); padding:3px 8px;
      background:rgba(0,0,0,0.04); border-radius:3px;
    }
    .inbox-card-type svg { width:10px; height:10px; opacity:0.5; }

    /* Feed card action bar */
    .inbox-card-actions {
      display:flex; align-items:center; gap:0;
      border-top:1px solid rgba(0,0,0,0.1);
      background:rgba(0,0,0,0.03);
    }
    .inbox-card-action {
      flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
      padding:11px 0; background:none; border:none; cursor:pointer;
      font-family:'Cormorant Garamond',serif; font-size:0.85rem; font-weight:600;
      color:rgba(60,45,30,0.65); transition:all 0.2s;
    }
    .inbox-card-action:not(:last-child) { border-right:1px solid rgba(0,0,0,0.08); }
    .inbox-card-action svg { width:15px; height:15px; flex-shrink:0; }
    .inbox-card-action:hover { background:rgba(0,0,0,0.05); }
    .inbox-card-action.act-legacy { color:rgba(160,130,50,0.8); }
    .inbox-card-action.act-legacy:hover { color:rgba(180,150,40,1); background:rgba(201,168,76,0.08); }
    .inbox-card-action.act-reply { color:rgba(50,100,200,0.7); }
    .inbox-card-action.act-reply:hover { color:rgba(59,130,246,0.95); background:rgba(59,130,246,0.06); }
    .inbox-card-action.act-delete { color:rgba(180,60,60,0.6); }
    .inbox-card-action.act-delete:hover { color:rgba(220,38,38,0.9); background:rgba(220,38,38,0.06); }

    .inbox-card-calendar {
      background:rgba(245,240,232,0.06); border:1px solid rgba(201,168,76,0.15);
      border-radius:6px; padding:16px 20px; cursor:pointer; transition:all 0.2s;
    }
    .inbox-card-calendar:hover { background:rgba(245,240,232,0.1); border-color:rgba(201,168,76,0.3); }
    .inbox-card-calendar .cal-icon {
      width:36px; height:36px; border-radius:8px; background:rgba(251,191,36,0.1);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .inbox-card-reflection {
      background:rgba(245,240,232,0.04); border:1px solid rgba(201,168,76,0.1);
      border-radius:6px; padding:16px 20px; cursor:pointer; transition:all 0.2s;
    }
    .inbox-card-reflection:hover { background:rgba(245,240,232,0.08); }

    .inbox-load-more {
      display:block; margin:8px auto; padding:10px 28px; background:none;
      border:1px solid rgba(201,168,76,0.2); border-radius:20px; cursor:pointer;
      font-family:'Cormorant Garamond',serif; font-size:0.85rem; color:rgba(201,168,76,0.6);
      transition:all 0.2s;
    }
    .inbox-load-more:hover { border-color:rgba(201,168,76,0.4); color:rgba(201,168,76,0.9); }

    /* Retired (2026-05-18): chronological thread view replaced by
       BondInboxStack (js/bond-inbox-stack.js + css/bond-letters.css).
       The stack-of-envelopes inbox handles per-letter actions inside
       the cinematic ceremony itself, so the dedicated entry-action bar
       and date separators are no longer rendered. */

    /* Your Circle — combined card */
    .your-circle-card {
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #f0e6d4 0%, #e8dcc8 40%, #e0d4be 100%);
      border:none; border-radius:2px 3px 4px 2px;
      padding:0; cursor:pointer; position:relative; overflow:visible;
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.18),
        6px 10px 25px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);
      transform-origin:top center; transition:all 0.3s;
    }
    .your-circle-card:hover {
      box-shadow:
        2px 4px 6px rgba(0,0,0,0.25), 5px 8px 18px rgba(0,0,0,0.2),
        8px 14px 35px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.6);
      transform:translateY(-2px);
    }
    .your-circle-card::before {
      content:''; position:absolute; top:-13px; left:40%; width:30px; height:30px; border-radius:50%; z-index:6;
      background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55) 0%, transparent 28%),
        radial-gradient(circle at 50% 50%, #64b5f6 0%, #1565c0 55%, #003c8f 100%);
      box-shadow:0 1px 1px rgba(0,0,0,0.15), 0 3px 5px rgba(0,0,0,0.25), 0 6px 12px rgba(0,0,0,0.2),
        inset 0 -4px 6px rgba(0,0,0,0.35), inset 0 4px 5px rgba(255,255,255,0.3);
      transform:perspective(200px) rotateX(15deg);
    }
    .your-circle-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:20px 22px 10px;
    }
    .your-circle-title {
      font-family:'Space Grotesk',sans-serif; font-weight:800;
      font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase;
      color:rgba(50,35,20,0.9);
    }
    .your-circle-count {
      font-family:'Cormorant Garamond',serif; font-size:0.78rem;
      color:rgba(100,80,50,0.5); font-style:italic;
    }
    .your-circle-invite-btn {
      display:flex; align-items:center; gap:8px;
      padding:12px 22px 16px; border:none; background:none;
      cursor:pointer; width:100%; text-align:left; transition:all 0.2s;
      border-top:1px solid rgba(0,0,0,0.05);
    }
    .your-circle-invite-btn:hover { background:rgba(0,0,0,0.02); }
    .your-circle-invite-icon {
      width:28px; height:28px; border-radius:50%; flex-shrink:0;
      border:1.5px dashed rgba(140,100,50,0.4);
      display:flex; align-items:center; justify-content:center;
      color:rgba(140,100,50,0.5); font-size:1.1rem; font-weight:300;
      transition:all 0.2s;
    }
    .your-circle-invite-btn:hover .your-circle-invite-icon {
      border-color:rgba(140,100,50,0.7); color:rgba(140,100,50,0.8);
      background:rgba(140,100,50,0.05);
    }
    .your-circle-invite-text {
      font-family:'Cormorant Garamond',serif; font-size:0.88rem;
      color:rgba(60,45,30,0.6); font-style:italic;
    }
    .your-circle-invite-btn:hover .your-circle-invite-text { color:rgba(60,45,30,0.85); }
    .your-circle-empty {
      padding:24px 22px; text-align:center;
    }
    .your-circle-empty-text {
      font-family:'Cormorant Garamond',serif; font-size:1rem;
      color:rgba(60,45,30,0.6); font-style:italic; line-height:1.6;
      margin-bottom:14px;
    }
    .your-circle-empty-btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 22px; border:1.5px dashed rgba(140,100,50,0.4);
      border-radius:4px; background:none; cursor:pointer;
      font-family:'Cormorant Garamond',serif; font-size:0.92rem;
      color:rgba(60,45,30,0.65); font-style:italic; transition:all 0.25s;
    }
    .your-circle-empty-btn:hover {
      border-color:rgba(140,100,50,0.65); color:rgba(60,45,30,0.9);
      background:rgba(140,100,50,0.06);
    }

    /* Desk tab styles (legacy) */
    .desk-circle-label { display:none; }

    .partner-card-peek {
      margin-top:8px; padding:8px 12px; border-radius:4px; position:relative; overflow:hidden; max-height:52px;
      background:rgba(0,0,0,0.02); border:1px solid rgba(0,0,0,0.04);
    }
    .partner-card-peek::before { content:''; position:absolute; bottom:0; left:0; right:0; height:20px; background:linear-gradient(transparent, rgba(245,240,232,0.95)); pointer-events:none; z-index:1; }
    .partner-card-presence { display:flex; align-items:center; gap:8px; margin-top:8px; padding:6px 0 2px; }
    .presence-dot { width:5px; height:5px; border-radius:50%; background:rgba(140,100,40,0.4); animation:breathe 3s ease-in-out infinite; }
    .presence-dot.inactive { background:rgba(0,0,0,0.08); animation:none; }
    .presence-label { color:rgba(100,80,50,0.45); font-size:0.72rem; font-family:'Cormorant Garamond',serif; font-style:italic; }
    .partner-card-remove { position:absolute; top:14px; right:14px; background:none; border:none; color:rgba(0,0,0,0.12); font-size:0.85rem; cursor:pointer; padding:6px 8px; opacity:0; transition:all 0.2s; z-index:4; }
    .partner-card:hover .partner-card-remove { opacity:0.5; }
    .partner-card-remove:hover { opacity:1 !important; color:#c62828; }
    .partner-card-wax { display:none; }
    .partner-card-wax svg { display:none; }
    .partner-card-wax.has-new { display:none; }

    /* Partner card — writing presence indicator */
    .partner-writing-indicator {
      display:inline-flex; align-items:center; gap:5px; color:rgba(180,140,80,0.8);
      font-size:0.72rem; font-family:'Cormorant Garamond',serif; font-style:italic;
    }
    .partner-writing-pen {
      display:inline-block; width:14px; height:14px;
      animation:penWriting 0.8s ease-in-out infinite;
    }
    .partner-card-avatar, .partner-card-avatar-placeholder { display:none; }
    .partner-card-warmth {
      font-size:0.68rem; color:rgba(100,80,50,0.45); font-family:'Space Grotesk',sans-serif;
      display:flex; align-items:center; gap:6px; margin-top:3px;
    }
    .warmth-bar { display:none; }
    .warmth-bar-fill { display:none; }

    /* Shared Reflection -- index card pinned to board */
    .reflection-ritual {
      margin:0; max-width:100%; padding:26px 28px;
      text-align:center; position:relative;
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #f8f0d8 0%, #f0e6cc 40%, #e8dcbc 100%);
      border:none;
      border-radius:2px 3px 4px 2px; overflow:visible;
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.18),
        6px 10px 25px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.8);
      transform:rotate(-0.3deg);
      transform-origin:top center;
    }
    .reflection-ritual::before {
      content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; z-index:6;
      border:1px solid rgba(120,90,30,0.3);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #d4b86a 0%, #c4a44e 25%, #b08e3a 45%, #9a7a2e 65%, #806520 85%, #664e18 100%);
      box-shadow:
        0 2px 3px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15),
        inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.35);
    }
    .reflection-ritual-divider { display:none; }
    .reflection-ritual-label {
      font-size:0.6rem; text-transform:uppercase; letter-spacing:0.14em;
      color:rgba(140,100,40,0.6); font-weight:700; margin-bottom:10px;
      font-family:'Space Grotesk',sans-serif;
    }
    .reflection-ritual-prompt {
      font-family:'Cormorant Garamond',serif; font-size:1.1rem;
      color:rgba(60,45,30,0.7); line-height:1.6; font-style:italic;
      font-weight:300;
    }
    .reflection-ritual-action {
      margin-top:14px;
    }
    .reflection-ritual-link {
      font-family:'Cormorant Garamond',serif; font-size:0.85rem;
      color:rgba(140,100,40,0.7); cursor:pointer; border:1px solid rgba(140,100,40,0.2);
      background:rgba(140,100,40,0.04); text-decoration:none;
      padding:7px 20px; border-radius:4px; transition:all 0.25s;
      display:inline-block;
    }
    .reflection-ritual-link:hover { background:rgba(140,100,40,0.08); border-color:rgba(140,100,40,0.35); }
    .reflection-ritual-status {
      font-size:0.72rem; color:rgba(140,100,40,0.6);
      font-style:italic; font-family:'Cormorant Garamond',serif;
      margin-top:8px;
    }
    .reflection-ritual-answered {
      display:inline-flex; align-items:center; gap:5px; font-size:0.78rem;
      color:rgba(34,197,94,0.6); font-family:'Cormorant Garamond',serif;
      margin-top:10px;
    }
    .reflection-partner-ready {
      font-family:'Cormorant Garamond',serif; font-size:0.82rem; font-style:italic;
      color:rgba(212,165,116,0.85); text-align:center; margin:8px 0 4px;
      animation:reflPartnerPulse 2.5s ease-in-out infinite;
    }
    @keyframes reflPartnerPulse {
      0%,100% { opacity:0.7; }
      50% { opacity:1; }
    }

    /* ═══════════════════════════════════════════
       PRIORITY INBOX — What needs attention
       ═══════════════════════════════════════════ */
    /* Home notification banner — pinned note style */
    .home-notif-banner {
      max-width:100%; margin:0; padding:16px 20px;
      display:flex; align-items:center; gap:14px;
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #f8f0d8 0%, #f0e6cc 40%, #e8dcbc 100%);
      border:none; border-radius:2px 3px 4px 2px;
      cursor:pointer; transition:all 0.25s; position:relative; overflow:visible;
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2), 3px 5px 12px rgba(0,0,0,0.18),
        6px 10px 25px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.8);
      transform:rotate(0.2deg);
      transform-origin:top center;
      animation:notifSlideIn 0.5s ease-out;
    }
    .home-notif-banner::before {
      content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; z-index:6;
      border:1px solid rgba(120,90,30,0.3);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #d4b86a 0%, #c4a44e 25%, #b08e3a 45%, #9a7a2e 65%, #806520 85%, #664e18 100%);
      box-shadow:
        0 2px 3px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15),
        inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.35);
    }
    .home-notif-banner::after { display:none; }
    .home-notif-banner:hover {
      box-shadow:0 1px 1px rgba(0,0,0,0.08), 2px 3px 6px rgba(0,0,0,0.15),
        5px 8px 20px rgba(0,0,0,0.25), 8px 14px 35px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .home-notif-banner.quiet {
      display:none !important;
    }
    .home-notif-banner-icon {
      flex-shrink:0; width:28px; height:28px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      background:rgba(198,40,40,0.1); color:rgba(198,40,40,0.6);
      position:relative; z-index:1;
    }
    .home-notif-banner.quiet .home-notif-banner-icon { display:none; }
    .home-notif-banner-text {
      font-family:'Cormorant Garamond',serif; font-size:0.88rem;
      color:rgba(60,45,30,0.8); position:relative; z-index:1;
    }
    .home-notif-banner.quiet .home-notif-banner-text { display:none; }
    .home-notif-banner-time {
      font-family:'Space Grotesk',sans-serif; font-size:0.58rem;
      color:rgba(60,45,30,0.4); margin-top:2px;
    }
    .home-notif-banner.quiet .home-notif-banner-time { display:none; }
    .home-notif-banner.enable-notifs { background:#fff8e1; }
    .home-notif-banner.enable-notifs .home-notif-banner-icon { background:rgba(140,100,40,0.08); color:rgba(140,100,40,0.5); }
    .home-notif-banner.enable-notifs .home-notif-banner-text { color:rgba(60,45,30,0.8); }
    .home-notif-banner.enable-notifs .home-notif-banner-time { color:rgba(100,80,50,0.4); }
    @keyframes notifSlideIn { from{opacity:0;transform:rotate(0.8deg) translateY(-10px)} to{opacity:1;transform:rotate(0.8deg) translateY(0)} }
    .home-notif-banner.fresh { animation:notifSlideIn 0.4s ease-out; }

    .priority-inbox { margin:0 0 8px; max-width:none; }
    .priority-section-label {
      font-family:'Space Grotesk',sans-serif; font-size:0.66rem;
      text-transform:uppercase; letter-spacing:0.14em; color:rgba(60,45,30,0.8);
      font-weight:700; margin:10px 0 6px; padding:5px 18px 4px; margin-left:5%;
      display:inline-block; background:rgba(255,250,235,0.55);
      box-shadow:1px 2px 6px rgba(0,0,0,0.15); transform:rotate(0.5deg);
    }
    .priority-card {
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #f0e6d4 0%, #e8dcc8 40%, #e0d4be 100%);
      border:none; cursor:pointer;
      border-radius:2px 3px 4px 2px; padding:22px 22px 16px; margin-bottom:8px;
      transition:all 0.25s; position:relative; overflow:visible;
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.18),
        6px 10px 25px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);
      transform-origin:top center;
    }
    .priority-card:nth-child(odd) { transform:rotate(-0.3deg); max-width:100%; }
    .priority-card:nth-child(even) { transform:rotate(0.2deg); max-width:100%; }
    .priority-card:hover {
      box-shadow:
        2px 4px 6px rgba(0,0,0,0.25), 5px 8px 18px rgba(0,0,0,0.2),
        8px 14px 35px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.7);
      transform:translateY(-4px);
    }
    .priority-card::before {
      content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; z-index:6;
      border:1px solid rgba(120,90,30,0.3);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #d4b86a 0%, #c4a44e 25%, #b08e3a 45%, #9a7a2e 65%, #806520 85%, #664e18 100%);
      box-shadow:
        0 2px 3px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15),
        inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.35);
    }
    .priority-card:nth-child(odd)::before { left:35%; }
    .priority-card:nth-child(even)::before { right:30%; left:auto; }
    .priority-card-row { display:flex; align-items:center; gap:14px; }
    .priority-card-seal {
      width:38px; height:38px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
    }
    .priority-card-seal.letter-seal {
      background:radial-gradient(circle at 40% 40%, #c4443a, #8b2520);
      box-shadow:0 2px 10px rgba(140,30,20,0.4);
    }
    .priority-card-seal.calendar-seal {
      background:radial-gradient(circle at 40% 40%, rgba(251,191,36,0.25), rgba(212,165,116,0.15));
      border:1px solid rgba(251,191,36,0.2);
    }
    .priority-card-seal.reflection-seal {
      background:radial-gradient(circle at 40% 40%, rgba(130,120,200,0.2), rgba(100,90,180,0.1));
      border:1px solid rgba(130,120,200,0.2);
    }
    .priority-card-seal svg { width:16px; height:16px; }
    .priority-card-body { flex:1; min-width:0; }
    .priority-card-from {
      font-family:'Cormorant Garamond',serif; font-size:1rem;
      color:rgba(60,45,30,0.85); font-weight:600; line-height:1.3;
    }
    .priority-card-desc {
      font-family:'Cormorant Garamond',serif; font-size:0.8rem;
      color:rgba(100,80,50,0.5); font-style:italic; margin-top:2px; line-height:1.4;
    }
    .priority-card-time {
      font-family:'Space Grotesk',sans-serif; font-size:0.65rem;
      color:rgba(100,80,50,0.4); letter-spacing:0.02em;
    }
    .priority-card-actions { display:flex; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(0,0,0,0.06); }
    .priority-action-btn {
      background:none; border:1px solid rgba(0,0,0,0.1); border-radius:4px;
      padding:6px 14px; font-family:'Cormorant Garamond',serif; font-size:0.78rem;
      color:rgba(60,45,30,0.5); cursor:pointer; transition:all 0.2s;
    }
    .priority-action-btn:hover { border-color:rgba(0,0,0,0.2); color:rgba(60,45,30,0.8); background:rgba(0,0,0,0.03); }
    .priority-action-btn.accept { border-color:rgba(34,120,60,0.2); color:rgba(34,120,60,0.7); }
    .priority-action-btn.accept:hover { border-color:rgba(34,120,60,0.4); background:rgba(34,120,60,0.04); color:rgba(34,120,60,0.9); }
    .priority-action-btn.decline { border-color:rgba(180,40,40,0.15); color:rgba(180,40,40,0.5); }
    .priority-action-btn.decline:hover { border-color:rgba(180,40,40,0.3); background:rgba(180,40,40,0.04); color:rgba(180,40,40,0.8); }
    .priority-empty {
      text-align:left; padding:12px 0; color:rgba(255,248,235,0.35);
      font-family:'Cormorant Garamond',serif; font-size:0.85rem; font-style:italic;
    }
    .cork-empty-card {
      width:100%; max-width:100%; padding:28px 26px; margin:0; box-sizing:border-box;
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #f0e6d4 0%, #e8dcc8 40%, #e0d4be 100%);
      border-radius:2px 3px 4px 2px; position:relative; overflow:visible;
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.18),
        6px 10px 25px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);
      transform-origin:top center; cursor:pointer;
    }
    .cork-empty-card:hover {
      box-shadow:
        2px 4px 6px rgba(0,0,0,0.25), 5px 8px 18px rgba(0,0,0,0.2),
        8px 14px 35px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.7);
      transform:translateY(-4px);
    }
    .cork-empty-pin {
      position:absolute; top:-10px; left:50%; transform:translateX(-50%);
      width:22px; height:22px; border-radius:50%; z-index:6;
      border:1px solid rgba(120,90,30,0.3);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #d4b86a 0%, #c4a44e 25%, #b08e3a 45%, #9a7a2e 65%, #806520 85%, #664e18 100%);
      box-shadow:
        0 2px 3px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15),
        inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.35);
    }
    .cork-empty-text {
      font-family:'Cormorant Garamond',serif; font-size:0.85rem;
      color:rgba(100,80,50,0.5); font-style:italic; text-align:center; line-height:1.5;
    }

    /* Convergence home card -- top-of-page event */
    .convergence-home-card {
      margin:0; max-width:100%; padding:24px 26px;
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #f8f0d8 0%, #f0e6cc 40%, #e8dcbc 100%);
      border:none;
      border-radius:2px 3px 4px 2px; text-align:center; cursor:pointer;
      transition:all 0.3s; position:relative; overflow:visible;
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.18),
        6px 10px 25px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.8);
      transform:rotate(0.3deg);
      transform-origin:top center;
    }
    .convergence-home-card::before {
      content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; z-index:6;
      border:1px solid rgba(120,90,30,0.3);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #d4b86a 0%, #c4a44e 25%, #b08e3a 45%, #9a7a2e 65%, #806520 85%, #664e18 100%);
      box-shadow:
        0 2px 3px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15),
        inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.35);
    }
    .convergence-home-card:hover {
      box-shadow:0 1px 1px rgba(0,0,0,0.08), 2px 3px 6px rgba(0,0,0,0.15),
        5px 8px 20px rgba(0,0,0,0.25), 8px 14px 35px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);
      transform:translateY(-2px) rotate(1.5deg);
    }
    .convergence-home-label {
      font-family:'Space Grotesk',sans-serif; font-size:0.6rem; text-transform:uppercase;
      letter-spacing:0.14em; color:rgba(140,100,40,0.6); font-weight:600; margin-bottom:8px;
    }
    .convergence-home-prompt {
      font-family:'Cormorant Garamond',serif; font-size:1rem;
      color:rgba(60,45,30,0.75); font-style:italic; line-height:1.5; margin-bottom:6px;
    }
    .convergence-home-cta {
      font-family:'Cormorant Garamond',serif; font-size:0.82rem;
      color:rgba(140,100,40,0.7); text-decoration:underline; text-underline-offset:3px;
    }
    @keyframes convergenceGlow {
      0%,100% { box-shadow:0 0 0 0 rgba(251,191,36,0); }
      50% { box-shadow:0 0 20px 2px rgba(251,191,36,0.08); }
    }
    .convergence-home-card.ready { animation:convergenceGlow 3s ease-in-out infinite; }

    /* Moments Ahead -- pinned tickets on corkboard */
    .moments-ahead { margin:0 0; max-width:none; }
    .moments-item {
      display:flex; align-items:center; gap:14px; padding:18px 20px;
      border:none; border-radius:2px 3px 4px 2px;
      margin-bottom:8px; cursor:pointer; transition:all 0.25s;
      background-color:#fafaf8;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #f0e6d4 0%, #e8dcc8 40%, #e0d4be 100%);
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.18),
        6px 10px 25px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);
      position:relative; transform-origin:top center;
    }
    .moments-item:nth-child(odd) { transform:rotate(0.3deg); max-width:100%; }
    .moments-item:nth-child(even) { transform:rotate(-0.2deg); max-width:100%; }
    .moments-item:hover {
      box-shadow:
        2px 4px 6px rgba(0,0,0,0.25), 5px 8px 18px rgba(0,0,0,0.2),
        8px 14px 35px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.7);
      transform:translateY(-4px);
    }
    .moments-item::before {
      content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; z-index:6;
      border:1px solid rgba(120,90,30,0.3);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #d4b86a 0%, #c4a44e 25%, #b08e3a 45%, #9a7a2e 65%, #806520 85%, #664e18 100%);
      box-shadow:
        0 2px 3px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15),
        inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.35);
    }
    .moments-item:nth-child(odd)::before { right:22%; left:auto; }
    .moments-item:nth-child(even)::before { left:28%; }
    .moments-date-badge {
      width:40px; height:40px; border-radius:2px; flex-shrink:0;
      background:rgba(140,100,40,0.06); border:1px solid rgba(140,100,40,0.1);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
    }
    .moments-date-month { font-family:'Space Grotesk',sans-serif; font-size:0.55rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(140,100,40,0.6); font-weight:600; }
    .moments-date-day { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:rgba(60,45,30,0.8); font-weight:600; line-height:1; }
    .moments-info { flex:1; min-width:0; }
    .moments-title { font-family:'Cormorant Garamond',serif; font-size:0.9rem; color:rgba(60,45,30,0.8); font-weight:500; }
    .moments-meta { font-family:'Space Grotesk',sans-serif; font-size:0.68rem; color:rgba(100,80,50,0.45); margin-top:2px; }
    .moments-attachment-tags { display:flex; gap:4px; margin-top:4px; }
    .moments-tag {
      font-family:'Space Grotesk',sans-serif; font-size:0.58rem; color:rgba(100,80,50,0.5);
      background:rgba(0,0,0,0.03); border:1px solid rgba(0,0,0,0.06);
      border-radius:2px; padding:2px 6px; letter-spacing:0.02em;
    }

    /* Circle card actions — paper style */
    .circle-card-actions {
      display:flex; gap:0; margin-top:0; border-top:1px solid rgba(0,0,0,0.06); padding:0;
    }
    .circle-action {
      flex:1; background:none; border:none; border-right:1px solid rgba(0,0,0,0.06);
      color:rgba(100,80,50,0.5); font-family:'Cormorant Garamond',serif; font-size:0.88rem;
      cursor:pointer; padding:12px 0; transition:all 0.2s; text-align:center;
    }
    .circle-action:last-child { border-right:none; }
    .circle-action:hover { color:rgba(140,100,40,0.9); background:rgba(0,0,0,0.02); }
    .circle-card-event {
      display:flex; align-items:center; gap:6px; margin-top:8px; padding:6px 10px;
      background:rgba(140,100,40,0.04); border-radius:4px; border:1px solid rgba(140,100,40,0.1);
    }
    .circle-card-event-text {
      font-family:'Cormorant Garamond',serif; font-size:0.78rem; color:rgba(140,100,40,0.7);
      font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
    }
    .circle-card-event-date {
      font-family:'Space Grotesk',sans-serif; font-size:0.62rem; color:rgba(100,80,50,0.4);
      flex-shrink:0;
    }
    .circle-unread-count {
      font-family:'Space Grotesk',sans-serif; font-size:0.65rem; font-weight:700;
      color:#fff; background:radial-gradient(circle at 40% 35%, #c0392b, #8b1a1a);
      min-width:20px; height:20px; border-radius:10px; display:inline-flex;
      align-items:center; justify-content:center; padding:0 5px;
      box-shadow:0 1px 4px rgba(140,30,20,0.4); position:absolute; top:14px; right:14px; z-index:3;
    }
    .composing-indicator {
      display:inline-flex; align-items:center; gap:5px;
      font-family:'Cormorant Garamond',serif; font-size:0.78rem;
      color:rgba(251,191,36,0.7); font-style:italic;
    }
    .composing-dots { display:inline-flex; gap:2px; }
    .composing-dots span {
      width:4px; height:4px; border-radius:50%; background:rgba(251,191,36,0.5);
      animation:breathe 1.4s ease-in-out infinite;
    }
    .composing-dots span:nth-child(2) { animation-delay:0.2s; }
    .composing-dots span:nth-child(3) { animation-delay:0.4s; }

    /* Reflection Reveal Overlay */
    .reflection-reveal-overlay { position:fixed; inset:0; z-index:185; display:flex; align-items:center; justify-content:center; background:rgba(6,8,14,0.94); backdrop-filter:blur(20px); animation:ceremonyFadeIn 0.3s ease-out; }
    .reflection-reveal-card { width:92%; max-width:400px; max-height:85vh; overflow-y:auto; background:linear-gradient(165deg,rgba(30,41,59,0.95),rgba(15,23,42,0.98)); border:1px solid rgba(251,191,36,0.15); border-radius:20px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.5); animation:ceremonyEnvelopeIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
    .reflection-reveal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
    .reflection-reveal-title { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--bond-gold); font-weight:600; }
    .reflection-reveal-close { background:none; border:none; color:var(--bond-muted); font-size:1.4rem; cursor:pointer; }
    .reflection-reveal-prompt { font-family:'Cormorant Garamond',serif; font-size:1rem; color:var(--bond-text); font-style:italic; line-height:1.5; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.06); }
    .reflection-reveal-answers { }
    .reveal-side { padding:14px 0; }
    .reveal-side-label { font-size:0.65rem; color:var(--bond-gold); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; margin-bottom:8px; }
    .reveal-side-text { font-family:'Cormorant Garamond',serif; font-size:0.95rem; color:var(--bond-text); line-height:1.8; }
    .reveal-divider { height:1px; background:linear-gradient(90deg, transparent, rgba(212,165,116,0.2), transparent); margin:4px 0; }

    /* The legacy .letter-ceremony / .ceremony-envelope / .ceremony-seal /
       .ceremony-letter rules used to live here. They have been retired —
       the in-app ceremony is now driven by js/bond-ceremony.js (BondCeremony
       engine) which scopes its own CSS under .bondc-host. The wrapper
       overlay style lives inline in bond-interface.html (.bondc-overlay). */

    /* Onboarding */
    .bond-onboarding { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
    .onboarding-backdrop { position:absolute; inset:0; background:rgba(6,8,14,0.92); backdrop-filter:blur(20px); }
    .onboarding-card { position:relative; width:90%; max-width:380px; text-align:center; padding:40px 28px 30px; border-radius:20px; background:linear-gradient(165deg,rgba(30,41,59,0.95),rgba(15,23,42,0.98)); border:1px solid rgba(251,191,36,0.15); box-shadow:0 20px 60px rgba(0,0,0,0.5); animation:ceremonyEnvelopeIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
    .onboarding-icon { margin-bottom:20px; }
    .onboarding-title { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:var(--bond-text); margin-bottom:12px; }
    .onboarding-desc { font-size:0.88rem; color:var(--bond-subtle); line-height:1.6; margin-bottom:10px; }
    .onboarding-btn { display:inline-block; margin-top:20px; padding:12px 32px; border-radius:12px; background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#0f172a; font-weight:600; font-size:0.9rem; border:none; cursor:pointer; font-family:inherit; transition:all 0.2s; box-shadow:0 4px 16px rgba(251,191,36,0.3); }
    .onboarding-btn:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(251,191,36,0.4); }
    .onboarding-skip { display:block; margin:12px auto 0; background:none; border:none; color:var(--bond-muted); font-size:0.78rem; cursor:pointer; font-family:'Cormorant Garamond',serif; text-decoration:underline; }
    .onboarding-skip:hover { color:var(--bond-subtle); }
    .onboarding-dots { display:flex; gap:8px; justify-content:center; margin-top:24px; }
    .onboarding-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.15); transition:all 0.3s; }
    .onboarding-dot.active { background:var(--bond-gold); width:20px; border-radius:4px; }

    /* Honesty-first capture mode */
    .voice-hero-btn {
      display:flex; align-items:center; justify-content:center; gap:10px;
      margin:0 auto; width:68px; height:68px; border-radius:50%;
      background:linear-gradient(145deg, #d4a853, #b8942e);
      border:2px solid rgba(212,175,100,0.3);
      cursor:pointer; transition:all 0.35s;
      box-shadow:0 4px 20px rgba(180,140,80,0.3), 0 0 40px rgba(180,140,80,0.08);
      color:#1a1410;
    }
    .voice-hero-btn:hover { transform:scale(1.08); box-shadow:0 8px 35px rgba(180,140,80,0.5), 0 0 60px rgba(180,140,80,0.12); }
    .voice-hero-btn.recording { background:linear-gradient(135deg, #c44, #a33); border-color:rgba(200,60,60,0.3); box-shadow:0 4px 20px rgba(200,60,60,0.35); animation:fabPulse 1.5s ease-in-out infinite; }
    .voice-hero-btn svg { width:26px; height:26px; }
    .voice-or-type { font-size:0.78rem; color:rgba(180,160,140,0.5); text-align:center; margin-top:8px; font-family:'Cormorant Garamond',serif; font-style:italic; cursor:pointer; letter-spacing:0.03em; }
    .voice-or-type:hover { color:rgba(212,175,100,0.8); }

    /* Notepad — elevated desk metaphor */
    .desk-lamp-spotlight { display:none; }
    .desk-notepad {
      margin:0; max-width:100%; cursor:pointer; transition:all 0.3s;
      position:relative; transform:rotate(-0.3deg);
      transform-origin:top center;
    }
    .desk-notepad:hover { box-shadow:4px 6px 20px rgba(0,0,0,0.4); }
    @media (max-width:600px) {
      .desk-notepad { max-width:100%; }
    }
    .desk-notepad.lifting { animation:paperLift 0.35s ease-in forwards; }
    .desk-notepad-paper {
      border-radius:2px 3px 4px 2px; padding:34px 28px 28px 48px; min-height:170px;
      box-shadow:
        1px 2px 3px rgba(0,0,0,0.2),
        3px 5px 12px rgba(0,0,0,0.18),
        6px 10px 25px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);
      position:relative;
      background-color:#fafaf8;
      background-image:
        repeating-linear-gradient(transparent, transparent 31px, rgba(160,140,110,0.22) 31px, rgba(160,140,110,0.22) 32px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #f0e6d4 0%, #e8dcc8 40%, #e0d4be 100%);
      background-position:0 27px;
      animation:notepadReady 1.2s ease-out;
    }
    .desk-notepad-paper::before {
      content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
      width:22px; height:22px; border-radius:50%; z-index:6;
      border:1px solid rgba(120,90,30,0.3);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 15%, transparent 40%),
        radial-gradient(circle at 50% 50%, #d4b86a 0%, #c4a44e 25%, #b08e3a 45%, #9a7a2e 65%, #806520 85%, #664e18 100%);
      box-shadow:
        0 2px 3px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15),
        inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.35);
    }
    .desk-notepad-paper::after {
      content:''; position:absolute; top:-7px; left:calc(50% - 3px);
      width:9px; height:5px; border-radius:50%; z-index:7;
      background:rgba(255,255,255,0.5);
      transform:rotate(-25deg);
    }
    @keyframes notepadReady {
      0%{transform:translateY(10px) rotate(1deg);opacity:0.5} 100%{transform:translateY(0) rotate(0);opacity:1}
    }
    .desk-notepad-paper::after {
      content:''; position:absolute; bottom:0; right:0; width:20px; height:20px;
      background:linear-gradient(225deg, rgba(15,12,8,0.85) 0%, rgba(15,12,8,0.85) 50%, transparent 50%);
      border-radius:0 0 6px 0; pointer-events:none;
    }
    .notepad-cursor {
      display:inline-block; width:2px; height:1.1em; background:rgba(120,80,40,0.4);
      margin-left:2px; vertical-align:text-bottom;
      animation:cursorBlink 1.2s step-end infinite;
    }
    @keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
    .desk-notepad-spiral {
      position:absolute; top:8px; bottom:8px; left:6px; width:22px; z-index:2;
      display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:4px 0;
    }
    .spiral-ring {
      width:16px; height:16px; border-radius:50%; border:2px solid rgba(160,150,140,0.7);
      background:rgba(120,110,100,0.08); box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);
    }
    .desk-notepad-text { line-height:2.0; font-size:1.15rem; }
    .notepad-mic {
      position:absolute; bottom:14px; right:16px; z-index:3;
      display:flex; align-items:center; gap:6px; cursor:pointer;
      background:rgba(180,140,80,0.08); border:1px solid rgba(180,140,80,0.18);
      border-radius:16px; padding:6px 12px 6px 8px;
      color:rgba(140,100,60,0.5); transition:all 0.25s;
      font-family:'Cormorant Garamond',serif; font-size:0.72rem; font-style:italic;
    }
    .notepad-mic:hover { background:rgba(180,140,80,0.15); color:rgba(180,140,80,0.7); border-color:rgba(180,140,80,0.3); }
    .notepad-footer {
      padding:6px 16px 8px 36px; border-top:1px solid rgba(0,0,0,0.05);
      background:rgba(245,240,232,0.5);
    }
    .notepad-recipient-row {
      display:flex; align-items:center; gap:8px; justify-content:flex-start;
      padding:2px 0; max-width:none; margin:0;
    }
    .notepad-recipient-avatar {
      width:30px; height:30px; border-radius:50%; cursor:pointer;
      background:rgba(245,238,225,0.7); border:1px solid rgba(200,170,120,0.4);
      display:flex; align-items:center; justify-content:center;
      font-family:'Cormorant Garamond',serif; font-size:0.8rem; font-weight:300;
      color:rgba(60,45,30,0.7); transition:all 0.25s; flex-shrink:0;
      box-shadow:1px 1px 4px rgba(0,0,0,0.2);
    }
    .notepad-recipient-avatar:hover { background:rgba(245,238,225,0.9); transform:scale(1.1); border-color:rgba(180,140,80,0.5); }
    .notepad-recipient-label {
      font-family:'Cormorant Garamond',serif; font-size:0.75rem;
      color:rgba(60,45,30,0.55); font-style:italic;
    }
    .desk-notepad-hint {
      font-size:0.78rem; color:rgba(60,45,30,0.55); text-align:center;
      margin-top:8px; font-family:'Cormorant Garamond',serif; font-style:italic;
    }

    /* Stationery strip -- textured paper thumbnails */
    .canvas-craft-bar {
      display:flex; flex-direction:column; gap:2px; flex-shrink:0; position:relative; z-index:2;
      padding:10px 0 6px;
      background:linear-gradient(0deg, rgba(15,10,5,0.85) 0%, rgba(20,14,8,0.5) 70%, transparent 100%);
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      border-top:1px solid rgba(200,170,120,0.08);
    }
    /* Tabbed studio — one calm row of axis tabs above a single visible strip */
    .craft-tabs {
      display:flex; gap:6px; padding:6px 14px 7px; overflow-x:auto; overflow-y:hidden;
      -webkit-overflow-scrolling:touch; scrollbar-width:none;
      border-bottom:1px solid rgba(200,170,120,0.08); margin-bottom:2px;
    }
    .craft-tabs::-webkit-scrollbar { display:none; }
    .craft-tab {
      flex-shrink:0; cursor:pointer; padding:6px 14px; border-radius:9px;
      border:1px solid rgba(220,195,150,0.14); background:transparent;
      color:rgba(220,195,150,0.5); font-family:'Space Grotesk',sans-serif;
      font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em;
      transition:all 0.2s; white-space:nowrap;
    }
    .craft-tab:hover { color:rgba(220,195,150,0.82); border-color:rgba(220,195,150,0.28); }
    .craft-tab.active {
      color:#1a120a; background:linear-gradient(180deg,#e8c98a 0%,#d4af6e 100%);
      border-color:rgba(212,175,110,0.6); box-shadow:0 2px 10px rgba(212,175,110,0.18);
    }
    .craft-ink-tip {
      flex-shrink:0; align-self:center; margin-left:12px;
      font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.74rem;
      color:rgba(220,195,150,0.42); white-space:nowrap;
    }
    .craft-mono-initials {
      flex-shrink:0; width:80px; margin-left:8px; padding:6px 10px; border-radius:9px;
      border:1px solid rgba(220,195,150,0.25); background:rgba(0,0,0,0.25);
      color:rgba(245,237,216,0.95); font-family:'Cormorant Garamond',serif;
      font-size:0.95rem; letter-spacing:0.12em; text-align:center; text-transform:uppercase;
    }
    .craft-mono-initials::placeholder { color:rgba(220,195,150,0.4); letter-spacing:0.04em; text-transform:none; }
    .canvas-craft-section {
      display:flex; align-items:center; gap:10px; padding:5px 16px;
      overflow-x:auto; overflow-y:hidden;
      -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .canvas-craft-section::-webkit-scrollbar { display:none; }
    .canvas-ink-section { overflow:visible !important; }
    .craft-section-label {
      font-family:'Space Grotesk',sans-serif; font-size:0.6rem; font-weight:700;
      text-transform:uppercase; letter-spacing:0.18em;
      color:rgba(220,195,150,0.45); flex-shrink:0; min-width:38px; text-align:right;
    }
    .canvas-stationery-strip {
      display:flex; align-items:flex-end; gap:10px;
      padding:0; flex-shrink:0; position:relative; z-index:2;
      overflow-x:auto; overflow-y:hidden;
      -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .canvas-stationery-strip::-webkit-scrollbar { display:none; }
    .canvas-stn-swatch {
      width:56px; height:72px; border-radius:3px; flex-shrink:0; cursor:pointer;
      border:2px solid rgba(255,255,255,0.06); transition:all 0.25s;
      box-shadow:0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
      position:relative; overflow:hidden;
    }
    .canvas-stn-swatch:hover { transform:translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,0.45); }
    .canvas-stn-swatch.active {
      border-color:rgba(251,191,36,0.8);
      box-shadow:0 0 0 2px rgba(251,191,36,0.6), 0 0 16px rgba(251,191,36,0.15), 0 6px 20px rgba(0,0,0,0.5);
      transform:translateY(-5px) scale(1.1);
    }
    .canvas-stn-swatch-name {
      position:absolute; bottom:0; left:0; right:0; padding:4px 2px 3px;
      font-family:'Space Grotesk',sans-serif;
      font-size:0.55rem; text-align:center; letter-spacing:0.03em;
      background:linear-gradient(transparent, rgba(0,0,0,0.6));
      color:rgba(255,255,255,0.95); font-weight:600;
    }
    .canvas-stn-divider { width:1px; height:40px; background:rgba(200,180,140,0.15); flex-shrink:0; margin:0 4px; align-self:center; }
    .canvas-stn-ink {
      width:24px; height:24px; border-radius:50%; flex-shrink:0; cursor:pointer;
      border:2px solid transparent; transition:all 0.25s;
      box-shadow:0 1px 4px rgba(0,0,0,0.25);
    }
    .canvas-stn-ink:hover { transform:scale(1.15); }
    .canvas-stn-ink.active {
      border-color:rgba(255,255,255,0.7);
      box-shadow:0 0 0 1px rgba(255,255,255,0.3), 0 2px 6px rgba(0,0,0,0.3);
    }
    .canvas-stn-more {
      width:56px; height:72px; border-radius:4px; flex-shrink:0; cursor:pointer;
      border:1px dashed rgba(220,195,150,0.3); background:rgba(220,195,150,0.06);
      display:none; align-items:center; justify-content:center; flex-direction:column;
      gap:3px; transition:all 0.2s;
    }
    .canvas-stn-more:hover { background:rgba(200,180,140,0.12); }
    .canvas-stn-more-icon { font-size:1.2rem; color:rgba(220,195,150,0.5); line-height:1; }
    .canvas-stn-more-label { font-size:0.55rem; color:rgba(220,195,150,0.5); font-weight:600; letter-spacing:0.04em; }
    .canvas-ink-strip {
      display:flex; align-items:center; gap:0; flex-wrap:nowrap;
      padding:0; position:relative; z-index:2;
      background:transparent; flex:1; min-width:0;
    }
    .canvas-ink-presets {
      flex-shrink:0; display:flex; align-items:center; gap:4px;
      padding:2px 0;
    }
    .canvas-ink-presets .canvas-stn-ink {
      width:22px; height:22px; border-radius:50%; flex-shrink:0; cursor:pointer;
      border:2px solid rgba(255,255,255,0.06); transition:all 0.25s;
      box-shadow:0 2px 5px rgba(0,0,0,0.4), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.08);
    }
    .canvas-ink-presets .canvas-stn-ink:hover { transform:scale(1.15); box-shadow:0 3px 8px rgba(0,0,0,0.5); }
    .canvas-ink-presets .canvas-stn-ink.active {
      border-color:rgba(255,255,255,0.8);
      box-shadow:0 0 0 2px rgba(255,255,255,0.4), 0 0 10px rgba(255,255,255,0.1);
      transform:scale(1.1);
    }
    .canvas-stn-ink-custom { display:none; }
    .canvas-ink-gradient-wrap {
      flex:1; min-width:0; display:flex; align-items:center; gap:10px; position:relative;
      padding-left:10px; border-left:1px solid rgba(255,240,210,0.1);
      margin-left:6px;
    }
    .canvas-ink-gradient {
      flex:1; min-width:0; height:30px; border-radius:15px; cursor:pointer; position:relative;
      background:linear-gradient(90deg, #0a0a0a 0%, #1a1a2e 6%, #1b3a6b 12%, #1e5631 18%, #0d7377 24%, #2155a8 30%, #3b82f6 36%, #6366f1 42%, #5c2d91 48%, #9333ea 54%, #7a1b3a 60%, #b22234 66%, #ef4444 72%, #d97706 78%, #f59e0b 84%, #84cc16 90%, #fef3c7 96%, #ffffff 100%);
      box-shadow:0 2px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
      border:1px solid rgba(255,255,255,0.12);
    }
    .canvas-ink-gradient:hover { box-shadow:0 3px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2); }
    .canvas-ink-gradient-thumb {
      position:absolute; top:-3px; width:14px; height:36px; border-radius:7px;
      background:#fff; border:2px solid rgba(0,0,0,0.2); box-shadow:0 2px 8px rgba(0,0,0,0.5);
      pointer-events:none; transition:left 0.05s;
    }
    .canvas-ink-gradient-swatch {
      width:30px; height:30px; border-radius:50%; flex-shrink:0;
      border:2px solid rgba(255,255,255,0.2); box-shadow:0 2px 6px rgba(0,0,0,0.4), inset 0 -2px 4px rgba(0,0,0,0.15);
      transition:background 0.15s;
    }
    .canvas-font-strip {
      display:flex; align-items:center; gap:8px;
      padding:0; flex-shrink:0; overflow-x:auto;
      -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .canvas-font-strip::-webkit-scrollbar { display:none; }
    .canvas-font-chip {
      flex-shrink:0; cursor:pointer; padding:6px 16px; border-radius:10px;
      border:1px solid rgba(220,195,150,0.15); background:rgba(220,195,150,0.06);
      color:rgba(220,195,150,0.6); font-size:0.85rem; transition:all 0.2s;
      white-space:nowrap;
    }
    .canvas-font-chip:hover { background:rgba(220,195,150,0.12); color:rgba(220,195,150,0.8); border-color:rgba(220,195,150,0.25); }
    .canvas-font-chip.active {
      border-color:rgba(251,191,36,0.4); background:rgba(251,191,36,0.12);
      color:rgba(251,191,36,0.9); box-shadow:0 0 10px rgba(251,191,36,0.1);
    }
    .stationery-link-row {
      text-align:left; margin:0; cursor:pointer; padding:2px 0 0;
    }
    .stationery-link-label {
      font-family:'Cormorant Garamond',serif; font-size:0.75rem;
      color:rgba(100,80,50,0.5); letter-spacing:0.04em; transition:all 0.3s;
      border-bottom:1px solid rgba(100,80,50,0.2); padding-bottom:1px;
    }
    .stationery-link-row:hover .stationery-link-label { color:rgba(60,45,30,0.8); border-color:rgba(60,45,30,0.35); }

    /* Blank envelope — add button */
    .envelope-add-btn {
      background:rgba(245,238,225,0.75);
      border:2px dashed rgba(160,120,60,0.45); border-radius:2px;
      padding:28px 24px; color:rgba(60,45,30,0.7);
      font-family:'Cormorant Garamond',serif; font-size:1rem; font-style:italic;
      cursor:pointer; text-align:center; transition:all 0.3s; margin:0;
      box-shadow:3px 4px 14px rgba(0,0,0,0.3);
      transform:rotate(0.8deg);
      transform-origin:top center; overflow:visible; box-sizing:border-box;
    }
    .envelope-add-btn::before {
      content:''; position:absolute; top:-11px; right:30%; width:26px; height:26px; border-radius:50%; z-index:6;
      background:radial-gradient(circle at 38% 32%, #90caf9, #1e88e5, #0d47a1 70%, #003c8f);
      box-shadow:0 3px 6px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.35),
        inset 0 3px 4px rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.25);
    }
    .envelope-add-btn:hover { background:rgba(245,238,225,0.9); border-color:rgba(160,120,60,0.6); box-shadow:4px 5px 18px rgba(0,0,0,0.35); }

    /* Full-screen letter reading view */
    @keyframes letterUnfold {
      0% { opacity:0; transform:scale(0.7) rotateX(20deg); filter:brightness(0.8); }
      50% { opacity:1; transform:scale(0.95) rotateX(5deg); filter:brightness(0.95); }
      100% { opacity:1; transform:scale(1) rotateX(0deg); filter:brightness(1); }
    }
    .letter-overlay {
      position:fixed; inset:0; z-index:160; display:none; flex-direction:column;
      background:linear-gradient(180deg, #0f0d08 0%, #1a1408 100%);
      perspective:800px;
    }
    .letter-overlay.open { display:flex; }
    .letter-overlay.open::before {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:radial-gradient(ellipse at 50% 30%, rgba(251,191,36,0.04) 0%, transparent 50%);
      animation:readingGlow 6s ease-in-out infinite;
    }
    @keyframes readingGlow {
      0%,100% { opacity:0.6; transform:scale(1); }
      33% { opacity:1; transform:scale(1.02); }
      66% { opacity:0.5; transform:scale(0.98); }
    }
    .letter-overlay.open .letter-overlay-body { animation:letterUnfold 0.5s cubic-bezier(0.34,1.56,0.64,1); }
    .letter-overlay-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 20px; flex-shrink:0;
    }
    .letter-overlay-close { background:rgba(255,255,255,0.08); border:none; color:#94a3b8; cursor:pointer; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
    .letter-overlay-from { font-family:'Cormorant Garamond',serif; font-size:1rem; color:rgba(251,191,36,0.7); font-style:italic; }
    .letter-overlay-body { flex:1; overflow-y:auto; padding:0 16px 40px; display:flex; justify-content:center; }
    .letter-full-page {
      width:100%; max-width:560px; border-radius:4px; padding:36px 30px 48px;
      box-shadow:0 8px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
      min-height:60vh; position:relative; overflow:hidden;
      border:1px solid rgba(0,0,0,0.06);
    }
    .letter-full-page::after {
      content:''; position:absolute;
      left:5%; right:5%; top:40%; height:1px;
      background:linear-gradient(90deg, transparent, rgba(0,0,0,0.03), rgba(0,0,0,0.05), rgba(0,0,0,0.03), transparent);
      pointer-events:none;
    }
    .letter-full-page .letter-entry { margin-bottom:24px; }
    .letter-full-page .letter-time { font-family:'Space Grotesk',sans-serif; font-size:0.75rem; opacity:0.3; margin-bottom:4px; }
    .letter-full-page .letter-body { line-height:2.2; }

    @media (prefers-reduced-motion: reduce) {
      .board-scene::before { animation:none !important; }
      .board-card.swing-opening, .board-card.swing-return { animation:none !important; }
    }