:root{
      --bg:#ffffff;
      --ink:#111111;
      --muted:#6b6b6b;
      --muted2:#9a9a9a;
      --soft:#f7f7f7;
      --soft2:#eeeeee;
      --line:#ededed;
      --hair:#e3e3e3;
      --ui: ui-sans-serif, system-ui, -apple-system, sans-serif;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      --w:720px;
    }

    *{box-sizing:border-box; -webkit-font-smoothing:antialiased;}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;}
    body{
      padding:40px 18px;
      font-family:var(--ui);
      line-height:1.6;
      letter-spacing:-0.2px;
    }
    .wrap{max-width:var(--w); margin:0 auto;}

    header{
      display:grid;
      grid-template-columns:1fr auto;
      gap:16px;
      align-items:start;
      margin-bottom:10px;
    }

.title{
      margin:0;
      font-weight:900;
      font-size:22px;
      line-height:1.1;
      letter-spacing:-0.2px;
    }

.moodline{
      margin:6px 0 0;
      font-size:13px;
      color:#333;
      font-weight:400;
      word-break:keep-all;
    }

.sig{
      margin:0;
      font-size:12px;
      color:var(--muted);
      font-weight:400;
    }

    .brandStroke{
      height:1px;
      background:var(--line);
      margin:0 2px 18px;
      display:block;
      clear:both;
    }

.meta-right{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:10px;
      white-space:nowrap;
    }
    .lang-wrapper{display:flex; align-items:center; gap:8px;}
.lang-label{
      font-size:10px;
      color:var(--muted);
      font-weight:700;
      font-family:var(--mono);
    }
    .lang-select-ui{
      padding:4px 28px 4px 10px;
      font-size:11px;
      font-weight:900;
      font-family:var(--mono);
      border:1px solid var(--hair);
      border-radius:6px;
      appearance:none;
      background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
      cursor:pointer;
      outline:none;
    }

.metadata{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted2);
      text-align:right;
      line-height:1.4;
      font-weight:700;
    }

.auth-links{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:2px;

      margin-top:0px;
    }

.meta-links{
      display:flex;
      align-items:center;
      gap:4px;
      justify-content:flex-end;
    }

.account-meta,
.meta-link{
      all:unset;
      font-family:var(--mono);
      font-size:10px;
      color:#111111;
      font-weight:700;
      letter-spacing:0.3px;
      line-height:1.4;
      cursor:pointer;
      opacity:.68;
      transition:opacity .15s ease;
      border-bottom:1px solid rgba(17,17,17,0.18);
      padding-bottom:1px;
    }

