/* =====================================================================
   Scriptorium — homepage (directory layout)
   Bilingual two-pane: navy header + gold accent stripe; cream sidebar
   with journal cards; cream main panel with selected journal's profile,
   bilingual fields, and tab navigation.
   ===================================================================== */

:root{
  --ink:#1a1a1a; --ink-soft:#2a2a2a; --muted:#6a6a6a;
  --rule:#e0d8b8; --rule-soft:#ece5c8; --rule-line:#d8d2bb;
  --bg:#fdfaf0; --cream:#faf2d9; --cream-2:#f4ead0; --paper:#ffffff;
  --navy:#112a55; --navy-deep:#0a1d40; --navy-accent:#1d3a72;
  --gold:#d4a13a; --gold-deep:#b88720; --gold-soft:#f0d68f;
  --red:#b13a3d; --red-deep:#8a2628; --green:#3a8a3a;
  --link:#1f4a8a; --link-hover:#b88720;
  --shadow-sm:0 1px 2px rgba(20,16,4,.06), 0 4px 10px -6px rgba(20,16,4,.08);
  --shadow-md:0 2px 4px rgba(20,16,4,.06), 0 14px 28px -16px rgba(20,16,4,.18);
  --radius:10px;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:"Source Sans 3",-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.6;
}
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:underline; text-underline-offset:3px; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- top navy header ---------- */
.tn{ background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%); color:#fff; border-bottom:4px solid var(--gold); }
.tn-inner{ max-width:1480px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:18px; }
.tn-logo{
  width:42px; height:42px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #f1c862 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color:var(--navy-deep); font-family:"Source Serif 4","Noto Serif SC",Georgia,serif;
  font-weight:700; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}
