.recall-card{
      position:relative;
      background:var(--ink);
      color:#fff;
      padding:18px 18px 16px;
      border-radius:18px;
      min-height:190px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:transform .18s ease, opacity .18s ease;
      cursor:pointer;
      user-select:none;
      overflow:hidden;
    }
    .recall-card:hover{transform:rotate(-1deg) scale(1.02);}
    @keyframes recallShake{
      0%{transform:rotate(0deg) scale(1);}
      20%{transform:rotate(-1.2deg) scale(1.015);}
      40%{transform:rotate(1.2deg) scale(1.015);}
      60%{transform:rotate(-0.8deg) scale(1.01);}
      80%{transform:rotate(0.8deg) scale(1.01);}
      100%{transform:rotate(0deg) scale(1);}
    }
    .recall-card.recall-shake{animation:recallShake .34s ease both;}
    .recall-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      margin-bottom:10px;
    }
    .recall-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:36px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.22);
      font-family:var(--mono);
      font-size:10px;
      font-weight:900;
      letter-spacing:0.6px;
      color:#fff;
      background:rgba(255,255,255,0.06);
    }
    .recall-count{
      font-family:var(--mono);
      font-size:10px;
      font-weight:900;
      letter-spacing:0.4px;
      color:rgba(255,255,255,0.82);
    }
    .recall-body-wrap{
      position:relative;
      flex:1;
      display:flex;
      align-items:flex-start;
      min-height:92px;
    }
    .quote{
      margin:0;
      font-size:12px;
      font-weight:500;
      line-height:1.72;
      white-space:pre-wrap;
      word-break:keep-all;
      transition:opacity .24s ease, transform .24s ease, filter .24s ease;
      will-change:opacity, transform, filter;
    }
    .quote.oneLine{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .quote.anim-out{
      opacity:0;
      transform:translateY(8px);
    }
    .quote.anim-in{
      opacity:1;
      transform:translateY(0);
    }
    .quote.is-blurred{
      filter:blur(3px);
      opacity:0.5;
    }
    .recall-lock{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:7px;
      background:rgba(0,0,0,0.18);
      pointer-events:none;
    }
    .recall-lock-icon{
      font-size:18px;
      line-height:1;
    }
    .recall-lock-text{
      font-family:var(--mono);
      font-size:10px;
      font-weight:900;
      letter-spacing:0.7px;
      color:#fff;
    }
    .date{
      margin-top:16px;
      font-family:var(--mono);
      font-size:11px;
      font-weight:700;
      opacity:.92;
      letter-spacing:0.25px;
      white-space:pre-line;
      color:#f2f2f2;
      line-height:1.45;
    }

    .quick-wrap{position:relative;}
    .quick-input{
      width:100%;
      border:none;
      background:var(--soft);
      padding:18px 44px 18px 18px;
      border-radius:12px;
      font-family:var(--ui);
      font-size:14px;
      outline:none;
      transition:background .18s ease;
    }
    .quick-input:focus{background:var(--soft2);}
    .save-icon{
      position:absolute;
      top:50%;
      right:10px;
      transform:translateY(-50%);
      width:34px;
      height:34px;
      border-radius:12px;
      border:none;
      background:transparent;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      -webkit-tap-highlight-color:transparent;
      opacity:0.9;
    }
    .save-icon:active{transform:translateY(-50%) translateY(1px);}
    .save-icon svg{width:16px;height:16px; stroke: var(--muted2); opacity:0.9;}
    .save-icon[disabled]{opacity:0.35; cursor:not-allowed;}
    .quick-input::placeholder{font-size:13px; color:var(--muted2);}

    .card{
      border:1px solid var(--line);
      border-radius:18px;
      padding:16px;
      background:#fff;
      font-family:var(--mono);
      font-size:12px;
      line-height:2;
      cursor:pointer;
      user-select:none;
      -webkit-tap-highlight-color:transparent;
    }
    .card:active{transform:translateY(1px);}
    .row{display:flex; justify-content:space-between;}

    .upgrade-banner{
      display:none;
      margin-top:18px;
      border:1px solid var(--hair);
      border-radius:18px;
      background:var(--soft);
      color:var(--ink);
      padding:16px;
    }
    .upgrade-banner.show{display:block;}
    .upgrade-eyebrow{
      font-family:var(--mono);
      font-size:10px;
      font-weight:900;
      letter-spacing:0.7px;
      margin-bottom:8px;
      color:var(--muted);
    }
    .upgrade-title{
      margin:0 0 6px;
      font-size:14px;
      font-weight:800;
      line-height:1.4;
      color:#111;
      word-break:keep-all;
    }
    .upgrade-desc{
      margin:0 0 12px;
      font-size:11px;
      line-height:1.5;
      color:var(--muted);
      word-break:keep-all;
    }
    .upgrade-btn{
      width:100%;
      padding:12px 14px;
      font-family:var(--mono);
      font-size:11px;
      font-weight:900;
      border:none;
      background:var(--ink);
      color:#fff;
      border-radius:12px;
      letter-spacing:0.5px;
      cursor:pointer;
    }

    .delete-account-row{
      display:none;
      margin-top:14px;
      text-align:right;
    }
    .delete-account-row.show{display:block;}
    .delete-account-link{
      display:inline-block;
      font-family:var(--mono);
      font-size:10px;
      font-weight:900;
      letter-spacing:0.3px;
      color:#111;
      cursor:pointer;
      user-select:none;
      text-decoration:none;
    }

    .modal-backdrop{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.42);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:10000;
    }
    .modal-backdrop.show{display:flex;}
    .modal{
      width:min(100%, 420px);
      background:#fff;
      border-radius:22px;
      padding:20px;
      box-shadow:0 18px 60px rgba(0,0,0,0.16);
    }
    .modal-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      margin-bottom:12px;
    }
    .modal-title{
      margin:0;
      font-size:18px;
      font-weight:900;
      line-height:1.3;
      letter-spacing:-0.2px;
    }
    .modal-close{
      border:none;
      background:none;
      padding:0;
      width:28px;
      height:28px;
      font-size:22px;
      line-height:1;
      cursor:pointer;
      color:#111;
    }
    .modal-body{
      font-size:14px;
      color:#333;
      line-height:1.7;
      word-break:keep-all;
    }
    .modal-note{
      margin:12px 0 0;
      padding:10px 12px;
      border-radius:12px;
      background:var(--soft);
      font-size:12px;
      color:#666;
      line-height:1.55;
    }
    .modal-actions{
      display:flex;
      gap:10px;
      margin-top:18px;
    }
    .btn-ghost,
    .btn-solid{
      flex:1;
      border-radius:12px;
      padding:12px 14px;
      font-family:var(--mono);
      font-size:11px;
      font-weight:900;
      letter-spacing:0.5px;
      cursor:pointer;
    }
    .btn-ghost{
      border:1px solid var(--line);
      background:#fff;
      color:#111;
    }
    .btn-solid{
      border:none;
      background:#111;
      color:#fff;
    }
    .plan-stack{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:18px;
    }
    .plan-btn{
      width:100%;
      border:none;
      border-radius:14px;
      padding:14px 16px;
      background:#111;
      color:#fff;
      text-align:left;
      cursor:pointer;
      font-family:var(--ui);
    }
    .plan-btn.secondary{
      background:#222;
    }
    .plan-btn small{
      display:block;
      font-family:var(--mono);
      font-size:10px;
      font-weight:900;
      letter-spacing:0.5px;
      opacity:0.8;
      margin-bottom:4px;
    }
    .plan-btn strong{
      display:block;
      font-size:14px;
      font-weight:800;
      line-height:1.35;
      letter-spacing:-0.2px;
    }

    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      background:#111;
      color:#fff;
      padding:10px 12px;
      border-radius:999px;
      font-size:12px;
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease;
      font-family:var(--mono);
      font-weight:900;
      letter-spacing:0.3px;
      z-index:9999;
    }
    .toast.show{opacity:0.92;}

    .exportHost{
      position:fixed;
      left:-99999px;
      top:0;
      width:1px;
      height:1px;
      overflow:hidden;
    }

    
.site-footer{
      margin-top:8px;
      padding-top:20px;
      padding-bottom:60px;
      text-align:center;
    }

    .logoImg{
      width:62px;
      height:auto;
      display:inline-block;
      opacity:1;
      filter:none;
    }

    .footer-links{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
      margin-top:16px;
      margin-bottom:18px;
    }

    .footer-links a{
      color:#111;
      text-decoration:none;
      font-size:11px;
      font-weight:900;
      letter-spacing:0.2px;
    }

    .footer-contact{
      color:var(--muted2)!important;
      text-decoration:none;
      font-size:11px;
      font-weight:900;
      letter-spacing:0.2px;
    }

    .footer-copy{
      margin:0;
      font-size:10px;
      color:var(--muted);
      font-weight:400;
    }