.account-meta:hover,
.meta-link:hover{
      opacity:1;
      border-bottom:1px solid rgba(17,17,17,0.35);
    }
    .d-grid{
      display:grid;
      grid-template-columns:1fr 248px;
      gap:40px;

      margin-top:30px;
    }

    .section-label{
      font-family:var(--mono);
      font-size:10px;
      font-weight:900;
      color:var(--muted);
      text-transform:uppercase;
      margin-bottom:16px;
      display:flex;
      align-items:baseline;
      gap:8px;
      letter-spacing:1px;
      user-select:none;
    }

    .filter-row{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin:-6px 0 14px;
    }
    .chip{
      border:1px solid var(--line);
      background:#fff;
      border-radius:999px;
      padding:6px 10px;
      font-family:var(--mono);
      font-size:10px;
      font-weight:900;
      letter-spacing:0.4px;
      color:#111;
      cursor:pointer;
      user-select:none;
      -webkit-tap-highlight-color:transparent;
      opacity:0.65;
      transition:opacity .18s ease, transform .18s ease, border-color .18s ease;
    }
    .chip:hover{opacity:0.9;}
    .chip:active{transform:translateY(1px);}
    .chip.on{opacity:1;border-color:#111;}

    .heatmap{
      display:flex;
      gap:4px;
      align-items:flex-end;
      height:40px;
      cursor:pointer;
    }
    .h-bar{
      flex:1;
      background:var(--soft);
      border-radius:2px;
      transition:transform .18s ease, background .18s ease, opacity .18s ease;
      opacity:1;
      min-width:0;
    }
    .h-bar:hover{background:var(--ink); transform:scaleY(1.12);}



    
.library-home{margin-top:34px;}
    .library-list{
      border-top:1px solid var(--line);
      background:#fff;
    }
    .library-row{
      display:grid;
      grid-template-columns:28px 1fr auto 14px;
      align-items:center;
      gap:12px;
      padding:14px 2px;
      border-bottom:1px solid var(--line);
      cursor:pointer;
      user-select:none;
      -webkit-tap-highlight-color:transparent;
    }
    .library-row:active{transform:translateY(1px);}
    .folder-icon{
      width:18px;
      height:18px;
      display:block;
      margin:0 auto;
      background-repeat:no-repeat;
      background-position:center;
      background-size:18px 18px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7.5z'/%3E%3C/svg%3E");
      opacity:.9;
    }
    .library-name{
      font-size:13px;
      font-weight:500;
      line-height:1.35;
      min-width:0;
      word-break:keep-all;
    }
    .library-count{
      font-family:var(--mono);
      font-size:11px;
      color:var(--muted2);
      font-weight:900;
      white-space:nowrap;
    }
    .library-arrow{
      font-family:var(--mono);
      font-size:14px;
      color:var(--muted2);
      font-weight:900;
      text-align:right;
    }

    .folder-view{
      margin-top:34px;
      display:none;
    }
    .folder-view.show{display:block;}

    .folder-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }
    .folder-head-left{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }
    .back-btn{
      border:none;
      background:none;
      padding:0;
      width:24px;
      height:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      -webkit-tap-highlight-color:transparent;
    }
    .back-btn svg{
      width:18px;
      height:18px;
      stroke:#111;
      stroke-width:2.2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .back-btn:active{transform:translateY(1px);}
    .folder-head-title{
      font-family:var(--mono);
      font-size:10px;
      font-weight:900;
      color:var(--muted);
      letter-spacing:1px;
      text-transform:uppercase;
      min-width:0;
    }
    .folder-head-title strong{
      color:#111;
      letter-spacing:0.4px;
    }
    .folder-head-count{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted2);
      font-weight:900;
      letter-spacing:0.4px;
      white-space:nowrap;
    }

    .record-list{
      border-top:1px solid var(--line);
    }
    .record-row{
      display:grid;
      grid-template-columns:1fr 14px;
      align-items:center;
      gap:10px;
      padding:14px 2px;
      border-bottom:1px solid var(--line);
      cursor:pointer;
      user-select:none;
      -webkit-tap-highlight-color:transparent;
    }
    .record-row:active{transform:translateY(1px);}

    .record-row.locked{
      opacity:0.58;
      cursor:pointer;
    }
    .record-row.locked .record-line{
      filter:blur(2.2px);
    }
    .record-lock{
      font-family:var(--mono);
      font-size:12px;
      color:#111;
      font-weight:900;
      text-align:right;
    }
    .h-bar.locked{
      opacity:0.25;
    }

    .record-line{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      flex-wrap:wrap;
    }
    .record-date,
    .record-text{
      font-size:13px;
      font-weight:500;
      color:#111;
      letter-spacing:-0.2px;
      line-height:1.35;
    }
    .record-date{white-space:nowrap;}
    .record-text{
      min-width:0;
      flex:1 1 auto;
      word-break:keep-all;
    }
    .record-text.qn-preview{
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
      white-space:normal;
      line-height:1.45;
      word-break:break-word;
      flex-basis:100%;
      margin-top:2px;
    }
    .record-arrow{
      font-family:var(--mono);
      font-size:14px;
      color:var(--muted2);
      font-weight:900;
      text-align:right;
    }

    
@media (max-width: 780px){
      body{padding:32px 15px;}
      header{grid-template-columns:1fr auto; gap:12px;}
      .meta-right{align-items:flex-end;}
      .metadata,.account-meta{text-align:right;}
      .d-grid{grid-template-columns:1fr; gap:46px;}
      .record-line{gap:6px;}
      .record-date,.record-text{font-size:13px;}
      .detail-date{font-size:14px;}
      .detail-title{font-size:16px;}
      .memory-summary-row{grid-template-columns:repeat(3,1fr); gap:7px;}
      .memory-summary-label{font-size:8px;}
      .memory-summary-value{font-size:11px;}
      .memory-chart{height:150px;}
      .memory-section-head{align-items:flex-start;}
      .memory-controls{gap:6px;}
      .modal-actions{flex-direction:column;}
      .delete-account-row{text-align:left;}
    }

    

/* Archive grouped view */
.archive-group-title{
  margin:18px 0 8px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:900;
  letter-spacing:0.8px;
  color:#111;
  text-transform:uppercase;
}
.record-list .archive-group-title:first-child,
.library-list .archive-group-title:first-child,
.memory-mini-list .archive-group-title:first-child{
  margin-top:0;
}

/* Archive Index dropdown browser */
.archive-picker-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 18px;
}
.archive-picker-label{
  font-family:var(--mono);
  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
  color:var(--muted2);
  text-transform:uppercase;
}
.archive-picker-select{
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:6px 26px 6px 11px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:900;
  color:#111;
  appearance:none;
  outline:none;
  cursor:pointer;
  min-height:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
}
.archive-selected-heading{
  font-family:var(--mono);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.1px;
  color:var(--muted);
  text-transform:uppercase;
  margin:0 0 2px;
  padding:0 2px 8px;
}