/* === CV Book — PDF Viewer + Vietnamese Notes === */
:root {
  --bg: #f0f2f5;
  --surface: #ffffff;
  --surface2: #f8f9fb;
  --text: #1a1d23;
  --text2: #5f6b7a;
  --border: #e2e6ed;
  --accent: #3b6cb4;
  --accent-soft: #eaf1fa;
  --accent-text: #2c5282;
  --callout-bg: #fef9e7;
  --callout-line: #e6c850;
  --code-bg: #edf2f7;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --topbar-h: 48px;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Charter", Georgia, "Times New Roman", serif;
  --split: 54%;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;font-size:16px;line-height:1.75
}

/* Topbar */
#topbar{
  height:var(--topbar-h);min-height:var(--topbar-h);
  background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.6rem;padding:0 .9rem;
  font-family:var(--font-ui);font-size:.82rem;color:var(--text2);
  box-shadow:var(--shadow);z-index:10
}
#topbar .brand{font-weight:700;color:var(--text);white-space:nowrap;font-size:.88rem;letter-spacing:-.01em}
#topbar .brand span{color:var(--accent)}
#topbar select{
  padding:.22rem .4rem;border:1px solid var(--border);border-radius:4px;
  background:var(--surface);font-size:.76rem;color:var(--text);cursor:pointer;max-width:200px;font-family:var(--font-ui)
}
#topbar .sep{width:1px;height:18px;background:var(--border)}
#topbar button{
  padding:.25rem .45rem;border:1px solid var(--border);border-radius:4px;
  background:var(--surface);cursor:pointer;font-size:.78rem;color:var(--text2);
  transition:.12s;font-family:var(--font-ui)
}
#topbar button:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}
#topbar button:disabled{opacity:.35;cursor:default}
#topbar .pager{display:flex;align-items:center;gap:.2rem}
#topbar .pager input[type=number]{
  width:44px;padding:.22rem .2rem;border:1px solid var(--border);border-radius:4px;
  text-align:center;font-size:.76rem;background:var(--surface);font-family:var(--font-ui)
}
#topbar .pager span{font-size:.73rem;white-space:nowrap}
#topbar .pager .book-page{color:var(--text2);font-size:.7rem}
#topbar .zoom{display:flex;gap:1px;margin-left:auto}

/* Split */
#split{flex:1;display:flex;overflow:hidden}

/* PDF pane */
#pdf-pane{
  width:var(--split);min-width:200px;background:#dde1e6;position:relative;
  overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:1.5rem
}
#pdf-pane canvas{
  display:block;background:#fff;
  box-shadow:0 2px 20px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);border-radius:1px
}
#pdf-loading{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--text2);font-family:var(--font-ui);font-size:.9rem
}

/* Divider */
#divider{
  width:6px;min-width:6px;cursor:col-resize;
  background:var(--border);transition:background .15s;z-index:5
}
#divider:hover,#divider.dragging{background:var(--accent)}

/* Notes pane */
#notes-pane{
  flex:1;min-width:200px;background:var(--surface2);
  display:flex;flex-direction:column;overflow:hidden
}
#notes-head{
  padding:.6rem 1rem;border-bottom:1px solid var(--border);
  background:var(--surface);font-family:var(--font-ui)
}
#notes-head .sec-title{font-size:.82rem;font-weight:600;color:var(--accent-text);line-height:1.3}
#notes-head .sec-pages{font-size:.7rem;color:var(--text2);margin-top:.1rem}
#notes-body{flex:1;overflow-y:auto;padding:1.2rem 1.4rem}
#notes-body h2{font-size:1.15rem;color:var(--accent-text);margin-bottom:.7rem;font-weight:700}
#notes-body h4{font-size:.93rem;color:var(--accent-text);margin:1rem 0 .35rem}
#notes-body p{margin-bottom:.65rem}
#notes-body ul,#notes-body ol{margin:.35rem 0 .35rem 1.4rem}
#notes-body li{margin-bottom:.2rem}
#notes-body strong{color:var(--accent-text)}
#notes-body em{color:var(--text2)}
#notes-body code{background:var(--code-bg);padding:.1rem .3rem;border-radius:3px;font-size:.86em;font-family:"SF Mono","Cascadia Code",monospace}
.callout{background:var(--callout-bg);border-left:4px solid var(--callout-line);padding:.65rem .9rem;margin:.7rem 0;border-radius:0 6px 6px 0;font-size:.92em}
.callout strong{color:var(--accent-text)}
table{width:100%;border-collapse:collapse;margin:.7rem 0;font-size:.86em}
th,td{padding:.35rem .5rem;border:1px solid var(--border);text-align:left}
th{background:#f5f6f8;font-weight:600}
mjx-container{overflow-x:auto;max-width:100%}
#notes-body .placeholder{
  display:flex;align-items:center;justify-content:center;height:180px;
  color:var(--text2);font-family:var(--font-ui);font-size:.88rem;text-align:center;line-height:1.6
}

/* Mobile */
@media(max-width:800px){
  #split{flex-direction:column}
  #divider{width:100%;height:5px;min-width:unset;cursor:row-resize}
  #pdf-pane{width:100%!important;min-width:unset;height:50%;padding:.6rem}
  #notes-pane{flex:none;height:50%}
}