:root{
  --paper:#F4EEE2;        /* warm ivory page */
  --paper-2:#EBE3D2;      /* deeper paper */
  --card:#FCF9F1;         /* writing surface */
  --ink:#322C26;          /* dark warm brown-black */
  --ink-soft:#6A5F52;     /* muted text */
  --ink-faint:#9A8E7D;    /* faint text */
  --line:#E0D6C2;
  --line-strong:#D2C6AD;
  --pen:#29506B;          /* fountain-pen ink blue (accent) */
  --pen-soft:#DCE6EC;
  --pen-deep:#1E3C50;
  --gilt:#B08A3E;
  --danger:#9A402B;
  --serif:"Iowan Old Style","Palatino Linotype","Palatino","Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(50,44,38,.06),0 8px 24px rgba(50,44,38,.06);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--sans);font-size:18px;color:var(--ink);line-height:1.5;
  background:radial-gradient(1200px 600px at 80% -10%,#FBF7EC 0%,rgba(251,247,236,0) 60%),var(--paper);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
button{font-family:var(--sans);cursor:pointer}
input,select,textarea{font-family:var(--sans)}
::selection{background:var(--pen-soft)}
[hidden]{display:none !important}

/* ===================== AUTH ===================== */
#auth{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:clamp(26px,5vw,40px);width:100%;max-width:420px;
}
.auth-crest{font-family:var(--serif);font-style:italic;color:var(--gilt);font-size:34px;text-align:center}
.auth-card h1{font-family:var(--serif);font-weight:600;font-size:28px;text-align:center;margin:6px 0 4px}
.auth-card .lede{color:var(--ink-soft);text-align:center;margin:0 0 24px;font-size:16px}
.auth-field{margin:14px 0}
.auth-field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 6px}
.auth-field input{
  width:100%;border:1px solid var(--line-strong);background:#fff;border-radius:12px;
  padding:13px 14px;font-size:18px;color:var(--ink);outline:none;
}
.auth-field input:focus{border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.auth-err{color:var(--danger);font-size:15px;min-height:20px;margin:4px 2px 0}
.auth-switch{text-align:center;margin-top:18px;color:var(--ink-soft);font-size:15px}
.auth-switch button{background:none;border:none;color:var(--pen);font-size:15px;font-weight:600;text-decoration:underline;padding:2px}

/* ===================== TOP BAR ===================== */
.topbar{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(var(--paper),rgba(244,238,226,.94));
  backdrop-filter:saturate(1.1) blur(4px);
  border-bottom:1px solid var(--line);
  padding:12px clamp(14px,3vw,30px);display:flex;align-items:center;gap:14px;
}
.brand{display:flex;align-items:baseline;gap:9px;background:none;border:none;padding:4px;cursor:pointer}
.brand .mark{font-family:var(--serif);font-style:italic;color:var(--gilt);font-size:22px}
.brand .name{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);white-space:nowrap;max-width:38vw;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:4px;flex:1;justify-content:center}
.tab{border:1px solid transparent;background:none;color:var(--ink-soft);font-size:15px;padding:8px 14px;border-radius:999px;line-height:1}
.tab:hover{color:var(--ink);background:rgba(208,198,173,.25)}
.tab.active{color:var(--pen-deep);background:#fff;border-color:var(--line-strong);box-shadow:var(--shadow);font-weight:600}
.topbar-right{display:flex;align-items:center;gap:8px}
.add-btn{border:none;background:var(--pen);color:#fff;font-size:15px;font-weight:600;padding:10px 16px;border-radius:999px;box-shadow:0 2px 0 var(--pen-deep),0 6px 16px rgba(41,80,107,.25)}
.add-btn:hover{background:var(--pen-deep)}
.add-btn:active{transform:translateY(1px)}
.acct{border:1px solid var(--line-strong);background:#fff;color:var(--ink);border-radius:999px;width:42px;height:42px;font-size:17px;box-shadow:var(--shadow)}
.acct:hover{border-color:var(--ink-faint)}

main{max-width:1040px;margin:0 auto;padding:clamp(16px,3vw,32px) clamp(14px,3vw,30px) 140px}

/* shared bits */
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:0 0 6px}
h1.page{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4.5vw,38px);margin:0 0 4px}
.sub{color:var(--ink-soft);font-size:17px;margin:0 0 22px}
.quiet{color:var(--ink-faint)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.btn{border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-size:16px;padding:10px 16px;border-radius:10px;box-shadow:var(--shadow)}
.btn:hover{border-color:var(--ink-faint)}
.btn.primary{background:var(--pen);color:#fff;border-color:var(--pen-deep)}
.btn.primary:hover{background:var(--pen-deep)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--ink-soft)}
.btn.ghost:hover{color:var(--ink);background:rgba(208,198,173,.25)}
.btn.danger{color:var(--danger);border-color:#E3C9BF}
.btn.danger:hover{background:#F6E9E4}
.btn.big{font-size:18px;padding:14px 22px;border-radius:12px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);margin-bottom:20px}
.panel h2{font-family:var(--serif);font-size:21px;margin:0 0 16px;font-weight:600}

.tag{font-size:12.5px;border-radius:999px;padding:3px 10px;font-weight:600;line-height:1.4;border:1px solid transparent}
.chapter-pill{font-size:12.5px;color:var(--pen-deep);background:var(--pen-soft);border-radius:999px;padding:3px 10px;font-weight:600}

/* ===================== TIMELINE ===================== */
.tl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tl-range{font-family:var(--serif);font-size:20px;color:var(--ink);font-weight:600}
.tl-zoom{display:inline-flex;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.tl-zoom button{border:none;background:#fff;color:var(--ink);width:42px;height:40px;font-size:20px;line-height:1}
.tl-zoom button:hover{background:var(--paper-2)}
.tl-hint{color:var(--ink-faint);font-size:14px}

.timeline{
  position:relative;height:230px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden;touch-action:none;user-select:none;cursor:grab;
}
.timeline.grabbing{cursor:grabbing}
.tl-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tl-pins{position:absolute;inset:0;pointer-events:none}
.tl-pin{position:absolute;transform:translateX(-50%);pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.tl-pin .dot{width:14px;height:14px;border-radius:50%;background:var(--pen);border:3px solid var(--card);box-shadow:0 0 0 2px var(--pen)}
.tl-pin:hover .dot{background:var(--gilt);box-shadow:0 0 0 2px var(--gilt)}
.tl-pin .lbl{
  font-family:var(--serif);font-size:13px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:3px 8px;max-width:150px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;box-shadow:var(--shadow);
}
.tl-pin.below{flex-direction:column-reverse}
.tl-add-hint{
  position:absolute;transform:translate(-50%,-50%);background:var(--pen);color:#fff;
  border-radius:999px;font-size:13px;font-weight:600;padding:5px 11px;pointer-events:none;
  box-shadow:0 4px 12px rgba(41,80,107,.35);white-space:nowrap;opacity:0;transition:opacity .12s;
}
.timeline.hovering .tl-add-hint{opacity:1}

.inview{margin-top:22px}
.inview h2{font-family:var(--serif);font-size:20px;margin:0 0 4px;font-weight:600}
.inview .sub{margin:0 0 16px}

/* memory cards (shared list look) */
.memcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 18px;margin:0 0 12px;box-shadow:var(--shadow);text-align:left;width:100%;display:block;cursor:pointer;transition:transform .06s,border-color .15s}
.memcard:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.memcard .when{font-size:13px;letter-spacing:.04em;color:var(--gilt);font-weight:600;text-transform:uppercase}
.memcard h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:4px 0 6px}
.memcard p{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.memmeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;align-items:center}

/* ===================== CHAPTERS ===================== */
.chapter{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:0 0 16px;box-shadow:var(--shadow)}
.chapter>header{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.chapter h2{font-family:var(--serif);font-size:23px;margin:0;font-weight:600}
.chapter .cnt{font-size:14px;color:var(--ink-faint)}
.chapter .ch-actions{margin-left:auto;display:flex;gap:4px}
.iconbtn{border:none;background:none;color:var(--ink-faint);font-size:18px;padding:6px 8px;border-radius:8px;line-height:1}
.iconbtn:hover{background:rgba(208,198,173,.3);color:var(--ink)}
.ch-mem{border-top:1px solid var(--line);padding:11px 2px 4px;cursor:pointer}
.ch-mem:hover{color:var(--pen-deep)}
.ch-mem .when{font-size:13px;color:var(--gilt);font-weight:600;text-transform:uppercase}
.ch-mem .t{font-family:var(--serif);font-size:18px;margin-top:2px}

/* ===================== OVERVIEW ===================== */
.titleblock{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);margin-bottom:22px}
.titleblock label{display:block;font-size:13px;color:var(--ink-faint);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.titleblock input{width:100%;border:none;border-bottom:2px solid var(--line);background:none;font-family:var(--serif);color:var(--ink);padding:4px 0 8px;outline:none}
.titleblock input:focus{border-color:var(--pen)}
#ovTitle{font-size:30px;font-weight:600}
#ovAuthor{font-size:19px;font-style:italic;color:var(--ink-soft);margin-top:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.stat .n{font-family:var(--serif);font-size:32px;color:var(--pen-deep);line-height:1}
.stat .l{font-size:14px;color:var(--ink-soft);margin-top:6px}
.decade{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.decade .lab{width:64px;font-size:14px;color:var(--ink-soft);text-align:right;flex:0 0 auto}
.decade .barwrap{flex:1;background:var(--paper-2);border-radius:8px;height:18px;overflow:hidden}
.decade .bar{height:100%;background:linear-gradient(90deg,var(--pen),var(--pen-deep));border-radius:8px}
.decade .v{width:34px;font-size:14px;color:var(--ink-faint);flex:0 0 auto}

/* ===================== BOOK ===================== */
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.seg button{border:none;background:#fff;color:var(--ink-soft);padding:10px 16px;font-size:15px}
.seg button.on{background:var(--pen);color:#fff}
.checkline{display:flex;align-items:center;gap:10px;font-size:16px;margin-top:14px}
.checkline input{width:20px;height:20px;accent-color:var(--pen)}
.opt-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.book-preview{background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(22px,5vw,52px);margin-top:22px;box-shadow:var(--shadow);font-family:var(--serif);color:#241f1a}
.book-preview .bp-title{text-align:center;padding:36px 0 46px;border-bottom:1px solid var(--line)}
.book-preview .bp-title h1{font-size:clamp(28px,6vw,44px);margin:0 0 14px;font-weight:600}
.book-preview .bp-title .by{font-style:italic;color:#6a5f52;font-size:20px}
.book-preview .bp-title .meta{margin-top:18px;font-size:14px;color:#9a8e7d;letter-spacing:.05em}
.book-preview h2.ch{font-size:25px;margin:40px 0 6px;font-weight:600}
.book-preview .ch-rule{height:1px;background:var(--line);margin:0 0 16px}
.book-preview h3.mt{font-size:20px;margin:22px 0 2px;font-weight:600}
.book-preview .md{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gilt);font-weight:600;margin:0 0 8px}
.book-preview p{font-size:18px;line-height:1.75;margin:0 0 12px}
.book-preview .bp-tags{font-size:13px;color:#9a8e7d;font-style:italic}

/* ===================== EMPTY / WELCOME ===================== */
.welcome{text-align:center;padding:24px 10px;max-width:600px;margin:0 auto}
.welcome .crest{font-family:var(--serif);font-style:italic;color:var(--gilt);font-size:38px}
.welcome h1{font-family:var(--serif);font-size:clamp(24px,5vw,34px);font-weight:600;margin:8px 0 10px}
.welcome p{color:var(--ink-soft);font-size:18px;line-height:1.6;margin:0 auto 22px;max-width:500px}

/* ===================== EDITOR SHEET ===================== */
#overlay{position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;background:rgba(50,44,38,.34);backdrop-filter:blur(2px);padding:max(16px,3vh) 12px;overflow:auto}
#overlay.show{display:flex}
.sheet{background:var(--paper);border:1px solid var(--line-strong);border-radius:18px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(50,44,38,.3);overflow:hidden;margin:auto}
.sheet header{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.sheet header h2{font-family:var(--serif);font-size:21px;margin:0;font-weight:600}
.sheet .body{padding:6px 22px 4px}
.field{margin:16px 0}
.field>label{display:block;font-size:14px;font-weight:600;margin:0 0 8px}
.field .hint{font-weight:400;color:var(--ink-faint);font-size:13px}
.field input[type=text],.field textarea,.field select{width:100%;border:1px solid var(--line-strong);background:var(--card);border-radius:11px;padding:13px 14px;font-size:18px;color:var(--ink);outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.field textarea{font-family:var(--serif);line-height:1.65;min-height:160px;resize:vertical}
.when-row{display:flex;gap:10px;flex-wrap:wrap}
.when-row .col{flex:1 1 110px}
.when-row label{display:block;font-size:12px;color:var(--ink-faint);margin:0 0 5px}
.tagpicker{display:flex;gap:8px;flex-wrap:wrap}
.tag.toggle{cursor:pointer;background:#fff;border-color:var(--line-strong);color:var(--ink-soft)}
.tag.toggle.on{box-shadow:inset 0 0 0 1px currentColor}
.newtag{display:flex;gap:8px;margin-top:10px}
.newtag input{flex:1;border:1px solid var(--line-strong);background:var(--card);border-radius:10px;padding:9px 12px;font-size:15px;outline:none}
.sheet footer{padding:14px 22px calc(18px + var(--safe-b));display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);margin-top:8px;background:var(--paper)}

.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%) translateY(20px);background:var(--ink);color:#F4EEE2;padding:12px 20px;border-radius:999px;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:all .25s;z-index:80}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* account menu */
.menu{position:absolute;top:60px;right:16px;background:var(--card);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 16px 40px rgba(50,44,38,.22);padding:8px;z-index:40;min-width:200px}
.menu .who{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu .who .nm{font-weight:600}
.menu button{display:block;width:100%;text-align:left;border:none;background:none;padding:11px 12px;border-radius:9px;font-size:16px;color:var(--ink)}
.menu button:hover{background:rgba(208,198,173,.3)}

/* ===================== PRINT ===================== */
#printRoot{display:none}
@media print{
  .topbar,main,#overlay,.toast,.menu,.no-print{display:none !important}
  #printRoot{display:block !important}
  body{background:#fff}
  @page{margin:22mm 18mm}
  #printRoot{font-family:var(--serif);color:#000}
  #printRoot .bp-title{padding:60px 0 80px;text-align:center;border-bottom:1px solid #ccc}
  #printRoot .bp-title h1{font-size:40px;margin:0 0 16px}
  #printRoot .bp-title .by{font-style:italic;font-size:20px}
  #printRoot h2.ch{font-size:26px;margin:30px 0 4px;break-before:page}
  #printRoot h2.ch:first-of-type{break-before:avoid}
  #printRoot .ch-rule{height:1px;background:#bbb;margin-bottom:16px}
  #printRoot h3.mt{font-size:20px;margin:20px 0 2px;break-after:avoid}
  #printRoot .md{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#777;margin-bottom:6px}
  #printRoot p{font-size:13pt;line-height:1.7;margin:0 0 10px;orphans:2;widows:2}
  #printRoot .bp-tags{font-style:italic;color:#888;font-size:11pt}
  #printRoot .memwrap{break-inside:avoid-page}
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:720px){
  body{font-size:17px}
  .tabs{order:5;width:100%;justify-content:space-between;margin-top:6px}
  .topbar{flex-wrap:wrap}
  .brand .name{max-width:46vw}
  .tab{padding:8px 10px;font-size:14px}
  .add-btn span.full{display:none}
  .timeline{height:200px}
  .sheet{border-radius:18px 18px 0 0;min-height:88vh}
  #overlay{padding:0;align-items:flex-end}
}
@media (max-width:420px){
  .add-btn{padding:10px 13px}
}