.tn-titles{ display:flex; flex-direction:column; line-height:1.15; }
.tn-titles h1{ margin:0; font-family:"Source Serif 4","Noto Serif SC",Georgia,serif; font-size:1.32rem; font-weight:600; letter-spacing:.02em; }
.tn-titles p{ margin:2px 0 0; font-size:.7rem; letter-spacing:.18em; color:#cdd5e6; text-transform:uppercase; }
.tn-titles p span{ color:#f1c862; margin:0 6px; }
.tn-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.tn-btn{
  background:rgba(255,255,255,.05); color:#e8edf6;
  border:1px solid rgba(255,255,255,.18);
  padding:7px 12px; border-radius:7px; font-size:.84rem; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .15s ease,border-color .15s ease;
}
.tn-btn:hover{ background:rgba(212,161,58,.16); border-color:rgba(212,161,58,.45); color:#f5e3b2; }
.tn-btn.gold{ background:rgba(212,161,58,.18); border-color:rgba(212,161,58,.55); color:#f5e3b2; }

/* ---------- layout ---------- */
.layout{ max-width:1480px; margin:0 auto; padding:24px 24px 64px; display:grid; grid-template-columns:360px minmax(0,1fr); gap:24px; align-items:start; }

/* ---------- sidebar ---------- */
.sb{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px 18px 14px; position:sticky; top:18px; max-height:calc(100vh - 36px); overflow-y:auto; }
.sb-head{ display:flex; align-items:baseline; gap:10px; padding:0 0 10px; border-bottom:1px solid var(--rule-line); margin-bottom:14px; }
.sb-head h2{ margin:0; font-family:"Source Serif 4","Noto Serif SC",Georgia,serif; font-size:1.1rem; font-weight:600; color:var(--navy); letter-spacing:.04em; }
.sb-head .count{ margin-left:auto; font-size:.78rem; color:var(--muted); letter-spacing:.06em; }
.sb-head .badge{ font-size:.72rem; background:var(--paper); border:1px solid var(--rule-line); border-radius:4px; padding:1px 6px; color:var(--muted); }
.sb-search{ width:100%; padding:9px 12px; border:1px solid var(--rule-line); border-radius:7px; font:inherit; font-size:.92rem; background:var(--paper); color:var(--ink); margin:0 0 14px; transition:border-color .15s ease; }
.sb-search:focus{ outline:none; border-color:var(--navy-accent); box-shadow:0 0 0 3px rgba(29,58,114,.15); }
.sb-row{ display:flex; gap:10px; margin:0 0 6px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.sb-row b{ color:var(--ink); font-weight:600; }
.sb-row .row-r{ margin-left:auto; }
.sb-sort{ display:flex; gap:8px; margin:0 0 14px; }
.sb-sort select{ flex:1; padding:7px 10px; font:inherit; font-size:.88rem; background:var(--paper); border:1px solid var(--rule-line); border-radius:6px; color:var(--ink); }
.sb-sort .dir-btn{ padding:6px 12px; border:1px solid var(--rule-line); background:var(--paper); border-radius:6px; font-size:.86rem; color:var(--ink); }
.sb-filter-label{ margin:14px 0 6px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sb-filter-label b{ color:var(--ink); font-weight:600; }
.pills{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 4px; }
.pill{ border:1px solid var(--rule-line); background:var(--paper); color:var(--ink); padding:5px 12px; border-radius:999px; font-size:.82rem; }
.pill:hover{ border-color:var(--gold-deep); }
.pill.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.sb-add{ width:100%; margin:18px 0 14px; padding:11px 14px; background:linear-gradient(180deg,#f3c75b 0%,var(--gold) 100%); color:var(--navy-deep); border:1px solid var(--gold-deep); border-radius:8px; font-size:.95rem; font-weight:700; letter-spacing:.04em; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 10px -6px rgba(176,128,24,.5); }
.sb-add:hover{ filter:brightness(1.04); }

/* ---------- journal cards ---------- */
.jc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.jc{ background:var(--paper); border:1px solid var(--rule-line); border-radius:9px; padding:12px 12px 10px; display:grid; grid-template-columns:56px 1fr; gap:12px; cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease; position:relative; }
.jc:hover{ border-color:var(--gold-deep); box-shadow:0 6px 16px -10px rgba(176,128,24,.45); }
.jc.active{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft), 0 8px 18px -10px rgba(176,128,24,.5); }
.jc.placeholder{ border-style:dashed; cursor:default; opacity:.78; }
.jc.placeholder:hover{ box-shadow:none; transform:none; }
.jc .thumb{ margin:0; width:56px; height:78px; border-radius:3px; overflow:hidden; box-shadow:0 4px 10px -6px rgba(0,0,0,.4); background:#fff; flex-shrink:0; position:relative; }
.jc .thumb svg, .jc .thumb img{ width:100%; height:100%; display:block; object-fit:cover; }
.jc-meta{ min-width:0; display:flex; flex-direction:column; gap:2px; font-size:.86rem; }
.jc-meta h3{ margin:0 0 3px; font-family:"Source Serif 4","Noto Serif SC",Georgia,serif; font-size:.97rem; font-weight:600; line-height:1.22; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jc-meta .zh{ font-size:.78rem; color:var(--muted); margin:0 0 4px; }
.jc-tags{ display:flex; gap:5px; flex-wrap:wrap; margin:2px 0; }
.jc-tag{ display:inline-block; font-size:.66rem; letter-spacing:.06em; padding:1px 6px; border-radius:3px; font-weight:600; }
.jc-tag.country{ background:#e6ecf7; color:var(--navy); }
.jc-tag.platform{ background:#fff4d6; color:var(--gold-deep); }
.jc-tag.status{ background:#e6f5e6; color:#2a6a2a; }
.jc-meta .pub{ font-size:.78rem; color:var(--muted); margin:2px 0 0; }
.jc-meta .has-content{ font-size:.74rem; color:var(--red-deep); margin:3px 0 0; letter-spacing:.04em; }

/* ---------- main panel ---------- */
.mp{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px 26px 26px; min-height:calc(100vh - 120px); }
.mp-actions{ display:flex; justify-content:flex-end; gap:8px; margin:0 0 16px; }
.mp-btn{ background:var(--paper); color:var(--ink); border:1px solid var(--rule-line); padding:6px 12px; border-radius:6px; font-size:.82rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:5px; }
.mp-btn:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }
.mp-btn.primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.mp-btn.primary:hover{ background:var(--navy-deep); color:#f5e3b2; }
.mp-btn.danger{ background:var(--red-deep); color:#fff; border-color:var(--red-deep); }
.mp-btn.danger:hover{ background:#6c1a1c; }

.pane{ display:none; }
.pane.active{ display:block; }

.profile{ display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start; padding:0 0 22px; }
.profile-cover{ margin:0; width:220px; border-radius:6px; overflow:hidden; box-shadow:0 14px 32px -14px rgba(20,16,4,.5); background:#fff; position:relative; }
.profile-cover svg, .profile-cover img{ width:100%; height:auto; display:block; aspect-ratio:220/296; object-fit:cover; }
.profile-cover-cap{ display:block; text-align:center; font-size:.78rem; color:var(--link); margin-top:8px; letter-spacing:.04em; }
.profile-name{ font-family:"Source Serif 4","Noto Serif SC",Georgia,serif; font-size:2rem; font-weight:700; color:var(--ink); margin:0 0 6px; letter-spacing:.005em; }
.profile-subtitle{ font-style:italic; color:var(--muted); margin:0 0 18px; font-size:1.02rem; }
.profile-subtitle .zh{ font-style:normal; color:var(--ink-soft); margin-right:8px; }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin:0 0 16px; }
.field{ border-bottom:1px solid var(--rule-line); padding:0 0 8px; }
.field .lbl{ display:block; font-size:.7rem; letter-spacing:.16em; color:var(--muted); margin:0 0 4px; text-transform:uppercase; }
.field .lbl b{ color:var(--ink); font-weight:600; font-style:normal; text-transform:none; letter-spacing:0; font-size:.85rem; margin-right:6px; }
.field .val{ display:block; font-size:1rem; color:var(--ink); }
.field .val em{ color:var(--muted); font-style:italic; font-size:.86em; }

.profile-source{ font-size:.92rem; margin:8px 0 0; }
.profile-source .lbl{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-right:8px; }
.profile-source .lbl b{ color:var(--ink); font-weight:600; font-size:.85rem; letter-spacing:0; text-transform:none; }
.profile-source a{ font-size:.95rem; }

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:2px; border-bottom:2px solid var(--gold); margin:18px 0 0; }
.tab{ padding:10px 14px; font-size:.92rem; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-2px; letter-spacing:.04em; background:none; border-top:none; border-left:none; border-right:none; }
.tab b{ color:var(--ink); font-weight:600; margin-right:4px; font-size:.95rem; }
.tab i{ font-style:normal; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-left:1px; }
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--navy); border-bottom-color:var(--navy); background:linear-gradient(180deg,transparent 50%,rgba(255,235,170,.45) 100%); }
.tab.active b{ color:var(--navy); }

.tab-content{ background:var(--paper); border:1px solid var(--rule-line); border-top:none; border-radius:0 0 8px 8px; padding:22px 24px 24px; margin-top:0; }
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }

.section-title{ font-family:"Source Serif 4","Noto Serif SC",Georgia,serif; color:var(--navy); font-size:1.32rem; font-weight:600; margin:0 0 10px; padding:0 0 6px; border-bottom:1px solid var(--gold); display:flex; align-items:baseline; gap:10px; }
.section-title i{ font-style:italic; font-size:.92rem; color:var(--muted); font-weight:400; }
.section-title.spaced{ margin-top:24px; }

.tab-pane p{ margin:0 0 12px; max-width:74ch; }
.tab-pane p.lead{ font-size:1.04rem; color:var(--ink-soft); }
.bullets{ margin:6px 0 18px; padding:0 0 0 22px; }
.bullets li{ margin:6px 0; }
.bullets li b{ color:var(--ink); }
.bullets li em{ color:var(--muted); }

/* cover gallery */
.cover-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:14px; margin:14px 0 18px; padding:14px; background:#fdfaf0; border:1px dashed var(--rule); border-radius:8px; }
.cg-card{ margin:0; text-align:center; position:relative; }
.cg-card svg, .cg-card img{ width:100%; aspect-ratio:8/11; display:block; border-radius:3px; box-shadow:0 6px 14px -8px rgba(0,0,0,.3); object-fit:cover; }
.cg-card figcaption{ margin-top:6px; font-size:.78rem; color:var(--muted); }
.gallery-add{ background:var(--paper); border:1px solid var(--rule-line); color:var(--ink); padding:5px 12px; border-radius:6px; font-size:.82rem; margin-left:auto; }

.open-btn{ display:inline-block; margin:18px 0 0; padding:11px 18px; background:var(--navy); color:#fff; border-radius:8px; font-weight:600; letter-spacing:.04em; font-size:.98rem; }
.open-btn:hover{ background:var(--navy-deep); color:#f5e3b2; text-decoration:none; }

.toc-mini{ list-style:none; margin:14px 0 18px; padding:0; }
.toc-mini li{ padding:8px 0; border-bottom:1px solid var(--rule-soft); font-size:.94rem; display:grid; grid-template-columns:1fr auto; gap:14px; }
.toc-mini li:last-child{ border-bottom:none; }
.toc-mini .pages{ color:var(--muted); font-size:.85rem; white-space:nowrap; }
.toc-mini .author{ color:var(--muted); font-size:.86rem; font-style:italic; display:block; }

.editors-list{ list-style:none; margin:6px 0 18px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 18px; }
.editors-list li{ padding:6px 0; border-bottom:1px solid var(--rule-soft); font-size:.94rem; }
.editors-list li b{ color:var(--ink); }
.editors-list li em{ color:var(--muted); font-style:italic; font-size:.86rem; display:block; }

/* ---------- empty pane ---------- */
.empty-pane{ text-align:center; padding:80px 24px 100px; color:var(--muted); }
.empty-pane h2{ font-family:"Source Serif 4","Noto Serif SC",Georgia,serif; color:var(--ink); font-size:1.6rem; margin:0 0 10px; }

/* ---------- footer ---------- */
.foot{ text-align:center; padding:36px 24px; color:var(--muted); font-size:.82rem; letter-spacing:.06em; }
.foot .flourish{ color:var(--gold-deep); margin:0 8px; }

/* =====================================================================
   Drag-and-drop cover replacement (for .profile-cover, .jc .thumb, .cg-card)
   ===================================================================== */
.dz{ cursor:pointer; }
.dz-hover{ outline:3px dashed var(--gold); outline-offset:4px; background:rgba(212,161,58,.15) !important; }
.dz-hint{ position:absolute; inset:0; background:rgba(20,16,4,.6); color:#fff; display:none; align-items:center; justify-content:center; text-align:center; font-size:.76rem; letter-spacing:.06em; font-weight:600; padding:8px; pointer-events:none; border-radius:inherit; line-height:1.35; }
.dz:hover .dz-hint{ display:flex; }
.dz-reset{ position:absolute; top:6px; right:6px; background:rgba(0,0,0,.65); color:#fff; border:none; width:22px; height:22px; border-radius:50%; font-size:.85rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s ease; z-index:2; padding:0; }
.dz:hover .dz-reset{ opacity:1; }
.dz-reset:hover{ background:var(--red); }
.dz-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--navy-deep); color:#fff; padding:10px 18px; border-radius:6px; box-shadow:0 8px 22px -10px rgba(0,0,0,.5); font-size:.88rem; z-index:1000; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.dz-toast.show{ opacity:1; }

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .layout{ grid-template-columns:1fr; gap:18px; }
  .sb{ position:static; max-height:none; }
}
@media (max-width: 720px){
  .tn-actions .tn-btn{ display:none; }
  .tn-actions .tn-btn.gold{ display:inline-flex; }
  .profile{ grid-template-columns:1fr; gap:18px; }
  .profile-cover{ width:160px; margin:0 auto; }
  .field-grid{ grid-template-columns:1fr; }
  .tabs{ overflow-x:auto; }
  .tab{ flex:0 0 auto; }
}

/* =====================================================================
   Add-journal modal + inline editable fields
   ===================================================================== */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(10,12,20,.55);
  display:none; align-items:center; justify-content:center;
  z-index:100;
  backdrop-filter: blur(3px);
}
.modal-backdrop.open{ display:flex; }
.modal-card{
  background:var(--paper);
  border-radius:12px;
  padding:24px 26px;
  width:min(480px, 92vw);
  box-shadow: 0 18px 48px -12px rgba(0,0,0,.4);
  border:1px solid var(--rule);
}
.modal-card h3{
  margin:0 0 6px;
  font-family:"Source Serif 4","Noto Serif SC",Georgia,serif;
  font-size:1.4rem; font-weight:600; color:var(--navy);
}
.modal-card .modal-sub{
  margin:0 0 18px;
  font-size:.86rem;
  color:var(--muted);
}
.modal-card label{
  display:block;
  margin:0 0 14px;
  font-size:.86rem;
  color:var(--ink);
  font-weight:600;
}
.modal-card label small{
  display:block;
  font-weight:400;
  color:var(--muted);
  font-size:.78rem;
  margin-top:3px;
}
.modal-card input[type=text],
.modal-card input[type=file]{
  width:100%; margin-top:6px;
  padding:9px 12px;
  border:1px solid var(--rule-line);
  border-radius:6px;
  font:inherit; font-size:.95rem;
  background:#fff; color:var(--ink);
}
.modal-card input[type=text]:focus{
  outline:none; border-color:var(--navy-accent);
  box-shadow:0 0 0 3px rgba(29,58,114,.15);
}
.modal-actions{
  display:flex; gap:8px; justify-content:flex-end;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--rule-soft);
}

/* inline editable fields */
.editable{
  cursor:text;
  border-bottom:1px dashed transparent;
  transition: border-color .15s ease, background .15s ease;
  border-radius:2px;
  padding:1px 4px;
  min-height:1em;
}
.editable:hover{ border-bottom-color:var(--gold-deep); background:rgba(212,161,58,.08); }
.editable:focus{
  outline:none;
  background:rgba(255,235,170,.45);
  border-bottom-color:var(--navy);
  border-bottom-style:solid;
}
.editable:empty::before{
  content:attr(data-placeholder);
  color:#b5a87a;
  font-style:italic;
  pointer-events:none;
}
.editable:focus:empty::before{ color:#aaa; }

/* empty content tab */
.tab-empty{
  padding:36px 24px;
  text-align:left;
  color:var(--muted);
  border:1px dashed var(--rule);
  border-radius:8px;
  background:#fdfaf0;
  font-size:.95rem;
  min-height:120px;
}
.tab-empty:focus{
  outline:none;
  background:#fff;
  border-color:var(--navy);
  border-style:solid;
  color:var(--ink);
}
.tab-empty:empty::before{
  content:attr(data-placeholder);
  color:#b5a87a;
  font-style:italic;
}

/* user-added card subtle indicator */
.jc.user-added::after{
  content:"自定义";
  position:absolute;
  top:6px; right:8px;
  font-size:.6rem;
  background:var(--gold);
  color:var(--navy-deep);
  padding:1px 5px;
  border-radius:3px;
  letter-spacing:.04em;
}